diff --git a/.github/workflows/labeler.yml b/.github/workflows/labeler.yml
index e9074b895e..0fcce9f3ed 100644
--- a/.github/workflows/labeler.yml
+++ b/.github/workflows/labeler.yml
@@ -28,7 +28,7 @@ jobs:
         with:
           repo-token: ${{ secrets.EQUITY_BEE_TEAM_LABELER_ACTION_TOKEN }}
           organization-name: calcom
-          ignore-labels: "app-store, ai, authentication, automated-testing, platform, billing, bookings, caldav, calendar-apps, ci, console, crm-apps, docs, documentation, emails, embeds, event-types, i18n, impersonation, manual-testing, ui, performance, ops-stack, organizations, public-api, routing-forms, seats, teams, webhooks, workflows, zapier"
+          ignore-labels: "admin, app-store, ai, authentication, automated-testing, devops, platform, billing, bookings, caldav, calendar-apps, ci, console, crm-apps, docs, documentation, emails, embeds, event-types, i18n, impersonation, manual-testing, ui, performance, ops-stack, organizations, public-api, routing-forms, seats, teams, webhooks, workflows, zapier"
   apply-labels-from-issue:
     runs-on: ubuntu-latest
 
diff --git a/.github/workflows/nextjs-bundle-analysis.yml b/.github/workflows/nextjs-bundle-analysis.yml
index 4c8da86217..4e2fec6a9a 100644
--- a/.github/workflows/nextjs-bundle-analysis.yml
+++ b/.github/workflows/nextjs-bundle-analysis.yml
@@ -62,18 +62,18 @@ jobs:
 
       - name: Get comment body
         id: get-comment-body
-        if: success()
+        if: success() && github.event.number
         run: |
           cd apps/web
           body=$(cat .next/analyze/__bundle_analysis_comment.txt)
           body="${body//'%'/'%25'}"
           body="${body//$'\n'/'%0A'}"
           body="${body//$'\r'/'%0D'}"
-          echo "{name}={$body}" >> $GITHUB_OUTPUT
+          echo "{body}=${body}" >> $GITHUB_OUTPUT
 
       - name: Find Comment
         uses: peter-evans/find-comment@v2
-        if: success()
+        if: success() && github.event.number
         id: fc
         with:
           issue-number: ${{ github.event.number }}
diff --git a/apps/api/pages/api/bookings/[id]/_delete.ts b/apps/api/pages/api/bookings/[id]/_delete.ts
index d67a9bb4df..451c8d05d4 100644
--- a/apps/api/pages/api/bookings/[id]/_delete.ts
+++ b/apps/api/pages/api/bookings/[id]/_delete.ts
@@ -33,7 +33,7 @@ import { schemaQueryIdParseInt } from "~/lib/validations/shared/queryIdTransform
  *          type: boolean
  *        description: Delete all remaining bookings
  *      - in: query
- *        name: reason
+ *        name: cancellationReason
  *        required: false
  *        schema:
  *          type: string
diff --git a/apps/api/pages/api/teams/[teamId]/_patch.ts b/apps/api/pages/api/teams/[teamId]/_patch.ts
index e1cfe2a865..cdc11dfc7d 100644
--- a/apps/api/pages/api/teams/[teamId]/_patch.ts
+++ b/apps/api/pages/api/teams/[teamId]/_patch.ts
@@ -58,6 +58,7 @@ export async function patchHandler(req: NextApiRequest) {
   const { prisma, body, userId } = req;
   const data = schemaTeamUpdateBodyParams.parse(body);
   const { teamId } = schemaQueryTeamId.parse(req.query);
+
   /** Only OWNERS and ADMINS can edit teams */
   const _team = await prisma.team.findFirst({
     include: { members: true },
@@ -65,6 +66,18 @@ export async function patchHandler(req: NextApiRequest) {
   });
   if (!_team) throw new HttpError({ statusCode: 401, message: "Unauthorized: OWNER or ADMIN required" });
 
+  const slugAlreadyExists = await prisma.team.findFirst({
+    where: {
+      slug: {
+        mode: "insensitive",
+        equals: data.slug,
+      },
+    },
+  });
+  
+  if (slugAlreadyExists && data.slug !== _team.slug)
+    throw new HttpError({ statusCode: 409, message: "Team slug already exists" });
+
   // Check if parentId is related to this user
   if (data.parentId && data.parentId === teamId) {
     throw new HttpError({
diff --git a/apps/api/pages/api/webhooks/[id]/_patch.ts b/apps/api/pages/api/webhooks/[id]/_patch.ts
index fd0f8db3f5..0a9b63f0de 100644
--- a/apps/api/pages/api/webhooks/[id]/_patch.ts
+++ b/apps/api/pages/api/webhooks/[id]/_patch.ts
@@ -69,7 +69,12 @@ import { schemaWebhookEditBodyParams, schemaWebhookReadPublic } from "~/lib/vali
 export async function patchHandler(req: NextApiRequest) {
   const { prisma, query, userId, isAdmin } = req;
   const { id } = schemaQueryIdAsString.parse(query);
-  const { eventTypeId, userId: bodyUserId, ...data } = schemaWebhookEditBodyParams.parse(req.body);
+  const {
+    eventTypeId,
+    userId: bodyUserId,
+    eventTriggers,
+    ...data
+  } = schemaWebhookEditBodyParams.parse(req.body);
   const args: Prisma.WebhookUpdateArgs = { where: { id }, data };
 
   if (eventTypeId) {
@@ -87,6 +92,11 @@ export async function patchHandler(req: NextApiRequest) {
     args.data.userId = bodyUserId;
   }
 
+  if (args.data.eventTriggers) {
+    const eventTriggersSet = new Set(eventTriggers);
+    args.data.eventTriggers = Array.from(eventTriggersSet);
+  }
+
   const result = await prisma.webhook.update(args);
   return { webhook: schemaWebhookReadPublic.parse(result) };
 }
diff --git a/apps/api/pages/api/webhooks/_post.ts b/apps/api/pages/api/webhooks/_post.ts
index 8c36bcbcf6..e08d59d29d 100644
--- a/apps/api/pages/api/webhooks/_post.ts
+++ b/apps/api/pages/api/webhooks/_post.ts
@@ -66,7 +66,12 @@ import { schemaWebhookCreateBodyParams, schemaWebhookReadPublic } from "~/lib/va
  */
 async function postHandler(req: NextApiRequest) {
   const { userId, isAdmin, prisma } = req;
-  const { eventTypeId, userId: bodyUserId, ...body } = schemaWebhookCreateBodyParams.parse(req.body);
+  const {
+    eventTypeId,
+    userId: bodyUserId,
+    eventTriggers,
+    ...body
+  } = schemaWebhookCreateBodyParams.parse(req.body);
   const args: Prisma.WebhookCreateArgs = { data: { id: uuidv4(), ...body } };
 
   // If no event type, we assume is for the current user. If admin we run more checks below...
@@ -87,6 +92,11 @@ async function postHandler(req: NextApiRequest) {
     args.data.userId = bodyUserId;
   }
 
+  if (args.data.eventTriggers) {
+    const eventTriggersSet = new Set(eventTriggers);
+    args.data.eventTriggers = Array.from(eventTriggersSet);
+  }
+
   const data = await prisma.webhook.create(args);
 
   return {
diff --git a/apps/web/app/AppDirSSRHOC.tsx b/apps/web/app/AppDirSSRHOC.tsx
new file mode 100644
index 0000000000..87b419ca49
--- /dev/null
+++ b/apps/web/app/AppDirSSRHOC.tsx
@@ -0,0 +1,17 @@
+import type { GetServerSideProps, GetServerSidePropsContext } from "next";
+import { notFound, redirect } from "next/navigation";
+
+export const withAppDir =
+  (getServerSideProps: GetServerSideProps) => async (context: GetServerSidePropsContext) => {
+    const ssrResponse = await getServerSideProps(context);
+
+    if ("redirect" in ssrResponse) {
+      redirect(ssrResponse.redirect.destination);
+    }
+
+    if ("notFound" in ssrResponse) {
+      notFound();
+    }
+
+    return ssrResponse.props;
+  };
diff --git a/apps/web/app/WithEmbedSSR.tsx b/apps/web/app/WithEmbedSSR.tsx
new file mode 100644
index 0000000000..c19ead200d
--- /dev/null
+++ b/apps/web/app/WithEmbedSSR.tsx
@@ -0,0 +1,57 @@
+import type { GetServerSidePropsContext } from "next";
+import { isNotFoundError } from "next/dist/client/components/not-found";
+import { getURLFromRedirectError, isRedirectError } from "next/dist/client/components/redirect";
+import { notFound, redirect } from "next/navigation";
+
+import { WEBAPP_URL } from "@calcom/lib/constants";
+
+export type EmbedProps = {
+  isEmbed?: boolean;
+};
+
+export default function withEmbedSsrAppDir<T extends Record<string, any>>(
+  getData: (context: GetServerSidePropsContext) => Promise<T>
+) {
+  return async (context: GetServerSidePropsContext): Promise<T> => {
+    const { embed, layout } = context.query;
+
+    try {
+      const props = await getData(context);
+
+      return {
+        ...props,
+        isEmbed: true,
+      };
+    } catch (e) {
+      if (isRedirectError(e)) {
+        const destinationUrl = getURLFromRedirectError(e);
+        let urlPrefix = "";
+
+        // Get the URL parsed from URL so that we can reliably read pathname and searchParams from it.
+        const destinationUrlObj = new URL(destinationUrl, WEBAPP_URL);
+
+        // If it's a complete URL, use the origin as the prefix to ensure we redirect to the same domain.
+        if (destinationUrl.search(/^(http:|https:).*/) !== -1) {
+          urlPrefix = destinationUrlObj.origin;
+        } else {
+          // Don't use any prefix for relative URLs to ensure we stay on the same domain
+          urlPrefix = "";
+        }
+
+        const destinationQueryStr = destinationUrlObj.searchParams.toString();
+        // Make sure that redirect happens to /embed page and pass on embed query param as is for preserving Cal JS API namespace
+        const newDestinationUrl = `${urlPrefix}${destinationUrlObj.pathname}/embed?${
+          destinationQueryStr ? `${destinationQueryStr}&` : ""
+        }layout=${layout}&embed=${embed}`;
+
+        redirect(newDestinationUrl);
+      }
+
+      if (isNotFoundError(e)) {
+        notFound();
+      }
+
+      throw e;
+    }
+  };
+}
diff --git a/apps/web/app/future/booking/[uid]/embed/page.tsx b/apps/web/app/future/booking/[uid]/embed/page.tsx
new file mode 100644
index 0000000000..d3fcef1feb
--- /dev/null
+++ b/apps/web/app/future/booking/[uid]/embed/page.tsx
@@ -0,0 +1,10 @@
+import OldPage from "@pages/booking/[uid]";
+import withEmbedSsrAppDir from "app/WithEmbedSSR";
+import { WithLayout } from "app/layoutHOC";
+
+import { getData } from "../page";
+
+const getEmbedData = withEmbedSsrAppDir(getData);
+
+// @ts-expect-error Type '(context: GetServerSidePropsContext) => Promise<any>' is not assignable to type '(arg: {
+export default WithLayout({ getLayout: null, getData: getEmbedData, Page: OldPage });
diff --git a/apps/web/app/future/booking/[uid]/page.tsx b/apps/web/app/future/booking/[uid]/page.tsx
new file mode 100644
index 0000000000..e0db2efa6f
--- /dev/null
+++ b/apps/web/app/future/booking/[uid]/page.tsx
@@ -0,0 +1,204 @@
+import OldPage from "@pages/booking/[uid]";
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+import type { GetServerSidePropsContext } from "next";
+import { notFound } from "next/navigation";
+import { z } from "zod";
+
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import { getBookingWithResponses } from "@calcom/features/bookings/lib/get-booking";
+import { parseRecurringEvent } from "@calcom/lib";
+import { getDefaultEvent } from "@calcom/lib/defaultEvents";
+import { maybeGetBookingUidFromSeat } from "@calcom/lib/server/maybeGetBookingUidFromSeat";
+import prisma from "@calcom/prisma";
+import { customInputSchema, EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
+
+import { getRecurringBookings, handleSeatsEventTypeOnBooking, getEventTypesFromDB } from "@lib/booking";
+
+import { ssrInit } from "@server/lib/ssr";
+
+const stringToBoolean = z
+  .string()
+  .optional()
+  .transform((val) => val === "true");
+
+const querySchema = z.object({
+  uid: z.string(),
+  email: z.string().optional(),
+  eventTypeSlug: z.string().optional(),
+  cancel: stringToBoolean,
+  allRemainingBookings: stringToBoolean,
+  changes: stringToBoolean,
+  reschedule: stringToBoolean,
+  isSuccessBookingPage: stringToBoolean,
+  formerTime: z.string().optional(),
+  seatReferenceUid: z.string().optional(),
+});
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    () => "",
+    () => ""
+  );
+
+export const getData = async (context: GetServerSidePropsContext) => {
+  const ssr = await ssrInit(context);
+  const session = await getServerSession(context);
+  let tz: string | null = null;
+  let userTimeFormat: number | null = null;
+  let requiresLoginToUpdate = false;
+  if (session) {
+    const user = await ssr.viewer.me.fetch();
+    tz = user.timeZone;
+    userTimeFormat = user.timeFormat;
+  }
+
+  const parsedQuery = querySchema.safeParse(context.query);
+
+  if (!parsedQuery.success) {
+    notFound();
+  }
+
+  const { uid, eventTypeSlug, seatReferenceUid } = parsedQuery.data;
+
+  const { uid: maybeUid } = await maybeGetBookingUidFromSeat(prisma, uid);
+  const bookingInfoRaw = await prisma.booking.findFirst({
+    where: {
+      uid: maybeUid,
+    },
+    select: {
+      title: true,
+      id: true,
+      uid: true,
+      description: true,
+      customInputs: true,
+      smsReminderNumber: true,
+      recurringEventId: true,
+      startTime: true,
+      endTime: true,
+      location: true,
+      status: true,
+      metadata: true,
+      cancellationReason: true,
+      responses: true,
+      rejectionReason: true,
+      user: {
+        select: {
+          id: true,
+          name: true,
+          email: true,
+          username: true,
+          timeZone: true,
+        },
+      },
+      attendees: {
+        select: {
+          name: true,
+          email: true,
+          timeZone: true,
+        },
+      },
+      eventTypeId: true,
+      eventType: {
+        select: {
+          eventName: true,
+          slug: true,
+          timeZone: true,
+        },
+      },
+      seatsReferences: {
+        select: {
+          referenceUid: true,
+        },
+      },
+    },
+  });
+
+  if (!bookingInfoRaw) {
+    notFound();
+  }
+
+  const eventTypeRaw = !bookingInfoRaw.eventTypeId
+    ? getDefaultEvent(eventTypeSlug || "")
+    : await getEventTypesFromDB(bookingInfoRaw.eventTypeId);
+  if (!eventTypeRaw) {
+    notFound();
+  }
+
+  if (eventTypeRaw.seatsPerTimeSlot && !seatReferenceUid && !session) {
+    requiresLoginToUpdate = true;
+  }
+
+  const bookingInfo = getBookingWithResponses(bookingInfoRaw);
+  // @NOTE: had to do this because Server side cant return [Object objects]
+  // probably fixable with json.stringify -> json.parse
+  bookingInfo["startTime"] = (bookingInfo?.startTime as Date)?.toISOString() as unknown as Date;
+  bookingInfo["endTime"] = (bookingInfo?.endTime as Date)?.toISOString() as unknown as Date;
+
+  eventTypeRaw.users = !!eventTypeRaw.hosts?.length
+    ? eventTypeRaw.hosts.map((host) => host.user)
+    : eventTypeRaw.users;
+
+  if (!eventTypeRaw.users.length) {
+    if (!eventTypeRaw.owner) {
+      notFound();
+    }
+
+    eventTypeRaw.users.push({
+      ...eventTypeRaw.owner,
+    });
+  }
+
+  const eventType = {
+    ...eventTypeRaw,
+    periodStartDate: eventTypeRaw.periodStartDate?.toString() ?? null,
+    periodEndDate: eventTypeRaw.periodEndDate?.toString() ?? null,
+    metadata: EventTypeMetaDataSchema.parse(eventTypeRaw.metadata),
+    recurringEvent: parseRecurringEvent(eventTypeRaw.recurringEvent),
+    customInputs: customInputSchema.array().parse(eventTypeRaw.customInputs),
+  };
+
+  const profile = {
+    name: eventType.team?.name || eventType.users[0]?.name || null,
+    email: eventType.team ? null : eventType.users[0].email || null,
+    theme: (!eventType.team?.name && eventType.users[0]?.theme) || null,
+    brandColor: eventType.team ? null : eventType.users[0].brandColor || null,
+    darkBrandColor: eventType.team ? null : eventType.users[0].darkBrandColor || null,
+    slug: eventType.team?.slug || eventType.users[0]?.username || null,
+  };
+
+  if (bookingInfo !== null && eventType.seatsPerTimeSlot) {
+    await handleSeatsEventTypeOnBooking(eventType, bookingInfo, seatReferenceUid, session?.user.id);
+  }
+
+  const payment = await prisma.payment.findFirst({
+    where: {
+      bookingId: bookingInfo.id,
+    },
+    select: {
+      success: true,
+      refunded: true,
+      currency: true,
+      amount: true,
+      paymentOption: true,
+    },
+  });
+
+  return {
+    themeBasis: eventType.team ? eventType.team.slug : eventType.users[0]?.username,
+    hideBranding: eventType.team ? eventType.team.hideBranding : eventType.users[0].hideBranding,
+    profile,
+    eventType,
+    recurringBookings: await getRecurringBookings(bookingInfo.recurringEventId),
+    dehydratedState: ssr.dehydrate(),
+    dynamicEventName: bookingInfo?.eventType?.eventName || "",
+    bookingInfo,
+    paymentStatus: payment,
+    ...(tz && { tz }),
+    userTimeFormat,
+    requiresLoginToUpdate,
+  };
+};
+
+// @ts-expect-error Argument of type '{ req: { headers: ReadonlyHeaders; cookies: ReadonlyRequestCookies; }; }' is not assignable to parameter of type 'GetServerSidePropsContext'.
+export default WithLayout({ getLayout: null, getData, Page: OldPage });
diff --git a/apps/web/app/future/enterprise/layout.tsx b/apps/web/app/future/enterprise/layout.tsx
new file mode 100644
index 0000000000..9bf51a70f5
--- /dev/null
+++ b/apps/web/app/future/enterprise/layout.tsx
@@ -0,0 +1,5 @@
+import { WithLayout } from "app/layoutHOC";
+
+import { getLayout } from "@calcom/features/MainLayoutAppDir";
+
+export default WithLayout({ getLayout })<"L">;
diff --git a/apps/web/app/future/enterprise/page.tsx b/apps/web/app/future/enterprise/page.tsx
new file mode 100644
index 0000000000..3be9790f06
--- /dev/null
+++ b/apps/web/app/future/enterprise/page.tsx
@@ -0,0 +1,11 @@
+import { _generateMetadata } from "app/_utils";
+
+import EnterprisePage from "@components/EnterprisePage";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("create_your_org"),
+    (t) => t("create_your_org_description")
+  );
+
+export default EnterprisePage;
diff --git a/apps/web/app/future/insights/page.tsx b/apps/web/app/future/insights/page.tsx
new file mode 100644
index 0000000000..0b82a624c6
--- /dev/null
+++ b/apps/web/app/future/insights/page.tsx
@@ -0,0 +1,26 @@
+import LegacyPage from "@pages/insights/index";
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+import { notFound } from "next/navigation";
+
+import { getLayout } from "@calcom/features/MainLayoutAppDir";
+import { getFeatureFlagMap } from "@calcom/features/flags/server/utils";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    () => "Insights",
+    (t) => t("insights_subtitle")
+  );
+
+async function getData() {
+  const prisma = await import("@calcom/prisma").then((mod) => mod.default);
+  const flags = await getFeatureFlagMap(prisma);
+
+  if (flags.insights === false) {
+    return notFound();
+  }
+
+  return {};
+}
+
+export default WithLayout({ getLayout, getData, Page: LegacyPage });
diff --git a/apps/web/app/future/maintenance/page.tsx b/apps/web/app/future/maintenance/page.tsx
new file mode 100644
index 0000000000..4995ffb772
--- /dev/null
+++ b/apps/web/app/future/maintenance/page.tsx
@@ -0,0 +1,13 @@
+import LegacyPage from "@pages/maintenance";
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+
+import { APP_NAME } from "@calcom/lib/constants";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => `${t("under_maintenance")} | ${APP_NAME}`,
+    (t) => t("under_maintenance_description", { appName: APP_NAME })
+  );
+
+export default WithLayout({ getLayout: null, Page: LegacyPage })<"P">;
diff --git a/apps/web/app/future/more/page.tsx b/apps/web/app/future/more/page.tsx
new file mode 100644
index 0000000000..c6eb75321a
--- /dev/null
+++ b/apps/web/app/future/more/page.tsx
@@ -0,0 +1,4 @@
+import Page from "@pages/more";
+import { WithLayout } from "app/layoutHOC";
+
+export default WithLayout({ getLayout: null, Page })<"P">;
diff --git a/apps/web/app/future/reschedule/[uid]/embed/page.tsx b/apps/web/app/future/reschedule/[uid]/embed/page.tsx
new file mode 100644
index 0000000000..52bef3e486
--- /dev/null
+++ b/apps/web/app/future/reschedule/[uid]/embed/page.tsx
@@ -0,0 +1,21 @@
+import { getServerSideProps } from "@pages/reschedule/[uid]";
+import { withAppDir } from "app/AppDirSSRHOC";
+import type { Params } from "next/dist/shared/lib/router/utils/route-matcher";
+import { cookies, headers } from "next/headers";
+
+import { buildLegacyCtx } from "@lib/buildLegacyCtx";
+import withEmbedSsr from "@lib/withEmbedSsr";
+
+type PageProps = Readonly<{
+  params: Params;
+}>;
+
+const Page = async ({ params }: PageProps) => {
+  const legacyCtx = buildLegacyCtx(headers(), cookies(), params);
+  // @ts-expect-error Argument of type '{ query: Params; params: Params; req: { headers: ReadonlyHeaders; cookies: ReadonlyRequestCookies; }; }'
+  await withAppDir(withEmbedSsr(getServerSideProps))(legacyCtx);
+
+  return null;
+};
+
+export default Page;
diff --git a/apps/web/app/future/reschedule/[uid]/page.tsx b/apps/web/app/future/reschedule/[uid]/page.tsx
new file mode 100644
index 0000000000..40fbf05617
--- /dev/null
+++ b/apps/web/app/future/reschedule/[uid]/page.tsx
@@ -0,0 +1,30 @@
+import OldPage, { getServerSideProps as _getServerSideProps } from "@pages/reschedule/[uid]";
+import { withAppDir } from "app/AppDirSSRHOC";
+import { _generateMetadata } from "app/_utils";
+import type { Params } from "next/dist/shared/lib/router/utils/route-matcher";
+import { headers, cookies } from "next/headers";
+
+import { buildLegacyCtx } from "@lib/buildLegacyCtx";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    () => "",
+    () => ""
+  );
+
+type PageProps = Readonly<{
+  params: Params;
+}>;
+
+const getData = withAppDir(_getServerSideProps);
+
+const Page = async ({ params }: PageProps) => {
+  const legacyCtx = buildLegacyCtx(headers(), cookies(), params);
+
+  // @ts-expect-error Argument of type '{ query: Params; params: Params; req: { headers: ReadonlyHeaders; cookies: ReadonlyRequestCookies; }; }'
+  await getData(legacyCtx);
+
+  return <OldPage />;
+};
+
+export default Page;
diff --git a/apps/web/app/future/settings/my-account/appearance/layout.tsx b/apps/web/app/future/settings/my-account/appearance/layout.tsx
new file mode 100644
index 0000000000..230bfea4d1
--- /dev/null
+++ b/apps/web/app/future/settings/my-account/appearance/layout.tsx
@@ -0,0 +1,5 @@
+import { WithLayout } from "app/layoutHOC";
+
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayoutAppDir";
+
+export default WithLayout({ getLayout });
diff --git a/apps/web/app/future/settings/my-account/appearance/page.tsx b/apps/web/app/future/settings/my-account/appearance/page.tsx
new file mode 100644
index 0000000000..73def1169e
--- /dev/null
+++ b/apps/web/app/future/settings/my-account/appearance/page.tsx
@@ -0,0 +1,10 @@
+import Page from "@pages/settings/my-account/appearance";
+import { _generateMetadata } from "app/_utils";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("appearance"),
+    (t) => t("appearance_description")
+  );
+
+export default Page;
diff --git a/apps/web/app/future/settings/my-account/calendars/layout.tsx b/apps/web/app/future/settings/my-account/calendars/layout.tsx
new file mode 100644
index 0000000000..230bfea4d1
--- /dev/null
+++ b/apps/web/app/future/settings/my-account/calendars/layout.tsx
@@ -0,0 +1,5 @@
+import { WithLayout } from "app/layoutHOC";
+
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayoutAppDir";
+
+export default WithLayout({ getLayout });
diff --git a/apps/web/app/future/settings/my-account/calendars/page.tsx b/apps/web/app/future/settings/my-account/calendars/page.tsx
new file mode 100644
index 0000000000..b44eeadcbe
--- /dev/null
+++ b/apps/web/app/future/settings/my-account/calendars/page.tsx
@@ -0,0 +1,10 @@
+import Page from "@pages/settings/my-account/calendars";
+import { _generateMetadata } from "app/_utils";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("calendars"),
+    (t) => t("calendars_description")
+  );
+
+export default Page;
diff --git a/apps/web/app/future/settings/my-account/conferencing/layout.tsx b/apps/web/app/future/settings/my-account/conferencing/layout.tsx
new file mode 100644
index 0000000000..230bfea4d1
--- /dev/null
+++ b/apps/web/app/future/settings/my-account/conferencing/layout.tsx
@@ -0,0 +1,5 @@
+import { WithLayout } from "app/layoutHOC";
+
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayoutAppDir";
+
+export default WithLayout({ getLayout });
diff --git a/apps/web/app/future/settings/my-account/conferencing/page.tsx b/apps/web/app/future/settings/my-account/conferencing/page.tsx
new file mode 100644
index 0000000000..ce3edb408d
--- /dev/null
+++ b/apps/web/app/future/settings/my-account/conferencing/page.tsx
@@ -0,0 +1,10 @@
+import Page from "@pages/settings/my-account/conferencing";
+import { _generateMetadata } from "app/_utils";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("conferencing"),
+    (t) => t("conferencing_description")
+  );
+
+export default Page;
diff --git a/apps/web/app/future/settings/my-account/general/layout.tsx b/apps/web/app/future/settings/my-account/general/layout.tsx
new file mode 100644
index 0000000000..230bfea4d1
--- /dev/null
+++ b/apps/web/app/future/settings/my-account/general/layout.tsx
@@ -0,0 +1,5 @@
+import { WithLayout } from "app/layoutHOC";
+
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayoutAppDir";
+
+export default WithLayout({ getLayout });
diff --git a/apps/web/app/future/settings/my-account/general/page.tsx b/apps/web/app/future/settings/my-account/general/page.tsx
new file mode 100644
index 0000000000..a768e8f608
--- /dev/null
+++ b/apps/web/app/future/settings/my-account/general/page.tsx
@@ -0,0 +1,10 @@
+import Page from "@pages/settings/my-account/general";
+import { _generateMetadata } from "app/_utils";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("general"),
+    (t) => t("general_description")
+  );
+
+export default Page;
diff --git a/apps/web/app/future/settings/my-account/profile/layout.tsx b/apps/web/app/future/settings/my-account/profile/layout.tsx
new file mode 100644
index 0000000000..230bfea4d1
--- /dev/null
+++ b/apps/web/app/future/settings/my-account/profile/layout.tsx
@@ -0,0 +1,5 @@
+import { WithLayout } from "app/layoutHOC";
+
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayoutAppDir";
+
+export default WithLayout({ getLayout });
diff --git a/apps/web/app/future/settings/my-account/profile/page.tsx b/apps/web/app/future/settings/my-account/profile/page.tsx
new file mode 100644
index 0000000000..2d850a0df6
--- /dev/null
+++ b/apps/web/app/future/settings/my-account/profile/page.tsx
@@ -0,0 +1,10 @@
+import Page from "@pages/settings/my-account/profile";
+import { _generateMetadata } from "app/_utils";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("profile"),
+    (t) => t("profile_description")
+  );
+
+export default Page;
diff --git a/apps/web/app/future/settings/security/impersonation/layout.tsx b/apps/web/app/future/settings/security/impersonation/layout.tsx
new file mode 100644
index 0000000000..230bfea4d1
--- /dev/null
+++ b/apps/web/app/future/settings/security/impersonation/layout.tsx
@@ -0,0 +1,5 @@
+import { WithLayout } from "app/layoutHOC";
+
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayoutAppDir";
+
+export default WithLayout({ getLayout });
diff --git a/apps/web/app/future/settings/security/impersonation/page.tsx b/apps/web/app/future/settings/security/impersonation/page.tsx
new file mode 100644
index 0000000000..2fa8e4fec2
--- /dev/null
+++ b/apps/web/app/future/settings/security/impersonation/page.tsx
@@ -0,0 +1,10 @@
+import Page from "@pages/settings/security/impersonation";
+import { _generateMetadata } from "app/_utils";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("impersonation"),
+    (t) => t("impersonation_description")
+  );
+
+export default Page;
diff --git a/apps/web/app/future/settings/security/password/layout.tsx b/apps/web/app/future/settings/security/password/layout.tsx
new file mode 100644
index 0000000000..230bfea4d1
--- /dev/null
+++ b/apps/web/app/future/settings/security/password/layout.tsx
@@ -0,0 +1,5 @@
+import { WithLayout } from "app/layoutHOC";
+
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayoutAppDir";
+
+export default WithLayout({ getLayout });
diff --git a/apps/web/app/future/settings/security/password/page.tsx b/apps/web/app/future/settings/security/password/page.tsx
new file mode 100644
index 0000000000..acf5fe37b2
--- /dev/null
+++ b/apps/web/app/future/settings/security/password/page.tsx
@@ -0,0 +1,10 @@
+import Page from "@pages/settings/security/password";
+import { _generateMetadata } from "app/_utils";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("password"),
+    (t) => t("password_description")
+  );
+
+export default Page;
diff --git a/apps/web/app/future/settings/security/sso/layout.tsx b/apps/web/app/future/settings/security/sso/layout.tsx
new file mode 100644
index 0000000000..230bfea4d1
--- /dev/null
+++ b/apps/web/app/future/settings/security/sso/layout.tsx
@@ -0,0 +1,5 @@
+import { WithLayout } from "app/layoutHOC";
+
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayoutAppDir";
+
+export default WithLayout({ getLayout });
diff --git a/apps/web/app/future/settings/security/sso/page.tsx b/apps/web/app/future/settings/security/sso/page.tsx
new file mode 100644
index 0000000000..996ac7c913
--- /dev/null
+++ b/apps/web/app/future/settings/security/sso/page.tsx
@@ -0,0 +1,11 @@
+import { _generateMetadata } from "app/_utils";
+
+import Page from "@calcom/features/ee/sso/page/user-sso-view";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("sso_configuration"),
+    (t) => t("sso_configuration_description")
+  );
+
+export default Page;
diff --git a/apps/web/app/future/settings/security/two-factor-auth/layout.tsx b/apps/web/app/future/settings/security/two-factor-auth/layout.tsx
new file mode 100644
index 0000000000..230bfea4d1
--- /dev/null
+++ b/apps/web/app/future/settings/security/two-factor-auth/layout.tsx
@@ -0,0 +1,5 @@
+import { WithLayout } from "app/layoutHOC";
+
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayoutAppDir";
+
+export default WithLayout({ getLayout });
diff --git a/apps/web/app/future/settings/security/two-factor-auth/page.tsx b/apps/web/app/future/settings/security/two-factor-auth/page.tsx
new file mode 100644
index 0000000000..55e16afd17
--- /dev/null
+++ b/apps/web/app/future/settings/security/two-factor-auth/page.tsx
@@ -0,0 +1,10 @@
+import Page from "@pages/settings/security/two-factor-auth";
+import { _generateMetadata } from "app/_utils";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("two_factor_auth"),
+    (t) => t("add_an_extra_layer_of_security")
+  );
+
+export default Page;
diff --git a/apps/web/app/future/workflows/[workflow]/page.tsx b/apps/web/app/future/workflows/[workflow]/page.tsx
new file mode 100644
index 0000000000..f0c5c5eaa6
--- /dev/null
+++ b/apps/web/app/future/workflows/[workflow]/page.tsx
@@ -0,0 +1,43 @@
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+import { type GetServerSidePropsContext } from "next";
+import { headers, cookies } from "next/headers";
+import { notFound } from "next/navigation";
+import { z } from "zod";
+
+import LegacyPage from "@calcom/features/ee/workflows/pages/workflow";
+
+import { buildLegacyCtx } from "@lib/buildLegacyCtx";
+
+const querySchema = z.object({
+  workflow: z.string(),
+});
+
+export const generateMetadata = async ({ params }: { params: Record<string, string | string[]> }) => {
+  const { workflow } = await getProps(
+    buildLegacyCtx(headers(), cookies(), params) as unknown as GetServerSidePropsContext
+  );
+  return await _generateMetadata(
+    () => workflow ?? "Untitled",
+    () => ""
+  );
+};
+
+async function getProps(context: GetServerSidePropsContext) {
+  const safeParams = querySchema.safeParse(context.params);
+
+  console.log("Built workflow page:", safeParams);
+  if (!safeParams.success) {
+    return notFound();
+  }
+  return { workflow: safeParams.data.workflow };
+}
+
+export const generateStaticParams = () => [];
+
+// @ts-expect-error getData arg
+export default WithLayout({ getLayout: null, getData: getProps, Page: LegacyPage })<"P">;
+export const dynamic = "force-static";
+// generate segments on demand
+export const dynamicParams = true;
+export const revalidate = 10;
diff --git a/apps/web/app/future/workflows/page.tsx b/apps/web/app/future/workflows/page.tsx
new file mode 100644
index 0000000000..78ea4d910b
--- /dev/null
+++ b/apps/web/app/future/workflows/page.tsx
@@ -0,0 +1,13 @@
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+
+import { getLayout } from "@calcom/features/MainLayoutAppDir";
+import LegacyPage from "@calcom/features/ee/workflows/pages/index";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("workflows"),
+    (t) => t("workflows_to_automate_notifications")
+  );
+
+export default WithLayout({ getLayout, Page: LegacyPage })<"P">;
diff --git a/apps/web/app/layoutHOC.tsx b/apps/web/app/layoutHOC.tsx
index 5e41ed1184..29a2b56b7f 100644
--- a/apps/web/app/layoutHOC.tsx
+++ b/apps/web/app/layoutHOC.tsx
@@ -7,7 +7,7 @@ import PageWrapper from "@components/PageWrapperAppDir";
 
 type WithLayoutParams<T extends Record<string, any>> = {
   getLayout: ((page: React.ReactElement) => React.ReactNode) | null;
-  Page?: (props: T) => React.ReactElement;
+  Page?: (props: T) => React.ReactElement | null;
   getData?: (arg: ReturnType<typeof buildLegacyCtx>) => Promise<T>;
 };
 
