diff --git a/package-lock.json b/package-lock.json
index 2d9909df853..6cce05ac111 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4241,6 +4241,7 @@
 					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
 					"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"color-convert": "^2.0.1"
 					}
@@ -4287,6 +4288,7 @@
 					"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
 					"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"color-name": "~1.1.4"
 					}
@@ -4295,7 +4297,8 @@
 					"version": "1.1.4",
 					"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
 					"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"css-loader": {
 					"version": "3.6.0",
@@ -7166,6 +7169,11 @@
 				}
 			}
 		},
+		"classnames": {
+			"version": "2.2.6",
+			"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+			"integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+		},
 		"clean-css": {
 			"version": "4.2.3",
 			"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
@@ -8977,6 +8985,11 @@
 				"stream-shift": "^1.0.0"
 			}
 		},
+		"easy-bem": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/easy-bem/-/easy-bem-1.0.2.tgz",
+			"integrity": "sha512-tHtLDhcEHZIMKdiiZElQoR8TcZ/6rvcNp7//93Vx/mqNLah9BOFGhhzTUfWLJs7uxZiKMdP/KzGOtzq14DrrqQ=="
+		},
 		"easy-stack": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/easy-stack/-/easy-stack-1.0.0.tgz",
@@ -20733,6 +20746,16 @@
 			"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz",
 			"integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg=="
 		},
