diff --git a/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/playground/weekly-calendar/page.tsx b/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/playground/weekly-calendar/page.tsx
index 8e868da77e..121641ebc5 100644
--- a/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/playground/weekly-calendar/page.tsx
+++ b/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/playground/weekly-calendar/page.tsx
@@ -3,7 +3,7 @@
 import { useState } from "react";
 
 import dayjs from "@calcom/dayjs";
-import { Calendar } from "@calcom/web/modules/calendars/weeklyview/components/Calendar";
+import { Calendar } from "@calcom/features/calendars/weeklyview/components/Calendar";
 import type { CalendarEvent } from "@calcom/features/calendars/weeklyview/types/events";
 import type { CalendarComponentProps, Hours } from "@calcom/features/calendars/weeklyview/types/state";
 
diff --git a/apps/web/modules/bookings/components/BookingCalendarView.tsx b/apps/web/modules/bookings/components/BookingCalendarView.tsx
index ae539e4e23..d00b2e9607 100644
--- a/apps/web/modules/bookings/components/BookingCalendarView.tsx
+++ b/apps/web/modules/bookings/components/BookingCalendarView.tsx
@@ -4,7 +4,7 @@ import dayjs from "@calcom/dayjs";
 import { useTimePreferences } from "@calcom/features/bookings/lib";
 import type { CalendarEvent } from "@calcom/features/calendars/weeklyview/types/events";
 import { useGetTheme } from "@calcom/lib/hooks/useTheme";
-import { Calendar } from "@calcom/web/modules/calendars/weeklyview/components/Calendar";
+import { Calendar } from "@calcom/features/calendars/weeklyview/components/Calendar";
 import { useBanners } from "@calcom/web/modules/shell/banners/useBanners";
 import { useEffect, useMemo } from "react";
 import { useBookingDetailsSheetStore } from "../store/bookingDetailsSheetStore";
diff --git a/apps/web/modules/bookings/components/LargeCalendar.tsx b/apps/web/modules/bookings/components/LargeCalendar.tsx
index 744c1f724f..2ad5740deb 100644
--- a/apps/web/modules/bookings/components/LargeCalendar.tsx
+++ b/apps/web/modules/bookings/components/LargeCalendar.tsx
@@ -1,17 +1,19 @@
-import { useMemo, useEffect } from "react";
+import { useEffect, useMemo } from "react";
 
 import dayjs from "@calcom/dayjs";
 import { useBookerStoreContext } from "@calcom/features/bookings/Booker/BookerStoreProvider";
+import { useOverlayCalendarStore } from "@calcom/features/bookings/Booker/components/OverlayCalendar/store";
 import { useAvailableTimeSlots } from "@calcom/features/bookings/Booker/hooks/useAvailableTimeSlots";
 import { useBookerTime } from "@calcom/features/bookings/Booker/hooks/useBookerTime";
+import { getQueryParam } from "@calcom/features/bookings/Booker/utils/query-param";
 import type { BookerEvent } from "@calcom/features/bookings/types";
-import { Calendar } from "@calcom/web/modules/calendars/weeklyview/components/Calendar";
+import { Calendar } from "@calcom/features/calendars/weeklyview/components/Calendar";
 import type { CalendarEvent } from "@calcom/features/calendars/weeklyview/types/events";
 import { localStorage } from "@calcom/lib/webstorage";
 
 import type { useScheduleForEventReturnType } from "@calcom/web/modules/schedules/hooks/useEvent";
