diff --git a/components/layout/Footer.js b/components/layout/Footer.js
index 85f99e95..6b23a8e6 100644
--- a/components/layout/Footer.js
+++ b/components/layout/Footer.js
@@ -5,13 +5,14 @@ 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();
 
   return (
-    <footer className="container" dir={locale === 'ar-SA' ? 'rtl' : 'ltr'}>
+    <footer className="container" dir={rtlLocales.includes(locale) ? 'rtl' : 'ltr'}>
       <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 aeb489e3..3d2a4e49 100644
--- a/components/layout/Header.js
+++ b/components/layout/Header.js
@@ -11,6 +11,7 @@ import UserButton from 'components/settings/UserButton';
 import Logo from 'assets/logo.svg';
 import styles from './Header.module.css';
 import useLocale from 'hooks/useLocale';
+import { rtlLocales } from 'lib/lang';
 
 export default function Header() {
   const user = useSelector(state => state.user);
@@ -22,7 +23,7 @@ export default function Header() {
   }
 
   return (
-    <nav className="container" dir={locale === 'ar-SA' ? 'rtl' : 'ltr'}>
+    <nav className="container" dir={rtlLocales.includes(locale) ? 'rtl' : 'ltr'}>
       {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 b38e1cfb..7b19a819 100644
--- a/components/layout/Layout.js
+++ b/components/layout/Layout.js
@@ -3,6 +3,7 @@ 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();
@@ -14,7 +15,7 @@ export default function Layout({ title, children, header = true, footer = true }
       </Head>
 
       {header && <Header />}
-      <main className="container" dir={locale === 'ar-SA' ? 'rtl' : 'ltr'}>
+      <main className="container" dir={rtlLocales.includes(locale) ? 'rtl' : 'ltr'}>
         {children}
       </main>
       {footer && <Footer />}
diff --git a/lib/lang.js b/lib/lang.js
index 4d5b3bad..d25bdeb5 100644
--- a/lib/lang.js
+++ b/lib/lang.js
@@ -98,6 +98,8 @@ export const messages = {
   'ms-MY': msMYMessages,
 };
 
+export const rtlLocales = ['ar-SA', 'fa-IR'];
+
 export const dateLocales = {
   'ar-SA': arSA,
   'en-US': enUS,