v2.0.5

Update settings.json
#4306 : Added darkmode support for select by styling via tailwind (#4824 )
2022-10-10 17:01:53 -06:00 · 2022-10-10 16:27:31 -06:00 · 2022-10-10 18:50:43 +00:00 · 2022-10-10 17:00:09 +00:00 · 2022-10-10 13:40:20 +00:00 · 2022-10-10 13:24:06 +00:00
612 changed files with 22245 additions and 6970 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=""
 # *********************************************************************************************************
@@ -94,6 +94,8 @@ NEXT_PUBLIC_IS_E2E=
 # Used for internal billing system
 NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE=
 NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE=
+NEXT_PUBLIC_IS_PREMIUM_NEW_PLAN=0
+NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE=
 NEXT_PUBLIC_STRIPE_FREE_PLAN_PRICE=
 STRIPE_WEBHOOK_SECRET=
 STRIPE_PRO_PLAN_PRODUCT_ID=
@@ -12,6 +12,9 @@ on:
      - apps/storybook/**
      - packages/ui/**
  workflow_dispatch:
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true

 # List of jobs
 jobs:
@@ -5,6 +5,11 @@ on:
      - main
    paths:
      - "**.tsx?"
+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
@@ -17,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
@@ -4,22 +4,24 @@ on:
  push:
    branches:
      - main
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true

 jobs:
  synchronize-with-crowdin:
    runs-on: ubuntu-latest

    steps:
+      - name: Checkout
+        uses: actions/checkout@v2

-    - name: Checkout
-      uses: actions/checkout@v2
-
-    - name: crowdin action
-      uses: crowdin/github-action@1.4.9
-      with:
-        upload_translations: true
-        download_translations: true
-      env:
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}
-        CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}
+      - name: crowdin action
+        uses: crowdin/github-action@1.4.9
+        with:
+          upload_translations: true
+          download_translations: true
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}
+          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}
@@ -12,6 +12,9 @@ on:
      - apps/swagger/**
      - apps/website/**
      - apps/web/public/**
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
 jobs:
  test:
    timeout-minutes: 20
@@ -97,4 +100,3 @@ jobs:
        with:
          name: test-results
          path: test-results
-
@@ -7,6 +7,9 @@ on:
    paths:
      - apps/web/**
      - packages/embeds/**
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
 jobs:
  e2e-embed:
    timeout-minutes: 20
@@ -25,6 +28,8 @@ jobs:
      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 }}
      NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE }}
+      NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE: ${{ secrets.NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE }}
+      NEXT_PUBLIC_IS_PREMIUM_NEW_PLAN: 1
      STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
      STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
      STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
@@ -8,6 +8,9 @@ on:
    paths:
      - apps/web/**
      - packages/**
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
 jobs:
  e2e:
    timeout-minutes: 20
@@ -26,6 +29,8 @@ jobs:
      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 }}
      NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE }}
+      NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE: ${{ secrets.NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE }}
+      NEXT_PUBLIC_IS_PREMIUM_NEW_PLAN: 1
      STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
      STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
      STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
@@ -1,7 +1,9 @@
 name: "Pull Request Labeler"
 on:
  - pull_request_target
-
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
 jobs:
  labeler:
    permissions:
@@ -6,6 +6,9 @@ on:
    paths:
      - "**.tsx?"
      - "**.jsx?"
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
 jobs:
  lint:
    runs-on: ubuntu-latest
@@ -5,6 +5,9 @@ on:
  pull_request:
    branches:
      - main
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
 jobs:
  required-checks:
    runs-on: ubuntu-latest
@@ -8,6 +8,9 @@ on:
    paths:
      - apps/web/**
      - packages/**
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
 jobs:
  test:
    timeout-minutes: 20
@@ -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>
@@ -58,7 +58,7 @@ Calendly and other scheduling tools are awesome. It made our lives massively eas

 That's where Cal.com comes in. Self-hosted or hosted by us. White-label by design. API-driven and ready to be deployed on your own domain. Full control of your events and data.

-## Product of the Month: April
+## Product of the Month: April 2021

 #### Support us on [Product Hunt](https://www.producthunt.com/posts/calendso?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-calendso)

@@ -207,7 +207,7 @@ Be sure to set the environment variable `NEXTAUTH_URL` to the correct value. If
 yarn test-e2e

 # To open last HTML report run:
-yarn playwright show-report test-results/reports/playwright-html-report 
+yarn playwright show-report test-results/reports/playwright-html-report
 ```

 ### Upgrading from earlier versions
@@ -4,31 +4,31 @@
 */

 // Create a Chromium browser
-const { chromium } = require('playwright')
+const { chromium } = require("playwright");

 // Checkly supports top level await, but we wrap your code in an async function so you can run it locally too.
-async function run () {
-  const browser = await chromium.launch()
-  const page = await browser.newPage()
+async function run() {
+  const browser = await chromium.launch();
+  const page = await browser.newPage();

  // If available, we set the target URL to a preview deployment URL provided by the ENVIRONMENT_URL created by Vercel.
  // Otherwise, we use the Production URL.
-  const targetUrl = process.env.ENVIRONMENT_URL || 'https://app.cal.com'
+  const targetUrl = process.env.ENVIRONMENT_URL || "https://app.cal.com";

  // We visit the page. This waits for the "load" event by default.
-  const response = await page.goto(targetUrl)
+  const response = await page.goto(targetUrl);

  // If the page doesn't return a successful response code, we fail the check
  if (response.status() > 399) {
-    throw new Error(`Failed with response code ${response.status()}`)
+    throw new Error(`Failed with response code ${response.status()}`);
  }

  // We snap a screenshot.
-  await page.screenshot({ path: 'screenshot.jpg' })
+  await page.screenshot({ path: "screenshot.jpg" });

  // We close the page and browser. This is needed for collecting accurate web vitals.
-  await page.close()
-  await browser.close()
+  await page.close();
+  await browser.close();
 }

-run()
+run();
@@ -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",
@@ -28,13 +28,14 @@ export const Default = () => (
 export const Combined = () => (
  <div className="flex flex-col space-y-2">
    <ButtonGroup combined>
-      <Button StartIcon={Trash2} size="icon" color="secondary" combined />
-      <Button StartIcon={Navigation2} size="icon" color="secondary" combined />
-      <Button StartIcon={Clipboard} size="icon" color="secondary" combined />
+      <Button StartIcon={Trash2} size="icon" color="secondary" />
+      <Button StartIcon={Navigation2} size="icon" color="secondary" />
+      <Button StartIcon={Clipboard} size="icon" color="secondary" />
    </ButtonGroup>
    <ButtonGroup combined>
-      <Button StartIcon={ArrowLeft} size="icon" color="secondary" combined />
-      <Button StartIcon={ArrowRight} size="icon" color="secondary" combined />
+      <Button StartIcon={ArrowLeft} size="icon" color="secondary" />
+      <Button StartIcon={ArrowRight} size="icon" color="secondary" />
+      <Button StartIcon={ArrowRight} href="/" size="icon" color="secondary" />
    </ButtonGroup>
  </div>
 );
@@ -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>
+);
@@ -1,13 +1,24 @@
 import { ComponentMeta } from "@storybook/react";

 import { Select } from "@calcom/ui/v2";
+import MultiDropdownSelect from "@calcom/ui/v2/modules/event-types/MultiDropdownSelect";

 export default {
  title: "Form/Select",
  component: Select,
 } as ComponentMeta<typeof Select>;

-const testOptions = [
+const singleOptions = [
+  {
+    label: "Select",
+    value: 0,
+  },
+  ...[5, 10, 15, 20, 30, 45, 60, 90, 120].map((minutes) => ({
+    label: minutes + " " + "minutes",
+    value: minutes,
+  })),
+];
+const multiOptions = [
  {
    label: "Select",
    value: 0,
@@ -18,4 +29,5 @@ const testOptions = [
  })),
 ];

-export const Single = () => <Select options={testOptions} />;
+export const Single = () => <Select options={singleOptions} />;
+export const Multi = () => <MultiDropdownSelect options={multiOptions} />;
@@ -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" />
            )}
@@ -107,9 +107,10 @@ const DestinationCalendarSelector = ({
          control: (defaultStyles) => {
            return {
              ...defaultStyles,
-              borderRadius: "2px",
+              borderRadius: "6px",
              "@media only screen and (min-width: 640px)": {
                ...(defaultStyles["@media only screen and (min-width: 640px)"] as object),
+                width: "100%",
              },
            };
          },
@@ -135,6 +136,9 @@ const DestinationCalendarSelector = ({
        }}
        isLoading={isLoading}
        value={selectedOption}
+        components={{
+          IndicatorSeparator: () => null,
+        }}
      />
    </div>
  );
@@ -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 = {
@@ -16,6 +15,8 @@ type GateProps = {
  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 [rainbowToken, setRainbowToken] = useState<string>();
@@ -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 },
+    },
  });
 }

@@ -63,6 +63,7 @@ function CropContainer({
  );
 }

