diff --git a/apps/web/components/I18nLanguageHandler.tsx b/apps/web/components/I18nLanguageHandler.tsx
index 3072b3504c..f7c9ba2930 100644
--- a/apps/web/components/I18nLanguageHandler.tsx
+++ b/apps/web/components/I18nLanguageHandler.tsx
@@ -1,7 +1,7 @@
+import { isEmpty } from "lodash";
 import { useTranslation } from "next-i18next";
 import { useEffect } from "react";
 
-import { getDirFromLang } from "@calcom/lib/i18n";
 import { trpc } from "@calcom/trpc/react";
 
 export function useViewerI18n() {
@@ -22,16 +22,18 @@ export function useViewerI18n() {
  */
 const I18nLanguageHandler = (): null => {
   const { i18n } = useTranslation("common");
-  const locale = useViewerI18n().data?.locale || "en";
+  const locale = useViewerI18n().data?.locale || i18n.language;
 
   useEffect(() => {
-    if (locale && i18n.language && i18n.language !== locale) {
-      if (typeof i18n.changeLanguage === "function") i18n.changeLanguage(locale);
+    // bail early when i18n = {}
+    if (isEmpty(i18n)) return;
+    // if locale is ready and the i18n.language does != locale - changeLanguage
+    if (locale && i18n.language !== locale) {
+      i18n.changeLanguage(locale);
     }
-
-    const dir = getDirFromLang(locale);
+    // set dir="rtl|ltr"
+    document.dir = i18n.dir();
     document.documentElement.setAttribute("lang", locale);
-    document.documentElement.setAttribute("dir", dir);
   }, [locale, i18n]);
 
   return null;
diff --git a/apps/web/pages/_document.tsx b/apps/web/pages/_document.tsx
index d3c2b696d2..f7b51e9352 100644
--- a/apps/web/pages/_document.tsx
+++ b/apps/web/pages/_document.tsx
@@ -3,8 +3,6 @@ import type { DocumentContext, DocumentProps } from "next/document";
 import Document, { Head, Html, Main, NextScript } from "next/document";
 import { z } from "zod";
 
-import { getDirFromLang } from "@calcom/lib/i18n";
-
 import { csp } from "@lib/csp";
 
 type Props = Record<string, unknown> & DocumentProps;
@@ -38,9 +36,8 @@ class MyDocument extends Document<Props> {
     const { isEmbed } = this.props;
     const nonceParsed = z.string().safeParse(this.props.nonce);
     const nonce = nonceParsed.success ? nonceParsed.data : "";
-    const dir = getDirFromLang(locale);
     return (
-      <Html lang={locale} dir={dir}>
+      <Html lang={locale}>
         <Head nonce={nonce}>
           <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
           <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
diff --git a/packages/lib/i18n.ts b/packages/lib/i18n.ts
index 4b26a28743..d58df3006b 100644
--- a/packages/lib/i18n.ts
+++ b/packages/lib/i18n.ts
@@ -13,6 +13,3 @@ export function getLocaleFromHeaders(req: IncomingMessage): string {
   }
   return preferredLocale ?? i18n.defaultLocale;
 }
-
-export const getDirFromLang = (locale: string | undefined) =>
-  locale === "ar" || locale === "he" ? "rtl" : "ltr";