diff --git a/src/components/BreakoutRoomsEditor/SendMessageDialog.vue b/src/components/BreakoutRoomsEditor/SendMessageDialog.vue
index ca78005ce81..50343f51056 100644
--- a/src/components/BreakoutRoomsEditor/SendMessageDialog.vue
+++ b/src/components/BreakoutRoomsEditor/SendMessageDialog.vue
@@ -4,32 +4,32 @@
 -->
 
 <template>
-	<NcModal ref="modal"
+	<NcDialog ref="modal"
+		:name="dialogTitle"
 		:container="container"
-		v-on="$listeners">
-		<div class="send-message-dialog">
-			<h2 class="send-message-dialog__title">
-				{{ dialogTitle }}
-			</h2>
-			<NewMessage v-if="modalContainerId"
-				:key="modalContainerId"
-				ref="newMessage"
-				role="region"
-				:token="token"
-				:container="modalContainerId"
-				:aria-label="t('spreed', 'Post message')"
-				:broadcast="broadcast"
-				@sent="handleMessageSent"
-				@failure="handleMessageFailure" />
-		</div>
-	</NcModal>
+		close-on-click-outside
+		size="normal"
+		v-on="$listeners"
+		@update:open="$emit('close')">
+		<NewMessage v-if="modalContainerId"
+			:key="modalContainerId"
+			ref="newMessage"
+			role="region"
+			class="send-message-dialog"
+			:token="token"
+			:container="modalContainerId"
+			:aria-label="t('spreed', 'Post message')"
+			:broadcast="broadcast"
+			@sent="handleMessageSent"
+			@failure="handleMessageFailure" />
+	</NcDialog>
 </template>
 
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { t } from '@nextcloud/l10n'
 
-import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 
 import NewMessage from '../NewMessage/NewMessage.vue'
 
