diff --git a/components/layout/Footer.js b/components/layout/Footer.js
index 0e1a4cb5..33eda5e2 100644
--- a/components/layout/Footer.js
+++ b/components/layout/Footer.js
@@ -5,14 +5,13 @@ import Link from 'components/common/Link';
 import styles from './Footer.module.css';
 import useVersion from 'hooks/useVersion';
 import useLocale from 'hooks/useLocale';
-import { rtlLocales } from 'lib/lang';
 
 export default function Footer() {
   const { current } = useVersion();
-  const { locale } = useLocale();
+  const { dir } = useLocale();
 
   return (
-    <footer className="container" dir={rtlLocales.includes(locale) ? 'rtl' : 'ltr'}>
+    <footer className="container" dir={dir}>
       <div className={classNames(styles.footer, 'row')}>
         <div className="col-12 col-md-4" />
         <div className="col-12 col-md-4">
diff --git a/components/layout/Header.js b/components/layout/Header.js
index dff9246c..5aebc05c 100644
--- a/components/layout/Header.js
+++ b/components/layout/Header.js
@@ -12,21 +12,20 @@ import Button from 'components/common/Button';
 import Logo from 'assets/logo.svg';
 import styles from './Header.module.css';
 import useLocale from 'hooks/useLocale';
-import { rtlLocales } from 'lib/lang';
 import XMark from 'assets/xmark.svg';
 import Bars from 'assets/bars.svg';
 
 export default function Header() {
   const user = useSelector(state => state.user);
   const [active, setActive] = useState(false);
-  const { locale } = useLocale();
+  const { locale, dir } = useLocale();
 
   function handleClick() {
     setActive(state => !state);
   }
 
   return (
-    <nav className="container" dir={rtlLocales.includes(locale) ? 'rtl' : 'ltr'}>
+    <nav className="container" dir={dir}>
       {user?.is_admin && <UpdateNotice />}
       <div className={classNames(styles.header, 'row align-items-center')}>
         <div className={styles.nav}>
diff --git a/components/layout/Layout.js b/components/layout/Layout.js
index a2f7a914..87aa3cfe 100644
--- a/components/layout/Layout.js
+++ b/components/layout/Layout.js
@@ -3,11 +3,9 @@ import Head from 'next/head';
 import Header from 'components/layout/Header';
 import Footer from 'components/layout/Footer';
 import useLocale from 'hooks/useLocale';
-import { rtlLocales } from 'lib/lang';
 
 export default function Layout({ title, children, header = true, footer = true }) {
-  const { locale } = useLocale();
-  const dir = rtlLocales.includes(locale) ? 'rtl' : 'ltr';
+  const { dir } = useLocale();
 
   return (
     <>
diff --git a/hooks/useLocale.js b/hooks/useLocale.js
index 49d41d54..0a588a46 100644
--- a/hooks/useLocale.js
+++ b/hooks/useLocale.js
@@ -4,6 +4,7 @@ import { setLocale } from 'redux/actions/app';
 import { useRouter } from 'next/router';
 import { get, setItem } from 'lib/web';
 import { LOCALE_CONFIG } from 'lib/constants';
+import { languages } from 'lib/lang';
 import useForceUpdate from 'hooks/useForceUpdate';
 import enUS from 'public/lang/en-US.json';
 
@@ -16,6 +17,7 @@ export default function useLocale() {
   const dispatch = useDispatch();
   const { basePath } = useRouter();
   const forceUpdate = useForceUpdate();
+  const dir = languages[locale]?.dir || 'ltr';
 
   async function loadMessages(locale) {
     const { ok, data } = await get(`${basePath}/lang/${locale}.json`);
@@ -45,5 +47,5 @@ export default function useLocale() {
     }
   }, [locale]);
 
-  return { locale, saveLocale, messages };
+  return { locale, saveLocale, messages, dir };
 }
diff --git a/lib/date.js b/lib/date.js
index 578d9014..5c57e9d0 100644
--- a/lib/date.js
+++ b/lib/date.js
@@ -26,7 +26,7 @@ import {
   format,
 } from 'date-fns';
 import { enUS } from 'date-fns/locale';
-import { dateLocales } from 'lib/lang';
+import { languages } from 'lib/lang';
 
 export function getTimezone() {
   return moment.tz.guess();
@@ -38,7 +38,7 @@ export function getLocalTime(t) {
 
 export function getDateRange(value, locale = 'en-US') {
   const now = new Date();
-  const localeOptions = dateLocales[locale];
+  const dateLocale = languages[locale]?.dateLocale || enUS;
 
   const { num, unit } = value.match(/^(?<num>[0-9]+)(?<unit>hour|day|week|month|year)$/).groups;
 
@@ -53,8 +53,8 @@ export function getDateRange(value, locale = 'en-US') {
         };
       case 'week':
         return {
-          startDate: startOfWeek(now, { locale: localeOptions }),
-          endDate: endOfWeek(now, { locale: localeOptions }),
+          startDate: startOfWeek(now, { locale: dateLocale }),
+          endDate: endOfWeek(now, { locale: dateLocale }),
           unit: 'day',
           value,
         };
@@ -164,6 +164,6 @@ export const customFormats = {
 
 export function dateFormat(date, str, locale = 'en-US') {
   return format(date, customFormats?.[locale]?.[str] || str, {
-    locale: dateLocales[locale] || enUS,
+    locale: languages[locale]?.dateLocale || enUS,
   });
 }
diff --git a/lib/lang.js b/lib/lang.js
index c7bd9343..7f8d7dbd 100644
--- a/lib/lang.js
+++ b/lib/lang.js
@@ -38,83 +38,41 @@ import {
 } from 'date-fns/locale';
 
 export const languages = {
-  'ar-SA': { label: 'العربية', display: 'ar' },
-  'zh-CN': { label: '中文', display: 'cn' },
-  'zh-TW': { label: '中文(繁體)', display: 'tw' },
-  'ca-ES': { label: 'Català', display: 'ca' },
-  'cs-CZ': { label: 'Čeština', display: 'cs' },
-  'da-DK': { label: 'Dansk', display: 'da' },
-  'de-DE': { label: 'Deutsch', display: 'de' },
-  'en-US': { label: 'English (US)', display: 'en' },
-  'en-GB': { label: 'English (UK)', display: 'en-GB'},
-  'es-MX': { label: 'Español', display: 'es' },
-  'fa-IR': { label: 'فارسی', display: 'fa' },
-  'fo-FO': { label: 'Føroyskt', display: 'fo' },
-  'fr-FR': { label: 'Français', display: 'fr' },
-  'el-GR': { label: 'Ελληνικά', display: 'el' },
-  'he-IL': { label: 'עברית', display: 'he' },
-  'hi-IN': { label: 'हिन्दी', display: 'hi' },
-  'hu-HU': { label: 'Hungarian', display: 'hu' },
-  'it-IT': { label: 'Italiano', display: 'it' },
-  'id-ID': { label: 'Bahasa Indonesia', display: 'id' },
-  'ja-JP': { label: '日本語', display: 'ja' },
-  'ko-KR': { label: '한국어', display: 'ko' },
-  'ms-MY': { label: 'Malay', display: 'ms' },
-  'mn-MN': { label: 'Монгол', display: 'mn' },
-  'nl-NL': { label: 'Nederlands', display: 'nl' },
-  'nb-NO': { label: 'Norsk Bokmål', display: 'nb' },
-  'pl-PL': { label: 'Polski', display: 'pl' },
-  'pt-PT': { label: 'Português', display: 'pt' },
-  'pt-BR': { label: 'Português do Brasil', display: 'pt-BR' },
-  'ru-RU': { label: 'Русский', display: 'ru' },
-  'ro-RO': { label: 'Română', display: 'ro' },
-  'sk-SK': { label: 'Slovenčina', display: 'sk' },
-  'sl-SI': { label: 'Slovenščina', display: 'sl' },
-  'fi-FI': { label: 'Suomi', display: 'fi' },
-  'sv-SE': { label: 'Svenska', display: 'sv' },
-  'ta-IN': { label: 'தமிழ்', display: 'ta' },
-  'tr-TR': { label: 'Türkçe', display: 'tr' },
-  'uk-UA': { label: 'українська', display: 'uk' },
-};
-
-export const rtlLocales = ['ar-SA', 'fa-IR'];
-
-export const dateLocales = {
-  'ar-SA': arSA,
-  'en-US': enUS,
-  'en-GB': enGB,
-  'nl-NL': nl,
-  'zh-CN': zhCN,
-  'zh-TW': zhTW,
-  'de-DE': de,
-  'da-DK': da,
-  'ru-RU': ru,
-  'sv-SE': sv,
-  'tr-TR': tr,
-  'ja-JP': ja,
-  'es-MX': es,
-  'fr-FR': fr,
-  'mn-MN': mn,
-  'el-GR': el,
-  'fo-FO': da,
-  'pt-PT': pt,
-  'pt-BR': ptBR,
-  'ro-RO': ro,
-  'nb-NO': nb,
-  'id-ID': id,
-  'uk-UA': uk,
-  'fi-FI': fi,
-  'cs-CZ': cs,
-  'sk-SK': sk,
-  'pl-PL': pl,
-  'ta-In': ta,
-  'hi-IN': hi,
-  'he-IL': he,
-  'it-IT': it,
-  'fa-IR': faIR,
-  'ms-MY': ms,
-  'ca-ES': ca,
-  'hu-HU': hu,
-  'ko-KR': ko,
-  'sl-SI': sl,
+  'ar-SA': { label: 'العربية', dateLocale: arSA, dir: 'rtl' },
+  'zh-CN': { label: '中文', dateLocale: zhCN },
+  'zh-TW': { label: '中文(繁體)', dateLocale: zhTW },
+  'ca-ES': { label: 'Català', dateLocale: ca },
+  'cs-CZ': { label: 'Čeština', dateLocale: cs },
+  'da-DK': { label: 'Dansk', dateLocale: da },
+  'de-DE': { label: 'Deutsch', dateLocale: de },
+  'en-US': { label: 'English (US)', dateLocale: enUS },
+  'en-GB': { label: 'English (UK)', dateLocale: enGB },
+  'es-MX': { label: 'Español', dateLocale: es },
+  'fa-IR': { label: 'فارسی', dateLocale: faIR, dir: 'rtl' },
+  'fo-FO': { label: 'Føroyskt' },
+  'fr-FR': { label: 'Français', dateLocale: fr },
+  'el-GR': { label: 'Ελληνικά', dateLocale: el },
+  'he-IL': { label: 'עברית', dateLocale: he },
+  'hi-IN': { label: 'हिन्दी', dateLocale: hi },
+  'hu-HU': { label: 'Hungarian', dateLocale: hu },
+  'it-IT': { label: 'Italiano', dateLocale: it },
+  'id-ID': { label: 'Bahasa Indonesia', dateLocale: id },
+  'ja-JP': { label: '日本語', dateLocale: ja },
+  'ko-KR': { label: '한국어', dateLocale: ko },
+  'ms-MY': { label: 'Malay', dateLocale: ms },
+  'mn-MN': { label: 'Монгол', dateLocale: mn },
+  'nl-NL': { label: 'Nederlands', dateLocale: nl },
+  'nb-NO': { label: 'Norsk Bokmål', dateLocale: nb },
+  'pl-PL': { label: 'Polski', dateLocale: pl },
+  'pt-PT': { label: 'Português', dateLocale: pt },
+  'pt-BR': { label: 'Português do Brasil', dateLocale: ptBR },
+  'ru-RU': { label: 'Русский', dateLocale: ru },
+  'ro-RO': { label: 'Română', dateLocale: ro },
+  'sk-SK': { label: 'Slovenčina', dateLocale: sk },
+  'sl-SI': { label: 'Slovenščina', dateLocale: sl },
+  'fi-FI': { label: 'Suomi', dateLocale: fi },
+  'sv-SE': { label: 'Svenska', dateLocale: sv },
+  'ta-IN': { label: 'தமிழ்', dateLocale: ta },
+  'tr-TR': { label: 'Türkçe', dateLocale: tr },
+  'uk-UA': { label: 'українська', dateLocale: uk },
 };