From 26cdb6521f415fec05fe3d4d2193e0e33c3b4b21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Efra=C3=ADn=20Roch=C3=ADn?= <roae.85@gmail.com>
Date: Tue, 18 Apr 2023 11:45:32 -0700
Subject: [PATCH] perf: Adds PageWrapper to pages (#8344)

* Adds PageWrapper to pages

* Add missing PageWrapper

---------

Co-authored-by: Keith Williams <keithwillcode@gmail.com>
Co-authored-by: Hariom Balhara <hariombalhara@gmail.com>
---
 apps/web/components/PageWrapper.tsx           | 99 +++++++++++++++++++
 apps/web/lib/app-providers.tsx                |  1 +
 apps/web/pages/404.tsx                        |  4 +
 apps/web/pages/500.tsx                        |  4 +
 apps/web/pages/[user].tsx                     |  3 +
 apps/web/pages/[user]/[type].tsx              |  2 +
 apps/web/pages/[user]/book.tsx                |  2 +
 apps/web/pages/_app.tsx                       | 77 +--------------
 apps/web/pages/apps/[slug]/[...pages].tsx     |  7 +-
 apps/web/pages/apps/[slug]/index.tsx          |  3 +
 apps/web/pages/apps/[slug]/setup.tsx          |  4 +
 apps/web/pages/apps/categories/[category].tsx |  4 +
 apps/web/pages/apps/categories/index.tsx      |  4 +
 apps/web/pages/apps/index.tsx                 |  3 +
 apps/web/pages/apps/installed/[category].tsx  |  3 +
 apps/web/pages/auth/error.tsx                 |  3 +
 apps/web/pages/auth/forgot-password/[id].tsx  |  3 +-
 apps/web/pages/auth/forgot-password/index.tsx |  2 +
 apps/web/pages/auth/login.tsx                 |  2 +
 apps/web/pages/auth/logout.tsx                |  3 +-
 apps/web/pages/auth/saml-idp.tsx              |  3 +
 apps/web/pages/auth/setup/index.tsx           |  3 +-
 apps/web/pages/auth/signin.tsx                |  4 +
 apps/web/pages/auth/sso/[provider].tsx        |  4 +
 apps/web/pages/auth/sso/direct.tsx            |  4 +
 apps/web/pages/auth/verify.tsx                |  3 +
 apps/web/pages/availability/[schedule].tsx    |  3 +
 apps/web/pages/availability/index.tsx         |  3 +
 apps/web/pages/availability/troubleshoot.tsx  |  3 +
 apps/web/pages/booking/[uid].tsx              |  2 +
 apps/web/pages/bookings/[status].tsx          |  3 +
 apps/web/pages/d/[link]/[slug].tsx            |  2 +
 apps/web/pages/d/[link]/book.tsx              |  2 +
 apps/web/pages/event-types/[type]/index.tsx   |  3 +
 apps/web/pages/event-types/index.tsx          |  3 +
 .../web/pages/getting-started/[[...step]].tsx |  2 +
 apps/web/pages/insights/index.tsx             |  4 +
 apps/web/pages/maintenance.tsx                |  4 +
 apps/web/pages/more.tsx                       |  3 +
 apps/web/pages/payment/[uid].tsx              |  4 +-
 .../pages/settings/admin/apps/[category].tsx  |  2 +
 apps/web/pages/settings/admin/flags.tsx       |  2 +
 .../pages/settings/admin/impersonation.tsx    |  2 +
 apps/web/pages/settings/admin/index.tsx       |  2 +
 .../pages/settings/admin/users/[id]/edit.tsx  | 10 +-
 apps/web/pages/settings/admin/users/add.tsx   | 10 +-
 apps/web/pages/settings/admin/users/index.tsx | 10 +-
 apps/web/pages/settings/billing/index.tsx     |  3 +
 .../web/pages/settings/developer/api-keys.tsx |  3 +
 .../developer/webhooks/[id]/index.tsx         | 10 +-
 .../settings/developer/webhooks/index.tsx     | 10 +-
 .../pages/settings/developer/webhooks/new.tsx | 10 +-
 .../pages/settings/my-account/appearance.tsx  |  3 +
 .../pages/settings/my-account/calendars.tsx   |  2 +
 .../settings/my-account/conferencing.tsx      |  2 +
 .../web/pages/settings/my-account/general.tsx |  3 +
 .../web/pages/settings/my-account/profile.tsx |  2 +
 .../pages/settings/security/impersonation.tsx |  3 +
 apps/web/pages/settings/security/password.tsx |  3 +
 apps/web/pages/settings/security/sso.tsx      | 10 +-
 .../settings/security/two-factor-auth.tsx     |  2 +
 .../pages/settings/teams/[id]/appearance.tsx  | 10 +-
 .../web/pages/settings/teams/[id]/billing.tsx | 10 +-
 .../web/pages/settings/teams/[id]/members.tsx | 10 +-
 .../settings/teams/[id]/onboard-members.tsx   |  3 +
 .../web/pages/settings/teams/[id]/profile.tsx | 10 +-
 apps/web/pages/settings/teams/[id]/sso.tsx    | 10 +-
 apps/web/pages/settings/teams/index.ts        | 10 +-
 apps/web/pages/settings/teams/new/index.tsx   |  2 +
 apps/web/pages/signup.tsx                     |  3 +
 apps/web/pages/team/[slug].tsx                |  2 +
 apps/web/pages/team/[slug]/[type].tsx         |  2 +
 apps/web/pages/team/[slug]/book.tsx           |  2 +
 apps/web/pages/teams/index.tsx                |  3 +
 apps/web/pages/video/[uid].tsx                |  4 +
 apps/web/pages/video/meeting-ended/[uid].tsx  |  4 +
 .../pages/video/meeting-not-started/[uid].tsx |  4 +
 apps/web/pages/video/no-meeting-found.tsx     |  4 +
 apps/web/pages/workflows/[workflow].tsx       | 10 +-
 apps/web/pages/workflows/index.tsx            | 10 +-
 80 files changed, 418 insertions(+), 94 deletions(-)
 create mode 100644 apps/web/components/PageWrapper.tsx

diff --git a/apps/web/components/PageWrapper.tsx b/apps/web/components/PageWrapper.tsx
new file mode 100644
index 0000000000..1b9fabb052
--- /dev/null
+++ b/apps/web/components/PageWrapper.tsx
@@ -0,0 +1,99 @@
+import { DefaultSeo } from "next-seo";
+import { Inter } from "next/font/google";
+import localFont from "next/font/local";
+import Script from "next/script";
+
+import "@calcom/embed-core/src/embed-iframe";
+import { useEmbedUiConfig } from "@calcom/embed-core/src/embed-iframe";
+import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
+
+import type { AppProps } from "@lib/app-providers";
+import AppProviders from "@lib/app-providers";
+import { seoConfig } from "@lib/config/next-seo.config";
+
+import I18nLanguageHandler from "@components/I18nLanguageHandler";
+
+export interface CalPageWrapper {
+  (props?: any): JSX.Element;
+  PageWrapper?: AppProps["Component"]["PageWrapper"];
+}
+
+const interFont = Inter({ subsets: ["latin"], variable: "--font-inter", preload: true, display: "swap" });
+const calFont = localFont({
+  src: "../fonts/CalSans-SemiBold.woff2",
+  variable: "--font-cal",
+  preload: true,
+  display: "swap",
+});
+
+function PageWrapper(props: AppProps) {
+  const { Component, pageProps, err, router } = props;
+  let pageStatus = "200";
+  const { cssVarsPerTheme } = useEmbedUiConfig();
+  const cssVarsStyle = [];
+  if (cssVarsPerTheme) {
+    for (const [themeName, cssVars] of Object.entries(cssVarsPerTheme)) {
+      cssVarsStyle.push(`.${themeName} {`);
+      for (const [cssVarName, value] of Object.entries(cssVars)) {
+        cssVarsStyle.push(`--${cssVarName}: ${value};`);
+      }
+      cssVarsStyle.push(`}`);
+    }
+  }
+
+  if (router.pathname === "/404") {
+    pageStatus = "404";
+  } else if (router.pathname === "/500") {
+    pageStatus = "500";
+  }
+
+  // On client side don't let nonce creep into DOM
+  // It also avoids hydration warning that says that Client has the nonce value but server has "" because browser removes nonce attributes before DOM is built
+  // See https://github.com/kentcdodds/nonce-hydration-issues
+  // Set "" only if server had it set otherwise keep it undefined because server has to match with client to avoid hydration error
+  const nonce = typeof window !== "undefined" ? (pageProps.nonce ? "" : undefined) : pageProps.nonce;
+  const providerProps = {
+    ...props,
+    pageProps: {
+      ...props.pageProps,
+      nonce,
+    },
+  };
+  // Use the layout defined at the page level, if available
+  const getLayout = Component.getLayout ?? ((page) => page);
+  return (
+    <AppProviders {...providerProps}>
+      <DefaultSeo {...seoConfig.defaultNextSeo} />
+      <I18nLanguageHandler />
+      <Script
+        nonce={nonce}
+        id="page-status"
+        dangerouslySetInnerHTML={{ __html: `window.CalComPageStatus = '${pageStatus}'` }}
+      />
+      <style jsx global>{`
+        :root {
+          --font-inter: ${interFont.style.fontFamily};
+          --font-cal: ${calFont.style.fontFamily};
+        }
+      `}</style>
+
+      <style jsx global>
+        {`
+          ${cssVarsStyle.join("")}
+        `}
+      </style>
+      {getLayout(
+        Component.requiresLicense ? (
+          <LicenseRequired>
+            <Component {...pageProps} err={err} />
+          </LicenseRequired>
+        ) : (
+          <Component {...pageProps} err={err} />
+        ),
+        router
+      )}
+    </AppProviders>
+  );
+}
+
+export default PageWrapper;
diff --git a/apps/web/lib/app-providers.tsx b/apps/web/lib/app-providers.tsx
index dbefd11b2a..4c55778a42 100644
--- a/apps/web/lib/app-providers.tsx
+++ b/apps/web/lib/app-providers.tsx
@@ -30,6 +30,7 @@ export type AppProps = Omit<NextAppProps<WithNonceProps & Record<string, unknown
     isThemeSupported?: boolean;
     isBookingPage?: boolean | ((arg: { router: NextRouter }) => boolean);
     getLayout?: (page: React.ReactElement, router: NextRouter) => ReactNode;
+    PageWrapper?: (props: AppProps) => JSX.Element;
   };
 
   /** Will be defined only is there was an error */