-import { getQueryParam } from "@calcom/features/bookings/Booker/utils/query-param";
-import { useOverlayCalendarStore } from "@calcom/features/bookings/Booker/components/OverlayCalendar/store";
+
+import { OutOfOfficeInSlots } from "./OutOfOfficeInSlots";
 
 export const LargeCalendar = ({
   extraDays,
@@ -78,6 +80,7 @@ export const LargeCalendar = ({
         hoverEventDuration={eventDuration}
         hideHeader
         timezone={timezone}
+        renderOutOfOffice={(props) => <OutOfOfficeInSlots {...props} />}
       />
     </div>
   );
diff --git a/apps/web/modules/onboarding/components/onboarding-calendar-browser-view.tsx b/apps/web/modules/onboarding/components/onboarding-calendar-browser-view.tsx
index 906c419246..eecc24a56d 100644
--- a/apps/web/modules/onboarding/components/onboarding-calendar-browser-view.tsx
+++ b/apps/web/modules/onboarding/components/onboarding-calendar-browser-view.tsx
@@ -5,7 +5,7 @@ import { usePathname } from "next/navigation";
 import { useMemo } from "react";
 
 import dayjs from "@calcom/dayjs";
-import { Calendar } from "@calcom/web/modules/calendars/weeklyview/components/Calendar";
+import { Calendar } from "@calcom/features/calendars/weeklyview/components/Calendar";
 import type { CalendarComponentProps, Hours } from "@calcom/features/calendars/weeklyview/types/state";
 import { weekdayDates } from "@calcom/features/calendars/weeklyview/utils";
 import { CURRENT_TIMEZONE } from "@calcom/lib/timezoneConstants";
diff --git a/apps/web/modules/troubleshooter/components/LargeCalendar.tsx b/apps/web/modules/troubleshooter/components/LargeCalendar.tsx
index b5e96f17e4..757f1bdcfc 100644
--- a/apps/web/modules/troubleshooter/components/LargeCalendar.tsx
+++ b/apps/web/modules/troubleshooter/components/LargeCalendar.tsx
@@ -1,13 +1,17 @@
+import { useSession } from "next-auth/react";
+import { useMemo } from "react";
+
 import dayjs from "@calcom/dayjs";
 import { useAvailableTimeSlots } from "@calcom/features/bookings/Booker/hooks/useAvailableTimeSlots";
 import { useTimePreferences } from "@calcom/features/bookings/lib/timePreferences";
-import { useSchedule } from "~/schedules/hooks/useSchedule";
+import { Calendar } from "@calcom/features/calendars/weeklyview/components/Calendar";
 import { useTroubleshooterStore } from "@calcom/features/troubleshooter/store";
 import { BookingStatus } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc/react";
-import { Calendar } from "@calcom/web/modules/calendars/weeklyview/components/Calendar";
-import { useSession } from "next-auth/react";
-import { useMemo } from "react";
+
+import { useSchedule } from "~/schedules/hooks/useSchedule";
+
+import { OutOfOfficeInSlots } from "../../bookings/components/OutOfOfficeInSlots";
 
 export const LargeCalendar = ({ extraDays }: { extraDays: number }) => {
   const { timezone } = useTimePreferences();
@@ -125,6 +129,7 @@ export const LargeCalendar = ({ extraDays }: { extraDays: number }) => {
         hoverEventDuration={30}
         hideHeader
         timezone={timezone}
+        renderOutOfOffice={(props) => <OutOfOfficeInSlots {...props} />}
       />
     </div>
   );
diff --git a/apps/web/modules/calendars/weeklyview/components/Calendar.tsx b/packages/features/calendars/weeklyview/components/Calendar.tsx
similarity index 98%
rename from apps/web/modules/calendars/weeklyview/components/Calendar.tsx
rename to packages/features/calendars/weeklyview/components/Calendar.tsx
index 9e12df836a..925528228e 100644
--- a/apps/web/modules/calendars/weeklyview/components/Calendar.tsx
+++ b/packages/features/calendars/weeklyview/components/Calendar.tsx
@@ -39,6 +39,7 @@ function CalendarInner(props: CalendarComponentProps) {
   const borderColor = useCalendarStore((state) => state.borderColor ?? "default");
   const scrollToCurrentTime = useCalendarStore((state) => state.scrollToCurrentTime ?? true);
   const updateCurrentTimeOnFocus = useCalendarStore((state) => state.updateCurrentTimeOnFocus ?? false);
+  const renderOutOfOffice = useCalendarStore((state) => state.renderOutOfOffice);
 
   const days = useMemo(() => getDaysBetweenDates(startDate, endDate), [startDate, endDate]);
 
@@ -148,6 +149,7 @@ function CalendarInner(props: CalendarComponentProps) {
                             day={days[i]}
                             startHour={startHour}
                             availableSlots={availableTimeslots}
+                            renderOutOfOffice={renderOutOfOffice}
                           />
                         ) : (
                           <>
diff --git a/apps/web/modules/calendars/weeklyview/components/DateValues/index.tsx b/packages/features/calendars/weeklyview/components/DateValues/index.tsx
similarity index 99%
rename from apps/web/modules/calendars/weeklyview/components/DateValues/index.tsx
rename to packages/features/calendars/weeklyview/components/DateValues/index.tsx
index 804cb6d9d9..d88c13b7b5 100644
--- a/apps/web/modules/calendars/weeklyview/components/DateValues/index.tsx
+++ b/packages/features/calendars/weeklyview/components/DateValues/index.tsx
@@ -1,11 +1,9 @@
-import React from "react";
-
 import dayjs from "@calcom/dayjs";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import classNames from "@calcom/ui/classNames";
-
 import { useCalendarStore } from "@calcom/features/calendars/weeklyview/state/store";
 import type { BorderColor } from "@calcom/features/calendars/weeklyview/types/common";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import classNames from "@calcom/ui/classNames";
+import type React from "react";
 
 type Props = {
   showBorder: boolean;
diff --git a/packages/features/calendars/weeklyview/components/DefaultOutOfOfficeSlot.tsx b/packages/features/calendars/weeklyview/components/DefaultOutOfOfficeSlot.tsx
new file mode 100644
index 0000000000..b67755c05b
--- /dev/null
+++ b/packages/features/calendars/weeklyview/components/DefaultOutOfOfficeSlot.tsx
@@ -0,0 +1,67 @@
+import type { OutOfOfficeRenderProps } from "@calcom/features/calendars/weeklyview/types/state";
+import ServerTrans from "@calcom/lib/components/ServerTrans";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import classNames from "@calcom/ui/classNames";
+
+export function DefaultOutOfOfficeSlot(props: OutOfOfficeRenderProps) {
+  const { t } = useLocale();
+  const {
+    fromUser,
+    toUser,
+    emoji = "\u{1F3DD}\uFE0F",
+    reason,
+    borderDashed = true,
+    className,
+    notes,
+    showNotePublicly,
+  } = props;
+
+  const isHoliday = !fromUser && reason;
+
+  if (!isHoliday && !fromUser) return null;
+
+  return (
+    <div className={classNames("relative h-full pb-5", className)}>
+      <div
+        className={classNames(
+          "flex h-full flex-col items-center justify-start rounded-md border bg-white px-4 py-4 font-normal dark:bg-transparent",
+          borderDashed && "border-dashed"
+        )}>
+        <div className="bg-emphasis flex h-14 w-14 flex-col items-center justify-center rounded-full">
+          <span className="m-auto text-center text-lg">{emoji}</span>
+        </div>
+        <div className="stack-y-2 max-h-[300px] w-full overflow-y-auto text-center">
+          {isHoliday ? (
+            <>
+              <p className="mt-2 text-base font-bold">{reason}</p>
+              <p className="text-subtle text-center text-sm">{t("holiday_no_availability")}</p>
+            </>
+          ) : (
+            <>
+              <p className="mt-2 text-base font-bold">
+                {t("ooo_user_is_ooo", { displayName: fromUser?.displayName })}
+              </p>
+
+              {notes && showNotePublicly && (
+                <p className="text-subtle mt-2 max-h-[120px] overflow-y-auto break-words px-2 text-center text-sm italic">
+                  {notes}
+                </p>
+              )}
+
+              {fromUser?.displayName && toUser?.displayName && (
+                <p className="text-center text-sm">
+                  <ServerTrans
+                    t={t}
+                    i18nKey="ooo_slots_returning"
+                    values={{ displayName: toUser.displayName }}
+                    components={[<strong key="username">username</strong>]}
+                  />
+                </p>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/modules/calendars/weeklyview/components/blocking/BlockedList.tsx b/packages/features/calendars/weeklyview/components/blocking/BlockedList.tsx
similarity index 99%
rename from apps/web/modules/calendars/weeklyview/components/blocking/BlockedList.tsx
rename to packages/features/calendars/weeklyview/components/blocking/BlockedList.tsx
index ec0f5ac1ea..5e86dd98b5 100644
--- a/apps/web/modules/calendars/weeklyview/components/blocking/BlockedList.tsx
+++ b/packages/features/calendars/weeklyview/components/blocking/BlockedList.tsx
@@ -1,9 +1,7 @@
+import dayjs from "@calcom/dayjs";
+import { useCalendarStore } from "@calcom/features/calendars/weeklyview/state/store";
 import { useMemo } from "react";
 import { shallow } from "zustand/shallow";
-
-import dayjs from "@calcom/dayjs";
-
-import { useCalendarStore } from "@calcom/features/calendars/weeklyview/state/store";
 import { BlockedTimeCell } from "./BlockedTimeCell";
 
 type Props = {
diff --git a/apps/web/modules/calendars/weeklyview/components/blocking/BlockedTimeCell.tsx b/packages/features/calendars/weeklyview/components/blocking/BlockedTimeCell.tsx
similarity index 100%
rename from apps/web/modules/calendars/weeklyview/components/blocking/BlockedTimeCell.tsx
rename to packages/features/calendars/weeklyview/components/blocking/BlockedTimeCell.tsx
diff --git a/apps/web/modules/calendars/weeklyview/components/currentTime/index.tsx b/packages/features/calendars/weeklyview/components/currentTime/index.tsx
similarity index 100%
rename from apps/web/modules/calendars/weeklyview/components/currentTime/index.tsx
rename to packages/features/calendars/weeklyview/components/currentTime/index.tsx
diff --git a/apps/web/modules/calendars/weeklyview/components/event/Empty.tsx b/packages/features/calendars/weeklyview/components/event/Empty.tsx
similarity index 87%
rename from apps/web/modules/calendars/weeklyview/components/event/Empty.tsx
rename to packages/features/calendars/weeklyview/components/event/Empty.tsx
index 789bfba17e..1cc783d1c6 100644
--- a/apps/web/modules/calendars/weeklyview/components/event/Empty.tsx
+++ b/packages/features/calendars/weeklyview/components/event/Empty.tsx
@@ -1,16 +1,18 @@
-import { useMemo } from "react";
-import { shallow } from "zustand/shallow";
-
 import type { Dayjs } from "@calcom/dayjs";
 import dayjs from "@calcom/dayjs";
 import { useTimePreferences } from "@calcom/features/bookings/lib";
-import classNames from "@calcom/ui/classNames";
-
-import { OutOfOfficeInSlots } from "@calcom/web/modules/bookings/components/OutOfOfficeInSlots";
+import { DefaultOutOfOfficeSlot } from "@calcom/features/calendars/weeklyview/components/DefaultOutOfOfficeSlot";
 import { useCalendarStore } from "@calcom/features/calendars/weeklyview/state/store";
-import type { CalendarAvailableTimeslots } from "@calcom/features/calendars/weeklyview/types/state";
+import type {
+  CalendarAvailableTimeslots,
+  OutOfOfficeRenderProps,
+} from "@calcom/features/calendars/weeklyview/types/state";
 import type { GridCellToDateProps } from "@calcom/features/calendars/weeklyview/utils";
 import { gridCellToDateTime } from "@calcom/features/calendars/weeklyview/utils";
+import classNames from "@calcom/ui/classNames";
+import type { ReactNode } from "react";
+import { useMemo } from "react";
+import { shallow } from "zustand/shallow";
 
 type EmptyCellProps = GridCellToDateProps & {
   isDisabled?: boolean;
@@ -37,9 +39,16 @@ type AvailableCellProps = {
   availableSlots: CalendarAvailableTimeslots;
   day: GridCellToDateProps["day"];
   startHour: GridCellToDateProps["startHour"];
+  renderOutOfOffice?: (props: OutOfOfficeRenderProps) => ReactNode;
 };
 
-export function AvailableCellsForDay({ timezone, availableSlots, day, startHour }: AvailableCellProps) {
+export function AvailableCellsForDay({
+  timezone,
+  availableSlots,
+  day,
+  startHour,
+  renderOutOfOffice,
+}: AvailableCellProps) {
   const date = dayjs(day);
   const dateFormatted = date.format("YYYY-MM-DD");
   const slotsForToday = availableSlots && availableSlots[dateFormatted];
@@ -98,22 +107,23 @@ export function AvailableCellsForDay({ timezone, availableSlots, day, startHour
 
   if (slots.startEndTimeDuration) {
     const { firstSlot, startEndTimeDuration } = slots;
+    const renderOOO = renderOutOfOffice ?? ((p: OutOfOfficeRenderProps) => <DefaultOutOfOfficeSlot {...p} />);
     return (
       <CustomCell
         timeSlot={dayjs(firstSlot?.start).tz(slots.timezone)}
         topOffsetMinutes={slots.slots[0]?.topOffsetMinutes}
         startEndTimeDuration={startEndTimeDuration}>
-        <OutOfOfficeInSlots
-          fromUser={firstSlot?.fromUser}
-          toUser={firstSlot?.toUser}
-          reason={firstSlot?.reason}
-          emoji={firstSlot?.emoji}
-          notes={firstSlot?.notes}
-          showNotePublicly={firstSlot?.showNotePublicly}
-          borderDashed={false}
-          date={dateFormatted}
-          className="pb-0"
-        />
+        {renderOOO({
+          fromUser: firstSlot?.fromUser,
+          toUser: firstSlot?.toUser,
+          reason: firstSlot?.reason,
+          emoji: firstSlot?.emoji,
+          notes: firstSlot?.notes,
+          showNotePublicly: firstSlot?.showNotePublicly,
+          borderDashed: false,
+          date: dateFormatted,
+          className: "pb-0",
+        })}
       </CustomCell>
     );
   }
diff --git a/apps/web/modules/calendars/weeklyview/components/event/Event.tsx b/packages/features/calendars/weeklyview/components/event/Event.tsx
similarity index 100%
rename from apps/web/modules/calendars/weeklyview/components/event/Event.tsx
rename to packages/features/calendars/weeklyview/components/event/Event.tsx
diff --git a/apps/web/modules/calendars/weeklyview/components/event/EventList.tsx b/packages/features/calendars/weeklyview/components/event/EventList.tsx
similarity index 99%
rename from apps/web/modules/calendars/weeklyview/components/event/EventList.tsx
rename to packages/features/calendars/weeklyview/components/event/EventList.tsx
index bdbc0909e2..e173bd2857 100644
--- a/apps/web/modules/calendars/weeklyview/components/event/EventList.tsx
+++ b/packages/features/calendars/weeklyview/components/event/EventList.tsx
@@ -1,11 +1,9 @@
-import { useEffect, useMemo, useState } from "react";
-import { shallow } from "zustand/shallow";
-
 import dayjs from "@calcom/dayjs";
-import classNames from "@calcom/ui/classNames";
-
 import { useCalendarStore } from "@calcom/features/calendars/weeklyview/state/store";
 import { calculateEventLayouts, createLayoutMap } from "@calcom/features/calendars/weeklyview/utils/overlap";
+import classNames from "@calcom/ui/classNames";
+import { useEffect, useMemo, useState } from "react";
+import { shallow } from "zustand/shallow";
 import { Event } from "./Event";
 
 type Props = {
diff --git a/apps/web/modules/calendars/weeklyview/components/event/index.tsx b/packages/features/calendars/weeklyview/components/event/index.tsx
similarity index 100%
rename from apps/web/modules/calendars/weeklyview/components/event/index.tsx
rename to packages/features/calendars/weeklyview/components/event/index.tsx
diff --git a/apps/web/modules/calendars/weeklyview/components/grid/index.tsx b/packages/features/calendars/weeklyview/components/grid/index.tsx
similarity index 100%
rename from apps/web/modules/calendars/weeklyview/components/grid/index.tsx
rename to packages/features/calendars/weeklyview/components/grid/index.tsx
diff --git a/apps/web/modules/calendars/weeklyview/components/heading/SchedulerHeading.tsx b/packages/features/calendars/weeklyview/components/heading/SchedulerHeading.tsx
similarity index 99%
rename from apps/web/modules/calendars/weeklyview/components/heading/SchedulerHeading.tsx
rename to packages/features/calendars/weeklyview/components/heading/SchedulerHeading.tsx
index 8cba239bf7..d2052d5891 100644
--- a/apps/web/modules/calendars/weeklyview/components/heading/SchedulerHeading.tsx
+++ b/packages/features/calendars/weeklyview/components/heading/SchedulerHeading.tsx
@@ -1,9 +1,8 @@
 import dayjs from "@calcom/dayjs";
+import { useCalendarStore } from "@calcom/features/calendars/weeklyview/state/store";
 import { Button } from "@calcom/ui/components/button";
 import { ButtonGroup } from "@calcom/ui/components/buttonGroup";
 
-import { useCalendarStore } from "@calcom/features/calendars/weeklyview/state/store";
-
 export function SchedulerHeading() {
   const { startDate, endDate, handleDateChange } = useCalendarStore((state) => ({
     startDate: dayjs(state.startDate),
diff --git a/apps/web/modules/calendars/weeklyview/components/heading/index.tsx b/packages/features/calendars/weeklyview/components/heading/index.tsx
similarity index 100%
rename from apps/web/modules/calendars/weeklyview/components/heading/index.tsx
rename to packages/features/calendars/weeklyview/components/heading/index.tsx
diff --git a/apps/web/modules/calendars/weeklyview/components/horizontalLines/index.tsx b/packages/features/calendars/weeklyview/components/horizontalLines/index.tsx
similarity index 99%
rename from apps/web/modules/calendars/weeklyview/components/horizontalLines/index.tsx
rename to packages/features/calendars/weeklyview/components/horizontalLines/index.tsx
index 49c66070e7..7a6a2222d6 100644
--- a/apps/web/modules/calendars/weeklyview/components/horizontalLines/index.tsx
+++ b/packages/features/calendars/weeklyview/components/horizontalLines/index.tsx
@@ -1,10 +1,8 @@
-import { useId } from "react";
-
 import type dayjs from "@calcom/dayjs";
 import { useTimePreferences } from "@calcom/features/bookings/lib";
-import classNames from "@calcom/ui/classNames";
-
 import type { BorderColor } from "@calcom/features/calendars/weeklyview/types/common";
+import classNames from "@calcom/ui/classNames";
+import { useId } from "react";
 
 export const HorizontalLines = ({
   hours,
diff --git a/apps/web/modules/calendars/weeklyview/components/index.tsx b/packages/features/calendars/weeklyview/components/index.tsx
similarity index 100%
rename from apps/web/modules/calendars/weeklyview/components/index.tsx
rename to packages/features/calendars/weeklyview/components/index.tsx
diff --git a/apps/web/modules/calendars/weeklyview/components/spinner/Spinner.tsx b/packages/features/calendars/weeklyview/components/spinner/Spinner.tsx
similarity index 100%
rename from apps/web/modules/calendars/weeklyview/components/spinner/Spinner.tsx
rename to packages/features/calendars/weeklyview/components/spinner/Spinner.tsx
diff --git a/apps/web/modules/calendars/weeklyview/components/verticalLines/index.tsx b/packages/features/calendars/weeklyview/components/verticalLines/index.tsx
similarity index 99%
rename from apps/web/modules/calendars/weeklyview/components/verticalLines/index.tsx
rename to packages/features/calendars/weeklyview/components/verticalLines/index.tsx
index 092b18146b..943a2c23b8 100644
--- a/apps/web/modules/calendars/weeklyview/components/verticalLines/index.tsx
+++ b/packages/features/calendars/weeklyview/components/verticalLines/index.tsx
@@ -1,7 +1,6 @@
 import type dayjs from "@calcom/dayjs";
-import classNames from "@calcom/ui/classNames";
-
 import type { BorderColor } from "@calcom/features/calendars/weeklyview/types/common";
+import classNames from "@calcom/ui/classNames";
 
 export const VerticalLines = ({ days, borderColor }: { days: dayjs.Dayjs[]; borderColor: BorderColor }) => {
   const isRTL = () => {
diff --git a/packages/features/calendars/weeklyview/types/state.ts b/packages/features/calendars/weeklyview/types/state.ts
index ee247aa75a..b0494e9f9f 100644
--- a/packages/features/calendars/weeklyview/types/state.ts
+++ b/packages/features/calendars/weeklyview/types/state.ts
@@ -1,8 +1,23 @@
+import type { ReactNode } from "react";
+
 import type { IFromUser, IToUser } from "@calcom/features/availability/lib/getUserAvailability";
 import type { TimeRange } from "@calcom/types/schedule";
+
 import type { BorderColor } from "./common";
 import type { CalendarEvent } from "./events";
 
+export type OutOfOfficeRenderProps = {
+  date: string;
+  fromUser?: IFromUser;
+  toUser?: IToUser;
+  emoji?: string;
+  reason?: string;
+  notes?: string | null;
+  showNotePublicly?: boolean;
+  borderDashed?: boolean;
+  className?: string;
+};
+
 export type View = "month" | "week" | "day";
 export type Hours =
   | 0
@@ -162,6 +177,11 @@ export type CalendarState = {
    * @default false
    */
   updateCurrentTimeOnFocus?: boolean;
+  /**
+   * Render function for out-of-office slots.
+   * Web consumers pass OutOfOfficeInSlots, atoms/platform can pass their own or null.
+   */
+  renderOutOfOffice?: (props: OutOfOfficeRenderProps) => ReactNode;
 };
 
 export type CalendarComponentProps = CalendarPublicActions & CalendarState & { isPending?: boolean };
diff --git a/packages/platform/atoms/calendar-view/CalendarViewComponent.tsx b/packages/platform/atoms/calendar-view/CalendarViewComponent.tsx
index 9047a9fcaf..98b94d807b 100644
--- a/packages/platform/atoms/calendar-view/CalendarViewComponent.tsx
+++ b/packages/platform/atoms/calendar-view/CalendarViewComponent.tsx
@@ -1,6 +1,6 @@
 import { Header } from "@calcom/features/bookings/components/Header";
 import { BookerSection } from "@calcom/features/bookings/components/Section";
-import { LargeCalendar } from "@calcom/web/modules/calendar-view/components/LargeCalendar";
+import { LargeCalendar } from "./components/LargeCalendar";
 import { bookerLayoutOptions } from "@calcom/prisma/zod-utils";
 
 import { AtomsWrapper } from "../src/components/atoms-wrapper";
diff --git a/packages/platform/atoms/calendar-view/EventTypeCalendarViewComponent.tsx b/packages/platform/atoms/calendar-view/EventTypeCalendarViewComponent.tsx
index 7aac1f45ae..b0b93ff1fd 100644
--- a/packages/platform/atoms/calendar-view/EventTypeCalendarViewComponent.tsx
+++ b/packages/platform/atoms/calendar-view/EventTypeCalendarViewComponent.tsx
@@ -10,7 +10,7 @@ import { BookerSection } from "@calcom/features/bookings/components/Section";
 import { useAvailableTimeSlots } from "@calcom/features/bookings/Booker/hooks/useAvailableTimeSlots";
 import { useBookerLayout } from "@calcom/features/bookings/Booker/hooks/useBookerLayout";
 import { useTimePreferences } from "@calcom/features/bookings/lib";
-import { LargeCalendar } from "@calcom/web/modules/calendar-view/components/LargeCalendar";
+import { LargeCalendar } from "./components/LargeCalendar";
 import { getUsernameList } from "@calcom/features/eventtypes/lib/defaultEvents";
 import { useTimesForSchedule } from "@calcom/features/schedules/hooks/useTimesForSchedule";
 
diff --git a/apps/web/modules/calendar-view/components/LargeCalendar.tsx b/packages/platform/atoms/calendar-view/components/LargeCalendar.tsx
similarity index 94%
rename from apps/web/modules/calendar-view/components/LargeCalendar.tsx
rename to packages/platform/atoms/calendar-view/components/LargeCalendar.tsx
index 8616f20158..d67cd502f5 100644
--- a/apps/web/modules/calendar-view/components/LargeCalendar.tsx
+++ b/packages/platform/atoms/calendar-view/components/LargeCalendar.tsx
@@ -4,14 +4,14 @@ import dayjs from "@calcom/dayjs";
 import { useBookerStoreContext } from "@calcom/features/bookings/Booker/BookerStoreProvider";
 import { useBookerTime } from "@calcom/features/bookings/Booker/hooks/useBookerTime";
 import type { BookerEvent } from "@calcom/features/bookings/types";
-import { Calendar } from "@calcom/web/modules/calendars/weeklyview/components/Calendar";
+import { Calendar } from "@calcom/features/calendars/weeklyview/components/Calendar";
 import type { CalendarAvailableTimeslots } from "@calcom/features/calendars/weeklyview/types/state";
 import { localStorage } from "@calcom/lib/webstorage";
 import type { BookingStatus } from "@calcom/prisma/enums";
 
-import { useBookings } from "@calcom/atoms/hooks/bookings/useBookings";
-import { useCalendarsBusyTimes } from "@calcom/atoms/hooks/useCalendarsBusyTimes";
-import { useConnectedCalendars } from "@calcom/atoms/hooks/useConnectedCalendars";
+import { useBookings } from "../../hooks/bookings/useBookings";
+import { useCalendarsBusyTimes } from "../../hooks/useCalendarsBusyTimes";
+import { useConnectedCalendars } from "../../hooks/useConnectedCalendars";
 import { getQueryParam } from "@calcom/features/bookings/Booker/utils/query-param";
 
 export const LargeCalendar = ({