diff --git a/jest.config.js b/jest.config.js
index fd659970000..3c5803c2fea 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -80,6 +80,7 @@ module.exports = {
 	],
 
 	moduleNameMapper: {
+		'\\.(css|scss)$': 'jest-transform-stub',
 		'vendor/tflite/(.*).wasm$': '<rootDir>/src/utils/media/effects/virtual-background/vendor/tflite/$1.js',
 	},
 
diff --git a/src/components/ConversationIcon.vue b/src/components/ConversationIcon.vue
index 48845f5dd95..151091ee4bf 100644
--- a/src/components/ConversationIcon.vue
+++ b/src/components/ConversationIcon.vue
@@ -172,6 +172,11 @@ export default {
 				return 'icon-contacts'
 			}
 
+			if (this.item.type === CONVERSATION.TYPE.PUBLIC) {
+				// Public icon for new conversation dialog
+				return 'icon-public'
+			}
+
 			// Fall-through for other conversation suggestions to user-avatar handling
 			return undefined
 		},
diff --git a/src/components/ConversationSettings/ConversationAvatarEditor.vue b/src/components/ConversationSettings/ConversationAvatarEditor.vue
index 9d0647b5a74..dbeea9666fb 100644
--- a/src/components/ConversationSettings/ConversationAvatarEditor.vue
+++ b/src/components/ConversationSettings/ConversationAvatarEditor.vue
@@ -23,8 +23,8 @@
 
 <template>
 	<section id="vue-avatar-section">
-		<div v-if="!showCropper" class="avatar__container">
-			<div class="avatar__preview">
+		<div class="avatar__container avatar__container--horizontal">
+			<div v-if="!showCropper" class="avatar__preview">
 				<div v-if="emojiAvatar"
 					class="avatar__preview-emoji"
 					:style="{'background-color': backgroundColor}">
@@ -36,37 +36,53 @@
 					:disable-menu="true" />
 				<div v-else class="icon-loading" />
 			</div>
-			<template v-if="editable">
+			<VueCropper v-show="showCropper"
+				ref="cropper"
+				class="avatar__cropper"
+				v-bind="cropperOptions" />
+			<div v-if="editable" class="avatar__container">
 				<div class="avatar__buttons">
-					<NcEmojiPicker :per-line="5"
-						@select="setEmoji">
-						<NcButton :aria-label="t('spreed', 'Set emoji as profile picture')">
-							<template #icon>
-								<EmoticonOutline :size="20" />
-							</template>
-						</NcButton>
-					</NcEmojiPicker>
-					<NcColorPicker v-if="emojiAvatar" v-model="backgroundColor">
-						<NcButton :aria-label="t('spreed', 'Set background color for profile picture')">
-							<template #icon>
-								<Palette :size="20" />
-							</template>
-						</NcButton>
-					</NcColorPicker>
-					<NcButton :aria-label="t('settings', 'Upload profile picture')"
+					<!-- Set emoji as avatar -->
+					<template v-if="!showCropper">
+						<NcEmojiPicker :per-line="5"
+							@select="setEmoji">
+							<NcButton :title="t('spreed', 'Set emoji as conversation picture')"
+								:aria-label="t('spreed', 'Set emoji as conversation picture')">
+								<template #icon>
+									<EmoticonOutline :size="20" />
+								</template>
+							</NcButton>
+						</NcEmojiPicker>
+						<NcColorPicker v-if="emojiAvatar" v-model="backgroundColor">
+							<NcButton :title="t('spreed', 'Set background color for conversation picture')"
+								:aria-label="t('spreed', 'Set background color for conversation picture')">
+								<template #icon>
+									<Palette :size="20" />
+								</template>
+							</NcButton>
+						</NcColorPicker>
+					</template>
+
+					<!-- Set picture as avatar -->
+					<NcButton :title="t('settings', 'Upload conversation picture')"
+						:aria-label="t('settings', 'Upload conversation picture')"
 						@click="activateLocalFilePicker">
 						<template #icon>
 							<Upload :size="20" />
 						</template>
 					</NcButton>