diff --git a/apps/web/components/EnterprisePage.tsx b/apps/web/components/EnterprisePage.tsx
new file mode 100644
index 0000000000..87886245fe
--- /dev/null
+++ b/apps/web/components/EnterprisePage.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import { ShellMain } from "@calcom/features/shell/Shell";
+import { UpgradeTip } from "@calcom/features/tips";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Button, ButtonGroup } from "@calcom/ui";
+import { BarChart, CreditCard, Globe, Lock, Paintbrush, Users } from "@calcom/ui/components/icon";
+
+export default function EnterprisePage() {
+  const { t } = useLocale();
+
+  const features = [
+    {
+      icon: <Globe className="h-5 w-5 text-red-500" />,
+      title: t("branded_subdomain"),
+      description: t("branded_subdomain_description"),
+    },
+    {
+      icon: <BarChart className="h-5 w-5 text-blue-500" />,
+      title: t("org_insights"),
+      description: t("org_insights_description"),
+    },
+    {
+      icon: <Paintbrush className="h-5 w-5 text-pink-500" />,
+      title: t("extensive_whitelabeling"),
+      description: t("extensive_whitelabeling_description"),
+    },
+    {
+      icon: <Users className="h-5 w-5 text-orange-500" />,
+      title: t("unlimited_teams"),
+      description: t("unlimited_teams_description"),
+    },
+    {
+      icon: <CreditCard className="h-5 w-5 text-green-500" />,
+      title: t("unified_billing"),
+      description: t("unified_billing_description"),
+    },
+    {
+      icon: <Lock className="h-5 w-5 text-purple-500" />,
+      title: t("advanced_managed_events"),
+      description: t("advanced_managed_events_description"),
+    },
+  ];
+  return (
+    <div>
+      <ShellMain heading="Enterprise" subtitle={t("enterprise_description")}>
+        <UpgradeTip
+          plan="enterprise"
+          title={t("create_your_org")}
+          description={t("create_your_org_description")}
+          features={features}
+          background="/tips/enterprise"
+          buttons={
+            <div className="space-y-2 rtl:space-x-reverse sm:space-x-2">
+              <ButtonGroup>
+                <Button color="primary" href="https://i.cal.com/sales/enterprise?duration=25" target="_blank">
+                  {t("contact_sales")}
+                </Button>
+                <Button color="minimal" href="https://cal.com/enterprise" target="_blank">
+                  {t("learn_more")}
+                </Button>
+              </ButtonGroup>
+            </div>
+          }>
+          <>Create Org</>
+        </UpgradeTip>
+      </ShellMain>
+    </div>
+  );
+}
diff --git a/apps/web/components/eventtype/EventTypeSingleLayout.tsx b/apps/web/components/eventtype/EventTypeSingleLayout.tsx
index 4450e096d3..4b8671c472 100644
--- a/apps/web/components/eventtype/EventTypeSingleLayout.tsx
+++ b/apps/web/components/eventtype/EventTypeSingleLayout.tsx
@@ -115,7 +115,7 @@ function getNavigation(props: {
     {
       name: "workflows",
       href: `/event-types/${eventType.id}?tabName=workflows`,
-      icon: PhoneCall,
+      icon: Zap,
       info: `${enabledWorkflowsNumber} ${t("active")}`,
     },
   ];
@@ -218,7 +218,7 @@ function EventTypeSingleLayout({
         navigation.push({
           name: "instant_tab_title",
           href: `/event-types/${eventType.id}?tabName=instant`,
-          icon: Zap,
+          icon: PhoneCall,
           info: `instant_event_tab_description`,
         });
       }
diff --git a/apps/web/components/out-of-office/DateRangePicker/DateSelect.css b/apps/web/components/out-of-office/DateRangePicker/DateSelect.css
new file mode 100644
index 0000000000..6ea26081a2
--- /dev/null
+++ b/apps/web/components/out-of-office/DateRangePicker/DateSelect.css
@@ -0,0 +1,110 @@
+.custom-date > .tremor-DateRangePicker-root > .tremor-DateRangePicker-button {
+    box-shadow: none;
+    width: 100%;
+    background-color: transparent;
+  }
+  
+  /* Media query for screens larger than 768px */
+  @media (max-width: 639) {
+    .custom-date > .tremor-DateRangePicker-root > .tremor-DateRangePicker-button {
+      max-width: 400px;
+    }
+  }
+  
+  .recharts-cartesian-grid-horizontal line{
+    @apply stroke-emphasis
+  }
+  
+  .tremor-DateRangePicker-button button{
+    @apply !h-9 !max-h-9 border-default hover:border-emphasis
+  }
+  
+  .tremor-DateRangePicker-calendarButton,
+  .tremor-DateRangePicker-dropdownButton {
+    @apply border-subtle bg-default focus-within:ring-emphasis hover:border-subtle dark:focus-within:ring-emphasis hover:bg-subtle text-sm leading-4 placeholder:text-sm placeholder:font-normal focus-within:ring-0;
+  }
+  
+  .tremor-DateRangePicker-dropdownModal{
+    @apply divide-none
+  }
+  
+  .tremor-DropdownItem-root{
+    @apply !h-9 !max-h-9 bg-default hover:bg-subtle text-default hover:text-emphasis
+  }
+  
+  .tremor-DateRangePicker-calendarButtonText,
+  .tremor-DateRangePicker-dropdownButtonText {
+    @apply text-default;
+  }
+  
+  .tremor-DateRangePicker-calendarHeaderText{
+    @apply !text-default
+  }
+  
+  .tremor-DateRangePicker-calendarHeader svg{
+    @apply text-default
+  }
+  
+  .tremor-DateRangePicker-calendarHeader button{
+    @apply hover:bg-emphasis shadow-none focus:ring-0
+  }
+  
+  
+  .tremor-DateRangePicker-calendarHeader button:hover svg{
+    @apply text-emphasis
+  }
+  
+  .tremor-DateRangePicker-calendarButtonIcon{
+    @apply text-default
+  }
+  
+  .tremor-DateRangePicker-calendarModal,
+  .tremor-DateRangePicker-dropdownModal {
+    @apply bg-default border-subtle shadow-dropdown
+  }
+  
+  .tremor-DateRangePicker-calendarBodyDate button{
+    @apply text-default  hover:bg-emphasis
+  }
+  
+  .tremor-DateRangePicker-calendarBodyDate button:disabled,
+  .tremor-DateRangePicker-calendarBodyDate button[disabled]{
+    @apply opacity-25
+  }
+  
+  .tremor-DateRangePicker-calendarHeader button{
+    @apply border-default text-default
+  }
+  
+  .tremor-DateRangePicker-calendarBodyDate .bg-gray-100{
+    @apply bg-subtle
+  }
+  
+  .tremor-DateRangePicker-calendarBodyDate .bg-gray-500{
+    @apply !bg-brand-default text-inverted
+  }
+  
+  
+  .tremor-Card-root {
+    @apply p-5 bg-default;
+  }
+  
+  .tremor-TableCell-root {
+    @apply pl-0;
+  }
+  
+  .recharts-responsive-container {
+    @apply -mx-4;
+  }
+  .tremor-Card-root > p {
+    @apply mb-2 text-base font-semibold;
+  }
+  
+  .tremor-Legend-legendItem {
+    @apply ml-2;
+  }
+  
+  .tremor-TableBody-root {
+    @apply divide-subtle;
+  }
+  
\ No newline at end of file
diff --git a/apps/web/components/out-of-office/DateRangePicker/index.tsx b/apps/web/components/out-of-office/DateRangePicker/index.tsx
new file mode 100644
index 0000000000..5a20178822
--- /dev/null
+++ b/apps/web/components/out-of-office/DateRangePicker/index.tsx
@@ -0,0 +1,47 @@
+import type { BookingRedirectForm } from "@pages/settings/my-account/out-of-office";
+import { DateRangePicker } from "@tremor/react";
+import type { UseFormSetValue } from "react-hook-form";
+
+import dayjs from "@calcom/dayjs";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+
+import "./DateSelect.css";
+
+interface IOutOfOfficeDateRangeSelectProps {
+  dateRange: [Date | null, Date | null, null];
+  setDateRange: React.Dispatch<React.SetStateAction<[Date | null, Date | null, null]>>;
+  setValue: UseFormSetValue<BookingRedirectForm>;
+}
+
+const OutOfOfficeDateRangePicker = (props: IOutOfOfficeDateRangeSelectProps) => {
+  const { t } = useLocale();
+  const { dateRange, setDateRange, setValue } = props;
+  return (
+    <div className="custom-date">
+      <DateRangePicker
+        value={dateRange}
+        defaultValue={dateRange}
+        onValueChange={(datesArray) => {
+          const [start, end] = datesArray;
+
+          if (start) {
+            setDateRange([start, end as Date | null, null]);
+          }
+          if (start && end) {
+            setValue("startDate", start.toISOString());
+            setValue("endDate", end.toISOString());
+          }
+        }}
+        color="gray"
+        options={undefined}
+        enableDropdown={false}
+        placeholder={t("select_date_range")}
+        enableYearPagination={true}
+        minDate={dayjs().startOf("d").toDate()}
+        maxDate={dayjs().add(2, "y").endOf("d").toDate()}
+      />
+    </div>
+  );
+};
+
+export { OutOfOfficeDateRangePicker };
diff --git a/apps/web/lib/booking.ts b/apps/web/lib/booking.ts
new file mode 100644
index 0000000000..1bff1aa195
--- /dev/null
+++ b/apps/web/lib/booking.ts
@@ -0,0 +1,170 @@
+import { getBookingFieldsWithSystemFields } from "@calcom/features/bookings/lib/getBookingFields";
+import prisma from "@calcom/prisma";
+import type { Prisma } from "@calcom/prisma/client";
+import { BookingStatus } from "@calcom/prisma/enums";
+import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
+
+export const getEventTypesFromDB = async (id: number) => {
+  const userSelect = {
+    id: true,
+    name: true,
+    username: true,
+    hideBranding: true,
+    theme: true,
+    brandColor: true,
+    darkBrandColor: true,
+    email: true,
+    timeZone: true,
+  };
+  const eventType = await prisma.eventType.findUnique({
+    where: {
+      id,
+    },
+    select: {
+      id: true,
+      title: true,
+      description: true,
+      length: true,
+      eventName: true,
+      recurringEvent: true,
+      requiresConfirmation: true,
+      userId: true,
+      successRedirectUrl: true,
+      customInputs: true,
+      locations: true,
+      price: true,
+      currency: true,
+      bookingFields: true,
+      disableGuests: true,
+      timeZone: true,
+      owner: {
+        select: userSelect,
+      },
+      users: {
+        select: userSelect,
+      },
+      hosts: {
+        select: {
+          user: {
+            select: userSelect,
+          },
+        },
+      },
+      team: {
+        select: {
+          slug: true,
+          name: true,
+          hideBranding: true,
+        },
+      },
+      workflows: {
+        select: {
+          workflow: {
+            select: {
+              id: true,
+              steps: true,
+            },
+          },
+        },
+      },
+      metadata: true,
+      seatsPerTimeSlot: true,
+      seatsShowAttendees: true,
+      seatsShowAvailabilityCount: true,
+      periodStartDate: true,
+      periodEndDate: true,
+    },
+  });
+
+  if (!eventType) {
+    return eventType;
+  }
+
+  const metadata = EventTypeMetaDataSchema.parse(eventType.metadata);
+
+  return {
+    isDynamic: false,
+    ...eventType,
+    bookingFields: getBookingFieldsWithSystemFields(eventType),
+    metadata,
+  };
+};
+
+export const handleSeatsEventTypeOnBooking = async (
+  eventType: {
+    seatsPerTimeSlot?: number | null;
+    seatsShowAttendees: boolean | null;
+    seatsShowAvailabilityCount: boolean | null;
+    [x: string | number | symbol]: unknown;
+  },
+  bookingInfo: Partial<
+    Prisma.BookingGetPayload<{
+      include: {
+        attendees: { select: { name: true; email: true } };
+        seatsReferences: { select: { referenceUid: true } };
+        user: {
+          select: {
+            id: true;
+            name: true;
+            email: true;
+            username: true;
+            timeZone: true;
+          };
+        };
+      };
+    }>
+  >,
+  seatReferenceUid?: string,
+  userId?: number
+) => {
+  if (eventType?.seatsPerTimeSlot !== null) {
+    // @TODO: right now bookings with seats doesn't save every description that its entered by every user
+    delete bookingInfo.description;
+  } else {
+    return;
+  }
+  // @TODO: If handling teams, we need to do more check ups for this.
+  if (bookingInfo?.user?.id === userId) {
+    return;
+  }
+
+  if (!eventType.seatsShowAttendees) {
+    const seatAttendee = await prisma.bookingSeat.findFirst({
+      where: {
+        referenceUid: seatReferenceUid,
+      },
+      include: {
+        attendee: {
+          select: {
+            name: true,
+            email: true,
+          },
+        },
+      },
+    });
+
+    if (seatAttendee) {
+      const attendee = bookingInfo?.attendees?.find((a) => {
+        return a.email === seatAttendee.attendee?.email;
+      });
+      bookingInfo["attendees"] = attendee ? [attendee] : [];
+    } else {
+      bookingInfo["attendees"] = [];
+    }
+  }
+  return bookingInfo;
+};
+
+export async function getRecurringBookings(recurringEventId: string | null) {
+  if (!recurringEventId) return null;
+  const recurringBookings = await prisma.booking.findMany({
+    where: {
+      recurringEventId,
+      status: BookingStatus.ACCEPTED,
+    },
+    select: {
+      startTime: true,
+    },
+  });
+  return recurringBookings.map((obj) => obj.startTime.toString());
+}
diff --git a/apps/web/lib/booking/[uid]/getServerSideProps.tsx b/apps/web/lib/booking/[uid]/getServerSideProps.tsx
new file mode 100644
index 0000000000..e10af55fb1
--- /dev/null
+++ b/apps/web/lib/booking/[uid]/getServerSideProps.tsx
@@ -0,0 +1,199 @@
+import type { GetServerSidePropsContext } from "next";
+import { z } from "zod";
+
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import { getBookingWithResponses } from "@calcom/features/bookings/lib/get-booking";
+import { parseRecurringEvent } from "@calcom/lib";
+import { getDefaultEvent } from "@calcom/lib/defaultEvents";
+import { maybeGetBookingUidFromSeat } from "@calcom/lib/server/maybeGetBookingUidFromSeat";
+import prisma from "@calcom/prisma";
+import { customInputSchema, EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
+
+import { ssrInit } from "@server/lib/ssr";
+
+const stringToBoolean = z
+  .string()
+  .optional()
+  .transform((val) => val === "true");
+
+const querySchema = z.object({
+  uid: z.string(),
+  email: z.string().optional(),
+  eventTypeSlug: z.string().optional(),
+  cancel: stringToBoolean,
+  allRemainingBookings: stringToBoolean,
+  changes: stringToBoolean,
+  reschedule: stringToBoolean,
+  isSuccessBookingPage: stringToBoolean,
+  formerTime: z.string().optional(),
+  seatReferenceUid: z.string().optional(),
+});
+
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+  // this is needed to prevent bundling of lib/booking to the client bundle
+  // usually functions that are used in getServerSideProps are tree shaken from client bundle
+  // but not in case when they are exported. So we have to dynamically load them, or to copy paste them to the /future/page.
+
+  const { getRecurringBookings, handleSeatsEventTypeOnBooking, getEventTypesFromDB } = await import(
+    "@lib/booking"
+  );
+
+  const ssr = await ssrInit(context);
+  const session = await getServerSession(context);
+  let tz: string | null = null;
+  let userTimeFormat: number | null = null;
+  let requiresLoginToUpdate = false;
+  if (session) {
+    const user = await ssr.viewer.me.fetch();
+    tz = user.timeZone;
+    userTimeFormat = user.timeFormat;
+  }
+
+  const parsedQuery = querySchema.safeParse(context.query);
+
+  if (!parsedQuery.success) return { notFound: true } as const;
+  const { uid, eventTypeSlug, seatReferenceUid } = parsedQuery.data;
+
+  const { uid: maybeUid } = await maybeGetBookingUidFromSeat(prisma, uid);
+  const bookingInfoRaw = await prisma.booking.findFirst({
+    where: {
+      uid: maybeUid,
+    },
+    select: {
+      title: true,
+      id: true,
+      uid: true,
+      description: true,
+      customInputs: true,
+      smsReminderNumber: true,
+      recurringEventId: true,
+      startTime: true,
+      endTime: true,
+      location: true,
+      status: true,
+      metadata: true,
+      cancellationReason: true,
+      responses: true,
+      rejectionReason: true,
+      user: {
+        select: {
+          id: true,
+          name: true,
+          email: true,
+          username: true,
+          timeZone: true,
+        },
+      },
+      attendees: {
+        select: {
+          name: true,
+          email: true,
+          timeZone: true,
+        },
+      },
+      eventTypeId: true,
+      eventType: {
+        select: {
+          eventName: true,
+          slug: true,
+          timeZone: true,
+        },
+      },
+      seatsReferences: {
+        select: {
+          referenceUid: true,
+        },
+      },
+    },
+  });
+  if (!bookingInfoRaw) {
+    return {
+      notFound: true,
+    } as const;
+  }
+
+  const eventTypeRaw = !bookingInfoRaw.eventTypeId
+    ? getDefaultEvent(eventTypeSlug || "")
+    : await getEventTypesFromDB(bookingInfoRaw.eventTypeId);
+  if (!eventTypeRaw) {
+    return {
+      notFound: true,
+    } as const;
+  }
+
+  if (eventTypeRaw.seatsPerTimeSlot && !seatReferenceUid && !session) {
+    requiresLoginToUpdate = true;
+  }
+
+  const bookingInfo = getBookingWithResponses(bookingInfoRaw);
+  // @NOTE: had to do this because Server side cant return [Object objects]
+  // probably fixable with json.stringify -> json.parse
+  bookingInfo["startTime"] = (bookingInfo?.startTime as Date)?.toISOString() as unknown as Date;
+  bookingInfo["endTime"] = (bookingInfo?.endTime as Date)?.toISOString() as unknown as Date;
+
+  eventTypeRaw.users = !!eventTypeRaw.hosts?.length
+    ? eventTypeRaw.hosts.map((host) => host.user)
+    : eventTypeRaw.users;
+
+  if (!eventTypeRaw.users.length) {
+    if (!eventTypeRaw.owner)
+      return {
+        notFound: true,
+      } as const;
+    eventTypeRaw.users.push({
+      ...eventTypeRaw.owner,
+    });
+  }
+
+  const eventType = {
+    ...eventTypeRaw,
+    periodStartDate: eventTypeRaw.periodStartDate?.toString() ?? null,
+    periodEndDate: eventTypeRaw.periodEndDate?.toString() ?? null,
+    metadata: EventTypeMetaDataSchema.parse(eventTypeRaw.metadata),
+    recurringEvent: parseRecurringEvent(eventTypeRaw.recurringEvent),
+    customInputs: customInputSchema.array().parse(eventTypeRaw.customInputs),
+  };
+
+  const profile = {
+    name: eventType.team?.name || eventType.users[0]?.name || null,
+    email: eventType.team ? null : eventType.users[0].email || null,
+    theme: (!eventType.team?.name && eventType.users[0]?.theme) || null,
+    brandColor: eventType.team ? null : eventType.users[0].brandColor || null,
+    darkBrandColor: eventType.team ? null : eventType.users[0].darkBrandColor || null,
+    slug: eventType.team?.slug || eventType.users[0]?.username || null,
+  };
+
+  if (bookingInfo !== null && eventType.seatsPerTimeSlot) {
+    await handleSeatsEventTypeOnBooking(eventType, bookingInfo, seatReferenceUid, session?.user.id);
+  }
+
+  const payment = await prisma.payment.findFirst({
+    where: {
+      bookingId: bookingInfo.id,
+    },
+    select: {
+      success: true,
+      refunded: true,
+      currency: true,
+      amount: true,
+      paymentOption: true,
+    },
+  });
+
+  return {
+    props: {
+      themeBasis: eventType.team ? eventType.team.slug : eventType.users[0]?.username,
+      hideBranding: eventType.team ? eventType.team.hideBranding : eventType.users[0].hideBranding,
+      profile,
+      eventType,
+      recurringBookings: await getRecurringBookings(bookingInfo.recurringEventId),
+      trpcState: ssr.dehydrate(),
+      dynamicEventName: bookingInfo?.eventType?.eventName || "",
+      bookingInfo,
+      paymentStatus: payment,
+      ...(tz && { tz }),
+      userTimeFormat,
+      requiresLoginToUpdate,
+    },
+  };
+}
diff --git a/apps/web/package.json b/apps/web/package.json
index e4a982473a..e63635ef6f 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@calcom/web",
-  "version": "3.6.2",
+  "version": "3.6.4",
   "private": true,
   "scripts": {
     "analyze": "ANALYZE=true next build",
@@ -39,7 +39,7 @@
     "@calcom/tsconfig": "*",
     "@calcom/ui": "*",
     "@daily-co/daily-js": "^0.37.0",
-    "@formkit/auto-animate": "^0.8.1",
+    "@formkit/auto-animate": "1.0.0-beta.5",
     "@glidejs/glide": "^3.5.2",
     "@hookform/error-message": "^2.0.0",
     "@hookform/resolvers": "^2.9.7",
diff --git a/apps/web/pages/[user].tsx b/apps/web/pages/[user].tsx
index 349c8be4b6..5c8b506074 100644
--- a/apps/web/pages/[user].tsx
+++ b/apps/web/pages/[user].tsx
@@ -2,6 +2,8 @@ import type { DehydratedState } from "@tanstack/react-query";
 import classNames from "classnames";
 import type { GetServerSideProps, InferGetServerSidePropsType } from "next";
 import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+import { encode } from "querystring";
 import { Toaster } from "react-hot-toast";
 import type { z } from "zod";
 
@@ -11,10 +13,12 @@ import {
   useEmbedStyles,
   useIsEmbed,
 } from "@calcom/embed-core/embed-iframe";
+import { handleUserRedirection } from "@calcom/features/booking-redirect/handle-user";
 import { getSlugOrRequestedSlug } from "@calcom/features/ee/organizations/lib/orgDomains";
 import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
 import { EventTypeDescriptionLazy as EventTypeDescription } from "@calcom/features/eventtypes/components";
 import EmptyPage from "@calcom/features/eventtypes/components/EmptyPage";
+import { DEFAULT_DARK_BRAND_COLOR, DEFAULT_LIGHT_BRAND_COLOR } from "@calcom/lib/constants";
 import { getUsernameList } from "@calcom/lib/defaultEvents";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
@@ -40,6 +44,7 @@ import { getTemporaryOrgRedirect } from "../lib/getTemporaryOrgRedirect";
 
 export function UserPage(props: InferGetServerSidePropsType<typeof getServerSideProps>) {
   const { users, profile, eventTypes, markdownStrippedBio, entity } = props;
+  const searchParams = useSearchParams();
 
   const [user] = users; //To be used when we only have a single user, not dynamic group
   useTheme(profile.theme);
@@ -59,6 +64,8 @@ export function UserPage(props: InferGetServerSidePropsType<typeof getServerSide
     ...query
   } = useRouterQuery();
 
+  const isRedirect = searchParams?.get("redirected") === "true" || false;
+  const fromUserNameRedirected = searchParams?.get("username") || "";
   /*
    const telemetry = useTelemetry();
    useEffect(() => {
@@ -77,6 +84,7 @@ export function UserPage(props: InferGetServerSidePropsType<typeof getServerSide
   }
 
   const isEventListEmpty = eventTypes.length === 0;
+
   return (
     <>
       <HeadSeo
@@ -100,6 +108,25 @@ export function UserPage(props: InferGetServerSidePropsType<typeof getServerSide
             isEmbed ? "border-booker border-booker-width  bg-default rounded-md border" : "",
             "max-w-3xl px-4 py-24"
           )}>
+          {isRedirect && (
+            <div className="mb-8 rounded-md bg-blue-100 p-4 dark:border dark:bg-transparent dark:bg-transparent">
+              <h2 className="text-default mb-2 text-sm font-semibold dark:text-white">
+                {t("user_redirect_title", {
+                  username: fromUserNameRedirected,
+                })}{" "}
+                🏝️
+              </h2>
+              <p className="text-default text-sm">
+                {t("user_redirect_description", {
+                  profile: {
+                    username: user.username,
+                  },
+                  username: fromUserNameRedirected,
+                })}{" "}
+                😄
+              </p>
+            </div>
+          )}
           <div className="mb-8 text-center">
             <UserAvatar
               size="xl"
@@ -290,6 +317,18 @@ export const getServerSideProps: GetServerSideProps<UserPageProps> = async (cont
   const usernameList = getUsernameList(context.query.user as string);
   const isOrgContext = isValidOrgDomain && currentOrgDomain;
   const dataFetchStart = Date.now();
+  let outOfOffice = false;
+
+  if (usernameList.length === 1) {
+    const result = await handleUserRedirection({ username: usernameList[0] });
+    if (result && result.outOfOffice) {
+      outOfOffice = true;
+    }
+    if (result && result.redirect?.destination) {
+      return result;
+    }
+  }
+
   const usersWithoutAvatar = await prisma.user.findMany({
     where: {
       username: {
@@ -374,9 +413,9 @@ export const getServerSideProps: GetServerSideProps<UserPageProps> = async (cont
     name: user.name || user.username || "",
     image: user.avatar,
     theme: user.theme,
-    brandColor: user.brandColor,
+    brandColor: user.brandColor ?? DEFAULT_LIGHT_BRAND_COLOR,
     avatarUrl: user.avatarUrl,
-    darkBrandColor: user.darkBrandColor,
+    darkBrandColor: user.darkBrandColor ?? DEFAULT_DARK_BRAND_COLOR,
     allowSEOIndexing: user.allowSEOIndexing ?? true,
     username: user.username,
     organization: {
@@ -400,11 +439,16 @@ export const getServerSideProps: GetServerSideProps<UserPageProps> = async (cont
   }));
 
   // if profile only has one public event-type, redirect to it
-  if (eventTypes.length === 1 && context.query.redirect !== "false") {
+  if (eventTypes.length === 1 && context.query.redirect !== "false" && !outOfOffice) {
+    // Redirect but don't change the URL
+    const urlDestination = `/${user.username}/${eventTypes[0].slug}`;
+    const { query } = context;
+    const urlQuery = new URLSearchParams(encode(query));
+
     return {
       redirect: {
         permanent: false,
-        destination: `/${user.username}/${eventTypes[0].slug}`,
+        destination: `${urlDestination}?${urlQuery}`,
       },
     };
   }
@@ -421,7 +465,7 @@ export const getServerSideProps: GetServerSideProps<UserPageProps> = async (cont
         username: user.username,
         bio: user.bio,
         avatarUrl: user.avatarUrl,
-        away: user.away,
+        away: usernameList.length === 1 ? outOfOffice : user.away,
         verified: user.verified,
       })),
       entity: {
diff --git a/apps/web/pages/[user]/[type].tsx b/apps/web/pages/[user]/[type].tsx
index b328800c45..f36ecdc15b 100644
--- a/apps/web/pages/[user]/[type].tsx
+++ b/apps/web/pages/[user]/[type].tsx
@@ -4,6 +4,7 @@ import { z } from "zod";
 
 import { Booker } from "@calcom/atoms";
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import { handleTypeRedirection } from "@calcom/features/booking-redirect/handle-type";
 import { getBookerWrapperClasses } from "@calcom/features/bookings/Booker/utils/getBookerWrapperClasses";
 import { BookerSeo } from "@calcom/features/bookings/components/BookerSeo";
 import { getBookingForReschedule, getBookingForSeatedEvent } from "@calcom/features/bookings/lib/get-booking";
@@ -164,7 +165,7 @@ async function getUserPageProps(context: GetServerSidePropsContext) {
   const username = usernames[0];
   const { rescheduleUid, bookingUid } = context.query;
   const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(context.req, context.params?.orgSlug);
-
+  let outOfOffice = false;
   const isOrgContext = currentOrgDomain && isValidOrgDomain;
 
   if (!isOrgContext) {
@@ -188,7 +189,7 @@ async function getUserPageProps(context: GetServerSidePropsContext) {
       organization: userOrgQuery(context.req, context.params?.orgSlug),
     },
     select: {
-      away: true,
+      id: true,
       hideBranding: true,
       allowSEOIndexing: true,
     },
@@ -199,6 +200,18 @@ async function getUserPageProps(context: GetServerSidePropsContext) {
       notFound: true,
     } as const;
   }
+  // If user is found, quickly verify bookingRedirects
+  const result = await handleTypeRedirection({
+    userId: user.id,
+    username,
+    slug,
+  });
+  if (result && result.outOfOffice) {
+    outOfOffice = true;
+  }
+  if (result && result.redirect?.destination) {
+    return result;
+  }
 
   let booking: GetBookingType | null = null;
   if (rescheduleUid) {
@@ -230,7 +243,7 @@ async function getUserPageProps(context: GetServerSidePropsContext) {
         length: eventData.length,
         metadata: eventData.metadata,
       },
-      away: user?.away,
+      away: outOfOffice,
       user: username,
       slug,
       trpcState: ssr.dehydrate(),
diff --git a/apps/web/pages/api/auth/oauth/refreshToken.ts b/apps/web/pages/api/auth/oauth/refreshToken.ts
index a302cc8bf6..c0c3d63815 100644
--- a/apps/web/pages/api/auth/oauth/refreshToken.ts
+++ b/apps/web/pages/api/auth/oauth/refreshToken.ts
@@ -55,6 +55,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
   const payload: OAuthTokenPayload = {
     userId: decodedRefreshToken.userId,
+    teamId: decodedRefreshToken.teamId,
     scope: decodedRefreshToken.scope,
     token_type: "Access Token",
     clientId: client_id,
diff --git a/apps/web/pages/availability/index.tsx b/apps/web/pages/availability/index.tsx
index d368c2a233..97fcdb0fe2 100644
--- a/apps/web/pages/availability/index.tsx
+++ b/apps/web/pages/availability/index.tsx
@@ -1,4 +1,5 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
+import Link from "next/link";
 import { useRouter, usePathname } from "next/navigation";
 import { useCallback } from "react";
 
@@ -104,24 +105,32 @@ export function AvailabilityList({ schedules }: RouterOutputs["viewer"]["availab
           />
         </div>
       ) : (
-        <div className="border-subtle bg-default mb-16 overflow-hidden rounded-md border">
-          <ul className="divide-subtle divide-y" data-testid="schedules" ref={animationParentRef}>
-            {schedules.map((schedule) => (
-              <ScheduleListItem
-                displayOptions={{
-                  hour12: meQuery.data?.timeFormat ? meQuery.data.timeFormat === 12 : undefined,
-                  timeZone: meQuery.data?.timeZone,
-                }}
-                key={schedule.id}
-                schedule={schedule}
-                isDeletable={schedules.length !== 1}
-                updateDefault={updateMutation.mutate}
-                deleteFunction={deleteMutation.mutate}
-                duplicateFunction={duplicateMutation.mutate}
-              />
-            ))}
-          </ul>
-        </div>
+        <>
+          <div className="border-subtle bg-default overflow-hidden rounded-md border">
+            <ul className="divide-subtle divide-y" data-testid="schedules" ref={animationParentRef}>
+              {schedules.map((schedule) => (
+                <ScheduleListItem
+                  displayOptions={{
+                    hour12: meQuery.data?.timeFormat ? meQuery.data.timeFormat === 12 : undefined,
+                    timeZone: meQuery.data?.timeZone,
+                  }}
+                  key={schedule.id}
+                  schedule={schedule}
+                  isDeletable={schedules.length !== 1}
+                  updateDefault={updateMutation.mutate}
+                  deleteFunction={deleteMutation.mutate}
+                  duplicateFunction={duplicateMutation.mutate}
+                />
+              ))}
+            </ul>
+          </div>
+          <div className="text-default mb-16 mt-4 hidden text-center text-sm md:block">
+            {t("temporarily_out_of_office")}{" "}
+            <Link href="settings/my-account/out-of-office" className="underline">
+              {t("add_a_redirect")}
+            </Link>
+          </div>
+        </>
       )}
     </>
   );
diff --git a/apps/web/pages/booking/[uid].tsx b/apps/web/pages/booking/[uid].tsx
index afada8d7a1..cdb7f67978 100644
--- a/apps/web/pages/booking/[uid].tsx
+++ b/apps/web/pages/booking/[uid].tsx
@@ -1,7 +1,8 @@
+"use client";
+
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
 import classNames from "classnames";
 import { createEvent } from "ics";
-import type { GetServerSidePropsContext } from "next";
 import { useSession } from "next-auth/react";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
@@ -22,35 +23,28 @@ import {
   useIsBackgroundTransparent,
   useIsEmbed,
 } from "@calcom/embed-core/embed-iframe";
-import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { Price } from "@calcom/features/bookings/components/event-meta/Price";
 import { SMS_REMINDER_NUMBER_FIELD, SystemField } from "@calcom/features/bookings/lib/SystemField";
-import { getBookingWithResponses } from "@calcom/features/bookings/lib/get-booking";
-import { getBookingFieldsWithSystemFields } from "@calcom/features/bookings/lib/getBookingFields";
-import { parseRecurringEvent } from "@calcom/lib";
 import { APP_NAME } from "@calcom/lib/constants";
 import {
   formatToLocalizedDate,
   formatToLocalizedTime,
   formatToLocalizedTimezone,
 } from "@calcom/lib/date-fns";
-import { getDefaultEvent } from "@calcom/lib/defaultEvents";
 import useGetBrandingColours from "@calcom/lib/getBrandColours";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
-import { maybeGetBookingUidFromSeat } from "@calcom/lib/server/maybeGetBookingUidFromSeat";
 import { getIs24hClockFromLocalStorage, isBrowserLocale24h } from "@calcom/lib/timeFormat";
 import { localStorage } from "@calcom/lib/webstorage";
-import prisma from "@calcom/prisma";
-import type { Prisma } from "@calcom/prisma/client";
 import { BookingStatus } from "@calcom/prisma/enums";
-import { bookingMetadataSchema, customInputSchema, EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
+import { bookingMetadataSchema } from "@calcom/prisma/zod-utils";
 import { Alert, Badge, Button, EmailInput, HeadSeo, useCalcomTheme } from "@calcom/ui";
 import { AlertCircle, Calendar, Check, ChevronLeft, ExternalLink, X } from "@calcom/ui/components/icon";
 
+import { getServerSideProps } from "@lib/booking/[uid]/getServerSideProps";
 import { timeZone } from "@lib/clock";
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
 
@@ -58,23 +52,7 @@ import PageWrapper from "@components/PageWrapper";
 import CancelBooking from "@components/booking/CancelBooking";
 import EventReservationSchema from "@components/schemas/EventReservationSchema";
 
-import { ssrInit } from "@server/lib/ssr";
-
-const useBrandColors = ({
-  brandColor,
-  darkBrandColor,
-}: {
-  brandColor?: string | null;
-  darkBrandColor?: string | null;
-}) => {
-  const brandTheme = useGetBrandingColours({
-    lightVal: brandColor,
-    darkVal: darkBrandColor,
-  });
-  useCalcomTheme(brandTheme);
-};
-
-type SuccessProps = inferSSRProps<typeof getServerSideProps>;
+export { getServerSideProps };
 
 const stringToBoolean = z
   .string()
@@ -94,6 +72,22 @@ const querySchema = z.object({
   seatReferenceUid: z.string().optional(),
 });
 
+const useBrandColors = ({
+  brandColor,
+  darkBrandColor,
+}: {
+  brandColor?: string | null;
+  darkBrandColor?: string | null;
+}) => {
+  const brandTheme = useGetBrandingColours({
+    lightVal: brandColor,
+    darkVal: darkBrandColor,
+  });
+  useCalcomTheme(brandTheme);
+};
+
+type SuccessProps = inferSSRProps<typeof getServerSideProps>;
+
 export default function Success(props: SuccessProps) {
   const { t } = useLocale();
   const router = useRouter();
@@ -925,329 +919,3 @@ export function RecurringBookings({
     </div>
   );
 }
-
-const getEventTypesFromDB = async (id: number) => {
-  const userSelect = {
-    id: true,
-    name: true,
-    username: true,
-    hideBranding: true,
-    theme: true,
-    brandColor: true,
-    darkBrandColor: true,
-    email: true,
-    timeZone: true,
-  };
-  const eventType = await prisma.eventType.findUnique({
-    where: {
-      id,
-    },
-    select: {
-      id: true,
-      title: true,
-      description: true,
-      length: true,
-      eventName: true,
-      recurringEvent: true,
-      requiresConfirmation: true,
-      userId: true,
-      successRedirectUrl: true,
-      customInputs: true,
-      locations: true,
-      price: true,
-      currency: true,
-      bookingFields: true,
-      disableGuests: true,
-      timeZone: true,
-      owner: {
-        select: userSelect,
-      },
-      users: {
-        select: userSelect,
-      },
-      hosts: {
-        select: {
-          user: {
-            select: userSelect,
-          },
-        },
-      },
-      team: {
-        select: {
-          slug: true,
-          name: true,
-          hideBranding: true,
-        },
-      },
-      workflows: {
-        select: {
-          workflow: {
-            select: {
-              id: true,
-              steps: true,
-            },
-          },
-        },
-      },
-      metadata: true,
-      seatsPerTimeSlot: true,
-      seatsShowAttendees: true,
-      seatsShowAvailabilityCount: true,
-      periodStartDate: true,
-      periodEndDate: true,
-    },
-  });
-
-  if (!eventType) {
-    return eventType;
-  }
-
-  const metadata = EventTypeMetaDataSchema.parse(eventType.metadata);
-
-  return {
-    isDynamic: false,
-    ...eventType,
-    bookingFields: getBookingFieldsWithSystemFields(eventType),
-    metadata,
-  };
-};
-
-const handleSeatsEventTypeOnBooking = async (
-  eventType: {
-    seatsPerTimeSlot?: number | null;
-    seatsShowAttendees: boolean | null;
-    seatsShowAvailabilityCount: boolean | null;
-    [x: string | number | symbol]: unknown;
-  },
-  bookingInfo: Partial<
-    Prisma.BookingGetPayload<{
-      include: {
-        attendees: { select: { name: true; email: true } };
-        seatsReferences: { select: { referenceUid: true } };
-        user: {
-          select: {
-            id: true;
-            name: true;
-            email: true;
-            username: true;
-            timeZone: true;
-          };
-        };
-      };
-    }>
-  >,
-  seatReferenceUid?: string,
-  userId?: number
-) => {
-  if (eventType?.seatsPerTimeSlot !== null) {
-    // @TODO: right now bookings with seats doesn't save every description that its entered by every user
-    delete bookingInfo.description;
-  } else {
-    return;
-  }
-  // @TODO: If handling teams, we need to do more check ups for this.
-  if (bookingInfo?.user?.id === userId) {
-    return;
-  }
-
-  if (!eventType.seatsShowAttendees) {
-    const seatAttendee = await prisma.bookingSeat.findFirst({
-      where: {
-        referenceUid: seatReferenceUid,
-      },
-      include: {
-        attendee: {
-          select: {
-            name: true,
-            email: true,
-          },
-        },
-      },
-    });
-
-    if (seatAttendee) {
-      const attendee = bookingInfo?.attendees?.find((a) => {
-        return a.email === seatAttendee.attendee?.email;
-      });
-      bookingInfo["attendees"] = attendee ? [attendee] : [];
-    } else {
-      bookingInfo["attendees"] = [];
-    }
-  }
-  return bookingInfo;
-};
-
-export async function getServerSideProps(context: GetServerSidePropsContext) {
-  const ssr = await ssrInit(context);
-  const session = await getServerSession(context);
-  let tz: string | null = null;
-  let userTimeFormat: number | null = null;
-  let requiresLoginToUpdate = false;
-  if (session) {
-    const user = await ssr.viewer.me.fetch();
-    tz = user.timeZone;
-    userTimeFormat = user.timeFormat;
-  }
-
-  const parsedQuery = querySchema.safeParse(context.query);
-
-  if (!parsedQuery.success) return { notFound: true } as const;
-  const { uid, eventTypeSlug, seatReferenceUid } = parsedQuery.data;
-
-  const { uid: maybeUid } = await maybeGetBookingUidFromSeat(prisma, uid);
-  const bookingInfoRaw = await prisma.booking.findFirst({
-    where: {
-      uid: maybeUid,
-    },
-    select: {
-      title: true,
-      id: true,
-      uid: true,
-      description: true,
-      customInputs: true,
-      smsReminderNumber: true,
-      recurringEventId: true,
-      startTime: true,
-      endTime: true,
-      location: true,
-      status: true,
-      metadata: true,
-      cancellationReason: true,
-      responses: true,
-      rejectionReason: true,
-      user: {
-        select: {
-          id: true,
-          name: true,
-          email: true,
-          username: true,
-          timeZone: true,
-        },
-      },
-      attendees: {
-        select: {
-          name: true,
-          email: true,
-          timeZone: true,
-        },
-      },
-      eventTypeId: true,
-      eventType: {
-        select: {
-          eventName: true,
-          slug: true,
-          timeZone: true,
-        },
-      },
-      seatsReferences: {
-        select: {
-          referenceUid: true,
-        },
-      },
-    },
-  });
-  if (!bookingInfoRaw) {
-    return {
-      notFound: true,
-    } as const;
-  }
-
-  const eventTypeRaw = !bookingInfoRaw.eventTypeId
-    ? getDefaultEvent(eventTypeSlug || "")
-    : await getEventTypesFromDB(bookingInfoRaw.eventTypeId);
-  if (!eventTypeRaw) {
-    return {
-      notFound: true,
-    } as const;
-  }
-
-  if (eventTypeRaw.seatsPerTimeSlot && !seatReferenceUid && !session) {
-    requiresLoginToUpdate = true;
-  }
-
-  const bookingInfo = getBookingWithResponses(bookingInfoRaw);
-  // @NOTE: had to do this because Server side cant return [Object objects]
-  // probably fixable with json.stringify -> json.parse
-  bookingInfo["startTime"] = (bookingInfo?.startTime as Date)?.toISOString() as unknown as Date;
-  bookingInfo["endTime"] = (bookingInfo?.endTime as Date)?.toISOString() as unknown as Date;
-
-  eventTypeRaw.users = !!eventTypeRaw.hosts?.length
-    ? eventTypeRaw.hosts.map((host) => host.user)
-    : eventTypeRaw.users;
-
-  if (!eventTypeRaw.users.length) {
-    if (!eventTypeRaw.owner)
-      return {
-        notFound: true,
-      } as const;
-    eventTypeRaw.users.push({
-      ...eventTypeRaw.owner,
-    });
-  }
-
-  const eventType = {
-    ...eventTypeRaw,
-    periodStartDate: eventTypeRaw.periodStartDate?.toString() ?? null,
-    periodEndDate: eventTypeRaw.periodEndDate?.toString() ?? null,
-    metadata: EventTypeMetaDataSchema.parse(eventTypeRaw.metadata),
-    recurringEvent: parseRecurringEvent(eventTypeRaw.recurringEvent),
-    customInputs: customInputSchema.array().parse(eventTypeRaw.customInputs),
-  };
-
-  const profile = {
-    name: eventType.team?.name || eventType.users[0]?.name || null,
-    email: eventType.team ? null : eventType.users[0].email || null,
-    theme: (!eventType.team?.name && eventType.users[0]?.theme) || null,
-    brandColor: eventType.team ? null : eventType.users[0].brandColor || null,
-    darkBrandColor: eventType.team ? null : eventType.users[0].darkBrandColor || null,
-    slug: eventType.team?.slug || eventType.users[0]?.username || null,
-  };
-
-  if (bookingInfo !== null && eventType.seatsPerTimeSlot) {
-    await handleSeatsEventTypeOnBooking(eventType, bookingInfo, seatReferenceUid, session?.user.id);
-  }
-
-  const payment = await prisma.payment.findFirst({
-    where: {
-      bookingId: bookingInfo.id,
-    },
-    select: {
-      success: true,
-      refunded: true,
-      currency: true,
-      amount: true,
-      paymentOption: true,
-    },
-  });
-
-  return {
-    props: {
-      themeBasis: eventType.team ? eventType.team.slug : eventType.users[0]?.username,
-      hideBranding: eventType.team ? eventType.team.hideBranding : eventType.users[0].hideBranding,
-      profile,
-      eventType,
-      recurringBookings: await getRecurringBookings(bookingInfo.recurringEventId),
-      trpcState: ssr.dehydrate(),
-      dynamicEventName: bookingInfo?.eventType?.eventName || "",
-      bookingInfo,
-      paymentStatus: payment,
-      ...(tz && { tz }),
-      userTimeFormat,
-      requiresLoginToUpdate,
-    },
-  };
-}
-
-async function getRecurringBookings(recurringEventId: string | null) {
-  if (!recurringEventId) return null;
-  const recurringBookings = await prisma.booking.findMany({
-    where: {
-      recurringEventId,
-      status: BookingStatus.ACCEPTED,
-    },
-    select: {
-      startTime: true,
-    },
-  });
-  return recurringBookings.map((obj) => obj.startTime.toString());
-}
diff --git a/apps/web/pages/booking/[uid]/embed.tsx b/apps/web/pages/booking/[uid]/embed.tsx
index 5d6b405e57..3e004ab3e6 100644
--- a/apps/web/pages/booking/[uid]/embed.tsx
+++ b/apps/web/pages/booking/[uid]/embed.tsx
@@ -1,6 +1,7 @@
-import withEmbedSsr from "@lib/withEmbedSsr";
+"use client";
 
-import { getServerSideProps as _getServerSideProps } from "../[uid]";
+import { getServerSideProps as _getServerSideProps } from "@lib/booking/[uid]/getServerSideProps";
+import withEmbedSsr from "@lib/withEmbedSsr";
 
 export { default } from "../[uid]";
 
diff --git a/apps/web/pages/enterprise/index.tsx b/apps/web/pages/enterprise/index.tsx
index 9854d5c6bc..4bddaef51d 100644
--- a/apps/web/pages/enterprise/index.tsx
+++ b/apps/web/pages/enterprise/index.tsx
@@ -1,74 +1,17 @@
-import { getLayout } from "@calcom/features/MainLayout";
-import { ShellMain } from "@calcom/features/shell/Shell";
-import { UpgradeTip } from "@calcom/features/tips";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, ButtonGroup } from "@calcom/ui";
-import { BarChart, CreditCard, Globe, Lock, Paintbrush, Users } from "@calcom/ui/components/icon";
+"use client";
 
+import { getLayout } from "@calcom/features/MainLayout";
+
+import EnterprisePage from "@components/EnterprisePage";
 import PageWrapper from "@components/PageWrapper";
 
-export default function EnterprisePage() {
-  const { t } = useLocale();
+const ProxifiedEnterprisePage = new Proxy<{
+  (): JSX.Element;
+  PageWrapper?: typeof PageWrapper;
+  getLayout?: typeof getLayout;
+}>(EnterprisePage, {});
 
-  const features = [
-    {
-      icon: <Globe className="h-5 w-5 text-red-500" />,
-      title: t("branded_subdomain"),
-      description: t("branded_subdomain_description"),
-    },
-    {
-      icon: <BarChart className="h-5 w-5 text-blue-500" />,
-      title: t("org_insights"),
-      description: t("org_insights_description"),
-    },
-    {
-      icon: <Paintbrush className="h-5 w-5 text-pink-500" />,
-      title: t("extensive_whitelabeling"),
-      description: t("extensive_whitelabeling_description"),
-    },
-    {
-      icon: <Users className="h-5 w-5 text-orange-500" />,
-      title: t("unlimited_teams"),
-      description: t("unlimited_teams_description"),
-    },
-    {
-      icon: <CreditCard className="h-5 w-5 text-green-500" />,
-      title: t("unified_billing"),
-      description: t("unified_billing_description"),
-    },
-    {
-      icon: <Lock className="h-5 w-5 text-purple-500" />,
-      title: t("advanced_managed_events"),
-      description: t("advanced_managed_events_description"),
-    },
-  ];
-  return (
-    <div>
-      <ShellMain heading="Enterprise" subtitle={t("enterprise_description")}>
-        <UpgradeTip
-          plan="enterprise"
-          title={t("create_your_org")}
-          description={t("create_your_org_description")}
-          features={features}
-          background="/tips/enterprise"
-          buttons={
-            <div className="space-y-2 rtl:space-x-reverse sm:space-x-2">
-              <ButtonGroup>
-                <Button color="primary" href="https://i.cal.com/sales/enterprise?duration=25" target="_blank">
-                  {t("contact_sales")}
-                </Button>
-                <Button color="minimal" href="https://cal.com/enterprise" target="_blank">
-                  {t("learn_more")}
-                </Button>
-              </ButtonGroup>
-            </div>
-          }>
-          <>Create Org</>
-        </UpgradeTip>
-      </ShellMain>
-    </div>
-  );
-}
+ProxifiedEnterprisePage.PageWrapper = PageWrapper;
+ProxifiedEnterprisePage.getLayout = getLayout;
 
-EnterprisePage.PageWrapper = PageWrapper;
-EnterprisePage.getLayout = getLayout;
+export default ProxifiedEnterprisePage;
diff --git a/apps/web/pages/insights/index.tsx b/apps/web/pages/insights/index.tsx
index 0c0dd0b60b..35a6fa2cca 100644
--- a/apps/web/pages/insights/index.tsx
+++ b/apps/web/pages/insights/index.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { getLayout } from "@calcom/features/MainLayout";
 import { getFeatureFlagMap } from "@calcom/features/flags/server/utils";
 import {
diff --git a/apps/web/pages/maintenance.tsx b/apps/web/pages/maintenance.tsx
index 9d787ab453..38aa6f4e41 100644
--- a/apps/web/pages/maintenance.tsx
+++ b/apps/web/pages/maintenance.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import Head from "next/head";
 
 import { APP_NAME, WEBSITE_URL } from "@calcom/lib/constants";
diff --git a/apps/web/pages/more.tsx b/apps/web/pages/more.tsx
index 17ed23ccb4..d746d327ac 100644
--- a/apps/web/pages/more.tsx
+++ b/apps/web/pages/more.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import Shell, { MobileNavigationMoreItems } from "@calcom/features/shell/Shell";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
diff --git a/apps/web/pages/reschedule/[uid].tsx b/apps/web/pages/reschedule/[uid].tsx
index efea8ceb06..8e3c8ed2c4 100644
--- a/apps/web/pages/reschedule/[uid].tsx
+++ b/apps/web/pages/reschedule/[uid].tsx
@@ -1,3 +1,4 @@
+// page can be a server component
 import type { GetServerSidePropsContext } from "next";
 import { URLSearchParams } from "url";
 import { z } from "zod";
diff --git a/apps/web/pages/reschedule/[uid]/embed.tsx b/apps/web/pages/reschedule/[uid]/embed.tsx
index 5d6b405e57..034b8ee719 100644
--- a/apps/web/pages/reschedule/[uid]/embed.tsx
+++ b/apps/web/pages/reschedule/[uid]/embed.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import withEmbedSsr from "@lib/withEmbedSsr";
 
 import { getServerSideProps as _getServerSideProps } from "../[uid]";
diff --git a/apps/web/pages/settings/my-account/appearance.tsx b/apps/web/pages/settings/my-account/appearance.tsx
index a8b479974a..e4173758ec 100644
--- a/apps/web/pages/settings/my-account/appearance.tsx
+++ b/apps/web/pages/settings/my-account/appearance.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import type { z } from "zod";
@@ -98,10 +100,15 @@ const AppearanceView = ({
     reset: resetBookerLayoutThemeReset,
   } = bookerLayoutFormMethods;
 
+  const DEFAULT_BRAND_COLOURS = {
+    light: user.brandColor ?? DEFAULT_LIGHT_BRAND_COLOR,
+    dark: user.darkBrandColor ?? DEFAULT_DARK_BRAND_COLOR,
+  };
+
   const brandColorsFormMethods = useForm({
     defaultValues: {
-      brandColor: user.brandColor || DEFAULT_LIGHT_BRAND_COLOR,
-      darkBrandColor: user.darkBrandColor || DEFAULT_DARK_BRAND_COLOR,
+      brandColor: DEFAULT_BRAND_COLOURS.light,
+      darkBrandColor: DEFAULT_BRAND_COLOURS.dark,
     },
   });
 
@@ -231,12 +238,12 @@ const AppearanceView = ({
               <Controller
                 name="brandColor"
                 control={brandColorsFormMethods.control}
-                defaultValue={user.brandColor}
+                defaultValue={DEFAULT_BRAND_COLOURS.light}
                 render={() => (
                   <div>
                     <p className="text-default mb-2 block text-sm font-medium">{t("light_brand_color")}</p>
                     <ColorPicker
-                      defaultValue={user.brandColor}
+                      defaultValue={DEFAULT_BRAND_COLOURS.light}
                       resetDefaultValue={DEFAULT_LIGHT_BRAND_COLOR}
                       onChange={(value) => {
                         try {
@@ -260,12 +267,12 @@ const AppearanceView = ({
               <Controller
                 name="darkBrandColor"
                 control={brandColorsFormMethods.control}
-                defaultValue={user.darkBrandColor}
+                defaultValue={DEFAULT_BRAND_COLOURS.dark}
                 render={() => (
                   <div className="mt-6 sm:mt-0">
                     <p className="text-default mb-2 block text-sm font-medium">{t("dark_brand_color")}</p>
                     <ColorPicker
-                      defaultValue={user.darkBrandColor}
+                      defaultValue={DEFAULT_BRAND_COLOURS.dark}
                       resetDefaultValue={DEFAULT_DARK_BRAND_COLOR}
                       onChange={(value) => {
                         try {
diff --git a/apps/web/pages/settings/my-account/calendars.tsx b/apps/web/pages/settings/my-account/calendars.tsx
index 522d7fc4ec..4d38f4dca1 100644
--- a/apps/web/pages/settings/my-account/calendars.tsx
+++ b/apps/web/pages/settings/my-account/calendars.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { Fragment } from "react";
 
 import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
diff --git a/apps/web/pages/settings/my-account/conferencing.tsx b/apps/web/pages/settings/my-account/conferencing.tsx
index 58691f1643..2f1b273d02 100644
--- a/apps/web/pages/settings/my-account/conferencing.tsx
+++ b/apps/web/pages/settings/my-account/conferencing.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useReducer } from "react";
 
 import DisconnectIntegrationModal from "@calcom/features/apps/components/DisconnectIntegrationModal";
diff --git a/apps/web/pages/settings/my-account/general.tsx b/apps/web/pages/settings/my-account/general.tsx
index 330e155c7f..b1e5bca542 100644
--- a/apps/web/pages/settings/my-account/general.tsx
+++ b/apps/web/pages/settings/my-account/general.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useSession } from "next-auth/react";
 import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
diff --git a/apps/web/pages/settings/my-account/out-of-office/index.tsx b/apps/web/pages/settings/my-account/out-of-office/index.tsx
new file mode 100644
index 0000000000..1524422af4
--- /dev/null
+++ b/apps/web/pages/settings/my-account/out-of-office/index.tsx
@@ -0,0 +1,241 @@
+import { Trash2 } from "lucide-react";
+import React, { useState } from "react";
+import { useForm, useFormState } from "react-hook-form";
+
+import dayjs from "@calcom/dayjs";
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
+import { ShellMain } from "@calcom/features/shell/Shell";
+import { useHasTeamPlan } from "@calcom/lib/hooks/useHasPaidPlan";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
+import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
+import { Button, Meta, showToast, Select, SkeletonText, UpgradeTeamsBadge, Switch } from "@calcom/ui";
+import { TableNew, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@calcom/ui";
+
+import PageWrapper from "@components/PageWrapper";
+import { OutOfOfficeDateRangePicker } from "@components/out-of-office/DateRangePicker";
+
+export type BookingRedirectForm = {
+  startDate: string;
+  endDate: string;
+  toTeamUserId: number | null;
+};
+
+const OutOfOfficeSection = () => {
+  const { t } = useLocale();
+  const utils = trpc.useContext();
+
+  const [dateRange, setDateRange] = useState<[Date | null, Date | null, null | null]>([
+    dayjs().startOf("d").toDate(),
+    dayjs().add(1, "d").endOf("d").toDate(),
+    null,
+  ]);
+  const [profileRedirect, setProfileRedirect] = useState(false);
+  const [selectedMember, setSelectedMember] = useState<{ label: string; value: number | null } | null>(null);
+
+  const { handleSubmit, setValue } = useForm<BookingRedirectForm>({
+    defaultValues: {
+      startDate: dateRange[0]?.toISOString(),
+      endDate: dateRange[1]?.toISOString(),
+      toTeamUserId: null,
+    },
+  });
+
+  const createOutOfOfficeEntry = trpc.viewer.outOfOfficeCreate.useMutation({
+    onSuccess: () => {
+      showToast(t("success_entry_created"), "success");
+      utils.viewer.outOfOfficeEntriesList.invalidate();
+      setProfileRedirect(false);
+    },
+    onError: (error) => {
+      showToast(t(error.message), "error");
+    },
+  });
+
+  const { hasTeamPlan } = useHasTeamPlan();
+  const { data: listMembers } = trpc.viewer.teams.listMembers.useQuery({});
+  const me = useMeQuery();
+  const memberListOptions: {
+    value: number | null;
+    label: string;
+  }[] =
+    listMembers
+      ?.filter((member) => me?.data?.id !== member.id)
+      .map((member) => ({
+        value: member.id || null,
+        label: member.name || "",
+      })) || [];
+
+  return (
+    <>
+      <form
+        onSubmit={handleSubmit((data) => {
+          createOutOfOfficeEntry.mutate(data);
+          setValue("toTeamUserId", null);
+          setSelectedMember(null);
+        })}>
+        <div className="border-subtle flex flex-col rounded-b-lg border border-t-0 p-6 px-6 py-8 text-sm">
+          {/* Add startDate and end date inputs */}
+          <div className="border-subtle mt-2 rounded-lg border bg-gray-50 p-6 dark:bg-transparent">
+            {/* Add toggle to enable/disable redirect */}
+            <div className="flex flex-row">
+              <Switch
+                disabled={!hasTeamPlan}
+                data-testid="profile-redirect-switch"
+                checked={profileRedirect}
+                id="profile-redirect-switch"
+                onCheckedChange={(state) => {
+                  setProfileRedirect(state);
+                }}
+                label={hasTeamPlan ? t("redirect_team_enabled") : t("redirect_team_disabled")}
+              />
+              {!hasTeamPlan && (
+                <div className="mx-2" data-testid="upgrade-team-badge">
+                  <UpgradeTeamsBadge />
+                </div>
+              )}
+            </div>
+            <div className="mt-4 flex flex-row">
+              {profileRedirect && (
+                <div className="mr-2 w-1/2 lg:w-1/3">
+                  <p className="text-emphasis block text-sm font-medium">{t("team_member")}</p>
+                  <Select
+                    className="mt-1 h-4 max-w-[350px] text-white"
+                    name="toTeamUsername"
+                    data-testid="team_username_select"
+                    value={selectedMember}
+                    placeholder={t("select_team_member")}
+                    isSearchable
+                    innerClassNames={{
+                      control: "h-[38px]",
+                    }}
+                    options={memberListOptions}
+                    onChange={(selectedOption) => {
+                      if (selectedOption?.value) {
+                        setSelectedMember(selectedOption);
+                        setValue("toTeamUserId", selectedOption?.value);
+                      }
+                    }}
+                  />
+                </div>
+              )}
+              <div className="w-1/2 lg:w-1/3">
+                <p className="text-emphasis mb-1 block text-sm font-medium">{t("time_range")}</p>
+
+                <OutOfOfficeDateRangePicker
+                  dateRange={dateRange}
+                  setValue={setValue}
+                  setDateRange={setDateRange}
+                />
+              </div>
+            </div>
+
+            <div className="mt-7">
+              <Button
+                color="primary"
+                type="submit"
+                disabled={createOutOfOfficeEntry.isLoading}
+                data-testid="create-entry-ooo-redirect">
+                {t("create_entry")}
+              </Button>
+            </div>
+          </div>
+
+          <OutOfOfficeEntriesList />
+        </div>
+      </form>
+    </>
+  );
+};
+
+const OutOfOfficeEntriesList = () => {
+  const { t } = useLocale();
+  const utils = trpc.useContext();
+  const { data, isLoading } = trpc.viewer.outOfOfficeEntriesList.useQuery();
+  const deleteOutOfOfficeEntryMutation = trpc.viewer.outOfOfficeEntryDelete.useMutation({
+    onSuccess: () => {
+      showToast(t("success_deleted_entry_out_of_office"), "success");
+      utils.viewer.outOfOfficeEntriesList.invalidate();
+      useFormState;
+    },
+    onError: () => {
+      showToast(`An error ocurred`, "error");
+    },
+  });
+  if (data === null || data?.length === 0 || data === undefined) return null;
+  return (
+    <div className="border-subtle mt-6 rounded-lg border">
+      <TableNew className="border-0">
+        <TableHeader>
+          <TableRow>
+            <TableHead className="rounded-tl-lg font-normal capitalize">{t("time_range")}</TableHead>
+            <TableHead className="font-normal">{t("username")}</TableHead>
+
+            <TableHead className="rounded-tr-lg font-normal">{t("action")}</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {data?.map((item) => (
+            <TableRow key={item.id} data-testid={`table-redirect-${item.toUser?.username || "n-a"}`}>
+              <TableCell>
+                <p className="px-2">
+                  {dayjs(item.start).format("ll")} - {dayjs(item.end).format("ll")}
+                </p>
+              </TableCell>
+              <TableCell>
+                <p className="px-2">{item.toUser?.username || "N/A"}</p>
+              </TableCell>
+              <TableCell className="px-4">
+                <Button
+                  type="button"
+                  color="minimal"
+                  variant="icon"
+                  disabled={deleteOutOfOfficeEntryMutation.isLoading}
+                  StartIcon={Trash2}
+                  onClick={() => {
+                    deleteOutOfOfficeEntryMutation.mutate({ outOfOfficeUid: item.uuid });
+                  }}
+                />
+              </TableCell>
+            </TableRow>
+          ))}
+          {isLoading && (
+            <TableRow>
+              {new Array(6).fill(0).map((_, index) => (
+                <TableCell key={index}>
+                  <SkeletonText className="h-8 w-full" />
+                </TableCell>
+              ))}
+            </TableRow>
+          )}
+
+          {!isLoading && (data === undefined || data.length === 0) && (
+            <TableRow>
+              <TableCell colSpan={6} className="text-center">
+                <p className="text-subtle text-sm">{t("no_redirects_found")}</p>
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </TableNew>
+    </div>
+  );
+};
+
+const OutOfOfficePage = () => {
+  const { t } = useLocale();
+
+  return (
+    <>
+      <Meta title={t("out_of_office")} description={t("out_of_office_description")} borderInShellHeader />
+      <ShellMain>
+        <OutOfOfficeSection />
+      </ShellMain>
+    </>
+  );
+};
+
+OutOfOfficePage.getLayout = getLayout;
+OutOfOfficePage.PageWrapper = PageWrapper;
+
+export default OutOfOfficePage;
diff --git a/apps/web/pages/settings/my-account/profile.tsx b/apps/web/pages/settings/my-account/profile.tsx
index f224d3adf6..8a67dad45e 100644
--- a/apps/web/pages/settings/my-account/profile.tsx
+++ b/apps/web/pages/settings/my-account/profile.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { zodResolver } from "@hookform/resolvers/zod";
 import { signOut, useSession } from "next-auth/react";
 import type { BaseSyntheticEvent } from "react";
diff --git a/apps/web/pages/settings/security/impersonation.tsx b/apps/web/pages/settings/security/impersonation.tsx
index f23b358f72..7950f64129 100644
--- a/apps/web/pages/settings/security/impersonation.tsx
+++ b/apps/web/pages/settings/security/impersonation.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 
 import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
diff --git a/apps/web/pages/settings/security/password.tsx b/apps/web/pages/settings/security/password.tsx
index e008234279..7460ffa455 100644
--- a/apps/web/pages/settings/security/password.tsx
+++ b/apps/web/pages/settings/security/password.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { signOut, useSession } from "next-auth/react";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
diff --git a/apps/web/pages/settings/security/two-factor-auth.tsx b/apps/web/pages/settings/security/two-factor-auth.tsx
index 1feca6152a..e5c7f13d9a 100644
--- a/apps/web/pages/settings/security/two-factor-auth.tsx
+++ b/apps/web/pages/settings/security/two-factor-auth.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 
 import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
diff --git a/apps/web/playwright/out-of-office.e2e.ts b/apps/web/playwright/out-of-office.e2e.ts
new file mode 100644
index 0000000000..65264ea4c6
--- /dev/null
+++ b/apps/web/playwright/out-of-office.e2e.ts
@@ -0,0 +1,101 @@
+import { expect } from "@playwright/test";
+import { v4 as uuidv4 } from "uuid";
+
+import dayjs from "@calcom/dayjs";
+import { randomString } from "@calcom/lib/random";
+import prisma from "@calcom/prisma";
+
+import { test } from "./lib/fixtures";
+
+test.describe.configure({ mode: "parallel" });
+test.afterEach(({ users }) => users.deleteAll());
+
+test.describe("Out of office", () => {
+  test("User can create out of office entry", async ({ page, users }) => {
+    const user = await users.create({ name: "userOne" });
+
+    await user.apiLogin();
+
+    await page.goto("/settings/my-account/out-of-office");
+
+    await page.locator("data-testid=create-entry-ooo-redirect").click();
+
+    await expect(page.locator(`data-testid=table-redirect-n-a`)).toBeVisible();
+  });
+
+  test("User can configure booking redirect", async ({ page, users }) => {
+    const user = await users.create({ name: "userOne" });
+    const userTo = await users.create({ name: "userTwo" });
+
+    const team = await prisma.team.create({
+      data: {
+        name: "test-insights",
+        slug: `test-insights-${Date.now()}-${randomString(5)}}`,
+      },
+    });
+
+    // create memberships
+    await prisma.membership.createMany({
+      data: [
+        {
+          userId: user.id,
+          teamId: team.id,
+          accepted: true,
+          role: "ADMIN",
+        },
+        {
+          userId: userTo.id,
+          teamId: team.id,
+          accepted: true,
+          role: "ADMIN",
+        },
+      ],
+    });
+
+    await user.apiLogin();
+
+    await page.goto(`/settings/my-account/out-of-office`);
+
+    await page.getByTestId("profile-redirect-switch").click();
+    await page
+      .getByTestId("team_username_select")
+      .locator("div")
+      .filter({ hasText: "Select team member" })
+      .first()
+      .click();
+    await page.locator("#react-select-2-option-0 div").click();
+
+    // send request
+    await page.getByTestId("create-entry-ooo-redirect").click();
+
+    // expect table-redirect-toUserId to be visible
+    await expect(page.locator(`data-testid=table-redirect-${userTo.username}`)).toBeVisible();
+  });
+
+  test("Profile redirection", async ({ page, users }) => {
+    const user = await users.create({ name: "userOne" });
+    const userTo = await users.create({ name: "userTwo" });
+    const uuid = uuidv4();
+    await prisma.outOfOfficeEntry.create({
+      data: {
+        start: dayjs().startOf("day").toDate(),
+        end: dayjs().startOf("day").add(1, "w").toDate(),
+        uuid,
+        user: { connect: { id: user.id } },
+        toUser: { connect: { id: userTo.id } },
+        createdAt: new Date(),
+      },
+    });
+
+    await page.goto(`/${user.username}`);
+
+    await page.waitForLoadState("networkidle");
+
+    // regex to match username
+    expect(page.url()).toMatch(new RegExp(`/${userTo.username}`));
+
+    await page.goto(`/${userTo.username}/30-min`);
+
+    expect(page.url()).toMatch(new RegExp(`/${userTo.username}/30-min`));
+  });
+});
diff --git a/apps/web/public/static/locales/ar/common.json b/apps/web/public/static/locales/ar/common.json
index 6478916b0e..bc08be9d4b 100644
--- a/apps/web/public/static/locales/ar/common.json
+++ b/apps/web/public/static/locales/ar/common.json
@@ -1352,7 +1352,9 @@
   "event_name_info": "اسم نوع الحدث",
   "event_date_info": "تاريخ الحدث",
   "event_time_info": "وقت بدء الحدث",
+  "location_variable": "الموقع",
   "location_info": "موقع الحدث",
+  "additional_notes_variable": "ملاحظات إضافية",
   "additional_notes_info": "ملاحظات إضافية للحجز",
   "attendee_name_info": "اسم الشخص صاحب الحجز",
   "organizer_name_info": "اسم المنظم",
@@ -1803,6 +1805,7 @@
   "verification_code": "رمز التحقق",
   "can_you_try_again": "هل يمكنك المحاولة مرة أخرى في وقت مختلف؟",
   "verify": "التحقق",
+  "timezone_variable": "المنطقة الزمنية",
   "timezone_info": "المنطقة الزمنية للشخص الذي يتلقى الحجز",
   "event_end_time_variable": "وقت انتهاء الحدث",
   "event_end_time_info": "وقت نهاية الحدث",
diff --git a/apps/web/public/static/locales/cs/common.json b/apps/web/public/static/locales/cs/common.json
index 13f62236b3..4f18ade01f 100644
--- a/apps/web/public/static/locales/cs/common.json
+++ b/apps/web/public/static/locales/cs/common.json
@@ -1352,7 +1352,9 @@
   "event_name_info": "Název typu události",
   "event_date_info": "Datum události",
   "event_time_info": "Čas začátku události",
+  "location_variable": "Místo",
   "location_info": "Místo události",
+  "additional_notes_variable": "Doplňující poznámky",
   "additional_notes_info": "Další poznámky k rezervaci",
   "attendee_name_info": "Jméno osoby provádějící rezervaci",
   "organizer_name_info": "Jméno organizátora",
@@ -1803,6 +1805,7 @@
   "verification_code": "Ověřovací kód",
   "can_you_try_again": "Můžete to zkusit znovu a použít jiný čas?",
   "verify": "Ověřit",
+  "timezone_variable": "Časová zóna",
   "timezone_info": "Časové pásmo přijímající osoby",
   "event_end_time_variable": "Čas ukončení události",
   "event_end_time_info": "Čas ukončení události",
diff --git a/apps/web/public/static/locales/da/common.json b/apps/web/public/static/locales/da/common.json
index 0347e68017..d7c56df133 100644
--- a/apps/web/public/static/locales/da/common.json
+++ b/apps/web/public/static/locales/da/common.json
@@ -1175,7 +1175,9 @@
   "event_name_info": "Navn på begivenhedstypen",
   "event_date_info": "Dato for begivenheden",
   "event_time_info": "Starttidspunkt for begivenheden",
+  "location_variable": "Placering",
   "location_info": "Begivenhedens placering",
+  "additional_notes_variable": "Yderligere bemærkninger",
   "additional_notes_info": "De yderligere noter til booking",
   "attendee_name_info": "Navn på personen der booker",
   "to": "Til",
@@ -1529,6 +1531,7 @@
   "this_will_be_the_placeholder": "Dette vil være pladsholderen",
   "verification_code": "Bekræftelseskode",
   "verify": "Bekræft",
+  "timezone_variable": "Tidszone",
   "confirm_your_details": "Bekræft dine oplysninger",
   "overlay_my_calendar": "Vis min kalender",
   "need_help": "Brug for hjælp?"
diff --git a/apps/web/public/static/locales/de/common.json b/apps/web/public/static/locales/de/common.json
index aafec106a2..e2d889adb6 100644
--- a/apps/web/public/static/locales/de/common.json
+++ b/apps/web/public/static/locales/de/common.json
@@ -1352,7 +1352,9 @@
   "event_name_info": "Name des Ereignistyps",
   "event_date_info": "Das Datum der Veranstaltung",
   "event_time_info": "Die Startzeit des Termins",
+  "location_variable": "Ort",
   "location_info": "Der Ort des Events",
+  "additional_notes_variable": "Zusätzliche Notizen",
   "additional_notes_info": "Die zusätzlichen Anmerkungen der Buchung",
   "attendee_name_info": "Name der buchenden Person",
   "organizer_name_info": "Name des Organisators",
@@ -1803,6 +1805,7 @@
   "verification_code": "Bestätigungscode",
   "can_you_try_again": "Können Sie es zu einem anderen Zeitpunkt erneut versuchen?",
   "verify": "Bestätigen",
+  "timezone_variable": "Zeitzone",
   "timezone_info": "Die Zeitzone der empfangenden Person",
   "event_end_time_variable": "Endzeitpunkt des Termins",
   "event_end_time_info": "Der Endzeitpunkt des Termins",
diff --git a/apps/web/public/static/locales/el/common.json b/apps/web/public/static/locales/el/common.json
index a6dec61fbb..48a1646745 100644
--- a/apps/web/public/static/locales/el/common.json
+++ b/apps/web/public/static/locales/el/common.json
@@ -275,5 +275,7 @@
   "label": "Ετικέτα",
   "edit": "Επεξεργασία",
   "disable_guests": "Απενεργοποίηση επισκεπτών",
+  "location_variable": "Τοποθεσία",
+  "additional_notes_variable": "Πρόσθετες σημειώσεις",
   "already_have_account": "Έχετε ήδη λογαριασμό;"
 }
diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
index cddd3adfef..7981b50ff1 100644
--- a/apps/web/public/static/locales/en/common.json
+++ b/apps/web/public/static/locales/en/common.json
@@ -1389,7 +1389,9 @@
   "event_date_info": "The event date",
   "event_time_info": "The event start time",
   "event_type_not_found": "EventType not Found",
+  "location_variable": "Location",
   "location_info": "The location of the event",
+  "additional_notes_variable": "Additional notes",
   "additional_notes_info": "The additional notes of booking",
   "attendee_name_info": "The person booking's name",
   "organizer_name_info": "Organizer’s name",
@@ -1850,6 +1852,7 @@
   "verification_code": "Verification code",
   "can_you_try_again": "Can you try again with a different time?",
   "verify": "Verify",
+  "timezone_variable": "Timezone",
   "timezone_info": "The timezone of the person receiving",
   "event_end_time_variable": "Event end time",
   "event_end_time_info": "The event end time",
@@ -2200,5 +2203,35 @@
   "uprade_to_create_instant_bookings": "Upgrade to Enterprise and let guests join an instant call that attendees can jump straight into. This is only for team event types",
   "dont_want_to_wait": "Don't want to wait?",
   "meeting_started": "Meeting Started",
+  "user_redirect_title": "{{username}} is currently away for a brief period of time.",
+  "user_redirect_description": "In the meantime, {{profile.username}} will be in charge of all the new scheduled meetings on behalf of {{username}}.",
+  "out_of_office": "Out of office",
+  "out_of_office_description": "Configure actions in your profile while you are away.",
+  "send_request": "Send request",
+  "start_date_and_end_date_required": "Start date and end date are required",
+  "start_date_must_be_before_end_date": "Start date must be before end date",
+  "start_date_must_be_in_the_future": "Start date must be in the future",
+  "user_not_found": "User not found",
+  "out_of_office_entry_already_exists": "Out of office entry already exists",
+  "out_of_office_id_required": "Out of office entry id required",
+  "booking_redirect_infinite_not_allowed": "There is already a booking redirect from that user to you.",
+  "success_entry_created": "Successfully created a new entry",
+  "booking_redirect_email_subject": "Booking redirect notification",
+  "booking_redirect_email_title": "Booking Redirect Notification",
+  "booking_redirect_email_description": "You have received a booking redirection from {{toName}} so their profile links will be redirect to yours for the time interval: ",
+  "success_accept_booking_redirect":"You have accepted this booking redirect request.",
+  "success_reject_booking_redirect":"You have rejected this booking redirect request.",
+  "copy_link_booking_redirect_request": "Copy link to share request",
+  "booking_redirect_request_title": "Booking Redirect Request",
+  "select_team_member": "Select team member",
+  "going_away_title": "Going away? Simply mark your profile link as unavailable for a period of time.",
+  "redirect_team_enabled": "Redirect your profile to another team member",
+  "redirect_team_disabled": "Redirect your profile to another team member (Team plan required)",
+  "out_of_office_unavailable_list": "Out of office unavailability list",
+  "success_deleted_entry_out_of_office": "Successfully deleted entry",
+  "temporarily_out_of_office":"Temporarily Out-Of-Office?",
+  "add_a_redirect": "Add a redirect",
+  "create_entry": "Create entry",
+  "time_range": "Time range",
   "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
 }
\ No newline at end of file
diff --git a/apps/web/public/static/locales/es/common.json b/apps/web/public/static/locales/es/common.json
index ff27586a46..41095a25e1 100644
--- a/apps/web/public/static/locales/es/common.json
+++ b/apps/web/public/static/locales/es/common.json
@@ -1351,7 +1351,9 @@
   "event_name_info": "Nombre del tipo de evento",
   "event_date_info": "Fecha del evento",
   "event_time_info": "Hora de inicio del evento",
+  "location_variable": "Lugar",
   "location_info": "Ubicación del evento",
+  "additional_notes_variable": "Notas Adicionales",
   "additional_notes_info": "Notas adicionales de la reserva",
   "attendee_name_info": "Nombre de la persona que reserva",
   "organizer_name_info": "Nombre del organizador",
@@ -1802,6 +1804,7 @@
   "verification_code": "Código de verificación",
   "can_you_try_again": "¿Puede intentarlo de nuevo con una hora diferente?",
   "verify": "Verificar",
+  "timezone_variable": "Zona Horaria",
   "timezone_info": "Zona horaria de la persona que recibe",
   "event_end_time_variable": "Hora de finalización del evento",
   "event_end_time_info": "La hora de finalización del evento",
diff --git a/apps/web/public/static/locales/eu/common.json b/apps/web/public/static/locales/eu/common.json
index c96ebd7f0f..9655cdbc8b 100644
--- a/apps/web/public/static/locales/eu/common.json
+++ b/apps/web/public/static/locales/eu/common.json
@@ -697,7 +697,9 @@
   "event_name_info": "Gertaeraren motaren izena",
   "event_date_info": "Gertaeraren data",
   "event_time_info": "Gertaeraren hasiera-ordua",
+  "location_variable": "Kokapena",
   "location_info": "Gertaeraren kokapena",
+  "additional_notes_variable": "Ohar gehigarriak",
   "additional_notes_info": "Erreserbaren ohar gehigarriak",
   "organizer_name_info": "Antolatzailearen izena",
   "download_responses": "Deskargatu erantzunak",
@@ -757,5 +759,6 @@
   "options": "Aukerak",
   "add_an_option": "Gehitu aukera bat",
   "radio": "Irratia",
-  "all_bookings_filter_label": "Erreserba guztiak"
+  "all_bookings_filter_label": "Erreserba guztiak",
+  "timezone_variable": "Ordu-eremua"
 }
