diff --git a/components/layout/Footer.js b/components/layout/Footer.js
index 73e010bc..6b23a8e6 100644
--- a/components/layout/Footer.js
+++ b/components/layout/Footer.js
@@ -4,11 +4,15 @@ import { FormattedMessage } from 'react-intl';
 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">
+    <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 f607e32a..3d2a4e49 100644
--- a/components/layout/Header.js
+++ b/components/layout/Header.js
@@ -10,17 +10,20 @@ import UpdateNotice from 'components/common/UpdateNotice';
 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);
   const [active, setActive] = useState(false);
+  const [locale] = useLocale();
 
   function handleClick() {
     setActive(state => !state);
   }
 
   return (
-    <nav className="container">
+    <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 3b68a581..7b19a819 100644
--- a/components/layout/Layout.js
+++ b/components/layout/Layout.js
@@ -2,15 +2,22 @@ import React from 'react';
 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();
+
   return (
     <>
       <Head>
         <title>umami{title && ` - ${title}`}</title>
       </Head>
+
       {header && <Header />}
-      <main className="container">{children}</main>
+      <main className="container" dir={rtlLocales.includes(locale) ? 'rtl' : 'ltr'}>
+        {children}
+      </main>
       {footer && <Footer />}
       <div id="__modals" />
     </>
diff --git a/lang/ar-SA.json b/lang/ar-SA.json
new file mode 100644
index 00000000..07340e25
--- /dev/null
+++ b/lang/ar-SA.json
@@ -0,0 +1,100 @@
+{
+  "label.accounts": "الحسابات",
+  "label.add-account": "إضافة حساب",
+  "label.add-website": "إضافة موقع",
+  "label.administrator": "مدير عام؟",
+  "label.all": "الكل",
+  "label.all-events": "كافة الأحداث",
+  "label.all-websites": "كافة المواقع",
+  "label.back": "للخلف",
+  "label.cancel": "إلغاء",
+  "label.change-password": "تغيير كلمة المرور",
+  "label.confirm-password": "تأكيد كلمة المرور",
+  "label.copy-to-clipboard": "نسخ للحافظة",
+  "label.current-password": "كلمة المرور الحالية",
+  "label.custom-range": "فترة مخصصة",
+  "label.dashboard": "الشاشة الرئيسية",
+  "label.date-range": "فترة مخصصة",
+  "label.default-date-range": "الفترة المخصصة الافتراضية",
+  "label.delete": "حذف",
+  "label.delete-account": "حذف الحساب",
+  "label.delete-website": "حذف الموقع",
+  "label.dismiss": "اخفاء",
+  "label.domain": "نطاق",
+  "label.edit": "تعديل",
+  "label.edit-account": "تعديل الحساب",
+  "label.edit-website": "تعديل الموقع",
+  "label.enable-share-url": "تفعيل مشاركة الرابط",
+  "label.invalid": "غير صحيح",
+  "label.invalid-domain": "النطاق غير صحيح",
+  "label.last-days": "اخر {x} يوم/ايام",
+  "label.last-hours": "اخر {x} ساعة/ساعات",
+  "label.logged-in-as": "تم تسجيل الدخول كـ {username}",
+  "label.login": "تسجيل الدخول",
+  "label.logout": "تسجيل الخروج",
+  "label.more": "المزيد",
+  "label.name": "الإسم",
+  "label.new-password": "كلمة مرور جديدة",
+  "label.password": "كلمة المرور",
+  "label.passwords-dont-match": "كلمة المرور غير متطابقة",
+  "label.profile": "الملف الشخصي",
+  "label.realtime": "الوقت الفعلي",
+  "label.realtime-logs": "سجلات الوقت الفعلي",
+  "label.refresh": "تحديث",
+  "label.required": "اجباري",
+  "label.reset": "اعادة تعيين",
+  "label.save": "حفظ",
+  "label.settings": "اعدادات",
+  "label.share-url": "مشاركة الرابط",
+  "label.single-day": "يوم واحد",
+  "label.this-month": "الشهر الحالي",
+  "label.this-week": "الاسبوع الحالي",
+  "label.this-year": "السنة الحالية",
+  "label.timezone": "المنطقة الزمنية",
+  "label.today": "اليوم",
+  "label.tracking-code": "كود التتبع",
+  "label.unknown": "غير معروف",
+  "label.username": "اسم المستخدم",
+  "label.view-details": "عرض التفاصيل",
+  "label.websites": "المواقع",
+  "message.active-users": "{x} حاليا {x, plural, one {زائر واحد} other {زوار}}",
+  "message.confirm-delete": "هل أنت متأكد من حذف {target}?",
+  "message.copied": "تم النسخ!",
+  "message.delete-warning": "كافة البيانات المرتبطة سيم حذفها ايضا.",
+  "message.failure": "حدث خطأ ما.",
+  "message.get-share-url": "احصل على رابط المشاركة",
+  "message.get-tracking-code": "احصل على كود التتبع",
+  "message.go-to-settings": "الذهاب إلى الإعدادات",
+  "message.incorrect-username-password": "اسم المستخدم او كلمة المرور غير صحيحة.",
+  "message.log.visitor": "زائر من {country} يستخدم {browser} على {os} {device}",
+  "message.new-version-available": "توجد نسخة جديدة من umami رقم {version} سارع بالتحديث!",
+  "message.no-data-available": "لا توجد بيانات متاحة.",
+  "message.no-websites-configured": "لم تقم بإعداد اي موقع.",
+  "message.page-not-found": "الصفحة غير موجودة.",
+  "message.powered-by": "مشغل بواسطة {name}",
+  "message.save-success": "تم الحفظ بنجاح.",
+  "message.share-url": "هذا الرابط الذي تم مشاركته بشكل عام لـ {target}.",
+  "message.track-stats": "لتتبع الاحصاىيات لـ {target}, ضع الكود التالي في منطقة {head} في موقعك.",
+  "message.type-delete": "اكتب {delete} في الحقل التالي لتأكيد الحذف.",
+  "metrics.actions": "اجراءات",
+  "metrics.average-visit-time": "متوسط وقت الزيارة",
+  "metrics.bounce-rate": "معدل الارتداد",
+  "metrics.browsers": "المتصفحات",
+  "metrics.countries": "الدول",
+  "metrics.device.desktop": "كمبيوتر",
+  "metrics.device.laptop": "لابتوب",
+  "metrics.device.mobile": "جوال",
+  "metrics.device.tablet": "تابلت",
+  "metrics.devices": "الأجهزة",
+  "metrics.events": "الأحداث",
+  "metrics.filter.combined": "مجمعة",
+  "metrics.filter.domain-only": "نطاق فقط",
+  "metrics.filter.raw": "مفصلة",
+  "metrics.operating-systems": "نظام التشغيل",
+  "metrics.page-views": "مشاهدات الصفحة",
+  "metrics.pages": "الصفحات",
+  "metrics.referrers": "التحويلات",
+  "metrics.unique-visitors": "زائرون فريدون",
+  "metrics.views": "مشاهدات",
+  "metrics.visitors": "زوار"
+}
diff --git a/lib/lang.js b/lib/lang.js
index a6f54e56..6415ddae 100644
--- a/lib/lang.js
+++ b/lib/lang.js
@@ -1,4 +1,5 @@
 import {
+  arSA,
   cs,
   sk,
   da,
@@ -31,6 +32,7 @@ import {
   zhTW,
   ca,
 } from 'date-fns/locale';
+import arSAMessages from 'lang-compiled/ar-SA.json';
 import enMessages from 'lang-compiled/en-US.json';
 import nlMessages from 'lang-compiled/nl-NL.json';
 import zhCNMessages from 'lang-compiled/zh-CN.json';
@@ -65,6 +67,7 @@ import msMYMessages from 'lang-compiled/ms-MY.json';
 import caMessages from 'lang-compiled/ca-ES.json';
 
 export const messages = {
+  'ar-SA': arSAMessages,
   'en-US': enMessages,
   'nl-NL': nlMessages,
   'zh-CN': zhCNMessages,
@@ -99,7 +102,10 @@ export const messages = {
   'ca-ES': caMessages,
 };
 
+export const rtlLocales = ['ar-SA', 'fa-IR'];
+
 export const dateLocales = {
+  'ar-SA': arSA,
   'en-US': enUS,
   'nl-NL': nl,
   'zh-CN': zhCN,
@@ -135,6 +141,7 @@ export const dateLocales = {
 };
 
 export const menuOptions = [
+  { label: 'العربية', value: 'ar-SA', display: 'ar' },
   { label: '中文', value: 'zh-CN', display: 'cn' },
   { label: '中文(繁體)', value: 'zh-TW', display: 'tw' },
   { label: 'Català', value: 'ca-ES', display: 'ca' },
diff --git a/package.json b/package.json
index 45f62b95..9333b888 100644
--- a/package.json
+++ b/package.json
@@ -119,6 +119,7 @@
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-import": "^13.0.0",
     "postcss-preset-env": "^6.7.0",
+    "postcss-rtlcss": "^3.3.2",
     "prettier": "^2.3.0",
     "prettier-eslint": "^12.0.0",
     "prisma": "2.23.0",
diff --git a/postcss.config.js b/postcss.config.js
index c71feca5..0f645507 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,5 +1,6 @@
 module.exports = {
   plugins: [
+    'postcss-rtlcss',
     'postcss-flexbugs-fixes',
     [
       'postcss-preset-env',
