Merge branch 'main' into osshack/queue_system_qstash_nextjs

2024-01-02 09:29:53 +00:00 · 2024-01-02 09:29:53 +00:00 · d52b417884
parent d6fcf7ef24 1c2fff5447
commit d52b417884
485 changed files with 18291 additions and 10863 deletions
--- a/.env.appStore.example
+++ b/.env.appStore.example
@ -37,6 +37,7 @@ BASECAMP3_USER_AGENT=

 DAILY_API_KEY=
 DAILY_SCALE_PLAN=''
+DAILY_WEBHOOK_SECRET=''

 #   - GOOGLE CALENDAR/MEET/LOGIN
 # Needed to enable Google Calendar integration and Login with Google
@ -126,4 +127,12 @@ ZOHOCRM_CLIENT_ID=""
 ZOHOCRM_CLIENT_SECRET=""


+#   - REVERT
+# Used for the Pipedrive integration (via/ Revert (https://revert.dev))
+# @see https://github.com/calcom/cal.com/#obtaining-revert-api-keys
+REVERT_API_KEY=
+REVERT_PUBLIC_TOKEN=
+
+# NOTE: If you're self hosting Revert, update this URL to point to your own instance.
+REVERT_API_URL=https://api.revert.dev/
 # *********************************************************************************************************
--- a/.env.example
+++ b/.env.example
@ -214,6 +214,10 @@ EMAIL_SERVER_PORT=1025
 # Make sure to run mailhog container manually or with `yarn dx`
 E2E_TEST_MAILHOG_ENABLED=

+# Resend
+# Send transactional email using resend
+# RESEND_API_KEY=
+
 # **********************************************************************************************************

 # Set the following value to true if you wish to enable Team Impersonation
@ -263,6 +267,18 @@ PROJECT_ID_VERCEL=
 TEAM_ID_VERCEL=
 # Get it from: https://vercel.com/account/tokens
 AUTH_BEARER_TOKEN_VERCEL=
+# Add the main domain that you want to use for testing vercel domain management for organizations. This is necessary because WEBAPP_URL of local isn't a valid public domain
+# Would create org1.example.com for an org with slug org1
+# LOCAL_TESTING_DOMAIN_VERCEL="example.com"
+
+## Set it to 1 if you use cloudflare to manage your DNS and would like us to manage the DNS for you for organizations
+# CLOUDFLARE_DNS=1
+## Get it from: https://dash.cloudflare.com/profile/api-tokens. Select Edit Zone template and choose a zone(your domain)
+# AUTH_BEARER_TOKEN_CLOUDFLARE=
+## Zone ID can be found in the Overview tab of your domain in Cloudflare
+# CLOUDFLARE_ZONE_ID=
+## It should usually work with the default value. This is the DNS CNAME record content to point to Vercel domain
+# CLOUDFLARE_VERCEL_CNAME=cname.vercel-dns.com

 #   - APPLE CALENDAR
 # Used for E2E tests on Apple Calendar
@ -274,6 +290,8 @@ E2E_TEST_APPLE_CALENDAR_PASSWORD=""
 E2E_TEST_CALCOM_QA_EMAIL="qa@example.com"
 # Replace with your own password
 E2E_TEST_CALCOM_QA_PASSWORD="password"
+E2E_TEST_CALCOM_QA_GCAL_CREDENTIALS=
+E2E_TEST_CALCOM_GCAL_KEYS=

 # - APP CREDENTIAL SYNC ***********************************************************************************
 # Used for self-hosters that are implementing Cal.com into their applications that already have certain integrations
@ -307,5 +325,21 @@ E2E_TEST_OIDC_USER_PASSWORD=
 # redirected from the legacy to the future pages
 AB_TEST_BUCKET_PROBABILITY=50
 # whether we redirect to the future/event-types from event-types or not
-APP_ROUTER_EVENT_TYPES_ENABLED=1
-APP_ROUTER_SETTINGS_ADMIN_ENABLED=1
+APP_ROUTER_EVENT_TYPES_ENABLED=0
+APP_ROUTER_SETTINGS_ADMIN_ENABLED=0
+APP_ROUTER_APPS_INSTALLED_CATEGORY_ENABLED=0
+APP_ROUTER_APPS_SLUG_ENABLED=0
+APP_ROUTER_APPS_SLUG_SETUP_ENABLED=0
+# whether we redirect to the future/apps/categories from /apps/categories or not
+APP_ROUTER_APPS_CATEGORIES_ENABLED=0
+# whether we redirect to the future/apps/categories/[category] from /apps/categories/[category] or not
+APP_ROUTER_APPS_CATEGORIES_CATEGORY_ENABLED=0
+APP_ROUTER_BOOKINGS_STATUS_ENABLED=0
+APP_ROUTER_WORKFLOWS_ENABLED=0
+APP_ROUTER_SETTINGS_TEAMS_ENABLED=0
+APP_ROUTER_GETTING_STARTED_STEP_ENABLED=0
+APP_ROUTER_APPS_ENABLED=0
+APP_ROUTER_VIDEO_ENABLED=0
+
+# disable setry server source maps
+SENTRY_DISABLE_SERVER_WEBPACK_PLUGIN=1
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@ -23,6 +23,7 @@ Fixes # (issue)
 - [ ] Chore (refactoring code, technical debt, workflow improvements)
 - [ ] New feature (non-breaking change which adds functionality)
 - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
+- [ ] Tests (Unit/Integration/E2E or any other test)
 - [ ] This change requires a documentation update

 ## How should this be tested?
--- a/.github/actions/cache-db/action.yml
+++ b/.github/actions/cache-db/action.yml
@ -17,10 +17,15 @@ runs:
        cache-name: cache-db
        key-1: ${{ hashFiles('packages/prisma/schema.prisma', 'packages/prisma/migrations/**/**.sql', 'packages/prisma/*.ts') }}
        key-2: ${{ github.event.pull_request.number || github.ref }}
+        DATABASE_URL: ${{ inputs.DATABASE_URL }}
+        E2E_TEST_CALCOM_QA_EMAIL: ${{ inputs.E2E_TEST_CALCOM_QA_EMAIL }}
+        E2E_TEST_CALCOM_QA_PASSWORD: ${{ inputs.E2E_TEST_CALCOM_QA_PASSWORD }}
+        E2E_TEST_CALCOM_QA_GCAL_CREDENTIALS: ${{ inputs.E2E_TEST_CALCOM_QA_GCAL_CREDENTIALS }}
      with:
        path: ${{ inputs.path }}
        key: ${{ runner.os }}-${{ env.cache-name }}-${{ inputs.path }}-${{ env.key-1 }}-${{ env.key-2 }}
-    - run: yarn db-seed
+        DATABASE_URL: ${{ inputs.DATABASE_URL }}
+    - run: echo ${{ env.E2E_TEST_CALCOM_QA_GCAL_CREDENTIALS }} && yarn db-seed
      if: steps.cache-db.outputs.cache-hit != 'true'
      shell: bash
    - name: Postgres Dump Backup
--- a/.github/workflows/e2e-app-store.yml
+++ b/.github/workflows/e2e-app-store.yml
@ -1,4 +1,4 @@
-name: E2E App-Store Apps
+name: E2E App-Store Apps Tests
 on:
  workflow_call:

@ -33,6 +33,12 @@ jobs:
      - uses: ./.github/actions/yarn-install
      - uses: ./.github/actions/yarn-playwright-install
      - uses: ./.github/actions/cache-db
+        env: 
+          DATABASE_URL: ${{ secrets.CI_DATABASE_URL }}
+          E2E_TEST_CALCOM_QA_EMAIL: ${{ secrets.E2E_TEST_CALCOM_QA_EMAIL }}
+          E2E_TEST_CALCOM_QA_PASSWORD: ${{ secrets.E2E_TEST_CALCOM_QA_PASSWORD }}
+          E2E_TEST_CALCOM_QA_GCAL_CREDENTIALS: ${{ secrets.E2E_TEST_CALCOM_QA_GCAL_CREDENTIALS }}
+          E2E_TEST_CALCOM_GCAL_KEYS: ${{ secrets.E2E_TEST_CALCOM_GCAL_KEYS }}
      - uses: ./.github/actions/cache-build
      - name: Run Tests
        run: yarn e2e:app-store --shard=${{ matrix.shard }}/${{ strategy.job-total }}
@ -43,6 +49,10 @@ jobs:
          DEPLOYSENTINEL_API_KEY: ${{ secrets.DEPLOYSENTINEL_API_KEY }}
          E2E_TEST_APPLE_CALENDAR_EMAIL: ${{ secrets.E2E_TEST_APPLE_CALENDAR_EMAIL }}
          E2E_TEST_APPLE_CALENDAR_PASSWORD: ${{ secrets.E2E_TEST_APPLE_CALENDAR_PASSWORD }}
+          E2E_TEST_CALCOM_QA_EMAIL: ${{ secrets.E2E_TEST_CALCOM_QA_EMAIL }}
+          E2E_TEST_CALCOM_QA_PASSWORD: ${{ secrets.E2E_TEST_CALCOM_QA_PASSWORD }}
+          E2E_TEST_CALCOM_QA_GCAL_CREDENTIALS: ${{ secrets.E2E_TEST_CALCOM_QA_GCAL_CREDENTIALS }}
+          E2E_TEST_CALCOM_GCAL_KEYS: ${{ secrets.E2E_TEST_CALCOM_GCAL_KEYS }}
          E2E_TEST_MAILHOG_ENABLED: ${{ vars.E2E_TEST_MAILHOG_ENABLED }}
          GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
          GOOGLE_LOGIN_ENABLED: ${{ vars.CI_GOOGLE_LOGIN_ENABLED }}
--- a/.github/workflows/e2e-embed-react.yml
+++ b/.github/workflows/e2e-embed-react.yml
@ -1,4 +1,4 @@
-name: E2E Embed React tests and booking flow(for non-embed as well)
+name: E2E Embed React tests and booking flow (for non-embed as well)
 on:
  workflow_call:

--- a/.github/workflows/e2e-embed.yml
+++ b/.github/workflows/e2e-embed.yml
@ -1,4 +1,4 @@
-name: E2E Embed Core tests and booking flow(for non-embed as well)
+name: E2E Embed Core tests and booking flow (for non-embed as well)
 on:
  workflow_call:

--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@ -1,4 +1,4 @@
-name: E2E test
+name: E2E tests

 on:
  workflow_call:
@ -24,7 +24,7 @@ jobs:
    strategy:
      fail-fast: false
      matrix:
-        shard: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+        shard: [1, 2, 3, 4, 5]
    steps:
      - uses: actions/checkout@v3
      - uses: ./.github/actions/dangerous-git-checkout
--- a/.github/workflows/pr.yml
+++ b/.github/workflows/pr.yml
@ -15,35 +15,6 @@ concurrency:
  cancel-in-progress: true

 jobs:
-  changes:
-    name: Detect changes
-    runs-on: buildjet-4vcpu-ubuntu-2204
-    permissions:
-      pull-requests: read
-    outputs:
-      app-store: ${{ steps.filter.outputs.app-store }}
-      embed: ${{ steps.filter.outputs.embed }}
-      embed-react: ${{ steps.filter.outputs.embed-react }}
-    steps:
-      - uses: actions/checkout@v3
-      - uses: ./.github/actions/dangerous-git-checkout
-      - uses: dorny/paths-filter@v2
-        id: filter
-        with:
-          filters: |
-            app-store:
-              - 'apps/web/**'
-              - 'packages/app-store/**'
-              - 'playwright.config.ts'
-            embed:
-              - 'apps/web/**'
-              - 'packages/embeds/**'
-              - 'playwright.config.ts'
-            embed-react:
-              - 'apps/web/**'
-              - 'packages/embeds/**'
-              - 'playwright.config.ts'
-
  type-check:
    name: Type check
    uses: ./.github/workflows/check-types.yml
@ -51,7 +22,7 @@ jobs:

  test:
    name: Unit tests
-    uses: ./.github/workflows/test.yml
+    uses: ./.github/workflows/unit-tests.yml
    secrets: inherit

  lint:
@ -64,42 +35,13 @@ jobs:
    uses: ./.github/workflows/production-build.yml
    secrets: inherit

-  build-without-database:
-    name: Production build (without database)
-    uses: ./.github/workflows/production-build-without-database.yml
-    secrets: inherit
-
-  e2e:
-    name: E2E tests
-    needs: [changes, lint, build]
-    uses: ./.github/workflows/e2e.yml
-    secrets: inherit
-
-  e2e-app-store:
-    name: E2E App Store tests
-    needs: [changes, lint, build]
-    uses: ./.github/workflows/e2e-app-store.yml
-    secrets: inherit
-
-  e2e-embed:
-    name: E2E embeds tests
-    needs: [changes, lint, build]
-    uses: ./.github/workflows/e2e-embed.yml
-    secrets: inherit
-
-  e2e-embed-react:
-    name: E2E React embeds tests
-    needs: [changes, lint, build]
-    uses: ./.github/workflows/e2e-embed-react.yml
-    secrets: inherit
-
  analyze:
    needs: build
    uses: ./.github/workflows/nextjs-bundle-analysis.yml
    secrets: inherit

  required:
-    needs: [lint, type-check, test, build, e2e, e2e-embed, e2e-embed-react, e2e-app-store]
+    needs: [lint, type-check, test, build]
    if: always()
    runs-on: buildjet-4vcpu-ubuntu-2204
    steps:
--- a/.github/workflows/pre-release.yml
+++ b/.github/workflows/pre-release.yml
@ -0,0 +1,85 @@
+name: Pre-release checks
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+
+jobs:
+  changes:
+    name: Detect changes
+    runs-on: buildjet-4vcpu-ubuntu-2204
+    permissions:
+      pull-requests: read
+    outputs:
+      app-store: ${{ steps.filter.outputs.app-store }}
+      embed: ${{ steps.filter.outputs.embed }}
+      embed-react: ${{ steps.filter.outputs.embed-react }}
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
+      - uses: dorny/paths-filter@v2
+        id: filter
+        with:
+          filters: |
+            app-store:
+              - 'apps/web/**'
+              - 'packages/app-store/**'
+              - 'playwright.config.ts'
+            embed:
+              - 'apps/web/**'
+              - 'packages/embeds/**'
+              - 'playwright.config.ts'
+            embed-react:
+              - 'apps/web/**'
+              - 'packages/embeds/**'
+              - 'playwright.config.ts'
+
+  lint:
+    name: Linters
+    uses: ./.github/workflows/lint.yml
+    secrets: inherit
+
+  build:
+    name: Production build
+    uses: ./.github/workflows/production-build.yml
+    secrets: inherit
+
+  e2e:
+    name: E2E tests
+    needs: [changes, lint, build]
+    uses: ./.github/workflows/e2e.yml
+    secrets: inherit
+
+  e2e-app-store:
+    name: E2E App Store tests
+    needs: [changes, lint, build]
+    uses: ./.github/workflows/e2e-app-store.yml
+    secrets: inherit
+
+  e2e-embed:
+    name: E2E embeds tests
+    needs: [changes, lint, build]
+    uses: ./.github/workflows/e2e-embed.yml
+    secrets: inherit
+
+  e2e-embed-react:
+    name: E2E React embeds tests
+    needs: [changes, lint, build]
+    uses: ./.github/workflows/e2e-embed-react.yml
+    secrets: inherit
+
+  build-without-database:
+    name: Production build (without database)
+    uses: ./.github/workflows/production-build-without-database.yml
+    secrets: inherit
+
+  required:
+    needs: [e2e, e2e-app-store, e2e-embed, e2e-embed-react, build-without-database]
+    if: always()
+    runs-on: buildjet-4vcpu-ubuntu-2204
+    steps:
+      - name: fail if conditional jobs failed
+        if: contains(needs.*.result, 'failure') || contains(needs.*.result, 'skipped') || contains(needs.*.result, 'cancelled')
+        run: exit 1
--- a/.github/workflows/production-build.yml
+++ b/.github/workflows/production-build.yml
@ -9,6 +9,10 @@ env:
  DATABASE_URL: ${{ secrets.CI_DATABASE_URL }}
  E2E_TEST_APPLE_CALENDAR_EMAIL: ${{ secrets.E2E_TEST_APPLE_CALENDAR_EMAIL }}
  E2E_TEST_APPLE_CALENDAR_PASSWORD: ${{ secrets.E2E_TEST_APPLE_CALENDAR_PASSWORD }}
+  E2E_TEST_CALCOM_QA_EMAIL: ${{ secrets.E2E_TEST_CALCOM_QA_EMAIL }}
+  E2E_TEST_CALCOM_QA_PASSWORD: ${{ secrets.E2E_TEST_CALCOM_QA_PASSWORD }}
+  E2E_TEST_CALCOM_QA_GCAL_CREDENTIALS: ${{ secrets.E2E_TEST_CALCOM_QA_GCAL_CREDENTIALS }}
+  E2E_TEST_CALCOM_GCAL_KEYS: ${{ secrets.E2E_TEST_CALCOM_GCAL_KEYS }}
  GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
  GOOGLE_LOGIN_ENABLED: ${{ vars.CI_GOOGLE_LOGIN_ENABLED }}
  NEXTAUTH_SECRET: ${{ secrets.CI_NEXTAUTH_SECRET }}
--- a/.github/workflows/semantic-pull-requests.yml
+++ b/.github/workflows/semantic-pull-requests.yml
@ -44,5 +44,5 @@ jobs:
        with:
          header: pr-title-lint-error
          message: |