diff --git a/apps/web/public/static/locales/fr/common.json b/apps/web/public/static/locales/fr/common.json
index e5a5a937f5..3bfbaf5e52 100644
--- a/apps/web/public/static/locales/fr/common.json
+++ b/apps/web/public/static/locales/fr/common.json
@@ -1358,7 +1358,9 @@
   "event_name_info": "Nom du type d'événement",
   "event_date_info": "Date de l'événement",
   "event_time_info": "Heure de début de l'événement",
+  "location_variable": "Lieu",
   "location_info": "Lieu de l'événement",
+  "additional_notes_variable": "Notes supplémentaires",
   "additional_notes_info": "Notes supplémentaires de la réservation",
   "attendee_name_info": "Nom du participant",
   "organizer_name_info": "Nom de l'organisateur",
@@ -1808,6 +1810,7 @@
   "verification_code": "Code de vérification",
   "can_you_try_again": "Pouvez-vous réessayer avec un autre créneau ?",
   "verify": "Vérifier",
+  "timezone_variable": "Fuseau horaire",
   "timezone_info": "Le fuseau horaire du destinataire",
   "event_end_time_variable": "Heure de fin de l'événement",
   "event_end_time_info": "L'heure de fin de l'événement",
diff --git a/apps/web/public/static/locales/he/common.json b/apps/web/public/static/locales/he/common.json
index 1731499962..9193833d5e 100644
--- a/apps/web/public/static/locales/he/common.json
+++ b/apps/web/public/static/locales/he/common.json
@@ -1385,7 +1385,9 @@
   "event_date_info": "תאריך האירוע",
   "event_time_info": "שעת ההתחלה של האירוע",
   "event_type_not_found": "EventType לא נמצא",
