diff --git a/src/components/Editor/AvatarParticipationStatus.vue b/src/components/Editor/AvatarParticipationStatus.vue
index ab4da93925..78759b9ee6 100644
--- a/src/components/Editor/AvatarParticipationStatus.vue
+++ b/src/components/Editor/AvatarParticipationStatus.vue
@@ -22,7 +22,12 @@
 
 <template>
 	<div class="avatar-participation-status">
-		<Avatar :disable-tooltip="true"
+		<Avatar v-if="isGroup === true">
+			<template #icon>
+				<AccountMultiple :size="28" />
+			</template>
+		</Avatar>
+		<Avatar v-else :disable-tooltip="true"
 			:user="avatarLink"
 			:is-no-user="isResource" />
 		<template v-if="participationStatus === 'ACCEPTED' && isViewedByOrganizer">
@@ -125,6 +130,7 @@
 
 <script>
 import { NcAvatar as Avatar } from '@nextcloud/vue'
+import AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
 import IconCheck from 'vue-material-design-icons/CheckCircle.vue'
 import IconNoResponse from 'vue-material-design-icons/HelpCircle.vue'
 import IconClose from 'vue-material-design-icons/CloseCircle.vue'
@@ -133,8 +139,9 @@ import IconDelegated from 'vue-material-design-icons/ArrowRightDropCircle.vue'
 export default {
 	name: 'AvatarParticipationStatus',
 	components: {
-		Avatar,
-		IconCheck,
+	  Avatar,
+	  AccountMultiple,
+	  IconCheck,
 	  IconNoResponse,
 	  IconClose,
 	  IconDelegated,
@@ -161,6 +168,10 @@ export default {
 			type: Boolean,
 			required: true,
 		},
+		isGroup: {
+			type: Boolean,
+			required: false,
+		},
 		isSuggestion: {
 			type: Boolean,
 			default: false,
diff --git a/src/components/Editor/Invitees/InviteesList.vue b/src/components/Editor/Invitees/InviteesList.vue
index fa8367b284..c68fe41165 100644
--- a/src/components/Editor/Invitees/InviteesList.vue
+++ b/src/components/Editor/Invitees/InviteesList.vue
@@ -34,6 +34,7 @@
 			:attendee="invitee"
 			:is-read-only="isReadOnly"
 			:organizer-display-name="organizerDisplayName"
+			:members="invitee.members"
 			@remove-attendee="removeAttendee" />
 		<NoAttendeesView v-if="isReadOnly && isListEmpty"
 			:message="noInviteesMessage" />
@@ -106,6 +107,7 @@ export default {
 		return {
 			creatingTalkRoom: false,
 			showFreeBusyModel: false,
+			dummyProperty: 0,
 		}
 	},
 	computed: {
@@ -117,16 +119,42 @@ export default {
 		},
 		invitees() {
 			return this.calendarObjectInstance.attendees.filter(attendee => {
+
+				// Assign members to group type
+				attendee.members = [];
+				if (attendee.attendeeProperty.userType === 'GROUP') {
+					let group = attendee
+					group.members = this.calendarObjectInstance.attendees.filter(attendee => {
+						return group.uri === attendee.member
+					})
+				}
+
 				return !['RESOURCE', 'ROOM'].includes(attendee.attendeeProperty.userType)
 			})
 		},
+		groups() {
+			return this.calendarObjectInstance.attendees.filter(attendee => {
+				return attendee.attendeeProperty.userType === 'GROUP'
+			})
+		},
 		inviteesWithoutOrganizer() {
 			if (!this.calendarObjectInstance.organizer) {
 				return this.invitees
 			}
 
 			return this.invitees
-				.filter(attendee => attendee.uri !== this.calendarObjectInstance.organizer.uri)
+				.filter(attendee => {
+					// Filter attendees which are part of an invited group
+					if (attendee.member) {
+						var isMemberOfGroup = this.groups.some(function(group) {
+							return attendee.member.includes(group.uri) &&
+								attendee.attendeeProperty.userType === 'INDIVIDUAL'
+						})
+					}
+
+					return attendee.uri !== this.calendarObjectInstance.organizer.uri &&
+						!isMemberOfGroup
+				})
 		},
 		hasOrganizer() {
 			return this.calendarObjectInstance.organizer !== null
@@ -189,6 +217,7 @@ export default {
 			})
 		},
 		removeAttendee(attendee) {
+			console.log("remove attendee ", attendee)
 			this.$store.commit('removeAttendee', {
 				calendarObjectInstance: this.calendarObjectInstance,
 				attendee,
diff --git a/src/components/Editor/Invitees/InviteesListItem.vue b/src/components/Editor/Invitees/InviteesListItem.vue
index 1fbf11d221..424b376758 100644
--- a/src/components/Editor/Invitees/InviteesListItem.vue
+++ b/src/components/Editor/Invitees/InviteesListItem.vue
@@ -29,11 +29,28 @@
 			:avatar-link="avatarLink"
 			:participation-status="attendee.participationStatus"
 			:organizer-display-name="organizerDisplayName"
-			:common-name="commonName" />
+			:common-name="commonName"
+			:is-group="isGroup" />
 		<div class="invitees-list-item__displayname">
 			{{ commonName }}
+			<span v-if="hasMembers"
+				class="invitees-list-item__member-count">
+    			({{ attendee.members.length }})
+  			</span>
 		</div>
 		<div class="invitees-list-item__actions">
+			<NcButton v-if="hasMembers"
+				class="icon-collapse"
+				:class="{ 'icon-collapse--open':memberListExpaneded }"
+				type="tertiary"
+				@click="toggleMemberList">
+				<template #icon>
+					<ChevronUp v-if="memberListExpaneded"
+						:size="20" />
+					<ChevronDown v-else
+						:size="20" />
+				</template>
+			</NcButton>
 			<Actions v-if="isViewedByOrganizer">
 				<ActionCheckbox :checked="attendee.rsvp"
 					@change="toggleRSVP">
@@ -61,14 +78,25 @@
 					{{ $t('calendar', 'Non-participant') }}
 				</ActionRadio>
 
-				<ActionButton @click="removeAttendee">
+				<ActionButton @click="removeAttendee(attendee)">
 					<template #icon>
 						<Delete :size="20" decorative />
 					</template>
-					{{ $t('calendar', 'Remove attendee') }}
+					{{ removeAttendeeText }}
 				</ActionButton>
 			</Actions>
 		</div>
+		<div v-if="hasMembers"
+			class="member-list"
+			:class="{ 'member-list--open':memberListExpaneded }">
+			<InviteesMemberItem v-for="member in attendee.members"
+				:key="member.email"
+				:attendee="member"
+				:is-read-only="isReadOnly"
+				:organizer-display-name="organizerDisplayName"
+				:members="member.members"
+				@remove-attendee="removeAttendee(member)" />
+		</div>
 	</div>
 </template>
 
@@ -79,8 +107,12 @@ import {
 	NcActionButton as ActionButton,
 	NcActionRadio as ActionRadio,
 	NcActionCheckbox as ActionCheckbox,
+	NcButton,
 } from '@nextcloud/vue'
 import { removeMailtoPrefix } from '../../../utils/attendee.js'
+import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
+import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'
+import InviteesMemberItem from './InviteesMemberItem.vue'
 
 import Delete from 'vue-material-design-icons/Delete.vue'
 
@@ -93,6 +125,10 @@ export default {
 		ActionRadio,
 		Actions,
 		Delete,
+		NcButton,
+		ChevronDown,
+		ChevronUp,
+		InviteesMemberItem,
 	},
 	props: {
 		attendee: {
@@ -108,6 +144,11 @@ export default {
 			required: true,
 		},
 	},
+	data() {
+    	return {
+      		memberListExpaneded: false
+    	};
+  	},
 	computed: {
 		/**
 		 * @return {string}
@@ -116,6 +157,16 @@ export default {
 			// return this.$store.getters.getAvatarForContact(this.uri) || this.commonName
 			return this.commonName
 		},
+		/**
+		 * @return {string}
+		 */
+		removeAttendeeText() {
+			if (this.isGroup) {
+				return this.$t('calendar', 'Remove group')
+			} else {
+				return this.$t('calendar', 'Remove attendee')
+			}
+		},
 		/**
 		 * Common name of the organizer or the uri without the 'mailto:' prefix.
 		 *
@@ -151,6 +202,12 @@ export default {
 			// TODO: check if also viewed by organizer
 			return !this.isReadOnly
 		},
+		isGroup() {
+			return this.attendee.attendeeProperty.userType === 'GROUP'
+		},
+		hasMembers() {
+			return this.attendee.members.length > 0
+		}
 	},
 	methods: {
 		/**
@@ -175,14 +232,27 @@ export default {
 		/**
 		 * Removes an attendee from the event
 		 */
-		removeAttendee() {
-			this.$emit('remove-attendee', this.attendee)
+		removeAttendee(attendee) {
+			this.$emit('remove-attendee', attendee)
+		},
+		/**
+		 * Toggle member list if attendee is a group
+		 */
+		toggleMemberList(e) {
+			this.memberListExpaneded = !this.memberListExpaneded
 		},
 	},
 }
 </script>
 
 <style lang="scss" scoped>
+.invitees-list-item {
+	flex-wrap: wrap;
+}
+.invitees-list-item__actions {
+	display: flex;
+}
+
 .invitees-list-item__displayname {
 	margin-bottom: 17px;
 	text-overflow: ellipsis;
@@ -193,4 +263,23 @@ export default {
 .avatar-participation-status {
 	margin-top: 5px;
 }
+
+.invitees-list-item__member-count {
+	color: var(--color-text-maxcontrast);
+	font-weight: 300;
+}
+
+.member-list {
+	height: auto;
+	max-height: 0;
+	flex-basis: 100%;
+	overflow: hidden;
+	transition: max-height 0.3s ease;
+	padding-left: 15px;
+}
+
+.member-list--open {
+	max-height: 1000px;
+	transition: max-height 0.3s ease;
+}
 </style>
diff --git a/src/components/Editor/Invitees/InviteesMemberItem.vue b/src/components/Editor/Invitees/InviteesMemberItem.vue
new file mode 100644
index 0000000000..4ea1cbb546
--- /dev/null
+++ b/src/components/Editor/Invitees/InviteesMemberItem.vue
@@ -0,0 +1,210 @@
+<!--
+  - @copyright Copyright (c) 2023 Jonas Hienrich <heinrich@synyx.net>
+  -
+  - @author Georg Ehrke <oc.list@georgehrke.com>
+  - @author Richard Steinmetz <richard@steinmetz.cloud>
+  -
+  - @license AGPL-3.0-or-later
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<div class="invitees-member-item">
+		<AvatarParticipationStatus :attendee-is-organizer="false"
+			:is-viewed-by-organizer="isViewedByOrganizer"
+			:is-resource="false"
+			:avatar-link="avatarLink"
+			:participation-status="attendee.participationStatus"
+			:organizer-display-name="organizerDisplayName"
+			:common-name="commonName" />
+		<div class="invitees-member-item__displayname">
+			{{ commonName }}
+		</div>
+		<div class="invitees-member-item__actions">
+			<Actions v-if="isViewedByOrganizer">
+				<ActionCheckbox :checked="attendee.rsvp"
+					@change="toggleRSVP">
+					{{ $t('calendar', 'Send email') }}
+				</ActionCheckbox>
+
+				<ActionRadio :name="radioName"
+					:checked="isChair"
+					@change="changeRole('CHAIR')">
+					{{ $t('calendar', 'Chairperson') }}
+				</ActionRadio>
+				<ActionRadio :name="radioName"
+					:checked="isRequiredParticipant"
+					@change="changeRole('REQ-PARTICIPANT')">
+					{{ $t('calendar', 'Required participant') }}
+				</ActionRadio>
+				<ActionRadio :name="radioName"
+					:checked="isOptionalParticipant"
+					@change="changeRole('OPT-PARTICIPANT')">
+					{{ $t('calendar', 'Optional participant') }}
+				</ActionRadio>
+				<ActionRadio :name="radioName"
+					:checked="isNonParticipant"
+					@change="changeRole('NON-PARTICIPANT')">
+					{{ $t('calendar', 'Non-participant') }}
+				</ActionRadio>
+
+				<ActionButton @click="removeAttendee">
+					<template #icon>
+						<Delete :size="20" decorative />
+					</template>
+					{{ $t('calendar', 'Remove attendee') }}
+				</ActionButton>
+			</Actions>
+		</div>
+	</div>
+</template>
+
+<script>
+import AvatarParticipationStatus from '../AvatarParticipationStatus.vue'
+import {
+	NcActions as Actions,
+	NcActionButton as ActionButton,
+	NcActionRadio as ActionRadio,
+	NcActionCheckbox as ActionCheckbox,
+	NcButton,
+} from '@nextcloud/vue'
+import { removeMailtoPrefix } from '../../../utils/attendee.js'
+
+import Delete from 'vue-material-design-icons/Delete.vue'
+
+export default {
+	name: 'InviteesMemberItem',
+	components: {
+		AvatarParticipationStatus,
+		ActionButton,
+		ActionCheckbox,
+		ActionRadio,
+		Actions,
+		Delete,
+		NcButton,
+	},
+	props: {
+		attendee: {
+			type: Object,
+			required: true,
+		},
+		organizerDisplayName: {
+			type: String,
+			required: true,
+		},
+		isReadOnly: {
+			type: Boolean,
+			required: true,
+		},
+	},
+	data() {
+    	return {
+      		memberListExpaneded: false
+    	};
+  	},
+	computed: {
+		/**
+		 * @return {string}
+		 */
+		avatarLink() {
+			// return this.$store.getters.getAvatarForContact(this.uri) || this.commonName
+			return this.commonName
+		},
+		/**
+		 * Common name of the organizer or the uri without the 'mailto:' prefix.
+		 *
+		 * @return {string}
+		 */
+		commonName() {
+			if (this.attendee.commonName) {
+				return this.attendee.commonName
+			}
+
+			if (this.attendee.uri) {
+				return removeMailtoPrefix(this.attendee.uri)
+			}
+
+			return ''
+		},
+		radioName() {
+			return this._uid + '-role-radio-input-group'
+		},
+		isChair() {
+			return this.attendee.role === 'CHAIR'
+		},
+		isRequiredParticipant() {
+			return this.attendee.role === 'REQ-PARTICIPANT'
+		},
+		isOptionalParticipant() {
+			return this.attendee.role === 'OPT-PARTICIPANT'
+		},
+		isNonParticipant() {
+			return this.attendee.role === 'NON-PARTICIPANT'
+		},
+		isViewedByOrganizer() {
+			// TODO: check if also viewed by organizer
+			return !this.isReadOnly
+		},
+	},
+	methods: {
+		/**
+		 * Toggles the RSVP flag of the attendee
+		 */
+		toggleRSVP() {
+			this.$store.commit('toggleAttendeeRSVP', {
+				attendee: this.attendee,
+			})
+		},
+		/**
+		 * Updates the role of the attendee
+		 *
+		 * @param {string} role The new role of the attendee
+		 */
+		changeRole(role) {
+			this.$store.commit('changeAttendeesRole', {
+				attendee: this.attendee,
+				role,
+			})
+		},
+		/**
+		 * Removes an attendee from the event
+		 */
+		removeAttendee() {
+			this.$emit('remove-attendee', this.attendee)
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+
+.invitees-member-item {
+	display: flex;
+}
+.invitees-member-item__displayname {
+	margin-bottom: 17px;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+	flex-grow: 1;
+	margin-left: 5px;
+}
+
+.avatar-participation-status {
+	margin-top: 5px;
+}
+
+</style>
diff --git a/src/models/attendee.js b/src/models/attendee.js
index 79f68c30b5..869b26c908 100644
--- a/src/models/attendee.js
+++ b/src/models/attendee.js
@@ -44,6 +44,8 @@ const getDefaultAttendeeObject = (props = {}) => Object.assign({}, {
 	rsvp: false,
 	// The uri of the attendee
 	uri: null,
+	// Member address of the attendee
+	member: null,
 }, props)
 
 /**
@@ -61,6 +63,8 @@ const mapAttendeePropertyToAttendeeObject = (attendeeProperty) => {
 		role: attendeeProperty.role,
 		rsvp: attendeeProperty.rsvp,
 		uri: attendeeProperty.email,
+		// TODO Expose member attribute in calendar-js
+		member: attendeeProperty._parameters.get('MEMBER')?._value ?? null,
 	})
 }
 
diff --git a/src/store/calendarObjectInstance.js b/src/store/calendarObjectInstance.js
index 3441672921..1a00091d8d 100644
--- a/src/store/calendarObjectInstance.js
+++ b/src/store/calendarObjectInstance.js
@@ -482,6 +482,17 @@ const mutations = {
 	removeAttendee(state, { calendarObjectInstance, attendee }) {
 		calendarObjectInstance.eventComponent.removeAttendee(attendee.attendeeProperty)
 
+		// Also remove members if attendee is a group
+		if (attendee.attendeeProperty.userType === 'GROUP') {
+			attendee.members.forEach(function(member) {
+				calendarObjectInstance.eventComponent.removeAttendee(member.attendeeProperty)
+				const index = calendarObjectInstance.attendees.indexOf(member)
+				if (index !== -1) {
+					calendarObjectInstance.attendees.splice(index, 1)
+				}
+			});
+		}
+
 		const index = calendarObjectInstance.attendees.indexOf(attendee)
 		if (index !== -1) {
 			calendarObjectInstance.attendees.splice(index, 1)