diff --git a/src/css/themes/leaf.scss b/src/css/themes/leaf.scss
index 6dfca12..bc28d97 100644
--- a/src/css/themes/leaf.scss
+++ b/src/css/themes/leaf.scss
@@ -31,3 +31,8 @@
     color: var(--white);
   }
 }
+
+.surah .leaf.theme.ar {
+  direction: rtl;
+  font-family: "Vazirmatn Regular";
+}
diff --git a/src/css/themes/moon.scss b/src/css/themes/moon.scss
index 92348bb..9cf0d11 100644
--- a/src/css/themes/moon.scss
+++ b/src/css/themes/moon.scss
@@ -33,3 +33,8 @@
     font-weight: bold;
   }
 }
+
+.surah .leaf.theme.ar {
+  direction: rtl;
+  font-family: "Vazirmatn Regular";
+}
diff --git a/src/js/pages/TheSurahPage.tsx b/src/js/pages/TheSurahPage.tsx
index e2b6c21..3816e9a 100644
--- a/src/js/pages/TheSurahPage.tsx
+++ b/src/js/pages/TheSurahPage.tsx
@@ -31,7 +31,7 @@ function TheSurahPage ({ locale, surahId }: PageProps) {
   }, [surahIsLoaded]);
 
   return (
-    <div className={classNames(theme, 'theme')}>
+    <div className={classNames(theme, locale, 'theme')}>
       <div className='flex-image'>
         <div className='image' />
       </div>