diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index 2ed7edabae..214ee0f34f 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -229,7 +229,7 @@ the main body of the message as well as a quote.
 			</div>
 		</div>
 
-		<MessageTranslateDialog v-if="isTranslateDialogOpen"
+		<MessageTranslateDialog v-if="isTranslationAvailable && isTranslateDialogOpen"
 			:message="message"
 			:rich-parameters="richParameters"
 			@close="isTranslateDialogOpen = false" />
@@ -283,11 +283,9 @@ import { EventBus } from '../../../../services/EventBus.js'
 import { useGuestNameStore } from '../../../../stores/guestName.js'
 import { getItemTypeFromMessage } from '../../../../utils/getItemTypeFromMessage.js'
 
-let isTranslationAvailable = getCapabilities()?.spreed?.config?.['has-translation-providers']
-if (isTranslationAvailable === undefined) {
+const isTranslationAvailable = getCapabilities()?.spreed?.config?.chat?.['has-translation-providers']
 	// Fallback for the desktop client when connecting to Talk 17
-	isTranslationAvailable = getCapabilities()?.spreed?.config?.chat?.translations?.length > 0
-}
+	?? getCapabilities()?.spreed?.config?.chat?.translations?.length > 0
 
 /**
  * @property {object} scrollerBoundingClientRect provided by MessageList.vue
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageTranslateDialog.vue b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageTranslateDialog.vue
index 53efa04385..a8fa562e0b 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageTranslateDialog.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageTranslateDialog.vue
@@ -80,7 +80,6 @@
 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'
@@ -89,9 +88,7 @@ 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
+import { getTranslationLanguages, translateText } from '../../../../../services/messagesService.js'
 
 export default {
 	name: 'MessageTranslateDialog',
@@ -119,13 +116,10 @@ export default {
 
 	emits: ['close'],
 
-	setup() {
-		return { availableLanguages }
-	},
-
 	data() {
 		return {
 			isMounted: false,
+			availableLanguages: null,
 			selectedFrom: null,
 			selectedTo: null,
 			isLoading: false,
@@ -140,13 +134,13 @@ export default {
 
 		sourceTree() {
 			const tree = {}
-			const uniqueSourceLanguages = Array.from(new Set(this.availableLanguages.map(element => element.from)))
+			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 => ({
+					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,
 					})),
@@ -158,13 +152,13 @@ export default {
 
 		translationTree() {
 			const tree = {}
-			const uniqueTranslateLanguages = Array.from(new Set(this.availableLanguages.map(element => element.to)))
+			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 => ({
+					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,
 					})),
@@ -202,6 +196,11 @@ export default {
 		},
 	},
 
+	async created() {
+		const response = await getTranslationLanguages()
+		this.availableLanguages = response.data.ocs.data.languages
+	},
+
 	mounted() {
 		this.selectedTo = this.optionsTo.find(language => language.id === this.userLanguage) || null