diff --git a/src/components/Editor/Resources/ResourceList.vue b/src/components/Editor/Resources/ResourceList.vue
index 8b62d56688..5c81d8dd78 100644
--- a/src/components/Editor/Resources/ResourceList.vue
+++ b/src/components/Editor/Resources/ResourceList.vue
@@ -4,238 +4,613 @@
 -->
 
 <template>
-	<div>
-		<span v-if="!(!resources.length && !suggestedRooms.length)" class="app-full-subtitle"> <MapMarker :size="20" /> {{ t('calendar', 'Resources') }}</span>
-
-		<ResourceListSearch
-			v-if="!isReadOnly && hasUserEmailAddress && resourceBookingEnabled"
-			:alreadyInvitedEmails="alreadyInvitedEmails"
-			:calendarObjectInstance="calendarObjectInstance"
-			@addResource="addResource" />
-
-		<div class="resource-list">
-			<ResourceListItem
-				v-for="resource in resources"
-				:key="resource.email"
-				:resource="resource"
-				:organizerDisplayName="organizerDisplayName"
-				:isViewedByOrganizer="isViewedByOrganizer"
-				@removeResource="removeResource" />
-
-			<ResourceListItem
-				v-for="room in suggestedRooms"
-				:key="room.email + '-suggested'"
-				:resource="room"
-				:organizerDisplayName="organizerDisplayName"
-				:isSuggestion="true"
-				:isViewedByOrganizer="isViewedByOrganizer"
-				@addSuggestion="addResource" />
+	<div class="resource-picker">
+		<span class="app-full-subtitle">
+			<MapMarker :size="20" />
+			{{ t('calendar', 'Rooms') }}
+		</span>
+
+		<!-- Search and filter -->
+		<div
+			v-if="!props.isReadOnly && hasUserEmailAddress && resourceBookingEnabled"
+			class="resource-picker__filters">
+			<NcTextField
+				v-model="filterText"
+				:placeholder="t('calendar', 'Search rooms\u2026')"
+				:showTrailingButton="filterText.length > 0"
+				trailingButtonIcon="close"
+				@trailingButtonClick="filterText = ''" />
+
+			<div class="resource-picker__filters__row">
+				<NcCheckboxRadioSwitch
+					v-model="filterAvailableOnly"
+					type="switch">
+					{{ t('calendar', 'Available only') }}
+				</NcCheckboxRadioSwitch>
+				<div class="resource-picker__capacity">
+					<label for="min-capacity">{{ t('calendar', 'Min.') }}</label>
+					<input
+						id="min-capacity"
+						v-model.number="filterMinCapacity"
+						type="number"
+						min="0"
+						:placeholder="t('calendar', 'pers.')"
+						class="resource-picker__capacity-input">
+				</div>
+			</div>
+
+			<!-- Building dropdown -->
+			<div v-if="buildingOptions.length > 0" class="resource-picker__field">
+				<label class="resource-picker__field-label" for="resource-picker-building">
+					{{ t('calendar', 'Building') }}
+				</label>
+				<NcSelect
+					v-model="selectedBuilding"
+					inputId="resource-picker-building"
+					:options="buildingOptions"
+					:placeholder="t('calendar', 'Any')"
+					:clearable="true"
+					label="label"
+					:reduce="(opt: { id: string }) => opt.id" />
+			</div>
+
+			<!-- Floor dropdown -->
+			<div v-if="floorOptions.length > 0" class="resource-picker__field">
+				<label class="resource-picker__field-label" for="resource-picker-floor">
+					{{ t('calendar', 'Floor') }}
+				</label>
+				<NcSelect
+					v-model="selectedFloor"
+					inputId="resource-picker-floor"
+					:options="floorOptions"
+					:placeholder="t('calendar', 'Any')"
+					:clearable="true"
+					label="label"
+					:reduce="(opt: { id: string }) => opt.id" />
+			</div>
+
+			<!-- Features multi-select -->
+			<div v-if="featureOptions.length > 0" class="resource-picker__field">
+				<label class="resource-picker__field-label" for="resource-picker-features">
+					{{ t('calendar', 'Features') }}
+				</label>
+				<NcSelect
+					v-model="selectedFeatures"
+					inputId="resource-picker-features"
+					:options="featureOptions"
+					:placeholder="t('calendar', 'Any')"
+					:multiple="true"
+					:keepOpen="true"
+					label="label"
+					:reduce="(opt: { id: string }) => opt.id" />
+			</div>
+		</div>
+
+		<!-- Loading state -->
+		<div v-if="isLoadingAvailability" class="resource-picker__loading">
+			<NcLoadingIcon :size="32" />
+		</div>
+
+		<!-- Grouped room list -->
+		<div v-else class="resource-picker__list">
+			<div
+				v-for="group in groupedRooms"
+				:key="group.name"
+				class="resource-picker__group">
+				<button
+					class="resource-picker__group-header"
+					@click="toggleGroup(group.name)">
+					<ChevronDown
+						v-if="expandedGroups[group.name]"
+						:size="20" />
+					<ChevronRight
+						v-else
+						:size="20" />
+					<span class="resource-picker__group-name">{{ group.name }}</span>
+					<span class="resource-picker__group-count">
+						{{ group.availableCount }}/{{ group.rooms.length }}
+					</span>
+				</button>
+				<div v-if="expandedGroups[group.name]" class="resource-picker__group-rooms">
+					<ResourceRoomCard
+						v-for="room in group.rooms"
+						:key="room.id"
+						:room="room"
+						:isAdded="isRoomAdded(room)"
+						:isReadOnly="props.isReadOnly"
+						:isViewedByOrganizer="isViewedByOrganizer"
+						:hasRoomSelected="resources.length > 0"
+						@addRoom="addResource"
+						@removeRoom="removeRoomByPrincipal" />
+				</div>
+			</div>
+
+			<p
+				v-if="totalFilteredCount === 0 && allRooms.length > 0"
+				class="resource-picker__empty">
+				{{ t('calendar', 'No rooms found') }}
+			</p>
+			<p
+				v-else-if="allRooms.length === 0 && !isLoadingAvailability"
+				class="resource-picker__empty">
+				{{ t('calendar', 'No rooms available') }}
+			</p>
 		</div>
 	</div>
 </template>
 
-<script>
+<script setup lang="ts">
+import type { RoomPrincipal } from '../../../model/principals.ts'
+
 import { loadState } from '@nextcloud/initial-state'
-import { mapStores } from 'pinia'
+import { t } from '@nextcloud/l10n'
+import { NcCheckboxRadioSwitch, NcLoadingIcon, NcSelect } from '@nextcloud/vue'
+import debounce from 'debounce'
+import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
+import NcTextField from '@nextcloud/vue/components/NcTextField'
+import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
+import ChevronRight from 'vue-material-design-icons/ChevronRight.vue'
 import MapMarker from 'vue-material-design-icons/MapMarker.vue'
-import ResourceListItem from './ResourceListItem.vue'
-import ResourceListSearch from './ResourceListSearch.vue'
-import { advancedPrincipalPropertySearch } from '../../../services/caldavService.js'
+import ResourceRoomCard from './ResourceRoomCard.vue'
+import { formatFacility } from '../../../models/resourceProps.js'
 import { checkResourceAvailability } from '../../../services/freeBusyService.js'
 import useCalendarObjectInstanceStore from '../../../store/calendarObjectInstance.js'
 import usePrincipalsStore from '../../../store/principals.js'
 import { organizerDisplayName, removeMailtoPrefix } from '../../../utils/attendee.js'
 import logger from '../../../utils/logger.js'
 
