diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index 1e8fd149b3e..e27b0b27721 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -179,6 +179,7 @@ the main body of the message as well as a quote.
 		<div class="message-body__scroll">
 			<MessageButtonsBar v-if="showMessageButtonsBar"
 				ref="messageButtonsBar"
+				:is-translation-available="isTranslationAvailable"
 				:is-action-menu-open.sync="isActionMenuOpen"
 				:is-emoji-picker-open.sync="isEmojiPickerOpen"
 				:is-reactions-menu-open.sync="isReactionsMenuOpen"
@@ -193,9 +194,15 @@ the main body of the message as well as a quote.
 				:common-read-icon-tooltip="commonReadIconTooltip"
 				:show-sent-icon="showSentIcon"
 				:sent-icon-tooltip="sentIconTooltip"
+				@show-translate-dialog="isTranslateDialogOpen = true"
 				@delete="handleDelete" />
 		</div>
 
+		<MessageTranslateDialog v-if="isTranslateDialogOpen"
+			:message="message"
+			:rich-parameters="richParameters"
+			@close="isTranslateDialogOpen = false" />
+
 		<div v-if="isLastReadMessage"
 			v-observe-visibility="lastReadMessageVisibilityChanged">
 			<div class="new-message-marker">
@@ -214,6 +221,7 @@ import CheckAll from 'vue-material-design-icons/CheckAll.vue'
 import EmoticonOutline from 'vue-material-design-icons/EmoticonOutline.vue'
 import Reload from 'vue-material-design-icons/Reload.vue'
 
+import { getCapabilities } from '@nextcloud/capabilities'
 import { showError, showSuccess, showWarning, TOAST_DEFAULT_TIMEOUT } from '@nextcloud/dialogs'
 import moment from '@nextcloud/moment'
 
@@ -225,6 +233,7 @@ import NcRichText from '@nextcloud/vue/dist/Components/NcRichText.js'
 import Quote from '../../../Quote.vue'
 import CallButton from '../../../TopBar/CallButton.vue'
 import MessageButtonsBar from './MessageButtonsBar/MessageButtonsBar.vue'
+import MessageTranslateDialog from './MessageButtonsBar/MessageTranslateDialog.vue'
 import Contact from './MessagePart/Contact.vue'
 import DeckCard from './MessagePart/DeckCard.vue'
 import DefaultParameter from './MessagePart/DefaultParameter.vue'
@@ -238,6 +247,8 @@ import { ATTENDEE, CONVERSATION, PARTICIPANT } from '../../../../constants.js'
 import participant from '../../../../mixins/participant.js'
 import { EventBus } from '../../../../services/EventBus.js'
 
+const isTranslationAvailable = getCapabilities()?.spreed?.config?.chat?.translations?.length > 0
+
 /**
  * @property {object} scrollerBoundingClientRect provided by MessageList.vue
  */
