diff --git a/src/components/MediaMaker/Settings/TranslationSetting.tsx b/src/components/MediaMaker/Settings/TranslationSetting.tsx
index 721b03bc6e..931032fb8f 100644
--- a/src/components/MediaMaker/Settings/TranslationSetting.tsx
+++ b/src/components/MediaMaker/Settings/TranslationSetting.tsx
@@ -14,7 +14,7 @@ import IconCancel from '@/icons/cancel.svg';
 import IconSearch from '@/icons/search.svg';
 import { MediaSettingsProps } from '@/types/Media/MediaSettings';
 import { makeTranslationsUrl } from '@/utils/apiPaths';
-import filterTranslations from '@/utils/filter-translations';
+import filterTranslations, { getTranslations } from '@/utils/filter-translations';
 import { getLocaleName } from '@/utils/locale';
 import { TranslationsResponse } from 'types/ApiResponses';
 import AvailableTranslation from 'types/AvailableTranslation';
@@ -107,7 +107,10 @@ const TranslationSelectionBody: React.FC<Props> = ({ selectedTranslations, onSet
             ? filterTranslations(data.translations, searchQuery)
             : data.translations;
 
-          const translationByLanguages = groupBy(filteredTranslations, 'languageName');
+          const translationByLanguages = groupBy(
+            getTranslations(filteredTranslations),
+            'languageName',
+          );
           const selectedTranslationLanguage = getLocaleName(lang).toLowerCase();
           const selectedTranslationGroup = translationByLanguages[selectedTranslationLanguage];
           const translationByLanguagesWithoutSelectedLanguage = omit(translationByLanguages, [
diff --git a/src/components/Navbar/SettingsDrawer/TranslationSelectionBody.tsx b/src/components/Navbar/SettingsDrawer/TranslationSelectionBody.tsx
index da57963f73..5790a8b9f6 100644
--- a/src/components/Navbar/SettingsDrawer/TranslationSelectionBody.tsx
+++ b/src/components/Navbar/SettingsDrawer/TranslationSelectionBody.tsx
@@ -24,7 +24,7 @@ import {
 import SearchQuerySource from '@/types/SearchQuerySource';
 import { makeTranslationsUrl } from '@/utils/apiPaths';
 import { logValueChange, logItemSelectionChange, logEmptySearchResults } from '@/utils/eventLogger';
-import filterTranslations from '@/utils/filter-translations';
+import filterTranslations, { getTranslations } from '@/utils/filter-translations';
 import { getLocaleName } from '@/utils/locale';
 import { TranslationsResponse } from 'types/ApiResponses';
 import PreferenceGroup from 'types/auth/PreferenceGroup';
@@ -147,7 +147,10 @@ const TranslationSelectionBody = () => {
             });
           }
 
-          const translationByLanguages = groupBy(filteredTranslations, 'languageName');
+          const translationByLanguages = groupBy(
+            getTranslations(filteredTranslations),
+            'languageName',
+          );
           const selectedTranslationLanguage = getLocaleName(lang).toLowerCase();
           const selectedTranslationGroup = translationByLanguages[selectedTranslationLanguage];
           const translationByLanguagesWithoutSelectedLanguage = omit(translationByLanguages, [
diff --git a/src/utils/filter-translations.ts b/src/utils/filter-translations.ts
index 8c3fe8a7a7..813b40a142 100644
--- a/src/utils/filter-translations.ts
+++ b/src/utils/filter-translations.ts
@@ -15,4 +15,19 @@ const filterTranslations = (
   return filteredTranslations;
 };
 
+/**
+ * Transforms an array of translations by converting the language name to lowercase.
+ * This is to temporarily fix the issue when BE returns the same language names
+ * but in different cases (e.g. 'Dutch' and 'dutch').
+ *
+ * @param {AvailableTranslation[]} translations - The array of translations to be transformed.
+ * @returns {AvailableTranslation[]} The transformed array of translations with language names in lowercase.
+ */
+export const getTranslations = (translations: AvailableTranslation[]): AvailableTranslation[] => {
+  return translations.map((translation) => ({
+    ...translation,
+    languageName: translation.languageName.toLowerCase(),
+  }));
+};
+
 export default filterTranslations;