-            Thank you for following the naming conventions! 🙏 Feel free to join our [discord](https://go.cal.com/discord) and post your PR link to [collect XP and win prizes!](https://cal.com/blog/community-incentives)            
+            Thank you for following the naming conventions! 🙏 Feel free to join our [discord](https://go.cal.com/discord) and post your PR link.           

--- a/.github/workflows/unit-tests.yml
+++ b/.github/workflows/unit-tests.yml
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -2,7 +2,7 @@
  "typescript.tsdk": "node_modules/typescript/lib",
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
  },
  "typescript.preferences.importModuleSpecifier": "non-relative",
  "spellright.language": ["en"],
--- a/.yarn/patches/libphonenumber-js-npm-1.10.51-4ff79b15f8.patch
+++ b/.yarn/patches/libphonenumber-js-npm-1.10.51-4ff79b15f8.patch
@ -1,15 +1,15 @@
 diff --git a/index.cjs b/index.cjs
-index b645707a3549fc298508726e404243499bbed499..f34b0891e99b275a9218e253f303f43d31ef3f73 100644
+index c83f700ae9998cd87b4c2d66ecbb2ad3d7b4603c..76a2200b57f0b9243e2c61464d578b67746ad5a4 100644
 --- a/index.cjs
 +++ b/index.cjs
@@ -13,8 +13,8 @@ function withMetadataArgument(func, _arguments) {
- // https://github.com/babel/babel/issues/2212#issuecomment-131827986
- // An alternative approach:
- // https://www.npmjs.com/package/babel-plugin-add-module-exports
-exports = module.exports = min.parsePhoneNumberFromString
-exports['default'] = min.parsePhoneNumberFromString
-+// exports = module.exports = min.parsePhoneNumberFromString
-+// exports['default'] = min.parsePhoneNumberFromString
- 
- // `parsePhoneNumberFromString()` named export is now considered legacy:
- // it has been promoted to a default export due to being too verbose.
+ // https://github.com/babel/babel/issues/2212#issuecomment-131827986
+ // An alternative approach:
+ // https://www.npmjs.com/package/babel-plugin-add-module-exports
+-exports = module.exports = min.parsePhoneNumberFromString
+-exports['default'] = min.parsePhoneNumberFromString
+// exports = module.exports = min.parsePhoneNumberFromString
+// exports['default'] = min.parsePhoneNumberFromString
+ 
+ // `parsePhoneNumberFromString()` named export is now considered legacy:
+ // it has been promoted to a default export due to being too verbose.
--- a/README.md
+++ b/README.md
@ -147,7 +147,7 @@ Here is what you need to be able to run Cal.com.

   - Duplicate `.env.example` to `.env`
   - Use `openssl rand -base64 32` to generate a key and add it under `NEXTAUTH_SECRET` in the `.env` file.
-   - Use `openssl rand -base64 24` to generate a key and add it under `CALENDSO_ENCRYPTION_KEY` in the `.env` file.
+   - Use `openssl rand -base64 32` to generate a key and add it under `CALENDSO_ENCRYPTION_KEY` in the `.env` file.

 5. Setup Node
   If your Node version does not meet the project's requirements as instructed by the docs, "nvm" (Node Version Manager) allows using Node at the version required by the project:
@ -216,12 +216,11 @@ echo 'NEXT_PUBLIC_DEBUG=1' >> .env

   If you don't want to create a local DB. Then you can also consider using services like railway.app or render.

-   - [Setup postgres DB with railway.app](https://arctype.com/postgres/setup/railway-postgres)
+   - [Setup postgres DB with railway.app](https://docs.railway.app/guides/postgresql)
   - [Setup postgres DB with render](https://render.com/docs/databases)

 1. Copy and paste your `DATABASE_URL` from `.env` to `.env.appStore`.

-1. Set a 24 character random string in your `.env` file for the `CALENDSO_ENCRYPTION_KEY` (You can use a command like `openssl rand -base64 24` to generate one).
 1. Set up the database using the Prisma schema (found in `packages/prisma/schema.prisma`)

   In a development environment, run:
@ -555,6 +554,10 @@ following

 [Follow these steps](./packages/app-store/zoho-bigin/)

+### Obtaining Pipedrive Client ID and Secret
+
+[Follow these steps](./packages/app-store/pipedrive-crm/)
+
 ## Workflows

 ### Setting up SendGrid for Email reminders
--- a/checks/organization.spec.ts
+++ b/checks/organization.spec.ts
@ -41,6 +41,28 @@ test.describe("Org", () => {
      await expectPageToBeServerSideRendered(page);
    });
  });
+  test.describe("Dynamic Group Booking", () => {
+    test("Dynamic Group booking link should load", async ({ page }) => {
+      const users = [
+        {
+          username: "peer",
+          name: "Peer Richelsen",
+        },
+        {
+          username: "bailey",
+          name: "Bailey Pumfleet",
+        },
+      ];
+      const response = await page.goto(`http://i.cal.com/${users[0].username}+${users[1].username}`);
+      expect(response?.status()).toBe(200);
+      expect(await page.locator('[data-testid="event-title"]').textContent()).toBe("Dynamic");
+
+      expect(await page.locator('[data-testid="event-meta"]').textContent()).toContain(users[0].name);
+      expect(await page.locator('[data-testid="event-meta"]').textContent()).toContain(users[1].name);
+      // 2 users and 1 for the organization(2+1)
+      expect((await page.locator('[data-testid="event-meta"] [data-testid="avatar"]').all()).length).toBe(3);
+    });
+  });
 });

 // This ensures that the route is actually mapped to a page that is using withEmbedSsr
--- a/apps/api/lib/validations/event-type.ts
+++ b/apps/api/lib/validations/event-type.ts
@ -60,6 +60,7 @@ export const schemaEventTypeBaseBodyParams = EventType.pick({
  successRedirectUrl: true,
  locations: true,
  bookingLimits: true,
+  onlyShowFirstAvailableSlot: true,
  durationLimits: true,
 })
  .merge(
@ -147,6 +148,7 @@ export const schemaEventTypeReadPublic = EventType.pick({
  seatsShowAvailabilityCount: true,
  bookingFields: true,
  bookingLimits: true,
+  onlyShowFirstAvailableSlot: true,
  durationLimits: true,
 }).merge(
  z.object({
--- a/apps/api/lib/validations/user.ts
+++ b/apps/api/lib/validations/user.ts
@ -92,7 +92,7 @@ export const schemaUserBaseBodyParams = User.pick({
 // Here we can both require or not (adding optional or nullish) and also rewrite validations for any value
 // for example making weekStart only accept weekdays as input
 const schemaUserEditParams = z.object({
-  email: z.string().email(),
+  email: z.string().email().toLowerCase(),
  username: usernameSchema,
  weekStart: z.nativeEnum(weekdays).optional(),
  brandColor: z.string().min(4).max(9).regex(/^#/).optional(),
@ -114,7 +114,7 @@ const schemaUserEditParams = z.object({
 // merging both BaseBodyParams with RequiredParams, and omiting whatever we want at the end.

 const schemaUserCreateParams = z.object({
-  email: z.string().email(),
+  email: z.string().email().toLowerCase(),
  username: usernameSchema,
  weekStart: z.nativeEnum(weekdays).optional(),
  brandColor: z.string().min(4).max(9).regex(/^#/).optional(),
--- a/apps/api/next.config.js
+++ b/apps/api/next.config.js
@ -1,6 +1,8 @@
 const { withAxiom } = require("next-axiom");
+const { withSentryConfig } = require("@sentry/nextjs");

-module.exports = withAxiom({
+const plugins = [withAxiom];
+const nextConfig = {
  transpilePackages: [
    "@calcom/app-store",
    "@calcom/core",
@ -66,4 +68,15 @@ module.exports = withAxiom({
      ],
    };
  },
-});
+};
+
+if (!!process.env.NEXT_PUBLIC_SENTRY_DSN) {
+  nextConfig["sentry"] = {
+    autoInstrumentServerFunctions: true,
+    hideSourceMaps: true,
+  };
+
+  plugins.push(withSentryConfig);
+}
+
+module.exports = () => plugins.reduce((acc, next) => next(acc), nextConfig);
--- a/apps/api/pages/api/bookings/[id]/_auth-middleware.ts
+++ b/apps/api/pages/api/bookings/[id]/_auth-middleware.ts
@ -6,18 +6,44 @@ import { schemaQueryIdParseInt } from "~/lib/validations/shared/queryIdTransform

 async function authMiddleware(req: NextApiRequest) {
  const { userId, prisma, isAdmin, query } = req;
+  if (isAdmin) {
+    return;
+  }
+
  const { id } = schemaQueryIdParseInt.parse(query);
-  const userWithBookings = await prisma.user.findUnique({
+  const userWithBookingsAndTeamIds = await prisma.user.findUnique({
    where: { id: userId },
-    include: { bookings: true },
+    include: {
+      bookings: true,
+      teams: {
+        select: {
+          teamId: true,
+        },
+      },
+    },
  });

-  if (!userWithBookings) throw new HttpError({ statusCode: 404, message: "User not found" });
+  if (!userWithBookingsAndTeamIds) throw new HttpError({ statusCode: 404, message: "User not found" });

-  const userBookingIds = userWithBookings.bookings.map((booking) => booking.id);
+  const userBookingIds = userWithBookingsAndTeamIds.bookings.map((booking) => booking.id);

-  if (!isAdmin && !userBookingIds.includes(id)) {
-    throw new HttpError({ statusCode: 401, message: "You are not authorized" });
+  if (!userBookingIds.includes(id)) {
+    const teamBookings = await prisma.booking.findUnique({
+      where: {
+        id: id,
+        eventType: {
+          team: {
+            id: {
+              in: userWithBookingsAndTeamIds.teams.map((team) => team.teamId),
+            },
+          },
+        },
+      },
+    });
+
+    if (!teamBookings) {
+      throw new HttpError({ statusCode: 401, message: "You are not authorized" });
+    }
  }
 }

--- a/apps/api/pages/api/event-types/_post.ts
+++ b/apps/api/pages/api/event-types/_post.ts
@ -3,8 +3,10 @@ import type { NextApiRequest } from "next";

 import { HttpError } from "@calcom/lib/http-error";
 import { defaultResponder } from "@calcom/lib/server";
+import { MembershipRole } from "@calcom/prisma/client";

 import { schemaEventTypeCreateBodyParams, schemaEventTypeReadPublic } from "~/lib/validations/event-type";
+import { canUserAccessTeamWithRole } from "~/pages/api/teams/[teamId]/_auth-middleware";

 import checkParentEventOwnership from "./_utils/checkParentEventOwnership";
 import checkTeamEventEditPermission from "./_utils/checkTeamEventEditPermission";
@ -316,7 +318,13 @@ async function checkPermissions(req: NextApiRequest) {
      statusCode: 401,
      message: "ADMIN required for `userId`",
    });
-  if (!isAdmin && body.teamId)
+  if (
+    body.teamId &&
+    !isAdmin &&
+    !(await canUserAccessTeamWithRole(req.prisma, req.userId, isAdmin, body.teamId, {
+      in: [MembershipRole.OWNER, MembershipRole.ADMIN],
+    }))
+  )
    throw new HttpError({
      statusCode: 401,
      message: "ADMIN required for `teamId`",
--- a/apps/api/pages/api/slots/_get.ts
+++ b/apps/api/pages/api/slots/_get.ts
@ -1,5 +1,9 @@
+import timezone from "dayjs/plugin/timezone";
+import utc from "dayjs/plugin/utc";
 import type { NextApiRequest, NextApiResponse } from "next";

+import dayjs from "@calcom/dayjs";
+import { isSupportedTimeZone } from "@calcom/lib/date-fns";
 import { HttpError } from "@calcom/lib/http-error";
 import { defaultResponder } from "@calcom/lib/server";
 import { createContext } from "@calcom/trpc/server/createContext";
@ -9,10 +13,34 @@ import { getAvailableSlots } from "@calcom/trpc/server/routers/viewer/slots/util
 import { TRPCError } from "@trpc/server";
 import { getHTTPStatusCodeFromError } from "@trpc/server/http";

+// Apply plugins
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
 async function handler(req: NextApiRequest, res: NextApiResponse) {
  try {
-    const input = getScheduleSchema.parse(req.query);
-    return await getAvailableSlots({ ctx: await createContext({ req, res }), input });
+    const { usernameList, ...rest } = req.query;
+    let slugs = usernameList;
+    if (!Array.isArray(usernameList)) {
+      slugs = usernameList ? [usernameList] : [];
+    }
+    const input = getScheduleSchema.parse({ usernameList: slugs, ...rest });
+    const timeZoneSupported = input.timeZone ? isSupportedTimeZone(input.timeZone) : false;
+    const availableSlots = await getAvailableSlots({ ctx: await createContext({ req, res }), input });
+    const slotsInProvidedTimeZone = timeZoneSupported
+      ? Object.keys(availableSlots.slots).reduce(
+          (acc: Record<string, { time: string; attendees?: number; bookingUid?: string }[]>, date) => {
+            acc[date] = availableSlots.slots[date].map((slot) => ({
+              ...slot,
+              time: dayjs(slot.time).tz(input.timeZone).format(),
+            }));
+            return acc;
+          },
+          {}
+        )
+      : availableSlots;
+
+    return slotsInProvidedTimeZone;
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
  } catch (cause) {
    if (cause instanceof TRPCError) {
--- a/apps/api/pages/api/teams/[teamId]/_auth-middleware.ts
+++ b/apps/api/pages/api/teams/[teamId]/_auth-middleware.ts
@ -27,6 +27,16 @@ export async function checkPermissions(
    version: req.query.version,
    apiKey: req.query.apiKey,
  });
+  return canUserAccessTeamWithRole(prisma, userId, isAdmin, teamId, role);
+}
+
+export async function canUserAccessTeamWithRole(
+  prisma: NextApiRequest["prisma"],
+  userId: number,
+  isAdmin: boolean,
+  teamId: number,
+  role: Prisma.MembershipWhereInput["role"] = MembershipRole.OWNER
+) {
  const args: Prisma.TeamFindFirstArgs = { where: { id: teamId } };
  /** If not ADMIN then we check if the actual user belongs to team and matches the required role */
  if (!isAdmin) args.where = { ...args.where, members: { some: { userId, role } } };
--- a/apps/api/sentry.client.config.ts
+++ b/apps/api/sentry.client.config.ts
@ -0,0 +1 @@
+export {};
--- a/apps/api/sentry.edge.config.ts
+++ b/apps/api/sentry.edge.config.ts
@ -0,0 +1,5 @@
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+});
--- a/apps/api/sentry.server.config.ts
+++ b/apps/api/sentry.server.config.ts
@ -0,0 +1,6 @@
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  tracesSampleRate: 1.0,
+});
--- a/apps/storybook/.gitignore
+++ b/apps/storybook/.gitignore
@ -8,7 +8,9 @@ pnpm-debug.log*
 lerna-debug.log*

 node_modules
-storybook-static
+storybook-static/*
+!storybook-static/favicon.ico
+!storybook-static/sb-cover.jpg
 dist
 dist-ssr
 *.local
--- a/apps/storybook/.storybook/main.js
+++ b/apps/storybook/.storybook/main.js
@ -1,76 +0,0 @@
-const path = require("path");
-
-module.exports = {
-  stories: [
-    "../intro.stories.mdx",
-    "../../../packages/ui/components/**/*.stories.mdx",
-    "../../../packages/atoms/**/*.stories.mdx",
-    "../../../packages/features/**/*.stories.mdx",
-    "../../../packages/ui/components/**/*.stories.@(js|jsx|ts|tsx)",
-  ],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-    "storybook-addon-rtl-direction",
-    "storybook-react-i18next",
-    "storybook-addon-next",
-    "storybook-addon-next-router",
-    /*{
-      name: "storybook-addon-next",
-      options: {
-        nextConfigPath: path.resolve(__dirname, "../../web/next.config.js"),
-      },
-    },*/
-  ],
-  framework: "@storybook/react",
-  core: {
-    builder: "webpack5",
-  },
-  staticDirs: ["../public"],
-  webpackFinal: async (config, { configType }) => {
-    config.resolve.fallback = {
-      fs: false,
-      assert: false,
-      buffer: false,
-      console: false,
-      constants: false,
-      crypto: false,
-      domain: false,
-      events: false,
-      http: false,
-      https: false,
-      os: false,
-      path: false,
-      punycode: false,
-      process: false,
-      querystring: false,
-      stream: false,
-      string_decoder: false,
-      sys: false,
-      timers: false,
-      tty: false,
-      url: false,
-      util: false,
-      vm: false,
-      zlib: false,
-    };
-
-    config.module.rules.push({
-      test: /\.css$/,
-      use: [
-        "style-loader",
-        {
-          loader: "css-loader",
-          options: {
-            modules: true, // Enable modules to help you using className
-          },
-        },
-      ],
-      include: path.resolve(__dirname, "../src"),
-    });
-
-    return config;
-  },
-  typescript: { reactDocgen: "react-docgen" },
-};
--- a/apps/storybook/.storybook/main.ts
+++ b/apps/storybook/.storybook/main.ts
@ -0,0 +1,96 @@
+import type { StorybookConfig } from "@storybook/nextjs";
+import path, { dirname, join } from "path";
+
+const config: StorybookConfig = {
+  stories: [
+    "../intro.stories.mdx",
+    "../../../packages/ui/components/**/*.stories.mdx", // legacy SB6 stories
+    "../../../packages/ui/components/**/*.stories.@(js|jsx|ts|tsx)",
+    "../../../packages/ui/components/**/*.docs.mdx",
+    "../../../packages/features/**/*.stories.@(js|jsx|ts|tsx)",
+    "../../../packages/features/**/*.docs.mdx",
+    "../../../packages/atoms/**/*.stories.@(js|jsx|ts|tsx)",
+    "../../../packages/atoms/**/*.docs.mdx",
+  ],
+
+  addons: [
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-interactions"),
+    getAbsolutePath("storybook-addon-rtl-direction"),
+    getAbsolutePath("storybook-react-i18next"),
+  ],
+
+  framework: {
+    name: getAbsolutePath("@storybook/nextjs") as "@storybook/nextjs",
+
+    options: {
+      // builder: {
+      //   fsCache: true,
+      //   lazyCompilation: true,
+      // },
+    },
+  },
+
+  staticDirs: ["../public"],
+
+  webpackFinal: async (config, { configType }) => {
+    config.resolve = config.resolve || {};
+    config.resolve.fallback = {
+      fs: false,
+      assert: false,
+      buffer: false,
+      console: false,
+      constants: false,
+      crypto: false,
+      domain: false,
+      events: false,
+      http: false,
+      https: false,
+      os: false,
+      path: false,
+      punycode: false,
+      process: false,
+      querystring: false,
+      stream: false,
+      string_decoder: false,
+      sys: false,
+      timers: false,
+      tty: false,
+      url: false,
+      util: false,
+      vm: false,
+      zlib: false,
+    };
+
+    config.module = config.module || {};
+    config.module.rules = config.module.rules || [];
+    config.module.rules.push({
+      test: /\.css$/,
+      use: [
+        "style-loader",
+        {
+          loader: "css-loader",
+          options: {
+            modules: true, // Enable modules to help you using className
+          },
+        },
+      ],
+      include: path.resolve(__dirname, "../src"),
+    });
+
+    return config;
+  },
+
+  typescript: { reactDocgen: "react-docgen" },
+
+  docs: {
+    autodocs: true,
+  },
+};
+
+export default config;
+
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, "package.json")));
+}
--- a/apps/storybook/.storybook/preview.jsx
+++ b/apps/storybook/.storybook/preview.jsx
@ -1,48 +0,0 @@
-import { addDecorator } from "@storybook/react";
-import { AppRouterContext } from "next/dist/shared/lib/app-router-context";
-import { I18nextProvider } from "react-i18next";
-
-import "../styles/globals.css";
-import "../styles/storybook-styles.css";
-import i18n from "./i18next";
-
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-  nextRouter: {
-    pathname: "/",
-    asPath: "/",
-    query: {},
-    push() {},
-    Provider: AppRouterContext.Provider,
-  },
-  globals: {
-    locale: "en",
-    locales: {
-      en: "English",
-      fr: "Français",
-    },
-  },
-  i18n,
-};
-
-addDecorator((storyFn) => (
-  <I18nextProvider i18n={i18n}>
-    <div style={{ margin: "2rem" }}>{storyFn()}</div>
-  </I18nextProvider>
-));
-
-window.getEmbedNamespace = () => {
-  const url = new URL(document.URL);
-  const namespace = url.searchParams.get("embed");
-  return namespace;
-};
-
-window.getEmbedTheme = () => {
-  return "auto";
-};
--- a/apps/storybook/.storybook/preview.tsx
+++ b/apps/storybook/.storybook/preview.tsx
@ -0,0 +1,73 @@
+// adds tooltip context to all stories
+import { TooltipProvider } from "@radix-ui/react-tooltip";
+import type { Preview } from "@storybook/react";
+import React from "react";
+import { I18nextProvider } from "react-i18next";
+
+import type { EmbedThemeConfig } from "@calcom/embed-core/src/types";
+// adds trpc context to all stories (esp. booker)
+import { StorybookTrpcProvider } from "@calcom/ui";
+
+import "../styles/globals.css";
+import "../styles/storybook-styles.css";
+import i18n from "./i18next";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+
+    globals: {
+      locale: "en",
+      locales: {
+        en: "English",
+        fr: "Français",
+      },
+    },
+
+    i18n,
+
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+
+  decorators: [
+    (Story) => (
+      <StorybookTrpcProvider>
+        <TooltipProvider>
+          <I18nextProvider i18n={i18n}>
+            <div style={{ margin: "2rem" }}>
+              <Story />
+            </div>
+          </I18nextProvider>
+        </TooltipProvider>
+      </StorybookTrpcProvider>
+    ),
+  ],
+};
+
+export default preview;
+
+declare global {
+  interface Window {
+    getEmbedNamespace: () => string | null;
+    getEmbedTheme: () => EmbedThemeConfig | null;
+  }
+}
+
+window.getEmbedNamespace = () => {
+  const url = new URL(document.URL);
+  const namespace = url.searchParams.get("embed");
+  return namespace;
+};
+
+window.getEmbedTheme = () => {
+  return "auto";
+};
--- a/apps/storybook/components/CustomArgsTable.tsx
+++ b/apps/storybook/components/CustomArgsTable.tsx
@ -1,6 +1,6 @@
 import { ArgsTable } from "@storybook/addon-docs";
-import { SortType } from "@storybook/components";
-import { PropDescriptor } from "@storybook/store";
+import type { SortType } from "@storybook/blocks";
+import type { PropDescriptor } from "@storybook/preview-api";

 // eslint-disable-next-line @typescript-eslint/no-explicit-any -- ignore storybook addon types component as any so we have to do
 type Component = any;
--- a/apps/storybook/intro.stories.mdx
+++ b/apps/storybook/intro.stories.mdx
@ -9,10 +9,7 @@ import { Meta } from "@storybook/addon-docs";
    library, we will be adding more components as we go along.
  </p>
  <p>
-    Our{" "}
-    <a href="https://www.figma.com/file/9MOufQNLtdkpnDucmNX10R/%E2%9D%96-Cal-DS" target="_blank">
-      Figma
-    </a>{" "}
+    Our <a href="https://www.figma.com/file/9MOufQNLtdkpnDucmNX10R/%E2%9D%96-Cal-DS" target="_blank">Figma</a>
    library is available for anyone to view and use. If you have any questions or concerns, please reach out to
    the design team.
  </p>
--- a/apps/storybook/package.json
+++ b/apps/storybook/package.json
@ -3,8 +3,8 @@
  "private": true,
  "version": "0.0.0",
  "scripts": {
-    "dev": "start-storybook -p 6006",
-    "build": "build-storybook"
+    "dev": "storybook dev -p 6006",
+    "build": "storybook build"
  },
  "dependencies": {
    "@calcom/config": "*",
@ -20,23 +20,25 @@
    "@radix-ui/react-slider": "^1.0.0",
    "@radix-ui/react-switch": "^1.0.0",
    "@radix-ui/react-tooltip": "^1.0.0",
+    "@storybook/addon-docs": "^7.6.3",
+    "@storybook/blocks": "^7.6.3",
+    "@storybook/nextjs": "^7.6.3",
+    "@storybook/preview-api": "^7.6.3",
    "next": "^13.4.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
-    "storybook-addon-next-router": "^4.0.2",
    "storybook-addon-rtl-direction": "^0.0.19"
  },
  "devDependencies": {
    "@babel/core": "^7.19.6",
-    "@storybook/addon-actions": "^6.5.13",
-    "@storybook/addon-essentials": "^6.5.13",
-    "@storybook/addon-interactions": "^6.5.13",
-    "@storybook/addon-links": "^6.5.13",
-    "@storybook/builder-vite": "^0.2.4",
-    "@storybook/builder-webpack5": "^6.5.13",
-    "@storybook/manager-webpack5": "^6.5.13",
-    "@storybook/react": "^6.5.13",
-    "@storybook/testing-library": "^0.0.13",
+    "@storybook/addon-actions": "^7.6.3",
+    "@storybook/addon-designs": "^7.0.7",
+    "@storybook/addon-essentials": "^7.6.3",
+    "@storybook/addon-interactions": "^7.6.3",
+    "@storybook/addon-links": "^7.6.3",
+    "@storybook/nextjs": "^7.6.3",
+    "@storybook/react": "^7.6.3",
+    "@storybook/testing-library": "^0.2.2",
    "@types/react": "18.0.26",
    "@types/react-dom": "^18.0.9",
    "@vitejs/plugin-react": "^2.2.0",
@ -46,9 +48,8 @@
    "postcss": "^8.4.18",
    "postcss-pseudo-companion-classes": "^0.1.1",
    "rollup-plugin-polyfill-node": "^0.10.2",
-    "storybook-addon-designs": "^6.3.1",
-    "storybook-addon-next": "^1.6.9",
-    "storybook-react-i18next": "^1.1.2",
+    "storybook": "^7.6.3",
+    "storybook-react-i18next": "^2.0.9",
    "tailwindcss": "^3.3.3",
    "typescript": "^4.9.4",
    "vite": "^4.1.2"
--- a/apps/storybook/styles/storybook-styles.css
+++ b/apps/storybook/styles/storybook-styles.css
@ -197,88 +197,91 @@
@layer {
  :root {
    /* background */
-
-    --cal-bg-emphasis: #e5e7eb;
-    --cal-bg: white;
-    --cal-bg-subtle: #f3f4f6;
-    --cal-bg-muted: #f9fafb;
-    --cal-bg-inverted: #111827;
-
+  
+    --cal-bg-emphasis: hsla(220,13%,91%,1);
+    --cal-bg: hsla(0,0%,100%,1);
+    --cal-bg-subtle: hsla(220, 14%, 96%,1);
+    --cal-bg-muted: hsla(210,20%,98%,1);
+    --cal-bg-inverted: hsla(0,0%,6%,1);
+  
    /* background -> components*/
-    --cal-bg-info: #dee9fc;
-    --cal-bg-success: #e2fbe8;
-    --cal-bg-attention: #fceed8;
-    --cal-bg-error: #f9e3e2;
-    --cal-bg-dark-error: #752522;
-
+    --cal-bg-info: hsla(218,83%,98%,1);
+    --cal-bg-success: hsla(134,76%,94%,1);
+    --cal-bg-attention: hsla(37, 86%, 92%, 1);
+    --cal-bg-error: hsla(3,66,93,1);
+    --cal-bg-dark-error: hsla(2, 55%, 30%, 1);
+  
    /* Borders */
-    --cal-border-emphasis: #9ca3af;
-    --cal-border: #d1d5db;
-    --cal-border-subtle: #e5e7eb;
-    --cal-border-muted: #f3f4f6;
-    --cal-border-error: #aa2e26;
-
+    --cal-border-emphasis: hsla(218, 11%, 65%, 1);
+    --cal-border: hsla(216, 12%, 84%, 1);
+    --cal-border-subtle: hsla(220, 13%, 91%, 1);
+    --cal-border-booker: #e5e7eb;
+    --cal-border-muted: hsla(220, 14%, 96%, 1);
+    --cal-border-error: hsla(4, 63%, 41%, 1);
+  
    /* Content/Text */
-    --cal-text-emphasis: #111827;
-    --cal-text: #374151;
-    --cal-text-subtle: #6b7280;
-    --cal-text-muted: #9ca3af;
-    --cal-text-inverted: white;
-
+    --cal-text-emphasis: hsla(217, 19%, 27%, 1);
+    --cal-text: hsla(217, 19%, 27%, 1);
+    --cal-text-subtle: hsla(220, 9%, 46%, 1);
+    --cal-text-muted: hsla(218, 11%, 65%, 1);
+    --cal-text-inverted: hsla(0, 0%, 100%, 1);
+  
    /* Content/Text -> components */
-    --cal-text-info: #253985;
-    --cal-text-success: #285231;
-    --cal-text-attention: #73321b;
-    --cal-text-error: #752522;
-
+    --cal-text-info: hsla(228, 56%, 33%, 1);
+    --cal-text-success: hsla(133, 34%, 24%, 1);
+    --cal-text-attention: hsla(16, 62%, 28%, 1);
+    --cal-text-error: hsla(2, 55%, 30%, 1);
+  
    /* Brand shinanigans
-      -> These will be computed for the users theme at runtime.
-    */
-    --cal-brand: #111827;
-    --cal-brand-emphasis: #101010;
-    --cal-brand-text: white;
+        -> These will be computed for the users theme at runtime.
+      */
+    --cal-brand: hsla(221, 39%, 11%, 1);
+    --cal-brand-emphasis: hsla(0, 0%, 6%, 1);
+    --cal-brand-text: hsla(0, 0%, 100%, 1);
  }
  .dark {
    /* background */
-
-    --cal-bg-emphasis: #2b2b2b;
-    --cal-bg: #101010;
-    --cal-bg-subtle: #2b2b2b;
-    --cal-bg-muted: #1c1c1c;
-    --cal-bg-inverted: #f3f4f6;
-
+  
+    --cal-bg-emphasis: hsla(0, 0%, 32%, 1);
+    --cal-bg: hsla(0, 0%, 10%, 1);
+    --cal-bg-subtle: hsla(0, 0%, 18%, 1);
+    --cal-bg-muted: hsla(0, 0%, 12%, 1);
+    --cal-bg-inverted: hsla(220, 14%, 96%, 1);
+  
    /* background -> components*/
-    --cal-bg-info: #263fa9;
-    --cal-bg-success: #306339;
-    --cal-bg-attention: #8e3b1f;
-    --cal-bg-error: #8c2822;
-    --cal-bg-dark-error: #752522;
-
+    --cal-bg-info: hsla(228, 56%, 33%, 1);
+    --cal-bg-success: hsla(133, 34%, 24%, 1);
+    --cal-bg-attention: hsla(16, 62%, 28%, 1);
+    --cal-bg-error: hsla(2, 55%, 30%, 1);
+    --cal-bg-dark-error: hsla(2, 55%, 30%, 1);
+  
    /* Borders */
-    --cal-border-emphasis: #575757;
-    --cal-border: #444444;
-    --cal-border-subtle: #2b2b2b;
-    --cal-border-muted: #1c1c1c;
-    --cal-border-error: #aa2e26;
-
+    --cal-border-emphasis: hsla(0, 0%, 46%, 1);
+    --cal-border: hsla(0, 0%, 34%, 1);
+    --cal-border-subtle: hsla(0, 0%, 22%, 1);
+    --cal-border-booker: hsla(0, 0%, 22%, 1);
+    --cal-border-muted: hsla(0, 0%, 18%, 1);
+    --cal-border-error: hsla(4, 63%, 41%, 1);
+  
    /* Content/Text */
-    --cal-text-emphasis: #f3f4f6;
-    --cal-text: #d6d6d6;
-    --cal-text-subtle: #757575;
-    --cal-text-muted: #575757;
-    --cal-text-inverted: #101010;
-
+    --cal-text-emphasis: hsla(240, 20%, 99%, 1);
+    --cal-text: hsla(0, 0%, 84%, 1);
+    --cal-text-subtle: hsla(0, 0%, 65%, 1);
+    --cal-text-muted: hsla(0, 0%, 34%, 1);
+    --cal-text-inverted: hsla(0, 0%, 10%, 1);
+  
    /* Content/Text -> components */
-    --cal-text-info: #dee9fc;
-    --cal-text-success: #e2fbe8;
-    --cal-text-attention: #fceed8;
-    --cal-text-error: #f9e3e2;
-
+    --cal-text-info: hsla(218, 83%, 93%, 1);
+    --cal-text-success: hsla(134, 76%, 94%, 1);
+    --cal-text-attention: hsla(37, 86%, 92%, 1);
+    --cal-text-error: hsla(3, 66%, 93%, 1);
+  
    /* Brand shenanigans
-      -> These will be computed for the users theme at runtime.
-    */
-    --cal-brand: white;
-    --cal-brand-emphasis: #e1e1e1;
-    --cal-brand-text: black;
+        -> These will be computed for the users theme at runtime.
+      */
+    --cal-brand: hsla(0, 0%, 100%, 1);
+    --cal-brand-emphasis: hsla(218, 11%, 65%, 1);
+    --cal-brand-text: hsla(0, 0%, 0%,1);
  }
+  
 }
--- a/apps/web/abTest/middlewareFactory.ts
+++ b/apps/web/abTest/middlewareFactory.ts
@ -6,6 +6,17 @@ import z from "zod";
 const ROUTES: [URLPattern, boolean][] = [
  ["/event-types", process.env.APP_ROUTER_EVENT_TYPES_ENABLED === "1"] as const,
  ["/settings/admin/:path*", process.env.APP_ROUTER_SETTINGS_ADMIN_ENABLED === "1"] as const,
+  ["/apps/installed/:category", process.env.APP_ROUTER_APPS_INSTALLED_CATEGORY_ENABLED === "1"] as const,
+  ["/apps/:slug", process.env.APP_ROUTER_APPS_SLUG_ENABLED === "1"] as const,
+  ["/apps/:slug/setup", process.env.APP_ROUTER_APPS_SLUG_SETUP_ENABLED === "1"] as const,
+  ["/apps/categories", process.env.APP_ROUTER_APPS_CATEGORIES_ENABLED === "1"] as const,
+  ["/apps/categories/:category", process.env.APP_ROUTER_APPS_CATEGORIES_CATEGORY_ENABLED === "1"] as const,
+  ["/workflows/:path*", process.env.APP_ROUTER_WORKFLOWS_ENABLED === "1"] as const,
+  ["/settings/teams/:path*", process.env.APP_ROUTER_SETTINGS_TEAMS_ENABLED === "1"] as const,
+  ["/getting-started/:step", process.env.APP_ROUTER_GETTING_STARTED_STEP_ENABLED === "1"] as const,
+  ["/apps", process.env.APP_ROUTER_APPS_ENABLED === "1"] as const,
+  ["/bookings/:status", process.env.APP_ROUTER_BOOKINGS_STATUS_ENABLED === "1"] as const,
+  ["/video/:path*", process.env.APP_ROUTER_VIDEO_ENABLED === "1"] as const,
 ].map(([pathname, enabled]) => [
  new URLPattern({
    pathname,
--- a/apps/web/app/_trpc/createTRPCNextLayout.ts
+++ b/apps/web/app/_trpc/createTRPCNextLayout.ts
@ -0,0 +1,212 @@
+// originally from in the "experimental playground for tRPC + next.js 13" repo owned by trpc team
+// file link: https://github.com/trpc/next-13/blob/main/%40trpc/next-layout/createTRPCNextLayout.ts
+// repo link: https://github.com/trpc/next-13
+// code is / will continue to be adapted for our usage
+import { dehydrate, QueryClient } from "@tanstack/query-core";
+import type { DehydratedState, QueryKey } from "@tanstack/react-query";
+
+import type { Maybe, TRPCClientError, TRPCClientErrorLike } from "@calcom/trpc";
+import {
+  callProcedure,
+  type AnyProcedure,
+  type AnyQueryProcedure,
+  type AnyRouter,
+  type DataTransformer,
+  type inferProcedureInput,
+  type inferProcedureOutput,
+  type inferRouterContext,
+  type MaybePromise,
+  type ProcedureRouterRecord,
+} from "@calcom/trpc/server";
+
+import { createRecursiveProxy, createFlatProxy } from "@trpc/server/shared";
+
+export function getArrayQueryKey(
+  queryKey: string | [string] | [string, ...unknown[]] | unknown[],
+  type: string
+): QueryKey {
+  const queryKeyArrayed = Array.isArray(queryKey) ? queryKey : [queryKey];
+  const [arrayPath, input] = queryKeyArrayed;
+
+  if (!input && (!type || type === "any")) {
+    return Array.isArray(arrayPath) && arrayPath.length !== 0 ? [arrayPath] : ([] as unknown as QueryKey);
+  }
+
+  return [
+    arrayPath,
+    {
+      ...(typeof input !== "undefined" && { input: input }),
+      ...(type && type !== "any" && { type: type }),
+    },
+  ];
+}
+
+// copy starts
+// copied from trpc/trpc repo
+// ref: https://github.com/trpc/trpc/blob/main/packages/next/src/withTRPC.tsx#L37-#L58
+function transformQueryOrMutationCacheErrors<
+  TState extends DehydratedState["queries"][0] | DehydratedState["mutations"][0]
+>(result: TState): TState {
+  const error = result.state.error as Maybe<TRPCClientError<any>>;
+  if (error instanceof Error && error.name === "TRPCClientError") {
+    const newError: TRPCClientErrorLike<any> = {
+      message: error.message,
+      data: error.data,
+      shape: error.shape,
+    };
+    return {
+      ...result,
+      state: {
+        ...result.state,
+        error: newError,
+      },
+    };
+  }
+  return result;
+}
+// copy ends
+
+interface CreateTRPCNextLayoutOptions<TRouter extends AnyRouter> {
+  router: TRouter;
+  createContext: () => MaybePromise<inferRouterContext<TRouter>>;
+  transformer?: DataTransformer;
+}
+
+/**
+ * @internal
+ */
+export type DecorateProcedure<TProcedure extends AnyProcedure> = TProcedure extends AnyQueryProcedure
+  ? {
+      fetch(input: inferProcedureInput<TProcedure>): Promise<inferProcedureOutput<TProcedure>>;
+      fetchInfinite(input: inferProcedureInput<TProcedure>): Promise<inferProcedureOutput<TProcedure>>;
+      prefetch(input: inferProcedureInput<TProcedure>): Promise<inferProcedureOutput<TProcedure>>;
+      prefetchInfinite(input: inferProcedureInput<TProcedure>): Promise<inferProcedureOutput<TProcedure>>;
+    }
+  : never;
+
+type OmitNever<TType> = Pick<
+  TType,
+  {
+    [K in keyof TType]: TType[K] extends never ? never : K;
+  }[keyof TType]
+>;
+/**
+ * @internal
+ */
+export type DecoratedProcedureRecord<
+  TProcedures extends ProcedureRouterRecord,
+  TPath extends string = ""
+> = OmitNever<{
+  [TKey in keyof TProcedures]: TProcedures[TKey] extends AnyRouter
+    ? DecoratedProcedureRecord<TProcedures[TKey]["_def"]["record"], `${TPath}${TKey & string}.`>
+    : TProcedures[TKey] extends AnyQueryProcedure
+    ? DecorateProcedure<TProcedures[TKey]>
+    : never;
+}>;
+
+type CreateTRPCNextLayout<TRouter extends AnyRouter> = DecoratedProcedureRecord<TRouter["_def"]["record"]> & {
+  dehydrate(): Promise<DehydratedState>;
+  queryClient: QueryClient;
+};
+
+const getStateContainer = <TRouter extends AnyRouter>(opts: CreateTRPCNextLayoutOptions<TRouter>) => {
+  let _trpc: {
+    queryClient: QueryClient;
+    context: inferRouterContext<TRouter>;
+  } | null = null;
+
+  return () => {
+    if (_trpc === null) {
+      _trpc = {
+        context: opts.createContext(),
+        queryClient: new QueryClient(),
+      };
+    }
+
+    return _trpc;
+  };
+};
+
+export function createTRPCNextLayout<TRouter extends AnyRouter>(
+  opts: CreateTRPCNextLayoutOptions<TRouter>
+): CreateTRPCNextLayout<TRouter> {
+  const getState = getStateContainer(opts);
+
+  const transformer = opts.transformer ?? {
+    serialize: (v) => v,
+    deserialize: (v) => v,
+  };
+
+  return createFlatProxy((key) => {
+    const state = getState();
+    const { queryClient } = state;
+    if (key === "queryClient") {
+      return queryClient;
+    }
+
+    if (key === "dehydrate") {
+      // copy starts
+      // copied from trpc/trpc repo
+      // ref: https://github.com/trpc/trpc/blob/main/packages/next/src/withTRPC.tsx#L214-#L229
+      const dehydratedCache = dehydrate(queryClient, {
+        shouldDehydrateQuery() {
+          // makes sure errors are also dehydrated
+          return true;
+        },
+      });
+
+      // since error instances can't be serialized, let's make them into `TRPCClientErrorLike`-objects
+      const dehydratedCacheWithErrors = {
+        ...dehydratedCache,
+        queries: dehydratedCache.queries.map(transformQueryOrMutationCacheErrors),
+        mutations: dehydratedCache.mutations.map(transformQueryOrMutationCacheErrors),
+      };
+
+      return () => transformer.serialize(dehydratedCacheWithErrors);
+    }
+    // copy ends
+
+    return createRecursiveProxy(async (callOpts) => {
+      const path = [key, ...callOpts.path];
+      const utilName = path.pop();
+      const ctx = await state.context;
+
+      const caller = opts.router.createCaller(ctx);
+
+      const pathStr = path.join(".");
+      const input = callOpts.args[0];
+
+      if (utilName === "fetchInfinite") {
+        return queryClient.fetchInfiniteQuery(getArrayQueryKey([path, input], "infinite"), () =>
+          caller.query(pathStr, input)
+        );
+      }
+
+      if (utilName === "prefetch") {
+        return queryClient.prefetchQuery({
+          queryKey: getArrayQueryKey([path, input], "query"),
+          queryFn: async () => {
+            const res = await callProcedure({
+              procedures: opts.router._def.procedures,
+              path: pathStr,
+              rawInput: input,
+              ctx,
+              type: "query",
+            });
+            return res;
+          },
+        });
+      }
+
+      if (utilName === "prefetchInfinite") {
+        return queryClient.prefetchInfiniteQuery(getArrayQueryKey([path, input], "infinite"), () =>
+          caller.query(pathStr, input)
+        );
+      }
+
+      return queryClient.fetchQuery(getArrayQueryKey([path, input], "query"), () =>
+        caller.query(pathStr, input)
+      );
+    }) as CreateTRPCNextLayout<TRouter>;
+  });
+}
--- a/apps/web/app/_trpc/ssgInit.ts
+++ b/apps/web/app/_trpc/ssgInit.ts
@ -0,0 +1,34 @@
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { headers } from "next/headers";
+import superjson from "superjson";
+
+import { CALCOM_VERSION } from "@calcom/lib/constants";
+import prisma, { readonlyPrisma } from "@calcom/prisma";
+import { appRouter } from "@calcom/trpc/server/routers/_app";
+
+import { createTRPCNextLayout } from "./createTRPCNextLayout";
+
+export async function ssgInit() {
+  const locale = headers().get("x-locale") ?? "en";
+
+  const i18n = (await serverSideTranslations(locale, ["common"])) || "en";
+
+  const ssg = createTRPCNextLayout({
+    router: appRouter,
+    transformer: superjson,
+    createContext() {
+      return { prisma, insightsDb: readonlyPrisma, session: null, locale, i18n };
+    },
+  });
+
+  // i18n translations are already retrieved from serverSideTranslations call, there is no need to run a i18n.fetch
+  // we can set query data directly to the queryClient
+  const queryKey = [
+    ["viewer", "public", "i18n"],
+    { input: { locale, CalComVersion: CALCOM_VERSION }, type: "query" },
+  ];
+
+  ssg.queryClient.setQueryData(queryKey, { i18n });
+
+  return ssg;
+}
--- a/apps/web/app/_trpc/ssrInit.ts
+++ b/apps/web/app/_trpc/ssrInit.ts
@ -0,0 +1,57 @@
+import { type GetServerSidePropsContext } from "next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { headers, cookies } from "next/headers";
+import superjson from "superjson";
+
+import { getLocale } from "@calcom/features/auth/lib/getLocale";
+import { CALCOM_VERSION } from "@calcom/lib/constants";
+import prisma, { readonlyPrisma } from "@calcom/prisma";
+import { appRouter } from "@calcom/trpc/server/routers/_app";
+
+import { createTRPCNextLayout } from "./createTRPCNextLayout";
+
+export async function ssrInit(options?: { noI18nPreload: boolean }) {
+  const req = {
+    headers: headers(),
+    cookies: cookies(),
+  };
+
+  const locale = await getLocale(req);
+
+  const i18n = (await serverSideTranslations(locale, ["common", "vital"])) || "en";
+
+  const ssr = createTRPCNextLayout({
+    router: appRouter,
+    transformer: superjson,
+    createContext() {
+      return {
+        prisma,
+        insightsDb: readonlyPrisma,
+        session: null,
+        locale,
+        i18n,
+        req: req as unknown as GetServerSidePropsContext["req"],
+      };
+    },
+  });
+
+  // i18n translations are already retrieved from serverSideTranslations call, there is no need to run a i18n.fetch
+  // we can set query data directly to the queryClient
+  const queryKey = [
+    ["viewer", "public", "i18n"],
+    { input: { locale, CalComVersion: CALCOM_VERSION }, type: "query" },
+  ];
+  if (!options?.noI18nPreload) {
+    ssr.queryClient.setQueryData(queryKey, { i18n });
+  }
+
+  await Promise.allSettled([
+    // So feature flags are available on first render
+    ssr.viewer.features.map.prefetch(),
+    // Provides a better UX to the users who have already upgraded.
+    ssr.viewer.teams.hasTeamPlan.prefetch(),
+    ssr.viewer.public.session.prefetch(),
+  ]);
+
+  return ssr;
+}
--- a/apps/web/app/future/(individual-page-wrapper)/apps/[slug]/layout.tsx
+++ b/apps/web/app/future/(individual-page-wrapper)/apps/[slug]/layout.tsx
@ -0,0 +1,15 @@
+import { type ReactElement } from "react";
+
+import PageWrapper from "@components/PageWrapperAppDir";
+
+type EventTypesLayoutProps = {
+  children: ReactElement;
+};
+
+export default function Layout({ children }: EventTypesLayoutProps) {
+  return (
+    <PageWrapper getLayout={null} requiresLicense={false} nonce={undefined} themeBasis={null}>
+      {children}
+    </PageWrapper>
+  );
+}
--- a/apps/web/app/future/(individual-page-wrapper)/apps/[slug]/page.tsx
+++ b/apps/web/app/future/(individual-page-wrapper)/apps/[slug]/page.tsx
@ -0,0 +1,126 @@
+import AppPage from "@pages/apps/[slug]/index";
+import { Prisma } from "@prisma/client";
+import { _generateMetadata } from "app/_utils";
+import fs from "fs";
+import matter from "gray-matter";
+import { notFound } from "next/navigation";
+import path from "path";
+import { z } from "zod";
+
+import { getAppWithMetadata } from "@calcom/app-store/_appRegistry";
+import { getAppAssetFullPath } from "@calcom/app-store/getAppAssetFullPath";
+import { APP_NAME, IS_PRODUCTION } from "@calcom/lib/constants";
+import prisma from "@calcom/prisma";
+
+const sourceSchema = z.object({
+  content: z.string(),
+  data: z.object({
+    description: z.string().optional(),
+    items: z
+      .array(
+        z.union([
+          z.string(),
+          z.object({
+            iframe: z.object({ src: z.string() }),
+          }),
+        ])
+      )
+      .optional(),
+  }),
+});
+
+export const generateMetadata = async ({ params }: { params: Record<string, string | string[]> }) => {
+  const { data } = await getPageProps({ params });
+
+  return await _generateMetadata(
+    () => `${data.name} | ${APP_NAME}`,
+    () => data.description
+  );
+};
+
+export const generateStaticParams = async () => {
+  try {
+    const appStore = await prisma.app.findMany({ select: { slug: true } });
+    return appStore.map(({ slug }) => ({ slug }));
+  } catch (e: unknown) {
+    if (e instanceof Prisma.PrismaClientInitializationError) {
+      // Database is not available at build time, but that's ok – we fall back to resolving paths on demand
+    } else {
+      throw e;
+    }
+  }
+
+  return [];
+};
+
+const getPageProps = async ({ params }: { params: Record<string, string | string[]> }) => {
+  if (typeof params?.slug !== "string") {
+    notFound();
+  }
+
+  const appMeta = await getAppWithMetadata({
+    slug: params?.slug,
+  });
+
+  const appFromDb = await prisma.app.findUnique({
+    where: { slug: params.slug.toLowerCase() },
+  });
+
+  const isAppAvailableInFileSystem = appMeta;
+  const isAppDisabled = isAppAvailableInFileSystem && (!appFromDb || !appFromDb.enabled);
+
+  if (!IS_PRODUCTION && isAppDisabled) {
+    return {
+      isAppDisabled: true as const,
+      data: {
+        ...appMeta,
+      },
+    };
+  }
+
+  if (!appFromDb || !appMeta || isAppDisabled) {
+    notFound();
+  }
+
+  const isTemplate = appMeta.isTemplate;
+  const appDirname = path.join(isTemplate ? "templates" : "", appFromDb.dirName);
+  const README_PATH = path.join(process.cwd(), "..", "..", `packages/app-store/${appDirname}/DESCRIPTION.md`);
+  const postFilePath = path.join(README_PATH);
+  let source = "";
+
+  try {
+    source = fs.readFileSync(postFilePath).toString();
+    source = source.replace(/{DESCRIPTION}/g, appMeta.description);
+  } catch (error) {
+    /* If the app doesn't have a README we fallback to the package description */
+    console.log(`No DESCRIPTION.md provided for: ${appDirname}`);
+    source = appMeta.description;
+  }
+
+  const result = matter(source);
+  const { content, data } = sourceSchema.parse({ content: result.content, data: result.data });
+  if (data.items) {
+    data.items = data.items.map((item) => {
+      if (typeof item === "string") {
+        return getAppAssetFullPath(item, {
+          dirName: appMeta.dirName,
+          isTemplate: appMeta.isTemplate,
+        });
+      }
+      return item;
+    });
+  }
+  return {
+    isAppDisabled: false as const,
+    source: { content, data },
+    data: appMeta,
+  };
+};
+
+export default async function Page({ params }: { params: Record<string, string | string[]> }) {
+  const pageProps = await getPageProps({ params });
+
+  return <AppPage {...pageProps} />;
+}
+
+export const dynamic = "force-static";
--- a/apps/web/app/future/(individual-page-wrapper)/apps/[slug]/setup/page.tsx
+++ b/apps/web/app/future/(individual-page-wrapper)/apps/[slug]/setup/page.tsx
@ -0,0 +1,36 @@
+import SetupPage from "@pages/apps/[slug]/setup";
+import { _generateMetadata } from "app/_utils";
+import type { GetServerSidePropsContext } from "next";
+import { cookies, headers } from "next/headers";
+import { notFound, redirect } from "next/navigation";
+
+import { getServerSideProps } from "@calcom/app-store/_pages/setup/_getServerSideProps";
+import { APP_NAME } from "@calcom/lib/constants";
+
+export const generateMetadata = async ({ params }: { params: Record<string, string | string[]> }) => {
+  return await _generateMetadata(
+    () => `${params.slug} | ${APP_NAME}`,
+    () => ""
+  );
+};
+
+const getPageProps = async ({ params }: { params: Record<string, string | string[]> }) => {
+  const req = { headers: headers(), cookies: cookies() };
+
+  const result = await getServerSideProps({ params, req } as unknown as GetServerSidePropsContext);
+
+  if (!result || "notFound" in result) {
+    notFound();
+  }
+
+  if ("redirect" in result) {
+    redirect(result.redirect.destination);
+  }
+
+  return result.props;
+};
+
+export default async function Page({ params }: { params: Record<string, string | string[]> }) {
+  const pageProps = await getPageProps({ params });
+  return <SetupPage {...pageProps} />;
+}
--- a/apps/web/app/future/(individual-page-wrapper)/apps/categories/[category]/page.tsx
+++ b/apps/web/app/future/(individual-page-wrapper)/apps/categories/[category]/page.tsx
@ -0,0 +1,79 @@
+import CategoryPage from "@pages/apps/categories/[category]";
+import { Prisma } from "@prisma/client";
+import { _generateMetadata } from "app/_utils";
+import { notFound } from "next/navigation";
+import z from "zod";
+
+import { getAppRegistry } from "@calcom/app-store/_appRegistry";
+import { APP_NAME } from "@calcom/lib/constants";
+import prisma from "@calcom/prisma";
+import { AppCategories } from "@calcom/prisma/enums";
+
+import PageWrapper from "@components/PageWrapperAppDir";
+
+export const generateMetadata = async () => {
+  return await _generateMetadata(
+    () => `${APP_NAME} | ${APP_NAME}`,
+    () => ""
+  );
+};
+
+export const generateStaticParams = async () => {
+  const paths = Object.keys(AppCategories);
+
+  try {
+    await prisma.$queryRaw`SELECT 1`;
+  } catch (e: unknown) {
+    if (e instanceof Prisma.PrismaClientInitializationError) {
+      // Database is not available at build time. Make sure we fall back to building these pages on demand
+      return [];
+    } else {
+      throw e;
+    }
+  }
+
+  return paths.map((category) => ({ category }));
+};
+
+const querySchema = z.object({
+  category: z.nativeEnum(AppCategories),
+});
+
+const getPageProps = async ({ params }: { params: Record<string, string | string[]> }) => {
+  const p = querySchema.safeParse(params);
+
+  if (!p.success) {
+    return notFound();
+  }
+
+  const appQuery = await prisma.app.findMany({
+    where: {
+      categories: {
+        has: p.data.category,
+      },
+    },
+    select: {
+      slug: true,
+    },
+  });
+
+  const dbAppsSlugs = appQuery.map((category) => category.slug);
+
+  const appStore = await getAppRegistry();
+
+  const apps = appStore.filter((app) => dbAppsSlugs.includes(app.slug));
+  return {
+    apps,
+  };
+};
+
+export default async function Page({ params }: { params: Record<string, string | string[]> }) {
+  const { apps } = await getPageProps({ params });
+  return (
+    <PageWrapper getLayout={null} requiresLicense={false} nonce={undefined} themeBasis={null}>
+      <CategoryPage apps={apps} />
+    </PageWrapper>
+  );
+}
+
+export const dynamic = "force-static";
--- a/apps/web/app/future/(individual-page-wrapper)/apps/categories/page.tsx
+++ b/apps/web/app/future/(individual-page-wrapper)/apps/categories/page.tsx
@ -0,0 +1,56 @@
+import LegacyPage from "@pages/apps/categories/index";
+import { ssrInit } from "app/_trpc/ssrInit";
+import { _generateMetadata } from "app/_utils";
+import { cookies, headers } from "next/headers";
+
+import { getAppRegistry, getAppRegistryWithCredentials } from "@calcom/app-store/_appRegistry";
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import { APP_NAME } from "@calcom/lib/constants";
+
+import PageWrapper from "@components/PageWrapperAppDir";
+
+export const generateMetadata = async () => {
+  return await _generateMetadata(
+    () => `Categories | ${APP_NAME}`,
+    () => ""
+  );
+};
+
+async function getPageProps() {
+  const ssr = await ssrInit();
+  const req = { headers: headers(), cookies: cookies() };
+
+  // @ts-expect-error Type '{ headers: ReadonlyHeaders; cookies: ReadonlyRequestCookies; }' is not assignable to type 'NextApiRequest | IncomingMessage
+  const session = await getServerSession({ req });
+
+  let appStore;
+  if (session?.user?.id) {
+    appStore = await getAppRegistryWithCredentials(session.user.id);
+  } else {
+    appStore = await getAppRegistry();
+  }
+
+  const categories = appStore.reduce((c, app) => {
+    for (const category of app.categories) {
+      c[category] = c[category] ? c[category] + 1 : 1;
+    }
+    return c;
+  }, {} as Record<string, number>);
+
+  return {
+    categories: Object.entries(categories).map(([name, count]) => ({ name, count })),
+    dehydratedState: await ssr.dehydrate(),
+  };
+}
+
+export default async function Page() {
+  const props = await getPageProps();
+  const h = headers();
+  const nonce = h.get("x-nonce") ?? undefined;
+
+  return (
+    <PageWrapper getLayout={null} requiresLicense={false} nonce={nonce} themeBasis={null} {...props}>
+      <LegacyPage {...props} />
+    </PageWrapper>
+  );
+}
--- a/apps/web/app/future/(individual-page-wrapper)/apps/installed/[category]/layout.tsx
+++ b/apps/web/app/future/(individual-page-wrapper)/apps/installed/[category]/layout.tsx
@ -0,0 +1,15 @@
+import { type ReactElement } from "react";
+
+import PageWrapper from "@components/PageWrapperAppDir";
+
+type EventTypesLayoutProps = {
+  children: ReactElement;
+};
+
+export default function Layout({ children }: EventTypesLayoutProps) {
+  return (
+    <PageWrapper getLayout={null} requiresLicense={false} nonce={undefined} themeBasis={null}>
+      {children}
+    </PageWrapper>
+  );
+}
--- a/apps/web/app/future/(individual-page-wrapper)/apps/installed/[category]/page.tsx
+++ b/apps/web/app/future/(individual-page-wrapper)/apps/installed/[category]/page.tsx
@ -0,0 +1,36 @@
+import LegacyPage from "@pages/apps/installed/[category]";
+import { _generateMetadata } from "app/_utils";
+import { notFound } from "next/navigation";
+import { z } from "zod";
+
+import { APP_NAME } from "@calcom/lib/constants";
+import { AppCategories } from "@calcom/prisma/enums";
+
+const querySchema = z.object({
+  category: z.nativeEnum(AppCategories),
+});
+
+export const generateMetadata = async () => {
+  return await _generateMetadata(
+    (t) => `${t("installed_apps")} | ${APP_NAME}`,
+    (t) => t("manage_your_connected_apps")
+  );
+};
+
+const getPageProps = async ({ params }: { params: Record<string, string | string[]> }) => {
+  const p = querySchema.safeParse(params);
+
+  if (!p.success) {
+    return notFound();
+  }
+
+  return {
+    category: p.data.category,
+  };
+};
+
+export default async function Page({ params }: { params: Record<string, string | string[]> }) {
+  const { category } = await getPageProps({ params });
+
+  return <LegacyPage />;
+}
--- a/apps/web/app/future/(individual-page-wrapper)/bookings/[status]/layout.tsx
+++ b/apps/web/app/future/(individual-page-wrapper)/bookings/[status]/layout.tsx
@ -0,0 +1,56 @@
+import { ssgInit } from "app/_trpc/ssgInit";
+import type { Params } from "app/_types";
+import { _generateMetadata } from "app/_utils";
+import { notFound } from "next/navigation";
+import type { ReactElement } from "react";
+import { z } from "zod";
+
+import { getLayout } from "@calcom/features/MainLayoutAppDir";
+import { APP_NAME } from "@calcom/lib/constants";
+
+import PageWrapper from "@components/PageWrapperAppDir";
+
+const validStatuses = ["upcoming", "recurring", "past", "cancelled", "unconfirmed"] as const;
+
+const querySchema = z.object({
+  status: z.enum(validStatuses),
+});
+
+type Props = { params: Params; children: ReactElement };
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => `${APP_NAME} | ${t("bookings")}`,
+    () => ""
+  );
+
+export const generateStaticParams = async () => {
+  return validStatuses.map((status) => ({ status }));
+};
+
+const getData = async ({ params }: { params: Params }) => {
+  const parsedParams = querySchema.safeParse(params);
+
+  if (!parsedParams.success) {
+    notFound();
+  }
+
+  const ssg = await ssgInit();
+
+  return {
+    status: parsedParams.data.status,
+    dehydratedState: await ssg.dehydrate(),
+  };
+};
+
+export default async function BookingPageLayout({ params, children }: Props) {
+  const props = await getData({ params });
+
+  return (
+    <PageWrapper requiresLicense={false} getLayout={getLayout} nonce={undefined} themeBasis={null} {...props}>
+      {children}
+    </PageWrapper>
+  );
+}
+
+export const dynamic = "force-static";
--- a/apps/web/app/future/(individual-page-wrapper)/bookings/[status]/page.tsx
+++ b/apps/web/app/future/(individual-page-wrapper)/bookings/[status]/page.tsx
@ -0,0 +1 @@
+export { default } from "@pages/bookings/[status]";
--- a/apps/web/app/future/(individual-page-wrapper)/teams/page.tsx
+++ b/apps/web/app/future/(individual-page-wrapper)/teams/page.tsx
@ -0,0 +1,64 @@
+import OldPage from "@pages/teams/index";
+import { ssrInit } from "app/_trpc/ssrInit";
+import { type Params } from "app/_types";
+import { _generateMetadata } from "app/_utils";
+import { type GetServerSidePropsContext } from "next";
+import { headers, cookies } from "next/headers";
+import { redirect } from "next/navigation";
+
+import { getLayout } from "@calcom/features/MainLayoutAppDir";
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+
+import { buildLegacyCtx } from "@lib/buildLegacyCtx";
+
+import PageWrapper from "@components/PageWrapperAppDir";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("teams"),
+    (t) => t("create_manage_teams_collaborative")
+  );
+
+type PageProps = {
+  params: Params;
+};
+
+async function getData(context: Omit<GetServerSidePropsContext, "res" | "resolvedUrl">) {
+  const ssr = await ssrInit();
+  await ssr.viewer.me.prefetch();
+
+  const session = await getServerSession({
+    req: context.req,
+  });
+
+  if (!session) {
+    const token = Array.isArray(context.query.token) ? context.query.token[0] : context.query.token;
+
+    const callbackUrl = token ? `/teams?token=${encodeURIComponent(token)}` : null;
+    return redirect(callbackUrl ? `/auth/login?callbackUrl=${callbackUrl}` : "/auth/login");
+  }
+
+  return { dehydratedState: await ssr.dehydrate() };
+}
+
+const Page = async ({ params }: PageProps) => {
+  const h = headers();
+  const nonce = h.get("x-nonce") ?? undefined;
+
+  const legacyCtx = buildLegacyCtx(h, cookies(), params);
+  // @ts-expect-error `req` of type '{ headers: ReadonlyHeaders; cookies: ReadonlyRequestCookies; }' is not assignable to `req` in `GetServerSidePropsContext`
+  const props = await getData(legacyCtx);
+
+  return (
+    <PageWrapper
+      getLayout={getLayout}
+      requiresLicense={false}
+      nonce={nonce}
+      themeBasis={null}
+      dehydratedState={props.dehydratedState}>
+      <OldPage />
+    </PageWrapper>
+  );
+};
+
+export default Page;
--- a/apps/web/app/future/(individual-page-wrapper)/video/[uid]/page.tsx
+++ b/apps/web/app/future/(individual-page-wrapper)/video/[uid]/page.tsx
@ -0,0 +1,130 @@
+import OldPage from "@pages/video/[uid]";
+import { ssrInit } from "app/_trpc/ssrInit";
+import { type Params } from "app/_types";
+import { _generateMetadata } from "app/_utils";
+import MarkdownIt from "markdown-it";
+import { type GetServerSidePropsContext } from "next";
+import { headers, cookies } from "next/headers";
+import { redirect } from "next/navigation";
+
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import { APP_NAME } from "@calcom/lib/constants";
+import prisma, { bookingMinimalSelect } from "@calcom/prisma";
+
+import { buildLegacyCtx } from "@lib/buildLegacyCtx";
+
+import PageWrapper from "@components/PageWrapperAppDir";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    () => `${APP_NAME} Video`,
+    (t) => t("quick_video_meeting")
+  );
+
+type PageProps = Readonly<{
+  params: Params;
+}>;
+
+const md = new MarkdownIt("default", { html: true, breaks: true, linkify: true });
+
+async function getData(context: Omit<GetServerSidePropsContext, "res" | "resolvedUrl">) {
+  const ssr = await ssrInit();
+
+  const booking = await prisma.booking.findUnique({
+    where: {
+      uid: context.query.uid as string,
+    },
+    select: {
+      ...bookingMinimalSelect,
+      uid: true,
+      description: true,
+      isRecorded: true,
+      user: {
+        select: {
+          id: true,
+          timeZone: true,
+          name: true,
+          email: true,
+          organization: {
+            select: {
+              calVideoLogo: true,
+            },
+          },
+        },
+      },
+      references: {
+        select: {
+          uid: true,
+          type: true,
+          meetingUrl: true,
+          meetingPassword: true,
+        },
+        where: {
+          type: "daily_video",
+        },
+      },
+    },
+  });
+
+  if (!booking || booking.references.length === 0 || !booking.references[0].meetingUrl) {
+    return redirect("/video/no-meeting-found");
+  }
+
+  //daily.co calls have a 60 minute exit buffer when a user enters a call when it's not available it will trigger the modals
+  const now = new Date();
+  const exitDate = new Date(now.getTime() - 60 * 60 * 1000);
+
+  //find out if the meeting is in the past
+  const isPast = booking?.endTime <= exitDate;
+  if (isPast) {
+    return redirect(`/video/meeting-ended/${booking?.uid}`);
+  }
+
+  const bookingObj = Object.assign({}, booking, {
+    startTime: booking.startTime.toString(),
+    endTime: booking.endTime.toString(),
+  });
+
+  const session = await getServerSession({ req: context.req });
+
+  // set meetingPassword to null for guests
+  if (session?.user.id !== bookingObj.user?.id) {
+    bookingObj.references.forEach((bookRef: any) => {
+      bookRef.meetingPassword = null;
+    });
+  }
+
+  return {
+    meetingUrl: bookingObj.references[0].meetingUrl ?? "",
+    ...(typeof bookingObj.references[0].meetingPassword === "string" && {
+      meetingPassword: bookingObj.references[0].meetingPassword,
+    }),
+    booking: {
+      ...bookingObj,
+      ...(bookingObj.description && { description: md.render(bookingObj.description) }),
+    },
+    dehydratedState: await ssr.dehydrate(),
+  };
+}
+
+const Page = async ({ params }: PageProps) => {
+  const h = headers();
+  const nonce = h.get("x-nonce") ?? undefined;
+
+  const legacyCtx = buildLegacyCtx(headers(), cookies(), params);
+  // @ts-expect-error `req` of type '{ headers: ReadonlyHeaders; cookies: ReadonlyRequestCookies; }' is not assignable to `req` in `GetServerSidePropsContext`
+  const { dehydratedState, ...restProps } = await getData(legacyCtx);
+
+  return (
+    <PageWrapper
+      getLayout={null}
+      requiresLicense={false}
+      nonce={nonce}
+      themeBasis={null}
+      dehydratedState={dehydratedState}>
+      <OldPage {...restProps} />
+    </PageWrapper>
+  );
+};
+
+export default Page;
--- a/apps/web/app/future/(individual-page-wrapper)/video/meeting-ended/[uid]/page.tsx
+++ b/apps/web/app/future/(individual-page-wrapper)/video/meeting-ended/[uid]/page.tsx
@ -0,0 +1,76 @@
+import OldPage from "@pages/video/meeting-ended/[uid]";
+import { type Params } from "app/_types";
+import { _generateMetadata } from "app/_utils";
+import { type GetServerSidePropsContext } from "next";
+import { headers, cookies } from "next/headers";
+import { redirect } from "next/navigation";
+
+import prisma, { bookingMinimalSelect } from "@calcom/prisma";
+
+import { buildLegacyCtx } from "@lib/buildLegacyCtx";
+
+import PageWrapper from "@components/PageWrapperAppDir";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    () => "Meeting Unavailable",
+    () => "Meeting Unavailable"
+  );
+
+type PageProps = Readonly<{
+  params: Params;
+}>;
+
+async function getData(context: Omit<GetServerSidePropsContext, "res" | "resolvedUrl">) {
+  const booking = await prisma.booking.findUnique({
+    where: {
+      uid: typeof context?.params?.uid === "string" ? context.params.uid : "",
+    },
+    select: {
+      ...bookingMinimalSelect,
+      uid: true,
+      user: {
+        select: {
+          credentials: true,
+        },
+      },
+      references: {
+        select: {
+          uid: true,
+          type: true,
+          meetingUrl: true,
+        },
+      },
+    },
+  });
+
+  if (!booking) {
+    return redirect("/video/no-meeting-found");
+  }
+
+  const bookingObj = Object.assign({}, booking, {
+    startTime: booking.startTime.toString(),
+    endTime: booking.endTime.toString(),
+  });
+
+  return {
+    booking: bookingObj,
+  };
+}
+
+const Page = async ({ params }: PageProps) => {
+  const h = headers();
+  const nonce = h.get("x-nonce") ?? undefined;
+
+  const legacyCtx = buildLegacyCtx(headers(), cookies(), params);
+  // @ts-expect-error `req` of type '{ headers: ReadonlyHeaders; cookies: ReadonlyRequestCookies; }' is not assignable to `req` in `GetServerSidePropsContext`
+  const props = await getData(legacyCtx);
+
+  return (
+    <PageWrapper getLayout={null} requiresLicense={false} nonce={nonce} themeBasis={null}>
+      <OldPage {...props} />
+    </PageWrapper>
+  );
+};
+
+export default Page;
--- a/apps/web/app/future/(individual-page-wrapper)/video/meeting-not-started/[uid]/page.tsx
+++ b/apps/web/app/future/(individual-page-wrapper)/video/meeting-not-started/[uid]/page.tsx
@ -0,0 +1,69 @@
+import OldPage from "@pages/video/meeting-not-started/[uid]";
+import { type Params } from "app/_types";
+import { _generateMetadata } from "app/_utils";
+import { type GetServerSidePropsContext } from "next";
+import { headers, cookies } from "next/headers";
+import { redirect } from "next/navigation";
+
+import prisma, { bookingMinimalSelect } from "@calcom/prisma";
+
+import { buildLegacyCtx } from "@lib/buildLegacyCtx";
+
+import PageWrapper from "@components/PageWrapperAppDir";
+
+type PageProps = Readonly<{
+  params: Params;
+}>;
+
+export const generateMetadata = async ({ params }: PageProps) => {
+  const booking = await prisma.booking.findUnique({
+    where: {
+      uid: typeof params?.uid === "string" ? params.uid : "",
+    },
+    select: bookingMinimalSelect,
+  });
+
+  return await _generateMetadata(
+    (t) => t("this_meeting_has_not_started_yet"),
+    () => booking?.title ?? ""
+  );
+};
+
+async function getData(context: Omit<GetServerSidePropsContext, "res" | "resolvedUrl">) {
+  const booking = await prisma.booking.findUnique({
+    where: {
+      uid: typeof context?.params?.uid === "string" ? context.params.uid : "",
+    },
+    select: bookingMinimalSelect,
+  });
+
+  if (!booking) {
+    return redirect("/video/no-meeting-found");
+  }
+
+  const bookingObj = Object.assign({}, booking, {
+    startTime: booking.startTime.toString(),
+    endTime: booking.endTime.toString(),
+  });
+
+  return {
+    booking: bookingObj,
+  };
+}
+
+const Page = async ({ params }: PageProps) => {
+  const h = headers();
+  const nonce = h.get("x-nonce") ?? undefined;
+
+  const legacyCtx = buildLegacyCtx(headers(), cookies(), params);
+  // @ts-expect-error `req` of type '{ headers: ReadonlyHeaders; cookies: ReadonlyRequestCookies; }' is not assignable to `req` in `GetServerSidePropsContext`
+  const props = await getData(legacyCtx);
+
+  return (
+    <PageWrapper getLayout={null} requiresLicense={false} nonce={nonce} themeBasis={null}>
+      <OldPage {...props} />
+    </PageWrapper>
+  );
+};
+
+export default Page;
--- a/apps/web/app/future/(shared-page-wrapper)/(no-layout)/video/no-meeting-found/page.tsx
+++ b/apps/web/app/future/(shared-page-wrapper)/(no-layout)/video/no-meeting-found/page.tsx
@ -0,0 +1,10 @@
+import Page from "@pages/video/no-meeting-found";
+import { _generateMetadata } from "app/_utils";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    () => "",
+    () => ""
+  );
+
+export default Page;
--- a/apps/web/app/future/(shared-page-wrapper)/(settings-layout)/settings/admin/organizations/page.tsx
+++ b/apps/web/app/future/(shared-page-wrapper)/(settings-layout)/settings/admin/organizations/page.tsx
@ -1,13 +1,11 @@
-import Page from "@pages/settings/admin/organizations/index";
 import { _generateMetadata } from "app/_utils";

+import Page from "@calcom/features/ee/organizations/pages/settings/admin/AdminOrgPage";
+
 export const generateMetadata = async () =>
  await _generateMetadata(
    (t) => t("organizations"),
    (t) => t("orgs_page_description")
  );

-export default function AppPage() {
-  // @ts-expect-error FIXME Property 'Component' is incompatible with index signature
-  return <Page />;
-}
+export default Page;
--- a/apps/web/app/future/(shared-page-wrapper)/(settings-layout)/settings/admin/users/[id]/edit/page.tsx
+++ b/apps/web/app/future/(shared-page-wrapper)/(settings-layout)/settings/admin/users/[id]/edit/page.tsx
@ -1,10 +1,10 @@
-import Page from "@pages/settings/admin/users/[id]/edit";
 import { getServerCaller } from "app/_trpc/serverClient";
 import { type Params } from "app/_types";
 import { _generateMetadata } from "app/_utils";
 import { cookies, headers } from "next/headers";
 import { z } from "zod";

+import Page from "@calcom/features/ee/users/pages/users-edit-view";
 import prisma from "@calcom/prisma";

 const userIdSchema = z.object({ id: z.coerce.number() });
@ -33,7 +33,4 @@ export const generateMetadata = async ({ params }: { params: Params }) => {
  );
 };

-export default function AppPage() {
-  // @ts-expect-error FIXME AppProps | undefined' does not satisfy the constraint 'PageProps'
-  return <Page />;
-}
+export default Page;
--- a/apps/web/app/future/(shared-page-wrapper)/(settings-layout)/settings/admin/users/add/page.tsx
+++ b/apps/web/app/future/(shared-page-wrapper)/(settings-layout)/settings/admin/users/add/page.tsx
@ -1,13 +1,11 @@
-import Page from "@pages/settings/admin/users/add";
 import { _generateMetadata } from "app/_utils";

+import Page from "@calcom/features/ee/users/pages/users-add-view";
+
 export const generateMetadata = async () =>
  await _generateMetadata(
    () => "Add new user",
    () => "Here you can add a new user."
  );

-export default function AppPage() {
-  // @ts-expect-error FIXME AppProps | undefined' does not satisfy the constraint 'PageProps'
-  return <Page />;
-}
+export default Page;
--- a/apps/web/app/future/(shared-page-wrapper)/(settings-layout)/settings/admin/users/page.tsx
+++ b/apps/web/app/future/(shared-page-wrapper)/(settings-layout)/settings/admin/users/page.tsx
@ -1,13 +1,11 @@
-import Page from "@pages/settings/admin/users/index";
 import { _generateMetadata } from "app/_utils";

+import Page from "@calcom/features/ee/users/pages/users-listing-view";
+
 export const generateMetadata = async () =>
  await _generateMetadata(
    () => "Users",
    () => "A list of all the users in your account including their name, title, email and role."
  );

-export default function AppPage() {
-  // @ts-expect-error FIXME Property 'Component' is incompatible with index signature
-  return <Page />;
-}
+export default Page;
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@ -1,4 +1,6 @@
 import { dir } from "i18next";
+import { Inter } from "next/font/google";
+import localFont from "next/font/local";
 import { headers, cookies } from "next/headers";
 import Script from "next/script";
 import React from "react";
@ -10,6 +12,14 @@ import { prepareRootMetadata } from "@lib/metadata";

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

+const interFont = Inter({ subsets: ["latin"], variable: "--font-inter", preload: true, display: "swap" });
+const calFont = localFont({
+  src: "../fonts/CalSans-SemiBold.woff2",
+  variable: "--font-cal",
+  preload: true,
+  display: "block",
+});
+
 export const generateMetadata = () =>
  prepareRootMetadata({
    twitterCreator: "@calcom",
@ -66,6 +76,12 @@ export default async function RootLayout({ children }: { children: React.ReactNo
            src="https://snippet.meticulous.ai/v1/stagingMeticulousSnippet.js"
          />
        )}
+        <style>{`
+          :root {
+            --font-inter: ${interFont.style.fontFamily.replace(/\'/g, "")};
+            --font-cal: ${calFont.style.fontFamily.replace(/\'/g, "")};
+          }
+        `}</style>
      </head>
      <body
        className="dark:bg-darkgray-50 desktop-transparent bg-subtle antialiased"
--- a/apps/web/components/PageWrapperAppDir.tsx
+++ b/apps/web/components/PageWrapperAppDir.tsx
@ -2,8 +2,6 @@

 import { type DehydratedState } from "@tanstack/react-query";
 import type { SSRConfig } from "next-i18next";
-import { Inter } from "next/font/google";
-import localFont from "next/font/local";
 // import I18nLanguageHandler from "@components/I18nLanguageHandler";
 import { usePathname } from "next/navigation";
 import Script from "next/script";
@ -20,14 +18,6 @@ export interface CalPageWrapper {
  PageWrapper?: AppProps["Component"]["PageWrapper"];
 }

-const interFont = Inter({ subsets: ["latin"], variable: "--font-inter", preload: true, display: "swap" });
-const calFont = localFont({
-  src: "../fonts/CalSans-SemiBold.woff2",
-  variable: "--font-cal",
-  preload: true,
-  display: "swap",
-});
-
 export type PageWrapperProps = Readonly<{
  getLayout: ((page: React.ReactElement) => ReactNode) | null;
  children: React.ReactElement;
@ -71,13 +61,6 @@ function PageWrapper(props: PageWrapperProps) {
          id="page-status"
          dangerouslySetInnerHTML={{ __html: `window.CalComPageStatus = '${pageStatus}'` }}
        />
-        <style jsx global>{`
-          :root {
-            --font-inter: ${interFont.style.fontFamily};
-            --font-cal: ${calFont.style.fontFamily};
-          }
-        `}</style>
-
        {getLayout(
          props.requiresLicense ? <LicenseRequired>{props.children}</LicenseRequired> : props.children
        )}
--- a/apps/web/components/booking/BookingListItem.tsx
+++ b/apps/web/components/booking/BookingListItem.tsx
@ -1,8 +1,12 @@
 import Link from "next/link";
 import { useState } from "react";

-import type { EventLocationType } from "@calcom/app-store/locations";
-import { getEventLocationType } from "@calcom/app-store/locations";
+import type { EventLocationType, getEventLocationValue } from "@calcom/app-store/locations";
+import {
+  getEventLocationType,
+  getSuccessPageLocationMessage,
+  guessEventLocationType,
+} from "@calcom/app-store/locations";
 import dayjs from "@calcom/dayjs";
 // TODO: Use browser locale, implement Intl in Dayjs maybe?
 import "@calcom/dayjs/locales";
@ -14,6 +18,7 @@ import { useBookerUrl } from "@calcom/lib/hooks/useBookerUrl";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
 import { BookingStatus } from "@calcom/prisma/enums";
+import { bookingMetadataSchema } from "@calcom/prisma/zod-utils";
 import type { RouterInputs, RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import type { ActionType } from "@calcom/ui";
@ -93,6 +98,16 @@ function BookingListItem(booking: BookingItemProps) {

  const paymentAppData = getPaymentAppData(booking.eventType);

+  const location = booking.location as ReturnType<typeof getEventLocationValue>;
+  const locationVideoCallUrl = bookingMetadataSchema.parse(booking?.metadata || {})?.videoCallUrl;
+
+  const locationToDisplay = getSuccessPageLocationMessage(
+    locationVideoCallUrl ? locationVideoCallUrl : location,
+    t,
+    booking.status
+  );
+  const provider = guessEventLocationType(location);
+
  const bookingConfirm = async (confirm: boolean) => {
    let body = {
      bookingId: booking.id,
@ -359,6 +374,33 @@ function BookingListItem(booking: BookingItemProps) {
                  attendees={booking.attendees}
                />
              </div>
+              {!isPending && (
+                <div>
+                  {(provider?.label || locationToDisplay?.startsWith("https://")) &&
+                    locationToDisplay.startsWith("http") && (
+                      <a
+                        href={locationToDisplay}
+                        onClick={(e) => e.stopPropagation()}
+                        target="_blank"
+                        title={locationToDisplay}
+                        rel="noreferrer"
+                        className="text-sm leading-6 text-blue-600 hover:underline">
+                        <div className="flex items-center gap-2">
+                          {provider?.iconUrl && (
+                            <img
+                              src={provider.iconUrl}
+                              className="h-4 w-4 rounded-sm"
+                              alt={`${provider?.label} logo`}
+                            />
+                          )}
+                          {provider?.label
+                            ? t("join_event_location", { eventLocationType: provider?.label })
+                            : t("join_meeting")}
+                        </div>
+                      </a>
+                    )}
+                </div>
+              )}
              {isPending && (
                <Badge className="ltr:mr-2 rtl:ml-2" variant="orange">
                  {t("unconfirmed")}
--- a/apps/web/components/dialog/EditLocationDialog.tsx
+++ b/apps/web/components/dialog/EditLocationDialog.tsx
@ -382,7 +382,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
                }}
              />
              {selectedLocation && LocationOptions}
-              <DialogFooter className="mt-4">
+              <DialogFooter className="relative">
                <Button
                  onClick={() => {
                    setShowLocationModal(false);
--- a/apps/web/components/eventtype/EventAppsTab.tsx
+++ b/apps/web/components/eventtype/EventAppsTab.tsx
@ -47,10 +47,17 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
    };
  };

-  const getAppDataSetter = (appId: EventTypeAppsList, credentialId?: number): SetAppData => {
+  const eventTypeFormMetadata = methods.getValues("metadata");
+
+  const getAppDataSetter = (
+    appId: EventTypeAppsList,
+    appCategories: string[],
+    credentialId?: number
+  ): SetAppData => {
    return function (key, value) {
      // Always get latest data available in Form because consequent calls to setData would update the Form but not allAppsData(it would update during next render)
      const allAppsDataFromForm = methods.getValues("metadata")?.apps || {};
+
      const appData = allAppsDataFromForm[appId];
      setAllAppsData({
        ...allAppsDataFromForm,
@ -58,6 +65,7 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
          ...appData,
          [key]: value,
          credentialId,
+          appCategories,
        },
      });
    };
@ -77,10 +85,15 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
      appCards.push(
        <EventTypeAppCard
          getAppData={getAppDataGetter(app.slug as EventTypeAppsList)}
-          setAppData={getAppDataSetter(app.slug as EventTypeAppsList, app.userCredentialIds[0])}
+          setAppData={getAppDataSetter(
+            app.slug as EventTypeAppsList,
+            app.categories,
+            app.userCredentialIds[0]
+          )}
          key={app.slug}
          app={app}
          eventType={eventType}
+          eventTypeFormMetadata={eventTypeFormMetadata}
          {...shouldLockDisableProps("apps")}
        />
      );
@ -91,7 +104,7 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
        appCards.push(
          <EventTypeAppCard
            getAppData={getAppDataGetter(app.slug as EventTypeAppsList)}
-            setAppData={getAppDataSetter(app.slug as EventTypeAppsList, team.credentialId)}
+            setAppData={getAppDataSetter(app.slug as EventTypeAppsList, app.categories, team.credentialId)}
            key={app.slug + team?.credentialId}
            app={{
              ...app,
@ -104,6 +117,7 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
              },
            }}
            eventType={eventType}
+            eventTypeFormMetadata={eventTypeFormMetadata}
            {...shouldLockDisableProps("apps")}
          />
        );
@ -148,10 +162,15 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
              return (
                <EventTypeAppCard
                  getAppData={getAppDataGetter(app.slug as EventTypeAppsList)}
-                  setAppData={getAppDataSetter(app.slug as EventTypeAppsList, app.userCredentialIds[0])}
+                  setAppData={getAppDataSetter(
+                    app.slug as EventTypeAppsList,
+                    app.categories,
+                    app.userCredentialIds[0]
+                  )}
                  key={app.slug}
                  app={app}
                  eventType={eventType}
+                  eventTypeFormMetadata={eventTypeFormMetadata}
                  {...shouldLockDisableProps("apps")}
                />
              );
@ -179,10 +198,11 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
            {notInstalledApps?.map((app) => (
              <EventTypeAppCard
                getAppData={getAppDataGetter(app.slug as EventTypeAppsList)}
-                setAppData={getAppDataSetter(app.slug as EventTypeAppsList)}
+                setAppData={getAppDataSetter(app.slug as EventTypeAppsList, app.categories)}
                key={app.slug}
                app={app}
                eventType={eventType}
+                eventTypeFormMetadata={eventTypeFormMetadata}
              />
            ))}
          </div>
--- a/apps/web/components/eventtype/EventInstantTab.tsx
+++ b/apps/web/components/eventtype/EventInstantTab.tsx
@ -0,0 +1,18 @@
+import type { EventTypeSetupProps } from "pages/event-types/[type]";
+
+import getPaymentAppData from "@calcom/lib/getPaymentAppData";
+
+import InstantEventController from "./InstantEventController";
+
+export const EventInstantTab = ({
+  eventType,
+  isTeamEvent,
+}: Pick<EventTypeSetupProps, "eventType"> & { isTeamEvent: boolean }) => {
+  const paymentAppData = getPaymentAppData(eventType);
+
+  const requirePayment = paymentAppData.price > 0;
+
+  return (
+    <InstantEventController paymentEnabled={requirePayment} eventType={eventType} isTeamEvent={isTeamEvent} />
+  );
+};
--- a/apps/web/components/eventtype/EventLimitsTab.tsx
+++ b/apps/web/components/eventtype/EventLimitsTab.tsx
@ -298,6 +298,29 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
          );
        }}
      />
+      <Controller
+        name="onlyShowFirstAvailableSlot"
+        control={formMethods.control}
+        render={({ field: { value } }) => {
+          const isChecked = value;
+          return (
+            <SettingsToggle
+              toggleSwitchAtTheEnd={true}
+              labelClassName="text-sm"
+              title={t("limit_booking_only_first_slot")}
+              description={t("limit_booking_only_first_slot_description")}
+              checked={isChecked}
+              onCheckedChange={(active) => {
+                formMethods.setValue("onlyShowFirstAvailableSlot", active ?? false);
+              }}
+              switchContainerClassName={classNames(
+                "border-subtle mt-6 rounded-lg border py-6 px-4 sm:px-6",
+                isChecked && "rounded-b-none"
+              )}
+            />
+          );
+        }}
+      />
      <Controller
        name="durationLimits"
        control={formMethods.control}
--- a/apps/web/components/eventtype/EventSetupTab.tsx
+++ b/apps/web/components/eventtype/EventSetupTab.tsx
@ -357,7 +357,6 @@ export const EventSetupTab = (
            <div className="flex">
              <LocationSelect
                defaultMenuIsOpen={showEmptyLocationSelect}
-                autoFocus
                placeholder={t("select")}
                options={locationOptions}
                value={selectedNewOption}
--- a/apps/web/components/eventtype/EventTeamTab.tsx
+++ b/apps/web/components/eventtype/EventTeamTab.tsx
@ -44,6 +44,7 @@ export const mapMemberToChildrenOption = (
      username: member.username ?? "",
      membership: member.membership,
      eventTypeSlugs: member.eventTypes ?? [],
+      avatar: member.avatar,
    },
    value: `${member.id ?? ""}`,
    label: `${member.name || member.email || ""}${!member.username ? ` (${pendingString})` : ""}`,
--- a/apps/web/components/eventtype/EventTypeSingleLayout.tsx
+++ b/apps/web/components/eventtype/EventTypeSingleLayout.tsx
@ -7,11 +7,9 @@ import { useMemo, useState, Suspense } from "react";
 import type { UseFormReturn } from "react-hook-form";

 import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
-import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider";
 import { EventTypeEmbedButton, EventTypeEmbedDialog } from "@calcom/features/embed/EventTypeEmbed";
 import Shell from "@calcom/features/shell/Shell";
 import { classNames } from "@calcom/lib";
-import { CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HttpError } from "@calcom/lib/http-error";
 import { SchedulingType } from "@calcom/prisma/enums";
@ -48,6 +46,7 @@ import {
  ExternalLink,
  Code,
  Trash,
+  PhoneCall,
  MoreHorizontal,
  Loader,
 } from "@calcom/ui/components/icon";
@ -67,6 +66,7 @@ type Props = {
  isUpdateMutationLoading?: boolean;
  availability?: AvailabilityOption;
  isUserOrganizationAdmin: boolean;
+  bookerUrl: string;
 };

 function getNavigation(props: {
@ -116,7 +116,7 @@ function getNavigation(props: {
    {
      name: "workflows",
      href: `/event-types/${eventType.id}?tabName=workflows`,
-      icon: Zap,
+      icon: PhoneCall,
      info: `${enabledWorkflowsNumber} ${t("active")}`,
    },
  ];
@ -135,6 +135,7 @@ function EventTypeSingleLayout({
  formMethods,
  availability,
  isUserOrganizationAdmin,
+  bookerUrl,
 }: Props) {
  const utils = trpc.useContext();
  const { t } = useLocale();
@ -207,13 +208,21 @@ function EventTypeSingleLayout({
        icon: Users,
        info: `${t(eventType.schedulingType?.toLowerCase() ?? "")}${
          isManagedEventType
-            ? ` - ${t("count_members", { count: formMethods.watch("children").length || 0 })}`
+            ? ` - ${t("number_member", { count: formMethods.watch("children").length || 0 })}`
            : ""
        }`,
      });
    }
    const showWebhooks = !(isManagedEventType || isChildrenManagedEventType);
    if (showWebhooks) {
+      if (team) {
+        navigation.push({
+          name: "instant_tab_title",
+          href: `/event-types/${eventType.id}?tabName=instant`,
+          icon: Zap,
+          info: `instant_event_tab_description`,
+        });
+      }
      navigation.push({
        name: "webhooks",
        href: `/event-types/${eventType.id}?tabName=webhooks`,
@ -235,10 +244,8 @@ function EventTypeSingleLayout({
    formMethods,
  ]);

-  const orgBranding = useOrgBranding();
-  const isOrgEvent = orgBranding?.fullDomain;
-  const permalink = `${orgBranding?.fullDomain ?? CAL_URL}/${
-    team ? `${!isOrgEvent ? "team/" : ""}${team.slug}` : eventType.users[0].username
+  const permalink = `${bookerUrl}/${
+    team ? `${!team.parentId ? "team/" : ""}${team.slug}` : eventType.users[0].username
  }/${eventType.slug}`;

  const embedLink = `${team ? `team/${team.slug}` : eventType.users[0].username}/${eventType.slug}`;
@ -322,6 +329,7 @@ function EventTypeSingleLayout({
                  StartIcon={Code}
                  color="secondary"
                  variant="icon"
+                  namespace={eventType.slug}
                  tooltip={t("embed")}
                  tooltipSide="bottom"
                  tooltipOffset={4}
--- a/apps/web/components/eventtype/InstantEventController.tsx
+++ b/apps/web/components/eventtype/InstantEventController.tsx
@ -0,0 +1,99 @@
+import { useSession } from "next-auth/react";
+import type { EventTypeSetup, FormValues } from "pages/event-types/[type]";
+import { useState } from "react";
+import { useFormContext } from "react-hook-form";
+
+import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
+import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
+import { classNames } from "@calcom/lib";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Alert, Button, EmptyScreen, SettingsToggle } from "@calcom/ui";
+import { PhoneCall } from "@calcom/ui/components/icon";
+
+type InstantEventControllerProps = {
+  eventType: EventTypeSetup;
+  paymentEnabled: boolean;
+  isTeamEvent: boolean;
+};
+
+export default function InstantEventController({
+  eventType,
+  paymentEnabled,
+  isTeamEvent,
+}: InstantEventControllerProps) {
+  const { t } = useLocale();
+  const session = useSession();
+  const [instantEventState, setInstantEventState] = useState<boolean>(eventType?.isInstantEvent ?? false);
+  const formMethods = useFormContext<FormValues>();
+
+  const { shouldLockDisableProps } = useLockedFieldsManager(
+    eventType,
+    t("locked_fields_admin_description"),
+    t("locked_fields_member_description")
+  );
+
+  const instantLocked = shouldLockDisableProps("isInstantEvent");
+
+  const isOrg = !!session.data?.user?.org?.id;
+
+  if (session.status === "loading") return <></>;
+
+  return (
+    <LicenseRequired>
+      <div className="block items-start sm:flex">
+        {!isOrg || !isTeamEvent ? (
+          <EmptyScreen
+            headline={t("instant_tab_title")}
+            Icon={PhoneCall}
+            description={t("uprade_to_create_instant_bookings")}
+            buttonRaw={<Button href="/enterprise">{t("upgrade")}</Button>}
+          />
+        ) : (
+          <div className={!paymentEnabled ? "w-full" : ""}>
+            {paymentEnabled ? (
+              <Alert severity="warning" title={t("warning_payment_instant_meeting_event")} />
+            ) : (
+              <>
+                <Alert
+                  className="mb-4"
+                  severity="warning"
+                  title={t("warning_instant_meeting_experimental")}
+                />
+                <SettingsToggle
+                  labelClassName="text-sm"
+                  toggleSwitchAtTheEnd={true}
+                  switchContainerClassName={classNames(
+                    "border-subtle rounded-lg border py-6 px-4 sm:px-6",
+                    instantEventState && "rounded-b-none"
+                  )}
+                  childrenClassName="lg:ml-0"
+                  title={t("instant_tab_title")}
+                  {...instantLocked}
+                  description={t("instant_event_tab_description")}
+                  checked={instantEventState}
+                  data-testid="instant-event-check"
+                  onCheckedChange={(e) => {
+                    if (!e) {
+                      formMethods.setValue("isInstantEvent", false);
+                      setInstantEventState(false);
+                    } else {
+                      formMethods.setValue("isInstantEvent", true);
+                      setInstantEventState(true);
+                    }
+                  }}>
+                  <div className="border-subtle rounded-b-lg border border-t-0 p-6">
+                    {instantEventState && (
+                      <div data-testid="instant-event-collapsible" className="flex flex-col gap-2 text-sm">
+                        <p>{t("warning_payment_instant_meeting_event")}</p>
+                      </div>
+                    )}
+                  </div>
+                </SettingsToggle>
+              </>
+            )}
+          </div>
+        )}
+      </div>
+    </LicenseRequired>
+  );
+}
--- a/apps/web/components/getting-started/steps-views/ConnectCalendars.tsx
+++ b/apps/web/components/getting-started/steps-views/ConnectCalendars.tsx
@ -82,7 +82,7 @@ const ConnectedCalendars = (props: IConnectCalendarsProps) => {
        type="button"
        data-testid="save-calendar-button"
        className={classNames(
-          "text-inverted mt-8 flex w-full flex-row justify-center rounded-md border border-black bg-black p-2 text-center text-sm",
+          "text-inverted bg-inverted border-inverted mt-8 flex w-full flex-row justify-center rounded-md border p-2 text-center text-sm",
          disabledNextButton ? "cursor-not-allowed opacity-20" : ""
        )}
        onClick={() => nextStep()}
--- a/apps/web/components/getting-started/steps-views/ConnectedVideoStep.tsx
+++ b/apps/web/components/getting-started/steps-views/ConnectedVideoStep.tsx
@ -53,7 +53,7 @@ const ConnectedVideoStep = (props: ConnectedAppStepProps) => {
        type="button"
        data-testid="save-video-button"
        className={classNames(
-          "text-inverted mt-8 flex w-full flex-row justify-center rounded-md border border-black bg-black p-2 text-center text-sm",
+          "text-inverted border-inverted bg-inverted mt-8 flex w-full flex-row justify-center rounded-md border p-2 text-center text-sm",
          !hasAnyInstalledVideoApps ? "cursor-not-allowed opacity-20" : ""
        )}
        disabled={!hasAnyInstalledVideoApps}
--- a/apps/web/components/getting-started/steps-views/UserProfile.tsx
+++ b/apps/web/components/getting-started/steps-views/UserProfile.tsx
@ -152,15 +152,10 @@ const UserProfile = () => {
          firstRender={firstRender}
          setFirstRender={setFirstRender}
        />
-        <p className="dark:text-inverted text-default mt-2 font-sans text-sm font-normal">
-          {t("few_sentences_about_yourself")}
-        </p>
+        <p className="text-default mt-2 font-sans text-sm font-normal">{t("few_sentences_about_yourself")}</p>
      </fieldset>
-      <Button
-        type="submit"
-        className="text-inverted mt-8 flex w-full flex-row justify-center rounded-md border border-black bg-black p-2 text-center text-sm">
+      <Button EndIcon={ArrowRight} type="submit" className="mt-8 w-full items-center justify-center">
        {t("finish")}
-        <ArrowRight className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
      </Button>
    </form>
  );
--- a/apps/web/components/getting-started/steps-views/UserSettings.tsx
+++ b/apps/web/components/getting-started/steps-views/UserSettings.tsx
@ -9,7 +9,7 @@ import { FULL_NAME_LENGTH_MAX_LIMIT } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { trpc } from "@calcom/trpc/react";
-import { Button, TimezoneSelect } from "@calcom/ui";
+import { Button, TimezoneSelect, Input } from "@calcom/ui";
 import { ArrowRight } from "@calcom/ui/components/icon";

 import { UsernameAvailabilityField } from "@components/ui/UsernameAvailability";
@ -76,7 +76,7 @@ const UserSettings = (props: IUserSettingsProps) => {
          <label htmlFor="name" className="text-default mb-2 block text-sm font-medium">
            {t("full_name")}
          </label>
-          <input
+          <Input
            {...register("name", {
              required: true,
            })}
@ -85,7 +85,6 @@ const UserSettings = (props: IUserSettingsProps) => {
            type="text"
            autoComplete="off"
            autoCorrect="off"
-            className="border-default w-full rounded-md border text-sm"
          />
          {errors.name && (
            <p data-testid="required" className="py-2 text-xs text-red-500">
@ -106,7 +105,7 @@ const UserSettings = (props: IUserSettingsProps) => {
            className="mt-2 w-full rounded-md text-sm"
          />

-          <p className="text-subtle dark:text-inverted mt-3 flex flex-row font-sans text-xs leading-tight">
+          <p className="text-subtle mt-3 flex flex-row font-sans text-xs leading-tight">
            {t("current_time")} {dayjs().tz(selectedTimeZone).format("LT").toString().toLowerCase()}
          </p>
        </div>
--- a/apps/web/components/team/screens/Team.tsx
+++ b/apps/web/components/team/screens/Team.tsx
@ -12,7 +12,7 @@ type TeamType = Omit<NonNullable<TeamWithMembers>, "inviteToken">;
 type MembersType = TeamType["members"];
 type MemberType = Pick<MembersType[number], "id" | "name" | "bio" | "username" | "organizationId"> & {
  safeBio: string | null;
-  orgOrigin: string;
+  bookerUrl: string;
 };

 const Member = ({ member, teamName }: { member: MemberType; teamName: string | null }) => {
@ -26,7 +26,7 @@ const Member = ({ member, teamName }: { member: MemberType; teamName: string | n
  return (
    <Link
      key={member.id}
-      href={{ pathname: `${member.orgOrigin}/${member.username}`, query: queryParamsToForward }}>
+      href={{ pathname: `${member.bookerUrl}/${member.username}`, query: queryParamsToForward }}>
      <div className="sm:min-w-80 sm:max-w-80 bg-default hover:bg-muted border-subtle group flex min-h-full flex-col space-y-2 rounded-md border p-4 hover:cursor-pointer">
        <UserAvatar size="md" user={member} />
        <section className="mt-2 line-clamp-4 w-full space-y-1">
--- a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
+++ b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
@ -74,7 +74,8 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
  const debouncedApiCall = useMemo(
    () =>
      debounce(async (username: string) => {
-        const { data } = await fetchUsername(username);
+        // TODO: Support orgSlug
+        const { data } = await fetchUsername(username, null);
        setMarkAsError(!data.available && !!currentUsername && username !== currentUsername);
        setIsInputUsernamePremium(data.premium);
        setUsernameIsAvailable(data.available);
--- a/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
+++ b/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
@ -44,7 +44,8 @@ const UsernameTextfield = (props: ICustomUsernameProps & Partial<React.Component
  const debouncedApiCall = useMemo(
    () =>
      debounce(async (username) => {
-        const { data } = await fetchUsername(username);
+        // TODO: Support orgSlug
+        const { data } = await fetchUsername(username, null);
        setMarkAsError(!data.available);
        setUsernameIsAvailable(data.available);
      }, 150),
--- a/apps/web/components/ui/avatar/UserAvatarGroupWithOrg.tsx
+++ b/apps/web/components/ui/avatar/UserAvatarGroupWithOrg.tsx
@ -1,21 +1,19 @@
-import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider";
-import { CAL_URL, WEBAPP_URL } from "@calcom/lib/constants";
+import { WEBAPP_URL } from "@calcom/lib/constants";
 import { getUserAvatarUrl } from "@calcom/lib/getAvatarUrl";
+import { getBookerBaseUrlSync } from "@calcom/lib/getBookerUrl/client";
 import type { Team, User } from "@calcom/prisma/client";
 import { AvatarGroup } from "@calcom/ui";

 type UserAvatarProps = Omit<React.ComponentProps<typeof AvatarGroup>, "items"> & {
-  users: Pick<User, "organizationId" | "name" | "username">[];
+  users: (Pick<User, "organizationId" | "name" | "username"> & { bookerUrl: string })[];
  organization: Pick<Team, "slug" | "name">;
 };

 export function UserAvatarGroupWithOrg(props: UserAvatarProps) {
  const { users, organization, ...rest } = props;
-  const orgBranding = useOrgBranding();
-  const baseUrl = `${orgBranding?.fullDomain ?? CAL_URL}`;
  const items = [
    {
-      href: baseUrl,
+      href: getBookerBaseUrlSync(organization.slug),
      image: `${WEBAPP_URL}/team/${organization.slug}/avatar.png`,
      alt: organization.name || undefined,
      title: organization.name,
@ -23,13 +21,12 @@ export function UserAvatarGroupWithOrg(props: UserAvatarProps) {
  ].concat(
    users.map((user) => {
      return {
-        href: `${baseUrl}/${user.username}/?redirect=false`,
+        href: `${user.bookerUrl}/${user.username}?redirect=false`,
        image: getUserAvatarUrl(user),
        alt: user.name || undefined,
        title: user.name || user.username || "",
      };
    })
  );
-  users.unshift();
  return <AvatarGroup {...rest} items={items} />;
 }
--- a/apps/web/components/ui/form/CheckboxField.tsx
+++ b/apps/web/components/ui/form/CheckboxField.tsx
@ -49,7 +49,7 @@ const CheckboxField = forwardRef<HTMLInputElement, Props>(
                    {...rest}
                    ref={ref}
                    type="checkbox"
-                    className="text-primary-600 focus:ring-primary-500 border-default bg-default h-4 w-4 rounded"
+                    className="text-emphasis focus:ring-emphasis dark:text-muted border-default bg-default h-4 w-4 rounded"
                  />
                </div>
                <span className="ms-2 text-sm">{description}</span>
--- a/apps/web/lib/app-providers-app-dir.tsx
+++ b/apps/web/lib/app-providers-app-dir.tsx
@ -97,13 +97,9 @@ const CustomI18nextProvider = (props: { children: React.ReactElement; i18n?: SSR
  const clientViewerI18n = useViewerI18n(locale);
  const i18n = clientViewerI18n.data?.i18n ?? props.i18n;

-  if (!i18n || !i18n._nextI18Next) {
-    return null;
-  }
-
  return (
    // @ts-expect-error AppWithTranslationHoc expects AppProps
-    <AppWithTranslationHoc pageProps={{ _nextI18Next: i18n._nextI18Next }}>
+    <AppWithTranslationHoc pageProps={{ _nextI18Next: i18n?._nextI18Next }}>
      {props.children}
    </AppWithTranslationHoc>
  );
--- a/apps/web/lib/buildLegacyCtx.tsx
+++ b/apps/web/lib/buildLegacyCtx.tsx
@ -0,0 +1,23 @@
+import { type Params } from "app/_types";
+import { type ReadonlyHeaders } from "next/dist/server/web/spec-extension/adapters/headers";
+import { type ReadonlyRequestCookies } from "next/dist/server/web/spec-extension/adapters/request-cookies";
+
+// returns query object same as ctx.query but for app dir
+export const getQuery = (url: string, params: Params) => {
+  if (!url.length) {
+    return params;
+  }
+
+  const { searchParams } = new URL(url);
+  const searchParamsObj = Object.fromEntries(searchParams.entries());
+
+  return { ...searchParamsObj, ...params };
+};
+
+export const buildLegacyCtx = (headers: ReadonlyHeaders, cookies: ReadonlyRequestCookies, params: Params) => {
+  return {
+    query: getQuery(headers.get("x-url") ?? "", params),
+    params,
+    req: { headers, cookies },
+  };
+};
--- a/apps/web/middleware.ts
+++ b/apps/web/middleware.ts
@ -64,6 +64,23 @@ const middleware = async (req: NextRequest): Promise<NextResponse<unknown>> => {
    requestHeaders.set("x-csp-enforce", "true");
  }

+  if (url.pathname.startsWith("/future/apps/installed")) {
+    const returnTo = req.cookies.get("return-to")?.value;
+    if (returnTo !== undefined) {
+      requestHeaders.set("Set-Cookie", "return-to=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT");
+
+      let validPathname = returnTo;
+
+      try {
+        validPathname = new URL(returnTo).pathname;
+      } catch (e) {}
+
+      const nextUrl = url.clone();
+      nextUrl.pathname = validPathname;
+      return NextResponse.redirect(nextUrl, { headers: requestHeaders });
+    }
+  }
+
  requestHeaders.set("x-pathname", url.pathname);

  const locale = await getLocale(req);
@ -103,6 +120,28 @@ export const config = {
    "/future/event-types/",
    "/settings/admin/:path*",
    "/future/settings/admin/:path*",
+    "/apps/installed/:category/",
+    "/future/apps/installed/:category/",
+    "/apps/:slug/",
+    "/future/apps/:slug/",
+    "/apps/:slug/setup/",
+    "/future/apps/:slug/setup/",
+    "/apps/categories/",
+    "/future/apps/categories/",
+    "/apps/categories/:category/",
+    "/future/apps/categories/:category/",
+    "/workflows/:path*",
+    "/future/workflows/:path*",
+    "/settings/teams/:path*",
+    "/future/settings/teams/:path*",
+    "/getting-started/:step/",
+    "/future/getting-started/:step/",
+    "/apps",
+    "/future/apps",
+    "/bookings/:status/",
+    "/future/bookings/:status/",
+    "/video/:path*",
+    "/future/video/:path*",
  ],
 };

--- a/apps/web/next.config.js
+++ b/apps/web/next.config.js
@ -154,11 +154,14 @@ const matcherConfigUserTypeEmbedRoute = {

 /** @type {import("next").NextConfig} */
 const nextConfig = {
+  experimental: {
+    serverComponentsExternalPackages: ["next-i18next"],
+  },
  i18n: {
    ...i18n,
    localeDetection: false,
  },
-  productionBrowserSourceMaps: true,
+  productionBrowserSourceMaps: false,
  /* We already do type check on GH actions */
  typescript: {
    ignoreBuildErrors: !!process.env.CI,
@ -513,6 +516,11 @@ const nextConfig = {
        destination: "/apps/installed/conferencing",
        permanent: true,
      },
+      {
+        source: "/apps/installed",
+        destination: "/apps/installed/calendar",
+        permanent: true,
+      },
      // OAuth callbacks when sent to localhost:3000(w would be expected) should be redirected to corresponding to WEBAPP_URL
      ...(process.env.NODE_ENV === "development" &&
      // Safer to enable the redirect only when the user is opting to test out organizations
@ -564,6 +572,8 @@ if (!!process.env.NEXT_PUBLIC_SENTRY_DSN) {
  nextConfig["sentry"] = {
    autoInstrumentServerFunctions: true,
    hideSourceMaps: true,
+    // disable source map generation for the server code
+    disableServerWebpackPlugin: !!process.env.SENTRY_DISABLE_SERVER_WEBPACK_PLUGIN,
  };

  plugins.push(withSentryConfig);
--- a/apps/web/package.json
+++ b/apps/web/package.json
@ -1,6 +1,6 @@
 {
  "name": "@calcom/web",
-  "version": "3.5.4",
+  "version": "3.6.1",
  "private": true,
  "scripts": {
    "analyze": "ANALYZE=true next build",
@ -84,7 +84,7 @@
    "ics": "^2.37.0",
    "jose": "^4.13.1",
    "kbar": "^0.1.0-beta.36",
-    "libphonenumber-js": "^1.10.12",
+    "libphonenumber-js": "^1.10.51",
    "lodash": "^4.17.21",
    "lottie-react": "^2.3.1",
    "markdown-it": "^13.0.1",
--- a/apps/web/pages/404.tsx
+++ b/apps/web/pages/404.tsx
@ -85,7 +85,7 @@ export default function Custom404() {

  const isSuccessPage = pathname?.startsWith("/booking");
  const isSubpage = pathname?.includes("/", 2) || isSuccessPage;
-  const isSignup = pathname?.startsWith("/signup");
+
  /**
   * If we're on 404 and the route is insights it means it is disabled
   * TODO: Abstract this for all disabled features
@ -112,7 +112,7 @@ export default function Custom404() {
            </div>
            <div className="mt-12">
              <div className="mt-8">
-                <Link href="/" className="text-base font-medium text-black hover:text-gray-500">
+                <Link href={WEBSITE_URL} className="text-base font-medium text-black hover:text-gray-500">
                  {t("or_go_back_home")}
                  <span aria-hidden="true"> &rarr;</span>
                </Link>
@ -129,7 +129,7 @@ export default function Custom404() {
  return (
    <>
      <HeadSeo
-        title={isSignup ? t("signup_requires") : t("404_page_not_found")}
+        title={t("404_page_not_found")}
        description={t("404_page_not_found")}
        nextSeoProps={{
          nofollow: true,
@ -138,241 +138,130 @@ export default function Custom404() {
      />
      <div className="bg-default min-h-screen px-4" data-testid="404-page">
        <main className="mx-auto max-w-xl pb-6 pt-16 sm:pt-24">
-          {isSignup && process.env.NEXT_PUBLIC_WEBAPP_URL !== "https://app.cal.com" ? (
-            <div>
-              <div>
-                <p className="text-emphasis text-sm font-semibold uppercase tracking-wide">
-                  {t("missing_license")}
-                </p>
-                <h1 className="font-cal text-emphasis mt-2 text-3xl font-extrabold">
-                  {t("signup_requires")}
-                </h1>
-                <p className="mt-4">{t("signup_requires_description", { companyName: "Cal.com" })}</p>
-              </div>
-              <div className="mt-12">
-                <h2 className="text-subtle text-sm font-semibold uppercase tracking-wide">
-                  {t("next_steps")}
-                </h2>
-                <ul role="list" className="mt-4">
-                  <li className="border-2 border-green-500 px-4 py-2">
-                    <a
-                      href="https://console.cal.com"
-                      className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
-                      <div className="flex-shrink-0">
-                        <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-50">
-                          <Check className="h-6 w-6 text-green-500" aria-hidden="true" />
-                        </span>
-                      </div>
-                      <div className="min-w-0 flex-1">
-                        <h3 className="text-emphasis text-base font-medium">
-                          <span className="focus-within:ring-empthasis rounded-sm focus-within:ring-2 focus-within:ring-offset-2">
-                            <span className="focus:outline-none">
-                              <span className="absolute inset-0" aria-hidden="true" />
-                              {t("acquire_commercial_license")}
-                            </span>
-                          </span>
-                        </h3>
-                        <p className="text-subtle text-base">{t("the_infrastructure_plan")}</p>
-                      </div>
-                      <div className="flex-shrink-0 self-center">
-                        <ChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
-                      </div>
-                    </a>
-                  </li>
-                </ul>
-
-                <ul role="list" className="border-subtle divide-subtle divide-y">
-                  <li className="px-4 py-2">
-                    <Link
-                      href="https://cal.com/self-hosting/installation"
-                      className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
-                      <div className="flex-shrink-0">
-                        <span className="bg-muted flex h-12 w-12 items-center justify-center rounded-lg">
-                          <FileText className="text-default h-6 w-6" aria-hidden="true" />
-                        </span>
-                      </div>
-                      <div className="min-w-0 flex-1">
-                        <h3 className="text-emphasis text-base font-medium">
-                          <span className="focus-within:ring-empthasis rounded-sm focus-within:ring-2 focus-within:ring-offset-2">
+          <div className="text-center">
+            <p className="text-emphasis text-sm font-semibold uppercase tracking-wide">{t("error_404")}</p>
+            <h1 className="font-cal text-emphasis mt-2 text-4xl font-extrabold sm:text-5xl">
+              {isSuccessPage ? "Booking not found" : t("page_doesnt_exist")}
+            </h1>
+            {isSubpage && currentPageType !== pageType.TEAM ? (
+              <span className="mt-2 inline-block text-lg ">{t("check_spelling_mistakes_or_go_back")}</span>
+            ) : IS_CALCOM ? (
+              <a target="_blank" href={url} className="mt-2 inline-block text-lg" rel="noreferrer">
+                {t(`404_the_${currentPageType.toLowerCase()}`)}{" "}
+                <strong className="text-blue-500">{username}</strong> {t("is_still_available")}{" "}
+                <span className="text-blue-500">{t("register_now")}</span>.
+              </a>
+            ) : (
+              <span className="mt-2 inline-block text-lg">
+                {t(`404_the_${currentPageType.toLowerCase()}`)}{" "}
+                <strong className="text-lgtext-green-500 mt-2 inline-block">{username}</strong>{" "}
+                {t("is_still_available")}
+              </span>
+            )}
+          </div>
+          <div className="mt-12">
+            {((!isSubpage && IS_CALCOM) ||
+              currentPageType === pageType.ORG ||
+              currentPageType === pageType.TEAM) && (
+              <ul role="list" className="my-4">
+                <li className="border-2 border-green-500 px-4 py-2">
+                  <a
+                    href={url}
+                    target="_blank"
+                    className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse"
+                    rel="noreferrer">
+                    <div className="flex-shrink-0">
+                      <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-50">
+                        <Check className="h-6 w-6 text-green-500" aria-hidden="true" />
+                      </span>
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      <h3 className="text-emphasis text-base font-medium">
+                        <span className="focus-within:ring-empthasis rounded-sm focus-within:ring-2 focus-within:ring-offset-2">
+                          <span className="focus:outline-none">
                            <span className="absolute inset-0" aria-hidden="true" />
-                            {t("prisma_studio_tip")}
+                            {t("register")}{" "}
+                            <strong className="text-green-500">{`${
+                              currentPageType === pageType.TEAM ? `${new URL(WEBSITE_URL).host}/team/` : ""
+                            }${username}${
+                              currentPageType === pageType.ORG ? `.${subdomainSuffix()}` : ""
+                            }`}</strong>
                          </span>
-                        </h3>
-                        <p className="text-subtle text-base">{t("prisma_studio_tip_description")}</p>
-                      </div>
-                      <div className="flex-shrink-0 self-center">
-                        <ChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
-                      </div>
-                    </Link>
-                  </li>
-                  <li className="px-4 py-2">
-                    <a
-                      href={JOIN_DISCORD}
-                      className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
-                      <div className="flex-shrink-0">
-                        <span className="bg-muted flex h-12 w-12 items-center justify-center rounded-lg">
-                          <Discord className="text-default h-6 w-6" />
                        </span>
-                      </div>
-                      <div className="min-w-0 flex-1">
-                        <h3 className="text-emphasis text-base font-medium">
-                          <span className="focus-within:ring-empthasis rounded-sm focus-within:ring-2 focus-within:ring-offset-2">
-                            <span className="absolute inset-0" aria-hidden="true" />
-                            Discord
-                          </span>
-                        </h3>
-                        <p className="text-subtle text-base">{t("join_our_community")}</p>
-                      </div>
-                      <div className="flex-shrink-0 self-center">
-                        <ChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
-                      </div>
-                    </a>
-                  </li>
-                </ul>
-                <div className="mt-8">
-                  <Link
-                    href={`${WEBSITE_URL}/enterprise`}
-                    className="hover:text-subtle text-emphasis text-base font-medium">
-                    {t("contact_sales")}
-                    <span aria-hidden="true"> &rarr;</span>
-                  </Link>
-                </div>
-              </div>
-            </div>
-          ) : (
-            <>
-              <div className="text-center">
-                <p className="text-emphasis text-sm font-semibold uppercase tracking-wide">
-                  {t("error_404")}
-                </p>
-                <h1 className="font-cal text-emphasis mt-2 text-4xl font-extrabold sm:text-5xl">
-                  {isSuccessPage ? "Booking not found" : t("page_doesnt_exist")}
-                </h1>
-                {isSubpage && currentPageType !== pageType.TEAM ? (
-                  <span className="mt-2 inline-block text-lg ">
-                    {t("check_spelling_mistakes_or_go_back")}
-                  </span>
-                ) : IS_CALCOM ? (
-                  <a target="_blank" href={url} className="mt-2 inline-block text-lg" rel="noreferrer">
-                    {t(`404_the_${currentPageType.toLowerCase()}`)}{" "}
-                    <strong className="text-blue-500">{username}</strong> {t("is_still_available")}{" "}
-                    <span className="text-blue-500">{t("register_now")}</span>.
+                      </h3>
+                      <p className="text-subtle text-base">
+                        {t(`404_claim_entity_${currentPageType.toLowerCase()}`)}
+                      </p>
+                    </div>
+                    <div className="flex-shrink-0 self-center">
+                      <ChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
+                    </div>
                  </a>
-                ) : (
-                  <span className="mt-2 inline-block text-lg">
-                    {t(`404_the_${currentPageType.toLowerCase()}`)}{" "}
-                    <strong className="text-lgtext-green-500 mt-2 inline-block">{username}</strong>{" "}
-                    {t("is_still_available")}
-                  </span>
-                )}
-              </div>
-              <div className="mt-12">
-                {((!isSubpage && IS_CALCOM) ||
-                  currentPageType === pageType.ORG ||
-                  currentPageType === pageType.TEAM) && (
-                  <ul role="list" className="my-4">
-                    <li className="border-2 border-green-500 px-4 py-2">
-                      <a
-                        href={url}
-                        target="_blank"
-                        className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse"
-                        rel="noreferrer">
-                        <div className="flex-shrink-0">
-                          <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-50">
-                            <Check className="h-6 w-6 text-green-500" aria-hidden="true" />
-                          </span>
-                        </div>
-                        <div className="min-w-0 flex-1">
-                          <h3 className="text-emphasis text-base font-medium">
-                            <span className="focus-within:ring-empthasis rounded-sm focus-within:ring-2 focus-within:ring-offset-2">
-                              <span className="focus:outline-none">
-                                <span className="absolute inset-0" aria-hidden="true" />
-                                {t("register")}{" "}
-                                <strong className="text-green-500">{`${
-                                  currentPageType === pageType.TEAM
-                                    ? `${new URL(WEBSITE_URL).host}/team/`
-                                    : ""
-                                }${username}${
-                                  currentPageType === pageType.ORG ? `.${subdomainSuffix()}` : ""
-                                }`}</strong>
-                              </span>
-                            </span>
-                          </h3>
-                          <p className="text-subtle text-base">
-                            {t(`404_claim_entity_${currentPageType.toLowerCase()}`)}
-                          </p>
-                        </div>
-                        <div className="flex-shrink-0 self-center">
-                          <ChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
-                        </div>
-                      </a>
-                    </li>
-                  </ul>
-                )}
-                <h2 className="text-subtle text-sm font-semibold uppercase tracking-wide">
-                  {t("popular_pages")}
-                </h2>
-                <ul role="list" className="border-subtle divide-subtle divide-y">
-                  {links
-                    .filter((_, idx) => currentPageType === pageType.ORG || idx !== 0)
-                    .map((link, linkIdx) => (
-                      <li key={linkIdx} className="px-4 py-2">
-                        <a
-                          href={link.href}
-                          className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
-                          <div className="flex-shrink-0">
-                            <span className="bg-muted flex h-12 w-12 items-center justify-center rounded-lg">
-                              <link.icon className="text-default h-6 w-6" aria-hidden="true" />
-                            </span>
-                          </div>
-                          <div className="min-w-0 flex-1">
-                            <h3 className="text-emphasis text-base font-medium">
-                              <span className="focus-within:ring-empthasis rounded-sm focus-within:ring-2 focus-within:ring-offset-2">
-                                <span className="absolute inset-0" aria-hidden="true" />
-                                {link.title}
-                              </span>
-                            </h3>
-                            <p className="text-subtle text-base">{link.description}</p>
-                          </div>
-                          <div className="flex-shrink-0 self-center">
-                            <ChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
-                          </div>
-                        </a>
-                      </li>
-                    ))}
-                  <li className="px-4 py-2">
+                </li>
+              </ul>
+            )}
+            <h2 className="text-subtle text-sm font-semibold uppercase tracking-wide">
+              {t("popular_pages")}
+            </h2>
+            <ul role="list" className="border-subtle divide-subtle divide-y">
+              {links
+                .filter((_, idx) => currentPageType === pageType.ORG || idx !== 0)
+                .map((link, linkIdx) => (
+                  <li key={linkIdx} className="px-4 py-2">
                    <a
-                      href={JOIN_DISCORD}
+                      href={link.href}
                      className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
                      <div className="flex-shrink-0">
                        <span className="bg-muted flex h-12 w-12 items-center justify-center rounded-lg">
-                          <Discord className="text-default h-6 w-6" />
+                          <link.icon className="text-default h-6 w-6" aria-hidden="true" />
                        </span>
                      </div>
                      <div className="min-w-0 flex-1">
                        <h3 className="text-emphasis text-base font-medium">
                          <span className="focus-within:ring-empthasis rounded-sm focus-within:ring-2 focus-within:ring-offset-2">
                            <span className="absolute inset-0" aria-hidden="true" />
-                            Discord
+                            {link.title}
                          </span>
                        </h3>
-                        <p className="text-subtle text-base">{t("join_our_community")}</p>
+                        <p className="text-subtle text-base">{link.description}</p>
                      </div>
                      <div className="flex-shrink-0 self-center">
                        <ChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
                      </div>
                    </a>
                  </li>
-                </ul>
-                <div className="mt-8">
-                  <Link href="/" className="hover:text-subtle text-emphasis text-base font-medium">
-                    {t("or_go_back_home")}
-                    <span aria-hidden="true"> &rarr;</span>
-                  </Link>
-                </div>
-              </div>
-            </>
-          )}
+                ))}
+              <li className="px-4 py-2">
+                <a
+                  href={JOIN_DISCORD}
+                  className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
+                  <div className="flex-shrink-0">
+                    <span className="bg-muted flex h-12 w-12 items-center justify-center rounded-lg">
+                      <Discord className="text-default h-6 w-6" />
+                    </span>
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <h3 className="text-emphasis text-base font-medium">
+                      <span className="focus-within:ring-empthasis rounded-sm focus-within:ring-2 focus-within:ring-offset-2">
+                        <span className="absolute inset-0" aria-hidden="true" />
+                        Discord
+                      </span>
+                    </h3>
+                    <p className="text-subtle text-base">{t("join_our_community")}</p>
+                  </div>
+                  <div className="flex-shrink-0 self-center">
+                    <ChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
+                  </div>
+                </a>
+              </li>
+            </ul>
+            <div className="mt-8">
+              <Link href={WEBSITE_URL} className="hover:text-subtle text-emphasis text-base font-medium">
+                {t("or_go_back_home")}
+                <span aria-hidden="true"> &rarr;</span>
+              </Link>
+            </div>
+          </div>
        </main>
      </div>
    </>
--- a/apps/web/pages/[user].tsx
+++ b/apps/web/pages/[user].tsx
@ -20,6 +20,7 @@ import { getUsernameList } from "@calcom/lib/defaultEvents";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
 import useTheme from "@calcom/lib/hooks/useTheme";
+import logger from "@calcom/lib/logger";
 import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
 import { stripMarkdown } from "@calcom/lib/stripMarkdown";
 import prisma from "@calcom/prisma";
@ -188,46 +189,55 @@ UserPage.isBookingPage = true;
 UserPage.PageWrapper = PageWrapper;

 const getEventTypesWithHiddenFromDB = async (userId: number) => {
-  return (
-    await prisma.eventType.findMany({
-      where: {
-        AND: [
-          {
-            teamId: null,
-          },
-          {
-            OR: [
-              {
-                userId,
-              },
-              {
-                users: {
-                  some: {
-                    id: userId,
-                  },
+  const eventTypes = await prisma.eventType.findMany({
+    where: {
+      AND: [
+        {
+          teamId: null,
+        },
+        {
+          OR: [
+            {
+              userId,
+            },
+            {
+              users: {
+                some: {
+                  id: userId,
                },
              },
-            ],
-          },
-        ],
-      },
-      orderBy: [
-        {
-          position: "desc",
-        },
-        {
-          id: "asc",
+            },
+          ],
        },
      ],
-      select: {
-        ...baseEventTypeSelect,
-        metadata: true,
+    },
+    orderBy: [
+      {
+        position: "desc",
      },
-    })
-  ).map((eventType) => ({
-    ...eventType,
-    metadata: EventTypeMetaDataSchema.parse(eventType.metadata),
-  }));
+      {
+        id: "asc",
+      },
+    ],
+    select: {
+      ...baseEventTypeSelect,
+      metadata: true,
+    },
+  });
+  // map and filter metadata, exclude eventType entirely when faulty metadata is found.
+  // report error to exception so we don't lose the error.
+  return eventTypes.reduce<typeof eventTypes>((eventTypes, eventType) => {
+    const parsedMetadata = EventTypeMetaDataSchema.safeParse(eventType.metadata);
+    if (!parsedMetadata.success) {
+      logger.error(parsedMetadata.error);
+      return eventTypes;
+    }
+    eventTypes.push({
+      ...eventType,
+      metadata: parsedMetadata.data,
+    });
+    return eventTypes;
+  }, []);
 };

 export type UserPageProps = {
--- a/apps/web/pages/[user]/[type].tsx
+++ b/apps/web/pages/[user]/[type].tsx
@ -1,15 +1,12 @@
 import type { GetServerSidePropsContext } from "next";
+import { useSearchParams } from "next/navigation";
 import { z } from "zod";

 import { Booker } from "@calcom/atoms";
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { getBookerWrapperClasses } from "@calcom/features/bookings/Booker/utils/getBookerWrapperClasses";
 import { BookerSeo } from "@calcom/features/bookings/components/BookerSeo";
-import {
-  getBookingForReschedule,
-  getBookingForSeatedEvent,
-  getMultipleDurationValue,
-} from "@calcom/features/bookings/lib/get-booking";
+import { getBookingForReschedule, getBookingForSeatedEvent } from "@calcom/features/bookings/lib/get-booking";
 import type { GetBookingType } from "@calcom/features/bookings/lib/get-booking";
 import { orgDomainConfig, userOrgQuery } from "@calcom/features/ee/organizations/lib/orgDomains";
 import { getUsernameList } from "@calcom/lib/defaultEvents";
@ -26,6 +23,16 @@ import { getTemporaryOrgRedirect } from "../../lib/getTemporaryOrgRedirect";

 export type PageProps = inferSSRProps<typeof getServerSideProps> & EmbedProps;

+export const getMultipleDurationValue = (
+  multipleDurationConfig: number[] | undefined,
+  queryDuration: string | string[] | null | undefined,
+  defaultValue: number
+) => {
+  if (!multipleDurationConfig) return null;
+  if (multipleDurationConfig.includes(Number(queryDuration))) return Number(queryDuration);
+  return defaultValue;
+};
+
 export default function Type({
  slug,
  user,
@ -35,9 +42,10 @@ export default function Type({
  isBrandingHidden,
  isSEOIndexable,
  rescheduleUid,
-  entity,
-  duration,
+  eventData,
 }: PageProps) {
+  const searchParams = useSearchParams();
+
  return (
    <main className={getBookerWrapperClasses({ isEmbed: !!isEmbed })}>
      <BookerSeo
@ -46,7 +54,7 @@ export default function Type({
        rescheduleUid={rescheduleUid ?? undefined}
        hideBranding={isBrandingHidden}
        isSEOIndexable={isSEOIndexable ?? true}
-        entity={entity}
+        entity={eventData.entity}
        bookingData={booking}
      />
      <Booker
@ -55,8 +63,16 @@ export default function Type({
        bookingData={booking}
        isAway={away}
        hideBranding={isBrandingHidden}
-        entity={entity}
-        duration={duration}
+        entity={eventData.entity}
+        durationConfig={eventData.metadata?.multipleDuration}
+        /* TODO: Currently unused, evaluate it is needed-
+         *       Possible alternative approach is to have onDurationChange.
+         */
+        duration={getMultipleDurationValue(
+          eventData.metadata?.multipleDuration,
+          searchParams?.get("duration"),
+          eventData.length
+        )}
      />
    </main>
  );
@ -68,7 +84,7 @@ Type.PageWrapper = PageWrapper;
 async function getDynamicGroupPageProps(context: GetServerSidePropsContext) {
  const session = await getServerSession(context);
  const { user: usernames, type: slug } = paramsSchema.parse(context.params);
-  const { rescheduleUid, bookingUid, duration: queryDuration } = context.query;
+  const { rescheduleUid, bookingUid } = context.query;

  const { ssrInit } = await import("@server/lib/ssr");
  const ssr = await ssrInit(context);
@ -120,12 +136,14 @@ async function getDynamicGroupPageProps(context: GetServerSidePropsContext) {

  return {
    props: {
-      entity: eventData.entity,
-      duration: getMultipleDurationValue(
-        eventData.metadata?.multipleDuration,
-        queryDuration,
-        eventData.length
-      ),
+      eventData: {
+        entity: eventData.entity,
+        length: eventData.length,
+        metadata: {
+          ...eventData.metadata,
+          multipleDuration: [15, 30, 60],
+        },
+      },
      booking,
      user: usernames.join("+"),
      slug,
@ -144,7 +162,7 @@ async function getUserPageProps(context: GetServerSidePropsContext) {
  const session = await getServerSession(context);
  const { user: usernames, type: slug } = paramsSchema.parse(context.params);
  const username = usernames[0];
-  const { rescheduleUid, bookingUid, duration: queryDuration } = context.query;
+  const { rescheduleUid, bookingUid } = context.query;
  const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(context.req, context.params?.orgSlug);

  const isOrgContext = currentOrgDomain && isValidOrgDomain;
@ -167,7 +185,7 @@ async function getUserPageProps(context: GetServerSidePropsContext) {
  const user = await prisma.user.findFirst({
    where: {
      username,
-      organization: userOrgQuery(context.req.headers.host ?? "", context.params?.orgSlug),
+      organization: userOrgQuery(context.req, context.params?.orgSlug),
    },
    select: {
      away: true,
@ -207,15 +225,14 @@ async function getUserPageProps(context: GetServerSidePropsContext) {
  return {
    props: {
      booking,
-      duration: getMultipleDurationValue(
-        eventData.metadata?.multipleDuration,
-        queryDuration,
-        eventData.length
-      ),
+      eventData: {
+        entity: eventData.entity,
+        length: eventData.length,
+        metadata: eventData.metadata,
+      },
      away: user?.away,
      user: username,
      slug,
-      entity: eventData.entity,
      trpcState: ssr.dehydrate(),
      isBrandingHidden: user?.hideBranding,
      isSEOIndexable: user?.allowSEOIndexing,
--- a/apps/web/pages/api/auth/signup.ts
+++ b/apps/web/pages/api/auth/signup.ts
@ -6,8 +6,18 @@ import { type RequestWithUsernameStatus } from "@calcom/features/auth/signup/use
 import { IS_PREMIUM_USERNAME_ENABLED } from "@calcom/lib/constants";
 import { HttpError } from "@calcom/lib/http-error";
 import logger from "@calcom/lib/logger";
+import { signupSchema } from "@calcom/prisma/zod-utils";
+
+function ensureSignupIsEnabled(req: RequestWithUsernameStatus) {
+  const { token } = signupSchema
+    .pick({
+      token: true,
+    })
+    .parse(req.body);
+
+  // Stil allow signups if there is a team invite
+  if (token) return;

-function ensureSignupIsEnabled() {
  if (process.env.NEXT_PUBLIC_DISABLE_SIGNUP === "true") {
    throw new HttpError({
      statusCode: 403,
@ -29,7 +39,7 @@ export default async function handler(req: RequestWithUsernameStatus, res: NextA
  // Use a try catch instead of returning res every time
  try {
    ensureReqIsPost(req);
-    ensureSignupIsEnabled();
+    ensureSignupIsEnabled(req);

    /**
     * Im not sure its worth merging these two handlers. They are different enough to be separate.
--- a/apps/web/pages/api/book/instant-event.ts
+++ b/apps/web/pages/api/book/instant-event.ts
@ -0,0 +1,22 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import handleInstantMeeting from "@calcom/features/instant-meeting/handleInstantMeeting";
+import { checkRateLimitAndThrowError } from "@calcom/lib/checkRateLimitAndThrowError";
+import getIP from "@calcom/lib/getIP";
+import { defaultResponder } from "@calcom/lib/server";
+
+async function handler(req: NextApiRequest & { userId?: number }, res: NextApiResponse) {
+  const userIp = getIP(req);
+
+  await checkRateLimitAndThrowError({
+    rateLimitingType: "core",
+    identifier: `instant.event-${userIp}`,
+  });
+
+  const session = await getServerSession({ req, res });
+  req.userId = session?.user?.id || -1;
+  const booking = await handleInstantMeeting(req);
+  return booking;
+}
+export default defaultResponder(handler);
--- a/apps/web/pages/api/recorded-daily-video.ts
+++ b/apps/web/pages/api/recorded-daily-video.ts
@ -1,24 +1,38 @@
 import type { WebhookTriggerEvents } from "@prisma/client";
+import { createHmac } from "crypto";
 import type { NextApiRequest, NextApiResponse } from "next";
 import { z } from "zod";

 import { DailyLocationType } from "@calcom/app-store/locations";
 import { getDownloadLinkOfCalVideoByRecordingId } from "@calcom/core/videoClient";
 import { sendDailyVideoRecordingEmails } from "@calcom/emails";
-import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import getWebhooks from "@calcom/features/webhooks/lib/getWebhooks";
 import sendPayload from "@calcom/features/webhooks/lib/sendPayload";
-import { IS_SELF_HOSTED } from "@calcom/lib/constants";
 import { getTeamIdFromEventType } from "@calcom/lib/getTeamIdFromEventType";
 import { defaultHandler } from "@calcom/lib/server";
 import { getTranslation } from "@calcom/lib/server/i18n";
 import prisma, { bookingMinimalSelect } from "@calcom/prisma";
 import type { CalendarEvent } from "@calcom/types/Calendar";

-const schema = z.object({
-  recordingId: z.string(),
-  bookingUID: z.string(),
-});
+const schema = z
+  .object({
+    version: z.string(),
+    type: z.string(),
+    id: z.string(),
+    payload: z.object({
+      recording_id: z.string(),
+      end_ts: z.number(),
+      room_name: z.string(),
+      start_ts: z.number(),
+      status: z.string(),
+
+      max_participants: z.number(),
+      duration: z.number(),
+      s3_key: z.string(),
+    }),
+    event_ts: z.number(),
+  })
+  .passthrough();

 const downloadLinkSchema = z.object({
  download_link: z.string(),
@ -39,8 +53,8 @@ const triggerWebhook = async ({
  };
 }) => {
  const eventTrigger: WebhookTriggerEvents = "RECORDING_READY";
-  // Send Webhook call if hooked to BOOKING.RECORDING_READY

+  // Send Webhook call if hooked to BOOKING.RECORDING_READY
  const triggerForUser = !booking.teamId || (booking.teamId && booking.eventTypeParentId);

  const subscriberOptions = {
@ -62,71 +76,62 @@ const triggerWebhook = async ({
  await Promise.all(promises);
 };

-const checkIfUserIsPartOfTheSameTeam = async (
-  teamId: number | undefined | null,
-  userId: number,
-  userEmail: string | undefined | null
-) => {
-  if (!teamId) return false;
-
-  const getUserQuery = () => {
-    if (!!userEmail) {
-      return {
-        OR: [
-          {
-            id: userId,
-          },
-          {
-            email: userEmail,
-          },
-        ],
-      };
-    } else {
-      return {
-        id: userId,
-      };
-    }
-  };
-
-  const team = await prisma.team.findFirst({
-    where: {
-      id: teamId,
-      members: {
-        some: {
-          user: getUserQuery(),
-        },
-      },
-    },
-  });
-
-  return !!team;
-};
+const testRequestSchema = z.object({
+  test: z.enum(["test"]),
+});

 async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (!process.env.SENDGRID_API_KEY || !process.env.SENDGRID_EMAIL) {
    return res.status(405).json({ message: "No SendGrid API key or email" });
  }
-  const response = schema.safeParse(JSON.parse(req.body));

-  if (!response.success) {
+  if (testRequestSchema.safeParse(req.body).success) {
+    return res.status(200).json({ message: "Test request successful" });
+  }
+
+  const hmacSecret = process.env.DAILY_WEBHOOK_SECRET;
+  if (!hmacSecret) {
+    return res.status(405).json({ message: "No Daily Webhook Secret" });
+  }
+
+  const signature = `${req.headers["x-webhook-timestamp"]}.${JSON.stringify(req.body)}`;
+  const base64DecodedSecret = Buffer.from(hmacSecret, "base64");
+  const hmac = createHmac("sha256", base64DecodedSecret);
+  const computed_signature = hmac.update(signature).digest("base64");
+
+  if (req.headers["x-webhook-signature"] !== computed_signature) {
+    return res.status(403).json({ message: "Signature does not match" });
+  }
+
+  const response = schema.safeParse(req.body);
+
+  if (!response.success || response.data.type !== "recording.ready-to-download") {
    return res.status(400).send({
      message: "Invalid Payload",
    });
  }

-  const { recordingId, bookingUID } = response.data;
-  const session = await getServerSession({ req, res });
+  const { room_name, recording_id, status } = response.data.payload;

-  if (!session?.user) {
-    return res.status(401).send({
-      message: "User not logged in",
+  if (status !== "finished") {
+    return res.status(400).send({
+      message: "Recording not finished",
    });
  }

  try {
-    const booking = await prisma.booking.findFirst({
+    const bookingReference = await prisma.bookingReference.findFirst({
+      where: { type: "daily_video", uid: room_name, meetingId: room_name },
+      select: { bookingId: true },
+    });
+
+    if (!bookingReference || !bookingReference.bookingId) {
+      return res.status(404).send({ message: "Booking reference not found" });
+    }
+
+    const booking = await prisma.booking.findUniqueOrThrow({
      where: {
-        uid: bookingUID,
+        id: bookingReference.bookingId,
      },
      select: {
        ...bookingMinimalSelect,
@ -153,9 +158,9 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
      },
    });

-    if (!booking || booking.location !== DailyLocationType) {
+    if (!booking || !(booking.location === DailyLocationType || booking?.location?.trim() === "")) {
      return res.status(404).send({
-        message: `Booking of uid ${bookingUID} does not exist or does not contain daily video as location`,
+        message: `Booking of room_name ${room_name} does not exist or does not contain daily video as location`,
      });
    }

@ -175,26 +180,6 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {

    const attendeesList = await Promise.all(attendeesListPromises);

-    const isUserAttendeeOrOrganiser =
-      booking?.user?.id === session.user.id ||
-      attendeesList.find(
-        (attendee) => attendee.id === session.user.id || attendee.email === session.user.email
-      );
-
-    if (!isUserAttendeeOrOrganiser) {
-      const isUserMemberOfTheTeam = checkIfUserIsPartOfTheSameTeam(
-        booking?.eventType?.teamId,
-        session.user.id,
-        session.user.email
-      );
-
-      if (!isUserMemberOfTheTeam) {
-        return res.status(403).send({
-          message: "Unauthorised",
-        });
-      }
-    }
-
    await prisma.booking.update({
      where: {
        uid: booking.uid,
@ -204,7 +189,7 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
      },
    });

-    const response = await getDownloadLinkOfCalVideoByRecordingId(recordingId);
+    const response = await getDownloadLinkOfCalVideoByRecordingId(recording_id);
    const downloadLinkResponse = downloadLinkSchema.parse(response);
    const downloadLink = downloadLinkResponse.download_link;

@ -242,17 +227,11 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
      },
    });

-    const isSendingEmailsAllowed = IS_SELF_HOSTED || session?.user?.belongsToActiveTeam;
-
    // send emails to all attendees only when user has team plan
-    if (isSendingEmailsAllowed) {
-      await sendDailyVideoRecordingEmails(evt, downloadLink);
-      return res.status(200).json({ message: "Success" });
-    }
-
-    return res.status(403).json({ message: "User does not have team plan to send out emails" });
+    await sendDailyVideoRecordingEmails(evt, downloadLink);
+    return res.status(200).json({ message: "Success" });
  } catch (err) {
-    console.warn("Error in /recorded-daily-video", err);
+    console.error("Error in /recorded-daily-video", err);
    return res.status(500).json({ message: "something went wrong" });
  }
 }
--- a/apps/web/pages/api/username.ts
+++ b/apps/web/pages/api/username.ts
@ -1,4 +1,5 @@
 import type { NextApiRequest, NextApiResponse } from "next";
+import { z } from "zod";

 import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
 import { checkUsername } from "@calcom/lib/server/checkUsername";
@ -8,8 +9,14 @@ type Response = {
  premium: boolean;
 };

+const bodySchema = z.object({
+  username: z.string(),
+  orgSlug: z.string().optional(),
+});
+
 export default async function handler(req: NextApiRequest, res: NextApiResponse<Response>): Promise<void> {
  const { currentOrgDomain } = orgDomainConfig(req);
-  const result = await checkUsername(req.body.username, currentOrgDomain);
+  const { username, orgSlug } = bodySchema.parse(req.body);
+  const result = await checkUsername(username, currentOrgDomain || orgSlug);
  return res.status(200).json(result);
 }
--- a/apps/web/pages/apps/[slug]/index.tsx
+++ b/apps/web/pages/apps/[slug]/index.tsx
@ -1,3 +1,5 @@
+"use client";
+
 import { Prisma } from "@prisma/client";
 import fs from "fs";
 import matter from "gray-matter";
--- a/apps/web/pages/apps/[slug]/setup.tsx
+++ b/apps/web/pages/apps/[slug]/setup.tsx
@ -1,3 +1,5 @@
+"use client";
+
 import type { InferGetServerSidePropsType } from "next";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
--- a/apps/web/pages/apps/categories/[category].tsx
+++ b/apps/web/pages/apps/categories/[category].tsx
@ -1,3 +1,5 @@
+"use client";
+
 import { Prisma } from "@prisma/client";
 import type { GetStaticPropsContext, InferGetStaticPropsType } from "next";
 import Link from "next/link";
--- a/apps/web/pages/apps/categories/index.tsx
+++ b/apps/web/pages/apps/categories/index.tsx
@ -1,3 +1,5 @@
+"use client";
+
 import type { GetServerSidePropsContext } from "next";
 import Link from "next/link";

@ -13,7 +15,7 @@ import PageWrapper from "@components/PageWrapper";

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

-export default function Apps({ categories }: inferSSRProps<typeof getServerSideProps>) {
+export default function Apps({ categories }: Omit<inferSSRProps<typeof getServerSideProps>, "trpcState">) {
  const { t, isLocaleReady } = useLocale();

  return (
--- a/apps/web/pages/apps/installed/[category].tsx
+++ b/apps/web/pages/apps/installed/[category].tsx
@ -1,3 +1,5 @@
+"use client";
+
 import { useReducer } from "react";
 import { z } from "zod";

--- a/apps/web/pages/auth/login.tsx
+++ b/apps/web/pages/auth/login.tsx
@ -5,7 +5,6 @@ import type { GetServerSidePropsContext } from "next";
 import { getCsrfToken, signIn } from "next-auth/react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import type { CSSProperties } from "react";
 import { useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import { FaGoogle } from "react-icons/fa";
@ -174,15 +173,7 @@ inferSSRProps<typeof _getServerSideProps> & WithNonceProps<{}>) {
    : isSAMLLoginEnabled && !isLoading && data?.connectionExists;

  return (
-    <div
-      style={
-        {
-          "--cal-brand": "#111827",
-          "--cal-brand-emphasis": "#101010",
-          "--cal-brand-text": "white",
-          "--cal-brand-subtle": "#9CA3AF",
-        } as CSSProperties
-      }>
+    <div className="dark:bg-brand dark:text-brand-contrast text-emphasis min-h-screen [--cal-brand-emphasis:#101010] [--cal-brand-subtle:#9CA3AF] [--cal-brand-text:white] [--cal-brand:#111827] dark:[--cal-brand-emphasis:#e1e1e1] dark:[--cal-brand-text:black] dark:[--cal-brand:white]">
      <AuthContainer
        title={t("login")}
        description={t("login")}
@ -238,7 +229,7 @@ inferSSRProps<typeof _getServerSideProps> & WithNonceProps<{}>) {
                type="submit"
                color="primary"
                disabled={formState.isSubmitting}
-                className="w-full justify-center dark:bg-white dark:text-black">
+                className="w-full justify-center">
                {twoFactorRequired ? t("submit") : t("sign_in")}
              </Button>
            </div>
--- a/apps/web/pages/auth/oauth2/authorize.tsx
+++ b/apps/web/pages/auth/oauth2/authorize.tsx
@ -18,7 +18,7 @@ export default function Authorize() {
  const router = useRouter();
  const searchParams = useCompatSearchParams();

-  const client_id = searchParams?.get("client_id") as string;
+  const client_id = (searchParams?.get("client_id") as string) || "";
  const state = searchParams?.get("state") as string;
  const scope = searchParams?.get("scope") as string;

--- a/apps/web/pages/auth/verify.tsx
+++ b/apps/web/pages/auth/verify.tsx
@ -1,15 +1,18 @@
+import { motion } from "framer-motion";
+import type { GetServerSidePropsContext, InferGetServerSidePropsType } from "next";
 import { signIn } from "next-auth/react";
 import Head from "next/head";
 import { usePathname, useRouter } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
 import z from "zod";

+import { classNames } from "@calcom/lib";
 import { APP_NAME, WEBAPP_URL } from "@calcom/lib/constants";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
 import { trpc } from "@calcom/trpc/react";
 import { Button, showToast } from "@calcom/ui";
-import { AlertTriangle, Check, MailOpen } from "@calcom/ui/components/icon";
+import { AlertTriangle, ExternalLink, MailOpen } from "@calcom/ui/components/icon";

 import Loader from "@components/Loader";
 import PageWrapper from "@components/PageWrapper";
@ -54,7 +57,62 @@ const querySchema = z.object({
  t: z.string().optional(),
 });

-export default function Verify() {
+const PaymentFailedIcon = () => (
+  <div className="rounded-full bg-orange-900 p-3">
+    <AlertTriangle className="h-6 w-6 flex-shrink-0 p-0.5 font-extralight text-orange-100" />
+  </div>
+);
+
+const PaymentSuccess = () => (
+  <div
+    className="rounded-full"
+    style={{
+      padding: "6px",
+      border: "0.6px solid rgba(0, 0, 0, 0.02)",
+      background: "rgba(123, 203, 197, 0.10)",
+    }}>
+    <motion.div
+      className="rounded-full"
+      style={{
+        padding: "6px",
+        border: "0.6px solid rgba(0, 0, 0, 0.04)",
+        background: "rgba(123, 203, 197, 0.16)",
+      }}
+      animate={{ scale: [1, 1.1, 1] }} // Define the pulsing animation for the second ring
+      transition={{
+        duration: 1.5,
+        repeat: Infinity,
+        repeatType: "reverse",
+        delay: 0.2, // Delay the start of animation for the second ring
+      }}>
+      <motion.div
+        className="rounded-full p-3"
+        style={{
+          border: "1px solid rgba(255, 255, 255, 0.40)",
+          background: "linear-gradient(180deg, #66C9CF 0%, #9CCCB2 100%)",
+        }}>
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M2.69185 10.6919L2.9297 10.9297L2.69185 10.6919C1.96938 11.4143 1.96938 12.5857 2.69185 13.3081L7.69185 18.3081C8.41432 19.0306 9.58568 19.0306 10.3081 18.3081L21.3081 7.30815C22.0306 6.58568 22.0306 5.41432 21.3081 4.69185C20.5857 3.96938 19.4143 3.96938 18.6919 4.69185L9 14.3837L5.30815 10.6919C4.58568 9.96938 3.41432 9.96938 2.69185 10.6919Z"
+            fill="white"
+            stroke="#48BAAE"
+            strokeWidth="0.7"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </motion.div>
+    </motion.div>
+  </div>
+);
+
+const MailOpenIcon = () => (
+  <div className="bg-default rounded-full p-3">
+    <MailOpen className="text-emphasis h-12 w-12 flex-shrink-0 p-0.5 font-extralight" />
+  </div>
+);
+
+export default function Verify(props: InferGetServerSidePropsType<typeof getServerSideProps>) {
  const searchParams = useCompatSearchParams();
  const pathname = usePathname();
  const router = useRouter();
@ -112,7 +170,7 @@ export default function Verify() {
  }

  return (
-    <div className="text-inverted bg-black bg-opacity-90 backdrop-blur-md backdrop-grayscale backdrop-filter">
+    <div className="text-default bg-muted bg-opacity-90 backdrop-blur-md backdrop-grayscale backdrop-filter">
      <Head>
        <title>
          {/* @note: Ternary can look ugly ant his might be extracted later but I think at 3 it's not yet worth
@ -125,17 +183,9 @@ export default function Verify() {
        </title>
      </Head>
      <div className="flex min-h-screen flex-col items-center justify-center px-6">
-        <div className="m-10 flex max-w-2xl flex-col items-start border border-white p-12 text-left">
-          <div className="rounded-full border border-white p-3">
-            {hasPaymentFailed ? (
-              <AlertTriangle className="text-inverted h-12 w-12 flex-shrink-0 p-0.5 font-extralight" />
-            ) : sessionId ? (
-              <Check className="text-inverted h-12 w-12 flex-shrink-0 p-0.5 font-extralight dark:text-white" />
-            ) : (
-              <MailOpen className="text-inverted h-12 w-12 flex-shrink-0 p-0.5 font-extralight" />
-            )}
-          </div>
-          <h3 className="font-cal text-inverted my-6 text-3xl font-normal dark:text-white">
+        <div className="border-subtle bg-default m-10 flex max-w-2xl flex-col items-center rounded-xl border px-8 py-14 text-left">
+          {hasPaymentFailed ? <PaymentFailedIcon /> : sessionId ? <PaymentSuccess /> : <MailOpenIcon />}
+          <h3 className="font-cal text-emphasis my-6 text-2xl font-normal leading-none">
            {hasPaymentFailed
              ? "Your payment failed"
              : sessionId
@ -145,41 +195,60 @@ export default function Verify() {
          {hasPaymentFailed && (
            <p className="my-6">Your account has been created, but your premium has not been reserved.</p>
          )}
-          <p className="text-inverted dark:text-white">
+          <p className="text-muted dark:text-subtle text-base font-normal">
            We have sent an email to <b>{customer?.email} </b>with a link to activate your account.{" "}
            {hasPaymentFailed &&
              "Once you activate your account you will be able to try purchase your premium username again or select a different one."}
          </p>
-          <p className="text-muted mt-6">
-            Don&apos;t see an email? Click the button below to send another email.
-          </p>
-
-          <div className="mt-6 flex space-x-5 text-center">
+          <div className="mt-7">
            <Button
              color="secondary"
-              disabled={secondsLeft > 0}
-              onClick={async (e) => {
-                if (!customer) {
-                  return;
-                }
-                e.preventDefault();
-                setSecondsLeft(30);
-                // Update query params with t:timestamp, shallow: true doesn't re-render the page
-                const _searchParams = new URLSearchParams(searchParams?.toString());
-                _searchParams.set("t", `${Date.now()}`);
-                router.replace(`${pathname}?${_searchParams.toString()}`);
-                return await sendVerificationLogin(customer.email, customer.username);
-              }}>
-              {secondsLeft > 0 ? `Resend in ${secondsLeft} seconds` : "Send another mail"}
-            </Button>
-            <Button color="primary" href={`${WEBAPP_URL || "https://app.cal.com"}/auth/login`}>
-              Login using another method
+              href={
+                props.EMAIL_FROM
+                  ? encodeURIComponent(`https://mail.google.com/mail/u/0/#search/from:${props.EMAIL_FROM}`)
+                  : "https://mail.google.com/mail/u/0/"
+              }
+              target="_blank"
+              EndIcon={ExternalLink}>
+              Open in Gmail
            </Button>
          </div>
        </div>
+        <div className="flex items-center gap-2">
+          <p className="text-subtle text-base font-normal ">Don’t seen an email?</p>
+          <button
+            className={classNames(
+              "font-light",
+              secondsLeft > 0 ? "text-muted" : "underline underline-offset-2 hover:font-normal"
+            )}
+            disabled={secondsLeft > 0}
+            onClick={async (e) => {
+              if (!customer) {
+                return;
+              }
+              e.preventDefault();
+              setSecondsLeft(30);
+              // Update query params with t:timestamp, shallow: true doesn't re-render the page
+              const _searchParams = new URLSearchParams(searchParams?.toString());
+              _searchParams.set("t", `${Date.now()}`);
+              router.replace(`${pathname}?${_searchParams.toString()}`);
+              return await sendVerificationLogin(customer.email, customer.username);
+            }}>
+            {secondsLeft > 0 ? `Resend in ${secondsLeft} seconds` : "Resend"}
+          </button>
+        </div>
      </div>
    </div>
  );
 }

+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const EMAIL_FROM = process.env.EMAIL_FROM;
+
+  return {
+    props: {
+      EMAIL_FROM,
+    },
+  };
+};
 Verify.PageWrapper = PageWrapper;
--- a/apps/web/pages/booking/[uid].tsx
+++ b/apps/web/pages/booking/[uid].tsx
@ -575,7 +575,7 @@ export default function Success(props: SuccessProps) {
                            className="text-default break-words"
                            data-testid="field-response"
                            data-fob-field={field.name}>
-                            {response.toString()}
+                            {field.type === "boolean" ? (response ? t("yes") : t("no")) : response.toString()}
                          </p>
                        </>
                      );
--- a/apps/web/pages/bookings/[status].tsx
+++ b/apps/web/pages/bookings/[status].tsx
@ -1,12 +1,15 @@
+"use client";
+
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import type { GetStaticPaths, GetStaticProps } from "next";
-import { Fragment } from "react";
+import { Fragment, useState } from "react";
 import React from "react";
 import { z } from "zod";

 import { WipeMyCalActionButton } from "@calcom/app-store/wipemycalother/components";
 import dayjs from "@calcom/dayjs";
 import { getLayout } from "@calcom/features/MainLayout";
+import { FilterToggle } from "@calcom/features/bookings/components/FilterToggle";
 import { FiltersContainer } from "@calcom/features/bookings/components/FiltersContainer";
 import type { filterQuerySchema } from "@calcom/features/bookings/lib/useFilterQuery";
 import { useFilterQuery } from "@calcom/features/bookings/lib/useFilterQuery";
@ -81,6 +84,7 @@ export default function Bookings() {
  const { status } = params ? querySchema.parse(params) : { status: "upcoming" as const };
  const { t } = useLocale();
  const user = useMeQuery().data;
+  const [isFiltersVisible, setIsFiltersVisible] = useState<boolean>(false);

  const query = trpc.viewer.bookings.get.useInfiniteQuery(
    {
@ -151,12 +155,11 @@ export default function Bookings() {
  return (
    <ShellMain hideHeadingOnMobile heading={t("bookings")} subtitle={t("bookings_description")}>
      <div className="flex flex-col">
-        <div className="flex flex-col flex-wrap lg:flex-row">
+        <div className="flex flex-row flex-wrap justify-between">
          <HorizontalTabs tabs={tabs} />
-          <div className="max-w-full overflow-x-auto xl:ml-auto">
-            <FiltersContainer />
-          </div>
+          <FilterToggle setIsFiltersVisible={setIsFiltersVisible} />
        </div>
+        <FiltersContainer isFiltersVisible={isFiltersVisible} />
        <main className="w-full">
          <div className="flex w-full flex-col" ref={animationParentRef}>
            {query.status === "error" && (
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				`export { default } from "@pages/bookings/[status]";`