diff --git a/package-lock.json b/package-lock.json
index aab2caf5f65..099b676b0c3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,7 @@
 				"@nextcloud/moment": "^1.2.1",
 				"@nextcloud/paths": "^2.1.0",
 				"@nextcloud/router": "^2.0.0",
-				"@nextcloud/vue": "^7.1.0-beta.0",
+				"@nextcloud/vue": "^7.1.0-beta.1",
 				"@nextcloud/vue-dashboard": "^2.0.1",
 				"@nextcloud/vue-richtext": "^2.0.3",
 				"attachmediastream": "^2.1.0",
@@ -3390,9 +3390,9 @@
 			}
 		},
 		"node_modules/@nextcloud/vue": {
-			"version": "7.1.0-beta.0",
-			"resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-7.1.0-beta.0.tgz",
-			"integrity": "sha512-Xv0A7C3xEvU4iEQ2BwUcXc1aCbspgx32pWFW7qEOpzBesOBvZmC+lKtTE+FYIkd7cUbYtBF7+9nNiLCs0zhB7w==",
+			"version": "7.1.0-beta.1",
+			"resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-7.1.0-beta.1.tgz",
+			"integrity": "sha512-Z3iYkOEjhPpUouYkmchyWcP2c60jJsaDJ4ILew41HY+1QMV9KKyjDhAIDeRy12sgycafwqlcgzuuKFdEUU47Xw==",
 			"dependencies": {
 				"@nextcloud/auth": "^2.0.0",
 				"@nextcloud/axios": "^2.0.0",
@@ -3406,7 +3406,7 @@
 				"@nextcloud/logger": "^2.2.1",
 				"@nextcloud/router": "^2.0.0",
 				"debounce": "1.2.1",
-				"emoji-mart-vue-fast": "^11.1.1",
+				"emoji-mart-vue-fast": "^12.0.1",
 				"escape-html": "^1.0.3",
 				"floating-vue": "^1.0.0-beta.18",
 				"focus-trap": "^7.1.0",
@@ -3688,6 +3688,18 @@
 				"url": "https://github.com/chalk/ansi-regex?sponsor=1"
 			}
 		},
+		"node_modules/@nextcloud/vue/node_modules/emoji-mart-vue-fast": {
+			"version": "12.0.1",
+			"resolved": "https://registry.npmjs.org/emoji-mart-vue-fast/-/emoji-mart-vue-fast-12.0.1.tgz",
+			"integrity": "sha512-qO8F9aduHwPGEU2U1YobOH3lRXEMvrjej6KdhGMnSoMJ+OFSmNf+pUal/MbrEn0RUy+Uqc7U9sPopA+3ipK4+g==",
+			"dependencies": {
+				"@babel/runtime": "^7.18.6",
+				"core-js": "^3.23.5"
+			},
+			"peerDependencies": {
+				"vue": ">2.0.0"
+			}
+		},
 		"node_modules/@nextcloud/vue/node_modules/linkify-string": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/linkify-string/-/linkify-string-4.0.0.tgz",
