diff --git a/src/components/Layout/LanguagePicker/index.tsx b/src/components/Layout/LanguagePicker/index.tsx
index e1aa8bc8c..25111f302 100644
--- a/src/components/Layout/LanguagePicker/index.tsx
+++ b/src/components/Layout/LanguagePicker/index.tsx
@@ -1,11 +1,11 @@
-import React, { useState, useRef, useContext } from 'react';
-import Transition from '../../Transition';
-import useClickOutside from '../../../hooks/useClickOutside';
+import React, { useContext, useRef, useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
 import {
-  LanguageContext,
   AvailableLocales,
+  LanguageContext,
 } from '../../../context/LanguageContext';
-import { useIntl, defineMessages } from 'react-intl';
+import useClickOutside from '../../../hooks/useClickOutside';
+import Transition from '../../Transition';
 
 const messages = defineMessages({
   changelanguage: 'Change Language',
@@ -17,6 +17,10 @@ type AvailableLanguageObject = Record<
 >;
 
 const availableLanguages: AvailableLanguageObject = {
+  ca: {
+    code: 'ca',
+    display: 'Català',
+  },
   de: {
     code: 'de',
     display: 'Deutsch',
diff --git a/src/context/LanguageContext.tsx b/src/context/LanguageContext.tsx
index 078a81730..6a0a12ab4 100644
--- a/src/context/LanguageContext.tsx
+++ b/src/context/LanguageContext.tsx
@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react';
 
 export type AvailableLocales =
+  | 'ca'
   | 'de'
   | 'en'
   | 'es'
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index aeaf5d10a..a67084d94 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -21,6 +21,8 @@ import '../styles/globals.css';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const loadLocaleData = (locale: AvailableLocales): Promise<any> => {
   switch (locale) {
+    case 'ca':
+      return import('../i18n/locale/ca.json');
     case 'de':
       return import('../i18n/locale/de.json');
     case 'es':