+  "location_variable": "מיקום",
   "location_info": "מיקום האירוע",
+  "additional_notes_variable": "הערות נוספות",
   "additional_notes_info": "הערות נוספות להזמנה",
   "attendee_name_info": "שם האדם שביצע את ההזמנה",
   "organizer_name_info": "שם המארגן/ת",
@@ -1845,6 +1847,7 @@
   "verification_code": "קוד אימות",
   "can_you_try_again": "אתה יכול לנסות שוב עם שעה אחרת?",
   "verify": "אמת",
+  "timezone_variable": "אזור זמן",
   "timezone_info": "אזור הזמן של האדם שיקבל את ההזמנה",
   "event_end_time_variable": "שעת סיום האירוע",
   "event_end_time_info": "שעת הסיום של האירוע",
@@ -2149,6 +2152,7 @@
   "manage_calendars": "ניהול לוחות שנה",
   "lock_timezone_toggle_on_booking_page": "נעילת אזור הזמן בדף ההזמנות",
   "description_lock_timezone_toggle_on_booking_page": "כדי לנעול את אזור הזמן בדף ההזמנות – שימושי לאירועים אישיים.",
+  "number_in_international_format": "נא למלא מספר בתבנית בינלאומית.",
   "install_calendar": "התקנת לוח שנה",
   "branded_subdomain": "תת־תחום ממותג",
   "branded_subdomain_description": "קבלת תת־תחום ממותג משלך, כגון acme.cal.com",