@@ -37,7 +37,7 @@ export default {
 	name: 'SendMessageDialog',
 
 	components: {
-		NcModal,
+		NcDialog,
 		NewMessage,
 	},
 
@@ -91,7 +91,7 @@ export default {
 
 	mounted() {
 		// Postpone render of NewMessage until modal container is mounted
-		this.modalContainerId = `#modal-description-${this.$refs.modal.randId}`
+		this.modalContainerId = `#modal-description-${this.$refs.modal.navigationId}`
 		this.$nextTick(() => {
 			this.$refs.newMessage.focusInput()
 		})
@@ -117,10 +117,6 @@ export default {
 
 <style lang="scss" scoped>
 .send-message-dialog {
-	padding: 20px 20px 8px;
-
-	&__title {
-		margin-bottom: 8px;
-	}
+	padding-bottom: calc(3 * var(--default-grid-baseline));
 }
 </style>
diff --git a/src/components/ConversationSettings/BanSettings/BanSettings.vue b/src/components/ConversationSettings/BanSettings/BanSettings.vue
index cc40d448728..d7fa32f4bc0 100644
--- a/src/components/ConversationSettings/BanSettings/BanSettings.vue
+++ b/src/components/ConversationSettings/BanSettings/BanSettings.vue
@@ -15,14 +15,12 @@
 			{{ t('spreed', 'Manage bans') }}
 		</NcButton>
 
-		<NcModal v-if="modal"
-			container=".conversation-ban__settings"
-			@close="modal = false">
+		<NcDialog :name="t('spreed', 'Banned users')"
+			:open.sync="modal"
+			size="normal"
+			close-on-click-outside
+			container=".conversation-ban__settings">
 			<div class="conversation-ban__content">
-				<h2 class="conversation-ban__title">
-					{{ t('spreed', 'Banned users') }}
-				</h2>
-
 				<ul v-if="banList.length" class="conversation-ban__list">
 					<BannedItem v-for="ban in banList"
 						:key="ban.id"
@@ -41,7 +39,7 @@
 					</template>
 				</NcEmptyContent>
 			</div>
-		</NcModal>
+		</NcDialog>
 	</div>
 </template>
 
@@ -51,9 +49,9 @@ import AccountCancel from 'vue-material-design-icons/AccountCancel.vue'
 import { t } from '@nextcloud/l10n'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
-import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 
 import BannedItem from './BannedItem.vue'
 
@@ -64,9 +62,9 @@ export default {
 
 	components: {
 		NcButton,
+		NcDialog,
 		NcEmptyContent,
 		NcLoadingIcon,
-		NcModal,
 		BannedItem,
 		// Icons
 		AccountCancel,
@@ -116,11 +114,7 @@ export default {
 <style lang="scss" scoped>
 .conversation-ban {
 	&__content {
-		min-height: 250px;
-	}
-
-	&__title {
-		text-align: center;
+		min-height: 200px;
 	}
 
 	&__list {
diff --git a/src/components/LeftSidebar/InvitationHandler.vue b/src/components/LeftSidebar/InvitationHandler.vue
index 296482023fa..f0438d24574 100644
--- a/src/components/LeftSidebar/InvitationHandler.vue
+++ b/src/components/LeftSidebar/InvitationHandler.vue
@@ -4,13 +4,12 @@
 -->
 
 <template>
-	<NcModal v-if="modal"
+	<NcDialog :open.sync="modal"
+		:name="t('spreed', 'Pending invitations')"
 		:container="container"
-		@close="closeModal">
+		size="normal"
+		close-on-click-outside>
 		<div class="inbox">
-			<h2 class="inbox__heading">
-				{{ t('spreed', 'Pending invitations') }}
-			</h2>
 			<p class="inbox__disclaimer">
 				{{ t('spreed', 'Join conversations from remote Nextcloud servers') }}
 			</p>
@@ -62,10 +61,12 @@
 				</template>
 			</NcEmptyContent>
 		</div>
-	</NcModal>
+	</NcDialog>
 </template>
 
 <script>
+import { ref } from 'vue'
+
 import CancelIcon from 'vue-material-design-icons/Cancel.vue'
 import CheckIcon from 'vue-material-design-icons/Check.vue'
 import WebIcon from 'vue-material-design-icons/Web.vue'
@@ -73,9 +74,9 @@ import WebIcon from 'vue-material-design-icons/Web.vue'
 import { t } from '@nextcloud/l10n'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
-import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import NcRichText from '@nextcloud/vue/dist/Components/NcRichText.js'
 
 import ConversationIcon from '../ConversationIcon.vue'
@@ -88,12 +89,12 @@ export default {
 	name: 'InvitationHandler',
 
 	components: {
-		NcEmptyContent,
-		NcRichText,
 		ConversationIcon,
 		NcButton,
+		NcDialog,
+		NcEmptyContent,
 		NcLoadingIcon,
-		NcModal,
+		NcRichText,
 		// Icons
 		CancelIcon,
 		CheckIcon,
@@ -101,15 +102,13 @@ export default {
 	},
 
 	setup() {
-		return {
-			federationStore: useFederationStore(),
-		}
-	},
+		const modal = ref(false)
+		const isLoading = ref(true)
 
-	data() {
 		return {
-			modal: false,
-			isLoading: true,
+			federationStore: useFederationStore(),
+			modal,
+			isLoading,
 		}
 	},
 
@@ -188,11 +187,7 @@ export default {
 	width: 100%;
 	height: 100%;
 	max-height: 700px;
-	padding: 20px;
-
-	&__heading {
-		margin-bottom: 4px;
-	}
+	padding-bottom: calc(3 * var(--default-grid-baseline));
 
 	&__disclaimer {
 		margin-bottom: 12px;
diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index 6e7aad24077..99c2a1ac315 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -112,7 +112,7 @@
 				<CallPhoneDialog ref="callPhoneDialog" />
 
 				<!-- New Pending Invitations dialog -->
-				<InvitationHandler v-if="isFederationEnabled" ref="invitationHandler" />
+				<InvitationHandler v-if="pendingInvitationsCount" ref="invitationHandler" />
 			</div>
 			<NcAppNavigationItem v-if="pendingInvitationsCount"
 				class="invitation-button"
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/ReactionsList.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/ReactionsList.vue
index 2944758fc56..c19bd441c0b 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/ReactionsList.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/ReactionsList.vue
@@ -4,13 +4,11 @@
 -->
 
 <template>
-	<NcModal size="small"
+	<NcDialog :name="t('spreed', 'Reactions')"
 		:container="container"
-		@close="closeModal">
+		close-on-click-outside
+		@update:open="closeModal">
 		<div class="reactions__modal">
-			<h2>
-				{{ t('spreed', 'Reactions') }}
-			</h2>
 			<template v-if="Object.keys(reactionsOverview).length > 0">
 				<div class="reactions-list__navigation">
 					<NcButton v-for="reaction in reactionsMenu"
@@ -44,7 +42,7 @@
 			</template>
 			<NcLoadingIcon v-else :size="64" />
 		</div>
-	</NcModal>
+	</NcDialog>
 </template>
 
 <script>
@@ -53,8 +51,8 @@ import HeartOutlineIcon from 'vue-material-design-icons/HeartOutline.vue'
 import { t } from '@nextcloud/l10n'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
-import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 
 import AvatarWrapper from '../../../../AvatarWrapper/AvatarWrapper.vue'
 
@@ -67,9 +65,9 @@ export default {
 
 	components: {
 		AvatarWrapper,
-		NcModal,
-		NcLoadingIcon,
 		NcButton,
+		NcDialog,
+		NcLoadingIcon,
 		HeartOutlineIcon,
 	},
 
@@ -172,10 +170,11 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.reactions__modal{
+.reactions__modal {
 	min-height: 450px;
-	padding: 18px;
+	padding-bottom: calc(3 * var(--default-grid-baseline));
 }
+
 .reactions-list__navigation {
 	display: flex;
 	gap: 2px;
@@ -183,6 +182,7 @@ export default {
 
 	:deep(.button-vue) {
 		border-radius: var(--border-radius-large);
+
 		&.active {
 			background-color: var(--color-primary-element-light);
 		}
diff --git a/src/components/NewMessage/NewMessagePollEditor.vue b/src/components/NewMessage/NewMessagePollEditor.vue
index 1255c434c84..8a8b2214730 100644
--- a/src/components/NewMessage/NewMessagePollEditor.vue
+++ b/src/components/NewMessage/NewMessagePollEditor.vue
@@ -4,70 +4,67 @@
 -->
 
 <template>
-	<NcModal size="small"
+	<NcDialog :name="t('spreed', 'Create new poll')"
 		:close-on-click-outside="!isFilled"
 		:container="container"
-		v-on="$listeners">
-		<div class="poll-editor">
-			<h2>{{ t('spreed', 'Create new poll') }}</h2>
-
-			<!-- Poll Question -->
-			<p class="poll-editor__caption">
-				{{ t('spreed', 'Question') }}
-			</p>
-			<NcTextField :value.sync="pollQuestion" :label="t('spreed', 'Ask a question')" v-on="$listeners" />
-
-			<!-- Poll options -->
-			<p class="poll-editor__caption">
-				{{ t('spreed', 'Answers') }}
-			</p>
-			<div v-for="(option, index) in pollOptions"
-				:key="index"
-				class="poll-editor__option">
-				<NcTextField ref="pollOption"
-					:value.sync="pollOptions[index]"
-					:label="t('spreed', 'Answer {option}', {option: index + 1})" />
-				<NcButton v-if="pollOptions.length > 2"
-					type="tertiary"
-					:aria-label="t('spreed', 'Delete poll option')"
-					@click="deleteOption(index)">
-					<template #icon>
-						<Close :size="20" />
-					</template>
-				</NcButton>
-			</div>
-
-			<!-- Add options -->
-			<NcButton class="poll-editor__add-more" type="tertiary" @click="addOption">
+		v-on="$listeners"
+		@update:open="dismissEditor">
+		<!-- Poll Question -->
+		<p class="poll-editor__caption">
+			{{ t('spreed', 'Question') }}
+		</p>
+		<NcTextField :value.sync="pollQuestion" :label="t('spreed', 'Ask a question')" v-on="$listeners" />
+
+		<!-- Poll options -->
+		<p class="poll-editor__caption">
+			{{ t('spreed', 'Answers') }}
+		</p>
+		<div v-for="(option, index) in pollOptions"
+			:key="index"
+			class="poll-editor__option">
+			<NcTextField ref="pollOption"
+				:value.sync="pollOptions[index]"
+				:label="t('spreed', 'Answer {option}', {option: index + 1})" />
+			<NcButton v-if="pollOptions.length > 2"
+				type="tertiary"
+				:aria-label="t('spreed', 'Delete poll option')"
+				@click="deleteOption(index)">
 				<template #icon>
-					<Plus />
+					<Close :size="20" />
 				</template>
-				{{ t('spreed', 'Add answer') }}
 			</NcButton>
+		</div>
 
-			<!-- Poll settings -->
-			<p class="poll-editor__caption">
-				{{ t('spreed', 'Settings') }}
-			</p>
-			<div class="poll-editor__settings">
-				<NcCheckboxRadioSwitch :checked.sync="isPrivate" type="checkbox">
-					{{ t('spreed', 'Private poll') }}
-				</NcCheckboxRadioSwitch>
-				<NcCheckboxRadioSwitch :checked.sync="isMultipleAnswer" type="checkbox">
-					{{ t('spreed', 'Multiple answers') }}
-				</NcCheckboxRadioSwitch>
-			</div>
-			<div class="poll-editor__actions">
-				<NcButton type="tertiary" @click="dismissEditor">
-					{{ t('spreed', 'Dismiss') }}
-				</NcButton>
-				<!-- create poll button-->
-				<NcButton type="primary" @click="createPoll">
-					{{ t('spreed', 'Create poll') }}
-				</NcButton>
-			</div>
+		<!-- Add options -->
+		<NcButton class="poll-editor__add-more" type="tertiary" @click="addOption">
+			<template #icon>
+				<Plus />
+			</template>
+			{{ t('spreed', 'Add answer') }}
+		</NcButton>
+
+		<!-- Poll settings -->
+		<p class="poll-editor__caption">
+			{{ t('spreed', 'Settings') }}
+		</p>
+		<div class="poll-editor__settings">
+			<NcCheckboxRadioSwitch :checked.sync="isPrivate" type="checkbox">
+				{{ t('spreed', 'Private poll') }}
+			</NcCheckboxRadioSwitch>
+			<NcCheckboxRadioSwitch :checked.sync="isMultipleAnswer" type="checkbox">
+				{{ t('spreed', 'Multiple answers') }}
+			</NcCheckboxRadioSwitch>
 		</div>
-	</NcModal>
+		<template #actions>
+			<NcButton type="tertiary" @click="dismissEditor">
+				{{ t('spreed', 'Dismiss') }}
+			</NcButton>
+			<!-- create poll button-->
+			<NcButton type="primary" @click="createPoll">
+				{{ t('spreed', 'Create poll') }}
+			</NcButton>
+		</template>
+	</NcDialog>
 </template>
 
 <script>
@@ -78,7 +75,7 @@ import { t } from '@nextcloud/l10n'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
-import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
 import pollService from '../../services/pollService.js'
@@ -89,7 +86,7 @@ export default {
 	components: {
 		NcCheckboxRadioSwitch,
 		NcButton,
-		NcModal,
+		NcDialog,
 		NcTextField,
 		// Icons
 		Close,
@@ -168,11 +165,6 @@ export default {
 <style lang="scss" scoped>
 
 .poll-editor {
-	padding: 20px;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-
 	&__caption {
 		margin: calc(var(--default-grid-baseline) * 2) 0 var(--default-grid-baseline);
 		font-weight: bold;
@@ -193,11 +185,5 @@ export default {
 		gap: 4px;
 		margin-bottom: 8px;
 	}
-
-	&__actions {
-		display: flex;
-		justify-content: flex-end;
-		gap: 4px;
-	}
 }
 </style>