+		"vue-advanced-cropper": {
+			"version": "0.20.1",
+			"resolved": "https://registry.npmjs.org/vue-advanced-cropper/-/vue-advanced-cropper-0.20.1.tgz",
+			"integrity": "sha512-G/RloEFoAIMd8hK9xczcu9muUNq0GzHupcnuFQuiyk9+4W+JkT4Ypnrr0CLDrtuFwd1BFabiX9bdpk+Z/XP2EQ==",
+			"requires": {
+				"classnames": "^2.2.6",
+				"debounce": "^1.2.0",
+				"easy-bem": "^1.0.2"
+			}
+		},
 		"vue-at": {
 			"version": "2.5.0-beta.2",
 			"resolved": "https://registry.npmjs.org/vue-at/-/vue-at-2.5.0-beta.2.tgz",
diff --git a/package.json b/package.json
index 2c7c8f893d5..7e30c08b979 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
 		"url-parse": "^1.4.7",
 		"util": "^0.12.3",
 		"vue": "^2.6.12",
+		"vue-advanced-cropper": "^0.20.1",
 		"vue-at": "^2.5.0-beta.2",
 		"vue-clipboard2": "^0.3.1",
 		"vue-fragment": "^1.5.1",
diff --git a/src/App.vue b/src/App.vue
index 818b01f31f0..700d6101067 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -71,6 +71,7 @@ import '@nextcloud/dialogs/styles/toast.scss'
 
 export default {
 	name: 'App',
+
 	components: {
 		AppContent,
 		Content,
diff --git a/src/components/ConversationPictureEditor/ConversationPictureEditor.vue b/src/components/ConversationPictureEditor/ConversationPictureEditor.vue
new file mode 100644
index 00000000000..aab7d273f15
--- /dev/null
+++ b/src/components/ConversationPictureEditor/ConversationPictureEditor.vue
@@ -0,0 +1,187 @@
+<!--
+  - @copyright Copyright (c) 2020 Marco Ambrosini <marcoambrosini@pm.me>
+  -
+  - @author Marco Ambrosini <marcoambrosini@pm.me>
+  -
+  - @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>
+	<Modal
+		class="top"
+		@close="handleDismiss">
+		<div class="conversation-picture-editor"
+			@click.stop="">
+			<!--native file picker, hidden -->
+			<input
+				ref="conversationPictureInput"
+				type="file"
+				accept="image/png, image/jpeg"
+				class="hidden-visually"
+				@change="loadImage">
+			<Cropper
+				ref="cropper"
+				:src="selectedPicture"
+				:resize-image="false"
+				stencil-component="circle-stencil"
+				:stencil-props="{
+					movable: true,
+					scalable: true,
+					aspectRatio: 1,
+					stencilSize: ({ boundaries }) => {
+						return {
+							width: boundaries.width,
+							height: boundaries.height,
+						}
+					}
+				}" />
+			<div class="actions" />
+			<div class="conversation-picture-editor__actions">
+				<button @click="handleDismiss">
+					{{ t('spreed', 'Dismiss') }}
+				</button>
+				<button ref="submitButton" class="primary" @click="uploadResult">
+					{{ t('spreed', 'Send') }}
+				</button>
+			</div>
+		</div>
+	</Modal>
+</template>
+
+<script>
+
+import Modal from '@nextcloud/vue/dist/Components/Modal'
+import { Cropper } from 'vue-advanced-cropper'
+import { setConversationPicture } from '../../services/conversationsService'
+export default {
+	name: 'ConversationPictureEditor',
+
+	components: {
+		Modal,
+		Cropper,
+	},
+
+	props: {
+		token: {
+			type: String,
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			selectedPicture: '',
+			croppedPicture: null,
+		}
+	},
+
+	mounted() {
+		// Upon mounting the component, click the invisible file input immediately
+
+		this.$nextTick(() => {
+			this.clickInput()
+		})
+	},
+
+	methods: {
+		focus() {
+			this.$nextTick(() => {
+				this.$refs.submitButton.focus()
+			})
+		},
+
+		handleDismiss() {
+			this.$emit('close')
+		},
+
+		handleUpload() {
+			this.$store.dispatch('uploadFiles', this.currentUploadId)
+		},
+		/**
+		 * Clicks the hidden file input when clicking the correspondent ActionButton,
+		 * thus opening the file-picker
+		 */
+		clickInput() {
+			console.debug('input', this.$refs.conversationPictureInput)
+			this.$refs.conversationPictureInput.click()
+		},
+
+		/**
+		 * Loads the image into the cropper
+		 * @param {object} event The event triggered by the input
+		 */
+		loadImage(event) {
+			// Loading state
+			this.isLoading = true
+			// Reference to the DOM input element
+			const input = event.target
+			// Ensure that a file exists before attempting to read it
+			if (input.files && input.files[0]) {
+				// create a new FileReader to read this image and convert to base64 format
+				const reader = new FileReader()
+				// Define a callback function to run, when FileReader finishes its job
+				reader.onload = (e) => {
+					// Note: arrow function used here, so that "this.imageData" refers to the imageData of Vue component
+					// Read image as base64 and set to imageData
+					this.selectedPicture = e.target.result
+				}
+				// Start the reader job - read file as a data url (base64 format)
+				reader.readAsDataURL(input.files[0])
+			}
+			// Loading state off
+			this.isLoading = false
+		},
+
+		async uploadResult() {
+			const { canvas } = this.$refs.cropper.getResult()
+			if (canvas) {
+				await canvas.toBlob(async blob => {
+					try {
+						await setConversationPicture(this.token, blob)
+					} catch (exception) {
+						console.debug(exception)
+					}
+				}, 'image/jpeg')
+			}
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../assets/variables.scss';
+
+.conversation-picture-editor {
+	max-width: 480px;
+	&__actions {
+		display: flex;
+		justify-content: flex-end;
+		margin-top: 16px;
+		margin-bottom: 4px;
+		button {
+			margin: 0 4px 0 4px;
+		}
+	}
+}
+
+::v-deep .modal-container {
+	display: flex !important;
+	flex-direction: column;
+	padding: 12px !important;
+	min-width: 400px;
+}
+
+</style>
diff --git a/src/components/ConversationSettings/ConversationSettingsDialog.vue b/src/components/ConversationSettings/ConversationSettingsDialog.vue
index 37aed0210be..555d6f4c6b0 100644
--- a/src/components/ConversationSettings/ConversationSettingsDialog.vue
+++ b/src/components/ConversationSettings/ConversationSettingsDialog.vue
@@ -25,6 +25,10 @@
 		:aria-label="t('spreed', 'Conversation settings')"
 		:open.sync="showSettings"
 		:show-navigation="false">
+		<AppSettingsSection
+			:title="t('spreed', 'Details')">
+			<GeneralConversationSettings :token="token" />
+		</AppSettingsSection>
 		<AppSettingsSection
 			:title="t('spreed', 'Guests access')"
 			class="app-settings-section">
@@ -65,6 +69,7 @@ import LobbySettings from './LobbySettings'
 import SipSettings from './SipSettings'
 import MatterbridgeSettings from './Matterbridge/MatterbridgeSettings'
 import { loadState } from '@nextcloud/initial-state'
+import GeneralConversationSettings from './GeneralConversationSettings'
 
 export default {
 	name: 'ConversationSettingsDialog',
@@ -78,6 +83,7 @@ export default {
 		LockingSettings,
 		SipSettings,
 		MatterbridgeSettings,
+		GeneralConversationSettings,
 	},
 
 	data() {
diff --git a/src/components/ConversationSettings/GeneralConversationSettings.vue b/src/components/ConversationSettings/GeneralConversationSettings.vue
new file mode 100644
index 00000000000..d996e9287cd
--- /dev/null
+++ b/src/components/ConversationSettings/GeneralConversationSettings.vue
@@ -0,0 +1,114 @@
+<!--
+  - @copyright Copyright (c) 2020 Marco Ambrosini <marcoambrosini@pm.me>
+  -
+  - @author Marco Ambrosini <marcoambrosini@pm.me>
+  -
+  - @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>
+	<div class="general-settings">
+		<ConversationPictureEditor
+			v-if="isSettingConversationPicture"
+			:token="token"
+			@close="isSettingConversationPicture = false" />
+		<button class="general-settings__picture icon-user"
+			@click="setConversationPicture">
+			<img v-if="hasImage" src="" alt="">
+		</button>
+		<div class="general-settings__details">
+			<h4
+				class="details__name">
+				{{ conversationName }}
+			</h4>
+		<!-- TODO: add the conversation description editor here -->
+		</div>
+	</div>
+</template>
+
+<script>
+import ConversationPictureEditor from '../ConversationPictureEditor/ConversationPictureEditor'
+export default {
+	name: 'GeneralConversationSettings',
+
+	components: {
+		ConversationPictureEditor,
+	},
+
+	props: {
+		token: {
+			type: String,
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			isSettingConversationPicture: false,
+		}
+	},
+
+	computed: {
+		conversation() {
+			return this.$store.getters.conversation(this.token)
+		},
+
+		conversationName() {
+			return this.conversation.displayName
+		},
+
+		hasImage() {
+			return this.conversation.displayName
+		},
+	},
+
+	methods: {
+		setConversationPicture() {
+			this.isSettingConversationPicture = true
+		},
+	},
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+.general-settings {
+	display: flex;
+
+	&__picture {
+		height: 80px;
+		width: 80px;
+		flex: 0 0 auto;
+		border-radius: 120px;
+	}
+
+	&__details {
+		margin-left: 16px;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+	}
+}
+
+.details {
+
+	&__name {
+		font-size: 18px;
+		font-weight: bold;
+	}
+}
+</style>
diff --git a/src/services/conversationsService.js b/src/services/conversationsService.js
index f7e1b3239d8..920661e3694 100644
--- a/src/services/conversationsService.js
+++ b/src/services/conversationsService.js
@@ -353,6 +353,19 @@ const setConversationDescription = async function(token, description) {
 	return response
 }
 
+const setConversationPicture = async function(token, blob) {
+	const formData = new FormData()
+	formData.append('name', 'files[]')
+	formData.append('contents', blob)
+	console.log('formData', formData, 'blob', blob)
+	const response = await axios.post(generateOcsUrl('apps/spreed/api/v3', 2) + `avatar/${token}`, formData, {
+		headers: {
+			'Content-Type': 'multipart/form-data;boundary=----WebKitFormBoundaryyrV7KO0BoCBuDbTL',
+		},
+	})
+	return response
+}
+
 export {
 	fetchConversations,
 	fetchConversation,
@@ -375,4 +388,5 @@ export {
 	setConversationPassword,
 	setConversationName,
 	setConversationDescription,
+	setConversationPicture,
 }