diff --git a/apps/web/pages/404.tsx b/apps/web/pages/404.tsx
index 2ab4d5c8c1..dd119df042 100644
--- a/apps/web/pages/404.tsx
+++ b/apps/web/pages/404.tsx
@@ -8,6 +8,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HeadSeo } from "@calcom/ui";
 import { BookOpen, Check, ChevronRight, FileText } from "@calcom/ui/components/icon";
 
+import PageWrapper from "@components/PageWrapper";
+
 import { ssgInit } from "@server/lib/ssg";
 
 export default function Custom404() {
@@ -366,6 +368,8 @@ export default function Custom404() {
   );
 }
 
+Custom404.PageWrapper = PageWrapper;
+
 export const getStaticProps = async (context: GetStaticPropsContext) => {
   const ssr = await ssgInit(context);
 
diff --git a/apps/web/pages/500.tsx b/apps/web/pages/500.tsx
index 7ee1cb6c50..2b10ff9612 100644
--- a/apps/web/pages/500.tsx
+++ b/apps/web/pages/500.tsx
@@ -6,6 +6,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, showToast } from "@calcom/ui";
 import { Copy } from "@calcom/ui/components/icon";
 
+import PageWrapper from "@components/PageWrapper";
+
 export default function Error500() {
   const { t } = useLocale();
   const router = useRouter();
@@ -52,3 +54,5 @@ export default function Error500() {
     </div>
   );
 }
+
+Error500.PageWrapper = PageWrapper;
diff --git a/apps/web/pages/[user].tsx b/apps/web/pages/[user].tsx
index 30f9605535..39e69cdd2d 100644
--- a/apps/web/pages/[user].tsx
+++ b/apps/web/pages/[user].tsx
@@ -32,6 +32,8 @@ import { ArrowRight } from "@calcom/ui/components/icon";
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
 import type { EmbedProps } from "@lib/withEmbedSsr";
 
+import PageWrapper from "@components/PageWrapper";
+
 import { ssrInit } from "@server/lib/ssr";
 
 export default function User(props: inferSSRProps<typeof getServerSideProps> & EmbedProps) {
@@ -196,6 +198,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
 }
 
 User.isBookingPage = true;
