Update package.json

Moved forgot? behind the label (#8421 )
Fix: appKeys handling (#8406 )
2023-04-21 00:11:59 +02:00 · 2023-04-20 22:06:35 +00:00 · 2023-04-20 21:14:50 +00:00 · 2023-04-20 20:56:38 +00:00 · 2023-04-20 20:02:05 +00:00 · 2023-04-20 17:01:21 -03:00
550 changed files with 13597 additions and 5833 deletions
@@ -79,6 +79,9 @@ CALENDSO_ENCRYPTION_KEY=
 # Intercom Config
 NEXT_PUBLIC_INTERCOM_APP_ID=

+# Secret to enable Intercom Identity Verification
+INTERCOM_SECRET=
+
 # Zendesk Config
 NEXT_PUBLIC_ZENDESK_KEY=

@@ -160,9 +163,6 @@ CLOSECOM_API_KEY=
 # Sendgrid internal sync service
 SENDGRID_SYNC_API_KEY=

-# Sentry
-NEXT_PUBLIC_SENTRY_DSN=
-SENTRY_IGNORE_API_RESOLUTION_ERROR=

 # Change your Brand
 NEXT_PUBLIC_APP_NAME="Cal.com"
@@ -177,3 +177,5 @@ CSP_POLICY=

 # Vercel Edge Config
 EDGE_CONFIG=
+
+NEXT_PUBLIC_MINUTES_TO_BOOK=5 # Minutes 
@@ -5,7 +5,8 @@
 # the repo. Unless a later match takes precedence,
 # @global-owner1 and @global-owner2 will be requested for
 # review when someone opens a pull request.
-*           @calcom/reviewers
+# ⬇️ Removed so we can manually trigger checks
+# *           @calcom/reviewers

 .github/    @calcom/core
 .husky/     @calcom/core
@@ -2,6 +2,7 @@ name: Cron - mark stale for inactive issues

 permissions:
  issues: write
+  pull-requests: write

 on:
  # "Scheduled workflows run on the latest commit on the default or base branch."
@@ -15,6 +16,9 @@ jobs:
    steps:
      - uses: actions/stale@v7
        with:
-          days-before-stale: 60
-          include-only-assigned: true
-          days-before-close: -1
+          days-before-issue-stale: 60
+          days-before-issue-close: -1
+          days-before-pr-stale: 14
+          days-before-pr-close: 7
+          stale-pr-message: "This PR is being marked as stale due to inactivity."
+          close-pr-message: "This PR is being closed due to inactivity. Please reopen if work is intended to be continued."
@@ -24,7 +24,7 @@ jobs:
      - name: Analyze bundle
        run: |
          cd apps/web
-          npx -p nextjs-bundle-analysis report
+          npx -p nextjs-bundle-analysis@0.5.0 report

      - name: Upload bundle
        uses: actions/upload-artifact@v2
@@ -76,7 +76,7 @@ jobs:
        id: fc
        with:
          issue-number: ${{ github.event.number }}
-          body-includes: "<!-- __NEXTJS_BUNDLE -->"
+          body-includes: "<!-- __NEXTJS_BUNDLE_@calcom/web -->"

      - name: Create Comment
        uses: peter-evans/create-or-update-comment@v1.4.4
@@ -68,5 +68,3 @@ public/embed

 # Copied app-store images
 public/app-store
-# Sentry
-.sentryclirc
@@ -103,59 +103,6 @@ paths:
      summary: Reset a user's password
      tags:
        - Authentication
-  "/api/availability/{user}?dateFrom={dateFrom}&dateTo={dateTo}":
-    get:
-      description: "Gets the busy times for a particular user, by username."
-      summary: Gets the busy times for a user
-      tags:
-        - Availability
-      responses:
-        "200":
-          description: OK
-          content:
-            application/json:
-              schema:
-                type: array
-                description: ""
-                minItems: 1
-                uniqueItems: true
-                x-examples:
-                  example-1:
-                    - start: "Fri, 03 Sep 2021 17:00:00 GMT"
-                      end: "Fri, 03 Sep 2021 17:40:00 GMT"
-                items:
-                  type: object
-                  properties:
-                    start:
-                      type: string
-                      minLength: 1
-                    end:
-                      type: string
-                      minLength: 1
-                  required:
-                    - start
-                    - end
-        "500":
-          description: Internal Server Error
-    parameters:
-      - schema:
-          type: string
-        name: user
-        in: path
-        required: true
-        description: The username of who you want to check availability for
-      - schema:
-          type: string
-        name: dateFrom
-        in: path
-        required: true
-        description: The timestamp of which time you want to get busy times from
-      - schema:
-          type: string
-        name: dateTo
-        in: path
-        required: true
-        description: The timestamp of which time you want to get busy times until
  /api/availability/calendar:
    get:
      description: Gets the user's selected calendars.
@@ -1,7 +1,7 @@
 import { useState } from "react";

 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { FiX } from "@calcom/ui/components/icon";
+import { X } from "@calcom/ui/components/icon";

 export default function AddToHomescreen() {
  const { t } = useLocale();
@@ -40,7 +40,7 @@ export default function AddToHomescreen() {
                type="button"
                className="-mr-1 flex rounded-md p-2 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-white">
                <span className="sr-only">{t("dismiss")}</span>
-                <FiX className="text-inverted h-6 w-6" aria-hidden="true" />
+                <X className="text-inverted h-6 w-6" aria-hidden="true" />
              </button>
            </div>
          </div>
@@ -6,7 +6,7 @@ import { z } from "zod";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
 import { Badge, ListItemText } from "@calcom/ui";
-import { FiAlertCircle } from "@calcom/ui/components/icon";
+import { AlertCircle } from "@calcom/ui/components/icon";

 type ShouldHighlight = { slug: string; shouldHighlight: true } | { shouldHighlight?: never; slug?: never };

@@ -77,7 +77,7 @@ export default function AppListCard(props: AppListCardProps) {
          <ListItemText component="p">{description}</ListItemText>
          {invalidCredential && (
            <div className="flex gap-x-2 pt-2">
-              <FiAlertCircle className="h-8 w-8 text-red-500 sm:h-4 sm:w-4" />
+              <AlertCircle className="h-8 w-8 text-red-500 sm:h-4 sm:w-4" />
              <ListItemText component="p" className="whitespace-pre-wrap text-red-500">
                {t("invalid_credential")}
              </ListItemText>
@@ -22,7 +22,7 @@ import {
  TextField,
  ColorPicker,
 } from "@calcom/ui";
-import { FiCode, FiTrello, FiSun, FiArrowLeft } from "@calcom/ui/components/icon";
+import { Code, Trello, Sun, ArrowLeft } from "@calcom/ui/components/icon";

 import Select from "@components/ui/form/Select";

@@ -493,7 +493,7 @@ const tabs = [
  {
    name: "HTML",
    href: "embedTabName=embed-code",
-    icon: FiCode,
+    icon: Code,
    type: "code",
    Component: forwardRef<
      HTMLTextAreaElement | HTMLIFrameElement | null,
@@ -546,7 +546,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "HTML", embedType, calLink, previ
  {
    name: "React",
    href: "embedTabName=embed-react",
-    icon: FiCode,
+    icon: Code,
    type: "code",
    Component: forwardRef<
      HTMLTextAreaElement | HTMLIFrameElement | null,
@@ -586,7 +586,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "react", embedType, calLink, prev
  {
    name: "Preview",
    href: "embedTabName=embed-preview",
-    icon: FiTrello,
+    icon: Trello,
    type: "iframe",
    Component: forwardRef<
      HTMLIFrameElement | HTMLTextAreaElement | null,
@@ -622,7 +622,7 @@ Cal("init", {origin:"${WEBAPP_URL}"});
 const ThemeSelectControl = ({ children, ...props }: ControlProps<{ value: Theme; label: string }, false>) => {
  return (
    <components.Control {...props}>
-      <FiSun className="text-subtle ml-2 h-4 w-4" />
+      <Sun className="text-subtle ml-2 h-4 w-4" />
      {children}
    </components.Control>
  );
@@ -830,7 +830,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
              onClick={() => {
                removeQueryParams(router, ["embedType", "embedTabName"]);
              }}>
-              <FiArrowLeft className="mr-4 w-4" />
+              <ArrowLeft className="mr-4 w-4" />
            </button>
            {embed.title}
          </h3>
@@ -1,167 +0,0 @@
-import type { FormEvent } from "react";
-import { useCallback, useEffect, useState } from "react";
-import Cropper from "react-easy-crop";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, Dialog, DialogClose, DialogContent, DialogTrigger } from "@calcom/ui";
-
-import type { Area } from "@lib/cropImage";
-import { getCroppedImg } from "@lib/cropImage";
-import { useFileReader } from "@lib/hooks/useFileReader";
-
-import Slider from "@components/Slider";
-
-type ImageUploaderProps = {
-  id: string;
-  buttonMsg: string;
-  handleAvatarChange: (imageSrc: string) => void;
-  imageSrc?: string;
-  target: string;
-};
-
-interface FileEvent<T = Element> extends FormEvent<T> {
-  target: EventTarget & T;
-}
-
-// This is separate to prevent loading the component until file upload
-function CropContainer({
-  onCropComplete,
-  imageSrc,
-}: {
-  imageSrc: string;
-  onCropComplete: (croppedAreaPixels: Area) => void;
-}) {
-  const { t } = useLocale();
-  const [crop, setCrop] = useState({ x: 0, y: 0 });
-  const [zoom, setZoom] = useState(1);
-
-  const handleZoomSliderChange = (value: number) => {
-    value < 1 ? setZoom(1) : setZoom(value);
-  };
-
-  return (
-    <div className="crop-container h-40 max-h-40 w-40 rounded-full">
-      <div className="relative h-40 w-40 rounded-full">
-        <Cropper
-          image={imageSrc}
-          crop={crop}
-          zoom={zoom}
-          aspect={1}
-          onCropChange={setCrop}
-          onCropComplete={(croppedArea, croppedAreaPixels) => onCropComplete(croppedAreaPixels)}
-          onZoomChange={setZoom}
-        />
-      </div>
-      <Slider
-        value={zoom}
-        min={1}
-        max={3}
-        step={0.1}
-        label={t("slide_zoom_drag_instructions")}
-        changeHandler={handleZoomSliderChange}
-      />
-    </div>
-  );
-}
-
-/** @deprecated Use `packages/ui/v2/core/ImageUploader.tsx` */
-export default function ImageUploader({
-  target,
-  id,
-  buttonMsg,
-  handleAvatarChange,
-  ...props
-}: ImageUploaderProps) {
-  const { t } = useLocale();
-  const [imageSrc, setImageSrc] = useState<string | null>(null);
-  const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null);
-
-  const [{ result }, setFile] = useFileReader({
-    method: "readAsDataURL",
-  });
-
-  useEffect(() => {
-    if (props.imageSrc) setImageSrc(props.imageSrc);
-  }, [props.imageSrc]);
-
-  const onInputFile = (e: FileEvent<HTMLInputElement>) => {
-    if (!e.target.files?.length) {
-      return;
-    }
-    setFile(e.target.files[0]);
-  };
-
-  const showCroppedImage = useCallback(
-    async (croppedAreaPixels: Area | null) => {
-      try {
-        if (!croppedAreaPixels) return;
-        const croppedImage = await getCroppedImg(
-          result as string /* result is always string when using readAsDataUrl */,
-          croppedAreaPixels
-        );
-        setImageSrc(croppedImage);
-        handleAvatarChange(croppedImage);
-      } catch (e) {
-        console.error(e);
-      }
-    },
-    [result, handleAvatarChange]
-  );
-
-  return (
-    <Dialog
-      onOpenChange={
-        (opened) => !opened && setFile(null) // unset file on close
-      }>
-      <DialogTrigger asChild>
-        <div className="flex items-center">
-          <Button color="secondary" type="button" className="py-1 text-xs">
-            {buttonMsg}
-          </Button>
-        </div>
-      </DialogTrigger>
-      <DialogContent>
-        <div className="mb-4 sm:flex sm:items-start">
-          <div className="mt-3 text-center sm:mt-0 sm:text-left">
-            <h3 className="font-cal text-emphasis text-lg leading-6" id="modal-title">
-              {t("upload_target", { target })}
-            </h3>
-          </div>
-        </div>
-        <div className="mb-4">
-          <div className="cropper mt-6 flex flex-col items-center justify-center p-8">
-            {!result && (
-              <div className="bg-muted flex h-20 max-h-20 w-20 items-center justify-start rounded-full">
-                {!imageSrc && (
-                  <p className="text-inverted w-full text-center text-sm sm:text-xs">
-                    {t("no_target", { target })}
-                  </p>
-                )}
-                {imageSrc && (
-                  // eslint-disable-next-line @next/next/no-img-element
-                  <img className="h-20 w-20 rounded-full" src={imageSrc} alt={target} />
-                )}
-              </div>
-            )}
-            {result && <CropContainer imageSrc={result as string} onCropComplete={setCroppedAreaPixels} />}
-            <label className="border-default bg-default hover:bg-mutedover:text-emphasis dark:hover:bg-inverted text-default dark:text-inverted focus:ring-empthasis mt-8 rounded-sm border px-3 py-1 text-xs font-medium leading-4 focus:outline-none focus:ring-2 focus:ring-offset-1 dark:border-gray-800 dark:bg-transparent">
-              <input
-                onInput={onInputFile}
-                type="file"
-                name={id}
-                placeholder={t("upload_image")}
-                className="pointer-events-none absolute mt-4 opacity-0"
-                accept="image/*"
-              />
-              {t("choose_a_file")}
-            </label>
-          </div>
-        </div>
-        <div className="mt-5 gap-x-2 sm:mt-4 sm:flex sm:flex-row-reverse">
-          <DialogClose onClick={() => showCroppedImage(croppedAreaPixels)}>{t("save")}</DialogClose>
-          <DialogClose color="secondary">{t("cancel")}</DialogClose>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}
@@ -1,4 +1,3 @@
-import { AdminRequired } from "components/ui/AdminRequired";
 import { noop } from "lodash";
 import type { LinkProps } from "next/link";
 import Link from "next/link";
@@ -6,6 +5,7 @@ import { useRouter } from "next/router";
 import type { FC, MouseEventHandler } from "react";
 import { Fragment } from "react";

+import { PermissionContainer } from "@calcom/features/auth/PermissionContainer";
 import { useLocale } from "@calcom/lib/hooks/useLocale";

 import classNames from "@lib/classNames";
@@ -60,7 +60,7 @@ const NavTabs: FC<NavTabProps> = ({ tabs, linkProps, ...props }) => {
              }
            : noop;

-          const Component = tab.adminRequired ? AdminRequired : Fragment;
+          const Component = tab.adminRequired ? PermissionContainer : Fragment;
          const className = tab.className || "";
          return (
            <Component key={tab.name}>
@@ -0,0 +1,82 @@
+import { DefaultSeo } from "next-seo";
+import { Inter } from "next/font/google";
+import localFont from "next/font/local";
+import Script from "next/script";
+
+import "@calcom/embed-core/src/embed-iframe";
+import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
+
+import type { AppProps } from "@lib/app-providers";
+import AppProviders from "@lib/app-providers";
+import { seoConfig } from "@lib/config/next-seo.config";
+
+import I18nLanguageHandler from "@components/I18nLanguageHandler";
+
+export interface CalPageWrapper {
+  (props?: any): JSX.Element;
+  PageWrapper?: AppProps["Component"]["PageWrapper"];
+}
+
+const interFont = Inter({ subsets: ["latin"], variable: "--font-inter", preload: true, display: "swap" });
+const calFont = localFont({
+  src: "../fonts/CalSans-SemiBold.woff2",
+  variable: "--font-cal",
+  preload: true,
+  display: "swap",
+});
+
+function PageWrapper(props: AppProps) {
+  const { Component, pageProps, err, router } = props;
+  let pageStatus = "200";
+
+  if (router.pathname === "/404") {
+    pageStatus = "404";
+  } else if (router.pathname === "/500") {
+    pageStatus = "500";
+  }
+
+  // On client side don't let nonce creep into DOM
+  // It also avoids hydration warning that says that Client has the nonce value but server has "" because browser removes nonce attributes before DOM is built
+  // See https://github.com/kentcdodds/nonce-hydration-issues
+  // Set "" only if server had it set otherwise keep it undefined because server has to match with client to avoid hydration error
+  const nonce = typeof window !== "undefined" ? (pageProps.nonce ? "" : undefined) : pageProps.nonce;
+  const providerProps = {
+    ...props,
+    pageProps: {
+      ...props.pageProps,
+      nonce,
+    },
+  };
+  // Use the layout defined at the page level, if available
+  const getLayout = Component.getLayout ?? ((page) => page);
+  return (
+    <AppProviders {...providerProps}>
+      <DefaultSeo {...seoConfig.defaultNextSeo} />
+      <I18nLanguageHandler />
+      <Script
+        nonce={nonce}
+        id="page-status"
+        dangerouslySetInnerHTML={{ __html: `window.CalComPageStatus = '${pageStatus}'` }}
+      />
+      <style jsx global>{`
+        :root {
+          --font-inter: ${interFont.style.fontFamily};
+          --font-cal: ${calFont.style.fontFamily};
+        }
+      `}</style>
+
+      {getLayout(
+        Component.requiresLicense ? (
+          <LicenseRequired>
+            <Component {...pageProps} err={err} />
+          </LicenseRequired>
+        ) : (
+          <Component {...pageProps} err={err} />
+        ),
+        router
+      )}
+    </AppProviders>
+  );
+}
+
+export default PageWrapper;
@@ -3,7 +3,7 @@ import React from "react";

 import Shell from "@calcom/features/shell/Shell";
 import { ErrorBoundary } from "@calcom/ui";
-import { FiCreditCard, FiKey, FiLock, FiTerminal, FiUser, FiUsers } from "@calcom/ui/components/icon";
+import { CreditCard, Key, Lock, Terminal, User, Users } from "@calcom/ui/components/icon";

 import NavTabs from "./NavTabs";

@@ -11,32 +11,32 @@ const tabs = [
  {
    name: "profile",
    href: "/settings/my-account/profile",
-    icon: FiUser,
+    icon: User,
  },
  {
    name: "teams",
    href: "/settings/teams",
-    icon: FiUsers,
+    icon: Users,
  },
  {
    name: "security",
    href: "/settings/security",
-    icon: FiKey,
+    icon: Key,
  },
  {
    name: "developer",
    href: "/settings/developer",
-    icon: FiTerminal,
+    icon: Terminal,
  },
  {
    name: "billing",
    href: "/settings/billing",
-    icon: FiCreditCard,
+    icon: CreditCard,
  },
  {
    name: "admin",
    href: "/settings/admin",
-    icon: FiLock,
+    icon: Lock,
    adminRequired: true,
  },
 ];
@@ -46,7 +46,7 @@ export default function SettingsShell({
  ...rest
 }: { children: React.ReactNode } & ComponentProps<typeof Shell>) {
  return (
-    <Shell {...rest}>
+    <Shell {...rest} hideHeadingOnMobile>
      <div className="sm:mx-auto">
        <NavTabs tabs={tabs} />
      </div>
@@ -1,27 +0,0 @@
-import * as SliderPrimitive from "@radix-ui/react-slider";
-import React from "react";
-
-const Slider = ({
-  value,
-  label,
-  changeHandler,
-  ...props
-}: Omit<SliderPrimitive.SliderProps, "value"> & {
-  value: number;
-  label: string;
-  changeHandler: (value: number) => void;
-}) => (
-  <SliderPrimitive.Root
-    className="slider mt-2"
-    value={[value]}
-    aria-label={label}
-    onValueChange={(value: number[]) => changeHandler(value[0] ?? value)}
-    {...props}>
-    <SliderPrimitive.Track className="slider-track">
-      <SliderPrimitive.Range className="slider-range" />
-    </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="slider-thumb" />
-  </SliderPrimitive.Root>
-);
-
-export default Slider;
@@ -9,7 +9,7 @@ import {
  DropdownMenuItem,
  DropdownItem,
 } from "@calcom/ui";
-import { FiPlus } from "@calcom/ui/components/icon";
+import { Plus } from "@calcom/ui/components/icon";

 import { QueryCell } from "@lib/QueryCell";

@@ -40,7 +40,7 @@ const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorPro
        return (
          <Dropdown modal={false}>
            <DropdownMenuTrigger asChild>
-              <Button StartIcon={FiPlus} color="secondary" {...(isLoading && { loading: isLoading })}>
+              <Button StartIcon={Plus} color="secondary" {...(isLoading && { loading: isLoading })}>
                {t("add")}
              </Button>
            </DropdownMenuTrigger>
@@ -48,7 +48,7 @@ const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorPro
              {options.map((data) => (
                <DropdownMenuItem key={data.slug} className="focus:outline-none">
                  {data.slug === "add-new" ? (
-                    <DropdownItem StartIcon={FiPlus} color="minimal" href="/apps/categories/calendar">
+                    <DropdownItem StartIcon={Plus} color="minimal" href="/apps/categories/calendar">
                      {t("install_new_calendar_app")}
                    </DropdownItem>
                  ) : (
@@ -6,7 +6,7 @@ import React, { useState } from "react";
 import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
 import { InstallAppButton, AppDependencyComponent } from "@calcom/app-store/components";
 import DisconnectIntegration from "@calcom/features/apps/components/DisconnectIntegration";
-import LicenseRequired from "@calcom/features/ee/common/components/v2/LicenseRequired";
+import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
 import Shell from "@calcom/features/shell/Shell";
 import classNames from "@calcom/lib/classNames";
 import { APP_NAME, COMPANY_NAME, SUPPORT_MAIL_ADDRESS } from "@calcom/lib/constants";
@@ -14,16 +14,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import type { App as AppType } from "@calcom/types/App";
 import { Button, showToast, SkeletonButton, SkeletonText, HeadSeo, Badge } from "@calcom/ui";
-import {
-  FiBookOpen,
-  FiCheck,
-  FiExternalLink,
-  FiFile,
-  FiFlag,
-  FiMail,
-  FiPlus,
-  FiShield,
-} from "@calcom/ui/components/icon";
+import { BookOpen, Check, ExternalLink, File, Flag, Mail, Plus, Shield } from "@calcom/ui/components/icon";

 /* These app slugs all require Google Cal to be installed */

@@ -50,7 +41,7 @@ const Component = ({
  isTemplate,
  dependencies,
 }: Parameters<typeof App>[0]) => {
-  const { t } = useLocale();
+  const { t, i18n } = useLocale();
  const hasDescriptionItems = descriptionItems && descriptionItems.length > 0;
  const router = useRouter();

@@ -153,7 +144,7 @@ const Component = ({
          isGlobal ||
          (existingCredentials.length > 0 && allowedMultipleInstalls ? (
            <div className="flex space-x-3">
-              <Button StartIcon={FiCheck} color="secondary" disabled>
+              <Button StartIcon={Check} color="secondary" disabled>
                {existingCredentials.length > 0
                  ? t("active_install", { count: existingCredentials.length })
                  : t("default")}
@@ -175,7 +166,7 @@ const Component = ({
                    }
                    return (
                      <Button
-                        StartIcon={FiPlus}
+                        StartIcon={Plus}
                        {...props}
                        // @TODO: Overriding color and size prevent us from
                        // having to duplicate InstallAppButton for now.
@@ -247,7 +238,7 @@ const Component = ({
          </span>
        )}

-        <div className="prose-sm prose prose-headings:text-emphasis prose-code:text-default prose-strong:text-default text-default mt-8">
+        <div className="prose-sm prose prose-a:text-default prose-headings:text-emphasis prose-code:text-default prose-strong:text-default text-default mt-8">
          {body}
        </div>
        <h4 className="text-emphasis mt-8 font-semibold ">{t("pricing")}</h4>
@@ -256,7 +247,7 @@ const Component = ({
            t("free_to_use_apps")
          ) : (
            <>
-              {Intl.NumberFormat("en-US", {
+              {Intl.NumberFormat(i18n.language, {
                style: "currency",
                currency: "USD",
                useGrouping: false,
@@ -275,7 +266,7 @@ const Component = ({
                rel="noreferrer"
                className="text-emphasis text-sm font-normal no-underline hover:underline"
                href={docs}>
-                <FiBookOpen className="text-subtle mr-1 -mt-1 inline h-4 w-4" />
+                <BookOpen className="text-subtle mr-1 -mt-1 inline h-4 w-4" />
                {t("documentation")}
              </a>
            </li>
@@ -287,7 +278,7 @@ const Component = ({
                rel="noreferrer"
                className="text-emphasis font-normal no-underline hover:underline"
                href={website}>
-                <FiExternalLink className="text-subtle mr-1 -mt-px inline h-4 w-4" />
+                <ExternalLink className="text-subtle mr-1 -mt-px inline h-4 w-4" />
                {website.replace("https://", "")}
              </a>
            </li>
@@ -299,7 +290,7 @@ const Component = ({
                rel="noreferrer"
                className="text-emphasis font-normal no-underline hover:underline"
                href={"mailto:" + email}>
-                <FiMail className="text-subtle mr-1 -mt-px inline h-4 w-4" />
+                <Mail className="text-subtle mr-1 -mt-px inline h-4 w-4" />

                {email}
              </a>
@@ -312,7 +303,7 @@ const Component = ({
                rel="noreferrer"
                className="text-emphasis font-normal no-underline hover:underline"
                href={tos}>
-                <FiFile className="text-subtle mr-1 -mt-px inline h-4 w-4" />
+                <File className="text-subtle mr-1 -mt-px inline h-4 w-4" />
                {t("terms_of_service")}
              </a>
            </li>
@@ -324,7 +315,7 @@ const Component = ({
                rel="noreferrer"
                className="text-emphasis font-normal no-underline hover:underline"
                href={privacy}>
-                <FiShield className="text-subtle mr-1 -mt-px inline h-4 w-4" />
+                <Shield className="text-subtle mr-1 -mt-px inline h-4 w-4" />
                {t("privacy_policy")}
              </a>
            </li>
@@ -335,7 +326,7 @@ const Component = ({
          {t("every_app_published", { appName: APP_NAME, companyName: COMPANY_NAME })}
        </span>
        <a className="mt-2 block text-xs text-red-500" href={`mailto:${SUPPORT_MAIL_ADDRESS}`}>
-          <FiFlag className="inline h-3 w-3" /> {t("report_app")}
+          <Flag className="inline h-3 w-3" /> {t("report_app")}
        </a>
      </div>
    </div>
@@ -375,7 +366,7 @@ export default function App(props: {
  dependencies?: string[];
 }) {
  return (
-    <Shell smallHeading isPublic heading={<ShellHeading />} backPath="/apps" withoutSeo>
+    <Shell smallHeading isPublic hideHeadingOnMobile heading={<ShellHeading />} backPath="/apps" withoutSeo>
      <HeadSeo
        title={props.name}
        description={props.description}
@@ -17,7 +17,7 @@ import {
  Switch,
  ShellSubHeading,
 } from "@calcom/ui";
-import { FiArrowLeft, FiCalendar, FiPlus } from "@calcom/ui/components/icon";
+import { ArrowLeft, Calendar, Plus } from "@calcom/ui/components/icon";

 import { QueryCell } from "@lib/QueryCell";

@@ -100,7 +100,7 @@ function CalendarSwitch(props: {
      />
      {!!props.destination && (
        <span className="bg-subtle text-default ml-8 inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm font-normal sm:ml-4">
-          <FiArrowLeft className="h-4 w-4" />
+          <ArrowLeft className="h-4 w-4" />
          {t("adding_events_to")}
        </span>
      )}
@@ -264,7 +264,7 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
            {!!data.connectedCalendars.length || !!installedCalendars.data?.items.length ? (
              <>
                {heading && (
-                  <div className="flex flex-col gap-6 rounded-md border p-7">
+                  <div className="border-default flex flex-col gap-6 rounded-md border p-7">
                    <ShellSubHeading
                      title={t("calendar")}
                      subtitle={t("installed_app_calendar_description")}
@@ -282,8 +282,8 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
                    <div className="bg-muted border-subtle flex justify-between rounded-md border p-4">
                      <div className="flex w-full flex-col items-start gap-4 md:flex-row md:items-center">
                        <div className="bg-default border-subtle relative rounded-md border p-1.5">
-                          <FiCalendar className="text-default h-8 w-8" strokeWidth="1" />
-                          <FiPlus
+                          <Calendar className="text-default h-8 w-8" strokeWidth="1" />
+                          <Plus
                            className="text-emphasis absolute left-4 top-1/2 ml-0.5 mt-[1px] h-2 w-2"
                            strokeWidth="4"
                          />
@@ -322,7 +322,7 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
              </>
            ) : (
              <EmptyScreen
-                Icon={FiCalendar}
+                Icon={Calendar}
                headline={t("no_category_apps", {
                  category: t("calendar").toLowerCase(),
                })}
@@ -6,7 +6,7 @@ import React from "react";
 import Shell from "@calcom/features/shell/Shell";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { EmptyScreen } from "@calcom/ui";
-import { FiAlertCircle } from "@calcom/ui/components/icon";
+import { AlertCircle } from "@calcom/ui/components/icon";

 type AppsLayoutProps = {
  children: React.ReactNode;
@@ -22,12 +22,12 @@ export default function AppsLayout({ children, actions, emptyStore, ...rest }: A
  if (session.status === "loading") return <></>;

  return (
-    <Shell {...rest} actions={actions?.("block")}>
+    <Shell {...rest} actions={actions?.("block")} hideHeadingOnMobile>
      <div className="flex flex-col xl:flex-row">
        <main className="w-full">
          {emptyStore ? (
            <EmptyScreen
-              Icon={FiAlertCircle}
+              Icon={AlertCircle}
              headline={t("no_apps")}
              description={session.data?.user.role === "ADMIN" ? "You can enable apps in the settings" : ""}
              buttonText={session.data?.user.role === "ADMIN" ? t("apps_settings") : ""}
@@ -6,38 +6,38 @@ import type { InstalledAppVariants } from "@calcom/app-store/utils";
 import Shell from "@calcom/features/shell/Shell";
 import { trpc } from "@calcom/trpc/react";
 import type { HorizontalTabItemProps, VerticalTabItemProps } from "@calcom/ui";
-import { FiBarChart, FiCalendar, FiCreditCard, FiGrid, FiShare2, FiVideo } from "@calcom/ui/components/icon";
+import { BarChart, Calendar, CreditCard, Grid, Share2, Video } from "@calcom/ui/components/icon";

 const tabs: (VerticalTabItemProps | HorizontalTabItemProps)[] = [
  {
    name: "calendar",
    href: "/apps/installed/calendar",
-    icon: FiCalendar,
+    icon: Calendar,
  },
  {
    name: "conferencing",
    href: "/apps/installed/conferencing",
-    icon: FiVideo,
+    icon: Video,
  },
  {
    name: "payment",
    href: "/apps/installed/payment",
-    icon: FiCreditCard,
+    icon: CreditCard,
  },
  {
    name: "automation",
    href: "/apps/installed/automation",
-    icon: FiShare2,
+    icon: Share2,
  },
  {
    name: "analytics",
    href: "/apps/installed/analytics",
-    icon: FiBarChart,
+    icon: BarChart,
  },
  {
    name: "other",
    href: "/apps/installed/other",
-    icon: FiGrid,
+    icon: Grid,
  },
 ];

@@ -57,7 +57,7 @@ export default function InstalledAppsLayout({
  }

  return (
-    <Shell {...rest}>
+    <Shell {...rest} hideHeadingOnMobile>
      <AppCategoryNavigation baseURL="/apps/installed" containerClassname="min-w-0 w-full">
        {children}
      </AppCategoryNavigation>
@@ -1,7 +1,7 @@
 import React from "react";

 import { Button, SkeletonText } from "@calcom/ui";
-import { FiMoreHorizontal } from "@calcom/ui/components/icon";
+import { MoreHorizontal } from "@calcom/ui/components/icon";

 import classNames from "@lib/classNames";

@@ -31,7 +31,7 @@ function SkeletonItem() {
          type="button"
          variant="icon"
          color="secondary"
-          StartIcon={FiMoreHorizontal}
+          StartIcon={MoreHorizontal}
          disabled
        />
      </div>
@@ -4,7 +4,7 @@ import { getEventLocationType, locationKeyToString } from "@calcom/app-store/loc
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Tooltip } from "@calcom/ui";
-import { FiLink } from "@calcom/ui/components/icon";
+import { Link } from "@calcom/ui/components/icon";

 import type { Props } from "./pages/AvailabilityPage";

@@ -41,7 +41,7 @@ export function AvailableEventLocations({ locations }: { locations: Props["event
    return (
      <div key={`${location.type}-${index}`} className="flex flex-row items-center text-sm font-medium">
        {eventLocationType.iconUrl === "/link.svg" ? (
-          <FiLink className="text-default min-h-4 min-w-4 ml-[2px] opacity-70 ltr:mr-[10px] rtl:ml-[10px] " />
+          <Link className="text-default ml-[2px] h-4 w-4  ltr:mr-[10px] rtl:ml-[10px] " />
        ) : (
          <img
            src={eventLocationType.iconUrl}
@@ -10,6 +10,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useMediaQuery from "@calcom/lib/hooks/useMediaQuery";
 import { TimeFormat } from "@calcom/lib/timeFormat";
 import { nameOfDay } from "@calcom/lib/weekday";
+import { trpc } from "@calcom/trpc/react";
 import type { Slot } from "@calcom/trpc/server/routers/viewer/slots";
 import { SkeletonContainer, SkeletonText, ToggleGroup } from "@calcom/ui";

@@ -28,6 +29,7 @@ type AvailableTimesProps = {
  slots?: Slot[];
  isLoading: boolean;
  ethSignature?: string;
+  duration: number;
 };

 const AvailableTimes: FC<AvailableTimesProps> = ({
@@ -42,7 +44,9 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
  seatsPerTimeSlot,
  bookingAttendees,
  ethSignature,
+  duration,
 }) => {
+  const reserveSlotMutation = trpc.viewer.public.slots.reserveSlot.useMutation();
  const [slotPickerRef] = useAutoAnimate<HTMLDivElement>();
  const { t, i18n } = useLocale();
  const router = useRouter();
@@ -63,6 +67,14 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
    [isMobile]
  );

+  const reserveSlot = (slot: Slot) => {
+    reserveSlotMutation.mutate({
+      slotUtcStartDate: slot.time,
+      eventTypeId,
+      slotUtcEndDate: dayjs(slot.time).utc().add(duration, "minutes").format(),
+    });
+  };
+
  return (
    <div ref={slotPickerRef}>
      {!!date ? (
@@ -150,6 +162,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
                          " bg-default dark:bg-muted border-default hover:bg-subtle hover:border-brand-default text-emphasis mb-2 block rounded-md border py-2 text-sm font-medium",
                          brand === "#fff" || brand === "#ffffff" ? "" : ""
                        )}
+                        onClick={() => reserveSlot(slot)}
                        data-testid="time">
                        {dayjs(slot.time).tz(timeZone()).format(timeFormat)}
                        {!!seatsPerTimeSlot && (
@@ -6,7 +6,7 @@ import dayjs from "@calcom/dayjs";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Badge } from "@calcom/ui";
-import { FiCheckSquare, FiClock } from "@calcom/ui/components/icon";
+import { CheckSquare, Clock } from "@calcom/ui/components/icon";

 import useRouterQuery from "@lib/hooks/useRouterQuery";

@@ -103,7 +103,7 @@ const BookingDescription: FC<Props> = (props) => {
        {requiresConfirmation && (
          <div className={classNames("items-top flex", isBookingPage && "text-default text-sm font-medium")}>
            <div>
-              <FiCheckSquare className="ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] " />
+              <CheckSquare className="ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] " />
            </div>
            {requiresConfirmationText}
          </div>
@@ -117,9 +117,9 @@ const BookingDescription: FC<Props> = (props) => {
            isBookingPage && "text-default",
            !eventType.metadata?.multipleDuration && "items-center"
          )}>
-          <FiClock
+          <Clock
            className={classNames(
-              "min-h-4 min-w-4 ml-[2px] inline-block ltr:mr-[10px] rtl:ml-[10px]",
+              "ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]",
              isBookingPage && "mt-[2px]"
            )}
          />
@@ -132,9 +132,9 @@ const BookingDescription: FC<Props> = (props) => {
                      variant="gray"
                      className={classNames(
                        duration === dur.toString()
-                          ? "bg-darkgray-200 text-darkgray-900 dark:bg-darkmodebrand dark:!text-darkmodebrandcontrast"
-                          : "hover:bg-darkgray-200 dark:hover:bg-darkmodebrand hover:text-darkgray-900 dark:hover:text-darkmodebrandcontrast dark:bg-darkgray-200 bg-emphasis text-emphasis dark:text-inverted",
-                        "cursor-pointer"
+                          ? "bg-emphasis border-emphasis text-emphasis "
+                          : "bg-subtle text-default border-transparent ",
+                        "cursor-pointer border"
                      )}
                      onClick={() => {
                        setDuration(dur);
@@ -1,22 +1,36 @@
-import { FormattedNumber, IntlProvider } from "react-intl";
+import { i18n } from "next-i18next";
+import type { TFunction } from "next-i18next";

 import getPaymentAppData from "@calcom/lib/getPaymentAppData";
-import { FiCreditCard } from "@calcom/ui/components/icon";
+import { CreditCard } from "@calcom/ui/components/icon";

-const BookingDescriptionPayment = (props: { eventType: Parameters<typeof getPaymentAppData>[0] }) => {
+const BookingDescriptionPayment = (props: {
+  eventType: Parameters<typeof getPaymentAppData>[0];
+  t: TFunction;
+  i18n: typeof i18n;
+}) => {
  const paymentAppData = getPaymentAppData(props.eventType);
  if (!paymentAppData || paymentAppData.price <= 0) return null;

+  const params = {
+    amount: paymentAppData.price / 100.0,
+    formatParams: { amount: { currency: paymentAppData.currency } },
+  };
+
  return (
    <p className="text-bookinglight -ml-2 px-2 text-sm ">
-      <FiCreditCard className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
-      <IntlProvider locale="en">
-        <FormattedNumber
-          value={paymentAppData.price / 100.0}
-          style="currency"
-          currency={paymentAppData.currency?.toUpperCase()}
-        />
-      </IntlProvider>
+      <CreditCard className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
+      {paymentAppData.paymentOption === "HOLD" ? (
+        <>{props.t("no_show_fee_amount", params)}</>
+      ) : (
+        <>
+          {/* If undefined this will default to the browser locale */}
+          {new Intl.NumberFormat(i18n?.language, {
+            style: "currency",
+            currency: paymentAppData.currency,
+          }).format(paymentAppData.price / 100)}
+        </>
+      )}
    </p>
  );
 };
@@ -28,10 +28,11 @@ import {
  TableActions,
  TextAreaField,
 } from "@calcom/ui";
-import { FiCheck, FiClock, FiMapPin, FiRefreshCcw, FiSend, FiSlash, FiX } from "@calcom/ui/components/icon";
+import { Check, Clock, MapPin, RefreshCcw, Send, Slash, X, CreditCard } from "@calcom/ui/components/icon";

 import useMeQuery from "@lib/hooks/useMeQuery";

+import { ChargeCardDialog } from "@components/dialog/ChargeCardDialog";
 import { EditLocationDialog } from "@components/dialog/EditLocationDialog";
 import { RescheduleDialog } from "@components/dialog/RescheduleDialog";

@@ -56,7 +57,9 @@ function BookingListItem(booking: BookingItemProps) {
  const router = useRouter();
  const [rejectionReason, setRejectionReason] = useState<string>("");
  const [rejectionDialogIsOpen, setRejectionDialogIsOpen] = useState(false);
+  const [chargeCardDialogIsOpen, setChargeCardDialogIsOpen] = useState(false);
  const [viewRecordingsDialogIsOpen, setViewRecordingsDialogIsOpen] = useState<boolean>(false);
+  const cardCharged = booking?.payment[0]?.success;
  const mutation = trpc.viewer.bookings.confirm.useMutation({
    onSuccess: (data) => {
      if (data?.status === BookingStatus.REJECTED) {
@@ -113,19 +116,23 @@ function BookingListItem(booking: BookingItemProps) {
      onClick: () => {
        setRejectionDialogIsOpen(true);
      },
-      icon: FiSlash,
+      icon: Slash,
      disabled: mutation.isLoading,
    },
-    {
-      id: "confirm",
-      label: (isTabRecurring || isTabUnconfirmed) && isRecurring ? t("confirm_all") : t("confirm"),
-      onClick: () => {
-        bookingConfirm(true);
-      },
-      icon: FiCheck,
-      disabled: mutation.isLoading,
-      color: "primary",
-    },
+    // For bookings with payment, only confirm if the booking is paid for
+    ...((isPending && !booking?.eventType?.price) || (!!booking?.eventType?.price && booking.paid)
+      ? [
+          {
+            id: "confirm",
+            label: (isTabRecurring || isTabUnconfirmed) && isRecurring ? t("confirm_all") : t("confirm"),
+            onClick: () => {
+              bookingConfirm(true);
+            },
+            icon: Check,
+            disabled: mutation.isLoading,
+          },
+        ]
+      : []),
  ];

  const showRecordingActions: ActionType[] = [
@@ -149,7 +156,7 @@ function BookingListItem(booking: BookingItemProps) {
        isTabRecurring && isRecurring ? "&allRemainingBookings=true" : ""
      }${booking.seatsReferences.length ? `&seatReferenceUid=${getSeatReferenceUid()}` : ""}
      `,
-      icon: FiX,
+      icon: X,
    },
    {
      id: "edit_booking",
@@ -157,7 +164,7 @@ function BookingListItem(booking: BookingItemProps) {
      actions: [
        {
          id: "reschedule",
-          icon: FiClock,
+          icon: Clock,
          label: t("reschedule_booking"),
          href: `/reschedule/${booking.uid}${
            booking.seatsReferences.length ? `?seatReferenceUid=${getSeatReferenceUid()}` : ""
@@ -165,7 +172,7 @@ function BookingListItem(booking: BookingItemProps) {
        },
        {
          id: "reschedule_request",
-          icon: FiSend,
+          icon: Send,
          iconClassName: "rotate-45 w-[16px] -translate-x-0.5 ",
          label: t("send_reschedule_request"),
          onClick: () => {
@@ -178,12 +185,24 @@ function BookingListItem(booking: BookingItemProps) {
          onClick: () => {
            setIsOpenLocationDialog(true);
          },
-          icon: FiMapPin,
+          icon: MapPin,
        },
      ],
    },
  ];

+  const chargeCardActions: ActionType[] = [
+    {
+      id: "charge_card",
+      label: cardCharged ? t("no_show_fee_charged") : t("collect_no_show_fee"),
+      disabled: cardCharged,
+      onClick: () => {
+        setChargeCardDialogIsOpen(true);
+      },
+      icon: CreditCard,
+    },
+  ];
+
  if (isTabRecurring && isRecurring) {
    bookedActions = bookedActions.filter((action) => action.id !== "edit_booking");
  }
@@ -194,7 +213,7 @@ function BookingListItem(booking: BookingItemProps) {

  const RequestSentMessage = () => {
    return (
-      <Badge startIcon={FiSend} size="md" variant="gray" data-testid="request_reschedule_sent">
+      <Badge startIcon={Send} size="md" variant="gray" data-testid="request_reschedule_sent">
        {t("reschedule_request_sent")}
      </Badge>
    );
@@ -237,10 +256,14 @@ function BookingListItem(booking: BookingItemProps) {
      },
    });
  };
+
+  const title = booking.title;
+  // To be used after we run query on legacy bookings
+  // const showRecordingsButtons = booking.isRecorded && isPast && isConfirmed;
+
  const showRecordingsButtons =
    (booking.location === "integrations:daily" || booking?.location?.trim() === "") && isPast && isConfirmed;

-  const title = booking.title;
  return (
    <>
      <RescheduleDialog
@@ -254,6 +277,15 @@ function BookingListItem(booking: BookingItemProps) {
        isOpenDialog={isOpenSetLocationDialog}
        setShowLocationModal={setIsOpenLocationDialog}
      />
+      {booking.paid && (
+        <ChargeCardDialog
+          isOpenDialog={chargeCardDialogIsOpen}
+          setIsOpenDialog={setChargeCardDialogIsOpen}
+          bookingId={booking.id}
+          paymentAmount={booking?.payment[0].amount}
+          paymentCurrency={booking?.payment[0].currency}
+        />
+      )}
      {showRecordingsButtons && (
        <ViewRecordingsDialog
          booking={booking}
@@ -321,7 +353,7 @@ function BookingListItem(booking: BookingItemProps) {
            )}
            {booking.paid && (
              <Badge className="ltr:mr-2 rtl:ml-2" variant="green">
-                {t("paid")}
+                {booking.payment[0].paymentOption === "HOLD" ? t("card_held") : t("paid")}
              </Badge>
            )}
            {recurringDates !== undefined && (
@@ -423,6 +455,11 @@ function BookingListItem(booking: BookingItemProps) {
              <RequestSentMessage />
            </div>
          )}
+          {booking.status === "ACCEPTED" && booking.paid && booking?.payment[0]?.paymentOption === "HOLD" && (
+            <div className="ml-2">
+              <TableActions actions={chargeCardActions} />
+            </div>
+          )}
        </td>
      </tr>
    </>
@@ -476,7 +513,7 @@ const RecurringBookingsTooltip = ({ booking, recurringDates }: RecurringBookings
                );
              })}>
              <div className="text-default">
-                <FiRefreshCcw
+                <RefreshCcw
                  strokeWidth="3"
                  className="text-muted float-left mr-1 mt-1.5 inline-block h-3 w-3"
                />
@@ -2,11 +2,10 @@ import { useRouter } from "next/router";
 import { useCallback, useState } from "react";

 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import useTheme from "@calcom/lib/hooks/useTheme";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import type { RecurringEvent } from "@calcom/types/Calendar";
 import { Button, TextArea } from "@calcom/ui";
-import { FiX } from "@calcom/ui/components/icon";
+import { X } from "@calcom/ui/components/icon";

 type Props = {
  booking: {
@@ -34,7 +33,6 @@ export default function CancelBooking(props: Props) {
  const [loading, setLoading] = useState(false);
  const telemetry = useTelemetry();
  const [error, setError] = useState<string | null>(booking ? null : t("booking_already_cancelled"));
-  useTheme(props.theme);

  const cancelBookingRef = useCallback((node: HTMLTextAreaElement) => {
    if (node !== null) {
@@ -48,7 +46,7 @@ export default function CancelBooking(props: Props) {
      {error && (
        <div className="mt-8">
          <div className="bg-error mx-auto flex h-12 w-12 items-center justify-center rounded-full">
-            <FiX className="h-6 w-6 text-red-600" />
+            <X className="h-6 w-6 text-red-600" />
          </div>
          <div className="mt-3 text-center sm:mt-5">
            <h3 className="text-emphasis text-lg font-medium leading-6" id="modal-title">
@@ -194,6 +194,7 @@ export const SlotPicker = ({
        bookingAttendees={bookingAttendees}
        recurringCount={recurringEventCount}
        ethSignature={ethSignature}
+        duration={parseInt(duration)}
      />
    </>
  );
@@ -1,4 +1,4 @@
-import { FiGlobe } from "@calcom/ui/components/icon";
+import { Globe } from "@calcom/ui/components/icon";

 import { timeZone as localStorageTimeZone } from "@lib/clock";

@@ -18,7 +18,7 @@ export function TimezoneDropdown({
  return (
    <>
      <div className="dark:focus-within:bg-darkgray-200 dark:bg-darkgray-100 dark:hover:bg-darkgray-200 !mt-3 flex w-full max-w-[20rem] items-center rounded-[4px] px-1 text-sm font-medium focus-within:bg-gray-200 hover:bg-gray-100 lg:max-w-[12rem] [&_p]:focus-within:text-gray-900 dark:[&_p]:focus-within:text-white [&_svg]:focus-within:text-gray-900 dark:[&_svg]:focus-within:text-white">
-        <FiGlobe className="dark:text-darkgray-600 flex h-4 w-4 text-gray-600 ltr:mr-2 rtl:ml-2" />
+        <Globe className="dark:text-darkgray-600 flex h-4 w-4 text-gray-600 ltr:mr-2 rtl:ml-2" />
        <TimeOptions onSelectTimeZone={handleSelectTimeZone} />
      </div>
    </>
@@ -1,7 +1,6 @@
 import dynamic from "next/dynamic";
 import { useRouter } from "next/router";
 import { useEffect, useMemo, useReducer, useState } from "react";
-import { FormattedNumber, IntlProvider } from "react-intl";
 import { z } from "zod";

 import BookingPageTagManager from "@calcom/app-store/BookingPageTagManager";
@@ -21,11 +20,10 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import notEmpty from "@calcom/lib/notEmpty";
 import { getRecurringFreq } from "@calcom/lib/recurringStrings";
-import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { detectBrowserTimeFormat, setIs24hClockInLocalStorage, TimeFormat } from "@calcom/lib/timeFormat";
 import { trpc } from "@calcom/trpc";
-import { HeadSeo, useCalcomTheme } from "@calcom/ui";
-import { FiCreditCard, FiUser, FiRefreshCcw } from "@calcom/ui/components/icon";
+import { HeadSeo, NumberInput, useCalcomTheme } from "@calcom/ui";
+import { CreditCard, User, RefreshCcw } from "@calcom/ui/components/icon";

 import { timeZone as localStorageTimeZone } from "@lib/clock";

@@ -76,7 +74,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
    brandColor: profile.brandColor,
    darkBrandColor: profile.darkBrandColor,
  });
-  const { t } = useLocale();
+  const { t, i18n } = useLocale();
  const availabilityDatePickerEmbedStyles = useEmbedStyles("availabilityDatePicker");
  //TODO: Plan to remove shouldAlignCentrallyInEmbed config
  const shouldAlignCentrallyInEmbed = useEmbedNonStylesConfig("align") !== "left";
@@ -105,8 +103,9 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {

  const [recurringEventCount, setRecurringEventCount] = useState(eventType.recurringEvent?.count);

+  /*
  const telemetry = useTelemetry();
-  useEffect(() => {
+   useEffect(() => {
    if (top !== window) {
      //page_view will be collected automatically by _middleware.ts
      telemetry.event(
@@ -114,7 +113,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
        collectPageParameters("/availability", { isTeamBooking: document.URL.includes("team/") })
      );
    }
-  }, [telemetry]);
+  }, [telemetry]); */
  const embedUiConfig = useEmbedUiConfig();
  // get dynamic user list here
  const userList = eventType.users ? eventType.users.map((user) => user.username).filter(notEmpty) : [];
@@ -124,6 +123,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
    [timeZone]
  );
  const paymentAppData = getPaymentAppData(eventType);
+
  const rainbowAppData = getEventTypeAppData(eventType, "rainbow") || {};
  const rawSlug = profile.slug ? profile.slug.split("/") : [];
  if (rawSlug.length > 1) rawSlug.pop(); //team events have team name as slug, but user events have [user]/[type] as slug.
@@ -181,7 +181,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
              style={availabilityDatePickerEmbedStyles}
              className={classNames(
                isBackgroundTransparent ? "" : "bg-default dark:bg-muted pb-4 md:pb-0",
-                "border-subtle md:rounded-md md:border",
+                "border-booker md:border-booker-width md:rounded-md",
                isEmbed && "mx-auto"
              )}>
              <div className="md:flex">
@@ -200,7 +200,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
                            " text-default",
                            "ltr:mr-[10px] rtl:ml-[10px]"
                          )}>
-                          <FiUser
+                          <User
                            className={classNames(
                              "min-h-4 min-w-4 ml-[2px] inline-block ltr:mr-[10px] rtl:ml-[10px]",
                              "mt-[2px]"
@@ -211,21 +211,23 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
                      )}
                      {!rescheduleUid && eventType.recurringEvent && (
                        <div className="flex items-start text-sm font-medium">
-                          <FiRefreshCcw className="float-left mt-[7px] ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] " />
+                          <RefreshCcw className="float-left mt-[7px] ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] " />
                          <div>
                            <p className="mb-1 -ml-2 inline px-2 py-1">
                              {getRecurringFreq({ t, recurringEvent: eventType.recurringEvent })}
                            </p>
-                            <input
-                              type="number"
+
+                            <NumberInput
+                              defaultValue={eventType.recurringEvent.count}
                              min="1"
                              max={eventType.recurringEvent.count}
-                              className="w-15 border-default bg-default dark:border-empthasis h-7 rounded-sm text-sm font-medium [appearance:textfield] ltr:mr-2 rtl:ml-2"
-                              defaultValue={eventType.recurringEvent.count}
+                              isFullWidth={false}
+                              className="me-2 inline w-16"
                              onChange={(event) => {
                                setRecurringEventCount(parseInt(event?.target.value));
                              }}
                            />
+
                            <p className="inline">
                              {t("occurrence", {
                                count: recurringEventCount,
@@ -236,14 +238,22 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
                      )}
                      {paymentAppData.price > 0 && (
                        <p className="-ml-2 px-2 text-sm font-medium">
-                          <FiCreditCard className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
-                          <IntlProvider locale="en">
-                            <FormattedNumber
-                              value={paymentAppData.price / 100.0}
-                              style="currency"
-                              currency={paymentAppData.currency?.toUpperCase()}
-                            />
-                          </IntlProvider>
+                          <CreditCard className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
+                          {paymentAppData.paymentOption === "HOLD" ? (
+                            <>
+                              {t("no_show_fee_amount", {
+                                amount: paymentAppData.price / 100.0,
+                                formatParams: { amount: { currency: paymentAppData.currency } },
+                              })}
+                            </>
+                          ) : (
+                            <>
+                              {new Intl.NumberFormat(i18n.language, {
+                                style: "currency",
+                                currency: paymentAppData.currency,
+                              }).format(paymentAppData.price / 100)}
+                            </>
+                          )}
                        </p>
                      )}
                      {timezoneDropdown}
@@ -32,17 +32,18 @@ import getLocationOptionsForSelect from "@calcom/features/bookings/lib/getLocati
 import { FormBuilderField } from "@calcom/features/form-builder/FormBuilder";
 import { bookingSuccessRedirect } from "@calcom/lib/bookingSuccessRedirect";
 import classNames from "@calcom/lib/classNames";
-import { APP_NAME } from "@calcom/lib/constants";
+import { APP_NAME, MINUTES_TO_BOOK } from "@calcom/lib/constants";
 import useGetBrandingColours from "@calcom/lib/getBrandColours";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
 import { HttpError } from "@calcom/lib/http-error";
 import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
-import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
+import { telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { TimeFormat } from "@calcom/lib/timeFormat";
+import { trpc } from "@calcom/trpc";
 import { Button, Form, Tooltip, useCalcomTheme } from "@calcom/ui";
-import { FiAlertTriangle, FiCalendar, FiRefreshCw, FiUser } from "@calcom/ui/components/icon";
+import { AlertTriangle, Calendar, RefreshCw, User } from "@calcom/ui/components/icon";

 import { timeZone } from "@lib/clock";
 import useRouterQuery from "@lib/hooks/useRouterQuery";
@@ -210,8 +211,11 @@ const BookingPage = ({
  hashedLink,
  ...restProps
 }: BookingPageProps) => {
+  const removeSelectedSlotMarkMutation = trpc.viewer.public.slots.removeSelectedSlotMark.useMutation();
+  const reserveSlotMutation = trpc.viewer.public.slots.reserveSlot.useMutation();
  const { t, i18n } = useLocale();
  const { duration: queryDuration } = useRouterQuery("duration");
+  const { date: queryDate } = useRouterQuery("date");
  const isEmbed = useIsEmbed(restProps.isEmbed);
  const embedUiConfig = useEmbedUiConfig();
  const shouldAlignCentrallyInEmbed = useEmbedNonStylesConfig("align") !== "left";
@@ -227,6 +231,15 @@ const BookingPage = ({
    }),
    {}
  );
+  const reserveSlot = () => {
+    if (queryDuration) {
+      reserveSlotMutation.mutate({
+        eventTypeId: eventType.id,
+        slotUtcStartDate: dayjs(queryDate).utc().format(),
+        slotUtcEndDate: dayjs(queryDate).utc().add(parseInt(queryDuration), "minutes").format(),
+      });
+    }
+  };
  // Define duration now that we support multiple duration eventTypes
  let duration = eventType.length;
  if (
@@ -239,13 +252,19 @@ const BookingPage = ({
  }

  useEffect(() => {
-    if (top !== window) {
+    /* if (top !== window) {
      //page_view will be collected automatically by _middleware.ts
      telemetry.event(
        telemetryEventTypes.embedView,
        collectPageParameters("/book", { isTeamBooking: document.URL.includes("team/") })
      );
-    }
+    } */
+    reserveSlot();
+    const interval = setInterval(reserveSlot, parseInt(MINUTES_TO_BOOK) * 60 * 1000 - 2000);
+    return () => {
+      clearInterval(interval);
+      removeSelectedSlotMarkMutation.mutate();
+    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

@@ -528,17 +547,17 @@ const BookingPage = ({
        <div
          className={classNames(
            "main",
-            isBackgroundTransparent ? "" : "dark:bg-darkgray-100 bg-default dark:border",
-            "dark:border-darkgray-300 rounded-md sm:border"
+            isBackgroundTransparent ? "" : "bg-default dark:bg-muted",
+            "border-booker sm:border-booker-width rounded-md"
          )}>
          <div className="sm:flex">
            {showEventTypeDetails && (
-              <div className="sm:dark:border-darkgray-300  text-default flex flex-col px-6 pt-6 pb-0 sm:w-1/2 sm:border-r sm:pb-6">
+              <div className="sm:border-subtle  text-default flex flex-col px-6 pt-6 pb-0 sm:w-1/2 sm:border-r sm:pb-6">
                <BookingDescription isBookingPage profile={profile} eventType={eventType}>
-                  <BookingDescriptionPayment eventType={eventType} />
+                  <BookingDescriptionPayment eventType={eventType} t={t} i18n={i18n} />
                  {!rescheduleUid && eventType.recurringEvent?.freq && recurringEventCount && (
                    <div className="dark:text-inverted text-default items-start text-sm font-medium">
-                      <FiRefreshCw className="ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
+                      <RefreshCw className="ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
                      <p className="-ml-2 inline-block items-center px-2">
                        {getEveryFreqFor({
                          t,
@@ -549,7 +568,7 @@ const BookingPage = ({
                    </div>
                  )}
                  <div className="text-bookinghighlight flex items-start text-sm">
-                    <FiCalendar className="ml-[2px] mt-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
+                    <Calendar className="ml-[2px] mt-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
                    <div className="text-sm font-medium">
                      {isClientTimezoneAvailable &&
                        (rescheduleUid || !eventType.recurringEvent?.freq) &&
@@ -580,7 +599,7 @@ const BookingPage = ({
                        {t("former_time")}
                      </p>
                      <p className="line-through ">
-                        <FiCalendar className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
+                        <Calendar className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
                        {isClientTimezoneAvailable &&
                          typeof booking.startTime === "string" &&
                          parseDate(dayjs(booking.startTime), i18n, timeFormat)}
@@ -589,7 +608,7 @@ const BookingPage = ({
                  )}
                  {!!eventType.seatsPerTimeSlot && (
                    <div className="text-bookinghighlight flex items-start text-sm">
-                      <FiUser
+                      <User
                        className={`ml-[2px] mt-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] ${
                          currentSlotBooking &&
                          currentSlotBooking.attendees.length / eventType.seatsPerTimeSlot >= 0.5
@@ -649,9 +668,9 @@ const BookingPage = ({
                  </Button>
                </div>
              </Form>
-              {(mutation.isError || recurringMutation.isError) && (
+              {mutation.isError || recurringMutation.isError ? (
                <ErrorMessage error={mutation.error || recurringMutation.error} />
-              )}
+              ) : null}
            </div>
          </div>
        </div>
@@ -672,7 +691,7 @@ function ErrorMessage({ error }: { error: unknown }) {
    <div data-testid="booking-fail" className="mt-2 border-l-4 border-blue-400 bg-blue-50 p-4">
      <div className="flex">
        <div className="flex-shrink-0">
-          <FiAlertTriangle className="h-5 w-5 text-blue-400" aria-hidden="true" />
+          <AlertTriangle className="h-5 w-5 text-blue-400" aria-hidden="true" />
        </div>
        <div className="ms-3">
          <p className="text-sm text-blue-700">
@@ -0,0 +1,82 @@
+import { useState } from "react";
+import type { Dispatch, SetStateAction } from "react";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
+import {
+  Button,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  showToast,
+} from "@calcom/ui";
+import { CreditCard, AlertTriangle } from "@calcom/ui/components/icon";
+
+interface IRescheduleDialog {
+  isOpenDialog: boolean;
+  setIsOpenDialog: Dispatch<SetStateAction<boolean>>;
+  bookingId: number;
+  paymentAmount: number;
+  paymentCurrency: string;
+}
+
+export const ChargeCardDialog = (props: IRescheduleDialog) => {
+  const { t } = useLocale();
+  const utils = trpc.useContext();
+  const { isOpenDialog, setIsOpenDialog, bookingId } = props;
+  const [chargeError, setChargeError] = useState(false);
+  const chargeCardMutation = trpc.viewer.payments.chargeCard.useMutation({
+    onSuccess: () => {
+      utils.viewer.bookings.invalidate();
+      setIsOpenDialog(false);
+      showToast("Charge successful", "success");
+    },
+    onError: () => {
+      setChargeError(true);
+    },
+  });
+
+  const currencyStringParams = {
+    amount: props.paymentAmount / 100.0,
+    formatParams: { amount: { currency: props.paymentCurrency } },
+  };
+
+  return (
+    <Dialog open={isOpenDialog} onOpenChange={setIsOpenDialog}>
+      <DialogContent>
+        <div className="flex flex-row space-x-3">
+          <div className="flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]">
+            <CreditCard className="m-auto h-6 w-6" />
+          </div>
+          <div className="pt-1">
+            <DialogHeader title={t("charge_card")} />
+            <p>{t("charge_card_dialog_body", currencyStringParams)}</p>
+
+            {chargeError && (
+              <div className="mt-4 flex text-red-500">
+                <AlertTriangle className="mr-2 h-5 w-5 " aria-hidden="true" />
+                <p className="text-sm">{t("error_charging_card")}</p>
+              </div>
+            )}
+
+            <DialogFooter>
+              <DialogClose />
+              <Button
+                data-testid="send_request"
+                disabled={chargeCardMutation.isLoading || chargeError}
+                onClick={() =>
+                  chargeCardMutation.mutate({
+                    bookingId,
+                  })
+                }>
+                {t("charge_attendee", currencyStringParams)}
+              </Button>
+            </DialogFooter>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
@@ -19,7 +19,7 @@ import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import { Input } from "@calcom/ui";
 import { Button, Dialog, DialogContent, DialogFooter, Form, PhoneInput } from "@calcom/ui";
-import { FiMapPin } from "@calcom/ui/components/icon";
+import { MapPin } from "@calcom/ui/components/icon";

 import { QueryCell } from "@lib/QueryCell";

@@ -174,7 +174,6 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
              id="locationInput"
              placeholder={t(eventLocationType.organizerInputPlaceholder || "")}
              required
-              className="border-default block w-full rounded-sm text-sm"
              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
              defaultValue={
                defaultLocation ? defaultLocation[eventLocationType.defaultValueVariable] : undefined
@@ -218,7 +217,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
      <DialogContent>
        <div className="flex flex-row space-x-3">
          <div className="bg-subtle mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10">
-            <FiMapPin className="text-emphasis h-6 w-6" />
+            <MapPin className="text-emphasis h-6 w-6" />
          </div>
          <div className="w-full">
            <div className="mt-3 text-center sm:mt-0 sm:text-left">
@@ -13,7 +13,7 @@ import {
  showToast,
  TextArea,
 } from "@calcom/ui";
-import { FiClock } from "@calcom/ui/components/icon";
+import { Clock } from "@calcom/ui/components/icon";

 interface IRescheduleDialog {
  isOpenDialog: boolean;
@@ -44,7 +44,7 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
      <DialogContent>
        <div className="flex flex-row space-x-3">
          <div className="flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]">
-            <FiClock className="m-auto h-6 w-6" />
+            <Clock className="m-auto h-6 w-6" />
          </div>
          <div className="pt-1">
            <DialogHeader title={t("send_reschedule_request")} />
@@ -1,251 +0,0 @@
-import type { FormValues } from "pages/event-types/[type]";
-import { Controller, useFormContext } from "react-hook-form";
-import type { OptionProps, SingleValueProps } from "react-select";
-import { components } from "react-select";
-
-import dayjs from "@calcom/dayjs";
-import { NewScheduleButton } from "@calcom/features/schedules";
-import classNames from "@calcom/lib/classNames";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { weekdayNames } from "@calcom/lib/weekday";
-import type { RouterOutputs } from "@calcom/trpc/react";
-import { trpc } from "@calcom/trpc/react";
-import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
-import { Badge, Button, Select, SettingsToggle, SkeletonText, EmptyScreen } from "@calcom/ui";
-import { FiExternalLink, FiGlobe, FiClock } from "@calcom/ui/components/icon";
-
-import { SelectSkeletonLoader } from "@components/availability/SkeletonLoader";
-
-type AvailabilityOption = {
-  label: string;
-  value: number;
-  isDefault: boolean;
-};
-
-const Option = ({ ...props }: OptionProps<AvailabilityOption>) => {
-  const { label, isDefault } = props.data;
-  const { t } = useLocale();
-  return (
-    <components.Option {...props}>
-      <span>{label}</span>
-      {isDefault && (
-        <Badge variant="blue" className="ml-2">
-          {t("default")}
-        </Badge>
-      )}
-    </components.Option>
-  );
-};
-
-const SingleValue = ({ ...props }: SingleValueProps<AvailabilityOption>) => {
-  const { label, isDefault } = props.data;
-  const { t } = useLocale();
-  return (
-    <components.SingleValue {...props}>
-      <span>{label}</span>
-      {isDefault && (
-        <Badge variant="blue" className="ml-2">
-          {t("default")}
-        </Badge>
-      )}
-    </components.SingleValue>
-  );
-};
-
-const AvailabilitySelect = ({
-  className = "",
-  isLoading,
-  schedules,
-  ...props
-}: {
-  className?: string;
-  name: string;
-  value: number;
-  isLoading: boolean;
-  schedules: RouterOutputs["viewer"]["availability"]["list"]["schedules"] | [];
-  onBlur: () => void;
-  onChange: (value: AvailabilityOption | null) => void;
-}) => {
-  const { t } = useLocale();
-
-  if (isLoading) {
-    return <SelectSkeletonLoader />;
-  }
-
-  const options = schedules.map((schedule) => ({
-    value: schedule.id,
-    label: schedule.name,
-    isDefault: schedule.isDefault,
-  }));
-
-  const value = options.find((option) =>
-    props.value
-      ? option.value === props.value
-      : option.value === schedules.find((schedule) => schedule.isDefault)?.id
-  );
-
-  return (
-    <Select
-      placeholder={t("select")}
-      options={options}
-      isSearchable={false}
-      onChange={props.onChange}
-      className={classNames("block w-full min-w-0 flex-1 rounded-sm text-sm", className)}
-      value={value}
-      components={{ Option, SingleValue }}
-      isMulti={false}
-    />
-  );
-};
-
-const format = (date: Date, hour12: boolean) =>
-  Intl.DateTimeFormat(undefined, { hour: "numeric", minute: "numeric", hour12 }).format(
-    new Date(dayjs.utc(date).format("YYYY-MM-DDTHH:mm:ss"))
-  );
-
-const EventTypeScheduleDetails = () => {
-  const { data: loggedInUser } = useMeQuery();
-  const timeFormat = loggedInUser?.timeFormat;
-  const { t, i18n } = useLocale();
-  const { watch } = useFormContext<FormValues>();
-
-  const scheduleId = watch("schedule");
-
-  const { isLoading, data: schedule } = trpc.viewer.availability.schedule.get.useQuery(
-    { scheduleId: scheduleId || loggedInUser?.defaultScheduleId || undefined },
-    { enabled: !!scheduleId || !!loggedInUser?.defaultScheduleId }
-  );
-
-  const filterDays = (dayNum: number) =>
-    schedule?.schedule.filter((item) => item.days.includes((dayNum + 1) % 7)) || [];
-
-  return (
-    <div className="border-default space-y-4 rounded border px-6 pb-4">
-      <ol className="table border-collapse text-sm">
-        {weekdayNames(i18n.language, 1, "long").map((day, index) => {
-          const isAvailable = !!filterDays(index).length;
-          return (
-            <li key={day} className="my-6 flex border-transparent last:mb-2">
-              <span
-                className={classNames(
-                  "w-20 font-medium sm:w-32 ",
-                  !isAvailable ? "text-subtle line-through" : "text-default"
-                )}>
-                {day}
-              </span>
-              {isLoading ? (
-                <SkeletonText className="block h-5 w-60" />
-              ) : isAvailable ? (
-                <div className="space-y-3 text-right">
-                  {filterDays(index).map((dayRange, i) => (
-                    <div key={i} className="text-default flex items-center leading-4">
-                      <span className="w-16 sm:w-28 sm:text-left">
-                        {format(dayRange.startTime, timeFormat === 12)}
-                      </span>
-                      <span className="ms-4">-</span>
-                      <div className="ml-6">{format(dayRange.endTime, timeFormat === 12)}</div>
-                    </div>
-                  ))}
-                </div>
-              ) : (
-                <span className="text-subtle ml-6 sm:ml-0">{t("unavailable")}</span>
-              )}
-            </li>
-          );
-        })}
-      </ol>
-      <hr className="border-subtle" />
-      <div className="flex flex-col justify-center gap-2 sm:flex-row sm:justify-between">
-        <span className="text-default flex items-center justify-center text-sm sm:justify-start">
-          <FiGlobe className="ltr:mr-2 rtl:ml-2" />
-          {schedule?.timeZone || <SkeletonText className="block h-5 w-32" />}
-        </span>
-        {!!schedule?.id && (
-          <Button
-            href={`/availability/${schedule.id}`}
-            disabled={isLoading}
-            color="minimal"
-            EndIcon={FiExternalLink}
-            target="_blank"
-            rel="noopener noreferrer">
-            {t("edit_availability")}
-          </Button>
-        )}
-      </div>
-    </div>
-  );
-};
-
-const EventTypeSchedule = () => {
-  const { t } = useLocale();
-  const { data: schedules, isLoading } = trpc.viewer.availability.list.useQuery();
-
-  if (!schedules?.schedules.length && !isLoading)
-    return (
-      <EmptyScreen
-        Icon={FiClock}
-        headline={t("new_schedule_heading")}
-        description={t("new_schedule_description")}
-        buttonRaw={<NewScheduleButton fromEventType />}
-        border={false}
-      />
-    );
-
-  return (
-    <div className="space-y-4">
-      <div>
-        <label htmlFor="availability" className="text-default mb-2 block text-sm font-medium leading-none">
-          {t("availability")}
-        </label>
-        <Controller
-          name="schedule"
-          render={({ field }) => (
-            <>
-              <AvailabilitySelect
-                value={field.value}
-                onBlur={field.onBlur}
-                name={field.name}
-                schedules={schedules?.schedules || []}
-                isLoading={isLoading}
-                onChange={(selected) => {
-                  field.onChange(selected?.value || null);
-                }}
-              />
-            </>
-          )}
-        />
-      </div>
-      <EventTypeScheduleDetails />
-    </div>
-  );
-};
-
-const UseCommonScheduleSettingsToggle = () => {
-  const { t } = useLocale();
-  const { resetField, setValue } = useFormContext<FormValues>();
-  return (
-    <Controller
-      name="metadata.config.useHostSchedulesForTeamEvent"
-      render={({ field: { value, onChange } }) => (
-        <SettingsToggle
-          checked={!value}
-          onCheckedChange={(checked) => {
-            onChange(!checked);
-            if (checked) {
-              resetField("schedule");
-            } else {
-              setValue("schedule", null);
-            }
-          }}
-          title={t("choose_common_schedule_team_event")}
-          description={t("choose_common_schedule_team_event_description")}>
-          <EventTypeSchedule />
-        </SettingsToggle>
-      )}
-    />
-  );
-};
-
-export const AvailabilityTab = ({ isTeamEvent }: { isTeamEvent: boolean }) => {
-  return isTeamEvent ? <UseCommonScheduleSettingsToggle /> : <EventTypeSchedule />;
-};
@@ -10,14 +10,15 @@ import type { EventNameObjectType } from "@calcom/core/event";
 import { getEventName } from "@calcom/core/event";
 import getLocationsOptionsForSelect from "@calcom/features/bookings/lib/getLocationOptionsForSelect";
 import DestinationCalendarSelector from "@calcom/features/calendars/DestinationCalendarSelector";
+import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
 import { FormBuilder } from "@calcom/features/form-builder/FormBuilder";
 import { classNames } from "@calcom/lib";
 import { APP_NAME, CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { Prisma } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
-import { Button, Checkbox, Label, SettingsToggle, showToast, TextField, Tooltip } from "@calcom/ui";
-import { FiEdit, FiCopy } from "@calcom/ui/components/icon";
+import { Button, Checkbox, Label, SettingsToggle, showToast, TextField, Tooltip, Alert } from "@calcom/ui";
+import { Edit, Copy } from "@calcom/ui/components/icon";

 import RequiresConfirmationController from "./RequiresConfirmationController";

@@ -58,6 +59,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
  const [requiresConfirmation, setRequiresConfirmation] = useState(eventType.requiresConfirmation);
  const placeholderHashedLink = `${CAL_URL}/d/${hashedUrl}/${eventType.slug}`;
  const seatsEnabled = formMethods.watch("seatsPerTimeSlotEnabled");
+  const noShowFeeEnabled = eventType.metadata.apps?.stripe?.paymentOption === "HOLD";

  useEffect(() => {
    !hashedUrl && setHashedUrl(generateHashedLink(eventType.users[0]?.id ?? team?.id));
@@ -79,11 +81,19 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
    );
  };

+  const { shouldLockDisableProps } = useLockedFieldsManager(
+    eventType,
+    t("locked_fields_admin_description"),
+    t("locked_fields_member_description")
+  );
  const eventNamePlaceholder = getEventName({
    ...eventNameObject,
    eventName: formMethods.watch("eventName"),
  });

+  const successRedirectUrlLocked = shouldLockDisableProps("successRedirectUrl");
+  const seatsLocked = shouldLockDisableProps("seatsPerTimeSlotEnabled");
+
  const closeEventNameTip = () => setShowEventNameTip(false);

  const setEventName = (value: string) => formMethods.setValue("eventName", value);
@@ -127,19 +137,19 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
        <TextField
          label={t("event_name_in_calendar")}
          type="text"
+          {...shouldLockDisableProps("eventName")}
          placeholder={eventNamePlaceholder}
          defaultValue={eventType.eventName || ""}
          {...formMethods.register("eventName")}
          addOnSuffix={
            <Button
-              type="button"
-              StartIcon={FiEdit}
-              variant="icon"
              color="minimal"
-              className="hover:stroke-3 hover:text-emphasis min-w-fit px-0 hover:bg-transparent"
-              onClick={() => setShowEventNameTip((old) => !old)}
+              size="sm"
              aria-label="edit custom name"
-            />
+              className="hover:stroke-3 hover:text-emphasis min-w-fit px-0 !py-0 hover:bg-transparent"
+              onClick={() => setShowEventNameTip((old) => !old)}>
+              <Edit className="h-4 w-4" />
+            </Button>
          }
        />
      </div>
@@ -149,6 +159,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
        description={t("booking_questions_description")}
        addFieldLabel={t("add_a_booking_question")}
        formProp="bookingFields"
+        {...shouldLockDisableProps("bookingFields")}
        dataStore={{
          options: {
            locations: getLocationsOptionsForSelect(eventType?.locations ?? [], t),
@@ -157,6 +168,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
      />
      <hr className="border-subtle" />
      <RequiresConfirmationController
+        eventType={eventType}
        seatsEnabled={seatsEnabled}
        metadata={eventType.metadata}
        requiresConfirmation={requiresConfirmation}
@@ -170,6 +182,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
        render={({ field: { value, onChange } }) => (
          <SettingsToggle
            title={t("disable_notes")}
+            {...shouldLockDisableProps("hideCalendarNotes")}
            description={t("disable_notes_description")}
            checked={value}
            onCheckedChange={(e) => onChange(e)}
@@ -184,6 +197,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
          <>
            <SettingsToggle
              title={t("redirect_success_booking")}
+              {...successRedirectUrlLocked}
              description={t("redirect_url_description")}
              checked={redirectUrlVisible}
              onCheckedChange={(e) => {
@@ -196,6 +210,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                  className="w-full"
                  label={t("redirect_success_booking")}
                  labelSrOnly
+                  disabled={successRedirectUrlLocked.disabled}
                  placeholder={t("external_redirect_url")}
                  required={redirectUrlVisible}
                  type="text"
@@ -218,6 +233,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
      <SettingsToggle
        data-testid="hashedLinkCheck"
        title={t("private_link")}
+        {...shouldLockDisableProps("hashedLinkCheck")}
        description={t("private_link_description", { appName: APP_NAME })}
        checked={hashedLinkVisible}
        onCheckedChange={(e) => {
@@ -239,6 +255,10 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
              <Tooltip content={eventType.hashedLink ? t("copy_to_clipboard") : t("enabled_after_update")}>
                <Button
                  color="minimal"
+                  size="sm"
+                  type="button"
+                  className="hover:stroke-3 hover:text-emphasis min-w-fit px-0 !py-0 hover:bg-transparent"
+                  aria-label="copy link"
                  onClick={() => {
                    navigator.clipboard.writeText(placeholderHashedLink);
                    if (eventType.hashedLink) {
@@ -246,10 +266,8 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                    } else {
                      showToast(t("enabled_after_update_description"), "warning");
                    }
-                  }}
-                  className="hover:stroke-3 hover:text-emphasis hover:bg-transparent"
-                  type="button">
-                  <FiCopy />
+                  }}>
+                  <Copy className="h-4 w-4" />
                </Button>
              </Tooltip>
            }
@@ -262,54 +280,62 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
        control={formMethods.control}
        defaultValue={!!eventType.seatsPerTimeSlot}
        render={({ field: { value, onChange } }) => (
-          <SettingsToggle
-            data-testid="offer-seats-toggle"
-            title={t("offer_seats")}
-            description={t("offer_seats_description")}
-            checked={value}
-            onCheckedChange={(e) => {
-              // Enabling seats will disable guests and requiring confirmation until fully supported
-              if (e) {
-                toggleGuests(false);
-                formMethods.setValue("requiresConfirmation", false);
-                setRequiresConfirmation(false);
-                formMethods.setValue("seatsPerTimeSlot", 2);
-              } else {
-                formMethods.setValue("seatsPerTimeSlot", null);
-                toggleGuests(true);
-              }
-              onChange(e);
-            }}>
-            <Controller
-              name="seatsPerTimeSlot"
-              control={formMethods.control}
-              defaultValue={eventType.seatsPerTimeSlot}
-              render={({ field: { value, onChange } }) => (
-                <div className="lg:-ml-2">
-                  <TextField
-                    required
-                    name="seatsPerTimeSlot"
-                    labelSrOnly
-                    label={t("number_of_seats")}
-                    type="number"
-                    defaultValue={value || 2}
-                    min={1}
-                    addOnSuffix={<>{t("seats")}</>}
-                    onChange={(e) => {
-                      onChange(Math.abs(Number(e.target.value)));
-                    }}
-                  />
-                  <div className="mt-2">
-                    <Checkbox
-                      description={t("show_attendees")}
-                      onChange={(e) => formMethods.setValue("seatsShowAttendees", e.target.checked)}
-                      defaultChecked={!!eventType.seatsShowAttendees}
+          <>
+            <SettingsToggle
+              data-testid="offer-seats-toggle"
+              title={t("offer_seats")}
+              {...seatsLocked}
+              description={t("offer_seats_description")}
+              checked={value}
+              disabled={noShowFeeEnabled}
+              onCheckedChange={(e) => {
+                // Enabling seats will disable guests and requiring confirmation until fully supported
+                if (e) {
+                  toggleGuests(false);
+                  formMethods.setValue("requiresConfirmation", false);
+                  setRequiresConfirmation(false);
+                  formMethods.setValue("seatsPerTimeSlot", 2);
+                } else {
+                  formMethods.setValue("seatsPerTimeSlot", null);
+                  toggleGuests(true);
+                }
+                onChange(e);
+              }}>
+              <Controller
+                name="seatsPerTimeSlot"
+                control={formMethods.control}
+                defaultValue={eventType.seatsPerTimeSlot}
+                render={({ field: { value, onChange } }) => (
+                  <div className="lg:-ml-2">
+                    <TextField
+                      required
+                      name="seatsPerTimeSlot"
+                      labelSrOnly
+                      label={t("number_of_seats")}
+                      type="number"
+                      disabled={seatsLocked.disabled}
+                      defaultValue={value || 2}
+                      min={1}
+                      className="w-24"
+                      addOnSuffix={<>{t("seats")}</>}
+                      onChange={(e) => {
+                        onChange(Math.abs(Number(e.target.value)));
+                      }}
                    />
+                    <div className="mt-2">
+                      <Checkbox
+                        description={t("show_attendees")}
+                        disabled={seatsLocked.disabled}
+                        onChange={(e) => formMethods.setValue("seatsShowAttendees", e.target.checked)}
+                        defaultChecked={!!eventType.seatsShowAttendees}
+                      />
+                    </div>
                  </div>
-                </div>
-              )}
-            />
-          </SettingsToggle>
+                )}
+              />
+            </SettingsToggle>
+            {noShowFeeEnabled && <Alert severity="warning" title={t("seats_and_no_show_fee_error")} />}
+          </>
        )}
      />

@@ -5,10 +5,11 @@ import type { GetAppData, SetAppData } from "@calcom/app-store/EventTypeAppConte
 import { EventTypeAppCard } from "@calcom/app-store/_components/EventTypeAppCardInterface";
 import type { EventTypeAppCardComponentProps } from "@calcom/app-store/types";
 import type { EventTypeAppsList } from "@calcom/app-store/utils";
+import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Button, EmptyScreen } from "@calcom/ui";
-import { FiGrid } from "@calcom/ui/components/icon";
+import { Button, EmptyScreen, Alert } from "@calcom/ui";
+import { Grid, Lock } from "@calcom/ui/components/icon";

 export type EventType = Pick<EventTypeSetupProps, "eventType">["eventType"] &
  EventTypeAppCardComponentProps["eventType"];
@@ -55,19 +56,39 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
    };
  };

+  const { shouldLockDisableProps, isManagedEventType, isChildrenManagedEventType } = useLockedFieldsManager(
+    eventType,
+    t("locked_fields_admin_description"),
+    t("locked_fields_member_description")
+  );
+
  return (
    <>
      <div>
        <div className="before:border-0">
+          {!installedApps?.length && isManagedEventType && (
+            <Alert
+              severity="neutral"
+              className="mb-2"
+              title={t("locked_for_members")}
+              message={t("locked_apps_description")}
+            />
+          )}
          {!isLoading && !installedApps?.length ? (
            <EmptyScreen
-              Icon={FiGrid}
+              Icon={Grid}
              headline={t("empty_installed_apps_headline")}
              description={t("empty_installed_apps_description")}
              buttonRaw={
-                <Button target="_blank" color="secondary" href="/apps">
-                  {t("empty_installed_apps_button")}{" "}
-                </Button>
+                isChildrenManagedEventType && !isManagedEventType ? (
+                  <Button StartIcon={Lock} color="secondary" disabled>
+                    {t("locked_by_admin")}
+                  </Button>
+                ) : (
+                  <Button target="_blank" color="secondary" href="/apps">
+                    {t("empty_installed_apps_button")}{" "}
+                  </Button>
+                )
              }
            />
          ) : null}
@@ -82,22 +103,24 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
          ))}
        </div>
      </div>
-      <div>
-        {!isLoading && notInstalledApps?.length ? (
-          <h2 className="text-emphasis mt-0 mb-2 text-lg font-semibold">Available Apps</h2>
-        ) : null}
-        <div className="before:border-0">
-          {notInstalledApps?.map((app) => (
-            <EventTypeAppCard
-              getAppData={getAppDataGetter(app.slug as EventTypeAppsList)}
-              setAppData={getAppDataSetter(app.slug as EventTypeAppsList)}
-              key={app.slug}
-              app={app}
-              eventType={eventType}
-            />
-          ))}
+      {!shouldLockDisableProps("apps").disabled && (
+        <div>
+          {!isLoading && notInstalledApps?.length ? (
+            <h2 className="text-emphasis mt-0 mb-2 text-lg font-semibold">{t("available_apps")}</h2>
+          ) : null}
+          <div className="before:border-0">
+            {notInstalledApps?.map((app) => (
+              <EventTypeAppCard
+                getAppData={getAppDataGetter(app.slug as EventTypeAppsList)}
+                setAppData={getAppDataSetter(app.slug as EventTypeAppsList)}
+                key={app.slug}
+                app={app}
+                eventType={eventType}
+              />
+            ))}
+          </div>
        </div>
-      </div>
+      )}
    </>
  );
 };
@@ -0,0 +1,300 @@
+import { SchedulingType } from "@prisma/client";
+import type { EventTypeSetup, FormValues } from "pages/event-types/[type]";
+import { useState } from "react";
+import { Controller, useFormContext } from "react-hook-form";
+import type { OptionProps, SingleValueProps } from "react-select";
+import { components } from "react-select";
+
+import dayjs from "@calcom/dayjs";
+import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
+import classNames from "@calcom/lib/classNames";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { weekdayNames } from "@calcom/lib/weekday";
+import { trpc } from "@calcom/trpc/react";
+import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
+import { Badge, Button, Select, SettingsToggle, SkeletonText } from "@calcom/ui";
+import { ExternalLink, Globe } from "@calcom/ui/components/icon";
+
+import { SelectSkeletonLoader } from "@components/availability/SkeletonLoader";
+
+export type AvailabilityOption = {
+  label: string;
+  value: number;
+  isDefault: boolean;
+  isManaged?: boolean;
+};
+
+const Option = ({ ...props }: OptionProps<AvailabilityOption>) => {
+  const { label, isDefault, isManaged = false } = props.data;
+  const { t } = useLocale();
+  return (
+    <components.Option {...props}>
+      <span>{label}</span>
+      {isDefault && (
+        <Badge variant="blue" className="ml-2">
+          {t("default")}
+        </Badge>
+      )}
+      {isManaged && (
+        <Badge variant="gray" className="ml-2">
+          {t("managed")}
+        </Badge>
+      )}
+    </components.Option>
+  );
+};
+
+const SingleValue = ({ ...props }: SingleValueProps<AvailabilityOption>) => {
+  const { label, isDefault, isManaged = false } = props.data;
+  const { t } = useLocale();
+  return (
+    <components.SingleValue {...props}>
+      <span>{label}</span>
+      {isDefault && (
+        <Badge variant="blue" className="ml-2">
+          {t("default")}
+        </Badge>
+      )}
+      {isManaged && (
+        <Badge variant="gray" className="ml-2">
+          {t("managed")}
+        </Badge>
+      )}
+    </components.SingleValue>
+  );
+};
+
+const format = (date: Date, hour12: boolean) =>
+  Intl.DateTimeFormat(undefined, {
+    hour: "numeric",
+    minute: "numeric",
+    hourCycle: hour12 ? "h12" : "h24",
+  }).format(new Date(dayjs.utc(date).format("YYYY-MM-DDTHH:mm:ss")));
+
+const EventTypeScheduleDetails = ({
+  isManagedEventType,
+  selectedScheduleValue,
+}: {
+  isManagedEventType: boolean;
+  selectedScheduleValue: AvailabilityOption | undefined;
+}) => {
+  const { data: loggedInUser } = useMeQuery();
+  const timeFormat = loggedInUser?.timeFormat;
+  const { t, i18n } = useLocale();
+  const { watch } = useFormContext<FormValues>();
+
+  const scheduleId = watch("schedule");
+  const { isLoading, data: schedule } = trpc.viewer.availability.schedule.get.useQuery(
+    {
+      scheduleId: scheduleId || loggedInUser?.defaultScheduleId || selectedScheduleValue?.value || undefined,
+      isManagedEventType,
+    },
+    { enabled: !!scheduleId || !!loggedInUser?.defaultScheduleId || !!selectedScheduleValue }
+  );
+
+  const filterDays = (dayNum: number) =>
+    schedule?.schedule.filter((item) => item.days.includes((dayNum + 1) % 7)) || [];
+
+  return (
+    <div className="border-default space-y-4 rounded border px-6 pb-4">
+      <ol className="table border-collapse text-sm">
+        {weekdayNames(i18n.language, 1, "long").map((day, index) => {
+          const isAvailable = !!filterDays(index).length;
+          return (
+            <li key={day} className="my-6 flex border-transparent last:mb-2">
+              <span
+                className={classNames(
+                  "w-20 font-medium sm:w-32 ",
+                  !isAvailable ? "text-subtle line-through" : "text-default"
+                )}>
+                {day}
+              </span>
+              {isLoading ? (
+                <SkeletonText className="block h-5 w-60" />
+              ) : isAvailable ? (
+                <div className="space-y-3 text-right">
+                  {filterDays(index).map((dayRange, i) => (
+                    <div key={i} className="text-default flex items-center leading-4">
+                      <span className="w-16 sm:w-28 sm:text-left">
+                        {format(dayRange.startTime, timeFormat === 12)}
+                      </span>
+                      <span className="ms-4">-</span>
+                      <div className="ml-6">{format(dayRange.endTime, timeFormat === 12)}</div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <span className="text-subtle ml-6 sm:ml-0">{t("unavailable")}</span>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+      <hr className="border-subtle" />
+      <div className="flex flex-col justify-center gap-2 sm:flex-row sm:justify-between">
+        <span className="text-default flex items-center justify-center text-sm sm:justify-start">
+          <Globe className="h-3.5 w-3.5 ltr:mr-2 rtl:ml-2" />
+          {schedule?.timeZone || <SkeletonText className="block h-5 w-32" />}
+        </span>
+        {!!schedule?.id && !schedule.isManaged && (
+          <Button
+            href={`/availability/${schedule.id}`}
+            disabled={isLoading}
+            color="minimal"
+            EndIcon={ExternalLink}
+            target="_blank"
+            rel="noopener noreferrer">
+            {t("edit_availability")}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const EventTypeSchedule = ({ eventType }: { eventType: EventTypeSetup }) => {
+  const { t } = useLocale();
+  const { shouldLockIndicator, shouldLockDisableProps, isManagedEventType, isChildrenManagedEventType } =
+    useLockedFieldsManager(
+      eventType,
+      t("locked_fields_admin_description"),
+      t("locked_fields_member_description")
+    );
+  const { watch } = useFormContext<FormValues>();
+  const watchSchedule = watch("schedule");
+  const formMethods = useFormContext<FormValues>();
+  const [options, setOptions] = useState<AvailabilityOption[]>([]);
+
+  const { isLoading } = trpc.viewer.availability.list.useQuery(undefined, {
+    onSuccess: ({ schedules }) => {
+      const options = schedules.map((schedule) => ({
+        value: schedule.id,
+        label: schedule.name,
+        isDefault: schedule.isDefault,
+        isManaged: false,
+      }));
+
+      // We are showing a managed event for a team admin, so adding the option to let members choose their schedule
+      if (isManagedEventType) {
+        options.push({
+          value: 0,
+          label: t("members_default_schedule"),
+          isDefault: false,
+          isManaged: false,
+        });
+      }
+
+      // We are showing a managed event for a member and team owner selected their own schedule, so adding
+      // the managed schedule option
+      if (
+        isChildrenManagedEventType &&
+        watchSchedule &&
+        !schedules.find((schedule) => schedule.id === watchSchedule)
+      ) {
+        options.push({
+          value: watchSchedule,
+          label: eventType.scheduleName ?? t("default_schedule_name"),
+          isDefault: false,
+          isManaged: false,
+        });
+      }
+
+      setOptions(options);
+
+      const scheduleId = formMethods.getValues("schedule");
+      const value = options.find((option) =>
+        scheduleId
+          ? option.value === scheduleId
+          : option.value === schedules.find((schedule) => schedule.isDefault)?.id
+      );
+
+      formMethods.setValue("availability", value);
+    },
+  });
+
+  const availabilityValue = formMethods.watch("availability");
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label htmlFor="availability" className="text-default mb-2 block text-sm font-medium leading-none">
+          {t("availability")}
+          {shouldLockIndicator("availability")}
+        </label>
+        {isLoading && <SelectSkeletonLoader />}
+        {!isLoading && (
+          <Controller
+            name="schedule"
+            render={({ field }) => {
+              return (
+                <Select
+                  placeholder={t("select")}
+                  options={options}
+                  isSearchable={false}
+                  onChange={(selected) => {
+                    field.onChange(selected?.value || null);
+                    if (selected?.value) formMethods.setValue("availability", selected);
+                  }}
+                  className="block w-full min-w-0 flex-1 rounded-sm text-sm"
+                  value={availabilityValue}
+                  components={{ Option, SingleValue }}
+                  isMulti={false}
+                />
+              );
+            }}
+          />
+        )}
+      </div>
+      {availabilityValue?.value !== 0 ? (
+        <EventTypeScheduleDetails
+          selectedScheduleValue={availabilityValue}
+          isManagedEventType={isManagedEventType || isChildrenManagedEventType}
+        />
+      ) : (
+        isManagedEventType && (
+          <p className="!mt-2 ml-1 text-sm text-gray-600">{t("members_default_schedule_description")}</p>
+        )
+      )}
+    </div>
+  );
+};
+
+const UseCommonScheduleSettingsToggle = ({ eventType }: { eventType: EventTypeSetup }) => {
+  const { t } = useLocale();
+  const { resetField, setValue } = useFormContext<FormValues>();
+  return (
+    <Controller
+      name="metadata.config.useHostSchedulesForTeamEvent"
+      render={({ field: { value, onChange } }) => (
+        <SettingsToggle
+          checked={!value}
+          onCheckedChange={(checked) => {
+            onChange(!checked);
+            if (checked) {
+              resetField("schedule");
+            } else {
+              setValue("schedule", null);
+            }
+          }}
+          title={t("choose_common_schedule_team_event")}
+          description={t("choose_common_schedule_team_event_description")}>
+          <EventTypeSchedule eventType={eventType} />
+        </SettingsToggle>
+      )}
+    />
+  );
+};
+
+export const EventAvailabilityTab = ({
+  eventType,
+  isTeamEvent,
+}: {
+  eventType: EventTypeSetup;
+  isTeamEvent: boolean;
+}) => {
+  return isTeamEvent && eventType.schedulingType !== SchedulingType.MANAGED ? (
+    <UseCommonScheduleSettingsToggle eventType={eventType} />
+  ) : (
+    <EventTypeSchedule eventType={eventType} />
+  );
+};
@@ -7,6 +7,7 @@ import type { UseFormRegisterReturn } from "react-hook-form";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
 import type { SingleValue } from "react-select";

+import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
 import { classNames } from "@calcom/lib";
 import type { DurationType } from "@calcom/lib/convertToNewDurationType";
 import convertToNewDurationType from "@calcom/lib/convertToNewDurationType";
@@ -14,17 +15,8 @@ import findDurationType from "@calcom/lib/findDurationType";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { PeriodType } from "@calcom/prisma/client";
 import type { IntervalLimit } from "@calcom/types/Calendar";
-import {
-  Button,
-  DateRangePicker,
-  Input,
-  InputField,
-  Label,
-  Select,
-  SettingsToggle,
-  TextField,
-} from "@calcom/ui";
-import { FiPlus, FiTrash } from "@calcom/ui/components/icon";
+import { Button, DateRangePicker, InputField, Label, Select, SettingsToggle, TextField } from "@calcom/ui";
+import { Plus, Trash } from "@calcom/ui/components/icon";

 const MinimumBookingNoticeInput = React.forwardRef<
  HTMLInputElement,
@@ -78,6 +70,7 @@ const MinimumBookingNoticeInput = React.forwardRef<
      <div className="w-1/2 md:w-full">
        <InputField
          required
+          disabled={passThroughProps.disabled}
          defaultValue={minimumBookingNoticeDisplayValues.value}
          onChange={(e) =>
            setMinimumBookingNoticeDisplayValues({
@@ -95,6 +88,7 @@ const MinimumBookingNoticeInput = React.forwardRef<
      </div>
      <Select
        isSearchable={false}
+        isDisabled={passThroughProps.disabled}
        className="mb-0 ml-2 h-[38px] w-full capitalize md:min-w-[150px] md:max-w-[200px]"
        defaultValue={durationTypeOptions.find(
          (option) => option.value === minimumBookingNoticeDisplayValues.type
@@ -146,12 +140,30 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
    defaultValue: periodType?.type,
  });

+  const { shouldLockIndicator, shouldLockDisableProps } = useLockedFieldsManager(
+    eventType,
+    t("locked_fields_admin_description"),
+    t("locked_fields_member_description")
+  );
+
+  const bookingLimitsLocked = shouldLockDisableProps("bookingLimits");
+  const durationLimitsLocked = shouldLockDisableProps("durationLimits");
+  const periodTypeLocked = shouldLockDisableProps("periodType");
+
+  const optionsPeriod = [
+    { value: 1, label: t("calendar_days") },
+    { value: 0, label: t("business_days") },
+  ];
+
  return (
    <div className="space-y-8">
      <div className="space-y-4 lg:space-y-8">
        <div className="flex flex-col space-y-4 lg:flex-row lg:space-y-0 lg:space-x-4">
          <div className="w-full">
-            <Label htmlFor="beforeBufferTime">{t("before_event")} </Label>
+            <Label htmlFor="beforeBufferTime">
+              {t("before_event")}
+              {shouldLockIndicator("bookingLimits")}
+            </Label>
            <Controller
              name="beforeBufferTime"
              control={formMethods.control}
@@ -170,6 +182,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
                return (
                  <Select
                    isSearchable={false}
+                    isDisabled={shouldLockDisableProps("bookingLimits").disabled}
                    onChange={(val) => {
                      if (val) onChange(val.value);
                    }}
@@ -183,7 +196,10 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
            />
          </div>
          <div className="w-full">
-            <Label htmlFor="afterBufferTime">{t("after_event")} </Label>
+            <Label htmlFor="afterBufferTime">
+              {t("after_event")}
+              {shouldLockIndicator("bookingLimits")}
+            </Label>
            <Controller
              name="afterBufferTime"
              control={formMethods.control}
@@ -202,6 +218,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
                return (
                  <Select
                    isSearchable={false}
+                    isDisabled={shouldLockDisableProps("bookingLimits").disabled}
                    onChange={(val) => {
                      if (val) onChange(val.value);
                    }}
@@ -217,11 +234,20 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
        </div>
        <div className="flex flex-col space-y-4 lg:flex-row lg:space-y-0 lg:space-x-4">
          <div className="w-full">
-            <Label htmlFor="minimumBookingNotice">{t("minimum_booking_notice")} </Label>
-            <MinimumBookingNoticeInput {...formMethods.register("minimumBookingNotice")} />
+            <Label htmlFor="minimumBookingNotice">
+              {t("minimum_booking_notice")}
+              {shouldLockIndicator("minimumBookingNotice")}
+            </Label>
+            <MinimumBookingNoticeInput
+              disabled={shouldLockDisableProps("minimumBookingNotice").disabled}
+              {...formMethods.register("minimumBookingNotice")}
+            />
          </div>
          <div className="w-full">
-            <Label htmlFor="slotInterval">{t("slot_interval")} </Label>
+            <Label htmlFor="slotInterval">
+              {t("slot_interval")}
+              {shouldLockIndicator("slotInterval")}
+            </Label>
            <Controller
              name="slotInterval"
              control={formMethods.control}
@@ -239,6 +265,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
                return (
                  <Select
                    isSearchable={false}
+                    isDisabled={shouldLockDisableProps("slotInterval").disabled}
                    onChange={(val) => {
                      formMethods.setValue("slotInterval", val && (val.value || 0) > 0 ? val.value : null);
                    }}
@@ -261,6 +288,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
        render={({ field: { value } }) => (
          <SettingsToggle
            title={t("limit_booking_frequency")}
+            {...bookingLimitsLocked}
            description={t("limit_booking_frequency_description")}
            checked={Object.keys(value ?? {}).length > 0}
            onCheckedChange={(active) => {
@@ -272,7 +300,12 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
                formMethods.setValue("bookingLimits", {});
              }
            }}>
-            <IntervalLimitsManager propertyName="bookingLimits" defaultLimit={1} step={1} />
+            <IntervalLimitsManager
+              disabled={bookingLimitsLocked.disabled}
+              propertyName="bookingLimits"
+              defaultLimit={1}
+              step={1}
+            />
          </SettingsToggle>
        )}
      />
@@ -284,6 +317,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
          <SettingsToggle
            title={t("limit_total_booking_duration")}
            description={t("limit_total_booking_duration_description")}
+            {...durationLimitsLocked}
            checked={Object.keys(value ?? {}).length > 0}
            onCheckedChange={(active) => {
              if (active) {
@@ -297,6 +331,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
            <IntervalLimitsManager
              propertyName="durationLimits"
              defaultLimit={60}
+              disabled={durationLimitsLocked.disabled}
              step={15}
              textFieldSuffix={t("minutes")}
            />
@@ -311,13 +346,16 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
          <SettingsToggle
            title={t("limit_future_bookings")}
            description={t("limit_future_bookings_description")}
+            {...periodTypeLocked}
            checked={value && value !== "UNLIMITED"}
            onCheckedChange={(bool) => formMethods.setValue("periodType", bool ? "ROLLING" : "UNLIMITED")}>
            <RadioGroup.Root
              defaultValue={watchPeriodType}
              value={watchPeriodType}
              onValueChange={(val) => formMethods.setValue("periodType", val as PeriodType)}>
-              {PERIOD_TYPES.map((period) => {
+              {PERIOD_TYPES.filter((opt) =>
+                periodTypeLocked.disabled ? watchPeriodType === opt.type : true
+              ).map((period) => {
                if (period.type === "UNLIMITED") return null;
                return (
                  <div
@@ -326,30 +364,42 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
                      watchPeriodType === "UNLIMITED" && "pointer-events-none opacity-30"
                    )}
                    key={period.type}>
-                    <RadioGroup.Item
-                      id={period.type}
-                      value={period.type}
-                      className="min-w-4 bg-default flex h-4 w-4 cursor-pointer items-center rounded-full border border-black focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
-                      <RadioGroup.Indicator className="relative flex h-4 w-4 items-center justify-center after:block after:h-2 after:w-2 after:rounded-full after:bg-black" />
-                    </RadioGroup.Item>
+                    {!periodTypeLocked.disabled && (
+                      <RadioGroup.Item
+                        id={period.type}
+                        value={period.type}
+                        className="min-w-4 bg-default border-default flex h-4 w-4 cursor-pointer items-center rounded-full border focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
+                        <RadioGroup.Indicator className="after:bg-inverted relative flex h-4 w-4 items-center justify-center after:block after:h-2 after:w-2 after:rounded-full" />
+                      </RadioGroup.Item>
+                    )}
                    {period.prefix ? <span>{period.prefix}&nbsp;</span> : null}
                    {period.type === "ROLLING" && (
-                      <div className="flex h-9">
-                        <Input
+                      <div className="flex items-center">
+                        <TextField
+                          labelSrOnly
                          type="number"
-                          className="border-default block w-16 rounded-md py-3 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
+                          className="border-default my-0 block w-16 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
                          placeholder="30"
+                          disabled={periodTypeLocked.disabled}
                          {...formMethods.register("periodDays", { valueAsNumber: true })}
                          defaultValue={eventType.periodDays || 30}
                        />
-                        <select
-                          id=""
-                          className="border-default bg-default text-default block h-9 w-full rounded-md py-2 pl-3 pr-10 text-sm focus:outline-none"
-                          {...formMethods.register("periodCountCalendarDays")}
-                          defaultValue={eventType.periodCountCalendarDays ? "1" : "0"}>
-                          <option value="1">{t("calendar_days")}</option>
-                          <option value="0">{t("business_days")}</option>
-                        </select>
+                        <Select
+                          options={optionsPeriod}
+                          isSearchable={false}
+                          isDisabled={periodTypeLocked.disabled}
+                          onChange={(opt) => {
+                            formMethods.setValue(
+                              "periodCountCalendarDays",
+                              opt?.value.toString() as "0" | "1"
+                            );
+                          }}
+                          defaultValue={
+                            optionsPeriod.find(
+                              (opt) => opt.value === (eventType.periodCountCalendarDays ? 1 : 0)
+                            ) ?? optionsPeriod[0]
+                          }
+                        />
                      </div>
                    )}
                    {period.type === "RANGE" && (
@@ -362,6 +412,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
                            <DateRangePicker
                              startDate={formMethods.getValues("periodDates").startDate}
                              endDate={formMethods.getValues("periodDates").endDate}
+                              disabled={periodTypeLocked.disabled}
                              onDatesChange={({ startDate, endDate }) => {
                                formMethods.setValue("periodDates", {
                                  startDate,
@@ -400,6 +451,7 @@ type IntervalLimitItemProps = {
  step: number;
  value: number;
  textFieldSuffix?: string;
+  disabled?: boolean;
  selectOptions: { value: keyof IntervalLimit; label: string }[];
  hasDeleteButton?: boolean;
  onDelete: (intervalLimitsKey: IntervalLimitsKey) => void;
@@ -414,6 +466,7 @@ const IntervalLimitItem = ({
  textFieldSuffix,
  selectOptions,
  hasDeleteButton,
+  disabled,
  onDelete,
  onLimitChange,
  onIntervalSelect,
@@ -424,8 +477,9 @@ const IntervalLimitItem = ({
        required
        type="number"
        containerClassName={textFieldSuffix ? "w-44 -mb-1" : "w-16 mb-0"}
-        className="mb-0"
+        className="mb-0 !h-auto"
        placeholder={`${value}`}
+        disabled={disabled}
        min={step}
        step={step}
        defaultValue={value}
@@ -435,11 +489,12 @@ const IntervalLimitItem = ({
      <Select
        options={selectOptions}
        isSearchable={false}
+        isDisabled={disabled}
        defaultValue={INTERVAL_LIMIT_OPTIONS.find((option) => option.value === limitKey)}
        onChange={onIntervalSelect}
      />
-      {hasDeleteButton && (
-        <Button variant="icon" StartIcon={FiTrash} color="destructive" onClick={() => onDelete(limitKey)} />
+      {hasDeleteButton && !disabled && (
+        <Button variant="icon" StartIcon={Trash} color="destructive" onClick={() => onDelete(limitKey)} />
      )}
    </div>
  );
@@ -450,6 +505,7 @@ type IntervalLimitsManagerProps<K extends "durationLimits" | "bookingLimits"> =
  defaultLimit: number;
  step: number;
  textFieldSuffix?: string;
+  disabled?: boolean;
 };

 const IntervalLimitsManager = <K extends "durationLimits" | "bookingLimits">({
@@ -457,6 +513,7 @@ const IntervalLimitsManager = <K extends "durationLimits" | "bookingLimits">({
  defaultLimit,
  step,
  textFieldSuffix,
+  disabled,
 }: IntervalLimitsManagerProps<K>) => {
  const { watch, setValue, control } = useFormContext<FormValues>();
  const watchIntervalLimits = watch(propertyName);
@@ -506,6 +563,7 @@ const IntervalLimitsManager = <K extends "durationLimits" | "bookingLimits">({
                      limitKey={limitKey}
                      step={step}
                      value={value}
+                      disabled={disabled}
                      textFieldSuffix={textFieldSuffix}
                      hasDeleteButton={Object.keys(currentIntervalLimits).length > 1}
                      selectOptions={INTERVAL_LIMIT_OPTIONS.filter(
@@ -536,8 +594,8 @@ const IntervalLimitsManager = <K extends "durationLimits" | "bookingLimits">({
                    />
                  );
                })}
-            {currentIntervalLimits && Object.keys(currentIntervalLimits).length <= 3 && (
-              <Button color="minimal" StartIcon={FiPlus} onClick={addLimit}>
+            {currentIntervalLimits && Object.keys(currentIntervalLimits).length <= 3 && !disabled && (
+              <Button color="minimal" StartIcon={Plus} onClick={addLimit}>
                {t("add_limit")}
              </Button>
            )}
@@ -11,7 +11,7 @@ export const EventRecurringTab = ({ eventType }: Pick<EventTypeSetupProps, "even

  return (
    <div className="">
-      <RecurringEventController paymentEnabled={requirePayment} recurringEvent={eventType.recurringEvent} />
+      <RecurringEventController paymentEnabled={requirePayment} eventType={eventType} />
    </div>
  );
 };
@@ -11,6 +11,8 @@ import { z } from "zod";

 import type { EventLocationType } from "@calcom/app-store/locations";
 import { getEventLocationType, MeetLocationType, LocationType } from "@calcom/app-store/locations";
+import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
+import cx from "@calcom/lib/classNames";
 import { CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { md } from "@calcom/lib/markdownIt";
@@ -27,7 +29,7 @@ import {
  SkeletonContainer,
  SkeletonText,
 } from "@calcom/ui";
-import { FiEdit2, FiCheck, FiX, FiPlus } from "@calcom/ui/components/icon";
+import { Edit2, Check, X, Plus } from "@calcom/ui/components/icon";

 import { EditLocationDialog } from "@components/dialog/EditLocationDialog";
 import type { SingleValueLocationOption, LocationOption } from "@components/ui/form/LocationSelect";
@@ -45,8 +47,33 @@ const getLocationFromType = (
  }
 };

+const getLocationInfo = (props: Pick<EventTypeSetupProps, "eventType" | "locationOptions">) => {
+  const locationAvailable =
+    props.eventType.locations &&
+    props.eventType.locations.length > 0 &&
+    props.locationOptions.some((op) =>
+      op.options.find((opt) => opt.value === props.eventType.locations[0].type)
+    );
+  const locationDetails = props.eventType.locations &&
+    props.eventType.locations.length > 0 &&
+    !locationAvailable && {
+      slug: props.eventType.locations[0].type
+        .replace("integrations:", "")
+        .replace(":", "-")
+        .replace("_video", ""),
+      name: props.eventType.locations[0].type
+        .replace("integrations:", "")
+        .replace(":", " ")
+        .replace("_video", "")
+        .split(" ")
+        .map((word) => word[0].toUpperCase() + word.slice(1))
+        .join(" "),
+    };
+  return { locationAvailable, locationDetails };
+};
 interface DescriptionEditorProps {
  description?: string | null;
+  editable?: boolean;
 }

 const DescriptionEditor = (props: DescriptionEditorProps) => {
@@ -54,6 +81,7 @@ const DescriptionEditor = (props: DescriptionEditorProps) => {
  const [mounted, setIsMounted] = useState(false);
  const { t } = useLocale();
  const { description } = props;
+  const [firstRender, setFirstRender] = useState(true);
  useEffect(() => {
    setIsMounted(true);
  }, []);
@@ -64,6 +92,9 @@ const DescriptionEditor = (props: DescriptionEditorProps) => {
      setText={(value: string) => formMethods.setValue("description", turndown(value))}
      excludedToolbarItems={["blockType"]}
      placeholder={t("quick_video_meeting")}
+      editable={props.editable}
+      firstRender={firstRender}
+      setFirstRender={setFirstRender}
    />
  ) : (
    <SkeletonContainer>
@@ -174,6 +205,13 @@ export const EventSetupTab = (
    resolver: zodResolver(locationFormSchema),
  });

+  const { isChildrenManagedEventType, isManagedEventType, shouldLockIndicator, shouldLockDisableProps } =
+    useLockedFieldsManager(
+      eventType,
+      t("locked_fields_admin_description"),
+      t("locked_fields_member_description")
+    );
+
  const Locations = () => {
    const { t } = useLocale();

@@ -188,6 +226,12 @@ export const EventSetupTab = (
      return true;
    });

+    const defaultValue = isManagedEventType
+      ? locationOptions.find((op) => op.label === t("default"))?.options[0]
+      : undefined;
+
+    const { locationDetails, locationAvailable } = getLocationInfo(props);
+
    return (
      <div className="w-full">
        {validLocations.length === 0 && (
@@ -195,6 +239,8 @@ export const EventSetupTab = (
            <LocationSelect
              placeholder={t("select")}
              options={locationOptions}
+              isDisabled={shouldLockDisableProps("locations").disabled}
+              defaultValue={defaultValue}
              isSearchable={false}
              className="block w-full min-w-0 flex-1 rounded-sm text-sm"
              menuPlacement="auto"
@@ -235,7 +281,13 @@ export const EventSetupTab = (
                    <div className="flex items-center">
                      <img
                        src={eventLocationType.iconUrl}
-                        className="h-4 w-4"
+                        className={cx(
+                          "h-4 w-4",
+                          // invert all the icons except app icons
+                          eventLocationType.iconUrl &&
+                            !eventLocationType.iconUrl.startsWith("/api") &&
+                            "dark:invert"
+                        )}
                        alt={`${eventLocationType.label} logo`}
                      />
                      <span className="line-clamp-1 ms-1 text-sm">{eventLabel}</span>
@@ -253,10 +305,10 @@ export const EventSetupTab = (
                        }}
                        aria-label={t("edit")}
                        className="hover:text-emphasis text-subtle mr-1 p-1">
-                        <FiEdit2 className="h-4 w-4" />
+                        <Edit2 className="h-4 w-4" />
                      </button>
                      <button type="button" onClick={() => removeLocation(location)} aria-label={t("remove")}>
-                        <FiX className="border-l-1 hover:text-emphasis text-subtle h-6 w-6 pl-1 " />
+                        <X className="border-l-1 hover:text-emphasis text-subtle h-6 w-6 pl-1 " />
                      </button>
                    </div>
                  </div>
@@ -268,7 +320,7 @@ export const EventSetupTab = (
                location.type === MeetLocationType && destinationCalendar?.integration !== "google_calendar"
            ) && (
              <div className="text-default flex text-sm">
-                <FiCheck className="mt-0.5 mr-1.5 h-2 w-2.5" />
+                <Check className="mt-0.5 mr-1.5 h-2 w-2.5" />
                <Trans i18nKey="event_type_requres_google_cal">
                  <p>
                    The “Add to calendar” for this event type needs to be a Google Calendar for Meet to work.
@@ -282,11 +334,19 @@ export const EventSetupTab = (
                </Trans>
              </div>
            )}
-            {validLocations.length > 0 && (
+            {isChildrenManagedEventType && !locationAvailable && locationDetails && (
+              <p className="pl-1 text-sm leading-none text-red-600">
+                {t("app_not_connected", { appName: locationDetails.name })}{" "}
+                <a className="underline" href={`${CAL_URL}/apps/${locationDetails.slug}`}>
+                  {t("connect_now")}
+                </a>
+              </p>
+            )}
+            {validLocations.length > 0 && !isManagedEventType && !isChildrenManagedEventType && (
              <li>
                <Button
                  data-testid="add-location"
-                  StartIcon={FiPlus}
+                  StartIcon={Plus}
                  color="minimal"
                  onClick={() => setShowLocationModal(true)}>
                  {t("add_location")}
@@ -299,22 +359,33 @@ export const EventSetupTab = (
    );
  };

+  const lengthLockedProps = shouldLockDisableProps("length");
+  const descriptionLockedProps = shouldLockDisableProps("description");
+
  return (
    <div>
      <div className="space-y-8">
        <TextField
          required
          label={t("title")}
+          {...shouldLockDisableProps("title")}
          defaultValue={eventType.title}
          {...formMethods.register("title")}
        />
        <div>
-          <Label>{t("description")}</Label>
-          <DescriptionEditor description={eventType?.description} />
+          <Label>
+            {t("description")}
+            {shouldLockIndicator("description")}
+          </Label>
+          <DescriptionEditor
+            description={eventType?.description}
+            editable={!descriptionLockedProps.disabled}
+          />
        </div>
        <TextField
          required
          label={t("URL")}
+          {...shouldLockDisableProps("slug")}
          defaultValue={eventType.slug}
          addOnLeading={
            <>
@@ -367,12 +438,14 @@ export const EventSetupTab = (
            <div>
              <Skeleton as={Label} loadingClassName="w-16">
                {t("default_duration")}
+                {shouldLockIndicator("length")}
              </Skeleton>
              <Select
                value={defaultDuration}
                isSearchable={false}
                name="length"
                className="text-sm"
+                isDisabled={lengthLockedProps.disabled}
                noOptionsMessage={() => t("default_duration_no_options")}
                options={selectedMultipleDuration}
                onChange={(option) => {
@@ -388,32 +461,36 @@ export const EventSetupTab = (
          <TextField
            required
            type="number"
+            {...lengthLockedProps}
            label={t("duration")}
            defaultValue={eventType.length ?? 15}
            {...formMethods.register("length")}
            addOnSuffix={<>{t("minutes")}</>}
          />
        )}
-        <div className="!mt-4 [&_label]:my-1 [&_label]:font-normal">
-          <SettingsToggle
-            title={t("allow_booker_to_select_duration")}
-            checked={multipleDuration !== undefined}
-            onCheckedChange={() => {
-              if (multipleDuration !== undefined) {
-                setMultipleDuration(undefined);
-                formMethods.setValue("metadata.multipleDuration", undefined);
-                formMethods.setValue("length", eventType.length);
-              } else {
-                setMultipleDuration([]);
-                formMethods.setValue("metadata.multipleDuration", []);
-                formMethods.setValue("length", 0);
-              }
-            }}
-          />
-        </div>
+        {!lengthLockedProps.disabled && (
+          <div className="!mt-4 [&_label]:my-1 [&_label]:font-normal">
+            <SettingsToggle
+              title={t("allow_booker_to_select_duration")}
+              checked={multipleDuration !== undefined}
+              onCheckedChange={() => {
+                if (multipleDuration !== undefined) {
+                  setMultipleDuration(undefined);
+                  formMethods.setValue("metadata.multipleDuration", undefined);
+                  formMethods.setValue("length", eventType.length);
+                } else {
+                  setMultipleDuration([]);
+                  formMethods.setValue("metadata.multipleDuration", []);
+                  formMethods.setValue("length", 0);
+                }
+              }}
+            />
+          </div>
+        )}
        <div>
          <Skeleton as={Label} loadingClassName="w-16">
            {t("location")}
+            {shouldLockIndicator("locations")}
          </Skeleton>

          <Controller
@@ -1,4 +1,4 @@
-import type { SchedulingType } from "@prisma/client";
+import { SchedulingType } from "@prisma/client";
 import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
 import { useEffect, useRef } from "react";
 import type { ComponentProps } from "react";
@@ -7,24 +7,46 @@ import type { Options } from "react-select";

 import type { CheckedSelectOption } from "@calcom/features/eventtypes/components/CheckedTeamSelect";
 import CheckedTeamSelect from "@calcom/features/eventtypes/components/CheckedTeamSelect";
+import ChildrenEventTypeSelect from "@calcom/features/eventtypes/components/ChildrenEventTypeSelect";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Label, Select } from "@calcom/ui";

-interface IMemberToValue {
+interface IUserToValue {
  id: number | null;
  name: string | null;
  username: string | null;
  email: string;
 }

-const mapUserToValue = ({ id, name, username, email }: IMemberToValue) => ({
+const mapUserToValue = ({ id, name, username, email }: IUserToValue) => ({
  value: `${id || ""}`,
  label: `${name || ""}`,
  avatar: `${WEBAPP_URL}/${username}/avatar.png`,
  email,
 });

+export const mapMemberToChildrenOption = (
+  member: EventTypeSetupProps["teamMembers"][number],
+  slug: string
+) => {
+  return {
+    slug,
+    hidden: false,
+    created: false,
+    owner: {
+      id: member.id,
+      name: member.name ?? "",
+      email: member.email,
+      username: member.username ?? "",
+      membership: member.membership,
+      eventTypeSlugs: member.eventTypes ?? [],
+    },
+    value: `${member.id ?? ""}`,
+    label: member.name ?? "",
+  };
+};
+
 const sortByLabel = (a: ReturnType<typeof mapUserToValue>, b: ReturnType<typeof mapUserToValue>) => {
  if (a.label < b.label) {
    return -1;
@@ -35,6 +57,40 @@ const sortByLabel = (a: ReturnType<typeof mapUserToValue>, b: ReturnType<typeof
  return 0;
 };

+const ChildrenEventTypesList = ({
+  options = [],
+  value,
+  onChange,
+  ...rest
+}: {
+  value: ReturnType<typeof mapMemberToChildrenOption>[];
+  onChange?: (options: ReturnType<typeof mapMemberToChildrenOption>[]) => void;
+  options?: Options<ReturnType<typeof mapMemberToChildrenOption>>;
+} & Omit<Partial<ComponentProps<typeof ChildrenEventTypeSelect>>, "onChange" | "value">) => {
+  const { t } = useLocale();
+  return (
+    <div className="flex flex-col space-y-5">
+      <div>
+        <Label>{t("assign_to")}</Label>
+        <ChildrenEventTypeSelect
+          onChange={(options) => {
+            onChange &&
+              onChange(
+                options.map((option) => ({
+                  ...option,
+                }))
+              );
+          }}
+          value={value}
+          options={options.filter((opt) => !value.find((val) => val.owner.id.toString() === opt.value))}
+          controlShouldRenderValue={false}
+          {...rest}
+        />
+      </div>
+    </div>
+  );
+};
+
 const CheckedHostField = ({
  labelText,
  placeholder,
@@ -123,6 +179,21 @@ const RoundRobinHosts = ({
  );
 };

+const ChildrenEventTypes = ({
+  childrenEventTypeOptions,
+}: {
+  childrenEventTypeOptions: ReturnType<typeof mapMemberToChildrenOption>[];
+}) => {
+  return (
+    <Controller<FormValues>
+      name="children"
+      render={({ field: { onChange, value } }) => (
+        <ChildrenEventTypesList value={value} options={childrenEventTypeOptions} onChange={onChange} />
+      )}
+    />
+  );
+};
+
 const Hosts = ({
  teamMembers,
 }: {
@@ -189,6 +260,7 @@ const Hosts = ({
                />*/}
            </>
          ),
+          MANAGED: <></>,
        };
        return !!schedulingType ? schedulingTypeRender[schedulingType] : <></>;
      }}
@@ -196,7 +268,11 @@ const Hosts = ({
  );
 };

-export const EventTeamTab = ({ team, teamMembers }: Pick<EventTypeSetupProps, "teamMembers" | "team">) => {
+export const EventTeamTab = ({
+  team,
+  teamMembers,
+  eventType,
+}: Pick<EventTypeSetupProps, "teamMembers" | "team" | "eventType">) => {
  const { t } = useLocale();

  const schedulingTypeOptions: {
@@ -216,9 +292,13 @@ export const EventTeamTab = ({ team, teamMembers }: Pick<EventTypeSetupProps, "t
    },
  ];
  const teamMembersOptions = teamMembers.map(mapUserToValue);
+  const childrenEventTypeOptions = teamMembers.map((member) => {
+    return mapMemberToChildrenOption(member, eventType.slug);
+  });
+  const isManagedEventType = eventType.schedulingType === SchedulingType.MANAGED;
  return (
    <div>
-      {team && (
+      {team && !isManagedEventType && (
        <div className="space-y-5">
          <div className="flex flex-col">
            <Label>{t("scheduling_type")}</Label>
@@ -239,6 +319,9 @@ export const EventTeamTab = ({ team, teamMembers }: Pick<EventTypeSetupProps, "t
          <Hosts teamMembers={teamMembersOptions} />
        </div>
      )}
+      {team && isManagedEventType && (
+        <ChildrenEventTypes childrenEventTypeOptions={childrenEventTypeOptions} />
+      )}
    </div>
  );
 };
@@ -1,16 +1,17 @@
+import type { Webhook } from "@prisma/client";
+import { Webhook as TbWebhook } from "lucide-react";
 import type { EventTypeSetupProps } from "pages/event-types/[type]";
 import { useState } from "react";
-import { TbWebhook } from "react-icons/tb";

+import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
 import { WebhookForm } from "@calcom/features/webhooks/components";
 import type { WebhookFormSubmitData } from "@calcom/features/webhooks/components/WebhookForm";
 import WebhookListItem from "@calcom/features/webhooks/components/WebhookListItem";
 import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import type { Webhook } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
-import { Button, Dialog, DialogContent, EmptyScreen, showToast } from "@calcom/ui";
-import { FiPlus } from "@calcom/ui/components/icon";
+import { Alert, Button, Dialog, DialogContent, EmptyScreen, showToast } from "@calcom/ui";
+import { Plus, Lock } from "@calcom/ui/components/icon";

 export const EventTeamWebhooksTab = ({
  eventType,
@@ -85,12 +86,20 @@ export const EventTeamWebhooksTab = ({
      <Button
        color="secondary"
        data-testid="new_webhook"
-        StartIcon={FiPlus}
+        StartIcon={Plus}
        onClick={() => setCreateModalOpen(true)}>
        {t("new_webhook")}
      </Button>
    );
  };
+
+  const { shouldLockDisableProps, isChildrenManagedEventType, isManagedEventType } = useLockedFieldsManager(
+    eventType,
+    t("locked_fields_admin_description"),
+    t("locked_fields_member_description")
+  );
+  const webhookLockedStatus = shouldLockDisableProps("webhooks");
+
  return (
    <div>
      {team && webhooks && !isLoading && (
@@ -98,15 +107,24 @@ export const EventTeamWebhooksTab = ({
          <div>
            <div>
              <>
+                {isManagedEventType && (
+                  <Alert
+                    severity="neutral"
+                    className="mb-2"
+                    title={t("locked_for_members")}
+                    message={t("locked_webhooks_description")}
+                  />
+                )}
                {webhooks.length ? (
                  <>
-                    <div className="mb-8 rounded-md border">
+                    <div className="mb-2 rounded-md border">
                      {webhooks.map((webhook, index) => {
                        return (
                          <WebhookListItem
                            key={webhook.id}
                            webhook={webhook}
                            lastItem={webhooks.length === index + 1}
+                            canEditWebhook={!webhookLockedStatus.disabled}
                            onEditWebhook={() => {
                              setEditModalOpen(true);
                              setWebhookToEdit(webhook);
@@ -122,7 +140,15 @@ export const EventTeamWebhooksTab = ({
                    Icon={TbWebhook}
                    headline={t("create_your_first_webhook")}
                    description={t("create_your_first_team_webhook_description", { appName: APP_NAME })}
-                    buttonRaw={<NewWebhookButton />}
+                    buttonRaw={
+                      isChildrenManagedEventType && !isManagedEventType ? (
+                        <Button StartIcon={Lock} color="secondary" disabled>
+                          {t("locked_by_admin")}
+                        </Button>
+                      ) : (
+                        <NewWebhookButton />
+                      )
+                    }
                  />
                )}
              </>
@@ -1,10 +1,13 @@
+import { SchedulingType } from "@prisma/client";
+import { Webhook as TbWebhook } from "lucide-react";
 import type { TFunction } from "next-i18next";
+import { Trans } from "next-i18next";
 import { useRouter } from "next/router";
 import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
 import { useMemo, useState, Suspense } from "react";
 import type { UseFormReturn } from "react-hook-form";
-import { TbWebhook } from "react-icons/tb";

+import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
 import Shell from "@calcom/features/shell/Shell";
 import { classNames } from "@calcom/lib";
 import { CAL_URL } from "@calcom/lib/constants";
@@ -32,22 +35,23 @@ import {
  VerticalTabs,
 } from "@calcom/ui";
 import {
-  FiLink,
-  FiCalendar,
-  FiClock,
-  FiSliders,
-  FiRepeat,
-  FiGrid,
-  FiZap,
-  FiUsers,
-  FiExternalLink,
-  FiCode,
-  FiTrash,
-  FiMoreHorizontal,
-  FiLoader,
+  Link as LinkIcon,
+  Calendar,
+  Clock,
+  Sliders,
+  Repeat,
+  Grid,
+  Zap,
+  Users,
+  ExternalLink,
+  Code,
+  Trash,
+  MoreHorizontal,
+  Loader,
 } from "@calcom/ui/components/icon";

 import { EmbedButton, EmbedDialog } from "@components/Embed";
+import type { AvailabilityOption } from "@components/eventtype/EventAvailabilityTab";

 type Props = {
  children: React.ReactNode;
@@ -60,6 +64,7 @@ type Props = {
  enabledWorkflowsNumber: number;
  formMethods: UseFormReturn<FormValues>;
  isUpdateMutationLoading?: boolean;
+  availability?: AvailabilityOption;
 };

 function getNavigation(props: {
@@ -68,8 +73,10 @@ function getNavigation(props: {
  enabledAppsNumber: number;
  enabledWorkflowsNumber: number;
  installedAppsNumber: number;
+  availability: AvailabilityOption | undefined;
 }) {
-  const { eventType, t, enabledAppsNumber, installedAppsNumber, enabledWorkflowsNumber } = props;
+  const { eventType, t, enabledAppsNumber, installedAppsNumber, enabledWorkflowsNumber, availability } =
+    props;
  const duration =
    eventType.metadata?.multipleDuration?.map((duration) => ` ${duration}`) || eventType.length;

@@ -77,44 +84,38 @@ function getNavigation(props: {
    {
      name: "event_setup_tab_title",
      href: `/event-types/${eventType.id}?tabName=setup`,
-      icon: FiLink,
+      icon: LinkIcon,
      info: `${duration} ${t("minute_timeUnit")}`, // TODO: Get this from props
    },
-    {
-      name: "availability",
-      href: `/event-types/${eventType.id}?tabName=availability`,
-      icon: FiCalendar,
-      info: `default_schedule_name`, // TODO: Get this from props
-    },
    {
      name: "event_limit_tab_title",
      href: `/event-types/${eventType.id}?tabName=limits`,
-      icon: FiClock,
+      icon: Clock,
      info: `event_limit_tab_description`,
    },
    {
      name: "event_advanced_tab_title",
      href: `/event-types/${eventType.id}?tabName=advanced`,
-      icon: FiSliders,
+      icon: Sliders,
      info: `event_advanced_tab_description`,
    },
    {
      name: "recurring",
      href: `/event-types/${eventType.id}?tabName=recurring`,
-      icon: FiRepeat,
+      icon: Repeat,
      info: `recurring_event_tab_description`,
    },
    {
      name: "apps",
      href: `/event-types/${eventType.id}?tabName=apps`,
-      icon: FiGrid,
+      icon: Grid,
      //TODO: Handle proper translation with count handling
      info: `${installedAppsNumber} apps, ${enabledAppsNumber} ${t("active")}`,
    },
    {
      name: "workflows",
      href: `/event-types/${eventType.id}?tabName=workflows`,
-      icon: FiZap,
+      icon: Zap,
      info: `${enabledWorkflowsNumber} ${t("active")}`,
    },
  ];
@@ -131,13 +132,17 @@ function EventTypeSingleLayout({
  enabledWorkflowsNumber,
  isUpdateMutationLoading,
  formMethods,
+  availability,
 }: Props) {
  const utils = trpc.useContext();
  const { t } = useLocale();
  const router = useRouter();
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);

-  const hasPermsToDelete = currentUserMembership?.role !== "MEMBER" || !currentUserMembership;
+  const hasPermsToDelete =
+    currentUserMembership?.role !== "MEMBER" ||
+    !currentUserMembership ||
+    eventType.schedulingType === SchedulingType.MANAGED;

  const deleteMutation = trpc.viewer.eventTypes.delete.useMutation({
    onSuccess: async () => {
@@ -157,23 +162,56 @@ function EventTypeSingleLayout({
    },
  });

+  const { isManagedEventType, isChildrenManagedEventType } = useLockedFieldsManager(
+    eventType,
+    t("locked_fields_admin_description"),
+    t("locked_fields_member_description")
+  );
+
  // Define tab navigation here
  const EventTypeTabs = useMemo(() => {
-    const navigation = getNavigation({
+    let navigation = getNavigation({
      t,
      eventType,
      enabledAppsNumber,
      installedAppsNumber,
      enabledWorkflowsNumber,
+      availability,
+    });
+    navigation.splice(1, 0, {
+      name: "availability",
+      href: `/event-types/${eventType.id}?tabName=availability`,
+      icon: Calendar,
+      info:
+        isManagedEventType || isChildrenManagedEventType
+          ? eventType.schedule === null
+            ? "Member's default schedule"
+            : isChildrenManagedEventType
+            ? `${
+                eventType.scheduleName
+                  ? `${eventType.scheduleName} - ${t("managed")}`
+                  : `default_schedule_name`
+              }`
+            : eventType.scheduleName ?? `default_schedule_name`
+          : `default_schedule_name`,
    });
    // If there is a team put this navigation item within the tabs
    if (team) {
      navigation.splice(2, 0, {
        name: "assignment",
        href: `/event-types/${eventType.id}?tabName=team`,
-        icon: FiUsers,
-        info: eventType.schedulingType === "COLLECTIVE" ? "collective" : "round_robin",
+        icon: Users,
+        info: `${t(eventType.schedulingType?.toLowerCase() ?? "")}${
+          isManagedEventType
+            ? ` - ${t("count_members", { count: formMethods.watch("children").length || 0 })}`
+            : ""
+        }`,
      });
+    }
+    if (isManagedEventType || isChildrenManagedEventType) {
+      // Removing apps and workflows for manageg event types by admins v1
+      navigation = navigation.slice(0, -2);
+    } else {
      navigation.push({
        name: "webhooks",
        href: `/event-types/${eventType.id}?tabName=webhooks`,
@@ -182,13 +220,14 @@ function EventTypeSingleLayout({
      });
    }
    return navigation;
-  }, [t, eventType, installedAppsNumber, enabledAppsNumber, enabledWorkflowsNumber, team]);
+  }, [t, eventType, installedAppsNumber, enabledAppsNumber, enabledWorkflowsNumber, team, availability]);

  const permalink = `${CAL_URL}/${team ? `team/${team.slug}` : eventType.users[0].username}/${
    eventType.slug
  }`;

  const embedLink = `${team ? `team/${team.slug}` : eventType.users[0].username}/${eventType.slug}`;
+  const isManagedEvent = eventType.schedulingType === SchedulingType.MANAGED ? "_managed" : "";

  return (
    <Shell
@@ -197,77 +236,87 @@ function EventTypeSingleLayout({
      heading={eventType.title}
      CTA={
        <div className="flex items-center justify-end">
-          <div className="sm:hover:bg-subtle hidden items-center rounded-md px-2 lg:flex">
-            <Skeleton
-              as={Label}
-              htmlFor="hiddenSwitch"
-              className="mt-2 hidden cursor-pointer self-center whitespace-nowrap pr-2 sm:inline">
-              {t("hide_from_profile")}
-            </Skeleton>
-            <Switch
-              id="hiddenSwitch"
-              checked={formMethods.watch("hidden")}
-              onCheckedChange={(e) => {
-                formMethods.setValue("hidden", e);
-              }}
-            />
-          </div>
-          <VerticalDivider className="hidden lg:block" />
+          {!eventType.metadata.managedEventConfig && (
+            <>
+              <div className="sm:hover:bg-subtle hidden items-center rounded-md px-2 lg:flex">
+                <Skeleton
+                  as={Label}
+                  htmlFor="hiddenSwitch"
+                  className="mt-2 hidden cursor-pointer self-center whitespace-nowrap pr-2 sm:inline">
+                  {t("hide_from_profile")}
+                </Skeleton>
+                <Switch
+                  id="hiddenSwitch"
+                  checked={formMethods.watch("hidden")}
+                  onCheckedChange={(e) => {
+                    formMethods.setValue("hidden", e);
+                  }}
+                />
+              </div>
+              <VerticalDivider className="hidden lg:block" />
+            </>
+          )}

          {/* TODO: Figure out why combined isnt working - works in storybook */}
          <ButtonGroup combined containerProps={{ className: "border-default hidden lg:flex" }}>
-            {/* We have to warp this in tooltip as it has a href which disabels the tooltip on buttons */}
-            <Tooltip content={t("preview")}>
-              <Button
-                color="secondary"
-                data-testid="preview-button"
-                target="_blank"
-                variant="icon"
-                href={permalink}
-                rel="noreferrer"
-                StartIcon={FiExternalLink}
-              />
-            </Tooltip>
+            {!isManagedEventType && (
+              <>
+                {/* We have to warp this in tooltip as it has a href which disabels the tooltip on buttons */}
+                <Tooltip content={t("preview")}>
+                  <Button
+                    color="secondary"
+                    data-testid="preview-button"
+                    target="_blank"
+                    variant="icon"
+                    href={permalink}
+                    rel="noreferrer"
+                    StartIcon={ExternalLink}
+                  />
+                </Tooltip>

-            <Button
-              color="secondary"
-              variant="icon"
-              StartIcon={FiLink}
-              tooltip={t("copy_link")}
-              onClick={() => {
-                navigator.clipboard.writeText(permalink);
-                showToast("Link copied!", "success");
-              }}
-            />
-            <EmbedButton
-              embedUrl={encodeURIComponent(embedLink)}
-              StartIcon={FiCode}
-              color="secondary"
-              variant="icon"
-              tooltip={t("embed")}
-            />
-            <Button
-              color="destructive"
-              variant="icon"
-              StartIcon={FiTrash}
-              tooltip={t("delete")}
-              disabled={!hasPermsToDelete}
-              onClick={() => setDeleteDialogOpen(true)}
-            />
+                <Button
+                  color="secondary"
+                  variant="icon"
+                  StartIcon={LinkIcon}
+                  tooltip={t("copy_link")}
+                  onClick={() => {
+                    navigator.clipboard.writeText(permalink);
+                    showToast("Link copied!", "success");
+                  }}
+                />
+                <EmbedButton
+                  embedUrl={encodeURIComponent(embedLink)}
+                  StartIcon={Code}
+                  color="secondary"
+                  variant="icon"
+                  tooltip={t("embed")}
+                />
+              </>
+            )}
+            {!isChildrenManagedEventType && (
+              <Button
+                color="destructive"
+                variant="icon"
+                StartIcon={Trash}
+                tooltip={t("delete")}
+                disabled={!hasPermsToDelete}
+                onClick={() => setDeleteDialogOpen(true)}
+              />
+            )}
          </ButtonGroup>

          <VerticalDivider className="hidden lg:block" />

          <Dropdown>
            <DropdownMenuTrigger asChild>
-              <Button className="lg:hidden" StartIcon={FiMoreHorizontal} variant="icon" color="secondary" />
+              <Button className="lg:hidden" StartIcon={MoreHorizontal} variant="icon" color="secondary" />
            </DropdownMenuTrigger>
            <DropdownMenuContent style={{ minWidth: "200px" }}>
              <DropdownMenuItem className="focus:ring-muted">
                <DropdownItem
                  target="_blank"
                  type="button"
-                  StartIcon={FiExternalLink}
+                  StartIcon={ExternalLink}
                  href={permalink}
                  rel="noreferrer">
                  {t("preview")}
@@ -276,7 +325,7 @@ function EventTypeSingleLayout({
              <DropdownMenuItem className="focus:ring-muted">
                <DropdownItem
                  type="button"
-                  StartIcon={FiLink}
+                  StartIcon={LinkIcon}
                  onClick={() => {
                    navigator.clipboard.writeText(permalink);
                    showToast("Link copied!", "success");
@@ -288,7 +337,7 @@ function EventTypeSingleLayout({
                <DropdownItem
                  type="button"
                  color="destructive"
-                  StartIcon={FiTrash}
+                  StartIcon={Trash}
                  disabled={!hasPermsToDelete}
                  onClick={() => setDeleteDialogOpen(true)}>
                  {t("delete")}
@@ -323,7 +372,7 @@ function EventTypeSingleLayout({
          </Button>
        </div>
      }>
-      <Suspense fallback={<FiLoader />}>
+      <Suspense fallback={<Loader />}>
        <div className="flex flex-col xl:flex-row xl:space-x-6">
          <div className="hidden xl:block">
            <VerticalTabs
@@ -331,6 +380,8 @@ function EventTypeSingleLayout({
              tabs={EventTypeTabs}
              sticky
              linkProps={{ shallow: true }}
+              itemClassname="items-start"
+              iconClassName="md:mt-px"
            />
          </div>
          <div className="p-2 md:mx-0 md:p-0 xl:hidden">
@@ -351,14 +402,25 @@ function EventTypeSingleLayout({
        <ConfirmationDialogContent
          isLoading={deleteMutation.isLoading}
          variety="danger"
-          title={t("delete_event_type")}
-          confirmBtnText={t("confirm_delete_event_type")}
-          loadingText={t("confirm_delete_event_type")}
+          title={t(`delete${isManagedEvent}_event_type`)}
+          confirmBtnText={t(`confirm_delete_event_type`)}
+          loadingText={t(`confirm_delete_event_type`)}
          onConfirm={(e) => {
            e.preventDefault();
            deleteMutation.mutate({ id: eventType.id });
          }}>
-          {t("delete_event_type_description")}
+          <p className="mt-5">
+            <Trans
+              i18nKey={`delete${isManagedEvent}_event_type_description`}
+              components={{ li: <li />, ul: <ul className="ml-4 list-disc" /> }}>
+              <ul>
+                <li>Members assigned to this event type will also have their event types deleted.</li>
+                <li>
+                  Anyone who they&apos;ve shared their link with will no longer be able to book using it.
+                </li>
+              </ul>
+            </Trans>
+          </p>
        </ConfirmationDialogContent>
      </Dialog>
      <EmbedDialog />
@@ -1,23 +1,26 @@
-import type { FormValues } from "pages/event-types/[type]";
+import type { EventTypeSetup, FormValues } from "pages/event-types/[type]";
 import { useState } from "react";
 import { useFormContext } from "react-hook-form";

+import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Frequency } from "@calcom/prisma/zod-utils";
 import type { RecurringEvent } from "@calcom/types/Calendar";
-import { Alert, Select, SettingsToggle } from "@calcom/ui";
+import { Alert, Select, SettingsToggle, TextField } from "@calcom/ui";

 type RecurringEventControllerProps = {
-  recurringEvent: RecurringEvent | null;
+  eventType: EventTypeSetup;
  paymentEnabled: boolean;
 };

 export default function RecurringEventController({
-  recurringEvent,
+  eventType,
  paymentEnabled,
 }: RecurringEventControllerProps) {
  const { t } = useLocale();
-  const [recurringEventState, setRecurringEventState] = useState<RecurringEvent | null>(recurringEvent);
+  const [recurringEventState, setRecurringEventState] = useState<RecurringEvent | null>(
+    eventType.recurringEvent
+  );
  const formMethods = useFormContext<FormValues>();

  /* Just yearly-0, monthly-1 and weekly-2 */
@@ -28,6 +31,14 @@ export default function RecurringEventController({
      value: value.toString(),
    }));

+  const { shouldLockDisableProps } = useLockedFieldsManager(
+    eventType,
+    t("locked_fields_admin_description"),
+    t("locked_fields_member_description")
+  );
+
+  const recurringLocked = shouldLockDisableProps("recurringEvent");
+
  return (
    <div className="block items-start sm:flex">
      <div className={!paymentEnabled ? "w-full" : ""}>
@@ -37,6 +48,7 @@ export default function RecurringEventController({
          <>
            <SettingsToggle
              title={t("recurring_event")}
+              {...recurringLocked}
              description={t("recurring_event_description")}
              checked={recurringEventState !== null}
              data-testid="recurring-event-check"
@@ -45,7 +57,7 @@ export default function RecurringEventController({
                  formMethods.setValue("recurringEvent", null);
                  setRecurringEventState(null);
                } else {
-                  const newVal = recurringEvent || {
+                  const newVal = eventType.recurringEvent || {
                    interval: 1,
                    count: 12,
                    freq: Frequency.WEEKLY,
@@ -58,11 +70,12 @@ export default function RecurringEventController({
                <div data-testid="recurring-event-collapsible" className="text-sm">
                  <div className="flex items-center">
                    <p className="text-emphasis ltr:mr-2 rtl:ml-2">{t("repeats_every")}</p>
-                    <input
+                    <TextField
+                      disabled={recurringLocked.disabled}
                      type="number"
                      min="1"
                      max="20"
-                      className="border-default bg-default text-default block h-[36px] w-16 rounded-md text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
+                      className="mb-0"
                      defaultValue={recurringEventState.interval}
                      onChange={(event) => {
                        const newVal = {
@@ -77,7 +90,8 @@ export default function RecurringEventController({
                      options={recurringEventFreqOptions}
                      value={recurringEventFreqOptions[recurringEventState.freq]}
                      isSearchable={false}
-                      className="w-18 block h-[36px] min-w-0 rounded-md text-sm"
+                      className="w-18 ml-2 block min-w-0 rounded-md text-sm"
+                      isDisabled={recurringLocked.disabled}
                      onChange={(event) => {
                        const newVal = {
                          ...recurringEventState,
@@ -90,12 +104,13 @@ export default function RecurringEventController({
                  </div>
                  <div className="mt-4 flex items-center">
                    <p className="text-emphasis ltr:mr-2 rtl:ml-2">{t("for_a_maximum_of")}</p>
-                    <input
+                    <TextField
+                      disabled={recurringLocked.disabled}
                      type="number"
                      min="1"
                      max="20"
-                      className="border-default bg-default text-default block h-[36px] w-16 rounded-md text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
                      defaultValue={recurringEventState.count}
+                      className="mb-0"
                      onChange={(event) => {
                        const newVal = {
                          ...recurringEventState,
@@ -105,7 +120,7 @@ export default function RecurringEventController({
                        setRecurringEventState(newVal);
                      }}
                    />
-                    <p className="text-emphasis ltr:mr-2 rtl:ml-2">
+                    <p className="text-emphasis ltr:ml-2 rtl:mr-2">
                      {t("events", {
                        count: recurringEventState.count,
                      })}
@@ -1,25 +1,29 @@
 import * as RadioGroup from "@radix-ui/react-radio-group";
 import type { UnitTypeLongPlural } from "dayjs";
 import { Trans } from "next-i18next";
-import type { FormValues } from "pages/event-types/[type]";
+import type { EventTypeSetup, FormValues } from "pages/event-types/[type]";
 import type { Dispatch, SetStateAction } from "react";
 import { useEffect, useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import type z from "zod";

+import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
+import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
-import { Input, Label, SettingsToggle, RadioField } from "@calcom/ui";
+import { Input, SettingsToggle, RadioField, Select } from "@calcom/ui";

 type RequiresConfirmationControllerProps = {
  metadata: z.infer<typeof EventTypeMetaDataSchema>;
  requiresConfirmation: boolean;
  onRequiresConfirmation: Dispatch<SetStateAction<boolean>>;
  seatsEnabled: boolean;
+  eventType: EventTypeSetup;
 };

 export default function RequiresConfirmationController({
  metadata,
+  eventType,
  requiresConfirmation,
  onRequiresConfirmation,
  seatsEnabled,
@@ -37,6 +41,23 @@ export default function RequiresConfirmationController({
    }
  }, [requiresConfirmation]);

+  const { shouldLockDisableProps } = useLockedFieldsManager(
+    eventType,
+    t("locked_fields_admin_description"),
+    t("locked_fields_member_description")
+  );
+  const requiresConfirmationLockedProps = shouldLockDisableProps("requiresConfirmation");
+
+  const options = [
+    { label: t("minute_timeUnit"), value: "minutes" },
+    { label: t("hour_timeUnit"), value: "hours" },
+  ];
+
+  const defaultValue = options.find(
+    (opt) =>
+      opt.value === (metadata?.requiresConfirmationThreshold?.unit ?? defaultRequiresConfirmationSetup.unit)
+  );
+
  return (
    <div className="block items-start sm:flex">
      <div className="w-full">
@@ -46,10 +67,11 @@ export default function RequiresConfirmationController({
          render={() => (
            <SettingsToggle
              title={t("requires_confirmation")}
-              disabled={seatsEnabled}
+              disabled={seatsEnabled || requiresConfirmationLockedProps.disabled}
              tooltip={seatsEnabled ? t("seat_options_doesnt_support_confirmation") : undefined}
              description={t("requires_confirmation_description")}
              checked={requiresConfirmation}
+              LockedIcon={requiresConfirmationLockedProps.LockedIcon}
              onCheckedChange={(val) => {
                formMethods.setValue("requiresConfirmation", val);
                onRequiresConfirmation(val);
@@ -77,70 +99,82 @@ export default function RequiresConfirmationController({
                    );
                  }
                }}>
-                <div className="flex flex-col flex-wrap justify-start gap-y-2 space-y-2">
-                  <RadioField label={t("always_requires_confirmation")} id="always" value="always" />
-                  <RadioField
-                    label={
-                      <>
-                        <Trans
-                          i18nKey="when_booked_with_less_than_notice"
-                          defaults="When booked with less than <time></time> notice"
-                          components={{
-                            time: (
-                              <div className="mx-2 flex">
-                                <Input
-                                  type="number"
-                                  min={1}
-                                  onChange={(evt) => {
-                                    const val = Number(evt.target?.value);
-                                    setRequiresConfirmationSetup({
-                                      unit:
-                                        requiresConfirmationSetup?.unit ??
-                                        defaultRequiresConfirmationSetup.unit,
-                                      time: val,
-                                    });
-                                    formMethods.setValue("metadata.requiresConfirmationThreshold.time", val);
-                                  }}
-                                  className="border-default !m-0 block w-16 rounded-md text-sm [appearance:textfield]"
-                                  defaultValue={metadata?.requiresConfirmationThreshold?.time || 30}
-                                />
-                                <select
-                                  onChange={(evt) => {
-                                    const val = evt.target.value as UnitTypeLongPlural;
-                                    setRequiresConfirmationSetup({
-                                      time:
-                                        requiresConfirmationSetup?.time ??
-                                        defaultRequiresConfirmationSetup.time,
-                                      unit: val,
-                                    });
-                                    formMethods.setValue("metadata.requiresConfirmationThreshold.unit", val);
-                                  }}
-                                  className="border-default text-default bg-default ml-2 block h-9 rounded-md py-2 pl-3 pr-10 text-sm focus:outline-none"
-                                  defaultValue={
-                                    metadata?.requiresConfirmationThreshold?.unit ||
-                                    defaultRequiresConfirmationSetup.unit
-                                  }>
-                                  <option value="minutes">{t("minute_timeUnit")}</option>
-                                  <option value="hours">{t("hour_timeUnit")}</option>
-                                </select>
-                              </div>
-                            ),
-                          }}
-                        />
-                      </>
-                    }
-                    id="notice"
-                    value="notice"
-                  />
-                  <div className="flex items-center">
-                    <RadioGroup.Item
+                <div className="flex flex-col flex-wrap justify-start gap-y-2">
+                  {(requiresConfirmationSetup === undefined || !requiresConfirmationLockedProps.disabled) && (
+                    <RadioField
+                      label={t("always_requires_confirmation")}
+                      disabled={requiresConfirmationLockedProps.disabled}
+                      id="always"
+                      value="always"
+                    />
+                  )}
+                  {(requiresConfirmationSetup !== undefined || !requiresConfirmationLockedProps.disabled) && (
+                    <RadioField
+                      disabled={requiresConfirmationLockedProps.disabled}
+                      className="items-center"
+                      label={
+                        <>
+                          <Trans
+                            i18nKey="when_booked_with_less_than_notice"
+                            defaults="When booked with less than <time></time> notice"
+                            components={{
+                              time: (
+                                <div className="mx-2 inline-flex">
+                                  <Input
+                                    type="number"
+                                    min={1}
+                                    disabled={requiresConfirmationLockedProps.disabled}
+                                    onChange={(evt) => {
+                                      const val = Number(evt.target?.value);
+                                      setRequiresConfirmationSetup({
+                                        unit:
+                                          requiresConfirmationSetup?.unit ??
+                                          defaultRequiresConfirmationSetup.unit,
+                                        time: val,
+                                      });
+                                      formMethods.setValue(
+                                        "metadata.requiresConfirmationThreshold.time",
+                                        val
+                                      );
+                                    }}
+                                    className="border-default !m-0 block w-16 rounded-md text-sm [appearance:textfield]"
+                                    defaultValue={metadata?.requiresConfirmationThreshold?.time || 30}
+                                  />
+                                  <label
+                                    className={classNames(
+                                      requiresConfirmationLockedProps.disabled && "cursor-not-allowed"
+                                    )}>
+                                    <Select
+                                      inputId="notice"
+                                      options={options}
+                                      isSearchable={false}
+                                      isDisabled={requiresConfirmationLockedProps.disabled}
+                                      className="ml-2"
+                                      onChange={(opt) => {
+                                        setRequiresConfirmationSetup({
+                                          time:
+                                            requiresConfirmationSetup?.time ??
+                                            defaultRequiresConfirmationSetup.time,
+                                          unit: opt?.value as UnitTypeLongPlural,
+                                        });
+                                        formMethods.setValue(
+                                          "metadata.requiresConfirmationThreshold.unit",
+                                          opt?.value as UnitTypeLongPlural
+                                        );
+                                      }}
+                                      defaultValue={defaultValue}
+                                    />
+                                  </label>
+                                </div>
+                              ),
+                            }}
+                          />
+                        </>
+                      }
                      id="notice"
                      value="notice"
-                      className="min-w-4 bg-default flex h-4 w-4 cursor-pointer items-center rounded-full border border-black focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
-                      <RadioGroup.Indicator className="relative flex h-4 w-4 items-center justify-center after:block after:h-2 after:w-2 after:rounded-full after:bg-black" />
-                    </RadioGroup.Item>
-                    <Label htmlFor="notice" className="!m-0 flex items-center" />
-                  </div>
+                    />
+                  )}
                </div>
              </RadioGroup.Root>
            </SettingsToggle>
@@ -1,5 +1,5 @@
 import { SkeletonAvatar, SkeletonContainer, SkeletonText } from "@calcom/ui";
-import { FiClock, FiUser } from "@calcom/ui/components/icon";
+import { Clock, User } from "@calcom/ui/components/icon";

 function SkeletonLoader() {
  return (
@@ -32,11 +32,11 @@ function SkeletonItem() {
        <div className="">
          <ul className="mt-2 flex space-x-4 rtl:space-x-reverse ">
            <li className="flex items-center whitespace-nowrap">
-              <FiClock className="text-subtle mt-0.5 mr-1.5 inline h-4 w-4" />
+              <Clock className="text-subtle mt-0.5 mr-1.5 inline h-4 w-4" />
              <SkeletonText className="h-4 w-12" />
            </li>
            <li className="flex items-center whitespace-nowrap">
-              <FiUser className="text-subtle mt-0.5 mr-1.5 inline h-4 w-4" />
+              <User className="text-subtle mt-0.5 mr-1.5 inline h-4 w-4" />
              <SkeletonText className="h-4 w-12" />
            </li>
          </ul>
@@ -35,6 +35,7 @@ const UserProfile = (props: IUserProfileProps) => {
  const router = useRouter();
  const createEventType = trpc.viewer.eventTypes.create.useMutation();
  const telemetry = useTelemetry();
+  const [firstRender, setFirstRender] = useState(true);

  const mutation = trpc.viewer.updateProfile.useMutation({
    onSuccess: async (_data, context) => {
@@ -147,6 +148,8 @@ const UserProfile = (props: IUserProfileProps) => {
          getText={() => md.render(getValues("bio") || user?.bio || "")}
          setText={(value: string) => setValue("bio", turndown(value))}
          excludedToolbarItems={["blockType"]}
+          firstRender={firstRender}
+          setFirstRender={setFirstRender}
        />
        <p className="dark:text-inverted text-default mt-2 font-sans text-sm font-normal">
          {t("few_sentences_about_yourself")}
@@ -1,10 +1,10 @@
-import { FiShield } from "@calcom/ui/components/icon";
+import { Shield } from "@calcom/ui/components/icon";

 const TwoFactorModalHeader = ({ title, description }: { title: string; description: string }) => {
  return (
    <div className="mb-4 sm:flex sm:items-start">
      <div className="bg-brand text-brandcontrast dark:bg-darkmodebrand dark:text-darkmodebrandcontrast mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-opacity-5 sm:mx-0 sm:h-10 sm:w-10">
-        <FiShield className="text-inverted h-6 w-6" />
+        <Shield className="text-inverted h-6 w-6" />
      </div>
      <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
        <h3 className="font-cal text-emphasis text-lg font-medium leading-6" id="modal-title">
@@ -3,7 +3,7 @@ import { useMutation } from "@tanstack/react-query";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Badge, showToast, Switch } from "@calcom/ui";
-import { FiArrowLeft } from "@calcom/ui/components/icon";
+import { ArrowLeft } from "@calcom/ui/components/icon";

 export function CalendarSwitch(props: {
  type: string;
@@ -75,8 +75,8 @@ export function CalendarSwitch(props: {
      />
      {props.defaultSelected && (
        <Badge variant="gray">
-          <div className="flex">
-            <FiArrowLeft className="text-default mr-1" /> {t("adding_events_to")}
+          <div className="flex items-center">
+            <ArrowLeft className="text-default mr-1 h-4 w-4" /> {t("adding_events_to")}
          </div>
        </Badge>
      )}
@@ -9,7 +9,7 @@ import { isPasswordValid } from "@calcom/features/auth/lib/isPasswordValid";
 import { WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { EmailField, EmptyScreen, Label, PasswordField, TextField } from "@calcom/ui";
-import { FiUserCheck } from "@calcom/ui/components/icon";
+import { UserCheck } from "@calcom/ui/components/icon";

 export const AdminUserContainer = (props: React.ComponentProps<typeof AdminUser> & { userCount: number }) => {
  const { t } = useLocale();
@@ -24,7 +24,7 @@ export const AdminUserContainer = (props: React.ComponentProps<typeof AdminUser>
          props.onSuccess();
        }}>
        <EmptyScreen
-          Icon={FiUserCheck}
+          Icon={UserCheck}
          headline={t("admin_user_created")}
          description={t("admin_user_created_description")}
        />
@@ -10,7 +10,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { RouterInputs, RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import { Button, TextField } from "@calcom/ui";
-import { FiCheck, FiExternalLink, FiLoader } from "@calcom/ui/components/icon";
+import { Check, ExternalLink, Loader } from "@calcom/ui/components/icon";

 type EnterpriseLicenseFormValues = {
  licenseKey: string;
@@ -91,7 +91,7 @@ const EnterpriseLicense = (
        <div>
          <Button
            className="w-full justify-center text-lg"
-            EndIcon={FiExternalLink}
+            EndIcon={ExternalLink}
            href="https://console.cal.com"
            target="_blank">
            {t("purchase_license")}
@@ -121,9 +121,9 @@ const EnterpriseLicense = (
                )}
                addOnSuffix={
                  checkLicenseLoading ? (
-                    <FiLoader className="h-5 w-5 animate-spin" />
+                    <Loader className="h-5 w-5 animate-spin" />
                  ) : errors.licenseKey === undefined && isDirty ? (
-                    <FiCheck className="h-5 w-5 text-green-700" />
+                    <Check className="h-5 w-5 text-green-700" />
                  ) : undefined
                }
                color={errors.licenseKey ? "warn" : ""}
@@ -2,7 +2,7 @@ import { useRouter } from "next/router";
 import type { Dispatch, SetStateAction } from "react";

 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { FiCheck } from "@calcom/ui/components/icon";
+import { Check } from "@calcom/ui/components/icon";

 const StepDone = (props: {
  currentStep: number;
@@ -24,7 +24,7 @@ const StepDone = (props: {
      }}>
      <div className="min-h-36 my-6 flex flex-col items-center justify-center">
        <div className="dark:bg-default flex h-[72px] w-[72px] items-center justify-center rounded-full bg-gray-600">
-          <FiCheck className="text-inverted dark:bg-default dark:text-default inline-block h-10 w-10" />
+          <Check className="text-inverted dark:bg-default dark:text-default inline-block h-10 w-10" />
        </div>
        <div className="max-w-[420px] text-center">
          <h2 className="mt-6 mb-1 text-lg font-medium dark:text-gray-300">{t("all_done")}</h2>
@@ -1,17 +0,0 @@
-import { useSession } from "next-auth/react";
-import type { FC } from "react";
-import { Fragment } from "react";
-
-type AdminRequiredProps = {
-  as?: keyof JSX.IntrinsicElements;
-  children?: React.ReactNode;
-};
-
-/** @deprecated use PermssionContainer instead. Will delete once V2 goes live */
-export const AdminRequired: FC<AdminRequiredProps> = ({ children, as, ...rest }) => {
-  const session = useSession();
-
-  if (session.data?.user.role !== "ADMIN") return null;
-  const Component = as ?? Fragment;
-  return <Component {...rest}>{children}</Component>;
-};
@@ -1,7 +1,6 @@
 import classNames from "classnames";

-import { APP_NAME, LOGO } from "@calcom/lib/constants";
-import { HeadSeo } from "@calcom/ui";
+import { HeadSeo, Logo } from "@calcom/ui";

 import Loader from "@components/Loader";

@@ -18,10 +17,7 @@ export default function AuthContainer(props: React.PropsWithChildren<Props>) {
  return (
    <div className="flex min-h-screen flex-col justify-center bg-[#f3f4f6] py-12 sm:px-6 lg:px-8">
      <HeadSeo title={props.title} description={props.description} />
-      {props.showLogo && (
-        // eslint-disable-next-line @next/next/no-img-element
-        <img className="mb-auto h-4" src={LOGO} alt={`${APP_NAME} Logo`} />
-      )}
+      {props.showLogo && <Logo small inline={false} className="mx-auto mb-auto" />}

      <div className={classNames(props.showLogo ? "text-center" : "", "sm:mx-auto sm:w-full sm:max-w-md")}>
        {props.heading && <h2 className="font-cal text-emphasis text-center text-3xl">{props.heading}</h2>}
@@ -2,7 +2,7 @@ import classNames from "classnames";
 import { useState } from "react";
 import type { ControllerRenderProps } from "react-hook-form";

-import { FiEdit2 } from "@calcom/ui/components/icon";
+import { Edit2 } from "@calcom/ui/components/icon";

 const EditableHeading = function EditableHeading({
  value,
@@ -16,12 +16,14 @@ const EditableHeading = function EditableHeading({
  const [isEditing, setIsEditing] = useState(false);
  const enableEditing = () => setIsEditing(true);
  return (
-    <div className="group relative cursor-pointer" onClick={enableEditing}>
-      <div className="flex items-center">
+    <div
+      className="group pointer-events-none relative truncate sm:pointer-events-auto"
+      onClick={enableEditing}>
+      <div className="flex cursor-pointer items-center">
        <label className="min-w-8 relative inline-block">
          <span className="whitespace-pre text-xl tracking-normal text-transparent">{value}&nbsp;</span>
          {!isEditing && isReady && (
-            <FiEdit2 className=" text-subtle group-hover:text-subtle ml-1 -mt-px inline  h-3 w-3" />
+            <Edit2 className=" text-subtle group-hover:text-subtle ml-1 -mt-px inline  h-3 w-3" />
          )}
          <input
            {...passThroughProps}
@@ -29,7 +31,7 @@ const EditableHeading = function EditableHeading({
            value={value}
            required
            className={classNames(
-              "text-emphasis hover:text-default focus:text-emphasis absolute top-0 left-0 w-full cursor-pointer border-none bg-transparent p-0 align-top text-xl focus:outline-none focus:ring-0"
+              "text-emphasis hover:text-default focus:text-emphasis absolute top-0 left-0 w-full cursor-pointer truncate border-none bg-transparent p-0 align-top text-xl focus:outline-none focus:ring-0"
            )}
            onFocus={(e) => {
              setIsEditing(true);
@@ -1,12 +1,12 @@
 import { Tooltip } from "@calcom/ui";
-import { FiInfo } from "@calcom/ui/components/icon";
+import { Info } from "@calcom/ui/components/icon";

 export default function InfoBadge({ content }: { content: string }) {
  return (
    <>
      <Tooltip side="top" content={content}>
        <span title={content}>
-          <FiInfo className="text-subtle relative top-px left-1 right-1 mt-px h-4 w-4" />
+          <Info className="text-subtle relative top-px left-1 right-1 mt-px h-4 w-4" />
        </span>
      </Tooltip>
    </>
@@ -15,7 +15,7 @@ import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import type { AppRouter } from "@calcom/trpc/server/routers/_app";
 import { Button, Dialog, DialogClose, DialogContent, Input, Label } from "@calcom/ui";
-import { FiCheck, FiEdit2, FiExternalLink } from "@calcom/ui/components/icon";
+import { Check, Edit2, ExternalLink } from "@calcom/ui/components/icon";

 export enum UsernameChangeStatusEnum {
  UPGRADE = "UPGRADE",
@@ -235,7 +235,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
                usernameIsAvailable ? "" : ""
              )}>
              {isInputUsernamePremium ? <StarIconSolid className="mt-[2px] w-6" /> : <></>}
-              {!isInputUsernamePremium && usernameIsAvailable ? <FiCheck className="mt-2 w-6" /> : <></>}
+              {!isInputUsernamePremium && usernameIsAvailable ? <Check className="mt-2 w-6" /> : <></>}
            </span>
          </div>
        </div>
@@ -251,7 +251,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {

      <Dialog open={openDialogSaveUsername}>
        <DialogContent
-          Icon={FiEdit2}
+          Icon={Edit2}
          title={t("confirm_username_change_dialog_title")}
          description={
            <>
@@ -288,7 +288,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
                data-testid="go-to-billing"
                href={paymentLink}>
                <>
-                  {t("go_to_stripe_billing")} <FiExternalLink className="ml-1 h-4 w-4" />
+                  {t("go_to_stripe_billing")} <ExternalLink className="ml-1 h-4 w-4" />
                </>
              </Button>
            )}
@@ -9,7 +9,7 @@ import type { TRPCClientErrorLike } from "@calcom/trpc/client";
 import { trpc } from "@calcom/trpc/react";
 import type { AppRouter } from "@calcom/trpc/server/routers/_app";
 import { Button, Dialog, DialogClose, DialogContent, TextField } from "@calcom/ui";
-import { FiCheck, FiEdit2 } from "@calcom/ui/components/icon";
+import { Check, Edit2 } from "@calcom/ui/components/icon";

 interface ICustomUsernameProps {
  currentUsername: string | undefined;
@@ -79,7 +79,7 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {

  const ActionButtons = () => {
    return usernameIsAvailable && currentUsername !== inputUsernameValue ? (
-      <div className="rlt:space-x-reverse ms-2 me-2 mt-px flex flex-row space-x-2 rtl:space-x-reverse">
+      <div className="ms-2 me-2 mt-px flex flex-row space-x-2">
        <Button
          type="button"
          onClick={() => setOpenDialogSaveUsername(true)}
@@ -123,7 +123,7 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
            autoCapitalize="none"
            autoCorrect="none"
            className={classNames(
-              "mb-0 mt-0 rounded-md ltr:rounded-l-none rtl:rounded-r-none",
+              "mb-0 mt-0 rounded-md rounded-l-none",
              markAsError
                ? "focus:shadow-0 focus:ring-shadow-0 border-red-500 focus:border-red-500 focus:outline-none focus:ring-0"
                : ""
@@ -137,7 +137,7 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
          {currentUsername !== inputUsernameValue && (
            <div className="absolute right-[2px] top-6 flex flex-row">
              <span className={classNames("mx-2 py-2")}>
-                {usernameIsAvailable ? <FiCheck className="w-6" /> : <></>}
+                {usernameIsAvailable ? <Check className="w-6" /> : <></>}
              </span>
            </div>
          )}
@@ -154,7 +154,7 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
        </div>
      )}
      <Dialog open={openDialogSaveUsername}>
-        <DialogContent type="confirmation" Icon={FiEdit2} title={t("confirm_username_change_dialog_title")}>
+        <DialogContent type="confirmation" Icon={Edit2} title={t("confirm_username_change_dialog_title")}>
          <div className="flex flex-row">
            <div className="mb-4 w-full pt-1">
              <div className="bg-subtle flex w-full flex-wrap rounded-sm py-3 text-sm">
@@ -49,7 +49,7 @@ const CheckboxField = forwardRef<HTMLInputElement, Props>(
                    {...rest}
                    ref={ref}
                    type="checkbox"
-                    className="text-primary-600 focus:ring-primary-500 border-default h-4 w-4 rounded"
+                    className="text-primary-600 focus:ring-primary-500 border-default bg-default h-4 w-4 rounded"
                  />
                </div>
                <span className="ms-3 text-sm">{description}</span>
@@ -3,7 +3,7 @@ import type { Props } from "react-select";

 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Avatar } from "@calcom/ui";
-import { FiX } from "@calcom/ui/components/icon";
+import { X } from "@calcom/ui/components/icon";

 import Select from "@components/ui/form/Select";

@@ -49,7 +49,7 @@ export const CheckedSelect = ({
            alt={option.label}
          />
          {option.label}
-          <FiX
+          <X
            onClick={() => props.onChange(value.filter((item) => item.value !== option.value))}
            className="text-subtle float-right mt-0.5 h-5 w-5 cursor-pointer"
          />
@@ -3,7 +3,7 @@ import "react-calendar/dist/Calendar.css";
 import "react-date-picker/dist/DatePicker.css";
 import PrimitiveDatePicker from "react-date-picker/dist/entry.nostyle";

-import { FiCalendar } from "@calcom/ui/components/icon";
+import { Calendar } from "@calcom/ui/components/icon";

 import classNames from "@lib/classNames";

@@ -23,7 +23,7 @@ export const DatePicker = ({ minDate, disabled, date, onDatesChange, className }
        className
      )}
      clearIcon={null}
-      calendarIcon={<FiCalendar className="text-subtle h-5 w-5" />}
+      calendarIcon={<Calendar className="text-subtle h-5 w-5" />}
      value={date}
      minDate={minDate}
      disabled={disabled}
@@ -3,6 +3,7 @@ import { components } from "react-select";

 import type { EventLocationType } from "@calcom/app-store/locations";
 import { classNames } from "@calcom/lib";
+import cx from "@calcom/lib/classNames";
 import { Select } from "@calcom/ui";

 export type LocationOption = {
@@ -19,10 +20,14 @@ export type GroupOptionType = GroupBase<LocationOption>;
 const OptionWithIcon = ({ icon, label }: { icon?: string; label: string }) => {
  return (
    <div className="flex items-center gap-3">
-      {/* TODO: figure out a way to invert icons when in dark mode. We can't just
-        dark:invert due to google meet cal etc all breaking when we do this
-      */}
-      {icon && <img src={icon} alt="cover" className="h-3.5 w-3.5 dark:hidden" />}
+      {icon && (
+        <img
+          src={icon}
+          alt="cover"
+          // invert all the icons except app icons
+          className={cx("h-3.5 w-3.5", icon && !icon.startsWith("/api") && "dark:invert")}
+        />
+      )}
      <span className={classNames("text-sm font-medium")}>{label}</span>
    </div>
  );
@@ -27,8 +27,10 @@ const I18nextAdapter = appWithTranslation<NextJsAppProps<SSRConfig> & { children
 export type AppProps = Omit<NextAppProps<WithNonceProps & Record<string, unknown>>, "Component"> & {
  Component: NextAppProps["Component"] & {
    requiresLicense?: boolean;
-    isThemeSupported?: boolean | ((arg: { router: NextRouter }) => boolean);
+    isThemeSupported?: boolean;
+    isBookingPage?: boolean | ((arg: { router: NextRouter }) => boolean);
    getLayout?: (page: React.ReactElement, router: NextRouter) => ReactNode;
+    PageWrapper?: (props: AppProps) => JSX.Element;
  };

  /** Will be defined only is there was an error */
@@ -61,46 +63,78 @@ const CustomI18nextProvider = (props: AppPropsWithChildren) => {
  return <I18nextAdapter {...passedProps} />;
 };

+const enum ThemeSupport {
+  // e.g. Login Page
+  None = "none",
+  // Entire App except Booking Pages
+  App = "systemOnly",
+  // Booking Pages(including Routing Forms)
+  Booking = "userConfigured",
+}
+
 const CalcomThemeProvider = (
  props: PropsWithChildren<
-    WithNonceProps & { isThemeSupported?: boolean | ((arg: { router: NextRouter }) => boolean) }
+    WithNonceProps & {
+      isBookingPage?: boolean | ((arg: { router: NextRouter }) => boolean);
+      isThemeSupported?: boolean;
+    }
  >
 ) => {
  // We now support the inverse of how we handled it in the past. Setting this to false will disable theme.
  // undefined or true means we use system theme
  const router = useRouter();
-  const isThemeSupported = (() => {
-    if (typeof props.isThemeSupported === "function") {
-      return props.isThemeSupported({ router: router });
+  const isBookingPage = (() => {
+    if (typeof props.isBookingPage === "function") {
+      return props.isBookingPage({ router: router });
    }
-    if (typeof props.isThemeSupported === "undefined") {
-      return true;
-    }
-    return props.isThemeSupported;
+
+    return props.isBookingPage;
  })();

-  const forcedTheme = !isThemeSupported ? "light" : undefined;
+  const themeSupport = isBookingPage
+    ? ThemeSupport.Booking
+    : // if isThemeSupported is explicitly false, we don't use theme there
+    props.isThemeSupported === false
+    ? ThemeSupport.None
+    : ThemeSupport.App;
+
+  const forcedTheme = themeSupport === ThemeSupport.None ? "light" : undefined;
  // Use namespace of embed to ensure same namespaced embed are displayed with same theme. This allows different embeds on the same website to be themed differently
  // One such example is our Embeds Demo and Testing page at http://localhost:3100
  // Having `getEmbedNamespace` defined on window before react initializes the app, ensures that embedNamespace is available on the first mount and can be used as part of storageKey
  const embedNamespace = typeof window !== "undefined" ? window.getEmbedNamespace() : null;
-  // If embedNamespace is not defined, we use the default storageKey -> The default storage key changs based on if we force light mode or not
-  // This is done to ensure that the default theme is light when we force light mode and as soon as you navigate to a page that is dark we dont need a hard refresh to change
-  const storageKey =
-    typeof embedNamespace === "string"
-      ? `embed-theme-${embedNamespace}`
-      : !isThemeSupported
-      ? "cal-light"
-      : "theme";
+  const isEmbedMode = typeof embedNamespace === "string";
+
+  const storageKey = isEmbedMode
+    ? `embed-theme-${embedNamespace}`
+    : themeSupport === ThemeSupport.App
+    ? "app-theme"
+    : themeSupport === ThemeSupport.Booking
+    ? "booking-theme"
+    : undefined;

  return (
    <ThemeProvider
      nonce={props.nonce}
      enableColorScheme={false}
-      enableSystem={isThemeSupported}
+      enableSystem={themeSupport !== ThemeSupport.None}
      forcedTheme={forcedTheme}
      storageKey={storageKey}
+      // next-themes doesn't listen to changes on storageKey. So we need to force a re-render when storageKey changes
+      // This is how login to dashboard soft navigation changes theme from light to dark
+      key={storageKey}
      attribute="class">
+      {/* Embed Mode can be detected reliably only on client side here as there can be static generated pages as well which can't determine if it's embed mode at backend */}
+      {/* color-scheme makes background:transparent not work in iframe which is required by embed. */}
+      {typeof window !== "undefined" && !isEmbedMode && (
+        <style jsx global>
+          {`
+            .dark {
+              color-scheme: dark;
+            }
+          `}
+        </style>
+      )}
      {props.children}
    </ThemeProvider>
  );
@@ -124,7 +158,8 @@ const AppProviders = (props: AppPropsWithChildren) => {
            {/* color-scheme makes background:transparent not work which is required by embed. We need to ensure next-theme adds color-scheme to `body` instead of `html`(https://github.com/pacocoursey/next-themes/blob/main/src/index.tsx#L74). Once that's done we can enable color-scheme support */}
            <CalcomThemeProvider
              nonce={props.pageProps.nonce}
-              isThemeSupported={props.Component.isThemeSupported}>
+              isThemeSupported={props.Component.isThemeSupported}
+              isBookingPage={props.Component.isBookingPage}>
              <FeatureFlagsProvider>
                <MetaProvider>{props.children}</MetaProvider>
              </FeatureFlagsProvider>
@@ -13,9 +13,6 @@ function getCspPolicy(nonce: string) {
  // We can remove 'unsafe-inline' from style-src when we add nonces to all style tags
  // Maybe see how @next-safe/middleware does it if it's supported.
  const useNonStrictPolicy = CSP_POLICY === "non-strict";
-  const SENTRY_ENDPOINT = process.env.NEXT_PUBLIC_SENTRY_DSN
-    ? new URL(process.env.NEXT_PUBLIC_SENTRY_DSN, "http://base_url").origin
-    : "";

  // We add WEBAPP_URL to img-src because of booking pages, which end up loading images from app.cal.com on cal.com
  // FIXME: Write a layer to extract out EventType Analytics tracking endpoints and add them to img-src or connect-src as needed. e.g. fathom, Google Analytics and others
@@ -36,7 +33,7 @@ function getCspPolicy(nonce: string) {
    } app.cal.com;
 	  font-src 'self';
 	  img-src 'self' ${WEBAPP_URL} https://www.gravatar.com https://img.youtube.com https://eu.ui-avatars.com/api/ data:;
-    connect-src 'self' ${SENTRY_ENDPOINT}
+    connect-src 'self'
 	`;
 }

@@ -1,6 +1,5 @@
 require("dotenv").config({ path: "../../.env" });
 const CopyWebpackPlugin = require("copy-webpack-plugin");
-const { withSentryConfig } = require("@sentry/nextjs");
 const os = require("os");

 const { withAxiom } = require("next-axiom");
@@ -92,11 +91,11 @@ const nextConfig = {
    "@calcom/prisma",
    "@calcom/trpc",
    "@calcom/ui",
+    "lucide-react",
  ],
  modularizeImports: {
    "@calcom/ui/components/icon": {
-      transform: "@react-icons/all-files/fi/{{member}}",
-      skipDefaultConversion: true,
+      transform: "lucide-react/dist/esm/icons/{{ kebabCase member }}",
      preventFullImport: true,
    },
    "@calcom/features/insights/components": {
@@ -318,21 +317,4 @@ const nextConfig = {
  },
 };

-const sentryWebpackPluginOptions = {
-  silent: true, // Suppresses all logs
-};
-
-const moduleExports = () => plugins.reduce((acc, next) => next(acc), nextConfig);
-
-if (process.env.NEXT_PUBLIC_SENTRY_DSN) {
-  nextConfig.sentry = {
-    hideSourceMaps: true,
-    // Prevents Sentry from running on this Edge function, where Sentry doesn't work yet (build whould crash the api route).
-    excludeServerRoutes: [/\/api\/social\/og\/image\/?/],
-  };
-}
-
-// Sentry should be the last thing to export to catch everything right
-module.exports = process.env.NEXT_PUBLIC_SENTRY_DSN
-  ? withSentryConfig(moduleExports, sentryWebpackPluginOptions)
-  : moduleExports;
+module.exports = () => plugins.reduce((acc, next) => next(acc), nextConfig);
@@ -1,6 +1,6 @@
 {
  "name": "@calcom/web",
-  "version": "2.7.12",
+  "version": "2.8.7",
  "private": true,
  "scripts": {
    "analyze": "ANALYZE=true next build",
@@ -57,7 +57,6 @@
    "@radix-ui/react-switch": "^1.0.0",
    "@radix-ui/react-toggle-group": "^1.0.0",
    "@radix-ui/react-tooltip": "^1.0.0",
-    "@sentry/nextjs": "^7.20.0",
    "@stripe/react-stripe-js": "^1.10.0",
    "@stripe/stripe-js": "^1.35.0",
    "@tanstack/react-query": "^4.3.9",
@@ -116,8 +115,6 @@
    "react-select": "^5.7.0",
    "react-timezone-select": "^1.4.0",
    "react-use-intercom": "1.5.1",
-    "react-virtualized-auto-sizer": "^1.0.6",
-    "react-window": "^1.8.7",
    "remark": "^14.0.2",
    "rrule": "^2.7.1",
    "sanitize-html": "^2.10.0",
@@ -156,8 +153,6 @@
    "@types/qrcode": "^1.4.3",
    "@types/react": "18.0.26",
    "@types/react-phone-number-input": "^3.0.14",
-    "@types/react-virtualized-auto-sizer": "^1.0.1",
-    "@types/react-window": "^1.8.5",
    "@types/sanitize-html": "^2.9.0",
    "@types/stripe": "^8.0.417",
    "@types/uuid": "8.3.1",
@@ -6,7 +6,9 @@ import { useEffect, useState } from "react";
 import { DOCS_URL, JOIN_SLACK, WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HeadSeo } from "@calcom/ui";
-import { FiBookOpen, FiCheck, FiChevronRight, FiFileText } from "@calcom/ui/components/icon";
+import { BookOpen, Check, ChevronRight, FileText } from "@calcom/ui/components/icon";
+
+import PageWrapper from "@components/PageWrapper";

 import { ssgInit } from "@server/lib/ssg";

@@ -20,13 +22,13 @@ export default function Custom404() {
    {
      title: t("documentation"),
      description: t("documentation_description"),
-      icon: FiFileText,
+      icon: FileText,
      href: DOCS_URL,
    },
    {
      title: t("blog"),
      description: t("blog_description"),
-      icon: FiBookOpen,
+      icon: BookOpen,
      href: `${WEBSITE_URL}/blog`,
    },
  ];
@@ -112,7 +114,7 @@ export default function Custom404() {
                      className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
                      <div className="flex-shrink-0">
                        <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-50">
-                          <FiCheck className="h-6 w-6 text-green-500" aria-hidden="true" />
+                          <Check className="h-6 w-6 text-green-500" aria-hidden="true" />
                        </span>
                      </div>
                      <div className="min-w-0 flex-1">
@@ -127,7 +129,7 @@ export default function Custom404() {
                        <p className="text-subtle text-base">{t("the_infrastructure_plan")}</p>
                      </div>
                      <div className="flex-shrink-0 self-center">
-                        <FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
+                        <ChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
                      </div>
                    </a>
                  </li>
@@ -140,7 +142,7 @@ export default function Custom404() {
                      className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
                      <div className="flex-shrink-0">
                        <span className="bg-muted flex h-12 w-12 items-center justify-center rounded-lg">
-                          <FiFileText className="text-default h-6 w-6" aria-hidden="true" />
+                          <FileText className="text-default h-6 w-6" aria-hidden="true" />
                        </span>
                      </div>
                      <div className="min-w-0 flex-1">
@@ -153,7 +155,7 @@ export default function Custom404() {
                        <p className="text-subtle text-base">{t("prisma_studio_tip_description")}</p>
                      </div>
                      <div className="flex-shrink-0 self-center">
-                        <FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
+                        <ChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
                      </div>
                    </Link>
                  </li>
@@ -198,7 +200,7 @@ export default function Custom404() {
                        <p className="text-subtle text-base">{t("join_our_community")}</p>
                      </div>
                      <div className="flex-shrink-0 self-center">
-                        <FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
+                        <ChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
                      </div>
                    </a>
                  </li>
@@ -257,7 +259,7 @@ export default function Custom404() {
                        rel="noreferrer">
                        <div className="flex-shrink-0">
                          <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-50">
-                            <FiCheck className="h-6 w-6 text-green-500" aria-hidden="true" />
+                            <Check className="h-6 w-6 text-green-500" aria-hidden="true" />
                          </span>
                        </div>
                        <div className="min-w-0 flex-1">
@@ -272,7 +274,7 @@ export default function Custom404() {
                          <p className="text-subtle text-base">{t("claim_username_and_schedule_events")}</p>
                        </div>
                        <div className="flex-shrink-0 self-center">
-                          <FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
+                          <ChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
                        </div>
                      </a>
                    </li>
@@ -300,7 +302,7 @@ export default function Custom404() {
                          <p className="text-subtle text-base">{link.description}</p>
                        </div>
                        <div className="flex-shrink-0 self-center">
-                          <FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
+                          <ChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
                        </div>
                      </Link>
                    </li>
@@ -346,7 +348,7 @@ export default function Custom404() {
                        <p className="text-subtle text-base">{t("join_our_community")}</p>
                      </div>
                      <div className="flex-shrink-0 self-center">
-                        <FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
+                        <ChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
                      </div>
                    </a>
                  </li>
@@ -366,6 +368,8 @@ export default function Custom404() {
  );
 }

+Custom404.PageWrapper = PageWrapper;
+
 export const getStaticProps = async (context: GetStaticPropsContext) => {
  const ssr = await ssgInit(context);

@@ -4,7 +4,9 @@ import { useRouter } from "next/router";
 import { APP_NAME, WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, showToast } from "@calcom/ui";
-import { FiCopy } from "@calcom/ui/components/icon";
+import { Copy } from "@calcom/ui/components/icon";
+
+import PageWrapper from "@components/PageWrapper";

 export default function Error500() {
  const { t } = useLocale();
@@ -34,7 +36,7 @@ export default function Error500() {
              <Button
                color="secondary"
                className="mt-2 border-0 font-sans font-normal hover:bg-gray-300"
-                StartIcon={FiCopy}
+                StartIcon={Copy}
                onClick={() => {
                  navigator.clipboard.writeText(router.query.error as string);
                  showToast("Link copied!", "success");
@@ -52,3 +54,5 @@ export default function Error500() {
    </div>
  );
 }
+
+Error500.PageWrapper = PageWrapper;
@@ -3,7 +3,6 @@ import classNames from "classnames";
 import type { GetServerSidePropsContext } from "next";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { useEffect } from "react";
 import { Toaster } from "react-hot-toast";

 import {
@@ -24,16 +23,17 @@ import defaultEvents, {
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
-import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import prisma from "@calcom/prisma";
 import { baseEventTypeSelect } from "@calcom/prisma/selects";
 import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
 import { Avatar, AvatarGroup, HeadSeo } from "@calcom/ui";
-import { FiArrowRight } from "@calcom/ui/components/icon";
+import { ArrowRight } from "@calcom/ui/components/icon";

 import type { inferSSRProps } from "@lib/types/inferSSRProps";
 import type { EmbedProps } from "@lib/withEmbedSsr";

+import PageWrapper from "@components/PageWrapper";
+
 import { ssrInit } from "@server/lib/ssr";

 export default function User(props: inferSSRProps<typeof getServerSideProps> & EmbedProps) {
@@ -60,7 +60,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
        <li
          key={index}
          className=" border-subtle bg-default hover:bg-muted group relative border-b first:rounded-t-md last:rounded-b-md last:border-b-0">
-          <FiArrowRight className="text-emphasis absolute right-3 top-3 h-4 w-4 opacity-0 transition-opacity group-hover:opacity-100" />
+          <ArrowRight className="text-emphasis absolute right-3 top-3 h-4 w-4 opacity-0 transition-opacity group-hover:opacity-100" />
          <Link
            href={getUsernameSlugLink({ users: props.users, slug: type.slug })}
            className="flex justify-between px-6 py-4"
@@ -93,14 +93,15 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
  const query = { ...router.query };
  delete query.user; // So it doesn't display in the Link (and make tests fail)
  const nameOrUsername = user.name || user.username || "";
-  const telemetry = useTelemetry();

-  useEffect(() => {
+  /* 
+   const telemetry = useTelemetry();
+   useEffect(() => {
    if (top !== window) {
      //page_view will be collected automatically by _middleware.ts
      telemetry.event(telemetryEventTypes.embedView, collectPageParameters("/[user]"));
    }
-  }, [telemetry, router.asPath]);
+  }, [telemetry, router.asPath]); */
  const isEventListEmpty = eventTypes.length === 0;
  return (
    <>
@@ -122,7 +123,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
        <main
          className={classNames(
            shouldAlignCentrally ? "mx-auto" : "",
-            isEmbed ? " border-bookinglightest  bg-default rounded-md border" : "",
+            isEmbed ? " border-booker border-booker-width  bg-default rounded-md border" : "",
            "max-w-3xl py-24 px-4"
          )}>
          {isSingleUser && ( // When we deal with a single user, not dynamic group
@@ -161,7 +162,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
                  key={type.id}
                  style={{ display: "flex", ...eventTypeListItemEmbedStyles }}
                  className=" border-subtle bg-default hover:bg-muted group relative border-b first:rounded-t-md last:rounded-b-md last:border-b-0">
-                  <FiArrowRight className="text-emphasis  absolute right-4 top-4 h-4 w-4 opacity-0 transition-opacity group-hover:opacity-100" />
+                  <ArrowRight className="text-emphasis  absolute right-4 top-4 h-4 w-4 opacity-0 transition-opacity group-hover:opacity-100" />
                  {/* Don't prefetch till the time we drop the amount of javascript in [user][type] page which is impacting score for [user] page */}
                  <div className="block w-full p-5">
                    <Link
@@ -180,7 +181,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
                      <div className="flex flex-wrap items-center">
                        <h2 className=" text-default pr-2 text-sm font-semibold">{type.title}</h2>
                      </div>
-                      <EventTypeDescription eventType={type} />
+                      <EventTypeDescription eventType={type} isPublic={true} />
                    </Link>
                  </div>
                </div>
@@ -196,6 +197,9 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
  );
 }

+User.isBookingPage = true;
+User.PageWrapper = PageWrapper;
+
 const getEventTypesWithHiddenFromDB = async (userId: number) => {
  return (
    await prisma.eventType.findMany({
@@ -12,6 +12,7 @@ import { isBrandingHidden } from "@lib/isBrandingHidden";
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
 import type { EmbedProps } from "@lib/withEmbedSsr";

+import PageWrapper from "@components/PageWrapper";
 import AvailabilityPage from "@components/booking/pages/AvailabilityPage";

 export type AvailabilityPageProps = inferSSRProps<typeof getStaticProps> & EmbedProps;
@@ -54,6 +55,9 @@ export default function Type(props: AvailabilityPageProps) {
  );
 }

+Type.isBookingPage = true;
+Type.PageWrapper = PageWrapper;
+
 const paramsSchema = z.object({ type: z.string(), user: z.string() });
 async function getUserPageProps(context: GetStaticPropsContext) {
  // load server side dependencies
@@ -26,6 +26,7 @@ import {

 import type { inferSSRProps } from "@lib/types/inferSSRProps";

+import PageWrapper from "@components/PageWrapper";
 import BookingPage from "@components/booking/pages/BookingPage";

 import { ssrInit } from "@server/lib/ssr";
@@ -69,6 +70,9 @@ export default function Book(props: BookPageProps) {
  );
 }

+Book.isBookingPage = true;
+Book.PageWrapper = PageWrapper;
+
 const querySchema = z.object({
  bookingUid: z.string().optional(),
  count: z.coerce.number().optional(),
@@ -18,7 +18,7 @@ export const getStaticProps: GetStaticProps<
  { user: string }
 > = async (context) => {
  const { user: username, month } = paramsSchema.parse(context.params);
-  const user = await prisma.user.findUnique({
+  const userWithCredentials = await prisma.user.findUnique({
    where: {
      username,
    },
@@ -34,14 +34,15 @@ export const getStaticProps: GetStaticProps<
  ).startOf("day");
  const endDate = startDate.endOf("month");
  try {
-    const results = user?.credentials
+    const results = userWithCredentials?.credentials
      ? await getCachedResults(
-          user?.credentials,
+          userWithCredentials?.credentials,
          startDate.format(),
          endDate.format(),
-          user?.selectedCalendars
+          userWithCredentials?.selectedCalendars
        )
      : [];
+
    return {
      props: { results, date: new Date().toISOString() },
      revalidate: 1,
@@ -1,82 +1,13 @@
-import { DefaultSeo } from "next-seo";
-import { Inter } from "next/font/google";
-import localFont from "next/font/local";
-import Head from "next/head";
-import Script from "next/script";
-
-import "@calcom/embed-core/src/embed-iframe";
-import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
 import { trpc } from "@calcom/trpc/react";

 import type { AppProps } from "@lib/app-providers";
-import AppProviders from "@lib/app-providers";
-import { seoConfig } from "@lib/config/next-seo.config";
-
-import I18nLanguageHandler from "@components/I18nLanguageHandler";

 import "../styles/globals.css";

-const interFont = Inter({ subsets: ["latin"], variable: "--font-inter", preload: true, display: "swap" });
-const calFont = localFont({
-  src: "../fonts/CalSans-SemiBold.woff2",
-  variable: "--font-cal",
-  preload: true,
-  display: "swap",
-});
-
 function MyApp(props: AppProps) {
-  const { Component, pageProps, err, router } = props;
-  let pageStatus = "200";
-  if (router.pathname === "/404") {
-    pageStatus = "404";
-  } else if (router.pathname === "/500") {
-    pageStatus = "500";
-  }
-
-  // On client side don't let nonce creep into DOM
-  // It also avoids hydration warning that says that Client has the nonce value but server has "" because browser removes nonce attributes before DOM is built
-  // See https://github.com/kentcdodds/nonce-hydration-issues
-  // Set "" only if server had it set otherwise keep it undefined because server has to match with client to avoid hydration error
-  const nonce = typeof window !== "undefined" ? (pageProps.nonce ? "" : undefined) : pageProps.nonce;
-  const providerProps = {
-    ...props,
-    pageProps: {
-      ...props.pageProps,
-      nonce,
-    },
-  };
-  // Use the layout defined at the page level, if available
-  const getLayout = Component.getLayout ?? ((page) => page);
-  return (
-    <AppProviders {...providerProps}>
-      <DefaultSeo {...seoConfig.defaultNextSeo} />
-      <I18nLanguageHandler />
-      <Script
-        nonce={nonce}
-        id="page-status"
-        dangerouslySetInnerHTML={{ __html: `window.CalComPageStatus = '${pageStatus}'` }}
-      />
-      <style jsx global>{`
-        :root {
-          --font-inter: ${interFont.style.fontFamily};
-          --font-cal: ${calFont.style.fontFamily};
-        }
-      `}</style>
-      <Head>
-        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
-      </Head>
-      {getLayout(
-        Component.requiresLicense ? (
-          <LicenseRequired>
-            <Component {...pageProps} err={err} />
-          </LicenseRequired>
-        ) : (
-          <Component {...pageProps} err={err} />
-        ),
-        router
-      )}
-    </AppProviders>
-  );
+  const { Component, pageProps } = props;
+  if (Component.PageWrapper !== undefined) return Component.PageWrapper(props);
+  return <Component {...pageProps} />;
 }

 export default trpc.withTRPC(MyApp);
@@ -1,6 +1,6 @@
+import type { NextPageContext } from "next";
 import type { DocumentContext, DocumentProps } from "next/document";
 import Document, { Head, Html, Main, NextScript } from "next/document";
-import Script from "next/script";
 import { z } from "zod";

 import { getDirFromLang } from "@calcom/lib/i18n";
@@ -8,15 +8,22 @@ import { getDirFromLang } from "@calcom/lib/i18n";
 import { csp } from "@lib/csp";

 type Props = Record<string, unknown> & DocumentProps;
-
+function setHeader(ctx: NextPageContext, name: string, value: string) {
+  try {
+    ctx.res?.setHeader(name, value);
+  } catch (e) {
+    // Getting "Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client" when revalidate calendar chache
+    console.log(`Error setting header ${name}=${value} for ${ctx.asPath || "unknown asPath"}`, e);
+  }
+}
 class MyDocument extends Document<Props> {
  static async getInitialProps(ctx: DocumentContext) {
    const { nonce } = csp(ctx.req || null, ctx.res || null);
    if (!process.env.CSP_POLICY) {
-      ctx.res?.setHeader("x-csp", "not-opted-in");
+      setHeader(ctx, "x-csp", "not-opted-in");
    } else if (!ctx.res?.getHeader("x-csp")) {
      // If x-csp not set by gSSP, then it's initialPropsOnly
-      ctx.res?.setHeader("x-csp", "initialPropsOnly");
+      setHeader(ctx, "x-csp", "initialPropsOnly");
    }
    const asPath = ctx.asPath || "";
    // Use a dummy URL as default so that URL parsing works for relative URLs as well. We care about searchParams and pathname only
@@ -42,7 +49,6 @@ class MyDocument extends Document<Props> {
          <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000" />
          <meta name="msapplication-TileColor" content="#ff0000" />
          <meta name="theme-color" content="var(--cal-bg)" />
-          <Script src="/embed-init-iframe.js" strategy="beforeInteractive" />
        </Head>

        <body
@@ -2,7 +2,6 @@
 * Typescript class based component for custom-error
 * @link https://nextjs.org/docs/advanced-features/custom-error-page
 */
-import * as Sentry from "@sentry/nextjs";
 import type { NextPage, NextPageContext } from "next";
 import type { ErrorProps } from "next/error";
 import NextError from "next/error";
@@ -50,7 +49,6 @@ const CustomError: NextPage<CustomErrorProps> = (props) => {
 */
 CustomError.getInitialProps = async (ctx: AugmentedNextPageContext) => {
  const { res, err, asPath } = ctx;
-  await Sentry.captureUnderscoreErrorException(ctx);
  const errorInitialProps = (await NextError.getInitialProps({
    res,
    err,
@@ -1,29 +0,0 @@
-import type { NextApiRequest } from "next";
-import { z } from "zod";
-
-import { getUserAvailability } from "@calcom/core/getUserAvailability";
-import { defaultResponder } from "@calcom/lib/server";
-import { stringOrNumber } from "@calcom/prisma/zod-utils";
-
-const availabilitySchema = z.object({
-  user: z.string(),
-  dateFrom: z.string(),
-  dateTo: z.string(),
-  eventTypeId: stringOrNumber.optional(),
-});
-
-/**
- * @deprecated Use TRCP's viewer.availability.user
- */
-
-async function handler(req: NextApiRequest) {
-  const { user: username, eventTypeId, dateTo, dateFrom } = availabilitySchema.parse(req.query);
-  return getUserAvailability({
-    username,
-    dateFrom,
-    dateTo,
-    eventTypeId,
-  });
-}
-
-export default defaultResponder(handler);
@@ -14,7 +14,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
    return;
  }

-  const user = await prisma.user.findUnique({
+  const userWithCredentials = await prisma.user.findUnique({
    where: {
      id: session.user.id,
    },
@@ -25,11 +25,11 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
      selectedCalendars: true,
    },
  });
-
-  if (!user) {
+  if (!userWithCredentials) {
    res.status(401).json({ message: "Not authenticated" });
    return;
  }
+  const { credentials, ...user } = userWithCredentials;

  if (req.method === "POST") {
    await prisma.selectedCalendar.upsert({
@@ -80,7 +80,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
    });

    // get user's credentials + their connected integrations
-    const calendarCredentials = getCalendarCredentials(user.credentials);
+    const calendarCredentials = getCalendarCredentials(credentials);
    // get all the connected integrations' calendars (from third party)
    const { connectedCalendars } = await getConnectedCalendars(calendarCredentials, user.selectedCalendars);
    const calendars = connectedCalendars.flatMap((c) => c.calendars).filter(notEmpty);
@@ -0,0 +1,28 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import crypto from "node:crypto";
+
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import { defaultHandler } from "@calcom/lib/server";
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const session = await getServerSession({ req, res });
+  const secret = process.env.INTERCOM_SECRET;
+
+  if (!session) {
+    return res.status(401).json({ message: "user not authenticated" });
+  }
+
+  if (!secret) {
+    return res.status(400).json({ message: "Intercom Identity Verification secret not set" });
+  }
+
+  const hmac = crypto.createHmac("sha256", secret);
+  hmac.update(String(session.user.id));
+  const hash = hmac.digest("hex");
+
+  return res.status(200).json({ hash });
+}
+
+export default defaultHandler({
+  GET: Promise.resolve({ default: handler }),
+});
@@ -0,0 +1,80 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { z } from "zod";
+
+import { IS_SELF_HOSTED, LOGO, LOGO_ICON, WEBAPP_URL } from "@calcom/lib/constants";
+
+function removePort(url: string) {
+  return url.replace(/:\d+$/, "");
+}
+
+function extractSubdomainAndDomain(hostname: string) {
+  const hostParts = removePort(hostname).split(".");
+
+  const subdomainParts = hostParts.slice(0, hostParts.length - 2);
+  const domain = hostParts.slice(hostParts.length - 2).join(".");
+
+  return [subdomainParts[0], domain];
+}
+
+const logoApiSchema = z.object({
+  icon: z.coerce.boolean().optional(),
+});
+
+const SYSTEM_SUBDOMAINS = ["console", "app", "www"];
+
+async function getTeamLogos(subdomain: string) {
+  if (
+    // if not cal.com
+    IS_SELF_HOSTED ||
+    // missing subdomain (empty string)
+    !subdomain ||
+    // in SYSTEM_SUBDOMAINS list
+    SYSTEM_SUBDOMAINS.includes(subdomain)
+  ) {
+    return {
+      appLogo: `${WEBAPP_URL}${LOGO}`,
+      appIconLogo: `${WEBAPP_URL}${LOGO_ICON}`,
+    };
+  }
+  // load from DB
+  const { default: prisma } = await import("@calcom/prisma");
+  const team = await prisma.team.findUniqueOrThrow({
+    where: {
+      slug: subdomain,
+    },
+    select: {
+      appLogo: true,
+      appIconLogo: true,
+    },
+  });
+  // try to use team logos, otherwise default to LOGO/LOGO_ICON regardless
+  return {
+    appLogo: team.appLogo || `${WEBAPP_URL}${LOGO}`,
+    appIconLogo: team.appIconLogo || `${WEBAPP_URL}${LOGO_ICON}`,
+  };
+}
+
+/**
+ * This API endpoint is used to serve the logo associated with a team if no logo is found we serve our default logo
+ */
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const { query } = req;
+  const parsedQuery = logoApiSchema.parse(query);
+
+  const hostname = req?.headers["host"];
+  if (!hostname) throw new Error("No hostname");
+  const domains = extractSubdomainAndDomain(hostname);
+  if (!domains) throw new Error("No domains");
+
+  const [subdomain] = domains;
+  const { appLogo, appIconLogo } = await getTeamLogos(subdomain);
+
+  const filteredLogo = parsedQuery?.icon ? appIconLogo : appLogo;
+
+  const response = await fetch(filteredLogo);
+  const arrayBuffer = await response.arrayBuffer();
+  const buffer = Buffer.from(arrayBuffer);
+  res.setHeader("Content-Type", response.headers.get("content-type") as string);
+  res.setHeader("Cache-Control", "s-maxage=86400");
+  res.send(buffer);
+}
@@ -0,0 +1,146 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { z } from "zod";
+
+import { DailyLocationType } from "@calcom/app-store/locations";
+import { getDownloadLinkOfCalVideoByRecordingId } from "@calcom/core/videoClient";
+import { sendDailyVideoRecordingEmails } from "@calcom/emails";
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import { IS_SELF_HOSTED } from "@calcom/lib/constants";
+import { defaultHandler } from "@calcom/lib/server";
+import { getTranslation } from "@calcom/lib/server/i18n";
+import prisma, { bookingMinimalSelect } from "@calcom/prisma";
+import type { CalendarEvent } from "@calcom/types/Calendar";
+
+const schema = z.object({
+  recordingId: z.string(),
+  bookingUID: z.string(),
+});
+
+const downloadLinkSchema = z.object({
+  download_link: z.string(),
+});
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (!process.env.SENDGRID_API_KEY || !process.env.SENDGRID_EMAIL) {
+    return res.status(405).json({ message: "No SendGrid API key or email" });
+  }
+  const response = schema.safeParse(JSON.parse(req.body));
+
+  if (!response.success) {
+    return res.status(400).send({
+      message: "Invalid Payload",
+    });
+  }
+
+  const { recordingId, bookingUID } = response.data;
+  const session = await getServerSession({ req, res });
+
+  if (!session?.user) {
+    return res.status(401).send({
+      message: "User not logged in",
+    });
+  }
+
+  try {
+    const booking = await prisma.booking.findFirst({
+      where: {
+        uid: bookingUID,
+      },
+      select: {
+        ...bookingMinimalSelect,
+        uid: true,
+        location: true,
+        isRecorded: true,
+        user: {
+          select: {
+            id: true,
+            timeZone: true,
+            email: true,
+            name: true,
+            locale: true,
+            destinationCalendar: true,
+          },
+        },
+      },
+    });
+
+    if (!booking || booking.location !== DailyLocationType) {
+      return res.status(404).send({
+        message: `Booking of uid ${bookingUID} does not exist or does not contain daily video as location`,
+      });
+    }
+
+    const t = await getTranslation(booking?.user?.locale ?? "en", "common");
+    const attendeesListPromises = booking.attendees.map(async (attendee) => {
+      return {
+        id: attendee.id,
+        name: attendee.name,
+        email: attendee.email,
+        timeZone: attendee.timeZone,
+        language: {
+          translate: await getTranslation(attendee.locale ?? "en", "common"),
+          locale: attendee.locale ?? "en",
+        },
+      };
+    });
+
+    const attendeesList = await Promise.all(attendeesListPromises);
+
+    const isUserAttendeeOrOrganiser =
+      booking?.user?.id === session.user.id ||
+      attendeesList.find((attendee) => attendee.id === session.user.id);
+
+    if (!isUserAttendeeOrOrganiser) {
+      return res.status(403).send({
+        message: "Unauthorised",
+      });
+    }
+
+    await prisma.booking.update({
+      where: {
+        uid: booking.uid,
+      },
+      data: {
+        isRecorded: true,
+      },
+    });
+
+    const isSendingEmailsAllowed = IS_SELF_HOSTED || session?.user?.belongsToActiveTeam;
+
+    // send emails to all attendees only when user has team plan
+    if (isSendingEmailsAllowed) {
+      const response = await getDownloadLinkOfCalVideoByRecordingId(recordingId);
+
+      const downloadLinkResponse = downloadLinkSchema.parse(response);
+      const downloadLink = downloadLinkResponse.download_link;
+
+      const evt: CalendarEvent = {
+        type: booking.title,
+        title: booking.title,
+        description: booking.description || undefined,
+        startTime: booking.startTime.toISOString(),
+        endTime: booking.endTime.toISOString(),
+        organizer: {
+          email: booking.user?.email || "Email-less",
+          name: booking.user?.name || "Nameless",
+          timeZone: booking.user?.timeZone || "Europe/London",
+          language: { translate: t, locale: booking?.user?.locale ?? "en" },
+        },
+        attendees: attendeesList,
+        uid: booking.uid,
+      };
+
+      await sendDailyVideoRecordingEmails(evt, downloadLink);
+      return res.status(200).json({ message: "Success" });
+    }
+
+    return res.status(403).json({ message: "User does not have team plan to send out emails" });
+  } catch (err) {
+    console.warn("something_went_wrong", err);
+    return res.status(500).json({ message: "something went wrong" });
+  }
+}
+
+export default defaultHandler({
+  POST: Promise.resolve({ default: handler }),
+});
@@ -9,13 +9,16 @@ import type { AppGetServerSideProps } from "@calcom/types/AppGetServerSideProps"

 import type { AppProps } from "@lib/app-providers";

+import PageWrapper from "@components/PageWrapper";
+
 import { ssrInit } from "@server/lib/ssr";

 type AppPageType = {
  getServerSideProps: AppGetServerSideProps;
  // A component than can accept any properties
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  default: ((props: any) => JSX.Element) & Pick<AppProps["Component"], "isThemeSupported" | "getLayout">;
+  default: ((props: any) => JSX.Element) &
+    Pick<AppProps["Component"], "isBookingPage" | "getLayout" | "PageWrapper">;
 };

 type Found = {
@@ -70,17 +73,17 @@ const AppPage: AppPageType["default"] = function AppPage(props) {
  return <route.Component {...componentProps} />;
 };

-AppPage.isThemeSupported = ({ router }) => {
+AppPage.isBookingPage = ({ router }) => {
  const route = getRoute(router.query.slug as string, router.query.pages as string[]);
  if (route.notFound) {
    return false;
  }
-  const isThemeSupported = route.Component.isThemeSupported;
-  if (typeof isThemeSupported === "function") {
-    return isThemeSupported({ router });
+  const isBookingPage = route.Component.isBookingPage;
+  if (typeof isBookingPage === "function") {
+    return isBookingPage({ router });
  }

-  return !!isThemeSupported;
+  return !!isBookingPage;
 };

 AppPage.getLayout = (page, router) => {
@@ -94,6 +97,8 @@ AppPage.getLayout = (page, router) => {
  return route.Component.getLayout(page, router);
 };

+AppPage.PageWrapper = PageWrapper;
+
 export default AppPage;

 export async function getServerSideProps(
@@ -10,6 +10,7 @@ import prisma from "@calcom/prisma";

 import type { inferSSRProps } from "@lib/types/inferSSRProps";

+import PageWrapper from "@components/PageWrapper";
 import App from "@components/apps/App";

 const md = new MarkdownIt("default", { html: true, breaks: true });
@@ -122,4 +123,6 @@ export const getStaticProps = async (ctx: GetStaticPropsContext) => {
  };
 };

+SingleAppPage.PageWrapper = PageWrapper;
+
 export default SingleAppPage;
@@ -5,6 +5,8 @@ import { useRouter } from "next/router";
 import { AppSetupPage } from "@calcom/app-store/_pages/setup";
 import { getStaticProps } from "@calcom/app-store/_pages/setup/_getStaticProps";

+import PageWrapper from "@components/PageWrapper";
+
 export default function SetupInformation(props: InferGetStaticPropsType<typeof getStaticProps>) {
  const router = useRouter();
  const slug = router.query.slug as string;
@@ -26,6 +28,8 @@ export default function SetupInformation(props: InferGetStaticPropsType<typeof g
  return <AppSetupPage slug={slug} {...props} />;
 }

+SetupInformation.PageWrapper = PageWrapper;
+
 export const getStaticPaths: GetStaticPaths = async () => {
  return {
    paths: [],
@@ -9,6 +9,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import prisma from "@calcom/prisma";
 import { AppCard, SkeletonText } from "@calcom/ui";

+import PageWrapper from "@components/PageWrapper";
+
 export default function Apps({ apps }: InferGetStaticPropsType<typeof getStaticProps>) {
  const { t, isLocaleReady } = useLocale();
  const router = useRouter();
@@ -47,6 +49,8 @@ export default function Apps({ apps }: InferGetStaticPropsType<typeof getStaticP
  );
 }

+Apps.PageWrapper = PageWrapper;
+
 export const getStaticPaths = async () => {
  const paths = Object.keys(AppCategories);

@@ -5,18 +5,20 @@ import { getAppRegistry } from "@calcom/app-store/_appRegistry";
 import Shell from "@calcom/features/shell/Shell";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { SkeletonText } from "@calcom/ui";
-import { FiArrowLeft, FiArrowRight } from "@calcom/ui/components/icon";
+import { ArrowLeft, ArrowRight } from "@calcom/ui/components/icon";
+
+import PageWrapper from "@components/PageWrapper";

 export default function Apps({ categories }: InferGetStaticPropsType<typeof getStaticProps>) {
  const { t, isLocaleReady } = useLocale();

  return (
-    <Shell isPublic large>
+    <Shell isPublic large hideHeadingOnMobile>
      <div className="text-md flex items-center gap-1 px-4 pb-3 pt-3 font-normal md:px-8 lg:px-0 lg:pt-0">
        <Link
          href="/apps"
          className="text-emphasis inline-flex items-center justify-start gap-1 rounded-sm py-2">
-          <FiArrowLeft className="h-4 w-4" />
+          <ArrowLeft className="h-4 w-4" />
          {isLocaleReady ? t("app_store") : <SkeletonText className="h-6 w-24" />}{" "}
        </Link>
      </div>
@@ -32,7 +34,7 @@ export default function Apps({ categories }: InferGetStaticPropsType<typeof getS
                <h3 className="font-medium capitalize">{category.name}</h3>
                <p className="text-subtle text-sm">
                  {t("number_apps", { count: category.count })}{" "}
-                  <FiArrowRight className="inline-block h-4 w-4" />
+                  <ArrowRight className="inline-block h-4 w-4" />
                </p>
              </div>
            </Link>
@@ -43,6 +45,8 @@ export default function Apps({ categories }: InferGetStaticPropsType<typeof getS
  );
 }

+Apps.PageWrapper = PageWrapper;
+
 export const getStaticProps = async () => {
  const appStore = await getAppRegistry();
  const categories = appStore.reduce((c, app) => {
@@ -10,8 +10,9 @@ import type { AppCategories } from "@calcom/prisma/client";
 import type { inferSSRProps } from "@calcom/types/inferSSRProps";
 import type { HorizontalTabItemProps } from "@calcom/ui";
 import { AllApps, AppStoreCategories, HorizontalTabs, TextField, PopularAppsSlider } from "@calcom/ui";
-import { FiSearch } from "@calcom/ui/components/icon";
+import { Search } from "@calcom/ui/components/icon";

+import PageWrapper from "@components/PageWrapper";
 import AppsLayout from "@components/apps/layouts/AppsLayout";

 import { ssrInit } from "@server/lib/ssr";
@@ -37,7 +38,7 @@ function AppsSearch({
  return (
    <TextField
      className="bg-subtle !border-muted !pl-0 focus:!ring-offset-0"
-      addOnLeading={<FiSearch className="text-subtle h-4 w-4" />}
+      addOnLeading={<Search className="text-subtle h-4 w-4" />}
      addOnClassname="!border-muted"
      containerClassName={classNames("focus:!ring-offset-0", className)}
      type="search"
@@ -85,6 +86,8 @@ export default function Apps({ categories, appStore }: inferSSRProps<typeof getS
  );
 }

+Apps.PageWrapper = PageWrapper;
+
 export const getServerSideProps = async (context: GetServerSidePropsContext) => {
  const { req, res } = context;

@@ -30,20 +30,21 @@ import {
  showToast,
 } from "@calcom/ui";
 import {
-  FiBarChart,
-  FiCalendar,
-  FiCreditCard,
-  FiGrid,
-  FiMoreHorizontal,
-  FiPlus,
-  FiShare2,
-  FiTrash,
-  FiVideo,
+  BarChart,
+  Calendar,
+  CreditCard,
+  Grid,
+  MoreHorizontal,
+  Plus,
+  Share2,
+  Trash,
+  Video,
 } from "@calcom/ui/components/icon";

 import { QueryCell } from "@lib/QueryCell";

 import AppListCard from "@components/AppListCard";
+import PageWrapper from "@components/PageWrapper";
 import { CalendarListContainer } from "@components/apps/CalendarListContainer";
 import InstalledAppsLayout from "@components/apps/layouts/InstalledAppsLayout";

@@ -71,7 +72,7 @@ function ConnectOrDisconnectIntegrationMenuItem(props: {
          color="destructive"
          onClick={() => handleDisconnect(credentialId)}
          disabled={isGlobal}
-          StartIcon={FiTrash}>
+          StartIcon={Trash}>
          {t("remove_app")}
        </DropdownItem>
      </DropdownMenuItem>
@@ -159,7 +160,7 @@ const IntegrationsList = ({ data, handleDisconnect, variant }: IntegrationsListP
                  <div className="flex  justify-end">
                    <Dropdown modal={false}>
                      <DropdownMenuTrigger asChild>
-                        <Button StartIcon={FiMoreHorizontal} variant="icon" color="secondary" />
+                        <Button StartIcon={MoreHorizontal} variant="icon" color="secondary" />
                      </DropdownMenuTrigger>
                      <DropdownMenuContent>
                        {!appIsDefault && variant === "conferencing" && (
@@ -167,7 +168,7 @@ const IntegrationsList = ({ data, handleDisconnect, variant }: IntegrationsListP
                            <DropdownItem
                              type="button"
                              color="secondary"
-                              StartIcon={FiVideo}
+                              StartIcon={Video}
                              onClick={() => {
                                const locationType = getEventLocationTypeFromApp(
                                  item?.locationOption?.value ?? ""
@@ -225,13 +226,13 @@ const IntegrationsContainer = ({
  const { t } = useLocale();
  const query = trpc.viewer.integrations.useQuery({ variant, exclude, onlyInstalled: true });
  const emptyIcon = {
-    calendar: FiCalendar,
-    conferencing: FiVideo,
-    automation: FiShare2,
-    analytics: FiBarChart,
-    payment: FiCreditCard,
-    web3: FiBarChart,
-    other: FiGrid,
+    calendar: Calendar,
+    conferencing: Video,
+    automation: Share2,
+    analytics: BarChart,
+    payment: CreditCard,
+    web3: BarChart,
+    other: Grid,
  };

  return (
@@ -270,7 +271,7 @@ const IntegrationsContainer = ({
                    variant ? `/apps/categories/${variant === "conferencing" ? "video" : variant}` : "/apps"
                  }
                  color="secondary"
-                  StartIcon={FiPlus}>
+                  StartIcon={Plus}>
                  {t("add")}
                </Button>
              }
@@ -372,3 +373,5 @@ export async function getServerSideProps(ctx: AppGetServerSidePropsContext) {
    },
  };
 }
+
+InstalledApps.PageWrapper = PageWrapper;
@@ -5,8 +5,9 @@ import z from "zod";

 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, SkeletonText } from "@calcom/ui";
-import { FiX } from "@calcom/ui/components/icon";
+import { X } from "@calcom/ui/components/icon";

+import PageWrapper from "@components/PageWrapper";
 import AuthContainer from "@components/ui/AuthContainer";

 import { ssgInit } from "@server/lib/ssg";
@@ -29,7 +30,7 @@ export default function Error() {
    <AuthContainer title="" description="">
      <div>
        <div className="bg-error mx-auto flex h-12 w-12 items-center justify-center rounded-full">
-          <FiX className="h-6 w-6 text-red-600" />
+          <X className="h-6 w-6 text-red-600" />
        </div>
        <div className="mt-3 text-center sm:mt-5">
          <h3 className="text-emphasis text-lg font-medium leading-6" id="modal-title">
@@ -49,6 +50,8 @@ export default function Error() {
  );
 }

+Error.PageWrapper = PageWrapper;
+
 export const getStaticProps = async (context: GetStaticPropsContext) => {
  const ssr = await ssgInit(context);

@@ -4,6 +4,7 @@ import type { GetServerSidePropsContext } from "next";
 import { getCsrfToken } from "next-auth/react";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import Link from "next/link";
+import type { CSSProperties } from "react";
 import React, { useMemo } from "react";

 import dayjs from "@calcom/dayjs";
@@ -11,6 +12,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import prisma from "@calcom/prisma";
 import { Button, TextField } from "@calcom/ui";

+import PageWrapper from "@components/PageWrapper";
 import AuthContainer from "@components/ui/AuthContainer";

 type Props = {
@@ -109,6 +111,14 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
        <>
          <form
            className="space-y-6"
+            style={
+              {
+                "--cal-brand": "#111827",
+                "--cal-brand-emphasis": "#101010",
+                "--cal-brand-text": "white",
+                "--cal-brand-subtle": "#9CA3AF",
+              } as CSSProperties
+            }
            onSubmit={async (e) => {
              e.preventDefault();

@@ -164,6 +174,8 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
  );
 }

+Page.isThemeSupported = false;
+Page.PageWrapper = PageWrapper;
 export async function getServerSideProps(context: GetServerSidePropsContext) {
  const id = context.params?.id as string;

@@ -4,13 +4,14 @@ import { getCsrfToken } from "next-auth/react";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import type { SyntheticEvent } from "react";
+import type { CSSProperties, SyntheticEvent } from "react";
 import React from "react";

 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, EmailField } from "@calcom/ui";

+import PageWrapper from "@components/PageWrapper";
 import AuthContainer from "@components/ui/AuthContainer";

 export default function ForgotPassword({ csrfToken }: { csrfToken: string }) {
@@ -105,7 +106,18 @@ export default function ForgotPassword({ csrfToken }: { csrfToken: string }) {
      {!success && (
        <>
          <div className="space-y-6">{error && <p className="text-red-600">{error.message}</p>}</div>
-          <form className="space-y-6" onSubmit={handleSubmit} action="#">
+          <form
+            className="space-y-6"
+            onSubmit={handleSubmit}
+            action="#"
+            style={
+              {
+                "--cal-brand": "#111827",
+                "--cal-brand-emphasis": "#101010",
+                "--cal-brand-text": "white",
+                "--cal-brand-subtle": "#9CA3AF",
+              } as CSSProperties
+            }>
            <input name="csrfToken" type="hidden" defaultValue={csrfToken} hidden />
            <EmailField
              onChange={handleChange}
@@ -132,6 +144,9 @@ export default function ForgotPassword({ csrfToken }: { csrfToken: string }) {
  );
 }

+ForgotPassword.isThemeSupported = false;
+ForgotPassword.PageWrapper = PageWrapper;
+
 export const getServerSideProps = async (context: GetServerSidePropsContext) => {
  const { req, res } = context;

@@ -19,13 +19,14 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import prisma from "@calcom/prisma";
 import { Alert, Button, EmailField, PasswordField } from "@calcom/ui";
-import { FiArrowLeft } from "@calcom/ui/components/icon";
+import { ArrowLeft } from "@calcom/ui/components/icon";

 import type { inferSSRProps } from "@lib/types/inferSSRProps";
 import type { WithNonceProps } from "@lib/withNonce";
 import withNonce from "@lib/withNonce";

 import AddToHomescreen from "@components/AddToHomescreen";
+import PageWrapper from "@components/PageWrapper";
 import TwoFactor from "@components/auth/TwoFactor";
 import AuthContainer from "@components/ui/AuthContainer";

@@ -91,7 +92,7 @@ export default function Login({
        setTwoFactorRequired(false);
        methods.setValue("totpCode", "");
      }}
-      StartIcon={FiArrowLeft}
+      StartIcon={ArrowLeft}
      color="minimal">
      {t("go_back")}
    </Button>
@@ -164,14 +165,6 @@ export default function Login({
                  {...register("email")}
                />
                <div className="relative">
-                  <div className="absolute -top-[6px]  z-10 ltr:right-0 rtl:left-0">
-                    <Link
-                      href="/auth/forgot-password"
-                      tabIndex={-1}
-                      className="text-default text-sm font-medium">
-                      {t("forgot")}
-                    </Link>
-                  </div>
                  <PasswordField
                    id="password"
                    autoComplete="off"
@@ -179,6 +172,14 @@ export default function Login({
                    className="mb-0"
                    {...register("password")}
                  />
+                  <div className="absolute -top-1.5 ltr:right-0 rtl:left-0">
+                    <Link
+                      href="/auth/forgot-password"
+                      tabIndex={-1}
+                      className="text-default text-sm font-medium">
+                      {t("forgot")}
+                    </Link>
+                  </div>
                </div>
              </div>

@@ -302,5 +303,6 @@ const _getServerSideProps = async function getServerSideProps(context: GetServer
 };

 Login.isThemeSupported = false;
+Login.PageWrapper = PageWrapper;

 export const getServerSideProps = withNonce(_getServerSideProps);
@@ -6,10 +6,11 @@ import { useEffect } from "react";
 import { WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui";
-import { FiCheck } from "@calcom/ui/components/icon";
+import { Check } from "@calcom/ui/components/icon";

 import type { inferSSRProps } from "@lib/types/inferSSRProps";

+import PageWrapper from "@components/PageWrapper";
 import AuthContainer from "@components/ui/AuthContainer";

 import { ssrInit } from "@server/lib/ssr";
@@ -32,7 +33,7 @@ export function Logout(props: Props) {
    <AuthContainer title={t("logged_out")} description={t("youve_been_logged_out")} showLogo>
      <div className="mb-4">
        <div className="bg-success mx-auto flex h-12 w-12 items-center justify-center rounded-full">
-          <FiCheck className="h-6 w-6 text-green-600" />
+          <Check className="h-6 w-6 text-green-600" />
        </div>
        <div className="mt-3 text-center sm:mt-5">
          <h3 className="text-emphasis text-lg font-medium leading-6" id="modal-title">
@@ -51,7 +52,7 @@ export function Logout(props: Props) {
 }

 Logout.isThemeSupported = false;
-
+Logout.PageWrapper = PageWrapper;
 export default Logout;

 export async function getServerSideProps(context: GetServerSidePropsContext) {
@@ -2,6 +2,8 @@ import { signIn } from "next-auth/react";
 import { useRouter } from "next/router";
 import { useEffect } from "react";

+import PageWrapper from "@components/PageWrapper";
+
 // To handle the IdP initiated login flow callback
 export default function Page() {
  const router = useRouter();
@@ -21,3 +23,4 @@ export default function Page() {

  return null;
 }
+Page.PageWrapper = PageWrapper;
@@ -11,6 +11,7 @@ import prisma from "@calcom/prisma";
 import type { inferSSRProps } from "@calcom/types/inferSSRProps";
 import { Meta, WizardForm } from "@calcom/ui";

+import PageWrapper from "@components/PageWrapper";
 import { AdminUserContainer as AdminUser } from "@components/setup/AdminUser";
 import ChooseLicense from "@components/setup/ChooseLicense";
 import EnterpriseLicense from "@components/setup/EnterpriseLicense";
@@ -136,7 +137,7 @@ export function Setup(props: inferSSRProps<typeof getServerSideProps>) {
 }

 Setup.isThemeSupported = false;
-
+Setup.PageWrapper = PageWrapper;
 export default Setup;

 export const getServerSideProps = async (context: GetServerSidePropsContext) => {
@@ -4,6 +4,8 @@ import { getProviders, signIn, getCsrfToken } from "next-auth/react";
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { Button } from "@calcom/ui";

+import PageWrapper from "@components/PageWrapper";
+
 type Provider = {
  name: string;
  id: string;
@@ -23,6 +25,8 @@ function signin({ providers }: { providers: Provider[] }) {
  );
 }

+signin.PageWrapper = PageWrapper;
+
 export default signin;

 export async function getServerSideProps(context: GetServerSidePropsContext) {
@@ -19,6 +19,8 @@ import prisma from "@calcom/prisma";
 import { asStringOrNull } from "@lib/asStringOrNull";
 import type { inferSSRProps } from "@lib/types/inferSSRProps";

+import PageWrapper from "@components/PageWrapper";
+
 import { ssrInit } from "@server/lib/ssr";

 export type SSOProviderPageProps = inferSSRProps<typeof getServerSideProps>;
@@ -49,6 +51,8 @@ export default function Provider(props: SSOProviderPageProps) {
  return null;
 }

+Provider.PageWrapper = PageWrapper;
+
 export const getServerSideProps = async (context: GetServerSidePropsContext) => {
  // get query params and typecast them to string
  // (would be even better to assert them instead of typecasting)
@@ -1,33 +1,41 @@
 import { signIn } from "next-auth/react";
 import { useRouter } from "next/router";
+import { useEffect } from "react";

 import { samlProductID, samlTenantID } from "@calcom/features/ee/sso/lib/saml";
 import { HOSTED_CAL_FEATURES } from "@calcom/lib/constants";

 import type { inferSSRProps } from "@lib/types/inferSSRProps";

+import PageWrapper from "@components/PageWrapper";
+
 // This page is used to initiate the SAML authentication flow by redirecting to the SAML provider.
 // Accessible only on self-hosted Cal.com instances.
 export default function Page({ samlTenantID, samlProductID }: inferSSRProps<typeof getServerSideProps>) {
  const router = useRouter();

-  if (HOSTED_CAL_FEATURES) {
-    router.push("/auth/login");
-    return;
-  }
+  useEffect(() => {
+    if (HOSTED_CAL_FEATURES) {
+      router.push("/auth/login");
+    }
+  }, []);

-  // Initiate SAML authentication flow
-  signIn(
-    "saml",
-    {
-      callbackUrl: "/",
-    },
-    { tenant: samlTenantID, product: samlProductID }
-  );
+  useEffect(() => {
+    // Initiate SAML authentication flow
+    signIn(
+      "saml",
+      {
+        callbackUrl: "/",
+      },
+      { tenant: samlTenantID, product: samlProductID }
+    );
+  }, []);

  return null;
 }

+Page.PageWrapper = PageWrapper;
+
 export async function getServerSideProps() {
  return {
    props: {
@@ -11,6 +11,7 @@ import { trpc } from "@calcom/trpc/react";
 import { Button, showToast } from "@calcom/ui";

 import Loader from "@components/Loader";
+import PageWrapper from "@components/PageWrapper";

 async function sendVerificationLogin(email: string, username: string) {
  await signIn("email", {
@@ -177,3 +178,5 @@ export default function Verify() {
    </div>
  );
 }
+
+Verify.PageWrapper = PageWrapper;
@@ -1,4 +1,5 @@
 import { useRouter } from "next/router";
+import { useState } from "react";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
 import { z } from "zod";

@@ -24,13 +25,19 @@ import {
  Tooltip,
  Dialog,
  DialogTrigger,
+  DropdownMenuSeparator,
+  Dropdown,
+  DropdownMenuContent,
+  DropdownItem,
+  DropdownMenuTrigger,
  ConfirmationDialogContent,
  VerticalDivider,
 } from "@calcom/ui";
-import { FiInfo, FiPlus, FiTrash } from "@calcom/ui/components/icon";
+import { Info, Plus, Trash, MoreHorizontal } from "@calcom/ui/components/icon";

 import { HttpError } from "@lib/core/http/error";

+import PageWrapper from "@components/PageWrapper";
 import { SelectSkeletonLoader } from "@components/availability/SkeletonLoader";
 import EditableHeading from "@components/ui/EditableHeading";

@@ -57,7 +64,7 @@ const DateOverride = ({ workingHours }: { workingHours: WorkingHours[] }) => {
        {t("date_overrides")}{" "}
        <Tooltip content={t("date_overrides_info")}>
          <span className="inline-block">
-            <FiInfo />
+            <Info className="h-4 w-4" />
          </span>
        </Tooltip>
      </h3>
@@ -75,7 +82,7 @@ const DateOverride = ({ workingHours }: { workingHours: WorkingHours[] }) => {
          excludedDates={fields.map((field) => yyyymmdd(field.ranges[0].start))}
          onChange={(ranges) => append({ ranges })}
          Trigger={
-            <Button color="secondary" StartIcon={FiPlus} data-testid="add-override">
+            <Button color="secondary" StartIcon={Plus} data-testid="add-override">
              Add an override
            </Button>
          }
@@ -96,6 +103,7 @@ export default function Availability() {

  const { fromEventType } = router.query;
  const { timeFormat } = me.data || { timeFormat: null };
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const { data: schedule, isLoading } = trpc.viewer.availability.schedule.get.useQuery(
    { scheduleId },
    {
@@ -181,11 +189,8 @@ export default function Availability() {
      }
      CTA={
        <div className="flex items-center justify-end">
-          <div className="sm:hover:bg-subtle flex items-center rounded-md px-2">
-            <Skeleton
-              as={Label}
-              htmlFor="hiddenSwitch"
-              className="mt-2 hidden cursor-pointer self-center pr-2 sm:inline">
+          <div className="hidden items-center rounded-md px-2 sm:flex sm:hover:bg-gray-100">
+            <Skeleton as={Label} htmlFor="hiddenSwitch" className="mt-2 cursor-pointer self-center pr-2 ">
              {t("set_to_default")}
            </Skeleton>
            <Switch
@@ -198,14 +203,15 @@ export default function Availability() {
            />
          </div>

-          <VerticalDivider />
+          <VerticalDivider className="hidden sm:inline" />
          <Dialog>
            <DialogTrigger asChild>
              <Button
-                StartIcon={FiTrash}
+                StartIcon={Trash}
                variant="icon"
                color="destructive"
                aria-label={t("delete")}
+                className="hidden sm:inline"
                disabled={schedule?.isLastSchedule}
                tooltip={t("requires_at_least_one_schedule")}
              />
@@ -222,8 +228,51 @@ export default function Availability() {
              {t("delete_schedule_description")}
            </ConfirmationDialogContent>
          </Dialog>
-
-          <VerticalDivider />
+          <VerticalDivider className="hidden sm:inline" />
+          <Dropdown>
+            <DropdownMenuTrigger asChild>
+              <Button className="sm:hidden" StartIcon={MoreHorizontal} variant="icon" color="secondary" />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent style={{ minWidth: "200px" }}>
+              <DropdownItem
+                type="button"
+                color="destructive"
+                StartIcon={Trash}
+                onClick={() => setDeleteDialogOpen(true)}>
+                {t("delete")}
+              </DropdownItem>
+              <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+                <ConfirmationDialogContent
+                  isLoading={deleteMutation.isLoading}
+                  variety="danger"
+                  title={t("delete_schedule")}
+                  confirmBtnText={t("delete")}
+                  loadingText={t("delete")}
+                  onConfirm={() => {
+                    schedule !== undefined && deleteMutation.mutate({ scheduleId: schedule.id });
+                  }}>
+                  {t("delete_schedule_description")}
+                </ConfirmationDialogContent>
+              </Dialog>
+              <DropdownMenuSeparator />
+              <div className="flex h-9 flex-row items-center justify-between py-2 px-4 hover:bg-gray-100">
+                <Skeleton
+                  as={Label}
+                  htmlFor="hiddenSwitch"
+                  className="mt-2 cursor-pointer self-center pr-2 sm:inline">
+                  {t("set_to_default")}
+                </Skeleton>
+                <Switch
+                  id="hiddenSwitch"
+                  disabled={isLoading || schedule?.isDefault}
+                  checked={form.watch("isDefault")}
+                  onCheckedChange={(e) => {
+                    form.setValue("isDefault", e);
+                  }}
+                />
+              </div>
+            </DropdownMenuContent>
+          </Dropdown>

          <div className="border-default border-l-2" />
          <Button className="ml-4 lg:ml-0" type="submit" form="availability-form">
@@ -301,3 +350,5 @@ export default function Availability() {
    </Shell>
  );
 }
+
+Availability.PageWrapper = PageWrapper;
@@ -6,11 +6,12 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import { EmptyScreen, showToast } from "@calcom/ui";
-import { FiClock } from "@calcom/ui/components/icon";
+import { Clock } from "@calcom/ui/components/icon";

 import { withQuery } from "@lib/QueryCell";
 import { HttpError } from "@lib/core/http/error";

+import PageWrapper from "@components/PageWrapper";
 import SkeletonLoader from "@components/availability/SkeletonLoader";

 export function AvailabilityList({ schedules }: RouterOutputs["viewer"]["availability"]["list"]) {
@@ -75,7 +76,7 @@ export function AvailabilityList({ schedules }: RouterOutputs["viewer"]["availab
      {schedules.length === 0 ? (
        <div className="flex justify-center">
          <EmptyScreen
-            Icon={FiClock}
+            Icon={Clock}
            headline={t("new_schedule_heading")}
            description={t("new_schedule_description")}
            buttonRaw={<NewScheduleButton />}
@@ -110,9 +111,15 @@ export default function AvailabilityPage() {
  const { t } = useLocale();
  return (
    <div>
-      <Shell heading={t("availability")} subtitle={t("configure_availability")} CTA={<NewScheduleButton />}>
+      <Shell
+        heading={t("availability")}
+        hideHeadingOnMobile
+        subtitle={t("configure_availability")}
+        CTA={<NewScheduleButton />}>
        <WithQuery success={({ data }) => <AvailabilityList {...data} />} customLoader={<SkeletonLoader />} />
      </Shell>
    </div>
  );
 }
+
+AvailabilityPage.PageWrapper = PageWrapper;
--- a/Show More
+++ b/Show More