diff --git a/src/components/ReadOnlyContactDetails.vue b/src/components/ReadOnlyContactDetails.vue
new file mode 100644
index 000000000..da3cfe340
--- /dev/null
+++ b/src/components/ReadOnlyContactDetails.vue
@@ -0,0 +1,443 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<div>
+		<!-- nothing selected or contact not found -->
+		<EmptyContent v-if="!contact"
+			class="empty-content"
+			:name="t('mail', 'No data for this contact')"
+			:description="t('mail', 'No user selected or the user has no data on their profile')">
+			<template #icon>
+				<IconContact :size="20" />
+			</template>
+		</EmptyContent>
+
+		<div class="recipient-details-content">
+			<div class="contact-title">
+				<h6>
+					{{ contact.fullName }}
+				</h6>
+				<template v-if="isReadOnly">
+					<!-- Subtitle here -->
+					<span v-html="formattedSubtitle" />
+				</template>
+			</div>
+			<div v-if="!loadingData" class="contact-details-wrapper">
+				<div v-for="(properties, name) in groupedProperties"
+					:key="name">
+					<ContactDetailsProperty v-for="(property, index) in properties"
+						:key="`${index}-${contact.key}-${property.name}`"
+						:is-first-property="index===0"
+						:is-last-property="index === properties.length - 1"
+						:property="property"
+						:contact="contact"
+						:local-contact="localContact"
+						:contacts="contacts"
+						:is-read-only="isReadOnly"
+						:bus="bus" />
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { isMobile, NcEmptyContent as EmptyContent } from '@nextcloud/vue'
+import IconContact from 'vue-material-design-icons/AccountMultiple.vue'
+import mitt from 'mitt'
+import ContactDetailsProperty from './ContactDetails/ContactDetailsProperty.vue'
+import { loadState } from '@nextcloud/initial-state'
+import Contact from '../store/contacts.js'
+import rfcProps from '../models/rfcProps.js'
+import validate from '../services/validate.js'
+
+const { profileEnabled } = loadState('user_status', 'profileEnabled', false)
+
+export default {
+	name: 'ReadOnlyContactDetails',
+
+	components: {
+		ContactDetailsProperty,
+		EmptyContent,
+		IconContact,
+
+	},
+
+	mixins: [isMobile],
+
+	props: {
+		/* 		contactKey: {
+			type: String,
+			default: undefined,
+		}, */
+		reloadBus: {
+			type: Object,
+			required: true,
+		},
+		desc: {
+			type: String,
+			required: false,
+			default: '',
+		},
+		/* 		addressbooks: {
+			type: Object,
+			required: true,
+		}, */
+		contact: {
+			type: Contact,
+			required: true,
+		},
+		contacts: {
+			type: Array,
+			default: () => [],
+		},
+
+	},
+
+	data() {
+		return {
+			loadingData: false,
+			loadingUpdate: false,
+			// if true, the local contact have been fixed and requires a push
+			fixed: false,
+			contactDetailsSelector: '.contact-details',
+			excludeFromBirthdayKey: 'x-nc-exclude-from-birthday-calendar',
+
+			// communication for ContactDetailsAddNewProp and ContactDetailsProperty
+			bus: mitt(),
+			showMenuPopover: false,
+			profileEnabled,
+			localContact: undefined,
+			editMode: false,
+
+		}
+	},
+
+	computed: {
+		/**
+		 * Read-only representation of the contact title and organization.
+		 *
+		 * @return {string}
+		 */
+		formattedSubtitle() {
+			const title = this.contact.title
+			const organization = this.contact.org
+
+			if (title && organization) {
+				return t('contacts', '{title} at {organization}', {
+					title,
+					organization,
+				})
+			} else if (title) {
+				return title
+			} else if (organization) {
+				return organization
+			}
+
+			return ''
+		},
+		/* 		// store getter
+		addressbooks() {
+			return this.$store.getters.getAddressbooks
+		},
+		contact() {
+			return this.$store.getters.getContact(this.contactKey)
+		}, */
+		/**
+		 * Contact properties copied and sorted by rfcProps.fieldOrder
+		 *
+		 * @return {Array}
+		 */
+		sortedProperties() {
+			if (!this.localContact || !this.localContact.properties) {
+				return []
+			}
+			return this.localContact.properties
+				.slice(0)
+				.sort((a, b) => {
+					const nameA = a.name.split('.').pop()
+					const nameB = b.name.split('.').pop()
+					return rfcProps.fieldOrder.indexOf(nameA) - rfcProps.fieldOrder.indexOf(nameB)
+				})
+		},
+
+		/**
+		 * Contact properties filtered and grouped by rfcProps.fieldOrder
+		 *
+		 * @return {object}
+		 */
+		groupedProperties() {
+			if (!this.sortedProperties) {
+				return {}
+			}
+			return this.sortedProperties.reduce((list, property) => {
+				if (!this.canDisplay(property)) {
+					return list
+				}
+				if (!list[property.name]) {
+					list[property.name] = []
+				}
+				list[property.name].push(property)
+				return list
+			}, {})
+		},
+		/**
+		 * The address book is read-only (e.g. shared with me).
+		 *
+		 * @return {boolean}
+		 */
+		addressbookIsReadOnly() {
+			return this.contact.addressbook?.readOnly
+		},
+		isReadOnly() {
+			return this.addressbookIsReadOnly || !this.editMode
+		},
+
+		/* /!**
+		 * Fake model to use the propertySelect component
+		 *
+		 * @return {object}
+		 *!/
+		addressbookModel() {
+			return {
+				readableName: t('mail', 'Address book'),
+				icon: 'icon-address-book',
+				options: this.addressbooksOptions,
+			}
+		},
+		/!**
+		 * Store getters filtered and mapped to usable object
+		 * This is the list of addressbooks that are available
+		 *
+		 * @return {{id: string, name: string, readOnly: boolean}[]}
+		 *!/
+		addressbooksOptions() {
+			return this.addressbooks
+				.filter(addressbook => addressbook.enabled)
+				.map(addressbook => {
+					return {
+						id: addressbook.id,
+						name: addressbook.displayName,
+						readOnly: addressbook.readOnly,
+					}
+				})
+		},
+ */
+		/**
+		 * Usable addressbook object linked to the local contact
+		 *
+		 * @param {string} [addressbookId] set the addressbook id
+		 * @return {string}
+		 */
+		addressbook: {
+			get() {
+				return this.contact.addressbook.id
+			},
+			set(addressbookId) {
+				// Only move when the address book actually changed to prevent a conflict.
+				if (this.contact.addressbook.id !== addressbookId) {
+					this.moveContactToAddressbook(addressbookId)
+				}
+			},
+		},
+
+		/**
+		 * Fake model to use the propertyGroups component
+		 *
+		 * @return {object}
+		 */
+		groupsModel() {
+			return {
+				readableName: t('mail', 'Contact groups'),
+				icon: 'icon-contacts-dark',
+			}
+		},
+	},
+	watch: {
+		contact: {
+			handler(contact) {
+				this.updateLocalContact(contact)
+			},
+			immediate: true,
+		},
+	},
+	methods: {
+		updateGroups(value) {
+			this.newGroupsValue = value
+		},
+		/**
+		 * Send the local clone of contact to the store
+		 */
+		async updateContact() {
+			this.fixed = false
+			this.loadingUpdate = true
+			try {
+				await this.$store.dispatch('updateContact', this.localContact)
+			} finally {
+				this.loadingUpdate = false
+			}
+
+			// if we just created the contact, we need to force update the
+			// localContact to match the proper store contact
+			if (!this.localContact.dav) {
+				this.logger.debug('New contact synced!', { localContact: this.localContact })
+				// fetching newly created & storred contact
+				const contact = this.$store.getters.getContact(this.localContact.key)
+				await this.updateLocalContact(contact)
+			}
+		},
+		/**
+		 *  Update this.localContact and set this.fixed
+		 *
+		 * @param {Contact} contact the contact to clone
+		 */
+		async updateLocalContact(contact) {
+			// create empty contact and copy inner data
+			const localContact = Object.assign(
+				Object.create(Object.getPrototypeOf(contact)),
+				contact,
+			)
+			this.fixed = validate(localContact)
+
+			this.localContact = localContact
+			this.newGroupsValue = [...this.localContact.groups]
+		},
+		/**
+		 * Should display the property
+		 *
+		 * @param {Property} property the property to check
+		 * @return {boolean}
+		 */
+		canDisplay(property) {
+			// Make sure we have some model for the property and check for ITEM.PROP custom label format
+			const propModel = rfcProps.properties[property.name.split('.').pop()]
+
+			const propType = propModel && propModel.force
+				? propModel.force
+				: property.getDefaultType()
+
+			return propModel && propType !== 'unknown'
+		},
+
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+// List of all properties
+.contact-details-wrapper {
+	display: inline;
+	align-items: flex-start;
+	padding-bottom: 20px;
+	gap: 15px;
+	float: left;
+}
+@media only screen and (max-width: 600px) {
+	.contact-details-wrapper {
+		display: block;
+	}
+}
+
+section.contact-details {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+}
+
+#qrcode-modal {
+	:deep(.modal-container) {
+		display: flex;
+		padding: 10px;
+		background-color: #fff;
+		.qrcode {
+			max-width: 100%;
+		}
+	}
+}
+
+:deep(.v-select.select) {
+	min-width: 0;
+	flex: 1 auto;
+}
+
+:deep(.v-select.select .vs__selected-options), :deep(.vs__search) {
+	min-height: unset;
+	margin: 0 !important;
+}
+
+:deep(.vs__selected) {
+	height: calc(var(--default-clickable-area) - var(--default-grid-baseline)) !important;
+	margin: calc(var(--default-grid-baseline) / 2);
+}
+
+#pick-addressbook-modal {
+	:deep(.modal-container) {
+		display: flex;
+		overflow: visible;
+		flex-wrap: wrap;
+		justify-content: space-evenly;
+		margin-bottom: 20px;
+		padding: 10px;
+		background-color: #fff;
+		.multiselect {
+			flex: 1 1 100%;
+			width: 100%;
+			margin-bottom: 20px;
+		}
+	}
+}
+
+.action-item {
+	background-color: var(--color-primary-element-light);
+	border-radius: var(--border-radius-rounded);
+}
+
+:deep(.button-vue--vue-tertiary:hover),
+:deep(.button-vue--vue-tertiary:active) {
+	background-color: var(--color-primary-element-light-hover) !important;
+}
+
+.related-resources {
+	display:inline-grid;
+	margin-top: 88px;
+	flex-direction: column;
+	margin-bottom: -30px;
+}
+@media only screen and (max-width: 1600px) {
+	.related-resources {
+		float: left;
+		display: inline-grid;
+		margin-left: 80px;
+		flex-direction: column;
+		margin-bottom: 0;
+		margin-top: 40px;
+	}
+}
+
+.last-edit {
+	display: inline-flex;
+}
+// forcing the size only for contacts app to fit the text size of the contacts app
+:deep(.related-resources__header h5) {
+	font-size: medium;
+	opacity: .7;
+	color: var(--color-primary-element);
+}
+
+.address-book {
+	min-width: 260px !important;
+}
+
+.empty-content {
+	height: 100%;
+}
+.contact-title {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	margin-top: -10px;
+}
+</style>