@@ -2177,5 +2181,27 @@
   "uprade_to_create_instant_bookings": "ניתן לשדג לרישיון התאגידי ולאפשר למשתמשים להצטרף לשיחה מיידית שמשתתפים יכולים לקפוץ ישירות אליה. זה מיועד רק לסוגי אירועים של צוותים",
   "dont_want_to_wait": "לא רוצה להמתין?",
   "meeting_started": "הפגישה החלה",
+  "out_of_office": "מחוץ למשרד",
+  "out_of_office_description": "הגדרת פעולות בפרופיל שלך כשאינך במשרד.",
+  "send_request": "שליחת בקשה",
+  "start_date_and_end_date_required": "צריך תאריכי התחלה וסיום",
+  "start_date_must_be_before_end_date": "תאריך ההתחלה חייב להיות לפני תאריך הסיום",
+  "start_date_must_be_in_the_future": "תאריך ההתחלה חייב להיות בעתיד",
+  "user_not_found": "המשתמש לא נמצא",
+  "out_of_office_entry_already_exists": "רשומת מחוץ למשרד כבר קיימת",
+  "out_of_office_id_required": "צריך מזהה רשומת מחוץ למשרד",
+  "booking_redirect_infinite_not_allowed": "כבר יש הפניית הזמנה מהמשתמש הזה אליך.",
+  "success_entry_created": "רשומה חדשה נוצרה בהצלחה",
+  "booking_redirect_email_subject": "התראת הפניית הזמנה",
+  "booking_redirect_email_title": "התראת הפניית הזמנה",
+  "copy_link_booking_redirect_request": "העתקת קישור לבקשת שיתוף",
+  "booking_redirect_request_title": "בקשת הפניית הזמנות",
+  "select_team_member": "בחירת נציגות מהצוות",
+  "out_of_office_unavailable_list": "רשימת אי־זמינות למחוץ למשרד",
+  "success_deleted_entry_out_of_office": "רשומה נמחקה בהצלחה",
+  "temporarily_out_of_office": "יצאת למשרד באופן זמני?",
+  "add_a_redirect": "הוספת הפנייה",
+  "create_entry": "יצירת רשומה",
+  "time_range": "טווח זמן",
   "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
 }
diff --git a/apps/web/public/static/locales/hu/common.json b/apps/web/public/static/locales/hu/common.json
index e8fdf70ff4..81f6011537 100644
--- a/apps/web/public/static/locales/hu/common.json
+++ b/apps/web/public/static/locales/hu/common.json
@@ -205,5 +205,8 @@
   "minute_timeUnit": "Perc",
   "remove_app": "Alkalmazás eltávolítása",
   "yes_remove_app": "Igen, távolítsd el az alkalmazást",
-  "web_conference": "Online konferencia"
+  "web_conference": "Online konferencia",
+  "location_variable": "Helyszín",
+  "additional_notes_variable": "Egyéb jegyzetek",
+  "timezone_variable": "Időzóna"
 }
diff --git a/apps/web/public/static/locales/it/common.json b/apps/web/public/static/locales/it/common.json
index 5c6dc04dee..a37b0cb03f 100644
--- a/apps/web/public/static/locales/it/common.json
+++ b/apps/web/public/static/locales/it/common.json
@@ -1351,7 +1351,9 @@
   "event_name_info": "Nome del tipo di evento",
   "event_date_info": "Data dell'evento",
   "event_time_info": "Ora di inizio dell'evento",
+  "location_variable": "Luogo",
   "location_info": "Luogo dell'evento",
+  "additional_notes_variable": "Note aggiuntive",
   "additional_notes_info": "Note aggiuntive sulla prenotazione",
   "attendee_name_info": "Nome del partecipante",
   "organizer_name_info": "Nome organizzatore",
@@ -1802,6 +1804,7 @@
   "verification_code": "Codice di verifica",
   "can_you_try_again": "Riprovare specificando un orario differente.",
   "verify": "Verifica",
+  "timezone_variable": "Timezone",
   "timezone_info": "Il fuso orario della persona che riceve la prenotazione",
   "event_end_time_variable": "Ora di conclusione dell'evento",
   "event_end_time_info": "Ora di conclusione dell'evento",
diff --git a/apps/web/public/static/locales/ja/common.json b/apps/web/public/static/locales/ja/common.json
index 1145ab4ff3..6738126dda 100644
--- a/apps/web/public/static/locales/ja/common.json
+++ b/apps/web/public/static/locales/ja/common.json
@@ -1352,7 +1352,9 @@
   "event_name_info": "イベントの種類の名前",
   "event_date_info": "イベントの日付",
   "event_time_info": "イベントの開始時刻",
+  "location_variable": "場所",
   "location_info": "イベントの場所",
+  "additional_notes_variable": "備考",
   "additional_notes_info": "予約の追加メモ",
   "attendee_name_info": "予約者名",
   "organizer_name_info": "主催者名",
@@ -1803,6 +1805,7 @@
   "verification_code": "確認コード",
   "can_you_try_again": "別の時間帯でもう 1 度お試しください",
   "verify": "確認する",
+  "timezone_variable": "タイムゾーン",
   "timezone_info": "受信するユーザーのタイムゾーン",
   "event_end_time_variable": "イベントの終了時刻",
   "event_end_time_info": "イベントの終了時刻",