-					<NcButton :aria-label="t('settings', 'Choose profile picture from files')"
+					<NcButton :title="t('settings', 'Choose conversation picture from files')"
+						:aria-label="t('settings', 'Choose conversation picture from files')"
 						@click="openFilePicker">
 						<template #icon>
 							<Folder :size="20" />
 						</template>
 					</NcButton>
+
+					<!-- Remove existing avatar -->
 					<NcButton v-if="hasAvatar"
-						:aria-label="t('settings', 'Remove profile picture')"
+						:title="t('settings', 'Remove conversation picture')"
+						:aria-label="t('settings', 'Remove conversation picture')"
 						@click="removeAvatar">
 						<template #icon>
 							<Delete :size="20" />
@@ -81,23 +97,16 @@
 					type="file"
 					:accept="validMimeTypes.join(',')"
 					@change="onChange">
-			</template>
-		</div>
-
-		<!-- Use v-show to ensure early cropper ref availability -->
-		<div v-if="editable" class="avatar__container">
-			<VueCropper v-show="showCropper"
-				ref="cropper"
-				class="avatar__cropper"
-				v-bind="cropperOptions" />
-			<div v-show="isEdited" class="avatar__buttons">
-				<NcButton @click="cancel">
-					{{ t('spreed', 'Cancel') }}
-				</NcButton>
-				<NcButton type="primary"
-					@click="saveAvatar">
-					{{ t('spreed', 'Set as conversation picture') }}
-				</NcButton>
+				<div v-if="showControls" class="avatar__buttons">
+					<NcButton @click="cancel">
+						{{ t('spreed', 'Cancel') }}
+					</NcButton>
+					<NcButton v-if="!controlled"
+						type="primary"
+						@click="saveAvatar">
+						{{ t('spreed', 'Set picture') }}
+					</NcButton>
+				</div>
 			</div>
 		</div>
 	</section>
@@ -128,7 +137,7 @@ import 'cropperjs/dist/cropper.css'
 
 const VALID_MIME_TYPES = ['image/png', 'image/jpeg']
 
-const picker = getFilePickerBuilder(t('spreed', 'Choose your profile picture'))
+const picker = getFilePickerBuilder(t('spreed', 'Choose your conversation picture'))
 	.setMultiSelect(false)
 	.setMimeTypeFilter(VALID_MIME_TYPES)
 	.setModal(true)
@@ -165,8 +174,17 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Force component to emit signals and be used from parent components
+		 */
+		controlled: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
+	emits: ['avatar-edited'],
+
 	data() {
 		return {
 			showCropper: false,
@@ -193,11 +211,24 @@ export default {
 		},
 
 		hasAvatar() {
-			return !!this.conversation.avatarVersion
+			return this.conversation.isCustomAvatar
 		},
 
-		isEdited() {
-			return this.showCropper || this.emojiAvatar
+		showControls() {
+			return this.editable && (this.showCropper || this.emojiAvatar)
+		},
+	},
+
+	watch: {
+		showCropper(value) {
+			if (this.controlled) {
+				this.$emit('avatar-edited', value)
+			}
+		},
+		emojiAvatar(value) {
+			if (this.controlled) {
+				this.$emit('avatar-edited', !!value)
+			}
 		},
 	},
 
@@ -241,7 +272,7 @@ export default {
 					this.cancel()
 				}
 			} catch (e) {
-				showError(t('spreed', 'Error setting profile picture'))
+				showError(t('spreed', 'Error setting conversation picture'))
 				this.cancel()
 			}
 		},
