diff --git a/api/v1/user_setting.go b/api/v1/user_setting.go
index 63bf69d90..52ae45803 100644
--- a/api/v1/user_setting.go
+++ b/api/v1/user_setting.go
@@ -41,6 +41,7 @@ func (key UserSettingKey) String() string {
 
 var (
 	UserSettingLocaleValue = []string{
+		"ar",
 		"de",
 		"en",
 		"es",
diff --git a/web/src/App.tsx b/web/src/App.tsx
index 1a0fe56ea..13906505e 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -88,6 +88,11 @@ const App = () => {
     storage.set({
       locale: locale,
     });
+    if (locale === "ar") {
+      document.documentElement.setAttribute("dir", "rtl");
+    } else {
+      document.documentElement.setAttribute("dir", "ltr");
+    }
   }, [locale]);
 
   useEffect(() => {
diff --git a/web/src/i18n.ts b/web/src/i18n.ts
index 7fa494eae..840e9af96 100644
--- a/web/src/i18n.ts
+++ b/web/src/i18n.ts
@@ -4,6 +4,7 @@ import toast from "react-hot-toast";
 import { initReactI18next } from "react-i18next";
 
 export const availableLocales = [
+  "ar",
   "de",
   "en",
   "es",
diff --git a/web/src/locales/locale_updater.py b/web/src/locales/locale_updater.py
index d8fa92e2f..8c1417664 100644
--- a/web/src/locales/locale_updater.py
+++ b/web/src/locales/locale_updater.py
@@ -131,6 +131,7 @@ def get_code_name(json_filename):
 
     # Map language code to code name
     lang_map = {
+        "ar": "ar",
         "de": "de",
         "en": "en",
         "es": "es",