diff --git a/src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue b/src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue
index 137ce255c22..2548aba4281 100644
--- a/src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue
+++ b/src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue
@@ -30,12 +30,13 @@
 			<template v-if="!isEditingParticipants">
 				<div class="breakout-rooms-editor__main">
 					<label class="breakout-rooms-editor__caption" for="room-number">{{ t('spreed', 'Number of breakout rooms') }} </label>
-					<input id="room-number"
-						v-model.number="amount"
+					<NcInputField id="room-number"
+						:value="amount.toString()"
 						class="breakout-rooms-editor__number-input"
 						type="number"
 						min="1"
-						max="20">
+						max="20"
+						@update:value="setAmount" />
 
 					<label class="breakout-rooms-editor__caption">{{ t('spreed', 'Assignment method') }}</label>
 					<fieldset>
@@ -82,6 +83,7 @@
 <script>
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import NcInputField from '@nextcloud/vue/dist/Components/NcInputField.js'
 import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 
 import BreakoutRoomsParticipantsEditor from './BreakoutRoomsParticipantsEditor.vue'
@@ -90,10 +92,11 @@ export default {
 	name: 'BreakoutRoomsEditor',
 
 	components: {
-		NcModal,
-		NcCheckboxRadioSwitch,
-		NcButton,
 		BreakoutRoomsParticipantsEditor,
+		NcButton,
+		NcCheckboxRadioSwitch,
+		NcInputField,
+		NcModal,
 	},
 
 	props: {
@@ -137,6 +140,12 @@ export default {
 				console.debug(error)
 			}
 		},
+
+		// FIXME upstream: support of value type as Number should be added to NcInputField,
+		// now it breaks validation. Another option: Create NcNumberField component
+		setAmount(value) {
+			this.amount = parseFloat(value)
+		},
 	},
 }
 </script>
diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue
index 6006085537f..523d8f78842 100644
--- a/src/components/NewMessageForm/NewMessageForm.vue
+++ b/src/components/NewMessageForm/NewMessageForm.vue
@@ -844,7 +844,7 @@ export default {
 
 		// Focus and select the text within the input field
 		focusTextDialogInput() {
-			// this.$refs.textFileTitleInput.$refs.inputField.$refs.input.focus()
+			// FIXME upstream: add support of native input methods: focus, select, etc
 			this.$refs.textFileTitleInput.$refs.inputField.$refs.input.select()
 		},
 
diff --git a/src/components/SetGuestUsername.vue b/src/components/SetGuestUsername.vue
index c7c81eed9ad..9a0635a3569 100644
--- a/src/components/SetGuestUsername.vue
+++ b/src/components/SetGuestUsername.vue
@@ -20,43 +20,39 @@
 -->
 
 <template>
-	<!-- Guest username setting form -->
-	<form class="username-form"
-		@submit.prevent="handleChooseUserName">
+	<div class="username-form">
 		<!-- eslint-disable-next-line vue/no-v-html -->
 		<h3 v-html="displayNameLabel" />
-		<NcButton @click.prevent="handleEditUsername">
+
+		<NcButton v-if="!isEditingUsername"
+			@click.prevent="handleEditUsername">
 			{{ t('spreed', 'Edit') }}
 			<template #icon>
 				<Pencil :size="20" />
 			</template>
 		</NcButton>
-		<div v-if="isEditingUsername"
-			class="username-form__wrapper">
-			<input ref="usernameInput"
-				v-model="guestUserName"
-				:placeholder="t('spreed', 'Guest')"
-				class="username-form__input"
-				type="text"
-				@keydown.enter="handleChooseUserName"
-				@keydown.esc="isEditingUsername = !isEditingUsername">
-			<NcButton class="username-form__button"
-				native-type="submit"
-				:aria-label="t('spreed', 'Save name')"
-				type="tertiary">
-				<template #icon>
-					<ArrowRight :size="20" />
-				</template>
-			</NcButton>
-		</div>
-	</form>
+
+		<NcTextField v-else
+			ref="usernameInput"
+			:value.sync="guestUserName"
+			:placeholder="t('spreed', 'Guest')"
+			class="username-form__input"
+			:show-trailing-button="!!guestUserName"
+			trailing-button-icon="arrowRight"
+			:trailing-button-label="t('spreed', 'Save name')"
+			@trailing-button-click="handleChooseUserName"
+			@keydown.enter="handleChooseUserName"
+			@keydown.esc="handleEditUsername" />
+	</div>
 </template>
 
 <script>
-import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
+import escapeHtml from 'escape-html'
+
 import Pencil from 'vue-material-design-icons/Pencil.vue'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
 import { setGuestUserName } from '../services/participantsService.js'
 
@@ -65,8 +61,8 @@ export default {
 
 	components: {
 		NcButton,
+		NcTextField,
 		Pencil,
-		ArrowRight,
 	},
 
 	data() {
@@ -79,12 +75,12 @@ export default {
 
 	computed: {
 		actorDisplayName() {
-			return this.$store.getters.getDisplayName()
+			return this.$store.getters.getDisplayName() || t('spreed', 'Guest')
 		},
 		displayNameLabel() {
-			return t('spreed', 'Display name: <strong>{name}</strong>', {
-				name: this.actorDisplayName ? this.actorDisplayName : t('spreed', 'Guest'),
-			})
+			return t('spreed', 'Display name: {name}', {
+				name: `<strong>${escapeHtml(this.actorDisplayName)}</strong>`,
+			}, undefined, { escape: false })
 		},
 		actorId() {
 			return this.$store.getters.getActorId()
@@ -107,7 +103,7 @@ export default {
 	mounted() {
 		// FIXME use @nextcloud/browser-storage or OCP when decided
 		// https://github.com/nextcloud/nextcloud-browser-storage/issues/3
-		this.guestUserName = localStorage.getItem('nick')
+		this.guestUserName = localStorage.getItem('nick') || ''
 		if (this.guestUserName && this.actorDisplayName !== this.guestUserName) {
 			// Browser storage has a name, so we use that.
 			if (this.actorId) {
@@ -152,7 +148,8 @@ export default {
 			this.isEditingUsername = !this.isEditingUsername
 			if (this.isEditingUsername) {
 				this.$nextTick(() => {
-					this.$refs.usernameInput.focus()
+					// FIXME upstream: add support of native input methods: focus, select, etc
+					this.$refs.usernameInput.$refs.inputField.$refs.input.focus()
 				})
 			}
 		},
@@ -162,21 +159,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
-/** Username form for guest users */
 .username-form {
 	padding: 0 12px;
-	margin:auto;
-	&__wrapper {
-		display: flex;
-		margin-top: 16px;
-	}
-	&__input {
-		padding-right: var(--clickable-area);
-		width: 230px;
-	}
-	&__button {
-		margin-left: -52px;
+	margin: 0 auto 12px;
+
+	& &__input {
+		width: 300px;
+		height: var(--default-clickable-area);
 	}
 }
 
diff --git a/src/components/SettingsDialog/SettingsDialog.vue b/src/components/SettingsDialog/SettingsDialog.vue
index 0e792faed5a..ea6e5f86e8f 100644
--- a/src/components/SettingsDialog/SettingsDialog.vue
+++ b/src/components/SettingsDialog/SettingsDialog.vue
@@ -37,11 +37,16 @@
 			<h3 class="app-settings-section__hint">
 				{{ locationHint }}
 			</h3>
-			<input type="text"
-				class="app-settings-section__input"
-				:value="attachmentFolder"
-				:disabled="attachmentFolderLoading"
-				@click="selectAttachmentFolder">
+			<div class="app-settings-section__wrapper">
+				<NcTextField class="app-settings-section__input"
+					:value="attachmentFolder"
+					:disabled="true"
+					@click="selectAttachmentFolder" />
+				<NcButton type="primary"
+					@click="selectAttachmentFolder">
+					{{ t('spreed', 'Browse…') }}
+				</NcButton>
+			</div>
 		</NcAppSettingsSection>
 		<NcAppSettingsSection v-if="!isGuest"
 			id="privacy"
@@ -146,7 +151,9 @@ import { generateUrl } from '@nextcloud/router'
 
 import NcAppSettingsDialog from '@nextcloud/vue/dist/Components/NcAppSettingsDialog.js'
 import NcAppSettingsSection from '@nextcloud/vue/dist/Components/NcAppSettingsSection.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
 import MediaDevicesPreview from '../MediaDevicesPreview.vue'
 
@@ -159,7 +166,9 @@ export default {
 		MediaDevicesPreview,
 		NcAppSettingsDialog,
 		NcAppSettingsSection,
+		NcButton,
 		NcCheckboxRadioSwitch,
+		NcTextField,
 	},
 
 	data() {
@@ -247,7 +256,7 @@ export default {
 			try {
 				await this.$store.dispatch(
 					'updateReadStatusPrivacy',
-					this.readStatusPrivacyIsPublic ? PRIVACY.PRIVATE : PRIVACY.PUBLIC
+					this.readStatusPrivacyIsPublic ? PRIVACY.PRIVATE : PRIVACY.PUBLIC,
 				)
 				showSuccess(t('spreed', 'Your privacy setting has been saved'))
 			} catch (exception) {
@@ -298,8 +307,19 @@ export default {
 		color: var(--color-text-lighter);
 		padding: 8px 0;
 	}
-	&__input {
-		width: 100%;
+	&__wrapper {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+
+	& &__input {
+		width: 300px;
+		height: var(--default-clickable-area);
+		:deep(input) {
+			height: var(--default-clickable-area) !important;
+			cursor: default;
+		}
 	}
 
 	.shortcut-description {
diff --git a/src/views/WelcomeView.vue b/src/views/WelcomeView.vue
index ff682b570e0..f48f92250ba 100644
--- a/src/views/WelcomeView.vue
+++ b/src/views/WelcomeView.vue
@@ -5,10 +5,7 @@
 		<p class="emptycontent-additional">
 			{{ t('spreed', 'Say hi to your friends and colleagues!') }}
 		</p>
-		<div id="shareRoomContainer">
-			<!--  <input id="shareRoomInput" class="share-room-input hidden" readonly="readonly" type="text"/>
-            <div id="shareRoomClipboardButton" class="shareRoomClipboard icon-clippy hidden" data-clipboard-target="#shareRoomInput"></div> -->
-		</div>
+		<div id="shareRoomContainer" />
 	</div>
 </template>