diff --git a/apps/web/public/static/locales/km/common.json b/apps/web/public/static/locales/km/common.json
index 01b355718a..2f4b64c619 100644
--- a/apps/web/public/static/locales/km/common.json
+++ b/apps/web/public/static/locales/km/common.json
@@ -251,5 +251,6 @@
   "invoices": "វិក្កយបត្រ",
   "users": "អ្នកប្រើប្រាស់",
   "user": "អ្នកប្រើប្រាស់",
-  "general_description": "គ្រប់គ្រងការកំណត់សម្រាប់ភាសា និងល្វែងម៉ោងរបស់អ្នក។"
+  "general_description": "គ្រប់គ្រងការកំណត់សម្រាប់ភាសា និងល្វែងម៉ោងរបស់អ្នក។",
+  "timezone_variable": "ល្វែងម៉ោង"
 }
diff --git a/apps/web/public/static/locales/ko/common.json b/apps/web/public/static/locales/ko/common.json
index 0887097ac7..63e7ea488a 100644
--- a/apps/web/public/static/locales/ko/common.json
+++ b/apps/web/public/static/locales/ko/common.json
@@ -1352,7 +1352,9 @@
   "event_name_info": "이벤트 유형 이름",
   "event_date_info": "이벤트 날짜",
   "event_time_info": "이벤트 시작 시간",
+  "location_variable": "위치",
   "location_info": "이벤트 위치",
+  "additional_notes_variable": "추가 참고 사항",
   "additional_notes_info": "예약 추가 메모",
   "attendee_name_info": "예약자 이름",
   "organizer_name_info": "주최자 이름",
@@ -1803,6 +1805,7 @@
   "verification_code": "인증 코드",
   "can_you_try_again": "다른 시간으로 다시 해보시겠어요?",
   "verify": "인증",
+  "timezone_variable": "시간대",
   "timezone_info": "예약 수신자의 시간대",
   "event_end_time_variable": "이벤트 종료 시간",
   "event_end_time_info": "이벤트가 종료되는 시간",
diff --git a/apps/web/public/static/locales/nl/common.json b/apps/web/public/static/locales/nl/common.json
index 71a0609e4c..b1ab31869d 100644
--- a/apps/web/public/static/locales/nl/common.json
+++ b/apps/web/public/static/locales/nl/common.json
@@ -1352,7 +1352,9 @@
   "event_name_info": "Naam van het type gebeurtenis",
   "event_date_info": "De datum van de gebeurtenis",
   "event_time_info": "De begintijd van de gebeurtenis",
+  "location_variable": "Locatie",
   "location_info": "De locatie van de gebeurtenis",
+  "additional_notes_variable": "Aanvullende opmerkingen",
   "additional_notes_info": "De aanvullende opmerkingen bij de boeking",
   "attendee_name_info": "De naam van de persoon die boekt",
   "organizer_name_info": "Naam organisator",
@@ -1803,6 +1805,7 @@
   "verification_code": "Verificatiecode",
   "can_you_try_again": "Kunt u het opnieuw proberen met een andere tijd?",
   "verify": "Verifiëren",
+  "timezone_variable": "Tijdzone",
   "timezone_info": "De tijdzone van de ontvanger",
   "event_end_time_variable": "Eindtijd gebeurtenis",
   "event_end_time_info": "De eindtijd van de gebeurtenis",
diff --git a/apps/web/public/static/locales/no/common.json b/apps/web/public/static/locales/no/common.json
index 722a7be985..edbeefbb55 100644
--- a/apps/web/public/static/locales/no/common.json
+++ b/apps/web/public/static/locales/no/common.json
@@ -1157,7 +1157,9 @@
   "event_name_info": "Navnet på hendelsestypen",
   "event_date_info": "Dato for hendelse",
   "event_time_info": "Start-tidspunkt for hendelsen",
+  "location_variable": "Sted",
   "location_info": "Hendelsessted",
+  "additional_notes_variable": "Tilleggsinformasjon",
   "additional_notes_info": "Tilleggsinformasjonen om bookingen",
   "attendee_name_info": "Navnet på personen som booker",
   "to": "Til",
@@ -1385,5 +1387,6 @@
   "configure": "Konfigurer",
   "sso_configuration": "Enkel Pålogging",
   "booking_confirmation_failed": "Booking-bekreftelse feilet",
+  "timezone_variable": "Tidssone",
   "need_help": "Trenger du hjelp?"
 }
diff --git a/apps/web/public/static/locales/pl/common.json b/apps/web/public/static/locales/pl/common.json
index f4965cc628..2505ec07cd 100644
--- a/apps/web/public/static/locales/pl/common.json
+++ b/apps/web/public/static/locales/pl/common.json
@@ -1352,7 +1352,9 @@
   "event_name_info": "Nazwa typu wydarzenia",
   "event_date_info": "Data wydarzenia",
   "event_time_info": "Godzina rozpoczęcia wydarzenia",
+  "location_variable": "Lokalizacja",
   "location_info": "Lokalizacja wydarzenia",
+  "additional_notes_variable": "Dodatkowe uwagi",
   "additional_notes_info": "Dodatkowe uwagi dotyczące rezerwacji",
   "attendee_name_info": "Imię i nazwisko osoby rezerwującej",
   "organizer_name_info": "Nazwa organizatora",
@@ -1803,6 +1805,7 @@
   "verification_code": "Kod weryfikacyjny",
   "can_you_try_again": "Czy możesz spróbować ponownie w innym terminie?",
   "verify": "Zweryfikuj",
+  "timezone_variable": "Strefa Czasowa",
   "timezone_info": "Strefa czasowa osoby rezerwowanej",
   "event_end_time_variable": "Czas zakończenia wydarzenia",
   "event_end_time_info": "Czas zakończenia wydarzenia",
diff --git a/apps/web/public/static/locales/pt-BR/common.json b/apps/web/public/static/locales/pt-BR/common.json
index 43836e4fd8..2d3d1630b6 100644
--- a/apps/web/public/static/locales/pt-BR/common.json
+++ b/apps/web/public/static/locales/pt-BR/common.json
@@ -1352,7 +1352,9 @@
   "event_name_info": "O nome do tipo de evento",
   "event_date_info": "A data do evento",
   "event_time_info": "O horário inicial do evento",
+  "location_variable": "Local",
   "location_info": "O local do evento",
+  "additional_notes_variable": "Observações adicionais",
   "additional_notes_info": "Notas adicionais da reserva",
   "attendee_name_info": "O nome da pessoa que fez a reserva",
   "organizer_name_info": "Nome do organizador",
@@ -1803,6 +1805,7 @@
   "verification_code": "Código de verificação",
   "can_you_try_again": "Poderia tentar novamente em um horário diferente?",
   "verify": "Verificar",
+  "timezone_variable": "Fuso Horário",
   "timezone_info": "O fuso horário do destinatário",
   "event_end_time_variable": "Horário de término do evento",
   "event_end_time_info": "O horário de término do evento",
diff --git a/apps/web/public/static/locales/pt/common.json b/apps/web/public/static/locales/pt/common.json
index cae210c157..080263e9a9 100644
--- a/apps/web/public/static/locales/pt/common.json
+++ b/apps/web/public/static/locales/pt/common.json
@@ -1352,7 +1352,9 @@
   "event_name_info": "O nome do tipo de evento",
   "event_date_info": "A data do evento",
   "event_time_info": "A hora de início do evento",
+  "location_variable": "Localização",
   "location_info": "O local do evento",
+  "additional_notes_variable": "Notas Adicionais",
   "additional_notes_info": "As notas adicionais da reserva",
   "attendee_name_info": "O nome do responsável pela reserva",
   "organizer_name_info": "Nome do organizador",
@@ -1803,6 +1805,7 @@
   "verification_code": "Código de verificação",
   "can_you_try_again": "Pode tentar novamente noutra altura?",
   "verify": "Verificar",
+  "timezone_variable": "Fuso Horário",
   "timezone_info": "O fuso horário do anfitrião",
   "event_end_time_variable": "Hora de fim do evento",
   "event_end_time_info": "A hora de fim do evento",
diff --git a/apps/web/public/static/locales/ro/common.json b/apps/web/public/static/locales/ro/common.json
index 6ce6c3fd1a..d8bbb9e007 100644
--- a/apps/web/public/static/locales/ro/common.json
+++ b/apps/web/public/static/locales/ro/common.json
@@ -1352,7 +1352,9 @@
   "event_name_info": "Denumirea tipului de eveniment",
   "event_date_info": "Data evenimentului",
   "event_time_info": "Ora începerii evenimentului",
+  "location_variable": "Loc",
   "location_info": "Locul de desfășurare a evenimentului",
+  "additional_notes_variable": "Note suplimentare",
   "additional_notes_info": "Observații suplimentare privind rezervarea",
   "attendee_name_info": "Numele persoanei care efectuează rezervarea",
   "organizer_name_info": "Numele organizatorului",
@@ -1803,6 +1805,7 @@
   "verification_code": "Cod de verificare",
   "can_you_try_again": "Puteți încerca din nou cu o oră diferită?",
   "verify": "Verificare",
+  "timezone_variable": "Timezone",
   "timezone_info": "Fusul orar al destinatarului",
   "event_end_time_variable": "Oră de încheiere eveniment",
   "event_end_time_info": "Ora de încheiere a evenimentului",
diff --git a/apps/web/public/static/locales/ru/common.json b/apps/web/public/static/locales/ru/common.json
index 662df18032..8262543836 100644
--- a/apps/web/public/static/locales/ru/common.json
+++ b/apps/web/public/static/locales/ru/common.json
@@ -56,6 +56,7 @@
   "a_refund_failed": "Возврат не удался",
   "awaiting_payment_subject": "Ожидание оплаты: {{title}} на {{date}}",
   "meeting_awaiting_payment": "Ваша встреча ожидает оплаты",
+  "dark_theme_contrast_error": "Темный цвет темы не проходит проверку на контрастность. Мы рекомендуем вам изменить этот цвет, чтобы ваши кнопки были более заметны.",
   "help": "Помощь",
   "price": "Цена",
   "paid": "Оплачено",
@@ -1352,7 +1353,9 @@
   "event_name_info": "Название типа события",
   "event_date_info": "Дата события",
   "event_time_info": "Время начала события",
+  "location_variable": "Местоположение",
   "location_info": "Место проведения события",
+  "additional_notes_variable": "Дополнительная информация",
   "additional_notes_info": "Дополнительные заметки о бронировании",
   "attendee_name_info": "Участник, на которого оформляется бронирование",
   "organizer_name_info": "Имя организатора",
@@ -1803,6 +1806,7 @@
   "verification_code": "Код подтверждения",
   "can_you_try_again": "Попробуйте указать другое время встречи.",
   "verify": "Подтвердить",
+  "timezone_variable": "Часовой пояс",
   "timezone_info": "Часовой пояс получателя",
   "event_end_time_variable": "Время окончания события",
   "event_end_time_info": "Время окончания события",
diff --git a/apps/web/public/static/locales/sr/common.json b/apps/web/public/static/locales/sr/common.json
index b8d3015312..e08942bad5 100644
--- a/apps/web/public/static/locales/sr/common.json
+++ b/apps/web/public/static/locales/sr/common.json
@@ -1352,7 +1352,9 @@
   "event_name_info": "Ime tipa događaja",
   "event_date_info": "Datum događaja",
   "event_time_info": "Vreme početka događaja",
+  "location_variable": "Lokacija",
   "location_info": "Lokacija događaja",
+  "additional_notes_variable": "Dodatne beleške",
   "additional_notes_info": "Dodatne napomene o rezervaciji",
   "attendee_name_info": "Ime osobe koja rezerviše",
   "organizer_name_info": "Ime organizatora",
@@ -1803,6 +1805,7 @@
   "verification_code": "Verifikacioni kôd",
   "can_you_try_again": "Možete li da pokušate sa drugim terminom?",
   "verify": "Verifikuj",
+  "timezone_variable": "Vremenska zona",
   "timezone_info": "Vremenska zona primaoca",
   "event_end_time_variable": "Vreme završetka događaja",
   "event_end_time_info": "Vreme završetka događaja",
diff --git a/apps/web/public/static/locales/sv/common.json b/apps/web/public/static/locales/sv/common.json
index 7808b89c27..8a0681a9b6 100644
--- a/apps/web/public/static/locales/sv/common.json
+++ b/apps/web/public/static/locales/sv/common.json
@@ -1352,7 +1352,9 @@
   "event_name_info": "Namn på händelsetyp",
   "event_date_info": "Datum för händelsen",
   "event_time_info": "Händelsens starttid",
+  "location_variable": "Plats",
   "location_info": "Händelsens plats",
+  "additional_notes_variable": "Ytterligare inmatning",
   "additional_notes_info": "Ytterligare bokningsanteckningar",
   "attendee_name_info": "Personens bokningsnamn",
   "organizer_name_info": "Arrangörens namn",
@@ -1803,6 +1805,7 @@
   "verification_code": "Verifieringskod",
   "can_you_try_again": "Kan du försöka igen med en annan tid?",
   "verify": "Verifiera",
+  "timezone_variable": "Tidszon",
   "timezone_info": "Tidszon för mottagande person",
   "event_end_time_variable": "Händelsens sluttid",
   "event_end_time_info": "Händelsens sluttid",
diff --git a/apps/web/public/static/locales/tr/common.json b/apps/web/public/static/locales/tr/common.json
index 30bb39d76b..09f5e27086 100644
--- a/apps/web/public/static/locales/tr/common.json
+++ b/apps/web/public/static/locales/tr/common.json
@@ -1352,7 +1352,9 @@
   "event_name_info": "Etkinlik türü adı",
   "event_date_info": "Etkinlik tarihi",
   "event_time_info": "Etkinlik başlama saati",
+  "location_variable": "Konum",
   "location_info": "Etkinlik yeri",
+  "additional_notes_variable": "Ek notlar",
   "additional_notes_info": "Ek rezervasyon notları",
   "attendee_name_info": "Rezervasyon yaptıran kişinin adı",
   "organizer_name_info": "Düzenleyenin adı",
@@ -1803,6 +1805,7 @@
   "verification_code": "Doğrulama kodu",
   "can_you_try_again": "Başka bir saatle tekrar deneyebilir misiniz?",
   "verify": "Doğrula",
+  "timezone_variable": "Saat dilimi",
   "timezone_info": "Alıcının saat dilimi",
   "event_end_time_variable": "Etkinlik bitiş saati",
   "event_end_time_info": "Etkinlik bitiş saati",
diff --git a/apps/web/public/static/locales/uk/common.json b/apps/web/public/static/locales/uk/common.json
index 40d8c52cf3..a8ecba7194 100644
--- a/apps/web/public/static/locales/uk/common.json
+++ b/apps/web/public/static/locales/uk/common.json
@@ -1352,7 +1352,9 @@
   "event_name_info": "Назва типу заходу",
   "event_date_info": "Дата заходу",
   "event_time_info": "Час початку заходу",
+  "location_variable": "Розташування",
   "location_info": "Місце проведення заходу",
+  "additional_notes_variable": "Додаткові примітки",
   "additional_notes_info": "Додаткові примітки щодо бронювання",
   "attendee_name_info": "Ім’я особи, яка бронює",
   "organizer_name_info": "Ім’я організатора",
@@ -1803,6 +1805,7 @@
   "verification_code": "Код перевірки",
   "can_you_try_again": "Виберіть інший час і повторіть спробу.",
   "verify": "Перевірити",
+  "timezone_variable": "Часовий пояс",
   "timezone_info": "Часовий пояс одержувача",
   "event_end_time_variable": "Час завершення заходу",
   "event_end_time_info": "Час завершення заходу",
diff --git a/apps/web/public/static/locales/vi/common.json b/apps/web/public/static/locales/vi/common.json
index b072d4bc90..56978b1b66 100644
--- a/apps/web/public/static/locales/vi/common.json
+++ b/apps/web/public/static/locales/vi/common.json
@@ -1355,7 +1355,9 @@
   "event_name_info": "Tên loại sự kiện",
   "event_date_info": "Ngày sự kiện",
   "event_time_info": "Thời gian bắt đầu sự kiện",
+  "location_variable": "Vị trí",
   "location_info": "Địa điểm sự kiện",
+  "additional_notes_variable": "Ghi chú bổ sung",
   "additional_notes_info": "Ghi chú thêm cho lịch hẹn",
   "attendee_name_info": "Tên người tham gia lịch hẹn",
   "organizer_name_info": "Tên của tổ chức",
@@ -1807,6 +1809,7 @@
   "verification_code": "Mã xác minh",
   "can_you_try_again": "Bạn có thể thử lại lúc khác được chứ?",
   "verify": "Xác minh",
+  "timezone_variable": "Múi giờ",
   "timezone_info": "Múi giờ của người nhận",
   "event_end_time_variable": "Thời gian kết thúc sự kiện",
   "event_end_time_info": "Thời gian kết thúc sự kiện",
diff --git a/apps/web/public/static/locales/zh-CN/common.json b/apps/web/public/static/locales/zh-CN/common.json
index 6b61b16df7..c0b15e4805 100644
--- a/apps/web/public/static/locales/zh-CN/common.json
+++ b/apps/web/public/static/locales/zh-CN/common.json
@@ -1353,7 +1353,9 @@
   "event_name_info": "活动类型名称",
   "event_date_info": "活动日期",
   "event_time_info": "活动开始时间",
+  "location_variable": "位置",
   "location_info": "活动位置",
+  "additional_notes_variable": "附加备注",
   "additional_notes_info": "预约附加说明",
   "attendee_name_info": "预约人的姓名",
   "organizer_name_info": "组织者姓名",
@@ -1804,6 +1806,7 @@
   "verification_code": "验证码",
   "can_you_try_again": "可否用不同的时间再次尝试？",
   "verify": "验证",
+  "timezone_variable": "时区",
   "timezone_info": "接收人的时区",
   "event_end_time_variable": "活动结束时间",
   "event_end_time_info": "活动结束时间",
diff --git a/apps/web/public/static/locales/zh-TW/common.json b/apps/web/public/static/locales/zh-TW/common.json
index 958eb14432..4514a00026 100644
--- a/apps/web/public/static/locales/zh-TW/common.json
+++ b/apps/web/public/static/locales/zh-TW/common.json
@@ -1352,7 +1352,9 @@
   "event_name_info": "活動類型名稱",
   "event_date_info": "活動日期",
   "event_time_info": "活動開始時間",
+  "location_variable": "地點",
   "location_info": "活動地點",
+  "additional_notes_variable": "備註",
   "additional_notes_info": "預約額外備註",
   "attendee_name_info": "預約人姓名",
   "organizer_name_info": "主辦者姓名",
@@ -1803,6 +1805,7 @@
   "verification_code": "驗證碼",
   "can_you_try_again": "您可以再試試其他時間嗎？",
   "verify": "驗證",
+  "timezone_variable": "時區",
   "timezone_info": "接收人的時區",
   "event_end_time_variable": "活動結束時間",
   "event_end_time_info": "活動結束時間",
diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
index ee8fc6fcc3..170c186216 100644
--- a/apps/web/styles/globals.css
+++ b/apps/web/styles/globals.css
@@ -143,7 +143,8 @@ html.todesktop header {
   -webkit-app-region: drag;
 }
 
-html.todesktop header button {
+html.todesktop header button,
+html.todesktop header a {
   -webkit-app-region: no-drag;
 }
 
diff --git a/packages/emails/email-manager.ts b/packages/emails/email-manager.ts
index 8774278fa1..987e0b49f1 100644
--- a/packages/emails/email-manager.ts
+++ b/packages/emails/email-manager.ts
@@ -24,6 +24,8 @@ import AttendeeScheduledEmail from "./templates/attendee-scheduled-email";
 import type { EmailVerifyCode } from "./templates/attendee-verify-email";
 import AttendeeVerifyEmail from "./templates/attendee-verify-email";
 import AttendeeWasRequestedToRescheduleEmail from "./templates/attendee-was-requested-to-reschedule-email";
+import BookingRedirectEmailNotification from "./templates/booking-redirect-notification";
+import type { IBookingRedirect } from "./templates/booking-redirect-notification";
 import BrokenIntegrationEmail from "./templates/broken-integration-email";
 import DisabledAppEmail from "./templates/disabled-app-email";
 import type { Feedback } from "./templates/feedback-email";
@@ -437,3 +439,7 @@ export const sendMonthlyDigestEmails = async (eventData: MonthlyDigestEmailData)
 export const sendAdminOrganizationNotification = async (input: OrganizationNotification) => {
   await sendEmail(() => new AdminOrganizationNotification(input));
 };
+
+export const sendBookingRedirectNotification = async (bookingRedirect: IBookingRedirect) => {
+  await sendEmail(() => new BookingRedirectEmailNotification(bookingRedirect));
+};
diff --git a/packages/emails/src/templates/BookingRedirectEmailNotification.tsx b/packages/emails/src/templates/BookingRedirectEmailNotification.tsx
new file mode 100644
index 0000000000..cbe11a5581
--- /dev/null
+++ b/packages/emails/src/templates/BookingRedirectEmailNotification.tsx
@@ -0,0 +1,33 @@
+import type { IBookingRedirect } from "../../templates/booking-redirect-notification";
+import { BaseEmailHtml } from "../components";
+
+export const BookingRedirectEmailNotification = (
+  props: IBookingRedirect & Partial<React.ComponentProps<typeof BaseEmailHtml>>
+) => {
+  return (
+    <BaseEmailHtml
+      subject={props.language("booking_redirect_email_subject")}
+      title={props.language("booking_redirect_email_title")}>
+      <p
+        style={{
+          color: "black",
+          fontSize: "16px",
+          lineHeight: "24px",
+          fontWeight: "400",
+        }}>
+        {props.language("booking_redirect_email_description", {
+          toName: props.toName,
+        })}
+        {props.dates}
+        <br />
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            marginTop: "16px",
+          }}
+        />
+      </p>
+    </BaseEmailHtml>
+  );
+};
diff --git a/packages/emails/src/templates/index.ts b/packages/emails/src/templates/index.ts
index 1d7f642203..072401fb86 100644
--- a/packages/emails/src/templates/index.ts
+++ b/packages/emails/src/templates/index.ts
@@ -31,3 +31,4 @@ export { OrganisationAccountVerifyEmail } from "./OrganizationAccountVerifyEmail
 export { OrgAutoInviteEmail } from "./OrgAutoInviteEmail";
 export { MonthlyDigestEmail } from "./MonthlyDigestEmail";
 export { AdminOrganizationNotificationEmail } from "./AdminOrganizationNotificationEmail";