@@ -284,7 +315,7 @@ export default {
 			const scaleFactor = canvasData.width > 512 ? 512 / canvasData.width : 1
 			this.$refs.cropper.scale(scaleFactor, scaleFactor).getCroppedCanvas().toBlob(async (blob) => {
 				if (blob === null) {
-					showError(t('spreed', 'Error cropping profile picture'))
+					showError(t('spreed', 'Error cropping conversation picture'))
 					this.cancel()
 					return
 				}
@@ -314,7 +345,7 @@ export default {
 					token: this.conversation.token,
 				})
 			} catch (e) {
-				showError(t('spreed', 'Error removing profile picture'))
+				showError(t('spreed', 'Error removing conversation picture'))
 			} finally {
 				this.loading = false
 			}
@@ -340,10 +371,13 @@ section {
 		margin: 0 auto;
 		display: flex;
 		flex-direction: column;
-		justify-content: center;
 		align-items: center;
-		gap: 16px 0;
-		width: 300px;
+		gap: 16px;
+
+		&--horizontal {
+			flex-direction: row;
+			align-items: flex-start;
+		}
 	}
 
 	&__warning {
@@ -354,8 +388,10 @@ section {
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		width: 180px;
+		flex-shrink: 0;
+		width: 300px;
 		height: 180px;
+		padding: 0 60px;
 
 		&-emoji {
 			display: flex;
@@ -373,7 +409,7 @@ section {
 
 	&__buttons {
 		display: flex;
-		gap: 0 10px;
+		gap: 10px;
 	}
 
 	&__cropper {
diff --git a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
index de83c979690..edce5646f63 100644
--- a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
+++ b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
@@ -21,10 +21,10 @@
 
 <template>
 	<div class="wrapper">
-		<NcButton v-tooltip.bottom="t('spreed', 'Create a new group conversation')"
-			type="tertiary"
+		<NcButton type="tertiary"
 			class="toggle"
 			:aria-label="t('spreed', 'Create a new group conversation')"
+			:title="t('spreed', 'Create a new group conversation')"
 			@click="showModal">
 			<template #icon>
 				<Plus :size="20" />
@@ -39,44 +39,64 @@
 			<div class="new-group-conversation talk-modal">
 				<h2>{{ t('spreed', 'Create a new group conversation') }}</h2>
 				<!-- Content -->
-				<div class="new-group-conversation__content">
-					<!-- First page -->
-					<template v-if="page === 0">
-						<SetConversationName v-model="conversationNameInput"
-							@click-enter="handleEnter" />
-						<NcCheckboxRadioSwitch :checked.sync="isPublic"
-							type="switch">
-							{{ t('spreed', 'Allow guests to join via link') }}
+				<div v-show="page === 0" class="new-group-conversation__content">
+					<NcTextField ref="conversationName"
+						v-model="conversationName"
+						:placeholder="t('spreed', 'Enter a name for this conversation')"
+						:label="t('spreed', 'Name')"
+						label-visible
+						@keydown.enter="handleEnter" />
+					<NcTextField v-model="conversationDescription"
+						:placeholder="t('spreed', 'Enter a description for this conversation')"
+						:label="t('spreed', 'Description')"
+						label-visible />
+
+					<label class="avatar-editor__label">
+						{{ t('spreed', 'Picture') }}
+					</label>
+					<ConversationAvatarEditor ref="conversationAvatar"
+						:conversation="newConversation"
+						controlled
+						editable
+						@avatar-edited="setIsAvatarEdited" />
+
+					<label class="new-group-conversation__label">
+						{{ t('spreed', 'Conversation visibility') }}
+					</label>
+					<NcCheckboxRadioSwitch :checked.sync="isPublic"
+						type="switch">
+						{{ t('spreed', 'Allow guests to join via link') }}
+					</NcCheckboxRadioSwitch>
+					<div class="new-group-conversation__wrapper">
+						<NcCheckboxRadioSwitch :checked.sync="passwordProtect"
+							type="switch"
+							:disabled="!isPublic"
+							@checked="handleCheckboxInput">
+							{{ t('spreed', 'Password protect') }}
 						</NcCheckboxRadioSwitch>
-						<!-- Password protection -->
-						<template v-if="isPublic">
-							<NcCheckboxRadioSwitch :checked.sync="passwordProtect"
-								type="switch"
-								@checked="handleCheckboxInput">
-								{{ t('spreed', 'Password protect') }}
-							</NcCheckboxRadioSwitch>
-							<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>
-					<!-- Second page -->
-					<template v-if="page === 1">
-						<SetContacts :conversation-name="conversationName" />
-					</template>
-					<!-- Third page -->
-					<template v-if="page === 2">
-						<Confirmation :token="token"
-							:conversation-name="conversationName"
-							:error="error"
-							:is-loading="isLoading"
-							:success="success"
-							:is-public="isPublic" />
-					</template>
+						<NcPasswordField v-if="passwordProtect"
+							autocomplete="new-password"
+							check-password-strength
+							:placeholder="t('spreed', 'Enter password')"
+							:aria-label="t('spreed', 'Enter password')"
+							:value.sync="password" />
+					</div>
+					<ListableSettings v-model="listable" />
+				</div>
+
+				<!-- Second page -->
+				<div v-if="page === 1" class="new-group-conversation__content">
+					<SetContacts :conversation-name="conversationNameTrimmed" />
+				</div>
+
+				<!-- Third page -->
+				<div v-else-if="page === 2" class="new-group-conversation__content">
+					<Confirmation :token="newConversation.token"
+						:conversation-name="conversationNameTrimmed"
+						:error="error"
+						:is-loading="isLoading"
+						:success="success"
+						:is-public="isPublic" />
 				</div>
 				<!-- Navigation: different buttons with different actions and
 				placement are rendered depending on the current page -->
@@ -124,19 +144,21 @@
 
 import Plus from 'vue-material-design-icons/Plus.vue'
 
+import { showError } from '@nextcloud/dialogs'
+
 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 NcPasswordField from '@nextcloud/vue/dist/Components/NcPasswordField.js'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
+import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
+import ConversationAvatarEditor from '../../ConversationSettings/ConversationAvatarEditor.vue'
 import ListableSettings from '../../ConversationSettings/ListableSettings.vue'
 import Confirmation from './Confirmation/Confirmation.vue'
 import SetContacts from './SetContacts/SetContacts.vue'
-import SetConversationName from './SetConversationName/SetConversationName.vue'
 
 import { useIsInCall } from '../../../composables/useIsInCall.js'
-import { CONVERSATION } from '../../../constants.js'
+import { CONVERSATION, PRIVACY } from '../../../constants.js'
 import participant from '../../../mixins/participant.js'
 import {
 	createPublicConversation,
@@ -146,24 +168,30 @@ import {
 import { EventBus } from '../../../services/EventBus.js'
 import { addParticipant } from '../../../services/participantsService.js'
 
+const NEW_CONVERSATION = {
+	token: '',
+	displayName: '',
+	description: '',
+	hasPassword: false,
+	type: CONVERSATION.TYPE.GROUP,
+	readOnly: CONVERSATION.STATE.READ_ONLY,
+}
+
 export default {
 
 	name: 'NewGroupConversation',
 
-	directives: {
-		tooltip: Tooltip,
-	},
-
 	components: {
-		NcModal,
-		NcPasswordField,
-		SetContacts,
-		SetConversationName,
-		NcButton,
-		NcCheckboxRadioSwitch,
+		ConversationAvatarEditor,
 		Confirmation,
 		ListableSettings,
+		NcButton,
+		NcCheckboxRadioSwitch,
+		NcModal,
+		NcPasswordField,
+		NcTextField,
 		Plus,
+		SetContacts,
 	},
 
 	mixins: [participant],
@@ -175,17 +203,17 @@ export default {
 
 	data() {
 		return {
+			newConversation: Object.assign({}, NEW_CONVERSATION),
 			modal: false,
 			page: 0,
-			conversationNameInput: '',
 			isPublic: false,
 			isLoading: true,
-			token: '',
 			success: false,
 			error: false,
 			password: '',
 			passwordProtect: false,
 			listable: CONVERSATION.LISTABLE.NONE,
+			isAvatarEdited: false,
 		}
 	},
 
@@ -193,19 +221,45 @@ export default {
 		container() {
 			return this.$store.getters.getMainContainerSelector()
 		},
-		// Trims whitespaces from the input string
-		conversationName() {
-			return this.conversationNameInput.trim()
+		conversationName: {
+			get() {
+				return this.newConversation.displayName
+			},
+			set(event) {
+				this.newConversation.displayName = event.target.value
+			},
+		},
+		conversationDescription: {
+			get() {
+				return this.newConversation.description
+			},
+			set(event) {
+				this.newConversation.description = event.target.value
+			},
+		},
+		conversationNameTrimmed() {
+			return this.conversationName.trim()
 		},
 		// Controls the disabled/enabled state of the first page's button.
 		disabled() {
-			return this.conversationName === '' || (this.passwordProtect && this.password === '')
+			return this.conversationNameTrimmed === '' || (this.passwordProtect && this.password === '')
 		},
 		selectedParticipants() {
 			return this.$store.getters.selectedParticipants
 		},
 	},
 
+	watch: {
+		isPublic(value) {
+			if (value) {
+				this.newConversation.type = CONVERSATION.TYPE.PUBLIC
+			} else {
+				this.newConversation.type = CONVERSATION.TYPE.GROUP
+				this.passwordProtect = false
+			}
+		},
+	},
+
 	mounted() {
 		EventBus.$on('new-group-conversation-dialog', this.showModalForItem)
 	},
@@ -219,10 +273,14 @@ export default {
 			this.modal = true
 		},
 
+		setIsAvatarEdited(value) {
+			this.isAvatarEdited = value
+		},
+
 		showModalForItem(item) {
 			if (item) {
 				// Preload the conversation name from group selection
-				this.conversationNameInput = item.label
+				this.conversation.displayName = item.label
 				this.$store.dispatch('updateSelectedParticipants', item)
 			}
 
@@ -230,16 +288,16 @@ export default {
 		},
 		/**
 		 * Reinitialise the component to it's initial state. This is necessary
-		 * because once the component is mounted it's data would persist even if
+		 * because once the component is mounted its data would persist even if
 		 * the modal closes
 		 */
 		closeModal() {
 			this.modal = false
 			this.page = 0
-			this.conversationNameInput = ''
 			this.isPublic = false
 			this.isLoading = true
-			this.token = ''
+			this.newConversation = Object.assign({}, NEW_CONVERSATION)
+			this.isAvatarEdited = false
 			this.success = false
 			this.error = false
 			this.passwordProtect = false
@@ -256,7 +314,7 @@ export default {
 			this.page = 0
 		},
 		/**
-		 * Handles the creation of the group conversation, adds the seleced
+		 * Handles the creation of the group conversation, adds the selected
 		 * participants to it and routes to it
 		 */
 		async handleCreateConversation() {
@@ -264,34 +322,26 @@ export default {
 
 			// TODO: move all operations to a single store action
 			// and commit + addConversation only once at the very end
-			if (this.isPublic) {
-				try {
-					await this.createPublicConversation()
+			try {
+				if (this.isPublic) {
+					await this.createConversation(PRIVACY.PUBLIC)
 					if (this.password && this.passwordProtect) {
-						await setConversationPassword(this.token, this.password)
+						await setConversationPassword(this.newConversation.token, this.password)
 					}
-				} catch (exception) {
-					console.debug(exception)
-					this.isLoading = false
-					this.error = true
-					// Stop the execution of the method on exceptions.
-					return
-				}
-			} else {
-				try {
-					await this.createPrivateConversation()
-				} catch (exception) {
-					console.debug(exception)
-					this.isLoading = false
-					this.error = true
-					// Stop the execution of the method on exceptions.
-					return
+				} else {
+					await this.createConversation(PRIVACY.PRIVATE)
 				}
+			} catch (exception) {
+				console.debug(exception)
+				this.isLoading = false
+				this.error = true
+				// Stop the execution of the method on exceptions.
+				return
 			}
 
 			try {
 				await this.$store.dispatch('setListable', {
-					token: this.token,
+					token: this.newConversation.token,
 					listable: this.listable,
 				})
 			} catch (exception) {
@@ -304,7 +354,7 @@ export default {
 
 			for (const participant of this.selectedParticipants) {
 				try {
-					await addParticipant(this.token, participant.id, participant.source)
+					await addParticipant(this.newConversation.token, participant.id, participant.source)
 				} catch (exception) {
 					console.debug(exception)
 					this.isLoading = false
@@ -327,27 +377,30 @@ export default {
 			}
 		},
 		/**
-		 * Creates a new private conversation, adds it to the store and sets
-		 * the local token value to the newly created conversation's token
-		 */
-		async createPrivateConversation() {
-			const response = await createPrivateConversation(this.conversationName)
-			const conversation = response.data.ocs.data
-			this.$store.dispatch('addConversation', conversation)
-			this.token = conversation.token
-		},
-		/**
-		 * Creates a new public conversation, adds it to the store and sets
+		 * Creates a new private or public conversation, adds it to the store and sets
 		 * the local token value to the newly created conversation's token
+		 *
+		 * @param {number} flag choose to send a request with private or public flag
 		 */
-		async createPublicConversation() {
-			const response = await createPublicConversation(this.conversationName)
+		async createConversation(flag) {
+			let response
+			if (flag === PRIVACY.PRIVATE) {
+				response = await createPrivateConversation(this.conversationNameTrimmed)
+			} else if (flag === PRIVACY.PUBLIC) {
+				response = await createPublicConversation(this.conversationNameTrimmed)
+			}
 			const conversation = response.data.ocs.data
 			this.$store.dispatch('addConversation', conversation)
-			this.token = conversation.token
+			this.newConversation.token = conversation.token
+			if (this.isAvatarEdited) {
+				this.$refs.conversationAvatar.saveAvatar()
+			}
+			if (this.newConversation.description) {
+				this.handleUpdateDescription()
+			}
 		},
 		pushNewRoute() {
-			this.$router.push({ name: 'conversation', params: { token: this.token } })
+			this.$router.push({ name: 'conversation', params: { token: this.newConversation.token } })
 				.catch(err => console.debug(`Error while pushing the new conversation's route: ${err}`))
 		},
 		handleCheckboxInput(event) {
@@ -357,6 +410,18 @@ export default {
 				this.password = ''
 			}
 		},
+		async handleUpdateDescription() {
+			try {
+				await this.$store.dispatch('setConversationDescription', {
+					token: this.newConversation.token,
+					description: this.newConversation.description,
+				})
+			} catch (error) {
+				console.error('Error while setting conversation description', error)
+				showError(t('spreed', 'Error while updating conversation description'))
+			}
+		},
+
 		/** Handles the press of the enter key */
 		handleEnter() {
 			if (!this.disabled) {
@@ -392,6 +457,7 @@ export default {
 	flex-direction: column;
 	justify-content: space-between;
 	position: relative;
+
 	&__content {
 		/**
 		 * Top: 30px line height header + 12px margin
@@ -403,13 +469,26 @@ export default {
 		flex-direction: column;
 		gap: 0.5rem;
 	}
+
+	&__wrapper {
+		display: grid;
+		grid-template-columns: 1fr 2fr;
+		gap: var(--default-grid-baseline);
+		align-items: center;
+	}
+
+	&__label {
+		display: block;
+		margin-top: 10px;
+		padding: 4px 0;
+	}
 }
 
 /** Size full in the modal component doesn't have border radius, this adds
 it back */
 :deep(.modal-container) {
 	border-radius: var(--border-radius-large) !important;
-	height: 700px;
+	height: 900px;
 }
 
 .navigation {
@@ -417,12 +496,13 @@ it back */
 	justify-content: space-between;
 	flex: 0 0 40px;
 	height: 50px;
+	background-color: var(--color-main-background);
 	box-shadow: 0 -10px 5px var(--color-main-background);
 	z-index: 1;
 	width: 100%;
 
 	&__button-right {
-		margin-left:auto;
+		margin-left: auto;
 	}
 }