-export default {
-	name: 'ResourceList',
-	components: {
-		ResourceListItem,
-		ResourceListSearch,
-		MapMarker,
-	},
-
-	props: {
-		isReadOnly: {
-			type: Boolean,
-			required: true,
-		},
-
-		calendarObjectInstance: {
-			type: Object,
-			required: true,
-		},
-	},
-
-	data() {
-		return {
-			suggestedRooms: [],
-		}
-	},
-
-	computed: {
-		...mapStores(usePrincipalsStore, useCalendarObjectInstanceStore),
-		resources() {
-			return this.calendarObjectInstance.attendees.filter((attendee) => {
-				return ['ROOM', 'RESOURCE'].includes(attendee.attendeeProperty.userType)
-			})
-		},
-
-		attendees() {
-			return this.calendarObjectInstance.attendees.filter((attendee) => {
-				return !['RESOURCE', 'ROOM'].includes(attendee.attendeeProperty.userType)
-			})
-		},
-
-		noResourcesMessage() {
-			return this.$t('calendar', 'No rooms or resources yet')
-		},
-
-		isListEmpty() {
-			return this.resources.length === 0 && this.suggestedRooms.length === 0
-		},
-
-		alreadyInvitedEmails() {
-			return this.resources.map((attendee) => removeMailtoPrefix(attendee.uri))
-		},
-
-		organizerDisplayName() {
-			return organizerDisplayName(this.calendarObjectInstance.organizer)
-		},
-
-		hasUserEmailAddress() {
-			const emailAddress = this.principalsStore.getCurrentUserPrincipal?.emailAddress
-			return !!emailAddress
-		},
-
-		isViewedByOrganizer() {
-			if (!this.calendarObjectInstance.organizer) {
-				return true
-			}
+interface RoomGroup {
+	name: string
+	rooms: RoomPrincipal[]
+	availableCount: number
+}
+
+interface Attendee {
+	uri: string
+	attendeeProperty: { userType: string }
+}
 
-			const organizerEmail = removeMailtoPrefix(this.calendarObjectInstance.organizer.uri)
-			return organizerEmail === this.principalsStore.getCurrentUserPrincipalEmail
-		},
+interface CalendarObjectInstanceProp {
+	startDate: Date
+	endDate: Date
+	attendees: Attendee[]
+	organizer: { uri: string } | null
+	eventComponent: { startDate: object, endDate: object }
+}
 
-		resourceBookingEnabled() {
-			return loadState('calendar', 'resource_booking_enabled')
-		},
-	},
+interface AddRoomPayload {
+	commonName: string | null
+	email: string | null
+	calendarUserType: string
+	roomAddress: string | null
+	language?: string | null
+	timezoneId?: string | null
+}
 
-	watch: {
-		resources() {
-			if (this.isViewedByOrganizer) {
-				this.loadRoomSuggestions()
+const props = defineProps<{
+	isReadOnly: boolean
+	calendarObjectInstance: CalendarObjectInstanceProp
+}>()
+
+const principalsStore = usePrincipalsStore()
+const calendarObjectInstanceStore = useCalendarObjectInstanceStore()
+
+const resourceBookingEnabled = loadState<boolean>('calendar', 'resource_booking_enabled', false)
+
+// Reactive state
+const allRooms = ref<RoomPrincipal[]>([])
+const isLoadingAvailability = ref(false)
+const filterText = ref('')
+const filterAvailableOnly = ref(true)
+const filterMinCapacity = ref(0)
+const selectedBuilding = ref<string | null>(null)
+const selectedFloor = ref<string | null>(null)
+const selectedFeatures = ref<string[]>([])
+const expandedGroups = reactive<Record<string, boolean>>({})
+
+// Computed
+const resources = computed<Attendee[]>(() => {
+	return props.calendarObjectInstance.attendees.filter((attendee) => {
+		return ['ROOM', 'RESOURCE'].includes(attendee.attendeeProperty.userType)
+	})
+})
+
+const alreadyInvitedEmails = computed<string[]>(() => {
+	return resources.value.map((attendee) => removeMailtoPrefix(attendee.uri))
+})
+
+const hasUserEmailAddress = computed<boolean>(() => {
+	const emailAddress = principalsStore.getCurrentUserPrincipal?.emailAddress
+	return !!emailAddress
+})
+
+const isViewedByOrganizer = computed<boolean>(() => {
+	if (!props.calendarObjectInstance.organizer) {
+		return true
+	}
+	const organizerEmail = removeMailtoPrefix(props.calendarObjectInstance.organizer.uri)
+	return organizerEmail === principalsStore.getCurrentUserPrincipalEmail
+})
+
+const buildingOptions = computed<{ id: string, label: string }[]>(() => {
+	const buildings = new Set<string>()
+	for (const room of allRooms.value) {
+		const name = room.roomBuildingName
+		if (name) {
+			buildings.add(name)
+		}
+	}
+	return [...buildings].sort().map((id) => ({ id, label: id }))
+})
+
+const floorOptions = computed<{ id: string, label: string }[]>(() => {
+	const floors = new Set<string>()
+	for (const room of allRooms.value) {
+		const floor = room.roomFloor
+		if (floor) {
+			floors.add(floor)
+		}
+	}
+	return [...floors].sort((a, b) => a.localeCompare(b, undefined, { numeric: true })).map((id) => ({ id, label: id }))
+})
+
+const featureOptions = computed<{ id: string, label: string }[]>(() => {
+	const facilitySet = new Set<string>()
+	for (const room of allRooms.value) {
+		const features = room.roomFeatures?.split(',') ?? []
+		for (const f of features) {
+			const trimmed = f.trim()
+			if (trimmed) {
+				facilitySet.add(trimmed)
 			}
-		},
-	},
-
-	async mounted() {
-		if (this.isViewedByOrganizer) {
-			await this.loadRoomSuggestions()
-		}
-	},
-
-	methods: {
-		addResource({ commonName, email, calendarUserType, language, timezoneId, roomAddress }) {
-			this.calendarObjectInstanceStore.addAttendee({
-				calendarObjectInstance: this.calendarObjectInstance,
-				commonName,
-				uri: email,
-				calendarUserType,
-				participationStatus: 'NEEDS-ACTION',
-				role: 'REQ-PARTICIPANT',
-				rsvp: true,
-				language,
-				timezoneId,
-				organizer: this.principalsStore.getCurrentUserPrincipal,
-			})
-			this.updateLocation(roomAddress)
-		},
-
-		removeResource(resource) {
-			this.calendarObjectInstanceStore.removeAttendee({
-				calendarObjectInstance: this.calendarObjectInstance,
-				attendee: resource,
-			})
-		},
-
-		async loadRoomSuggestions() {
-			if (!this.resourceBookingEnabled) {
-				return
+		}
+	}
+	return [...facilitySet].sort().map((id) => ({
+		id,
+		label: formatFacility(id),
+	}))
+})
+
+const filteredRooms = computed<RoomPrincipal[]>(() => {
+	return allRooms.value.filter((room) => {
+		// Always show rooms that are already added to the event
+		if (isRoomAdded(room)) {
+			return true
+		}
+		// Text filter
+		if (filterText.value) {
+			const q = filterText.value.toLowerCase()
+			if (!room.displayname?.toLowerCase().includes(q)
+				&& !room.roomAddress?.toLowerCase().includes(q)
+				&& !room.roomBuildingAddress?.toLowerCase().includes(q)
+				&& !room.roomBuildingName?.toLowerCase().includes(q)
+				&& !room.roomNumber?.toLowerCase().includes(q)) {
+				return false
 			}
-
-			if (this.resources.length > 0) {
-				this.suggestedRooms = []
-				return
+		}
+		// Building filter
+		if (selectedBuilding.value) {
+			if ((room.roomBuildingName || '') !== selectedBuilding.value) {
+				return false
 			}
-
-			try {
-				logger.info('fetching suggestions for ' + this.attendees.length + ' attendees')
-				const query = {
-					capacity: this.attendees.length,
+		}
+		// Floor filter
+		if (selectedFloor.value) {
+			const floor = room.roomFloor
+			if ((floor || '') !== selectedFloor.value) {
+				return false
+			}
+		}
+		// Available filter
+		if (filterAvailableOnly.value && !room.isAvailable) {
+			return false
+		}
+		// Capacity filter
+		if (filterMinCapacity.value > 0) {
+			const cap = parseInt(room.roomSeatingCapacity as string) || 0
+			if (cap < filterMinCapacity.value) {
+				return false
+			}
+		}
+		// Facility filters (multi-select: all selected features must be present)
+		if (selectedFeatures.value.length > 0) {
+			const features = room.roomFeatures?.split(',').map((f) => f.trim()) ?? []
+			for (const required of selectedFeatures.value) {
+				if (!features.includes(required)) {
+					return false
 				}
-				const results = (await advancedPrincipalPropertySearch(query)).map((principal) => {
-					return {
-						commonName: principal.displayname,
-						email: principal.email,
-						calendarUserType: principal.calendarUserType,
-						displayName: principal.displayname ?? principal.email,
-						isAvailable: true,
-						roomAddress: principal.roomAddress,
-						uri: principal.email,
-						organizer: this.principalsStore.getCurrentUserPrincipal,
-					}
-				})
-
-				await checkResourceAvailability(
-					results,
-					this.principalsStore.getCurrentUserPrincipalEmail,
-					this.calendarObjectInstance.eventComponent.startDate,
-					this.calendarObjectInstance.eventComponent.endDate,
-				)
-				logger.debug('availability of room suggestions fetched', { results })
-
-				// Take the first three available options
-				this.suggestedRooms = results.filter((room) => room.isAvailable).slice(0, 3)
-			} catch (error) {
-				logger.error('Could not find resources', { error })
-				this.suggestedRooms = []
 			}
-		},
-
-		/**
-		 * Apply the location of the first resource to the event.
-		 * Has no effect if the location is already set or there are multiple resource.
-		 *
-		 * @param {string} location The location to apply
-		 */
-		updateLocation(location) {
-			if (this.calendarObjectInstance.location || this.calendarObjectInstance.eventComponent.location) {
-				return
+		}
+		return true
+	})
+})
+
+const sortedRooms = computed<RoomPrincipal[]>(() => {
+	return [...filteredRooms.value].sort((a, b) => {
+		// Booked rooms first
+		const aAdded = isRoomAdded(a) ? 0 : 1
+		const bAdded = isRoomAdded(b) ? 0 : 1
+		if (aAdded !== bAdded) {
+			return aAdded - bAdded
+		}
+
+		// Available before unavailable
+		const aAvail = a.isAvailable ? 0 : 1
+		const bAvail = b.isAvailable ? 0 : 1
+		if (aAvail !== bAvail) {
+			return aAvail - bAvail
+		}
+
+		// Alphabetically
+		return (a.displayname || '').localeCompare(b.displayname || '')
+	})
+})
+
+const groupedRooms = computed<RoomGroup[]>(() => {
+	const groups: Record<string, RoomGroup> = {}
+
+	for (const room of sortedRooms.value) {
+		const groupName = room.roomBuildingName || t('calendar', 'Other')
+		if (!groups[groupName]) {
+			groups[groupName] = { name: groupName, rooms: [], availableCount: 0 }
+		}
+		groups[groupName].rooms.push(room)
+		if (room.isAvailable) {
+			groups[groupName].availableCount++
+		}
+	}
+
+	// Sort groups: groups with added rooms first, then alphabetically
+	return Object.values(groups).sort((a, b) => {
+		const aHasAdded = a.rooms.some((r) => isRoomAdded(r)) ? 0 : 1
+		const bHasAdded = b.rooms.some((r) => isRoomAdded(r)) ? 0 : 1
+		if (aHasAdded !== bHasAdded) {
+			return aHasAdded - bHasAdded
+		}
+		return a.name.localeCompare(b.name)
+	})
+})
+
+const totalFilteredCount = computed<number>(() => {
+	return sortedRooms.value.length
+})
+
+// Methods
+function isRoomAdded(room: RoomPrincipal): boolean {
+	return alreadyInvitedEmails.value.includes(room.emailAddress as string)
+}
+
+function toggleGroup(groupName: string): void {
+	expandedGroups[groupName] = !expandedGroups[groupName]
+}
+
+async function loadAvailability(): Promise<void> {
+	if (allRooms.value.length === 0) {
+		return
+	}
+
+	const options = allRooms.value.map((r) => ({
+		email: r.emailAddress,
+		isAvailable: true,
+	}))
+
+	try {
+		await checkResourceAvailability(
+			options,
+			principalsStore.getCurrentUserPrincipalEmail,
+			props.calendarObjectInstance.eventComponent.startDate,
+			props.calendarObjectInstance.eventComponent.endDate,
+		)
+
+		for (let i = 0; i < allRooms.value.length; i++) {
+			const opt = options.find((o) => o.email === allRooms.value[i].emailAddress)
+			if (opt) {
+				allRooms.value[i] = { ...allRooms.value[i], isAvailable: opt.isAvailable }
 			}
+		}
+	} catch (error) {
+		logger.error('Could not check room availability', { error })
+	}
+}
+
+const debouncedLoadAvailability = debounce(loadAvailability, 500)
+
+async function loadAllRooms(): Promise<void> {
+	isLoadingAvailability.value = true
+
+	const roomPrincipals = principalsStore.getRoomPrincipals || []
+	allRooms.value = roomPrincipals.map((p: Record<string, unknown>) => ({
+		...p,
+		isAvailable: true,
+	} as RoomPrincipal))
 
-			if (this.resources.length !== 1) {
-				return
+	await loadAvailability()
+	isLoadingAvailability.value = false
+
+	// Initialize expanded groups after data is loaded
+	nextTick(() => {
+		const groups = groupedRooms.value
+		if (groups.length <= 3) {
+			for (const g of groups) {
+				expandedGroups[g.name] = true
 			}
+		} else if (groups.length > 0) {
+			expandedGroups[groups[0].name] = true
+		}
+	})
+}
+
+function addResource({ commonName, email, calendarUserType, language, timezoneId, roomAddress }: AddRoomPayload): void {
+	calendarObjectInstanceStore.addAttendee({
+		calendarObjectInstance: props.calendarObjectInstance,
+		commonName,
+		uri: email,
+		calendarUserType: calendarUserType || 'ROOM',
+		participationStatus: 'NEEDS-ACTION',
+		role: 'REQ-PARTICIPANT',
+		rsvp: true,
+		language,
+		timezoneId,
+		organizer: principalsStore.getCurrentUserPrincipal,
+	})
+	updateLocation(roomAddress)
+}
+
+function removeResource(resource: Attendee): void {
+	calendarObjectInstanceStore.removeAttendee({
+		calendarObjectInstance: props.calendarObjectInstance,
+		attendee: resource,
+	})
+}
+
+function removeRoomByPrincipal(room: RoomPrincipal): void {
+	const attendee = resources.value.find((a) => removeMailtoPrefix(a.uri) === room.emailAddress)
+	if (attendee) {
+		removeResource(attendee)
+	}
+}
 
-			this.calendarObjectInstanceStore.changeLocation({
-				calendarObjectInstance: this.calendarObjectInstance,
-				location,
-			})
-		},
-	},
+function updateLocation(location: string | null): void {
+	if (!location) {
+		return
+	}
+	calendarObjectInstanceStore.changeLocation({
+		calendarObjectInstance: props.calendarObjectInstance,
+		location,
+	})
 }
+
+// Watchers
+watch(() => props.calendarObjectInstance.startDate, debouncedLoadAvailability)
+watch(() => props.calendarObjectInstance.endDate, debouncedLoadAvailability)
+
+// Lifecycle
+onMounted(async () => {
+	if (resourceBookingEnabled && isViewedByOrganizer.value) {
+		await loadAllRooms()
+	}
+})
 </script>
 
 <style lang="scss" scoped>
-.resource-list {
-		margin-top: calc(var(--default-grid-baseline) * 4);
+.resource-picker {
+	display: flex;
+	flex-direction: column;
+	gap: calc(var(--default-grid-baseline) * 2);
+
+	&__filters {
+		display: flex;
+		flex-direction: column;
+		gap: calc(var(--default-grid-baseline) * 2);
+
+		&__row {
+			display: flex;
+			align-items: center;
+			gap: calc(var(--default-grid-baseline) * 3);
+		}
+	}
+
+	&__capacity {
+		display: flex;
+		align-items: center;
+		gap: var(--default-grid-baseline);
+		font-size: calc(var(--default-font-size) * 0.9);
+
+		label {
+			white-space: nowrap;
+			color: var(--color-text-maxcontrast);
+		}
+	}
+
+	&__capacity-input {
+		width: calc(var(--default-grid-baseline) * 16);
+		padding: var(--default-grid-baseline) calc(var(--default-grid-baseline) * 1.5);
+		border: 2px solid var(--color-border-maxcontrast);
+		border-radius: var(--border-radius);
+		background: var(--color-main-background);
+		color: var(--color-main-text);
+		font-size: calc(var(--default-font-size) * 0.9);
+
+		&:focus {
+			border-color: var(--color-primary-element);
+			outline: none;
+		}
+	}
+
+	&__field {
+		display: flex;
+		flex-direction: column;
+		gap: calc(var(--default-grid-baseline) / 2);
+	}
+
+	&__field-label {
+		font-size: calc(var(--default-font-size) * 0.9);
+		color: var(--color-text-maxcontrast);
+	}
+
+	&__loading {
+		display: flex;
+		justify-content: center;
+		padding: calc(var(--default-grid-baseline) * 4);
+	}
+
+	&__list {
+		display: flex;
+		flex-direction: column;
+		max-height: calc(var(--default-grid-baseline) * 100);
+		overflow-y: auto;
+	}
+
+	&__group {
+		&-header {
+			display: flex;
+			align-items: center;
+			gap: var(--default-grid-baseline);
+			width: 100%;
+			padding: calc(var(--default-grid-baseline) * 1.5) var(--default-grid-baseline);
+			border: none;
+			background: none;
+			cursor: pointer;
+			font-size: calc(var(--default-font-size) * 0.9);
+			font-weight: 600;
+			color: var(--color-text-maxcontrast);
+
+			&:hover {
+				color: var(--color-main-text);
+			}
+		}
+
+		&-name {
+			flex: 1;
+			text-align: start;
+		}
+
+		&-count {
+			font-weight: normal;
+			font-size: calc(var(--default-font-size) * 0.8);
+			color: var(--color-text-maxcontrast);
+		}
+
+		&-rooms {
+			display: flex;
+			flex-direction: column;
+			gap: var(--default-grid-baseline);
+			padding-inline-start: calc(var(--default-grid-baseline) * 2);
+			padding-bottom: var(--default-grid-baseline);
+		}
+	}
+
+	&__empty {
+		text-align: center;
+		color: var(--color-text-maxcontrast);
+		padding: calc(var(--default-grid-baseline) * 4);
+	}
 }
 
 .app-full-subtitle {
 	font-size: calc(var(--default-font-size) * 1.2);
 	display: flex;
-	gap: calc(var(--default-grid-baseline) * 4);
+	align-items: center;
+	gap: calc(var(--default-grid-baseline) * 2);
 }
 </style>
diff --git a/src/components/Editor/Resources/ResourceListItem.vue b/src/components/Editor/Resources/ResourceListItem.vue
deleted file mode 100644
index a2564a45ac..0000000000
--- a/src/components/Editor/Resources/ResourceListItem.vue
+++ /dev/null
@@ -1,309 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-
-<template>
-	<div class="resource-list-item">
-		<AvatarParticipationStatus
-			:attendeeIsOrganizer="false"
-			:isViewedByOrganizer="isViewedByOrganizer"
-			:isResource="true"
-			:isSuggestion="isSuggestion"
-			:participationStatus="participationStatus"
-			:scheduleStatus="scheduleStatus"
-			:organizerDisplayName="organizerDisplayName"
-			:commonName="commonName" />
-		<div class="resource-list-item__displayname">
-			{{ commonName }}
-		</div>
-		<div class="resource-list-item__actions">
-			<Actions v-if="isViewedByOrganizer && isSuggestion">
-				<ActionButton @click="addSuggestion">
-					<template #icon>
-						<Plus :size="20" decorative />
-					</template>
-					{{ $t('calendar', 'Add resource') }}
-				</ActionButton>
-			</actions>
-			<Actions v-else-if="isViewedByOrganizer">
-				<ActionCaption
-					v-if="seatingCapacity"
-					:name="seatingCapacity" />
-				<ActionCaption
-					v-if="roomType"
-					:name="roomType" />
-				<ActionCaption
-					v-if="hasProjector"
-					:name="$t('calendar', 'Has a projector')" />
-				<ActionCaption
-					v-if="hasWhiteboard"
-					:name="$t('calendar', 'Has a whiteboard')" />
-				<ActionCaption
-					v-if="isAccessible"
-					:name="$t('calendar', 'Wheelchair accessible')" />
-				<ActionSeparator v-if="seatingCapacity || roomType || hasProjector || hasWhiteboard || isAccessible" />
-				<ActionButton
-					v-if="principal"
-					:closeAfterClick="true"
-					@click="showAvailabilityModal = true">
-					<template #icon>
-						<CalendarSearch :size="20" decorative />
-					</template>
-					{{ $t('calendar', 'Check availability') }}
-				</ActionButton>
-				<ActionButton @click="removeResource">
-					<template #icon>
-						<Delete :size="20" decorative />
-					</template>
-					{{ $t('calendar', 'Remove resource') }}
-				</ActionButton>
-			</actions>
-		</div>
-		<RoomAvailabilityModal
-			v-if="showAvailabilityModal"
-			:show="showAvailabilityModal"
-			:startDate="calendarObjectInstance.startDate"
-			:endDate="calendarObjectInstance.endDate"
-			:rooms="[roomPrincipal]"
-			:organizer="currentUserPrincipalAsAttendee"
-			@update:show="(value) => { showAvailabilityModal = value }" />
-	</div>
-</template>
-
-<script>
-import {
-	NcActionButton as ActionButton,
-	NcActionCaption as ActionCaption,
-	NcActions as Actions,
-	NcActionSeparator as ActionSeparator,
-} from '@nextcloud/vue'
-import { mapStores } from 'pinia'
-import CalendarSearch from 'vue-material-design-icons/CalendarSearch.vue'
-import Plus from 'vue-material-design-icons/Plus.vue'
-import Delete from 'vue-material-design-icons/TrashCanOutline.vue'
-import AvatarParticipationStatus from '../AvatarParticipationStatus.vue'
-import RoomAvailabilityModal from '../FreeBusy/RoomAvailabilityModal.vue'
-import { mapPrincipalObjectToAttendeeObject } from '../../../models/attendee.js'
-import { formatRoomType } from '../../../models/resourceProps.js'
-import { principalPropertySearchByDisplaynameOrEmail } from '../../../services/caldavService.js'
-import useCalendarObjectInstanceStore from '../../../store/calendarObjectInstance.js'
-import usePrincipalsStore from '../../../store/principals.js'
-import { removeMailtoPrefix } from '../../../utils/attendee.js'
-import logger from '../../../utils/logger.js'
-
-export default {
-	name: 'ResourceListItem',
-	components: {
-		AvatarParticipationStatus,
-		ActionButton,
-		ActionCaption,
-		ActionSeparator,
-		Actions,
-		CalendarSearch,
-		Delete,
-		Plus,
-		RoomAvailabilityModal,
-	},
-
-	props: {
-		resource: {
-			type: Object,
-			required: true,
-		},
-
-		organizerDisplayName: {
-			type: String,
-			required: true,
-		},
-
-		isSuggestion: {
-			type: Boolean,
-			default: false,
-		},
-
-		isViewedByOrganizer: {
-			type: Boolean,
-			default: false,
-		},
-	},
-
-	emits: ['addSuggestion', 'removeResource'],
-
-	data() {
-		return {
-			principal: null,
-			showAvailabilityModal: false,
-		}
-	},
-
-	computed: {
-		...mapStores(usePrincipalsStore, useCalendarObjectInstanceStore),
-		calendarObjectInstance() {
-			return this.calendarObjectInstanceStore.calendarObjectInstance
-		},
-
-		/**
-		 * The room principal in the shape expected by the availability modal.
-		 * The principal property search returns raw cdav principals where the
-		 * email address is stored in email rather than emailAddress.
-		 *
-		 * @return {?object}
-		 */
-		roomPrincipal() {
-			if (!this.principal) {
-				return null
-			}
-
-			return {
-				displayname: this.principal.displayname,
-				emailAddress: this.principal.email,
-				calendarUserType: this.principal.calendarUserType,
-			}
-		},
-
-		/**
-		 * Return the current user principal as an ORGANIZER attendee object
-		 *
-		 * @return {object}
-		 */
-		currentUserPrincipalAsAttendee() {
-			return mapPrincipalObjectToAttendeeObject(
-				this.principalsStore.getCurrentUserPrincipal,
-				true,
-			)
-		},
-
-		commonName() {
-			if (this.resource.commonName) {
-				return this.resource.commonName
-			}
-
-			if (this.resource.uri) {
-				return removeMailtoPrefix(this.resource.uri)
-			}
-
-			return this.resource.uri
-		},
-
-		isAccessible() {
-			return this.hasFeature('WHEELCHAIR-ACCESSIBLE')
-		},
-
-		hasProjector() {
-			return this.hasFeature('PROJECTOR')
-		},
-
-		hasWhiteboard() {
-			return this.hasFeature('WHITEBOARD')
-		},
-
-		seatingCapacity() {
-			const seatingCapacity = this.principal?.roomSeatingCapacity
-			if (!seatingCapacity) {
-				return null
-			}
-
-			return this.$n(
-				'calendar',
-				'{seatingCapacity} seat',
-				'{seatingCapacity} seats',
-				seatingCapacity,
-				{
-					seatingCapacity,
-				},
-			)
-		},
-
-		roomType() {
-			const roomType = this.principal?.roomType
-			return formatRoomType(roomType) ?? roomType
-		},
-
-		participationStatus() {
-			if (this.isSuggestion) {
-				return ''
-			}
-
-			return this.resource.participationStatus
-		},
-
-		scheduleStatus() {
-			return this.resource.attendeeProperty?.getParameterFirstValue('SCHEDULE-STATUS') ?? ''
-		},
-	},
-
-	watch: {
-		async resource() {
-			await this.fetchPrincipal()
-		},
-	},
-
-	async mounted() {
-		await this.fetchPrincipal()
-	},
-
-	methods: {
-		/**
-		 * Add this suggestions to the event
-		 */
-		addSuggestion() {
-			this.$emit('addSuggestion', this.resource)
-		},
-
-		/**
-		 * Removes a resource from the event
-		 */
-		removeResource() {
-			this.$emit('removeResource', this.resource)
-		},
-
-		/**
-		 * Check if this resource has a feature
-		 *
-		 * @param {string} feature The name of the feature
-		 * @return {boolean} True if this resource has the given feature
-		 */
-		hasFeature(feature) {
-			const features = this.principal?.roomFeatures?.split(',') ?? []
-			return !!features.find((featureToCheck) => featureToCheck === feature)
-		},
-
-		/**
-		 * Try to fetch the principal belonging to this resource
-		 */
-		async fetchPrincipal() {
-			const uri = removeMailtoPrefix(this.resource.uri)
-			let principals = await principalPropertySearchByDisplaynameOrEmail(uri)
-			principals = principals.filter((principal) => removeMailtoPrefix(principal.email) === uri)
-			if (principals.length === 0) {
-				logger.debug('No principal for resource found', {
-					uri: this.resource.uri,
-				})
-				this.principal = null
-				return
-			} else if (principals.length > 1) {
-				logger.debug('More than one principal for resource found', {
-					uri: this.resource.uri,
-					principals,
-				})
-			}
-
-			this.principal = principals[0]
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-.resource-list-item__displayname {
-	margin-bottom: 17px;
-	text-overflow: ellipsis;
-	overflow: hidden;
-	white-space: nowrap;
-}
-
-.avatar-participation-status {
-	margin-top: 5px;
-}
-</style>
diff --git a/src/components/Editor/Resources/ResourceListSearch.vue b/src/components/Editor/Resources/ResourceListSearch.vue
deleted file mode 100644
index 4b331fa0eb..0000000000
--- a/src/components/Editor/Resources/ResourceListSearch.vue
+++ /dev/null
@@ -1,294 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-
-<template>
-	<div class="resource-search">
-		<NcButton class="button availability" @click="openRoomAvailability">
-			{{ $t('calendar', 'Show all rooms') }}
-		</NcButton>
-
-		<RoomAvailabilityList
-			v-if="showRoomAvailabilityModal"
-			:showDialog="showRoomAvailabilityModal"
-			:calendarObjectInstance="calendarObjectInstance"
-			@update:showDialog="setShowRoomAvailabilityModal" />
-		<NcSelect
-			v-model="selectedResource"
-			class="resource-search__multiselect"
-			:options="matches"
-			:searchable="true"
-			:max-height="600"
-			:placeholder="placeholder"
-			:ariaLabelCombobox="$t('calendar', 'Search for resources')"
-			:class="{ showContent: inputGiven, 'icon-loading': isLoading }"
-			inputId="resource-search-email"
-			label="displayName"
-			:clearable="false"
-			@search="findResources">
-			<template #option="option">
-				<div class="resource-search-list-item">
-					<Avatar
-						:disableTooltip="true"
-						:displayName="option.displayName" />
-					<div class="resource-search-list-item__label resource-search-list-item__label--single-email">
-						<div>
-							{{ option.displayName }}
-							<span
-								v-if="!isAvailable"
-								class="resource-search-list-item__label__availability">
-								({{ formatAvailability(option.isAvailable) }})
-							</span>
-						</div>
-						<div :name="option.subLine">
-							{{ option.subLine }}
-						</div>
-					</div>
-				</div>
-			</template>
-		</NcSelect>
-
-		<template>
-			<div class="resource-search__capacity">
-				<ResourceSeatingCapacity v-model="capacity" />
-				<Actions class="resource-search__capacity__actions">
-					<ActionCheckbox v-model="isAvailable">
-						<!-- Translators room or resource is not yet booked -->
-						{{ $t('calendar', 'Available') }}
-					</ActionCheckbox>
-					<ActionCheckbox v-model="hasProjector">
-						{{ $t('calendar', 'Projector') }}
-					</ActionCheckbox>
-					<ActionCheckbox v-model="hasWhiteboard">
-						{{ $t('calendar', 'Whiteboard') }}
-					</ActionCheckbox>
-					<ActionCheckbox v-model="isAccessible">
-						{{ $t('calendar', 'Wheelchair accessible') }}
-					</ActionCheckbox>
-				</Actions>
-			</div>
-			<ResourceRoomType v-model="roomType" />
-		</template>
-	</div>
-</template>
-
-<script>
-import {
-	NcActionCheckbox as ActionCheckbox,
-	NcActions as Actions,
-	NcAvatar as Avatar,
-	NcButton,
-	NcSelect,
-} from '@nextcloud/vue'
-import debounce from 'debounce'
-import { mapStores } from 'pinia'
-import RoomAvailabilityList from '../FreeBusy/RoomAvailabilityList.vue'
-import ResourceRoomType from './ResourceRoomType.vue'
-import ResourceSeatingCapacity from './ResourceSeatingCapacity.vue'
-import { advancedPrincipalPropertySearch } from '../../../services/caldavService.js'
-import { checkResourceAvailability } from '../../../services/freeBusyService.js'
-import usePrincipalsStore from '../../../store/principals.js'
-import logger from '../../../utils/logger.js'
-export default {
-	name: 'ResourceListSearch',
-	components: {
-		RoomAvailabilityList,
-		Avatar,
-		NcButton,
-		NcSelect,
-		ResourceSeatingCapacity,
-		Actions,
-		ActionCheckbox,
-		ResourceRoomType,
-	},
-
-	props: {
-		alreadyInvitedEmails: {
-			type: Array,
-			required: true,
-		},
-
-		calendarObjectInstance: {
-			type: Object,
-			required: true,
-		},
-	},
-
-	emits: ['addResource'],
-
-	data() {
-		return {
-			isLoading: false,
-			inputGiven: false,
-			matches: [],
-			capacity: NaN,
-			roomType: '',
-			isAvailable: true,
-			isAccessible: false,
-			hasProjector: false,
-			hasWhiteboard: false,
-			showRoomAvailabilityModal: false,
-			selectedResource: null,
-			rooms: [],
-		}
-	},
-
-	computed: {
-		...mapStores(usePrincipalsStore),
-		placeholder() {
-			return this.$t('calendar', 'Search for resources or rooms')
-		},
-
-		noResult() {
-			return this.$t('calendar', 'No match found')
-		},
-
-		features() {
-			const features = []
-			if (this.isAccessible) {
-				features.push('WHEELCHAIR-ACCESSIBLE')
-			}
-			if (this.hasProjector) {
-				features.push('PROJECTOR')
-			}
-			if (this.hasWhiteboard) {
-				features.push('WHITEBOARD')
-			}
-			return features
-		},
-	},
-
-	watch: {
-		selectedResource(selectedValue) {
-			if (!selectedValue) {
-				return
-			}
-
-			this.addResource(selectedValue)
-			this.selectedResource = null
-		},
-	},
-
-	methods: {
-		openRoomAvailability() {
-			this.showRoomAvailabilityModal = true
-		},
-
-		setShowRoomAvailabilityModal(value) {
-			this.showRoomAvailabilityModal = value
-		},
-
-		findResources: debounce(async function(query) {
-			this.isLoading = true
-			let matches = []
-
-			if (query.length > 0) {
-				matches = await this.findResourcesFromDAV(query)
-				this.isLoading = false
-				this.inputGiven = true
-			} else {
-				this.inputGiven = false
-				this.isLoading = false
-			}
-
-			this.matches = matches
-		}, 500),
-
-		addResource(selectedValue) {
-			this.$emit('addResource', selectedValue)
-		},
-
-		async findResourcesFromDAV(input) {
-			let results
-			try {
-				const query = { displayName: input }
-				query.capacity = this.capacity
-				query.features = this.features
-				query.roomType = this.roomType
-				results = await advancedPrincipalPropertySearch(query)
-			} catch (error) {
-				logger.debug('Could not find resources', { error })
-				return []
-			}
-
-			// Build options
-			let options = results
-				.filter((principal) => {
-					if (!principal.email) {
-						return false
-					}
-
-					if (this.alreadyInvitedEmails.includes(principal.email)) {
-						return false
-					}
-
-					// Only include resources and rooms
-					if (!['RESOURCE', 'ROOM'].includes(principal.calendarUserType)) {
-						return false
-					}
-
-					return true
-				})
-				.map((principal) => {
-					const subLineData = []
-					if (principal.roomSeatingCapacity) {
-						subLineData.push(this.$n('calendar', '{seatingCapacity} seat', '{seatingCapacity} seats', principal.roomSeatingCapacity, {
-							seatingCapacity: principal.roomSeatingCapacity,
-						}))
-					}
-					if (principal.roomAddress) {
-						subLineData.push(principal.roomAddress)
-					}
-
-					return {
-						commonName: principal.displayname,
-						email: principal.email,
-						calendarUserType: principal.calendarUserType,
-						displayName: principal.displayname ?? principal.email,
-						subLine: subLineData.join(' - '),
-						isAvailable: true,
-						roomAddress: principal.roomAddress,
-					}
-				})
-
-			// Check resource availability
-			await checkResourceAvailability(
-				options,
-				this.principalsStore.getCurrentUserPrincipalEmail,
-				this.calendarObjectInstance.eventComponent.startDate,
-				this.calendarObjectInstance.eventComponent.endDate,
-			)
-
-			// Filter by availability
-			if (this.isAvailable) {
-				options = options.filter((option) => option.isAvailable)
-			}
-
-			return options
-		},
-
-		/**
-		 * Format availability of a search result
-		 *
-		 * @param {boolean} isAvailable The availability state
-		 * @return {string} Human readable and localized availability
-		 */
-		formatAvailability(isAvailable) {
-			if (isAvailable) {
-				// TRANSLATORS room or resource is available due to not being booked yet
-				return this.$t('calendar', 'available')
-			}
-
-			// TRANSLATORS room or resource is unavailable due to it being already booked
-			return this.$t('calendar', 'unavailable')
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-.button.availability {
-      margin-bottom: 8px;
-}
-</style>
diff --git a/src/components/Editor/Resources/ResourceRoomCard.vue b/src/components/Editor/Resources/ResourceRoomCard.vue
new file mode 100644
index 0000000000..91946de0c8
--- /dev/null
+++ b/src/components/Editor/Resources/ResourceRoomCard.vue
@@ -0,0 +1,191 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<div
+		class="room-card"
+		:class="{
+			'room-card--added': props.isAdded,
+			'room-card--unavailable': !props.room.isAvailable && !props.isAdded,
+		}"
+		:title="props.room.roomBuildingAddress || ''">
+		<div class="room-card__row">
+			<div class="room-card__info">
+				<span class="room-card__name">{{ props.room.displayname }}</span>
+				<span class="room-card__meta">
+					<span
+						class="room-card__status"
+						:class="statusClass">
+						{{ statusLabel }}
+					</span>
+					<template v-if="props.room.roomSeatingCapacity">
+						&middot; {{ props.room.roomSeatingCapacity }}p
+					</template>
+					<template v-if="subLocation">
+						&middot; {{ subLocation }}
+					</template>
+					<template v-if="roomTypeLabel">
+						&middot; {{ roomTypeLabel }}
+					</template>
+				</span>
+			</div>
+			<NcButton
+				v-if="props.isViewedByOrganizer && !props.isReadOnly && (props.isAdded || (props.room.isAvailable && !props.hasRoomSelected))"
+				:variant="props.isAdded ? 'tertiary' : 'secondary'"
+				class="room-card__action"
+				@click="toggleRoom">
+				<template #icon>
+					<Minus v-if="props.isAdded" :size="20" />
+					<Plus v-else :size="20" />
+				</template>
+			</NcButton>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { RoomPrincipal } from '../../../model/principals.ts'
+
+import { t } from '@nextcloud/l10n'
+import { NcButton } from '@nextcloud/vue'
+import { computed } from 'vue'
+import Minus from 'vue-material-design-icons/Minus.vue'
+import Plus from 'vue-material-design-icons/Plus.vue'
+import { formatRoomType } from '../../../models/resourceProps.js'
+
+interface AddRoomPayload {
+	commonName: string | null
+	email: string | null
+	calendarUserType: string
+	roomAddress: string | null
+}
+
+const props = withDefaults(defineProps<{
+	room: RoomPrincipal
+	isAdded?: boolean
+	isReadOnly?: boolean
+	isViewedByOrganizer?: boolean
+	hasRoomSelected?: boolean
+}>(), {
+	isAdded: false,
+	isReadOnly: false,
+	isViewedByOrganizer: false,
+	hasRoomSelected: false,
+})
+
+const emit = defineEmits<{
+	removeRoom: [room: RoomPrincipal]
+	addRoom: [payload: AddRoomPayload]
+}>()
+
+const statusLabel = computed<string>(() => {
+	if (props.isAdded) {
+		return t('calendar', 'Reserved')
+	}
+	return props.room.isAvailable
+		? t('calendar', 'Available')
+		: t('calendar', 'Unavailable')
+})
+
+const statusClass = computed<string>(() => {
+	if (props.isAdded) {
+		return 'room-card__status--reserved'
+	}
+	return props.room.isAvailable
+		? 'room-card__status--free'
+		: 'room-card__status--busy'
+})
+
+const subLocation = computed<string>(() => {
+	return props.room.roomNumber || ''
+})
+
+const roomTypeLabel = computed<string>(() => {
+	const type = props.room.roomType
+	if (!type || type === 'meeting-room') {
+		return ''
+	}
+	return formatRoomType(type) ?? type
+})
+
+function toggleRoom(): void {
+	if (props.isAdded) {
+		emit('removeRoom', props.room)
+	} else {
+		emit('addRoom', {
+			commonName: props.room.displayname,
+			email: props.room.emailAddress,
+			calendarUserType: props.room.calendarUserType,
+			roomAddress: props.room.roomAddress,
+		})
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.room-card {
+	padding: calc(var(--default-grid-baseline) * 1.5) calc(var(--default-grid-baseline) * 2.5);
+	border-radius: var(--border-radius-large);
+	border: 1px solid var(--color-border);
+	background: var(--color-main-background);
+
+	&--added {
+		border-inline-start: 3px solid var(--color-primary);
+		background: var(--color-primary-element-light);
+	}
+
+	&--unavailable:not(.room-card--added) {
+		opacity: 0.55;
+	}
+
+	&__row {
+		display: flex;
+		align-items: center;
+		gap: calc(var(--default-grid-baseline) * 2);
+	}
+
+	&__info {
+		flex: 1;
+		min-width: 0;
+	}
+
+	&__name {
+		display: block;
+		font-weight: 500;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		line-height: 1.3;
+	}
+
+	&__meta {
+		display: block;
+		font-size: calc(var(--default-font-size) * 0.85);
+		color: var(--color-text-maxcontrast);
+		line-height: 1.3;
+	}
+
+	&__status {
+		&--free {
+			color: var(--color-success-text);
+			font-weight: 600;
+		}
+
+		&--busy {
+			color: var(--color-error-text);
+			font-weight: 600;
+		}
+
+		&--reserved {
+			color: var(--color-primary-element);
+			font-weight: 600;
+		}
+	}
+
+	&__action {
+		flex-shrink: 0;
+	}
+}
+</style>
diff --git a/src/models/principal.js b/src/models/principal.js
index 1e50eaeed5..fe4cddd8aa 100644
--- a/src/models/principal.js
+++ b/src/models/principal.js
@@ -50,6 +50,14 @@ function getDefaultPrincipalObject(props) {
 		principalId: null,
 		// The url of the default calendar for invitations
 		scheduleDefaultCalendarUrl: null,
+		// Room-specific properties (only for calendar-rooms)
+		roomSeatingCapacity: null,
+		roomType: null,
+		roomAddress: null,
+		roomFeatures: null,
+		roomBuildingName: null,
+		roomBuildingAddress: null,
+		roomNumber: null,
 		...props,
 	}
 }
@@ -91,6 +99,38 @@ function mapDavToPrincipal(dav) {
 	const url = dav.principalUrl
 	const userId = dav.userId
 
+	// Extract room-specific properties from DAV object, trimming string values defensively
+	const roomSeatingCapacity = dav.roomSeatingCapacity ?? null
+	const roomType = (dav.roomType ?? '').toString().trim() || null
+	const roomFeatures = (dav.roomFeatures ?? '').toString().trim() || null
+	// Strip leading/trailing whitespace and commas from building address to handle empty
+	// building-name fields, e.g. ", Science Park 140, 1098 XG, Amsterdam" → "Science Park 140, 1098 XG, Amsterdam"
+	const rawBuildingAddress = dav.roomBuildingAddress ?? null
+	const roomBuildingAddress = rawBuildingAddress
+		? rawBuildingAddress.replace(/^[\s,]+|[\s,]+$/g, '').trim() || null
+		: null
+	// Derive building name from address (everything before first comma): "Poppodium, Kerkstraat 10" → "Poppodium"
+	const roomBuildingName = roomBuildingAddress ? roomBuildingAddress.split(',')[0].trim() || null : null
+	// Room number (floor.room format, e.g. "2.17") is stored in room-building-room-number
+	const roomNumber = (dav.roomBuildingRoomNumber ?? '').toString().trim() || null
+
+	// Construct roomAddress for event LOCATION field from available properties
+	// Format: "Street (Building, Room X.XX)" — street-first for map/navigation apps
+	let roomAddress = null
+	if (roomBuildingAddress) {
+		const commaIdx = roomBuildingAddress.indexOf(',')
+		if (commaIdx > 0) {
+			const building = roomBuildingAddress.substring(0, commaIdx).trim()
+			const street = roomBuildingAddress.substring(commaIdx + 1).trim()
+			const detail = roomNumber ? building + ', Room ' + roomNumber : building
+			roomAddress = street + ' (' + detail + ')'
+		} else {
+			roomAddress = roomNumber
+				? roomBuildingAddress + ' (Room ' + roomNumber + ')'
+				: roomBuildingAddress
+		}
+	}
+
 	return getDefaultPrincipalObject({
 		id,
 		calendarUserType,
@@ -107,6 +147,13 @@ function mapDavToPrincipal(dav) {
 		principalId,
 		userId,
 		scheduleDefaultCalendarUrl,
+		roomSeatingCapacity,
+		roomType,
+		roomAddress,
+		roomFeatures,
+		roomBuildingName,
+		roomBuildingAddress,
+		roomNumber,
 	})
 }
 
diff --git a/src/models/principal.ts b/src/models/principal.ts
new file mode 100644
index 0000000000..ca7f0c41a6
--- /dev/null
+++ b/src/models/principal.ts
@@ -0,0 +1,15 @@
+export interface RoomPrincipal {
+	id: string | null
+	displayname: string | null
+	emailAddress: string | null
+	calendarUserType: string
+	isAvailable: boolean
+	roomSeatingCapacity: string | null
+	roomType: string | null
+	roomAddress: string | null
+	roomFeatures: string | null
+	roomNumber: string | null
+	roomFloor: string | null
+	roomBuildingName: string | null
+	roomBuildingAddress: string | null
+}
diff --git a/src/models/resourceProps.js b/src/models/resourceProps.js
index 4e11b46b1a..1c72e46360 100644
--- a/src/models/resourceProps.js
+++ b/src/models/resourceProps.js
@@ -13,7 +13,12 @@ import { translate as t } from '@nextcloud/l10n'
 export function getAllRoomTypes() {
 	return [
 		{ value: 'meeting-room', label: t('calendar', 'Meeting room') },
+		{ value: 'board-room', label: t('calendar', 'Board room') },
+		{ value: 'conference-room', label: t('calendar', 'Conference room') },
 		{ value: 'lecture-hall', label: t('calendar', 'Lecture hall') },
+		{ value: 'rehearsal-room', label: t('calendar', 'Rehearsal room') },
+		{ value: 'studio', label: t('calendar', 'Studio') },
+		{ value: 'outdoor-area', label: t('calendar', 'Outdoor area') },
 		{ value: 'seminar-room', label: t('calendar', 'Seminar room') },
 		{ value: 'other', label: t('calendar', 'Other') },
 	]
@@ -29,3 +34,35 @@ export function formatRoomType(value) {
 	const option = getAllRoomTypes().find((option) => option.value === value)
 	return option?.label ?? null
 }
+
+/**
+ * Short labels for known facility types.
+ * Evaluated lazily (inside a function) so that t() is not called at module-import
+ * time, which would break test mocks.
+ *
+ * @return {object}
+ */
+function getFacilityLabels() {
+	return {
+		projector: t('calendar', 'Projector'),
+		beamer: t('calendar', 'Projector'),
+		whiteboard: t('calendar', 'Whiteboard'),
+		video_conference: t('calendar', 'Video'),
+		videoconference: t('calendar', 'Video'),
+		wheelchair_accessible: t('calendar', 'Wheelchair accessible'),
+		'wheelchair-accessible': t('calendar', 'Wheelchair accessible'),
+		audio: t('calendar', 'Audio'),
+		display: t('calendar', 'Display'),
+	}
+}
+
+/**
+ * Get a human-readable label for a facility
+ *
+ * @param {string} facility The facility identifier
+ * @return {string}
+ */
+export function formatFacility(facility) {
+	const lower = facility.toLowerCase().trim()
+	return getFacilityLabels()[lower] || facility.charAt(0).toUpperCase() + facility.slice(1)
+}
diff --git a/tests/javascript/unit/models/principal.test.js b/tests/javascript/unit/models/principal.test.js
index 12d65a3769..5d333dfc12 100644
--- a/tests/javascript/unit/models/principal.test.js
+++ b/tests/javascript/unit/models/principal.test.js
@@ -23,6 +23,13 @@ describe('Test suite: Principal model (models/principal.js)', () => {
 			isCalendarRoom: false,
 			principalId: null,
 			scheduleDefaultCalendarUrl: null,
+			roomSeatingCapacity: null,
+			roomType: null,
+			roomAddress: null,
+			roomFeatures: null,
+			roomBuildingName: null,
+			roomBuildingAddress: null,
+			roomNumber: null,
 		})
 	})
 
@@ -47,6 +54,13 @@ describe('Test suite: Principal model (models/principal.js)', () => {
 			principalId: 'bar',
 			otherProp: 'foo',
 			scheduleDefaultCalendarUrl: null,
+			roomSeatingCapacity: null,
+			roomType: null,
+			roomAddress: null,
+			roomFeatures: null,
+			roomBuildingName: null,
+			roomBuildingAddress: null,
+			roomNumber: null,
 		})
 	})
 
@@ -81,6 +95,13 @@ describe('Test suite: Principal model (models/principal.js)', () => {
 			isCalendarRoom: false,
 			principalId: 'jane.doe',
 			userId: 'legacy-jane-doe-uid',
+			roomSeatingCapacity: null,
+			roomType: null,
+			roomAddress: null,
+			roomFeatures: null,
+			roomBuildingName: null,
+			roomBuildingAddress: null,
+			roomNumber: null,
 		})
 	})
 
@@ -115,6 +136,13 @@ describe('Test suite: Principal model (models/principal.js)', () => {
 			isCalendarRoom: false,
 			principalId: 'jane.doe',
 			userId: null,
+			roomSeatingCapacity: null,
+			roomType: null,
+			roomAddress: null,
+			roomFeatures: null,
+			roomBuildingName: null,
+			roomBuildingAddress: null,
+			roomNumber: null,
 		})
 	})
 
@@ -149,6 +177,13 @@ describe('Test suite: Principal model (models/principal.js)', () => {
 			isCalendarRoom: false,
 			principalId: 'CGAH82BAS285H',
 			userId: null,
+			roomSeatingCapacity: null,
+			roomType: null,
+			roomAddress: null,
+			roomFeatures: null,
+			roomBuildingName: null,
+			roomBuildingAddress: null,
+			roomNumber: null,
 		})
 	})
 
@@ -183,6 +218,13 @@ describe('Test suite: Principal model (models/principal.js)', () => {
 			isCalendarRoom: false,
 			principalId: 'projector-123',
 			userId: null,
+			roomSeatingCapacity: null,
+			roomType: null,
+			roomAddress: null,
+			roomFeatures: null,
+			roomBuildingName: null,
+			roomBuildingAddress: null,
+			roomNumber: null,
 		})
 	})
 
@@ -217,9 +259,90 @@ describe('Test suite: Principal model (models/principal.js)', () => {
 			isCalendarRoom: true,
 			principalId: 'room-123',
 			userId: null,
+			roomSeatingCapacity: null,
+			roomType: null,
+			roomAddress: null,
+			roomFeatures: null,
+			roomBuildingName: null,
+			roomBuildingAddress: null,
+			roomNumber: null,
 		})
 	})
 
+	it('should properly map a calendar-room-principal with room properties', () => {
+		const dav = {
+			addressBookHomes: undefined,
+			calendarHomes: [],
+			calendarUserAddressSet: [],
+			calendarUserType: 'ROOM',
+			displayname: 'Conference Room A',
+			email: 'conf-a@example.com',
+			principalScheme: 'principal:principals/calendar-rooms/conf-a',
+			principalUrl: '/remote.php/dav/principals/calendar-rooms/conf-a/',
+			scheduleInbox: null,
+			scheduleOutbox: null,
+			url: '/remote.php/dav/principals/calendar-rooms/conf-a/',
+			userId: null,
+			roomSeatingCapacity: 20,
+			roomType: 'conference-room',
+			roomFeatures: 'PROJECTOR,WHITEBOARD',
+			roomBuildingAddress: 'Building A, Main Street 1',
+			roomBuildingRoomNumber: '2.17',
+		}
+
+		expect(mapDavToPrincipal(dav)).toEqual({
+			id: 'L3JlbW90ZS5waHAvZGF2L3ByaW5jaXBhbHMvY2FsZW5kYXItcm9vbXMvY29uZi1hLw==',
+			dav,
+			calendarUserType: 'ROOM',
+			principalScheme: 'principal:principals/calendar-rooms/conf-a',
+			emailAddress: 'conf-a@example.com',
+			displayname: 'Conference Room A',
+			url: '/remote.php/dav/principals/calendar-rooms/conf-a/',
+			isUser: false,
+			isGroup: false,
+			isCircle: false,
+			isCalendarResource: false,
+			isCalendarRoom: true,
+			principalId: 'conf-a',
+			userId: null,
+			roomSeatingCapacity: 20,
+			roomType: 'conference-room',
+			roomFeatures: 'PROJECTOR,WHITEBOARD',
+			roomBuildingName: 'Building A',
+			roomBuildingAddress: 'Building A, Main Street 1',
+			roomNumber: '2.17',
+			roomAddress: 'Main Street 1 (Building A, Room 2.17)',
+		})
+	})
+
+	it('should strip leading commas and whitespace from roomBuildingAddress', () => {
+		const dav = {
+			addressBookHomes: undefined,
+			calendarHomes: [],
+			calendarUserAddressSet: [],
+			calendarUserType: 'ROOM',
+			displayname: 'AMS 0.11',
+			email: 'ams-011@example.com',
+			principalScheme: 'principal:principals/calendar-rooms/ams-011',
+			principalUrl: '/remote.php/dav/principals/calendar-rooms/ams-011/',
+			scheduleInbox: null,
+			scheduleOutbox: null,
+			url: '/remote.php/dav/principals/calendar-rooms/ams-011/',
+			userId: null,
+			roomSeatingCapacity: 1,
+			roomType: 'meeting-room',
+			roomFeatures: '  ',
+			roomBuildingAddress: ', Science Park 140, 1098 XG, Amsterdam',
+			roomBuildingRoomNumber: '0.11',
+		}
+
+		const result = mapDavToPrincipal(dav)
+		expect(result.roomBuildingAddress).toBe('Science Park 140, 1098 XG, Amsterdam')
+		expect(result.roomBuildingName).toBe('Science Park 140')
+		expect(result.roomFeatures).toBe(null)
+		expect(result.roomAddress).toBe('1098 XG, Amsterdam (Science Park 140, Room 0.11)')
+	})
+
 	it('should properly map a principal from an unknown backend to principal-object', () => {
 		const dav = {
 			addressBookHomes: undefined,
@@ -251,6 +374,13 @@ describe('Test suite: Principal model (models/principal.js)', () => {
 			isCalendarRoom: false,
 			principalId: null,
 			userId: null,
+			roomSeatingCapacity: null,
+			roomType: null,
+			roomAddress: null,
+			roomFeatures: null,
+			roomBuildingName: null,
+			roomBuildingAddress: null,
+			roomNumber: null,
 		})
 	})
 })