+export { BookingRedirectEmailNotification } from "./BookingRedirectEmailNotification";
diff --git a/packages/emails/templates/booking-redirect-notification.ts b/packages/emails/templates/booking-redirect-notification.ts
new file mode 100644
index 0000000000..db51fe7385
--- /dev/null
+++ b/packages/emails/templates/booking-redirect-notification.ts
@@ -0,0 +1,36 @@
+import type { TFunction } from "next-i18next";
+
+import { APP_NAME } from "@calcom/lib/constants";
+
+import { renderEmail } from "..";
+import BaseEmail from "./_base-email";
+
+export interface IBookingRedirect {
+  language: TFunction;
+  fromEmail: string;
+  toEmail: string;
+  toName: string;
+  dates: string;
+}
+
+export default class BookingRedirectNotification extends BaseEmail {
+  bookingRedirect: IBookingRedirect;
+
+  constructor(bookingRedirect: IBookingRedirect) {
+    super();
+    this.name = "BOOKING_REDIRECT_NOTIFICATION";
+    this.bookingRedirect = bookingRedirect;
+  }
+
+  protected async getNodeMailerPayload(): Promise<Record<string, unknown>> {
+    return {
+      to: `${this.bookingRedirect.toEmail} <${this.bookingRedirect.toName}>`,
+      from: `${APP_NAME} <${this.getMailerOptions().from}>`,
+      subject: this.bookingRedirect.language("booking_redirect_email_subject"),
+      html: await renderEmail("BookingRedirectEmailNotification", {
+        ...this.bookingRedirect,
+      }),
+      text: "",
+    };
+  }
+}
diff --git a/packages/features/booking-redirect/handle-type.ts b/packages/features/booking-redirect/handle-type.ts
new file mode 100644
index 0000000000..732113d7a8
--- /dev/null
+++ b/packages/features/booking-redirect/handle-type.ts
@@ -0,0 +1,71 @@
+import prisma from "@calcom/prisma";
+
+interface HandleTypeRedirectionProps {
+  userId: number;
+  slug: string;
+  username: string;
+}
+
+export const handleTypeRedirection = async (props: HandleTypeRedirectionProps) => {
+  const { userId, slug, username } = props;
+  const outOfOfficeEntryActive = await prisma.outOfOfficeEntry.findFirst({
+    select: {
+      userId: true,
+      start: true,
+      end: true,
+      toUserId: true,
+      toUser: {
+        select: {
+          id: true,
+          username: true,
+        },
+      },
+    },
+    where: {
+      userId: userId,
+      start: {
+        lte: new Date(),
+      },
+      end: {
+        gte: new Date(),
+      },
+    },
+  });
+
+  let redirectToSameEventSlug = false;
+
+  // @TODO: Should I validate if new user has same type as slug?
+  if (outOfOfficeEntryActive) {
+    if (outOfOfficeEntryActive.toUserId === null) {
+      return {
+        outOfOffice: true,
+      };
+    }
+    if (outOfOfficeEntryActive?.toUser) {
+      const eventType = await prisma.eventType.findFirst({
+        select: {
+          slug: true,
+          userId: true,
+        },
+        where: {
+          slug,
+          userId: outOfOfficeEntryActive.toUserId,
+        },
+      });
+
+      if (eventType) {
+        redirectToSameEventSlug = true;
+      }
+
+      return {
+        redirect: {
+          destination: `/${outOfOfficeEntryActive.toUser.username}${
+            redirectToSameEventSlug ? `/${slug}` : ""
+          }?redirected=true&username=${username}`,
+          permanent: false,
+        },
+      };
+    }
+  }
+  return {};
+};
diff --git a/packages/features/booking-redirect/handle-user.ts b/packages/features/booking-redirect/handle-user.ts
new file mode 100644
index 0000000000..a7c7281592
--- /dev/null
+++ b/packages/features/booking-redirect/handle-user.ts
@@ -0,0 +1,59 @@
+import prisma from "@calcom/prisma";
+
+interface HandleUserRedirectionProps {
+  username: string;
+}
+
+export const handleUserRedirection = async (props: HandleUserRedirectionProps) => {
+  const { username } = props;
+  const fromUser = await prisma.user.findFirst({
+    where: {
+      username,
+    },
+    select: {
+      id: true,
+    },
+  });
+
+  if (fromUser) {
+    // If user is found quickly verify bookingRedirect
+    const outOfOfficeEntryActive = await prisma.outOfOfficeEntry.findFirst({
+      select: {
+        toUser: {
+          select: {
+            username: true,
+          },
+        },
+        toUserId: true,
+        userId: true,
+        start: true,
+        end: true,
+      },
+      where: {
+        userId: fromUser.id,
+        start: {
+          lte: new Date(),
+        },
+        end: {
+          gte: new Date(),
+        },
+      },
+    });
+
+    if (outOfOfficeEntryActive && outOfOfficeEntryActive.toUserId === null) {
+      return {
+        outOfOffice: true,
+      };
+    }
+
+    if (outOfOfficeEntryActive && outOfOfficeEntryActive.toUser?.username) {
+      return {
+        redirect: {
+          destination: `/${outOfOfficeEntryActive.toUser.username}?redirected=true&username=${username}`,
+          permanent: false,
+        },
+      };
+    }
+  }
+  return {};
+};
diff --git a/packages/features/bookings/Booker/Booker.tsx b/packages/features/bookings/Booker/Booker.tsx
index 15749a95a6..1164e057ca 100644
--- a/packages/features/bookings/Booker/Booker.tsx
+++ b/packages/features/bookings/Booker/Booker.tsx
@@ -1,6 +1,6 @@
 import { LazyMotion, m, AnimatePresence } from "framer-motion";
 import dynamic from "next/dynamic";
-import { usePathname, useRouter } from "next/navigation";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useEffect, useRef } from "react";
 import StickyBox from "react-sticky-box";
 import { shallow } from "zustand/shallow";
@@ -10,6 +10,7 @@ import dayjs from "@calcom/dayjs";
 import { useEmbedType, useEmbedUiConfig, useIsEmbed } from "@calcom/embed-core/embed-iframe";
 import { useNonEmptyScheduleDays } from "@calcom/features/schedules";
 import classNames from "@calcom/lib/classNames";
+import { DEFAULT_LIGHT_BRAND_COLOR, DEFAULT_DARK_BRAND_COLOR } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useMediaQuery from "@calcom/lib/hooks/useMediaQuery";
 import { BookerLayouts, defaultBookerLayoutSettings } from "@calcom/prisma/zod-utils";