+User.PageWrapper = PageWrapper;
 
 const getEventTypesWithHiddenFromDB = async (userId: number) => {
   return (
diff --git a/apps/web/pages/[user]/[type].tsx b/apps/web/pages/[user]/[type].tsx
index 8e5759b945..7468e89061 100644
--- a/apps/web/pages/[user]/[type].tsx
+++ b/apps/web/pages/[user]/[type].tsx
@@ -12,6 +12,7 @@ import { isBrandingHidden } from "@lib/isBrandingHidden";
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
 import type { EmbedProps } from "@lib/withEmbedSsr";
 
+import PageWrapper from "@components/PageWrapper";
 import AvailabilityPage from "@components/booking/pages/AvailabilityPage";
 
 export type AvailabilityPageProps = inferSSRProps<typeof getStaticProps> & EmbedProps;
@@ -55,6 +56,7 @@ export default function Type(props: AvailabilityPageProps) {
 }
 
 Type.isBookingPage = true;
+Type.PageWrapper = PageWrapper;
 
 const paramsSchema = z.object({ type: z.string(), user: z.string() });
 async function getUserPageProps(context: GetStaticPropsContext) {
diff --git a/apps/web/pages/[user]/book.tsx b/apps/web/pages/[user]/book.tsx
index 4e8e246ed8..1a914ef05d 100644
--- a/apps/web/pages/[user]/book.tsx
+++ b/apps/web/pages/[user]/book.tsx
@@ -26,6 +26,7 @@ import {
 
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
 
+import PageWrapper from "@components/PageWrapper";
 import BookingPage from "@components/booking/pages/BookingPage";
 
 import { ssrInit } from "@server/lib/ssr";
@@ -70,6 +71,7 @@ export default function Book(props: BookPageProps) {
 }
 
 Book.isBookingPage = true;
+Book.PageWrapper = PageWrapper;
 
 const querySchema = z.object({
   bookingUid: z.string().optional(),
diff --git a/apps/web/pages/_app.tsx b/apps/web/pages/_app.tsx
index 9caa8a48b6..c5690123d1 100644
--- a/apps/web/pages/_app.tsx
+++ b/apps/web/pages/_app.tsx
@@ -1,84 +1,13 @@
-import { DefaultSeo } from "next-seo";
-import { Inter } from "next/font/google";
-import localFont from "next/font/local";
-import Head from "next/head";
-import Script from "next/script";
-
-import "@calcom/embed-core/src/embed-iframe";
-import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
 import { trpc } from "@calcom/trpc/react";
 
 import type { AppProps } from "@lib/app-providers";
-import AppProviders from "@lib/app-providers";
-import { seoConfig } from "@lib/config/next-seo.config";
-
-import I18nLanguageHandler from "@components/I18nLanguageHandler";
 
 import "../styles/globals.css";
 
-const interFont = Inter({ subsets: ["latin"], variable: "--font-inter", preload: true, display: "swap" });
-const calFont = localFont({
-  src: "../fonts/CalSans-SemiBold.woff2",
-  variable: "--font-cal",
-  preload: true,
-  display: "swap",
-});
-
 function MyApp(props: AppProps) {
-  const { Component, pageProps, err, router } = props;
-  let pageStatus = "200";
-
-  if (router.pathname === "/404") {
-    pageStatus = "404";
-  } else if (router.pathname === "/500") {
-    pageStatus = "500";
-  }
-
-  // On client side don't let nonce creep into DOM
-  // It also avoids hydration warning that says that Client has the nonce value but server has "" because browser removes nonce attributes before DOM is built
-  // See https://github.com/kentcdodds/nonce-hydration-issues
-  // Set "" only if server had it set otherwise keep it undefined because server has to match with client to avoid hydration error
-  const nonce = typeof window !== "undefined" ? (pageProps.nonce ? "" : undefined) : pageProps.nonce;
-  const providerProps = {
-    ...props,
-    pageProps: {
-      ...props.pageProps,
-      nonce,
-    },
-  };
-  // Use the layout defined at the page level, if available
-  const getLayout = Component.getLayout ?? ((page) => page);
-  return (
-    <AppProviders {...providerProps}>
-      <DefaultSeo {...seoConfig.defaultNextSeo} />
-      <I18nLanguageHandler />
-      <Script
-        nonce={nonce}
-        id="page-status"
-        dangerouslySetInnerHTML={{ __html: `window.CalComPageStatus = '${pageStatus}'` }}
-      />
-      <style jsx global>{`
-        :root {
-          --font-inter: ${interFont.style.fontFamily};
-          --font-cal: ${calFont.style.fontFamily};
-        }
-      `}</style>
-
-      <Head>
-        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
-      </Head>
-      {getLayout(
-        Component.requiresLicense ? (
-          <LicenseRequired>
-            <Component {...pageProps} err={err} />
-          </LicenseRequired>
-        ) : (
-          <Component {...pageProps} err={err} />
-        ),
-        router
-      )}
-    </AppProviders>
-  );
+  const { Component, pageProps } = props;
+  if (Component.PageWrapper !== undefined) return Component.PageWrapper(props);
+  return <Component {...pageProps} />;
 }
 
 export default trpc.withTRPC(MyApp);
diff --git a/apps/web/pages/apps/[slug]/[...pages].tsx b/apps/web/pages/apps/[slug]/[...pages].tsx
index 35621eb55f..5d7acac573 100644
--- a/apps/web/pages/apps/[slug]/[...pages].tsx
+++ b/apps/web/pages/apps/[slug]/[...pages].tsx
@@ -9,13 +9,16 @@ import type { AppGetServerSideProps } from "@calcom/types/AppGetServerSideProps"
 
 import type { AppProps } from "@lib/app-providers";
 
+import PageWrapper from "@components/PageWrapper";
+
 import { ssrInit } from "@server/lib/ssr";
 
 type AppPageType = {
   getServerSideProps: AppGetServerSideProps;
   // A component than can accept any properties
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  default: ((props: any) => JSX.Element) & Pick<AppProps["Component"], "isBookingPage" | "getLayout">;
+  default: ((props: any) => JSX.Element) &
+    Pick<AppProps["Component"], "isBookingPage" | "getLayout" | "PageWrapper">;
 };
 
 type Found = {
@@ -94,6 +97,8 @@ AppPage.getLayout = (page, router) => {
   return route.Component.getLayout(page, router);
 };
 
+AppPage.PageWrapper = PageWrapper;
+
 export default AppPage;
 
 export async function getServerSideProps(
diff --git a/apps/web/pages/apps/[slug]/index.tsx b/apps/web/pages/apps/[slug]/index.tsx
index 35fc252b73..adc35ee727 100644
--- a/apps/web/pages/apps/[slug]/index.tsx
+++ b/apps/web/pages/apps/[slug]/index.tsx
@@ -10,6 +10,7 @@ import prisma from "@calcom/prisma";
 
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
 
+import PageWrapper from "@components/PageWrapper";
 import App from "@components/apps/App";
 
 const md = new MarkdownIt("default", { html: true, breaks: true });
@@ -122,4 +123,6 @@ export const getStaticProps = async (ctx: GetStaticPropsContext) => {
   };
 };
 
+SingleAppPage.PageWrapper = PageWrapper;
+
 export default SingleAppPage;
diff --git a/apps/web/pages/apps/[slug]/setup.tsx b/apps/web/pages/apps/[slug]/setup.tsx
index 5378d3e7df..c53b61aea1 100644
--- a/apps/web/pages/apps/[slug]/setup.tsx
+++ b/apps/web/pages/apps/[slug]/setup.tsx
@@ -5,6 +5,8 @@ import { useRouter } from "next/router";
 import { AppSetupPage } from "@calcom/app-store/_pages/setup";
 import { getStaticProps } from "@calcom/app-store/_pages/setup/_getStaticProps";
 
+import PageWrapper from "@components/PageWrapper";
+
 export default function SetupInformation(props: InferGetStaticPropsType<typeof getStaticProps>) {
   const router = useRouter();
   const slug = router.query.slug as string;
@@ -26,6 +28,8 @@ export default function SetupInformation(props: InferGetStaticPropsType<typeof g
   return <AppSetupPage slug={slug} {...props} />;
 }
 
+SetupInformation.PageWrapper = PageWrapper;
+
 export const getStaticPaths: GetStaticPaths = async () => {
   return {
     paths: [],
diff --git a/apps/web/pages/apps/categories/[category].tsx b/apps/web/pages/apps/categories/[category].tsx
index c66f891418..5897eb1d21 100644
--- a/apps/web/pages/apps/categories/[category].tsx
+++ b/apps/web/pages/apps/categories/[category].tsx
@@ -9,6 +9,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import prisma from "@calcom/prisma";
 import { AppCard, SkeletonText } from "@calcom/ui";
 
+import PageWrapper from "@components/PageWrapper";
+
 export default function Apps({ apps }: InferGetStaticPropsType<typeof getStaticProps>) {
   const { t, isLocaleReady } = useLocale();
   const router = useRouter();
@@ -47,6 +49,8 @@ export default function Apps({ apps }: InferGetStaticPropsType<typeof getStaticP
   );
 }
 
+Apps.PageWrapper = PageWrapper;
+
 export const getStaticPaths = async () => {
   const paths = Object.keys(AppCategories);
 
diff --git a/apps/web/pages/apps/categories/index.tsx b/apps/web/pages/apps/categories/index.tsx
index 70cc450374..66e8f2af79 100644
--- a/apps/web/pages/apps/categories/index.tsx
+++ b/apps/web/pages/apps/categories/index.tsx
@@ -7,6 +7,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { SkeletonText } from "@calcom/ui";
 import { ArrowLeft, ArrowRight } from "@calcom/ui/components/icon";
 
+import PageWrapper from "@components/PageWrapper";
+
 export default function Apps({ categories }: InferGetStaticPropsType<typeof getStaticProps>) {
   const { t, isLocaleReady } = useLocale();
 
@@ -43,6 +45,8 @@ export default function Apps({ categories }: InferGetStaticPropsType<typeof getS
   );
 }
 
+Apps.PageWrapper = PageWrapper;
+
 export const getStaticProps = async () => {
   const appStore = await getAppRegistry();
   const categories = appStore.reduce((c, app) => {
diff --git a/apps/web/pages/apps/index.tsx b/apps/web/pages/apps/index.tsx
index 97e6e12e0d..16430ffcd7 100644
--- a/apps/web/pages/apps/index.tsx
+++ b/apps/web/pages/apps/index.tsx
@@ -12,6 +12,7 @@ import type { HorizontalTabItemProps } from "@calcom/ui";
 import { AllApps, AppStoreCategories, HorizontalTabs, TextField, PopularAppsSlider } from "@calcom/ui";
 import { Search } from "@calcom/ui/components/icon";
 
+import PageWrapper from "@components/PageWrapper";
 import AppsLayout from "@components/apps/layouts/AppsLayout";
 
 import { ssrInit } from "@server/lib/ssr";
@@ -85,6 +86,8 @@ export default function Apps({ categories, appStore }: inferSSRProps<typeof getS
   );
 }
 
+Apps.PageWrapper = PageWrapper;
+
 export const getServerSideProps = async (context: GetServerSidePropsContext) => {
   const { req, res } = context;
 
diff --git a/apps/web/pages/apps/installed/[category].tsx b/apps/web/pages/apps/installed/[category].tsx
index 075c8618e7..6edda5ecbb 100644
--- a/apps/web/pages/apps/installed/[category].tsx
+++ b/apps/web/pages/apps/installed/[category].tsx
@@ -44,6 +44,7 @@ import {
 import { QueryCell } from "@lib/QueryCell";
 
 import AppListCard from "@components/AppListCard";
+import PageWrapper from "@components/PageWrapper";
 import { CalendarListContainer } from "@components/apps/CalendarListContainer";
 import InstalledAppsLayout from "@components/apps/layouts/InstalledAppsLayout";
 
@@ -372,3 +373,5 @@ export async function getServerSideProps(ctx: AppGetServerSidePropsContext) {
     },
   };
 }
+
+InstalledApps.PageWrapper = PageWrapper;
diff --git a/apps/web/pages/auth/error.tsx b/apps/web/pages/auth/error.tsx
index a73972a979..281969aec9 100644
--- a/apps/web/pages/auth/error.tsx
+++ b/apps/web/pages/auth/error.tsx
@@ -7,6 +7,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, SkeletonText } from "@calcom/ui";
 import { X } from "@calcom/ui/components/icon";
 
+import PageWrapper from "@components/PageWrapper";
 import AuthContainer from "@components/ui/AuthContainer";
 
 import { ssgInit } from "@server/lib/ssg";
@@ -49,6 +50,8 @@ export default function Error() {
   );
 }
 
+Error.PageWrapper = PageWrapper;
+
 export const getStaticProps = async (context: GetStaticPropsContext) => {
   const ssr = await ssgInit(context);
 
diff --git a/apps/web/pages/auth/forgot-password/[id].tsx b/apps/web/pages/auth/forgot-password/[id].tsx
index 0fa3b730ce..d4549a5f0d 100644
--- a/apps/web/pages/auth/forgot-password/[id].tsx
+++ b/apps/web/pages/auth/forgot-password/[id].tsx
@@ -12,6 +12,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import prisma from "@calcom/prisma";
 import { Button, TextField } from "@calcom/ui";
 
+import PageWrapper from "@components/PageWrapper";
 import AuthContainer from "@components/ui/AuthContainer";
 
 type Props = {
@@ -174,7 +175,7 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
 }
 
 Page.isThemeSupported = false;
-
+Page.PageWrapper = PageWrapper;
 export async function getServerSideProps(context: GetServerSidePropsContext) {
   const id = context.params?.id as string;
 
diff --git a/apps/web/pages/auth/forgot-password/index.tsx b/apps/web/pages/auth/forgot-password/index.tsx
index e3fd74ef71..9cb5052000 100644
--- a/apps/web/pages/auth/forgot-password/index.tsx
+++ b/apps/web/pages/auth/forgot-password/index.tsx
@@ -11,6 +11,7 @@ import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, EmailField } from "@calcom/ui";
 
+import PageWrapper from "@components/PageWrapper";
 import AuthContainer from "@components/ui/AuthContainer";
 
 export default function ForgotPassword({ csrfToken }: { csrfToken: string }) {
@@ -144,6 +145,7 @@ export default function ForgotPassword({ csrfToken }: { csrfToken: string }) {
 }
 
 ForgotPassword.isThemeSupported = false;
+ForgotPassword.PageWrapper = PageWrapper;
 
 export const getServerSideProps = async (context: GetServerSidePropsContext) => {
   const { req, res } = context;
diff --git a/apps/web/pages/auth/login.tsx b/apps/web/pages/auth/login.tsx
index 2f3359af42..9a050cfb16 100644
--- a/apps/web/pages/auth/login.tsx
+++ b/apps/web/pages/auth/login.tsx
@@ -26,6 +26,7 @@ import type { WithNonceProps } from "@lib/withNonce";
 import withNonce from "@lib/withNonce";
 
 import AddToHomescreen from "@components/AddToHomescreen";
+import PageWrapper from "@components/PageWrapper";
 import TwoFactor from "@components/auth/TwoFactor";
 import AuthContainer from "@components/ui/AuthContainer";
 
@@ -302,5 +303,6 @@ const _getServerSideProps = async function getServerSideProps(context: GetServer
 };
 
 Login.isThemeSupported = false;
+Login.PageWrapper = PageWrapper;
 
 export const getServerSideProps = withNonce(_getServerSideProps);
diff --git a/apps/web/pages/auth/logout.tsx b/apps/web/pages/auth/logout.tsx
index 28323c447f..b655fe1d49 100644
--- a/apps/web/pages/auth/logout.tsx
+++ b/apps/web/pages/auth/logout.tsx
@@ -10,6 +10,7 @@ import { Check } from "@calcom/ui/components/icon";
 
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
 
+import PageWrapper from "@components/PageWrapper";
 import AuthContainer from "@components/ui/AuthContainer";
 
 import { ssrInit } from "@server/lib/ssr";
@@ -51,7 +52,7 @@ export function Logout(props: Props) {
 }
 
 Logout.isThemeSupported = false;
-
+Logout.PageWrapper = PageWrapper;
 export default Logout;
 
 export async function getServerSideProps(context: GetServerSidePropsContext) {
diff --git a/apps/web/pages/auth/saml-idp.tsx b/apps/web/pages/auth/saml-idp.tsx
index 5834c74bbe..153fffed41 100644
--- a/apps/web/pages/auth/saml-idp.tsx
+++ b/apps/web/pages/auth/saml-idp.tsx
@@ -2,6 +2,8 @@ import { signIn } from "next-auth/react";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
+import PageWrapper from "@components/PageWrapper";
+
 // To handle the IdP initiated login flow callback
 export default function Page() {
   const router = useRouter();
@@ -21,3 +23,4 @@ export default function Page() {
 
   return null;
 }
+Page.PageWrapper = PageWrapper;
diff --git a/apps/web/pages/auth/setup/index.tsx b/apps/web/pages/auth/setup/index.tsx
index df31a2b7d0..9afbab6327 100644
--- a/apps/web/pages/auth/setup/index.tsx
+++ b/apps/web/pages/auth/setup/index.tsx
@@ -11,6 +11,7 @@ import prisma from "@calcom/prisma";
 import type { inferSSRProps } from "@calcom/types/inferSSRProps";
 import { Meta, WizardForm } from "@calcom/ui";
 
+import PageWrapper from "@components/PageWrapper";
 import { AdminUserContainer as AdminUser } from "@components/setup/AdminUser";
 import ChooseLicense from "@components/setup/ChooseLicense";
 import EnterpriseLicense from "@components/setup/EnterpriseLicense";
@@ -136,7 +137,7 @@ export function Setup(props: inferSSRProps<typeof getServerSideProps>) {
 }
 
 Setup.isThemeSupported = false;
-
+Setup.PageWrapper = PageWrapper;
 export default Setup;
 
 export const getServerSideProps = async (context: GetServerSidePropsContext) => {
diff --git a/apps/web/pages/auth/signin.tsx b/apps/web/pages/auth/signin.tsx
index ee16a15540..295879ddd3 100644
--- a/apps/web/pages/auth/signin.tsx
+++ b/apps/web/pages/auth/signin.tsx
@@ -4,6 +4,8 @@ import { getProviders, signIn, getCsrfToken } from "next-auth/react";
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { Button } from "@calcom/ui";
 
+import PageWrapper from "@components/PageWrapper";
+
 type Provider = {
   name: string;
   id: string;
@@ -23,6 +25,8 @@ function signin({ providers }: { providers: Provider[] }) {
   );
 }
 
+signin.PageWrapper = PageWrapper;
+
 export default signin;
 
 export async function getServerSideProps(context: GetServerSidePropsContext) {
diff --git a/apps/web/pages/auth/sso/[provider].tsx b/apps/web/pages/auth/sso/[provider].tsx
index b15c186ba5..6a68051cf5 100644
--- a/apps/web/pages/auth/sso/[provider].tsx
+++ b/apps/web/pages/auth/sso/[provider].tsx
@@ -19,6 +19,8 @@ import prisma from "@calcom/prisma";
 import { asStringOrNull } from "@lib/asStringOrNull";
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
 
+import PageWrapper from "@components/PageWrapper";
+
 import { ssrInit } from "@server/lib/ssr";
 
 export type SSOProviderPageProps = inferSSRProps<typeof getServerSideProps>;
@@ -49,6 +51,8 @@ export default function Provider(props: SSOProviderPageProps) {
   return null;
 }
 
+Provider.PageWrapper = PageWrapper;
+
 export const getServerSideProps = async (context: GetServerSidePropsContext) => {
   // get query params and typecast them to string
   // (would be even better to assert them instead of typecasting)
diff --git a/apps/web/pages/auth/sso/direct.tsx b/apps/web/pages/auth/sso/direct.tsx
index 23b0a66be4..6877def519 100644
--- a/apps/web/pages/auth/sso/direct.tsx
+++ b/apps/web/pages/auth/sso/direct.tsx
@@ -6,6 +6,8 @@ import { HOSTED_CAL_FEATURES } from "@calcom/lib/constants";
 
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
 
+import PageWrapper from "@components/PageWrapper";
+
 // This page is used to initiate the SAML authentication flow by redirecting to the SAML provider.
 // Accessible only on self-hosted Cal.com instances.
 export default function Page({ samlTenantID, samlProductID }: inferSSRProps<typeof getServerSideProps>) {
@@ -28,6 +30,8 @@ export default function Page({ samlTenantID, samlProductID }: inferSSRProps<type
   return null;
 }
 
+Page.PageWrapper = PageWrapper;
+
 export async function getServerSideProps() {
   return {
     props: {
diff --git a/apps/web/pages/auth/verify.tsx b/apps/web/pages/auth/verify.tsx
index a9c041b551..06433aa783 100644
--- a/apps/web/pages/auth/verify.tsx
+++ b/apps/web/pages/auth/verify.tsx
@@ -11,6 +11,7 @@ import { trpc } from "@calcom/trpc/react";
 import { Button, showToast } from "@calcom/ui";
 
 import Loader from "@components/Loader";
+import PageWrapper from "@components/PageWrapper";
 
 async function sendVerificationLogin(email: string, username: string) {
   await signIn("email", {
@@ -177,3 +178,5 @@ export default function Verify() {
     </div>
   );
 }
+
+Verify.PageWrapper = PageWrapper;
diff --git a/apps/web/pages/availability/[schedule].tsx b/apps/web/pages/availability/[schedule].tsx
index 6751a678f2..e8f5ea2873 100644
--- a/apps/web/pages/availability/[schedule].tsx
+++ b/apps/web/pages/availability/[schedule].tsx
@@ -31,6 +31,7 @@ import { Info, Plus, Trash } from "@calcom/ui/components/icon";
 
 import { HttpError } from "@lib/core/http/error";
 
+import PageWrapper from "@components/PageWrapper";
 import { SelectSkeletonLoader } from "@components/availability/SkeletonLoader";
 import EditableHeading from "@components/ui/EditableHeading";
 
@@ -301,3 +302,5 @@ export default function Availability() {
     </Shell>
   );
 }
+
+Availability.PageWrapper = PageWrapper;
diff --git a/apps/web/pages/availability/index.tsx b/apps/web/pages/availability/index.tsx
index b487c7e3ce..3ade5d6675 100644
--- a/apps/web/pages/availability/index.tsx
+++ b/apps/web/pages/availability/index.tsx
@@ -11,6 +11,7 @@ import { Clock } from "@calcom/ui/components/icon";
 import { withQuery } from "@lib/QueryCell";
 import { HttpError } from "@lib/core/http/error";
 
+import PageWrapper from "@components/PageWrapper";
 import SkeletonLoader from "@components/availability/SkeletonLoader";
 
 export function AvailabilityList({ schedules }: RouterOutputs["viewer"]["availability"]["list"]) {
@@ -116,3 +117,5 @@ export default function AvailabilityPage() {
     </div>
   );
 }
+
+AvailabilityPage.PageWrapper = PageWrapper;
diff --git a/apps/web/pages/availability/troubleshoot.tsx b/apps/web/pages/availability/troubleshoot.tsx
index d7b9373722..a4baac0842 100644
--- a/apps/web/pages/availability/troubleshoot.tsx
+++ b/apps/web/pages/availability/troubleshoot.tsx
@@ -7,6 +7,8 @@ import { SkeletonText } from "@calcom/ui";
 
 import useRouterQuery from "@lib/hooks/useRouterQuery";
 
+import PageWrapper from "@components/PageWrapper";
+
 type User = RouterOutputs["viewer"]["me"];
 
 export interface IBusySlot {
@@ -126,6 +128,7 @@ export default function Troubleshoot() {
     </div>
   );
 }
+Troubleshoot.PageWrapper = PageWrapper;
 
 function convertMinsToHrsMins(mins: number) {
   const h = Math.floor(mins / 60);
diff --git a/apps/web/pages/booking/[uid].tsx b/apps/web/pages/booking/[uid].tsx
index b4f9ebba4f..4bf32fa92b 100644
--- a/apps/web/pages/booking/[uid].tsx
+++ b/apps/web/pages/booking/[uid].tsx
@@ -54,6 +54,7 @@ import { X, ExternalLink, ChevronLeft, Check, Calendar } from "@calcom/ui/compon
 import { timeZone } from "@lib/clock";
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
 
+import PageWrapper from "@components/PageWrapper";
 import CancelBooking from "@components/booking/CancelBooking";
 import EventReservationSchema from "@components/schemas/EventReservationSchema";
 
@@ -709,6 +710,7 @@ export default function Success(props: SuccessProps) {
 }
 
 Success.isBookingPage = true;
+Success.PageWrapper = PageWrapper;
 
 type RecurringBookingsProps = {
   eventType: SuccessProps["eventType"];
diff --git a/apps/web/pages/bookings/[status].tsx b/apps/web/pages/bookings/[status].tsx
index 3ab9c41d26..72b0777d8e 100644
--- a/apps/web/pages/bookings/[status].tsx
+++ b/apps/web/pages/bookings/[status].tsx
@@ -16,6 +16,7 @@ import { Calendar } from "@calcom/ui/components/icon";
 
 import { useInViewObserver } from "@lib/hooks/useInViewObserver";
 
+import PageWrapper from "@components/PageWrapper";
 import BookingListItem from "@components/booking/BookingListItem";
 import SkeletonLoader from "@components/booking/SkeletonLoader";
 
@@ -194,6 +195,8 @@ export default function Bookings() {
   );
 }
 
+Bookings.PageWrapper = PageWrapper;
+
 export const getStaticProps: GetStaticProps = async (ctx) => {
   const params = querySchema.safeParse(ctx.params);
   const ssg = await ssgInit(ctx);
diff --git a/apps/web/pages/d/[link]/[slug].tsx b/apps/web/pages/d/[link]/[slug].tsx
index 40328d04e4..4ab511ec1b 100644
--- a/apps/web/pages/d/[link]/[slug].tsx
+++ b/apps/web/pages/d/[link]/[slug].tsx
@@ -14,6 +14,7 @@ import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
 import type { EmbedProps } from "@lib/withEmbedSsr";
 
+import PageWrapper from "@components/PageWrapper";
 import AvailabilityPage from "@components/booking/pages/AvailabilityPage";
 
 import { ssrInit } from "@server/lib/ssr";
@@ -25,6 +26,7 @@ export default function Type(props: DynamicAvailabilityPageProps) {
 }
 
 Type.isBookingPage = true;
+Type.PageWrapper = PageWrapper;
 
 const querySchema = z.object({
   link: z.string().optional().default(""),
diff --git a/apps/web/pages/d/[link]/book.tsx b/apps/web/pages/d/[link]/book.tsx
index e1949802af..eb01b2627d 100644
--- a/apps/web/pages/d/[link]/book.tsx
+++ b/apps/web/pages/d/[link]/book.tsx
@@ -9,6 +9,7 @@ import { customInputSchema, eventTypeBookingFields, EventTypeMetaDataSchema } fr
 import { asStringOrNull, asStringOrThrow } from "@lib/asStringOrNull";
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
 
+import PageWrapper from "@components/PageWrapper";
 import BookingPage from "@components/booking/pages/BookingPage";
 
 import { ssrInit } from "@server/lib/ssr";
@@ -20,6 +21,7 @@ export default function Book(props: HashLinkPageProps) {
 }
 
 Book.isBookingPage = true;
+Book.PageWrapper = PageWrapper;
 
 export async function getServerSideProps(context: GetServerSidePropsContext) {
   const ssr = await ssrInit(context);
diff --git a/apps/web/pages/event-types/[type]/index.tsx b/apps/web/pages/event-types/[type]/index.tsx
index fb868dd330..136b53ab77 100644
--- a/apps/web/pages/event-types/[type]/index.tsx
+++ b/apps/web/pages/event-types/[type]/index.tsx
@@ -30,6 +30,7 @@ import { ConfirmationDialogContent, Dialog, Form, showToast } from "@calcom/ui";
 import { asStringOrThrow } from "@lib/asStringOrNull";
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
 
+import PageWrapper from "@components/PageWrapper";
 // These can't really be moved into calcom/ui due to the fact they use infered getserverside props typings
 import { EventAdvancedTab } from "@components/eventtype/EventAdvancedTab";
 import { EventAppsTab } from "@components/eventtype/EventAppsTab";
@@ -477,4 +478,6 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
   };
 };
 
+EventTypePageWrapper.PageWrapper = PageWrapper;
+
 export default EventTypePageWrapper;
diff --git a/apps/web/pages/event-types/index.tsx b/apps/web/pages/event-types/index.tsx
index 389b04e553..7fe5ea44c9 100644
--- a/apps/web/pages/event-types/index.tsx
+++ b/apps/web/pages/event-types/index.tsx
@@ -61,6 +61,7 @@ import { withQuery } from "@lib/QueryCell";
 import { HttpError } from "@lib/core/http/error";
 
 import { EmbedButton, EmbedDialog } from "@components/Embed";
+import PageWrapper from "@components/PageWrapper";
 import SkeletonLoader from "@components/eventtype/SkeletonLoader";
 
 type EventTypeGroups = RouterOutputs["viewer"]["eventTypes"]["getByViewer"]["eventTypeGroups"];
@@ -817,4 +818,6 @@ const EventTypesPage = () => {
   );
 };
 
+EventTypesPage.PageWrapper = PageWrapper;
+
 export default EventTypesPage;
diff --git a/apps/web/pages/getting-started/[[...step]].tsx b/apps/web/pages/getting-started/[[...step]].tsx
index 660517573b..f68a9bd32b 100644
--- a/apps/web/pages/getting-started/[[...step]].tsx
+++ b/apps/web/pages/getting-started/[[...step]].tsx
@@ -13,6 +13,7 @@ import { Button, StepCard, Steps } from "@calcom/ui";
 
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
 
+import PageWrapper from "@components/PageWrapper";
 import { ConnectedCalendars } from "@components/getting-started/steps-views/ConnectCalendars";
 import { SetupAvailability } from "@components/getting-started/steps-views/SetupAvailability";
 import UserProfile from "@components/getting-started/steps-views/UserProfile";
@@ -203,5 +204,6 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
 };
 
 OnboardingPage.isThemeSupported = false;
+OnboardingPage.PageWrapper = PageWrapper;
 
 export default OnboardingPage;
diff --git a/apps/web/pages/insights/index.tsx b/apps/web/pages/insights/index.tsx
index b6b50541c1..603c4a664f 100644
--- a/apps/web/pages/insights/index.tsx
+++ b/apps/web/pages/insights/index.tsx
@@ -17,6 +17,8 @@ import { trpc } from "@calcom/trpc";
 import { Button, ButtonGroup } from "@calcom/ui";
 import { RefreshCcw, UserPlus, Users } from "@calcom/ui/components/icon";
 
+import PageWrapper from "@components/PageWrapper";
+
 const Heading = () => {
   const { t } = useLocale();
 
@@ -111,6 +113,8 @@ export default function InsightsPage() {
   );
 }
 
+InsightsPage.PageWrapper = PageWrapper;
+
 // If feature flag is disabled, return not found on getServerSideProps
 export const getServerSideProps = async () => {
   const prisma = await import("@calcom/prisma").then((mod) => mod.default);
diff --git a/apps/web/pages/maintenance.tsx b/apps/web/pages/maintenance.tsx
index b418920a94..a86e7e42cd 100644
--- a/apps/web/pages/maintenance.tsx
+++ b/apps/web/pages/maintenance.tsx
@@ -4,6 +4,8 @@ import { APP_NAME, WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui";
 
+import PageWrapper from "@components/PageWrapper";
+
 export default function MaintenancePage() {
   const { t, isLocaleReady } = useLocale();
   if (!isLocaleReady) return null;
@@ -25,3 +27,5 @@ export default function MaintenancePage() {
     </div>
   );
 }
+
+MaintenancePage.PageWrapper = PageWrapper;
diff --git a/apps/web/pages/more.tsx b/apps/web/pages/more.tsx
index ff45b39f1e..b1f389e7d1 100644
--- a/apps/web/pages/more.tsx
+++ b/apps/web/pages/more.tsx
@@ -1,6 +1,8 @@
 import Shell, { MobileNavigationMoreItems } from "@calcom/features/shell/Shell";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
+import PageWrapper from "@components/PageWrapper";
+
 export default function MorePage() {
   const { t } = useLocale();
   return (
@@ -12,3 +14,4 @@ export default function MorePage() {
     </Shell>
   );
 }
+MorePage.PageWrapper = PageWrapper;
diff --git a/apps/web/pages/payment/[uid].tsx b/apps/web/pages/payment/[uid].tsx
index 296462f34d..3e512d5b3d 100644
--- a/apps/web/pages/payment/[uid].tsx
+++ b/apps/web/pages/payment/[uid].tsx
@@ -2,8 +2,10 @@ import PaymentPage from "@calcom/features/ee/payments/components/PaymentPage";
 import { getServerSideProps } from "@calcom/features/ee/payments/pages/payment";
 import type { inferSSRProps } from "@calcom/types/inferSSRProps";
 
+import PageWrapper from "@components/PageWrapper";
+
 export default function Payment(props: inferSSRProps<typeof getServerSideProps>) {
   return <PaymentPage {...props} />;
 }
-
+Payment.PageWrapper = PageWrapper;
 export { getServerSideProps };
diff --git a/apps/web/pages/settings/admin/apps/[category].tsx b/apps/web/pages/settings/admin/apps/[category].tsx
index bee7a674bd..d16c454cd4 100644
--- a/apps/web/pages/settings/admin/apps/[category].tsx
+++ b/apps/web/pages/settings/admin/apps/[category].tsx
@@ -2,6 +2,7 @@ import AdminAppsList from "@calcom/features/apps/AdminAppsList";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Meta } from "@calcom/ui";
 
+import PageWrapper from "@components/PageWrapper";
 import { getLayout } from "@components/auth/layouts/AdminLayout";
 
 function AdminAppsView() {
@@ -15,5 +16,6 @@ function AdminAppsView() {
 }
 
 AdminAppsView.getLayout = getLayout;
+AdminAppsView.PageWrapper = PageWrapper;
 
 export default AdminAppsView;
diff --git a/apps/web/pages/settings/admin/flags.tsx b/apps/web/pages/settings/admin/flags.tsx
index 85635fd3de..dba5c307de 100644
--- a/apps/web/pages/settings/admin/flags.tsx
+++ b/apps/web/pages/settings/admin/flags.tsx
@@ -1,9 +1,11 @@
 import { FlagListingView } from "@calcom/features/flags/pages/flag-listing-view";
 
+import PageWrapper from "@components/PageWrapper";
 import { getLayout } from "@components/auth/layouts/AdminLayout";
 
 const FlagsPage = () => <FlagListingView />;
 
 FlagsPage.getLayout = getLayout;
+FlagsPage.PageWrapper = PageWrapper;
 
 export default FlagsPage;
diff --git a/apps/web/pages/settings/admin/impersonation.tsx b/apps/web/pages/settings/admin/impersonation.tsx
index f04fcdd3cc..5e7f02c661 100644
--- a/apps/web/pages/settings/admin/impersonation.tsx
+++ b/apps/web/pages/settings/admin/impersonation.tsx
@@ -4,6 +4,7 @@ import { useRef } from "react";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, Meta, TextField } from "@calcom/ui";
 
+import PageWrapper from "@components/PageWrapper";
 import { getLayout } from "@components/auth/layouts/AdminLayout";
 
 function AdminView() {
@@ -37,5 +38,6 @@ function AdminView() {
 }
 
 AdminView.getLayout = getLayout;
+AdminView.PageWrapper = PageWrapper;
 
 export default AdminView;
diff --git a/apps/web/pages/settings/admin/index.tsx b/apps/web/pages/settings/admin/index.tsx
index 4152051329..27122c8849 100644
--- a/apps/web/pages/settings/admin/index.tsx
+++ b/apps/web/pages/settings/admin/index.tsx
@@ -1,5 +1,6 @@
 import { Meta } from "@calcom/ui";
 
+import PageWrapper from "@components/PageWrapper";
 import { getLayout } from "@components/auth/layouts/AdminLayout";
 
 function AdminAppsView() {
@@ -12,5 +13,6 @@ function AdminAppsView() {
 }
 
 AdminAppsView.getLayout = getLayout;
+AdminAppsView.PageWrapper = PageWrapper;
 
 export default AdminAppsView;
diff --git a/apps/web/pages/settings/admin/users/[id]/edit.tsx b/apps/web/pages/settings/admin/users/[id]/edit.tsx
index 318b3a052c..0ee1269cca 100644
--- a/apps/web/pages/settings/admin/users/[id]/edit.tsx
+++ b/apps/web/pages/settings/admin/users/[id]/edit.tsx
@@ -1 +1,9 @@
-export { default } from "@calcom/features/ee/users/pages/users-edit-view";
+import UsersEditView from "@calcom/features/ee/users/pages/users-edit-view";
+
+import type { CalPageWrapper } from "@components/PageWrapper";
+import PageWrapper from "@components/PageWrapper";
+
+const Page = UsersEditView as CalPageWrapper;
+Page.PageWrapper = PageWrapper;
+
+export default Page;
diff --git a/apps/web/pages/settings/admin/users/add.tsx b/apps/web/pages/settings/admin/users/add.tsx
index c6c8c3cc3f..293a90214e 100644
--- a/apps/web/pages/settings/admin/users/add.tsx
+++ b/apps/web/pages/settings/admin/users/add.tsx
@@ -1 +1,9 @@
-export { default } from "@calcom/features/ee/users/pages/users-add-view";
+import UsersAddView from "@calcom/features/ee/users/pages/users-add-view";
+
+import type { CalPageWrapper } from "@components/PageWrapper";
+import PageWrapper from "@components/PageWrapper";
+
+const Page = UsersAddView as CalPageWrapper;
+Page.PageWrapper = PageWrapper;
+
+export default Page;
diff --git a/apps/web/pages/settings/admin/users/index.tsx b/apps/web/pages/settings/admin/users/index.tsx
index 699d3eb327..194c966682 100644
--- a/apps/web/pages/settings/admin/users/index.tsx
+++ b/apps/web/pages/settings/admin/users/index.tsx
@@ -1 +1,9 @@
-export { default } from "@calcom/features/ee/users/pages/users-listing-view";
+import UsersListingView from "@calcom/features/ee/users/pages/users-listing-view";
+
+import type { CalPageWrapper } from "@components/PageWrapper";
+import PageWrapper from "@components/PageWrapper";
+
+const Page = UsersListingView as CalPageWrapper;
+Page.PageWrapper = PageWrapper;
+
+export default Page;
diff --git a/apps/web/pages/settings/billing/index.tsx b/apps/web/pages/settings/billing/index.tsx
index a8423cd36b..00cf1c14b9 100644
--- a/apps/web/pages/settings/billing/index.tsx
+++ b/apps/web/pages/settings/billing/index.tsx
@@ -8,6 +8,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, Meta } from "@calcom/ui";
 import { ExternalLink } from "@calcom/ui/components/icon";
 
+import PageWrapper from "@components/PageWrapper";
+
 interface CtaRowProps {
   title: string;
   description: string;
@@ -64,5 +66,6 @@ const BillingView = () => {
 };
 
 BillingView.getLayout = getLayout;
+BillingView.PageWrapper = PageWrapper;
 
 export default BillingView;
diff --git a/apps/web/pages/settings/developer/api-keys.tsx b/apps/web/pages/settings/developer/api-keys.tsx
index e36c04ce22..e4d1f89ad0 100644
--- a/apps/web/pages/settings/developer/api-keys.tsx
+++ b/apps/web/pages/settings/developer/api-keys.tsx
@@ -18,6 +18,8 @@ import {
 } from "@calcom/ui";
 import { Link as LinkIcon, Plus } from "@calcom/ui/components/icon";
 
+import PageWrapper from "@components/PageWrapper";
+
 const ApiKeysView = () => {
   const { t } = useLocale();
 
@@ -92,5 +94,6 @@ const ApiKeysView = () => {
 };
 
 ApiKeysView.getLayout = getLayout;
+ApiKeysView.PageWrapper = PageWrapper;
 
 export default ApiKeysView;
diff --git a/apps/web/pages/settings/developer/webhooks/[id]/index.tsx b/apps/web/pages/settings/developer/webhooks/[id]/index.tsx
index b8da528284..9daf00ba80 100644
--- a/apps/web/pages/settings/developer/webhooks/[id]/index.tsx
+++ b/apps/web/pages/settings/developer/webhooks/[id]/index.tsx
@@ -1 +1,9 @@
-export { default } from "@calcom/features/webhooks/pages/webhook-edit-view";
+import WebhookEditView from "@calcom/features/webhooks/pages/webhook-edit-view";
+
+import type { CalPageWrapper } from "@components/PageWrapper";
+import PageWrapper from "@components/PageWrapper";
+
+const Page = WebhookEditView as CalPageWrapper;
+Page.PageWrapper = PageWrapper;
+
+export default Page;
diff --git a/apps/web/pages/settings/developer/webhooks/index.tsx b/apps/web/pages/settings/developer/webhooks/index.tsx
index d06442e3d2..67fc89e4ae 100644
--- a/apps/web/pages/settings/developer/webhooks/index.tsx
+++ b/apps/web/pages/settings/developer/webhooks/index.tsx
@@ -1 +1,9 @@
-export { default } from "@calcom/features/webhooks/pages/webhooks-view";
+import WeebhooksView from "@calcom/features/webhooks/pages/webhooks-view";
+
+import type { CalPageWrapper } from "@components/PageWrapper";
+import PageWrapper from "@components/PageWrapper";
+
+const Page = WeebhooksView as CalPageWrapper;
+Page.PageWrapper = PageWrapper;
+
+export default Page;
diff --git a/apps/web/pages/settings/developer/webhooks/new.tsx b/apps/web/pages/settings/developer/webhooks/new.tsx
index 05e067b199..5c957b16ac 100644
--- a/apps/web/pages/settings/developer/webhooks/new.tsx
+++ b/apps/web/pages/settings/developer/webhooks/new.tsx
@@ -1 +1,9 @@
-export { default } from "@calcom/features/webhooks/pages/webhook-new-view";
+import WeebhookNewView from "@calcom/features/webhooks/pages/webhook-new-view";
+
+import type { CalPageWrapper } from "@components/PageWrapper";
+import PageWrapper from "@components/PageWrapper";
+
+const Page = WeebhookNewView as CalPageWrapper;
+Page.PageWrapper = PageWrapper;
+
+export default Page;
diff --git a/apps/web/pages/settings/my-account/appearance.tsx b/apps/web/pages/settings/my-account/appearance.tsx
index 32315d3fa6..d65ef9c31b 100644
--- a/apps/web/pages/settings/my-account/appearance.tsx
+++ b/apps/web/pages/settings/my-account/appearance.tsx
@@ -22,6 +22,8 @@ import {
   UpgradeTeamsBadge,
 } from "@calcom/ui";
 
+import PageWrapper from "@components/PageWrapper";
+
 const SkeletonLoader = ({ title, description }: { title: string; description: string }) => {
   return (
     <SkeletonContainer>
@@ -230,5 +232,6 @@ const AppearanceView = () => {
 };
 
 AppearanceView.getLayout = getLayout;
+AppearanceView.PageWrapper = PageWrapper;
 
 export default AppearanceView;
diff --git a/apps/web/pages/settings/my-account/calendars.tsx b/apps/web/pages/settings/my-account/calendars.tsx
index 7590778134..97afcdddda 100644
--- a/apps/web/pages/settings/my-account/calendars.tsx
+++ b/apps/web/pages/settings/my-account/calendars.tsx
@@ -28,6 +28,7 @@ import { Plus, Calendar } from "@calcom/ui/components/icon";
 
 import { QueryCell } from "@lib/QueryCell";
 
+import PageWrapper from "@components/PageWrapper";
 import { CalendarSwitch } from "@components/settings/CalendarSwitch";
 
 const SkeletonLoader = () => {
@@ -228,5 +229,6 @@ const CalendarsView = () => {
 };
 
 CalendarsView.getLayout = getLayout;
+CalendarsView.PageWrapper = PageWrapper;
 
 export default CalendarsView;
diff --git a/apps/web/pages/settings/my-account/conferencing.tsx b/apps/web/pages/settings/my-account/conferencing.tsx
index 1914445a13..48c1a94758 100644
--- a/apps/web/pages/settings/my-account/conferencing.tsx
+++ b/apps/web/pages/settings/my-account/conferencing.tsx
@@ -27,6 +27,7 @@ import {
 import { AlertCircle, MoreHorizontal, Trash, Video } from "@calcom/ui/components/icon";
 
 import AppListCard from "@components/AppListCard";
+import PageWrapper from "@components/PageWrapper";
 
 const SkeletonLoader = ({ title, description }: { title: string; description: string }) => {
   return (
@@ -188,5 +189,6 @@ const ConferencingLayout = () => {
 };
 
 ConferencingLayout.getLayout = getLayout;
+ConferencingLayout.PageWrapper = PageWrapper;
 
 export default ConferencingLayout;
diff --git a/apps/web/pages/settings/my-account/general.tsx b/apps/web/pages/settings/my-account/general.tsx
index 3f0b1d61f3..1c422d6424 100644
--- a/apps/web/pages/settings/my-account/general.tsx
+++ b/apps/web/pages/settings/my-account/general.tsx
@@ -22,6 +22,8 @@ import {
 
 import { withQuery } from "@lib/QueryCell";
 
+import PageWrapper from "@components/PageWrapper";
+
 const SkeletonLoader = ({ title, description }: { title: string; description: string }) => {
   return (
     <SkeletonContainer>
@@ -219,5 +221,6 @@ const GeneralView = ({ localeProp, user }: GeneralViewProps) => {
 };
 
 GeneralQueryView.getLayout = getLayout;
+GeneralQueryView.PageWrapper = PageWrapper;
 
 export default GeneralQueryView;
diff --git a/apps/web/pages/settings/my-account/profile.tsx b/apps/web/pages/settings/my-account/profile.tsx
index 9f23d0ba94..e60fc271dd 100644
--- a/apps/web/pages/settings/my-account/profile.tsx
+++ b/apps/web/pages/settings/my-account/profile.tsx
@@ -40,6 +40,7 @@ import {
 } from "@calcom/ui";
 import { AlertTriangle, Trash2 } from "@calcom/ui/components/icon";
 
+import PageWrapper from "@components/PageWrapper";
 import TwoFactor from "@components/auth/TwoFactor";
 import { UsernameAvailabilityField } from "@components/ui/UsernameAvailability";
 
@@ -394,5 +395,6 @@ const ProfileForm = ({
 };
 
 ProfileView.getLayout = getLayout;
+ProfileView.PageWrapper = PageWrapper;
 
 export default ProfileView;
diff --git a/apps/web/pages/settings/security/impersonation.tsx b/apps/web/pages/settings/security/impersonation.tsx
index 654b6732c5..046526ce30 100644
--- a/apps/web/pages/settings/security/impersonation.tsx
+++ b/apps/web/pages/settings/security/impersonation.tsx
@@ -6,6 +6,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Button, Form, Label, Meta, showToast, Skeleton, Switch } from "@calcom/ui";
 
+import PageWrapper from "@components/PageWrapper";
+
 import { ssrInit } from "@server/lib/ssr";
 
 const ProfileImpersonationView = () => {
@@ -85,6 +87,7 @@ const ProfileImpersonationView = () => {
 };
 
 ProfileImpersonationView.getLayout = getLayout;
+ProfileImpersonationView.PageWrapper = PageWrapper;
 
 export const getServerSideProps = async (context: GetServerSidePropsContext) => {
   const ssr = await ssrInit(context);
diff --git a/apps/web/pages/settings/security/password.tsx b/apps/web/pages/settings/security/password.tsx
index 599053e576..e57d853e0d 100644
--- a/apps/web/pages/settings/security/password.tsx
+++ b/apps/web/pages/settings/security/password.tsx
@@ -9,6 +9,8 @@ import { userMetadata } from "@calcom/prisma/zod-utils";
 import { trpc } from "@calcom/trpc/react";
 import { Alert, Button, Form, Meta, PasswordField, Select, SettingsToggle, showToast } from "@calcom/ui";
 
+import PageWrapper from "@components/PageWrapper";
+
 type ChangePasswordSessionFormValues = {
   oldPassword: string;
   newPassword: string;
@@ -207,5 +209,6 @@ const PasswordView = () => {
 };
 
 PasswordView.getLayout = getLayout;
+PasswordView.PageWrapper = PageWrapper;
 
 export default PasswordView;
diff --git a/apps/web/pages/settings/security/sso.tsx b/apps/web/pages/settings/security/sso.tsx
index 7b9d48b68e..e20f72e7cd 100644
--- a/apps/web/pages/settings/security/sso.tsx
+++ b/apps/web/pages/settings/security/sso.tsx
@@ -1 +1,9 @@
-export { default } from "@calcom/features/ee/sso/page/user-sso-view";
+import UserSSOView from "@calcom/features/ee/sso/page/user-sso-view";
+
+import type { CalPageWrapper } from "@components/PageWrapper";
+import PageWrapper from "@components/PageWrapper";
+
+const Page = UserSSOView as CalPageWrapper;
+Page.PageWrapper = PageWrapper;
+
+export default Page;
diff --git a/apps/web/pages/settings/security/two-factor-auth.tsx b/apps/web/pages/settings/security/two-factor-auth.tsx
index d2a98ce9be..5d8f6373cf 100644
--- a/apps/web/pages/settings/security/two-factor-auth.tsx
+++ b/apps/web/pages/settings/security/two-factor-auth.tsx
@@ -5,6 +5,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Badge, Meta, Switch, SkeletonButton, SkeletonContainer, SkeletonText, Alert } from "@calcom/ui";
 
+import PageWrapper from "@components/PageWrapper";
 import DisableTwoFactorModal from "@components/settings/DisableTwoFactorModal";
 import EnableTwoFactorModal from "@components/settings/EnableTwoFactorModal";
 
@@ -84,5 +85,6 @@ const TwoFactorAuthView = () => {
 };
 
 TwoFactorAuthView.getLayout = getLayout;
+TwoFactorAuthView.PageWrapper = PageWrapper;
 
 export default TwoFactorAuthView;
diff --git a/apps/web/pages/settings/teams/[id]/appearance.tsx b/apps/web/pages/settings/teams/[id]/appearance.tsx
index a5514889ac..6c6343e791 100644
--- a/apps/web/pages/settings/teams/[id]/appearance.tsx
+++ b/apps/web/pages/settings/teams/[id]/appearance.tsx
@@ -1 +1,9 @@
-export { default } from "@calcom/features/ee/teams/pages/team-appearance-view";
+import TeamAppearenceView from "@calcom/features/ee/teams/pages/team-appearance-view";
+
+import type { CalPageWrapper } from "@components/PageWrapper";
+import PageWrapper from "@components/PageWrapper";
+
+const Page = TeamAppearenceView as CalPageWrapper;
+Page.PageWrapper = PageWrapper;
+
+export default Page;
diff --git a/apps/web/pages/settings/teams/[id]/billing.tsx b/apps/web/pages/settings/teams/[id]/billing.tsx
index f127a20d53..abf744c320 100644
--- a/apps/web/pages/settings/teams/[id]/billing.tsx
+++ b/apps/web/pages/settings/teams/[id]/billing.tsx
@@ -1 +1,9 @@
-export { default } from "@calcom/features/ee/teams/pages/team-billing-view";
+import TeamBillingView from "@calcom/features/ee/teams/pages/team-billing-view";
+
+import type { CalPageWrapper } from "@components/PageWrapper";
+import PageWrapper from "@components/PageWrapper";
+
+const Page = TeamBillingView as CalPageWrapper;
+Page.PageWrapper = PageWrapper;
+
+export default Page;
diff --git a/apps/web/pages/settings/teams/[id]/members.tsx b/apps/web/pages/settings/teams/[id]/members.tsx
index cce1f79bd4..5381265926 100644
--- a/apps/web/pages/settings/teams/[id]/members.tsx
+++ b/apps/web/pages/settings/teams/[id]/members.tsx
@@ -1 +1,9 @@
-export { default } from "@calcom/features/ee/teams/pages/team-members-view";
+import TeamMembersView from "@calcom/features/ee/teams/pages/team-members-view";
+
+import type { CalPageWrapper } from "@components/PageWrapper";
+import PageWrapper from "@components/PageWrapper";
+
+const Page = TeamMembersView as CalPageWrapper;
+Page.PageWrapper = PageWrapper;
+
+export default Page;
diff --git a/apps/web/pages/settings/teams/[id]/onboard-members.tsx b/apps/web/pages/settings/teams/[id]/onboard-members.tsx
index 313db59910..92a300ba4f 100644
--- a/apps/web/pages/settings/teams/[id]/onboard-members.tsx
+++ b/apps/web/pages/settings/teams/[id]/onboard-members.tsx
@@ -3,6 +3,7 @@ import Head from "next/head";
 import AddNewTeamMembers from "@calcom/features/ee/teams/components/AddNewTeamMembers";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
+import PageWrapper from "@components/PageWrapper";
 import WizardLayout from "@components/layouts/WizardLayout";
 
 const OnboardTeamMembersPage = () => {
@@ -24,4 +25,6 @@ OnboardTeamMembersPage.getLayout = (page: React.ReactElement) => (
   </WizardLayout>
 );
 
+OnboardTeamMembersPage.PageWrapper = PageWrapper;
+
 export default OnboardTeamMembersPage;
diff --git a/apps/web/pages/settings/teams/[id]/profile.tsx b/apps/web/pages/settings/teams/[id]/profile.tsx
index 5318cc8478..9845bac378 100644
--- a/apps/web/pages/settings/teams/[id]/profile.tsx
+++ b/apps/web/pages/settings/teams/[id]/profile.tsx
@@ -1 +1,9 @@
-export { default } from "@calcom/features/ee/teams/pages/team-profile-view";
+import TeamProfileView from "@calcom/features/ee/teams/pages/team-profile-view";
+
+import type { CalPageWrapper } from "@components/PageWrapper";
+import PageWrapper from "@components/PageWrapper";
+
+const Page = TeamProfileView as CalPageWrapper;
+Page.PageWrapper = PageWrapper;
+
+export default Page;
diff --git a/apps/web/pages/settings/teams/[id]/sso.tsx b/apps/web/pages/settings/teams/[id]/sso.tsx
index afb0724157..d2022162a1 100644
--- a/apps/web/pages/settings/teams/[id]/sso.tsx
+++ b/apps/web/pages/settings/teams/[id]/sso.tsx
@@ -1 +1,9 @@
-export { default } from "@calcom/features/ee/sso/page/teams-sso-view";
+import TeamSSOView from "@calcom/features/ee/sso/page/teams-sso-view";
+
+import type { CalPageWrapper } from "@components/PageWrapper";
+import PageWrapper from "@components/PageWrapper";
+
+const Page = TeamSSOView as CalPageWrapper;
+Page.PageWrapper = PageWrapper;
+
+export default Page;
diff --git a/apps/web/pages/settings/teams/index.ts b/apps/web/pages/settings/teams/index.ts
index 1f80faa1c1..2f00167179 100644
--- a/apps/web/pages/settings/teams/index.ts
+++ b/apps/web/pages/settings/teams/index.ts
@@ -1 +1,9 @@
-export { default } from "@calcom/features/ee/teams/pages/team-listing-view";
+import TeamListView from "@calcom/features/ee/teams/pages/team-listing-view";
+
+import PageWrapper from "@components/PageWrapper";
+import type { CalPageWrapper } from "@components/PageWrapper";
+
+const Page = TeamListView as CalPageWrapper;
+Page.PageWrapper = PageWrapper;
+
+export default Page;
diff --git a/apps/web/pages/settings/teams/new/index.tsx b/apps/web/pages/settings/teams/new/index.tsx
index b129912117..604dd287c5 100644
--- a/apps/web/pages/settings/teams/new/index.tsx
+++ b/apps/web/pages/settings/teams/new/index.tsx
@@ -3,6 +3,7 @@ import Head from "next/head";
 import { CreateANewTeamForm } from "@calcom/features/ee/teams/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
+import PageWrapper from "@components/PageWrapper";
 import WizardLayout from "@components/layouts/WizardLayout";
 
 const CreateNewTeamPage = () => {
@@ -26,5 +27,6 @@ const LayoutWrapper = (page: React.ReactElement) => {
 };
 
 CreateNewTeamPage.getLayout = LayoutWrapper;
+CreateNewTeamPage.PageWrapper = PageWrapper;
 
 export default CreateNewTeamPage;
diff --git a/apps/web/pages/signup.tsx b/apps/web/pages/signup.tsx
index 47647d0ec0..4fe818ddd6 100644
--- a/apps/web/pages/signup.tsx
+++ b/apps/web/pages/signup.tsx
@@ -14,6 +14,8 @@ import prisma from "@calcom/prisma";
 import type { inferSSRProps } from "@calcom/types/inferSSRProps";
 import { Alert, Button, EmailField, HeadSeo, PasswordField, TextField } from "@calcom/ui";
 
+import PageWrapper from "@components/PageWrapper";
+
 import { asStringOrNull } from "../lib/asStringOrNull";
 import { IS_GOOGLE_LOGIN_ENABLED } from "../server/lib/constants";
 import { ssrInit } from "../server/lib/ssr";
@@ -230,3 +232,4 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
 };
 
 Signup.isThemeSupported = false;
+Signup.PageWrapper = PageWrapper;
diff --git a/apps/web/pages/team/[slug].tsx b/apps/web/pages/team/[slug].tsx
index c90d2db3eb..e5f1237b63 100644
--- a/apps/web/pages/team/[slug].tsx
+++ b/apps/web/pages/team/[slug].tsx
@@ -20,6 +20,7 @@ import { ArrowRight } from "@calcom/ui/components/icon";
 import { useToggleQuery } from "@lib/hooks/useToggleQuery";
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
 
+import PageWrapper from "@components/PageWrapper";
 import Team from "@components/team/screens/Team";
 
 import { ssrInit } from "@server/lib/ssr";
@@ -204,5 +205,6 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
 };
 
 TeamPage.isBookingPage = true;
+TeamPage.PageWrapper = PageWrapper;
 
 export default TeamPage;
diff --git a/apps/web/pages/team/[slug]/[type].tsx b/apps/web/pages/team/[slug]/[type].tsx
index 63a5c9301f..59da20570f 100644
--- a/apps/web/pages/team/[slug]/[type].tsx
+++ b/apps/web/pages/team/[slug]/[type].tsx
@@ -14,6 +14,7 @@ import { asStringOrNull } from "@lib/asStringOrNull";
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
 import type { EmbedProps } from "@lib/withEmbedSsr";
 
+import PageWrapper from "@components/PageWrapper";
 import AvailabilityPage from "@components/booking/pages/AvailabilityPage";
 
 import { ssgInit } from "@server/lib/ssg";
@@ -25,6 +26,7 @@ export default function TeamType(props: AvailabilityTeamPageProps) {
 }
 
 TeamType.isBookingPage = true;
+TeamType.PageWrapper = PageWrapper;
 
 export const getServerSideProps = async (context: GetServerSidePropsContext) => {
   const slugParam = asStringOrNull(context.query.slug);
diff --git a/apps/web/pages/team/[slug]/book.tsx b/apps/web/pages/team/[slug]/book.tsx
index 0290e67cb3..35d73d6553 100644
--- a/apps/web/pages/team/[slug]/book.tsx
+++ b/apps/web/pages/team/[slug]/book.tsx
@@ -14,6 +14,7 @@ import { customInputSchema, eventTypeBookingFields, EventTypeMetaDataSchema } fr
 import { asStringOrNull, asStringOrThrow } from "@lib/asStringOrNull";
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
 
+import PageWrapper from "@components/PageWrapper";
 import BookingPage from "@components/booking/pages/BookingPage";
 
 import { ssrInit } from "@server/lib/ssr";
@@ -24,6 +25,7 @@ export default function TeamBookingPage(props: TeamBookingPageProps) {
   return <BookingPage {...props} />;
 }
 TeamBookingPage.isBookingPage = true;
+TeamBookingPage.PageWrapper = PageWrapper;
 
 const querySchema = z.object({
   rescheduleUid: z.string().optional(),
diff --git a/apps/web/pages/teams/index.tsx b/apps/web/pages/teams/index.tsx
index 9c54896c91..7380d20975 100644
--- a/apps/web/pages/teams/index.tsx
+++ b/apps/web/pages/teams/index.tsx
@@ -7,6 +7,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui";
 import { Plus } from "@calcom/ui/components/icon";
 
+import PageWrapper from "@components/PageWrapper";
+
 function Teams() {
   const { t } = useLocale();
   return (
@@ -36,5 +38,6 @@ export const getStaticProps = async () => {
 };
 
 Teams.requiresLicense = false;
+Teams.PageWrapper = PageWrapper;
 
 export default Teams;
diff --git a/apps/web/pages/video/[uid].tsx b/apps/web/pages/video/[uid].tsx
index fd6cfc43e5..721de06a56 100644
--- a/apps/web/pages/video/[uid].tsx
+++ b/apps/web/pages/video/[uid].tsx
@@ -16,6 +16,8 @@ import prisma, { bookingMinimalSelect } from "@calcom/prisma";
 import type { inferSSRProps } from "@calcom/types/inferSSRProps";
 import { ChevronRight } from "@calcom/ui/components/icon";
 
+import PageWrapper from "@components/PageWrapper";
+
 import { ssrInit } from "@server/lib/ssr";
 
 const recordingStartedEventResponse = z
@@ -261,6 +263,8 @@ export function VideoMeetingInfo(props: VideoMeetingInfo) {
   );
 }
 
+VideoMeetingInfo.PageWrapper = PageWrapper;
+
 export async function getServerSideProps(context: GetServerSidePropsContext) {
   const { req, res } = context;
 
diff --git a/apps/web/pages/video/meeting-ended/[uid].tsx b/apps/web/pages/video/meeting-ended/[uid].tsx
index 1991e8a957..e89d8ec6a4 100644
--- a/apps/web/pages/video/meeting-ended/[uid].tsx
+++ b/apps/web/pages/video/meeting-ended/[uid].tsx
@@ -9,6 +9,8 @@ import { ArrowRight, Calendar, X } from "@calcom/ui/components/icon";
 
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
 
+import PageWrapper from "@components/PageWrapper";
+
 export default function MeetingUnavailable(props: inferSSRProps<typeof getServerSideProps>) {
   const { t } = useLocale();
 
@@ -62,6 +64,8 @@ export default function MeetingUnavailable(props: inferSSRProps<typeof getServer
   );
 }
 
+MeetingUnavailable.PageWrapper = PageWrapper;
+
 export async function getServerSideProps(context: NextPageContext) {
   const booking = await prisma.booking.findUnique({
     where: {
diff --git a/apps/web/pages/video/meeting-not-started/[uid].tsx b/apps/web/pages/video/meeting-not-started/[uid].tsx
index 45228bd592..21f793a9e8 100644
--- a/apps/web/pages/video/meeting-not-started/[uid].tsx
+++ b/apps/web/pages/video/meeting-not-started/[uid].tsx
@@ -8,6 +8,8 @@ import type { inferSSRProps } from "@calcom/types/inferSSRProps";
 import { Button, HeadSeo, EmptyScreen } from "@calcom/ui";
 import { ArrowRight, Calendar, Clock } from "@calcom/ui/components/icon";
 
+import PageWrapper from "@components/PageWrapper";
+
 export default function MeetingNotStarted(props: inferSSRProps<typeof getServerSideProps>) {
   const { t } = useLocale();
   return (
@@ -37,6 +39,8 @@ export default function MeetingNotStarted(props: inferSSRProps<typeof getServerS
   );
 }
 
+MeetingNotStarted.PageWrapper = PageWrapper;
+
 export async function getServerSideProps(context: NextPageContext) {
   const booking = await prisma.booking.findUnique({
     where: {
diff --git a/apps/web/pages/video/no-meeting-found.tsx b/apps/web/pages/video/no-meeting-found.tsx
index 3b990a36b2..7de824c944 100644
--- a/apps/web/pages/video/no-meeting-found.tsx
+++ b/apps/web/pages/video/no-meeting-found.tsx
@@ -2,6 +2,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, EmptyScreen, HeadSeo } from "@calcom/ui";
 import { X, ArrowRight } from "@calcom/ui/components/icon";
 
+import PageWrapper from "@components/PageWrapper";
+
 export default function NoMeetingFound() {
   const { t } = useLocale();
 
@@ -23,3 +25,5 @@ export default function NoMeetingFound() {
     </>
   );
 }
+
+NoMeetingFound.PageWrapper = PageWrapper;
diff --git a/apps/web/pages/workflows/[workflow].tsx b/apps/web/pages/workflows/[workflow].tsx
index 1be2ceb1bc..53f72bf08f 100644
--- a/apps/web/pages/workflows/[workflow].tsx
+++ b/apps/web/pages/workflows/[workflow].tsx
@@ -1,7 +1,10 @@
 import type { GetStaticPaths, GetStaticProps } from "next";
 import { z } from "zod";
 
-export { default } from "@calcom/features/ee/workflows/pages/workflow";
+import Workflow from "@calcom/features/ee/workflows/pages/workflow";
+
+import PageWrapper from "@components/PageWrapper";
+import type { CalPageWrapper } from "@components/PageWrapper";
 
 const querySchema = z.object({
   workflow: z.string(),
@@ -26,3 +29,8 @@ export const getStaticPaths: GetStaticPaths = () => {
     fallback: "blocking",
   };
 };
+
+const WorkflowsPage = Workflow as CalPageWrapper;
+WorkflowsPage.PageWrapper = PageWrapper;
+
+export default WorkflowsPage;
diff --git a/apps/web/pages/workflows/index.tsx b/apps/web/pages/workflows/index.tsx
index a0ea681736..6112df1592 100644
--- a/apps/web/pages/workflows/index.tsx
+++ b/apps/web/pages/workflows/index.tsx
@@ -1 +1,9 @@
-export { default } from "@calcom/features/ee/workflows/pages/index";
+import Workflows from "@calcom/features/ee/workflows/pages/index";
+
+import PageWrapper from "@components/PageWrapper";
+import type { CalPageWrapper } from "@components/PageWrapper";
+
+const WorkflowsPage = Workflows as CalPageWrapper;
+WorkflowsPage.PageWrapper = PageWrapper;
+
+export default WorkflowsPage;