@@ -245,6 +256,7 @@ export default {
 	name: 'Message',
 
 	components: {
+		MessageTranslateDialog,
 		CallButton,
 		MessageButtonsBar,
 		NcButton,
@@ -404,7 +416,7 @@ export default {
 
 	setup() {
 		const isInCall = useIsInCall()
-		return { isInCall }
+		return { isInCall, isTranslationAvailable }
 	},
 
 	data() {
@@ -422,6 +434,7 @@ export default {
 			isReactionsMenuOpen: false,
 			isForwarderOpen: false,
 			detailedReactionsLoading: false,
+			isTranslateDialogOpen: false,
 		}
 	},
 
@@ -580,7 +593,9 @@ export default {
 		},
 
 		showMessageButtonsBar() {
-			return !this.isSystemMessage && !this.isDeletedMessage && !this.isTemporary && (this.isHovered || this.isActionMenuOpen || this.isEmojiPickerOpen || this.isFollowUpEmojiPickerOpen || this.isReactionsMenuOpen || this.isForwarderOpen)
+			return !this.isSystemMessage && !this.isDeletedMessage && !this.isTemporary
+				&& (this.isHovered || this.isActionMenuOpen || this.isEmojiPickerOpen || this.isFollowUpEmojiPickerOpen
+					|| this.isReactionsMenuOpen || this.isForwarderOpen || this.isTranslateDialogOpen)
 		},
 
 		isTemporaryUpload() {
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
index 49e08d0ae81..354987c1148 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
@@ -106,6 +106,15 @@
 					@click="action.callback(messageApiData)">
 					{{ action.label }}
 				</NcActionButton>
+				<NcActionButton v-if="isTranslationAvailable"
+					:close-after-click="true"
+					@click.stop="$emit('show-translate-dialog', true)"
+					@close="$emit('show-translate-dialog', false)">
+					<template #icon>
+						<Translate :size="16" />
+					</template>
+					{{ t('spreed', 'Translate') }}
+				</NcActionButton>
 				<template v-if="isDeleteable">
 					<NcActionSeparator />
 					<NcActionButton icon="icon-delete"
@@ -169,6 +178,7 @@ import File from 'vue-material-design-icons/File.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import Reply from 'vue-material-design-icons/Reply.vue'
 import Share from 'vue-material-design-icons/Share.vue'
+import Translate from 'vue-material-design-icons/Translate.vue'
 
 import moment from '@nextcloud/moment'
 
@@ -211,6 +221,7 @@ export default {
 		Plus,
 		Reply,
 		Share,
+		Translate,
 	},
 
 	props: {
@@ -354,9 +365,14 @@ export default {
 			type: String,
 			required: true,
 		},
+
+		isTranslationAvailable: {
+			type: Boolean,
+			required: true,
+		},
 	},
 
-	emits: ['delete', 'update:isActionMenuOpen', 'update:isEmojiPickerOpen', 'update:isReactionsMenuOpen', 'update:isForwarderOpen'],
+	emits: ['delete', 'update:isActionMenuOpen', 'update:isEmojiPickerOpen', 'update:isReactionsMenuOpen', 'update:isForwarderOpen', 'show-translate-dialog'],
 
 	data() {
 		return {
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageTranslateDialog.vue b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageTranslateDialog.vue
new file mode 100644
index 00000000000..53efa043854
--- /dev/null
+++ b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageTranslateDialog.vue
@@ -0,0 +1,295 @@
+<!--
+  - @copyright Copyright (c) 2023 Marco Ambrosini <marcoambrosini@icloud.com>
+  -
+  - @author Marco Ambrosini <marcoambrosini@icloud.com>
+  - @author Maksim Sukharev <antreesy.web@gmail.com>
+  -
+  - @license AGPL-3.0-or-later
+  -
+  - 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>
+	<NcModal ref="translate-modal" size="large" @close="$emit('close')">
+		<div v-if="isMounted" class="translate-dialog">
+			<h2> {{ t('spreed', 'Translate message') }} </h2>
+			<div class="translate-dialog__wrapper">
+				<NcSelect v-model="selectedFrom"
+					class="translate-dialog__select"
+					input-id="from"
+					:aria-label="t('spreed', 'Source language to translate from')"
+					:placeholder="t('spreed', 'Translate from')"
+					:options="optionsFrom"
+					no-wrap />
+
+				<ArrowRight />
+
+				<NcSelect v-model="selectedTo"
+					class="translate-dialog__select"
+					input-id="to"
+					:aria-label="t('spreed', 'Target language to translate into')"
+					:placeholder="t('spreed', 'Translate to')"
+					:options="optionsTo"
+					no-wrap />
+
+				<NcButton type="primary"
+					:disabled="isLoading"
+					class="translate-dialog__button"
+					@click="handleTranslate">
+					<template v-if="isLoading" #icon>
+						<NcLoadingIcon />
+					</template>
+					{{ isLoading ? t('spreed', 'Translating') : t('spreed', 'Translate') }}
+				</NcButton>
+			</div>
+
+			<NcRichText class="translate-dialog__message translate-dialog__message-source"
+				:text="message"
+				:arguments="richParameters"
+				:reference-limit="0" />
+
+			<template v-if="translatedMessage">
+				<NcRichText class="translate-dialog__message translate-dialog__message-translation"
+					:text="translatedMessage"
+					:arguments="richParameters"
+					:reference-limit="0" />
+				<NcButton class="translate-dialog__copy-button"
+					@click="handleCopyTranslation">
+					<template #icon>
+						<ContentCopy />
+					</template>
+					{{ t('spreed', 'Copy translated text') }}
+				</NcButton>
+			</template>
+		</div>
+	</NcModal>
+</template>
+
+<script>
+import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
+import ContentCopy from 'vue-material-design-icons/ContentCopy.vue'
+
+import { getCapabilities } from '@nextcloud/capabilities'
+import { showError, showSuccess } from '@nextcloud/dialogs'
+
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+import NcRichText from '@nextcloud/vue/dist/Components/NcRichText.js'
+import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
+
+import { translateText } from '../../../../../services/messagesService.js'
+
+const availableLanguages = getCapabilities()?.spreed?.config?.chat?.translations
+
+export default {
+	name: 'MessageTranslateDialog',
+
+	components: {
+		ArrowRight,
+		ContentCopy,
+		NcRichText,
+		NcModal,
+		NcSelect,
+		NcButton,
+		NcLoadingIcon,
+	},
+
+	props: {
+		message: {
+			type: String,
+			required: true,
+		},
+		richParameters: {
+			type: Object,
+			required: true,
+		},
+	},
+
+	emits: ['close'],
+
+	setup() {
+		return { availableLanguages }
+	},
+
+	data() {
+		return {
+			isMounted: false,
+			selectedFrom: null,
+			selectedTo: null,
+			isLoading: false,
+			translatedMessage: '',
+		}
+	},
+
+	computed: {
+		userLanguage() {
+			return navigator.language.substring(0, 2)
+		},
+
+		sourceTree() {
+			const tree = {}
+			const uniqueSourceLanguages = Array.from(new Set(this.availableLanguages.map(element => element.from)))
+
+			uniqueSourceLanguages.forEach(language => {
+				tree[language] = {
+					id: language,
+					label: this.availableLanguages.find(element => element.from === language)?.fromLabel,
+					translations: this.availableLanguages.filter(element => element.from === language).map(model => ({
+						id: model.to,
+						label: model.toLabel,
+					})),
+				}
+			})
+
+			return tree
+		},
+
+		translationTree() {
+			const tree = {}
+			const uniqueTranslateLanguages = Array.from(new Set(this.availableLanguages.map(element => element.to)))
+
+			uniqueTranslateLanguages.forEach(language => {
+				tree[language] = {
+					id: language,
+					label: this.availableLanguages.find(element => element.to === language)?.toLabel,
+					sources: this.availableLanguages.filter(element => element.to === language).map(model => ({
+						id: model.from,
+						label: model.fromLabel,
+					})),
+				}
+			})
+
+			return tree
+		},
+
+		optionsFrom() {
+			return this.selectedTo?.id
+				? this.translationTree[this.selectedTo?.id]?.sources
+				: Object.values(this.sourceTree).map(model => ({
+					id: model.id,
+					label: model.label,
+				}))
+		},
+
+		optionsTo() {
+			return this.selectedFrom?.id
+				? this.sourceTree[this.selectedFrom?.id]?.translations
+				: Object.values(this.translationTree).map(model => ({
+					id: model.id,
+					label: model.label,
+				}))
+		},
+	},
+
+	watch: {
+		selectedTo() {
+			this.translatedMessage = ''
+		},
+		selectedFrom() {
+			this.translatedMessage = ''
+		},
+	},
+
+	mounted() {
+		this.selectedTo = this.optionsTo.find(language => language.id === this.userLanguage) || null
+
+		if (this.selectedTo) {
+			this.translateMessage()
+		}
+
+		this.$nextTick(() => {
+			// FIXME trick to avoid focusTrap() from activating on NcSelect
+			this.isMounted = !!this.$refs['translate-modal'].randId
+		})
+	},
+
+	methods: {
+		handleTranslate() {
+			this.translateMessage(this.selectedFrom?.id)
+		},
+
+		async translateMessage(sourceLanguage = null) {
+			try {
+				this.isLoading = true
+				const response = await translateText(this.message, sourceLanguage, this.selectedTo?.id)
+				this.translatedMessage = response.data.ocs.data.text
+			} catch (error) {
+				console.error(error)
+				showError(error.response?.data?.ocs?.data?.message ?? t('spreed', 'The message could not be translated'))
+			} finally {
+				this.isLoading = false
+			}
+		},
+
+		async handleCopyTranslation() {
+			try {
+				await navigator.clipboard.writeText(this.translatedMessage)
+				showSuccess(t('spreed', 'Translation copied to clipboard'))
+			} catch (error) {
+				showError(t('spreed', 'Translation could not be copied'))
+			}
+		},
+	},
+}
+
+</script>
+
+<style lang="scss" scoped>
+.translate-dialog {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	min-height: 400px;
+	padding: calc(var(--default-grid-baseline) * 3);
+	background-color: var(--color-main-background);
+
+	&__wrapper {
+		display: flex;
+		align-items: center;
+		gap: calc(var(--default-grid-baseline) * 4);
+		padding: calc(var(--default-grid-baseline) * 2);
+	}
+
+	& &__select {
+		width: 50%;
+	}
+
+	&__button {
+		flex-shrink: 0;
+		margin-left: auto;
+	}
+
+	&__message {
+		padding: calc(var(--default-grid-baseline) * 2);
+		flex-grow: 1;
+		border-radius: var(--border-radius-large);
+
+		&-source {
+			color: var(--color-text-lighter);
+			margin-bottom: calc(var(--default-grid-baseline) * 2);
+			border: 2px solid var(--color-border);
+		}
+
+		&-translation {
+			border: 2px solid var(--color-primary-element);
+		}
+	}
+
+	& &__copy-button {
+		margin-top: calc(var(--default-grid-baseline) * 2);
+		align-self: end;
+	}
+}
+</style>
diff --git a/src/services/messagesService.js b/src/services/messagesService.js
index 6dca4c52a19..b6b3e4bf59f 100644
--- a/src/services/messagesService.js
+++ b/src/services/messagesService.js
@@ -175,6 +175,18 @@ const getReactionsDetails = async function(token, messageId) {
 	return axios.get(generateOcsUrl('apps/spreed/api/v1/reaction/{token}/{messageId}', { token, messageId }))
 }
 
+const getTranslationLanguages = async function() {
+	return axios.get(generateOcsUrl('/translation/languages'))
+}
+
+const translateText = async function(text, fromLanguage, toLanguage) {
+	return axios.post(generateOcsUrl('/translation/translate'), {
+		text,
+		fromLanguage,
+		toLanguage,
+	})
+}
+
 export {
 	fetchMessages,
 	lookForNewMessages,
@@ -186,4 +198,6 @@ export {
 	addReactionToMessage,
 	removeReactionFromMessage,
 	getReactionsDetails,
+	getTranslationLanguages,
+	translateText,
 }