@@ -81,6 +82,12 @@ const BookerComponent = ({
   const hasDarkBackground = isEmbed && embedType !== "inline";
   const embedUiConfig = useEmbedUiConfig();
 
+  const { t } = useLocale();
+
+  const searchParams = useSearchParams();
+  const isRedirect = searchParams?.get("redirected") === "true" || false;
+  const fromUserNameRedirected = searchParams?.get("username") || "";
+
   // In Embed we give preference to embed configuration for the layout.If that's not set, we use the App configuration for the event layout
   // But if it's mobile view, there is only one layout supported which is 'mobile'
   const layout = isEmbed ? (isMobile ? "mobile" : validateLayout(embedUiConfig.layout) || _layout) : _layout;
@@ -138,8 +145,8 @@ const BookerComponent = ({
     : bookerLayouts.defaultLayout;
 
   useBrandColors({
-    brandColor: event.data?.profile.brandColor,
-    darkBrandColor: event.data?.profile.darkBrandColor,
+    brandColor: event.data?.profile.brandColor ?? DEFAULT_LIGHT_BRAND_COLOR,
+    darkBrandColor: event.data?.profile.darkBrandColor ?? DEFAULT_DARK_BRAND_COLOR,
     theme: event.data?.profile.theme,
   });
 
@@ -221,6 +228,7 @@ const BookerComponent = ({
   return (
     <>
       {event.data ? <BookingPageTagManager eventType={event.data} /> : null}
+
       {bookerState !== "booking" && event.data?.isInstantEvent && (
         <div
           className="animate-fade-in-up fixed bottom-2 z-40 my-2 opacity-0"
@@ -235,6 +243,26 @@ const BookerComponent = ({
           "text-default flex min-h-full w-full flex-col items-center",
           layout === BookerLayouts.MONTH_VIEW ? "overflow-visible" : "overflow-clip"
         )}>
+        {/* redirect from other user profile */}
+        {isRedirect && (
+          <div className="mb-8 rounded-md bg-blue-100 p-4 dark:border dark:bg-transparent">
+            <h2 className="text-default mb-2 text-sm font-semibold">
+              {t("user_redirect_title", {
+                username: fromUserNameRedirected,
+              })}{" "}
+              🏝️
+            </h2>
+            <p className="text-default text-sm">
+              {t("user_redirect_description", {
+                profile: {
+                  username: username,
+                },
+                username: fromUserNameRedirected,
+              })}{" "}
+              😄
+            </p>
+          </div>
+        )}
         <div
           ref={animationScope}
           className={classNames(
diff --git a/packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx b/packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx
index 18371c74ed..bfb6715517 100644
--- a/packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx
+++ b/packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx
@@ -209,6 +209,7 @@ export const BookEventFormChild = ({
             absolute: false,
           })
         );
+        return;
       }
 
       if (!uid) {
diff --git a/packages/features/calendars/DatePicker.tsx b/packages/features/calendars/DatePicker.tsx
index 6571bc1372..84944d8f3c 100644
--- a/packages/features/calendars/DatePicker.tsx
+++ b/packages/features/calendars/DatePicker.tsx
@@ -74,7 +74,7 @@ export const Day = ({
         <span
           className={classNames(
             "bg-brand-default absolute left-1/2 top-1/2 flex h-[5px] w-[5px] -translate-x-1/2 translate-y-[8px] items-center justify-center rounded-full align-middle sm:translate-y-[12px]",
-            active && "invert"
+            active && "bg-brand-accent"
           )}>
           <span className="sr-only">{t("today")}</span>
         </span>
diff --git a/packages/features/ee/components/BrandColorsForm.tsx b/packages/features/ee/components/BrandColorsForm.tsx
index a3181ac24d..df924b1920 100644
--- a/packages/features/ee/components/BrandColorsForm.tsx
+++ b/packages/features/ee/components/BrandColorsForm.tsx
@@ -26,7 +26,6 @@ const BrandColorsForm = ({
   const brandColorsFormMethods = useFormContext();
   const {
     formState: { isSubmitting: isBrandColorsFormSubmitting, isDirty: isBrandColorsFormDirty },
-    handleSubmit,
   } = brandColorsFormMethods;
 
   const [isCustomBrandColorChecked, setIsCustomBrandColorChecked] = useState(
diff --git a/packages/features/ee/organizations/pages/settings/appearance.tsx b/packages/features/ee/organizations/pages/settings/appearance.tsx
index 8760787465..d6941a3ede 100644
--- a/packages/features/ee/organizations/pages/settings/appearance.tsx
+++ b/packages/features/ee/organizations/pages/settings/appearance.tsx
@@ -180,8 +180,8 @@ const OrgAppearanceView = ({
             }}>
             <BrandColorsForm
               onSubmit={onBrandColorsFormSubmit}
-              brandColor={currentOrg?.brandColor}
-              darkBrandColor={currentOrg?.darkBrandColor}
+              brandColor={currentOrg?.brandColor ?? DEFAULT_LIGHT_BRAND_COLOR}
+              darkBrandColor={currentOrg?.darkBrandColor ?? DEFAULT_DARK_BRAND_COLOR}
             />
           </Form>
 
diff --git a/packages/features/ee/sso/page/user-sso-view.tsx b/packages/features/ee/sso/page/user-sso-view.tsx
index c5792745d1..84b3d6bf8c 100644
--- a/packages/features/ee/sso/page/user-sso-view.tsx
+++ b/packages/features/ee/sso/page/user-sso-view.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 
diff --git a/packages/features/ee/teams/pages/team-appearance-view.tsx b/packages/features/ee/teams/pages/team-appearance-view.tsx
index 02dfea5357..e28ee15455 100644
--- a/packages/features/ee/teams/pages/team-appearance-view.tsx
+++ b/packages/features/ee/teams/pages/team-appearance-view.tsx
@@ -61,7 +61,10 @@ const ProfileView = ({ team }: ProfileViewProps) => {
       await utils.viewer.teams.get.invalidate();
       if (res) {
         resetTheme({ theme: res.theme });
-        resetBrandColors({ brandColor: res.brandColor, darkBrandColor: res.darkBrandColor });
+        resetBrandColors({
+          brandColor: res.brandColor ?? DEFAULT_LIGHT_BRAND_COLOR,
+          darkBrandColor: res.darkBrandColor ?? DEFAULT_DARK_BRAND_COLOR,
+        });
       }
 
       showToast(t("your_team_updated_successfully"), "success");
@@ -139,8 +142,8 @@ const ProfileView = ({ team }: ProfileViewProps) => {
             }}>
             <BrandColorsForm
               onSubmit={onBrandColorsFormSubmit}
-              brandColor={team?.brandColor}
-              darkBrandColor={team?.darkBrandColor}
+              brandColor={team?.brandColor ?? DEFAULT_LIGHT_BRAND_COLOR}
+              darkBrandColor={team?.darkBrandColor ?? DEFAULT_DARK_BRAND_COLOR}
             />
           </Form>
 
diff --git a/packages/features/ee/workflows/api/scheduleEmailReminders.ts b/packages/features/ee/workflows/api/scheduleEmailReminders.ts
index 8dec83f79e..0c48d8ff27 100644
--- a/packages/features/ee/workflows/api/scheduleEmailReminders.ts
+++ b/packages/features/ee/workflows/api/scheduleEmailReminders.ts
@@ -1,5 +1,4 @@
 /* Schedule any workflow reminder that falls within 72 hours for email */
-import client from "@sendgrid/client";
 import type { NextApiRequest, NextApiResponse } from "next";
 import { v4 as uuidv4 } from "uuid";
 
@@ -19,7 +18,12 @@ import {
   getAllUnscheduledReminders,
 } from "../lib/getWorkflowReminders";
 import { getiCalEventAsString } from "../lib/getiCalEventAsString";
-import { sendSendgridMail } from "../lib/reminders/providers/sendgridProvider";
+import {
+  cancelScheduledEmail,
+  deleteScheduledSend,
+  getBatchId,
+  sendSendgridMail,
+} from "../lib/reminders/providers/sendgridProvider";
 import type { VariablesType } from "../lib/reminders/templates/customTemplate";
 import customTemplate from "../lib/reminders/templates/customTemplate";
 import emailReminderTemplate from "../lib/reminders/templates/emailReminderTemplate";
@@ -42,10 +46,7 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
   const deletePromises: Promise<any>[] = [];
 
   for (const reminder of remindersToDelete) {
-    const deletePromise = client.request({
-      url: `/v3/user/scheduled_sends/${reminder.referenceId}`,
-      method: "DELETE",
-    });
+    const deletePromise = deleteScheduledSend(reminder.referenceId);
     deletePromises.push(deletePromise);
   }
 
@@ -73,14 +74,7 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
   const cancelUpdatePromises: Promise<any>[] = [];
 
   for (const reminder of remindersToCancel) {
-    const cancelPromise = client.request({
-      url: "/v3/user/scheduled_sends",
-      method: "POST",
-      body: {
-        batch_id: reminder.referenceId,
-        status: "cancel",
-      },
-    });
+    const cancelPromise = cancelScheduledEmail(reminder.referenceId);
 
     const updatePromise = prisma.workflowReminder.update({
       where: {
@@ -222,12 +216,7 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
         }
 
         if (emailContent.emailSubject.length > 0 && !emailBodyEmpty && sendTo) {
-          const batchIdResponse = await client.request({
-            url: "/v3/mail/batch",
-            method: "POST",
-          });
-
-          const batchId = batchIdResponse[1].batch_id;
+          const batchId = await getBatchId();
 
           if (reminder.workflowStep.action !== WorkflowActions.EMAIL_ADDRESS) {
             sendEmailPromises.push(
@@ -298,12 +287,7 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
           !!reminder.booking.user?.hideBranding
         );
         if (emailContent.emailSubject.length > 0 && !emailBodyEmpty && sendTo) {
-          const batchIdResponse = await client.request({
-            url: "/v3/mail/batch",
-            method: "POST",
-          });
-
-          const batchId = batchIdResponse[1].batch_id;
+          const batchId = await getBatchId();
 
           sendEmailPromises.push(
             sendSendgridMail(
@@ -343,7 +327,7 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
     });
   });
 
-  res.status(200).json({ message: `${unscheduledReminders.length} Emails scheduled` });
+  res.status(200).json({ message: `${unscheduledReminders.length} Emails to schedule` });
 }
 
 export default defaultHandler({
diff --git a/packages/features/ee/workflows/lib/reminders/providers/sendgridProvider.ts b/packages/features/ee/workflows/lib/reminders/providers/sendgridProvider.ts
index f4ba166af8..b09bc046a3 100644
--- a/packages/features/ee/workflows/lib/reminders/providers/sendgridProvider.ts
+++ b/packages/features/ee/workflows/lib/reminders/providers/sendgridProvider.ts
@@ -77,3 +77,35 @@ export function sendSendgridMail(
     sendAt: mailData.sendAt,
   });
 }
+
+export function cancelScheduledEmail(referenceId: string | null) {
+  if (!referenceId) {
+    console.info("No referenceId provided, skip canceling email");
+    return Promise.resolve();
+  }
+
+  assertSendgrid();
+
+  return client.request({
+    url: "/v3/user/scheduled_sends",
+    method: "POST",
+    body: {
+      batch_id: referenceId,
+      status: "cancel",
+    },
+  });
+}
+
+export function deleteScheduledSend(referenceId: string | null) {
+  if (!referenceId) {
+    console.info("No referenceId provided, skip deleting scheduledSend");
+    return Promise.resolve();
+  }
+
+  assertSendgrid();
+
+  return client.request({
+    url: `/v3/user/scheduled_sends/${referenceId}`,
+    method: "DELETE",
+  });
+}
diff --git a/packages/features/ee/workflows/pages/index.tsx b/packages/features/ee/workflows/pages/index.tsx
index c0714a3898..e25fbd1135 100644
--- a/packages/features/ee/workflows/pages/index.tsx
+++ b/packages/features/ee/workflows/pages/index.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import type { Dispatch, SetStateAction } from "react";
diff --git a/packages/features/ee/workflows/pages/workflow.tsx b/packages/features/ee/workflows/pages/workflow.tsx
index 15774f4d65..6bbe64f52f 100644
--- a/packages/features/ee/workflows/pages/workflow.tsx
+++ b/packages/features/ee/workflows/pages/workflow.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { zodResolver } from "@hookform/resolvers/zod";
 import type { WorkflowStep } from "@prisma/client";
 import { isValidPhoneNumber } from "libphonenumber-js";
diff --git a/packages/features/insights/filters/DateSelect.css b/packages/features/insights/filters/DateSelect.css
index 4b024872fb..6512dbf96b 100644
--- a/packages/features/insights/filters/DateSelect.css
+++ b/packages/features/insights/filters/DateSelect.css
@@ -11,12 +11,12 @@
   }
 }
 
-.recharts-cartesian-grid-horizontal line{
-  @apply stroke-emphasis
+.recharts-cartesian-grid-horizontal line {
+  @apply stroke-emphasis;
 }
 
-.tremor-DateRangePicker-button button{
-  @apply !h-9 !max-h-9 border-default hover:border-emphasis
+.tremor-DateRangePicker-button button {
+  @apply border-default hover:border-emphasis !h-9 !max-h-9;
 }
 
 .tremor-DateRangePicker-calendarButton,
@@ -24,12 +24,12 @@
   @apply border-subtle bg-default focus-within:ring-emphasis hover:border-subtle dark:focus-within:ring-emphasis hover:bg-subtle text-sm leading-4 placeholder:text-sm placeholder:font-normal focus-within:ring-0;
 }
 
-.tremor-DateRangePicker-dropdownModal{
-  @apply divide-none
+.tremor-DateRangePicker-dropdownModal {
+  @apply divide-none;
 }
 
-.tremor-DropdownItem-root{
-  @apply !h-9 !max-h-9 bg-default hover:bg-subtle text-default hover:text-emphasis
+.tremor-DropdownItem-root {
+  @apply bg-default hover:bg-subtle text-default hover:text-emphasis !h-9 !max-h-9;
 }
 
 .tremor-DateRangePicker-calendarButtonText,
@@ -37,56 +37,54 @@
   @apply text-default;
 }
 
-.tremor-DateRangePicker-calendarHeaderText{
-  @apply !text-default
+.tremor-DateRangePicker-calendarHeaderText {
+  @apply !text-default;
 }
 
-.tremor-DateRangePicker-calendarHeader svg{
-  @apply text-default
+.tremor-DateRangePicker-calendarHeader svg {
+  @apply text-default;
 }
 
-.tremor-DateRangePicker-calendarHeader button{
-  @apply hover:bg-emphasis shadow-none focus:ring-0
+.tremor-DateRangePicker-calendarHeader button {
+  @apply hover:bg-emphasis shadow-none focus:ring-0;
 }
 
-
-.tremor-DateRangePicker-calendarHeader button:hover svg{
-  @apply text-emphasis
+.tremor-DateRangePicker-calendarHeader button:hover svg {
+  @apply text-emphasis;
 }
 
-.tremor-DateRangePicker-calendarButtonIcon{
-  @apply text-default
+.tremor-DateRangePicker-calendarButtonIcon {
+  @apply text-default;
 }
 
 .tremor-DateRangePicker-calendarModal,
 .tremor-DateRangePicker-dropdownModal {
-  @apply bg-default border-subtle shadow-dropdown
+  @apply bg-default border-subtle shadow-dropdown;
 }
 
-.tremor-DateRangePicker-calendarBodyDate button{
-  @apply text-default  hover:bg-emphasis
+.tremor-DateRangePicker-calendarBodyDate button {
+  @apply text-default  hover:bg-emphasis;
 }
 
 .tremor-DateRangePicker-calendarBodyDate button:disabled,
-.tremor-DateRangePicker-calendarBodyDate button[disabled]{
-  @apply opacity-25
+.tremor-DateRangePicker-calendarBodyDate button[disabled] {
+  @apply opacity-25;
 }
 
-.tremor-DateRangePicker-calendarHeader button{
-  @apply border-default text-default
+.tremor-DateRangePicker-calendarHeader button {
+  @apply border-default text-default;
 }
 
-.tremor-DateRangePicker-calendarBodyDate .bg-gray-100{
-  @apply bg-subtle
+.tremor-DateRangePicker-calendarBodyDate .bg-gray-100 {
+  @apply bg-subtle;
 }
 
-.tremor-DateRangePicker-calendarBodyDate .bg-gray-500{
-  @apply !bg-brand-default text-inverted
+.tremor-DateRangePicker-calendarBodyDate .bg-gray-500 {
+  @apply !bg-brand-default text-inverted;
 }
 
-
 .tremor-Card-root {
-  @apply p-5 bg-default;
+  @apply bg-default p-5;
 }
 
 .tremor-TableCell-root {
diff --git a/packages/features/settings/layouts/SettingsLayout.tsx b/packages/features/settings/layouts/SettingsLayout.tsx
index 704bdd52d8..e207ad7740 100644
--- a/packages/features/settings/layouts/SettingsLayout.tsx
+++ b/packages/features/settings/layouts/SettingsLayout.tsx
@@ -43,6 +43,7 @@ const tabs: VerticalTabItemProps[] = [
       { name: "calendars", href: "/settings/my-account/calendars" },
       { name: "conferencing", href: "/settings/my-account/conferencing" },
       { name: "appearance", href: "/settings/my-account/appearance" },
+      { name: "out_of_office", href: "/settings/my-account/out-of-office" },
       // TODO
       // { name: "referrals", href: "/settings/my-account/referrals" },
     ],
diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index 5f3d015314..994332ca4b 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -420,6 +420,7 @@ function UserDropdown({ small }: UserDropdownProps) {
     <Dropdown open={menuOpen}>
       <DropdownMenuTrigger asChild onClick={() => setMenuOpen((menuOpen) => !menuOpen)}>
         <button
+          data-testid="user-dropdown-trigger-button"
           className={classNames(
             "hover:bg-emphasis todesktop:!bg-transparent group mx-0 flex w-full cursor-pointer appearance-none items-center rounded-full text-left outline-none transition focus:outline-none focus:ring-0 md:rounded-none lg:rounded",
             small ? "p-2" : "px-2 py-1.5"
@@ -496,10 +497,8 @@ function UserDropdown({ small }: UserDropdownProps) {
                     StartIcon={(props) => (
                       <Moon className={classNames("text-default", props.className)} aria-hidden="true" />
                     )}
-                    onClick={() => {
-                      mutation.mutate({ away: !user.away });
-                    }}>
-                    {user.away ? t("set_as_free") : t("set_as_away")}
+                    href="/settings/my-account/out-of-office">
+                    {t("out_of_office")}
                   </DropdownItem>
                 </DropdownMenuItem>
                 <DropdownMenuSeparator />
@@ -893,7 +892,7 @@ function SideBar({ bannersHeight, user }: SideBarProps) {
         <div className="flex h-full flex-col justify-between py-3 lg:pt-4">
           <header className="todesktop:-mt-3 todesktop:flex-col-reverse todesktop:[-webkit-app-region:drag] items-center justify-between md:hidden lg:flex">
             {orgBranding ? (
-              <Link href="/settings/organizations/profile" className="px-1.5">
+              <Link href="/settings/organizations/profile" className="mt-3 w-full px-1.5">
                 <div className="flex items-center gap-2 font-medium">
                   <Avatar
                     alt={`${orgBranding.name} logo`}
diff --git a/packages/features/webhooks/lib/sendPayload.ts b/packages/features/webhooks/lib/sendPayload.ts
index dc6e76f1d2..cad89ca7c9 100644
--- a/packages/features/webhooks/lib/sendPayload.ts
+++ b/packages/features/webhooks/lib/sendPayload.ts
@@ -3,7 +3,8 @@ import { createHmac } from "crypto";
 import { compile } from "handlebars";
 
 import { getHumanReadableLocationValue } from "@calcom/app-store/locations";
-import type { CalendarEvent } from "@calcom/types/Calendar";
+import { getUTCOffsetByTimezone } from "@calcom/lib/date-fns";
+import type { CalendarEvent, Person } from "@calcom/types/Calendar";
 
 type ContentType = "application/json" | "application/x-www-form-urlencoded";
 
@@ -16,6 +17,18 @@ export type EventTypeInfo = {
   length?: number | null;
 };
 
+export type UTCOffset = {
+  utcOffset?: number | null;
+};
+
+export type WithUTCOffsetType<T> = T & {
+  user?: Person & UTCOffset;
+} & {
+  organizer?: Person & UTCOffset;
+} & {
+  attendees?: (Person & UTCOffset)[];
+};
+
 export type WebhookDataType = CalendarEvent &
   EventTypeInfo & {
     metadata?: { [key: string]: string | number | boolean | null };
@@ -32,14 +45,34 @@ export type WebhookDataType = CalendarEvent &
     paymentId?: number;
   };
 
+function addUTCOffset(
+  data: Omit<WebhookDataType, "createdAt" | "triggerEvent">
+): WithUTCOffsetType<WebhookDataType> {
+  if (data.organizer?.timeZone) {
+    (data.organizer as Person & UTCOffset).utcOffset = getUTCOffsetByTimezone(
+      data.organizer.timeZone,
+      data.startTime
+    );
+  }
+
+  if (data?.attendees?.length) {
+    (data.attendees as (Person & UTCOffset)[]).forEach((attendee) => {
+      attendee.utcOffset = getUTCOffsetByTimezone(attendee.timeZone, data.startTime);
+    });
+  }
+
+  return data as WithUTCOffsetType<WebhookDataType>;
+}
+
 function getZapierPayload(
-  data: CalendarEvent & EventTypeInfo & { status?: string; createdAt: string }
+  data: WithUTCOffsetType<CalendarEvent & EventTypeInfo & { status?: string; createdAt: string }>
 ): string {
-  const attendees = data.attendees.map((attendee) => {
+  const attendees = (data.attendees as (Person & UTCOffset)[]).map((attendee) => {
     return {
       name: attendee.name,
       email: attendee.email,
       timeZone: attendee.timeZone,
+      utcOffset: attendee.utcOffset,
     };
   });
 
@@ -62,6 +95,7 @@ function getZapierPayload(
       name: data.organizer.name,
       email: data.organizer.email,
       timeZone: data.organizer.timeZone,
+      utcOffset: data.organizer.utcOffset,
       locale: data.organizer.locale,
     },
     eventType: {
@@ -109,6 +143,8 @@ const sendPayload = async (
     !template || jsonParse(template) ? "application/json" : "application/x-www-form-urlencoded";
 
   data.description = data.description || data.additionalNotes;
+  data = addUTCOffset(data);
+
   let body;
 
   /* Zapier id is hardcoded in the DB, we send the raw data for this case  */
diff --git a/packages/lib/date-fns/index.ts b/packages/lib/date-fns/index.ts
index 947c731f18..23832b0e20 100644
--- a/packages/lib/date-fns/index.ts
+++ b/packages/lib/date-fns/index.ts
@@ -226,3 +226,15 @@ export const isInDST = (date: Dayjs) => {
 
   return timeZoneWithDST(timeZone) && date.utcOffset() === getUTCOffsetInDST(timeZone);
 };
+
+/**
+ * Get UTC offset of given time zone
+ * @param timeZone Time Zone Name (Ex. America/Mazatlan)
+ * @param date
+ * @returns
+ */
+export function getUTCOffsetByTimezone(timeZone: string, date?: string | Date | Dayjs) {
+  if (!timeZone) return null;
+
+  return dayjs(date).tz(timeZone).utcOffset();
+}
diff --git a/packages/lib/getBrandColours.tsx b/packages/lib/getBrandColours.tsx
index 92159c512b..0fefafa995 100644
--- a/packages/lib/getBrandColours.tsx
+++ b/packages/lib/getBrandColours.tsx
@@ -1,7 +1,9 @@
 import { useBrandColors } from "@calcom/embed-core/embed-iframe";
 
-const BRAND_COLOR = "#292929";
-const DARK_BRAND_COLOR = "#fafafa";
+import { DEFAULT_DARK_BRAND_COLOR, DEFAULT_LIGHT_BRAND_COLOR } from "./constants";
+
+const BRAND_COLOR = DEFAULT_LIGHT_BRAND_COLOR;
+const DARK_BRAND_COLOR = DEFAULT_DARK_BRAND_COLOR;
 
 type Rgb = {
   r: number;
diff --git a/packages/prisma/migrations/20240109041925_add_out_of_office_entry_table/migration.sql b/packages/prisma/migrations/20240109041925_add_out_of_office_entry_table/migration.sql
new file mode 100644
index 0000000000..8fb4f4c926
--- /dev/null
+++ b/packages/prisma/migrations/20240109041925_add_out_of_office_entry_table/migration.sql
@@ -0,0 +1,34 @@
+-- CreateTable
+CREATE TABLE "OutOfOfficeEntry" (
+    "id" SERIAL NOT NULL,
+    "uuid" TEXT NOT NULL,
+    "start" TIMESTAMP(3) NOT NULL,
+    "end" TIMESTAMP(3) NOT NULL,
+    "userId" INTEGER NOT NULL,
+    "toUserId" INTEGER,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "OutOfOfficeEntry_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "OutOfOfficeEntry_uuid_key" ON "OutOfOfficeEntry"("uuid");
+
+-- CreateIndex
+CREATE INDEX "OutOfOfficeEntry_uuid_idx" ON "OutOfOfficeEntry"("uuid");
+
+-- CreateIndex
+CREATE INDEX "OutOfOfficeEntry_userId_idx" ON "OutOfOfficeEntry"("userId");
+
+-- CreateIndex
+CREATE INDEX "OutOfOfficeEntry_toUserId_idx" ON "OutOfOfficeEntry"("toUserId");
+
+-- CreateIndex
+CREATE INDEX "OutOfOfficeEntry_start_end_idx" ON "OutOfOfficeEntry"("start", "end");
+
+-- AddForeignKey
+ALTER TABLE "OutOfOfficeEntry" ADD CONSTRAINT "OutOfOfficeEntry_userId_fkey" FOREIGN KEY ("userId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "OutOfOfficeEntry" ADD CONSTRAINT "OutOfOfficeEntry_toUserId_fkey" FOREIGN KEY ("toUserId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/packages/prisma/migrations/20240111075727_remove_brand_colours_default/migration.sql b/packages/prisma/migrations/20240111075727_remove_brand_colours_default/migration.sql
new file mode 100644
index 0000000000..bc96af772c
--- /dev/null
+++ b/packages/prisma/migrations/20240111075727_remove_brand_colours_default/migration.sql
@@ -0,0 +1,17 @@
+ALTER TABLE "Team" ALTER COLUMN "brandColor" DROP NOT NULL,
+ALTER COLUMN "brandColor" DROP DEFAULT,
+ALTER COLUMN "darkBrandColor" DROP NOT NULL,
+ALTER COLUMN "darkBrandColor" DROP DEFAULT;
+
+-- AlterTable
+ALTER TABLE "users" ALTER COLUMN "brandColor" DROP NOT NULL,
+ALTER COLUMN "brandColor" DROP DEFAULT,
+ALTER COLUMN "darkBrandColor" DROP NOT NULL,
+ALTER COLUMN "darkBrandColor" DROP DEFAULT;
+
+UPDATE "Team" SET "brandColor" = NULL WHERE "brandColor" = '#292929';
+UPDATE "Team" SET "darkBrandColor" = NULL WHERE "darkBrandColor" = '#fafafa';
+
+UPDATE "users" SET "brandColor" = NULL WHERE "brandColor" = '#292929';
+UPDATE "users" SET "darkBrandColor" = NULL WHERE "darkBrandColor" = '#fafafa';
+
diff --git a/packages/prisma/schema.prisma b/packages/prisma/schema.prisma
index abb778499e..41f3a836ef 100644
--- a/packages/prisma/schema.prisma
+++ b/packages/prisma/schema.prisma
@@ -224,8 +224,8 @@ model User {
   availability        Availability[]
   invitedTo           Int?
   webhooks            Webhook[]
-  brandColor          String               @default("#292929")
-  darkBrandColor      String               @default("#fafafa")
+  brandColor          String?
+  darkBrandColor      String?
   // the location where the events will end up
   destinationCalendar DestinationCalendar?
   away                Boolean              @default(false)
@@ -257,6 +257,8 @@ model User {
   organizationId       Int?
   organization         Team?                   @relation("scope", fields: [organizationId], references: [id], onDelete: SetNull)
   accessCodes          AccessCode[]
+  bookingRedirects     OutOfOfficeEntry[]
+  bookingRedirectsTo   OutOfOfficeEntry[]      @relation(name: "toUser")
   // Linking account code for orgs v2
   //linkedByUserId       Int?
   //linkedBy             User?                   @relation("linked_account", fields: [linkedByUserId], references: [id], onDelete: Cascade)
@@ -297,8 +299,8 @@ model Team {
   /// @zod.custom(imports.teamMetadataSchema)
   metadata             Json?
   theme                String?
-  brandColor           String                  @default("#292929")
-  darkBrandColor       String                  @default("#fafafa")
+  brandColor           String?
+  darkBrandColor       String?
   verifiedNumbers      VerifiedNumber[]
   parentId             Int?
   parent               Team?                   @relation("organization", fields: [parentId], references: [id], onDelete: Cascade)
@@ -1053,3 +1055,22 @@ model Avatar {
   @@unique([teamId, userId])
   @@map(name: "avatars")
 }
+
+model OutOfOfficeEntry {
+  id       Int      @id @default(autoincrement())
+  uuid     String   @unique
+  start    DateTime
+  end      DateTime
+  userId   Int
+  user     User     @relation(fields: [userId], references: [id], onDelete: Cascade)
+  toUserId Int?
+  toUser   User?    @relation(name: "toUser", fields: [toUserId], references: [id], onDelete: Cascade)
+
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  @@index([uuid])
+  @@index([userId])
+  @@index([toUserId])
+  @@index([start, end])
+}
diff --git a/packages/trpc/server/routers/loggedInViewer/_router.tsx b/packages/trpc/server/routers/loggedInViewer/_router.tsx
index 1d112aaa42..e5b92352ba 100644
--- a/packages/trpc/server/routers/loggedInViewer/_router.tsx
+++ b/packages/trpc/server/routers/loggedInViewer/_router.tsx
@@ -12,6 +12,7 @@ import { ZGetCalVideoRecordingsInputSchema } from "./getCalVideoRecordings.schem
 import { ZGetDownloadLinkOfCalVideoRecordingsInputSchema } from "./getDownloadLinkOfCalVideoRecordings.schema";
 import { ZIntegrationsInputSchema } from "./integrations.schema";
 import { ZLocationOptionsInputSchema } from "./locationOptions.schema";
+import { ZOutOfOfficeInputSchema, ZOutOfOfficeDelete } from "./outOfOffice.schema";
 import { ZRoutingFormOrderInputSchema } from "./routingFormOrder.schema";
 import { ZSetDestinationCalendarInputSchema } from "./setDestinationCalendar.schema";
 import { ZSubmitFeedbackInputSchema } from "./submitFeedback.schema";
@@ -47,6 +48,9 @@ type AppsRouterHandlerCache = {
   teamsAndUserProfilesQuery?: typeof import("./teamsAndUserProfilesQuery.handler").teamsAndUserProfilesQuery;
   getUserTopBanners?: typeof import("./getUserTopBanners.handler").getUserTopBannersHandler;
   connectAndJoin?: typeof import("./connectAndJoin.handler").Handler;
+  outOfOfficeCreate?: typeof import("./outOfOffice.handler").outOfOfficeCreate;
+  outOfOfficeEntriesList?: typeof import("./outOfOffice.handler").outOfOfficeEntriesList;
+  outOfOfficeEntryDelete?: typeof import("./outOfOffice.handler").outOfOfficeEntryDelete;
 };
 
 const UNSTABLE_HANDLER_CACHE: AppsRouterHandlerCache = {};
@@ -434,7 +438,6 @@ export const loggedInViewerRouter = router({
 
     return UNSTABLE_HANDLER_CACHE.teamsAndUserProfilesQuery({ ctx });
   }),
-
   connectAndJoin: authedProcedure.input(ZConnectAndJoinInputSchema).mutation(async ({ ctx, input }) => {
     if (!UNSTABLE_HANDLER_CACHE.connectAndJoin) {
       UNSTABLE_HANDLER_CACHE.connectAndJoin = (await import("./connectAndJoin.handler")).Handler;
@@ -447,4 +450,44 @@ export const loggedInViewerRouter = router({
 
     return UNSTABLE_HANDLER_CACHE.connectAndJoin({ ctx, input });
   }),
+  outOfOfficeCreate: authedProcedure.input(ZOutOfOfficeInputSchema).mutation(async ({ ctx, input }) => {
+    if (!UNSTABLE_HANDLER_CACHE.outOfOfficeCreate) {
+      UNSTABLE_HANDLER_CACHE.outOfOfficeCreate = (await import("./outOfOffice.handler")).outOfOfficeCreate;
+    }
+
+    // Unreachable code but required for type safety
+    if (!UNSTABLE_HANDLER_CACHE.outOfOfficeCreate) {
+      throw new Error("Failed to load handler");
+    }
+
+    return UNSTABLE_HANDLER_CACHE.outOfOfficeCreate({ ctx, input });
+  }),
+  outOfOfficeEntriesList: authedProcedure.query(async ({ ctx }) => {
+    if (!UNSTABLE_HANDLER_CACHE.outOfOfficeEntriesList) {
+      UNSTABLE_HANDLER_CACHE.outOfOfficeEntriesList = (
+        await import("./outOfOffice.handler")
+      ).outOfOfficeEntriesList;
+    }
+
+    // Unreachable code but required for type safety
+    if (!UNSTABLE_HANDLER_CACHE.outOfOfficeEntriesList) {
+      throw new Error("Failed to load handler");
+    }
+
+    return UNSTABLE_HANDLER_CACHE.outOfOfficeEntriesList({ ctx });
+  }),
+  outOfOfficeEntryDelete: authedProcedure.input(ZOutOfOfficeDelete).mutation(async ({ ctx, input }) => {
+    if (!UNSTABLE_HANDLER_CACHE.outOfOfficeEntryDelete) {
+      UNSTABLE_HANDLER_CACHE.outOfOfficeEntryDelete = (
+        await import("./outOfOffice.handler")
+      ).outOfOfficeEntryDelete;
+    }
+
+    // Unreachable code but required for type safety
+    if (!UNSTABLE_HANDLER_CACHE.outOfOfficeEntryDelete) {
+      throw new Error("Failed to load handler");
+    }
+
+    return UNSTABLE_HANDLER_CACHE.outOfOfficeEntryDelete({ ctx, input });
+  }),
 });
diff --git a/packages/trpc/server/routers/loggedInViewer/outOfOffice.handler.ts b/packages/trpc/server/routers/loggedInViewer/outOfOffice.handler.ts
new file mode 100644
index 0000000000..3e0b83d205
--- /dev/null
+++ b/packages/trpc/server/routers/loggedInViewer/outOfOffice.handler.ts
@@ -0,0 +1,239 @@
+import { v4 as uuidv4 } from "uuid";
+
+import dayjs from "@calcom/dayjs";
+import { sendBookingRedirectNotification } from "@calcom/emails";
+import { getTranslation } from "@calcom/lib/server";
+import prisma from "@calcom/prisma";
+import type { TrpcSessionUser } from "@calcom/trpc/server/trpc";
+
+import { TRPCError } from "@trpc/server";
+
+import type { TOutOfOfficeDelete, TOutOfOfficeInputSchema } from "./outOfOffice.schema";
+
+type TBookingRedirect = {
+  ctx: {
+    user: NonNullable<TrpcSessionUser>;
+  };
+  input: TOutOfOfficeInputSchema;
+};
+
+export const outOfOfficeCreate = async ({ ctx, input }: TBookingRedirect) => {
+  if (!input.startDate || !input.endDate) {
+    throw new TRPCError({ code: "BAD_REQUEST", message: "start_date_and_end_date_required" });
+  }
+
+  const inputStartTime = dayjs(input.startDate).startOf("day");
+  const inputEndTime = dayjs(input.endDate).endOf("day");
+  const offset = dayjs(inputStartTime).utcOffset();
+
+  // If start date is after end date throw error
+  if (inputStartTime.isAfter(inputEndTime)) {
+    throw new TRPCError({ code: "BAD_REQUEST", message: "start_date_must_be_before_end_date" });
+  }
+
+  // If start date is before to today throw error
+  // Since this validation is done using server tz, we need to account for the offset
+  if (
+    inputStartTime.isBefore(
+      dayjs()
+        .startOf("day")
+        .subtract(Math.abs(offset) * 60, "minute")
+    )
+  ) {
+    throw new TRPCError({ code: "BAD_REQUEST", message: "start_date_must_be_in_the_future" });
+  }
+
+  let toUserId;
+
+  if (input.toTeamUserId) {
+    const user = await prisma.user.findUnique({
+      where: {
+        id: input.toTeamUserId,
+      },
+      select: {
+        id: true,
+      },
+    });
+    if (!user) {
+      throw new TRPCError({ code: "NOT_FOUND", message: "user_not_found" });
+    }
+    toUserId = user?.id;
+  }
+
+  // Validate if OOO entry for these dates already exists
+  const outOfOfficeEntry = await prisma.outOfOfficeEntry.findFirst({
+    where: {
+      AND: [
+        { userId: ctx.user.id },
+        {
+          OR: [
+            {
+              start: {
+                lt: inputEndTime.toISOString(), //existing start is less than or equal to input end time
+              },
+              end: {
+                gt: inputStartTime.toISOString(), //existing end is greater than or equal to input start time
+              },
+            },
+            {
+              //existing start is within the new input range
+              start: {
+                gt: inputStartTime.toISOString(),
+                lt: inputEndTime.toISOString(),
+              },
+            },
+            {
+              //existing end is within the new input range
+              end: {
+                gt: inputStartTime.toISOString(),
+                lt: inputEndTime.toISOString(),
+              },
+            },
+          ],
+        },
+      ],
+    },
+  });
+
+  // don't allow overlapping entries
+  if (outOfOfficeEntry) {
+    throw new TRPCError({ code: "CONFLICT", message: "out_of_office_entry_already_exists" });
+  }
+
+  // Prevent infinite redirects but consider time ranges
+  const existingOutOfOfficeEntry = await prisma.outOfOfficeEntry.findFirst({
+    select: {
+      userId: true,
+      toUserId: true,
+    },
+    where: {
+      userId: toUserId,
+      toUserId: ctx.user.id,
+      // Check for time overlap or collision
+      OR: [
+        // Outside of range
+        {
+          AND: [
+            { start: { lte: inputEndTime.toISOString() } },
+            { end: { gte: inputStartTime.toISOString() } },
+          ],
+        },
+        // Inside of range
+        {
+          AND: [
+            { start: { gte: inputStartTime.toISOString() } },
+            { end: { lte: inputEndTime.toISOString() } },
+          ],
+        },
+      ],
+    },
+  });
+
+  // don't allow infinite redirects
+  if (existingOutOfOfficeEntry) {
+    throw new TRPCError({ code: "BAD_REQUEST", message: "booking_redirect_infinite_not_allowed" });
+  }
+
+  const createdRedirect = await prisma.outOfOfficeEntry.create({
+    data: {
+      uuid: uuidv4(),
+      start: dayjs(input.startDate).startOf("day").toISOString(),
+      end: dayjs(input.endDate).endOf("day").toISOString(),
+      userId: ctx.user.id,
+      toUserId: toUserId,
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    },
+  });
+
+  if (toUserId) {
+    // await send email to notify user
+    const userToNotify = await prisma.user.findFirst({
+      where: {
+        id: toUserId,
+      },
+      select: {
+        email: true,
+      },
+    });
+    const t = await getTranslation(ctx.user.locale ?? "en", "common");
+    const formattedStartDate = new Intl.DateTimeFormat("en-US").format(createdRedirect.start);
+    const formattedEndDate = new Intl.DateTimeFormat("en-US").format(createdRedirect.end);
+    if (userToNotify?.email) {
+      await sendBookingRedirectNotification({
+        language: t,
+        fromEmail: ctx.user.email,
+        toEmail: userToNotify.email,
+        toName: ctx.user.username || "",
+        dates: `${formattedStartDate} - ${formattedEndDate}`,
+      });
+    }
+  }
+
+  return {};
+};
+
+type TBookingRedirectDelete = {
+  ctx: {
+    user: NonNullable<TrpcSessionUser>;
+  };
+  input: TOutOfOfficeDelete;
+};
+
+export const outOfOfficeEntryDelete = async ({ ctx, input }: TBookingRedirectDelete) => {
+  if (!input.outOfOfficeUid) {
+    throw new TRPCError({ code: "BAD_REQUEST", message: "out_of_office_id_required" });
+  }
+
+  // Validate outOfOfficeEntry belongs to the user deleting it
+  const outOfOfficeEntry = await prisma.outOfOfficeEntry.findFirst({
+    select: {
+      uuid: true,
+      userId: true,
+    },
+    where: {
+      uuid: input.outOfOfficeUid,
+      userId: ctx.user.id,
+    },
+  });
+
+  if (!outOfOfficeEntry) {
+    throw new TRPCError({ code: "NOT_FOUND", message: "booking_redirect_not_found" });
+  }
+
+  await prisma.outOfOfficeEntry.delete({
+    where: {
+      uuid: input.outOfOfficeUid,
+    },
+  });
+
+  return {};
+};
+
+export const outOfOfficeEntriesList = async ({ ctx }: { ctx: { user: NonNullable<TrpcSessionUser> } }) => {
+  const outOfOfficeEntries = await prisma.outOfOfficeEntry.findMany({
+    where: {
+      userId: ctx.user.id,
+      end: {
+        gte: new Date().toISOString(),
+      },
+    },
+    orderBy: {
+      start: "desc",
+    },
+    select: {
+      id: true,
+      uuid: true,
+      start: true,
+      end: true,
+      toUserId: true,
+      toUser: {
+        select: {
+          username: true,
+        },
+      },
+    },
+  });
+
+  return outOfOfficeEntries;
+};
diff --git a/packages/trpc/server/routers/loggedInViewer/outOfOffice.schema.ts b/packages/trpc/server/routers/loggedInViewer/outOfOffice.schema.ts
new file mode 100644
index 0000000000..793a10cad0
--- /dev/null
+++ b/packages/trpc/server/routers/loggedInViewer/outOfOffice.schema.ts
@@ -0,0 +1,15 @@
+import { z } from "zod";
+
+export const ZOutOfOfficeInputSchema = z.object({
+  startDate: z.string(),
+  endDate: z.string(),
+  toTeamUserId: z.number().nullable(),
+});
+
+export type TOutOfOfficeInputSchema = z.infer<typeof ZOutOfOfficeInputSchema>;
+
+export const ZOutOfOfficeDelete = z.object({
+  outOfOfficeUid: z.string(),
+});
+
+export type TOutOfOfficeDelete = z.infer<typeof ZOutOfOfficeDelete>;
diff --git a/packages/ui/components/top-banner/TopBanner.tsx b/packages/ui/components/top-banner/TopBanner.tsx
index 69646b1441..2675b0748c 100644
--- a/packages/ui/components/top-banner/TopBanner.tsx
+++ b/packages/ui/components/top-banner/TopBanner.tsx
@@ -46,7 +46,7 @@ export function TopBanner(props: TopBannerProps) {
         "flex w-full items-start justify-between gap-8 px-4 py-2 text-center lg:items-center",
         variantClassName[variant]
       )}>
-      <div className="flex flex-1 flex-col items-start justify-center gap-2 p-1 lg:flex-row lg:items-center">
+      <div className="flex flex-1 flex-col items-start justify-center gap-2 px-1 py-0.5 lg:flex-row lg:items-center">
         <p className="text-emphasis flex flex-col items-start justify-center gap-2 text-left font-sans text-sm font-medium leading-4 lg:flex-row lg:items-center">
           {Icon ? <Icon data-testid="variant-default" {...defaultIconProps} /> : defaultIcon}
           {text}
diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx
index 7db5db6658..2ebcdfb042 100644
--- a/packages/ui/index.tsx
+++ b/packages/ui/index.tsx
@@ -77,6 +77,16 @@ export { TopBanner } from "./components/top-banner";
 export type { TopBannerProps } from "./components/top-banner";
 export { AnimatedPopover, MeetingTimeInTimezones } from "./components/popover";
 export { Table } from "./components/table/Table";
+export {
+  Table as TableNew,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./components/table/TableNew";
 export { TableActions, DropdownActions } from "./components/table/TableActions";
 export type { ActionType } from "./components/table/TableActions";
 export { ErrorBoundary } from "./components/errorBoundary";
diff --git a/packages/ui/package.json b/packages/ui/package.json
index caf64f41ca..9ce51f89ee 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -26,7 +26,7 @@
   "dependencies": {
     "@calcom/lib": "*",
     "@calcom/trpc": "*",
-    "@formkit/auto-animate": "^0.8.1",
+    "@formkit/auto-animate": "1.0.0-beta.5",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-popover": "^1.0.2",