diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 2d826aa97..39a215adf 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -205,7 +205,7 @@ jobs:
       fail-fast: false
       matrix:
         # run copies of the current job in parallel
-        containers: [1, 2, 3, 4, 5]
+        containers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
 
     steps:
       - name: Checkout
diff --git a/CHANGELOG.md b/CHANGELOG.md
index ef71f6531..eb4723d3a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Add missing loading retry button (Admin RoomTypesIndex) ([#1588])
+- Add reload button for replacement room type (RoomTypesDeleteButton) ([#1588])
 - Permission restrictions to prevent non-superusers from editing and deleting superusers ([#1651])
 - Permission restrictions to prevent non-superusers from assigning the superuser role ([#1651])
 - Environment variable for configuring restricted permissions that cannot be assigned to non-superuser roles ([#1651])
@@ -21,11 +23,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Real-time input validation on create superuser command ([#1651])
 - Error handling in room statistics ([#1535], [#1600])
 - Error handling in room attendance ([#1535], [#1600])
+- Close multiselect dropdowns on selection ([#1588])
+- Permissions loading behaviour (AdminRolesView) ([#1588])
 - Improve frontend tests for login page ([#1794])
 - Access code input type on room settings section to hide browser arrow buttons ([#1827], [#1829])
 
 ### Fixed
 
+- Search not disabled during loading (admin index pages) ([#1675], [#1588])
+- Overlays not shown after loading error (admin view pages) ([#1677], [#1588])
+- Dialog buttons not disabled correctly during actions on admin pages ([#1711], [#1588])
+- Error messages (AdminServerPoolsView, AdminRoomTypesView, AdminSettings) ([#1588])
+- Error handling (AdminUsersIndex, AdminServerPoolsView (staleError), RoomTypesDeleteButton (404 error)) ([#1588])
+- BBB logo image url input ([#1751], [#1588])
+- Access superuser attribute ([#1588])
+- Accessing multiselect ref ([#1588])
+- Overlay reload buttons ([#1588])
 - Wrong error message shown for 422 errors when verifying email ([#1744], [#1758])
 - Broken banner link style 'warning' ([#1759], [#1760])
 - Inconsistent select/multiselect loading states ([#1772])
@@ -331,6 +344,7 @@ You can find the changelog for older versions there [here](https://github.com/TH
 [#1559]: https://github.com/THM-Health/PILOS/issues/1559
 [#1561]: https://github.com/THM-Health/PILOS/pull/1561
 [#1565]: https://github.com/THM-Health/PILOS/pull/1565
+[#1588]: https://github.com/THM-Health/PILOS/pull/1588
 [#1569]: https://github.com/THM-Health/PILOS/pull/1569
 [#1595]: https://github.com/THM-Health/PILOS/pull/1595
 [#1600]: https://github.com/THM-Health/PILOS/pull/1600
@@ -342,13 +356,17 @@ You can find the changelog for older versions there [here](https://github.com/TH
 [#1618]: https://github.com/THM-Health/PILOS/pull/1618
 [#1636]: https://github.com/THM-Health/PILOS/issues/1636
 [#1651]: https://github.com/THM-Health/PILOS/issues/1651
+[#1675]: https://github.com/THM-Health/PILOS/issues/1675
+[#1677]: https://github.com/THM-Health/PILOS/issues/1677
 [#1678]: https://github.com/THM-Health/PILOS/pull/1678
 [#1679]: https://github.com/THM-Health/PILOS/issues/1679
 [#1702]: https://github.com/THM-Health/PILOS/pull/1702
 [#1704]: https://github.com/THM-Health/PILOS/pull/1704
+[#1711]: https://github.com/THM-Health/PILOS/issues/1711
 [#1721]: https://github.com/THM-Health/PILOS/issues/1721
 [#1724]: https://github.com/THM-Health/PILOS/pull/1724
 [#1744]: https://github.com/THM-Health/PILOS/issues/1744
+[#1751]: https://github.com/THM-Health/PILOS/issues/1751
 [#1758]: https://github.com/THM-Health/PILOS/pull/1758
 [#1759]: https://github.com/THM-Health/PILOS/issues/1759
 [#1760]: https://github.com/THM-Health/PILOS/pull/1760
diff --git a/app/Http/Requests/UpdateSettings.php b/app/Http/Requests/UpdateSettings.php
index daed11ab3..3b94a499f 100644
--- a/app/Http/Requests/UpdateSettings.php
+++ b/app/Http/Requests/UpdateSettings.php
@@ -77,7 +77,7 @@ public function rules()
             'recording_attendance_retention_period' => ['required', 'numeric', Rule::enum(TimePeriod::class)],
             'recording_recording_retention_period' => ['required', 'numeric',  Rule::enum(TimePeriod::class)->except($disabledRecordingRetentionPeriods)],
 
-            'bbb_logo' => ['string', 'max:255'],
+            'bbb_logo' => ['nullable', 'string', 'max:255'],
             'bbb_logo_file' => ['image', 'max:500'],
             'bbb_style' => ['nullable', 'file', 'max:500'],
             'bbb_default_presentation' => ['nullable', 'file', 'max:'.(config('bigbluebutton.max_filesize') * 1000), 'mimes:'.config('bigbluebutton.allowed_file_mimes')],
diff --git a/resources/js/components/AppBanner.vue b/resources/js/components/AppBanner.vue
index 7fa728cf2..893338e8f 100644
--- a/resources/js/components/AppBanner.vue
+++ b/resources/js/components/AppBanner.vue
@@ -1,5 +1,6 @@
 <template>
   <Message
+    data-test="app-banner"
     :style="{
       'border-color': background,
       'background-color': background,
@@ -20,14 +21,19 @@
     <template #messageicon> </template>
 
     <div class="container flex flex-col gap-2">
-      <p v-if="title" class="m-0 text-lg font-bold">
-        <i v-if="icon" :class="`${icon}`" />
+      <p v-if="title" class="m-0 text-lg font-bold" data-test="banner-title">
+        <i v-if="icon" :class="`${icon}`" data-test="banner-icon" />
         {{ title }}
       </p>
-      <p class="m-0 whitespace-pre-wrap">
+      <p class="m-0 whitespace-pre-wrap" data-test="banner-message">
         {{ message }}
       </p>
-      <a v-if="link" :href="link" :target="`_${linkTarget}`">
+      <a
+        v-if="link"
+        :href="link"
+        :target="`_${linkTarget}`"
+        data-test="banner-link-button"
+      >
         <Button
           :link="linkStyle === 'link'"
           :style="linkStyle === 'link' ? { color: color } : {}"
diff --git a/resources/js/components/AppFooter.vue b/resources/js/components/AppFooter.vue
index 9f7f4f545..f4c195217 100644
--- a/resources/js/components/AppFooter.vue
+++ b/resources/js/components/AppFooter.vue
@@ -9,6 +9,7 @@
       "
       ref="footer_container"
       class="border-t bg-white p-2 border-surface dark:bg-surface-900"
+      data-test="app-footer"
     >
       <div class="container">
         <div
@@ -21,6 +22,7 @@
               link
               :href="settingsStore.getSetting('general.legal_notice_url')"
               class="p-0 text-sm"
+              data-test="legal-notice-button"
             >
               {{ $t("app.footer.legal_notice") }}
             </Button>
@@ -41,6 +43,7 @@
               rel="privacy-policy nofollow"
               :href="settingsStore.getSetting('general.privacy_policy_url')"
               class="p-0 text-sm"
+              data-test="privacy-policy-button"
             >
               {{ $t("app.footer.privacy_policy") }}
             </Button>
@@ -53,11 +56,13 @@
               class="p-0 text-sm"
               href="https://github.com/THM-Health/PILOS"
               target="_blank"
+              data-test="github-button"
               ><raw-text>PILOS</raw-text></Button
             >
             <span
               v-if="settingsStore.getSetting('general.version')"
               class="ml-2 text-sm"
+              data-test="version"
             >
               {{ $t("app.version") }}
               {{ settingsStore.getSetting("general.version") }}
diff --git a/resources/js/components/ColorSelect.vue b/resources/js/components/ColorSelect.vue
index aa9aa94e0..80fcb66e0 100644
--- a/resources/js/components/ColorSelect.vue
+++ b/resources/js/components/ColorSelect.vue
@@ -10,6 +10,7 @@
         selected: isColorSelected(color),
         'pointer-events-none cursor-not-allowed opacity-80': props.disabled,
       }"
+      data-test="color-button"
       @click="selectColor(color)"
     >
       <div class="overlay">
diff --git a/resources/js/components/FileInput.vue b/resources/js/components/FileInput.vue
index 97c6bc9df..dd6b4b911 100644
--- a/resources/js/components/FileInput.vue
+++ b/resources/js/components/FileInput.vue
@@ -4,6 +4,7 @@
     class="p-button p-component shrink-0"
     :class="{ 'p-disabled': disabled }"
     tabindex="0"
+    data-test="file-input-button"
     @keyup.enter="fileInputRef.click()"
     @keyup.space="fileInputRef.click()"
   >
@@ -17,6 +18,7 @@
     class="sr-only"
     :disabled="disabled"
     :accept="accept"
+    data-test="file-input-input"
     @input="fileSelected"
   />
 </template>
diff --git a/resources/js/components/LoginTabLocal.vue b/resources/js/components/LoginTabLocal.vue
index f7afb74e5..9808ff68c 100644
--- a/resources/js/components/LoginTabLocal.vue
+++ b/resources/js/components/LoginTabLocal.vue
@@ -48,6 +48,7 @@
           link
           class="self-start p-0"
           to="/forgot_password"
+          data-test="forgot-password-button"
         >
           {{ $t("auth.forgot_password") }}
         </Button>
diff --git a/resources/js/components/RoleSelect.vue b/resources/js/components/RoleSelect.vue
index 6ae39de9a..ccd0ce0a5 100644
--- a/resources/js/components/RoleSelect.vue
+++ b/resources/js/components/RoleSelect.vue
@@ -1,7 +1,7 @@
 <template>
   <InputGroup>
     <multiselect
-      ref="rolesMultiselectRef"
+      ref="roles-multiselect"
       :aria-labelledby="ariaLabelledby"
       data-test="role-dropdown"
       :placeholder="$t('admin.roles.select_roles')"
@@ -44,7 +44,7 @@
         </div>
       </template>
       <template #tag="{ option, remove }">
-        <Chip :label="option.name">
+        <Chip :label="option.name" data-test="role-chip">
           <span>{{ option.name }}</span>
           <Button
             v-if="
@@ -56,6 +56,7 @@
             class="h-5 w-5 rounded-full text-sm"
             icon="fas fa-xmark"
             :aria-label="$t('admin.users.remove_role', { name: option.name })"
+            data-test="remove-role-button"
             @click="remove(option)"
           />
         </Chip>
@@ -68,6 +69,7 @@
             outlined
             icon="fa-solid fa-arrow-left"
             :label="$t('app.previous_page')"
+            data-test="previous-page-button"
             @click="loadRoles(Math.max(1, currentPage - 1))"
           />
           <Button
@@ -76,6 +78,7 @@
             outlined
             icon="fa-solid fa-arrow-right"
             :label="$t('app.next_page')"
+            data-test="next-page-button"
             @click="loadRoles(currentPage + 1)"
           />
         </div>
@@ -94,7 +97,7 @@
 </template>
 
 <script setup>
-import { onBeforeMount, ref, watch } from "vue";
+import { onBeforeMount, ref, useTemplateRef, watch } from "vue";
 import { useApi } from "../composables/useApi.js";
 import { Multiselect } from "vue-multiselect";
 
@@ -139,7 +142,7 @@ const loading = ref(false);
 const loadingError = ref(false);
 const currentPage = ref(1);
 const hasNextPage = ref(false);
-const rolesMultiselectRef = ref(null);
+const rolesMultiselectRef = useTemplateRef("roles-multiselect");
 
 watch(
   () => props.modelValue,
diff --git a/resources/js/components/RoomTypeBadge.vue b/resources/js/components/RoomTypeBadge.vue
index fb5b8b9d8..17c6f7920 100644
--- a/resources/js/components/RoomTypeBadge.vue
+++ b/resources/js/components/RoomTypeBadge.vue
@@ -5,6 +5,7 @@
     :pt="{
       root: { style: { background: roomType.color } },
     }"
+    data-test="room-type-badge"
   >
     {{ roomType.name }}
   </Tag>
diff --git a/resources/js/components/SettingsFileSelector.vue b/resources/js/components/SettingsFileSelector.vue
index 27f44da9b..474217b5f 100644
--- a/resources/js/components/SettingsFileSelector.vue
+++ b/resources/js/components/SettingsFileSelector.vue
@@ -18,6 +18,7 @@
           severity="danger"
           :label="$t('app.cancel')"
           icon="fa-solid fa-times"
+          data-test="settings-file-cancel-button"
           @click="resetFileUpload"
         />
 
@@ -27,6 +28,7 @@
           severity="danger"
           :label="$t('app.delete')"
           icon="fa-solid fa-trash"
+          data-test="settings-file-delete-button"
           @click="fileDeleted = true"
         />
         <Button
@@ -34,6 +36,7 @@
           severity="secondary"
           icon="fa-solid fa-undo"
           :label="$t('app.undo_delete')"
+          data-test="settings-file-undo-delete-button"
           @click="fileDeleted = false"
         />
 
@@ -44,6 +47,7 @@
           :href="fileUrl"
           target="_blank"
           :label="$t('app.view')"
+          data-test="settings-file-view-button"
           icon="fa-solid fa-eye"
         />
       </div>
diff --git a/resources/js/components/SettingsImageSelector.vue b/resources/js/components/SettingsImageSelector.vue
index 81fbe28e6..ef777429c 100644
--- a/resources/js/components/SettingsImageSelector.vue
+++ b/resources/js/components/SettingsImageSelector.vue
@@ -9,6 +9,7 @@
           type="text"
           :invalid="urlInvalid"
           :required="!showDelete"
+          data-test="settings-image-url-input"
         />
 
         <FileInput
@@ -27,6 +28,7 @@
           severity="danger"
           :label="$t('app.cancel')"
           icon="fa-solid fa-times"
+          data-test="settings-image-cancel-button"
           @click="resetFileUpload"
         />
 
@@ -36,6 +38,7 @@
           severity="danger"
           :label="$t('app.delete')"
           icon="fa-solid fa-trash"
+          data-test="settings-image-delete-button"
           @click="imageDeleted = true"
         />
         <Button
@@ -43,6 +46,7 @@
           severity="secondary"
           :label="$t('app.undo_delete')"
           icon="fa-solid fa-undo"
+          data-test="settings-image-undo-delete-button"
           @click="imageDeleted = false"
         />
       </div>
@@ -66,6 +70,7 @@
         :src="newImageUrl ?? imageUrl"
         :width="previewWidth"
         :alt="previewAlt"
+        data-test="settings-image-preview"
       />
     </div>
   </div>
diff --git a/resources/js/components/SettingsRolesDeleteButton.vue b/resources/js/components/SettingsRolesDeleteButton.vue
index 24e1a167f..429666765 100644
--- a/resources/js/components/SettingsRolesDeleteButton.vue
+++ b/resources/js/components/SettingsRolesDeleteButton.vue
@@ -5,6 +5,7 @@
     :disabled="isBusy"
     severity="danger"
     icon="fa-solid fa-trash"
+    data-test="roles-delete-button"
     @click="showModal"
   />
 
@@ -18,6 +19,7 @@
     :dismissable-mask="!isBusy"
     :closeable="!isBusy"
     :draggable="false"
+    data-test="roles-delete-dialog"
   >
     <span>
       {{ $t("admin.roles.delete.confirm", { name: props.name }) }}
@@ -25,13 +27,16 @@
     <template #footer>
       <Button
         :label="$t('app.no')"
+        :disabled="isBusy"
         severity="secondary"
+        data-test="dialog-cancel-button"
         @click="modalVisible = false"
       />
       <Button
         :label="$t('app.yes')"
         severity="danger"
         :loading="isBusy"
+        data-test="dialog-continue-button"
         @click="deleteRole"
       />
     </template>
diff --git a/resources/js/components/SettingsRoomTypesDeleteButton.vue b/resources/js/components/SettingsRoomTypesDeleteButton.vue
index 547e9827d..08ae998f8 100644
--- a/resources/js/components/SettingsRoomTypesDeleteButton.vue
+++ b/resources/js/components/SettingsRoomTypesDeleteButton.vue
@@ -29,39 +29,52 @@
       <label for="replacement-room-type">{{
         $t("admin.room_types.delete.replacement")
       }}</label>
-      <Select
-        id="replacement-room-type"
-        v-model.number="replacement"
-        data-test="replacement-room-type-dropdown"
-        autofocus
-        :disabled="isBusy || loadingRoomTypes"
-        :loading="loadingRoomTypes"
-        :class="{
-          'p-invalid': formErrors.fieldInvalid('replacement_room_type'),
-        }"
-        :options="replacementRoomTypes"
-        :placeholder="$t('admin.room_types.delete.no_replacement')"
-        option-value="value"
-        option-label="text"
-        aria-describedby="replacement-help"
-        show-clear
-        :pt="{
-          listContainer: {
-            'data-test': 'replacement-room-type-dropdown-items',
-          },
-          option: {
-            'data-test': 'replacement-room-type-dropdown-option',
-          },
-        }"
-      >
-        <template #clearicon="{ clearCallback }">
-          <i
-            class="fa-solid fa-times p-icon p-select-clear-icon"
-            role="button"
-            @click.stop="clearCallback"
-          />
-        </template>
-      </Select>
+      <InputGroup>
+        <Select
+          id="replacement-room-type"
+          v-model.number="replacement"
+          data-test="replacement-room-type-dropdown"
+          autofocus
+          :disabled="
+            isBusy || loadingRoomTypes || replacementRoomTypesLoadingError
+          "
+          :loading="loadingRoomTypes"
+          :class="{
+            'p-invalid': formErrors.fieldInvalid('replacement_room_type'),
+          }"
+          :options="replacementRoomTypes"
+          :placeholder="$t('admin.room_types.delete.no_replacement')"
+          option-value="value"
+          option-label="text"
+          aria-describedby="replacement-help"
+          show-clear
+          :pt="{
+            listContainer: {
+              'data-test': 'replacement-room-type-dropdown-items',
+            },
+            option: {
+              'data-test': 'replacement-room-type-dropdown-option',
+            },
+          }"
+        >
+          <template #clearicon="{ clearCallback }">
+            <i
+              class="fa-solid fa-times p-icon p-select-clear-icon"
+              role="button"
+              @click.stop="clearCallback"
+            />
+          </template>
+        </Select>
+        <Button
+          v-if="replacementRoomTypesLoadingError"
+          :disabled="isBusy"
+          outlined
+          severity="secondary"
+          icon="fa-solid fa-sync"
+          data-test="replacement-room-types-reload-button"
+          @click="loadReplacementRoomTypes()"
+        />
+      </InputGroup>
       <FormError :errors="formErrors.fieldError('replacement_room_type')" />
       <small id="replacement-help">{{
         $t("admin.room_types.delete.replacement_info")
@@ -70,13 +83,16 @@
     <template #footer>
       <Button
         :label="$t('app.no')"
+        :disabled="isBusy"
         severity="secondary"
+        data-test="dialog-cancel-button"
         @click="modalVisible = false"
       />
       <Button
         :label="$t('app.yes')"
         severity="danger"
         :loading="isBusy"
+        data-test="dialog-continue-button"
         @click="deleteRoomType"
       />
     </template>
@@ -110,6 +126,7 @@ const isBusy = ref(false);
 const replacement = ref(null);
 const replacementRoomTypes = ref([]);
 const loadingRoomTypes = ref(false);
+const replacementRoomTypesLoadingError = ref(false);
 
 /**
  * Shows the delete modal
@@ -124,6 +141,8 @@ function showModal() {
 
 function loadReplacementRoomTypes() {
   loadingRoomTypes.value = true;
+  replacementRoomTypesLoadingError.value = false;
+
   api
     .call("roomTypes")
     .then((response) => {
@@ -139,6 +158,7 @@ function loadReplacementRoomTypes() {
         });
     })
     .catch((error) => {
+      replacementRoomTypesLoadingError.value = true;
       api.error(error);
     })
     .finally(() => {
@@ -174,7 +194,6 @@ function deleteRoomType() {
       if (error.response && error.response.status === env.HTTP_NOT_FOUND) {
         modalVisible.value = false;
         emit("notFound");
-        return;
       }
       api.error(error);
     })
diff --git a/resources/js/components/SettingsServerPoolsDeleteButton.vue b/resources/js/components/SettingsServerPoolsDeleteButton.vue
index 66b5df7ae..b205e3d9c 100644
--- a/resources/js/components/SettingsServerPoolsDeleteButton.vue
+++ b/resources/js/components/SettingsServerPoolsDeleteButton.vue
@@ -5,6 +5,7 @@
     :disabled="isBusy"
     icon="fa-solid fa-trash"
     severity="danger"
+    data-test="server-pools-delete-button"
     @click="showModal"
   />
 
@@ -18,6 +19,14 @@
     :header="$t('admin.server_pools.delete.title')"
     :style="{ width: '500px' }"
     modal
+    data-test="server-pools-delete-dialog"
+    :pt="{
+      pcCloseButton: {
+        root: {
+          'data-test': 'dialog-header-close-button',
+        },
+      },
+    }"
   >
     <span>
       {{ $t("admin.server_pools.delete.confirm", { name: props.name }) }}
@@ -42,13 +51,16 @@
     <template v-if="deleteFailedRoomTypes == null" #footer>
       <Button
         :label="$t('app.no')"
+        :disabled="isBusy"
         severity="secondary"
+        data-test="dialog-cancel-button"
         @click="modalVisible = false"
       />
       <Button
         :label="$t('app.yes')"
         :loading="isBusy"
         severity="danger"
+        data-test="dialog-continue-button"
         @click="deleteServerPool"
       />
     </template>
diff --git a/resources/js/components/SettingsServersDeleteButton.vue b/resources/js/components/SettingsServersDeleteButton.vue
index a48968165..03348ca4e 100644
--- a/resources/js/components/SettingsServersDeleteButton.vue
+++ b/resources/js/components/SettingsServersDeleteButton.vue
@@ -5,6 +5,7 @@
     icon="fa-solid fa-trash"
     :disabled="isBusy"
     :aria-label="$t('admin.servers.delete.item', { name: props.name })"
+    data-test="servers-delete-button"
     @click="showModal()"
   />
   <Dialog
@@ -17,19 +18,23 @@
     :closeable="!isBusy"
     :dismissable-mask="!isBusy"
     :draggable="false"
+    data-test="servers-delete-dialog"
   >
     <span>{{ $t("admin.servers.delete.confirm", { name: props.name }) }}</span>
 
     <template #footer>
       <Button
         :label="$t('app.no')"
+        :disabled="isBusy"
         severity="secondary"
+        data-test="dialog-cancel-button"
         @click="modalVisible = false"
       />
       <Button
         :label="$t('app.yes')"
         :loading="isBusy"
         severity="danger"
+        data-test="dialog-continue-button"
         @click="deleteServer"
       />
     </template>
diff --git a/resources/js/components/SettingsUsersDeleteButton.vue b/resources/js/components/SettingsUsersDeleteButton.vue
index 46f6aa725..7efa53b59 100644
--- a/resources/js/components/SettingsUsersDeleteButton.vue
+++ b/resources/js/components/SettingsUsersDeleteButton.vue
@@ -15,6 +15,7 @@
     :disabled="isBusy"
     severity="danger"
     icon="fa-solid fa-trash"
+    data-test="users-delete-button"
     @click="showModal"
   />
   <Dialog
@@ -27,6 +28,7 @@
     :dismissable-mask="!isBusy"
     :closeable="!isBusy"
     :draggable="false"
+    data-test="users-delete-dialog"
   >
     <span>
       {{
@@ -39,13 +41,16 @@
     <template #footer>
       <Button
         :label="$t('app.no')"
+        :disabled="isBusy"
         severity="secondary"
+        data-test="dialog-cancel-button"
         @click="modalVisible = false"
       />
       <Button
         :label="$t('app.yes')"
         severity="danger"
         :loading="isBusy"
+        data-test="dialog-continue-button"
         @click="deleteUser"
       />
     </template>
diff --git a/resources/js/components/SettingsUsersResetPasswordButton.vue b/resources/js/components/SettingsUsersResetPasswordButton.vue
index bee1b1139..f36d21fca 100644
--- a/resources/js/components/SettingsUsersResetPasswordButton.vue
+++ b/resources/js/components/SettingsUsersResetPasswordButton.vue
@@ -16,6 +16,7 @@
     :disabled="isBusy"
     severity="warn"
     icon="fa-solid fa-key"
+    data-test="users-reset-password-button"
     @click="showModal"
   />
 
@@ -29,6 +30,7 @@
     :dismissable-mask="!isBusy"
     :closeable="!isBusy"
     :draggable="false"
+    data-test="users-reset-password-dialog"
   >
     <span>
       {{
@@ -42,12 +44,15 @@
       <Button
         :label="$t('app.no')"
         severity="secondary"
+        :disabled="isBusy"
+        data-test="dialog-cancel-button"
         @click="modalVisible = false"
       />
       <Button
         :label="$t('app.yes')"
         severity="danger"
         :loading="isBusy"
+        data-test="dialog-continue-button"
         @click="resetPassword"
       />
     </template>
diff --git a/resources/js/components/UserTabEmail.vue b/resources/js/components/UserTabEmail.vue
index 7bd7febad..8da387fd3 100644
--- a/resources/js/components/UserTabEmail.vue
+++ b/resources/js/components/UserTabEmail.vue
@@ -121,7 +121,7 @@ const isBusy = ref(false);
 const validationRequiredEmail = ref(null);
 
 const isOwnUser = computed(() => {
-  return authStore.currentUser.id === props.user.id;
+  return authStore.currentUser?.id === props.user.id;
 });
 
 onBeforeMount(() => {
diff --git a/resources/js/components/UserTabSecurityRolesAndPermissionsSection.vue b/resources/js/components/UserTabSecurityRolesAndPermissionsSection.vue
index 8bb41fa09..e942c4205 100644
--- a/resources/js/components/UserTabSecurityRolesAndPermissionsSection.vue
+++ b/resources/js/components/UserTabSecurityRolesAndPermissionsSection.vue
@@ -16,7 +16,7 @@
               isBusy || viewOnly || !userPermissions.can('editUserRole', model)
             "
             :automatic-roles="automaticRoles"
-            :disable-superuser="!authStore.currentUser.superuser"
+            :disable-superuser="!authStore.currentUser?.superuser"
             @loading-error="(value) => (rolesLoadingError = value)"
             @busy="(value) => (rolesLoading = value)"
           />
@@ -31,6 +31,7 @@
           :loading="isBusy"
           :label="$t('app.save')"
           icon="fa-solid fa-save"
+          data-test="users-roles-save-button"
         />
       </div>
     </form>
diff --git a/resources/js/views/AdminIndex.vue b/resources/js/views/AdminIndex.vue
index 3f65441a2..5ba745d77 100644
--- a/resources/js/views/AdminIndex.vue
+++ b/resources/js/views/AdminIndex.vue
@@ -7,7 +7,10 @@
         v-if="userPermissions.can('viewAny', 'SettingsPolicy')"
         class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-4"
       >
-        <router-link :to="{ name: 'admin.settings' }">
+        <router-link
+          :to="{ name: 'admin.settings' }"
+          data-test="admin-settings-link"
+        >
           <Card
             :pt="{
               title: { class: 'text-center text-primary' },
@@ -33,7 +36,7 @@
         v-if="userPermissions.can('viewAny', 'UserPolicy')"
         class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-4"
       >
-        <router-link :to="{ name: 'admin.users' }">
+        <router-link :to="{ name: 'admin.users' }" data-test="admin-users-link">
           <Card
             :pt="{
               title: { class: 'text-center text-primary' },
@@ -59,7 +62,7 @@
         v-if="userPermissions.can('viewAny', 'RolePolicy')"
         class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-4"
       >
-        <router-link :to="{ name: 'admin.roles' }">
+        <router-link :to="{ name: 'admin.roles' }" data-test="admin-roles-link">
           <Card
             :pt="{
               title: { class: 'text-center text-primary' },
@@ -85,7 +88,10 @@
         v-if="userPermissions.can('viewAny', 'RoomTypePolicy')"
         class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-4"
       >
-        <router-link :to="{ name: 'admin.room_types' }">
+        <router-link
+          :to="{ name: 'admin.room_types' }"
+          data-test="admin-room-types-link"
+        >
           <Card
             :pt="{
               title: { class: 'text-center text-primary' },
@@ -111,7 +117,10 @@
         v-if="userPermissions.can('viewAny', 'ServerPolicy')"
         class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-4"
       >
-        <router-link :to="{ name: 'admin.servers' }">
+        <router-link
+          :to="{ name: 'admin.servers' }"
+          data-test="admin-servers-link"
+        >
           <Card
             :pt="{
               title: { class: 'text-center text-primary' },
@@ -137,7 +146,10 @@
         v-if="userPermissions.can('viewAny', 'ServerPoolPolicy')"
         class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-4"
       >
-        <router-link :to="{ name: 'admin.server_pools' }">
+        <router-link
+          :to="{ name: 'admin.server_pools' }"
+          data-test="admin-server-pools-link"
+        >
           <Card
             :pt="{
               title: { class: 'text-center text-primary' },
diff --git a/resources/js/views/AdminLayout.vue b/resources/js/views/AdminLayout.vue
index 69066d0dc..1801ad552 100644
--- a/resources/js/views/AdminLayout.vue
+++ b/resources/js/views/AdminLayout.vue
@@ -12,6 +12,7 @@
             :home="home"
             class="px-0 py-2"
             :model="breakcrumbs"
+            data-test="admin-breadcrumb"
           >
             <template #item="{ item, props }">
               <router-link
diff --git a/resources/js/views/AdminRolesIndex.vue b/resources/js/views/AdminRolesIndex.vue
index f5937e195..41a0b90ce 100644
--- a/resources/js/views/AdminRolesIndex.vue
+++ b/resources/js/views/AdminRolesIndex.vue
@@ -2,14 +2,16 @@
   <div>
     <div class="mb-6 flex flex-col justify-between md:flex-row">
       <div>
-        <InputGroup>
+        <InputGroup data-test="role-search">
           <InputText
             v-model="filter"
+            :disabled="isBusy"
             :placeholder="$t('app.search')"
             @keyup.enter="loadData(1)"
           />
           <Button
             v-tooltip="$t('app.search')"
+            :disabled="isBusy"
             :aria-label="$t('app.search')"
             severity="primary"
             icon="fa-solid fa-magnifying-glass"
@@ -25,6 +27,7 @@
         icon="fa-solid fa-plus"
         :aria-label="$t('admin.roles.new')"
         :to="{ name: 'admin.roles.new' }"
+        data-test="roles-add-button"
       />
     </div>
 
@@ -45,6 +48,28 @@
       striped-rows
       :pt="{
         table: 'table-auto lg:table-fixed',
+        bodyRow: {
+          'data-test': 'role-item',
+        },
+        mask: {
+          'data-test': 'overlay',
+        },
+        column: {
+          bodyCell: {
+            'data-test': 'role-item-cell',
+          },
+          headerCell: {
+            'data-test': 'role-header-cell',
+          },
+        },
+        pcPaginator: {
+          page: {
+            'data-test': 'paginator-page',
+          },
+          next: {
+            'data-test': 'paginator-next-button',
+          },
+        },
       }"
       @update:first="paginator.setFirst($event)"
       @page="onPage"
@@ -101,6 +126,7 @@
                 params: { id: slotProps.data.id },
               }"
               icon="fa-solid fa-eye"
+              data-test="roles-view-button"
             />
             <Button
               v-if="userPermissions.can('update', slotProps.data)"
@@ -116,6 +142,7 @@
                 params: { id: slotProps.data.id },
               }"
               icon="fa-solid fa-edit"
+              data-test="roles-edit-button"
             />
             <SettingsRolesDeleteButton
               v-if="userPermissions.can('delete', slotProps.data)"
diff --git a/resources/js/views/AdminRolesView.vue b/resources/js/views/AdminRolesView.vue
index 87b00cfe0..f497b4c66 100644
--- a/resources/js/views/AdminRolesView.vue
+++ b/resources/js/views/AdminRolesView.vue
@@ -1,7 +1,10 @@
 <template>
   <div>
     <div class="mb-6 flex justify-end">
-      <div v-if="model.id && id !== 'new'" class="flex gap-2">
+      <div
+        v-if="model.id && id !== 'new' && permissionsLoaded"
+        class="flex gap-2"
+      >
         <Button
           v-if="!viewOnly && userPermissions.can('view', model)"
           as="router-link"
@@ -10,6 +13,7 @@
           :to="{ name: 'admin.roles.view', params: { id: model.id } }"
           :label="$t('app.cancel_editing')"
           icon="fa-solid fa-times"
+          data-test="roles-cancel-edit-button"
         />
         <Button
           v-if="viewOnly && userPermissions.can('update', model)"
@@ -19,6 +23,7 @@
           :to="{ name: 'admin.roles.edit', params: { id: model.id } }"
           :label="$t('app.edit')"
           icon="fa-solid fa-edit"
+          data-test="roles-edit-button"
         />
         <SettingsRolesDeleteButton
           v-if="userPermissions.can('delete', model)"
@@ -29,20 +34,22 @@
       </div>
     </div>
 
-    <OverlayComponent :show="isBusy || modelLoadingError">
-      <template #loading>
+    <OverlayComponent
+      :show="isBusy || modelLoadingError || permissionsLoadingError"
+    >
+      <template #overlay>
         <LoadingRetryButton
-          :error="modelLoadingError"
+          :error="modelLoadingError || permissionsLoadingError"
           @reload="load()"
         ></LoadingRetryButton>
       </template>
 
       <form
-        :aria-hidden="modelLoadingError"
+        :aria-hidden="modelLoadingError || permissionsLoadingError"
         class="flex flex-col gap-4"
         @submit.prevent="saveRole"
       >
-        <div class="field grid grid-cols-12 gap-4">
+        <div class="field grid grid-cols-12 gap-4" data-test="name-field">
           <label for="name" class="col-span-12 md:col-span-4">{{
             $t("app.model_name")
           }}</label>
@@ -53,21 +60,24 @@
               class="w-full"
               type="text"
               :invalid="formErrors.fieldInvalid('name')"
-              :disabled="isBusy || modelLoadingError || viewOnly"
+              :disabled="formFieldsDisabled"
             />
             <FormError :errors="formErrors.fieldError('name')" />
           </div>
         </div>
 
-        <div class="field grid grid-cols-12 gap-4">
+        <div class="field grid grid-cols-12 gap-4" data-test="room-limit-field">
           <label for="room-limit" class="col-span-12 items-start md:col-span-4">
             <span class="flex items-center">
               {{ $t("app.room_limit") }}
               <Button
                 severity="link"
                 class="secondary"
-                :disabled="isBusy || modelLoadingError"
+                :disabled="
+                  isBusy || modelLoadingError || permissionsLoadingError
+                "
                 icon="fa-solid fa-circle-info"
+                data-test="roles-room-limit-help-button"
                 @click="helpRoomLimitModalVisible = true"
               />
             </span>
@@ -77,14 +87,13 @@
               v-for="option in roomLimitModeOptions"
               :key="option.value"
               class="mb-2"
+              :data-test="'room-limit-mode-' + option.value + '-field'"
             >
               <RadioButton
                 v-model="roomLimitMode"
                 :input-id="option.value"
                 :value="option.value"
-                :disabled="
-                  isBusy || modelLoadingError || viewOnly || model.superuser
-                "
+                :disabled="formFieldsDisabled || model.superuser"
                 @change="roomLimitModeChanged(option.value)"
               />
               <label :for="option.value" class="ml-2">{{ option.text }}</label>
@@ -98,7 +107,7 @@
               show-buttons
               :min="0"
               :invalid="formErrors.fieldInvalid('room_limit')"
-              :disabled="isBusy || modelLoadingError || viewOnly"
+              :disabled="formFieldsDisabled"
             />
             <FormError :errors="formErrors.fieldError('room_limit')" />
           </div>
@@ -107,6 +116,7 @@
         <div
           v-if="!isBusy && Object.keys(permissions).length > 0"
           class="grid grid-cols-12 gap-4"
+          data-test="permission-list"
         >
           <div class="col-span-8">
             <b>{{ $t("admin.roles.permission_name") }}</b>
@@ -128,6 +138,7 @@
               v-for="key in Object.keys(permissions)"
               :key="key"
               class="grid grid-cols-12"
+              data-test="permission-category"
             >
               <div class="col-span-12">
                 <b>{{ $t(`admin.roles.permissions.${key}.title`) }}</b>
@@ -137,6 +148,7 @@
                   v-for="permission in permissions[key]"
                   :key="permission.id"
                   class="grid grid-cols-12 gap-4"
+                  data-test="permission-group"
                 >
                   <div class="col-span-8">
                     <label :for="permission.name">{{
@@ -154,9 +166,7 @@
                       :input-id="permission.name"
                       :value="permission.id"
                       :disabled="
-                        isBusy ||
-                        modelLoadingError ||
-                        viewOnly ||
+                        formFieldsDisabled ||
                         model.superuser ||
                         permission.restricted
                       "
@@ -174,6 +184,7 @@
                         })
                       "
                       class="fa-solid fa-check-circle text-green-500"
+                      data-test="permission-included-icon"
                     />
                     <i
                       v-else
@@ -185,6 +196,7 @@
                         })
                       "
                       class="fa-solid fa-minus-circle text-red-500"
+                      data-test="permission-not-included-icon"
                     />
                   </div>
                 </div>
@@ -203,17 +215,32 @@
         <div v-if="!viewOnly">
           <div class="flex justify-end">
             <Button
-              :disabled="isBusy || modelLoadingError"
+              :disabled="formFieldsDisabled"
               type="submit"
               icon="fa-solid fa-save"
               :label="$t('app.save')"
+              data-test="roles-save-button"
             />
           </div>
         </div>
       </form>
     </OverlayComponent>
 
-    <ConfirmDialog></ConfirmDialog>
+    <ConfirmDialog
+      data-test="stale-role-dialog"
+      :pt="{
+        pcAcceptButton: {
+          root: {
+            'data-test': 'stale-dialog-accept-button',
+          },
+        },
+        pcRejectButton: {
+          root: {
+            'data-test': 'stale-dialog-reject-button',
+          },
+        },
+      }"
+    ></ConfirmDialog>
 
     <Dialog
       v-model:visible="helpRoomLimitModalVisible"
@@ -224,6 +251,14 @@
       dismissable-mask
       :draggable="false"
       :header="$t('app.room_limit')"
+      data-test="roles-room-limit-help-dialog"
+      :pt="{
+        pcCloseButton: {
+          root: {
+            'data-test': 'dialog-header-close-button',
+          },
+        },
+      }"
     >
       <div class="overflow-auto">
         <p>{{ $t("admin.roles.room_limit.help_modal.info") }}</p>
@@ -357,6 +392,8 @@ watch(
 
 const includedPermissionMap = ref({});
 const permissions = ref({});
+const permissionsLoaded = ref(false);
+const permissionsLoadingError = ref(false);
 const roomLimitMode = ref("default");
 const busyCounter = ref(0);
 const modelLoadingError = ref(false);
@@ -393,6 +430,15 @@ const includedPermissions = computed(() => {
   );
 });
 
+const formFieldsDisabled = computed(() => {
+  return (
+    isBusy.value ||
+    modelLoadingError.value ||
+    props.viewOnly ||
+    permissionsLoadingError.value
+  );
+});
+
 /**
  * Boolean that indicates, whether any request for this form is pending or not.
  */
@@ -448,6 +494,7 @@ function load() {
  * Loads the permissions that can be selected through checkboxes.
  */
 function loadPermissions() {
+  permissionsLoadingError.value = false;
   busyCounter.value++;
 
   api
@@ -518,9 +565,10 @@ function loadPermissions() {
         .forEach((key) => {
           permissions.value[key] = newPermissions[key];
         });
+      permissionsLoaded.value = true;
     })
     .catch((error) => {
-      modelLoadingError.value = true;
+      permissionsLoadingError.value = true;
       api.error(error);
     })
     .finally(() => {
diff --git a/resources/js/views/AdminRoomTypesIndex.vue b/resources/js/views/AdminRoomTypesIndex.vue
index d0c3dd934..3f634b9e1 100644
--- a/resources/js/views/AdminRoomTypesIndex.vue
+++ b/resources/js/views/AdminRoomTypesIndex.vue
@@ -2,14 +2,16 @@
   <div>
     <div class="mb-6 flex flex-col justify-between md:flex-row">
       <div>
-        <InputGroup>
+        <InputGroup data-test="room-type-search">
           <InputText
             v-model="nameSearch"
+            :disabled="isBusy"
             :placeholder="$t('app.search')"
             @keyup.enter="filters['name'].value = nameSearch"
           />
           <Button
             v-tooltip="$t('app.search')"
+            :disabled="isBusy"
             :aria-label="$t('app.search')"
             icon="fa-solid fa-magnifying-glass"
             severity="primary"
@@ -23,6 +25,7 @@
         as="router-link"
         icon="fa-solid fa-plus"
         :to="{ name: 'admin.room_types.new' }"
+        data-test="room-types-add-button"
       />
     </div>
 
@@ -36,7 +39,7 @@
       :current-page-report-template="paginator.getCurrentPageReportTemplate()"
       striped-rows
       row-hover
-      :loading="isBusy"
+      :loading="isBusy || loadingError"
       :rows="settingsStore.getSetting('general.pagination_page_size')"
       :pt="{
         table: 'table-auto lg:table-fixed',
@@ -64,6 +67,9 @@
         },
       }"
     >
+      <template #loading>
+        <LoadingRetryButton :error="loadingError" @reload="loadData()" />
+      </template>
       <template #empty>
         <InlineNote v-if="roomTypes.length === 0">{{
           $t("admin.room_types.no_data")
@@ -106,6 +112,7 @@
                 params: { id: slotProps.data.id },
               }"
               icon="fa-solid fa-eye"
+              data-test="room-types-view-button"
             />
             <Button
               v-if="userPermissions.can('update', slotProps.data)"
@@ -123,6 +130,7 @@
                 params: { id: slotProps.data.id },
               }"
               icon="fa-solid fa-edit"
+              data-test="room-types-edit-button"
             />
             <SettingsRoomTypesDeleteButton
               v-if="userPermissions.can('delete', slotProps.data)"
@@ -157,6 +165,7 @@ const actionColumn = useActionColumn([
 ]);
 
 const isBusy = ref(false);
+const loadingError = ref(false);
 const roomTypes = ref([]);
 const nameSearch = ref("");
 const filters = ref({
@@ -172,6 +181,8 @@ onMounted(() => {
  */
 function loadData() {
   isBusy.value = true;
+  loadingError.value = false;
+
   api
     .call("roomTypes")
     .then((response) => {
@@ -179,6 +190,7 @@ function loadData() {
     })
     .catch((error) => {
       api.error(error);
+      loadingError.value = true;
     })
     .finally(() => {
       isBusy.value = false;
diff --git a/resources/js/views/AdminRoomTypesView.vue b/resources/js/views/AdminRoomTypesView.vue
index db9aac04b..185c9389f 100644
--- a/resources/js/views/AdminRoomTypesView.vue
+++ b/resources/js/views/AdminRoomTypesView.vue
@@ -10,6 +10,7 @@
           :to="{ name: 'admin.room_types.view', params: { id: model.id } }"
           :label="$t('app.cancel_editing')"
           icon="fa-solid fa-times"
+          data-test="room-types-cancel-edit-button"
         />
         <Button
           v-if="viewOnly && userPermissions.can('update', model)"
@@ -19,6 +20,7 @@
           :to="{ name: 'admin.room_types.edit', params: { id: model.id } }"
           :label="$t('app.edit')"
           icon="fa-solid fa-edit"
+          data-test="room-types-edit-button"
         />
         <SettingsRoomTypesDeleteButton
           v-if="userPermissions.can('delete', model)"
@@ -29,7 +31,7 @@
       </div>
     </div>
     <OverlayComponent :show="isBusy || modelLoadingError">
-      <template #loading>
+      <template #overlay>
         <LoadingRetryButton
           :error="modelLoadingError"
           @reload="loadRoomType"
@@ -39,7 +41,10 @@
         <!-- General room type settings -->
         <AdminPanel :title="$t('rooms.settings.general.title')">
           <!-- Room type name -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="room-type-name-field"
+          >
             <label
               for="room-type-name"
               class="col-span-12 md:col-span-4 md:mb-0"
@@ -59,7 +64,10 @@
           </div>
 
           <!-- Room type description -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="description-field"
+          >
             <label
               for="description"
               class="col-span-12 md:col-span-4 md:mb-0"
@@ -78,7 +86,10 @@
           </div>
 
           <!-- Room type color -->
-          <fieldset class="field grid grid-cols-12 gap-4">
+          <fieldset
+            class="field grid grid-cols-12 gap-4"
+            data-test="color-field"
+          >
             <legend class="col-span-12 items-start md:col-span-4 md:mb-0">
               {{ $t("admin.room_types.color") }}
             </legend>
@@ -105,7 +116,7 @@
           </fieldset>
 
           <!-- Preview -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div class="field grid grid-cols-12 gap-4" data-test="preview-field">
             <label class="col-span-12 md:col-span-4 md:mb-0">{{
               $t("admin.room_types.preview")
             }}</label>
@@ -115,7 +126,10 @@
           </div>
 
           <!-- Server pool for this room type -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="server-pool-field"
+          >
             <label
               id="server-pool-label"
               class="col-span-12 items-start md:col-span-4 md:mb-0"
@@ -126,6 +140,7 @@
                 <multiselect
                   ref="serverPoolMultiselectRef"
                   v-model="model.server_pool"
+                  data-test="server-pool-dropdown"
                   aria-labelledby="server-pool-label"
                   :placeholder="$t('admin.room_types.select_server_pool')"
                   track-by="id"
@@ -135,7 +150,7 @@
                   :searchable="false"
                   :internal-search="false"
                   :clear-on-select="false"
-                  :close-on-select="false"
+                  :close-on-select="true"
                   :show-no-results="false"
                   :show-labels="false"
                   :options="serverPools"
@@ -166,6 +181,7 @@
                         outlined
                         icon="fa-solid fa-arrow-left"
                         :label="$t('app.previous_page')"
+                        data-test="previous-page-button"
                         @click="
                           loadServerPools(
                             Math.max(1, serverPoolsCurrentPage - 1),
@@ -180,6 +196,7 @@
                         outlined
                         icon="fa-solid fa-arrow-right"
                         :label="$t('app.next_page')"
+                        data-test="next-page-button"
                         @click="loadServerPools(serverPoolsCurrentPage + 1)"
                       />
                     </div>
@@ -190,6 +207,7 @@
                   severity="secondary"
                   outlined
                   icon="fa-solid fa-sync"
+                  data-test="server-pools-reload-button"
                   @click="loadServerPools(serverPoolsCurrentPage)"
                 />
               </InputGroup>
@@ -201,7 +219,7 @@
           </div>
 
           <!-- Option to restrict the usage of this room type to selected roles-->
-          <div class="field grid grid-cols-12 gap-4">
+          <div class="field grid grid-cols-12 gap-4" data-test="restrict-field">
             <label
               for="restrict"
               class="col-span-12 items-start md:col-span-4 md:mb-0"
@@ -225,7 +243,11 @@
           </div>
 
           <!-- Selection of the roles -->
-          <div v-if="model.restrict" class="field grid grid-cols-12 gap-4">
+          <div
+            v-if="model.restrict"
+            class="field grid grid-cols-12 gap-4"
+            data-test="role-field"
+          >
             <label id="roles-label" class="col-span-12 md:col-span-4 md:mb-0">{{
               $t("app.roles")
             }}</label>
@@ -243,7 +265,10 @@
           </div>
 
           <!-- Maximum number of participants -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="max-participants-field"
+          >
             <label
               for="max-participants"
               class="col-span-12 items-start md:col-span-4 md:mb-0"
@@ -260,6 +285,7 @@
                 />
                 <Button
                   icon="fa-solid fa-xmark"
+                  data-test="clear-max-participants-button"
                   :disabled="isBusy || modelLoadingError || viewOnly"
                   @click="model.max_participants = null"
                 />
@@ -269,7 +295,10 @@
           </div>
 
           <!-- Maximum duration -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="max-duration-field"
+          >
             <label
               for="max-duration"
               class="col-span-12 items-start md:col-span-4 md:mb-0"
@@ -287,6 +316,7 @@
                 />
                 <Button
                   icon="fa-solid fa-xmark"
+                  data-test="clear-max-duration-button"
                   :disabled="isBusy || modelLoadingError || viewOnly"
                   @click="model.max_duration = null"
                 />
@@ -303,7 +333,10 @@
           </h4>
 
           <!-- Has access code setting (defines if the room should have an access code) -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="has-access-code-field"
+          >
             <label
               for="has-access-code-default"
               class="col-span-12 items-center md:col-span-4 md:m-0"
@@ -330,7 +363,7 @@
                   "
                   on-icon="fa-solid fa-lock"
                   off-icon="fa-solid fa-lock-open"
-                  input-id="has-access-code-enforced"
+                  data-test="has-access-code-enforced"
                   :aria-label="$t('rooms.settings.general.enforced_setting')"
                 />
               </div>
@@ -346,7 +379,10 @@
           </div>
 
           <!-- Allow guests to access the room -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="allow-guests-field"
+          >
             <label
               for="allow-guests-default"
               class="col-span-12 items-center md:col-span-4 md:m-0"
@@ -372,7 +408,7 @@
                   "
                   on-icon="fa-solid fa-lock"
                   off-icon="fa-solid fa-lock-open"
-                  input-id="allow-guests-enforced"
+                  data-test="allow-guests-enforced"
                   :aria-label="$t('rooms.settings.general.enforced_setting')"
                 />
               </div>
@@ -396,7 +432,10 @@
             {{ $t("rooms.settings.video_conference.title") }}
           </h4>
 
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="everyone-can-start-field"
+          >
             <label
               for="everyone-can-start-default"
               class="col-span-12 items-center md:col-span-4 md:mb-0"
@@ -428,7 +467,7 @@
                   "
                   on-icon="fa-solid fa-lock"
                   off-icon="fa-solid fa-lock-open"
-                  input-id="everyone-can-start-enforced"
+                  data-test="everyone-can-start-enforced"
                   :aria-label="$t('rooms.settings.general.enforced_setting')"
                 />
               </div>
@@ -445,7 +484,10 @@
           </div>
 
           <!-- Mute everyone*s microphone on meeting join -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="mute-on-start-field"
+          >
             <label
               for="mute-on-start-default"
               class="col-span-12 items-center md:col-span-4 md:mb-0"
@@ -471,7 +513,7 @@
                   "
                   on-icon="fa-solid fa-lock"
                   off-icon="fa-solid fa-lock-open"
-                  input-id="mute-on-start-enforced"
+                  data-test="mute-on-start-enforced"
                   :aria-label="$t('rooms.settings.general.enforced_setting')"
                 />
               </div>
@@ -488,14 +530,17 @@
           </div>
 
           <!-- Usage of the waiting room/guest lobby -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div class="field grid grid-cols-12 gap-4" data-test="lobby-field">
             <label class="col-span-12 items-center md:col-span-4 md:mb-0">{{
               $t("rooms.settings.video_conference.lobby.title")
             }}</label>
             <div class="col-span-12 mb-2 md:col-span-8">
               <div class="flex flex-row items-center justify-between">
                 <div class="flex flex-col gap-2">
-                  <div class="flex items-center gap-2">
+                  <div
+                    class="flex items-center gap-2"
+                    data-test="lobby-disabled-field"
+                  >
                     <RadioButton
                       v-model.number="model.lobby_default"
                       :disabled="isBusy || modelLoadingError || viewOnly"
@@ -505,7 +550,10 @@
                     />
                     <label for="lobby-disabled">{{ $t("app.disabled") }}</label>
                   </div>
-                  <div class="flex items-center gap-2">
+                  <div
+                    class="flex items-center gap-2"
+                    data-test="lobby-enabled-field"
+                  >
                     <RadioButton
                       v-model.number="model.lobby_default"
                       :disabled="isBusy || modelLoadingError || viewOnly"
@@ -515,7 +563,10 @@
                     />
                     <label for="lobby-enabled">{{ $t("app.enabled") }}</label>
                   </div>
-                  <div class="flex items-center gap-2">
+                  <div
+                    class="flex items-center gap-2"
+                    data-test="lobby-only-for-guests-field"
+                  >
                     <RadioButton
                       v-model.number="model.lobby_default"
                       :disabled="isBusy || modelLoadingError || viewOnly"
@@ -542,7 +593,7 @@
                   "
                   on-icon="fa-solid fa-lock"
                   off-icon="fa-solid fa-lock-open"
-                  input-id="lobby-enforced"
+                  data-test="lobby-enforced"
                   :aria-label="$t('rooms.settings.general.enforced_setting')"
                 />
               </div>
@@ -568,7 +619,10 @@
           </h4>
 
           <!-- Record attendance of users and guests -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="record-attendance-field"
+          >
             <label
               for="record-attendance-default"
               class="col-span-12 items-center md:col-span-4 md:mb-0"
@@ -598,7 +652,7 @@
                   "
                   on-icon="fa-solid fa-lock"
                   off-icon="fa-solid fa-lock-open"
-                  input-id="record-attendance-enforced"
+                  data-test="record-attendance-enforced"
                   :aria-label="$t('rooms.settings.general.enforced_setting')"
                 />
               </div>
@@ -615,7 +669,7 @@
           </div>
 
           <!-- Record video-conf -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div class="field grid grid-cols-12 gap-4" data-test="record-field">
             <label
               for="record-default"
               class="col-span-12 items-center md:col-span-4 md:mb-0"
@@ -643,7 +697,7 @@
                   "
                   on-icon="fa-solid fa-lock"
                   off-icon="fa-solid fa-lock-open"
-                  input-id="record-attendance-enforced"
+                  data-test="record-enforced"
                   :aria-label="$t('rooms.settings.general.enforced_setting')"
                 />
               </div>
@@ -658,7 +712,10 @@
           </div>
 
           <!-- Auto start recording video-conf -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="auto-start-recording-field"
+          >
             <label
               for="auto-start-recording-default"
               class="col-span-12 items-center md:col-span-4 md:mb-0"
@@ -688,14 +745,14 @@
                   "
                   on-icon="fa-solid fa-lock"
                   off-icon="fa-solid fa-lock-open"
-                  input-id="record-attendance-enforced"
+                  data-test="auto-start-recording-enforced"
                   :aria-label="$t('rooms.settings.general.enforced_setting')"
                 />
               </div>
               <div class="flex justify-between gap-6">
                 <FormError
                   :errors="
-                    formErrors.fieldError('auto_start_recording_enforced')
+                    formErrors.fieldError('auto_start_recording_default')
                   "
                 />
                 <FormError
@@ -714,7 +771,10 @@
           </h4>
 
           <!-- Disable the ability to use the webcam for non moderator-uses, can be changed during the meeting -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="disable-cam-field"
+          >
             <label
               for="disable-cam-default"
               class="col-span-12 items-center md:col-span-4 md:mb-0"
@@ -748,7 +808,7 @@
                   "
                   on-icon="fa-solid fa-lock"
                   off-icon="fa-solid fa-lock-open"
-                  input-id="disable-cam-enforced"
+                  data-test="disable-cam-enforced"
                   :aria-label="$t('rooms.settings.general.enforced_setting')"
                 />
               </div>
@@ -772,7 +832,10 @@
           Disable the ability to see the webcam of non moderator-users, moderators can see all webcams,
           can be changed during the meeting
           -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="webcams-only-for-moderator-field"
+          >
             <label
               for="webcams-only-for-moderator-default"
               class="col-span-12 items-center md:col-span-4 md:mb-0"
@@ -809,7 +872,7 @@
                   "
                   on-icon="fa-solid fa-lock"
                   off-icon="fa-solid fa-lock-open"
-                  input-id="webcams-only-for-moderator-enforced"
+                  data-test="webcams-only-for-moderator-enforced"
                   :aria-label="$t('rooms.settings.general.enforced_setting')"
                 />
               </div>
@@ -830,7 +893,10 @@
           </div>
 
           <!-- Disable the ability to use the microphone for non moderator-uses, can be changed during the meeting -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="disable-mic-field"
+          >
             <label
               for="disable-mic-default"
               class="col-span-12 items-center md:col-span-4 md:mb-0"
@@ -864,7 +930,7 @@
                   "
                   on-icon="fa-solid fa-lock"
                   off-icon="fa-solid fa-lock-open"
-                  input-id="disable-mic-enforced"
+                  data-test="disable-mic-enforced"
                   :aria-label="$t('rooms.settings.general.enforced_setting')"
                 />
               </div>
@@ -885,7 +951,10 @@
           </div>
 
           <!-- Disable the ability to send messages via the public chat for non moderator-uses, can be changed during the meeting -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="disable-public-chat-field"
+          >
             <label
               for="disable-public-chat-default"
               class="col-span-12 items-center md:col-span-4 md:mb-0"
@@ -923,7 +992,7 @@
                   "
                   on-icon="fa-solid fa-lock"
                   off-icon="fa-solid fa-lock-open"
-                  input-id="disable-public-chat-enforced"
+                  data-test="disable-public-chat-enforced"
                   :aria-label="$t('rooms.settings.general.enforced_setting')"
                 />
               </div>
@@ -952,7 +1021,10 @@
           private chats with the moderators is still possible
           can be changed during the meeting
           -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="disable-private-chat-field"
+          >
             <label
               for="disable-private-chat-default"
               class="col-span-12 items-center md:col-span-4 md:mb-0"
@@ -990,7 +1062,7 @@
                   "
                   on-icon="fa-solid fa-lock"
                   off-icon="fa-solid fa-lock-open"
-                  input-id="disable-private-chat-enforced"
+                  data-test="disable-private-chat-enforced"
                   :aria-label="$t('rooms.settings.general.enforced_setting')"
                 />
               </div>
@@ -1015,7 +1087,10 @@
           </div>
 
           <!-- Disable the ability to edit the notes for non moderator-uses, can be changed during the meeting -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="disable-note-field"
+          >
             <label
               for="disable-note-default"
               class="col-span-12 items-center md:col-span-4 md:mb-0"
@@ -1051,7 +1126,7 @@
                   "
                   on-icon="fa-solid fa-lock"
                   off-icon="fa-solid fa-lock-open"
-                  input-id="disable-note-enforced"
+                  data-test="disable-note-enforced"
                   :aria-label="$t('rooms.settings.general.enforced_setting')"
                 />
               </div>
@@ -1072,7 +1147,10 @@
           </div>
 
           <!-- Disable the ability to see a list of all participants for non moderator-uses, can be changed during the meeting -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="hide-user-list-field"
+          >
             <label
               for="hide-user-list-default"
               class="col-span-12 items-center md:col-span-4 md:mb-0"
@@ -1108,7 +1186,7 @@
                   "
                   on-icon="fa-solid fa-lock"
                   off-icon="fa-solid fa-lock-open"
-                  input-id="hide-user-list-enforced"
+                  data-test="hide-user-list-enforced"
                   :aria-label="$t('rooms.settings.general.enforced_setting')"
                 />
               </div>
@@ -1138,7 +1216,10 @@
           </h4>
 
           <!-- Allow users to become room members -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="allow-membership-field"
+          >
             <label
               for="allow-membership-default"
               class="col-span-12 items-center md:col-span-4 md:mb-0"
@@ -1166,7 +1247,7 @@
                   "
                   on-icon="fa-solid fa-lock"
                   off-icon="fa-solid fa-lock-open"
-                  input-id="allow-membership-enforced"
+                  data-test="allow-membership-enforced"
                   :aria-label="$t('rooms.settings.general.enforced_setting')"
                 />
               </div>
@@ -1183,7 +1264,10 @@
           </div>
 
           <!-- Default user role for logged in users only -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="default-role-field"
+          >
             <label
               id="default-role-label"
               class="col-span-12 items-center md:col-span-4 md:mb-0"
@@ -1210,6 +1294,13 @@
                   aria-labelledby="default-role-label"
                   option-label="label"
                   option-value="role"
+                  :pt="{
+                    pcToggleButton: {
+                      root: {
+                        'data-test': 'default-role-default-button',
+                      },
+                    },
+                  }"
                 />
                 <ToggleButton
                   v-model="model.default_role_enforced"
@@ -1223,7 +1314,7 @@
                   "
                   on-icon="fa-solid fa-lock"
                   off-icon="fa-solid fa-lock-open"
-                  input-id="default-role-enforced"
+                  data-test="default-role-enforced"
                   :aria-label="$t('rooms.settings.general.enforced_setting')"
                 />
               </div>
@@ -1245,7 +1336,10 @@
           </h4>
 
           <!-- Room visibility setting -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="visibility-field"
+          >
             <label
               id="visibility-label"
               class="col-span-12 items-center md:col-span-4 md:mb-0"
@@ -1273,6 +1367,13 @@
                   aria-labelledby="visibility-label"
                   option-label="label"
                   option-value="visibility"
+                  :pt="{
+                    pcToggleButton: {
+                      root: {
+                        'data-test': 'visibility-default-button',
+                      },
+                    },
+                  }"
                 />
                 <ToggleButton
                   v-model="model.visibility_enforced"
@@ -1286,7 +1387,7 @@
                   "
                   on-icon="fa-solid fa-lock"
                   off-icon="fa-solid fa-lock-open"
-                  input-id="visibility-enforced"
+                  data-test="visibility-enforced"
                   :aria-label="$t('rooms.settings.general.enforced_setting')"
                 />
               </div>
@@ -1306,7 +1407,10 @@
         <!-- BBB api settings -->
         <AdminPanel :title="$t('admin.room_types.bbb_api.title')">
           <!-- Create meeting plugin config -->
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="create-parameters-field"
+          >
             <label
               for="create-parameters"
               class="col-span-12 items-start md:col-span-4 md:mb-0"
@@ -1351,12 +1455,27 @@
               type="submit"
               icon="fa-solid fa-save"
               :label="$t('app.save')"
+              data-test="room-types-save-button"
             />
           </div>
         </div>
       </form>
     </OverlayComponent>
-    <ConfirmDialog></ConfirmDialog>
+    <ConfirmDialog
+      data-test="stale-room-type-dialog"
+      :pt="{
+        pcAcceptButton: {
+          root: {
+            'data-test': 'stale-dialog-accept-button',
+          },
+        },
+        pcRejectButton: {
+          root: {
+            'data-test': 'stale-dialog-reject-button',
+          },
+        },
+      }"
+    ></ConfirmDialog>
   </div>
 </template>
 
diff --git a/resources/js/views/AdminServerPoolsIndex.vue b/resources/js/views/AdminServerPoolsIndex.vue
index 6e51c1a0d..cb8679b2a 100644
--- a/resources/js/views/AdminServerPoolsIndex.vue
+++ b/resources/js/views/AdminServerPoolsIndex.vue
@@ -2,14 +2,16 @@
   <div>
     <div class="mb-6 flex flex-col justify-between md:flex-row">
       <div>
-        <InputGroup>
+        <InputGroup data-test="server-pool-search">
           <InputText
             v-model="filter"
+            :disabled="isBusy"
             :placeholder="$t('app.search')"
             @keyup.enter="loadData(1)"
           />
           <Button
             v-tooltip="$t('app.search')"
+            :disabled="isBusy"
             :aria-label="$t('app.search')"
             severity="primary"
             icon="fa-solid fa-magnifying-glass"
@@ -24,6 +26,7 @@
         icon="fa-solid fa-plus"
         :aria-label="$t('admin.server_pools.new')"
         :to="{ name: 'admin.server_pools.new' }"
+        data-test="server-pools-add-button"
       />
     </div>
 
@@ -44,6 +47,28 @@
       striped-rows
       :pt="{
         table: 'table-auto lg:table-fixed',
+        bodyRow: {
+          'data-test': 'server-pool-item',
+        },
+        mask: {
+          'data-test': 'overlay',
+        },
+        column: {
+          bodyCell: {
+            'data-test': 'server-pool-item-cell',
+          },
+          headerCell: {
+            'data-test': 'server-pool-header-cell',
+          },
+        },
+        pcPaginator: {
+          page: {
+            'data-test': 'paginator-page',
+          },
+          next: {
+            'data-test': 'paginator-next-button',
+          },
+        },
       }"
       @update:first="paginator.setFirst($event)"
       @page="onPage"
@@ -95,6 +120,7 @@
                 params: { id: slotProps.data.id },
               }"
               icon="fa-solid fa-eye"
+              data-test="server-pools-view-button"
             />
             <Button
               v-if="userPermissions.can('update', slotProps.data)"
@@ -112,6 +138,7 @@
               }"
               severity="info"
               icon="fa-solid fa-edit"
+              data-test="server-pools-edit-button"
             />
             <SettingsServerPoolsDeleteButton
               v-if="userPermissions.can('delete', slotProps.data)"
diff --git a/resources/js/views/AdminServerPoolsView.vue b/resources/js/views/AdminServerPoolsView.vue
index c140e1e7f..e4b090fe3 100644
--- a/resources/js/views/AdminServerPoolsView.vue
+++ b/resources/js/views/AdminServerPoolsView.vue
@@ -10,6 +10,7 @@
           severity="secondary"
           :label="$t('app.cancel_editing')"
           icon="fa-solid fa-times"
+          data-test="server-pools-cancel-edit-button"
         />
         <Button
           v-if="viewOnly && userPermissions.can('update', model)"
@@ -19,6 +20,7 @@
           severity="info"
           icon="fa-solid fa-edit"
           :label="$t('app.edit')"
+          data-test="server-pools-edit-button"
         />
         <SettingsServerPoolsDeleteButton
           v-if="userPermissions.can('delete', model)"
@@ -30,8 +32,8 @@
       </div>
     </div>
 
-    <OverlayComponent :show="isBusy">
-      <template #loading>
+    <OverlayComponent :show="isBusy || modelLoadingError">
+      <template #overlay>
         <LoadingRetryButton
           :error="modelLoadingError"
           @reload="load"
@@ -43,7 +45,7 @@
         class="flex flex-col gap-4"
         @submit.prevent="saveServerPool"
       >
-        <div class="field grid grid-cols-12 gap-4">
+        <div class="field grid grid-cols-12 gap-4" data-test="name-field">
           <label for="name" class="col-span-12 md:col-span-4 md:mb-0">{{
             $t("app.model_name")
           }}</label>
@@ -59,7 +61,10 @@
             <FormError :errors="formErrors.fieldError('name')" />
           </div>
         </div>
-        <div class="field grid grid-cols-12 gap-4">
+        <div
+          class="field grid grid-cols-12 gap-4"
+          data-test="description-field"
+        >
           <label for="description" class="col-span-12 md:col-span-4 md:mb-0">{{
             $t("app.description")
           }}</label>
@@ -75,7 +80,7 @@
             <FormError :errors="formErrors.fieldError('description')" />
           </div>
         </div>
-        <div class="field grid grid-cols-12 gap-4">
+        <div class="field grid grid-cols-12 gap-4" data-test="server-field">
           <label id="servers-label" class="col-span-12 md:col-span-4 md:mb-0">{{
             $t("app.servers")
           }}</label>
@@ -84,6 +89,7 @@
               <multiselect
                 ref="serversMultiselectRef"
                 v-model="model.servers"
+                data-test="server-dropdown"
                 aria-labelledby="servers-label"
                 :placeholder="$t('admin.server_pools.select_servers')"
                 track-by="id"
@@ -116,7 +122,7 @@
                   {{ option.name }}
                 </template>
                 <template #tag="{ option, remove }">
-                  <Chip :label="option.name">
+                  <Chip :label="option.name" data-test="server-chip">
                     <span>{{ option.name }}</span>
                     <Button
                       v-if="!viewOnly"
@@ -128,6 +134,7 @@
                           name: option.name,
                         })
                       "
+                      data-test="remove-server-button"
                       @click="remove(option)"
                     />
                   </Chip>
@@ -139,6 +146,7 @@
                     severity="secondary"
                     icon="fa-solid fa-arrow-left"
                     :label="$t('app.previous_page')"
+                    data-test="previous-page-button"
                     @click="loadServers(Math.max(1, serversCurrentPage - 1))"
                   />
                   <Button
@@ -147,6 +155,7 @@
                     severity="secondary"
                     icon="fa-solid fa-arrow-right"
                     :label="$t('app.next_page')"
+                    data-test="next-page-button"
                     @click="loadServers(serversCurrentPage + 1)"
                   />
                 </template>
@@ -156,11 +165,12 @@
                 outlined
                 severity="secondary"
                 icon="fa-solid fa-sync"
+                data-test="servers-reload-button"
                 @click="loadServers(serversCurrentPage)"
               />
             </InputGroup>
+            <FormError :errors="formErrors.fieldError('servers', true)" />
           </div>
-          <FormError :errors="formErrors.fieldError('servers', true)" />
         </div>
         <div v-if="!viewOnly">
           <div class="flex justify-end">
@@ -174,12 +184,27 @@
               type="submit"
               icon="fa-solid fa-save"
               :label="$t('app.save')"
+              data-test="server-pools-save-button"
             />
           </div>
         </div>
       </form>
     </OverlayComponent>
-    <ConfirmDialog></ConfirmDialog>
+    <ConfirmDialog
+      data-test="stale-server-pool-dialog"
+      :pt="{
+        pcAcceptButton: {
+          root: {
+            'data-test': 'stale-dialog-accept-button',
+          },
+        },
+        pcRejectButton: {
+          root: {
+            'data-test': 'stale-dialog-reject-button',
+          },
+        },
+      }"
+    ></ConfirmDialog>
   </div>
 </template>
 
@@ -381,7 +406,7 @@ function handleStaleError(staleError) {
     },
     reject: () => {
       model.value = staleError.new_model;
-      name.value = staleError.newMember.name;
+      name.value = staleError.new_model.name;
     },
   });
 }
diff --git a/resources/js/views/AdminServersIndex.vue b/resources/js/views/AdminServersIndex.vue
index d896d736d..5b29fe4e9 100644
--- a/resources/js/views/AdminServersIndex.vue
+++ b/resources/js/views/AdminServersIndex.vue
@@ -2,14 +2,16 @@
   <div>
     <div class="flex flex-col justify-between md:flex-row">
       <div>
-        <InputGroup>
+        <InputGroup data-test="server-search">
           <InputText
             v-model="filter"
+            :disabled="isBusy"
             :placeholder="$t('app.search')"
             @keyup.enter="loadData(1, false)"
           />
           <Button
             v-tooltip="$t('app.search')"
+            :disabled="isBusy"
             :aria-label="$t('app.search')"
             icon="fa-solid fa-magnifying-glass"
             severity="primary"
@@ -23,6 +25,7 @@
           severity="info"
           icon="fa-solid fa-repeat"
           :label="$t('admin.servers.reload')"
+          data-test="servers-reload-usage-button"
           @click="loadData(null, true)"
         />
         <Button
@@ -31,6 +34,7 @@
           severity="secondary"
           icon="fa-solid fa-sync"
           :aria-label="$t('app.reload')"
+          data-test="servers-reload-no-usage-button"
           @click="loadData(null, false)"
         />
         <Button
@@ -40,6 +44,7 @@
           :aria-label="$t('admin.servers.new')"
           :to="{ name: 'admin.servers.new' }"
           icon="fa-solid fa-plus"
+          data-test="servers-add-button"
         />
       </div>
     </div>
@@ -61,6 +66,28 @@
       striped-rows
       :pt="{
         table: 'table-auto lg:table-fixed',
+        bodyRow: {
+          'data-test': 'server-item',
+        },
+        mask: {
+          'data-test': 'overlay',
+        },
+        column: {
+          bodyCell: {
+            'data-test': 'server-item-cell',
+          },
+          headerCell: {
+            'data-test': 'server-header-cell',
+          },
+        },
+        pcPaginator: {
+          page: {
+            'data-test': 'paginator-page',
+          },
+          next: {
+            'data-test': 'paginator-next-button',
+          },
+        },
       }"
       @update:first="paginator.setFirst($event)"
       @page="onPage"
@@ -219,6 +246,7 @@
                 params: { id: slotProps.data.id },
               }"
               icon="fa-solid fa-eye"
+              data-test="servers-view-button"
             />
             <Button
               v-if="userPermissions.can('update', slotProps.data)"
@@ -236,6 +264,7 @@
               }"
               severity="info"
               icon="fa-solid fa-edit"
+              data-test="servers-edit-button"
             />
             <SettingsServersDeleteButton
               v-if="
diff --git a/resources/js/views/AdminServersView.vue b/resources/js/views/AdminServersView.vue
index fbe328fd8..2f2339803 100644
--- a/resources/js/views/AdminServersView.vue
+++ b/resources/js/views/AdminServersView.vue
@@ -10,6 +10,7 @@
           severity="secondary"
           :label="$t('app.cancel_editing')"
           icon="fa-solid fa-times"
+          data-test="servers-cancel-edit-button"
         />
         <Button
           v-if="viewOnly && userPermissions.can('update', model)"
@@ -19,6 +20,7 @@
           severity="info"
           :label="$t('app.edit')"
           icon="fa-solid fa-edit"
+          data-test="servers-edit-button"
         />
         <SettingsServersDeleteButton
           v-if="userPermissions.can('delete', model) && isDisabled"
@@ -29,8 +31,8 @@
       </div>
     </div>
 
-    <OverlayComponent :show="isBusy">
-      <template #loading>
+    <OverlayComponent :show="isBusy || modelLoadingError">
+      <template #overlay>
         <LoadingRetryButton
           :error="modelLoadingError"
           @reload="load"
@@ -42,7 +44,7 @@
         class="flex flex-col gap-4"
         @submit.prevent="saveServer"
       >
-        <div class="field grid grid-cols-12 gap-4">
+        <div class="field grid grid-cols-12 gap-4" data-test="name-field">
           <label class="col-span-12 md:col-span-4 md:mb-0" for="name">{{
             $t("app.model_name")
           }}</label>
@@ -58,7 +60,10 @@
             <FormError :errors="formErrors.fieldError('name')" />
           </div>
         </div>
-        <div class="field grid grid-cols-12 gap-4">
+        <div
+          class="field grid grid-cols-12 gap-4"
+          data-test="description-field"
+        >
           <label class="col-span-12 md:col-span-4 md:mb-0" for="description">{{
             $t("app.description")
           }}</label>
@@ -74,7 +79,7 @@
             <FormError :errors="formErrors.fieldError('description')" />
           </div>
         </div>
-        <div class="field grid grid-cols-12 gap-4">
+        <div class="field grid grid-cols-12 gap-4" data-test="version-field">
           <label class="col-span-12 md:col-span-4 md:mb-0" for="version">{{
             $t("admin.servers.version")
           }}</label>
@@ -88,7 +93,7 @@
             />
           </div>
         </div>
-        <div class="field grid grid-cols-12 gap-4">
+        <div class="field grid grid-cols-12 gap-4" data-test="base-url-field">
           <label class="col-span-12 md:col-span-4 md:mb-0" for="base_url">{{
             $t("admin.servers.base_url")
           }}</label>
@@ -106,7 +111,7 @@
             <FormError :errors="formErrors.fieldError('base_url')" />
           </div>
         </div>
-        <div class="field grid grid-cols-12 gap-4">
+        <div class="field grid grid-cols-12 gap-4" data-test="secret-field">
           <label class="col-span-12 md:col-span-4 md:mb-0" for="secret">{{
             $t("admin.servers.secret")
           }}</label>
@@ -124,7 +129,10 @@
             <FormError :errors="formErrors.fieldError('secret')" />
           </div>
         </div>
-        <fieldset class="field grid grid-cols-12 gap-4">
+        <fieldset
+          class="field grid grid-cols-12 gap-4"
+          data-test="strength-field"
+        >
           <legend class="col-span-12 md:col-span-4 md:mb-0">
             {{ $t("admin.servers.strength") }}
           </legend>
@@ -137,6 +145,12 @@
               :stars="10"
               aria-describedby="strength-help"
               class="flex justify-between border border-surface-300 px-6 py-3 rounded-border dark:border-surface-700"
+              data-test="strength-rating"
+              :pt="{
+                option: {
+                  'data-test': 'strength-rating-option',
+                },
+              }"
             />
             <small id="strength-help">{{
               $t("admin.servers.strength_description")
@@ -145,7 +159,7 @@
           </div>
         </fieldset>
 
-        <div class="field grid grid-cols-12 gap-4">
+        <div class="field grid grid-cols-12 gap-4" data-test="status-field">
           <label id="status-label" class="col-span-12 md:col-span-4 md:mb-0">{{
             $t("admin.servers.status")
           }}</label>
@@ -154,6 +168,7 @@
               <Select
                 v-model="model.status"
                 aria-labelledby="status-label"
+                data-test="status-dropdown"
                 :options="serverStatusOptions"
                 option-label="name"
                 option-value="value"
@@ -161,13 +176,24 @@
                 :invalid="formErrors.fieldInvalid('status')"
                 class="w-full"
                 name="status"
+                :pt="{
+                  listContainer: {
+                    'data-test': 'status-dropdown-items',
+                  },
+                  option: {
+                    'data-test': 'status-dropdown-option',
+                  },
+                }"
               />
             </div>
             <FormError :errors="formErrors.fieldError('status')" />
           </div>
         </div>
 
-        <div class="field grid grid-cols-12 gap-4">
+        <div
+          class="field grid grid-cols-12 gap-4"
+          data-test="health-status-field"
+        >
           <label class="col-span-12 md:col-span-4 md:mb-0" for="healthStatus">{{
             $t("admin.servers.connection")
           }}</label>
@@ -184,6 +210,7 @@
                 :label="$t('admin.servers.test_connection')"
                 icon="fa-solid fa-link"
                 severity="info"
+                data-test="servers-test-connection-button"
                 @click="testConnection()"
               />
             </InputGroup>
@@ -199,6 +226,7 @@
               :label="$t('app.save')"
               icon="fa-solid fa-save"
               type="submit"
+              data-test="servers-save-button"
             />
           </div>
         </div>
@@ -218,7 +246,10 @@
           </div>
         </div>
 
-        <div class="field grid grid-cols-12 gap-4">
+        <div
+          class="field grid grid-cols-12 gap-4"
+          data-test="meeting-count-field"
+        >
           <label class="col-span-12 md:col-span-4 md:mb-0" for="meetingCount">{{
             $t("admin.servers.meeting_count")
           }}</label>
@@ -236,7 +267,10 @@
             }}</small>
           </div>
         </div>
-        <div class="field grid grid-cols-12 gap-4">
+        <div
+          class="field grid grid-cols-12 gap-4"
+          data-test="own-meeting-count-field"
+        >
           <label
             class="col-span-12 md:col-span-4 md:mb-0"
             for="ownMeetingCount"
@@ -256,7 +290,10 @@
             }}</small>
           </div>
         </div>
-        <div class="field grid grid-cols-12 gap-4">
+        <div
+          class="field grid grid-cols-12 gap-4"
+          data-test="participant-count-field"
+        >
           <label
             class="col-span-12 md:col-span-4 md:mb-0"
             for="participantCount"
@@ -273,7 +310,10 @@
             />
           </div>
         </div>
-        <div class="field grid grid-cols-12 gap-4">
+        <div
+          class="field grid grid-cols-12 gap-4"
+          data-test="video-count-field"
+        >
           <label class="col-span-12 md:col-span-4 md:mb-0" for="videoCount">{{
             $t("admin.servers.video_count")
           }}</label>
@@ -291,6 +331,7 @@
         <div
           v-if="userPermissions.can('update', model)"
           class="field grid grid-cols-12 gap-4"
+          data-test="panic-field"
         >
           <label class="col-span-12 md:col-span-4 md:mb-0" for="panic">{{
             $t("admin.servers.panic")
@@ -304,6 +345,7 @@
                 aria-describedby="panic-help"
                 icon="fa-solid fa-exclamation-triangle"
                 severity="danger"
+                data-test="servers-panic-button"
                 @click="panic()"
               />
             </div>
@@ -313,7 +355,21 @@
           </div>
         </div>
       </div>
-      <ConfirmDialog></ConfirmDialog>
+      <ConfirmDialog
+        data-test="stale-server-dialog"
+        :pt="{
+          pcAcceptButton: {
+            root: {
+              'data-test': 'stale-dialog-accept-button',
+            },
+          },
+          pcRejectButton: {
+            root: {
+              'data-test': 'stale-dialog-reject-button',
+            },
+          },
+        }"
+      ></ConfirmDialog>
     </OverlayComponent>
   </div>
 </template>
diff --git a/resources/js/views/AdminSettings.vue b/resources/js/views/AdminSettings.vue
index 7fd932740..3cbf123cc 100644
--- a/resources/js/views/AdminSettings.vue
+++ b/resources/js/views/AdminSettings.vue
@@ -13,7 +13,10 @@
 
         <div class="flex flex-col gap-6">
           <AdminPanel :title="$t('admin.settings.application')">
-            <div class="grid grid-cols-12 gap-4">
+            <div
+              class="grid grid-cols-12 gap-4"
+              data-test="application-name-field"
+            >
               <label
                 for="application-name"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -35,7 +38,7 @@
                 <FormError :errors="formErrors.fieldError('general_name')" />
               </div>
             </div>
-            <div class="grid grid-cols-12 gap-4">
+            <div class="grid grid-cols-12 gap-4" data-test="help-url-field">
               <label for="help-url" class="col-span-12 md:col-span-4 md:mb-0">{{
                 $t("admin.settings.help_url.title")
               }}</label>
@@ -56,7 +59,10 @@
                 />
               </div>
             </div>
-            <div class="grid grid-cols-12 gap-4">
+            <div
+              class="grid grid-cols-12 gap-4"
+              data-test="legal-notice-url-field"
+            >
               <label
                 for="legal-notice-url"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -79,7 +85,10 @@
                 />
               </div>
             </div>
-            <div class="grid grid-cols-12 gap-4">
+            <div
+              class="grid grid-cols-12 gap-4"
+              data-test="privacy-policy-url-field"
+            >
               <label
                 for="privacy-policy-url"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -104,7 +113,10 @@
                 />
               </div>
             </div>
-            <div class="grid grid-cols-12 gap-4">
+            <div
+              class="grid grid-cols-12 gap-4"
+              data-test="pagination-page-size-field"
+            >
               <label
                 for="pagination-page-size"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -128,17 +140,25 @@
                   $t("admin.settings.pagination_page_size.description")
                 }}</small>
                 <FormError
-                  :errors="formErrors.fieldError('pagination_page_size')"
+                  :errors="
+                    formErrors.fieldError('general_pagination_page_size')
+                  "
                 />
               </div>
             </div>
-            <fieldset class="grid grid-cols-12 gap-4">
+            <fieldset
+              class="grid grid-cols-12 gap-4"
+              data-test="toast-lifetime-field"
+            >
               <legend class="col-span-12 md:col-span-4 md:mb-0">
                 {{ $t("admin.settings.toast_lifetime.title") }}
               </legend>
               <div class="col-span-12 flex flex-col gap-1 md:col-span-8">
                 <div class="flex flex-wrap gap-4">
-                  <div class="flex items-center">
+                  <div
+                    class="flex items-center"
+                    data-test="toast-lifetime-mode-unlimited-field"
+                  >
                     <RadioButton
                       v-model="toastLifetimeMode"
                       input-id="toast-lifetime-mode-unlimited"
@@ -156,7 +176,10 @@
                       $t("app.unlimited")
                     }}</label>
                   </div>
-                  <div class="flex items-center">
+                  <div
+                    class="flex items-center"
+                    data-test="toast-lifetime-mode-custom-field"
+                  >
                     <RadioButton
                       v-model="toastLifetimeMode"
                       input-id="toast-lifetime-mode-custom"
@@ -189,6 +212,7 @@
                   :disabled="disabled"
                   aria-labelledby="toast-lifetime-custom-label"
                   aria-describedby="toast-lifetime-custom-help"
+                  data-test="toast-lifetime-custom-input"
                 />
                 <small id="toast-lifetime-custom-help">{{
                   $t("admin.settings.toast_lifetime.description")
@@ -198,7 +222,10 @@
                 />
               </div>
             </fieldset>
-            <div class="grid grid-cols-12 gap-4">
+            <div
+              class="grid grid-cols-12 gap-4"
+              data-test="default-timezone-field"
+            >
               <label
                 id="default-timezone-label"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -220,7 +247,10 @@
                 />
               </div>
             </div>
-            <fieldset class="grid grid-cols-12 gap-4">
+            <fieldset
+              class="grid grid-cols-12 gap-4"
+              data-test="no-welcome-page-field"
+            >
               <legend class="col-span-12 md:col-span-4 md:mb-0">
                 {{ $t("admin.settings.no_welcome_page") }}
               </legend>
@@ -245,7 +275,7 @@
           </AdminPanel>
 
           <AdminPanel :title="$t('admin.settings.theme.title')">
-            <fieldset class="grid grid-cols-12 gap-4">
+            <fieldset class="grid grid-cols-12 gap-4" data-test="favicon-field">
               <legend
                 id="favicon-label"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -271,7 +301,10 @@
                 />
               </div>
             </fieldset>
-            <fieldset class="grid grid-cols-12 gap-4">
+            <fieldset
+              class="grid grid-cols-12 gap-4"
+              data-test="favicon-dark-field"
+            >
               <legend
                 id="favicon-dark-label"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -299,7 +332,7 @@
                 />
               </div>
             </fieldset>
-            <fieldset class="grid grid-cols-12 gap-4">
+            <fieldset class="grid grid-cols-12 gap-4" data-test="logo-field">
               <legend id="logo-label" class="col-span-12 md:col-span-4 md:mb-0">
                 {{ $t("admin.settings.logo.title") }}
               </legend>
@@ -322,7 +355,10 @@
                 />
               </div>
             </fieldset>
-            <fieldset class="grid grid-cols-12 gap-4">
+            <fieldset
+              class="grid grid-cols-12 gap-4"
+              data-test="logo-dark-field"
+            >
               <legend
                 id="logo-dark-label"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -350,7 +386,10 @@
                 />
               </div>
             </fieldset>
-            <fieldset class="grid grid-cols-12 gap-4">
+            <fieldset
+              class="grid grid-cols-12 gap-4"
+              data-test="primary-color-field"
+            >
               <legend class="col-span-12 md:col-span-4 md:mb-0">
                 {{ $t("admin.settings.theme.primary_color") }}
               </legend>
@@ -376,7 +415,10 @@
                 />
               </div>
             </fieldset>
-            <fieldset class="grid grid-cols-12 gap-4">
+            <fieldset
+              class="grid grid-cols-12 gap-4"
+              data-test="theme-rounded-field"
+            >
               <legend class="col-span-12 md:col-span-4 md:mb-0">
                 {{ $t("admin.settings.theme.rounded") }}
               </legend>
@@ -397,7 +439,10 @@
           </AdminPanel>
 
           <AdminPanel :title="$t('admin.settings.banner.title')">
-            <fieldset class="grid grid-cols-12 gap-4">
+            <fieldset
+              class="grid grid-cols-12 gap-4"
+              data-test="banner-enabled-field"
+            >
               <legend class="col-span-12 md:col-span-4 md:mb-0">
                 {{ $t("admin.settings.banner.enabled") }}
               </legend>
@@ -415,7 +460,10 @@
                 <FormError :errors="formErrors.fieldError('banner_enabled')" />
               </div>
             </fieldset>
-            <fieldset class="grid grid-cols-12 gap-4">
+            <fieldset
+              class="grid grid-cols-12 gap-4"
+              data-test="banner-preview-field"
+            >
               <legend class="col-span-12 md:col-span-4 md:mb-0">
                 {{ $t("admin.settings.banner.preview") }}
               </legend>
@@ -434,7 +482,7 @@
                 />
               </div>
             </fieldset>
-            <div class="grid grid-cols-12 gap-4">
+            <div class="grid grid-cols-12 gap-4" data-test="banner-title-field">
               <label
                 for="banner-title"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -451,7 +499,7 @@
                 <FormError :errors="formErrors.fieldError('banner_title')" />
               </div>
             </div>
-            <div class="grid grid-cols-12 gap-4">
+            <div class="grid grid-cols-12 gap-4" data-test="banner-icon-field">
               <label
                 for="banner-icon"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -472,7 +520,10 @@
                 <FormError :errors="formErrors.fieldError('banner_icon')" />
               </div>
             </div>
-            <div class="grid grid-cols-12 gap-4">
+            <div
+              class="grid grid-cols-12 gap-4"
+              data-test="banner-message-field"
+            >
               <label
                 for="banner-message"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -489,7 +540,7 @@
                 <FormError :errors="formErrors.fieldError('banner_message')" />
               </div>
             </div>
-            <div class="grid grid-cols-12 gap-4">
+            <div class="grid grid-cols-12 gap-4" data-test="banner-link-field">
               <label
                 for="banner-link"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -506,7 +557,10 @@
                 <FormError :errors="formErrors.fieldError('banner_link')" />
               </div>
             </div>
-            <div class="grid grid-cols-12 gap-4">
+            <div
+              class="grid grid-cols-12 gap-4"
+              data-test="banner-link-text-field"
+            >
               <label
                 for="banner-link-text"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -525,7 +579,10 @@
                 />
               </div>
             </div>
-            <div class="grid grid-cols-12 gap-4">
+            <div
+              class="grid grid-cols-12 gap-4"
+              data-test="banner-link-style-field"
+            >
               <label
                 id="banner-link-style-label"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -534,6 +591,7 @@
               <div class="col-span-12 flex flex-col gap-1 md:col-span-8">
                 <Select
                   v-model="settings.banner_link_style"
+                  data-test="banner-link-style-dropdown"
                   aria-labelledby="banner-link-style-label"
                   :options="linkBtnStyles"
                   :placeholder="$t('admin.settings.banner.select_link_style')"
@@ -541,13 +599,24 @@
                   option-value="value"
                   :invalid="formErrors.fieldInvalid('banner_link_style')"
                   :disabled="disabled"
+                  :pt="{
+                    listContainer: {
+                      'data-test': 'banner-link-style-dropdown-items',
+                    },
+                    option: {
+                      'data-test': 'banner-link-style-dropdown-option',
+                    },
+                  }"
                 />
                 <FormError
                   :errors="formErrors.fieldError('banner_link_style')"
                 />
               </div>
             </div>
-            <div class="grid grid-cols-12 gap-4">
+            <div
+              class="grid grid-cols-12 gap-4"
+              data-test="banner-link-target-field"
+            >
               <label
                 id="banner-link-target-label"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -556,6 +625,7 @@
               <div class="col-span-12 flex flex-col gap-1 md:col-span-8">
                 <Select
                   v-model="settings.banner_link_target"
+                  data-test="banner-link-target-dropdown"
                   aria-labelledby="banner-link-target-label"
                   :options="linkTargets"
                   :placeholder="$t('admin.settings.banner.select_link_target')"
@@ -563,13 +633,24 @@
                   option-value="value"
                   :invalid="formErrors.fieldInvalid('banner_link_target')"
                   :disabled="disabled"
+                  :pt="{
+                    listContainer: {
+                      'data-test': 'banner-link-target-dropdown-items',
+                    },
+                    option: {
+                      'data-test': 'banner-link-target-dropdown-option',
+                    },
+                  }"
                 />
                 <FormError
                   :errors="formErrors.fieldError('banner_link_target')"
                 />
               </div>
             </div>
-            <fieldset class="grid grid-cols-12 gap-4">
+            <fieldset
+              class="grid grid-cols-12 gap-4"
+              data-test="banner-color-field"
+            >
               <legend class="col-span-12 md:col-span-4 md:mb-0">
                 {{ $t("admin.settings.banner.color") }}
               </legend>
@@ -593,7 +674,10 @@
                 <FormError :errors="formErrors.fieldError('banner_color')" />
               </div>
             </fieldset>
-            <fieldset class="grid grid-cols-12 gap-4">
+            <fieldset
+              class="grid grid-cols-12 gap-4"
+              data-test="banner-background-field"
+            >
               <legend class="col-span-12 md:col-span-4 md:mb-0">
                 {{ $t("admin.settings.banner.background") }}
               </legend>
@@ -622,12 +706,18 @@
           </AdminPanel>
 
           <AdminPanel :title="$t('app.rooms')">
-            <fieldset class="grid grid-cols-12 gap-4">
+            <fieldset
+              class="grid grid-cols-12 gap-4"
+              data-test="room-limit-field"
+            >
               <legend class="col-span-12 md:col-span-4 md:mb-0">
                 {{ $t("admin.settings.room_limit.title") }}
               </legend>
               <div class="col-span-12 flex flex-col gap-1 md:col-span-8">
-                <div class="flex flex-wrap gap-4">
+                <div
+                  class="flex flex-wrap gap-4"
+                  data-test="room-limit-mode-unlimited-field"
+                >
                   <div class="flex items-center">
                     <RadioButton
                       v-model="roomLimitMode"
@@ -646,7 +736,10 @@
                       $t("app.unlimited")
                     }}</label>
                   </div>
-                  <div class="flex items-center">
+                  <div
+                    class="flex items-center"
+                    data-test="room-limit-mode-custom-field"
+                  >
                     <RadioButton
                       v-model="roomLimitMode"
                       input-id="room-limit-mode-custom"
@@ -687,7 +780,10 @@
                 <FormError :errors="formErrors.fieldError('room_limit')" />
               </div>
             </fieldset>
-            <div class="grid grid-cols-12 gap-4">
+            <div
+              class="grid grid-cols-12 gap-4"
+              data-test="room-token-expiration-field"
+            >
               <label
                 id="room-token-expiration-label"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -696,6 +792,7 @@
               <div class="col-span-12 flex flex-col gap-1 md:col-span-8">
                 <Select
                   v-model="settings.room_token_expiration"
+                  data-test="room-token-expiration-dropdown"
                   :options="timePeriods"
                   option-label="text"
                   option-value="value"
@@ -706,6 +803,12 @@
                     input: {
                       'aria-describedby': 'room-token-expiration-help',
                     },
+                    listContainer: {
+                      'data-test': 'room-token-expiration-dropdown-items',
+                    },
+                    option: {
+                      'data-test': 'room-token-expiration-dropdown-option',
+                    },
                   }"
                 />
                 <small id="room-token-expiration-help">{{
@@ -716,7 +819,10 @@
                 />
               </div>
             </div>
-            <div class="grid grid-cols-12 gap-4">
+            <div
+              class="grid grid-cols-12 gap-4"
+              data-test="room-auto-delete-deadline-period-field"
+            >
               <label
                 id="room-auto-delete-deadline-period-label"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -728,6 +834,7 @@
                 <Select
                   v-model="settings.room_auto_delete_deadline_period"
                   :options="roomDeleteDeadlineOptions"
+                  data-test="room-auto-delete-deadline-dropdown"
                   option-label="text"
                   option-value="value"
                   :invalid="
@@ -740,6 +847,12 @@
                       'aria-describedby':
                         'room-auto-delete-deadline-period-help',
                     },
+                    listContainer: {
+                      'data-test': 'room-auto-delete-deadline-dropdown-items',
+                    },
+                    option: {
+                      'data-test': 'room-auto-delete-deadline-dropdown-option',
+                    },
                   }"
                 />
                 <small id="room-auto-delete-deadline-period-help">{{
@@ -754,7 +867,10 @@
                 />
               </div>
             </div>
-            <div class="grid grid-cols-12 gap-4">
+            <div
+              class="grid grid-cols-12 gap-4"
+              data-test="room-auto-delete-inactive-period-field"
+            >
               <label
                 id="room-auto-delete-inactive-period-label"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -765,6 +881,7 @@
               <div class="col-span-12 flex flex-col gap-1 md:col-span-8">
                 <Select
                   v-model="settings.room_auto_delete_inactive_period"
+                  data-test="room-auto-delete-inactive-dropdown"
                   :options="timePeriods"
                   option-label="text"
                   option-value="value"
@@ -778,6 +895,12 @@
                       'aria-describedby':
                         'room-auto-delete-inactive-period-help',
                     },
+                    listContainer: {
+                      'data-test': 'room-auto-delete-inactive-dropdown-items',
+                    },
+                    option: {
+                      'data-test': 'room-auto-delete-inactive-dropdown-option',
+                    },
                   }"
                 />
                 <small id="room-auto-delete-inactive-period-help">{{
@@ -792,7 +915,10 @@
                 />
               </div>
             </div>
-            <div class="grid grid-cols-12 gap-4">
+            <div
+              class="grid grid-cols-12 gap-4"
+              data-test="room-auto-delete-never-used-period-field"
+            >
               <label
                 id="room-auto-delete-never-used-period-label"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -803,6 +929,7 @@
               <div class="col-span-12 flex flex-col gap-1 md:col-span-8">
                 <Select
                   v-model="settings.room_auto_delete_never_used_period"
+                  data-test="room-auto-delete-never-used-dropdown"
                   :options="timePeriods"
                   option-label="text"
                   option-value="value"
@@ -818,6 +945,13 @@
                       'aria-describedby':
                         'room-auto-delete-never-used-period-help',
                     },
+                    listContainer: {
+                      'data-test': 'room-auto-delete-never-used-dropdown-items',
+                    },
+                    option: {
+                      'data-test':
+                        'room-auto-delete-never-used-dropdown-option',
+                    },
                   }"
                 />
                 <small id="room-auto-delete-never-used-period-help">{{
@@ -832,7 +966,10 @@
                 />
               </div>
             </div>
-            <div class="grid grid-cols-12 gap-4">
+            <div
+              class="grid grid-cols-12 gap-4"
+              data-test="room-file-terms-of-use-field"
+            >
               <label
                 for="room-file-terms-of-use"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -859,7 +996,10 @@
           </AdminPanel>
 
           <AdminPanel :title="$t('app.users')">
-            <fieldset class="grid grid-cols-12 gap-4">
+            <fieldset
+              class="grid grid-cols-12 gap-4"
+              data-test="password-change-allowed-field"
+            >
               <legend class="col-span-12 md:col-span-4 md:mb-0">
                 {{ $t("admin.settings.password_change_allowed") }}
               </legend>
@@ -890,7 +1030,10 @@
           <AdminPanel
             :title="$t('admin.settings.recording_and_statistics_title')"
           >
-            <fieldset class="grid grid-cols-12 gap-4">
+            <fieldset
+              class="grid grid-cols-12 gap-4"
+              data-test="statistics-servers-enabled-field"
+            >
               <legend class="col-span-12 md:col-span-4 md:mb-0">
                 {{ $t("admin.settings.statistics.servers.enabled_title") }}
               </legend>
@@ -916,7 +1059,10 @@
                 />
               </div>
             </fieldset>
-            <div class="grid grid-cols-12 gap-4">
+            <div
+              class="grid grid-cols-12 gap-4"
+              data-test="statistics-servers-retention-period-field"
+            >
               <label
                 id="statistics-servers-retention-period-label"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -927,6 +1073,7 @@
               <div class="col-span-12 flex flex-col gap-1 md:col-span-8">
                 <Select
                   v-model="settings.recording_server_usage_retention_period"
+                  data-test="statistics-servers-retention-period-dropdown"
                   :options="timePeriods"
                   option-label="text"
                   option-value="value"
@@ -937,6 +1084,16 @@
                   "
                   :disabled="disabled"
                   aria-labelledby="statistics-servers-retention-period-label"
+                  :pt="{
+                    listContainer: {
+                      'data-test':
+                        'statistics-servers-retention-period-dropdown-items',
+                    },
+                    option: {
+                      'data-test':
+                        'statistics-servers-retention-period-dropdown-option',
+                    },
+                  }"
                 />
                 <FormError
                   :errors="
@@ -947,7 +1104,10 @@
                 />
               </div>
             </div>
-            <fieldset class="grid grid-cols-12 gap-4">
+            <fieldset
+              class="grid grid-cols-12 gap-4"
+              data-test="statistics-meetings-enabled-field"
+            >
               <legend class="col-span-12 md:col-span-4 md:mb-0">
                 {{ $t("admin.settings.statistics.meetings.enabled_title") }}
               </legend>
@@ -973,7 +1133,10 @@
                 />
               </div>
             </fieldset>
-            <div class="grid grid-cols-12 gap-4">
+            <div
+              class="grid grid-cols-12 gap-4"
+              data-test="statistics-meetings-retention-period-field"
+            >
               <label
                 id="statistics-meetings-retention-period-label"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -986,6 +1149,7 @@
               <div class="col-span-12 flex flex-col gap-1 md:col-span-8">
                 <Select
                   v-model="settings.recording_meeting_usage_retention_period"
+                  data-test="statistics-meetings-retention-period-dropdown"
                   :options="timePeriods"
                   option-label="text"
                   option-value="value"
@@ -996,6 +1160,16 @@
                   "
                   :disabled="disabled"
                   aria-labelledby="statistics-meetings-retention-period-label"
+                  :pt="{
+                    listContainer: {
+                      'data-test':
+                        'statistics-meetings-retention-period-dropdown-items',
+                    },
+                    option: {
+                      'data-test':
+                        'statistics-meetings-retention-period-dropdown-option',
+                    },
+                  }"
                 />
                 <FormError
                   :errors="
@@ -1006,7 +1180,10 @@
                 />
               </div>
             </div>
-            <div class="grid grid-cols-12 gap-4">
+            <div
+              class="grid grid-cols-12 gap-4"
+              data-test="attendance-retention-period-field"
+            >
               <label
                 id="attendance-retention-period-label"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -1017,6 +1194,7 @@
               <div class="col-span-12 flex flex-col gap-1 md:col-span-8">
                 <Select
                   v-model="settings.recording_attendance_retention_period"
+                  data-test="attendance-retention-period-dropdown"
                   :options="timePeriods"
                   option-label="text"
                   option-value="value"
@@ -1027,6 +1205,15 @@
                   "
                   :disabled="disabled"
                   aria-labelledby="attendance-retention-period-label"
+                  :pt="{
+                    listContainer: {
+                      'data-test': 'attendance-retention-period-dropdown-items',
+                    },
+                    option: {
+                      'data-test':
+                        'attendance-retention-period-dropdown-option',
+                    },
+                  }"
                 />
                 <FormError
                   :errors="
@@ -1037,7 +1224,10 @@
                 />
               </div>
             </div>
-            <div class="grid grid-cols-12 gap-4">
+            <div
+              class="grid grid-cols-12 gap-4"
+              data-test="recording-retention-period-field"
+            >
               <label
                 id="recording-retention-period-label"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -1048,6 +1238,7 @@
               <div class="col-span-12 flex flex-col gap-1 md:col-span-8">
                 <Select
                   v-model="settings.recording_recording_retention_period"
+                  data-test="recording-retention-period-dropdown"
                   :options="recordingRetentionPeriods"
                   option-label="text"
                   option-value="value"
@@ -1058,6 +1249,14 @@
                   "
                   :disabled="disabled"
                   aria-labelledby="recording-retention-period-label"
+                  :pt="{
+                    listContainer: {
+                      'data-test': 'recording-retention-period-dropdown-items',
+                    },
+                    option: {
+                      'data-test': 'recording-retention-period-dropdown-option',
+                    },
+                  }"
                 />
                 <FormError
                   :errors="
@@ -1071,7 +1270,10 @@
           </AdminPanel>
 
           <AdminPanel :title="$t('admin.settings.bbb.title')">
-            <fieldset class="grid grid-cols-12 gap-4">
+            <fieldset
+              class="grid grid-cols-12 gap-4"
+              data-test="bbb-logo-field"
+            >
               <legend
                 id="bbb-logo-label"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -1098,7 +1300,10 @@
                 />
               </div>
             </fieldset>
-            <fieldset class="grid grid-cols-12 gap-4">
+            <fieldset
+              class="grid grid-cols-12 gap-4"
+              data-test="bbb-style-field"
+            >
               <legend
                 id="bbb-style-label"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -1120,7 +1325,10 @@
                 />
               </div>
             </fieldset>
-            <fieldset class="grid grid-cols-12 gap-4">
+            <fieldset
+              class="grid grid-cols-12 gap-4"
+              data-test="default-presentation-field"
+            >
               <legend
                 id="default-presentation-label"
                 class="col-span-12 md:col-span-4 md:mb-0"
@@ -1163,6 +1371,7 @@
             :loading="isBusy"
             icon="fa-solid fa-save"
             :label="$t('app.save')"
+            data-test="settings-save-button"
           />
         </div>
       </div>
@@ -1285,7 +1494,9 @@ function updateSettings() {
 
   if (uploadBBBLogoFile.value) {
     formData.append("bbb_logo_file", uploadBBBLogoFile.value);
-  } else if (!bbbLogoDeleted.value && settings.value.bbb_logo != null) {
+  } else if (bbbLogoDeleted.value) {
+    formData.append("bbb_logo", "");
+  } else if (settings.value.bbb_logo !== null) {
     formData.append("bbb_logo", settings.value.bbb_logo);
   }
 
diff --git a/resources/js/views/AdminUsersIndex.vue b/resources/js/views/AdminUsersIndex.vue
index e89772256..d9d55c4ca 100644
--- a/resources/js/views/AdminUsersIndex.vue
+++ b/resources/js/views/AdminUsersIndex.vue
@@ -2,7 +2,7 @@
   <div>
     <div class="mb-6 flex flex-col justify-between gap-4 md:flex-row">
       <div>
-        <InputGroup>
+        <InputGroup data-test="user-search">
           <InputText
             v-model="filter.name"
             :disabled="isBusy"
@@ -22,8 +22,9 @@
       <div class="flex flex-col justify-end gap-2 md:flex-row">
         <InputGroup class="min-w-80 shrink-0 grow">
           <multiselect
-            ref="rolesMultiselectRef"
+            ref="roles-multiselect"
             v-model="filter.role"
+            data-test="role-dropdown"
             :placeholder="$t('admin.users.role_filter')"
             track-by="id"
             open-direction="bottom"
@@ -31,7 +32,7 @@
             :searchable="false"
             :internal-search="false"
             :clear-on-select="false"
-            :close-on-select="false"
+            :close-on-select="true"
             :show-no-results="false"
             :show-labels="false"
             :options="roles"
@@ -57,6 +58,7 @@
                   severity="secondary"
                   icon="fa-solid fa-arrow-left"
                   :label="$t('app.previous_page')"
+                  data-test="previous-page-button"
                   @click="loadRoles(Math.max(1, rolesCurrentPage - 1))"
                 />
                 <Button
@@ -65,6 +67,7 @@
                   severity="secondary"
                   icon="fa-solid fa-arrow-right"
                   :label="$t('app.next_page')"
+                  data-test="next-page-button"
                   @click="loadRoles(rolesCurrentPage + 1)"
                 />
               </div>
@@ -75,6 +78,7 @@
             outlined
             severity="secondary"
             icon="fa-solid fa-xmark"
+            data-test="clear-roles-button"
             @click="clearFilterRole"
           />
 
@@ -83,6 +87,7 @@
             outlined
             severity="secondary"
             icon="fa-solid fa-sync"
+            data-test="roles-reload-button"
             @click="loadRoles(rolesCurrentPage)"
           />
         </InputGroup>
@@ -97,6 +102,7 @@
           :aria-label="$t('admin.users.new')"
           icon="fa-solid fa-plus"
           :to="{ name: 'admin.users.new' }"
+          data-test="users-add-button"
         />
       </div>
     </div>
@@ -118,6 +124,28 @@
       striped-rows
       :pt="{
         table: 'table-auto lg:table-fixed',
+        bodyRow: {
+          'data-test': 'user-item',
+        },
+        mask: {
+          'data-test': 'overlay',
+        },
+        column: {
+          bodyCell: {
+            'data-test': 'user-item-cell',
+          },
+          headerCell: {
+            'data-test': 'user-header-cell',
+          },
+        },
+        pcPaginator: {
+          page: {
+            'data-test': 'paginator-page',
+          },
+          next: {
+            'data-test': 'paginator-next-button',
+          },
+        },
       }"
       @update:first="paginator.setFirst($event)"
       @page="onPage"
@@ -198,6 +226,7 @@
                 params: { id: slotProps.data.id },
               }"
               icon="fa-solid fa-eye"
+              data-test="users-view-button"
             />
             <Button
               v-if="userPermissions.can('update', slotProps.data)"
@@ -221,6 +250,7 @@
                 params: { id: slotProps.data.id },
               }"
               icon="fa-solid fa-edit"
+              data-test="users-edit-button"
             />
             <SettingsUsersResetPasswordButton
               v-if="
@@ -248,7 +278,7 @@
 
 <script setup>
 import { useApi } from "../composables/useApi.js";
-import { onMounted, ref } from "vue";
+import { onMounted, ref, useTemplateRef } from "vue";
 import { useUserPermissions } from "../composables/useUserPermission.js";
 import { useSettingsStore } from "../stores/settings";
 import { Multiselect } from "vue-multiselect";
@@ -284,7 +314,7 @@ const rolesLoading = ref(false);
 const rolesLoadingError = ref(false);
 const rolesCurrentPage = ref(1);
 const rolesHasNextPage = ref(false);
-const rolesMultiselectRef = ref();
+const rolesMultiselectRef = useTemplateRef("roles-multiselect");
 
 /**
  * Loads the user, part of roles that can be selected and enables an event listener
@@ -321,7 +351,7 @@ function loadRoles(page = 1) {
     .catch((error) => {
       rolesMultiselectRef.value.deactivate();
       rolesLoadingError.value = true;
-      error(error, this.$root, error.message);
+      api.error(error);
     })
     .finally(() => {
       rolesLoading.value = false;
diff --git a/resources/js/views/AdminUsersNew.vue b/resources/js/views/AdminUsersNew.vue
index eabc017de..3dc2526f5 100644
--- a/resources/js/views/AdminUsersNew.vue
+++ b/resources/js/views/AdminUsersNew.vue
@@ -3,7 +3,10 @@
     <OverlayComponent :show="isBusy">
       <form class="flex flex-col gap-4" @submit.prevent="save">
         <AdminPanel :title="$t('rooms.settings.general.title')">
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="firstname-field"
+          >
             <label for="firstname" class="col-span-12 md:col-span-4 md:mb-0">{{
               $t("app.firstname")
             }}</label>
@@ -20,7 +23,7 @@
               <FormError :errors="formErrors.fieldError('firstname')" />
             </div>
           </div>
-          <div class="field grid grid-cols-12 gap-4">
+          <div class="field grid grid-cols-12 gap-4" data-test="lastname-field">
             <label for="lastname" class="col-span-12 md:col-span-4 md:mb-0">{{
               $t("app.lastname")
             }}</label>
@@ -37,7 +40,7 @@
               <FormError :errors="formErrors.fieldError('lastname')" />
             </div>
           </div>
-          <div class="field grid grid-cols-12 gap-4">
+          <div class="field grid grid-cols-12 gap-4" data-test="email-field">
             <label for="email" class="col-span-12 md:col-span-4 md:mb-0">{{
               $t("app.email")
             }}</label>
@@ -55,7 +58,7 @@
               <FormError :errors="formErrors.fieldError('email')" />
             </div>
           </div>
-          <div class="field grid grid-cols-12 gap-4">
+          <div class="field grid grid-cols-12 gap-4" data-test="locale-field">
             <label
               id="locale-label"
               class="col-span-12 md:col-span-4 md:mb-0"
@@ -73,7 +76,7 @@
               <FormError :errors="formErrors.fieldError('user_locale')" />
             </div>
           </div>
-          <div class="field grid grid-cols-12 gap-4">
+          <div class="field grid grid-cols-12 gap-4" data-test="timezone-field">
             <label
               id="timezone-label"
               class="col-span-12 md:col-span-4 md:mb-0"
@@ -93,7 +96,7 @@
               <FormError :errors="formErrors.fieldError('timezone')" />
             </div>
           </div>
-          <div class="field grid grid-cols-12 gap-4">
+          <div class="field grid grid-cols-12 gap-4" data-test="role-field">
             <label id="roles-label" class="col-span-12 md:col-span-4 md:mb-0">{{
               $t("app.roles")
             }}</label>
@@ -103,7 +106,7 @@
                 aria-labelledby="roles-label"
                 :invalid="formErrors.fieldInvalid('roles', true)"
                 :disabled="isBusy"
-                :disable-superuser="!authStore.currentUser.superuser"
+                :disable-superuser="!authStore.currentUser?.superuser"
                 @loading-error="(value) => (rolesLoadingError = value)"
                 @busy="(value) => (rolesLoading = value)"
               />
@@ -112,7 +115,10 @@
           </div>
         </AdminPanel>
         <AdminPanel :title="$t('auth.password')">
-          <div class="field grid grid-cols-12 gap-4">
+          <div
+            class="field grid grid-cols-12 gap-4"
+            data-test="generate-password-field"
+          >
             <label
               for="generate_password"
               class="col-span-12 items-start md:col-span-4 md:mb-0"
@@ -134,7 +140,11 @@
               }}</small>
             </div>
           </div>
-          <div v-if="!generatePassword" class="field grid grid-cols-12 gap-4">
+          <div
+            v-if="!generatePassword"
+            class="field grid grid-cols-12 gap-4"
+            data-test="new-password-field"
+          >
             <label
               for="new_password"
               class="col-span-12 md:col-span-4 md:mb-0"
@@ -156,7 +166,11 @@
             </div>
           </div>
 
-          <div v-if="!generatePassword" class="field grid grid-cols-12 gap-4">
+          <div
+            v-if="!generatePassword"
+            class="field grid grid-cols-12 gap-4"
+            data-test="new-password-confirmation-field"
+          >
             <label
               for="new_password_confirmation"
               class="col-span-12 md:col-span-4 md:mb-0"
@@ -192,6 +206,7 @@
             type="submit"
             icon="fa-solid fa-save"
             :label="$t('app.save')"
+            data-test="users-new-save-button"
           />
         </div>
       </form>
diff --git a/resources/js/views/AdminUsersView.vue b/resources/js/views/AdminUsersView.vue
index 182066d8c..6fd17f016 100644
--- a/resources/js/views/AdminUsersView.vue
+++ b/resources/js/views/AdminUsersView.vue
@@ -9,6 +9,7 @@
           :label="$t('app.cancel_editing')"
           icon="fa-solid fa-times"
           severity="secondary"
+          data-test="users-cancel-edit-button"
         />
         <Button
           v-if="viewOnly && userPermissions.can('update', user)"
@@ -18,6 +19,7 @@
           :label="$t('app.edit')"
           icon="fa-solid fa-edit"
           severity="info"
+          data-test="users-edit-button"
         />
         <SettingsUsersResetPasswordButton
           v-if="
diff --git a/resources/js/views/ForgotPassword.vue b/resources/js/views/ForgotPassword.vue
index e6349f3b8..b1203b6b5 100644
--- a/resources/js/views/ForgotPassword.vue
+++ b/resources/js/views/ForgotPassword.vue
@@ -8,7 +8,7 @@
           <template #title> {{ $t("auth.reset_password") }} </template>
           <template #content>
             <form @submit.prevent="submit">
-              <div class="flex flex-col gap-2">
+              <div class="flex flex-col gap-2" data-test="email-field">
                 <label for="email">{{ $t("app.email") }}</label>
                 <InputText
                   id="email"
@@ -28,6 +28,7 @@
                 :disabled="loading"
                 :loading="loading"
                 :label="$t('auth.send_password_reset_link')"
+                data-test="send-reset-link-button"
               />
             </form>
           </template>
diff --git a/resources/js/views/MeetingsIndex.vue b/resources/js/views/MeetingsIndex.vue
index bc8ab5aca..ab778b42b 100644
--- a/resources/js/views/MeetingsIndex.vue
+++ b/resources/js/views/MeetingsIndex.vue
@@ -10,7 +10,7 @@
       <template #content>
         <div class="flex justify-between">
           <div>
-            <InputGroup>
+            <InputGroup data-test="meeting-search">
               <InputText
                 v-model="search"
                 :disabled="isBusy"
@@ -32,6 +32,7 @@
               :disabled="isBusy"
               icon="fa-solid fa-sync"
               :loading="isBusy"
+              data-test="meetings-reload-button"
               @click="loadData()"
             />
           </div>
@@ -55,6 +56,30 @@
           "
           :loading="isBusy || loadingError"
           row-hover
+          :pt="{
+            bodyRow: {
+              'data-test': 'meeting-item',
+            },
+            mask: {
+              'data-test': 'overlay',
+            },
+            column: {
+              bodyCell: {
+                'data-test': 'meeting-item-cell',
+              },
+              headerCell: {
+                'data-test': 'meeting-header-cell',
+              },
+            },
+            pcPaginator: {
+              page: {
+                'data-test': 'paginator-page',
+              },
+              next: {
+                'data-test': 'paginator-next-button',
+              },
+            },
+          }"
           @update:first="paginator.setFirst($event)"
           @page="onPage"
           @sort="onSort"
@@ -204,6 +229,7 @@
                     params: { id: slotProps.data.room.id },
                   }"
                   :disabled="true"
+                  data-test="meeting-view-room-button"
                 >
                   <Button
                     v-tooltip="
diff --git a/resources/js/views/PasswordReset.vue b/resources/js/views/PasswordReset.vue
index eb98a272e..8f2d10241 100644
--- a/resources/js/views/PasswordReset.vue
+++ b/resources/js/views/PasswordReset.vue
@@ -14,7 +14,7 @@
           </template>
           <template #content>
             <form @submit.prevent="submit">
-              <div class="flex flex-col gap-2">
+              <div class="flex flex-col gap-2" data-test="new-password-field">
                 <label for="new_password">{{ $t("auth.new_password") }}</label>
                 <InputText
                   id="new_password"
@@ -28,7 +28,10 @@
                 <FormError :errors="formErrors.fieldError('password')" />
               </div>
 
-              <div class="flex flex-col gap-2">
+              <div
+                class="flex flex-col gap-2"
+                data-test="password-confirmation-field"
+              >
                 <label for="password_confirmation">{{
                   $t("auth.new_password_confirmation")
                 }}</label>
@@ -56,6 +59,7 @@
                 :label="
                   welcome ? $t('auth.set_password') : $t('auth.change_password')
                 "
+                data-test="reset-password-button"
               />
             </form>
           </template>
diff --git a/resources/js/views/VerifyEmail.vue b/resources/js/views/VerifyEmail.vue
index 92cb35c4d..ebdb414e7 100644
--- a/resources/js/views/VerifyEmail.vue
+++ b/resources/js/views/VerifyEmail.vue
@@ -14,6 +14,7 @@
                   severity="success"
                   icon="fa-solid fa-envelope-circle-check"
                   :closable="false"
+                  data-test="verify-success-message"
                 >
                   {{ $t("app.verify_email.success") }}
                 </Message>
@@ -24,6 +25,7 @@
                   severity="error"
                   icon="fa-solid fa-triangle-exclamation"
                   :closable="false"
+                  data-test="verify-invalid-message"
                 >
                   {{ $t("app.verify_email.invalid") }}
                 </Message>
@@ -32,6 +34,7 @@
                   severity="error"
                   icon="fa-solid fa-triangle-exclamation"
                   :closable="false"
+                  data-test="verify-error-message"
                 >
                   {{ $t("app.verify_email.fail") }}
                 </Message>
diff --git a/tests/Backend/Feature/api/v1/SettingsTest.php b/tests/Backend/Feature/api/v1/SettingsTest.php
index 023023675..c3d8d3c78 100644
--- a/tests/Backend/Feature/api/v1/SettingsTest.php
+++ b/tests/Backend/Feature/api/v1/SettingsTest.php
@@ -504,7 +504,6 @@ public function test_update_with_invalid_inputs()
             'recording_attendance_retention_period' => 'notnumber',
             'recording_recording_retention_period' => 'notnumber',
 
-            'bbb_logo' => '',
             'bbb_logo_file' => 'notimagefile',
         ];
 
@@ -556,7 +555,6 @@ public function test_update_with_invalid_inputs()
                 'recording_attendance_retention_period',
                 'recording_recording_retention_period',
 
-                'bbb_logo',
                 'bbb_logo_file',
             ]);
 
@@ -906,7 +904,7 @@ public function test_update_bbb_style()
         $this->assertEquals('body { background-color: #000; }', Storage::disk('public')->get('styles/bbb.css'));
 
         // Clear default presentation (file deleted and setting removed)
-        $payload['bbb_style'] = null;
+        $payload['bbb_style'] = '';
         $this->actingAs($this->user)->putJson(route('api.v1.settings.update'), $payload)
             ->assertSuccessful();
         $this->assertNull(app(BigBlueButtonSettings::class)->style);
@@ -989,6 +987,7 @@ public function test_update_bbb_logo()
 
         // Clear logo
         unset($payload['bbb_logo_file']);
+        $payload['bbb_logo'] = '';
         $this->actingAs($this->user)->putJson(route('api.v1.settings.update'), $payload)
             ->assertSuccessful();
         $this->assertNull(app(BigBlueButtonSettings::class)->logo);
diff --git a/tests/Frontend/e2e/AdminIndex.cy.js b/tests/Frontend/e2e/AdminIndex.cy.js
new file mode 100644
index 000000000..861962fa0
--- /dev/null
+++ b/tests/Frontend/e2e/AdminIndex.cy.js
@@ -0,0 +1,344 @@
+describe("Admin index", function () {
+  beforeEach(function () {
+    cy.init();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin");
+  });
+
+  it("visit without permission to view admin pages", function () {
+    cy.intercept("GET", "api/v1/currentUser", {
+      statusCode: 200,
+      fixture: "currentUser.json",
+    });
+
+    cy.visit("/admin");
+
+    // Check if the welcome page is shown
+    cy.url().should("not.include", "/admin");
+    cy.get("h1").should("be.visible").and("include.text", "home.title");
+  });
+
+  it("check admin index with all permissions", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "settings.viewAny",
+        "roles.viewAny",
+        "users.viewAny",
+        "serverPools.viewAny",
+        "servers.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin");
+
+    cy.contains("admin.title").should("be.visible");
+    cy.contains("admin.overview").should("be.visible");
+    cy.contains("admin.overview_description").should("be.visible");
+
+    cy.get('[data-test="admin-settings-link"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/settings")
+      .and("include.text", "admin.settings.title")
+      .and("include.text", "admin.settings.tile_description");
+
+    cy.get('[data-test="admin-users-link"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/users")
+      .and("include.text", "app.users")
+      .and("include.text", "admin.users.tile_description");
+
+    cy.get('[data-test="admin-roles-link"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/roles")
+      .and("include.text", "app.roles")
+      .and("include.text", "admin.roles.tile_description");
+
+    cy.get('[data-test="admin-room-types-link"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/room_types")
+      .and("include.text", "app.room_types")
+      .and("include.text", "admin.room_types.tile_description");
+
+    cy.get('[data-test="admin-servers-link"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/servers")
+      .and("include.text", "app.servers")
+      .and("include.text", "admin.servers.tile_description");
+
+    cy.get('[data-test="admin-server-pools-link"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/server_pools")
+      .and("include.text", "app.server_pools")
+      .and("include.text", "admin.server_pools.tile_description");
+  });
+
+  it("open admin settings", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view", "settings.viewAny"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin");
+
+    cy.contains("admin.title").should("be.visible");
+    cy.contains("admin.overview").should("be.visible");
+    cy.contains("admin.overview_description").should("be.visible");
+
+    cy.get('[data-test="admin-settings-link"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/settings")
+      .and("include.text", "admin.settings.title")
+      .and("include.text", "admin.settings.tile_description");
+
+    cy.get('[data-test="admin-users-link"]').should("not.exist");
+
+    cy.get('[data-test="admin-roles-link"]').should("not.exist");
+
+    cy.get('[data-test="admin-room-types-link"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/room_types")
+      .and("include.text", "app.room_types")
+      .and("include.text", "admin.room_types.tile_description");
+
+    cy.get('[data-test="admin-servers-link"]').should("not.exist");
+
+    cy.get('[data-test="admin-server-pools-link"]').should("not.exist");
+
+    cy.interceptAdminSettingsRequest();
+    cy.get('[data-test="admin-settings-link"]').click();
+
+    cy.url().should("include", "/admin/settings");
+  });
+
+  it("open admin users", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin");
+
+    cy.contains("admin.title").should("be.visible");
+    cy.contains("admin.overview").should("be.visible");
+    cy.contains("admin.overview_description").should("be.visible");
+
+    cy.get('[data-test="admin-settings-link"]').should("not.exist");
+
+    cy.get('[data-test="admin-users-link"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/users")
+      .and("include.text", "app.users")
+      .and("include.text", "admin.users.tile_description");
+
+    cy.get('[data-test="admin-roles-link"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/roles")
+      .and("include.text", "app.roles")
+      .and("include.text", "admin.roles.tile_description");
+
+    cy.get('[data-test="admin-room-types-link"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/room_types")
+      .and("include.text", "app.room_types")
+      .and("include.text", "admin.room_types.tile_description");
+
+    cy.get('[data-test="admin-servers-link"]').should("not.exist");
+
+    cy.get('[data-test="admin-server-pools-link"]').should("not.exist");
+
+    cy.interceptAdminUsersIndexRequests();
+
+    cy.get('[data-test="admin-users-link"]').click();
+
+    cy.url().should("include", "/admin/users");
+  });
+
+  it("open admin roles", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view", "roles.viewAny"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin");
+
+    cy.contains("admin.title").should("be.visible");
+    cy.contains("admin.overview").should("be.visible");
+    cy.contains("admin.overview_description").should("be.visible");
+
+    cy.get('[data-test="admin-settings-link"]').should("not.exist");
+
+    cy.get('[data-test="admin-users-link"]').should("not.exist");
+
+    cy.get('[data-test="admin-roles-link"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/roles")
+      .and("include.text", "app.roles")
+      .and("include.text", "admin.roles.tile_description");
+
+    cy.get('[data-test="admin-room-types-link"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/room_types")
+      .and("include.text", "app.room_types")
+      .and("include.text", "admin.room_types.tile_description");
+
+    cy.get('[data-test="admin-servers-link"]').should("not.exist");
+
+    cy.get('[data-test="admin-server-pools-link"]').should("not.exist");
+
+    cy.interceptAdminRolesIndexRequests();
+
+    cy.get('[data-test="admin-roles-link"]').click();
+
+    cy.url().should("include", "/admin/roles");
+  });
+
+  it("open admin room types", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin");
+
+    cy.contains("admin.title").should("be.visible");
+    cy.contains("admin.overview").should("be.visible");
+    cy.contains("admin.overview_description").should("be.visible");
+
+    cy.get('[data-test="admin-settings-link"]').should("not.exist");
+
+    cy.get('[data-test="admin-users-link"]').should("not.exist");
+
+    cy.get('[data-test="admin-roles-link"]').should("not.exist");
+
+    cy.get('[data-test="admin-room-types-link"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/room_types")
+      .and("include.text", "app.room_types")
+      .and("include.text", "admin.room_types.tile_description");
+
+    cy.get('[data-test="admin-servers-link"]').should("not.exist");
+
+    cy.get('[data-test="admin-server-pools-link"]').should("not.exist");
+
+    cy.interceptAdminRoomTypesIndexRequests();
+
+    cy.get('[data-test="admin-room-types-link"]').click();
+
+    cy.url().should("include", "/admin/room_types");
+  });
+
+  it("open admin servers", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view", "servers.viewAny"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin");
+
+    cy.contains("admin.title").should("be.visible");
+    cy.contains("admin.overview").should("be.visible");
+    cy.contains("admin.overview_description").should("be.visible");
+
+    cy.get('[data-test="admin-settings-link"]').should("not.exist");
+
+    cy.get('[data-test="admin-users-link"]').should("not.exist");
+
+    cy.get('[data-test="admin-roles-link"]').should("not.exist");
+
+    cy.get('[data-test="admin-room-types-link"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/room_types")
+      .and("include.text", "app.room_types")
+      .and("include.text", "admin.room_types.tile_description");
+
+    cy.get('[data-test="admin-servers-link"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/servers")
+      .and("include.text", "app.servers")
+      .and("include.text", "admin.servers.tile_description");
+
+    cy.get('[data-test="admin-server-pools-link"]').should("not.exist");
+
+    cy.interceptAdminServersIndexRequests();
+
+    cy.get('[data-test="admin-servers-link"]').click();
+
+    cy.url().should("include", "/admin/servers");
+  });
+
+  it("open admin server pools", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view", "serverPools.viewAny"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin");
+
+    cy.contains("admin.title").should("be.visible");
+    cy.contains("admin.overview").should("be.visible");
+    cy.contains("admin.overview_description").should("be.visible");
+
+    cy.get('[data-test="admin-settings-link"]').should("not.exist");
+
+    cy.get('[data-test="admin-users-link"]').should("not.exist");
+
+    cy.get('[data-test="admin-roles-link"]').should("not.exist");
+
+    cy.get('[data-test="admin-room-types-link"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/room_types")
+      .and("include.text", "app.room_types")
+      .and("include.text", "admin.room_types.tile_description");
+
+    cy.get('[data-test="admin-servers-link"]').should("not.exist");
+
+    cy.get('[data-test="admin-server-pools-link"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/server_pools")
+      .and("include.text", "app.server_pools")
+      .and("include.text", "admin.server_pools.tile_description");
+
+    cy.interceptAdminServerPoolsIndexRequests();
+
+    cy.get('[data-test="admin-server-pools-link"]').click();
+
+    cy.url().should("include", "/admin/server_pools");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminRolesEdit.cy.js b/tests/Frontend/e2e/AdminRolesEdit.cy.js
new file mode 100644
index 000000000..5a23579d8
--- /dev/null
+++ b/tests/Frontend/e2e/AdminRolesEdit.cy.js
@@ -0,0 +1,2193 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin roles edit", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminRolesViewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "roles.view",
+        "roles.update",
+        "roles.create",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin/roles/2/edit");
+  });
+
+  it("visit with user without permission to edit roles", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "roles.view",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/roles/2/edit");
+
+    cy.checkToastMessage("app.flash.unauthorized");
+
+    // Check if welcome page is shown
+    cy.url().should("not.include", "/admin/roles/2/edit");
+    cy.get("h1").should("be.visible").and("include.text", "home.title");
+  });
+
+  it("edit role", function () {
+    const roleRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/roles/2",
+      { fixture: "role.json" },
+      "roleRequest",
+    );
+
+    cy.visit("/admin/roles/2/edit");
+
+    cy.contains("admin.title");
+
+    // Check loading
+    cy.get('[data-test="roles-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-delete-button"]').should("not.exist");
+    cy.get('[data-test="roles-save-button"]').should("be.disabled");
+
+    cy.get('[data-test="overlay"]')
+      .should("be.visible")
+      .then(() => {
+        roleRequest.sendResponse();
+      });
+
+    cy.wait("@roleRequest");
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that correct buttons are shown
+    cy.get('[data-test="roles-cancel-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.cancel_editing")
+      .and("have.attr", "href", "/admin/roles/2");
+    cy.get('[data-test="roles-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-delete-button"]').should("not.exist");
+    cy.get('[data-test="roles-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.save");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.roles.index")
+      .should("include.text", 'admin.breakcrumbs.roles.edit_{"name":"Staff"}');
+
+    // Change role settings
+    cy.get('[data-test="name-field"]')
+      .should("be.visible")
+      .and("include.text", "app.model_name")
+      .within(() => {
+        cy.get("#name").should("have.value", "Staff").clear();
+        cy.get("#name").type("Standard role");
+      });
+
+    // Check that breadcrumbs stays the same
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.roles.index")
+      .should("include.text", 'admin.breakcrumbs.roles.edit_{"name":"Staff"}');
+
+    cy.get('[data-test="roles-room-limit-help-dialog"]').should("not.exist");
+    cy.get('[data-test="room-limit-field"]')
+      .should("be.visible")
+      .and("include.text", "app.room_limit")
+      .within(() => {
+        cy.get('[data-test="room-limit-mode-default-field"]')
+          .should("be.visible")
+          .should(
+            "include.text",
+            'admin.roles.room_limit.default_{"value":"app.unlimited"}',
+          )
+          .within(() => {
+            cy.get("#default").should("be.checked").and("not.be.disabled");
+          });
+
+        cy.get('[data-test="room-limit-mode-unlimited-field"]')
+          .should("be.visible")
+          .should("include.text", "app.unlimited")
+          .within(() => {
+            cy.get("#unlimited")
+              .should("not.be.checked")
+              .and("not.be.disabled")
+              .click();
+          });
+
+        cy.get('[data-test="room-limit-mode-custom-field"]')
+          .should("be.visible")
+          .should("include.text", "admin.roles.room_limit.custom")
+          .within(() => {
+            cy.get("#custom").should("not.be.checked").and("not.be.disabled");
+          });
+        cy.get("#room-limit").should("not.exist");
+
+        // Open room limit help dialog
+        cy.get('[data-test="roles-room-limit-help-button"]').click();
+      });
+
+    cy.checkRoomLimitHelpDialog();
+
+    cy.get('[data-test="roles-room-limit-help-dialog"]').should("not.exist");
+
+    // Change permissions
+    cy.contains("admin.roles.permissions_title").should("be.visible");
+
+    cy.get('[data-test="permission-list"]')
+      .should("be.visible")
+      .and("include.text", "admin.roles.permission_name")
+      .and("include.text", "admin.roles.permission_explicit")
+      .and("include.text", "admin.roles.permission_included")
+      .within(() => {
+        cy.get('[data-test="permission-category"]').should("have.length", 10);
+
+        cy.get('[data-test="permission-category"]')
+          .eq(0)
+          .should("include.text", "admin.roles.permissions.rooms.title")
+          .within(() => {
+            cy.checkPermissionGroup(0, "rooms.create", true, true, false);
+            cy.checkPermissionGroup(1, "rooms.viewAll", true, true, false);
+            cy.checkPermissionGroup(2, "rooms.manage", false, false, false);
+
+            cy.get("#rooms\\.manage").click();
+            cy.get("#rooms\\.create").click();
+            cy.get("#rooms\\.view_all").click();
+
+            cy.checkPermissionGroup(0, "rooms.create", false, true, false);
+            cy.checkPermissionGroup(1, "rooms.viewAll", false, true, false);
+            cy.checkPermissionGroup(2, "rooms.manage", true, true, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(1)
+          .should("include.text", "admin.roles.permissions.meetings.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "meetings.viewAny", true, true, false);
+
+            cy.get("#meetings\\.view_any").click();
+
+            cy.checkPermissionGroup(0, "meetings.viewAny", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(2)
+          .should("include.text", "admin.roles.permissions.admin.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "admin.view", false, true, false);
+
+            cy.get("#admin\\.view").click();
+
+            cy.checkPermissionGroup(0, "admin.view", true, true, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(3)
+          .should("include.text", "admin.roles.permissions.settings.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 2);
+
+            cy.checkPermissionGroup(0, "settings.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "settings.update", false, false, false);
+
+            cy.get("#settings\\.update").click();
+
+            cy.checkPermissionGroup(0, "settings.viewAny", false, true, false);
+            cy.checkPermissionGroup(1, "settings.update", true, true, false);
+
+            cy.get("#settings\\.view_any").click();
+
+            cy.checkPermissionGroup(0, "settings.viewAny", true, true, false);
+            cy.checkPermissionGroup(1, "settings.update", true, true, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(4)
+          .should("include.text", "admin.roles.permissions.system.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "system.monitor", false, false, false);
+
+            cy.get("#system\\.monitor").click();
+
+            cy.checkPermissionGroup(0, "system.monitor", true, true, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(5)
+          .should("include.text", "admin.roles.permissions.users.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 6);
+
+            cy.checkPermissionGroup(0, "users.viewAny", true, true, false);
+            cy.checkPermissionGroup(1, "users.view", false, false, false);
+            cy.checkPermissionGroup(2, "users.update", false, false, false);
+            cy.checkPermissionGroup(3, "users.create", false, false, false);
+            cy.checkPermissionGroup(4, "users.delete", false, false, false);
+            cy.checkPermissionGroup(
+              5,
+              "users.updateOwnAttributes",
+              false,
+              false,
+              false,
+            );
+
+            cy.get("#users\\.update_own_attributes").click();
+            cy.get("#users\\.delete").click();
+            cy.get("#users\\.create").click();
+            cy.get("#users\\.update").click();
+            cy.get("#users\\.view").click();
+            cy.get("#users\\.view_any").click();
+
+            cy.checkPermissionGroup(0, "users.viewAny", false, true, false);
+            cy.checkPermissionGroup(1, "users.view", true, true, false);
+            cy.checkPermissionGroup(2, "users.update", true, true, false);
+            cy.checkPermissionGroup(3, "users.create", true, true, false);
+            cy.checkPermissionGroup(4, "users.delete", true, true, false);
+            cy.checkPermissionGroup(
+              5,
+              "users.updateOwnAttributes",
+              true,
+              true,
+              false,
+            );
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(6)
+          .should("include.text", "admin.roles.permissions.roles.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(0, "roles.viewAny", false, true, false);
+            cy.checkPermissionGroup(1, "roles.view", false, false, false);
+            cy.checkPermissionGroup(2, "roles.update", false, false, false);
+            cy.checkPermissionGroup(3, "roles.create", false, false, false);
+            cy.checkPermissionGroup(4, "roles.delete", false, false, false);
+
+            cy.get("#roles\\.delete").click();
+            cy.get("#roles\\.create").click();
+            cy.get("#roles\\.update").click();
+            cy.get("#roles\\.view").click();
+            cy.get("#roles\\.view_any").click();
+
+            cy.checkPermissionGroup(0, "roles.viewAny", true, true, false);
+            cy.checkPermissionGroup(1, "roles.view", true, true, false);
+            cy.checkPermissionGroup(2, "roles.update", true, true, false);
+            cy.checkPermissionGroup(3, "roles.create", true, true, false);
+            cy.checkPermissionGroup(4, "roles.delete", true, true, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(7)
+          .should("include.text", "admin.roles.permissions.room_types.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 4);
+
+            cy.checkPermissionGroup(0, "roomTypes.view", false, true, false);
+            cy.checkPermissionGroup(1, "roomTypes.update", true, true, false);
+            cy.checkPermissionGroup(2, "roomTypes.create", true, true, false);
+            cy.checkPermissionGroup(3, "roomTypes.delete", true, true, false);
+
+            cy.get("#room_types\\.delete").click();
+            cy.get("#room_types\\.create").click();
+            cy.get("#room_types\\.update").click();
+            cy.get("#room_types\\.view").click();
+
+            cy.checkPermissionGroup(0, "roomTypes.view", true, true, false);
+            cy.checkPermissionGroup(1, "roomTypes.update", false, false, false);
+            cy.checkPermissionGroup(2, "roomTypes.create", false, false, false);
+            cy.checkPermissionGroup(3, "roomTypes.delete", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(8)
+          .should("include.text", "admin.roles.permissions.servers.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(0, "servers.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "servers.view", false, false, false);
+            cy.checkPermissionGroup(2, "servers.update", false, false, false);
+            cy.checkPermissionGroup(3, "servers.create", false, false, false);
+            cy.checkPermissionGroup(4, "servers.delete", false, false, false);
+
+            cy.get("#servers\\.delete").click();
+            cy.get("#servers\\.create").click();
+            cy.get("#servers\\.update").click();
+            cy.get("#servers\\.view").click();
+            cy.get("#servers\\.view_any").click();
+
+            cy.checkPermissionGroup(0, "servers.viewAny", true, true, false);
+            cy.checkPermissionGroup(1, "servers.view", true, true, false);
+            cy.checkPermissionGroup(2, "servers.update", true, true, false);
+            cy.checkPermissionGroup(3, "servers.create", true, true, false);
+            cy.checkPermissionGroup(4, "servers.delete", true, true, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(9)
+          .should("include.text", "admin.roles.permissions.server_pools.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(
+              0,
+              "serverPools.viewAny",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(1, "serverPools.view", false, false, false);
+            cy.checkPermissionGroup(
+              2,
+              "serverPools.update",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(
+              3,
+              "serverPools.create",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(
+              4,
+              "serverPools.delete",
+              false,
+              false,
+              false,
+            );
+
+            cy.get("#server_pools\\.delete").click();
+            cy.get("#server_pools\\.create").click();
+            cy.get("#server_pools\\.update").click();
+            cy.get("#server_pools\\.view").click();
+            cy.get("#server_pools\\.view_any").click();
+
+            cy.checkPermissionGroup(
+              0,
+              "serverPools.viewAny",
+              true,
+              true,
+              false,
+            );
+            cy.checkPermissionGroup(1, "serverPools.view", true, true, false);
+            cy.checkPermissionGroup(2, "serverPools.update", true, true, false);
+            cy.checkPermissionGroup(3, "serverPools.create", true, true, false);
+            cy.checkPermissionGroup(4, "serverPools.delete", true, true, false);
+          });
+      });
+
+    // Save changes
+    cy.fixture("superuserRole.json").then((role) => {
+      const selectedPermissions = [
+        5, 7, 9, 8, 35, 20, 19, 18, 17, 16, 14, 13, 12, 11, 10, 21, 29, 28, 27,
+        26, 25, 34, 33, 32, 31, 30,
+      ];
+      role.data.name = "Standard role";
+      role.data.room_limit = -1;
+      role.data.superuser = false;
+      role.data.permissions = role.data.permissions.filter((permission) =>
+        selectedPermissions.includes(permission.id),
+      );
+
+      const saveChangesRequest = interceptIndefinitely(
+        "PUT",
+        "api/v1/roles/2",
+        {
+          statusCode: 200,
+          body: role,
+        },
+        "saveChangesRequest",
+      );
+
+      cy.intercept("GET", "api/v1/roles/2", {
+        statusCode: 200,
+        body: role,
+      }).as("roleRequest");
+
+      cy.get('[data-test="overlay"]').should("not.exist");
+
+      cy.get('[data-test="roles-save-button"]')
+        .should("have.text", "app.save")
+        .click();
+
+      // Check loading
+      cy.get('[data-test="overlay"]').should("be.visible");
+
+      cy.get("#name").should("be.disabled");
+      cy.get("#default").should("be.disabled");
+      cy.get("#unlimited").should("be.disabled");
+      cy.get("#custom").should("be.disabled");
+      cy.get("#room-limit").should("not.exist");
+
+      cy.get("#rooms\\.create").should("not.exist");
+      cy.get("#rooms\\.view_all").should("not.exist");
+      cy.get("#rooms\\.manage").should("not.exist");
+      cy.get("#meetings\\.view_any").should("not.exist");
+      cy.get("#admin\\.view").should("not.exist");
+      cy.get("#settings\\.view_any").should("not.exist");
+      cy.get("#settings\\.update").should("not.exist");
+      cy.get("#system\\.monitor").should("not.exist");
+      cy.get("#roles\\.view_any").should("not.exist");
+      cy.get("#roles\\.view").should("not.exist");
+      cy.get("#roles\\.update").should("not.exist");
+      cy.get("#roles\\.create").should("not.exist");
+      cy.get("#roles\\.delete").should("not.exist");
+      cy.get("#users\\.view_any").should("not.exist");
+      cy.get("#users\\.view").should("not.exist");
+      cy.get("#users\\.update").should("not.exist");
+      cy.get("#users\\.create").should("not.exist");
+      cy.get("#users\\.delete").should("not.exist");
+      cy.get("#users\\.update_own_attributes").should("not.exist");
+      cy.get("#room_types\\.view").should("not.exist");
+      cy.get("#room_types\\.update").should("not.exist");
+      cy.get("#room_types\\.create").should("not.exist");
+      cy.get("#room_types\\.delete").should("not.exist");
+      cy.get("#servers\\.view_any").should("not.exist");
+      cy.get("#servers\\.view").should("not.exist");
+      cy.get("#servers\\.update").should("not.exist");
+      cy.get("#servers\\.create").should("not.exist");
+      cy.get("#servers\\.delete").should("not.exist");
+      cy.get("#server_pools\\.view_any").should("not.exist");
+      cy.get("#server_pools\\.view").should("not.exist");
+      cy.get("#server_pools\\.update").should("not.exist");
+      cy.get("#server_pools\\.create").should("not.exist");
+      cy.get("#server_pools\\.delete").should("not.exist");
+
+      cy.get('[data-test="roles-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          saveChangesRequest.sendResponse();
+        });
+
+      cy.wait("@saveChangesRequest").then((interception) => {
+        expect(interception.request.body).to.eql({
+          name: "Standard role",
+          room_limit: -1,
+          permissions: selectedPermissions,
+          updated_at: role.data.updated_at,
+        });
+      });
+    });
+
+    cy.wait("@roleRequest");
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that role page is shown
+    cy.url().should("include", "/admin/roles/2");
+    cy.url().should("not.include", "/edit");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.roles.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.roles.view_{"name":"Standard role"}',
+      );
+  });
+
+  it("edit role with different room limits", function () {
+    cy.visit("/admin/roles/2/edit");
+
+    cy.wait("@roleRequest");
+
+    cy.get("#name").should("have.value", "Staff");
+
+    // Add new role with custom room limit
+    cy.get('[data-test="room-limit-field"]')
+      .should("be.visible")
+      .and("include.text", "app.room_limit")
+      .within(() => {
+        cy.get("#default").should("be.checked").and("not.be.disabled");
+
+        cy.get("#unlimited").should("not.be.checked").and("not.be.disabled");
+
+        cy.get("#custom").should("not.be.checked").and("not.be.disabled");
+        cy.get("#room-limit").should("not.exist");
+
+        cy.get("#custom").click();
+
+        cy.get("#room-limit")
+          .should("be.visible")
+          .and("have.value", "0")
+          .type("5");
+      });
+
+    // Save changes
+    cy.fixture("role.json").then((role) => {
+      role.data.room_limit = 5;
+
+      const saveChangesRequest = interceptIndefinitely(
+        "PUT",
+        "api/v1/roles/2",
+        {
+          statusCode: 200,
+          body: role,
+        },
+        "saveChangesRequest",
+      );
+
+      cy.intercept("GET", "api/v1/roles/2", {
+        statusCode: 200,
+        body: role,
+      }).as("roleRequest");
+
+      cy.get('[data-test="overlay"]').should("not.exist");
+
+      cy.get('[data-test="roles-save-button"]')
+        .should("have.text", "app.save")
+        .click();
+
+      // Check loading
+      cy.get('[data-test="overlay"]').should("be.visible");
+
+      cy.get("#name").should("be.disabled");
+      cy.get("#default").should("be.disabled");
+      cy.get("#unlimited").should("be.disabled");
+      cy.get("#custom").should("be.disabled");
+      cy.get("#room-limit").should("be.disabled");
+
+      cy.get('[data-test="roles-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          saveChangesRequest.sendResponse();
+        });
+
+      cy.wait("@saveChangesRequest").then((interception) => {
+        expect(interception.request.body).to.eql({
+          name: role.data.name,
+          room_limit: 5,
+          permissions: role.data.permissions.map((permission) => permission.id),
+          updated_at: role.data.updated_at,
+        });
+      });
+    });
+
+    cy.wait("@roleRequest");
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that role page is shown
+    cy.url().should("include", "/admin/roles/2");
+    cy.url().should("not.include", "/edit");
+
+    // Reload page with unlimited room limit
+    cy.fixture("role.json").then((role) => {
+      role.data.room_limit = -1;
+
+      cy.intercept("GET", "api/v1/roles/2", {
+        statusCode: 200,
+        body: role,
+      }).as("roleRequest");
+    });
+
+    cy.visit("/admin/roles/2/edit");
+
+    cy.wait("@roleRequest");
+
+    cy.get("#name").should("have.value", "Staff");
+
+    // Save without changing room limit
+    cy.get('[data-test="room-limit-field"]')
+      .should("be.visible")
+      .and("include.text", "app.room_limit")
+      .within(() => {
+        cy.get("#default").should("not.be.checked").and("not.be.disabled");
+
+        cy.get("#unlimited").should("be.checked").and("not.be.disabled");
+
+        cy.get("#custom").should("not.be.checked").and("not.be.disabled");
+        cy.get("#room-limit").should("not.exist");
+      });
+
+    // Save Changes
+    cy.fixture("role.json").then((role) => {
+      role.data.room_limit = -1;
+
+      cy.intercept("PUT", "api/v1/roles/2", {
+        statusCode: 200,
+        body: role,
+      }).as("saveChangesRequest");
+
+      cy.intercept("GET", "api/v1/roles/2", {
+        statusCode: 200,
+        body: role,
+      }).as("roleRequest");
+
+      cy.get('[data-test="roles-save-button"]')
+        .should("have.text", "app.save")
+        .click();
+
+      cy.wait("@saveChangesRequest").then((interception) => {
+        expect(interception.request.body).to.eql({
+          name: role.data.name,
+          room_limit: -1,
+          permissions: role.data.permissions.map((permission) => permission.id),
+          updated_at: role.data.updated_at,
+        });
+      });
+    });
+
+    cy.wait("@roleRequest");
+
+    // Check that role page is shown
+    cy.url().should("include", "/admin/roles/2");
+    cy.url().should("not.include", "/edit");
+
+    // Reload page with custom room limit
+    cy.fixture("role.json").then((role) => {
+      role.data.room_limit = 5;
+
+      cy.intercept("GET", "api/v1/roles/2", {
+        statusCode: 200,
+        body: role,
+      }).as("roleRequest");
+    });
+    cy.visit("/admin/roles/2/edit");
+
+    cy.get("#name").should("have.value", "Staff");
+
+    // Change room limit to default
+    cy.get('[data-test="room-limit-field"]')
+      .should("be.visible")
+      .and("include.text", "app.room_limit")
+      .within(() => {
+        cy.get("#default").should("not.be.checked").and("not.be.disabled");
+
+        cy.get("#unlimited").should("not.be.checked").and("not.be.disabled");
+
+        cy.get("#custom").should("be.checked").and("not.be.disabled");
+        cy.get("#room-limit").should("be.visible").and("have.value", "5");
+
+        // Switch back to default
+        cy.get("#default").click();
+
+        cy.get("#room-limit").should("not.exist");
+      });
+
+    // Save Changes
+    cy.fixture("role.json").then((role) => {
+      role.data.room_limit = null;
+
+      cy.intercept("PUT", "api/v1/roles/2", {
+        statusCode: 200,
+        body: role,
+      }).as("saveChangesRequest");
+
+      cy.intercept("GET", "api/v1/roles/2", {
+        statusCode: 200,
+        body: role,
+      }).as("roleRequest");
+
+      cy.get('[data-test="roles-save-button"]')
+        .should("have.text", "app.save")
+        .click();
+
+      cy.wait("@saveChangesRequest").then((interception) => {
+        expect(interception.request.body).to.eql({
+          name: role.data.name,
+          room_limit: null,
+          permissions: role.data.permissions.map((permission) => permission.id),
+          updated_at: role.data.updated_at,
+        });
+      });
+    });
+
+    cy.wait("@roleRequest");
+
+    // Check that role page is shown
+    cy.url().should("include", "/admin/roles/2");
+    cy.url().should("not.include", "/edit");
+  });
+
+  it("check permission list with different permission dependencies", function () {
+    cy.fixture("permissions.json").then((permissions) => {
+      for (let i = 0; i < permissions.data.length; i++) {
+        permissions.data[i].included_permissions = [];
+      }
+
+      cy.intercept("GET", "api/v1/permissions", {
+        statusCode: 200,
+        body: permissions,
+      }).as("permissionsRequest");
+    });
+
+    cy.fixture("role.json").then((role) => {
+      role.data.permissions = [];
+
+      cy.intercept("GET", "api/v1/roles/2", {
+        statusCode: 200,
+        body: role,
+      }).as("roleRequest");
+    });
+
+    cy.visit("/admin/roles/2/edit");
+
+    cy.wait("@permissionsRequest");
+
+    cy.get('[data-test="permission-list"]')
+      .should("be.visible")
+      .and("include.text", "admin.roles.permission_name")
+      .and("include.text", "admin.roles.permission_explicit")
+      .and("include.text", "admin.roles.permission_included")
+      .within(() => {
+        cy.get('[data-test="permission-category"]').should("have.length", 10);
+
+        cy.get('[data-test="permission-category"]')
+          .eq(0)
+          .should("include.text", "admin.roles.permissions.rooms.title")
+          .within(() => {
+            cy.checkPermissionGroup(0, "rooms.create", false, false, false);
+            cy.checkPermissionGroup(1, "rooms.viewAll", false, false, false);
+            cy.checkPermissionGroup(2, "rooms.manage", false, false, false);
+
+            cy.get("#rooms\\.manage").click();
+
+            cy.checkPermissionGroup(0, "rooms.create", false, false, false);
+            cy.checkPermissionGroup(1, "rooms.viewAll", false, false, false);
+            cy.checkPermissionGroup(2, "rooms.manage", true, true, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(1)
+          .should("include.text", "admin.roles.permissions.meetings.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "meetings.viewAny", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(2)
+          .should("include.text", "admin.roles.permissions.admin.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "admin.view", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(3)
+          .should("include.text", "admin.roles.permissions.settings.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 2);
+
+            cy.checkPermissionGroup(0, "settings.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "settings.update", false, false, false);
+
+            cy.get("#settings\\.update").click();
+
+            cy.checkPermissionGroup(0, "settings.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "settings.update", true, true, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(4)
+          .should("include.text", "admin.roles.permissions.system.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "system.monitor", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(5)
+          .should("include.text", "admin.roles.permissions.users.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 6);
+
+            cy.checkPermissionGroup(0, "users.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "users.view", false, false, false);
+            cy.checkPermissionGroup(2, "users.update", false, false, false);
+            cy.checkPermissionGroup(3, "users.create", false, false, false);
+            cy.checkPermissionGroup(4, "users.delete", false, false, false);
+            cy.checkPermissionGroup(
+              5,
+              "users.updateOwnAttributes",
+              false,
+              false,
+              false,
+            );
+
+            cy.get("#users\\.delete").click();
+
+            cy.checkPermissionGroup(0, "users.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "users.view", false, false, false);
+            cy.checkPermissionGroup(2, "users.update", false, false, false);
+            cy.checkPermissionGroup(3, "users.create", false, false, false);
+            cy.checkPermissionGroup(4, "users.delete", true, true, false);
+            cy.checkPermissionGroup(
+              5,
+              "users.updateOwnAttributes",
+              false,
+              false,
+              false,
+            );
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(6)
+          .should("include.text", "admin.roles.permissions.roles.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(0, "roles.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "roles.view", false, false, false);
+            cy.checkPermissionGroup(2, "roles.update", false, false, false);
+            cy.checkPermissionGroup(3, "roles.create", false, false, false);
+            cy.checkPermissionGroup(4, "roles.delete", false, false, false);
+
+            cy.get("#roles\\.delete").click();
+
+            cy.checkPermissionGroup(0, "roles.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "roles.view", false, false, false);
+            cy.checkPermissionGroup(2, "roles.update", false, false, false);
+            cy.checkPermissionGroup(3, "roles.create", false, false, false);
+            cy.checkPermissionGroup(4, "roles.delete", true, true, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(7)
+          .should("include.text", "admin.roles.permissions.room_types.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 4);
+
+            cy.checkPermissionGroup(0, "roomTypes.view", false, false, false);
+            cy.checkPermissionGroup(1, "roomTypes.update", false, false, false);
+            cy.checkPermissionGroup(2, "roomTypes.create", false, false, false);
+            cy.checkPermissionGroup(3, "roomTypes.delete", false, false, false);
+
+            cy.get("#room_types\\.delete").click();
+
+            cy.checkPermissionGroup(0, "roomTypes.view", false, false, false);
+            cy.checkPermissionGroup(1, "roomTypes.update", false, false, false);
+            cy.checkPermissionGroup(2, "roomTypes.create", false, false, false);
+            cy.checkPermissionGroup(3, "roomTypes.delete", true, true, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(8)
+          .should("include.text", "admin.roles.permissions.servers.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(0, "servers.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "servers.view", false, false, false);
+            cy.checkPermissionGroup(2, "servers.update", false, false, false);
+            cy.checkPermissionGroup(3, "servers.create", false, false, false);
+            cy.checkPermissionGroup(4, "servers.delete", false, false, false);
+
+            cy.get("#servers\\.delete").click();
+
+            cy.checkPermissionGroup(0, "servers.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "servers.view", false, false, false);
+            cy.checkPermissionGroup(2, "servers.update", false, false, false);
+            cy.checkPermissionGroup(3, "servers.create", false, false, false);
+            cy.checkPermissionGroup(4, "servers.delete", true, true, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(9)
+          .should("include.text", "admin.roles.permissions.server_pools.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(
+              0,
+              "serverPools.viewAny",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(1, "serverPools.view", false, false, false);
+            cy.checkPermissionGroup(
+              2,
+              "serverPools.update",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(
+              3,
+              "serverPools.create",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(
+              4,
+              "serverPools.delete",
+              false,
+              false,
+              false,
+            );
+
+            cy.get("#server_pools\\.delete").click();
+
+            cy.checkPermissionGroup(
+              0,
+              "serverPools.viewAny",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(1, "serverPools.view", false, false, false);
+            cy.checkPermissionGroup(
+              2,
+              "serverPools.update",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(
+              3,
+              "serverPools.create",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(4, "serverPools.delete", true, true, false);
+          });
+      });
+  });
+
+  it("check permission list with restricted permissions", function () {
+    cy.fixture("permissions.json").then((permissions) => {
+      permissions.meta.restrictions = [
+        "servers.*",
+        "system.monitor",
+        "serverPools.viewAny",
+        "serverPools.view",
+        "serverPools.create",
+        "serverPools.update",
+        "serverPools.delete",
+      ];
+
+      cy.intercept("GET", "api/v1/permissions", {
+        statusCode: 200,
+        body: permissions,
+      }).as("permissionsRequest");
+    });
+
+    cy.fixture("role.json").then((role) => {
+      role.data.permissions = [];
+
+      cy.intercept("GET", "api/v1/roles/2", {
+        statusCode: 200,
+        body: role,
+      }).as("roleRequest");
+    });
+
+    cy.visit("/admin/roles/2/edit");
+
+    cy.wait("@permissionsRequest");
+
+    // Check that permission list is shown correctly
+    cy.get('[data-test="permission-list"]')
+      .should("be.visible")
+      .and("include.text", "admin.roles.permission_name")
+      .and("include.text", "admin.roles.permission_explicit")
+      .and("include.text", "admin.roles.permission_included")
+      .within(() => {
+        cy.get('[data-test="permission-category"]').should("have.length", 10);
+
+        cy.get('[data-test="permission-category"]')
+          .eq(0)
+          .should("include.text", "admin.roles.permissions.rooms.title")
+          .within(() => {
+            cy.checkPermissionGroup(0, "rooms.create", false, false, false);
+            cy.checkPermissionGroup(1, "rooms.viewAll", false, false, false);
+            cy.checkPermissionGroup(2, "rooms.manage", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(1)
+          .should("include.text", "admin.roles.permissions.meetings.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "meetings.viewAny", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(2)
+          .should("include.text", "admin.roles.permissions.admin.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "admin.view", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(3)
+          .should("include.text", "admin.roles.permissions.settings.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 2);
+
+            cy.checkPermissionGroup(0, "settings.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "settings.update", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(4)
+          .should("include.text", "admin.roles.permissions.system.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "system.monitor", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(5)
+          .should("include.text", "admin.roles.permissions.users.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 6);
+
+            cy.checkPermissionGroup(0, "users.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "users.view", false, false, false);
+            cy.checkPermissionGroup(2, "users.update", false, false, false);
+            cy.checkPermissionGroup(3, "users.create", false, false, false);
+            cy.checkPermissionGroup(4, "users.delete", false, false, false);
+            cy.checkPermissionGroup(
+              5,
+              "users.updateOwnAttributes",
+              false,
+              false,
+              false,
+            );
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(6)
+          .should("include.text", "admin.roles.permissions.roles.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(0, "roles.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "roles.view", false, false, false);
+            cy.checkPermissionGroup(2, "roles.update", false, false, false);
+            cy.checkPermissionGroup(3, "roles.create", false, false, false);
+            cy.checkPermissionGroup(4, "roles.delete", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(7)
+          .should("include.text", "admin.roles.permissions.room_types.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 4);
+
+            cy.checkPermissionGroup(0, "roomTypes.view", false, false, false);
+            cy.checkPermissionGroup(1, "roomTypes.update", false, false, false);
+            cy.checkPermissionGroup(2, "roomTypes.create", false, false, false);
+            cy.checkPermissionGroup(3, "roomTypes.delete", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(8)
+          .should("include.text", "admin.roles.permissions.servers.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(0, "servers.viewAny", false, false, true);
+            cy.checkPermissionGroup(1, "servers.view", false, false, true);
+            cy.checkPermissionGroup(2, "servers.update", false, false, true);
+            cy.checkPermissionGroup(3, "servers.create", false, false, true);
+            cy.checkPermissionGroup(4, "servers.delete", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(9)
+          .should("include.text", "admin.roles.permissions.server_pools.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(
+              0,
+              "serverPools.viewAny",
+              false,
+              false,
+              true,
+            );
+            cy.checkPermissionGroup(1, "serverPools.view", false, false, true);
+            cy.checkPermissionGroup(
+              2,
+              "serverPools.update",
+              false,
+              false,
+              true,
+            );
+            cy.checkPermissionGroup(
+              3,
+              "serverPools.create",
+              false,
+              false,
+              true,
+            );
+            cy.checkPermissionGroup(
+              4,
+              "serverPools.delete",
+              false,
+              false,
+              true,
+            );
+          });
+
+        // Select permission that includes disabled permission
+        cy.get("#room_types\\.delete").click();
+
+        cy.get('[data-test="permission-category"]')
+          .eq(9)
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(
+              0,
+              "serverPools.viewAny",
+              false,
+              true,
+              true,
+            );
+            cy.checkPermissionGroup(1, "serverPools.view", false, false, true);
+            cy.checkPermissionGroup(
+              2,
+              "serverPools.update",
+              false,
+              false,
+              true,
+            );
+            cy.checkPermissionGroup(
+              3,
+              "serverPools.create",
+              false,
+              false,
+              true,
+            );
+            cy.checkPermissionGroup(
+              4,
+              "serverPools.delete",
+              false,
+              false,
+              true,
+            );
+          });
+      });
+
+    // Reload with different restricted permissions
+    cy.fixture("permissions.json").then((permissions) => {
+      permissions.meta.restrictions = [
+        "rooms.*",
+        "meetings.viewAny",
+        "admin.view",
+        "settings.*",
+        "users.*",
+        "roles.*",
+        "roomTypes.*",
+      ];
+
+      cy.intercept("GET", "api/v1/permissions", {
+        statusCode: 200,
+        body: permissions,
+      }).as("permissionsRequest");
+    });
+
+    cy.reload();
+
+    cy.wait("@permissionsRequest");
+
+    // Check that permission list is shown correctly
+    cy.get('[data-test="permission-list"]')
+      .should("be.visible")
+      .and("include.text", "admin.roles.permission_name")
+      .and("include.text", "admin.roles.permission_explicit")
+      .and("include.text", "admin.roles.permission_included")
+      .within(() => {
+        cy.get('[data-test="permission-category"]').should("have.length", 10);
+
+        cy.get('[data-test="permission-category"]')
+          .eq(0)
+          .should("include.text", "admin.roles.permissions.rooms.title")
+          .within(() => {
+            cy.checkPermissionGroup(0, "rooms.create", false, false, true);
+            cy.checkPermissionGroup(1, "rooms.viewAll", false, false, true);
+            cy.checkPermissionGroup(2, "rooms.manage", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(1)
+          .should("include.text", "admin.roles.permissions.meetings.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "meetings.viewAny", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(2)
+          .should("include.text", "admin.roles.permissions.admin.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "admin.view", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(3)
+          .should("include.text", "admin.roles.permissions.settings.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 2);
+
+            cy.checkPermissionGroup(0, "settings.viewAny", false, false, true);
+            cy.checkPermissionGroup(1, "settings.update", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(4)
+          .should("include.text", "admin.roles.permissions.system.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "system.monitor", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(5)
+          .should("include.text", "admin.roles.permissions.users.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 6);
+
+            cy.checkPermissionGroup(0, "users.viewAny", false, false, true);
+            cy.checkPermissionGroup(1, "users.view", false, false, true);
+            cy.checkPermissionGroup(2, "users.update", false, false, true);
+            cy.checkPermissionGroup(3, "users.create", false, false, true);
+            cy.checkPermissionGroup(4, "users.delete", false, false, true);
+            cy.checkPermissionGroup(
+              5,
+              "users.updateOwnAttributes",
+              false,
+              false,
+              true,
+            );
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(6)
+          .should("include.text", "admin.roles.permissions.roles.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(0, "roles.viewAny", false, false, true);
+            cy.checkPermissionGroup(1, "roles.view", false, false, true);
+            cy.checkPermissionGroup(2, "roles.update", false, false, true);
+            cy.checkPermissionGroup(3, "roles.create", false, false, true);
+            cy.checkPermissionGroup(4, "roles.delete", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(7)
+          .should("include.text", "admin.roles.permissions.room_types.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 4);
+
+            cy.checkPermissionGroup(0, "roomTypes.view", false, false, true);
+            cy.checkPermissionGroup(1, "roomTypes.update", false, false, true);
+            cy.checkPermissionGroup(2, "roomTypes.create", false, false, true);
+            cy.checkPermissionGroup(3, "roomTypes.delete", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(8)
+          .should("include.text", "admin.roles.permissions.servers.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(0, "servers.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "servers.view", false, false, false);
+            cy.checkPermissionGroup(2, "servers.update", false, false, false);
+            cy.checkPermissionGroup(3, "servers.create", false, false, false);
+            cy.checkPermissionGroup(4, "servers.delete", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(9)
+          .should("include.text", "admin.roles.permissions.server_pools.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(
+              0,
+              "serverPools.viewAny",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(1, "serverPools.view", false, false, false);
+            cy.checkPermissionGroup(
+              2,
+              "serverPools.update",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(
+              3,
+              "serverPools.create",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(
+              4,
+              "serverPools.delete",
+              false,
+              false,
+              false,
+            );
+          });
+      });
+  });
+
+  it("edit role errors", function () {
+    cy.visit("/admin/roles/2/edit");
+
+    cy.wait("@roleRequest");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.roles.index")
+      .should("include.text", 'admin.breakcrumbs.roles.edit_{"name":"Staff"}');
+
+    // Check with 422 error
+    cy.intercept("PUT", "api/v1/roles/2", {
+      statusCode: 422,
+      body: {
+        errors: {
+          name: ["The Name field is required."],
+          room_limit: ["The Room limit must be at least -1."],
+          permissions: ["The Permissions field must be present."],
+        },
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="roles-save-button"]')
+      .should("have.text", "app.save")
+      .click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check error messages
+    cy.get('[data-test="name-field"]')
+      .should("be.visible")
+      .and("include.text", "The Name field is required.");
+
+    cy.get('[data-test="room-limit-field"]')
+      .should("be.visible")
+      .and("include.text", "The Room limit must be at least -1.");
+
+    cy.contains("The Permissions field must be present.").should("be.visible");
+
+    // Check with 500 error
+    cy.intercept("PUT", "api/v1/roles/2", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="roles-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check error message
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that 422 error messages are hidden
+    cy.get('[data-test="name-field"]')
+      .should("be.visible")
+      .and("not.include.text", "The Name field is required.");
+
+    cy.get('[data-test="room-limit-field"]')
+      .should("be.visible")
+      .and("not.include.text", "The Room limit must be at least -1.");
+
+    cy.contains("The Permissions field must be present.").should("not.exist");
+
+    // Check with 428 error (stale error)
+    cy.fixture("role.json").then((role) => {
+      role.data.name = "Standard role";
+      role.data.room_limit = -1;
+
+      cy.intercept("PUT", "api/v1/roles/2", {
+        statusCode: 428,
+        body: {
+          new_model: role.data,
+        },
+      }).as("saveChangesRequest");
+    });
+
+    cy.get('[data-test="stale-role-dialog"]').should("not.exist");
+
+    cy.get('[data-test="roles-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that stale dialog is shown
+    cy.get('[data-test="stale-role-dialog"]')
+      .should("be.visible")
+      .and("include.text", "app.errors.stale_error")
+      .within(() => {
+        // Check buttons
+        cy.get('[data-test="stale-dialog-reject-button"]')
+          .should("be.visible")
+          .and("have.text", "app.reload");
+        cy.get('[data-test="stale-dialog-accept-button"]')
+          .should("be.visible")
+          .and("have.text", "app.overwrite");
+      });
+
+    // Reload
+    cy.get('[data-test="stale-dialog-reject-button"]').click();
+
+    cy.get('[data-test="stale-role-dialog"]').should("not.exist");
+
+    // Check that breadcrumbs is updated
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.roles.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.roles.edit_{"name":"Standard role"}',
+      );
+
+    // Check that correct data is shown
+    cy.get("#name").should("have.value", "Standard role");
+    cy.get("#unlimited").should("be.checked");
+    cy.get("#room-limit").should("not.exist");
+
+    cy.checkPermissionGroup(0, "rooms.create", true, true, false);
+    cy.checkPermissionGroup(1, "rooms.viewAll", true, true, false);
+    cy.checkPermissionGroup(2, "rooms.manage", false, false, false);
+
+    cy.checkPermissionGroup(3, "meetings.viewAny", true, true, false);
+    cy.checkPermissionGroup(4, "admin.view", false, true, false);
+
+    cy.checkPermissionGroup(5, "settings.viewAny", false, false, false);
+    cy.checkPermissionGroup(6, "settings.update", false, false, false);
+    cy.checkPermissionGroup(7, "system.monitor", false, false, false);
+
+    cy.checkPermissionGroup(8, "users.viewAny", true, true, false);
+    cy.checkPermissionGroup(9, "users.view", false, false, false);
+    cy.checkPermissionGroup(10, "users.update", false, false, false);
+    cy.checkPermissionGroup(11, "users.create", false, false, false);
+    cy.checkPermissionGroup(12, "users.delete", false, false, false);
+    cy.checkPermissionGroup(
+      13,
+      "users.updateOwnAttributes",
+      false,
+      false,
+      false,
+    );
+
+    cy.checkPermissionGroup(14, "roles.viewAny", false, true, false);
+    cy.checkPermissionGroup(15, "roles.view", false, false, false);
+    cy.checkPermissionGroup(16, "roles.update", false, false, false);
+    cy.checkPermissionGroup(17, "roles.create", false, false, false);
+    cy.checkPermissionGroup(18, "roles.delete", false, false, false);
+
+    cy.checkPermissionGroup(19, "roomTypes.view", false, true, false);
+    cy.checkPermissionGroup(20, "roomTypes.update", true, true, false);
+    cy.checkPermissionGroup(21, "roomTypes.create", true, true, false);
+    cy.checkPermissionGroup(22, "roomTypes.delete", true, true, false);
+
+    cy.checkPermissionGroup(23, "servers.viewAny", false, false, false);
+    cy.checkPermissionGroup(24, "servers.view", false, false, false);
+    cy.checkPermissionGroup(25, "servers.update", false, false, false);
+    cy.checkPermissionGroup(26, "servers.create", false, false, false);
+    cy.checkPermissionGroup(27, "servers.delete", false, false, false);
+
+    cy.checkPermissionGroup(28, "serverPools.viewAny", false, true, false);
+    cy.checkPermissionGroup(29, "serverPools.view", false, false, false);
+    cy.checkPermissionGroup(30, "serverPools.update", false, false, false);
+    cy.checkPermissionGroup(31, "serverPools.create", false, false, false);
+    cy.checkPermissionGroup(32, "serverPools.delete", false, false, false);
+
+    // Trigger 428 error (stale error) again
+    cy.fixture("superuserRole.json").then((role) => {
+      role.data.name = "Standard role 2";
+      role.data.room_limit = -1;
+      role.data.superuser = false;
+
+      cy.intercept("PUT", "api/v1/roles/2", {
+        statusCode: 428,
+        body: {
+          new_model: role.data,
+        },
+      }).as("saveChangesRequest");
+    });
+
+    cy.get('[data-test="stale-role-dialog"]').should("not.exist");
+
+    cy.get('[data-test="roles-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that stale dialog is shown
+    cy.get('[data-test="stale-role-dialog"]')
+      .should("be.visible")
+      .and("include.text", "app.errors.stale_error")
+      .within(() => {
+        // Check buttons
+        cy.get('[data-test="stale-dialog-reject-button"]')
+          .should("be.visible")
+          .and("have.text", "app.reload");
+        cy.get('[data-test="stale-dialog-accept-button"]')
+          .should("be.visible")
+          .and("have.text", "app.overwrite");
+      });
+
+    // Overwrite
+    cy.fixture("role.json").then((role) => {
+      role.data.name = "Standard role";
+      role.data.room_limit = -1;
+
+      cy.intercept("PUT", "api/v1/roles/2", {
+        statusCode: 200,
+        body: role,
+      }).as("saveChangesRequest");
+
+      cy.intercept("GET", "api/v1/roles/2", {
+        statusCode: 200,
+        body: role,
+      }).as("roleRequest");
+
+      cy.get('[data-test="stale-dialog-accept-button"]').click();
+
+      // Check that correct data is sent
+      cy.wait("@saveChangesRequest").then((interception) => {
+        expect(interception.request.body).to.eql({
+          name: role.data.name,
+          room_limit: role.data.room_limit,
+          permissions: role.data.permissions.map((permission) => permission.id),
+          updated_at: role.data.updated_at,
+        });
+      });
+    });
+
+    // Check that redirect worked
+    cy.url().should("include", "/admin/roles/2");
+    cy.url().should("not.include", "/edit");
+
+    // Check that breadcrumbs stays the same
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.roles.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.roles.view_{"name":"Standard role"}',
+      );
+
+    // Reload
+    cy.visit("/admin/roles/2/edit");
+
+    // Check with 404 error
+    cy.interceptAdminRolesIndexRequests();
+    cy.intercept("PUT", "api/v1/roles/2", {
+      statusCode: 404,
+      body: {
+        message: "No query results for model",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="roles-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that redirect worked
+    cy.url().should("not.include", "/admin/roles/2/edit");
+    cy.url().should("include", "/admin/roles");
+
+    cy.wait("@rolesRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"No query results for model"}',
+      'app.flash.server_error.error_code_{"statusCode":404}',
+    ]);
+
+    // Reload
+    cy.visit("/admin/roles/2/edit");
+
+    // Check with 401 error
+    cy.intercept("PUT", "api/v1/roles/2", {
+      statusCode: 401,
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="roles-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/roles/2/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("load permissions errors", function () {
+    const permissionsRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/permissions",
+      { statusCode: 500, body: { message: "Test" } },
+      "permissionsRequest",
+    );
+
+    cy.visit("/admin/roles/2/edit");
+
+    cy.wait("@roleRequest");
+
+    // Check loading
+    cy.get('[data-test="roles-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-delete-button"]').should("not.exist");
+    cy.get('[data-test="roles-save-button"]')
+      .should("be.visible")
+      .and("be.disabled");
+
+    cy.get('[data-test="overlay"]')
+      .should("be.visible")
+      .then(() => {
+        permissionsRequest.sendResponse();
+      });
+
+    cy.wait("@permissionsRequest");
+
+    // Check that loading is done
+    // Check that overlay is still shown because of error
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that buttons are still hidden
+    cy.get('[data-test="roles-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-delete-button"]').should("not.exist");
+    cy.get('[data-test="roles-save-button"]')
+      .should("be.visible")
+      .and("be.disabled");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Reload with correct data
+    cy.intercept("GET", "api/v1/permissions", {
+      statusCode: 200,
+      fixture: "permissions.json",
+    }).as("permissionsRequest");
+
+    cy.get('[data-test="loading-retry-button"]')
+      .should("be.visible")
+      .and("have.text", "app.reload")
+      .click();
+
+    cy.wait("@roleRequest");
+    cy.wait("@permissionsRequest");
+
+    // Check that overlay is not shown anymore
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
+
+    // Reload with 401 error
+    cy.intercept("GET", "api/v1/permissions", {
+      statusCode: 401,
+    }).as("permissionsRequest");
+
+    cy.visit("/admin/roles/2/edit");
+
+    cy.wait("@roleRequest");
+    cy.wait("@permissionsRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/roles/2/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("load role errors", function () {
+    cy.intercept("GET", "api/v1/roles/2", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("roleRequest");
+
+    cy.visit("/admin/roles/2/edit");
+
+    cy.wait("@roleRequest");
+    cy.wait("@permissionsRequest");
+
+    // Check that overlay is shown
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Reload with correct data
+    cy.intercept("GET", "api/v1/roles/2", {
+      statusCode: 200,
+      fixture: "role.json",
+    }).as("roleRequest");
+
+    cy.get('[data-test="loading-retry-button"]')
+      .should("be.visible")
+      .and("have.text", "app.reload")
+      .click();
+
+    cy.wait("@roleRequest");
+    cy.wait("@permissionsRequest");
+
+    // Check that overlay is not shown anymore
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
+
+    // Reload with 404 error
+    cy.interceptAdminRolesIndexRequests();
+
+    cy.intercept("GET", "api/v1/roles/2", {
+      statusCode: 404,
+      body: {
+        message: "No query results for model",
+      },
+    }).as("roleRequest");
+
+    cy.reload();
+
+    cy.wait("@roleRequest");
+    cy.wait("@permissionsRequest");
+
+    // Check that redirect worked
+    cy.url().should("not.include", "/admin/roles/2/edit");
+    cy.url().should("include", "/admin/roles");
+
+    cy.wait("@rolesRequest");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"No query results for model"}',
+      'app.flash.server_error.error_code_{"statusCode":404}',
+    ]);
+
+    // Reload page with 401 error
+    cy.intercept("GET", "api/v1/roles/2", {
+      statusCode: 401,
+    }).as("roleRequest");
+
+    cy.visit("/admin/roles/2/edit");
+
+    cy.wait("@roleRequest");
+    cy.wait("@permissionsRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/roles/2/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("check button visibility with delete permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "roles.view",
+        "roles.update",
+        "roles.create",
+        "roles.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      }).as("currentUserRequest");
+    });
+
+    cy.visit("/admin/roles/2/edit");
+
+    cy.wait("@roleRequest");
+
+    cy.get('[data-test="roles-cancel-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.cancel_editing")
+      .and("have.attr", "href", "/admin/roles/2");
+    cy.get('[data-test="roles-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-delete-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+    cy.get('[data-test="roles-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.save");
+  });
+
+  it("check view for user that is superuser", function () {
+    // Check when viewing role that is not a superuser role
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "roles.view",
+        "roles.update",
+        "roles.create",
+        "roles.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      }).as("currentUserRequest");
+    });
+
+    cy.fixture("role.json").then((role) => {
+      role.data.room_limit = 5;
+      cy.intercept("GET", "api/v1/roles/2", {
+        statusCode: 200,
+        body: role,
+      }).as("roleRequest");
+    });
+
+    cy.visit("/admin/roles/2/edit");
+
+    cy.wait("@roleRequest");
+
+    cy.get('[data-test="roles-cancel-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.cancel_editing")
+      .and("have.attr", "href", "/admin/roles/2");
+    cy.get('[data-test="roles-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-delete-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+    cy.get('[data-test="roles-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.save");
+
+    // Check name field not disabled
+    cy.get("#name").should("not.be.disabled");
+
+    // Check room limit field not disabled
+    cy.get("#default").should("not.be.disabled");
+    cy.get("#unlimited").should("not.be.disabled");
+    cy.get("#custom").should("not.be.disabled");
+    cy.get("#room-limit").should("not.be.disabled");
+
+    // Check permission list not disabled
+    cy.get("#rooms\\.create").should("not.be.disabled");
+    cy.get("#rooms\\.view_all").should("not.be.disabled");
+    cy.get("#rooms\\.manage").should("not.be.disabled");
+    cy.get("#meetings\\.view_any").should("not.be.disabled");
+    cy.get("#admin\\.view").should("not.be.disabled");
+    cy.get("#settings\\.view_any").should("not.be.disabled");
+    cy.get("#settings\\.update").should("not.be.disabled");
+    cy.get("#system\\.monitor").should("not.be.disabled");
+    cy.get("#roles\\.view_any").should("not.be.disabled");
+    cy.get("#roles\\.view").should("not.be.disabled");
+    cy.get("#roles\\.update").should("not.be.disabled");
+    cy.get("#roles\\.create").should("not.be.disabled");
+    cy.get("#roles\\.delete").should("not.be.disabled");
+    cy.get("#users\\.view_any").should("not.be.disabled");
+    cy.get("#users\\.view").should("not.be.disabled");
+    cy.get("#users\\.update").should("not.be.disabled");
+    cy.get("#users\\.create").should("not.be.disabled");
+    cy.get("#users\\.delete").should("not.be.disabled");
+    cy.get("#users\\.update_own_attributes").should("not.be.disabled");
+    cy.get("#room_types\\.view").should("not.be.disabled");
+    cy.get("#room_types\\.update").should("not.be.disabled");
+    cy.get("#room_types\\.create").should("not.be.disabled");
+    cy.get("#room_types\\.delete").should("not.be.disabled");
+    cy.get("#servers\\.view_any").should("not.be.disabled");
+    cy.get("#servers\\.view").should("not.be.disabled");
+    cy.get("#servers\\.update").should("not.be.disabled");
+    cy.get("#servers\\.create").should("not.be.disabled");
+    cy.get("#servers\\.delete").should("not.be.disabled");
+    cy.get("#server_pools\\.view_any").should("not.be.disabled");
+    cy.get("#server_pools\\.view").should("not.be.disabled");
+    cy.get("#server_pools\\.update").should("not.be.disabled");
+    cy.get("#server_pools\\.create").should("not.be.disabled");
+    cy.get("#server_pools\\.delete").should("not.be.disabled");
+
+    // Check when viewing role that is a superuser role
+    cy.intercept("GET", "api/v1/roles/2", {
+      statusCode: 200,
+      fixture: "superuserRole.json",
+    }).as("roleRequest");
+
+    cy.reload();
+
+    cy.wait("@roleRequest");
+
+    cy.get('[data-test="roles-cancel-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.cancel_editing")
+      .and("have.attr", "href", "/admin/roles/2");
+    cy.get('[data-test="roles-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-delete-button"]').should("not.exist");
+    cy.get('[data-test="roles-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.save");
+
+    // Check name field not disabled
+    cy.get("#name").should("not.be.disabled");
+
+    // Check room limit field is disabled
+    cy.get("#default").should("be.disabled");
+    cy.get("#unlimited").should("be.disabled");
+    cy.get("#custom").should("be.disabled");
+    cy.get("#room-limit").should("not.exist");
+
+    // Check permission list is shown correctly and disabled
+    cy.contains("admin.roles.permissions_title").should("be.visible");
+
+    cy.checkPermissionGroup(0, "rooms.create", true, true, true);
+    cy.checkPermissionGroup(1, "rooms.viewAll", true, true, true);
+    cy.checkPermissionGroup(2, "rooms.manage", true, true, true);
+
+    cy.checkPermissionGroup(3, "meetings.viewAny", true, true, true);
+    cy.checkPermissionGroup(4, "admin.view", true, true, true);
+
+    cy.checkPermissionGroup(5, "settings.viewAny", true, true, true);
+    cy.checkPermissionGroup(6, "settings.update", true, true, true);
+    cy.checkPermissionGroup(7, "system.monitor", true, true, true);
+
+    cy.checkPermissionGroup(8, "users.viewAny", true, true, true);
+    cy.checkPermissionGroup(9, "users.view", true, true, true);
+    cy.checkPermissionGroup(10, "users.update", true, true, true);
+    cy.checkPermissionGroup(11, "users.create", true, true, true);
+    cy.checkPermissionGroup(12, "users.delete", true, true, true);
+    cy.checkPermissionGroup(13, "users.updateOwnAttributes", true, true, true);
+
+    cy.checkPermissionGroup(14, "roles.viewAny", true, true, true);
+    cy.checkPermissionGroup(15, "roles.view", true, true, true);
+    cy.checkPermissionGroup(16, "roles.update", true, true, true);
+    cy.checkPermissionGroup(17, "roles.create", true, true, true);
+    cy.checkPermissionGroup(18, "roles.delete", true, true, true);
+
+    cy.checkPermissionGroup(19, "roomTypes.view", true, true, true);
+    cy.checkPermissionGroup(20, "roomTypes.update", true, true, true);
+    cy.checkPermissionGroup(21, "roomTypes.create", true, true, true);
+    cy.checkPermissionGroup(22, "roomTypes.delete", true, true, true);
+
+    cy.checkPermissionGroup(23, "servers.viewAny", true, true, true);
+    cy.checkPermissionGroup(24, "servers.view", true, true, true);
+    cy.checkPermissionGroup(25, "servers.update", true, true, true);
+    cy.checkPermissionGroup(26, "servers.create", true, true, true);
+    cy.checkPermissionGroup(27, "servers.delete", true, true, true);
+
+    cy.checkPermissionGroup(28, "serverPools.viewAny", true, true, true);
+    cy.checkPermissionGroup(29, "serverPools.view", true, true, true);
+    cy.checkPermissionGroup(30, "serverPools.update", true, true, true);
+    cy.checkPermissionGroup(31, "serverPools.create", true, true, true);
+    cy.checkPermissionGroup(32, "serverPools.delete", true, true, true);
+  });
+
+  it("check view for user that is no superuser", function () {
+    // Check when viewing role that is not a superuser role
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.superuser = false;
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "roles.view",
+        "roles.update",
+        "roles.create",
+        "roles.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      }).as("currentUserRequest");
+    });
+
+    cy.fixture("role.json").then((role) => {
+      role.data.room_limit = 5;
+      cy.intercept("GET", "api/v1/roles/2", {
+        statusCode: 200,
+        body: role,
+      }).as("roleRequest");
+    });
+
+    cy.visit("/admin/roles/2/edit");
+
+    cy.wait("@roleRequest");
+
+    cy.get('[data-test="roles-cancel-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.cancel_editing")
+      .and("have.attr", "href", "/admin/roles/2");
+    cy.get('[data-test="roles-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-delete-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+    cy.get('[data-test="roles-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.save");
+
+    // Check name field not disabled
+    cy.get("#name").should("not.be.disabled");
+
+    // Check room limit field not disabled
+    cy.get("#default").should("not.be.disabled");
+    cy.get("#unlimited").should("not.be.disabled");
+    cy.get("#custom").should("not.be.disabled");
+    cy.get("#room-limit").should("not.be.disabled");
+
+    // Check permission list not disabled
+    cy.get("#rooms\\.create").should("not.be.disabled");
+    cy.get("#rooms\\.view_all").should("not.be.disabled");
+    cy.get("#rooms\\.manage").should("not.be.disabled");
+    cy.get("#meetings\\.view_any").should("not.be.disabled");
+    cy.get("#admin\\.view").should("not.be.disabled");
+    cy.get("#settings\\.view_any").should("not.be.disabled");
+    cy.get("#settings\\.update").should("not.be.disabled");
+    cy.get("#system\\.monitor").should("not.be.disabled");
+    cy.get("#roles\\.view_any").should("not.be.disabled");
+    cy.get("#roles\\.view").should("not.be.disabled");
+    cy.get("#roles\\.update").should("not.be.disabled");
+    cy.get("#roles\\.create").should("not.be.disabled");
+    cy.get("#roles\\.delete").should("not.be.disabled");
+    cy.get("#users\\.view_any").should("not.be.disabled");
+    cy.get("#users\\.view").should("not.be.disabled");
+    cy.get("#users\\.update").should("not.be.disabled");
+    cy.get("#users\\.create").should("not.be.disabled");
+    cy.get("#users\\.delete").should("not.be.disabled");
+    cy.get("#users\\.update_own_attributes").should("not.be.disabled");
+    cy.get("#room_types\\.view").should("not.be.disabled");
+    cy.get("#room_types\\.update").should("not.be.disabled");
+    cy.get("#room_types\\.create").should("not.be.disabled");
+    cy.get("#room_types\\.delete").should("not.be.disabled");
+    cy.get("#servers\\.view_any").should("not.be.disabled");
+    cy.get("#servers\\.view").should("not.be.disabled");
+    cy.get("#servers\\.update").should("not.be.disabled");
+    cy.get("#servers\\.create").should("not.be.disabled");
+    cy.get("#servers\\.delete").should("not.be.disabled");
+    cy.get("#server_pools\\.view_any").should("not.be.disabled");
+    cy.get("#server_pools\\.view").should("not.be.disabled");
+    cy.get("#server_pools\\.update").should("not.be.disabled");
+    cy.get("#server_pools\\.create").should("not.be.disabled");
+    cy.get("#server_pools\\.delete").should("not.be.disabled");
+
+    // Check when viewing role that is a superuser role
+    cy.intercept("GET", "api/v1/roles/2", {
+      statusCode: 200,
+      fixture: "superuserRole.json",
+    }).as("roleRequest");
+
+    cy.reload();
+
+    cy.wait("@roleRequest");
+
+    cy.get('[data-test="roles-cancel-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.cancel_editing")
+      .and("have.attr", "href", "/admin/roles/2");
+    cy.get('[data-test="roles-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-delete-button"]').should("not.exist");
+    cy.get('[data-test="roles-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.save");
+
+    // Check name field not disabled
+    cy.get("#name").should("not.be.disabled");
+
+    // Check room limit field is disabled
+    cy.get("#default").should("be.disabled");
+    cy.get("#unlimited").should("be.disabled");
+    cy.get("#custom").should("be.disabled");
+    cy.get("#room-limit").should("not.exist");
+
+    // Check permission list is shown correctly and disabled
+    cy.contains("admin.roles.permissions_title").should("be.visible");
+
+    cy.checkPermissionGroup(0, "rooms.create", true, true, true);
+    cy.checkPermissionGroup(1, "rooms.viewAll", true, true, true);
+    cy.checkPermissionGroup(2, "rooms.manage", true, true, true);
+
+    cy.checkPermissionGroup(3, "meetings.viewAny", true, true, true);
+    cy.checkPermissionGroup(4, "admin.view", true, true, true);
+
+    cy.checkPermissionGroup(5, "settings.viewAny", true, true, true);
+    cy.checkPermissionGroup(6, "settings.update", true, true, true);
+    cy.checkPermissionGroup(7, "system.monitor", true, true, true);
+
+    cy.checkPermissionGroup(8, "users.viewAny", true, true, true);
+    cy.checkPermissionGroup(9, "users.view", true, true, true);
+    cy.checkPermissionGroup(10, "users.update", true, true, true);
+    cy.checkPermissionGroup(11, "users.create", true, true, true);
+    cy.checkPermissionGroup(12, "users.delete", true, true, true);
+    cy.checkPermissionGroup(13, "users.updateOwnAttributes", true, true, true);
+
+    cy.checkPermissionGroup(14, "roles.viewAny", true, true, true);
+    cy.checkPermissionGroup(15, "roles.view", true, true, true);
+    cy.checkPermissionGroup(16, "roles.update", true, true, true);
+    cy.checkPermissionGroup(17, "roles.create", true, true, true);
+    cy.checkPermissionGroup(18, "roles.delete", true, true, true);
+
+    cy.checkPermissionGroup(19, "roomTypes.view", true, true, true);
+    cy.checkPermissionGroup(20, "roomTypes.update", true, true, true);
+    cy.checkPermissionGroup(21, "roomTypes.create", true, true, true);
+    cy.checkPermissionGroup(22, "roomTypes.delete", true, true, true);
+
+    cy.checkPermissionGroup(23, "servers.viewAny", true, true, true);
+    cy.checkPermissionGroup(24, "servers.view", true, true, true);
+    cy.checkPermissionGroup(25, "servers.update", true, true, true);
+    cy.checkPermissionGroup(26, "servers.create", true, true, true);
+    cy.checkPermissionGroup(27, "servers.delete", true, true, true);
+
+    cy.checkPermissionGroup(28, "serverPools.viewAny", true, true, true);
+    cy.checkPermissionGroup(29, "serverPools.view", true, true, true);
+    cy.checkPermissionGroup(30, "serverPools.update", true, true, true);
+    cy.checkPermissionGroup(31, "serverPools.create", true, true, true);
+    cy.checkPermissionGroup(32, "serverPools.delete", true, true, true);
+  });
+});
diff --git a/tests/Frontend/e2e/AdminRolesIndex.cy.js b/tests/Frontend/e2e/AdminRolesIndex.cy.js
new file mode 100644
index 000000000..ffac96514
--- /dev/null
+++ b/tests/Frontend/e2e/AdminRolesIndex.cy.js
@@ -0,0 +1,1002 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin roles index", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminRolesIndexRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view", "roles.viewAny"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin/roles");
+  });
+
+  it("visit with user without permission to view roles", function () {
+    // Check with missing roles.viewAny permission
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/roles");
+
+    cy.checkToastMessage("app.flash.unauthorized");
+
+    // Check if the welcome page is shown
+    cy.url().should("not.include", "/admin/roles");
+    cy.get("h1").should("be.visible").and("contain", "home.title");
+  });
+
+  it("load roles", function () {
+    const rolesRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/roles*",
+      {
+        fixture: "roles.json",
+      },
+      "rolesRequest",
+    );
+    cy.visit("/admin/roles");
+
+    cy.contains("admin.title");
+
+    // Check loading
+    cy.get('[data-test="role-search"]').within(() => {
+      cy.get("input").should("be.visible").and("be.disabled");
+      cy.get("button").should("be.visible").and("be.disabled");
+    });
+
+    cy.get('[data-test="roles-add-buton"]').should("not.exist");
+
+    cy.get('[data-test="overlay"]')
+      .should("be.visible")
+      .then(() => {
+        rolesRequest.sendResponse();
+      });
+
+    cy.wait("@rolesRequest");
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    cy.get('[data-test="role-search"]').within(() => {
+      cy.get("input").should("be.visible").and("not.be.disabled");
+      cy.get("button").should("be.visible").and("not.be.disabled");
+    });
+
+    cy.get('[data-test="roles-add-buton"]').should("not.exist");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.roles.index");
+
+    // Check that table headers are shown correctly
+    cy.get('[data-test="role-header-cell"]').should("have.length", 2);
+
+    cy.get('[data-test="role-header-cell"]')
+      .eq(0)
+      .should("have.text", "app.model_name");
+    cy.get('[data-test="role-header-cell"]')
+      .eq(1)
+      .should("have.text", "app.actions");
+
+    // Check that roles are displayed correctly
+    cy.get('[data-test="role-item"]').should("have.length", 3);
+
+    cy.get('[data-test="role-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="role-item-cell"]')
+          .eq(0)
+          .should("include.text", "Superuser")
+          .and("include.text", "admin.roles.superuser");
+        cy.get('[data-test="role-item-cell"]')
+          .eq(1)
+          .within(() => {
+            cy.get('[data-test="roles-view-button"]').should("not.exist");
+            cy.get('[data-test="roles-edit-button"]').should("not.exist");
+            cy.get('[data-test="roles-delete-button"]').should("not.exist");
+          });
+      });
+
+    cy.get('[data-test="role-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="role-item-cell"]')
+          .eq(0)
+          .should("include.text", "Staff")
+          .and("not.include.text", "admin.roles.superuser");
+        cy.get('[data-test="role-item-cell"]')
+          .eq(1)
+          .within(() => {
+            cy.get('[data-test="roles-view-button"]').should("not.exist");
+            cy.get('[data-test="roles-edit-button"]').should("not.exist");
+            cy.get('[data-test="roles-delete-button"]').should("not.exist");
+          });
+      });
+
+    cy.get('[data-test="role-item"]')
+      .eq(2)
+      .within(() => {
+        cy.get('[data-test="role-item-cell"]')
+          .eq(0)
+          .should("include.text", "Students")
+          .and("not.include.text", "admin.roles.superuser");
+        cy.get('[data-test="role-item-cell"]')
+          .eq(1)
+          .within(() => {
+            cy.get('[data-test="roles-view-button"]').should("not.exist");
+            cy.get('[data-test="roles-edit-button"]').should("not.exist");
+            cy.get('[data-test="roles-delete-button"]').should("not.exist");
+          });
+      });
+  });
+
+  it("load roles errors", function () {
+    cy.intercept("GET", "api/v1/roles*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("rolesRequest");
+
+    cy.visit("/admin/roles");
+
+    cy.wait("@rolesRequest");
+
+    // Check that error message gets shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that overlay is shown
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that components are not disabled
+    cy.get('[data-test="role-search"]').within(() => {
+      cy.get("input").should("be.visible").and("not.be.disabled");
+      cy.get("button").should("be.visible").and("not.be.disabled");
+    });
+
+    cy.intercept("GET", "api/v1/roles*", {
+      statusCode: 200,
+      fixture: "roles.json",
+    }).as("rolesRequest");
+
+    // Check if reload button exists and click it
+    cy.get('[data-test="loading-retry-button"]')
+      .should("be.visible")
+      .and("have.text", "app.reload")
+      .click();
+
+    cy.wait("@rolesRequest");
+
+    // Check that overlay is not shown anymore
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
+
+    // Check that roles are shown and contain the correct data
+    cy.get('[data-test="role-item"]').should("have.length", 3);
+    cy.get('[data-test="role-item"]')
+      .eq(0)
+      .should("include.text", "Superuser")
+      .and("include.text", "admin.roles.superuser");
+    cy.get('[data-test="role-item"]').eq(1).should("include.text", "Staff");
+    cy.get('[data-test="role-item"]').eq(2).should("include.text", "Students");
+
+    // Switch to next page with general error
+    cy.intercept("GET", "api/v1/roles*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("rolesRequest");
+
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    cy.wait("@rolesRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "2",
+      });
+    });
+
+    // Check that error message gets shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that overlay is shown
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that components are not disabled
+    cy.get('[data-test="role-search"]').within(() => {
+      cy.get("input").should("be.visible").and("not.be.disabled");
+      cy.get("button").should("be.visible").and("not.be.disabled");
+    });
+
+    cy.fixture("roles.json").then((roles) => {
+      roles.data = roles.data.slice(0, 1);
+      roles.meta.last_page = 1;
+      roles.meta.per_page = 1;
+      roles.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/roles*", {
+        statusCode: 200,
+        body: roles,
+      }).as("rolesRequest");
+    });
+
+    // Check if reload button exists and click it
+    cy.get('[data-test="loading-retry-button"]')
+      .should("be.visible")
+      .and("have.text", "app.reload")
+      .click();
+
+    cy.wait("@rolesRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that overlay is not shown anymore
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
+
+    // Check that role is shown and contains the correct data
+    cy.get('[data-test="role-item"]').should("have.length", 1);
+    cy.get('[data-test="role-item"]')
+      .eq(0)
+      .should("include.text", "Superuser")
+      .and("include.text", "admin.roles.superuser");
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Switch to next page with 401 error
+    cy.intercept("GET", "api/v1/roles*", {
+      statusCode: 401,
+    }).as("rolesRequest");
+
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    cy.wait("@rolesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/roles");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+
+    // Reload page with 401 error
+    cy.visit("/admin/roles");
+
+    cy.wait("@rolesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/roles");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("load roles page out of bounds", function () {
+    cy.fixture("roles.json").then((roles) => {
+      roles.data = roles.data.slice(0, 1);
+      roles.meta.last_page = 2;
+      roles.meta.per_page = 1;
+      roles.meta.to = 1;
+      roles.meta.total = 2;
+
+      cy.intercept("GET", "api/v1/roles*", {
+        statusCode: 200,
+        body: roles,
+      }).as("rolesRequest");
+    });
+
+    cy.visit("/admin/roles");
+
+    cy.wait("@rolesRequest");
+
+    // Switch to next page but respond with no roles on second page
+    cy.fixture("roles.json").then((roles) => {
+      roles.data = [];
+      roles.meta.current_page = 2;
+      roles.meta.last_page = 1;
+      roles.meta.from = null;
+      roles.meta.per_page = 2;
+      roles.meta.to = null;
+      roles.meta.total = 2;
+      roles.meta.total_no_filter = 2;
+
+      const emptyRolesRequest = interceptIndefinitely(
+        "GET",
+        "api/v1/roles*",
+        {
+          statusCode: 200,
+          body: roles,
+        },
+        "rolesRequest",
+      );
+
+      cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+      cy.fixture("roles.json").then((roles) => {
+        roles.data = roles.data.slice(0, 2);
+        roles.meta.per_page = 2;
+        roles.meta.to = 2;
+        roles.meta.total = 2;
+        roles.meta.total_no_filter = 2;
+
+        cy.intercept("GET", "api/v1/roles*", {
+          statusCode: 200,
+          body: roles,
+        })
+          .as("rolesRequest")
+          .then(() => {
+            emptyRolesRequest.sendResponse();
+          });
+      });
+    });
+
+    // Wait for first user request and check that page is still the same
+    cy.wait("@rolesRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "2",
+      });
+    });
+
+    // Wait for second user request and check that page is reset
+    cy.wait("@rolesRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that pagination is shown correctly
+    cy.get('[data-test="paginator-page"]').should("have.length", 1);
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+  });
+
+  it("role search", function () {
+    cy.visit("/admin/roles");
+
+    cy.wait("@rolesRequest").then((interception) => {
+      expect(interception.request.query.name).to.be.undefined;
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check with no roles found for this search query
+    cy.fixture("roles.json").then((roles) => {
+      roles.data = [];
+      roles.meta.from = null;
+      roles.meta.per_page = 1;
+      roles.meta.to = null;
+      roles.meta.total = 0;
+
+      cy.intercept("GET", "api/v1/roles*", {
+        statusCode: 200,
+        body: roles,
+      }).as("rolesRequest");
+    });
+
+    cy.get('[data-test="role-search"] > input').should("have.value", "");
+    cy.get('[data-test="role-search"] > input').type("Test");
+    cy.get('[data-test="role-search"] > button').click();
+
+    cy.wait("@rolesRequest").then((interception) => {
+      expect(interception.request.query.name).to.equal("Test");
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that correct message is shown and no roles are displayed
+    cy.contains("admin.roles.no_data_filtered").should("be.visible");
+    cy.get('[data-test="role-item"]').should("not.exist");
+
+    // Check with no roles available
+    cy.fixture("roles.json").then((roles) => {
+      roles.data = [];
+      roles.meta.from = null;
+      roles.meta.per_page = 1;
+      roles.meta.to = null;
+      roles.meta.total = 0;
+      roles.meta.total_no_filter = 0;
+
+      cy.intercept("GET", "api/v1/roles*", {
+        statusCode: 200,
+        body: roles,
+      }).as("rolesRequest");
+    });
+
+    cy.get('[data-test="role-search"] > input').clear();
+    cy.get('[data-test="role-search"] > input').type("Test2");
+    cy.get('[data-test="role-search"] > input').type("{enter}");
+
+    cy.wait("@rolesRequest").then((interception) => {
+      expect(interception.request.query.name).to.equal("Test2");
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that correct message is shown and no roles are displayed
+    cy.contains("admin.roles.no_data").should("be.visible");
+    cy.get('[data-test="role-item"]').should("have.length", 0);
+
+    // Check with 2 roles on 2 pages
+    cy.fixture("roles.json").then((roles) => {
+      roles.data = roles.data.slice(0, 1);
+      roles.meta.last_page = 2;
+      roles.meta.per_page = 1;
+      roles.meta.to = 1;
+      roles.meta.total = 2;
+
+      cy.intercept("GET", "api/v1/roles*", {
+        statusCode: 200,
+        body: roles,
+      }).as("rolesRequest");
+    });
+
+    cy.get('[data-test="role-search"] > input').clear();
+    cy.get('[data-test="role-search"] > input').type("e");
+    cy.get('[data-test="role-search"] > button').click();
+
+    cy.wait("@rolesRequest").then((interception) => {
+      expect(interception.request.query.name).to.equal("e");
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that correct role is shown
+    cy.get('[data-test="role-item"]').should("have.length", 1);
+    cy.get('[data-test="role-item"]')
+      .eq(0)
+      .should("include.text", "Superuser")
+      .and("include.text", "admin.roles.superuser");
+
+    // Check that pagination shows the correct number of pages and switch to next page
+    cy.get('[data-test="paginator-page"]').should("have.length", 2);
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    cy.fixture("roles.json").then((roles) => {
+      roles.data = roles.data.slice(1, 2);
+      roles.meta.current_page = 2;
+      roles.meta.from = 2;
+      roles.meta.last_page = 2;
+      roles.meta.per_page = 1;
+      roles.meta.to = 2;
+      roles.meta.total = 2;
+
+      cy.intercept("GET", "api/v1/roles*", {
+        statusCode: 200,
+        body: roles,
+      }).as("rolesRequest");
+    });
+
+    // Click on button for next page (eq(1) needed because there are two paginator components
+    // (first one for small devices second one for larger devices))
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    // Check if the search query stays the same after changing the page
+    cy.wait("@rolesRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        name: "e",
+        page: "2",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(1)
+      .should("have.attr", "data-p-active", "true");
+
+    cy.get('[data-test="role-search"] > input').should("have.value", "e");
+
+    // Check that correct user is shown
+    cy.get('[data-test="role-item"]').should("have.length", 1);
+    cy.get('[data-test="role-item"]').eq(0).should("include.text", "Staff");
+
+    // Change search query and make sure that the page is reset
+    cy.fixture("roles.json").then((roles) => {
+      roles.data = roles.data.slice(0, 1);
+      roles.meta.last_page = 2;
+      roles.meta.per_page = 1;
+      roles.meta.to = 1;
+      roles.meta.total = 2;
+
+      cy.intercept("GET", "api/v1/roles*", {
+        statusCode: 200,
+        body: roles,
+      }).as("rolesRequest");
+    });
+
+    cy.get('[data-test="role-search"] > input').clear();
+    cy.get('[data-test="role-search"] > input').type("o");
+    cy.get('[data-test="role-search"] > button').click();
+
+    // Check that roles are loaded with the page reset to the first page
+    cy.wait("@rolesRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        name: "o",
+        page: "1",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+  });
+
+  it("sort roles", function () {
+    cy.visit("/admin/roles");
+
+    cy.wait("@rolesRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "name",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that correct columns are sortable and correct sorting type and direction is shown
+    cy.get('[data-test="role-header-cell"]').should("have.length", 2);
+    cy.get('[data-test="role-header-cell"]')
+      .eq(0)
+      .should("have.text", "app.model_name")
+      .and("have.attr", "data-p-sortable-column", "true")
+      .and("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "ascending");
+    cy.get('[data-test="role-header-cell"]')
+      .eq(1)
+      .should("have.text", "app.actions")
+      .and("not.have.attr", "data-p-sortable-column", "true");
+
+    // Change sorting direction and response with 3 roles on 3 pages
+    cy.fixture("roles.json").then((roles) => {
+      roles.data = roles.data.slice(0, 1);
+      roles.meta.last_page = 3;
+      roles.meta.per_page = 1;
+      roles.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/roles*", {
+        statusCode: 200,
+        body: roles,
+      }).as("rolesRequest");
+    });
+
+    cy.get('[data-test="role-header-cell"]').eq(0).click();
+
+    cy.wait("@rolesRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "name",
+        sort_direction: "desc",
+      });
+    });
+
+    // Check that sorting is shown correctly
+    cy.get('[data-test="role-header-cell"]')
+      .eq(0)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "descending");
+
+    // Check that correct role is shown
+    cy.get('[data-test="role-item"]').should("have.length", 1);
+    cy.get('[data-test="role-item"]')
+      .eq(0)
+      .should("include.text", "Superuser")
+      .and("include.text", "admin.roles.superuser");
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Switch to next page
+    cy.fixture("roles.json").then((roles) => {
+      roles.data = roles.data.slice(1, 2);
+      roles.meta.current_page = 2;
+      roles.meta.from = 2;
+      roles.meta.last_page = 3;
+      roles.meta.per_page = 1;
+      roles.meta.to = 2;
+
+      cy.intercept("GET", "api/v1/roles*", {
+        statusCode: 200,
+        body: roles,
+      }).as("rolesRequest");
+    });
+
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    // Check that sorting stays the same
+    cy.wait("@rolesRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "2",
+        sort_by: "name",
+        sort_direction: "desc",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(1)
+      .should("have.attr", "data-p-active", "true");
+
+    // Check that sorting is shown correctly
+    cy.get('[data-test="role-header-cell"]')
+      .eq(0)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "descending");
+
+    // Check that correct role is shown
+    cy.get('[data-test="role-item"]').should("have.length", 1);
+    cy.get('[data-test="role-item"]').eq(0).should("include.text", "Staff");
+
+    // Change sorting direction and make sure that the page is reset
+    cy.fixture("roles.json").then((roles) => {
+      roles.data = roles.data.slice(0, 1);
+      roles.meta.last_page = 3;
+      roles.meta.per_page = 1;
+      roles.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/roles*", {
+        statusCode: 200,
+        body: roles,
+      }).as("rolesRequest");
+    });
+
+    cy.get('[data-test="role-header-cell"]').eq(0).click();
+
+    // Check that roles are loaded with the page reset to the first page
+    cy.wait("@rolesRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "name",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Check that sorting is shown correctly
+    cy.get('[data-test="role-header-cell"]')
+      .eq(0)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "ascending");
+
+    // Check that correct role is shown
+    cy.get('[data-test="role-item"]').should("have.length", 1);
+    cy.get('[data-test="role-item"]')
+      .eq(0)
+      .should("include.text", "Superuser")
+      .and("include.text", "admin.roles.superuser");
+  });
+
+  it("check button visibility with view permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "roles.view",
+      ];
+
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/roles");
+    cy.wait("@rolesRequest");
+
+    cy.get('[data-test="roles-add-button"]').should("not.exist");
+
+    cy.get('[data-test="role-item"]').should("have.length", 3);
+
+    cy.get('[data-test="role-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="roles-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/1");
+        cy.get('[data-test="roles-edit-button"]').should("not.exist");
+        cy.get('[data-test="roles-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="role-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="roles-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/2");
+        cy.get('[data-test="roles-edit-button"]').should("not.exist");
+        cy.get('[data-test="roles-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="role-item"]')
+      .eq(2)
+      .within(() => {
+        cy.get('[data-test="roles-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/3");
+        cy.get('[data-test="roles-edit-button"]').should("not.exist");
+        cy.get('[data-test="roles-delete-button"]').should("not.exist");
+      });
+  });
+
+  it("check button visibility with update permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "roles.view",
+        "roles.update",
+      ];
+
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/roles");
+    cy.wait("@rolesRequest");
+
+    cy.get('[data-test="roles-add-button"]').should("not.exist");
+
+    cy.get('[data-test="role-item"]').should("have.length", 3);
+
+    cy.get('[data-test="role-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="roles-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/1");
+        cy.get('[data-test="roles-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/1/edit");
+        cy.get('[data-test="roles-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="role-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="roles-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/2");
+        cy.get('[data-test="roles-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/2/edit");
+        cy.get('[data-test="roles-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="role-item"]')
+      .eq(2)
+      .within(() => {
+        cy.get('[data-test="roles-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/3");
+        cy.get('[data-test="roles-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/3/edit");
+        cy.get('[data-test="roles-delete-button"]').should("not.exist");
+      });
+  });
+
+  it("check button visibility with add permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "roles.view",
+        "roles.update",
+        "roles.create",
+      ];
+
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/roles");
+    cy.wait("@rolesRequest");
+
+    cy.get('[data-test="roles-add-button"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/roles/new");
+
+    cy.get('[data-test="role-item"]').should("have.length", 3);
+
+    cy.get('[data-test="role-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="roles-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/1");
+        cy.get('[data-test="roles-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/1/edit");
+        cy.get('[data-test="roles-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="role-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="roles-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/2");
+        cy.get('[data-test="roles-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/2/edit");
+        cy.get('[data-test="roles-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="role-item"]')
+      .eq(2)
+      .within(() => {
+        cy.get('[data-test="roles-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/3");
+        cy.get('[data-test="roles-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/3/edit");
+        cy.get('[data-test="roles-delete-button"]').should("not.exist");
+      });
+  });
+
+  it("check button visibility with delete permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "roles.view",
+        "roles.update",
+        "roles.create",
+        "roles.delete",
+      ];
+
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/roles");
+    cy.wait("@rolesRequest");
+
+    cy.get('[data-test="roles-add-button"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/roles/new");
+
+    cy.get('[data-test="role-item"]').should("have.length", 3);
+
+    cy.get('[data-test="role-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="roles-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/1");
+        cy.get('[data-test="roles-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/1/edit");
+        cy.get('[data-test="roles-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="role-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="roles-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/2");
+        cy.get('[data-test="roles-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/2/edit");
+        cy.get('[data-test="roles-delete-button"]').should("be.visible");
+      });
+
+    cy.get('[data-test="role-item"]')
+      .eq(2)
+      .within(() => {
+        cy.get('[data-test="roles-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/3");
+        cy.get('[data-test="roles-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/3/edit");
+        cy.get('[data-test="roles-delete-button"]').should("be.visible");
+      });
+  });
+
+  it("check button visibility for user that is no superuser", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.superuser = false;
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "roles.view",
+        "roles.update",
+        "roles.create",
+        "roles.delete",
+      ];
+
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/roles");
+    cy.wait("@rolesRequest");
+
+    cy.get('[data-test="roles-add-button"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/roles/new");
+
+    cy.get('[data-test="role-item"]').should("have.length", 3);
+
+    cy.get('[data-test="role-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="roles-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/1");
+        cy.get('[data-test="roles-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/1/edit");
+        cy.get('[data-test="roles-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="role-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="roles-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/2");
+        cy.get('[data-test="roles-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/2/edit");
+        cy.get('[data-test="roles-delete-button"]').should("be.visible");
+      });
+
+    cy.get('[data-test="role-item"]')
+      .eq(2)
+      .within(() => {
+        cy.get('[data-test="roles-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/3");
+        cy.get('[data-test="roles-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/roles/3/edit");
+        cy.get('[data-test="roles-delete-button"]').should("be.visible");
+      });
+  });
+});
diff --git a/tests/Frontend/e2e/AdminRolesIndexRoleActions.cy.js b/tests/Frontend/e2e/AdminRolesIndexRoleActions.cy.js
new file mode 100644
index 000000000..e7bb1f004
--- /dev/null
+++ b/tests/Frontend/e2e/AdminRolesIndexRoleActions.cy.js
@@ -0,0 +1,215 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin roles index role actions", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminRolesIndexRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "roles.view",
+        "roles.update",
+        "roles.create",
+        "roles.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("delete role", function () {
+    cy.visit("/admin/roles");
+
+    cy.wait("@rolesRequest");
+
+    cy.get('[data-test="role-item"]').should("have.length", 3);
+
+    cy.get('[data-test="roles-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="role-item"]')
+      .eq(2)
+      .find('[data-test="roles-delete-button"]')
+      .click();
+
+    cy.get('[data-test="roles-delete-dialog"]').should("be.visible");
+
+    // Check that dialog shows correct data
+    cy.get('[data-test="roles-delete-dialog"]')
+      .should("include.text", "admin.roles.delete.title")
+      .should("include.text", 'admin.roles.delete.confirm_{"name":"Students"}');
+
+    // Confirm deletion of role
+    const deleteRoleRequest = interceptIndefinitely(
+      "DELETE",
+      "api/v1/roles/3",
+      {
+        statusCode: 204,
+      },
+      "deleteRoleRequest",
+    );
+
+    cy.fixture("roles.json").then((roles) => {
+      roles.data = roles.data.filter((role) => role.id !== 3);
+      roles.meta.to = 2;
+      roles.meta.total = 2;
+      roles.meta.total_no_filter = 2;
+
+      cy.intercept("GET", "api/v1/roles*", {
+        statusCode: 200,
+        body: roles,
+      }).as("rolesRequest");
+    });
+
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("have.text", "app.yes")
+      .click();
+
+    // Check loading
+    cy.get('[data-test="dialog-cancel-button"]')
+      .should("have.text", "app.no")
+      .should("be.disabled");
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("be.disabled")
+      .then(() => {
+        deleteRoleRequest.sendResponse();
+      });
+
+    cy.wait("@deleteRoleRequest");
+    cy.wait("@rolesRequest");
+
+    // Check that role was deleted
+    cy.get('[data-test="role-item"]').should("have.length", 2);
+
+    // Check that dialog was closed
+    cy.get('[data-test="roles-delete-dialog"]').should("not.exist");
+
+    // Reopen dialog for different user
+    cy.get('[data-test="role-item"]')
+      .eq(1)
+      .find('[data-test="roles-delete-button"]')
+      .click();
+
+    cy.get('[data-test="roles-delete-dialog"]').should("be.visible");
+
+    // Check that dialog shows correct data
+    cy.get('[data-test="roles-delete-dialog"]')
+      .should("include.text", "admin.roles.delete.title")
+      .should("include.text", 'admin.roles.delete.confirm_{"name":"Staff"}');
+
+    // Cancel deletion of role
+    cy.get('[data-test="dialog-cancel-button"]')
+      .should("have.text", "app.no")
+      .click();
+    cy.get('[data-test="roles-delete-dialog"]').should("not.exist");
+  });
+
+  it("delete role errors", function () {
+    cy.visit("/admin/roles");
+
+    cy.wait("@rolesRequest");
+
+    cy.get('[data-test="role-item"]').should("have.length", 3);
+
+    cy.get('[data-test="roles-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="role-item"]')
+      .eq(2)
+      .find('[data-test="roles-delete-button"]')
+      .click();
+
+    cy.get('[data-test="roles-delete-dialog"]').should("be.visible");
+
+    // Check with 500 error
+    cy.intercept("DELETE", "api/v1/roles/3", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("deleteRoleRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteRoleRequest");
+
+    // Check that dialog is still open and that error message is shown
+    cy.get('[data-test="roles-delete-dialog"]').should("be.visible");
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check with 464 error
+    cy.intercept("DELETE", "api/v1/roles/3", {
+      statusCode: 464,
+      body: {
+        message:
+          "The role is linked to users and therefore it can't be deleted!",
+      },
+    }).as("deleteRoleRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteRoleRequest");
+
+    // Check that dialog is still open and that error message is shown
+    cy.get('[data-test="roles-delete-dialog"]').should("be.visible");
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"The role is linked to users and therefore it can\'t be deleted!"}',
+      'app.flash.server_error.error_code_{"statusCode":464}',
+    ]);
+
+    // Check with 401 error
+    cy.intercept("DELETE", "api/v1/roles/3", {
+      statusCode: 401,
+    }).as("deleteRoleRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteRoleRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/roles");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("open add new role page", function () {
+    cy.visit("/admin/roles");
+    cy.wait("@rolesRequest");
+
+    cy.interceptAdminRolesNewRequests();
+
+    cy.get('[data-test="roles-add-button"]').click();
+    cy.url().should("include", "/admin/roles/new");
+  });
+
+  it("open edit role page", function () {
+    cy.visit("/admin/roles");
+    cy.wait("@rolesRequest");
+
+    cy.interceptAdminRolesViewRequests();
+
+    cy.get('[data-test="role-item"]')
+      .eq(1)
+      .find('[data-test="roles-edit-button"]')
+      .click();
+    cy.url().should("include", "/admin/roles/2/edit");
+  });
+
+  it("open view role page", function () {
+    cy.visit("/admin/roles");
+    cy.wait("@rolesRequest");
+
+    cy.interceptAdminRolesViewRequests();
+
+    cy.get('[data-test="role-item"]')
+      .eq(1)
+      .find('[data-test="roles-view-button"]')
+      .click();
+    cy.url().should("include", "/admin/roles/2");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminRolesNew.cy.js b/tests/Frontend/e2e/AdminRolesNew.cy.js
new file mode 100644
index 000000000..c9971f4a0
--- /dev/null
+++ b/tests/Frontend/e2e/AdminRolesNew.cy.js
@@ -0,0 +1,1475 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin roles new", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminRolesNewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "roles.view",
+        "roles.update",
+        "roles.create",
+        "roles.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin/roles/new");
+  });
+
+  it("visit with user without permission to add new roles", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "roles.view",
+        "roles.update",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+    cy.visit("/admin/roles/new");
+
+    // Check if the welcome page is shown
+    cy.url().should("not.include", "/admin/room_types");
+    cy.get("h1").should("be.visible").and("include.text", "home.title");
+  });
+
+  it("add new role", function () {
+    cy.visit("/admin/roles/new");
+
+    // Check that header buttons are hidden
+    cy.get('[data-test="roles-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-delete-button"]').should("not.exist");
+
+    // Check that breadcrumbs stay the same
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.roles.index")
+      .should("include.text", "admin.breakcrumbs.roles.new");
+
+    cy.get('[data-test="name-field"]')
+      .should("be.visible")
+      .and("include.text", "app.model_name")
+      .within(() => {
+        cy.get("#name").should("have.value", "").type("Standard role");
+      });
+
+    cy.get('[data-test="roles-room-limit-help-dialog"]').should("not.exist");
+    cy.get('[data-test="room-limit-field"]')
+      .should("be.visible")
+      .and("include.text", "app.room_limit")
+      .within(() => {
+        cy.get('[data-test="room-limit-mode-default-field"]')
+          .should("be.visible")
+          .should(
+            "include.text",
+            'admin.roles.room_limit.default_{"value":"app.unlimited"}',
+          )
+          .within(() => {
+            cy.get("#default").should("be.checked").and("not.be.disabled");
+          });
+
+        cy.get('[data-test="room-limit-mode-unlimited-field"]')
+          .should("be.visible")
+          .should("include.text", "app.unlimited")
+          .within(() => {
+            cy.get("#unlimited")
+              .should("not.be.checked")
+              .and("not.be.disabled");
+          });
+
+        cy.get('[data-test="room-limit-mode-custom-field"]')
+          .should("be.visible")
+          .should("include.text", "admin.roles.room_limit.custom")
+          .within(() => {
+            cy.get("#custom").should("not.be.checked").and("not.be.disabled");
+          });
+        cy.get("#room-limit").should("not.exist");
+
+        // Open room limit help dialog
+        cy.get('[data-test="roles-room-limit-help-button"]').click();
+      });
+
+    cy.checkRoomLimitHelpDialog();
+
+    cy.get('[data-test="roles-room-limit-help-dialog"]').should("not.exist");
+
+    // Change permissions
+    cy.contains("admin.roles.permissions_title").should("be.visible");
+
+    cy.get('[data-test="permission-list"]')
+      .should("be.visible")
+      .and("include.text", "admin.roles.permission_name")
+      .and("include.text", "admin.roles.permission_explicit")
+      .and("include.text", "admin.roles.permission_included")
+      .within(() => {
+        cy.get('[data-test="permission-category"]').should("have.length", 10);
+
+        cy.get('[data-test="permission-category"]')
+          .eq(0)
+          .should("include.text", "admin.roles.permissions.rooms.title")
+          .within(() => {
+            cy.checkPermissionGroup(0, "rooms.create", false, false, false);
+            cy.checkPermissionGroup(1, "rooms.viewAll", false, false, false);
+            cy.checkPermissionGroup(2, "rooms.manage", false, false, false);
+
+            cy.get("#rooms\\.manage").click();
+
+            cy.checkPermissionGroup(0, "rooms.create", false, true, false);
+            cy.checkPermissionGroup(1, "rooms.viewAll", false, true, false);
+            cy.checkPermissionGroup(2, "rooms.manage", true, true, false);
+
+            cy.get("#rooms\\.create").click();
+            cy.get("#rooms\\.view_all").click();
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(1)
+          .should("include.text", "admin.roles.permissions.meetings.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "meetings.viewAny", false, false, false);
+
+            cy.get("#meetings\\.view_any").click();
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(2)
+          .should("include.text", "admin.roles.permissions.admin.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "admin.view", false, false, false);
+
+            cy.get("#admin\\.view").click();
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(3)
+          .should("include.text", "admin.roles.permissions.settings.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 2);
+
+            cy.checkPermissionGroup(0, "settings.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "settings.update", false, false, false);
+
+            cy.get("#settings\\.update").click();
+
+            cy.checkPermissionGroup(0, "settings.viewAny", false, true, false);
+            cy.checkPermissionGroup(1, "settings.update", true, true, false);
+
+            cy.get("#settings\\.view_any").click();
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(4)
+          .should("include.text", "admin.roles.permissions.system.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "system.monitor", false, false, false);
+
+            cy.get("#system\\.monitor").click();
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(5)
+          .should("include.text", "admin.roles.permissions.users.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 6);
+
+            cy.checkPermissionGroup(0, "users.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "users.view", false, false, false);
+            cy.checkPermissionGroup(2, "users.update", false, false, false);
+            cy.checkPermissionGroup(3, "users.create", false, false, false);
+            cy.checkPermissionGroup(4, "users.delete", false, false, false);
+            cy.checkPermissionGroup(
+              5,
+              "users.updateOwnAttributes",
+              false,
+              false,
+              false,
+            );
+
+            cy.get("#users\\.update_own_attributes").click();
+
+            cy.checkPermissionGroup(0, "users.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "users.view", false, false, false);
+            cy.checkPermissionGroup(2, "users.update", false, false, false);
+            cy.checkPermissionGroup(3, "users.create", false, false, false);
+            cy.checkPermissionGroup(4, "users.delete", false, false, false);
+            cy.checkPermissionGroup(
+              5,
+              "users.updateOwnAttributes",
+              true,
+              true,
+              false,
+            );
+
+            cy.get("#users\\.delete").click();
+
+            cy.checkPermissionGroup(0, "users.viewAny", false, true, false);
+            cy.checkPermissionGroup(1, "users.view", false, true, false);
+            cy.checkPermissionGroup(2, "users.update", false, true, false);
+            cy.checkPermissionGroup(3, "users.create", false, true, false);
+            cy.checkPermissionGroup(4, "users.delete", true, true, false);
+            cy.checkPermissionGroup(
+              5,
+              "users.updateOwnAttributes",
+              true,
+              true,
+              false,
+            );
+
+            cy.get("#users\\.create").click();
+            cy.get("#users\\.update").click();
+            cy.get("#users\\.view").click();
+            cy.get("#users\\.view_any").click();
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(6)
+          .should("include.text", "admin.roles.permissions.roles.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(0, "roles.viewAny", false, true, false);
+            cy.checkPermissionGroup(1, "roles.view", false, false, false);
+            cy.checkPermissionGroup(2, "roles.update", false, false, false);
+            cy.checkPermissionGroup(3, "roles.create", false, false, false);
+            cy.checkPermissionGroup(4, "roles.delete", false, false, false);
+
+            cy.get("#roles\\.delete").click();
+
+            cy.checkPermissionGroup(0, "roles.viewAny", false, true, false);
+            cy.checkPermissionGroup(1, "roles.view", false, true, false);
+            cy.checkPermissionGroup(2, "roles.update", false, true, false);
+            cy.checkPermissionGroup(3, "roles.create", false, true, false);
+            cy.checkPermissionGroup(4, "roles.delete", true, true, false);
+
+            cy.get("#roles\\.create").click();
+            cy.get("#roles\\.update").click();
+            cy.get("#roles\\.view").click();
+            cy.get("#roles\\.view_any").click();
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(7)
+          .should("include.text", "admin.roles.permissions.room_types.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 4);
+
+            cy.checkPermissionGroup(0, "roomTypes.view", false, false, false);
+            cy.checkPermissionGroup(1, "roomTypes.update", false, false, false);
+            cy.checkPermissionGroup(2, "roomTypes.create", false, false, false);
+            cy.checkPermissionGroup(3, "roomTypes.delete", false, false, false);
+
+            cy.get("#room_types\\.delete").click();
+
+            cy.checkPermissionGroup(0, "roomTypes.view", false, true, false);
+            cy.checkPermissionGroup(1, "roomTypes.update", false, true, false);
+            cy.checkPermissionGroup(2, "roomTypes.create", false, true, false);
+            cy.checkPermissionGroup(3, "roomTypes.delete", true, true, false);
+
+            cy.get("#room_types\\.create").click();
+            cy.get("#room_types\\.update").click();
+            cy.get("#room_types\\.view").click();
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(8)
+          .should("include.text", "admin.roles.permissions.servers.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(0, "servers.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "servers.view", false, false, false);
+            cy.checkPermissionGroup(2, "servers.update", false, false, false);
+            cy.checkPermissionGroup(3, "servers.create", false, false, false);
+            cy.checkPermissionGroup(4, "servers.delete", false, false, false);
+
+            cy.get("#servers\\.delete").click();
+
+            cy.checkPermissionGroup(0, "servers.viewAny", false, true, false);
+            cy.checkPermissionGroup(1, "servers.view", false, true, false);
+            cy.checkPermissionGroup(2, "servers.update", false, true, false);
+            cy.checkPermissionGroup(3, "servers.create", false, true, false);
+            cy.checkPermissionGroup(4, "servers.delete", true, true, false);
+
+            cy.get("#servers\\.create").click();
+            cy.get("#servers\\.update").click();
+            cy.get("#servers\\.view").click();
+            cy.get("#servers\\.view_any").click();
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(9)
+          .should("include.text", "admin.roles.permissions.server_pools.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(
+              0,
+              "serverPools.viewAny",
+              false,
+              true,
+              false,
+            );
+            cy.checkPermissionGroup(1, "serverPools.view", false, false, false);
+            cy.checkPermissionGroup(
+              2,
+              "serverPools.update",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(
+              3,
+              "serverPools.create",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(
+              4,
+              "serverPools.delete",
+              false,
+              false,
+              false,
+            );
+
+            cy.get("#server_pools\\.delete").click();
+
+            cy.checkPermissionGroup(
+              0,
+              "serverPools.viewAny",
+              false,
+              true,
+              false,
+            );
+            cy.checkPermissionGroup(1, "serverPools.view", false, true, false);
+            cy.checkPermissionGroup(
+              2,
+              "serverPools.update",
+              false,
+              true,
+              false,
+            );
+            cy.checkPermissionGroup(
+              3,
+              "serverPools.create",
+              false,
+              true,
+              false,
+            );
+            cy.checkPermissionGroup(4, "serverPools.delete", true, true, false);
+
+            cy.get("#server_pools\\.create").click();
+            cy.get("#server_pools\\.update").click();
+            cy.get("#server_pools\\.view").click();
+            cy.get("#server_pools\\.view_any").click();
+          });
+      });
+
+    // Add new role
+    cy.fixture("superuserRole.json").then((role) => {
+      role.data.id = 40;
+      role.data.name = "Standard role";
+      role.data.superuser = false;
+
+      const newRoleRequest = interceptIndefinitely(
+        "POST",
+        "api/v1/roles",
+        {
+          statusCode: 201,
+          body: role,
+        },
+        "newRoleRequest",
+      );
+
+      cy.intercept("GET", "api/v1/roles/40", {
+        statusCode: 200,
+        body: role,
+      }).as("roleRequest");
+
+      cy.get('[data-test="overlay"]').should("not.exist");
+
+      cy.get('[data-test="roles-save-button"]')
+        .should("have.text", "app.save")
+        .click();
+
+      // Check loading
+      cy.get('[data-test="overlay"]').should("be.visible");
+
+      cy.get("#name").should("be.disabled");
+      cy.get("#default").should("be.disabled");
+      cy.get("#unlimited").should("be.disabled");
+      cy.get("#custom").should("be.disabled");
+      cy.get("#room-limit").should("not.exist");
+
+      cy.get("#rooms\\.create").should("not.exist");
+      cy.get("#rooms\\.view_all").should("not.exist");
+      cy.get("#rooms\\.manage").should("not.exist");
+      cy.get("#meetings\\.view_any").should("not.exist");
+      cy.get("#admin\\.view").should("not.exist");
+      cy.get("#settings\\.view_any").should("not.exist");
+      cy.get("#settings\\.update").should("not.exist");
+      cy.get("#system\\.monitor").should("not.exist");
+      cy.get("#roles\\.view_any").should("not.exist");
+      cy.get("#roles\\.view").should("not.exist");
+      cy.get("#roles\\.update").should("not.exist");
+      cy.get("#roles\\.create").should("not.exist");
+      cy.get("#roles\\.delete").should("not.exist");
+      cy.get("#users\\.view_any").should("not.exist");
+      cy.get("#users\\.view").should("not.exist");
+      cy.get("#users\\.update").should("not.exist");
+      cy.get("#users\\.create").should("not.exist");
+      cy.get("#users\\.delete").should("not.exist");
+      cy.get("#users\\.update_own_attributes").should("not.exist");
+      cy.get("#room_types\\.view").should("not.exist");
+      cy.get("#room_types\\.update").should("not.exist");
+      cy.get("#room_types\\.create").should("not.exist");
+      cy.get("#room_types\\.delete").should("not.exist");
+      cy.get("#servers\\.view_any").should("not.exist");
+      cy.get("#servers\\.view").should("not.exist");
+      cy.get("#servers\\.update").should("not.exist");
+      cy.get("#servers\\.create").should("not.exist");
+      cy.get("#servers\\.delete").should("not.exist");
+      cy.get("#server_pools\\.view_any").should("not.exist");
+      cy.get("#server_pools\\.view").should("not.exist");
+      cy.get("#server_pools\\.update").should("not.exist");
+      cy.get("#server_pools\\.create").should("not.exist");
+      cy.get("#server_pools\\.delete").should("not.exist");
+
+      cy.get('[data-test="roles-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          newRoleRequest.sendResponse();
+        });
+
+      cy.wait("@newRoleRequest").then((interception) => {
+        expect(interception.request.body).to.eql({
+          name: "Standard role",
+          room_limit: null,
+          permissions: [
+            5, 3, 4, 6, 7, 9, 8, 35, 20, 19, 18, 17, 16, 15, 14, 13, 12, 11, 10,
+            24, 23, 22, 21, 29, 28, 27, 26, 25, 34, 33, 32, 31, 30,
+          ],
+        });
+      });
+    });
+
+    cy.wait("@roleRequest");
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that role page is shown
+    cy.url().should("include", "/admin/roles/40");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.roles.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.roles.view_{"name":"Standard role"}',
+      );
+  });
+
+  it("add new role with different room limits", function () {
+    cy.visit("/admin/roles/new");
+
+    cy.get("#name").should("have.value", "").type("Standard role");
+
+    // Add new role with custom room limit
+    cy.get('[data-test="room-limit-field"]')
+      .should("be.visible")
+      .and("include.text", "app.room_limit")
+      .within(() => {
+        cy.get("#default").should("be.checked").and("not.be.disabled");
+
+        cy.get("#unlimited").should("not.be.checked").and("not.be.disabled");
+
+        cy.get("#custom").should("not.be.checked").and("not.be.disabled");
+        cy.get("#room-limit").should("not.exist");
+
+        cy.get("#custom").click();
+
+        cy.get("#room-limit")
+          .should("be.visible")
+          .and("have.value", "0")
+          .type("5");
+      });
+
+    // Add new role
+    cy.fixture("role.json").then((role) => {
+      role.data.id = 40;
+      role.data.name = "Standard role";
+      role.data.room_limit = 5;
+      role.data.permissions = [];
+
+      const newRoleRequest = interceptIndefinitely(
+        "POST",
+        "api/v1/roles",
+        {
+          statusCode: 201,
+          body: role,
+        },
+        "newRoleRequest",
+      );
+
+      cy.intercept("GET", "api/v1/roles/40", {
+        statusCode: 200,
+        body: role,
+      }).as("roleRequest");
+
+      cy.get('[data-test="overlay"]').should("not.exist");
+
+      cy.get('[data-test="roles-save-button"]')
+        .should("have.text", "app.save")
+        .click();
+
+      // Check loading
+      cy.get('[data-test="overlay"]').should("be.visible");
+
+      cy.get("#name").should("be.disabled");
+      cy.get("#default").should("be.disabled");
+      cy.get("#unlimited").should("be.disabled");
+      cy.get("#custom").should("be.disabled");
+      cy.get("#room-limit").should("be.disabled");
+
+      cy.get('[data-test="roles-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          newRoleRequest.sendResponse();
+        });
+
+      cy.wait("@newRoleRequest").then((interception) => {
+        expect(interception.request.body).to.eql({
+          name: "Standard role",
+          room_limit: 5,
+          permissions: [],
+        });
+      });
+    });
+
+    cy.wait("@roleRequest");
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that role page is shown
+    cy.url().should("include", "/admin/roles/40");
+
+    // Reload page
+    cy.visit("/admin/roles/new");
+
+    cy.get("#name").should("have.value", "").type("Standard role");
+
+    // Add new role with unlimited  room limit
+    cy.get('[data-test="room-limit-field"]')
+      .should("be.visible")
+      .and("include.text", "app.room_limit")
+      .within(() => {
+        cy.get("#default").should("be.checked").and("not.be.disabled");
+
+        cy.get("#unlimited")
+          .should("not.be.checked")
+          .and("not.be.disabled")
+          .click();
+
+        cy.get("#custom").should("not.be.checked").and("not.be.disabled");
+        cy.get("#room-limit").should("not.exist");
+      });
+
+    // Add new role
+    cy.fixture("role.json").then((role) => {
+      role.data.id = 40;
+      role.data.name = "Standard role";
+      role.data.room_limit = -1;
+      role.data.permissions = [];
+
+      cy.intercept("POST", "api/v1/roles", {
+        statusCode: 201,
+        body: role,
+      }).as("newRoleRequest");
+
+      cy.intercept("GET", "api/v1/roles/40", {
+        statusCode: 200,
+        body: role,
+      }).as("roleRequest");
+
+      cy.get('[data-test="roles-save-button"]')
+        .should("have.text", "app.save")
+        .click();
+
+      cy.wait("@newRoleRequest").then((interception) => {
+        expect(interception.request.body).to.eql({
+          name: "Standard role",
+          room_limit: -1,
+          permissions: [],
+        });
+      });
+    });
+
+    cy.wait("@roleRequest");
+
+    // Check that role page is shown
+    cy.url().should("include", "/admin/roles/40");
+
+    // Reload page
+    cy.visit("/admin/roles/new");
+
+    cy.get("#name").should("have.value", "").type("Standard role");
+
+    // Add new role with default room limit
+    cy.get('[data-test="room-limit-field"]')
+      .should("be.visible")
+      .and("include.text", "app.room_limit")
+      .within(() => {
+        cy.get("#default").should("be.checked").and("not.be.disabled");
+
+        cy.get("#unlimited")
+          .should("not.be.checked")
+          .and("not.be.disabled")
+          .click();
+
+        cy.get("#custom").should("not.be.checked").and("not.be.disabled");
+        cy.get("#room-limit").should("not.exist");
+
+        // Switch back to default
+        cy.get("#default").click();
+      });
+
+    // Add new role
+    cy.fixture("role.json").then((role) => {
+      role.data.id = 40;
+      role.data.name = "Standard role";
+      role.data.room_limit = null;
+      role.data.permissions = [];
+
+      cy.intercept("POST", "api/v1/roles", {
+        statusCode: 201,
+        body: role,
+      }).as("newRoleRequest");
+
+      cy.intercept("GET", "api/v1/roles/40", {
+        statusCode: 200,
+        body: role,
+      }).as("roleRequest");
+
+      cy.get('[data-test="roles-save-button"]')
+        .should("have.text", "app.save")
+        .click();
+
+      cy.wait("@newRoleRequest").then((interception) => {
+        expect(interception.request.body).to.eql({
+          name: "Standard role",
+          room_limit: null,
+          permissions: [],
+        });
+      });
+    });
+
+    cy.wait("@roleRequest");
+
+    // Check that role page is shown
+    cy.url().should("include", "/admin/roles/40");
+  });
+
+  it("check permission list with different permission dependencies", function () {
+    cy.fixture("permissions.json").then((permissions) => {
+      for (let i = 0; i < permissions.data.length; i++) {
+        permissions.data[i].included_permissions = [];
+      }
+
+      cy.intercept("GET", "api/v1/permissions", {
+        statusCode: 200,
+        body: permissions,
+      }).as("permissionsRequest");
+    });
+
+    cy.visit("/admin/roles/new");
+
+    cy.wait("@permissionsRequest");
+
+    cy.get('[data-test="permission-list"]')
+      .should("be.visible")
+      .and("include.text", "admin.roles.permission_name")
+      .and("include.text", "admin.roles.permission_explicit")
+      .and("include.text", "admin.roles.permission_included")
+      .within(() => {
+        cy.get('[data-test="permission-category"]').should("have.length", 10);
+
+        cy.get('[data-test="permission-category"]')
+          .eq(0)
+          .should("include.text", "admin.roles.permissions.rooms.title")
+          .within(() => {
+            cy.checkPermissionGroup(0, "rooms.create", false, false, false);
+            cy.checkPermissionGroup(1, "rooms.viewAll", false, false, false);
+            cy.checkPermissionGroup(2, "rooms.manage", false, false, false);
+
+            cy.get("#rooms\\.manage").click();
+
+            cy.checkPermissionGroup(0, "rooms.create", false, false, false);
+            cy.checkPermissionGroup(1, "rooms.viewAll", false, false, false);
+            cy.checkPermissionGroup(2, "rooms.manage", true, true, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(1)
+          .should("include.text", "admin.roles.permissions.meetings.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "meetings.viewAny", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(2)
+          .should("include.text", "admin.roles.permissions.admin.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "admin.view", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(3)
+          .should("include.text", "admin.roles.permissions.settings.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 2);
+
+            cy.checkPermissionGroup(0, "settings.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "settings.update", false, false, false);
+
+            cy.get("#settings\\.update").click();
+
+            cy.checkPermissionGroup(0, "settings.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "settings.update", true, true, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(4)
+          .should("include.text", "admin.roles.permissions.system.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "system.monitor", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(5)
+          .should("include.text", "admin.roles.permissions.users.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 6);
+
+            cy.checkPermissionGroup(0, "users.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "users.view", false, false, false);
+            cy.checkPermissionGroup(2, "users.update", false, false, false);
+            cy.checkPermissionGroup(3, "users.create", false, false, false);
+            cy.checkPermissionGroup(4, "users.delete", false, false, false);
+            cy.checkPermissionGroup(
+              5,
+              "users.updateOwnAttributes",
+              false,
+              false,
+              false,
+            );
+
+            cy.get("#users\\.delete").click();
+
+            cy.checkPermissionGroup(0, "users.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "users.view", false, false, false);
+            cy.checkPermissionGroup(2, "users.update", false, false, false);
+            cy.checkPermissionGroup(3, "users.create", false, false, false);
+            cy.checkPermissionGroup(4, "users.delete", true, true, false);
+            cy.checkPermissionGroup(
+              5,
+              "users.updateOwnAttributes",
+              false,
+              false,
+              false,
+            );
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(6)
+          .should("include.text", "admin.roles.permissions.roles.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(0, "roles.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "roles.view", false, false, false);
+            cy.checkPermissionGroup(2, "roles.update", false, false, false);
+            cy.checkPermissionGroup(3, "roles.create", false, false, false);
+            cy.checkPermissionGroup(4, "roles.delete", false, false, false);
+
+            cy.get("#roles\\.delete").click();
+
+            cy.checkPermissionGroup(0, "roles.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "roles.view", false, false, false);
+            cy.checkPermissionGroup(2, "roles.update", false, false, false);
+            cy.checkPermissionGroup(3, "roles.create", false, false, false);
+            cy.checkPermissionGroup(4, "roles.delete", true, true, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(7)
+          .should("include.text", "admin.roles.permissions.room_types.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 4);
+
+            cy.checkPermissionGroup(0, "roomTypes.view", false, false, false);
+            cy.checkPermissionGroup(1, "roomTypes.update", false, false, false);
+            cy.checkPermissionGroup(2, "roomTypes.create", false, false, false);
+            cy.checkPermissionGroup(3, "roomTypes.delete", false, false, false);
+
+            cy.get("#room_types\\.delete").click();
+
+            cy.checkPermissionGroup(0, "roomTypes.view", false, false, false);
+            cy.checkPermissionGroup(1, "roomTypes.update", false, false, false);
+            cy.checkPermissionGroup(2, "roomTypes.create", false, false, false);
+            cy.checkPermissionGroup(3, "roomTypes.delete", true, true, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(8)
+          .should("include.text", "admin.roles.permissions.servers.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(0, "servers.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "servers.view", false, false, false);
+            cy.checkPermissionGroup(2, "servers.update", false, false, false);
+            cy.checkPermissionGroup(3, "servers.create", false, false, false);
+            cy.checkPermissionGroup(4, "servers.delete", false, false, false);
+
+            cy.get("#servers\\.delete").click();
+
+            cy.checkPermissionGroup(0, "servers.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "servers.view", false, false, false);
+            cy.checkPermissionGroup(2, "servers.update", false, false, false);
+            cy.checkPermissionGroup(3, "servers.create", false, false, false);
+            cy.checkPermissionGroup(4, "servers.delete", true, true, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(9)
+          .should("include.text", "admin.roles.permissions.server_pools.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(
+              0,
+              "serverPools.viewAny",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(1, "serverPools.view", false, false, false);
+            cy.checkPermissionGroup(
+              2,
+              "serverPools.update",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(
+              3,
+              "serverPools.create",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(
+              4,
+              "serverPools.delete",
+              false,
+              false,
+              false,
+            );
+
+            cy.get("#server_pools\\.delete").click();
+
+            cy.checkPermissionGroup(
+              0,
+              "serverPools.viewAny",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(1, "serverPools.view", false, false, false);
+            cy.checkPermissionGroup(
+              2,
+              "serverPools.update",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(
+              3,
+              "serverPools.create",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(4, "serverPools.delete", true, true, false);
+          });
+      });
+  });
+
+  it("check permission list with restricted permissions", function () {
+    cy.fixture("permissions.json").then((permissions) => {
+      permissions.meta.restrictions = [
+        "servers.*",
+        "system.monitor",
+        "serverPools.viewAny",
+        "serverPools.view",
+        "serverPools.create",
+        "serverPools.update",
+        "serverPools.delete",
+      ];
+
+      cy.intercept("GET", "api/v1/permissions", {
+        statusCode: 200,
+        body: permissions,
+      }).as("permissionsRequest");
+    });
+
+    cy.visit("/admin/roles/new");
+
+    cy.wait("@permissionsRequest");
+
+    // Check that permission list is shown correctly
+    cy.get('[data-test="permission-list"]')
+      .should("be.visible")
+      .and("include.text", "admin.roles.permission_name")
+      .and("include.text", "admin.roles.permission_explicit")
+      .and("include.text", "admin.roles.permission_included")
+      .within(() => {
+        cy.get('[data-test="permission-category"]').should("have.length", 10);
+
+        cy.get('[data-test="permission-category"]')
+          .eq(0)
+          .should("include.text", "admin.roles.permissions.rooms.title")
+          .within(() => {
+            cy.checkPermissionGroup(0, "rooms.create", false, false, false);
+            cy.checkPermissionGroup(1, "rooms.viewAll", false, false, false);
+            cy.checkPermissionGroup(2, "rooms.manage", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(1)
+          .should("include.text", "admin.roles.permissions.meetings.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "meetings.viewAny", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(2)
+          .should("include.text", "admin.roles.permissions.admin.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "admin.view", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(3)
+          .should("include.text", "admin.roles.permissions.settings.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 2);
+
+            cy.checkPermissionGroup(0, "settings.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "settings.update", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(4)
+          .should("include.text", "admin.roles.permissions.system.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "system.monitor", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(5)
+          .should("include.text", "admin.roles.permissions.users.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 6);
+
+            cy.checkPermissionGroup(0, "users.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "users.view", false, false, false);
+            cy.checkPermissionGroup(2, "users.update", false, false, false);
+            cy.checkPermissionGroup(3, "users.create", false, false, false);
+            cy.checkPermissionGroup(4, "users.delete", false, false, false);
+            cy.checkPermissionGroup(
+              5,
+              "users.updateOwnAttributes",
+              false,
+              false,
+              false,
+            );
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(6)
+          .should("include.text", "admin.roles.permissions.roles.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(0, "roles.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "roles.view", false, false, false);
+            cy.checkPermissionGroup(2, "roles.update", false, false, false);
+            cy.checkPermissionGroup(3, "roles.create", false, false, false);
+            cy.checkPermissionGroup(4, "roles.delete", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(7)
+          .should("include.text", "admin.roles.permissions.room_types.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 4);
+
+            cy.checkPermissionGroup(0, "roomTypes.view", false, false, false);
+            cy.checkPermissionGroup(1, "roomTypes.update", false, false, false);
+            cy.checkPermissionGroup(2, "roomTypes.create", false, false, false);
+            cy.checkPermissionGroup(3, "roomTypes.delete", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(8)
+          .should("include.text", "admin.roles.permissions.servers.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(0, "servers.viewAny", false, false, true);
+            cy.checkPermissionGroup(1, "servers.view", false, false, true);
+            cy.checkPermissionGroup(2, "servers.update", false, false, true);
+            cy.checkPermissionGroup(3, "servers.create", false, false, true);
+            cy.checkPermissionGroup(4, "servers.delete", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(9)
+          .should("include.text", "admin.roles.permissions.server_pools.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(
+              0,
+              "serverPools.viewAny",
+              false,
+              false,
+              true,
+            );
+            cy.checkPermissionGroup(1, "serverPools.view", false, false, true);
+            cy.checkPermissionGroup(
+              2,
+              "serverPools.update",
+              false,
+              false,
+              true,
+            );
+            cy.checkPermissionGroup(
+              3,
+              "serverPools.create",
+              false,
+              false,
+              true,
+            );
+            cy.checkPermissionGroup(
+              4,
+              "serverPools.delete",
+              false,
+              false,
+              true,
+            );
+          });
+
+        // Select permission that includes disabled permission
+        cy.get("#room_types\\.delete").click();
+
+        cy.get('[data-test="permission-category"]')
+          .eq(9)
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(
+              0,
+              "serverPools.viewAny",
+              false,
+              true,
+              true,
+            );
+            cy.checkPermissionGroup(1, "serverPools.view", false, false, true);
+            cy.checkPermissionGroup(
+              2,
+              "serverPools.update",
+              false,
+              false,
+              true,
+            );
+            cy.checkPermissionGroup(
+              3,
+              "serverPools.create",
+              false,
+              false,
+              true,
+            );
+            cy.checkPermissionGroup(
+              4,
+              "serverPools.delete",
+              false,
+              false,
+              true,
+            );
+          });
+      });
+
+    // Reload with different restricted permissions
+    cy.fixture("permissions.json").then((permissions) => {
+      permissions.meta.restrictions = [
+        "rooms.*",
+        "meetings.viewAny",
+        "admin.view",
+        "settings.*",
+        "users.*",
+        "roles.*",
+        "roomTypes.*",
+      ];
+
+      cy.intercept("GET", "api/v1/permissions", {
+        statusCode: 200,
+        body: permissions,
+      }).as("permissionsRequest");
+    });
+
+    cy.reload();
+
+    cy.wait("@permissionsRequest");
+
+    // Check that permission list is shown correctly
+    cy.get('[data-test="permission-list"]')
+      .should("be.visible")
+      .and("include.text", "admin.roles.permission_name")
+      .and("include.text", "admin.roles.permission_explicit")
+      .and("include.text", "admin.roles.permission_included")
+      .within(() => {
+        cy.get('[data-test="permission-category"]').should("have.length", 10);
+
+        cy.get('[data-test="permission-category"]')
+          .eq(0)
+          .should("include.text", "admin.roles.permissions.rooms.title")
+          .within(() => {
+            cy.checkPermissionGroup(0, "rooms.create", false, false, true);
+            cy.checkPermissionGroup(1, "rooms.viewAll", false, false, true);
+            cy.checkPermissionGroup(2, "rooms.manage", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(1)
+          .should("include.text", "admin.roles.permissions.meetings.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "meetings.viewAny", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(2)
+          .should("include.text", "admin.roles.permissions.admin.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "admin.view", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(3)
+          .should("include.text", "admin.roles.permissions.settings.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 2);
+
+            cy.checkPermissionGroup(0, "settings.viewAny", false, false, true);
+            cy.checkPermissionGroup(1, "settings.update", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(4)
+          .should("include.text", "admin.roles.permissions.system.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "system.monitor", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(5)
+          .should("include.text", "admin.roles.permissions.users.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 6);
+
+            cy.checkPermissionGroup(0, "users.viewAny", false, false, true);
+            cy.checkPermissionGroup(1, "users.view", false, false, true);
+            cy.checkPermissionGroup(2, "users.update", false, false, true);
+            cy.checkPermissionGroup(3, "users.create", false, false, true);
+            cy.checkPermissionGroup(4, "users.delete", false, false, true);
+            cy.checkPermissionGroup(
+              5,
+              "users.updateOwnAttributes",
+              false,
+              false,
+              true,
+            );
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(6)
+          .should("include.text", "admin.roles.permissions.roles.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(0, "roles.viewAny", false, false, true);
+            cy.checkPermissionGroup(1, "roles.view", false, false, true);
+            cy.checkPermissionGroup(2, "roles.update", false, false, true);
+            cy.checkPermissionGroup(3, "roles.create", false, false, true);
+            cy.checkPermissionGroup(4, "roles.delete", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(7)
+          .should("include.text", "admin.roles.permissions.room_types.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 4);
+
+            cy.checkPermissionGroup(0, "roomTypes.view", false, false, true);
+            cy.checkPermissionGroup(1, "roomTypes.update", false, false, true);
+            cy.checkPermissionGroup(2, "roomTypes.create", false, false, true);
+            cy.checkPermissionGroup(3, "roomTypes.delete", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(8)
+          .should("include.text", "admin.roles.permissions.servers.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(0, "servers.viewAny", false, false, false);
+            cy.checkPermissionGroup(1, "servers.view", false, false, false);
+            cy.checkPermissionGroup(2, "servers.update", false, false, false);
+            cy.checkPermissionGroup(3, "servers.create", false, false, false);
+            cy.checkPermissionGroup(4, "servers.delete", false, false, false);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(9)
+          .should("include.text", "admin.roles.permissions.server_pools.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(
+              0,
+              "serverPools.viewAny",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(1, "serverPools.view", false, false, false);
+            cy.checkPermissionGroup(
+              2,
+              "serverPools.update",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(
+              3,
+              "serverPools.create",
+              false,
+              false,
+              false,
+            );
+            cy.checkPermissionGroup(
+              4,
+              "serverPools.delete",
+              false,
+              false,
+              false,
+            );
+          });
+      });
+  });
+
+  it("add roles errors", function () {
+    cy.visit("/admin/roles/new");
+
+    cy.get("#name").should("have.value", "").type("Standard role");
+
+    // Check with 422 error
+    cy.intercept("POST", "api/v1/roles", {
+      statusCode: 422,
+      body: {
+        errors: {
+          name: ["The Name field is required."],
+          room_limit: ["The Room limit must be at least -1."],
+          permissions: ["The Permissions field must be present."],
+        },
+      },
+    }).as("newRoleRequest");
+
+    cy.get('[data-test="roles-save-button"]')
+      .should("have.text", "app.save")
+      .click();
+
+    cy.wait("@newRoleRequest");
+
+    // Check error messages
+    cy.get('[data-test="name-field"]')
+      .should("be.visible")
+      .and("include.text", "The Name field is required.");
+
+    cy.get('[data-test="room-limit-field"]')
+      .should("be.visible")
+      .and("include.text", "The Room limit must be at least -1.");
+
+    cy.contains("The Permissions field must be present.").should("be.visible");
+
+    // Check with 500 error
+    cy.intercept("POST", "api/v1/roles", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("newRoleRequest");
+
+    cy.get('[data-test="roles-save-button"]').click();
+
+    cy.wait("@newRoleRequest");
+
+    // Check error message
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that 422 error messages are hidden
+    cy.get('[data-test="name-field"]')
+      .should("be.visible")
+      .and("not.include.text", "The Name field is required.");
+
+    cy.get('[data-test="room-limit-field"]')
+      .should("be.visible")
+      .and("not.include.text", "The Room limit must be at least -1.");
+
+    cy.contains("The Permissions field must be present.").should("not.exist");
+
+    // Check with 401 error
+    cy.intercept("POST", "api/v1/roles", {
+      statusCode: 401,
+    }).as("newRoleRequest");
+
+    cy.get('[data-test="roles-save-button"]').click();
+
+    cy.wait("@newRoleRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/roles/new");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("load permissions errors", function () {
+    const permissionsRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/permissions",
+      { statusCode: 500, body: { message: "Test" } },
+      "permissionsRequest",
+    );
+
+    cy.visit("/admin/roles/new");
+
+    // Check loading
+    cy.get('[data-test="roles-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-delete-button"]').should("not.exist");
+    cy.get('[data-test="roles-save-button"]')
+      .should("be.visible")
+      .and("be.disabled");
+
+    cy.get('[data-test="overlay"]')
+      .should("be.visible")
+      .then(() => {
+        permissionsRequest.sendResponse();
+      });
+
+    cy.wait("@permissionsRequest");
+
+    // Check that loading is done
+    // Check that overlay is still shown because of error
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that buttons are still hidden
+    cy.get('[data-test="roles-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-delete-button"]').should("not.exist");
+    cy.get('[data-test="roles-save-button"]')
+      .should("be.visible")
+      .and("be.disabled");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Reload with correct data
+    cy.intercept("GET", "api/v1/permissions", {
+      statusCode: 200,
+      fixture: "permissions.json",
+    }).as("permissionsRequest");
+
+    cy.get('[data-test="loading-retry-button"]')
+      .should("be.visible")
+      .and("have.text", "app.reload")
+      .click();
+
+    cy.wait("@permissionsRequest");
+
+    // Check that overlay is not shown anymore
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
+
+    // Reload with 401 error
+    cy.intercept("GET", "api/v1/permissions", {
+      statusCode: 401,
+    }).as("permissionsRequest");
+
+    cy.visit("/admin/roles/new");
+
+    cy.wait("@permissionsRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/roles/new");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminRolesView.cy.js b/tests/Frontend/e2e/AdminRolesView.cy.js
new file mode 100644
index 000000000..316571ec8
--- /dev/null
+++ b/tests/Frontend/e2e/AdminRolesView.cy.js
@@ -0,0 +1,962 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin roles view", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminRolesViewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "roles.view",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin/roles/2");
+  });
+
+  it("visit with user without permission to view roles", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view", "roles.viewAny"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+    cy.visit("/admin/roles/2");
+
+    cy.checkToastMessage("app.flash.unauthorized");
+
+    // Check if welcome page is shown
+    cy.url().should("not.include", "/admin/room_types/3");
+    cy.get("h1").should("be.visible").and("include.text", "home.title");
+  });
+
+  it("check rolesView shown correctly", function () {
+    const roleRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/roles/2",
+      { fixture: "role.json" },
+      "roleRequest",
+    );
+
+    cy.visit("/admin/roles/2");
+
+    cy.contains("admin.title");
+
+    // Check loading
+    cy.get('[data-test="roles-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-delete-button"]').should("not.exist");
+    cy.get('[data-test="roles-save-button"]').should("not.exist");
+
+    cy.get('[data-test="overlay"]')
+      .should("be.visible")
+      .then(() => {
+        roleRequest.sendResponse();
+      });
+
+    cy.wait("@roleRequest");
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that buttons are still hidden
+    cy.get('[data-test="roles-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-delete-button"]').should("not.exist");
+    cy.get('[data-test="roles-save-button"]').should("not.exist");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.roles.index")
+      .should("include.text", 'admin.breakcrumbs.roles.view_{"name":"Staff"}');
+
+    // Check that role data is shown correctly
+    cy.get('[data-test="name-field"]')
+      .should("be.visible")
+      .and("include.text", "app.model_name")
+      .within(() => {
+        cy.get("#name").should("have.value", "Staff").and("be.disabled");
+      });
+
+    cy.get('[data-test="roles-room-limit-help-dialog"]').should("not.exist");
+    cy.get('[data-test="room-limit-field"]')
+      .should("be.visible")
+      .and("include.text", "app.room_limit")
+      .within(() => {
+        cy.get('[data-test="room-limit-mode-default-field"]')
+          .should("be.visible")
+          .should(
+            "include.text",
+            'admin.roles.room_limit.default_{"value":"app.unlimited"}',
+          )
+          .within(() => {
+            cy.get("#default").should("be.checked").and("be.disabled");
+          });
+
+        cy.get('[data-test="room-limit-mode-unlimited-field"]')
+          .should("be.visible")
+          .should("include.text", "app.unlimited")
+          .within(() => {
+            cy.get("#unlimited").should("not.be.checked").and("be.disabled");
+          });
+
+        cy.get('[data-test="room-limit-mode-custom-field"]')
+          .should("be.visible")
+          .should("include.text", "admin.roles.room_limit.custom")
+          .within(() => {
+            cy.get("#custom").should("not.be.checked").and("be.disabled");
+          });
+        cy.get("#room-limit").should("not.exist");
+
+        // Open room limit help dialog
+        cy.get('[data-test="roles-room-limit-help-button"]').click();
+      });
+
+    cy.checkRoomLimitHelpDialog();
+
+    cy.get('[data-test="roles-room-limit-help-dialog"]').should("not.exist");
+
+    // Check that permissions are shown correctly
+    cy.contains("admin.roles.permissions_title").should("be.visible");
+
+    cy.get('[data-test="permission-list"]')
+      .should("be.visible")
+      .and("include.text", "admin.roles.permission_name")
+      .and("include.text", "admin.roles.permission_explicit")
+      .and("include.text", "admin.roles.permission_included")
+      .within(() => {
+        cy.get('[data-test="permission-category"]').should("have.length", 10);
+
+        cy.get('[data-test="permission-category"]')
+          .eq(0)
+          .should("include.text", "admin.roles.permissions.rooms.title")
+          .within(() => {
+            cy.checkPermissionGroup(0, "rooms.create", true, true, true);
+            cy.checkPermissionGroup(1, "rooms.viewAll", true, true, true);
+            cy.checkPermissionGroup(2, "rooms.manage", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(1)
+          .should("include.text", "admin.roles.permissions.meetings.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "meetings.viewAny", true, true, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(2)
+          .should("include.text", "admin.roles.permissions.admin.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "admin.view", false, true, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(3)
+          .should("include.text", "admin.roles.permissions.settings.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 2);
+
+            cy.checkPermissionGroup(0, "settings.viewAny", false, false, true);
+            cy.checkPermissionGroup(1, "settings.update", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(4)
+          .should("include.text", "admin.roles.permissions.system.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "system.monitor", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(5)
+          .should("include.text", "admin.roles.permissions.users.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 6);
+
+            cy.checkPermissionGroup(0, "users.viewAny", true, true, true);
+            cy.checkPermissionGroup(1, "users.view", false, false, true);
+            cy.checkPermissionGroup(2, "users.update", false, false, true);
+            cy.checkPermissionGroup(3, "users.create", false, false, true);
+            cy.checkPermissionGroup(4, "users.delete", false, false, true);
+            cy.checkPermissionGroup(
+              5,
+              "users.updateOwnAttributes",
+              false,
+              false,
+              true,
+            );
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(6)
+          .should("include.text", "admin.roles.permissions.roles.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(0, "roles.viewAny", false, true, true);
+            cy.checkPermissionGroup(1, "roles.view", false, false, true);
+            cy.checkPermissionGroup(2, "roles.update", false, false, true);
+            cy.checkPermissionGroup(3, "roles.create", false, false, true);
+            cy.checkPermissionGroup(4, "roles.delete", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(7)
+          .should("include.text", "admin.roles.permissions.room_types.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 4);
+
+            cy.checkPermissionGroup(0, "roomTypes.view", false, true, true);
+            cy.checkPermissionGroup(1, "roomTypes.update", true, true, true);
+            cy.checkPermissionGroup(2, "roomTypes.create", true, true, true);
+            cy.checkPermissionGroup(3, "roomTypes.delete", true, true, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(8)
+          .should("include.text", "admin.roles.permissions.servers.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(0, "servers.viewAny", false, false, true);
+            cy.checkPermissionGroup(1, "servers.view", false, false, true);
+            cy.checkPermissionGroup(2, "servers.update", false, false, true);
+            cy.checkPermissionGroup(3, "servers.create", false, false, true);
+            cy.checkPermissionGroup(4, "servers.delete", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(9)
+          .should("include.text", "admin.roles.permissions.server_pools.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(
+              0,
+              "serverPools.viewAny",
+              false,
+              true,
+              true,
+            );
+            cy.checkPermissionGroup(1, "serverPools.view", false, false, true);
+            cy.checkPermissionGroup(
+              2,
+              "serverPools.update",
+              false,
+              false,
+              true,
+            );
+            cy.checkPermissionGroup(
+              3,
+              "serverPools.create",
+              false,
+              false,
+              true,
+            );
+            cy.checkPermissionGroup(
+              4,
+              "serverPools.delete",
+              false,
+              false,
+              true,
+            );
+          });
+      });
+  });
+
+  it("check rolesView with no permissions available", function () {
+    cy.intercept("GET", "api/v1/permissions", {
+      statusCode: 200,
+      body: {
+        data: [],
+        meta: { restrictions: [""] },
+      },
+    }).as("permissionsRequest");
+
+    cy.visit("/admin/roles/2");
+
+    cy.wait("@permissionsRequest");
+
+    cy.get('[data-test="name-field"]')
+      .should("be.visible")
+      .and("include.text", "app.model_name")
+      .within(() => {
+        cy.get("#name").should("have.value", "Staff").and("be.disabled");
+      });
+
+    cy.get('[data-test="room-limit-field"]')
+      .should("be.visible")
+      .and("include.text", "app.room_limit")
+      .within(() => {
+        cy.get('[data-test="room-limit-mode-default-field"]')
+          .should("be.visible")
+          .should(
+            "include.text",
+            'admin.roles.room_limit.default_{"value":"app.unlimited"}',
+          )
+          .within(() => {
+            cy.get("#default").should("be.checked").and("be.disabled");
+          });
+
+        cy.get('[data-test="room-limit-mode-unlimited-field"]')
+          .should("be.visible")
+          .should("include.text", "app.unlimited")
+          .within(() => {
+            cy.get("#unlimited").should("not.be.checked").and("be.disabled");
+          });
+
+        cy.get('[data-test="room-limit-mode-custom-field"]')
+          .should("be.visible")
+          .should("include.text", "admin.roles.room_limit.custom")
+          .within(() => {
+            cy.get("#custom").should("not.be.checked").and("be.disabled");
+          });
+        cy.get("#room-limit").should("not.exist");
+      });
+    // Check that permissions are shown correctly
+    cy.contains("admin.roles.permissions_title").should("be.visible");
+
+    cy.get('[data-test="permission-list"]').should("not.exist");
+
+    cy.contains("admin.roles.no_options").should("be.visible");
+  });
+
+  it("check rolesView with different permission dependencies", function () {
+    cy.fixture("permissions.json").then((permissions) => {
+      permissions.data[18].included_permissions = [];
+      permissions.data[19].included_permissions = [];
+      permissions.data[20].included_permissions = [];
+      permissions.data[21].included_permissions = [];
+
+      cy.intercept("GET", "api/v1/permissions", {
+        statusCode: 200,
+        body: permissions,
+      }).as("permissionsRequest");
+    });
+
+    cy.visit("/admin/roles/2");
+
+    cy.wait("@roleRequest");
+    cy.wait("@permissionsRequest");
+
+    // Check that permissions are shown correctly
+    cy.contains("admin.roles.permissions_title").should("be.visible");
+
+    cy.get('[data-test="permission-list"]')
+      .should("be.visible")
+      .and("include.text", "admin.roles.permission_name")
+      .and("include.text", "admin.roles.permission_explicit")
+      .and("include.text", "admin.roles.permission_included")
+      .within(() => {
+        cy.get('[data-test="permission-category"]').should("have.length", 10);
+
+        cy.get('[data-test="permission-category"]')
+          .eq(0)
+          .should("include.text", "admin.roles.permissions.rooms.title")
+          .within(() => {
+            cy.checkPermissionGroup(0, "rooms.create", true, true, true);
+            cy.checkPermissionGroup(1, "rooms.viewAll", true, true, true);
+            cy.checkPermissionGroup(2, "rooms.manage", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(1)
+          .should("include.text", "admin.roles.permissions.meetings.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "meetings.viewAny", true, true, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(2)
+          .should("include.text", "admin.roles.permissions.admin.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "admin.view", false, true, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(3)
+          .should("include.text", "admin.roles.permissions.settings.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 2);
+
+            cy.checkPermissionGroup(0, "settings.viewAny", false, false, true);
+            cy.checkPermissionGroup(1, "settings.update", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(4)
+          .should("include.text", "admin.roles.permissions.system.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 1);
+
+            cy.checkPermissionGroup(0, "system.monitor", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(5)
+          .should("include.text", "admin.roles.permissions.users.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 6);
+
+            cy.checkPermissionGroup(0, "users.viewAny", true, true, true);
+            cy.checkPermissionGroup(1, "users.view", false, false, true);
+            cy.checkPermissionGroup(2, "users.update", false, false, true);
+            cy.checkPermissionGroup(3, "users.create", false, false, true);
+            cy.checkPermissionGroup(4, "users.delete", false, false, true);
+            cy.checkPermissionGroup(
+              5,
+              "users.updateOwnAttributes",
+              false,
+              false,
+              true,
+            );
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(6)
+          .should("include.text", "admin.roles.permissions.roles.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(0, "roles.viewAny", false, true, true);
+            cy.checkPermissionGroup(1, "roles.view", false, false, true);
+            cy.checkPermissionGroup(2, "roles.update", false, false, true);
+            cy.checkPermissionGroup(3, "roles.create", false, false, true);
+            cy.checkPermissionGroup(4, "roles.delete", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(7)
+          .should("include.text", "admin.roles.permissions.room_types.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 4);
+
+            cy.checkPermissionGroup(0, "roomTypes.view", false, false, true);
+            cy.checkPermissionGroup(1, "roomTypes.update", true, true, true);
+            cy.checkPermissionGroup(2, "roomTypes.create", true, true, true);
+            cy.checkPermissionGroup(3, "roomTypes.delete", true, true, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(8)
+          .should("include.text", "admin.roles.permissions.servers.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(0, "servers.viewAny", false, false, true);
+            cy.checkPermissionGroup(1, "servers.view", false, false, true);
+            cy.checkPermissionGroup(2, "servers.update", false, false, true);
+            cy.checkPermissionGroup(3, "servers.create", false, false, true);
+            cy.checkPermissionGroup(4, "servers.delete", false, false, true);
+          });
+
+        cy.get('[data-test="permission-category"]')
+          .eq(9)
+          .should("include.text", "admin.roles.permissions.server_pools.title")
+          .within(() => {
+            cy.get('[data-test="permission-group"]').should("have.length", 5);
+
+            cy.checkPermissionGroup(
+              0,
+              "serverPools.viewAny",
+              false,
+              false,
+              true,
+            );
+            cy.checkPermissionGroup(1, "serverPools.view", false, false, true);
+            cy.checkPermissionGroup(
+              2,
+              "serverPools.update",
+              false,
+              false,
+              true,
+            );
+            cy.checkPermissionGroup(
+              3,
+              "serverPools.create",
+              false,
+              false,
+              true,
+            );
+            cy.checkPermissionGroup(
+              4,
+              "serverPools.delete",
+              false,
+              false,
+              true,
+            );
+          });
+      });
+  });
+
+  it("check rolesView with different room limit settings", function () {
+    // Check with different default
+    cy.fixture("config.json").then((config) => {
+      config.data.room.limit = 5;
+
+      cy.intercept("GET", "api/v1/config", {
+        statusCode: 200,
+        body: config,
+      });
+    });
+
+    cy.visit("/admin/roles/2");
+    cy.wait("@roleRequest");
+
+    cy.get('[data-test="room-limit-field"]')
+      .should("be.visible")
+      .and("include.text", "app.room_limit")
+      .within(() => {
+        cy.get('[data-test="room-limit-mode-default-field"]')
+          .should("be.visible")
+          .should("include.text", 'admin.roles.room_limit.default_{"value":5}')
+          .within(() => {
+            cy.get("#default").should("be.checked").and("be.disabled");
+          });
+
+        cy.get('[data-test="room-limit-mode-unlimited-field"]')
+          .should("be.visible")
+          .should("include.text", "app.unlimited")
+          .within(() => {
+            cy.get("#unlimited").should("not.be.checked").and("be.disabled");
+          });
+
+        cy.get('[data-test="room-limit-mode-custom-field"]')
+          .should("be.visible")
+          .should("include.text", "admin.roles.room_limit.custom")
+          .within(() => {
+            cy.get("#custom").should("not.be.checked").and("be.disabled");
+          });
+        cy.get("#room-limit").should("not.exist");
+      });
+
+    // Reload with room limit set to unlimited
+    cy.fixture("role.json").then((role) => {
+      role.data.room_limit = -1;
+
+      cy.intercept("GET", "api/v1/roles/2", {
+        statusCode: 200,
+        body: role,
+      }).as("roleRequest");
+    });
+
+    cy.reload();
+    cy.wait("@roleRequest");
+
+    cy.get('[data-test="room-limit-field"]')
+      .should("be.visible")
+      .and("include.text", "app.room_limit")
+      .within(() => {
+        cy.get('[data-test="room-limit-mode-default-field"]')
+          .should("be.visible")
+          .should("include.text", 'admin.roles.room_limit.default_{"value":5}')
+          .within(() => {
+            cy.get("#default").should("not.be.checked").and("be.disabled");
+          });
+
+        cy.get('[data-test="room-limit-mode-unlimited-field"]')
+          .should("be.visible")
+          .should("include.text", "app.unlimited")
+          .within(() => {
+            cy.get("#unlimited").should("be.checked").and("be.disabled");
+          });
+
+        cy.get('[data-test="room-limit-mode-custom-field"]')
+          .should("be.visible")
+          .should("include.text", "admin.roles.room_limit.custom")
+          .within(() => {
+            cy.get("#custom").should("not.be.checked").and("be.disabled");
+          });
+        cy.get("#room-limit").should("not.exist");
+      });
+
+    // Reload with room limit set to custom
+    cy.fixture("role.json").then((role) => {
+      role.data.room_limit = 2;
+
+      cy.intercept("GET", "api/v1/roles/2", {
+        statusCode: 200,
+        body: role,
+      }).as("roleRequest");
+    });
+
+    cy.reload();
+    cy.wait("@roleRequest");
+
+    cy.get('[data-test="room-limit-field"]')
+      .should("be.visible")
+      .and("include.text", "app.room_limit")
+      .within(() => {
+        cy.get('[data-test="room-limit-mode-default-field"]')
+          .should("be.visible")
+          .should("include.text", 'admin.roles.room_limit.default_{"value":5}')
+          .within(() => {
+            cy.get("#default").should("not.be.checked").and("be.disabled");
+          });
+
+        cy.get('[data-test="room-limit-mode-unlimited-field"]')
+          .should("be.visible")
+          .should("include.text", "app.unlimited")
+          .within(() => {
+            cy.get("#unlimited").should("not.be.checked").and("be.disabled");
+          });
+
+        cy.get('[data-test="room-limit-mode-custom-field"]')
+          .should("be.visible")
+          .should("include.text", "admin.roles.room_limit.custom")
+          .within(() => {
+            cy.get("#custom").should("be.checked").and("be.disabled");
+          });
+        cy.get("#room-limit")
+          .should("be.visible")
+          .and("have.value", "2")
+          .and("be.disabled");
+      });
+  });
+
+  it("load role errors", function () {
+    cy.intercept("GET", "api/v1/roles/2", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("roleRequest");
+
+    cy.visit("/admin/roles/2");
+
+    cy.wait("@roleRequest");
+    cy.wait("@permissionsRequest");
+
+    // Check that overlay is shown
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Reload with correct data
+    cy.intercept("GET", "api/v1/roles/2", {
+      statusCode: 200,
+      fixture: "role.json",
+    }).as("roleRequest");
+
+    cy.get('[data-test="loading-retry-button"]')
+      .should("be.visible")
+      .and("have.text", "app.reload")
+      .click();
+
+    cy.wait("@roleRequest");
+    cy.wait("@permissionsRequest");
+
+    // Check that overlay is not shown anymore
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
+
+    // Reload with 404 error
+    cy.interceptAdminRolesIndexRequests();
+
+    cy.intercept("GET", "api/v1/roles/2", {
+      statusCode: 404,
+      body: {
+        message: "No query results for model",
+      },
+    }).as("roleRequest");
+
+    cy.reload();
+
+    cy.wait("@roleRequest");
+    cy.wait("@permissionsRequest");
+
+    // Check that redirect worked
+    cy.url().should("not.include", "/admin/roles/2");
+    cy.url().should("include", "/admin/roles");
+
+    cy.wait("@rolesRequest");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"No query results for model"}',
+      'app.flash.server_error.error_code_{"statusCode":404}',
+    ]);
+
+    // Reload page with 401 error
+    cy.intercept("GET", "api/v1/roles/2", {
+      statusCode: 401,
+    }).as("roleRequest");
+
+    cy.visit("/admin/roles/2");
+
+    cy.wait("@roleRequest");
+    cy.wait("@permissionsRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/roles/2");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("load permissions errors", function () {
+    const permissionsRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/permissions",
+      { statusCode: 500, body: { message: "Test" } },
+      "permissionsRequest",
+    );
+
+    cy.visit("/admin/roles/2");
+    cy.wait("@roleRequest");
+
+    // Check loading
+    cy.get('[data-test="roles-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-delete-button"]').should("not.exist");
+    cy.get('[data-test="roles-save-button"]').should("not.exist");
+
+    cy.get('[data-test="overlay"]')
+      .should("be.visible")
+      .then(() => {
+        permissionsRequest.sendResponse();
+      });
+
+    cy.wait("@permissionsRequest");
+
+    // Check that loading is done
+    // Check that overlay is still shown because of error
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that buttons are still hidden
+    cy.get('[data-test="roles-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-delete-button"]').should("not.exist");
+    cy.get('[data-test="roles-save-button"]').should("not.exist");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Reload with correct data
+    cy.intercept("GET", "api/v1/permissions", {
+      statusCode: 200,
+      fixture: "permissions.json",
+    }).as("permissionsRequest");
+
+    cy.get('[data-test="loading-retry-button"]')
+      .should("be.visible")
+      .and("have.text", "app.reload")
+      .click();
+
+    cy.wait("@roleRequest");
+    cy.wait("@permissionsRequest");
+
+    // Check that overlay is not shown anymore
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
+
+    // Reload with 401 error
+    cy.intercept("GET", "api/v1/permissions", {
+      statusCode: 401,
+    }).as("permissionsRequest");
+
+    cy.visit("/admin/roles/2");
+
+    cy.wait("@roleRequest");
+    cy.wait("@permissionsRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/roles/2");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("check button visibility with update permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "roles.view",
+        "roles.update",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/roles/2");
+
+    cy.wait("@roleRequest");
+
+    cy.get('[data-test="roles-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-edit-button"]')
+      .should("be.visible")
+      .and("have.text", "app.edit")
+      .and("have.attr", "href", "/admin/roles/2/edit");
+    cy.get('[data-test="roles-delete-button"]').should("not.exist");
+    cy.get('[data-test="roles-save-button"]').should("not.exist");
+  });
+
+  it("check button visibility with delete permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "roles.view",
+        "roles.update",
+        "roles.create",
+        "roles.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/roles/2");
+
+    cy.wait("@roleRequest");
+
+    cy.get('[data-test="roles-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-edit-button"]')
+      .should("be.visible")
+      .and("have.text", "app.edit")
+      .and("have.attr", "href", "/admin/roles/2/edit");
+    cy.get('[data-test="roles-delete-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+    cy.get('[data-test="roles-save-button"]').should("not.exist");
+  });
+
+  it("check button visibility for user that is superuser", function () {
+    // Check when viewing role that is not a superuser role
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "roles.view",
+        "roles.create",
+        "roles.update",
+        "roles.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/roles/2");
+
+    cy.wait("@roleRequest");
+
+    cy.get('[data-test="roles-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.edit")
+      .and("have.attr", "href", "/admin/roles/2/edit");
+    cy.get('[data-test="roles-delete-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+
+    // Check when viewing role that is a superuser role
+    cy.fixture("role.json").then((role) => {
+      role.data.superuser = true;
+
+      cy.intercept("GET", "api/v1/roles/2", {
+        statusCode: 200,
+        body: role,
+      }).as("roleRequest");
+    });
+
+    cy.reload();
+
+    cy.wait("@roleRequest");
+
+    cy.get('[data-test="roles-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.edit")
+      .and("have.attr", "href", "/admin/roles/2/edit");
+    cy.get('[data-test="roles-delete-button"]').should("not.exist");
+  });
+
+  it("check button visibility for user that is no superuser", function () {
+    // Check when viewing role that is not a superuser role
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.superuser = false;
+
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "roles.view",
+        "roles.create",
+        "roles.update",
+        "roles.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/roles/2");
+
+    cy.wait("@roleRequest");
+
+    cy.get('[data-test="roles-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.edit")
+      .and("have.attr", "href", "/admin/roles/2/edit");
+    cy.get('[data-test="roles-delete-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+
+    // Check when viewing role that is a superuser role
+    cy.fixture("role.json").then((role) => {
+      role.data.superuser = true;
+
+      cy.intercept("GET", "api/v1/roles/2", {
+        statusCode: 200,
+        body: role,
+      }).as("roleRequest");
+    });
+
+    cy.reload();
+
+    cy.wait("@roleRequest");
+
+    cy.get('[data-test="roles-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="roles-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.edit")
+      .and("have.attr", "href", "/admin/roles/2/edit");
+    cy.get('[data-test="roles-delete-button"]').should("not.exist");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminRolesViewRoleActions.cy.js b/tests/Frontend/e2e/AdminRolesViewRoleActions.cy.js
new file mode 100644
index 000000000..0f4f99da8
--- /dev/null
+++ b/tests/Frontend/e2e/AdminRolesViewRoleActions.cy.js
@@ -0,0 +1,394 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin roles view role actions", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminRolesViewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "roles.view",
+        "roles.update",
+        "roles.create",
+        "roles.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("delete role", function () {
+    cy.visit("/admin/roles/2");
+
+    cy.wait("@roleRequest");
+
+    cy.get('[data-test="roles-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="roles-delete-button"]').click();
+
+    cy.get('[data-test="roles-delete-dialog"]').should("be.visible");
+
+    // Check that dialog shows correct data
+    cy.get('[data-test="roles-delete-dialog"]')
+      .should("include.text", "admin.roles.delete.title")
+      .should("include.text", 'admin.roles.delete.confirm_{"name":"Staff"}');
+
+    // Confirm deletion of role
+    const deleteRoleRequest = interceptIndefinitely(
+      "DELETE",
+      "api/v1/roles/2",
+      {
+        statusCode: 204,
+      },
+      "deleteRoleRequest",
+    );
+
+    cy.fixture("roles.json").then((roles) => {
+      roles.data = roles.data.filter((role) => role.id !== 2);
+      roles.meta.to = 2;
+      roles.meta.total = 2;
+      roles.meta.total_no_filter = 2;
+
+      cy.intercept("GET", "api/v1/roles*", {
+        statusCode: 200,
+        body: roles,
+      }).as("rolesRequest");
+    });
+
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("have.text", "app.yes")
+      .click();
+
+    // Check loading
+    cy.get('[data-test="dialog-cancel-button"]')
+      .should("have.text", "app.no")
+      .should("be.disabled");
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("be.disabled")
+      .then(() => {
+        deleteRoleRequest.sendResponse();
+      });
+
+    cy.wait("@deleteRoleRequest");
+    cy.wait("@rolesRequest");
+
+    // Check that redirect worked
+    cy.url().should("not.include", "/admin/roles/2");
+    cy.url().should("include", "/admin/roles");
+
+    // Check that role was deleted
+    cy.get('[data-test="role-item"]').should("have.length", 2);
+
+    // Check that dialog was closed
+    cy.get('[data-test="roles-delete-dialog"]').should("not.exist");
+  });
+
+  it("delete role errors", function () {
+    cy.visit("/admin/roles/2");
+
+    cy.wait("@roleRequest");
+
+    cy.get('[data-test="roles-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="roles-delete-button"]').click();
+
+    cy.get('[data-test="roles-delete-dialog"]').should("be.visible");
+
+    // Check with 500 error
+    cy.intercept("DELETE", "api/v1/roles/2", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("deleteRoleRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteRoleRequest");
+
+    // Check that dialog is still open and that error message is shown
+    cy.get('[data-test="roles-delete-dialog"]').should("be.visible");
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check with 464 error
+    cy.intercept("DELETE", "api/v1/roles/2", {
+      statusCode: 464,
+      body: {
+        message:
+          "The role is linked to users and therefore it can't be deleted!",
+      },
+    }).as("deleteRoleRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteRoleRequest");
+
+    // Check that dialog is still open and that error message is shown
+    cy.get('[data-test="roles-delete-dialog"]').should("be.visible");
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"The role is linked to users and therefore it can\'t be deleted!"}',
+      'app.flash.server_error.error_code_{"statusCode":464}',
+    ]);
+
+    // Check with 401 error
+    cy.intercept("DELETE", "api/v1/roles/2", {
+      statusCode: 401,
+    }).as("deleteRoleRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteRoleRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/roles/2");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("switch between edit and view", function () {
+    cy.visit("/admin/roles/2/edit");
+
+    cy.wait("@roleRequest");
+    cy.wait("@permissionsRequest");
+
+    // Check values and change them
+    cy.get("#name").should("have.value", "Staff").clear();
+    cy.get("#name").type("Staff 2");
+
+    cy.get("#default").should("be.checked");
+    cy.get("#unlimited").should("not.be.checked");
+    cy.get("#room-limit").should("not.exist");
+    cy.get("#custom").should("not.be.checked").click();
+    cy.get("#room-limit").should("exist").should("have.value", "0").type("10");
+
+    // Permission list
+    cy.checkPermissionGroup(0, "rooms.create", true, true, false);
+    cy.get("#rooms\\.create").click();
+    cy.checkPermissionGroup(1, "rooms.viewAll", true, true, false);
+    cy.get("#rooms\\.view_all").click();
+    cy.checkPermissionGroup(2, "rooms.manage", false, false, false);
+    cy.get("#rooms\\.manage").click();
+
+    cy.checkPermissionGroup(3, "meetings.viewAny", true, true, false);
+    cy.get("#meetings\\.view_any").click();
+    cy.checkPermissionGroup(4, "admin.view", false, true, false);
+    cy.get("#admin\\.view").click();
+
+    cy.checkPermissionGroup(5, "settings.viewAny", false, false, false);
+    cy.get("#settings\\.view_any").click();
+    cy.checkPermissionGroup(6, "settings.update", false, false, false);
+    cy.get("#settings\\.update").click();
+    cy.checkPermissionGroup(7, "system.monitor", false, false, false);
+    cy.get("#system\\.monitor").click();
+
+    cy.checkPermissionGroup(8, "users.viewAny", true, true, false);
+    cy.get("#users\\.view_any").click();
+    cy.checkPermissionGroup(9, "users.view", false, false, false);
+    cy.get("#users\\.view").click();
+    cy.checkPermissionGroup(10, "users.update", false, false, false);
+    cy.get("#users\\.update").click();
+    cy.checkPermissionGroup(11, "users.create", false, false, false);
+    cy.get("#users\\.create").click();
+    cy.checkPermissionGroup(12, "users.delete", false, false, false);
+    cy.get("#users\\.delete").click();
+    cy.checkPermissionGroup(
+      13,
+      "users.updateOwnAttributes",
+      false,
+      true,
+      false,
+    );
+    cy.get("#users\\.update_own_attributes").click();
+
+    cy.checkPermissionGroup(14, "roles.viewAny", false, true, false);
+    cy.get("#roles\\.view_any").click();
+    cy.checkPermissionGroup(15, "roles.view", false, false, false);
+    cy.get("#roles\\.view").click();
+    cy.checkPermissionGroup(16, "roles.update", false, false, false);
+    cy.get("#roles\\.update").click();
+    cy.checkPermissionGroup(17, "roles.create", false, false, false);
+    cy.get("#roles\\.create").click();
+    cy.checkPermissionGroup(18, "roles.delete", false, false, false);
+    cy.get("#roles\\.delete").click();
+
+    cy.checkPermissionGroup(19, "roomTypes.view", false, true, false);
+    cy.get("#room_types\\.view").click();
+    cy.checkPermissionGroup(20, "roomTypes.update", true, true, false);
+    cy.get("#room_types\\.update").click();
+    cy.checkPermissionGroup(21, "roomTypes.create", true, true, false);
+    cy.get("#room_types\\.create").click();
+    cy.checkPermissionGroup(22, "roomTypes.delete", true, true, false);
+    cy.get("#room_types\\.delete").click();
+
+    cy.checkPermissionGroup(23, "servers.viewAny", false, false, false);
+    cy.get("#servers\\.view_any").click();
+    cy.checkPermissionGroup(24, "servers.view", false, false, false);
+    cy.get("#servers\\.view").click();
+    cy.checkPermissionGroup(25, "servers.update", false, false, false);
+    cy.get("#servers\\.update").click();
+    cy.checkPermissionGroup(26, "servers.create", false, false, false);
+    cy.get("#servers\\.create").click();
+    cy.checkPermissionGroup(27, "servers.delete", false, false, false);
+    cy.get("#servers\\.delete").click();
+
+    cy.checkPermissionGroup(28, "serverPools.viewAny", false, false, false);
+    cy.get("#server_pools\\.view_any").click();
+    cy.checkPermissionGroup(29, "serverPools.view", false, false, false);
+    cy.get("#server_pools\\.view").click();
+    cy.checkPermissionGroup(30, "serverPools.update", false, false, false);
+    cy.get("#server_pools\\.update").click();
+    cy.checkPermissionGroup(31, "serverPools.create", false, false, false);
+    cy.get("#server_pools\\.create").click();
+    cy.checkPermissionGroup(32, "serverPools.delete", false, false, false);
+    cy.get("#server_pools\\.delete").click();
+
+    // Check that save button is shown
+    cy.get('[data-test="roles-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+
+    // Switch to view
+    cy.get('[data-test="roles-cancel-edit-button"]').click();
+
+    // Check if redirect worked
+    cy.url().should("include", "/admin/roles/2");
+    cy.url().should("not.include", "/edit");
+
+    cy.wait("@roleRequest");
+
+    // Check that changes were not saved
+    cy.get("#name").should("have.value", "Staff").and("be.disabled");
+
+    cy.get("#default").should("be.checked").and("be.disabled");
+    cy.get("#unlimited").should("not.be.checked").and("be.disabled");
+    cy.get("#room-limit").should("not.exist");
+    cy.get("#custom").should("not.be.checked").and("be.disabled");
+
+    // Permission list
+    cy.checkPermissionGroup(0, "rooms.create", true, true, true);
+    cy.checkPermissionGroup(1, "rooms.viewAll", true, true, true);
+    cy.checkPermissionGroup(2, "rooms.manage", false, false, true);
+
+    cy.checkPermissionGroup(3, "meetings.viewAny", true, true, true);
+    cy.checkPermissionGroup(4, "admin.view", false, true, true);
+
+    cy.checkPermissionGroup(5, "settings.viewAny", false, false, true);
+    cy.checkPermissionGroup(6, "settings.update", false, false, true);
+    cy.checkPermissionGroup(7, "system.monitor", false, false, true);
+
+    cy.checkPermissionGroup(8, "users.viewAny", true, true, true);
+    cy.checkPermissionGroup(9, "users.view", false, false, true);
+    cy.checkPermissionGroup(10, "users.update", false, false, true);
+    cy.checkPermissionGroup(11, "users.create", false, false, true);
+    cy.checkPermissionGroup(12, "users.delete", false, false, true);
+    cy.checkPermissionGroup(
+      13,
+      "users.updateOwnAttributes",
+      false,
+      false,
+      true,
+    );
+
+    cy.checkPermissionGroup(14, "roles.viewAny", false, true, true);
+    cy.checkPermissionGroup(15, "roles.view", false, false, true);
+    cy.checkPermissionGroup(16, "roles.update", false, false, true);
+    cy.checkPermissionGroup(17, "roles.create", false, false, true);
+    cy.checkPermissionGroup(18, "roles.delete", false, false, true);
+
+    cy.checkPermissionGroup(19, "roomTypes.view", false, true, true);
+    cy.checkPermissionGroup(20, "roomTypes.update", true, true, true);
+    cy.checkPermissionGroup(21, "roomTypes.create", true, true, true);
+    cy.checkPermissionGroup(22, "roomTypes.delete", true, true, true);
+
+    cy.checkPermissionGroup(23, "servers.viewAny", false, false, true);
+    cy.checkPermissionGroup(24, "servers.view", false, false, true);
+    cy.checkPermissionGroup(25, "servers.update", false, false, true);
+    cy.checkPermissionGroup(26, "servers.create", false, false, true);
+    cy.checkPermissionGroup(27, "servers.delete", false, false, true);
+
+    cy.checkPermissionGroup(28, "serverPools.viewAny", false, true, true);
+    cy.checkPermissionGroup(29, "serverPools.view", false, false, true);
+    cy.checkPermissionGroup(30, "serverPools.update", false, false, true);
+    cy.checkPermissionGroup(31, "serverPools.create", false, false, true);
+    cy.checkPermissionGroup(32, "serverPools.delete", false, false, true);
+
+    // Check that save button is not visible
+    cy.get('[data-test="roles-save-button"]').should("not.exist");
+
+    // Switch back to edit page
+    cy.get('[data-test="roles-edit-button"]').click();
+
+    // Check if redirect worked
+    cy.url().should("include", "/admin/roles/2/edit");
+
+    cy.wait("@roleRequest");
+
+    // Check that original values are shown
+    cy.get("#name").should("have.value", "Staff");
+
+    cy.get("#default").should("be.checked");
+    cy.get("#unlimited").should("not.be.checked");
+    cy.get("#room-limit").should("not.exist");
+    cy.get("#custom").should("not.be.checked");
+
+    // Permission list
+    cy.checkPermissionGroup(0, "rooms.create", true, true, false);
+    cy.checkPermissionGroup(1, "rooms.viewAll", true, true, false);
+    cy.checkPermissionGroup(2, "rooms.manage", false, false, false);
+
+    cy.checkPermissionGroup(3, "meetings.viewAny", true, true, false);
+    cy.checkPermissionGroup(4, "admin.view", false, true, false);
+
+    cy.checkPermissionGroup(5, "settings.viewAny", false, false, false);
+    cy.checkPermissionGroup(6, "settings.update", false, false, false);
+    cy.checkPermissionGroup(7, "system.monitor", false, false, false);
+
+    cy.checkPermissionGroup(8, "users.viewAny", true, true, false);
+    cy.checkPermissionGroup(9, "users.view", false, false, false);
+    cy.checkPermissionGroup(10, "users.update", false, false, false);
+    cy.checkPermissionGroup(11, "users.create", false, false, false);
+    cy.checkPermissionGroup(12, "users.delete", false, false, false);
+    cy.checkPermissionGroup(
+      13,
+      "users.updateOwnAttributes",
+      false,
+      false,
+      false,
+    );
+
+    cy.checkPermissionGroup(14, "roles.viewAny", false, true, false);
+    cy.checkPermissionGroup(15, "roles.view", false, false, false);
+    cy.checkPermissionGroup(16, "roles.update", false, false, false);
+    cy.checkPermissionGroup(17, "roles.create", false, false, false);
+    cy.checkPermissionGroup(18, "roles.delete", false, false, false);
+
+    cy.checkPermissionGroup(19, "roomTypes.view", false, true, false);
+    cy.checkPermissionGroup(20, "roomTypes.update", true, true, false);
+    cy.checkPermissionGroup(21, "roomTypes.create", true, true, false);
+    cy.checkPermissionGroup(22, "roomTypes.delete", true, true, false);
+
+    cy.checkPermissionGroup(23, "servers.viewAny", false, false, false);
+    cy.checkPermissionGroup(24, "servers.view", false, false, false);
+    cy.checkPermissionGroup(25, "servers.update", false, false, false);
+    cy.checkPermissionGroup(26, "servers.create", false, false, false);
+    cy.checkPermissionGroup(27, "servers.delete", false, false, false);
+
+    cy.checkPermissionGroup(28, "serverPools.viewAny", false, true, false);
+    cy.checkPermissionGroup(29, "serverPools.view", false, false, false);
+    cy.checkPermissionGroup(30, "serverPools.update", false, false, false);
+    cy.checkPermissionGroup(31, "serverPools.create", false, false, false);
+    cy.checkPermissionGroup(32, "serverPools.delete", false, false, false);
+
+    // Check that save button is shown
+    cy.get('[data-test="roles-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminRoomTypesEdit.cy.js b/tests/Frontend/e2e/AdminRoomTypesEdit.cy.js
new file mode 100644
index 000000000..8f72f7239
--- /dev/null
+++ b/tests/Frontend/e2e/AdminRoomTypesEdit.cy.js
@@ -0,0 +1,2573 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin room types edit", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminRoomTypesViewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "serverPools.viewAny",
+        "roomTypes.view",
+        "roomTypes.update",
+        "roomTypes.create",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin/room_types/3/edit");
+  });
+
+  it("visit with user without permission to edit room types", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view", "roomTypes.view"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/room_types/3/edit");
+
+    cy.checkToastMessage("app.flash.unauthorized");
+
+    // Check if welcome page is shown
+    cy.url().should("not.include", "/admin/room_types/3/edit");
+    cy.get("h1").should("be.visible").and("include.text", "home.title");
+  });
+
+  it("edit room type", function () {
+    const roomTypeRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/roomTypes/3",
+      { fixture: "roomType.json" },
+      "roomTypeRequest",
+    );
+
+    cy.visit("/admin/room_types/3/edit");
+
+    cy.contains("admin.title");
+
+    // Check loading
+    cy.get('[data-test="room-types-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="room-types-edit-button"]').should("not.exist");
+    cy.get('[data-test="room-types-delete-button"]').should("not.exist");
+    cy.get('[data-test="room-types-save-button"]').should("be.disabled");
+
+    cy.get('[data-test="overlay"]')
+      .should("be.visible")
+      .then(() => {
+        roomTypeRequest.sendResponse();
+      });
+
+    cy.wait("@roomTypeRequest");
+    cy.wait("@serverPoolsRequest");
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that correct buttons are shown
+    cy.get('[data-test="room-types-cancel-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.cancel_editing")
+      .and("have.attr", "href", "/admin/room_types/3");
+    cy.get('[data-test="room-types-edit-button"]').should("not.exist");
+    cy.get('[data-test="room-types-delete-button"]').should("not.exist");
+    cy.get('[data-test="room-types-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.save");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.room_types.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.room_types.edit_{"name":"Exam"}',
+      );
+
+    // Change room type settings
+    cy.get('[data-test="room-type-name-field"]')
+      .should("be.visible")
+      .and("include.text", "app.model_name")
+      .within(() => {
+        cy.get("#room-type-name").should("have.value", "Exam").clear();
+        cy.get("#room-type-name").type("Exam 01");
+      });
+
+    // Check that breadcrumbs stay the same
+
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.room_types.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.room_types.edit_{"name":"Exam"}',
+      );
+
+    cy.get('[data-test="description-field"]')
+      .should("be.visible")
+      .and("include.text", "app.description")
+      .within(() => {
+        cy.get("#description")
+          .should("have.value", "Room type description for room type Exam")
+          .clear();
+        cy.get("#description").type(
+          "New room type description for room type Exam 01",
+        );
+      });
+
+    cy.get('[data-test="color-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.room_types.color")
+      .and("include.text", "admin.room_types.custom_color")
+      .within(() => {
+        cy.get('[data-test="color-button"]').should("have.length", 10);
+
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should("have.attr", "role", "button")
+            .and(
+              "not.have.class",
+              "pointer-events-none cursor-not-allowed opacity-80",
+            )
+            .and("not.have.class", "selected");
+        }
+
+        // Clear custom color and check that color buttons are not selected
+        cy.get("#custom-color")
+          .should("have.value", "#4a5c66")
+          .and("not.be.disabled")
+          .clear();
+
+        // Set custom color and check that color button is selected
+        cy.get("#custom-color").type("#06b6d4");
+
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should(i === 2 ? "have.class" : "not.have.class", "selected");
+        }
+
+        // Click on color button and check that color button is selected
+        cy.get('[data-test="color-button"]').eq(7).click();
+
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should(i === 7 ? "have.class" : "not.have.class", "selected");
+        }
+
+        cy.get("#custom-color").should("have.value", "#ef4444");
+      });
+
+    cy.get('[data-test="preview-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.room_types.preview")
+      .within(() => {
+        cy.get('[data-test="room-type-badge"]')
+          .should("have.css", "background-color", "rgb(239, 68, 68)")
+          .and("have.text", "Exam 01");
+      });
+
+    cy.get(".multiselect__content").should("not.be.visible");
+    cy.get('[data-test="server-pool-field"]')
+      .should("be.visible")
+      .and("include.text", "app.server_pool")
+      .within(() => {
+        cy.get('[data-test="server-pool-dropdown"]').within(() => {
+          cy.get(".multiselect__tags").should("include.text", "Test").click();
+        });
+      });
+
+    // Check if correct options are shown
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").should("have.length", 4);
+    cy.get(".multiselect__option")
+      .eq(0)
+      .should("include.text", "Test")
+      .and("be.visible")
+      .and("have.class", "multiselect__option--selected");
+    cy.get(".multiselect__option")
+      .eq(1)
+      .should("include.text", "Production")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(2)
+      .should(
+        "include.text",
+        "No elements found. Consider changing the search query.",
+      )
+      .and("not.be.visible");
+
+    cy.get(".multiselect__option")
+      .eq(3)
+      .should("include.text", "admin.server_pools.no_data")
+      .and("not.be.visible");
+
+    cy.get(".multiselect__option").eq(1).click();
+
+    cy.get(".multiselect__content").should("not.be.visible");
+    cy.get('[data-test="server-pool-dropdown"]').within(() => {
+      cy.get(".multiselect__tags").should("include.text", "Production");
+    });
+
+    cy.get('[data-test="restrict-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.room_types.restrict")
+      .within(() => {
+        cy.get("#restrict").should("not.be.checked").and("not.be.disabled");
+      });
+
+    cy.get('[data-test="role-field"]').should("not.exist");
+
+    cy.get('[data-test="max-participants-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.room_types.max_participants")
+      .within(() => {
+        cy.get("#max-participants").should("have.value", "100").clear();
+        cy.get("#max-participants").type("50");
+        cy.get('[data-test="clear-max-participants-button"]')
+          .should("be.visible")
+          .and("not.be.disabled");
+      });
+
+    cy.get('[data-test="max-duration-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.room_types.max_duration")
+      .within(() => {
+        cy.get("#max-duration").should("have.value", "120 min.").clear();
+        cy.get("#max-duration").type("60");
+        cy.get('[data-test="clear-max-duration-button"]')
+          .should("be.visible")
+          .and("not.be.disabled");
+      });
+
+    // Change default and enforced values
+    cy.contains("admin.room_types.default_room_settings.title").should(
+      "be.visible",
+    );
+    cy.contains("rooms.settings.general.title").should("be.visible");
+
+    cy.get('[data-test="has-access-code-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.general.has_access_code")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "has-access-code",
+          true,
+          false,
+          false,
+        );
+      });
+
+    cy.get("#has-access-code-default").click();
+    cy.get('[data-test="has-access-code-enforced"]').click();
+
+    cy.get('[data-test="allow-guests-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.general.allow_guests")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "allow-guests",
+          true,
+          true,
+          false,
+        );
+      });
+
+    cy.get("#allow-guests-default").click();
+    cy.get('[data-test="allow-guests-enforced"]').click();
+
+    cy.contains("rooms.settings.video_conference.title").should("be.visible");
+
+    cy.get('[data-test="everyone-can-start-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.video_conference.everyone_can_start")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "everyone-can-start",
+          false,
+          false,
+          false,
+        );
+      });
+
+    cy.get("#everyone-can-start-default").click();
+    cy.get('[data-test="everyone-can-start-enforced"]').click();
+
+    cy.get('[data-test="mute-on-start-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.video_conference.mute_on_start")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "mute-on-start",
+          true,
+          true,
+          false,
+        );
+      });
+
+    cy.get("#mute-on-start-default").click();
+    cy.get('[data-test="mute-on-start-enforced"]').click();
+
+    cy.get('[data-test="lobby-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.video_conference.lobby.title")
+      .within(() => {
+        cy.get('[data-test="lobby-disabled-field"]')
+          .should("be.visible")
+          .and("include.text", "app.disabled")
+          .within(() => {
+            cy.get("#lobby-disabled")
+              .should("not.be.checked")
+              .and("not.be.disabled");
+          });
+
+        cy.get('[data-test="lobby-enabled-field"]')
+          .should("be.visible")
+          .and("include.text", "app.enabled")
+          .within(() => {
+            cy.get("#lobby-enabled")
+              .should("not.be.checked")
+              .and("not.be.disabled");
+          });
+
+        cy.get('[data-test="lobby-only-for-guests-field"]')
+          .should("be.visible")
+          .and(
+            "include.text",
+            "rooms.settings.video_conference.lobby.only_for_guests_enabled",
+          )
+          .within(() => {
+            cy.get("#lobby-only-for-guests")
+              .should("be.checked")
+              .and("not.be.disabled");
+          });
+
+        cy.get('[data-test="lobby-enforced"]')
+          .should(
+            "have.text",
+            "admin.room_types.default_room_settings.enforced",
+          )
+          .and("not.be.disabled");
+      });
+
+    cy.get("#lobby-disabled").click();
+    cy.get('[data-test="lobby-enforced"]').click();
+
+    cy.contains("rooms.settings.recordings.title").should("be.visible");
+
+    cy.get('[data-test="record-attendance-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.recordings.record_attendance")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "record-attendance",
+          false,
+          false,
+          false,
+        );
+      });
+
+    cy.get("#record-attendance-default").click();
+    cy.get('[data-test="record-attendance-enforced"]').click();
+
+    cy.get('[data-test="record-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.recordings.record_video_conference")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "record",
+          false,
+          false,
+          false,
+        );
+      });
+
+    cy.get("#record-default").click();
+    cy.get('[data-test="record-enforced"]').click();
+
+    cy.get('[data-test="auto-start-recording-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.recordings.auto_start_recording")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "auto-start-recording",
+          false,
+          false,
+          false,
+        );
+      });
+
+    cy.get("#auto-start-recording-default").click();
+    cy.get('[data-test="auto-start-recording-enforced"]').click();
+
+    cy.contains("rooms.settings.restrictions.title").should("be.visible");
+
+    cy.get('[data-test="disable-cam-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "rooms.settings.restrictions.lock_settings_disable_cam",
+      )
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "disable-cam",
+          false,
+          false,
+          false,
+        );
+      });
+
+    cy.get("#disable-cam-default").click();
+    cy.get('[data-test="disable-cam-enforced"]').click();
+
+    cy.get('[data-test="webcams-only-for-moderator-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "rooms.settings.restrictions.webcams_only_for_moderator",
+      )
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "webcams-only-for-moderator",
+          true,
+          false,
+          false,
+        );
+      });
+
+    cy.get("#webcams-only-for-moderator-default").click();
+    cy.get('[data-test="webcams-only-for-moderator-enforced"]').click();
+
+    cy.get('[data-test="disable-mic-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "rooms.settings.restrictions.lock_settings_disable_mic",
+      )
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "disable-mic",
+          false,
+          true,
+          false,
+        );
+      });
+
+    cy.get("#disable-mic-default").click();
+    cy.get('[data-test="disable-mic-enforced"]').click();
+
+    cy.get('[data-test="disable-public-chat-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "rooms.settings.restrictions.lock_settings_disable_public_chat",
+      )
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "disable-public-chat",
+          true,
+          false,
+          false,
+        );
+      });
+
+    cy.get("#disable-public-chat-default").click();
+    cy.get('[data-test="disable-public-chat-enforced"]').click();
+
+    cy.get('[data-test="disable-private-chat-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "rooms.settings.restrictions.lock_settings_disable_private_chat",
+      )
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "disable-private-chat",
+          false,
+          false,
+          false,
+        );
+      });
+
+    cy.get("#disable-private-chat-default").click();
+    cy.get('[data-test="disable-private-chat-enforced"]').click();
+
+    cy.get('[data-test="disable-note-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "rooms.settings.restrictions.lock_settings_disable_note",
+      )
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "disable-note",
+          true,
+          true,
+          false,
+        );
+      });
+
+    cy.get("#disable-note-default").click();
+    cy.get('[data-test="disable-note-enforced"]').click();
+
+    cy.get('[data-test="hide-user-list-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "rooms.settings.restrictions.lock_settings_hide_user_list",
+      )
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "hide-user-list",
+          true,
+          false,
+          false,
+        );
+      });
+
+    cy.get("#hide-user-list-default").click();
+    cy.get('[data-test="hide-user-list-enforced"]').click();
+
+    cy.contains("rooms.settings.participants.title").should("be.visible");
+
+    cy.get('[data-test="allow-membership-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.participants.allow_membership")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "allow-membership",
+          false,
+          true,
+          false,
+        );
+      });
+
+    cy.get("#allow-membership-default").click();
+    cy.get('[data-test="allow-membership-enforced"]').click();
+
+    cy.get('[data-test="default-role-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.participants.default_role.title")
+      .and(
+        "include.text",
+        "rooms.settings.participants.default_role.only_logged_in",
+      )
+      .within(() => {
+        cy.get('[data-test="default-role-default-button"]').should(
+          "have.length",
+          2,
+        );
+
+        cy.get('[data-test="default-role-default-button"]')
+          .eq(0)
+          .should("have.text", "rooms.roles.participant")
+          .and("have.attr", "aria-pressed", "true")
+          .and("not.be.disabled");
+
+        cy.get('[data-test="default-role-default-button"]')
+          .eq(1)
+          .should("have.text", "rooms.roles.moderator")
+          .and("not.have.attr", "aria-pressed", "true")
+          .and("not.be.disabled");
+
+        cy.get('[data-test="default-role-enforced"]')
+          .should("have.text", "admin.room_types.default_room_settings.default")
+          .and("not.be.disabled");
+      });
+
+    cy.get('[data-test="default-role-default-button"]').eq(1).click();
+    cy.get('[data-test="default-role-enforced"]').click();
+
+    cy.contains("rooms.settings.advanced.title").should("be.visible");
+
+    cy.get('[data-test="visibility-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.advanced.visibility")
+      .within(() => {
+        cy.get('[data-test="visibility-default-button"]').should(
+          "have.length",
+          2,
+        );
+
+        cy.get('[data-test="visibility-default-button"]')
+          .eq(0)
+          .should("have.text", "rooms.settings.advanced.visibility.private")
+          .and("not.have.attr", "aria-pressed", "true")
+          .and("not.be.disabled");
+
+        cy.get('[data-test="visibility-default-button"]')
+          .eq(1)
+          .should("have.text", "rooms.settings.advanced.visibility.public")
+          .and("have.attr", "aria-pressed", "true")
+          .and("not.be.disabled");
+
+        cy.get('[data-test="visibility-enforced"]')
+          .should("have.text", "admin.room_types.default_room_settings.default")
+          .and("not.be.disabled");
+      });
+
+    cy.get('[data-test="visibility-default-button"]').eq(0).click();
+    cy.get('[data-test="visibility-enforced"]').click();
+
+    // Change other settings
+    cy.contains("admin.room_types.bbb_api.title").should("be.visible");
+
+    cy.get('[data-test="create-parameters-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.room_types.bbb_api.create_parameters")
+      .and(
+        "include.text",
+        "admin.room_types.bbb_api.create_parameters_description",
+      )
+      .within(() => {
+        cy.get("#create-parameters")
+          .should(
+            "have.value",
+            "meetingLayout=PRESENTATION_FOCUS\nmeta_category=FINANCE\ndisabledFeatures=learningDashboard,virtualBackgrounds",
+          )
+          .clear();
+
+        cy.get("#create-parameters").type("meetingLayout=PRESENTATION_FOCUS");
+      });
+
+    cy.fixture("roomType.json").then((roomType) => {
+      roomType.data.name = "Exam 01";
+      roomType.data.description =
+        "New room type description for room type Exam 01";
+      roomType.data.color = "#ef4444";
+      roomType.data.server_pool = {
+        id: 2,
+        name: "Production",
+        description: "Pool for production",
+        servers_count: 1,
+        model_name: "ServerPool",
+        updated_at: "2020-12-21T13:43:21.000000Z",
+      };
+      roomType.data.max_participants = 50;
+      roomType.data.max_duration = 60;
+      roomType.data.create_parameters = "meetingLayout=PRESENTATION_FOCUS";
+      roomType.data.restrict = false;
+      roomType.data.roles = [];
+      roomType.data.mute_on_start_default = false;
+      roomType.data.mute_on_start_enforced = false;
+      roomType.data.lock_settings_disable_cam_default = true;
+      roomType.data.lock_settings_disable_cam_enforced = true;
+      roomType.data.webcams_only_for_moderator_default = false;
+      roomType.data.webcams_only_for_moderator_enforced = true;
+      roomType.data.lock_settings_disable_mic_default = true;
+      roomType.data.lock_settings_disable_mic_enforced = false;
+      roomType.data.lock_settings_disable_private_chat_default = true;
+      roomType.data.lock_settings_disable_private_chat_enforced = true;
+      roomType.data.lock_settings_disable_public_chat_default = false;
+      roomType.data.lock_settings_disable_public_chat_enforced = true;
+      roomType.data.lock_settings_disable_note_default = false;
+      roomType.data.lock_settings_disable_note_enforced = false;
+      roomType.data.lock_settings_hide_user_list_default = false;
+      roomType.data.lock_settings_hide_user_list_enforced = true;
+      roomType.data.everyone_can_start_default = true;
+      roomType.data.everyone_can_start_enforced = true;
+      roomType.data.allow_membership_default = true;
+      roomType.data.allow_membership_enforced = false;
+      roomType.data.allow_guests_default = false;
+      roomType.data.allow_guests_enforced = false;
+      roomType.data.default_role_default = 2;
+      roomType.data.default_role_enforced = true;
+      roomType.data.lobby_default = 0;
+      roomType.data.lobby_enforced = false;
+      roomType.data.visibility_default = 0;
+      roomType.data.visibility_enforced = true;
+      roomType.data.record_attendance_default = true;
+      roomType.data.record_attendance_enforced = true;
+      roomType.data.record_default = true;
+      roomType.data.record_enforced = true;
+      roomType.data.auto_start_recording_default = true;
+      roomType.data.auto_start_recording_enforced = true;
+      roomType.data.has_access_code_default = false;
+      roomType.data.has_access_code_enforced = true;
+
+      const saveChangesRequest = interceptIndefinitely(
+        "PUT",
+        "api/v1/roomTypes/3",
+        {
+          statusCode: 201,
+          body: roomType,
+        },
+        "saveChangesRequest",
+      );
+
+      cy.intercept("GET", "api/v1/roomTypes/3", {
+        statusCode: 200,
+        body: roomType,
+      }).as("roomTypeRequest");
+
+      cy.get('[data-test="overlay"]').should("not.exist");
+
+      cy.get('[data-test="room-types-save-button"]')
+        .should("have.text", "app.save")
+        .click();
+
+      // Check loading
+      cy.get('[data-test="overlay"]').should("be.visible");
+      cy.get("#room-type-name").should("be.disabled");
+      cy.get("#description").should("be.disabled");
+      for (let i = 0; i < 10; i++) {
+        cy.get('[data-test="color-button"]')
+          .eq(i)
+          .should("have.attr", "role", "button")
+          .and(
+            "have.class",
+            "pointer-events-none cursor-not-allowed opacity-80",
+          );
+      }
+      cy.get("#custom-color").should("be.disabled");
+      cy.get('[data-test="server-pool-dropdown"]').should(
+        "have.class",
+        "multiselect--disabled",
+      );
+
+      cy.get("#restrict").should("be.disabled");
+
+      cy.get("#max-participants").should("be.disabled");
+      cy.get('[data-test="clear-max-participants-button"]')
+        .should("be.visible")
+        .and("be.disabled");
+      cy.get("#max-duration").should("be.disabled");
+      cy.get('[data-test="clear-max-duration-button"]')
+        .should("be.visible")
+        .and("be.disabled");
+
+      cy.get("#has-access-code-default").should("be.disabled");
+      cy.get('[data-test="has-access-code-enforced"]').should("be.disabled");
+      cy.get("#allow-guests-default").should("be.disabled");
+      cy.get('[data-test="allow-guests-enforced"]').should("be.disabled");
+      cy.get("#everyone-can-start-default").should("be.disabled");
+      cy.get('[data-test="everyone-can-start-enforced"]').should("be.disabled");
+      cy.get("#mute-on-start-default").should("be.disabled");
+      cy.get('[data-test="mute-on-start-enforced"]').should("be.disabled");
+      cy.get("#lobby-disabled").should("be.disabled");
+      cy.get("#lobby-enabled").should("be.disabled");
+      cy.get("#lobby-only-for-guests").should("be.disabled");
+      cy.get('[data-test="lobby-enforced"]').should("be.disabled");
+      cy.get("#record-attendance-default").should("be.disabled");
+      cy.get('[data-test="record-attendance-enforced"]').should("be.disabled");
+      cy.get("#record-default").should("be.disabled");
+      cy.get('[data-test="record-enforced"]').should("be.disabled");
+      cy.get("#auto-start-recording-default").should("be.disabled");
+      cy.get('[data-test="auto-start-recording-enforced"]').should(
+        "be.disabled",
+      );
+      cy.get("#disable-cam-default").should("be.disabled");
+      cy.get('[data-test="disable-cam-enforced"]').should("be.disabled");
+      cy.get("#webcams-only-for-moderator-default").should("be.disabled");
+      cy.get('[data-test="webcams-only-for-moderator-enforced"]').should(
+        "be.disabled",
+      );
+      cy.get("#disable-mic-default").should("be.disabled");
+      cy.get('[data-test="disable-mic-enforced"]').should("be.disabled");
+      cy.get("#disable-public-chat-default").should("be.disabled");
+      cy.get('[data-test="disable-public-chat-enforced"]').should(
+        "be.disabled",
+      );
+      cy.get("#disable-private-chat-default").should("be.disabled");
+      cy.get('[data-test="disable-private-chat-enforced"]').should(
+        "be.disabled",
+      );
+      cy.get("#disable-note-default").should("be.disabled");
+      cy.get('[data-test="disable-note-enforced"]').should("be.disabled");
+      cy.get("#hide-user-list-default").should("be.disabled");
+      cy.get('[data-test="hide-user-list-enforced"]').should("be.disabled");
+      cy.get("#allow-membership-default").should("be.disabled");
+      cy.get('[data-test="allow-membership-enforced"]').should("be.disabled");
+      cy.get('[data-test="default-role-default-button"]').should(
+        "have.length",
+        2,
+      );
+      cy.get('[data-test="default-role-default-button"]')
+        .eq(0)
+        .should("be.disabled");
+      cy.get('[data-test="default-role-default-button"]')
+        .eq(1)
+        .should("be.disabled");
+      cy.get('[data-test="default-role-enforced"]').should("be.disabled");
+      cy.get('[data-test="visibility-default-button"]').should(
+        "have.length",
+        2,
+      );
+      cy.get('[data-test="visibility-default-button"]')
+        .eq(0)
+        .should("be.disabled");
+      cy.get('[data-test="visibility-default-button"]')
+        .eq(1)
+        .should("be.disabled");
+      cy.get('[data-test="visibility-enforced"]').should("be.disabled");
+
+      cy.get('[data-test="room-types-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          saveChangesRequest.sendResponse();
+        });
+
+      const roomTypeRequestData = { ...roomType.data };
+      roomTypeRequestData.server_pool = roomTypeRequestData.server_pool.id;
+
+      cy.wait("@saveChangesRequest").then((interception) => {
+        expect(interception.request.body).to.eql(roomTypeRequestData);
+      });
+    });
+
+    cy.wait("@roomTypeRequest");
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that room type view page is shown
+    cy.url().should("include", "/admin/room_types/3");
+    cy.url().should("not.include", "/edit");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.room_types.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.room_types.view_{"name":"Exam 01"}',
+      );
+  });
+
+  it("edit room type with restrictions", function () {
+    cy.fixture("roomType.json").then((roomType) => {
+      roomType.data.restrict = true;
+      roomType.data.roles = [
+        {
+          id: 1,
+          name: "Superuser",
+        },
+        {
+          id: 2,
+          name: "Staff",
+        },
+      ];
+
+      cy.intercept("GET", "api/v1/roomTypes/3", {
+        statusCode: 200,
+        body: roomType,
+      }).as("roomTypeRequest");
+    });
+
+    cy.visit("/admin/room_types/3/edit");
+    cy.wait("@roomTypeRequest");
+    cy.wait("@serverPoolsRequest");
+    cy.wait("@rolesRequest");
+
+    cy.get('[data-test="restrict-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.room_types.restrict")
+      .within(() => {
+        cy.get("#restrict").should("be.checked").and("not.be.disabled");
+      });
+
+    // Check role setting and change it
+    cy.get(".multiselect__content").should("not.be.visible");
+    cy.get('[data-test="role-field"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="role-dropdown"]').within(() => {
+          cy.get('[data-test="role-chip"]').should("have.length", 2);
+          cy.get('[data-test="role-chip"]')
+            .eq(0)
+            .should("include.text", "Superuser")
+            .find('[data-test="remove-role-button"]')
+            .should("be.visible");
+
+          cy.get('[data-test="role-chip"]')
+            .eq(1)
+            .should("include.text", "Staff")
+            .find('[data-test="remove-role-button"]')
+            .should("be.visible");
+        });
+        cy.get('[data-test="role-dropdown"]').click();
+      });
+
+    // Check if correct options are shown
+    cy.get(".multiselect__content")
+      .eq(1)
+      .should("be.visible")
+      .within(() => {
+        cy.get(".multiselect__option").should("have.length", 5);
+        cy.get(".multiselect__option")
+          .eq(0)
+          .should("include.text", "Superuser")
+          .and("include.text", "admin.roles.superuser")
+          .and("be.visible");
+        cy.get(".multiselect__option")
+          .eq(1)
+          .should("include.text", "Staff")
+          .and("be.visible");
+        cy.get(".multiselect__option")
+          .eq(2)
+          .should("include.text", "Students")
+          .and("be.visible");
+        cy.get(".multiselect__option")
+          .eq(3)
+          .should(
+            "include.text",
+            "No elements found. Consider changing the search query.",
+          )
+          .and("not.be.visible");
+        cy.get(".multiselect__option")
+          .eq(4)
+          .should("include.text", "admin.roles.no_data")
+          .and("not.be.visible");
+      });
+
+    // Switch to next page
+    const userRoleRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/roles*",
+      {
+        statusCode: 200,
+        body: {
+          data: [
+            {
+              id: 4,
+              name: "Dean",
+              default: false,
+              updated_at: "2021-01-08T15:51:08.000000Z",
+              model_name: "Role",
+              room_limit: 20,
+            },
+            {
+              id: 5,
+              name: "Faculty",
+              default: false,
+              updated_at: "2021-03-19T09:12:44.000000Z",
+              model_name: "Role",
+              room_limit: 20,
+            },
+            {
+              id: 6,
+              name: "Manager",
+              default: false,
+              updated_at: "2021-05-22T11:55:21.000000Z",
+              model_name: "Role",
+              room_limit: -1,
+            },
+          ],
+          meta: {
+            current_page: 2,
+            from: 4,
+            last_page: 2,
+            per_page: 3,
+            to: 6,
+            total: 6,
+          },
+        },
+      },
+      "rolesRequest",
+    );
+
+    cy.get(".multiselect__content")
+      .eq(1)
+
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="previous-page-button"]')
+          .should("include.text", "app.previous_page")
+          .and("be.disabled");
+        cy.get('[data-test="next-page-button"]')
+          .should("include.text", "app.next_page")
+          .and("not.be.disabled");
+
+        cy.get('[data-test="next-page-button"]').click();
+
+        // Check loading
+        cy.get('[data-test="previous-page-button"]').should("be.disabled");
+        cy.get('[data-test="next-page-button"]').should("be.disabled");
+      });
+
+    cy.get('[data-test="role-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="room-types-save-button"]')
+      .should("be.disabled")
+      .then(() => {
+        userRoleRequest.sendResponse();
+      });
+
+    cy.wait("@rolesRequest");
+
+    cy.get(".multiselect__content")
+      .eq(1)
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="previous-page-button"]').should("not.be.disabled");
+        cy.get('[data-test="next-page-button"]').should("be.disabled");
+
+        cy.get(".multiselect__option").should("have.length", 5);
+        cy.get(".multiselect__option")
+          .eq(0)
+          .should("include.text", "Dean")
+          .and("be.visible");
+        cy.get(".multiselect__option")
+          .eq(1)
+          .should("include.text", "Faculty")
+          .and("be.visible");
+        cy.get(".multiselect__option")
+          .eq(2)
+          .should("include.text", "Manager")
+          .and("be.visible");
+        cy.get(".multiselect__option")
+          .eq(3)
+          .should(
+            "include.text",
+            "No elements found. Consider changing the search query.",
+          )
+          .and("not.be.visible");
+        cy.get(".multiselect__option")
+          .eq(4)
+          .should("include.text", "admin.roles.no_data")
+          .and("not.be.visible");
+
+        // Select roles
+        cy.get(".multiselect__option").eq(0).click();
+        cy.get(".multiselect__option").eq(2).click();
+      });
+
+    // Check that roles are shown
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get('[data-test="role-dropdown"]').within(() => {
+      cy.get('[data-test="role-chip"]').should("have.length", 4);
+      cy.get('[data-test="role-chip"]')
+        .eq(0)
+        .should("include.text", "Superuser")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+
+      cy.get('[data-test="role-chip"]')
+        .eq(1)
+        .should("include.text", "Staff")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+      cy.get('[data-test="role-chip"]')
+        .eq(2)
+        .should("include.text", "Dean")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+
+      cy.get('[data-test="role-chip"]')
+        .eq(3)
+        .should("include.text", "Manager")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+
+      // Remove roles
+      cy.get('[data-test="role-chip"]')
+        .eq(0)
+        .find('[data-test="remove-role-button"]')
+        .click();
+      cy.get('[data-test="role-chip"]')
+        .eq(1)
+        .find('[data-test="remove-role-button"]')
+        .click();
+    });
+
+    cy.fixture("roomType.json").then((roomType) => {
+      roomType.data.restrict = true;
+      roomType.data.roles = [
+        {
+          id: 2,
+          name: "Staff",
+        },
+        {
+          id: 6,
+          name: "Manager",
+        },
+      ];
+
+      const saveChangesRequest = interceptIndefinitely(
+        "PUT",
+        "api/v1/roomTypes/3",
+        {
+          statusCode: 201,
+          body: roomType,
+        },
+        "saveChangesRequest",
+      );
+
+      cy.intercept("GET", "api/v1/roomTypes/3", {
+        statusCode: 200,
+        body: roomType,
+      }).as("roomTypeRequest");
+
+      cy.get('[data-test="overlay"]').should("not.exist");
+
+      cy.get('[data-test="room-types-save-button"]')
+        .should("have.text", "app.save")
+        .click();
+
+      // Check loading
+      cy.get('[data-test="overlay"]').should("be.visible");
+
+      cy.get("#restrict").should("be.disabled");
+      cy.get('[data-test="role-dropdown"]').should(
+        "have.class",
+        "multiselect--disabled",
+      );
+
+      cy.get('[data-test="room-types-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          saveChangesRequest.sendResponse();
+        });
+
+      const roomTypeRequestData = { ...roomType.data };
+      roomTypeRequestData.server_pool = roomTypeRequestData.server_pool.id;
+      roomTypeRequestData.roles = roomTypeRequestData.roles.map(
+        (role) => role.id,
+      );
+
+      cy.wait("@saveChangesRequest").then((interception) => {
+        expect(interception.request.body).to.eql(roomTypeRequestData);
+      });
+    });
+
+    cy.wait("@roomTypeRequest");
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that room type view page is shown
+    cy.url().should("include", "/admin/room_types/3");
+    cy.url().should("not.include", "/edit");
+  });
+
+  it("edit room type errors", function () {
+    cy.fixture("roomType.json").then((roomType) => {
+      roomType.data.restrict = true;
+      roomType.data.roles = [
+        {
+          id: 1,
+          name: "Superuser",
+        },
+        {
+          id: 2,
+          name: "Staff",
+        },
+      ];
+
+      cy.intercept("GET", "api/v1/roomTypes/3", {
+        statusCode: 200,
+        body: roomType,
+      }).as("roomTypeRequest");
+    });
+
+    cy.visit("/admin/room_types/3/edit");
+
+    cy.wait("@roomTypeRequest");
+    cy.wait("@serverPoolsRequest");
+    cy.wait("@rolesRequest");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.room_types.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.room_types.edit_{"name":"Exam"}',
+      );
+
+    // Check with 422 error
+    cy.intercept("PUT", "api/v1/roomTypes/3", {
+      statusCode: 422,
+      body: {
+        message: "The given data was invalid.",
+        errors: {
+          name: ["The name field is required."],
+          description: ["The description field is required."],
+          color: ["The color field is required."],
+          server_pool: ["The server pool field is required."],
+          max_participants: ["The max participants field is required."],
+          max_duration: ["The max duration field is required."],
+          create_parameters: ["The create parameters field is required."],
+          roles: ["The roles field is required."],
+          has_access_code_default: [
+            "The has access code default field is required.",
+          ],
+          has_access_code_enforced: [
+            "The has access code enforced field is required.",
+          ],
+          allow_guests_default: ["The allow guests default field is required."],
+          allow_guests_enforced: [
+            "The allow guests enforced field is required.",
+          ],
+          everyone_can_start_default: [
+            "The everyone can start default field is required.",
+          ],
+          everyone_can_start_enforced: [
+            "The everyone can start enforced field is required.",
+          ],
+          mute_on_start_default: [
+            "The mute on start default field is required.",
+          ],
+          mute_on_start_enforced: [
+            "The mute on start enforced field is required.",
+          ],
+          lobby_default: ["The lobby default field is required."],
+          lobby_enforced: ["The lobby enforced field is required."],
+          record_attendance_default: [
+            "The record attendance default field is required.",
+          ],
+          record_attendance_enforced: [
+            "The record attendance enforced field is required.",
+          ],
+          record_default: ["The record default field is required."],
+          record_enforced: ["The record enforced field is required."],
+          auto_start_recording_default: [
+            "The auto start recording default field is required.",
+          ],
+          auto_start_recording_enforced: [
+            "The auto start recording enforced field is required.",
+          ],
+          lock_settings_disable_cam_default: [
+            "The lock settings disable cam default field is required.",
+          ],
+          lock_settings_disable_cam_enforced: [
+            "The lock settings disable cam enforced field is required.",
+          ],
+          webcams_only_for_moderator_default: [
+            "The webcams only for moderator default field is required.",
+          ],
+          webcams_only_for_moderator_enforced: [
+            "The webcams only for moderator enforced field is required.",
+          ],
+          lock_settings_disable_mic_default: [
+            "The lock settings disable mic default field is required.",
+          ],
+          lock_settings_disable_mic_enforced: [
+            "The lock settings disable mic enforced field is required.",
+          ],
+          lock_settings_disable_public_chat_default: [
+            "The lock settings disable public chat default field is required.",
+          ],
+          lock_settings_disable_public_chat_enforced: [
+            "The lock settings disable public chat enforced field is required.",
+          ],
+          lock_settings_disable_private_chat_default: [
+            "The lock settings disable private chat default field is required.",
+          ],
+          lock_settings_disable_private_chat_enforced: [
+            "The lock settings disable private chat enforced field is required.",
+          ],
+          lock_settings_disable_note_default: [
+            "The lock settings disable note default field is required.",
+          ],
+          lock_settings_disable_note_enforced: [
+            "The lock settings disable note enforced field is required.",
+          ],
+          lock_settings_hide_user_list_default: [
+            "The lock settings hide user list default field is required.",
+          ],
+          lock_settings_hide_user_list_enforced: [
+            "The lock settings hide user list enforced field is required.",
+          ],
+          allow_membership_default: [
+            "The allow membership default field is required.",
+          ],
+          allow_membership_enforced: [
+            "The allow membership enforced field is required.",
+          ],
+          default_role_default: ["The default role default field is required."],
+          default_role_enforced: [
+            "The default role enforced field is required.",
+          ],
+          visibility_default: ["The visibility default field is required."],
+          visibility_enforced: ["The visibility enforced field is required."],
+        },
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="room-types-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check error messages
+    cy.get('[data-test="room-type-name-field"]').should(
+      "include.text",
+      "The name field is required.",
+    );
+    cy.get('[data-test="description-field"]').should(
+      "include.text",
+      "The description field is required.",
+    );
+    cy.get('[data-test="color-field"]').should(
+      "include.text",
+      "The color field is required.",
+    );
+    cy.get('[data-test="server-pool-field"]').should(
+      "include.text",
+      "The server pool field is required.",
+    );
+    cy.get('[data-test="max-participants-field"]').should(
+      "include.text",
+      "The max participants field is required.",
+    );
+    cy.get('[data-test="max-duration-field"]').should(
+      "include.text",
+      "The max duration field is required.",
+    );
+    cy.get('[data-test="create-parameters-field"]').should(
+      "include.text",
+      "The create parameters field is required.",
+    );
+    cy.get('[data-test="role-field"]').should(
+      "include.text",
+      "The roles field is required.",
+    );
+    cy.get('[data-test="has-access-code-field"]')
+      .should("include.text", "The has access code default field is required.")
+      .and("include.text", "The has access code enforced field is required.");
+    cy.get('[data-test="allow-guests-field"]')
+      .should("include.text", "The allow guests default field is required.")
+      .and("include.text", "The allow guests enforced field is required.");
+    cy.get('[data-test="everyone-can-start-field"]')
+      .should(
+        "include.text",
+        "The everyone can start default field is required.",
+      )
+      .and(
+        "include.text",
+        "The everyone can start enforced field is required.",
+      );
+    cy.get('[data-test="mute-on-start-field"]')
+      .should("include.text", "The mute on start default field is required.")
+      .and("include.text", "The mute on start enforced field is required.");
+    cy.get('[data-test="lobby-field"]')
+      .should("include.text", "The lobby default field is required.")
+      .and("include.text", "The lobby enforced field is required.");
+    cy.get('[data-test="record-attendance-field"]')
+      .should(
+        "include.text",
+        "The record attendance default field is required.",
+      )
+      .and("include.text", "The record attendance enforced field is required.");
+    cy.get('[data-test="record-field"]')
+      .should("include.text", "The record default field is required.")
+      .and("include.text", "The record enforced field is required.");
+    cy.get('[data-test="auto-start-recording-field"]')
+      .should(
+        "include.text",
+        "The auto start recording default field is required.",
+      )
+      .and(
+        "include.text",
+        "The auto start recording enforced field is required.",
+      );
+    cy.get('[data-test="disable-cam-field"]')
+      .should(
+        "include.text",
+        "The lock settings disable cam default field is required.",
+      )
+      .and(
+        "include.text",
+        "The lock settings disable cam enforced field is required.",
+      );
+    cy.get('[data-test="webcams-only-for-moderator-field"]')
+      .should(
+        "include.text",
+        "The webcams only for moderator default field is required.",
+      )
+      .and(
+        "include.text",
+        "The webcams only for moderator enforced field is required.",
+      );
+    cy.get('[data-test="disable-mic-field"]')
+      .should(
+        "include.text",
+        "The lock settings disable mic default field is required.",
+      )
+      .and(
+        "include.text",
+        "The lock settings disable mic enforced field is required.",
+      );
+    cy.get('[data-test="disable-public-chat-field"]')
+      .should(
+        "include.text",
+        "The lock settings disable public chat default field is required.",
+      )
+      .and(
+        "include.text",
+        "The lock settings disable public chat enforced field is required.",
+      );
+    cy.get('[data-test="disable-private-chat-field"]')
+      .should(
+        "include.text",
+        "The lock settings disable private chat default field is required.",
+      )
+      .and(
+        "include.text",
+        "The lock settings disable private chat enforced field is required.",
+      );
+    cy.get('[data-test="disable-note-field"]')
+      .should(
+        "include.text",
+        "The lock settings disable note default field is required.",
+      )
+      .and(
+        "include.text",
+        "The lock settings disable note enforced field is required.",
+      );
+    cy.get('[data-test="hide-user-list-field"]')
+      .should(
+        "include.text",
+        "The lock settings hide user list default field is required.",
+      )
+      .and(
+        "include.text",
+        "The lock settings hide user list enforced field is required.",
+      );
+    cy.get('[data-test="allow-membership-field"]')
+      .should("include.text", "The allow membership default field is required.")
+      .and("include.text", "The allow membership enforced field is required.");
+    cy.get('[data-test="default-role-field"]')
+      .should("include.text", "The default role default field is required.")
+      .and("include.text", "The default role enforced field is required.");
+    cy.get('[data-test="visibility-field"]')
+      .should("include.text", "The visibility default field is required.")
+      .and("include.text", "The visibility enforced field is required.");
+
+    // Check with 500 error
+    cy.intercept("PUT", "api/v1/roomTypes/3", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="room-types-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check error message
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that 422 error messages are hidden
+    cy.get('[data-test="room-type-name-field"]').should(
+      "not.include.text",
+      "The name field is required.",
+    );
+    cy.get('[data-test="description-field"]').should(
+      "not.include.text",
+      "The description field is required.",
+    );
+    cy.get('[data-test="color-field"]').should(
+      "not.include.text",
+      "The color field is required.",
+    );
+    cy.get('[data-test="server-pool-field"]').should(
+      "not.include.text",
+      "The server pool field is required.",
+    );
+    cy.get('[data-test="max-participants-field"]').should(
+      "not.include.text",
+      "The max participants field is required.",
+    );
+    cy.get('[data-test="max-duration-field"]').should(
+      "not.include.text",
+      "The max duration field is required.",
+    );
+    cy.get('[data-test="create-parameters-field"]').should(
+      "not.include.text",
+      "The create parameters field is required.",
+    );
+    cy.get('[data-test="role-field"]').should(
+      "not.include.text",
+      "The roles field is required.",
+    );
+    cy.get('[data-test="has-access-code-field"]')
+      .should(
+        "not.include.text",
+        "The has access code default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The has access code enforced field is required.",
+      );
+    cy.get('[data-test="allow-guests-field"]')
+      .should("not.include.text", "The allow guests default field is required.")
+      .and("not.include.text", "The allow guests enforced field is required.");
+    cy.get('[data-test="everyone-can-start-field"]')
+      .should(
+        "not.include.text",
+        "The everyone can start default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The everyone can start enforced field is required.",
+      );
+    cy.get('[data-test="mute-on-start-field"]')
+      .should(
+        "not.include.text",
+        "The mute on start default field is required.",
+      )
+      .and("not.include.text", "The mute on start enforced field is required.");
+    cy.get('[data-test="lobby-field"]')
+      .should("not.include.text", "The lobby default field is required.")
+      .and("not.include.text", "The lobby enforced field is required.");
+    cy.get('[data-test="record-attendance-field"]')
+      .should(
+        "not.include.text",
+        "The record attendance default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The record attendance enforced field is required.",
+      );
+    cy.get('[data-test="record-field"]')
+      .should("not.include.text", "The record default field is required.")
+      .and("not.include.text", "The record enforced field is required.");
+    cy.get('[data-test="auto-start-recording-field"]')
+      .should(
+        "not.include.text",
+        "The auto start recording default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The auto start recording enforced field is required.",
+      );
+    cy.get('[data-test="disable-cam-field"]')
+      .should(
+        "not.include.text",
+        "The lock settings disable cam default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The lock settings disable cam enforced field is required.",
+      );
+    cy.get('[data-test="webcams-only-for-moderator-field"]')
+      .should(
+        "not.include.text",
+        "The webcams only for moderator default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The webcams only for moderator enforced field is required.",
+      );
+    cy.get('[data-test="disable-mic-field"]')
+      .should(
+        "not.include.text",
+        "The lock settings disable mic default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The lock settings disable mic enforced field is required.",
+      );
+    cy.get('[data-test="disable-public-chat-field"]')
+      .should(
+        "not.include.text",
+        "The lock settings disable public chat default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The lock settings disable public chat enforced field is required.",
+      );
+    cy.get('[data-test="disable-private-chat-field"]')
+      .should(
+        "not.include.text",
+        "The lock settings disable private chat default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The lock settings disable private chat enforced field is required.",
+      );
+    cy.get('[data-test="disable-note-field"]')
+      .should(
+        "not.include.text",
+        "The lock settings disable note default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The lock settings disable note enforced field is required.",
+      );
+    cy.get('[data-test="hide-user-list-field"]')
+      .should(
+        "not.include.text",
+        "The lock settings hide user list default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The lock settings hide user list enforced field is required.",
+      );
+    cy.get('[data-test="allow-membership-field"]')
+      .should(
+        "not.include.text",
+        "The allow membership default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The allow membership enforced field is required.",
+      );
+    cy.get('[data-test="default-role-field"]')
+      .should("not.include.text", "The default role default field is required.")
+      .and("not.include.text", "The default role enforced field is required.");
+    cy.get('[data-test="visibility-field"]')
+      .should("not.include.text", "The visibility default field is required.")
+      .and("not.include.text", "The visibility enforced field is required.");
+
+    // Check with 428 error (stale error)
+    cy.fixture("roomType.json").then((roomType) => {
+      roomType.data.name = "Exam 01";
+      roomType.data.description =
+        "New room type description for room type Exam 01";
+      roomType.data.color = "#ef4444";
+      roomType.data.server_pool = {
+        id: 2,
+        name: "Production",
+        description: "Pool for production",
+        servers_count: 1,
+        model_name: "ServerPool",
+        updated_at: "2020-12-21T13:43:21.000000Z",
+      };
+      roomType.data.max_participants = 50;
+      roomType.data.max_duration = 60;
+      roomType.data.create_parameters = "meetingLayout=PRESENTATION_FOCUS";
+      roomType.data.restrict = true;
+      roomType.data.roles = [
+        {
+          id: 1,
+          name: "Superuser",
+        },
+        {
+          id: 2,
+          name: "Staff",
+        },
+      ];
+      roomType.data.mute_on_start_default = false;
+      roomType.data.mute_on_start_enforced = false;
+      roomType.data.lock_settings_disable_cam_default = true;
+      roomType.data.lock_settings_disable_cam_enforced = true;
+      roomType.data.webcams_only_for_moderator_default = false;
+      roomType.data.webcams_only_for_moderator_enforced = true;
+      roomType.data.lock_settings_disable_mic_default = true;
+      roomType.data.lock_settings_disable_mic_enforced = false;
+      roomType.data.lock_settings_disable_private_chat_default = true;
+      roomType.data.lock_settings_disable_private_chat_enforced = true;
+      roomType.data.lock_settings_disable_public_chat_default = false;
+      roomType.data.lock_settings_disable_public_chat_enforced = true;
+      roomType.data.lock_settings_disable_note_default = false;
+      roomType.data.lock_settings_disable_note_enforced = false;
+      roomType.data.lock_settings_hide_user_list_default = false;
+      roomType.data.lock_settings_hide_user_list_enforced = true;
+      roomType.data.everyone_can_start_default = true;
+      roomType.data.everyone_can_start_enforced = true;
+      roomType.data.allow_membership_default = true;
+      roomType.data.allow_membership_enforced = false;
+      roomType.data.allow_guests_default = false;
+      roomType.data.allow_guests_enforced = false;
+      roomType.data.default_role_default = 2;
+      roomType.data.default_role_enforced = true;
+      roomType.data.lobby_default = 0;
+      roomType.data.lobby_enforced = false;
+      roomType.data.visibility_default = 0;
+      roomType.data.visibility_enforced = true;
+      roomType.data.record_attendance_default = true;
+      roomType.data.record_attendance_enforced = true;
+      roomType.data.record_default = true;
+      roomType.data.record_enforced = true;
+      roomType.data.auto_start_recording_default = true;
+      roomType.data.auto_start_recording_enforced = true;
+      roomType.data.has_access_code_default = false;
+      roomType.data.has_access_code_enforced = true;
+
+      cy.intercept("PUT", "api/v1/roomTypes/3", {
+        statusCode: 428,
+        body: {
+          new_model: roomType.data,
+        },
+      }).as("saveChangesRequest");
+    });
+
+    cy.get('[data-test="stale-room-type-dialog"]').should("not.exist");
+
+    cy.get('[data-test="room-types-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that stale dialog is shown
+    cy.get('[data-test="stale-room-type-dialog"]')
+      .should("be.visible")
+      .and("include.text", "app.errors.stale_error")
+      .within(() => {
+        // Check buttons
+        cy.get('[data-test="stale-dialog-reject-button"]')
+          .should("be.visible")
+          .and("have.text", "app.reload");
+        cy.get('[data-test="stale-dialog-accept-button"]')
+          .should("be.visible")
+          .and("have.text", "app.overwrite");
+      });
+
+    // Reload
+    cy.get('[data-test="stale-dialog-reject-button"]').click();
+
+    cy.get('[data-test="stale-room-type-dialog"]').should("not.exist");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.room_types.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.room_types.edit_{"name":"Exam 01"}',
+      );
+
+    // Check that correct data is shown
+    cy.get("#room-type-name").should("have.value", "Exam 01");
+    cy.get("#description").should(
+      "have.value",
+      "New room type description for room type Exam 01",
+    );
+    cy.get("#custom-color").should("have.value", "#ef4444");
+    cy.get('[data-test="server-pool-dropdown"]').within(() => {
+      cy.get(".multiselect__tags").should("include.text", "Production");
+    });
+    cy.get("#restrict").should("be.checked");
+    cy.get('[data-test="role-dropdown"]').within(() => {
+      cy.get('[data-test="role-chip"]').should("have.length", 2);
+      cy.get('[data-test="role-chip"]')
+        .eq(0)
+        .should("include.text", "Superuser")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+
+      cy.get('[data-test="role-chip"]')
+        .eq(1)
+        .should("include.text", "Staff")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+    });
+    cy.get("#max-participants").should("have.value", "50");
+    cy.get("#max-duration").should("have.value", "60 min.");
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "has-access-code",
+      false,
+      true,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "allow-guests",
+      false,
+      false,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "everyone-can-start",
+      true,
+      true,
+      false,
+    );
+
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "mute-on-start",
+      false,
+      false,
+      false,
+    );
+
+    cy.get("#lobby-disabled").should("be.checked");
+    cy.get('[data-test="lobby-enforced"]').should(
+      "have.text",
+      "admin.room_types.default_room_settings.default",
+    );
+
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "record-attendance",
+      true,
+      true,
+      false,
+    );
+
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "record",
+      true,
+      true,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "auto-start-recording",
+      true,
+      true,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "disable-cam",
+      true,
+      true,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "webcams-only-for-moderator",
+      false,
+      true,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "disable-mic",
+      true,
+      false,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "disable-public-chat",
+      false,
+      true,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "disable-private-chat",
+      true,
+      true,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "disable-note",
+      false,
+      false,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "hide-user-list",
+      false,
+      true,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "allow-membership",
+      true,
+      false,
+      false,
+    );
+
+    cy.get('[data-test="default-role-default-button"]')
+      .eq(1)
+      .should("have.text", "rooms.roles.moderator")
+      .should("have.attr", "aria-pressed", "true");
+
+    cy.get('[data-test="default-role-enforced"]').should(
+      "have.text",
+      "admin.room_types.default_room_settings.enforced",
+    );
+
+    cy.get('[data-test="visibility-default-button"]')
+      .eq(0)
+      .should("have.text", "rooms.settings.advanced.visibility.private")
+      .should("have.attr", "aria-pressed", "true");
+    cy.get('[data-test="visibility-enforced"]').should(
+      "have.text",
+      "admin.room_types.default_room_settings.enforced",
+    );
+    cy.get("#create-parameters").should(
+      "have.value",
+      "meetingLayout=PRESENTATION_FOCUS",
+    );
+
+    // Trigger 428 error (stale error) again
+    cy.fixture("roomType.json").then((roomType) => {
+      roomType.data.name = "Exam 02";
+      roomType.data.restrict = true;
+      roomType.data.roles = [
+        {
+          id: 1,
+          name: "Superuser",
+        },
+        {
+          id: 2,
+          name: "Staff",
+        },
+      ];
+
+      cy.intercept("PUT", "api/v1/roomTypes/3", {
+        statusCode: 428,
+        body: {
+          new_model: roomType.data,
+        },
+      }).as("saveChangesRequest");
+    });
+
+    cy.get('[data-test="stale-room-type-dialog"]').should("not.exist");
+
+    cy.get('[data-test="room-types-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that stale dialog is shown
+    cy.get('[data-test="stale-room-type-dialog"]')
+      .should("be.visible")
+      .and("include.text", "app.errors.stale_error")
+      .within(() => {
+        // Check buttons
+        cy.get('[data-test="stale-dialog-reject-button"]')
+          .should("be.visible")
+          .and("have.text", "app.reload");
+        cy.get('[data-test="stale-dialog-accept-button"]')
+          .should("be.visible")
+          .and("have.text", "app.overwrite");
+      });
+
+    // Overwrite
+    cy.fixture("roomType.json").then((roomType) => {
+      roomType.data.name = "Exam 01";
+      roomType.data.description =
+        "New room type description for room type Exam 01";
+      roomType.data.color = "#ef4444";
+      roomType.data.server_pool = {
+        id: 2,
+        name: "Production",
+        description: "Pool for production",
+        servers_count: 1,
+        model_name: "ServerPool",
+        updated_at: "2020-12-21T13:43:21.000000Z",
+      };
+      roomType.data.max_participants = 50;
+      roomType.data.max_duration = 60;
+      roomType.data.create_parameters = "meetingLayout=PRESENTATION_FOCUS";
+      roomType.data.restrict = true;
+      roomType.data.roles = [
+        {
+          id: 1,
+          name: "Superuser",
+        },
+        {
+          id: 2,
+          name: "Staff",
+        },
+      ];
+      roomType.data.mute_on_start_default = false;
+      roomType.data.mute_on_start_enforced = false;
+      roomType.data.lock_settings_disable_cam_default = true;
+      roomType.data.lock_settings_disable_cam_enforced = true;
+      roomType.data.webcams_only_for_moderator_default = false;
+      roomType.data.webcams_only_for_moderator_enforced = true;
+      roomType.data.lock_settings_disable_mic_default = true;
+      roomType.data.lock_settings_disable_mic_enforced = false;
+      roomType.data.lock_settings_disable_private_chat_default = true;
+      roomType.data.lock_settings_disable_private_chat_enforced = true;
+      roomType.data.lock_settings_disable_public_chat_default = false;
+      roomType.data.lock_settings_disable_public_chat_enforced = true;
+      roomType.data.lock_settings_disable_note_default = false;
+      roomType.data.lock_settings_disable_note_enforced = false;
+      roomType.data.lock_settings_hide_user_list_default = false;
+      roomType.data.lock_settings_hide_user_list_enforced = true;
+      roomType.data.everyone_can_start_default = true;
+      roomType.data.everyone_can_start_enforced = true;
+      roomType.data.allow_membership_default = true;
+      roomType.data.allow_membership_enforced = false;
+      roomType.data.allow_guests_default = false;
+      roomType.data.allow_guests_enforced = false;
+      roomType.data.default_role_default = 2;
+      roomType.data.default_role_enforced = true;
+      roomType.data.lobby_default = 0;
+      roomType.data.lobby_enforced = false;
+      roomType.data.visibility_default = 0;
+      roomType.data.visibility_enforced = true;
+      roomType.data.record_attendance_default = true;
+      roomType.data.record_attendance_enforced = true;
+      roomType.data.record_default = true;
+      roomType.data.record_enforced = true;
+      roomType.data.auto_start_recording_default = true;
+      roomType.data.auto_start_recording_enforced = true;
+      roomType.data.has_access_code_default = false;
+      roomType.data.has_access_code_enforced = true;
+
+      cy.intercept("PUT", "api/v1/roomTypes/3", {
+        statusCode: 200,
+        body: roomType,
+      }).as("saveChangesRequest");
+
+      cy.intercept("GET", "api/v1/roomTypes/3", {
+        statusCode: 200,
+        body: roomType,
+      }).as("roomTypeRequest");
+
+      cy.get('[data-test="stale-dialog-accept-button"]').click();
+
+      const roomTypeRequestData = { ...roomType.data };
+      roomTypeRequestData.server_pool = roomTypeRequestData.server_pool.id;
+      roomTypeRequestData.roles = roomTypeRequestData.roles.map(
+        (role) => role.id,
+      );
+
+      // Check that correct data is sent
+      cy.wait("@saveChangesRequest").then((interception) => {
+        expect(interception.request.body).to.eql(roomTypeRequestData);
+      });
+    });
+
+    // Check that redirect worked
+    cy.url().should("include", "/admin/room_types/3");
+    cy.url().should("not.include", "/edit");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.room_types.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.room_types.view_{"name":"Exam 01"}',
+      );
+
+    // Reload
+    cy.visit("/admin/room_types/3/edit");
+
+    // Check with 404 error
+    cy.interceptAdminRoomTypesIndexRequests();
+    cy.intercept("PUT", "api/v1/roomTypes/3", {
+      statusCode: 404,
+      body: {
+        message: "No query results for model",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="room-types-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that redirect worked
+    cy.url().should("not.include", "/admin/room_types/3/edit");
+    cy.url().should("include", "/admin/room_types");
+
+    cy.wait("@roomTypesRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"No query results for model"}',
+      'app.flash.server_error.error_code_{"statusCode":404}',
+    ]);
+
+    // Reload
+    cy.visit("/admin/room_types/3/edit");
+
+    // Check with 401 error
+    cy.intercept("PUT", "api/v1/roomTypes/3", {
+      statusCode: 401,
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="room-types-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/room_types/3/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("load room type errors", function () {
+    cy.intercept("GET", "api/v1/roomTypes/3", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("roomTypeRequest");
+
+    cy.visit("/admin/room_types/3/edit");
+
+    cy.wait("@roomTypeRequest");
+
+    // Check that overlay is shown
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Reload with correct data
+    cy.intercept("GET", "api/v1/roomTypes/3", {
+      statusCode: 200,
+      fixture: "roomType.json",
+    }).as("roomTypeRequest");
+
+    cy.get('[data-test="loading-retry-button"]')
+      .should("be.visible")
+      .and("have.text", "app.reload")
+      .click();
+
+    cy.wait("@roomTypeRequest");
+
+    // Check that overlay is hidden
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
+
+    // Reload page with 404 error
+    cy.interceptAdminRoomTypesIndexRequests();
+
+    cy.intercept("GET", "api/v1/roomTypes/3", {
+      statusCode: 404,
+      body: {
+        message: "No query results for model",
+      },
+    }).as("roomTypeRequest");
+
+    cy.reload();
+
+    cy.wait("@roomTypeRequest");
+
+    // Check that redirect worked
+    cy.url().should("not.include", "/admin/room_types/3/edit");
+    cy.url().should("include", "/admin/room_types");
+
+    cy.wait("@roomTypesRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"No query results for model"}',
+      'app.flash.server_error.error_code_{"statusCode":404}',
+    ]);
+
+    // Reload page with 401 error
+    cy.intercept("GET", "api/v1/roomTypes/3", {
+      statusCode: 401,
+    }).as("roomTypeRequest");
+
+    cy.visit("/admin/room_types/3/edit");
+
+    cy.wait("@roomTypeRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/room_types/3/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("check button visibility with delete permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "serverPools.viewAny",
+        "roomTypes.view",
+        "roomTypes.update",
+        "roomTypes.create",
+        "roomTypes.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/room_types/3/edit");
+
+    cy.wait("@roomTypeRequest");
+
+    cy.get('[data-test="room-types-cancel-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.cancel_editing")
+      .and("have.attr", "href", "/admin/room_types/3");
+    cy.get('[data-test="room-types-edit-button"]').should("not.exist");
+    cy.get('[data-test="room-types-delete-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+    cy.get('[data-test="room-types-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.save");
+  });
+
+  it("load roles errors", function () {
+    cy.fixture("roomType.json").then((roomType) => {
+      roomType.data.restrict = true;
+      roomType.data.roles = [
+        {
+          id: 1,
+          name: "Superuser",
+        },
+        {
+          id: 2,
+          name: "Staff",
+        },
+      ];
+
+      cy.intercept("GET", "api/v1/roomTypes/3", {
+        statusCode: 200,
+        body: roomType,
+      }).as("roomTypeRequest");
+    });
+
+    // Check with 500 error
+    const rolesRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/roles*",
+      {
+        statusCode: 500,
+        body: {
+          message: "Test",
+        },
+      },
+      "rolesRequest",
+    );
+
+    cy.visit("/admin/room_types/3/edit");
+
+    cy.wait("@roomTypeRequest");
+
+    // Check loading
+    cy.get('[data-test="room-types-save-button"]').should("be.disabled");
+
+    cy.get('[data-test="role-dropdown"]')
+      .should("have.class", "multiselect--disabled")
+      .then(() => {
+        rolesRequest.sendResponse();
+      });
+
+    cy.wait("@rolesRequest");
+
+    // Check error message
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    cy.get('[data-test="role-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="role-dropdown"]').within(() => {
+      cy.get('[data-test="role-chip"]').should("have.length", 2);
+      cy.get('[data-test="role-chip"]')
+        .eq(0)
+        .should("include.text", "Superuser")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+
+      cy.get('[data-test="role-chip"]')
+        .eq(1)
+        .should("include.text", "Staff")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+    });
+
+    cy.get('[data-test="room-types-save-button"]').should("not.be.disabled");
+
+    // Reload roles without errors
+    cy.intercept("GET", "api/v1/roles*", {
+      fixture: "roles.json",
+    }).as("rolesRequest");
+
+    cy.get('[data-test="roles-reload-button"]').click();
+
+    cy.wait("@rolesRequest");
+
+    cy.get('[data-test="role-dropdown"]').should(
+      "not.have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="role-dropdown"]').within(() => {
+      cy.get('[data-test="role-chip"]').should("have.length", 2);
+      cy.get('[data-test="role-chip"]')
+        .eq(0)
+        .should("include.text", "Superuser")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+
+      cy.get('[data-test="role-chip"]')
+        .eq(1)
+        .should("include.text", "Staff")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+    });
+
+    cy.get('[data-test="room-types-save-button"]').should("not.be.disabled");
+
+    cy.get('[data-test="roles-reload-button"]').should("not.exist");
+
+    cy.get('[data-test="role-dropdown"]').click();
+
+    cy.get(".multiselect__content")
+      .eq(1)
+      .should("be.visible")
+      .within(() => {
+        cy.get(".multiselect__option").should("have.length", 5);
+      });
+
+    // Check with 500 error when switching pages
+    cy.intercept("GET", "api/v1/roles*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("rolesRequest");
+
+    cy.get(".multiselect__content")
+      .eq(1)
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="next-page-button"]').click();
+      });
+
+    cy.wait("@rolesRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    cy.get('[data-test="role-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="role-dropdown"]').within(() => {
+      cy.get('[data-test="role-chip"]').should("have.length", 2);
+      cy.get('[data-test="role-chip"]')
+        .eq(0)
+        .should("include.text", "Superuser")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+
+      cy.get('[data-test="role-chip"]')
+        .eq(1)
+        .should("include.text", "Staff")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+    });
+
+    cy.get('[data-test="roles-reload-button"]').should("be.visible");
+
+    cy.get('[data-test="room-types-save-button"]').should("not.be.disabled");
+
+    // Check with 401 error
+    cy.intercept("GET", "api/v1/roles*", {
+      statusCode: 401,
+    }).as("rolesRequest");
+
+    cy.get("#restrict").click();
+    cy.get("#restrict").click();
+
+    cy.wait("@rolesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/room_types/3/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+
+    // Visit new page again with roles
+    cy.intercept("GET", "api/v1/roles*", {
+      fixture: "roles.json",
+    }).as("rolesRequest");
+
+    cy.visit("/admin/room_types/3/edit");
+
+    cy.wait("@rolesRequest");
+
+    cy.get('[data-test="role-dropdown"]').click();
+
+    // Check with 401 error when switching pages
+    cy.intercept("GET", "api/v1/roles*", {
+      statusCode: 401,
+    }).as("rolesRequest");
+
+    cy.get(".multiselect__content")
+      .eq(1)
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="next-page-button"]').click();
+      });
+
+    cy.wait("@rolesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/room_types/3/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("load server pools errors", function () {
+    // Check with 500 error
+    const serverPoolsRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/serverPools*",
+      {
+        statusCode: 500,
+        body: {
+          message: "Test",
+        },
+      },
+      "serverPoolsRequest",
+    );
+
+    cy.visit("/admin/room_types/3/edit");
+
+    cy.wait("@roomTypeRequest");
+
+    // Check loading
+    cy.get('[data-test="room-types-save-button"]').should("be.disabled");
+
+    cy.get('[data-test="server-pool-dropdown"]')
+      .should("have.class", "multiselect--disabled")
+      .then(() => {
+        serverPoolsRequest.sendResponse();
+      });
+
+    cy.wait("@serverPoolsRequest");
+
+    // Check error message
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    cy.get('[data-test="server-pool-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="server-pool-dropdown"]').within(() => {
+      cy.get(".multiselect__tags").should("include.text", "Test");
+    });
+
+    cy.get('[data-test="room-types-save-button"]').should("be.disabled");
+
+    // Reload server pools without errors
+    cy.fixture("serverPools.json").then((serverPools) => {
+      serverPools.data = serverPools.data.slice(0, 1);
+      serverPools.meta.last_page = 2;
+      serverPools.meta.per_page = 1;
+      serverPools.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/serverPools*", {
+        statusCode: 200,
+        body: serverPools,
+      }).as("serverPoolsRequest");
+    });
+
+    cy.get('[data-test="server-pools-reload-button"]').click();
+
+    cy.wait("@serverPoolsRequest");
+
+    cy.get('[data-test="server-pool-dropdown"]').should(
+      "not.have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="room-types-save-button"]').should("not.be.disabled");
+
+    cy.get('[data-test="server-pools-reload-button"]').should("not.exist");
+
+    cy.get('[data-test="server-pool-dropdown"]').click();
+
+    cy.get(".multiselect__content")
+      .eq(0)
+      .should("be.visible")
+      .within(() => {
+        cy.get(".multiselect__option").should("have.length", 3);
+      });
+
+    // Check with 500 error when switching pages
+    cy.intercept("GET", "api/v1/serverPools*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("serverPoolsRequest");
+
+    cy.get(".multiselect__content")
+      .eq(0)
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="next-page-button"]').click();
+      });
+
+    cy.wait("@serverPoolsRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    cy.get('[data-test="server-pool-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="server-pool-dropdown"]').within(() => {
+      cy.get(".multiselect__tags").should("include.text", "Test");
+    });
+
+    cy.get('[data-test="server-pools-reload-button"]').should("be.visible");
+
+    cy.get('[data-test="room-types-save-button"]').should("be.disabled");
+
+    // Check with 401 error
+    cy.intercept("GET", "api/v1/serverPools*", {
+      statusCode: 401,
+    }).as("serverPoolsRequest");
+
+    cy.reload();
+
+    cy.wait("@serverPoolsRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/room_types/3/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+
+    // Visit new page again with server pools
+    cy.fixture("serverPools.json").then((serverPools) => {
+      serverPools.data = serverPools.data.slice(0, 1);
+      serverPools.meta.last_page = 2;
+      serverPools.meta.per_page = 1;
+      serverPools.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/serverPools*", {
+        statusCode: 200,
+        body: serverPools,
+      }).as("serverPoolsRequest");
+    });
+
+    cy.visit("/admin/room_types/3/edit");
+
+    cy.wait("@serverPoolsRequest");
+
+    cy.get('[data-test="server-pool-dropdown"]').click();
+
+    // Check with 401 error when switching pages
+    cy.intercept("GET", "api/v1/serverPools*", {
+      statusCode: 401,
+    }).as("serverPoolsRequest");
+
+    cy.get(".multiselect__content")
+      .eq(0)
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="next-page-button"]').click();
+      });
+
+    cy.wait("@serverPoolsRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/room_types/3/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminRoomTypesIndex.cy.js b/tests/Frontend/e2e/AdminRoomTypesIndex.cy.js
new file mode 100644
index 000000000..1314146c7
--- /dev/null
+++ b/tests/Frontend/e2e/AdminRoomTypesIndex.cy.js
@@ -0,0 +1,501 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin room types index", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminRoomTypesIndexRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin/room_types");
+  });
+
+  it("load room types", function () {
+    const roomTypesRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/roomTypes*",
+      { fixture: "roomTypes.json" },
+      "roomTypesRequest",
+    );
+    cy.visit("/admin/room_types");
+
+    cy.contains("admin.title");
+
+    // Test loading
+    cy.get('[data-test="room-type-search"]').within(() => {
+      cy.get("input").should("be.visible").and("be.disabled");
+      cy.get("button").should("be.visible").and("be.disabled");
+    });
+
+    cy.get('[data-test="room-types-add-button"]').should("not.exist");
+
+    cy.get('[data-test="overlay"]')
+      .should("be.visible")
+      .then(() => {
+        roomTypesRequest.sendResponse();
+      });
+
+    cy.wait("@roomTypesRequest");
+
+    // Check that loading is over
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    cy.get('[data-test="room-type-search"]').within(() => {
+      cy.get("input").should("be.visible").and("not.be.disabled");
+      cy.get("button").should("be.visible").and("not.be.disabled");
+    });
+
+    cy.get('[data-test="room-types-add-button"]').should("not.exist");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.room_types.index");
+
+    // Check that table headers are displayed correctly
+    cy.get('[data-test="room-type-header-cell"]').should("have.length", 2);
+
+    cy.get('[data-test="room-type-header-cell"]')
+      .eq(0)
+      .should("have.text", "app.model_name");
+
+    cy.get('[data-test="room-type-header-cell"]')
+      .eq(1)
+      .should("have.text", "app.actions");
+
+    // Check that room types are displayed correctly
+    cy.get('[data-test="room-type-item"]').should("have.length", 2);
+
+    cy.get('[data-test="room-type-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="room-type-item-cell"]')
+          .eq(0)
+          .should("have.text", "Exam");
+        cy.get('[data-test="room-type-item-cell"]')
+          .eq(1)
+          .within(() => {
+            cy.get('[data-test="room-types-view-button"]').should("not.exist");
+            cy.get('[data-test="room-types-edit-button"]').should("not.exist");
+            cy.get('[data-test="room-types-delete-button"]').should(
+              "not.exist",
+            );
+          });
+      });
+
+    cy.get('[data-test="room-type-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="room-type-item-cell"]')
+          .eq(0)
+          .should("have.text", "Lecture");
+        cy.get('[data-test="room-type-item-cell"]')
+          .eq(1)
+          .within(() => {
+            cy.get('[data-test="room-types-view-button"]').should("not.exist");
+            cy.get('[data-test="room-types-edit-button"]').should("not.exist");
+            cy.get('[data-test="room-types-delete-button"]').should(
+              "not.exist",
+            );
+          });
+      });
+  });
+
+  it("load room types errors", function () {
+    cy.intercept("GET", "api/v1/roomTypes*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("roomTypesRequest");
+
+    cy.visit("/admin/room_types");
+
+    cy.wait("@roomTypesRequest");
+
+    // Check that error message gets shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that overlay is shown
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that components are not disabled
+    cy.get('[data-test="room-type-search"]').within(() => {
+      cy.get("input").should("be.visible").and("not.be.disabled");
+      cy.get("button").should("be.visible").and("not.be.disabled");
+    });
+
+    cy.intercept("GET", "api/v1/roomTypes*", {
+      statusCode: 200,
+      fixture: "roomTypes.json",
+    }).as("roomTypesRequest");
+
+    // Check if reload button exists and click it
+    cy.get('[data-test="loading-retry-button"]')
+      .should("be.visible")
+      .and("have.text", "app.reload")
+      .click();
+
+    cy.wait("@roomTypesRequest");
+
+    // Check that overlay is not shown anymore
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
+
+    // Check that room types are shown and contain the correct data
+    cy.get('[data-test="room-type-item"]').should("have.length", 2);
+    cy.get('[data-test="room-type-item"]').eq(0).should("include.text", "Exam");
+    cy.get('[data-test="room-type-item"]')
+      .eq(1)
+      .should("include.text", "Lecture");
+
+    // Reload page with 401 error
+    cy.intercept("GET", "api/v1/roomTypes*", {
+      statusCode: 401,
+    }).as("roomTypesRequest");
+
+    cy.reload();
+
+    cy.wait("@roomTypesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/room_types");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("load room types with no data", function () {
+    cy.fixture("roomTypes.json").then((roomTypes) => {
+      roomTypes.data = [];
+      cy.intercept("GET", "api/v1/roomTypes*", {
+        statusCode: 200,
+        body: roomTypes,
+      }).as("roomTypesRequest");
+    });
+
+    cy.visit("/admin/room_types");
+  });
+
+  it("room type search and sorting", function () {
+    cy.visit("/admin/room_types");
+
+    // Check that all room types are shown
+    cy.get('[data-test="room-type-item"]').should("have.length", 2);
+    cy.get('[data-test="room-type-item"]').eq(0).should("include.text", "Exam");
+    cy.get('[data-test="room-type-item"]')
+      .eq(1)
+      .should("include.text", "Lecture");
+
+    // Check that pagination shows the correct number of pages
+    cy.get('[data-test="paginator-page"]').should("have.length", 2);
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Switch to next page
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(1)
+      .should("have.attr", "data-p-active", "true");
+
+    // Check that correct room types are shown
+    cy.get('[data-test="room-type-item"]').should("have.length", 2);
+    cy.get('[data-test="room-type-item"]')
+      .eq(0)
+      .should("include.text", "Meeting");
+    cy.get('[data-test="room-type-item"]')
+      .eq(1)
+      .should("include.text", "Seminar");
+
+    // Enter search query with no results
+    cy.get('[data-test="room-type-search"]').within(() => {
+      cy.get("input").type("Search without results");
+      cy.get("button").click();
+    });
+
+    // Check that no room types and correct message are shown
+    cy.get('[data-test="room-type-item"]').should("have.length", 0);
+    cy.contains("admin.room_types.no_data_filtered").should("be.visible");
+
+    // Change search query
+    cy.get('[data-test="room-type-search"]').within(() => {
+      cy.get("input").clear();
+      cy.get("input").type("Exam");
+      cy.get("button").click();
+    });
+
+    // Check that correct room types are shown
+    cy.get('[data-test="room-type-item"]').should("have.length", 1);
+    cy.get('[data-test="room-type-item"]').eq(0).should("include.text", "Exam");
+
+    // Check that pagination shows the correct number of pages
+    cy.get('[data-test="paginator-page"]').should("have.length", 1);
+
+    // Check that correct pagination is active (page is reset to first page)
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Change search query
+    cy.get('[data-test="room-type-search"]').within(() => {
+      cy.get("input").clear();
+      cy.get("input").type("e");
+      cy.get("input").type("{enter}");
+    });
+
+    // Check that correct room types are shown
+    cy.get('[data-test="room-type-item"]').should("have.length", 2);
+    cy.get('[data-test="room-type-item"]').eq(0).should("include.text", "Exam");
+    cy.get('[data-test="room-type-item"]')
+      .eq(1)
+      .should("include.text", "Lecture");
+
+    // Check that pagination shows the correct number of pages
+    cy.get('[data-test="paginator-page"]').should("have.length", 2);
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Switch to next page
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(1)
+      .should("have.attr", "data-p-active", "true");
+
+    cy.get('[data-test="room-type-item"]').should("have.length", 2);
+    cy.get('[data-test="room-type-item"]')
+      .eq(0)
+      .should("include.text", "Meeting");
+    cy.get('[data-test="room-type-item"]')
+      .eq(1)
+      .should("include.text", "Seminar");
+
+    // Change sort order
+    cy.get('[data-test="room-type-header-cell"]').eq(0).click();
+
+    // Check that correct room types are shown
+    cy.get('[data-test="room-type-item"]').should("have.length", 2);
+    cy.get('[data-test="room-type-item"]')
+      .eq(0)
+      .should("include.text", "Seminar");
+    cy.get('[data-test="room-type-item"]')
+      .eq(1)
+      .should("include.text", "Meeting");
+
+    // Check that pagination shows the correct number of pages
+    cy.get('[data-test="paginator-page"]').should("have.length", 2);
+
+    // Check that correct pagination is active (page is reset to first page)
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+  });
+
+  it("check button visibility with view permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view", "roomTypes.view"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/room_types");
+
+    cy.wait("@roomTypesRequest");
+
+    cy.get('[data-test="room-types-add-button"]').should("not.exist");
+
+    cy.get('[data-test="room-type-item"]').should("have.length", 2);
+
+    cy.get('[data-test="room-type-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="room-types-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/room_types/3");
+        cy.get('[data-test="room-types-edit-button"]').should("not.exist");
+        cy.get('[data-test="room-types-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="room-type-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="room-types-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/room_types/1");
+        cy.get('[data-test="room-types-edit-button"]').should("not.exist");
+        cy.get('[data-test="room-types-delete-button"]').should("not.exist");
+      });
+  });
+
+  it("check button visibility with update permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "serverPools.viewAny",
+        "roomTypes.view",
+        "roomTypes.update",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/room_types");
+
+    cy.wait("@roomTypesRequest");
+
+    cy.get('[data-test="room-types-add-button"]').should("not.exist");
+
+    cy.get('[data-test="room-type-item"]').should("have.length", 2);
+
+    cy.get('[data-test="room-type-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="room-types-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/room_types/3");
+        cy.get('[data-test="room-types-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/room_types/3/edit");
+        cy.get('[data-test="room-types-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="room-type-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="room-types-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/room_types/1");
+        cy.get('[data-test="room-types-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/room_types/1/edit");
+        cy.get('[data-test="room-types-delete-button"]').should("not.exist");
+      });
+  });
+
+  it("check button visibility with add permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "serverPools.viewAny",
+        "roomTypes.view",
+        "roomTypes.update",
+        "roomTypes.create",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/room_types");
+
+    cy.wait("@roomTypesRequest");
+
+    cy.get('[data-test="room-types-add-button"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/room_types/new");
+
+    cy.get('[data-test="room-type-item"]').should("have.length", 2);
+
+    cy.get('[data-test="room-type-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="room-types-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/room_types/3");
+        cy.get('[data-test="room-types-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/room_types/3/edit");
+        cy.get('[data-test="room-types-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="room-type-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="room-types-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/room_types/1");
+        cy.get('[data-test="room-types-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/room_types/1/edit");
+        cy.get('[data-test="room-types-delete-button"]').should("not.exist");
+      });
+  });
+
+  it("check button visibility with delete permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "serverPools.viewAny",
+        "roomTypes.view",
+        "roomTypes.update",
+        "roomTypes.create",
+        "roomTypes.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/room_types");
+
+    cy.wait("@roomTypesRequest");
+
+    cy.get('[data-test="room-types-add-button"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/room_types/new");
+
+    cy.get('[data-test="room-type-item"]').should("have.length", 2);
+
+    cy.get('[data-test="room-type-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="room-types-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/room_types/3");
+        cy.get('[data-test="room-types-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/room_types/3/edit");
+        cy.get('[data-test="room-types-delete-button"]').should("be.visible");
+      });
+
+    cy.get('[data-test="room-type-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="room-types-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/room_types/1");
+        cy.get('[data-test="room-types-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/room_types/1/edit");
+        cy.get('[data-test="room-types-delete-button"]').should("be.visible");
+      });
+  });
+});
diff --git a/tests/Frontend/e2e/AdminRoomTypesIndexRoomTypeActions.cy.js b/tests/Frontend/e2e/AdminRoomTypesIndexRoomTypeActions.cy.js
new file mode 100644
index 000000000..7d97ab6d9
--- /dev/null
+++ b/tests/Frontend/e2e/AdminRoomTypesIndexRoomTypeActions.cy.js
@@ -0,0 +1,536 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin room types index room type actions", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminRoomTypesIndexRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "serverPools.viewAny",
+        "roomTypes.view",
+        "roomTypes.update",
+        "roomTypes.create",
+        "roomTypes.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("delete room type without replacement", function () {
+    cy.visit("/admin/room_types");
+
+    cy.wait("@roomTypesRequest");
+
+    cy.get('[data-test="room-type-item"]').should("have.length", 2);
+
+    cy.get('[data-test="room-types-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="room-type-item"]')
+      .eq(0)
+      .find('[data-test="room-types-delete-button"]')
+      .click();
+
+    // Check that replacement room types are loaded
+    cy.wait("@roomTypesRequest");
+
+    cy.get('[data-test="room-types-delete-dialog"]').should("be.visible");
+
+    // Check that dialog shows correct data
+    cy.get('[data-test="room-types-delete-dialog"]')
+      .should("include.text", "admin.room_types.delete.title")
+      .should("include.text", 'admin.room_types.delete.confirm_{"name":"Exam"}')
+      .within(() => {
+        cy.get('[data-test="replacement-room-type-field"]')
+          .should("be.visible")
+          .and("include.text", "admin.room_types.delete.replacement")
+          .and("include.text", "admin.room_types.delete.replacement_info")
+          .within(() => {
+            cy.get('[data-test="replacement-room-type-dropdown"]').should(
+              "have.text",
+              "admin.room_types.delete.no_replacement",
+            );
+
+            cy.get('[data-test="replacement-room-type-dropdown"]').within(
+              () => {
+                cy.get(".p-select-label").should(
+                  "not.have.attr",
+                  "aria-disabled",
+                  "true",
+                );
+              },
+            );
+          });
+      });
+
+    // Confirm delete of room type
+    const deleteRoomTypeRequest = interceptIndefinitely(
+      "DELETE",
+      "api/v1/roomTypes/3",
+      { statusCode: 204 },
+      "deleteRoomTypeRequest",
+    );
+
+    cy.fixture("roomTypes.json").then((roomTypes) => {
+      roomTypes.data = roomTypes.data.filter((roomType) => roomType.id !== 3);
+
+      cy.intercept("GET", "api/v1/roomTypes", {
+        statusCode: 200,
+        body: roomTypes,
+      }).as("roomTypesRequest");
+    });
+
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("have.text", "app.yes")
+      .click();
+
+    // Check loading
+    cy.get('[data-test="replacement-room-type-dropdown"]').within(() => {
+      cy.get(".p-select-label").should("have.attr", "aria-disabled", "true");
+    });
+
+    cy.get('[data-test="dialog-cancel-button"]')
+      .should("have.text", "app.no")
+      .and("be.disabled");
+
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("be.disabled")
+      .then(() => {
+        deleteRoomTypeRequest.sendResponse();
+      });
+
+    cy.wait("@deleteRoomTypeRequest").then((interception) => {
+      expect(interception.request.body).to.eql({
+        replacement_room_type: null,
+      });
+    });
+    cy.wait("@roomTypesRequest");
+
+    // Check that room type was deleted
+    cy.get('[data-test="room-type-item"]').should("have.length", 2);
+    cy.get('[data-test="room-type-item"]')
+      .eq(0)
+      .should("include.text", "Lecture");
+
+    cy.get('[data-test="room-type-item"]')
+      .eq(1)
+      .should("include.text", "Meeting");
+
+    // Check that dialog is closed
+    cy.get('[data-test="room-types-delete-dialog"]').should("not.exist");
+
+    // Reopen dialog for different room type
+    cy.get('[data-test="room-type-item"]')
+      .eq(1)
+      .find('[data-test="room-types-delete-button"]')
+      .click();
+
+    // Check that replacement room types are loaded
+    cy.wait("@roomTypesRequest");
+
+    cy.get('[data-test="room-types-delete-dialog"]').should("be.visible");
+
+    // Check that dialog shows correct data
+    cy.get('[data-test="room-types-delete-dialog"]')
+      .should("include.text", "admin.room_types.delete.title")
+      .should(
+        "include.text",
+        'admin.room_types.delete.confirm_{"name":"Meeting"}',
+      );
+  });
+
+  it("delete room type with replacement", function () {
+    cy.visit("/admin/room_types");
+
+    cy.wait("@roomTypesRequest");
+
+    cy.get('[data-test="room-type-item"]').should("have.length", 2);
+
+    cy.get('[data-test="room-types-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="room-type-item"]')
+      .eq(0)
+      .find('[data-test="room-types-delete-button"]')
+      .click();
+
+    // Check that replacement room types are loaded
+    cy.wait("@roomTypesRequest");
+
+    cy.get('[data-test="room-types-delete-dialog"]').should("be.visible");
+
+    // Check that dialog shows correct data
+    cy.get('[data-test="replacement-room-type-dropdown-items"]').should(
+      "not.exist",
+    );
+
+    cy.get('[data-test="room-types-delete-dialog"]')
+      .should("include.text", 'admin.room_types.delete.confirm_{"name":"Exam"}')
+      .within(() => {
+        cy.get('[data-test="replacement-room-type-field"]')
+          .should("be.visible")
+          .within(() => {
+            cy.get('[data-test="replacement-room-type-dropdown"]')
+              .should("have.text", "admin.room_types.delete.no_replacement")
+              .click();
+          });
+      });
+
+    // Check that replacement room types are shown correctly
+    cy.get('[data-test="replacement-room-type-dropdown-items"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test = "replacement-room-type-dropdown-option"]').should(
+          "have.length",
+          3,
+        );
+
+        cy.get('[data-test="replacement-room-type-dropdown-option"]')
+          .eq(0)
+          .should("have.text", "Lecture");
+
+        cy.get('[data-test="replacement-room-type-dropdown-option"]')
+          .eq(1)
+          .should("have.text", "Meeting");
+
+        cy.get('[data-test="replacement-room-type-dropdown-option"]')
+          .eq(2)
+          .should("have.text", "Seminar");
+
+        cy.get('[data-test="replacement-room-type-dropdown-option"]')
+          .eq(1)
+          .click();
+      });
+
+    cy.get('[data-test="replacement-room-type-dropdown-items"]').should(
+      "not.exist",
+    );
+    cy.get('[data-test="replacement-room-type-dropdown"]').should(
+      "have.text",
+      "Meeting",
+    );
+
+    // Confirm delete of room type
+    cy.intercept("DELETE", "api/v1/roomTypes/3", {
+      statusCode: 204,
+    }).as("deleteRoomTypeRequest");
+
+    cy.fixture("roomTypes.json").then((roomTypes) => {
+      roomTypes.data = roomTypes.data.filter((roomType) => roomType.id !== 3);
+
+      cy.intercept("GET", "api/v1/roomTypes", {
+        statusCode: 200,
+        body: roomTypes,
+      }).as("roomTypesRequest");
+    });
+
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("have.text", "app.yes")
+      .click();
+
+    // Check that replacement room type was sent correctly
+    cy.wait("@deleteRoomTypeRequest").then((interception) => {
+      expect(interception.request.body).to.eql({
+        replacement_room_type: 2,
+      });
+    });
+    cy.wait("@roomTypesRequest");
+
+    // Check that room type was deleted
+    cy.get('[data-test="room-type-item"]').should("have.length", 2);
+    cy.get('[data-test="room-type-item"]')
+      .eq(0)
+      .should("include.text", "Lecture");
+
+    cy.get('[data-test="room-type-item"]')
+      .eq(1)
+      .should("include.text", "Meeting");
+
+    // Check that dialog is closed
+    cy.get('[data-test="room-types-delete-dialog"]').should("not.exist");
+  });
+
+  it("delete room type errors", function () {
+    cy.visit("/admin/room_types");
+
+    cy.wait("@roomTypesRequest");
+
+    cy.get('[data-test="room-type-item"]').should("have.length", 2);
+
+    cy.get('[data-test="room-types-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="room-type-item"]')
+      .eq(0)
+      .find('[data-test="room-types-delete-button"]')
+      .click();
+
+    // Check that replacement room types are loaded
+    cy.wait("@roomTypesRequest");
+
+    cy.get('[data-test="room-types-delete-dialog"]').should("be.visible");
+
+    // Check with 422 error (replacement room type needed)
+    cy.intercept("DELETE", "api/v1/roomTypes/3", {
+      statusCode: 422,
+      body: {
+        message:
+          "Replacement room type required! Rooms are still assigned to this room type.",
+        errors: {
+          replacement_room_type: [
+            "Replacement room type required! Rooms are still assigned to this room type.",
+          ],
+        },
+      },
+    }).as("deleteRoomTypeRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteRoomTypeRequest");
+
+    // Check that dialog stays open and error message is shown
+    cy.get('[data-test="room-types-delete-dialog"]').should("be.visible");
+    cy.get('[data-test="replacement-room-type-field"]').should(
+      "include.text",
+      "Replacement room type required! Rooms are still assigned to this room type.",
+    );
+
+    // Select replacement room type
+    cy.get('[data-test="replacement-room-type-dropdown"]').click();
+    cy.get('[data-test="replacement-room-type-dropdown-option"]').eq(1).click();
+
+    // Check with 500 error
+    cy.intercept("DELETE", "api/v1/roomTypes/3", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("deleteRoomTypeRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteRoomTypeRequest");
+
+    // Check that dialog is still open and that error message is shown
+    cy.get('[data-test="room-types-delete-dialog"]').should("be.visible");
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that 422 error message is hidden
+    cy.get('[data-test="replacement-room-type-field"]').should(
+      "not.include.text",
+      "Replacement room type required! Rooms are still assigned to this room type.",
+    );
+
+    // Check with 404 error
+    cy.fixture("roomTypes.json").then((roomTypes) => {
+      roomTypes.data = roomTypes.data.filter((roomType) => roomType.id !== 3);
+
+      cy.intercept("GET", "api/v1/roomTypes", {
+        statusCode: 200,
+        body: roomTypes,
+      }).as("roomTypesRequest");
+    });
+
+    cy.intercept("DELETE", "api/v1/roomTypes/3", {
+      statusCode: 404,
+      body: {
+        message: "No query results for model",
+      },
+    }).as("deleteRoomTypeRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteRoomTypeRequest");
+
+    // Check that room types get reloaded
+    cy.wait("@roomTypesRequest");
+
+    // Check that dialog is closed
+    cy.get('[data-test="room-types-delete-dialog"]').should("not.exist");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"No query results for model"}',
+      'app.flash.server_error.error_code_{"statusCode":404}',
+    ]);
+
+    // Check that room type is not there anymore
+    cy.get('[data-test="room-type-item"]').should("have.length", 2);
+    cy.get('[data-test="room-type-item"]')
+      .eq(0)
+      .should("include.text", "Lecture");
+    cy.get('[data-test="room-type-item"]')
+      .eq(1)
+      .should("include.text", "Meeting");
+
+    cy.get('[data-test="room-type-item"]')
+      .eq(0)
+      .find('[data-test="room-types-delete-button"]')
+      .click();
+
+    // Check that replacement room types are loaded
+    cy.wait("@roomTypesRequest");
+
+    cy.get('[data-test="room-types-delete-dialog"]').should("be.visible");
+
+    // Check with 401 error
+    cy.intercept("DELETE", "api/v1/roomTypes/1", {
+      statusCode: 401,
+    }).as("deleteRoomTypeRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteRoomTypeRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/room_types");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("load replacement room types errors", function () {
+    cy.visit("/admin/room_types");
+
+    cy.wait("@roomTypesRequest");
+
+    cy.get('[data-test="room-type-item"]').should("have.length", 2);
+
+    cy.get('[data-test="room-types-delete-dialog"]').should("not.exist");
+
+    // Check with 500 error
+    const replacementRoomTypesRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/roomTypes*",
+      {
+        statusCode: 500,
+        body: {
+          message: "Test",
+        },
+      },
+      "replacementRoomTypesRequest",
+    );
+
+    cy.get('[data-test="room-type-item"]')
+      .eq(0)
+      .find('[data-test="room-types-delete-button"]')
+      .click();
+
+    // Check loading
+    cy.get('[data-test="replacement-room-type-dropdown"]').within(() => {
+      cy.get(".p-select-label")
+        .should("have.attr", "aria-disabled", "true")
+        .then(() => {
+          replacementRoomTypesRequest.sendResponse();
+        });
+    });
+
+    cy.wait("@replacementRoomTypesRequest");
+
+    // Check that dialog is still open and that error message is shown
+    cy.get('[data-test="room-types-delete-dialog"]').should("be.visible");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that dropdown is disabled
+    cy.get('[data-test="replacement-room-type-dropdown"]').within(() => {
+      cy.get(".p-select-label").should("have.attr", "aria-disabled", "true");
+    });
+
+    // Reload with correct data
+    cy.intercept("GET", "api/v1/roomTypes*", {
+      statusCode: 200,
+      fixture: "roomTypes.json",
+    }).as("replacementRoomTypesRequest");
+
+    cy.get('[data-test="replacement-room-types-reload-button"]')
+      .should("be.visible")
+      .click();
+
+    cy.wait("@replacementRoomTypesRequest");
+
+    // Check that dropdown is enabled again
+    cy.get('[data-test="replacement-room-type-dropdown"]').within(() => {
+      cy.get(".p-select-label").should(
+        "not.have.attr",
+        "aria-disabled",
+        "true",
+      );
+    });
+
+    cy.get('[data-test="replacement-room-types-reload-button"]').should(
+      "not.exist",
+    );
+
+    // Close dialog and open again with 401 error
+    cy.get('[data-test="dialog-cancel-button"]').click();
+    cy.get('[data-test="room-types-delete-dialog"]').should("not.exist");
+
+    cy.intercept("GET", "api/v1/roomTypes*", {
+      statusCode: 401,
+    }).as("replacementRoomTypesRequest");
+
+    cy.get('[data-test="room-type-item"]')
+      .eq(0)
+      .find('[data-test="room-types-delete-button"]')
+      .click();
+
+    cy.wait("@replacementRoomTypesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/room_types");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("open add new room type page", function () {
+    cy.visit("/admin/room_types");
+
+    cy.wait("@roomTypesRequest");
+
+    cy.interceptAdminRoomTypesNewRequests();
+
+    cy.get('[data-test="room-types-add-button"]').click();
+
+    cy.url().should("include", "/admin/room_types/new");
+  });
+
+  it("open edit room type page", function () {
+    cy.visit("/admin/room_types");
+
+    cy.wait("@roomTypesRequest");
+
+    cy.interceptAdminRoomTypesViewRequests();
+
+    cy.get('[data-test="room-type-item"]')
+      .eq(0)
+      .find('[data-test="room-types-edit-button"]')
+      .click();
+
+    cy.url().should("include", "/admin/room_types/3/edit");
+  });
+
+  it("open view room type page", function () {
+    cy.visit("/admin/room_types");
+
+    cy.wait("@roomTypesRequest");
+
+    cy.interceptAdminRoomTypesViewRequests();
+
+    cy.get('[data-test="room-type-item"]')
+      .eq(0)
+      .find('[data-test="room-types-view-button"]')
+      .click();
+
+    cy.url().should("include", "/admin/room_types/3");
+    cy.url().should("not.include", "/edit");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminRoomTypesNew.cy.js b/tests/Frontend/e2e/AdminRoomTypesNew.cy.js
new file mode 100644
index 000000000..42314d63d
--- /dev/null
+++ b/tests/Frontend/e2e/AdminRoomTypesNew.cy.js
@@ -0,0 +1,1837 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin room types new", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminRoomTypesNewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "serverPools.viewAny",
+        "roomTypes.view",
+        "roomTypes.update",
+        "roomTypes.create",
+        "roomTypes.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin/room_types/new");
+  });
+
+  it("visit with user without permission to add new room types", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "serverPools.viewAny",
+        "roomTypes.view",
+        "roomTypes.update",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/room_types/new");
+
+    // Check if the welcome page is shown
+    cy.url().should("not.include", "/admin/room_types");
+    cy.get("h1").should("be.visible").and("include.text", "home.title");
+  });
+
+  it("add new room type", function () {
+    cy.visit("/admin/room_types/new");
+
+    // Check that header buttons are hidden
+    cy.get('[data-test="room-types-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="room-types-edit-button"]').should("not.exist");
+    cy.get('[data-test="room-types-delete-button"]').should("not.exist");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.room_types.index")
+      .should("include.text", "admin.breakcrumbs.room_types.new");
+
+    cy.get('[data-test="room-type-name-field"]')
+      .should("be.visible")
+      .and("include.text", "app.model_name")
+      .within(() => {
+        cy.get("#room-type-name").should("have.value", "").type("Exam 01");
+      });
+
+    // Check that breadcrumbs stay the same
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.room_types.index")
+      .should("include.text", "admin.breakcrumbs.room_types.new");
+
+    cy.get('[data-test="description-field"]')
+      .should("be.visible")
+      .and("include.text", "app.description")
+      .within(() => {
+        cy.get("#description")
+          .should("have.value", "")
+          .type("Room type description for room type Exam 01");
+      });
+
+    cy.get('[data-test="color-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.room_types.color")
+      .and("include.text", "admin.room_types.custom_color")
+      .within(() => {
+        cy.get('[data-test="color-button"]').should("have.length", 10);
+
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should("have.attr", "role", "button")
+            .and(
+              "not.have.class",
+              "pointer-events-none cursor-not-allowed opacity-80",
+            )
+            .and(i === 0 ? "have.class" : "not.have.class", "selected");
+        }
+
+        // Clear custom color and check that color buttons are not selected
+        cy.get("#custom-color")
+          .should("have.value", "#6366f1")
+          .and("not.be.disabled")
+          .clear();
+
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should("not.have.class", "selected");
+        }
+
+        // Set custom color and check that color buttons is selected
+        cy.get("#custom-color").type("#ef4444");
+
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should(i === 7 ? "have.class" : "not.have.class", "selected");
+        }
+      });
+
+    cy.get('[data-test="preview-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.room_types.preview")
+      .within(() => {
+        cy.get('[data-test="room-type-badge"]')
+          .should("have.css", "background-color", "rgb(239, 68, 68)")
+          .and("have.text", "Exam 01");
+      });
+
+    cy.get(".multiselect__content").should("not.be.visible");
+    cy.get('[data-test="server-pool-field"]')
+      .should("be.visible")
+      .and("include.text", "app.server_pool")
+      .within(() => {
+        cy.get('[data-test="server-pool-dropdown"]').within(() => {
+          cy.get(".multiselect__tags")
+            .should("include.text", "admin.room_types.select_server_pool")
+            .click();
+        });
+      });
+
+    // Check if correct options are shown
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").should("have.length", 4);
+    cy.get(".multiselect__option")
+      .eq(0)
+      .should("include.text", "Test")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(1)
+      .should("include.text", "Production")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(2)
+      .should(
+        "include.text",
+        "No elements found. Consider changing the search query.",
+      )
+      .and("not.be.visible");
+
+    cy.get(".multiselect__option")
+      .eq(3)
+      .should("include.text", "admin.server_pools.no_data")
+      .and("not.be.visible");
+
+    cy.get(".multiselect__option").eq(1).click();
+
+    cy.get(".multiselect__content").should("not.be.visible");
+    cy.get('[data-test="server-pool-dropdown"]').within(() => {
+      cy.get(".multiselect__tags").should("include.text", "Production");
+    });
+
+    cy.get('[data-test="restrict-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.room_types.restrict")
+      .within(() => {
+        cy.get("#restrict").should("not.be.checked").and("not.be.disabled");
+      });
+
+    cy.get('[data-test="role-field"]').should("not.exist");
+
+    cy.get('[data-test="max-participants-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.room_types.max_participants")
+      .within(() => {
+        cy.get("#max-participants").should("have.value", "").type("100");
+        cy.get('[data-test="clear-max-participants-button"]')
+          .should("be.visible")
+          .and("not.be.disabled");
+      });
+
+    cy.get('[data-test="max-duration-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.room_types.max_duration")
+      .within(() => {
+        cy.get("#max-duration").should("have.value", "").type("120");
+        cy.get('[data-test="clear-max-duration-button"]')
+          .should("be.visible")
+          .and("not.be.disabled");
+      });
+
+    // Change default and enforced values
+    cy.contains("admin.room_types.default_room_settings.title").should(
+      "be.visible",
+    );
+    cy.contains("rooms.settings.general.title").should("be.visible");
+
+    cy.get('[data-test="has-access-code-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.general.has_access_code")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "has-access-code",
+          true,
+          false,
+          false,
+        );
+      });
+
+    cy.get('[data-test="allow-guests-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.general.allow_guests")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "allow-guests",
+          false,
+          false,
+          false,
+        );
+      });
+
+    cy.get("#allow-guests-default").click();
+    cy.get('[data-test="allow-guests-enforced"]').click();
+
+    cy.contains("rooms.settings.video_conference.title").should("be.visible");
+
+    cy.get('[data-test="everyone-can-start-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.video_conference.everyone_can_start")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "everyone-can-start",
+          false,
+          false,
+          false,
+        );
+      });
+
+    cy.get('[data-test="mute-on-start-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.video_conference.mute_on_start")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "mute-on-start",
+          false,
+          false,
+          false,
+        );
+      });
+
+    cy.get("#mute-on-start-default").click();
+    cy.get('[data-test="mute-on-start-enforced"]').click();
+
+    cy.get('[data-test="lobby-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.video_conference.lobby.title")
+      .within(() => {
+        cy.get('[data-test="lobby-disabled-field"]')
+          .should("be.visible")
+          .and("include.text", "app.disabled")
+          .within(() => {
+            cy.get("#lobby-disabled")
+              .should("be.checked")
+              .and("not.be.disabled");
+          });
+
+        cy.get('[data-test="lobby-enabled-field"]')
+          .should("be.visible")
+          .and("include.text", "app.enabled")
+          .within(() => {
+            cy.get("#lobby-enabled")
+              .should("not.be.checked")
+              .and("not.be.disabled");
+          });
+
+        cy.get('[data-test="lobby-only-for-guests-field"]')
+          .should("be.visible")
+          .and(
+            "include.text",
+            "rooms.settings.video_conference.lobby.only_for_guests_enabled",
+          )
+          .within(() => {
+            cy.get("#lobby-only-for-guests")
+              .should("not.be.checked")
+              .and("not.be.disabled");
+          });
+
+        cy.get("#lobby-only-for-guests").click();
+
+        cy.get('[data-test="lobby-enforced"]')
+          .should("have.text", "admin.room_types.default_room_settings.default")
+          .click();
+      });
+
+    cy.contains("rooms.settings.recordings.title").should("be.visible");
+
+    cy.get('[data-test="record-attendance-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.recordings.record_attendance")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "record-attendance",
+          false,
+          false,
+          false,
+        );
+      });
+
+    cy.get('[data-test="record-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.recordings.record_video_conference")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "record",
+          false,
+          false,
+          false,
+        );
+      });
+
+    cy.get('[data-test="record-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.recordings.record_video_conference")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "record",
+          false,
+          false,
+          false,
+        );
+      });
+
+    cy.get('[data-test="auto-start-recording-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.recordings.auto_start_recording")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "auto-start-recording",
+          false,
+          false,
+          false,
+        );
+      });
+
+    cy.contains("rooms.settings.restrictions.title").should("be.visible");
+
+    cy.get('[data-test="disable-cam-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "rooms.settings.restrictions.lock_settings_disable_cam",
+      )
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "disable-cam",
+          false,
+          false,
+          false,
+        );
+      });
+
+    cy.get('[data-test="webcams-only-for-moderator-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "rooms.settings.restrictions.webcams_only_for_moderator",
+      )
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "webcams-only-for-moderator",
+          false,
+          false,
+          false,
+        );
+      });
+
+    cy.get("#webcams-only-for-moderator-default").click();
+
+    cy.get('[data-test="disable-mic-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "rooms.settings.restrictions.lock_settings_disable_mic",
+      )
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "disable-mic",
+          false,
+          false,
+          false,
+        );
+      });
+
+    cy.get('[data-test="disable-mic-enforced"]').click();
+
+    cy.get('[data-test="disable-public-chat-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "rooms.settings.restrictions.lock_settings_disable_public_chat",
+      )
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "disable-public-chat",
+          false,
+          false,
+          false,
+        );
+      });
+
+    cy.get("#disable-public-chat-default").click();
+
+    cy.get('[data-test="disable-private-chat-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "rooms.settings.restrictions.lock_settings_disable_private_chat",
+      )
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "disable-private-chat",
+          false,
+          false,
+          false,
+        );
+      });
+
+    cy.get('[data-test="disable-note-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "rooms.settings.restrictions.lock_settings_disable_note",
+      )
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "disable-note",
+          false,
+          false,
+          false,
+        );
+      });
+
+    cy.get("#disable-note-default").click();
+    cy.get('[data-test="disable-note-enforced"]').click();
+
+    cy.get('[data-test="hide-user-list-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "rooms.settings.restrictions.lock_settings_hide_user_list",
+      )
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "hide-user-list",
+          false,
+          false,
+          false,
+        );
+      });
+
+    cy.get("#hide-user-list-default").click();
+
+    cy.contains("rooms.settings.participants.title").should("be.visible");
+
+    cy.get('[data-test="allow-membership-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.participants.allow_membership")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "allow-membership",
+          false,
+          false,
+          false,
+        );
+      });
+
+    cy.get('[data-test="allow-membership-enforced"]').click();
+
+    cy.get('[data-test="default-role-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.participants.default_role.title")
+      .and(
+        "include.text",
+        "rooms.settings.participants.default_role.only_logged_in",
+      )
+      .within(() => {
+        cy.get('[data-test="default-role-default-button"]').should(
+          "have.length",
+          2,
+        );
+
+        cy.get('[data-test="default-role-default-button"]')
+          .eq(0)
+          .should("have.text", "rooms.roles.participant")
+          .should("have.attr", "aria-pressed", "true");
+
+        cy.get('[data-test="default-role-default-button"]')
+          .eq(1)
+          .should("have.text", "rooms.roles.moderator")
+          .should("not.have.attr", "aria-pressed", "true");
+
+        cy.get('[data-test="default-role-enforced"]').should(
+          "have.text",
+          "admin.room_types.default_room_settings.default",
+        );
+      });
+
+    cy.contains("rooms.settings.advanced.title").should("be.visible");
+
+    cy.get('[data-test="visibility-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.advanced.visibility")
+      .within(() => {
+        cy.get('[data-test="visibility-default-button"]').should(
+          "have.length",
+          2,
+        );
+
+        cy.get('[data-test="visibility-default-button"]')
+          .eq(0)
+          .should("have.text", "rooms.settings.advanced.visibility.private")
+          .should("have.attr", "aria-pressed", "true");
+
+        cy.get('[data-test="visibility-default-button"]')
+          .eq(1)
+          .should("have.text", "rooms.settings.advanced.visibility.public")
+          .should("not.have.attr", "aria-pressed", "true")
+          .click();
+
+        cy.get('[data-test="visibility-enforced"]').should(
+          "have.text",
+          "admin.room_types.default_room_settings.default",
+        );
+      });
+
+    // Change other settings
+    cy.contains("admin.room_types.bbb_api.title").should("be.visible");
+
+    cy.get('[data-test="create-parameters-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.room_types.bbb_api.create_parameters")
+      .and(
+        "include.text",
+        "admin.room_types.bbb_api.create_parameters_description",
+      )
+      .within(() => {
+        cy.get("#create-parameters")
+          .should("have.value", "")
+          .type(
+            "meetingLayout=PRESENTATION_FOCUS\nmeta_category=FINANCE\ndisabledFeatures=learningDashboard,virtualBackgrounds",
+          );
+      });
+
+    // Add new room type
+    cy.fixture("roomType.json").then((roomType) => {
+      roomType.data.id = 30;
+      roomType.data.name = "Exam 01";
+      roomType.data.description = "Room type description for room type Exam 01";
+      roomType.data.color = "#ef4444";
+      roomType.data.server_pool = {
+        id: 2,
+        name: "Production",
+        description: "Pool for production",
+        servers_count: 1,
+        model_name: "ServerPool",
+        updated_at: "2020-12-21T13:43:21.000000Z",
+      };
+
+      const newRoomTypeRequest = interceptIndefinitely(
+        "POST",
+        "api/v1/roomTypes",
+        {
+          statusCode: 201,
+          body: roomType,
+        },
+        "newRoomTypeRequest",
+      );
+
+      cy.intercept("GET", "api/v1/roomTypes/30", {
+        statusCode: 200,
+        body: roomType,
+      }).as("roomTypeRequest");
+
+      cy.get('[data-test="overlay"]').should("not.exist");
+
+      cy.get('[data-test="room-types-save-button"]')
+        .should("have.text", "app.save")
+        .click();
+
+      // Check loading
+      cy.get('[data-test="overlay"]').should("be.visible");
+      cy.get("#room-type-name").should("be.disabled");
+      cy.get("#description").should("be.disabled");
+      for (let i = 0; i < 10; i++) {
+        cy.get('[data-test="color-button"]')
+          .eq(i)
+          .should("have.attr", "role", "button")
+          .and(
+            "have.class",
+            "pointer-events-none cursor-not-allowed opacity-80",
+          );
+      }
+      cy.get("#custom-color").should("be.disabled");
+      cy.get('[data-test="server-pool-dropdown"]').should(
+        "have.class",
+        "multiselect--disabled",
+      );
+
+      cy.get("#restrict").should("be.disabled");
+
+      cy.get("#max-participants").should("be.disabled");
+      cy.get('[data-test="clear-max-participants-button"]')
+        .should("be.visible")
+        .and("be.disabled");
+      cy.get("#max-duration").should("be.disabled");
+      cy.get('[data-test="clear-max-duration-button"]')
+        .should("be.visible")
+        .and("be.disabled");
+
+      cy.get("#has-access-code-default").should("be.disabled");
+      cy.get('[data-test="has-access-code-enforced"]').should("be.disabled");
+      cy.get("#allow-guests-default").should("be.disabled");
+      cy.get('[data-test="allow-guests-enforced"]').should("be.disabled");
+      cy.get("#everyone-can-start-default").should("be.disabled");
+      cy.get('[data-test="everyone-can-start-enforced"]').should("be.disabled");
+      cy.get("#mute-on-start-default").should("be.disabled");
+      cy.get('[data-test="mute-on-start-enforced"]').should("be.disabled");
+      cy.get("#lobby-disabled").should("be.disabled");
+      cy.get("#lobby-enabled").should("be.disabled");
+      cy.get("#lobby-only-for-guests").should("be.disabled");
+      cy.get('[data-test="lobby-enforced"]').should("be.disabled");
+      cy.get("#record-attendance-default").should("be.disabled");
+      cy.get('[data-test="record-attendance-enforced"]').should("be.disabled");
+      cy.get("#record-default").should("be.disabled");
+      cy.get('[data-test="record-enforced"]').should("be.disabled");
+      cy.get("#auto-start-recording-default").should("be.disabled");
+      cy.get('[data-test="auto-start-recording-enforced"]').should(
+        "be.disabled",
+      );
+      cy.get("#disable-cam-default").should("be.disabled");
+      cy.get('[data-test="disable-cam-enforced"]').should("be.disabled");
+      cy.get("#webcams-only-for-moderator-default").should("be.disabled");
+      cy.get('[data-test="webcams-only-for-moderator-enforced"]').should(
+        "be.disabled",
+      );
+      cy.get("#disable-mic-default").should("be.disabled");
+      cy.get('[data-test="disable-mic-enforced"]').should("be.disabled");
+      cy.get("#disable-public-chat-default").should("be.disabled");
+      cy.get('[data-test="disable-public-chat-enforced"]').should(
+        "be.disabled",
+      );
+      cy.get("#disable-private-chat-default").should("be.disabled");
+      cy.get('[data-test="disable-private-chat-enforced"]').should(
+        "be.disabled",
+      );
+      cy.get("#disable-note-default").should("be.disabled");
+      cy.get('[data-test="disable-note-enforced"]').should("be.disabled");
+      cy.get("#hide-user-list-default").should("be.disabled");
+      cy.get('[data-test="hide-user-list-enforced"]').should("be.disabled");
+      cy.get("#allow-membership-default").should("be.disabled");
+      cy.get('[data-test="allow-membership-enforced"]').should("be.disabled");
+      cy.get('[data-test="default-role-default-button"]').should(
+        "have.length",
+        2,
+      );
+      cy.get('[data-test="default-role-default-button"]')
+        .eq(0)
+        .should("be.disabled");
+      cy.get('[data-test="default-role-default-button"]')
+        .eq(1)
+        .should("be.disabled");
+      cy.get('[data-test="default-role-enforced"]').should("be.disabled");
+      cy.get('[data-test="visibility-default-button"]').should(
+        "have.length",
+        2,
+      );
+      cy.get('[data-test="visibility-default-button"]')
+        .eq(0)
+        .should("be.disabled");
+      cy.get('[data-test="visibility-default-button"]')
+        .eq(1)
+        .should("be.disabled");
+      cy.get('[data-test="visibility-enforced"]').should("be.disabled");
+
+      cy.get('[data-test="room-types-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          newRoomTypeRequest.sendResponse();
+        });
+
+      const roomTypeRequestData = { ...roomType.data };
+      roomTypeRequestData.server_pool = roomTypeRequestData.server_pool.id;
+      delete roomTypeRequestData.id;
+      delete roomTypeRequestData.model_name;
+
+      cy.wait("@newRoomTypeRequest").then((interception) => {
+        expect(interception.request.body).to.eql(roomTypeRequestData);
+      });
+    });
+
+    cy.wait("@roomTypeRequest");
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that room type page is shown
+    cy.url().should("include", "/admin/room_types/30");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.room_types.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.room_types.view_{"name":"Exam 01"}',
+      );
+  });
+
+  it("add new room type with restrictions", function () {
+    cy.visit("/admin/room_types/new");
+
+    // Check that header buttons are hidden
+    cy.get('[data-test="room-types-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="room-types-edit-button"]').should("not.exist");
+    cy.get('[data-test="room-types-delete-button"]').should("not.exist");
+
+    cy.get("#room-type-name").should("have.value", "").type("Exam");
+
+    cy.get(".multiselect__content").should("not.be.visible");
+    cy.get('[data-test="server-pool-dropdown"]').click();
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").eq(0).click();
+
+    cy.get(".multiselect__content").should("not.be.visible");
+    cy.get('[data-test="server-pool-dropdown"]').within(() => {
+      cy.get(".multiselect__tags").should("include.text", "Test");
+    });
+
+    cy.get('[data-test="restrict-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.room_types.restrict")
+      .within(() => {
+        cy.get("#restrict")
+          .should("not.be.checked")
+          .and("not.be.disabled")
+          .click();
+      });
+
+    // Check role setting and change it
+    cy.get(".multiselect__content").should("not.be.visible");
+    cy.get('[data-test="role-field"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="role-dropdown"]').within(() => {
+          cy.get(".multiselect__tags")
+            .should("include.text", "admin.roles.select_roles")
+            .click();
+          cy.get('[data-test="role-chip"]').should("have.length", 0);
+        });
+      });
+
+    // Check if correct options are shown
+    cy.get(".multiselect__content")
+      .eq(1)
+      .should("be.visible")
+      .within(() => {
+        cy.get(".multiselect__option").should("have.length", 5);
+        cy.get(".multiselect__option")
+          .eq(0)
+          .should("include.text", "Superuser")
+          .and("include.text", "admin.roles.superuser")
+          .and("be.visible");
+        cy.get(".multiselect__option")
+          .eq(1)
+          .should("include.text", "Staff")
+          .and("be.visible");
+        cy.get(".multiselect__option")
+          .eq(2)
+          .should("include.text", "Students")
+          .and("be.visible");
+        cy.get(".multiselect__option")
+          .eq(3)
+          .should(
+            "include.text",
+            "No elements found. Consider changing the search query.",
+          )
+          .and("not.be.visible");
+        cy.get(".multiselect__option")
+          .eq(4)
+          .should("include.text", "admin.roles.no_data")
+          .and("not.be.visible");
+      });
+
+    // Switch to next page
+    const userRoleRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/roles*",
+      {
+        statusCode: 200,
+        body: {
+          data: [
+            {
+              id: 4,
+              name: "Dean",
+              default: false,
+              updated_at: "2021-01-08T15:51:08.000000Z",
+              model_name: "Role",
+              room_limit: 20,
+            },
+            {
+              id: 5,
+              name: "Faculty",
+              default: false,
+              updated_at: "2021-03-19T09:12:44.000000Z",
+              model_name: "Role",
+              room_limit: 20,
+            },
+            {
+              id: 6,
+              name: "Manager",
+              default: false,
+              updated_at: "2021-05-22T11:55:21.000000Z",
+              model_name: "Role",
+              room_limit: -1,
+            },
+          ],
+          meta: {
+            current_page: 2,
+            from: 4,
+            last_page: 2,
+            per_page: 3,
+            to: 6,
+            total: 6,
+          },
+        },
+      },
+      "userRoleRequest",
+    );
+
+    cy.get(".multiselect__content")
+      .eq(1)
+
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="previous-page-button"]')
+          .should("include.text", "app.previous_page")
+          .and("be.disabled");
+        cy.get('[data-test="next-page-button"]')
+          .should("include.text", "app.next_page")
+          .and("not.be.disabled");
+
+        cy.get('[data-test="next-page-button"]').click();
+
+        // Check loading
+        cy.get('[data-test="previous-page-button"]').should("be.disabled");
+        cy.get('[data-test="next-page-button"]').should("be.disabled");
+      });
+
+    cy.get('[data-test="role-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="room-types-save-button"]')
+      .should("be.disabled")
+      .then(() => {
+        userRoleRequest.sendResponse();
+      });
+
+    cy.wait("@userRoleRequest");
+
+    cy.get(".multiselect__content")
+      .eq(1)
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="previous-page-button"]').should("not.be.disabled");
+        cy.get('[data-test="next-page-button"]').should("be.disabled");
+
+        cy.get(".multiselect__option").should("have.length", 5);
+        cy.get(".multiselect__option")
+          .eq(0)
+          .should("include.text", "Dean")
+          .and("be.visible");
+        cy.get(".multiselect__option")
+          .eq(1)
+          .should("include.text", "Faculty")
+          .and("be.visible");
+        cy.get(".multiselect__option")
+          .eq(2)
+          .should("include.text", "Manager")
+          .and("be.visible");
+        cy.get(".multiselect__option")
+          .eq(3)
+          .should(
+            "include.text",
+            "No elements found. Consider changing the search query.",
+          )
+          .and("not.be.visible");
+        cy.get(".multiselect__option")
+          .eq(4)
+          .should("include.text", "admin.roles.no_data")
+          .and("not.be.visible");
+
+        // Select roles
+        cy.get(".multiselect__option").eq(0).click();
+        cy.get(".multiselect__option").eq(2).click();
+      });
+
+    // Check that roles are shown
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get('[data-test="role-dropdown"]').within(() => {
+      cy.get('[data-test="role-chip"]').should("have.length", 2);
+      cy.get('[data-test="role-chip"]')
+        .eq(0)
+        .should("include.text", "Dean")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+
+      cy.get('[data-test="role-chip"]')
+        .eq(1)
+        .should("include.text", "Manager")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+    });
+
+    // Close dialog
+    cy.get(".multiselect__select").eq(1).click();
+
+    // Check that dialog is closed
+    cy.get(".multiselect__content").should("not.be.visible");
+
+    // Add new room type
+    cy.fixture("roomType.json").then((roomType) => {
+      roomType.data.id = 30;
+      roomType.data.description = "";
+      roomType.data.color = "#6366f1";
+      roomType.data.server_pool = {
+        id: 1,
+        name: "Test",
+        description: "Pool for testing",
+        servers_count: 2,
+        model_name: "ServerPool",
+        updated_at: "2020-12-21T13:43:21.000000Z",
+      };
+      roomType.data.max_participants = null;
+      roomType.data.max_duration = null;
+      roomType.data.create_parameters = null;
+      roomType.data.restrict = true;
+      roomType.data.roles = [
+        {
+          id: 4,
+          name: "Dean",
+        },
+        {
+          id: 6,
+          name: "Manager",
+        },
+      ];
+      roomType.data.mute_on_start_default = false;
+      roomType.data.mute_on_start_enforced = false;
+      roomType.data.lock_settings_disable_cam_default = false;
+      roomType.data.lock_settings_disable_cam_enforced = false;
+      roomType.data.webcams_only_for_moderator_default = false;
+      roomType.data.webcams_only_for_moderator_enforced = false;
+      roomType.data.lock_settings_disable_mic_default = false;
+      roomType.data.lock_settings_disable_mic_enforced = false;
+      roomType.data.lock_settings_disable_private_chat_default = false;
+      roomType.data.lock_settings_disable_private_chat_enforced = false;
+      roomType.data.lock_settings_disable_public_chat_default = false;
+      roomType.data.lock_settings_disable_public_chat_enforced = false;
+      roomType.data.lock_settings_disable_note_default = false;
+      roomType.data.lock_settings_disable_note_enforced = false;
+      roomType.data.lock_settings_hide_user_list_default = false;
+      roomType.data.lock_settings_hide_user_list_enforced = false;
+      roomType.data.everyone_can_start_default = false;
+      roomType.data.everyone_can_start_enforced = false;
+      roomType.data.allow_membership_default = false;
+      roomType.data.allow_membership_enforced = false;
+      roomType.data.allow_guests_default = false;
+      roomType.data.allow_guests_enforced = false;
+      roomType.data.default_role_default = 1;
+      roomType.data.default_role_enforced = false;
+      roomType.data.lobby_default = 0;
+      roomType.data.lobby_enforced = false;
+      roomType.data.visibility_default = 0;
+      roomType.data.visibility_enforced = false;
+      roomType.data.record_attendance_default = false;
+      roomType.data.record_attendance_enforced = false;
+      roomType.data.record_default = false;
+      roomType.data.record_enforced = false;
+      roomType.data.auto_start_recording_default = false;
+      roomType.data.auto_start_recording_enforced = false;
+      roomType.data.has_access_code_default = true;
+      roomType.data.has_access_code_enforced = false;
+
+      const newRoomTypeRequest = interceptIndefinitely(
+        "POST",
+        "api/v1/roomTypes",
+        {
+          statusCode: 201,
+          body: roomType,
+        },
+        "newRoomTypeRequest",
+      );
+
+      cy.intercept("GET", "api/v1/roomTypes/30", {
+        statusCode: 200,
+        body: roomType,
+      }).as("roomTypeRequest");
+
+      cy.get('[data-test="overlay"]').should("not.exist");
+
+      cy.get('[data-test="room-types-save-button"]')
+        .should("have.text", "app.save")
+        .click();
+
+      // Check loading
+      cy.get('[data-test="overlay"]').should("be.visible");
+
+      cy.get("#restrict").should("be.disabled");
+      cy.get('[data-test="role-dropdown"]').should(
+        "have.class",
+        "multiselect--disabled",
+      );
+
+      cy.get('[data-test="room-types-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          newRoomTypeRequest.sendResponse();
+        });
+
+      const roomTypeRequestData = { ...roomType.data };
+      roomTypeRequestData.server_pool = roomTypeRequestData.server_pool.id;
+      delete roomTypeRequestData.id;
+      delete roomTypeRequestData.model_name;
+      delete roomTypeRequestData.description;
+      roomTypeRequestData.roles = roomTypeRequestData.roles.map(
+        (role) => role.id,
+      );
+
+      cy.wait("@newRoomTypeRequest").then((interception) => {
+        expect(interception.request.body).to.eql(roomTypeRequestData);
+      });
+    });
+
+    cy.wait("@roomTypeRequest");
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that room type page is shown
+    cy.url().should("include", "/admin/room_types/30");
+  });
+
+  it("add new room type errors", function () {
+    cy.visit("/admin/room_types/new");
+
+    cy.get("#restrict").click();
+
+    // Check with 422 error
+    cy.intercept("POST", "api/v1/roomTypes", {
+      statusCode: 422,
+      body: {
+        message: "The given data was invalid.",
+        errors: {
+          name: ["The name field is required."],
+          description: ["The description field is required."],
+          color: ["The color field is required."],
+          server_pool: ["The server pool field is required."],
+          max_participants: ["The max participants field is required."],
+          max_duration: ["The max duration field is required."],
+          create_parameters: ["The create parameters field is required."],
+          roles: ["The roles field is required."],
+          has_access_code_default: [
+            "The has access code default field is required.",
+          ],
+          has_access_code_enforced: [
+            "The has access code enforced field is required.",
+          ],
+          allow_guests_default: ["The allow guests default field is required."],
+          allow_guests_enforced: [
+            "The allow guests enforced field is required.",
+          ],
+          everyone_can_start_default: [
+            "The everyone can start default field is required.",
+          ],
+          everyone_can_start_enforced: [
+            "The everyone can start enforced field is required.",
+          ],
+          mute_on_start_default: [
+            "The mute on start default field is required.",
+          ],
+          mute_on_start_enforced: [
+            "The mute on start enforced field is required.",
+          ],
+          lobby_default: ["The lobby default field is required."],
+          lobby_enforced: ["The lobby enforced field is required."],
+          record_attendance_default: [
+            "The record attendance default field is required.",
+          ],
+          record_attendance_enforced: [
+            "The record attendance enforced field is required.",
+          ],
+          record_default: ["The record default field is required."],
+          record_enforced: ["The record enforced field is required."],
+          auto_start_recording_default: [
+            "The auto start recording default field is required.",
+          ],
+          auto_start_recording_enforced: [
+            "The auto start recording enforced field is required.",
+          ],
+          lock_settings_disable_cam_default: [
+            "The lock settings disable cam default field is required.",
+          ],
+          lock_settings_disable_cam_enforced: [
+            "The lock settings disable cam enforced field is required.",
+          ],
+          webcams_only_for_moderator_default: [
+            "The webcams only for moderator default field is required.",
+          ],
+          webcams_only_for_moderator_enforced: [
+            "The webcams only for moderator enforced field is required.",
+          ],
+          lock_settings_disable_mic_default: [
+            "The lock settings disable mic default field is required.",
+          ],
+          lock_settings_disable_mic_enforced: [
+            "The lock settings disable mic enforced field is required.",
+          ],
+          lock_settings_disable_public_chat_default: [
+            "The lock settings disable public chat default field is required.",
+          ],
+          lock_settings_disable_public_chat_enforced: [
+            "The lock settings disable public chat enforced field is required.",
+          ],
+          lock_settings_disable_private_chat_default: [
+            "The lock settings disable private chat default field is required.",
+          ],
+          lock_settings_disable_private_chat_enforced: [
+            "The lock settings disable private chat enforced field is required.",
+          ],
+          lock_settings_disable_note_default: [
+            "The lock settings disable note default field is required.",
+          ],
+          lock_settings_disable_note_enforced: [
+            "The lock settings disable note enforced field is required.",
+          ],
+          lock_settings_hide_user_list_default: [
+            "The lock settings hide user list default field is required.",
+          ],
+          lock_settings_hide_user_list_enforced: [
+            "The lock settings hide user list enforced field is required.",
+          ],
+          allow_membership_default: [
+            "The allow membership default field is required.",
+          ],
+          allow_membership_enforced: [
+            "The allow membership enforced field is required.",
+          ],
+          default_role_default: ["The default role default field is required."],
+          default_role_enforced: [
+            "The default role enforced field is required.",
+          ],
+          visibility_default: ["The visibility default field is required."],
+          visibility_enforced: ["The visibility enforced field is required."],
+        },
+      },
+    }).as("newRoomTypeRequest");
+
+    cy.get('[data-test="room-types-save-button"]').click();
+
+    cy.wait("@newRoomTypeRequest");
+
+    // Check error messages
+    cy.get('[data-test="room-type-name-field"]').should(
+      "include.text",
+      "The name field is required.",
+    );
+    cy.get('[data-test="description-field"]').should(
+      "include.text",
+      "The description field is required.",
+    );
+    cy.get('[data-test="color-field"]').should(
+      "include.text",
+      "The color field is required.",
+    );
+    cy.get('[data-test="server-pool-field"]').should(
+      "include.text",
+      "The server pool field is required.",
+    );
+    cy.get('[data-test="max-participants-field"]').should(
+      "include.text",
+      "The max participants field is required.",
+    );
+    cy.get('[data-test="max-duration-field"]').should(
+      "include.text",
+      "The max duration field is required.",
+    );
+    cy.get('[data-test="create-parameters-field"]').should(
+      "include.text",
+      "The create parameters field is required.",
+    );
+    cy.get('[data-test="role-field"]').should(
+      "include.text",
+      "The roles field is required.",
+    );
+    cy.get('[data-test="has-access-code-field"]')
+      .should("include.text", "The has access code default field is required.")
+      .and("include.text", "The has access code enforced field is required.");
+    cy.get('[data-test="allow-guests-field"]')
+      .should("include.text", "The allow guests default field is required.")
+      .and("include.text", "The allow guests enforced field is required.");
+    cy.get('[data-test="everyone-can-start-field"]')
+      .should(
+        "include.text",
+        "The everyone can start default field is required.",
+      )
+      .and(
+        "include.text",
+        "The everyone can start enforced field is required.",
+      );
+    cy.get('[data-test="mute-on-start-field"]')
+      .should("include.text", "The mute on start default field is required.")
+      .and("include.text", "The mute on start enforced field is required.");
+    cy.get('[data-test="lobby-field"]')
+      .should("include.text", "The lobby default field is required.")
+      .and("include.text", "The lobby enforced field is required.");
+    cy.get('[data-test="record-attendance-field"]')
+      .should(
+        "include.text",
+        "The record attendance default field is required.",
+      )
+      .and("include.text", "The record attendance enforced field is required.");
+    cy.get('[data-test="record-field"]')
+      .should("include.text", "The record default field is required.")
+      .and("include.text", "The record enforced field is required.");
+    cy.get('[data-test="auto-start-recording-field"]')
+      .should(
+        "include.text",
+        "The auto start recording default field is required.",
+      )
+      .and(
+        "include.text",
+        "The auto start recording enforced field is required.",
+      );
+    cy.get('[data-test="disable-cam-field"]')
+      .should(
+        "include.text",
+        "The lock settings disable cam default field is required.",
+      )
+      .and(
+        "include.text",
+        "The lock settings disable cam enforced field is required.",
+      );
+    cy.get('[data-test="webcams-only-for-moderator-field"]')
+      .should(
+        "include.text",
+        "The webcams only for moderator default field is required.",
+      )
+      .and(
+        "include.text",
+        "The webcams only for moderator enforced field is required.",
+      );
+    cy.get('[data-test="disable-mic-field"]')
+      .should(
+        "include.text",
+        "The lock settings disable mic default field is required.",
+      )
+      .and(
+        "include.text",
+        "The lock settings disable mic enforced field is required.",
+      );
+    cy.get('[data-test="disable-public-chat-field"]')
+      .should(
+        "include.text",
+        "The lock settings disable public chat default field is required.",
+      )
+      .and(
+        "include.text",
+        "The lock settings disable public chat enforced field is required.",
+      );
+    cy.get('[data-test="disable-private-chat-field"]')
+      .should(
+        "include.text",
+        "The lock settings disable private chat default field is required.",
+      )
+      .and(
+        "include.text",
+        "The lock settings disable private chat enforced field is required.",
+      );
+    cy.get('[data-test="disable-note-field"]')
+      .should(
+        "include.text",
+        "The lock settings disable note default field is required.",
+      )
+      .and(
+        "include.text",
+        "The lock settings disable note enforced field is required.",
+      );
+    cy.get('[data-test="hide-user-list-field"]')
+      .should(
+        "include.text",
+        "The lock settings hide user list default field is required.",
+      )
+      .and(
+        "include.text",
+        "The lock settings hide user list enforced field is required.",
+      );
+    cy.get('[data-test="allow-membership-field"]')
+      .should("include.text", "The allow membership default field is required.")
+      .and("include.text", "The allow membership enforced field is required.");
+    cy.get('[data-test="default-role-field"]')
+      .should("include.text", "The default role default field is required.")
+      .and("include.text", "The default role enforced field is required.");
+    cy.get('[data-test="visibility-field"]')
+      .should("include.text", "The visibility default field is required.")
+      .and("include.text", "The visibility enforced field is required.");
+
+    // Check with 500 error
+    cy.intercept("POST", "api/v1/roomTypes", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("newRoomTypeRequest");
+
+    cy.get('[data-test="room-types-save-button"]').click();
+
+    cy.wait("@newRoomTypeRequest");
+
+    // Check error message
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that 422 error messages are hidden
+    cy.get('[data-test="room-type-name-field"]').should(
+      "not.include.text",
+      "The name field is required.",
+    );
+    cy.get('[data-test="description-field"]').should(
+      "not.include.text",
+      "The description field is required.",
+    );
+    cy.get('[data-test="color-field"]').should(
+      "not.include.text",
+      "The color field is required.",
+    );
+    cy.get('[data-test="server-pool-field"]').should(
+      "not.include.text",
+      "The server pool field is required.",
+    );
+    cy.get('[data-test="max-participants-field"]').should(
+      "not.include.text",
+      "The max participants field is required.",
+    );
+    cy.get('[data-test="max-duration-field"]').should(
+      "not.include.text",
+      "The max duration field is required.",
+    );
+    cy.get('[data-test="create-parameters-field"]').should(
+      "not.include.text",
+      "The create parameters field is required.",
+    );
+    cy.get('[data-test="role-field"]').should(
+      "not.include.text",
+      "The roles field is required.",
+    );
+    cy.get('[data-test="has-access-code-field"]')
+      .should(
+        "not.include.text",
+        "The has access code default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The has access code enforced field is required.",
+      );
+    cy.get('[data-test="allow-guests-field"]')
+      .should("not.include.text", "The allow guests default field is required.")
+      .and("not.include.text", "The allow guests enforced field is required.");
+    cy.get('[data-test="everyone-can-start-field"]')
+      .should(
+        "not.include.text",
+        "The everyone can start default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The everyone can start enforced field is required.",
+      );
+    cy.get('[data-test="mute-on-start-field"]')
+      .should(
+        "not.include.text",
+        "The mute on start default field is required.",
+      )
+      .and("not.include.text", "The mute on start enforced field is required.");
+    cy.get('[data-test="lobby-field"]')
+      .should("not.include.text", "The lobby default field is required.")
+      .and("not.include.text", "The lobby enforced field is required.");
+    cy.get('[data-test="record-attendance-field"]')
+      .should(
+        "not.include.text",
+        "The record attendance default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The record attendance enforced field is required.",
+      );
+    cy.get('[data-test="record-field"]')
+      .should("not.include.text", "The record default field is required.")
+      .and("not.include.text", "The record enforced field is required.");
+    cy.get('[data-test="auto-start-recording-field"]')
+      .should(
+        "not.include.text",
+        "The auto start recording default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The auto start recording enforced field is required.",
+      );
+    cy.get('[data-test="disable-cam-field"]')
+      .should(
+        "not.include.text",
+        "The lock settings disable cam default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The lock settings disable cam enforced field is required.",
+      );
+    cy.get('[data-test="webcams-only-for-moderator-field"]')
+      .should(
+        "not.include.text",
+        "The webcams only for moderator default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The webcams only for moderator enforced field is required.",
+      );
+    cy.get('[data-test="disable-mic-field"]')
+      .should(
+        "not.include.text",
+        "The lock settings disable mic default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The lock settings disable mic enforced field is required.",
+      );
+    cy.get('[data-test="disable-public-chat-field"]')
+      .should(
+        "not.include.text",
+        "The lock settings disable public chat default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The lock settings disable public chat enforced field is required.",
+      );
+    cy.get('[data-test="disable-private-chat-field"]')
+      .should(
+        "not.include.text",
+        "The lock settings disable private chat default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The lock settings disable private chat enforced field is required.",
+      );
+    cy.get('[data-test="disable-note-field"]')
+      .should(
+        "not.include.text",
+        "The lock settings disable note default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The lock settings disable note enforced field is required.",
+      );
+    cy.get('[data-test="hide-user-list-field"]')
+      .should(
+        "not.include.text",
+        "The lock settings hide user list default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The lock settings hide user list enforced field is required.",
+      );
+    cy.get('[data-test="allow-membership-field"]')
+      .should(
+        "not.include.text",
+        "The allow membership default field is required.",
+      )
+      .and(
+        "not.include.text",
+        "The allow membership enforced field is required.",
+      );
+    cy.get('[data-test="default-role-field"]')
+      .should("not.include.text", "The default role default field is required.")
+      .and("not.include.text", "The default role enforced field is required.");
+    cy.get('[data-test="visibility-field"]')
+      .should("not.include.text", "The visibility default field is required.")
+      .and("not.include.text", "The visibility enforced field is required.");
+
+    // Check with 401 error
+    cy.intercept("POST", "api/v1/roomTypes", {
+      statusCode: 401,
+    }).as("newRoomTypeRequest");
+
+    cy.get('[data-test="room-types-save-button"]').click();
+
+    cy.wait("@newRoomTypeRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/room_types/new");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("load roles errors", function () {
+    // Check with 500 error
+    const rolesRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/roles*",
+      {
+        statusCode: 500,
+        body: {
+          message: "Test",
+        },
+      },
+      "rolesRequest",
+    );
+
+    cy.visit("/admin/room_types/new");
+
+    cy.get("#restrict").click();
+
+    // Check loading
+    cy.get('[data-test="room-types-save-button"]').should("be.disabled");
+
+    cy.get('[data-test="role-dropdown"]')
+      .should("have.class", "multiselect--disabled")
+      .then(() => {
+        rolesRequest.sendResponse();
+      });
+
+    cy.wait("@rolesRequest");
+
+    // Check error message
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    cy.get('[data-test="role-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="room-types-save-button"]').should("not.be.disabled");
+
+    // Reload roles without errors
+    cy.intercept("GET", "api/v1/roles*", {
+      fixture: "roles.json",
+    }).as("rolesRequest");
+
+    cy.get('[data-test="roles-reload-button"]').click();
+
+    cy.wait("@rolesRequest");
+
+    cy.get('[data-test="role-dropdown"]').should(
+      "not.have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="room-types-save-button"]').should("not.be.disabled");
+
+    cy.get('[data-test="roles-reload-button"]').should("not.exist");
+
+    cy.get('[data-test="role-dropdown"]').click();
+
+    cy.get(".multiselect__content")
+      .eq(1)
+      .should("be.visible")
+      .within(() => {
+        cy.get(".multiselect__option").should("have.length", 5);
+      });
+
+    // Check with 500 error when switching pages
+    cy.intercept("GET", "api/v1/roles*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("rolesRequest");
+
+    cy.get(".multiselect__content")
+      .eq(1)
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="next-page-button"]').click();
+      });
+
+    cy.wait("@rolesRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    cy.get('[data-test="role-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="roles-reload-button"]').should("be.visible");
+
+    cy.get('[data-test="room-types-save-button"]').should("not.be.disabled");
+
+    // Check with 401 error
+    cy.intercept("GET", "api/v1/roles*", {
+      statusCode: 401,
+    }).as("rolesRequest");
+
+    cy.get("#restrict").click();
+    cy.get("#restrict").click();
+
+    cy.wait("@rolesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/room_types/new");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+
+    // Visit new page again with roles
+    cy.intercept("GET", "api/v1/roles*", {
+      fixture: "roles.json",
+    }).as("rolesRequest");
+
+    cy.visit("/admin/room_types/new");
+
+    cy.get("#restrict").click();
+
+    cy.wait("@rolesRequest");
+
+    cy.get('[data-test="role-dropdown"]').click();
+
+    // Check with 401 error when switching pages
+    cy.intercept("GET", "api/v1/roles*", {
+      statusCode: 401,
+    }).as("rolesRequest");
+
+    cy.get(".multiselect__content")
+      .eq(1)
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="next-page-button"]').click();
+      });
+
+    cy.wait("@rolesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/room_types/new");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("load server pools errors", function () {
+    // Check with 500 error
+    const serverPoolRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/serverPools*",
+      {
+        statusCode: 500,
+        body: {
+          message: "Test",
+        },
+      },
+      "serverPoolsRequest",
+    );
+
+    cy.visit("/admin/room_types/new");
+
+    // Check loading
+    cy.get('[data-test="room-types-save-button"]').should("be.disabled");
+
+    cy.get('[data-test="server-pool-dropdown"]')
+      .should("have.class", "multiselect--disabled")
+      .then(() => {
+        serverPoolRequest.sendResponse();
+      });
+
+    cy.wait("@serverPoolsRequest");
+
+    // Check error message
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    cy.get('[data-test="server-pool-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="room-types-save-button"]').should("be.disabled");
+
+    // Reload server pools without errors
+    cy.fixture("serverPools.json").then((serverPools) => {
+      serverPools.data = serverPools.data.slice(0, 1);
+      serverPools.meta.last_page = 2;
+      serverPools.meta.per_page = 1;
+      serverPools.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/serverPools*", {
+        statusCode: 200,
+        body: serverPools,
+      }).as("serverPoolsRequest");
+    });
+
+    cy.get('[data-test="server-pools-reload-button"]').click();
+
+    cy.wait("@serverPoolsRequest");
+
+    cy.get('[data-test="server-pool-dropdown"]').should(
+      "not.have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="room-types-save-button"]').should("not.be.disabled");
+
+    cy.get('[data-test="server-pools-reload-button"]').should("not.exist");
+
+    cy.get('[data-test="server-pool-dropdown"]').click();
+
+    cy.get(".multiselect__content")
+      .eq(0)
+      .should("be.visible")
+      .within(() => {
+        cy.get(".multiselect__option").should("have.length", 3);
+      });
+
+    // Check with 500 error when switching pages
+    cy.intercept("GET", "api/v1/serverPools*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("serverPoolsRequest");
+
+    cy.get(".multiselect__content")
+      .eq(0)
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="next-page-button"]').click();
+      });
+
+    cy.wait("@serverPoolsRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    cy.get('[data-test="server-pool-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="server-pools-reload-button"]').should("be.visible");
+
+    cy.get('[data-test="room-types-save-button"]').should("be.disabled");
+
+    // Check with 401 error
+    cy.intercept("GET", "api/v1/serverPools*", {
+      statusCode: 401,
+    }).as("serverPoolsRequest");
+
+    cy.reload();
+
+    cy.wait("@serverPoolsRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/room_types/new");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+
+    // Visit new page again with server pools
+    cy.fixture("serverPools.json").then((serverPools) => {
+      serverPools.data = serverPools.data.slice(0, 1);
+      serverPools.meta.last_page = 2;
+      serverPools.meta.per_page = 1;
+      serverPools.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/serverPools*", {
+        statusCode: 200,
+        body: serverPools,
+      }).as("serverPoolsRequest");
+    });
+
+    cy.visit("/admin/room_types/new");
+
+    cy.wait("@serverPoolsRequest");
+
+    cy.get('[data-test="server-pool-dropdown"]').click();
+
+    // Check with 401 error when switching pages
+    cy.intercept("GET", "api/v1/serverPools*", {
+      statusCode: 401,
+    }).as("serverPoolsRequest");
+
+    cy.get(".multiselect__content")
+      .eq(0)
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="next-page-button"]').click();
+      });
+
+    cy.wait("@serverPoolsRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/room_types/new");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminRoomTypesView.cy.js b/tests/Frontend/e2e/AdminRoomTypesView.cy.js
new file mode 100644
index 000000000..de7fd19f5
--- /dev/null
+++ b/tests/Frontend/e2e/AdminRoomTypesView.cy.js
@@ -0,0 +1,715 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin room types view", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminRoomTypesViewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view", "roomTypes.view"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin/room_types/3");
+  });
+
+  it("visit with user without permission to view room types", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/room_types/3");
+
+    cy.checkToastMessage("app.flash.unauthorized");
+
+    // Check if welcome page is shown
+    cy.url().should("not.include", "/admin/room_types/3");
+    cy.get("h1").should("be.visible").and("include.text", "home.title");
+  });
+
+  it("check roomTypeView shown correctly", function () {
+    const roomTypeRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/roomTypes/3",
+      { fixture: "roomType.json" },
+      "roomTypeRequest",
+    );
+
+    cy.visit("/admin/room_types/3");
+
+    cy.contains("admin.title");
+
+    // Check loading
+    cy.get('[data-test="room-types-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="room-types-edit-button"]').should("not.exist");
+    cy.get('[data-test="room-types-delete-button"]').should("not.exist");
+    cy.get('[data-test="room-types-save-button"]').should("not.exist");
+
+    cy.get('[data-test="overlay"]')
+      .should("be.visible")
+      .then(() => {
+        roomTypeRequest.sendResponse();
+      });
+
+    cy.wait("@roomTypeRequest");
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that buttons are still hidden
+    cy.get('[data-test="room-types-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="room-types-edit-button"]').should("not.exist");
+    cy.get('[data-test="room-types-delete-button"]').should("not.exist");
+    cy.get('[data-test="room-types-save-button"]').should("not.exist");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.room_types.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.room_types.view_{"name":"Exam"}',
+      );
+
+    // Check that room type data is shown correctly
+    cy.get('[data-test="room-type-name-field"]')
+      .should("be.visible")
+      .and("include.text", "app.model_name")
+      .within(() => {
+        cy.get("#room-type-name")
+          .should("have.value", "Exam")
+          .and("be.disabled");
+      });
+
+    cy.get('[data-test="description-field"]')
+      .should("be.visible")
+      .and("include.text", "app.description")
+      .within(() => {
+        cy.get("#description")
+          .should("have.value", "Room type description for room type Exam")
+          .and("be.disabled");
+      });
+
+    cy.get('[data-test="color-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.room_types.color")
+      .and("include.text", "admin.room_types.custom_color")
+      .within(() => {
+        cy.get('[data-test="color-button"]').should("have.length", 10);
+
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should("have.attr", "role", "button")
+            .and(
+              "have.class",
+              "pointer-events-none cursor-not-allowed opacity-80",
+            )
+            .and("not.have.class", "selected");
+        }
+
+        cy.get("#custom-color")
+          .should("have.value", "#4a5c66")
+          .and("be.disabled");
+      });
+
+    cy.get('[data-test="preview-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.room_types.preview")
+      .within(() => {
+        cy.get('[data-test="room-type-badge"]')
+          .should("have.css", "background-color", "rgb(74, 92, 102)")
+          .and("have.text", "Exam");
+      });
+
+    cy.get('[data-test="server-pool-field"]')
+      .should("be.visible")
+      .and("include.text", "app.server_pool")
+      .within(() => {
+        cy.get('[data-test="server-pool-dropdown"]')
+          .should("have.class", "multiselect--disabled")
+          .find(".multiselect__tags")
+          .should("have.text", "Test");
+      });
+
+    cy.get('[data-test="restrict-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.room_types.restrict")
+      .within(() => {
+        cy.get("#restrict").should("not.be.checked").and("be.disabled");
+      });
+
+    cy.get('[data-test="role-field"]').should("not.exist");
+
+    cy.get('[data-test="max-participants-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.room_types.max_participants")
+      .within(() => {
+        cy.get("#max-participants")
+          .should("have.value", "100")
+          .and("be.disabled");
+        cy.get('[data-test="clear-max-participants-button"]')
+          .should("be.visible")
+          .and("be.disabled");
+      });
+
+    cy.get('[data-test="max-duration-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.room_types.max_duration")
+      .within(() => {
+        cy.get("#max-duration")
+          .should("have.value", "120 min.")
+          .and("be.disabled");
+
+        cy.get('[data-test="clear-max-duration-button"]')
+          .should("be.visible")
+          .and("be.disabled");
+      });
+
+    // Check default and enforced settings
+    cy.contains("admin.room_types.default_room_settings.title").should(
+      "be.visible",
+    );
+    cy.contains("rooms.settings.general.title").should("be.visible");
+
+    cy.get('[data-test="has-access-code-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.general.has_access_code")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "has-access-code",
+          true,
+          false,
+          true,
+        );
+      });
+
+    cy.get('[data-test="allow-guests-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.general.allow_guests")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "allow-guests",
+          true,
+          true,
+          true,
+        );
+      });
+
+    cy.contains("rooms.settings.video_conference.title").should("be.visible");
+
+    cy.get('[data-test="everyone-can-start-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.video_conference.everyone_can_start")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "everyone-can-start",
+          false,
+          false,
+          true,
+        );
+      });
+
+    cy.get('[data-test="mute-on-start-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.video_conference.mute_on_start")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "mute-on-start",
+          true,
+          true,
+          true,
+        );
+      });
+
+    cy.get('[data-test="lobby-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.video_conference.lobby.title")
+      .within(() => {
+        cy.get('[data-test="lobby-disabled-field"]')
+          .should("be.visible")
+          .and("include.text", "app.disabled")
+          .within(() => {
+            cy.get("#lobby-disabled")
+              .should("not.be.checked")
+              .and("be.disabled");
+          });
+
+        cy.get('[data-test="lobby-enabled-field"]')
+          .should("be.visible")
+          .and("include.text", "app.enabled")
+          .within(() => {
+            cy.get("#lobby-enabled")
+              .should("not.be.checked")
+              .and("be.disabled");
+          });
+
+        cy.get('[data-test="lobby-only-for-guests-field"]')
+          .should("be.visible")
+          .and(
+            "include.text",
+            "rooms.settings.video_conference.lobby.only_for_guests_enabled",
+          )
+          .within(() => {
+            cy.get("#lobby-only-for-guests")
+              .should("be.checked")
+              .and("be.disabled");
+          });
+
+        cy.get('[data-test="lobby-enforced"]')
+          .should(
+            "have.text",
+            "admin.room_types.default_room_settings.enforced",
+          )
+          .and("be.disabled");
+      });
+
+    cy.contains("rooms.settings.recordings.title").should("be.visible");
+
+    cy.get('[data-test="record-attendance-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.recordings.record_attendance")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "record-attendance",
+          false,
+          false,
+          true,
+        );
+      });
+
+    cy.get('[data-test="record-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.recordings.record_video_conference")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "record",
+          false,
+          false,
+          true,
+        );
+      });
+
+    cy.get('[data-test="record-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.recordings.record_video_conference")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "record",
+          false,
+          false,
+          true,
+        );
+      });
+
+    cy.get('[data-test="auto-start-recording-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.recordings.auto_start_recording")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "auto-start-recording",
+          false,
+          false,
+          true,
+        );
+      });
+
+    cy.contains("rooms.settings.restrictions.title").should("be.visible");
+
+    cy.get('[data-test="disable-cam-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "rooms.settings.restrictions.lock_settings_disable_cam",
+      )
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "disable-cam",
+          false,
+          false,
+          true,
+        );
+      });
+
+    cy.get('[data-test="webcams-only-for-moderator-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "rooms.settings.restrictions.webcams_only_for_moderator",
+      )
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "webcams-only-for-moderator",
+          true,
+          false,
+          true,
+        );
+      });
+
+    cy.get('[data-test="disable-mic-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "rooms.settings.restrictions.lock_settings_disable_mic",
+      )
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "disable-mic",
+          false,
+          true,
+          true,
+        );
+      });
+
+    cy.get('[data-test="disable-public-chat-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "rooms.settings.restrictions.lock_settings_disable_public_chat",
+      )
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "disable-public-chat",
+          true,
+          false,
+          true,
+        );
+      });
+
+    cy.get('[data-test="disable-private-chat-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "rooms.settings.restrictions.lock_settings_disable_private_chat",
+      )
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "disable-private-chat",
+          false,
+          false,
+          true,
+        );
+      });
+
+    cy.get('[data-test="disable-note-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "rooms.settings.restrictions.lock_settings_disable_note",
+      )
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "disable-note",
+          true,
+          true,
+          true,
+        );
+      });
+
+    cy.get('[data-test="hide-user-list-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "rooms.settings.restrictions.lock_settings_hide_user_list",
+      )
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "hide-user-list",
+          true,
+          false,
+          true,
+        );
+      });
+
+    cy.contains("rooms.settings.participants.title").should("be.visible");
+
+    cy.get('[data-test="allow-membership-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.participants.allow_membership")
+      .within(() => {
+        cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+          "allow-membership",
+          false,
+          true,
+          true,
+        );
+      });
+
+    cy.get('[data-test="default-role-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.participants.default_role.title")
+      .and(
+        "include.text",
+        "rooms.settings.participants.default_role.only_logged_in",
+      )
+      .within(() => {
+        cy.get('[data-test="default-role-default-button"]').should(
+          "have.length",
+          2,
+        );
+
+        cy.get('[data-test="default-role-default-button"]')
+          .eq(0)
+          .should("have.text", "rooms.roles.participant")
+          .should("have.attr", "aria-pressed", "true")
+          .and("be.disabled");
+
+        cy.get('[data-test="default-role-default-button"]')
+          .eq(1)
+          .should("have.text", "rooms.roles.moderator")
+          .and("not.have.attr", "aria-pressed", "true")
+          .and("be.disabled");
+
+        cy.get('[data-test="default-role-enforced"]')
+          .should("have.text", "admin.room_types.default_room_settings.default")
+          .and("be.disabled");
+      });
+
+    cy.contains("rooms.settings.advanced.title").should("be.visible");
+
+    cy.get('[data-test="visibility-field"]')
+      .should("be.visible")
+      .and("include.text", "rooms.settings.advanced.visibility")
+      .within(() => {
+        cy.get('[data-test="visibility-default-button"]').should(
+          "have.length",
+          2,
+        );
+
+        cy.get('[data-test="visibility-default-button"]')
+          .eq(0)
+          .should("have.text", "rooms.settings.advanced.visibility.private")
+          .and("not.have.attr", "aria-pressed", "true")
+          .and("be.disabled");
+
+        cy.get('[data-test="visibility-default-button"]')
+          .eq(1)
+          .should("have.text", "rooms.settings.advanced.visibility.public")
+          .and("have.attr", "aria-pressed", "true")
+          .and("be.disabled");
+
+        cy.get('[data-test="visibility-enforced"]')
+          .should("have.text", "admin.room_types.default_room_settings.default")
+          .and("be.disabled");
+      });
+
+    // Check other settings
+    cy.contains("admin.room_types.bbb_api.title").should("be.visible");
+
+    cy.get('[data-test="create-parameters-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.room_types.bbb_api.create_parameters")
+      .and(
+        "include.text",
+        "admin.room_types.bbb_api.create_parameters_description",
+      )
+      .within(() => {
+        cy.get("#create-parameters")
+          .should(
+            "have.value",
+            "meetingLayout=PRESENTATION_FOCUS\nmeta_category=FINANCE\ndisabledFeatures=learningDashboard,virtualBackgrounds",
+          )
+          .and("be.disabled");
+      });
+  });
+
+  it("check restrictions shown correctly", function () {
+    cy.fixture("roomType.json").then((roomType) => {
+      roomType.data.restrict = true;
+      roomType.data.roles = [
+        {
+          id: 1,
+          name: "Superuser",
+        },
+        {
+          id: 2,
+          name: "Staff",
+        },
+      ];
+
+      cy.intercept("GET", "api/v1/roomTypes/3", {
+        statusCode: 200,
+        body: roomType,
+      });
+    });
+
+    cy.visit("/admin/room_types/3");
+
+    cy.get('[data-test="restrict-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.room_types.restrict")
+      .within(() => {
+        cy.get("#restrict").should("be.checked").and("be.disabled");
+      });
+
+    cy.get('[data-test="role-field"]')
+      .should("be.visible")
+      .and("include.text", "app.roles")
+      .within(() => {
+        cy.get('[data-test="role-dropdown"]')
+          .should("have.class", "multiselect--disabled")
+          .within(() => {
+            cy.get('[data-test="role-chip"]').should("have.length", 2);
+            cy.get('[data-test="role-chip"]')
+              .eq(0)
+              .should("include.text", "Superuser")
+              .find('[data-test="remove-server-button"]')
+              .should("not.exist");
+            cy.get('[data-test="role-chip"]')
+              .eq(1)
+              .should("include.text", "Staff")
+              .find('[data-test="remove-server-button"]')
+              .should("not.exist");
+          });
+      });
+  });
+
+  it("open view errors", function () {
+    cy.intercept("GET", "api/v1/roomTypes/3", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("roomTypeRequest");
+
+    cy.visit("/admin/room_types/3");
+
+    cy.wait("@roomTypeRequest");
+
+    // Check that overlay is shown
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Reload with correct data
+    cy.intercept("GET", "api/v1/roomTypes/3", {
+      statusCode: 200,
+      fixture: "roomType.json",
+    }).as("roomTypeRequest");
+
+    cy.get('[data-test="loading-retry-button"]')
+      .should("be.visible")
+      .and("have.text", "app.reload")
+      .click();
+
+    cy.wait("@roomTypeRequest");
+
+    // Check that overlay is not shown anymore
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
+
+    // Reload with 404 error
+    cy.interceptAdminRoomTypesIndexRequests();
+
+    cy.intercept("GET", "api/v1/roomTypes/3", {
+      statusCode: 404,
+      body: {
+        message: "No query results for model",
+      },
+    }).as("roomTypeRequest");
+
+    cy.reload();
+
+    cy.wait("@roomTypeRequest");
+
+    // Check that redirect worked
+    cy.url().should("not.include", "/admin/room_types/3");
+    cy.url().should("include", "/admin/room_types");
+
+    cy.wait("@roomTypesRequest");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"No query results for model"}',
+      'app.flash.server_error.error_code_{"statusCode":404}',
+    ]);
+
+    // Reload page with 401 error
+    cy.intercept("GET", "api/v1/roomTypes/3", {
+      statusCode: 401,
+    }).as("roomTypeRequest");
+
+    cy.visit("admin/room_types/3");
+
+    cy.wait("@roomTypeRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/room_types/3");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("check button visibility with update permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "serverPools.viewAny",
+        "roomTypes.view",
+        "roomTypes.update",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/room_types/3");
+
+    cy.wait("@roomTypeRequest");
+
+    cy.get('[data-test="room-types-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="room-types-edit-button"]')
+      .should("be.visible")
+      .and("have.text", "app.edit")
+      .and("have.attr", "href", "/admin/room_types/3/edit");
+    cy.get('[data-test="room-types-delete-button"]').should("not.exist");
+    cy.get('[data-test="room-types-save-button"]').should("not.exist");
+  });
+
+  it("check button visibility with delete permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "serverPools.viewAny",
+        "roomTypes.view",
+        "roomTypes.update",
+        "roomTypes.create",
+        "roomTypes.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/room_types/3");
+
+    cy.wait("@roomTypeRequest");
+
+    cy.get('[data-test="room-types-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="room-types-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("have.text", "app.edit")
+      .and("have.attr", "href", "/admin/room_types/3/edit");
+    cy.get('[data-test="room-types-delete-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+    cy.get('[data-test="room-types-save-button"]').should("not.exist");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminRoomTypesViewRoomTypeActions.cy.js b/tests/Frontend/e2e/AdminRoomTypesViewRoomTypeActions.cy.js
new file mode 100644
index 000000000..1c49c7589
--- /dev/null
+++ b/tests/Frontend/e2e/AdminRoomTypesViewRoomTypeActions.cy.js
@@ -0,0 +1,967 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin room types view room type actions", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminRoomTypesViewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "roles.viewAny",
+        "serverPools.viewAny",
+        "roomTypes.view",
+        "roomTypes.update",
+        "roomTypes.create",
+        "roomTypes.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("delete room type without replacement", function () {
+    cy.intercept("GET", "api/v1/roomTypes", {
+      fixture: "roomTypes.json",
+    }).as("roomTypesRequest");
+
+    cy.visit("/admin/room_types/3");
+
+    cy.wait("@roomTypeRequest");
+
+    cy.get('[data-test="room-types-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="room-types-delete-button"]').click();
+
+    // Check that replacement room types are loaded
+    cy.wait("@roomTypesRequest");
+
+    cy.get('[data-test="room-types-delete-dialog"]').should("be.visible");
+
+    // Check that dialog shows correct data
+    cy.get('[data-test="room-types-delete-dialog"]')
+      .should("include.text", "admin.room_types.delete.title")
+      .should("include.text", 'admin.room_types.delete.confirm_{"name":"Exam"}')
+      .within(() => {
+        cy.get('[data-test="replacement-room-type-field"]')
+          .should("be.visible")
+          .and("include.text", "admin.room_types.delete.replacement")
+          .and("include.text", "admin.room_types.delete.replacement_info")
+          .within(() => {
+            cy.get('[data-test="replacement-room-type-dropdown"]').should(
+              "have.text",
+              "admin.room_types.delete.no_replacement",
+            );
+
+            cy.get('[data-test="replacement-room-type-dropdown"]').within(
+              () => {
+                cy.get(".p-select-label").should(
+                  "not.have.attr",
+                  "aria-disabled",
+                  "true",
+                );
+              },
+            );
+          });
+      });
+
+    // Confirm delete of room type
+    const deleteRoomTypeRequest = interceptIndefinitely(
+      "DELETE",
+      "api/v1/roomTypes/3",
+      { statusCode: 204 },
+      "deleteRoomTypeRequest",
+    );
+
+    cy.fixture("roomTypes.json").then((roomTypes) => {
+      roomTypes.data = roomTypes.data.filter((roomType) => roomType.id !== 3);
+
+      cy.intercept("GET", "api/v1/roomTypes", {
+        statusCode: 200,
+        body: roomTypes,
+      }).as("roomTypesRequest");
+    });
+
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("have.text", "app.yes")
+      .click();
+
+    // Check loading
+    cy.get('[data-test="replacement-room-type-dropdown"]').within(() => {
+      cy.get(".p-select-label").should("have.attr", "aria-disabled", "true");
+    });
+
+    cy.get('[data-test="dialog-cancel-button"]')
+      .should("have.text", "app.no")
+      .and("be.disabled");
+
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("be.disabled")
+      .then(() => {
+        deleteRoomTypeRequest.sendResponse();
+      });
+
+    cy.wait("@deleteRoomTypeRequest").then((interception) => {
+      expect(interception.request.body).to.eql({
+        replacement_room_type: null,
+      });
+    });
+    cy.wait("@roomTypesRequest");
+
+    // Check that redirect worked
+    cy.url().should("not.include", "/admin/room_types/3");
+    cy.url().should("include", "/admin/room_types");
+  });
+
+  it("delete room type with replacement", function () {
+    cy.intercept("GET", "api/v1/roomTypes", {
+      fixture: "roomTypes.json",
+    }).as("roomTypesRequest");
+
+    cy.visit("/admin/room_types/3");
+
+    cy.wait("@roomTypeRequest");
+
+    cy.get('[data-test="room-types-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="room-types-delete-button"]').click();
+
+    // Check that replacement room types are loaded
+    cy.wait("@roomTypesRequest");
+
+    cy.get('[data-test="room-types-delete-dialog"]').should("be.visible");
+
+    // Check that dialog shows correct data
+    cy.get('[data-test="replacement-room-type-dropdown-items"]').should(
+      "not.exist",
+    );
+
+    cy.get('[data-test="room-types-delete-dialog"]')
+      .should("include.text", 'admin.room_types.delete.confirm_{"name":"Exam"}')
+      .within(() => {
+        cy.get('[data-test="replacement-room-type-field"]')
+          .should("be.visible")
+          .within(() => {
+            cy.get('[data-test="replacement-room-type-dropdown"]')
+              .should("have.text", "admin.room_types.delete.no_replacement")
+              .click();
+          });
+      });
+
+    // Check that replacement room types are shown correctly
+    cy.get('[data-test="replacement-room-type-dropdown-items"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test = "replacement-room-type-dropdown-option"]').should(
+          "have.length",
+          3,
+        );
+
+        cy.get('[data-test="replacement-room-type-dropdown-option"]')
+          .eq(0)
+          .should("have.text", "Lecture");
+
+        cy.get('[data-test="replacement-room-type-dropdown-option"]')
+          .eq(1)
+          .should("have.text", "Meeting");
+
+        cy.get('[data-test="replacement-room-type-dropdown-option"]')
+          .eq(2)
+          .should("have.text", "Seminar");
+
+        cy.get('[data-test="replacement-room-type-dropdown-option"]')
+          .eq(1)
+          .click();
+      });
+
+    cy.get('[data-test="replacement-room-type-dropdown-items"]').should(
+      "not.exist",
+    );
+    cy.get('[data-test="replacement-room-type-dropdown"]').should(
+      "have.text",
+      "Meeting",
+    );
+
+    // Confirm delete of room type
+    cy.intercept("DELETE", "api/v1/roomTypes/3", {
+      statusCode: 204,
+    }).as("deleteRoomTypeRequest");
+
+    cy.fixture("roomTypes.json").then((roomTypes) => {
+      roomTypes.data = roomTypes.data.filter((roomType) => roomType.id !== 3);
+
+      cy.intercept("GET", "api/v1/roomTypes", {
+        statusCode: 200,
+        body: roomTypes,
+      }).as("roomTypesRequest");
+    });
+
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("have.text", "app.yes")
+      .click();
+
+    // Check that replacement room type was sent correctly
+    cy.wait("@deleteRoomTypeRequest").then((interception) => {
+      expect(interception.request.body).to.eql({
+        replacement_room_type: 2,
+      });
+    });
+    cy.wait("@roomTypesRequest");
+
+    // Check that redirect worked
+    cy.url().should("not.include", "/admin/room_types/3");
+    cy.url().should("include", "/admin/room_types");
+  });
+
+  it("delete room type errors", function () {
+    cy.intercept("GET", "api/v1/roomTypes", {
+      fixture: "roomTypes.json",
+    }).as("roomTypesRequest");
+
+    cy.visit("/admin/room_types/3");
+
+    cy.wait("@roomTypeRequest");
+
+    cy.get('[data-test="room-types-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="room-types-delete-button"]').click();
+
+    // Check that replacement room types are loaded
+    cy.wait("@roomTypesRequest");
+
+    cy.get('[data-test="room-types-delete-dialog"]').should("be.visible");
+
+    // Check with 422 error (replacement room type needed)
+    cy.intercept("DELETE", "api/v1/roomTypes/3", {
+      statusCode: 422,
+      body: {
+        message:
+          "Replacement room type required! Rooms are still assigned to this room type.",
+        errors: {
+          replacement_room_type: [
+            "Replacement room type required! Rooms are still assigned to this room type.",
+          ],
+        },
+      },
+    }).as("deleteRoomTypeRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteRoomTypeRequest");
+
+    // Check that dialog stays open and error message is shown
+    cy.get('[data-test="room-types-delete-dialog"]').should("be.visible");
+    cy.get('[data-test="replacement-room-type-field"]').should(
+      "include.text",
+      "Replacement room type required! Rooms are still assigned to this room type.",
+    );
+
+    // Select replacement room type
+    cy.get('[data-test="replacement-room-type-dropdown"]').click();
+    cy.get('[data-test="replacement-room-type-dropdown-option"]').eq(1).click();
+
+    // Check with 500 error
+    cy.intercept("DELETE", "api/v1/roomTypes/3", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("deleteRoomTypeRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteRoomTypeRequest");
+
+    // Check that dialog is still open and that error message is shown
+    cy.get('[data-test="room-types-delete-dialog"]').should("be.visible");
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that 422 error message is hidden
+    cy.get('[data-test="replacement-room-type-field"]').should(
+      "not.include.text",
+      "Replacement room type required! Rooms are still assigned to this room type.",
+    );
+
+    // Check with 401 error
+    cy.intercept("DELETE", "api/v1/roomTypes/3", {
+      statusCode: 401,
+    }).as("deleteRoomTypeRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteRoomTypeRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/room_types/3");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("load replacement room types errors", function () {
+    cy.visit("/admin/room_types/3");
+
+    cy.wait("@roomTypeRequest");
+
+    cy.get('[data-test="room-types-delete-dialog"]').should("not.exist");
+
+    // Check with 500 error
+    const replacementRoomTypesRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/roomTypes*",
+      {
+        statusCode: 500,
+        body: {
+          message: "Test",
+        },
+      },
+      "replacementRoomTypesRequest",
+    );
+
+    cy.get('[data-test="room-types-delete-button"]').click();
+
+    // Check loading
+    cy.get('[data-test="replacement-room-type-dropdown"]').within(() => {
+      cy.get(".p-select-label")
+        .should("have.attr", "aria-disabled", "true")
+        .then(() => {
+          replacementRoomTypesRequest.sendResponse();
+        });
+    });
+
+    cy.wait("@replacementRoomTypesRequest");
+
+    // Check that dialog is still open and that error message is shown
+    cy.get('[data-test="room-types-delete-dialog"]').should("be.visible");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that dropdown is disabled
+    cy.get('[data-test="replacement-room-type-dropdown"]').within(() => {
+      cy.get(".p-select-label").should("have.attr", "aria-disabled", "true");
+    });
+
+    // Reload with correct data
+    cy.intercept("GET", "api/v1/roomTypes*", {
+      statusCode: 200,
+      fixture: "roomTypes.json",
+    }).as("replacementRoomTypesRequest");
+
+    cy.get('[data-test="replacement-room-types-reload-button"]')
+      .should("be.visible")
+      .click();
+
+    cy.wait("@replacementRoomTypesRequest");
+
+    // Check that dropdown is enabled again
+    cy.get('[data-test="replacement-room-type-dropdown"]').within(() => {
+      cy.get(".p-select-label").should(
+        "not.have.attr",
+        "aria-disabled",
+        "true",
+      );
+    });
+
+    cy.get('[data-test="replacement-room-types-reload-button"]').should(
+      "not.exist",
+    );
+
+    // Close dialog and open again with 401 error
+    cy.get('[data-test="dialog-cancel-button"]').click();
+    cy.get('[data-test="room-types-delete-dialog"]').should("not.exist");
+
+    cy.intercept("GET", "api/v1/roomTypes*", {
+      statusCode: 401,
+    }).as("replacementRoomTypesRequest");
+
+    cy.get('[data-test="room-types-delete-button"]').click();
+
+    cy.wait("@replacementRoomTypesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/room_types/3");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("switch between edit and view", function () {
+    cy.fixture("roomType.json").then((roomType) => {
+      roomType.data.restrict = true;
+      roomType.data.roles = [
+        {
+          id: 1,
+          name: "Superuser",
+        },
+        {
+          id: 2,
+          name: "Staff",
+        },
+      ];
+
+      cy.intercept("GET", "api/v1/roomTypes/3", {
+        statusCode: 200,
+        body: roomType,
+      }).as("roomTypeRequest");
+    });
+
+    cy.visit("/admin/room_types/3/edit");
+
+    cy.wait("@roomTypeRequest");
+    cy.wait("@serverPoolsRequest");
+    cy.wait("@rolesRequest");
+
+    // Check values and change them
+    cy.get("#room-type-name").should("have.value", "Exam").clear();
+    cy.get("#room-type-name").type("Exam 01");
+
+    cy.get("#description")
+      .should("have.value", "Room type description for room type Exam")
+      .clear();
+    cy.get("#description").type(
+      "New room type description for room type Exam 01",
+    );
+
+    cy.get("#custom-color").should("have.value", "#4a5c66").clear();
+    cy.get("#custom-color").type("#ef4444");
+
+    cy.get('[data-test="server-pool-dropdown"]').within(() => {
+      cy.get(".multiselect__tags").should("include.text", "Test");
+    });
+    cy.get('[data-test="server-pool-dropdown"]').click();
+    cy.get(".multiselect__content")
+      .eq(0)
+      .should("be.visible")
+      .within(() => {
+        cy.get(".multiselect__option").should("have.length", 4);
+
+        cy.get(".multiselect__option").eq(1).click();
+      });
+
+    cy.get('[data-test="role-dropdown"]').within(() => {
+      cy.get('[data-test="role-chip"]').should("have.length", 2);
+      cy.get('[data-test="role-chip"]')
+        .eq(0)
+        .should("include.text", "Superuser")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+
+      cy.get('[data-test="role-chip"]')
+        .eq(1)
+        .should("include.text", "Staff")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+    });
+
+    cy.get("#restrict").should("be.checked").click();
+
+    cy.get('[data-test="role-field"]').should("not.exist");
+
+    cy.get("#max-participants").should("have.value", "100").clear();
+    cy.get("#max-participants").type("50");
+
+    cy.get("#max-duration").should("have.value", "120 min.").clear();
+    cy.get("#max-duration").type("60");
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "has-access-code",
+      true,
+      false,
+      false,
+    );
+    cy.get("#has-access-code-default").click();
+    cy.get('[data-test="has-access-code-enforced"]').click();
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "allow-guests",
+      true,
+      true,
+      false,
+    );
+    cy.get("#allow-guests-default").click();
+    cy.get('[data-test="allow-guests-enforced"]').click();
+
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "everyone-can-start",
+      false,
+      false,
+      false,
+    );
+    cy.get("#everyone-can-start-default").click();
+    cy.get('[data-test="everyone-can-start-enforced"]').click();
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "mute-on-start",
+      true,
+      true,
+      false,
+    );
+    cy.get("#mute-on-start-default").click();
+    cy.get('[data-test="mute-on-start-enforced"]').click();
+    cy.get("#lobby-only-for-guests").should("be.checked");
+    cy.get("#lobby-disabled").click();
+    cy.get('[data-test="lobby-enforced"]').click();
+
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "record-attendance",
+      false,
+      false,
+      false,
+    );
+    cy.get("#record-attendance-default").click();
+    cy.get('[data-test="record-attendance-enforced"]').click();
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "record",
+      false,
+      false,
+      false,
+    );
+
+    cy.get("#record-default").click();
+    cy.get('[data-test="record-enforced"]').click();
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "auto-start-recording",
+      false,
+      false,
+      false,
+    );
+    cy.get("#auto-start-recording-default").click();
+    cy.get('[data-test="auto-start-recording-enforced"]').click();
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "disable-cam",
+      false,
+      false,
+      false,
+    );
+    cy.get("#disable-cam-default").click();
+    cy.get('[data-test="disable-cam-enforced"]').click();
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "webcams-only-for-moderator",
+      true,
+      false,
+      false,
+    );
+    cy.get("#webcams-only-for-moderator-default").click();
+    cy.get('[data-test="webcams-only-for-moderator-enforced"]').click();
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "disable-mic",
+      false,
+      true,
+      false,
+    );
+    cy.get("#disable-mic-default").click();
+    cy.get('[data-test="disable-mic-enforced"]').click();
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "disable-public-chat",
+      true,
+      false,
+      false,
+    );
+    cy.get("#disable-public-chat-default").click();
+    cy.get('[data-test="disable-public-chat-enforced"]').click();
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "disable-private-chat",
+      false,
+      false,
+      false,
+    );
+    cy.get("#disable-private-chat-default").click();
+    cy.get('[data-test="disable-private-chat-enforced"]').click();
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "disable-note",
+      true,
+      true,
+      false,
+    );
+    cy.get("#disable-note-default").click();
+    cy.get('[data-test="disable-note-enforced"]').click();
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "hide-user-list",
+      true,
+      false,
+      false,
+    );
+    cy.get("#hide-user-list-default").click();
+    cy.get('[data-test="hide-user-list-enforced"]').click();
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "allow-membership",
+      false,
+      true,
+      false,
+    );
+    cy.get("#allow-membership-default").click();
+    cy.get('[data-test="allow-membership-enforced"]').click();
+
+    cy.get('[data-test="default-role-default-button"]')
+      .eq(0)
+      .should("have.attr", "aria-pressed", "true");
+
+    cy.get('[data-test="default-role-default-button"]').eq(1).click();
+    cy.get('[data-test="default-role-enforced"]').click();
+    cy.get('[data-test="visibility-default-button"]')
+      .eq(1)
+      .should("have.attr", "aria-pressed", "true");
+    cy.get('[data-test="visibility-default-button"]').eq(0).click();
+    cy.get('[data-test="visibility-enforced"]').click();
+
+    cy.get("#create-parameters")
+      .should(
+        "have.value",
+        "meetingLayout=PRESENTATION_FOCUS\nmeta_category=FINANCE\ndisabledFeatures=learningDashboard,virtualBackgrounds",
+      )
+      .clear();
+
+    cy.get("#create-parameters").type("meetingLayout=PRESENTATION_FOCUS");
+
+    // Check that save button is shown
+    cy.get('[data-test="room-types-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+
+    // Switch to view
+    cy.get('[data-test="room-types-cancel-edit-button"]').click();
+
+    // Check if redirect worked
+    cy.url().should("include", "/admin/room_types/3");
+    cy.url().should("not.include", "/edit");
+
+    cy.wait("@roomTypeRequest");
+
+    // Check that changes were not saved
+    cy.get("#room-type-name").should("have.value", "Exam").and("be.disabled");
+    cy.get("#description")
+      .should("have.value", "Room type description for room type Exam")
+      .and("be.disabled");
+    cy.get("#custom-color").should("have.value", "#4a5c66").and("be.disabled");
+    cy.get('[data-test="server-pool-dropdown"]')
+      .should("have.class", "multiselect--disabled")
+      .within(() => {
+        cy.get(".multiselect__tags").should("include.text", "Test");
+      });
+
+    cy.get('[data-test="role-dropdown"]')
+      .should("have.class", "multiselect--disabled")
+      .within(() => {
+        cy.get('[data-test="role-chip"]').should("have.length", 2);
+        cy.get('[data-test="role-chip"]')
+          .eq(0)
+          .should("include.text", "Superuser")
+          .find('[data-test="remove-role-button"]')
+          .should("not.exist");
+
+        cy.get('[data-test="role-chip"]')
+          .eq(1)
+          .should("include.text", "Staff")
+          .find('[data-test="remove-role-button"]')
+          .should("not.exist");
+      });
+    cy.get("#restrict").should("be.checked").and("be.disabled");
+    cy.get("#max-participants").should("have.value", "100").and("be.disabled");
+    cy.get("#max-duration").should("have.value", "120 min.").and("be.disabled");
+
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "has-access-code",
+      true,
+      false,
+      true,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "allow-guests",
+      true,
+      true,
+      true,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "everyone-can-start",
+      false,
+      false,
+      true,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "mute-on-start",
+      true,
+      true,
+      true,
+    );
+    cy.get("#lobby-disabled").should("not.be.checked").and("be.disabled");
+    cy.get("#lobby-enabled").should("not.be.checked").and("be.disabled");
+    cy.get("#lobby-only-for-guests").should("be.checked").and("be.disabled");
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "record-attendance",
+      false,
+      false,
+      true,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "record",
+      false,
+      false,
+      true,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "auto-start-recording",
+      false,
+      false,
+      true,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "disable-cam",
+      false,
+      false,
+      true,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "webcams-only-for-moderator",
+      true,
+      false,
+      true,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "disable-mic",
+      false,
+      true,
+      true,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "disable-public-chat",
+      true,
+      false,
+      true,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "disable-private-chat",
+      false,
+      false,
+      true,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "disable-note",
+      true,
+      true,
+      true,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "hide-user-list",
+      true,
+      false,
+      true,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "allow-membership",
+      false,
+      true,
+      true,
+    );
+
+    cy.get('[data-test="default-role-default-button"]')
+      .eq(0)
+      .should("have.attr", "aria-pressed", "true")
+      .and("be.disabled");
+
+    cy.get('[data-test="default-role-default-button"]')
+      .eq(1)
+      .should("not.have.attr", "aria-pressed", "true")
+      .and("be.disabled");
+
+    cy.get('[data-test="visibility-default-button"]')
+      .eq(0)
+      .should("not.have.attr", "aria-pressed", "true")
+      .and("be.disabled");
+
+    cy.get('[data-test="visibility-default-button"]')
+      .eq(1)
+      .should("have.attr", "aria-pressed", "true")
+      .and("be.disabled");
+
+    cy.get("#create-parameters")
+      .should(
+        "have.value",
+        "meetingLayout=PRESENTATION_FOCUS\nmeta_category=FINANCE\ndisabledFeatures=learningDashboard,virtualBackgrounds",
+      )
+      .and("be.disabled");
+
+    // Check that save button is not visible
+    cy.get('[data-test="room-types-save-button"]').should("not.exist");
+
+    // Switch back to edit page
+    cy.get('[data-test="room-types-edit-button"]').click();
+
+    // Check if redirect worked
+    cy.url().should("include", "/admin/room_types/3/edit");
+
+    cy.wait("@roomTypeRequest");
+    cy.wait("@serverPoolsRequest");
+    cy.wait("@rolesRequest");
+
+    // Check that original values are shown
+    cy.get("#room-type-name")
+      .should("have.value", "Exam")
+      .and("not.be.disabled");
+    cy.get("#description")
+      .should("have.value", "Room type description for room type Exam")
+      .and("not.be.disabled");
+    cy.get("#custom-color")
+      .should("have.value", "#4a5c66")
+      .and("not.be.disabled");
+    cy.get('[data-test="server-pool-dropdown"]')
+      .should("not.have.class", "multiselect--disabled")
+      .within(() => {
+        cy.get(".multiselect__tags").should("include.text", "Test");
+      });
+
+    cy.get('[data-test="role-dropdown"]')
+      .should("not.have.class", "multiselect--disabled")
+      .within(() => {
+        cy.get('[data-test="role-chip"]').should("have.length", 2);
+        cy.get('[data-test="role-chip"]')
+          .eq(0)
+          .should("include.text", "Superuser")
+          .find('[data-test="remove-role-button"]')
+          .should("be.visible");
+
+        cy.get('[data-test="role-chip"]')
+          .eq(1)
+          .should("include.text", "Staff")
+          .find('[data-test="remove-role-button"]')
+          .should("be.visible");
+      });
+    cy.get("#restrict").should("be.checked").and("not.be.disabled");
+    cy.get("#max-participants")
+      .should("have.value", "100")
+      .and("not.be.disabled");
+    cy.get("#max-duration")
+      .should("have.value", "120 min.")
+      .and("not.be.disabled");
+
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "has-access-code",
+      true,
+      false,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "allow-guests",
+      true,
+      true,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "everyone-can-start",
+      false,
+      false,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "mute-on-start",
+      true,
+      true,
+      false,
+    );
+    cy.get("#lobby-disabled").should("not.be.checked").and("not.be.disabled");
+    cy.get("#lobby-enabled").should("not.be.checked").and("not.be.disabled");
+    cy.get("#lobby-only-for-guests")
+      .should("be.checked")
+      .and("not.be.disabled");
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "record-attendance",
+      false,
+      false,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "record",
+      false,
+      false,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "auto-start-recording",
+      false,
+      false,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "disable-cam",
+      false,
+      false,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "webcams-only-for-moderator",
+      true,
+      false,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "disable-mic",
+      false,
+      true,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "disable-public-chat",
+      true,
+      false,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "disable-private-chat",
+      false,
+      false,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "disable-note",
+      true,
+      true,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "hide-user-list",
+      true,
+      false,
+      false,
+    );
+    cy.roomTypeCheckDefaultRoomSettingCheckboxField(
+      "allow-membership",
+      false,
+      true,
+      false,
+    );
+
+    cy.get('[data-test="default-role-default-button"]')
+      .eq(0)
+      .should("have.attr", "aria-pressed", "true")
+      .and("not.be.disabled");
+
+    cy.get('[data-test="default-role-default-button"]')
+      .eq(1)
+      .should("not.have.attr", "aria-pressed", "true")
+      .and("not.be.disabled");
+
+    cy.get('[data-test="visibility-default-button"]')
+      .eq(0)
+      .should("not.have.attr", "aria-pressed", "true")
+      .and("not.be.disabled");
+
+    cy.get('[data-test="visibility-default-button"]')
+      .eq(1)
+      .should("have.attr", "aria-pressed", "true")
+      .and("not.be.disabled");
+
+    cy.get("#create-parameters")
+      .should(
+        "have.value",
+        "meetingLayout=PRESENTATION_FOCUS\nmeta_category=FINANCE\ndisabledFeatures=learningDashboard,virtualBackgrounds",
+      )
+      .and("not.be.disabled");
+
+    // Check that save button is shown
+    cy.get('[data-test="room-types-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminServerPoolsEdit.cy.js b/tests/Frontend/e2e/AdminServerPoolsEdit.cy.js
new file mode 100644
index 000000000..1d19cafd6
--- /dev/null
+++ b/tests/Frontend/e2e/AdminServerPoolsEdit.cy.js
@@ -0,0 +1,913 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin server pools edit", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminServerPoolsViewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "serverPools.viewAny",
+        "serverPools.view",
+        "serverPools.update",
+        "serverPools.create",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin/server_pools/1");
+  });
+
+  it("visit with user without permission to edit server pools", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "serverPools.viewAny",
+        "serverPools.view",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+
+      cy.visit("/admin/server_pools/1/edit");
+
+      cy.checkToastMessage("app.flash.unauthorized");
+
+      // Check if welcome page is shown
+      cy.url().should("not.include", "/admin/server_pools/1/edit");
+      cy.get("h1").should("be.visible").and("include.text", "home.title");
+    });
+  });
+
+  it("edit server pool", function () {
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(0, 2);
+      servers.meta.last_page = 2;
+      servers.meta.per_page = 2;
+      servers.meta.to = 2;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    const serverPoolRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/serverPools/1",
+      { fixture: "serverPool.json" },
+      "serverPoolRequest",
+    );
+
+    cy.visit("/admin/server_pools/1/edit");
+
+    cy.contains("admin.title");
+
+    // Check loading
+    cy.get('[data-test="server-pools-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="server-pools-edit-button"]').should("not.exist");
+    cy.get('[data-test="server-pools-delete-button"]').should("not.exist");
+    cy.get('[data-test="server-pools-save-button"]').should("be.disabled");
+
+    cy.get('[data-test="overlay"]')
+      .should("be.visible")
+      .then(() => {
+        serverPoolRequest.sendResponse();
+      });
+
+    cy.wait("@serverPoolRequest");
+    cy.wait("@serversRequest");
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that correct buttons are shown
+    cy.get('[data-test="server-pools-cancel-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.cancel_editing")
+      .and("have.attr", "href", "/admin/server_pools/1");
+    cy.get('[data-test="server-pools-edit-button"]').should("not.exist");
+    cy.get('[data-test="server-pools-delete-button"]').should("not.exist");
+    cy.get('[data-test="server-pools-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.save");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.server_pools.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.server_pools.edit_{"name":"Test"}',
+      );
+
+    // Change server pool settings
+    cy.get('[data-test="name-field"]')
+      .should("be.visible")
+      .and("include.text", "app.model_name")
+      .within(() => {
+        cy.get("#name").should("have.value", "Test").clear();
+        cy.get("#name").type("Server Pool 1");
+      });
+
+    // Check that breadcrumbs stay the same
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.server_pools.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.server_pools.edit_{"name":"Test"}',
+      );
+
+    cy.get('[data-test="description-field"]')
+      .should("be.visible")
+      .and("include.text", "app.description")
+      .within(() => {
+        cy.get("#description").should("have.value", "Pool for testing").clear();
+        cy.get("#description").type("Server Pool 1 description");
+      });
+
+    cy.get(".multiselect__content").should("not.be.visible");
+    cy.get('[data-test="server-field"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="server-dropdown"]').within(() => {
+          cy.get('[data-test="server-chip"]').should("have.length", 2);
+
+          cy.get('[data-test="server-chip"]')
+            .eq(0)
+            .should("include.text", "Server 01")
+            .find('[data-test="remove-server-button"]')
+            .should("be.visible");
+
+          cy.get('[data-test="server-chip"]')
+            .eq(1)
+            .should("include.text", "Server 02")
+            .find('[data-test="remove-server-button"]')
+            .should("be.visible");
+        });
+        cy.get('[data-test="server-dropdown"]').click();
+      });
+
+    // Check if correct options are shown
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").should("have.length", 4);
+    cy.get(".multiselect__option")
+      .eq(0)
+      .should("include.text", "Server 01")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(1)
+      .should("include.text", "Server 02")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(2)
+      .should(
+        "include.text",
+        "No elements found. Consider changing the search query.",
+      )
+      .and("not.be.visible");
+    cy.get(".multiselect__option")
+      .eq(3)
+      .should("include.text", "admin.servers.no_data")
+      .and("not.be.visible");
+
+    // Switch to next page
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(2, 4);
+      servers.meta.current_page = 2;
+      servers.meta.from = 3;
+      servers.meta.last_page = 2;
+      servers.meta.per_page = 2;
+      servers.meta.to = 4;
+
+      const serversRequest = interceptIndefinitely(
+        "GET",
+        "api/v1/servers*",
+        {
+          statusCode: 200,
+          body: servers,
+        },
+        "serversRequest",
+      );
+
+      cy.get(".multiselect__content")
+        .should("be.visible")
+        .within(() => {
+          cy.get('[data-test="previous-page-button"]')
+            .should("include.text", "app.previous_page")
+            .and("be.disabled");
+          cy.get('[data-test="next-page-button"]')
+            .should("include.text", "app.next_page")
+            .and("not.be.disabled");
+
+          cy.get('[data-test="next-page-button"]').click();
+
+          // Check loading
+          cy.get('[data-test="previous-page-button"]').should("be.disabled");
+          cy.get('[data-test="next-page-button"]').should("be.disabled");
+        });
+
+      cy.get('[data-test="server-dropdown"]').should(
+        "have.class",
+        "multiselect--disabled",
+      );
+
+      cy.get('[data-test="server-pools-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          serversRequest.sendResponse();
+        });
+    });
+
+    cy.wait("@serversRequest");
+
+    cy.get(".multiselect__content")
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="previous-page-button"]').should("not.be.disabled");
+        cy.get('[data-test="next-page-button"]').should("be.disabled");
+      });
+
+    // Check that correct options are shown
+    cy.get(".multiselect__option").should("have.length", 4);
+    cy.get(".multiselect__option")
+      .eq(0)
+      .should("include.text", "Server 03")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(1)
+      .should("include.text", "Server 04")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(2)
+      .should(
+        "include.text",
+        "No elements found. Consider changing the search query.",
+      )
+      .and("not.be.visible");
+    cy.get(".multiselect__option")
+      .eq(3)
+      .should("include.text", "admin.servers.no_data")
+      .and("not.be.visible");
+
+    // Select servers
+    cy.get(".multiselect__option").eq(0).click();
+    cy.get(".multiselect__option").eq(1).click();
+
+    // Check that servers are shown and remove one server
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get('[data-test="server-dropdown"]').within(() => {
+      cy.get('[data-test="server-chip"]').should("have.length", 4);
+      cy.get('[data-test="server-chip"]')
+        .eq(0)
+        .should("include.text", "Server 01")
+        .find('[data-test="remove-server-button"]')
+        .should("be.visible");
+
+      cy.get('[data-test="server-chip"]')
+        .eq(1)
+        .should("include.text", "Server 02")
+        .find('[data-test="remove-server-button"]')
+        .should("be.visible");
+
+      cy.get('[data-test="server-chip"]')
+        .eq(2)
+        .should("include.text", "Server 03")
+        .find('[data-test="remove-server-button"]')
+        .should("be.visible");
+
+      cy.get('[data-test="server-chip"]')
+        .eq(3)
+        .should("include.text", "Server 04")
+        .find('[data-test="remove-server-button"]')
+        .should("be.visible");
+
+      cy.get('[data-test="server-chip"]')
+        .eq(1)
+        .find('[data-test="remove-server-button"]')
+        .click();
+    });
+
+    // Check that dropdown is hidden
+    cy.get(".multiselect__content").should("not.be.visible");
+
+    // Save changes
+    cy.fixture("servers.json").then((servers) => {
+      cy.fixture("serverPool.json").then((serverPool) => {
+        serverPool.data.name = "Server Pool 1";
+        serverPool.data.description = "Server Pool 1 description";
+        serverPool.data.servers = servers.data.filter(
+          (server) => server.id !== 2,
+        );
+
+        const saveChangesRequest = interceptIndefinitely(
+          "PUT",
+          "api/v1/serverPools/1",
+          {
+            statusCode: 200,
+            body: serverPool,
+          },
+          "saveChangesRequest",
+        );
+
+        cy.intercept("GET", "api/v1/serverPools/1", {
+          statusCode: 200,
+          body: serverPool,
+        }).as("serverPoolRequest");
+
+        cy.get('[data-test="overlay"]').should("not.exist");
+
+        cy.get('[data-test="server-pools-save-button"]')
+          .should("be.visible")
+          .and("have.text", "app.save")
+          .click();
+
+        // Check loading
+        cy.get('[data-test="overlay"]').should("be.visible");
+
+        // Check that fields are disabled
+        cy.get("#name").should("be.disabled");
+        cy.get("#description").should("be.disabled");
+
+        cy.get('[data-test="server-dropdown"]').should(
+          "have.class",
+          "multiselect--disabled",
+        );
+
+        cy.get('[data-test="server-pools-save-button"]')
+          .should("be.disabled")
+          .then(() => {
+            saveChangesRequest.sendResponse();
+          });
+
+        const serverPoolRequestData = { ...serverPool.data };
+        serverPoolRequestData.servers = [1, 3, 4];
+
+        cy.wait("@saveChangesRequest").then((interception) => {
+          expect(interception.request.body).to.eql(serverPoolRequestData);
+        });
+      });
+    });
+
+    cy.wait("@serverPoolRequest");
+
+    // Check that redirect to server pool view worked
+    cy.url().should("include", "/admin/server_pools/1");
+    cy.url().should("not.include", "/edit");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.server_pools.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.server_pools.view_{"name":"Server Pool 1"}',
+      );
+  });
+
+  it("save changes errors", function () {
+    cy.visit("/admin/server_pools/1/edit");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.server_pools.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.server_pools.edit_{"name":"Test"}',
+      );
+
+    // Set values
+    cy.get("#name").clear();
+    cy.get("#description").clear();
+    cy.get("#description").type("Server Pool 1 description");
+    cy.get('[data-test="server-dropdown"]').click();
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").eq(0).click();
+    cy.get(".multiselect__select").click();
+    cy.get(".multiselect__content").should("not.be.visible");
+
+    // Check with 422 error
+    cy.intercept("PUT", "api/v1/serverPools/1", {
+      statusCode: 422,
+      body: {
+        message: "The given data was invalid.",
+        errors: {
+          name: ["The Name field is required."],
+          description: [
+            "The Description must not be greater than 255 characters.",
+          ],
+          servers: ["The server with the ID 1 could not be found."],
+        },
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="server-pools-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that error messages are shown
+    cy.get('[data-test="name-field"]').should(
+      "include.text",
+      "The Name field is required.",
+    );
+
+    cy.get('[data-test="description-field"]').should(
+      "include.text",
+      "The Description must not be greater than 255 characters.",
+    );
+
+    cy.get('[data-test="server-field"]').should(
+      "include.text",
+      "The server with the ID 1 could not be found.",
+    );
+
+    cy.get("#name").type("Server Pool 1");
+
+    // Check with 500 error
+    cy.intercept("PUT", "api/v1/serverPools/1", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="server-pools-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that 422 error messages are hidden
+    cy.get('[data-test="name-field"]').should(
+      "not.include.text",
+      "The Name field is required.",
+    );
+
+    cy.get('[data-test="description-field"]').should(
+      "not.include.text",
+      "The Description must not be greater than 255 characters.",
+    );
+
+    cy.get('[data-test="server-field"]').should(
+      "not.include.text",
+      "The server with the ID 1 could not be found.",
+    );
+
+    // Check with 428 error (stale error)
+    cy.fixture("serverPool.json").then((serverPool) => {
+      serverPool.data.name = "Server Pool 1";
+      serverPool.data.description = "Server Pool 1 description";
+      serverPool.data.servers = serverPool.data.servers.slice(0, 1);
+
+      cy.intercept("PUT", "api/v1/serverPools/1", {
+        statusCode: 428,
+        body: {
+          new_model: serverPool.data,
+        },
+      }).as("saveChangesRequest");
+    });
+
+    cy.get('[data-test="stale-server-pool-dialog"]').should("not.exist");
+
+    cy.get('[data-test="server-pools-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that stale dialog is shown
+    cy.get('[data-test="stale-server-pool-dialog"]')
+      .should("be.visible")
+      .and("include.text", "app.errors.stale_error")
+      .within(() => {
+        // Check buttons
+        cy.get('[data-test="stale-dialog-reject-button"]')
+          .should("be.visible")
+          .and("have.text", "app.reload");
+        cy.get('[data-test="stale-dialog-accept-button"]')
+          .should("be.visible")
+          .and("have.text", "app.overwrite");
+      });
+
+    // Reload
+    cy.get('[data-test="stale-dialog-reject-button"]').click();
+
+    cy.get('[data-test="stale-server-pool-dialog"]').should("not.exist");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.server_pools.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.server_pools.edit_{"name":"Server Pool 1"}',
+      );
+
+    // Check that correct data is shown
+    cy.get("#name").should("have.value", "Server Pool 1");
+    cy.get("#description").should("have.value", "Server Pool 1 description");
+
+    cy.get('[data-test="server-chip"]').should("have.length", 1);
+
+    cy.get('[data-test="server-chip"]')
+      .eq(0)
+      .should("include.text", "Server 01");
+
+    // Trigger 428 error (stale error) again
+    cy.fixture("serverPool.json").then((serverPool) => {
+      serverPool.data.name = "Server Pool 1";
+      serverPool.data.description = "Server Pool 1 description";
+      serverPool.data.servers = serverPool.data.servers.slice(0, 1);
+
+      cy.intercept("PUT", "api/v1/serverPools/1", {
+        statusCode: 428,
+        body: {
+          new_model: serverPool.data,
+        },
+      }).as("saveChangesRequest");
+    });
+
+    cy.get('[data-test="stale-server-pool-dialog"]').should("not.exist");
+
+    cy.get('[data-test="server-pools-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that stale dialog is shown
+    cy.get('[data-test="stale-server-pool-dialog"]')
+      .should("be.visible")
+      .and("include.text", "app.errors.stale_error")
+      .within(() => {
+        // Check buttons
+        cy.get('[data-test="stale-dialog-reject-button"]')
+          .should("be.visible")
+          .and("have.text", "app.reload");
+        cy.get('[data-test="stale-dialog-accept-button"]')
+          .should("be.visible")
+          .and("have.text", "app.overwrite");
+      });
+
+    // Overwrite
+    cy.fixture("serverPool.json").then((serverPool) => {
+      serverPool.data.name = "Server Pool 1";
+      serverPool.data.description = "Server Pool 1 description";
+      serverPool.data.servers = serverPool.data.servers.slice(0, 1);
+
+      cy.intercept("PUT", "api/v1/serverPools/1", {
+        statusCode: 200,
+        body: serverPool,
+      }).as("saveChangesRequest");
+
+      cy.intercept("GET", "api/v1/serverPools/1", {
+        statusCode: 200,
+        body: serverPool,
+      }).as("serverPoolRequest");
+
+      cy.get('[data-test="stale-dialog-accept-button"]').click();
+
+      const serverPoolRequestData = { ...serverPool.data };
+      serverPoolRequestData.servers = [1];
+
+      // Check that correct data is sent
+      cy.wait("@saveChangesRequest").then((interception) => {
+        expect(interception.request.body).to.eql(serverPoolRequestData);
+      });
+    });
+
+    // Check that redirect worked
+    cy.url().should("include", "/admin/server_pools/1");
+    cy.url().should("not.include", "/edit");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.server_pools.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.server_pools.view_{"name":"Server Pool 1"}',
+      );
+
+    // Reload
+    cy.visit("/admin/server_pools/1/edit");
+
+    // Check with 404 error
+    cy.interceptAdminServerPoolsIndexRequests();
+    cy.intercept("PUT", "api/v1/serverPools/1", {
+      statusCode: 404,
+      body: {
+        message: "No query results for model",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="server-pools-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that redirect worked
+    cy.url().should("not.include", "/admin/server_pools/1/edit");
+    cy.url().should("include", "/admin/server_pools");
+
+    cy.wait("@serverPoolsRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"No query results for model"}',
+      'app.flash.server_error.error_code_{"statusCode":404}',
+    ]);
+
+    // Reload
+    cy.visit("/admin/server_pools/1/edit");
+
+    // Check with 401 error
+    cy.intercept("PUT", "api/v1/serverPools/1", {
+      statusCode: 401,
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="server-pools-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/server_pools/1/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("check button visibility with delete permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "serverPools.viewAny",
+        "serverPools.view",
+        "serverPools.update",
+        "serverPools.create",
+        "serverPools.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/server_pools/1/edit");
+
+    cy.wait("@serverPoolRequest");
+    cy.wait("@serversRequest");
+
+    cy.get('[data-test="server-pools-cancel-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.cancel_editing")
+      .and("have.attr", "href", "/admin/server_pools/1");
+    cy.get('[data-test="server-pools-edit-button"]').should("not.exist");
+    cy.get('[data-test="server-pools-delete-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+    cy.get('[data-test="server-pools-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.save");
+  });
+
+  it("load server pool errors", function () {
+    cy.intercept("GET", "api/v1/serverPools/1", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("serverPoolRequest");
+
+    cy.visit("/admin/server_pools/1/edit");
+
+    cy.wait("@serverPoolRequest");
+
+    // Check that overlay is shown
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Reload with correct data
+    cy.intercept("GET", "api/v1/serverPools/1", {
+      statusCode: 200,
+      fixture: "serverPool.json",
+    }).as("serverPoolRequest");
+
+    cy.get('[data-test="loading-retry-button"]')
+      .should("be.visible")
+      .and("have.text", "app.reload")
+      .click();
+
+    cy.wait("@serverPoolRequest");
+
+    // Check that overlay is not shown anymore
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
+
+    // Reload page with 404 errors
+    cy.interceptAdminServerPoolsIndexRequests();
+
+    cy.intercept("GET", "api/v1/serverPools/1", {
+      statusCode: 404,
+      body: {
+        message: "No query results for model",
+      },
+    }).as("serverPoolRequest");
+
+    cy.reload();
+
+    cy.wait("@serverPoolRequest");
+
+    // Check that redirect worked
+    cy.url().should("not.include", "/admin/server_pools/1/edit");
+    cy.url().should("include", "/admin/server_pools");
+
+    cy.wait("@serverPoolsRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"No query results for model"}',
+      'app.flash.server_error.error_code_{"statusCode":404}',
+    ]);
+
+    // Reload page with 401 error
+    cy.intercept("GET", "api/v1/serverPools/1", {
+      statusCode: 401,
+    }).as("serverPoolRequest");
+
+    cy.visit("/admin/server_pools/1/edit");
+
+    cy.wait("@serverPoolRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/server_pools/1/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("load servers errors", function () {
+    // Check with 500 error
+    const serversRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/servers*",
+      {
+        statusCode: 500,
+        body: {
+          message: "Test",
+        },
+      },
+      "serversRequest",
+    );
+
+    cy.visit("/admin/server_pools/1/edit");
+
+    cy.wait("@serverPoolRequest");
+
+    // Check loading
+    cy.get('[data-test="server-pools-save-button"]').should("be.disabled");
+
+    cy.get('[data-test="server-dropdown"]')
+      .should("have.class", "multiselect--disabled")
+      .then(() => {
+        serversRequest.sendResponse();
+      });
+
+    cy.wait("@serversRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    cy.get('[data-test="server-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="server-pools-save-button"]').should("be.disabled");
+
+    // Reload servers without errors
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(0, 2);
+      servers.meta.last_page = 2;
+      servers.meta.per_page = 2;
+      servers.meta.to = 2;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    cy.get('[data-test="servers-reload-button"]').click();
+
+    cy.wait("@serversRequest");
+
+    cy.get('[data-test="server-dropdown"]').should(
+      "not.have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="server-pools-save-button"]').should("not.be.disabled");
+
+    cy.get('[data-test="servers-reload-button"]').should("not.exist");
+
+    cy.get('[data-test="server-dropdown"]').click();
+
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").should("have.length", 4);
+
+    // Check with 500 error when switching pages
+    cy.intercept("GET", "api/v1/servers*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("serversRequest");
+
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get('[data-test="next-page-button"]').click();
+
+    cy.wait("@serversRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    cy.get('[data-test="server-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="server-pools-save-button"]').should("be.disabled");
+
+    // Check with 401 error
+    cy.intercept("GET", "api/v1/servers*", {
+      statusCode: 401,
+    }).as("serversRequest");
+
+    cy.reload();
+
+    cy.wait("@serverPoolRequest");
+    cy.wait("@serversRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/server_pools/1/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+
+    // Visit edit page again with servers
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(0, 2);
+      servers.meta.last_page = 2;
+      servers.meta.per_page = 2;
+      servers.meta.to = 2;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    cy.visit("/admin/server_pools/1/edit");
+
+    cy.wait("@serverPoolRequest");
+    cy.wait("@serversRequest");
+
+    cy.get('[data-test="server-dropdown"]').click();
+
+    // Check with 401 error when switching pages
+    cy.intercept("GET", "api/v1/servers*", {
+      statusCode: 401,
+    }).as("serversRequest");
+
+    cy.get(".multiselect__content").should("be.visible");
+
+    cy.get('[data-test="next-page-button"]').click();
+
+    cy.wait("@serversRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/server_pools/1/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminServerPoolsIndex.cy.js b/tests/Frontend/e2e/AdminServerPoolsIndex.cy.js
new file mode 100644
index 000000000..270d126d0
--- /dev/null
+++ b/tests/Frontend/e2e/AdminServerPoolsIndex.cy.js
@@ -0,0 +1,969 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin server pools index", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminServerPoolsIndexRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view", "serverPools.viewAny"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin/server_pools");
+  });
+
+  it("visit with user without permission to view server pools", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+    cy.visit("/admin/server_pools");
+
+    cy.checkToastMessage("app.flash.unauthorized");
+
+    // Check if the welcome page is shown
+    cy.url().should("not.include", "/admin/servers");
+    cy.get("h1").should("be.visible").and("contain", "home.title");
+  });
+
+  it("load server pools", function () {
+    const serverPoolRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/serverPools*",
+      { fixture: "serverPools.json" },
+      "serverPoolsRequest",
+    );
+
+    cy.visit("/admin/server_pools");
+
+    cy.contains("admin.title");
+
+    // Test loading
+    cy.get('[data-test="server-pool-search"]').within(() => {
+      cy.get("input").should("be.visible").and("be.disabled");
+      cy.get("button").should("be.visible").and("be.disabled");
+    });
+
+    cy.get('[data-test="server-pools-add-button"]').should("not.exist");
+
+    cy.get('[data-test="overlay"]')
+      .should("be.visible")
+      .then(() => {
+        serverPoolRequest.sendResponse();
+      });
+
+    cy.wait("@serverPoolsRequest");
+
+    // Check that loading is over
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    cy.get('[data-test="server-pool-search"]')
+      .eq(0)
+      .within(() => {
+        cy.get("input").should("be.visible").and("not.be.disabled");
+        cy.get("button").should("be.visible").and("not.be.disabled");
+      });
+
+    cy.get('[data-test="server-pools-add-button"]').should("not.exist");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.server_pools.index");
+
+    // Check that table headers are displayed correctly
+    cy.get('[data-test="server-pool-header-cell"]').should("have.length", 3);
+
+    cy.get('[data-test="server-pool-header-cell"]')
+      .eq(0)
+      .should("have.text", "app.model_name");
+
+    cy.get('[data-test="server-pool-header-cell"]')
+      .eq(1)
+      .should("have.text", "admin.server_pools.server_count");
+
+    cy.get('[data-test="server-pool-header-cell"]')
+      .eq(2)
+      .should("have.text", "app.actions");
+
+    // Check that server pools are displayed correctly
+    cy.get('[data-test="server-pool-item"]').should("have.length", 2);
+
+    cy.get('[data-test="server-pool-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="server-pool-item-cell"]')
+          .eq(0)
+          .should("have.text", "Test");
+        cy.get('[data-test="server-pool-item-cell"]')
+          .eq(1)
+          .should("have.text", "2");
+        cy.get('[data-test="server-pool-item-cell"]')
+          .eq(2)
+          .within(() => {
+            cy.get('[data-test="server-pools-view-button"]').should(
+              "not.exist",
+            );
+            cy.get('[data-test="server-pools-edit-button"]').should(
+              "not.exist",
+            );
+            cy.get('[data-test="server-pools-delete-button"]').should(
+              "not.exist",
+            );
+          });
+      });
+
+    cy.get('[data-test="server-pool-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="server-pool-item-cell"]')
+          .eq(0)
+          .should("have.text", "Production");
+        cy.get('[data-test="server-pool-item-cell"]')
+          .eq(1)
+          .should("have.text", "1");
+        cy.get('[data-test="server-pool-item-cell"]')
+          .eq(2)
+          .within(() => {
+            cy.get('[data-test="server-pools-view-button"]').should(
+              "not.exist",
+            );
+            cy.get('[data-test="server-pools-edit-button"]').should(
+              "not.exist",
+            );
+            cy.get('[data-test="server-pools-delete-button"]').should(
+              "not.exist",
+            );
+          });
+      });
+  });
+
+  it("load server pools errors", function () {
+    cy.intercept("GET", "api/v1/serverPools*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("serverPoolsRequest");
+
+    cy.visit("/admin/server_pools");
+
+    cy.wait("@serverPoolsRequest");
+
+    // Check that error message gets shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that overlay is shown
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that components are not disabled
+    cy.get('[data-test="server-pool-search"]').within(() => {
+      cy.get("input").should("be.visible").and("not.be.disabled");
+      cy.get("button").should("be.visible").and("not.be.disabled");
+    });
+
+    cy.fixture("serverPools.json").then((serverPools) => {
+      serverPools.data = serverPools.data.slice(0, 1);
+      serverPools.meta.last_page = 2;
+      serverPools.meta.per_page = 1;
+      serverPools.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/serverPools*", {
+        statusCode: 200,
+        body: serverPools,
+      }).as("serverPoolsRequest");
+    });
+
+    // Check if reload button exists and click it
+    cy.get('[data-test="loading-retry-button"]')
+      .should("include.text", "app.reload")
+      .click();
+
+    cy.wait("@serverPoolsRequest");
+
+    // Check that overlay is hidden
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
+
+    // Check if server pool is shown and contains the correct data
+    cy.get('[data-test="server-pool-item"]').should("have.length", 1);
+    cy.get('[data-test="server-pool-item"]')
+      .eq(0)
+      .should("include.text", "Test");
+
+    // Switch to next page with general error
+    cy.intercept("GET", "api/v1/serverPools*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("serverPoolsRequest");
+
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+    cy.wait("@serverPoolsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "2",
+      });
+    });
+
+    // Check that error message gets shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that overlay is shown
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that components are not disabled
+    cy.get('[data-test="server-pool-search"]').within(() => {
+      cy.get("input").should("be.visible").and("not.be.disabled");
+      cy.get("button").should("be.visible").and("not.be.disabled");
+    });
+
+    cy.fixture("serverPools.json").then((serverPools) => {
+      serverPools.data = serverPools.data.slice(0, 1);
+      serverPools.meta.last_page = 2;
+      serverPools.meta.per_page = 1;
+      serverPools.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/serverPools*", {
+        statusCode: 200,
+        body: serverPools,
+      }).as("serverPoolsRequest");
+    });
+
+    // Check if reload button exists and click it
+    cy.get('[data-test="loading-retry-button"]')
+      .should("include.text", "app.reload")
+      .click();
+
+    // Check that page is reset
+    cy.wait("@serverPoolsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that overlay is hidden
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
+
+    // Check if server pool is shown and contains the correct data
+    cy.get('[data-test="server-pool-item"]').should("have.length", 1);
+    cy.get('[data-test="server-pool-item"]')
+      .eq(0)
+      .should("include.text", "Test");
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Switch to next page with 401 error
+    cy.intercept("GET", "api/v1/serverPools*", {
+      statusCode: 401,
+      body: {
+        message: "Test",
+      },
+    }).as("serverPoolsRequest");
+
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    cy.wait("@serverPoolsRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/server_pools");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+
+    // Reload page with 401 error
+    cy.visit("/admin/server_pools");
+
+    cy.wait("@serverPoolsRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/server_pools");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("load server pools page out of bounds", function () {
+    cy.fixture("serverPools.json").then((serverPools) => {
+      serverPools.data = serverPools.data.slice(0, 1);
+      serverPools.meta.last_page = 2;
+      serverPools.meta.per_page = 1;
+      serverPools.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/serverPools*", {
+        statusCode: 200,
+        body: serverPools,
+      }).as("serverPoolsRequest");
+    });
+
+    cy.visit("/admin/server_pools");
+    cy.wait("@serverPoolsRequest");
+
+    // Switch to next page but respond with no server pools on second page
+    cy.fixture("serverPools.json").then((serverPools) => {
+      serverPools.data = [];
+      serverPools.meta.current_page = 2;
+      serverPools.meta.from = null;
+      serverPools.meta.per_page = 2;
+      serverPools.meta.to = null;
+
+      const emptyServerPoolsRequest = interceptIndefinitely(
+        "GET",
+        "api/v1/serverPools*",
+        { body: serverPools },
+        "serverPoolsRequest",
+      );
+
+      cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+      cy.intercept("GET", "api/v1/serverPools*", {
+        fixture: "serverPools.json",
+      })
+        .as("serverPoolsRequest")
+        .then(() => {
+          emptyServerPoolsRequest.sendResponse();
+        });
+    });
+
+    // Wait for first request and check that page 8is still the same
+    cy.wait("@serverPoolsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "2",
+      });
+    });
+
+    // Wait for second request and check that page is reset
+    cy.wait("@serverPoolsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that pagination is shown correctly
+    cy.get('[data-test="paginator-page"]').should("have.length", 1);
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+  });
+
+  it("server pools search", function () {
+    cy.visit("/admin/server_pools");
+    cy.wait("@serverPoolsRequest").then((interception) => {
+      expect(interception.request.query.name).to.be.undefined;
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check with no server pools found for this search query
+    cy.fixture("serverPools.json").then((serverPools) => {
+      serverPools.data = [];
+      serverPools.meta.from = null;
+      serverPools.meta.per_page = 1;
+      serverPools.meta.to = null;
+      serverPools.meta.total = 0;
+
+      cy.intercept("GET", "api/v1/serverPools*", {
+        statusCode: 200,
+        body: serverPools,
+      }).as("serverPoolsRequest");
+    });
+
+    cy.get('[data-test="server-pool-search"] > input').should("have.value", "");
+    cy.get('[data-test="server-pool-search"] > input').type("Test");
+    cy.get('[data-test="server-pool-search"] > button').click();
+
+    cy.wait("@serverPoolsRequest").then((interception) => {
+      expect(interception.request.query.name).to.eql("Test");
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that correct message is shown and no server pools are displayed
+    cy.contains("admin.server_pools.no_data_filtered").should("be.visible");
+    cy.get('[data-test="server-pool-item"]').should("have.length", 0);
+
+    // Check with no server pools available
+    cy.fixture("serverPools.json").then((serverPools) => {
+      serverPools.data = [];
+      serverPools.meta.from = null;
+      serverPools.meta.per_page = 1;
+      serverPools.meta.to = null;
+      serverPools.meta.total = 0;
+      serverPools.meta.total_no_filter = 0;
+
+      cy.intercept("GET", "api/v1/serverPools*", {
+        statusCode: 200,
+        body: serverPools,
+      }).as("serverPoolsRequest");
+    });
+
+    cy.get('[data-test="server-pool-search"] > input').clear();
+    cy.get('[data-test="server-pool-search"] > input').type("Test2");
+    cy.get('[data-test="server-pool-search"] > input').type("{enter}");
+
+    cy.wait("@serverPoolsRequest").then((interception) => {
+      expect(interception.request.query.name).to.eql("Test2");
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that correct message is shown and no server pools are displayed
+    cy.contains("admin.server_pools.no_data").should("be.visible");
+    cy.get('[data-test="server-pool-item"]').should("have.length", 0);
+
+    // Check with 2 server pools on 2 pages
+    cy.fixture("serverPools.json").then((serverPools) => {
+      serverPools.data = serverPools.data.slice(0, 1);
+      serverPools.meta.last_page = 2;
+      serverPools.meta.per_page = 1;
+      serverPools.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/serverPools*", {
+        statusCode: 200,
+        body: serverPools,
+      }).as("serverPoolsRequest");
+    });
+
+    cy.get('[data-test="server-pool-search"] > input').clear();
+    cy.get('[data-test="server-pool-search"] > input').type("T");
+    cy.get('[data-test="server-pool-search"] > button').click();
+
+    cy.wait("@serverPoolsRequest").then((interception) => {
+      expect(interception.request.query.name).to.eql("T");
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that correct server pool is shown
+    cy.get('[data-test="server-pool-item"]').should("have.length", 1);
+    cy.get('[data-test="server-pool-item"]')
+      .eq(0)
+      .should("include.text", "Test");
+
+    // Check that pagination shows the correct number of pages
+    cy.get('[data-test="paginator-page"]').should("have.length", 2);
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    cy.fixture("serverPools.json").then((serverPools) => {
+      serverPools.data = serverPools.data.slice(1, 2);
+      serverPools.meta.current_page = 2;
+      serverPools.meta.from = 2;
+      serverPools.meta.last_page = 2;
+      serverPools.meta.per_page = 1;
+      serverPools.meta.to = 2;
+
+      cy.intercept("GET", "api/v1/serverPools*", {
+        statusCode: 200,
+        body: serverPools,
+      }).as("serverPoolsRequest");
+    });
+
+    // Click on button for next page (eq(1) needed because there are two paginator components
+    // (first one for small devices second one for larger devices))
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    // Check if search query stays the same after changing the page
+    cy.wait("@serverPoolsRequest").then((interception) => {
+      expect(interception.request.query.name).to.eql("T");
+      expect(interception.request.query).to.contain({
+        page: "2",
+      });
+    });
+
+    cy.get('[data-test="server-pool-search"] >input').should("have.value", "T");
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(1)
+      .should("have.attr", "data-p-active", "true");
+
+    // Check that correct server pool is shown
+    cy.get('[data-test="server-pool-item"]').should("have.length", 1);
+    cy.get('[data-test="server-pool-item"]')
+      .eq(0)
+      .should("include.text", "Production");
+
+    // Change search query and make sure that the page is reset
+    cy.fixture("serverPools.json").then((serverPools) => {
+      serverPools.data = serverPools.data.slice(0, 1);
+      serverPools.meta.last_page = 2;
+      serverPools.meta.per_page = 1;
+      serverPools.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/serverPools*", {
+        statusCode: 200,
+        body: serverPools,
+      }).as("serverPoolsRequest");
+    });
+
+    cy.get('[data-test="server-pool-search"] > input').type("e");
+    cy.get('[data-test="server-pool-search"] > button').click();
+
+    // Check that server pools are loaded with the page reset to the first page
+    cy.wait("@serverPoolsRequest").then((interception) => {
+      expect(interception.request.query.name).to.eql("Te");
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+  });
+
+  it("sort server pools", function () {
+    cy.visit("admin/server_pools");
+
+    cy.wait("@serverPoolsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "name",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that correct columns are sortable and correct sorting type is shown
+    cy.get('[data-test="server-pool-header-cell"]')
+      .eq(0)
+      .should("have.text", "app.model_name")
+      .and("have.attr", "data-p-sortable-column", "true")
+      .and("have.attr", "data-p-sorted", "true");
+    cy.get('[data-test="server-pool-header-cell"]')
+      .eq(1)
+      .should("have.text", "admin.server_pools.server_count")
+      .and("have.attr", "data-p-sortable-column", "true")
+      .and("have.attr", "data-p-sorted", "false");
+    cy.get('[data-test="server-pool-header-cell"]')
+      .eq(2)
+      .should("have.text", "app.actions")
+      .and("not.have.attr", "data-p-sortable-column", "true");
+
+    // Change sorting type and respond with 2 servers on 2 different pages
+    cy.fixture("serverPools.json").then((serverPools) => {
+      serverPools.data = serverPools.data.slice(0, 1);
+      serverPools.meta.last_page = 2;
+      serverPools.meta.per_page = 1;
+      serverPools.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/serverPools*", {
+        statusCode: 200,
+        body: serverPools,
+      }).as("serverPoolsRequest");
+    });
+
+    cy.get('[data-test="server-pool-header-cell"]').eq(1).click();
+
+    cy.wait("@serverPoolsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "servers_count",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that sorting is correct
+    cy.get('[data-test="server-pool-header-cell"]')
+      .eq(0)
+      .should("have.attr", "data-p-sorted", "false");
+
+    cy.get('[data-test="server-pool-header-cell"]')
+      .eq(1)
+      .should("have.attr", "data-p-sorted", "true");
+
+    // Check that correct server pool is shown
+    cy.get('[data-test="server-pool-item"]').should("have.length", 1);
+    cy.get('[data-test="server-pool-item"]')
+      .eq(0)
+      .should("include.text", "Test");
+
+    // Check that pagination shows the correct number of pages
+    cy.get('[data-test="paginator-page"]').should("have.length", 2);
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Switch to next page
+    cy.fixture("serverPools.json").then((serverPools) => {
+      serverPools.data = serverPools.data.slice(1, 2);
+      serverPools.meta.current_page = 2;
+      serverPools.meta.from = 2;
+      serverPools.meta.last_page = 2;
+      serverPools.meta.per_page = 1;
+      serverPools.meta.to = 2;
+
+      cy.intercept("GET", "api/v1/serverPools*", {
+        statusCode: 200,
+        body: serverPools,
+      }).as("serverPoolsRequest");
+    });
+
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    // Check that sorting stays the same
+    cy.wait("@serverPoolsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "2",
+        sort_by: "servers_count",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(1)
+      .should("have.attr", "data-p-active", "true");
+
+    // Check that sorting stays the same
+    cy.get('[data-test="server-pool-header-cell"]')
+      .eq(1)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "ascending");
+
+    // Check that correct server pool is shown
+    cy.get('[data-test="server-pool-item"]').should("have.length", 1);
+    cy.get('[data-test="server-pool-item"]')
+      .eq(0)
+      .should("include.text", "Production");
+
+    // Change sorting direction and make sure that the page is reset
+    cy.fixture("serverPools.json").then((serverPools) => {
+      serverPools.data = serverPools.data.slice(0, 1);
+      serverPools.meta.last_page = 2;
+      serverPools.meta.per_page = 1;
+      serverPools.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/serverPools*", {
+        statusCode: 200,
+        body: serverPools,
+      }).as("serverPoolsRequest");
+    });
+
+    cy.get('[data-test="server-pool-header-cell"]').eq(1).click();
+
+    // Check that server pools are loaded with the page reset to the first page
+    cy.wait("@serverPoolsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "servers_count",
+        sort_direction: "desc",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Check that sorting is correct
+    cy.get('[data-test="server-pool-header-cell"]')
+      .eq(1)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "descending");
+
+    // Check that correct server pool is shown
+    cy.get('[data-test="server-pool-item"]').should("have.length", 1);
+    cy.get('[data-test="server-pool-item"]')
+      .eq(0)
+      .should("include.text", "Test");
+
+    // Switch to next page
+    cy.fixture("serverPools.json").then((serverPools) => {
+      serverPools.data = serverPools.data.slice(1, 2);
+      serverPools.meta.current_page = 2;
+      serverPools.meta.from = 2;
+      serverPools.meta.last_page = 2;
+      serverPools.meta.per_page = 1;
+      serverPools.meta.to = 2;
+
+      cy.intercept("GET", "api/v1/serverPools*", {
+        statusCode: 200,
+        body: serverPools,
+      }).as("serverPoolsRequest");
+    });
+
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    // Check that sorting stays the same
+    cy.wait("@serverPoolsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "2",
+        sort_by: "servers_count",
+        sort_direction: "desc",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(1)
+      .should("have.attr", "data-p-active", "true");
+
+    // Check that sorting stays the same
+    cy.get('[data-test="server-pool-header-cell"]')
+      .eq(1)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "descending");
+
+    // Check that correct server pool is shown
+    cy.get('[data-test="server-pool-item"]').should("have.length", 1);
+    cy.get('[data-test="server-pool-item"]')
+      .eq(0)
+      .should("include.text", "Production");
+
+    // Change sorting and make sure that the page is reset
+    cy.fixture("serverPools.json").then((serverPools) => {
+      serverPools.data = serverPools.data.slice(0, 1);
+      serverPools.meta.last_page = 2;
+      serverPools.meta.per_page = 1;
+      serverPools.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/serverPools*", {
+        statusCode: 200,
+        body: serverPools,
+      }).as("serverPoolsRequest");
+    });
+
+    cy.get('[data-test="server-pool-header-cell"]').eq(0).click();
+
+    // Check that server pools are loaded with the page reset to the first page
+    cy.wait("@serverPoolsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "name",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Check that sorting is correct
+    cy.get('[data-test="server-pool-header-cell"]')
+      .eq(1)
+      .should("have.attr", "data-p-sorted", "false");
+
+    cy.get('[data-test="server-pool-header-cell"]')
+      .eq(0)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "ascending");
+  });
+
+  it("check button visibility with view permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "serverPools.viewAny",
+        "serverPools.view",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/server_pools");
+    cy.wait("@serverPoolsRequest");
+
+    cy.get('[data-test="server-pools-add-button"]').should("not.exist");
+
+    cy.get('[data-test="server-pool-item"]').should("have.length", 2);
+
+    cy.get('[data-test="server-pool-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="server-pools-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/server_pools/1");
+        cy.get('[data-test="server-pools-edit-button"]').should("not.exist");
+        cy.get('[data-test="server-pools-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="server-pool-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="server-pools-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/server_pools/2");
+        cy.get('[data-test="server-pools-edit-button"]').should("not.exist");
+        cy.get('[data-test="server-pools-delete-button"]').should("not.exist");
+      });
+  });
+
+  it("check button visibility with update permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "serverPools.viewAny",
+        "serverPools.view",
+        "serverPools.update",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/server_pools");
+    cy.wait("@serverPoolsRequest");
+
+    cy.get('[data-test="server-pools-add-button"]').should("not.exist");
+
+    cy.get('[data-test="server-pool-item"]').should("have.length", 2);
+
+    cy.get('[data-test="server-pool-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="server-pools-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/server_pools/1");
+        cy.get('[data-test="server-pools-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/server_pools/1/edit");
+        cy.get('[data-test="server-pools-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="server-pool-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="server-pools-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/server_pools/2");
+        cy.get('[data-test="server-pools-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/server_pools/2/edit");
+        cy.get('[data-test="server-pools-delete-button"]').should("not.exist");
+      });
+  });
+
+  it("check button visibility with add permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "serverPools.viewAny",
+        "serverPools.view",
+        "serverPools.update",
+        "serverPools.create",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/server_pools");
+    cy.wait("@serverPoolsRequest");
+
+    cy.get('[data-test="server-pools-add-button"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/server_pools/new");
+
+    cy.get('[data-test="server-pool-item"]').should("have.length", 2);
+
+    cy.get('[data-test="server-pool-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="server-pools-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/server_pools/1");
+        cy.get('[data-test="server-pools-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/server_pools/1/edit");
+        cy.get('[data-test="server-pools-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="server-pool-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="server-pools-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/server_pools/2");
+        cy.get('[data-test="server-pools-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/server_pools/2/edit");
+        cy.get('[data-test="server-pools-delete-button"]').should("not.exist");
+      });
+  });
+
+  it("check button visibility with delete permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "serverPools.viewAny",
+        "serverPools.view",
+        "serverPools.update",
+        "serverPools.create",
+        "serverPools.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/server_pools");
+    cy.wait("@serverPoolsRequest");
+
+    cy.get('[data-test="server-pools-add-button"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/server_pools/new");
+
+    cy.get('[data-test="server-pool-item"]').should("have.length", 2);
+
+    cy.get('[data-test="server-pool-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="server-pools-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/server_pools/1");
+        cy.get('[data-test="server-pools-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/server_pools/1/edit");
+        cy.get('[data-test="server-pools-delete-button"]').should("be.visible");
+      });
+
+    cy.get('[data-test="server-pool-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="server-pools-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/server_pools/2");
+        cy.get('[data-test="server-pools-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/server_pools/2/edit");
+        cy.get('[data-test="server-pools-delete-button"]').should("be.visible");
+      });
+  });
+});
diff --git a/tests/Frontend/e2e/AdminServerPoolsIndexServerPoolActions.cy.js b/tests/Frontend/e2e/AdminServerPoolsIndexServerPoolActions.cy.js
new file mode 100644
index 000000000..b55176956
--- /dev/null
+++ b/tests/Frontend/e2e/AdminServerPoolsIndexServerPoolActions.cy.js
@@ -0,0 +1,257 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin server pools index server pool actions", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminServerPoolsIndexRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "serverPools.viewAny",
+        "serverPools.view",
+        "serverPools.update",
+        "serverPools.create",
+        "serverPools.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("delete server pool", function () {
+    cy.visit("/admin/server_pools");
+
+    cy.wait("@serverPoolsRequest");
+
+    cy.get('[data-test="server-pool-item"]').should("have.length", 2);
+
+    cy.get('[data-test="server-pools-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="server-pool-item"]')
+      .eq(0)
+      .find('[data-test="server-pools-delete-button"]')
+      .click();
+
+    cy.get('[data-test="server-pools-delete-dialog"]').should("be.visible");
+
+    // Check that dialog shows correct data
+    cy.get('[data-test="server-pools-delete-dialog"]')
+      .should("include.text", "admin.server_pools.delete.title")
+      .should(
+        "include.text",
+        'admin.server_pools.delete.confirm_{"name":"Test"}',
+      );
+
+    // Confirm delete of server pool
+    const deleteServerPoolRequest = interceptIndefinitely(
+      "DELETE",
+      "api/v1/serverPools/1",
+      { statusCode: 204 },
+      "deleteServerPoolRequest",
+    );
+
+    cy.fixture("serverPools.json").then((serverPools) => {
+      serverPools.data = serverPools.data.slice(1, 2);
+      serverPools.meta.to = 1;
+      serverPools.meta.total = 1;
+      serverPools.meta.total_no_filter = 1;
+
+      cy.intercept("GET", "api/v1/serverPools*", {
+        statusCode: 200,
+        body: serverPools,
+      }).as("serverPoolsRequest");
+    });
+
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("have.text", "app.yes")
+      .click();
+
+    // Check loading
+    cy.get('[data-test="dialog-cancel-button"]')
+      .should("have.text", "app.no")
+      .and("be.disabled");
+
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("be.disabled")
+      .then(() => {
+        deleteServerPoolRequest.sendResponse();
+      });
+
+    cy.wait("@deleteServerPoolRequest");
+    cy.wait("@serverPoolsRequest");
+
+    // Check that server pool was deleted
+    cy.get('[data-test="server-pool-item"]').should("have.length", 1);
+
+    // Check that dialog is closed
+    cy.get('[data-test="server-pools-delete-dialog"]').should("not.exist");
+
+    // Reopen dialog for different user
+    cy.get('[data-test="server-pool-item"]')
+      .eq(0)
+      .find('[data-test="server-pools-delete-button"]')
+      .click();
+
+    cy.get('[data-test="server-pools-delete-dialog"]').should("be.visible");
+
+    // Check that dialog shows correct data
+    cy.get('[data-test="server-pools-delete-dialog"]')
+      .should("include.text", "admin.server_pools.delete.title")
+      .should(
+        "include.text",
+        'admin.server_pools.delete.confirm_{"name":"Production"}',
+      );
+
+    // Cancel delete of server pool
+    cy.get('[data-test="dialog-cancel-button"]').click();
+    cy.get('[data-test="server-pools-delete-dialog"]').should("not.exist");
+  });
+
+  it("delete server pool errors", function () {
+    cy.visit("/admin/server_pools");
+    cy.wait("@serverPoolsRequest");
+
+    cy.get('[data-test="server-pool-item"]').should("have.length", 2);
+
+    cy.get('[data-test="server-pools-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="server-pool-item"]')
+      .eq(0)
+      .find('[data-test="server-pools-delete-button"]')
+      .click();
+
+    cy.get('[data-test="server-pools-delete-dialog"]').should("be.visible");
+
+    // Check room type attached (428 error)
+    cy.intercept("DELETE", "api/v1/serverPools/1", {
+      statusCode: 428,
+      body: {
+        error: 428,
+        message: "app.errors.server_pool_delete_failed",
+        room_types: [
+          {
+            id: 1,
+            name: "Lecture",
+            description: null,
+            color: "#80BA27",
+            model_name: "RoomType",
+            updated_at: "2021-01-12T14:35:11.000000Z",
+          },
+          {
+            id: 2,
+            name: "Meeting",
+            description: null,
+            color: "#4a5c66",
+            model_name: "RoomType",
+            updated_at: "2021-01-12T14:35:11.000000Z",
+          },
+        ],
+      },
+    });
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.get('[data-test="server-pools-delete-dialog"]').should("be.visible");
+
+    // Check that error is shown correctly
+    cy.get('[data-test="server-pools-delete-dialog"]')
+      .should("include.text", "admin.server_pools.delete.failed")
+      .and("include.text", "Lecture")
+      .and("include.text", "Meeting");
+
+    // Check that action buttons are hidden
+    cy.get('[data-test="dialog-cancel-button"]').should("not.exist");
+    cy.get('[data-test="dialog-continue-button"]').should("not.exist");
+
+    // Close dialog
+    cy.get('[data-test="dialog-header-close-button"]').click();
+
+    cy.get('[data-test="server-pools-delete-dialog"]').should("not.exist");
+
+    // Open dialog again
+    cy.get('[data-test="server-pool-item"]')
+      .eq(0)
+      .find('[data-test="server-pools-delete-button"]')
+      .click();
+
+    // Check with 500 error
+    cy.intercept("DELETE", "api/v1/serverPools/1", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("deleteServerPoolRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteServerPoolRequest");
+
+    // Check that dialog is still open and that error message is shown
+    cy.get('[data-test="server-pools-delete-dialog"]').should("be.visible");
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check with 401 error
+    cy.intercept("DELETE", "api/v1/serverPools/1", {
+      statusCode: 401,
+    }).as("deleteServerPoolRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteServerPoolRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/server_pools");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("open add new server pool page", function () {
+    cy.visit("/admin/server_pools");
+
+    cy.wait("@serverPoolsRequest");
+
+    cy.interceptAdminServerPoolsNewRequests();
+
+    cy.get('[data-test="server-pools-add-button"]').click();
+
+    cy.url().should("include", "/admin/server_pools/new");
+  });
+
+  it("open edit server pool page", function () {
+    cy.visit("/admin/server_pools");
+
+    cy.wait("@serverPoolsRequest");
+
+    cy.interceptAdminServerPoolsViewRequests();
+
+    cy.get('[data-test="server-pool-item"]')
+      .eq(0)
+      .find('[data-test="server-pools-edit-button"]')
+      .click();
+
+    cy.url().should("include", "/admin/server_pools/1/edit");
+  });
+
+  it("open view server pool page", function () {
+    cy.visit("/admin/server_pools");
+
+    cy.wait("@serverPoolsRequest");
+
+    cy.interceptAdminServerPoolsViewRequests();
+
+    cy.get('[data-test="server-pool-item"]')
+      .eq(0)
+      .find('[data-test="server-pools-view-button"]')
+      .click();
+
+    cy.url().should("include", "/admin/server_pools/1");
+    cy.url().should("not.include", "/edit");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminServerPoolsNew.cy.js b/tests/Frontend/e2e/AdminServerPoolsNew.cy.js
new file mode 100644
index 000000000..392a5e0f0
--- /dev/null
+++ b/tests/Frontend/e2e/AdminServerPoolsNew.cy.js
@@ -0,0 +1,684 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin server pools new", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminServerPoolsNewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "serverPools.viewAny",
+        "serverPools.view",
+        "serverPools.update",
+        "serverPools.create",
+        "serverPools.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin/server_pools/new");
+  });
+
+  it("visit with user without permission to add new server pools", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "serverPools.viewAny",
+        "serverPools.view",
+        "serverPools.update",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/server_pools/new");
+
+    cy.checkToastMessage("app.flash.unauthorized");
+
+    // Check if the welcome page is shown
+    cy.url().should("not.include", "/admin/users");
+    cy.get("h1").should("be.visible").and("include.text", "home.title");
+  });
+
+  it("add new server pool with 1 server", function () {
+    cy.visit("/admin/server_pools/new");
+
+    // Check that header buttons are hidden
+    cy.get('[data-test="server-pools-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="server-pools-edit-button"]').should("not.exist");
+    cy.get('[data-test="server-pools-delete-button"]').should("not.exist");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.server_pools.index")
+      .should("include.text", "admin.breakcrumbs.server_pools.new");
+
+    cy.get('[data-test="name-field"]')
+      .should("be.visible")
+      .and("include.text", "app.model_name")
+      .within(() => {
+        cy.get("#name").should("have.value", "").type("Server Pool 1");
+      });
+
+    // Check that breadcrumbs stay the same
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.server_pools.index")
+      .should("include.text", "admin.breakcrumbs.server_pools.new");
+
+    cy.get('[data-test="description-field"]')
+      .should("be.visible")
+      .and("include.text", "app.description")
+      .within(() => {
+        cy.get("#description")
+          .should("have.value", "")
+          .type("Server Pool 1 description");
+      });
+
+    cy.get(".multiselect__content").should("not.be.visible");
+    cy.get('[data-test="server-field"]')
+      .should("be.visible")
+      .and("include.text", "app.servers")
+      .within(() => {
+        cy.get('[data-test="server-dropdown"]').within(() => {
+          cy.get(".multiselect__tags")
+            .should("include.text", "admin.server_pools.select_servers")
+            .click();
+          cy.get('[data-test="server-chip"]').should("have.length", 0);
+        });
+      });
+
+    // Check if correct options are shown
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").should("have.length", 6);
+    cy.get(".multiselect__option")
+      .eq(0)
+      .should("include.text", "Server 01")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(1)
+      .should("include.text", "Server 02")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(2)
+      .should("include.text", "Server 03")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(3)
+      .should("include.text", "Server 04")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(4)
+      .should(
+        "include.text",
+        "No elements found. Consider changing the search query.",
+      )
+      .and("not.be.visible");
+
+    cy.get(".multiselect__option")
+      .eq(5)
+      .should("include.text", "admin.servers.no_data")
+      .and("not.be.visible");
+
+    cy.get(".multiselect__option").eq(1).click();
+
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get('[data-test="server-dropdown"]').within(() => {
+      cy.get('[data-test="server-chip"]').should("have.length", 1);
+      cy.get('[data-test="server-chip"]')
+        .eq(0)
+        .should("include.text", "Server 02")
+        .find('[data-test="remove-server-button"]')
+        .should("be.visible");
+    });
+
+    // Select second role
+    cy.get(".multiselect__option").eq(2).click();
+
+    // Check that roles are shown and remove second role
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get('[data-test="server-dropdown"]').within(() => {
+      cy.get('[data-test="server-chip"]').should("have.length", 2);
+      cy.get('[data-test="server-chip"]')
+        .eq(0)
+        .should("include.text", "Server 02")
+        .find('[data-test="remove-server-button"]')
+        .should("be.visible");
+
+      cy.get('[data-test="server-chip"]')
+        .eq(1)
+        .should("include.text", "Server 03")
+        .find('[data-test="remove-server-button"]')
+        .should("be.visible")
+        .click();
+    });
+
+    // Check that dialog is closed
+    cy.get(".multiselect__content").should("not.be.visible");
+
+    // Save new server pool
+    cy.fixture("serverPool.json").then((serverPool) => {
+      serverPool.data.id = 20;
+      serverPool.data.name = "Server Pool 1";
+      serverPool.data.description = "Server Pool 1 description";
+      serverPool.data.servers = serverPool.data.servers.slice(1, 2);
+
+      const newServerPoolRequest = interceptIndefinitely(
+        "POST",
+        "api/v1/serverPools",
+        {
+          statusCode: 201,
+          body: serverPool,
+        },
+        "newServerPoolRequest",
+      );
+
+      cy.intercept("GET", "api/v1/serverPools/20", {
+        statusCode: 200,
+        body: serverPool,
+      }).as("serverPoolRequest");
+
+      cy.get('[data-test="overlay"]').should("not.exist");
+      cy.get('[data-test="server-pools-save-button"]')
+        .should("have.text", "app.save")
+        .click();
+
+      // Check loading
+      cy.get('[data-test="overlay"]').should("be.visible");
+      cy.get("#name").should("be.disabled");
+      cy.get("#description").should("be.disabled");
+      cy.get('[data-test="server-dropdown"]').should(
+        "have.class",
+        "multiselect--disabled",
+      );
+      cy.get('[data-test="server-pools-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          newServerPoolRequest.sendResponse();
+        });
+    });
+
+    // Check request data
+    cy.wait("@newServerPoolRequest").then((interception) => {
+      expect(interception.request.body).to.deep.equal({
+        name: "Server Pool 1",
+        description: "Server Pool 1 description",
+        servers: [2],
+      });
+    });
+
+    cy.wait("@serverPoolRequest");
+
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that server pool page is shown
+    cy.url().should("include", "/admin/server_pools/20");
+  });
+
+  it("add new server pool with several servers", function () {
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(0, 2);
+      servers.meta.last_page = 2;
+      servers.meta.per_page = 2;
+      servers.meta.to = 2;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    cy.visit("/admin/server_pools/new");
+
+    cy.wait("@serversRequest");
+
+    cy.get("#name").should("have.value", "").type("Server Pool 1");
+    cy.get("#description")
+      .should("have.value", "")
+      .type("Server Pool 1 description");
+
+    // Check server setting and change it
+    cy.get(".multiselect__content").should("not.be.visible");
+    cy.get('[data-test="server-field"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="server-dropdown"]').within(() => {
+          cy.get(".multiselect__tags")
+            .should("include.text", "admin.server_pools.select_servers")
+            .click();
+          cy.get('[data-test="server-chip"]').should("have.length", 0);
+        });
+      });
+
+    // Check if correct options are shown
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").should("have.length", 4);
+    cy.get(".multiselect__option")
+      .eq(0)
+      .should("include.text", "Server 01")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(1)
+      .should("include.text", "Server 02")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(2)
+      .should(
+        "include.text",
+        "No elements found. Consider changing the search query.",
+      )
+      .and("not.be.visible");
+    cy.get(".multiselect__option")
+      .eq(3)
+      .should("include.text", "admin.servers.no_data")
+      .and("not.be.visible");
+
+    // Select server
+    cy.get(".multiselect__option").eq(0).click();
+
+    // Check that dropdown is still open
+    cy.get(".multiselect__content").should("be.visible");
+
+    // Switch to next page
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(2, 4);
+      servers.meta.current_page = 2;
+      servers.meta.from = 3;
+      servers.meta.last_page = 2;
+      servers.meta.per_page = 2;
+      servers.meta.to = 4;
+
+      const serversRequest = interceptIndefinitely(
+        "GET",
+        "api/v1/servers*",
+        {
+          statusCode: 200,
+          body: servers,
+        },
+        "serversRequest",
+      );
+
+      cy.get(".multiselect__content")
+        .should("be.visible")
+        .within(() => {
+          cy.get('[data-test="previous-page-button"]')
+            .should("include.text", "app.previous_page")
+            .and("be.disabled");
+          cy.get('[data-test="next-page-button"]')
+            .should("include.text", "app.next_page")
+            .and("not.be.disabled");
+
+          cy.get('[data-test="next-page-button"]').click();
+
+          // Check loading
+          cy.get('[data-test="previous-page-button"]').should("be.disabled");
+          cy.get('[data-test="next-page-button"]').should("be.disabled");
+        });
+
+      cy.get('[data-test="server-dropdown"]').should(
+        "have.class",
+        "multiselect--disabled",
+      );
+
+      cy.get('[data-test="server-pools-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          serversRequest.sendResponse();
+        });
+    });
+
+    cy.wait("@serversRequest");
+
+    cy.get('[data-test="server-dropdown"]').should(
+      "not.have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get(".multiselect__content")
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="previous-page-button"]').should("not.be.disabled");
+        cy.get('[data-test="next-page-button"]').should("be.disabled");
+      });
+
+    // Check that correct options are shown
+    cy.get(".multiselect__option").should("have.length", 4);
+    cy.get(".multiselect__option")
+      .eq(0)
+      .should("include.text", "Server 03")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(1)
+      .should("include.text", "Server 04")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(2)
+      .should(
+        "include.text",
+        "No elements found. Consider changing the search query.",
+      )
+      .and("not.be.visible");
+    cy.get(".multiselect__option")
+      .eq(3)
+      .should("include.text", "admin.servers.no_data")
+      .and("not.be.visible");
+
+    // Select servers
+    cy.get(".multiselect__option").eq(1).click();
+
+    // Check that servers are shown
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get('[data-test="server-dropdown"]').within(() => {
+      cy.get('[data-test="server-chip"]').should("have.length", 2);
+      cy.get('[data-test="server-chip"]')
+        .eq(0)
+        .should("include.text", "Server 01")
+        .find('[data-test="remove-server-button"]')
+        .should("be.visible");
+
+      cy.get('[data-test="server-chip"]')
+        .eq(1)
+        .should("include.text", "Server 04")
+        .find('[data-test="remove-server-button"]')
+        .should("be.visible");
+    });
+
+    // Close dialog
+    cy.get(".multiselect__select").click({ force: true }); // ToDo remove force when possible
+
+    // Check that dialog is closed
+    cy.get(".multiselect__content").should("not.be.visible");
+
+    // Save new server pool
+    cy.fixture("servers.json").then((servers) => {
+      cy.fixture("serverPool.json").then((serverPool) => {
+        serverPool.data.id = 20;
+        serverPool.data.name = "Server Pool 1";
+        serverPool.data.description = "Server Pool 1 description";
+        serverPool.data.servers = servers.data.filter(
+          (server) => server.id === 1 || server.id === 4,
+        );
+
+        cy.intercept("POST", "api/v1/serverPools", {
+          statusCode: 201,
+          body: serverPool,
+        }).as("newServerPoolRequest");
+
+        cy.intercept("GET", "api/v1/serverPools/20", {
+          statusCode: 200,
+          body: serverPool,
+        }).as("serverPoolRequest");
+      });
+    });
+
+    cy.get('[data-test="server-pools-save-button"]').click();
+
+    // Check request data
+    cy.wait("@newServerPoolRequest").then((interception) => {
+      expect(interception.request.body).to.deep.equal({
+        name: "Server Pool 1",
+        description: "Server Pool 1 description",
+        servers: [1, 4],
+      });
+    });
+
+    cy.wait("@serverPoolRequest");
+
+    // Check that user page is shown
+    cy.url().should("include", "/admin/server_pools/20");
+  });
+
+  it("add new server pool errors", function () {
+    cy.visit("/admin/server_pools/new");
+
+    // Set values
+    cy.get("#description").type("Server Pool 1 description");
+    cy.get('[data-test="server-dropdown"]').click();
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").eq(0).click();
+    cy.get(".multiselect__select").click();
+    cy.get(".multiselect__content").should("not.be.visible");
+
+    // Check with 422 error
+    cy.intercept("POST", "api/v1/serverPools", {
+      statusCode: 422,
+      body: {
+        message: "The given data was invalid.",
+        errors: {
+          name: ["The Name field is required."],
+          description: [
+            "The Description must not be greater than 255 characters.",
+          ],
+          servers: ["The server with the ID 1 could not be found."],
+        },
+      },
+    }).as("newServerPoolRequest");
+
+    cy.get('[data-test="server-pools-save-button"]').click();
+
+    cy.wait("@newServerPoolRequest");
+
+    // Check that error messages are shown
+    cy.get('[data-test="name-field"]').should(
+      "include.text",
+      "The Name field is required.",
+    );
+
+    cy.get('[data-test="description-field"]').should(
+      "include.text",
+      "The Description must not be greater than 255 characters.",
+    );
+
+    cy.get('[data-test="server-field"]').should(
+      "include.text",
+      "The server with the ID 1 could not be found.",
+    );
+
+    cy.get("#name").type("Server Pool 1");
+
+    // Check with 500 error
+    cy.intercept("POST", "api/v1/serverPools", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("newServerPoolRequest");
+
+    cy.get('[data-test="server-pools-save-button"]').click();
+
+    cy.wait("@newServerPoolRequest");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that 422 error messages are hidden
+    cy.get('[data-test="name-field"]').should(
+      "not.include.text",
+      "The Name field is required.",
+    );
+
+    cy.get('[data-test="description-field"]').should(
+      "not.include.text",
+      "The Description must not be greater than 255 characters.",
+    );
+
+    cy.get('[data-test="server-field"]').should(
+      "not.include.text",
+      "The server with the ID 1 could not be found.",
+    );
+
+    // Check with 401 error
+    cy.intercept("POST", "api/v1/serverPools", {
+      statusCode: 401,
+    }).as("newServerPoolRequest");
+
+    cy.get('[data-test="server-pools-save-button"]').click();
+
+    cy.wait("@newServerPoolRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/server_pools/new");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("load servers errors", function () {
+    // Check with 500 error
+    const serversRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/servers*",
+      {
+        statusCode: 500,
+        body: {
+          message: "Test",
+        },
+      },
+      "serversRequest",
+    );
+
+    cy.visit("/admin/server_pools/new");
+
+    // Check loading
+    cy.get('[data-test="server-pools-save-button"]').should("be.disabled");
+
+    cy.get('[data-test="server-dropdown"]')
+      .should("have.class", "multiselect--disabled")
+      .then(() => {
+        serversRequest.sendResponse();
+      });
+
+    cy.wait("@serversRequest");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    cy.get('[data-test="server-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="server-pools-save-button"]').should("be.disabled");
+
+    // Reload servers without errors
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(0, 2);
+      servers.meta.last_page = 2;
+      servers.meta.per_page = 2;
+      servers.meta.to = 2;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    cy.get('[data-test="servers-reload-button"]').click();
+
+    cy.wait("@serversRequest");
+
+    cy.get('[data-test="server-dropdown"]').should(
+      "not.have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="servers-reload-button"]').should("not.exist");
+
+    cy.get('[data-test="server-pools-save-button"]').should("not.be.disabled");
+
+    cy.get('[data-test="server-dropdown"]').click();
+
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").should("have.length", 4);
+
+    // Check with 500 error when switching pages
+    cy.intercept("GET", "api/v1/servers*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("serversRequest");
+
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get('[data-test="next-page-button"]').click();
+
+    cy.wait("@serversRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    cy.get('[data-test="server-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="server-pools-save-button"]').should("be.disabled");
+
+    // Check with 401 error
+    cy.intercept("GET", "api/v1/servers*", {
+      statusCode: 401,
+    }).as("serversRequest");
+
+    cy.reload();
+
+    cy.wait("@serversRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/server_pools/new");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+
+    // Visit page again with servers
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(0, 2);
+      servers.meta.last_page = 2;
+      servers.meta.per_page = 2;
+      servers.meta.to = 2;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    cy.visit("/admin/server_pools/new");
+
+    cy.wait("@serversRequest");
+
+    cy.get('[data-test="server-dropdown"]').click();
+
+    // Check with 401 error when switching pages
+    cy.intercept("GET", "api/v1/servers*", {
+      statusCode: 401,
+    }).as("serversRequest");
+
+    cy.get(".multiselect__content").should("be.visible");
+
+    cy.get('[data-test="next-page-button"]').click();
+
+    cy.wait("@serversRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/server_pools/new");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminServerPoolsView.cy.js b/tests/Frontend/e2e/AdminServerPoolsView.cy.js
new file mode 100644
index 000000000..a9af1d65b
--- /dev/null
+++ b/tests/Frontend/e2e/AdminServerPoolsView.cy.js
@@ -0,0 +1,265 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin server pools view", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminServerPoolsViewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "serverPools.viewAny",
+        "serverPools.view",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin/server_pools/1");
+  });
+
+  it("visit with user without permission to view server pools", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view", "serverPools.viewAny"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/server_pools/1");
+
+    cy.checkToastMessage("app.flash.unauthorized");
+
+    // Check if welcome page is shown
+    cy.url().should("not.include", "/admin/servers/1");
+    cy.get("h1").should("be.visible").and("include.text", "home.title");
+  });
+
+  it("check serverPoolView shown correctly", function () {
+    const serverPoolRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/serverPools/1",
+      { fixture: "serverPool.json" },
+      "serverPoolRequest",
+    );
+
+    cy.visit("/admin/server_pools/1");
+
+    cy.contains("admin.title");
+
+    // Check loading
+    cy.get('[data-test="server-pools-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="server-pools-edit-button"]').should("not.exist");
+    cy.get('[data-test="server-pools-delete-button"]').should("not.exist");
+    cy.get('[data-test="server-pools-save-button"]').should("not.exist");
+
+    cy.get('[data-test="overlay"]')
+      .should("be.visible")
+      .then(() => {
+        serverPoolRequest.sendResponse();
+      });
+
+    cy.wait("@serverPoolRequest");
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that buttons are still hidden
+    cy.get('[data-test="server-pools-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="server-pools-edit-button"]').should("not.exist");
+    cy.get('[data-test="server-pools-delete-button"]').should("not.exist");
+    cy.get('[data-test="server-pools-save-button"]').should("not.exist");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.server_pools.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.server_pools.view_{"name":"Test"}',
+      );
+
+    // Check that server pool data is shown correctly
+    cy.get('[data-test="name-field"]')
+      .should("be.visible")
+      .and("include.text", "app.model_name")
+      .within(() => {
+        cy.get("#name").should("have.value", "Test").and("be.disabled");
+      });
+
+    cy.get('[data-test="description-field"]')
+      .should("be.visible")
+      .and("include.text", "app.description")
+      .within(() => {
+        cy.get("#description")
+          .should("have.value", "Pool for testing")
+          .and("be.disabled");
+      });
+
+    cy.get('[data-test="server-field"]')
+      .should("be.visible")
+      .and("include.text", "app.servers")
+      .within(() => {
+        cy.get('[data-test="server-dropdown"]')
+          .should("have.class", "multiselect--disabled")
+          .within(() => {
+            cy.get('[data-test="server-chip"]').should("have.length", 2);
+            cy.get('[data-test="server-chip"]')
+              .eq(0)
+              .should("include.text", "Server 01")
+              .find('[data-test="remove-server-button"]')
+              .should("not.exist");
+            cy.get('[data-test="server-chip"]')
+              .eq(1)
+              .should("include.text", "Server 02")
+              .find('[data-test="remove-server-button"]')
+              .should("not.exist");
+          });
+      });
+  });
+
+  it("check button visibility with update permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "serverPools.viewAny",
+        "serverPools.view",
+        "serverPools.update",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/server_pools/1");
+
+    cy.wait("@serverPoolRequest");
+
+    cy.get('[data-test="server-pools-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="server-pools-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("have.text", "app.edit")
+      .and("have.attr", "href", "/admin/server_pools/1/edit");
+    cy.get('[data-test="server-pools-delete-button"]').should("not.exist");
+    cy.get('[data-test="server-pools-save-button"]').should("not.exist");
+  });
+
+  it("check button visibility with delete permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "serverPools.viewAny",
+        "serverPools.view",
+        "serverPools.update",
+        "serverPools.create",
+        "serverPools.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/server_pools/1");
+
+    cy.wait("@serverPoolRequest");
+
+    cy.get('[data-test="server-pools-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="server-pools-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("have.text", "app.edit")
+      .and("have.attr", "href", "/admin/server_pools/1/edit");
+    cy.get('[data-test="server-pools-delete-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+    cy.get('[data-test="server-pools-save-button"]').should("not.exist");
+  });
+
+  it("open view errors", function () {
+    cy.intercept("GET", "api/v1/serverPools/1", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("serverPoolRequest");
+
+    cy.visit("/admin/server_pools/1");
+
+    cy.wait("@serverPoolRequest");
+
+    // Check that overlay is shown
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Reload with correct data
+    cy.intercept("GET", "api/v1/serverPools/1", {
+      statusCode: 200,
+      fixture: "serverPool.json",
+    }).as("serverPoolRequest");
+
+    cy.get('[data-test="loading-retry-button"]')
+      .should("be.visible")
+      .and("have.text", "app.reload")
+      .click();
+
+    cy.wait("@serverPoolRequest");
+
+    // Check that overlay is not shown anymore
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
+
+    // Reload page with 404 errors
+    cy.interceptAdminServerPoolsIndexRequests();
+
+    cy.intercept("GET", "api/v1/serverPools/1", {
+      statusCode: 404,
+      body: {
+        message: "No query results for model",
+      },
+    }).as("serverPoolRequest");
+
+    cy.reload();
+
+    cy.wait("@serverPoolRequest");
+
+    // Check that redirect worked
+    cy.url().should("not.include", "/admin/server_pools/1");
+    cy.url().should("include", "/admin/server_pools");
+
+    cy.wait("@serverPoolsRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"No query results for model"}',
+      'app.flash.server_error.error_code_{"statusCode":404}',
+    ]);
+
+    // Reload page with 401 error
+    cy.intercept("GET", "api/v1/serverPools/1", {
+      statusCode: 401,
+    }).as("serverPoolRequest");
+
+    cy.visit("/admin/server_pools/1");
+
+    cy.wait("@serverPoolRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/server_pools/1");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminServerPoolsViewServerPoolActions.cy.js b/tests/Frontend/e2e/AdminServerPoolsViewServerPoolActions.cy.js
new file mode 100644
index 000000000..bc47f80a0
--- /dev/null
+++ b/tests/Frontend/e2e/AdminServerPoolsViewServerPoolActions.cy.js
@@ -0,0 +1,316 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin server pools view", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminServerPoolsViewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "serverPools.viewAny",
+        "serverPools.view",
+        "serverPools.update",
+        "serverPools.create",
+        "serverPools.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("delete server pool", function () {
+    cy.visit("/admin/server_pools/1");
+
+    cy.wait("@serverPoolRequest");
+
+    cy.get('[data-test="server-pools-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="server-pools-delete-button"]').click();
+
+    cy.get('[data-test="server-pools-delete-dialog"]').should("be.visible");
+
+    // Check that dialog shows correct data
+    cy.get('[data-test="server-pools-delete-dialog"]')
+      .should("include.text", "admin.server_pools.delete.title")
+      .should(
+        "include.text",
+        'admin.server_pools.delete.confirm_{"name":"Test"}',
+      );
+
+    // Confirm delete of server pool
+    const deleteServerPoolRequest = interceptIndefinitely(
+      "DELETE",
+      "api/v1/serverPools/1",
+      { statusCode: 204 },
+      "deleteServerPoolRequest",
+    );
+
+    cy.fixture("serverPools.json").then((serverPools) => {
+      serverPools.data = serverPools.data.slice(1, 2);
+      serverPools.meta.to = 1;
+      serverPools.meta.total = 1;
+      serverPools.meta.total_no_filter = 1;
+
+      cy.intercept("GET", "api/v1/serverPools*", {
+        statusCode: 200,
+        body: serverPools,
+      }).as("serverPoolsRequest");
+    });
+
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("have.text", "app.yes")
+      .click();
+
+    // Check loading
+    cy.get('[data-test="dialog-cancel-button"]')
+      .should("have.text", "app.no")
+      .and("be.disabled");
+
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("be.disabled")
+      .then(() => {
+        deleteServerPoolRequest.sendResponse();
+      });
+
+    cy.wait("@deleteServerPoolRequest");
+    cy.wait("@serverPoolsRequest");
+
+    // Check that redirect worked
+    cy.url().should("not.include", "/admin/server_pools/1");
+    cy.url().should("include", "/admin/server_pools");
+  });
+
+  it("delete server pool errors", function () {
+    cy.visit("/admin/server_pools/1");
+    cy.wait("@serverPoolRequest");
+
+    cy.get('[data-test="server-pools-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="server-pools-delete-button"]').click();
+
+    cy.get('[data-test="server-pools-delete-dialog"]').should("be.visible");
+
+    // Check room type attached (428 error)
+    cy.intercept("DELETE", "api/v1/serverPools/1", {
+      statusCode: 428,
+      body: {
+        error: 428,
+        message: "app.errors.server_pool_delete_failed",
+        room_types: [
+          {
+            id: 1,
+            name: "Lecture",
+            description: null,
+            color: "#80BA27",
+            model_name: "RoomType",
+            updated_at: "2021-01-12T14:35:11.000000Z",
+          },
+          {
+            id: 2,
+            name: "Meeting",
+            description: null,
+            color: "#4a5c66",
+            model_name: "RoomType",
+            updated_at: "2021-01-12T14:35:11.000000Z",
+          },
+        ],
+      },
+    });
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.get('[data-test="server-pools-delete-dialog"]').should("be.visible");
+
+    // Check that error is shown correctly
+    cy.get('[data-test="server-pools-delete-dialog"]')
+      .should("include.text", "admin.server_pools.delete.failed")
+      .and("include.text", "Lecture")
+      .and("include.text", "Meeting");
+
+    // Check that action buttons are hidden
+    cy.get('[data-test="dialog-cancel-button"]').should("not.exist");
+    cy.get('[data-test="dialog-continue-button"]').should("not.exist");
+
+    // Close dialog
+    cy.get('[data-test="dialog-header-close-button"]').click();
+
+    cy.get('[data-test="server-pools-delete-dialog"]').should("not.exist");
+
+    // Open dialog again
+    cy.get('[data-test="server-pools-delete-button"]').click();
+
+    // Check with 500 error
+    cy.intercept("DELETE", "api/v1/serverPools/1", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("deleteServerPoolRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteServerPoolRequest");
+
+    // Check that dialog is still open and that error message is shown
+    cy.get('[data-test="server-pools-delete-dialog"]').should("be.visible");
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check with 401 error
+    cy.intercept("DELETE", "api/v1/serverPools/1", {
+      statusCode: 401,
+    }).as("deleteServerPoolRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteServerPoolRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/server_pools/1");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("switch between edit and view", function () {
+    cy.visit("/admin/server_pools/1/edit");
+
+    cy.wait("@serverPoolRequest");
+    cy.wait("@serversRequest");
+
+    // Check values and change them
+    cy.get("#name").should("not.be.disabled").and("have.value", "Test").clear();
+    cy.get("#name").type("Server Pool 1");
+
+    cy.get("#description")
+      .should("not.be.disabled")
+      .and("have.value", "Pool for testing")
+      .clear();
+    cy.get("#description").type("Server Pool 1 description");
+
+    cy.get('[data-test="server-dropdown"]')
+      .should("not.have.class", "multiselect--disabled")
+      .within(() => {
+        cy.get('[data-test="server-chip"]').should("have.length", 2);
+        cy.get('[data-test="server-chip"]')
+          .eq(0)
+          .should("include.text", "Server 01")
+          .find('[data-test="remove-server-button"]')
+          .should("be.visible");
+        cy.get('[data-test="server-chip"]')
+          .eq(1)
+          .should("include.text", "Server 02")
+          .find('[data-test="remove-server-button"]')
+          .should("be.visible");
+      });
+
+    cy.get('[data-test="server-dropdown"]').click();
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").eq(2).click();
+
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get('[data-test="server-dropdown"]').within(() => {
+      cy.get('[data-test="server-chip"]').should("have.length", 3);
+      cy.get('[data-test="server-chip"]')
+        .eq(0)
+        .should("include.text", "Server 01")
+        .find('[data-test="remove-server-button"]')
+        .should("be.visible");
+
+      cy.get('[data-test="server-chip"]')
+        .eq(1)
+        .should("include.text", "Server 02")
+        .find('[data-test="remove-server-button"]')
+        .should("be.visible");
+      cy.get('[data-test="server-chip"]')
+        .eq(2)
+        .should("include.text", "Server 03")
+        .find('[data-test="remove-server-button"]')
+        .should("be.visible");
+    });
+
+    // Close dropdown
+    cy.get(".multiselect__select").click();
+    cy.get(".multiselect__content").should("not.be.visible");
+
+    // Check that save button is shown
+    cy.get('[data-test="server-pools-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+
+    // Switch to view
+    cy.get('[data-test="server-pools-cancel-edit-button"]').click();
+
+    // Check if redirected to view page
+    cy.url().should("include", "/admin/server_pools/1");
+    cy.url().should("not.include", "/edit");
+
+    cy.wait("@serverPoolRequest");
+
+    // Check that changes were not saved
+    cy.get("#name").should("be.disabled").and("have.value", "Test");
+    cy.get("#description")
+      .should("be.disabled")
+      .and("have.value", "Pool for testing");
+
+    cy.get('[data-test="server-dropdown"]')
+      .should("have.class", "multiselect--disabled")
+      .within(() => {
+        cy.get('[data-test="server-chip"]').should("have.length", 2);
+        cy.get('[data-test="server-chip"]')
+          .eq(0)
+          .should("include.text", "Server 01")
+          .find('[data-test="remove-server-button"]')
+          .should("not.exist");
+        cy.get('[data-test="server-chip"]')
+          .eq(1)
+          .should("include.text", "Server 02")
+          .find('[data-test="remove-server-button"]')
+          .should("not.exist");
+      });
+
+    // Check that save button is hidden
+    cy.get('[data-test="server-pools-save-button"]').should("not.exist");
+
+    // Switch back to edit
+    cy.get('[data-test="server-pools-edit-button"]').click();
+
+    // Check if redirected to edit page
+    cy.url().should("include", "/admin/server_pools/1/edit");
+
+    cy.wait("@serverPoolRequest");
+    cy.wait("@serversRequest");
+
+    // Check that original values are shown
+    cy.get("#name").should("not.be.disabled").and("have.value", "Test");
+    cy.get("#description")
+      .should("not.be.disabled")
+      .and("have.value", "Pool for testing");
+
+    cy.get('[data-test="server-dropdown"]')
+      .should("not.have.class", "multiselect--disabled")
+      .within(() => {
+        cy.get('[data-test="server-chip"]').should("have.length", 2);
+        cy.get('[data-test="server-chip"]')
+          .eq(0)
+          .should("include.text", "Server 01")
+          .find('[data-test="remove-server-button"]')
+          .should("be.visible");
+        cy.get('[data-test="server-chip"]')
+          .eq(1)
+          .should("include.text", "Server 02")
+          .find('[data-test="remove-server-button"]')
+          .should("be.visible");
+      });
+
+    // Check that save button is shown
+    cy.get('[data-test="server-pools-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminServersEdit.cy.js b/tests/Frontend/e2e/AdminServersEdit.cy.js
new file mode 100644
index 000000000..4b21063e4
--- /dev/null
+++ b/tests/Frontend/e2e/AdminServersEdit.cy.js
@@ -0,0 +1,844 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+describe("Admin servers edit", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminServersViewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "servers.view",
+        "servers.update",
+        "servers.create",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin/servers/1/edit");
+  });
+
+  it("visit with user without permission to edit servers", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "servers.view",
+      ];
+
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/users/2/edit");
+
+    cy.checkToastMessage("app.flash.unauthorized");
+
+    // Check if welcome page is shown
+    cy.url().should("not.include", "/admin/users/2/edit");
+    cy.get("h1").should("be.visible").and("include.text", "home.title");
+  });
+
+  it("edit server", function () {
+    const serverRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/servers/1",
+      { fixture: "server.json" },
+      "serverRequest",
+    );
+
+    cy.visit("/admin/servers/1/edit");
+
+    cy.contains("admin.title");
+
+    // Check loading
+    cy.get('[data-test="servers-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-delete-button"]').should("not.exist");
+    cy.get('[data-test="servers-save-button"]').should("be.disabled");
+
+    cy.get('[data-test="overlay"]')
+      .should("be.visible")
+      .then(() => {
+        serverRequest.sendResponse();
+      });
+
+    cy.wait("@serverRequest");
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that buttons are still hidden (missing permissions)
+    cy.get('[data-test="servers-cancel-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.cancel_editing")
+      .and("have.attr", "href", "/admin/servers/1");
+    cy.get('[data-test="servers-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-delete-button"]').should("not.exist");
+    cy.get('[data-test="servers-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.save");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.servers.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.servers.edit_{"name":"Server 01"}',
+      );
+
+    // Change server settings
+    cy.get('[data-test="name-field"]')
+      .should("be.visible")
+      .and("include.text", "app.model_name")
+      .within(() => {
+        cy.get("#name").and("have.value", "Server 01").clear();
+        cy.get("#name").type("Server 02");
+      });
+
+    // Check that breadcrumbs stay the same
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.servers.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.servers.edit_{"name":"Server 01"}',
+      );
+
+    cy.get('[data-test="description-field"]')
+      .should("be.visible")
+      .and("include.text", "app.description")
+      .within(() => {
+        cy.get("#description").and("have.value", "Testserver 01").clear();
+        cy.get("#description").type("Testserver 02 for testing purposes");
+      });
+
+    cy.get('[data-test="version-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.version")
+      .within(() => {
+        cy.get("#version").should("have.value", "2.4.5").and("be.disabled");
+      });
+
+    cy.get('[data-test="base-url-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.base_url")
+      .within(() => {
+        cy.get("#base_url")
+          .and("have.value", "https://localhost/bigbluebutton")
+          .clear();
+        cy.get("#base_url").type("https://localhost/bigbluebutton2");
+      });
+
+    cy.get('[data-test="secret-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.secret")
+      .within(() => {
+        cy.get("#secret").and("have.value", "123456789").clear();
+        cy.get("#secret").type("Secret123456789");
+      });
+
+    cy.get('[data-test="strength-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.strength")
+      .and("include.text", "admin.servers.strength_description")
+      .within(() => {
+        cy.get('[data-test="strength-rating"]').should(
+          "not.have.class",
+          "p-disabled",
+        );
+
+        cy.get('[data-test="strength-rating-option"]').should(
+          "have.length",
+          10,
+        );
+
+        // Check that correct options are active
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="strength-rating-option"]')
+            .eq(i)
+            .should("have.attr", "data-p-active", i < 2 ? "true" : "false");
+        }
+
+        // Click on one of the options
+        cy.get('[data-test="strength-rating-option"]').eq(5).click();
+
+        // Check that correct options are active
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="strength-rating-option"]')
+            .eq(i)
+            .should("have.attr", "data-p-active", i < 6 ? "true" : "false");
+        }
+      });
+
+    cy.get('[data-test="status-dropdown-items"]').should("not.exist");
+    cy.get('[data-test="status-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.status")
+      .within(() => {
+        cy.get('[data-test="status-dropdown"]')
+          .should("have.text", "admin.servers.enabled")
+          .within(() => {
+            cy.get(".p-select-label").should(
+              "not.have.attr",
+              "aria-disabled",
+              "true",
+            );
+          });
+
+        cy.get('[data-test="status-dropdown"]').click();
+      });
+
+    cy.get('[data-test="status-dropdown-items"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="status-dropdown-option"]').should("have.length", 3);
+
+        cy.get('[data-test="status-dropdown-option"]')
+          .eq(0)
+          .should("have.text", "admin.servers.enabled");
+        cy.get('[data-test="status-dropdown-option"]')
+          .eq(1)
+          .should("have.text", "admin.servers.draining");
+        cy.get('[data-test="status-dropdown-option"]')
+          .eq(2)
+          .should("have.text", "admin.servers.disabled");
+
+        cy.get('[data-test="status-dropdown-option"]').eq(2).click();
+      });
+
+    cy.get('[data-test="status-dropdown-items"]').should("not.exist");
+    cy.get('[data-test="status-dropdown"]').should(
+      "have.text",
+      "admin.servers.disabled",
+    );
+
+    cy.get('[data-test="health-status-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.connection")
+      .within(() => {
+        cy.get("#healthStatus")
+          .should("have.value", "admin.servers.online")
+          .and("be.disabled");
+        cy.get('[data-test="servers-test-connection-button"]')
+          .should("be.visible")
+          .and("have.text", "admin.servers.test_connection")
+          .and("not.be.disabled");
+      });
+
+    // Check that other fields are hidden
+    cy.get('[data-test="meeting-count-field"]').should("not.exist");
+
+    cy.get('[data-test="own-meeting-count-field"]').should("not.exist");
+
+    cy.get('[data-test="participant-count-field"]').should("not.exist");
+
+    cy.get('[data-test="video-count-field"]').should("not.exist");
+
+    // Check that panic button is hidden
+    cy.get('[data-test="servers-panic-button"]').should("not.exist");
+
+    // Save changes
+    cy.fixture("server.json").then((server) => {
+      server.data.name = "Server 02";
+      server.data.description = "Testserver 02 for testing purposes";
+      server.data.base_url = "https://localhost/bigbluebutton2";
+      server.data.secret = "Secret123456789";
+      server.data.strength = 6;
+      server.data.status = -1;
+
+      const saveChangesRequest = interceptIndefinitely(
+        "PUT",
+        "api/v1/servers/1",
+        {
+          statusCode: 200,
+          body: server,
+        },
+        "saveChangesRequest",
+      );
+
+      cy.intercept("GET", "api/v1/servers/1", {
+        statusCode: 200,
+        body: server,
+      }).as("serverRequest");
+
+      cy.get('[data-test="overlay"]').should("not.exist");
+      cy.get('[data-test="servers-save-button"]')
+        .should("be.visible")
+        .and("have.text", "app.save")
+        .click();
+
+      // Check loading
+      cy.get('[data-test="overlay"]').should("be.visible");
+
+      // Check that fields are disabled
+      cy.get("#name").should("be.disabled");
+      cy.get("#description").should("be.disabled");
+      cy.get("#version").should("be.disabled");
+      cy.get("#base_url").should("be.disabled");
+      cy.get("#secret").should("be.disabled");
+      cy.get('[data-test="strength-rating"]').should(
+        "have.class",
+        "p-disabled",
+      );
+      cy.get('[data-test="status-dropdown"]').within(() => {
+        cy.get(".p-select-label").should("have.attr", "aria-disabled", "true");
+      });
+
+      cy.get("#healthStatus").and("be.disabled");
+      cy.get('[data-test="servers-test-connection-button"]').should(
+        "be.disabled",
+      );
+
+      cy.get('[data-test="servers-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          saveChangesRequest.sendResponse();
+        });
+
+      cy.wait("@saveChangesRequest").then((interception) => {
+        expect(interception.request.body).to.eql(server.data);
+      });
+    });
+
+    cy.wait("@serverRequest");
+
+    // Check that redirect to server view worked
+    cy.url().should("include", "/admin/servers/1");
+    cy.url().should("not.include", "/edit");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.servers.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.servers.view_{"name":"Server 02"}',
+      );
+  });
+
+  it("save changes errors", function () {
+    cy.visit("/admin/servers/1/edit");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.servers.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.servers.edit_{"name":"Server 01"}',
+      );
+
+    // Check with 422 error
+    cy.intercept("PUT", "api/v1/servers/1", {
+      statusCode: 422,
+      body: {
+        errors: {
+          name: ["The name field is required."],
+          description: ["The description field is required."],
+          base_url: ["The base url field is required."],
+          secret: ["The secret field is required."],
+          strength: ["The strength field is required."],
+          status: ["The status field is required."],
+        },
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="servers-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check error messages
+    cy.get('[data-test="name-field"]').should(
+      "include.text",
+      "The name field is required.",
+    );
+
+    cy.get('[data-test="description-field"]').should(
+      "include.text",
+      "The description field is required.",
+    );
+
+    cy.get('[data-test="base-url-field"]').should(
+      "include.text",
+      "The base url field is required.",
+    );
+
+    cy.get('[data-test="secret-field"]').should(
+      "include.text",
+      "The secret field is required.",
+    );
+
+    cy.get('[data-test="strength-field"]').should(
+      "include.text",
+      "The strength field is required.",
+    );
+
+    cy.get('[data-test="status-field"]').should(
+      "include.text",
+      "The status field is required.",
+    );
+
+    // Set values
+    cy.get("#name").and("have.value", "Server 01").clear();
+    cy.get("#name").type("Server 02");
+    cy.get("#description").and("have.value", "Testserver 01").clear();
+    cy.get("#description").type("Testserver 02 for testing purposes");
+    cy.get("#base_url")
+      .and("have.value", "https://localhost/bigbluebutton")
+      .clear();
+    cy.get("#base_url").type("https://localhost/bigbluebutton2");
+    cy.get("#secret").and("have.value", "123456789").clear();
+    cy.get("#secret").type("Secret123456789");
+    for (let i = 0; i < 10; i++) {
+      cy.get('[data-test="strength-rating-option"]')
+        .eq(i)
+        .should("have.attr", "data-p-active", i < 2 ? "true" : "false");
+    }
+    cy.get('[data-test="strength-rating-option"]').eq(5).click();
+    cy.get('[data-test="status-dropdown"]').should(
+      "include.text",
+      "admin.servers.enabled",
+    );
+    cy.get('[data-test="status-dropdown-items"]').should("not.exist");
+    cy.get('[data-test="status-dropdown"]').click();
+    cy.get('[data-test="status-dropdown-items"]').should("be.visible");
+    cy.get('[data-test="status-dropdown-option"]').eq(2).click();
+
+    // Check with 500 error
+    cy.intercept("PUT", "api/v1/servers/1", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="servers-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that 422 error messages are hidden
+    cy.get('[data-test="name-field"]').should(
+      "not.include.text",
+      "The name field is required.",
+    );
+
+    cy.get('[data-test="description-field"]').should(
+      "not.include.text",
+      "The description field is required.",
+    );
+
+    cy.get('[data-test="base-url-field"]').should(
+      "not.include.text",
+      "The base url field is required.",
+    );
+
+    cy.get('[data-test="secret-field"]').should(
+      "not.include.text",
+      "The secret field is required.",
+    );
+
+    cy.get('[data-test="strength-field"]').should(
+      "not.include.text",
+      "The strength field is required.",
+    );
+
+    cy.get('[data-test="status-field"]').should(
+      "not.include.text",
+      "The status field is required.",
+    );
+
+    // Check with 428 error (stale error)
+    cy.fixture("server.json").then((server) => {
+      server.data.name = "Server 03";
+      server.data.description = "Testserver 03 for testing purposes";
+      server.data.base_url = "https://localhost/bigbluebutton3";
+      server.data.secret = "Secret987654321";
+      server.data.strength = 5;
+      server.data.status = 1;
+
+      cy.intercept("PUT", "api/v1/servers/1", {
+        statusCode: 428,
+        body: {
+          new_model: server.data,
+        },
+      }).as("saveChangesRequest");
+    });
+
+    cy.get('[data-test="stale-server-dialog"]').should("not.exist");
+
+    cy.get('[data-test="servers-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that stale dialog is shown
+    cy.get('[data-test="stale-server-dialog"]')
+      .should("be.visible")
+      .and("include.text", "app.errors.stale_error")
+      .within(() => {
+        // Check buttons
+        cy.get('[data-test="stale-dialog-reject-button"]')
+          .should("be.visible")
+          .and("have.text", "app.reload");
+        cy.get('[data-test="stale-dialog-accept-button"]')
+          .should("be.visible")
+          .and("have.text", "app.overwrite");
+      });
+
+    // Reload
+    cy.get('[data-test="stale-dialog-reject-button"]').click();
+
+    cy.get('[data-test="stale-server-dialog"]').should("not.exist");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.servers.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.servers.edit_{"name":"Server 03"}',
+      );
+
+    // Check that correct data is shown
+    cy.get("#name").should("have.value", "Server 03");
+    cy.get("#description").should(
+      "have.value",
+      "Testserver 03 for testing purposes",
+    );
+    cy.get("#base_url").should(
+      "have.value",
+      "https://localhost/bigbluebutton3",
+    );
+    cy.get("#secret").should("have.value", "Secret987654321");
+    for (let i = 0; i < 10; i++) {
+      cy.get('[data-test="strength-rating-option"]')
+        .eq(i)
+        .should("have.attr", "data-p-active", i < 5 ? "true" : "false");
+    }
+    cy.get('[data-test="status-dropdown"]').should(
+      "include.text",
+      "admin.servers.enabled",
+    );
+
+    // Trigger 428 error (stale error) again
+    cy.fixture("server.json").then((server) => {
+      server.data.name = "Server 04";
+      server.data.description = "Testserver 04 for testing purposes";
+      server.data.base_url = "https://localhost/bigbluebutton4";
+      server.data.secret = "123456789Secret";
+      server.data.strength = 4;
+      server.data.status = 10;
+
+      cy.intercept("PUT", "api/v1/servers/1", {
+        statusCode: 428,
+        body: {
+          new_model: server.data,
+        },
+      }).as("saveChangesRequest");
+    });
+
+    cy.get('[data-test="stale-server-dialog"]').should("not.exist");
+
+    cy.get('[data-test="servers-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that stale dialog is shown
+    cy.get('[data-test="stale-server-dialog"]')
+      .should("be.visible")
+      .and("include.text", "app.errors.stale_error")
+      .within(() => {
+        // Check buttons
+        cy.get('[data-test="stale-dialog-reject-button"]')
+          .should("be.visible")
+          .and("have.text", "app.reload");
+        cy.get('[data-test="stale-dialog-accept-button"]')
+          .should("be.visible")
+          .and("have.text", "app.overwrite");
+      });
+
+    // Overwrite
+    cy.fixture("server.json").then((server) => {
+      server.data.name = "Server 03";
+      server.data.description = "Testserver 03 for testing purposes";
+      server.data.base_url = "https://localhost/bigbluebutton3";
+      server.data.secret = "Secret987654321";
+      server.data.strength = 5;
+      server.data.status = 1;
+
+      cy.intercept("PUT", "api/v1/servers/1", {
+        statusCode: 200,
+        body: server,
+      }).as("saveChangesRequest");
+
+      cy.intercept("GET", "api/v1/servers/1", {
+        statusCode: 200,
+        body: server,
+      }).as("serverRequest");
+
+      cy.get('[data-test="stale-dialog-accept-button"]').click();
+
+      // Check that correct data is sent
+      cy.wait("@saveChangesRequest").then((interception) => {
+        expect(interception.request.body).to.eql(server.data);
+      });
+    });
+
+    // Check that redirect worked
+    cy.url().should("include", "/admin/servers/1");
+    cy.url().should("not.include", "/edit");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.servers.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.servers.view_{"name":"Server 03"}',
+      );
+
+    // Reload
+    cy.visit("/admin/servers/1/edit");
+
+    // Check with 404 error
+    cy.interceptAdminServersIndexRequests();
+    cy.intercept("PUT", "api/v1/servers/1", {
+      statusCode: 404,
+      body: {
+        message: "No query results for model",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="servers-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that redirect worked
+    cy.url().should("not.include", "/admin/servers/1/edit");
+    cy.url().should("include", "/admin/servers");
+
+    cy.wait("@serversRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"No query results for model"}',
+      'app.flash.server_error.error_code_{"statusCode":404}',
+    ]);
+
+    // Reload
+    cy.visit("/admin/servers/1/edit");
+
+    // Check with 401 error
+    cy.intercept("PUT", "api/v1/servers/1", {
+      statusCode: 401,
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="servers-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/servers/1/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("check button visibility with delete permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "servers.view",
+        "servers.update",
+        "servers.create",
+        "servers.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/servers/1/edit");
+
+    cy.wait("@serverRequest");
+
+    // Check with server enabled
+    cy.get('[data-test="servers-cancel-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.cancel_editing")
+      .and("have.attr", "href", "/admin/servers/1");
+    cy.get('[data-test="servers-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-delete-button"]').should("not.exist");
+    cy.get('[data-test="servers-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.save");
+
+    cy.get('[data-test="servers-test-connection-button"]')
+      .should("be.visible")
+      .and("have.text", "admin.servers.test_connection")
+      .and("not.be.disabled");
+
+    cy.get('[data-test="servers-panic-button"]').should("not.exist");
+
+    // Reload page but with server draining
+    cy.fixture("server.json").then((server) => {
+      server.data.status = 0;
+
+      cy.intercept("GET", "api/v1/servers/1", {
+        statusCode: 200,
+        body: server,
+      }).as("serverRequest");
+    });
+
+    cy.reload();
+
+    // Check with server draining
+    cy.get('[data-test="servers-cancel-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.cancel_editing")
+      .and("have.attr", "href", "/admin/servers/1");
+    cy.get('[data-test="servers-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-delete-button"]').should("not.exist");
+    cy.get('[data-test="servers-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.save");
+
+    cy.get('[data-test="servers-test-connection-button"]')
+      .should("be.visible")
+      .and("have.text", "admin.servers.test_connection")
+      .and("not.be.disabled");
+
+    cy.get('[data-test="servers-panic-button"]').should("not.exist");
+
+    // Reload page but with server disabled
+    cy.fixture("server.json").then((server) => {
+      server.data.status = -1;
+
+      cy.intercept("GET", "api/v1/servers/1", {
+        statusCode: 200,
+        body: server,
+      }).as("serverRequest");
+    });
+
+    cy.reload();
+
+    // Check with server disabled
+    cy.get('[data-test="servers-cancel-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.cancel_editing")
+      .and("have.attr", "href", "/admin/servers/1");
+    cy.get('[data-test="servers-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-delete-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+    cy.get('[data-test="servers-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.save");
+
+    cy.get('[data-test="servers-test-connection-button"]')
+      .should("be.visible")
+      .and("have.text", "admin.servers.test_connection")
+      .and("not.be.disabled");
+
+    cy.get('[data-test="servers-panic-button"]').should("not.exist");
+  });
+
+  it("load server errors", function () {
+    cy.intercept("GET", "api/v1/servers/1", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("serverRequest");
+
+    cy.visit("/admin/servers/1/edit");
+
+    cy.wait("@serverRequest");
+
+    // Check that overlay is shown
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Reload with correct data
+    cy.intercept("GET", "api/v1/servers/1", {
+      statusCode: 200,
+      fixture: "server.json",
+    }).as("serverRequest");
+
+    cy.get('[data-test="loading-retry-button"]')
+      .should("be.visible")
+      .and("have.text", "app.reload")
+      .click();
+
+    cy.wait("@serverRequest");
+
+    // Check that overlay is not shown anymore
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Reload page with 404 errors
+    cy.interceptAdminServersIndexRequests();
+
+    cy.intercept("GET", "api/v1/servers/1", {
+      statusCode: 404,
+      body: {
+        message: "No query results for model",
+      },
+    }).as("serverRequest");
+
+    cy.reload();
+
+    cy.wait("@serverRequest");
+
+    // Check that redirect worked
+    cy.url().should("not.include", "/admin/servers/1");
+    cy.url().should("include", "/admin/servers");
+
+    cy.wait("@serversRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"No query results for model"}',
+      'app.flash.server_error.error_code_{"statusCode":404}',
+    ]);
+
+    // Reload page with 401 error
+    cy.intercept("GET", "api/v1/servers/1", {
+      statusCode: 401,
+    }).as("serverRequest");
+
+    cy.visit("/admin/servers/1/edit");
+
+    cy.wait("@serverRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/servers/1/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminServersIndex.cy.js b/tests/Frontend/e2e/AdminServersIndex.cy.js
new file mode 100644
index 000000000..6ea6f0d1c
--- /dev/null
+++ b/tests/Frontend/e2e/AdminServersIndex.cy.js
@@ -0,0 +1,1380 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin servers index", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminServersIndexRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view", "servers.viewAny"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin/servers");
+  });
+
+  it("visit with user without permission to view servers", function () {
+    // Check with missing servers.viewAny permission
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view"];
+
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/servers");
+
+    cy.checkToastMessage("app.flash.unauthorized");
+
+    // Check if the welcome page is shown
+    cy.url().should("not.include", "/admin/servers");
+    cy.get("h1").should("be.visible").and("contain", "home.title");
+  });
+
+  it("load servers", function () {
+    const serversRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/servers*",
+      { fixture: "servers.json" },
+      "serversRequest",
+    );
+
+    cy.visit("/admin/servers");
+
+    cy.contains("admin.title");
+
+    // Test loading
+    cy.get('[data-test="server-search"]')
+      .eq(0)
+      .within(() => {
+        cy.get("input").should("be.visible").and("be.disabled");
+        cy.get("button").should("be.visible").and("be.disabled");
+      });
+
+    cy.get('[data-test="servers-reload-usage-button"]')
+      .should("include.text", "admin.servers.reload")
+      .should("be.disabled");
+    cy.get('[data-test="servers-reload-no-usage-button"]').should(
+      "be.disabled",
+    );
+
+    cy.get('[data-test="servers-add-button"]').should("not.exist");
+
+    cy.contains("admin.servers.usage_info").should("be.visible");
+
+    cy.get('[data-test="overlay"]')
+      .should("be.visible")
+      .then(() => {
+        serversRequest.sendResponse();
+      });
+
+    cy.wait("@serversRequest");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.servers.index");
+
+    // Check that loading is over
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    cy.get('[data-test="server-search"]').within(() => {
+      cy.get("input").should("be.visible").and("not.be.disabled");
+      cy.get("button").should("be.visible").and("not.be.disabled");
+    });
+
+    cy.get('[data-test="servers-reload-usage-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+    cy.get('[data-test="servers-reload-no-usage-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+
+    cy.get('[data-test="servers-add-button"]').should("not.exist");
+
+    cy.contains("admin.servers.usage_info").should("be.visible");
+
+    // Check that headers are displayed correctly
+    cy.get('[data-test="server-header-cell"]').should("have.length", 8);
+
+    cy.get('[data-test="server-header-cell"]')
+      .eq(0)
+      .should("have.text", "app.model_name");
+
+    cy.get('[data-test="server-header-cell"]')
+      .eq(1)
+      .should("have.text", "admin.servers.status");
+
+    cy.get('[data-test="server-header-cell"]')
+      .eq(2)
+      .should("have.text", "admin.servers.connection");
+
+    cy.get('[data-test="server-header-cell"]')
+      .eq(3)
+      .should("have.text", "admin.servers.version");
+
+    cy.get('[data-test="server-header-cell"]')
+      .eq(4)
+      .should("have.text", "admin.servers.meeting_count");
+
+    cy.get('[data-test="server-header-cell"]')
+      .eq(5)
+      .should("have.text", "admin.servers.participant_count");
+
+    cy.get('[data-test="server-header-cell"]')
+      .eq(6)
+      .should("have.text", "admin.servers.video_count");
+
+    cy.get('[data-test="server-header-cell"]')
+      .eq(7)
+      .should("have.text", "app.actions");
+
+    // Check that servers are displayed correctly
+    cy.get('[data-test="server-item"]').should("have.length", 4);
+
+    cy.get('[data-test="server-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="server-item-cell"]').should("have.length", 8);
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(0)
+          .should("have.text", "Server 01");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(1)
+          .find("span")
+          .should("include.attr", "aria-label", "admin.servers.enabled");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(2)
+          .find("span")
+          .should("include.attr", "aria-label", "admin.servers.online");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(3)
+          .should("have.text", "2.4.5");
+
+        cy.get('[data-test="server-item-cell"]').eq(4).should("have.text", "2");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(5)
+          .should("have.text", "10");
+
+        cy.get('[data-test="server-item-cell"]').eq(6).should("have.text", "5");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(7)
+          .within(() => {
+            cy.get('[data-test="servers-view-button"]').should("not.exist");
+            cy.get('[data-test="servers-edit-button"]').should("not.exist");
+            cy.get('[data-test="servers-delete-button"]').should("not.exist");
+          });
+      });
+
+    cy.get('[data-test="server-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="server-item-cell"]').should("have.length", 8);
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(0)
+          .should("have.text", "Server 02");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(1)
+          .find("span")
+          .should("include.attr", "aria-label", "admin.servers.enabled");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(2)
+          .find("span")
+          .should("include.attr", "aria-label", "admin.servers.unhealthy");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(3)
+          .should("have.text", " --- ");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(4)
+          .should("have.text", "10");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(5)
+          .should("have.text", "50");
+
+        cy.get('[data-test="server-item-cell"]').eq(6).should("have.text", "5");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(7)
+          .within(() => {
+            cy.get('[data-test="servers-view-button"]').should("not.exist");
+            cy.get('[data-test="servers-edit-button"]').should("not.exist");
+            cy.get('[data-test="servers-delete-button"]').should("not.exist");
+          });
+      });
+
+    cy.get('[data-test="server-item"]')
+      .eq(2)
+      .within(() => {
+        cy.get('[data-test="server-item-cell"]').should("have.length", 8);
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(0)
+          .should("have.text", "Server 03");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(1)
+          .find("span")
+          .should("include.attr", "aria-label", "admin.servers.disabled");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(2)
+          .find("span")
+          .should("include.attr", "aria-label", "admin.servers.offline");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(3)
+          .should("have.text", " --- ");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(4)
+          .should("have.text", " --- ");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(5)
+          .should("have.text", " --- ");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(6)
+          .should("have.text", " --- ");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(7)
+          .within(() => {
+            cy.get('[data-test="servers-view-button"]').should("not.exist");
+            cy.get('[data-test="servers-edit-button"]').should("not.exist");
+            cy.get('[data-test="servers-delete-button"]').should("not.exist");
+          });
+      });
+
+    cy.get('[data-test="server-item"]')
+      .eq(3)
+      .within(() => {
+        cy.get('[data-test="server-item-cell"]').should("have.length", 8);
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(0)
+          .should("have.text", "Server 04");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(1)
+          .find("span")
+          .should("include.attr", "aria-label", "admin.servers.draining");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(2)
+          .find("span")
+          .should("include.attr", "aria-label", "admin.servers.online");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(3)
+          .should("have.text", " --- ");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(4)
+          .should("have.text", " --- ");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(5)
+          .should("have.text", " --- ");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(6)
+          .should("have.text", " --- ");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(7)
+          .within(() => {
+            cy.get('[data-test="servers-view-button"]').should("not.exist");
+            cy.get('[data-test="servers-edit-button"]').should("not.exist");
+            cy.get('[data-test="servers-delete-button"]').should("not.exist");
+          });
+      });
+  });
+
+  it("load servers errors", function () {
+    cy.intercept("GET", "api/v1/servers*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("serversRequest");
+
+    cy.visit("/admin/servers");
+
+    cy.wait("@serversRequest");
+
+    // Check that error message gets shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that overlay is shown
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that components are not disabled
+    cy.get('[data-test="server-search"]')
+      .eq(0)
+      .within(() => {
+        cy.get("input").should("be.visible").and("not.be.disabled");
+        cy.get("button").should("be.visible").and("not.be.disabled");
+      });
+
+    cy.get('[data-test="servers-reload-usage-button"]').should(
+      "not.be.disabled",
+    );
+    cy.get('[data-test="servers-reload-no-usage-button"]').should(
+      "not.be.disabled",
+    );
+
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(0, 1);
+      servers.meta.last_page = 4;
+      servers.meta.per_page = 1;
+      servers.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    // Check if reload button exists and click it
+    cy.get('[data-test="loading-retry-button"]')
+      .should("include.text", "app.reload")
+      .click();
+
+    // Check that update usage is set correctly when reloading servers
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query.update_usage).to.eql("false");
+    });
+
+    // Check that overlay is hidden
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
+
+    // Check if server is shown and contains the correct data
+    cy.get('[data-test="server-item"]').should("have.length", 1);
+
+    cy.get('[data-test="server-item"]')
+      .eq(0)
+      .should("include.text", "Server 01");
+
+    // Switch to next page with general error
+    cy.intercept("GET", "api/v1/servers*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("serversRequest");
+
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "2",
+      });
+    });
+
+    // Check that error message gets shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that overlay is shown
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that components are not disabled
+    cy.get('[data-test="server-search"]')
+      .eq(0)
+      .within(() => {
+        cy.get("input").should("be.visible").and("not.be.disabled");
+        cy.get("button").should("be.visible").and("not.be.disabled");
+      });
+
+    cy.get('[data-test="servers-reload-usage-button"]').should(
+      "not.be.disabled",
+    );
+    cy.get('[data-test="servers-reload-no-usage-button"]').should(
+      "not.be.disabled",
+    );
+
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(0, 1);
+      servers.meta.last_page = 4;
+      servers.meta.per_page = 1;
+      servers.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    // Check if reload button exists and click it
+    cy.get('[data-test="loading-retry-button"]')
+      .should("include.text", "app.reload")
+      .click();
+
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        update_usage: "false",
+        page: "1",
+      });
+    });
+
+    // Check that overlay is hidden
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
+
+    // Check if server is shown and contains the correct data
+    cy.get('[data-test="server-item"]').should("have.length", 1);
+    cy.get('[data-test="server-item"]')
+      .eq(0)
+      .should("include.text", "Server 01");
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Switch to next page with 401 error
+    cy.intercept("GET", "api/v1/servers*", {
+      statusCode: 401,
+    }).as("serversRequest");
+
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    cy.wait("@serversRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/servers");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+
+    // Reload page with 401 error
+    cy.visit("/admin/servers");
+
+    cy.wait("@serversRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/servers");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("load servers page out of bounds", function () {
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(0, 1);
+      servers.meta.last_page = 2;
+      servers.meta.per_page = 1;
+      servers.meta.to = 1;
+      servers.meta.total = 2;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    cy.visit("/admin/servers");
+    cy.wait("@serversRequest");
+
+    // Switch to next page but respond with no servers on second page
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = [];
+      servers.meta.current_page = 2;
+      servers.meta.from = null;
+      servers.meta.per_page = 2;
+      servers.meta.to = null;
+      servers.meta.total = 2;
+      servers.meta.total_no_filter = 2;
+
+      const emptyServersRequest = interceptIndefinitely(
+        "GET",
+        "api/v1/servers*",
+        {
+          statusCode: 200,
+          body: servers,
+        },
+        "serversRequest",
+      );
+
+      cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+      cy.fixture("servers.json").then((servers) => {
+        servers.data = servers.data.slice(0, 2);
+        servers.meta.per_page = 2;
+        servers.meta.to = 2;
+        servers.meta.total = 2;
+        servers.meta.total_no_filter = 2;
+
+        cy.intercept("GET", "api/v1/servers*", {
+          statusCode: 200,
+          body: servers,
+        })
+          .as("serversRequest")
+          .then(() => {
+            emptyServersRequest.sendResponse();
+          });
+      });
+    });
+
+    // Wait for first servers request and check that page is still the same
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "2",
+      });
+    });
+
+    // Wait for second servers request and check that page is reset
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that pagination is shown correctly
+    cy.get('[data-test="paginator-page"]').should("have.length", 1);
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+  });
+
+  it("server search", function () {
+    cy.visit("/admin/servers");
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query.name).to.be.undefined;
+      expect(interception.request.query).to.contain({
+        page: "1",
+        update_usage: "false",
+      });
+    });
+
+    // Check with no servers found for this search query
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = [];
+      servers.meta.from = null;
+      servers.meta.per_page = 1;
+      servers.meta.to = null;
+      servers.meta.total = 0;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    cy.get('[data-test="server-search"] > input').should("have.value", "");
+    cy.get('[data-test="server-search"] > input').type("Test");
+    cy.get('[data-test="server-search"] > button').click();
+
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query.name).to.eql("Test");
+      expect(interception.request.query).to.contain({
+        page: "1",
+        update_usage: "false",
+      });
+    });
+
+    // Check that correct message is shown and no servers are displayed
+    cy.contains("admin.servers.no_data_filtered").should("be.visible");
+    cy.get('[data-test="server-item"]').should("have.length", 0);
+
+    // Check with no servers available
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = [];
+      servers.meta.from = null;
+      servers.meta.per_page = 1;
+      servers.meta.to = null;
+      servers.meta.total = 0;
+      servers.meta.total_no_filter = 0;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    cy.get('[data-test="server-search"] > input').clear();
+    cy.get('[data-test="server-search"] > input').type("Test2");
+    cy.get('[data-test="server-search"] > input').type("{enter}");
+
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query.name).to.eql("Test2");
+      expect(interception.request.query).to.contain({
+        page: "1",
+        update_usage: "false",
+      });
+    });
+
+    // Check that correct message is shown and no servers are displayed
+    cy.contains("admin.servers.no_data").should("be.visible");
+    cy.get('[data-test="server-item"]').should("have.length", 0);
+
+    // Check with 2 servers on 2 pages
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(0, 1);
+      servers.meta.last_page = 2;
+      servers.meta.per_page = 1;
+      servers.meta.to = 1;
+      servers.meta.total = 2;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    cy.get('[data-test="server-search"] > input').clear();
+    cy.get('[data-test="server-search"] > input').type("Server");
+    cy.get('[data-test="server-search"] > button').click();
+
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query.name).to.eql("Server");
+      expect(interception.request.query).to.contain({
+        page: "1",
+        update_usage: "false",
+      });
+    });
+
+    // Check that correct server is shown
+    cy.get('[data-test="server-item"]').should("have.length", 1);
+    cy.get('[data-test="server-item"]')
+      .eq(0)
+      .should("include.text", "Server 01");
+
+    // Check that pagination shows the correct number of pages
+    cy.get('[data-test="paginator-page"]').should("have.length", 2);
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(1, 2);
+      servers.meta.current_page = 2;
+      servers.meta.from = 2;
+      servers.meta.last_page = 2;
+      servers.meta.per_page = 1;
+      servers.meta.to = 2;
+      servers.meta.total = 2;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    // Click on button for next page (eq(1) needed because there are two paginator components
+    // (first one for small devices second one for larger devices))
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    // Check if the search query stays the same after changing the page
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query.name).to.eql("Server");
+      expect(interception.request.query).to.contain({
+        page: "2",
+        update_usage: "false",
+      });
+    });
+
+    cy.get('[data-test="server-search"] > input').should(
+      "have.value",
+      "Server",
+    );
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(1)
+      .should("have.attr", "data-p-active", "true");
+
+    // Check that correct server is shown
+    cy.get('[data-test="server-item"]').should("have.length", 1);
+    cy.get('[data-test="server-item"]')
+      .eq(0)
+      .should("include.text", "Server 02");
+
+    // Change search query and make sure that the page is reset
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(0, 1);
+      servers.meta.last_page = 2;
+      servers.meta.per_page = 1;
+      servers.meta.to = 1;
+      servers.meta.total = 2;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    cy.get('[data-test="server-search"] > input').clear();
+    cy.get('[data-test="server-search"] > input').type("Se");
+    cy.get('[data-test="server-search"] > button').click();
+
+    // Check that servers are loaded with the page reset to the first page
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query.name).to.eql("Se");
+      expect(interception.request.query).to.contain({
+        page: "1",
+        update_usage: "false",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+  });
+
+  it("sort servers", function () {
+    cy.visit("/admin/servers");
+
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "name",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that correct columns are sortable and correct sorting type is shown
+    cy.get('[data-test="server-header-cell"]').should("have.length", 8);
+    cy.get('[data-test="server-header-cell"]')
+      .eq(0)
+      .should("have.text", "app.model_name")
+      .and("have.attr", "data-p-sortable-column", "true")
+      .and("have.attr", "data-p-sorted", "true");
+    cy.get('[data-test="server-header-cell"]')
+      .eq(1)
+      .should("have.text", "admin.servers.status")
+      .and("have.attr", "data-p-sortable-column", "true")
+      .and("have.attr", "data-p-sorted", "false");
+    cy.get('[data-test="server-header-cell"]')
+      .eq(2)
+      .should("have.text", "admin.servers.connection")
+      .and("not.have.attr", "data-p-sortable-column", "true");
+    cy.get('[data-test="server-header-cell"]')
+      .eq(3)
+      .should("have.text", "admin.servers.version")
+      .and("have.attr", "data-p-sortable-column", "true")
+      .and("have.attr", "data-p-sorted", "false");
+    cy.get('[data-test="server-header-cell"]')
+      .eq(4)
+      .should("have.text", "admin.servers.meeting_count")
+      .and("have.attr", "data-p-sortable-column", "true")
+      .and("have.attr", "data-p-sorted", "false");
+    cy.get('[data-test="server-header-cell"]')
+      .eq(5)
+      .should("have.text", "admin.servers.participant_count")
+      .and("have.attr", "data-p-sortable-column", "true");
+    cy.get('[data-test="server-header-cell"]')
+      .eq(6)
+      .should("have.text", "admin.servers.video_count")
+      .and("have.attr", "data-p-sortable-column", "true");
+    cy.get('[data-test="server-header-cell"]')
+      .eq(7)
+      .should("have.text", "app.actions")
+      .and("not.have.attr", "data-p-sortable-column", "true");
+
+    // Change sorting type and respond with 4 servers on 4 different pages
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(0, 1);
+      servers.meta.last_page = 4;
+      servers.meta.per_page = 1;
+      servers.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    cy.get('[data-test="server-header-cell"]').eq(1).click();
+
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "status",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that sorting is correct
+    cy.get('[data-test="server-header-cell"]')
+      .eq(0)
+      .should("have.attr", "data-p-sorted", "false");
+
+    cy.get('[data-test="server-header-cell"]')
+      .eq(1)
+      .should("have.attr", "data-p-sorted", "true");
+
+    // Check that correct server is shown
+    cy.get('[data-test="server-item"]').should("have.length", 1);
+    cy.get('[data-test="server-item"]')
+      .eq(0)
+      .should("include.text", "Server 01");
+
+    // Check that pagination shows the correct number of pages
+    cy.get('[data-test="paginator-page"]').should("have.length", 4);
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Switch to next page
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(1, 2);
+      servers.meta.current_page = 2;
+      servers.meta.from = 2;
+      servers.meta.last_page = 4;
+      servers.meta.per_page = 1;
+      servers.meta.to = 2;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    // Check that sorting stays the same
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "2",
+        sort_by: "status",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(1)
+      .should("have.attr", "data-p-active", "true");
+
+    // Check that sorting stays the same
+    cy.get('[data-test="server-header-cell"]')
+      .eq(1)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "ascending");
+
+    // Check that correct server is shown
+    cy.get('[data-test="server-item"]').should("have.length", 1);
+    cy.get('[data-test="server-item"]')
+      .eq(0)
+      .should("include.text", "Server 02");
+
+    // Change sorting direction and make sure that the page is reset
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(0, 1);
+      servers.meta.last_page = 4;
+      servers.meta.per_page = 1;
+      servers.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    cy.get('[data-test="server-header-cell"]').eq(1).click();
+
+    // Check that servers are loaded with the page reset to the first page
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "status",
+        sort_direction: "desc",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Check that sorting is correct
+    cy.get('[data-test="server-header-cell"]')
+      .eq(1)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "descending");
+
+    // Check that correct server is shown
+    cy.get('[data-test="server-item"]').should("have.length", 1);
+    cy.get('[data-test="server-item"]')
+      .eq(0)
+      .should("include.text", "Server 01");
+
+    // Change sorting type again
+    cy.get('[data-test="server-header-cell"]').eq(3).click();
+
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "version",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that sorting is correct
+    cy.get('[data-test="server-header-cell"]')
+      .eq(1)
+      .should("have.attr", "data-p-sorted", "false");
+
+    cy.get('[data-test="server-header-cell"]')
+      .eq(3)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "ascending");
+
+    // Switch to next page
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(1, 2);
+      servers.meta.current_page = 2;
+      servers.meta.from = 2;
+      servers.meta.last_page = 4;
+      servers.meta.per_page = 1;
+      servers.meta.to = 2;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    // Check that sorting stays the same
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "2",
+        sort_by: "version",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(1)
+      .should("have.attr", "data-p-active", "true");
+
+    // Check that sorting stays the same
+    cy.get('[data-test="server-header-cell"]')
+      .eq(3)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "ascending");
+
+    // Check that correct server is shown
+    cy.get('[data-test="server-item"]').should("have.length", 1);
+    cy.get('[data-test="server-item"]')
+      .eq(0)
+      .should("include.text", "Server 02");
+
+    // Change sorting and make sure that the page is reset
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(0, 1);
+      servers.meta.last_page = 4;
+      servers.meta.per_page = 1;
+      servers.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    cy.get('[data-test="server-header-cell"]').eq(4).click();
+
+    // Check that servers are loaded with the page reset to the first page
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "meeting_count",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Check that sorting is correct
+    cy.get('[data-test="server-header-cell"]')
+      .eq(3)
+      .should("have.attr", "data-p-sorted", "false");
+
+    cy.get('[data-test="server-header-cell"]')
+      .eq(4)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "ascending");
+
+    // Change sorting again
+    cy.get('[data-test="server-header-cell"]').eq(5).click();
+
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "participant_count",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that sorting is correct
+    cy.get('[data-test="server-header-cell"]')
+      .eq(4)
+      .should("have.attr", "data-p-sorted", "false");
+
+    cy.get('[data-test="server-header-cell"]')
+      .eq(5)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "ascending");
+
+    // Change sorting again
+    cy.get('[data-test="server-header-cell"]').eq(6).click();
+
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "video_count",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that sorting is correct
+    cy.get('[data-test="server-header-cell"]')
+      .eq(5)
+      .should("have.attr", "data-p-sorted", "false");
+
+    cy.get('[data-test="server-header-cell"]')
+      .eq(6)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "ascending");
+  });
+
+  it("check button visibility with view permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "servers.view",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/servers");
+    cy.wait("@serversRequest");
+
+    cy.get('[data-test="servers-add-button"]').should("not.exist");
+
+    cy.get('[data-test="server-item"]').should("have.length", 4);
+
+    cy.get('[data-test="server-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="servers-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/servers/1");
+        cy.get('[data-test="servers-edit-button"]').should("not.exist");
+        cy.get('[data-test="servers-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="server-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="servers-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/servers/2");
+        cy.get('[data-test="servers-edit-button"]').should("not.exist");
+        cy.get('[data-test="servers-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="server-item"]')
+      .eq(2)
+      .within(() => {
+        cy.get('[data-test="servers-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/servers/3");
+        cy.get('[data-test="servers-edit-button"]').should("not.exist");
+        cy.get('[data-test="servers-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="server-item"]')
+      .eq(3)
+      .within(() => {
+        cy.get('[data-test="servers-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/servers/4");
+        cy.get('[data-test="servers-edit-button" ]').should("not.exist");
+        cy.get('[data-test="servers-delete-button"]').should("not.exist");
+      });
+  });
+
+  it("check button visibility with update permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "servers.view",
+        "servers.update",
+      ];
+
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/servers");
+    cy.wait("@serversRequest");
+
+    cy.get('[data-test="servers-add-button"]').should("not.exist");
+
+    cy.get('[data-test="server-item"]').should("have.length", 4);
+
+    cy.get('[data-test="server-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="servers-view-button"]')
+          .should("be.visible")
+          .and("not.be.disabled")
+          .and("have.attr", "href", "/admin/servers/1");
+        cy.get('[data-test="servers-edit-button"]')
+          .should("be.visible")
+          .and("not.be.disabled")
+          .and("have.attr", "href", "/admin/servers/1/edit");
+        cy.get('[data-test="servers-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="server-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="servers-view-button"]')
+          .should("be.visible")
+          .and("not.be.disabled")
+          .and("have.attr", "href", "/admin/servers/2");
+        cy.get('[data-test="servers-edit-button"]')
+          .should("be.visible")
+          .and("not.be.disabled")
+          .and("have.attr", "href", "/admin/servers/2/edit");
+        cy.get('[data-test="servers-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="server-item"]')
+      .eq(2)
+      .within(() => {
+        cy.get('[data-test="servers-view-button"]')
+          .should("be.visible")
+          .and("not.be.disabled")
+          .and("have.attr", "href", "/admin/servers/3");
+        cy.get('[data-test="servers-edit-button"]')
+          .should("be.visible")
+          .and("not.be.disabled")
+          .and("have.attr", "href", "/admin/servers/3/edit");
+        cy.get('[data-test="servers-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="server-item"]')
+      .eq(3)
+      .within(() => {
+        cy.get('[data-test="servers-view-button"]')
+          .should("be.visible")
+          .and("not.be.disabled")
+          .and("have.attr", "href", "/admin/servers/4");
+        cy.get('[data-test="servers-edit-button" ]')
+          .should("be.visible")
+          .and("not.be.disabled")
+          .and("have.attr", "href", "/admin/servers/4/edit");
+        cy.get('[data-test="servers-delete-button"]').should("not.exist");
+      });
+  });
+
+  it("check button visibility with add permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "servers.view",
+        "servers.update",
+        "servers.create",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/servers");
+    cy.wait("@serversRequest");
+
+    cy.get('[data-test="servers-add-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("have.attr", "href", "/admin/servers/new");
+
+    cy.get('[data-test="server-item"]').should("have.length", 4);
+
+    cy.get('[data-test="server-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="servers-view-button"]')
+          .should("be.visible")
+          .and("not.be.disabled")
+          .and("have.attr", "href", "/admin/servers/1");
+        cy.get('[data-test="servers-edit-button"]')
+          .should("be.visible")
+          .and("not.be.disabled")
+          .and("have.attr", "href", "/admin/servers/1/edit");
+        cy.get('[data-test="servers-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="server-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="servers-view-button"]')
+          .should("be.visible")
+          .and("not.be.disabled")
+          .and("have.attr", "href", "/admin/servers/2");
+        cy.get('[data-test="servers-edit-button"]')
+          .should("be.visible")
+          .and("not.be.disabled")
+          .and("have.attr", "href", "/admin/servers/2/edit");
+        cy.get('[data-test="servers-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="server-item"]')
+      .eq(2)
+      .within(() => {
+        cy.get('[data-test="servers-view-button"]')
+          .should("be.visible")
+          .and("not.be.disabled")
+          .and("have.attr", "href", "/admin/servers/3");
+        cy.get('[data-test="servers-edit-button"]')
+          .should("be.visible")
+          .and("not.be.disabled")
+          .and("have.attr", "href", "/admin/servers/3/edit");
+        cy.get('[data-test="servers-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="server-item"]')
+      .eq(3)
+      .within(() => {
+        cy.get('[data-test="servers-view-button"]')
+          .should("be.visible")
+          .and("not.be.disabled")
+          .and("have.attr", "href", "/admin/servers/4");
+        cy.get('[data-test="servers-edit-button" ]')
+          .should("be.visible")
+          .and("not.be.disabled")
+          .and("have.attr", "href", "/admin/servers/4/edit");
+        cy.get('[data-test="servers-delete-button"]').should("not.exist");
+      });
+  });
+
+  it("check button visibility with delete permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "servers.view",
+        "servers.update",
+        "servers.create",
+        "servers.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/servers");
+    cy.wait("@serversRequest");
+
+    cy.get('[data-test="servers-add-button"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/servers/new");
+
+    cy.get('[data-test="server-item"]').should("have.length", 4);
+
+    cy.get('[data-test="server-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="servers-view-button"]')
+          .should("be.visible")
+          .and("not.be.disabled")
+          .and("have.attr", "href", "/admin/servers/1");
+        cy.get('[data-test="servers-edit-button"]')
+          .should("be.visible")
+          .and("not.be.disabled")
+          .and("have.attr", "href", "/admin/servers/1/edit");
+        cy.get('[data-test="servers-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="server-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="servers-view-button"]')
+          .should("be.visible")
+          .and("not.be.disabled")
+          .and("have.attr", "href", "/admin/servers/2");
+        cy.get('[data-test="servers-edit-button"]')
+          .should("be.visible")
+          .and("not.be.disabled")
+          .and("have.attr", "href", "/admin/servers/2/edit");
+        cy.get('[data-test="servers-delete-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="server-item"]')
+      .eq(2)
+      .within(() => {
+        cy.get('[data-test="servers-view-button"]')
+          .should("be.visible")
+          .and("not.be.disabled")
+          .and("have.attr", "href", "/admin/servers/3");
+        cy.get('[data-test="servers-edit-button"]')
+          .should("be.visible")
+          .and("not.be.disabled")
+          .and("have.attr", "href", "/admin/servers/3/edit");
+        cy.get('[data-test="servers-delete-button"]').should("be.visible");
+      });
+
+    cy.get('[data-test="server-item"]')
+      .eq(3)
+      .within(() => {
+        cy.get('[data-test="servers-view-button"]')
+          .should("be.visible")
+          .and("not.be.disabled")
+          .and("have.attr", "href", "/admin/servers/4");
+        cy.get('[data-test="servers-edit-button" ]')
+          .should("be.visible")
+          .and("not.be.disabled")
+          .and("have.attr", "href", "/admin/servers/4/edit");
+        cy.get('[data-test="servers-delete-button"]').should("not.exist");
+      });
+  });
+});
diff --git a/tests/Frontend/e2e/AdminServersIndexServerActions.cy.js b/tests/Frontend/e2e/AdminServersIndexServerActions.cy.js
new file mode 100644
index 000000000..6e27caece
--- /dev/null
+++ b/tests/Frontend/e2e/AdminServersIndexServerActions.cy.js
@@ -0,0 +1,388 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin servers index server actions", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminServersIndexRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "servers.view",
+        "servers.update",
+        "servers.create",
+        "servers.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("delete server", function () {
+    cy.fixture("servers.json").then((servers) => {
+      servers.data[3].status = -1;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+    cy.visit("admin/servers");
+    cy.wait("@serversRequest");
+
+    cy.get('[data-test="server-item"]').should("have.length", 4);
+
+    cy.get('[data-test="servers-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="server-item"]')
+      .eq(3)
+      .find('[data-test="servers-delete-button"]')
+      .click();
+
+    cy.get('[data-test="servers-delete-dialog"]').should("be.visible");
+
+    // Check that dialog shows correct data
+    cy.get('[data-test="servers-delete-dialog"]')
+      .should("include.text", "admin.servers.delete.title")
+      .should(
+        "include.text",
+        'admin.servers.delete.confirm_{"name":"Server 04"}',
+      );
+
+    // Confirm delete of server
+    const deleteServerRequest = interceptIndefinitely(
+      "DELETE",
+      "api/v1/servers/4",
+      { statusCode: 204 },
+      "deleteServerRequest",
+    );
+
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(0, 3);
+      servers.meta.to = 3;
+      servers.meta.total = 3;
+      servers.meta.total_no_filter = 3;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("have.text", "app.yes")
+      .click();
+    // Check loading
+    cy.get('[data-test="dialog-cancel-button"]')
+      .should("have.text", "app.no")
+      .should("be.disabled");
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("be.disabled")
+      .then(() => {
+        deleteServerRequest.sendResponse();
+      });
+
+    cy.wait("@deleteServerRequest");
+    cy.wait("@serversRequest");
+
+    // Check that server was deleted
+    cy.get('[data-test="server-item"]').should("have.length", 3);
+
+    // Check that dialog is closed
+    cy.get('[data-test="servers-delete-dialog"]').should("not.exist");
+
+    // Reopen dialog for different user
+    cy.get('[data-test="server-item"]')
+      .eq(2)
+      .find('[data-test="servers-delete-button"]')
+      .click();
+
+    cy.get('[data-test="servers-delete-dialog"]').should("be.visible");
+
+    // Check that dialog shows correct data
+    cy.get('[data-test="servers-delete-dialog"]')
+      .should("include.text", "admin.servers.delete.title")
+      .should(
+        "include.text",
+        'admin.servers.delete.confirm_{"name":"Server 03"}',
+      );
+
+    // Cancel delete of server
+    cy.get('[data-test="dialog-cancel-button"]').click();
+    cy.get('[data-test="servers-delete-dialog"]').should("not.exist");
+  });
+
+  it("delete server errors", function () {
+    cy.visit("admin/servers");
+    cy.wait("@serversRequest");
+
+    cy.get('[data-test="server-item"]').should("have.length", 4);
+
+    cy.get('[data-test="servers-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="server-item"]')
+      .eq(2)
+      .find('[data-test="servers-delete-button"]')
+      .click();
+
+    cy.get('[data-test="servers-delete-dialog"]').should("be.visible");
+
+    // Check with 500 error
+    cy.intercept("DELETE", "api/v1/servers/3", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("deleteServerRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteServerRequest");
+
+    // Check that dialog is still open and that error message is shown
+    cy.get('[data-test="servers-delete-dialog"]').should("be.visible");
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check with 401 error
+    cy.intercept("DELETE", "api/v1/servers/3", {
+      statusCode: 401,
+    }).as("deleteServerRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteServerRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/servers");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("reload servers", function () {
+    cy.visit("/admin/servers");
+
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        update_usage: "false",
+        page: "1",
+      });
+    });
+
+    // Check that usage is shown correctly
+    cy.get('[data-test="server-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="server-item-cell"]').eq(4).should("have.text", "2");
+
+        cy.get('[data-test="server-item-cell"]')
+          .eq(5)
+          .should("have.text", "10");
+        cy.get('[data-test="server-item-cell"]').eq(6).should("have.text", "5");
+      });
+
+    // Reload with update usage and check that query is correct and respond with 4 servers on 4 different pages
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(0, 1);
+      servers.data[0].meeting_count = 3;
+      servers.data[0].participant_count = 50;
+      servers.data[0].video_count = 6;
+      servers.meta.last_page = 4;
+      servers.meta.per_page = 1;
+      servers.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    // Reload with update usage
+    cy.get('[data-test="servers-reload-usage-button"]').click();
+
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        update_usage: "true",
+        page: "1",
+      });
+    });
+
+    // Check that usage is shown correctly
+    cy.get('[data-test="server-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="server-item-cell"]').eq(4).should("have.text", "3");
+        cy.get('[data-test="server-item-cell"]')
+          .eq(5)
+          .should("have.text", "50");
+        cy.get('[data-test="server-item-cell"]').eq(6).should("have.text", "6");
+      });
+
+    // Change page and check that usage is not updated
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(1, 2);
+      servers.meta.current_page = 2;
+      servers.meta.from = 2;
+      servers.meta.last_page = 4;
+      servers.meta.per_page = 1;
+      servers.meta.to = 2;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        update_usage: "false",
+        page: "2",
+      });
+    });
+
+    // Check that usage is shown correctly
+    cy.get('[data-test="server-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="server-item-cell"]')
+          .eq(4)
+          .should("have.text", "10");
+        cy.get('[data-test="server-item-cell"]')
+          .eq(5)
+          .should("have.text", "50");
+        cy.get('[data-test="server-item-cell"]').eq(6).should("have.text", "5");
+      });
+
+    // Check that pagination shows the correct number of pages
+    cy.get('[data-test="paginator-page"]').should("have.length", 4);
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(1)
+      .should("have.attr", "data-p-active", "true");
+
+    // Reload with update usage again and check that page stays the same
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(1, 2);
+      servers.data[0].meeting_count = 6;
+      servers.data[0].participant_count = 60;
+      servers.data[0].video_count = 10;
+      servers.meta.current_page = 2;
+      servers.meta.from = 2;
+      servers.meta.last_page = 4;
+      servers.meta.per_page = 1;
+      servers.meta.to = 2;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+    cy.get('[data-test="servers-reload-usage-button"]').click();
+
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        update_usage: "true",
+        page: "2",
+      });
+    });
+
+    // Check that usage is shown correctly
+    cy.get('[data-test="server-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="server-item-cell"]').eq(4).should("have.text", "6");
+        cy.get('[data-test="server-item-cell"]')
+          .eq(5)
+          .should("have.text", "60");
+        cy.get('[data-test="server-item-cell"]')
+          .eq(6)
+          .should("have.text", "10");
+      });
+
+    cy.get('[data-test="paginator-page"]').should("have.length", 4);
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(1)
+      .should("have.attr", "data-p-active", "true");
+
+    // Reload without update usage and check that page stays the same
+    cy.get('[data-test="servers-reload-no-usage-button"]').click();
+
+    cy.wait("@serversRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        update_usage: "false",
+        page: "2",
+      });
+    });
+
+    // Check that usage is shown correctly
+    cy.get('[data-test="server-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="server-item-cell"]').eq(4).should("have.text", "6");
+        cy.get('[data-test="server-item-cell"]')
+          .eq(5)
+          .should("have.text", "60");
+        cy.get('[data-test="server-item-cell"]')
+          .eq(6)
+          .should("have.text", "10");
+      });
+
+    cy.get('[data-test="paginator-page"]').should("have.length", 4);
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(1)
+      .should("have.attr", "data-p-active", "true");
+  });
+
+  it("open add new server page", function () {
+    cy.visit("/admin/servers");
+
+    cy.wait("@serversRequest");
+
+    cy.get('[data-test="servers-add-button"]').click();
+
+    cy.url().should("include", "/admin/servers/new");
+  });
+
+  it("open edit server page", function () {
+    cy.visit("/admin/servers");
+
+    cy.wait("@serversRequest");
+
+    cy.interceptAdminServersViewRequests();
+
+    cy.get('[data-test="server-item"]')
+      .eq(0)
+      .find('[data-test="servers-edit-button"]')
+      .click();
+
+    cy.url().should("include", "/admin/servers/1/edit");
+  });
+
+  it("open view server page", function () {
+    cy.visit("/admin/servers");
+
+    cy.wait("@serversRequest");
+
+    cy.interceptAdminServersViewRequests();
+
+    cy.get('[data-test="server-item"]')
+      .eq(0)
+      .find('[data-test="servers-view-button"]')
+      .click();
+
+    cy.url().should("include", "/admin/servers/1");
+    cy.url().should("not.include", "/edit");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminServersNew.cy.js b/tests/Frontend/e2e/AdminServersNew.cy.js
new file mode 100644
index 000000000..848c8e32b
--- /dev/null
+++ b/tests/Frontend/e2e/AdminServersNew.cy.js
@@ -0,0 +1,454 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin servers view", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminServersViewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "servers.view",
+        "servers.update",
+        "servers.create",
+        "servers.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("visit with user that  is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin/servers/new");
+  });
+
+  it("visit with user without permission to add new servers", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "servers.view",
+        "servers.update",
+      ];
+
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/servers/new");
+
+    cy.checkToastMessage("app.flash.unauthorized");
+
+    // Check if the welcome page is shown
+    cy.url().should("not.include", "/admin/users");
+    cy.get("h1").should("be.visible").and("include.text", "home.title");
+  });
+
+  it("add new server", function () {
+    cy.visit("/admin/servers/new");
+
+    // Check that header buttons are hidden
+    cy.get('[data-test="servers-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-delete-button"]').should("not.exist");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.servers.index")
+      .should("include.text", "admin.breakcrumbs.servers.new");
+
+    cy.get('[data-test="name-field"]')
+      .should("be.visible")
+      .and("include.text", "app.model_name")
+      .within(() => {
+        cy.get("#name").should("have.value", "").type("Server 01");
+      });
+
+    // Check that breadcrumbs stay the same
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.servers.index")
+      .should("include.text", "admin.breakcrumbs.servers.new");
+
+    cy.get('[data-test="description-field"]')
+      .should("be.visible")
+      .and("include.text", "app.description")
+      .within(() => {
+        cy.get("#description")
+          .should("have.value", "")
+          .type("Testserver 01 for testing purposes");
+      });
+
+    cy.get('[data-test="version-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.version")
+      .within(() => {
+        cy.get("#version").should("have.value", "---").and("be.disabled");
+      });
+
+    cy.get('[data-test="base-url-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.base_url")
+      .within(() => {
+        cy.get("#base_url")
+          .should("have.value", "")
+          .type("https://localhost/bigbluebutton");
+      });
+
+    cy.get('[data-test="secret-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.secret")
+      .within(() => {
+        cy.get("#secret").should("have.value", "").type("Secret123456789");
+      });
+
+    cy.get('[data-test="strength-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.strength")
+      .and("include.text", "admin.servers.strength_description")
+      .within(() => {
+        cy.get('[data-test="strength-rating"]').should(
+          "not.have.class",
+          "p-disabled",
+        );
+
+        cy.get('[data-test="strength-rating-option"]').should(
+          "have.length",
+          10,
+        );
+
+        // Check that correct options are active
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="strength-rating-option"]')
+            .eq(i)
+            .should("have.attr", "data-p-active", "false");
+        }
+
+        // Click on one of the options
+        cy.get('[data-test="strength-rating-option"]').eq(5).click();
+
+        // Check that correct options are active
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="strength-rating-option"]')
+            .eq(i)
+            .should("have.attr", "data-p-active", i < 6 ? "true" : "false");
+        }
+      });
+
+    cy.get('[data-test="status-dropdown-items"]').should("not.exist");
+    cy.get('[data-test="status-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.status")
+      .within(() => {
+        cy.get('[data-test="status-dropdown"]')
+          .should("not.include.text", "admin.servers")
+          .within(() => {
+            cy.get(".p-select-label").should(
+              "not.have.attr",
+              "aria-disabled",
+              "true",
+            );
+          });
+
+        cy.get('[data-test="status-dropdown"]').click();
+      });
+
+    cy.get('[data-test="status-dropdown-items"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="status-dropdown-option"]').should("have.length", 3);
+
+        cy.get('[data-test="status-dropdown-option"]')
+          .eq(0)
+          .should("have.text", "admin.servers.enabled");
+        cy.get('[data-test="status-dropdown-option"]')
+          .eq(1)
+          .should("have.text", "admin.servers.draining");
+        cy.get('[data-test="status-dropdown-option"]')
+          .eq(2)
+          .should("have.text", "admin.servers.disabled");
+
+        cy.get('[data-test="status-dropdown-option"]').eq(0).click();
+      });
+
+    cy.get('[data-test="status-dropdown-items"]').should("not.exist");
+    cy.get('[data-test="status-dropdown"]').should(
+      "have.text",
+      "admin.servers.enabled",
+    );
+
+    cy.get('[data-test="health-status-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.connection")
+      .within(() => {
+        cy.get("#healthStatus")
+          .should("have.value", "admin.servers.unknown")
+          .and("be.disabled");
+        cy.get('[data-test="servers-test-connection-button"]')
+          .should("be.visible")
+          .and("have.text", "admin.servers.test_connection")
+          .and("not.be.disabled");
+      });
+
+    // Check that other fields are hidden
+    cy.get('[data-test="meeting-count-field"]').should("not.exist");
+
+    cy.get('[data-test="own-meeting-count-field"]').should("not.exist");
+
+    cy.get('[data-test="participant-count-field"]').should("not.exist");
+
+    cy.get('[data-test="video-count-field"]').should("not.exist");
+
+    // Check that panic button is hidden (missing permissions)
+    cy.get('[data-test="servers-panic-button"]').should("not.exist");
+
+    // Save new server
+    cy.fixture("server.json").then((server) => {
+      server.data.id = 30;
+      server.data.description = "Testserver 01 for testing purposes";
+      server.data.secret = "Secret123456789";
+      server.data.strength = 6;
+
+      const newServerRequest = interceptIndefinitely(
+        "POST",
+        "api/v1/servers",
+        {
+          statusCode: 201,
+          body: server,
+        },
+        "newServerRequest",
+      );
+
+      cy.intercept("GET", "api/v1/servers/30", {
+        statusCode: 200,
+        body: server,
+      }).as("serverRequest");
+
+      cy.get('[data-test="overlay"]').should("not.exist");
+      cy.get('[data-test="servers-save-button"]')
+        .should("be.visible")
+        .and("have.text", "app.save")
+        .click();
+
+      // Check loading
+      cy.get('[data-test="overlay"]').should("be.visible");
+
+      // Check that fields are disabled
+      cy.get("#name").should("be.disabled");
+      cy.get("#description").should("be.disabled");
+      cy.get("#version").should("be.disabled");
+      cy.get("#base_url").should("be.disabled");
+      cy.get("#secret").should("be.disabled");
+      cy.get('[data-test="strength-rating"]').should(
+        "have.class",
+        "p-disabled",
+      );
+      cy.get('[data-test="status-dropdown"]').within(() => {
+        cy.get(".p-select-label").should("have.attr", "aria-disabled", "true");
+      });
+
+      cy.get("#healthStatus").and("be.disabled");
+      cy.get('[data-test="servers-test-connection-button"]').should(
+        "be.disabled",
+      );
+
+      cy.get('[data-test="servers-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          newServerRequest.sendResponse();
+        });
+    });
+
+    cy.wait("@newServerRequest").then((interception) => {
+      expect(interception.request.body).to.eql({
+        base_url: "https://localhost/bigbluebutton",
+        description: "Testserver 01 for testing purposes",
+        id: null,
+        name: "Server 01",
+        secret: "Secret123456789",
+        status: 1,
+        strength: 6,
+      });
+    });
+
+    cy.wait("@serverRequest");
+
+    // Check that redirect to server view worked
+    cy.url().should("include", "/admin/servers/30");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.servers.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.servers.view_{"name":"Server 01"}',
+      );
+  });
+
+  it("add new server errors", function () {
+    cy.visit("/admin/servers/new");
+
+    // Set values
+    cy.get("#name").should("have.value", "").type("Server 01");
+    cy.get("#description")
+      .should("have.value", "")
+      .type("Testserver 01 for testing purposes");
+    cy.get("#base_url")
+      .should("have.value", "")
+      .type("https://localhost/bigbluebutton");
+    cy.get("#secret").should("have.value", "").type("Secret123456789");
+    cy.get('[data-test="strength-rating-option"]').eq(5).click();
+    cy.get('[data-test="status-dropdown-items"]').should("not.exist");
+    cy.get('[data-test="status-dropdown"]').click();
+    cy.get('[data-test="status-dropdown-items"]').should("be.visible");
+    cy.get('[data-test="status-dropdown-option"]').eq(0).click();
+
+    // Check with 422 error
+    cy.intercept("POST", "api/v1/servers", {
+      statusCode: 422,
+      body: {
+        errors: {
+          name: ["The name field is required."],
+          description: ["The description field is required."],
+          base_url: ["The base url field is required."],
+          secret: ["The secret field is required."],
+          strength: ["The strength field is required."],
+          status: ["The status field is required."],
+        },
+      },
+    }).as("newServerRequest");
+
+    cy.get('[data-test="servers-save-button"]').click();
+
+    cy.wait("@newServerRequest");
+
+    // Check error messages
+    cy.get('[data-test="name-field"]').should(
+      "include.text",
+      "The name field is required.",
+    );
+
+    cy.get('[data-test="description-field"]').should(
+      "include.text",
+      "The description field is required.",
+    );
+
+    cy.get('[data-test="base-url-field"]').should(
+      "include.text",
+      "The base url field is required.",
+    );
+
+    cy.get('[data-test="secret-field"]').should(
+      "include.text",
+      "The secret field is required.",
+    );
+
+    cy.get('[data-test="strength-field"]').should(
+      "include.text",
+      "The strength field is required.",
+    );
+
+    cy.get('[data-test="status-field"]').should(
+      "include.text",
+      "The status field is required.",
+    );
+
+    // Check with 500 error
+    cy.intercept("POST", "api/v1/servers", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("newServerRequest");
+
+    cy.get('[data-test="servers-save-button"]').click();
+
+    cy.wait("@newServerRequest");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that 422 error messages are hidden
+    cy.get('[data-test="name-field"]').should(
+      "not.include.text",
+      "The name field is required.",
+    );
+
+    cy.get('[data-test="description-field"]').should(
+      "not.include.text",
+      "The description field is required.",
+    );
+
+    cy.get('[data-test="base-url-field"]').should(
+      "not.include.text",
+      "The base url field is required.",
+    );
+
+    cy.get('[data-test="secret-field"]').should(
+      "not.include.text",
+      "The secret field is required.",
+    );
+
+    cy.get('[data-test="strength-field"]').should(
+      "not.include.text",
+      "The strength field is required.",
+    );
+
+    cy.get('[data-test="status-field"]').should(
+      "not.include.text",
+      "The status field is required.",
+    );
+
+    // Check with 404 error
+    cy.interceptAdminServersIndexRequests();
+    cy.intercept("POST", "api/v1/servers", {
+      statusCode: 404,
+      body: {
+        message: "No query results for model",
+      },
+    }).as("newServerRequest");
+
+    cy.get('[data-test="servers-save-button"]').click();
+
+    cy.wait("@newServerRequest");
+
+    // Check that redirect worked
+    cy.url().should("not.include", "/admin/servers/new");
+    cy.url().should("include", "/admin/servers");
+
+    cy.wait("@serversRequest");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"No query results for model"}',
+      'app.flash.server_error.error_code_{"statusCode":404}',
+    ]);
+
+    // Reload
+    cy.visit("/admin/servers/new");
+
+    // Check with 401 error
+    cy.intercept("POST", "api/v1/servers", {
+      statusCode: 401,
+    }).as("newServerRequest");
+
+    cy.get('[data-test="servers-save-button"]').click();
+
+    cy.wait("@newServerRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/servers/new");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminServersView.cy.js b/tests/Frontend/e2e/AdminServersView.cy.js
new file mode 100644
index 000000000..baa39a8ba
--- /dev/null
+++ b/tests/Frontend/e2e/AdminServersView.cy.js
@@ -0,0 +1,613 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin servers view", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminServersViewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "servers.view",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin/servers/1");
+  });
+
+  it("visit with user without permission to view servers", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view", "servers.viewAny"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/servers/1");
+
+    cy.checkToastMessage("app.flash.unauthorized");
+
+    // Check if welcome page is shown
+    cy.url().should("not.include", "/admin/servers/1");
+    cy.get("h1").should("be.visible").and("include.text", "home.title");
+  });
+
+  it("check serverView shown correctly (server enabled)", function () {
+    const serverRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/servers/1",
+      { fixture: "server.json" },
+      "serverRequest",
+    );
+    cy.visit("/admin/servers/1");
+
+    cy.contains("admin.title");
+
+    // Check loading
+    cy.get('[data-test="servers-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-delete-button"]').should("not.exist");
+    cy.get('[data-test="servers-save-button"]').should("not.exist");
+
+    cy.get('[data-test="overlay"]')
+      .should("be.visible")
+      .then(() => {
+        serverRequest.sendResponse();
+      });
+
+    cy.wait("@serverRequest");
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that buttons are still hidden (missing permissions)
+    cy.get('[data-test="servers-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-delete-button"]').should("not.exist");
+    cy.get('[data-test="servers-save-button"]').should("not.exist");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.servers.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.servers.view_{"name":"Server 01"}',
+      );
+
+    // Check that server data is shown correctly
+    cy.get('[data-test="name-field"]')
+      .should("be.visible")
+      .and("include.text", "app.model_name")
+      .within(() => {
+        cy.get("#name").should("have.value", "Server 01").and("be.disabled");
+      });
+
+    cy.get('[data-test="description-field"]')
+      .should("be.visible")
+      .and("include.text", "app.description")
+      .within(() => {
+        cy.get("#description")
+          .should("have.value", "Testserver 01")
+          .and("be.disabled");
+      });
+
+    cy.get('[data-test="version-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.version")
+      .within(() => {
+        cy.get("#version").should("have.value", "2.4.5").and("be.disabled");
+      });
+
+    cy.get('[data-test="base-url-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.base_url")
+      .within(() => {
+        cy.get("#base_url")
+          .should("have.value", "https://localhost/bigbluebutton")
+          .and("be.disabled");
+      });
+
+    cy.get('[data-test="secret-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.secret")
+      .within(() => {
+        cy.get("#secret").should("have.value", "123456789").and("be.disabled");
+      });
+
+    cy.get('[data-test="strength-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.strength")
+      .and("include.text", "admin.servers.strength_description")
+      .within(() => {
+        cy.get('[data-test="strength-rating"]').should(
+          "have.class",
+          "p-disabled",
+        );
+
+        cy.get('[data-test="strength-rating-option"]').should(
+          "have.length",
+          10,
+        );
+
+        // Check that correct options are active
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="strength-rating-option"]')
+            .eq(i)
+            .should("have.attr", "data-p-active", i < 2 ? "true" : "false");
+        }
+      });
+
+    cy.get('[data-test="status-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.status")
+      .within(() => {
+        cy.get('[data-test="status-dropdown"]')
+          .should("have.text", "admin.servers.enabled")
+          .within(() => {
+            cy.get(".p-select-label").should(
+              "have.attr",
+              "aria-disabled",
+              "true",
+            );
+          });
+      });
+    cy.get('[data-test="health-status-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.connection")
+      .within(() => {
+        cy.get("#healthStatus")
+          .should("have.value", "admin.servers.online")
+          .and("be.disabled");
+        cy.get('[data-test="servers-test-connection-button"]')
+          .should("be.visible")
+          .and("have.text", "admin.servers.test_connection")
+          .and("not.be.disabled");
+      });
+
+    cy.get('[data-test="meeting-count-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.meeting_count")
+      .and("include.text", "admin.servers.meeting_description")
+      .within(() => {
+        cy.get("#meetingCount").should("have.value", "3").and("be.disabled");
+      });
+
+    cy.get('[data-test="own-meeting-count-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.own_meeting_count")
+      .and("include.text", "admin.servers.own_meeting_description")
+      .within(() => {
+        cy.get("#ownMeetingCount").should("have.value", "2").and("be.disabled");
+      });
+
+    cy.get('[data-test="participant-count-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.participant_count")
+      .within(() => {
+        cy.get("#participantCount")
+          .should("have.value", "14")
+          .and("be.disabled");
+      });
+
+    cy.get('[data-test="video-count-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.video_count")
+      .within(() => {
+        cy.get("#videoCount").should("have.value", "7").and("be.disabled");
+      });
+
+    // Check that panic button is hidden (missing permissions)
+    cy.get('[data-test="servers-panic-button"]').should("not.exist");
+  });
+
+  it("check serverView shown correctly (server draining)", function () {
+    cy.fixture("server.json").then((server) => {
+      server.data.status = 0;
+
+      cy.intercept("GET", "api/v1/servers/1", {
+        statusCode: 200,
+        body: server,
+      }).as("serverRequest");
+    });
+
+    cy.visit("/admin/servers/1");
+
+    cy.wait("@serverRequest");
+
+    // Check that buttons are hidden (missing permissions)
+    cy.get('[data-test="servers-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-delete-button"]').should("not.exist");
+    cy.get('[data-test="servers-save-button"]').should("not.exist");
+
+    // Check that changed fields are shown correctly
+    cy.get('[data-test="status-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.status")
+      .within(() => {
+        cy.get('[data-test="status-dropdown"]')
+          .should("have.text", "admin.servers.draining")
+          .within(() => {
+            cy.get(".p-select-label").should(
+              "have.attr",
+              "aria-disabled",
+              "true",
+            );
+          });
+      });
+    cy.get('[data-test="health-status-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.connection")
+      .within(() => {
+        cy.get("#healthStatus")
+          .should("have.value", "admin.servers.online")
+          .and("be.disabled");
+        cy.get('[data-test="servers-test-connection-button"]')
+          .should("be.visible")
+          .and("have.text", "admin.servers.test_connection")
+          .and("not.be.disabled");
+      });
+
+    // Check that additional fields are shown
+    cy.get('[data-test="meeting-count-field"]').should("be.visible");
+    cy.get('[data-test="own-meeting-count-field"]').should("be.visible");
+    cy.get('[data-test="participant-count-field"]').should("be.visible");
+    cy.get('[data-test="video-count-field"]').should("be.visible");
+
+    // Check that panic button is hidden (missing permissions)
+    cy.get('[data-test="servers-panic-button"]').should("not.exist");
+  });
+
+  it("check serverView shown correctly (server disabled)", function () {
+    cy.fixture("server.json").then((server) => {
+      server.data.status = -1;
+      server.data.health = 0;
+
+      cy.intercept("GET", "api/v1/servers/1", {
+        statusCode: 200,
+        body: server,
+      }).as("serverRequest");
+    });
+
+    cy.visit("/admin/servers/1");
+
+    cy.wait("@serverRequest");
+
+    // Check that buttons are hidden (missing permissions)
+    cy.get('[data-test="servers-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-delete-button"]').should("not.exist");
+    cy.get('[data-test="servers-save-button"]').should("not.exist");
+
+    // Check that changed fields are shown correctly
+    cy.get('[data-test="status-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.status")
+      .within(() => {
+        cy.get('[data-test="status-dropdown"]')
+          .should("have.text", "admin.servers.disabled")
+          .within(() => {
+            cy.get(".p-select-label").should(
+              "have.attr",
+              "aria-disabled",
+              "true",
+            );
+          });
+      });
+
+    cy.get('[data-test="health-status-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.servers.connection")
+      .within(() => {
+        cy.get("#healthStatus")
+          .should("have.value", "admin.servers.unhealthy")
+          .and("be.disabled");
+        cy.get('[data-test="servers-test-connection-button"]')
+          .should("be.visible")
+          .and("have.text", "admin.servers.test_connection")
+          .and("not.be.disabled");
+      });
+
+    cy.get('[data-test="meeting-count-field"]').should("not.exist");
+
+    cy.get('[data-test="own-meeting-count-field"]').should("not.exist");
+
+    cy.get('[data-test="participant-count-field"]').should("not.exist");
+
+    cy.get('[data-test="video-count-field"]').should("not.exist");
+
+    // Check that panic button is hidden (missing permissions)
+    cy.get('[data-test="servers-panic-button"]').should("not.exist");
+  });
+
+  it("check button visibility with update permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "servers.view",
+        "servers.update",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/servers/1");
+
+    cy.wait("@serverRequest");
+
+    // Check with server enabled
+    cy.get('[data-test="servers-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("have.text", "app.edit")
+      .and("have.attr", "href", "/admin/servers/1/edit");
+    cy.get('[data-test="servers-delete-button"]').should("not.exist");
+    cy.get('[data-test="servers-save-button"]').should("not.exist");
+
+    cy.get('[data-test="servers-test-connection-button"]')
+      .should("be.visible")
+      .and("have.text", "admin.servers.test_connection")
+      .and("not.be.disabled");
+
+    cy.get('[data-test="servers-panic-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "admin.servers.panic");
+
+    // Reload page but with server draining
+    cy.fixture("server.json").then((server) => {
+      server.data.status = 0;
+
+      cy.intercept("GET", "api/v1/servers/1", {
+        statusCode: 200,
+        body: server,
+      }).as("serverRequest");
+    });
+
+    cy.reload();
+
+    // Check with server draining
+    cy.get('[data-test="servers-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("have.text", "app.edit")
+      .and("have.attr", "href", "/admin/servers/1/edit");
+    cy.get('[data-test="servers-delete-button"]').should("not.exist");
+    cy.get('[data-test="servers-save-button"]').should("not.exist");
+
+    cy.get('[data-test="servers-test-connection-button"]')
+      .should("be.visible")
+      .and("have.text", "admin.servers.test_connection")
+      .and("not.be.disabled");
+
+    cy.get('[data-test="servers-panic-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "admin.servers.panic");
+
+    // Reload page but with server disabled
+    cy.fixture("server.json").then((server) => {
+      server.data.status = -1;
+
+      cy.intercept("GET", "api/v1/servers/1", {
+        statusCode: 200,
+        body: server,
+      }).as("serverRequest");
+    });
+
+    cy.reload();
+
+    // Check with server disabled
+    cy.get('[data-test="servers-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("have.text", "app.edit")
+      .and("have.attr", "href", "/admin/servers/1/edit");
+    cy.get('[data-test="servers-delete-button"]').should("not.exist");
+    cy.get('[data-test="servers-save-button"]').should("not.exist");
+
+    cy.get('[data-test="servers-test-connection-button"]')
+      .should("be.visible")
+      .and("have.text", "admin.servers.test_connection")
+      .and("not.be.disabled");
+
+    cy.get('[data-test="servers-panic-button"]').should("not.exist");
+  });
+
+  it("check button visibility with delete permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "servers.view",
+        "servers.update",
+        "servers.create",
+        "servers.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/servers/1");
+
+    cy.wait("@serverRequest");
+
+    // Check with server enabled
+    cy.get('[data-test="servers-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("have.text", "app.edit")
+      .and("have.attr", "href", "/admin/servers/1/edit");
+    cy.get('[data-test="servers-delete-button"]').should("not.exist");
+    cy.get('[data-test="servers-save-button"]').should("not.exist");
+
+    cy.get('[data-test="servers-test-connection-button"]')
+      .should("be.visible")
+      .and("have.text", "admin.servers.test_connection")
+      .and("not.be.disabled");
+
+    cy.get('[data-test="servers-panic-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "admin.servers.panic");
+
+    // Reload page but with server draining
+    cy.fixture("server.json").then((server) => {
+      server.data.status = 0;
+
+      cy.intercept("GET", "api/v1/servers/1", {
+        statusCode: 200,
+        body: server,
+      }).as("serverRequest");
+    });
+
+    cy.reload();
+
+    // Check with server draining
+    cy.get('[data-test="servers-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("have.text", "app.edit")
+      .and("have.attr", "href", "/admin/servers/1/edit");
+    cy.get('[data-test="servers-delete-button"]').should("not.exist");
+    cy.get('[data-test="servers-save-button"]').should("not.exist");
+
+    cy.get('[data-test="servers-test-connection-button"]')
+      .should("be.visible")
+      .and("have.text", "admin.servers.test_connection")
+      .and("not.be.disabled");
+
+    cy.get('[data-test="servers-panic-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "admin.servers.panic");
+
+    // Reload page but with server disabled
+    cy.fixture("server.json").then((server) => {
+      server.data.status = -1;
+
+      cy.intercept("GET", "api/v1/servers/1", {
+        statusCode: 200,
+        body: server,
+      }).as("serverRequest");
+    });
+
+    cy.reload();
+
+    // Check with server disabled
+    cy.get('[data-test="servers-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="servers-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("have.text", "app.edit")
+      .and("have.attr", "href", "/admin/servers/1/edit");
+    cy.get('[data-test="servers-delete-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+    cy.get('[data-test="servers-save-button"]').should("not.exist");
+
+    cy.get('[data-test="servers-test-connection-button"]')
+      .should("be.visible")
+      .and("have.text", "admin.servers.test_connection")
+      .and("not.be.disabled");
+
+    cy.get('[data-test="servers-panic-button"]').should("not.exist");
+  });
+
+  it("open view errors", function () {
+    cy.intercept("GET", "api/v1/servers/1", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("serverRequest");
+
+    cy.visit("/admin/servers/1");
+
+    cy.wait("@serverRequest");
+
+    // Check that overlay is shown
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Reload with correct data
+    cy.intercept("GET", "api/v1/servers/1", {
+      statusCode: 200,
+      fixture: "server.json",
+    }).as("serverRequest");
+
+    cy.get('[data-test="loading-retry-button"]')
+      .should("be.visible")
+      .and("have.text", "app.reload")
+      .click();
+
+    cy.wait("@serverRequest");
+
+    // Check that overlay is not shown anymore
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
+
+    // Reload page with 404 errors
+    cy.interceptAdminServersIndexRequests();
+
+    cy.intercept("GET", "api/v1/servers/1", {
+      statusCode: 404,
+      body: {
+        message: "No query results for model",
+      },
+    }).as("serverRequest");
+
+    cy.reload();
+
+    cy.wait("@serverRequest");
+
+    // Check that redirect worked
+    cy.url().should("not.include", "/admin/servers/1");
+    cy.url().should("include", "/admin/servers");
+
+    cy.wait("@serversRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"No query results for model"}',
+      'app.flash.server_error.error_code_{"statusCode":404}',
+    ]);
+
+    // Reload page with 401 error
+    cy.intercept("GET", "api/v1/servers/1", {
+      statusCode: 401,
+    }).as("serverRequest");
+
+    cy.visit("/admin/servers/1");
+
+    cy.wait("@serverRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/servers/1");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminServersViewServerActions.cy.js b/tests/Frontend/e2e/AdminServersViewServerActions.cy.js
new file mode 100644
index 000000000..5e3f3a9a7
--- /dev/null
+++ b/tests/Frontend/e2e/AdminServersViewServerActions.cy.js
@@ -0,0 +1,597 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin servers view server actions", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminServersViewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "servers.viewAny",
+        "servers.view",
+        "servers.update",
+        "servers.create",
+        "servers.delete",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("delete server", function () {
+    cy.fixture("server.json").then((server) => {
+      server.data.status = -1;
+
+      cy.intercept("GET", "api/v1/servers/1", {
+        statusCode: 200,
+        body: server,
+      }).as("serverRequest");
+    });
+
+    cy.visit("/admin/servers/1");
+
+    cy.wait("@serverRequest");
+
+    cy.get('[data-test="servers-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="servers-delete-button"]').click();
+
+    cy.get('[data-test="servers-delete-dialog"]').should("be.visible");
+
+    // Check that dialog shows correct data
+    cy.get('[data-test="servers-delete-dialog"]')
+      .should("include.text", "admin.servers.delete.title")
+      .should(
+        "include.text",
+        'admin.servers.delete.confirm_{"name":"Server 01"}',
+      );
+
+    // Confirm delete of server
+    const deleteServerRequest = interceptIndefinitely(
+      "DELETE",
+      "api/v1/servers/1",
+      { statusCode: 204 },
+      "deleteServerRequest",
+    );
+
+    cy.fixture("servers.json").then((servers) => {
+      servers.data = servers.data.slice(1, 4);
+      servers.meta.to = 3;
+      servers.meta.total = 3;
+      servers.meta.total_no_filter = 3;
+
+      cy.intercept("GET", "api/v1/servers*", {
+        statusCode: 200,
+        body: servers,
+      }).as("serversRequest");
+    });
+
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("have.text", "app.yes")
+      .click();
+    // Check loading
+    cy.get('[data-test="dialog-cancel-button"]')
+      .should("have.text", "app.no")
+      .should("be.disabled");
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("be.disabled")
+      .then(() => {
+        deleteServerRequest.sendResponse();
+      });
+
+    cy.wait("@deleteServerRequest");
+    cy.wait("@serversRequest");
+
+    // Check that redirect worked
+    cy.url().should("not.include", "/admin/servers/1");
+    cy.url().should("include", "/admin/servers");
+
+    // Check that server was deleted
+    cy.get('[data-test="server-item"]').should("have.length", 3);
+
+    // Check that dialog is closed
+    cy.get('[data-test="servers-delete-dialog"]').should("not.exist");
+  });
+
+  it("delete server errors", function () {
+    cy.fixture("server.json").then((server) => {
+      server.data.status = -1;
+
+      cy.intercept("GET", "api/v1/servers/1", {
+        statusCode: 200,
+        body: server,
+      }).as("serverRequest");
+    });
+
+    cy.visit("/admin/servers/1");
+
+    cy.wait("@serverRequest");
+
+    cy.get('[data-test="servers-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="servers-delete-button"]').click();
+
+    cy.get('[data-test="servers-delete-dialog"]').should("be.visible");
+
+    // Check with 500 error
+    cy.intercept("DELETE", "api/v1/servers/1", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("deleteServerRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteServerRequest");
+
+    // Check that dialog is still open and that error message is shown
+    cy.get('[data-test="servers-delete-dialog"]').should("be.visible");
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check with 401 error
+    cy.intercept("DELETE", "api/v1/servers/1", {
+      statusCode: 401,
+    }).as("deleteServerRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteServerRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/servers/1");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("check connection", function () {
+    cy.visit("/admin/servers/1");
+    cy.wait("@serverRequest");
+
+    cy.get("#healthStatus")
+      .should("have.value", "admin.servers.online")
+      .and("be.disabled");
+
+    // Check connection
+    const checkConnectionRequest = interceptIndefinitely(
+      "POST",
+      "api/v1/servers/check",
+      {
+        statusCode: 200,
+        body: {
+          connection_ok: false,
+          secret_ok: false,
+        },
+      },
+      "checkConnectionRequest",
+    );
+
+    cy.get('[data-test="servers-test-connection-button"]')
+      .should("be.visible")
+      .and("have.text", "admin.servers.test_connection")
+      .and("not.be.disabled")
+      .click();
+
+    // Check loading (offline)
+    cy.get('[data-test="servers-test-connection-button"]')
+      .should("be.disabled")
+      .then(() => {
+        checkConnectionRequest.sendResponse();
+      });
+
+    cy.wait("@checkConnectionRequest").then((interception) => {
+      expect(interception.request.body).to.eql({
+        base_url: "https://localhost/bigbluebutton",
+        secret: "123456789",
+      });
+    });
+
+    // Check that loading is finished
+    cy.get('[data-test="servers-test-connection-button"]').should(
+      "not.be.disabled",
+    );
+
+    // Check that connection status is updated
+    cy.get("#healthStatus")
+      .should("have.value", "admin.servers.offline")
+      .and("be.disabled");
+
+    cy.get('[data-test="health-status-field"]').should(
+      "include.text",
+      "admin.servers.offline_reason.connection",
+    );
+
+    // Check connection again (wrong  secret)
+    cy.intercept("POST", "api/v1/servers/check", {
+      statusCode: 200,
+      body: {
+        connection_ok: true,
+        secret_ok: false,
+      },
+    }).as("checkConnectionRequest");
+
+    cy.get('[data-test="servers-test-connection-button"]').click();
+
+    cy.wait("@checkConnectionRequest").then((interception) => {
+      expect(interception.request.body).to.eql({
+        base_url: "https://localhost/bigbluebutton",
+        secret: "123456789",
+      });
+    });
+
+    // Check that connection status is updated
+    cy.get("#healthStatus")
+      .should("have.value", "admin.servers.offline")
+      .and("be.disabled");
+
+    cy.get('[data-test="health-status-field"]').should(
+      "include.text",
+      "admin.servers.offline_reason.secret",
+    );
+
+    // Check connection again (valid connection)
+    cy.intercept("POST", "api/v1/servers/check", {
+      statusCode: 200,
+      body: {
+        connection_ok: true,
+        secret_ok: true,
+      },
+    }).as("checkConnectionRequest");
+
+    cy.get('[data-test="servers-test-connection-button"]').click();
+
+    cy.wait("@checkConnectionRequest").then((interception) => {
+      expect(interception.request.body).to.eql({
+        base_url: "https://localhost/bigbluebutton",
+        secret: "123456789",
+      });
+    });
+
+    // Check that connection status is updated
+    cy.get("#healthStatus")
+      .should("have.value", "admin.servers.online")
+      .and("be.disabled");
+
+    cy.get('[data-test="health-status-field"]').should(
+      "not.include.text",
+      "admin.servers.offline_reason",
+    );
+  });
+
+  it("check connection errors", function () {
+    cy.visit("/admin/servers/1");
+    cy.wait("@serverRequest");
+
+    cy.get("#healthStatus")
+      .should("have.value", "admin.servers.online")
+      .and("be.disabled");
+
+    // Check with 500 error
+    cy.intercept("POST", "api/v1/servers/check", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("checkConnectionRequest");
+
+    cy.get('[data-test="servers-test-connection-button"]').click();
+
+    cy.wait("@checkConnectionRequest");
+
+    // Check that connection status is updated
+    cy.get("#healthStatus")
+      .should("have.value", "admin.servers.unknown")
+      .and("be.disabled");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check with 401 error
+    cy.intercept("POST", "api/v1/servers/check", {
+      statusCode: 401,
+    }).as("checkConnectionRequest");
+
+    cy.get('[data-test="servers-test-connection-button"]').click();
+
+    cy.wait("@checkConnectionRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/servers/1");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("panic", function () {
+    cy.visit("/admin/servers/1");
+
+    cy.wait("@serverRequest");
+
+    const panicRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/servers/1/panic",
+      {
+        statusCode: 200,
+        body: {
+          total: 5,
+          success: 3,
+        },
+      },
+      "panicRequest",
+    );
+
+    cy.fixture("server.json").then((server) => {
+      server.data.status = -1;
+      server.data.health = null;
+      server.data.participant_count = null;
+      server.data.listener_count = null;
+      server.data.voice_participant_count = null;
+      server.data.video_count = null;
+      server.data.meeting_count = null;
+      server.data.own_meeting_count = 0;
+      server.data.version = null;
+
+      cy.intercept("GET", "api/v1/servers/1", {
+        statusCode: 200,
+        body: server,
+      }).as("serverRequest");
+    });
+
+    cy.get('[data-test="servers-panic-button"]').click();
+
+    cy.get('[data-test="servers-panic-button"]')
+      .should("be.disabled")
+      .then(() => {
+        panicRequest.sendResponse();
+      });
+
+    cy.wait("@panicRequest");
+    cy.wait("@serverRequest");
+
+    // Check that toast message is shown
+    cy.checkToastMessage([
+      'admin.servers.flash.panic.description_{"total":5,"success":3}',
+      "admin.servers.flash.panic.title",
+    ]);
+
+    // Check that server status is updated
+    cy.get('[data-test="status-dropdown"]').should(
+      "have.text",
+      "admin.servers.disabled",
+    );
+
+    // Check that server health is updated
+    cy.get("#healthStatus")
+      .should("have.value", "admin.servers.unknown")
+      .and("be.disabled");
+
+    cy.get('[data-test="meeting-count-field"]').should("not.exist");
+
+    cy.get('[data-test="own-meeting-count-field"]').should("not.exist");
+
+    cy.get('[data-test="participant-count-field"]').should("not.exist");
+
+    cy.get('[data-test="video-count-field"]').should("not.exist");
+
+    // Check that panic button is hidden (missing permissions)
+    cy.get('[data-test="servers-panic-button"]').should("not.exist");
+  });
+
+  it("panic errors", function () {
+    cy.visit("/admin/servers/1");
+
+    cy.wait("@serverRequest");
+
+    // Check with 500 error
+    cy.intercept("GET", "api/v1/servers/1/panic", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("panicRequest");
+
+    cy.get('[data-test="servers-panic-button"]').click();
+
+    cy.wait("@panicRequest");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check with 401 error
+    cy.intercept("GET", "api/v1/servers/1/panic", {
+      statusCode: 401,
+    }).as("panicRequest");
+
+    cy.get('[data-test="servers-panic-button"]').click();
+
+    cy.wait("@panicRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/servers/1");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("switch between edit and view", function () {
+    cy.visit("/admin/servers/1/edit");
+
+    cy.wait("@serverRequest");
+
+    // Check values and change them
+    cy.get("#name")
+      .should("not.be.disabled")
+      .and("have.value", "Server 01")
+      .clear();
+    cy.get("#name").type("Server 02");
+    cy.get("#description")
+      .should("not.be.disabled")
+      .and("have.value", "Testserver 01")
+      .clear();
+    cy.get("#description").type("Testserver 02 for testing purposes");
+    cy.get("#base_url")
+      .should("not.be.disabled")
+      .and("have.value", "https://localhost/bigbluebutton")
+      .clear();
+    cy.get("#base_url").type("https://localhost/bigbluebutton2");
+    cy.get("#secret")
+      .should("not.be.disabled")
+      .and("have.value", "123456789")
+      .clear();
+    cy.get("#secret").type("Secret123456789");
+    cy.get('[data-test="strength-rating"]').should(
+      "not.have.class",
+      "p-disabled",
+    );
+    for (let i = 0; i < 10; i++) {
+      cy.get('[data-test="strength-rating-option"]')
+        .eq(i)
+        .should("have.attr", "data-p-active", i < 2 ? "true" : "false");
+    }
+    cy.get('[data-test="strength-rating-option"]').eq(5).click();
+    cy.get('[data-test="status-dropdown"]')
+      .should("include.text", "admin.servers.enabled")
+      .within(() => {
+        cy.get(".p-select-label").should(
+          "not.have.attr",
+          "aria-disabled",
+          "true",
+        );
+      });
+    cy.get('[data-test="status-dropdown-items"]').should("not.exist");
+    cy.get('[data-test="status-dropdown"]').click();
+    cy.get('[data-test="status-dropdown-items"]').should("be.visible");
+    cy.get('[data-test="status-dropdown-option"]').eq(2).click();
+
+    // Check that other fields are hidden
+    cy.get('[data-test="meeting-count-field"]').should("not.exist");
+
+    cy.get('[data-test="own-meeting-count-field"]').should("not.exist");
+
+    cy.get('[data-test="participant-count-field"]').should("not.exist");
+
+    cy.get('[data-test="video-count-field"]').should("not.exist");
+
+    // Check that panic button is hidden
+    cy.get('[data-test="servers-panic-button"]').should("not.exist");
+
+    // Check that save button is shown
+    cy.get('[data-test="servers-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+
+    // Switch to view
+    cy.get('[data-test="servers-cancel-edit-button"]').click();
+
+    // Check if redirected to view page
+    cy.url().should("include", "/admin/servers/1");
+    cy.url().should("not.include", "/edit");
+
+    cy.wait("@serverRequest");
+
+    // Check that changes were not saved
+    cy.get("#name").should("be.disabled").and("have.value", "Server 01");
+    cy.get("#description")
+      .should("be.disabled")
+      .and("have.value", "Testserver 01");
+    cy.get("#base_url")
+      .should("be.disabled")
+      .and("have.value", "https://localhost/bigbluebutton");
+    cy.get("#secret").should("be.disabled").and("have.value", "123456789");
+    cy.get('[data-test="strength-rating"]').should("have.class", "p-disabled");
+    for (let i = 0; i < 10; i++) {
+      cy.get('[data-test="strength-rating-option"]')
+        .eq(i)
+        .should("have.attr", "data-p-active", i < 2 ? "true" : "false");
+    }
+    cy.get('[data-test="status-dropdown"]')
+      .should("include.text", "admin.servers.enabled")
+      .within(() => {
+        cy.get(".p-select-label").should("have.attr", "aria-disabled", "true");
+      });
+
+    // Check that other fields and panic button are shown
+    cy.get("#meetingCount")
+      .should("have.value", "3")
+      .and("be.visible")
+      .and("be.disabled");
+    cy.get("#ownMeetingCount")
+      .should("have.value", "2")
+      .and("be.visible")
+      .and("be.disabled");
+    cy.get("#participantCount")
+      .should("have.value", "14")
+      .and("be.visible")
+      .and("be.disabled");
+    cy.get("#videoCount")
+      .should("have.value", "7")
+      .and("be.visible")
+      .and("be.disabled");
+    cy.get('[data-test="servers-panic-button"]').should("be.visible");
+
+    // Check that save button is hidden
+    cy.get('[data-test="servers-save-button"]').should("not.exist");
+
+    // Switch back to edit
+    cy.get('[data-test="servers-edit-button"]').click();
+
+    // Check if redirected to edit page
+    cy.url().should("include", "/admin/servers/1/edit");
+
+    cy.wait("@serverRequest");
+
+    // Check that original values are shown
+    cy.get("#name").should("not.be.disabled").and("have.value", "Server 01");
+    cy.get("#description")
+      .should("not.be.disabled")
+      .and("have.value", "Testserver 01");
+    cy.get("#base_url")
+      .should("not.be.disabled")
+      .and("have.value", "https://localhost/bigbluebutton");
+    cy.get("#secret").should("not.be.disabled").and("have.value", "123456789");
+    cy.get('[data-test="strength-rating"]').should(
+      "not.have.class",
+      "p-disabled",
+    );
+    for (let i = 0; i < 10; i++) {
+      cy.get('[data-test="strength-rating-option"]')
+        .eq(i)
+        .should("have.attr", "data-p-active", i < 2 ? "true" : "false");
+    }
+    cy.get('[data-test="status-dropdown"]')
+      .should("include.text", "admin.servers.enabled")
+      .within(() => {
+        cy.get(".p-select-label").should(
+          "not.have.attr",
+          "aria-disabled",
+          "true",
+        );
+      });
+    // Check that other fields are hidden
+    cy.get('[data-test="meeting-count-field"]').should("not.exist");
+
+    cy.get('[data-test="own-meeting-count-field"]').should("not.exist");
+
+    cy.get('[data-test="participant-count-field"]').should("not.exist");
+
+    cy.get('[data-test="video-count-field"]').should("not.exist");
+
+    // Check that panic button is hidden
+    cy.get('[data-test="servers-panic-button"]').should("not.exist");
+
+    // Check that save button is shown
+    cy.get('[data-test="servers-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminSettingsEdit.cy.js b/tests/Frontend/e2e/AdminSettingsEdit.cy.js
new file mode 100644
index 000000000..5748cc481
--- /dev/null
+++ b/tests/Frontend/e2e/AdminSettingsEdit.cy.js
@@ -0,0 +1,2960 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+import { parseFormData } from "../support/utils/formData.js";
+import { _arrayBufferToBase64 } from "../support/utils/fileHelper.js";
+
+describe("Admin settings with edit permission", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminSettingsRequest();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "settings.viewAny",
+        "settings.update",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("change application settings", function () {
+    cy.visit("/admin/settings");
+
+    cy.wait("@settingsRequest");
+
+    cy.contains("admin.settings.application");
+
+    cy.get('[data-test="application-name-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.name.title")
+      .and("include.text", "admin.settings.name.description")
+      .within(() => {
+        cy.get("#application-name")
+          .should("have.value", "Test Application")
+          .clear();
+        cy.get("#application-name").type("PILOS test application");
+      });
+
+    cy.get('[ data-test="help-url-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.help_url.title")
+      .and("include.text", "admin.settings.help_url.description")
+      .within(() => {
+        cy.get("#help-url")
+          .should("have.value", "")
+          .type("http://www.pilos.com/help");
+      });
+
+    cy.get('[data-test="legal-notice-url-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.legal_notice_url.title")
+      .and("include.text", "admin.settings.legal_notice_url.description")
+      .within(() => {
+        cy.get("#legal-notice-url")
+          .should("have.value", "")
+          .type("http://www.pilos.com/legal_notice");
+      });
+
+    cy.get('[data-test="privacy-policy-url-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.privacy_policy_url.title")
+      .and("include.text", "admin.settings.privacy_policy_url.description")
+      .within(() => {
+        cy.get("#privacy-policy-url")
+          .should("have.value", "")
+          .type("http://www.pilos.com/privacy_policy");
+      });
+
+    cy.get('[data-test="pagination-page-size-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.pagination_page_size.title")
+      .and("include.text", "admin.settings.pagination_page_size.description")
+      .within(() => {
+        cy.get("#pagination-page-size").should("have.value", "5").clear();
+        cy.get("#pagination-page-size").type("3");
+      });
+
+    cy.get('[data-test="toast-lifetime-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.toast_lifetime.title")
+      .and("include.text", "admin.settings.toast_lifetime.description")
+      .within(() => {
+        cy.get('[data-test="toast-lifetime-mode-unlimited-field"]')
+          .should("be.visible")
+          .should("include.text", "app.unlimited")
+          .within(() => {
+            cy.get("#toast-lifetime-mode-unlimited")
+              .should("be.checked")
+              .and("not.be.disabled");
+          });
+
+        cy.get('[data-test="toast-lifetime-custom-input"]').should("not.exist");
+
+        cy.get('[data-test="toast-lifetime-mode-custom-field"]')
+          .should("be.visible")
+          .should("include.text", "admin.settings.toast_lifetime.custom")
+          .within(() => {
+            cy.get("#toast-lifetime-mode-custom")
+              .should("not.be.checked")
+              .and("not.be.disabled")
+              .click();
+          });
+
+        cy.get('[data-test="toast-lifetime-custom-input"]')
+          .should("be.visible")
+          .and("have.value", "5")
+          .clear();
+        cy.get('[data-test="toast-lifetime-custom-input"]').type("10");
+      });
+
+    // Check timezone setting and change it
+    cy.get('[data-test="timezone-dropdown-items"]').should("not.exist");
+    cy.get('[data-test="default-timezone-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.default_timezone")
+      .within(() => {
+        cy.get('[data-test="timezone-dropdown"]')
+          .should("have.text", "UTC")
+          .click();
+      });
+
+    cy.get('[data-test="timezone-dropdown-items"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="timezone-dropdown-option"]').should(
+          "have.length",
+          4,
+        );
+
+        cy.get('[data-test="timezone-dropdown-option"]')
+          .eq(0)
+          .should("have.text", "America/New_York");
+        cy.get('[data-test="timezone-dropdown-option"]')
+          .eq(1)
+          .should("have.text", "Australia/Sydney");
+        cy.get('[data-test="timezone-dropdown-option"]')
+          .eq(2)
+          .should("have.text", "Europe/Berlin");
+        cy.get('[data-test="timezone-dropdown-option"]')
+          .eq(3)
+          .should("have.text", "UTC");
+        cy.get('[data-test="timezone-dropdown-option"]')
+          .eq(3)
+          .should("have.attr", "aria-selected", "true");
+
+        cy.get('[data-test="timezone-dropdown-option"]').eq(2).click();
+      });
+
+    cy.get('[data-test="timezone-dropdown-items"]').should("not.exist");
+    cy.get('[data-test="timezone-dropdown"]').should(
+      "have.text",
+      "Europe/Berlin",
+    );
+
+    cy.get('[data-test="no-welcome-page-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.no_welcome_page")
+      .within(() => {
+        cy.get("#no-welcome-page").should("be.checked").click();
+      });
+
+    // Save changes
+    cy.fixture("settings.json").then((settings) => {
+      settings.data.general_name = "PILOS test application";
+      settings.data.general_help_url = "http://www.pilos.com/help";
+      settings.data.general_legal_notice_url =
+        "http://www.pilos.com/legal_notice";
+      settings.data.general_privacy_policy_url =
+        "http://www.pilos.com/privacy_policy";
+      settings.data.general_pagination_page_size = 3;
+      settings.data.general_toast_lifetime = 10;
+      settings.data.general_default_timezone = "Europe/Berlin";
+      settings.data.general_no_welcome_page = false;
+
+      const saveChangesRequest = interceptIndefinitely(
+        "POST",
+        "api/v1/settings",
+        {
+          statusCode: 200,
+          body: settings,
+        },
+        "saveChangesRequest",
+      );
+
+      cy.get('[data-test="settings-save-button"]')
+        .should("include.text", "app.save")
+        .click();
+
+      // Check loading
+      cy.get('[data-test="overlay"]').should("be.visible");
+      cy.get('[data-test="settings-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          saveChangesRequest.sendResponse();
+        });
+    });
+
+    cy.wait("@saveChangesRequest").then((interception) => {
+      const formData = parseFormData(
+        interception.request.body,
+        interception.request.headers,
+      );
+
+      expect(formData.get("general_name")).to.equal("PILOS test application");
+      expect(formData.get("general_help_url")).to.equal(
+        "http://www.pilos.com/help",
+      );
+      expect(formData.get("general_legal_notice_url")).to.equal(
+        "http://www.pilos.com/legal_notice",
+      );
+      expect(formData.get("general_privacy_policy_url")).to.equal(
+        "http://www.pilos.com/privacy_policy",
+      );
+      expect(formData.get("general_pagination_page_size")).to.equal("3");
+      expect(formData.get("general_toast_lifetime")).to.equal("10");
+      expect(formData.get("general_default_timezone")).to.equal(
+        "Europe/Berlin",
+      );
+      expect(formData.get("general_no_welcome_page")).to.equal("0");
+    });
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="settings-save-button"]').should("not.be.disabled");
+
+    // Check that settings are shown correctly
+    cy.get("#application-name").should("have.value", "PILOS test application");
+    cy.get("#help-url").should("have.value", "http://www.pilos.com/help");
+    cy.get("#legal-notice-url").should(
+      "have.value",
+      "http://www.pilos.com/legal_notice",
+    );
+    cy.get("#privacy-policy-url").should(
+      "have.value",
+      "http://www.pilos.com/privacy_policy",
+    );
+    cy.get("#pagination-page-size").should("have.value", "3");
+    cy.get("#toast-lifetime-mode-unlimited")
+      .should("not.be.checked")
+      .and("not.be.disabled");
+    cy.get("#toast-lifetime-mode-custom")
+      .should("be.checked")
+      .and("not.be.disabled");
+    cy.get('[data-test="toast-lifetime-custom-input"]').should(
+      "have.value",
+      "10",
+    );
+    cy.get('[data-test="timezone-dropdown"]').should(
+      "have.text",
+      "Europe/Berlin",
+    );
+    cy.get("#no-welcome-page").should("not.be.checked");
+
+    // Change settings again (Clear url fields and change toast lifetime to unlimited)
+    cy.get("#help-url").clear();
+    cy.get("#legal-notice-url").clear();
+    cy.get("#privacy-policy-url").clear();
+
+    cy.get("#toast-lifetime-mode-unlimited").click();
+    cy.get('[data-test="toast-lifetime-custom-input"]').should("not.exist");
+
+    // Save changes
+    cy.fixture("settings.json").then((settings) => {
+      settings.data.general_name = "PILOS test application";
+      settings.data.general_pagination_page_size = 3;
+      settings.data.general_toast_lifetime = 0;
+      settings.data.general_default_timezone = "Europe/Berlin";
+      settings.data.general_no_welcome_page = false;
+
+      cy.intercept("POST", "api/v1/settings", {
+        statusCode: 200,
+        body: settings,
+      }).as("saveChangesRequest");
+    });
+
+    cy.get('[data-test="settings-save-button"]')
+      .should("include.text", "app.save")
+      .click();
+
+    cy.wait("@saveChangesRequest").then((interception) => {
+      const formData = parseFormData(
+        interception.request.body,
+        interception.request.headers,
+      );
+
+      expect(formData.get("general_name")).to.equal("PILOS test application");
+      expect(formData.get("general_help_url")).to.equal("");
+      expect(formData.get("general_legal_notice_url")).to.equal("");
+      expect(formData.get("general_privacy_policy_url")).to.equal("");
+      expect(formData.get("general_pagination_page_size")).to.equal("3");
+      expect(formData.get("general_toast_lifetime")).to.equal("0");
+      expect(formData.get("general_default_timezone")).to.equal(
+        "Europe/Berlin",
+      );
+      expect(formData.get("general_no_welcome_page")).to.equal("0");
+    });
+
+    // Check that settings are shown correctly
+    cy.get("#application-name").should("have.value", "PILOS test application");
+    cy.get("#help-url").should("have.value", "");
+    cy.get("#legal-notice-url").should("have.value", "");
+    cy.get("#privacy-policy-url").should("have.value", "");
+    cy.get("#pagination-page-size").should("have.value", "3");
+    cy.get("#toast-lifetime-mode-unlimited")
+      .should("be.checked")
+      .and("not.be.disabled");
+    cy.get("#toast-lifetime-mode-custom")
+      .should("not.be.checked")
+      .and("not.be.disabled");
+    cy.get('[data-test="toast-lifetime-custom-input"]').should("not.exist");
+    cy.get('[data-test="timezone-dropdown"]').should(
+      "have.text",
+      "Europe/Berlin",
+    );
+    cy.get("#no-welcome-page").should("not.be.checked");
+  });
+
+  it("change theme settings", function () {
+    cy.visit("/admin/settings");
+
+    cy.wait("@settingsRequest");
+
+    cy.contains("admin.settings.theme.title");
+
+    cy.get('[data-test="favicon-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.favicon.title")
+      .within(() => {
+        cy.checkSettingsImageSelector(
+          "/images/favicon.ico",
+          "favicon.ico",
+          false,
+        );
+      });
+
+    cy.get('[data-test="favicon-dark-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.favicon_dark.title")
+      .within(() => {
+        cy.checkSettingsImageSelector(
+          "/images/favicon-dark.ico",
+          "favicon-dark.ico",
+          false,
+        );
+      });
+
+    cy.get('[data-test="logo-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.logo.title")
+      .within(() => {
+        cy.checkSettingsImageSelector("/images/logo.svg", "logo.svg", false);
+      });
+
+    cy.get('[data-test="logo-dark-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.logo_dark.title")
+      .within(() => {
+        cy.checkSettingsImageSelector(
+          "/images/logo-dark.svg",
+          "logo-dark.svg",
+          false,
+        );
+      });
+
+    cy.get('[data-test="primary-color-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.theme.primary_color")
+      .within(() => {
+        cy.get('[data-test="color-button"]').should("have.length", 10);
+
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should("have.attr", "role", "button")
+            .and(
+              "not.have.class",
+              "pointer-events-none cursor-not-allowed opacity-80",
+            )
+            .and(i === 4 ? "have.class" : "not.have.class", "selected");
+        }
+
+        // Clear custom color and check that color buttons are not selected
+        cy.get("#theme-primary-color")
+          .should("have.value", "#22c55e")
+          .and("not.be.disabled")
+          .clear();
+
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should("not.have.class", "selected");
+        }
+
+        // Set custom color and check that color buttons is selected
+        cy.get("#theme-primary-color").type("#14b8a6");
+
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should(i === 3 ? "have.class" : "not.have.class", "selected");
+        }
+      });
+
+    cy.get('[data-test="theme-rounded-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.theme.rounded")
+      .within(() => {
+        cy.get("#theme-rounded").should("be.checked").click();
+      });
+
+    // Save changes
+    cy.fixture("settings.json").then((settings) => {
+      settings.data.theme_favicon = "/images/favicon2.ico";
+      settings.data.theme_favicon_dark = "/images/favicon-dark2.ico";
+      settings.data.theme_logo = "/images/logo2.svg";
+      settings.data.theme_logo_dark = "/images/logo-dark2.svg";
+      settings.data.theme_primary_color = "#14b8a6";
+      settings.data.theme_rounded = false;
+
+      const saveChangesRequest = interceptIndefinitely(
+        "POST",
+        "api/v1/settings",
+        {
+          statusCode: 200,
+          body: settings,
+        },
+        "saveChangesRequest",
+      );
+
+      cy.get('[data-test="settings-save-button"]')
+        .should("include.text", "app.save")
+        .click();
+
+      // Check loading
+      cy.get('[data-test="overlay"]').should("be.visible");
+      cy.get('[data-test="settings-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          saveChangesRequest.sendResponse();
+        });
+    });
+
+    cy.wait("@saveChangesRequest").then((interception) => {
+      const formData = parseFormData(
+        interception.request.body,
+        interception.request.headers,
+      );
+
+      const uploadedFavicon = formData.get("theme_favicon_file");
+
+      expect(uploadedFavicon.name).to.eql("favicon.ico");
+      expect(uploadedFavicon.type).to.eql("image/vnd.microsoft.icon");
+      cy.fixture("files/favicon.ico", "base64").then((content) => {
+        uploadedFavicon.arrayBuffer().then((arrayBuffer) => {
+          const base64 = _arrayBufferToBase64(arrayBuffer);
+          expect(base64).to.eql(content);
+        });
+      });
+
+      expect(formData.get("theme_favicon")).to.eql(null);
+
+      const uploadedFaviconDark = formData.get("theme_favicon_dark_file");
+      expect(uploadedFaviconDark.name).to.eql("favicon-dark.ico");
+      expect(uploadedFaviconDark.type).to.eql("image/vnd.microsoft.icon");
+      cy.fixture("files/favicon-dark.ico", "base64").then((content) => {
+        uploadedFaviconDark.arrayBuffer().then((arrayBuffer) => {
+          const base64 = _arrayBufferToBase64(arrayBuffer);
+          expect(content).to.eql(base64);
+        });
+      });
+
+      expect(formData.get("theme_favicon_dark")).to.eql(null);
+
+      const uploadedLogo = formData.get("theme_logo_file");
+      expect(uploadedLogo.name).to.eql("logo.svg");
+      expect(uploadedLogo.type).to.eql("image/svg+xml");
+      cy.fixture("files/logo.svg", "base64").then((content) => {
+        uploadedLogo.arrayBuffer().then((arrayBuffer) => {
+          const base64 = _arrayBufferToBase64(arrayBuffer);
+          expect(content).to.eql(base64);
+        });
+      });
+
+      expect(formData.get("theme_logo")).to.eql(null);
+
+      const uploadedLogoDark = formData.get("theme_logo_dark_file");
+      expect(uploadedLogoDark.name).to.eql("logo-dark.svg");
+      expect(uploadedLogoDark.type).to.eql("image/svg+xml");
+      cy.fixture("files/logo-dark.svg", "base64").then((content) => {
+        uploadedLogoDark.arrayBuffer().then((arrayBuffer) => {
+          const base64 = _arrayBufferToBase64(arrayBuffer);
+          expect(content).to.eql(base64);
+        });
+      });
+
+      expect(formData.get("theme_logo_dark")).to.eql(null);
+
+      expect(formData.get("theme_primary_color")).to.equal("#14b8a6");
+      expect(formData.get("theme_rounded")).to.equal("0");
+    });
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="settings-save-button"]').should("not.be.disabled");
+
+    // Check that settings are shown correctly
+    cy.get('[data-test="favicon-field"]')
+      .find('[data-test="settings-image-preview"]')
+      .should("have.attr", "src")
+      .and("include", "/images/favicon2.ico");
+    cy.get('[data-test="favicon-dark-field"]')
+      .find('[data-test="settings-image-preview"]')
+      .should("have.attr", "src")
+      .and("include", "/images/favicon-dark2.ico");
+    cy.get('[data-test="logo-field"]')
+      .find('[data-test="settings-image-preview"]')
+      .should("have.attr", "src")
+      .and("include", "/images/logo2.svg");
+    cy.get('[data-test="logo-dark-field"]')
+      .find('[data-test="settings-image-preview"]')
+      .should("have.attr", "src")
+      .and("include", "/images/logo-dark2.svg");
+    cy.get('[data-test="primary-color-field"]').within(() => {
+      for (let i = 0; i < 10; i++) {
+        cy.get('[data-test="color-button"]')
+          .eq(i)
+          .should(i === 3 ? "have.class" : "not.have.class", "selected");
+      }
+
+      cy.get("#theme-primary-color").should("have.value", "#14b8a6");
+    });
+    cy.get("#theme-rounded").should("not.be.checked");
+
+    // Save changes again
+    cy.fixture("settings.json").then((settings) => {
+      settings.data.theme_favicon = "/images/favicon2.ico";
+      settings.data.theme_favicon_dark = "/images/favicon-dark2.ico";
+      settings.data.theme_logo = "/images/logo2.svg";
+      settings.data.theme_logo_dark = "/images/logo-dark2.svg";
+      settings.data.theme_primary_color = "#14b8a6";
+      settings.data.theme_rounded = false;
+
+      cy.intercept("POST", "api/v1/settings", {
+        statusCode: 200,
+        body: settings,
+      }).as("saveChangesRequest");
+
+      cy.get('[data-test="settings-save-button"]')
+        .should("include.text", "app.save")
+        .click();
+    });
+
+    cy.wait("@saveChangesRequest").then((interception) => {
+      const formData = parseFormData(
+        interception.request.body,
+        interception.request.headers,
+      );
+
+      expect(formData.get("theme_favicon_file")).to.eql(null);
+      expect(formData.get("theme_favicon")).to.eql("/images/favicon2.ico");
+
+      expect(formData.get("theme_favicon_dark_file")).to.eql(null);
+      expect(formData.get("theme_favicon_dark")).to.eql(
+        "/images/favicon-dark2.ico",
+      );
+
+      expect(formData.get("theme_logo_file")).to.eql(null);
+      expect(formData.get("theme_logo")).to.eql("/images/logo2.svg");
+
+      expect(formData.get("theme_logo_dark_file")).to.eql(null);
+      expect(formData.get("theme_logo_dark")).to.eql("/images/logo-dark2.svg");
+
+      expect(formData.get("theme_primary_color")).to.equal("#14b8a6");
+      expect(formData.get("theme_rounded")).to.equal("0");
+    });
+  });
+
+  it("change banner settings", function () {
+    cy.visit("/admin/settings");
+
+    cy.wait("@settingsRequest");
+
+    cy.contains("admin.settings.banner.title");
+
+    cy.get('[data-test="banner-enabled-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.enabled")
+      .and("include.text", "app.enable")
+      .within(() => {
+        cy.get("#banner-enabled").should("not.be.checked").click();
+      });
+
+    cy.get('[data-test="banner-preview-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.preview")
+      .within(() => {
+        cy.get('[data-test="app-banner"]').should("not.have.attr", "style");
+        cy.get('[data-test="app-banner"]').within(() => {
+          cy.get('[data-test="banner-title"]').should("not.exist");
+          cy.get('[data-test="banner-icon"]').should("not.exist");
+          cy.get('[data-test="banner-message"]').should("have.text", "");
+          cy.get('[data-test="banner-link-button"]').should("not.exist");
+        });
+      });
+
+    cy.get('[data-test="banner-title-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.banner_title")
+      .within(() => {
+        cy.get("#banner-title").should("have.value", "").type("Banner title");
+      });
+
+    // Check that banner preview was updated
+    cy.get('[data-test="app-banner"]').should("not.have.attr", "style");
+    cy.get('[data-test="app-banner"]').within(() => {
+      cy.get('[data-test="banner-title"]')
+        .should("be.visible")
+        .and("include.text", "Banner title");
+      cy.get('[data-test="banner-icon"]').should("not.exist");
+      cy.get('[data-test="banner-message"]').should("have.text", "");
+      cy.get('[data-test="banner-link-button"]').should("not.exist");
+    });
+
+    cy.get('[data-test="banner-icon-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.icon")
+      .and("include.text", "admin.settings.banner.icon_description")
+      .within(() => {
+        cy.get("#banner-icon")
+          .should("have.value", "")
+          .type("fa-solid fa-door-open");
+      });
+
+    // Check that banner preview was updated
+    cy.get('[data-test="app-banner"]').should("not.have.attr", "style");
+    cy.get('[data-test="app-banner"]').within(() => {
+      cy.get('[data-test="banner-title"]')
+        .should("be.visible")
+        .and("include.text", "Banner title");
+      cy.get('[data-test="banner-icon"]')
+        .should("be.visible")
+        .and("have.class", "fa-solid fa-door-open");
+      cy.get('[data-test="banner-message"]').should("have.text", "");
+      cy.get('[data-test="banner-link-button"]').should("not.exist");
+    });
+
+    cy.get('[data-test="banner-message-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.message")
+      .within(() => {
+        cy.get("#banner-message")
+          .should("have.value", "")
+          .type("Banner text message");
+      });
+
+    // Check that banner preview was updated
+    cy.get('[data-test="app-banner"]').should("not.have.attr", "style");
+    cy.get('[data-test="app-banner"]').within(() => {
+      cy.get('[data-test="banner-title"]')
+        .should("be.visible")
+        .and("include.text", "Banner title");
+      cy.get('[data-test="banner-icon"]')
+        .should("be.visible")
+        .and("have.class", "fa-solid fa-door-open");
+      cy.get('[data-test="banner-message"]')
+        .should("be.visible")
+        .and("have.text", "Banner text message");
+      cy.get('[data-test="banner-link-button"]').should("not.exist");
+    });
+
+    cy.get('[data-test="banner-link-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.link")
+      .within(() => {
+        cy.get("#banner-link").should("have.value", "").type("/rooms");
+      });
+
+    // Check that banner preview was updated
+    cy.get('[data-test="app-banner"]').should("not.have.attr", "style");
+    cy.get('[data-test="app-banner"]').within(() => {
+      cy.get('[data-test="banner-title"]')
+        .should("be.visible")
+        .and("include.text", "Banner title");
+      cy.get('[data-test="banner-icon"]')
+        .should("be.visible")
+        .and("have.class", "fa-solid fa-door-open");
+      cy.get('[data-test="banner-message"]')
+        .should("be.visible")
+        .and("have.text", "Banner text message");
+      cy.get('[data-test="banner-link-button"]')
+        .should("be.visible")
+        .and("have.attr", "href", "/rooms")
+        .and("have.attr", "target", "_blank")
+        .and("have.text", "/rooms");
+      cy.get('[data-test="banner-link-button"]')
+        .find("button")
+        .should("have.attr", "data-p-severity", "primary")
+        .and("not.have.class", "p-0 underline")
+        .and("not.have.attr", "style");
+    });
+
+    cy.get('[data-test="banner-link-text-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.link_text")
+      .within(() => {
+        cy.get("#banner-link-text").should("have.value", "").type("Rooms");
+      });
+
+    // Check that banner preview was updated
+    cy.get('[data-test="app-banner"]').should("not.have.attr", "style");
+    cy.get('[data-test="app-banner"]').within(() => {
+      cy.get('[data-test="banner-title"]')
+        .should("be.visible")
+        .and("include.text", "Banner title");
+      cy.get('[data-test="banner-icon"]')
+        .should("be.visible")
+        .and("have.class", "fa-solid fa-door-open");
+      cy.get('[data-test="banner-message"]')
+        .should("be.visible")
+        .and("have.text", "Banner text message");
+      cy.get('[data-test="banner-link-button"]')
+        .should("be.visible")
+        .and("have.attr", "href", "/rooms")
+        .and("have.attr", "target", "_blank")
+        .and("have.text", "Rooms");
+      cy.get('[data-test="banner-link-button"]')
+        .find("button")
+        .should("have.attr", "data-p-severity", "primary")
+        .and("not.have.class", "p-0 underline")
+        .and("not.have.attr", "style");
+    });
+
+    cy.get('[data-test="banner-link-style-dropdown-items"]').should(
+      "not.exist",
+    );
+    cy.get('[data-test="banner-link-style-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.link_style")
+      .within(() => {
+        cy.get('[data-test="banner-link-style-dropdown"]')
+          .should("have.text", "app.button_styles.primary")
+          .click();
+      });
+
+    cy.get('[data-test="banner-link-style-dropdown-items"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="banner-link-style-dropdown-option"]').should(
+          "have.length",
+          3,
+        );
+
+        cy.get('[data-test="banner-link-style-dropdown-option"]')
+          .eq(0)
+          .should("have.text", "app.button_styles.primary")
+          .should("have.attr", "aria-selected", "true");
+        cy.get('[data-test="banner-link-style-dropdown-option"]')
+          .eq(1)
+          .should("have.text", "app.button_styles.secondary");
+        cy.get('[data-test="banner-link-style-dropdown-option"]')
+          .eq(2)
+          .should("have.text", "app.button_styles.link");
+
+        cy.get('[data-test="banner-link-style-dropdown-option"]').eq(2).click();
+      });
+
+    cy.get('[data-test="banner-link-style-dropdown-items"]').should(
+      "not.exist",
+    );
+    cy.get('[data-test="banner-link-style-dropdown"]').should(
+      "have.text",
+      "app.button_styles.link",
+    );
+
+    // Check that banner preview was updated
+    cy.get('[data-test="app-banner"]').should("not.have.attr", "style");
+    cy.get('[data-test="app-banner"]').within(() => {
+      cy.get('[data-test="banner-title"]')
+        .should("be.visible")
+        .and("include.text", "Banner title");
+      cy.get('[data-test="banner-icon"]')
+        .should("be.visible")
+        .and("have.class", "fa-solid fa-door-open");
+      cy.get('[data-test="banner-message"]')
+        .should("be.visible")
+        .and("have.text", "Banner text message");
+      cy.get('[data-test="banner-link-button"]')
+        .should("be.visible")
+        .and("have.attr", "href", "/rooms")
+        .and("have.attr", "target", "_blank")
+        .and("have.text", "Rooms");
+      cy.get('[data-test="banner-link-button"]')
+        .find("button")
+        .should("have.attr", "data-p-severity", "link")
+        .and("have.class", "p-0 underline")
+        .and("not.have.attr", "style");
+    });
+
+    cy.get('[data-test="banner-link-target-dropdown-items"]').should(
+      "not.exist",
+    );
+    cy.get('[data-test="banner-link-target-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.link_target")
+      .within(() => {
+        cy.get('[data-test="banner-link-target-dropdown"]')
+          .should("have.text", "app.link_targets.blank")
+          .click();
+      });
+
+    cy.get('[data-test="banner-link-target-dropdown-items"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="banner-link-target-dropdown-option"]').should(
+          "have.length",
+          2,
+        );
+
+        cy.get('[data-test="banner-link-target-dropdown-option"]')
+          .eq(0)
+          .should("have.text", "app.link_targets.blank")
+          .should("have.attr", "aria-selected", "true");
+        cy.get('[data-test="banner-link-target-dropdown-option"]')
+          .eq(1)
+          .should("have.text", "app.link_targets.self");
+
+        cy.get('[data-test="banner-link-target-dropdown-option"]')
+          .eq(1)
+          .click();
+      });
+
+    cy.get('[data-test="banner-link-target-dropdown-items"]').should(
+      "not.exist",
+    );
+    cy.get('[data-test="banner-link-target-dropdown"]').should(
+      "have.text",
+      "app.link_targets.self",
+    );
+
+    // Check that banner preview was updated
+    cy.get('[data-test="app-banner"]').should("not.have.attr", "style");
+    cy.get('[data-test="app-banner"]').within(() => {
+      cy.get('[data-test="banner-title"]')
+        .should("be.visible")
+        .and("include.text", "Banner title");
+      cy.get('[data-test="banner-icon"]')
+        .should("be.visible")
+        .and("have.class", "fa-solid fa-door-open");
+      cy.get('[data-test="banner-message"]')
+        .should("be.visible")
+        .and("have.text", "Banner text message");
+      cy.get('[data-test="banner-link-button"]')
+        .should("be.visible")
+        .and("have.attr", "href", "/rooms")
+        .and("have.attr", "target", "_self")
+        .and("have.text", "Rooms");
+      cy.get('[data-test="banner-link-button"]')
+        .find("button")
+        .should("have.attr", "data-p-severity", "link")
+        .and("have.class", "p-0 underline")
+        .and("not.have.attr", "style");
+    });
+
+    cy.get('[data-test="banner-color-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.color")
+      .and("include.text", "admin.room_types.custom_color")
+      .within(() => {
+        cy.get('[data-test="color-button"]').should("have.length", 2);
+
+        for (let i = 0; i < 2; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should("have.attr", "role", "button")
+            .and(
+              "not.have.class",
+              "pointer-events-none cursor-not-allowed opacity-80",
+            )
+            .and("not.have.class", "selected");
+        }
+
+        // Clear custom color and check that color buttons are not selected
+        cy.get("#banner-color")
+          .should("have.value", "")
+          .and("not.be.disabled")
+          .type("#6366f1");
+
+        for (let i = 0; i < 2; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should("not.have.class", "selected");
+        }
+
+        // Set custom color and check that color buttons is selected
+        cy.get("#banner-color").clear();
+        cy.get("#banner-color").type("#FFFFFF");
+
+        for (let i = 0; i < 2; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should(i === 0 ? "have.class" : "not.have.class", "selected");
+        }
+      });
+
+    cy.get('[data-test="app-banner"]')
+      .should("have.attr", "style")
+      .and("include", "color: rgb(255, 255, 255);")
+      .and("not.include", "background-color");
+    cy.get('[data-test="app-banner"]').within(() => {
+      cy.get('[data-test="banner-title"]')
+        .should("be.visible")
+        .and("include.text", "Banner title");
+      cy.get('[data-test="banner-icon"]')
+        .should("be.visible")
+        .and("have.class", "fa-solid fa-door-open");
+      cy.get('[data-test="banner-message"]')
+        .should("be.visible")
+        .and("have.text", "Banner text message");
+      cy.get('[data-test="banner-link-button"]')
+        .should("be.visible")
+        .and("have.attr", "href", "/rooms")
+        .and("have.attr", "target", "_self")
+        .and("have.text", "Rooms");
+      cy.get('[data-test="banner-link-button"]')
+        .find("button")
+        .should("have.attr", "data-p-severity", "link")
+        .and("have.class", "p-0 underline")
+        .and("have.attr", "style")
+        .and("include", "color: rgb(255, 255, 255)");
+    });
+
+    cy.get('[data-test="banner-background-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.background")
+      .and("include.text", "admin.room_types.custom_color")
+      .within(() => {
+        cy.get('[data-test="color-button"]').should("have.length", 10);
+
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should("have.attr", "role", "button")
+            .and(
+              "not.have.class",
+              "pointer-events-none cursor-not-allowed opacity-80",
+            )
+            .and("not.have.class", "selected");
+        }
+
+        // Clear custom color and check that color buttons are not selected
+        cy.get("#banner-background")
+          .should("have.value", "")
+          .and("not.be.disabled")
+          .type("#FFFFFF");
+
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should("not.have.class", "selected");
+        }
+
+        // Set custom color and check that color buttons is selected
+        cy.get("#banner-background").clear();
+        cy.get("#banner-background").type("#6366f1");
+
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should(i === 0 ? "have.class" : "not.have.class", "selected");
+        }
+
+        cy.get('[data-test="color-button"]').eq(7).click();
+
+        cy.get("#banner-background").should("have.value", "#ef4444");
+
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should(i === 7 ? "have.class" : "not.have.class", "selected");
+        }
+      });
+
+    // Check that banner preview was updated
+    cy.get('[data-test="app-banner"]')
+      .should("have.attr", "style")
+      .and("include", "color: rgb(255, 255, 255);")
+      .and("include", "background-color: rgb(239, 68, 68);");
+    cy.get('[data-test="app-banner"]').within(() => {
+      cy.get('[data-test="banner-title"]')
+        .should("be.visible")
+        .and("include.text", "Banner title");
+      cy.get('[data-test="banner-icon"]')
+        .should("be.visible")
+        .and("have.class", "fa-solid fa-door-open");
+      cy.get('[data-test="banner-message"]')
+        .should("be.visible")
+        .and("have.text", "Banner text message");
+      cy.get('[data-test="banner-link-button"]')
+        .should("be.visible")
+        .and("have.attr", "href", "/rooms")
+        .and("have.attr", "target", "_self")
+        .and("have.text", "Rooms");
+      cy.get('[data-test="banner-link-button"]')
+        .find("button")
+        .should("have.attr", "data-p-severity", "link")
+        .and("have.class", "p-0 underline")
+        .and("have.attr", "style")
+        .and("include", "color: rgb(255, 255, 255)");
+    });
+
+    // Save changes
+    cy.fixture("settings.json").then((settings) => {
+      settings.data.banner_enabled = true;
+      settings.data.banner_title = "Banner title";
+      settings.data.banner_icon = "fa-solid fa-door-open";
+      settings.data.banner_message = "Banner text message";
+      settings.data.banner_link = "/rooms";
+      settings.data.banner_link_text = "Rooms";
+      settings.data.banner_link_style = "link";
+      settings.data.banner_link_target = "self";
+      settings.data.banner_color = "#FFFFFF";
+      settings.data.banner_background = "#ef4444";
+
+      const saveChangesRequest = interceptIndefinitely(
+        "POST",
+        "api/v1/settings",
+        {
+          statusCode: 200,
+          body: settings,
+        },
+        "saveChangesRequest",
+      );
+
+      cy.get('[data-test="settings-save-button"]')
+        .should("include.text", "app.save")
+        .click();
+
+      // Check loading
+      cy.get('[data-test="overlay"]').should("be.visible");
+      cy.get('[data-test="settings-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          saveChangesRequest.sendResponse();
+        });
+    });
+
+    cy.wait("@saveChangesRequest").then((interception) => {
+      const formData = parseFormData(
+        interception.request.body,
+        interception.request.headers,
+      );
+
+      expect(formData.get("banner_enabled")).to.equal("1");
+      expect(formData.get("banner_title")).to.equal("Banner title");
+      expect(formData.get("banner_icon")).to.equal("fa-solid fa-door-open");
+      expect(formData.get("banner_message")).to.equal("Banner text message");
+      expect(formData.get("banner_link")).to.equal("/rooms");
+      expect(formData.get("banner_link_text")).to.equal("Rooms");
+      expect(formData.get("banner_link_style")).to.equal("link");
+      expect(formData.get("banner_link_target")).to.equal("self");
+      expect(formData.get("banner_color")).to.equal("#FFFFFF");
+      expect(formData.get("banner_background")).to.equal("#ef4444");
+    });
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="settings-save-button"]').should("not.be.disabled");
+
+    // Check that settings are shown correctly
+    cy.get("#banner-enabled").should("be.checked");
+
+    // Check that banner preview is shown correctly
+    cy.get('[data-test="app-banner"]')
+      .should("have.attr", "style")
+      .and("include", "color: rgb(255, 255, 255);")
+      .and("include", "background-color: rgb(239, 68, 68);");
+    cy.get('[data-test="app-banner"]').within(() => {
+      cy.get('[data-test="banner-title"]')
+        .should("be.visible")
+        .and("include.text", "Banner title");
+      cy.get('[data-test="banner-icon"]')
+        .should("be.visible")
+        .and("have.class", "fa-solid fa-door-open");
+      cy.get('[data-test="banner-message"]')
+        .should("be.visible")
+        .and("have.text", "Banner text message");
+      cy.get('[data-test="banner-link-button"]')
+        .should("be.visible")
+        .and("have.attr", "href", "/rooms")
+        .and("have.attr", "target", "_self")
+        .and("have.text", "Rooms");
+      cy.get('[data-test="banner-link-button"]')
+        .find("button")
+        .should("have.attr", "data-p-severity", "link")
+        .and("have.class", "p-0 underline")
+        .and("have.attr", "style")
+        .and("include", "color: rgb(255, 255, 255)");
+    });
+
+    cy.get("#banner-title").should("have.value", "Banner title");
+    cy.get("#banner-icon").should("have.value", "fa-solid fa-door-open");
+    cy.get("#banner-message").should("have.value", "Banner text message");
+    cy.get("#banner-link").should("have.value", "/rooms");
+    cy.get("#banner-link-text").should("have.value", "Rooms");
+    cy.get('[data-test="banner-link-style-dropdown"]').should(
+      "have.text",
+      "app.button_styles.link",
+    );
+    cy.get('[data-test="banner-link-target-dropdown"]').should(
+      "have.text",
+      "app.link_targets.self",
+    );
+    cy.get('[data-test="banner-color-field"]').within(() => {
+      cy.get("#banner-color").should("have.value", "#FFFFFF");
+
+      for (let i = 0; i < 2; i++) {
+        cy.get('[data-test="color-button"]')
+          .eq(i)
+          .should(i === 0 ? "have.class" : "not.have.class", "selected");
+      }
+    });
+
+    cy.get('[data-test="banner-background-field"]').within(() => {
+      cy.get("#banner-background").should("have.value", "#ef4444");
+
+      for (let i = 0; i < 10; i++) {
+        cy.get('[data-test="color-button"]')
+          .eq(i)
+          .should(i === 7 ? "have.class" : "not.have.class", "selected");
+      }
+    });
+
+    // Change settings again (Clear inputs and disable banner)
+    cy.get("#banner-enabled").click();
+
+    // Check that banner preview is still shown correctly
+    cy.get('[data-test="app-banner"]')
+      .should("have.attr", "style")
+      .and("include", "color: rgb(255, 255, 255);")
+      .and("include", "background-color: rgb(239, 68, 68);");
+    cy.get('[data-test="app-banner"]').within(() => {
+      cy.get('[data-test="banner-title"]')
+        .should("be.visible")
+        .and("include.text", "Banner title");
+      cy.get('[data-test="banner-icon"]')
+        .should("be.visible")
+        .and("have.class", "fa-solid fa-door-open");
+      cy.get('[data-test="banner-message"]')
+        .should("be.visible")
+        .and("have.text", "Banner text message");
+      cy.get('[data-test="banner-link-button"]')
+        .should("be.visible")
+        .and("have.attr", "href", "/rooms")
+        .and("have.attr", "target", "_self")
+        .and("have.text", "Rooms");
+      cy.get('[data-test="banner-link-button"]')
+        .find("button")
+        .should("have.attr", "data-p-severity", "link")
+        .and("have.class", "p-0 underline")
+        .and("have.attr", "style")
+        .and("include", "color: rgb(255, 255, 255)");
+    });
+
+    cy.get("#banner-title").clear();
+    cy.get("#banner-icon").clear();
+    cy.get("#banner-message").clear();
+    cy.get("#banner-link").clear();
+    cy.get("#banner-link-text").clear();
+    cy.get("#banner-color").clear();
+    cy.get("#banner-background").clear();
+
+    // Check that banner preview is reset
+    cy.get('[data-test="banner-preview-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.preview")
+      .within(() => {
+        cy.get('[data-test="app-banner"]')
+          .should("have.attr", "style")
+          .and("not.include", "background-color")
+          .and("not.include", "color");
+        cy.get('[data-test="app-banner"]').within(() => {
+          cy.get('[data-test="banner-title"]').should("not.exist");
+          cy.get('[data-test="banner-icon"]').should("not.exist");
+          cy.get('[data-test="banner-message"]').should("have.text", "");
+          cy.get('[data-test="banner-link-button"]').should("not.exist");
+        });
+      });
+
+    // Save changes
+    cy.fixture("settings.json").then((settings) => {
+      settings.data.banner_link_style = "link";
+      settings.data.banner_link_target = "self";
+
+      cy.intercept("POST", "api/v1/settings", {
+        statusCode: 200,
+        body: settings,
+      }).as("saveChangesRequest");
+    });
+
+    cy.get('[data-test="settings-save-button"]')
+      .should("include.text", "app.save")
+      .click();
+
+    cy.wait("@saveChangesRequest").then((interception) => {
+      const formData = parseFormData(
+        interception.request.body,
+        interception.request.headers,
+      );
+
+      expect(formData.get("banner_enabled")).to.equal("0");
+      expect(formData.get("banner_title")).to.equal("");
+      expect(formData.get("banner_icon")).to.equal("");
+      expect(formData.get("banner_message")).to.equal("");
+      expect(formData.get("banner_link")).to.equal("");
+      expect(formData.get("banner_link_text")).to.equal("");
+      expect(formData.get("banner_link_style")).to.equal("link");
+      expect(formData.get("banner_link_target")).to.equal("self");
+      expect(formData.get("banner_color")).to.equal("");
+      expect(formData.get("banner_background")).to.equal("");
+    });
+
+    // Check that settings are shown correctly
+    cy.get("#banner-enabled").should("not.be.checked");
+    cy.get('[data-test="app-banner"]')
+      .should("have.attr", "style")
+      .and("not.include", "background-color")
+      .and("not.include", "color");
+    cy.get('[data-test="app-banner"]').within(() => {
+      cy.get('[data-test="banner-title"]').should("not.exist");
+      cy.get('[data-test="banner-icon"]').should("not.exist");
+      cy.get('[data-test="banner-message"]').should("have.text", "");
+      cy.get('[data-test="banner-link-button"]').should("not.exist");
+    });
+
+    cy.get("#banner-title").should("have.value", "");
+    cy.get("#banner-icon").should("have.value", "");
+    cy.get("#banner-message").should("have.value", "");
+    cy.get("#banner-link").should("have.value", "");
+    cy.get("#banner-link-text").should("have.value", "");
+    cy.get('[data-test="banner-link-style-dropdown"]').should(
+      "have.text",
+      "app.button_styles.link",
+    );
+    cy.get('[data-test="banner-link-target-dropdown"]').should(
+      "have.text",
+      "app.link_targets.self",
+    );
+    cy.get('[data-test="banner-color-field"]').within(() => {
+      cy.get("#banner-color").should("have.value", "");
+
+      for (let i = 0; i < 2; i++) {
+        cy.get('[data-test="color-button"]')
+          .eq(i)
+          .should("not.have.class", "selected");
+      }
+    });
+
+    cy.get('[data-test="banner-background-field"]').within(() => {
+      cy.get("#banner-background").should("have.value", "");
+
+      for (let i = 0; i < 10; i++) {
+        cy.get('[data-test="color-button"]')
+          .eq(i)
+          .should("not.have.class", "selected");
+      }
+    });
+  });
+
+  it("change room settings", function () {
+    cy.visit("/admin/settings");
+
+    cy.wait("@settingsRequest");
+
+    cy.contains("app.rooms");
+
+    cy.get('[data-test="room-limit-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.room_limit.title")
+      .and("include.text", "admin.settings.room_limit.description")
+      .within(() => {
+        cy.get('[data-test="room-limit-mode-unlimited-field"]')
+          .should("be.visible")
+          .should("include.text", "app.unlimited")
+          .within(() => {
+            cy.get("#room-limit-mode-unlimited")
+              .should("be.checked")
+              .and("not.be.disabled");
+          });
+
+        cy.get("#room-limit-custom").should("not.exist");
+
+        cy.get('[data-test="room-limit-mode-custom-field"]')
+          .should("be.visible")
+          .should("include.text", "admin.roles.room_limit.custom")
+          .within(() => {
+            cy.get("#room-limit-mode-custom").should("not.be.checked").click();
+          });
+
+        cy.get("#room-limit-custom")
+          .should("be.visible")
+          .and("have.value", "0")
+          .clear();
+        cy.get("#room-limit-custom").type("10");
+      });
+
+    // Room token expiration
+    cy.get('[data-test="room-token-expiration-dropdown-items"]').should(
+      "not.exist",
+    );
+    cy.get('[data-test="room-token-expiration-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.room_token_expiration.title")
+      .and("include.text", "admin.settings.room_token_expiration.description")
+      .within(() => {
+        cy.get('[data-test="room-token-expiration-dropdown"]')
+          .should("have.text", "app.unlimited")
+          .click();
+      });
+
+    cy.get('[data-test="room-token-expiration-dropdown-items"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="room-token-expiration-dropdown-option"]').should(
+          "have.length",
+          8,
+        );
+
+        cy.get('[data-test="room-token-expiration-dropdown-option"]')
+          .eq(0)
+          .should("have.text", "admin.settings.one_week");
+        cy.get('[data-test="room-token-expiration-dropdown-option"]')
+          .eq(1)
+          .should("have.text", "admin.settings.two_weeks");
+        cy.get('[data-test="room-token-expiration-dropdown-option"]')
+          .eq(2)
+          .should("have.text", "admin.settings.one_month");
+        cy.get('[data-test="room-token-expiration-dropdown-option"]')
+          .eq(3)
+          .should("have.text", "admin.settings.three_month");
+        cy.get('[data-test="room-token-expiration-dropdown-option"]')
+          .eq(4)
+          .should("have.text", "admin.settings.six_month");
+        cy.get('[data-test="room-token-expiration-dropdown-option"]')
+          .eq(5)
+          .should("have.text", "admin.settings.one_year");
+        cy.get('[data-test="room-token-expiration-dropdown-option"]')
+          .eq(6)
+          .should("have.text", "admin.settings.two_years");
+        cy.get('[data-test="room-token-expiration-dropdown-option"]')
+          .eq(7)
+          .should("have.text", "app.unlimited");
+        cy.get('[data-test="room-token-expiration-dropdown-option"]')
+          .eq(7)
+          .should("have.attr", "aria-selected", "true");
+
+        cy.get('[data-test="room-token-expiration-dropdown-option"]')
+          .eq(1)
+          .click();
+      });
+
+    cy.get('[data-test="room-token-expiration-dropdown-items"]').should(
+      "not.exist",
+    );
+    cy.get('[data-test="room-token-expiration-dropdown"]').should(
+      "have.text",
+      "admin.settings.two_weeks",
+    );
+
+    // Auto delete deadline
+    cy.get('[data-test="room-auto-delete-deadline-dropdown-items"]').should(
+      "not.exist",
+    );
+    cy.get('[data-test="room-auto-delete-deadline-period-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "admin.settings.room_auto_delete.deadline_period.title",
+      )
+      .and(
+        "include.text",
+        "admin.settings.room_auto_delete.deadline_period.description",
+      )
+      .within(() => {
+        cy.get('[data-test="room-auto-delete-deadline-dropdown"]')
+          .should("have.text", "admin.settings.two_weeks")
+          .click();
+      });
+
+    cy.get('[data-test="room-auto-delete-deadline-dropdown-items"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get(
+          '[data-test="room-auto-delete-deadline-dropdown-option"]',
+        ).should("have.length", 3);
+
+        cy.get('[data-test="room-auto-delete-deadline-dropdown-option"]')
+          .eq(0)
+          .should("have.text", "admin.settings.one_week");
+        cy.get('[data-test="room-auto-delete-deadline-dropdown-option"]')
+          .eq(1)
+          .should("have.text", "admin.settings.two_weeks");
+        cy.get('[data-test="room-auto-delete-deadline-dropdown-option"]')
+          .eq(2)
+          .should("have.text", "admin.settings.one_month");
+        cy.get('[data-test="room-auto-delete-deadline-dropdown-option"]')
+          .eq(1)
+          .should("have.attr", "aria-selected", "true");
+
+        cy.get('[data-test="room-auto-delete-deadline-dropdown-option"]')
+          .eq(0)
+          .click();
+      });
+
+    cy.get('[data-test="room-auto-delete-deadline-dropdown-items"]').should(
+      "not.exist",
+    );
+    cy.get('[data-test="room-auto-delete-deadline-dropdown"]').should(
+      "have.text",
+      "admin.settings.one_week",
+    );
+
+    // Auto delete inactive period
+    cy.get('[data-test="room-auto-delete-inactive-dropdown-items"]').should(
+      "not.exist",
+    );
+    cy.get('[data-test="room-auto-delete-inactive-period-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "admin.settings.room_auto_delete.inactive_period.title",
+      )
+      .and(
+        "include.text",
+        "admin.settings.room_auto_delete.inactive_period.description",
+      )
+      .within(() => {
+        cy.get('[data-test="room-auto-delete-inactive-dropdown"]')
+          .should("have.text", "app.unlimited")
+          .click();
+      });
+
+    cy.get('[data-test="room-auto-delete-inactive-dropdown-items"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get(
+          '[data-test="room-auto-delete-inactive-dropdown-option"]',
+        ).should("have.length", 8);
+
+        cy.get('[data-test="room-auto-delete-inactive-dropdown-option"]')
+          .eq(0)
+          .should("have.text", "admin.settings.one_week");
+        cy.get('[data-test="room-auto-delete-inactive-dropdown-option"]')
+          .eq(1)
+          .should("have.text", "admin.settings.two_weeks");
+        cy.get('[data-test="room-auto-delete-inactive-dropdown-option"]')
+          .eq(2)
+          .should("have.text", "admin.settings.one_month");
+        cy.get('[data-test="room-auto-delete-inactive-dropdown-option"]')
+          .eq(3)
+          .should("have.text", "admin.settings.three_month");
+        cy.get('[data-test="room-auto-delete-inactive-dropdown-option"]')
+          .eq(4)
+          .should("have.text", "admin.settings.six_month");
+        cy.get('[data-test="room-auto-delete-inactive-dropdown-option"]')
+          .eq(5)
+          .should("have.text", "admin.settings.one_year");
+        cy.get('[data-test="room-auto-delete-inactive-dropdown-option"]')
+          .eq(6)
+          .should("have.text", "admin.settings.two_years");
+        cy.get('[data-test="room-auto-delete-inactive-dropdown-option"]')
+          .eq(7)
+          .should("have.text", "app.unlimited");
+        cy.get('[data-test="room-auto-delete-inactive-dropdown-option"]')
+          .eq(7)
+          .should("have.attr", "aria-selected", "true");
+
+        cy.get('[data-test="room-auto-delete-inactive-dropdown-option"]')
+          .eq(2)
+          .click();
+      });
+
+    cy.get('[data-test="room-auto-delete-inactive-dropdown-items"]').should(
+      "not.exist",
+    );
+    cy.get('[data-test="room-auto-delete-inactive-dropdown"]').should(
+      "have.text",
+      "admin.settings.one_month",
+    );
+
+    // Auto delete never used period
+    cy.get('[data-test="room-auto-delete-never-used-dropdown-items"]').should(
+      "not.exist",
+    );
+    cy.get('[data-test="room-auto-delete-never-used-period-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "admin.settings.room_auto_delete.never_used_period.title",
+      )
+      .and(
+        "include.text",
+        "admin.settings.room_auto_delete.never_used_period.description",
+      )
+      .within(() => {
+        cy.get('[data-test="room-auto-delete-never-used-dropdown"]')
+          .should("have.text", "app.unlimited")
+          .click();
+      });
+
+    cy.get('[data-test="room-auto-delete-never-used-dropdown-items"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get(
+          '[data-test="room-auto-delete-never-used-dropdown-option"]',
+        ).should("have.length", 8);
+
+        cy.get('[data-test="room-auto-delete-never-used-dropdown-option"]')
+          .eq(0)
+          .should("have.text", "admin.settings.one_week");
+        cy.get('[data-test="room-auto-delete-never-used-dropdown-option"]')
+          .eq(1)
+          .should("have.text", "admin.settings.two_weeks");
+        cy.get('[data-test="room-auto-delete-never-used-dropdown-option"]')
+          .eq(2)
+          .should("have.text", "admin.settings.one_month");
+        cy.get('[data-test="room-auto-delete-never-used-dropdown-option"]')
+          .eq(3)
+          .should("have.text", "admin.settings.three_month");
+        cy.get('[data-test="room-auto-delete-never-used-dropdown-option"]')
+          .eq(4)
+          .should("have.text", "admin.settings.six_month");
+        cy.get('[data-test="room-auto-delete-never-used-dropdown-option"]')
+          .eq(5)
+          .should("have.text", "admin.settings.one_year");
+        cy.get('[data-test="room-auto-delete-never-used-dropdown-option"]')
+          .eq(6)
+          .should("have.text", "admin.settings.two_years");
+        cy.get('[data-test="room-auto-delete-never-used-dropdown-option"]')
+          .eq(7)
+          .should("have.text", "app.unlimited");
+        cy.get('[data-test="room-auto-delete-never-used-dropdown-option"]')
+          .eq(7)
+          .should("have.attr", "aria-selected", "true");
+
+        cy.get('[data-test="room-auto-delete-never-used-dropdown-option"]')
+          .eq(6)
+          .click();
+      });
+
+    cy.get('[data-test="room-auto-delete-never-used-dropdown-items"]').should(
+      "not.exist",
+    );
+    cy.get('[data-test="room-auto-delete-never-used-dropdown"]').should(
+      "have.text",
+      "admin.settings.two_years",
+    );
+
+    cy.get('[data-test="room-file-terms-of-use-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.room_file_terms_of_use.title")
+      .and("include.text", "admin.settings.room_file_terms_of_use.description")
+      .within(() => {
+        cy.get("#room-file-terms-of-use")
+          .should("be.visible")
+          .and("have.value", "Room file terms of use")
+          .clear();
+        cy.get("#room-file-terms-of-use").type("New room file terms of use");
+      });
+
+    // Save changes
+    cy.fixture("settings.json").then((settings) => {
+      settings.data.room_limit = 10;
+      settings.data.room_token_expiration = 14;
+      settings.data.room_auto_delete_deadline_period = 7;
+      settings.data.room_auto_delete_inactive_period = 30;
+      settings.data.room_auto_delete_never_used_period = 730;
+      settings.data.room_file_terms_of_use = "New room file terms of use";
+
+      const saveChangesRequest = interceptIndefinitely(
+        "POST",
+        "api/v1/settings",
+        {
+          statusCode: 200,
+          body: settings,
+        },
+        "saveChangesRequest",
+      );
+
+      cy.get('[data-test="settings-save-button"]')
+        .should("include.text", "app.save")
+        .click();
+
+      // Check loading
+      cy.get('[data-test="overlay"]').should("be.visible");
+      cy.get('[data-test="settings-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          saveChangesRequest.sendResponse();
+        });
+    });
+
+    cy.wait("@saveChangesRequest").then((interception) => {
+      const formData = parseFormData(
+        interception.request.body,
+        interception.request.headers,
+      );
+
+      expect(formData.get("room_limit")).to.equal("10");
+      expect(formData.get("room_token_expiration")).to.equal("14");
+      expect(formData.get("room_auto_delete_deadline_period")).to.equal("7");
+      expect(formData.get("room_auto_delete_inactive_period")).to.equal("30");
+      expect(formData.get("room_auto_delete_never_used_period")).to.equal(
+        "730",
+      );
+      expect(formData.get("room_file_terms_of_use")).to.equal(
+        "New room file terms of use",
+      );
+    });
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="settings-save-button"]').should("not.be.disabled");
+
+    // Check that settings are shown correctly
+    cy.get("#room-limit-mode-unlimited")
+      .should("not.be.checked")
+      .and("not.be.disabled");
+    cy.get("#room-limit-mode-custom")
+      .should("be.checked")
+      .and("not.be.disabled");
+    cy.get("#room-limit-custom").should("have.value", "10");
+    cy.get('[data-test="room-token-expiration-dropdown"]').should(
+      "have.text",
+      "admin.settings.two_weeks",
+    );
+    cy.get('[data-test="room-auto-delete-deadline-dropdown"]').should(
+      "have.text",
+      "admin.settings.one_week",
+    );
+    cy.get('[data-test="room-auto-delete-inactive-dropdown"]').should(
+      "have.text",
+      "admin.settings.one_month",
+    );
+    cy.get('[data-test="room-auto-delete-never-used-dropdown"]').should(
+      "have.text",
+      "admin.settings.two_years",
+    );
+    cy.get("#room-file-terms-of-use").should(
+      "have.value",
+      "New room file terms of use",
+    );
+
+    // Change settings again (Clear inputs and change room limit to unlimited)
+    cy.get("#room-limit-mode-unlimited").click();
+    cy.get("#room-limit-custom").should("not.exist");
+
+    cy.get("#room-file-terms-of-use").clear();
+
+    // Save changes
+    cy.fixture("settings.json").then((settings) => {
+      settings.data.room_limit = -1;
+      settings.data.room_token_expiration = 14;
+      settings.data.room_auto_delete_deadline_period = 7;
+      settings.data.room_auto_delete_inactive_period = 30;
+      settings.data.room_auto_delete_never_used_period = 730;
+      settings.data.room_file_terms_of_use = null;
+
+      cy.intercept("POST", "api/v1/settings", {
+        statusCode: 200,
+        body: settings,
+      }).as("saveChangesRequest");
+    });
+
+    cy.get('[data-test="settings-save-button"]')
+      .should("include.text", "app.save")
+      .click();
+
+    cy.wait("@saveChangesRequest").then((interception) => {
+      const formData = parseFormData(
+        interception.request.body,
+        interception.request.headers,
+      );
+
+      expect(formData.get("room_limit")).to.equal("-1");
+      expect(formData.get("room_token_expiration")).to.equal("14");
+      expect(formData.get("room_auto_delete_deadline_period")).to.equal("7");
+      expect(formData.get("room_auto_delete_inactive_period")).to.equal("30");
+      expect(formData.get("room_auto_delete_never_used_period")).to.equal(
+        "730",
+      );
+      expect(formData.get("room_file_terms_of_use")).to.equal("");
+    });
+
+    // Check that settings are shown correctly
+    cy.get("#room-limit-mode-unlimited")
+      .should("be.checked")
+      .and("not.be.disabled");
+    cy.get("#room-limit-mode-custom")
+      .should("not.be.checked")
+      .and("not.be.disabled");
+
+    cy.get("#room-limit-custom").should("not.exist");
+    cy.get('[data-test="room-token-expiration-dropdown"]').should(
+      "have.text",
+      "admin.settings.two_weeks",
+    );
+    cy.get('[data-test="room-auto-delete-deadline-dropdown"]').should(
+      "have.text",
+      "admin.settings.one_week",
+    );
+    cy.get('[data-test="room-auto-delete-inactive-dropdown"]').should(
+      "have.text",
+      "admin.settings.one_month",
+    );
+    cy.get('[data-test="room-auto-delete-never-used-dropdown"]').should(
+      "have.text",
+      "admin.settings.two_years",
+    );
+    cy.get("#room-file-terms-of-use").should("have.value", "");
+  });
+
+  it("change user settings", function () {
+    cy.visit("/admin/settings");
+
+    cy.wait("@settingsRequest");
+
+    cy.contains("app.users");
+
+    cy.get('[data-test="password-change-allowed-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.password_change_allowed")
+      .within(() => {
+        cy.get("#password-change-allowed").should("be.checked").click();
+      });
+
+    // Save changes
+    cy.fixture("settings.json").then((settings) => {
+      settings.data.user_password_change_allowed = false;
+
+      const saveChangesRequest = interceptIndefinitely(
+        "POST",
+        "api/v1/settings",
+        {
+          statusCode: 200,
+          body: settings,
+        },
+        "saveChangesRequest",
+      );
+
+      cy.get('[data-test="settings-save-button"]')
+        .should("include.text", "app.save")
+        .click();
+
+      // Check loading
+      cy.get('[data-test="overlay"]').should("be.visible");
+      cy.get('[data-test="settings-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          saveChangesRequest.sendResponse();
+        });
+    });
+
+    cy.wait("@saveChangesRequest").then((interception) => {
+      const formData = parseFormData(
+        interception.request.body,
+        interception.request.headers,
+      );
+
+      expect(formData.get("user_password_change_allowed")).to.equal("0");
+    });
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="settings-save-button"]').should("not.be.disabled");
+
+    // Check that settings are shown correctly
+    cy.get("#password-change-allowed").should("not.be.checked");
+  });
+
+  it("change recording and statistics settings", function () {
+    cy.visit("/admin/settings");
+
+    cy.wait("@settingsRequest");
+
+    cy.contains("admin.settings.recording_and_statistics_title");
+
+    cy.get('[data-test="statistics-servers-enabled-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.statistics.servers.enabled_title")
+      .and("include.text", "app.enable")
+      .within(() => {
+        cy.get("#statistics-servers-enabled").should("be.checked").click();
+      });
+
+    // Statistics servers retention period
+    cy.get(
+      '[data-test="statistics-servers-retention-period-dropdown-items"]',
+    ).should("not.exist");
+    cy.get('[data-test="statistics-servers-retention-period-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "admin.settings.statistics.servers.retention_period_title",
+      )
+      .within(() => {
+        cy.get('[data-test="statistics-servers-retention-period-dropdown"]')
+          .should("have.text", "app.unlimited")
+          .click();
+      });
+
+    cy.get('[data-test="statistics-servers-retention-period-dropdown-items"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get(
+          '[data-test="statistics-servers-retention-period-dropdown-option"]',
+        ).should("have.length", 8);
+
+        cy.get(
+          '[data-test="statistics-servers-retention-period-dropdown-option"]',
+        )
+          .eq(0)
+          .should("have.text", "admin.settings.one_week");
+        cy.get(
+          '[data-test="statistics-servers-retention-period-dropdown-option"]',
+        )
+          .eq(1)
+          .should("have.text", "admin.settings.two_weeks");
+        cy.get(
+          '[data-test="statistics-servers-retention-period-dropdown-option"]',
+        )
+          .eq(2)
+          .should("have.text", "admin.settings.one_month");
+        cy.get(
+          '[data-test="statistics-servers-retention-period-dropdown-option"]',
+        )
+          .eq(3)
+          .should("have.text", "admin.settings.three_month");
+        cy.get(
+          '[data-test="statistics-servers-retention-period-dropdown-option"]',
+        )
+          .eq(4)
+          .should("have.text", "admin.settings.six_month");
+        cy.get(
+          '[data-test="statistics-servers-retention-period-dropdown-option"]',
+        )
+          .eq(5)
+          .should("have.text", "admin.settings.one_year");
+        cy.get(
+          '[data-test="statistics-servers-retention-period-dropdown-option"]',
+        )
+          .eq(6)
+          .should("have.text", "admin.settings.two_years");
+        cy.get(
+          '[data-test="statistics-servers-retention-period-dropdown-option"]',
+        )
+          .eq(7)
+          .should("have.text", "app.unlimited");
+        cy.get(
+          '[data-test="statistics-servers-retention-period-dropdown-option"]',
+        )
+          .eq(7)
+          .should("have.attr", "aria-selected", "true");
+
+        cy.get(
+          '[data-test="statistics-servers-retention-period-dropdown-option"]',
+        )
+          .eq(3)
+          .click();
+      });
+
+    cy.get(
+      '[data-test="statistics-servers-retention-period-dropdown-items"]',
+    ).should("not.exist");
+    cy.get('[data-test="statistics-servers-retention-period-dropdown"]').should(
+      "have.text",
+      "admin.settings.three_month",
+    );
+
+    // Statistics meetings enabled
+    cy.get("[data-test=statistics-meetings-enabled-field]")
+      .should("be.visible")
+      .and("include.text", "admin.settings.statistics.meetings.enabled_title")
+      .within(() => {
+        cy.get("#statistics-meetings-enabled").should("be.checked").click();
+      });
+
+    // Statistics meetings retention period
+    cy.get(
+      '[data-test="statistics-meetings-retention-period-dropdown-items"]',
+    ).should("not.exist");
+    cy.get('[data-test="statistics-meetings-retention-period-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "admin.settings.statistics.meetings.retention_period_title",
+      )
+      .within(() => {
+        cy.get('[data-test="statistics-meetings-retention-period-dropdown"]')
+          .should("have.text", "app.unlimited")
+          .click();
+      });
+
+    cy.get('[data-test="statistics-meetings-retention-period-dropdown-items"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get(
+          '[data-test="statistics-meetings-retention-period-dropdown-option"]',
+        ).should("have.length", 8);
+
+        cy.get(
+          '[data-test="statistics-meetings-retention-period-dropdown-option"]',
+        )
+          .eq(0)
+          .should("have.text", "admin.settings.one_week");
+        cy.get(
+          '[data-test="statistics-meetings-retention-period-dropdown-option"]',
+        )
+          .eq(1)
+          .should("have.text", "admin.settings.two_weeks");
+        cy.get(
+          '[data-test="statistics-meetings-retention-period-dropdown-option"]',
+        )
+          .eq(2)
+          .should("have.text", "admin.settings.one_month");
+        cy.get(
+          '[data-test="statistics-meetings-retention-period-dropdown-option"]',
+        )
+          .eq(3)
+          .should("have.text", "admin.settings.three_month");
+        cy.get(
+          '[data-test="statistics-meetings-retention-period-dropdown-option"]',
+        )
+          .eq(4)
+          .should("have.text", "admin.settings.six_month");
+        cy.get(
+          '[data-test="statistics-meetings-retention-period-dropdown-option"]',
+        )
+          .eq(5)
+          .should("have.text", "admin.settings.one_year");
+        cy.get(
+          '[data-test="statistics-meetings-retention-period-dropdown-option"]',
+        )
+          .eq(6)
+          .should("have.text", "admin.settings.two_years");
+        cy.get(
+          '[data-test="statistics-meetings-retention-period-dropdown-option"]',
+        )
+          .eq(7)
+          .should("have.text", "app.unlimited");
+        cy.get(
+          '[data-test="statistics-meetings-retention-period-dropdown-option"]',
+        )
+          .eq(7)
+          .should("have.attr", "aria-selected", "true");
+
+        cy.get(
+          '[data-test="statistics-meetings-retention-period-dropdown-option"]',
+        )
+          .eq(4)
+          .click();
+      });
+
+    cy.get(
+      '[data-test="statistics-meetings-retention-period-dropdown-items"]',
+    ).should("not.exist");
+    cy.get(
+      '[data-test="statistics-meetings-retention-period-dropdown"]',
+    ).should("have.text", "admin.settings.six_month");
+
+    // Attendance retention period
+    cy.get('[data-test="attendance-retention-period-dropdown-items"]').should(
+      "not.exist",
+    );
+    cy.get('[data-test="attendance-retention-period-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.attendance.retention_period_title")
+      .within(() => {
+        cy.get('[data-test="attendance-retention-period-dropdown"]')
+          .should("have.text", "app.unlimited")
+          .click();
+      });
+
+    cy.get('[data-test="attendance-retention-period-dropdown-items"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get(
+          '[data-test="attendance-retention-period-dropdown-option"]',
+        ).should("have.length", 8);
+
+        cy.get('[data-test="attendance-retention-period-dropdown-option"]')
+          .eq(0)
+          .should("have.text", "admin.settings.one_week");
+        cy.get('[data-test="attendance-retention-period-dropdown-option"]')
+          .eq(1)
+          .should("have.text", "admin.settings.two_weeks");
+        cy.get('[data-test="attendance-retention-period-dropdown-option"]')
+          .eq(2)
+          .should("have.text", "admin.settings.one_month");
+        cy.get('[data-test="attendance-retention-period-dropdown-option"]')
+          .eq(3)
+          .should("have.text", "admin.settings.three_month");
+        cy.get('[data-test="attendance-retention-period-dropdown-option"]')
+          .eq(4)
+          .should("have.text", "admin.settings.six_month");
+        cy.get('[data-test="attendance-retention-period-dropdown-option"]')
+          .eq(5)
+          .should("have.text", "admin.settings.one_year");
+        cy.get('[data-test="attendance-retention-period-dropdown-option"]')
+          .eq(6)
+          .should("have.text", "admin.settings.two_years");
+        cy.get('[data-test="attendance-retention-period-dropdown-option"]')
+          .eq(7)
+          .should("have.text", "app.unlimited");
+        cy.get('[data-test="attendance-retention-period-dropdown-option"]')
+          .eq(7)
+          .should("have.attr", "aria-selected", "true");
+
+        cy.get('[data-test="attendance-retention-period-dropdown-option"]')
+          .eq(5)
+          .click();
+      });
+
+    cy.get('[data-test="attendance-retention-period-dropdown-items"]').should(
+      "not.exist",
+    );
+    cy.get('[data-test="attendance-retention-period-dropdown"]').should(
+      "have.text",
+      "admin.settings.one_year",
+    );
+
+    // Recording retention period
+    cy.get('[data-test="recording-retention-period-dropdown-items"]').should(
+      "not.exist",
+    );
+    cy.get('[data-test="recording-retention-period-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.recording.retention_period_title")
+      .within(() => {
+        cy.get('[data-test="recording-retention-period-dropdown"]')
+          .should("have.text", "app.unlimited")
+          .click();
+      });
+
+    cy.get('[data-test="recording-retention-period-dropdown-items"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get(
+          '[data-test="recording-retention-period-dropdown-option"]',
+        ).should("have.length", 8);
+
+        cy.get('[data-test="recording-retention-period-dropdown-option"]')
+          .eq(0)
+          .should("have.text", "admin.settings.one_week");
+        cy.get('[data-test="recording-retention-period-dropdown-option"]')
+          .eq(1)
+          .should("have.text", "admin.settings.two_weeks");
+        cy.get('[data-test="recording-retention-period-dropdown-option"]')
+          .eq(2)
+          .should("have.text", "admin.settings.one_month");
+        cy.get('[data-test="recording-retention-period-dropdown-option"]')
+          .eq(3)
+          .should("have.text", "admin.settings.three_month");
+        cy.get('[data-test="recording-retention-period-dropdown-option"]')
+          .eq(4)
+          .should("have.text", "admin.settings.six_month");
+        cy.get('[data-test="recording-retention-period-dropdown-option"]')
+          .eq(5)
+          .should("have.text", "admin.settings.one_year");
+        cy.get('[data-test="recording-retention-period-dropdown-option"]')
+          .eq(6)
+          .should("have.text", "admin.settings.two_years");
+        cy.get('[data-test="recording-retention-period-dropdown-option"]')
+          .eq(7)
+          .should("have.text", "app.unlimited");
+        cy.get('[data-test="recording-retention-period-dropdown-option"]')
+          .eq(7)
+          .should("have.attr", "aria-selected", "true");
+
+        cy.get('[data-test="recording-retention-period-dropdown-option"]')
+          .eq(0)
+          .click();
+      });
+
+    cy.get('[data-test="recording-retention-period-dropdown-items"]').should(
+      "not.exist",
+    );
+    cy.get('[data-test="recording-retention-period-dropdown"]').should(
+      "have.text",
+      "admin.settings.one_week",
+    );
+
+    // Save changes
+    cy.fixture("settings.json").then((settings) => {
+      settings.data.recording_server_usage_enabled = false;
+      settings.data.recording_server_usage_retention_period = 90;
+      settings.data.recording_meeting_usage_enabled = false;
+      settings.data.recording_meeting_usage_retention_period = 180;
+      settings.data.recording_attendance_retention_period = 365;
+      settings.data.recording_recording_retention_period = 7;
+
+      const saveChangesRequest = interceptIndefinitely(
+        "POST",
+        "api/v1/settings",
+        {
+          statusCode: 200,
+          body: settings,
+        },
+        "saveChangesRequest",
+      );
+
+      cy.get('[data-test="settings-save-button"]')
+        .should("include.text", "app.save")
+        .click();
+
+      // Check loading
+      cy.get('[data-test="overlay"]').should("be.visible");
+      cy.get('[data-test="settings-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          saveChangesRequest.sendResponse();
+        });
+    });
+
+    cy.wait("@saveChangesRequest").then((interception) => {
+      const formData = parseFormData(
+        interception.request.body,
+        interception.request.headers,
+      );
+
+      expect(formData.get("recording_server_usage_enabled")).to.equal("0");
+      expect(formData.get("recording_server_usage_retention_period")).to.equal(
+        "90",
+      );
+      expect(formData.get("recording_meeting_usage_enabled")).to.equal("0");
+      expect(formData.get("recording_meeting_usage_retention_period")).to.equal(
+        "180",
+      );
+      expect(formData.get("recording_attendance_retention_period")).to.equal(
+        "365",
+      );
+      expect(formData.get("recording_recording_retention_period")).to.equal(
+        "7",
+      );
+    });
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="settings-save-button"]').should("not.be.disabled");
+
+    // Check that settings are shown correctly
+    cy.get("#statistics-servers-enabled").should("not.be.checked");
+    cy.get('[data-test="statistics-servers-retention-period-dropdown"]').should(
+      "have.text",
+      "admin.settings.three_month",
+    );
+    cy.get("#statistics-meetings-enabled").should("not.be.checked");
+    cy.get(
+      '[data-test="statistics-meetings-retention-period-dropdown"]',
+    ).should("have.text", "admin.settings.six_month");
+    cy.get('[data-test="attendance-retention-period-dropdown"]').should(
+      "have.text",
+      "admin.settings.one_year",
+    );
+    cy.get('[data-test="recording-retention-period-dropdown"]').should(
+      "have.text",
+      "admin.settings.one_week",
+    );
+  });
+
+  it("change bbb settings", function () {
+    cy.visit("/admin/settings");
+
+    cy.wait("@settingsRequest");
+
+    cy.contains("admin.settings.bbb.title");
+
+    cy.get('[data-test="bbb-logo-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.logo.title")
+      .within(() => {
+        cy.checkSettingsImageSelector("/images/logo.svg", "logo.svg", true);
+      });
+
+    cy.get('[data-test="bbb-style-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.bbb.style.title")
+      .within(() => {
+        cy.checkSettingsFileSelector("", "bbb_style.css", true);
+      });
+
+    cy.get('[data-test="default-presentation-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.default_presentation")
+      .within(() => {
+        cy.checkSettingsFileSelector("", "testFile.txt", true);
+      });
+
+    // Save changes
+    cy.fixture("settings.json").then((settings) => {
+      settings.data.bbb_logo = "/images/logo.svg";
+      settings.data.bbb_style = "/files/bbb_style.css";
+      settings.data.bbb_default_presentation = "/files/testFile.txt";
+
+      const saveChangesRequest = interceptIndefinitely(
+        "POST",
+        "api/v1/settings",
+        {
+          statusCode: 200,
+          body: settings,
+        },
+        "saveChangesRequest",
+      );
+
+      cy.get('[data-test="settings-save-button"]')
+        .should("include.text", "app.save")
+        .click();
+
+      // Check loading
+      cy.get('[data-test="overlay"]').should("be.visible");
+      cy.get('[data-test="settings-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          saveChangesRequest.sendResponse();
+        });
+    });
+
+    cy.wait("@saveChangesRequest").then((interception) => {
+      const formData = parseFormData(
+        interception.request.body,
+        interception.request.headers,
+      );
+
+      const uploadedBBBLogo = formData.get("bbb_logo_file");
+      expect(uploadedBBBLogo.name).to.eql("logo.svg");
+      expect(uploadedBBBLogo.type).to.eql("image/svg+xml");
+      cy.fixture("files/logo.svg", "base64").then((content) => {
+        uploadedBBBLogo.arrayBuffer().then((arrayBuffer) => {
+          const base64 = _arrayBufferToBase64(arrayBuffer);
+          expect(content).to.eql(base64);
+        });
+      });
+
+      expect(formData.get("bbb_logo")).to.equal(null);
+
+      const uploadedBBBStyle = formData.get("bbb_style");
+      expect(uploadedBBBStyle.name).to.eql("bbb_style.css");
+      expect(uploadedBBBStyle.type).to.eql("text/css");
+
+      cy.fixture("files/bbb_style.css", "base64").then((content) => {
+        uploadedBBBStyle.arrayBuffer().then((arrayBuffer) => {
+          const base64 = _arrayBufferToBase64(arrayBuffer);
+          expect(content).to.eql(base64);
+        });
+      });
+
+      const uploadedDefaultPresentation = formData.get(
+        "bbb_default_presentation",
+      );
+      expect(uploadedDefaultPresentation.name).to.eql("testFile.txt");
+      expect(uploadedDefaultPresentation.type).to.eql("text/plain");
+
+      cy.fixture("files/testFile.txt", "base64").then((content) => {
+        uploadedDefaultPresentation.arrayBuffer().then((arrayBuffer) => {
+          const base64 = _arrayBufferToBase64(arrayBuffer);
+          expect(content).to.eql(base64);
+        });
+      });
+    });
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="settings-save-button"]').should("not.be.disabled");
+
+    // Check that settings are shown correctly
+    cy.get('[data-test="bbb-logo-field"]').within(() => {
+      cy.get('[data-test="settings-image-url-input"]').should(
+        "have.value",
+        "/images/logo.svg",
+      );
+
+      cy.get('[data-test="settings-image-delete-button"]').should("be.visible");
+    });
+
+    cy.get('[data-test="bbb-style-field"]').within(() => {
+      cy.get('[data-test="file-input-button"]').should(
+        "have.text",
+        "app.browse",
+      );
+
+      cy.get('[data-test="settings-file-delete-button"]').should("be.visible");
+
+      cy.get('[data-test="settings-file-view-button"]')
+        .should("be.visible")
+        .and("include.text", "app.view")
+        .and("have.attr", "href", "/files/bbb_style.css");
+    });
+
+    cy.get('[data-test="default-presentation-field"]').within(() => {
+      cy.get('[data-test="file-input-button"]').should(
+        "have.text",
+        "app.browse",
+      );
+
+      cy.get('[data-test="settings-file-delete-button"]').should("be.visible");
+
+      cy.get('[data-test="settings-file-view-button"]')
+        .should("be.visible")
+        .and("include.text", "app.view")
+        .and("have.attr", "href", "/files/testFile.txt");
+    });
+
+    // Change settings again (delete files and images)
+    cy.get('[data-test="bbb-logo-field"]').within(() => {
+      cy.get('[data-test="settings-image-delete-button"]').click();
+
+      cy.get('[data-test="settings-image-url-input"]').should("not.exist");
+      cy.get('[data-test="file-input-button"]').should("not.exist");
+      cy.get('[data-test="settings-image-delete-button"]').should("not.exist");
+      cy.get('[data-test="settings-image-undo-delete-button"]')
+        .should("be.visible")
+        .and("have.text", "app.undo_delete")
+        .click();
+
+      cy.get('[data-test="settings-image-url-input"]').should(
+        "have.value",
+        "/images/logo.svg",
+      );
+
+      cy.get('[data-test="settings-image-delete-button"]')
+        .should("be.visible")
+        .click();
+    });
+
+    cy.get('[data-test="bbb-style-field"]').within(() => {
+      cy.get('[data-test="settings-file-delete-button"]').click();
+
+      cy.get('[data-test="file-input-button"]').should("not.exist");
+      cy.get('[data-test="settings-file-delete-button"]').should("not.exist");
+      cy.get('[data-test="settings-file-view-button"]').should("not.exist");
+      cy.get('[data-test="settings-file-undo-delete-button"]')
+        .should("be.visible")
+        .and("have.text", "app.undo_delete")
+        .click();
+
+      cy.get('[data-test="file-input-button"]').should(
+        "have.text",
+        "app.browse",
+      );
+
+      cy.get('[data-test="settings-file-view-button"]')
+        .should("be.visible")
+        .and("include.text", "app.view")
+        .and("have.attr", "href", "/files/bbb_style.css");
+
+      cy.get('[data-test="settings-file-delete-button"]')
+        .should("be.visible")
+        .click();
+    });
+
+    cy.get('[data-test="default-presentation-field"]').within(() => {
+      cy.get('[data-test="settings-file-delete-button"]').click();
+
+      cy.get('[data-test="file-input-button"]').should("not.exist");
+      cy.get('[data-test="settings-file-delete-button"]').should("not.exist");
+      cy.get('[data-test="settings-file-view-button"]').should("not.exist");
+      cy.get('[data-test="settings-file-undo-delete-button"]')
+        .should("be.visible")
+        .and("have.text", "app.undo_delete")
+        .click();
+
+      cy.get('[data-test="file-input-button"]').should(
+        "have.text",
+        "app.browse",
+      );
+
+      cy.get('[data-test="settings-file-view-button"]')
+        .should("be.visible")
+        .and("include.text", "app.view")
+        .and("have.attr", "href", "/files/testFile.txt");
+
+      cy.get('[data-test="settings-file-delete-button"]')
+        .should("be.visible")
+        .click();
+    });
+
+    // Save changes
+    cy.fixture("settings.json").then((settings) => {
+      settings.data.bbb_logo = null;
+      settings.data.bbb_style = null;
+      settings.data.bbb_default_presentation = null;
+
+      cy.intercept("POST", "api/v1/settings", {
+        statusCode: 200,
+        body: settings,
+      }).as("saveChangesRequest");
+    });
+
+    cy.get('[data-test="settings-save-button"]')
+      .should("include.text", "app.save")
+      .click();
+
+    cy.wait("@saveChangesRequest").then((interception) => {
+      const formData = parseFormData(
+        interception.request.body,
+        interception.request.headers,
+      );
+
+      expect(formData.get("bbb_logo_file")).to.eql(null);
+      expect(formData.get("bbb_logo")).to.eql("");
+      expect(formData.get("bbb_style")).to.eql("");
+      expect(formData.get("bbb_default_presentation")).to.be.eql("");
+    });
+
+    // Check that settings are shown correctly
+    cy.get('[data-test="bbb-logo-field"]').within(() => {
+      cy.get('[data-test="settings-image-url-input"]')
+        .should("be.visible")
+        .and("have.value", "");
+      cy.get('[data-test="file-input-button"]').should("be.visible");
+      cy.get('[data-test="settings-image-delete-button"]').should("not.exist");
+      cy.get('[data-test="settings-image-undo-delete-button"]').should(
+        "not.exist",
+      );
+    });
+
+    cy.get('[data-test="bbb-style-field"]').within(() => {
+      cy.get('[data-test="file-input-button"]').should("be.visible");
+      cy.get('[data-test="settings-file-delete-button"]').should("not.exist");
+      cy.get('[data-test="settings-file-view-button"]').should("not.exist");
+      cy.get('[data-test="settings-file-undo-delete-button"]').should(
+        "not.exist",
+      );
+    });
+
+    cy.get('[data-test="default-presentation-field"]').within(() => {
+      cy.get('[data-test="file-input-button"]').should("be.visible");
+      cy.get('[data-test="settings-file-delete-button"]').should("not.exist");
+      cy.get('[data-test="settings-file-view-button"]').should("not.exist");
+      cy.get('[data-test="settings-file-undo-delete-button"]').should(
+        "not.exist",
+      );
+    });
+
+    // Save settings again
+    cy.fixture("settings.json").then((settings) => {
+      settings.data.bbb_logo = null;
+      settings.data.bbb_style = null;
+      settings.data.bbb_default_presentation = null;
+
+      cy.intercept("POST", "api/v1/settings", {
+        statusCode: 200,
+        body: settings,
+      }).as("saveChangesRequest");
+    });
+
+    cy.get('[data-test="settings-save-button"]')
+      .should("include.text", "app.save")
+      .click();
+
+    cy.wait("@saveChangesRequest").then((interception) => {
+      const formData = parseFormData(
+        interception.request.body,
+        interception.request.headers,
+      );
+
+      expect(formData.get("bbb_logo_file")).to.eql(null);
+      expect(formData.get("bbb_logo")).to.eql(null);
+      expect(formData.get("bbb_style")).to.eql(null);
+      expect(formData.get("bbb_default_presentation")).to.be.eql(null);
+    });
+  });
+
+  it("save changes errors", function () {
+    // Check with 422 errors
+    cy.visit("/admin/settings");
+
+    cy.wait("@settingsRequest");
+
+    cy.intercept("POST", "api/v1/settings", {
+      statusCode: 422,
+      body: {
+        message: "The given data was invalid.",
+        errors: {
+          general_name: ["The general name field is required."],
+          general_help_url: ["The selected general help url is invalid."],
+          general_legal_notice_url: [
+            "The selected general legal notice url is invalid.",
+          ],
+          general_privacy_policy_url: [
+            "The selected general privacy policy url is invalid.",
+          ],
+          general_pagination_page_size: [
+            "The general pagination page size field is required.",
+          ],
+          general_toast_lifetime: [
+            "The general toast lifetime field is required.",
+          ],
+          general_default_timezone: [
+            "The general default timezone field is required.",
+          ],
+          general_no_welcome_page: [
+            "The selected general no welcome page field is invalid.",
+          ],
+          theme_favicon: ["The theme favicon field is required."],
+          theme_favicon_file: ["The theme favicon file field is required."],
+          theme_favicon_dark: ["The theme favicon dark field is required."],
+          theme_favicon_dark_file: [
+            "The theme favicon dark file field is required.",
+          ],
+          theme_logo: ["The theme logo field is required."],
+          theme_logo_file: ["The theme logo file field is required."],
+          theme_logo_dark: ["The theme logo dark field is required."],
+          theme_logo_dark_file: ["The theme logo dark file field is required."],
+          theme_primary_color: ["The theme primary color field is required."],
+          theme_rounded: ["The theme rounded field is required."],
+          banner_enabled: ["The banner enabled field is required."],
+          banner_title: ["The selected banner title is invalid."],
+          banner_icon: ["The selected banner icon is invalid."],
+          banner_message: ["The selected banner message is invalid."],
+          banner_link: ["The selected banner link is invalid."],
+          banner_link_text: ["The selected banner link text is invalid."],
+          banner_link_style: ["The selected banner link style is invalid."],
+          banner_link_target: ["The selected banner link target is invalid."],
+          banner_color: ["The selected banner color is invalid."],
+          banner_background: [
+            "The selected banner background color is invalid.",
+          ],
+          room_limit: ["The room limit field is required."],
+          room_token_expiration: [
+            "The selected room token expiration is invalid.",
+          ],
+          room_auto_delete_deadline_period: [
+            "The selected room auto delete deadline period is invalid.",
+          ],
+          room_auto_delete_inactive_period: [
+            "The selected room auto delete inactive period is invalid.",
+          ],
+          room_auto_delete_never_used_period: [
+            "The selected room auto delete never used period is invalid.",
+          ],
+          room_file_terms_of_use: [
+            "The selected room file terms of use is invalid.",
+          ],
+          user_password_change_allowed: [
+            "The user password change allowed field is required.",
+          ],
+          recording_server_usage_enabled: [
+            "The recording server usage enabled field is required.",
+          ],
+          recording_server_usage_retention_period: [
+            "The selected recording server usage retention period is invalid.",
+          ],
+          recording_meeting_usage_enabled: [
+            "The recording meeting usage enabled field is required.",
+          ],
+          recording_meeting_usage_retention_period: [
+            "The selected recording meeting usage retention period is invalid.",
+          ],
+          recording_attendance_retention_period: [
+            "The selected recording attendance retention period is invalid.",
+          ],
+          recording_recording_retention_period: [
+            "The selected recording recording retention period is invalid.",
+          ],
+          bbb_logo: ["The bbb logo field is required."],
+          bbb_logo_file: ["The bbb logo file field is required."],
+          bbb_style: ["The bbb style field is required."],
+          bbb_default_presentation: [
+            "The bbb default presentation field is required.",
+          ],
+        },
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="settings-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that errors are shown correctly
+    cy.get('[data-test="application-name-field"]').should(
+      "include.text",
+      "The general name field is required.",
+    );
+    cy.get('[data-test="help-url-field"]').should(
+      "include.text",
+      "The selected general help url is invalid.",
+    );
+    cy.get('[data-test="legal-notice-url-field"]').should(
+      "include.text",
+      "The selected general legal notice url is invalid.",
+    );
+    cy.get('[data-test="privacy-policy-url-field"]').should(
+      "include.text",
+      "The selected general privacy policy url is invalid.",
+    );
+    cy.get('[data-test="pagination-page-size-field"]').should(
+      "include.text",
+      "The general pagination page size field is required.",
+    );
+    cy.get('[data-test="toast-lifetime-field"]').should(
+      "include.text",
+      "The general toast lifetime field is required.",
+    );
+    cy.get('[data-test="default-timezone-field"]').should(
+      "include.text",
+      "The general default timezone field is required.",
+    );
+    cy.get('[data-test="no-welcome-page-field"]').should(
+      "include.text",
+      "The selected general no welcome page field is invalid.",
+    );
+
+    cy.get('[data-test="favicon-field"]')
+      .should("include.text", "The theme favicon field is required.")
+      .and("include.text", "The theme favicon file field is required.");
+    cy.get('[data-test="favicon-dark-field"]')
+      .should("include.text", "The theme favicon dark field is required.")
+      .and("include.text", "The theme favicon dark file field is required.");
+    cy.get('[data-test="logo-field"]')
+      .should("include.text", "The theme logo field is required.")
+      .and("include.text", "The theme logo file field is required.");
+    cy.get('[data-test="logo-dark-field"]')
+      .should("include.text", "The theme logo dark field is required.")
+      .and("include.text", "The theme logo dark file field is required.");
+    cy.get('[data-test="primary-color-field"]').should(
+      "include.text",
+      "The theme primary color field is required.",
+    );
+    cy.get('[data-test="theme-rounded-field"]').should(
+      "include.text",
+      "The theme rounded field is required.",
+    );
+
+    cy.get('[data-test="banner-enabled-field"]').should(
+      "include.text",
+      "The banner enabled field is required.",
+    );
+    cy.get('[data-test="banner-title-field"]').should(
+      "include.text",
+      "The selected banner title is invalid.",
+    );
+    cy.get('[data-test="banner-icon-field"]').should(
+      "include.text",
+      "The selected banner icon is invalid.",
+    );
+    cy.get('[data-test="banner-message-field"]').should(
+      "include.text",
+      "The selected banner message is invalid.",
+    );
+    cy.get('[data-test="banner-link-field"]').should(
+      "include.text",
+      "The selected banner link is invalid.",
+    );
+    cy.get('[data-test="banner-link-text-field"]').should(
+      "include.text",
+      "The selected banner link text is invalid.",
+    );
+    cy.get('[data-test="banner-link-style-field"]').should(
+      "include.text",
+      "The selected banner link style is invalid.",
+    );
+    cy.get('[data-test="banner-link-target-field"]').should(
+      "include.text",
+      "The selected banner link target is invalid.",
+    );
+    cy.get('[data-test="banner-color-field"]').should(
+      "include.text",
+      "The selected banner color is invalid.",
+    );
+    cy.get('[data-test="banner-background-field"]').should(
+      "include.text",
+      "The selected banner background color is invalid.",
+    );
+
+    cy.get('[data-test="room-limit-field"]').should(
+      "include.text",
+      "The room limit field is required.",
+    );
+    cy.get('[data-test="room-token-expiration-field"]').should(
+      "include.text",
+      "The selected room token expiration is invalid.",
+    );
+    cy.get('[data-test="room-auto-delete-deadline-period-field"]').should(
+      "include.text",
+      "The selected room auto delete deadline period is invalid.",
+    );
+    cy.get('[data-test="room-auto-delete-inactive-period-field"]').should(
+      "include.text",
+      "The selected room auto delete inactive period is invalid.",
+    );
+    cy.get('[data-test="room-auto-delete-never-used-period-field"]').should(
+      "include.text",
+      "The selected room auto delete never used period is invalid.",
+    );
+    cy.get('[data-test="room-file-terms-of-use-field"]').should(
+      "include.text",
+      "The selected room file terms of use is invalid.",
+    );
+
+    cy.get('[data-test="password-change-allowed-field"]').should(
+      "include.text",
+      "The user password change allowed field is required.",
+    );
+
+    cy.get('[data-test="statistics-servers-enabled-field"]').should(
+      "include.text",
+      "The recording server usage enabled field is required.",
+    );
+    cy.get('[data-test="statistics-servers-retention-period-field"]').should(
+      "include.text",
+      "The selected recording server usage retention period is invalid.",
+    );
+    cy.get('[data-test="statistics-meetings-enabled-field"]').should(
+      "include.text",
+      "The recording meeting usage enabled field is required.",
+    );
+    cy.get('[data-test="statistics-meetings-retention-period-field"]').should(
+      "include.text",
+      "The selected recording meeting usage retention period is invalid.",
+    );
+    cy.get('[data-test="attendance-retention-period-field"]').should(
+      "include.text",
+      "The selected recording attendance retention period is invalid.",
+    );
+    cy.get('[data-test="recording-retention-period-field"]').should(
+      "include.text",
+      "The selected recording recording retention period is invalid.",
+    );
+
+    cy.get('[data-test="bbb-logo-field"]')
+      .should("include.text", "The bbb logo field is required.")
+      .and("include.text", "The bbb logo file field is required.");
+    cy.get('[data-test="bbb-style-field"]').should(
+      "include.text",
+      "The bbb style field is required.",
+    );
+    cy.get('[data-test="default-presentation-field"]').should(
+      "include.text",
+      "The bbb default presentation field is required.",
+    );
+
+    // Check with 500 error
+    cy.intercept("POST", "api/v1/settings", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="settings-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that 422 error messages are hidden
+    cy.get('[data-test="application-name-field"]').should(
+      "not.include.text",
+      "The general name field is required.",
+    );
+    cy.get('[data-test="help-url-field"]').should(
+      "not.include.text",
+      "The selected general help url is invalid.",
+    );
+    cy.get('[data-test="legal-notice-url-field"]').should(
+      "not.include.text",
+      "The selected general legal notice url is invalid.",
+    );
+    cy.get('[data-test="privacy-policy-url-field"]').should(
+      "not.include.text",
+      "The selected general privacy policy url is invalid.",
+    );
+    cy.get('[data-test="pagination-page-size-field"]').should(
+      "not.include.text",
+      "The general pagination page size field is required.",
+    );
+    cy.get('[data-test="toast-lifetime-field"]').should(
+      "not.include.text",
+      "The general toast lifetime field is required.",
+    );
+    cy.get('[data-test="default-timezone-field"]').should(
+      "not.include.text",
+      "The general default timezone field is required.",
+    );
+    cy.get('[data-test="no-welcome-page-field"]').should(
+      "not.include.text",
+      "The selected general no welcome page field is invalid.",
+    );
+
+    cy.get('[data-test="favicon-field"]')
+      .should("not.include.text", "The theme favicon field is required.")
+      .and("not.include.text", "The theme favicon file field is required.");
+    cy.get('[data-test="favicon-dark-field"]')
+      .should("not.include.text", "The theme favicon dark field is required.")
+      .and(
+        "not.include.text",
+        "The theme favicon dark file field is required.",
+      );
+    cy.get('[data-test="logo-field"]')
+      .should("not.include.text", "The theme logo field is required.")
+      .and("not.include.text", "The theme logo file field is required.");
+    cy.get('[data-test="logo-dark-field"]')
+      .should("not.include.text", "The theme logo dark field is required.")
+      .and("not.include.text", "The theme logo dark file field is required.");
+    cy.get('[data-test="primary-color-field"]').should(
+      "not.include.text",
+      "The theme primary color field is required.",
+    );
+    cy.get('[data-test="theme-rounded-field"]').should(
+      "not.include.text",
+      "The theme rounded field is required.",
+    );
+
+    cy.get('[data-test="banner-enabled-field"]').should(
+      "not.include.text",
+      "The banner enabled field is required.",
+    );
+    cy.get('[data-test="banner-title-field"]').should(
+      "not.include.text",
+      "The selected banner title is invalid.",
+    );
+    cy.get('[data-test="banner-icon-field"]').should(
+      "not.include.text",
+      "The selected banner icon is invalid.",
+    );
+    cy.get('[data-test="banner-message-field"]').should(
+      "not.include.text",
+      "The selected banner message is invalid.",
+    );
+    cy.get('[data-test="banner-link-field"]').should(
+      "not.include.text",
+      "The selected banner link is invalid.",
+    );
+    cy.get('[data-test="banner-link-text-field"]').should(
+      "not.include.text",
+      "The selected banner link text is invalid.",
+    );
+    cy.get('[data-test="banner-link-style-field"]').should(
+      "not.include.text",
+      "The selected banner link style is invalid.",
+    );
+    cy.get('[data-test="banner-link-target-field"]').should(
+      "not.include.text",
+      "The selected banner link target is invalid.",
+    );
+    cy.get('[data-test="banner-color-field"]').should(
+      "not.include.text",
+      "The selected banner color is invalid.",
+    );
+    cy.get('[data-test="banner-background-field"]').should(
+      "not.include.text",
+      "The selected banner background color is invalid.",
+    );
+
+    cy.get('[data-test="room-limit-field"]').should(
+      "not.include.text",
+      "The room limit field is required.",
+    );
+    cy.get('[data-test="room-token-expiration-field"]').should(
+      "not.include.text",
+      "The selected room token expiration is invalid.",
+    );
+    cy.get('[data-test="room-auto-delete-deadline-period-field"]').should(
+      "not.include.text",
+      "The selected room auto delete deadline period is invalid.",
+    );
+    cy.get('[data-test="room-auto-delete-inactive-period-field"]').should(
+      "not.include.text",
+      "The selected room auto delete inactive period is invalid.",
+    );
+    cy.get('[data-test="room-auto-delete-never-used-period-field"]').should(
+      "not.include.text",
+      "The selected room auto delete never used period is invalid.",
+    );
+    cy.get('[data-test="room-file-terms-of-use-field"]').should(
+      "not.include.text",
+      "The selected room file terms of use is invalid.",
+    );
+
+    cy.get('[data-test="password-change-allowed-field"]').should(
+      "not.include.text",
+      "The user password change allowed field is required.",
+    );
+
+    cy.get('[data-test="statistics-servers-enabled-field"]').should(
+      "not.include.text",
+      "The recording server usage enabled field is required.",
+    );
+    cy.get('[data-test="statistics-servers-retention-period-field"]').should(
+      "not.include.text",
+      "The selected recording server usage retention period is invalid.",
+    );
+    cy.get('[data-test="statistics-meetings-enabled-field"]').should(
+      "not.include.text",
+      "The recording meeting usage enabled field is required.",
+    );
+    cy.get('[data-test="statistics-meetings-retention-period-field"]').should(
+      "not.include.text",
+      "The selected recording meeting usage retention period is invalid.",
+    );
+    cy.get('[data-test="attendance-retention-period-field"]').should(
+      "not.include.text",
+      "The selected recording attendance retention period is invalid.",
+    );
+    cy.get('[data-test="recording-retention-period-field"]').should(
+      "not.include.text",
+      "The selected recording recording retention period is invalid.",
+    );
+
+    cy.get('[data-test="bbb-logo-field"]')
+      .should("not.include.text", "The bbb logo field is required.")
+      .and("not.include.text", "The bbb logo file field is required.");
+    cy.get('[data-test="bbb-style-field"]').should(
+      "not.include.text",
+      "The bbb style field is required.",
+    );
+    cy.get('[data-test="default-presentation-field"]').should(
+      "not.include.text",
+      "The bbb default presentation field is required.",
+    );
+
+    // Check with 413 error (payload too large)
+    cy.intercept("POST", "api/v1/settings", {
+      statusCode: 413,
+      body: {
+        message: "Test",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="settings-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check error message is shown
+    cy.checkToastMessage("app.flash.too_large");
+
+    // Check with 401 error
+    cy.intercept("POST", "api/v1/settings", {
+      statusCode: 401,
+      body: {
+        message: "Test",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="settings-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/settings");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminSettingsGeneral.cy.js b/tests/Frontend/e2e/AdminSettingsGeneral.cy.js
new file mode 100644
index 000000000..5f6b8f290
--- /dev/null
+++ b/tests/Frontend/e2e/AdminSettingsGeneral.cy.js
@@ -0,0 +1,246 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin settings general", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminSettingsRequest();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "settings.viewAny",
+        "settings.update",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin/settings");
+  });
+
+  it("visit with user without permission to view settings", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/settings");
+
+    cy.checkToastMessage("app.flash.unauthorized");
+
+    // Check if welcome page is shown
+    cy.url().should("not.include", "/admin/room_types/3/edit");
+    cy.get("h1").should("be.visible").and("include.text", "home.title");
+  });
+
+  it("check loading only view", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view", "settings.viewAny"];
+
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    const settingsRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/settings",
+      {
+        fixture: "settings.json",
+      },
+      "settingsRequest",
+    );
+
+    cy.visit("/admin/settings");
+
+    cy.contains("admin.title");
+
+    // Check loading
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    cy.get('[data-test="settings-save-button"]')
+      .should("not.exist")
+      .then(() => {
+        settingsRequest.sendResponse();
+      });
+
+    // Check if settings are shown
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.settings");
+  });
+
+  it("check loading with edit permission", function () {
+    const settingsRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/settings",
+      {
+        fixture: "settings.json",
+      },
+      "settingsRequest",
+    );
+
+    cy.visit("/admin/settings");
+
+    cy.contains("admin.title");
+
+    // Check loading
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    cy.get('[data-test="settings-save-button"]')
+      .should("be.disabled")
+      .and("include.text", "app.save")
+      .then(() => {
+        settingsRequest.sendResponse();
+      });
+
+    // Check if settings are shown
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.settings");
+  });
+
+  it("load settings errors", function () {
+    // Check with 500 error
+    cy.intercept("GET", "api/v1/settings", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    });
+
+    cy.visit("/admin/settings");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that overlay and reload button are shown and reload without error
+    cy.intercept("GET", "api/v1/settings", {
+      fixture: "settings.json",
+    });
+    cy.get('[data-test="overlay"]').should("be.visible");
+    cy.get('[data-test="loading-retry-button"]')
+      .should("have.text", "app.reload")
+      .click();
+
+    // Check that overlay and reload button are hidden
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
+
+    // Check with 401 error
+    cy.intercept("GET", "api/v1/settings", {
+      statusCode: 401,
+    });
+
+    cy.reload();
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/settings");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("load timezones error", function () {
+    const timezonesRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/getTimezones",
+      {
+        statusCode: 500,
+        body: {
+          message: "Test",
+        },
+      },
+      "timezonesRequest",
+    );
+
+    cy.visit("/admin/settings");
+
+    cy.wait("@settingsRequest");
+
+    // Check loading
+    cy.get("[data-test=settings-save-button]").should("be.disabled");
+
+    cy.get('[data-test="timezone-dropdown"]')
+      .find(".p-select-label")
+      .should("have.attr", "aria-disabled", "true")
+      .then(() => {
+        timezonesRequest.sendResponse();
+      });
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    cy.get('[data-test="timezone-dropdown"]')
+      .should("have.text", "admin.settings.default_timezone")
+      .find(".p-select-label")
+      .should("have.attr", "aria-disabled", "true");
+
+    // Reload timezones without error
+    cy.intercept("GET", "api/v1/getTimezones", {
+      fixture: "timezones.json",
+    }).as("timezonesRequest");
+
+    cy.get('[data-test="timezone-reload-button"]').click();
+
+    cy.wait("@timezonesRequest");
+
+    cy.get('[data-test="timezone-dropdown"]')
+      .should("have.text", "UTC")
+      .find(".p-select-label")
+      .should("not.have.attr", "aria-disabled", "true");
+
+    cy.get('[data-test="timezone-dropdown"]').click();
+
+    cy.get('[data-test="timezone-dropdown-option"]').should("have.length", 4);
+    cy.get('[data-test="timezone-dropdown-option"]')
+      .eq(0)
+      .should("have.text", "America/New_York");
+    cy.get('[data-test="timezone-dropdown-option"]')
+      .eq(1)
+      .should("have.text", "Australia/Sydney");
+    cy.get('[data-test="timezone-dropdown-option"]')
+      .eq(2)
+      .should("have.text", "Europe/Berlin");
+    cy.get('[data-test="timezone-dropdown-option"]')
+      .eq(3)
+      .should("have.text", "UTC");
+    cy.get('[data-test="timezone-dropdown-option"]')
+      .eq(3)
+      .should("have.attr", "aria-selected", "true");
+
+    // Check with 401 error
+    cy.intercept("GET", "api/v1/getTimezones", {
+      statusCode: 401,
+    }).as("timezonesRequest");
+
+    cy.reload();
+
+    cy.wait("@settingsRequest");
+
+    cy.wait("@timezonesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/settings");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminSettingsView.cy.js b/tests/Frontend/e2e/AdminSettingsView.cy.js
new file mode 100644
index 000000000..8eec0a876
--- /dev/null
+++ b/tests/Frontend/e2e/AdminSettingsView.cy.js
@@ -0,0 +1,871 @@
+describe("Admin settings with edit permission", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminSettingsRequest();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view", "settings.viewAny"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("check application settings with only view permission", function () {
+    cy.visit("/admin/settings");
+
+    cy.wait("@settingsRequest");
+
+    cy.contains("admin.settings.application");
+
+    cy.get('[data-test="application-name-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.name.title")
+      .and("include.text", "admin.settings.name.description")
+      .within(() => {
+        cy.get("#application-name")
+          .should("have.value", "Test Application")
+          .and("be.disabled");
+      });
+
+    cy.get('[ data-test="help-url-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.help_url.title")
+      .and("include.text", "admin.settings.help_url.description")
+      .within(() => {
+        cy.get("#help-url").should("have.value", "").and("be.disabled");
+      });
+
+    cy.get('[data-test="legal-notice-url-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.legal_notice_url.title")
+      .and("include.text", "admin.settings.legal_notice_url.description")
+      .within(() => {
+        cy.get("#legal-notice-url").should("have.value", "").and("be.disabled");
+      });
+
+    cy.get('[data-test="privacy-policy-url-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.privacy_policy_url.title")
+      .and("include.text", "admin.settings.privacy_policy_url.description")
+      .within(() => {
+        cy.get("#privacy-policy-url")
+          .should("have.value", "")
+          .and("be.disabled");
+      });
+
+    cy.get('[data-test="pagination-page-size-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.pagination_page_size.title")
+      .and("include.text", "admin.settings.pagination_page_size.description")
+      .within(() => {
+        cy.get("#pagination-page-size")
+          .should("have.value", "5")
+          .and("be.disabled");
+      });
+
+    cy.get('[data-test="toast-lifetime-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.toast_lifetime.title")
+      .and("include.text", "admin.settings.toast_lifetime.description")
+      .within(() => {
+        cy.get('[data-test="toast-lifetime-mode-unlimited-field"]')
+          .should("be.visible")
+          .should("include.text", "app.unlimited")
+          .within(() => {
+            cy.get("#toast-lifetime-mode-unlimited")
+              .should("be.checked")
+              .and("be.disabled");
+          });
+        cy.get('[data-test="toast-lifetime-custom-input"]').should("not.exist");
+
+        cy.get('[data-test="toast-lifetime-mode-custom-field"]')
+          .should("be.visible")
+          .should("include.text", "admin.settings.toast_lifetime.custom")
+          .within(() => {
+            cy.get("#toast-lifetime-mode-custom")
+              .should("not.be.checked")
+              .and("be.disabled");
+          });
+      });
+
+    cy.get('[data-test="default-timezone-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.default_timezone")
+      .within(() => {
+        cy.get('[data-test="timezone-dropdown"]')
+          .should("have.text", "UTC")
+          .within(() => {
+            cy.get(".p-select-label").should(
+              "have.attr",
+              "aria-disabled",
+              "true",
+            );
+          });
+      });
+
+    cy.get('[data-test="no-welcome-page-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.no_welcome_page")
+      .within(() => {
+        cy.get("#no-welcome-page").should("be.checked").and("be.disabled");
+      });
+
+    // Reload with different settings
+    cy.fixture("settings.json").then((settings) => {
+      settings.data.general_toast_lifetime = 10;
+
+      cy.intercept("GET", "api/v1/settings", {
+        statusCode: 200,
+        body: settings,
+      }).as("settingsRequest");
+    });
+
+    cy.reload();
+
+    cy.wait("@settingsRequest");
+
+    cy.get('[data-test="toast-lifetime-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.toast_lifetime.title")
+      .and("include.text", "admin.settings.toast_lifetime.description")
+      .within(() => {
+        cy.get('[data-test="toast-lifetime-mode-unlimited-field"]')
+          .should("be.visible")
+          .should("include.text", "app.unlimited")
+          .within(() => {
+            cy.get("#toast-lifetime-mode-unlimited")
+              .should("not.be.checked")
+              .and("be.disabled");
+          });
+        cy.get('[data-test="toast-lifetime-custom-input"]')
+          .should("be.visible")
+          .and("have.value", "10")
+          .and("be.disabled");
+
+        cy.get('[data-test="toast-lifetime-mode-custom-field"]')
+          .should("be.visible")
+          .should("include.text", "admin.settings.toast_lifetime.custom")
+          .within(() => {
+            cy.get("#toast-lifetime-mode-custom")
+              .should("be.checked")
+              .and("be.disabled");
+          });
+      });
+  });
+
+  it("check theme settings with only view permission", function () {
+    cy.visit("/admin/settings");
+
+    cy.wait("@settingsRequest");
+
+    cy.contains("admin.settings.theme.title");
+
+    cy.get('[data-test="favicon-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.favicon.title")
+      .within(() => {
+        cy.checkSettingsImageSelectorOnlyView("/images/favicon.ico");
+      });
+
+    cy.get('[data-test="favicon-dark-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.favicon_dark.title")
+      .within(() => {
+        cy.checkSettingsImageSelectorOnlyView("/images/favicon-dark.ico");
+      });
+
+    cy.get('[data-test="logo-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.logo.title")
+      .within(() => {
+        cy.checkSettingsImageSelectorOnlyView("/images/logo.svg");
+      });
+
+    cy.get('[data-test="logo-dark-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.logo_dark.title")
+      .within(() => {
+        cy.checkSettingsImageSelectorOnlyView("/images/logo-dark.svg");
+      });
+
+    cy.get('[data-test="primary-color-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.theme.primary_color")
+      .within(() => {
+        cy.get('[data-test="color-button"]').should("have.length", 10);
+
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should("have.attr", "role", "button")
+            .and(
+              "have.class",
+              "pointer-events-none cursor-not-allowed opacity-80",
+            )
+            .and(i === 4 ? "have.class" : "not.have.class", "selected");
+        }
+
+        cy.get("#theme-primary-color")
+          .should("have.value", "#22c55e")
+          .and("be.disabled");
+      });
+
+    cy.get('[data-test="theme-rounded-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.theme.rounded")
+      .within(() => {
+        cy.get("#theme-rounded").should("be.checked").and("be.disabled");
+      });
+  });
+
+  it("check banner settings with only view permission", function () {
+    cy.visit("/admin/settings");
+
+    cy.wait("@settingsRequest");
+
+    cy.contains("admin.settings.banner.title");
+
+    cy.get('[data-test="banner-enabled-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.enabled")
+      .and("include.text", "app.enable")
+      .within(() => {
+        cy.get("#banner-enabled").should("not.be.checked").and("be.disabled");
+      });
+
+    cy.get('[data-test="banner-preview-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.preview")
+      .within(() => {
+        cy.get('[data-test="app-banner"]').should("not.have.attr", "style");
+        cy.get('[data-test="app-banner"]').within(() => {
+          cy.get('[data-test="banner-title"]').should("not.exist");
+          cy.get('[data-test="banner-icon"]').should("not.exist");
+          cy.get('[data-test="banner-message"]').should("have.text", "");
+          cy.get('[data-test="banner-link-button"]').should("not.exist");
+        });
+      });
+
+    cy.get('[data-test="banner-title-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.banner_title")
+      .within(() => {
+        cy.get("#banner-title").should("have.value", "").and("be.disabled");
+      });
+
+    cy.get('[data-test="banner-icon-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.icon")
+      .and("include.text", "admin.settings.banner.icon_description")
+      .within(() => {
+        cy.get("#banner-icon").should("have.value", "").and("be.disabled");
+      });
+
+    cy.get('[data-test="banner-message-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.message")
+      .within(() => {
+        cy.get("#banner-message").should("have.value", "").and("be.disabled");
+      });
+
+    cy.get('[data-test="banner-link-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.link")
+      .within(() => {
+        cy.get("#banner-link").should("have.value", "").and("be.disabled");
+      });
+
+    cy.get('[data-test="banner-link-text-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.link_text")
+      .within(() => {
+        cy.get("#banner-link-text").should("have.value", "").and("be.disabled");
+      });
+
+    cy.get('[data-test="banner-link-style-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.link_style")
+      .within(() => {
+        cy.get('[data-test="banner-link-style-dropdown"]')
+          .should("have.text", "app.button_styles.primary")
+          .within(() => {
+            cy.get(".p-select-label").should(
+              "have.attr",
+              "aria-disabled",
+              "true",
+            );
+          });
+      });
+
+    cy.get('[data-test="banner-link-target-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.link_target")
+      .within(() => {
+        cy.get('[data-test="banner-link-target-dropdown"]')
+          .should("have.text", "app.link_targets.blank")
+          .within(() => {
+            cy.get(".p-select-label").should(
+              "have.attr",
+              "aria-disabled",
+              "true",
+            );
+          });
+      });
+
+    cy.get('[data-test="banner-color-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.color")
+      .and("include.text", "admin.room_types.custom_color")
+      .within(() => {
+        cy.get('[data-test="color-button"]').should("have.length", 2);
+
+        for (let i = 0; i < 2; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should("have.attr", "role", "button")
+            .and(
+              "have.class",
+              "pointer-events-none cursor-not-allowed opacity-80",
+            )
+            .and("not.have.class", "selected");
+        }
+
+        cy.get("#banner-color").should("have.value", "").and("be.disabled");
+      });
+
+    cy.get('[data-test="banner-background-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.background")
+      .and("include.text", "admin.room_types.custom_color")
+      .within(() => {
+        cy.get('[data-test="color-button"]').should("have.length", 10);
+
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should("have.attr", "role", "button")
+            .and(
+              "have.class",
+              "pointer-events-none cursor-not-allowed opacity-80",
+            )
+            .and("not.have.class", "selected");
+        }
+
+        cy.get("#banner-background")
+          .should("have.value", "")
+          .and("be.disabled");
+      });
+
+    // Reload with different settings
+    cy.fixture("settings.json").then((settings) => {
+      settings.data.banner_enabled = true;
+      settings.data.banner_title = "Banner title";
+      settings.data.banner_icon = "fa-solid fa-door-open";
+      settings.data.banner_message = "Banner text message";
+      settings.data.banner_link = "/rooms";
+      settings.data.banner_link_text = "Rooms";
+      settings.data.banner_link_style = "link";
+      settings.data.banner_link_target = "self";
+      settings.data.banner_color = "#FFFFFF";
+      settings.data.banner_background = "#ef4444";
+
+      cy.intercept("GET", "api/v1/settings", {
+        statusCode: 200,
+        body: settings,
+      }).as("settingsRequest");
+    });
+
+    cy.reload();
+
+    cy.wait("@settingsRequest");
+
+    cy.get("#banner-enabled").should("be.checked").and("be.disabled");
+
+    cy.get('[data-test="banner-preview-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.preview")
+      .within(() => {
+        cy.get('[data-test="app-banner"]')
+          .should("have.attr", "style")
+          .and("include", "color: rgb(255, 255, 255);")
+          .and("include", "background-color: rgb(239, 68, 68);");
+        cy.get('[data-test="app-banner"]').within(() => {
+          cy.get('[data-test="banner-title"]')
+            .should("be.visible")
+            .and("include.text", "Banner title");
+          cy.get('[data-test="banner-icon"]')
+            .should("be.visible")
+            .and("have.class", "fa-solid fa-door-open");
+          cy.get('[data-test="banner-message"]')
+            .should("be.visible")
+            .and("have.text", "Banner text message");
+          cy.get('[data-test="banner-link-button"]')
+            .should("be.visible")
+            .and("have.attr", "href", "/rooms")
+            .and("have.attr", "target", "_self")
+            .and("have.text", "Rooms");
+          cy.get('[data-test="banner-link-button"]')
+            .find("button")
+            .should("have.attr", "data-p-severity", "link")
+            .and("have.class", "p-0 underline")
+            .and("have.attr", "style")
+            .and("include", "color: rgb(255, 255, 255)");
+        });
+      });
+
+    cy.get("#banner-title")
+      .should("have.value", "Banner title")
+      .and("be.disabled");
+    cy.get("#banner-icon")
+      .should("have.value", "fa-solid fa-door-open")
+      .and("be.disabled");
+    cy.get("#banner-message")
+      .should("have.value", "Banner text message")
+      .and("be.disabled");
+    cy.get("#banner-link").should("have.value", "/rooms").and("be.disabled");
+    cy.get("#banner-link-text")
+      .should("have.value", "Rooms")
+      .and("be.disabled");
+    cy.get('[data-test="banner-link-style-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.link_style")
+      .within(() => {
+        cy.get('[data-test="banner-link-style-dropdown"]')
+          .should("have.text", "app.button_styles.link")
+          .within(() => {
+            cy.get(".p-select-label").should(
+              "have.attr",
+              "aria-disabled",
+              "true",
+            );
+          });
+      });
+
+    cy.get('[data-test="banner-link-target-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.link_target")
+      .within(() => {
+        cy.get('[data-test="banner-link-target-dropdown"]')
+          .should("have.text", "app.link_targets.self")
+          .within(() => {
+            cy.get(".p-select-label").should(
+              "have.attr",
+              "aria-disabled",
+              "true",
+            );
+          });
+      });
+
+    cy.get('[data-test="banner-color-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.color")
+      .and("include.text", "admin.room_types.custom_color")
+      .within(() => {
+        cy.get('[data-test="color-button"]').should("have.length", 2);
+
+        for (let i = 0; i < 2; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should("have.attr", "role", "button")
+            .and(
+              "have.class",
+              "pointer-events-none cursor-not-allowed opacity-80",
+            )
+            .should(i === 0 ? "have.class" : "not.have.class", "selected");
+        }
+
+        cy.get("#banner-color")
+          .should("have.value", "#FFFFFF")
+          .and("be.disabled");
+      });
+
+    cy.get('[data-test="banner-background-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.banner.background")
+      .and("include.text", "admin.room_types.custom_color")
+      .within(() => {
+        cy.get('[data-test="color-button"]').should("have.length", 10);
+
+        for (let i = 0; i < 10; i++) {
+          cy.get('[data-test="color-button"]')
+            .eq(i)
+            .should("have.attr", "role", "button")
+            .and(
+              "have.class",
+              "pointer-events-none cursor-not-allowed opacity-80",
+            )
+            .should(i === 7 ? "have.class" : "not.have.class", "selected");
+        }
+
+        cy.get("#banner-background")
+          .should("have.value", "#ef4444")
+          .and("be.disabled");
+      });
+  });
+
+  it("check room settings with only view permission", function () {
+    cy.fixture("settings.json").then((settings) => {
+      settings.data.room_auto_delete_inactive_period = 30;
+      settings.data.room_auto_delete_never_used_period = 730;
+
+      cy.intercept("GET", "api/v1/settings", {
+        statusCode: 200,
+        body: settings,
+      }).as("settingsRequest");
+    });
+
+    cy.visit("/admin/settings");
+
+    cy.wait("@settingsRequest");
+
+    cy.get('[data-test="room-limit-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.room_limit.title")
+      .and("include.text", "admin.settings.room_limit.description")
+      .within(() => {
+        cy.get('[data-test="room-limit-mode-unlimited-field"]')
+          .should("be.visible")
+          .should("include.text", "app.unlimited")
+          .within(() => {
+            cy.get("#room-limit-mode-unlimited")
+              .should("be.checked")
+              .and("be.disabled");
+          });
+
+        cy.get("#room-limit-custom").should("not.exist");
+
+        cy.get('[data-test="room-limit-mode-custom-field"]')
+          .should("be.visible")
+          .should("include.text", "admin.roles.room_limit.custom")
+          .within(() => {
+            cy.get("#room-limit-mode-custom")
+              .should("not.be.checked")
+              .and("be.disabled");
+          });
+      });
+
+    cy.get('[data-test="room-token-expiration-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.room_token_expiration.title")
+      .and("include.text", "admin.settings.room_token_expiration.description")
+      .within(() => {
+        cy.get('[data-test="room-token-expiration-dropdown"]')
+          .should("have.text", "app.unlimited")
+          .within(() => {
+            cy.get(".p-select-label").should(
+              "have.attr",
+              "aria-disabled",
+              "true",
+            );
+          });
+      });
+
+    cy.get('[data-test="room-auto-delete-deadline-period-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "admin.settings.room_auto_delete.deadline_period.title",
+      )
+      .and(
+        "include.text",
+        "admin.settings.room_auto_delete.deadline_period.description",
+      )
+      .within(() => {
+        cy.get('[data-test="room-auto-delete-deadline-dropdown"]')
+          .should("have.text", "admin.settings.two_weeks")
+          .within(() => {
+            cy.get(".p-select-label").should(
+              "have.attr",
+              "aria-disabled",
+              "true",
+            );
+          });
+      });
+
+    cy.get('[data-test="room-auto-delete-inactive-period-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "admin.settings.room_auto_delete.inactive_period.title",
+      )
+      .and(
+        "include.text",
+        "admin.settings.room_auto_delete.inactive_period.description",
+      )
+      .within(() => {
+        cy.get('[data-test="room-auto-delete-inactive-dropdown"]')
+          .should("have.text", "admin.settings.one_month")
+          .within(() => {
+            cy.get(".p-select-label").should(
+              "have.attr",
+              "aria-disabled",
+              "true",
+            );
+          });
+      });
+
+    cy.get('[data-test="room-auto-delete-never-used-period-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "admin.settings.room_auto_delete.never_used_period.title",
+      )
+      .and(
+        "include.text",
+        "admin.settings.room_auto_delete.never_used_period.description",
+      )
+      .within(() => {
+        cy.get('[data-test="room-auto-delete-never-used-dropdown"]')
+          .should("have.text", "admin.settings.two_years")
+          .within(() => {
+            cy.get(".p-select-label").should(
+              "have.attr",
+              "aria-disabled",
+              "true",
+            );
+          });
+      });
+
+    cy.get('[data-test="room-file-terms-of-use-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.room_file_terms_of_use.title")
+      .and("include.text", "admin.settings.room_file_terms_of_use.description")
+      .within(() => {
+        cy.get("#room-file-terms-of-use")
+          .should("be.visible")
+          .and("have.value", "Room file terms of use")
+          .and("be.disabled");
+      });
+
+    // Reload with different settings
+    cy.fixture("settings.json").then((settings) => {
+      settings.data.room_limit = 10;
+      settings.data.room_auto_delete_inactive_period = 30;
+      settings.data.room_auto_delete_never_used_period = 730;
+
+      cy.intercept("GET", "api/v1/settings", {
+        statusCode: 200,
+        body: settings,
+      }).as("settingsRequest");
+    });
+
+    cy.reload();
+
+    cy.wait("@settingsRequest");
+
+    cy.get('[data-test="room-limit-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.room_limit.title")
+      .and("include.text", "admin.settings.room_limit.description")
+      .within(() => {
+        cy.get('[data-test="room-limit-mode-unlimited-field"]')
+          .should("be.visible")
+          .should("include.text", "app.unlimited")
+          .within(() => {
+            cy.get("#room-limit-mode-unlimited")
+              .should("not.be.checked")
+              .and("be.disabled");
+          });
+
+        cy.get("#room-limit-custom")
+          .should("be.visible")
+          .and("have.value", "10")
+          .and("be.disabled");
+
+        cy.get('[data-test="room-limit-mode-custom-field"]')
+          .should("be.visible")
+          .should("include.text", "admin.roles.room_limit.custom")
+          .within(() => {
+            cy.get("#room-limit-mode-custom")
+              .should("be.checked")
+              .and("be.disabled");
+          });
+      });
+  });
+
+  it("check user settings with only view permission", function () {
+    cy.visit("/admin/settings");
+
+    cy.wait("@settingsRequest");
+
+    cy.get('[data-test="password-change-allowed-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.password_change_allowed")
+      .within(() => {
+        cy.get("#password-change-allowed")
+          .should("be.checked")
+          .and("be.disabled");
+      });
+  });
+
+  it("check recording and statistics settings with only view permission", function () {
+    cy.fixture("settings.json").then((settings) => {
+      settings.data.recording_server_usage_retention_period = 90;
+      settings.data.recording_meeting_usage_retention_period = 180;
+      settings.data.recording_attendance_retention_period = 365;
+      settings.data.recording_recording_retention_period = 7;
+
+      cy.intercept("GET", "api/v1/settings", {
+        statusCode: 200,
+        body: settings,
+      }).as("settingsRequest");
+    });
+
+    cy.visit("/admin/settings");
+
+    cy.wait("@settingsRequest");
+
+    cy.contains("admin.settings.recording_and_statistics_title");
+
+    cy.get('[data-test="statistics-servers-enabled-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.statistics.servers.enabled_title")
+      .and("include.text", "app.enable")
+      .within(() => {
+        cy.get("#statistics-servers-enabled")
+          .should("be.checked")
+          .and("be.disabled");
+      });
+
+    cy.get('[data-test="statistics-servers-retention-period-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "admin.settings.statistics.servers.retention_period_title",
+      )
+      .within(() => {
+        cy.get('[data-test="statistics-servers-retention-period-dropdown"]')
+          .should("have.text", "admin.settings.three_month")
+          .within(() => {
+            cy.get(".p-select-label").should(
+              "have.attr",
+              "aria-disabled",
+              "true",
+            );
+          });
+      });
+
+    cy.get("[data-test=statistics-meetings-enabled-field]")
+      .should("be.visible")
+      .and("include.text", "admin.settings.statistics.meetings.enabled_title")
+      .within(() => {
+        cy.get("#statistics-meetings-enabled")
+          .should("be.checked")
+          .and("be.disabled");
+      });
+
+    cy.get('[data-test="statistics-meetings-retention-period-field"]')
+      .should("be.visible")
+      .and(
+        "include.text",
+        "admin.settings.statistics.meetings.retention_period_title",
+      )
+      .within(() => {
+        cy.get('[data-test="statistics-meetings-retention-period-dropdown"]')
+          .should("have.text", "admin.settings.six_month")
+          .within(() => {
+            cy.get(".p-select-label").should(
+              "have.attr",
+              "aria-disabled",
+              "true",
+            );
+          });
+      });
+
+    cy.get('[data-test="attendance-retention-period-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.attendance.retention_period_title")
+      .within(() => {
+        cy.get('[data-test="attendance-retention-period-dropdown"]')
+          .should("have.text", "admin.settings.one_year")
+          .within(() => {
+            cy.get(".p-select-label").should(
+              "have.attr",
+              "aria-disabled",
+              "true",
+            );
+          });
+      });
+
+    cy.get('[data-test="recording-retention-period-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.recording.retention_period_title")
+      .within(() => {
+        cy.get('[data-test="recording-retention-period-dropdown"]')
+          .should("have.text", "admin.settings.one_week")
+          .within(() => {
+            cy.get(".p-select-label").should(
+              "have.attr",
+              "aria-disabled",
+              "true",
+            );
+          });
+      });
+  });
+
+  it("check bbb settings with only view permission", function () {
+    cy.visit("/admin/settings");
+
+    cy.wait("@settingsRequest");
+
+    cy.get('[data-test="bbb-logo-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.logo.title")
+      .within(() => {
+        cy.checkSettingsImageSelectorOnlyView("/images/logo.svg");
+      });
+
+    cy.get('[data-test="bbb-style-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.bbb.style.title")
+      .within(() => {
+        cy.checkSettingsFileSelectorOnlyView("");
+      });
+
+    cy.get('[data-test="default-presentation-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.default_presentation")
+      .within(() => {
+        cy.checkSettingsFileSelectorOnlyView("");
+      });
+
+    // Reload with different settings
+    cy.fixture("settings.json").then((settings) => {
+      settings.data.bbb_logo = null;
+      settings.data.bbb_style = "/files/bbb_style.css";
+      settings.data.bbb_default_presentation = "/files/testFile.txt";
+
+      cy.intercept("GET", "api/v1/settings", {
+        statusCode: 200,
+        body: settings,
+      }).as("settingsRequest");
+    });
+
+    cy.reload();
+
+    cy.wait("@settingsRequest");
+
+    cy.get('[data-test="bbb-logo-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.logo.title")
+      .within(() => {
+        cy.checkSettingsImageSelectorOnlyView("");
+      });
+
+    cy.get('[data-test="bbb-style-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.bbb.style.title")
+      .within(() => {
+        cy.checkSettingsFileSelectorOnlyView("/files/bbb_style.css");
+      });
+
+    cy.get('[data-test="default-presentation-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.settings.default_presentation")
+      .within(() => {
+        cy.checkSettingsFileSelectorOnlyView("/files/testFile.txt");
+      });
+  });
+});
diff --git a/tests/Frontend/e2e/AdminUsersEdit.cy.js b/tests/Frontend/e2e/AdminUsersEdit.cy.js
new file mode 100644
index 000000000..89965dae2
--- /dev/null
+++ b/tests/Frontend/e2e/AdminUsersEdit.cy.js
@@ -0,0 +1,309 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin users edit", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminUsersViewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.update",
+        "users.create",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.fixture("config.json").then((config) => {
+      config.data.auth.local = true;
+
+      cy.intercept("GET", "api/v1/config", {
+        statusCode: 200,
+        body: config,
+      });
+    });
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin/users/2/edit");
+  });
+
+  it("visit with user without permission to edit users", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.create",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/users/2/edit");
+
+    cy.checkToastMessage("app.flash.unauthorized");
+
+    // Check if welcome page is shown
+    cy.url().should("not.include", "/admin/users/2/edit");
+    cy.get("h1").should("be.visible").and("include.text", "home.title");
+  });
+
+  it("check visiting edit user page of a superuser", function () {
+    cy.fixture("userDataUser.json").then((user) => {
+      user.data.superuser = true;
+
+      user.data.roles.push({
+        id: 1,
+        name: "Superuser",
+        automatic: true,
+        superuser: true,
+      });
+
+      cy.intercept("GET", "api/v1/users/2", {
+        statusCode: 200,
+        body: user,
+      }).as("userRequest");
+    });
+
+    // Check with being a superuser
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="users-cancel-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.cancel_editing")
+      .and("have.attr", "href", "/admin/users/2");
+    cy.get('[data-test="users-edit-button"]').should("not.exist");
+    cy.get('[data-test="users-reset-password-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+    cy.get('[data-test="users-delete-button"]').should("not.exist");
+    cy.get('[data-test="user-tab-profile-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.save");
+
+    cy.get('[data-test="base-tab-button"]').should("be.visible");
+    cy.get('[data-test="email-tab-button"]').should("be.visible");
+    cy.get('[data-test="security-tab-button"]').should("be.visible");
+    cy.get('[data-test="others-tab-button"]').should("be.visible");
+
+    // Check without being a superuser
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.superuser = false;
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.update",
+        "users.create",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.reload();
+
+    cy.wait("@userRequest");
+
+    // Check that redirected to view page
+    cy.url().should("include", "/admin/users/2");
+    cy.url().should("not.include", "/edit");
+
+    cy.wait("@userRequest");
+  });
+
+  it("visit edit user page", function () {
+    const userRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/users/2",
+      { fixture: "userDataUser.json" },
+      "userRequest",
+    );
+
+    cy.visit("/admin/users/2/edit");
+
+    cy.contains("admin.title");
+
+    // Check loading
+    cy.get('[data-test="users-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="users-edit-button"]').should("not.exist");
+    cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+    cy.get('[data-test="users-delete-button"]').should("not.exist");
+    cy.get('[data-test="user-tab-profile-save-button"]').should("not.exist");
+
+    cy.get('[data-test="base-tab-button"]').should("not.exist");
+    cy.get('[data-test="email-tab-button"]').should("not.exist");
+    cy.get('[data-test="security-tab-button"]').should("not.exist");
+    cy.get('[data-test="others-tab-button"]').should("not.exist");
+
+    cy.get('[data-test="overlay"]')
+      .should("be.visible")
+      .then(() => {
+        userRequest.sendResponse();
+      });
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    cy.get('[data-test="users-cancel-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.cancel_editing")
+      .and("have.attr", "href", "/admin/users/2");
+    cy.get('[data-test="users-edit-button"]').should("not.exist");
+    cy.get('[data-test="users-reset-password-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+    cy.get('[data-test="users-delete-button"]').should("not.exist");
+    cy.get('[data-test="user-tab-profile-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.save");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.users.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.users.edit_{"firstname":"Laura","lastname":"Rivera"}',
+      );
+
+    cy.get('[data-test="base-tab-button"]').should("be.visible");
+    cy.get('[data-test="email-tab-button"]').should("be.visible");
+    cy.get('[data-test="security-tab-button"]').should("be.visible");
+    cy.get('[data-test="others-tab-button"]').should("be.visible");
+  });
+
+  it("check button visibility with delete permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.update",
+        "users.create",
+        "users.delete",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="users-cancel-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.cancel_editing")
+      .and("have.attr", "href", "/admin/users/2");
+    cy.get('[data-test="users-edit-button"]').should("not.exist");
+    cy.get('[data-test="users-reset-password-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+    cy.get('[data-test="users-delete-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+    cy.get('[data-test="user-tab-profile-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+  });
+
+  it("visit edit user page errors", function () {
+    cy.intercept("GET", "api/v1/users/2", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("userRequest");
+
+    cy.visit("admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    // Check that overlay is shown
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that error message gets shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Reload with correct data
+    cy.intercept("GET", "api/v1/users/2", {
+      fixture: "userDataUser.json",
+    }).as("userRequest");
+
+    cy.get('[data-test="loading-retry-button"]')
+      .should("be.visible")
+      .and("have.text", "app.reload")
+      .click();
+
+    cy.wait("@userRequest");
+
+    // Check that overlay is not shown anymore
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Reload page with 404 errors
+    cy.interceptAdminUsersIndexRequests();
+
+    cy.intercept("GET", "api/v1/users/2", {
+      statusCode: 404,
+      body: {
+        message: "No query results for model",
+      },
+    }).as("userRequest");
+
+    cy.reload();
+
+    cy.wait("@userRequest");
+
+    // Check that redirect worked
+    cy.url().should("not.include", "/admin/users/2/edit");
+    cy.url().should("include", "/admin/users");
+
+    cy.wait("@usersRequest");
+
+    // Check that error message gets shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"No query results for model"}',
+      'app.flash.server_error.error_code_{"statusCode":404}',
+    ]);
+
+    // Reload page with 401 error
+    cy.intercept("GET", "api/v1/users/2", {
+      statusCode: 401,
+    }).as("userRequest");
+
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users/2/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminUsersEditBase.cy.js b/tests/Frontend/e2e/AdminUsersEditBase.cy.js
new file mode 100644
index 000000000..2d9b22c76
--- /dev/null
+++ b/tests/Frontend/e2e/AdminUsersEditBase.cy.js
@@ -0,0 +1,887 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+import { parseFormData } from "../support/utils/formData.js";
+import { _arrayBufferToBase64 } from "../support/utils/fileHelper.js";
+
+describe("Admin users edit base", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminUsersViewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.update",
+        "users.create",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.fixture("config.json").then((config) => {
+      config.data.auth.local = true;
+
+      cy.intercept("GET", "api/v1/config", {
+        statusCode: 200,
+        body: config,
+      });
+    });
+  });
+
+  it("check view and save changes", function () {
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.contains("admin.users.base_data").should("be.visible");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.users.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.users.edit_{"firstname":"Laura","lastname":"Rivera"}',
+      );
+
+    cy.get('[data-test="default-profile-image-preview"]')
+      .should("be.visible")
+      .and("include.text", "LR");
+
+    // Check firstname setting and change it
+    cy.get('[data-test="firstname-field"]')
+      .should("be.visible")
+      .and("include.text", "app.firstname")
+      .within(() => {
+        cy.get("#firstname")
+          .should("have.value", "Laura")
+          .and("not.be.disabled");
+        cy.get("#firstname").clear();
+        cy.get("#firstname").type("Juan");
+      });
+
+    // Check lastname setting and change it
+    cy.get('[data-test="lastname-field"]')
+      .should("be.visible")
+      .and("include.text", "app.lastname")
+      .within(() => {
+        cy.get("#lastname")
+          .should("have.value", "Rivera")
+          .and("not.be.disabled");
+        cy.get("#lastname").clear();
+        cy.get("#lastname").type("Walter");
+      });
+
+    // Check that breadcrumbs stay the same
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.users.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.users.edit_{"firstname":"Laura","lastname":"Rivera"}',
+      );
+
+    // Check authenticator setting
+    cy.get('[data-test="authenticator-field"]')
+      .should("be.visible")
+      .and("include.text", "auth.authenticator")
+      .within(() => {
+        cy.get("#authenticator")
+          .should("have.value", "admin.users.authenticator.local")
+          .and("be.disabled");
+      });
+
+    // Check profile image setting and upload new image
+    cy.get('[data-test="profile-image-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.users.image.title")
+      .within(() => {
+        cy.get('[data-test="default-profile-image-preview"]')
+          .should("be.visible")
+          .and("include.text", "JW");
+        cy.get('[data-test="profile-image-preview"]').should("not.exist");
+
+        // Check that other buttons are hidden
+        cy.get('[data-test="reset-file-upload-button"]').should("not.exist");
+        cy.get('[data-test="delete-image-button"]').should("not.exist");
+        cy.get('[data-test="undo-delete-button"]').should("not.exist");
+
+        // Upload new profile image
+        cy.get('[data-test="upload-file-input"]').then((fileInput) => {
+          cy.stub(fileInput[0], "click").as("fileInputClick");
+        });
+
+        cy.get('[data-test="upload-file-button"]')
+          .should("be.visible")
+          .and("have.text", "admin.users.image.upload")
+          .click();
+
+        // Check that button is connected to file input
+        cy.get("@fileInputClick").should("be.calledOnce");
+
+        cy.get('[data-test="crop-image-dialog"]').should("not.exist");
+
+        cy.get('[data-test="upload-file-input"]')
+          .should("not.be.visible")
+          .selectFile("tests/Frontend/fixtures/files/profileImage.jpg", {
+            force: true,
+          });
+      });
+
+    cy.get('[data-test="crop-image-dialog"]')
+      .should("be.visible")
+      .and("include.text", "admin.users.image.crop");
+
+    // Check if correct image is shown
+    cy.fixture("files/profileImage.jpg", "base64").then((content) => {
+      cy.get('[data-test="crop-image-dialog"]')
+        .find("img")
+        .should("have.attr", "src")
+        .and("include", content);
+    });
+
+    cy.get('[data-test="dialog-save-button"]')
+      .should("have.text", "admin.users.image.save")
+      .click();
+
+    cy.get('[data-test="crop-image-dialog"]').should("not.exist");
+
+    cy.get('[data-test="profile-image-field"]').within(() => {
+      cy.get('[data-test="default-profile-image-preview"]').should("not.exist");
+      cy.get('[data-test="profile-image-preview"]')
+        .should("be.visible")
+        .find("img")
+        .should("have.attr", "src")
+        .then((src) => {
+          cy.fixture("files/profileImagePreview.jpg", "base64").then(
+            (content) => {
+              expect(src).to.eql("data:image/jpeg;base64," + content);
+            },
+          );
+        });
+
+      cy.get('[data-test="upload-file-button"]').should("be.visible");
+      cy.get('[data-test="delete-image-button"]').should("not.exist");
+      cy.get('[data-test="undo-delete-button"]').should("not.exist");
+
+      // Reset image upload
+      cy.get('[data-test="reset-file-upload-button"]')
+        .should("be.visible")
+        .and("have.text", "app.cancel")
+        .click();
+
+      cy.get('[data-test="default-profile-image-preview"]')
+        .should("be.visible")
+        .and("include.text", "JW");
+      cy.get('[data-test="profile-image-preview"]').should("not.exist");
+
+      cy.get('[data-test="upload-file-button"]').should("be.visible");
+      cy.get('[data-test="delete-image-button"]').should("not.exist");
+      cy.get('[data-test="undo-delete-button"]').should("not.exist");
+      cy.get('[data-test="reset-file-upload-button"]').should("not.exist");
+
+      // Upload image again
+      cy.get('[data-test="upload-file-input"]')
+        .should("not.be.visible")
+        .selectFile("tests/Frontend/fixtures/files/profileImage.jpg", {
+          force: true,
+        });
+    });
+
+    cy.get('[data-test="crop-image-dialog"]')
+      .should("be.visible")
+      .and("include.text", "admin.users.image.crop");
+
+    // Check if correct image is shown
+    cy.fixture("files/profileImage.jpg", "base64").then((content) => {
+      cy.get('[data-test="crop-image-dialog"]')
+        .find("img")
+        .should("have.attr", "src")
+        .and("include", content);
+    });
+
+    cy.get('[data-test="dialog-save-button"]')
+      .should("have.text", "admin.users.image.save")
+      .click();
+
+    cy.get('[data-test="crop-image-dialog"]').should("not.exist");
+
+    // Check that image and buttons are still shown correctly
+    cy.get('[data-test="profile-image-field"]').within(() => {
+      cy.get('[data-test="default-profile-image-preview"]').should("not.exist");
+      cy.get('[data-test="profile-image-preview"]')
+        .should("be.visible")
+        .find("img")
+        .should("have.attr", "src")
+        .then((src) => {
+          cy.fixture("files/profileImagePreview.jpg", "base64").then(
+            (content) => {
+              expect(src).to.eql("data:image/jpeg;base64," + content);
+            },
+          );
+        });
+
+      cy.get('[data-test="upload-file-button"]').should("be.visible");
+      cy.get('[data-test="delete-image-button"]').should("not.exist");
+      cy.get('[data-test="undo-delete-button"]').should("not.exist");
+
+      cy.get('[data-test="reset-file-upload-button"]').should("be.visible");
+    });
+
+    // Check locale setting and change it
+    cy.intercept("GET", "api/v1/locale/de", {
+      data: {},
+      meta: {
+        dateTimeFormat: {
+          dateShort: {
+            year: "numeric",
+            month: "2-digit",
+            day: "2-digit",
+          },
+          dateLong: {
+            year: "numeric",
+            month: "short",
+            day: "2-digit",
+          },
+          time: {
+            hour: "2-digit",
+            minute: "2-digit",
+            hour12: false,
+          },
+          datetimeShort: {
+            year: "numeric",
+            month: "2-digit",
+            day: "2-digit",
+            hour: "2-digit",
+            minute: "2-digit",
+            hour12: false,
+          },
+          datetimeLong: {
+            year: "numeric",
+            month: "short",
+            day: "2-digit",
+            hour: "2-digit",
+            minute: "2-digit",
+            hour12: false,
+          },
+        },
+      },
+    });
+
+    cy.get('[data-test="locale-dropdown-items"]').should("not.exist");
+    cy.get('[data-test="locale-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.users.user_locale")
+      .within(() => {
+        cy.get('[data-test="locale-dropdown"]')
+          .should("have.text", "English")
+          .click();
+      });
+
+    cy.get('[data-test="locale-dropdown-items"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="locale-dropdown-option"]').should("have.length", 3);
+
+        cy.get('[data-test="locale-dropdown-option"]')
+          .eq(0)
+          .should("have.text", "Deutsch");
+        cy.get('[data-test="locale-dropdown-option"]')
+          .eq(1)
+          .should("have.text", "English");
+        cy.get('[data-test="locale-dropdown-option"]')
+          .eq(1)
+          .should("have.attr", "aria-selected", "true");
+        cy.get('[data-test="locale-dropdown-option"]')
+          .eq(2)
+          .should("have.text", "Français");
+
+        cy.get('[data-test="locale-dropdown-option"]').eq(0).click();
+      });
+
+    cy.get('[data-test="locale-dropdown-items"]').should("not.exist");
+    cy.get('[data-test="locale-dropdown"]').should("have.text", "Deutsch");
+
+    // Check timezone setting and change it
+    cy.get('[data-test="timezone-dropdown-items"]').should("not.exist");
+    cy.get('[data-test="timezone-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.users.timezone")
+      .within(() => {
+        cy.get('[data-test="timezone-dropdown"]')
+          .should("have.text", "UTC")
+          .click();
+      });
+
+    cy.get('[data-test="timezone-dropdown-items"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="timezone-dropdown-option"]').should(
+          "have.length",
+          4,
+        );
+
+        cy.get('[data-test="timezone-dropdown-option"]')
+          .eq(0)
+          .should("have.text", "America/New_York");
+        cy.get('[data-test="timezone-dropdown-option"]')
+          .eq(1)
+          .should("have.text", "Australia/Sydney");
+        cy.get('[data-test="timezone-dropdown-option"]')
+          .eq(2)
+          .should("have.text", "Europe/Berlin");
+        cy.get('[data-test="timezone-dropdown-option"]')
+          .eq(3)
+          .should("have.text", "UTC");
+        cy.get('[data-test="timezone-dropdown-option"]')
+          .eq(3)
+          .should("have.attr", "aria-selected", "true");
+
+        cy.get('[data-test="timezone-dropdown-option"]').eq(2).click();
+      });
+
+    cy.get('[data-test="timezone-dropdown-items"]').should("not.exist");
+    cy.get('[data-test="timezone-dropdown"]').should(
+      "have.text",
+      "Europe/Berlin",
+    );
+
+    // Save changes
+    cy.fixture("userDataUser.json").then((user) => {
+      user.data.firstname = "Juan";
+      user.data.lastname = "Walter";
+      user.data.user_locale = "de";
+      user.data.timezone = "Europe/Berlin";
+      user.data.image = Cypress.config("baseUrl") + "/test.jpg";
+      user.data.updated_at = "2024-09-13T14:22:26.000000Z";
+
+      const saveChangesRequest = interceptIndefinitely(
+        "POST",
+        "api/v1/users/2",
+        {
+          statusCode: 200,
+          body: user,
+        },
+        "saveChangesRequest",
+      );
+
+      cy.intercept("GET", "api/v1/users/2", {
+        statusCode: 200,
+        body: user,
+      }).as("userRequest");
+
+      cy.get('[data-test="user-tab-profile-save-button"]')
+        .should("be.visible")
+        .and("have.text", "app.save")
+        .click();
+
+      // Check loading
+      cy.get("#firstname").should("be.disabled");
+      cy.get("#lastname").should("be.disabled");
+      cy.get("#authenticator").should("be.disabled");
+
+      cy.get('[data-test="upload-file-button"]').should("be.disabled");
+      cy.get('[data-test="reset-file-upload-button"]').should("be.disabled");
+
+      cy.get('[data-test="locale-dropdown"]').within(() => {
+        cy.get(".p-select-label").should("have.attr", "aria-disabled", "true");
+      });
+
+      cy.get('[data-test="timezone-dropdown"]').within(() => {
+        cy.get(".p-select-label").should("have.attr", "aria-disabled", "true");
+      });
+
+      cy.get('[data-test="user-tab-profile-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          saveChangesRequest.sendResponse();
+        });
+    });
+
+    cy.wait("@saveChangesRequest").then((interception) => {
+      const formData = parseFormData(
+        interception.request.body,
+        interception.request.headers,
+      );
+
+      expect(formData.get("user_locale")).to.eql("de");
+      expect(formData.get("timezone")).to.eql("Europe/Berlin");
+      expect(formData.get("firstname")).to.eql("Juan");
+      expect(formData.get("lastname")).to.eql("Walter");
+      expect(formData.get("_method")).to.eql("PUT");
+      expect(formData.get("updated_at")).to.eql("2024-09-13T14:20:26.000000Z");
+
+      const uploadedFile = formData.get("image");
+      expect(uploadedFile.name).to.eql("image.png");
+      expect(uploadedFile.type).to.eql("image/jpeg");
+      cy.fixture("files/profileImagePreview.jpg", "base64").then((content) => {
+        uploadedFile.arrayBuffer().then((arrayBuffer) => {
+          const base64 = _arrayBufferToBase64(arrayBuffer);
+          expect(content).to.eql(base64);
+        });
+      });
+    });
+
+    // Check that redirected to view page
+    cy.url().should("include", "/admin/users/2");
+    cy.url().should("not.include", "/edit");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.users.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.users.view_{"firstname":"Juan","lastname":"Walter"}',
+      );
+
+    cy.wait("@userRequest");
+
+    // Reload edit page and save again
+    cy.visit("/admin/users/2/edit");
+
+    // Check if changes are saved and shown in the view
+    cy.get("#firstname").should("have.value", "Juan").and("not.be.disabled");
+    cy.get("#lastname").should("have.value", "Walter").and("not.be.disabled");
+    cy.get("#authenticator")
+      .should("have.value", "admin.users.authenticator.local")
+      .and("be.disabled");
+
+    cy.get('[data-test="upload-file-button"]').should("be.visible");
+    cy.get('[data-test="reset-file-upload-button"]').should("not.exist");
+    cy.get('[data-test="delete-image-button"]').should("be.visible");
+    cy.get('[data-test="undo-delete-button"]').should("not.exist");
+
+    cy.get('[data-test="default-profile-image-preview"]').should("not.exist");
+    cy.get('[data-test="profile-image-preview"]')
+      .should("be.visible")
+      .find("img")
+      .should("have.attr", "src", Cypress.config("baseUrl") + "/test.jpg");
+
+    cy.get('[data-test="locale-dropdown"]').should("have.text", "Deutsch");
+    cy.get('[data-test="locale-dropdown"]').within(() => {
+      cy.get(".p-select-label").should(
+        "not.have.attr",
+        "aria-disabled",
+        "true",
+      );
+    });
+
+    cy.get('[data-test="timezone-dropdown"]').should(
+      "have.text",
+      "Europe/Berlin",
+    );
+    cy.get('[data-test="timezone-dropdown"]').within(() => {
+      cy.get(".p-select-label").should(
+        "not.have.attr",
+        "aria-disabled",
+        "true",
+      );
+    });
+
+    // Delete profile image
+    cy.get('[data-test="delete-image-button"]')
+      .should("have.text", "admin.users.image.delete")
+      .click();
+
+    cy.get('[data-test="profile-image-preview"]').should("not.exist");
+    cy.get('[data-test="default-profile-image-preview"]')
+      .should("be.visible")
+      .and("include.text", "JW");
+
+    // Check visibility of other buttons
+    cy.get('[data-test="upload-file-button"]').should("not.exist");
+    cy.get('[data-test="reset-file-upload-button"]').should("not.exist");
+    cy.get('[data-test="delete-image-button"]').should("not.exist");
+
+    // Undo delete
+    cy.get('[data-test="undo-delete-button"]')
+      .should("have.text", "app.undo_delete")
+      .click();
+
+    cy.get('[data-test="default-profile-image-preview"]').should("not.exist");
+    cy.get('[data-test="profile-image-preview"]')
+      .should("be.visible")
+      .find("img")
+      .should("have.attr", "src", Cypress.config("baseUrl") + "/test.jpg");
+
+    // Delete again and save changes
+    cy.get('[data-test="delete-image-button"]').click();
+
+    cy.fixture("userDataUser.json").then((user) => {
+      user.data.firstname = "Juan";
+      user.data.lastname = "Walter";
+      user.data.user_locale = "de";
+      user.data.timezone = "Europe/Berlin";
+      user.data.updated_at = "2024-09-13T14:24:26.000000Z";
+
+      cy.intercept("POST", "api/v1/users/2", {
+        statusCode: 200,
+        body: user,
+      }).as("saveChangesRequest");
+
+      cy.intercept("GET", "api/v1/users/2", {
+        statusCode: 200,
+        body: user,
+      }).as("userRequest");
+    });
+
+    cy.get('[data-test="user-tab-profile-save-button"]').click();
+
+    cy.wait("@saveChangesRequest").then((interception) => {
+      const formData = parseFormData(
+        interception.request.body,
+        interception.request.headers,
+      );
+
+      expect(formData.get("user_locale")).to.eql("de");
+      expect(formData.get("timezone")).to.eql("Europe/Berlin");
+      expect(formData.get("firstname")).to.eql("Juan");
+      expect(formData.get("lastname")).to.eql("Walter");
+      expect(formData.get("_method")).to.eql("PUT");
+      expect(formData.get("updated_at")).to.eql("2024-09-13T14:22:26.000000Z");
+      expect(formData.get("image")).to.eql("");
+    });
+
+    // Check that redirected to view page
+    cy.url().should("include", "/admin/users/2");
+    cy.url().should("not.include", "/edit");
+
+    cy.wait("@userRequest");
+  });
+
+  it("save changes errors", function () {
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.users.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.users.edit_{"firstname":"Laura","lastname":"Rivera"}',
+      );
+
+    // Check with 422 error
+    cy.intercept("POST", "api/v1/users/2", {
+      statusCode: 422,
+      body: {
+        errors: {
+          firstname: ["The firstname field is required."],
+          lastname: ["The lastname field is required."],
+          user_locale: ["The user locale field is required."],
+          timezone: ["The timezone field is required."],
+        },
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="user-tab-profile-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that error messages are shown
+    cy.get('[data-test="firstname-field"]').should(
+      "include.text",
+      "The firstname field is required.",
+    );
+
+    cy.get('[data-test="lastname-field"]').should(
+      "include.text",
+      "The lastname field is required.",
+    );
+
+    cy.get('[data-test="locale-field"]').should(
+      "include.text",
+      "The user locale field is required.",
+    );
+
+    cy.get('[data-test="timezone-field"]').should(
+      "include.text",
+      "The timezone field is required.",
+    );
+
+    // Check with 500 error
+    cy.intercept("POST", "api/v1/users/2", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="user-tab-profile-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that 422 error messages are hidden
+    cy.get('[data-test="firstname-field"]').should(
+      "not.include.text",
+      "The firstname field is required.",
+    );
+
+    cy.get('[data-test="lastname-field"]').should(
+      "not.include.text",
+      "The lastname field is required.",
+    );
+
+    cy.get('[data-test="locale-field"]').should(
+      "not.include.text",
+      "The user locale field is required.",
+    );
+
+    cy.get('[data-test="timezone-field"]').should(
+      "not.include.text",
+      "The timezone field is required.",
+    );
+
+    // Check with 428 error (stale error)
+    cy.fixture("userDataUser.json").then((user) => {
+      user.data.firstname = "Juan";
+      user.data.lastname = "Walter";
+      user.data.user_locale = "de";
+      user.data.timezone = "Europe/Berlin";
+
+      cy.intercept("POST", "api/v1/users/2", {
+        statusCode: 428,
+        body: {
+          message: " The user entity was updated in the meanwhile!",
+          new_model: user.data,
+        },
+      }).as("saveChangesRequest");
+
+      cy.intercept("GET", "api/v1/users/2", {
+        statusCode: 200,
+        body: user,
+      }).as("userRequest");
+    });
+
+    cy.get('[data-test="stale-user-dialog"]').should("not.exist");
+    cy.get('[data-test="user-tab-profile-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that stale dialog is shown
+    cy.get('[data-test="stale-user-dialog"]')
+      .should("be.visible")
+      .and("include.text", "The user entity was updated in the meanwhile!");
+
+    cy.get('[data-test="stale-dialog-reload-button"]').click();
+
+    // Check that redirected to view page
+    cy.url().should("include", "/admin/users/2");
+    cy.url().should("not.include", "/edit");
+
+    cy.wait("@userRequest");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.users.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.users.view_{"firstname":"Juan","lastname":"Walter"}',
+      );
+
+    // Visit edit page again
+    cy.visit("/admin/users/2/edit");
+
+    // Check with 404 error
+    cy.interceptAdminUsersIndexRequests();
+
+    cy.intercept("POST", "api/v1/users/2", {
+      statusCode: 404,
+      body: {
+        message: "No query results for model",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="user-tab-profile-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("not.include", "/admin/users/2/edit");
+    cy.url().should("include", "/admin/users");
+
+    cy.wait("@usersRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"No query results for model"}',
+      'app.flash.server_error.error_code_{"statusCode":404}',
+    ]);
+
+    // Visit edit page again
+    cy.visit("/admin/users/2/edit");
+
+    // Check with 401 error
+    cy.intercept("POST", "api/v1/users/2", {
+      statusCode: 401,
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="user-tab-profile-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users/2/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("view as external user", function () {
+    cy.fixture("userDataUser.json").then((user) => {
+      user.data.authenticator = "ldap";
+      user.data.external_id = "lwr";
+
+      cy.intercept("GET", "api/v1/users/2", {
+        statusCode: 200,
+        body: user,
+      }).as("userRequest");
+    });
+
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get("#firstname").should("have.value", "Laura").and("be.disabled");
+    cy.get("#lastname").should("have.value", "Rivera").and("be.disabled");
+    cy.get("#authenticator")
+      .should("have.value", "admin.users.authenticator.ldap")
+      .and("be.disabled");
+
+    cy.get('[data-test="authenticator-id-field"]')
+      .should("include.text", "auth.authenticator_id")
+      .within(() => {
+        cy.get("#authenticator_id")
+          .should("have.value", "lwr")
+          .and("be.disabled");
+      });
+
+    cy.get('[data-test="profile-image-preview"]').should("not.exist");
+    cy.get('[data-test="default-profile-image-preview"]')
+      .should("be.visible")
+      .and("include.text", "LR");
+
+    // Check image buttons
+    cy.get('[data-test="upload-file-button"]').should("be.visible");
+    cy.get('[data-test="reset-file-upload-button"]').should("not.exist");
+    cy.get('[data-test="delete-image-button"]').should("not.exist");
+    cy.get('[data-test="undo-delete-button"]').should("not.exist");
+
+    cy.get('[data-test="locale-dropdown"]').should("have.text", "English");
+    cy.get('[data-test="timezone-dropdown"]').should("have.text", "UTC");
+    cy.get('[data-test="locale-dropdown"]').within(() => {
+      cy.get(".p-select-label").should(
+        "not.have.attr",
+        "aria-disabled",
+        "true",
+      );
+    });
+    cy.get('[data-test="timezone-dropdown"]').within(() => {
+      cy.get(".p-select-label").should(
+        "not.have.attr",
+        "aria-disabled",
+        "true",
+      );
+    });
+  });
+
+  it("load timezones error", function () {
+    const timezonesRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/getTimezones",
+      {
+        statusCode: 500,
+        body: {
+          message: "Test",
+        },
+      },
+      "timezonesRequest",
+    );
+
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    // Check loading
+    cy.get('[data-test="user-tab-profile-save-button"]').should("be.disabled");
+
+    cy.get('[data-test="timezone-dropdown"]')
+      .find(".p-select-label")
+      .should("have.attr", "aria-disabled", "true")
+      .then(() => {
+        timezonesRequest.sendResponse();
+      });
+
+    cy.wait("@timezonesRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    cy.get('[data-test="timezone-dropdown"]')
+      .should("have.text", "admin.users.timezone")
+      .find(".p-select-label")
+      .should("have.attr", "aria-disabled", "true");
+
+    // Reload timezones without error
+    cy.intercept("GET", "api/v1/getTimezones", {
+      fixture: "timezones.json",
+    }).as("timezonesRequest");
+
+    cy.get('[data-test="timezone-reload-button"]').click();
+
+    cy.wait("@timezonesRequest");
+
+    cy.get('[data-test="timezone-dropdown"]')
+      .should("have.text", "UTC")
+      .find(".p-select-label")
+      .should("not.have.attr", "aria-disabled", "true");
+
+    cy.get('[data-test="timezone-dropdown"]').click();
+
+    cy.get('[data-test="timezone-dropdown-option"]').should("have.length", 4);
+    cy.get('[data-test="timezone-dropdown-option"]')
+      .eq(0)
+      .should("have.text", "America/New_York");
+    cy.get('[data-test="timezone-dropdown-option"]')
+      .eq(1)
+      .should("have.text", "Australia/Sydney");
+    cy.get('[data-test="timezone-dropdown-option"]')
+      .eq(2)
+      .should("have.text", "Europe/Berlin");
+    cy.get('[data-test="timezone-dropdown-option"]')
+      .eq(3)
+      .should("have.text", "UTC");
+    cy.get('[data-test="timezone-dropdown-option"]')
+      .eq(3)
+      .should("have.attr", "aria-selected", "true");
+
+    // Check with 401 error
+    cy.intercept("GET", "api/v1/getTimezones", {
+      statusCode: 401,
+    }).as("timezonesRequest");
+
+    cy.reload();
+
+    cy.wait("@userRequest");
+
+    cy.wait("@timezonesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users/2/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminUsersEditEmail.cy.js b/tests/Frontend/e2e/AdminUsersEditEmail.cy.js
new file mode 100644
index 000000000..927fdc84c
--- /dev/null
+++ b/tests/Frontend/e2e/AdminUsersEditEmail.cy.js
@@ -0,0 +1,225 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin users edit email", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminUsersViewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.update",
+        "users.create",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.fixture("config.json").then((config) => {
+      config.data.auth.local = true;
+
+      cy.intercept("GET", "api/v1/config", {
+        statusCode: 200,
+        body: config,
+      });
+    });
+  });
+
+  it("check view and save changes", function () {
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="email-tab-button"]').click();
+
+    cy.contains("admin.users.email").should("be.visible");
+
+    // Check that fields are shown correctly and try to change email setting
+    cy.get('[data-test="email-tab-current-password-field"]').should(
+      "not.exist",
+    );
+
+    cy.get('[data-test="email-field"]')
+      .should("be.visible")
+      .and("include.text", "app.email")
+      .within(() => {
+        cy.get("#email")
+          .should("have.value", "LauraWRivera@domain.tld")
+          .and("not.be.disabled")
+          .clear();
+        cy.get("#email").type("laura.rivera@example.com");
+      });
+
+    // Save changes
+    cy.fixture("userDataUser.json").then((user) => {
+      user.data.email = "laura.rivera@example.com";
+
+      const saveChangesRequest = interceptIndefinitely(
+        "PUT",
+        "api/v1/users/2/email",
+        {
+          statusCode: 200,
+          body: user,
+        },
+        "saveChangesRequest",
+      );
+
+      cy.intercept("GET", "/api/v1/users/2", {
+        statusCode: 200,
+        body: user,
+      }).as("userRequest");
+
+      cy.get('[data-test="user-tab-email-save-button"]')
+        .should("have.text", "auth.change_email")
+        .click();
+
+      // Check loading
+      cy.get("#current_password").should("not.exist");
+      cy.get("#email")
+        .should("be.disabled")
+        .then(() => {
+          saveChangesRequest.sendResponse();
+        });
+    });
+
+    cy.wait("@saveChangesRequest").then((interception) => {
+      expect(interception.request.body).to.eql({
+        email: "laura.rivera@example.com",
+      });
+    });
+
+    // Check that redirect to user view worked
+    cy.url().should("include", "/admin/users/2");
+    cy.url().should("not.include", "/edit");
+
+    cy.wait("@userRequest");
+  });
+
+  it("save changes errors", function () {
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="email-tab-button"]').click();
+
+    // Check with 422 error
+    cy.intercept("PUT", "api/v1/users/2/email", {
+      statusCode: 422,
+      body: {
+        errors: {
+          email: ["The email field is required."],
+        },
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="user-tab-email-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    cy.get('[data-test="email-field"]').should(
+      "include.text",
+      "The email field is required.",
+    );
+
+    // Check with 500 error
+    cy.intercept("PUT", "api/v1/users/2/email", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="user-tab-email-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that 422 error messages are hidden
+    cy.get('[data-test="email-field"]').should(
+      "not.include.text",
+      "The email field is required.",
+    );
+
+    // Check with 404 error
+    cy.interceptAdminUsersIndexRequests();
+
+    cy.intercept("PUT", "api/v1/users/2/email", {
+      statusCode: 404,
+      body: {
+        message: "No query results for model",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="user-tab-email-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("not.include", "/admin/users/2/edit");
+    cy.url().should("include", "/admin/users");
+
+    cy.wait("@usersRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"No query results for model"}',
+      'app.flash.server_error.error_code_{"statusCode":404}',
+    ]);
+
+    // Visit edit page again
+    cy.visit("/admin/users/2/edit");
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="email-tab-button"]').click();
+
+    // Check with 401 error
+    cy.intercept("PUT", "api/v1/users/2/email", {
+      statusCode: 401,
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="user-tab-email-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users/2/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("view for external user", function () {
+    cy.fixture("userDataUser.json").then((user) => {
+      user.data.authenticator = "ldap";
+      user.data.external_id = "lwr";
+
+      cy.intercept("GET", "api/v1/users/2", {
+        statusCode: 200,
+        body: user,
+      }).as("userRequest");
+    });
+
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="email-tab-button"]').click();
+
+    // Check that email setting is disabled and save button is hidden
+    cy.get('[data-test="email-tab-current-password-field"]').should(
+      "not.exist",
+    );
+    cy.get("#email")
+      .should("be.disabled")
+      .and("have.value", "LauraWRivera@domain.tld");
+
+    cy.get('[data-test="user-tab-email-save-button"]').should("not.exist");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminUsersEditOthers.cy.js b/tests/Frontend/e2e/AdminUsersEditOthers.cy.js
new file mode 100644
index 000000000..ea55d4af6
--- /dev/null
+++ b/tests/Frontend/e2e/AdminUsersEditOthers.cy.js
@@ -0,0 +1,227 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin users edit others", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminUsersViewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.update",
+        "users.create",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.fixture("config.json").then((config) => {
+      config.data.auth.local = true;
+
+      cy.intercept("GET", "api/v1/config", {
+        statusCode: 200,
+        body: config,
+      });
+    });
+  });
+
+  it("check view and save changes", function () {
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="others-tab-button"]').click();
+
+    cy.contains("admin.users.bbb").should("be.visible");
+
+    cy.get('[data-test="bbb-skip-check-audio-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.users.skip_check_audio")
+      .find("#bbb_skip_check_audio")
+      .should("not.be.checked")
+      .and("not.be.disabled")
+      .click();
+
+    // Save changes
+    cy.fixture("userDataUser.json").then((user) => {
+      user.data.bbb_skip_check_audio = true;
+
+      const saveChangesRequest = interceptIndefinitely(
+        "POST",
+        "api/v1/users/2",
+        {
+          statusCode: 200,
+          body: user,
+        },
+        "saveChangesRequest",
+      );
+
+      cy.intercept("GET", "api/v1/users/2", {
+        statusCode: 200,
+        body: user,
+      }).as("userRequest");
+
+      cy.get('[data-test="user-tab-others-save-button"]').click();
+
+      // Check loading
+      cy.get("#bbb_skip_check_audio").should("be.disabled");
+      cy.get('[data-test="user-tab-others-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          saveChangesRequest.sendResponse();
+        });
+    });
+
+    cy.wait("@saveChangesRequest").then((interception) => {
+      expect(interception.request.body).to.include({
+        bbb_skip_check_audio: true,
+      });
+    });
+
+    // Check that redirect to user view worked
+    cy.url().should("include", "/admin/users/2");
+    cy.url().should("not.include", "/edit");
+
+    cy.wait("@userRequest");
+  });
+
+  it("save changes errors", function () {
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="others-tab-button"]').click();
+
+    // Check with 422 error
+    cy.intercept("POST", "api/v1/users/2", {
+      statusCode: 422,
+      body: {
+        errors: {
+          bbb_skip_check_audio: ["The bbb skip check audio field is required."],
+        },
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="user-tab-others-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    cy.get("#bbb_skip_check_audio").should("not.be.checked");
+
+    cy.get('[data-test="bbb-skip-check-audio-field"]').should(
+      "include.text",
+      "The bbb skip check audio field is required.",
+    );
+
+    // Check with 500 error
+    cy.intercept("POST", "api/v1/users/2", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="user-tab-others-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that 422 error messages are hidden
+    cy.get('[data-test="bbb-skip-check-audio-field"]').should(
+      "not.include.text",
+      "The bbb skip check audio field is required.",
+    );
+
+    // Check with 428 error (stale error)
+    cy.fixture("userDataUser.json").then((user) => {
+      user.data.bbb_skip_check_audio = true;
+
+      cy.intercept("POST", "api/v1/users/2", {
+        statusCode: 428,
+        body: {
+          message: " The user entity was updated in the meanwhile!",
+          new_model: user.data,
+        },
+      }).as("saveChangesRequest");
+
+      cy.intercept("GET", "api/v1/users/2", {
+        statusCode: 200,
+        body: user,
+      }).as("userRequest");
+    });
+
+    cy.get('[data-test="stale-user-dialog"]').should("not.exist");
+    cy.get('[data-test="user-tab-others-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that stale dialog is shown
+    cy.get('[data-test="stale-user-dialog"]')
+      .should("be.visible")
+      .and("include.text", "The user entity was updated in the meanwhile!");
+
+    cy.get('[data-test="stale-dialog-reload-button"]').click();
+
+    // Check that redirected to view page
+    cy.url().should("include", "/admin/users/2");
+    cy.url().should("not.include", "/edit");
+
+    cy.wait("@userRequest");
+
+    // Visit edit page again
+    cy.visit("/admin/users/2/edit");
+    cy.get('[data-test="others-tab-button"]').click();
+
+    // Check with 404 error
+    cy.interceptAdminUsersIndexRequests();
+
+    cy.intercept("POST", "api/v1/users/2", {
+      statusCode: 404,
+      body: {
+        message: "No query results for model",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="user-tab-others-save-button"]').click();
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("not.include", "/admin/users/2/edit");
+    cy.url().should("include", "/admin/users");
+
+    cy.wait("@usersRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"No query results for model"}',
+      'app.flash.server_error.error_code_{"statusCode":404}',
+    ]);
+
+    // Visit edit page again
+    cy.visit("/admin/users/2/edit");
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="others-tab-button"]').click();
+
+    // Check with 401 error
+    cy.intercept("POST", "api/v1/users/2", {
+      statusCode: 401,
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="user-tab-others-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users/2/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminUsersEditSecurity.cy.js b/tests/Frontend/e2e/AdminUsersEditSecurity.cy.js
new file mode 100644
index 000000000..046abc278
--- /dev/null
+++ b/tests/Frontend/e2e/AdminUsersEditSecurity.cy.js
@@ -0,0 +1,931 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin users edit email", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminUsersViewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.update",
+        "users.create",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.fixture("config.json").then((config) => {
+      config.data.auth.local = true;
+
+      cy.intercept("GET", "api/v1/config", {
+        statusCode: 200,
+        body: config,
+      });
+    });
+  });
+
+  it("check view", function () {
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="security-tab-button"]').click();
+
+    cy.contains("admin.users.roles_and_permissions").should("be.visible");
+
+    // Check that role-select is enabled and shows the correct roles
+    cy.get('[data-test="roles-field"]')
+      .should("be.visible")
+      .and("include.text", "app.roles")
+      .within(() => {
+        cy.get('[data-test="role-dropdown"]').within(() => {
+          cy.get('[data-test="role-chip"]').should("have.length", 2);
+          cy.get('[data-test="role-chip"]')
+            .eq(0)
+            .should("include.text", "Students")
+            .find('[data-test="remove-role-button"]')
+            .should("not.exist");
+
+          cy.get('[data-test="role-chip"]')
+            .eq(1)
+            .should("include.text", "Staff")
+            .find('[data-test="remove-role-button"]')
+            .should("be.visible");
+        });
+      });
+
+    // Check that password fields are shown correctly and try to change password
+    cy.get('[data-test="security-tab-current-password-field"]').should(
+      "not.exist",
+    );
+
+    cy.get('[data-test="new-password-field"]')
+      .should("be.visible")
+      .and("include.text", "auth.new_password")
+      .within(() => {
+        cy.get("#new_password").should("have.value", "");
+      });
+
+    cy.get('[data-test="new-password-confirmation-field"]')
+      .should("be.visible")
+      .and("include.text", "auth.new_password_confirmation")
+      .within(() => {
+        cy.get("#new_password_confirmation").should("have.value", "");
+      });
+
+    // Check that essions are not shown
+    cy.get('[data-test="session-panel"]').should("not.exist");
+  });
+
+  it("check view with external user", function () {
+    cy.fixture("userDataUser.json").then((user) => {
+      user.data.authenticator = "ldap";
+      user.data.external_id = "lwr";
+
+      cy.intercept("GET", "api/v1/users/2", {
+        statusCode: 200,
+        body: user,
+      }).as("userRequest");
+    });
+
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="security-tab-button"]').click();
+
+    // Check that role select is shown and enabled
+    cy.get('[data-test="roles-field"]')
+      .should("be.visible")
+      .and("include.text", "app.roles")
+      .within(() => {
+        cy.get('[data-test="role-dropdown"]').should(
+          "not.have.class",
+          "multiselect--disabled",
+        );
+      });
+
+    // Check that password fields are hidden
+    cy.get('[data-test="security-tab-current-password-field"]').should(
+      "not.exist",
+    );
+    cy.get('[data-test="new-password-field"]').should("not.exist");
+    cy.get('[data-test="new-password-confirmation-field"]').should("not.exist");
+    cy.get('[data-test="change-password-save-button"]').should("not.exist");
+
+    // Check that sessions are not shown
+    cy.get('[data-test="session-panel"]').should("not.exist");
+  });
+
+  it("change role", function () {
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="security-tab-button"]').click();
+
+    cy.get('[data-test="role-chip"]').should("have.length", 2);
+    cy.get('[data-test="role-chip"]')
+      .eq(0)
+      .should("include.text", "Students")
+      .find('[data-test="remove-role-button"]')
+      .should("not.exist");
+
+    cy.get('[data-test="role-chip"]')
+      .eq(1)
+      .should("include.text", "Staff")
+      .find('[data-test="remove-role-button"]')
+      .should("be.visible");
+
+    cy.get('[data-test="role-dropdown"]').click();
+
+    // Check if correct options are shown
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").should("have.length", 5);
+    cy.get(".multiselect__option")
+      .eq(0)
+      .should("include.text", "Superuser")
+      .and("include.text", "admin.roles.superuser")
+      .and("not.include.text", "admin.roles.automatic")
+      .and("be.visible")
+      .and("not.have.class", "multiselect__option--disabled");
+    cy.get(".multiselect__option")
+      .eq(1)
+      .should("include.text", "Staff")
+      .and("not.include.text", "admin.roles.superuser")
+      .and("not.include.text", "admin.roles.automatic")
+      .and("be.visible")
+      .and("not.have.class", "multiselect__option--disabled")
+      .and("have.class", "multiselect__option--selected");
+    cy.get(".multiselect__option")
+      .eq(2)
+      .should("include.text", "Students")
+      .and("not.include.text", "admin.roles.superuser")
+      .and("include.text", "admin.roles.automatic")
+      .and("be.visible")
+      .and("have.class", "multiselect__option--disabled");
+    cy.get(".multiselect__option")
+      .eq(3)
+      .should(
+        "include.text",
+        "No elements found. Consider changing the search query.",
+      )
+      .and("not.be.visible");
+    cy.get(".multiselect__option")
+      .eq(4)
+      .should("include.text", "admin.roles.no_data")
+      .and("not.be.visible");
+    cy.get(".multiselect__option").eq(0).click();
+
+    // Switch to next page
+    const userRoleRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/roles*",
+      {
+        statusCode: 200,
+        body: {
+          data: [
+            {
+              id: 4,
+              name: "Dean",
+              default: false,
+              updated_at: "2021-01-08T15:51:08.000000Z",
+              model_name: "Role",
+              room_limit: 20,
+            },
+            {
+              id: 5,
+              name: "Faculty",
+              default: false,
+              updated_at: "2021-03-19T09:12:44.000000Z",
+              model_name: "Role",
+              room_limit: 20,
+            },
+            {
+              id: 6,
+              name: "Manager",
+              default: false,
+              updated_at: "2021-05-22T11:55:21.000000Z",
+              model_name: "Role",
+              room_limit: -1,
+            },
+          ],
+          meta: {
+            current_page: 2,
+            from: 4,
+            last_page: 2,
+            per_page: 3,
+            to: 6,
+            total: 6,
+          },
+        },
+      },
+      "userRoleRequest",
+    );
+
+    cy.get(".multiselect__content")
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="previous-page-button"]')
+          .should("include.text", "app.previous_page")
+          .and("be.disabled");
+        cy.get('[data-test="next-page-button"]')
+          .should("include.text", "app.next_page")
+          .and("not.be.disabled");
+
+        cy.get('[data-test="next-page-button"]').click();
+
+        // Check loading
+        cy.get('[data-test="previous-page-button"]').should("be.disabled");
+        cy.get('[data-test="next-page-button"]').should("be.disabled");
+      });
+
+    cy.get('[data-test="role-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="users-roles-save-button"]')
+      .should("be.disabled")
+      .then(() => {
+        userRoleRequest.sendResponse();
+      });
+
+    cy.wait("@userRoleRequest");
+
+    cy.get('[data-test="users-roles-save-button"]').should("not.be.disabled");
+
+    cy.get(".multiselect__content")
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="previous-page-button"]').should("not.be.disabled");
+        cy.get('[data-test="next-page-button"]').should("be.disabled");
+      });
+
+    cy.get(".multiselect__option").should("have.length", 5);
+    cy.get(".multiselect__option")
+      .eq(0)
+      .should("include.text", "Dean")
+      .and("not.include.text", "admin.roles.superuser")
+      .and("not.include.text", "admin.roles.automatic")
+      .and("not.have.class", "multiselect__option--disabled")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(1)
+      .should("include.text", "Faculty")
+      .and("not.include.text", "admin.roles.superuser")
+      .and("not.include.text", "admin.roles.automatic")
+      .and("not.have.class", "multiselect__option--disabled")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(2)
+      .should("include.text", "Manager")
+      .and("not.include.text", "admin.roles.superuser")
+      .and("not.include.text", "admin.roles.automatic")
+      .and("not.have.class", "multiselect__option--disabled")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(3)
+      .should(
+        "include.text",
+        "No elements found. Consider changing the search query.",
+      )
+      .and("not.be.visible");
+    cy.get(".multiselect__option")
+      .eq(4)
+      .should("include.text", "admin.roles.no_data")
+      .and("not.be.visible");
+
+    // Select roles
+    cy.get(".multiselect__option").eq(0).click();
+    cy.get(".multiselect__option").eq(2).click();
+
+    // Check that roles are shown correctly and remove one role
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get('[data-test="role-dropdown"]').within(() => {
+      cy.get('[data-test="role-chip"]').should("have.length", 5);
+      cy.get('[data-test="role-chip"]')
+        .eq(0)
+        .should("include.text", "Students")
+        .find('[data-test="remove-role-button"]')
+        .should("not.exist");
+
+      cy.get('[data-test="role-chip"]')
+        .eq(1)
+        .should("include.text", "Staff")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+      cy.get('[data-test="role-chip"]')
+        .eq(2)
+        .should("include.text", "Superuser")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+      cy.get('[data-test="role-chip"]')
+        .eq(3)
+        .should("include.text", "Dean")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+
+      cy.get('[data-test="role-chip"]')
+        .eq(4)
+        .should("include.text", "Manager")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+
+      cy.get('[data-test="role-chip"]')
+        .eq(1)
+        .find('[data-test="remove-role-button"]')
+        .click();
+    });
+
+    // Check that dropdown is hidden
+    cy.get(".multiselect__content").should("not.be.visible");
+
+    // Save new roles
+    cy.fixture("userDataUser").then((user) => {
+      user.data.roles = [
+        { id: 1, name: "Superuser", automatic: false, superuser: true },
+        { id: 3, name: "Students", automatic: true, superuser: false },
+        { id: 4, name: "Dean", automatic: false, superuser: false },
+        { id: 6, name: "Manager", automatic: false, superuser: false },
+      ];
+
+      const saveChangesRequest = interceptIndefinitely(
+        "PUT",
+        "api/v1/users/2",
+        {
+          statusCode: 200,
+          body: user,
+        },
+        "saveChangesRequest",
+      );
+
+      cy.intercept("GET", "/api/v1/users/2", {
+        statusCode: 200,
+        body: user,
+      }).as("userRequest");
+
+      cy.get('[data-test="users-roles-save-button"]')
+        .should("have.text", "app.save")
+        .click();
+
+      // Check loading
+      cy.get('[data-test="role-dropdown"]').should(
+        "have.class",
+        "multiselect--disabled",
+      );
+      cy.get('[data-test="users-roles-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          saveChangesRequest.sendResponse();
+        });
+    });
+
+    cy.wait("@saveChangesRequest").then((interception) => {
+      expect(interception.request.body).to.deep.include({
+        roles: [3, 1, 4, 6],
+      });
+    });
+
+    // Check that redirect to user view worked
+    cy.url().should("include", "/admin/users/2");
+    cy.url().should("not.include", "/edit");
+
+    cy.wait("@userRequest");
+  });
+
+  it("check that superuser role is disabled for users that are not superusers", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.superuser = false;
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.update",
+        "users.create",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="security-tab-button"]').click();
+
+    cy.get('[data-test="role-dropdown"]').click();
+
+    // Check if correct options are shown
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").should("have.length", 5);
+    cy.get(".multiselect__option")
+      .eq(0)
+      .should("include.text", "Superuser")
+      .and("include.text", "admin.roles.superuser")
+      .and("not.include.text", "admin.roles.automatic")
+      .and("be.visible")
+      .and("have.class", "multiselect__option--disabled");
+    cy.get(".multiselect__option")
+      .eq(1)
+      .should("include.text", "Staff")
+      .and("not.include.text", "admin.roles.superuser")
+      .and("not.include.text", "admin.roles.automatic")
+      .and("be.visible")
+      .and("not.have.class", "multiselect__option--disabled")
+      .and("have.class", "multiselect__option--selected");
+    cy.get(".multiselect__option")
+      .eq(2)
+      .should("include.text", "Students")
+      .and("include.text", "admin.roles.automatic")
+      .and("not.include.text", "admin.roles.superuser")
+      .and("be.visible")
+      .and("have.class", "multiselect__option--disabled");
+    cy.get(".multiselect__option")
+      .eq(3)
+      .should(
+        "include.text",
+        "No elements found. Consider changing the search query.",
+      )
+      .and("not.be.visible");
+    cy.get(".multiselect__option")
+      .eq(4)
+      .should("include.text", "admin.roles.no_data")
+      .and("not.be.visible");
+  });
+
+  it("change role errors", function () {
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="security-tab-button"]').click();
+
+    // Check with 422 error
+    cy.intercept("PUT", "api/v1/users/2", {
+      statusCode: 422,
+      body: {
+        errors: {
+          roles: ["The roles field is required."],
+        },
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="users-roles-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    cy.get('[data-test="roles-field"]').should(
+      "include.text",
+      "The roles field is required.",
+    );
+
+    // Check with 500 error
+    cy.intercept("PUT", "api/v1/users/2", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="users-roles-save-button"]').click();
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that 422 error messages are hidden
+    cy.get('[data-test="roles-field"]').should(
+      "not.include.text",
+      "The roles field is required.",
+    );
+
+    // Check with 428 error (stale error)
+    cy.fixture("userDataUser.json").then((user) => {
+      user.data.roles = [
+        { id: 3, name: "Students", automatic: true },
+        { id: 4, name: "Dean", automatic: false },
+        { id: 6, name: "Manager", automatic: false },
+      ];
+      user.data.user_locale = "de";
+      user.data.timezone = "Europe/Berlin";
+
+      cy.intercept("PUT", "api/v1/users/2", {
+        statusCode: 428,
+        body: {
+          message: " The user entity was updated in the meanwhile!",
+          new_model: user.data,
+        },
+      }).as("saveChangesRequest");
+
+      cy.intercept("GET", "api/v1/users/2", {
+        statusCode: 200,
+        body: user,
+      }).as("userRequest");
+    });
+
+    cy.get('[data-test="stale-user-dialog"]').should("not.exist");
+
+    cy.get('[data-test="users-roles-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that stale dialog is shown
+    cy.get('[data-test="stale-user-dialog"]')
+      .should("be.visible")
+      .and("include.text", "The user entity was updated in the meanwhile!");
+
+    cy.get('[data-test="stale-dialog-reload-button"]').click();
+
+    // Check that redirected to view page
+    cy.url().should("include", "/admin/users/2");
+    cy.url().should("not.include", "/edit");
+
+    cy.wait("@userRequest");
+
+    // Visit edit page again
+    cy.visit("/admin/users/2/edit");
+
+    cy.get('[data-test="security-tab-button"]').click();
+
+    // Check with 404 error
+    cy.interceptAdminUsersIndexRequests();
+    cy.intercept("PUT", "api/v1/users/2 ", {
+      statusCode: 404,
+      body: {
+        message: "No query results for model",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="users-roles-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("not.include", "/admin/users/2/edit");
+    cy.url().should("include", "/admin/users");
+
+    cy.wait("@usersRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"No query results for model"}',
+      'app.flash.server_error.error_code_{"statusCode":404}',
+    ]);
+
+    // Visit edit page again
+    cy.visit("/admin/users/2/edit");
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="security-tab-button"]').click();
+
+    // Check with 401 error
+    cy.intercept("PUT", "api/v1/users/2", {
+      statusCode: 401,
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="users-roles-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users/2/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("change password", function () {
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="security-tab-button"]').click();
+
+    // Type in new password and confirmation
+    cy.get("#new_password").type("secretPassword123#");
+    cy.get("#new_password_confirmation").type("secretPassword123#");
+
+    // Try to change password
+    cy.fixture("userDataUser").then((user) => {
+      const saveChangesRequest = interceptIndefinitely(
+        "PUT",
+        "api/v1/users/2/password",
+        {
+          statusCode: 200,
+          body: user,
+        },
+        "saveChangesRequest",
+      );
+
+      cy.get('[data-test="change-password-save-button"]')
+        .should("have.text", "auth.change_password")
+        .click();
+
+      // Check loading
+      cy.get("#new_password").should("be.disabled");
+      cy.get("#new_password_confirmation")
+        .should("be.disabled")
+        .then(() => {
+          saveChangesRequest.sendResponse();
+        });
+    });
+
+    cy.wait("@saveChangesRequest").then((interception) => {
+      expect(interception.request.body).to.eql({
+        new_password: "secretPassword123#",
+        new_password_confirmation: "secretPassword123#",
+      });
+    });
+
+    // Check that message is shown
+    cy.checkToastMessage("auth.flash.password_changed");
+
+    // Check that redirect to user view worked
+    cy.url().should("include", "/admin/users/2");
+    cy.url().should("not.include", "/edit");
+
+    cy.wait("@userRequest");
+  });
+
+  it("change password errors", function () {
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="security-tab-button"]').click();
+
+    cy.get('[data-test="new-password-field"]').type(" ");
+    cy.get('[data-test="new-password-confirmation-field"]').type(" ");
+
+    // Check with 422 error
+    cy.intercept("PUT", "api/v1/users/2/password", {
+      statusCode: 422,
+      body: {
+        errors: {
+          new_password: ["The New password field is required."],
+          new_password_confirmation: [
+            "The New password confirmation field is required.",
+          ],
+        },
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="change-password-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    cy.get('[data-test="new-password-field"]').should(
+      "include.text",
+      "The New password field is required.",
+    );
+
+    cy.get('[data-test="new-password-confirmation-field"]').should(
+      "include.text",
+      "The New password confirmation field is required.",
+    );
+
+    // Check with 500 error
+    cy.get('[data-test="new-password-field"]')
+      .should("have.value", "")
+      .type("newSecretPassword123#");
+
+    cy.get('[data-test="new-password-confirmation-field"]')
+      .should("have.value", "")
+      .type("newSecretPassword123#");
+
+    cy.intercept("PUT", "api/v1/users/2/password", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="change-password-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that 422 error messages are hidden
+    cy.get('[data-test="new-password-field"]').should(
+      "not.include.text",
+      "The New password field is required.",
+    );
+
+    cy.get('[data-test="new-password-confirmation-field"]').should(
+      "not.include.text",
+      "The New password confirmation field is required.",
+    );
+
+    // Check with 404 error
+    cy.get('[data-test="new-password-field"]')
+      .should("have.value", "")
+      .type("newSecretPassword123#");
+
+    cy.get('[data-test="new-password-confirmation-field"]')
+      .should("have.value", "")
+      .type("newSecretPassword123#");
+
+    cy.interceptAdminUsersIndexRequests();
+    cy.intercept("PUT", "api/v1/users/2/password", {
+      statusCode: 404,
+      body: {
+        message: "No query results for model",
+      },
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="change-password-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("not.include", "/admin/users/2/edit");
+    cy.url().should("include", "/admin/users");
+
+    cy.wait("@usersRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"No query results for model"}',
+      'app.flash.server_error.error_code_{"statusCode":404}',
+    ]);
+
+    // Visit edit page again
+    cy.visit("/admin/users/2/edit");
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="security-tab-button"]').click();
+
+    // Check 401 error
+    cy.get('[data-test="new-password-field"]')
+      .should("have.value", "")
+      .type("newSecretPassword123#");
+
+    cy.get('[data-test="new-password-confirmation-field"]')
+      .should("have.value", "")
+      .type("newSecretPassword123#");
+
+    cy.intercept("PUT", "api/v1/users/2/password", {
+      statusCode: 401,
+    }).as("saveChangesRequest");
+
+    cy.get('[data-test="change-password-save-button"]').click();
+
+    cy.wait("@saveChangesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users/2/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("load roles errors", function () {
+    // Check with 500 error
+    const rolesRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/roles*",
+      {
+        statusCode: 500,
+        body: {
+          message: "Test",
+        },
+      },
+      "rolesRequest",
+    );
+
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="security-tab-button"]').click();
+
+    // Check loading
+    cy.get('[data-test="users-roles-save-button"]').should("be.disabled");
+
+    cy.get('[data-test="role-dropdown"]')
+      .should("have.class", "multiselect--disabled")
+      .then(() => {
+        rolesRequest.sendResponse();
+      });
+
+    cy.wait("@rolesRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    cy.get('[data-test="role-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="users-roles-save-button"]').should("be.disabled");
+
+    // Reload roles without errors
+    cy.intercept("GET", "api/v1/roles*", {
+      fixture: "roles.json",
+    }).as("rolesRequest");
+
+    cy.get('[data-test="roles-reload-button"]').click();
+
+    cy.wait("@rolesRequest");
+
+    cy.get('[data-test="role-dropdown"]').should(
+      "not.have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="users-roles-save-button"]').should("not.be.disabled");
+
+    cy.get('[data-test="roles-reload-button"]').should("not.exist");
+
+    cy.get('[data-test="role-dropdown"]').click();
+
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").should("have.length", 5);
+
+    // Check with 500 error when switching pages
+    cy.intercept("GET", "api/v1/roles*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("rolesRequest");
+
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get('[data-test="next-page-button"]').click();
+
+    cy.wait("@rolesRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    cy.get('[data-test="role-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="users-roles-save-button"]').should("be.disabled");
+
+    // Check with 401 error
+    cy.intercept("GET", "api/v1/roles*", {
+      statusCode: 401,
+    }).as("rolesRequest");
+
+    cy.reload();
+
+    cy.get('[data-test="security-tab-button"]').click();
+
+    cy.wait("@rolesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users/2/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+
+    // Visit edit page again with roles
+    cy.intercept("GET", "api/v1/roles*", {
+      fixture: "roles.json",
+    }).as("rolesRequest");
+
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="security-tab-button"]').click();
+
+    cy.wait("@rolesRequest");
+
+    cy.get('[data-test="role-dropdown"]').click();
+
+    // Check with 401 error when switching pages
+    cy.intercept("GET", "api/v1/roles*", {
+      statusCode: 401,
+    }).as("rolesRequest");
+
+    cy.get(".multiselect__content").should("be.visible");
+
+    cy.get('[data-test="next-page-button"]').click();
+
+    cy.wait("@rolesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users/2/edit");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminUsersIndex.cy.js b/tests/Frontend/e2e/AdminUsersIndex.cy.js
new file mode 100644
index 000000000..efc491fa4
--- /dev/null
+++ b/tests/Frontend/e2e/AdminUsersIndex.cy.js
@@ -0,0 +1,1986 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin users index", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminUsersIndexRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.fixture("config.json").then((config) => {
+      config.data.auth.local = true;
+
+      cy.intercept("GET", "api/v1/config", {
+        statusCode: 200,
+        body: config,
+      });
+    });
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin/users");
+  });
+
+  it("visit with user without permission to view users", function () {
+    // Check with missing users.viewAny permission
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["admin.view"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/users");
+
+    cy.checkToastMessage("app.flash.unauthorized");
+
+    // Check if the welcome page is shown
+    cy.url().should("not.include", "/admin/users");
+    cy.get("h1").should("be.visible").and("contain", "home.title");
+  });
+
+  it("load users", function () {
+    const usersRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/users*",
+      { fixture: "users.json" },
+      "usersRequest",
+    );
+
+    cy.visit("/admin/users");
+
+    cy.contains("admin.title");
+
+    // Test loading
+    cy.get("[data-test=user-search]")
+      .eq(0)
+      .within(() => {
+        cy.get("input").should("be.visible").and("be.disabled");
+        cy.get("button").should("be.visible").and("be.disabled");
+      });
+
+    cy.get('[data-test="role-dropdown"]')
+      .find(".multiselect__tags")
+      .should("include.text", "admin.users.role_filter");
+    cy.get('[data-test="role-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="users-add-button"]').should("not.exist");
+
+    cy.get('[data-test="overlay"]')
+      .should("be.visible")
+      .then(() => {
+        usersRequest.sendResponse();
+      });
+
+    cy.wait("@usersRequest");
+
+    // Check that loading is over
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    cy.get("[data-test=user-search]")
+      .eq(0)
+      .within(() => {
+        cy.get("input").should("be.visible").and("not.be.disabled");
+        cy.get("button").should("be.visible").and("not.be.disabled");
+      });
+
+    cy.get('[data-test="role-dropdown"]')
+      .find(".multiselect__tags")
+      .should("include.text", "admin.users.role_filter");
+    cy.get('[data-test="role-dropdown"]').should(
+      "not.have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="users-add-button"]').should("not.exist");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.users.index");
+
+    // Check that headers are displayed correctly
+    cy.get('[data-test="user-header-cell"]').should("have.length", 7);
+
+    cy.get('[data-test="user-header-cell"]')
+      .eq(0)
+      .should("have.text", "app.id");
+    cy.get('[data-test="user-header-cell"]')
+      .eq(1)
+      .should("have.text", "app.firstname");
+    cy.get('[data-test="user-header-cell"]')
+      .eq(2)
+      .should("have.text", "app.lastname");
+    cy.get('[data-test="user-header-cell"]')
+      .eq(3)
+      .should("have.text", "admin.users.email");
+    cy.get('[data-test="user-header-cell"]')
+      .eq(4)
+      .should("have.text", "admin.users.authenticator.title");
+    cy.get('[data-test="user-header-cell"]')
+      .eq(5)
+      .should("have.text", "app.roles");
+    cy.get('[data-test="user-header-cell"]')
+      .eq(6)
+      .should("have.text", "app.actions");
+
+    // Check that users are displayed correctly
+    cy.get('[data-test="user-item"]').should("have.length", 4);
+
+    cy.get('[data-test="user-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="user-item-cell"]').should("have.length", 7);
+
+        cy.get('[data-test="user-item-cell"]').eq(0).should("have.text", "1");
+        cy.get('[data-test="user-item-cell"]')
+          .eq(1)
+          .should("have.text", "John");
+        cy.get('[data-test="user-item-cell"]').eq(2).should("have.text", "Doe");
+        cy.get('[data-test="user-item-cell"]')
+          .eq(3)
+          .should("have.text", "JohnDoe@domain.tld");
+        cy.get('[data-test="user-item-cell"]')
+          .eq(4)
+          .should("have.text", "admin.users.authenticator.local");
+        cy.get('[data-test="user-item-cell"]')
+          .eq(5)
+          .should("have.text", "Superuser");
+
+        cy.get('[data-test="user-item-cell"]')
+          .eq(6)
+          .within(() => {
+            cy.get('[data-test="users-view-button"]').should("be.visible");
+            cy.get('[data-test="users-edit-button"]').should("be.visible");
+            cy.get('[data-test="users-delete-button"]').should("not.exist");
+            cy.get('[data-test="users-reset-password-button"]').should(
+              "not.exist",
+            );
+          });
+      });
+
+    cy.get('[data-test="user-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="user-item-cell"]').should("have.length", 7);
+
+        cy.get('[data-test="user-item-cell"]').eq(0).should("have.text", "2");
+        cy.get('[data-test="user-item-cell"]')
+          .eq(1)
+          .should("have.text", "Laura");
+        cy.get('[data-test="user-item-cell"]')
+          .eq(2)
+          .should("have.text", "Rivera");
+        cy.get('[data-test="user-item-cell"]')
+          .eq(3)
+          .should("have.text", "LauraWRivera@domain.tld");
+        cy.get('[data-test="user-item-cell"]')
+          .eq(4)
+          .should("have.text", "admin.users.authenticator.local");
+        cy.get('[data-test="user-item-cell"]')
+          .eq(5)
+          .should("have.text", "StudentsStaff");
+
+        cy.get('[data-test="user-item-cell"]')
+          .eq(6)
+          .within(() => {
+            cy.get('[data-test="users-view-button"]').should("not.exist");
+            cy.get('[data-test="users-edit-button"]').should("not.exist");
+            cy.get('[data-test="users-delete-button"]').should("not.exist");
+            cy.get('[data-test="users-reset-password-button"]').should(
+              "not.exist",
+            );
+          });
+      });
+
+    cy.get('[data-test="user-item"]')
+      .eq(2)
+      .within(() => {
+        cy.get('[data-test="user-item-cell"]').should("have.length", 7);
+
+        cy.get('[data-test="user-item-cell"]').eq(0).should("have.text", "3");
+        cy.get('[data-test="user-item-cell"]')
+          .eq(1)
+          .should("have.text", "Juan");
+        cy.get('[data-test="user-item-cell"]')
+          .eq(2)
+          .should("have.text", "Walter");
+        cy.get('[data-test="user-item-cell"]')
+          .eq(3)
+          .should("have.text", "JuanMWalter@domain.tld");
+        cy.get('[data-test="user-item-cell"]')
+          .eq(4)
+          .should("have.text", "admin.users.authenticator.ldap");
+        cy.get('[data-test="user-item-cell"]')
+          .eq(5)
+          .should("have.text", "Students");
+
+        cy.get('[data-test="user-item-cell"]')
+          .eq(6)
+          .within(() => {
+            cy.get('[data-test="users-view-button"]').should("not.exist");
+            cy.get('[data-test="users-edit-button"]').should("not.exist");
+            cy.get('[data-test="users-delete-button"]').should("not.exist");
+            cy.get('[data-test="users-reset-password-button"]').should(
+              "not.exist",
+            );
+          });
+      });
+
+    cy.get('[data-test="user-item"]')
+      .eq(3)
+      .within(() => {
+        cy.get('[data-test="user-item-cell"]').should("have.length", 7);
+
+        cy.get('[data-test="user-item-cell"]').eq(0).should("have.text", "100");
+        cy.get('[data-test="user-item-cell"]').eq(1).should("have.text", "Max");
+        cy.get('[data-test="user-item-cell"]').eq(2).should("have.text", "Doe");
+        cy.get('[data-test="user-item-cell"]')
+          .eq(3)
+          .should("have.text", "MaxDoe@domain.tld");
+        cy.get('[data-test="user-item-cell"]')
+          .eq(4)
+          .should("have.text", "admin.users.authenticator.local");
+        cy.get('[data-test="user-item-cell"]')
+          .eq(5)
+          .should("have.text", "Superuser");
+
+        cy.get('[data-test="user-item-cell"]')
+          .eq(6)
+          .within(() => {
+            cy.get('[data-test="users-view-button"]').should("not.exist");
+            cy.get('[data-test="users-edit-button"]').should("not.exist");
+            cy.get('[data-test="users-delete-button"]').should("not.exist");
+            cy.get('[data-test="users-reset-password-button"]').should(
+              "not.exist",
+            );
+          });
+      });
+  });
+
+  it("load users errors", function () {
+    cy.intercept("GET", "api/v1/users*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("usersRequest");
+
+    cy.visit("/admin/users");
+
+    cy.wait("@usersRequest");
+
+    // Check that error message gets shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that overlay is shown
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that components are not disabled
+    cy.get("[data-test=user-search]")
+      .eq(0)
+      .within(() => {
+        cy.get("input").should("be.visible").and("not.be.disabled");
+        cy.get("button").should("be.visible").and("not.be.disabled");
+      });
+
+    cy.get('[data-test="role-dropdown"]')
+      .find(".multiselect__tags")
+      .should("include.text", "admin.users.role_filter");
+    cy.get('[data-test="role-dropdown"]').should(
+      "not.have.class",
+      "multiselect--disabled",
+    );
+
+    cy.fixture("users.json").then((users) => {
+      users.data = users.data.slice(0, 1);
+      users.meta.last_page = 3;
+      users.meta.per_page = 1;
+      users.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/users*", {
+        statusCode: 200,
+        body: users,
+      }).as("usersRequest");
+    });
+
+    // Check if reload button exists and click it
+    cy.get('[data-test="loading-retry-button"]')
+      .should("include.text", "app.reload")
+      .click();
+
+    cy.wait("@usersRequest");
+
+    // Check that overlay gets hidden
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
+
+    // Check if user is shown and contains the correct data
+    cy.get('[data-test="user-item"]').should("have.length", 1);
+
+    cy.get('[data-test="user-item"]').eq(0).should("include.text", "John");
+
+    // Switch to next page with general error
+    cy.intercept("GET", "api/v1/users*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("usersRequest");
+
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "2",
+      });
+    });
+
+    // Check that error message gets shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that overlay is shown
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that components are not disabled
+    cy.get("[data-test=user-search]")
+      .eq(0)
+      .within(() => {
+        cy.get("input").should("be.visible").and("not.be.disabled");
+        cy.get("button").should("be.visible").and("not.be.disabled");
+      });
+
+    cy.get('[data-test="role-dropdown"]')
+      .find(".multiselect__tags")
+      .should("include.text", "admin.users.role_filter");
+    cy.get('[data-test="role-dropdown"]').should(
+      "not.have.class",
+      "multiselect--disabled",
+    );
+
+    cy.fixture("users.json").then((users) => {
+      users.data = users.data.slice(0, 1);
+      users.meta.last_page = 4;
+      users.meta.per_page = 1;
+      users.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/users*", {
+        statusCode: 200,
+        body: users,
+      }).as("usersRequest");
+    });
+
+    // Check if reload button exists and click it
+    cy.get('[data-test="loading-retry-button"]')
+      .should("include.text", "app.reload")
+      .click();
+
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that overlay gets hidden
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
+
+    // Check if user is shown and contains the correct data
+    cy.get('[data-test="user-item"]').should("have.length", 1);
+    cy.get('[data-test="user-item"]').eq(0).should("include.text", "John");
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Switch to next page with 401 error
+    cy.intercept("GET", "api/v1/users*", {
+      statusCode: 401,
+    }).as("usersRequest");
+
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+    cy.wait("@usersRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+
+    // Reload page with 401 error
+    cy.visit("/admin/users");
+
+    cy.wait("@usersRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("load users page out of bounds", function () {
+    cy.fixture("users.json").then((users) => {
+      users.data = users.data.slice(0, 1);
+      users.meta.last_page = 2;
+      users.meta.per_page = 1;
+      users.meta.to = 1;
+      users.meta.total = 2;
+
+      cy.intercept("GET", "api/v1/users*", {
+        statusCode: 200,
+        body: users,
+      }).as("usersRequest");
+    });
+
+    cy.visit("/admin/users");
+    cy.wait("@usersRequest");
+
+    // Switch to next page but respond with no users on second page
+    cy.fixture("users.json").then((users) => {
+      users.data = [];
+      users.meta.current_page = 2;
+      users.meta.from = null;
+      users.meta.per_page = 2;
+      users.meta.to = null;
+      users.meta.total = 2;
+      users.meta.total_no_filter = 2;
+
+      const emptyUsersRequest = interceptIndefinitely(
+        "GET",
+        "api/v1/users*",
+        {
+          statusCode: 200,
+          body: users,
+        },
+        "usersRequest",
+      );
+
+      cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+      cy.fixture("users.json").then((users) => {
+        users.data = users.data.slice(0, 2);
+        users.meta.per_page = 2;
+        users.meta.to = 2;
+        users.meta.total = 2;
+        users.meta.total_no_filter = 2;
+
+        cy.intercept("GET", "api/v1/users*", {
+          statusCode: 200,
+          body: users,
+        })
+          .as("usersRequest")
+          .then(() => {
+            emptyUsersRequest.sendResponse();
+          });
+      });
+    });
+
+    // Wait for first user request and check that page is still the same
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "2",
+      });
+    });
+
+    // Wait for second user request and check that page is reset
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that pagination is shown correctly
+    cy.get('[data-test="paginator-page"]').should("have.length", 1);
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+  });
+
+  it("load roles errors", function () {
+    const rolesRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/roles*",
+      {
+        statusCode: 500,
+        body: {
+          message: "Test",
+        },
+      },
+      "rolesRequest",
+    );
+
+    cy.visit("/admin/users");
+
+    cy.wait("@usersRequest");
+
+    // Check that overlay is hidden
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check loading
+    cy.get('[data-test="role-dropdown"]')
+      .should("have.class", "multiselect--disabled")
+      .then(() => {
+        rolesRequest.sendResponse();
+      });
+
+    cy.wait("@rolesRequest");
+
+    // Check that error message gets shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that multiselect is disabled
+    cy.get('[data-test="role-dropdown"]')
+      .find(".multiselect__tags")
+      .should("include.text", "admin.users.role_filter");
+    cy.get('[data-test="role-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    // Reload roles
+    cy.intercept("GET", "api/v1/roles*", {
+      fixture: "roles.json",
+    }).as("rolesRequest");
+
+    cy.get('[data-test="roles-reload-button"]').should("be.visible").click();
+
+    cy.wait("@rolesRequest");
+
+    // Check that multiselect is enabled and shown correctly
+    cy.get('[data-test="role-dropdown"]')
+      .find(".multiselect__tags")
+      .should("include.text", "admin.users.role_filter");
+    cy.get('[data-test="role-dropdown"]')
+      .should("not.have.class", "multiselect--disabled")
+      .click();
+
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").should("have.length", 5);
+    cy.get(".multiselect__option")
+      .eq(0)
+      .should("include.text", "Superuser")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(1)
+      .should("include.text", "Staff")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(2)
+      .should("include.text", "Students")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(3)
+      .should(
+        "include.text",
+        "No elements found. Consider changing the search query.",
+      )
+      .and("not.be.visible");
+    cy.get(".multiselect__option")
+      .eq(4)
+      .should("include.text", "admin.roles.no_data")
+      .and("not.be.visible");
+
+    // Switch to next page with 500 error
+    cy.intercept("GET", "api/v1/roles*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("rolesRequest");
+
+    cy.get(".multiselect__content").within(() => {
+      cy.get('[data-test="next-page-button"]').click();
+    });
+
+    // Check that error message gets shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that multiselect is closed and disabled
+    cy.get(".multiselect__content").should("not.be.visible");
+    cy.get('[data-test="role-dropdown"]')
+      .find(".multiselect__tags")
+      .should("include.text", "admin.users.role_filter");
+    cy.get('[data-test="role-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    // Reload roles
+    cy.intercept("GET", "api/v1/roles*", {
+      fixture: "roles.json",
+    }).as("rolesRequest");
+
+    cy.get('[data-test="roles-reload-button"]').should("be.visible").click();
+
+    cy.wait("@rolesRequest");
+
+    // Check that multiselect is enabled and shown correctly
+    cy.get('[data-test="role-dropdown"]')
+      .find(".multiselect__tags")
+      .should("include.text", "admin.users.role_filter");
+    cy.get('[data-test="role-dropdown"]')
+      .should("not.have.class", "multiselect--disabled")
+      .click();
+
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").should("have.length", 5);
+    cy.get(".multiselect__option")
+      .eq(0)
+      .should("include.text", "Superuser")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(1)
+      .should("include.text", "Staff")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(2)
+      .should("include.text", "Students")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(3)
+      .should(
+        "include.text",
+        "No elements found. Consider changing the search query.",
+      )
+      .and("not.be.visible");
+    cy.get(".multiselect__option")
+      .eq(4)
+      .should("include.text", "admin.roles.no_data")
+      .and("not.be.visible");
+
+    // Switch to next page with 401 error
+    cy.intercept("GET", "api/v1/roles*", {
+      statusCode: 401,
+    }).as("rolesRequest");
+
+    cy.get(".multiselect__content").within(() => {
+      cy.get('[data-test="next-page-button"]').click();
+    });
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+
+    // Reload page with 401 error
+    cy.visit("/admin/users");
+
+    cy.wait("@rolesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("user search", function () {
+    cy.visit("/admin/users");
+
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query.name).to.be.undefined;
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check with no users found for this search query
+    cy.fixture("users.json").then((users) => {
+      users.data = [];
+      users.meta.from = null;
+      users.meta.per_page = 1;
+      users.meta.to = null;
+      users.meta.total = 0;
+
+      cy.intercept("GET", "api/v1/users*", {
+        statusCode: 200,
+        body: users,
+      }).as("usersRequest");
+    });
+
+    cy.get('[data-test="user-search"] > input').should("have.value", "");
+    cy.get('[data-test="user-search"] > input').type("Test");
+    cy.get('[data-test="user-search"] > button').click();
+
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query.name).to.equal("Test");
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that correct message is shown and no users are displayed
+    cy.contains("admin.users.no_data_filtered").should("be.visible");
+    cy.get('[data-test="user-item"]').should("not.exist");
+
+    // Check with no users available
+    cy.fixture("users.json").then((users) => {
+      users.data = [];
+      users.meta.from = null;
+      users.meta.per_page = 1;
+      users.meta.to = null;
+      users.meta.total = 0;
+      users.meta.total_no_filter = 0;
+
+      cy.intercept("GET", "api/v1/users*", {
+        statusCode: 200,
+        body: users,
+      }).as("usersRequest");
+    });
+
+    cy.get('[data-test="user-search"] > input').clear();
+    cy.get('[data-test="user-search"] > input').type("Test2");
+    cy.get('[data-test="user-search"] > input').type("{enter}");
+
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query.name).to.equal("Test2");
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that correct message is shown and no users are displayed
+    cy.contains("admin.users.no_data").should("be.visible");
+    cy.get('[data-test="user-item"]').should("have.length", 0);
+
+    // Check with 2 users on 2 pages
+    cy.fixture("users.json").then((users) => {
+      users.data = users.data.slice(0, 1);
+      users.meta.last_page = 2;
+      users.meta.per_page = 1;
+      users.meta.to = 1;
+      users.meta.total = 2;
+
+      cy.intercept("GET", "api/v1/users*", {
+        statusCode: 200,
+        body: users,
+      }).as("usersRequest");
+    });
+
+    cy.get('[data-test="user-search"] > input').clear();
+    cy.get('[data-test="user-search"] > input').type("e");
+    cy.get('[data-test="user-search"] > button').click();
+
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query.name).to.equal("e");
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that correct user is shown
+    cy.get('[data-test="user-item"]').should("have.length", 1);
+    cy.get('[data-test="user-item"]').eq(0).should("include.text", "John");
+
+    // Check that pagination shows the correct number of pages and switch to next page
+    cy.get('[data-test="paginator-page"]').should("have.length", 2);
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    cy.fixture("users.json").then((users) => {
+      users.data = users.data.slice(1, 2);
+      users.meta.current_page = 2;
+      users.meta.from = 2;
+      users.meta.last_page = 2;
+      users.meta.per_page = 1;
+      users.meta.to = 2;
+      users.meta.total = 2;
+
+      cy.intercept("GET", "api/v1/users*", {
+        statusCode: 200,
+        body: users,
+      }).as("usersRequest");
+    });
+
+    // Click on button for next page (eq(1) needed because there are two paginator components
+    // (first one for small devices second one for larger devices))
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    // Check if the search query stays the same after changing the page
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        name: "e",
+        page: "2",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(1)
+      .should("have.attr", "data-p-active", "true");
+
+    cy.get('[data-test="user-search"] > input').should("have.value", "e");
+
+    // Check that correct user is shown
+    cy.get('[data-test="user-item"]').should("have.length", 1);
+    cy.get('[data-test="user-item"]').eq(0).should("include.text", "Laura");
+
+    // Change search query and make sure that the page is reset
+    cy.fixture("users.json").then((users) => {
+      users.data = users.data.slice(0, 1);
+      users.meta.last_page = 2;
+      users.meta.per_page = 1;
+      users.meta.to = 1;
+      users.meta.total = 2;
+
+      cy.intercept("GET", "api/v1/users*", {
+        statusCode: 200,
+        body: users,
+      }).as("usersRequest");
+    });
+
+    cy.get('[data-test="user-search"] > input').clear();
+    cy.get('[data-test="user-search"] > input').type("o");
+    cy.get('[data-test="user-search"] > button').click();
+
+    // Check that users are loaded with the page reset to the first page
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        name: "o",
+        page: "1",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+  });
+
+  it("filter users", function () {
+    cy.visit("/admin/users");
+
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query.role).to.be.undefined;
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    cy.get(".multiselect__content").should("not.be.visible");
+    cy.get('[data-test="clear-roles-button"]').should("not.exist");
+
+    cy.get('[data-test="role-dropdown"]')
+      .find(".multiselect__tags")
+      .should("include.text", "admin.users.role_filter")
+      .click();
+
+    // Check if correct options are shown
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").should("have.length", 5);
+    cy.get(".multiselect__option")
+      .eq(0)
+      .should("include.text", "Superuser")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(1)
+      .should("include.text", "Staff")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(2)
+      .should("include.text", "Students")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(3)
+      .should(
+        "include.text",
+        "No elements found. Consider changing the search query.",
+      )
+      .and("not.be.visible");
+    cy.get(".multiselect__option")
+      .eq(4)
+      .should("include.text", "admin.roles.no_data")
+      .and("not.be.visible");
+
+    // Change role and respond with no users found for this role
+    cy.fixture("users.json").then((users) => {
+      users.data = [];
+      users.meta.from = null;
+      users.meta.per_page = 1;
+      users.meta.to = null;
+      users.meta.total = 0;
+
+      cy.intercept("GET", "api/v1/users*", {
+        statusCode: 200,
+        body: users,
+      }).as("usersRequest");
+    });
+
+    cy.get(".multiselect__option").eq(1).click();
+
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query.role).to.equal("2");
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    cy.get(".multiselect__content").should("not.be.visible");
+    cy.contains("admin.users.no_data_filtered").should("be.visible");
+    cy.get('[data-test="user-item"]').should("have.length", 0);
+
+    // Check that role are shown correctly and change it again to check for no users available
+    cy.get('[data-test="role-dropdown"]')
+      .find(".multiselect__tags")
+      .should("include.text", "Staff")
+      .click();
+    cy.get('[data-test="clear-roles-button"]').should("be.visible");
+
+    cy.fixture("users.json").then((users) => {
+      users.data = [];
+      users.meta.from = null;
+      users.meta.per_page = 1;
+      users.meta.to = null;
+      users.meta.total = 0;
+      users.meta.total_no_filter = 0;
+
+      cy.intercept("GET", "api/v1/users*", {
+        statusCode: 200,
+        body: users,
+      }).as("usersRequest");
+    });
+
+    cy.get(".multiselect__option").eq(2).click();
+
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query.role).to.equal("3");
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    cy.get(".multiselect__content").should("not.be.visible");
+    cy.contains("admin.users.no_data").should("be.visible");
+    cy.get('[data-test="user-item"]').should("have.length", 0);
+
+    cy.get('[data-test="role-dropdown"]')
+      .find(".multiselect__tags")
+      .should("include.text", "Students")
+      .click();
+    cy.get('[data-test="clear-roles-button"]').should("be.visible");
+
+    // Check with 3 users on 3 pages
+    cy.fixture("users.json").then((users) => {
+      users.data = users.data.slice(0, 1);
+      users.data[0].roles = [{ id: 4, name: "Dean", automatic: false }];
+      users.meta.last_page = 3;
+      users.meta.per_page = 1;
+      users.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/users*", {
+        statusCode: 200,
+        body: users,
+      }).as("usersRequest");
+    });
+
+    // Switch to next role page
+    cy.get(".multiselect__content")
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="previous-page-button"]')
+          .should("include.text", "app.previous_page")
+          .and("be.disabled");
+        cy.get('[data-test="next-page-button"]')
+          .should("include.text", "app.next_page")
+          .and("not.be.disabled");
+
+        const userRoleRequest = interceptIndefinitely(
+          "GET",
+          "api/v1/roles*",
+          {
+            statusCode: 200,
+            body: {
+              data: [
+                {
+                  id: 4,
+                  name: "Dean",
+                  default: false,
+                  updated_at: "2021-01-08T15:51:08.000000Z",
+                  model_name: "Role",
+                  room_limit: 20,
+                },
+                {
+                  id: 5,
+                  name: "Faculty",
+                  default: false,
+                  updated_at: "2021-03-19T09:12:44.000000Z",
+                  model_name: "Role",
+                  room_limit: 20,
+                },
+                {
+                  id: 6,
+                  name: "Manager",
+                  default: false,
+                  updated_at: "2021-05-22T11:55:21.000000Z",
+                  model_name: "Role",
+                  room_limit: -1,
+                },
+              ],
+              meta: {
+                current_page: 2,
+                from: 4,
+                last_page: 2,
+                per_page: 3,
+                to: 6,
+                total: 6,
+              },
+            },
+          },
+          "userRoleRequest",
+        );
+        cy.get('[data-test="next-page-button"]').click();
+
+        // Check loading
+        cy.get('[data-test="previous-page-button"]').should("be.disabled");
+        cy.get('[data-test="next-page-button"]')
+          .should("be.disabled")
+          .then(() => {
+            userRoleRequest.sendResponse();
+          });
+      });
+
+    cy.wait("@userRoleRequest");
+
+    cy.get(".multiselect__content")
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="previous-page-button"]').should("not.be.disabled");
+        cy.get('[data-test="next-page-button"]').should("be.disabled");
+      });
+
+    cy.get(".multiselect__option").should("have.length", 5);
+    cy.get(".multiselect__option")
+      .eq(0)
+      .should("include.text", "Dean")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(1)
+      .should("include.text", "Faculty")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(2)
+      .should("include.text", "Manager")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(3)
+      .should(
+        "include.text",
+        "No elements found. Consider changing the search query.",
+      )
+      .and("not.be.visible");
+    cy.get(".multiselect__option")
+      .eq(4)
+      .should("include.text", "admin.roles.no_data")
+      .and("not.be.visible");
+
+    cy.get(".multiselect__option").eq(0).click();
+
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query.role).to.equal("4");
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    cy.get(".multiselect__content").should("not.be.visible");
+    cy.get('[data-test="user-item"]').should("have.length", 1);
+    cy.get('[data-test="user-item"]').eq(0).should("include.text", "John");
+
+    cy.get('[data-test="role-dropdown"]')
+      .find(".multiselect__tags")
+      .should("include.text", "Dean");
+    cy.get('[data-test="clear-roles-button"]').should("be.visible");
+
+    // Check that pagination shows the correct number of pages and switch to next page
+    cy.get('[data-test="paginator-page"]').should("have.length", 4);
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    cy.fixture("users.json").then((users) => {
+      users.data = users.data.slice(1, 2);
+      users.meta.current_page = 2;
+      users.meta.from = 2;
+      users.meta.last_page = 4;
+      users.meta.per_page = 1;
+      users.meta.to = 2;
+
+      cy.intercept("GET", "api/v1/users*", {
+        statusCode: 200,
+        body: users,
+      }).as("usersRequest");
+    });
+
+    // Click on button for next page (eq(1) needed because there are two paginator components
+    // (first one for small devices second one for larger devices))
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    // Check if the search query stays the same after changing the page
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        role: "4",
+        page: "2",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(1)
+      .should("have.attr", "data-p-active", "true");
+
+    cy.get('[data-test="role-dropdown"]')
+      .find(".multiselect__tags")
+      .should("include.text", "Dean");
+    cy.get('[data-test="clear-roles-button"]').should("be.visible");
+
+    cy.get('[data-test="user-item"]').should("have.length", 1);
+    cy.get('[data-test="user-item"]').eq(0).should("include.text", "Laura");
+
+    // Clear role and make sure that page is reset
+    cy.fixture("users.json").then((users) => {
+      users.data = users.data.slice(0, 1);
+      users.meta.last_page = 4;
+      users.meta.per_page = 1;
+      users.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/users*", {
+        statusCode: 200,
+        body: users,
+      }).as("usersRequest");
+    });
+
+    cy.get('[data-test="clear-roles-button"]').click();
+
+    // Check that users are loaded with the page reset to the first page
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query.role).to.be.undefined;
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    cy.get('[data-test="role-dropdown"]')
+      .find(".multiselect__tags")
+      .should("include.text", "admin.users.role_filter");
+
+    cy.get('[data-test="clear-roles-button"]').should("not.exist");
+  });
+
+  it("sort users", function () {
+    cy.visit("/admin/users");
+
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "id",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that correct columns are sortable and correct sorting type is shown
+    cy.get('[data-test="user-header-cell"]').should("have.length", 7);
+    cy.get('[data-test="user-header-cell"]')
+      .eq(0)
+      .should("have.text", "app.id")
+      .and("have.attr", "data-p-sortable-column", "true")
+      .and("have.attr", "data-p-sorted", "true");
+    cy.get('[data-test="user-header-cell"]')
+      .eq(1)
+      .should("have.text", "app.firstname")
+      .and("have.attr", "data-p-sortable-column", "true")
+      .and("have.attr", "data-p-sorted", "false");
+    cy.get('[data-test="user-header-cell"]')
+      .eq(2)
+      .should("have.text", "app.lastname")
+      .and("have.attr", "data-p-sortable-column", "true")
+      .and("have.attr", "data-p-sorted", "false");
+    cy.get('[data-test="user-header-cell"]')
+      .eq(3)
+      .should("have.text", "admin.users.email")
+      .and("have.attr", "data-p-sortable-column", "true")
+      .and("have.attr", "data-p-sorted", "false");
+    cy.get('[data-test="user-header-cell"]')
+      .eq(4)
+      .should("have.text", "admin.users.authenticator.title")
+      .and("have.attr", "data-p-sortable-column", "true")
+      .and("have.attr", "data-p-sorted", "false");
+    cy.get('[data-test="user-header-cell"]')
+      .eq(5)
+      .should("have.text", "app.roles")
+      .and("not.have.attr", "data-p-sortable-column", "true");
+    cy.get('[data-test="user-header-cell"]')
+      .eq(6)
+      .should("have.text", "app.actions")
+      .and("not.have.attr", "data-p-sortable-column", "true");
+
+    // Change sorting type and response with 4 users on 4 different pages
+    cy.fixture("users.json").then((users) => {
+      users.data = users.data.slice(0, 1);
+      users.meta.last_page = 4;
+      users.meta.per_page = 1;
+      users.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/users*", {
+        statusCode: 200,
+        body: users,
+      }).as("usersRequest");
+    });
+
+    cy.get('[data-test="user-header-cell"]').eq(1).click();
+
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "firstname",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that sorting is correct
+    cy.get('[data-test="user-header-cell"]')
+      .eq(0)
+      .should("have.attr", "data-p-sorted", "false");
+
+    cy.get('[data-test="user-header-cell"]')
+      .eq(1)
+      .should("have.attr", "data-p-sorted", "true");
+
+    // Check that correct user is shown
+    cy.get('[data-test="user-item"]').should("have.length", 1);
+    cy.get('[data-test="user-item"]').eq(0).should("include.text", "John");
+
+    // Check that pagination shows the correct number of pages
+    cy.get('[data-test="paginator-page"]').should("have.length", 4);
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Switch to next page
+    cy.fixture("users.json").then((users) => {
+      users.data = users.data.slice(1, 2);
+      users.meta.current_page = 2;
+      users.meta.from = 2;
+      users.meta.last_page = 4;
+      users.meta.per_page = 1;
+      users.meta.to = 2;
+
+      cy.intercept("GET", "api/v1/users*", {
+        statusCode: 200,
+        body: users,
+      }).as("usersRequest");
+    });
+
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    // Check that sorting stays the same
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        sort_by: "firstname",
+        sort_direction: "asc",
+        page: "2",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(1)
+      .should("have.attr", "data-p-active", "true");
+
+    // Check that sorting stays the same
+    cy.get('[data-test="user-header-cell"]')
+      .eq(1)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "ascending");
+
+    // Check that correct user is shown
+    cy.get('[data-test="user-item"]').should("have.length", 1);
+    cy.get('[data-test="user-item"]').eq(0).should("include.text", "Laura");
+
+    // Change sorting direction and make sure that the page is reset
+    cy.fixture("users.json").then((users) => {
+      users.data = users.data.slice(0, 1);
+      users.meta.last_page = 4;
+      users.meta.per_page = 1;
+      users.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/users*", {
+        statusCode: 200,
+        body: users,
+      }).as("usersRequest");
+    });
+
+    cy.get('[data-test="user-header-cell"]').eq(1).click();
+
+    // Check that users are loaded with the page reset to the first page
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        sort_by: "firstname",
+        sort_direction: "desc",
+        page: "1",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Check that sorting is correct
+    cy.get('[data-test="user-header-cell"]')
+      .eq(1)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "descending");
+
+    // Check that correct user is shown
+    cy.get('[data-test="user-item"]').should("have.length", 1);
+    cy.get('[data-test="user-item"]').eq(0).should("include.text", "John");
+
+    // Change sorting type again
+    cy.get('[data-test="user-header-cell"]').eq(2).click();
+
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        sort_by: "lastname",
+        sort_direction: "asc",
+        page: "1",
+      });
+    });
+
+    // Check that sorting is correct
+    cy.get('[data-test="user-header-cell"]')
+      .eq(1)
+      .should("have.attr", "data-p-sorted", "false");
+
+    cy.get('[data-test="user-header-cell"]')
+      .eq(2)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "ascending");
+
+    // Switch to next page
+    cy.fixture("users.json").then((users) => {
+      users.data = users.data.slice(1, 2);
+      users.meta.current_page = 2;
+      users.meta.from = 2;
+      users.meta.last_page = 4;
+      users.meta.per_page = 1;
+      users.meta.to = 2;
+
+      cy.intercept("GET", "api/v1/users*", {
+        statusCode: 200,
+        body: users,
+      }).as("usersRequest");
+    });
+
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    // Check that sorting stays the same
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        sort_by: "lastname",
+        sort_direction: "asc",
+        page: "2",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(1)
+      .should("have.attr", "data-p-active", "true");
+
+    // Check that sorting stays the same
+    cy.get('[data-test="user-header-cell"]')
+      .eq(2)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "ascending");
+
+    // Check that correct user is shown
+    cy.get('[data-test="user-item"]').should("have.length", 1);
+    cy.get('[data-test="user-item"]').eq(0).should("include.text", "Laura");
+
+    // Change sorting and make sure that the page is reset
+    cy.fixture("users.json").then((users) => {
+      users.data = users.data.slice(0, 1);
+      users.meta.last_page = 4;
+      users.meta.per_page = 1;
+      users.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/users*", {
+        statusCode: 200,
+        body: users,
+      }).as("usersRequest");
+    });
+
+    cy.get('[data-test="user-header-cell"]').eq(3).click();
+
+    // Check that users are loaded with the page reset to the first page
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        sort_by: "email",
+        sort_direction: "asc",
+        page: "1",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Check that sorting is correct
+    cy.get('[data-test="user-header-cell"]')
+      .eq(2)
+      .should("have.attr", "data-p-sorted", "false");
+
+    cy.get('[data-test="user-header-cell"]')
+      .eq(3)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "ascending");
+
+    // Check that correct user is shown
+    cy.get('[data-test="user-item"]').should("have.length", 1);
+    cy.get('[data-test="user-item"]').eq(0).should("include.text", "John");
+
+    // Change sorting again
+    cy.get('[data-test="user-header-cell"]').eq(4).click();
+
+    cy.wait("@usersRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        sort_by: "authenticator",
+        sort_direction: "asc",
+        page: "1",
+      });
+    });
+
+    // Check that sorting is correct
+    cy.get('[data-test="user-header-cell"]')
+      .eq(3)
+      .should("have.attr", "data-p-sorted", "false");
+
+    cy.get('[data-test="user-header-cell"]')
+      .eq(4)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "ascending");
+  });
+
+  it("check button visibility with view permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/users");
+    cy.wait("@usersRequest");
+
+    cy.get('[data-test="users-add-button"]').should("not.exist");
+    cy.get('[data-test="user-item"]').should("have.length", 4);
+    cy.get('[data-test="user-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/1");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/1/edit");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="user-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/2");
+        cy.get('[data-test="users-edit-button"]').should("not.exist");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="user-item"]')
+      .eq(2)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/3");
+        cy.get('[data-test="users-edit-button"]').should("not.exist");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="user-item"]')
+      .eq(3)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/100");
+        cy.get('[data-test="users-edit-button"]').should("not.exist");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+      });
+  });
+
+  it("check button visibility with update permission", function () {
+    // Check with local users enabled
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.update",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/users");
+
+    cy.get('[data-test="users-add-button"]').should("not.exist");
+    cy.get('[data-test="user-item"]').should("have.length", 4);
+    cy.get('[data-test="user-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/1");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/1/edit");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="user-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]').should("be.visible");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/2/edit");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should(
+          "be.visible",
+        );
+      });
+
+    cy.get('[data-test="user-item"]')
+      .eq(2)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]').should("be.visible");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/3/edit");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="user-item"]')
+      .eq(3)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]').should("be.visible");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/100/edit");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should(
+          "be.visible",
+        );
+      });
+
+    // Check with local users disabled (Reset password button should not be visible)
+    cy.intercept("GET", "api/v1/config", { fixture: "config.json" });
+
+    cy.reload();
+
+    cy.get('[data-test="users-add-button"]').should("not.exist");
+
+    cy.get('[data-test="user-item"]').should("have.length", 4);
+    cy.get('[data-test="user-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/1");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/1/edit");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="user-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]').should("be.visible");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/2/edit");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="user-item"]')
+      .eq(2)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]').should("be.visible");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/3/edit");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="user-item"]')
+      .eq(3)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]').should("be.visible");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/100/edit");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+      });
+  });
+
+  it("check button visibility with add permission", function () {
+    // Check with local users enabled
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.update",
+        "users.create",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/users");
+    cy.wait("@usersRequest");
+
+    cy.get('[data-test="users-add-button"]')
+      .should("be.visible")
+      .and("have.attr", "href", "/admin/users/new");
+    cy.get('[data-test="user-item"]').should("have.length", 4);
+    cy.get('[data-test="user-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/1");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/1/edit");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="user-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/2");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/2/edit");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should(
+          "be.visible",
+        );
+      });
+
+    cy.get('[data-test="user-item"]')
+      .eq(2)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/3");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/3/edit");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="user-item"]')
+      .eq(3)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/100");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/100/edit");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should(
+          "be.visible",
+        );
+      });
+
+    // Check with local users disabled
+    cy.intercept("GET", "api/v1/config", { fixture: "config.json" });
+
+    cy.reload();
+
+    cy.get('[data-test="users-add-button"]').should("not.exist");
+    cy.get('[data-test="user-item"]').should("have.length", 4);
+    cy.get('[data-test="user-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/1");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/1/edit");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="user-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/2");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/2/edit");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="user-item"]')
+      .eq(2)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/3");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/3/edit");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="user-item"]')
+      .eq(3)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/100");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/100/edit");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+      });
+  });
+
+  it("check button visibility with delete permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.delete",
+        "users.update",
+        "users.create",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/users");
+    cy.wait("@usersRequest");
+
+    cy.get('[data-test="users-add-button"]').should("be.visible");
+    cy.get('[data-test="user-item"]').should("have.length", 4);
+    // Check that delete button for current user does not exist
+    cy.get('[data-test="user-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/1");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/1/edit");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="user-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/2");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/2/edit");
+        cy.get('[data-test="users-delete-button"]').should("be.visible");
+        cy.get('[data-test="users-reset-password-button"]').should(
+          "be.visible",
+        );
+      });
+
+    cy.get('[data-test="user-item"]')
+      .eq(2)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/3");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/3/edit");
+        cy.get('[data-test="users-delete-button"]').should("be.visible");
+        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+      });
+    cy.get('[data-test="user-item"]')
+      .eq(3)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/100");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/100/edit");
+        cy.get('[data-test="users-delete-button"]').should("be.visible");
+        cy.get('[data-test="users-reset-password-button"]').should(
+          "be.visible",
+        );
+      });
+  });
+
+  it("check button visibility for user that is no superuser", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.superuser = false;
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.delete",
+        "users.update",
+        "users.create",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/users");
+    cy.wait("@usersRequest");
+
+    cy.get('[data-test="users-add-button"]').should("be.visible");
+    cy.get('[data-test="user-item"]').should("have.length", 4);
+    // Check that delete button for current user does not exist
+    cy.get('[data-test="user-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/1");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/1/edit");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+      });
+
+    cy.get('[data-test="user-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/2");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/2/edit");
+        cy.get('[data-test="users-delete-button"]').should("be.visible");
+        cy.get('[data-test="users-reset-password-button"]').should(
+          "be.visible",
+        );
+      });
+
+    cy.get('[data-test="user-item"]')
+      .eq(2)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/3");
+        cy.get('[data-test="users-edit-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/3/edit");
+        cy.get('[data-test="users-delete-button"]').should("be.visible");
+        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+      });
+    cy.get('[data-test="user-item"]')
+      .eq(3)
+      .within(() => {
+        cy.get('[data-test="users-view-button"]')
+          .should("be.visible")
+          .and("have.attr", "href", "/admin/users/100");
+        cy.get('[data-test="users-edit-button"]').should("not.exist");
+        cy.get('[data-test="users-delete-button"]').should("not.exist");
+        cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+      });
+  });
+});
diff --git a/tests/Frontend/e2e/AdminUsersIndexUserActions.cy.js b/tests/Frontend/e2e/AdminUsersIndexUserActions.cy.js
new file mode 100644
index 000000000..278a9b46b
--- /dev/null
+++ b/tests/Frontend/e2e/AdminUsersIndexUserActions.cy.js
@@ -0,0 +1,376 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin users index user actions", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminUsersIndexRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.update",
+        "users.create",
+        "users.delete",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.fixture("config.json").then((config) => {
+      config.data.auth.local = true;
+
+      cy.intercept("GET", "api/v1/config", {
+        statusCode: 200,
+        body: config,
+      });
+    });
+  });
+
+  it("delete user", function () {
+    cy.visit("/admin/users");
+
+    cy.wait("@usersRequest");
+
+    cy.get('[data-test="user-item"]').should("have.length", 4);
+
+    cy.get('[data-test="users-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="user-item"]')
+      .eq(2)
+      .find('[data-test="users-delete-button"]')
+      .click();
+
+    cy.get('[data-test="users-delete-dialog"]').should("be.visible");
+
+    // Check that dialog shows correct data
+    cy.get('[data-test="users-delete-dialog"]')
+      .should("include.text", "admin.users.delete.title")
+      .should(
+        "include.text",
+        'admin.users.delete.confirm_{"firstname":"Juan","lastname":"Walter"}',
+      );
+
+    // Confirm delete of user
+    const deleteUserRequest = interceptIndefinitely(
+      "DELETE",
+      "api/v1/users/3",
+      { statusCode: 204 },
+      "deleteUserRequest",
+    );
+
+    cy.fixture("users.json").then((users) => {
+      users.data = users.data.filter((user) => user.id !== 3);
+      users.meta.to = 3;
+      users.meta.total = 3;
+      users.meta.total_no_filter = 3;
+
+      cy.intercept("GET", "api/v1/users*", {
+        statusCode: 200,
+        body: users,
+      }).as("usersRequest");
+    });
+
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("have.text", "app.yes")
+      .click();
+    // Check loading
+    cy.get('[data-test="dialog-cancel-button"]')
+      .should("have.text", "app.no")
+      .should("be.disabled");
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("be.disabled")
+      .then(() => {
+        deleteUserRequest.sendResponse();
+      });
+
+    cy.wait("@deleteUserRequest");
+    cy.wait("@usersRequest");
+
+    // Check that user was deleted
+    cy.get('[data-test="user-item"]').should("have.length", 3);
+
+    // Check that dialog is closed
+    cy.get('[data-test="users-delete-dialog"]').should("not.exist");
+
+    // Reopen dialog for different user
+    cy.get('[data-test="user-item"]')
+      .eq(1)
+      .find('[data-test="users-delete-button"]')
+      .click();
+
+    cy.get('[data-test="users-delete-dialog"]').should("be.visible");
+
+    // Check that dialog shows correct data
+    cy.get('[data-test="users-delete-dialog"]')
+      .should("include.text", "admin.users.delete.title")
+      .should(
+        "include.text",
+        'admin.users.delete.confirm_{"firstname":"Laura","lastname":"Rivera"}',
+      );
+
+    // Cancel delete
+    cy.get('[data-test="dialog-cancel-button"]').click();
+    cy.get('[data-test="users-delete-dialog"]').should("not.exist");
+  });
+
+  it("delete user errors", function () {
+    cy.visit("/admin/users");
+
+    cy.wait("@usersRequest");
+
+    cy.get('[data-test="user-item"]').should("have.length", 4);
+
+    cy.get('[data-test="users-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="user-item"]')
+      .eq(2)
+      .find('[data-test="users-delete-button"]')
+      .click();
+
+    cy.get('[data-test="users-delete-dialog"]').should("be.visible");
+
+    // Check with 500 error
+    cy.intercept("DELETE", "api/v1/users/3", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("deleteUserRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteUserRequest");
+
+    // Check that dialog is still open and that error message gets shown
+    cy.get('[data-test="users-delete-dialog"]').should("be.visible");
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check with 401 error
+    cy.intercept("DELETE", "api/v1/users/3", {
+      statusCode: 401,
+    }).as("deleteUserRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteUserRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("reset password", function () {
+    cy.visit("/admin/users");
+
+    cy.wait("@usersRequest");
+
+    cy.get('[data-test="users-reset-password-dialog"]').should("not.exist");
+
+    cy.get('[data-test="user-item"]')
+      .eq(1)
+      .find('[data-test="users-reset-password-button"]')
+      .click();
+
+    cy.get('[data-test="users-reset-password-dialog"]').should("be.visible");
+
+    cy.get('[data-test="users-reset-password-dialog"]')
+      .should("include.text", "admin.users.reset_password.title")
+      .should(
+        "include.text",
+        'admin.users.reset_password.confirm_{"firstname":"Laura","lastname":"Rivera"}',
+      );
+
+    // Confirm reset if password
+    const resetPasswordRequest = interceptIndefinitely(
+      "POST",
+      "api/v1/users/2/resetPassword",
+      { statusCode: 204 },
+      "resetPasswordRequest",
+    );
+
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("have.text", "app.yes")
+      .click();
+
+    // Check loading
+    cy.get('[data-test="dialog-cancel-button"]')
+      .should("have.text", "app.no")
+      .should("be.disabled");
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("be.disabled")
+      .then(() => {
+        resetPasswordRequest.sendResponse();
+      });
+
+    cy.wait("@resetPasswordRequest");
+
+    // Check that toast message is shown
+    cy.checkToastMessage(
+      'admin.users.password_reset_success_{"mail":"LauraWRivera@domain.tld"}',
+    );
+
+    // Check that dialog is closed
+    cy.get('[data-test="users-reset-password-dialog"]').should("not.exist");
+  });
+
+  it("reset password errors", function () {
+    cy.visit("/admin/users");
+
+    cy.wait("@usersRequest");
+
+    cy.get('[data-test="users-reset-password-dialog"]').should("not.exist");
+
+    cy.get('[data-test="user-item"]')
+      .eq(1)
+      .find('[data-test="users-reset-password-button"]')
+      .click();
+
+    cy.get('[data-test="users-reset-password-dialog"]').should("be.visible");
+
+    // Check with 500 error
+    cy.intercept("POST", "api/v1/users/2/resetPassword", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("resetPasswordRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@resetPasswordRequest");
+
+    // Check that dialog is still open and that error message gets shown
+    cy.get('[data-test="users-reset-password-dialog"]').should("be.visible");
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check with 401 error
+    cy.intercept("POST", "api/v1/users/2/resetPassword", {
+      statusCode: 401,
+    }).as("resetPasswordRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@resetPasswordRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("open add new user page", function () {
+    cy.visit("/admin/users");
+
+    cy.wait("@usersRequest");
+
+    cy.interceptAdminUsersNewRequests();
+
+    cy.get('[data-test="users-add-button"]').click();
+
+    cy.url().should("include", "/admin/users/new");
+  });
+
+  it("open edit user page", function () {
+    cy.visit("/admin/users");
+
+    cy.wait("@usersRequest");
+
+    cy.interceptAdminUsersViewRequests();
+
+    cy.get('[data-test="user-item"]')
+      .eq(1)
+      .find('[data-test="users-edit-button"]')
+      .click();
+
+    cy.url().should("include", "/admin/users/2/edit");
+
+    // Reload and open edit page for current user but without edit permission
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/users");
+
+    cy.wait("@usersRequest");
+
+    cy.intercept("GET", "api/v1/users/1", {
+      fixture: "userDataCurrentUser.json",
+    }).as("userRequest");
+
+    cy.get('[data-test="user-item"]')
+      .eq(0)
+      .find('[data-test="users-edit-button"]')
+      .click();
+
+    cy.url().should("include", "/admin/users/1/edit");
+  });
+
+  it("open view user page", function () {
+    cy.visit("/admin/users");
+
+    cy.wait("@usersRequest");
+
+    cy.interceptAdminUsersViewRequests();
+
+    cy.intercept("GET", "api/v1/users/2", {
+      fixture: "userDataUser.json",
+    }).as("userRequest");
+
+    cy.get('[data-test="user-item"]')
+      .eq(1)
+      .find('[data-test="users-view-button"]')
+      .click();
+
+    cy.url().should("include", "/admin/users/2");
+    cy.url().should("not.include", "/edit");
+
+    // Reload and open edit page for current user but without view permission
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/users");
+
+    cy.wait("@usersRequest");
+
+    cy.intercept("GET", "api/v1/users/1", {
+      fixture: "userDataCurrentUser.json",
+    }).as("userRequest");
+
+    cy.get('[data-test="user-item"]')
+      .eq(0)
+      .find('[data-test="users-view-button"]')
+      .click();
+
+    cy.url().should("include", "/admin/users/1");
+    cy.url().should("not.include", "/edit");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminUsersNew.cy.js b/tests/Frontend/e2e/AdminUsersNew.cy.js
new file mode 100644
index 000000000..a8b89aabd
--- /dev/null
+++ b/tests/Frontend/e2e/AdminUsersNew.cy.js
@@ -0,0 +1,1047 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin users new", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminUsersNewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.update",
+        "users.create",
+        "users.delete",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.fixture("config.json").then((config) => {
+      config.data.auth.local = true;
+
+      cy.intercept("GET", "api/v1/config", {
+        statusCode: 200,
+        body: config,
+      });
+    });
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin/users/new");
+  });
+
+  it("visit with user without permission to add new users", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.update",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/users/new");
+
+    cy.checkToastMessage("app.flash.unauthorized");
+
+    // Check if the welcome page is shown
+    cy.url().should("not.include", "/admin/users");
+    cy.get("h1").should("be.visible").and("include.text", "home.title");
+  });
+
+  it("visit with local auth disabled", function () {
+    cy.intercept("GET", "api/v1/config", { fixture: "config.json" });
+
+    cy.visit("/admin/users/new");
+
+    cy.url().should("not.include", "/admin/users/new");
+    cy.url().should("include", "/404");
+  });
+
+  it("add new user with custom password and 1 role", function () {
+    cy.visit("/admin/users/new");
+
+    // Check general settings and change them
+    cy.contains("rooms.settings.general.title").should("be.visible");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.users.index")
+      .should("include.text", "admin.breakcrumbs.users.new");
+
+    cy.get('[data-test="firstname-field"]')
+      .should("be.visible")
+      .and("include.text", "app.firstname")
+      .within(() => {
+        cy.get("#firstname").should("have.value", "").type("Max");
+      });
+
+    cy.get('[data-test="lastname-field"]')
+      .should("be.visible")
+      .and("include.text", "app.lastname")
+      .within(() => {
+        cy.get("#lastname").should("have.value", "").type("Doe");
+      });
+
+    // Check that breadcrumbs stay the same
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.users.index")
+      .should("include.text", "admin.breakcrumbs.users.new");
+
+    cy.get('[data-test="email-field"]')
+      .should("be.visible")
+      .and("include.text", "app.email")
+      .within(() => {
+        cy.get("#email").should("have.value", "").type("maxdoe@domain.tld");
+      });
+
+    // Check locale setting and change it
+    cy.get('[data-test="locale-dropdown-items"]').should("not.exist");
+    cy.get('[data-test="locale-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.users.user_locale")
+      .within(() => {
+        cy.get('[data-test="locale-dropdown"]')
+          .should("have.text", "English")
+          .click();
+      });
+
+    cy.get('[data-test="locale-dropdown-items"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="locale-dropdown-option"]').should("have.length", 3);
+
+        cy.get('[data-test="locale-dropdown-option"]')
+          .eq(0)
+          .should("have.text", "Deutsch");
+        cy.get('[data-test="locale-dropdown-option"]')
+          .eq(1)
+          .should("have.text", "English");
+        cy.get('[data-test="locale-dropdown-option"]')
+          .eq(1)
+          .should("have.attr", "aria-selected", "true");
+        cy.get('[data-test="locale-dropdown-option"]')
+          .eq(2)
+          .should("have.text", "Français");
+
+        cy.get('[data-test="locale-dropdown-option"]').eq(0).click();
+      });
+
+    cy.get('[data-test="locale-dropdown-items"]').should("not.exist");
+    cy.get('[data-test="locale-dropdown"]').should("have.text", "Deutsch");
+
+    // Check timezone setting and change it
+    cy.get('[data-test="timezone-dropdown-items"]').should("not.exist");
+    cy.get('[data-test="timezone-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.users.timezone")
+      .within(() => {
+        cy.get('[data-test="timezone-dropdown"]')
+          .should("have.text", "UTC")
+          .click();
+      });
+
+    cy.get('[data-test="timezone-dropdown-items"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="timezone-dropdown-option"]').should(
+          "have.length",
+          4,
+        );
+
+        cy.get('[data-test="timezone-dropdown-option"]')
+          .eq(0)
+          .should("have.text", "America/New_York");
+        cy.get('[data-test="timezone-dropdown-option"]')
+          .eq(1)
+          .should("have.text", "Australia/Sydney");
+        cy.get('[data-test="timezone-dropdown-option"]')
+          .eq(2)
+          .should("have.text", "Europe/Berlin");
+        cy.get('[data-test="timezone-dropdown-option"]')
+          .eq(3)
+          .should("have.text", "UTC");
+        cy.get('[data-test="timezone-dropdown-option"]')
+          .eq(3)
+          .should("have.attr", "aria-selected", "true");
+
+        cy.get('[data-test="timezone-dropdown-option"]').eq(2).click();
+      });
+
+    cy.get('[data-test="timezone-dropdown-items"]').should("not.exist");
+    cy.get('[data-test="timezone-dropdown"]').should(
+      "have.text",
+      "Europe/Berlin",
+    );
+
+    // Check role setting and change it
+    cy.get(".multiselect__content").should("not.be.visible");
+    cy.get('[data-test="role-field"]')
+      .should("be.visible")
+      .and("include.text", "app.roles")
+      .within(() => {
+        cy.get('[data-test="role-dropdown"]').within(() => {
+          cy.get(".multiselect__tags")
+            .should("include.text", "admin.roles.select_roles")
+            .click();
+          cy.get('[data-test="role-chip"]').should("have.length", 0);
+        });
+      });
+
+    // Check if correct options are shown
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").should("have.length", 5);
+    cy.get(".multiselect__option")
+      .eq(0)
+      .should("include.text", "Superuser")
+      .and("include.text", "admin.roles.superuser")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(1)
+      .should("include.text", "Staff")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(2)
+      .should("include.text", "Students")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(3)
+      .should(
+        "include.text",
+        "No elements found. Consider changing the search query.",
+      )
+      .and("not.be.visible");
+    cy.get(".multiselect__option")
+      .eq(4)
+      .should("include.text", "admin.roles.no_data")
+      .and("not.be.visible");
+
+    cy.get(".multiselect__option").eq(1).click();
+
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get('[data-test="role-dropdown"]').within(() => {
+      cy.get('[data-test="role-chip"]').should("have.length", 1);
+      cy.get('[data-test="role-chip"]')
+        .eq(0)
+        .should("have.text", "Staff")
+        .find('[data-test="remove-role-button"]')
+        .should("not.exist");
+    });
+
+    // Select second role
+    cy.get(".multiselect__option").eq(2).click();
+
+    // Check that roles are shown and remove second role
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get('[data-test="role-dropdown"]').within(() => {
+      cy.get('[data-test="role-chip"]').should("have.length", 2);
+      cy.get('[data-test="role-chip"]')
+        .eq(0)
+        .should("include.text", "Staff")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+
+      cy.get('[data-test="role-chip"]')
+        .eq(1)
+        .should("include.text", "Students")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible")
+        .click();
+    });
+
+    // Check that dialog is closed
+    cy.get(".multiselect__content").should("not.be.visible");
+
+    // Check password settings and change them
+    cy.get('[data-test="generate-password-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.users.generate_password")
+      .and("include.text", "admin.users.generate_password_description")
+      .within(() => {
+        cy.get("#generate_password").and("not.be.checked");
+      });
+
+    cy.get('[data-test="new-password-field"]')
+      .should("be.visible")
+      .and("include.text", "auth.new_password")
+      .within(() => {
+        cy.get("#new_password").should("have.value", "").type("Password!123");
+      });
+
+    cy.get('[data-test="new-password-confirmation-field"]')
+      .should("be.visible")
+      .and("include.text", "auth.new_password_confirmation")
+      .within(() => {
+        cy.get("#new_password_confirmation")
+          .should("have.value", "")
+          .type("Password!123");
+      });
+
+    // Save new user
+    cy.fixture("userDataUser.json").then((user) => {
+      user.data.id = 20;
+      user.data.firstname = "Max";
+      user.data.lastname = "Doe";
+      user.data.email = "maxdoe@domain.tld";
+      user.data.roles = [
+        {
+          id: 2,
+          name: "Staff",
+        },
+      ];
+      user.data.locale = "de";
+      user.data.timezone = "Europe/Berlin";
+
+      const newUserRequest = interceptIndefinitely(
+        "POST",
+        "api/v1/users",
+        {
+          statusCode: 201,
+          body: user,
+        },
+        "newUserRequest",
+      );
+
+      cy.intercept("GET", "api/v1/users/20", {
+        statusCode: 200,
+        body: user,
+      }).as("userRequest");
+
+      cy.get('[data-test="overlay"]').should("not.exist");
+      cy.get('[data-test="users-new-save-button"]')
+        .should("have.text", "app.save")
+        .click();
+
+      // Check loading
+      cy.get('[data-test="overlay"]').should("be.visible");
+      cy.get("#firstname").should("be.disabled");
+      cy.get("#lastname").should("be.disabled");
+      cy.get("#email").should("be.disabled");
+      cy.get('[data-test="locale-dropdown"]').within(() => {
+        cy.get(".p-select-label").should("have.attr", "aria-disabled", "true");
+      });
+
+      cy.get('[data-test="timezone-dropdown"]').within(() => {
+        cy.get(".p-select-label").should("have.attr", "aria-disabled", "true");
+      });
+      cy.get('[data-test="role-dropdown"]').should(
+        "have.class",
+        "multiselect--disabled",
+      );
+      cy.get("#generate_password").should("be.disabled");
+      cy.get("#new_password").should("be.disabled");
+      cy.get("#new_password_confirmation").should("be.disabled");
+
+      cy.get('[data-test="users-new-save-button"]')
+        .should("be.disabled")
+        .then(() => {
+          newUserRequest.sendResponse();
+        });
+    });
+
+    // Check request data
+    cy.wait("@newUserRequest").then((interception) => {
+      expect(interception.request.body).to.eql({
+        firstname: "Max",
+        lastname: "Doe",
+        email: "maxdoe@domain.tld",
+        user_locale: "de",
+        timezone: "Europe/Berlin",
+        roles: [2],
+        generate_password: false,
+        new_password: "Password!123",
+        new_password_confirmation: "Password!123",
+      });
+    });
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that user page is shown
+    cy.url().should("include", "/admin/users/20");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.users.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.users.view_{"firstname":"Max","lastname":"Doe"}',
+      );
+  });
+
+  it("add new user with generated password and several roles", function () {
+    cy.visit("/admin/users/new");
+
+    // Check general settings and change them
+    cy.contains("rooms.settings.general.title").should("be.visible");
+
+    cy.get("#firstname").should("have.value", "").type("Max");
+    cy.get("#lastname").should("have.value", "").type("Doe");
+    cy.get("#email").should("have.value", "").type("maxdoe@domain.tld");
+
+    // Check locale setting and
+    cy.get('[data-test="locale-dropdown"]').should("have.text", "English");
+
+    // Check timezone setting
+    cy.get('[data-test="timezone-dropdown"]').should("have.text", "UTC");
+
+    // Check role setting and change it
+    cy.get(".multiselect__content").should("not.be.visible");
+    cy.get('[data-test="role-field"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="role-dropdown"]').within(() => {
+          cy.get(".multiselect__tags")
+            .should("include.text", "admin.roles.select_roles")
+            .click();
+          cy.get('[data-test="role-chip"]').should("have.length", 0);
+        });
+      });
+
+    // Check if correct options are shown
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").should("have.length", 5);
+    cy.get(".multiselect__option")
+      .eq(0)
+      .should("include.text", "Superuser")
+      .and("include.text", "admin.roles.superuser")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(1)
+      .should("include.text", "Staff")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(2)
+      .should("include.text", "Students")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(3)
+      .should(
+        "include.text",
+        "No elements found. Consider changing the search query.",
+      )
+      .and("not.be.visible");
+    cy.get(".multiselect__option")
+      .eq(4)
+      .should("include.text", "admin.roles.no_data")
+      .and("not.be.visible");
+
+    // Switch to next page
+    const userRoleRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/roles*",
+      {
+        statusCode: 200,
+        body: {
+          data: [
+            {
+              id: 4,
+              name: "Dean",
+              default: false,
+              updated_at: "2021-01-08T15:51:08.000000Z",
+              model_name: "Role",
+              room_limit: 20,
+            },
+            {
+              id: 5,
+              name: "Faculty",
+              default: false,
+              updated_at: "2021-03-19T09:12:44.000000Z",
+              model_name: "Role",
+              room_limit: 20,
+            },
+            {
+              id: 6,
+              name: "Manager",
+              default: false,
+              updated_at: "2021-05-22T11:55:21.000000Z",
+              model_name: "Role",
+              room_limit: -1,
+            },
+          ],
+          meta: {
+            current_page: 2,
+            from: 4,
+            last_page: 2,
+            per_page: 3,
+            to: 6,
+            total: 6,
+          },
+        },
+      },
+      "userRoleRequest",
+    );
+
+    cy.get(".multiselect__content")
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="previous-page-button"]')
+          .should("include.text", "app.previous_page")
+          .and("be.disabled");
+        cy.get('[data-test="next-page-button"]')
+          .should("include.text", "app.next_page")
+          .and("not.be.disabled");
+
+        cy.get('[data-test="next-page-button"]').click();
+
+        // Check loading
+        cy.get('[data-test="previous-page-button"]').should("be.disabled");
+        cy.get('[data-test="next-page-button"]').should("be.disabled");
+      });
+
+    cy.get('[data-test="role-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="users-new-save-button"]')
+      .should("be.disabled")
+      .then(() => {
+        userRoleRequest.sendResponse();
+      });
+
+    cy.wait("@userRoleRequest");
+
+    cy.get(".multiselect__content")
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="previous-page-button"]').should("not.be.disabled");
+        cy.get('[data-test="next-page-button"]').should("be.disabled");
+      });
+
+    cy.get(".multiselect__option").should("have.length", 5);
+    cy.get(".multiselect__option")
+      .eq(0)
+      .should("include.text", "Dean")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(1)
+      .should("include.text", "Faculty")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(2)
+      .should("include.text", "Manager")
+      .and("be.visible");
+    cy.get(".multiselect__option")
+      .eq(3)
+      .should(
+        "include.text",
+        "No elements found. Consider changing the search query.",
+      )
+      .and("not.be.visible");
+    cy.get(".multiselect__option")
+      .eq(4)
+      .should("include.text", "admin.roles.no_data")
+      .and("not.be.visible");
+
+    // Select roles
+    cy.get(".multiselect__option").eq(0).click();
+    cy.get(".multiselect__option").eq(2).click();
+
+    // Check that roles are shown
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get('[data-test="role-dropdown"]').within(() => {
+      cy.get('[data-test="role-chip"]').should("have.length", 2);
+      cy.get('[data-test="role-chip"]')
+        .eq(0)
+        .should("include.text", "Dean")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+
+      cy.get('[data-test="role-chip"]')
+        .eq(1)
+        .should("include.text", "Manager")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+    });
+
+    // Close dialog
+    cy.get(".multiselect__select").click({ force: true }); // ToDo remove force when possible
+
+    // Check that dialog is closed
+    cy.get(".multiselect__content").should("not.be.visible");
+
+    // Check password settings and change them
+    cy.get("#generate_password").and("not.be.checked").click();
+
+    cy.get('[data-test="new-password-field"]').should("not.exist");
+    cy.get('[data-test="new-password-confirmation-field"]').should("not.exist");
+
+    // Save new user
+    cy.fixture("userDataUser.json").then((user) => {
+      user.data.id = 20;
+      user.data.firstname = "Max";
+      user.data.email = "Doe";
+      user.data.roles = [
+        {
+          id: 4,
+          name: "Dean",
+        },
+        {
+          id: 6,
+          name: "Manager",
+        },
+      ];
+
+      cy.intercept("POST", "api/v1/users", {
+        statusCode: 201,
+        body: user,
+      }).as("newUserRequest");
+
+      cy.intercept("GET", "api/v1/users/20", {
+        statusCode: 200,
+        body: user,
+      }).as("userRequest");
+    });
+
+    cy.get('[data-test="users-new-save-button"]').click();
+
+    // Check request data
+    cy.wait("@newUserRequest").then((interception) => {
+      expect(interception.request.body).to.eql({
+        firstname: "Max",
+        lastname: "Doe",
+        email: "maxdoe@domain.tld",
+        user_locale: "en",
+        timezone: "UTC",
+        roles: [4, 6],
+        generate_password: true,
+      });
+    });
+    cy.wait("@userRequest");
+
+    // Check that user page is shown
+    cy.url().should("include", "/admin/users/20");
+  });
+
+  it("add new user errors", function () {
+    cy.visit("/admin/users/new");
+
+    // Set values
+    cy.get("#firstname").should("have.value", "").type("Max");
+    cy.get("#lastname").should("have.value", "").type("Doe");
+    cy.get("#email").should("have.value", "").type("maxdoe@domain.tld");
+    cy.get('[data-test="locale-dropdown"]').should("have.text", "English");
+    cy.get('[data-test="timezone-dropdown"]').should("have.text", "UTC");
+    cy.get('[data-test="role-dropdown"]').click();
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").eq(0).click();
+    cy.get(".multiselect__select").click();
+    cy.get(".multiselect__content").should("not.be.visible");
+    cy.get("#new_password").type("Password!123");
+    cy.get("#new_password_confirmation").type("Password!123");
+
+    // Check with 422 error
+    cy.intercept("POST", "api/v1/users", {
+      statusCode: 422,
+      body: {
+        message: "The given data was invalid.",
+        errors: {
+          firstname: ["The Firstname field is required."],
+          lastname: ["The Lastname field is required."],
+          email: ["The Email field is required."],
+          user_locale: ["The user locale field is required."],
+          timezone: ["The timezone field is required."],
+          roles: ["The Roles field is required."],
+          generate_password: ["The generate password field is required."],
+          new_password: [
+            "The New password field is required when generate password is false.",
+          ],
+          new_password_confirmation: [
+            "The new password confirmation field is required.",
+          ],
+        },
+      },
+    }).as("newUserRequest");
+
+    cy.get('[data-test="users-new-save-button"]').click();
+
+    cy.wait("@newUserRequest");
+
+    cy.get('[data-test="firstname-field"]').should(
+      "include.text",
+      "The Firstname field is required.",
+    );
+    cy.get('[data-test="lastname-field"]').should(
+      "include.text",
+      "The Lastname field is required.",
+    );
+    cy.get('[data-test="email-field"]').should(
+      "include.text",
+      "The Email field is required.",
+    );
+    cy.get('[data-test="locale-field"]').should(
+      "include.text",
+      "The user locale field is required.",
+    );
+    cy.get('[data-test="timezone-field"]').should(
+      "include.text",
+      "The timezone field is required.",
+    );
+    cy.get('[data-test="role-field"]').should(
+      "include.text",
+      "The Roles field is required.",
+    );
+    cy.get('[data-test="generate-password-field"]').should(
+      "include.text",
+      "The generate password field is required.",
+    );
+    cy.get('[data-test="new-password-field"]').should(
+      "include.text",
+      "The New password field is required when generate password is false.",
+    );
+    cy.get('[data-test="new-password-confirmation-field"]').should(
+      "include.text",
+      "The new password confirmation field is required.",
+    );
+
+    // Check with 500 error
+    cy.intercept("POST", "api/v1/users", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("newUserRequest");
+
+    cy.get('[data-test="users-new-save-button"]').click();
+
+    cy.wait("@newUserRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that 422 error messages are hidden
+    cy.get('[data-test="firstname-field"]').should(
+      "not.include.text",
+      "The Firstname field is required.",
+    );
+    cy.get('[data-test="lastname-field"]').should(
+      "not.include.text",
+      "The Lastname field is required.",
+    );
+    cy.get('[data-test="email-field"]').should(
+      "not.include.text",
+      "The Email field is required.",
+    );
+    cy.get('[data-test="locale-field"]').should(
+      "not.include.text",
+      "The user locale field is required.",
+    );
+    cy.get('[data-test="timezone-field"]').should(
+      "not.include.text",
+      "The timezone field is required.",
+    );
+    cy.get('[data-test="role-field"]').should(
+      "not.include.text",
+      "The Roles field is required.",
+    );
+    cy.get('[data-test="generate-password-field"]').should(
+      "not.include.text",
+      "The generate password field is required.",
+    );
+    cy.get('[data-test="new-password-field"]').should(
+      "not.include.text",
+      "The New password field is required when generate password is false.",
+    );
+    cy.get('[data-test="new-password-confirmation-field"]').should(
+      "not.include.text",
+      "The new password confirmation field is required.",
+    );
+
+    // Check with 401 error
+    cy.intercept("POST", "api/v1/users", {
+      statusCode: 401,
+    }).as("newUserRequest");
+
+    cy.get('[data-test="users-new-save-button"]').click();
+
+    cy.wait("@newUserRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users/new");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("load timezones errors", function () {
+    // Check with 500 error
+    const loadTimezonesRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/getTimezones",
+      {
+        statusCode: 500,
+        body: {
+          message: "Test",
+        },
+      },
+      "timezonesRequest",
+    );
+
+    cy.visit("/admin/users/new");
+
+    // Check loading
+    cy.get('[data-test="users-new-save-button"]').should("be.disabled");
+
+    cy.get('[data-test="timezone-dropdown"]')
+      .find(".p-select-label")
+      .should("have.attr", "aria-disabled", "true")
+      .then(() => {
+        loadTimezonesRequest.sendResponse();
+      });
+
+    cy.wait("@timezonesRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    cy.get('[data-test="timezone-dropdown"]')
+      .should("have.text", "admin.users.timezone")
+      .find(".p-select-label")
+      .should("have.attr", "aria-disabled", "true");
+
+    cy.get('[data-test="users-new-save-button"]').should("be.disabled");
+
+    // Reload timezones without errors
+    cy.intercept("GET", "api/v1/getTimezones", {
+      fixture: "timezones.json",
+    }).as("timezonesRequest");
+
+    cy.get('[data-test="timezone-reload-button"]').click();
+
+    cy.wait("@timezonesRequest");
+
+    cy.get('[data-test="users-new-save-button"]').should("not.be.disabled");
+
+    cy.get('[data-test="timezone-dropdown"]')
+      .should("have.text", "UTC")
+      .find(".p-select-label")
+      .should("not.have.attr", "aria-disabled", "true");
+
+    cy.get('[data-test="timezone-reload-button"]').should("not.exist");
+
+    cy.get('[data-test="timezone-dropdown"]').click();
+
+    cy.get('[data-test="timezone-dropdown-option"]').should("have.length", 4);
+
+    //Check with 401 error
+    cy.intercept("GET", "api/v1/getTimezones", {
+      statusCode: 401,
+    }).as("timezonesRequest");
+
+    cy.reload();
+
+    cy.wait("@timezonesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users/new");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("check that superuser role is disabled for users that are not superusers", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.superuser = false;
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.update",
+        "users.create",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/users/new");
+
+    cy.get('[data-test="role-dropdown"]').click();
+
+    // Check if correct options are shown
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").should("have.length", 5);
+    cy.get(".multiselect__option")
+      .eq(0)
+      .should("include.text", "Superuser")
+      .and("include.text", "admin.roles.superuser")
+      .and("not.include.text", "admin.roles.automatic")
+      .and("be.visible")
+      .and("have.class", "multiselect__option--disabled");
+    cy.get(".multiselect__option")
+      .eq(1)
+      .should("include.text", "Staff")
+      .and("not.include.text", "admin.roles.superuser")
+      .and("not.include.text", "admin.roles.automatic")
+      .and("be.visible")
+      .and("not.have.class", "multiselect__option--disabled")
+      .and("not.have.class", "multiselect__option--selected");
+    cy.get(".multiselect__option")
+      .eq(2)
+      .should("include.text", "Students")
+      .and("not.include.text", "admin.roles.automatic")
+      .and("not.include.text", "admin.roles.superuser")
+      .and("be.visible")
+      .and("not.have.class", "multiselect__option--disabled");
+    cy.get(".multiselect__option")
+      .eq(3)
+      .should(
+        "include.text",
+        "No elements found. Consider changing the search query.",
+      )
+      .and("not.be.visible");
+    cy.get(".multiselect__option")
+      .eq(4)
+      .should("include.text", "admin.roles.no_data")
+      .and("not.be.visible");
+  });
+
+  it("load roles errors", function () {
+    // Check with 500 error
+    const rolesRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/roles*",
+      {
+        statusCode: 500,
+        body: {
+          message: "Test",
+        },
+      },
+      "rolesRequest",
+    );
+
+    cy.visit("/admin/users/new");
+
+    // Check loading
+    cy.get('[data-test="users-new-save-button"]').should("be.disabled");
+
+    cy.get('[data-test="role-dropdown"]')
+      .should("have.class", "multiselect--disabled")
+      .then(() => {
+        rolesRequest.sendResponse();
+      });
+
+    cy.wait("@rolesRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    cy.get('[data-test="role-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="users-new-save-button"]').should("be.disabled");
+
+    // Reload roles without errors
+    cy.intercept("GET", "api/v1/roles*", {
+      fixture: "roles.json",
+    }).as("rolesRequest");
+
+    cy.get('[data-test="roles-reload-button"]').click();
+
+    cy.wait("@rolesRequest");
+
+    cy.get('[data-test="role-dropdown"]').should(
+      "not.have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="users-new-save-button"]').should("not.be.disabled");
+
+    cy.get('[data-test="roles-reload-button"]').should("not.exist");
+
+    cy.get('[data-test="role-dropdown"]').click();
+
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").should("have.length", 5);
+
+    // Check with 500 error when switching pages
+    cy.intercept("GET", "api/v1/roles*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("rolesRequest");
+
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get('[data-test="next-page-button"]').click();
+
+    cy.wait("@rolesRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    cy.get('[data-test="role-dropdown"]').should(
+      "have.class",
+      "multiselect--disabled",
+    );
+
+    cy.get('[data-test="roles-reload-button"]').should("be.visible");
+
+    cy.get('[data-test="users-new-save-button"]').should("be.disabled");
+
+    // Check with 401 error
+    cy.intercept("GET", "api/v1/roles*", {
+      statusCode: 401,
+    }).as("rolesRequest");
+
+    cy.reload();
+
+    cy.wait("@rolesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users/new");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+
+    // Visit new page again with roles
+    cy.intercept("GET", "api/v1/roles*", {
+      fixture: "roles.json",
+    }).as("rolesRequest");
+
+    cy.visit("/admin/users/new");
+
+    cy.wait("@rolesRequest");
+
+    cy.get('[data-test="role-dropdown"]').click();
+
+    // Check with 401 error when switching pages
+    cy.intercept("GET", "api/v1/roles*", {
+      statusCode: 401,
+    }).as("rolesRequest");
+
+    cy.get(".multiselect__content").should("be.visible");
+
+    cy.get('[data-test="next-page-button"]').click();
+
+    cy.wait("@rolesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users/new");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminUsersView.cy.js b/tests/Frontend/e2e/AdminUsersView.cy.js
new file mode 100644
index 000000000..741f71356
--- /dev/null
+++ b/tests/Frontend/e2e/AdminUsersView.cy.js
@@ -0,0 +1,663 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin users view", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminUsersViewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.create",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.fixture("config.json").then((config) => {
+      config.data.auth.local = true;
+
+      cy.intercept("GET", "api/v1/config", {
+        statusCode: 200,
+        body: config,
+      });
+    });
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/admin/users/");
+  });
+
+  it("visit with user without permission to view users", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.create",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/users/2");
+
+    cy.checkToastMessage("app.flash.unauthorized");
+
+    // Check if welcome page is shown
+    cy.url().should("not.include", "/admin/users/2");
+    cy.get("h1").should("be.visible").and("include.text", "home.title");
+  });
+
+  it("check userView shown correctly", function () {
+    const userRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/users/2",
+      { fixture: "userDataUser.json" },
+      "userRequest",
+    );
+
+    cy.visit("/admin/users/2");
+
+    cy.contains("admin.title");
+
+    // Check loading
+    cy.get('[data-test="users-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="users-edit-button"]').should("not.exist");
+    cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+    cy.get('[data-test="users-delete-button"]').should("not.exist");
+    cy.get('[data-test="user-tab-profile-save-button"]').should("not.exist");
+
+    cy.get('[data-test="base-tab-button"]').should("not.exist");
+    cy.get('[data-test="email-tab-button"]').should("not.exist");
+    cy.get('[data-test="security-tab-button"]').should("not.exist");
+    cy.get('[data-test="others-tab-button"]').should("not.exist");
+
+    cy.get('[data-test="overlay"]')
+      .should("be.visible")
+      .then(() => {
+        userRequest.sendResponse();
+      });
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    cy.get('[data-test="users-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="users-edit-button"]').should("not.exist");
+    cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+    cy.get('[data-test="users-delete-button"]').should("not.exist");
+    cy.get('[data-test="user-tab-profile-save-button"]').should("not.exist");
+
+    cy.get('[data-test="base-tab-button"]').should("be.visible");
+    cy.get('[data-test="email-tab-button"]').should("be.visible");
+    cy.get('[data-test="security-tab-button"]').should("be.visible");
+    cy.get('[data-test="others-tab-button"]').should("be.visible");
+
+    // Check that breadcrumbs are shown correctly
+    cy.get('[data-test="admin-breadcrumb"]')
+      .should("be.visible")
+      .should("include.text", "admin.breakcrumbs.users.index")
+      .should(
+        "include.text",
+        'admin.breakcrumbs.users.view_{"firstname":"Laura","lastname":"Rivera"}',
+      );
+
+    // Check that user data is shown and all inputs are disabled
+    // Base tab
+    cy.get('[data-test="firstname-field"]')
+      .should("be.visible")
+      .and("include.text", "app.firstname")
+      .within(() => {
+        cy.get("#firstname").should("have.value", "Laura").and("be.disabled");
+      });
+
+    cy.get('[data-test="lastname-field"]')
+      .should("be.visible")
+      .and("include.text", "app.lastname")
+      .within(() => {
+        cy.get("#lastname").should("have.value", "Rivera").and("be.disabled");
+      });
+
+    cy.get('[data-test="authenticator-field"]')
+      .should("be.visible")
+      .and("include.text", "auth.authenticator")
+      .within(() => {
+        cy.get("#authenticator")
+          .should("have.value", "admin.users.authenticator.local")
+          .and("be.disabled");
+      });
+
+    // Check that profile image buttons are hidden
+    cy.get('[data-test="profile-image-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.users.image.title")
+      .within(() => {
+        cy.get('[data-test="reset-file-upload-button"]').should("not.exist");
+        cy.get('[data-test="delete-image-button"]').should("not.exist");
+        cy.get('[data-test="undo-delete-button"]').should("not.exist");
+        cy.get('[data-test="upload-file-input"]').should("not.exist");
+      });
+
+    cy.get('[data-test="locale-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.users.user_locale")
+      .within(() => {
+        cy.get('[data-test="locale-dropdown"]').within(() => {
+          cy.get(".p-select-label").should(
+            "have.attr",
+            "aria-disabled",
+            "true",
+          );
+        });
+      });
+
+    cy.get('[data-test="timezone-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.users.timezone")
+      .within(() => {
+        cy.get('[data-test="timezone-dropdown"]').within(() => {
+          cy.get(".p-select-label").should(
+            "have.attr",
+            "aria-disabled",
+            "true",
+          );
+        });
+      });
+
+    // Check that save button is hidden
+    cy.get('[data-test="user-tab-profile-save-button"]').should("not.exist");
+
+    // Email tab
+    cy.get('[data-test="email-tab-button"]').click();
+
+    cy.get('[data-test="email-tab-current-password-field"]').should(
+      "not.exist",
+    );
+
+    cy.get('[data-test="email-field"]')
+      .should("be.visible")
+      .and("include.text", "app.email")
+      .within(() => {
+        cy.get("#email")
+          .should("have.value", "LauraWRivera@domain.tld")
+          .and("be.disabled");
+      });
+
+    // Check that save button is hidden
+    cy.get('[data-test="user-tab-email-save-button"]').should("not.exist");
+
+    // Security tab
+    cy.get('[data-test="security-tab-button"]').click();
+
+    cy.get('[data-test="roles-field"]')
+      .should("be.visible")
+      .and("include.text", "app.roles")
+      .within(() => {
+        cy.get('[data-test="role-dropdown"]')
+          .should("have.class", "multiselect--disabled")
+          .within(() => {
+            cy.get('[data-test="role-chip"]').should("have.length", 2);
+            cy.get('[data-test="role-chip"]')
+              .eq(0)
+              .should("include.text", "Students")
+              .find('[data-test="remove-role-button"]')
+              .should("not.exist");
+            cy.get('[data-test="role-chip"]')
+              .eq(1)
+              .should("include.text", "Staff")
+              .find('[data-test="remove-role-button"]')
+              .should("not.exist");
+          });
+      });
+
+    // Check that role save button is hidden
+    cy.get('[data-test="users-roles-save-button"]').should("not.exist");
+
+    // Check that password fields are hidden
+    cy.get('[data-test="security-tab-current-password-field"]').should(
+      "not.exist",
+    );
+
+    cy.get('[data-test="new-password-field"]').should("not.exist");
+
+    cy.get('[data-test="new-password-confirmation-field"]').should("not.exist");
+
+    // Check that password save button is hidden
+    cy.get('[data-test="change-password-save-button"]').should("not.exist");
+
+    // Check that sessions are hidden
+    cy.get('[data-test="session-panel"]').should("not.exist");
+
+    // Check others tab
+    cy.get('[data-test="others-tab-button"]').click();
+    cy.get('[data-test="bbb-skip-check-audio-field"]')
+      .should("be.visible")
+      .and("include.text", "admin.users.skip_check_audio")
+      .find("#bbb_skip_check_audio")
+      .should("not.be.checked")
+      .and("be.disabled");
+
+    // Check that others save button is hidden
+    cy.get('[data-test="user-tab-others-save-button"]').should("not.exist");
+  });
+
+  it("check userView with ldap user", function () {
+    cy.fixture("userDataUser.json").then((user) => {
+      user.data.authenticator = "ldap";
+      user.data.external_id = "lwr";
+
+      cy.intercept("GET", "api/v1/users/2", {
+        statusCode: 200,
+        body: user,
+      }).as("userRequest");
+    });
+
+    cy.visit("/admin/users/2");
+
+    cy.wait("@userRequest");
+
+    cy.get("#firstname").should("have.value", "Laura").and("be.disabled");
+    cy.get("#lastname").should("have.value", "Rivera").and("be.disabled");
+    cy.get("#authenticator")
+      .should("have.value", "admin.users.authenticator.ldap")
+      .and("be.disabled");
+
+    cy.get('[data-test="authenticator-id-field"]')
+      .should("include.text", "auth.authenticator_id")
+      .within(() => {
+        cy.get("#authenticator_id")
+          .should("have.value", "lwr")
+          .and("be.disabled");
+      });
+
+    // Check that profile image buttons are hidden
+    cy.get('[data-test="reset-file-upload-button"]').should("not.exist");
+    cy.get('[data-test="delete-image-button"]').should("not.exist");
+    cy.get('[data-test="undo-delete-button"]').should("not.exist");
+    cy.get('[data-test="upload-file-input"]').should("not.exist");
+    cy.get('[data-test="user-tab-profile-save-button"]').should("not.exist");
+
+    cy.get('[data-test="locale-dropdown"]').within(() => {
+      cy.get(".p-select-label").should("have.attr", "aria-disabled", "true");
+    });
+
+    cy.get('[data-test="timezone-dropdown"]').within(() => {
+      cy.get(".p-select-label").should("have.attr", "aria-disabled", "true");
+    });
+
+    // Email tab
+    cy.get('[data-test="email-tab-button"]').click();
+
+    cy.get("#email")
+      .should("have.value", "LauraWRivera@domain.tld")
+      .and("be.disabled");
+
+    // Security tab
+    cy.get('[data-test="security-tab-button"]').click();
+
+    cy.get('[data-test="role-dropdown"]')
+      .should("include.text", "Students")
+      .should("include.text", "Staff")
+      .should("have.class", "multiselect--disabled");
+
+    // Check others tab
+    cy.get('[data-test="others-tab-button"]').click();
+
+    cy.get("#bbb_skip_check_audio").should("not.be.checked").and("be.disabled");
+  });
+
+  it("check button visibility with update permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.update",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/users/2");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="users-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="users-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.edit")
+      .and("have.attr", "href", "/admin/users/2/edit");
+    cy.get('[data-test="users-reset-password-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+    cy.get('[data-test="users-delete-button"]').should("not.exist");
+  });
+
+  it("check button visibility with delete permission", function () {
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.create",
+        "users.update",
+        "users.delete",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/users/2");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="users-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="users-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.edit")
+      .and("have.attr", "href", "/admin/users/2/edit");
+    cy.get('[data-test="users-reset-password-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+    cy.get('[data-test="users-delete-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+  });
+
+  it("check button visibility for user that is superuser", function () {
+    // Check when viewing user that is not a superuser
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.create",
+        "users.update",
+        "users.delete",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/users/2");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="users-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="users-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.edit")
+      .and("have.attr", "href", "/admin/users/2/edit");
+    cy.get('[data-test="users-reset-password-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+    cy.get('[data-test="users-delete-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+
+    // Check when viewing user that is a superuser
+    cy.fixture("userDataUser.json").then((user) => {
+      user.data.superuser = true;
+
+      user.data.roles.push({
+        id: 1,
+        name: "Superuser",
+        automatic: true,
+        superuser: true,
+      });
+
+      cy.intercept("GET", "api/v1/users/2", {
+        statusCode: 200,
+        body: user,
+      }).as("userRequest");
+    });
+
+    cy.reload();
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="users-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="users-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.edit")
+      .and("have.attr", "href", "/admin/users/2/edit");
+    cy.get('[data-test="users-reset-password-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+    cy.get('[data-test="users-delete-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+  });
+
+  it("check button visibility for user that is no superuser", function () {
+    // Check when viewing user that is not a superuser
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.superuser = false;
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.create",
+        "users.update",
+        "users.delete",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.visit("/admin/users/2");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="users-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="users-edit-button"]')
+      .should("be.visible")
+      .and("not.be.disabled")
+      .and("include.text", "app.edit")
+      .and("have.attr", "href", "/admin/users/2/edit");
+    cy.get('[data-test="users-reset-password-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+    cy.get('[data-test="users-delete-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+
+    // Check when viewing user that is a superuser
+    cy.fixture("userDataUser.json").then((user) => {
+      user.data.superuser = true;
+
+      user.data.roles.push({
+        id: 1,
+        name: "Superuser",
+        automatic: true,
+        superuser: true,
+      });
+
+      cy.intercept("GET", "api/v1/users/2", {
+        statusCode: 200,
+        body: user,
+      }).as("userRequest");
+    });
+
+    cy.reload();
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="users-cancel-edit-button"]').should("not.exist");
+    cy.get('[data-test="users-edit-button"]').should("not.exist");
+    cy.get('[data-test="users-reset-password-button"]').should("not.exist");
+    cy.get('[data-test="users-delete-button"]').should("not.exist");
+  });
+
+  it("open view errors", function () {
+    cy.intercept("GET", "api/v1/users/2", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("userRequest");
+
+    cy.visit("admin/users/2");
+
+    cy.wait("@userRequest");
+
+    // Check that overlay is shown
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that error message gets shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Reload with correct data
+    cy.intercept("GET", "api/v1/users/2", {
+      fixture: "userDataUser.json",
+    }).as("userRequest");
+
+    cy.get('[data-test="loading-retry-button"]')
+      .should("be.visible")
+      .and("have.text", "app.reload")
+      .click();
+
+    cy.wait("@userRequest");
+
+    // Check that overlay is not shown anymore
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
+
+    // Reload page with 404 errors
+    cy.interceptAdminUsersIndexRequests();
+
+    cy.intercept("GET", "api/v1/users/2", {
+      statusCode: 404,
+      body: {
+        message: "No query results for model",
+      },
+    }).as("userRequest");
+
+    cy.reload();
+
+    cy.wait("@userRequest");
+
+    // Check that redirect worked
+    cy.url().should("not.include", "/admin/users/2");
+    cy.url().should("include", "/admin/users");
+
+    cy.wait("@usersRequest");
+
+    // Check that error message gets shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"No query results for model"}',
+      'app.flash.server_error.error_code_{"statusCode":404}',
+    ]);
+
+    // Reload page with 401 error
+    cy.intercept("GET", "api/v1/users/2", {
+      statusCode: 401,
+    }).as("userRequest");
+
+    cy.visit("/admin/users/2");
+
+    cy.wait("@userRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users/2");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("load timezones error", function () {
+    const timezonesRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/getTimezones",
+      {
+        statusCode: 500,
+        body: {
+          message: "Test",
+        },
+      },
+      "timezonesRequest",
+    );
+
+    cy.visit("/admin/users/2");
+
+    cy.wait("@userRequest");
+
+    // Check loading
+    cy.get('[data-test="timezone-dropdown"]')
+      .find(".p-select-label")
+      .should("have.attr", "aria-disabled", "true")
+      .then(() => {
+        timezonesRequest.sendResponse();
+      });
+
+    cy.wait("@timezonesRequest");
+
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    cy.get('[data-test="timezone-dropdown"]')
+      .should("have.text", "admin.users.timezone")
+      .find(".p-select-label")
+      .should("have.attr", "aria-disabled", "true");
+
+    // Reload timezones without error
+    cy.intercept("GET", "api/v1/getTimezones", {
+      fixture: "timezones.json",
+    }).as("timezonesRequest");
+
+    cy.get('[data-test="timezone-reload-button"]').click();
+
+    cy.wait("@timezonesRequest");
+
+    cy.get('[data-test="timezone-dropdown"]')
+      .should("have.text", "UTC")
+      .find(".p-select-label")
+      .should("have.attr", "aria-disabled", "true");
+
+    cy.get('[data-test="timezone-reload-button"]').should("not.exist");
+
+    // Check with 401 error
+    cy.intercept("GET", "api/v1/getTimezones", {
+      statusCode: 401,
+    }).as("timezonesRequest");
+
+    cy.reload();
+
+    cy.wait("@userRequest");
+
+    cy.wait("@timezonesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users/2");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+});
diff --git a/tests/Frontend/e2e/AdminUsersViewUserActions.cy.js b/tests/Frontend/e2e/AdminUsersViewUserActions.cy.js
new file mode 100644
index 000000000..f9565b001
--- /dev/null
+++ b/tests/Frontend/e2e/AdminUsersViewUserActions.cy.js
@@ -0,0 +1,631 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Admin users view user actions", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptAdminUsersViewRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = [
+        "admin.view",
+        "users.viewAny",
+        "users.view",
+        "users.update",
+        "users.create",
+        "users.delete",
+        "roles.viewAny",
+      ];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+
+    cy.fixture("config.json").then((config) => {
+      config.data.auth.local = true;
+
+      cy.intercept("GET", "api/v1/config", {
+        statusCode: 200,
+        body: config,
+      });
+    });
+  });
+
+  it("delete user", function () {
+    cy.visit("/admin/users/2");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="users-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="users-delete-button"]').click();
+
+    cy.get('[data-test="users-delete-dialog"]').should("be.visible");
+
+    // Check that dialog shows correct data
+    cy.get('[data-test="users-delete-dialog"]')
+      .should("include.text", "admin.users.delete.title")
+      .should(
+        "include.text",
+        'admin.users.delete.confirm_{"firstname":"Laura","lastname":"Rivera"}',
+      );
+
+    // Confirm delete of user
+    const deleteUserRequest = interceptIndefinitely(
+      "DELETE",
+      "api/v1/users/2",
+      { statusCode: 204 },
+      "deleteUserRequest",
+    );
+
+    cy.fixture("users.json").then((users) => {
+      users.data = users.data.slice(0, 2);
+      users.meta.to = 2;
+      users.meta.total = 2;
+      users.meta.total_no_filter = 2;
+
+      cy.intercept("GET", "api/v1/users*", {
+        statusCode: 200,
+        body: users,
+      }).as("usersRequest");
+    });
+
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("have.text", "app.yes")
+      .click();
+    // Check loading
+    cy.get('[data-test="dialog-cancel-button"]')
+      .should("have.text", "app.no")
+      .should("be.disabled");
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("be.disabled")
+      .then(() => {
+        deleteUserRequest.sendResponse();
+      });
+
+    cy.wait("@deleteUserRequest");
+    cy.wait("@usersRequest");
+
+    // Check that redirect worked
+    cy.url().should("not.include", "/admin/users/2");
+    cy.url().should("include", "/admin/users");
+
+    // Check that user was deleted
+    cy.get('[data-test="user-item"]').should("have.length", 2);
+
+    // Check that dialog is closed
+    cy.get('[data-test="users-delete-dialog"]').should("not.exist");
+  });
+
+  it("delete user errors", function () {
+    cy.visit("/admin/users/2");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="users-delete-dialog"]').should("not.exist");
+
+    cy.get('[data-test="users-delete-button"]').click();
+
+    cy.get('[data-test="users-delete-dialog"]').should("be.visible");
+
+    // Check with 500 error
+    cy.intercept("DELETE", "api/v1/users/2", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("deleteUserRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteUserRequest");
+
+    // Check that dialog is still open and that error message gets shown
+    cy.get('[data-test="users-delete-dialog"]').should("be.visible");
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check with 401 error
+    cy.intercept("DELETE", "api/v1/users/2", {
+      statusCode: 401,
+    }).as("deleteUserRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@deleteUserRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users/2");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("reset password", function () {
+    cy.visit("/admin/users/2");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="users-reset-password-dialog"]').should("not.exist");
+
+    cy.get('[data-test="users-reset-password-button"]').click();
+
+    cy.get('[data-test="users-reset-password-dialog"]').should("be.visible");
+
+    cy.get('[data-test="users-reset-password-dialog"]')
+      .should("include.text", "admin.users.reset_password.title")
+      .should(
+        "include.text",
+        'admin.users.reset_password.confirm_{"firstname":"Laura","lastname":"Rivera"}',
+      );
+
+    // Confirm reset if password
+    const resetPasswordRequest = interceptIndefinitely(
+      "POST",
+      "api/v1/users/2/resetPassword",
+      { statusCode: 204 },
+      "resetPasswordRequest",
+    );
+
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("have.text", "app.yes")
+      .click();
+
+    // Check loading
+    cy.get('[data-test="dialog-cancel-button"]')
+      .should("have.text", "app.no")
+      .should("be.disabled");
+    cy.get('[data-test="dialog-continue-button"]')
+      .should("be.disabled")
+      .then(() => {
+        resetPasswordRequest.sendResponse();
+      });
+
+    cy.wait("@resetPasswordRequest");
+
+    // Check that toast message is shown
+    cy.checkToastMessage(
+      'admin.users.password_reset_success_{"mail":"LauraWRivera@domain.tld"}',
+    );
+
+    // Check that dialog is closed
+    cy.get('[data-test="users-reset-password-dialog"]').should("not.exist");
+  });
+
+  it("reset password errors", function () {
+    cy.visit("/admin/users/2");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="users-reset-password-dialog"]').should("not.exist");
+
+    cy.get('[data-test="users-reset-password-button"]').click();
+
+    cy.get('[data-test="users-reset-password-dialog"]').should("be.visible");
+
+    // Check with 500 error
+    cy.intercept("POST", "api/v1/users/2/resetPassword", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("resetPasswordRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@resetPasswordRequest");
+
+    // Check that dialog is still open and that error message gets shown
+    cy.get('[data-test="users-reset-password-dialog"]').should("be.visible");
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check with 401 error
+    cy.intercept("POST", "api/v1/users/2/resetPassword", {
+      statusCode: 401,
+    }).as("resetPasswordRequest");
+
+    cy.get('[data-test="dialog-continue-button"]').click();
+
+    cy.wait("@resetPasswordRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/admin/users");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("switch between edit and view", function () {
+    cy.visit("/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    // Check base tab
+    // Change values of all fields
+    cy.get("#firstname").should("have.value", "Laura").clear();
+    cy.get("#firstname").type("Juan");
+    cy.get("#lastname").should("have.value", "Rivera").clear();
+    cy.get("#lastname").type("Walter");
+
+    cy.get('[data-test="upload-file-input"]')
+      .should("not.be.visible")
+      .selectFile("tests/Frontend/fixtures/files/profileImage.jpg", {
+        force: true,
+      });
+
+    cy.get('[data-test="crop-image-dialog"]')
+      .should("be.visible")
+      .and("include.text", "admin.users.image.crop");
+
+    // Check if correct image is shown
+    cy.fixture("files/profileImage.jpg", "base64").then((content) => {
+      cy.get('[data-test="crop-image-dialog"]')
+        .find("img")
+        .should("have.attr", "src")
+        .and("include", content);
+    });
+
+    cy.get('[data-test="dialog-save-button"]')
+      .should("have.text", "admin.users.image.save")
+      .click();
+
+    cy.get('[data-test="crop-image-dialog"]').should("not.exist");
+
+    // Check that image and buttons are still shown correctly
+    cy.get('[data-test="profile-image-field"]').within(() => {
+      cy.get('[data-test="default-profile-image-preview"]').should("not.exist");
+      cy.get('[data-test="profile-image-preview"]')
+        .should("be.visible")
+        .find("img")
+        .should("have.attr", "src")
+        .then((src) => {
+          cy.fixture("files/profileImagePreview.jpg", "base64").then(
+            (content) => {
+              expect(src).to.eql("data:image/jpeg;base64," + content);
+            },
+          );
+        });
+      cy.get('[data-test="upload-file-button"]').should("be.visible");
+      cy.get('[data-test="delete-image-button"]').should("not.exist");
+      cy.get('[data-test="undo-delete-button"]').should("not.exist");
+
+      cy.get('[data-test="reset-file-upload-button"]').should("be.visible");
+    });
+
+    cy.get('[data-test="locale-dropdown"]')
+      .should("have.text", "English")
+      .click();
+
+    cy.get('[data-test="locale-dropdown-option"]').eq(0).click();
+
+    cy.get('[data-test="locale-dropdown-items"]').should("not.exist");
+    cy.get('[data-test="locale-dropdown"]').should("have.text", "Deutsch");
+
+    cy.get('[data-test="timezone-dropdown"]')
+      .should("have.text", "UTC")
+      .click();
+
+    cy.get('[data-test="timezone-dropdown-option"]').eq(2).click();
+
+    cy.get('[data-test="timezone-dropdown-items"]').should("not.exist");
+    cy.get('[data-test="timezone-dropdown"]').should(
+      "have.text",
+      "Europe/Berlin",
+    );
+
+    // Check that save button is shown
+    cy.get('[data-test="user-tab-profile-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+
+    // Switch to view
+    cy.get('[data-test="users-cancel-edit-button"]').click();
+
+    // Check if redirected to view page
+    cy.url().should("include", "/admin/users/2");
+    cy.url().should("not.include", "/edit");
+
+    cy.wait("@userRequest");
+
+    // Check that changes were not saved
+    cy.get("#firstname").should("have.value", "Laura").and("be.disabled");
+    cy.get("#lastname").should("have.value", "Rivera").and("be.disabled");
+    cy.get('[data-test="profile-image-preview"]').should("not.exist");
+    cy.get('[data-test="default-profile-image-preview"]')
+      .should("be.visible")
+      .and("include.text", "LR");
+    cy.get('[data-test="locale-dropdown"]')
+      .should("have.text", "English")
+      .within(() => {
+        cy.get(".p-select-label").should("have.attr", "aria-disabled", "true");
+      });
+    cy.get('[data-test="timezone-dropdown"]')
+      .should("have.text", "UTC")
+      .within(() => {
+        cy.get(".p-select-label").should("have.attr", "aria-disabled", "true");
+      });
+
+    // Check that save button is hidden
+    cy.get('[data-test="user-tab-profile-save-button"]').should("not.exist");
+
+    // Switch to edit again
+    cy.get('[data-test="users-edit-button"]').click();
+
+    cy.url().should("include", "/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    // Check that original values are shown
+    cy.get("#firstname")
+      .should("have.value", "Laura")
+      .should("not.be.disabled");
+    cy.get("#lastname")
+      .should("have.value", "Rivera")
+      .should("not.be.disabled");
+    cy.get('[data-test="profile-image-preview"]').should("not.exist");
+    cy.get('[data-test="default-profile-image-preview"]')
+      .should("be.visible")
+      .and("include.text", "LR");
+    cy.get('[data-test="locale-dropdown"]')
+      .should("have.text", "English")
+      .within(() => {
+        cy.get(".p-select-label").should(
+          "not.have.attr",
+          "aria-disabled",
+          "true",
+        );
+      });
+    cy.get('[data-test="timezone-dropdown"]')
+      .should("have.text", "UTC")
+      .within(() => {
+        cy.get(".p-select-label").should(
+          "not.have.attr",
+          "aria-disabled",
+          "true",
+        );
+      });
+
+    // Check that save button is shown
+    cy.get('[data-test="user-tab-profile-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+
+    // Check email tab
+    cy.get('[data-test="email-tab-button"]').click();
+
+    // Change value of email field
+    cy.get("#email").should("have.value", "LauraWRivera@domain.tld").type("e");
+
+    // Check that save button is shown
+    cy.get('[data-test="user-tab-email-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+
+    // Switch to view
+    cy.get('[data-test="users-cancel-edit-button"]').click();
+
+    // Check if redirected to view page
+    cy.url().should("include", "/admin/users/2");
+    cy.url().should("not.include", "/edit");
+
+    cy.wait("@userRequest");
+
+    // Switch to email tab and check that changes are not saved
+    cy.get('[data-test="email-tab-button"]').click();
+
+    cy.get("#email")
+      .should("have.value", "LauraWRivera@domain.tld")
+      .should("be.disabled");
+
+    // Check that save button is hidden
+    cy.get('[data-test="user-tab-email-save-button"]').should("not.exist");
+
+    // Switch back to edit
+    cy.get('[data-test="users-edit-button"]').click();
+
+    // Check if redirected to edit page
+    cy.url().should("include", "/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="email-tab-button"]').click();
+
+    // Check that original values are shown
+    cy.get("#email")
+      .should("have.value", "LauraWRivera@domain.tld")
+      .should("not.be.disabled");
+
+    // Check that save button is shown
+    cy.get('[data-test="user-tab-email-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+
+    // Check security tab
+    cy.get('[data-test="security-tab-button"]').click();
+
+    // Change value of role field
+    cy.get('[data-test="role-dropdown"]')
+      .should("not.have.class", "multiselect--disabled")
+      .within(() => {
+        cy.get('[data-test="role-chip"]').should("have.length", 2);
+        cy.get('[data-test="role-chip"]')
+          .eq(0)
+          .should("include.text", "Students")
+          .find('[data-test="remove-role-button"]')
+          .should("not.exist");
+        cy.get('[data-test="role-chip"]')
+          .eq(1)
+          .should("include.text", "Staff")
+          .find('[data-test="remove-role-button"]')
+          .should("be.visible");
+      });
+
+    cy.get('[data-test="role-dropdown"]').click();
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get(".multiselect__option").eq(0).click();
+
+    // Check that roles are shown correctly
+    cy.get(".multiselect__content").should("be.visible");
+    cy.get('[data-test="role-dropdown"]').within(() => {
+      cy.get('[data-test="role-chip"]').should("have.length", 3);
+      cy.get('[data-test="role-chip"]')
+        .eq(0)
+        .should("include.text", "Students")
+        .find('[data-test="remove-role-button"]')
+        .should("not.exist");
+
+      cy.get('[data-test="role-chip"]')
+        .eq(1)
+        .should("include.text", "Staff")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+      cy.get('[data-test="role-chip"]')
+        .eq(2)
+        .should("include.text", "Superuser")
+        .find('[data-test="remove-role-button"]')
+        .should("be.visible");
+    });
+
+    // Close dropdown
+    cy.get(".multiselect__select").click();
+    cy.get(".multiselect__content").should("not.be.visible");
+
+    // Change value of password field
+    cy.get("#new_password").type("secretPassword123#");
+    cy.get("#new_password_confirmation").type("secretPassword123#");
+
+    // Check that save buttons are shown
+    cy.get('[data-test="users-roles-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+    cy.get('[data-test="change-password-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+
+    // Switch to view
+    cy.get('[data-test="users-cancel-edit-button"]').click();
+
+    // Check if redirected to view page and check that changes are not saved
+    cy.url().should("include", "/admin/users/2");
+    cy.url().should("not.include", "/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="security-tab-button"]').click();
+
+    cy.get('[data-test="role-dropdown"]')
+      .should("have.class", "multiselect--disabled")
+      .within(() => {
+        cy.get('[data-test="role-chip"]').should("have.length", 2);
+        cy.get('[data-test="role-chip"]')
+          .eq(0)
+          .should("include.text", "Students")
+          .find('[data-test="remove-role-button"]')
+          .should("not.exist");
+        cy.get('[data-test="role-chip"]')
+          .eq(1)
+          .should("include.text", "Staff")
+          .find('[data-test="remove-role-button"]')
+          .should("not.exist");
+      });
+
+    // Check that password fields are hidden
+    cy.get('[data-test="new-password-field"]').should("not.exist");
+
+    cy.get('[data-test="new-password-confirmation-field"]').should("not.exist");
+
+    // Check that save buttons are hidden
+    cy.get('[data-test="users-roles-save-button"]').should("not.exist");
+    cy.get('[data-test="change-password-save-button"]').should("not.exist");
+
+    // Switch back to edit page
+    cy.get('[data-test="users-edit-button"]').click();
+
+    cy.url().should("include", "/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="security-tab-button"]').click();
+
+    // Check that original values are shown
+    cy.get('[data-test="role-dropdown"]')
+      .should("not.have.class", "multiselect--disabled")
+      .within(() => {
+        cy.get('[data-test="role-chip"]').should("have.length", 2);
+        cy.get('[data-test="role-chip"]')
+          .eq(0)
+          .should("include.text", "Students")
+          .find('[data-test="remove-role-button"]')
+          .should("not.exist");
+        cy.get('[data-test="role-chip"]')
+          .eq(1)
+          .should("include.text", "Staff")
+          .find('[data-test="remove-role-button"]')
+          .should("be.visible");
+      });
+
+    cy.get("#new_password").should("have.value", "");
+    cy.get("#new_password_confirmation").should("have.value", "");
+
+    // Check that save buttons are shown
+    cy.get('[data-test="users-roles-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+    cy.get('[data-test="change-password-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+
+    // Check other tab
+    cy.get('[data-test="others-tab-button"]').click();
+
+    // Change value of bbb_skip_check_audio
+    cy.get("#bbb_skip_check_audio").click();
+
+    // Check that save button is shown
+    cy.get('[data-test="user-tab-others-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+
+    // Switch to view
+    cy.get('[data-test="users-cancel-edit-button"]').click();
+
+    // Check if redirected to view page
+    cy.url().should("include", "/admin/users/2");
+    cy.url().should("not.include", "/edit");
+
+    cy.wait("@userRequest");
+
+    // Switch to others tab and check if changes are not saved
+    cy.get('[data-test="others-tab-button"]').click();
+
+    cy.get("#bbb_skip_check_audio")
+      .should("not.be.checked")
+      .should("be.disabled");
+
+    // Check that save button is hidden
+    cy.get('[data-test="user-tab-others-save-button"]').should("not.exist");
+
+    // Switch back to edit page
+    cy.get('[data-test="users-edit-button"]').click();
+
+    // Check if redirected to edit page
+    cy.url().should("include", "/admin/users/2/edit");
+
+    cy.wait("@userRequest");
+
+    cy.get('[data-test="others-tab-button"]').click();
+
+    // Check that original value is shown
+    cy.get("#bbb_skip_check_audio")
+      .should("not.be.checked")
+      .should("not.be.disabled");
+
+    // Check that save button is shown
+    cy.get('[data-test="user-tab-others-save-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+  });
+});
diff --git a/tests/Frontend/e2e/Banner.cy.js b/tests/Frontend/e2e/Banner.cy.js
new file mode 100644
index 000000000..83ddca96b
--- /dev/null
+++ b/tests/Frontend/e2e/Banner.cy.js
@@ -0,0 +1,177 @@
+describe("Banner", function () {
+  beforeEach(function () {
+    cy.init();
+  });
+
+  it("check banner shown when enabled", function () {
+    cy.fixture("config.json").then((config) => {
+      config.data.banner.enabled = true;
+      config.data.banner.title = "Banner title";
+      config.data.banner.icon = "fa-solid fa-door-open";
+      config.data.banner.message = "Banner text message";
+      config.data.banner.link = "https://example.org/?foo=a&bar=b";
+      config.data.banner.link_text = "Example link";
+      config.data.banner.link_style = "link";
+      config.data.banner.link_target = "blank";
+      config.data.banner.color = "#FFFFFF";
+      config.data.banner.background = "#000000";
+      cy.intercept("GET", "/api/v1/config", config).as("configRequest");
+    });
+
+    cy.visit("/");
+
+    cy.wait("@configRequest");
+
+    // Check that banner is shown correctly
+    cy.get('[data-test="app-banner"]')
+      .should("have.attr", "style")
+      .and("include", "color: rgb(255, 255, 255);")
+      .and("include", "background-color: rgb(0, 0, 0);");
+    cy.get('[data-test="app-banner"]').within(() => {
+      cy.get('[data-test="banner-title"]')
+        .should("be.visible")
+        .and("include.text", "Banner title");
+      cy.get('[data-test="banner-icon"]')
+        .should("be.visible")
+        .and("have.class", "fa-solid fa-door-open");
+      cy.get('[data-test="banner-message"]')
+        .should("be.visible")
+        .and("have.text", "Banner text message");
+      cy.get('[data-test="banner-link-button"]')
+        .should("be.visible")
+        .and("have.attr", "href", "https://example.org/?foo=a&bar=b")
+        .and("have.attr", "target", "_blank")
+        .and("have.text", "Example link");
+      cy.get('[data-test="banner-link-button"]')
+        .find("button")
+        .should("have.attr", "data-p-severity", "link")
+        .and("have.class", "p-0 underline")
+        .and("have.attr", "style")
+        .and("include", "color: rgb(255, 255, 255)");
+    });
+
+    // Reload with different banner settings
+    cy.fixture("config.json").then((config) => {
+      config.data.banner.enabled = true;
+      config.data.banner.title = "New banner title";
+      config.data.banner.message = "Banner message";
+      config.data.banner.color = "#000000";
+      config.data.banner.background = "#ef4444";
+      cy.intercept("GET", "/api/v1/config", config).as("configRequest");
+
+      cy.reload();
+
+      cy.wait("@configRequest");
+
+      // Check that banner is shown correctly
+      cy.get('[data-test="app-banner"]')
+        .should("have.attr", "style")
+        .and("include", "color: rgb(0, 0, 0);")
+        .and("include", "background-color: rgb(239, 68, 68);");
+      cy.get('[data-test="app-banner"]').within(() => {
+        cy.get('[data-test="banner-title"]')
+          .should("be.visible")
+          .and("include.text", "New banner title");
+        cy.get('[data-test="banner-icon"]').should("not.exist");
+        cy.get('[data-test="banner-message"]')
+          .should("be.visible")
+          .and("have.text", "Banner message");
+        cy.get('[data-test="banner-link-button"]').should("not.exist");
+      });
+    });
+  });
+
+  it("check banner link works correctly", function () {
+    cy.fixture("config.json").then((config) => {
+      config.data.banner.enabled = true;
+      config.data.banner.title = "Banner title";
+      config.data.banner.link = Cypress.config("baseUrl") + "/rooms";
+      config.data.banner.link_text = "Room link";
+      config.data.banner.link_style = "danger";
+      config.data.banner.link_target = "self";
+      config.data.banner.color = "#FFFFFF";
+      config.data.banner.background = "#000000";
+      cy.intercept("GET", "/api/v1/config", config).as("configRequest");
+    });
+
+    cy.visit("/");
+
+    cy.interceptRoomIndexRequests();
+
+    // Check that banner is shown correctly
+    cy.get('[data-test="app-banner"]')
+      .should("have.attr", "style")
+      .and("include", "color: rgb(255, 255, 255);")
+      .and("include", "background-color: rgb(0, 0, 0);");
+    cy.get('[data-test="app-banner"]').within(() => {
+      cy.get('[data-test="banner-title"]')
+        .should("be.visible")
+        .and("include.text", "Banner title");
+      cy.get('[data-test="banner-icon"]').should("not.exist");
+      cy.get('[data-test="banner-message"]')
+        .should("not.be.visible")
+        .and("have.text", "");
+      cy.get('[data-test="banner-link-button"]')
+        .should("be.visible")
+        .and("have.attr", "href", Cypress.config("baseUrl") + "/rooms")
+        .and("have.attr", "target", "_self")
+        .and("have.text", "Room link");
+      cy.get('[data-test="banner-link-button"]')
+        .find("button")
+        .should("have.attr", "data-p-severity", "danger")
+        .and("not.have.class", "p-0 underline");
+
+      cy.get('[data-test="banner-link-button"]').click();
+    });
+
+    // Check that redirect worked
+    cy.url().should("contain", "/rooms");
+
+    // Check that banner is still shown
+    cy.get('[data-test="app-banner"]')
+      .should("have.attr", "style")
+      .and("include", "color: rgb(255, 255, 255);")
+      .and("include", "background-color: rgb(0, 0, 0);");
+    cy.get('[data-test="app-banner"]').within(() => {
+      cy.get('[data-test="banner-title"]')
+        .should("be.visible")
+        .and("include.text", "Banner title");
+      cy.get('[data-test="banner-icon"]').should("not.exist");
+      cy.get('[data-test="banner-message"]')
+        .should("not.be.visible")
+        .and("have.text", "");
+      cy.get('[data-test="banner-link-button"]')
+        .should("be.visible")
+        .and("have.attr", "href", Cypress.config("baseUrl") + "/rooms")
+        .and("have.attr", "target", "_self")
+        .and("have.text", "Room link");
+      cy.get('[data-test="banner-link-button"]')
+        .find("button")
+        .should("have.attr", "data-p-severity", "danger")
+        .and("not.have.class", "p-0 underline");
+    });
+  });
+
+  it("check banner hidden if disabled", function () {
+    cy.fixture("config.json").then((config) => {
+      config.data.banner.enabled = false;
+      config.data.banner.title = "Banner title";
+      config.data.banner.icon = "fa-solid fa-door-open";
+      config.data.banner.message = "Banner text message";
+      config.data.banner.link = Cypress.config("baseUrl") + "/rooms";
+      config.data.banner.link_text = "Rooms";
+      config.data.banner.link_style = "link";
+      config.data.banner.link_target = "blank";
+      config.data.banner.color = "#FFFFFF";
+      config.data.banner.background = "#000000";
+      cy.intercept("GET", "/api/v1/config", config).as("configRequest");
+    });
+
+    cy.visit("/");
+
+    cy.wait("@configRequest");
+
+    // Check that banner is shown correctly
+    cy.get('[data-test="app-banner"]').should("not.exist");
+  });
+});
diff --git a/tests/Frontend/e2e/Footer.cy.js b/tests/Frontend/e2e/Footer.cy.js
new file mode 100644
index 000000000..75b6e6455
--- /dev/null
+++ b/tests/Frontend/e2e/Footer.cy.js
@@ -0,0 +1,339 @@
+describe("Footer", function () {
+  beforeEach(function () {
+    cy.init();
+  });
+
+  it("check footer shown correctly with 2 links, version and no whitelabel", function () {
+    cy.fixture("config.json").then((config) => {
+      config.data.general.legal_notice_url = "https://example.org/legal";
+      config.data.general.privacy_policy_url = "https://example.org/privacy";
+      config.data.general.version = "1.0.0";
+      config.data.general.whitelabel = false;
+
+      cy.intercept("GET", "/api/v1/config", config).as("configRequest");
+    });
+
+    cy.visit("/");
+
+    cy.wait("@configRequest");
+
+    // Check that footer is shown correctly
+    cy.get('[data-test="app-footer"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="legal-notice-button"]')
+          .should("be.visible")
+          .and("have.text", "app.footer.legal_notice")
+          .and("have.attr", "href", "https://example.org/legal");
+
+        cy.get('[data-test="privacy-policy-button"]')
+          .should("be.visible")
+          .and("have.text", "app.footer.privacy_policy")
+          .and("have.attr", "href", "https://example.org/privacy");
+
+        cy.get('[data-test="github-button"]')
+          .should("be.visible")
+          .and("have.text", "PILOS")
+          .and("have.attr", "href", "https://github.com/THM-Health/PILOS");
+        cy.get('[data-test="version"]')
+          .should("be.visible")
+          .and("have.text", "app.version 1.0.0");
+      });
+  });
+
+  it("check footer shown correctly with only legal notice link, no version and whitelabel", function () {
+    cy.fixture("config.json").then((config) => {
+      config.data.general.legal_notice_url = "https://example.org/legal";
+      config.data.general.privacy_policy_url = "";
+      config.data.general.version = null;
+      config.data.general.whitelabel = true;
+
+      cy.intercept("GET", "/api/v1/config", config).as("configRequest");
+    });
+
+    cy.visit("/");
+
+    cy.wait("@configRequest");
+
+    // Check that footer is shown correctly
+    cy.get('[data-test="app-footer"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="legal-notice-button"]')
+          .should("be.visible")
+          .and("have.text", "app.footer.legal_notice")
+          .and("have.attr", "href", "https://example.org/legal");
+
+        cy.get('[data-test="privacy-policy-button"]').should("not.exist");
+
+        cy.get('[data-test="github-button"]').should("not.exist");
+        cy.get('[data-test="version"]').should("not.exist");
+      });
+  });
+
+  it("check footer shown correctly with only privacy policy link, no version and whitelabel", function () {
+    cy.fixture("config.json").then((config) => {
+      config.data.general.legal_notice_url = "";
+      config.data.general.privacy_policy_url = "https://example.org/privacy";
+      config.data.general.version = null;
+      config.data.general.whitelabel = true;
+
+      cy.intercept("GET", "/api/v1/config", config).as("configRequest");
+    });
+
+    cy.visit("/");
+    cy.wait("@configRequest");
+
+    // Check that footer is shown correctly
+    cy.get('[data-test="app-footer"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="legal-notice-button"]').should("not.exist");
+
+        cy.get('[data-test="privacy-policy-button"]')
+          .should("be.visible")
+          .and("have.text", "app.footer.privacy_policy")
+          .and("have.attr", "href", "https://example.org/privacy");
+
+        cy.get('[data-test="github-button"]').should("not.exist");
+        cy.get('[data-test="version"]').should("not.exist");
+      });
+  });
+
+  it("check footer shown correctly with no links, no version and no whitelabel", function () {
+    cy.fixture("config.json").then((config) => {
+      config.data.general.legal_notice_url = "";
+      config.data.general.privacy_policy_url = "";
+      config.data.general.version = null;
+      config.data.general.whitelabel = false;
+
+      cy.intercept("GET", "/api/v1/config", config).as("configRequest");
+    });
+
+    cy.visit("/");
+    cy.wait("@configRequest");
+
+    // Check that footer is shown correctly
+    cy.get('[data-test="app-footer"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="legal-notice-button"]').should("not.exist");
+
+        cy.get('[data-test="privacy-policy-button"]').should("not.exist");
+
+        cy.get('[data-test="github-button"]')
+          .should("be.visible")
+          .and("have.text", "PILOS")
+          .and("have.attr", "href", "https://github.com/THM-Health/PILOS");
+        cy.get('[data-test="version"]').should("not.exist");
+      });
+  });
+
+  it("check footer shown correctly with no links, version and whitelabel", function () {
+    cy.fixture("config.json").then((config) => {
+      config.data.general.legal_notice_url = "";
+      config.data.general.privacy_policy_url = "";
+      config.data.general.version = "1.0.0";
+      config.data.general.whitelabel = true;
+
+      cy.intercept("GET", "/api/v1/config", config).as("configRequest");
+    });
+
+    cy.visit("/");
+    cy.wait("@configRequest");
+
+    // Check that footer is shown correctly
+    cy.get('[data-test="app-footer"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="legal-notice-button"]').should("not.exist");
+
+        cy.get('[data-test="privacy-policy-button"]').should("not.exist");
+
+        cy.get('[data-test="github-button"]').should("not.exist");
+        cy.get('[data-test="version"]')
+          .should("be.visible")
+          .and("have.text", "app.version 1.0.0");
+      });
+  });
+
+  it("check footer shown correctly with 2 links, version and whitelabel", function () {
+    cy.fixture("config.json").then((config) => {
+      config.data.general.legal_notice_url = "https://example.org/legal";
+      config.data.general.privacy_policy_url = "https://example.org/privacy";
+      config.data.general.version = "1.0.0";
+      config.data.general.whitelabel = true;
+
+      cy.intercept("GET", "/api/v1/config", config).as("configRequest");
+    });
+
+    cy.visit("/");
+    cy.wait("@configRequest");
+
+    // Check that footer is shown correctly
+    cy.get('[data-test="app-footer"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="legal-notice-button"]')
+          .should("be.visible")
+          .and("have.text", "app.footer.legal_notice")
+          .and("have.attr", "href", "https://example.org/legal");
+
+        cy.get('[data-test="privacy-policy-button"]')
+          .should("be.visible")
+          .and("have.text", "app.footer.privacy_policy")
+          .and("have.attr", "href", "https://example.org/privacy");
+
+        cy.get('[data-test="github-button"]').should("not.exist");
+        cy.get('[data-test="version"]')
+          .should("be.visible")
+          .and("have.text", "app.version 1.0.0");
+      });
+  });
+
+  it("check footer shown correctly with 2 links, no version and whitelabel", function () {
+    cy.fixture("config.json").then((config) => {
+      config.data.general.legal_notice_url = "https://example.org/legal";
+      config.data.general.privacy_policy_url = "https://example.org/privacy";
+      config.data.general.version = "";
+      config.data.general.whitelabel = true;
+
+      cy.intercept("GET", "/api/v1/config", config).as("configRequest");
+    });
+
+    cy.visit("/");
+    cy.wait("@configRequest");
+
+    cy.get('[data-test="app-footer"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="legal-notice-button"]')
+          .should("be.visible")
+          .and("have.text", "app.footer.legal_notice")
+          .and("have.attr", "href", "https://example.org/legal");
+
+        cy.get('[data-test="privacy-policy-button"]')
+          .should("be.visible")
+          .and("have.text", "app.footer.privacy_policy")
+          .and("have.attr", "href", "https://example.org/privacy");
+
+        cy.get('[data-test="github-button"]').should("not.exist");
+        cy.get('[data-test="version"]').should("not.exist");
+      });
+  });
+
+  it("check footer hidden with no links, no version and whitelabel", function () {
+    // Reload without footer
+    cy.fixture("config.json").then((config) => {
+      config.data.general.legal_notice_url = "";
+      config.data.general.privacy_policy_url = "";
+      config.data.general.version = "";
+      config.data.general.whitelabel = true;
+
+      cy.intercept("GET", "/api/v1/config", config).as("configRequest");
+    });
+
+    cy.visit("/");
+    cy.wait("@configRequest");
+
+    cy.get('[data-test="app-footer"]').should("not.exist");
+  });
+
+  it("check footer shown correctly with only legal notice link, version and whitelabel", function () {
+    cy.fixture("config.json").then((config) => {
+      config.data.general.legal_notice_url = "https://example.org/legal";
+      config.data.general.privacy_policy_url = "";
+      config.data.general.version = "1.2.0";
+      config.data.general.whitelabel = true;
+
+      cy.intercept("GET", "/api/v1/config", config).as("configRequest");
+    });
+
+    cy.visit("/");
+
+    cy.wait("@configRequest");
+
+    // Check that footer is shown correctly
+    cy.get('[data-test="app-footer"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="legal-notice-button"]')
+          .should("be.visible")
+          .and("have.text", "app.footer.legal_notice")
+          .and("have.attr", "href", "https://example.org/legal");
+
+        cy.get('[data-test="privacy-policy-button"]').should("not.exist");
+
+        cy.get('[data-test="github-button"]').should("not.exist");
+        cy.get('[data-test="version"]')
+          .should("be.visible")
+          .and("have.text", "app.version 1.2.0");
+      });
+  });
+
+  it("check footer shown correctly with only privacy policy link, version and whitelabel", function () {
+    cy.fixture("config.json").then((config) => {
+      config.data.general.legal_notice_url = "";
+      config.data.general.privacy_policy_url = "https://example.org/privacy";
+      config.data.general.version = "2.1.0";
+      config.data.general.whitelabel = true;
+
+      cy.intercept("GET", "/api/v1/config", config).as("configRequest");
+    });
+
+    cy.visit("/");
+    cy.wait("@configRequest");
+
+    // Check that footer is shown correctly
+    cy.get('[data-test="app-footer"]')
+      .should("be.visible")
+      .within(() => {
+        cy.get('[data-test="legal-notice-button"]').should("not.exist");
+
+        cy.get('[data-test="privacy-policy-button"]')
+          .should("be.visible")
+          .and("have.text", "app.footer.privacy_policy")
+          .and("have.attr", "href", "https://example.org/privacy");
+
+        cy.get('[data-test="github-button"]').should("not.exist");
+        cy.get('[data-test="version"]')
+          .should("be.visible")
+          .and("have.text", "app.version 2.1.0");
+      });
+  });
+
+  it("open legal notice link", function () {
+    cy.fixture("config.json").then((config) => {
+      config.data.general.legal_notice_url = "https://example.org/?foo=a&bar=b";
+
+      cy.intercept("GET", "/api/v1/config", config).as("configRequest");
+    });
+
+    cy.visit("/");
+    cy.wait("@configRequest");
+
+    cy.get('[data-test="legal-notice-button"]').click();
+
+    cy.origin("https://example.org", () => {
+      cy.url().should("eq", "https://example.org/?foo=a&bar=b");
+    });
+  });
+
+  it("open privacy policy link", function () {
+    cy.fixture("config.json").then((config) => {
+      config.data.general.privacy_policy_url =
+        "https://example.org/?foo=a&bar=b";
+
+      cy.intercept("GET", "/api/v1/config", config).as("configRequest");
+    });
+
+    cy.visit("/");
+    cy.wait("@configRequest");
+
+    cy.get('[data-test="privacy-policy-button"]').click();
+
+    cy.origin("https://example.org", () => {
+      cy.url().should("eq", "https://example.org/?foo=a&bar=b");
+    });
+  });
+});
diff --git a/tests/Frontend/e2e/ForgotPassword.cy.js b/tests/Frontend/e2e/ForgotPassword.cy.js
new file mode 100644
index 000000000..24ddd0afc
--- /dev/null
+++ b/tests/Frontend/e2e/ForgotPassword.cy.js
@@ -0,0 +1,178 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Forgot password", function () {
+  beforeEach(function () {
+    cy.intercept("GET", "api/v1/locale/en", {});
+
+    cy.fixture("config.json").then((config) => {
+      config.data.auth.local = true;
+
+      cy.intercept("GET", "api/v1/config", {
+        statusCode: 200,
+        body: config,
+      });
+    });
+  });
+
+  it("check with local auth disabled", function () {
+    cy.fixture("config.json").then((config) => {
+      config.data.auth.local = false;
+
+      cy.intercept("GET", "api/v1/config", {
+        statusCode: 200,
+        body: config,
+      });
+    });
+
+    cy.visit("/forgot_password");
+
+    cy.url().should("include", "/404").and("not.include", "/forgot_password");
+  });
+
+  it("check with password change forbidden", function () {
+    cy.fixture("config.json").then((config) => {
+      config.data.auth.local = true;
+      config.data.user.password_change_allowed = false;
+
+      cy.intercept("GET", "api/v1/config", {
+        statusCode: 200,
+        body: config,
+      });
+    });
+
+    cy.visit("/forgot_password");
+
+    cy.url().should("include", "/404").and("not.include", "/forgot_password");
+  });
+
+  it("visit with logged in user", function () {
+    cy.intercept("GET", "api/v1/currentUser", {
+      statusCode: 200,
+      fixture: "currentUser.json",
+    });
+
+    cy.visit("/forgot_password");
+
+    // Check that error message is shown
+    cy.checkToastMessage("app.flash.guests_only");
+
+    // Check that user is redirected to home page
+    cy.url().should("not.include", "/forgot_password");
+    cy.get("h1").should("be.visible").and("include.text", "home.title");
+  });
+
+  it("forgot password", function () {
+    cy.visit("/forgot_password");
+
+    // Intercept csrf-cookie request to set defined cookie that can be checked later
+    cy.intercept("GET", "/sanctum/csrf-cookie", {
+      statusCode: 200,
+      headers: {
+        "Set-Cookie": "XSRF-TOKEN=test-csrf; Path=/",
+      },
+    }).as("cookieRequest");
+
+    // Intercept forgot password request
+    const forgotPasswordRequest = interceptIndefinitely(
+      "POST",
+      "api/v1/password/email",
+      {
+        statusCode: 200,
+        body: {
+          message: "Success!",
+        },
+      },
+      "forgotPasswordRequest",
+    );
+
+    // Check that email field is shown correctly and click on submit button
+    cy.get('[data-test="email-field"]')
+      .should("be.visible")
+      .and("include.text", "app.email")
+      .within(() => {
+        cy.get("#email")
+          .should("be.visible")
+          .and("have.value", "")
+          .type("JohnDoe@domain.tld");
+      });
+
+    cy.get('[data-test="send-reset-link-button"]')
+      .should("have.text", "auth.send_password_reset_link")
+      .click();
+
+    // Check loading
+    cy.get("#email").should("be.disabled");
+    cy.get('[data-test="send-reset-link-button"]')
+      .should("be.disabled")
+      .then(() => {
+        forgotPasswordRequest.sendResponse();
+      });
+
+    cy.wait("@cookieRequest");
+
+    // Check if correct data gets sent
+    cy.wait("@forgotPasswordRequest").then((interception) => {
+      expect(interception.request.body).to.eql({
+        email: "JohnDoe@domain.tld",
+      });
+      expect(interception.request.headers).to.contain({
+        "x-xsrf-token": "test-csrf",
+      });
+    });
+
+    // Check if success message is shown
+    cy.checkToastMessage("Success!");
+
+    // Check that user is redirected to home page
+    cy.url().should("not.include", "/forgot_password");
+    cy.get("h1").should("be.visible").and("include.text", "home.title");
+  });
+
+  it("forgot password errors", function () {
+    cy.visit("/forgot_password");
+
+    cy.get("#email").type("JohnDoe@domain.tld");
+
+    // Check with 422 error
+    cy.intercept("POST", "api/v1/password/email", {
+      statusCode: 422,
+      body: {
+        errors: {
+          email: ["The email fiel is required."],
+        },
+      },
+    }).as("forgotPasswordRequest");
+
+    cy.get('[data-test="send-reset-link-button"]').click();
+
+    cy.wait("@forgotPasswordRequest");
+
+    // Check that error message is shown
+    cy.get('[data-test="email-field"]')
+      .should("be.visible")
+      .and("include.text", "The email fiel is required.");
+
+    // Check with 500 error
+    cy.intercept("POST", "api/v1/password/email", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("forgotPasswordRequest");
+
+    cy.get('[data-test="send-reset-link-button"]').click();
+
+    cy.wait("@forgotPasswordRequest");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that 422 error message is hidden
+    cy.get('[data-test="email-field"]')
+      .should("be.visible")
+      .and("not.include.text", "The email fiel is required.");
+  });
+});
diff --git a/tests/Frontend/e2e/GeneralApplication.cy.js b/tests/Frontend/e2e/GeneralApplication.cy.js
index befcc868c..974d36b08 100644
--- a/tests/Frontend/e2e/GeneralApplication.cy.js
+++ b/tests/Frontend/e2e/GeneralApplication.cy.js
@@ -186,4 +186,38 @@ describe("General", function () {
     // Check if the welcome page is shown
     cy.get("h1").should("be.visible").and("contain", "home.title");
   });
+
+  it("check help button if help url specified", function () {
+    cy.fixture("config.json").then((config) => {
+      config.data.general.help_url = "https://example.org/?foo=a&bar=b";
+
+      cy.intercept("GET", "/api/v1/config", config).as("configRequest");
+    });
+    cy.visit("/");
+
+    cy.get(".fa-solid.fa-circle-question")
+      .should("be.visible")
+      .parent()
+      .should("have.attr", "href", "https://example.org/?foo=a&bar=b")
+      .and("have.attr", "target", "_blank")
+      .invoke("removeAttr", "target");
+
+    cy.get(".fa-solid.fa-circle-question").click();
+
+    // Check that redirect worked
+    cy.origin("https://example.org", () => {
+      cy.url().should("eq", "https://example.org/?foo=a&bar=b");
+    });
+  });
+
+  it("check help button hidden if help url not specified", function () {
+    cy.fixture("config.json").then((config) => {
+      config.data.general.help_url = "";
+
+      cy.intercept("GET", "/api/v1/config", config).as("configRequest");
+    });
+    cy.visit("/");
+
+    cy.get(".fa-solid.fa-circle-question").should("not.exist");
+  });
 });
diff --git a/tests/Frontend/e2e/Login.cy.js b/tests/Frontend/e2e/Login.cy.js
index 2eba107f7..954174903 100644
--- a/tests/Frontend/e2e/Login.cy.js
+++ b/tests/Frontend/e2e/Login.cy.js
@@ -157,6 +157,7 @@ describe("Login", function () {
     // Intercept config request to only show local login tab
     cy.fixture("config.json").then((config) => {
       config.data.auth.local = true;
+      config.data.user.password_change_allowed = false;
 
       cy.intercept("GET", "api/v1/config", {
         statusCode: 200,
@@ -202,6 +203,9 @@ describe("Login", function () {
           cy.get("#local-password").should("have.value", "").type("password");
         });
 
+      // Check that forgot password link is hidden because password change is not allowed
+      cy.get('[data-test="forgot-password-button"]').should("not.exist");
+
       // Intercept requests that will be needed to show the room index page (needed to check redirect)
       cy.intercept("GET", "api/v1/currentUser", {
         fixture: "currentUser.json",
@@ -243,6 +247,38 @@ describe("Login", function () {
     cy.url().should("include", "/rooms").and("not.include", "/login");
   });
 
+  it("open forgot password page", function () {
+    cy.fixture("config.json").then((config) => {
+      config.data.auth.local = true;
+
+      cy.intercept("GET", "api/v1/config", {
+        statusCode: 200,
+        body: config,
+      });
+    });
+
+    cy.visit("/login");
+
+    // Check if local login tab is shown correctly
+    cy.get('[data-test="login-tab-local"]').within(() => {
+      cy.get("#local-email").should("be.visible").and("not.be.disabled");
+      cy.get("#local-password").should("be.visible").and("not.be.disabled");
+
+      cy.get('[data-test="login-button"]')
+        .should("be.visible")
+        .and("not.be.disabled");
+
+      // Check that forgot password link is shown
+      cy.get('[data-test="forgot-password-button"]')
+        .should("be.visible")
+        .and("not.be.disabled")
+        .and("have.text", "auth.forgot_password")
+        .click();
+    });
+
+    cy.url().should("include", "/forgot_password").and("not.include", "/login");
+  });
+
   it("hide local login if disabled", function () {
     cy.fixture("config.json").then((config) => {
       config.data.auth.local = false;
diff --git a/tests/Frontend/e2e/Logout.cy.js b/tests/Frontend/e2e/Logout.cy.js
index 6d93a6d8e..d334a132c 100644
--- a/tests/Frontend/e2e/Logout.cy.js
+++ b/tests/Frontend/e2e/Logout.cy.js
@@ -11,7 +11,7 @@ describe("Logout", function () {
         redirect: false,
       },
     }).as("logoutRequest");
-    cy.visit("rooms");
+    cy.visit("/rooms");
 
     // Click on logout
     cy.get('[data-test="user-avatar"]').click();
@@ -42,7 +42,7 @@ describe("Logout", function () {
         redirect: "https://example.org/?foo=a&bar=b",
       },
     }).as("logoutRequest");
-    cy.visit("rooms");
+    cy.visit("/rooms");
     // Click on logout
     cy.get("[data-test=user-avatar]").click();
     cy.get("[data-test=submenu]")
diff --git a/tests/Frontend/e2e/MeetingsIndex.cy.js b/tests/Frontend/e2e/MeetingsIndex.cy.js
new file mode 100644
index 000000000..a694343e5
--- /dev/null
+++ b/tests/Frontend/e2e/MeetingsIndex.cy.js
@@ -0,0 +1,1104 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Meetings index", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.interceptMeetingsIndexRequests();
+
+    cy.fixture("currentUser.json").then((currentUser) => {
+      currentUser.data.permissions = ["rooms.viewAny", "meetings.viewAny"];
+      cy.intercept("GET", "api/v1/currentUser", {
+        statusCode: 200,
+        body: currentUser,
+      });
+    });
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/meetings");
+  });
+
+  it("visit with user without permission to view meetings", function () {
+    cy.intercept("GET", "api/v1/currentUser", {
+      statusCode: 200,
+      fixture: "currentUser.json",
+    });
+
+    cy.visit("/meetings");
+
+    cy.checkToastMessage("app.flash.unauthorized");
+
+    // Check if the welcome page is shown
+    cy.url().should("not.include", "/admin/meetings");
+    cy.get("h1").should("be.visible").and("contain", "home.title");
+  });
+
+  it("load meetings", function () {
+    const meetingsRequest = interceptIndefinitely(
+      "GET",
+      "api/v1/meetings*",
+      { fixture: "meetings.json" },
+      "meetingsRequest",
+    );
+
+    cy.visit("/meetings");
+
+    cy.contains("meetings.currently_running").should("be.visible");
+
+    // Test loading
+    cy.get('[data-test="meeting-search"]').within(() => {
+      cy.get("input").should("be.visible").and("be.disabled");
+      cy.get("button").should("be.visible").and("be.disabled");
+    });
+
+    cy.get('[data-test="meetings-reload-button"]')
+      .should("be.visible")
+      .and("be.disabled");
+
+    cy.get('[data-test="overlay"]')
+      .should("be.visible")
+      .then(() => {
+        meetingsRequest.sendResponse();
+      });
+
+    cy.wait("@meetingsRequest");
+
+    // Check that loading is over
+    cy.get('[data-test="meeting-search"]').within(() => {
+      cy.get("input").should("be.visible").and("not.be.disabled");
+      cy.get("button").should("be.visible").and("not.be.disabled");
+    });
+
+    cy.get('[data-test="meetings-reload-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that headers are displayed correctly
+    cy.get('[data-test="meeting-header-cell"]').should("have.length", 9);
+
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(0)
+      .should("have.text", "meetings.start");
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(1)
+      .should("have.text", "rooms.name");
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(2)
+      .should("have.text", "meetings.owner");
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(3)
+      .should("have.text", "app.server");
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(4)
+      .within(() => {
+        cy.get(".fa-users").should("be.visible");
+      });
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(5)
+      .within(() => {
+        cy.get(".fa-headphones").should("be.visible");
+      });
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(6)
+      .within(() => {
+        cy.get(".fa-microphone").should("be.visible");
+      });
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(7)
+      .within(() => {
+        cy.get(".fa-video").should("be.visible");
+      });
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(8)
+      .should("have.text", "app.actions");
+
+    // Check that meetings are displayed correctly
+    cy.get('[data-test="meeting-item"]').should("have.length", 3);
+
+    cy.get('[data-test="meeting-item"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="meeting-item-cell"]').should("have.length", 9);
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(0)
+          .should("have.text", "02/12/2021, 19:09");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(1)
+          .should("have.text", "Meeting One");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(2)
+          .should("have.text", "John Doe");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(3)
+          .should("have.text", "Server 01");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(4)
+          .should("have.text", "10");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(5)
+          .should("have.text", "5");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(6)
+          .should("have.text", "5");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(7)
+          .should("have.text", "3");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(8)
+          .within(() => {
+            cy.get('[data-test="meeting-view-room-button"]')
+              .should("be.visible")
+              .and("have.attr", "href", "/rooms/abc-def-123");
+          });
+      });
+
+    cy.get('[data-test="meeting-item"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="meeting-item-cell"]').should("have.length", 9);
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(0)
+          .should("have.text", "02/12/2021, 19:10");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(1)
+          .should("have.text", "Meeting Two");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(2)
+          .should("have.text", "Max Doe");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(3)
+          .should("have.text", "Server 02");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(4)
+          .should("have.text", "50");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(5)
+          .should("have.text", "30");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(6)
+          .should("have.text", "20");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(7)
+          .should("have.text", "10");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(8)
+          .within(() => {
+            cy.get('[data-test="meeting-view-room-button"]')
+              .should("be.visible")
+              .and("have.attr", "href", "/rooms/def-abc-123");
+          });
+      });
+
+    cy.get('[data-test="meeting-item"]')
+      .eq(2)
+      .within(() => {
+        cy.get('[data-test="meeting-item-cell"]').should("have.length", 9);
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(0)
+          .should("have.text", "02/12/2021, 18:14");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(1)
+          .should("have.text", "Meeting Three");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(2)
+          .should("have.text", "John Doe");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(3)
+          .should("have.text", "Server 01");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(4)
+          .should("include.text", "---");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(5)
+          .should("include.text", "---");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(6)
+          .should("include.text", "---");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(7)
+          .should("include.text", "---");
+
+        cy.get('[data-test="meeting-item-cell"]')
+          .eq(8)
+          .within(() => {
+            cy.get('[data-test="meeting-view-room-button"]')
+              .should("be.visible")
+              .and("have.attr", "href", "/rooms/def-abc-456");
+          });
+      });
+  });
+
+  it("load meetings errors", function () {
+    cy.intercept("GET", "api/v1/meetings*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("meetingsRequest");
+
+    cy.visit("/meetings");
+
+    cy.wait("@meetingsRequest");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that overlay is shown
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that components are not disabled
+    cy.get('[data-test="meeting-search"]').within(() => {
+      cy.get("input").should("be.visible").and("not.be.disabled");
+      cy.get("button").should("be.visible").and("not.be.disabled");
+    });
+
+    cy.get('[data-test="meetings-reload-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+
+    // Reload with correct data
+    cy.fixture("meetings.json").then((meetings) => {
+      meetings.data = meetings.data.slice(0, 1);
+      meetings.meta.last_page = 3;
+      meetings.meta.per_page = 1;
+      meetings.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/meetings*", {
+        statusCode: 200,
+        body: meetings,
+      }).as("meetingsRequest");
+    });
+
+    cy.get('[data-test="loading-retry-button"]')
+      .should("be.visible")
+      .and("include.text", "app.reload")
+      .click();
+
+    cy.wait("@meetingsRequest");
+
+    // Check that overlay is hidden
+    cy.get('[data-test="overlay"]').should("not.exist");
+    cy.get('[data-test="loading-retry-button"]').should("not.exist");
+
+    // Check that meeting is shown and contains the correct data
+    cy.get('[data-test="meeting-item"]').should("have.length", 1);
+
+    cy.get('[data-test="meeting-item"]')
+      .eq(0)
+      .should("include.text", "02/12/2021, 19:09")
+      .and("include.text", "Meeting One");
+
+    // Switch to next page with general error
+    cy.intercept("GET", "api/v1/meetings*", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("meetingsRequest");
+
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "2",
+      });
+    });
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check that overlay is shown
+    cy.get('[data-test="overlay"]').should("be.visible");
+
+    // Check that components are not disabled
+    cy.get('[data-test="meeting-search"]').within(() => {
+      cy.get("input").should("be.visible").and("not.be.disabled");
+      cy.get("button").should("be.visible").and("not.be.disabled");
+    });
+
+    cy.get('[data-test="meetings-reload-button"]')
+      .should("be.visible")
+      .and("not.be.disabled");
+
+    // Reload with correct data
+    cy.fixture("meetings.json").then((meetings) => {
+      meetings.data = meetings.data.slice(0, 1);
+      meetings.meta.last_page = 3;
+      meetings.meta.per_page = 1;
+      meetings.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/meetings*", {
+        statusCode: 200,
+        body: meetings,
+      }).as("meetingsRequest");
+    });
+
+    cy.get('[data-test="loading-retry-button"]')
+      .should("be.visible")
+      .and("include.text", "app.reload")
+      .click();
+
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that overlay is hidden
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that meeting is shown and contains the correct data
+    cy.get('[data-test="meeting-item"]').should("have.length", 1);
+    cy.get('[data-test="meeting-item"]')
+      .eq(0)
+      .should("include.text", "02/12/2021, 19:09")
+      .and("include.text", "Meeting One");
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Switch to next page with 401 error
+    cy.intercept("GET", "api/v1/meetings*", {
+      statusCode: 401,
+    }).as("meetingsRequest");
+
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    cy.wait("@meetingsRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/meetings");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+
+    // Reload page with 401 error
+    cy.visit("/meetings");
+
+    cy.wait("@meetingsRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/meetings");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+
+  it("load meetings page out of bounds", function () {
+    cy.fixture("meetings.json").then((meetings) => {
+      meetings.data = meetings.data.slice(0, 1);
+      meetings.meta.last_page = 2;
+      meetings.meta.per_page = 1;
+      meetings.meta.to = 1;
+      meetings.meta.total = 2;
+
+      cy.intercept("GET", "api/v1/meetings*", {
+        statusCode: 200,
+        body: meetings,
+      }).as("meetingsRequest");
+    });
+
+    cy.visit("/meetings");
+
+    cy.wait("@meetingsRequest");
+
+    // Switch to next page but respond with no meetings on second page
+    cy.fixture("meetings.json").then((meetings) => {
+      meetings.data = [];
+      meetings.meta.current_page = 2;
+      meetings.meta.from = null;
+      meetings.meta.per_page = 2;
+      meetings.meta.to = null;
+      meetings.meta.total = 2;
+      meetings.meta.total_no_filter = 2;
+
+      const emptyMeetingsRequest = interceptIndefinitely(
+        "GET",
+        "api/v1/meetings*",
+        {
+          statusCode: 200,
+          body: meetings,
+        },
+        "meetingsRequest",
+      );
+
+      cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+      cy.fixture("meetings.json").then((meetings) => {
+        meetings.data = meetings.data.slice(0, 2);
+        meetings.meta.per_page = 2;
+        meetings.meta.to = 2;
+        meetings.meta.total = 2;
+        meetings.meta.total_no_filter = 2;
+
+        cy.intercept("GET", "api/v1/meetings*", {
+          statusCode: 200,
+          body: meetings,
+        })
+          .as("meetingsRequest")
+          .then(() => {
+            emptyMeetingsRequest.sendResponse();
+          });
+      });
+    });
+
+    // Wait for first meetings request and check that pge is still the same
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "2",
+      });
+    });
+
+    // Wait for second request and check that page is reset
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that pagination is shown correctly
+    cy.get('[data-test="paginator-page"]').should("have.length", 1);
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+  });
+
+  it("meeting search", function () {
+    cy.visit("/meetings");
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query.search).to.be.undefined;
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check with no meetings found for this search query
+    cy.fixture("meetings.json").then((meetings) => {
+      meetings.data = [];
+      meetings.meta.from = null;
+      meetings.meta.per_page = 1;
+      meetings.meta.to = null;
+      meetings.meta.total = 0;
+
+      cy.intercept("GET", "api/v1/meetings*", {
+        statusCode: 200,
+        body: meetings,
+      }).as("meetingsRequest");
+    });
+
+    cy.get('[data-test="meeting-search"] > input').should("have.value", "");
+    cy.get('[data-test="meeting-search"] > input').type("Test");
+    cy.get('[data-test="meeting-search"] > button').click();
+
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query.search).to.eql("Test");
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that correct message is shown and no meetings are displayed
+    cy.contains("meetings.no_data_filtered").should("be.visible");
+    cy.get('[data-test="meeting-item"]').should("have.length", 0);
+
+    // Check with no meetings available
+    cy.fixture("meetings.json").then((meetings) => {
+      meetings.data = [];
+      meetings.meta.from = null;
+      meetings.meta.per_page = 1;
+      meetings.meta.to = null;
+      meetings.meta.total = 0;
+      meetings.meta.total_no_filter = 0;
+
+      cy.intercept("GET", "api/v1/meetings*", {
+        statusCode: 200,
+        body: meetings,
+      }).as("meetingsRequest");
+    });
+
+    cy.get('[data-test="meeting-search"] > input').clear();
+    cy.get('[data-test="meeting-search"] > input').type("Test2");
+    cy.get('[data-test="meeting-search"] > input').type("{enter}");
+
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query.search).to.eql("Test2");
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that correct message is shown and no meetings are displayed
+    cy.contains("meetings.no_data").should("be.visible");
+    cy.get('[data-test="meeting-item"]').should("have.length", 0);
+
+    // Check with 2 meetings on 2 pages
+    cy.fixture("meetings.json").then((meetings) => {
+      meetings.data = meetings.data.slice(0, 1);
+      meetings.meta.last_page = 2;
+      meetings.meta.per_page = 1;
+      meetings.meta.to = 1;
+      meetings.meta.total = 2;
+
+      cy.intercept("GET", "api/v1/meetings*", {
+        statusCode: 200,
+        body: meetings,
+      }).as("meetingsRequest");
+    });
+
+    cy.get('[data-test="meeting-search"] > input').clear();
+    cy.get('[data-test="meeting-search"] > input').type("Meeting");
+    cy.get('[data-test="meeting-search"] > button').click();
+
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query.search).to.eql("Meeting");
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that correct meeting is shown
+    cy.get('[data-test="meeting-item"]').should("have.length", 1);
+    cy.get('[data-test="meeting-item"]')
+      .eq(0)
+      .should("include.text", "02/12/2021, 19:09")
+      .and("include.text", "Meeting One");
+
+    // Check that pagination shows the correct number of pages
+    cy.get('[data-test="paginator-page"]').should("have.length", 2);
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    cy.fixture("meetings.json").then((meetings) => {
+      meetings.data = meetings.data.slice(1, 2);
+      meetings.meta.current_page = 2;
+      meetings.meta.from = 2;
+      meetings.meta.last_page = 2;
+      meetings.meta.per_page = 1;
+      meetings.meta.to = 2;
+      meetings.meta.total = 2;
+
+      cy.intercept("GET", "api/v1/meetings*", {
+        statusCode: 200,
+        body: meetings,
+      }).as("meetingsRequest");
+    });
+
+    // Click on button for next page (eq(1) needed because there are two paginator components
+    // (first one for small devices second one for larger devices))
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    // Check if search query stays the same after changing the page
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query.search).to.eql("Meeting");
+      expect(interception.request.query).to.contain({
+        page: "2",
+      });
+    });
+
+    cy.get('[data-test="meeting-search"] > input').should(
+      "have.value",
+      "Meeting",
+    );
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(1)
+      .should("have.attr", "data-p-active", "true");
+
+    // Check that correct meeting is shown
+    cy.get('[data-test="meeting-item"]').should("have.length", 1);
+    cy.get('[data-test="meeting-item"]')
+      .eq(0)
+      .should("include.text", "02/12/2021, 19:10")
+      .and("include.text", "Meeting Two");
+
+    // Change search query and make sure that the page is reset
+    cy.fixture("meetings.json").then((meetings) => {
+      meetings.data = meetings.data.slice(0, 1);
+      meetings.meta.last_page = 2;
+      meetings.meta.per_page = 1;
+      meetings.meta.to = 1;
+      meetings.meta.total = 2;
+
+      cy.intercept("GET", "api/v1/meetings*", {
+        statusCode: 200,
+        body: meetings,
+      }).as("meetingsRequest");
+    });
+
+    cy.get('[data-test="meeting-search"] > input').clear();
+    cy.get('[data-test="meeting-search"] > input').type("Meet");
+    cy.get('[data-test="meeting-search"] > button').click();
+
+    // Check that meetings are loaded with the page reset to the first page
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query.search).to.eql("Meet");
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+  });
+
+  it("sort meetings", function () {
+    cy.visit("/meetings");
+
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "start",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that correct columns are sortable and correct sorting type is shown
+    cy.get('[data-test="meeting-header-cell"]').should("have.length", 9);
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(0)
+      .should("have.text", "meetings.start")
+      .and("have.attr", "data-p-sortable-column", "true")
+      .and("have.attr", "data-p-sorted", "true");
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(1)
+      .should("have.text", "rooms.name")
+      .and("not.have.attr", "data-p-sortable-column", "true");
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(2)
+      .should("have.text", "meetings.owner")
+      .and("not.have.attr", "data-p-sortable-column", "true");
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(3)
+      .should("have.text", "app.server")
+      .and("not.have.attr", "data-p-sortable-column", "true");
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(4)
+      .should("have.attr", "data-p-sortable-column", "true")
+      .and("have.attr", "data-p-sorted", "false");
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(5)
+      .should("have.attr", "data-p-sortable-column", "true")
+      .and("have.attr", "data-p-sorted", "false");
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(6)
+      .should("have.attr", "data-p-sortable-column", "true")
+      .and("have.attr", "data-p-sorted", "false");
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(7)
+      .should("have.attr", "data-p-sortable-column", "true")
+      .and("have.attr", "data-p-sorted", "false");
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(8)
+      .should("have.text", "app.actions")
+      .and("not.have.attr", "data-p-sortable-column", "true");
+
+    // Change sorting type and respond with 3 meetings on 3 different pages
+    cy.fixture("meetings.json").then((meetings) => {
+      meetings.data = meetings.data.slice(0, 1);
+      meetings.meta.last_page = 3;
+      meetings.meta.per_page = 1;
+      meetings.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/meetings*", {
+        statusCode: 200,
+        body: meetings,
+      }).as("meetingsRequest");
+    });
+
+    cy.get('[data-test="meeting-header-cell"]').eq(4).click();
+
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "room.participant_count",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that sorting is correct
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(0)
+      .should("have.attr", "data-p-sorted", "false");
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(4)
+      .should("have.attr", "data-p-sorted", "true");
+
+    // Check that correct meeting is shown
+    cy.get('[data-test="meeting-item"]').should("have.length", 1);
+    cy.get('[data-test="meeting-item"]')
+      .eq(0)
+      .should("include.text", "02/12/2021, 19:09")
+      .and("include.text", "Meeting One");
+
+    // Check that pagination shows the correct number of pages
+    cy.get('[data-test="paginator-page"]').should("have.length", 3);
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Switch to next page
+    cy.fixture("meetings.json").then((meetings) => {
+      meetings.data = meetings.data.slice(1, 2);
+      meetings.meta.current_page = 2;
+      meetings.meta.from = 2;
+      meetings.meta.last_page = 3;
+      meetings.meta.per_page = 1;
+      meetings.meta.to = 2;
+
+      cy.intercept("GET", "api/v1/meetings*", {
+        statusCode: 200,
+        body: meetings,
+      }).as("meetingsRequest");
+    });
+
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    // Check that sorting stays the same
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "2",
+        sort_by: "room.participant_count",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(1)
+      .should("have.attr", "data-p-active", "true");
+
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(4)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "ascending");
+
+    // Check that correct meeting is shown
+    cy.get('[data-test="meeting-item"]').should("have.length", 1);
+    cy.get('[data-test="meeting-item"]')
+      .eq(0)
+      .should("include.text", "02/12/2021, 19:10")
+      .and("include.text", "Meeting Two");
+
+    // Change sorting direction and make sure that the page is reset
+    cy.fixture("meetings.json").then((meetings) => {
+      meetings.data = meetings.data.slice(0, 1);
+      meetings.meta.last_page = 3;
+      meetings.meta.per_page = 1;
+      meetings.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/meetings*", {
+        statusCode: 200,
+        body: meetings,
+      }).as("meetingsRequest");
+    });
+
+    cy.get('[data-test="meeting-header-cell"]').eq(4).click();
+
+    // Check that meetings are loaded with the page reset to the first page
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "room.participant_count",
+        sort_direction: "desc",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+    // Check that sorting is correct
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(0)
+      .should("have.attr", "data-p-sorted", "false");
+
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(4)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "descending");
+
+    // Check that correct meeting is shown
+    cy.get('[data-test="meeting-item"]').should("have.length", 1);
+    cy.get('[data-test="meeting-item"]')
+      .eq(0)
+      .should("include.text", "02/12/2021, 19:09")
+      .and("include.text", "Meeting One");
+
+    // Change sorting type again
+    cy.get('[data-test="meeting-header-cell"]').eq(5).click();
+
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "room.listener_count",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that sorting is correct
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(4)
+      .should("have.attr", "data-p-sorted", "false");
+
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(5)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "ascending");
+
+    // Switch to next page
+    cy.fixture("meetings.json").then((meetings) => {
+      meetings.data = meetings.data.slice(1, 2);
+      meetings.meta.current_page = 2;
+      meetings.meta.from = 2;
+      meetings.meta.last_page = 3;
+      meetings.meta.per_page = 1;
+      meetings.meta.to = 2;
+
+      cy.intercept("GET", "api/v1/meetings*", {
+        statusCode: 200,
+        body: meetings,
+      }).as("meetingsRequest");
+    });
+
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    // Check that sorting stays the same
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "2",
+        sort_by: "room.listener_count",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(1)
+      .should("have.attr", "data-p-active", "true");
+
+    // Check that sorting stays the same
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(5)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "ascending");
+
+    // Check that correct meeting is shown
+    cy.get('[data-test="meeting-item"]').should("have.length", 1);
+    cy.get('[data-test="meeting-item"]')
+      .eq(0)
+      .should("include.text", "02/12/2021, 19:10")
+      .and("include.text", "Meeting Two");
+
+    // Change sorting and make sure that the page is reset
+    cy.fixture("meetings.json").then((meetings) => {
+      meetings.data = meetings.data.slice(0, 1);
+      meetings.meta.last_page = 3;
+      meetings.meta.per_page = 1;
+      meetings.meta.to = 1;
+
+      cy.intercept("GET", "api/v1/meetings*", {
+        statusCode: 200,
+        body: meetings,
+      }).as("meetingsRequest");
+    });
+
+    cy.get('[data-test="meeting-header-cell"]').eq(6).click();
+
+    // Check that meetings are loaded with the page reset to the first page
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "room.voice_participant_count",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Check that sorting is correct
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(5)
+      .should("have.attr", "data-p-sorted", "false");
+
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(6)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "ascending");
+
+    // Change sorting again
+    cy.get('[data-test="meeting-header-cell"]').eq(7).click();
+
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+        sort_by: "room.video_count",
+        sort_direction: "asc",
+      });
+    });
+
+    // Check that sorting is correct
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(6)
+      .should("have.attr", "data-p-sorted", "false");
+
+    cy.get('[data-test="meeting-header-cell"]')
+      .eq(7)
+      .should("have.attr", "data-p-sorted", "true")
+      .and("have.attr", "aria-sort", "ascending");
+  });
+
+  it("reload meetings", function () {
+    cy.fixture("meetings.json").then((meetings) => {
+      meetings.data = meetings.data.slice(0, 1);
+      meetings.meta.last_page = 2;
+      meetings.meta.per_page = 1;
+      meetings.meta.to = 1;
+      meetings.meta.total = 2;
+
+      cy.intercept("GET", "api/v1/meetings*", {
+        statusCode: 200,
+        body: meetings,
+      }).as("meetingsRequest");
+    });
+
+    cy.visit("/meetings");
+
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    cy.get('[data-test="meetings-reload-button"]').click();
+
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "1",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(0)
+      .should("have.attr", "data-p-active", "true");
+
+    // Check that correct meeting is shown
+    cy.get('[data-test="meeting-item"]').should("have.length", 1);
+    cy.get('[data-test="meeting-item"]')
+      .eq(0)
+      .should("include.text", "02/12/2021, 19:09")
+      .and("include.text", "Meeting One");
+
+    // Switch to next page
+    cy.fixture("meetings.json").then((meetings) => {
+      meetings.data = meetings.data.slice(1, 2);
+      meetings.meta.current_page = 2;
+      meetings.meta.from = 2;
+      meetings.meta.last_page = 2;
+      meetings.meta.per_page = 1;
+      meetings.meta.to = 2;
+      meetings.meta.total = 2;
+
+      cy.intercept("GET", "api/v1/meetings*", {
+        statusCode: 200,
+        body: meetings,
+      }).as("meetingsRequest");
+    });
+
+    cy.get('[data-test="paginator-next-button"]').eq(1).click();
+
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "2",
+      });
+    });
+
+    // Reload
+    cy.get('[data-test="meetings-reload-button"]').click();
+
+    // Check that page stays the same
+    cy.wait("@meetingsRequest").then((interception) => {
+      expect(interception.request.query).to.contain({
+        page: "2",
+      });
+    });
+
+    // Check that correct pagination is active
+    cy.get('[data-test="paginator-page"]')
+      .eq(1)
+      .should("have.attr", "data-p-active", "true");
+
+    // Check that correct meeting is shown
+    cy.get('[data-test="meeting-item"]').should("have.length", 1);
+    cy.get('[data-test="meeting-item"]')
+      .eq(0)
+      .should("include.text", "02/12/2021, 19:10")
+      .and("include.text", "Meeting Two");
+  });
+
+  it("view room of meeting", function () {
+    cy.visit("/meetings");
+
+    cy.wait("@meetingsRequest");
+
+    cy.interceptRoomViewRequests();
+
+    // Click on view room button
+    cy.get('[data-test="meeting-item"]').should("have.length", 3);
+    cy.get('[data-test="meeting-item"]')
+      .eq(0)
+      .should("include.text", "02/12/2021, 19:09")
+      .and("include.text", "Meeting One")
+      .find('[data-test="meeting-view-room-button"]')
+      .click();
+
+    // Check that redirect worked
+    cy.url().should("include", "/rooms/abc-def-123");
+    cy.url().should("not.include", "/meetings");
+  });
+});
diff --git a/tests/Frontend/e2e/PasswordReset.cy.js b/tests/Frontend/e2e/PasswordReset.cy.js
new file mode 100644
index 000000000..2be2973b4
--- /dev/null
+++ b/tests/Frontend/e2e/PasswordReset.cy.js
@@ -0,0 +1,249 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Password reset", function () {
+  beforeEach(function () {
+    cy.intercept("GET", "api/v1/locale/en", {});
+
+    cy.fixture("config.json").then((config) => {
+      config.data.auth.local = true;
+
+      cy.intercept("GET", "api/v1/config", {
+        statusCode: 200,
+        body: config,
+      });
+    });
+  });
+
+  it("check with local auth disabled", function () {
+    cy.fixture("config.json").then((config) => {
+      config.data.auth.local = false;
+
+      cy.intercept("GET", "api/v1/config", {
+        statusCode: 200,
+        body: config,
+      });
+    });
+
+    cy.visit("/reset_password");
+
+    cy.url().should("include", "/404").and("not.include", "/forgot_password");
+  });
+
+  it("visit with logged in user", function () {
+    cy.intercept("GET", "api/v1/currentUser", {
+      statusCode: 200,
+      fixture: "currentUser.json",
+    });
+
+    cy.visit("/reset_password");
+
+    // Check that error message is shown
+    cy.checkToastMessage("app.flash.guests_only");
+
+    // Check that user is redirected to home page
+    cy.url().should("not.include", "/forgot_password");
+    cy.get("h1").should("be.visible").and("include.text", "home.title");
+  });
+
+  it("reset password of existing user", function () {
+    cy.visit("/reset_password?email=johndoe@domain.tld&token=Token123");
+
+    cy.contains("auth.input_new_password").should("be.visible");
+    cy.contains("auth.input_new_password_new_user").should("not.exist");
+
+    cy.get('[data-test="new-password-field"]')
+      .should("include.text", "auth.new_password")
+      .should("be.visible")
+      .within(() => {
+        cy.get("#new_password").should("be.visible").type("secretPassword123#");
+      });
+
+    cy.get('[data-test="password-confirmation-field"]')
+      .should("include.text", "auth.new_password_confirmation")
+      .should("be.visible")
+      .within(() => {
+        cy.get("#password_confirmation")
+          .should("be.visible")
+          .type("secretPassword123#");
+      });
+
+    // Intercept csrf-cookie request to set defined cookie that can be checked later
+    cy.intercept("GET", "/sanctum/csrf-cookie", {
+      statusCode: 200,
+      headers: {
+        "Set-Cookie": "XSRF-TOKEN=test-csrf; Path=/",
+      },
+    }).as("cookieRequest");
+
+    cy.intercept("GET", "api/v1/currentUser", {
+      statusCode: 200,
+      fixture: "currentUser.json",
+    }).as("currentUserRequest");
+
+    const resetPasswordRequest = interceptIndefinitely(
+      "POST",
+      "api/v1/password/reset",
+      {
+        statusCode: 200,
+        body: {
+          message: "Success!",
+        },
+      },
+      "resetPasswordRequest",
+    );
+
+    cy.get('[data-test="reset-password-button"]')
+      .should("have.text", "auth.change_password")
+      .click();
+
+    // Check loading
+    cy.get("#new_password").should("be.disabled");
+    cy.get("#password_confirmation").should("be.disabled");
+
+    cy.get('[data-test="reset-password-button"]')
+      .should("be.disabled")
+      .then(() => {
+        resetPasswordRequest.sendResponse();
+      });
+
+    cy.wait("@cookieRequest");
+    cy.wait("@resetPasswordRequest").then((interception) => {
+      expect(interception.request.body).to.eql({
+        email: "johndoe@domain.tld",
+        password: "secretPassword123#",
+        password_confirmation: "secretPassword123#",
+        token: "Token123",
+      });
+
+      expect(interception.request.headers).to.contain({
+        "x-xsrf-token": "test-csrf",
+      });
+    });
+
+    cy.wait("@currentUserRequest");
+
+    // Check that success message is shown
+    cy.checkToastMessage("Success!");
+
+    // Check that user is redirected to home page
+    cy.url().should("not.include", "/reset_password");
+    cy.get("h1").should("be.visible").and("include.text", "home.title");
+  });
+
+  it("reset password view for new user", function () {
+    cy.visit(
+      "/reset_password?email=johndoe@domain.tld&token=Token123&welcome=true",
+    );
+
+    cy.contains("auth.input_new_password_new_user").should("be.visible");
+
+    cy.get('[data-test="reset-password-button"]').should(
+      "have.text",
+      "auth.set_password",
+    );
+  });
+
+  it("reset password errors", function () {
+    cy.visit("/reset_password");
+
+    cy.get("#new_password").type("secretPassword123");
+    cy.get("#password_confirmation").type("newSecretPassword123#");
+
+    // Check 422 error
+    cy.intercept("POST", "api/v1/password/reset", {
+      statusCode: 422,
+      body: {
+        errors: {
+          password: ["The New password field is required."],
+          password_confirmation: [
+            "The New password confirmation field is required.",
+          ],
+        },
+      },
+    }).as("resetPasswordRequest");
+
+    cy.get('[data-test="reset-password-button"]').click();
+
+    cy.wait("@resetPasswordRequest");
+
+    // Check that error message is shown
+    cy.get('[data-test="new-password-field"]').should(
+      "include.text",
+      "The New password field is required.",
+    );
+
+    cy.get('[data-test="password-confirmation-field"]').should(
+      "include.text",
+      "The New password confirmation field is required.",
+    );
+
+    // Check with other 422 errors
+    cy.intercept("POST", "api/v1/password/reset", {
+      statusCode: 422,
+      body: {
+        errors: {
+          email: ["The Email field is required."],
+          token: ["The Token field is required."],
+        },
+      },
+    }).as("resetPasswordRequest");
+
+    cy.get("#new_password").clear();
+    cy.get("#new_password").type("newSecretPassword123#");
+
+    cy.get('[data-test="reset-password-button"]').click();
+
+    cy.wait("@resetPasswordRequest");
+
+    // Check that previous 422 error messages are hidden
+    cy.get('[data-test="new-password-field"]').should(
+      "not.include.text",
+      "The New password field is required.",
+    );
+    cy.get('[data-test="password-confirmation-field"]').should(
+      "not.include.text",
+      "The New password confirmation field is required.",
+    );
+
+    // Check that new error messages are shown
+    cy.contains("The Email field is required.").should("be.visible");
+    cy.contains("The Token field is required.").should("be.visible");
+
+    // Check with 500 error
+    cy.intercept("POST", "api/v1/password/reset", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("resetPasswordRequest");
+
+    cy.get('[data-test="reset-password-button"]').click();
+
+    cy.wait("@resetPasswordRequest");
+
+    // Check that 422 error messages are hidden
+    cy.contains("The Email field is required.").should("not.exist");
+    cy.contains("The Token field is required.").should("not.exist");
+
+    // Check that error message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    // Check with 429 error
+    cy.intercept("POST", "api/v1/password/reset", {
+      statusCode: 429,
+      body: {
+        message: "Too many requests",
+      },
+    }).as("resetPasswordRequest");
+
+    cy.get('[data-test="reset-password-button"]').click();
+
+    cy.wait("@resetPasswordRequest");
+
+    // Check that error message is shown
+    cy.checkToastMessage("app.flash.too_many_requests");
+  });
+});
diff --git a/tests/Frontend/e2e/RoomsViewFiles.cy.js b/tests/Frontend/e2e/RoomsViewFiles.cy.js
index 23b2c072d..c5679fe94 100644
--- a/tests/Frontend/e2e/RoomsViewFiles.cy.js
+++ b/tests/Frontend/e2e/RoomsViewFiles.cy.js
@@ -693,7 +693,7 @@ describe("Rooms View Files", function () {
 
   it("view with different permissions", function () {
     // Check view for guest without terms of use
-    cy.intercept("GET", "api/v1/currentUser", {});
+    cy.intercept("GET", "api/v1/currentUser", { data: [] });
     cy.fixture("room.json").then((room) => {
       room.data.current_user = null;
 
@@ -858,7 +858,7 @@ describe("Rooms View Files", function () {
     });
 
     // Check view for guest with terms of use
-    cy.intercept("GET", "api/v1/currentUser", {});
+    cy.intercept("GET", "api/v1/currentUser", { data: [] });
     cy.fixture("room.json").then((room) => {
       room.data.current_user = null;
 
diff --git a/tests/Frontend/e2e/RoomsViewFilesFileActions.cy.js b/tests/Frontend/e2e/RoomsViewFilesFileActions.cy.js
index 9450afc3c..72a474cc0 100644
--- a/tests/Frontend/e2e/RoomsViewFilesFileActions.cy.js
+++ b/tests/Frontend/e2e/RoomsViewFilesFileActions.cy.js
@@ -1,8 +1,6 @@
-import {
-  _arrayBufferToBase64,
-  parseFormData,
-} from "../support/utils/formData.js";
+import { parseFormData } from "../support/utils/formData.js";
 import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+import { _arrayBufferToBase64 } from "../support/utils/fileHelper.js";
 
 describe("Rooms view files file actions", function () {
   beforeEach(function () {
diff --git a/tests/Frontend/e2e/RoomsViewGeneral.cy.js b/tests/Frontend/e2e/RoomsViewGeneral.cy.js
index 02bbf5833..70b9a5b34 100644
--- a/tests/Frontend/e2e/RoomsViewGeneral.cy.js
+++ b/tests/Frontend/e2e/RoomsViewGeneral.cy.js
@@ -1490,7 +1490,7 @@ describe("Room View general", function () {
     );
 
     // Check that error message is shown and user is redirected to the home page
-    cy.checkToastMessage("app.flash.guests_only", false);
+    cy.checkToastMessage("app.flash.guests_only");
     cy.url().should(
       "not.include",
       "/rooms/abc-def-123/xWDCevVTcMys1ftzt3nFPgU56Wf32fopFWgAEBtklSkFU22z1ntA4fBHsHeMygMiOa9szJbNEfBAgEWSLNWg2gcF65PwPZ2ylPQR",
diff --git a/tests/Frontend/e2e/RoomsViewMeetings.cy.js b/tests/Frontend/e2e/RoomsViewMeetings.cy.js
index e82512580..99df615c9 100644
--- a/tests/Frontend/e2e/RoomsViewMeetings.cy.js
+++ b/tests/Frontend/e2e/RoomsViewMeetings.cy.js
@@ -283,6 +283,8 @@ describe("Rooms view meetings", function () {
       }).as("roomRequest");
     });
 
+    cy.interceptRoomFilesRequest();
+
     cy.visit("/rooms/abc-def-123");
 
     cy.get('[data-test="room-join-button"]').click();
@@ -353,6 +355,8 @@ describe("Rooms view meetings", function () {
       },
     }).as("joinRequest");
 
+    cy.interceptRoomFilesRequest();
+
     cy.visit("/rooms/abc-def-123");
 
     // Test with invalid name
@@ -430,6 +434,7 @@ describe("Rooms view meetings", function () {
         body: room,
       }).as("roomRequest");
     });
+    cy.interceptRoomFilesRequest();
 
     cy.visit("/rooms/abc-def-123");
 
@@ -663,6 +668,8 @@ describe("Rooms view meetings", function () {
       },
     }).as("joinRequest");
 
+    cy.interceptRoomFilesRequest();
+
     // Visit room with token
     cy.visit(
       "/rooms/abc-def-123/xWDCevVTcMys1ftzt3nFPgU56Wf32fopFWgAEBtklSkFU22z1ntA4fBHsHeMygMiOa9szJbNEfBAgEWSLNWg2gcF65PwPZ2ylPQR",
@@ -1204,6 +1211,8 @@ describe("Rooms view meetings", function () {
       }).as("roomRequest");
     });
 
+    cy.interceptRoomFilesRequest();
+
     cy.visit("/rooms/abc-def-123");
 
     // Test with invalid name
@@ -1269,6 +1278,8 @@ describe("Rooms view meetings", function () {
       },
     }).as("startRequest");
 
+    cy.interceptRoomFilesRequest();
+
     cy.visit("/rooms/abc-def-123");
 
     // Test with invalid name
@@ -1342,6 +1353,7 @@ describe("Rooms view meetings", function () {
         body: room,
       }).as("roomRequest");
     });
+    cy.interceptRoomFilesRequest();
 
     cy.visit("/rooms/abc-def-123");
 
@@ -1545,6 +1557,8 @@ describe("Rooms view meetings", function () {
       },
     }).as("startRequest");
 
+    cy.interceptRoomFilesRequest();
+
     // Visit room with token
     cy.visit(
       "/rooms/abc-def-123/xWDCevVTcMys1ftzt3nFPgU56Wf32fopFWgAEBtklSkFU22z1ntA4fBHsHeMygMiOa9szJbNEfBAgEWSLNWg2gcF65PwPZ2ylPQR",
diff --git a/tests/Frontend/e2e/RoomsViewPersonalizedLinksTokenActions.cy.js b/tests/Frontend/e2e/RoomsViewPersonalizedLinksTokenActions.cy.js
index c677d4ed2..baeec5588 100644
--- a/tests/Frontend/e2e/RoomsViewPersonalizedLinksTokenActions.cy.js
+++ b/tests/Frontend/e2e/RoomsViewPersonalizedLinksTokenActions.cy.js
@@ -8,7 +8,7 @@ describe("Rooms view personalized links token actions", function () {
   });
 
   it("add new token", function () {
-    cy.visit("rooms/abc-def-123#tab=tokens");
+    cy.visit("/rooms/abc-def-123#tab=tokens");
 
     cy.wait("@roomTokensRequest");
 
@@ -136,7 +136,7 @@ describe("Rooms view personalized links token actions", function () {
   });
 
   it("add new token errors", function () {
-    cy.visit("rooms/abc-def-123#tab=tokens");
+    cy.visit("/rooms/abc-def-123#tab=tokens");
 
     cy.wait("@roomRequest");
     cy.wait("@roomTokensRequest");
@@ -233,7 +233,7 @@ describe("Rooms view personalized links token actions", function () {
   });
 
   it("edit token", function () {
-    cy.visit("rooms/abc-def-123#tab=tokens");
+    cy.visit("/rooms/abc-def-123#tab=tokens");
     cy.wait("@roomRequest");
     cy.wait("@roomTokensRequest");
 
@@ -370,7 +370,7 @@ describe("Rooms view personalized links token actions", function () {
   });
 
   it("edit token errors", function () {
-    cy.visit("rooms/abc-def-123#tab=tokens");
+    cy.visit("/rooms/abc-def-123#tab=tokens");
 
     cy.wait("@roomRequest");
     cy.wait("@roomTokensRequest");
@@ -531,7 +531,7 @@ describe("Rooms view personalized links token actions", function () {
   });
 
   it("delete token", function () {
-    cy.visit("rooms/abc-def-123#tab=tokens");
+    cy.visit("/rooms/abc-def-123#tab=tokens");
 
     cy.wait("@roomRequest");
     cy.wait("@roomTokensRequest");
@@ -608,7 +608,7 @@ describe("Rooms view personalized links token actions", function () {
   });
 
   it("delete token errors", function () {
-    cy.visit("rooms/abc-def-123#tab=tokens");
+    cy.visit("/rooms/abc-def-123#tab=tokens");
 
     cy.wait("@roomRequest");
     cy.wait("@roomTokensRequest");
@@ -732,7 +732,7 @@ describe("Rooms view personalized links token actions", function () {
   });
 
   it("copy token", function () {
-    cy.visit("rooms/abc-def-123#tab=tokens");
+    cy.visit("/rooms/abc-def-123#tab=tokens");
 
     cy.wait("@roomRequest");
     cy.wait("@roomTokensRequest");
diff --git a/tests/Frontend/e2e/UserProfile.cy.js b/tests/Frontend/e2e/UserProfile.cy.js
index 2550111a8..a62154ad5 100644
--- a/tests/Frontend/e2e/UserProfile.cy.js
+++ b/tests/Frontend/e2e/UserProfile.cy.js
@@ -16,7 +16,7 @@ describe("User Profile", function () {
     const userRequest = interceptIndefinitely(
       "GET",
       "api/v1/users/1",
-      { fixture: "user.json" },
+      { fixture: "userDataCurrentUser.json" },
       "userRequest",
     );
 
@@ -80,7 +80,7 @@ describe("User Profile", function () {
 
     // Reload with correct data
     cy.intercept("GET", "api/v1/users/1", {
-      fixture: "user.json",
+      fixture: "userDataCurrentUser.json",
     }).as("userRequest");
 
     cy.get('[data-test="loading-retry-button"]')
diff --git a/tests/Frontend/e2e/UserProfileBase.cy.js b/tests/Frontend/e2e/UserProfileBase.cy.js
index b5845f2f1..ff3600b08 100644
--- a/tests/Frontend/e2e/UserProfileBase.cy.js
+++ b/tests/Frontend/e2e/UserProfileBase.cy.js
@@ -1,8 +1,6 @@
 import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
-import {
-  _arrayBufferToBase64,
-  parseFormData,
-} from "../support/utils/formData.js";
+import { parseFormData } from "../support/utils/formData.js";
+import { _arrayBufferToBase64 } from "../support/utils/fileHelper.js";
 
 describe("User Profile Base", function () {
   beforeEach(function () {
@@ -307,12 +305,13 @@ describe("User Profile Base", function () {
     );
 
     // Save changes
-    cy.fixture("user.json").then((user) => {
+    cy.fixture("userDataCurrentUser.json").then((user) => {
       user.data.firstname = "Laura";
       user.data.lastname = "Rivera";
       user.data.user_locale = "de";
       user.data.timezone = "Europe/Berlin";
       user.data.image = Cypress.config("baseUrl") + "/test.jpg";
+      user.data.updated_at = "2024-09-13T14:22:26.000000Z";
 
       const saveChangesRequest = interceptIndefinitely(
         "POST",
@@ -329,7 +328,6 @@ describe("User Profile Base", function () {
         currentUser.data.lastname = "Rivera";
         currentUser.data.user_locale = "de";
         currentUser.data.permissions = ["users.updateOwnAttributes"];
-        user.data.updated_at = "2024-09-13T14:22:26.000000Z";
 
         cy.intercept("GET", "api/v1/currentUser", {
           statusCode: 200,
@@ -459,7 +457,7 @@ describe("User Profile Base", function () {
     // Delete again and save changes
     cy.get('[data-test="delete-image-button"]').click();
 
-    cy.fixture("user.json").then((user) => {
+    cy.fixture("userDataCurrentUser.json").then((user) => {
       user.data.firstname = "Laura";
       user.data.lastname = "Rivera";
       user.data.user_locale = "de";
@@ -582,7 +580,7 @@ describe("User Profile Base", function () {
     ]);
 
     // Check with 428 error (stale error)
-    cy.fixture("user.json").then((user) => {
+    cy.fixture("userDataCurrentUser.json").then((user) => {
       const newModel = user.data;
       newModel.firstname = "Laura";
       newModel.lastname = "Rivera";
@@ -687,7 +685,7 @@ describe("User Profile Base", function () {
   });
 
   it("view as external user", function () {
-    cy.fixture("user.json").then((user) => {
+    cy.fixture("userDataCurrentUser.json").then((user) => {
       user.data.authenticator = "ldap";
       user.data.external_id = "jdo";
 
@@ -816,5 +814,21 @@ describe("User Profile Base", function () {
     cy.get('[data-test="timezone-dropdown-option"]')
       .eq(3)
       .should("have.attr", "aria-selected", "true");
+
+    // Check with 401 error
+    cy.intercept("GET", "api/v1/getTimezones", {
+      statusCode: 401,
+    }).as("timezonesRequest");
+
+    cy.reload();
+
+    cy.wait("@userRequest");
+
+    cy.wait("@timezonesRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/profile");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
   });
 });
diff --git a/tests/Frontend/e2e/UserProfileEmail.cy.js b/tests/Frontend/e2e/UserProfileEmail.cy.js
index 732255709..2c4ffe5d6 100644
--- a/tests/Frontend/e2e/UserProfileEmail.cy.js
+++ b/tests/Frontend/e2e/UserProfileEmail.cy.js
@@ -81,7 +81,7 @@ describe("User Profile Email", function () {
     cy.get("#email").clear();
     cy.get("#email").type("john.doe@example.com");
 
-    cy.fixture("user.json").then((user) => {
+    cy.fixture("userDataCurrentUser.json").then((user) => {
       user.data.email = "john.doe@example.com";
 
       cy.intercept("PUT", "api/v1/users/1/email", {
@@ -190,7 +190,7 @@ describe("User Profile Email", function () {
     cy.checkToastMessage("app.flash.unauthenticated");
   });
 
-  it("view without users.update permission", function () {
+  it("view without users.updateOwnAttributes permission", function () {
     cy.intercept("GET", "api/v1/currentUser", { fixture: "currentUser.json" });
 
     cy.visit("/profile");
@@ -211,7 +211,7 @@ describe("User Profile Email", function () {
   });
 
   it("view as external user", function () {
-    cy.fixture("user.json").then((user) => {
+    cy.fixture("userDataCurrentUser.json").then((user) => {
       user.data.authenticator = "ldap";
       user.data.external_id = "jdo";
 
diff --git a/tests/Frontend/e2e/UserProfileOthers.cy.js b/tests/Frontend/e2e/UserProfileOthers.cy.js
index dbb2b199b..165d4c66a 100644
--- a/tests/Frontend/e2e/UserProfileOthers.cy.js
+++ b/tests/Frontend/e2e/UserProfileOthers.cy.js
@@ -23,7 +23,7 @@ describe("User Profile Others", function () {
       .click();
 
     // Save changes
-    cy.fixture("user.json").then((user) => {
+    cy.fixture("userDataCurrentUser.json").then((user) => {
       user.data.bbb_skip_check_audio = true;
 
       const saveChangesRequest = interceptIndefinitely(
@@ -109,7 +109,7 @@ describe("User Profile Others", function () {
     ]);
 
     // Check with 428 error (stale error)
-    cy.fixture("user.json").then((user) => {
+    cy.fixture("userDataCurrentUser.json").then((user) => {
       const newModel = user.data;
       newModel.bbb_skip_check_audio = true;
 
diff --git a/tests/Frontend/e2e/UserProfileSecurity.cy.js b/tests/Frontend/e2e/UserProfileSecurity.cy.js
index d3b9dfb41..9e2ef32d7 100644
--- a/tests/Frontend/e2e/UserProfileSecurity.cy.js
+++ b/tests/Frontend/e2e/UserProfileSecurity.cy.js
@@ -21,7 +21,7 @@ describe("User Profile Security", function () {
       .and("include.text", "app.roles")
       .within(() => {
         cy.get('[data-test="role-dropdown"]')
-          .should("include.text", "Admin")
+          .should("include.text", "Superuser")
           .should("include.text", "User")
           .should("have.class", "multiselect--disabled");
       });
@@ -55,7 +55,7 @@ describe("User Profile Security", function () {
       });
 
     // Try to change password
-    cy.fixture("user").then((user) => {
+    cy.fixture("userDataCurrentUser").then((user) => {
       const saveChangesRequest = interceptIndefinitely(
         "PUT",
         "api/v1/users/1/password",
@@ -193,7 +193,7 @@ describe("User Profile Security", function () {
       .and("include.text", "app.roles")
       .within(() => {
         cy.get('[data-test="role-dropdown"]')
-          .should("include.text", "Admin")
+          .should("include.text", "Superuser")
           .should("include.text", "User")
           .should("have.class", "multiselect--disabled");
       });
@@ -204,6 +204,7 @@ describe("User Profile Security", function () {
     );
     cy.get('[data-test="new-password-field"]').should("not.exist");
     cy.get('[data-test="new-password-confirmation-field"]').should("not.exist");
+    cy.get('[data-test="change-password-save-button"]').should("not.exist");
 
     // Check that all sessions are shown
     cy.get('[data-test="session-panel"]').should("have.length", 2);
@@ -231,7 +232,7 @@ describe("User Profile Security", function () {
   });
 
   it("view as external user", function () {
-    cy.fixture("user.json").then((user) => {
+    cy.fixture("userDataCurrentUser.json").then((user) => {
       user.data.authenticator = "ldap";
       user.data.external_id = "jdo";
 
@@ -255,7 +256,7 @@ describe("User Profile Security", function () {
       .and("include.text", "app.roles")
       .within(() => {
         cy.get('[data-test="role-dropdown"]')
-          .should("include.text", "Admin")
+          .should("include.text", "Superuser")
           .should("include.text", "User")
           .should("have.class", "multiselect--disabled");
       });
@@ -266,6 +267,7 @@ describe("User Profile Security", function () {
     );
     cy.get('[data-test="new-password-field"]').should("not.exist");
     cy.get('[data-test="new-password-confirmation-field"]').should("not.exist");
+    cy.get('[data-test="change-password-save-button"]').should("not.exist");
 
     // Check that all sessions are shown
     cy.get('[data-test="session-panel"]').should("have.length", 2);
diff --git a/tests/Frontend/e2e/VerifyEmail.cy.js b/tests/Frontend/e2e/VerifyEmail.cy.js
new file mode 100644
index 000000000..7f024a4a7
--- /dev/null
+++ b/tests/Frontend/e2e/VerifyEmail.cy.js
@@ -0,0 +1,174 @@
+import { interceptIndefinitely } from "../support/utils/interceptIndefinitely.js";
+
+describe("Verify email", function () {
+  beforeEach(function () {
+    cy.init();
+    cy.intercept("GET", "api/v1/locale/en", {});
+
+    cy.fixture("config.json").then((config) => {
+      config.data.auth.local = true;
+
+      cy.intercept("GET", "api/v1/config", {
+        statusCode: 200,
+        body: config,
+      });
+    });
+  });
+
+  it("check with local auth disabled", function () {
+    cy.fixture("config.json").then((config) => {
+      config.data.auth.local = false;
+
+      cy.intercept("GET", "api/v1/config", {
+        statusCode: 200,
+        body: config,
+      });
+    });
+
+    cy.visit("/verify_email");
+
+    cy.url().should("include", "/404").and("not.include", "/verify_email");
+  });
+
+  it("visit with user that is not logged in", function () {
+    cy.testVisitWithoutCurrentUser("/verify_email");
+  });
+
+  it("verify email", function () {
+    const verifyEmailRequest = interceptIndefinitely(
+      "POST",
+      "api/v1/email/verify",
+      {
+        statusCode: 200,
+      },
+      "verifyEmailRequest",
+    );
+
+    cy.visit("/verify_email?email=MaxDoe@domain.tld&token=Token123");
+
+    cy.contains("app.verify_email.title").should("be.visible");
+
+    // Check loading
+    cy.get('[data-test="overlay"]')
+      .should("be.visible")
+      .then(() => {
+        verifyEmailRequest.sendResponse();
+      });
+
+    cy.wait("@verifyEmailRequest").then((interception) => {
+      expect(interception.request.body).to.eql({
+        email: "MaxDoe@domain.tld",
+        token: "Token123",
+      });
+    });
+
+    // Check that loading is done
+    cy.get('[data-test="overlay"]').should("not.exist");
+
+    // Check that correct message is shown
+    cy.get('[data-test="verify-success-message"]')
+      .should("be.visible")
+      .and("include.text", "app.verify_email.success");
+    cy.get('[data-test="verify-invalid-message"]').should("not.exist");
+    cy.get('[data-test="verify-error-message"]').should("not.exist");
+  });
+
+  it("verify email errors", function () {
+    // Check with 422 error (missing props)
+    cy.intercept("POST", "api/v1/email/verify", {
+      statusCode: 422,
+      body: {
+        errors: {
+          email: ["The email field is required."],
+          token: ["The token field is required."],
+        },
+      },
+    }).as("verifyEmailRequest");
+
+    cy.visit("/verify_email");
+
+    cy.wait("@verifyEmailRequest");
+
+    // Check that correct message is shown
+    cy.get('[data-test="verify-success-message"]').should("not.exist");
+    cy.get('[data-test="verify-invalid-message"]')
+      .should("be.visible")
+      .and("include.text", "app.verify_email.invalid");
+    cy.get('[data-test="verify-error-message"]').should("not.exist");
+
+    // Check with 422 error (invalid token)
+    cy.intercept("POST", "api/v1/email/verify", {
+      statusCode: 422,
+    }).as("verifyEmailRequest");
+
+    cy.visit("/verify_email?email=MaxDoe@domain.tld&token=Token123");
+
+    cy.wait("@verifyEmailRequest");
+
+    // Check that correct message is shown
+    cy.get('[data-test="verify-success-message"]').should("not.exist");
+    cy.get('[data-test="verify-invalid-message"]')
+      .should("be.visible")
+      .and("include.text", "app.verify_email.invalid");
+    cy.get('[data-test="verify-error-message"]').should("not.exist");
+
+    // Check with other error
+    cy.intercept("POST", "api/v1/email/verify", {
+      statusCode: 500,
+      body: {
+        message: "Test",
+      },
+    }).as("verifyEmailRequest");
+
+    cy.reload();
+
+    cy.wait("@verifyEmailRequest");
+
+    // Check that correct message is shown
+    cy.checkToastMessage([
+      'app.flash.server_error.message_{"message":"Test"}',
+      'app.flash.server_error.error_code_{"statusCode":500}',
+    ]);
+
+    cy.get('[data-test="verify-success-message"]').should("not.exist");
+    cy.get('[data-test="verify-invalid-message"]').should("not.exist");
+    cy.get('[data-test="verify-error-message"]')
+      .should("be.visible")
+      .and("include.text", "app.verify_email.fail");
+
+    // Check with 429 error
+    cy.intercept("POST", "api/v1/email/verify", {
+      statusCode: 429,
+      body: {
+        message: "Too many requests",
+      },
+    }).as("verifyEmailRequest");
+
+    cy.reload();
+
+    cy.wait("@verifyEmailRequest");
+
+    // Check that correct message is shown
+    cy.checkToastMessage("app.flash.too_many_requests");
+
+    cy.get('[data-test="verify-success-message"]').should("not.exist");
+    cy.get('[data-test="verify-invalid-message"]').should("not.exist");
+    cy.get('[data-test="verify-error-message"]')
+      .should("be.visible")
+      .and("include.text", "app.verify_email.fail");
+
+    // Check with 401 error
+    cy.intercept("POST", "api/v1/email/verify", {
+      statusCode: 401,
+    }).as("verifyEmailRequest");
+
+    cy.reload();
+
+    cy.wait("@verifyEmailRequest");
+
+    // Check that redirect worked and error message is shown
+    cy.url().should("include", "/login?redirect=/verify_email");
+
+    cy.checkToastMessage("app.flash.unauthenticated");
+  });
+});
diff --git a/tests/Frontend/fixtures/config.json b/tests/Frontend/fixtures/config.json
index 29cf9c86a..f07496b83 100644
--- a/tests/Frontend/fixtures/config.json
+++ b/tests/Frontend/fixtures/config.json
@@ -8,13 +8,17 @@
         "de": "Deutsch",
         "en": "English",
         "fr": "Français"
-      }
+      },
+      "default_locale": "en",
+      "default_timezone": "UTC",
+      "pagination_page_size": 2
     },
     "theme": {
       "primary_color": "#14b8a6",
       "rounded": true
     },
     "room": {
+      "limit": -1,
       "refresh_rate": 5000,
       "file_terms_of_use": null
     },
diff --git a/tests/Frontend/fixtures/currentUser.json b/tests/Frontend/fixtures/currentUser.json
index c3ee68482..e2e7c8b38 100644
--- a/tests/Frontend/fixtures/currentUser.json
+++ b/tests/Frontend/fixtures/currentUser.json
@@ -7,6 +7,7 @@
     "permissions": [],
     "timezone": "Europe/Berlin",
     "model_name": "User",
-    "room_limit": -1
+    "room_limit": -1,
+    "superuser": true
   }
 }
diff --git a/tests/Frontend/fixtures/files/bbb_style.css b/tests/Frontend/fixtures/files/bbb_style.css
new file mode 100644
index 000000000..63de21b12
--- /dev/null
+++ b/tests/Frontend/fixtures/files/bbb_style.css
@@ -0,0 +1,34 @@
+:root {
+    --color-primary: #74b943;
+    --color-success: #74b943;
+    --color-danger: #9c132e;
+    --color-warning: #f4aa00;
+    --poll-blue: var(--color-primary);
+    --color-background: #273035;
+    --color-content-background: var(--color-background);
+    --loader-bg: var(--color-background);
+}
+
+.react-toggle-track {
+    background-color: var(--color-danger);
+}
+
+.react-toggle--checked .react-toggle-track {
+    background-color: var(--color-success);
+}
+
+div[class^="branding-"] {
+    margin-top: 10px;
+}
+
+div[class^="react-toggle-track invertBackground--"] {
+    background-color: var(--color-success) !important;
+}
+
+div[class^="react-toggle-track invertBackground--"][class*="checked--"] {
+    background-color: var(--color-danger) !important;
+}
+
+body {
+    background-color: var(--color-background);
+}
diff --git a/tests/Frontend/fixtures/files/favicon-dark.ico b/tests/Frontend/fixtures/files/favicon-dark.ico
new file mode 100644
index 000000000..6a199a1ac
Binary files /dev/null and b/tests/Frontend/fixtures/files/favicon-dark.ico differ
diff --git a/tests/Frontend/fixtures/files/favicon.ico b/tests/Frontend/fixtures/files/favicon.ico
new file mode 100644
index 000000000..bb4ee815b
Binary files /dev/null and b/tests/Frontend/fixtures/files/favicon.ico differ
diff --git a/tests/Frontend/fixtures/files/logo-dark.svg b/tests/Frontend/fixtures/files/logo-dark.svg
new file mode 100644
index 000000000..7765f9836
--- /dev/null
+++ b/tests/Frontend/fixtures/files/logo-dark.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 290 98" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-10,-7.12)">
+        <path d="M10,16.06L37.4,16.06C41.598,15.916 45.783,16.595 49.72,18.06C52.622,19.194 55.235,20.961 57.37,23.23C59.191,25.232 60.526,27.628 61.27,30.23C61.979,32.681 62.349,35.218 62.37,37.77C62.35,40.319 61.98,42.852 61.27,45.3C60.528,47.903 59.193,50.299 57.37,52.3C55.238,54.573 52.624,56.34 49.72,57.47C45.785,58.939 41.598,59.618 37.4,59.47L20.57,59.47L20.57,93.94L10,93.94L10,16.06ZM20.57,50.38L34.43,50.38C36.477,50.379 38.52,50.212 40.54,49.88C42.425,49.595 44.246,48.983 45.92,48.07C47.512,47.178 48.828,45.862 49.72,44.27C50.75,42.289 51.243,40.071 51.15,37.84C51.243,35.606 50.75,33.385 49.72,31.4C48.827,29.81 47.512,28.498 45.92,27.61C44.247,26.694 42.426,26.078 40.54,25.79C38.52,25.462 36.477,25.298 34.43,25.3L20.57,25.3L20.57,50.38Z" style="fill:white;fill-rule:nonzero;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,-10,-7.12)">
+        <rect x="75.24" y="16.06" width="10.56" height="77.88" style="fill:white;fill-rule:nonzero;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,-10,-7.12)">
+        <path d="M105.82,16.06L116.38,16.06L116.38,84L152.13,84L152.13,93.9L105.82,93.9L105.82,16.06Z" style="fill:white;fill-rule:nonzero;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,-10,-7.12)">
+        <path d="M256.74,77.66C258.521,80.428 261.058,82.628 264.05,84C266.932,85.326 270.068,86.009 273.24,86C275.068,85.987 276.883,85.708 278.63,85.17C280.426,84.639 282.117,83.804 283.63,82.7C285.122,81.607 286.378,80.222 287.32,78.63C288.3,76.919 288.795,74.972 288.75,73C288.915,70.389 287.857,67.844 285.89,66.12C283.757,64.409 281.358,63.058 278.79,62.12C275.97,61.06 272.89,60.033 269.55,59.04C266.302,58.116 263.194,56.757 260.31,55C257.444,53.196 255.02,50.769 253.22,47.9C251.313,44.933 250.36,40.933 250.36,35.9C250.474,30.515 252.685,25.382 256.52,21.6C258.882,19.311 261.662,17.498 264.71,16.26C268.541,14.74 272.64,14.012 276.76,14.12C280.902,14.089 285.027,14.669 289,15.84C293.046,17.139 296.603,19.637 299.2,23L290.62,30.81C289.221,28.686 287.281,26.974 285,25.85C282.443,24.578 279.616,23.943 276.76,24C274.27,23.924 271.787,24.314 269.44,25.15C267.687,25.805 266.095,26.828 264.77,28.15C263.67,29.235 262.824,30.55 262.29,32C261.842,33.235 261.602,34.536 261.58,35.85C261.58,39.15 262.533,41.68 264.44,43.44C266.512,45.303 268.918,46.759 271.53,47.73C274.55,48.905 277.635,49.907 280.77,50.73C283.988,51.559 287.089,52.789 290,54.39C292.811,55.962 295.237,58.142 297.1,60.77C299,63.437 299.953,67.123 299.96,71.83C300.022,75.338 299.291,78.815 297.82,82C296.464,84.915 294.496,87.504 292.05,89.59C289.52,91.703 286.607,93.309 283.47,94.32C280.062,95.437 276.496,95.994 272.91,95.97C268.056,95.995 263.24,95.099 258.72,93.33C254.442,91.723 250.73,88.891 248.05,85.19L256.74,77.66Z" style="fill:white;fill-rule:nonzero;"/>
+    </g>
+    <g id="path16" transform="matrix(1,0,0,1,-10,-7.12)">
+        <path d="M186.52,63.44C182.601,59.796 180.46,54.618 180.66,49.27C181.476,39.215 189.978,31.375 200.066,31.375C210.447,31.375 219.096,39.677 219.52,50.05C219.489,55.124 217.372,59.969 213.67,63.44C213.242,63.88 213.242,64.59 213.67,65.03C213.729,65.101 213.796,65.165 213.87,65.22C215.706,66.487 217.181,68.211 218.15,70.22C218.436,70.812 219.157,71.064 219.75,70.78C219.855,70.736 219.95,70.671 220.03,70.59C226.057,65.214 229.43,57.454 229.25,49.38C228.87,34.52 216.39,22.38 200.95,21.99C184.53,21.49 171,34.26 171,50C171.019,57.831 174.384,65.291 180.24,70.49C180.465,70.719 180.774,70.848 181.095,70.848C181.416,70.848 181.725,70.719 181.95,70.49C182.029,70.39 182.099,70.283 182.16,70.17C183.134,68.164 184.608,66.442 186.44,65.17C186.749,64.958 186.934,64.606 186.934,64.231C186.934,63.998 186.863,63.771 186.73,63.58L186.57,63.38L186.52,63.44ZM200.1,7.12C175.1,7.12 154.78,26.67 154.78,50.83C154.924,67.746 164.876,83.121 180.25,90.18C180.417,90.266 180.602,90.311 180.79,90.311C181.232,90.311 181.638,90.063 181.84,89.67C181.971,89.473 182.028,89.235 182,89C181.53,86 181.14,83 180.92,80.35C180.888,79.986 180.678,79.66 180.36,79.48C170.518,73.227 164.545,62.34 164.56,50.68C164.7,31.88 180.62,16.58 200.09,16.52C219.56,16.46 235.8,31.89 235.8,50.87C235.709,62.655 229.529,73.592 219.48,79.75C219.27,82.49 218.86,85.75 218.35,88.97C218.339,89.036 218.333,89.103 218.333,89.17C218.333,89.754 218.771,90.254 219.35,90.33C219.599,90.379 219.857,90.34 220.08,90.22C235.449,83.183 245.404,67.823 245.55,50.92C245.42,26.67 225.14,7.12 200.1,7.12Z" style="fill:white;fill-rule:nonzero;"/>
+    </g>
+    <g id="Ebene_2-2" transform="matrix(1,0,0,1,-1.66,0)">
+        <g id="path18" transform="matrix(1,0,0,1,-8.34,-7.12)">
+            <path d="M208.89,99.62C207.89,103.33 203.89,104.19 200.1,104.19C196.31,104.19 192.35,103.33 191.31,99.62C189.72,94.08 187.14,80.15 187.14,73.71C187.14,66.88 193.51,65.16 200.14,65.16C206.77,65.16 213,66.75 213,73.66C213,80.03 210.39,93.97 208.85,99.58L208.89,99.62Z" style="fill:white;fill-rule:nonzero;"/>
+        </g>
+        <g id="ellipse20" transform="matrix(1,0,0,1,-8.34,-7.12)">
+            <path d="M200.1,37C206.763,37.267 212.1,42.821 212.1,49.49C212.1,56.347 206.457,61.99 199.6,61.99C192.743,61.99 187.1,56.347 187.1,49.49C187.1,49.487 187.1,49.483 187.1,49.48C187.239,42.59 192.946,36.997 199.837,36.997C199.925,36.997 200.012,36.998 200.1,37Z" style="fill:white;fill-rule:nonzero;"/>
+        </g>
+    </g>
+</svg>
diff --git a/tests/Frontend/fixtures/files/logo.svg b/tests/Frontend/fixtures/files/logo.svg
new file mode 100644
index 000000000..8d7834ad7
--- /dev/null
+++ b/tests/Frontend/fixtures/files/logo.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 290 98" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-10,-7.12)">
+        <path d="M10,16.06L37.4,16.06C41.598,15.916 45.783,16.595 49.72,18.06C52.622,19.194 55.235,20.961 57.37,23.23C59.191,25.232 60.526,27.628 61.27,30.23C61.979,32.681 62.349,35.218 62.37,37.77C62.35,40.319 61.98,42.852 61.27,45.3C60.528,47.903 59.193,50.299 57.37,52.3C55.238,54.573 52.624,56.34 49.72,57.47C45.785,58.939 41.598,59.618 37.4,59.47L20.57,59.47L20.57,93.94L10,93.94L10,16.06ZM20.57,50.38L34.43,50.38C36.477,50.379 38.52,50.212 40.54,49.88C42.425,49.595 44.246,48.983 45.92,48.07C47.512,47.178 48.828,45.862 49.72,44.27C50.75,42.289 51.243,40.071 51.15,37.84C51.243,35.606 50.75,33.385 49.72,31.4C48.827,29.81 47.512,28.498 45.92,27.61C44.247,26.694 42.426,26.078 40.54,25.79C38.52,25.462 36.477,25.298 34.43,25.3L20.57,25.3L20.57,50.38Z" style="fill:rgb(36,53,106);fill-rule:nonzero;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,-10,-7.12)">
+        <rect x="75.24" y="16.06" width="10.56" height="77.88" style="fill:rgb(36,53,106);fill-rule:nonzero;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,-10,-7.12)">
+        <path d="M105.82,16.06L116.38,16.06L116.38,84L152.13,84L152.13,93.9L105.82,93.9L105.82,16.06Z" style="fill:rgb(36,53,106);fill-rule:nonzero;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,-10,-7.12)">
+        <path d="M256.74,77.66C258.521,80.428 261.058,82.628 264.05,84C266.932,85.326 270.068,86.009 273.24,86C275.068,85.987 276.883,85.708 278.63,85.17C280.426,84.639 282.117,83.804 283.63,82.7C285.122,81.607 286.378,80.222 287.32,78.63C288.3,76.919 288.795,74.972 288.75,73C288.915,70.389 287.857,67.844 285.89,66.12C283.757,64.409 281.358,63.058 278.79,62.12C275.97,61.06 272.89,60.033 269.55,59.04C266.302,58.116 263.194,56.757 260.31,55C257.444,53.196 255.02,50.769 253.22,47.9C251.313,44.933 250.36,40.933 250.36,35.9C250.474,30.515 252.685,25.382 256.52,21.6C258.882,19.311 261.662,17.498 264.71,16.26C268.541,14.74 272.64,14.012 276.76,14.12C280.902,14.089 285.027,14.669 289,15.84C293.046,17.139 296.603,19.637 299.2,23L290.62,30.81C289.221,28.686 287.281,26.974 285,25.85C282.443,24.578 279.616,23.943 276.76,24C274.27,23.924 271.787,24.314 269.44,25.15C267.687,25.805 266.095,26.828 264.77,28.15C263.67,29.235 262.824,30.55 262.29,32C261.842,33.235 261.602,34.536 261.58,35.85C261.58,39.15 262.533,41.68 264.44,43.44C266.512,45.303 268.918,46.759 271.53,47.73C274.55,48.905 277.635,49.907 280.77,50.73C283.988,51.559 287.089,52.789 290,54.39C292.811,55.962 295.237,58.142 297.1,60.77C299,63.437 299.953,67.123 299.96,71.83C300.022,75.338 299.291,78.815 297.82,82C296.464,84.915 294.496,87.504 292.05,89.59C289.52,91.703 286.607,93.309 283.47,94.32C280.062,95.437 276.496,95.994 272.91,95.97C268.056,95.995 263.24,95.099 258.72,93.33C254.442,91.723 250.73,88.891 248.05,85.19L256.74,77.66Z" style="fill:rgb(36,53,106);fill-rule:nonzero;"/>
+    </g>
+    <g id="path16" transform="matrix(1,0,0,1,-10,-7.12)">
+        <path d="M186.52,63.44C182.601,59.796 180.46,54.618 180.66,49.27C181.476,39.215 189.978,31.375 200.066,31.375C210.447,31.375 219.096,39.677 219.52,50.05C219.489,55.124 217.372,59.969 213.67,63.44C213.242,63.88 213.242,64.59 213.67,65.03C213.729,65.101 213.796,65.165 213.87,65.22C215.706,66.487 217.181,68.211 218.15,70.22C218.436,70.812 219.157,71.064 219.75,70.78C219.855,70.736 219.95,70.671 220.03,70.59C226.057,65.214 229.43,57.454 229.25,49.38C228.87,34.52 216.39,22.38 200.95,21.99C184.53,21.49 171,34.26 171,50C171.019,57.831 174.384,65.291 180.24,70.49C180.465,70.719 180.774,70.848 181.095,70.848C181.416,70.848 181.725,70.719 181.95,70.49C182.029,70.39 182.099,70.283 182.16,70.17C183.134,68.164 184.608,66.442 186.44,65.17C186.749,64.958 186.934,64.606 186.934,64.231C186.934,63.998 186.863,63.771 186.73,63.58L186.57,63.38L186.52,63.44ZM200.1,7.12C175.1,7.12 154.78,26.67 154.78,50.83C154.924,67.746 164.876,83.121 180.25,90.18C180.417,90.266 180.602,90.311 180.79,90.311C181.232,90.311 181.638,90.063 181.84,89.67C181.971,89.473 182.028,89.235 182,89C181.53,86 181.14,83 180.92,80.35C180.888,79.986 180.678,79.66 180.36,79.48C170.518,73.227 164.545,62.34 164.56,50.68C164.7,31.88 180.62,16.58 200.09,16.52C219.56,16.46 235.8,31.89 235.8,50.87C235.709,62.655 229.529,73.592 219.48,79.75C219.27,82.49 218.86,85.75 218.35,88.97C218.339,89.036 218.333,89.103 218.333,89.17C218.333,89.754 218.771,90.254 219.35,90.33C219.599,90.379 219.857,90.34 220.08,90.22C235.449,83.183 245.404,67.823 245.55,50.92C245.42,26.67 225.14,7.12 200.1,7.12Z" style="fill:rgb(36,53,106);fill-rule:nonzero;"/>
+    </g>
+    <g id="Ebene_2-2" transform="matrix(1,0,0,1,-1.66,0)">
+        <g id="path18" transform="matrix(1,0,0,1,-8.34,-7.12)">
+            <path d="M208.89,99.62C207.89,103.33 203.89,104.19 200.1,104.19C196.31,104.19 192.35,103.33 191.31,99.62C189.72,94.08 187.14,80.15 187.14,73.71C187.14,66.88 193.51,65.16 200.14,65.16C206.77,65.16 213,66.75 213,73.66C213,80.03 210.39,93.97 208.85,99.58L208.89,99.62Z" style="fill:rgb(245,170,5);fill-rule:nonzero;"/>
+        </g>
+        <g id="ellipse20" transform="matrix(1,0,0,1,-8.34,-7.12)">
+            <path d="M200.1,37C206.763,37.267 212.1,42.821 212.1,49.49C212.1,56.347 206.457,61.99 199.6,61.99C192.743,61.99 187.1,56.347 187.1,49.49C187.1,49.487 187.1,49.483 187.1,49.48C187.239,42.59 192.946,36.997 199.837,36.997C199.925,36.997 200.012,36.998 200.1,37Z" style="fill:rgb(245,170,5);fill-rule:nonzero;"/>
+        </g>
+    </g>
+</svg>
diff --git a/tests/Frontend/fixtures/meetings.json b/tests/Frontend/fixtures/meetings.json
new file mode 100644
index 000000000..c52498b56
--- /dev/null
+++ b/tests/Frontend/fixtures/meetings.json
@@ -0,0 +1,67 @@
+{
+  "data": [
+    {
+      "id": "34d0b4eb-0de9-4bd4-b158-a8edc0f71674",
+      "start": "2021-02-12T18:09:29.000000Z",
+      "end": null,
+      "room": {
+        "id": "abc-def-123",
+        "owner": "John Doe",
+        "name": "Meeting One",
+        "participant_count": 10,
+        "listener_count": 5,
+        "voice_participant_count": 5,
+        "video_count": 3
+      },
+      "server": {
+        "id": 1,
+        "name": "Server 01"
+      }
+    },
+    {
+      "id": "5866d99e-ea44-4221-afa8-54f397ab07c8",
+      "start": "2021-02-12T18:10:20.000000Z",
+      "end": null,
+      "room": {
+        "id": "def-abc-123",
+        "owner": "Max Doe",
+        "name": "Meeting Two",
+        "participant_count": 50,
+        "listener_count": 30,
+        "voice_participant_count": 20,
+        "video_count": 10
+      },
+      "server": {
+        "id": 2,
+        "name": "Server 02"
+      }
+    },
+    {
+      "id": "520671dc-cde5-40d0-86c8-341446051a43",
+      "start": "2021-02-12T17:14:48.000000Z",
+      "end": null,
+      "room": {
+        "id": "def-abc-456",
+        "owner": "John Doe",
+        "name": "Meeting Three",
+        "participant_count": null,
+        "listener_count": null,
+        "voice_participant_count": null,
+        "video_count": null
+      },
+      "server": {
+        "id": 1,
+        "name": "Server 01"
+      }
+    }
+  ],
+  "meta": {
+    "current_page": 1,
+    "from": 1,
+    "last_page": 1,
+    "per_page": 3,
+    "to": 3,
+    "total": 3,
+    "total_no_filter": 3
+  }
+}
diff --git a/tests/Frontend/fixtures/permissions.json b/tests/Frontend/fixtures/permissions.json
new file mode 100644
index 000000000..e9cf6bd03
--- /dev/null
+++ b/tests/Frontend/fixtures/permissions.json
@@ -0,0 +1,94 @@
+{
+  "data": [
+    { "id": 3, "name": "rooms.create", "included_permissions": [] },
+    { "id": 4, "name": "rooms.viewAll", "included_permissions": [] },
+    { "id": 5, "name": "rooms.manage", "included_permissions": [3, 4] },
+    { "id": 6, "name": "meetings.viewAny", "included_permissions": [4] },
+    { "id": 7, "name": "admin.view", "included_permissions": [] },
+    { "id": 8, "name": "settings.viewAny", "included_permissions": [7] },
+    { "id": 9, "name": "settings.update", "included_permissions": [7, 8] },
+    { "id": 10, "name": "roles.viewAny", "included_permissions": [7] },
+    { "id": 11, "name": "roles.view", "included_permissions": [7, 10] },
+    { "id": 12, "name": "roles.update", "included_permissions": [7, 10, 11] },
+    {
+      "id": 13,
+      "name": "roles.create",
+      "included_permissions": [7, 10, 11, 12]
+    },
+    {
+      "id": 14,
+      "name": "roles.delete",
+      "included_permissions": [7, 10, 11, 12, 13]
+    },
+    { "id": 15, "name": "users.viewAny", "included_permissions": [7, 10] },
+    { "id": 16, "name": "users.view", "included_permissions": [7, 10, 15] },
+    {
+      "id": 17,
+      "name": "users.update",
+      "included_permissions": [7, 10, 15, 16, 20]
+    },
+    {
+      "id": 18,
+      "name": "users.create",
+      "included_permissions": [7, 10, 15, 16, 17, 20]
+    },
+    {
+      "id": 19,
+      "name": "users.delete",
+      "included_permissions": [7, 10, 15, 16, 17, 18, 20]
+    },
+    {
+      "id": 20,
+      "name": "users.updateOwnAttributes",
+      "included_permissions": []
+    },
+    { "id": 21, "name": "roomTypes.view", "included_permissions": [7] },
+    {
+      "id": 22,
+      "name": "roomTypes.update",
+      "included_permissions": [7, 10, 21, 30]
+    },
+    {
+      "id": 23,
+      "name": "roomTypes.create",
+      "included_permissions": [7, 10, 21, 22, 30]
+    },
+    {
+      "id": 24,
+      "name": "roomTypes.delete",
+      "included_permissions": [7, 10, 21, 22, 23, 30]
+    },
+    { "id": 25, "name": "servers.viewAny", "included_permissions": [7] },
+    { "id": 26, "name": "servers.view", "included_permissions": [7, 25] },
+    { "id": 27, "name": "servers.update", "included_permissions": [7, 25, 26] },
+    {
+      "id": 28,
+      "name": "servers.create",
+      "included_permissions": [7, 25, 26, 27]
+    },
+    {
+      "id": 29,
+      "name": "servers.delete",
+      "included_permissions": [7, 25, 26, 27, 28]
+    },
+    { "id": 30, "name": "serverPools.viewAny", "included_permissions": [7] },
+    { "id": 31, "name": "serverPools.view", "included_permissions": [7, 30] },
+    {
+      "id": 32,
+      "name": "serverPools.update",
+      "included_permissions": [7, 25, 30, 31]
+    },
+    {
+      "id": 33,
+      "name": "serverPools.create",
+      "included_permissions": [7, 25, 30, 31, 32]
+    },
+    {
+      "id": 34,
+      "name": "serverPools.delete",
+      "included_permissions": [7, 25, 30, 31, 32, 33]
+    },
+    { "id": 35, "name": "system.monitor", "included_permissions": [] }
+  ],
+  "meta": { "restrictions": [""] }
+}
diff --git a/tests/Frontend/fixtures/role.json b/tests/Frontend/fixtures/role.json
new file mode 100644
index 000000000..0fdd4357a
--- /dev/null
+++ b/tests/Frontend/fixtures/role.json
@@ -0,0 +1,19 @@
+{
+  "data": {
+    "id": 2,
+    "name": "Staff",
+    "superuser": false,
+    "updated_at": "2025-01-23T18:50:24.000000Z",
+    "permissions": [
+      { "id": 3, "name": "rooms.create" },
+      { "id": 4, "name": "rooms.viewAll" },
+      { "id": 6, "name": "meetings.viewAny" },
+      { "id": 15, "name": "users.viewAny" },
+      { "id": 22, "name": "roomTypes.update" },
+      { "id": 23, "name": "roomTypes.create" },
+      { "id": 24, "name": "roomTypes.delete" }
+    ],
+    "model_name": "Role",
+    "room_limit": null
+  }
+}
diff --git a/tests/Frontend/fixtures/roles.json b/tests/Frontend/fixtures/roles.json
new file mode 100644
index 000000000..b8db7b6a4
--- /dev/null
+++ b/tests/Frontend/fixtures/roles.json
@@ -0,0 +1,39 @@
+{
+  "data": [
+    {
+      "id": 1,
+      "name": "Superuser",
+      "default": true,
+      "updated_at": "2021-01-08T15:51:08.000000Z",
+      "model_name": "Role",
+      "room_limit": -1,
+      "superuser": true
+    },
+    {
+      "id": 2,
+      "name": "Staff",
+      "default": false,
+      "updated_at": "2021-03-19T09:12:44.000000Z",
+      "model_name": "Role",
+      "room_limit": 20,
+      "superuser": false
+    },
+    {
+      "id": 3,
+      "name": "Students",
+      "default": false,
+      "updated_at": "2021-05-22T11:55:21.000000Z",
+      "model_name": "Role",
+      "room_limit": 1,
+      "superuser": false
+    }
+  ],
+  "meta": {
+    "current_page": 1,
+    "from": 1,
+    "last_page": 2,
+    "per_page": 3,
+    "to": 3,
+    "total": 6
+  }
+}
diff --git a/tests/Frontend/fixtures/roomType.json b/tests/Frontend/fixtures/roomType.json
new file mode 100644
index 000000000..ca8075677
--- /dev/null
+++ b/tests/Frontend/fixtures/roomType.json
@@ -0,0 +1,58 @@
+{
+  "data": {
+    "id": 3,
+    "name": "Exam",
+    "description": "Room type description for room type Exam",
+    "color": "#4a5c66",
+    "model_name": "RoomType",
+    "server_pool": {
+      "id": 1,
+      "name": "Test",
+      "description": "Pool for testing",
+      "servers_count": 2,
+      "model_name": "ServerPool",
+      "updated_at": "2020-12-21T13:43:21.000000Z"
+    },
+    "max_participants": 100,
+    "max_duration": 120,
+    "create_parameters": "meetingLayout=PRESENTATION_FOCUS\nmeta_category=FINANCE\ndisabledFeatures=learningDashboard,virtualBackgrounds",
+    "restrict": false,
+    "roles": [],
+    "mute_on_start_default": true,
+    "mute_on_start_enforced": true,
+    "lock_settings_disable_cam_default": false,
+    "lock_settings_disable_cam_enforced": false,
+    "webcams_only_for_moderator_default": true,
+    "webcams_only_for_moderator_enforced": false,
+    "lock_settings_disable_mic_default": false,
+    "lock_settings_disable_mic_enforced": true,
+    "lock_settings_disable_private_chat_default": false,
+    "lock_settings_disable_private_chat_enforced": false,
+    "lock_settings_disable_public_chat_default": true,
+    "lock_settings_disable_public_chat_enforced": false,
+    "lock_settings_disable_note_default": true,
+    "lock_settings_disable_note_enforced": true,
+    "lock_settings_hide_user_list_default": true,
+    "lock_settings_hide_user_list_enforced": false,
+    "everyone_can_start_default": false,
+    "everyone_can_start_enforced": false,
+    "allow_membership_default": false,
+    "allow_membership_enforced": true,
+    "allow_guests_default": true,
+    "allow_guests_enforced": true,
+    "default_role_default": 1,
+    "default_role_enforced": false,
+    "lobby_default": 2,
+    "lobby_enforced": true,
+    "visibility_default": 1,
+    "visibility_enforced": false,
+    "record_attendance_default": false,
+    "record_attendance_enforced": false,
+    "record_default": false,
+    "record_enforced": false,
+    "auto_start_recording_default": false,
+    "auto_start_recording_enforced": false,
+    "has_access_code_default": true,
+    "has_access_code_enforced": false
+  }
+}
diff --git a/tests/Frontend/fixtures/roomTypes.json b/tests/Frontend/fixtures/roomTypes.json
index 31783be99..02070d3b6 100644
--- a/tests/Frontend/fixtures/roomTypes.json
+++ b/tests/Frontend/fixtures/roomTypes.json
@@ -3,22 +3,30 @@
     {
       "id": 1,
       "name": "Lecture",
-      "color": "#80BA27"
+      "description": null,
+      "color": "#80BA27",
+      "model_name": "RoomType"
     },
     {
       "id": 2,
       "name": "Meeting",
-      "color": "#4a5c66"
+      "description": null,
+      "color": "#4a5c66",
+      "model_name": "RoomType"
     },
     {
       "id": 3,
       "name": "Exam",
-      "color": "#9C132E"
+      "description": null,
+      "color": "#9C132E",
+      "model_name": "RoomType"
     },
     {
       "id": 4,
       "name": "Seminar",
-      "color": "#00B8E4"
+      "description": null,
+      "color": "#00B8E4",
+      "model_name": "RoomType"
     }
   ]
 }
diff --git a/tests/Frontend/fixtures/server.json b/tests/Frontend/fixtures/server.json
new file mode 100644
index 000000000..257ee832b
--- /dev/null
+++ b/tests/Frontend/fixtures/server.json
@@ -0,0 +1,21 @@
+{
+  "data": {
+    "id": 1,
+    "name": "Server 01",
+    "description": "Testserver 01",
+    "base_url": "https://localhost/bigbluebutton",
+    "secret": "123456789",
+    "strength": 2,
+    "status": 1,
+    "health": 1,
+    "participant_count": 14,
+    "listener_count": 7,
+    "voice_participant_count": 7,
+    "video_count": 7,
+    "meeting_count": 3,
+    "own_meeting_count": 2,
+    "version": "2.4.5",
+    "model_name": "Server",
+    "updated_at": "2020-12-21T13:43:21.000000Z"
+  }
+}
diff --git a/tests/Frontend/fixtures/serverPool.json b/tests/Frontend/fixtures/serverPool.json
new file mode 100644
index 000000000..a4450b506
--- /dev/null
+++ b/tests/Frontend/fixtures/serverPool.json
@@ -0,0 +1,46 @@
+{
+  "data": {
+    "id": 1,
+    "name": "Test",
+    "description": "Pool for testing",
+    "server_count": 2,
+    "servers": [
+      {
+        "id": 1,
+        "name": "Server 01",
+        "description": "Testserver 01",
+        "strength": 1,
+        "status": 1,
+        "health": 1,
+        "participant_count": 10,
+        "listener_count": 5,
+        "voice_participant_count": 5,
+        "video_count": 5,
+        "meeting_count": 2,
+        "own_meeting_count": 2,
+        "version": "2.4.5",
+        "model_name": "Server",
+        "updated_at": "2020-12-21T13:43:21.000000Z"
+      },
+      {
+        "id": 2,
+        "name": "Server 02",
+        "description": "Testserver 02",
+        "strength": 1,
+        "status": 1,
+        "health": 0,
+        "participant_count": 50,
+        "listener_count": 25,
+        "voice_participant_count": 30,
+        "video_count": 5,
+        "meeting_count": 10,
+        "own_meeting_count": 9,
+        "version": null,
+        "model_name": "Server",
+        "updated_at": "2020-12-21T13:43:21.000000Z"
+      }
+    ],
+    "model_name": "ServerPool",
+    "updated_at": "2020-12-21T13:43:21.000000Z"
+  }
+}
diff --git a/tests/Frontend/fixtures/serverPools.json b/tests/Frontend/fixtures/serverPools.json
new file mode 100644
index 000000000..886f6db98
--- /dev/null
+++ b/tests/Frontend/fixtures/serverPools.json
@@ -0,0 +1,29 @@
+{
+  "data": [
+    {
+      "id": 1,
+      "name": "Test",
+      "description": "Pool for testing",
+      "servers_count": 2,
+      "model_name": "ServerPool",
+      "updated_at": "2020-12-21T13:43:21.000000Z"
+    },
+    {
+      "id": 2,
+      "name": "Production",
+      "description": "Pool for production",
+      "servers_count": 1,
+      "model_name": "ServerPool",
+      "updated_at": "2020-12-21T13:43:21.000000Z"
+    }
+  ],
+  "meta": {
+    "current_page": 1,
+    "from": 1,
+    "last_page": 1,
+    "per_page": 15,
+    "to": 2,
+    "total": 2,
+    "total_no_filter": 2
+  }
+}
diff --git a/tests/Frontend/fixtures/servers.json b/tests/Frontend/fixtures/servers.json
new file mode 100644
index 000000000..79cde5db5
--- /dev/null
+++ b/tests/Frontend/fixtures/servers.json
@@ -0,0 +1,81 @@
+{
+  "data": [
+    {
+      "id": 1,
+      "name": "Server 01",
+      "description": "Testserver 01",
+      "strength": 1,
+      "status": 1,
+      "health": 1,
+      "participant_count": 10,
+      "listener_count": 5,
+      "voice_participant_count": 5,
+      "video_count": 5,
+      "meeting_count": 2,
+      "own_meeting_count": 2,
+      "version": "2.4.5",
+      "model_name": "Server",
+      "updated_at": "2020-12-21T13:43:21.000000Z"
+    },
+    {
+      "id": 2,
+      "name": "Server 02",
+      "description": "Testserver 02",
+      "strength": 1,
+      "status": 1,
+      "health": 0,
+      "participant_count": 50,
+      "listener_count": 25,
+      "voice_participant_count": 30,
+      "video_count": 5,
+      "meeting_count": 10,
+      "own_meeting_count": 9,
+      "version": null,
+      "model_name": "Server",
+      "updated_at": "2020-12-21T13:43:21.000000Z"
+    },
+    {
+      "id": 3,
+      "name": "Server 03",
+      "description": "Testserver 03",
+      "strength": 1,
+      "status": -1,
+      "health": -1,
+      "participant_count": null,
+      "listener_count": null,
+      "voice_participant_count": null,
+      "video_count": null,
+      "meeting_count": null,
+      "own_meeting_count": null,
+      "version": null,
+      "model_name": "Server",
+      "updated_at": "2020-12-21T13:43:21.000000Z"
+    },
+    {
+      "id": 4,
+      "name": "Server 04",
+      "description": "Testserver 04",
+      "strength": 1,
+      "status": 0,
+      "health": 1,
+      "participant_count": null,
+      "listener_count": null,
+      "voice_participant_count": null,
+      "video_count": null,
+      "meeting_count": null,
+      "own_meeting_count": null,
+      "version": null,
+      "model_name": "Server",
+      "updated_at": "2020-12-21T13:43:21.000000Z"
+    }
+  ],
+  "meta": {
+    "current_page": 1,
+    "from": 1,
+    "last_page": 1,
+    "per_page": 15,
+    "to": 4,
+    "total": 4,
+    "total_no_filter": 4
+  }
+}
diff --git a/tests/Frontend/fixtures/settings.json b/tests/Frontend/fixtures/settings.json
new file mode 100644
index 000000000..875cd867d
--- /dev/null
+++ b/tests/Frontend/fixtures/settings.json
@@ -0,0 +1,49 @@
+{
+  "data": {
+    "general_name": "Test Application",
+    "general_pagination_page_size": 5,
+    "general_toast_lifetime": 0,
+    "general_default_timezone": "UTC",
+    "general_help_url": null,
+    "general_legal_notice_url": null,
+    "general_privacy_policy_url": null,
+    "general_no_welcome_page": true,
+    "theme_logo": "/images/logo.svg",
+    "theme_favicon": "/images/favicon.ico",
+    "theme_logo_dark": "/images/logo-dark.svg",
+    "theme_favicon_dark": "/images/favicon-dark.ico",
+    "theme_primary_color": "#22c55e",
+    "theme_rounded": true,
+    "banner_enabled": false,
+    "banner_message": null,
+    "banner_link": null,
+    "banner_icon": null,
+    "banner_color": null,
+    "banner_background": null,
+    "banner_title": null,
+    "banner_link_style": "primary",
+    "banner_link_text": null,
+    "banner_link_target": "blank",
+    "room_limit": -1,
+    "room_auto_delete_inactive_period": -1,
+    "room_auto_delete_never_used_period": -1,
+    "room_auto_delete_deadline_period": 14,
+    "room_token_expiration": -1,
+    "room_file_terms_of_use": "Room file terms of use",
+    "user_password_change_allowed": true,
+    "recording_server_usage_enabled": true,
+    "recording_server_usage_retention_period": -1,
+    "recording_meeting_usage_enabled": true,
+    "recording_meeting_usage_retention_period": -1,
+    "recording_attendance_retention_period": -1,
+    "recording_recording_retention_period": -1,
+    "bbb_logo": "/images/logo.svg",
+    "bbb_style": null,
+    "bbb_default_presentation": null
+  },
+  "meta": {
+    "link_btn_styles": ["primary", "secondary", "link"],
+    "link_targets": ["blank", "self"],
+    "recording_max_retention_period": -1
+  }
+}
diff --git a/tests/Frontend/fixtures/superuserRole.json b/tests/Frontend/fixtures/superuserRole.json
new file mode 100644
index 000000000..e83c16ec9
--- /dev/null
+++ b/tests/Frontend/fixtures/superuserRole.json
@@ -0,0 +1,87 @@
+{
+  "data": {
+    "id": 2,
+    "name": "Superuser",
+    "superuser": true,
+    "updated_at": "2025-01-23T18:50:24.000000Z",
+    "permissions": [
+      { "id": 3, "name": "rooms.create" },
+      { "id": 4, "name": "rooms.viewAll" },
+      { "id": 5, "name": "rooms.manage" },
+      { "id": 6, "name": "meetings.viewAny" },
+      { "id": 7, "name": "admin.view" },
+      { "id": 8, "name": "settings.viewAny" },
+      { "id": 9, "name": "settings.update" },
+      { "id": 10, "name": "roles.viewAny" },
+      { "id": 11, "name": "roles.view" },
+      { "id": 12, "name": "roles.update" },
+      {
+        "id": 13,
+        "name": "roles.create"
+      },
+      {
+        "id": 14,
+        "name": "roles.delete"
+      },
+      { "id": 15, "name": "users.viewAny" },
+      { "id": 16, "name": "users.view" },
+      {
+        "id": 17,
+        "name": "users.update"
+      },
+      {
+        "id": 18,
+        "name": "users.create"
+      },
+      {
+        "id": 19,
+        "name": "users.delete"
+      },
+      {
+        "id": 20,
+        "name": "users.updateOwnAttributes"
+      },
+      { "id": 21, "name": "roomTypes.view" },
+      {
+        "id": 22,
+        "name": "roomTypes.update"
+      },
+      {
+        "id": 23,
+        "name": "roomTypes.create"
+      },
+      {
+        "id": 24,
+        "name": "roomTypes.delete"
+      },
+      { "id": 25, "name": "servers.viewAny" },
+      { "id": 26, "name": "servers.view" },
+      { "id": 27, "name": "servers.update" },
+      {
+        "id": 28,
+        "name": "servers.create"
+      },
+      {
+        "id": 29,
+        "name": "servers.delete"
+      },
+      { "id": 30, "name": "serverPools.viewAny" },
+      { "id": 31, "name": "serverPools.view" },
+      {
+        "id": 32,
+        "name": "serverPools.update"
+      },
+      {
+        "id": 33,
+        "name": "serverPools.create"
+      },
+      {
+        "id": 34,
+        "name": "serverPools.delete"
+      },
+      { "id": 35, "name": "system.monitor" }
+    ],
+    "model_name": "Role",
+    "room_limit": -1
+  }
+}
diff --git a/tests/Frontend/fixtures/user.json b/tests/Frontend/fixtures/userDataCurrentUser.json
similarity index 76%
rename from tests/Frontend/fixtures/user.json
rename to tests/Frontend/fixtures/userDataCurrentUser.json
index 1a13a9cfb..86877543a 100644
--- a/tests/Frontend/fixtures/user.json
+++ b/tests/Frontend/fixtures/userDataCurrentUser.json
@@ -14,17 +14,20 @@
     "roles": [
       {
         "id": 1,
-        "name": "Admin",
-        "automatic": true
+        "name": "Superuser",
+        "automatic": true,
+        "superuser": true
       },
       {
         "id": 2,
         "name": "User",
-        "automatic": false
+        "automatic": false,
+        "superuser": false
       }
     ],
     "bbb_skip_check_audio": false,
     "initial_password_set": false,
     "timezone": "UTC"
-  }
+  },
+  "superuser": true
 }
diff --git a/tests/Frontend/fixtures/userDataUser.json b/tests/Frontend/fixtures/userDataUser.json
new file mode 100644
index 000000000..14335d204
--- /dev/null
+++ b/tests/Frontend/fixtures/userDataUser.json
@@ -0,0 +1,23 @@
+{
+  "data": {
+    "id": 2,
+    "authenticator": "local",
+    "image": null,
+    "email": "LauraWRivera@domain.tld",
+    "external_id": null,
+    "firstname": "Laura",
+    "lastname": "Rivera",
+    "model_name": "User",
+    "user_locale": "en",
+    "room_limit": -1,
+    "updated_at": "2024-09-13T14:20:26.000000Z",
+    "roles": [
+      { "id": 3, "name": "Students", "automatic": true, "superuser": false },
+      { "id": 2, "name": "Staff", "automatic": false, "superuser": false }
+    ],
+    "bbb_skip_check_audio": false,
+    "initial_password_set": false,
+    "timezone": "UTC",
+    "superuser": false
+  }
+}
diff --git a/tests/Frontend/fixtures/users.json b/tests/Frontend/fixtures/users.json
new file mode 100644
index 000000000..4b02adf1e
--- /dev/null
+++ b/tests/Frontend/fixtures/users.json
@@ -0,0 +1,81 @@
+{
+  "data": [
+    {
+      "id": 1,
+      "authenticator": "local",
+      "email": "JohnDoe@domain.tld",
+      "external_id": null,
+      "firstname": "John",
+      "lastname": "Doe",
+      "user_locale": "en",
+      "model_name": "User",
+      "room_limit": 0,
+      "roles": [
+        { "id": 1, "name": "Superuser", "automatic": false, "superuser": true }
+      ],
+      "updated_at": "2020-01-01T01:00:00.000000Z",
+      "initial_password_set": true,
+      "superuser": true
+    },
+    {
+      "id": 2,
+      "authenticator": "local",
+      "email": "LauraWRivera@domain.tld",
+      "external_id": null,
+      "firstname": "Laura",
+      "lastname": "Rivera",
+      "user_locale": null,
+      "model_name": "User",
+      "room_limit": 0,
+      "roles": [
+        { "id": 3, "name": "Students", "automatic": true, "superuser": false },
+        { "id": 2, "name": "Staff", "automatic": false, "superuser": false }
+      ],
+      "updated_at": "2020-01-01T01:00:00.000000Z",
+      "initial_password_set": false,
+      "superuser": false
+    },
+    {
+      "id": 3,
+      "authenticator": "ldap",
+      "email": "JuanMWalter@domain.tld",
+      "external_id": "JMW",
+      "firstname": "Juan",
+      "lastname": "Walter",
+      "user_locale": "de",
+      "model_name": "User",
+      "room_limit": 0,
+      "roles": [
+        { "id": 3, "name": "Students", "automatic": true, "superuser": false }
+      ],
+      "updated_at": "2020-01-01T01:00:00.000000Z",
+      "superuser": false
+    },
+    {
+      "id": 100,
+      "authenticator": "local",
+      "email": "MaxDoe@domain.tld",
+      "external_id": null,
+      "firstname": "Max",
+      "lastname": "Doe",
+      "user_locale": "en",
+      "model_name": "User",
+      "room_limit": 0,
+      "roles": [
+        { "id": 1, "name": "Superuser", "automatic": false, "superuser": true }
+      ],
+      "updated_at": "2020-01-01T01:00:00.000000Z",
+      "initial_password_set": false,
+      "superuser": true
+    }
+  ],
+  "meta": {
+    "current_page": 1,
+    "from": 1,
+    "last_page": 1,
+    "per_page": 4,
+    "to": 4,
+    "total": 4,
+    "total_no_filter": 4
+  }
+}
diff --git a/tests/Frontend/support/commands/adminRolesCommands.js b/tests/Frontend/support/commands/adminRolesCommands.js
new file mode 100644
index 000000000..fceff3f0c
--- /dev/null
+++ b/tests/Frontend/support/commands/adminRolesCommands.js
@@ -0,0 +1,158 @@
+/**
+ * Check if a permission group is displayed correctly.
+ * @memberof cy
+ * @method roomTypeCheckDefaultRoomSettingCheckboxField
+ * @param  {int} index
+ * @param  {string} permission
+ * @param  {boolean} explicit
+ * @param  {boolean} included
+ * @param  {boolean} disabled
+ * @returns void
+ */
+Cypress.Commands.add(
+  "checkPermissionGroup",
+  (index, permission, explicit, included, disabled) => {
+    cy.get('[data-test="permission-group"]')
+      .eq(index)
+      .should("include.text", permission);
+
+    permission = permission.replace(/([a-z])([A-Z])/g, "$1_$2").toLowerCase();
+
+    cy.get('[data-test="permission-group"]')
+      .eq(index)
+      .should("include.text", "admin.roles.permissions." + permission)
+      .within(() => {
+        cy.get("#" + permission.replace(".", "\\."))
+          .should(explicit ? "be.checked" : "not.be.checked")
+          .and(disabled ? "be.disabled" : "not.be.disabled");
+        cy.get('[data-test="permission-included-icon"]').should(
+          included ? "be.visible" : "not.exist",
+        );
+        cy.get('[data-test="permission-not-included-icon"]').should(
+          included ? "not.exist" : "be.visible",
+        );
+      });
+  },
+);
+
+/**
+ * Check if the room limit help dialog is shown correctly and close it.
+ * @memberof cy
+ * @method roomTypeCheckDefaultRoomSettingCheckboxField
+ * @returns void
+ */
+Cypress.Commands.add("checkRoomLimitHelpDialog", () => {
+  cy.get('[data-test="roles-room-limit-help-dialog"]')
+    .should("be.visible")
+    .and("include.text", "app.room_limit")
+    .and("include.text", "admin.roles.room_limit.help_modal.info")
+    .and("include.text", "admin.roles.room_limit.help_modal.examples")
+    .and("include.text", "admin.roles.room_limit.help_modal.note")
+    .within(() => {
+      // Check that table is shown correctly
+      cy.get("tr").should("have.length", 8);
+
+      cy.get("tr")
+        .eq(0)
+        .within(() => {
+          cy.get("th").should("have.length", 4);
+          cy.get("th")
+            .eq(0)
+            .should(
+              "include.text",
+              "admin.roles.room_limit.help_modal.system_default",
+            );
+          cy.get("th")
+            .eq(1)
+            .should("include.text", "admin.roles.room_limit.help_modal.role_a");
+          cy.get("th")
+            .eq(2)
+            .should("include.text", "admin.roles.room_limit.help_modal.role_b");
+
+          cy.get("th").eq(3).should("include.text", "app.room_limit");
+        });
+
+      cy.get("tr")
+        .eq(1)
+        .within(() => {
+          cy.get("td").should("have.length", 4);
+          cy.get("td").eq(0).should("include.text", "5");
+          cy.get("td").eq(1).should("include.text", "X");
+          cy.get("td").eq(2).should("include.text", "X");
+          cy.get("td").eq(3).should("include.text", "5");
+        });
+
+      cy.get("tr")
+        .eq(2)
+        .within(() => {
+          cy.get("td").should("have.length", 4);
+          cy.get("td").eq(0).should("include.text", "1");
+          cy.get("td").eq(1).should("include.text", "5");
+          cy.get("td").eq(2).should("include.text", "X");
+          cy.get("td").eq(3).should("include.text", "5");
+        });
+
+      cy.get("tr")
+        .eq(3)
+        .within(() => {
+          cy.get("td").should("have.length", 4);
+          cy.get("td").eq(0).should("include.text", "5");
+          cy.get("td").eq(1).should("include.text", "1");
+          cy.get("td").eq(2).should("include.text", "X");
+          cy.get("td").eq(3).should("include.text", "1");
+        });
+
+      cy.get("tr")
+        .eq(4)
+        .within(() => {
+          cy.get("td").should("have.length", 4);
+          cy.get("td").eq(0).should("include.text", "5");
+          cy.get("td").eq(1).should("include.text", "1");
+          cy.get("td").eq(2).should("include.text", "2");
+          cy.get("td").eq(3).should("include.text", "2");
+        });
+
+      cy.get("tr")
+        .eq(5)
+        .within(() => {
+          cy.get("td").should("have.length", 4);
+          cy.get("td").eq(0).should("include.text", "5");
+          cy.get("td")
+            .eq(1)
+            .should(
+              "include.text",
+              "admin.roles.room_limit.help_modal.system_default",
+            );
+          cy.get("td").eq(2).should("include.text", "2");
+          cy.get("td").eq(3).should("include.text", "5");
+        });
+
+      cy.get("tr")
+        .eq(6)
+        .within(() => {
+          cy.get("td").should("have.length", 4);
+          cy.get("td").eq(0).should("include.text", "5");
+          cy.get("td")
+            .eq(1)
+            .should(
+              "include.text",
+              "admin.roles.room_limit.help_modal.system_default",
+            );
+          cy.get("td").eq(2).should("include.text", "10");
+          cy.get("td").eq(3).should("include.text", "10");
+        });
+
+      cy.get("tr")
+        .eq(7)
+        .within(() => {
+          cy.get("td").should("have.length", 4);
+          cy.get("td").eq(0).should("include.text", "5");
+          cy.get("td").eq(1).should("include.text", "app.unlimited");
+          cy.get("td").eq(2).should("include.text", "2");
+          cy.get("td").eq(3).should("include.text", "app.unlimited");
+        });
+
+      // Close room limit help dialog
+      cy.get('[data-test="dialog-header-close-button"]').click();
+    });
+});
diff --git a/tests/Frontend/support/commands/adminRoomTypesCommands.js b/tests/Frontend/support/commands/adminRoomTypesCommands.js
new file mode 100644
index 000000000..f7a205658
--- /dev/null
+++ b/tests/Frontend/support/commands/adminRoomTypesCommands.js
@@ -0,0 +1,27 @@
+/**
+ * Check if a field for the default room settings inside the room type form is displayed correctly.
+ * @memberof cy
+ * @method roomTypeCheckDefaultRoomSettingCheckboxField
+ * @param  {string} field
+ * @param  {(boolean|string)} value
+ * @param  {boolean} enforced
+ * @param  {boolean} viewOnly
+ * @returns void
+ */
+Cypress.Commands.add(
+  "roomTypeCheckDefaultRoomSettingCheckboxField",
+  (field, value, enforced, viewOny) => {
+    cy.get("#" + field + "-default")
+      .should(value ? "be.checked" : "not.be.checked")
+      .and(viewOny ? "be.disabled" : "not.be.disabled");
+
+    cy.get('[data-test="' + field + '-enforced"]')
+      .should(
+        "have.text",
+        enforced
+          ? "admin.room_types.default_room_settings.enforced"
+          : "admin.room_types.default_room_settings.default",
+      )
+      .and(viewOny ? "be.disabled" : "not.be.disabled");
+  },
+);
diff --git a/tests/Frontend/support/commands/adminSettingsCommands.js b/tests/Frontend/support/commands/adminSettingsCommands.js
new file mode 100644
index 000000000..5cb247121
--- /dev/null
+++ b/tests/Frontend/support/commands/adminSettingsCommands.js
@@ -0,0 +1,310 @@
+import {
+  _arrayBufferToBase64,
+  getFileContentType,
+} from "../utils/fileHelper.js";
+
+/**
+ * Checks if the image file upload works correctly
+ * @memberof cy
+ * @method checkSettingsImageSelector
+ * @param  {string} originalSrc
+ * @param  {string} imageName
+ * @param  {boolean} deletable
+ * @returns void
+ */
+Cypress.Commands.add(
+  "checkSettingsImageSelector",
+  (originalSrc, imageName, deletable) => {
+    // Check that correct url is shown
+    cy.get('[data-test="settings-image-url-input"]').should(
+      "have.value",
+      originalSrc,
+    );
+
+    cy.get('[data-test="settings-image-preview"]')
+      .should("have.attr", "src")
+      .and("include", originalSrc);
+
+    cy.get('[data-test="settings-image-cancel-button"]').should("not.exist");
+
+    if (originalSrc !== "" && deletable) {
+      cy.get('[data-test="settings-image-delete-button"]').should("be.visible");
+    } else {
+      cy.get('[data-test="settings-image-delete-button"]').should("not.exist");
+    }
+
+    cy.get('[data-test="settings-image-undo-delete-button"]').should(
+      "not.exist",
+    );
+
+    cy.get('[data-test="file-input-input"]').then((fileInput) => {
+      cy.stub(fileInput[0], "click").as("fileInputClick");
+    });
+
+    cy.get('[data-test="file-input-button"]')
+      .should("include.text", "app.browse")
+      .trigger("keyup", { key: "Enter" });
+
+    // Check that button is connected to file input
+    cy.get("@fileInputClick").should("be.calledOnce");
+
+    cy.get('[data-test="file-input-input"]').selectFile(
+      "tests/Frontend/fixtures/files/" + imageName,
+      {
+        force: true,
+      },
+    );
+
+    // Check that buttons changed
+    cy.get('[data-test="file-input-button"]').should("include.text", imageName);
+
+    cy.get('[data-test="settings-image-url-input"]').should("not.exist");
+
+    cy.get('[data-test="settings-image-cancel-button"]').should("be.visible");
+    cy.get('[data-test="settings-image-delete-button"]').should("not.exist");
+    cy.get('[data-test="settings-image-undo-delete-button"]').should(
+      "not.exist",
+    );
+
+    // Check that correct image is shown
+    cy.fixture("files/" + imageName, "base64").then((content) => {
+      const contentType = getFileContentType(imageName);
+
+      cy.get('[data-test="settings-image-preview"]')
+        .should("have.attr", "src")
+        .and("not.include", originalSrc)
+        .then((src) => {
+          cy.checkBlobSrcImage(src, content, contentType);
+        });
+    });
+
+    // Cancel upload
+    cy.get('[data-test="settings-image-cancel-button"]').click();
+
+    // Check that setting is shown correctly
+    cy.get('[data-test="settings-image-url-input"]')
+      .should("be.visible")
+      .and("have.value", originalSrc);
+
+    cy.get('[data-test="settings-image-cancel-button"]').should("not.exist");
+
+    if (originalSrc !== "" && deletable) {
+      cy.get('[data-test="settings-image-delete-button"]').should("be.visible");
+    } else {
+      cy.get('[data-test="settings-image-delete-button"]').should("not.exist");
+    }
+
+    cy.get('[data-test="settings-image-undo-delete-button"]').should(
+      "not.exist",
+    );
+
+    cy.get('[data-test="file-input-button"]').should(
+      "include.text",
+      "app.browse",
+    );
+
+    // Upload image again
+    cy.get('[data-test="file-input-input"]').selectFile(
+      "tests/Frontend/fixtures/files/" + imageName,
+      {
+        force: true,
+      },
+    );
+
+    // Check that correct image is shown
+    cy.fixture("files/" + imageName, "base64").then((content) => {
+      const contentType = getFileContentType(imageName);
+
+      cy.get('[data-test="settings-image-preview"]')
+        .should("have.attr", "src")
+        .and("not.include", originalSrc)
+        .then((src) => {
+          cy.checkBlobSrcImage(src, content, contentType);
+        });
+    });
+  },
+);
+
+/**
+ * Checks if the image loaded from the blob url has the expected content and content type
+ * @memberof cy
+ * @method checkBlobUrlData
+ * @param  {string} blobSrc
+ * @param  {string} expectedBase64Content
+ * @param  {string} expectedContentType
+ * @returns void
+ */
+Cypress.Commands.add(
+  "checkBlobSrcImage",
+  (blobSrc, expectedBase64Content, expectedContentType) => {
+    cy.wrap(null, { log: false }).then(async () => {
+      return new Cypress.Promise((resolve, reject) => {
+        fetch(blobSrc)
+          .then((response) =>
+            // Get array buffer and content type
+            response.arrayBuffer().then((arrayBuffer) => ({
+              arrayBuffer,
+              contentType: response.headers.get("content-type"),
+            })),
+          )
+          .then(({ arrayBuffer, contentType }) => {
+            const base64 = _arrayBufferToBase64(arrayBuffer);
+
+            // Check if content and content type are correct
+            try {
+              expect(contentType).to.eql(expectedContentType);
+              expect(base64).to.eql(expectedBase64Content);
+              resolve();
+            } catch (error) {
+              reject(error);
+            }
+          })
+          .catch((error) => {
+            reject(error);
+          });
+      });
+    });
+  },
+);
+
+/**
+ * Checks if the image file upload works correctly
+ * @memberof cy
+ * @method checkSettingsFileSelector
+ * @param {string} originalHref
+ * @param  {string} fileName
+ * @param  {boolean} deletable
+ * @returns void
+ */
+Cypress.Commands.add(
+  "checkSettingsFileSelector",
+  (originalHref, fileName, deletable) => {
+    cy.get('[data-test="settings-file-cancel-button"]').should("not.exist");
+    if (originalHref !== "" && deletable) {
+      cy.get('[data-test="settings-file-delete-button"]').should("be.visible");
+    } else {
+      cy.get('[data-test="settings-file-delete-button"]').should("not.exist");
+    }
+    cy.get('[data-test="settings-file-undo-delete-button"]').should(
+      "not.exist",
+    );
+
+    if (originalHref !== "") {
+      cy.get('[data-test="settings-file-view-button"]')
+        .should("be.visible")
+        .and("include.text", "app.view")
+        .and("have.attr", "href", originalHref);
+    } else {
+      cy.get('[data-test="settings-file-view-button"]').should("not.exist");
+    }
+
+    cy.get('[data-test="file-input-input"]').then((fileInput) => {
+      cy.stub(fileInput[0], "click").as("fileInputClick");
+    });
+
+    cy.get('[data-test="file-input-button"]')
+      .should("include.text", "app.browse")
+      .trigger("keyup", { key: "Enter" });
+
+    // Check that button is connected to file input
+    cy.get("@fileInputClick").should("be.calledOnce");
+
+    cy.get('[data-test="file-input-input"]').selectFile(
+      "tests/Frontend/fixtures/files/" + fileName,
+      {
+        force: true,
+      },
+    );
+
+    // Check that buttons changed
+    cy.get('[data-test="file-input-button"]').should("include.text", fileName);
+
+    cy.get('[data-test="settings-file-cancel-button"]').should("be.visible");
+    cy.get('[data-test="settings-file-delete-button"]').should("not.exist");
+    cy.get('[data-test="settings-file-undo-delete-button"]').should(
+      "not.exist",
+    );
+
+    // Cancel upload
+    cy.get('[data-test="settings-file-cancel-button"]').click();
+
+    // Check that setting is shown correctly
+    cy.get('[data-test="settings-file-cancel-button"]').should("not.exist");
+    if (originalHref !== "" && deletable) {
+      cy.get('[data-test="settings-file-delete-button"]').should("be.visible");
+    } else {
+      cy.get('[data-test="settings-file-delete-button"]').should("not.exist");
+    }
+    cy.get('[data-test="settings-file-undo-delete-button"]').should(
+      "not.exist",
+    );
+
+    if (originalHref !== "") {
+      cy.get('[data-test="settings-file-view-button"]')
+        .should("be.visible")
+        .and("include.text", "app.view")
+        .and("have.attr", "href", originalHref);
+    } else {
+      cy.get('[data-test="settings-file-view-button"]').should("not.exist");
+    }
+
+    cy.get('[data-test="file-input-button"]').should(
+      "include.text",
+      "app.browse",
+    );
+
+    // Upload file again
+    cy.get('[data-test="file-input-input"]').selectFile(
+      "tests/Frontend/fixtures/files/" + fileName,
+      {
+        force: true,
+      },
+    );
+  },
+);
+
+/**
+ * Checks if the SettingsImageSelector is shown correctly with only view permission
+ * @memberof cy
+ * @method checkSettingsImageSelectorOnlyView
+ * @param  {string} src
+ * @returns void
+ */
+Cypress.Commands.add("checkSettingsImageSelectorOnlyView", (src) => {
+  cy.get('[data-test="settings-image-url-input"]').should("not.exist");
+  cy.get('[data-test="settings-image-cancel-button"]').should("not.exist");
+  cy.get('[data-test="settings-image-delete-button"]').should("not.exist");
+  cy.get('[data-test="settings-image-undo-delete-button"]').should("not.exist");
+  cy.get('[data-test="file-input-button"]').should("not.exist");
+  cy.get('[data-test="file-input-input"]').should("not.exist");
+
+  if (src !== "") {
+    cy.get('[data-test="settings-image-preview"]')
+      .should("be.visible")
+      .and("have.attr", "src", src);
+  }
+});
+
+/**
+ * Checks if the SettingsFileSelector is shown correctly with only view permission
+ * @memberof cy
+ * @method checkSettingsFileSelectorOnlyView
+ * @param {string} href
+ * @returns void
+ */
+Cypress.Commands.add("checkSettingsFileSelectorOnlyView", (href) => {
+  cy.get('[data-test="settings-file-cancel-button"]').should("not.exist");
+  cy.get('[data-test="settings-file-delete-button"]').should("not.exist");
+  cy.get('[data-test="settings-file-undo-delete-button"]').should("not.exist");
+  cy.get('[data-test="file-input-button"]').should("not.exist");
+  cy.get('[data-test="file-input-input"]').should("not.exist");
+
+  if (href !== "") {
+    cy.get('[data-test="settings-file-view-button"]')
+      .should("be.visible")
+      .and("include.text", "app.view")
+      .and("have.attr", "href", href);
+  } else {
+    cy.get('[data-test="settings-file-view-button"]').should("not.exist");
+  }
+});
diff --git a/tests/Frontend/support/commands/interceptCommands.js b/tests/Frontend/support/commands/interceptCommands.js
index ff8c7696b..e7e344f80 100644
--- a/tests/Frontend/support/commands/interceptCommands.js
+++ b/tests/Frontend/support/commands/interceptCommands.js
@@ -136,9 +136,9 @@ Cypress.Commands.add("interceptUserProfileRequests", () => {
     cy.intercept("GET", "api/v1/currentUser", currentUser);
   });
 
-  cy.intercept("GET", "api/v1/users/1", { fixture: "user.json" }).as(
-    "userRequest",
-  );
+  cy.intercept("GET", "api/v1/users/1", {
+    fixture: "userDataCurrentUser.json",
+  }).as("userRequest");
   cy.intercept("GET", "api/v1/getTimezones", { fixture: "timezones.json" });
   cy.intercept("GET", "api/v1/sessions", { fixture: "sessions.json" });
 });
@@ -178,3 +178,230 @@ Cypress.Commands.add("interceptRoomPersonalizedLinksRequests", () => {
     fixture: "roomTokens.json",
   }).as("roomTokensRequest");
 });
+
+/**
+ * Intercept all requests that are needed when visiting the admin users index page
+ * @memberof cy
+ * @method interceptAdminUsersIndexRequests
+ * @returns void
+ */
+Cypress.Commands.add("interceptAdminUsersIndexRequests", () => {
+  cy.intercept("GET", "api/v1/users*", {
+    fixture: "users.json",
+  }).as("usersRequest");
+
+  cy.intercept("GET", "api/v1/roles*", {
+    fixture: "roles.json",
+  });
+});
+
+/**
+ * Intercept all requests that are needed when visiting the admin users new page
+ * @memberof cy
+ * @method interceptAdminUsersNewRequests
+ * @returns void
+ */
+Cypress.Commands.add("interceptAdminUsersNewRequests", () => {
+  cy.intercept("GET", "api/v1/roles*", {
+    fixture: "roles.json",
+  });
+
+  cy.intercept("GET", "api/v1/getTimezones", { fixture: "timezones.json" });
+});
+
+/**
+ * Intercept all requests that are needed when visiting the admin users view page
+ * @memberof cy
+ * @method interceptAdminUsersViewRequests
+ * @returns void
+ */
+Cypress.Commands.add("interceptAdminUsersViewRequests", () => {
+  cy.intercept("GET", "api/v1/users/2", {
+    fixture: "userDataUser.json",
+  }).as("userRequest");
+
+  cy.intercept("GET", "api/v1/roles*", {
+    fixture: "roles.json",
+  });
+
+  cy.intercept("GET", "api/v1/getTimezones", { fixture: "timezones.json" });
+  cy.intercept("GET", "api/v1/sessions", { fixture: "sessions.json" });
+});
+
+/**
+ * Intercept all requests that are needed when visiting the admin servers index page
+ * @memberof cy
+ * @method interceptAdminServersIndexRequests
+ * @returns void
+ */
+Cypress.Commands.add("interceptAdminServersIndexRequests", () => {
+  cy.intercept("GET", "api/v1/servers*", {
+    fixture: "servers.json",
+  }).as("serversRequest");
+});
+
+/**
+ * Intercept all requests that are needed when visiting the admin servers view page
+ * @memberof cy
+ * @method interceptAdminServersViewRequests
+ * @returns void
+ */
+Cypress.Commands.add("interceptAdminServersViewRequests", () => {
+  cy.intercept("GET", "api/v1/servers/1*", {
+    fixture: "server.json",
+  }).as("serverRequest");
+});
+
+/**
+ * Intercept all requests that are needed when visiting the admin server pools index page
+ * @memberof cy
+ * @method interceptAdminServerPoolsIndexRequests
+ * @returns void
+ */
+Cypress.Commands.add("interceptAdminServerPoolsIndexRequests", () => {
+  cy.intercept("GET", "api/v1/serverPools*", {
+    fixture: "serverPools.json",
+  }).as("serverPoolsRequest");
+});
+
+/**
+ * Intercept all requests that are needed when visiting the admin server pools view page
+ * @memberof cy
+ * @method interceptAdminServerPoolsViewRequests
+ * @returns void
+ */
+Cypress.Commands.add("interceptAdminServerPoolsViewRequests", () => {
+  cy.intercept("GET", "api/v1/serverPools/1*", {
+    fixture: "serverPool.json",
+  }).as("serverPoolRequest");
+
+  cy.intercept("GET", "api/v1/servers*", {
+    fixture: "servers.json",
+  }).as("serversRequest");
+});
+
+/**
+ * Intercept all requests that are needed when visiting the admin server pools view page
+ * @memberof cy
+ * @method interceptAdminServerPoolsNewRequests
+ * @returns void
+ */
+Cypress.Commands.add("interceptAdminServerPoolsNewRequests", () => {
+  cy.intercept("GET", "api/v1/servers*", {
+    fixture: "servers.json",
+  }).as("serversRequest");
+});
+
+/**
+ * Intercept all requests that are needed when visiting the admin room types index page
+ * @memberof cy
+ * @method interceptAdminRoomTypesIndexRequests
+ * @returns void
+ */
+Cypress.Commands.add("interceptAdminRoomTypesIndexRequests", () => {
+  cy.intercept("GET", "api/v1/roomTypes*", {
+    fixture: "roomTypes.json",
+  }).as("roomTypesRequest");
+});
+
+/**
+ * Intercept all requests that are needed when visiting the admin room types view page
+ * @memberof cy
+ * @method interceptAdminRoomTypesViewRequests
+ * @returns void
+ */
+Cypress.Commands.add("interceptAdminRoomTypesViewRequests", () => {
+  cy.intercept("GET", "api/v1/roomTypes/3", {
+    fixture: "roomType.json",
+  }).as("roomTypeRequest");
+
+  cy.intercept("GET", "api/v1/serverPools*", {
+    fixture: "serverPools.json",
+  }).as("serverPoolsRequest");
+
+  cy.intercept("GET", "api/v1/roles*", {
+    fixture: "roles.json",
+  }).as("rolesRequest");
+});
+
+/**
+ * Intercept all requests that are needed when visiting the admin room types new page
+ * @memberof cy
+ * @method interceptAdminRoomTypesNewRequests
+ * @returns void
+ */
+Cypress.Commands.add("interceptAdminRoomTypesNewRequests", () => {
+  cy.intercept("GET", "api/v1/serverPools*", {
+    fixture: "serverPools.json",
+  }).as("serverPoolsRequest");
+
+  cy.intercept("GET", "api/v1/roles*", {
+    fixture: "roles.json",
+  }).as("rolesRequest");
+});
+
+/**
+ * Intercept all requests that are needed when visiting the meetings index page
+ * @memberof cy
+ * @method interceptMeetingsIndexRequests
+ * @returns void
+ */
+Cypress.Commands.add("interceptMeetingsIndexRequests", () => {
+  cy.intercept("GET", "api/v1/meetings*", {
+    fixture: "meetings.json",
+  }).as("meetingsRequest");
+});
+
+/**
+ * Intercept all requests that are needed when visiting the admin settings page
+ * @memberof cy
+ * @method interceptAdminSettingsRequest
+ * @returns void
+ */
+Cypress.Commands.add("interceptAdminSettingsRequest", () => {
+  cy.intercept("GET", "api/v1/settings", {
+    fixture: "settings.json",
+  }).as("settingsRequest");
+
+  cy.intercept("GET", "api/v1/getTimezones", { fixture: "timezones.json" });
+});
+
+/**
+ * Intercept all requests that are needed when visiting the admin roles index page
+ * @memberof cy
+ * @method interceptAdminRolesIndexRequests
+ * @returns void
+ */
+Cypress.Commands.add("interceptAdminRolesIndexRequests", () => {
+  cy.intercept("GET", "api/v1/roles*", {
+    fixture: "roles.json",
+  }).as("rolesRequest");
+});
+
+/**
+ * Intercept all requests that are needed when visiting the admin roles view page
+ * @memberof cy
+ * @method interceptAdminRolesViewRequests
+ * @returns void
+ */
+Cypress.Commands.add("interceptAdminRolesViewRequests", () => {
+  cy.intercept("GET", "api/v1/roles/2", {
+    fixture: "role.json",
+  }).as("roleRequest");
+
+  cy.intercept("GET", "api/v1/permissions", {
+    fixture: "permissions.json",
+  }).as("permissionsRequest");
+});
+
+/**
+ * Intercept all requests that are needed when visiting the admin roles new page
+ * @memberof cy
+ * @method interceptAdminRolesNewRequests
+ * @returns void
+ */
+Cypress.Commands.add("interceptAdminRolesNewRequests", () => {
+  cy.intercept("GET", "api/v1/permissions", {
+    fixture: "permissions.json",
+  }).as("permissionsRequest");
+});
diff --git a/tests/Frontend/support/e2e.js b/tests/Frontend/support/e2e.js
index 08c3b79c5..89f1bbc71 100644
--- a/tests/Frontend/support/e2e.js
+++ b/tests/Frontend/support/e2e.js
@@ -16,4 +16,19 @@
 import "./commands/generalCommands.js";
 import "./commands/roomCommands.js";
 import "./commands/interceptCommands.js";
+import "./commands/adminRoomTypesCommands.js";
+import "./commands/adminSettingsCommands.js";
+import "./commands/adminRolesCommands.js";
 import "@cypress/code-coverage/support";
+
+Cypress.on("uncaught:exception", (err) => {
+  // Check if error should be ignored
+  if (
+    err.message.includes(
+      "ResizeObserver loop completed with undelivered notifications.",
+    )
+  ) {
+    // Ignore the error
+    return false;
+  }
+});
diff --git a/tests/Frontend/support/utils/fileHelper.js b/tests/Frontend/support/utils/fileHelper.js
new file mode 100644
index 000000000..9771d7726
--- /dev/null
+++ b/tests/Frontend/support/utils/fileHelper.js
@@ -0,0 +1,28 @@
+export function _arrayBufferToBase64(buffer) {
+  let binary = "";
+  const bytes = new Uint8Array(buffer);
+  const len = bytes.byteLength;
+  for (let i = 0; i < len; i++) {
+    binary += String.fromCharCode(bytes[i]);
+  }
+  return btoa(binary);
+}
+
+export function getFileContentType(fileName) {
+  const fileExtension = fileName.split(".").pop().toLowerCase();
+
+  const contentType = FILE_CONTENT_TYPES[fileExtension];
+
+  if (!contentType) {
+    throw new Error(
+      "No file content type listed for given file extension: " + fileExtension,
+    );
+  }
+
+  return contentType;
+}
+
+const FILE_CONTENT_TYPES = {
+  svg: "image/svg+xml",
+  ico: "image/vnd.microsoft.icon",
+};
diff --git a/tests/Frontend/support/utils/formData.js b/tests/Frontend/support/utils/formData.js
index 7ee2b945d..e4ecc13ec 100644
--- a/tests/Frontend/support/utils/formData.js
+++ b/tests/Frontend/support/utils/formData.js
@@ -1,13 +1,3 @@
-export function _arrayBufferToBase64(buffer) {
-  let binary = "";
-  const bytes = new Uint8Array(buffer);
-  const len = bytes.byteLength;
-  for (let i = 0; i < len; i++) {
-    binary += String.fromCharCode(bytes[i]);
-  }
-  return btoa(binary);
-}
-
 export function parseFormData(data, headers) {
   const boundary = headers["content-type"].split(
     "multipart/form-data; boundary=",