diff --git a/apps/web/pages/_applyThemeForDocument.ts b/apps/web/pages/_applyThemeForDocument.ts
index 500497db38..35d9d288c4 100644
--- a/apps/web/pages/_applyThemeForDocument.ts
+++ b/apps/web/pages/_applyThemeForDocument.ts
@@ -57,3 +57,22 @@ export const applyTheme = function () {
     console.error("Error applying theme:", e);
   }
 };
+
+// ToDesktop class application function - will be stringified and injected. So, it must not use anything from the closure
+export const applyToDesktopClass = function () {
+  try {
+    const onReady = () => {
+      if (typeof window !== "undefined" && window.todesktop && document.documentElement) {
+        document.documentElement.classList.add("todesktop");
+      } else if (document.documentElement) {
+        return;
+      } else {
+        requestAnimationFrame(onReady);
+      }
+    };
+
+    requestAnimationFrame(onReady);
+  } catch (e) {
+    console.error("Error applying todesktop class:", e);
+  }
+};
diff --git a/apps/web/pages/_document.tsx b/apps/web/pages/_document.tsx
index 6f59ad8db2..b11a621a41 100644
--- a/apps/web/pages/_document.tsx
+++ b/apps/web/pages/_document.tsx
@@ -5,7 +5,7 @@ import Document, { Head, Html, Main, NextScript } from "next/document";
 
 import { IS_PRODUCTION } from "@calcom/lib/constants";
 
-import { applyTheme } from "./_applyThemeForDocument";
+import { applyTheme, applyToDesktopClass } from "./_applyThemeForDocument";
 
 type Props = Record<string, unknown> & DocumentProps & { newLocale: string };
 
@@ -50,6 +50,7 @@ class MyDocument extends Document<Props> {
               __html: `
               window.calNewLocale = "${newLocale}";
               (${applyTheme.toString()})();
+              (${applyToDesktopClass.toString()})();
             `,
             }}
           />