v2.1.0

Uses utcOffset to display bookings according to current time & timeZone (#5050 )
Hotfix: bookings/past browser crash
2022-10-17 11:33:43 -06:00 · 2022-10-17 17:28:57 +00:00 · 2022-10-17 11:10:23 -06:00 · 2022-10-17 17:50:30 +01:00 · 2022-10-17 16:38:43 +00:00 · 2022-10-17 15:47:11 +02:00
618 changed files with 19521 additions and 14609 deletions
@@ -97,7 +97,7 @@ LARK_OPEN_VERIFICATION_TOKEN=""

 #   - WEB3
 # Used for the Web3 plugin
-# @see https://github.com/calcom/cal.com/blob/main/packages/app-store/web3/README.md
+# @see https://github.com/calcom/cal.com/blob/main/packages/app-store/rainbow/README.md
 ALCHEMY_API_KEY=""
 INFURA_API_KEY=""
 # *********************************************************************************************************
@@ -1,16 +0,0 @@
-name: Add PRs to project
-
-on:
-  pull_request:
-    types:
-      - opened
-
-jobs:
-  add-PR-to-project:
-    name: Add PR to project
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/add-to-project@v0.1.0
-        with:
-          project-url: https://github.com/orgs/calcom/projects/1
-          github-token: ${{ secrets.GH_ACCESS_TOKEN }}
@@ -17,6 +17,6 @@ jobs:
    steps:
      - uses: actions/add-to-project@v0.1.0
        with:
-          project-url: https://github.com/orgs/calcom/projects/1
+          project-url: https://github.com/orgs/calcom/projects/9
          github-token: ${{ secrets.GH_ACCESS_TOKEN }}
-          labeled: 🐛 bug, 🎨 needs design, 🙋🏻‍♂️help wanted, 🚨 urgent
+          labeled:  🙋🏻‍♂️help wanted
@@ -8,6 +8,8 @@ on:
 concurrency:
  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
  cancel-in-progress: true
+env:
+  NODE_OPTIONS: "--max-old-space-size=8192"
 jobs:
  check-types:
    runs-on: ubuntu-latest
@@ -20,8 +22,13 @@ jobs:

      - name: Use Node 16.x
        uses: actions/setup-node@v3
+        
        with:
          node-version: 16.x
          cache: "yarn"
+      
+      - name: Show info
+        run: node -e "console.log(require('v8').getHeapStatistics())"
+      
      - run: yarn --frozen-lockfile
      - run: yarn type-check
@@ -25,6 +25,7 @@ jobs:
      GOOGLE_LOGIN_ENABLED: true
      # CRON_API_KEY: xxx
      CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
+      DAILY_API_KEY: ${{ secrets.CI_DAILY_API_KEY }}
      NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
      NEXT_PUBLIC_STRIPE_FREE_PLAN_PRICE: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_FREE_PLAN_PRICE }}
      NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE }}
@@ -6,5 +6,5 @@
  },
  "typescript.preferences.importModuleSpecifier": "non-relative",
  "spellright.language": ["en"],
-  "spellright.documentTypes": ["markdown"]
+  "spellright.documentTypes": ["markdown", "typescript"]
 }
@@ -4,23 +4,6 @@ Contributions are what make the open source community such an amazing place to l

 - Before jumping into a PR be sure to search [existing PRs](https://github.com/calcom/cal.com/pulls) or [issues](https://github.com/calcom/cal.com/issues) for an open or closed item that relates to your submission.

-## Areas of expertise
-
-### Legend
-
-✅ = has knowledge
-
-🥇 = is their main priority
-
-⚠️ = is the only one with knowledge
-
-👀 = has no knowledge but wants to be onboarded
-
-<picture>
-  <source media="(prefers-color-scheme: dark)" srcset="https://dynamic-svgs.vercel.app/image.svg?dark">
-  <img alt="Areas of expertise table" src="https://dynamic-svgs.vercel.app/image.svg">
-</picture>
-
 ## Developing

 The development branch is `main`. This is the branch that all pull
@@ -31,7 +31,7 @@
   <a href="https://news.ycombinator.com/item?id=26817795"><img src="https://img.shields.io/badge/Hacker%20News-311-%23FF6600" alt="Hacker News"></a>
   <a href="https://github.com/calcom/cal.com/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-AGPLv3-purple" alt="License"></a>
   <a href="https://github.com/calcom/cal.com/pulse"><img src="https://img.shields.io/github/commit-activity/m/calcom/cal.com" alt="Commits-per-month"></a>
-   <a href="https://cal.com/pricing"><img src="https://img.shields.io/badge/Pricing-%2412%2Fmonth-brightgreen" alt="Pricing"></a>
+   <a href="https://cal.com/pricing"><img src="https://img.shields.io/badge/Pricing-Free-brightgreen" alt="Pricing"></a>
   <a href="https://jitsu.com?utm_source=github/calcom/cal.com"><img src="https://img.shields.io/badge/Metrics_tracked_by-JITSU-AA00FF?logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACKSURBVHgBrZDRCYAwDEQv6gCOoKO4hOCXI9QVnEZwiY5iF5GaVClaBNtioCSUvCR3tMJaxIfZgW4AGUoEPVwgPZoS0Dmgg3NBVDFNbMIsmYCak3J1jDk9iCQvsKJvkzr71N81Gj6vDT/LU2P6RhY63jcafk3YJEbgeZpiFyc/5HJKv8Ef273NSfABGbQfUZhnOSAAAAAASUVORK5CYII=" alt="Jitsu Tracked"></a>
   <img src="https://api.checklyhq.com/v1/badges/checks/5e048048-1b51-47ba-9209-60607507622e?responseTime=true" alt="Checkly Availability" />
   <a href="https://hub.docker.com/r/calendso/calendso"><img src="https://img.shields.io/docker/pulls/calendso/calendso"></a>
@@ -6,7 +6,7 @@ title: Vercel

 ## Requirements

-You need a PostgresDB database hosted somewhere. [Heroku](https://www.heroku.com) and [Supabase](https://supabase.com/) offer great free options.
+You need a PostgresDB database hosted somewhere. [Supabase](https://supabase.com/) offers a great free option.

 ## Getting Started

@@ -15,14 +15,15 @@
  "dependencies": {
    "@calcom/dayjs": "*",
    "@calcom/ui": "*",
-    "@radix-ui/react-avatar": "^0.1.4",
-    "@radix-ui/react-collapsible": "^0.1.0",
-    "@radix-ui/react-dialog": "^0.1.0",
-    "@radix-ui/react-dropdown-menu": "^0.1.1",
-    "@radix-ui/react-id": "^0.1.0",
-    "@radix-ui/react-radio-group": "^0.1.1",
-    "@radix-ui/react-slider": "^0.1.1",
-    "@radix-ui/react-switch": "^0.1.1",
+    "@radix-ui/react-avatar": "^1.0.0",
+    "@radix-ui/react-collapsible": "^1.0.0",
+    "@radix-ui/react-dialog": "^1.0.0",
+    "@radix-ui/react-dropdown-menu": "^1.0.0",
+    "@radix-ui/react-id": "^1.0.0",
+    "@radix-ui/react-popover": "^1.0.0",
+    "@radix-ui/react-radio-group": "^1.0.0",
+    "@radix-ui/react-slider": "^1.0.0",
+    "@radix-ui/react-switch": "^1.0.0",
    "@radix-ui/react-tooltip": "^1.0.0",
    "next": "^12.2.5",
    "next-transpile-modules": "^9.0.0",
@@ -1,7 +1,8 @@
+import { TooltipProvider } from "@radix-ui/react-tooltip";
 import { ComponentMeta, ComponentStory } from "@storybook/react";
 import { Copy } from "react-feather";

-import { TextAreaField, TextField } from "@calcom/ui/v2/core/form/fields";
+import { TextAreaField, TextField, PasswordField } from "@calcom/ui/v2/core/form/fields";
 import DatePicker from "@calcom/ui/v2/modules/booker/DatePicker";

 export default {
@@ -66,3 +67,9 @@ export const TextAreaInput: ComponentStory<typeof TextAreaField> = () => (
 );

 export const DatePickerInput: ComponentStory<typeof DatePicker> = () => <DatePicker date={new Date()} />;
+
+export const PasswordInput: ComponentStory<typeof PasswordField> = () => (
+  <TooltipProvider>
+    <PasswordField />
+  </TooltipProvider>
+);
@@ -426,7 +426,7 @@ paths:
                        - installed: true
                          type: caldav_calendar
                          credential: null
-                          title: CalDav Server
+                          title: CalDav (Beta)
                          imageSrc: integrations/caldav.svg
                          description: For personal and business calendars
                    __N_SSP: true
@@ -1,5 +1,6 @@
 import Link from "next/link";
-import React, { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import React, { useState } from "react";

 import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
 import { InstallAppButton } from "@calcom/app-store/components";
@@ -13,6 +14,8 @@ import { Icon } from "@calcom/ui/Icon";
 import Shell from "@calcom/ui/Shell";
 import Badge from "@calcom/ui/v2/core/Badge";

+import DisconnectIntegration from "@components/integrations/DisconnectIntegration";
+
 const Component = ({
  name,
  type,
@@ -32,8 +35,15 @@ const Component = ({
  isProOnly,
 }: Parameters<typeof App>[0]) => {
  const { t } = useLocale();
+  const router = useRouter();
  const { data: user } = trpc.useQuery(["viewer.me"]);

+  const utils = trpc.useContext();
+  const handleOpenChange = () => {
+    utils.invalidateQueries(["viewer.integrations"]);
+    router.replace("/apps/installed");
+  };
+
  const mutation = useAddAppMutation(null, {
    onSuccess: () => {
      showToast("App successfully installed", "success");
@@ -48,34 +58,14 @@ const Component = ({
    currency: "USD",
    useGrouping: false,
  }).format(price);
-  const [installedAppCount, setInstalledAppCount] = useState(0);
-  const [isLoading, setIsLoading] = useState(true);
-  useEffect(() => {
-    async function getInstalledApp(appCredentialType: string) {
-      const queryParam = new URLSearchParams();
-      queryParam.set("app-credential-type", appCredentialType);
-      try {
-        const result = await fetch(`/api/app-store/installed?${queryParam.toString()}`, {
-          method: "GET",
-          headers: {
-            "Content-Type": "application/json",
-          },
-        }).then((data) => {
-          setIsLoading(false);
-          return data;
-        });
-        if (result.status === 200) {
-          const res = await result.json();
-          setInstalledAppCount(res.count);
-        }
-      } catch (error) {
-        if (error instanceof Error) {
-          console.log(error.message);
-        }
-      }
-    }
-    getInstalledApp(type);
-  }, [type]);
+
+  const [existingCredentials, setExistingCredentials] = useState<number[]>([]);
+  const appCredentials = trpc.useQuery(["viewer.appCredentialsByType", { appType: type }], {
+    onSuccess(data) {
+      setExistingCredentials(data);
+    },
+  });
+
  const allowedMultipleInstalls = categories.indexOf("calendar") > -1;

  return (
@@ -92,11 +82,6 @@ const Component = ({
            <header className="px-4 py-2">
              <div className="flex items-center">
                <h1 className="font-cal text-xl text-gray-900">{name}</h1>
-                {isProOnly && user?.plan === "FREE" ? (
-                  <Badge className="ml-2" variant="default">
-                    PRO
-                  </Badge>
-                ) : null}
              </div>
              <h2 className="text-sm text-gray-500">
                <span className="capitalize">{categories[0]}</span> • {t("published_by", { author })}
@@ -105,12 +90,13 @@ const Component = ({
          </div>

          <div className="mt-4 sm:mt-0 sm:text-right">
-            {!isLoading ? (
-              isGlobal || (installedAppCount > 0 && allowedMultipleInstalls) ? (
+            {!appCredentials.isLoading ? (
+              isGlobal ||
+              (existingCredentials.length > 0 && allowedMultipleInstalls ? (
                <div className="flex space-x-3">
                  <Button StartIcon={Icon.FiCheck} color="secondary" disabled>
-                    {installedAppCount > 0
-                      ? t("active_install", { count: installedAppCount })
+                    {existingCredentials.length > 0
+                      ? t("active_install", { count: existingCredentials.length })
                      : t("globally_install")}
                  </Button>
                  {!isGlobal && (
@@ -135,10 +121,16 @@ const Component = ({
                    />
                  )}
                </div>
-              ) : installedAppCount > 0 ? (
-                <Button color="secondary" disabled title="App already installed">
-                  {t("installed")}
-                </Button>
+              ) : existingCredentials.length > 0 ? (
+                <DisconnectIntegration
+                  id={existingCredentials[0]}
+                  render={(btnProps) => (
+                    <Button {...btnProps} color="warn" data-testid={type + "-integration-disconnect-button"}>
+                      {t("disconnect")}
+                    </Button>
+                  )}
+                  onOpenChange={handleOpenChange}
+                />
              ) : (
                <InstallAppButton
                  type={type}
@@ -159,7 +151,7 @@ const Component = ({
                    );
                  }}
                />
-              )
+              ))
            ) : (
              <SkeletonButton width="24" height="10" />
            )}
@@ -1,19 +1,17 @@
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
 import classNames from "classnames";
-import { useRouter } from "next/router";
+import { NextRouter, useRouter } from "next/router";
 import { createRef, forwardRef, MutableRefObject, RefObject, useRef, useState } from "react";
 import { components, ControlProps } from "react-select";

 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import showToast from "@calcom/lib/notification";
-import { Dialog, DialogClose, DialogContent } from "@calcom/ui/Dialog";
 import { Icon } from "@calcom/ui/Icon";
 import { InputLeading, Label, TextArea, TextField } from "@calcom/ui/form/fields";
-import { Button, Switch } from "@calcom/ui/v2";
+import { Button, HorizontalTabs, showToast, Switch } from "@calcom/ui/v2";
+import { Dialog, DialogClose, DialogContent } from "@calcom/ui/v2/core/Dialog";

 import { EMBED_LIB_URL, WEBAPP_URL } from "@lib/config/constants";

-import NavTabs from "@components/NavTabs";
 import ColorPicker from "@components/ui/colorpicker";
 import Select from "@components/ui/form/Select";

@@ -38,7 +36,7 @@ type PreviewState = {
    brandColor: string;
  };
 };
-const queryParamsForDialog = ["embedType", "tabName", "embedUrl"];
+const queryParamsForDialog = ["embedType", "embedTabName", "embedUrl"];

 const getDimension = (dimension: string) => {
  if (dimension.match(/^\d+$/)) {
@@ -47,6 +45,23 @@ const getDimension = (dimension: string) => {
  return dimension;
 };

+const goto = (router: NextRouter, searchParams: Record<string, string>) => {
+  const newQuery = new URLSearchParams(router.asPath.split("?")[1]);
+  Object.keys(searchParams).forEach((key) => {
+    newQuery.set(key, searchParams[key]);
+  });
+  router.push(`${router.asPath.split("?")[0]}?${newQuery.toString()}`, undefined, {
+    shallow: true,
+  });
+};
+
+const removeQueryParams = (router: NextRouter, queryParams: string[]) => {
+  queryParams.forEach((param) => {
+    delete router.query[param];
+  });
+  router.push(`${router.asPath.split("?")[0]}?${router.query.toString()}`);
+};
+
 /**
 * It allows us to show code with certain reusable blocks indented according to the block variable placement
 * So, if you add a variable ${abc} with indentation of 4 spaces, it will automatically indent all newlines in `abc` with the same indent before constructing the final string
@@ -453,7 +468,7 @@ const embeds: {
 const tabs = [
  {
    name: "HTML",
-    tabName: "embed-code",
+    href: "embedTabName=embed-code",
    icon: Icon.FiCode,
    type: "code",
    Component: forwardRef<
@@ -504,7 +519,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "HTML", embedType, calLink, previ
  },
  {
    name: "React",
-    tabName: "embed-react",
+    href: "embedTabName=embed-react",
    icon: Icon.FiCode,
    type: "code",
    Component: forwardRef<
@@ -544,8 +559,8 @@ ${getEmbedTypeSpecificString({ embedFramework: "react", embedType, calLink, prev
  },
  {
    name: "Preview",
-    tabName: "embed-preview",
-    icon: Icon.FiEye,
+    href: "embedTabName=embed-preview",
+    icon: Icon.FiTrello,
    type: "iframe",
    Component: forwardRef<
      HTMLIFrameElement | HTMLTextAreaElement | null,
@@ -561,7 +576,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "react", embedType, calLink, prev
        <iframe
          ref={ref as typeof ref & MutableRefObject<HTMLIFrameElement>}
          data-testid="embed-preview"
-          className="border-1 h-[75vh] border"
+          className="border-1 h-[100vh] border"
          width="100%"
          height="100%"
          src={`${WEBAPP_URL}/embed/preview.html?embedType=${embedType}&calLink=${calLink}`}
@@ -591,7 +606,7 @@ const ChooseEmbedTypesDialogContent = () => {
  const { t } = useLocale();
  const router = useRouter();
  return (
-    <DialogContent size="lg">
+    <DialogContent type="creation" useOwnActionButtons size="lg">
      <div className="mb-4">
        <h3 className="text-lg font-bold leading-6 text-gray-900" id="modal-title">
          {t("how_you_want_add_cal_site")}
@@ -607,11 +622,8 @@ const ChooseEmbedTypesDialogContent = () => {
            key={index}
            data-testid={embed.type}
            onClick={() => {
-              router.push({
-                query: {
-                  ...router.query,
-                  embedType: embed.type,
-                },
+              goto(router, {
+                embedType: embed.type,
              });
            }}>
            <div className="order-none box-border flex-none rounded-sm border border-solid bg-white">
@@ -636,6 +648,13 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
  const { t } = useLocale();
  const router = useRouter();
  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const s = (href: string) => {
+    const searchParams = new URLSearchParams(router.asPath.split("?")[1] || "");
+    const [a, b] = href.split("=");
+    searchParams.set(a, b);
+    return `${router.asPath.split("?")[0]}?${searchParams.toString()}`;
+  };
+  const parsedTabs = tabs.map((t) => ({ ...t, href: s(t.href) }));
  const embedCodeRefs: Record<typeof tabs[0]["name"], RefObject<HTMLTextAreaElement>> = {};
  tabs
    .filter((tab) => tab.type === "code")
@@ -662,28 +681,13 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
  });

  const close = () => {
-    const noPopupQuery = {
-      ...router.query,
-    };
-
-    delete noPopupQuery.dialog;
-
-    queryParamsForDialog.forEach((queryParam) => {
-      delete noPopupQuery[queryParam];
-    });
-
-    router.push({
-      query: noPopupQuery,
-    });
+    removeQueryParams(router, ["dialog", ...queryParamsForDialog]);
  };

  // Use embed-code as default tab
-  if (!router.query.tabName) {
-    router.query.tabName = "embed-code";
-    router.push({
-      query: {
-        ...router.query,
-      },
+  if (!router.query.embedTabName) {
+    goto(router, {
+      embedTabName: "embed-code",
    });
  }

@@ -780,20 +784,13 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
  ];

  return (
-    <DialogContent size="xl">
+    <DialogContent size="xl" className="p-0.5" type="creation" useOwnActionButtons>
      <div className="flex">
-        <div className="flex w-1/3 flex-col bg-white p-6">
+        <div className="flex w-1/3 flex-col bg-gray-50 p-8">
          <h3 className="mb-2 flex text-xl font-bold leading-6 text-gray-900" id="modal-title">
            <button
              onClick={() => {
-                const newQuery = { ...router.query };
-                delete newQuery.embedType;
-                delete newQuery.tabName;
-                router.push({
-                  query: {
-                    ...newQuery,
-                  },
-                });
+                removeQueryParams(router, ["embedType", "embedTabName"]);
              }}>
              <Icon.FiArrowLeft className="mr-4 w-4" />
            </button>
@@ -871,9 +868,9 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                <div
                  className={classNames(
                    "mt-4 items-center justify-between",
-                    embedType === "floating-popup" ? "flex" : "hidden"
+                    embedType === "floating-popup" ? "" : "hidden"
                  )}>
-                  <div className="text-sm">Button Text</div>
+                  <div className="mb-2 text-sm">Button Text</div>
                  {/* Default Values should come from preview iframe */}
                  <TextField
                    name="buttonText"
@@ -895,10 +892,9 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                </div>
                <div
                  className={classNames(
-                    "mt-4 flex items-center justify-between",
-                    embedType === "floating-popup" ? "flex" : "hidden"
+                    "mt-4 flex items-center justify-start",
+                    embedType === "floating-popup" ? "space-x-2" : "hidden"
                  )}>
-                  <div className="text-sm">Display Calendar Icon Button</div>
                  <Switch
                    defaultChecked={true}
                    onCheckedChange={(checked) => {
@@ -913,13 +909,14 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                      });
                    }}
                  />
+                  <div className="text-sm">Display Calendar Icon Button</div>
                </div>
                <div
                  className={classNames(
-                    "mt-4 flex items-center justify-between",
-                    embedType === "floating-popup" ? "flex" : "hidden"
+                    "mt-4 items-center justify-between",
+                    embedType === "floating-popup" ? "" : "hidden"
                  )}>
-                  <div>Position of Button</div>
+                  <div className="mb-2">Position of Button</div>
                  <Select
                    onChange={(position) => {
                      setPreviewState((previewState) => {
@@ -936,13 +933,9 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                    options={FloatingPopupPositionOptions}
                  />
                </div>
-                <div
-                  className={classNames(
-                    "mt-4 flex items-center justify-between",
-                    embedType === "floating-popup" ? "flex" : "hidden"
-                  )}>
+                <div className={classNames("mt-4", embedType === "floating-popup" ? "" : "hidden")}>
                  <div>Button Color</div>
-                  <div className="w-36">
+                  <div className="w-full">
                    <ColorPicker
                      defaultValue="#000000"
                      onChange={(color) => {
@@ -959,13 +952,9 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                    />
                  </div>
                </div>
-                <div
-                  className={classNames(
-                    "mt-4 flex items-center justify-between",
-                    embedType === "floating-popup" ? "flex" : "hidden"
-                  )}>
+                <div className={classNames("mt-4", embedType === "floating-popup" ? "" : "hidden")}>
                  <div>Text Color</div>
-                  <div className="w-36">
+                  <div className="w-full">
                    <ColorPicker
                      defaultValue="#000000"
                      onChange={(color) => {
@@ -1000,10 +989,10 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
              </CollapsibleTrigger>
              <CollapsibleContent>
                <div className="mt-6 text-sm">
-                  <Label className="flex items-center justify-between">
-                    <div>Theme</div>
+                  <Label className="">
+                    <div className="mb-2">Theme</div>
                    <Select
-                      className="w-36"
+                      className="w-full"
                      defaultValue={ThemeOptions[0]}
                      components={{
                        Control: ThemeSelectControl,
@@ -1030,9 +1019,9 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                    // { name: "highlightColor", title: "Highlight Color" },
                    // { name: "medianColor", title: "Median Color" },
                  ].map((palette) => (
-                    <Label key={palette.name} className="flex items-center justify-between">
-                      <div>{palette.title}</div>
-                      <div className="w-36">
+                    <Label key={palette.name} className="pb-4">
+                      <div className="mb-2 pt-2">{palette.title}</div>
+                      <div className="w-full">
                        <ColorPicker
                          defaultValue="#000000"
                          onChange={(color) => {
@@ -1049,33 +1038,33 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
            </Collapsible>
          </div>
        </div>
-        <div className="w-2/3 bg-gray-50 p-6">
-          <NavTabs data-testid="embed-tabs" tabs={tabs} linkProps={{ shallow: true }} />
+        <div className="flex w-2/3 flex-col p-8">
+          <HorizontalTabs data-testid="embed-tabs" tabs={parsedTabs} linkProps={{ shallow: true }} />
          {tabs.map((tab) => {
            return (
              <div
-                key={tab.tabName}
-                className={classNames(router.query.tabName === tab.tabName ? "block" : "hidden")}>
-                <div>
-                  <div className={classNames(tab.type === "code" ? "h-[75vh]" : "")}>
-                    {tab.type === "code" ? (
-                      <tab.Component
-                        embedType={embedType}
-                        calLink={calLink}
-                        previewState={previewState}
-                        ref={refOfEmbedCodesRefs.current[tab.name]}
-                      />
-                    ) : (
-                      <tab.Component
-                        embedType={embedType}
-                        calLink={calLink}
-                        previewState={previewState}
-                        ref={iframeRef}
-                      />
-                    )}
-                  </div>
-                  <div className={router.query.tabName == "embed-preview" ? "block" : "hidden"} />
+                key={tab.href}
+                className={classNames(
+                  router.query.embedTabName === tab.href.split("=")[1] ? "flex flex-grow flex-col" : "hidden"
+                )}>
+                <div className="flex h-[55vh] flex-grow flex-col">
+                  {tab.type === "code" ? (
+                    <tab.Component
+                      embedType={embedType}
+                      calLink={calLink}
+                      previewState={previewState}
+                      ref={refOfEmbedCodesRefs.current[tab.name]}
+                    />
+                  ) : (
+                    <tab.Component
+                      embedType={embedType}
+                      calLink={calLink}
+                      previewState={previewState}
+                      ref={iframeRef}
+                    />
+                  )}
                </div>
+                <div className={router.query.embedTabName == "embed-preview" ? "block" : "hidden"} />
                <div className="mt-8 flex flex-row-reverse gap-x-2">
                  {tab.type === "code" ? (
                    <Button
@@ -1142,19 +1131,10 @@ export const EmbedButton = <T extends React.ElementType>({
  const router = useRouter();
  className = classNames(className, "hidden lg:inline-flex");
  const openEmbedModal = () => {
-    const query = {
-      ...router.query,
+    goto(router, {
      dialog: "embed",
      embedUrl,
-    };
-    router.push(
-      {
-        pathname: router.pathname,
-        query,
-      },
-      undefined,
-      { shallow: true }
-    );
+    });
  };
  const Component = as ?? Button;

@@ -1,8 +1,7 @@
+import dynamic from "next/dynamic";
 import { Dispatch, useState, useEffect } from "react";
 import { JSONObject } from "superjson/dist/types";

-import RainbowGate from "@calcom/app-store/rainbow/components/RainbowKit";
-
 export type Gate = undefined | "rainbow"; // Add more like ` | "geolocation" | "payment"`

 export type GateState = {
@@ -12,12 +11,14 @@ export type GateState = {
 type GateProps = {
  children: React.ReactNode;
  gates: Gate[];
-  metadata: JSONObject;
+  appData: JSONObject;
  dispatch: Dispatch<Partial<GateState>>;
 };

+const RainbowGate = dynamic(() => import("@calcom/app-store/rainbow/components/RainbowKit"));
+
 // To add a new Gate just add the gate logic to the switch statement
-const Gates: React.FC<GateProps> = ({ children, gates, metadata, dispatch }) => {
+const Gates: React.FC<GateProps> = ({ children, gates, appData, dispatch }) => {
  const [rainbowToken, setRainbowToken] = useState<string>();

  useEffect(() => {
@@ -30,12 +31,12 @@ const Gates: React.FC<GateProps> = ({ children, gates, metadata, dispatch }) =>
  for (const gate of gates) {
    switch (gate) {
      case "rainbow":
-        if (metadata.blockchainId && metadata.smartContractAddress && !rainbowToken) {
+        if (appData.blockchainId && appData.smartContractAddress && !rainbowToken) {
          gateWrappers = (
            <RainbowGate
              setToken={setRainbowToken}
-              chainId={metadata.blockchainId as number}
-              tokenAddress={metadata.smartContractAddress as string}>
+              chainId={appData.blockchainId as number}
+              tokenAddress={appData.smartContractAddress as string}>
              {gateWrappers}
            </RainbowGate>
          );
@@ -10,7 +10,9 @@ export function useViewerI18n() {
     * i18n should never be clubbed with other queries, so that it's caching can be managed independently.
     * We intend to not cache i18n query
     **/
-    context: { skipBatch: true },
+    trpc: {
+      context: { skipBatch: true },
+    },
  });
 }

@@ -32,11 +32,6 @@ export default function AppCard(props: AppCardProps) {
        </div>
        <div className="flex items-center">
          <h3 className="font-medium">{props.app.name}</h3>
-          {props.app.isProOnly && user?.plan === "FREE" ? (
-            <Badge className="ml-2" variant="default">
-              PRO
-            </Badge>
-          ) : null}
        </div>
        {/* TODO: add reviews <div className="flex text-sm text-gray-800">
          <span>{props.rating} stars</span> <StarIcon className="ml-1 mt-0.5 h-4 w-4 text-yellow-600" />
@@ -2,6 +2,7 @@ import React from "react";

 import { SkeletonText } from "@calcom/ui";

+/** @deprecated Use `apps/web/components/v2/availability/SkeletonLoader.tsx` */
 function SkeletonLoader() {
  return (
    <ul className="animate-pulse divide-y divide-neutral-200 rounded-md border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
@@ -16,7 +16,7 @@ type AvailableTimesProps = {
  eventTypeId: number;
  recurringCount: number | undefined;
  eventTypeSlug: string;
-  date: Dayjs;
+  date?: Dayjs;
  seatsPerTimeSlot?: number | null;
  slots?: Slot[];
  isLoading: boolean;
@@ -44,8 +44,10 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
    setBrand(getComputedStyle(document.documentElement).getPropertyValue("--brand-color").trim());
  }, []);

+  if (!date) return null;
+
  return (
-    <div className="dark:bg-darkgray-100 mt-8 flex flex-col px-4 text-center sm:mt-0 sm:w-1/3 sm:p-5 md:-mb-5">
+    <div className="dark:bg-darkgray-100 mt-8 flex h-full w-full flex-col px-4 text-center sm:mt-0 sm:p-5 md:-mb-5 md:min-w-[200px] lg:min-w-[300px]">
      <div className="mb-4 text-left text-base">
        <span className="text-bookingdarker dark:text-darkgray-800 mb-8 w-1/2 break-words font-semibold text-gray-900">
          {nameOfDay(i18n.language, Number(date.format("d")))}
@@ -55,7 +57,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
          {date.toDate().toLocaleString(i18n.language, { month: "long" })}
        </span>
      </div>
-      <div className="grid flex-grow grid-cols-1 gap-x-2 overflow-y-auto sm:block md:h-[364px]">
+      <div className="-mb-5 grid flex-grow grid-cols-1 gap-x-2 overflow-y-auto sm:block md:h-[364px]">
        {slots.length > 0 &&
          slots.map((slot) => {
            type BookingURL = {
@@ -150,4 +152,6 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
  );
 };

+AvailableTimes.displayName = "AvailableTimes";
+
 export default AvailableTimes;
@@ -0,0 +1,107 @@
+import { SchedulingType } from "@prisma/client";
+import { FC, ReactNode } from "react";
+
+import { classNames } from "@calcom/lib";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Icon } from "@calcom/ui/Icon";
+
+import { UserAvatars } from "@components/booking/UserAvatars";
+import EventTypeDescriptionSafeHTML from "@components/eventtype/EventTypeDescriptionSafeHTML";
+
+import type { AvailabilityPageProps } from "../../pages/[user]/[type]";
+import type { BookPageProps } from "../../pages/[user]/book";
+import type { DynamicAvailabilityPageProps } from "../../pages/d/[link]/[slug]";
+import type { HashLinkPageProps } from "../../pages/d/[link]/book";
+import type { AvailabilityTeamPageProps } from "../../pages/team/[slug]/[type]";
+import type { TeamBookingPageProps } from "../../pages/team/[slug]/book";
+import { AvailableEventLocations } from "./AvailableEventLocations";
+
+interface Props {
+  profile:
+    | AvailabilityPageProps["profile"]
+    | HashLinkPageProps["profile"]
+    | TeamBookingPageProps["profile"]
+    | BookPageProps["profile"]
+    | AvailabilityTeamPageProps["profile"]
+    | DynamicAvailabilityPageProps["profile"];
+  eventType:
+    | AvailabilityPageProps["eventType"]
+    | HashLinkPageProps["eventType"]
+    | TeamBookingPageProps["eventType"]
+    | BookPageProps["eventType"]
+    | AvailabilityTeamPageProps["eventType"]
+    | DynamicAvailabilityPageProps["eventType"];
+  isBookingPage?: boolean;
+  children: ReactNode;
+  isMobile?: boolean;
+  rescheduleUid?: string;
+}
+
+const BookingDescription: FC<Props> = (props) => {
+  const { profile, eventType, isBookingPage = false, children } = props;
+  const { t } = useLocale();
+  return (
+    <>
+      <UserAvatars
+        profile={profile}
+        users={eventType.users}
+        showMembers={eventType.schedulingType !== SchedulingType.ROUND_ROBIN}
+        size={10}
+        truncateAfter={3}
+      />
+      <h2 className="mt-2 break-words text-sm font-medium text-gray-600 dark:text-gray-300">
+        {profile.name}
+      </h2>
+      <h1 className="font-cal dark:text-darkgray-900 mb-6 break-words text-2xl font-semibold text-gray-900">
+        {eventType.title}
+      </h1>
+      <div className="dark:text-darkgray-600 flex flex-col space-y-3 text-sm font-medium text-gray-600">
+        {eventType?.description && (
+          <div
+            className={classNames(
+              "flex",
+              isBookingPage && "dark:text-darkgray-600 text-sm font-medium text-gray-600"
+            )}>
+            <div>
+              <Icon.FiInfo
+                className={classNames(
+                  "mr-[10px] ml-[2px] inline-block h-4 w-4",
+                  isBookingPage && "dark:text-darkgray-600 -mt-1 text-gray-500"
+                )}
+              />
+            </div>
+            <EventTypeDescriptionSafeHTML eventType={eventType} />
+          </div>
+        )}
+        {eventType?.requiresConfirmation && (
+          <div
+            className={classNames(
+              "flex items-center",
+              isBookingPage && "dark:text-darkgray-600 text-sm font-medium text-gray-600"
+            )}>
+            <div>
+              <Icon.FiCheckSquare className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 " />
+            </div>
+            {t("requires_confirmation")}
+          </div>
+        )}
+        {!isBookingPage && !props.rescheduleUid ? (
+          <AvailableEventLocations
+            locations={eventType.locations as AvailabilityPageProps["eventType"]["locations"]}
+          />
+        ) : null}
+        <p
+          className={classNames(
+            "text-sm font-medium",
+            isBookingPage && "dark:text-darkgray-600 text-gray-600"
+          )}>
+          <Icon.FiClock className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4" />
+          {eventType.length} {t("minutes")}
+        </p>
+        {children}
+      </div>
+    </>
+  );
+};
+
+export default BookingDescription;
@@ -17,8 +17,8 @@ import Badge from "@calcom/ui/v2/core/Badge";
 import Button from "@calcom/ui/v2/core/Button";

 import useMeQuery from "@lib/hooks/useMeQuery";
-import { extractRecurringDates } from "@lib/parseDate";

+// import { extractRecurringDates } from "@lib/parseDate";
 import { EditLocationDialog } from "@components/dialog/EditLocationDialog";
 import { RescheduleDialog } from "@components/dialog/RescheduleDialog";
 import TableActions, { ActionType } from "@components/ui/TableActions";
@@ -29,7 +29,7 @@ type BookingItem = inferQueryOutput<"viewer.bookings">["bookings"][number];

 type BookingItemProps = BookingItem & {
  listingStatus: BookingListingStatus;
-  recurringBookings?: BookingItem[];
+  recurringBookings: inferQueryOutput<"viewer.bookings">["recurringInfo"];
 };

 function BookingListItem(booking: BookingItemProps) {
@@ -44,10 +44,25 @@ function BookingListItem(booking: BookingItemProps) {
  const mutation = trpc.useMutation(["viewer.bookings.confirm"], {
    onSuccess: () => {
      setRejectionDialogIsOpen(false);
+      showToast(t("booking_confirmation_success"), "success");
+      utils.invalidateQueries("viewer.bookings");
+    },
+    onError: () => {
+      showToast(t("booking_confirmation_failed"), "error");
      utils.invalidateQueries("viewer.bookings");
    },
  });

+  const isUpcoming = new Date(booking.endTime) >= new Date();
+  const isPast = new Date(booking.endTime) < new Date();
+  const isCancelled = booking.status === BookingStatus.CANCELLED;
+  const isConfirmed = booking.status === BookingStatus.ACCEPTED;
+  const isRejected = booking.status === BookingStatus.REJECTED;
+  const isPending = booking.status === BookingStatus.PENDING;
+  const isRecurring = booking.recurringEventId !== null;
+  const isTabRecurring = booking.listingStatus === "recurring";
+  const isTabUnconfirmed = booking.listingStatus === "unconfirmed";
+
  const bookingConfirm = async (confirm: boolean) => {
    let body = {
      bookingId: booking.id,
@@ -56,27 +71,18 @@ function BookingListItem(booking: BookingItemProps) {
    };
    /**
     * Only pass down the recurring event id when we need to confirm the entire series, which happens in
-     * the "Recurring" tab, to support confirming discretionally in the "Recurring" tab.
+     * the "Recurring" tab and "Unconfirmed" tab, to support confirming discretionally in the "Recurring" tab.
     */
-    if (booking.listingStatus === "recurring" && booking.recurringEventId !== null) {
+    if ((isTabRecurring || isTabUnconfirmed) && isRecurring) {
      body = Object.assign({}, body, { recurringEventId: booking.recurringEventId });
    }
    mutation.mutate(body);
  };

-  const isUpcoming = new Date(booking.endTime) >= new Date();
-  const isCancelled = booking.status === BookingStatus.CANCELLED;
-  const isConfirmed = booking.status === BookingStatus.ACCEPTED;
-  const isRejected = booking.status === BookingStatus.REJECTED;
-  const isPending = booking.status === BookingStatus.PENDING;
-
  const pendingActions: ActionType[] = [
    {
      id: "reject",
-      label:
-        booking.listingStatus === "recurring" && booking.recurringEventId !== null
-          ? t("reject_all")
-          : t("reject"),
+      label: (isTabRecurring || isTabUnconfirmed) && isRecurring ? t("reject_all") : t("reject"),
      onClick: () => {
        setRejectionDialogIsOpen(true);
      },
@@ -85,10 +91,7 @@ function BookingListItem(booking: BookingItemProps) {
    },
    {
      id: "confirm",
-      label:
-        booking.listingStatus === "recurring" && booking.recurringEventId !== null
-          ? t("confirm_all")
-          : t("confirm"),
+      label: (isTabRecurring || isTabUnconfirmed) && isRecurring ? t("confirm_all") : t("confirm"),
      onClick: () => {
        bookingConfirm(true);
      },
@@ -101,23 +104,15 @@ function BookingListItem(booking: BookingItemProps) {
  let bookedActions: ActionType[] = [
    {
      id: "cancel",
-      label:
-        booking.listingStatus === "recurring" && booking.recurringEventId !== null
-          ? t("cancel_all_remaining")
-          : t("cancel"),
+      label: isTabRecurring && isRecurring ? t("cancel_all_remaining") : t("cancel"),
      /* When cancelling we need to let the UI and the API know if the intention is to
         cancel all remaining bookings or just that booking instance. */
-      href: `/cancel/${booking.uid}${
-        booking.listingStatus === "recurring" && booking.recurringEventId !== null
-          ? "?allRemainingBookings=true"
-          : ""
-      }`,
+      href: `/cancel/${booking.uid}${isTabRecurring && isRecurring ? "?allRemainingBookings=true" : ""}`,
      icon: Icon.FiX,
    },
    {
      id: "edit_booking",
-      label: t("edit_booking"),
-      icon: Icon.FiEdit,
+      label: t("edit"),
      actions: [
        {
          id: "reschedule",
@@ -146,7 +141,7 @@ function BookingListItem(booking: BookingItemProps) {
    },
  ];

-  if (booking.listingStatus === "recurring" && booking.recurringEventId !== null) {
+  if (isTabRecurring && isRecurring) {
    bookedActions = bookedActions.filter((action) => action.id !== "edit_booking");
  }

@@ -180,16 +175,13 @@ function BookingListItem(booking: BookingItemProps) {
  };

  // Calculate the booking date(s) and setup recurring event data to show
-  let recurringStrings: string[] = [];
-  let recurringDates: Date[] = [];
+  const recurringStrings: string[] = [];
+  const recurringDates: Date[] = [];

-  if (booking.recurringBookings && booking.eventType.recurringEvent?.freq !== undefined) {
-    [recurringStrings, recurringDates] = extractRecurringDates(
-      booking.recurringBookings,
-      user?.timeZone,
-      i18n
-    );
-  }
+  // @FIXME: This is importing the RRULE library which is already heavy. Find out a more optimal way do this.
+  // if (booking.recurringBookings !== undefined && booking.eventType.recurringEvent?.freq !== undefined) {
+  //   [recurringStrings, recurringDates] = extractRecurringDates(booking, user?.timeZone, i18n);
+  // }

  const location = booking.location || "";

@@ -201,7 +193,7 @@ function BookingListItem(booking: BookingItemProps) {
        // TODO: Booking when fetched should have id 0 already(for Dynamic Events).
        type: booking.eventType.id || 0,
        eventSlug: booking.eventType.slug,
-        user: user?.username || "",
+        username: user?.username || "",
        name: booking.attendees[0] ? booking.attendees[0].name : undefined,
        email: booking.attendees[0] ? booking.attendees[0].email : undefined,
        location: location,
@@ -214,6 +206,9 @@ function BookingListItem(booking: BookingItemProps) {
      },
    });
  };
+
+  const utcOffset = dayjs().tz(user?.timeZone).utcOffset();
+
  return (
    <>
      <RescheduleDialog
@@ -261,84 +256,107 @@ function BookingListItem(booking: BookingItemProps) {
        </DialogContent>
      </Dialog>

-      <tr className="flex hover:bg-neutral-50">
-        <td className="hidden align-top ltr:pl-6 rtl:pr-6 sm:table-cell sm:w-28" onClick={onClick}>
+      <tr className="flex flex-col hover:bg-neutral-50 sm:flex-row">
+        <td className="hidden align-top ltr:pl-6 rtl:pr-6 sm:table-cell sm:min-w-[10rem]" onClick={onClick}>
          <div className="cursor-pointer py-4">
            <div className="text-sm leading-6 text-gray-900">{startTime}</div>
            <div className="text-sm text-gray-500">
-              {dayjs(booking.startTime).format(user && user.timeFormat === 12 ? "h:mma" : "HH:mm")} -{" "}
-              {dayjs(booking.endTime).format(user && user.timeFormat === 12 ? "h:mma" : "HH:mm")}
+              {dayjs
+                .utc(booking.startTime)
+                .utcOffset(utcOffset)
+                .format(user && user.timeFormat === 12 ? "h:mma" : "HH:mm")}{" "}
+              -{" "}
+              {dayjs
+                .utc(booking.endTime)
+                .utcOffset(utcOffset)
+                .format(user && user.timeFormat === 12 ? "h:mma" : "HH:mm")}
            </div>
-            <div className="text-sm text-gray-400">
-              {booking.recurringBookings &&
-                booking.eventType?.recurringEvent?.freq &&
-                (booking.listingStatus === "recurring" || booking.listingStatus === "cancelled") && (
-                  <div className="underline decoration-gray-400 decoration-dashed underline-offset-2">
-                    <div className="flex">
-                      <Tooltip
-                        content={recurringStrings.map((aDate, key) => (
-                          <p key={key}>{aDate}</p>
-                        ))}>
-                        <div className="text-gray-600 dark:text-white">
-                          <Icon.FiRefreshCcw
-                            stroke-width="3"
-                            className="float-left mr-1 mt-1.5 inline-block h-3 w-3 text-gray-400"
-                          />
-                          <p className="mt-1 pl-5 text-xs">
-                            {booking.status === BookingStatus.ACCEPTED
-                              ? `${t("event_remaining", {
-                                  count: recurringDates.length,
-                                })}`
-                              : getEveryFreqFor({
-                                  t,
-                                  recurringEvent: booking.eventType.recurringEvent,
-                                  recurringCount: booking.recurringBookings.length,
-                                })}
-                          </p>
-                        </div>
-                      </Tooltip>
-                    </div>
-                  </div>
-                )}
-            </div>
-          </div>
-        </td>
-        <td className={"flex-1 px-4" + (isRejected ? " line-through" : "")} onClick={onClick}>
-          <div className="cursor-pointer py-4">
+
            {isPending && (
-              <Badge variant="orange" className="mb-2 ltr:mr-2 rtl:ml-2">
+              <Badge className="ltr:mr-2 rtl:ml-2" variant="orange">
                {t("unconfirmed")}
              </Badge>
            )}
+
+            {booking.eventType?.team && (
+              <Badge className="ltr:mr-2 rtl:ml-2" variant="gray">
+                {booking.eventType.team.name}
+              </Badge>
+            )}
            {!!booking?.eventType?.price && !booking.paid && (
-              <Badge variant="orange" className="mb-2 ltr:mr-2 rtl:ml-2">
+              <Badge className="ltr:mr-2 rtl:ml-2" variant="orange">
                {t("pending_payment")}
              </Badge>
            )}
-            <div className="text-sm font-medium text-gray-900">
-              {startTime}:{" "}
-              <small className="text-sm text-gray-500">
-                {dayjs(booking.startTime).format("HH:mm")} - {dayjs(booking.endTime).format("HH:mm")}
-              </small>
+
+            <div className="mt-2 text-sm text-gray-400">
+              <RecurringBookingsTooltip
+                booking={booking}
+                recurringStrings={recurringStrings}
+                recurringDates={recurringDates}
+              />
            </div>
+          </div>
+        </td>
+        <td className={"w-full px-4" + (isRejected ? " line-through" : "")} onClick={onClick}>
+          {/* Time and Badges for mobile */}
+          <div className="w-full pt-4 pb-2 sm:hidden">
+            <div className="flex w-full items-center justify-between sm:hidden">
+              <div className="text-sm leading-6 text-gray-900">{startTime}</div>
+              <div className="pr-2 text-sm text-gray-500">
+                {dayjs
+                  .utc(booking.startTime)
+                  .utcOffset(utcOffset)
+                  .format(user && user.timeFormat === 12 ? "h:mma" : "HH:mm")}{" "}
+                -{" "}
+                {dayjs
+                  .utc(booking.endTime)
+                  .utcOffset(utcOffset)
+                  .format(user && user.timeFormat === 12 ? "h:mma" : "HH:mm")}
+              </div>
+            </div>
+
+            {isPending && (
+              <Badge className="ltr:mr-2 rtl:ml-2 sm:hidden" variant="orange">
+                {t("unconfirmed")}
+              </Badge>
+            )}
+            {booking.eventType?.team && (
+              <Badge className="ltr:mr-2 rtl:ml-2 sm:hidden" variant="gray">
+                {booking.eventType.team.name}
+              </Badge>
+            )}
+            {!!booking?.eventType?.price && !booking.paid && (
+              <Badge className="ltr:mr-2 rtl:ml-2 sm:hidden" variant="orange">
+                {t("pending_payment")}
+              </Badge>
+            )}
+            <div className="text-sm text-gray-400 sm:hidden">
+              <RecurringBookingsTooltip
+                booking={booking}
+                recurringStrings={recurringStrings}
+                recurringDates={recurringDates}
+              />
+            </div>
+          </div>
+
+          <div className="cursor-pointer py-4">
            <div
              title={booking.title}
              className={classNames(
-                "max-w-56 truncate text-sm font-medium leading-6 text-neutral-900 md:max-w-max",
+                "max-w-10/12 sm:max-w-56 text-sm font-medium leading-6 text-neutral-900 md:max-w-full",
                isCancelled ? "line-through" : ""
              )}>
              {booking.title}
              <span> </span>
-              {booking.eventType?.team && <Badge variant="gray">{booking.eventType.team.name}</Badge>}

              {!!booking?.eventType?.price && !booking.paid && (
                <Tag className="hidden ltr:ml-2 rtl:mr-2 sm:inline-flex">Pending payment</Tag>
              )}
-              {isPending && <Tag className="hidden ltr:ml-2 rtl:mr-2 sm:inline-flex">{t("unconfirmed")}</Tag>}
            </div>
            {booking.description && (
              <div
-                className="max-w-52 md:max-w-96 truncate text-sm text-gray-500"
+                className="max-w-52 md:max-w-96 truncate text-sm text-gray-600"
                title={booking.description}>
                &quot;{booking.description}&quot;
              </div>
@@ -357,8 +375,7 @@ function BookingListItem(booking: BookingItemProps) {
            )}
          </div>
        </td>
-
-        <td className="whitespace-nowrap py-4 text-right text-sm font-medium ltr:pr-4 rtl:pl-4">
+        <td className="py-4 pl-4 text-right text-sm font-medium ltr:pr-4 rtl:pl-4 sm:pl-0">
          {isUpcoming && !isCancelled ? (
            <>
              {isPending && user?.id === booking.user?.id && <TableActions actions={pendingActions} />}
@@ -366,6 +383,7 @@ function BookingListItem(booking: BookingItemProps) {
              {isRejected && <div className="text-sm text-gray-500">{t("rejected")}</div>}
            </>
          ) : null}
+          {isPast && isPending && !isConfirmed ? <TableActions actions={bookedActions} /> : null}
          {isCancelled && booking.rescheduled && (
            <div className="hidden h-full items-center md:flex">
              <RequestSentMessage />
@@ -377,6 +395,61 @@ function BookingListItem(booking: BookingItemProps) {
  );
 }

+interface RecurringBookingsTooltipProps {
+  booking: BookingItemProps;
+  recurringStrings: string[];
+  recurringDates: Date[];
+}
+
+const RecurringBookingsTooltip = ({
+  booking,
+  recurringStrings,
+  recurringDates,
+}: RecurringBookingsTooltipProps) => {
+  const { t } = useLocale();
+  const now = new Date();
+
+  return (
+    (booking.recurringBookings &&
+      booking.eventType?.recurringEvent?.freq &&
+      (booking.listingStatus === "recurring" ||
+        booking.listingStatus === "unconfirmed" ||
+        booking.listingStatus === "cancelled") && (
+        <div className="underline decoration-gray-400 decoration-dashed underline-offset-2">
+          <div className="flex">
+            <Tooltip
+              content={recurringStrings.map((aDate, key) => (
+                <p key={key} className={classNames(recurringDates[key] < now && "line-through")}>
+                  {aDate}
+                </p>
+              ))}>
+              <div className="text-gray-600 dark:text-white">
+                <Icon.FiRefreshCcw
+                  strokeWidth="3"
+                  className="float-left mr-1 mt-1.5 inline-block h-3 w-3 text-gray-400"
+                />
+                <p className="mt-1 pl-5 text-xs">
+                  {booking.status === BookingStatus.ACCEPTED
+                    ? `${t("event_remaining", {
+                        count: recurringDates.length,
+                      })}`
+                    : getEveryFreqFor({
+                        t,
+                        recurringEvent: booking.eventType.recurringEvent,
+                        recurringCount: recurringDates.filter((date) => {
+                          return date >= now;
+                        }).length,
+                      })}
+                </p>
+              </div>
+            </Tooltip>
+          </div>
+        </div>
+      )) ||
+    null
+  );
+};
+
 interface UserProps {
  id: number;
  name: string | null;
@@ -2,6 +2,7 @@ import React from "react";

 import { SkeletonText } from "@calcom/ui";

+/** @deprecated Use `apps/web/components/v2/bookings/SkeletonLoader.tsx` */
 function SkeletonLoader() {
  return (
    <ul className="animate-pulse divide-y divide-neutral-200 rounded-md border border-gray-200 bg-white sm:overflow-hidden">
@@ -1,8 +1,8 @@
 import { FC, useEffect, useState } from "react";

 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import TimezoneSelect, { ITimezoneOption } from "@calcom/ui/form/TimezoneSelect";
 import { Switch } from "@calcom/ui/v2";
+import TimezoneSelect, { ITimezoneOption } from "@calcom/ui/v2/core/TimezoneSelect";

 import { is24h, timeZone } from "../../lib/clock";

@@ -10,9 +10,10 @@ type Props = {
  onSelectTimeZone: (selectedTimeZone: string) => void;
  onToggle24hClock: (is24hClock: boolean) => void;
  timeFormat: string;
+  hideTimeFormatToggle?: boolean;
 };

-const TimeOptions: FC<Props> = ({ onToggle24hClock, onSelectTimeZone, timeFormat }) => {
+const TimeOptions: FC<Props> = ({ onToggle24hClock, onSelectTimeZone, timeFormat, hideTimeFormatToggle }) => {
  const [selectedTimeZone, setSelectedTimeZone] = useState("");
  const [is24hClock, setIs24hClock] = useState(timeFormat === "HH:mm" && true);
  const { t } = useLocale();
@@ -27,26 +28,29 @@ const TimeOptions: FC<Props> = ({ onToggle24hClock, onSelectTimeZone, timeFormat
      onSelectTimeZone(timeZone(selectedTimeZone));
    }
  }, [selectedTimeZone, onSelectTimeZone]);
+
  const handle24hClockToggle = (is24hClock: boolean) => {
    setIs24hClock(is24hClock);
    onToggle24hClock(is24h(is24hClock));
  };

  return selectedTimeZone !== "" ? (
-    <div className="max-w-80 dark:border-darkgray-300 dark:bg-darkgray-200 absolute z-10 w-full rounded-sm border border-gray-200 bg-white px-4 pt-4 pb-3 shadow-sm">
+    <div className="dark:border-darkgray-300 dark:bg-darkgray-200 rounded-sm border border-gray-200 bg-white px-4 pt-4 pb-3 shadow-sm">
      <div className="mb-4 flex">
        <div className="text-sm font-medium text-gray-600 dark:text-white">{t("time_options")}</div>
-        <div className="ml-auto flex items-center">
-          <label className="ltl:mr-3 mr-2 align-text-top text-sm font-medium text-neutral-700 ltr:ml-3 rtl:mr-3 dark:text-white">
-            {t("am_pm")}
-          </label>
-          <Switch
-            name="24hClock"
-            label={t("24_h")}
-            defaultChecked={is24hClock}
-            onCheckedChange={handle24hClockToggle}
-          />
-        </div>
+        {!hideTimeFormatToggle && (
+          <div className="ml-auto flex items-center">
+            <label className="ltl:mr-3 mr-2 align-text-top text-sm font-medium text-neutral-700 ltr:ml-3 rtl:mr-3 dark:text-white">
+              {t("am_pm")}
+            </label>
+            <Switch
+              name="24hClock"
+              label={t("24_h")}
+              defaultChecked={is24hClock}
+              onCheckedChange={handle24hClockToggle}
+            />
+          </div>
+        )}
      </div>
      <TimezoneSelect
        id="timeZone"
@@ -1,14 +1,16 @@
 // Get router variables
+import autoAnimate from "@formkit/auto-animate";
 import { EventType } from "@prisma/client";
-import { SchedulingType } from "@prisma/client";
-import * as Collapsible from "@radix-ui/react-collapsible";
+import * as Popover from "@radix-ui/react-popover";
 import { TFunction } from "next-i18next";
 import { useRouter } from "next/router";
-import { useReducer, useEffect, useMemo, useState } from "react";
+import { useReducer, useEffect, useMemo, useState, useRef } from "react";
 import { Toaster } from "react-hot-toast";
 import { FormattedNumber, IntlProvider } from "react-intl";
 import { z } from "zod";

+import BookingPageTagManager from "@calcom/app-store/BookingPageTagManager";
+import { getEventTypeAppData } from "@calcom/app-store/utils";
 import dayjs, { Dayjs } from "@calcom/dayjs";
 import {
  useEmbedNonStylesConfig,
@@ -19,13 +21,13 @@ import {
 import CustomBranding from "@calcom/lib/CustomBranding";
 import classNames from "@calcom/lib/classNames";
 import { WEBSITE_URL } from "@calcom/lib/constants";
+import getStripeAppData from "@calcom/lib/getStripeAppData";
 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 } from "@calcom/lib/timeFormat";
-import { localStorage } from "@calcom/lib/webstorage";
+import { detectBrowserTimeFormat, getIs24hClockFromLocalStorage } from "@calcom/lib/timeFormat";
 import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui/Icon";
 import DatePicker from "@calcom/ui/v2/modules/booker/DatePicker";
@@ -37,16 +39,14 @@ import { isBrandingHidden } from "@lib/isBrandingHidden";

 import Gates, { Gate, GateState } from "@components/Gates";
 import AvailableTimes from "@components/booking/AvailableTimes";
+import BookingDescription from "@components/booking/BookingDescription";
 import TimeOptions from "@components/booking/TimeOptions";
-import { UserAvatars } from "@components/booking/UserAvatars";
-import EventTypeDescriptionSafeHTML from "@components/eventtype/EventTypeDescriptionSafeHTML";
 import { HeadSeo } from "@components/seo/head-seo";
 import PoweredByCal from "@components/ui/PoweredByCal";

 import type { AvailabilityPageProps } from "../../../pages/[user]/[type]";
 import type { DynamicAvailabilityPageProps } from "../../../pages/d/[link]/[slug]";
 import type { AvailabilityTeamPageProps } from "../../../pages/team/[slug]/[type]";
-import { AvailableEventLocations } from "../AvailableEventLocations";

 const GoBackToPreviousPage = ({ t }: { t: TFunction }) => {
  const router = useRouter();
@@ -79,7 +79,7 @@ const useSlots = ({
  usernameList: string[];
  timeZone?: string;
 }) => {
-  const { data, isLoading, isIdle } = trpc.useQuery(
+  const { data, isLoading, isPaused } = trpc.useQuery(
    [
      "viewer.public.slots.getSchedule",
      {
@@ -101,8 +101,8 @@ const useSlots = ({
    }
  }, [data]);

-  // The very first time isIdle is set if auto-fetch is disabled, so isIdle should also be considered a loading state.
-  return { slots: cachedSlots, isLoading: isLoading || isIdle };
+  // The very first time isPaused is set if auto-fetch is disabled, so isPaused should also be considered a loading state.
+  return { slots: cachedSlots, isLoading: isLoading || isPaused };
 };

 const SlotPicker = ({
@@ -129,6 +129,11 @@ const SlotPicker = ({
  const { date, setQuery: setDate } = useRouterQuery("date");
  const { month, setQuery: setMonth } = useRouterQuery("month");
  const router = useRouter();
+  const slotPickerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    slotPickerRef.current && autoAnimate(slotPickerRef.current);
+  }, [slotPickerRef]);

  useEffect(() => {
    if (!router.isReady) return;
@@ -169,17 +174,15 @@ const SlotPicker = ({
    timeZone,
  });

-  const slots = useMemo(() => ({ ..._1, ..._2 }), [_1, _2]);
+  const slots = useMemo(() => ({ ..._2, ..._1 }), [_1, _2]);

  return (
    <>
      <DatePicker
        isLoading={isLoading}
        className={classNames(
-          "mt-8 w-full px-4 sm:mt-0 sm:min-w-[455px] md:px-5",
-          selectedDate
-            ? "sm:dark:border-darkgray-200 border-gray-200 sm:w-1/2 sm:border-r sm:p-4 sm:pr-6 md:w-1/3 "
-            : "sm:p-4"
+          "mt-8 px-4 pb-4 sm:mt-0 md:min-w-[300px] md:px-5 lg:min-w-[455px]",
+          selectedDate ? "sm:dark:border-darkgray-200 border-gray-200 sm:border-r sm:p-4 sm:pr-6" : "sm:p-4"
        )}
        includedDates={Object.keys(slots).filter((k) => slots[k].length > 0)}
        locale={isLocaleReady ? i18n.language : "en"}
@@ -194,10 +197,10 @@ const SlotPicker = ({
        weekStart={weekStart}
      />

-      {selectedDate && (
+      <div ref={slotPickerRef}>
        <AvailableTimes
          isLoading={isLoading}
-          slots={slots[selectedDate.format("YYYY-MM-DD")]}
+          slots={selectedDate && slots[selectedDate.format("YYYY-MM-DD")]}
          date={selectedDate}
          timeFormat={timeFormat}
          eventTypeId={eventType.id}
@@ -206,7 +209,7 @@ const SlotPicker = ({
          recurringCount={recurringEventCount}
          ethSignature={ethSignature}
        />
-      )}
+      </div>
    </>
  );
 };
@@ -216,17 +219,18 @@ function TimezoneDropdown({
  onChangeTimeZone,
  timeZone,
  timeFormat,
+  hideTimeFormatToggle,
 }: {
  onChangeTimeFormat: (newTimeFormat: string) => void;
  onChangeTimeZone: (newTimeZone: string) => void;
  timeZone?: string;
  timeFormat: string;
+  hideTimeFormatToggle?: boolean;
 }) {
  const [isTimeOptionsOpen, setIsTimeOptionsOpen] = useState(false);

  useEffect(() => {
-    handleToggle24hClock(localStorage.getItem("timeOption.is24hClock") === "true");
-
+    handleToggle24hClock(!!getIs24hClockFromLocalStorage());
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

@@ -241,26 +245,32 @@ function TimezoneDropdown({
  };

  return (
-    <Collapsible.Root open={isTimeOptionsOpen} onOpenChange={setIsTimeOptionsOpen} className="flex">
-      <Collapsible.Trigger className="min-w-32 dark:text-darkgray-600 mb-2 -ml-2 px-2 text-left text-gray-600">
+    <Popover.Root open={isTimeOptionsOpen} onOpenChange={setIsTimeOptionsOpen}>
+      <Popover.Trigger className="min-w-32 dark:text-darkgray-600 radix-state-open:bg-gray-200 dark:radix-state-open:bg-darkgray-200 group relative mb-2 -ml-2 inline-block rounded-md px-2 py-2 text-left text-gray-600">
        <p className="text-sm font-medium">
          <Icon.FiGlobe className="mr-[10px] ml-[2px] -mt-[2px] inline-block h-4 w-4" />
          {timeZone}
          {isTimeOptionsOpen ? (
-            <Icon.FiChevronUp className="ml-1 inline-block h-4 w-4 " />
+            <Icon.FiChevronUp className="ml-1 inline-block h-4 w-4" />
          ) : (
-            <Icon.FiChevronDown className="ml-1 inline-block h-4 w-4 " />
+            <Icon.FiChevronDown className="ml-1 inline-block h-4 w-4" />
          )}
        </p>
-      </Collapsible.Trigger>
-      <Collapsible.Content>
-        <TimeOptions
-          onSelectTimeZone={handleSelectTimeZone}
-          onToggle24hClock={handleToggle24hClock}
-          timeFormat={timeFormat}
-        />
-      </Collapsible.Content>
-    </Collapsible.Root>
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content
+          hideWhenDetached
+          align="start"
+          className="animate-fade-in-up absolute left-0 top-2 w-80 max-w-[calc(100vw_-_1.5rem)]">
+          <TimeOptions
+            onSelectTimeZone={handleSelectTimeZone}
+            onToggle24hClock={handleToggle24hClock}
+            timeFormat={timeFormat}
+            hideTimeFormatToggle={hideTimeFormatToggle}
+          />
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
  );
 }

@@ -289,7 +299,14 @@ const useRouterQuery = <T extends string>(name: T) => {

 export type Props = AvailabilityTeamPageProps | AvailabilityPageProps | DynamicAvailabilityPageProps;

+const timeFormatTotimeFormatString = (timeFormat?: number | null) => {
+  if (!timeFormat) return null;
+  return timeFormat === 24 ? "HH:mm" : "h:mma";
+};
+
 const AvailabilityPage = ({ profile, eventType }: Props) => {
+  const { data: user } = trpc.useQuery(["viewer.me"]);
+  const timeFormatFromProfile = timeFormatTotimeFormatString(user?.timeFormat);
  const router = useRouter();
  const isEmbed = useIsEmbed();
  const query = dateQuerySchema.parse(router.query);
@@ -302,8 +319,8 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
  const isBackgroundTransparent = useIsBackgroundTransparent();

  const [timeZone, setTimeZone] = useState<string>();
-  const [timeFormat, setTimeFormat] = useState(detectBrowserTimeFormat);
-  const [isAvailableTimesVisible, setIsAvailableTimesVisible] = useState<boolean>();
+  const [timeFormat, setTimeFormat] = useState<string>("HH:mm");
+
  const [gateState, gateDispatcher] = useReducer(
    (state: GateState, newState: Partial<GateState>) => ({
      ...state,
@@ -314,11 +331,8 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {

  useEffect(() => {
    setTimeZone(localStorageTimeZone() || dayjs.tz.guess());
-  }, []);
-
-  useEffect(() => {
-    setIsAvailableTimesVisible(!!query.date);
-  }, [query.date]);
+    setTimeFormat(timeFormatFromProfile || detectBrowserTimeFormat);
+  }, [timeFormatFromProfile]);

  // TODO: Improve this;
  useExposePlanGlobally(eventType.users.length === 1 ? eventType.users[0].plan : "PRO");
@@ -338,14 +352,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {

  // get dynamic user list here
  const userList = eventType.users ? eventType.users.map((user) => user.username).filter(notEmpty) : [];
-  // Recurring event sidebar requires more space
-  const maxWidth = isAvailableTimesVisible
-    ? recurringEventCount
-      ? "max-w-6xl"
-      : "max-w-5xl"
-    : recurringEventCount
-    ? "max-w-4xl"
-    : "max-w-3xl";
+
  const timezoneDropdown = useMemo(
    () => (
      <TimezoneDropdown
@@ -353,10 +360,15 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
        onChangeTimeFormat={setTimeFormat}
        timeZone={timeZone}
        onChangeTimeZone={setTimeZone}
+        // Currently we don't allow the user to change the timeformat when they're logged in,
+        // the only way to change it is if they go to their profile.
+        hideTimeFormatToggle={!!timeFormatFromProfile}
      />
    ),
-    [timeZone, timeFormat]
+    [timeZone, timeFormat, timeFormatFromProfile]
  );
+  const stripeAppData = getStripeAppData(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.
  const slug = rawSlug.join("/");
@@ -364,13 +376,13 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
  // Define conditional gates here
  const gates = [
    // Rainbow gate is only added if the event has both a `blockchainId` and a `smartContractAddress`
-    eventType.metadata && eventType.metadata.blockchainId && eventType.metadata.smartContractAddress
+    rainbowAppData && rainbowAppData.blockchainId && rainbowAppData.smartContractAddress
      ? ("rainbow" as Gate)
      : undefined,
  ];

  return (
-    <Gates gates={gates} metadata={eventType.metadata} dispatch={gateDispatcher}>
+    <Gates gates={gates} appData={rainbowAppData} dispatch={gateDispatcher}>
      <HeadSeo
        title={`${rescheduleUid ? t("reschedule") : ""} ${eventType.title} | ${profile.name}`}
        description={`${rescheduleUid ? t("reschedule") : ""} ${eventType.title}`}
@@ -381,205 +393,80 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
          noindex: eventType.hidden,
        }}
      />
+      <BookingPageTagManager eventType={eventType} />
      <CustomBranding lightVal={profile.brandColor} darkVal={profile.darkBrandColor} />
      <div>
        <main
          className={classNames(
-            shouldAlignCentrally ? "mx-auto" : "",
-            isEmbed
-              ? classNames(maxWidth)
-              : classNames("transition-max-width mx-auto my-0 duration-500 ease-in-out md:my-24", maxWidth)
+            "flex-col md:mx-4 lg:flex",
+            shouldAlignCentrally ? "items-center" : "items-start",
+            !isEmbed && classNames("mx-auto my-0 ease-in-out md:my-24")
          )}>
-          <div
-            style={availabilityDatePickerEmbedStyles}
-            className={classNames(
-              isBackgroundTransparent ? "" : "dark:bg-darkgray-100 sm:dark:border-darkgray-300 bg-white",
-              "border-bookinglightest overflow-hidden rounded-md md:border",
-              isEmbed ? "mx-auto" : maxWidth
-            )}>
-            {/* mobile: details */}
-            <div className="block px-4 pt-4 sm:p-8 md:hidden">
-              <div>
-                <UserAvatars
-                  profile={profile}
-                  users={eventType.users}
-                  showMembers={eventType.schedulingType !== SchedulingType.ROUND_ROBIN}
-                  size={9}
-                  truncateAfter={5}
-                />
-                <div className="mt-4">
-                  <div className="dark:text-darkgray-900 mt-2 gap-2">
-                    <p className="break-words text-sm font-medium text-gray-600 dark:text-gray-300">
-                      {profile.name}
-                    </p>
-                    <h1 className="text-bookingdark dark:text-darkgray-900 mb-4 break-words text-xl font-semibold">
-                      {eventType.title}
-                    </h1>
-                    <div className="flex flex-col space-y-3">
-                      {eventType?.description && (
-                        <div className="dark:text-darkgray-600 flex py-1 text-sm font-medium text-gray-600">
-                          <div>
-                            <Icon.FiInfo className="mr-[10px] ml-[2px] inline-block h-4 w-4" />
-                          </div>
-                          <EventTypeDescriptionSafeHTML eventType={eventType} />
+          <div>
+            <div
+              style={availabilityDatePickerEmbedStyles}
+              className={classNames(
+                isBackgroundTransparent
+                  ? ""
+                  : "dark:bg-darkgray-100 sm:dark:border-darkgray-300 bg-white pb-4 md:pb-0",
+                "border-bookinglightest overflow-hidden md:rounded-md md:border",
+                isEmbed && "mx-auto"
+              )}>
+              <div className="overflow-hidden md:flex">
+                <div
+                  className={classNames(
+                    "sm:dark:border-darkgray-200 flex flex-col border-gray-200 p-5 sm:border-r",
+                    "min-w-full md:w-[280px] md:min-w-[280px]",
+                    recurringEventCount && "xl:w-[380px] xl:min-w-[380px]"
+                  )}>
+                  <BookingDescription profile={profile} eventType={eventType} rescheduleUid={rescheduleUid}>
+                    {!rescheduleUid && eventType.recurringEvent && (
+                      <div className="flex items-start text-sm font-medium">
+                        <Icon.FiRefreshCcw className="float-left mr-[10px] mt-[7px] ml-[2px] inline-block h-4 w-4 " />
+                        <div>
+                          <p className="mb-1 -ml-2 inline px-2 py-1">
+                            {getRecurringFreq({ t, recurringEvent: eventType.recurringEvent })}
+                          </p>
+                          <input
+                            type="number"
+                            min="1"
+                            max={eventType.recurringEvent.count}
+                            className="w-15 dark:bg-darkgray-200 h-7 rounded-sm border-gray-300 bg-white text-sm font-medium [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500"
+                            defaultValue={eventType.recurringEvent.count}
+                            onChange={(event) => {
+                              setRecurringEventCount(parseInt(event?.target.value));
+                            }}
+                          />
+                          <p className="inline">
+                            {t("occurrence", {
+                              count: recurringEventCount,
+                            })}
+                          </p>
                        </div>
-                      )}
-                      {eventType?.requiresConfirmation && (
-                        <p className="dark:text-darkgray-600 dark:text-darkgray-600 text-gray-600">
-                          <Icon.FiCheckSquare className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
-                          {t("requires_confirmation")}
-                        </p>
-                      )}
-                      <AvailableEventLocations locations={eventType.locations} />
-                      <p className="dark:text-darkgray-600 text-gray-600">
-                        <Icon.FiClock className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4" />
-                        {eventType.length} {t("minutes")}
+                      </div>
+                    )}
+                    {stripeAppData.price > 0 && (
+                      <p className="-ml-2 px-2 text-sm font-medium">
+                        <Icon.FiCreditCard className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
+                        <IntlProvider locale="en">
+                          <FormattedNumber
+                            value={stripeAppData.price / 100.0}
+                            style="currency"
+                            currency={stripeAppData.currency.toUpperCase()}
+                          />
+                        </IntlProvider>
                      </p>
-                      {eventType.price > 0 && (
-                        <div className="dark:text-darkgray-600 text-gray-600">
-                          <Icon.FiCreditCard className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
-                          <IntlProvider locale="en">
-                            <FormattedNumber
-                              value={eventType.price / 100.0}
-                              style="currency"
-                              currency={eventType.currency.toUpperCase()}
-                            />
-                          </IntlProvider>
-                        </div>
-                      )}
-                      {!rescheduleUid && eventType.recurringEvent && (
-                        <div className="dark:text-darkgray-600 flex items-center text-gray-600">
-                          <Icon.FiRefreshCcw className="float-left mr-[10px] mt-1 ml-[2px] inline-block h-4 w-4 shrink-0 text-gray-500" />
-                          <div>
-                            <p className="mb-1 -ml-2 inline px-2 py-1">
-                              {getRecurringFreq({ t, recurringEvent: eventType.recurringEvent })}
-                            </p>
-                            <input
-                              type="number"
-                              min="1"
-                              max={eventType.recurringEvent.count}
-                              className="w-15 dark:text-darkgray-600 h-7 rounded-sm border-gray-300 bg-white text-sm text-gray-600 [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-gray-600"
-                              defaultValue={eventType.recurringEvent.count}
-                              onChange={(event) => {
-                                setRecurringEventCount(parseInt(event?.target.value));
-                              }}
-                            />
-                            <p className="dark:text-darkgray-600 inline text-gray-600 ">
-                              {t("occurrence", {
-                                count: recurringEventCount,
-                              })}
-                            </p>
-                          </div>
-                        </div>
-                      )}
-                      {timezoneDropdown}
+                    )}
+                    {timezoneDropdown}
+                  </BookingDescription>

-                      <div className="md:hidden">
-                        {/* Temp disabled booking?.startTime && rescheduleUid && (
-                            <div>
-                              <p
-                                className="mt-8 text-gray-600 dark:text-darkgray-600"
-                                data-testid="former_time_p_mobile">
-                                {t("former_time")}
-                              </p>
-                              <p className="text-gray-500 line-through dark:text-darkgray-600">
-                                <CalendarIcon className="mr-[10px] -mt-1 inline-block h-4 w-4 text-gray-500" />
-                                {typeof booking.startTime === "string" &&
-                                  parseDate(dayjs(booking.startTime), i18n)}
-                              </p>
-                            </div>
-                          )*/}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div className="overflow-hidden sm:flex">
-              <div
-                className={
-                  "sm:dark:border-darkgray-200 hidden overflow-hidden border-gray-200 p-5 sm:border-r md:flex md:flex-col " +
-                  (isAvailableTimesVisible ? "sm:w-1/3" : recurringEventCount ? "sm:w-2/3" : "sm:w-1/2")
-                }>
-                <UserAvatars
-                  profile={profile}
-                  users={eventType.users}
-                  showMembers={eventType.schedulingType !== SchedulingType.ROUND_ROBIN}
-                  size={10}
-                  truncateAfter={3}
-                />
-                <h2 className="break-words text-sm font-medium text-gray-600 dark:text-gray-300 lg:mt-2">
-                  {profile.name}
-                </h2>
-                <h1 className="font-cal dark:text-darkgray-900 mb-6 break-words text-2xl text-gray-900 ">
-                  {eventType.title}
-                </h1>
-                <div className="dark:text-darkgray-600 flex flex-col space-y-3 text-sm font-medium text-gray-600">
-                  {eventType?.description && (
-                    <div className="flex ">
-                      <div>
-                        <Icon.FiInfo className="mr-[10px] ml-[2px] inline-block h-4 w-4" />
-                      </div>
-                      <EventTypeDescriptionSafeHTML eventType={eventType} />
+                  {!isEmbed && (
+                    <div className="mt-auto hidden md:block">
+                      <GoBackToPreviousPage t={t} />
                    </div>
                  )}
-                  {eventType?.requiresConfirmation && (
-                    <div className="flex items-center">
-                      <div>
-                        <Icon.FiCheckSquare className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 " />
-                      </div>
-                      {t("requires_confirmation")}
-                    </div>
-                  )}
-                  <AvailableEventLocations locations={eventType.locations} />
-                  <p className="text-sm font-medium">
-                    <Icon.FiClock className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4" />
-                    {eventType.length} {t("minutes")}
-                  </p>
-                  {!rescheduleUid && eventType.recurringEvent && (
-                    <div className="flex items-start text-sm font-medium">
-                      <Icon.FiRefreshCcw className="float-left mr-[10px] mt-[7px] ml-[2px] inline-block h-4 w-4 " />
-                      <div>
-                        <p className="mb-1 -ml-2 inline px-2 py-1">
-                          {getRecurringFreq({ t, recurringEvent: eventType.recurringEvent })}
-                        </p>
-                        <input
-                          type="number"
-                          min="1"
-                          max={eventType.recurringEvent.count}
-                          className="w-15 dark:bg-darkgray-200 h-7 rounded-sm border-gray-300 bg-white text-sm font-medium [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500"
-                          defaultValue={eventType.recurringEvent.count}
-                          onChange={(event) => {
-                            setRecurringEventCount(parseInt(event?.target.value));
-                          }}
-                        />
-                        <p className="inline">
-                          {t("occurrence", {
-                            count: recurringEventCount,
-                          })}
-                        </p>
-                      </div>
-                    </div>
-                  )}
-                  {eventType.price > 0 && (
-                    <p className="-ml-2 px-2 text-sm font-medium ">
-                      <Icon.FiCreditCard className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
-                      <IntlProvider locale="en">
-                        <FormattedNumber
-                          value={eventType.price / 100.0}
-                          style="currency"
-                          currency={eventType.currency.toUpperCase()}
-                        />
-                      </IntlProvider>
-                    </p>
-                  )}
-                  {timezoneDropdown}
-                </div>

-                {!isEmbed && <GoBackToPreviousPage t={t} />}
-
-                {/* Temporarily disabled - booking?.startTime && rescheduleUid && (
+                  {/* Temporarily disabled - booking?.startTime && rescheduleUid && (
                    <div>
                      <p
                        className="mt-4 mb-3 text-gray-600 dark:text-darkgray-600"
@@ -592,26 +479,33 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                      </p>
                    </div>
                  )*/}
+                </div>
+                <SlotPicker
+                  weekStart={
+                    typeof profile.weekStart === "string"
+                      ? ([
+                          "Sunday",
+                          "Monday",
+                          "Tuesday",
+                          "Wednesday",
+                          "Thursday",
+                          "Friday",
+                          "Saturday",
+                        ].indexOf(profile.weekStart) as 0 | 1 | 2 | 3 | 4 | 5 | 6)
+                      : profile.weekStart /* Allows providing weekStart as number */
+                  }
+                  eventType={eventType}
+                  timeFormat={timeFormat}
+                  timeZone={timeZone}
+                  users={userList}
+                  seatsPerTimeSlot={eventType.seatsPerTimeSlot || undefined}
+                  recurringEventCount={recurringEventCount}
+                  ethSignature={gateState.rainbowToken}
+                />
              </div>
-              <SlotPicker
-                weekStart={
-                  typeof profile.weekStart === "string"
-                    ? (["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"].indexOf(
-                        profile.weekStart
-                      ) as 0 | 1 | 2 | 3 | 4 | 5 | 6)
-                    : profile.weekStart /* Allows providing weekStart as number */
-                }
-                eventType={eventType}
-                timeFormat={timeFormat}
-                timeZone={timeZone}
-                users={userList}
-                seatsPerTimeSlot={eventType.seatsPerTimeSlot || undefined}
-                recurringEventCount={recurringEventCount}
-                ethSignature={gateState.rainbowToken}
-              />
            </div>
+            {(!eventType.users[0] || !isBrandingHidden(eventType.users[0])) && !isEmbed && <PoweredByCal />}
          </div>
-          {(!eventType.users[0] || !isBrandingHidden(eventType.users[0])) && !isEmbed && <PoweredByCal />}
        </main>
      </div>
      <Toaster position="bottom-right" />
@@ -1,6 +1,7 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { EventTypeCustomInputType, WorkflowActions } from "@prisma/client";
 import { SchedulingType } from "@prisma/client";
+import { useMutation } from "@tanstack/react-query";
 import { isValidPhoneNumber } from "libphonenumber-js";
 import { useSession } from "next-auth/react";
 import Head from "next/head";
@@ -9,17 +10,19 @@ import { useEffect, useMemo, useState, useReducer } from "react";
 import { Controller, useForm, useWatch } from "react-hook-form";
 import { FormattedNumber, IntlProvider } from "react-intl";
 import { ReactMultiEmail } from "react-multi-email";
-import { useMutation } from "react-query";
 import { v4 as uuidv4 } from "uuid";
 import { z } from "zod";

+import BookingPageTagManager from "@calcom/app-store/BookingPageTagManager";
 import {
  locationKeyToString,
  getEventLocationValue,
  getEventLocationType,
  EventLocationType,
+  getHumanReadableLocationValue,
 } from "@calcom/app-store/locations";
 import { createPaymentLink } from "@calcom/app-store/stripepayment/lib/client";
+import { getEventTypeAppData } from "@calcom/app-store/utils";
 import { LocationObject, LocationType } from "@calcom/core/location";
 import dayjs from "@calcom/dayjs";
 import {
@@ -29,16 +32,17 @@ import {
 } from "@calcom/embed-core/embed-iframe";
 import CustomBranding from "@calcom/lib/CustomBranding";
 import classNames from "@calcom/lib/classNames";
+import getStripeAppData from "@calcom/lib/getStripeAppData";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import { HttpError } from "@calcom/lib/http-error";
 import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
-import { Button } from "@calcom/ui/Button";
 import { Icon } from "@calcom/ui/Icon";
 import { Tooltip } from "@calcom/ui/Tooltip";
 import PhoneInput from "@calcom/ui/form/PhoneInputLazy";
 import { EmailInput, Form } from "@calcom/ui/form/fields";
+import { Button } from "@calcom/ui/v2";

 import { asStringOrNull } from "@lib/asStringOrNull";
 import { timeZone } from "@lib/clock";
@@ -49,8 +53,7 @@ import { parseDate, parseRecurringDates } from "@lib/parseDate";
 import slugify from "@lib/slugify";

 import Gates, { Gate, GateState } from "@components/Gates";
-import { UserAvatars } from "@components/booking/UserAvatars";
-import EventTypeDescriptionSafeHTML from "@components/eventtype/EventTypeDescriptionSafeHTML";
+import BookingDescription from "@components/booking/BookingDescription";

 import { BookPageProps } from "../../../pages/[user]/book";
 import { HashLinkPageProps } from "../../../pages/d/[link]/book";
@@ -97,6 +100,7 @@ const BookingPage = ({
    }),
    {}
  );
+  const stripeAppData = getStripeAppData(eventType);

  useEffect(() => {
    if (top !== window) {
@@ -130,7 +134,7 @@ const BookingPage = ({
          date,
          type: eventType.id,
          eventSlug: eventType.slug,
-          user: profile.slug,
+          username: profile.slug,
          reschedule: !!rescheduleUid,
          name: attendees[0].name,
          email: attendees[0].email,
@@ -163,7 +167,7 @@ const BookingPage = ({
          type: eventType.id,
          eventSlug: eventType.slug,
          recur: recurringEventId,
-          user: profile.slug,
+          username: profile.slug,
          reschedule: !!rescheduleUid,
          name: attendees[0].name,
          email: attendees[0].email,
@@ -199,16 +203,12 @@ const BookingPage = ({

  // There should only exists one default userData variable for primaryAttendee.
  const defaultUserValues = {
-    email: booking?.attendees[0].email
-      ? booking.attendees[0].email
+    email: rescheduleUid
+      ? booking?.attendees[0].email
      : router.query.email
      ? (router.query.email as string)
      : "",
-    name: booking?.attendees[0].name
-      ? booking.attendees[0].name
-      : router.query.name
-      ? (router.query.name as string)
-      : "",
+    name: rescheduleUid ? booking?.attendees[0].name : router.query.name ? (router.query.name as string) : "",
  };

  const defaultValues = () => {
@@ -413,17 +413,18 @@ const BookingPage = ({
      }
    });
  }
+  const rainbowAppData = getEventTypeAppData(eventType, "rainbow") || {};

  // Define conditional gates here
  const gates = [
    // Rainbow gate is only added if the event has both a `blockchainId` and a `smartContractAddress`
-    eventType.metadata && eventType.metadata.blockchainId && eventType.metadata.smartContractAddress
+    rainbowAppData && rainbowAppData.blockchainId && rainbowAppData.smartContractAddress
      ? ("rainbow" as Gate)
      : undefined,
  ];

  return (
-    <Gates gates={gates} metadata={eventType.metadata} dispatch={gateDispatcher}>
+    <Gates gates={gates} appData={rainbowAppData} dispatch={gateDispatcher}>
      <Head>
        <title>
          {rescheduleUid
@@ -439,6 +440,7 @@ const BookingPage = ({
        </title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
+      <BookingPageTagManager eventType={eventType} />
      <CustomBranding lightVal={profile.brandColor} darkVal={profile.darkBrandColor} />
      <main
        className={classNames(
@@ -449,54 +451,20 @@ const BookingPage = ({
        <div
          className={classNames(
            "main overflow-hidden",
-            isEmbed ? "" : "border border-gray-200",
            isBackgroundTransparent ? "" : "dark:border-1 dark:bg-darkgray-100 bg-white",
            "dark:border-darkgray-300 rounded-md sm:border"
          )}>
          <div className="sm:flex">
            <div className="sm:dark:border-darkgray-300 dark:text-darkgray-600 flex flex-col px-6 pt-6 pb-0 text-gray-600 sm:w-1/2 sm:border-r sm:pb-6">
-              <UserAvatars
-                profile={profile}
-                users={eventType.users}
-                showMembers={eventType.schedulingType !== SchedulingType.ROUND_ROBIN}
-                size={10}
-                truncateAfter={3}
-              />
-              <h2 className="mt-2 break-words text-sm font-medium text-gray-500 dark:text-gray-300">
-                {profile.name}
-              </h2>
-              <h1 className="font-cal dark:text-darkgray-900 break-words text-2xl text-gray-900 ">
-                {eventType.title}
-              </h1>
-              <div className="mt-4 flex flex-col space-y-3 lg:mt-9">
-                {eventType?.description && (
-                  <div className="dark:text-darkgray-600 flex text-sm font-medium text-gray-600">
-                    <div>
-                      <Icon.FiInfo className="dark:text-darkgray-600 mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-500" />
-                    </div>
-                    <EventTypeDescriptionSafeHTML eventType={eventType} />
-                  </div>
-                )}
-                {eventType?.requiresConfirmation && (
-                  <div className="dark:text-darkgray-600 flex items-center text-sm font-medium text-gray-600">
-                    <div>
-                      <Icon.FiCheckSquare className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 " />
-                    </div>
-                    {t("requires_confirmation")}
-                  </div>
-                )}
-                <p className="dark:text-darkgray-600 text-sm font-medium text-gray-600">
-                  <Icon.FiClock className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4" />
-                  {eventType.length} {t("minutes")}
-                </p>
-                {eventType.price > 0 && (
+              <BookingDescription isBookingPage profile={profile} eventType={eventType}>
+                {stripeAppData.price > 0 && (
                  <p className="text-bookinglight -ml-2 px-2 text-sm ">
                    <Icon.FiCreditCard className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
                    <IntlProvider locale="en">
                      <FormattedNumber
-                        value={eventType.price / 100.0}
+                        value={stripeAppData.price / 100.0}
                        style="currency"
-                        currency={eventType.currency.toUpperCase()}
+                        currency={stripeAppData.currency.toUpperCase()}
                      />
                    </IntlProvider>
                  </p>
@@ -564,7 +532,7 @@ const BookingPage = ({
                    </p>
                  </div>
                )}
-              </div>
+              </BookingDescription>
            </div>
            <div className="p-6 sm:w-1/2">
              <Form form={bookingForm} handleSubmit={bookEvent}>
@@ -595,9 +563,7 @@ const BookingPage = ({
                      required
                      className={classNames(
                        inputClassName,
-                        bookingForm.formState.errors.email
-                          ? "border-red-700 focus:ring-red-700"
-                          : " border-gray-300  dark:border-gray-900"
+                        bookingForm.formState.errors.email && "!focus:ring-red-700 !border-red-700"
                      )}
                      placeholder="you@example.com"
                      type="search" // Disables annoying 1password intrusive popup (non-optimal, I know I know...)
@@ -611,37 +577,48 @@ const BookingPage = ({
                    )}
                  </div>
                </div>
-                {locations.length > 1 && (
-                  <div className="mb-4">
+                <div className="mb-4">
+                  <>
                    <span className="block text-sm font-medium text-gray-700 dark:text-white">
                      {t("location")}
                    </span>
-                    {locations.map((location, i) => {
-                      const locationString = locationKeyToString(location);
-                      // TODO: Right now selectedLocationType isn't send by getSSP. Once that's available defaultChecked should work and show the location in the original booking
-                      const defaultChecked = rescheduleUid ? selectedLocationType === location.type : i === 0;
-                      if (typeof locationString !== "string") {
-                        // It's possible that location app got uninstalled
-                        return null;
-                      }
-                      return (
-                        <label key={i} className="block">
-                          <input
-                            type="radio"
-                            disabled={!!disableLocations}
-                            className="location dark:bg-darkgray-300 dark:border-darkgray-300 h-4 w-4 border-gray-300 text-black focus:ring-black ltr:mr-2 rtl:ml-2"
-                            {...bookingForm.register("locationType", { required: true })}
-                            value={location.type}
-                            defaultChecked={defaultChecked}
-                          />
-                          <span className="text-sm ltr:ml-2 rtl:mr-2 dark:text-white">
-                            {locationKeyToString(location)}
-                          </span>
-                        </label>
-                      );
-                    })}
-                  </div>
-                )}
+                    {rescheduleUid ? (
+                      <p className="mt-1 text-sm text-gray-500">
+                        {getHumanReadableLocationValue(booking?.location, t)}
+                      </p>
+                    ) : (
+                      locations.length > 1 && (
+                        <>
+                          {locations.map((location, i) => {
+                            const locationString = locationKeyToString(location);
+                            if (!selectedLocationType) {
+                              bookingForm.setValue("locationType", locations[0].type);
+                            }
+                            if (typeof locationString !== "string") {
+                              // It's possible that location app got uninstalled
+                              return null;
+                            }
+                            return (
+                              <label key={i} className="block">
+                                <input
+                                  type="radio"
+                                  disabled={!!disableLocations}
+                                  className="location dark:bg-darkgray-300 dark:border-darkgray-300 h-4 w-4 border-gray-300 text-black focus:ring-black ltr:mr-2 rtl:ml-2"
+                                  {...bookingForm.register("locationType", { required: true })}
+                                  value={location.type}
+                                  defaultChecked={i === 0}
+                                />
+                                <span className="text-sm ltr:ml-2 rtl:mr-2 dark:text-white">
+                                  {locationKeyToString(location)}
+                                </span>
+                              </label>
+                            );
+                          })}
+                        </>
+                      )
+                    )}
+                  </>
+                </div>
                {/* TODO: Change name and id ="phone" to something generic */}
                {AttendeeInput && (
                  <div className="mb-4">
@@ -719,90 +696,81 @@ const BookingPage = ({
                        />
                      )}
                      {input.type === EventTypeCustomInputType.BOOL && (
-                        <div className="flex h-5 items-center">
-                          <input
-                            type="checkbox"
-                            {...bookingForm.register(`customInputs.${input.id}`, {
-                              required: input.required,
-                            })}
-                            required={input.required}
-                            id={"custom_" + input.id}
-                            className="h-4 w-4 rounded border-gray-300 text-black focus:ring-black disabled:bg-gray-200 ltr:mr-2 rtl:ml-2 disabled:dark:text-gray-500"
-                            placeholder=""
-                            disabled={disabledExceptForOwner}
-                          />
-                          <label
-                            htmlFor={"custom_" + input.id}
-                            className="mb-1 block text-sm font-medium text-gray-700 dark:text-white">
-                            {input.label}
-                          </label>
+                        <div className="my-6">
+                          <div className="flex">
+                            <input
+                              type="checkbox"
+                              {...bookingForm.register(`customInputs.${input.id}`, {
+                                required: input.required,
+                              })}
+                              required={input.required}
+                              id={"custom_" + input.id}
+                              className="h-4 w-4 rounded border-gray-300 text-black focus:ring-black disabled:bg-gray-200 ltr:mr-2 rtl:ml-2 disabled:dark:text-gray-500"
+                              placeholder=""
+                              disabled={disabledExceptForOwner}
+                            />
+                            <label
+                              htmlFor={"custom_" + input.id}
+                              className="-mt-px block text-sm font-medium text-gray-700 dark:text-white">
+                              {input.label}
+                            </label>
+                          </div>
                        </div>
                      )}
                    </div>
                  ))}
-                {!eventType.disableGuests && (
+                {!eventType.disableGuests && guestToggle && (
                  <div className="mb-4">
-                    {!guestToggle && (
+                    <div>
                      <label
-                        onClick={() => setGuestToggle(!guestToggle)}
                        htmlFor="guests"
-                        className="mb-1 block text-sm font-medium hover:cursor-pointer dark:text-white">
-                        {/*<UserAddIcon className="inline-block w-5 h-5 mr-1 -mt-1" />*/}
-                        {t("additional_guests")}
+                        className="mb-1 block text-sm font-medium text-gray-700 dark:text-white">
+                        {t("guests")}
                      </label>
-                    )}
-                    {guestToggle && (
-                      <div>
-                        <label
-                          htmlFor="guests"
-                          className="mb-1 block text-sm font-medium text-gray-700 dark:text-white">
-                          {t("guests")}
-                        </label>
-                        {!disableInput && (
-                          <Controller
-                            control={bookingForm.control}
-                            name="guests"
-                            render={({ field: { onChange, value } }) => (
-                              <ReactMultiEmail
-                                className="relative"
-                                placeholder="guest@example.com"
-                                emails={value}
-                                onChange={onChange}
-                                getLabel={(
-                                  email: string,
-                                  index: number,
-                                  removeEmail: (index: number) => void
-                                ) => {
-                                  return (
-                                    <div data-tag key={index} className="cursor-pointer">
-                                      {email}
-                                      {!disableInput && (
-                                        <span data-tag-handle onClick={() => removeEmail(index)}>
-                                          ×
-                                        </span>
-                                      )}
-                                    </div>
-                                  );
-                                }}
-                              />
-                            )}
-                          />
-                        )}
-                        {/* Custom code when guest emails should not be editable */}
-                        {disableInput && guestListEmails && guestListEmails.length > 0 && (
-                          <div data-tag className="react-multi-email">
-                            {/* // @TODO: user owners are appearing as guest here when should be only user input */}
-                            {guestListEmails.map((email, index) => {
-                              return (
-                                <div key={index} className="cursor-pointer">
-                                  <span data-tag>{email}</span>
-                                </div>
-                              );
-                            })}
-                          </div>
-                        )}
-                      </div>
-                    )}
+                      {!disableInput && (
+                        <Controller
+                          control={bookingForm.control}
+                          name="guests"
+                          render={({ field: { onChange, value } }) => (
+                            <ReactMultiEmail
+                              className="relative"
+                              placeholder={<span className="dark:text-darkgray-600">guest@example.com</span>}
+                              emails={value}
+                              onChange={onChange}
+                              getLabel={(
+                                email: string,
+                                index: number,
+                                removeEmail: (index: number) => void
+                              ) => {
+                                return (
+                                  <div data-tag key={index} className="cursor-pointer">
+                                    {email}
+                                    {!disableInput && (
+                                      <span data-tag-handle onClick={() => removeEmail(index)}>
+                                        ×
+                                      </span>
+                                    )}
+                                  </div>
+                                );
+                              }}
+                            />
+                          )}
+                        />
+                      )}
+                      {/* Custom code when guest emails should not be editable */}
+                      {disableInput && guestListEmails && guestListEmails.length > 0 && (
+                        <div data-tag className="react-multi-email">
+                          {/* // @TODO: user owners are appearing as guest here when should be only user input */}
+                          {guestListEmails.map((email, index) => {
+                            return (
+                              <div key={index} className="cursor-pointer">
+                                <span data-tag>{email}</span>
+                              </div>
+                            );
+                          })}
+                        </div>
+                      )}
+                    </div>
                  </div>
                )}
                {isSmsReminderNumberNeeded && selectedLocationType !== LocationType.Phone && (
@@ -847,6 +815,7 @@ const BookingPage = ({
                  ) : (
                    <textarea
                      {...bookingForm.register("notes")}
+                      required={!!eventType.metadata.additionalNotesRequired}
                      id="notes"
                      name="notes"
                      rows={3}
@@ -858,17 +827,28 @@ const BookingPage = ({
                </div>

                <div className="flex justify-end space-x-2 rtl:space-x-reverse">
+                  {!eventType.disableGuests && !guestToggle && (
+                    <Button
+                      type="button"
+                      color="minimalSecondary"
+                      size="icon"
+                      tooltip={t("additional_guests")}
+                      StartIcon={Icon.FiUserPlus}
+                      onClick={() => setGuestToggle(!guestToggle)}
+                      className="mr-auto"
+                    />
+                  )}
                  <Button
-                    color="secondary"
+                    color="minimal"
                    type="button"
                    onClick={() => router.back()}
                    // We override this for this component only for now - as we don't support darkmode everywhere in the app
-                    className="dark:border-none">
+                    className="dark:hover:bg-darkgray-200 dark:border-none dark:text-white">
                    {t("cancel")}
                  </Button>
                  <Button
                    type="submit"
-                    className="dark:bg-darkmodebrand dark:text-darkmodebrandcontrast rounded-md"
+                    className="dark:bg-darkmodebrand dark:text-darkmodebrandcontrast dark:hover:border-darkmodebrandcontrast mr-auto dark:border-transparent"
                    data-testid={rescheduleUid ? "confirm-reschedule-button" : "confirm-book-button"}
                    loading={mutation.isLoading || recurringMutation.isLoading}>
                    {rescheduleUid ? t("reschedule") : t("confirm")}
@@ -1,6 +1,6 @@
+import { useMutation } from "@tanstack/react-query";
 import { RescheduleResponse } from "pages/api/book/request-reschedule";
 import React, { useState, Dispatch, SetStateAction } from "react";
-import { useMutation } from "react-query";

 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
@@ -7,6 +7,7 @@ import { useForm } from "react-hook-form";
 import type { z } from "zod";

 import classNames from "@calcom/lib/classNames";
+import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
 import { createEventTypeInput } from "@calcom/prisma/zod/custom/eventtype";
@@ -338,7 +339,7 @@ function CreateEventTeamsItem(props: {
      onSelect={() => props.openModal(props.option)}>
      <Avatar
        alt={props.option.name || ""}
-        imageSrc={props.option.image}
+        imageSrc={props.option.image || WEBAPP_URL + "/" + props.option.slug + "/avatar.png"}
        size={6}
        className="inline ltr:mr-2 rtl:ml-2"
      />
@@ -1,89 +0,0 @@
-import { Prisma, SchedulingType } from "@prisma/client";
-import { useMemo } from "react";
-import { FormattedNumber, IntlProvider } from "react-intl";
-
-import { parseRecurringEvent } from "@calcom/lib";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { baseEventTypeSelect } from "@calcom/prisma/selects";
-import { Icon } from "@calcom/ui/Icon";
-
-import classNames from "@lib/classNames";
-
-const eventTypeData = Prisma.validator<Prisma.EventTypeArgs>()({
-  select: baseEventTypeSelect,
-});
-
-type EventType = Prisma.EventTypeGetPayload<typeof eventTypeData>;
-
-export type EventTypeDescriptionProps = {
-  eventType: EventType;
-  className?: string;
-};
-
-export const EventTypeDescription = ({ eventType, className }: EventTypeDescriptionProps) => {
-  const { t } = useLocale();
-
-  const recurringEvent = useMemo(
-    () => parseRecurringEvent(eventType.recurringEvent),
-    [eventType.recurringEvent]
-  );
-
-  return (
-    <>
-      <div className={classNames("text-gray-600 dark:text-white", className)}>
-        {eventType.description && (
-          <h2 className="max-w-[280px] overflow-hidden text-ellipsis opacity-60 sm:max-w-[500px]">
-            {eventType.description.substring(0, 100)}
-            {eventType.description.length > 100 && "..."}
-          </h2>
-        )}
-        <ul className="mt-2 flex flex-wrap space-x-1 sm:flex-nowrap ">
-          <li className="mb-1 flex items-center whitespace-nowrap rounded-sm bg-gray-100 px-1 py-px text-xs text-gray-800 dark:bg-gray-900 dark:text-white">
-            <Icon.FiClock className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
-            {eventType.length} {t("minutes")}
-          </li>
-          {eventType.schedulingType ? (
-            <li className="mb-1 flex items-center whitespace-nowrap rounded-sm bg-gray-100 px-1 py-px text-xs text-gray-800 dark:bg-gray-900 dark:text-white">
-              <Icon.FiUsers className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
-              {eventType.schedulingType === SchedulingType.ROUND_ROBIN && t("round_robin")}
-              {eventType.schedulingType === SchedulingType.COLLECTIVE && t("collective")}
-            </li>
-          ) : (
-            <li className="mb-1 flex items-center whitespace-nowrap rounded-sm bg-gray-100 px-1 py-px text-xs text-gray-800 dark:bg-gray-900 dark:text-white">
-              <Icon.FiUser className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
-              {t("1_on_1")}
-            </li>
-          )}
-          {recurringEvent?.count && recurringEvent.count > 0 && (
-            <li className="mb-1 flex items-center whitespace-nowrap rounded-sm bg-gray-100 px-1 py-px text-xs text-gray-800 dark:bg-gray-900 dark:text-white">
-              <Icon.FiRefreshCw className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
-              {t("repeats_up_to", {
-                count: recurringEvent.count,
-              })}
-            </li>
-          )}
-          {eventType.price > 0 && (
-            <li className="mb-1 flex items-center whitespace-nowrap rounded-sm bg-gray-100 px-1 py-px text-xs text-gray-800 dark:bg-gray-900 dark:text-white">
-              <Icon.FiCreditCard className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
-              <IntlProvider locale="en">
-                <FormattedNumber
-                  value={eventType.price / 100.0}
-                  style="currency"
-                  currency={eventType.currency.toUpperCase()}
-                />
-              </IntlProvider>
-            </li>
-          )}
-          {eventType.requiresConfirmation && (
-            <li className="mb-1 flex items-center whitespace-nowrap rounded-sm bg-gray-100 px-1 py-px text-xs text-gray-800 dark:bg-gray-900 dark:text-white">
-              <Icon.FiCheckSquare className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
-              {t("requires_confirmation")}
-            </li>
-          )}
-        </ul>
-      </div>
-    </>
-  );
-};
-
-export default EventTypeDescription;
@@ -1,145 +0,0 @@
-import type { FormValues } from "pages/event-types/[type]";
-import { useState } from "react";
-import { UseFormReturn } from "react-hook-form";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Frequency } from "@calcom/prisma/zod-utils";
-import type { RecurringEvent } from "@calcom/types/Calendar";
-import { Alert } from "@calcom/ui/Alert";
-
-import Select from "@components/ui/form/Select";
-
-type RecurringEventControllerProps = {
-  recurringEvent: RecurringEvent | null;
-  formMethods: UseFormReturn<FormValues>;
-  paymentEnabled: boolean;
-  onRecurringEventDefined: (value: boolean) => void;
-};
-
-/**
- * @deprecated
- * use component from `/apps/web/components/v2/eventtype/RecurringEventController` instead
- **/
-export default function RecurringEventController({
-  recurringEvent,
-  formMethods,
-  paymentEnabled,
-  onRecurringEventDefined,
-}: RecurringEventControllerProps) {
-  const { t } = useLocale();
-  const [recurringEventState, setRecurringEventState] = useState<RecurringEvent | null>(recurringEvent);
-
-  /* Just yearly-0, monthly-1 and weekly-2 */
-  const recurringEventFreqOptions = Object.entries(Frequency)
-    .filter(([key, value]) => isNaN(Number(key)) && Number(value) < 3)
-    .map(([key, value]) => ({
-      label: t(`${key.toString().toLowerCase()}`, { count: recurringEventState?.interval }),
-      value: value.toString(),
-    }));
-
-  return (
-    <div className="block items-start sm:flex">
-      <div className="min-w-48 mb-4 sm:mb-0">
-        <span className="flex text-sm font-medium text-neutral-700">{t("recurring_event")}</span>
-      </div>
-      <div className={!paymentEnabled ? "w-full" : ""}>
-        {paymentEnabled ? (
-          <Alert severity="warning" title={t("warning_payment_recurring_event")} />
-        ) : (
-          <>
-            <div className="flex items-start">
-              <div className="flex h-5 items-start">
-                <input
-                  onChange={(event) => {
-                    onRecurringEventDefined(event?.target.checked);
-                    if (!event?.target.checked) {
-                      formMethods.setValue("recurringEvent", null);
-                      setRecurringEventState(null);
-                    } else {
-                      const newVal = recurringEvent || {
-                        interval: 1,
-                        count: 12,
-                        freq: Frequency.WEEKLY,
-                      };
-                      formMethods.setValue("recurringEvent", newVal);
-                      setRecurringEventState(newVal);
-                    }
-                  }}
-                  type="checkbox"
-                  className="text-primary-600  h-4 w-4 rounded border-gray-300"
-                  defaultChecked={recurringEventState !== null}
-                  data-testid="recurring-event-check"
-                  id="recurringEvent"
-                />
-              </div>
-              <div className="text-sm ltr:ml-3 rtl:mr-3">
-                <label htmlFor="recurringEvent" className="text-neutral-900">
-                  {t("recurring_event_description")}
-                </label>
-              </div>
-            </div>
-            {recurringEventState && (
-              <div data-testid="recurring-event-collapsible" className="mt-4 text-sm">
-                <div className="flex items-center">
-                  <p className="mr-2 text-neutral-900">{t("repeats_every")}</p>
-                  <input
-                    type="number"
-                    min="1"
-                    max="20"
-                    className="block w-16 rounded-sm border-gray-300 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
-                    defaultValue={recurringEventState.interval}
-                    onChange={(event) => {
-                      const newVal = {
-                        ...recurringEventState,
-                        interval: parseInt(event?.target.value),
-                      };
-                      formMethods.setValue("recurringEvent", newVal);
-                      setRecurringEventState(newVal);
-                    }}
-                  />
-                  <Select
-                    options={recurringEventFreqOptions}
-                    value={recurringEventFreqOptions[recurringEventState.freq]}
-                    isSearchable={false}
-                    className="w-18 block min-w-0 rounded-sm text-sm"
-                    onChange={(event) => {
-                      const newVal = {
-                        ...recurringEventState,
-                        freq: parseInt(event?.value || `${Frequency.WEEKLY}`),
-                      };
-                      formMethods.setValue("recurringEvent", newVal);
-                      setRecurringEventState(newVal);
-                    }}
-                  />
-                </div>
-                <div className="mt-4 flex items-center">
-                  <p className="mr-2 text-neutral-900">{t("max")}</p>
-                  <input
-                    type="number"
-                    min="1"
-                    max="20"
-                    className="block w-16 rounded-sm border-gray-300 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
-                    defaultValue={recurringEventState.count}
-                    onChange={(event) => {
-                      const newVal = {
-                        ...recurringEventState,
-                        count: parseInt(event?.target.value),
-                      };
-                      formMethods.setValue("recurringEvent", newVal);
-                      setRecurringEventState(newVal);
-                    }}
-                  />
-                  <p className="mr-2 text-neutral-900">
-                    {t("occurrence", {
-                      count: recurringEventState.count,
-                    })}
-                  </p>
-                </div>
-              </div>
-            )}
-          </>
-        )}
-      </div>
-    </div>
-  );
-}
@@ -1,6 +1,7 @@
 import { SkeletonAvatar, SkeletonContainer, SkeletonText } from "@calcom/ui";
 import { Icon } from "@calcom/ui/Icon";

+/** @deprecated Use `apps/web/components/v2/eventtype/SkeletonLoader.tsx` */
 function SkeletonLoader() {
  return (
    <SkeletonContainer>
@@ -14,10 +14,11 @@ const CalendarItem = (props: ICalendarItem) => {
  const { title, imageSrc, type } = props;
  const { t } = useLocale();
  return (
-    <div className="flex flex-row items-center p-5">
-      <img src={imageSrc} alt={title} className="h-8 w-8" />
-      <p className="mx-3 text-sm font-bold">{title}</p>
-
+    <div className="flex flex-row items-center justify-between p-5">
+      <div className="flex items-center space-x-3">
+        <img src={imageSrc} alt={title} className="h-8 w-8" />
+        <p className="text-sm font-bold">{title}</p>
+      </div>
      <InstallAppButtonWithoutPlanCheck
        type={type}
        render={(buttonProps) => (
@@ -27,10 +28,9 @@ const CalendarItem = (props: ICalendarItem) => {
            type="button"
            onClick={(event) => {
              // Save cookie key to return url step
-              document.cookie = `return-to=${window.location.href};path=/;max-age=3600`;
+              document.cookie = `return-to=${window.location.href};path=/;max-age=3600;SameSite=Lax`;
              buttonProps && buttonProps.onClick && buttonProps?.onClick(event);
-            }}
-            className="ml-auto rounded-md border border-gray-200 py-[10px] px-4 text-sm font-bold">
+            }}>
            {t("connect")}
          </Button>
        )}
@@ -1,4 +1,4 @@
-import { useMutation } from "react-query";
+import { useMutation } from "@tanstack/react-query";

 import showToast from "@calcom/lib/notification";
 import { trpc } from "@calcom/trpc/react";
@@ -31,10 +31,11 @@ const ConnectedCalendarItem = (prop: IConnectedCalendarItem) => {
        <img src={logo} alt={name} className="m-1 h-8 w-8" />
        <div className="mx-4">
          <p className="font-sans text-sm font-bold leading-5">
-            {name}{" "}
-            <span className="mx-1 rounded-[4px] bg-green-100 py-[2px] px-[6px] font-sans text-xs font-medium text-green-600">
+            {name}
+            {/* Temporarily removed till we use it on another place */}
+            {/* <span className="mx-1 rounded-[4px] bg-green-100 py-[2px] px-[6px] font-sans text-xs font-medium text-green-600">
              {t("default")}
-            </span>
+            </span> */}
          </p>
          <div className="fle-row flex">
            <span
@@ -44,13 +45,13 @@ const ConnectedCalendarItem = (prop: IConnectedCalendarItem) => {
            </span>
          </div>
        </div>
-
-        <Button
+        {/* Temporarily removed */}
+        {/* <Button
          color="minimal"
          type="button"
          className="ml-auto flex rounded-md border border-gray-200 py-[10x] px-4 font-sans text-sm">
          {t("edit")}
-        </Button>
+        </Button> */}
      </div>
      <div className="h-[1px] w-full border-b border-gray-200" />
      <div>
@@ -31,7 +31,8 @@ const ConnectedCalendars = (props: IConnectCalendarsProps) => {
  return (
    <>
      {/* Already connected calendars  */}
-      {firstCalendar &&
+      {!queryConnectedCalendars.isLoading &&
+        firstCalendar &&
        firstCalendar.integration &&
        firstCalendar.integration.title &&
        firstCalendar.integration.imageSrc && (
@@ -52,7 +53,7 @@ const ConnectedCalendars = (props: IConnectCalendarsProps) => {
            </List>
            {/* Create event on selected calendar */}
            <CreateEventsOnCalendarSelect calendar={destinationCalendar} />
-            <p className="mt-7 text-sm text-gray-500">{t("connect_calendars_from_app_store")}</p>
+            <p className="mt-4 text-sm text-gray-500">{t("connect_calendars_from_app_store")}</p>
          </>
        )}

@@ -75,7 +76,7 @@ const ConnectedCalendars = (props: IConnectCalendarsProps) => {
        </List>
      )}

-      {queryConnectedCalendars.isLoading && (
+      {queryIntegrations.isLoading && (
        <ul className="divide-y divide-gray-200 rounded-md border border-gray-200 bg-white p-0 dark:bg-black">
          {[0, 0, 0, 0].map((_item, index) => {
            return (
@@ -3,23 +3,16 @@ import { useRouter } from "next/router";
 import { useForm } from "react-hook-form";

 import { Schedule } from "@calcom/features/schedules";
+import { DEFAULT_SCHEDULE } from "@calcom/lib/availability";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc, TRPCClientErrorLike } from "@calcom/trpc/react";
 import { AppRouter } from "@calcom/trpc/server/routers/_app";
 import { Form } from "@calcom/ui/form/fields";
 import { Button } from "@calcom/ui/v2";

-import { DEFAULT_SCHEDULE } from "@lib/availability";
-import type { Schedule as ScheduleType } from "@lib/types/schedule";
-
 interface ISetupAvailabilityProps {
  nextStep: () => void;
  defaultScheduleId?: number | null;
-  defaultAvailability?: { schedule?: TimeRanges[][] };
-}
-
-interface ScheduleFormValues {
-  schedule: ScheduleType;
 }

 const SetupAvailability = (props: ISetupAvailabilityProps) => {
@@ -37,7 +30,9 @@ const SetupAvailability = (props: ISetupAvailabilityProps) => {
  }

  const availabilityForm = useForm({
-    defaultValues: { schedule: queryAvailability?.data?.availability || DEFAULT_SCHEDULE },
+    defaultValues: {
+      schedule: queryAvailability?.data?.availability || DEFAULT_SCHEDULE,
+    },
  });

  const mutationOptions = {
@@ -51,7 +46,7 @@ const SetupAvailability = (props: ISetupAvailabilityProps) => {
  const createSchedule = trpc.useMutation("viewer.availability.schedule.create", mutationOptions);
  const updateSchedule = trpc.useMutation("viewer.availability.schedule.update", mutationOptions);
  return (
-    <Form<ScheduleFormValues>
+    <Form
      className="w-full bg-white text-black dark:bg-opacity-5 dark:text-white"
      form={availabilityForm}
      handleSubmit={async (values) => {
@@ -75,7 +70,7 @@ const SetupAvailability = (props: ISetupAvailabilityProps) => {
          }
        }
      }}>
-      <Schedule />
+      <Schedule control={availabilityForm.control} name="schedule" weekStart={1} />

      <div>
        <Button
@@ -149,7 +149,7 @@ const UserProfile = (props: IUserProfile) => {
          }}
        />
        {errors.bio && (
-          <p data-testid="required" className="text-xs italic text-red-500">
+          <p data-testid="required" className="py-2 text-xs text-red-500">
            {t("required")}
          </p>
        )}
@@ -85,7 +85,7 @@ const UserSettings = (props: IUserSettingsProps) => {
            className="w-full rounded-md border border-gray-300 text-sm"
          />
          {errors.name && (
-            <p data-testid="required" className="text-xs italic text-red-500">
+            <p data-testid="required" className="py-2 text-xs text-red-500">
              {t("required")}
            </p>
          )}
@@ -1,5 +1,5 @@
+import { useMutation } from "@tanstack/react-query";
 import { Fragment } from "react";
-import { useMutation } from "react-query";

 import { InstallAppButton } from "@calcom/app-store/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -185,8 +185,8 @@ function ConnectedCalendarsList(props: Props) {
                ) : (
                  <Alert
                    severity="warning"
-                    title={t("calendar_error")}
-                    message={item.error?.message}
+                    title={t("something_went_wrong")}
+                    message={t("calendar_error")}
                    actions={
                      <DisconnectIntegration
                        id={item.credentialId}
@@ -1,5 +1,5 @@
+import { useMutation } from "@tanstack/react-query";
 import { useState } from "react";
-import { useMutation } from "react-query";

 import showToast from "@calcom/lib/notification";
 import { ButtonBaseProps } from "@calcom/ui/Button";
@@ -3,9 +3,9 @@ import { useRef, useState } from "react";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui";
-import { Alert } from "@calcom/ui/Alert";
-import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/Dialog";
 import { Icon } from "@calcom/ui/Icon";
+import { Alert } from "@calcom/ui/v2/core/Alert";
+import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/v2/core/Dialog";

 interface Props {
  isOpen: boolean;
@@ -28,15 +28,14 @@ export default function TeamCreate(props: Props) {
    },
  });

-  const createTeam = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
+  const createTeam = () => {
    createTeamMutation.mutate({ name: nameRef?.current?.value });
  };

  return (
    <>
      <Dialog open={props.isOpen} onOpenChange={props.onClose}>
-        <DialogContent>
+        <DialogContent type="creation" actionText={t("create_new_team")} actionOnClick={createTeam}>
          <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">
              <Icon.FiUsers className="text-brandcontrast h-6 w-6" />
@@ -50,7 +49,7 @@ export default function TeamCreate(props: Props) {
              </div>
            </div>
          </div>
-          <form onSubmit={createTeam}>
+          <form>
            <div className="mb-4">
              <label htmlFor="name" className="block text-sm font-medium text-gray-700">
                {t("name")}
@@ -66,18 +65,6 @@ export default function TeamCreate(props: Props) {
              />
            </div>
            {errorMessage && <Alert severity="error" title={errorMessage} />}
-            <DialogFooter>
-              <Button type="button" color="secondary" onClick={props.onClose}>
-                {t("cancel")}
-              </Button>
-              <Button
-                type="submit"
-                color="primary"
-                className="ltr:ml-2 rtl:mr-2"
-                data-testid="create-new-team-button">
-                {t("create_team")}
-              </Button>
-            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>
@@ -1,7 +1,7 @@
 import { useState } from "react";

-import showToast from "@calcom/lib/notification";
 import { inferQueryOutput, trpc } from "@calcom/trpc/react";
+import showToast from "@calcom/ui/v2/core/notifications";

 import TeamListItem from "./TeamListItem";

@@ -4,19 +4,21 @@ import Link from "next/link";
 import classNames from "@calcom/lib/classNames";
 import { getPlaceholderAvatar } from "@calcom/lib/getPlaceholderAvatar";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import showToast from "@calcom/lib/notification";
 import { inferQueryOutput, trpc } from "@calcom/trpc/react";
-import Button from "@calcom/ui/Button";
-import ConfirmationDialogContent from "@calcom/ui/ConfirmationDialogContent";
-import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
+import { Icon } from "@calcom/ui/Icon";
+import Button from "@calcom/ui/v2/core/Button";
+import ButtonGroup from "@calcom/ui/v2/core/ButtonGroup";
+import ConfirmationDialogContent from "@calcom/ui/v2/core/ConfirmationDialogContent";
+import { Dialog, DialogTrigger } from "@calcom/ui/v2/core/Dialog";
 import Dropdown, {
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
-} from "@calcom/ui/Dropdown";
-import { Icon } from "@calcom/ui/Icon";
-import { Tooltip } from "@calcom/ui/Tooltip";
+  DropdownItem,
+} from "@calcom/ui/v2/core/Dropdown";
+import { Tooltip } from "@calcom/ui/v2/core/Tooltip";
+import showToast from "@calcom/ui/v2/core/notifications";

 import Avatar from "@components/ui/Avatar";

@@ -84,7 +86,7 @@ export default function TeamListItem(props: Props) {
          !isInvitee && "group hover:bg-neutral-50"
        )}>
        {!isInvitee ? (
-          <Link href={"/settings/teams/" + team.id}>
+          <Link href={"/settings/teams/" + team.id + "/profile"}>
            <a className="flex-grow cursor-pointer truncate text-sm" title={`${team.name}`}>
              {teamInfo}
            </a>
@@ -112,7 +114,6 @@ export default function TeamListItem(props: Props) {
                    <DropdownMenuItem>
                      <Button
                        color="minimal"
-                        size="sm"
                        className="w-full rounded-none font-medium"
                        StartIcon={Icon.FiCheck}
                        onClick={acceptInvite}>
@@ -121,8 +122,7 @@ export default function TeamListItem(props: Props) {
                    </DropdownMenuItem>
                    <DropdownMenuItem>
                      <Button
-                        color="warn"
-                        size="sm"
+                        color="destructive"
                        className="w-full rounded-none font-medium"
                        StartIcon={Icon.FiX}
                        onClick={declineInvite}>
@@ -137,111 +137,103 @@ export default function TeamListItem(props: Props) {
          {!isInvitee && (
            <div className="flex space-x-2 rtl:space-x-reverse">
              <TeamRole role={team.role} />
-
-              <Tooltip side="top" content={t("copy_link_team")}>
-                <Button
-                  onClick={() => {
-                    navigator.clipboard.writeText(process.env.NEXT_PUBLIC_WEBSITE_URL + "/team/" + team.slug);
-                    showToast(t("link_copied"), "success");
-                  }}
-                  className="h-10 w-10 transition-none"
-                  size="icon"
-                  color="minimal"
-                  type="button">
-                  <Icon.FiLink className="h-5 w-5 group-hover:text-gray-600" />
-                </Button>
-              </Tooltip>
-              <Dropdown>
-                <DropdownMenuTrigger asChild>
-                  <Button type="button" color="minimal" size="icon" StartIcon={Icon.FiMoreHorizontal} />
-                </DropdownMenuTrigger>
-                <DropdownMenuContent hidden={hideDropdown}>
-                  {isAdmin && (
+              <ButtonGroup combined>
+                <Tooltip content={t("copy_link_team")}>
+                  <Button
+                    color="secondary"
+                    onClick={() => {
+                      navigator.clipboard.writeText(
+                        process.env.NEXT_PUBLIC_WEBSITE_URL + "/team/" + team.slug
+                      );
+                      showToast(t("link_copied"), "success");
+                    }}
+                    size="icon"
+                    StartIcon={Icon.FiLink}
+                    combined
+                  />
+                </Tooltip>
+                <Dropdown>
+                  <DropdownMenuTrigger asChild>
+                    <Button type="button" color="secondary" size="icon" StartIcon={Icon.FiMoreHorizontal} />
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent hidden={hideDropdown}>
+                    {isAdmin && (
+                      <DropdownMenuItem>
+                        <DropdownItem
+                          type="button"
+                          href={"/settings/teams/" + team.id + "/profile"}
+                          StartIcon={Icon.FiEdit2}>
+                          {t("edit_team") as string}
+                        </DropdownItem>
+                      </DropdownMenuItem>
+                    )}
                    <DropdownMenuItem>
-                      <Link href={"/settings/teams/" + team.id}>
-                        <a>
-                          <Button
-                            color="minimal"
-                            size="sm"
-                            className="w-full rounded-none font-medium"
-                            StartIcon={Icon.FiEdit2}>
-                            {t("edit_team")}
-                          </Button>
-                        </a>
-                      </Link>
+                      <DropdownItem
+                        type="button"
+                        target="_blank"
+                        href={`${process.env.NEXT_PUBLIC_WEBSITE_URL}/team/${team.slug}`}
+                        StartIcon={Icon.FiExternalLink}>
+                        {t("preview_team") as string}
+                      </DropdownItem>
                    </DropdownMenuItem>
-                  )}
-                  <DropdownMenuItem>
-                    <Link href={`${process.env.NEXT_PUBLIC_WEBSITE_URL}/team/${team.slug}`} passHref={true}>
-                      <a target="_blank">
-                        <Button
-                          color="minimal"
-                          size="sm"
-                          className="w-full rounded-none font-medium"
-                          StartIcon={Icon.FiExternalLink}>
-                          {t("preview_team")}
-                        </Button>
-                      </a>
-                    </Link>
-                  </DropdownMenuItem>
-                  <DropdownMenuSeparator className="h-px bg-gray-200" />
-                  {isOwner && (
-                    <DropdownMenuItem>
-                      <Dialog open={hideDropdown} onOpenChange={setHideDropdown}>
-                        <DialogTrigger asChild>
-                          <Button
-                            onClick={(e) => {
-                              e.stopPropagation();
-                            }}
-                            color="warn"
-                            size="sm"
-                            className="w-full rounded-none font-medium"
-                            StartIcon={Icon.FiTrash}>
-                            {t("disband_team")}
-                          </Button>
-                        </DialogTrigger>
-                        <ConfirmationDialogContent
-                          variety="danger"
-                          title={t("disband_team")}
-                          confirmBtnText={t("confirm_disband_team")}
-                          isLoading={props.isLoading}
-                          onConfirm={() => {
-                            props.onActionSelect("disband");
-                          }}>
-                          {t("disband_team_confirmation_message")}
-                        </ConfirmationDialogContent>
-                      </Dialog>
-                    </DropdownMenuItem>
-                  )}
-
-                  {!isOwner && (
-                    <DropdownMenuItem>
-                      <Dialog>
-                        <DialogTrigger asChild>
-                          <Button
-                            type="button"
-                            color="warn"
-                            size="lg"
-                            StartIcon={Icon.FiLogOut}
-                            className="w-full rounded-none"
-                            onClick={(e) => {
-                              e.stopPropagation();
+                    <DropdownMenuSeparator className="h-px bg-gray-200" />
+                    {isOwner && (
+                      <DropdownMenuItem>
+                        <Dialog open={hideDropdown} onOpenChange={setHideDropdown}>
+                          <DialogTrigger asChild>
+                            <Button
+                              onClick={(e) => {
+                                e.stopPropagation();
+                              }}
+                              color="destructive"
+                              className="rounded-none px-3 font-normal"
+                              StartIcon={Icon.FiTrash}>
+                              {t("disband_team")}
+                            </Button>
+                          </DialogTrigger>
+                          <ConfirmationDialogContent
+                            variety="danger"
+                            title={t("disband_team")}
+                            confirmBtnText={t("confirm_disband_team")}
+                            isLoading={props.isLoading}
+                            onConfirm={() => {
+                              props.onActionSelect("disband");
                            }}>
-                            {t("leave_team")}
-                          </Button>
-                        </DialogTrigger>
-                        <ConfirmationDialogContent
-                          variety="danger"
-                          title={t("leave_team")}
-                          confirmBtnText={t("confirm_leave_team")}
-                          onConfirm={declineInvite}>
-                          {t("leave_team_confirmation_message")}
-                        </ConfirmationDialogContent>
-                      </Dialog>
-                    </DropdownMenuItem>
-                  )}
-                </DropdownMenuContent>
-              </Dropdown>
+                            {t("disband_team_confirmation_message")}
+                          </ConfirmationDialogContent>
+                        </Dialog>
+                      </DropdownMenuItem>
+                    )}
+
+                    {!isOwner && (
+                      <DropdownMenuItem>
+                        <Dialog>
+                          <DialogTrigger asChild>
+                            <Button
+                              type="button"
+                              color="destructive"
+                              size="lg"
+                              StartIcon={Icon.FiLogOut}
+                              className="w-full rounded-none"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                              }}>
+                              {t("leave_team")}
+                            </Button>
+                          </DialogTrigger>
+                          <ConfirmationDialogContent
+                            variety="danger"
+                            title={t("leave_team")}
+                            confirmBtnText={t("confirm_leave_team")}
+                            onConfirm={declineInvite}>
+                            {t("leave_team_confirmation_message")}
+                          </ConfirmationDialogContent>
+                        </Dialog>
+                      </DropdownMenuItem>
+                    )}
+                  </DropdownMenuContent>
+                </Dropdown>
+              </ButtonGroup>
            </div>
          )}
        </div>
@@ -1,10 +1,7 @@
 import Link from "next/link";
 import { TeamPageProps } from "pages/team/[slug]";
-import React from "react";

 import { WEBAPP_URL } from "@calcom/lib/constants";
-import Button from "@calcom/ui/Button";
-import { Icon } from "@calcom/ui/Icon";
 import { Avatar } from "@calcom/ui/v2";

 import { useLocale } from "@lib/hooks/useLocale";
@@ -13,46 +10,46 @@ type TeamType = TeamPageProps["team"];
 type MembersType = TeamType["members"];
 type MemberType = MembersType[number];

-const Team = ({ team }: TeamPageProps) => {
+const Member = ({ member, teamName }: { member: MemberType; teamName: string | null }) => {
  const { t } = useLocale();

-  const Member = ({ member }: { member: MemberType }) => {
-    return (
-      <Link key={member.id} href={`/${member.username}`}>
-        <div className="sm:min-w-80 sm:max-w-80 dark:bg-darkgray-200 dark:hover:bg-darkgray-300 group flex h-full flex-col space-y-2 rounded-md bg-white p-4  hover:cursor-pointer hover:bg-gray-50 ">
-          <Avatar
-            size="md"
-            alt={member.name || ""}
-            imageSrc={WEBAPP_URL + "/" + member.username + "/avatar.png"}
-          />
-          <section className="line-clamp-4 mt-2 w-full space-y-1">
-            <p className="font-medium text-neutral-900 dark:text-white">{member.name}</p>
-            <p className="line-clamp-3 overflow-ellipsis text-sm font-normal text-neutral-500 dark:text-white">
-              {member.bio || t("user_from_team", { user: member.name, team: team.name })}
-            </p>
-          </section>
-        </div>
-      </Link>
-    );
-  };
+  return (
+    <Link key={member.id} href={`/${member.username}`}>
+      <div className="sm:min-w-80 sm:max-w-80 dark:bg-darkgray-200 dark:hover:bg-darkgray-300 group flex min-h-full w-[90%] flex-col space-y-2 rounded-md bg-white p-4  hover:cursor-pointer hover:bg-gray-50 ">
+        <Avatar
+          size="md"
+          alt={member.name || ""}
+          imageSrc={WEBAPP_URL + "/" + member.username + "/avatar.png"}
+        />
+        <section className="line-clamp-4 mt-2 w-full space-y-1">
+          <p className="font-medium text-neutral-900 dark:text-white">{member.name}</p>
+          <p className="line-clamp-3 overflow-ellipsis text-sm font-normal text-neutral-500 dark:text-white">
+            {member.bio || t("user_from_team", { user: member.name, team: teamName })}
+          </p>
+        </section>
+      </div>
+    </Link>
+  );
+};

-  const Members = ({ members }: { members: MembersType }) => {
-    if (!members || members.length === 0) {
-      return null;
-    }
-
-    return (
-      <section className="lg:min-w-lg mx-auto flex min-w-full max-w-5xl flex-wrap justify-center gap-x-6 gap-y-6">
-        {members.map((member) => {
-          return member.username !== null && <Member key={member.id} member={member} />;
-        })}
-      </section>
-    );
-  };
+const Members = ({ members, teamName }: { members: MembersType; teamName: string | null }) => {
+  if (!members || members.length === 0) {
+    return null;
+  }

+  return (
+    <section className="lg:min-w-lg mx-auto flex min-w-full max-w-5xl flex-wrap justify-center gap-x-6 gap-y-6">
+      {members.map((member) => {
+        return member.username !== null && <Member key={member.id} member={member} teamName={teamName} />;
+      })}
+    </section>
+  );
+};
+
+const Team = ({ team }: TeamPageProps) => {
  return (
    <div>
-      <Members members={team.members} />
+      <Members members={team.members} teamName={team.name} />
    </div>
  );
 };
@@ -1,50 +1,48 @@
-import { useState } from "react";
+import classNames from "classnames";
+import React, { useState } from "react";
+import { ControllerRenderProps } from "react-hook-form";

 import { Icon } from "@calcom/ui/Icon";

-const EditableHeading = ({
-  title,
+const EditableHeading = function EditableHeading({
+  value,
  onChange,
-  placeholder = "",
-  readOnly = false,
+  isReady,
+  ...passThroughProps
 }: {
-  title: string;
-  onChange?: (value: string) => void;
-  placeholder?: string;
-  readOnly?: boolean;
-}) => {
+  isReady?: boolean;
+} & Omit<JSX.IntrinsicElements["input"], "name" | "onChange"> &
+  ControllerRenderProps) {
  const [isEditing, setIsEditing] = useState(false);
-  const enableEditing = () => !readOnly && setIsEditing(true);
+  const enableEditing = () => setIsEditing(true);
  return (
    <div className="group relative cursor-pointer" onClick={enableEditing}>
-      {!isEditing ? (
-        <>
-          <h1
-            style={{ fontSize: 22, letterSpacing: "-0.0009em" }}
-            className="inline pl-0 normal-case text-gray-900 focus:text-black group-hover:text-gray-500">
-            {title}
-          </h1>
-          {!readOnly ? (
-            <Icon.FiEdit2 className="ml-1 -mt-1 inline h-4 w-4 text-gray-700 group-hover:text-gray-500" />
-          ) : null}
-        </>
-      ) : (
-        <div style={{ marginBottom: -11 }}>
+      <div className="flex 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 && (
+            <Icon.FiEdit2 className="ml-1 inline h-4 w-4 align-top text-gray-700 group-hover:text-gray-500" />
+          )}
          <input
+            {...passThroughProps}
            type="text"
-            autoFocus
-            style={{ top: -6, fontSize: 22 }}
+            value={value}
            required
-            className="relative h-10 w-full cursor-pointer border-none bg-transparent pl-0 text-gray-900 hover:text-gray-700 focus:text-black focus:outline-none focus:ring-0"
-            placeholder={placeholder}
-            defaultValue={title}
+            className={classNames(
+              "absolute top-0 left-0 w-full cursor-pointer border-none bg-transparent p-0 align-top text-xl text-gray-900 hover:text-gray-700 focus:text-black focus:outline-none focus:ring-0"
+            )}
+            onFocus={(e) => {
+              setIsEditing(true);
+              passThroughProps.onFocus && passThroughProps.onFocus(e);
+            }}
            onBlur={(e) => {
              setIsEditing(false);
-              onChange && onChange(e.target.value);
+              passThroughProps.onBlur && passThroughProps.onBlur(e);
            }}
+            onChange={(e) => onChange && onChange(e.target.value)}
          />
-        </div>
-      )}
+        </label>
+      </div>
    </div>
  );
 };
@@ -1,6 +1,11 @@
 import React, { FC } from "react";

-import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/Dropdown";
+import Dropdown, {
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuPortal,
+} from "@calcom/ui/Dropdown";
 import { Icon } from "@calcom/ui/Icon";
 import Button from "@calcom/ui/v2/core/Button";

@@ -43,39 +48,36 @@ const DropdownActions = ({
      ) : (
        <DropdownMenuTrigger asChild>{actionTrigger}</DropdownMenuTrigger>
      )}
-      <DropdownMenuContent portalled>
-        {actions.map((action) => (
-          <DropdownMenuItem key={action.id} className="focus-visible:outline-none">
-            <Button
-              type="button"
-              color="minimal"
-              className="w-full rounded-none font-normal"
-              href={action.href}
-              StartIcon={action.icon}
-              onClick={action.onClick || defaultAction}
-              data-testid={action.id}>
-              {action.label}
-            </Button>
-          </DropdownMenuItem>
-        ))}
-      </DropdownMenuContent>
+      <DropdownMenuPortal>
+        <DropdownMenuContent>
+          {actions.map((action) => (
+            <DropdownMenuItem key={action.id} className="focus-visible:outline-none">
+              <Button
+                type="button"
+                color="minimal"
+                className="w-full rounded-none font-normal"
+                href={action.href}
+                StartIcon={action.icon}
+                onClick={action.onClick || defaultAction}
+                data-testid={action.id}>
+                {action.label}
+              </Button>
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenuPortal>
    </Dropdown>
  );
 };

 const TableActions: FC<Props> = ({ actions }) => {
-  const mobileActions = actions.flatMap((action) => {
-    if (action.actions) {
-      return action.actions;
-    }
-    return action;
-  });
  return (
    <>
-      <div className="hidden space-x-2 rtl:space-x-reverse lg:flex">
+      <div className="flex space-x-2 rtl:space-x-reverse">
        {actions.map((action) => {
          const button = (
            <Button
+              className="whitespace-nowrap"
              key={action.id}
              data-testid={action.id}
              href={action.href}
@@ -93,9 +95,6 @@ const TableActions: FC<Props> = ({ actions }) => {
          return <DropdownActions key={action.id} actions={action.actions} actionTrigger={button} />;
        })}
      </div>
-      <div className="inline-block text-left lg:hidden">
-        <DropdownActions actions={mobileActions} />
-      </div>
    </>
  );
 };
@@ -5,15 +5,16 @@ import { MutableRefObject, useCallback, useEffect, useState } from "react";

 import { getPremiumPlanMode, getPremiumPlanPriceValue } from "@calcom/app-store/stripepayment/lib/utils";
 import { fetchUsername } from "@calcom/lib/fetchUsername";
+import hasKeyInMetadata from "@calcom/lib/hasKeyInMetadata";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { User } from "@calcom/prisma/client";
 import { TRPCClientErrorLike } from "@calcom/trpc/client";
 import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 import type { AppRouter } from "@calcom/trpc/server/routers/_app";
-import Button from "@calcom/ui/Button";
 import { Dialog, DialogClose, DialogContent, DialogHeader } from "@calcom/ui/Dialog";
 import { Icon, StarIconSolid } from "@calcom/ui/Icon";
-import { Input, Label } from "@calcom/ui/form/fields";
+import { Button } from "@calcom/ui/v2";
+import { Input, Label } from "@calcom/ui/v2";

 export enum UsernameChangeStatusEnum {
  NORMAL = "NORMAL",
@@ -25,7 +26,7 @@ interface ICustomUsernameProps {
  currentUsername: string | undefined;
  setCurrentUsername: (value: string | undefined) => void;
  inputUsernameValue: string | undefined;
-  usernameRef: MutableRefObject<HTMLInputElement>;
+  usernameRef: MutableRefObject<HTMLInputElement | null>;
  setInputUsernameValue: (value: string) => void;
  onSuccessMutation?: () => void;
  onErrorMutation?: (error: TRPCClientErrorLike<AppRouter>) => void;
@@ -43,9 +44,8 @@ interface ICustomUsernameProps {
    | "plan"
    | "brandColor"
    | "darkBrandColor"
-    | "metadata"
    | "timeFormat"
-    | "allowDynamicBooking"
+    | "metadata"
  >;
  readonly?: boolean;
 }
@@ -62,24 +62,13 @@ const obtainNewUsernameChangeCondition = ({
  if (!userIsPremium && isNewUsernamePremium && !stripeCustomer?.paidForPremium) {
    return UsernameChangeStatusEnum.UPGRADE;
  }
+
  if (userIsPremium && !isNewUsernamePremium && getPremiumPlanMode() === "subscription") {
    return UsernameChangeStatusEnum.DOWNGRADE;
  }
  return UsernameChangeStatusEnum.NORMAL;
 };

-const useIsUsernamePremium = (username: string) => {
-  const [isCurrentUsernamePremium, setIsCurrentUsernamePremium] = useState(false);
-  useEffect(() => {
-    (async () => {
-      if (!username) return;
-      const { data } = await fetchUsername(username);
-      setIsCurrentUsernamePremium(data.premium);
-    })();
-  }, [username]);
-  return isCurrentUsernamePremium;
-};
-
 const PremiumTextfield = (props: ICustomUsernameProps) => {
  const { t } = useLocale();
  const {
@@ -91,6 +80,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
    onSuccessMutation,
    onErrorMutation,
    readonly: disabled,
+    user,
  } = props;
  const [usernameIsAvailable, setUsernameIsAvailable] = useState(false);
  const [markAsError, setMarkAsError] = useState(false);
@@ -98,13 +88,13 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
  const { paymentStatus: recentAttemptPaymentStatus } = router.query;
  const [openDialogSaveUsername, setOpenDialogSaveUsername] = useState(false);
  const { data: stripeCustomer } = trpc.useQuery(["viewer.stripeCustomer"]);
-  const isCurrentUsernamePremium = useIsUsernamePremium(currentUsername || "");
+  const isCurrentUsernamePremium =
+    user && user.metadata && hasKeyInMetadata(user, "isPremium") ? !!user.metadata.isPremium : false;
  const [isInputUsernamePremium, setIsInputUsernamePremium] = useState(false);
-
  const debouncedApiCall = useCallback(
-    debounce(async (username) => {
+    debounce(async (username: string) => {
      const { data } = await fetchUsername(username);
-      setMarkAsError(!data.available && username !== currentUsername);
+      setMarkAsError(!data.available && !!currentUsername && username !== currentUsername);
      setIsInputUsernamePremium(data.premium);
      setUsernameIsAvailable(data.available);
    }, 150),
@@ -183,7 +173,9 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
            onClick={() => {
              if (currentUsername) {
                setInputUsernameValue(currentUsername);
-                usernameRef.current.value = currentUsername;
+                if (usernameRef.current) {
+                  usernameRef.current.value = currentUsername;
+                }
              }
            }}>
            {t("cancel")}
@@ -202,6 +194,20 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
    }
  };

+  let paymentMsg = !currentUsername ? (
+    <span className="text-xs text-orange-400">
+      You need to reserve your premium username for {getPremiumPlanPriceValue()}
+    </span>
+  ) : null;
+
+  if (recentAttemptPaymentStatus && recentAttemptPaymentStatus !== "paid") {
+    paymentMsg = (
+      <span className="text-sm text-red-500">
+        Your payment could not be completed. Your username is still not reserved
+      </span>
+    );
+  }
+
  return (
    <div>
      <div className="flex justify-items-center">
@@ -210,8 +216,8 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
      <div className="mt-2 flex rounded-md">
        <span
          className={classNames(
-            isInputUsernamePremium ? "border-2 border-orange-400 " : "",
-            "hidden items-center rounded-l-md border border-r-0 border-gray-300 border-r-gray-300 bg-gray-50 px-3 text-sm text-gray-500 md:inline-flex"
+            isInputUsernamePremium ? "border-1 border-orange-400 " : "",
+            "hidden h-9 items-center rounded-l-md border border-r-0 border-gray-300 border-r-gray-300 bg-gray-50 px-3 text-sm text-gray-500 md:inline-flex"
          )}>
          {process.env.NEXT_PUBLIC_WEBSITE_URL.replace("https://", "").replace("http://", "")}/
        </span>
@@ -225,17 +231,20 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
            autoCorrect="none"
            disabled={disabled}
            className={classNames(
-              "mt-0 rounded-md rounded-l-none border-l-2 focus:!ring-0",
+              "border-l-1 mb-0 mt-0 rounded-md rounded-l-none font-sans text-sm leading-4 focus:!ring-0",
              isInputUsernamePremium
-                ? "border-2 border-orange-400 focus:border-2 focus:border-orange-400"
-                : "border-2 focus:border-2",
+                ? "border-1 focus:border-1 border-orange-400 focus:border-orange-400"
+                : "border-1 focus:border-2",
              markAsError
                ? "focus:shadow-0 focus:ring-shadow-0 border-red-500  focus:border-red-500 focus:outline-none"
-                : "border-l-gray-300 "
+                : "border-l-gray-300",
+              disabled ? "bg-gray-100 text-gray-400 focus:border-0" : ""
            )}
            value={inputUsernameValue}
            onChange={(event) => {
              event.preventDefault();
+              // Reset payment status
+              delete router.query.paymentStatus;
              setInputUsernameValue(event.target.value);
            }}
            data-testid="username-input"
@@ -247,12 +256,8 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
                isInputUsernamePremium ? "text-orange-400" : "",
                usernameIsAvailable ? "" : ""
              )}>
-              {isInputUsernamePremium ? <StarIconSolid className="mt-[4px] w-6" /> : <></>}
-              {!isInputUsernamePremium && usernameIsAvailable ? (
-                <Icon.FiCheck className="mt-[7px] w-6" />
-              ) : (
-                <></>
-              )}
+              {isInputUsernamePremium ? <StarIconSolid className="mt-[2px] w-6" /> : <></>}
+              {!isInputUsernamePremium && usernameIsAvailable ? <Icon.FiCheck className="mt-2 w-6" /> : <></>}
            </span>
          </div>
        </div>
@@ -263,17 +268,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
          </div>
        )}
      </div>
-      {paymentRequired ? (
-        recentAttemptPaymentStatus && recentAttemptPaymentStatus !== "paid" ? (
-          <span className="text-sm text-red-500">
-            Your payment could not be completed. Your username is still not reserved
-          </span>
-        ) : (
-          <span className="text-xs text-orange-400">
-            You need to reserve your premium username for {getPremiumPlanPriceValue()}
-          </span>
-        )
-      ) : null}
+      {paymentMsg}
      {markAsError && <p className="mt-1 text-xs text-red-500">Username is already taken</p>}

      {usernameIsAvailable && (
@@ -7,16 +7,15 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { TRPCClientErrorLike } from "@calcom/trpc/client";
 import { trpc } from "@calcom/trpc/react";
 import { AppRouter } from "@calcom/trpc/server/routers/_app";
-import Button from "@calcom/ui/Button";
 import { Dialog, DialogClose, DialogContent, DialogHeader } from "@calcom/ui/Dialog";
 import { Icon } from "@calcom/ui/Icon";
-import { Input, Label } from "@calcom/ui/form/fields";
+import { Input, Label, Button } from "@calcom/ui/v2";

 interface ICustomUsernameProps {
  currentUsername: string | undefined;
  setCurrentUsername: (value: string | undefined) => void;
  inputUsernameValue: string | undefined;
-  usernameRef: MutableRefObject<HTMLInputElement>;
+  usernameRef: MutableRefObject<HTMLInputElement | null>;
  setInputUsernameValue: (value: string) => void;
  onSuccessMutation?: () => void;
  onErrorMutation?: (error: TRPCClientErrorLike<AppRouter>) => void;
@@ -73,15 +72,14 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
    },
  });

-  const ActionButtons = (props: { index: string }) => {
-    const { index } = props;
+  const ActionButtons = () => {
    return usernameIsAvailable && currentUsername !== inputUsernameValue ? (
      <div className="flex flex-row">
        <Button
          type="button"
          className="mx-2"
          onClick={() => setOpenDialogSaveUsername(true)}
-          data-testid={`update-username-btn-${index}`}>
+          data-testid="update-username-btn">
          {t("update")}
        </Button>
        <Button
@@ -91,7 +89,9 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
          onClick={() => {
            if (currentUsername) {
              setInputUsernameValue(currentUsername);
-              usernameRef.current.value = currentUsername;
+              if (usernameRef.current) {
+                usernameRef.current.value = currentUsername;
+              }
            }
          }}>
          {t("cancel")}
@@ -122,7 +122,7 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
            autoCapitalize="none"
            autoCorrect="none"
            className={classNames(
-              "mt-0 rounded-md rounded-l-none",
+              "mb-0 mt-0 h-6 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"
                : ""
@@ -136,21 +136,21 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
          />
          {currentUsername !== inputUsernameValue && (
            <div className="absolute right-[2px] top-0 flex flex-row">
-              <span className={classNames("mx-2 py-1")}>
-                {usernameIsAvailable ? <Icon.FiCheck className="mt-[4px] w-6" /> : <></>}
+              <span className={classNames("mx-2 py-2")}>
+                {usernameIsAvailable ? <Icon.FiCheck className="mt-[2px] w-6" /> : <></>}
              </span>
            </div>
          )}
        </div>
        <div className="hidden  md:inline">
-          <ActionButtons index="desktop" />
+          <ActionButtons />
        </div>
      </div>
      {markAsError && <p className="mt-1 text-xs text-red-500">Username is already taken</p>}

      {usernameIsAvailable && currentUsername !== inputUsernameValue && (
-        <div className="mt-2 flex justify-end sm:hidden">
-          <ActionButtons index="mobile" />
+        <div className="mt-2 flex justify-end md:hidden">
+          <ActionButtons />
        </div>
      )}
      <Dialog open={openDialogSaveUsername}>
@@ -88,7 +88,6 @@ function Select<
            : {
                /** Light Theme starts */
                primary: "var(--brand-color)",
-
                primary50: "rgba(209 , 213, 219, var(--tw-bg-opacity))",
                primary25: "rgba(244, 245, 246, var(--tw-bg-opacity))",
                /** Light Theme Ends */
@@ -0,0 +1,110 @@
+import React from "react";
+import { OptionProps } from "react-select";
+
+import { InstallAppButton } from "@calcom/app-store/components";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
+import type { App } from "@calcom/types/App";
+import { Button } from "@calcom/ui";
+import { Icon } from "@calcom/ui/Icon";
+import { Select } from "@calcom/ui/v2";
+
+import { QueryCell } from "@lib/QueryCell";
+
+interface AdditionalCalendarSelectorProps {
+  isLoading?: boolean;
+}
+
+const ImageOption = (optionProps: OptionProps<{ [key: string]: string; type: App["type"] }>) => {
+  const { t } = useLocale();
+  const { data } = optionProps;
+  return data.slug !== "add-new" ? (
+    <InstallAppButton
+      type={data.type}
+      render={(installProps) => {
+        return (
+          <Button {...installProps} className="w-full" color="minimal">
+            {data.image && (
+              <img className="float-left mr-3 inline h-5 w-5" src={data.image} alt={data.label} />
+            )}
+            <p>{`${t("add")} ${data.label}`}</p>
+          </Button>
+        );
+      }}
+    />
+  ) : (
+    <Button className="w-full" color="minimal" href="/apps/categories/calendar">
+      <Icon.FiPlus className="text-color mr-3 ml-1 h-4 w-4" />
+      <p>{t("install_new_calendar_app")}</p>
+    </Button>
+  );
+};
+
+const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorProps): JSX.Element | null => {
+  const { t } = useLocale();
+  const query = trpc.useQuery(["viewer.integrations", { variant: "calendar", onlyInstalled: true }]);
+
+  return (
+    <QueryCell
+      query={query}
+      success={({ data }) => {
+        const options = data.items.map((item) => ({
+          label: item.name,
+          slug: item.slug,
+          image: item.logo,
+          type: item.type,
+        }));
+        options.push({
+          label: "Add new calendars",
+          slug: "add-new",
+          image: "",
+          type: "new_other",
+        });
+        return (
+          <Select
+            name="additionalCalendar"
+            placeholder={
+              <Button className="rounded-md" StartIcon={Icon.FiPlus} color="secondary">
+                {t("add")}
+              </Button>
+            }
+            options={options}
+            isSearchable={false}
+            isLoading={isLoading}
+            components={{ Option: ImageOption }}
+            styles={{
+              menu: (defaultStyles) => ({
+                ...defaultStyles,
+                "@media only screen and (max-width: 640px)": {
+                  left: "0",
+                },
+                width: "max-content",
+                right: "0",
+              }),
+              control: (defaultStyles) => ({
+                ...defaultStyles,
+                padding: "0",
+                border: "0",
+                borderRadius: "inherit",
+              }),
+              dropdownIndicator: (defaultStyles) => ({
+                ...defaultStyles,
+                display: "none",
+              }),
+              valueContainer: (defaultStyles) => ({
+                ...defaultStyles,
+                padding: "0",
+              }),
+              placeholder: (defaultStyles) => ({
+                ...defaultStyles,
+                margin: "0",
+              }),
+            }}
+          />
+        );
+      }}
+    />
+  );
+};
+
+export default AdditionalCalendarSelector;
@@ -1,22 +1,25 @@
 import Link from "next/link";
-import React, { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import React, { useState } from "react";

 import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
 import { InstallAppButton } from "@calcom/app-store/components";
-import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
+import LicenseRequired from "@calcom/features/ee/common/components/v2/LicenseRequired";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import showToast from "@calcom/lib/notification";
 import { trpc } from "@calcom/trpc/react";
 import { App as AppType } from "@calcom/types/App";
-import Badge from "@calcom/ui/Badge";
 import { Icon } from "@calcom/ui/Icon";
+import { showToast, SkeletonText } from "@calcom/ui/v2";
 import { Button, SkeletonButton, Shell } from "@calcom/ui/v2";
+import DisconnectIntegration from "@calcom/ui/v2/modules/integrations/DisconnectIntegration";

 const Component = ({
  name,
  type,
  logo,
+  slug,
+  variant,
  body,
  categories,
  author,
@@ -33,15 +36,15 @@ const Component = ({
  images,
 }: Parameters<typeof App>[0]) => {
  const { t } = useLocale();
-  const { data: user } = trpc.useQuery(["viewer.me"]);
  const hasImages = images && images.length > 0;
+  const router = useRouter();

  const mutation = useAddAppMutation(null, {
    onSuccess: () => {
-      showToast("App successfully installed", "success");
+      showToast(t("app_successfully_installed"), "success");
    },
    onError: (error) => {
-      if (error instanceof Error) showToast(error.message || "App could not be installed", "error");
+      if (error instanceof Error) showToast(error.message || t("app_could_not_be_installed"), "error");
    },
  });

@@ -50,255 +53,224 @@ const Component = ({
    currency: "USD",
    useGrouping: false,
  }).format(price);
-  const [installedAppCount, setInstalledAppCount] = useState(0);
-  const [isLoading, setIsLoading] = useState(true);
-  useEffect(() => {
-    async function getInstalledApp(appCredentialType: string) {
-      const queryParam = new URLSearchParams();
-      queryParam.set("app-credential-type", appCredentialType);
-      try {
-        const result = await fetch(`/api/app-store/installed?${queryParam.toString()}`, {
-          method: "GET",
-          headers: {
-            "Content-Type": "application/json",
-          },
-        }).then((data) => {
-          setIsLoading(false);
-          return data;
-        });
-        if (result.status === 200) {
-          const res = await result.json();
-          setInstalledAppCount(res.count);
-        }
-      } catch (error) {
-        if (error instanceof Error) {
-          console.log(error.message);
-        }
-      }
-    }
-    getInstalledApp(type);
-  }, [type]);
+
+  const [existingCredentials, setExistingCredentials] = useState<number[]>([]);
+  const appCredentials = trpc.useQuery(["viewer.appCredentialsByType", { appType: type }], {
+    onSuccess(data) {
+      setExistingCredentials(data);
+    },
+  });
+
  const allowedMultipleInstalls = categories.indexOf("calendar") > -1;

  return (
-    <>
-      <div className="px-4 pb-3 pt-3 md:px-8 lg:px-0 lg:pt-0">
-        <Link href="/apps">
-          <a className="text-md hover:text-brand-400 inline-flex rounded-sm py-2 font-semibold  text-gray-900">
-            <Icon.FiArrowLeft className="mr-2 h-6 w-6" /> {t("app_store")}
-          </a>
-        </Link>
-      </div>
-
-      <div className="relative flex-1 flex-col items-start justify-start px-4 md:flex md:px-8 lg:flex-row lg:px-0">
-        {hasImages && (
-          <div className="flex-2 mb-4 -ml-4 -mr-4 flex w-auto snap-x snap-mandatory flex-row overflow-auto whitespace-nowrap bg-gray-100  p-4 md:mb-8 md:-ml-8 md:-mr-8 md:p-8 lg:mx-0 lg:mb-0 lg:max-w-2xl lg:flex-col lg:rounded-md">
-            {images &&
-              images.map((img) => (
-                <img
-                  key={img}
-                  src={img}
-                  alt={`Screenshot of app ${name}`}
-                  className="mr-4 h-auto max-h-80 max-w-[90%] snap-center rounded-md object-contain last:mb-0 md:max-h-min lg:mb-4 lg:mr-0  lg:max-w-full"
-                />
-              ))}
-          </div>
-        )}
-        <div
-          className={classNames(
-            "sticky top-0 -mt-4 max-w-xl flex-1 pb-12 text-sm lg:pb-0",
-            hasImages && "lg:ml-8"
-          )}>
-          <div className="mb-8 flex pt-4">
-            <header>
-              <div className="mb-4 flex items-center">
-                <img className="min-h-16 min-w-16 h-16 w-16" src={logo} alt={name} />
-                <h1 className="font-cal ml-4 text-3xl text-gray-900">{name}</h1>
-                {isProOnly && user?.plan === "FREE" ? (
-                  <Badge className="ml-2" variant="default">
-                    PRO
-                  </Badge>
-                ) : null}
-              </div>
-              <h2 className="text-sm font-medium text-gray-600">
-                <Link href={`categories/${categories[0]}`}>
-                  <a className="rounded-md bg-gray-100 p-1 text-xs capitalize text-gray-800">
-                    {categories[0]}
-                  </a>
-                </Link>{" "}
-                • {t("published_by", { author })}
-              </h2>
-            </header>
-          </div>
-          {!isLoading ? (
-            isGlobal || (installedAppCount > 0 && allowedMultipleInstalls) ? (
-              <div className="flex space-x-3">
-                <Button StartIcon={Icon.FiCheck} color="secondary" disabled>
-                  {installedAppCount > 0 ? t("active_install", { count: installedAppCount }) : t("default")}
-                </Button>
-                {!isGlobal && (
-                  <InstallAppButton
-                    type={type}
-                    isProOnly={isProOnly}
-                    render={({ useDefaultComponent, ...props }) => {
-                      if (useDefaultComponent) {
-                        props = {
-                          onClick: () => {
-                            mutation.mutate({ type });
-                          },
-                          loading: mutation.isLoading,
-                        };
-                      }
-                      return (
-                        <Button
-                          StartIcon={Icon.FiPlus}
-                          {...props}
-                          // @TODO: Overriding color and size prevent us from
-                          // having to duplicate InstallAppButton for now.
-                          color="primary"
-                          size="base"
-                          data-testid="install-app-button">
-                          {t("install_another")}
-                        </Button>
-                      );
-                    }}
-                  />
-                )}
-              </div>
-            ) : installedAppCount > 0 ? (
-              <Button color="secondary" disabled title="App already installed">
-                {t("installed")}
-              </Button>
-            ) : (
-              <InstallAppButton
-                type={type}
-                isProOnly={isProOnly}
-                render={({ useDefaultComponent, ...props }) => {
-                  if (useDefaultComponent) {
-                    props = {
-                      onClick: () => {
-                        mutation.mutate({ type });
-                      },
-                      loading: mutation.isLoading,
-                    };
-                  }
-                  return (
-                    <Button
-                      data-testid="install-app-button"
-                      {...props}
-                      // @TODO: Overriding color and size prevent us from
-                      // having to duplicate InstallAppButton for now.
-                      color="primary"
-                      size="base">
-                      {t("install_app")}
-                    </Button>
-                  );
-                }}
+    <div className="relative flex-1 flex-col items-start justify-start px-4 md:flex md:px-8 lg:flex-row lg:px-0">
+      {hasImages && (
+        <div className="flex-2 mb-4 -ml-4 -mr-4 flex min-h-[450px] w-auto snap-x snap-mandatory flex-row overflow-auto whitespace-nowrap bg-gray-100  p-4 md:mb-8 md:-ml-8 md:-mr-8 md:p-8 lg:mx-0 lg:mb-0 lg:max-w-2xl lg:flex-col lg:rounded-md">
+          {images ? (
+            images.map((img) => (
+              <img
+                key={img}
+                src={img}
+                alt={`Screenshot of app ${name}`}
+                className="mr-4 h-auto max-h-80 max-w-[90%] snap-center rounded-md object-contain last:mb-0 md:max-h-min lg:mb-4 lg:mr-0  lg:max-w-full"
              />
-            )
+            ))
          ) : (
-            <SkeletonButton className="h-10 w-24" />
+            <SkeletonText />
          )}
-          {price !== 0 && (
-            <span className="block text-right">
-              {feeType === "usage-based" ? commission + "% + " + priceInDollar + "/booking" : priceInDollar}
-              {feeType === "monthly" && "/" + t("month")}
-            </span>
-          )}
-
-          <div className="prose prose-sm mt-8 space-x-2">{body}</div>
-          <h4 className="mt-8 font-semibold text-gray-900 ">{t("pricing")}</h4>
-          <span>
-            {price === 0 ? (
-              "Free"
-            ) : (
-              <>
-                {Intl.NumberFormat("en-US", {
-                  style: "currency",
-                  currency: "USD",
-                  useGrouping: false,
-                }).format(price)}
-                {feeType === "monthly" && "/" + t("month")}
-              </>
-            )}
-          </span>
-
-          <h4 className="mt-8 mb-2 font-semibold text-gray-900 ">{t("learn_more")}</h4>
-          <ul className="prose-sm -ml-1 -mr-1 leading-5">
-            {docs && (
-              <li>
-                <a
-                  target="_blank"
-                  rel="noreferrer"
-                  className="text-sm font-normal text-black no-underline hover:underline"
-                  href={docs}>
-                  <Icon.FiBookOpen className="mr-1 -mt-1 inline h-4 w-4 text-gray-500" />
-                  {t("documentation")}
-                </a>
-              </li>
-            )}
-            {website && (
-              <li>
-                <a
-                  target="_blank"
-                  rel="noreferrer"
-                  className="font-normal text-black no-underline hover:underline"
-                  href={website}>
-                  <Icon.FiExternalLink className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
-                  {website.replace("https://", "")}
-                </a>
-              </li>
-            )}
-            {email && (
-              <li>
-                <a
-                  target="_blank"
-                  rel="noreferrer"
-                  className="font-normal text-black no-underline hover:underline"
-                  href={"mailto:" + email}>
-                  <Icon.FiMail className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
-
-                  {email}
-                </a>
-              </li>
-            )}
-            {tos && (
-              <li>
-                <a
-                  target="_blank"
-                  rel="noreferrer"
-                  className="font-normal text-black no-underline hover:underline"
-                  href={tos}>
-                  <Icon.FiFile className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
-                  {t("terms_of_service")}
-                </a>
-              </li>
-            )}
-            {privacy && (
-              <li>
-                <a
-                  target="_blank"
-                  rel="noreferrer"
-                  className="font-normal text-black no-underline hover:underline"
-                  href={privacy}>
-                  <Icon.FiShield className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
-                  {t("privacy_policy")}
-                </a>
-              </li>
-            )}
-          </ul>
-          <hr className="my-8" />
-          <span className="leading-1 block text-xs text-gray-500">
-            Every app published on the Cal.com App Store is open source and thoroughly tested via peer
-            reviews. Nevertheless, Cal.com, Inc. does not endorse or certify these apps unless they are
-            published by Cal.com. If you encounter inappropriate content or behaviour please report it.
-          </span>
-          <a className="mt-2 block text-xs text-red-500" href="mailto:help@cal.com">
-            <Icon.FiFlag className="inline h-3 w-3" /> Report App
-          </a>
        </div>
+      )}
+      <div
+        className={classNames(
+          "sticky top-0 -mt-4 max-w-xl flex-1 pb-12 text-sm lg:pb-0",
+          hasImages && "lg:ml-8"
+        )}>
+        <div className="mb-8 flex pt-4">
+          <header>
+            <div className="mb-4 flex items-center">
+              <img className="min-h-16 min-w-16 h-16 w-16" src={logo} alt={name} />
+              <h1 className="font-cal ml-4 text-3xl text-gray-900">{name}</h1>
+            </div>
+            <h2 className="text-sm font-medium text-gray-600">
+              <Link href={`categories/${categories[0]}`}>
+                <a className="rounded-md bg-gray-100 p-1 text-xs capitalize text-gray-800">{categories[0]}</a>
+              </Link>{" "}
+              • {t("published_by", { author })}
+            </h2>
+          </header>
+        </div>
+        {!appCredentials.isLoading ? (
+          isGlobal ||
+          (existingCredentials.length > 0 && allowedMultipleInstalls ? (
+            <div className="flex space-x-3">
+              <Button StartIcon={Icon.FiCheck} color="secondary" disabled>
+                {existingCredentials.length > 0
+                  ? t("active_install", { count: existingCredentials.length })
+                  : t("default")}
+              </Button>
+              {!isGlobal && (
+                <InstallAppButton
+                  type={type}
+                  isProOnly={isProOnly}
+                  render={({ useDefaultComponent, ...props }) => {
+                    if (useDefaultComponent) {
+                      props = {
+                        onClick: () => {
+                          mutation.mutate({ type, variant, slug });
+                        },
+                        loading: mutation.isLoading,
+                      };
+                    }
+                    return (
+                      <Button
+                        StartIcon={Icon.FiPlus}
+                        {...props}
+                        // @TODO: Overriding color and size prevent us from
+                        // having to duplicate InstallAppButton for now.
+                        color="primary"
+                        size="base"
+                        data-testid="install-app-button">
+                        {t("install_another")}
+                      </Button>
+                    );
+                  }}
+                />
+              )}
+            </div>
+          ) : existingCredentials.length > 0 ? (
+            <DisconnectIntegration
+              label={t("disconnect")}
+              credentialId={existingCredentials[0]}
+              onSuccess={() => {
+                router.replace("/apps/installed");
+              }}
+            />
+          ) : (
+            <InstallAppButton
+              type={type}
+              isProOnly={isProOnly}
+              render={({ useDefaultComponent, ...props }) => {
+                if (useDefaultComponent) {
+                  props = {
+                    onClick: () => {
+                      mutation.mutate({ type, variant, slug });
+                    },
+                    loading: mutation.isLoading,
+                  };
+                }
+                return (
+                  <Button
+                    data-testid="install-app-button"
+                    {...props}
+                    // @TODO: Overriding color and size prevent us from
+                    // having to duplicate InstallAppButton for now.
+                    color="primary"
+                    size="base">
+                    {t("install_app")}
+                  </Button>
+                );
+              }}
+            />
+          ))
+        ) : (
+          <SkeletonButton className="h-10 w-24" />
+        )}
+        {price !== 0 && (
+          <span className="block text-right">
+            {feeType === "usage-based" ? commission + "% + " + priceInDollar + "/booking" : priceInDollar}
+            {feeType === "monthly" && "/" + t("month")}
+          </span>
+        )}
+
+        <div className="prose prose-sm mt-8">{body}</div>
+        <h4 className="mt-8 font-semibold text-gray-900 ">{t("pricing")}</h4>
+        <span>
+          {price === 0 ? (
+            "Free"
+          ) : (
+            <>
+              {Intl.NumberFormat("en-US", {
+                style: "currency",
+                currency: "USD",
+                useGrouping: false,
+              }).format(price)}
+              {feeType === "monthly" && "/" + t("month")}
+            </>
+          )}
+        </span>
+
+        <h4 className="mt-8 mb-2 font-semibold text-gray-900 ">{t("learn_more")}</h4>
+        <ul className="prose-sm -ml-1 -mr-1 leading-5">
+          {docs && (
+            <li>
+              <a
+                target="_blank"
+                rel="noreferrer"
+                className="text-sm font-normal text-black no-underline hover:underline"
+                href={docs}>
+                <Icon.FiBookOpen className="mr-1 -mt-1 inline h-4 w-4 text-gray-500" />
+                {t("documentation")}
+              </a>
+            </li>
+          )}
+          {website && (
+            <li>
+              <a
+                target="_blank"
+                rel="noreferrer"
+                className="font-normal text-black no-underline hover:underline"
+                href={website}>
+                <Icon.FiExternalLink className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
+                {website.replace("https://", "")}
+              </a>
+            </li>
+          )}
+          {email && (
+            <li>
+              <a
+                target="_blank"
+                rel="noreferrer"
+                className="font-normal text-black no-underline hover:underline"
+                href={"mailto:" + email}>
+                <Icon.FiMail className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
+
+                {email}
+              </a>
+            </li>
+          )}
+          {tos && (
+            <li>
+              <a
+                target="_blank"
+                rel="noreferrer"
+                className="font-normal text-black no-underline hover:underline"
+                href={tos}>
+                <Icon.FiFile className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
+                {t("terms_of_service")}
+              </a>
+            </li>
+          )}
+          {privacy && (
+            <li>
+              <a
+                target="_blank"
+                rel="noreferrer"
+                className="font-normal text-black no-underline hover:underline"
+                href={privacy}>
+                <Icon.FiShield className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
+                {t("privacy_policy")}
+              </a>
+            </li>
+          )}
+        </ul>
+        <hr className="my-8" />
+        <span className="leading-1 block text-xs text-gray-500">{t("every_app_published")}</span>
+        <a className="mt-2 block text-xs text-red-500" href="mailto:help@cal.com">
+          <Icon.FiFlag className="inline h-3 w-3" /> {t("report_app")}
+        </a>
      </div>
-    </>
+    </div>
  );
 };

@@ -307,6 +279,8 @@ export default function App(props: {
  type: AppType["type"];
  isGlobal?: AppType["isGlobal"];
  logo: string;
+  slug: string;
+  variant: string;
  body: React.ReactNode;
  categories: string[];
  author: string;
@@ -323,8 +297,10 @@ export default function App(props: {
  isProOnly: AppType["isProOnly"];
  images?: string[];
 }) {
+  const { t } = useLocale();
+
  return (
-    <Shell large isPublic>
+    <Shell large isPublic heading={t("app_store")} backPath="/apps">
      {props.licenseRequired ? (
        <LicenseRequired>
          <Component {...props} />
@@ -0,0 +1,337 @@
+import { useMutation } from "@tanstack/react-query";
+import Link from "next/link";
+import { Fragment } from "react";
+
+import { InstallAppButton } from "@calcom/app-store/components";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import showToast from "@calcom/lib/notification";
+import { trpc } from "@calcom/trpc/react";
+import { Icon } from "@calcom/ui/Icon";
+import SkeletonLoader from "@calcom/ui/apps/SkeletonLoader";
+import { Alert, Button, EmptyScreen } from "@calcom/ui/v2";
+import { List } from "@calcom/ui/v2/core/List";
+import { ShellSubHeading } from "@calcom/ui/v2/core/Shell";
+import Switch from "@calcom/ui/v2/core/Switch";
+import DisconnectIntegration from "@calcom/ui/v2/modules/integrations/DisconnectIntegration";
+
+import { QueryCell } from "@lib/QueryCell";
+
+import SubHeadingTitleWithConnections from "@components/integrations/SubHeadingTitleWithConnections";
+import AdditionalCalendarSelector from "@components/v2/apps/AdditionalCalendarSelector";
+import DestinationCalendarSelector from "@components/v2/apps/DestinationCalendarSelector";
+import IntegrationListItem from "@components/v2/apps/IntegrationListItem";
+
+type Props = {
+  onChanged: () => unknown | Promise<unknown>;
+  fromOnboarding?: boolean;
+  destinationCalendarId?: string;
+};
+
+function CalendarSwitch(props: {
+  type: string;
+  externalId: string;
+  title: string;
+  defaultSelected: boolean;
+  destination?: boolean;
+}) {
+  const { t } = useLocale();
+  const utils = trpc.useContext();
+
+  const mutation = useMutation<
+    unknown,
+    unknown,
+    {
+      isOn: boolean;
+    }
+  >(
+    async ({ isOn }) => {
+      const body = {
+        integration: props.type,
+        externalId: props.externalId,
+      };
+      if (isOn) {
+        const res = await fetch("/api/availability/calendar", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(body),
+        });
+        if (!res.ok) {
+          throw new Error("Something went wrong");
+        }
+      } else {
+        const res = await fetch("/api/availability/calendar", {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(body),
+        });
+
+        if (!res.ok) {
+          throw new Error("Something went wrong");
+        }
+      }
+    },
+    {
+      async onSettled() {
+        await utils.invalidateQueries(["viewer.integrations"]);
+      },
+      onError() {
+        showToast(`Something went wrong when toggling "${props.title}""`, "error");
+      },
+    }
+  );
+  return (
+    <div className="flex py-1">
+      <Switch
+        key={props.externalId}
+        name="enabled"
+        label={props.title}
+        defaultChecked={props.defaultSelected}
+        onCheckedChange={(isOn: boolean) => {
+          mutation.mutate({ isOn });
+        }}
+      />
+      {!!props.destination && (
+        <span className="ml-4 inline-flex items-center gap-1 rounded-md bg-gray-100 px-2 py-1 text-sm font-normal text-gray-800">
+          <Icon.FiArrowLeft className="h-4 w-4" />
+          {t("adding_events_to")}
+        </span>
+      )}
+    </div>
+  );
+}
+
+function CalendarList(props: Props) {
+  const { t } = useLocale();
+  const query = trpc.useQuery(["viewer.integrations", { variant: "calendar", onlyInstalled: false }]);
+
+  return (
+    <QueryCell
+      query={query}
+      success={({ data }) => (
+        <List>
+          {data.items.map((item) => (
+            <IntegrationListItem
+              name={item.name}
+              slug={item.slug}
+              key={item.title}
+              title={item.title}
+              logo={item.logo}
+              description={item.description}
+              actions={
+                <InstallAppButton
+                  type={item.type}
+                  render={(buttonProps) => (
+                    <Button color="secondary" {...buttonProps}>
+                      {t("connect")}
+                    </Button>
+                  )}
+                  onChanged={() => props.onChanged()}
+                />
+              }
+            />
+          ))}
+        </List>
+      )}
+    />
+  );
+}
+
+// todo: @hariom extract this into packages/apps-store as "GeneralAppSettings"
+function ConnectedCalendarsList(props: Props) {
+  const { t } = useLocale();
+  const query = trpc.useQuery(["viewer.connectedCalendars"], { suspense: true });
+  const { fromOnboarding } = props;
+  return (
+    <QueryCell
+      query={query}
+      empty={() => null}
+      success={({ data }) => {
+        if (!data.connectedCalendars.length) {
+          return null;
+        }
+        return (
+          <List className="flex flex-col gap-6" noBorderTreatment>
+            {data.connectedCalendars.map((item) => (
+              <Fragment key={item.credentialId}>
+                {item.calendars ? (
+                  <IntegrationListItem
+                    slug={item.integration.slug}
+                    title={item.integration.title}
+                    logo={item.integration.logo}
+                    description={item.primary?.externalId || "No external Id"}
+                    separate={true}
+                    actions={
+                      <div className="flex w-32 justify-end">
+                        <DisconnectIntegration
+                          credentialId={item.credentialId}
+                          trashIcon
+                          onSuccess={props.onChanged}
+                          buttonProps={{ className: "border border-gray-300" }}
+                        />
+                      </div>
+                    }>
+                    <div className="border-t border-gray-200">
+                      {!fromOnboarding && (
+                        <>
+                          <p className="px-4 pt-4 text-sm text-neutral-500">
+                            {t("toggle_calendars_conflict")}
+                          </p>
+                          <ul className="space-y-2 p-4">
+                            {item.calendars.map((cal) => (
+                              <CalendarSwitch
+                                key={cal.externalId}
+                                externalId={cal.externalId}
+                                title={cal.name || "Nameless calendar"}
+                                type={item.integration.type}
+                                defaultSelected={cal.isSelected}
+                                destination={cal.externalId === props.destinationCalendarId}
+                              />
+                            ))}
+                          </ul>
+                        </>
+                      )}
+                    </div>
+                  </IntegrationListItem>
+                ) : (
+                  <Alert
+                    severity="warning"
+                    title={t("something_went_wrong")}
+                    message={
+                      <span>
+                        <Link href={"/apps/" + item.integration.slug}>{item.integration.name}</Link>:{" "}
+                        {t("calendar_error")}
+                      </span>
+                    }
+                    iconClassName="h-10 w-10 ml-2 mr-1 mt-0.5"
+                    actions={
+                      <div className="flex w-32 justify-end md:pr-1">
+                        <DisconnectIntegration
+                          credentialId={item.credentialId}
+                          trashIcon
+                          onSuccess={props.onChanged}
+                          buttonProps={{ className: "border border-gray-300" }}
+                        />
+                      </div>
+                    }
+                  />
+                )}
+              </Fragment>
+            ))}
+          </List>
+        );
+      }}
+    />
+  );
+}
+
+export function CalendarListContainer(props: { heading?: boolean; fromOnboarding?: boolean }) {
+  const { t } = useLocale();
+  const { heading = true, fromOnboarding } = props;
+  const utils = trpc.useContext();
+  const onChanged = () =>
+    Promise.allSettled([
+      utils.invalidateQueries(["viewer.integrations", { variant: "calendar", onlyInstalled: true }], {
+        exact: true,
+      }),
+      utils.invalidateQueries(["viewer.connectedCalendars"]),
+    ]);
+  const query = trpc.useQuery(["viewer.connectedCalendars"]);
+  const installedCalendars = trpc.useQuery([
+    "viewer.integrations",
+    { variant: "calendar", onlyInstalled: true },
+  ]);
+  const mutation = trpc.useMutation("viewer.setDestinationCalendar", {
+    onSuccess: () => {
+      utils.invalidateQueries(["viewer.connectedCalendars"]);
+    },
+  });
+  return (
+    <QueryCell
+      query={query}
+      customLoader={<SkeletonLoader />}
+      success={({ data }) => {
+        return (
+          <>
+            {!!data.connectedCalendars.length || !!installedCalendars.data?.items.length ? (
+              <>
+                {heading && (
+                  <div className="flex flex-col gap-6 rounded-md border border-gray-200 p-7">
+                    <ShellSubHeading
+                      title={t("calendar")}
+                      subtitle={t("installed_app_calendar_description")}
+                      className="mb-0 flex flex-wrap items-center gap-4 sm:flex-nowrap md:mb-3 md:gap-0"
+                      actions={
+                        <div className="flex flex-col xl:flex-row xl:space-x-5">
+                          {!!data.connectedCalendars.length && (
+                            <div className="flex items-center">
+                              <AdditionalCalendarSelector isLoading={mutation.isLoading} />
+                            </div>
+                          )}
+                        </div>
+                      }
+                    />
+                    <div className="flex justify-between rounded-md border border-gray-200 bg-gray-50 p-4">
+                      <div className="flex w-full flex-col items-start gap-4 md:flex-row md:items-center">
+                        <div className="relative rounded-md border border-gray-200 bg-white p-1.5">
+                          <Icon.FiCalendar className="h-8 w-8" strokeWidth="1" />
+                          <Icon.FiPlus
+                            className="absolute left-4 top-1/2 ml-0.5 mt-[1px] h-2 w-2 text-black"
+                            strokeWidth="4"
+                          />
+                        </div>
+                        <div className="md:w-6/12">
+                          <h1 className="text-sm font-semibold">{t("create_events_on")}</h1>
+                          <p className="text-sm font-normal">{t("set_calendar")}</p>
+                        </div>
+                        <div className="flex justify-end md:w-6/12">
+                          <DestinationCalendarSelector
+                            onChange={mutation.mutate}
+                            hidePlaceholder
+                            isLoading={mutation.isLoading}
+                            value={data.destinationCalendar?.externalId}
+                          />
+                        </div>
+                      </div>
+                    </div>
+                    <ConnectedCalendarsList
+                      onChanged={onChanged}
+                      fromOnboarding={fromOnboarding}
+                      destinationCalendarId={data.destinationCalendar?.externalId}
+                    />
+                  </div>
+                )}
+              </>
+            ) : fromOnboarding ? (
+              <>
+                {!!query.data?.connectedCalendars.length && (
+                  <ShellSubHeading
+                    className="mt-4"
+                    title={<SubHeadingTitleWithConnections title={t("connect_additional_calendar")} />}
+                  />
+                )}
+                <CalendarList onChanged={onChanged} />
+              </>
+            ) : (
+              <EmptyScreen
+                Icon={Icon.FiCalendar}
+                headline={t("no_category_apps", {
+                  category: t("calendar").toLowerCase(),
+                })}
+                description={t(`no_category_apps_description_calendar`)}
+                buttonRaw={
+                  <Button color="secondary" href="/apps/categories/calendar">
+                    {t(`connect_calendar_apps`)}
+                  </Button>
+                }
+              />
+            )}
+          </>
+        );
+      }}
+    />
+  );
+}
@@ -0,0 +1,149 @@
+import classNames from "classnames";
+import React, { useEffect, useState } from "react";
+import Select from "react-select";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { DestinationCalendar } from "@calcom/prisma/client";
+import { trpc } from "@calcom/trpc/react";
+
+interface Props {
+  onChange: (value: { externalId: string; integration: string }) => void;
+  isLoading?: boolean;
+  hidePlaceholder?: boolean;
+  /** The external Id of the connected calendar */
+  value: string | undefined;
+  destinationCalendar?: DestinationCalendar | null;
+}
+
+const DestinationCalendarSelector = ({
+  onChange,
+  isLoading,
+  value,
+  hidePlaceholder,
+  destinationCalendar,
+}: Props): JSX.Element | null => {
+  const { t } = useLocale();
+  const query = trpc.useQuery(["viewer.connectedCalendars"]);
+  const [selectedOption, setSelectedOption] = useState<{ value: string; label: string } | null>(null);
+
+  // Extra styles to show prefixed text in react-select
+  const content = (hidePlaceholder = false) => {
+    if (!hidePlaceholder) {
+      return {
+        alignItems: "center",
+        display: "flex",
+        ":before": {
+          content: `'${t("select_destination_calendar")}:'`,
+          display: "block",
+          marginRight: 8,
+        },
+      };
+    }
+    return {};
+  };
+
+  useEffect(() => {
+    const selected = query.data?.connectedCalendars
+      .map((connected) => connected.calendars ?? [])
+      .flat()
+      .find((cal) => cal.externalId === value);
+
+    if (selected) {
+      setSelectedOption({
+        value: `${selected.integration}:${selected.externalId}`,
+        label: `${selected.name} (${selected.externalId})` || "",
+      });
+    }
+  }, [query.data?.connectedCalendars, value]);
+
+  if (!query.data?.connectedCalendars.length) {
+    return null;
+  }
+  const options =
+    query.data.connectedCalendars.map((selectedCalendar) => ({
+      key: selectedCalendar.credentialId,
+      label: `${selectedCalendar.integration.title} (${selectedCalendar.primary?.name})`,
+      options: (selectedCalendar.calendars ?? [])
+        .filter((cal) => cal.readOnly === false)
+        .map((cal) => ({
+          label: `${cal.name} (${cal.externalId})` || "",
+          value: `${cal.integration}:${cal.externalId}`,
+        })),
+    })) ?? [];
+  const defaultCalendarSelectedString = destinationCalendar?.externalId
+    ? `(${
+        destinationCalendar.externalId.length > 15
+          ? destinationCalendar.externalId.substring(0, 15) + "..."
+          : destinationCalendar.externalId
+      })`
+    : "";
+  return (
+    <div
+      className="relative flex items-center"
+      title={`${t("select_destination_calendar")}: ${selectedOption?.label || ""}`}>
+      <Select
+        name="primarySelectedCalendar"
+        placeholder={
+          !hidePlaceholder ? (
+            `${t("select_destination_calendar")}`
+          ) : (
+            <span className="whitespace-nowrap">
+              {t("default_calendar_selected")} {defaultCalendarSelectedString}
+            </span>
+          )
+        }
+        options={options}
+        styles={{
+          placeholder: (styles) => ({ ...styles, ...content(hidePlaceholder) }),
+          singleValue: (styles) => ({ ...styles, ...content(hidePlaceholder) }),
+          option: (defaultStyles, state) => ({
+            ...defaultStyles,
+            backgroundColor: state.isSelected
+              ? state.isFocused
+                ? "var(--brand-color)"
+                : "var(--brand-color)"
+              : state.isFocused
+              ? "var(--brand-color-dark-mode)"
+              : "var(--brand-text-color)",
+          }),
+          control: (defaultStyles) => {
+            return {
+              ...defaultStyles,
+              borderRadius: "6px",
+              "@media only screen and (min-width: 640px)": {
+                ...(defaultStyles["@media only screen and (min-width: 640px)"] as object),
+                width: "100%",
+              },
+            };
+          },
+        }}
+        isSearchable={false}
+        className={classNames(
+          "block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 text-sm",
+          !hidePlaceholder && "font-medium"
+        )}
+        onChange={(option) => {
+          setSelectedOption(option);
+          if (!option) {
+            return;
+          }
+
+          /* Split only the first `:`, since Apple uses the full URL as externalId */
+          const [integration, externalId] = option.value.split(/:(.+)/);
+
+          onChange({
+            integration,
+            externalId,
+          });
+        }}
+        isLoading={isLoading}
+        value={selectedOption}
+        components={{
+          IndicatorSeparator: () => null,
+        }}
+      />
+    </div>
+  );
+};
+
+export default DestinationCalendarSelector;
@@ -0,0 +1,55 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { ReactNode, useEffect, useState } from "react";
+
+import { ListItem, ListItemText, ListItemTitle } from "@calcom/ui/v2/core/List";
+
+import classNames from "@lib/classNames";
+
+function IntegrationListItem(props: {
+  imageSrc?: string;
+  slug: string;
+  name?: string;
+  title?: string;
+  description: string;
+  actions?: ReactNode;
+  children?: ReactNode;
+  logo: string;
+  destination?: boolean;
+  separate?: boolean;
+}): JSX.Element {
+  const router = useRouter();
+  const { hl } = router.query;
+  const [highlight, setHighlight] = useState(hl === props.slug);
+  const title = props.name || props.title;
+
+  useEffect(() => {
+    const timer = setTimeout(() => setHighlight(false), 3000);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, []);
+  return (
+    <ListItem
+      expanded={!!props.children}
+      className={classNames(
+        props.separate ? "rounded-md" : "first:rounded-t-md last:rounded-b-md",
+        "my-0 flex-col border transition-colors duration-500 ",
+        highlight ? "bg-yellow-100" : ""
+      )}>
+      <div className={classNames("flex w-full flex-1 items-center space-x-2 p-4 rtl:space-x-reverse")}>
+        {props.logo && <img className="h-11 w-11" src={props.logo} alt={title} />}
+        <div className="flex-grow truncate pl-2">
+          <ListItemTitle component="h3">
+            <Link href={"/apps/" + props.slug}>{props.name || title}</Link>
+          </ListItemTitle>
+          <ListItemText component="p">{props.description}</ListItemText>
+        </div>
+        <div>{props.actions}</div>
+      </div>
+      {props.children && <div className="w-full">{props.children}</div>}
+    </ListItem>
+  );
+}
+
+export default IntegrationListItem;
@@ -0,0 +1,63 @@
+import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
+import { InstallAppButton } from "@calcom/app-store/components";
+import { classNames } from "@calcom/lib";
+import useApp from "@calcom/lib/hooks/useApp";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
+import { Icon } from "@calcom/ui/Icon";
+import { showToast } from "@calcom/ui/v2";
+import Button from "@calcom/ui/v2/core/Button";
+
+/**
+ * Use this component to allow installing an app from anywhere on the app.
+ * Use of this component requires you to remove custom InstallAppButtonComponent so that it can manage the redirection itself
+ */
+export default function OmniInstallAppButton({ appId, className }: { appId: string; className: string }) {
+  const { t } = useLocale();
+  const { data: app } = useApp(appId);
+  const utils = trpc.useContext();
+
+  const mutation = useAddAppMutation(null, {
+    onSuccess: () => {
+      //TODO: viewer.appById might be replaced with viewer.apps so that a single query needs to be invalidated.
+      utils.invalidateQueries(["viewer.appById", { appId }]);
+      utils.invalidateQueries(["viewer.apps", { extendsFeature: "EventType" }]);
+      showToast(t("app_successfully_installed"), "success");
+    },
+    onError: (error) => {
+      if (error instanceof Error) showToast(error.message || t("app_could_not_be_installed"), "error");
+    },
+  });
+
+  if (!app) {
+    return null;
+  }
+
+  return (
+    <InstallAppButton
+      type={app.type}
+      isProOnly={app.isProOnly}
+      wrapperClassName={classNames("[@media(max-width:260px)]:w-full", className)}
+      render={({ useDefaultComponent, ...props }) => {
+        if (useDefaultComponent) {
+          props = {
+            onClick: () => {
+              mutation.mutate({ type: app.type, variant: app.variant, slug: app.slug, isOmniInstall: true });
+            },
+          };
+        }
+
+        return (
+          <Button
+            loading={mutation.isLoading}
+            color="secondary"
+            className="[@media(max-width:260px)]:w-full [@media(max-width:260px)]:justify-center"
+            StartIcon={Icon.FiPlus}
+            {...props}>
+            {t("install")}
+          </Button>
+        );
+      }}
+    />
+  );
+}
@@ -0,0 +1,51 @@
+import classNames from "classnames";
+import React from "react";
+
+import { SkeletonText } from "@calcom/ui/v2";
+
+function SkeletonLoader() {
+  return (
+    <ul className="animate-pulse divide-y divide-neutral-200 rounded-md border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
+      <SkeletonItem />
+      <SkeletonItem />
+      <SkeletonItem />
+    </ul>
+  );
+}
+
+export default SkeletonLoader;
+
+function SkeletonItem() {
+  return (
+    <li className="group flex w-full items-center justify-between px-2 py-[23px] sm:px-6">
+      <div className="flex-grow truncate text-sm">
+        <div className="flex flex-col space-y-2">
+          <SkeletonText className="h-4 w-32" />
+          <SkeletonText className="h-2 w-32" />
+        </div>
+      </div>
+      <div className="mt-4 hidden flex-shrink-0 sm:mt-0 sm:ml-5 lg:flex">
+        <div className="flex justify-between space-x-2 rtl:space-x-reverse">
+          <SkeletonText className="h-6 w-12" />
+        </div>
+      </div>
+    </li>
+  );
+}
+
+export const SelectSkeletonLoader = ({ className }: { className?: string }) => {
+  return (
+    <li
+      className={classNames(
+        "group flex w-full items-center justify-between rounded-sm border border-gray-200 px-[10px] py-3",
+        className
+      )}>
+      <div className="flex-grow truncate text-sm">
+        <div className="flex justify-between">
+          <SkeletonText className="h-4 w-32" />
+          <SkeletonText className="h-4 w-4" />
+        </div>
+      </div>
+    </li>
+  );
+};
@@ -0,0 +1,36 @@
+import React from "react";
+
+import { SkeletonText } from "@calcom/ui/v2";
+
+function SkeletonLoader() {
+  return (
+    <ul className="animate-pulse divide-y divide-neutral-200 rounded-md border border-gray-200 bg-white sm:overflow-hidden">
+      <SkeletonItem />
+      <SkeletonItem />
+      <SkeletonItem />
+    </ul>
+  );
+}
+
+export default SkeletonLoader;
+
+function SkeletonItem() {
+  return (
+    <li className="group flex w-full items-center justify-between px-4 py-4 sm:px-6">
+      <div className="flex-grow truncate text-sm">
+        <div className="flex">
+          <div className="flex flex-col space-y-2">
+            <SkeletonText className="h-5 w-16" />
+            <SkeletonText className="h-4 w-32" />
+          </div>
+        </div>
+      </div>
+      <div className="mt-4 hidden flex-shrink-0 sm:mt-0 sm:ml-5 lg:flex">
+        <div className="flex justify-between space-x-2 rtl:space-x-reverse">
+          <SkeletonText className="h-6 w-16" />
+          <SkeletonText className="h-6 w-32" />
+        </div>
+      </div>
+    </li>
+  );
+}
@@ -1,4 +1,4 @@
-import { FormValues } from "pages/v2/event-types/[type]";
+import { FormValues } from "pages/event-types/[type]";
 import { Controller, useFormContext } from "react-hook-form";

 import dayjs from "@calcom/dayjs";
@@ -8,10 +8,10 @@ import { weekdayNames } from "@calcom/lib/weekday";
 import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui";
 import Button from "@calcom/ui/v2/core/Button";
-import Select from "@calcom/ui/v2/core/form/Select";
+import Select from "@calcom/ui/v2/core/form/select";
 import { SkeletonText } from "@calcom/ui/v2/core/skeleton";

-import { AvailabilitySelectSkeletonLoader } from "@components/availability/SkeletonLoader";
+import { SelectSkeletonLoader } from "@components/v2/availability/SkeletonLoader";

 type AvailabilityOption = {
  label: string;
@@ -30,7 +30,7 @@ const AvailabilitySelect = ({
 }) => {
  const { data, isLoading } = trpc.useQuery(["viewer.availability.list"]);
  if (isLoading) {
-    return <AvailabilitySelectSkeletonLoader />;
+    return <SelectSkeletonLoader />;
  }

  const schedules = data?.schedules || [];
@@ -117,7 +117,7 @@ export const AvailabilityTab = () => {
                    ))}
                  </div>
                ) : (
-                  <span className=" text-gray-500 opacity-50">{t("unavailable")}</span>
+                  <span className="text-gray-500 opacity-50 ">{t("unavailable")}</span>
                )}
              </li>
            );
@@ -1,7 +1,7 @@
 import autoAnimate from "@formkit/auto-animate";
 import { EventTypeCustomInput } from "@prisma/client/";
 import Link from "next/link";
-import { EventTypeSetupInfered, FormValues } from "pages/v2/event-types/[type]";
+import { EventTypeSetupInfered, FormValues } from "pages/event-types/[type]";
 import { useEffect, useRef, useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import short from "short-uuid";
@@ -19,6 +19,7 @@ import {
  DialogContent,
  Label,
  showToast,
+  Skeleton,
  Switch,
  TextField,
  Tooltip,
@@ -37,10 +38,11 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
  const connectedCalendarsQuery = trpc.useQuery(["viewer.connectedCalendars"]);
  const formMethods = useFormContext<FormValues>();
  const { t } = useLocale();
-  const utils = trpc.useContext();
  const [showEventNameTip, setShowEventNameTip] = useState(false);
  const [hashedLinkVisible, setHashedLinkVisible] = useState(!!eventType.hashedLink);
+  const [redirectUrlVisible, setRedirectUrlVisible] = useState(!!eventType.successRedirectUrl);
  const [hashedUrl, setHashedUrl] = useState(eventType.hashedLink?.link);
+  const [seatsInputVisible, setSeatsInputVisible] = useState(!!eventType.seatsPerTimeSlot);
  const [customInputs, setCustomInputs] = useState<EventTypeCustomInput[]>(
    eventType.customInputs.sort((a, b) => a.id - b.id) || []
  );
@@ -49,7 +51,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
  const placeholderHashedLink = `${CAL_URL}/d/${hashedUrl}/${eventType.slug}`;

  const animationRef = useRef(null);
-  const seatsEnabled = !!eventType.seatsPerTimeSlot;
+  const seatsEnabled = formMethods.getValues("seatsPerTimeSlotEnabled");

  useEffect(() => {
    animationRef.current && autoAnimate(animationRef.current);
@@ -136,8 +138,12 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
            }}
          />
          <div className="flex flex-col">
-            <Label className="text-sm font-semibold leading-none text-black">{t("additional_inputs")}</Label>
-            <p className="-mt-2 text-sm leading-normal text-gray-600">{t("additional_input_description")}</p>
+            <Skeleton as={Label} className="text-sm font-semibold leading-none text-black">
+              {t("additional_inputs")}
+            </Skeleton>
+            <Skeleton as="p" className="-mt-2 text-sm leading-normal text-gray-600">
+              {t("additional_input_description")}
+            </Skeleton>
          </div>
        </div>
        <ul className="my-4" ref={animationRef}>
@@ -182,12 +188,12 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
              fitToHeight={true}
            />
            <div className="flex flex-col">
-              <Label className="text-sm font-semibold leading-none text-black">
+              <Skeleton as={Label} className="text-sm font-semibold leading-none text-black">
                {t("requires_confirmation")}
-              </Label>
-              <p className="-mt-2 text-sm leading-normal text-gray-600">
+              </Skeleton>
+              <Skeleton as="p" className="-mt-2 text-sm leading-normal text-gray-600">
                {t("requires_confirmation_description")}
-              </p>
+              </Skeleton>
            </div>
          </div>
        )}
@@ -207,8 +213,12 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
              disabled={seatsEnabled}
            />
            <div className="flex flex-col">
-              <Label className="text-sm font-semibold leading-none text-black">{t("disable_guests")}</Label>
-              <p className="-mt-2 text-sm leading-normal text-gray-600">{t("disable_guests_description")}</p>
+              <Skeleton as={Label} className="text-sm font-semibold leading-none text-black">
+                {t("disable_guests")}
+              </Skeleton>
+              <Skeleton as="p" className="-mt-2 text-sm leading-normal text-gray-600">
+                {t("disable_guests_description")}
+              </Skeleton>
            </div>
          </div>
        )}
@@ -228,13 +238,82 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
              onCheckedChange={(e) => onChange(e)}
            />
            <div className="flex flex-col">
-              <Label className="text-sm font-semibold leading-none text-black">{t("disable_notes")}</Label>
-              <p className="-mt-2 text-sm leading-normal text-gray-600">{t("disable_notes_description")}</p>
+              <Skeleton as={Label} className="text-sm font-semibold leading-none text-black">
+                {t("disable_notes")}
+              </Skeleton>
+              <Skeleton as="p" className="-mt-2 text-sm leading-normal text-gray-600">
+                {t("disable_notes_description")}
+              </Skeleton>
            </div>
          </div>
        )}
      />
      <hr />
+      <Controller
+        name="metadata.additionalNotesRequired"
+        control={formMethods.control}
+        defaultValue={!!eventType.metadata.additionalNotesRequired}
+        render={({ field: { value, onChange } }) => (
+          <div className="flex space-x-3 ">
+            <Switch
+              name="additionalNotesRequired"
+              fitToHeight={true}
+              checked={value}
+              onCheckedChange={(e) => onChange(e)}
+            />
+            <div className="flex flex-col">
+              <Skeleton as={Label} className="text-sm font-semibold leading-none text-black">
+                {t("require_additional_notes")}
+              </Skeleton>
+              <Skeleton as="p" className="-mt-2 text-sm leading-normal text-gray-600">
+                {t("require_additional_notes_description")}
+              </Skeleton>
+            </div>
+          </div>
+        )}
+      />
+      <hr />
+      <Controller
+        name="successRedirectUrl"
+        control={formMethods.control}
+        defaultValue={hashedUrl}
+        render={({ field: { value, onChange } }) => (
+          <>
+            <div className="flex space-x-3 ">
+              <Switch
+                name="successRedirectUrlCheck"
+                fitToHeight={true}
+                defaultChecked={redirectUrlVisible}
+                onCheckedChange={(e) => {
+                  setRedirectUrlVisible(e);
+                  onChange(e ? value : "");
+                }}
+              />
+              <div className="flex flex-col">
+                <Skeleton as={Label} className="text-sm font-semibold leading-none text-black">
+                  {t("redirect_success_booking")}
+                </Skeleton>
+                <Skeleton as="p" className="-mt-2 text-sm leading-normal text-gray-600">
+                  {t("redirect_url_description")}
+                </Skeleton>
+              </div>
+            </div>
+            {redirectUrlVisible && (
+              <div className="">
+                <TextField
+                  label={t("redirect_success_booking")}
+                  placeholder={t("external_redirect_url")}
+                  required={redirectUrlVisible}
+                  type="text"
+                  defaultValue={eventType.successRedirectUrl || ""}
+                  {...formMethods.register("successRedirectUrl")}
+                />
+              </div>
+            )}
+          </>
+        )}
+      />
+      <hr />
      <Controller
        name="hashedLink"
        control={formMethods.control}
@@ -243,6 +322,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
          <>
            <div className="flex space-x-3 ">
              <Switch
+                data-testid="hashedLinkCheck"
                name="hashedLinkCheck"
                fitToHeight={true}
                defaultChecked={!!value}
@@ -252,8 +332,12 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
                }}
              />
              <div className="flex flex-col">
-                <Label className="text-sm font-semibold leading-none text-black">{t("private_link")}</Label>
-                <p className="-mt-2 text-sm leading-normal text-gray-600">{t("private_link_description")}</p>
+                <Skeleton as={Label} className="text-sm font-semibold leading-none text-black">
+                  {t("private_link")}
+                </Skeleton>
+                <Skeleton as="p" className="-mt-2 text-sm leading-normal text-gray-600">
+                  {t("private_link_description")}
+                </Skeleton>
              </div>
            </div>

@@ -292,6 +376,63 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
          </>
        )}
      />
+      <hr />
+      <Controller
+        name="seatsPerTimeSlotEnabled"
+        control={formMethods.control}
+        defaultValue={!!eventType.seatsPerTimeSlot}
+        render={({ field: { value, onChange } }) => (
+          <div className="flex space-x-3">
+            <Switch
+              name="seatsPerTimeSlotEnabled"
+              checked={value}
+              onCheckedChange={(e) => {
+                setSeatsInputVisible(e);
+                // Enabling seats will disable guests and requiring confimation until fully supported
+                if (e) {
+                  formMethods.setValue("disableGuests", true);
+                  formMethods.setValue("requiresConfirmation", false);
+                  formMethods.setValue("seatsPerTimeSlot", 2);
+                } else {
+                  formMethods.setValue("seatsPerTimeSlot", null);
+                }
+                onChange(e);
+              }}
+              fitToHeight={true}
+            />
+            <div className="flex flex-col">
+              <Skeleton as={Label} className="text-sm font-semibold leading-none text-black">
+                {t("offer_seats")}
+              </Skeleton>
+              <Skeleton as="p" className="-mt-2 text-sm leading-normal text-gray-600">
+                {t("offer_seats_description")}
+              </Skeleton>
+            </div>
+          </div>
+        )}
+      />
+      {seatsInputVisible && (
+        <Controller
+          name="seatsPerTimeSlot"
+          control={formMethods.control}
+          defaultValue={eventType.seatsPerTimeSlot}
+          render={({ field: { value, onChange } }) => (
+            <div className="">
+              <TextField
+                required
+                name="seatsPerTimeSlot"
+                label={t("number_of_seats")}
+                type="number"
+                defaultValue={value || 2}
+                addOnSuffix={<>{t("seats")}</>}
+                onChange={(e) => {
+                  onChange(Number(e.target.value));
+                }}
+              />
+            </div>
+          )}
+        />
+      )}
      {showEventNameTip && (
        <Dialog open={showEventNameTip} onOpenChange={setShowEventNameTip}>
          <DialogContent
@@ -1,208 +1,134 @@
-import { EventTypeSetupInfered, FormValues } from "pages/v2/event-types/[type]";
-import React, { useState } from "react";
+import { EventTypeSetupInfered, FormValues } from "pages/event-types/[type]";
+import React from "react";
 import { useFormContext } from "react-hook-form";
-import { Controller } from "react-hook-form";
-import { FormattedNumber, IntlProvider } from "react-intl";

-import { SelectGifInput } from "@calcom/app-store/giphy/components";
-import RainbowInstallForm from "@calcom/app-store/rainbow/components/RainbowInstallForm";
+import EventTypeAppContext, { GetAppData, SetAppData } from "@calcom/app-store/EventTypeAppContext";
+import { EventTypeAddonMap } from "@calcom/app-store/apps.browser.generated";
+import { EventTypeAppCardComponentProps } from "@calcom/app-store/types";
+import { EventTypeAppsList } from "@calcom/app-store/utils";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui";
-import { Alert, Button, EmptyScreen, Select, Switch, TextField } from "@calcom/ui/v2";
+import ErrorBoundary from "@calcom/ui/ErrorBoundary";
+import { Button, EmptyScreen } from "@calcom/ui/v2";

-const AppCard = ({
-  logo,
-  name,
-  description,
-  switchOnClick,
-  switchChecked,
-  children,
-}: {
-  logo: string;
-  name: string;
-  description: React.ReactNode;
-  switchChecked?: boolean;
-  switchOnClick?: (e: boolean) => void;
-  children?: React.ReactNode;
-}) => {
-  return (
-    <div className="mb-4 rounded-md border border-gray-200 p-8">
-      <div className="mb-6 flex w-full">
-        <img src={logo} alt={name} className="mr-3 h-auto w-[42px] rounded-sm" />
-        <div className="flex flex-col">
-          <span className="font-semibold leading-none text-black">{name}</span>
-          <p className="pt-2 text-sm font-normal text-gray-600">{description}</p>
-        </div>
-        <div className="ml-auto">
-          <Switch onCheckedChange={switchOnClick} checked={switchChecked} />
-        </div>
-      </div>
-      {children}
-    </div>
-  );
-};
+type EventType = Pick<EventTypeSetupInfered, "eventType">["eventType"] &
+  EventTypeAppCardComponentProps["eventType"];

-export const EventAppsTab = ({
-  hasPaymentIntegration,
-  currency,
+function AppCardWrapper({
+  app,
  eventType,
-  hasGiphyIntegration,
-  hasRainbowIntegration,
-}: Pick<
-  EventTypeSetupInfered,
-  "eventType" | "hasPaymentIntegration" | "hasGiphyIntegration" | "hasRainbowIntegration" | "currency"
->) => {
-  const formMethods = useFormContext<FormValues>();
-  const [showGifSelection, setShowGifSelection] = useState(
-    hasGiphyIntegration && !!eventType.metadata["giphyThankYouPage"]
-  );
-  const [showRainbowSection, setShowRainbowSection] = useState(
-    hasRainbowIntegration &&
-      !!eventType.metadata["blockchainId"] &&
-      !!eventType.metadata["smartContractAddress"]
-  );
-  const [requirePayment, setRequirePayment] = useState(eventType.price > 0);
-  const recurringEventDefined = eventType.recurringEvent?.count !== undefined;
+  getAppData,
+  setAppData,
+}: {
+  app: inferQueryOutput<"viewer.apps">[number];
+  eventType: EventType;
+  getAppData: GetAppData;
+  setAppData: SetAppData;
+}) {
+  const dirName = app.slug === "stripe" ? "stripepayment" : app.slug;
+  const Component = EventTypeAddonMap[dirName as keyof typeof EventTypeAddonMap];

-  const getCurrencySymbol = (locale: string, currency: string) =>
-    (0)
-      .toLocaleString(locale, {
-        style: "currency",
-        currency,
-        minimumFractionDigits: 0,
-        maximumFractionDigits: 0,
-      })
-      .replace(/\d/g, "")
-      .trim();
-
-  const { t } = useLocale();
-
-  const installedApps = [hasPaymentIntegration, hasGiphyIntegration].filter(Boolean).length;
-
-  if (installedApps === 0) {
-    return (
-      <div className="pt-4 before:border-0">
-        <EmptyScreen
-          Icon={Icon.FiGrid}
-          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>
-          }
-        />
-      </div>
-    );
+  if (!Component) {
+    throw new Error('No component found for "' + dirName + '"');
  }
  return (
-    <div className="pt-4 before:border-0">
-      {/* TODO:Strip isnt fully setup yet  */}
-      {hasPaymentIntegration && (
-        <AppCard
-          name="Stripe"
-          switchChecked={requirePayment}
-          switchOnClick={(e) => {
-            if (!e) {
-              formMethods.setValue("price", 0);
-              setRequirePayment(false);
-            } else {
-              setRequirePayment(true);
-            }
-          }}
-          description={
-            <>
-              <div className="">
-                {t("require_payment")} (0.5% +{" "}
-                <IntlProvider locale="en">
-                  <FormattedNumber value={0.1} style="currency" currency={currency} />
-                </IntlProvider>{" "}
-                {t("commission_per_transaction")})
-              </div>
-            </>
-          }
-          logo="/api/app-store/stripepayment/icon.svg">
-          <>
-            {recurringEventDefined ? (
-              <Alert severity="warning" title={t("warning_recurring_event_payment")} />
-            ) : (
-              requirePayment && (
-                <div className="block items-center sm:flex">
-                  <Controller
-                    defaultValue={eventType.price}
-                    control={formMethods.control}
-                    name="price"
-                    render={({ field }) => (
-                      <TextField
-                        label=""
-                        addOnLeading={<>{getCurrencySymbol("en", currency)}</>}
-                        {...field}
-                        step="0.01"
-                        min="0.5"
-                        type="number"
-                        required
-                        className="block w-full rounded-sm border-gray-300 pl-2 pr-12 text-sm"
-                        placeholder="Price"
-                        onChange={(e) => {
-                          field.onChange(e.target.valueAsNumber * 100);
-                        }}
-                        value={field.value > 0 ? field.value / 100 : undefined}
-                      />
-                    )}
-                  />
-                </div>
-              )
-            )}
-          </>
-        </AppCard>
-      )}
-      {hasGiphyIntegration && (
-        <AppCard
-          name="Giphy"
-          description={t("confirmation_page_gif")}
-          logo="/api/app-store/giphy/icon.svg"
-          switchOnClick={(e) => {
-            if (!e) {
-              setShowGifSelection(false);
-              formMethods.setValue("giphyThankYouPage", "");
-            } else {
-              setShowGifSelection(true);
-            }
-          }}
-          switchChecked={showGifSelection}>
-          {showGifSelection && (
-            <SelectGifInput
-              defaultValue={eventType.metadata["giphyThankYouPage"] as string}
-              onChange={(url: string) => {
-                formMethods.setValue("giphyThankYouPage", url);
-              }}
-            />
-          )}
-        </AppCard>
-      )}
-      {hasRainbowIntegration && (
-        <AppCard
-          name="Rainbow"
-          description={t("confirmation_page_rainbow")}
-          logo="/api/app-store/rainbow/icon.svg"
-          switchOnClick={(e) => {
-            if (!e) {
-              formMethods.setValue("blockchainId", 1);
-              formMethods.setValue("smartContractAddress", "");
-            }
+    <ErrorBoundary message={`There is some problem with ${app.name} App`}>
+      <EventTypeAppContext.Provider value={[getAppData, setAppData]}>
+        <Component key={app.slug} app={app} eventType={eventType} />
+      </EventTypeAppContext.Provider>
+    </ErrorBoundary>
+  );
+}

-            setShowRainbowSection(e);
-          }}
-          switchChecked={showRainbowSection}>
-          {showRainbowSection && (
-            <RainbowInstallForm
-              formMethods={formMethods}
-              blockchainId={(eventType.metadata.blockchainId as number) || 1}
-              smartContractAddress={(eventType.metadata.smartContractAddress as string) || ""}
+export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
+  const { t } = useLocale();
+  const { data: eventTypeApps, isLoading } = trpc.useQuery([
+    "viewer.apps",
+    {
+      extendsFeature: "EventType",
+    },
+  ]);
+  const methods = useFormContext<FormValues>();
+  const installedApps = eventTypeApps?.filter((app) => app.credentials.length);
+  const notInstalledApps = eventTypeApps?.filter((app) => !app.credentials.length);
+  const allAppsData = methods.watch("metadata")?.apps || {};
+
+  const setAllAppsData = (_allAppsData: typeof allAppsData) => {
+    methods.setValue("metadata", {
+      ...methods.getValues("metadata"),
+      apps: _allAppsData,
+    });
+  };
+
+  const getAppDataGetter = (appId: EventTypeAppsList): GetAppData => {
+    return function (key) {
+      const appData = allAppsData[appId as keyof typeof allAppsData] || {};
+      if (key) {
+        return appData[key as keyof typeof appData];
+      }
+      return appData;
+    };
+  };
+
+  const getAppDataSetter = (appId: EventTypeAppsList): SetAppData => {
+    return function (key, value) {
+      // Always get latest data available in Form because consequent calls to setData would update the Form but not allAppsData(it would update during next render)
+      const allAppsDataFromForm = methods.getValues("metadata")?.apps || {};
+      const appData = allAppsDataFromForm[appId];
+      setAllAppsData({
+        ...allAppsDataFromForm,
+        [appId]: {
+          ...appData,
+          [key]: value,
+        },
+      });
+    };
+  };
+
+  return (
+    <>
+      <div>
+        <div className="before:border-0">
+          {!isLoading && !installedApps?.length ? (
+            <EmptyScreen
+              Icon={Icon.FiGrid}
+              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>
+              }
            />
-          )}
-        </AppCard>
-      )}
-    </div>
+          ) : null}
+          {installedApps?.map((app) => (
+            <AppCardWrapper
+              getAppData={getAppDataGetter(app.slug as EventTypeAppsList)}
+              setAppData={getAppDataSetter(app.slug as EventTypeAppsList)}
+              key={app.slug}
+              app={app}
+              eventType={eventType}
+            />
+          ))}
+        </div>
+      </div>
+      <div>
+        {!isLoading && notInstalledApps?.length ? (
+          <h2 className="mt-0 mb-2 text-lg font-semibold text-gray-900">Available Apps</h2>
+        ) : null}
+        <div className="before:border-0">
+          {notInstalledApps?.map((app) => (
+            <AppCardWrapper
+              getAppData={getAppDataGetter(app.slug as EventTypeAppsList)}
+              setAppData={getAppDataSetter(app.slug as EventTypeAppsList)}
+              key={app.slug}
+              app={app}
+              eventType={eventType}
+            />
+          ))}
+        </div>
+      </div>
+    </>
  );
 };
@@ -1,19 +1,21 @@
+import autoAnimate from "@formkit/auto-animate";
 import * as RadioGroup from "@radix-ui/react-radio-group";
-import { EventTypeSetupInfered, FormValues } from "pages/v2/event-types/[type]";
-import { useState } from "react";
+import { EventTypeSetupInfered, FormValues } from "pages/event-types/[type]";
+import { useEffect, useRef, useState } from "react";
 import { useFormContext, Controller, useWatch } from "react-hook-form";

 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { PeriodType } from "@calcom/prisma/client";
-import { Select, Switch, Label } from "@calcom/ui/v2";
+import type { BookingLimit } from "@calcom/types/Calendar";
+import { Icon } from "@calcom/ui";
+import { Select, Switch, Label, Input, MinutesField, Button } from "@calcom/ui/v2";
 import DateRangePicker from "@calcom/ui/v2/core/form/date-range-picker/DateRangePicker";

 export const EventLimitsTab = (props: Pick<EventTypeSetupInfered, "eventType">) => {
  const { t } = useLocale();
  const formMethods = useFormContext<FormValues>();
  const { eventType } = props;
-
  const PERIOD_TYPES = [
    {
      type: "ROLLING" as const,
@@ -110,19 +112,29 @@ export const EventLimitsTab = (props: Pick<EventTypeSetupInfered, "eventType">)
            }}
          />
        </div>
+      </div>
+      <div className="flex flex-col space-y-4 pt-4 lg:flex-row lg:space-y-0 lg:space-x-4">
        <div className="w-full">
-          <Label htmlFor="minimumBookingNotice">{t("minimum_booking_notice")} </Label>
+          <MinutesField
+            required
+            label={t("minimum_booking_notice")}
+            type="number"
+            placeholder="120"
+            {...formMethods.register("minimumBookingNotice", { valueAsNumber: true })}
+          />
+        </div>
+        <div className="w-full">
+          <Label htmlFor="slotInterval">{t("slot_interval")} </Label>
          <Controller
-            name="minimumBookingNotice"
+            name="slotInterval"
            control={formMethods.control}
-            defaultValue={eventType.minimumBookingNotice || 0}
-            render={({ field: { onChange, value } }) => {
-              const minimumBookingOptions = [
+            render={() => {
+              const slotIntervalOptions = [
                {
-                  label: t("event_buffer_default"),
-                  value: 0,
+                  label: t("slot_interval_default"),
+                  value: -1,
                },
-                ...[5, 10, 15, 20, 30, 45, 60, 90, 120].map((minutes) => ({
+                ...[5, 10, 15, 20, 30, 45, 60].map((minutes) => ({
                  label: minutes + " " + t("minutes"),
                  value: minutes,
                })),
@@ -131,20 +143,63 @@ export const EventLimitsTab = (props: Pick<EventTypeSetupInfered, "eventType">)
                <Select
                  isSearchable={false}
                  onChange={(val) => {
-                    if (val) onChange(val.value);
+                    formMethods.setValue("slotInterval", val && (val.value || 0) > 0 ? val.value : null);
                  }}
                  defaultValue={
-                    minimumBookingOptions.find((option) => option.value === value) || minimumBookingOptions[0]
+                    slotIntervalOptions.find((option) => option.value === eventType.slotInterval) ||
+                    slotIntervalOptions[0]
                  }
-                  options={minimumBookingOptions}
+                  options={slotIntervalOptions}
                />
              );
            }}
          />
        </div>
      </div>
+
      <hr className="my-8" />
-      <div className="">
+
+      <div className="flex flex-col space-y-4 lg:flex-row lg:space-y-0 lg:space-x-4">
+        <fieldset className="block flex-col sm:flex">
+          <div className="flex space-x-3">
+            <Controller
+              name="bookingLimits"
+              control={formMethods.control}
+              render={({ field: { value } }) => (
+                <Switch
+                  fitToHeight={true}
+                  checked={Object.keys(value ?? {}).length > 0}
+                  onCheckedChange={(active) => {
+                    if (active) {
+                      formMethods.setValue("bookingLimits", {
+                        PER_DAY: 1,
+                      });
+                    } else {
+                      formMethods.setValue("bookingLimits", undefined);
+                    }
+                  }}
+                />
+              )}
+            />
+
+            <div className="">
+              <Label className="text-sm font-semibold leading-none text-black">
+                {t("limit_booking_frequency")}
+              </Label>
+              <p className="-mt-2 text-sm leading-normal text-gray-600">
+                {t("limit_booking_frequency_description")}
+              </p>
+            </div>
+          </div>
+          <div className="mt-4 lg:ml-14">
+            <BookingLimits />
+          </div>
+        </fieldset>
+      </div>
+
+      <hr className="my-8" />
+
+      <div className="flex flex-col space-y-4 lg:flex-row lg:space-y-0 lg:space-x-4">
        <fieldset className="block flex-col sm:flex">
          <div className="flex space-x-3">
            <Controller
@@ -196,8 +251,8 @@ export const EventLimitsTab = (props: Pick<EventTypeSetupInfered, "eventType">)
                        </RadioGroup.Item>
                        {period.prefix ? <span>{period.prefix}&nbsp;</span> : null}
                        {period.type === "ROLLING" && (
-                          <div className="flex ">
-                            <input
+                          <div className="flex h-9">
+                            <Input
                              type="number"
                              className="block w-16 rounded-md border-gray-300 py-3 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
                              placeholder="30"
@@ -206,7 +261,7 @@ export const EventLimitsTab = (props: Pick<EventTypeSetupInfered, "eventType">)
                            />
                            <select
                              id=""
-                              className="block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-sm focus:outline-none"
+                              className="block h-9 w-full rounded-md border-gray-300 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>
@@ -250,3 +305,130 @@ export const EventLimitsTab = (props: Pick<EventTypeSetupInfered, "eventType">)
    </div>
  );
 };
+
+const validationOrderKeys = ["PER_DAY", "PER_WEEK", "PER_MONTH", "PER_YEAR"];
+type BookingLimitsKey = keyof BookingLimit;
+const BookingLimits = () => {
+  const { watch, setValue, control } = useFormContext<FormValues>();
+  const watchBookingLimits = watch("bookingLimits");
+  const animateRef = useRef(null);
+  const { t } = useLocale();
+
+  useEffect(() => {
+    animateRef.current && autoAnimate(animateRef.current);
+  }, [animateRef]);
+
+  const BOOKING_LIMIT_OPTIONS: {
+    value: keyof BookingLimit;
+    label: string;
+  }[] = [
+    {
+      value: "PER_DAY",
+      label: "Per Day",
+    },
+    {
+      value: "PER_WEEK",
+      label: "Per Week",
+    },
+    {
+      value: "PER_MONTH",
+      label: "Per Month",
+    },
+    {
+      value: "PER_YEAR",
+      label: "Per Year",
+    },
+  ];
+
+  return (
+    <Controller
+      name="bookingLimits"
+      control={control}
+      render={({ field: { value, onChange } }) => {
+        const currentBookingLimits = value;
+        return (
+          <ul ref={animateRef}>
+            {currentBookingLimits &&
+              watchBookingLimits &&
+              Object.entries(currentBookingLimits)
+                .sort(([limitkeyA], [limitKeyB]) => {
+                  return (
+                    validationOrderKeys.indexOf(limitkeyA as BookingLimitsKey) -
+                    validationOrderKeys.indexOf(limitKeyB as BookingLimitsKey)
+                  );
+                })
+                .map(([key, bookingAmount]) => {
+                  const bookingLimitKey = key as BookingLimitsKey;
+                  return (
+                    <div className="mb-2 flex items-center space-x-2 text-sm" key={bookingLimitKey}>
+                      <Input
+                        id={`${bookingLimitKey}-limit`}
+                        type="number"
+                        className="mb-0 block w-16 rounded-md border-gray-300 text-sm  [appearance:textfield]"
+                        placeholder="1"
+                        min={1}
+                        defaultValue={bookingAmount}
+                        onChange={(e) => {
+                          const val = e.target.value;
+                          setValue(`bookingLimits.${bookingLimitKey}`, parseInt(val));
+                        }}
+                      />
+                      <Select
+                        options={BOOKING_LIMIT_OPTIONS.filter(
+                          (option) => !Object.keys(currentBookingLimits).includes(option.value)
+                        )}
+                        isSearchable={false}
+                        defaultValue={BOOKING_LIMIT_OPTIONS.find((option) => option.value === key)}
+                        onChange={(val) => {
+                          const current = currentBookingLimits;
+                          // Removes limit from previous selected value (eg when changed from per_week to per_month, we unset per_week here)
+                          delete current[bookingLimitKey];
+                          const newData = {
+                            ...current,
+                            // Set limit to new selected value (in the example above this means we set the limit to per_week here).
+                            [val?.value as BookingLimitsKey]: watchBookingLimits[bookingLimitKey],
+                          };
+                          onChange(newData);
+                        }}
+                      />
+                      <Button
+                        size="icon"
+                        StartIcon={Icon.FiTrash}
+                        color="destructive"
+                        onClick={() => {
+                          const current = currentBookingLimits;
+                          delete current[key as BookingLimitsKey];
+                          onChange(current);
+                        }}
+                      />
+                    </div>
+                  );
+                })}
+            {currentBookingLimits && Object.keys(currentBookingLimits).length <= 3 && (
+              <Button
+                color="minimal"
+                StartIcon={Icon.FiPlus}
+                onClick={() => {
+                  if (!currentBookingLimits || !watchBookingLimits) return;
+                  const currentKeys = Object.keys(watchBookingLimits);
+
+                  const rest = Object.values(BOOKING_LIMIT_OPTIONS).filter(
+                    (option) => !currentKeys.includes(option.value)
+                  );
+                  if (!rest || !currentKeys) return;
+                  //currentBookingLimits is always defined so can be casted
+
+                  setValue("bookingLimits", {
+                    ...watchBookingLimits,
+                    [rest[0].value]: undefined,
+                  });
+                }}>
+                {t("add_limit")}
+              </Button>
+            )}
+          </ul>
+        );
+      }}
+    />
+  );
+};
@@ -1,25 +1,18 @@
-import { EventTypeSetupInfered, FormValues } from "pages/v2/event-types/[type]";
+import { EventTypeSetupInfered } from "pages/event-types/[type]";
 import { useState } from "react";
-import { useFormContext } from "react-hook-form";
+
+import getStripeAppData from "@calcom/lib/getStripeAppData";

 import RecurringEventController from "./RecurringEventController";

-export const EventRecurringTab = ({
-  eventType,
-  hasPaymentIntegration,
-}: Pick<EventTypeSetupInfered, "eventType" | "hasPaymentIntegration">) => {
-  const requirePayment = eventType.price > 0;
-  const [recurringEventDefined, setRecurringEventDefined] = useState(
-    eventType.recurringEvent?.count !== undefined
-  );
+export const EventRecurringTab = ({ eventType }: Pick<EventTypeSetupInfered, "eventType">) => {
+  const stripeAppData = getStripeAppData(eventType);
+
+  const requirePayment = stripeAppData.price > 0;

  return (
    <div className="">
-      <RecurringEventController
-        paymentEnabled={hasPaymentIntegration && requirePayment}
-        onRecurringEventDefined={setRecurringEventDefined}
-        recurringEvent={eventType.recurringEvent}
-      />
+      <RecurringEventController paymentEnabled={requirePayment} recurringEvent={eventType.recurringEvent} />
    </div>
  );
 };
@@ -1,7 +1,7 @@
 import autoAnimate from "@formkit/auto-animate";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { isValidPhoneNumber } from "libphonenumber-js";
-import { EventTypeSetupInfered, FormValues } from "pages/v2/event-types/[type]";
+import { EventTypeSetupInfered, FormValues } from "pages/event-types/[type]";
 import { useEffect, useRef, useState } from "react";
 import { Controller, useForm, useFormContext } from "react-hook-form";
 import { z } from "zod";
@@ -10,7 +10,7 @@ import { getEventLocationType, EventLocationType } from "@calcom/app-store/locat
 import { CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Icon } from "@calcom/ui/Icon";
-import { Select, Label, TextField, Button } from "@calcom/ui/v2";
+import { Select, Label, TextField, Button, Skeleton } from "@calcom/ui/v2";

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

@@ -191,7 +191,6 @@ export const EventSetupTab = (
          {...formMethods.register("title")}
        />
        <TextField
-          required
          label={t("description")}
          placeholder={t("quick_video_meeting")}
          defaultValue={eventType.description ?? ""}
@@ -223,7 +222,9 @@ export const EventSetupTab = (
          }}
        />
        <div>
-          <Label>{t("location")}</Label>
+          <Skeleton as={Label} loadingClassName="w-16">
+            {t("location")}
+          </Skeleton>
          <Controller
            name="locations"
            control={formMethods.control}
@@ -1,5 +1,5 @@
 import { SchedulingType } from "@prisma/client/";
-import { EventTypeSetupInfered, FormValues } from "pages/v2/event-types/[type]";
+import { EventTypeSetupInfered, FormValues } from "pages/event-types/[type]";
 import { useMemo } from "react";
 import { Controller, useFormContext } from "react-hook-form";

@@ -1,6 +1,7 @@
+import { TFunction } from "next-i18next";
 import { useRouter } from "next/router";
-import { EventTypeSetupInfered, FormValues } from "pages/v2/event-types/[type]";
-import { useEffect, useMemo, useState } from "react";
+import { EventTypeSetupInfered, FormValues } from "pages/event-types/[type]";
+import { useMemo, useState } from "react";
 import { Loader } from "react-feather";
 import { UseFormReturn } from "react-hook-form";

@@ -9,19 +10,18 @@ import { CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HttpError } from "@calcom/lib/http-error";
 import { trpc, TRPCClientError } from "@calcom/trpc/react";
-import ConfirmationDialogContent from "@calcom/ui/ConfirmationDialogContent";
 import { Icon } from "@calcom/ui/Icon";
 import {
  Button,
  ButtonGroup,
-  Tooltip,
-  showToast,
-  VerticalTabItemProps,
-  VerticalTabs,
  HorizontalTabs,
-  Switch,
  Label,
+  showToast,
+  Switch,
+  Tooltip,
+  VerticalTabs,
 } from "@calcom/ui/v2";
+import ConfirmationDialogContent from "@calcom/ui/v2/core/ConfirmationDialogContent";
 import { Dialog } from "@calcom/ui/v2/core/Dialog";
 import Dropdown, {
  DropdownMenuContent,
@@ -30,8 +30,10 @@ import Dropdown, {
 } from "@calcom/ui/v2/core/Dropdown";
 import Shell from "@calcom/ui/v2/core/Shell";
 import VerticalDivider from "@calcom/ui/v2/core/VerticalDivider";
+import { Skeleton } from "@calcom/ui/v2/core/skeleton";

 import { ClientSuspense } from "@components/ClientSuspense";
+import { EmbedButton, EmbedDialog } from "@components/Embed";

 type Props = {
  children: React.ReactNode;
@@ -40,10 +42,66 @@ type Props = {
  team: EventTypeSetupInfered["team"];
  disableBorder?: boolean;
  enabledAppsNumber: number;
+  installedAppsNumber: number;
  enabledWorkflowsNumber: number;
  formMethods: UseFormReturn<FormValues>;
 };

+function getNavigation(props: {
+  t: TFunction;
+  eventType: Props["eventType"];
+  enabledAppsNumber: number;
+  enabledWorkflowsNumber: number;
+  installedAppsNumber: number;
+}) {
+  const { eventType, t, enabledAppsNumber, installedAppsNumber, enabledWorkflowsNumber } = props;
+  return [
+    {
+      name: "event_setup_tab_title",
+      href: `/event-types/${eventType.id}?tabName=setup`,
+      icon: Icon.FiLink,
+      info: `${eventType.length} Mins`, // TODO: Get this from props
+    },
+    {
+      name: "availability",
+      href: `/event-types/${eventType.id}?tabName=availability`,
+      icon: Icon.FiCalendar,
+      info: `Working Hours`, // TODO: Get this from props
+    },
+    {
+      name: "event_limit_tab_title",
+      href: `/event-types/${eventType.id}?tabName=limits`,
+      icon: Icon.FiClock,
+      info: `event_limit_tab_description`,
+    },
+    {
+      name: "event_advanced_tab_title",
+      href: `/event-types/${eventType.id}?tabName=advanced`,
+      icon: Icon.FiSliders,
+      info: `event_advanced_tab_description`,
+    },
+    {
+      name: "recurring",
+      href: `/event-types/${eventType.id}?tabName=recurring`,
+      icon: Icon.FiRepeat,
+      info: `recurring_event_tab_description`,
+    },
+    {
+      name: "apps",
+      href: `/event-types/${eventType.id}?tabName=apps`,
+      icon: Icon.FiGrid,
+      //TODO: Handle proper translation with count handling
+      info: `${installedAppsNumber} apps, ${enabledAppsNumber} ${t("active")}`,
+    },
+    {
+      name: "workflows",
+      href: `/event-types/${eventType.id}?tabName=workflows`,
+      icon: Icon.FiZap,
+      info: `${enabledWorkflowsNumber} ${t("active")}`,
+    },
+  ];
+}
+
 function EventTypeSingleLayout({
  children,
  eventType,
@@ -51,12 +109,13 @@ function EventTypeSingleLayout({
  team,
  disableBorder,
  enabledAppsNumber,
+  installedAppsNumber,
  enabledWorkflowsNumber,
  formMethods,
 }: Props) {
  const utils = trpc.useContext();
-  const router = useRouter();
  const { t } = useLocale();
+  const router = useRouter();
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);

  const hasPermsToDelete = currentUserMembership?.role !== "MEMBER" || !currentUserMembership;
@@ -65,6 +124,7 @@ function EventTypeSingleLayout({
    onSuccess: async () => {
      await utils.invalidateQueries(["viewer.eventTypes"]);
      showToast(t("event_type_deleted_successfully"), "success");
+      await router.push("/event-types");
      setDeleteDialogOpen(false);
    },
    onError: (err) => {
@@ -80,89 +140,45 @@ function EventTypeSingleLayout({

  // Define tab navigation here
  const EventTypeTabs = useMemo(() => {
-    const navigation = [
-      {
-        name: "event_setup_tab_title",
-        tabName: "setup",
-        icon: Icon.FiLink,
-        info: `${eventType.length} Mins`, // TODO: Get this from props
-      },
-      {
-        name: "availability",
-        tabName: "availability",
-        icon: Icon.FiCalendar,
-        info: `Working Hours`, // TODO: Get this from props
-      },
-      {
-        name: "event_limit_tab_title",
-        tabName: "limits",
-        icon: Icon.FiClock,
-        info: `event_limit_tab_description`,
-      },
-      {
-        name: "event_advanced_tab_title",
-        tabName: "advanced",
-        icon: Icon.FiSliders,
-        info: `event_advanced_tab_description`,
-      },
-      {
-        name: "recurring",
-        tabName: "recurring",
-        icon: Icon.FiRepeat,
-        info: `recurring_event_tab_description`,
-      },
-      {
-        name: "apps",
-        tabName: "apps",
-        icon: Icon.FiGrid,
-        info: `${enabledAppsNumber} ${t("active")}`,
-      },
-      {
-        name: "workflows",
-        tabName: "workflows",
-        icon: Icon.FiZap,
-        info: `${enabledWorkflowsNumber} ${t("active")}`,
-      },
-    ] as VerticalTabItemProps[];
-
+    const navigation = getNavigation({
+      t,
+      eventType,
+      enabledAppsNumber,
+      installedAppsNumber,
+      enabledWorkflowsNumber,
+    });
    // If there is a team put this navigation item within the tabs
    if (team)
      navigation.splice(2, 0, {
        name: "scheduling_type",
-        tabName: "team",
+        href: `/event-types/${eventType.id}?tabName=team`,
        icon: Icon.FiUsers,
        info: eventType.schedulingType === "COLLECTIVE" ? "collective" : "round_robin",
      });
    return navigation;
-  }, [eventType, enabledAppsNumber, team]);
-
-  useEffect(() => {
-    // Default to the first in the list
-    if (!router.query.tabName) {
-      router.push({
-        query: {
-          ...router.query,
-          tabName: EventTypeTabs[0].tabName,
-        },
-      });
-    }
-  }, [EventTypeTabs, router]);
+  }, [t, eventType, installedAppsNumber, enabledAppsNumber, enabledWorkflowsNumber, team]);

  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}`;
+
  return (
    <Shell
-      title={t("event_type_title", { eventTypeTitle: eventType.title })}
+      backPath="/event-types"
+      title={eventType.title + " | " + t("event_type")}
      heading={eventType.title}
      subtitle={eventType.description || ""}
      CTA={
        <div className="flex items-center justify-end">
          <div className="flex items-center rounded-md px-2 sm:hover:bg-gray-100">
-            <Label htmlFor="hiddenSwitch" className="mt-2 hidden cursor-pointer self-center pr-2 sm:inline">
+            <Skeleton
+              as={Label}
+              htmlFor="hiddenSwitch"
+              className="mt-2 hidden cursor-pointer self-center pr-2 sm:inline">
              {t("hide_from_profile")}
-            </Label>
+            </Skeleton>
            <Switch
              id="hiddenSwitch"
              defaultChecked={formMethods.getValues("hidden")}
@@ -198,8 +214,13 @@ function EventTypeSingleLayout({
                showToast("Link copied!", "success");
              }}
            />
-            {/* TODO: Implement embed here @hariom */}
-            {/* <Button color="secondary" size="icon" StartIcon={Icon.FiCode} /> */}
+            <EmbedButton
+              embedUrl={encodeURIComponent(embedLink)}
+              StartIcon={Icon.FiCode}
+              color="secondary"
+              size="icon"
+              tooltip={t("embed")}
+            />
            <Button
              color="secondary"
              size="icon"
@@ -217,34 +238,40 @@ function EventTypeSingleLayout({
              <Icon.FiMoreHorizontal className="group-hover:text-gray-800" />
            </DropdownMenuTrigger>
            <DropdownMenuContent>
-              <DropdownMenuItem>
+              <DropdownMenuItem className="focus:ring-gray-100">
                <Button
                  color="minimal"
                  StartIcon={Icon.FiExternalLink}
                  target="_blank"
                  href={permalink}
-                  rel="noreferrer">
+                  rel="noreferrer"
+                  className="min-w-full">
                  {t("preview")}
                </Button>
              </DropdownMenuItem>
-              <DropdownMenuItem>
+              <DropdownMenuItem className="focus:ring-gray-100">
                <Button color="minimal" StartIcon={Icon.FiLink}>
                  {t("copy_link")}
                </Button>
              </DropdownMenuItem>
-              <DropdownMenuItem>
+              <DropdownMenuItem className="focus:ring-gray-100">
                <Button
                  color="minimal"
                  StartIcon={Icon.FiTrash}
                  disabled={!hasPermsToDelete}
-                  onClick={() => setDeleteDialogOpen(true)}>
+                  onClick={() => setDeleteDialogOpen(true)}
+                  className="min-w-full">
                  {t("delete")}
                </Button>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </Dropdown>
          <div className="border-l-2 border-gray-300" />
-          <Button className="ml-4 lg:ml-0" type="submit" form="event-type-form">
+          <Button
+            className="ml-4 lg:ml-0"
+            type="submit"
+            data-testid="update-eventtype"
+            form="event-type-form">
            {t("save")}
          </Button>
        </div>
@@ -252,10 +279,15 @@ function EventTypeSingleLayout({
      <ClientSuspense fallback={<Loader />}>
        <div className="-mt-2 flex flex-col xl:flex-row xl:space-x-8">
          <div className="hidden xl:block">
-            <VerticalTabs tabs={EventTypeTabs} sticky />
+            <VerticalTabs
+              className="primary-navigation"
+              tabs={EventTypeTabs}
+              sticky
+              linkProps={{ shallow: true }}
+            />
          </div>
          <div className="p-2 md:mx-0 md:p-0 xl:hidden">
-            <HorizontalTabs tabs={EventTypeTabs} />
+            <HorizontalTabs tabs={EventTypeTabs} linkProps={{ shallow: true }} />
          </div>
          <div className="w-full ltr:mr-2 rtl:ml-2">
            <div
@@ -279,9 +311,10 @@ function EventTypeSingleLayout({
            e.preventDefault();
            deleteMutation.mutate({ id: eventType.id });
          }}>
-          {t("delete_event_type_description") as string}
+          {t("delete_event_type_description")}
        </ConfirmationDialogContent>
      </Dialog>
+      <EmbedDialog />
    </Shell>
  );
 }
@@ -11,13 +11,11 @@ import { Label, Select, Switch } from "@calcom/ui/v2";
 type RecurringEventControllerProps = {
  recurringEvent: RecurringEvent | null;
  paymentEnabled: boolean;
-  onRecurringEventDefined: (value: boolean) => void;
 };

 export default function RecurringEventController({
  recurringEvent,
  paymentEnabled,
-  onRecurringEventDefined,
 }: RecurringEventControllerProps) {
  const { t } = useLocale();
  const [recurringEventState, setRecurringEventState] = useState<RecurringEvent | null>(recurringEvent);
@@ -41,6 +39,7 @@ export default function RecurringEventController({
            <div className="flex space-x-3 ">
              <Switch
                name="requireConfirmation"
+                data-testid="recurring-event-check"
                fitToHeight={true}
                checked={recurringEventState !== null}
                onCheckedChange={(e) => {
@@ -0,0 +1,47 @@
+import { Icon } from "@calcom/ui/Icon";
+import { SkeletonAvatar, SkeletonContainer, SkeletonText } from "@calcom/ui/v2";
+
+function SkeletonLoader() {
+  return (
+    <SkeletonContainer>
+      <div className="mb-4 flex items-center">
+        <SkeletonAvatar className="h-8 w-8" />
+        <div className="flex flex-col space-y-1">
+          <SkeletonText className="h-4 w-16" />
+          <SkeletonText className="h-4 w-24" />
+        </div>
+      </div>
+      <ul className="divide-y divide-neutral-200 rounded-md border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
+        <SkeletonItem />
+        <SkeletonItem />
+        <SkeletonItem />
+      </ul>
+    </SkeletonContainer>
+  );
+}
+
+export default SkeletonLoader;
+
+function SkeletonItem() {
+  return (
+    <li className="group flex w-full items-center justify-between px-4 py-4 sm:px-6">
+      <div className="flex-grow truncate text-sm">
+        <div>
+          <SkeletonText className="h-5 w-32" />
+        </div>
+        <div className="">
+          <ul className="mt-2 flex space-x-4 rtl:space-x-reverse ">
+            <li className="flex items-center whitespace-nowrap">
+              <Icon.FiClock className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
+              <SkeletonText className="h-4 w-12" />
+            </li>
+            <li className="flex items-center whitespace-nowrap">
+              <Icon.FiUser className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
+              <SkeletonText className="h-4 w-16" />
+            </li>
+          </ul>
+        </div>
+      </div>
+    </li>
+  );
+}
@@ -1,4 +1,4 @@
-import { useMutation } from "react-query";
+import { useMutation } from "@tanstack/react-query";

 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
@@ -12,6 +12,7 @@ export function CalendarSwitch(props: {
  externalId: string;
  title: string;
  defaultSelected: boolean;
+  isSelected: boolean;
 }) {
  const { t } = useLocale();

@@ -69,14 +70,14 @@ export function CalendarSwitch(props: {
        key={props.externalId}
        name="enabled"
        label={props.title}
-        defaultChecked={props.defaultSelected}
+        defaultChecked={props.isSelected}
        onCheckedChange={(isOn: boolean) => {
          mutation.mutate({ isOn });
        }}
      />
      {props.defaultSelected && (
        <Badge variant="gray">
-          <Icon.FiArrowLeft /> {t("adding_events_to")}
+          <Icon.FiArrowLeft className="mr-1" /> {t("adding_events_to")}
        </Badge>
      )}
    </div>
@@ -32,10 +32,10 @@ export default function AuthContainer(props: React.PropsWithChildren<Props>) {
        </div>
      )}
      <div className="mb-auto mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-        <div className="border-1 mx-2 rounded-md border-gray-200 bg-white px-4 py-8 sm:px-10">
+        <div className="border-1 mx-2 rounded-md border-gray-200 bg-white px-4 py-10 sm:px-10">
          {props.children}
        </div>
-        <div className="mt-4 text-center text-sm text-neutral-600">{props.footerText}</div>
+        <div className="mt-8 text-center text-sm text-neutral-600">{props.footerText}</div>
      </div>
    </div>
  );
@@ -1,245 +0,0 @@
-import { Webhook } from "@prisma/client";
-import { useEffect, useState } from "react";
-import { Controller, useForm } from "react-hook-form";
-
-import customTemplate, { hasTemplateIntegration } from "@calcom/features/webhooks/utils/integrationTemplate";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import showToast from "@calcom/lib/notification";
-import { trpc } from "@calcom/trpc/react";
-import Button from "@calcom/ui/Button";
-import { DialogFooter } from "@calcom/ui/Dialog";
-import Switch from "@calcom/ui/Switch";
-import { FieldsetLegend, Form, InputGroupBox, TextArea, TextField } from "@calcom/ui/form/fields";
-
-import { WEBHOOK_TRIGGER_EVENTS_GROUPED_BY_APP } from "@lib/webhooks/constants";
-
-import { TWebhook } from "@components/webhook/WebhookListItem";
-import WebhookTestDisclosure from "@components/webhook/WebhookTestDisclosure";
-
-/** @deprecated Moved to `packages/features/webhooks` */
-export default function WebhookDialogForm(props: {
-  eventTypeId?: number;
-  defaultValues?: TWebhook;
-  app?: string;
-  handleClose: () => void;
-  webhooks: Webhook[];
-}) {
-  const { t } = useLocale();
-  const utils = trpc.useContext();
-  const appId = props.app;
-  const webhooks = props.webhooks;
-
-  const triggers = !appId
-    ? WEBHOOK_TRIGGER_EVENTS_GROUPED_BY_APP["core"]
-    : WEBHOOK_TRIGGER_EVENTS_GROUPED_BY_APP[appId as keyof typeof WEBHOOK_TRIGGER_EVENTS_GROUPED_BY_APP];
-  const {
-    defaultValues = {
-      id: "",
-      eventTriggers: triggers,
-      subscriberUrl: "",
-      active: true,
-      payloadTemplate: null,
-      secret: null,
-    } as Omit<TWebhook, "userId" | "createdAt" | "eventTypeId" | "appId">,
-  } = props;
-
-  const [useCustomPayloadTemplate, setUseCustomPayloadTemplate] = useState(!!defaultValues.payloadTemplate);
-  const [changeSecret, setChangeSecret] = useState(false);
-  const [newSecret, setNewSecret] = useState("");
-  const hasSecretKey = !!defaultValues.secret;
-  const currentSecret = defaultValues.secret;
-
-  const subscriberUrlReserved = (subscriberUrl: string, id: string): boolean => {
-    return !!webhooks.find((webhook) => webhook.subscriberUrl === subscriberUrl && webhook.id !== id);
-  };
-
-  const form = useForm({
-    defaultValues,
-  });
-
-  const handleInput = (event: React.FormEvent<HTMLInputElement>) => {
-    setNewSecret(event.currentTarget.value);
-  };
-
-  useEffect(() => {
-    if (changeSecret) {
-      form.unregister("secret", { keepDefaultValue: false });
-    }
-  }, [changeSecret]);
-
-  return (
-    <Form
-      data-testid="WebhookDialogForm"
-      form={form}
-      handleSubmit={async (event) => {
-        if (subscriberUrlReserved(event.subscriberUrl, event.id)) {
-          showToast(t("webhook_subscriber_url_reserved"), "error");
-          return;
-        }
-        const e = changeSecret
-          ? { ...event, eventTypeId: props.eventTypeId, appId }
-          : { ...event, secret: currentSecret, eventTypeId: props.eventTypeId, appId };
-        if (!useCustomPayloadTemplate && event.payloadTemplate) {
-          event.payloadTemplate = null;
-        }
-        if (event.id) {
-          await utils.client.mutation("viewer.webhook.edit", e);
-          await utils.invalidateQueries(["viewer.webhook.list"]);
-          showToast(t("webhook_updated_successfully"), "success");
-        } else {
-          await utils.client.mutation("viewer.webhook.create", e);
-          await utils.invalidateQueries(["viewer.webhook.list"]);
-          showToast(t("webhook_created_successfully"), "success");
-        }
-        props.handleClose();
-      }}
-      className="space-y-4">
-      <div>
-        <input type="hidden" {...form.register("id")} />
-      </div>
-      <fieldset className="space-y-2">
-        <InputGroupBox className="border-0 bg-gray-50">
-          <Controller
-            control={form.control}
-            name="active"
-            render={({ field }) => (
-              <Switch
-                label={field.value ? t("webhook_enabled") : t("webhook_disabled")}
-                defaultChecked={field.value}
-                onCheckedChange={(isChecked) => {
-                  form.setValue("active", isChecked);
-                }}
-              />
-            )}
-          />
-        </InputGroupBox>
-      </fieldset>
-      <div>
-        <TextField
-          label={t("subscriber_url")}
-          {...form.register("subscriberUrl")}
-          required
-          type="url"
-          onChange={(e) => {
-            form.setValue("subscriberUrl", e.target.value);
-            if (hasTemplateIntegration({ url: e.target.value })) {
-              setUseCustomPayloadTemplate(true);
-              form.setValue("payloadTemplate", customTemplate({ url: e.target.value }));
-            }
-          }}
-        />
-      </div>
-      <fieldset className="space-y-2">
-        <FieldsetLegend>{t("event_triggers")}</FieldsetLegend>
-        <InputGroupBox className="border-0 bg-gray-50">
-          {triggers.map((key) => (
-            <Controller
-              key={key}
-              control={form.control}
-              name="eventTriggers"
-              render={({ field }) => (
-                <Switch
-                  label={t(key.toLowerCase())}
-                  defaultChecked={field.value.includes(key)}
-                  onCheckedChange={(isChecked) => {
-                    const value = field.value;
-                    const newValue = isChecked ? [...value, key] : value.filter((v) => v !== key);
-
-                    form.setValue("eventTriggers", newValue, {
-                      shouldDirty: true,
-                    });
-                  }}
-                />
-              )}
-            />
-          ))}
-        </InputGroupBox>
-      </fieldset>
-      <fieldset className="space-y-2">
-        {!!hasSecretKey && !changeSecret && (
-          <>
-            <FieldsetLegend>{t("secret")}</FieldsetLegend>
-            <div className="rounded-sm bg-gray-50 p-2 text-xs text-neutral-900">
-              {t("forgotten_secret_description")}
-            </div>
-            <Button
-              color="secondary"
-              type="button"
-              className="py-1 text-xs"
-              onClick={() => {
-                setChangeSecret(true);
-              }}>
-              {t("change_secret")}
-            </Button>
-          </>
-        )}
-        {!!hasSecretKey && changeSecret && (
-          <>
-            <TextField
-              autoComplete="off"
-              label={t("secret")}
-              {...form.register("secret")}
-              value={newSecret}
-              onChange={handleInput}
-              type="text"
-              placeholder={t("leave_blank_to_remove_secret")}
-            />
-            <Button
-              color="secondary"
-              type="button"
-              className="py-1 text-xs"
-              onClick={() => {
-                setChangeSecret(false);
-              }}>
-              {t("cancel")}
-            </Button>
-          </>
-        )}
-        {!hasSecretKey && (
-          <TextField autoComplete="off" label={t("secret")} {...form.register("secret")} type="text" />
-        )}
-      </fieldset>
-      <fieldset className="space-y-2">
-        <FieldsetLegend>{t("payload_template")}</FieldsetLegend>
-        <div className="space-x-3 text-sm rtl:space-x-reverse">
-          <label>
-            <input
-              className="text-neutral-900 focus:ring-neutral-500"
-              type="radio"
-              name="useCustomPayloadTemplate"
-              onChange={(value) => setUseCustomPayloadTemplate(!value.target.checked)}
-              defaultChecked={!useCustomPayloadTemplate}
-            />{" "}
-            Default
-          </label>
-          <label>
-            <input
-              className="text-neutral-900 focus:ring-neutral-500"
-              onChange={(value) => setUseCustomPayloadTemplate(value.target.checked)}
-              name="useCustomPayloadTemplate"
-              type="radio"
-              defaultChecked={useCustomPayloadTemplate}
-            />{" "}
-            Custom
-          </label>
-        </div>
-        {useCustomPayloadTemplate && (
-          <TextArea
-            {...form.register("payloadTemplate")}
-            defaultValue={useCustomPayloadTemplate && (defaultValues.payloadTemplate || "")}
-            rows={3}
-          />
-        )}
-      </fieldset>
-      <WebhookTestDisclosure />
-      <DialogFooter>
-        <Button type="button" color="secondary" onClick={props.handleClose} tabIndex={-1}>
-          {t("cancel")}
-        </Button>
-        <Button type="submit" loading={form.formState.isSubmitting}>
-          {t("save")}
-        </Button>
-      </DialogFooter>
-    </Form>
-  );
-}
@@ -1,103 +0,0 @@
-import { useRouter } from "next/router";
-import { useState } from "react";
-
-import { trpc } from "@calcom/trpc/react";
-import Button from "@calcom/ui/Button";
-import { Dialog, DialogContent } from "@calcom/ui/Dialog";
-import { Icon } from "@calcom/ui/Icon";
-import { List } from "@calcom/ui/List";
-import { ShellSubHeading } from "@calcom/ui/Shell";
-import SkeletonLoader from "@calcom/ui/apps/SkeletonLoader";
-
-import { QueryCell } from "@lib/QueryCell";
-
-import WebhookDialogForm from "@components/webhook/WebhookDialogForm";
-import WebhookListItem, { TWebhook } from "@components/webhook/WebhookListItem";
-
-export type WebhookListContainerType = {
-  title: string;
-  subtitle: string;
-  eventTypeId?: number;
-  appId?: string;
-};
-
-/** @deprecated Moved to `packages/features/webhooks` */
-export default function WebhookListContainer(props: WebhookListContainerType) {
-  const router = useRouter();
-  const query = trpc.useQuery(
-    ["viewer.webhook.list", { eventTypeId: props.eventTypeId, appId: props.appId }],
-    {
-      suspense: true,
-      enabled: router.isReady,
-    }
-  );
-  const [newWebhookModal, setNewWebhookModal] = useState(false);
-  const [editModalOpen, setEditModalOpen] = useState(false);
-  const [editing, setEditing] = useState<TWebhook | null>(null);
-  return (
-    <QueryCell
-      query={query}
-      customLoader={<SkeletonLoader />}
-      success={({ data }) => (
-        <div className="border-b border-gray-200 py-8 pl-2 pr-1">
-          <ShellSubHeading
-            className="mt-2"
-            title={props.title}
-            subtitle={props.subtitle}
-            actions={
-              <Button
-                color="minimal"
-                size="icon"
-                StartIcon={Icon.FiPlus}
-                onClick={() => setNewWebhookModal(true)}
-                data-testid="new_webhook"
-              />
-            }
-          />
-
-          {data.length ? (
-            <List className="mt-6">
-              {data.map((item) => (
-                <WebhookListItem
-                  key={item.id}
-                  webhook={item}
-                  onEditWebhook={() => {
-                    setEditing(item);
-                    setEditModalOpen(true);
-                  }}
-                />
-              ))}
-            </List>
-          ) : null}
-
-          {/* New webhook dialog */}
-          <Dialog open={newWebhookModal} onOpenChange={(isOpen) => !isOpen && setNewWebhookModal(false)}>
-            <DialogContent>
-              <WebhookDialogForm
-                app={props.appId}
-                webhooks={data}
-                eventTypeId={props.eventTypeId}
-                handleClose={() => setNewWebhookModal(false)}
-              />
-            </DialogContent>
-          </Dialog>
-          {/* Edit webhook dialog */}
-          <Dialog open={editModalOpen} onOpenChange={(isOpen) => !isOpen && setEditModalOpen(false)}>
-            <DialogContent>
-              {editing && (
-                <WebhookDialogForm
-                  app={props.appId}
-                  key={editing.id}
-                  webhooks={data}
-                  eventTypeId={props.eventTypeId || undefined}
-                  handleClose={() => setEditModalOpen(false)}
-                  defaultValues={editing}
-                />
-              )}
-            </DialogContent>
-          </Dialog>
-        </div>
-      )}
-    />
-  );
-}
@@ -1,94 +0,0 @@
-import classNames from "@calcom/lib/classNames";
-import { inferQueryOutput, trpc } from "@calcom/trpc/react";
-import Button from "@calcom/ui/Button";
-import ConfirmationDialogContent from "@calcom/ui/ConfirmationDialogContent";
-import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
-import { Icon } from "@calcom/ui/Icon";
-import { ListItem } from "@calcom/ui/List";
-import { Tooltip } from "@calcom/ui/Tooltip";
-
-import { useLocale } from "@lib/hooks/useLocale";
-
-export type TWebhook = inferQueryOutput<"viewer.webhook.list">[number];
-
-/** @deprecated Moved to `packages/features/webhooks` */
-export default function WebhookListItem(props: { webhook: TWebhook; onEditWebhook: () => void }) {
-  const { t } = useLocale();
-  const utils = trpc.useContext();
-  const deleteWebhook = trpc.useMutation("viewer.webhook.delete", {
-    async onSuccess() {
-      await utils.invalidateQueries(["viewer.webhook.list"]);
-    },
-  });
-
-  return (
-    <ListItem className={classNames("flex w-full p-4", props.webhook.active ? "bg-white" : "bg-gray-100")}>
-      <div className="flex w-full justify-between">
-        <div className="flex max-w-full flex-col truncate">
-          <div className="flex space-y-1">
-            <span
-              className={classNames(
-                "truncate text-sm",
-                props.webhook.active ? "text-neutral-700" : "text-neutral-400"
-              )}>
-              {props.webhook.subscriberUrl}
-            </span>
-          </div>
-          <div className="mt-2 flex">
-            <span className="flex flex-col space-x-2 space-y-1 text-xs sm:flex-row sm:space-y-0 sm:rtl:space-x-reverse">
-              {props.webhook.eventTriggers.map((eventTrigger, ind) => (
-                <span
-                  key={ind}
-                  className={classNames(
-                    "w-max rounded-sm px-1 text-xs",
-                    props.webhook.active ? "text-grey-200 bg-gray-200" : "bg-grey-50 text-neutral-400"
-                  )}>
-                  {t(`${eventTrigger.toLowerCase()}`)}
-                </span>
-              ))}
-            </span>
-          </div>
-        </div>
-        <div className="flex">
-          <Tooltip side="top" content={t("edit_webhook")}>
-            <Button
-              onClick={() => props.onEditWebhook()}
-              color="minimal"
-              size="icon"
-              StartIcon={Icon.FiEdit2}
-              className="ml-4 w-full self-center p-2"
-            />
-          </Tooltip>
-          <Dialog>
-            <Tooltip side="top" content={t("delete_webhook")}>
-              <DialogTrigger asChild>
-                <Button
-                  onClick={(e) => {
-                    e.stopPropagation();
-                  }}
-                  size="icon"
-                  color="warn"
-                  StartIcon={Icon.FiTrash}
-                  className="ml-2 w-full self-center p-2"
-                />
-              </DialogTrigger>
-            </Tooltip>
-            <ConfirmationDialogContent
-              variety="danger"
-              title={t("delete_webhook")}
-              confirmBtnText={t("confirm_delete_webhook")}
-              cancelBtnText={t("cancel")}
-              onConfirm={() =>
-                deleteWebhook.mutate({
-                  id: props.webhook.id,
-                  eventTypeId: props.webhook.eventTypeId || undefined,
-                })
-              }>
-              {t("delete_webhook_confirmation_message")}
-            </ConfirmationDialogContent>
-          </Dialog>
-        </div>
-      </div>
-    </ListItem>
-  );
-}
@@ -1,63 +0,0 @@
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
-import { useState } from "react";
-import { useWatch } from "react-hook-form";
-
-import classNames from "@calcom/lib/classNames";
-import showToast from "@calcom/lib/notification";
-import { trpc } from "@calcom/trpc/react";
-import Button from "@calcom/ui/Button";
-import { Icon } from "@calcom/ui/Icon";
-import { InputGroupBox } from "@calcom/ui/form/fields";
-
-import { useLocale } from "@lib/hooks/useLocale";
-
-/** @deprecated Moved to `packages/features/webhooks` */
-export default function WebhookTestDisclosure() {
-  const subscriberUrl: string = useWatch({ name: "subscriberUrl" });
-  const payloadTemplate = useWatch({ name: "payloadTemplate" }) || null;
-  const { t } = useLocale();
-  const [open, setOpen] = useState(false);
-  const mutation = trpc.useMutation("viewer.webhook.testTrigger", {
-    onError(err) {
-      showToast(err.message, "error");
-    },
-  });
-
-  return (
-    <Collapsible open={open} onOpenChange={() => setOpen(!open)}>
-      <CollapsibleTrigger type="button" className="flex w-full cursor-pointer">
-        <Icon.FiChevronRight className={`${open ? "rotate-90 transform" : ""} h-5 w-5 text-neutral-500`} />
-        <span className="text-sm font-medium text-gray-700">{t("webhook_test")}</span>
-      </CollapsibleTrigger>
-      <CollapsibleContent>
-        <InputGroupBox className="space-y-0 border-0 px-0">
-          <div className="flex justify-between bg-gray-50 p-2">
-            <h3 className="self-center text-gray-700">{t("webhook_response")}</h3>
-            <Button
-              type="button"
-              color="minimal"
-              disabled={mutation.isLoading}
-              onClick={() => mutation.mutate({ url: subscriberUrl, type: "PING", payloadTemplate })}>
-              {t("ping_test")}
-            </Button>
-          </div>
-          <div className="border-8 border-gray-50 p-2 text-gray-500">
-            {!mutation.data && <em>{t("no_data_yet")}</em>}
-            {mutation.status === "success" && (
-              <>
-                <div
-                  className={classNames(
-                    "ml-auto w-max px-2 py-1 text-xs",
-                    mutation.data.ok ? "bg-green-50 text-green-500" : "bg-red-50 text-red-500"
-                  )}>
-                  {mutation.data.ok ? t("success") : t("failed")}
-                </div>
-                <pre className="overflow-x-auto">{JSON.stringify(mutation.data, null, 4)}</pre>
-              </>
-            )}
-          </div>
-        </InputGroupBox>
-      </CollapsibleContent>
-    </Collapsible>
-  );
-}
@@ -1,16 +1,14 @@
-import { ReactNode } from "react";
 import {
-  QueryObserverIdleResult,
  QueryObserverLoadingErrorResult,
  QueryObserverLoadingResult,
  QueryObserverRefetchErrorResult,
  QueryObserverSuccessResult,
  UseQueryResult,
-} from "react-query";
+} from "@tanstack/react-query";
+import { ReactNode } from "react";

 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { TRPCClientErrorLike } from "@calcom/trpc/client";
-import type { UseTRPCQueryOptions } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import type {
  inferHandlerInput,
@@ -22,6 +20,8 @@ import type { AppRouter } from "@calcom/trpc/server/routers/_app";
 import { Alert } from "@calcom/ui/Alert";
 import Loader from "@calcom/ui/Loader";

+import type { UseTRPCQueryOptions } from "@trpc/react/shared";
+
 type ErrorLike = {
  message: string;
 };
@@ -34,7 +34,6 @@ interface QueryCellOptionsBase<TData, TError extends ErrorLike> {
    query: QueryObserverLoadingErrorResult<TData, TError> | QueryObserverRefetchErrorResult<TData, TError>
  ) => JSXElementOrNull;
  loading?: (query: QueryObserverLoadingResult<TData, TError> | null) => JSXElementOrNull;
-  idle?: (query: QueryObserverIdleResult<TData, TError>) => JSXElementOrNull;
 }

 interface QueryCellOptionsNoEmpty<TData, TError extends ErrorLike>
@@ -84,14 +83,11 @@ export function QueryCell<TData, TError extends ErrorLike>(
    );
  }

-  if (query.status === "idle") {
-    return opts.idle?.(query) ?? StatusLoader;
-  }
  // impossible state
  return null;
 }

-type inferProcedures<TObj extends ProcedureRecord<any, any, any, any, any, any>> = {
+type inferProcedures<TObj extends ProcedureRecord> = {
  [TPath in keyof TObj]: {
    input: inferProcedureInput<TObj[TPath]>;
    output: inferProcedureOutput<TObj[TPath]>;
@@ -9,7 +9,7 @@ import { ComponentProps, ReactNode } from "react";

 import DynamicHelpscoutProvider from "@calcom/features/ee/support/lib/helpscout/providerDynamic";
 import DynamicIntercomProvider from "@calcom/features/ee/support/lib/intercom/providerDynamic";
-import { trpc } from "@calcom/trpc/react";
+import { trpc, proxy } from "@calcom/trpc/react";
 import { MetaProvider } from "@calcom/ui/v2/core/Meta";

 import usePublicPage from "@lib/hooks/usePublicPage";
@@ -38,7 +38,8 @@ const CustomI18nextProvider = (props: AppPropsWithChildren) => {
   * i18n should never be clubbed with other queries, so that it's caching can be managed independently.
   * We intend to not cache i18n query
   **/
-  const { i18n, locale } = trpc.useQuery(["viewer.public.i18n"], { context: { skipBatch: true } }).data ?? {
+  const { i18n, locale } = trpc.useQuery(["viewer.public.i18n"], { trpc: { context: { skipBatch: true } } })
+    .data ?? {
    locale: "en",
  };

@@ -54,7 +55,7 @@ const CustomI18nextProvider = (props: AppPropsWithChildren) => {
 };

 const AppProviders = (props: AppPropsWithChildren) => {
-  const session = trpc.useQuery(["viewer.public.session"]).data;
+  const session = proxy.public.session.useQuery().data;
  // No need to have intercom on public pages - Good for Page Performance
  const isPublicPage = usePublicPage();
  const isThemeSupported =
@@ -1,6 +1,10 @@
 // handles logic related to user clock display using 24h display / timeZone options.
 import dayjs from "@calcom/dayjs";
-import { isBrowserLocale24h } from "@calcom/lib/timeFormat";
+import {
+  getIs24hClockFromLocalStorage,
+  isBrowserLocale24h,
+  setIs24hClockInLocalStorage,
+} from "@calcom/lib/timeFormat";
 import { localStorage } from "@calcom/lib/webstorage";

 interface TimeOptions {
@@ -20,8 +24,8 @@ const initClock = () => {
    return;
  }
  // This only sets browser locale if there's no preference on localStorage.
-  if (!localStorage.getItem("timeOption.is24hClock")) set24hClock(isBrowserLocale24h());
-  timeOptions.is24hClock = localStorage.getItem("timeOption.is24hClock") === "true";
+  if (getIs24hClockFromLocalStorage() === null) set24hClock(isBrowserLocale24h());
+  timeOptions.is24hClock = !!getIs24hClockFromLocalStorage();
  timeOptions.inviteeTimeZone = localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess();
 };

@@ -32,7 +36,7 @@ const is24h = (is24hClock?: boolean) => {
 };

 const set24hClock = (is24hClock: boolean) => {
-  localStorage.setItem("timeOption.is24hClock", is24hClock.toString());
+  setIs24hClockInLocalStorage(is24hClock);
  timeOptions.is24hClock = is24hClock;
 };

@@ -10,6 +10,7 @@ async function getBooking(prisma: PrismaClient, uid: string) {
      description: true,
      customInputs: true,
      smsReminderNumber: true,
+      location: true,
      attendees: {
        select: {
          email: true,
@@ -1,14 +0,0 @@
-import { Team, User } from "@prisma/client";
-
-export function isSuccessRedirectAvailable(
-  eventType: {
-    users: {
-      plan: User["plan"];
-    }[];
-  } & {
-    team: Partial<Team> | null;
-  }
-) {
-  // As Team Event is available in PRO plan only, just check if it's a team event.
-  return eventType.users[0]?.plan !== "FREE" || eventType.team;
-}
@@ -39,22 +39,46 @@ export const parseRecurringDates = (
  const rule = new RRule({
    ...restRecurringEvent,
    count: recurringCount,
-    dtstart: dayjs(startDate).toDate(),
+    dtstart: new Date(
+      Date.UTC(
+        dayjs.utc(startDate).get("year"),
+        dayjs.utc(startDate).get("month"),
+        dayjs.utc(startDate).get("date"),
+        dayjs.utc(startDate).get("hour"),
+        dayjs.utc(startDate).get("minute")
+      )
+    ),
  });
+
+  const utcOffset = dayjs(startDate).tz(timeZone).utcOffset();
  const dateStrings = rule.all().map((r) => {
-    return processDate(dayjs(r).tz(timeZone), i18n);
+    return processDate(dayjs.utc(r).utcOffset(utcOffset), i18n);
  });
  return [dateStrings, rule.all()];
 };

-type BookingItem = inferQueryOutput<"viewer.bookings">["bookings"][number];
-
 export const extractRecurringDates = (
-  bookings: BookingItem[],
+  booking: inferQueryOutput<"viewer.bookings">["bookings"][number] & {
+    eventType: { recurringEvent: RecurringEvent | null };
+    recurringEventId: string | null;
+    recurringBookings: inferQueryOutput<"viewer.bookings">["recurringInfo"];
+  },
  timeZone: string | undefined,
  i18n: I18n
 ): [string[], Date[]] => {
-  const dateStrings = bookings.map((booking) => processDate(dayjs(booking.startTime).tz(timeZone), i18n));
-  const allDates = dateStrings.map((dateString) => dayjs(dateString).tz(timeZone).toDate());
+  const { count = 0, ...rest } =
+    booking.eventType.recurringEvent !== null ? booking.eventType.recurringEvent : {};
+  const recurringInfo = booking.recurringBookings.find(
+    (val) => val.recurringEventId === booking.recurringEventId
+  );
+  const allDates = new RRule({
+    ...rest,
+    count: recurringInfo?._count.recurringEventId,
+    dtstart: recurringInfo?._min.startTime,
+  }).all();
+  const utcOffset = dayjs(recurringInfo?._min.startTime).tz(timeZone).utcOffset();
+  const dateStrings = allDates.map((r) => {
+    return processDate(dayjs.utc(r).utcOffset(utcOffset), i18n);
+  });
  return [dateStrings, allDates];
 };
@@ -1,18 +0,0 @@
-import { WebhookTriggerEvents } from "@prisma/client";
-
-// this is exported as we can't use `WebhookTriggerEvents` in the frontend straight-off
-
-export const WEBHOOK_TRIGGER_EVENTS_GROUPED_BY_APP = {
-  core: [
-    WebhookTriggerEvents.BOOKING_CANCELLED,
-    WebhookTriggerEvents.BOOKING_CREATED,
-    WebhookTriggerEvents.BOOKING_RESCHEDULED,
-    WebhookTriggerEvents.MEETING_ENDED,
-  ] as const,
-  routing_forms: [WebhookTriggerEvents.FORM_SUBMITTED] as ["FORM_SUBMITTED"],
-};
-
-export const WEBHOOK_TRIGGER_EVENTS = [
-  ...WEBHOOK_TRIGGER_EVENTS_GROUPED_BY_APP.core,
-  ...WEBHOOK_TRIGGER_EVENTS_GROUPED_BY_APP.routing_forms,
-] as const;
@@ -1,45 +0,0 @@
-import { WebhookTriggerEvents } from "@prisma/client";
-
-import prisma from "@calcom/prisma";
-
-export type GetSubscriberOptions = {
-  userId: number;
-  eventTypeId: number;
-  triggerEvent: WebhookTriggerEvents;
-};
-
-/** @deprecated use `packages/lib/webhooks/subscriptions.tsx` */
-const getWebhooks = async (options: GetSubscriberOptions) => {
-  const { userId, eventTypeId } = options;
-  const allWebhooks = await prisma.webhook.findMany({
-    where: {
-      OR: [
-        {
-          userId,
-        },
-        {
-          eventTypeId,
-        },
-      ],
-      AND: {
-        eventTriggers: {
-          has: options.triggerEvent,
-        },
-        active: {
-          equals: true,
-        },
-      },
-    },
-    select: {
-      id: true,
-      subscriberUrl: true,
-      payloadTemplate: true,
-      appId: true,
-      secret: true,
-    },
-  });
-
-  return allWebhooks;
-};
-
-export default getWebhooks;
@@ -5,26 +5,6 @@ import { CONSOLE_URL, WEBAPP_URL, WEBSITE_URL } from "@calcom/lib/constants";
 import { isIpInBanlist } from "@calcom/lib/getIP";
 import { extendEventData, nextCollectBasicSettings } from "@calcom/lib/telemetry";

-const V2_WHITELIST = [
-  "/settings/admin",
-  "/settings/developer/webhooks",
-  "/settings/developer/api-keys",
-  "/settings/my-account",
-  "/settings/security",
-  "/settings/teams",
-  "/availability",
-  "/bookings",
-  "/event-types",
-  "/workflows",
-  "/apps",
-  "/success",
-];
-const V2_BLACKLIST = [
-  //
-  "/apps/routing_forms",
-  "/apps/installed",
-];
-
 const middleware: NextMiddleware = async (req) => {
  const url = req.nextUrl;

@@ -42,16 +22,13 @@ const middleware: NextMiddleware = async (req) => {
      return NextResponse.redirect(req.nextUrl);
    }
  }
-  /** Display available V2 pages to users who opted-in to early access */
-  if (
-    req.cookies.has("calcom-v2-early-access") &&
-    !V2_BLACKLIST.some((p) => url.pathname.startsWith(p)) &&
-    V2_WHITELIST.some((p) => url.pathname.startsWith(p))
-  ) {
-    // rewrite to the current subdomain under the pages/sites folder
-    url.pathname = `/v2${url.pathname}`;
+
+  // Don't 404 old routing_forms links
+  if (url.pathname.startsWith("/apps/routing_forms")) {
+    url.pathname = url.pathname.replace("/apps/routing_forms", "/apps/routing-forms");
    return NextResponse.rewrite(url);
  }
+
  return NextResponse.next();
 };

@@ -135,11 +135,11 @@ const nextConfig = {
      },
      {
        source: "/forms/:formId",
-        destination: "/apps/routing_forms/routing-link/:formId",
+        destination: "/apps/routing-forms/routing-link/:formId",
      },
      {
        source: "/router",
-        destination: "/apps/routing_forms/router",
+        destination: "/apps/routing-forms/router",
      },
      /* TODO: have these files being served from another deployment or CDN {
        source: "/embed/embed.js",
@@ -154,21 +154,29 @@ const nextConfig = {
        destination: "/app-store/:path*",
        permanent: true,
      },
+      {
+        source: "/auth/signup",
+        destination: "/signup",
+        permanent: true,
+      },
      {
        source: "/settings",
-        destination: "/settings/profile",
+        destination: "/settings/my-account/profile",
+        permanent: true,
+      },
+      {
+        source: "/settings/teams",
+        destination: "/teams",
        permanent: true,
      },
      /* V2 testers get redirected to the new settings */
      {
        source: "/settings/profile",
-        has: [{ type: "cookie", key: "calcom-v2-early-access" }],
        destination: "/settings/my-account/profile",
        permanent: false,
      },
      {
        source: "/settings/security",
-        has: [{ type: "cookie", key: "calcom-v2-early-access" }],
        destination: "/settings/security/password",
        permanent: false,
      },
@@ -1,6 +1,6 @@
 {
  "name": "@calcom/web",
-  "version": "1.9.5",
+  "version": "2.1.0",
  "private": true,
  "scripts": {
    "analyze": "ANALYZE=true next build",
@@ -44,19 +44,21 @@
    "@hookform/error-message": "^2.0.0",
    "@hookform/resolvers": "^2.9.7",
    "@next-auth/prisma-adapter": "^1.0.4",
-    "@next/bundle-analyzer": "12.1.6",
-    "@radix-ui/react-avatar": "^0.1.4",
-    "@radix-ui/react-collapsible": "^0.1.0",
-    "@radix-ui/react-dialog": "^0.1.0",
-    "@radix-ui/react-dropdown-menu": "^0.1.1",
-    "@radix-ui/react-id": "^0.1.0",
-    "@radix-ui/react-radio-group": "^0.1.1",
-    "@radix-ui/react-slider": "^0.1.1",
-    "@radix-ui/react-switch": "^0.1.1",
-    "@radix-ui/react-toggle-group": "^0.1.5",
+    "@next/bundle-analyzer": "^12.2.5",
+    "@radix-ui/react-avatar": "^1.0.0",
+    "@radix-ui/react-collapsible": "^1.0.0",
+    "@radix-ui/react-dialog": "^1.0.0",
+    "@radix-ui/react-dropdown-menu": "^1.0.0",
+    "@radix-ui/react-id": "^1.0.0",
+    "@radix-ui/react-popover": "^1.0.0",
+    "@radix-ui/react-radio-group": "^1.0.0",
+    "@radix-ui/react-slider": "^1.0.0",
+    "@radix-ui/react-switch": "^1.0.0",
+    "@radix-ui/react-toggle-group": "^1.0.0",
    "@radix-ui/react-tooltip": "^1.0.0",
    "@stripe/react-stripe-js": "^1.10.0",
    "@stripe/stripe-js": "^1.35.0",
+    "@tanstack/react-query": "^4.3.9",
    "@vercel/edge-functions-ui": "^0.2.1",
    "@wojtekmaj/react-daterange-picker": "^3.3.1",
    "accept-language-parser": "^1.5.0",
@@ -105,7 +107,6 @@
    "react-live-chat-loader": "^2.7.3",
    "react-multi-email": "^0.5.3",
    "react-phone-number-input": "^3.2.7",
-    "react-query": "^3.39.2",
    "react-select": "^5.4.0",
    "react-timezone-select": "^1.3.2",
    "react-use-intercom": "1.5.1",
@@ -115,6 +116,7 @@
    "short-uuid": "^4.2.0",
    "stripe": "^9.16.0",
    "superjson": "1.9.1",
+    "tailwindcss-radix": "^2.6.0",
    "uuid": "^8.3.2",
    "web3": "^1.7.5",
    "zod": "^3.18.0"
@@ -73,7 +73,7 @@ export default function Custom404() {
                <ul role="list" className="mt-4">
                  <li className="border-2 border-green-500 px-4 py-2">
                    <a
-                      href={`${WEBSITE_URL}/pricing?infra`}
+                      href="https://console.cal.com"
                      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">
@@ -190,12 +190,10 @@ export default function Custom404() {
                    {t("check_spelling_mistakes_or_go_back")}
                  </span>
                ) : isCalcom ? (
-                  <Link href={url}>
-                    <a className="mt-2 inline-block text-lg">
-                      {t("the_username")} <strong className="text-blue-500">cal.com{username}</strong>{" "}
-                      {t("is_still_available")} <span className="text-blue-500">{t("register_now")}</span>.
-                    </a>
-                  </Link>
+                  <a target="_blank" href={url} className="mt-2 inline-block text-lg" rel="noreferrer">
+                    {t("the_username")} <strong className="text-blue-500">cal.com{username}</strong>{" "}
+                    {t("is_still_available")} <span className="text-blue-500">{t("register_now")}</span>.
+                  </a>
                ) : (
                  <span className="mt-2 inline-block text-lg">
                    {t("the_username")}{" "}
@@ -211,31 +209,31 @@ export default function Custom404() {
                {!isSubpage && isCalcom && (
                  <ul role="list" className="mt-4">
                    <li className="border-2 border-green-500 px-4 py-2">
-                      <Link href={url}>
-                        <a 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">
-                              <Icon.FiCheck className="h-6 w-6 text-green-500" aria-hidden="true" />
-                            </span>
-                          </div>
-                          <div className="min-w-0 flex-1">
-                            <h3 className="text-base font-medium text-gray-900">
-                              <span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
-                                <span className="focus:outline-none">
-                                  <span className="absolute inset-0" aria-hidden="true" />
-                                  {t("register")} <strong className="text-green-500">{username}</strong>
-                                </span>
+                      <a
+                        href={url}
+                        target="_blank"
+                        className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse"
+                        rel="noreferrer">
+                        <div className="flex-shrink-0">
+                          <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-50">
+                            <Icon.FiCheck className="h-6 w-6 text-green-500" aria-hidden="true" />
+                          </span>
+                        </div>
+                        <div className="min-w-0 flex-1">
+                          <h3 className="text-base font-medium text-gray-900">
+                            <span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
+                              <span className="focus:outline-none">
+                                <span className="absolute inset-0" aria-hidden="true" />
+                                {t("register")} <strong className="text-green-500">{username}</strong>
                              </span>
-                            </h3>
-                            <p className="text-base text-gray-500">
-                              {t("claim_username_and_schedule_events")}
-                            </p>
-                          </div>
-                          <div className="flex-shrink-0 self-center">
-                            <Icon.FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
-                          </div>
-                        </a>
-                      </Link>
+                            </span>
+                          </h3>
+                          <p className="text-base text-gray-500">{t("claim_username_and_schedule_events")}</p>
+                        </div>
+                        <div className="flex-shrink-0 self-center">
+                          <Icon.FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                        </div>
+                      </a>
                    </li>
                  </ul>
                )}
@@ -4,9 +4,8 @@ import { GetServerSidePropsContext } from "next";
 import dynamic from "next/dynamic";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { Toaster } from "react-hot-toast";
-import { JSONObject } from "superjson/dist/types";

 import {
  sdkActionManager,
@@ -26,6 +25,7 @@ import useTheme from "@calcom/lib/hooks/useTheme";
 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 { BadgeCheckIcon, Icon } from "@calcom/ui/Icon";

 import { useExposePlanGlobally } from "@lib/hooks/useExposePlanGlobally";
@@ -182,7 +182,6 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
                        <h2 className="dark:text-darkgray-700 pr-2 text-sm font-semibold text-gray-700">
                          {type.title}
                        </h2>
-                        <p className="dark:text-darkgray-600 hidden text-sm font-normal leading-none text-gray-600 md:block">{`/${user.username}/${type.slug}`}</p>
                      </div>
                      <EventTypeDescription eventType={type} />
                    </a>
@@ -209,43 +208,47 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
 }
 User.isThemeSupported = true;

-const getEventTypesWithHiddenFromDB = async (userId: number, plan: UserPlan) => {
-  return await prisma.eventType.findMany({
-    where: {
-      AND: [
-        {
-          teamId: null,
-        },
-        {
-          OR: [
-            {
-              userId,
-            },
-            {
-              users: {
-                some: {
-                  id: userId,
+const getEventTypesWithHiddenFromDB = async (userId: number) => {
+  return (
+    await prisma.eventType.findMany({
+      where: {
+        AND: [
+          {
+            teamId: null,
+          },
+          {
+            OR: [
+              {
+                userId,
+              },
+              {
+                users: {
+                  some: {
+                    id: userId,
+                  },
                },
              },
-            },
-          ],
+            ],
+          },
+        ],
+      },
+      orderBy: [
+        {
+          position: "desc",
+        },
+        {
+          id: "asc",
        },
      ],
-    },
-    orderBy: [
-      {
-        position: "desc",
+      select: {
+        ...baseEventTypeSelect,
+        metadata: true,
      },
-      {
-        id: "asc",
-      },
-    ],
-    select: {
-      metadata: true,
-      ...baseEventTypeSelect,
-    },
-    take: plan === UserPlan.FREE ? 1 : undefined,
-  });
+    })
+  ).map((eventType) => ({
+    ...eventType,
+    metadata: EventTypeMetaDataSchema.parse(eventType.metadata),
+  }));
 };

 export const getServerSideProps = async (context: GetServerSidePropsContext) => {
@@ -311,7 +314,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
        darkBrandColor: user.darkBrandColor,
      };

-  const eventTypesWithHidden = isDynamicGroup ? [] : await getEventTypesWithHiddenFromDB(user.id, user.plan);
+  const eventTypesWithHidden = isDynamicGroup ? [] : await getEventTypesWithHiddenFromDB(user.id);
  const dataFetchEnd = Date.now();
  if (context.query.log === "1") {
    context.res.setHeader("X-Data-Fetch-Time", `${dataFetchEnd - dataFetchStart}ms`);
@@ -320,7 +323,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>

  const eventTypes = eventTypesRaw.map((eventType) => ({
    ...eventType,
-    metadata: (eventType.metadata || {}) as JSONObject,
+    metadata: EventTypeMetaDataSchema.parse(eventType.metadata || {}),
  }));

  const isSingleUser = users.length === 1;
@@ -1,4 +1,3 @@
-import { UserPlan } from "@prisma/client";
 import { GetStaticPaths, GetStaticPropsContext } from "next";
 import { JSONObject } from "superjson/dist/types";
 import { z } from "zod";
@@ -9,6 +8,7 @@ import { getDefaultEvent, getGroupName, getUsernameList } from "@calcom/lib/defa
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { parseRecurringEvent } from "@calcom/lib/isRecurringEvent";
 import prisma from "@calcom/prisma";
+import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";

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

@@ -93,12 +93,9 @@ async function getUserPageProps(context: GetStaticPropsContext) {

  if (!user) return { notFound: true };

-  const eventTypeIds = user.eventTypes.map((e) => e.id);
  const eventTypes = await prisma.eventType.findMany({
    where: {
      slug,
-      /* Free users can only display their first eventType */
-      id: user.plan === UserPlan.FREE ? eventTypeIds[0] : undefined,
      OR: [{ userId: user.id }, { users: { some: { id: user.id } } }],
    },
    // Order is important to ensure that given a slug if there are duplicates, we choose the same event type consistently when showing in event-types list UI(in terms of ordering and disabled event types)
@@ -151,7 +148,7 @@ async function getUserPageProps(context: GetStaticPropsContext) {
  //TODO: Use zodSchema to verify it instead of using Type Assertion
  const locations = eventType.locations ? (eventType.locations as LocationObject[]) : [];
  const eventTypeObject = Object.assign({}, eventType, {
-    metadata: (eventType.metadata || {}) as JSONObject,
+    metadata: EventTypeMetaDataSchema.parse(eventType.metadata || {}),
    recurringEvent: parseRecurringEvent(eventType.recurringEvent),
    locations: privacyFilteredLocations(locations),
    users: eventType.users.map((user) => ({
@@ -35,6 +35,12 @@ function toRunBeforeReactOnClient() {
    const namespace = url.searchParams.get("embed");
    return namespace;
  };
+
+  window.isPageOptimizedForEmbed = () => {
+    // Those pages are considered optimized, which know at backend that they are rendering for embed.
+    // Such pages can be shown straightaway without a loader for a better embed experience
+    return location.pathname.includes("forms/");
+  };
 }

 class MyDocument extends Document<Props> {
@@ -76,7 +82,6 @@ class MyDocument extends Document<Props> {
          />
        </Head>

-        {/* Keep the embed hidden till parent initializes and gives it the appropriate styles */}
        <body className="dark:bg-darkgray-50 desktop-transparent bg-gray-100">
          <Main />
          <NextScript />
@@ -86,7 +91,9 @@ class MyDocument extends Document<Props> {
            dangerouslySetInnerHTML={{
              __html: `
                if (isEmbed()) {
-                  document.body.style.display="none";
+                  if(!isPageOptimizedForEmbed()) {
+                    document.body.style.display="none";
+                  }
                  document.body.style.background="transparent";
                }`,
            }}
@@ -1,37 +0,0 @@
-import type { NextApiRequest, NextApiResponse } from "next";
-
-import prisma from "@calcom/prisma";
-
-import { getSession } from "@lib/auth";
-
-export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-  req.session = await getSession({ req });
-  if (req.method === "GET" && req.session && req.session.user.id && req.query) {
-    const { "app-credential-type": appCredentialType } = req.query;
-    if (!appCredentialType && Array.isArray(appCredentialType)) {
-      return res.status(400);
-    }
-
-    const userId = req.session.user.id;
-    try {
-      const installedApp = await prisma.credential.findMany({
-        where: {
-          type: appCredentialType as string,
-          userId: userId,
-        },
-      });
-
-      if (installedApp && !!installedApp.length) {
-        res.json({ count: installedApp.length });
-      } else {
-        res.status(404);
-      }
-    } catch (error) {
-      console.log(error);
-      res.status(500);
-    }
-  } else {
-    res.status(400);
-  }
-  res.end();
-}
@@ -76,7 +76,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
    });

    // get user's credentials + their connected integrations
-    const calendarCredentials = getCalendarCredentials(user.credentials, user.id);
+    const calendarCredentials = getCalendarCredentials(user.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);
@@ -1,912 +1,14 @@
-import { BookingStatus, Credential, Prisma, SchedulingType, WebhookTriggerEvents } from "@prisma/client";
-import async from "async";
 import type { NextApiRequest } from "next";
-import { RRule } from "rrule";
-import short from "short-uuid";
-import { v5 as uuidv5 } from "uuid";

-import { getLocationValueForDB, LocationObject } from "@calcom/app-store/locations";
-import { handleEthSignature } from "@calcom/app-store/rainbow/utils/ethereum";
-import { handlePayment } from "@calcom/app-store/stripepayment/lib/server";
-import { cancelScheduledJobs, scheduleTrigger } from "@calcom/app-store/zapier/lib/nodeScheduler";
-import EventManager from "@calcom/core/EventManager";
-import { getEventName } from "@calcom/core/event";
-import { getUserAvailability } from "@calcom/core/getUserAvailability";
-import dayjs from "@calcom/dayjs";
-import {
-  sendAttendeeRequestEmail,
-  sendOrganizerRequestEmail,
-  sendRescheduledEmails,
-  sendScheduledEmails,
-  sendScheduledSeatsEmails,
-} from "@calcom/emails";
-import { scheduleWorkflowReminders } from "@calcom/features/ee/workflows/lib/reminders/reminderScheduler";
-import getWebhooks from "@calcom/features/webhooks/utils/getWebhooks";
-import { isPrismaObjOrUndefined, parseRecurringEvent } from "@calcom/lib";
-import { getDefaultEvent, getGroupName, getUsernameList } from "@calcom/lib/defaultEvents";
-import { getErrorFromUnknown } from "@calcom/lib/errors";
-import isOutOfBounds, { BookingDateInPastError } from "@calcom/lib/isOutOfBounds";
-import logger from "@calcom/lib/logger";
-import { defaultResponder, getLuckyUser } from "@calcom/lib/server";
-import { updateWebUser as syncServicesUpdateWebUser } from "@calcom/lib/sync/SyncServiceManager";
-import prisma, { userSelect } from "@calcom/prisma";
-import { extendedBookingCreateBody, requiredCustomInputSchema } from "@calcom/prisma/zod-utils";
-import type { BufferedBusyTime } from "@calcom/types/BufferedBusyTime";
-import type { AdditionalInformation, CalendarEvent } from "@calcom/types/Calendar";
-import type { EventResult, PartialReference } from "@calcom/types/EventManager";
+import handleNewBooking from "@calcom/features/bookings/lib/handleNewBooking";
+import { getSession } from "@calcom/lib/auth";
+import { defaultResponder } from "@calcom/lib/server";

-import { getSession } from "@lib/auth";
-import { HttpError } from "@lib/core/http/error";
-import sendPayload, { EventTypeInfo } from "@lib/webhooks/sendPayload";
-
-import { getTranslation } from "@server/lib/i18n";
-
-const translator = short();
-const log = logger.getChildLogger({ prefix: ["[api] book:user"] });
-
-type User = Prisma.UserGetPayload<typeof userSelect>;
-type BufferedBusyTimes = BufferedBusyTime[];
-
-/**
- * Refreshes a Credential with fresh data from the database.
- *
- * @param credential
- */
-async function refreshCredential(credential: Credential): Promise<Credential> {
-  const newCredential = await prisma.credential.findUnique({
-    where: {
-      id: credential.id,
-    },
-  });
-
-  if (!newCredential) {
-    return credential;
-  } else {
-    return newCredential;
-  }
-}
-
-/**
- * Refreshes the given set of credentials.
- *
- * @param credentials
- */
-async function refreshCredentials(credentials: Array<Credential>): Promise<Array<Credential>> {
-  return await async.mapLimit(credentials, 5, refreshCredential);
-}
-
-function isAvailable(busyTimes: BufferedBusyTimes, time: dayjs.ConfigType, length: number): boolean {
-  // Check for conflicts
-  let t = true;
-
-  // Early return
-  if (!Array.isArray(busyTimes) || busyTimes.length < 1) return t;
-
-  let i = 0;
-  while (t === true && i < busyTimes.length) {
-    const busyTime = busyTimes[i];
-    i++;
-    const startTime = dayjs(busyTime.start);
-    const endTime = dayjs(busyTime.end);
-
-    // Check if time is between start and end times
-    if (dayjs(time).isBetween(startTime, endTime, null, "[)")) {
-      t = false;
-      break;
-    }
-
-    // Check if slot end time is between start and end time
-    if (dayjs(time).add(length, "minutes").isBetween(startTime, endTime)) {
-      t = false;
-      break;
-    }
-
-    // Check if startTime is between slot
-    if (startTime.isBetween(dayjs(time), dayjs(time).add(length, "minutes"))) {
-      t = false;
-      break;
-    }
-  }
-
-  return t;
-}
-
-const getEventTypesFromDB = async (eventTypeId: number) => {
-  const eventType = await prisma.eventType.findUniqueOrThrow({
-    where: {
-      id: eventTypeId,
-    },
-    select: {
-      id: true,
-      customInputs: true,
-      users: userSelect,
-      team: {
-        select: {
-          id: true,
-          name: true,
-        },
-      },
-      title: true,
-      length: true,
-      eventName: true,
-      schedulingType: true,
-      description: true,
-      periodType: true,
-      periodStartDate: true,
-      periodEndDate: true,
-      periodDays: true,
-      periodCountCalendarDays: true,
-      requiresConfirmation: true,
-      userId: true,
-      price: true,
-      currency: true,
-      metadata: true,
-      destinationCalendar: true,
-      hideCalendarNotes: true,
-      seatsPerTimeSlot: true,
-      recurringEvent: true,
-      workflows: {
-        include: {
-          workflow: {
-            include: {
-              steps: true,
-            },
-          },
-        },
-      },
-      locations: true,
-      timeZone: true,
-      schedule: {
-        select: {
-          availability: true,
-          timeZone: true,
-        },
-      },
-      availability: {
-        select: {
-          startTime: true,
-          endTime: true,
-          days: true,
-        },
-      },
-    },
-  });
-
-  return {
-    ...eventType,
-    recurringEvent: parseRecurringEvent(eventType.recurringEvent),
-    locations: (eventType.locations ?? []) as LocationObject[],
-  };
-};
-
-async function ensureAvailableUsers(
-  eventType: Awaited<ReturnType<typeof getEventTypesFromDB>> & {
-    users: User[];
-  },
-  input: { dateFrom: string; dateTo: string }
-) {
-  const availableUsers: typeof eventType.users = [];
-  /** Let's start checking for availability */
-  for (const user of eventType.users) {
-    const { busy: bufferedBusyTimes } = await getUserAvailability(
-      {
-        userId: user.id,
-        eventTypeId: eventType.id,
-        ...input,
-      },
-      { user, eventType }
-    );
-
-    console.log("calendarBusyTimes==>>>", bufferedBusyTimes);
-
-    let isAvailableToBeBooked = true;
-    try {
-      if (eventType.recurringEvent) {
-        const recurringEvent = parseRecurringEvent(eventType.recurringEvent);
-        const allBookingDates = new RRule({ dtstart: new Date(input.dateFrom), ...recurringEvent }).all();
-        // Go through each date for the recurring event and check if each one's availability
-        // DONE: Decreased computational complexity from O(2^n) to O(n) by refactoring this loop to stop
-        // running at the first unavailable time.
-        let i = 0;
-        while (isAvailableToBeBooked === true && i < allBookingDates.length) {
-          const aDate = allBookingDates[i];
-          i++;
-          isAvailableToBeBooked = isAvailable(bufferedBusyTimes, aDate, eventType.length);
-          // We bail at the first false, we don't need to keep checking
-          if (!isAvailableToBeBooked) break;
-        }
-      } else {
-        isAvailableToBeBooked = isAvailable(bufferedBusyTimes, input.dateFrom, eventType.length);
-      }
-    } catch {
-      log.debug({
-        message: "Unable set isAvailableToBeBooked. Using true. ",
-      });
-    }
-
-    if (isAvailableToBeBooked) {
-      availableUsers.push(user);
-    }
-  }
-  if (!availableUsers.length) {
-    throw new Error("No available users found.");
-  }
-  return availableUsers;
-}
-
-async function handler(req: NextApiRequest) {
+async function handler(req: NextApiRequest & { userId?: number }) {
  const session = await getSession({ req });
-  const currentUser = session?.user;
-
-  const { recurringCount, noEmail, eventTypeSlug, eventTypeId, hasHashedBookingLink, language, ...reqBody } =
-    extendedBookingCreateBody.parse(req.body);
-
-  // handle dynamic user
-  const dynamicUserList = Array.isArray(reqBody.user)
-    ? getGroupName(reqBody.user)
-    : getUsernameList(reqBody.user);
-  const tAttendees = await getTranslation(language ?? "en", "common");
-  const tGuests = await getTranslation("en", "common");
-  log.debug(`Booking eventType ${eventTypeId} started`);
-
-  const eventType =
-    !eventTypeId && !!eventTypeSlug ? getDefaultEvent(eventTypeSlug) : await getEventTypesFromDB(eventTypeId);
-
-  if (!eventType) throw new HttpError({ statusCode: 404, message: "eventType.notFound" });
-
-  // Check if required custom inputs exist
-  if (eventType.customInputs) {
-    eventType.customInputs.forEach((customInput) => {
-      if (customInput.required) {
-        requiredCustomInputSchema.parse(
-          reqBody.customInputs.find((userInput) => userInput.label === customInput.label)?.value
-        );
-      }
-    });
-  }
-
-  let timeOutOfBounds = false;
-  try {
-    timeOutOfBounds = isOutOfBounds(reqBody.start, {
-      periodType: eventType.periodType,
-      periodDays: eventType.periodDays,
-      periodEndDate: eventType.periodEndDate,
-      periodStartDate: eventType.periodStartDate,
-      periodCountCalendarDays: eventType.periodCountCalendarDays,
-    });
-  } catch (error) {
-    if (error instanceof BookingDateInPastError) {
-      // TODO: HttpError should not bleed through to the console.
-      log.info(`Booking eventType ${eventTypeId} failed`, error);
-      throw new HttpError({ statusCode: 400, message: error.message });
-    }
-    log.debug({
-      message: "Unable set timeOutOfBounds. Using false. ",
-    });
-  }
-
-  if (timeOutOfBounds) {
-    const error = {
-      errorCode: "BookingTimeOutOfBounds",
-      message: `EventType '${eventType.eventName}' cannot be booked at this time.`,
-    };
-
-    throw new HttpError({ statusCode: 400, message: error.message });
-  }
-
-  let users = !eventTypeId
-    ? await prisma.user.findMany({
-        where: {
-          username: {
-            in: dynamicUserList,
-          },
-        },
-        ...userSelect,
-      })
-    : eventType.users;
-  const isDynamicAllowed = !users.some((user) => !user.allowDynamicBooking);
-  if (!isDynamicAllowed && !eventTypeId) {
-    throw new HttpError({
-      message: "Some of the users in this group do not allow dynamic booking",
-      statusCode: 400,
-    });
-  }
-
-  // If this event was pre-relationship migration
-  // TODO: Establish whether this is dead code.
-  if (!users.length && eventType.userId) {
-    const eventTypeUser = await prisma.user.findUnique({
-      where: {
-        id: eventType.userId,
-      },
-      ...userSelect,
-    });
-    if (!eventTypeUser) throw new HttpError({ statusCode: 404, message: "eventTypeUser.notFound" });
-    users.push(eventTypeUser);
-  }
-
-  if (!users) throw new HttpError({ statusCode: 404, message: "eventTypeUser.notFound" });
-
-  const availableUsers = await ensureAvailableUsers(
-    {
-      ...eventType,
-      users,
-    },
-    {
-      dateFrom: reqBody.start,
-      dateTo: reqBody.end,
-    }
-  );
-
-  // Assign to only one user when ROUND_ROBIN
-  if (eventType.schedulingType === SchedulingType.ROUND_ROBIN) {
-    users = [await getLuckyUser("MAXIMIZE_AVAILABILITY", { availableUsers, eventTypeId: eventType.id })];
-  } else {
-    // excluding ROUND_ROBIN, all users have availability required.
-    if (availableUsers.length !== users.length) {
-      throw new Error("Some users are unavailable for booking.");
-    }
-    users = availableUsers;
-  }
-
-  console.log("available users", users);
-
-  // @TODO: use the returned address somewhere in booking creation?
-  // const address: string | undefined = await ...
-  await handleEthSignature(eventType.metadata, reqBody.ethSignature);
-
-  const [organizerUser] = users;
-  const tOrganizer = await getTranslation(organizerUser.locale ?? "en", "common");
-
-  const invitee = [
-    {
-      email: reqBody.email,
-      name: reqBody.name,
-      timeZone: reqBody.timeZone,
-      language: { translate: tAttendees, locale: language ?? "en" },
-    },
-  ];
-  const guests = (reqBody.guests || []).map((guest) => ({
-    email: guest,
-    name: "",
-    timeZone: reqBody.timeZone,
-    language: { translate: tGuests, locale: "en" },
-  }));
-
-  const seed = `${organizerUser.username}:${dayjs(reqBody.start).utc().format()}:${new Date().getTime()}`;
-  const uid = translator.fromUUID(uuidv5(seed, uuidv5.URL));
-
-  const bookingLocation = getLocationValueForDB(reqBody.location, eventType.locations);
-  console.log(bookingLocation, reqBody.location, eventType.locations);
-  const customInputs = {} as NonNullable<CalendarEvent["customInputs"]>;
-
-  const teamMemberPromises =
-    eventType.schedulingType === SchedulingType.COLLECTIVE
-      ? users.slice(1).map(async function (user) {
-          return {
-            email: user.email || "",
-            name: user.name || "",
-            timeZone: user.timeZone,
-            language: {
-              translate: await getTranslation(user.locale ?? "en", "common"),
-              locale: user.locale ?? "en",
-            },
-          };
-        })
-      : [];
-
-  const teamMembers = await Promise.all(teamMemberPromises);
-
-  const attendeesList = [...invitee, ...guests, ...teamMembers];
-
-  const eventNameObject = {
-    attendeeName: reqBody.name || "Nameless",
-    eventType: eventType.title,
-    eventName: eventType.eventName,
-    host: organizerUser.name || "Nameless",
-    location: bookingLocation,
-    t: tOrganizer,
-  };
-
-  const additionalNotes = reqBody.notes;
-
-  let evt: CalendarEvent = {
-    type: eventType.title,
-    title: getEventName(eventNameObject), //this needs to be either forced in english, or fetched for each attendee and organizer separately
-    description: eventType.description,
-    additionalNotes,
-    customInputs,
-    startTime: dayjs(reqBody.start).utc().format(),
-    endTime: dayjs(reqBody.end).utc().format(),
-    organizer: {
-      name: organizerUser.name || "Nameless",
-      email: organizerUser.email || "Email-less",
-      timeZone: organizerUser.timeZone,
-      language: { translate: tOrganizer, locale: organizerUser.locale ?? "en" },
-    },
-    attendees: attendeesList,
-    location: bookingLocation, // Will be processed by the EventManager later.
-    /** For team events & dynamic collective events, we will need to handle each member destinationCalendar eventually */
-    destinationCalendar: eventType.destinationCalendar || organizerUser.destinationCalendar,
-    hideCalendarNotes: eventType.hideCalendarNotes,
-    requiresConfirmation: eventType.requiresConfirmation ?? false,
-    eventTypeId: eventType.id,
-  };
-
-  // For seats, if the booking already exists then we want to add the new attendee to the existing booking
-  if (reqBody.bookingUid) {
-    if (!eventType.seatsPerTimeSlot)
-      throw new HttpError({ statusCode: 404, message: "Event type does not have seats" });
-
-    const booking = await prisma.booking.findUnique({
-      where: {
-        uid: reqBody.bookingUid,
-      },
-      select: {
-        id: true,
-        attendees: true,
-        userId: true,
-        references: {
-          select: {
-            type: true,
-            uid: true,
-            meetingId: true,
-            meetingPassword: true,
-            meetingUrl: true,
-            externalCalendarId: true,
-          },
-        },
-      },
-    });
-    if (!booking) throw new HttpError({ statusCode: 404, message: "Booking not found" });
-
-    // Need to add translation for attendees to pass type checks. Since these values are never written to the db we can just use the new attendee language
-    const bookingAttendees = booking.attendees.map((attendee) => {
-      return { ...attendee, language: { translate: tAttendees, locale: language ?? "en" } };
-    });
-
-    evt = { ...evt, attendees: [...bookingAttendees, invitee[0]] };
-
-    if (eventType.seatsPerTimeSlot <= booking.attendees.length)
-      throw new HttpError({ statusCode: 409, message: "Booking seats are full" });
-
-    if (booking.attendees.some((attendee) => attendee.email === invitee[0].email))
-      throw new HttpError({ statusCode: 409, message: "Already signed up for time slot" });
-
-    await prisma.booking.update({
-      where: {
-        uid: reqBody.bookingUid,
-      },
-      data: {
-        attendees: {
-          create: {
-            email: invitee[0].email,
-            name: invitee[0].name,
-            timeZone: invitee[0].timeZone,
-            locale: invitee[0].language.locale,
-          },
-        },
-      },
-    });
-
-    const newSeat = booking.attendees.length !== 0;
-
-    await sendScheduledSeatsEmails(evt, invitee[0], newSeat);
-
-    const credentials = await refreshCredentials(organizerUser.credentials);
-    const eventManager = new EventManager({ ...organizerUser, credentials });
-    await eventManager.updateCalendarAttendees(evt, booking);
-
-    req.statusCode = 201;
-    return booking;
-  }
-
-  if (reqBody.customInputs.length > 0) {
-    reqBody.customInputs.forEach(({ label, value }) => {
-      customInputs[label] = value;
-    });
-  }
-
-  if (eventType.schedulingType === SchedulingType.COLLECTIVE) {
-    evt.team = {
-      members: users.map((user) => user.name || user.username || "Nameless"),
-      name: eventType.team?.name || "Nameless",
-    }; // used for invitee emails
-  }
-
-  if (reqBody.recurringEventId && eventType.recurringEvent) {
-    // Overriding the recurring event configuration count to be the actual number of events booked for
-    // the recurring event (equal or less than recurring event configuration count)
-    eventType.recurringEvent = Object.assign({}, eventType.recurringEvent, { count: recurringCount });
-    evt.recurringEvent = eventType.recurringEvent;
-  }
-
-  // Initialize EventManager with credentials
-  const rescheduleUid = reqBody.rescheduleUid;
-  async function getOriginalRescheduledBooking(uid: string) {
-    return prisma.booking.findFirst({
-      where: {
-        uid,
-        status: {
-          in: [BookingStatus.ACCEPTED, BookingStatus.CANCELLED, BookingStatus.PENDING],
-        },
-      },
-      include: {
-        attendees: {
-          select: {
-            name: true,
-            email: true,
-            locale: true,
-            timeZone: true,
-          },
-        },
-        user: {
-          select: {
-            id: true,
-            name: true,
-            email: true,
-            locale: true,
-            timeZone: true,
-          },
-        },
-        payment: true,
-      },
-    });
-  }
-  type BookingType = Prisma.PromiseReturnType<typeof getOriginalRescheduledBooking>;
-  let originalRescheduledBooking: BookingType = null;
-  if (rescheduleUid) {
-    originalRescheduledBooking = await getOriginalRescheduledBooking(rescheduleUid);
-  }
-
-  async function createBooking() {
-    if (originalRescheduledBooking) {
-      evt.title = originalRescheduledBooking?.title || evt.title;
-      evt.description = originalRescheduledBooking?.description || evt.additionalNotes;
-      evt.location = originalRescheduledBooking?.location;
-    }
-
-    const eventTypeRel = !eventTypeId
-      ? {}
-      : {
-          connect: {
-            id: eventTypeId,
-          },
-        };
-
-    const dynamicEventSlugRef = !eventTypeId ? eventTypeSlug : null;
-    const dynamicGroupSlugRef = !eventTypeId ? (reqBody.user as string).toLowerCase() : null;
-
-    // If the user is not the owner of the event, new booking should be always pending.
-    // Otherwise, an owner rescheduling should be always accepted.
-    const userReschedulingIsOwner = currentUser
-      ? originalRescheduledBooking?.user?.id === currentUser.id
-      : false;
-    const isConfirmedByDefault =
-      (!eventType.requiresConfirmation && !eventType.price) || userReschedulingIsOwner;
-    const newBookingData: Prisma.BookingCreateInput = {
-      uid,
-      title: evt.title,
-      startTime: dayjs.utc(evt.startTime).toDate(),
-      endTime: dayjs.utc(evt.endTime).toDate(),
-      description: evt.additionalNotes,
-      customInputs: isPrismaObjOrUndefined(evt.customInputs),
-      status: isConfirmedByDefault ? BookingStatus.ACCEPTED : BookingStatus.PENDING,
-      location: evt.location,
-      eventType: eventTypeRel,
-      smsReminderNumber: reqBody.smsReminderNumber,
-      attendees: {
-        createMany: {
-          data: evt.attendees.map((attendee) => {
-            //if attendee is team member, it should fetch their locale not booker's locale
-            //perhaps make email fetch request to see if his locale is stored, else
-            const retObj = {
-              name: attendee.name,
-              email: attendee.email,
-              timeZone: attendee.timeZone,
-              locale: attendee.language.locale,
-            };
-            return retObj;
-          }),
-        },
-      },
-      dynamicEventSlugRef,
-      dynamicGroupSlugRef,
-      user: {
-        connect: {
-          id: organizerUser.id,
-        },
-      },
-      destinationCalendar: evt.destinationCalendar
-        ? {
-            connect: { id: evt.destinationCalendar.id },
-          }
-        : undefined,
-    };
-    if (reqBody.recurringEventId) {
-      newBookingData.recurringEventId = reqBody.recurringEventId;
-    }
-    if (originalRescheduledBooking) {
-      newBookingData["paid"] = originalRescheduledBooking.paid;
-      newBookingData["fromReschedule"] = originalRescheduledBooking.uid;
-      if (newBookingData.attendees?.createMany?.data) {
-        newBookingData.attendees.createMany.data = originalRescheduledBooking.attendees;
-      }
-      if (originalRescheduledBooking.recurringEventId) {
-        newBookingData.recurringEventId = originalRescheduledBooking.recurringEventId;
-      }
-    }
-    const createBookingObj = {
-      include: {
-        user: {
-          select: { email: true, name: true, timeZone: true },
-        },
-        attendees: true,
-        payment: true,
-      },
-      data: newBookingData,
-    };
-
-    if (originalRescheduledBooking?.paid && originalRescheduledBooking?.payment) {
-      const bookingPayment = originalRescheduledBooking?.payment?.find((payment) => payment.success);
-
-      if (bookingPayment) {
-        createBookingObj.data.payment = {
-          connect: { id: bookingPayment.id },
-        };
-      }
-    }
-
-    if (typeof eventType.price === "number" && eventType.price > 0) {
-      /* Validate if there is any stripe_payment credential for this user */
-      /*  note: removes custom error message about stripe */
-      await prisma.credential.findFirstOrThrow({
-        where: {
-          type: "stripe_payment",
-          userId: organizerUser.id,
-        },
-        select: {
-          id: true,
-        },
-      });
-    }
-
-    return prisma.booking.create(createBookingObj);
-  }
-
-  let results: EventResult<AdditionalInformation>[] = [];
-  let referencesToCreate: PartialReference[] = [];
-
-  type Booking = Prisma.PromiseReturnType<typeof createBooking>;
-  let booking: Booking | null = null;
-  try {
-    booking = await createBooking();
-    // Sync Services
-    await syncServicesUpdateWebUser(
-      currentUser &&
-        (await prisma.user.findFirst({
-          where: { id: currentUser.id },
-          select: { id: true, email: true, name: true, plan: true, username: true, createdDate: true },
-        }))
-    );
-    evt.uid = booking?.uid ?? null;
-  } catch (_err) {
-    const err = getErrorFromUnknown(_err);
-    log.error(`Booking ${eventTypeId} failed`, "Error when saving booking to db", err.message);
-    if (err.code === "P2002") {
-      throw new HttpError({ statusCode: 409, message: "booking.conflict" });
-    }
-    throw err;
-  }
-
-  // After polling videoBusyTimes, credentials might have been changed due to refreshment, so query them again.
-  const credentials = await refreshCredentials(organizerUser.credentials);
-  const eventManager = new EventManager({ ...organizerUser, credentials });
-
-  if (originalRescheduledBooking?.uid) {
-    // Use EventManager to conditionally use all needed integrations.
-    const updateManager = await eventManager.reschedule(
-      evt,
-      originalRescheduledBooking.uid,
-      booking?.id,
-      reqBody.rescheduleReason
-    );
-    // This gets overridden when updating the event - to check if notes have been hidden or not. We just reset this back
-    // to the default description when we are sending the emails.
-    evt.description = eventType.description;
-
-    results = updateManager.results;
-    referencesToCreate = updateManager.referencesToCreate;
-    if (results.length > 0 && results.some((res) => !res.success)) {
-      const error = {
-        errorCode: "BookingReschedulingMeetingFailed",
-        message: "Booking Rescheduling failed",
-      };
-
-      log.error(`Booking ${organizerUser.name} failed`, error, results);
-    } else {
-      const metadata: AdditionalInformation = {};
-
-      if (results.length) {
-        // TODO: Handle created event metadata more elegantly
-        const [updatedEvent] = Array.isArray(results[0].updatedEvent)
-          ? results[0].updatedEvent
-          : [results[0].updatedEvent];
-        if (updatedEvent) {
-          metadata.hangoutLink = updatedEvent.hangoutLink;
-          metadata.conferenceData = updatedEvent.conferenceData;
-          metadata.entryPoints = updatedEvent.entryPoints;
-        }
-      }
-
-      if (noEmail !== true) {
-        await sendRescheduledEmails({
-          ...evt,
-          additionalInformation: metadata,
-          additionalNotes, // Resets back to the additionalNote input and not the override value
-          cancellationReason: reqBody.rescheduleReason,
-        });
-      }
-    }
-    // If it's not a reschedule, doesn't require confirmation and there's no price,
-    // Create a booking
-  } else if (!eventType.requiresConfirmation && !eventType.price) {
-    // Use EventManager to conditionally use all needed integrations.
-    const createManager = await eventManager.create(evt);
-
-    // This gets overridden when creating the event - to check if notes have been hidden or not. We just reset this back
-    // to the default description when we are sending the emails.
-    evt.description = eventType.description;
-
-    results = createManager.results;
-    referencesToCreate = createManager.referencesToCreate;
-    if (results.length > 0 && results.every((res) => !res.success)) {
-      const error = {
-        errorCode: "BookingCreatingMeetingFailed",
-        message: "Booking failed",
-      };
-
-      log.error(`Booking ${organizerUser.username} failed`, error, results);
-    } else {
-      const metadata: AdditionalInformation = {};
-
-      if (results.length) {
-        // TODO: Handle created event metadata more elegantly
-        metadata.hangoutLink = results[0].createdEvent?.hangoutLink;
-        metadata.conferenceData = results[0].createdEvent?.conferenceData;
-        metadata.entryPoints = results[0].createdEvent?.entryPoints;
-      }
-      if (noEmail !== true) {
-        await sendScheduledEmails({
-          ...evt,
-          additionalInformation: metadata,
-          additionalNotes,
-          customInputs,
-        });
-      }
-    }
-  }
-
-  if (eventType.requiresConfirmation && !rescheduleUid && noEmail !== true) {
-    await sendOrganizerRequestEmail({ ...evt, additionalNotes });
-    await sendAttendeeRequestEmail({ ...evt, additionalNotes }, attendeesList[0]);
-  }
-
-  if (
-    !Number.isNaN(eventType.price) &&
-    eventType.price > 0 &&
-    !originalRescheduledBooking?.paid &&
-    !!booking
-  ) {
-    const [firstStripeCredential] = organizerUser.credentials.filter((cred) => cred.type == "stripe_payment");
-
-    if (!firstStripeCredential)
-      throw new HttpError({ statusCode: 400, message: "Missing payment credentials" });
-
-    if (!booking.user) booking.user = organizerUser;
-    const payment = await handlePayment(evt, eventType, firstStripeCredential, booking);
-
-    req.statusCode = 201;
-    return { ...booking, message: "Payment required", paymentUid: payment.uid };
-  }
-
-  log.debug(`Booking ${organizerUser.username} completed`);
-
-  const eventTrigger: WebhookTriggerEvents = rescheduleUid
-    ? WebhookTriggerEvents.BOOKING_RESCHEDULED
-    : WebhookTriggerEvents.BOOKING_CREATED;
-  const subscriberOptions = {
-    userId: organizerUser.id,
-    eventTypeId,
-    triggerEvent: eventTrigger,
-  };
-
-  const subscriberOptionsMeetingEnded = {
-    userId: organizerUser.id,
-    eventTypeId,
-    triggerEvent: WebhookTriggerEvents.MEETING_ENDED,
-  };
-
-  const subscribersMeetingEnded = await getWebhooks(subscriberOptionsMeetingEnded);
-
-  subscribersMeetingEnded.forEach((subscriber) => {
-    if (rescheduleUid && originalRescheduledBooking) {
-      cancelScheduledJobs(originalRescheduledBooking);
-    }
-    if (booking && booking.status === BookingStatus.ACCEPTED) {
-      scheduleTrigger(booking, subscriber.subscriberUrl, subscriber);
-    }
-  });
-
-  // Send Webhook call if hooked to BOOKING_CREATED & BOOKING_RESCHEDULED
-  const subscribers = await getWebhooks(subscriberOptions);
-  console.log("evt:", {
-    ...evt,
-    metadata: reqBody.metadata,
-  });
-  const bookingId = booking?.id;
-
-  const eventTypeInfo: EventTypeInfo = {
-    eventTitle: eventType.title,
-    eventDescription: eventType.description,
-    requiresConfirmation: eventType.requiresConfirmation || null,
-    price: eventType.price,
-    currency: eventType.currency,
-    length: eventType.length,
-  };
-
-  const promises = subscribers.map((sub) =>
-    sendPayload(sub.secret, eventTrigger, new Date().toISOString(), sub, {
-      ...evt,
-      ...eventTypeInfo,
-      bookingId,
-      rescheduleUid,
-      metadata: reqBody.metadata,
-      eventTypeId,
-      status: eventType.requiresConfirmation ? "PENDING" : "ACCEPTED",
-    }).catch((e) => {
-      console.error(`Error executing webhook for event: ${eventTrigger}, URL: ${sub.subscriberUrl}`, e);
-    })
-  );
-  await Promise.all(promises);
-  // Avoid passing referencesToCreate with id unique constrain values
-  // refresh hashed link if used
-  const urlSeed = `${organizerUser.username}:${dayjs(reqBody.start).utc().format()}`;
-  const hashedUid = translator.fromUUID(uuidv5(urlSeed, uuidv5.URL));
-
-  if (hasHashedBookingLink) {
-    await prisma.hashedLink.update({
-      where: {
-        link: reqBody.hashedLink as string,
-      },
-      data: {
-        link: hashedUid,
-      },
-    });
-  }
-  if (!booking) throw new HttpError({ statusCode: 400, message: "Booking failed" });
-  await prisma.booking.update({
-    where: {
-      uid: booking.uid,
-    },
-    data: {
-      references: {
-        createMany: {
-          data: referencesToCreate,
-        },
-      },
-    },
-  });
-
-  await scheduleWorkflowReminders(
-    eventType.workflows,
-    reqBody.smsReminderNumber as string | null,
-    evt,
-    evt.requiresConfirmation || false,
-    rescheduleUid ? true : false
-  );
-  // booking successful
-  req.statusCode = 201;
+  /* To mimic API behavior */
+  req.userId = session?.user?.id;
+  const booking = await handleNewBooking(req);
  return booking;
 }

@@ -18,14 +18,13 @@ import { CalendarEventDirector } from "@calcom/core/builders/CalendarEvent/direc
 import { deleteMeeting } from "@calcom/core/videoClient";
 import dayjs from "@calcom/dayjs";
 import { sendRequestRescheduleEmail } from "@calcom/emails";
+import getWebhooks from "@calcom/features/webhooks/lib/getWebhooks";
+import sendPayload from "@calcom/features/webhooks/lib/sendPayload";
 import { isPrismaObjOrUndefined } from "@calcom/lib";
 import { getTranslation } from "@calcom/lib/server/i18n";
 import prisma from "@calcom/prisma";
 import type { CalendarEvent, Person } from "@calcom/types/Calendar";

-import sendPayload from "@lib/webhooks/sendPayload";
-import getWebhooks from "@lib/webhooks/subscriptions";
-
 export type RescheduleResponse = Booking & {
  attendees: Attendee[];
 };
@@ -20,16 +20,15 @@ import { sendCancelledEmails } from "@calcom/emails";
 import { deleteScheduledEmailReminder } from "@calcom/features/ee/workflows/lib/reminders/emailReminderManager";
 import { sendCancelledReminders } from "@calcom/features/ee/workflows/lib/reminders/reminderScheduler";
 import { deleteScheduledSMSReminder } from "@calcom/features/ee/workflows/lib/reminders/smsReminderManager";
+import getWebhooks from "@calcom/features/webhooks/lib/getWebhooks";
+import sendPayload, { EventTypeInfo } from "@calcom/features/webhooks/lib/sendPayload";
 import { isPrismaObjOrUndefined, parseRecurringEvent } from "@calcom/lib";
+import { getSession } from "@calcom/lib/auth";
 import { HttpError } from "@calcom/lib/http-error";
 import { defaultHandler, defaultResponder } from "@calcom/lib/server";
 import prisma, { bookingMinimalSelect } from "@calcom/prisma";
 import type { CalendarEvent } from "@calcom/types/Calendar";

-import { getSession } from "@lib/auth";
-import sendPayload, { EventTypeInfo } from "@lib/webhooks/sendPayload";
-import getWebhooks from "@lib/webhooks/subscriptions";
-
 import { getTranslation } from "@server/lib/i18n";

 const bodySchema = z.object({
@@ -1,6 +1,7 @@
 import { NextApiRequest, NextApiResponse } from "next";
 import type { Session } from "next-auth";

+import getInstalledAppPath from "@calcom/app-store/_utils/getInstalledAppPath";
 import { deriveAppDictKeyFromType } from "@calcom/lib/deriveAppDictKeyFromType";
 import prisma from "@calcom/prisma";
 import type { AppDeclarativeHandler, AppHandler } from "@calcom/types/AppHandler";
@@ -64,7 +65,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
      await handler(req, res);
    } else {
      await defaultIntegrationAddHandler({ user: req.session?.user, ...handler });
-      redirectUrl = handler.redirectUrl;
+      redirectUrl = handler.redirectUrl || getInstalledAppPath(handler);
      res.json({ url: redirectUrl });
    }
    return res.status(200);
@@ -1,7 +1,7 @@
 import { GetServerSidePropsContext } from "next";
 import { useRouter } from "next/router";

-import RoutingFormsRoutingConfig from "@calcom/app-store/ee/routing_forms/pages/app-routing.config";
+import RoutingFormsRoutingConfig from "@calcom/app-store/ee/routing-forms/pages/app-routing.config";
 import TypeformRoutingConfig from "@calcom/app-store/typeform/pages/app-routing.config";
 import prisma from "@calcom/prisma";
 import { AppGetServerSideProps } from "@calcom/types/AppGetServerSideProps";
@@ -28,7 +28,7 @@ type NotFound = {

 // TODO: It is a candidate for apps.*.generated.*
 const AppsRouting = {
-  routing_forms: RoutingFormsRoutingConfig,
+  "routing-forms": RoutingFormsRoutingConfig,
  typeform: TypeformRoutingConfig,
 };

@@ -10,11 +10,9 @@ import path from "path";
 import { getAppWithMetadata } from "@calcom/app-store/_appRegistry";
 import prisma from "@calcom/prisma";

-import useMediaQuery from "@lib/hooks/useMediaQuery";
 import { inferSSRProps } from "@lib/types/inferSSRProps";

-import App from "@components/App";
-import Slider from "@components/apps/Slider";
+import App from "@components/v2/apps/App";

 const components = {
  a: ({ href = "", ...otherProps }: JSX.IntrinsicElements["a"]) => (
@@ -25,42 +23,11 @@ const components = {
  img: ({ src = "", alt = "", placeholder, ...rest }: JSX.IntrinsicElements["img"]) => (
    <Image src={src} alt={alt} {...rest} />
  ),
-  Slider: ({ items }: { items: string[] }) => {
-    const isTabletAndUp = useMediaQuery("(min-width: 960px)");
-    return (
-      <Slider<string>
-        items={items}
-        title="Screenshots"
-        options={{
-          perView: 1,
-        }}
-        renderItem={(item) =>
-          isTabletAndUp ? (
-            <Image
-              src={item}
-              alt=""
-              loading="eager"
-              layout="fixed"
-              objectFit="contain"
-              objectPosition="center center"
-              width={573}
-              height={382}
-            />
-          ) : (
-            <Image
-              src={item}
-              alt=""
-              layout="responsive"
-              objectFit="contain"
-              objectPosition="center center"
-              width={573}
-              height={382}
-            />
-          )
-        }
-      />
-    );
-  },
+  // @TODO: In v2 the slider isn't shown anymore. However, to ensure the v1 pages keep
+  // working, this component is still rendered in the MDX content. To skip them in the v2
+  // content we have to render null here. In v2 the gallery is shown by directly
+  // using the `items` property from the MDX's meta data.
+  Slider: () => <></>,
 };

 function SingleAppPage({ data, source }: inferSSRProps<typeof getStaticProps>) {
@@ -68,6 +35,8 @@ function SingleAppPage({ data, source }: inferSSRProps<typeof getStaticProps>) {
    <App
      name={data.name}
      isGlobal={data.isGlobal}
+      slug={data.slug}
+      variant={data.variant}
      type={data.type}
      logo={data.logo}
      categories={data.categories ?? [data.category]}
@@ -80,6 +49,7 @@ function SingleAppPage({ data, source }: inferSSRProps<typeof getStaticProps>) {
      email={data.email}
      licenseRequired={data.licenseRequired}
      isProOnly={data.isProOnly}
+      images={source?.scope?.items as string[] | undefined}
      //   tos="https://zoom.us/terms"
      //   privacy="https://zoom.us/privacy"
      body={<MDXRemote {...source} components={components} />}
@@ -2,9 +2,8 @@ import { GetStaticPaths, InferGetStaticPropsType } from "next";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";

-import { AppSetupPage } from "@calcom/app-store/_pages/setup";
 import { getStaticProps } from "@calcom/app-store/_pages/setup/_getStaticProps";
-import Loader from "@calcom/ui/Loader";
+import { AppSetupPage } from "@calcom/app-store/_pages/v2/setup";

 export default function SetupInformation(props: InferGetStaticPropsType<typeof getStaticProps>) {
  const router = useRouter();
@@ -12,11 +11,7 @@ export default function SetupInformation(props: InferGetStaticPropsType<typeof g
  const { status } = useSession();

  if (status === "loading") {
-    return (
-      <div className="absolute z-50 flex h-screen w-full items-center bg-gray-200">
-        <Loader />
-      </div>
-    );
+    return <div className="absolute z-50 flex h-screen w-full items-center bg-gray-200" />;
  }

  if (status === "unauthenticated") {
@@ -28,7 +23,7 @@ export default function SetupInformation(props: InferGetStaticPropsType<typeof g
    });
  }

-  return <AppSetupPage slug={slug} {...props} />;
+  return <AppSetupPage slug={`${slug}-V2`} {...props} />;
 }

 export const getStaticPaths: GetStaticPaths = async () => {
@@ -7,31 +7,40 @@ import { getAppRegistry } from "@calcom/app-store/_appRegistry";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import prisma from "@calcom/prisma";
 import { Icon } from "@calcom/ui/Icon";
-import Shell from "@calcom/ui/Shell";
-
-import AppCard from "@components/apps/AppCard";
+import { SkeletonText } from "@calcom/ui/v2";
+import Shell from "@calcom/ui/v2/core/Shell";
+import AppCard from "@calcom/ui/v2/core/apps/AppCard";

 export default function Apps({ apps }: InferGetStaticPropsType<typeof getStaticProps>) {
-  const { t } = useLocale();
+  const { t, isLocaleReady } = useLocale();
  const router = useRouter();
+  const { category } = router.query;

  return (
    <>
-      <Shell isPublic large>
-        <div className="-mx-4 md:-mx-8">
-          <div className="mb-10 bg-gray-50 px-4 pb-2">
+      <Shell
+        isPublic
+        backPath="/apps"
+        heading={
+          <>
            <Link href="/apps">
-              <a className="mt-2 inline-flex px-1 py-2 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-800">
-                <Icon.FiChevronLeft className="h-5 w-5" /> {t("browse_apps")}
+              <a className="inline-flex items-center justify-start gap-1 rounded-sm py-2 text-gray-900">
+                {isLocaleReady ? t("app_store") : <SkeletonText className="h-4 w-24" />}{" "}
              </a>
            </Link>
-          </div>
-        </div>
+            {category && (
+              <span className="gap-1 text-gray-600">
+                <span>&nbsp;/&nbsp;</span>
+                {t("category_apps", { category: category[0].toUpperCase() + category?.slice(1) })}
+              </span>
+            )}
+          </>
+        }
+        large>
        <div className="mb-16">
-          <h2 className="mb-2 text-lg font-semibold text-gray-900">All {router.query.category} apps</h2>
          <div className="grid-col-1 grid grid-cols-1 gap-3 md:grid-cols-3">
            {apps.map((app) => {
-              return <AppCard key={app.name} app={app} />;
+              return <AppCard key={app.slug} app={app} />;
            })}
          </div>
        </div>
@@ -5,25 +5,39 @@ import { getAppRegistry } from "@calcom/app-store/_appRegistry";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Icon } from "@calcom/ui/Icon";
 import Shell from "@calcom/ui/Shell";
-
-import AppStoreCategories from "@components/apps/Categories";
+import { SkeletonText } from "@calcom/ui/v2";

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

  return (
    <Shell isPublic large>
-      <div className="-mx-4 md:-mx-8">
-        <div className="mb-10 bg-gray-50 px-4 pb-2">
-          <Link href="/apps">
-            <a className="mt-2 inline-flex px-1 py-2 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-800">
-              <Icon.FiChevronLeft className="h-5 w-5" /> {t("browse_apps")}
-            </a>
-          </Link>
-        </div>
+      <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">
+          <a className="inline-flex items-center justify-start gap-1 rounded-sm py-2 text-gray-900">
+            <Icon.FiArrowLeft className="h-4 w-4" />
+            {isLocaleReady ? t("app_store") : <SkeletonText className="h-6 w-24" />}{" "}
+          </a>
+        </Link>
      </div>
      <div className="mb-16">
-        <AppStoreCategories categories={categories} />
+        <div className="grid h-auto w-full grid-cols-5 gap-3">
+          {categories.map((category) => (
+            <Link key={category.name} href={"/apps/categories/" + category.name}>
+              <a
+                data-testid={`app-store-category-${category.name}`}
+                className="relative flex rounded-sm bg-gray-100 px-6 py-4 sm:block">
+                <div className="self-center">
+                  <h3 className="font-medium capitalize">{category.name}</h3>
+                  <p className="text-sm text-gray-500">
+                    {t("number_apps", { count: category.count })}{" "}
+                    <Icon.FiArrowRight className="inline-block h-4 w-4" />
+                  </p>
+                </div>
+              </a>
+            </Link>
+          ))}
+        </div>
      </div>
    </Shell>
  );
--- a/Show More
+++ b/Show More