diff --git a/changelog/unreleased/enhancement-enable-rename-groups b/changelog/unreleased/enhancement-enable-rename-groups
index 62a28eac60c..ce79f2abbf1 100644
--- a/changelog/unreleased/enhancement-enable-rename-groups
+++ b/changelog/unreleased/enhancement-enable-rename-groups
@@ -1,4 +1,6 @@
 Enhancement: Enable rename groups
 
+Groups can now be renamed via the admin-settings.
+
 https://github.com/owncloud/web/pull/8715
 https://github.com/owncloud/web/issues/8714
diff --git a/packages/web-app-admin-settings/src/components/Groups/CreateGroupModal.vue b/packages/web-app-admin-settings/src/components/Groups/CreateGroupModal.vue
index ca941e8fa24..2fb6b82dc88 100644
--- a/packages/web-app-admin-settings/src/components/Groups/CreateGroupModal.vue
+++ b/packages/web-app-admin-settings/src/components/Groups/CreateGroupModal.vue
@@ -26,30 +26,28 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'
 import { Group } from 'web-client/src/generated'
-import { useClientService } from 'web-pkg'
+import { MaybeRef, useClientService } from 'web-pkg'
 
 export default defineComponent({
   name: 'CreateGroupModal',
   emits: ['cancel', 'confirm'],
   setup() {
     const clientService = useClientService()
+
+    const group: MaybeRef<Group> = ref({ displayName: '' })
+    const formData = ref({
+      displayName: {
+        errorMessage: '',
+        valid: false
+      }
+    })
+
     return {
-      clientService
-    }
-  },
-  data: function () {
-    return {
-      formData: {
-        displayName: {
-          errorMessage: '',
-          valid: false
-        }
-      },
-      group: {
-        displayName: ''
-      } as Group
+      clientService,
+      group,
+      formData
     }
   },
   computed: {
diff --git a/packages/web-app-admin-settings/src/components/Groups/SideBar/EditPanel.vue b/packages/web-app-admin-settings/src/components/Groups/SideBar/EditPanel.vue
index 8f498bf469c..f045fbcfca7 100644
--- a/packages/web-app-admin-settings/src/components/Groups/SideBar/EditPanel.vue
+++ b/packages/web-app-admin-settings/src/components/Groups/SideBar/EditPanel.vue
@@ -1,10 +1,10 @@
 <template>
   <div id="group-edit-panel" class="oc-mt-xl">
-    <GroupInfoBox :group="group" />
+    <group-info-box :group="group" />
     <form id="group-edit-form" class="oc-background-highlight oc-p-m" autocomplete="off">
       <oc-text-input
-        v-model="editGroup.displayName"
         id="displayName-input"
+        v-model="editGroup.displayName"
         class="oc-mb-s"
         :label="$gettext('Group name')"
         :error-message="formData.displayName.errorMessage"
@@ -23,10 +23,10 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, PropType } from 'vue'
+import { defineComponent, PropType, ref } from 'vue'
 import { Group } from 'web-client/src/generated'
 import CompareSaveDialog from 'web-pkg/src/components/sideBar/CompareSaveDialog.vue'
-import { useClientService } from 'web-pkg'
+import { MaybeRef, useClientService } from 'web-pkg'
 import GroupInfoBox from './GroupInfoBox.vue'
 
 export default defineComponent({
@@ -45,19 +45,19 @@ export default defineComponent({
   emits: ['confirm'],
   setup() {
     const clientService = useClientService()
-    return {
-      clientService
-    }
-  },
-  data() {
-    return {
-      editGroup: {} as Group,
-      formData: {
-        displayName: {
-          errorMessage: '',
-          valid: true
-        }
+
+    const editGroup: MaybeRef<Group> = ref({})
+    const formData = ref({
+      displayName: {
+        errorMessage: '',
+        valid: true
       }
+    })
+
+    return {
+      clientService,
+      editGroup,
+      formData
     }
   },
   computed: {
diff --git a/packages/web-app-admin-settings/src/components/Groups/SideBar/GroupInfoBox.vue b/packages/web-app-admin-settings/src/components/Groups/SideBar/GroupInfoBox.vue
index 3daabef2b02..c4dfaec273e 100644
--- a/packages/web-app-admin-settings/src/components/Groups/SideBar/GroupInfoBox.vue
+++ b/packages/web-app-admin-settings/src/components/Groups/SideBar/GroupInfoBox.vue
@@ -11,6 +11,12 @@ import { Group } from 'web-client/src/generated'
 import { useGettext } from 'vue3-gettext'
 export default defineComponent({
   name: 'GroupInfoBox',
+  props: {
+    group: {
+      type: Object as PropType<Group>,
+      required: true
+    }
+  },
   setup(props) {
     const _group = computed<Group>(() => props.group)
     const { $ngettext } = useGettext()
@@ -29,12 +35,6 @@ export default defineComponent({
       groupMembersText,
       _group
     }
-  },
-  props: {
-    group: {
-      type: Object as PropType<Group>,
-      required: true
-    }
   }
 })
 </script>
diff --git a/packages/web-app-admin-settings/src/composables/actions/groups/useGroupActionsEdit.ts b/packages/web-app-admin-settings/src/composables/actions/groups/useGroupActionsEdit.ts
index 8c1bc0da76f..976cb1777a0 100644
--- a/packages/web-app-admin-settings/src/composables/actions/groups/useGroupActionsEdit.ts
+++ b/packages/web-app-admin-settings/src/composables/actions/groups/useGroupActionsEdit.ts
@@ -2,7 +2,7 @@ import { eventBus } from 'web-pkg'
 import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
 import { useGettext } from 'vue3-gettext'
 import { computed } from 'vue'
-import { UserAction } from 'web-pkg/src/composables/actions'
+import { GroupAction } from 'web-pkg/src/composables/actions'
 
 export const useGroupActionsEdit = () => {
   const { $gettext } = useGettext()