From 2d6eebcd8a9359b326371e8ff1280b4f5b11b874 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20L=C3=B3pez?= <zomars@me.com>
Date: Thu, 22 Jun 2023 15:25:37 -0700
Subject: [PATCH] chore: Sync packages mismatches (#9725)

---
 .github/PULL_REQUEST_TEMPLATE.md              |   2 +
 README.md                                     |  24 +-
 apps/api/README.md                            |   2 +-
 apps/api/package.json                         |   4 +-
 apps/storybook/components/VariantsTable.tsx   |  10 +-
 apps/storybook/package.json                   |   8 +-
 apps/swagger/package.json                     |   2 +-
 apps/web/components/Embed.tsx                 |   2 +-
 apps/web/components/NavTabs.tsx               |   2 +-
 apps/web/components/apps/App.tsx              |  14 +-
 .../components/booking/BookingDescription.tsx |   2 +-
 .../booking/BookingDescriptionPayment.tsx     |   2 +-
 .../components/booking/BookingListItem.tsx    |   4 +-
 apps/web/components/booking/CancelBooking.tsx |   2 +-
 .../web/components/booking/SkeletonLoader.tsx |   2 +-
 .../booking/pages/AvailabilityPage.tsx        |   6 +-
 .../components/booking/pages/BookingPage.tsx  |   6 +-
 .../components/dialog/EditLocationDialog.tsx  |   2 +-
 .../components/dialog/RescheduleDialog.tsx    |   2 +-
 apps/web/components/error/error-page.tsx      |   2 +-
 .../eventtype/CustomEventTypeModal.tsx        |   2 +-
 .../components/eventtype/EventAdvancedTab.tsx |   6 +-
 .../components/eventtype/EventLimitsTab.tsx   |   8 +-
 .../components/eventtype/EventSetupTab.tsx    |   6 +-
 .../eventtype/EventTypeSingleLayout.tsx       |   2 +-
 .../components/eventtype/SkeletonLoader.tsx   |   4 +-
 .../security/DisableTwoFactorModal.tsx        |   2 +-
 .../security/DisableUserImpersonation.tsx     |   2 +-
 .../security/EnableTwoFactorModal.tsx         |   6 +-
 .../security/TwoFactorAuthSection.tsx         |   2 +-
 .../security/TwoFactorModalHeader.tsx         |   2 +-
 .../settings/DisableTwoFactorModal.tsx        |   2 +-
 .../settings/EnableTwoFactorModal.tsx         |   6 +-
 apps/web/components/setup/AdminUser.tsx       |   2 +-
 apps/web/components/setup/StepDone.tsx        |   2 +-
 apps/web/components/team/screens/Team.tsx     |   4 +-
 apps/web/components/ui/EditableHeading.tsx    |   4 +-
 apps/web/components/ui/InfoBadge.tsx          |   2 +-
 apps/web/components/ui/ModalContainer.tsx     |   2 +-
 .../UsernameAvailability/PremiumTextfield.tsx |   2 +-
 .../UsernameTextfield.tsx                     |   2 +-
 apps/web/lib/core/i18n/i18n.utils.ts          |   3 +-
 apps/web/package.json                         |  10 +-
 apps/web/pages/404.tsx                        |   4 +-
 apps/web/pages/500.tsx                        |   2 +-
 apps/web/pages/[user].tsx                     |   2 +-
 apps/web/pages/auth/error.tsx                 |   3 +-
 apps/web/pages/availability/[schedule].tsx    |   2 +-
 apps/web/pages/booking/[uid].tsx              |  14 +-
 apps/web/pages/event-types/index.tsx          |  16 +-
 apps/web/pages/insights/index.tsx             |   2 +-
 apps/web/pages/maintenance.tsx                |   2 +-
 apps/web/pages/settings/billing/index.tsx     |   2 +-
 .../web/pages/settings/developer/api-keys.tsx |   2 +-
 .../pages/settings/my-account/appearance.tsx  |   2 +-
 .../pages/settings/my-account/calendars.tsx   |   2 +-
 .../settings/my-account/conferencing.tsx      |   2 +-
 .../web/pages/settings/my-account/general.tsx |   2 +-
 .../web/pages/settings/my-account/profile.tsx |   2 +-
 .../settings/security/two-factor-auth.tsx     |   2 +-
 apps/web/pages/team/[slug].tsx                |   2 +-
 apps/web/pages/video/[uid].tsx                |   2 +-
 apps/web/pages/video/meeting-ended/[uid].tsx  |   8 +-
 .../pages/video/meeting-not-started/[uid].tsx |   2 +-
 apps/web/server/lib/ssg.ts                    |   4 +-
 package.json                                  |   2 +-
 .../applecalendar/pages/setup/index.tsx       |   2 +-
 .../caldavcalendar/pages/setup/index.tsx      |   2 +-
 .../app-store/closecom/pages/setup/index.tsx  |   2 +-
 packages/app-store/components.tsx             |   6 +-
 packages/app-store/eightxeight/DESCRIPTION.md |   3 +-
 .../exchangecalendar/pages/setup/index.tsx    |   2 +-
 .../giphy/components/SearchDialog.tsx         |   4 +-
 .../components/ExistingGoogleCal.tsx          |   8 +-
 packages/app-store/jitsivideo/DESCRIPTION.md  |   2 +-
 packages/app-store/mirotalk/DESCRIPTION.md    |   3 +-
 packages/app-store/package.json               |   3 +-
 .../routing-forms/components/SingleForm.tsx   |   2 +-
 .../pages/reporting/[...appPages].tsx         |   4 +-
 .../pages/route-builder/[...appPages].tsx     |   2 +-
 .../app-store/sendgrid/pages/setup/index.tsx  |   2 +-
 .../components/AppSettingsInterface.tsx       |   2 +-
 .../pages/how-to-use/[...appPages].tsx        |   2 +-
 .../components/confirmDialog.tsx              |   2 +-
 .../app-store/zapier/pages/setup/index.tsx    |   8 +-
 packages/app-store/zoho-bigin/README.md       |   4 +-
 packages/atoms/package.json                   |   4 +-
 packages/config/package.json                  |   2 +-
 packages/emails/package.json                  |   2 +-
 packages/embeds/README.md                     |   3 +-
 packages/embeds/embed-core/package.json       |   2 +-
 packages/embeds/embed-react/package.json      |   4 +-
 .../embed-react/test/packaged/README.md       |   3 +-
 packages/features/apps/AdminAppsList.tsx      |   2 +-
 packages/features/bookings/Booker/Booker.tsx  |   4 +-
 .../BookEventForm/BookEventForm.tsx           |   2 +-
 .../bookings/Booker/components/EventMeta.tsx  |   2 +-
 .../bookings/Booker/components/Header.tsx     |   4 +-
 .../components/event-meta/Locations.tsx       |   2 +-
 .../components/event-meta/Occurences.tsx      |   2 +-
 packages/features/calendars/DatePicker.tsx    |  10 +-
 .../calendars/DestinationCalendarSelector.tsx |   2 +-
 .../weeklyview/components/Calendar.tsx        |   2 +-
 .../components/DateValues/index.tsx           |   2 +-
 .../weeklyview/components/event/Empty.tsx     |   2 +-
 .../weeklyview/components/event/Event.tsx     |   2 +-
 .../components/horizontalLines/index.tsx      |   4 +-
 .../api-keys/components/ApiKeyDialogForm.tsx  |   4 +-
 .../hooks/useLockedFieldsManager.tsx          |   2 +-
 .../pages/settings/appearance.tsx             |   2 +-
 .../organizations/pages/settings/general.tsx  |   2 +-
 .../ee/payments/components/Payment.tsx        |   2 +-
 .../ee/payments/components/PaymentPage.tsx    |   6 +-
 .../ee/sso/components/OIDCConnection.tsx      |   4 +-
 .../ee/sso/components/SAMLConnection.tsx      |   4 +-
 .../components/InviteLinkSettingsModal.tsx    |   2 +-
 .../components/MemberChangeRoleModal.tsx      |   2 +-
 .../components/MemberInvitationModal.tsx      |  12 +-
 .../components/SkeletonloaderTeamList.tsx     |   2 +-
 .../components/TeamAvailabilityModal.tsx      |   2 +-
 .../ee/teams/components/TeamListItem.tsx      |   2 +-
 .../ee/teams/pages/team-appearance-view.tsx   |   2 +-
 .../ee/teams/pages/team-billing-view.tsx      |   2 +-
 .../ee/teams/pages/team-profile-view.tsx      |   2 +-
 .../ee/users/pages/users-listing-view.tsx     |   2 +-
 .../workflows/components/AddActionDialog.tsx  |   4 +-
 .../ee/workflows/components/EmptyScreen.tsx   |   4 +-
 .../components/SkeletonLoaderEdit.tsx         |   6 +-
 .../SkeletonLoaderEventWorkflowsTab.tsx       |   2 +-
 .../components/SkeletonLoaderList.tsx         |   4 +-
 .../components/WorkflowStepContainer.tsx      |  10 +-
 .../features/ee/workflows/pages/workflow.tsx  |   4 +-
 .../BulkEditDefaultConferencingModal.tsx      |   4 +-
 .../components/CheckedTeamSelect.tsx          |   4 +-
 .../components/CheckedUserSelect.tsx          |   2 +-
 .../eventtypes/components/EmptyPage.tsx       |   2 +-
 .../components/MultiDropdownSelect.tsx        |   2 +-
 .../flags/pages/flag-listing-view.tsx         |   2 +-
 packages/features/form-builder/Components.tsx |   6 +-
 .../features/form-builder/FormBuilder.tsx     |   8 +-
 .../components/TotalBookingUsersTable.tsx     |   2 +-
 .../schedules/components/Schedule.tsx         |   2 +-
 packages/features/settings/ThemeLabel.tsx     |   4 +-
 .../settings/layouts/SettingsLayout.tsx       |   4 +-
 packages/features/shell/Shell.tsx             |   6 +-
 packages/features/tips/Tips.tsx               |   2 +-
 packages/features/tips/UpgradeTip.tsx         |   2 +-
 .../components/WebhookListSkeleton.tsx        |   2 +-
 .../features/webhooks/pages/webhooks-view.tsx |   2 +-
 packages/lib/package.json                     |   5 +-
 packages/lib/server/i18n.ts                   |   4 +-
 packages/lib/test/builder.ts                  |   3 +-
 packages/prisma/schema.prisma                 |  22 +-
 packages/ui/components/apps/AllApps.tsx       |   4 +-
 .../ui/components/apps/SkeletonLoader.tsx     |   2 +-
 packages/ui/components/button/Button.tsx      |   8 +-
 .../ui/components/buttonGroup/ButtonGroup.tsx |   2 +-
 packages/ui/components/card/Card.tsx          |   4 +-
 packages/ui/components/card/FormCard.tsx      |   2 +-
 packages/ui/components/credits/Credits.tsx    |   6 +-
 .../editor/plugins/AddVariablesDropdown.tsx   |   6 +-
 .../components/empty-screen/EmptyScreen.tsx   |   2 +-
 packages/ui/components/form/inputs/Input.tsx  |   4 +-
 .../components/form/switch/SettingsToggle.tsx |   2 +-
 .../navigation/tabs/HorizontalTabs.tsx        |   2 +-
 packages/ui/components/table/Table.tsx        |   2 +-
 .../ui/components/top-banner/TopBanner.tsx    |   2 +-
 packages/ui/form/fields.tsx                   |   2 +-
 .../ui/form/radio-area/RadioAreaGroup.tsx     |   4 +-
 packages/ui/package.json                      |   3 +-
 yarn.lock                                     | 626 +++---------------
 171 files changed, 431 insertions(+), 825 deletions(-)

diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 3a92229cc7..1a472b44f0 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -26,11 +26,13 @@ Fixes # (issue)
 - [ ] Test B
 
 ## Mandatory Tasks
+
 - [ ] Make sure you have self-reviewed the code. A decent size PR without self-review might be rejected.
 
 ## Checklist
 
 <!-- Please remove all the irrelevant bullets to your PR -->
+
 - I haven't read the [contributing guide](https://github.com/calcom/cal.com/blob/main/CONTRIBUTING.md)
 - My code doesn't follow the style guidelines of this project
 - I haven't commented my code, particularly in hard-to-understand areas
diff --git a/README.md b/README.md
index 2d9616fb31..38f3bcd815 100644
--- a/README.md
+++ b/README.md
@@ -121,9 +121,9 @@ Here is what you need to be able to run Cal.com.
    ```sh
    git clone https://github.com/calcom/cal.com.git
    ```
-   > If you are on windows, run the following command on `gitbash` with admin privileges: <br>
-   ```git clone -c core.symlinks=true https://github.com/calcom/cal.com.git``` <br>
-   See [docs](https://cal.com/docs/how-to-guides/how-to-troubleshoot-symbolic-link-issues-on-windows#enable-symbolic-links) for more details.
+
+   > If you are on windows, run the following command on `gitbash` with admin privileges: <br> > `git clone -c core.symlinks=true https://github.com/calcom/cal.com.git` <br>
+   > See [docs](https://cal.com/docs/how-to-guides/how-to-troubleshoot-symbolic-link-issues-on-windows#enable-symbolic-links) for more details.
 
 1. Go to the project folder
 
@@ -158,6 +158,7 @@ yarn dx
 ```sh
 echo 'NEXT_PUBLIC_DEBUG=1' >> .env
 ```
+
 #### Gitpod Setup
 
 1. Click the button below to open this project in Gitpod.
@@ -166,8 +167,6 @@ echo 'NEXT_PUBLIC_DEBUG=1' >> .env
 
 [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/calcom/cal.com)
 
-
-
 #### Manual setup
 
 1. Configure environment variables in the `.env` file. Replace `<user>`, `<pass>`, `<db-host>`, and `<db-port>` with their applicable values
@@ -175,24 +174,26 @@ echo 'NEXT_PUBLIC_DEBUG=1' >> .env
    ```
    DATABASE_URL='postgresql://<user>:<pass>@<db-host>:<db-port>'
    ```
+
    <details>
    <summary>If you don't know how to configure the DATABASE_URL, then follow the steps here to create a quick local DB</summary>
 
    1. [Download](https://www.postgresql.org/download/) and install postgres in your local (if you don't have it already).
 
-   2. Create your own local db by executing `createDB <DB name>` 
+   2. Create your own local db by executing `createDB <DB name>`
 
    3. Now open your psql shell with the DB you created: `psql -h localhost -U postgres -d <DB name>`
 
-   4. Inside the psql shell execute `\conninfo`. And you will get the following info.   
+   4. Inside the psql shell execute `\conninfo`. And you will get the following info.  
       ![image](https://user-images.githubusercontent.com/39329182/236612291-51d87f69-6dc1-4a23-bf4d-1ca1754e0a35.png)
 
-   5. Now extract all the info and add it to your DATABASE_URL. The url would look something like this 
-   `postgresql://postgres:postgres@localhost:5432/Your-DB-Name`.
+   5. Now extract all the info and add it to your DATABASE_URL. The url would look something like this
+      `postgresql://postgres:postgres@localhost:5432/Your-DB-Name`.
 
    </details>
 
    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 render](https://render.com/docs/databases)
 
@@ -208,10 +209,11 @@ echo 'NEXT_PUBLIC_DEBUG=1' >> .env
    ```
 
    In a production environment, run:
-   
+
    ```sh
    yarn workspace @calcom/prisma db-deploy
    ```
+
 1. Run [mailhog](https://github.com/mailhog/MailHog) to view emails sent during development
 
    ```sh
@@ -490,7 +492,9 @@ following
 10. You're good to go. Now you can easily add your ZohoCRM integration in the Cal.com settings.
 
 ### Obtaining Zoho Bigin Client ID and Secret
+
 [Follow these steps](./packages/app-store/zoho-bigin/)
+
 ## Workflows
 
 ### Setting up SendGrid for Email reminders
diff --git a/apps/api/README.md b/apps/api/README.md
index bd9217ba09..fbf96cebd2 100644
--- a/apps/api/README.md
+++ b/apps/api/README.md
@@ -7,7 +7,7 @@
   <a href="https://cal.com/docs/enterprise-features/api#api-server-specifications">Read the API docs</a>
 </div>
 
-# Cal.com Public API 
+# Cal.com Public API
 
 Welcome to the Public API ("/apps/api") of the Cal.com.
 
diff --git a/apps/api/package.json b/apps/api/package.json
index a140442b23..9ddd6e1f44 100644
--- a/apps/api/package.json
+++ b/apps/api/package.json
@@ -32,9 +32,9 @@
     "@sentry/nextjs": "^7.20.0",
     "bcryptjs": "^2.4.3",
     "memory-cache": "^0.2.0",
-    "next": "~13.4.6",
+    "next": "^13.4.6",
     "next-api-middleware": "^1.0.1",
-    "next-axiom": "^0.16.0",
+    "next-axiom": "^0.17.0",
     "next-swagger-doc": "^0.3.6",
     "next-validations": "^0.2.0",
     "typescript": "^4.9.4",
diff --git a/apps/storybook/components/VariantsTable.tsx b/apps/storybook/components/VariantsTable.tsx
index 30b136777e..5ba017c608 100644
--- a/apps/storybook/components/VariantsTable.tsx
+++ b/apps/storybook/components/VariantsTable.tsx
@@ -26,15 +26,15 @@ export function VariantsTable({
         <table>
           <RowTitles titles={titles} />
           {columns.map((column) => (
-            <tr className="p-2 pr-6 pb-6" key={column.props.variant}>
+            <tr className="p-2 pb-6 pr-6" key={column.props.variant}>
               <th
-                className="p-2 pr-6 pb-6 text-left text-sm font-normal text-[#8F8F8F]"
+                className="p-2 pb-6 pr-6 text-left text-sm font-normal text-[#8F8F8F]"
                 key={column.props.variant}>
                 {column.props.variant}
               </th>
               {React.Children.count(column.props.children) &&
                 React.Children.map(column.props.children, (cell) => (
-                  <td className="p-2 pr-6 pb-6" style={{ minWidth: `${columnMinWidth}px` }}>
+                  <td className="p-2 pb-6 pr-6" style={{ minWidth: `${columnMinWidth}px` }}>
                     {cell}
                   </td>
                 ))}
@@ -70,9 +70,9 @@ export function VariantRow({ children }: RowProps) {
 export function RowTitles({ titles }: { titles: string[] }) {
   return (
     <tr>
-      <th className="p-2 pr-6 pb-6 text-left text-sm font-normal text-[#8F8F8F]" />
+      <th className="p-2 pb-6 pr-6 text-left text-sm font-normal text-[#8F8F8F]" />
       {titles.map((title) => (
-        <th className="p-2 pr-6 pb-6 text-left text-sm font-normal text-[#8F8F8F]" key={title}>
+        <th className="p-2 pb-6 pr-6 text-left text-sm font-normal text-[#8F8F8F]" key={title}>
           {title}
         </th>
       ))}
diff --git a/apps/storybook/package.json b/apps/storybook/package.json
index dfe7906dd8..358ce53804 100644
--- a/apps/storybook/package.json
+++ b/apps/storybook/package.json
@@ -13,7 +13,7 @@
     "@radix-ui/react-avatar": "^1.0.0",
     "@radix-ui/react-collapsible": "^1.0.0",
     "@radix-ui/react-dialog": "^1.0.0",
-    "@radix-ui/react-dropdown-menu": "^1.0.0",
+    "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-id": "^1.0.0",
     "@radix-ui/react-popover": "^1.0.2",
     "@radix-ui/react-radio-group": "^1.0.0",
@@ -37,8 +37,8 @@
     "@storybook/react": "^6.5.13",
     "@storybook/testing-library": "^0.0.13",
     "@types/react": "18.0.26",
-    "@types/react-dom": "18.0.9",
-    "@vitejs/plugin-react": "^2.1.0",
+    "@types/react-dom": "^18.0.9",
+    "@vitejs/plugin-react": "^2.2.0",
     "autoprefixer": "^10.4.12",
     "babel-loader": "^8.2.5",
     "fs": "^0.0.1-security",
@@ -48,7 +48,7 @@
     "storybook-addon-designs": "^6.3.1",
     "storybook-addon-next": "^1.6.9",
     "storybook-react-i18next": "^1.1.2",
-    "tailwindcss": "^3.2.1",
+    "tailwindcss": "^3.3.1",
     "typescript": "^4.9.4",
     "vite": "^4.1.2"
   }
diff --git a/apps/swagger/package.json b/apps/swagger/package.json
index a62bbd6d5a..34114bdbeb 100644
--- a/apps/swagger/package.json
+++ b/apps/swagger/package.json
@@ -23,7 +23,7 @@
   "devDependencies": {
     "@types/node": "16.9.1",
     "@types/react": "18.0.26",
-    "@types/react-dom": "18.0.9",
+    "@types/react-dom": "^18.0.9",
     "typescript": "^4.9.4"
   }
 }
diff --git a/apps/web/components/Embed.tsx b/apps/web/components/Embed.tsx
index 9b83f85081..94c99d1c34 100644
--- a/apps/web/components/Embed.tsx
+++ b/apps/web/components/Embed.tsx
@@ -1000,7 +1000,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                     </div>
                     <div className={classNames("mt-4", embedType === "floating-popup" ? "" : "hidden")}>
                       <div className="whitespace-nowrap">Text color</div>
-                      <div className="mt-2 mb-6 w-40 xl:mt-0 xl:w-full">
+                      <div className="mb-6 mt-2 w-40 xl:mt-0 xl:w-full">
                         <ColorPicker
                           className="w-[130px]"
                           popoverAlign="start"
diff --git a/apps/web/components/NavTabs.tsx b/apps/web/components/NavTabs.tsx
index fe66bc3558..2218bef880 100644
--- a/apps/web/components/NavTabs.tsx
+++ b/apps/web/components/NavTabs.tsx
@@ -71,7 +71,7 @@ const NavTabs: FC<NavTabProps> = ({ tabs, linkProps, ...props }) => {
                     isCurrent
                       ? "text-emphasis border-gray-900"
                       : "hover:border-default hover:text-default text-subtle border-transparent",
-                    "group inline-flex items-center border-b-2 py-4 px-1 text-sm font-medium",
+                    "group inline-flex items-center border-b-2 px-1 py-4 text-sm font-medium",
                     className
                   )}
                   aria-current={isCurrent ? "page" : undefined}>
diff --git a/apps/web/components/apps/App.tsx b/apps/web/components/apps/App.tsx
index 2d74b26300..838383e398 100644
--- a/apps/web/components/apps/App.tsx
+++ b/apps/web/components/apps/App.tsx
@@ -85,7 +85,7 @@ const Component = ({
   return (
     <div className="relative flex-1 flex-col items-start justify-start px-4 md:flex md:px-8 lg:flex-row lg:px-0">
       {hasDescriptionItems && (
-        <div className="align-center bg-subtle mb-4 -ml-4 -mr-4 flex min-h-[450px] w-auto basis-3/5 snap-x snap-mandatory flex-row overflow-auto whitespace-nowrap p-4  md:mb-8 md:-ml-8 md:-mr-8 md:p-8 lg:mx-0 lg:mb-0 lg:max-w-2xl lg:flex-col lg:justify-center lg:rounded-md">
+        <div className="align-center bg-subtle -ml-4 -mr-4 mb-4 flex min-h-[450px] w-auto basis-3/5 snap-x snap-mandatory flex-row overflow-auto whitespace-nowrap p-4  md:-ml-8 md:-mr-8 md:mb-8 md:p-8 lg:mx-0 lg:mb-0 lg:max-w-2xl lg:flex-col lg:justify-center lg:rounded-md">
           {descriptionItems ? (
             descriptionItems.map((descriptionItem, index) =>
               typeof descriptionItem === "object" ? (
@@ -260,7 +260,7 @@ const Component = ({
           )}
         </span>
 
-        <h4 className="text-emphasis mt-8 mb-2 font-semibold ">{t("contact")}</h4>
+        <h4 className="text-emphasis mb-2 mt-8 font-semibold ">{t("contact")}</h4>
         <ul className="prose-sm -ml-1 -mr-1 leading-5">
           {docs && (
             <li>
@@ -269,7 +269,7 @@ const Component = ({
                 rel="noreferrer"
                 className="text-emphasis text-sm font-normal no-underline hover:underline"
                 href={docs}>
-                <BookOpen className="text-subtle mr-1 -mt-1 inline h-4 w-4" />
+                <BookOpen className="text-subtle -mt-1 mr-1 inline h-4 w-4" />
                 {t("documentation")}
               </a>
             </li>
@@ -281,7 +281,7 @@ const Component = ({
                 rel="noreferrer"
                 className="text-emphasis font-normal no-underline hover:underline"
                 href={website}>
-                <ExternalLink className="text-subtle mr-1 -mt-px inline h-4 w-4" />
+                <ExternalLink className="text-subtle -mt-px mr-1 inline h-4 w-4" />
                 {website.replace("https://", "")}
               </a>
             </li>
@@ -293,7 +293,7 @@ const Component = ({
                 rel="noreferrer"
                 className="text-emphasis font-normal no-underline hover:underline"
                 href={"mailto:" + email}>
-                <Mail className="text-subtle mr-1 -mt-px inline h-4 w-4" />
+                <Mail className="text-subtle -mt-px mr-1 inline h-4 w-4" />
 
                 {email}
               </a>
@@ -306,7 +306,7 @@ const Component = ({
                 rel="noreferrer"
                 className="text-emphasis font-normal no-underline hover:underline"
                 href={tos}>
-                <File className="text-subtle mr-1 -mt-px inline h-4 w-4" />
+                <File className="text-subtle -mt-px mr-1 inline h-4 w-4" />
                 {t("terms_of_service")}
               </a>
             </li>
@@ -318,7 +318,7 @@ const Component = ({
                 rel="noreferrer"
                 className="text-emphasis font-normal no-underline hover:underline"
                 href={privacy}>
-                <Shield className="text-subtle mr-1 -mt-px inline h-4 w-4" />
+                <Shield className="text-subtle -mt-px mr-1 inline h-4 w-4" />
                 {t("privacy_policy")}
               </a>
             </li>
diff --git a/apps/web/components/booking/BookingDescription.tsx b/apps/web/components/booking/BookingDescription.tsx
index fcdcb825d9..be59d4829d 100644
--- a/apps/web/components/booking/BookingDescription.tsx
+++ b/apps/web/components/booking/BookingDescription.tsx
@@ -83,7 +83,7 @@ const BookingDescription: FC<Props> = (props) => {
         size="sm"
         truncateAfter={3}
       />
-      <h2 className="text-default mt-1 mb-2 break-words text-sm font-medium ">
+      <h2 className="text-default mb-2 mt-1 break-words text-sm font-medium ">
         {eventType.team?.parent?.name} {profile.name}
       </h2>
       <h1 className="font-cal  text-emphasis mb-6 break-words text-2xl font-semibold leading-none">
diff --git a/apps/web/components/booking/BookingDescriptionPayment.tsx b/apps/web/components/booking/BookingDescriptionPayment.tsx
index 2f9ef06652..b4e7f171ab 100644
--- a/apps/web/components/booking/BookingDescriptionPayment.tsx
+++ b/apps/web/components/booking/BookingDescriptionPayment.tsx
@@ -19,7 +19,7 @@ const BookingDescriptionPayment = (props: {
 
   return (
     <p className="text-bookinglight -ml-2 px-2 text-sm ">
-      <CreditCard className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
+      <CreditCard className="-mt-1 ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
       {paymentAppData.paymentOption === "HOLD" ? (
         <>{props.t("no_show_fee_amount", params)}</>
       ) : (
diff --git a/apps/web/components/booking/BookingListItem.tsx b/apps/web/components/booking/BookingListItem.tsx
index d724be8fb5..d0c2f35541 100644
--- a/apps/web/components/booking/BookingListItem.tsx
+++ b/apps/web/components/booking/BookingListItem.tsx
@@ -374,7 +374,7 @@ function BookingListItem(booking: BookingItemProps) {
         </td>
         <td className={"w-full px-4" + (isRejected ? " line-through" : "")} onClick={onClickTableData}>
           {/* Time and Badges for mobile */}
-          <div className="w-full pt-4 pb-2 sm:hidden">
+          <div className="w-full pb-2 pt-4 sm:hidden">
             <div className="flex w-full items-center justify-between sm:hidden">
               <div className="text-emphasis text-sm leading-6">{startTime}</div>
               <div className="text-subtle pr-2 text-sm">
@@ -423,7 +423,7 @@ function BookingListItem(booking: BookingItemProps) {
               <span> </span>
 
               {paymentAppData.enabled && !booking.paid && booking.payment.length && (
-                <Badge className="ms-2 me-2 hidden sm:inline-flex" variant="orange">
+                <Badge className="me-2 ms-2 hidden sm:inline-flex" variant="orange">
                   {t("pending_payment")}
                 </Badge>
               )}
diff --git a/apps/web/components/booking/CancelBooking.tsx b/apps/web/components/booking/CancelBooking.tsx
index 0c95055985..89819a2d4f 100644
--- a/apps/web/components/booking/CancelBooking.tsx
+++ b/apps/web/components/booking/CancelBooking.tsx
@@ -64,7 +64,7 @@ export default function CancelBooking(props: Props) {
             placeholder={t("cancellation_reason_placeholder")}
             value={cancellationReason}
             onChange={(e) => setCancellationReason(e.target.value)}
-            className="mt-2 mb-4 w-full "
+            className="mb-4 mt-2 w-full "
             rows={3}
           />
           <div className="flex flex-col-reverse rtl:space-x-reverse ">
diff --git a/apps/web/components/booking/SkeletonLoader.tsx b/apps/web/components/booking/SkeletonLoader.tsx
index 518798006d..7693469b99 100644
--- a/apps/web/components/booking/SkeletonLoader.tsx
+++ b/apps/web/components/booking/SkeletonLoader.tsx
@@ -25,7 +25,7 @@ function SkeletonItem() {
           </div>
         </div>
       </div>
-      <div className="mt-4 hidden flex-shrink-0 sm:mt-0 sm:ml-5 lg:flex">
+      <div className="mt-4 hidden flex-shrink-0 sm:ml-5 sm:mt-0 lg:flex">
         <div className="flex justify-between space-x-2 rtl:space-x-reverse">
           <SkeletonText className="h-6 w-16" />
           <SkeletonText className="h-6 w-32" />
diff --git a/apps/web/components/booking/pages/AvailabilityPage.tsx b/apps/web/components/booking/pages/AvailabilityPage.tsx
index 007c74717d..24c6d438c8 100644
--- a/apps/web/components/booking/pages/AvailabilityPage.tsx
+++ b/apps/web/components/booking/pages/AvailabilityPage.tsx
@@ -191,9 +191,9 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
                       )}
                       {!rescheduleUid && eventType.recurringEvent && (
                         <div className="flex items-start text-sm font-medium">
-                          <RefreshCcw className="float-left mt-[7px] ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] " />
+                          <RefreshCcw className="float-left ml-[2px] mt-[7px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] " />
                           <div>
-                            <p className="mb-1 -ml-2 inline px-2 py-1">
+                            <p className="-ml-2 mb-1 inline px-2 py-1">
                               {getRecurringFreq({ t, recurringEvent: eventType.recurringEvent })}
                             </p>
 
@@ -218,7 +218,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
                       )}
                       {paymentAppData.price > 0 && (
                         <p className="-ml-2 px-2 text-sm font-medium">
-                          <CreditCard className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
+                          <CreditCard className="-mt-1 ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
                           {paymentAppData.paymentOption === "HOLD" ? (
                             <>
                               {t("no_show_fee_amount", {
diff --git a/apps/web/components/booking/pages/BookingPage.tsx b/apps/web/components/booking/pages/BookingPage.tsx
index 4d61c38b7a..a490f06a2b 100644
--- a/apps/web/components/booking/pages/BookingPage.tsx
+++ b/apps/web/components/booking/pages/BookingPage.tsx
@@ -534,7 +534,7 @@ const BookingPage = ({
           )}>
           <div className="sm:flex">
             {showEventTypeDetails && (
-              <div className="sm:border-subtle text-default flex flex-col px-6 pt-6 pb-0 sm:w-1/2 sm:border-r sm:pb-6">
+              <div className="sm:border-subtle text-default flex flex-col px-6 pb-0 pt-6 sm:w-1/2 sm:border-r sm:pb-6">
                 <BookingDescription isBookingPage profile={profile} eventType={eventType}>
                   <BookingDescriptionPayment eventType={eventType} t={t} i18n={i18n} />
                   {!rescheduleUid && eventType.recurringEvent?.freq && recurringEventCount && (
@@ -577,11 +577,11 @@ const BookingPage = ({
                   </div>
                   {booking?.startTime && rescheduleUid && (
                     <div>
-                      <p className="mt-8 mb-2 text-sm " data-testid="former_time_p">
+                      <p className="mb-2 mt-8 text-sm " data-testid="former_time_p">
                         {t("former_time")}
                       </p>
                       <p className="line-through ">
-                        <Calendar className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
+                        <Calendar className="-mt-1 ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
                         {isClientTimezoneAvailable &&
                           typeof booking.startTime === "string" &&
                           parseDateTimeWithTimeZone(booking.startTime, i18n.language, timezone, {
diff --git a/apps/web/components/dialog/EditLocationDialog.tsx b/apps/web/components/dialog/EditLocationDialog.tsx
index b8c8d219df..c8c3c5913f 100644
--- a/apps/web/components/dialog/EditLocationDialog.tsx
+++ b/apps/web/components/dialog/EditLocationDialog.tsx
@@ -259,7 +259,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
 
             {booking && (
               <>
-                <p className="text-emphasis mt-6 mb-2 ml-1 text-sm font-bold">{t("current_location")}:</p>
+                <p className="text-emphasis mb-2 ml-1 mt-6 text-sm font-bold">{t("current_location")}:</p>
                 <p className="text-emphasis mb-2 ml-1 text-sm">
                   {getHumanReadableLocationValue(booking.location, t)}
                 </p>
diff --git a/apps/web/components/dialog/RescheduleDialog.tsx b/apps/web/components/dialog/RescheduleDialog.tsx
index 39d27f5af9..6109bb88be 100644
--- a/apps/web/components/dialog/RescheduleDialog.tsx
+++ b/apps/web/components/dialog/RescheduleDialog.tsx
@@ -49,7 +49,7 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
           <div className="pt-1">
             <DialogHeader title={t("send_reschedule_request")} />
             <p className="text-subtle text-sm">{t("reschedule_modal_description")}</p>
-            <p className="text-emphasis mt-6 mb-2 text-sm font-bold">
+            <p className="text-emphasis mb-2 mt-6 text-sm font-bold">
               {t("reason_for_reschedule_request")}
               <span className="text-subtle font-normal"> (Optional)</span>
             </p>
diff --git a/apps/web/components/error/error-page.tsx b/apps/web/components/error/error-page.tsx
index e3102f230b..112202ffa5 100644
--- a/apps/web/components/error/error-page.tsx
+++ b/apps/web/components/error/error-page.tsx
@@ -35,7 +35,7 @@ const ErrorDebugPanel: React.FC<{ error: Props["error"]; children?: never }> = (
           {debugMap.map(([key, value]) => {
             if (value !== undefined) {
               return (
-                <div key={key} className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
+                <div key={key} className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
                   <dt className="text-emphasis text-sm font-bold">{key}</dt>
                   <dd className="text-emphasis mt-1 text-sm sm:col-span-2 sm:mt-0">{value}</dd>
                 </div>
diff --git a/apps/web/components/eventtype/CustomEventTypeModal.tsx b/apps/web/components/eventtype/CustomEventTypeModal.tsx
index 1413364dfb..7cda6b7556 100644
--- a/apps/web/components/eventtype/CustomEventTypeModal.tsx
+++ b/apps/web/components/eventtype/CustomEventTypeModal.tsx
@@ -84,7 +84,7 @@ const CustomEventTypeModalForm: FC<CustomEventTypeModalFormProps> = (props) => {
             backgroundImage: "url(/calendar-preview.svg)",
           }}>
           <div className="m-auto flex items-center justify-center self-stretch">
-            <div className="bg-subtle mt-3 ml-11 box-border h-[110px] w-[120px] flex-col items-start gap-1 rounded-md border border-solid border-black text-[12px] leading-3">
+            <div className="bg-subtle ml-11 mt-3 box-border h-[110px] w-[120px] flex-col items-start gap-1 rounded-md border border-solid border-black text-[12px] leading-3">
               <p className="text-emphasis overflow-hidden text-ellipsis p-1.5 font-medium">{previewText}</p>
               <p className="text-default ml-1.5 text-[10px] font-normal">8 - 10 AM</p>
             </div>
diff --git a/apps/web/components/eventtype/EventAdvancedTab.tsx b/apps/web/components/eventtype/EventAdvancedTab.tsx
index 0bce4271c5..a9f74d6c0c 100644
--- a/apps/web/components/eventtype/EventAdvancedTab.tsx
+++ b/apps/web/components/eventtype/EventAdvancedTab.tsx
@@ -157,7 +157,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
               color="minimal"
               size="sm"
               aria-label="edit custom name"
-              className="hover:stroke-3 hover:text-emphasis min-w-fit px-0 !py-0 hover:bg-transparent"
+              className="hover:stroke-3 hover:text-emphasis min-w-fit !py-0 px-0 hover:bg-transparent"
               onClick={() => setShowEventNameTip((old) => !old)}>
               <Edit className="h-4 w-4" />
             </Button>
@@ -220,7 +220,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                 onChange(e ? value : "");
               }}>
               {/* Textfield has some margin by default we remove that so we can keep consistent alignment */}
-              <div className="lg:-ml-2 lg:-mb-2">
+              <div className="lg:-mb-2 lg:-ml-2">
                 <TextField
                   className="w-full"
                   label={t("redirect_success_booking")}
@@ -272,7 +272,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                   color="minimal"
                   size="sm"
                   type="button"
-                  className="hover:stroke-3 hover:text-emphasis min-w-fit px-0 !py-0 hover:bg-transparent"
+                  className="hover:stroke-3 hover:text-emphasis min-w-fit !py-0 px-0 hover:bg-transparent"
                   aria-label="copy link"
                   onClick={() => {
                     navigator.clipboard.writeText(placeholderHashedLink);
diff --git a/apps/web/components/eventtype/EventLimitsTab.tsx b/apps/web/components/eventtype/EventLimitsTab.tsx
index ec067d2a6c..f3dfe22bf8 100644
--- a/apps/web/components/eventtype/EventLimitsTab.tsx
+++ b/apps/web/components/eventtype/EventLimitsTab.tsx
@@ -171,7 +171,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
   return (
     <div className="space-y-8">
       <div className="space-y-4 lg:space-y-8">
-        <div className="flex flex-col space-y-4 lg:flex-row lg:space-y-0 lg:space-x-4">
+        <div className="flex flex-col space-y-4 lg:flex-row lg:space-x-4 lg:space-y-0">
           <div className="w-full">
             <Label htmlFor="beforeBufferTime">
               {t("before_event")}
@@ -245,7 +245,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
             />
           </div>
         </div>
-        <div className="flex flex-col space-y-4 lg:flex-row lg:space-y-0 lg:space-x-4">
+        <div className="flex flex-col space-y-4 lg:flex-row lg:space-x-4 lg:space-y-0">
           <div className="w-full">
             <Label htmlFor="minimumBookingNotice">
               {t("minimum_booking_notice")}
@@ -416,7 +416,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
                       </div>
                     )}
                     {period.type === "RANGE" && (
-                      <div className="ms-2 me-2 inline-flex space-x-2 rtl:space-x-reverse">
+                      <div className="me-2 ms-2 inline-flex space-x-2 rtl:space-x-reverse">
                         <Controller
                           name="periodDates"
                           control={formMethods.control}
@@ -437,7 +437,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
                         />
                       </div>
                     )}
-                    {period.suffix ? <span className="ms-2 me-2">&nbsp;{period.suffix}</span> : null}
+                    {period.suffix ? <span className="me-2 ms-2">&nbsp;{period.suffix}</span> : null}
                   </div>
                 );
               })}
diff --git a/apps/web/components/eventtype/EventSetupTab.tsx b/apps/web/components/eventtype/EventSetupTab.tsx
index f88f6028b3..d06adcb2dc 100644
--- a/apps/web/components/eventtype/EventSetupTab.tsx
+++ b/apps/web/components/eventtype/EventSetupTab.tsx
@@ -284,7 +284,7 @@ export const EventSetupTab = (
               return (
                 <li
                   key={`${location.type}${index}`}
-                  className="border-default text-default mb-2 h-9 rounded-md border py-1.5 px-2 hover:cursor-pointer">
+                  className="border-default text-default mb-2 h-9 rounded-md border px-2 py-1.5 hover:cursor-pointer">
                   <div className="flex items-center justify-between">
                     <div className="flex items-center">
                       <img
@@ -298,7 +298,7 @@ export const EventSetupTab = (
                         )}
                         alt={`${eventLocationType.label} logo`}
                       />
-                      <span className="line-clamp-1 ms-1 text-sm">{eventLabel}</span>
+                      <span className="ms-1 line-clamp-1 text-sm">{eventLabel}</span>
                     </div>
                     <div className="flex">
                       <button
@@ -332,7 +332,7 @@ export const EventSetupTab = (
                 location.type === MeetLocationType && destinationCalendar?.integration !== "google_calendar"
             ) && (
               <div className="text-default flex text-sm">
-                <Check className="mt-0.5 mr-1.5 h-2 w-2.5" />
+                <Check className="mr-1.5 mt-0.5 h-2 w-2.5" />
                 <Trans i18nKey="event_type_requres_google_cal">
                   <p>
                     The “Add to calendar” for this event type needs to be a Google Calendar for Meet to work.
diff --git a/apps/web/components/eventtype/EventTypeSingleLayout.tsx b/apps/web/components/eventtype/EventTypeSingleLayout.tsx
index 42630f730c..e7721cbecc 100644
--- a/apps/web/components/eventtype/EventTypeSingleLayout.tsx
+++ b/apps/web/components/eventtype/EventTypeSingleLayout.tsx
@@ -369,7 +369,7 @@ function EventTypeSingleLayout({
                 </DropdownItem>
               </DropdownMenuItem>
               <DropdownMenuSeparator />
-              <div className="hover:bg-subtle flex h-9 cursor-pointer flex-row items-center justify-between py-2 px-4">
+              <div className="hover:bg-subtle flex h-9 cursor-pointer flex-row items-center justify-between px-4 py-2">
                 <Skeleton
                   as={Label}
                   htmlFor="hiddenSwitch"
diff --git a/apps/web/components/eventtype/SkeletonLoader.tsx b/apps/web/components/eventtype/SkeletonLoader.tsx
index 8f866014c5..ebfc8d250c 100644
--- a/apps/web/components/eventtype/SkeletonLoader.tsx
+++ b/apps/web/components/eventtype/SkeletonLoader.tsx
@@ -32,11 +32,11 @@ function SkeletonItem() {
         <div className="">
           <ul className="mt-2 flex space-x-4 rtl:space-x-reverse ">
             <li className="flex items-center whitespace-nowrap">
-              <Clock className="text-subtle mt-0.5 mr-1.5 inline h-4 w-4" />
+              <Clock className="text-subtle mr-1.5 mt-0.5 inline h-4 w-4" />
               <SkeletonText className="h-4 w-12" />
             </li>
             <li className="flex items-center whitespace-nowrap">
-              <User className="text-subtle mt-0.5 mr-1.5 inline h-4 w-4" />
+              <User className="text-subtle mr-1.5 mt-0.5 inline h-4 w-4" />
               <SkeletonText className="h-4 w-12" />
             </li>
           </ul>
diff --git a/apps/web/components/security/DisableTwoFactorModal.tsx b/apps/web/components/security/DisableTwoFactorModal.tsx
index 7fe54a73af..7cb220a5fb 100644
--- a/apps/web/components/security/DisableTwoFactorModal.tsx
+++ b/apps/web/components/security/DisableTwoFactorModal.tsx
@@ -82,7 +82,7 @@ const DisableTwoFactorAuthModal = ({ onDisable, onCancel }: DisableTwoFactorAuth
           </div>
 
           <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-            <Button type="submit" className="ms-2 me-2" disabled={isDisabling}>
+            <Button type="submit" className="me-2 ms-2" disabled={isDisabling}>
               {t("disable")}
             </Button>
             <Button color="secondary" onClick={onCancel}>
diff --git a/apps/web/components/security/DisableUserImpersonation.tsx b/apps/web/components/security/DisableUserImpersonation.tsx
index 62c4ae5ea0..164cbc30c3 100644
--- a/apps/web/components/security/DisableUserImpersonation.tsx
+++ b/apps/web/components/security/DisableUserImpersonation.tsx
@@ -19,7 +19,7 @@ const DisableUserImpersonation = ({ disableImpersonation }: { disableImpersonati
 
   return (
     <>
-      <div className="flex flex-col justify-between pt-9 pl-2 sm:flex-row">
+      <div className="flex flex-col justify-between pl-2 pt-9 sm:flex-row">
         <div>
           <div className="flex flex-row items-center">
             <h2 className="font-cal text-emphasis text-lg font-medium leading-6">
diff --git a/apps/web/components/security/EnableTwoFactorModal.tsx b/apps/web/components/security/EnableTwoFactorModal.tsx
index a6d9e7a5bf..9442b723c3 100644
--- a/apps/web/components/security/EnableTwoFactorModal.tsx
+++ b/apps/web/components/security/EnableTwoFactorModal.tsx
@@ -178,19 +178,19 @@ const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps)
             <WithStep step={SetupStep.ConfirmPassword} current={step}>
               <Button
                 type="submit"
-                className="ms-2 me-2"
+                className="me-2 ms-2"
                 onClick={handleSetup}
                 disabled={password.length === 0 || isSubmitting}>
                 {t("continue")}
               </Button>
             </WithStep>
             <WithStep step={SetupStep.DisplayQrCode} current={step}>
-              <Button type="submit" className="ms-2 me-2" onClick={() => setStep(SetupStep.EnterTotpCode)}>
+              <Button type="submit" className="me-2 ms-2" onClick={() => setStep(SetupStep.EnterTotpCode)}>
                 {t("continue")}
               </Button>
             </WithStep>
             <WithStep step={SetupStep.EnterTotpCode} current={step}>
-              <Button type="submit" className="ms-2 me-2" disabled={isSubmitting}>
+              <Button type="submit" className="me-2 ms-2" disabled={isSubmitting}>
                 {t("enable")}
               </Button>
             </WithStep>
diff --git a/apps/web/components/security/TwoFactorAuthSection.tsx b/apps/web/components/security/TwoFactorAuthSection.tsx
index f4bb6bba5c..ff9bb4bbee 100644
--- a/apps/web/components/security/TwoFactorAuthSection.tsx
+++ b/apps/web/components/security/TwoFactorAuthSection.tsx
@@ -14,7 +14,7 @@ const TwoFactorAuthSection = ({ twoFactorEnabled }: { twoFactorEnabled: boolean
 
   return (
     <>
-      <div className="flex flex-col justify-between pt-9 pl-2 sm:flex-row">
+      <div className="flex flex-col justify-between pl-2 pt-9 sm:flex-row">
         <div>
           <div className="flex flex-row items-center">
             <h2 className="font-cal text-emphasis text-lg font-medium leading-6">{t("2fa")}</h2>
diff --git a/apps/web/components/security/TwoFactorModalHeader.tsx b/apps/web/components/security/TwoFactorModalHeader.tsx
index f0b4ed73d9..68c6682515 100644
--- a/apps/web/components/security/TwoFactorModalHeader.tsx
+++ b/apps/web/components/security/TwoFactorModalHeader.tsx
@@ -6,7 +6,7 @@ const TwoFactorModalHeader = ({ title, description }: { title: string; descripti
       <div className="bg-brand text-brandcontrast dark:bg-darkmodebrand dark:text-darkmodebrandcontrast mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-opacity-5 sm:mx-0 sm:h-10 sm:w-10">
         <Shield className="text-inverted h-6 w-6" />
       </div>
-      <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+      <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
         <h3 className="font-cal text-emphasis text-lg font-medium leading-6" id="modal-title">
           {title}
         </h3>
diff --git a/apps/web/components/settings/DisableTwoFactorModal.tsx b/apps/web/components/settings/DisableTwoFactorModal.tsx
index 987d4d6e81..71443b0001 100644
--- a/apps/web/components/settings/DisableTwoFactorModal.tsx
+++ b/apps/web/components/settings/DisableTwoFactorModal.tsx
@@ -90,7 +90,7 @@ const DisableTwoFactorAuthModal = ({
           </div>
 
           <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-            <Button type="submit" className="ms-2 me-2" data-testid="disable-2fa" disabled={isDisabling}>
+            <Button type="submit" className="me-2 ms-2" data-testid="disable-2fa" disabled={isDisabling}>
               {t("disable")}
             </Button>
             <Button color="secondary" onClick={onCancel}>
diff --git a/apps/web/components/settings/EnableTwoFactorModal.tsx b/apps/web/components/settings/EnableTwoFactorModal.tsx
index c333e46d43..36a5db71b3 100644
--- a/apps/web/components/settings/EnableTwoFactorModal.tsx
+++ b/apps/web/components/settings/EnableTwoFactorModal.tsx
@@ -177,7 +177,7 @@ const EnableTwoFactorModal = ({ onEnable, onCancel, open, onOpenChange }: Enable
             <WithStep step={SetupStep.ConfirmPassword} current={step}>
               <Button
                 type="submit"
-                className="ms-2 me-2"
+                className="me-2 ms-2"
                 onClick={handleSetup}
                 disabled={password.length === 0 || isSubmitting}>
                 {t("continue")}
@@ -187,13 +187,13 @@ const EnableTwoFactorModal = ({ onEnable, onCancel, open, onOpenChange }: Enable
               <Button
                 type="submit"
                 data-testid="goto-otp-screen"
-                className="ms-2 me-2"
+                className="me-2 ms-2"
                 onClick={() => setStep(SetupStep.EnterTotpCode)}>
                 {t("continue")}
               </Button>
             </WithStep>
             <WithStep step={SetupStep.EnterTotpCode} current={step}>
-              <Button type="submit" className="ms-2 me-2" data-testid="enable-2fa" disabled={isSubmitting}>
+              <Button type="submit" className="me-2 ms-2" data-testid="enable-2fa" disabled={isSubmitting}>
                 {t("enable")}
               </Button>
             </WithStep>
diff --git a/apps/web/components/setup/AdminUser.tsx b/apps/web/components/setup/AdminUser.tsx
index c13434b157..9d50b1f87a 100644
--- a/apps/web/components/setup/AdminUser.tsx
+++ b/apps/web/components/setup/AdminUser.tsx
@@ -111,7 +111,7 @@ export const AdminUser = (props: { onSubmit: () => void; onError: () => void; on
                 <Label htmlFor="username" className={classNames(longWebsiteUrl && "mb-0")}>
                   <span className="block">{t("username")}</span>
                   {longWebsiteUrl && (
-                    <small className="items-centerpx-3 bg-subtle border-default text-subtle mt-2 inline-flex rounded-t-md border border-b-0 py-1 px-3">
+                    <small className="items-centerpx-3 bg-subtle border-default text-subtle mt-2 inline-flex rounded-t-md border border-b-0 px-3 py-1">
                       {process.env.NEXT_PUBLIC_WEBSITE_URL}
                     </small>
                   )}
diff --git a/apps/web/components/setup/StepDone.tsx b/apps/web/components/setup/StepDone.tsx
index b101a17bef..2bd6a82b97 100644
--- a/apps/web/components/setup/StepDone.tsx
+++ b/apps/web/components/setup/StepDone.tsx
@@ -27,7 +27,7 @@ const StepDone = (props: {
           <Check className="text-inverted dark:bg-default dark:text-default inline-block h-10 w-10" />
         </div>
         <div className="max-w-[420px] text-center">
-          <h2 className="mt-6 mb-1 text-lg font-medium dark:text-gray-300">{t("all_done")}</h2>
+          <h2 className="mb-1 mt-6 text-lg font-medium dark:text-gray-300">{t("all_done")}</h2>
         </div>
       </div>
     </form>
diff --git a/apps/web/components/team/screens/Team.tsx b/apps/web/components/team/screens/Team.tsx
index bbf31e1b01..77fb044f9b 100644
--- a/apps/web/components/team/screens/Team.tsx
+++ b/apps/web/components/team/screens/Team.tsx
@@ -30,9 +30,9 @@ const Member = ({ member, teamName }: { member: MemberType; teamName: string | n
           alt={member.name || ""}
           imageSrc={WEBAPP_URL + "/" + member.username + "/avatar.png"}
         />
-        <section className="line-clamp-4 mt-2 w-full space-y-1">
+        <section className="mt-2 line-clamp-4 w-full space-y-1">
           <p className="text-default font-medium">{member.name}</p>
-          <div className="line-clamp-3 text-subtle overflow-ellipsis text-sm font-normal">
+          <div className="text-subtle line-clamp-3 overflow-ellipsis text-sm font-normal">
             {!isBioEmpty ? (
               <>
                 <div
diff --git a/apps/web/components/ui/EditableHeading.tsx b/apps/web/components/ui/EditableHeading.tsx
index 3cc6e8902d..eb2bae99bf 100644
--- a/apps/web/components/ui/EditableHeading.tsx
+++ b/apps/web/components/ui/EditableHeading.tsx
@@ -23,7 +23,7 @@ const EditableHeading = function EditableHeading({
         <label className="min-w-8 relative inline-block">
           <span className="whitespace-pre text-xl tracking-normal text-transparent">{value}&nbsp;</span>
           {!isEditing && isReady && (
-            <Edit2 className=" text-subtle group-hover:text-subtle ml-1 -mt-px inline  h-3 w-3" />
+            <Edit2 className=" text-subtle group-hover:text-subtle -mt-px ml-1 inline  h-3 w-3" />
           )}
           <input
             {...passThroughProps}
@@ -31,7 +31,7 @@ const EditableHeading = function EditableHeading({
             value={value}
             required
             className={classNames(
-              "text-emphasis hover:text-default focus:text-emphasis absolute top-0 left-0 w-full cursor-pointer truncate border-none bg-transparent p-0 align-top text-xl focus:outline-none focus:ring-0"
+              "text-emphasis hover:text-default focus:text-emphasis absolute left-0 top-0 w-full cursor-pointer truncate border-none bg-transparent p-0 align-top text-xl focus:outline-none focus:ring-0"
             )}
             onFocus={(e) => {
               setIsEditing(true);
diff --git a/apps/web/components/ui/InfoBadge.tsx b/apps/web/components/ui/InfoBadge.tsx
index fd7fb07f18..3fa1dc5b03 100644
--- a/apps/web/components/ui/InfoBadge.tsx
+++ b/apps/web/components/ui/InfoBadge.tsx
@@ -6,7 +6,7 @@ export default function InfoBadge({ content }: { content: string }) {
     <>
       <Tooltip side="top" content={content}>
         <span title={content}>
-          <Info className="text-subtle relative top-px left-1 right-1 mt-px h-4 w-4" />
+          <Info className="text-subtle relative left-1 right-1 top-px mt-px h-4 w-4" />
         </span>
       </Tooltip>
     </>
diff --git a/apps/web/components/ui/ModalContainer.tsx b/apps/web/components/ui/ModalContainer.tsx
index 91436493c5..09fe96db6d 100644
--- a/apps/web/components/ui/ModalContainer.tsx
+++ b/apps/web/components/ui/ModalContainer.tsx
@@ -14,7 +14,7 @@ export default function ModalContainer(
   }>
 ) {
   return (
-    <div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0">
+    <div className="flex min-h-screen items-end justify-center px-4 pb-20 pt-4 text-center sm:block sm:p-0">
       <Dialog open={props.isOpen} onOpenChange={props.onExit}>
         <DialogContent>
           <div
diff --git a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
index ece7d20f8d..db79b7b600 100644
--- a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
+++ b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
@@ -224,7 +224,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
             }}
             data-testid="username-input"
           />
-          <div className="absolute top-0 right-2 flex flex-row">
+          <div className="absolute right-2 top-0 flex flex-row">
             <span
               className={classNames(
                 "mx-2 py-2",
diff --git a/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx b/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
index 8dea096373..3b7541c7eb 100644
--- a/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
+++ b/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
@@ -80,7 +80,7 @@ const UsernameTextfield = (props: ICustomUsernameProps & Partial<React.Component
 
   const ActionButtons = () => {
     return usernameIsAvailable && currentUsername !== inputUsernameValue ? (
-      <div className="ms-2 me-2 flex flex-row space-x-2">
+      <div className="me-2 ms-2 flex flex-row space-x-2">
         <Button
           type="button"
           onClick={() => setOpenDialogSaveUsername(true)}
diff --git a/apps/web/lib/core/i18n/i18n.utils.ts b/apps/web/lib/core/i18n/i18n.utils.ts
index 22beb2b490..be6ff90a25 100644
--- a/apps/web/lib/core/i18n/i18n.utils.ts
+++ b/apps/web/lib/core/i18n/i18n.utils.ts
@@ -5,7 +5,8 @@ import type { GetServerSidePropsContext } from "next";
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import type { Maybe } from "@calcom/trpc/server";
 
-import { i18n } from "../../../next-i18next.config";
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { i18n } = require("@calcom/config/next-i18next.config");
 
 export function getLocaleFromHeaders(req: IncomingMessage): string {
   let preferredLocale: string | null | undefined;
diff --git a/apps/web/package.json b/apps/web/package.json
index 5475be77af..8abd3f4df5 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -48,7 +48,7 @@
     "@radix-ui/react-avatar": "^1.0.0",
     "@radix-ui/react-collapsible": "^1.0.0",
     "@radix-ui/react-dialog": "^1.0.0",
-    "@radix-ui/react-dropdown-menu": "^1.0.0",
+    "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-id": "^1.0.0",
     "@radix-ui/react-popover": "^1.0.2",
     "@radix-ui/react-radio-group": "^1.0.0",
@@ -90,10 +90,10 @@
     "mime-types": "^2.1.35",
     "next": "^13.4.6",
     "next-auth": "^4.20.1",
-    "next-axiom": "^0.16.0",
+    "next-axiom": "^0.17.0",
     "next-collect": "^0.2.1",
-    "next-i18next": "^11.3.0",
-    "next-seo": "^4.26.0",
+    "next-i18next": "^13.2.2",
+    "next-seo": "^6.0.0",
     "next-themes": "^0.2.0",
     "nodemailer": "^6.7.8",
     "otplib": "^12.0.1",
@@ -109,7 +109,7 @@
     "react-hook-form": "^7.43.3",
     "react-hot-toast": "^2.3.0",
     "react-intl": "^5.25.1",
-    "react-live-chat-loader": "^2.7.3",
+    "react-live-chat-loader": "^2.8.1",
     "react-multi-email": "^0.5.3",
     "react-phone-input-2": "^2.15.1",
     "react-phone-number-input": "^3.2.7",
diff --git a/apps/web/pages/404.tsx b/apps/web/pages/404.tsx
index 5d461f1691..3a915fdb7b 100644
--- a/apps/web/pages/404.tsx
+++ b/apps/web/pages/404.tsx
@@ -59,7 +59,7 @@ export default function Custom404() {
           }}
         />
         <div className="min-h-screen bg-white px-4" data-testid="404-page">
-          <main className="mx-auto max-w-xl pt-16 pb-6 sm:pt-24">
+          <main className="mx-auto max-w-xl pb-6 pt-16 sm:pt-24">
             <div className="text-center">
               <p className="text-sm font-semibold uppercase tracking-wide text-black">{t("error_404")}</p>
               <h1 className="font-cal mt-2 text-4xl font-extrabold text-gray-900 sm:text-5xl">
@@ -91,7 +91,7 @@ export default function Custom404() {
         }}
       />
       <div className="bg-default min-h-screen px-4" data-testid="404-page">
-        <main className="mx-auto max-w-xl pt-16 pb-6 sm:pt-24">
+        <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>
diff --git a/apps/web/pages/500.tsx b/apps/web/pages/500.tsx
index 2b10ff9612..cd1af130e9 100644
--- a/apps/web/pages/500.tsx
+++ b/apps/web/pages/500.tsx
@@ -21,7 +21,7 @@ export default function Error500() {
       <div className="rtl: bg-default m-auto rounded-md p-10 text-right ltr:text-left">
         <h1 className="font-cal text-emphasis text-6xl">500</h1>
         <h2 className="text-emphasis mt-6 text-2xl font-medium">It&apos;s not you, it&apos;s us.</h2>
-        <p className="text-default mt-4 mb-6 max-w-2xl text-sm">
+        <p className="text-default mb-6 mt-4 max-w-2xl text-sm">
           Something went wrong on our end. Get in touch with our support team, and we’ll get it fixed right
           away for you.
         </p>
diff --git a/apps/web/pages/[user].tsx b/apps/web/pages/[user].tsx
index 8b42bb0d38..282c21b2b1 100644
--- a/apps/web/pages/[user].tsx
+++ b/apps/web/pages/[user].tsx
@@ -134,7 +134,7 @@ export function UserPage(props: UserPageProps) {
           className={classNames(
             shouldAlignCentrally ? "mx-auto" : "",
             isEmbed ? "border-booker border-booker-width  bg-default rounded-md border" : "",
-            "max-w-3xl py-24 px-4"
+            "max-w-3xl px-4 py-24"
           )}>
           {isSingleUser && ( // When we deal with a single user, not dynamic group
             <div className="mb-8 text-center">
diff --git a/apps/web/pages/auth/error.tsx b/apps/web/pages/auth/error.tsx
index 281969aec9..cfa30f288d 100644
--- a/apps/web/pages/auth/error.tsx
+++ b/apps/web/pages/auth/error.tsx
@@ -1,6 +1,7 @@
 import type { GetStaticPropsContext } from "next";
 import Link from "next/link";
 import { useRouter } from "next/router";
+import type { ReactElement } from "react";
 import z from "zod";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -21,7 +22,7 @@ export default function Error() {
   const router = useRouter();
   const { error } = querySchema.parse(router.query);
   const isTokenVerificationError = error?.toLowerCase() === "verification";
-  let errorMsg = <SkeletonText />;
+  let errorMsg: string | ReactElement = <SkeletonText />;
   if (router.isReady) {
     errorMsg = isTokenVerificationError ? t("token_invalid_expired") : t("error_during_login");
   }
diff --git a/apps/web/pages/availability/[schedule].tsx b/apps/web/pages/availability/[schedule].tsx
index 68cdcc9feb..91b030273b 100644
--- a/apps/web/pages/availability/[schedule].tsx
+++ b/apps/web/pages/availability/[schedule].tsx
@@ -254,7 +254,7 @@ export default function Availability() {
                 </ConfirmationDialogContent>
               </Dialog>
               <DropdownMenuSeparator />
-              <div className="flex h-9 flex-row items-center justify-between py-2 px-4 hover:bg-gray-100">
+              <div className="flex h-9 flex-row items-center justify-between px-4 py-2 hover:bg-gray-100">
                 <Skeleton
                   as={Label}
                   htmlFor="hiddenSwitch"
diff --git a/apps/web/pages/booking/[uid].tsx b/apps/web/pages/booking/[uid].tsx
index 029bc47f6a..b7d5c331a0 100644
--- a/apps/web/pages/booking/[uid].tsx
+++ b/apps/web/pages/booking/[uid].tsx
@@ -306,7 +306,7 @@ export default function Success(props: SuccessProps) {
         />
       )}
       {userIsOwner && !isEmbed && (
-        <div className="mt-2 ml-4 -mb-4">
+        <div className="-mb-4 ml-4 mt-2">
           <Link
             href={allRemainingBookings ? "/bookings/recurring" : "/bookings/upcoming"}
             className="hover:bg-subtle text-subtle hover:text-default mt-2 inline-flex px-1 py-2 text-sm dark:hover:bg-transparent">
@@ -321,7 +321,7 @@ export default function Success(props: SuccessProps) {
           <div
             className={classNames(
               shouldAlignCentrally ? "text-center" : "",
-              "flex items-end justify-center px-4 pt-4 pb-20  sm:block sm:p-0"
+              "flex items-end justify-center px-4 pb-20 pt-4  sm:block sm:p-0"
             )}>
             <div
               className={classNames("my-4 transition-opacity sm:my-0", isEmbed ? "" : " inset-0")}
@@ -330,7 +330,7 @@ export default function Success(props: SuccessProps) {
                 className={classNames(
                   "main inline-block transform overflow-hidden rounded-lg border sm:my-8 sm:max-w-xl",
                   !isBackgroundTransparent && " bg-default dark:bg-muted border-booker border-booker-width",
-                  "px-8 pt-5 pb-4 text-left align-bottom transition-all sm:w-full sm:py-8 sm:align-middle"
+                  "px-8 pb-4 pt-5 text-left align-bottom transition-all sm:w-full sm:py-8 sm:align-middle"
                 )}
                 role="dialog"
                 aria-modal="true"
@@ -356,7 +356,7 @@ export default function Success(props: SuccessProps) {
                   {needsConfirmation && !isCancelled && <Calendar className="text-emphasis h-5 w-5" />}
                   {isCancelled && <X className="h-5 w-5 text-red-600" />}
                 </div>
-                <div className="mt-6 mb-8 text-center last:mb-0">
+                <div className="mb-8 mt-6 text-center last:mb-0">
                   <h3
                     className="text-emphasis text-2xl font-semibold leading-6"
                     data-testid={isCancelled ? "cancelled-headline" : ""}
@@ -615,7 +615,7 @@ export default function Success(props: SuccessProps) {
                             className="border-subtle text-default mx-2 h-10 w-10 rounded-sm border px-3 py-2"
                             target="_blank">
                             <svg
-                              className="mr-1 -mt-1.5 inline-block h-4 w-4"
+                              className="-mt-1.5 mr-1 inline-block h-4 w-4"
                               fill="currentColor"
                               xmlns="http://www.w3.org/2000/svg"
                               viewBox="0 0 24 24">
@@ -642,7 +642,7 @@ export default function Success(props: SuccessProps) {
                             className="text-default border-subtle mx-2 h-10 w-10 rounded-sm border px-3 py-2"
                             target="_blank">
                             <svg
-                              className="mr-1 -mt-1.5 inline-block h-4 w-4"
+                              className="-mt-1.5 mr-1 inline-block h-4 w-4"
                               fill="currentColor"
                               xmlns="http://www.w3.org/2000/svg"
                               viewBox="0 0 24 24">
@@ -659,7 +659,7 @@ export default function Success(props: SuccessProps) {
                               fill="currentColor"
                               xmlns="http://www.w3.org/2000/svg"
                               viewBox="0 0 1000 1000"
-                              className="mr-1 -mt-1.5 inline-block h-4 w-4">
+                              className="-mt-1.5 mr-1 inline-block h-4 w-4">
                               <title>{t("other")}</title>
                               <path d="M971.3,154.9c0-34.7-28.2-62.9-62.9-62.9H611.7c-1.3,0-2.6,0.1-3.9,0.2V10L28.7,87.3v823.4L607.8,990v-84.6c1.3,0.1,2.6,0.2,3.9,0.2h296.7c34.7,0,62.9-28.2,62.9-62.9V154.9z M607.8,636.1h44.6v-50.6h-44.6v-21.9h44.6v-50.6h-44.6v-92h277.9v230.2c0,3.8-3.1,7-7,7H607.8V636.1z M117.9,644.7l-50.6-2.4V397.5l50.6-2.2V644.7z M288.6,607.3c17.6,0.6,37.3-2.8,49.1-7.2l9.1,48c-11,5.1-35.6,9.9-66.9,8.3c-85.4-4.3-127.5-60.7-127.5-132.6c0-86.2,57.8-136.7,133.2-140.1c30.3-1.3,53.7,4,64.3,9.2l-12.2,48.9c-12.1-4.9-28.8-9.2-49.5-8.6c-45.3,1.2-79.5,30.1-79.5,87.4C208.8,572.2,237.8,605.7,288.6,607.3z M455.5,665.2c-32.4-1.6-63.7-11.3-79.1-20.5l12.6-50.7c16.8,9.1,42.9,18.5,70.4,19.4c30.1,1,46.3-10.7,46.3-29.3c0-17.8-14-28.1-48.8-40.6c-46.9-16.4-76.8-41.7-76.8-81.5c0-46.6,39.3-84.1,106.8-87.1c33.3-1.5,58.3,4.2,76.5,11.2l-15.4,53.3c-12.1-5.3-33.5-12.8-62.3-12c-28.3,0.8-41.9,13.6-41.9,28.1c0,17.8,16.1,25.5,53.6,39c52.9,18.5,78.4,45.3,78.4,86.4C575.6,629.7,536.2,669.2,455.5,665.2z M935.3,842.7c0,14.9-12.1,27-27,27H611.7c-1.3,0-2.6-0.2-3.9-0.4V686.2h270.9c19.2,0,34.9-15.6,34.9-34.9V398.4c0-19.2-15.6-34.9-34.9-34.9h-47.1v-32.3H808v32.3h-44.8v-32.3h-22.7v32.3h-43.3v-32.3h-22.7v32.3H628v-32.3h-20.2v-203c1.31.2,2.6-0.4,3.9-0.4h296.7c14.9,0,27,12.1,27,27L935.3,842.7L935.3,842.7z" />
                             </svg>
diff --git a/apps/web/pages/event-types/index.tsx b/apps/web/pages/event-types/index.tsx
index f20ee65e83..2453b7248a 100644
--- a/apps/web/pages/event-types/index.tsx
+++ b/apps/web/pages/event-types/index.tsx
@@ -383,7 +383,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                 <div className="group flex w-full max-w-full items-center justify-between overflow-hidden px-4 py-4 sm:px-6">
                   {!(firstItem && firstItem.id === type.id) && (
                     <button
-                      className="bg-default text-muted hover:text-emphasis border-default hover:border-emphasis invisible absolute left-[5px] -mt-4 mb-4 -ml-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border p-1 transition-all group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex lg:left-[36px]"
+                      className="bg-default text-muted hover:text-emphasis border-default hover:border-emphasis invisible absolute left-[5px] -ml-4 -mt-4 mb-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border p-1 transition-all group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex lg:left-[36px]"
                       onClick={() => moveEventType(index, -1)}>
                       <ArrowUp className="h-5 w-5" />
                     </button>
@@ -391,7 +391,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
 
                   {!(lastItem && lastItem.id === type.id) && (
                     <button
-                      className="bg-default text-muted border-default hover:text-emphasis hover:border-emphasis invisible absolute left-[5px] mt-8 -ml-4 hidden h-6 w-6  scale-0 items-center justify-center rounded-md border p-1 transition-all  group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex lg:left-[36px]"
+                      className="bg-default text-muted border-default hover:text-emphasis hover:border-emphasis invisible absolute left-[5px] -ml-4 mt-8 hidden h-6 w-6  scale-0 items-center justify-center rounded-md border p-1 transition-all  group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex lg:left-[36px]"
                       onClick={() => moveEventType(index, 1)}>
                       <ArrowDown className="h-5 w-5" />
                     </button>
@@ -401,7 +401,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                     <div className="flex justify-between space-x-2 rtl:space-x-reverse">
                       {type.team && !isManagedEventType && (
                         <AvatarGroup
-                          className="relative top-1 right-3"
+                          className="relative right-3 top-1"
                           size="sm"
                           truncateAfter={4}
                           items={type.users.map(
@@ -415,7 +415,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                       )}
                       {isManagedEventType && (
                         <AvatarGroup
-                          className="relative top-1 right-3"
+                          className="relative right-3 top-1"
                           size="sm"
                           truncateAfter={4}
                           items={type.children
@@ -640,7 +640,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                           )}
                         <DropdownMenuSeparator />
                         {!isManagedEventType && (
-                          <div className="hover:bg-subtle flex h-9 cursor-pointer flex-row items-center justify-between py-2 px-4">
+                          <div className="hover:bg-subtle flex h-9 cursor-pointer flex-row items-center justify-between px-4 py-2">
                             <Skeleton
                               as={Label}
                               htmlFor="hiddenSwitch"
@@ -728,10 +728,10 @@ const EventTypeListHeading = ({
           {profile?.name || ""}
         </Link>
         {membershipCount && teamId && (
-          <span className="text-subtle ms-2 me-2 relative -top-px text-xs">
+          <span className="text-subtle relative -top-px me-2 ms-2 text-xs">
             <Link href={`/settings/teams/${teamId}/members`}>
               <Badge variant="gray">
-                <Users className="mr-1 -mt-px inline h-3 w-3" />
+                <Users className="-mt-px mr-1 inline h-3 w-3" />
                 {membershipCount}
               </Badge>
             </Link>
@@ -747,7 +747,7 @@ const EventTypeListHeading = ({
       </div>
       {!profile?.slug && !!teamId && (
         <button onClick={() => publishTeamMutation.mutate({ teamId })}>
-          <Badge variant="gray" className="mb-1 -ml-2">
+          <Badge variant="gray" className="-ml-2 mb-1">
             {t("upgrade")}
           </Badge>
         </button>
diff --git a/apps/web/pages/insights/index.tsx b/apps/web/pages/insights/index.tsx
index a2f9f4c1fe..0d4a7b8016 100644
--- a/apps/web/pages/insights/index.tsx
+++ b/apps/web/pages/insights/index.tsx
@@ -77,7 +77,7 @@ export default function InsightsPage() {
             <></>
           ) : (
             <FiltersProvider>
-              <div className="mb-8 mt-0 ml-auto flex w-full flex-wrap justify-between md:-mt-8">
+              <div className="mb-8 ml-auto mt-0 flex w-full flex-wrap justify-between md:-mt-8">
                 <Heading />
                 <Filters />
               </div>
diff --git a/apps/web/pages/maintenance.tsx b/apps/web/pages/maintenance.tsx
index a86e7e42cd..9d787ab453 100644
--- a/apps/web/pages/maintenance.tsx
+++ b/apps/web/pages/maintenance.tsx
@@ -19,7 +19,7 @@ export default function MaintenancePage() {
       </Head>
       <div className="bg-default m-auto rounded-md p-10 text-right ltr:text-left">
         <h1 className="text-emphasis text-2xl font-medium">{t("under_maintenance")}</h1>
-        <p className="text-default mt-4 mb-6 max-w-2xl text-sm">
+        <p className="text-default mb-6 mt-4 max-w-2xl text-sm">
           {t("under_maintenance_description", { appName: APP_NAME })}
         </p>
         <Button href={`${WEBSITE_URL}/support`}>{t("contact_support")}</Button>
diff --git a/apps/web/pages/settings/billing/index.tsx b/apps/web/pages/settings/billing/index.tsx
index 8cb08fee79..97fea524c1 100644
--- a/apps/web/pages/settings/billing/index.tsx
+++ b/apps/web/pages/settings/billing/index.tsx
@@ -25,7 +25,7 @@ const CtaRow = ({ title, description, className, children }: CtaRowProps) => {
           <h2 className="font-medium">{title}</h2>
           <p>{description}</p>
         </div>
-        <div className="flex-shrink-0 pt-3 sm:ml-auto sm:pt-0 sm:pl-3">{children}</div>
+        <div className="flex-shrink-0 pt-3 sm:ml-auto sm:pl-3 sm:pt-0">{children}</div>
       </section>
       <hr className="border-subtle" />
     </>
diff --git a/apps/web/pages/settings/developer/api-keys.tsx b/apps/web/pages/settings/developer/api-keys.tsx
index 3cadde85c5..f3093fa5e8 100644
--- a/apps/web/pages/settings/developer/api-keys.tsx
+++ b/apps/web/pages/settings/developer/api-keys.tsx
@@ -57,7 +57,7 @@ const ApiKeysView = () => {
           <div>
             {isLoading ? null : data?.length ? (
               <>
-                <div className="mt-6 mb-8 rounded-md border">
+                <div className="mb-8 mt-6 rounded-md border">
                   {data.map((apiKey, index) => (
                     <ApiKeyListItem
                       key={apiKey.id}
diff --git a/apps/web/pages/settings/my-account/appearance.tsx b/apps/web/pages/settings/my-account/appearance.tsx
index 102ec20346..1b2269824b 100644
--- a/apps/web/pages/settings/my-account/appearance.tsx
+++ b/apps/web/pages/settings/my-account/appearance.tsx
@@ -32,7 +32,7 @@ const SkeletonLoader = ({ title, description }: { title: string; description: st
   return (
     <SkeletonContainer>
       <Meta title={title} description={description} />
-      <div className="mt-6 mb-8 space-y-6">
+      <div className="mb-8 mt-6 space-y-6">
         <div className="flex items-center">
           <SkeletonButton className="mr-6 h-32 w-48 rounded-md p-5" />
           <SkeletonButton className="mr-6 h-32 w-48 rounded-md p-5" />
diff --git a/apps/web/pages/settings/my-account/calendars.tsx b/apps/web/pages/settings/my-account/calendars.tsx
index 063db71aa0..c63125a35b 100644
--- a/apps/web/pages/settings/my-account/calendars.tsx
+++ b/apps/web/pages/settings/my-account/calendars.tsx
@@ -34,7 +34,7 @@ import PageWrapper from "@components/PageWrapper";
 const SkeletonLoader = () => {
   return (
     <SkeletonContainer>
-      <div className="mt-6 mb-8 space-y-6">
+      <div className="mb-8 mt-6 space-y-6">
         <SkeletonText className="h-8 w-full" />
         <SkeletonText className="h-8 w-full" />
         <SkeletonText className="h-8 w-full" />
diff --git a/apps/web/pages/settings/my-account/conferencing.tsx b/apps/web/pages/settings/my-account/conferencing.tsx
index ca305a3230..4a46339c93 100644
--- a/apps/web/pages/settings/my-account/conferencing.tsx
+++ b/apps/web/pages/settings/my-account/conferencing.tsx
@@ -33,7 +33,7 @@ const SkeletonLoader = ({ title, description }: { title: string; description: st
   return (
     <SkeletonContainer>
       <Meta title={title} description={description} />
-      <div className="divide-subtle mt-6 mb-8 space-y-6">
+      <div className="divide-subtle mb-8 mt-6 space-y-6">
         <SkeletonText className="h-8 w-full" />
         <SkeletonText className="h-8 w-full" />
       </div>
diff --git a/apps/web/pages/settings/my-account/general.tsx b/apps/web/pages/settings/my-account/general.tsx
index 487da5ff5e..a386314e48 100644
--- a/apps/web/pages/settings/my-account/general.tsx
+++ b/apps/web/pages/settings/my-account/general.tsx
@@ -29,7 +29,7 @@ const SkeletonLoader = ({ title, description }: { title: string; description: st
   return (
     <SkeletonContainer>
       <Meta title={title} description={description} />
-      <div className="mt-6 mb-8 space-y-6">
+      <div className="mb-8 mt-6 space-y-6">
         <SkeletonText className="h-8 w-full" />
         <SkeletonText className="h-8 w-full" />
         <SkeletonText className="h-8 w-full" />
diff --git a/apps/web/pages/settings/my-account/profile.tsx b/apps/web/pages/settings/my-account/profile.tsx
index 5943d74d2f..c44b8d2279 100644
--- a/apps/web/pages/settings/my-account/profile.tsx
+++ b/apps/web/pages/settings/my-account/profile.tsx
@@ -48,7 +48,7 @@ const SkeletonLoader = ({ title, description }: { title: string; description: st
   return (
     <SkeletonContainer>
       <Meta title={title} description={description} />
-      <div className="mt-6 mb-8 space-y-6">
+      <div className="mb-8 mt-6 space-y-6">
         <div className="flex items-center">
           <SkeletonAvatar className="me-4 h-16 w-16 px-4" />
           <SkeletonButton className="h-6 w-32 rounded-md p-5" />
diff --git a/apps/web/pages/settings/security/two-factor-auth.tsx b/apps/web/pages/settings/security/two-factor-auth.tsx
index 7d50363eb8..08265930b6 100644
--- a/apps/web/pages/settings/security/two-factor-auth.tsx
+++ b/apps/web/pages/settings/security/two-factor-auth.tsx
@@ -12,7 +12,7 @@ import EnableTwoFactorModal from "@components/settings/EnableTwoFactorModal";
 const SkeletonLoader = () => {
   return (
     <SkeletonContainer>
-      <div className="mt-6 mb-8 space-y-6">
+      <div className="mb-8 mt-6 space-y-6">
         <div className="flex items-center">
           <SkeletonButton className="mr-6 h-8 w-20 rounded-md p-5" />
           <SkeletonText className="h-8 w-full" />
diff --git a/apps/web/pages/team/[slug].tsx b/apps/web/pages/team/[slug].tsx
index b5e19cb09d..a168a56c43 100644
--- a/apps/web/pages/team/[slug].tsx
+++ b/apps/web/pages/team/[slug].tsx
@@ -171,7 +171,7 @@ function TeamPage({ team, isUnpublished, markdownStrippedBio, isValidOrgDomain }
           profile: { name: `${team.name}`, image: getPlaceholderAvatar(team.logo, team.name) },
         }}
       />
-      <main className="dark:bg-darkgray-50 bg-subtle mx-auto max-w-3xl rounded-md px-4 pt-12 pb-12">
+      <main className="dark:bg-darkgray-50 bg-subtle mx-auto max-w-3xl rounded-md px-4 pb-12 pt-12">
         <div className="mx-auto mb-8 max-w-3xl text-center">
           <div className="relative">
             <Avatar
diff --git a/apps/web/pages/video/[uid].tsx b/apps/web/pages/video/[uid].tsx
index 9c03690c19..f08568e7a8 100644
--- a/apps/web/pages/video/[uid].tsx
+++ b/apps/web/pages/video/[uid].tsx
@@ -205,7 +205,7 @@ export function VideoMeetingInfo(props: VideoMeetingInfo) {
     <>
       <aside
         className={classNames(
-          "no-scrollbar fixed top-0 left-0 z-30 flex h-full w-64 transform justify-between overflow-x-hidden overflow-y-scroll transition-all duration-300 ease-in-out",
+          "no-scrollbar fixed left-0 top-0 z-30 flex h-full w-64 transform justify-between overflow-x-hidden overflow-y-scroll transition-all duration-300 ease-in-out",
           open ? "translate-x-0" : "-translate-x-[232px]"
         )}>
         <main className="prose-sm prose max-w-64 prose-a:text-white prose-h3:text-white prose-h3:font-cal scroll-bar scrollbar-track-w-20 w-full overflow-scroll overflow-x-hidden border-r border-gray-300/20 bg-black/80 p-4 text-white shadow-sm backdrop-blur-lg">
diff --git a/apps/web/pages/video/meeting-ended/[uid].tsx b/apps/web/pages/video/meeting-ended/[uid].tsx
index e89d8ec6a4..82e78f7895 100644
--- a/apps/web/pages/video/meeting-ended/[uid].tsx
+++ b/apps/web/pages/video/meeting-ended/[uid].tsx
@@ -19,13 +19,13 @@ export default function MeetingUnavailable(props: inferSSRProps<typeof getServer
       <HeadSeo title="Meeting Unavailable" description="Meeting Unavailable" />
       <main className="mx-auto my-24 max-w-3xl">
         <div className="fixed inset-0 z-50 overflow-y-auto">
-          <div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0">
+          <div className="flex min-h-screen items-end justify-center px-4 pb-20 pt-4 text-center sm:block sm:p-0">
             <div className="fixed inset-0 my-4 transition-opacity sm:my-0" aria-hidden="true">
               <span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">
                 &#8203;
               </span>
               <div
-                className="bg-default inline-block transform overflow-hidden rounded-lg px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6 sm:align-middle"
+                className="bg-default inline-block transform overflow-hidden rounded-lg px-4 pb-4 pt-5 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6 sm:align-middle"
                 role="dialog"
                 aria-modal="true"
                 aria-labelledby="modal-headline">
@@ -38,12 +38,12 @@ export default function MeetingUnavailable(props: inferSSRProps<typeof getServer
                       This meeting is in the past.
                     </h3>
                   </div>
-                  <div className="mt-4 border-t border-b py-4">
+                  <div className="mt-4 border-b border-t py-4">
                     <h2 className="font-cal text-default mb-2 text-center text-lg font-medium">
                       {props.booking.title}
                     </h2>
                     <p className="text-subtle text-center">
-                      <Calendar className="mr-1 -mt-1 inline-block h-4 w-4" />
+                      <Calendar className="-mt-1 mr-1 inline-block h-4 w-4" />
                       {dayjs(props.booking.startTime).format(detectBrowserTimeFormat + ", dddd DD MMMM YYYY")}
                     </p>
                   </div>
diff --git a/apps/web/pages/video/meeting-not-started/[uid].tsx b/apps/web/pages/video/meeting-not-started/[uid].tsx
index 21f793a9e8..ac8d777a69 100644
--- a/apps/web/pages/video/meeting-not-started/[uid].tsx
+++ b/apps/web/pages/video/meeting-not-started/[uid].tsx
@@ -23,7 +23,7 @@ export default function MeetingNotStarted(props: inferSSRProps<typeof getServerS
             <>
               <h2 className="mb-2 text-center font-medium">{props.booking.title}</h2>
               <p className="text-subtle text-center">
-                <Calendar className="mr-1 -mt-1 inline-block h-4 w-4" />
+                <Calendar className="-mt-1 mr-1 inline-block h-4 w-4" />
                 {dayjs(props.booking.startTime).format(detectBrowserTimeFormat + ", dddd DD MMMM YYYY")}
               </p>
             </>
diff --git a/apps/web/server/lib/ssg.ts b/apps/web/server/lib/ssg.ts
index 75f031efef..06d46c0f16 100644
--- a/apps/web/server/lib/ssg.ts
+++ b/apps/web/server/lib/ssg.ts
@@ -1,5 +1,4 @@
 import type { GetStaticPropsContext } from "next";
-import { i18n } from "next-i18next.config";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import superjson from "superjson";
 
@@ -7,6 +6,9 @@ import prisma from "@calcom/prisma";
 import { createProxySSGHelpers } from "@calcom/trpc/react/ssg";
 import { appRouter } from "@calcom/trpc/server/routers/_app";
 
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { i18n } = require("@calcom/config/next-i18next.config");
+
 /**
  * Initialize static site rendering tRPC helpers.
  * Provides a method to prefetch tRPC-queries in a `getStaticProps`-function.
diff --git a/package.json b/package.json
index 5a33322a2f..aba79f9caf 100644
--- a/package.json
+++ b/package.json
@@ -100,7 +100,7 @@
     "@apidevtools/json-schema-ref-parser": "9.0.9",
     "@types/node": "16.9.1",
     "@types/react": "18.0.26",
-    "@types/react-dom": "18.0.9"
+    "@types/react-dom": "^18.0.9"
   },
   "lint-staged": {
     "(apps|packages)/**/*.{js,ts,jsx,tsx}": [
diff --git a/packages/app-store/applecalendar/pages/setup/index.tsx b/packages/app-store/applecalendar/pages/setup/index.tsx
index 5306d4de52..3678a982a6 100644
--- a/packages/app-store/applecalendar/pages/setup/index.tsx
+++ b/packages/app-store/applecalendar/pages/setup/index.tsx
@@ -22,7 +22,7 @@ export default function AppleCalendarSetup() {
   return (
     <div className="bg-emphasis flex h-screen">
       <div className="bg-default m-auto rounded p-5 md:w-[560px] md:p-10">
-        <div className="flex flex-col space-y-5 md:flex-row md:space-y-0 md:space-x-5">
+        <div className="flex flex-col space-y-5 md:flex-row md:space-x-5 md:space-y-0">
           <div>
             {/* eslint-disable @next/next/no-img-element */}
             <img
diff --git a/packages/app-store/caldavcalendar/pages/setup/index.tsx b/packages/app-store/caldavcalendar/pages/setup/index.tsx
index bfef658de4..5e18e6619d 100644
--- a/packages/app-store/caldavcalendar/pages/setup/index.tsx
+++ b/packages/app-store/caldavcalendar/pages/setup/index.tsx
@@ -23,7 +23,7 @@ export default function CalDavCalendarSetup() {
   return (
     <div className="bg-emphasis flex h-screen">
       <div className="bg-default m-auto rounded p-5 md:w-[560px] md:p-10">
-        <div className="flex flex-col space-y-5 md:flex-row md:space-y-0 md:space-x-5">
+        <div className="flex flex-col space-y-5 md:flex-row md:space-x-5 md:space-y-0">
           <div>
             {/* eslint-disable @next/next/no-img-element */}
             <img
diff --git a/packages/app-store/closecom/pages/setup/index.tsx b/packages/app-store/closecom/pages/setup/index.tsx
index d1006cf378..9441819c6e 100644
--- a/packages/app-store/closecom/pages/setup/index.tsx
+++ b/packages/app-store/closecom/pages/setup/index.tsx
@@ -37,7 +37,7 @@ export default function CloseComSetup() {
   return (
     <div className="bg-emphasis flex h-screen">
       <div className="bg-default m-auto rounded p-5 md:w-[520px] md:p-10">
-        <div className="flex flex-col space-y-5 md:flex-row md:space-y-0 md:space-x-5">
+        <div className="flex flex-col space-y-5 md:flex-row md:space-x-5 md:space-y-0">
           <div>
             {/* eslint-disable @next/next/no-img-element */}
             <img
diff --git a/packages/app-store/components.tsx b/packages/app-store/components.tsx
index f0ccf42598..c7f2f8dc63 100644
--- a/packages/app-store/components.tsx
+++ b/packages/app-store/components.tsx
@@ -112,7 +112,7 @@ export const AppDependencyComponent = ({
   return (
     <div
       className={classNames(
-        "rounded-md py-3 px-4",
+        "rounded-md px-4 py-3",
         dependencyData && dependencyData.some((dependency) => !dependency.installed) ? "bg-info" : "bg-subtle"
       )}>
       {dependencyData &&
@@ -121,7 +121,7 @@ export const AppDependencyComponent = ({
             <div className="items-start space-x-2.5">
               <div className="flex items-start">
                 <div>
-                  <Check className="mt-1 mr-2 font-semibold" />
+                  <Check className="mr-2 mt-1 font-semibold" />
                 </div>
                 <div>
                   <span className="font-semibold">
@@ -144,7 +144,7 @@ export const AppDependencyComponent = ({
             <div className="items-start space-x-2.5">
               <div className="text-info flex items-start">
                 <div>
-                  <AlertCircle className="mt-1 mr-2 font-semibold" />
+                  <AlertCircle className="mr-2 mt-1 font-semibold" />
                 </div>
                 <div>
                   <span className="font-semibold">
diff --git a/packages/app-store/eightxeight/DESCRIPTION.md b/packages/app-store/eightxeight/DESCRIPTION.md
index 4831ab5fd2..6a6bc20178 100644
--- a/packages/app-store/eightxeight/DESCRIPTION.md
+++ b/packages/app-store/eightxeight/DESCRIPTION.md
@@ -5,8 +5,9 @@ items:
 ---
 
 {DESCRIPTION}
+
 - High definition video conferencing on any device for up to 500 participants
 - Rich content sharing and collaboration
 - Enterprise grade reliability and availability for a business of five or 50,000
 - 100% secured and encrypted
-- Copy your room link and start scheduling calls in 8x8
\ No newline at end of file
+- Copy your room link and start scheduling calls in 8x8
diff --git a/packages/app-store/exchangecalendar/pages/setup/index.tsx b/packages/app-store/exchangecalendar/pages/setup/index.tsx
index 32fd9ab9e7..f6c890cd44 100644
--- a/packages/app-store/exchangecalendar/pages/setup/index.tsx
+++ b/packages/app-store/exchangecalendar/pages/setup/index.tsx
@@ -60,7 +60,7 @@ export default function ExchangeSetup() {
     <>
       <div className="bg-emphasis flex h-screen">
         <div className="bg-default m-auto rounded p-5 md:w-[560px] md:p-10">
-          <div className="flex flex-col space-y-5 md:flex-row md:space-y-0 md:space-x-5">
+          <div className="flex flex-col space-y-5 md:flex-row md:space-x-5 md:space-y-0">
             <div>
               {/* eslint-disable @next/next/no-img-element */}
               <img
diff --git a/packages/app-store/giphy/components/SearchDialog.tsx b/packages/app-store/giphy/components/SearchDialog.tsx
index c2bf054c34..c472abee70 100644
--- a/packages/app-store/giphy/components/SearchDialog.tsx
+++ b/packages/app-store/giphy/components/SearchDialog.tsx
@@ -147,7 +147,7 @@ export const SearchDialog = (props: ISearchDialog) => {
           <div className="flex flex-col items-center space-x-2 space-y-2 pt-3 rtl:space-x-reverse">
             <div className="bg-subtle flex w-full items-center justify-center">
               {isLoading ? (
-                <div className="flex h-[200px] w-full items-center justify-center bg-gray-400 pt-3 pb-3">
+                <div className="flex h-[200px] w-full items-center justify-center bg-gray-400 pb-3 pt-3">
                   <svg
                     className={classNames("mx-4 h-5 w-5 animate-spin", "text-inverted dark:text-emphasis")}
                     xmlns="http://www.w3.org/2000/svg"
@@ -169,7 +169,7 @@ export const SearchDialog = (props: ISearchDialog) => {
                   </svg>
                 </div>
               ) : (
-                <img className="h-[200px] pt-3 pb-3" src={gifImage} alt={`Gif from Giphy for ${keyword}`} />
+                <img className="h-[200px] pb-3 pt-3" src={gifImage} alt={`Gif from Giphy for ${keyword}`} />
               )}
             </div>
           </div>
diff --git a/packages/app-store/googlecalendar/components/ExistingGoogleCal.tsx b/packages/app-store/googlecalendar/components/ExistingGoogleCal.tsx
index e5df408800..70f33f8942 100644
--- a/packages/app-store/googlecalendar/components/ExistingGoogleCal.tsx
+++ b/packages/app-store/googlecalendar/components/ExistingGoogleCal.tsx
@@ -8,11 +8,11 @@ const ExistingGoogleCal = ({ gCalInstalled, appName }: { gCalInstalled?: boolean
   const { t } = useLocale();
 
   return gCalInstalled ? (
-    <div className="bg-subtle rounded-md py-3 px-4">
+    <div className="bg-subtle rounded-md px-4 py-3">
       <div className="items-start space-x-2.5">
         <div className="flex items-start">
           <div>
-            <Check className="mt-1 mr-2 font-semibold" />
+            <Check className="mr-2 mt-1 font-semibold" />
           </div>
           <div>
             <span className="font-semibold">{t("google_calendar_is_connected")}</span>
@@ -26,11 +26,11 @@ const ExistingGoogleCal = ({ gCalInstalled, appName }: { gCalInstalled?: boolean
       </div>
     </div>
   ) : (
-    <div className="bg-info text-info rounded-md py-3 px-4">
+    <div className="bg-info text-info rounded-md px-4 py-3">
       <div className="items-start space-x-2.5">
         <div className="flex items-start">
           <div>
-            <AlertCircle className="mt-1 mr-2 font-semibold" />
+            <AlertCircle className="mr-2 mt-1 font-semibold" />
           </div>
           <div>
             <span className="font-semibold">{t("this_app_requires_google_calendar", { appName })}</span>
diff --git a/packages/app-store/jitsivideo/DESCRIPTION.md b/packages/app-store/jitsivideo/DESCRIPTION.md
index 596f97de6f..ee6231b3bb 100644
--- a/packages/app-store/jitsivideo/DESCRIPTION.md
+++ b/packages/app-store/jitsivideo/DESCRIPTION.md
@@ -3,4 +3,4 @@ items:
   - jitsi1.jpg
 ---
 
-Jitsi is a free open-source video conferencing software for web and mobile. Make a call, launch on your own servers, integrate into your app, and more.
\ No newline at end of file
+Jitsi is a free open-source video conferencing software for web and mobile. Make a call, launch on your own servers, integrate into your app, and more.
diff --git a/packages/app-store/mirotalk/DESCRIPTION.md b/packages/app-store/mirotalk/DESCRIPTION.md
index 40c651cd18..cc5bdecc91 100644
--- a/packages/app-store/mirotalk/DESCRIPTION.md
+++ b/packages/app-store/mirotalk/DESCRIPTION.md
@@ -5,5 +5,6 @@ items:
 ---
 
 {DESCRIPTION}
+
 - Copy your room link and start scheduling calls in Mirotalk.
-- Both SFU and P2P are supported.
\ No newline at end of file
+- Both SFU and P2P are supported.
diff --git a/packages/app-store/package.json b/packages/app-store/package.json
index 994ccc8a12..c4185db134 100644
--- a/packages/app-store/package.json
+++ b/packages/app-store/package.json
@@ -24,7 +24,8 @@
     "@calcom/ui": "*",
     "@calcom/zoomvideo": "*",
     "lodash": "^4.17.21",
-    "qs-stringify": "^1.2.1"
+    "qs-stringify": "^1.2.1",
+    "react-i18next": "^12.2.0"
   },
   "devDependencies": {
     "@calcom/types": "*"
diff --git a/packages/app-store/routing-forms/components/SingleForm.tsx b/packages/app-store/routing-forms/components/SingleForm.tsx
index bdcba4a232..f591575971 100644
--- a/packages/app-store/routing-forms/components/SingleForm.tsx
+++ b/packages/app-store/routing-forms/components/SingleForm.tsx
@@ -296,7 +296,7 @@ function SingleForm({ form, appUrl, Page }: SingleFormComponentProps) {
               <div className="flex">
                 <div>{form.name}</div>
                 {form.team && (
-                  <Badge className="mt-1 ml-4" variant="gray">
+                  <Badge className="ml-4 mt-1" variant="gray">
                     {form.team.name}
                   </Badge>
                 )}
diff --git a/packages/app-store/routing-forms/pages/reporting/[...appPages].tsx b/packages/app-store/routing-forms/pages/reporting/[...appPages].tsx
index 5fbdbf3bca..b92ab481d6 100644
--- a/packages/app-store/routing-forms/pages/reporting/[...appPages].tsx
+++ b/packages/app-store/routing-forms/pages/reporting/[...appPages].tsx
@@ -71,7 +71,7 @@ const Result = ({ formId, jsonLogicQuery }: { formId: string; jsonLogicQuery: Js
           {headers.current?.map((header, index) => (
             <th
               className={classNames(
-                "border-default border-b py-3 px-2  text-left text-base font-medium",
+                "border-default border-b px-2 py-3  text-left text-base font-medium",
                 index !== (headers.current?.length || 0) - 1 ? "border-r" : ""
               )}
               key={index}>
@@ -97,7 +97,7 @@ const Result = ({ formId, jsonLogicQuery }: { formId: string; jsonLogicQuery: Js
                     return (
                       <td
                         className={classNames(
-                          "border-default overflow-x-hidden py-3 px-2 text-left",
+                          "border-default overflow-x-hidden px-2 py-3 text-left",
                           isLastRow ? "" : "border-b",
                           isLastColumn ? "" : "border-r"
                         )}
diff --git a/packages/app-store/routing-forms/pages/route-builder/[...appPages].tsx b/packages/app-store/routing-forms/pages/route-builder/[...appPages].tsx
index b94a7e1a49..19d030b734 100644
--- a/packages/app-store/routing-forms/pages/route-builder/[...appPages].tsx
+++ b/packages/app-store/routing-forms/pages/route-builder/[...appPages].tsx
@@ -262,7 +262,7 @@ const Route = ({
 
             {((route.isFallback && hasRules(route)) || !route.isFallback) && (
               <>
-                <Divider className="mt-3 mb-6" />
+                <Divider className="mb-6 mt-3" />
                 <Query
                   {...config}
                   value={route.state.tree}
diff --git a/packages/app-store/sendgrid/pages/setup/index.tsx b/packages/app-store/sendgrid/pages/setup/index.tsx
index 0575763810..87d0986fb9 100644
--- a/packages/app-store/sendgrid/pages/setup/index.tsx
+++ b/packages/app-store/sendgrid/pages/setup/index.tsx
@@ -37,7 +37,7 @@ export default function SendgridSetup() {
   return (
     <div className="bg-emphasis flex h-screen">
       <div className="bg-default m-auto rounded p-5 md:w-[520px] md:p-10">
-        <div className="flex flex-col space-y-5 md:flex-row md:space-y-0 md:space-x-5">
+        <div className="flex flex-col space-y-5 md:flex-row md:space-x-5 md:space-y-0">
           <div>
             <img src="/api/app-store/sendgrid/logo.png" alt="Sendgrid" className="h-12 w-12 max-w-2xl" />
           </div>
diff --git a/packages/app-store/templates/general-app-settings/components/AppSettingsInterface.tsx b/packages/app-store/templates/general-app-settings/components/AppSettingsInterface.tsx
index 666f6eaeb7..b92ebb55a3 100644
--- a/packages/app-store/templates/general-app-settings/components/AppSettingsInterface.tsx
+++ b/packages/app-store/templates/general-app-settings/components/AppSettingsInterface.tsx
@@ -8,7 +8,7 @@ export default function AppSettings() {
   const [input, setInput] = useState("");
 
   return (
-    <div className="space-y-4 px-4 pt-4 pb-4 text-sm">
+    <div className="space-y-4 px-4 pb-4 pt-4 text-sm">
       <TextField
         placeholder="Some Input"
         value={input}
diff --git a/packages/app-store/typeform/pages/how-to-use/[...appPages].tsx b/packages/app-store/typeform/pages/how-to-use/[...appPages].tsx
index 6adf2a7543..01a8f3442c 100644
--- a/packages/app-store/typeform/pages/how-to-use/[...appPages].tsx
+++ b/packages/app-store/typeform/pages/how-to-use/[...appPages].tsx
@@ -15,7 +15,7 @@ export default function HowToUse() {
           </div>
           <div className="ml-5">
             <div className="text-md text-default">How to route a Typeform with Cal.com Routing</div>
-            <ol className="mt-5 mb-5 ml-5 list-decimal ltr:mr-5 rtl:ml-5">
+            <ol className="mb-5 ml-5 mt-5 list-decimal ltr:mr-5 rtl:ml-5">
               <li>
                 Make sure that you have{" "}
                 <Link href="/apps/routing-forms" className="text-subtle text-base">
diff --git a/packages/app-store/wipemycalother/components/confirmDialog.tsx b/packages/app-store/wipemycalother/components/confirmDialog.tsx
index 390268e2b3..b2dfb41ec0 100644
--- a/packages/app-store/wipemycalother/components/confirmDialog.tsx
+++ b/packages/app-store/wipemycalother/components/confirmDialog.tsx
@@ -92,7 +92,7 @@ export const ConfirmDialog = (props: IConfirmDialogWipe) => {
                 {initialDate.format(dateFormat)} - {endDate.format(dateFormat)}
               </strong>
             </p>
-            <p className="mt-6 mb-2 text-sm">Are you sure? This can&apos;t be undone</p>
+            <p className="mb-2 mt-6 text-sm">Are you sure? This can&apos;t be undone</p>
           </div>
         </div>
 
diff --git a/packages/app-store/zapier/pages/setup/index.tsx b/packages/app-store/zapier/pages/setup/index.tsx
index 34797e1c33..c332e435af 100644
--- a/packages/app-store/zapier/pages/setup/index.tsx
+++ b/packages/app-store/zapier/pages/setup/index.tsx
@@ -57,7 +57,7 @@ export default function ZapierSetup(props: IZapierSetupProps) {
               {!newApiKey ? (
                 <>
                   <div className="mt-1 text-xl">{t("generate_api_key")}:</div>
-                  <Button color="primary" onClick={() => createApiKey()} className="mt-4 mb-4">
+                  <Button color="primary" onClick={() => createApiKey()} className="mb-4 mt-4">
                     {t("generate_api_key")}
                   </Button>
                 </>
@@ -81,11 +81,11 @@ export default function ZapierSetup(props: IZapierSetupProps) {
                       </Button>
                     </Tooltip>
                   </div>
-                  <div className="text-default mt-2 mb-5 text-sm font-semibold">{t("copy_safe_api_key")}</div>
+                  <div className="text-default mb-5 mt-2 text-sm font-semibold">{t("copy_safe_api_key")}</div>
                 </>
               )}
 
-              <ol className="mt-5 mb-5 ml-5 list-decimal ltr:mr-5 rtl:ml-5">
+              <ol className="mb-5 ml-5 mt-5 list-decimal ltr:mr-5 rtl:ml-5">
                 {isCalDev && (
                   <li>
                     {t("go_to")}
@@ -109,7 +109,7 @@ export default function ZapierSetup(props: IZapierSetupProps) {
           </div>
         </div>
       ) : (
-        <div className="mt-5 ml-5">
+        <div className="ml-5 mt-5">
           <div>{t("install_zapier_app")}</div>
           <div className="mt-3">
             <Link href="/apps/zapier" passHref={true} legacyBehavior>
diff --git a/packages/app-store/zoho-bigin/README.md b/packages/app-store/zoho-bigin/README.md
index 11ddc9f3a2..72d80be8e6 100644
--- a/packages/app-store/zoho-bigin/README.md
+++ b/packages/app-store/zoho-bigin/README.md
@@ -1,9 +1,9 @@
 ### Obtaining Zoho Bigin Client ID and Secret
 
 1. Open [Zoho API Console](https://api-console.zoho.com/) and sign into your account, or create a new one.
-2. Click "ADD CLIENT" button top right and select "Server-based Applications". 
+2. Click "ADD CLIENT" button top right and select "Server-based Applications".
 3. Set the Redirect URL for OAuth `<Cal.com URL>/api/integrations/zoho-bigin/callback` replacing Cal.com URL with the URI at which your application runs.
 4. Go to tab "Client Secret" tab.
 5. Now copy the Client ID and Client Secret to your .env.appStore file into the `ZOHO_BIGIN_CLIENT_ID` and `ZOHO_BIGIN_CLIENT_SECRET` fields.
-6. In the "Settings" section check the "Multi-DC" option if you wish to use the same OAuth credentials for all data centers. 
+6. In the "Settings" section check the "Multi-DC" option if you wish to use the same OAuth credentials for all data centers.
 7. You're good to go. Now you can easily add Zoho Bigin from the Cal.com app store.
diff --git a/packages/atoms/package.json b/packages/atoms/package.json
index c67e31af19..11de78770e 100644
--- a/packages/atoms/package.json
+++ b/packages/atoms/package.json
@@ -11,11 +11,11 @@
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^15.0.1",
-    "@types/react": "^18.0.25",
+    "@types/react": "18.0.26",
     "@types/react-dom": "^18.0.9",
     "@vitejs/plugin-react": "^2.2.0",
     "rollup-plugin-node-builtins": "^2.1.2",
-    "typescript": "^4.9.3",
+    "typescript": "^4.9.4",
     "vite": "^4.1.2"
   },
   "main": "./index"
diff --git a/packages/config/package.json b/packages/config/package.json
index e7561183df..d5e92004df 100644
--- a/packages/config/package.json
+++ b/packages/config/package.json
@@ -31,7 +31,7 @@
     "prettier": "^2.8.6",
     "prettier-plugin-tailwindcss": "^0.2.5",
     "tailwind-scrollbar": "^2.0.1",
-    "tailwindcss": "^3.2.1",
+    "tailwindcss": "^3.3.1",
     "typescript": "^4.9.4"
   }
 }
diff --git a/packages/emails/package.json b/packages/emails/package.json
index 3ab4363bd4..8327255745 100644
--- a/packages/emails/package.json
+++ b/packages/emails/package.json
@@ -9,7 +9,7 @@
   "dependencies": {
     "@calcom/dayjs": "*",
     "@calcom/lib": "*",
-    "next-i18next": "^11.3.0",
+    "next-i18next": "^13.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rrule": "^2.7.1"
diff --git a/packages/embeds/README.md b/packages/embeds/README.md
index b02831d743..5af25a4846 100644
--- a/packages/embeds/README.md
+++ b/packages/embeds/README.md
@@ -8,9 +8,10 @@ This folder contains all the various flavours of embeds.
 Please see the respective folder READMEs for details on them.
 
 ## Publishing to NPM. It will soon be automated using changesets github action
+
 To publish the packages. Following steps should be followed. All commands are to be run at the root.
 
 1. `yarn changeset` -> Creates changelog files and adds summary to changelog. Select embed packages only here.
 2. `yarn changeset version` -> Bumps the versions as required
 3. Get the PR reviewed and merged
-4. `yarn publish-embed` -> Releases all packages. We can't use `yarn changeset publish` because it doesn't support workspace: prefix removal yet. See https://github.com/changesets/changesets/issues/432#issuecomment-1016365428
\ No newline at end of file
+4. `yarn publish-embed` -> Releases all packages. We can't use `yarn changeset publish` because it doesn't support workspace: prefix removal yet. See https://github.com/changesets/changesets/issues/432#issuecomment-1016365428
diff --git a/packages/embeds/embed-core/package.json b/packages/embeds/embed-core/package.json
index 895b3b327f..41ea214e5b 100644
--- a/packages/embeds/embed-core/package.json
+++ b/packages/embeds/embed-core/package.json
@@ -48,7 +48,7 @@
     "autoprefixer": "^10.4.12",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.18",
-    "tailwindcss": "^3.2.1",
+    "tailwindcss": "^3.3.1",
     "typescript": "^4.9.4",
     "vite": "^4.1.2"
   }
diff --git a/packages/embeds/embed-react/package.json b/packages/embeds/embed-react/package.json
index d1516cba50..60099cdc02 100644
--- a/packages/embeds/embed-react/package.json
+++ b/packages/embeds/embed-react/package.json
@@ -45,8 +45,8 @@
   "devDependencies": {
     "@playwright/test": "^1.31.2",
     "@types/react": "18.0.26",
-    "@types/react-dom": "18.0.9",
-    "@vitejs/plugin-react": "1.3.2",
+    "@types/react-dom": "^18.0.9",
+    "@vitejs/plugin-react": "^2.2.0",
     "eslint": "^8.34.0",
     "npm-run-all": "^4.1.5",
     "typescript": "^4.9.4",
diff --git a/packages/embeds/embed-react/test/packaged/README.md b/packages/embeds/embed-react/test/packaged/README.md
index 89a929b4e0..86089ec986 100644
--- a/packages/embeds/embed-react/test/packaged/README.md
+++ b/packages/embeds/embed-react/test/packaged/README.md
@@ -1,5 +1,6 @@
 # Packaged
 
 The tests in this file are run on the packaged code that is published to npm. The packaged code is different from the source code in atleast the following ways
+
 - Not all files go to packaged code.If package.json -> files field is specified then only the files that are specified there would be published. So, one might accidentally miss an important file that's available otherwise.
-- The packaged code doesn't have .ts files. Those files are actually converted to .js files and .d.ts files are generated separately for TypeScript support. It allows the package to work in both TypeScript and non TypeScript environments.
\ No newline at end of file
+- The packaged code doesn't have .ts files. Those files are actually converted to .js files and .d.ts files are generated separately for TypeScript support. It allows the package to work in both TypeScript and non TypeScript environments.
diff --git a/packages/features/apps/AdminAppsList.tsx b/packages/features/apps/AdminAppsList.tsx
index 210b1d9ce0..3289605a5a 100644
--- a/packages/features/apps/AdminAppsList.tsx
+++ b/packages/features/apps/AdminAppsList.tsx
@@ -333,7 +333,7 @@ export default AdminAppsList;
 const SkeletonLoader = () => {
   return (
     <SkeletonContainer className="w-[30rem] pr-10">
-      <div className="mt-6 mb-8 space-y-6">
+      <div className="mb-8 mt-6 space-y-6">
         <SkeletonText className="h-8 w-full" />
         <SkeletonText className="h-8 w-full" />
         <SkeletonText className="h-8 w-full" />
diff --git a/packages/features/bookings/Booker/Booker.tsx b/packages/features/bookings/Booker/Booker.tsx
index 5a9af6f9b0..6f226d4e77 100644
--- a/packages/features/bookings/Booker/Booker.tsx
+++ b/packages/features/bookings/Booker/Booker.tsx
@@ -138,7 +138,7 @@ const BookerComponent = ({
             <BookerSection
               area="header"
               className={classNames(
-                layout === BookerLayouts.MONTH_VIEW && "fixed top-3 right-3 z-10",
+                layout === BookerLayouts.MONTH_VIEW && "fixed right-3 top-3 z-10",
                 (layout === BookerLayouts.COLUMN_VIEW || layout === BookerLayouts.WEEK_VIEW) &&
                   "bg-muted sticky top-0 z-10"
               )}>
@@ -222,7 +222,7 @@ const BookerComponent = ({
         <m.span
           key="logo"
           className={classNames(
-            "relative -z-50 mt-auto mb-6 pt-6 [&_img]:h-[15px]",
+            "mb-6 mt-auto pt-6 [&_img]:h-[15px]",
             layout === BookerLayouts.MONTH_VIEW ? "block" : "hidden"
           )}>
           {!hideBranding ? <PoweredBy logoOnly /> : null}
diff --git a/packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx b/packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx
index 70a89d6bb8..8946d24485 100644
--- a/packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx
+++ b/packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx
@@ -1,11 +1,11 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import type { UseMutationResult } from "@tanstack/react-query";
 import { useMutation } from "@tanstack/react-query";
+import type { TFunction } from "next-i18next";
 import { useRouter } from "next/router";
 import { useMemo, useRef } from "react";
 import type { FieldError } from "react-hook-form";
 import { useForm } from "react-hook-form";
-import type { TFunction } from "react-i18next";
 import { z } from "zod";
 
 import type { EventLocationType } from "@calcom/app-store/locations";
diff --git a/packages/features/bookings/Booker/components/EventMeta.tsx b/packages/features/bookings/Booker/components/EventMeta.tsx
index bb41d541d4..21ed7d5c4a 100644
--- a/packages/features/bookings/Booker/components/EventMeta.tsx
+++ b/packages/features/bookings/Booker/components/EventMeta.tsx
@@ -85,7 +85,7 @@ export const EventMeta = () => {
               {bookerState === "booking" ? (
                 <>{timezone}</>
               ) : (
-                <span className="min-w-32 current-timezone before:bg-subtle -mt-[2px] flex h-6 max-w-full items-center justify-start before:absolute before:inset-0 before:left-[-30px] before:top-[-3px] before:bottom-[-3px] before:w-[calc(100%_+_35px)] before:rounded-md before:py-3 before:opacity-0 before:transition-opacity">
+                <span className="min-w-32 current-timezone before:bg-subtle -mt-[2px] flex h-6 max-w-full items-center justify-start before:absolute before:inset-0 before:bottom-[-3px] before:left-[-30px] before:top-[-3px] before:w-[calc(100%_+_35px)] before:rounded-md before:py-3 before:opacity-0 before:transition-opacity">
                   <TimezoneSelect
                     menuPosition="fixed"
                     classNames={{
diff --git a/packages/features/bookings/Booker/components/Header.tsx b/packages/features/bookings/Booker/components/Header.tsx
index c917a8a462..ed432d3c38 100644
--- a/packages/features/bookings/Booker/components/Header.tsx
+++ b/packages/features/bookings/Booker/components/Header.tsx
@@ -52,7 +52,7 @@ export function Header({
   }
 
   return (
-    <div className="border-subtle relative z-10 flex border-l border-b px-5 py-4">
+    <div className="border-subtle relative z-10 flex border-b border-l px-5 py-4">
       <div className="flex items-center gap-3">
         <h3 className="min-w-[150px] text-base font-semibold leading-4">
           {selectedDate.format("MMM D")}-{selectedDate.add(extraDays, "days").format("D")},{" "}
@@ -77,7 +77,7 @@ export function Header({
       </div>
       <div className="ml-auto flex gap-2">
         <TimeFormatToggle />
-        <div className="fixed top-4 right-4">
+        <div className="fixed right-4 top-4">
           <LayoutToggleWithData />
         </div>
         {/*
diff --git a/packages/features/bookings/components/event-meta/Locations.tsx b/packages/features/bookings/components/event-meta/Locations.tsx
index 2c5db9177b..2e6259c899 100644
--- a/packages/features/bookings/components/event-meta/Locations.tsx
+++ b/packages/features/bookings/components/event-meta/Locations.tsx
@@ -19,7 +19,7 @@ export const EventLocations = ({ event }: { event: PublicEvent }) => {
       {locations.length > 1 && (
         <div
           key={locations[0].type}
-          className="before:bg-subtle relative before:pointer-events-none before:absolute before:inset-0 before:left-[-30px] before:top-[-5px] before:bottom-[-5px] before:w-[calc(100%_+_35px)] before:rounded-md before:py-3 before:opacity-0 before:transition-opacity hover:before:opacity-100">
+          className="before:bg-subtle relative before:pointer-events-none before:absolute before:inset-0 before:bottom-[-5px] before:left-[-30px] before:top-[-5px] before:w-[calc(100%_+_35px)] before:rounded-md before:py-3 before:opacity-0 before:transition-opacity hover:before:opacity-100">
           <Tooltip
             content={
               <>
diff --git a/packages/features/bookings/components/event-meta/Occurences.tsx b/packages/features/bookings/components/event-meta/Occurences.tsx
index 2dbf758e8b..594529c74d 100644
--- a/packages/features/bookings/components/event-meta/Occurences.tsx
+++ b/packages/features/bookings/components/event-meta/Occurences.tsx
@@ -59,7 +59,7 @@ export const EventOccurences = ({ event }: { event: PublicEvent }) => {
       {getRecurringFreq({ t, recurringEvent: event.recurringEvent })}
       <br />
       <Input
-        className="my-1 mr-3 inline-flex h-[26px] w-[46px] py-0 px-1"
+        className="my-1 mr-3 inline-flex h-[26px] w-[46px] px-1 py-0"
         type="number"
         defaultValue={event.recurringEvent.count}
         onChange={(event) => {
diff --git a/packages/features/calendars/DatePicker.tsx b/packages/features/calendars/DatePicker.tsx
index 2eb267b51a..5d201f0209 100644
--- a/packages/features/calendars/DatePicker.tsx
+++ b/packages/features/calendars/DatePicker.tsx
@@ -51,7 +51,7 @@ export const Day = ({
       type="button"
       style={disabled ? { ...disabledDateButtonEmbedStyles } : { ...enabledDateButtonEmbedStyles }}
       className={classNames(
-        "disabled:text-bookinglighter absolute top-0 left-0 right-0 bottom-0 mx-auto w-full rounded-md border-2 border-transparent text-center text-sm font-medium disabled:cursor-default disabled:border-transparent disabled:font-light ",
+        "disabled:text-bookinglighter absolute bottom-0 left-0 right-0 top-0 mx-auto w-full rounded-md border-2 border-transparent text-center text-sm font-medium disabled:cursor-default disabled:border-transparent disabled:font-light ",
         active
           ? "bg-brand-default text-brand"
           : !disabled
@@ -64,7 +64,7 @@ export const Day = ({
       {...props}>
       {date.date()}
       {date.isToday() && (
-        <span className="absolute left-1/2 top-1/2 flex h-[5px] w-[5px] translate-y-[8px] -translate-x-1/2 items-center justify-center rounded-full bg-white align-middle sm:translate-y-[12px]">
+        <span className="absolute left-1/2 top-1/2 flex h-[5px] w-[5px] -translate-x-1/2 translate-y-[8px] items-center justify-center rounded-full bg-white align-middle sm:translate-y-[12px]">
           <span className="sr-only">{t("today")}</span>
         </span>
       )}
@@ -82,7 +82,7 @@ const NoAvailabilityOverlay = ({
   const { t } = useLocale();
 
   return (
-    <div className=" bg-muted border-subtle absolute top-40 left-1/2 -mt-10 w-max -translate-x-1/2 -translate-y-1/2 transform rounded-md border p-8 shadow-sm">
+    <div className=" bg-muted border-subtle absolute left-1/2 top-40 -mt-10 w-max -translate-x-1/2 -translate-y-1/2 transform rounded-md border p-8 shadow-sm">
       <h4 className="text-emphasis  mb-4 font-medium">{t("no_availability_in_month", { month: month })}</h4>
       <Button onClick={nextMonthButton} color="primary" EndIcon={ArrowRight}>
         {t("view_next_month")}
@@ -146,7 +146,7 @@ const Days = ({
             <div key={`e-${idx}`} />
           ) : props.isLoading ? (
             <button
-              className="bg-muted text-muted absolute top-0 left-0 right-0 bottom-0 mx-auto flex w-full items-center justify-center rounded-sm border-transparent text-center font-medium opacity-50"
+              className="bg-muted text-muted absolute bottom-0 left-0 right-0 top-0 mx-auto flex w-full items-center justify-center rounded-sm border-transparent text-center font-medium opacity-50"
               key={`e-${idx}`}
               disabled>
               <SkeletonText className="h-4 w-5" />
@@ -235,7 +235,7 @@ const DatePicker = ({
           </div>
         </div>
       </div>
-      <div className="border-subtle mb-2 grid grid-cols-7 gap-4 border-t border-b text-center md:mb-0 md:border-0">
+      <div className="border-subtle mb-2 grid grid-cols-7 gap-4 border-b border-t text-center md:mb-0 md:border-0">
         {weekdayNames(locale, weekStart, "short").map((weekDay) => (
           <div key={weekDay} className="text-emphasis my-4 text-xs font-medium uppercase tracking-widest">
             {weekDay}
diff --git a/packages/features/calendars/DestinationCalendarSelector.tsx b/packages/features/calendars/DestinationCalendarSelector.tsx
index e4f0eeb27d..adb392affb 100644
--- a/packages/features/calendars/DestinationCalendarSelector.tsx
+++ b/packages/features/calendars/DestinationCalendarSelector.tsx
@@ -151,7 +151,7 @@ const DestinationCalendarSelector = ({
         }}
         isSearchable={false}
         className={classNames(
-          "border-default mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-sm text-sm"
+          "border-default mb-2 mt-1 block w-full min-w-0 flex-1 rounded-none rounded-r-sm text-sm"
         )}
         onChange={(newValue) => {
           setSelectedOption(newValue);
diff --git a/packages/features/calendars/weeklyview/components/Calendar.tsx b/packages/features/calendars/weeklyview/components/Calendar.tsx
index ebf007f568..a3a8a84c21 100644
--- a/packages/features/calendars/weeklyview/components/Calendar.tsx
+++ b/packages/features/calendars/weeklyview/components/Calendar.tsx
@@ -64,7 +64,7 @@ export function Calendar(props: CalendarComponentProps) {
               <CurrentTime />
               <div className="bg-default dark:bg-muted ring-muted sticky left-0 z-10 w-14 flex-none ring-1" />
               <div
-                className="grid flex-auto grid-cols-1 grid-rows-1 [--disabled-gradient-foreground:#E6E7EB] [--disabled-gradient-background:#F8F9FB] dark:[--disabled-gradient-background:#262626] dark:[--disabled-gradient-foreground:#393939]"
+                className="grid flex-auto grid-cols-1 grid-rows-1 [--disabled-gradient-background:#F8F9FB] [--disabled-gradient-foreground:#E6E7EB] dark:[--disabled-gradient-background:#262626] dark:[--disabled-gradient-foreground:#393939]"
                 style={{
                   backgroundColor: "var(--disabled-gradient-background)",
                   background:
diff --git a/packages/features/calendars/weeklyview/components/DateValues/index.tsx b/packages/features/calendars/weeklyview/components/DateValues/index.tsx
index 5a38b4568f..9f16ad6483 100644
--- a/packages/features/calendars/weeklyview/components/DateValues/index.tsx
+++ b/packages/features/calendars/weeklyview/components/DateValues/index.tsx
@@ -20,7 +20,7 @@ export function DateValues({ days, containerNavRef }: Props) {
             <button
               key={day.toString()}
               type="button"
-              className="flex flex-1 flex-col items-center pt-2 pb-3">
+              className="flex flex-1 flex-col items-center pb-3 pt-2">
               {day.format("dd")}{" "}
               <span
                 className={classNames(
diff --git a/packages/features/calendars/weeklyview/components/event/Empty.tsx b/packages/features/calendars/weeklyview/components/event/Empty.tsx
index 0c9d63a883..c043c66bc6 100644
--- a/packages/features/calendars/weeklyview/components/event/Empty.tsx
+++ b/packages/features/calendars/weeklyview/components/event/Empty.tsx
@@ -101,7 +101,7 @@ function Cell({ isDisabled, topOffsetMinutes, timeSlot }: CellProps) {
       {!isDisabled && hoverEventDuration !== 0 && (
         <div
           className={classNames(
-            "opacity-4 bg-subtle hover:bg-emphasis text-emphasis dark:border-emphasis absolute hidden rounded-[4px] border-[1px] border-gray-900 py-1 px-[6px] text-xs font-semibold leading-5 group-hover:flex group-hover:cursor-pointer",
+            "opacity-4 bg-subtle hover:bg-emphasis text-emphasis dark:border-emphasis absolute hidden rounded-[4px] border-[1px] border-gray-900 px-[6px] py-1 text-xs font-semibold leading-5 group-hover:flex group-hover:cursor-pointer",
             hoverEventDuration && hoverEventDuration > 15 && "items-start pt-3",
             hoverEventDuration && hoverEventDuration < 15 && "items-center"
           )}
diff --git a/packages/features/calendars/weeklyview/components/event/Event.tsx b/packages/features/calendars/weeklyview/components/event/Event.tsx
index 0205a57293..2b562798db 100644
--- a/packages/features/calendars/weeklyview/components/event/Event.tsx
+++ b/packages/features/calendars/weeklyview/components/event/Event.tsx
@@ -26,7 +26,7 @@ export function Event({
     <Component
       onClick={() => onEventClick?.(event)} // Note this is not the button event. It is the calendar event.
       className={classNames(
-        "group  flex h-full w-full flex-col overflow-y-auto rounded-[4px]  py-1 px-[6px] text-xs font-semibold  leading-5 ",
+        "group  flex h-full w-full flex-col overflow-y-auto rounded-[4px]  px-[6px] py-1 text-xs font-semibold  leading-5 ",
         event.status === "ACCEPTED" &&
           !selected &&
           "bg-subtle hover:bg-emphasis text-emphasis border-[1px] border-gray-900",
diff --git a/packages/features/calendars/weeklyview/components/horizontalLines/index.tsx b/packages/features/calendars/weeklyview/components/horizontalLines/index.tsx
index a1865c5079..50f3e6e6cb 100644
--- a/packages/features/calendars/weeklyview/components/horizontalLines/index.tsx
+++ b/packages/features/calendars/weeklyview/components/horizontalLines/index.tsx
@@ -25,14 +25,14 @@ export const HorizontalLines = ({
       <div className="row-end-1 h-[--calendar-offset-top] " ref={containerOffsetRef} />
       {hours.map((hour) => (
         <div key={`${id}-${hour.get("hour")}`}>
-          <div className="text-muted sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5">
+          <div className="text-muted sticky left-0 z-20 -ml-14 -mt-2.5 w-14 pr-2 text-right text-xs leading-5">
             {/* We need to force the minute to zero, because otherwise in ex GMT+5.5, it would show :30 minute times (but at the positino of :00) */}
             {hour.minute(0).format(timeFormat)}
           </div>
         </div>
       ))}
       <div key={`${id}-${finalHour}`}>
-        <div className="text-muted sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5">
+        <div className="text-muted sticky left-0 z-20 -ml-14 -mt-2.5 w-14 pr-2 text-right text-xs leading-5">
           {finalHour}
         </div>
       </div>
diff --git a/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx b/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx
index d89949cddf..9ffc40242e 100644
--- a/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx
+++ b/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx
@@ -107,11 +107,11 @@ export default function ApiKeyDialogForm({
             }
           }}
           className="space-y-4">
-          <div className="mt-1 mb-10">
+          <div className="mb-10 mt-1">
             <h2 className="font-semi-bold font-cal text-emphasis text-xl tracking-wide">
               {defaultValues ? t("edit_api_key") : t("create_api_key")}
             </h2>
-            <p className="text-subtle mt-1 mb-5 text-sm">{t("api_key_modal_subtitle")}</p>
+            <p className="text-subtle mb-5 mt-1 text-sm">{t("api_key_modal_subtitle")}</p>
           </div>
           <div>
             <Controller
diff --git a/packages/features/ee/managed-event-types/hooks/useLockedFieldsManager.tsx b/packages/features/ee/managed-event-types/hooks/useLockedFieldsManager.tsx
index 385f48a80d..14f5a4c165 100644
--- a/packages/features/ee/managed-event-types/hooks/useLockedFieldsManager.tsx
+++ b/packages/features/ee/managed-event-types/hooks/useLockedFieldsManager.tsx
@@ -10,7 +10,7 @@ import { Lock } from "@calcom/ui/components/icon";
 
 const Indicator = (label: string) => (
   <Tooltip content={<>{label}</>}>
-    <div className="bg ml-1 -mt-0.5 inline-flex h-4 w-4 rounded-sm p-0.5">
+    <div className="bg -mt-0.5 ml-1 inline-flex h-4 w-4 rounded-sm p-0.5">
       <Lock className="text-subtle hover:text-muted h-3 w-3" />
     </div>
   </Tooltip>
diff --git a/packages/features/ee/organizations/pages/settings/appearance.tsx b/packages/features/ee/organizations/pages/settings/appearance.tsx
index da5d46a302..3b9137d623 100644
--- a/packages/features/ee/organizations/pages/settings/appearance.tsx
+++ b/packages/features/ee/organizations/pages/settings/appearance.tsx
@@ -24,7 +24,7 @@ const SkeletonLoader = ({ title, description }: { title: string; description: st
   return (
     <SkeletonContainer>
       <Meta title={title} description={description} />
-      <div className="mt-6 mb-8 space-y-6">
+      <div className="mb-8 mt-6 space-y-6">
         <div className="flex items-center">
           <SkeletonButton className="mr-6 h-32 w-48 rounded-md p-5" />
           <SkeletonButton className="mr-6 h-32 w-48 rounded-md p-5" />
diff --git a/packages/features/ee/organizations/pages/settings/general.tsx b/packages/features/ee/organizations/pages/settings/general.tsx
index 31462cf9df..7a876561bd 100644
--- a/packages/features/ee/organizations/pages/settings/general.tsx
+++ b/packages/features/ee/organizations/pages/settings/general.tsx
@@ -24,7 +24,7 @@ const SkeletonLoader = ({ title, description }: { title: string; description: st
   return (
     <SkeletonContainer>
       <Meta title={title} description={description} />
-      <div className="mt-6 mb-8 space-y-6">
+      <div className="mb-8 mt-6 space-y-6">
         <SkeletonText className="h-8 w-full" />
         <SkeletonText className="h-8 w-full" />
         <SkeletonText className="h-8 w-full" />
diff --git a/packages/features/ee/payments/components/Payment.tsx b/packages/features/ee/payments/components/Payment.tsx
index 52147577f6..1c98bfaaf6 100644
--- a/packages/features/ee/payments/components/Payment.tsx
+++ b/packages/features/ee/payments/components/Payment.tsx
@@ -100,7 +100,7 @@ const PaymentForm = (props: Props) => {
         <PaymentElement onChange={() => setState({ status: "idle" })} />
       </div>
       {paymentOption === "HOLD" && (
-        <div className="bg-info mt-2 mb-5 rounded-md p-3">
+        <div className="bg-info mb-5 mt-2 rounded-md p-3">
           <Checkbox
             description={t("acknowledge_booking_no_show_fee", {
               amount: props.payment.amount / 100,
diff --git a/packages/features/ee/payments/components/PaymentPage.tsx b/packages/features/ee/payments/components/PaymentPage.tsx
index 62c73cddd2..5b33f03911 100644
--- a/packages/features/ee/payments/components/PaymentPage.tsx
+++ b/packages/features/ee/payments/components/PaymentPage.tsx
@@ -62,14 +62,14 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
       </Head>
       <main className="mx-auto max-w-3xl py-24">
         <div className="fixed inset-0 z-50 overflow-y-auto scroll-auto">
-          <div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0">
+          <div className="flex min-h-screen items-end justify-center px-4 pb-20 pt-4 text-center sm:block sm:p-0">
             <div className="inset-0 my-4 transition-opacity sm:my-0" aria-hidden="true">
               <span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">
                 &#8203;
               </span>
               <div
                 className={classNames(
-                  "main bg-default border-subtle inline-block transform overflow-hidden rounded-lg border px-8 pt-5 pb-4 text-left align-bottom transition-all  sm:w-full sm:max-w-lg sm:py-6 sm:align-middle",
+                  "main bg-default border-subtle inline-block transform overflow-hidden rounded-lg border px-8 pb-4 pt-5 text-left align-bottom transition-all  sm:w-full sm:max-w-lg sm:py-6 sm:align-middle",
                   isEmbed ? "" : "sm:my-8"
                 )}
                 role="dialog"
@@ -84,7 +84,7 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
                     <h3 className="text-emphasis text-2xl font-semibold leading-6" id="modal-headline">
                       {paymentAppData.paymentOption === "HOLD" ? t("complete_your_booking") : t("payment")}
                     </h3>
-                    <div className="text-default mt-4 grid grid-cols-3 border-t border-b py-4 text-left dark:border-gray-900 dark:text-gray-300">
+                    <div className="text-default mt-4 grid grid-cols-3 border-b border-t py-4 text-left dark:border-gray-900 dark:text-gray-300">
                       <div className="font-medium">{t("what")}</div>
                       <div className="col-span-2 mb-6">{eventName}</div>
                       <div className="font-medium">{t("when")}</div>
diff --git a/packages/features/ee/sso/components/OIDCConnection.tsx b/packages/features/ee/sso/components/OIDCConnection.tsx
index e33feb4736..fecd38f2ec 100644
--- a/packages/features/ee/sso/components/OIDCConnection.tsx
+++ b/packages/features/ee/sso/components/OIDCConnection.tsx
@@ -32,7 +32,7 @@ export default function OIDCConnection({
           </p>
         </div>
         {!connection && (
-          <div className="flex-shrink-0 pt-3 sm:ml-auto sm:pt-0 sm:pl-3">
+          <div className="flex-shrink-0 pt-3 sm:ml-auto sm:pl-3 sm:pt-0">
             <Button color="secondary" onClick={() => setOpenModal(true)}>
               {t("configure")}
             </Button>
@@ -92,7 +92,7 @@ const CreateConnectionDialog = ({
             <h2 className="font-semi-bold font-cal text-emphasis text-xl tracking-wide">
               {t("sso_oidc_configuration_title")}
             </h2>
-            <p className="text-subtle mt-1 mb-5 text-sm">{t("sso_oidc_configuration_description")}</p>
+            <p className="text-subtle mb-5 mt-1 text-sm">{t("sso_oidc_configuration_description")}</p>
           </div>
           <div className="space-y-5">
             <Controller
diff --git a/packages/features/ee/sso/components/SAMLConnection.tsx b/packages/features/ee/sso/components/SAMLConnection.tsx
index 84b3fdf923..9f0b447a18 100644
--- a/packages/features/ee/sso/components/SAMLConnection.tsx
+++ b/packages/features/ee/sso/components/SAMLConnection.tsx
@@ -30,7 +30,7 @@ export default function SAMLConnection({
           </p>
         </div>
         {!connection && (
-          <div className="flex-shrink-0 pt-3 sm:ml-auto sm:pt-0 sm:pl-3">
+          <div className="flex-shrink-0 pt-3 sm:ml-auto sm:pl-3 sm:pt-0">
             <Button color="secondary" onClick={() => setOpenModal(true)}>
               Configure
             </Button>
@@ -86,7 +86,7 @@ const CreateConnectionDialog = ({
             <h2 className="font-semi-bold font-cal text-emphasis text-xl tracking-wide">
               {t("sso_saml_configuration_title")}
             </h2>
-            <p className="text-subtle mt-1 mb-5 text-sm">{t("sso_saml_configuration_description")}</p>
+            <p className="text-subtle mb-5 mt-1 text-sm">{t("sso_saml_configuration_description")}</p>
           </div>
           <Controller
             control={form.control}
diff --git a/packages/features/ee/teams/components/InviteLinkSettingsModal.tsx b/packages/features/ee/teams/components/InviteLinkSettingsModal.tsx
index 851c044711..11f6ee0812 100644
--- a/packages/features/ee/teams/components/InviteLinkSettingsModal.tsx
+++ b/packages/features/ee/teams/components/InviteLinkSettingsModal.tsx
@@ -103,7 +103,7 @@ export default function InviteLinkSettingsModal(props: InvitationLinkSettingsMod
             <Button
               type="submit"
               color="primary"
-              className="ms-2 me-2"
+              className="me-2 ms-2"
               data-testid="invite-new-member-button">
               {t("save")}
             </Button>
diff --git a/packages/features/ee/teams/components/MemberChangeRoleModal.tsx b/packages/features/ee/teams/components/MemberChangeRoleModal.tsx
index 951cae6602..69f29d782e 100644
--- a/packages/features/ee/teams/components/MemberChangeRoleModal.tsx
+++ b/packages/features/ee/teams/components/MemberChangeRoleModal.tsx
@@ -101,7 +101,7 @@ export default function MemberChangeRoleModal(props: {
               </p>
             )}
             <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-              <Button type="submit" color="primary" className="ms-2 me-2">
+              <Button type="submit" color="primary" className="me-2 ms-2">
                 {t("save")}
               </Button>
               <Button type="button" color="secondary" onClick={props.onExit}>
diff --git a/packages/features/ee/teams/components/MemberInvitationModal.tsx b/packages/features/ee/teams/components/MemberInvitationModal.tsx
index 85985bc64a..21db9acde4 100644
--- a/packages/features/ee/teams/components/MemberInvitationModal.tsx
+++ b/packages/features/ee/teams/components/MemberInvitationModal.tsx
@@ -161,7 +161,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
         </div>
 
         <Form form={newMemberFormMethods} handleSubmit={(values) => props.onSubmit(values, resetFields)}>
-          <div className="mt-6 mb-10 space-y-6">
+          <div className="mb-10 mt-6 space-y-6">
             {/* Indivdual Invite */}
             {modalImportMode === "INDIVIDUAL" && (
               <Controller
@@ -283,7 +283,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
                 <Button
                   type="button"
                   color="minimal"
-                  className="ms-2 me-2"
+                  className="me-2 ms-2"
                   onClick={() => {
                     props.onSettingsOpen && props.onSettingsOpen();
                     newMemberFormMethods.reset();
@@ -295,8 +295,8 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
             </div>
           </div>
           <DialogFooter showDivider>
-            <div className= "relative mr-auto">
-            <Button
+            <div className="relative right-40">
+              <Button
                 type="button"
                 color="minimal"
                 variant="icon"
@@ -311,7 +311,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
                 {t("copy_invite_link")}
               </Button>
             </div>
-        
+
             <Button
               type="button"
               color="minimal"
@@ -324,7 +324,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
             <Button
               type="submit"
               color="primary"
-              className="ms-2 me-2"
+              className="me-2 ms-2"
               data-testid="invite-new-member-button">
               {t("send_invite")}
             </Button>
diff --git a/packages/features/ee/teams/components/SkeletonloaderTeamList.tsx b/packages/features/ee/teams/components/SkeletonloaderTeamList.tsx
index 69047c0afc..9c4d97ea7f 100644
--- a/packages/features/ee/teams/components/SkeletonloaderTeamList.tsx
+++ b/packages/features/ee/teams/components/SkeletonloaderTeamList.tsx
@@ -26,7 +26,7 @@ function SkeletonItem() {
           </div>
         </div>
       </div>
-      <div className="mt-4 hidden flex-shrink-0 pr-4 sm:mt-0 sm:ml-5 lg:flex">
+      <div className="mt-4 hidden flex-shrink-0 pr-4 sm:ml-5 sm:mt-0 lg:flex">
         <div className="flex justify-between space-x-2 rtl:space-x-reverse">
           <SkeletonText className="h-4 w-12" />
           <SkeletonText className="h-4 w-4" />
diff --git a/packages/features/ee/teams/components/TeamAvailabilityModal.tsx b/packages/features/ee/teams/components/TeamAvailabilityModal.tsx
index a4522a6ba1..0d9bb4b2a8 100644
--- a/packages/features/ee/teams/components/TeamAvailabilityModal.tsx
+++ b/packages/features/ee/teams/components/TeamAvailabilityModal.tsx
@@ -49,7 +49,7 @@ export default function TeamAvailabilityModal(props: Props) {
               </div>
             </div>
             <div>
-              <div className="text-brand-900 mt-4 mb-5 text-2xl font-semibold">{t("availability")}</div>
+              <div className="text-brand-900 mb-5 mt-4 text-2xl font-semibold">{t("availability")}</div>
               <DatePicker
                 minDate={new Date()}
                 date={selectedDate.toDate() || dayjs().toDate()}
diff --git a/packages/features/ee/teams/components/TeamListItem.tsx b/packages/features/ee/teams/components/TeamListItem.tsx
index cfe633c387..281b3484c5 100644
--- a/packages/features/ee/teams/components/TeamListItem.tsx
+++ b/packages/features/ee/teams/components/TeamListItem.tsx
@@ -200,7 +200,7 @@ export default function TeamListItem(props: Props) {
                   color="secondary"
                   data-testid={`accept-invitation-${team.id}`}
                   StartIcon={Check}
-                  className="ms-2 me-2"
+                  className="me-2 ms-2"
                   onClick={acceptInvite}>
                   {t("accept")}
                 </Button>
diff --git a/packages/features/ee/teams/pages/team-appearance-view.tsx b/packages/features/ee/teams/pages/team-appearance-view.tsx
index 8a5651d8f9..3bf3a0eda8 100644
--- a/packages/features/ee/teams/pages/team-appearance-view.tsx
+++ b/packages/features/ee/teams/pages/team-appearance-view.tsx
@@ -24,7 +24,7 @@ const SkeletonLoader = ({ title, description }: { title: string; description: st
   return (
     <SkeletonContainer>
       <Meta title={title} description={description} />
-      <div className="mt-6 mb-8 space-y-6">
+      <div className="mb-8 mt-6 space-y-6">
         <div className="flex items-center">
           <SkeletonButton className="mr-6 h-32 w-48 rounded-md p-5" />
           <SkeletonButton className="mr-6 h-32 w-48 rounded-md p-5" />
diff --git a/packages/features/ee/teams/pages/team-billing-view.tsx b/packages/features/ee/teams/pages/team-billing-view.tsx
index 598cd3eb2a..104e022e8d 100644
--- a/packages/features/ee/teams/pages/team-billing-view.tsx
+++ b/packages/features/ee/teams/pages/team-billing-view.tsx
@@ -20,7 +20,7 @@ const BillingView = () => {
           <h2 className="font-medium">{t("view_and_manage_billing_details")}</h2>
           <p>{t("view_and_edit_billing_details")}</p>
         </div>
-        <div className="flex-shrink-0 pt-3 sm:ml-auto sm:pt-0 sm:pl-3">
+        <div className="flex-shrink-0 pt-3 sm:ml-auto sm:pl-3 sm:pt-0">
           <Button color="primary" href={billingHref} target="_blank" EndIcon={ExternalLink}>
             {t("billing_portal")}
           </Button>
diff --git a/packages/features/ee/teams/pages/team-profile-view.tsx b/packages/features/ee/teams/pages/team-profile-view.tsx
index 438ef4512a..f9d52af683 100644
--- a/packages/features/ee/teams/pages/team-profile-view.tsx
+++ b/packages/features/ee/teams/pages/team-profile-view.tsx
@@ -250,7 +250,7 @@ const ProfileView = () => {
                 (team.metadata as Prisma.JsonObject)?.requestedSlug && (
                   <Button
                     color="secondary"
-                    className="mt-8 ml-2"
+                    className="ml-2 mt-8"
                     type="button"
                     onClick={() => {
                       publishMutation.mutate({ teamId: team.id });
diff --git a/packages/features/ee/users/pages/users-listing-view.tsx b/packages/features/ee/users/pages/users-listing-view.tsx
index 15dcb32021..5ddbc9d8e9 100644
--- a/packages/features/ee/users/pages/users-listing-view.tsx
+++ b/packages/features/ee/users/pages/users-listing-view.tsx
@@ -12,7 +12,7 @@ const DeploymentUsersListPage = () => {
         title="Users"
         description="A list of all the users in your account including their name, title, email and role."
         CTA={
-          <div className="mt-4 space-x-5 sm:mt-0 sm:ml-16 sm:flex-none">
+          <div className="mt-4 space-x-5 sm:ml-16 sm:mt-0 sm:flex-none">
             {/* TODO: Add import users functionality */}
             {/* <Button disabled>Import users</Button> */}
             <Button href="/settings/admin/users/add">Add user</Button>
diff --git a/packages/features/ee/workflows/components/AddActionDialog.tsx b/packages/features/ee/workflows/components/AddActionDialog.tsx
index a721abf46c..a981209a4a 100644
--- a/packages/features/ee/workflows/components/AddActionDialog.tsx
+++ b/packages/features/ee/workflows/components/AddActionDialog.tsx
@@ -168,7 +168,7 @@ export const AddActionDialog = (props: IAddActionDialog) => {
               {isPhoneNumberNeeded && (
                 <div className="mt-5 space-y-1">
                   <Label htmlFor="sendTo">{t("phone_number")}</Label>
-                  <div className="mt-1 mb-5">
+                  <div className="mb-5 mt-1">
                     <Controller
                       control={form.control}
                       name="sendTo"
@@ -200,7 +200,7 @@ export const AddActionDialog = (props: IAddActionDialog) => {
                     <div className="flex">
                       <Label>{t("sender_id")}</Label>
                       <Tooltip content={t("sender_id_info")}>
-                        <Info className="mr-1 mt-0.5 ml-2 h-4 w-4 text-gray-500" />
+                        <Info className="ml-2 mr-1 mt-0.5 h-4 w-4 text-gray-500" />
                       </Tooltip>
                     </div>
                     <Input
diff --git a/packages/features/ee/workflows/components/EmptyScreen.tsx b/packages/features/ee/workflows/components/EmptyScreen.tsx
index 3281ca47d7..d3a7bfaff1 100644
--- a/packages/features/ee/workflows/components/EmptyScreen.tsx
+++ b/packages/features/ee/workflows/components/EmptyScreen.tsx
@@ -24,7 +24,7 @@ function WorkflowExample(props: WorkflowExampleType) {
           </div>
         </div>
         <div className="m-auto w-full flex-grow items-center justify-center ">
-          <div className="line-clamp-2 text-semibold text-emphasis w-full text-sm font-medium">{text}</div>
+          <div className="text-semibold text-emphasis line-clamp-2 w-full text-sm font-medium">{text}</div>
         </div>
       </div>
     </div>
@@ -82,7 +82,7 @@ export default function EmptyScreen(props: {
         </div>
         <div className="max-w-[420px] text-center">
           <h2 className="text-semibold font-cal mt-6 text-xl dark:text-gray-300">{t("workflows")}</h2>
-          <p className="line-clamp-2 text-default mt-3 text-sm font-normal leading-6 dark:text-gray-300">
+          <p className="text-default mt-3 line-clamp-2 text-sm font-normal leading-6 dark:text-gray-300">
             {t("no_workflows_description")}
           </p>
           <div className="mt-8 ">
diff --git a/packages/features/ee/workflows/components/SkeletonLoaderEdit.tsx b/packages/features/ee/workflows/components/SkeletonLoaderEdit.tsx
index edb4308be9..8442588db4 100644
--- a/packages/features/ee/workflows/components/SkeletonLoaderEdit.tsx
+++ b/packages/features/ee/workflows/components/SkeletonLoaderEdit.tsx
@@ -3,14 +3,14 @@ import { SkeletonContainer, SkeletonText } from "@calcom/ui";
 function SkeletonLoader() {
   return (
     <SkeletonContainer>
-      <div className="mt-10 ml-2 md:flex">
+      <div className="ml-2 mt-10 md:flex">
         <div className="mr-6 flex flex-col md:flex-none">
           <SkeletonText className="h-4 w-28" />
-          <SkeletonText className="mt-2 mb-6 h-8 w-full md:w-64" />
+          <SkeletonText className="mb-6 mt-2 h-8 w-full md:w-64" />
           <SkeletonText className="h-4 w-28" />
           <SkeletonText className="mt-2 h-8 w-full md:w-64" />
           <SkeletonText className="mt-8 hidden h-0.5 w-full md:block" />
-          <SkeletonText className="mt-8 mb-6 h-8 w-40" />
+          <SkeletonText className="mb-6 mt-8 h-8 w-40" />
         </div>
         <div className="hidden flex-grow md:flex">
           <SkeletonText className="h-64 w-full" />
diff --git a/packages/features/ee/workflows/components/SkeletonLoaderEventWorkflowsTab.tsx b/packages/features/ee/workflows/components/SkeletonLoaderEventWorkflowsTab.tsx
index f7ef676b90..36c3321fb5 100644
--- a/packages/features/ee/workflows/components/SkeletonLoaderEventWorkflowsTab.tsx
+++ b/packages/features/ee/workflows/components/SkeletonLoaderEventWorkflowsTab.tsx
@@ -18,7 +18,7 @@ function SkeletonItem() {
         <div className="flex">
           <SkeletonAvatar className="h-10 w-10" />
 
-          <div className="mt-1 ml-4 flex flex-col space-y-1">
+          <div className="ml-4 mt-1 flex flex-col space-y-1">
             <SkeletonText className="h-5 w-20 sm:w-24" />
             <div className="flex">
               <SkeletonText className="h-4 w-16 ltr:mr-2 rtl:ml-2 sm:w-28" />
diff --git a/packages/features/ee/workflows/components/SkeletonLoaderList.tsx b/packages/features/ee/workflows/components/SkeletonLoaderList.tsx
index 43ad47c66f..10fc326445 100644
--- a/packages/features/ee/workflows/components/SkeletonLoaderList.tsx
+++ b/packages/features/ee/workflows/components/SkeletonLoaderList.tsx
@@ -21,9 +21,9 @@ function SkeletonItem() {
           <div className="flex flex-col space-y-2">
             <SkeletonText className="h-4 w-16 sm:w-24" />
             <div className="flex">
-              <Bell className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
+              <Bell className="mr-1.5 mt-0.5 inline h-4 w-4 text-gray-200" />
               <SkeletonText className="h-4 w-16 ltr:mr-2 rtl:ml-2 sm:w-28" />
-              <LinkIcon className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
+              <LinkIcon className="mr-1.5 mt-0.5 inline h-4 w-4 text-gray-200" />
               <SkeletonText className="h-4 w-28 sm:w-36" />
             </div>
           </div>
diff --git a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx b/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
index 7068432dd2..28849d8d81 100644
--- a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
+++ b/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
@@ -476,7 +476,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                         <PhoneInput
                           placeholder={t("phone_number")}
                           id={`steps.${step.stepNumber - 1}.sendTo`}
-                          className="min-w-fit sm:rounded-r-none sm:rounded-tl-md sm:rounded-bl-md"
+                          className="min-w-fit sm:rounded-r-none sm:rounded-bl-md sm:rounded-tl-md"
                           required
                           disabled={props.readOnly}
                           value={value}
@@ -494,7 +494,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                       color="secondary"
                       disabled={numberVerified || props.readOnly || false}
                       className={classNames(
-                        "-ml-[3px] h-[40px] min-w-fit sm:block sm:rounded-tl-none sm:rounded-bl-none",
+                        "-ml-[3px] h-[40px] min-w-fit sm:block sm:rounded-bl-none sm:rounded-tl-none",
                         numberVerified ? "hidden" : "mt-3 sm:mt-0"
                       )}
                       onClick={() =>
@@ -532,7 +532,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                           />
                           <Button
                             color="secondary"
-                            className="-ml-[3px] h-[38px] min-w-fit sm:block sm:rounded-tl-none sm:rounded-bl-none "
+                            className="-ml-[3px] h-[38px] min-w-fit sm:block sm:rounded-bl-none sm:rounded-tl-none "
                             disabled={verifyPhoneNumberMutation.isLoading || props.readOnly}
                             onClick={() => {
                               verifyPhoneNumberMutation.mutate({
@@ -562,7 +562,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                       <div className="flex">
                         <Label>{t("sender_id")}</Label>
                         <Tooltip content={t("sender_id_info")}>
-                          <Info className="mr-1 mt-0.5 ml-2 h-4 w-4 text-gray-500" />
+                          <Info className="ml-2 mr-1 mt-0.5 h-4 w-4 text-gray-500" />
                         </Tooltip>
                       </div>
                       <Input
@@ -885,7 +885,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
               <h1 className="w-full text-xl font-semibold ">{t("how_booking_questions_as_variables")}</h1>
               <div className="bg-muted-3 mb-7 mt-7 rounded-md sm:p-4">
                 <p className="test-sm font-medium">{t("format")}</p>
-                <ul className="text-emphasis mt-2 ml-5 list-disc">
+                <ul className="text-emphasis ml-5 mt-2 list-disc">
                   <li>{t("uppercase_for_letters")}</li>
                   <li>{t("replace_whitespaces_underscores")}</li>
                   <li>{t("ignore_special_characters_booking_questions")}</li>
diff --git a/packages/features/ee/workflows/pages/workflow.tsx b/packages/features/ee/workflows/pages/workflow.tsx
index 6e148ed848..fb5868e431 100644
--- a/packages/features/ee/workflows/pages/workflow.tsx
+++ b/packages/features/ee/workflows/pages/workflow.tsx
@@ -270,12 +270,12 @@ function WorkflowPage() {
                 {workflow && workflow.name ? workflow.name : "untitled"}
               </div>
               {workflow && workflow.team && (
-                <Badge className="mt-1 ml-4" variant="gray">
+                <Badge className="ml-4 mt-1" variant="gray">
                   {workflow.team.slug}
                 </Badge>
               )}
               {readOnly && (
-                <Badge className="mt-1 ml-4" variant="gray">
+                <Badge className="ml-4 mt-1" variant="gray">
                   {t("readonly")}
                 </Badge>
               )}
diff --git a/packages/features/eventtypes/components/BulkEditDefaultConferencingModal.tsx b/packages/features/eventtypes/components/BulkEditDefaultConferencingModal.tsx
index 99fd5a0543..3de43e692e 100644
--- a/packages/features/eventtypes/components/BulkEditDefaultConferencingModal.tsx
+++ b/packages/features/eventtypes/components/BulkEditDefaultConferencingModal.tsx
@@ -46,7 +46,7 @@ export function BulkEditDefaultConferencingModal(props: { open: boolean; setOpen
           }}>
           <div className="flex flex-col space-y-2">
             {data.eventTypes.length > 0 && (
-              <div className="flex items-center space-x-2 rounded-md py-2.5 px-3">
+              <div className="flex items-center space-x-2 rounded-md px-3 py-2.5">
                 <Checkbox
                   description={t("select_all")}
                   descriptionAsLabel
@@ -58,7 +58,7 @@ export function BulkEditDefaultConferencingModal(props: { open: boolean; setOpen
               </div>
             )}
             {data.eventTypes.map((eventType) => (
-              <div key={eventType.id} className="bg-muted flex items-center space-x-2 rounded-md py-2.5 px-3">
+              <div key={eventType.id} className="bg-muted flex items-center space-x-2 rounded-md px-3 py-2.5">
                 <Checkbox
                   description={eventType.title}
                   descriptionAsLabel
diff --git a/packages/features/eventtypes/components/CheckedTeamSelect.tsx b/packages/features/eventtypes/components/CheckedTeamSelect.tsx
index c5e680ae5c..6cdc1ff1d4 100644
--- a/packages/features/eventtypes/components/CheckedTeamSelect.tsx
+++ b/packages/features/eventtypes/components/CheckedTeamSelect.tsx
@@ -44,9 +44,9 @@ export const CheckedTeamSelect = ({
         {value.map((option, index) => (
           <li
             key={option.value}
-            className={`flex py-2 px-3 ${index === value.length - 1 ? "" : "border-subtle border-b"}`}>
+            className={`flex px-3 py-2 ${index === value.length - 1 ? "" : "border-subtle border-b"}`}>
             <Avatar size="sm" imageSrc={option.avatar} alt={option.label} />
-            <p className="text-emphasis ms-3 my-auto text-sm">{option.label}</p>
+            <p className="text-emphasis my-auto ms-3 text-sm">{option.label}</p>
             <X
               onClick={() => props.onChange(value.filter((item) => item.value !== option.value))}
               className="my-auto ml-auto h-4 w-4"
diff --git a/packages/features/eventtypes/components/CheckedUserSelect.tsx b/packages/features/eventtypes/components/CheckedUserSelect.tsx
index 6780d6744e..c2d94186e5 100644
--- a/packages/features/eventtypes/components/CheckedUserSelect.tsx
+++ b/packages/features/eventtypes/components/CheckedUserSelect.tsx
@@ -44,7 +44,7 @@ export const CheckedUserSelect = ({
                 return (
                   <li
                     key={option.value}
-                    className={`flex py-2 px-3 ${index === value.length - 1 ? "" : "border-b"}`}>
+                    className={`flex px-3 py-2 ${index === value.length - 1 ? "" : "border-b"}`}>
                     <Avatar size="sm" imageSrc={option.avatar} alt={option.label} />
                     <p className="my-auto ml-3 text-sm text-gray-900">{option.label}</p>
                     <X
diff --git a/packages/features/eventtypes/components/EmptyPage.tsx b/packages/features/eventtypes/components/EmptyPage.tsx
index 813a04b6aa..603b8afb81 100644
--- a/packages/features/eventtypes/components/EmptyPage.tsx
+++ b/packages/features/eventtypes/components/EmptyPage.tsx
@@ -31,7 +31,7 @@ function EmptyPage({ name }: { name: string }) {
         <SkeletonEventType />
         <SkeletonEventType />
       </div>
-      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform">
+      <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform">
         <h3 className="text-emphasis text-lg font-semibold">{t("no_event_types")} </h3>
         <h4 className="text-default text-sm leading-normal">{t("no_event_types_description", { name })}</h4>
       </div>
diff --git a/packages/features/eventtypes/components/MultiDropdownSelect.tsx b/packages/features/eventtypes/components/MultiDropdownSelect.tsx
index e770822109..c4a137c81b 100644
--- a/packages/features/eventtypes/components/MultiDropdownSelect.tsx
+++ b/packages/features/eventtypes/components/MultiDropdownSelect.tsx
@@ -22,7 +22,7 @@ const LimitedChipsContainer = <Option, IsMulti extends boolean, Group extends Gr
     <components.ValueContainer {...props}>
       {displayChips}
       {overflowCounter > 0 && (
-        <span className="bg-subtle text-default flex items-center justify-center rounded-md py-[5px] px-2 text-[14px] font-medium leading-4">
+        <span className="bg-subtle text-default flex items-center justify-center rounded-md px-2 py-[5px] text-[14px] font-medium leading-4">
           <>
             <Plus className="mr-1 inline h-3 w-3 stroke-[3px]" /> <span>{overflowCounter} more</span>
           </>
diff --git a/packages/features/flags/pages/flag-listing-view.tsx b/packages/features/flags/pages/flag-listing-view.tsx
index a320a1f03f..1bd0c3443e 100644
--- a/packages/features/flags/pages/flag-listing-view.tsx
+++ b/packages/features/flags/pages/flag-listing-view.tsx
@@ -8,7 +8,7 @@ import { FlagAdminList } from "../components/FlagAdminList";
 const SkeletonLoader = () => {
   return (
     <SkeletonContainer>
-      <div className="divide-subtle mt-6 mb-8 space-y-6">
+      <div className="divide-subtle mb-8 mt-6 space-y-6">
         <SkeletonText className="h-8 w-full" />
         <SkeletonText className="h-8 w-full" />
       </div>
diff --git a/packages/features/form-builder/Components.tsx b/packages/features/form-builder/Components.tsx
index 1b2d008765..3dc4ee50cb 100644
--- a/packages/features/form-builder/Components.tsx
+++ b/packages/features/form-builder/Components.tsx
@@ -255,7 +255,7 @@ export const Components: Record<BookingFieldType, Component> = {
                   value={option.value}
                   checked={value.includes(option.value)}
                 />
-                <span className="text-emphasis ms-2 me-2 text-sm">{option.label ?? ""}</span>
+                <span className="text-emphasis me-2 ms-2 text-sm">{option.label ?? ""}</span>
               </label>
             );
           })}
@@ -320,7 +320,7 @@ export const Components: Record<BookingFieldType, Component> = {
                         }}
                         checked={value?.value === option.value}
                       />
-                      <span className="text-emphasis ms-2 me-2 text-sm">{option.label ?? ""}</span>
+                      <span className="text-emphasis me-2 ms-2 text-sm">{option.label ?? ""}</span>
                     </label>
                   );
                 })
@@ -330,7 +330,7 @@ export const Components: Record<BookingFieldType, Component> = {
                   <Label>
                     {options[0].label}
                     {!readOnly && optionsInputs[options[0].value]?.required ? (
-                      <span className="text-default ml-1 mb-1 text-sm font-medium">*</span>
+                      <span className="text-default mb-1 ml-1 text-sm font-medium">*</span>
                     ) : null}
                   </Label>
                 </>
diff --git a/packages/features/form-builder/FormBuilder.tsx b/packages/features/form-builder/FormBuilder.tsx
index 9666e45335..204b267686 100644
--- a/packages/features/form-builder/FormBuilder.tsx
+++ b/packages/features/form-builder/FormBuilder.tsx
@@ -326,7 +326,7 @@ export const FormBuilder = function FormBuilder({
                     {index >= 1 && (
                       <button
                         type="button"
-                        className="bg-default text-muted hover:text-emphasis disabled:hover:text-muted border-default hover:border-emphasis invisible absolute -left-[12px] -mt-4 mb-4 -ml-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border p-1 transition-all hover:shadow disabled:hover:border-inherit disabled:hover:shadow-none group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex"
+                        className="bg-default text-muted hover:text-emphasis disabled:hover:text-muted border-default hover:border-emphasis invisible absolute -left-[12px] -ml-4 -mt-4 mb-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border p-1 transition-all hover:shadow disabled:hover:border-inherit disabled:hover:shadow-none group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex"
                         onClick={() => swap(index, index - 1)}>
                         <ArrowUp className="h-5 w-5" />
                       </button>
@@ -334,7 +334,7 @@ export const FormBuilder = function FormBuilder({
                     {index < fields.length - 1 && (
                       <button
                         type="button"
-                        className="bg-default text-muted hover:border-emphasis border-default hover:text-emphasis disabled:hover:text-muted invisible absolute -left-[12px] mt-8 -ml-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border p-1 transition-all hover:shadow disabled:hover:border-inherit disabled:hover:shadow-none group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex"
+                        className="bg-default text-muted hover:border-emphasis border-default hover:text-emphasis disabled:hover:text-muted invisible absolute -left-[12px] -ml-4 mt-8 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border p-1 transition-all hover:shadow disabled:hover:border-inherit disabled:hover:shadow-none group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex"
                         onClick={() => swap(index, index + 1)}>
                         <ArrowDown className="h-5 w-5" />
                       </button>
@@ -425,7 +425,7 @@ export const FormBuilder = function FormBuilder({
           })
         }>
         <DialogContent className="max-h-none p-0" data-testid="edit-field-dialog">
-          <div className="h-auto max-h-[85vh] overflow-auto px-8 pt-8 pb-7">
+          <div className="h-auto max-h-[85vh] overflow-auto px-8 pb-7 pt-8">
             <DialogHeader title={t("add_a_booking_question")} subtitle={t("booking_questions_description")} />
             <Form
               id="form-builder"
@@ -574,7 +574,7 @@ const WithLabel = ({
         <div className="mb-2 flex items-center">
           <Label className="!mb-0">
             <span>{field.label}</span>
-            <span className="text-emphasis ml-1 -mb-1 text-sm font-medium leading-none">
+            <span className="text-emphasis -mb-1 ml-1 text-sm font-medium leading-none">
               {!readOnly && field.required ? "*" : ""}
             </span>
           </Label>
diff --git a/packages/features/insights/components/TotalBookingUsersTable.tsx b/packages/features/insights/components/TotalBookingUsersTable.tsx
index 655f1790bf..e0633410bd 100644
--- a/packages/features/insights/components/TotalBookingUsersTable.tsx
+++ b/packages/features/insights/components/TotalBookingUsersTable.tsx
@@ -26,7 +26,7 @@ export const TotalBookingUsersTable = ({
                     className="m-2"
                     gravatarFallbackMd5={item.emailMd5}
                   />
-                  <p className="text-default my-auto mx-0">
+                  <p className="text-default mx-0 my-auto">
                     <strong>{item.user.name}</strong>
                   </p>
                 </TableCell>
diff --git a/packages/features/schedules/components/Schedule.tsx b/packages/features/schedules/components/Schedule.tsx
index 7045c1eb74..5c96f4139b 100644
--- a/packages/features/schedules/components/Schedule.tsx
+++ b/packages/features/schedules/components/Schedule.tsx
@@ -80,7 +80,7 @@ const ScheduleDay = <TFieldValues extends FieldValues>({
             {!!watchDayRange.length && <div className="hidden sm:block">{CopyButton}</div>}
           </div>
         ) : (
-          <SkeletonText className="mt-2.5 ml-1 h-6 w-48" />
+          <SkeletonText className="ml-1 mt-2.5 h-6 w-48" />
         )}
       </>
     </div>
diff --git a/packages/features/settings/ThemeLabel.tsx b/packages/features/settings/ThemeLabel.tsx
index 0983a174e5..3793b77e0b 100644
--- a/packages/features/settings/ThemeLabel.tsx
+++ b/packages/features/settings/ThemeLabel.tsx
@@ -11,11 +11,11 @@ export default function ThemeLabel(props: ThemeLabelProps) {
 
   return (
     <label
-      className="relative mb-4 flex-1 cursor-pointer text-center last:mb-0 last:mr-0 sm:mr-4 sm:mb-0"
+      className="relative mb-4 flex-1 cursor-pointer text-center last:mb-0 last:mr-0 sm:mb-0 sm:mr-4"
       htmlFor={`theme-${variant}`}
       data-testid={`theme-${variant}`}>
       <input
-        className="peer absolute top-8 left-8"
+        className="peer absolute left-8 top-8"
         type="radio"
         value={value}
         id={`theme-${variant}`}
diff --git a/packages/features/settings/layouts/SettingsLayout.tsx b/packages/features/settings/layouts/SettingsLayout.tsx
index 3c9e5fe920..8800439bda 100644
--- a/packages/features/settings/layouts/SettingsLayout.tsx
+++ b/packages/features/settings/layouts/SettingsLayout.tsx
@@ -167,7 +167,7 @@ const BackButtonInSidebar = ({ name }: { name: string }) => {
   return (
     <Link
       href="/"
-      className="hover:bg-subtle [&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis group-hover:text-default text-emphasis group my-6 flex h-6 max-h-6 w-full flex-row items-center rounded-md py-2 px-3 text-sm font-medium leading-4"
+      className="hover:bg-subtle [&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis group-hover:text-default text-emphasis group my-6 flex h-6 max-h-6 w-full flex-row items-center rounded-md px-3 py-2 text-sm font-medium leading-4"
       data-testid={`vertical-tab-${name}`}>
       <ArrowLeft className="h-4 w-4 stroke-[2px] ltr:mr-[10px] rtl:ml-[10px] rtl:rotate-180 md:mt-0" />
       <Skeleton title={name} as="p" className="max-w-36 min-h-4 truncate" loadingClassName="ms-3">
@@ -466,7 +466,7 @@ export default function SettingsLayout({
           {sideContainerOpen && (
             <button
               onClick={() => setSideContainerOpen(false)}
-              className="fixed top-0 left-0 z-10 h-full w-full bg-black/50">
+              className="fixed left-0 top-0 z-10 h-full w-full bg-black/50">
               <span className="sr-only">{t("hide_navigation")}</span>
             </button>
           )}
diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index d52a4cdc09..672760dac6 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -654,7 +654,7 @@ const NavigationItem: React.FC<{
           href={item.href}
           aria-label={t(item.name)}
           className={classNames(
-            "[&[aria-current='page']]:bg-emphasis  text-default group flex items-center rounded-md py-2 px-3 text-sm font-medium",
+            "[&[aria-current='page']]:bg-emphasis  text-default group flex items-center rounded-md px-3 py-2 text-sm font-medium",
             isChild
               ? `[&[aria-current='page']]:text-emphasis hidden h-8 pl-16 lg:flex lg:pl-11 [&[aria-current='page']]:bg-transparent ${
                   props.index === 0 ? "mt-0" : "mt-px"
@@ -907,7 +907,7 @@ function SideBar({ bannersHeight, user }: SideBarProps) {
                 target={item.target}
                 className={classNames(
                   "text-left",
-                  "[&[aria-current='page']]:bg-emphasis  text-default justify-right group flex items-center rounded-md py-2 px-3 text-sm font-medium",
+                  "[&[aria-current='page']]:bg-emphasis  text-default justify-right group flex items-center rounded-md px-3 py-2 text-sm font-medium",
                   "[&[aria-current='page']]:text-emphasis mt-0.5 w-full text-sm",
                   isLocaleReady ? "hover:bg-emphasis hover:text-emphasis" : "",
                   index === 0 && "mt-3"
@@ -1052,7 +1052,7 @@ function TopNav() {
     <>
       <nav
         style={isEmbed ? { display: "none" } : {}}
-        className="bg-muted border-subtle sticky top-0 z-40 flex w-full items-center justify-between border-b bg-opacity-50 py-1.5 px-4 backdrop-blur-lg sm:p-4 md:hidden">
+        className="bg-muted border-subtle sticky top-0 z-40 flex w-full items-center justify-between border-b bg-opacity-50 px-4 py-1.5 backdrop-blur-lg sm:p-4 md:hidden">
         <Link href="/event-types">
           <Logo />
         </Link>
diff --git a/packages/features/tips/Tips.tsx b/packages/features/tips/Tips.tsx
index c26cefd9a1..f313479574 100644
--- a/packages/features/tips/Tips.tsx
+++ b/packages/features/tips/Tips.tsx
@@ -138,7 +138,7 @@ export default function Tips() {
   const baseOriginalList = list.slice(0).reverse();
   return (
     <div
-      className="hidden pt-8 pb-4 lg:grid"
+      className="hidden pb-4 pt-8 lg:grid"
       /* ref={animationRef} */
       style={{
         gridTemplateColumns: "1fr",
diff --git a/packages/features/tips/UpgradeTip.tsx b/packages/features/tips/UpgradeTip.tsx
index b11e668eae..4340e22dc6 100644
--- a/packages/features/tips/UpgradeTip.tsx
+++ b/packages/features/tips/UpgradeTip.tsx
@@ -46,7 +46,7 @@ export function UpgradeTip({
         </picture>
         <div className="relative my-4 px-8 sm:px-14">
           <h1 className={classNames("font-cal text-3xl", dark && "text-inverted")}>{t(title)}</h1>
-          <p className={classNames("mt-4 mb-8 max-w-sm", dark ? "text-inverted" : "text-default")}>
+          <p className={classNames("mb-8 mt-4 max-w-sm", dark ? "text-inverted" : "text-default")}>
             {t(description)}
           </p>
           {buttons}
diff --git a/packages/features/webhooks/components/WebhookListSkeleton.tsx b/packages/features/webhooks/components/WebhookListSkeleton.tsx
index 024ecc120b..c4af5544d4 100644
--- a/packages/features/webhooks/components/WebhookListSkeleton.tsx
+++ b/packages/features/webhooks/components/WebhookListSkeleton.tsx
@@ -5,7 +5,7 @@ import WebhookListItemSkeleton from "./WebhookListItemSkeleton";
 export default function WebhookListSkeleton() {
   return (
     <SkeletonContainer>
-      <div className="border-subtle divide-subtle mt-6 mb-8 divide-y rounded-md border">
+      <div className="border-subtle divide-subtle mb-8 mt-6 divide-y rounded-md border">
         <WebhookListItemSkeleton />
         <WebhookListItemSkeleton />
         <WebhookListItemSkeleton />
diff --git a/packages/features/webhooks/pages/webhooks-view.tsx b/packages/features/webhooks/pages/webhooks-view.tsx
index 6777252f36..7cca44f188 100644
--- a/packages/features/webhooks/pages/webhooks-view.tsx
+++ b/packages/features/webhooks/pages/webhooks-view.tsx
@@ -143,7 +143,7 @@ const WebhooksList = ({ webhooksByViewer }: { webhooksByViewer: WebhooksByViewer
                     </div>
                   )}
                   <div className="flex flex-col" key={group.profile.slug}>
-                    <div className="border-subtle mt-3 mb-8 rounded-md border">
+                    <div className="border-subtle mb-8 mt-3 rounded-md border">
                       {group.webhooks.map((webhook, index) => (
                         <WebhookListItem
                           key={webhook.id}
diff --git a/packages/lib/package.json b/packages/lib/package.json
index 69090604da..4d4d39fc7f 100644
--- a/packages/lib/package.json
+++ b/packages/lib/package.json
@@ -15,12 +15,13 @@
     "@calcom/config": "*",
     "@calcom/dayjs": "*",
     "@sendgrid/client": "^7.7.0",
-    "@vercel/og": "^0.0.21",
+    "@vercel/og": "^0.5.0",
     "bcryptjs": "^2.4.3",
+    "i18next": "^23.2.3",
     "ical.js": "^1.4.0",
     "ics": "^2.37.0",
     "jimp": "^0.16.1",
-    "next-i18next": "^11.3.0",
+    "next-i18next": "^13.2.2",
     "react-hot-toast": "^2.3.0",
     "rrule": "^2.7.1",
     "tailwind-merge": "^1.8.1",
diff --git a/packages/lib/server/i18n.ts b/packages/lib/server/i18n.ts
index 19528ab7d0..b49658d07e 100644
--- a/packages/lib/server/i18n.ts
+++ b/packages/lib/server/i18n.ts
@@ -8,8 +8,8 @@ export const getTranslation = async (locale: string, ns: string) => {
     const _i18n = i18next.createInstance();
     _i18n.init({
       lng: locale,
-      resources: _nextI18Next.initialI18nStore,
-      fallbackLng: _nextI18Next.userConfig?.i18n.defaultLocale,
+      resources: _nextI18Next?.initialI18nStore,
+      fallbackLng: _nextI18Next?.userConfig?.i18n.defaultLocale,
     });
     return _i18n;
   };
diff --git a/packages/lib/test/builder.ts b/packages/lib/test/builder.ts
index 3b805019f0..8a909be107 100644
--- a/packages/lib/test/builder.ts
+++ b/packages/lib/test/builder.ts
@@ -1,5 +1,6 @@
 import { faker } from "@faker-js/faker";
 import type { Booking, EventType, Prisma, Webhook } from "@prisma/client";
+import type { TFunction } from "next-i18next";
 
 import { BookingStatus } from "@calcom/prisma/enums";
 import type { CalendarEvent, Person, VideoCallData } from "@calcom/types/Calendar";
@@ -23,7 +24,7 @@ export const buildPerson = (person?: Partial<Person>): Person => {
     id: faker.datatype.number(),
     language: {
       locale: faker.random.locale(),
-      translate: (key: string) => key,
+      translate: ((key: string) => key) as TFunction,
     },
     ...person,
   };
diff --git a/packages/prisma/schema.prisma b/packages/prisma/schema.prisma
index 7d3f40a00b..5b80e14e23 100644
--- a/packages/prisma/schema.prisma
+++ b/packages/prisma/schema.prisma
@@ -242,7 +242,7 @@ model User {
 }
 
 model Team {
-  id                  Int                @id @default(autoincrement())
+  id                  Int                     @id @default(autoincrement())
   /// @zod.min(1)
   name                String
   /// @zod.min(1)
@@ -251,27 +251,27 @@ model Team {
   appLogo             String?
   appIconLogo         String?
   bio                 String?
-  hideBranding        Boolean            @default(false)
-  hideBookATeamMember Boolean            @default(false)
+  hideBranding        Boolean                 @default(false)
+  hideBookATeamMember Boolean                 @default(false)
   members             Membership[]
   eventTypes          EventType[]
   workflows           Workflow[]
-  createdAt           DateTime           @default(now())
+  createdAt           DateTime                @default(now())
   /// @zod.custom(imports.teamMetadataSchema)
   metadata            Json?
   theme               String?
-  brandColor          String             @default("#292929")
-  darkBrandColor      String             @default("#fafafa")
+  brandColor          String                  @default("#292929")
+  darkBrandColor      String                  @default("#fafafa")
   verifiedNumbers     VerifiedNumber[]
   parentId            Int?
-  parent              Team?              @relation("organization", fields: [parentId], references: [id], onDelete: Cascade)
-  children            Team[]             @relation("organization")
-  orgUsers            User[]             @relation("scope")
+  parent              Team?                   @relation("organization", fields: [parentId], references: [id], onDelete: Cascade)
+  children            Team[]                  @relation("organization")
+  orgUsers            User[]                  @relation("scope")
   inviteToken         VerificationToken?
   webhooks            Webhook[]
   timeFormat          Int?
-  timeZone            String           @default("Europe/London")
-  weekStart           String           @default("Sunday")
+  timeZone            String                  @default("Europe/London")
+  weekStart           String                  @default("Sunday")
   routingForms        App_RoutingForms_Form[]
 
   @@unique([slug, parentId])
diff --git a/packages/ui/components/apps/AllApps.tsx b/packages/ui/components/apps/AllApps.tsx
index 579892048a..40800773e4 100644
--- a/packages/ui/components/apps/AllApps.tsx
+++ b/packages/ui/components/apps/AllApps.tsx
@@ -77,7 +77,7 @@ function CategoryTab({ selectedCategory, categories, searchText }: CategoryTabPr
             })}
       </h2>
       {leftVisible && (
-        <button onClick={handleLeft} className="absolute bottom-0 flex md:left-1/2 md:-top-1">
+        <button onClick={handleLeft} className="absolute bottom-0 flex md:-top-1 md:left-1/2">
           <div className="bg-default flex h-12 w-5 items-center justify-end">
             <ChevronLeft className="text-subtle h-4 w-4" />
           </div>
@@ -169,7 +169,7 @@ export function AllApps({ apps, searchText, categories }: AllAppsPropsType) {
       <CategoryTab selectedCategory={selectedCategory} searchText={searchText} categories={categories} />
       {filteredApps.length ? (
         <div
-          className="grid gap-3 lg:grid-cols-4 [@media(max-width:1270px)]:grid-cols-3 [@media(max-width:730px)]:grid-cols-1 [@media(max-width:500px)]:grid-cols-1"
+          className="grid gap-3 lg:grid-cols-4 [@media(max-width:1270px)]:grid-cols-3 [@media(max-width:500px)]:grid-cols-1 [@media(max-width:730px)]:grid-cols-1"
           ref={appsContainerRef}>
           {filteredApps.map((app) => (
             <AppCard key={app.name} app={app} searchText={searchText} credentials={app.credentials} />
diff --git a/packages/ui/components/apps/SkeletonLoader.tsx b/packages/ui/components/apps/SkeletonLoader.tsx
index 65e5184349..31165686a9 100644
--- a/packages/ui/components/apps/SkeletonLoader.tsx
+++ b/packages/ui/components/apps/SkeletonLoader.tsx
@@ -41,7 +41,7 @@ function SkeletonItem() {
           </div>
         </div>
       </div>
-      <div className="mt-4 hidden flex-shrink-0 sm:mt-0 sm:ml-5 lg:flex">
+      <div className="mt-4 hidden flex-shrink-0 sm:ml-5 sm:mt-0 lg:flex">
         <div className="flex justify-between space-x-2 rtl:space-x-reverse">
           <SkeletonText className="h-11 w-32" />
         </div>
diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx
index cb99de3ad6..1c39848a17 100644
--- a/packages/ui/components/button/Button.tsx
+++ b/packages/ui/components/button/Button.tsx
@@ -196,7 +196,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
         <>
           {variant === "fab" ? (
             <>
-              <StartIcon className="hidden h-4 w-4 stroke-[1.5px] ltr:mr-2 ltr:-ml-1 rtl:-mr-1 rtl:ml-2 md:inline-flex" />
+              <StartIcon className="hidden h-4 w-4 stroke-[1.5px] ltr:-ml-1 ltr:mr-2 rtl:-mr-1 rtl:ml-2 md:inline-flex" />
               <Plus className="inline h-6 w-6 md:hidden" />
             </>
           ) : (
@@ -211,7 +211,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
       )}
       {variant === "fab" ? <span className="hidden md:inline">{props.children}</span> : props.children}
       {loading && (
-        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform">
+        <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform">
           <svg
             className={classNames(
               "mx-4 h-5 w-5 animate-spin",
@@ -233,7 +233,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
         <>
           {variant === "fab" ? (
             <>
-              <EndIcon className="ms-2 me-2 -mr-1 hidden h-5 w-5 md:inline" />
+              <EndIcon className="-mr-1 me-2 ms-2 hidden h-5 w-5 md:inline" />
               <Plus className="inline h-6 w-6 md:hidden" />
             </>
           ) : (
@@ -241,7 +241,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
               className={classNames(
                 "inline-flex",
                 variant === "icon" && "h-4 w-4",
-                variant === "button" && "h-4 w-4 stroke-[1.5px] ltr:ml-2 ltr:-mr-1 rtl:mr-2 rtl:-ml-1"
+                variant === "button" && "h-4 w-4 stroke-[1.5px] ltr:-mr-1 ltr:ml-2 rtl:-ml-1 rtl:mr-2"
               )}
             />
           )}
diff --git a/packages/ui/components/buttonGroup/ButtonGroup.tsx b/packages/ui/components/buttonGroup/ButtonGroup.tsx
index 1401d2a4fd..a1ffe211d5 100644
--- a/packages/ui/components/buttonGroup/ButtonGroup.tsx
+++ b/packages/ui/components/buttonGroup/ButtonGroup.tsx
@@ -21,7 +21,7 @@ export function ButtonGroup({ children, combined = false, containerProps }: Prop
         "flex",
         !combined
           ? "space-x-2 rtl:space-x-reverse"
-          : "[&_a]:rounded-none ltr:[&>*:first-child]:ml-0 ltr:[&>*:first-child]:rounded-l-md ltr:[&>*:first-child]:border-l rtl:[&>*:first-child]:rounded-r-md rtl:[&>*:first-child]:border-r ltr:[&>*:last-child]:rounded-r-md rtl:[&>*:last-child]:rounded-l-md [&_button]:rounded-none [&>a]:-ml-[1px] hover:[&>a]:z-[1] [&>button]:-ml-[1px] hover:[&>button]:z-[1]",
+          : "ltr:[&>*:first-child]:ml-0 ltr:[&>*:first-child]:rounded-l-md ltr:[&>*:first-child]:border-l rtl:[&>*:first-child]:rounded-r-md rtl:[&>*:first-child]:border-r ltr:[&>*:last-child]:rounded-r-md rtl:[&>*:last-child]:rounded-l-md [&>a]:-ml-[1px] hover:[&>a]:z-[1] [&>button]:-ml-[1px] hover:[&>button]:z-[1] [&_a]:rounded-none [&_button]:rounded-none",
         containerProps?.className
       )}>
       {children}
diff --git a/packages/ui/components/card/Card.tsx b/packages/ui/components/card/Card.tsx
index aee4afe54a..a28c93ea60 100644
--- a/packages/ui/components/card/Card.tsx
+++ b/packages/ui/components/card/Card.tsx
@@ -157,7 +157,7 @@ export function Card({
           title={title}
           className={classNames(
             cvaCardTypeByVariant({ variant, structure: "title" }),
-            "line-clamp-1 text-emphasis font-bold leading-5"
+            "text-emphasis line-clamp-1 font-bold leading-5"
           )}>
           {title}
         </h5>
@@ -178,7 +178,7 @@ export function Card({
           className="group relative my-3 flex aspect-video items-center overflow-hidden rounded">
           <div className="absolute inset-0 bg-black bg-opacity-50 transition-opacity group-hover:bg-opacity-40" />
           <svg
-            className="text-inverted absolute top-1/2 left-1/2 h-8 w-8 -translate-x-1/2 -translate-y-1/2 transform rounded-full shadow-lg hover:-mt-px"
+            className="text-inverted absolute left-1/2 top-1/2 h-8 w-8 -translate-x-1/2 -translate-y-1/2 transform rounded-full shadow-lg hover:-mt-px"
             viewBox="0 0 32 32"
             fill="none"
             xmlns="http://www.w3.org/2000/svg">
diff --git a/packages/ui/components/card/FormCard.tsx b/packages/ui/components/card/FormCard.tsx
index cac0a11f3d..c638a5305f 100644
--- a/packages/ui/components/card/FormCard.tsx
+++ b/packages/ui/components/card/FormCard.tsx
@@ -72,7 +72,7 @@ export default function FormCard({
             </button>
           ) : null}
         </div>
-        <Divider className="mt-3 mb-6" />
+        <Divider className="mb-6 mt-3" />
         {children}
       </div>
     </div>
diff --git a/packages/ui/components/credits/Credits.tsx b/packages/ui/components/credits/Credits.tsx
index 17ff13c337..74536fa782 100644
--- a/packages/ui/components/credits/Credits.tsx
+++ b/packages/ui/components/credits/Credits.tsx
@@ -2,7 +2,9 @@ import Link from "next/link";
 import { useEffect, useState } from "react";
 
 import { COMPANY_NAME, IS_SELF_HOSTED } from "@calcom/lib/constants";
-import pkg from "@calcom/web/package.json";
+
+// Relative to prevent triggering a recompile
+import pkg from "../../../../apps/web/package.json";
 
 export const CalComVersion = `v.${pkg.version}-${!IS_SELF_HOSTED ? "h" : "sh"}`;
 
@@ -14,7 +16,7 @@ export default function Credits() {
   }, []);
 
   return (
-    <small className="text-default mx-3 mt-1 mb-2 hidden text-[0.5rem] opacity-50 lg:block">
+    <small className="text-default mx-3 mb-2 mt-1 hidden text-[0.5rem] opacity-50 lg:block">
       &copy; {new Date().getFullYear()}{" "}
       <Link href="https://go.cal.com/credits" target="_blank" className="hover:underline">
         {COMPANY_NAME}
diff --git a/packages/ui/components/editor/plugins/AddVariablesDropdown.tsx b/packages/ui/components/editor/plugins/AddVariablesDropdown.tsx
index 4552494e3e..8be60b691d 100644
--- a/packages/ui/components/editor/plugins/AddVariablesDropdown.tsx
+++ b/packages/ui/components/editor/plugins/AddVariablesDropdown.tsx
@@ -20,20 +20,20 @@ export const AddVariablesDropdown = (props: IAddVariablesDropdown) => {
             <>
               <div className="hidden sm:flex">
                 {t("add_variable")}
-                <ChevronDown className="mt-[2px] ml-1 h-4 w-4" />
+                <ChevronDown className="ml-1 mt-[2px] h-4 w-4" />
               </div>
               <div className="block sm:hidden">+</div>
             </>
           ) : (
             <div className="flex">
               {t("add_variable")}
-              <ChevronDown className="mt-[2px] ml-1 h-4 w-4" />
+              <ChevronDown className="ml-1 mt-[2px] h-4 w-4" />
             </div>
           )}
         </div>
       </DropdownMenuTrigger>
       <DropdownMenuContent>
-        <div className="pt-4 pb-1">
+        <div className="pb-1 pt-4">
           <div className="text-subtle mb-2 px-4 text-left text-xs">
             {t("add_dynamic_variables").toLocaleUpperCase()}
           </div>
diff --git a/packages/ui/components/empty-screen/EmptyScreen.tsx b/packages/ui/components/empty-screen/EmptyScreen.tsx
index d3fcc778f6..9f4e7d5085 100644
--- a/packages/ui/components/empty-screen/EmptyScreen.tsx
+++ b/packages/ui/components/empty-screen/EmptyScreen.tsx
@@ -49,7 +49,7 @@ export function EmptyScreen({
         )}
         <div className="flex max-w-[420px] flex-col items-center">
           <h2 className="text-semibold font-cal text-emphasis mt-6 text-center text-xl">{headline}</h2>
-          <div className="text-default mt-3 mb-8 text-center text-sm font-normal leading-6">
+          <div className="text-default mb-8 mt-3 text-center text-sm font-normal leading-6">
             {description}
           </div>
           {buttonOnClick && buttonText && <Button onClick={(e) => buttonOnClick(e)}>{buttonText}</Button>}
diff --git a/packages/ui/components/form/inputs/Input.tsx b/packages/ui/components/form/inputs/Input.tsx
index a30edd7f63..5533ff16b4 100644
--- a/packages/ui/components/form/inputs/Input.tsx
+++ b/packages/ui/components/form/inputs/Input.tsx
@@ -23,7 +23,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
       {...props}
       ref={ref}
       className={classNames(
-        "hover:border-emphasis dark:focus:border-emphasis border-default bg-default placeholder:text-muted text-emphasis disabled:hover:border-default disabled:bg-subtle focus:ring-brand-default mb-2 block h-9 rounded-md border py-2 px-3 text-sm leading-4 focus:border-neutral-300 focus:outline-none focus:ring-2 disabled:cursor-not-allowed",
+        "hover:border-emphasis dark:focus:border-emphasis border-default bg-default placeholder:text-muted text-emphasis disabled:hover:border-default disabled:bg-subtle focus:ring-brand-default mb-2 block h-9 rounded-md border px-3 py-2 text-sm leading-4 focus:border-neutral-300 focus:outline-none focus:ring-2 disabled:cursor-not-allowed",
         isFullWidth && "w-full",
         props.className
       )}
@@ -280,7 +280,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function
       ref={ref}
       {...props}
       className={classNames(
-        "hover:border-emphasis border-default bg-default placeholder:text-muted text-emphasis disabled:hover:border-default disabled:bg-subtle focus:ring-brand-default mb-2 block w-full rounded-md border py-2 px-3 text-sm focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-1 disabled:cursor-not-allowed",
+        "hover:border-emphasis border-default bg-default placeholder:text-muted text-emphasis disabled:hover:border-default disabled:bg-subtle focus:ring-brand-default mb-2 block w-full rounded-md border px-3 py-2 text-sm focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-1 disabled:cursor-not-allowed",
         props.className
       )}
     />
diff --git a/packages/ui/components/form/switch/SettingsToggle.tsx b/packages/ui/components/form/switch/SettingsToggle.tsx
index 996e7d0b64..c8909f9c91 100644
--- a/packages/ui/components/form/switch/SettingsToggle.tsx
+++ b/packages/ui/components/form/switch/SettingsToggle.tsx
@@ -31,7 +31,7 @@ function SettingsToggle({
 
   return (
     <>
-      <div className="flex w-full flex-col space-y-4 lg:flex-row lg:space-y-0 lg:space-x-4">
+      <div className="flex w-full flex-col space-y-4 lg:flex-row lg:space-x-4 lg:space-y-0">
         <fieldset className="block w-full flex-col sm:flex">
           <div className="flex space-x-3">
             <Switch
diff --git a/packages/ui/components/navigation/tabs/HorizontalTabs.tsx b/packages/ui/components/navigation/tabs/HorizontalTabs.tsx
index 6ec44cead3..1152ebcdd8 100644
--- a/packages/ui/components/navigation/tabs/HorizontalTabs.tsx
+++ b/packages/ui/components/navigation/tabs/HorizontalTabs.tsx
@@ -15,7 +15,7 @@ const HorizontalTabs = function ({ tabs, linkProps, actions, ...props }: NavTabP
         aria-label="Tabs"
         {...props}>
         {tabs.map((tab, idx) => (
-          <HorizontalTabItem className="py-2.5 px-4" {...tab} key={idx} {...linkProps} />
+          <HorizontalTabItem className="px-4 py-2.5" {...tab} key={idx} {...linkProps} />
         ))}
       </nav>
       {actions && actions}
diff --git a/packages/ui/components/table/Table.tsx b/packages/ui/components/table/Table.tsx
index 8bfeef0062..06bff5c431 100644
--- a/packages/ui/components/table/Table.tsx
+++ b/packages/ui/components/table/Table.tsx
@@ -34,7 +34,7 @@ const Row = ({ children }: TableProps) => <tr>{children}</tr>;
 const Cell = ({ children, widthClassNames }: TableProps & DynamicWidth) => (
   <td
     className={classNames(
-      "text-default relative py-2 px-3 text-sm font-medium",
+      "text-default relative px-3 py-2 text-sm font-medium",
       !widthClassNames ? "w-auto" : widthClassNames
     )}>
     {children}
diff --git a/packages/ui/components/top-banner/TopBanner.tsx b/packages/ui/components/top-banner/TopBanner.tsx
index 4efd47f826..a911a1ceb4 100644
--- a/packages/ui/components/top-banner/TopBanner.tsx
+++ b/packages/ui/components/top-banner/TopBanner.tsx
@@ -43,7 +43,7 @@ export function TopBanner(props: TopBannerProps) {
     <div
       data-testid="banner"
       className={classNames(
-        "flex min-h-[40px] w-full items-start justify-between gap-8 py-2 px-4 text-center lg:items-center",
+        "flex min-h-[40px] w-full items-start justify-between gap-8 px-4 py-2 text-center lg:items-center",
         variantClassName[variant]
       )}>
       <div className="flex flex-1 flex-col items-start justify-center gap-2 p-1 lg:flex-row lg:items-center">
diff --git a/packages/ui/form/fields.tsx b/packages/ui/form/fields.tsx
index a767dd315b..6c27d773ad 100644
--- a/packages/ui/form/fields.tsx
+++ b/packages/ui/form/fields.tsx
@@ -18,7 +18,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(pro
       {...props}
       ref={ref}
       className={classNames(
-        "border-default mt-1 block w-full rounded-sm border py-2 px-3 shadow-sm focus:border-neutral-800 focus:outline-none focus:ring-1 focus:ring-neutral-800 sm:text-sm",
+        "border-default mt-1 block w-full rounded-sm border px-3 py-2 shadow-sm focus:border-neutral-800 focus:outline-none focus:ring-1 focus:ring-neutral-800 sm:text-sm",
         props.className
       )}
     />
diff --git a/packages/ui/form/radio-area/RadioAreaGroup.tsx b/packages/ui/form/radio-area/RadioAreaGroup.tsx
index 9bb68f24ad..2cf1e90014 100644
--- a/packages/ui/form/radio-area/RadioAreaGroup.tsx
+++ b/packages/ui/form/radio-area/RadioAreaGroup.tsx
@@ -23,7 +23,7 @@ const RadioArea = ({ children, className, classNames: innerClassNames, ...props
         id={id}
         {...props}
         className={classNames(
-          "hover:bg-subtle border-default focus:ring-emphasis absolute top-[0.9rem] left-3 mt-0.5 h-4 w-4 flex-shrink-0 rounded-full border focus:ring-2",
+          "hover:bg-subtle border-default focus:ring-emphasis absolute left-3 top-[0.9rem] mt-0.5 h-4 w-4 flex-shrink-0 rounded-full border focus:ring-2",
           props.disabled && "opacity-60"
         )}>
         <RadioGroupPrimitive.Indicator
@@ -33,7 +33,7 @@ const RadioArea = ({ children, className, classNames: innerClassNames, ...props
           )}
         />
       </RadioGroupPrimitive.Item>
-      <label htmlFor={id} className={classNames("text-default p-4 pt-3 pl-10", innerClassNames?.container)}>
+      <label htmlFor={id} className={classNames("text-default p-4 pl-10 pt-3", innerClassNames?.container)}>
         {children}
       </label>
     </div>
diff --git a/packages/ui/package.json b/packages/ui/package.json
index c535704e01..eedf0bb42f 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -30,6 +30,7 @@
     "@wojtekmaj/react-daterange-picker": "^3.3.1",
     "class-variance-authority": "^0.4.0",
     "downshift": "^6.1.9",
+    "lucide-react": "^0.171.0",
     "next": "^13.4.6",
     "react": "^18.2.0",
     "react-colorful": "^5.6.0",
@@ -42,7 +43,7 @@
     "@calcom/config": "*",
     "@calcom/tsconfig": "*",
     "@types/react": "18.0.26",
-    "@types/react-dom": "18.0.9",
+    "@types/react-dom": "^18.0.9",
     "typescript": "^4.9.4"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index a5e768ed85..eafc7dc11e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -82,16 +82,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ampproject/remapping@npm:^2.2.0":
-  version: 2.2.0
-  resolution: "@ampproject/remapping@npm:2.2.0"
-  dependencies:
-    "@jridgewell/gen-mapping": ^0.1.0
-    "@jridgewell/trace-mapping": ^0.3.9
-  checksum: d74d170d06468913921d72430259424b7e4c826b5a7d39ff839a29d547efb97dc577caa8ba3fb5cf023624e9af9d09651afc3d4112a45e2050328abc9b3a2292
-  languageName: node
-  linkType: hard
-
 "@apidevtools/json-schema-ref-parser@npm:9.0.9":
   version: 9.0.9
   resolution: "@apidevtools/json-schema-ref-parser@npm:9.0.9"
@@ -1259,13 +1249,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/compat-data@npm:^7.20.5":
-  version: 7.21.0
-  resolution: "@babel/compat-data@npm:7.21.0"
-  checksum: dbf632c532f9c75ba0be7d1dc9f6cd3582501af52f10a6b90415d634ec5878735bd46064c91673b10317af94d4cc99c4da5bd9d955978cdccb7905fc33291e4d
-  languageName: node
-  linkType: hard
-
 "@babel/core@npm:7.12.9":
   version: 7.12.9
   resolution: "@babel/core@npm:7.12.9"
@@ -1336,29 +1319,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/core@npm:^7.17.10":
-  version: 7.21.0
-  resolution: "@babel/core@npm:7.21.0"
-  dependencies:
-    "@ampproject/remapping": ^2.2.0
-    "@babel/code-frame": ^7.18.6
-    "@babel/generator": ^7.21.0
-    "@babel/helper-compilation-targets": ^7.20.7
-    "@babel/helper-module-transforms": ^7.21.0
-    "@babel/helpers": ^7.21.0
-    "@babel/parser": ^7.21.0
-    "@babel/template": ^7.20.7
-    "@babel/traverse": ^7.21.0
-    "@babel/types": ^7.21.0
-    convert-source-map: ^1.7.0
-    debug: ^4.1.0
-    gensync: ^1.0.0-beta.2
-    json5: ^2.2.2
-    semver: ^6.3.0
-  checksum: 357f4dd3638861ceebf6d95ff49ad8b902065ee8b7b352621deed5666c2a6d702a48ca7254dba23ecae2a0afb67d20f90db7dd645c3b75e35e72ad9776c671aa
-  languageName: node
-  linkType: hard
-
 "@babel/core@npm:^7.18.10":
   version: 7.18.10
   resolution: "@babel/core@npm:7.18.10"
@@ -1382,7 +1342,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/core@npm:^7.18.13, @babel/core@npm:^7.19.6":
+"@babel/core@npm:^7.19.6":
   version: 7.19.6
   resolution: "@babel/core@npm:7.19.6"
   dependencies:
@@ -1482,18 +1442,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/generator@npm:^7.21.0, @babel/generator@npm:^7.21.1":
-  version: 7.21.1
-  resolution: "@babel/generator@npm:7.21.1"
-  dependencies:
-    "@babel/types": ^7.21.0
-    "@jridgewell/gen-mapping": ^0.3.2
-    "@jridgewell/trace-mapping": ^0.3.17
-    jsesc: ^2.5.1
-  checksum: 69085a211ff91a7a608ee3f86e6fcb9cf5e724b756d792a713b0c328a671cd3e423e1ef1b12533f366baba0616caffe0a7ba9d328727eab484de5961badbef00
-  languageName: node
-  linkType: hard
-
 "@babel/helper-annotate-as-pure@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/helper-annotate-as-pure@npm:7.18.6"
@@ -1569,21 +1517,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-compilation-targets@npm:^7.20.7":
-  version: 7.20.7
-  resolution: "@babel/helper-compilation-targets@npm:7.20.7"
-  dependencies:
-    "@babel/compat-data": ^7.20.5
-    "@babel/helper-validator-option": ^7.18.6
-    browserslist: ^4.21.3
-    lru-cache: ^5.1.1
-    semver: ^6.3.0
-  peerDependencies:
-    "@babel/core": ^7.0.0
-  checksum: 8c32c873ba86e2e1805b30e0807abd07188acbe00ebb97576f0b09061cc65007f1312b589eccb4349c5a8c7f8bb9f2ab199d41da7030bf103d9f347dcd3a3cf4
-  languageName: node
-  linkType: hard
-
 "@babel/helper-create-class-features-plugin@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/helper-create-class-features-plugin@npm:7.18.6"
@@ -1715,16 +1648,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-function-name@npm:^7.21.0":
-  version: 7.21.0
-  resolution: "@babel/helper-function-name@npm:7.21.0"
-  dependencies:
-    "@babel/template": ^7.20.7
-    "@babel/types": ^7.21.0
-  checksum: d63e63c3e0e3e8b3138fa47b0cd321148a300ef12b8ee951196994dcd2a492cc708aeda94c2c53759a5c9177fffaac0fd8778791286746f72a000976968daf4e
-  languageName: node
-  linkType: hard
-
 "@babel/helper-get-function-arity@npm:^7.16.7":
   version: 7.16.7
   resolution: "@babel/helper-get-function-arity@npm:7.16.7"
@@ -1859,22 +1782,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-module-transforms@npm:^7.21.0":
-  version: 7.21.2
-  resolution: "@babel/helper-module-transforms@npm:7.21.2"
-  dependencies:
-    "@babel/helper-environment-visitor": ^7.18.9
-    "@babel/helper-module-imports": ^7.18.6
-    "@babel/helper-simple-access": ^7.20.2
-    "@babel/helper-split-export-declaration": ^7.18.6
-    "@babel/helper-validator-identifier": ^7.19.1
-    "@babel/template": ^7.20.7
-    "@babel/traverse": ^7.21.2
-    "@babel/types": ^7.21.2
-  checksum: 8a1c129a4f90bdf97d8b6e7861732c9580f48f877aaaafbc376ce2482febebcb8daaa1de8bc91676d12886487603f8c62a44f9e90ee76d6cac7f9225b26a49e1
-  languageName: node
-  linkType: hard
-
 "@babel/helper-optimise-call-expression@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/helper-optimise-call-expression@npm:7.18.6"
@@ -2114,17 +2021,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helpers@npm:^7.21.0":
-  version: 7.21.0
-  resolution: "@babel/helpers@npm:7.21.0"
-  dependencies:
-    "@babel/template": ^7.20.7
-    "@babel/traverse": ^7.21.0
-    "@babel/types": ^7.21.0
-  checksum: 9370dad2bb665c551869a08ac87c8bdafad53dbcdce1f5c5d498f51811456a3c005d9857562715151a0f00b2e912ac8d89f56574f837b5689f5f5072221cdf54
-  languageName: node
-  linkType: hard
-
 "@babel/highlight@npm:^7.16.7":
   version: 7.16.10
   resolution: "@babel/highlight@npm:7.16.10"
@@ -2219,15 +2115,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/parser@npm:^7.21.0, @babel/parser@npm:^7.21.2":
-  version: 7.21.2
-  resolution: "@babel/parser@npm:7.21.2"
-  bin:
-    parser: ./bin/babel-parser.js
-  checksum: e2b89de2c63d4cdd2cafeaea34f389bba729727eec7a8728f736bc472a59396059e3e9fe322c9bed8fd126d201fb609712949dc8783f4cae4806acd9a73da6ff
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.18.6"
@@ -3024,7 +2911,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-jsx-development@npm:^7.16.7, @babel/plugin-transform-react-jsx-development@npm:^7.18.6":
+"@babel/plugin-transform-react-jsx-development@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/plugin-transform-react-jsx-development@npm:7.18.6"
   dependencies:
@@ -3035,17 +2922,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-jsx-self@npm:^7.16.7":
-  version: 7.21.0
-  resolution: "@babel/plugin-transform-react-jsx-self@npm:7.21.0"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.20.2
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 696f74c04a265409ccd46e333ff762e6011d394e6972128b5d97db4c1647289141bc7ebd45ab2bab99b60932f9793e8f89ee9432d3bde19962de2100456f6147
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-transform-react-jsx-self@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/plugin-transform-react-jsx-self@npm:7.18.6"
@@ -3057,17 +2933,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-jsx-source@npm:^7.16.7, @babel/plugin-transform-react-jsx-source@npm:^7.19.6":
-  version: 7.19.6
-  resolution: "@babel/plugin-transform-react-jsx-source@npm:7.19.6"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.19.0
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 1e9e29a4efc5b79840bd4f68e404f5ab7765ce48c7bd22f12f2b185f9c782c66933bdf54a1b21879e4e56e6b50b4e88aca82789ecb1f61123af6dfa9ab16c555
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-transform-react-jsx-source@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/plugin-transform-react-jsx-source@npm:7.18.6"
@@ -3079,6 +2944,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-react-jsx-source@npm:^7.19.6":
+  version: 7.19.6
+  resolution: "@babel/plugin-transform-react-jsx-source@npm:7.19.6"
+  dependencies:
+    "@babel/helper-plugin-utils": ^7.19.0
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 1e9e29a4efc5b79840bd4f68e404f5ab7765ce48c7bd22f12f2b185f9c782c66933bdf54a1b21879e4e56e6b50b4e88aca82789ecb1f61123af6dfa9ab16c555
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-react-jsx@npm:^7.12.12, @babel/plugin-transform-react-jsx@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/plugin-transform-react-jsx@npm:7.18.6"
@@ -3094,21 +2970,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-jsx@npm:^7.17.3, @babel/plugin-transform-react-jsx@npm:^7.19.0":
-  version: 7.21.0
-  resolution: "@babel/plugin-transform-react-jsx@npm:7.21.0"
-  dependencies:
-    "@babel/helper-annotate-as-pure": ^7.18.6
-    "@babel/helper-module-imports": ^7.18.6
-    "@babel/helper-plugin-utils": ^7.20.2
-    "@babel/plugin-syntax-jsx": ^7.18.6
-    "@babel/types": ^7.21.0
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: c77d277d2e55b489a9b9be185c3eed5d8e2c87046778810f8e47ee3c87b47e64cad93c02211c968486c7958fd05ce203c66779446484c98a7b3a69bec687d5dc
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-transform-react-jsx@npm:^7.18.10":
   version: 7.18.10
   resolution: "@babel/plugin-transform-react-jsx@npm:7.18.10"
@@ -3124,6 +2985,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-react-jsx@npm:^7.19.0":
+  version: 7.21.0
+  resolution: "@babel/plugin-transform-react-jsx@npm:7.21.0"
+  dependencies:
+    "@babel/helper-annotate-as-pure": ^7.18.6
+    "@babel/helper-module-imports": ^7.18.6
+    "@babel/helper-plugin-utils": ^7.20.2
+    "@babel/plugin-syntax-jsx": ^7.18.6
+    "@babel/types": ^7.21.0
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: c77d277d2e55b489a9b9be185c3eed5d8e2c87046778810f8e47ee3c87b47e64cad93c02211c968486c7958fd05ce203c66779446484c98a7b3a69bec687d5dc
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-react-pure-annotations@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/plugin-transform-react-pure-annotations@npm:7.18.6"
@@ -3437,7 +3313,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.14.5, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.7":
+"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.7":
   version: 7.17.8
   resolution: "@babel/runtime@npm:7.17.8"
   dependencies:
@@ -3464,7 +3340,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.14.8, @babel/runtime@npm:^7.18.6":
+"@babel/runtime@npm:^7.14.8":
   version: 7.18.9
   resolution: "@babel/runtime@npm:7.18.9"
   dependencies:
@@ -3473,16 +3349,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.17.2, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.9.2":
-  version: 7.17.9
-  resolution: "@babel/runtime@npm:7.17.9"
-  dependencies:
-    regenerator-runtime: ^0.13.4
-  checksum: 4d56bdb82890f386d5a57c40ef985a0ed7f0a78f789377a2d0c3e8826819e0f7f16ba0fe906d9b2241c5f7ca56630ef0653f5bb99f03771f7b87ff8af4bf5fe3
-  languageName: node
-  linkType: hard
-
-"@babel/runtime@npm:^7.21.0":
+"@babel/runtime@npm:^7.20.6, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/runtime@npm:7.22.5"
   dependencies:
@@ -3491,6 +3358,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.9.2":
+  version: 7.17.9
+  resolution: "@babel/runtime@npm:7.17.9"
+  dependencies:
+    regenerator-runtime: ^0.13.4
+  checksum: 4d56bdb82890f386d5a57c40ef985a0ed7f0a78f789377a2d0c3e8826819e0f7f16ba0fe906d9b2241c5f7ca56630ef0653f5bb99f03771f7b87ff8af4bf5fe3
+  languageName: node
+  linkType: hard
+
 "@babel/runtime@npm:~7.5.4":
   version: 7.5.5
   resolution: "@babel/runtime@npm:7.5.5"
@@ -3670,24 +3546,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/traverse@npm:^7.21.0, @babel/traverse@npm:^7.21.2":
-  version: 7.21.2
-  resolution: "@babel/traverse@npm:7.21.2"
-  dependencies:
-    "@babel/code-frame": ^7.18.6
-    "@babel/generator": ^7.21.1
-    "@babel/helper-environment-visitor": ^7.18.9
-    "@babel/helper-function-name": ^7.21.0
-    "@babel/helper-hoist-variables": ^7.18.6
-    "@babel/helper-split-export-declaration": ^7.18.6
-    "@babel/parser": ^7.21.2
-    "@babel/types": ^7.21.2
-    debug: ^4.1.0
-    globals: ^11.1.0
-  checksum: d851e3f5cfbdc2fac037a014eae7b0707709de50f7d2fbb82ffbf932d3eeba90a77431529371d6e544f8faaf8c6540eeb18fdd8d1c6fa2b61acea0fb47e18d4b
-  languageName: node
-  linkType: hard
-
 "@babel/types@npm:7.17.0, @babel/types@npm:^7.16.7, @babel/types@npm:^7.17.0":
   version: 7.17.0
   resolution: "@babel/types@npm:7.17.0"
@@ -3762,7 +3620,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.21.0, @babel/types@npm:^7.21.2":
+"@babel/types@npm:^7.21.0":
   version: 7.21.2
   resolution: "@babel/types@npm:7.21.2"
   dependencies:
@@ -3873,9 +3731,9 @@ __metadata:
     "@sentry/nextjs": ^7.20.0
     bcryptjs: ^2.4.3
     memory-cache: ^0.2.0
-    next: ~13.4.6
+    next: ^13.4.6
     next-api-middleware: ^1.0.1
-    next-axiom: ^0.16.0
+    next-axiom: ^0.17.0
     next-swagger-doc: ^0.3.6
     next-validations: ^0.2.0
     node-mocks-http: ^1.11.0
@@ -3922,6 +3780,7 @@ __metadata:
     "@calcom/zoomvideo": "*"
     lodash: ^4.17.21
     qs-stringify: ^1.2.1
+    react-i18next: ^12.2.0
   languageName: unknown
   linkType: soft
 
@@ -3949,11 +3808,11 @@ __metadata:
   resolution: "@calcom/atoms@workspace:packages/atoms"
   dependencies:
     "@rollup/plugin-node-resolve": ^15.0.1
-    "@types/react": ^18.0.25
+    "@types/react": 18.0.26
     "@types/react-dom": ^18.0.9
     "@vitejs/plugin-react": ^2.2.0
     rollup-plugin-node-builtins: ^2.1.2
-    typescript: ^4.9.3
+    typescript: ^4.9.4
     vite: ^4.1.2
   languageName: unknown
   linkType: soft
@@ -3980,7 +3839,7 @@ __metadata:
     "@calcom/ui": "*"
     "@types/node": 16.9.1
     "@types/react": 18.0.26
-    "@types/react-dom": 18.0.9
+    "@types/react-dom": ^18.0.9
     eslint: ^8.34.0
     eslint-config-next: ^13.2.1
     next: ^13.4.6
@@ -4046,7 +3905,7 @@ __metadata:
     prettier: ^2.8.6
     prettier-plugin-tailwindcss: ^0.2.5
     tailwind-scrollbar: ^2.0.1
-    tailwindcss: ^3.2.1
+    tailwindcss: ^3.3.1
     typescript: ^4.9.4
   languageName: unknown
   linkType: soft
@@ -4072,7 +3931,7 @@ __metadata:
     eslint: ^8.34.0
     next: ^13.4.6
     next-auth: ^4.20.1
-    next-i18next: ^11.3.0
+    next-i18next: ^13.2.2
     postcss: ^8.4.18
     prisma: ^4.16.0
     prisma-field-encryption: ^1.4.0
@@ -4080,9 +3939,9 @@ __metadata:
     react-chartjs-2: ^4.0.1
     react-dom: ^18.2.0
     react-hook-form: ^7.43.3
-    react-live-chat-loader: ^2.7.3
+    react-live-chat-loader: ^2.8.1
     swr: ^1.2.2
-    tailwindcss: ^3.2.1
+    tailwindcss: ^3.3.1
     typescript: ^4.9.4
     zod: ^3.20.2
   languageName: unknown
@@ -4174,7 +4033,7 @@ __metadata:
     "@calcom/lib": "*"
     "@calcom/tsconfig": "*"
     "@calcom/types": "*"
-    next-i18next: ^11.3.0
+    next-i18next: ^13.2.2
     react: ^18.2.0
     react-dom: ^18.2.0
     rrule: ^2.7.1
@@ -4189,7 +4048,7 @@ __metadata:
     autoprefixer: ^10.4.12
     npm-run-all: ^4.1.5
     postcss: ^8.4.18
-    tailwindcss: ^3.2.1
+    tailwindcss: ^3.3.1
     typescript: ^4.9.4
     vite: ^4.1.2
   languageName: unknown
@@ -4203,8 +4062,8 @@ __metadata:
     "@calcom/embed-snippet": "workspace:*"
     "@playwright/test": ^1.31.2
     "@types/react": 18.0.26
-    "@types/react-dom": 18.0.9
-    "@vitejs/plugin-react": 1.3.2
+    "@types/react-dom": ^18.0.9
+    "@vitejs/plugin-react": ^2.2.0
     eslint: ^8.34.0
     npm-run-all: ^4.1.5
     typescript: ^4.9.4
@@ -4430,12 +4289,13 @@ __metadata:
     "@calcom/types": "*"
     "@faker-js/faker": ^7.3.0
     "@sendgrid/client": ^7.7.0
-    "@vercel/og": ^0.0.21
+    "@vercel/og": ^0.5.0
     bcryptjs: ^2.4.3
+    i18next: ^23.2.3
     ical.js: ^1.4.0
     ics: ^2.37.0
     jimp: ^0.16.1
-    next-i18next: ^11.3.0
+    next-i18next: ^13.2.2
     react-hot-toast: ^2.3.0
     rrule: ^2.7.1
     tailwind-merge: ^1.8.1
@@ -4627,7 +4487,7 @@ __metadata:
     "@radix-ui/react-avatar": ^1.0.0
     "@radix-ui/react-collapsible": ^1.0.0
     "@radix-ui/react-dialog": ^1.0.0
-    "@radix-ui/react-dropdown-menu": ^1.0.0
+    "@radix-ui/react-dropdown-menu": ^2.0.5
     "@radix-ui/react-id": ^1.0.0
     "@radix-ui/react-popover": ^1.0.2
     "@radix-ui/react-radio-group": ^1.0.0
@@ -4644,8 +4504,8 @@ __metadata:
     "@storybook/react": ^6.5.13
     "@storybook/testing-library": ^0.0.13
     "@types/react": 18.0.26
-    "@types/react-dom": 18.0.9
-    "@vitejs/plugin-react": ^2.1.0
+    "@types/react-dom": ^18.0.9
+    "@vitejs/plugin-react": ^2.2.0
     autoprefixer: ^10.4.12
     babel-loader: ^8.2.5
     fs: ^0.0.1-security
@@ -4659,7 +4519,7 @@ __metadata:
     storybook-addon-next: ^1.6.9
     storybook-addon-rtl-direction: ^0.0.19
     storybook-react-i18next: ^1.1.2
-    tailwindcss: ^3.2.1
+    tailwindcss: ^3.3.1
     typescript: ^4.9.4
     vite: ^4.1.2
   languageName: unknown
@@ -4691,7 +4551,7 @@ __metadata:
   dependencies:
     "@types/node": 16.9.1
     "@types/react": 18.0.26
-    "@types/react-dom": 18.0.9
+    "@types/react-dom": ^18.0.9
     highlight.js: ^11.6.0
     isarray: 2.0.5
     next: ^13.4.6
@@ -4784,10 +4644,11 @@ __metadata:
     "@react-icons/all-files": ^4.1.0
     "@tanstack/react-query": ^4.3.9
     "@types/react": 18.0.26
-    "@types/react-dom": 18.0.9
+    "@types/react-dom": ^18.0.9
     "@wojtekmaj/react-daterange-picker": ^3.3.1
     class-variance-authority: ^0.4.0
     downshift: ^6.1.9
+    lucide-react: ^0.171.0
     next: ^13.4.6
     react: ^18.2.0
     react-colorful: ^5.6.0
@@ -4861,7 +4722,7 @@ __metadata:
     "@radix-ui/react-avatar": ^1.0.0
     "@radix-ui/react-collapsible": ^1.0.0
     "@radix-ui/react-dialog": ^1.0.0
-    "@radix-ui/react-dropdown-menu": ^1.0.0
+    "@radix-ui/react-dropdown-menu": ^2.0.5
     "@radix-ui/react-id": ^1.0.0
     "@radix-ui/react-popover": ^1.0.2
     "@radix-ui/react-radio-group": ^1.0.0
@@ -4932,10 +4793,10 @@ __metadata:
     msw: ^0.42.3
     next: ^13.4.6
     next-auth: ^4.20.1
-    next-axiom: ^0.16.0
+    next-axiom: ^0.17.0
     next-collect: ^0.2.1
-    next-i18next: ^11.3.0
-    next-seo: ^4.26.0
+    next-i18next: ^13.2.2
+    next-seo: ^6.0.0
     next-themes: ^0.2.0
     nodemailer: ^6.7.8
     otplib: ^12.0.1
@@ -4952,7 +4813,7 @@ __metadata:
     react-hook-form: ^7.43.3
     react-hot-toast: ^2.3.0
     react-intl: ^5.25.1
-    react-live-chat-loader: ^2.7.3
+    react-live-chat-loader: ^2.8.1
     react-multi-email: ^0.5.3
     react-phone-input-2: ^2.15.1
     react-phone-number-input: ^3.2.7
@@ -5042,11 +4903,14 @@ __metadata:
     gsap: ^3.11.0
     iframe-resizer-react: ^1.1.0
     keen-slider: ^6.8.0
-    lucide-react: ^0.125.0
+    lucide-react: ^0.171.0
     micro: ^10.0.1
-    next: ~13.4.6
+    next: ^13.4.6
     next-auth: ^4.20.1
+    next-axiom: ^0.17.0
+    next-collect: ^0.2.1
     next-i18next: ^13.2.2
+    next-seo: ^6.0.0
     playwright: ^1.31.2
     postcss: ^8.4.18
     prism-react-renderer: ^1.3.5
@@ -5066,7 +4930,7 @@ __metadata:
     remark: ^14.0.2
     remark-html: ^14.0.1
     stripe: ^9.16.0
-    tailwindcss: ^3.2.1
+    tailwindcss: ^3.3.1
     typescript: ^4.9.4
     wait-on: ^7.0.1
     zod: ^3.20.2
@@ -7001,16 +6865,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/gen-mapping@npm:^0.1.0":
-  version: 0.1.1
-  resolution: "@jridgewell/gen-mapping@npm:0.1.1"
-  dependencies:
-    "@jridgewell/set-array": ^1.0.0
-    "@jridgewell/sourcemap-codec": ^1.4.10
-  checksum: 3bcc21fe786de6ffbf35c399a174faab05eb23ce6a03e8769569de28abbf4facc2db36a9ddb0150545ae23a8d35a7cf7237b2aa9e9356a7c626fb4698287d5cc
-  languageName: node
-  linkType: hard
-
 "@jridgewell/gen-mapping@npm:^0.3.0, @jridgewell/gen-mapping@npm:^0.3.2":
   version: 0.3.2
   resolution: "@jridgewell/gen-mapping@npm:0.3.2"
@@ -7036,7 +6890,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/set-array@npm:^1.0.0, @jridgewell/set-array@npm:^1.0.1":
+"@jridgewell/set-array@npm:^1.0.1":
   version: 1.1.2
   resolution: "@jridgewell/set-array@npm:1.1.2"
   checksum: 69a84d5980385f396ff60a175f7177af0b8da4ddb81824cb7016a9ef914eee9806c72b6b65942003c63f7983d4f39a5c6c27185bbca88eb4690b62075602e28e
@@ -7104,7 +6958,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/trace-mapping@npm:^0.3.14, @jridgewell/trace-mapping@npm:^0.3.17":
+"@jridgewell/trace-mapping@npm:^0.3.14":
   version: 0.3.17
   resolution: "@jridgewell/trace-mapping@npm:0.3.17"
   dependencies:
@@ -8369,25 +8223,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-dropdown-menu@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "@radix-ui/react-dropdown-menu@npm:1.0.0"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/primitive": 1.0.0
-    "@radix-ui/react-compose-refs": 1.0.0
-    "@radix-ui/react-context": 1.0.0
-    "@radix-ui/react-id": 1.0.0
-    "@radix-ui/react-menu": 1.0.0
-    "@radix-ui/react-primitive": 1.0.0
-    "@radix-ui/react-use-controllable-state": 1.0.0
-  peerDependencies:
-    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8 || ^17.0 || ^18.0
-  checksum: b3513c6790c78bd75187078499a70411735842d683a33d2d321cbd0bef25bcb43277a28f523abef58bbea97aeba3f2a092eb566d4a366e72eb0e111353fb1a71
-  languageName: node
-  linkType: hard
-
 "@radix-ui/react-dropdown-menu@npm:^2.0.5":
   version: 2.0.5
   resolution: "@radix-ui/react-dropdown-menu@npm:2.0.5"
@@ -8577,36 +8412,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-menu@npm:1.0.0":
-  version: 1.0.0
-  resolution: "@radix-ui/react-menu@npm:1.0.0"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/primitive": 1.0.0
-    "@radix-ui/react-collection": 1.0.0
-    "@radix-ui/react-compose-refs": 1.0.0
-    "@radix-ui/react-context": 1.0.0
-    "@radix-ui/react-direction": 1.0.0
-    "@radix-ui/react-dismissable-layer": 1.0.0
-    "@radix-ui/react-focus-guards": 1.0.0
-    "@radix-ui/react-focus-scope": 1.0.0
-    "@radix-ui/react-id": 1.0.0
-    "@radix-ui/react-popper": 1.0.0
-    "@radix-ui/react-portal": 1.0.0
-    "@radix-ui/react-presence": 1.0.0
-    "@radix-ui/react-primitive": 1.0.0
-    "@radix-ui/react-roving-focus": 1.0.0
-    "@radix-ui/react-slot": 1.0.0
-    "@radix-ui/react-use-callback-ref": 1.0.0
-    aria-hidden: ^1.1.1
-    react-remove-scroll: 2.5.4
-  peerDependencies:
-    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8 || ^17.0 || ^18.0
-  checksum: 4bd4cba573ba919895d39cf8d98faef9348e53c14d498a87709cf80358b8edf3e741053bc753f4e9a404b747f156fc5fbb8aafc56ae5daf894d991b24724216a
-  languageName: node
-  linkType: hard
-
 "@radix-ui/react-menu@npm:2.0.5":
   version: 2.0.5
   resolution: "@radix-ui/react-menu@npm:2.0.5"
@@ -9643,13 +9448,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@resvg/resvg-wasm@npm:2.0.0-alpha.4":
-  version: 2.0.0-alpha.4
-  resolution: "@resvg/resvg-wasm@npm:2.0.0-alpha.4"
-  checksum: fa2d470d6f39c4a57e4500f4bff389683c4d0d97ad20d08c7721df7a66d5b179e243e4f990cdda70615191167d40dd6cc724e620b5f2aa7f46c8b46ff63c37eb
-  languageName: node
-  linkType: hard
-
 "@resvg/resvg-wasm@npm:2.4.1":
   version: 2.4.1
   resolution: "@resvg/resvg-wasm@npm:2.4.1"
@@ -12738,12 +12536,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:18.0.9":
-  version: 18.0.9
-  resolution: "@types/react-dom@npm:18.0.9"
+"@types/react-dom@npm:^18.0.9":
+  version: 18.2.6
+  resolution: "@types/react-dom@npm:18.2.6"
   dependencies:
     "@types/react": "*"
-  checksum: e744e3feba25fc43733289d4df4d9c0e59fcca7f34e8c89d75f81a339accb2bd70236d69382d47d2c0ad06a1529b2e56aa6171fe175854d60e07156ddceedfcb
+  checksum: b56e42efab121a3a8013d2eb8c1688e6028a25ea6d33c4362d2846f0af3760b164b4d7c34846614024cfb8956cca70dd1743487f152e32ff89a00fe6fbd2be54
   languageName: node
   linkType: hard
 
@@ -13264,17 +13062,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vercel/og@npm:^0.0.21":
-  version: 0.0.21
-  resolution: "@vercel/og@npm:0.0.21"
-  dependencies:
-    "@resvg/resvg-wasm": 2.0.0-alpha.4
-    satori: 0.0.44
-    yoga-wasm-web: 0.1.2
-  checksum: 6db209c43e170ce6b9db5181b24b7db2c41c2c79dde7e14a59f296e74f3aeb99944001a6827708397e287a5cf6eaeca21521aef07466d2d206c3c9f780c7b13d
-  languageName: node
-  linkType: hard
-
 "@vercel/og@npm:^0.5.0":
   version: 0.5.0
   resolution: "@vercel/og@npm:0.5.0"
@@ -13286,22 +13073,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vitejs/plugin-react@npm:1.3.2":
-  version: 1.3.2
-  resolution: "@vitejs/plugin-react@npm:1.3.2"
-  dependencies:
-    "@babel/core": ^7.17.10
-    "@babel/plugin-transform-react-jsx": ^7.17.3
-    "@babel/plugin-transform-react-jsx-development": ^7.16.7
-    "@babel/plugin-transform-react-jsx-self": ^7.16.7
-    "@babel/plugin-transform-react-jsx-source": ^7.16.7
-    "@rollup/pluginutils": ^4.2.1
-    react-refresh: ^0.13.0
-    resolve: ^1.22.0
-  checksum: 9e083e561145cad00bdd2bc93d56b7ec8e209a05c4a9ebce8d1891e88e74de7eda197934c716023a1642582f250e330da6269e0cd1dc2285762f628c82f32229
-  languageName: node
-  linkType: hard
-
 "@vitejs/plugin-react@npm:^2.0.0":
   version: 2.0.1
   resolution: "@vitejs/plugin-react@npm:2.0.1"
@@ -13319,23 +13090,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vitejs/plugin-react@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "@vitejs/plugin-react@npm:2.1.0"
-  dependencies:
-    "@babel/core": ^7.18.13
-    "@babel/plugin-transform-react-jsx": ^7.18.10
-    "@babel/plugin-transform-react-jsx-development": ^7.18.6
-    "@babel/plugin-transform-react-jsx-self": ^7.18.6
-    "@babel/plugin-transform-react-jsx-source": ^7.18.6
-    magic-string: ^0.26.2
-    react-refresh: ^0.14.0
-  peerDependencies:
-    vite: ^3.0.0
-  checksum: cd13ad549f33e579e0e1d14f5b8a4ad60d5fbbc8cd579e4381d52bb426700118e876644a619a19c5cec4efeb4f8a0ff50b6c9456d5c24836071190b46d781fef
-  languageName: node
-  linkType: hard
-
 "@vitejs/plugin-react@npm:^2.2.0":
   version: 2.2.0
   resolution: "@vitejs/plugin-react@npm:2.2.0"
@@ -13882,18 +13636,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn-node@npm:^1.8.2":
-  version: 1.8.2
-  resolution: "acorn-node@npm:1.8.2"
-  dependencies:
-    acorn: ^7.0.0
-    acorn-walk: ^7.0.0
-    xtend: ^4.0.2
-  checksum: 02e1564a1ccf8bd1fcefcd01235398af4a9effaf032c5397994ddd275590a72894cb3e26e4b82579ccdda1e48ade7486aef61e771ddae3563ca452b927f443d8
-  languageName: node
-  linkType: hard
-
-"acorn-walk@npm:^7.0.0, acorn-walk@npm:^7.2.0":
+"acorn-walk@npm:^7.2.0":
   version: 7.2.0
   resolution: "acorn-walk@npm:7.2.0"
   checksum: 9252158a79b9d92f1bc0dd6acc0fcfb87a67339e84bcc301bb33d6078936d27e35d606b4d35626d2962cd43c256d6f27717e70cbe15c04fff999ab0b2260b21f
@@ -13916,7 +13659,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn@npm:^7.0.0, acorn@npm:^7.4.1":
+"acorn@npm:^7.4.1":
   version: 7.4.1
   resolution: "acorn@npm:7.4.1"
   bin:
@@ -18136,13 +17879,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"defined@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "defined@npm:1.0.0"
-  checksum: 77672997c5001773371c4dbcce98da0b3dc43089d6da2ad87c4b800adb727633cea8723ea3889fe0c2112a2404e2fd07e3bfd0e55f7426aa6441d8992045dbd5
-  languageName: node
-  linkType: hard
-
 "delayed-stream@npm:~1.0.0":
   version: 1.0.0
   resolution: "delayed-stream@npm:1.0.0"
@@ -18261,19 +17997,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"detective@npm:^5.2.1":
-  version: 5.2.1
-  resolution: "detective@npm:5.2.1"
-  dependencies:
-    acorn-node: ^1.8.2
-    defined: ^1.0.0
-    minimist: ^1.2.6
-  bin:
-    detective: bin/detective.js
-  checksum: dc4601bbc6be850edb3c2dab7a0eaf5a6169a15ad201679c66d40ea1986df816eeaecd590047f15b0780285f3eeea13b82dca0d4c52a47e744a571e326a72dc9
-  languageName: node
-  linkType: hard
-
 "didyoumean@npm:^1.2.2":
   version: 1.2.2
   resolution: "didyoumean@npm:1.2.2"
@@ -22651,13 +22374,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"i18next-fs-backend@npm:^1.1.4":
-  version: 1.1.4
-  resolution: "i18next-fs-backend@npm:1.1.4"
-  checksum: 7da252aa618f82555a99709b0f8afed997b7b20aeb5e66c92fe13f5b676c80b8a3cad24a1e38c599c6ab6e9169c4be87268c30e48cf1965cbcc8a69ff76bd0a4
-  languageName: node
-  linkType: hard
-
 "i18next-fs-backend@npm:^2.1.1":
   version: 2.1.3
   resolution: "i18next-fs-backend@npm:2.1.3"
@@ -22665,12 +22381,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"i18next@npm:^21.8.13":
-  version: 21.9.1
-  resolution: "i18next@npm:21.9.1"
+"i18next@npm:^23.2.3":
+  version: 23.2.3
+  resolution: "i18next@npm:23.2.3"
   dependencies:
-    "@babel/runtime": ^7.17.2
-  checksum: 1bc59c61fbb27385841f76436c7dd60e9f42a3fb326797db44a65dd165c489420e549b5370e3de75b85f8d61239f4869fc9fbcf63deae5f40ee606bc04916e6d
+    "@babel/runtime": ^7.22.5
+  checksum: 74504bfe1f7784f76b08c9d5e589779c4c65b85b4d44f2b89531bc0cb0fbe18b9abede5eb3e0f3c088ba39455d4271cccf1d40aebadaa82a58d517847b7518b2
   languageName: node
   linkType: hard
 
@@ -24434,15 +24150,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"json5@npm:^2.2.2":
-  version: 2.2.3
-  resolution: "json5@npm:2.2.3"
-  bin:
-    json5: lib/cli.js
-  checksum: 2a7436a93393830bce797d4626275152e37e877b265e94ca69c99e3d20c2b9dab021279146a39cdb700e71b2dd32a4cebd1514cd57cee102b1af906ce5040349
-  languageName: node
-  linkType: hard
-
 "jsonc-parser@npm:^3.2.0":
   version: 3.2.0
   resolution: "jsonc-parser@npm:3.2.0"
@@ -25539,15 +25246,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lucide-react@npm:^0.125.0":
-  version: 0.125.0
-  resolution: "lucide-react@npm:0.125.0"
-  peerDependencies:
-    react: ^16.5.1 || ^17.0.0 || ^18.0.0
-  checksum: 6d86330fd4316a42624d537cc07adc3c51c18a699a02ef3abbd221c3140ae5ac5685396e1f5cb20f5f5ba80fa100523a5a6811c22a51bd13bbfdf65546cfffdf
-  languageName: node
-  linkType: hard
-
 "lucide-react@npm:^0.171.0":
   version: 0.171.0
   resolution: "lucide-react@npm:0.171.0"
@@ -27202,14 +26900,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"next-axiom@npm:^0.16.0":
-  version: 0.16.0
-  resolution: "next-axiom@npm:0.16.0"
+"next-axiom@npm:^0.17.0":
+  version: 0.17.0
+  resolution: "next-axiom@npm:0.17.0"
   dependencies:
     whatwg-fetch: ^3.6.2
   peerDependencies:
     next: ^12.1.4 || ^13
-  checksum: 1b5aa48bf1529560e0f72b9b2e9055da582bba1f5dc149713dbd4d488428944700077170b86ad04f308a49fd923cddb195e7cbe1b218461addf08757c3b36663
+  checksum: fce4193be1ce49a704b80b12ae85b1e5c5a574eede1cd363c4f1ed7b704192a4ad90e99f7d1e90ae92fdd923f7e7a4a61c15b6a58dc86ede4f472ee456b92029
   languageName: node
   linkType: hard
 
@@ -27226,24 +26924,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"next-i18next@npm:^11.3.0":
-  version: 11.3.0
-  resolution: "next-i18next@npm:11.3.0"
-  dependencies:
-    "@babel/runtime": ^7.18.6
-    "@types/hoist-non-react-statics": ^3.3.1
-    core-js: ^3
-    hoist-non-react-statics: ^3.3.2
-    i18next: ^21.8.13
-    i18next-fs-backend: ^1.1.4
-    react-i18next: ^11.18.0
-  peerDependencies:
-    next: ">= 10.0.0"
-    react: ">= 16.8.0"
-  checksum: fbce97a4fbf9ad846c08652471a833c7f173c3e7ddc7cafa1423625b4a684715bb85f76ae06fe9cbed3e70f12b8e78e2459e5bc1a3c3f5c517743f17648f8939
-  languageName: node
-  linkType: hard
-
 "next-i18next@npm:^13.2.2":
   version: 13.3.0
   resolution: "next-i18next@npm:13.3.0"
@@ -27262,14 +26942,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"next-seo@npm:^4.26.0":
-  version: 4.29.0
-  resolution: "next-seo@npm:4.29.0"
+"next-seo@npm:^6.0.0":
+  version: 6.1.0
+  resolution: "next-seo@npm:6.1.0"
   peerDependencies:
     next: ^8.1.1-canary.54 || >=9.0.0
     react: ">=16.0.0"
     react-dom: ">=16.0.0"
-  checksum: c725138f2b0a17a4b09afddeeb6d4e1b291220bbd083e8855f7c7646dfb14a742c8dd5a9fd8d5abea4e5a7b978675746b9ce54b119b7d6ceb060a880aace5db8
+  checksum: 5909d34d12dd8ac641d7fa96b6fe562470e1539f582c0a3f2b5e35f16b9b0e402d9f909a84393f80989bd96c034118712a5aecb520e5a45662e02fa23db7b656
   languageName: node
   linkType: hard
 
@@ -27325,7 +27005,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"next@npm:^13.4.6, next@npm:~13.4.6":
+"next@npm:^13.4.6":
   version: 13.4.6
   resolution: "next@npm:13.4.6"
   dependencies:
@@ -29368,7 +29048,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^8.2.15, postcss@npm:^8.4.17, postcss@npm:^8.4.18":
+"postcss@npm:^8.2.15, postcss@npm:^8.4.18":
   version: 8.4.18
   resolution: "postcss@npm:8.4.18"
   dependencies:
@@ -30526,11 +30206,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-i18next@npm:^11.18.0":
-  version: 11.18.4
-  resolution: "react-i18next@npm:11.18.4"
+"react-i18next@npm:^12.2.0":
+  version: 12.3.1
+  resolution: "react-i18next@npm:12.3.1"
   dependencies:
-    "@babel/runtime": ^7.14.5
+    "@babel/runtime": ^7.20.6
     html-parse-stringify: ^3.0.1
   peerDependencies:
     i18next: ">= 19.0.0"
@@ -30540,7 +30220,7 @@ __metadata:
       optional: true
     react-native:
       optional: true
-  checksum: c64546e22447410cb09020156d86a35cc672f5e34899155456068a7caedfb70dacd70e3619e671ebc831b11d0ca95c1de1c56897842fd1de401a87b86d040beb
+  checksum: fe3f360e5184bc63861734e94bf625a09b9ec0d28fab41779a68758af258fd1737dde25ff7a88ddb66c1571a3e3de5b3403825a91b4949bf9832a00615acb87a
   languageName: node
   linkType: hard
 
@@ -30649,15 +30329,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-live-chat-loader@npm:^2.7.3":
-  version: 2.7.3
-  resolution: "react-live-chat-loader@npm:2.7.3"
-  peerDependencies:
-    react: ^16.14.0 || ^17.0.0
-  checksum: 5411dc4746dc872519980a0c839f74ec27d01e72bb3df20b5b0015f49f4907ff2da00a725865227e0d1d53cef420da20a2f7644570e8e9d45b7f80658c545472
-  languageName: node
-  linkType: hard
-
 "react-live-chat-loader@npm:^2.8.1":
   version: 2.8.1
   resolution: "react-live-chat-loader@npm:2.8.1"
@@ -30758,13 +30429,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-refresh@npm:^0.13.0":
-  version: 0.13.0
-  resolution: "react-refresh@npm:0.13.0"
-  checksum: 1cf2b87ed99e1d388aa3923078bc30cd3ce43ee86e8936944e961d3643c6e85da41ebed6a0996e8bdad75a0d2ce3b7e10638b45018231380d4a174f63a451f75
-  languageName: node
-  linkType: hard
-
 "react-refresh@npm:^0.14.0":
   version: 0.14.0
   resolution: "react-refresh@npm:0.14.0"
@@ -32249,21 +31913,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"satori@npm:0.0.44":
-  version: 0.0.44
-  resolution: "satori@npm:0.0.44"
-  dependencies:
-    "@shuding/opentype.js": 1.4.0-beta.0
-    css-background-parser: ^0.1.0
-    css-box-shadow: 1.0.0-3
-    css-to-react-native: ^3.0.0
-    emoji-regex: ^10.2.1
-    postcss-value-parser: ^4.2.0
-    yoga-layout-prebuilt: ^1.10.0
-  checksum: a6087d9c615d1239c7d0864bac61c21b5fab7c78260127e72de60368d26aaaff7aeb90a7c6f8a632eabc43f05668e28ba19345ceff82d534b7a94b309876315d
-  languageName: node
-  linkType: hard
-
 "satori@npm:0.4.4":
   version: 0.4.4
   resolution: "satori@npm:0.4.4"
@@ -34202,42 +33851,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tailwindcss@npm:^3.2.1":
-  version: 3.2.1
-  resolution: "tailwindcss@npm:3.2.1"
-  dependencies:
-    arg: ^5.0.2
-    chokidar: ^3.5.3
-    color-name: ^1.1.4
-    detective: ^5.2.1
-    didyoumean: ^1.2.2
-    dlv: ^1.1.3
-    fast-glob: ^3.2.12
-    glob-parent: ^6.0.2
-    is-glob: ^4.0.3
-    lilconfig: ^2.0.6
-    micromatch: ^4.0.5
-    normalize-path: ^3.0.0
-    object-hash: ^3.0.0
-    picocolors: ^1.0.0
-    postcss: ^8.4.17
-    postcss-import: ^14.1.0
-    postcss-js: ^4.0.0
-    postcss-load-config: ^3.1.4
-    postcss-nested: 6.0.0
-    postcss-selector-parser: ^6.0.10
-    postcss-value-parser: ^4.2.0
-    quick-lru: ^5.1.1
-    resolve: ^1.22.1
-  peerDependencies:
-    postcss: ^8.0.9
-  bin:
-    tailwind: lib/cli.js
-    tailwindcss: lib/cli.js
-  checksum: 8479f6e469b3ac3146fec5bf4b5ec411f24f481087d9db9a9e16bd5169cfe5f6af082b8fe656bbb8829faa8805765104843f549b08b4ba34e972d0743d0c7e94
-  languageName: node
-  linkType: hard
-
 "tailwindcss@npm:^3.3.1":
   version: 3.3.1
   resolution: "tailwindcss@npm:3.3.1"
@@ -35507,16 +35120,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:^4.9.3":
-  version: 4.9.5
-  resolution: "typescript@npm:4.9.5"
-  bin:
-    tsc: bin/tsc
-    tsserver: bin/tsserver
-  checksum: ee000bc26848147ad423b581bd250075662a354d84f0e06eb76d3b892328d8d4440b7487b5a83e851b12b255f55d71835b008a66cbf8f255a11e4400159237db
-  languageName: node
-  linkType: hard
-
 "typescript@npm:^4.9.4":
   version: 4.9.4
   resolution: "typescript@npm:4.9.4"
@@ -35527,16 +35130,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@^4.9.3#~builtin<compat/typescript>":
-  version: 4.9.5
-  resolution: "typescript@patch:typescript@npm%3A4.9.5#~builtin<compat/typescript>::version=4.9.5&hash=23ec76"
-  bin:
-    tsc: bin/tsc
-    tsserver: bin/tsserver
-  checksum: ab417a2f398380c90a6cf5a5f74badd17866adf57f1165617d6a551f059c3ba0a3e4da0d147b3ac5681db9ac76a303c5876394b13b3de75fdd5b1eaa06181c9d
-  languageName: node
-  linkType: hard
-
 "typescript@patch:typescript@^4.9.4#~builtin<compat/typescript>":
   version: 4.9.4
   resolution: "typescript@patch:typescript@npm%3A4.9.4#~builtin<compat/typescript>::version=4.9.4&hash=23ec76"
@@ -37791,7 +37384,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"xtend@npm:^4.0.0, xtend@npm:^4.0.1, xtend@npm:^4.0.2, xtend@npm:~4.0.1":
+"xtend@npm:^4.0.0, xtend@npm:^4.0.1, xtend@npm:~4.0.1":
   version: 4.0.2
   resolution: "xtend@npm:4.0.2"
   checksum: ac5dfa738b21f6e7f0dd6e65e1b3155036d68104e67e5d5d1bde74892e327d7e5636a076f625599dc394330a731861e87343ff184b0047fef1360a7ec0a5a36a
@@ -37996,7 +37589,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yoga-layout-prebuilt@npm:^1.10.0, yoga-layout-prebuilt@npm:^1.9.6":
+"yoga-layout-prebuilt@npm:^1.9.6":
   version: 1.10.0
   resolution: "yoga-layout-prebuilt@npm:1.10.0"
   dependencies:
@@ -38005,13 +37598,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yoga-wasm-web@npm:0.1.2":
-  version: 0.1.2
-  resolution: "yoga-wasm-web@npm:0.1.2"
-  checksum: 0e7fa70efe1cf50888e950a43104545b15df7267e66a3b7b072092d04dec78815966f4ab685db5de83a026318f93a3bd5404d866c42a6b7457f9fdc8533593ef
-  languageName: node
-  linkType: hard
-
 "yoga-wasm-web@npm:0.3.3, yoga-wasm-web@npm:^0.3.3":
   version: 0.3.3
   resolution: "yoga-wasm-web@npm:0.3.3"