+/** @deprecated Use `packages/ui/v2/core/ImageUploader.tsx` */
 export default function ImageUploader({
  target,
  id,
@@ -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" />
@@ -1,3 +1,7 @@
+/**
+ * @deprecated
+ * use Component in  "/packages/features/schedules/components/Schedule";
+ **/
 import classNames from "classnames";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { Controller, useFieldArray, useFormContext } from "react-hook-form";
@@ -192,6 +196,10 @@ const CopyTimes = ({ disabled, onApply }: { disabled: number[]; onApply: (select
  );
 };

+/**
+ * @deprecated
+ * use Component in  "/packages/features/schedules/components/Schedule";
+ **/
 export const DayRanges = ({
  name,
  defaultValue = [defaultDayRange],
@@ -324,6 +332,10 @@ const ScheduleBlock = ({ name, day, weekday }: ScheduleBlockProps) => {
  );
 };

+/**
+ * @deprecated
+ * use Component in  "/packages/features/schedules/components/Schedule";
+ **/
 const Schedule = ({ name }: { name: string }) => {
  const { i18n } = useLocale();
  return (
@@ -1,3 +1,7 @@
+/**
+ * @deprecated modifications to this file should be v2 only
+ * Use `/packages/features/schedules/components/ScheduleListItem.tsx` instead
+ */
 import Link from "next/link";
 import { Fragment } from "react";

@@ -9,6 +13,10 @@ import { Button } from "@calcom/ui";
 import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/Dropdown";
 import { Icon } from "@calcom/ui/Icon";

+/**
+ * @deprecated modifications to this file should be v2 only
+ * Use `/packages/features/schedules/components/ScheduleListItem.tsx` instead
+ */
 export function ScheduleListItem({
  schedule,
  deleteFunction,
@@ -37,7 +45,7 @@ export function ScheduleListItem({
              <p className="mt-1 text-xs text-neutral-500">
                {schedule.availability.map((availability: Availability) => (
                  <Fragment key={availability.id}>
-                    {availabilityAsString(availability, i18n.language)}
+                    {availabilityAsString(availability, { locale: i18n.language })}
                    <br />
                  </Fragment>
                ))}
@@ -45,6 +53,7 @@ export function ScheduleListItem({
            </a>
          </Link>
        </div>
+
        <Dropdown>
          <DropdownMenuTrigger className="group mr-5 h-10 w-10 border border-transparent p-0 text-neutral-500 hover:border-gray-200">
            <Icon.FiMoreHorizontal className="h-5 w-5 group-hover:text-gray-800" />
@@ -2,9 +2,10 @@ 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 border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
+    <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 />
@@ -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")))}
@@ -150,4 +152,6 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
  );
 };

+AvailableTimes.displayName = "AvailableTimes";
+
 export default AvailableTimes;
@@ -13,6 +13,7 @@ import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "
 import { Icon } from "@calcom/ui/Icon";
 import { Tooltip } from "@calcom/ui/Tooltip";
 import { TextArea } from "@calcom/ui/form/fields";
+import Badge from "@calcom/ui/v2/core/Badge";
 import Button from "@calcom/ui/v2/core/Button";

 import useMeQuery from "@lib/hooks/useMeQuery";
@@ -28,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) {
@@ -43,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,
@@ -55,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);
      },
@@ -84,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);
      },
@@ -100,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",
@@ -145,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");
  }

@@ -182,12 +178,8 @@ function BookingListItem(booking: BookingItemProps) {
  let recurringStrings: string[] = [];
  let recurringDates: Date[] = [];

-  if (booking.recurringBookings && booking.eventType.recurringEvent?.freq !== undefined) {
-    [recurringStrings, recurringDates] = extractRecurringDates(
-      booking.recurringBookings,
-      user?.timeZone,
-      i18n
-    );
+  if (booking.recurringBookings !== undefined && booking.eventType.recurringEvent?.freq !== undefined) {
+    [recurringStrings, recurringDates] = extractRecurringDates(booking, user?.timeZone, i18n);
  }

  const location = booking.location || "";
@@ -260,90 +252,103 @@ 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-44" 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")}
            </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>
-                )}
+
+            {isPending && (
+              <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 className="ltr:mr-2 rtl:ml-2" variant="orange">
+                {t("pending_payment")}
+              </Badge>
+            )}
+
+            <div className="mt-2 text-sm text-gray-400">
+              <RecurringBookingsTooltip
+                booking={booking}
+                recurringStrings={recurringStrings}
+                recurringDates={recurringDates}
+              />
            </div>
          </div>
        </td>
-        <td className={"flex-1 px-4" + (isRejected ? " line-through" : "")} onClick={onClick}>
-          <div className="cursor-pointer py-4">
-            <div className="sm:hidden">
-              {isPending && <Tag className="mb-2 ltr:mr-2 rtl:ml-2">{t("unconfirmed")}</Tag>}
-              {!!booking?.eventType?.price && !booking.paid && (
-                <Tag className="mb-2 ltr:mr-2 rtl:ml-2">Pending payment</Tag>
-              )}
-              <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>
+        <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(booking.startTime).format(user && user.timeFormat === 12 ? "h:mma" : "HH:mm")} -{" "}
+                {dayjs(booking.endTime).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.eventType?.team && <strong>{booking.eventType.team.name}: </strong>}
              {booking.title}
+              <span> </span>
+
              {!!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>
            )}
-
            {booking.attendees.length !== 0 && (
-              <a
-                className="text-sm text-gray-900 hover:text-blue-500"
-                href={"mailto:" + booking.attendees[0].email}
-                onClick={(e) => e.stopPropagation()}>
-                {booking.attendees[0].email}
-              </a>
+              <DisplayAttendees
+                attendees={booking.attendees}
+                user={booking.user}
+                currentEmail={user?.email}
+              />
            )}
            {isCancelled && booking.rescheduled && (
              <div className="mt-2 inline-block text-left text-sm md:hidden">
@@ -352,8 +357,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} />}
@@ -361,6 +365,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 />
@@ -372,6 +377,145 @@ 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;
+  email: string;
+}
+
+const FirstAttendee = ({
+  user,
+  currentEmail,
+}: {
+  user: UserProps;
+  currentEmail: string | null | undefined;
+}) => {
+  return user.email === currentEmail ? (
+    <div className="inline-block">You</div>
+  ) : (
+    <a
+      key={user.email}
+      className=" hover:text-blue-500"
+      href={"mailto:" + user.email}
+      onClick={(e) => e.stopPropagation()}>
+      {user.name}
+    </a>
+  );
+};
+
+const Attendee: React.FC<{ email: string; children: React.ReactNode }> = ({ email, children }) => {
+  return (
+    <a className=" hover:text-blue-500" href={"mailto:" + email} onClick={(e) => e.stopPropagation()}>
+      {children}
+    </a>
+  );
+};
+
+interface AttendeeProps {
+  name: string;
+  email: string;
+}
+
+const DisplayAttendees = ({
+  attendees,
+  user,
+  currentEmail,
+}: {
+  attendees: AttendeeProps[];
+  user: UserProps | null;
+  currentEmail: string | null | undefined;
+}) => {
+  if (attendees.length === 1) {
+    return (
+      <div className="text-sm text-gray-900">
+        {user && <FirstAttendee user={user} currentEmail={currentEmail} />}
+        <span>&nbsp;and&nbsp;</span>
+        <Attendee email={attendees[0].email}>{attendees[0].name}</Attendee>
+      </div>
+    );
+  } else if (attendees.length === 2) {
+    return (
+      <div className="text-sm text-gray-900">
+        {user && <FirstAttendee user={user} currentEmail={currentEmail} />}
+        <span>,&nbsp;</span>
+        <Attendee email={attendees[0].email}>{attendees[0].name}</Attendee>
+        <div className="inline-block text-sm text-gray-900">&nbsp;and&nbsp;</div>
+        <Attendee email={attendees[1].email}>{attendees[1].name}</Attendee>
+      </div>
+    );
+  } else {
+    return (
+      <div className="text-sm text-gray-900">
+        {user && <FirstAttendee user={user} currentEmail={currentEmail} />}
+        <span>,&nbsp;</span>
+        <Attendee email={attendees[0].email}>{attendees[0].name}</Attendee>
+        <span>&nbsp;&&nbsp;</span>
+        <Tooltip
+          content={attendees.slice(1).map((attendee, key) => (
+            <p key={key}>{attendee.name}</p>
+          ))}>
+          <div className="inline-block">{attendees.length - 1} more</div>
+        </Tooltip>
+      </div>
+    );
+  }
+};
+
 const Tag = ({ children, className = "" }: React.PropsWithChildren<{ className?: string }>) => {
  return (
    <span
@@ -2,9 +2,10 @@ import React from "react";

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

+/** @deprecated Use `apps/web/components/v2/bookings/SkeletonLoader.tsx` */
 function SkeletonLoader() {
  return (
-    <ul className="mx-6 mt-6 animate-pulse divide-y divide-neutral-200 border border-gray-200 bg-white sm:overflow-hidden">
+    <ul className="animate-pulse divide-y divide-neutral-200 rounded-md border border-gray-200 bg-white sm:overflow-hidden">
      <SkeletonItem />
      <SkeletonItem />
      <SkeletonItem />
@@ -16,7 +17,7 @@ export default SkeletonLoader;

 function SkeletonItem() {
  return (
-    <li className="group flex w-full items-center justify-between px-2 py-4 sm:px-6">
+    <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">
@@ -1,8 +1,8 @@
 import { FC, useEffect, useState } from "react";

 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import Switch from "@calcom/ui/Switch";
-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();
@@ -33,20 +34,22 @@ const TimeOptions: FC<Props> = ({ onToggle24hClock, onSelectTimeZone, timeFormat
  };

  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,10 +1,11 @@
 // 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";
@@ -24,8 +25,7 @@ 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";
@@ -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,16 +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 +246,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 +300,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 +320,7 @@ 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(timeFormatFromProfile || detectBrowserTimeFormat);
  const [gateState, gateDispatcher] = useReducer(
    (state: GateState, newState: Partial<GateState>) => ({
      ...state,
@@ -316,10 +333,6 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
    setTimeZone(localStorageTimeZone() || dayjs.tz.guess());
  }, []);

-  useEffect(() => {
-    setIsAvailableTimesVisible(!!query.date);
-  }, [query.date]);
-
  // TODO: Improve this;
  useExposePlanGlobally(eventType.users.length === 1 ? eventType.users[0].plan : "PRO");

@@ -338,14 +351,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,9 +359,12 @@ 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 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.
@@ -385,201 +394,109 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
      <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 flex-col",
+            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 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 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]"
+                  )}>
+                  <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="flex">
+                        <div>
+                          <Icon.FiInfo className="mr-[10px] ml-[2px] inline-block h-4 w-4" />
                        </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")}
+                        <EventTypeDescriptionSafeHTML eventType={eventType} />
+                      </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>
-                      {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}
-
-                      <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>
+                    )}
+                    {timezoneDropdown}
                  </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 +509,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,7 +10,6 @@ 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";

@@ -34,11 +34,11 @@ 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";
@@ -199,16 +199,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 = () => {
@@ -242,6 +238,7 @@ const BookingPage = ({
      guests: guestListEmails,
      notes: booking.description || "",
      rescheduleReason: "",
+      smsReminderNumber: booking.smsReminderNumber || undefined,
      customInputs: eventType.customInputs.reduce(
        (customInputs, input) => ({
          ...customInputs,
@@ -448,7 +445,6 @@ 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"
          )}>
@@ -526,7 +522,7 @@ const BookingPage = ({
                          content={recurringStrings.slice(5).map((aDate, key) => (
                            <p key={key}>{aDate}</p>
                          ))}>
-                          <p className="dark:text-darkgray-600  text-sm">
+                          <p className="dark:text-darkgray-600 text-sm">
                            {t("plus_more", { count: recurringStrings.length - 5 })}
                          </p>
                        </Tooltip>
@@ -594,9 +590,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...)
@@ -718,90 +712,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 && (
@@ -818,7 +803,6 @@ const BookingPage = ({
                        placeholder={t("enter_phone_number")}
                        id="smsReminderNumber"
                        required
-                        disabled={disableInput}
                      />
                    </div>
                    {bookingForm.formState.errors.smsReminderNumber && (
@@ -858,17 +842,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"
      />
@@ -32,7 +32,7 @@ export const EventTypeDescription = ({ eventType, className }: EventTypeDescript
    <>
      <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]">
+          <h2 className="max-w-[280px] overflow-hidden text-ellipsis sm:max-w-[500px]">
            {eventType.description.substring(0, 100)}
            {eventType.description.length > 100 && "..."}
          </h2>
@@ -47,8 +47,8 @@ export default function RecurringEventController({
          <Alert severity="warning" title={t("warning_payment_recurring_event")} />
        ) : (
          <>
-            <div className="relative flex items-start">
-              <div className="flex h-5 items-center">
+            <div className="flex items-start">
+              <div className="flex h-5 items-start">
                <input
                  onChange={(event) => {
                    onRecurringEventDefined(event?.target.checked);
@@ -1,19 +1,18 @@
-import React from "react";
-
 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>
      <div className="mb-4 flex items-center">
        <SkeletonAvatar width="8" height="8" />
        <div className="space-y-1">
-          <SkeletonText height="4" width="16" />
-          <SkeletonText height="4" width="24" />
+          <SkeletonText className="h-4 w-16" />
+          <SkeletonText className="h-4 w-24" />
        </div>
      </div>
-      <ul className="divide-y divide-neutral-200 border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
+      <ul className="divide-y divide-neutral-200 rounded-md border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
        <SkeletonItem />
        <SkeletonItem />
        <SkeletonItem />
@@ -44,19 +43,6 @@ function SkeletonItem() {
          </ul>
        </div>
      </div>
-      <div className="mt-4 hidden flex-shrink-0 sm:mt-0 sm:ml-5 sm:flex">
-        <div className="flex justify-between rtl:space-x-reverse">
-          <div className="cursor-pointer appearance-none rounded-sm border border-transparent p-2 text-neutral-500 hover:border-gray-300 hover:text-neutral-900">
-            <Icon.FiExternalLink className="h-5 w-5" />
-          </div>
-          <div className="cursor-pointer appearance-none rounded-sm border border-transparent p-2 text-neutral-500 hover:border-gray-300 hover:text-neutral-900">
-            <Icon.FiLink className="h-5 w-5" />
-          </div>
-          <div className="cursor-pointer appearance-none rounded-sm border border-transparent p-2 text-neutral-500 hover:border-gray-300 hover:text-neutral-900">
-            <Icon.FiMoreHorizontal className="h-5 w-5" />
-          </div>
-        </div>
-      </div>
    </li>
  );
 }
@@ -0,0 +1,42 @@
+import { InstallAppButtonWithoutPlanCheck } from "@calcom/app-store/components";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import type { App } from "@calcom/types/App";
+import Button from "@calcom/ui/v2/core/Button";
+
+interface ICalendarItem {
+  title: string;
+  description?: string;
+  imageSrc: string;
+  type: App["type"];
+}
+
+const CalendarItem = (props: ICalendarItem) => {
+  const { title, imageSrc, type } = props;
+  const { t } = useLocale();
+  return (
+    <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) => (
+          <Button
+            {...buttonProps}
+            color="secondary"
+            type="button"
+            onClick={(event) => {
+              // Save cookie key to return url step
+              document.cookie = `return-to=${window.location.href};path=/;max-age=3600;SameSite=Lax`;
+              buttonProps && buttonProps.onClick && buttonProps?.onClick(event);
+            }}>
+            {t("connect")}
+          </Button>
+        )}
+      />
+    </div>
+  );
+};
+
+export { CalendarItem };
@@ -0,0 +1,86 @@
+import { useMutation } from "@tanstack/react-query";
+
+import showToast from "@calcom/lib/notification";
+import { trpc } from "@calcom/trpc/react";
+import { Switch } from "@calcom/ui/v2";
+
+import classNames from "@lib/classNames";
+
+interface ICalendarSwitchProps {
+  title: string;
+  externalId: string;
+  type: string;
+  isChecked: boolean;
+  name: string;
+  isLastItemInList?: boolean;
+}
+const CalendarSwitch = (props: ICalendarSwitchProps) => {
+  const { title, externalId, type, isChecked, name, isLastItemInList = false } = props;
+  const utils = trpc.useContext();
+  const mutation = useMutation<
+    unknown,
+    unknown,
+    {
+      isOn: boolean;
+    }
+  >(
+    async ({ isOn }: { isOn: boolean }) => {
+      const body = {
+        integration: type,
+        externalId: 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 "${title}""`, "error");
+      },
+    }
+  );
+  return (
+    <div className={classNames("flex flex-row items-center", !isLastItemInList ? "mb-4" : "")}>
+      <div className="flex pl-2">
+        <Switch
+          id={externalId}
+          defaultChecked={isChecked}
+          onCheckedChange={(isOn: boolean) => {
+            mutation.mutate({ isOn });
+          }}
+        />
+      </div>
+      <label className="ml-3 text-sm font-medium leading-5" htmlFor={externalId}>
+        {name}
+      </label>
+    </div>
+  );
+};
+
+export { CalendarSwitch };
@@ -0,0 +1,76 @@
+import { DotsHorizontalIcon } from "@heroicons/react/solid";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Button } from "@calcom/ui/v2";
+
+import { CalendarSwitch } from "./CalendarSwitch";
+
+interface IConnectedCalendarItem {
+  name: string;
+  logo: string;
+  externalId?: string;
+  integrationType: string;
+  calendars?: {
+    primary: true | null;
+    isSelected: boolean;
+    credentialId: number;
+    name?: string | undefined;
+    readOnly?: boolean | undefined;
+    userId?: number | undefined;
+    integration?: string | undefined;
+    externalId: string;
+  }[];
+}
+
+const ConnectedCalendarItem = (prop: IConnectedCalendarItem) => {
+  const { name, logo, externalId, calendars, integrationType } = prop;
+  const { t } = useLocale();
+  return (
+    <>
+      <div className="flex flex-row items-center p-4">
+        <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}
+            {/* 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> */}
+          </p>
+          <div className="fle-row flex">
+            <span
+              title={externalId}
+              className="max-w-44 mt-1 overflow-hidden text-ellipsis whitespace-nowrap font-sans text-sm text-gray-500">
+              {externalId}{" "}
+            </span>
+          </div>
+        </div>
+        {/* 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> */}
+      </div>
+      <div className="h-[1px] w-full border-b border-gray-200" />
+      <div>
+        <ul className="p-4">
+          {calendars?.map((calendar, i) => (
+            <CalendarSwitch
+              key={calendar.externalId}
+              externalId={calendar.externalId}
+              title={calendar.name || "Nameless Calendar"}
+              name={calendar.name || "Nameless Calendar"}
+              type={integrationType}
+              isChecked={calendar.isSelected}
+              isLastItemInList={i === calendars.length - 1}
+            />
+          ))}
+        </ul>
+      </div>
+    </>
+  );
+};
+
+export { ConnectedCalendarItem };
@@ -0,0 +1,37 @@
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { inferMutationInput, trpc } from "@calcom/trpc/react";
+
+import DestinationCalendarSelector from "@components/DestinationCalendarSelector";
+
+interface ICreateEventsOnCalendarSelectProps {
+  calendar?: inferMutationInput<"viewer.setDestinationCalendar"> | null;
+}
+
+const CreateEventsOnCalendarSelect = (props: ICreateEventsOnCalendarSelectProps) => {
+  const { calendar } = props;
+  const { t } = useLocale();
+  const mutation = trpc.useMutation(["viewer.setDestinationCalendar"]);
+
+  return (
+    <>
+      <div className="mt-6 flex flex-row">
+        <div className="w-full">
+          <label htmlFor="createEventsOn" className="flex text-sm font-medium text-neutral-700">
+            {t("create_events_on")}
+          </label>
+          <div className="mt-2">
+            <DestinationCalendarSelector
+              value={calendar ? calendar.externalId : undefined}
+              onChange={(calendar) => {
+                mutation.mutate(calendar);
+              }}
+              hidePlaceholder
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export { CreateEventsOnCalendarSelect };
@@ -0,0 +1,9 @@
+const StepCard: React.FC<{ children: React.ReactNode }> = (props) => {
+  return (
+    <div className="mt-10 rounded-md border border-gray-200 bg-white p-4 dark:bg-black sm:p-8">
+      {props.children}
+    </div>
+  );
+};
+
+export { StepCard };
@@ -0,0 +1,37 @@
+import classNames from "@calcom/lib/classNames";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+
+interface ISteps {
+  maxSteps: number;
+  currentStep: number;
+  navigateToStep: (step: number) => void;
+}
+
+const Steps = (props: ISteps) => {
+  const { maxSteps, currentStep, navigateToStep } = props;
+  const { t } = useLocale();
+  return (
+    <div className="mt-6 space-y-2">
+      <p className="text-xs font-medium text-gray-500 dark:text-white">
+        {t("current_step_of_total", { currentStep: currentStep + 1, maxSteps })}
+      </p>
+      <div className="flex w-full space-x-2 rtl:space-x-reverse">
+        {new Array(maxSteps).fill(0).map((_s, index) => {
+          return index <= currentStep ? (
+            <div
+              key={`step-${index}`}
+              onClick={() => navigateToStep(index)}
+              className={classNames(
+                "h-1 w-1/4 rounded-[1px] bg-black dark:bg-white",
+                index < currentStep ? "cursor-pointer" : ""
+              )}
+            />
+          ) : (
+            <div key={`step-${index}`} className="h-1 w-1/4 rounded-[1px] bg-black bg-opacity-25" />
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+export { Steps };
@@ -0,0 +1,108 @@
+import { ArrowRightIcon } from "@heroicons/react/solid";
+
+import classNames from "@calcom/lib/classNames";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
+import { List } from "@calcom/ui/List";
+import { SkeletonAvatar, SkeletonText, SkeletonButton } from "@calcom/ui/v2";
+
+import { CalendarItem } from "../components/CalendarItem";
+import { ConnectedCalendarItem } from "../components/ConnectedCalendarItem";
+import { CreateEventsOnCalendarSelect } from "../components/CreateEventsOnCalendarSelect";
+
+interface IConnectCalendarsProps {
+  nextStep: () => void;
+}
+
+const ConnectedCalendars = (props: IConnectCalendarsProps) => {
+  const { nextStep } = props;
+  const queryConnectedCalendars = trpc.useQuery(["viewer.connectedCalendars"]);
+  const { t } = useLocale();
+  const queryIntegrations = trpc.useQuery([
+    "viewer.integrations",
+    { variant: "calendar", onlyInstalled: false },
+  ]);
+
+  const firstCalendar = queryConnectedCalendars.data?.connectedCalendars.find(
+    (item) => item.calendars && item.calendars?.length > 0
+  );
+  const disabledNextButton = firstCalendar === undefined;
+  const destinationCalendar = queryConnectedCalendars.data?.destinationCalendar;
+  return (
+    <>
+      {/* Already connected calendars  */}
+      {!queryConnectedCalendars.isLoading &&
+        firstCalendar &&
+        firstCalendar.integration &&
+        firstCalendar.integration.title &&
+        firstCalendar.integration.imageSrc && (
+          <>
+            <List className="rounded-md border border-gray-200 bg-white p-0 dark:bg-black">
+              <ConnectedCalendarItem
+                key={firstCalendar.integration.title}
+                name={firstCalendar.integration.title}
+                logo={firstCalendar.integration.imageSrc}
+                externalId={
+                  firstCalendar && firstCalendar.calendars && firstCalendar.calendars.length > 0
+                    ? firstCalendar.calendars[0].externalId
+                    : ""
+                }
+                calendars={firstCalendar.calendars}
+                integrationType={firstCalendar.integration.type}
+              />
+            </List>
+            {/* Create event on selected calendar */}
+            <CreateEventsOnCalendarSelect calendar={destinationCalendar} />
+            <p className="mt-4 text-sm text-gray-500">{t("connect_calendars_from_app_store")}</p>
+          </>
+        )}
+
+      {/* Connect calendars list */}
+      {firstCalendar === undefined && queryIntegrations.data && queryIntegrations.data.items.length > 0 && (
+        <List className="mx-1 divide-y divide-gray-200 rounded-md border border-gray-200 bg-white p-0 dark:bg-black sm:mx-0">
+          {queryIntegrations.data &&
+            queryIntegrations.data.items.map((item) => (
+              <li key={item.title}>
+                {item.title && item.imageSrc && (
+                  <CalendarItem
+                    type={item.type}
+                    title={item.title}
+                    description={item.description}
+                    imageSrc={item.imageSrc}
+                  />
+                )}
+              </li>
+            ))}
+        </List>
+      )}
+
+      {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 (
+              <li className="flex w-full flex-row justify-center border-b-0 py-6" key={index}>
+                <SkeletonAvatar className="mx-6 h-8 w-8 px-4" />
+                <SkeletonText className="ml-1 mr-4 mt-3 h-5 w-full" />
+                <SkeletonButton className="mr-6 h-8 w-20 rounded-md p-5" />
+              </li>
+            );
+          })}
+        </ul>
+      )}
+      <button
+        type="button"
+        data-testid="save-calendar-button"
+        className={classNames(
+          "mt-8 flex w-full flex-row justify-center rounded-md border border-black bg-black p-2 text-center text-sm text-white",
+          disabledNextButton ? "cursor-not-allowed opacity-20" : ""
+        )}
+        onClick={() => nextStep()}
+        disabled={disabledNextButton}>
+        {firstCalendar ? `${t("continue")}` : `${t("next_step_text")}`}
+        <ArrowRightIcon className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
+      </button>
+    </>
+  );
+};
+
+export { ConnectedCalendars };
@@ -0,0 +1,88 @@
+import { ArrowRightIcon } from "@heroicons/react/solid";
+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";
+
+interface ISetupAvailabilityProps {
+  nextStep: () => void;
+  defaultScheduleId?: number | null;
+}
+
+const SetupAvailability = (props: ISetupAvailabilityProps) => {
+  const { defaultScheduleId } = props;
+
+  const { t } = useLocale();
+  const { nextStep } = props;
+
+  const router = useRouter();
+  let queryAvailability;
+  if (defaultScheduleId) {
+    queryAvailability = trpc.useQuery(["viewer.availability.schedule", { scheduleId: defaultScheduleId }], {
+      enabled: router.isReady,
+    });
+  }
+
+  const availabilityForm = useForm({
+    defaultValues: {
+      schedule: queryAvailability?.data?.availability || DEFAULT_SCHEDULE,
+    },
+  });
+
+  const mutationOptions = {
+    onError: (error: TRPCClientErrorLike<AppRouter>) => {
+      throw new Error(error.message);
+    },
+    onSuccess: () => {
+      nextStep();
+    },
+  };
+  const createSchedule = trpc.useMutation("viewer.availability.schedule.create", mutationOptions);
+  const updateSchedule = trpc.useMutation("viewer.availability.schedule.update", mutationOptions);
+  return (
+    <Form
+      className="w-full bg-white text-black dark:bg-opacity-5 dark:text-white"
+      form={availabilityForm}
+      handleSubmit={async (values) => {
+        try {
+          if (defaultScheduleId) {
+            await updateSchedule.mutate({
+              scheduleId: defaultScheduleId,
+              name: t("default_schedule_name"),
+              ...values,
+            });
+          } else {
+            await createSchedule.mutate({
+              name: t("default_schedule_name"),
+              ...values,
+            });
+          }
+        } catch (error) {
+          if (error instanceof Error) {
+            // setError(error);
+            // @TODO: log error
+          }
+        }
+      }}>
+      <Schedule control={availabilityForm.control} name="schedule" weekStart={1} />
+
+      <div>
+        <Button
+          data-testid="save-availability"
+          type="submit"
+          className="mt-2 w-full justify-center p-2 text-sm sm:mt-8"
+          disabled={availabilityForm.formState.isSubmitting}>
+          {t("next_step_text")} <ArrowRightIcon className="ml-2 h-4 w-4 self-center" />
+        </Button>
+      </div>
+    </Form>
+  );
+};
+
+export { SetupAvailability };
@@ -0,0 +1,170 @@
+import { ArrowRightIcon } from "@heroicons/react/solid";
+import { useRouter } from "next/router";
+import { FormEvent, useRef, useState } from "react";
+import { useForm } from "react-hook-form";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { User } from "@calcom/prisma/client";
+import { trpc } from "@calcom/trpc/react";
+import { Button, showToast, TextArea } from "@calcom/ui/v2";
+import ImageUploader from "@calcom/ui/v2/core/ImageUploader";
+
+import { AvatarSSR } from "@components/ui/AvatarSSR";
+
+interface IUserProfile {
+  user?: User;
+}
+
+type FormData = {
+  bio: string;
+};
+
+const UserProfile = (props: IUserProfile) => {
+  const { user } = props;
+  const { t } = useLocale();
+  const avatarRef = useRef<HTMLInputElement>(null!);
+  const bioRef = useRef<HTMLTextAreaElement>(null);
+  const {
+    register,
+    setValue,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<FormData>({ defaultValues: { bio: user?.bio || "" } });
+  const { data: eventTypes } = trpc.useQuery(["viewer.eventTypes.list"]);
+  const [imageSrc, setImageSrc] = useState<string>(user?.avatar || "");
+  const utils = trpc.useContext();
+  const router = useRouter();
+  const createEventType = trpc.useMutation("viewer.eventTypes.create");
+
+  const mutation = trpc.useMutation("viewer.updateProfile", {
+    onSuccess: async (_data, context) => {
+      if (context.avatar) {
+        showToast(t("your_user_profile_updated_successfully"), "success");
+        await utils.refetchQueries(["viewer.me"]);
+      } else {
+        try {
+          if (eventTypes?.length === 0) {
+            await Promise.all(
+              DEFAULT_EVENT_TYPES.map(async (event) => {
+                return createEventType.mutate(event);
+              })
+            );
+          }
+        } catch (error) {
+          console.error(error);
+        }
+
+        await utils.refetchQueries(["viewer.me"]);
+        router.push("/");
+      }
+    },
+    onError: () => {
+      showToast(t("problem_saving_user_profile"), "error");
+    },
+  });
+  const onSubmit = handleSubmit((data: { bio: string }) => {
+    const { bio } = data;
+
+    mutation.mutate({
+      bio,
+      completedOnboarding: true,
+    });
+  });
+
+  async function updateProfileHandler(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const enteredAvatar = avatarRef.current.value;
+    mutation.mutate({
+      avatar: enteredAvatar,
+    });
+  }
+
+  const DEFAULT_EVENT_TYPES = [
+    {
+      title: t("15min_meeting"),
+      slug: "15min",
+      length: 15,
+    },
+    {
+      title: t("30min_meeting"),
+      slug: "30min",
+      length: 30,
+    },
+    {
+      title: t("secret_meeting"),
+      slug: "secret",
+      length: 15,
+      hidden: true,
+    },
+  ];
+
+  return (
+    <form onSubmit={onSubmit}>
+      <p className="font-cal text-sm">{t("profile_picture")}</p>
+      <div className="mt-4 flex flex-row items-center justify-start rtl:justify-end">
+        {user && <AvatarSSR user={user} alt="Profile picture" className="h-16 w-16" />}
+        <input
+          ref={avatarRef}
+          type="hidden"
+          name="avatar"
+          id="avatar"
+          placeholder="URL"
+          className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 text-sm focus:border-neutral-800 focus:outline-none focus:ring-neutral-800"
+          defaultValue={imageSrc}
+        />
+        <div className="flex items-center px-4">
+          <ImageUploader
+            target="avatar"
+            id="avatar-upload"
+            buttonMsg={t("upload")}
+            handleAvatarChange={(newAvatar) => {
+              avatarRef.current.value = newAvatar;
+              const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+                window.HTMLInputElement.prototype,
+                "value"
+              )?.set;
+              nativeInputValueSetter?.call(avatarRef.current, newAvatar);
+              const ev2 = new Event("input", { bubbles: true });
+              avatarRef.current.dispatchEvent(ev2);
+              updateProfileHandler(ev2 as unknown as FormEvent<HTMLFormElement>);
+              setImageSrc(newAvatar);
+            }}
+            imageSrc={imageSrc}
+          />
+        </div>
+      </div>
+      <fieldset className="mt-8">
+        <label htmlFor="bio" className="mb-2 block text-sm font-medium text-gray-700">
+          {t("about")}
+        </label>
+        <TextArea
+          {...register("bio", { required: true })}
+          ref={bioRef}
+          name="bio"
+          id="bio"
+          className="mt-1 block h-[60px] w-full rounded-sm border border-gray-300 px-3 py-2 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
+          defaultValue={user?.bio || undefined}
+          onChange={(event) => {
+            setValue("bio", event.target.value);
+          }}
+        />
+        {errors.bio && (
+          <p data-testid="required" className="py-2 text-xs text-red-500">
+            {t("required")}
+          </p>
+        )}
+        <p className="mt-2 font-sans text-sm font-normal text-gray-600 dark:text-white">
+          {t("few_sentences_about_yourself")}
+        </p>
+      </fieldset>
+      <Button
+        type="submit"
+        className="mt-8 flex w-full flex-row justify-center rounded-md border border-black bg-black p-2 text-center text-sm text-white">
+        {t("finish")}
+        <ArrowRightIcon className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
+      </Button>
+    </form>
+  );
+};
+
+export default UserProfile;
@@ -0,0 +1,122 @@
+import { ArrowRightIcon } from "@heroicons/react/outline";
+import { useRef, useState } from "react";
+import { useForm } from "react-hook-form";
+
+import dayjs from "@calcom/dayjs";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { User } from "@calcom/prisma/client";
+import { trpc } from "@calcom/trpc/react";
+import TimezoneSelect from "@calcom/ui/form/TimezoneSelect";
+import { Button } from "@calcom/ui/v2";
+
+import { UsernameAvailability } from "@components/ui/UsernameAvailability";
+
+interface IUserSettingsProps {
+  user: User;
+  nextStep: () => void;
+}
+
+type FormData = {
+  name: string;
+};
+
+const UserSettings = (props: IUserSettingsProps) => {
+  const { user, nextStep } = props;
+  const { t } = useLocale();
+  const [selectedTimeZone, setSelectedTimeZone] = useState(user.timeZone ?? dayjs.tz.guess());
+  const { register, handleSubmit, formState } = useForm<FormData>({
+    defaultValues: {
+      name: user?.name || undefined,
+    },
+    reValidateMode: "onChange",
+  });
+  const { errors } = formState;
+  const defaultOptions = { required: true, maxLength: 255 };
+
+  const utils = trpc.useContext();
+  const onSuccess = async () => {
+    await utils.invalidateQueries(["viewer.me"]);
+    nextStep();
+  };
+  const mutation = trpc.useMutation("viewer.updateProfile", {
+    onSuccess: onSuccess,
+  });
+  const { data: stripeCustomer } = trpc.useQuery(["viewer.stripeCustomer"]);
+  const paymentRequired = stripeCustomer?.isPremium ? !stripeCustomer?.paidForPremium : false;
+  const onSubmit = handleSubmit((data) => {
+    if (paymentRequired) {
+      return;
+    }
+    mutation.mutate({
+      name: data.name,
+      timeZone: selectedTimeZone,
+    });
+  });
+  const [currentUsername, setCurrentUsername] = useState(user.username || undefined);
+  const [inputUsernameValue, setInputUsernameValue] = useState(currentUsername);
+  const usernameRef = useRef<HTMLInputElement>(null!);
+
+  return (
+    <form onSubmit={onSubmit}>
+      <div className="space-y-6">
+        {/* Username textfield */}
+        <UsernameAvailability
+          readonly={true}
+          currentUsername={currentUsername}
+          setCurrentUsername={setCurrentUsername}
+          inputUsernameValue={inputUsernameValue}
+          usernameRef={usernameRef}
+          setInputUsernameValue={setInputUsernameValue}
+          user={user}
+        />
+
+        {/* Full name textfield */}
+        <div className="w-full">
+          <label htmlFor="name" className="mb-2 block text-sm font-medium text-gray-700">
+            {t("full_name")}
+          </label>
+          <input
+            {...register("name", defaultOptions)}
+            id="name"
+            name="name"
+            type="text"
+            autoComplete="off"
+            autoCorrect="off"
+            className="w-full rounded-md border border-gray-300 text-sm"
+          />
+          {errors.name && (
+            <p data-testid="required" className="py-2 text-xs text-red-500">
+              {t("required")}
+            </p>
+          )}
+        </div>
+        {/* Timezone select field */}
+        <div className="w-full">
+          <label htmlFor="timeZone" className="block text-sm font-medium text-gray-700">
+            {t("timezone")}
+          </label>
+
+          <TimezoneSelect
+            id="timeZone"
+            value={selectedTimeZone}
+            onChange={({ value }) => setSelectedTimeZone(value)}
+            className="mt-2 w-full rounded-md text-sm"
+          />
+
+          <p className="mt-3 flex flex-row font-sans text-xs leading-tight text-gray-500 dark:text-white">
+            {t("current_time")} {dayjs().tz(selectedTimeZone).format("LT").toString().toLowerCase()}
+          </p>
+        </div>
+      </div>
+      <Button
+        type="submit"
+        className="mt-8 flex w-full flex-row justify-center"
+        disabled={mutation.isLoading}>
+        {t("next_step_text")}
+        <ArrowRightIcon className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
+      </Button>
+    </form>
+  );
+};
+
+export { UserSettings };
@@ -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";
@@ -1,17 +1,20 @@
 import React, { SyntheticEvent, useState } from "react";

+import { ErrorCode } from "@calcom/lib/auth";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
 import Button from "@calcom/ui/Button";

-import { ErrorCode } from "@lib/auth";
-import { useLocale } from "@lib/hooks/useLocale";
-
 const ChangePasswordSection = () => {
  const [oldPassword, setOldPassword] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
  const [isSubmitting, setIsSubmitting] = useState(false);
-  const { t } = useLocale();
+  const { t, isLocaleReady } = useLocale();
+  // hold display until the locale is loaded
+  if (!isLocaleReady) {
+    return null;
+  }

  const errorMessages: { [key: string]: string } = {
    [ErrorCode.IncorrectPassword]: t("current_incorrect_password"),
@@ -4,6 +4,7 @@ import { trpc } from "@calcom/trpc/react";
 import Badge from "@calcom/ui/Badge";
 import Button from "@calcom/ui/Button";

+/** @deprecated Use `packages/features/ee/teams/components/DisableTeamImpersonation.tsx` */
 const DisableTeamImpersonation = ({ teamId, memberId }: { teamId: number; memberId: number }) => {
  const { t } = useLocale();

@@ -13,6 +13,7 @@ type MembershipRoleOption = {
  value: MembershipRole;
 };

+/** @deprecated Use `packages/features/ee/teams/components/MemberChangeRoleModal.tsx` */
 export default function MemberChangeRoleModal(props: {
  isOpen: boolean;
  currentMember: MembershipRole;
@@ -26,6 +26,7 @@ type MembershipRoleOption = {

 const _options: MembershipRoleOption[] = [{ value: "MEMBER" }, { value: "ADMIN" }, { value: "OWNER" }];

+/** @deprecated Use `packages/features/ee/teams/components/MemberInvitationModal.tsx` */
 export default function MemberInvitationModal(props: MemberInvitationModalProps) {
  const [errorMessage, setErrorMessage] = useState("");
  const { t, i18n } = useLocale();
@@ -33,6 +33,7 @@ interface Props {
  member: inferQueryOutput<"viewer.teams.get">["members"][number];
 }

+/** @deprecated Use `packages/features/ee/teams/components/MemberListItem.tsx` */
 export default function MemberListItem(props: Props) {
  const { t } = useLocale();

@@ -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>
@@ -10,6 +10,7 @@ interface Props {
  color?: PillColor;
 }

+/** @deprecated Use `packages/features/ee/teams/components/TeamPill.tsx` */
 export default function TeamPill(props: Props) {
  return (
    <div
@@ -19,6 +19,7 @@ interface Props {
  teamId: number;
 }

+/** @deprecated Use `packages/features/ee/teams/components/UpgradeToFlexibleProModal.tsx` */
 export function UpgradeToFlexibleProModal(props: Props) {
  const { t } = useLocale();
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
@@ -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>
  );
 };
@@ -6,6 +6,7 @@ type AdminRequiredProps = {
  children?: React.ReactNode;
 };

+/** @deprecated use PermssionContainer instead. Will delete once V2 goes live */
 export const AdminRequired: FC<AdminRequiredProps> = ({ children, as, ...rest }) => {
  const session = useSession();

@@ -17,7 +17,7 @@ interface Props {

 export default function AuthContainer(props: React.PropsWithChildren<Props>) {
  return (
-    <div className="flex min-h-screen flex-col justify-center bg-neutral-50 py-12 sm:px-6 lg:px-8">
+    <div className="flex min-h-screen flex-col justify-center border-gray-200 bg-neutral-50 py-12 sm:px-6 lg:px-8">
      <HeadSeo title={props.title} description={props.description} />
      <div className={classNames(props.showLogo ? "text-center" : "", "sm:mx-auto sm:w-full sm:max-w-md")}>
        {props.showLogo && (
@@ -34,7 +34,7 @@ export default function AuthContainer(props: React.PropsWithChildren<Props>) {
        </div>
      )}
      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-        <div className="mx-2 rounded-sm border border-neutral-200 bg-white px-4 py-8 sm:px-10">
+        <div className="mx-2 rounded-md border border-gray-300 bg-white px-4 py-8 sm:px-10">
          {props.children}
        </div>
        <div className="mt-4 text-center text-sm text-neutral-600">{props.footerText}</div>
@@ -2,7 +2,6 @@ import React from "react";

 import classNames from "@lib/classNames";

-import Avatar from "@components/ui/Avatar";
 import { AvatarSSR } from "@components/ui/AvatarSSR";

 export type AvatarGroupProps = {
@@ -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";

@@ -38,44 +43,41 @@ const DropdownActions = ({
    <Dropdown>
      {!actionTrigger ? (
        <DropdownMenuTrigger asChild>
-          <Button type="button" color="minimal" size="icon" StartIcon={Icon.FiMoreHorizontal} />
+          <Button type="button" color="secondary" size="icon" StartIcon={Icon.FiMoreHorizontal} />
        </DropdownMenuTrigger>
      ) : (
        <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:block">
+      <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>
    </>
  );
 };
@@ -1,18 +1,20 @@
 import classNames from "classnames";
 import { debounce } from "lodash";
+import { useRouter } from "next/router";
 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 { trpc } from "@calcom/trpc/react";
+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 } from "@calcom/ui/Icon";
-import { Input, Label } from "@calcom/ui/form/fields";
+import { Icon, StarIconSolid } from "@calcom/ui/Icon";
+import { Button } from "@calcom/ui/v2";
+import { Input, Label } from "@calcom/ui/v2";

 export enum UsernameChangeStatusEnum {
  NORMAL = "NORMAL",
@@ -24,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;
@@ -42,12 +44,31 @@ interface ICustomUsernameProps {
    | "plan"
    | "brandColor"
    | "darkBrandColor"
-    | "metadata"
    | "timeFormat"
-    | "allowDynamicBooking"
+    | "metadata"
  >;
+  readonly?: boolean;
 }

+const obtainNewUsernameChangeCondition = ({
+  userIsPremium,
+  isNewUsernamePremium,
+  stripeCustomer,
+}: {
+  userIsPremium: boolean;
+  isNewUsernamePremium: boolean;
+  stripeCustomer: inferQueryOutput<"viewer.stripeCustomer"> | undefined;
+}) => {
+  if (!userIsPremium && isNewUsernamePremium && !stripeCustomer?.paidForPremium) {
+    return UsernameChangeStatusEnum.UPGRADE;
+  }
+
+  if (userIsPremium && !isNewUsernamePremium && getPremiumPlanMode() === "subscription") {
+    return UsernameChangeStatusEnum.DOWNGRADE;
+  }
+  return UsernameChangeStatusEnum.NORMAL;
+};
+
 const PremiumTextfield = (props: ICustomUsernameProps) => {
  const { t } = useLocale();
  const {
@@ -58,73 +79,39 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
    usernameRef,
    onSuccessMutation,
    onErrorMutation,
+    readonly: disabled,
    user,
  } = props;
  const [usernameIsAvailable, setUsernameIsAvailable] = useState(false);
  const [markAsError, setMarkAsError] = useState(false);
+  const router = useRouter();
+  const { paymentStatus: recentAttemptPaymentStatus } = router.query;
  const [openDialogSaveUsername, setOpenDialogSaveUsername] = useState(false);
-  const [usernameChangeCondition, setUsernameChangeCondition] = useState<UsernameChangeStatusEnum | null>(
-    null
-  );
-
-  const userIsPremium =
+  const { data: stripeCustomer } = trpc.useQuery(["viewer.stripeCustomer"]);
+  const isCurrentUsernamePremium =
    user && user.metadata && hasKeyInMetadata(user, "isPremium") ? !!user.metadata.isPremium : false;
-  const [premiumUsername, setPremiumUsername] = useState(false);
-
+  const [isInputUsernamePremium, setIsInputUsernamePremium] = useState(false);
  const debouncedApiCall = useCallback(
-    debounce(async (username) => {
+    debounce(async (username: string) => {
      const { data } = await fetchUsername(username);
-      setMarkAsError(!data.available);
-      setPremiumUsername(data.premium);
+      setMarkAsError(!data.available && !!currentUsername && username !== currentUsername);
+      setIsInputUsernamePremium(data.premium);
      setUsernameIsAvailable(data.available);
    }, 150),
    []
  );

  useEffect(() => {
-    if (currentUsername !== inputUsernameValue) {
-      debouncedApiCall(inputUsernameValue);
-    } else if (inputUsernameValue === "") {
-      setMarkAsError(false);
-      setPremiumUsername(false);
-      setUsernameIsAvailable(false);
-    } else {
-      setPremiumUsername(userIsPremium);
-      setUsernameIsAvailable(false);
-    }
-  }, [inputUsernameValue]);
+    // Use the current username or if it's not set, use the one available from stripe
+    setInputUsernameValue(currentUsername || stripeCustomer?.username || "");
+  }, [setInputUsernameValue, currentUsername, stripeCustomer?.username]);

  useEffect(() => {
-    if (usernameIsAvailable || premiumUsername) {
-      const condition = obtainNewUsernameChangeCondition({
-        userIsPremium,
-        isNewUsernamePremium: premiumUsername,
-      });
-
-      setUsernameChangeCondition(condition);
-    }
-  }, [usernameIsAvailable, premiumUsername]);
-
-  const obtainNewUsernameChangeCondition = ({
-    userIsPremium,
-    isNewUsernamePremium,
-  }: {
-    userIsPremium: boolean;
-    isNewUsernamePremium: boolean;
-  }) => {
-    let resultCondition: UsernameChangeStatusEnum;
-    if (!userIsPremium && isNewUsernamePremium) {
-      resultCondition = UsernameChangeStatusEnum.UPGRADE;
-    } else if (userIsPremium && !isNewUsernamePremium) {
-      resultCondition = UsernameChangeStatusEnum.DOWNGRADE;
-    } else {
-      resultCondition = UsernameChangeStatusEnum.NORMAL;
-    }
-    return resultCondition;
-  };
+    if (!inputUsernameValue) return;
+    debouncedApiCall(inputUsernameValue);
+  }, [debouncedApiCall, inputUsernameValue]);

  const utils = trpc.useContext();
-
  const updateUsername = trpc.useMutation("viewer.updateProfile", {
    onSuccess: async () => {
      onSuccessMutation && (await onSuccessMutation());
@@ -139,34 +126,64 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
    },
  });

-  const ActionButtons = (props: { index: string }) => {
-    const { index } = props;
-    return (usernameIsAvailable || premiumUsername) && currentUsername !== inputUsernameValue ? (
-      <div className="flex flex-row">
-        <Button
-          type="button"
-          color="primary"
-          className="mx-2"
-          onClick={() => setOpenDialogSaveUsername(true)}
-          data-testid={`update-username-btn-${index}`}>
-          {t("update")}
-        </Button>
-        <Button
-          type="button"
-          color="secondary"
-          className="mx-2"
-          onClick={() => {
-            if (currentUsername) {
-              setInputUsernameValue(currentUsername);
-              usernameRef.current.value = currentUsername;
-            }
-          }}>
-          {t("cancel")}
-        </Button>
-      </div>
-    ) : (
-      <></>
-    );
+  // when current username isn't set - Go to stripe to check what username he wanted to buy and was it a premium and was it paid for
+  const paymentRequired = !currentUsername && stripeCustomer?.isPremium && !stripeCustomer?.paidForPremium;
+
+  const usernameChangeCondition = obtainNewUsernameChangeCondition({
+    userIsPremium: isCurrentUsernamePremium,
+    isNewUsernamePremium: isInputUsernamePremium,
+    stripeCustomer,
+  });
+
+  const usernameFromStripe = stripeCustomer?.username;
+
+  const paymentLink = `/api/integrations/stripepayment/subscription?intentUsername=${
+    inputUsernameValue || usernameFromStripe
+  }&action=${usernameChangeCondition}&callbackUrl=${router.asPath}`;
+
+  const ActionButtons = () => {
+    if (paymentRequired) {
+      return (
+        <div className="flex flex-row">
+          <Button
+            type="button"
+            color="primary"
+            className="mx-2"
+            href={paymentLink}
+            data-testid="reserve-username-btn">
+            {t("Reserve")}
+          </Button>
+        </div>
+      );
+    }
+    if ((usernameIsAvailable || isInputUsernamePremium) && currentUsername !== inputUsernameValue) {
+      return (
+        <div className="flex flex-row">
+          <Button
+            type="button"
+            color="primary"
+            className="mx-2"
+            onClick={() => setOpenDialogSaveUsername(true)}
+            data-testid="update-username-btn">
+            {t("update")}
+          </Button>
+          <Button
+            type="button"
+            color="secondary"
+            onClick={() => {
+              if (currentUsername) {
+                setInputUsernameValue(currentUsername);
+                if (usernameRef.current) {
+                  usernameRef.current.value = currentUsername;
+                }
+              }
+            }}>
+            {t("cancel")}
+          </Button>
+        </div>
+      );
+    }
+    return <></>;
  };

  const saveUsername = () => {
@@ -177,81 +194,94 @@ 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 style={{ display: "flex", justifyItems: "center" }}>
+    <div>
+      <div className="flex justify-items-center">
        <Label htmlFor="username">{t("username")}</Label>
      </div>
-      <div className="mt-1 flex rounded-md">
+      <div className="mt-2 flex rounded-md">
        <span
          className={classNames(
-            "inline-flex items-center rounded-l-sm border border-gray-300 bg-gray-50 px-3 text-sm text-gray-500"
+            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}/
+          {process.env.NEXT_PUBLIC_WEBSITE_URL.replace("https://", "").replace("http://", "")}/
        </span>
-        <div style={{ position: "relative", width: "100%" }}>
+
+        <div className="relative w-full">
          <Input
            ref={usernameRef}
            name="username"
            autoComplete="none"
            autoCapitalize="none"
            autoCorrect="none"
+            disabled={disabled}
            className={classNames(
-              "mt-0 rounded-l-none",
+              "border-l-1 mb-0 mt-0 rounded-md rounded-l-none font-sans text-sm leading-4 focus:!ring-0",
+              isInputUsernamePremium
+                ? "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 focus:ring-0"
-                : ""
+                ? "focus:shadow-0 focus:ring-shadow-0 border-red-500  focus:border-red-500 focus:outline-none"
+                : "border-l-gray-300",
+              disabled ? "bg-gray-100 text-gray-400 focus:border-0" : ""
            )}
-            defaultValue={currentUsername}
+            value={inputUsernameValue}
            onChange={(event) => {
              event.preventDefault();
+              // Reset payment status
+              delete router.query.paymentStatus;
              setInputUsernameValue(event.target.value);
            }}
            data-testid="username-input"
          />
-          {currentUsername !== inputUsernameValue && (
-            <div
-              className="top-0"
-              style={{
-                position: "absolute",
-                right: 2,
-                display: "flex",
-                flexDirection: "row",
-              }}>
-              <span
-                className={classNames(
-                  "mx-2 py-1",
-                  premiumUsername ? "text-orange-500" : "",
-                  usernameIsAvailable ? "" : ""
-                )}>
-                {premiumUsername ? <Icon.FiStar className="mt-[4px] w-6" /> : <></>}
-                {!premiumUsername && usernameIsAvailable ? <Icon.FiCheck className="mt-[4px] w-6" /> : <></>}
-              </span>
-            </div>
-          )}
-        </div>
-        <div className="xs:hidden">
-          <ActionButtons index="desktop" />
+          <div className="absolute top-0 right-2 flex flex-row">
+            <span
+              className={classNames(
+                "mx-2 py-1",
+                isInputUsernamePremium ? "text-orange-400" : "",
+                usernameIsAvailable ? "" : ""
+              )}>
+              {isInputUsernamePremium ? <StarIconSolid className="mt-[2px] w-6" /> : <></>}
+              {!isInputUsernamePremium && usernameIsAvailable ? <Icon.FiCheck className="mt-2 w-6" /> : <></>}
+            </span>
+          </div>
        </div>
+
+        {(usernameIsAvailable || isInputUsernamePremium) && currentUsername !== inputUsernameValue && (
+          <div className="flex justify-end">
+            <ActionButtons />
+          </div>
+        )}
      </div>
+      {paymentMsg}
      {markAsError && <p className="mt-1 text-xs text-red-500">Username is already taken</p>}

      {usernameIsAvailable && (
        <p className={classNames("mt-1 text-xs text-gray-900")}>
          {usernameChangeCondition === UsernameChangeStatusEnum.DOWNGRADE && (
-            <>{t("standard_to_premium_username_description")}</>
+            <>{t("premium_to_standard_username_description")}</>
          )}
        </p>
      )}

-      {(usernameIsAvailable || premiumUsername) && currentUsername !== inputUsernameValue && (
-        <div className="mt-2 flex justify-end sm:hidden">
-          <ActionButtons index="mobile" />
-        </div>
-      )}
      <Dialog open={openDialogSaveUsername}>
        <DialogContent>
-          <div style={{ display: "flex", flexDirection: "row" }}>
+          <div className="flex flex-row">
            <div className="xs:hidden flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]">
              <Icon.FiEdit2 className="m-auto h-6 w-6" />
            </div>
@@ -291,7 +321,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
                type="button"
                loading={updateUsername.isLoading}
                data-testid="go-to-billing"
-                href={`/api/integrations/stripepayment/subscription?intentUsername=${inputUsernameValue}`}>
+                href={paymentLink}>
                <>
                  {t("go_to_stripe_billing")} <Icon.FiExternalLink className="ml-1 h-4 w-4" />
                </>
@@ -317,7 +347,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
          </div>
        </DialogContent>
      </Dialog>
-    </>
+    </div>
  );
 };

@@ -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")}
@@ -103,16 +103,16 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
  };

  return (
-    <>
+    <div>
      <div>
        <Label htmlFor="username">{t("username")}</Label>
      </div>
-      <div className="mt-1 flex rounded-md">
+      <div className="mt-2 flex rounded-md">
        <span
          className={classNames(
-            "inline-flex items-center rounded-l-sm border border-gray-300 bg-gray-50 px-3 text-sm text-gray-500"
+            "inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-50 px-3 text-sm text-gray-500"
          )}>
-          {process.env.NEXT_PUBLIC_WEBSITE_URL}/
+          {process.env.NEXT_PUBLIC_WEBSITE_URL.replace("https://", "").replace("http://", "")}/
        </span>
        <div className="relative w-full">
          <Input
@@ -122,7 +122,7 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
            autoCapitalize="none"
            autoCorrect="none"
            className={classNames(
-              "mt-0 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}>
@@ -200,7 +200,7 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
          </div>
        </DialogContent>
      </Dialog>
-    </>
+    </div>
  );
 };

@@ -80,7 +80,7 @@ function Select<
    <ReactSelect
      theme={(theme) => ({
        ...theme,
-        borderRadius: 2,
+        borderRadius: 6,
        colors: {
          ...theme.colors,
          ...(hasDarkTheme
@@ -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,78 @@
+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>{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("add_new_calendar")}...</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={t("install_another")}
+            options={options}
+            isSearchable={false}
+            isLoading={isLoading}
+            components={{ Option: ImageOption }}
+          />
+        );
+      }}
+    />
+  );
+};
+
+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,253 +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 max-w-xl flex-1 pb-12 text-sm lg:pb-0",
-            hasImages && "lg:ml-8"
-          )}>
-          <div className="mb-8 flex">
-            <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">
-                <span className="rounded-md bg-gray-100 p-1 text-xs capitalize text-gray-800">
-                  {categories[0]}
-                </span>{" "}
-                • {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 width="24" height="10" />
+            <SkeletonText />
          )}
-          {price !== 0 && (
-            <span className="block text-right">
-              {feeType === "usage-based" ? commission + "% + " + priceInDollar + "/booking" : priceInDollar}
-              {feeType === "monthly" && "/" + t("month")}
-            </span>
-          )}
-
-          <div className="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>
  );
 };

@@ -305,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;
@@ -321,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,332 @@
+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 Button from "@calcom/ui/Button";
+import { Icon } from "@calcom/ui/Icon";
+import SkeletonLoader from "@calcom/ui/apps/SkeletonLoader";
+import { Alert, 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>
+      )}
+    />
+  );
+}
+
+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"}
+                    actions={
+                      <div className="flex w-32 justify-end">
+                        <DisconnectIntegration
+                          credentialId={item.credentialId}
+                          trashIcon
+                          onSuccess={props.onChanged}
+                          buttonProps={{ className: "border border-gray-300" }}
+                        />
+                      </div>
+                    }>
+                    {!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>
+                      </>
+                    )}
+                  </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 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,53 @@
+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;
+}): 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(
+        "my-0 flex-col border transition-colors duration-500 first:rounded-t-md last:rounded-b-md",
+        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 border-t border-gray-200">{props.children}</div>}
+    </ListItem>
+  );
+}
+
+export default IntegrationListItem;
@@ -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>
+  );
+}
@@ -0,0 +1,144 @@
+import { FormValues } from "pages/v2/event-types/[type]";
+import { Controller, useFormContext } from "react-hook-form";
+
+import dayjs from "@calcom/dayjs";
+import classNames from "@calcom/lib/classNames";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { weekdayNames } from "@calcom/lib/weekday";
+import { trpc } from "@calcom/trpc/react";
+import { Icon } from "@calcom/ui";
+import Button from "@calcom/ui/v2/core/Button";
+import Select from "@calcom/ui/v2/core/form/select";
+import { SkeletonText } from "@calcom/ui/v2/core/skeleton";
+
+import { SelectSkeletonLoader } from "@components/v2/availability/SkeletonLoader";
+
+type AvailabilityOption = {
+  label: string;
+  value: number;
+};
+
+const AvailabilitySelect = ({
+  className = "",
+  ...props
+}: {
+  className?: string;
+  name: string;
+  value: number;
+  onBlur: () => void;
+  onChange: (value: AvailabilityOption | null) => void;
+}) => {
+  const { data, isLoading } = trpc.useQuery(["viewer.availability.list"]);
+  if (isLoading) {
+    return <SelectSkeletonLoader />;
+  }
+
+  const schedules = data?.schedules || [];
+
+  const options = schedules.map((schedule) => ({
+    value: schedule.id,
+    label: schedule.name,
+  }));
+
+  const value = options.find((option) =>
+    props.value
+      ? option.value === props.value
+      : option.value === schedules.find((schedule) => schedule.isDefault)?.id
+  );
+
+  return (
+    <Select
+      options={options}
+      isSearchable={false}
+      onChange={props.onChange}
+      className={classNames("block w-full min-w-0 flex-1 rounded-sm text-sm", className)}
+      value={value}
+    />
+  );
+};
+
+const format = (date: Date) =>
+  Intl.DateTimeFormat(undefined, { hour: "numeric", minute: "numeric" }).format(
+    new Date(dayjs.utc(date).format("YYYY-MM-DDTHH:mm:ss"))
+  );
+
+export const AvailabilityTab = () => {
+  const { t, i18n } = useLocale();
+  const { watch } = useFormContext<FormValues>();
+
+  const scheduleId = watch("schedule");
+  const { isLoading, data: schedule } = trpc.useQuery(["viewer.availability.schedule", { scheduleId }]);
+
+  const filterDays = (dayNum: number) =>
+    schedule?.schedule.availability.filter((item) => item.days.includes((dayNum + 1) % 7)) || [];
+
+  return (
+    <>
+      <div>
+        <div className="min-w-4 mb-2">
+          <label htmlFor="availability" className="mt-0 flex text-sm font-medium text-neutral-700">
+            {t("availability")}
+          </label>
+        </div>
+        <Controller
+          name="schedule"
+          render={({ field }) => (
+            <AvailabilitySelect
+              value={field.value}
+              onBlur={field.onBlur}
+              name={field.name}
+              onChange={(selected) => {
+                field.onChange(selected?.value || null);
+              }}
+            />
+          )}
+        />
+      </div>
+
+      <div className="space-y-4 rounded border p-8 py-6 pt-2">
+        <ol className="table border-collapse text-sm">
+          {weekdayNames(i18n.language, 1, "long").map((day, index) => {
+            const isAvailable = !!filterDays(index).length;
+            return (
+              <li key={day} className="my-6 flex border-transparent last:mb-2">
+                <span className={classNames("w-32 font-medium", !isAvailable && "text-gray-500 opacity-50")}>
+                  {day}
+                </span>
+                {isLoading ? (
+                  <SkeletonText className="block h-5 w-60" />
+                ) : isAvailable ? (
+                  <div className="space-y-3">
+                    {filterDays(index).map((dayRange, i) => (
+                      <div key={i} className="flex items-center leading-4">
+                        <span className="w-28">{format(dayRange.startTime)}</span>
+                        <span className="">-</span>
+                        <div className="ml-6">{format(dayRange.endTime)}</div>
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <span className="text-gray-500 opacity-50 ">{t("unavailable")}</span>
+                )}
+              </li>
+            );
+          })}
+        </ol>
+        <hr />
+        <div className="flex justify-between">
+          <span className="flex items-center text-sm text-gray-600">
+            <Icon.FiGlobe className="mr-2" />
+            {schedule?.timeZone || <SkeletonText className="block h-5 w-32" />}
+          </span>
+          <Button
+            href={`/availability/${scheduleId}`}
+            color="minimal"
+            EndIcon={Icon.FiExternalLink}
+            target="_blank"
+            rel="noopener noreferrer">
+            {t("edit_availability")}
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+};
@@ -225,6 +225,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
        )}
        <Form
          form={locationFormMethods}
+          className="space-y-4"
          handleSubmit={async (values) => {
            const { locationType: newLocation, displayLocationPublicly } = values;

@@ -284,7 +285,6 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
                          : locationOptions
                      }
                      isSearchable={false}
-                      className="my-4 block w-full min-w-0 flex-1 rounded-md border border-gray-300 text-sm"
                      onChange={(val) => {
                        if (val) {
                          locationFormMethods.setValue("locationType", val.value);
@@ -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);
@@ -82,7 +84,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
              </a>
            </Link>
          </div>
-          <div className="w-full">
+          <div className="-mt-1 w-full">
            <Controller
              control={formMethods.control}
              name="destinationCalendar"
@@ -123,6 +125,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
        <div className="flex space-x-3 ">
          <Switch
            checked={customInputs.length > 0}
+            fitToHeight={true}
            onCheckedChange={(e) => {
              if (e && customInputs.length === 0) {
                // Push a placeholders
@@ -135,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}>
@@ -172,20 +179,21 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
        name="requiresConfirmation"
        defaultValue={eventType.requiresConfirmation}
        render={({ field: { value, onChange } }) => (
-          <div className="flex space-x-3 ">
+          <div className="flex space-x-3">
            <Switch
              name="requireConfirmation"
              checked={value}
              onCheckedChange={(e) => onChange(e)}
              disabled={seatsEnabled}
+              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>
        )}
@@ -199,13 +207,18 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
          <div className="flex space-x-3 ">
            <Switch
              name="disableGuests"
+              fitToHeight={true}
              checked={value}
              onCheckedChange={(e) => onChange(e)}
              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>
        )}
@@ -218,15 +231,66 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
        defaultValue={eventType.hideCalendarNotes}
        render={({ field: { value, onChange } }) => (
          <div className="flex space-x-3 ">
-            <Switch name="hideCalendarNotes" checked={value} onCheckedChange={(e) => onChange(e)} />
+            <Switch
+              name="hideCalendarNotes"
+              fitToHeight={true}
+              checked={value}
+              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="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}
@@ -235,7 +299,9 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
          <>
            <div className="flex space-x-3 ">
              <Switch
+                data-testid="hashedLinkCheck"
                name="hashedLinkCheck"
+                fitToHeight={true}
                defaultChecked={!!value}
                onCheckedChange={(e) => {
                  setHashedLinkVisible(e);
@@ -243,8 +309,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>

@@ -283,6 +353,59 @@ 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">
+              <Label className="text-sm font-semibold leading-none text-black">{t("offer_seats")}</Label>
+              <p className="-mt-2 text-sm leading-normal text-gray-600">{t("offer_seats_description")}</p>
+            </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
@@ -5,6 +5,7 @@ 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 { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Icon } from "@calcom/ui";
 import { Alert, Button, EmptyScreen, Select, Switch, TextField } from "@calcom/ui/v2";
@@ -32,11 +33,10 @@ const AppCard = ({
          <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">
+        <div className="ml-auto flex items-center">
          <Switch onCheckedChange={switchOnClick} checked={switchChecked} />
        </div>
      </div>
-      <hr className="my-6" />
      {children}
    </div>
  );
@@ -47,14 +47,20 @@ export const EventAppsTab = ({
  currency,
  eventType,
  hasGiphyIntegration,
+  hasRainbowIntegration,
 }: Pick<
  EventTypeSetupInfered,
-  "eventType" | "hasPaymentIntegration" | "hasGiphyIntegration" | "currency"
+  "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;

@@ -174,6 +180,29 @@ export const EventAppsTab = ({
          )}
        </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", "");
+            }
+
+            setShowRainbowSection(e);
+          }}
+          switchChecked={showRainbowSection}>
+          {showRainbowSection && (
+            <RainbowInstallForm
+              formMethods={formMethods}
+              blockchainId={(eventType.metadata.blockchainId as number) || 1}
+              smartContractAddress={(eventType.metadata.smartContractAddress as string) || ""}
+            />
+          )}
+        </AppCard>
+      )}
    </div>
  );
 };
@@ -6,7 +6,7 @@ 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 { Select, Switch, Label, Input, MinutesField } from "@calcom/ui/v2";
 import DateRangePicker from "@calcom/ui/v2/core/form/date-range-picker/DateRangePicker";

 export const EventLimitsTab = (props: Pick<EventTypeSetupInfered, "eventType">) => {
@@ -110,19 +110,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,12 +141,13 @@ 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}
                />
              );
            }}
@@ -144,7 +155,7 @@ export const EventLimitsTab = (props: Pick<EventTypeSetupInfered, "eventType">)
        </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
@@ -153,6 +164,7 @@ export const EventLimitsTab = (props: Pick<EventTypeSetupInfered, "eventType">)
              defaultValue={periodType?.type !== "UNLIMITED" ? "ROLLING" : "UNLIMITED"}
              render={({ field: { value } }) => (
                <Switch
+                  fitToHeight={true}
                  checked={value !== "UNLIMITED"}
                  onCheckedChange={(bool) =>
                    formMethods.setValue("periodType", bool ? "ROLLING" : "UNLIMITED")
@@ -195,8 +207,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"
@@ -205,7 +217,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>
@@ -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,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 { 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;
@@ -44,6 +46,59 @@ type Props = {
  formMethods: UseFormReturn<FormValues>;
 };

+function getNavigation(props: {
+  t: TFunction;
+  eventType: Props["eventType"];
+  enabledAppsNumber: number;
+  enabledWorkflowsNumber: number;
+}) {
+  const { eventType, t, enabledAppsNumber, 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,
+      info: `${enabledAppsNumber} ${t("active")}`,
+    },
+    {
+      name: "workflows",
+      href: `/event-types/${eventType.id}?tabName=workflows`,
+      icon: Icon.FiZap,
+      info: `${enabledWorkflowsNumber} ${t("active")}`,
+    },
+  ];
+}
+
 function EventTypeSingleLayout({
  children,
  eventType,
@@ -55,8 +110,8 @@ function EventTypeSingleLayout({
  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 +120,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 +136,39 @@ 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, 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, 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")}
@@ -184,7 +190,6 @@ function EventTypeSingleLayout({
                href={permalink}
                rel="noreferrer"
                StartIcon={Icon.FiExternalLink}
-                combined
              />
            </Tooltip>

@@ -199,13 +204,18 @@ function EventTypeSingleLayout({
                showToast("Link copied!", "success");
              }}
            />
-            {/* TODO: Implement embed here @hariom */}
-            {/* <Button color="secondary" size="icon" StartIcon={Icon.FiCode} combined /> */}
+            <EmbedButton
+              embedUrl={encodeURIComponent(embedLink)}
+              StartIcon={Icon.FiCode}
+              color="secondary"
+              size="icon"
+              tooltip={t("embed")}
+            />
            <Button
              color="secondary"
              size="icon"
              StartIcon={Icon.FiTrash}
-              combined
+              tooltip={t("delete")}
              disabled={!hasPermsToDelete}
              onClick={() => setDeleteDialogOpen(true)}
            />
@@ -218,45 +228,56 @@ 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>
      }>
      <ClientSuspense fallback={<Loader />}>
-        <div className="mt-4 flex flex-col xl:flex-row xl:space-x-8">
+        <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="relative left-0 right-0 -mx-6 w-[calc(100%+40px)] p-2 md:mx-0 md:p-0 xl:hidden">
-            <HorizontalTabs tabs={EventTypeTabs} />
+          <div className="p-2 md:mx-0 md:p-0 xl:hidden">
+            <HorizontalTabs tabs={EventTypeTabs} linkProps={{ shallow: true }} />
          </div>
          <div className="w-full ltr:mr-2 rtl:ml-2">
            <div
@@ -280,9 +301,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>
  );
 }
@@ -41,6 +41,8 @@ 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) => {
                  if (!e) {
@@ -72,7 +74,7 @@ export default function RecurringEventController({
                        type="number"
                        min="1"
                        max="20"
-                        className="block w-16 rounded-md border-gray-300 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
+                        className="block h-[36px] w-16 rounded-md border-gray-300 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
                        defaultValue={recurringEventState.interval}
                        onChange={(event) => {
                          const newVal = {
@@ -87,7 +89,7 @@ export default function RecurringEventController({
                        options={recurringEventFreqOptions}
                        value={recurringEventFreqOptions[recurringEventState.freq]}
                        isSearchable={false}
-                        className="w-18 block min-w-0 rounded-md text-sm"
+                        className="w-18 block h-[36px] min-w-0 rounded-md text-sm"
                        onChange={(event) => {
                          const newVal = {
                            ...recurringEventState,
@@ -99,12 +101,12 @@ export default function RecurringEventController({
                      />
                    </div>
                    <div className="mt-4 flex items-center">
-                      <p className="mr-2 text-neutral-900">{t("max")}</p>
+                      <p className="mr-2 text-neutral-900">{t("for_a_maximum_of")}</p>
                      <input
                        type="number"
                        min="1"
                        max="20"
-                        className="block w-16 rounded-md border-gray-300 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
+                        className="block h-[36px] w-16 rounded-md border-gray-300 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
                        defaultValue={recurringEventState.count}
                        onChange={(event) => {
                          const newVal = {
@@ -116,7 +118,7 @@ export default function RecurringEventController({
                        }}
                      />
                      <p className="mr-2 text-neutral-900">
-                        {t("occurrence", {
+                        {t("events", {
                          count: recurringEventState.count,
                        })}
                      </p>
@@ -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>
@@ -1,10 +1,14 @@
-import { SyntheticEvent, useState } from "react";
+import { useState } from "react";
+import { useForm } from "react-hook-form";

+import { ErrorCode } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import Button from "@calcom/ui/v2/core/Button";
 import { Dialog, DialogContent } from "@calcom/ui/v2/core/Dialog";
+import { Form, Label } from "@calcom/ui/v2/core/form/fields";
+import { PasswordField } from "@calcom/ui/v2/core/form/fields";

-import { ErrorCode } from "@lib/auth";
+import TwoFactor from "@components/auth/TwoFactor";

 import TwoFactorAuthAPI from "./TwoFactorAuthAPI";

@@ -18,20 +22,24 @@ interface DisableTwoFactorAuthModalProps {
  onDisable: () => void;
 }

+interface DisableTwoFactorValues {
+  totpCode: string;
+  password: string;
+}
+
 const DisableTwoFactorAuthModal = ({
  onDisable,
  onCancel,
  open,
  onOpenChange,
 }: DisableTwoFactorAuthModalProps) => {
-  const [password, setPassword] = useState("");
  const [isDisabling, setIsDisabling] = useState(false);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
  const { t } = useLocale();

-  async function handleDisable(e: SyntheticEvent) {
-    e.preventDefault();
+  const form = useForm<DisableTwoFactorValues>();

+  async function handleDisable({ totpCode, password }: DisableTwoFactorValues) {
    if (isDisabling) {
      return;
    }
@@ -39,7 +47,7 @@ const DisableTwoFactorAuthModal = ({
    setErrorMessage(null);

    try {
-      const response = await TwoFactorAuthAPI.disable(password);
+      const response = await TwoFactorAuthAPI.disable(password, totpCode);
      if (response.status === 200) {
        onDisable();
        return;
@@ -48,6 +56,12 @@ const DisableTwoFactorAuthModal = ({
      const body = await response.json();
      if (body.error === ErrorCode.IncorrectPassword) {
        setErrorMessage(t("incorrect_password"));
+      }
+      if (body.error === ErrorCode.SecondFactorRequired) {
+        setErrorMessage(t("2fa_required"));
+      }
+      if (body.error === ErrorCode.IncorrectTwoFactorCode) {
+        setErrorMessage(t("incorrect_2fa"));
      } else {
        setErrorMessage(t("something_went_wrong"));
      }
@@ -66,39 +80,31 @@ const DisableTwoFactorAuthModal = ({
        description={t("disable_2fa_recommendation")}
        type="creation"
        useOwnActionButtons>
-        <form onSubmit={handleDisable}>
+        <Form form={form} handleSubmit={handleDisable}>
          <div className="mb-4">
-            <label htmlFor="password" className="mt-4 block text-sm font-medium text-gray-700">
-              {t("password")}
-            </label>
-            <div className="mt-1">
-              <input
-                type="password"
-                name="password"
-                id="password"
-                required
-                value={password}
-                onInput={(e) => setPassword(e.currentTarget.value)}
-                className="block w-full rounded-sm border-gray-300 text-sm"
-              />
-            </div>
+            <PasswordField
+              labelProps={{
+                className: "block text-sm font-medium text-gray-700",
+              }}
+              {...form.register("password")}
+              className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-black focus:outline-none focus:ring-black"
+            />
+            <Label className="mt-4"> {t("2fa_code")}</Label>
+
+            <TwoFactor center={false} />

            {errorMessage && <p className="mt-1 text-sm text-red-700">{errorMessage}</p>}
          </div>
-        </form>

-        <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-          <Button
-            type="submit"
-            className="ltr:ml-2 rtl:mr-2"
-            onClick={handleDisable}
-            disabled={password.length === 0 || isDisabling}>
-            {t("disable")}
-          </Button>
-          <Button color="secondary" onClick={onCancel}>
-            {t("cancel")}
-          </Button>
-        </div>
+          <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
+            <Button type="submit" className="ltr:ml-2 rtl:mr-2" disabled={isDisabling}>
+              {t("disable")}
+            </Button>
+            <Button color="secondary" onClick={onCancel}>
+              {t("cancel")}
+            </Button>
+          </div>
+        </Form>
      </DialogContent>
    </Dialog>
  );
@@ -1,10 +1,13 @@
-import React, { SyntheticEvent, useState } from "react";
+import React, { BaseSyntheticEvent, useState } from "react";
+import { useForm } from "react-hook-form";

+import { ErrorCode } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import Button from "@calcom/ui/v2/core/Button";
 import { Dialog, DialogContent } from "@calcom/ui/v2/core/Dialog";
+import { Form, TextField } from "@calcom/ui/v2/core/form/fields";

-import { ErrorCode } from "@lib/auth";
+import TwoFactor from "@components/auth/TwoFactor";

 import TwoFactorAuthAPI from "./TwoFactorAuthAPI";

@@ -41,8 +44,14 @@ const WithStep = ({
  return step === current ? children : null;
 };

+interface EnableTwoFactorValues {
+  totpCode: string;
+}
+
 const EnableTwoFactorModal = ({ onEnable, onCancel, open, onOpenChange }: EnableTwoFactorModalProps) => {
  const { t } = useLocale();
+  const form = useForm<EnableTwoFactorValues>();
+
  const setupDescriptions = {
    [SetupStep.ConfirmPassword]: t("2fa_confirm_current_password"),
    [SetupStep.DisplayQrCode]: t("2fa_scan_image_or_use_code"),
@@ -50,13 +59,12 @@ const EnableTwoFactorModal = ({ onEnable, onCancel, open, onOpenChange }: Enable
  };
  const [step, setStep] = useState(SetupStep.ConfirmPassword);
  const [password, setPassword] = useState("");
-  const [totpCode, setTotpCode] = useState("");
  const [dataUri, setDataUri] = useState("");
  const [secret, setSecret] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);

-  async function handleSetup(e: SyntheticEvent) {
+  async function handleSetup(e: React.FormEvent) {
    e.preventDefault();

    if (isSubmitting) {
@@ -90,10 +98,10 @@ const EnableTwoFactorModal = ({ onEnable, onCancel, open, onOpenChange }: Enable
    }
  }

-  async function handleEnable(e: SyntheticEvent) {
-    e.preventDefault();
+  async function handleEnable({ totpCode }: EnableTwoFactorValues, e: BaseSyntheticEvent | undefined) {
+    e?.preventDefault();

-    if (isSubmitting || totpCode.length !== 6) {
+    if (isSubmitting) {
      return;
    }

@@ -128,29 +136,19 @@ const EnableTwoFactorModal = ({ onEnable, onCancel, open, onOpenChange }: Enable
        title={t("enable_2fa")}
        description={setupDescriptions[step]}
        type="creation"
-        useOwnActionButtons
-        // Icon={Icon.FiAlertTriangle}>
-      >
-        {/* <TwoFactorModalHeader title={t("enable_2fa")} description={setupDescriptions[step]} /> */}
-
+        useOwnActionButtons>
        <WithStep step={SetupStep.ConfirmPassword} current={step}>
          <form onSubmit={handleSetup}>
            <div className="mb-4">
-              <label htmlFor="password" className="mt-4 block text-sm font-medium text-gray-700">
-                {t("password")}
-              </label>
-              <div className="mt-1">
-                <input
-                  type="password"
-                  name="password"
-                  id="password"
-                  required
-                  value={password}
-                  onInput={(e) => setPassword(e.currentTarget.value)}
-                  className="block w-full rounded-sm border-gray-300 text-sm"
-                />
-              </div>
-
+              <TextField
+                label={t("password")}
+                type="password"
+                name="password"
+                id="password"
+                required
+                value={password}
+                onInput={(e) => setPassword(e.currentTarget.value)}
+              />
              {errorMessage && <p className="mt-1 text-sm text-red-700">{errorMessage}</p>}
            </div>
          </form>
@@ -166,64 +164,42 @@ const EnableTwoFactorModal = ({ onEnable, onCancel, open, onOpenChange }: Enable
            <p className="text-center font-mono text-xs">{secret}</p>
          </>
        </WithStep>
-        <WithStep step={SetupStep.EnterTotpCode} current={step}>
-          <form onSubmit={handleEnable}>
+        <Form handleSubmit={handleEnable} form={form}>
+          <WithStep step={SetupStep.EnterTotpCode} current={step}>
            <div className="mb-4">
-              <label htmlFor="code" className="mt-4 block text-sm font-medium text-gray-700">
-                {t("code")}
-              </label>
-              <div className="mt-1">
-                <input
-                  type="text"
-                  name="code"
-                  id="code"
-                  required
-                  value={totpCode}
-                  maxLength={6}
-                  minLength={6}
-                  inputMode="numeric"
-                  onInput={(e) => setTotpCode(e.currentTarget.value)}
-                  className="block w-full rounded-sm border-gray-300 text-sm"
-                  autoComplete="one-time-code"
-                />
-              </div>
+              <TwoFactor center />

              {errorMessage && <p className="mt-1 text-sm text-red-700">{errorMessage}</p>}
            </div>
-          </form>
-        </WithStep>
-
-        <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-          <WithStep step={SetupStep.ConfirmPassword} current={step}>
-            <Button
-              type="submit"
-              className="ltr:ml-2 rtl:mr-2"
-              onClick={handleSetup}
-              disabled={password.length === 0 || isSubmitting}>
-              {t("continue")}
-            </Button>
          </WithStep>
-          <WithStep step={SetupStep.DisplayQrCode} current={step}>
-            <Button
-              type="submit"
-              className="ltr:ml-2 rtl:mr-2"
-              onClick={() => setStep(SetupStep.EnterTotpCode)}>
-              {t("continue")}
+          <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
+            <WithStep step={SetupStep.ConfirmPassword} current={step}>
+              <Button
+                type="submit"
+                className="ltr:ml-2 rtl:mr-2"
+                onClick={handleSetup}
+                disabled={password.length === 0 || isSubmitting}>
+                {t("continue")}
+              </Button>
+            </WithStep>
+            <WithStep step={SetupStep.DisplayQrCode} current={step}>
+              <Button
+                type="submit"
+                className="ltr:ml-2 rtl:mr-2"
+                onClick={() => setStep(SetupStep.EnterTotpCode)}>
+                {t("continue")}
+              </Button>
+            </WithStep>
+            <WithStep step={SetupStep.EnterTotpCode} current={step}>
+              <Button type="submit" className="ltr:ml-2 rtl:mr-2" disabled={isSubmitting}>
+                {t("enable")}
+              </Button>
+            </WithStep>
+            <Button color="secondary" onClick={onCancel}>
+              {t("cancel")}
            </Button>
-          </WithStep>
-          <WithStep step={SetupStep.EnterTotpCode} current={step}>
-            <Button
-              type="submit"
-              className="ltr:ml-2 rtl:mr-2"
-              onClick={handleEnable}
-              disabled={totpCode.length !== 6 || isSubmitting}>
-              {t("enable")}
-            </Button>
-          </WithStep>
-          <Button color="secondary" onClick={onCancel}>
-            {t("cancel")}
-          </Button>
-        </div>
+          </div>
+        </Form>
      </DialogContent>
    </Dialog>
  );
@@ -19,10 +19,10 @@ const TwoFactorAuthAPI = {
    });
  },

-  async disable(password: string) {
+  async disable(password: string, code: string) {
    return fetch("/api/auth/two-factor/totp/disable", {
      method: "POST",
-      body: JSON.stringify({ password }),
+      body: JSON.stringify({ password, code }),
      headers: {
        "Content-Type": "application/json",
      },
@@ -17,27 +17,25 @@ interface Props {

 export default function AuthContainer(props: React.PropsWithChildren<Props>) {
  return (
-    <div className="flex min-h-screen flex-col justify-center bg-gray-100 py-12 sm:px-6 lg:px-8">
+    <div className="flex min-h-screen flex-col justify-center bg-[#f3f4f6] py-12 sm:px-6 lg:px-8">
      <HeadSeo title={props.title} description={props.description} />
+      {props.showLogo && (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img className="mb-auto h-4" src={LOGO} alt="Cal.com Logo" />
+      )}
      <div className={classNames(props.showLogo ? "text-center" : "", "sm:mx-auto sm:w-full sm:max-w-md")}>
-        {props.showLogo && (
-          // eslint-disable-next-line @next/next/no-img-element
-          <img className="mx-auto h-6" src={LOGO} alt="Cal.com Logo" />
-        )}
-        {props.heading && (
-          <h2 className="font-cal mt-6 text-center text-3xl text-neutral-900">{props.heading}</h2>
-        )}
+        {props.heading && <h2 className="font-cal text-center text-3xl text-neutral-900">{props.heading}</h2>}
      </div>
      {props.loading && (
        <div className="absolute z-50 flex h-screen w-full items-center bg-gray-50">
          <Loader />
        </div>
      )}
-      <div className="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="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-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>
  );
@@ -2,6 +2,7 @@ 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";
@@ -11,11 +12,11 @@ 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 customTemplate, { hasTemplateIntegration } from "@lib/webhooks/integrationTemplate";

 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;
@@ -21,6 +21,7 @@ export type WebhookListContainerType = {
  appId?: string;
 };

+/** @deprecated Moved to `packages/features/webhooks` */
 export default function WebhookListContainer(props: WebhookListContainerType) {
  const router = useRouter();
  const query = trpc.useQuery(
@@ -11,6 +11,7 @@ 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();
@@ -11,6 +11,7 @@ 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;
--- a/Show More
+++ b/Show More