diff --git a/src/components/ConversationSettings/ConversationAvatarEditor.vue b/src/components/ConversationSettings/ConversationAvatarEditor.vue
index 16692446f26d..2c1b498fb66c 100644
--- a/src/components/ConversationSettings/ConversationAvatarEditor.vue
+++ b/src/components/ConversationSettings/ConversationAvatarEditor.vue
@@ -44,8 +44,7 @@
 				<div class="avatar__buttons">
 					<!-- Set emoji as avatar -->
 					<template v-if="!showCropper">
-						<NcEmojiPicker :per-line="5"
-							@select="setEmoji">
+						<NcEmojiPicker :per-line="5" :container="container" @select="setEmoji">
 							<NcButton :title="t('spreed', 'Set emoji as conversation picture')"
 								:aria-label="t('spreed', 'Set emoji as conversation picture')">
 								<template #icon>
@@ -53,7 +52,7 @@
 								</template>
 							</NcButton>
 						</NcEmojiPicker>
-						<NcColorPicker v-if="emojiAvatar" v-model="backgroundColor">
+						<NcColorPicker v-if="emojiAvatar" v-model="backgroundColor" :container="container">
 							<NcButton :title="t('spreed', 'Set background color for conversation picture')"
 								:aria-label="t('spreed', 'Set background color for conversation picture')">
 								<template #icon>
@@ -212,6 +211,10 @@ export default {
 	},
 
 	computed: {
+		container() {
+			return this.$store.getters.getMainContainerSelector()
+		},
+
 		inputId() {
 			return `account-property-${this.conversation.displayName}`
 		},