diff --git a/components/layout/Footer.js b/components/layout/Footer.js
index 547896c3..85f99e95 100644
--- a/components/layout/Footer.js
+++ b/components/layout/Footer.js
@@ -1,19 +1,17 @@
 import React from 'react';
 import classNames from 'classnames';
-import { FormattedMessage, useIntl } from 'react-intl';
+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';
 
 export default function Footer() {
   const { current } = useVersion();
-  const intl = useIntl();
+  const [locale] = useLocale();
 
   return (
-    <footer
-      className="container"
-      dir={intl.formatMessage({ id: 'metrics.dir', defaultMessage: 'ltr' })}
-    >
+    <footer className="container" dir={locale === 'ar-SA' ? '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 bdb1b529..aeb489e3 100644
--- a/components/layout/Header.js
+++ b/components/layout/Header.js
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { FormattedMessage, useIntl } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 import { useSelector } from 'react-redux';
 import classNames from 'classnames';
 import Link from 'components/common/Link';
@@ -10,21 +10,19 @@ 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';
 
 export default function Header() {
   const user = useSelector(state => state.user);
   const [active, setActive] = useState(false);
-  const intl = useIntl();
+  const [locale] = useLocale();
 
   function handleClick() {
     setActive(state => !state);
   }
 
   return (
-    <nav
-      className="container"
-      dir={intl.formatMessage({ id: 'metrics.dir', defaultMessage: 'ltr' })}
-    >
+    <nav className="container" dir={locale === 'ar-SA' ? '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 41be8547..b38e1cfb 100644
--- a/components/layout/Layout.js
+++ b/components/layout/Layout.js
@@ -2,22 +2,19 @@ import React from 'react';
 import Head from 'next/head';
 import Header from 'components/layout/Header';
 import Footer from 'components/layout/Footer';
-import { useIntl } from 'react-intl';
+import useLocale from 'hooks/useLocale';
 
 export default function Layout({ title, children, header = true, footer = true }) {
-  const intl = useIntl();
+  const [locale] = useLocale();
 
   return (
     <>
-      <Head dir={intl.formatMessage({ id: 'metrics.dir', defaultMessage: 'ltr' })}>
+      <Head>
         <title>umami{title && ` - ${title}`}</title>
       </Head>
 
       {header && <Header />}
-      <main
-        className="container"
-        dir={intl.formatMessage({ id: 'metrics.dir', defaultMessage: 'ltr' })}
-      >
+      <main className="container" dir={locale === 'ar-SA' ? 'rtl' : 'ltr'}>
         {children}
       </main>
       {footer && <Footer />}
diff --git a/lang/ar-SA.json b/lang/ar-SA.json
index 59ef5055..07340e25 100644
--- a/lang/ar-SA.json
+++ b/lang/ar-SA.json
@@ -96,6 +96,5 @@
   "metrics.referrers": "التحويلات",
   "metrics.unique-visitors": "زائرون فريدون",
   "metrics.views": "مشاهدات",
-  "metrics.visitors": "زوار",
-  "metrics.dir": "rtl"
+  "metrics.visitors": "زوار"
 }
