diff --git a/components/hooks/useUserLanguage.ts b/components/hooks/useUserLanguage.ts
index 63d225c87c..5cd7978f3f 100644
--- a/components/hooks/useUserLanguage.ts
+++ b/components/hooks/useUserLanguage.ts
@@ -2,12 +2,13 @@ import { useState, useEffect } from 'react'
 import Cookies from 'js-cookie'
 import { useRouter } from 'next/router'
 
-import { languageKeys } from '../../lib/languages.js'
+import { useLanguages } from 'components/context/LanguagesContext'
 import { PREFERRED_LOCALE_COOKIE_NAME } from '../../lib/constants.js'
 
 export function useUserLanguage() {
   const { locale } = useRouter()
   const [userLanguage, setUserLanguage] = useState<string>('en')
+  const { languages } = useLanguages()
 
   useEffect(() => {
     const languagePreferred = [
@@ -20,7 +21,8 @@ export function useUserLanguage() {
       // the region. E.g. `en-US` but in our application, we don't use
       // the region.
       .map((lang) => lang && lang.slice(0, 2).toLowerCase())
-      .find((lang) => lang && languageKeys.includes(lang))
+      .find((lang) => lang && lang in languages)
+
     if (languagePreferred) {
       setUserLanguage(languagePreferred)
     }