@@ -24272,9 +24284,9 @@
 			}
 		},
 		"@nextcloud/vue": {
-			"version": "7.1.0-beta.0",
-			"resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-7.1.0-beta.0.tgz",
-			"integrity": "sha512-Xv0A7C3xEvU4iEQ2BwUcXc1aCbspgx32pWFW7qEOpzBesOBvZmC+lKtTE+FYIkd7cUbYtBF7+9nNiLCs0zhB7w==",
+			"version": "7.1.0-beta.1",
+			"resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-7.1.0-beta.1.tgz",
+			"integrity": "sha512-Z3iYkOEjhPpUouYkmchyWcP2c60jJsaDJ4ILew41HY+1QMV9KKyjDhAIDeRy12sgycafwqlcgzuuKFdEUU47Xw==",
 			"requires": {
 				"@nextcloud/auth": "^2.0.0",
 				"@nextcloud/axios": "^2.0.0",
@@ -24288,7 +24300,7 @@
 				"@nextcloud/logger": "^2.2.1",
 				"@nextcloud/router": "^2.0.0",
 				"debounce": "1.2.1",
-				"emoji-mart-vue-fast": "^11.1.1",
+				"emoji-mart-vue-fast": "^12.0.1",
 				"escape-html": "^1.0.3",
 				"floating-vue": "^1.0.0-beta.18",
 				"focus-trap": "^7.1.0",
@@ -24326,6 +24338,15 @@
 					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
 					"integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA=="
 				},
+				"emoji-mart-vue-fast": {
+					"version": "12.0.1",
+					"resolved": "https://registry.npmjs.org/emoji-mart-vue-fast/-/emoji-mart-vue-fast-12.0.1.tgz",
+					"integrity": "sha512-qO8F9aduHwPGEU2U1YobOH3lRXEMvrjej6KdhGMnSoMJ+OFSmNf+pUal/MbrEn0RUy+Uqc7U9sPopA+3ipK4+g==",
+					"requires": {
+						"@babel/runtime": "^7.18.6",
+						"core-js": "^3.23.5"
+					}
+				},
 				"linkify-string": {
 					"version": "4.0.0",
 					"resolved": "https://registry.npmjs.org/linkify-string/-/linkify-string-4.0.0.tgz",
diff --git a/package.json b/package.json
index 3f2cf96ba04..b2524cadee3 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
 		"@nextcloud/moment": "^1.2.1",
 		"@nextcloud/paths": "^2.1.0",
 		"@nextcloud/router": "^2.0.0",
-		"@nextcloud/vue": "^7.1.0-beta.0",
+		"@nextcloud/vue": "^7.1.0-beta.1",
 		"@nextcloud/vue-dashboard": "^2.0.1",
 		"@nextcloud/vue-richtext": "^2.0.3",
 		"attachmediastream": "^2.1.0",
diff --git a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
index 9ff46aa243b..d6c87e153ae 100644
--- a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
+++ b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
@@ -45,17 +45,23 @@
 					<template v-if="page === 0">
 						<SetConversationName v-model="conversationNameInput"
 							@click-enter="handleEnter" />
-						<NcCheckboxRadioSwitch :checked.sync="isPublic">
+						<NcCheckboxRadioSwitch :checked.sync="isPublic"
+							type="switch">
 							{{ t('spreed', 'Allow guests to join via link') }}
 						</NcCheckboxRadioSwitch>
 						<!-- Password protection -->
 						<template v-if="isPublic">
 							<NcCheckboxRadioSwitch :checked.sync="passwordProtect"
+								type="switch"
 								@checked="handleCheckboxInput">
 								{{ t('spreed', 'Password protect') }}
 							</NcCheckboxRadioSwitch>
-							<PasswordProtect v-if="passwordProtect"
-								v-model="password" />
+							<NcPasswordField v-if="passwordProtect"
+								autocomplete="new-password"
+								:check-password-strength="true"
+								:label-visible="true"
+								:label="t('spreed', 'Enter password')"
+								:value.sync="password" />
 						</template>
 						<ListableSettings v-model="listable" />
 					</template>
@@ -120,6 +126,7 @@
 import { CONVERSATION } from '../../../constants.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+import NcPasswordField from '@nextcloud/vue/dist/Components/NcPasswordField.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import SetContacts from './SetContacts/SetContacts.vue'
@@ -132,7 +139,6 @@ import {
 	setConversationPassword,
 } from '../../../services/conversationsService.js'
 import { generateUrl } from '@nextcloud/router'
-import PasswordProtect from './PasswordProtect/PasswordProtect.vue'
 import ListableSettings from '../../ConversationSettings/ListableSettings.vue'
 import isInCall from '../../../mixins/isInCall.js'
 import participant from '../../../mixins/participant.js'
@@ -149,12 +155,12 @@ export default {
 
 	components: {
 		NcModal,
+		NcPasswordField,
 		SetContacts,
 		SetConversationName,
 		NcButton,
 		NcCheckboxRadioSwitch,
 		Confirmation,
-		PasswordProtect,
 		ListableSettings,
 		Plus,
 	},
diff --git a/src/components/LeftSidebar/NewGroupConversation/PasswordProtect/PasswordProtect.vue b/src/components/LeftSidebar/NewGroupConversation/PasswordProtect/PasswordProtect.vue
deleted file mode 100644
index 2b3936f93ec..00000000000
--- a/src/components/LeftSidebar/NewGroupConversation/PasswordProtect/PasswordProtect.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<!--
-  - @copyright Copyright (c) 2020 Marco Ambrosini <marcoambrosini@icloud.com>
-  -
-  - @author Marco Ambrosini <marcoambrosini@icloud.com>
-  -
-  - @license GNU AGPL version 3 or any later version
-  -
-  - 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>
-	<input ref="password"
-		v-observe-visibility="visibilityChanged"
-		v-tooltip.bottom="reason"
-		type="password"
-		autocomplete="new-password"
-		:value="value"
-		class="password-protect"
-		:class="{'weak-password': validPassword === false}"
-		:placeholder="t('spreed', 'Choose a password')"
-		:aria-label="reason"
-		@input="handleInput">
-</template>
-
-<script>
-
-import { validatePassword } from '../../../../services/conversationsService.js'
-import debounce from 'debounce'
-
-export default {
-	name: 'PasswordProtect',
-
-	props: {
-		value: {
-			type: String,
-			required: true,
-		},
-	},
-
-	data() {
-		return {
-			validPassword: null,
-			reason: '',
-		}
-	},
-
-	methods: {
-		handleInput(event) {
-			this.$emit('input', event.target.value)
-			if (event.target.value !== '') {
-				this.debounceValidatePassword()
-			}
-		},
-
-		debounceValidatePassword: debounce(function() {
-			this.validatePassword()
-		}, 250),
-
-		async validatePassword() {
-			try {
-				const response = await validatePassword(this.value)
-				this.validPassword = response.data.ocs.data.passed
-				if (!this.validPassword) {
-					this.reason = response.data.ocs.data.reason
-				} else {
-					this.reason = ''
-				}
-			} catch (e) {
-				console.debug('Password policy app seems not enabled')
-				this.validPassword = null
-				this.reason = ''
-			}
-		},
-
-		visibilityChanged(isVisible) {
-			if (isVisible) {
-				// Focus the input field of the current component.
-				this.$refs.password.focus()
-			}
-		},
-	},
-
-}
-
-</script>
-
-<style lang="scss" scoped>
-
-.password-protect {
-	width: calc(100% - 18px);
-	margin-left: 18px;
-
-	&.weak-password {
-		background-color: var(--color-error) !important;
-		border-color: var(--color-error) !important;
-		color: #fff !important;
-	}
-}
-</style>