From 51d553559f634d98d7cba2f2ac98c221ba74584c Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@gmail.com>
Date: Wed, 9 Feb 2022 00:05:13 +0000
Subject: [PATCH] tailwind prettier (#1646)

* tailwind prettier

* Minor fixes

* Sorts components and pages

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Co-authored-by: zomars <zomars@me.com>
---
 .prettierrc.js                                |   1 +
 .vscode/extensions.json                       |   1 -
 @types/@wojtekmaj:react-daterange-picker.d.ts |  15 ++
 components/AddToHomescreen.tsx                |  16 +-
 components/DestinationCalendarSelector.tsx    |   6 +-
 components/Dialog.tsx                         |   8 +-
 components/EmptyScreen.tsx                    |   8 +-
 components/ImageUploader.tsx                  |  20 +-
 components/List.tsx                           |   2 +-
 components/Logo.tsx                           |   2 +-
 components/NavTabs.tsx                        |   8 +-
 components/Shell.tsx                          |  90 ++++-----
 components/Slider.tsx                         |   2 +-
 components/Swatch.tsx                         |   8 +-
 components/Tooltip.tsx                        |   2 +-
 components/auth/SAMLLogin.tsx                 |   2 +-
 components/auth/TwoFactor.tsx                 |   2 +-
 components/booking/AvailableTimes.tsx         |  14 +-
 components/booking/BookingListItem.tsx        |  12 +-
 components/booking/DatePicker.tsx             |  20 +-
 components/booking/TimeOptions.tsx            |  12 +-
 components/booking/pages/AvailabilityPage.tsx |  32 +--
 components/booking/pages/BookingPage.tsx      |  54 ++---
 .../dialog/ConfirmationDialogContent.tsx      |  18 +-
 components/error/error-page.tsx               |  14 +-
 components/eventtype/CreateEventType.tsx      |  12 +-
 components/eventtype/EventTypeDescription.tsx |  12 +-
 components/form/fields.tsx                    |  10 +-
 .../integrations/CalendarListContainer.tsx    |   2 +-
 .../integrations/IntegrationListItem.tsx      |   4 +-
 .../pages/eventtypes/CustomInputTypeForm.tsx  |  19 +-
 components/security/ChangePasswordSection.tsx |   8 +-
 components/security/DisableTwoFactorModal.tsx |   2 +-
 components/security/EnableTwoFactorModal.tsx  |   6 +-
 components/security/TwoFactorAuthSection.tsx  |   4 +-
 components/security/TwoFactorModalHeader.tsx  |   6 +-
 components/team/MemberChangeRoleModal.tsx     |   4 +-
 components/team/MemberInvitationModal.tsx     |  26 +--
 components/team/MemberList.tsx                |   2 +-
 components/team/MemberListItem.tsx            |  24 +--
 components/team/TeamCreateModal.tsx           |  16 +-
 components/team/TeamList.tsx                  |   2 +-
 components/team/TeamListItem.tsx              |  16 +-
 components/team/TeamPill.tsx                  |  12 +-
 components/team/TeamSettings.tsx              |  16 +-
 components/team/TeamSettingsRightSidebar.tsx  |   4 +-
 components/team/UpgradeToFlexibleProModal.tsx |   2 +-
 components/team/screens/Team.tsx              |   8 +-
 components/ui/Alert.tsx                       |   8 +-
 components/ui/AuthContainer.tsx               |  12 +-
 components/ui/Avatar.tsx                      |   2 +-
 components/ui/AvatarGroup.tsx                 |   2 +-
 components/ui/Badge.tsx                       |   2 +-
 components/ui/Button.tsx                      |  10 +-
 components/ui/Dropdown.tsx                    |   4 +-
 components/ui/InfoBadge.tsx                   |   2 +-
 components/ui/LinkIconButton.tsx              |   4 +-
 components/ui/ModalContainer.tsx              |  12 +-
 components/ui/PoweredByCal.tsx                |   8 +-
 components/ui/Scheduler.tsx                   |  10 +-
 components/ui/SettingInputContainer.tsx       |   6 +-
 components/ui/Switch.tsx                      |   8 +-
 components/ui/TableActions.tsx                |  10 +-
 components/ui/WeekdaySelect.tsx               |   6 +-
 components/ui/colorpicker.tsx                 |   6 +-
 components/ui/form/CheckboxField.tsx          |   8 +-
 components/ui/form/CheckedSelect.tsx          |  53 +++--
 components/ui/form/DatePicker.tsx             |   4 +-
 components/ui/form/DateRangePicker.tsx        |   4 +-
 components/ui/form/MinutesField.tsx           |   6 +-
 components/ui/form/PhoneInput.tsx             |   2 +-
 components/ui/form/Schedule.tsx               |   6 +-
 .../ui/form/radio-area/RadioAreaGroup.tsx     |   2 +-
 components/ui/form/radio-area/Select.tsx      |  23 ++-
 components/ui/modal/SetTimesModal.tsx         |  86 ++++----
 .../ui/svg/UserCalendarIllustration.tsx       |   2 +-
 ee/components/LicenseBanner.tsx               |  32 +--
 ee/components/TrialBanner.tsx                 |   4 +-
 ee/components/saml/Configuration.tsx          |   4 +-
 ee/components/stripe/Payment.tsx              |   2 +-
 ee/components/stripe/PaymentPage.tsx          |  18 +-
 .../availability/TeamAvailabilityModal.tsx    |  14 +-
 .../availability/TeamAvailabilityScreen.tsx   |  22 +-
 .../availability/TeamAvailabilityTimes.tsx    |   4 +-
 ee/components/web3/CryptoSection.tsx          |   8 +-
 ee/lib/intercom/HelpMenuItem.tsx              |   2 +-
 lib/core/http/error/http-error.ts             |   4 +-
 .../components/AddCalDavIntegration.tsx       |   8 +-
 package.json                                  |   1 +
 pages/404.tsx                                 | 112 +++++------
 pages/[user].tsx                              |  18 +-
 pages/auth/error.tsx                          |   6 +-
 pages/auth/forgot-password/[id].tsx           |  22 +-
 pages/auth/forgot-password/index.tsx          |   2 +-
 pages/auth/login.tsx                          |   4 +-
 pages/auth/logout.tsx                         |   6 +-
 pages/auth/signup.tsx                         |  22 +-
 pages/availability/index.tsx                  |   8 +-
 pages/availability/troubleshoot.tsx           |  14 +-
 pages/bookings/[status].tsx                   |   8 +-
 pages/call/[uid].tsx                          |   2 +-
 pages/call/meeting-ended/[uid].tsx            |  18 +-
 pages/call/meeting-not-started/[uid].tsx      |  18 +-
 pages/call/no-meeting-found.tsx               |  14 +-
 pages/cancel/[uid].tsx                        |  24 +--
 pages/cancel/success.tsx                      |  12 +-
 pages/event-types/[type].tsx                  | 190 +++++++++---------
 pages/event-types/index.tsx                   |  56 +++---
 pages/getting-started.tsx                     |  40 ++--
 pages/integrations/index.tsx                  |  68 +++----
 pages/sandbox/Alert.tsx                       |   4 +-
 pages/sandbox/Badge.tsx                       |   4 +-
 pages/sandbox/Button.tsx                      |   4 +-
 pages/sandbox/RadioArea.tsx                   |  16 +-
 pages/sandbox/form.tsx                        |   6 +-
 pages/sandbox/index.tsx                       |   4 +-
 pages/settings/billing.tsx                    |  12 +-
 pages/settings/profile.tsx                    |  52 ++---
 pages/settings/security.tsx                   |   2 +-
 pages/settings/teams.tsx                      |   4 +-
 pages/settings/teams/[id].tsx                 |   8 +-
 pages/success.tsx                             |  44 ++--
 pages/team/[slug].tsx                         |  14 +-
 styles/globals.css                            |  62 +++---
 yarn.lock                                     |   5 +
 125 files changed, 977 insertions(+), 945 deletions(-)
 create mode 100644 @types/@wojtekmaj:react-daterange-picker.d.ts

diff --git a/.prettierrc.js b/.prettierrc.js
index bd891544e4..a24db20059 100644
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -9,4 +9,5 @@ module.exports = {
   arrowParens: "always",
   importOrder: ["^@ee/(.*)$", "^@lib/(.*)$", "^@components/(.*)$", "^@(server|trpc)/(.*)$", "^[./]"],
   importOrderSeparation: true,
+  plugins: [require("prettier-plugin-tailwindcss")],
 };
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index d95fa075db..e0b5078f4f 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -5,7 +5,6 @@
     "esbenp.prettier-vscode", // prettier plugin
     "dbaeumer.vscode-eslint", // eslint plugin
     "bradlc.vscode-tailwindcss", // hinting / autocompletion for tailwind
-    "heybourn.headwind", // automatically sort tailwind classes in predictable order, kinda like "prettier for tailwind",
     "ban.spellright", // Spell check for docs
     "stripe.vscode-stripe" // stripe VSCode extension
   ]
diff --git a/@types/@wojtekmaj:react-daterange-picker.d.ts b/@types/@wojtekmaj:react-daterange-picker.d.ts
new file mode 100644
index 0000000000..8383940892
--- /dev/null
+++ b/@types/@wojtekmaj:react-daterange-picker.d.ts
@@ -0,0 +1,15 @@
+declare module "@wojtekmaj/react-daterange-picker/dist/entry.nostyle" {
+  import { CalendarProps } from "react-calendar";
+  export type DateRangePickerCalendarProps = Omit<
+    CalendarProps,
+    "calendarClassName" | "onChange" | "value"
+  > & {
+    calendarClassName?: string;
+    onChange: (value: [Date, Date]) => void;
+    value: [Date, Date];
+    clearIcon: JSX.Element | null;
+    calendarIcon: JSX.Element | null;
+    rangeDivider: JSX.Element | null;
+  };
+  export default function DateRangePicker(props: DateRangePickerCalendarProps): JSX.Element;
+}
diff --git a/components/AddToHomescreen.tsx b/components/AddToHomescreen.tsx
index defdb65e07..edfeef4175 100644
--- a/components/AddToHomescreen.tsx
+++ b/components/AddToHomescreen.tsx
@@ -14,13 +14,13 @@ export default function AddToHomescreen() {
   }
   return !closeBanner ? (
     <div className="fixed inset-x-0 bottom-0 pb-2 sm:hidden sm:pb-5">
-      <div className="px-2 mx-auto max-w-7xl sm:px-6 lg:px-8">
-        <div className="p-2 rounded-lg shadow-lg sm:p-3" style={{ background: "#2F333D" }}>
+      <div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
+        <div className="rounded-lg p-2 shadow-lg sm:p-3" style={{ background: "#2F333D" }}>
           <div className="flex flex-wrap items-center justify-between">
-            <div className="flex items-center flex-1 w-0">
-              <span className="flex p-2 rounded-lg bg-opacity-30 bg-brand text-brandcontrast">
+            <div className="flex w-0 flex-1 items-center">
+              <span className="flex rounded-lg bg-brand bg-opacity-30 p-2 text-brandcontrast">
                 <svg
-                  className="text-indigo-500 fill-current h-7 w-7"
+                  className="h-7 w-7 fill-current text-indigo-500"
                   xmlns="http://www.w3.org/2000/svg"
                   viewBox="0 0 50 50"
                   enableBackground="new 0 0 50 50">
@@ -34,13 +34,13 @@ export default function AddToHomescreen() {
               </p>
             </div>
 
-            <div className="flex-shrink-0 order-2 sm:order-3">
+            <div className="order-2 flex-shrink-0 sm:order-3">
               <button
                 onClick={() => setCloseBanner(true)}
                 type="button"
-                className="flex p-2 -mr-1 rounded-md hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-white">
+                className="-mr-1 flex rounded-md p-2 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-white">
                 <span className="sr-only">{t("dismiss")}</span>
-                <XIcon className="w-6 h-6 text-white" aria-hidden="true" />
+                <XIcon className="h-6 w-6 text-white" aria-hidden="true" />
               </button>
             </div>
           </div>
diff --git a/components/DestinationCalendarSelector.tsx b/components/DestinationCalendarSelector.tsx
index ef9dd1f740..93c6321318 100644
--- a/components/DestinationCalendarSelector.tsx
+++ b/components/DestinationCalendarSelector.tsx
@@ -56,8 +56,8 @@ const DestinationCalendarSelector = ({
     <div className="relative">
       {/* There's no easy way to customize the displayed value for a Select, so we fake it. */}
       {!hidePlaceholder && (
-        <div className="absolute z-10 pointer-events-none">
-          <Button size="sm" color="secondary" className="border-transparent m-[1px] rounded-sm">
+        <div className="pointer-events-none absolute z-10">
+          <Button size="sm" color="secondary" className="m-[1px] rounded-sm border-transparent">
             {t("select_destination_calendar")}: {selectedOption?.label || ""}
           </Button>
         </div>
@@ -67,7 +67,7 @@ const DestinationCalendarSelector = ({
         placeholder={!hidePlaceholder ? `${t("select_destination_calendar")}:` : undefined}
         options={options}
         isSearchable={false}
-        className="flex-1 block w-full min-w-0 mt-1 mb-2 border-gray-300 rounded-none focus:ring-primary-500 focus:border-primary-500 rounded-r-md sm:text-sm"
+        className="mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-md border-gray-300 focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
         onChange={(option) => {
           setSelectedOption(option);
           if (!option) {
diff --git a/components/Dialog.tsx b/components/Dialog.tsx
index 38639bb9c0..5d77c465e2 100644
--- a/components/Dialog.tsx
+++ b/components/Dialog.tsx
@@ -6,7 +6,7 @@ export function Dialog(props: DialogProps) {
   const { children, ...other } = props;
   return (
     <DialogPrimitive.Root {...other}>
-      <DialogPrimitive.Overlay className="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" />
+      <DialogPrimitive.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
       {children}
     </DialogPrimitive.Root>
   );
@@ -17,7 +17,7 @@ export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps
   ({ children, ...props }, forwardedRef) => (
     <DialogPrimitive.Content
       {...props}
-      className="min-w-[360px] fixed left-1/2 top-1/2 p-6 text-left bg-white rounded shadow-xl -translate-x-1/2 -translate-y-1/2 sm:align-middle sm:w-full sm:max-w-lg"
+      className="fixed left-1/2 top-1/2 min-w-[360px] -translate-x-1/2 -translate-y-1/2 rounded bg-white p-6 text-left shadow-xl sm:w-full sm:max-w-lg sm:align-middle"
       ref={forwardedRef}>
       {children}
     </DialogPrimitive.Content>
@@ -32,7 +32,7 @@ type DialogHeaderProps = {
 export function DialogHeader(props: DialogHeaderProps) {
   return (
     <div className="mb-8">
-      <h3 className="text-xl text-gray-900 leading-16 font-cal" id="modal-title">
+      <h3 className="leading-16 font-cal text-xl text-gray-900" id="modal-title">
         {props.title}
       </h3>
       {props.subtitle && <div className="text-sm text-gray-400">{props.subtitle}</div>}
@@ -43,7 +43,7 @@ export function DialogHeader(props: DialogHeaderProps) {
 export function DialogFooter(props: { children: ReactNode }) {
   return (
     <div>
-      <div className="flex justify-end mt-5 rtl:space-x-reverse space-x-2">{props.children}</div>
+      <div className="mt-5 flex justify-end space-x-2 rtl:space-x-reverse">{props.children}</div>
     </div>
   );
 }
diff --git a/components/EmptyScreen.tsx b/components/EmptyScreen.tsx
index feadb03632..a1ea0e3eb7 100644
--- a/components/EmptyScreen.tsx
+++ b/components/EmptyScreen.tsx
@@ -13,12 +13,12 @@ export default function EmptyScreen({
 }) {
   return (
     <>
-      <div className="min-h-80 border border-dashed rounded-sm flex justify-center items-center flex-col my-6">
-        <div className="bg-white w-[72px] h-[72px] flex justify-center items-center rounded-full">
-          <Icon className="inline-block w-10 h-10 bg-white" />
+      <div className="my-6 flex min-h-80 flex-col items-center justify-center rounded-sm border border-dashed">
+        <div className="flex h-[72px] w-[72px] items-center justify-center rounded-full bg-white">
+          <Icon className="inline-block h-10 w-10 bg-white" />
         </div>
         <div className="max-w-[420px] text-center">
-          <h2 className="text-lg font-medium mt-6 mb-1">{headline}</h2>
+          <h2 className="mt-6 mb-1 text-lg font-medium">{headline}</h2>
           <p className="text-sm leading-6 text-gray-600">{description}</p>
         </div>
       </div>
diff --git a/components/ImageUploader.tsx b/components/ImageUploader.tsx
index 111d0f2a68..e77c147649 100644
--- a/components/ImageUploader.tsx
+++ b/components/ImageUploader.tsx
@@ -38,8 +38,8 @@ function CropContainer({
   };
 
   return (
-    <div className="w-40 h-40 rounded-full crop-container max-h-40">
-      <div className="relative w-40 h-40 rounded-full">
+    <div className="crop-container h-40 max-h-40 w-40 rounded-full">
+      <div className="relative h-40 w-40 rounded-full">
         <Cropper
           image={imageSrc}
           crop={crop}
@@ -119,38 +119,38 @@ export default function ImageUploader({
       <DialogContent>
         <div className="mb-4 sm:flex sm:items-start">
           <div className="mt-3 text-center sm:mt-0 sm:text-left">
-            <h3 className="text-lg font-bold leading-6 text-gray-900 font-cal" id="modal-title">
+            <h3 className="font-cal text-lg font-bold leading-6 text-gray-900" id="modal-title">
               {t("upload_target", { target })}
             </h3>
           </div>
         </div>
         <div className="mb-4">
-          <div className="flex flex-col items-center justify-center p-8 mt-6 cropper">
+          <div className="cropper mt-6 flex flex-col items-center justify-center p-8">
             {!result && (
-              <div className="flex items-center justify-start w-20 h-20 bg-gray-50 rounded-full max-h-20">
+              <div className="flex h-20 max-h-20 w-20 items-center justify-start rounded-full bg-gray-50">
                 {!imageSrc && (
-                  <p className="w-full text-sm text-center text-white sm:text-xs">
+                  <p className="w-full text-center text-sm text-white sm:text-xs">
                     {t("no_target", { target })}
                   </p>
                 )}
-                {imageSrc && <img className="w-20 h-20 rounded-full" src={imageSrc} alt={target} />}
+                {imageSrc && <img className="h-20 w-20 rounded-full" src={imageSrc} alt={target} />}
               </div>
             )}
             {result && <CropContainer imageSrc={result as string} onCropComplete={setCroppedAreaPixels} />}
-            <label className="px-3 py-1 mt-8 text-xs font-medium leading-4 text-gray-700 bg-white border border-gray-300 rounded-sm hover:bg-gray-50 hover:text-gray-900 hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-neutral-900 dark:bg-transparent dark:text-white dark:border-gray-800 dark:hover:bg-gray-900">
+            <label className="mt-8 rounded-sm border border-gray-300 bg-white px-3 py-1 text-xs font-medium leading-4 text-gray-700 hover:bg-gray-50 hover:text-gray-900 hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-1 dark:border-gray-800 dark:bg-transparent dark:text-white dark:hover:bg-gray-900">
               <input
                 onInput={onInputFile}
                 type="file"
                 name={id}
                 placeholder={t("upload_image")}
-                className="absolute mt-4 opacity-0 pointer-events-none"
+                className="pointer-events-none absolute mt-4 opacity-0"
                 accept="image/*"
               />
               {t("choose_a_file")}
             </label>
           </div>
         </div>
-        <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse gap-x-2">
+        <div className="mt-5 gap-x-2 sm:mt-4 sm:flex sm:flex-row-reverse">
           <DialogClose asChild>
             <Button onClick={() => showCroppedImage(croppedAreaPixels)}>{t("save")}</Button>
           </DialogClose>
diff --git a/components/List.tsx b/components/List.tsx
index 0d7ae7a0ab..f9eb647ac4 100644
--- a/components/List.tsx
+++ b/components/List.tsx
@@ -5,7 +5,7 @@ import classNames from "@lib/classNames";
 
 export function List(props: JSX.IntrinsicElements["ul"]) {
   return (
-    <ul {...props} className={classNames("sm:overflow-hidden rounded-sm sm:mx-0 -mx-4", props.className)}>
+    <ul {...props} className={classNames("-mx-4 rounded-sm sm:mx-0 sm:overflow-hidden", props.className)}>
       {props.children}
     </ul>
   );
diff --git a/components/Logo.tsx b/components/Logo.tsx
index f9c2686d4b..40923b4a74 100644
--- a/components/Logo.tsx
+++ b/components/Logo.tsx
@@ -3,7 +3,7 @@ export default function Logo({ small, icon }: { small?: boolean; icon?: boolean
     <h1 className="inline">
       <strong>
         {icon ? (
-          <img className="w-9 mx-auto" alt="Cal" title="Cal" src="/cal-com-icon-white.svg" />
+          <img className="mx-auto w-9" alt="Cal" title="Cal" src="/cal-com-icon-white.svg" />
         ) : (
           <img
             className={small ? "h-4 w-auto" : "h-5 w-auto"}
diff --git a/components/NavTabs.tsx b/components/NavTabs.tsx
index c358100588..b0946f0442 100644
--- a/components/NavTabs.tsx
+++ b/components/NavTabs.tsx
@@ -18,7 +18,7 @@ const NavTabs: FC<Props> = ({ tabs, linkProps }) => {
   return (
     <>
       <nav
-        className="flex -mb-px space-x-2 space-x-5 rtl:space-x-reverse sm:rtl:space-x-reverse"
+        className="-mb-px flex space-x-2 space-x-5 rtl:space-x-reverse sm:rtl:space-x-reverse"
         aria-label="Tabs">
         {tabs.map((tab) => {
           const isCurrent = router.asPath === tab.href;
@@ -28,15 +28,15 @@ const NavTabs: FC<Props> = ({ tabs, linkProps }) => {
                 className={classNames(
                   isCurrent
                     ? "border-neutral-900 text-neutral-900"
-                    : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
-                  "group inline-flex items-center py-4 px-1 border-b-2 font-medium text-sm"
+                    : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700",
+                  "group inline-flex items-center border-b-2 py-4 px-1 text-sm font-medium"
                 )}
                 aria-current={isCurrent ? "page" : undefined}>
                 {tab.icon && (
                   <tab.icon
                     className={classNames(
                       isCurrent ? "text-neutral-900" : "text-gray-400 group-hover:text-gray-500",
-                      "-ml-0.5 ltr:mr-2 rtl:ml-2 h-5 w-5 hidden sm:inline-block"
+                      "-ml-0.5 hidden h-5 w-5 ltr:mr-2 rtl:ml-2 sm:inline-block"
                     )}
                     aria-hidden="true"
                   />
diff --git a/components/Shell.tsx b/components/Shell.tsx
index 2fbcbc2f09..c579f9726d 100644
--- a/components/Shell.tsx
+++ b/components/Shell.tsx
@@ -104,12 +104,12 @@ export function ShellSubHeading(props: {
   className?: string;
 }) {
   return (
-    <div className={classNames("block sm:flex justify-between mb-3", props.className)}>
+    <div className={classNames("mb-3 block justify-between sm:flex", props.className)}>
       <div>
-        <h2 className="flex items-center content-center space-x-2 text-base font-bold leading-6 text-gray-900 rtl:space-x-reverse">
+        <h2 className="flex content-center items-center space-x-2 text-base font-bold leading-6 text-gray-900 rtl:space-x-reverse">
           {props.title}
         </h2>
-        {props.subtitle && <p className="text-sm ltr:mr-4 text-neutral-500">{props.subtitle}</p>}
+        {props.subtitle && <p className="text-sm text-neutral-500 ltr:mr-4">{props.subtitle}</p>}
       </div>
       {props.actions && <div className="flex-shrink-0">{props.actions}</div>}
     </div>
@@ -184,7 +184,7 @@ export default function Shell(props: {
   if (i18n.status === "loading" || isRedirectingToOnboarding || loading) {
     // show spinner whilst i18n is loading to avoid language flicker
     return (
-      <div className="absolute z-50 flex items-center w-full h-screen bg-gray-50">
+      <div className="absolute z-50 flex h-screen w-full items-center bg-gray-50">
         <Loader />
       </div>
     );
@@ -206,9 +206,9 @@ export default function Shell(props: {
 
       <div className="flex h-screen overflow-hidden bg-gray-100" data-testid="dashboard-shell">
         <div className="hidden md:flex lg:flex-shrink-0">
-          <div className="flex flex-col w-14 lg:w-56">
-            <div className="flex flex-col flex-1 h-0 bg-white border-r border-gray-200">
-              <div className="flex flex-col flex-1 pt-3 pb-4 overflow-y-auto lg:pt-5">
+          <div className="flex w-14 flex-col lg:w-56">
+            <div className="flex h-0 flex-1 flex-col border-r border-gray-200 bg-white">
+              <div className="flex flex-1 flex-col overflow-y-auto pt-3 pb-4 lg:pt-5">
                 <Link href="/event-types">
                   <a className="px-4 md:hidden lg:inline">
                     <Logo small />
@@ -220,7 +220,7 @@ export default function Shell(props: {
                     <Logo small icon />
                   </a>
                 </Link>
-                <nav className="flex-1 px-2 mt-2 space-y-1 bg-white lg:mt-5">
+                <nav className="mt-2 flex-1 space-y-1 bg-white px-2 lg:mt-5">
                   {navigation.map((item) => (
                     <Link key={item.name} href={item.href}>
                       <a
@@ -228,14 +228,14 @@ export default function Shell(props: {
                           item.current
                             ? "bg-neutral-100 text-neutral-900"
                             : "text-neutral-500 hover:bg-gray-50 hover:text-neutral-900",
-                          "group flex items-center px-2 py-2 text-sm font-medium rounded-sm"
+                          "group flex items-center rounded-sm px-2 py-2 text-sm font-medium"
                         )}>
                         <item.icon
                           className={classNames(
                             item.current
                               ? "text-neutral-500"
                               : "text-neutral-400 group-hover:text-neutral-500",
-                            "ltr:mr-3 rtl:ml-3 flex-shrink-0 h-5 w-5"
+                            "h-5 w-5 flex-shrink-0 ltr:mr-3 rtl:ml-3"
                           )}
                           aria-hidden="true"
                         />
@@ -246,7 +246,7 @@ export default function Shell(props: {
                 </nav>
               </div>
               <TrialBanner />
-              <div className="p-2 pt-2 pr-2 m-2 rounded-sm hover:bg-gray-100">
+              <div className="m-2 rounded-sm p-2 pt-2 pr-2 hover:bg-gray-100">
                 <span className="hidden lg:inline">
                   <UserDropdown />
                 </span>
@@ -258,25 +258,25 @@ export default function Shell(props: {
           </div>
         </div>
 
-        <div className="flex flex-col flex-1 w-0 overflow-hidden">
+        <div className="flex w-0 flex-1 flex-col overflow-hidden">
           <main
             className={classNames(
-              "flex-1 relative z-0 overflow-y-auto focus:outline-none max-w-[1700px]",
+              "relative z-0 max-w-[1700px] flex-1 overflow-y-auto focus:outline-none",
               props.flexChildrenContainer && "flex flex-col"
             )}>
             {/* show top navigation for md and smaller (tablet and phones) */}
-            <nav className="flex items-center justify-between p-4 bg-white border-b border-gray-200 md:hidden">
+            <nav className="flex items-center justify-between border-b border-gray-200 bg-white p-4 md:hidden">
               <Link href="/event-types">
                 <a>
                   <Logo />
                 </a>
               </Link>
-              <div className="flex items-center self-center gap-3">
-                <button className="p-2 text-gray-400 bg-white rounded-full hover:text-gray-500 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black">
+              <div className="flex items-center gap-3 self-center">
+                <button className="rounded-full bg-white p-2 text-gray-400 hover:bg-gray-50 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2">
                   <span className="sr-only">{t("view_notifications")}</span>
                   <Link href="/settings/profile">
                     <a>
-                      <CogIcon className="w-6 h-6" aria-hidden="true" />
+                      <CogIcon className="h-6 w-6" aria-hidden="true" />
                     </a>
                   </Link>
                 </button>
@@ -285,8 +285,8 @@ export default function Shell(props: {
             </nav>
             <div
               className={classNames(
-                props.centered && "md:max-w-5xl mx-auto",
-                props.flexChildrenContainer && "flex flex-col flex-1",
+                props.centered && "mx-auto md:max-w-5xl",
+                props.flexChildrenContainer && "flex flex-1 flex-col",
                 "py-8"
               )}>
               {!!props.backPath && (
@@ -299,25 +299,25 @@ export default function Shell(props: {
                   </Button>
                 </div>
               )}
-              <div className="block sm:flex justify-between px-4 sm:px-6 md:px-8 min-h-[80px]">
+              <div className="block min-h-[80px] justify-between px-4 sm:flex sm:px-6 md:px-8">
                 {props.HeadingLeftIcon && <div className="ltr:mr-4">{props.HeadingLeftIcon}</div>}
-                <div className="w-full mb-8">
-                  <h1 className="mb-1 text-xl font-bold tracking-wide text-gray-900 font-cal">
+                <div className="mb-8 w-full">
+                  <h1 className="mb-1 font-cal text-xl font-bold tracking-wide text-gray-900">
                     {props.heading}
                   </h1>
-                  <p className="text-sm ltr:mr-4 rtl:ml-4 text-neutral-500">{props.subtitle}</p>
+                  <p className="text-sm text-neutral-500 ltr:mr-4 rtl:ml-4">{props.subtitle}</p>
                 </div>
-                <div className="flex-shrink-0 mb-4">{props.CTA}</div>
+                <div className="mb-4 flex-shrink-0">{props.CTA}</div>
               </div>
               <div
                 className={classNames(
                   "px-4 sm:px-6 md:px-8",
-                  props.flexChildrenContainer && "flex flex-col flex-1"
+                  props.flexChildrenContainer && "flex flex-1 flex-col"
                 )}>
                 {props.children}
               </div>
               {/* show bottom navigation for md and smaller (tablet and phones) */}
-              <nav className="fixed bottom-0 z-40 flex w-full bg-white shadow bottom-nav md:hidden">
+              <nav className="bottom-nav fixed bottom-0 z-40 flex w-full bg-white shadow md:hidden">
                 {/* note(PeerRich): using flatMap instead of map to remove settings from bottom nav */}
                 {navigation.flatMap((item, itemIdx) =>
                   item.href === "/settings/profile" ? (
@@ -329,13 +329,13 @@ export default function Shell(props: {
                           item.current ? "text-gray-900" : "text-neutral-400 hover:text-gray-700",
                           itemIdx === 0 ? "rounded-l-lg" : "",
                           itemIdx === navigation.length - 1 ? "rounded-r-lg" : "",
-                          "group relative min-w-0 flex-1 overflow-hidden bg-white py-2 px-2 text-xs sm:text-sm font-medium text-center hover:bg-gray-50 focus:z-10"
+                          "group relative min-w-0 flex-1 overflow-hidden bg-white py-2 px-2 text-center text-xs font-medium hover:bg-gray-50 focus:z-10 sm:text-sm"
                         )}
                         aria-current={item.current ? "page" : undefined}>
                         <item.icon
                           className={classNames(
                             item.current ? "text-gray-900" : "text-gray-400 group-hover:text-gray-500",
-                            "block mx-auto flex-shrink-0 h-5 w-5 mb-1 text-center"
+                            "mx-auto mb-1 block h-5 w-5 flex-shrink-0 text-center"
                           )}
                           aria-hidden="true"
                         />
@@ -370,11 +370,11 @@ function UserDropdown({ small }: { small?: boolean }) {
   return (
     <Dropdown>
       <DropdownMenuTrigger asChild>
-        <div className="flex items-center w-full appearance-none cursor-pointer group">
+        <div className="group flex w-full cursor-pointer appearance-none items-center">
           <span
             className={classNames(
-              small ? "w-8 h-8" : "w-10 h-10",
-              "bg-gray-300 rounded-full flex-shrink-0 relative  ltr:mr-3 rtl:ml-3"
+              small ? "h-8 w-8" : "h-10 w-10",
+              "relative flex-shrink-0 rounded-full bg-gray-300  ltr:mr-3 rtl:ml-3"
             )}>
             <img
               className="rounded-full"
@@ -387,24 +387,24 @@ function UserDropdown({ small }: { small?: boolean }) {
               alt={user?.username || "Nameless User"}
             />
             {!user?.away && (
-              <div className="absolute bottom-0 right-0 w-3 h-3 bg-green-500 border-2 border-white rounded-full"></div>
+              <div className="absolute bottom-0 right-0 h-3 w-3 rounded-full border-2 border-white bg-green-500"></div>
             )}
             {user?.away && (
-              <div className="absolute bottom-0 right-0 w-3 h-3 bg-yellow-500 border-2 border-white rounded-full"></div>
+              <div className="absolute bottom-0 right-0 h-3 w-3 rounded-full border-2 border-white bg-yellow-500"></div>
             )}
           </span>
           {!small && (
-            <span className="flex items-center flex-grow truncate">
-              <span className="flex-grow text-sm truncate">
-                <span className="block font-medium text-gray-900 truncate">
+            <span className="flex flex-grow items-center truncate">
+              <span className="flex-grow truncate text-sm">
+                <span className="block truncate font-medium text-gray-900">
                   {user?.username || "Nameless User"}
                 </span>
-                <span className="block font-normal truncate text-neutral-500">
+                <span className="block truncate font-normal text-neutral-500">
                   {user?.username ? `cal.com/${user.username}` : "No public page"}
                 </span>
               </span>
               <SelectorIcon
-                className="flex-shrink-0 w-5 h-5 text-gray-400 group-hover:text-gray-500"
+                className="h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
                 aria-hidden="true"
               />
             </span>
@@ -418,13 +418,13 @@ function UserDropdown({ small }: { small?: boolean }) {
               mutation.mutate({ away: !user?.away });
               utils.invalidateQueries("viewer.me");
             }}
-            className="flex px-4 py-2 text-sm cursor-pointer hover:bg-gray-100 hover:text-gray-900">
+            className="flex cursor-pointer px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900">
             <MoonIcon
               className={classNames(
                 user?.away
                   ? "text-purple-500 group-hover:text-purple-700"
                   : "text-gray-500 group-hover:text-gray-700",
-                "ltr:mr-3 rtl:ml-3 flex-shrink-0 h-5 w-5"
+                "h-5 w-5 flex-shrink-0 ltr:mr-3 rtl:ml-3"
               )}
               aria-hidden="true"
             />
@@ -439,7 +439,7 @@ function UserDropdown({ small }: { small?: boolean }) {
               rel="noopener noreferrer"
               href={`${process.env.NEXT_PUBLIC_APP_URL}/${user.username}`}
               className="flex items-center px-4 py-2 text-sm text-gray-700">
-              <ExternalLinkIcon className="w-5 h-5 text-gray-500 ltr:mr-3 rtl:ml-3" /> {t("view_public_page")}
+              <ExternalLinkIcon className="h-5 w-5 text-gray-500 ltr:mr-3 rtl:ml-3" /> {t("view_public_page")}
             </a>
           </DropdownMenuItem>
         )}
@@ -454,7 +454,7 @@ function UserDropdown({ small }: { small?: boolean }) {
               viewBox="0 0 2447.6 2452.5"
               className={classNames(
                 "text-gray-500 group-hover:text-gray-700",
-                "mt-0.5 ltr:mr-2 rtl:ml-2 flex-shrink-0 h-4 w-4"
+                "mt-0.5 h-4 w-4 flex-shrink-0 ltr:mr-2 rtl:ml-2"
               )}
               xmlns="http://www.w3.org/2000/svg">
               <g clipRule="evenodd" fillRule="evenodd">
@@ -481,7 +481,7 @@ function UserDropdown({ small }: { small?: boolean }) {
             rel="noopener noreferrer"
             href="https://cal.com/roadmap"
             className="flex items-center px-4 py-2 text-sm text-gray-700">
-            <MapIcon className="w-5 h-5 text-gray-500 ltr:mr-3 rtl:ml-3" /> {t("visit_roadmap")}
+            <MapIcon className="h-5 w-5 text-gray-500 ltr:mr-3 rtl:ml-3" /> {t("visit_roadmap")}
           </a>
         </DropdownMenuItem>
         <HelpMenuItemDynamic />
@@ -489,11 +489,11 @@ function UserDropdown({ small }: { small?: boolean }) {
         <DropdownMenuItem>
           <a
             onClick={() => signOut({ callbackUrl: "/auth/logout" })}
-            className="flex px-4 py-2 text-sm cursor-pointer hover:bg-gray-100 hover:text-gray-900">
+            className="flex cursor-pointer px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900">
             <LogoutIcon
               className={classNames(
                 "text-gray-500 group-hover:text-gray-700",
-                "ltr:mr-3 rtl:ml-3 flex-shrink-0 h-5 w-5"
+                "h-5 w-5 flex-shrink-0 ltr:mr-3 rtl:ml-3"
               )}
               aria-hidden="true"
             />
diff --git a/components/Slider.tsx b/components/Slider.tsx
index 40e2daa440..cf8e4d54ee 100644
--- a/components/Slider.tsx
+++ b/components/Slider.tsx
@@ -12,7 +12,7 @@ const Slider = ({
   changeHandler: (value: number) => void;
 }) => (
   <SliderPrimitive.Root
-    className="mt-2 slider"
+    className="slider mt-2"
     value={[value]}
     aria-label={label}
     onValueChange={(value: number[]) => changeHandler(value[0] ?? value)}
diff --git a/components/Swatch.tsx b/components/Swatch.tsx
index 89a49af86c..a124fe5ca6 100644
--- a/components/Swatch.tsx
+++ b/components/Swatch.tsx
@@ -9,15 +9,15 @@ export type SwatchProps = {
 const Swatch = (props: SwatchProps) => {
   const { size, backgroundColor, onClick } = props;
   return (
-    <div className="p-1 border-2 border-gray-200 shadow-sm">
+    <div className="border-2 border-gray-200 p-1 shadow-sm">
       <div
         onClick={onClick}
         style={{ backgroundColor }}
         className={classNames(
           "cursor-pointer",
-          size === "sm" && "w-6 h-6 rounded-sm",
-          size === "base" && "w-16 h-16 rounded-sm",
-          size === "lg" && "w-24 h-24 rounded-sm"
+          size === "sm" && "h-6 w-6 rounded-sm",
+          size === "base" && "h-16 w-16 rounded-sm",
+          size === "lg" && "h-24 w-24 rounded-sm"
         )}></div>
     </div>
   );
diff --git a/components/Tooltip.tsx b/components/Tooltip.tsx
index 7103c0ffeb..0bf5ff314f 100644
--- a/components/Tooltip.tsx
+++ b/components/Tooltip.tsx
@@ -23,7 +23,7 @@ export function Tooltip({
       onOpenChange={onOpenChange}>
       <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
       <TooltipPrimitive.Content
-        className="bg-black text-xs -mt-2 text-white px-1 py-0.5 shadow-lg rounded-sm"
+        className="-mt-2 rounded-sm bg-black px-1 py-0.5 text-xs text-white shadow-lg"
         side="top"
         align="center"
         {...props}>
diff --git a/components/auth/SAMLLogin.tsx b/components/auth/SAMLLogin.tsx
index 217f9bc396..1deea12796 100644
--- a/components/auth/SAMLLogin.tsx
+++ b/components/auth/SAMLLogin.tsx
@@ -35,7 +35,7 @@ export default function SAMLLogin(props: Props) {
       <Button
         color="secondary"
         data-testid={"saml"}
-        className="flex justify-center w-full"
+        className="flex w-full justify-center"
         onClick={async (event) => {
           event.preventDefault();
 
diff --git a/components/auth/TwoFactor.tsx b/components/auth/TwoFactor.tsx
index ea0429919f..a54a5d3dd8 100644
--- a/components/auth/TwoFactor.tsx
+++ b/components/auth/TwoFactor.tsx
@@ -26,7 +26,7 @@ export default function TwoFactor() {
   const className = "h-12 w-12 !text-xl text-center";
 
   return (
-    <div className="max-w-sm mx-auto !mt-0">
+    <div className="mx-auto !mt-0 max-w-sm">
       <p className="mb-4 text-sm text-gray-500">{t("2fa_enabled_instructions")}</p>
       <input hidden type="hidden" value={value} {...methods.register("totpCode")} />
       <div className="flex flex-row space-x-1">
diff --git a/components/booking/AvailableTimes.tsx b/components/booking/AvailableTimes.tsx
index 5b2eb65e33..55442924b2 100644
--- a/components/booking/AvailableTimes.tsx
+++ b/components/booking/AvailableTimes.tsx
@@ -55,8 +55,8 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
   }, []);
 
   return (
-    <div className="flex flex-col mt-8 text-center sm:pl-4 sm:mt-0 sm:w-1/3 md:-mb-5">
-      <div className="mb-4 text-lg font-light text-left text-gray-600">
+    <div className="mt-8 flex flex-col text-center sm:mt-0 sm:w-1/3 sm:pl-4 md:-mb-5">
+      <div className="mb-4 text-left text-lg font-light text-gray-600">
         <span className="w-1/2 text-gray-600 dark:text-white">
           <strong>{date.toDate().toLocaleString(i18n.language, { weekday: "long" })}</strong>
           <span className="text-gray-500">
@@ -65,7 +65,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
           </span>
         </span>
       </div>
-      <div className="flex-grow md:h-[364px] overflow-y-auto">
+      <div className="flex-grow overflow-y-auto md:h-[364px]">
         {!loading &&
           slots?.length > 0 &&
           slots.map((slot) => {
@@ -95,7 +95,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
                 <Link href={bookingUrl}>
                   <a
                     className={classNames(
-                      "block py-4 mb-2 font-medium bg-white border rounded-sm dark:bg-gray-600 text-primary-500 dark:text-neutral-200 dark:border-transparent hover:text-white hover:bg-brand hover:text-brandcontrast dark:hover:border-black dark:hover:bg-brand dark:hover:text-brandcontrast",
+                      "mb-2 block rounded-sm border bg-white py-4 font-medium text-primary-500 hover:bg-brand hover:text-white hover:text-brandcontrast dark:border-transparent dark:bg-gray-600 dark:text-neutral-200 dark:hover:border-black dark:hover:bg-brand dark:hover:text-brandcontrast",
                       brand === "#fff" || brand === "#ffffff" ? "border-brandcontrast" : "border-brand"
                     )}
                     data-testid="time">
@@ -106,7 +106,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
             );
           })}
         {!loading && !error && !slots.length && (
-          <div className="flex flex-col items-center content-center justify-center w-full h-full -mt-4">
+          <div className="-mt-4 flex h-full w-full flex-col content-center items-center justify-center">
             <h1 className="my-6 text-xl text-black dark:text-white">{t("all_booked_today")}</h1>
           </div>
         )}
@@ -114,10 +114,10 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
         {loading && <Loader />}
 
         {error && (
-          <div className="p-4 border-l-4 border-yellow-400 bg-yellow-50">
+          <div className="border-l-4 border-yellow-400 bg-yellow-50 p-4">
             <div className="flex">
               <div className="flex-shrink-0">
-                <ExclamationIcon className="w-5 h-5 text-yellow-400" aria-hidden="true" />
+                <ExclamationIcon className="h-5 w-5 text-yellow-400" aria-hidden="true" />
               </div>
               <div className="ltr:ml-3 rtl:mr-3">
                 <p className="text-sm text-yellow-700">{t("slots_load_fail")}</p>
diff --git a/components/booking/BookingListItem.tsx b/components/booking/BookingListItem.tsx
index 3c7e507951..45efad8432 100644
--- a/components/booking/BookingListItem.tsx
+++ b/components/booking/BookingListItem.tsx
@@ -74,13 +74,13 @@ function BookingListItem(booking: BookingItem) {
 
   return (
     <tr className="flex">
-      <td className="hidden py-4 align-top ltr:pl-6 rtl:pr-6 sm:table-cell whitespace-nowrap">
+      <td className="hidden whitespace-nowrap py-4 align-top ltr:pl-6 rtl:pr-6 sm:table-cell">
         <div className="text-sm leading-6 text-gray-900">{startTime}</div>
         <div className="text-sm text-gray-500">
           {dayjs(booking.startTime).format("HH:mm")} - {dayjs(booking.endTime).format("HH:mm")}
         </div>
       </td>
-      <td className={"ltr:pl-4 rtl:pr-4 py-4 flex-1" + (booking.rejected ? " line-through" : "")}>
+      <td className={"flex-1 py-4 ltr:pl-4 rtl:pr-4" + (booking.rejected ? " line-through" : "")}>
         <div className="sm:hidden">
           {!booking.confirmed && !booking.rejected && (
             <Tag className="mb-2 ltr:mr-2 rtl:ml-2">{t("unconfirmed")}</Tag>
@@ -97,7 +97,7 @@ function BookingListItem(booking: BookingItem) {
         </div>
         <div
           title={booking.title}
-          className="text-sm font-medium leading-6 truncate text-neutral-900 max-w-56 md:max-w-max">
+          className="max-w-56 truncate text-sm font-medium leading-6 text-neutral-900 md:max-w-max">
           {booking.eventType?.team && <strong>{booking.eventType.team.name}: </strong>}
           {booking.title}
           {!!booking?.eventType?.price && !booking.paid && (
@@ -108,7 +108,7 @@ function BookingListItem(booking: BookingItem) {
           )}
         </div>
         {booking.description && (
-          <div className="text-sm text-gray-500 truncate max-w-52 md:max-w-96" title={booking.description}>
+          <div className="max-w-52 truncate text-sm text-gray-500 md:max-w-96" title={booking.description}>
             &quot;{booking.description}&quot;
           </div>
         )}
@@ -119,7 +119,7 @@ function BookingListItem(booking: BookingItem) {
         )}
       </td>
 
-      <td className="py-4 text-sm font-medium text-right ltr:pr-4 rtl:pl-4 whitespace-nowrap">
+      <td className="whitespace-nowrap py-4 text-right text-sm font-medium ltr:pr-4 rtl:pl-4">
         {isUpcoming && !isCancelled ? (
           <>
             {!booking.confirmed && !booking.rejected && <TableActions actions={pendingActions} />}
@@ -137,7 +137,7 @@ function BookingListItem(booking: BookingItem) {
 const Tag = ({ children, className = "" }: React.PropsWithChildren<{ className?: string }>) => {
   return (
     <span
-      className={`inline-flex items-center px-1.5 py-0.5 rounded-sm text-xs font-medium bg-yellow-100 text-yellow-800 ${className}`}>
+      className={`inline-flex items-center rounded-sm bg-yellow-100 px-1.5 py-0.5 text-xs font-medium text-yellow-800 ${className}`}>
       {children}
     </span>
   );
diff --git a/components/booking/DatePicker.tsx b/components/booking/DatePicker.tsx
index f51b8670c5..884892678d 100644
--- a/components/booking/DatePicker.tsx
+++ b/components/booking/DatePicker.tsx
@@ -163,10 +163,10 @@ function DatePicker({
       className={
         "mt-8 sm:mt-0 sm:min-w-[455px] " +
         (date
-          ? "w-full sm:w-1/2 md:w-1/3 sm:border-r sm:dark:border-gray-800 sm:pl-4 sm:pr-6 "
+          ? "w-full sm:w-1/2 sm:border-r sm:pl-4 sm:pr-6 sm:dark:border-gray-800 md:w-1/3 "
           : "w-full sm:pl-4")
       }>
-      <div className="flex mb-4 text-xl font-light text-gray-600">
+      <div className="mb-4 flex text-xl font-light text-gray-600">
         <span className="w-1/2 text-gray-600 dark:text-white">
           <strong className="text-gray-900 dark:text-white">{month}</strong>{" "}
           <span className="text-gray-500">{year}</span>
@@ -175,21 +175,21 @@ function DatePicker({
           <button
             onClick={decrementMonth}
             className={classNames(
-              "group ltr:mr-2 rtl:ml-2 p-1",
+              "group p-1 ltr:mr-2 rtl:ml-2",
               isFirstMonth && "text-gray-400 dark:text-gray-600"
             )}
             disabled={isFirstMonth}
             data-testid="decrementMonth">
-            <ChevronLeftIcon className="w-5 h-5 group-hover:text-black dark:group-hover:text-white" />
+            <ChevronLeftIcon className="h-5 w-5 group-hover:text-black dark:group-hover:text-white" />
           </button>
-          <button className="p-1 group" onClick={incrementMonth} data-testid="incrementMonth">
-            <ChevronRightIcon className="w-5 h-5 group-hover:text-black dark:group-hover:text-white" />
+          <button className="group p-1" onClick={incrementMonth} data-testid="incrementMonth">
+            <ChevronRightIcon className="h-5 w-5 group-hover:text-black dark:group-hover:text-white" />
           </button>
         </div>
       </div>
-      <div className="grid grid-cols-7 gap-4 text-center border-t border-b dark:border-gray-800 sm:border-0">
+      <div className="grid grid-cols-7 gap-4 border-t border-b text-center dark:border-gray-800 sm:border-0">
         {weekdayNames(i18n.language, weekStart === "Sunday" ? 0 : 1, "short").map((weekDay) => (
-          <div key={weekDay} className="my-4 text-xs tracking-widest text-gray-500 uppercase">
+          <div key={weekDay} className="my-4 text-xs uppercase tracking-widest text-gray-500">
             {weekDay}
           </div>
         ))}
@@ -209,9 +209,9 @@ function DatePicker({
                 onClick={() => onDatePicked(browsingDate.date(day.date))}
                 disabled={day.disabled}
                 className={classNames(
-                  "absolute w-full top-0 left-0 right-0 bottom-0 rounded-sm text-center mx-auto",
+                  "absolute top-0 left-0 right-0 bottom-0 mx-auto w-full rounded-sm text-center",
                   "hover:border hover:border-brand dark:hover:border-white",
-                  day.disabled ? "text-gray-400 font-light hover:border-0 cursor-default" : "font-medium",
+                  day.disabled ? "cursor-default font-light text-gray-400 hover:border-0" : "font-medium",
                   date && date.isSame(browsingDate.date(day.date), "day")
                     ? "bg-brand text-brandcontrast"
                     : !day.disabled
diff --git a/components/booking/TimeOptions.tsx b/components/booking/TimeOptions.tsx
index bb77b020ca..72d7be60b1 100644
--- a/components/booking/TimeOptions.tsx
+++ b/components/booking/TimeOptions.tsx
@@ -35,8 +35,8 @@ const TimeOptions: FC<Props> = (props) => {
   };
 
   return selectedTimeZone !== "" ? (
-    <div className="absolute z-10 w-full px-4 py-2 bg-white border border-gray-200 rounded-sm max-w-80 dark:bg-gray-700 dark:border-0">
-      <div className="flex mb-4">
+    <div className="absolute z-10 w-full max-w-80 rounded-sm border border-gray-200 bg-white px-4 py-2 dark:border-0 dark:bg-gray-700">
+      <div className="mb-4 flex">
         <div className="w-1/2 font-medium text-gray-600 dark:text-white">{t("time_options")}</div>
         <div className="w-1/2">
           <Switch.Group as="div" className="flex items-center justify-end">
@@ -47,15 +47,15 @@ const TimeOptions: FC<Props> = (props) => {
               checked={is24hClock}
               onChange={handle24hClockToggle}
               className={classNames(
-                is24hClock ? "bg-brand text-brandcontrast" : "dark:bg-gray-600 bg-gray-200",
-                "relative inline-flex flex-shrink-0 h-5 w-8 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black"
+                is24hClock ? "bg-brand text-brandcontrast" : "bg-gray-200 dark:bg-gray-600",
+                "relative inline-flex h-5 w-8 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2"
               )}>
               <span className="sr-only">{t("use_setting")}</span>
               <span
                 aria-hidden="true"
                 className={classNames(
                   is24hClock ? "translate-x-3" : "translate-x-0",
-                  "pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
+                  "pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
                 )}
               />
             </Switch>
@@ -69,7 +69,7 @@ const TimeOptions: FC<Props> = (props) => {
         id="timeZone"
         value={selectedTimeZone}
         onChange={(tz: ITimezoneOption) => setSelectedTimeZone(tz.value)}
-        className="block w-full mt-1 mb-2 border-gray-300 rounded-md shadow-sm focus:ring-black focus:border-brand sm:text-sm"
+        className="mt-1 mb-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand focus:ring-black sm:text-sm"
       />
     </div>
   ) : null;
diff --git a/components/booking/pages/AvailabilityPage.tsx b/components/booking/pages/AvailabilityPage.tsx
index f985611dbe..82f00a13a4 100644
--- a/components/booking/pages/AvailabilityPage.tsx
+++ b/components/booking/pages/AvailabilityPage.tsx
@@ -110,11 +110,11 @@ const AvailabilityPage = ({ profile, eventType, workingHours }: Props) => {
       <div>
         <main
           className={
-            "mx-auto my-0 md:my-24 transition-max-width ease-in-out duration-500 " +
+            "transition-max-width mx-auto my-0 duration-500 ease-in-out md:my-24 " +
             (selectedDate ? "max-w-5xl" : "max-w-3xl")
           }>
           {isReady && (
-            <div className="bg-white border-gray-200 rounded-sm sm:dark:border-gray-600 dark:bg-gray-900 md:border">
+            <div className="rounded-sm border-gray-200 bg-white dark:bg-gray-900 sm:dark:border-gray-600 md:border">
               {/* mobile: details */}
               <div className="block p-4 sm:p-8 md:hidden">
                 <div className="flex items-center">
@@ -139,12 +139,12 @@ const AvailabilityPage = ({ profile, eventType, workingHours }: Props) => {
                     <div className="flex gap-2 text-xs font-medium text-gray-600">
                       {eventType.title}
                       <div>
-                        <ClockIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
+                        <ClockIcon className="mr-1 -mt-1 inline-block h-4 w-4" />
                         {eventType.length} {t("minutes")}
                       </div>
                       {eventType.price > 0 && (
                         <div>
-                          <CreditCardIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
+                          <CreditCardIcon className="mr-1 -mt-1 inline-block h-4 w-4" />
                           <IntlProvider locale="en">
                             <FormattedNumber
                               value={eventType.price / 100.0}
@@ -160,10 +160,10 @@ const AvailabilityPage = ({ profile, eventType, workingHours }: Props) => {
                 <p className="mt-3 text-gray-600 dark:text-gray-200">{eventType.description}</p>
               </div>
 
-              <div className="px-4 sm:flex sm:py-5 sm:p-4">
+              <div className="px-4 sm:flex sm:p-4 sm:py-5">
                 <div
                   className={
-                    "hidden md:block pr-8 sm:border-r sm:dark:border-gray-800 " +
+                    "hidden pr-8 sm:border-r sm:dark:border-gray-800 md:block " +
                     (selectedDate ? "sm:w-1/3" : "sm:w-1/2")
                   }>
                   <AvatarGroup
@@ -183,16 +183,16 @@ const AvailabilityPage = ({ profile, eventType, workingHours }: Props) => {
                     truncateAfter={3}
                   />
                   <h2 className="mt-3 font-medium text-gray-500 dark:text-gray-300">{profile.name}</h2>
-                  <h1 className="mb-4 text-3xl font-semibold text-gray-800 font-cal dark:text-white">
+                  <h1 className="mb-4 font-cal text-3xl font-semibold text-gray-800 dark:text-white">
                     {eventType.title}
                   </h1>
-                  <p className="px-2 py-1 mb-1 -ml-2 text-gray-500">
-                    <ClockIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
+                  <p className="mb-1 -ml-2 px-2 py-1 text-gray-500">
+                    <ClockIcon className="mr-1 -mt-1 inline-block h-4 w-4" />
                     {eventType.length} {t("minutes")}
                   </p>
                   {eventType.price > 0 && (
-                    <p className="px-2 py-1 mb-1 -ml-2 text-gray-500">
-                      <CreditCardIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
+                    <p className="mb-1 -ml-2 px-2 py-1 text-gray-500">
+                      <CreditCardIcon className="mr-1 -mt-1 inline-block h-4 w-4" />
                       <IntlProvider locale="en">
                         <FormattedNumber
                           value={eventType.price / 100.0}
@@ -221,7 +221,7 @@ const AvailabilityPage = ({ profile, eventType, workingHours }: Props) => {
                   minimumBookingNotice={eventType.minimumBookingNotice}
                 />
 
-                <div className="block mt-4 ml-1 sm:hidden">
+                <div className="mt-4 ml-1 block sm:hidden">
                   <TimezoneDropdown />
                 </div>
 
@@ -249,13 +249,13 @@ const AvailabilityPage = ({ profile, eventType, workingHours }: Props) => {
   function TimezoneDropdown() {
     return (
       <Collapsible.Root open={isTimeOptionsOpen} onOpenChange={setIsTimeOptionsOpen}>
-        <Collapsible.Trigger className="px-2 py-1 mb-1 -ml-2 text-left text-gray-500 min-w-32">
-          <GlobeIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
+        <Collapsible.Trigger className="mb-1 -ml-2 min-w-32 px-2 py-1 text-left text-gray-500">
+          <GlobeIcon className="mr-1 -mt-1 inline-block h-4 w-4" />
           {timeZone()}
           {isTimeOptionsOpen ? (
-            <ChevronUpIcon className="inline-block w-4 h-4 ml-1 -mt-1" />
+            <ChevronUpIcon className="ml-1 -mt-1 inline-block h-4 w-4" />
           ) : (
-            <ChevronDownIcon className="inline-block w-4 h-4 ml-1 -mt-1" />
+            <ChevronDownIcon className="ml-1 -mt-1 inline-block h-4 w-4" />
           )}
         </Collapsible.Trigger>
         <Collapsible.Content>
diff --git a/components/booking/pages/BookingPage.tsx b/components/booking/pages/BookingPage.tsx
index 4ffda4bd92..a890387d53 100644
--- a/components/booking/pages/BookingPage.tsx
+++ b/components/booking/pages/BookingPage.tsx
@@ -291,9 +291,9 @@ const BookingPage = (props: BookingPageProps) => {
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <CustomBranding val={props.profile.brandColor} />
-      <main className="max-w-3xl mx-auto my-0 rounded-sm sm:my-24 sm:border sm:dark:border-gray-600">
+      <main className=" mx-auto my-0 max-w-3xl rounded-sm sm:my-24 sm:border sm:dark:border-gray-600">
         {isReady && (
-          <div className="overflow-hidden bg-white border border-gray-200 dark:bg-neutral-900 dark:border-0 sm:rounded-sm">
+          <div className="overflow-hidden border border-gray-200 bg-white dark:border-0 dark:bg-neutral-900 sm:rounded-sm">
             <div className="px-4 py-5 sm:flex sm:p-4">
               <div className="sm:w-1/2 sm:border-r sm:dark:border-gray-800">
                 <AvatarGroup
@@ -307,19 +307,19 @@ const BookingPage = (props: BookingPageProps) => {
                       }))
                   )}
                 />
-                <h2 className="mt-2 font-medium text-gray-500 font-cal dark:text-gray-300">
+                <h2 className="mt-2 font-cal font-medium text-gray-500 dark:text-gray-300">
                   {props.profile.name}
                 </h2>
                 <h1 className="mb-4 text-3xl font-semibold text-gray-800 dark:text-white">
                   {props.eventType.title}
                 </h1>
                 <p className="mb-2 text-gray-500">
-                  <ClockIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
+                  <ClockIcon className="mr-1 -mt-1 inline-block h-4 w-4" />
                   {props.eventType.length} {t("minutes")}
                 </p>
                 {props.eventType.price > 0 && (
-                  <p className="px-2 py-1 mb-1 -ml-2 text-gray-500">
-                    <CreditCardIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
+                  <p className="mb-1 -ml-2 px-2 py-1 text-gray-500">
+                    <CreditCardIcon className="mr-1 -mt-1 inline-block h-4 w-4" />
                     <IntlProvider locale="en">
                       <FormattedNumber
                         value={props.eventType.price / 100.0}
@@ -331,22 +331,22 @@ const BookingPage = (props: BookingPageProps) => {
                 )}
                 {selectedLocation === LocationType.InPerson && (
                   <p className="mb-2 text-gray-500">
-                    <LocationMarkerIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
+                    <LocationMarkerIcon className="mr-1 -mt-1 inline-block h-4 w-4" />
                     {getLocationValue({ locationType: selectedLocation })}
                   </p>
                 )}
                 {selectedLocation === LocationType.Jitsi && (
                   <p className="mb-2 text-gray-500">
-                    <LocationMarkerIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
+                    <LocationMarkerIcon className="mr-1 -mt-1 inline-block h-4 w-4" />
                     Jitsi Meet
                   </p>
                 )}
                 <p className="mb-4 text-green-500">
-                  <CalendarIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
+                  <CalendarIcon className="mr-1 -mt-1 inline-block h-4 w-4" />
                   {parseDate(date)}
                 </p>
                 {eventTypeDetail.isWeb3Active && eventType.metadata.smartContractAddress && (
-                  <p className="px-2 py-1 mb-1 -ml-2 text-gray-500">
+                  <p className="mb-1 -ml-2 px-2 py-1 text-gray-500">
                     Requires ownership of a token belonging to the following address:{" "}
                     {eventType.metadata.smartContractAddress}
                   </p>
@@ -366,7 +366,7 @@ const BookingPage = (props: BookingPageProps) => {
                         name="name"
                         id="name"
                         required
-                        className="block w-full border-gray-300 rounded-sm shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-brand sm:text-sm"
+                        className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-brand focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white sm:text-sm"
                         placeholder="John Doe"
                       />
                     </div>
@@ -381,7 +381,7 @@ const BookingPage = (props: BookingPageProps) => {
                       <EmailInput
                         {...bookingForm.register("email")}
                         required
-                        className="block w-full border-gray-300 rounded-sm shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-brand sm:text-sm"
+                        className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-brand focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white sm:text-sm"
                         placeholder="you@example.com"
                       />
                     </div>
@@ -395,12 +395,12 @@ const BookingPage = (props: BookingPageProps) => {
                         <label key={i} className="block">
                           <input
                             type="radio"
-                            className="w-4 h-4 text-black border-gray-300 ltr:mr-2 rtl:ml-2 location focus:ring-black"
+                            className="location h-4 w-4 border-gray-300 text-black focus:ring-black ltr:mr-2 rtl:ml-2"
                             {...bookingForm.register("locationType", { required: true })}
                             value={location.type}
                             defaultChecked={selectedLocation === location.type}
                           />
-                          <span className="ltr:ml-2 rtl:mr-2text-sm dark:text-gray-500">
+                          <span className="rtl:mr-2text-sm ltr:ml-2 dark:text-gray-500">
                             {locationLabels[location.type]}
                           </span>
                         </label>
@@ -428,7 +428,7 @@ const BookingPage = (props: BookingPageProps) => {
                         {input.type !== EventTypeCustomInputType.BOOL && (
                           <label
                             htmlFor={"custom_" + input.id}
-                            className="block mb-1 text-sm font-medium text-gray-700 dark:text-white">
+                            className="mb-1 block text-sm font-medium text-gray-700 dark:text-white">
                             {input.label}
                           </label>
                         )}
@@ -439,7 +439,7 @@ const BookingPage = (props: BookingPageProps) => {
                             })}
                             id={"custom_" + input.id}
                             rows={3}
-                            className="block w-full border-gray-300 rounded-sm shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-brand sm:text-sm"
+                            className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-brand focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white sm:text-sm"
                             placeholder={input.placeholder}
                           />
                         )}
@@ -450,7 +450,7 @@ const BookingPage = (props: BookingPageProps) => {
                               required: input.required,
                             })}
                             id={"custom_" + input.id}
-                            className="block w-full border-gray-300 rounded-sm shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-brand sm:text-sm"
+                            className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-brand focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white sm:text-sm"
                             placeholder={input.placeholder}
                           />
                         )}
@@ -461,24 +461,24 @@ const BookingPage = (props: BookingPageProps) => {
                               required: input.required,
                             })}
                             id={"custom_" + input.id}
-                            className="block w-full border-gray-300 rounded-sm shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-brand sm:text-sm"
+                            className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-brand focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white sm:text-sm"
                             placeholder=""
                           />
                         )}
                         {input.type === EventTypeCustomInputType.BOOL && (
-                          <div className="flex items-center h-5">
+                          <div className="flex h-5 items-center">
                             <input
                               type="checkbox"
                               {...bookingForm.register(`customInputs.${input.id}`, {
                                 required: input.required,
                               })}
                               id={"custom_" + input.id}
-                              className="w-4 h-4 text-black border-gray-300 rounded ltr:mr-2 rtl:ml-2 focus:ring-black"
+                              className="h-4 w-4 rounded border-gray-300 text-black focus:ring-black ltr:mr-2 rtl:ml-2"
                               placeholder=""
                             />
                             <label
                               htmlFor={"custom_" + input.id}
-                              className="block mb-1 text-sm font-medium text-gray-700 dark:text-white">
+                              className="mb-1 block text-sm font-medium text-gray-700 dark:text-white">
                               {input.label}
                             </label>
                           </div>
@@ -491,7 +491,7 @@ const BookingPage = (props: BookingPageProps) => {
                         <label
                           onClick={() => setGuestToggle(!guestToggle)}
                           htmlFor="guests"
-                          className="block mb-1 text-sm font-medium dark:text-white hover:cursor-pointer">
+                          className="mb-1 block text-sm font-medium hover:cursor-pointer dark:text-white">
                           {/*<UserAddIcon className="inline-block w-5 h-5 mr-1 -mt-1" />*/}
                           {t("additional_guests")}
                         </label>
@@ -500,7 +500,7 @@ const BookingPage = (props: BookingPageProps) => {
                         <div>
                           <label
                             htmlFor="guests"
-                            className="block mb-1 text-sm font-medium text-gray-700 dark:text-white">
+                            className="mb-1 block text-sm font-medium text-gray-700 dark:text-white">
                             {t("guests")}
                           </label>
                           <Controller
@@ -536,14 +536,14 @@ const BookingPage = (props: BookingPageProps) => {
                   <div className="mb-4">
                     <label
                       htmlFor="notes"
-                      className="block mb-1 text-sm font-medium text-gray-700 dark:text-white">
+                      className="mb-1 block text-sm font-medium text-gray-700 dark:text-white">
                       {t("additional_notes")}
                     </label>
                     <textarea
                       {...bookingForm.register("notes")}
                       id="notes"
                       rows={3}
-                      className="block w-full border-gray-300 rounded-sm shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-brand sm:text-sm"
+                      className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-brand focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white sm:text-sm"
                       placeholder={t("share_additional_notes")}
                     />
                   </div>
@@ -557,10 +557,10 @@ const BookingPage = (props: BookingPageProps) => {
                   </div>
                 </Form>
                 {mutation.isError && (
-                  <div className="p-4 mt-2 border-l-4 border-yellow-400 bg-yellow-50">
+                  <div className="mt-2 border-l-4 border-yellow-400 bg-yellow-50 p-4">
                     <div className="flex">
                       <div className="flex-shrink-0">
-                        <ExclamationIcon className="w-5 h-5 text-yellow-400" aria-hidden="true" />
+                        <ExclamationIcon className="h-5 w-5 text-yellow-400" aria-hidden="true" />
                       </div>
                       <div className="ltr:ml-3 rtl:mr-3">
                         <p className="text-sm text-yellow-700">
diff --git a/components/dialog/ConfirmationDialogContent.tsx b/components/dialog/ConfirmationDialogContent.tsx
index cf2de3cbec..e97331ec5e 100644
--- a/components/dialog/ConfirmationDialogContent.tsx
+++ b/components/dialog/ConfirmationDialogContent.tsx
@@ -33,26 +33,26 @@ export default function ConfirmationDialogContent(props: PropsWithChildren<Confi
     <DialogContent>
       <div className="flex">
         {variety && (
-          <div className="ltr:mr-3 mt-0.5">
+          <div className="mt-0.5 ltr:mr-3">
             {variety === "danger" && (
-              <div className="p-2 mx-auto text-center bg-red-100 rounded-full">
-                <ExclamationIcon className="w-5 h-5 text-red-600" />
+              <div className="mx-auto rounded-full bg-red-100 p-2 text-center">
+                <ExclamationIcon className="h-5 w-5 text-red-600" />
               </div>
             )}
             {variety === "warning" && (
-              <div className="p-2 mx-auto text-center bg-orange-100 rounded-full">
-                <ExclamationIcon className="w-5 h-5 text-orange-600" />
+              <div className="mx-auto rounded-full bg-orange-100 p-2 text-center">
+                <ExclamationIcon className="h-5 w-5 text-orange-600" />
               </div>
             )}
             {variety === "success" && (
-              <div className="p-2 mx-auto text-center bg-green-100 rounded-full">
-                <CheckIcon className="w-5 h-5 text-green-600" />
+              <div className="mx-auto rounded-full bg-green-100 p-2 text-center">
+                <CheckIcon className="h-5 w-5 text-green-600" />
               </div>
             )}
           </div>
         )}
         <div>
-          <DialogPrimitive.Title className="text-xl font-bold text-gray-900 font-cal">
+          <DialogPrimitive.Title className="font-cal text-xl font-bold text-gray-900">
             {title}
           </DialogPrimitive.Title>
           <DialogPrimitive.Description className="text-sm text-neutral-500">
@@ -60,7 +60,7 @@ export default function ConfirmationDialogContent(props: PropsWithChildren<Confi
           </DialogPrimitive.Description>
         </div>
       </div>
-      <div className="mt-5 sm:mt-8 sm:flex sm:flex-row-reverse gap-x-2">
+      <div className="mt-5 gap-x-2 sm:mt-8 sm:flex sm:flex-row-reverse">
         <DialogClose onClick={onConfirm} asChild>
           {confirmBtn || <Button color="primary">{confirmBtnText}</Button>}
         </DialogClose>
diff --git a/components/error/error-page.tsx b/components/error/error-page.tsx
index 21404af50f..7d5f25fb37 100644
--- a/components/error/error-page.tsx
+++ b/components/error/error-page.tsx
@@ -29,15 +29,15 @@ const ErrorDebugPanel: React.FC<{ error: Props["error"]; children?: never }> = (
   ];
 
   return (
-    <div className="bg-white shadow overflow-hidden sm:rounded-lg">
+    <div className="overflow-hidden bg-white shadow sm:rounded-lg">
       <div className="border-t border-gray-200 px-4 py-5 sm:p-0">
         <dl className="sm:divide-y sm:divide-gray-200">
           {debugMap.map(([key, value]) => {
             if (value !== undefined) {
               return (
-                <div key={key} className="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                <div key={key} className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
                   <dt className="text-sm font-bold text-black">{key}</dt>
-                  <dd className="mt-1 text-sm text-black sm:mt-0 sm:col-span-2">{value}</dd>
+                  <dd className="mt-1 text-sm text-black sm:col-span-2 sm:mt-0">{value}</dd>
                 </div>
               );
             }
@@ -53,11 +53,11 @@ export const ErrorPage: React.FC<Props> = (props) => {
 
   return (
     <>
-      <div className="bg-white min-h-screen px-4">
-        <main className="max-w-xl mx-auto pb-6 pt-16 sm:pt-24">
+      <div className="min-h-screen bg-white px-4">
+        <main className="mx-auto max-w-xl pb-6 pt-16 sm:pt-24">
           <div className="text-center">
-            <p className="text-sm font-semibold text-black uppercase tracking-wide">{statusCode}</p>
-            <h1 className="mt-2 text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl">
+            <p className="text-sm font-semibold uppercase tracking-wide text-black">{statusCode}</p>
+            <h1 className="mt-2 text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl">
               {message}
             </h1>
           </div>
diff --git a/components/eventtype/CreateEventType.tsx b/components/eventtype/CreateEventType.tsx
index 260476399d..e6a53c39e5 100644
--- a/components/eventtype/CreateEventType.tsx
+++ b/components/eventtype/CreateEventType.tsx
@@ -139,7 +139,7 @@ export default function CreateEventTypeButton(props: Props) {
             {props.options.map((option) => (
               <DropdownMenuItem
                 key={option.slug}
-                className="px-3 py-2 cursor-pointer hover:bg-neutral-100 focus:outline-none"
+                className="cursor-pointer px-3 py-2 hover:bg-neutral-100 focus:outline-none"
                 onSelect={() => openModal(option)}>
                 <Avatar
                   alt={option.name || ""}
@@ -207,7 +207,7 @@ export default function CreateEventTypeButton(props: Props) {
                 className="pr-20"
                 {...register("length", { valueAsNumber: true })}
               />
-              <div className="absolute inset-y-0 right-0 flex items-center pt-4 mt-1.5 pr-3 text-sm text-gray-400">
+              <div className="absolute inset-y-0 right-0 mt-1.5 flex items-center pt-4 pr-3 text-sm text-gray-400">
                 {t("minutes")}
               </div>
             </div>
@@ -227,20 +227,20 @@ export default function CreateEventTypeButton(props: Props) {
                 <RadioArea.Group
                   {...register("schedulingType")}
                   onChange={(val) => form.setValue("schedulingType", val as SchedulingType)}
-                  className="relative flex mt-1 rtl:space-x-reverse space-x-6 rounded-sm shadow-sm">
+                  className="relative mt-1 flex space-x-6 rounded-sm shadow-sm rtl:space-x-reverse">
                   <RadioArea.Item value={SchedulingType.COLLECTIVE} className="w-1/2 text-sm">
-                    <strong className="block mb-1">{t("collective")}</strong>
+                    <strong className="mb-1 block">{t("collective")}</strong>
                     <p>{t("collective_description")}</p>
                   </RadioArea.Item>
                   <RadioArea.Item value={SchedulingType.ROUND_ROBIN} className="w-1/2 text-sm">
-                    <strong className="block mb-1">{t("round_robin")}</strong>
+                    <strong className="mb-1 block">{t("round_robin")}</strong>
                     <p>{t("round_robin_description")}</p>
                   </RadioArea.Item>
                 </RadioArea.Group>
               </div>
             )}
           </div>
-          <div className="flex flex-row-reverse mt-8 gap-x-2">
+          <div className="mt-8 flex flex-row-reverse gap-x-2">
             <Button type="submit" loading={createMutation.isLoading}>
               {t("continue")}
             </Button>
diff --git a/components/eventtype/EventTypeDescription.tsx b/components/eventtype/EventTypeDescription.tsx
index 16f2a37435..a9a6d8392b 100644
--- a/components/eventtype/EventTypeDescription.tsx
+++ b/components/eventtype/EventTypeDescription.tsx
@@ -32,31 +32,31 @@ export const EventTypeDescription = ({ eventType, className }: EventTypeDescript
     <>
       <div className={classNames("text-neutral-500 dark:text-white", className)}>
         {eventType.description && (
-          <h2 className="opacity-60 text-ellipsis overflow-hidden max-w-[280px] sm:max-w-[500px]">
+          <h2 className="max-w-[280px] overflow-hidden text-ellipsis opacity-60 sm:max-w-[500px]">
             {eventType.description.substring(0, 100)}
             {eventType.description.length > 100 && "..."}
           </h2>
         )}
-        <ul className="flex mt-2 space-x-4 rtl:space-x-reverse ">
+        <ul className="mt-2 flex space-x-4 rtl:space-x-reverse ">
           <li className="flex whitespace-nowrap">
-            <ClockIcon className="inline mt-0.5 mr-1.5 h-4 w-4 text-neutral-400" aria-hidden="true" />
+            <ClockIcon className="mt-0.5 mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
             {eventType.length}m
           </li>
           {eventType.schedulingType ? (
             <li className="flex whitespace-nowrap">
-              <UsersIcon className="inline mt-0.5 mr-1.5 h-4 w-4 text-neutral-400" aria-hidden="true" />
+              <UsersIcon className="mt-0.5 mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
               {eventType.schedulingType === SchedulingType.ROUND_ROBIN && t("round_robin")}
               {eventType.schedulingType === SchedulingType.COLLECTIVE && t("collective")}
             </li>
           ) : (
             <li className="flex whitespace-nowrap">
-              <UserIcon className="inline mt-0.5 mr-1.5 h-4 w-4 text-neutral-400" aria-hidden="true" />
+              <UserIcon className="mt-0.5 mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
               {t("1_on_1")}
             </li>
           )}
           {eventType.price > 0 && (
             <li className="flex whitespace-nowrap">
-              <CreditCardIcon className="inline mt-0.5 mr-1.5 h-4 w-4 text-neutral-400" aria-hidden="true" />
+              <CreditCardIcon className="mt-0.5 mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
               <IntlProvider locale="en">
                 <FormattedNumber
                   value={eventType.price / 100.0}
diff --git a/components/form/fields.tsx b/components/form/fields.tsx
index ea5c0d5009..1ef7ee4543 100644
--- a/components/form/fields.tsx
+++ b/components/form/fields.tsx
@@ -17,7 +17,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(pro
       {...props}
       ref={ref}
       className={classNames(
-        "mt-1 block w-full border border-gray-300 rounded-sm shadow-sm py-2 px-3 focus:outline-none focus:ring-1 focus:ring-neutral-800 focus:border-neutral-800 sm:text-sm",
+        "mt-1 block w-full rounded-sm border border-gray-300 py-2 px-3 shadow-sm focus:border-neutral-800 focus:outline-none focus:ring-1 focus:ring-neutral-800 sm:text-sm",
         props.className
       )}
     />
@@ -34,7 +34,7 @@ export function Label(props: JSX.IntrinsicElements["label"]) {
 
 export function InputLeading(props: JSX.IntrinsicElements["div"]) {
   return (
-    <span className="inline-flex items-center flex-shrink-0 px-3 text-gray-500 border border-r-0 border-gray-300 rounded-l-sm bg-gray-50 sm:text-sm">
+    <span className="inline-flex flex-shrink-0 items-center rounded-l-sm border border-r-0 border-gray-300 bg-gray-50 px-3 text-gray-500 sm:text-sm">
       {props.children}
     </span>
   );
@@ -69,7 +69,7 @@ const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function InputF
         </Label>
       )}
       {addOnLeading ? (
-        <div className="flex mt-1 rounded-md shadow-sm">
+        <div className="mt-1 flex rounded-md shadow-sm">
           {addOnLeading}
           <Input
             id={id}
@@ -136,7 +136,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function
       ref={ref}
       {...props}
       className={classNames(
-        "block w-full font-mono border-gray-300 rounded-sm shadow-sm focus:ring-neutral-900 focus:border-neutral-900 sm:text-sm",
+        "font-mono block w-full rounded-sm border-gray-300 shadow-sm focus:border-neutral-900 focus:ring-neutral-900 sm:text-sm",
         props.className
       )}
     />
@@ -221,7 +221,7 @@ export function InputGroupBox(props: JSX.IntrinsicElements["div"]) {
   return (
     <div
       {...props}
-      className={classNames("p-2 bg-white border border-gray-300 rounded-sm space-y-2", props.className)}>
+      className={classNames("space-y-2 rounded-sm border border-gray-300 bg-white p-2", props.className)}>
       {props.children}
     </div>
   );
diff --git a/components/integrations/CalendarListContainer.tsx b/components/integrations/CalendarListContainer.tsx
index 65dad1b859..12f45a3610 100644
--- a/components/integrations/CalendarListContainer.tsx
+++ b/components/integrations/CalendarListContainer.tsx
@@ -122,7 +122,7 @@ function ConnectedCalendarsList(props: Props) {
                         onOpenChange={props.onChanged}
                       />
                     }>
-                    <ul className="p-4 space-y-2">
+                    <ul className="space-y-2 p-4">
                       {item.calendars.map((cal) => (
                         <CalendarSwitch
                           key={cal.externalId}
diff --git a/components/integrations/IntegrationListItem.tsx b/components/integrations/IntegrationListItem.tsx
index ff78dc49b5..4f4e37e91e 100644
--- a/components/integrations/IntegrationListItem.tsx
+++ b/components/integrations/IntegrationListItem.tsx
@@ -14,9 +14,9 @@ function IntegrationListItem(props: {
 }): JSX.Element {
   return (
     <ListItem expanded={!!props.children} className={classNames("flex-col")}>
-      <div className={classNames("flex flex-1 rtl:space-x-reverse space-x-2 w-full p-3 items-center")}>
+      <div className={classNames("flex w-full flex-1 items-center space-x-2 p-3 rtl:space-x-reverse")}>
         <Image width={40} height={40} src={`/${props.imageSrc}`} alt={props.title} />
-        <div className="flex-grow pl-2 truncate">
+        <div className="flex-grow truncate pl-2">
           <ListItemTitle component="h3">{props.title}</ListItemTitle>
           <ListItemText component="p">{props.description}</ListItemText>
         </div>
diff --git a/components/pages/eventtypes/CustomInputTypeForm.tsx b/components/pages/eventtypes/CustomInputTypeForm.tsx
index 0a51e950c9..a9fe1a0bb5 100644
--- a/components/pages/eventtypes/CustomInputTypeForm.tsx
+++ b/components/pages/eventtypes/CustomInputTypeForm.tsx
@@ -1,12 +1,17 @@
 import { EventTypeCustomInput, EventTypeCustomInputType } from "@prisma/client";
 import React, { FC } from "react";
 import { Controller, SubmitHandler, useForm, useWatch } from "react-hook-form";
-import Select, { OptionTypeBase } from "react-select";
+import Select from "react-select";
 
 import { useLocale } from "@lib/hooks/useLocale";
 
 import Button from "@components/ui/Button";
 
+interface OptionTypeBase {
+  label: string;
+  value: EventTypeCustomInputType;
+}
+
 interface Props {
   onSubmit: SubmitHandler<IFormInput>;
   onCancel: () => void;
@@ -50,8 +55,8 @@ const CustomInputTypeForm: FC<Props> = (props) => {
               defaultValue={selectedInputOption}
               options={inputOptions}
               isSearchable={false}
-              className="flex-1 block w-full min-w-0 mt-1 mb-2 border-gray-300 rounded-none focus:ring-primary-500 focus:border-primary-500 rounded-r-md sm:text-sm"
-              onChange={(option) => field.onChange(option.value)}
+              className="mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-md border-gray-300 focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
+              onChange={(option) => option && field.onChange(option.value)}
               value={selectedInputOption}
               onBlur={field.onBlur}
               name={field.name}
@@ -68,7 +73,7 @@ const CustomInputTypeForm: FC<Props> = (props) => {
             type="text"
             id="label"
             required
-            className="block w-full border-gray-300 rounded-sm shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
+            className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
             defaultValue={selectedCustomInput?.label}
             {...register("label", { required: true })}
           />
@@ -84,18 +89,18 @@ const CustomInputTypeForm: FC<Props> = (props) => {
             <input
               type="text"
               id="placeholder"
-              className="block w-full border-gray-300 rounded-sm shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
+              className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
               defaultValue={selectedCustomInput?.placeholder}
               {...register("placeholder")}
             />
           </div>
         </div>
       )}
-      <div className="flex items-center h-5">
+      <div className="flex h-5 items-center">
         <input
           id="required"
           type="checkbox"
-          className="w-4 h-4 ltr:mr-2 rtl:ml-2 border-gray-300 rounded focus:ring-primary-500 text-primary-600"
+          className="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 ltr:mr-2 rtl:ml-2"
           defaultChecked={selectedCustomInput?.required ?? true}
           {...register("required")}
         />
diff --git a/components/security/ChangePasswordSection.tsx b/components/security/ChangePasswordSection.tsx
index 9787b6bcf1..545ff534a0 100644
--- a/components/security/ChangePasswordSection.tsx
+++ b/components/security/ChangePasswordSection.tsx
@@ -57,7 +57,7 @@ const ChangePasswordSection = () => {
   return (
     <>
       <div className="mt-6">
-        <h2 className="text-lg font-medium leading-6 text-gray-900 font-cal">{t("change_password")}</h2>
+        <h2 className="font-cal text-lg font-medium leading-6 text-gray-900">{t("change_password")}</h2>
       </div>
       <form className="divide-y divide-gray-200 lg:col-span-9" onSubmit={changePasswordHandler}>
         <div className="py-6 lg:pb-8">
@@ -74,12 +74,12 @@ const ChangePasswordSection = () => {
                   name="current_password"
                   id="current_password"
                   required
-                  className="block w-full border-gray-300 rounded-sm shadow-sm focus:ring-black focus:border-brand sm:text-sm"
+                  className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-brand focus:ring-black sm:text-sm"
                   placeholder={t("your_old_password")}
                 />
               </div>
             </div>
-            <div className="w-1/2 ml-2">
+            <div className="ml-2 w-1/2">
               <label htmlFor="new_password" className="block text-sm font-medium text-gray-700">
                 {t("new_password")}
               </label>
@@ -91,7 +91,7 @@ const ChangePasswordSection = () => {
                   value={newPassword}
                   required
                   onInput={(e) => setNewPassword(e.currentTarget.value)}
-                  className="block w-full border-gray-300 rounded-sm shadow-sm focus:ring-black focus:border-brand sm:text-sm"
+                  className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-brand focus:ring-black sm:text-sm"
                   placeholder={t("super_secure_new_password")}
                 />
               </div>
diff --git a/components/security/DisableTwoFactorModal.tsx b/components/security/DisableTwoFactorModal.tsx
index bbb88b993f..2b4d2bffbf 100644
--- a/components/security/DisableTwoFactorModal.tsx
+++ b/components/security/DisableTwoFactorModal.tsx
@@ -70,7 +70,7 @@ const DisableTwoFactorAuthModal = ({ onDisable, onCancel }: DisableTwoFactorAuth
                 required
                 value={password}
                 onInput={(e) => setPassword(e.currentTarget.value)}
-                className="block w-full border-gray-300 rounded-sm shadow-sm focus:ring-neutral-900 focus:border-neutral-900 sm:text-sm"
+                className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-neutral-900 focus:ring-neutral-900 sm:text-sm"
               />
             </div>
 
diff --git a/components/security/EnableTwoFactorModal.tsx b/components/security/EnableTwoFactorModal.tsx
index 0ee976041a..635ab38bdd 100644
--- a/components/security/EnableTwoFactorModal.tsx
+++ b/components/security/EnableTwoFactorModal.tsx
@@ -139,7 +139,7 @@ const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps)
                   required
                   value={password}
                   onInput={(e) => setPassword(e.currentTarget.value)}
-                  className="block w-full border-gray-300 rounded-sm shadow-sm focus:ring-neutral-900 focus:border-neutral-900 sm:text-sm"
+                  className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-neutral-900 focus:ring-neutral-900 sm:text-sm"
                 />
               </div>
 
@@ -152,7 +152,7 @@ const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps)
             <div className="flex justify-center">
               <img src={dataUri} />
             </div>
-            <p className="text-center text-xs font-mono">{secret}</p>
+            <p className="font-mono text-center text-xs">{secret}</p>
           </>
         </WithStep>
         <WithStep step={SetupStep.EnterTotpCode} current={step}>
@@ -172,7 +172,7 @@ const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps)
                   minLength={6}
                   inputMode="numeric"
                   onInput={(e) => setTotpCode(e.currentTarget.value)}
-                  className="block w-full border-gray-300 rounded-sm shadow-sm focus:ring-neutral-900 focus:border-neutral-900 sm:text-sm"
+                  className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-neutral-900 focus:ring-neutral-900 sm:text-sm"
                 />
               </div>
 
diff --git a/components/security/TwoFactorAuthSection.tsx b/components/security/TwoFactorAuthSection.tsx
index 888d3d2e51..d3970a03cd 100644
--- a/components/security/TwoFactorAuthSection.tsx
+++ b/components/security/TwoFactorAuthSection.tsx
@@ -17,8 +17,8 @@ const TwoFactorAuthSection = ({ twoFactorEnabled }: { twoFactorEnabled: boolean
   return (
     <>
       <div className="flex flex-row items-center">
-        <h2 className="font-cal text-lg leading-6 font-medium text-gray-900">{t("2fa")}</h2>
-        <Badge className="text-xs ml-2" variant={enabled ? "success" : "gray"}>
+        <h2 className="font-cal text-lg font-medium leading-6 text-gray-900">{t("2fa")}</h2>
+        <Badge className="ml-2 text-xs" variant={enabled ? "success" : "gray"}>
           {enabled ? t("enabled") : t("disabled")}
         </Badge>
       </div>
diff --git a/components/security/TwoFactorModalHeader.tsx b/components/security/TwoFactorModalHeader.tsx
index b2c763fee9..6408f204d6 100644
--- a/components/security/TwoFactorModalHeader.tsx
+++ b/components/security/TwoFactorModalHeader.tsx
@@ -4,11 +4,11 @@ import React from "react";
 const TwoFactorModalHeader = ({ title, description }: { title: string; description: string }) => {
   return (
     <div className="mb-4 sm:flex sm:items-start">
-      <div className="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto rounded-full bg-brand text-brandcontrast bg-opacity-5 sm:mx-0 sm:h-10 sm:w-10">
-        <ShieldCheckIcon className="w-6 h-6 text-black" />
+      <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-brand bg-opacity-5 text-brandcontrast sm:mx-0 sm:h-10 sm:w-10">
+        <ShieldCheckIcon className="h-6 w-6 text-black" />
       </div>
       <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-        <h3 className="text-lg font-medium leading-6 text-gray-900 font-cal" id="modal-title">
+        <h3 className="font-cal text-lg font-medium leading-6 text-gray-900" id="modal-title">
           {title}
         </h3>
         <p className="text-sm text-gray-400">{description}</p>
diff --git a/components/team/MemberChangeRoleModal.tsx b/components/team/MemberChangeRoleModal.tsx
index 84c9faa04c..24e4862e51 100644
--- a/components/team/MemberChangeRoleModal.tsx
+++ b/components/team/MemberChangeRoleModal.tsx
@@ -51,14 +51,14 @@ export default function MemberChangeRoleModal(props: {
         </div>
         <form onSubmit={changeRole}>
           <div className="mb-4">
-            <label className="block mb-2 text-sm font-medium tracking-wide text-gray-700" htmlFor="role">
+            <label className="mb-2 block text-sm font-medium tracking-wide text-gray-700" htmlFor="role">
               {t("role")}
             </label>
             <select
               value={role}
               onChange={(e) => setRole(e.target.value as MembershipRole)}
               id="role"
-              className="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:ring-black focus:border-brand sm:text-sm">
+              className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand focus:ring-black sm:text-sm">
               <option value="MEMBER">{t("member")}</option>
               <option value="ADMIN">{t("admin")}</option>
               {/*<option value="OWNER">{t("owner")}</option> - needs dialog to confirm change of ownership */}
diff --git a/components/team/MemberInvitationModal.tsx b/components/team/MemberInvitationModal.tsx
index f02d6241ba..c633e5ba95 100644
--- a/components/team/MemberInvitationModal.tsx
+++ b/components/team/MemberInvitationModal.tsx
@@ -53,19 +53,19 @@ export default function MemberInvitationModal(props: { team: TeamWithMembers | n
       aria-labelledby="modal-title"
       role="dialog"
       aria-modal="true">
-      <div className="flex items-end justify-center min-h-screen 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 pt-4 pb-20 text-center sm:block sm:p-0">
         <div
-          className="fixed inset-0 z-0 transition-opacity bg-gray-500 bg-opacity-75"
+          className="fixed inset-0 z-0 bg-gray-500 bg-opacity-75 transition-opacity"
           aria-hidden="true"></div>
 
-        <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
+        <span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">
           &#8203;
         </span>
 
-        <div className="inline-block px-4 pt-5 pb-4 text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
+        <div className="inline-block transform rounded-lg bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
           <div className="mb-4 sm:flex sm:items-start">
-            <div className="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto rounded-full bg-brand text-brandcontrast bg-opacity-5 sm:mx-0 sm:h-10 sm:w-10">
-              <UserIcon className="w-6 h-6 text-brandcontrast" />
+            <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-brand bg-opacity-5 text-brandcontrast sm:mx-0 sm:h-10 sm:w-10">
+              <UserIcon className="h-6 w-6 text-brandcontrast" />
             </div>
             <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
@@ -86,34 +86,34 @@ export default function MemberInvitationModal(props: { team: TeamWithMembers | n
                 required
               />
               <div>
-                <label className="block mb-1 text-sm font-medium tracking-wide text-gray-700" htmlFor="role">
+                <label className="mb-1 block text-sm font-medium tracking-wide text-gray-700" htmlFor="role">
                   {t("role")}
                 </label>
                 <select
                   id="role"
-                  className="block w-full mt-1 border-gray-300 rounded-sm shadow-sm focus:ring-black focus:border-brand sm:text-sm">
+                  className="mt-1 block w-full rounded-sm border-gray-300 shadow-sm focus:border-brand focus:ring-black sm:text-sm">
                   <option value="MEMBER">{t("member")}</option>
                   <option value="ADMIN">{t("admin")}</option>
                 </select>
               </div>
               <div className="relative flex items-start">
-                <div className="flex items-center h-5">
+                <div className="flex h-5 items-center">
                   <input
                     type="checkbox"
                     name="sendInviteEmail"
                     defaultChecked
                     id="sendInviteEmail"
-                    className="text-black border-gray-300 rounded-sm shadow-sm focus:ring-black focus:border-brand sm:text-sm"
+                    className="rounded-sm border-gray-300 text-black shadow-sm focus:border-brand focus:ring-black sm:text-sm"
                   />
                 </div>
-                <div className="ltr:ml-2 rtl:mr-2text-sm">
+                <div className="rtl:mr-2text-sm ltr:ml-2">
                   <label htmlFor="sendInviteEmail" className="font-medium text-gray-700">
                     {t("send_invite_email")}
                   </label>
                 </div>
               </div>
-              <div className="flex flex-row px-3 py-2 rounded-sm bg-gray-50">
-                <InformationCircleIcon className="flex-shrink-0 w-5 h-5 fill-gray-400" aria-hidden="true" />
+              <div className="flex flex-row rounded-sm bg-gray-50 px-3 py-2">
+                <InformationCircleIcon className="h-5 w-5 flex-shrink-0 fill-gray-400" aria-hidden="true" />
                 <span className="ml-2 text-sm leading-tight text-gray-500">
                   Note: This will cost an extra seat ($12/m) on your subscription if this invitee does not
                   have a pro account.{" "}
diff --git a/components/team/MemberList.tsx b/components/team/MemberList.tsx
index f76c3e0819..0d41d4d693 100644
--- a/components/team/MemberList.tsx
+++ b/components/team/MemberList.tsx
@@ -12,7 +12,7 @@ export default function MemberList(props: Props) {
 
   return (
     <div>
-      <ul className="px-4 mb-2 -mx-4 bg-white border divide-y divide-gray-200 rounded sm:px-4 sm:mx-0">
+      <ul className="-mx-4 mb-2 divide-y divide-gray-200 rounded border bg-white px-4 sm:mx-0 sm:px-4">
         {props.members?.map((member) => (
           <MemberListItem key={member.id} member={member} team={props.team} />
         ))}
diff --git a/components/team/MemberListItem.tsx b/components/team/MemberListItem.tsx
index db809023ba..5b75fed1a2 100644
--- a/components/team/MemberListItem.tsx
+++ b/components/team/MemberListItem.tsx
@@ -61,25 +61,25 @@ export default function MemberListItem(props: Props) {
 
   return (
     <li className="divide-y">
-      <div className="flex justify-between my-4">
-        <div className="flex flex-col justify-between w-full sm:flex-row">
+      <div className="my-4 flex justify-between">
+        <div className="flex w-full flex-col justify-between sm:flex-row">
           <div className="flex">
             <Avatar
               imageSrc={getPlaceholderAvatar(props.member?.avatar, name)}
               alt={name || ""}
-              className="rounded-full w-9 h-9"
+              className="h-9 w-9 rounded-full"
             />
-            <div className="inline-block ml-3">
+            <div className="ml-3 inline-block">
               <span className="text-sm font-bold text-neutral-700">{name}</span>
               <span
-                className="block -mt-1 text-xs text-gray-400"
+                className="-mt-1 block text-xs text-gray-400"
                 data-testid="member-email"
                 data-email={props.member.email}>
                 {props.member.email}
               </span>
             </div>
           </div>
-          <div className="flex mt-2 ltr:mr-2 rtl:ml-2 sm:mt-0 sm:justify-center">
+          <div className="mt-2 flex ltr:mr-2 rtl:ml-2 sm:mt-0 sm:justify-center">
             {/* Tooltip doesn't show... WHY????? */}
             {props.member.isMissingSeat && (
               <Tooltip content={t("hidden_team_member_message")}>
@@ -102,13 +102,13 @@ export default function MemberListItem(props: Props) {
               disabled={!props.member.accepted}
               onClick={() => (props.member.accepted ? setShowTeamAvailabilityModal(true) : null)}
               color="minimal"
-              className="items-center justify-center hidden w-10 h-10 px-0 py-0 border border-transparent group text-neutral-400 hover:border-gray-200 hover:bg-white sm:flex">
-              <ClockIcon className="w-5 h-5 group-hover:text-gray-800" />
+              className="group hidden h-10 w-10 items-center justify-center border border-transparent px-0 py-0 text-neutral-400 hover:border-gray-200 hover:bg-white sm:flex">
+              <ClockIcon className="h-5 w-5 group-hover:text-gray-800" />
             </Button>
           </Tooltip>
           <Dropdown>
-            <DropdownMenuTrigger className="w-10 h-10 p-0 border border-transparent group text-neutral-400 hover:border-gray-200 hover:bg-white">
-              <DotsHorizontalIcon className="w-5 h-5 group-hover:text-gray-800" />
+            <DropdownMenuTrigger className="group h-10 w-10 border border-transparent p-0 text-neutral-400 hover:border-gray-200 hover:bg-white">
+              <DotsHorizontalIcon className="h-5 w-5 group-hover:text-gray-800" />
             </DropdownMenuTrigger>
             <DropdownMenuContent>
               <DropdownMenuItem>
@@ -129,7 +129,7 @@ export default function MemberListItem(props: Props) {
                       onClick={() => setShowChangeMemberRoleModal(true)}
                       color="minimal"
                       StartIcon={PencilIcon}
-                      className="flex-shrink-0 w-full font-normal">
+                      className="w-full flex-shrink-0 font-normal">
                       {t("edit_role")}
                     </Button>
                   </DropdownMenuItem>
@@ -173,7 +173,7 @@ export default function MemberListItem(props: Props) {
       {showTeamAvailabilityModal && (
         <ModalContainer wide noPadding>
           <TeamAvailabilityModal team={props.team} member={props.member} />
-          <div className="p-5 space-x-2 border-t rtl:space-x-reverse">
+          <div className="space-x-2 border-t p-5 rtl:space-x-reverse">
             <Button onClick={() => setShowTeamAvailabilityModal(false)}>{t("done")}</Button>
             {props.team.membership.role !== MembershipRole.MEMBER && (
               <Link href={`/settings/teams/${props.team.id}/availability`}>
diff --git a/components/team/TeamCreateModal.tsx b/components/team/TeamCreateModal.tsx
index fd7efb6d2b..03bf8873bc 100644
--- a/components/team/TeamCreateModal.tsx
+++ b/components/team/TeamCreateModal.tsx
@@ -37,19 +37,19 @@ export default function TeamCreate(props: Props) {
       aria-labelledby="modal-title"
       role="dialog"
       aria-modal="true">
-      <div className="flex items-end justify-center min-h-screen 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 pt-4 pb-20 text-center sm:block sm:p-0">
         <div
-          className="fixed inset-0 z-0 transition-opacity bg-gray-500 bg-opacity-75"
+          className="fixed inset-0 z-0 bg-gray-500 bg-opacity-75 transition-opacity"
           aria-hidden="true"></div>
 
-        <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
+        <span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">
           &#8203;
         </span>
 
-        <div className="inline-block px-4 pt-5 pb-4 text-left align-bottom transition-all transform bg-white rounded-sm shadow-xl sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
+        <div className="inline-block transform rounded-sm bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
           <div className="mb-4 sm:flex sm:items-start">
-            <div className="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto rounded-full bg-neutral-100 sm:mx-0 sm:h-10 sm:w-10">
-              <UsersIcon className="w-6 h-6 text-neutral-900" />
+            <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-neutral-100 sm:mx-0 sm:h-10 sm:w-10">
+              <UsersIcon className="h-6 w-6 text-neutral-900" />
             </div>
             <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
@@ -72,7 +72,7 @@ export default function TeamCreate(props: Props) {
                 id="name"
                 placeholder="Acme Inc."
                 required
-                className="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-sm shadow-sm focus:outline-none focus:ring-neutral-500 focus:border-neutral-500 sm:text-sm"
+                className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 shadow-sm focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
               />
             </div>
             {errorMessage && <Alert severity="error" title={errorMessage} />}
@@ -80,7 +80,7 @@ export default function TeamCreate(props: Props) {
               <button type="submit" className="btn btn-primary">
                 {t("create_team")}
               </button>
-              <button onClick={props.onClose} type="button" className="ltr:mr-2 btn btn-white">
+              <button onClick={props.onClose} type="button" className="btn btn-white ltr:mr-2">
                 {t("cancel")}
               </button>
             </div>
diff --git a/components/team/TeamList.tsx b/components/team/TeamList.tsx
index 2c71cb9770..df4e750b01 100644
--- a/components/team/TeamList.tsx
+++ b/components/team/TeamList.tsx
@@ -33,7 +33,7 @@ export default function TeamList(props: Props) {
 
   return (
     <div>
-      <ul className="mb-2 bg-white border divide-y rounded divide-neutral-200">
+      <ul className="mb-2 divide-y divide-neutral-200 rounded border bg-white">
         {props.teams.map((team) => (
           <TeamListItem
             key={team?.id as number}
diff --git a/components/team/TeamListItem.tsx b/components/team/TeamListItem.tsx
index ff7f7a5d8d..0356a3bb6a 100644
--- a/components/team/TeamListItem.tsx
+++ b/components/team/TeamListItem.tsx
@@ -60,9 +60,9 @@ export default function TeamListItem(props: Props) {
         size={9}
         imageSrc={getPlaceholderAvatar(team?.logo, team?.name as string)}
         alt="Team Logo"
-        className="rounded-full w-9 h-9 min-w-9 min-h-9"
+        className="h-9 min-h-9 w-9 min-w-9 rounded-full"
       />
-      <div className="inline-block ml-3">
+      <div className="ml-3 inline-block">
         <span className="text-sm font-bold text-neutral-700">{team.name}</span>
         <span className="block text-xs text-gray-400">
           {process.env.NEXT_PUBLIC_APP_URL}/team/{team.slug}
@@ -75,12 +75,12 @@ export default function TeamListItem(props: Props) {
     <li className="divide-y">
       <div
         className={classNames(
-          "flex justify-between  items-center",
+          "flex items-center  justify-between",
           !isInvitee && "group hover:bg-neutral-50"
         )}>
         {!isInvitee ? (
           <Link href={"/settings/teams/" + team.id}>
-            <a className="flex-grow text-sm truncate cursor-pointer" title={`${team.name}`}>
+            <a className="flex-grow cursor-pointer truncate text-sm" title={`${team.name}`}>
               {teamInfo}
             </a>
           </Link>
@@ -108,16 +108,16 @@ export default function TeamListItem(props: Props) {
                     navigator.clipboard.writeText(process.env.NEXT_PUBLIC_APP_URL + "/team/" + team.slug);
                     showToast(t("link_copied"), "success");
                   }}
-                  className="w-10 h-10 transition-none"
+                  className="h-10 w-10 transition-none"
                   size="icon"
                   color="minimal"
                   type="button">
-                  <LinkIcon className="w-5 h-5 group-hover:text-gray-600" />
+                  <LinkIcon className="h-5 w-5 group-hover:text-gray-600" />
                 </Button>
               </Tooltip>
               <Dropdown>
-                <DropdownMenuTrigger className="w-10 h-10 p-0 border border-transparent group text-neutral-400 hover:border-gray-200 ">
-                  <DotsHorizontalIcon className="w-5 h-5 group-hover:text-gray-800" />
+                <DropdownMenuTrigger className="group h-10 w-10 border border-transparent p-0 text-neutral-400 hover:border-gray-200 ">
+                  <DotsHorizontalIcon className="h-5 w-5 group-hover:text-gray-800" />
                 </DropdownMenuTrigger>
                 <DropdownMenuContent>
                   {isAdmin && (
diff --git a/components/team/TeamPill.tsx b/components/team/TeamPill.tsx
index e0cdea280d..1ceb05575f 100644
--- a/components/team/TeamPill.tsx
+++ b/components/team/TeamPill.tsx
@@ -13,12 +13,12 @@ interface Props {
 export default function TeamPill(props: Props) {
   return (
     <div
-      className={classNames("self-center px-3 py-1 ltr:mr-2 rtl:ml-2 text-xs capitalize border rounded-md", {
-        "bg-gray-50 border-gray-200 text-gray-700": !props.color,
-        "bg-blue-50 border-blue-200 text-blue-700": props.color === "blue",
-        "bg-red-50 border-red-200 text-red-700": props.color === "red",
-        "bg-yellow-50 border-yellow-200 text-yellow-700": props.color === "yellow",
-        "bg-green-50 border-green-200 text-green-600": props.color === "green",
+      className={classNames("self-center rounded-md border px-3 py-1 text-xs capitalize ltr:mr-2 rtl:ml-2", {
+        "border-gray-200 bg-gray-50 text-gray-700": !props.color,
+        "border-blue-200 bg-blue-50 text-blue-700": props.color === "blue",
+        "border-red-200 bg-red-50 text-red-700": props.color === "red",
+        "border-yellow-200 bg-yellow-50 text-yellow-700": props.color === "yellow",
+        "border-green-200 bg-green-50 text-green-600": props.color === "green",
       })}>
       {props.text}
     </div>
diff --git a/components/team/TeamSettings.tsx b/components/team/TeamSettings.tsx
index 54ab5197af..c77f760e0d 100644
--- a/components/team/TeamSettings.tsx
+++ b/components/team/TeamSettings.tsx
@@ -90,7 +90,7 @@ export default function TeamSettings(props: Props) {
                       name="" // typescript requires name but we don't want component to render name label
                       id="team-url"
                       addOnLeading={
-                        <span className="inline-flex items-center px-3 text-gray-500 border border-r-0 border-gray-300 rounded-l-sm bg-gray-50 sm:text-sm">
+                        <span className="inline-flex items-center rounded-l-sm border border-r-0 border-gray-300 bg-gray-50 px-3 text-gray-500 sm:text-sm">
                           {process.env.NEXT_PUBLIC_APP_URL}/{"team/"}
                         </span>
                       }
@@ -111,7 +111,7 @@ export default function TeamSettings(props: Props) {
                       id="name"
                       placeholder={t("your_team_name")}
                       required
-                      className="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-sm shadow-sm focus:outline-none focus:ring-neutral-800 focus:border-neutral-800 sm:text-sm"
+                      className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 shadow-sm focus:border-neutral-800 focus:outline-none focus:ring-neutral-800 sm:text-sm"
                       defaultValue={team?.name as string}
                     />
                   }
@@ -130,7 +130,7 @@ export default function TeamSettings(props: Props) {
                           name="about"
                           rows={3}
                           defaultValue={team?.bio as string}
-                          className="block w-full mt-1 border-gray-300 rounded-sm shadow-sm focus:ring-neutral-800 focus:border-neutral-800 sm:text-sm"></textarea>
+                          className="mt-1 block w-full rounded-sm border-gray-300 shadow-sm focus:border-neutral-800 focus:ring-neutral-800 sm:text-sm"></textarea>
                         <p className="mt-2 text-sm text-gray-500">{t("team_description")}</p>
                       </>
                     }
@@ -143,14 +143,14 @@ export default function TeamSettings(props: Props) {
                     htmlFor="avatar"
                     Input={
                       <>
-                        <div className="flex mt-1">
+                        <div className="mt-1 flex">
                           <input
                             ref={logoRef}
                             type="hidden"
                             name="avatar"
                             id="avatar"
                             placeholder="URL"
-                            className="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-sm shadow-sm focus:outline-none focus:ring-neutral-800 focus:border-neutral-800 sm:text-sm"
+                            className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 shadow-sm focus:border-neutral-800 focus:outline-none focus:ring-neutral-800 sm:text-sm"
                             defaultValue={team?.logo ?? undefined}
                           />
                           <ImageUploader
@@ -165,7 +165,7 @@ export default function TeamSettings(props: Props) {
                               onClick={removeLogo}
                               color="secondary"
                               type="button"
-                              className="py-1 ml-1 text-xs">
+                              className="ml-1 py-1 text-xs">
                               {t("remove_logo")}
                             </Button>
                           )}
@@ -178,14 +178,14 @@ export default function TeamSettings(props: Props) {
                 </div>
 
                 <div className="relative flex items-start">
-                  <div className="flex items-center h-5">
+                  <div className="flex h-5 items-center">
                     <input
                       id="hide-branding"
                       name="hide-branding"
                       type="checkbox"
                       ref={hideBrandingRef}
                       defaultChecked={team?.hideBranding}
-                      className="w-4 h-4 border-gray-300 rounded-sm focus:ring-neutral-500 text-neutral-900"
+                      className="h-4 w-4 rounded-sm border-gray-300 text-neutral-900 focus:ring-neutral-500"
                     />
                   </div>
                   <div className="text-sm ltr:ml-3 rtl:mr-3">
diff --git a/components/team/TeamSettingsRightSidebar.tsx b/components/team/TeamSettingsRightSidebar.tsx
index 6441c0cc29..87e7c8f51b 100644
--- a/components/team/TeamSettingsRightSidebar.tsx
+++ b/components/team/TeamSettingsRightSidebar.tsx
@@ -48,7 +48,7 @@ export default function TeamSettingsRightSidebar(props: { team: TeamWithMembers;
   }
 
   return (
-    <div className="px-2 space-y-6">
+    <div className="space-y-6 px-2">
       {(props.role === MembershipRole.OWNER || props.role === MembershipRole.ADMIN) && (
         <CreateEventTypeButton
           isIndividualTeam
@@ -119,7 +119,7 @@ export default function TeamSettingsRightSidebar(props: { team: TeamWithMembers;
       </div>
       {props.team?.id && props.role !== MembershipRole.MEMBER && (
         <Link href={`/settings/teams/${props.team.id}/availability`}>
-          <div className="hidden mt-5 space-y-1 sm:block">
+          <div className="mt-5 hidden space-y-1 sm:block">
             <LinkIconButton Icon={ClockIcon}>{"View Availability"}</LinkIconButton>
             <p className="mt-2 text-sm text-gray-500">See your team members availability at a glance.</p>
           </div>
diff --git a/components/team/UpgradeToFlexibleProModal.tsx b/components/team/UpgradeToFlexibleProModal.tsx
index 082522ad42..589b8c27cd 100644
--- a/components/team/UpgradeToFlexibleProModal.tsx
+++ b/components/team/UpgradeToFlexibleProModal.tsx
@@ -50,7 +50,7 @@ export function UpgradeToFlexibleProModal(props: Props) {
         setErrorMessage(null);
       }}>
       <DialogTrigger asChild>
-        <a className="underline cursor-pointer">{"Upgrade Now"}</a>
+        <a className="cursor-pointer underline">{"Upgrade Now"}</a>
       </DialogTrigger>
       <DialogContent>
         <DialogHeader title={t("Purchase missing seats")} />
diff --git a/components/team/screens/Team.tsx b/components/team/screens/Team.tsx
index 4fbcf49ff7..8bd13cf60a 100644
--- a/components/team/screens/Team.tsx
+++ b/components/team/screens/Team.tsx
@@ -44,7 +44,7 @@ const Team = ({ team }: TeamPageProps) => {
               "absolute top-4 right-4",
               "h-4 w-4",
               "transition-opacity",
-              "opacity-0 group-hover:opacity-100 group-hover:block"
+              "opacity-0 group-hover:block group-hover:opacity-100"
             )}
           />
 
@@ -52,9 +52,9 @@ const Team = ({ team }: TeamPageProps) => {
             <Avatar
               alt={member.name || ""}
               imageSrc={getPlaceholderAvatar(member.avatar, member.username)}
-              className="w-12 h-12 -mt-4"
+              className="-mt-4 h-12 w-12"
             />
-            <section className="w-full mt-2 space-y-1">
+            <section className="mt-2 w-full space-y-1">
               <Text variant="title">{member.name}</Text>
               <Text variant="subtitle" className="">
                 {member.bio || t("user_from_team", { user: member.name, team: team.name })}
@@ -72,7 +72,7 @@ const Team = ({ team }: TeamPageProps) => {
     }
 
     return (
-      <section className="flex flex-wrap justify-center max-w-5xl min-w-full mx-auto lg:min-w-lg gap-x-6 gap-y-6">
+      <section className="lg:min-w-lg mx-auto flex min-w-full max-w-5xl flex-wrap justify-center gap-x-6 gap-y-6">
         {members.map((member) => {
           return member.username !== null && <Member key={member.id} member={member} />;
         })}
diff --git a/components/ui/Alert.tsx b/components/ui/Alert.tsx
index 430afd0831..b01e2205b9 100644
--- a/components/ui/Alert.tsx
+++ b/components/ui/Alert.tsx
@@ -15,10 +15,10 @@ export function Alert(props: AlertProps) {
   return (
     <div
       className={classNames(
-        "rounded-sm p-3 border border-opacity-20",
+        "rounded-sm border border-opacity-20 p-3",
         props.className,
-        severity === "error" && "bg-red-50 text-red-800 border-red-900",
-        severity === "warning" && "bg-yellow-50 text-yellow-700 border-yellow-700",
+        severity === "error" && "border-red-900 bg-red-50 text-red-800",
+        severity === "warning" && "border-yellow-700 bg-yellow-50 text-yellow-700",
         severity === "success" && "bg-gray-900 text-white"
       )}>
       <div className="flex">
@@ -33,7 +33,7 @@ export function Alert(props: AlertProps) {
             <CheckCircleIcon className={classNames("h-5 w-5 text-gray-400")} aria-hidden="true" />
           )}
         </div>
-        <div className="flex-grow ml-3">
+        <div className="ml-3 flex-grow">
           <h3 className="text-sm font-medium">{props.title}</h3>
           <div className="text-sm">{props.message}</div>
         </div>
diff --git a/components/ui/AuthContainer.tsx b/components/ui/AuthContainer.tsx
index 253ea3fe9f..8f73a14b5f 100644
--- a/components/ui/AuthContainer.tsx
+++ b/components/ui/AuthContainer.tsx
@@ -14,26 +14,26 @@ interface Props {
 
 export default function AuthContainer(props: React.PropsWithChildren<Props>) {
   return (
-    <div className="flex flex-col justify-center min-h-screen py-12 bg-neutral-50 sm:px-6 lg:px-8">
+    <div className="flex min-h-screen flex-col justify-center bg-neutral-50 py-12 sm:px-6 lg:px-8">
       <HeadSeo title={props.title} description={props.description} />
       <div className="sm:mx-auto sm:w-full sm:max-w-md">
         {props.showLogo && (
-          <img className="h-6 mx-auto" src="/calendso-logo-white-word.svg" alt="Cal.com Logo" />
+          <img className="mx-auto h-6" src="/calendso-logo-white-word.svg" alt="Cal.com Logo" />
         )}
         {props.heading && (
-          <h2 className="mt-6 text-3xl font-bold text-center font-cal text-neutral-900">{props.heading}</h2>
+          <h2 className="mt-6 text-center font-cal text-3xl font-bold text-neutral-900">{props.heading}</h2>
         )}
       </div>
       {props.loading && (
-        <div className="absolute z-50 flex items-center w-full h-screen bg-gray-50">
+        <div className="absolute z-50 flex h-screen w-full items-center bg-gray-50">
           <Loader />
         </div>
       )}
       <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-        <div className="px-4 py-8 mx-2 bg-white border rounded-sm sm:px-10 border-neutral-200">
+        <div className="mx-2 rounded-sm border border-neutral-200 bg-white px-4 py-8 sm:px-10">
           {props.children}
         </div>
-        <div className="mt-4 text-sm text-center text-neutral-600">{props.footerText}</div>
+        <div className="mt-4 text-center text-sm text-neutral-600">{props.footerText}</div>
       </div>
     </div>
   );
diff --git a/components/ui/Avatar.tsx b/components/ui/Avatar.tsx
index f1a3734c3b..ed5b3cad1f 100644
--- a/components/ui/Avatar.tsx
+++ b/components/ui/Avatar.tsx
@@ -36,7 +36,7 @@ export default function Avatar(props: AvatarProps) {
   return title ? (
     <Tooltip.Tooltip delayDuration={300}>
       <Tooltip.TooltipTrigger className="cursor-default">{avatar}</Tooltip.TooltipTrigger>
-      <Tooltip.Content className="p-2 text-sm rounded-sm shadow-sm bg-brand text-brandcontrast">
+      <Tooltip.Content className="rounded-sm bg-brand p-2 text-sm text-brandcontrast shadow-sm">
         <Tooltip.Arrow />
         {title}
       </Tooltip.Content>
diff --git a/components/ui/AvatarGroup.tsx b/components/ui/AvatarGroup.tsx
index 746425cfb5..c1320e1a5c 100644
--- a/components/ui/AvatarGroup.tsx
+++ b/components/ui/AvatarGroup.tsx
@@ -27,7 +27,7 @@ export const AvatarGroup = function AvatarGroup(props: AvatarGroupProps) {
       : [];*/
 
   return (
-    <ul className={classNames("flex -rtl:space-x-reverse space-x-2 overflow-hidden", props.className)}>
+    <ul className={classNames("-rtl:space-x-reverse flex space-x-2 overflow-hidden", props.className)}>
       {props.items.slice(0, props.truncateAfter).map((item, idx) => {
         if (item.image != null) {
           return (
diff --git a/components/ui/Badge.tsx b/components/ui/Badge.tsx
index dcd54f700d..b6c23da45a 100644
--- a/components/ui/Badge.tsx
+++ b/components/ui/Badge.tsx
@@ -13,7 +13,7 @@ export const Badge = function Badge(props: BadgeProps) {
     <span
       {...passThroughProps}
       className={classNames(
-        "font-bold px-2 py-0.5 inline-block rounded-sm text-xs",
+        "inline-block rounded-sm px-2 py-0.5 text-xs font-bold",
         variant === "default" && "bg-yellow-100 text-yellow-800",
         variant === "success" && "bg-green-100 text-green-800",
         variant === "gray" && "bg-gray-200 text-gray-800",
diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx
index 5dc16150c5..5079c7f03f 100644
--- a/components/ui/Button.tsx
+++ b/components/ui/Button.tsx
@@ -93,17 +93,17 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
         <StartIcon
           className={classNames(
             "inline",
-            size === "icon" ? "w-5 h-5 " : "w-5 h-5 ltr:mr-2 rtl:ml-2 rtl:ml-2 rtl:-mr-1 -ml-1"
+            size === "icon" ? "h-5 w-5 " : "-ml-1 h-5 w-5 ltr:mr-2 rtl:ml-2 rtl:ml-2 rtl:-mr-1"
           )}
         />
       )}
       {props.children}
       {loading && (
-        <div className="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform">
           <svg
             className={classNames(
-              "w-5 h-5 mx-4 animate-spin",
-              color === "primary" ? "dark:text-black text-white" : "text-black"
+              "mx-4 h-5 w-5 animate-spin",
+              color === "primary" ? "text-white dark:text-black" : "text-black"
             )}
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
@@ -122,7 +122,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
           </svg>
         </div>
       )}
-      {EndIcon && <EndIcon className="inline w-5 h-5 ltr:ml-2 rtl:mr-2 -mr-1" />}
+      {EndIcon && <EndIcon className="-mr-1 inline h-5 w-5 ltr:ml-2 rtl:mr-2" />}
     </>
   );
   return props.href ? (
diff --git a/components/ui/Dropdown.tsx b/components/ui/Dropdown.tsx
index 5f0d04a96c..6abe0e3d68 100644
--- a/components/ui/Dropdown.tsx
+++ b/components/ui/Dropdown.tsx
@@ -12,7 +12,7 @@ export const DropdownMenuTrigger = forwardRef<HTMLButtonElement, DropdownMenuTri
       className={
         props.asChild
           ? className
-          : `relative inline-flex items-center px-3 py-2 ltr:ml-2 rtl:mr-2 text-sm font-medium text-gray-700 bg-transparent rounded-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:bg-gray-100 focus:ring-neutral-500 group-hover:text-black ${className}`
+          : `relative inline-flex items-center rounded-sm bg-transparent px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-1 group-hover:text-black ltr:ml-2 rtl:mr-2 ${className}`
       }
       ref={forwardedRef}
     />
@@ -26,7 +26,7 @@ export const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuConten
     return (
       <DropdownMenuPrimitive.Content
         {...props}
-        className="z-10 w-48 mt-1 text-sm origin-top-right bg-white rounded-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+        className="z-10 mt-1 w-48 origin-top-right rounded-sm bg-white text-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
         ref={forwardedRef}>
         {children}
       </DropdownMenuPrimitive.Content>
diff --git a/components/ui/InfoBadge.tsx b/components/ui/InfoBadge.tsx
index a79a9fd2ec..41761cc4ec 100644
--- a/components/ui/InfoBadge.tsx
+++ b/components/ui/InfoBadge.tsx
@@ -7,7 +7,7 @@ export default function InfoBadge({ content }: { content: string }) {
     <>
       <Tooltip content={content}>
         <span title={content}>
-          <InformationCircleIcon className="relative w-4 h-4 mt-px text-gray-500 top-px left-1 right-1" />
+          <InformationCircleIcon className="relative top-px left-1 right-1 mt-px h-4 w-4 text-gray-500" />
         </span>
       </Tooltip>
     </>
diff --git a/components/ui/LinkIconButton.tsx b/components/ui/LinkIconButton.tsx
index c155ab3621..142f2e35d9 100644
--- a/components/ui/LinkIconButton.tsx
+++ b/components/ui/LinkIconButton.tsx
@@ -12,8 +12,8 @@ export default function LinkIconButton(props: LinkIconButtonProps) {
       <button
         type="button"
         {...props}
-        className="flex items-center px-2 py-1 text-sm font-medium text-gray-700 rounded-sm text-md hover:text-gray-900 hover:bg-gray-200">
-        <props.Icon className="w-4 h-4 ltr:mr-2 rtl:ml-2 text-neutral-500" />
+        className="text-md flex items-center rounded-sm px-2 py-1 text-sm font-medium text-gray-700 hover:bg-gray-200 hover:text-gray-900">
+        <props.Icon className="h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
         {props.children}
       </button>
     </div>
diff --git a/components/ui/ModalContainer.tsx b/components/ui/ModalContainer.tsx
index 1fa130f7f7..c7aeb5db5c 100644
--- a/components/ui/ModalContainer.tsx
+++ b/components/ui/ModalContainer.tsx
@@ -14,19 +14,19 @@ export default function ModalContainer(props: Props) {
       aria-labelledby="modal-title"
       role="dialog"
       aria-modal="true">
-      <div className="flex items-end justify-center min-h-screen 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 pt-4 pb-20 text-center sm:block sm:p-0">
         <div
-          className="fixed inset-0 z-0 transition-opacity bg-gray-500 bg-opacity-75"
+          className="fixed inset-0 z-0 bg-gray-500 bg-opacity-75 transition-opacity"
           aria-hidden="true"></div>
-        <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
+        <span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">
           &#8203;
         </span>
         <div
           className={classNames(
-            "inline-block min-w-96 px-4 pt-5 pb-4 text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:p-6",
+            "inline-block min-w-96 transform rounded-lg bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:p-6 sm:align-middle",
             {
-              "sm:max-w-lg sm:w-full ": !props.wide,
-              "sm:max-w-4xl sm:w-4xl": props.wide,
+              "sm:w-full sm:max-w-lg ": !props.wide,
+              "sm:w-4xl sm:max-w-4xl": props.wide,
               "overflow-scroll": props.scroll,
               "!p-0": props.noPadding,
             }
diff --git a/components/ui/PoweredByCal.tsx b/components/ui/PoweredByCal.tsx
index 06e9e847ed..cce37c66f5 100644
--- a/components/ui/PoweredByCal.tsx
+++ b/components/ui/PoweredByCal.tsx
@@ -5,17 +5,17 @@ import { useLocale } from "@lib/hooks/useLocale";
 const PoweredByCal = () => {
   const { t } = useLocale();
   return (
-    <div className="text-xs text-center sm:text-right p-1">
+    <div className="p-1 text-center text-xs sm:text-right">
       <Link href={`https://cal.com?utm_source=embed&utm_medium=powered-by-button`}>
-        <a target="_blank" className="dark:text-white text-gray-500 opacity-50 hover:opacity-100">
+        <a target="_blank" className="text-gray-500 opacity-50 hover:opacity-100 dark:text-white">
           {t("powered_by")}{" "}
           <img
-            className="dark:hidden w-auto inline h-[10px] relative -mt-px"
+            className="relative -mt-px inline h-[10px] w-auto dark:hidden"
             src="https://cal.com/logo.svg"
             alt="Cal.com Logo"
           />
           <img
-            className="hidden dark:inline w-auto h-[10px] relativ -mt-px"
+            className="relativ -mt-px hidden h-[10px] w-auto dark:inline"
             src="https://cal.com/logo-white.svg"
             alt="Cal.com Logo"
           />
diff --git a/components/ui/Scheduler.tsx b/components/ui/Scheduler.tsx
index 4251325b25..90b20ec74b 100644
--- a/components/ui/Scheduler.tsx
+++ b/components/ui/Scheduler.tsx
@@ -66,11 +66,11 @@ export const Scheduler = ({ availability, setAvailability, timeZone, setTimeZone
   };
 
   const OpeningHours = ({ idx, item }: { idx: number; item: Availability }) => (
-    <li className="flex justify-between py-2 border-b">
+    <li className="flex justify-between border-b py-2">
       <div className="flex flex-col space-y-4 lg:inline-flex">
         <WeekdaySelect defaultValue={item.days} onSelect={(selected: number[]) => (item.days = selected)} />
         <button
-          className="px-3 py-2 text-sm rounded-sm bg-neutral-100"
+          className="rounded-sm bg-neutral-100 px-3 py-2 text-sm"
           type="button"
           onClick={() => setEditSchedule(idx)}>
           {item.startTime.toLocaleTimeString(i18n.language, {
@@ -89,8 +89,8 @@ export const Scheduler = ({ availability, setAvailability, timeZone, setTimeZone
       <button
         type="button"
         onClick={() => removeScheduleAt(idx)}
-        className="px-2 py-1 ml-1 bg-transparent btn-sm">
-        <TrashIcon className="inline w-5 h-5 -mt-1 text-gray-400" />
+        className="btn-sm ml-1 bg-transparent px-2 py-1">
+        <TrashIcon className="-mt-1 inline h-5 w-5 text-gray-400" />
       </button>
     </li>
   );
@@ -108,7 +108,7 @@ export const Scheduler = ({ availability, setAvailability, timeZone, setTimeZone
                 id="timeZone"
                 value={timeZone}
                 onChange={(tz: ITimezoneOption) => setTimeZone(tz.value)}
-                className="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:ring-black focus:border-brand sm:text-sm"
+                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand focus:ring-black sm:text-sm"
               />
             </div>
           </div>
diff --git a/components/ui/SettingInputContainer.tsx b/components/ui/SettingInputContainer.tsx
index 33f14f7a14..492382d42e 100644
--- a/components/ui/SettingInputContainer.tsx
+++ b/components/ui/SettingInputContainer.tsx
@@ -13,12 +13,12 @@ export default function SettingInputContainer({
     <div className="space-y-3">
       <div className="block sm:flex">
         <div className="mb-4 min-w-48 sm:mb-0">
-          <label htmlFor={htmlFor} className="flex mt-1 text-sm font-medium text-neutral-700">
-            <Icon className="w-4 h-4 ltr:mr-2 rtl:ml-2 mt-0.5 text-neutral-500" />
+          <label htmlFor={htmlFor} className="mt-1 flex text-sm font-medium text-neutral-700">
+            <Icon className="mt-0.5 h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
             {label}
           </label>
         </div>
-        <div className="flex-grow w-full">{Input}</div>
+        <div className="w-full flex-grow">{Input}</div>
       </div>
     </div>
   );
diff --git a/components/ui/Switch.tsx b/components/ui/Switch.tsx
index a6b59dce78..9cf828e14e 100644
--- a/components/ui/Switch.tsx
+++ b/components/ui/Switch.tsx
@@ -20,16 +20,16 @@ export default function Switch(props: SwitchProps) {
   };
   const id = useId();
   return (
-    <div className="flex items-center h-[20px]">
+    <div className="flex h-[20px] items-center">
       <PrimitiveSwitch.Root
-        className={classNames(checked ? "bg-gray-900" : "bg-gray-400", "rounded-sm w-[36px] p-0.5 h-[20px]")}
+        className={classNames(checked ? "bg-gray-900" : "bg-gray-400", "h-[20px] w-[36px] rounded-sm p-0.5")}
         checked={checked}
         onCheckedChange={onPrimitiveCheckedChange}
         {...primitiveProps}>
         <PrimitiveSwitch.Thumb
           id={id}
           className={classNames(
-            "bg-white w-[16px] h-[16px] block transition-transform",
+            "block h-[16px] w-[16px] bg-white transition-transform",
             checked ? "translate-x-[16px]" : "translate-x-0"
           )}
         />
@@ -37,7 +37,7 @@ export default function Switch(props: SwitchProps) {
       {label && (
         <Label.Root
           htmlFor={id}
-          className="text-sm font-medium align-text-top cursor-pointer text-neutral-700 ltr:ml-3 rtl:mr-3">
+          className="cursor-pointer align-text-top text-sm font-medium text-neutral-700 ltr:ml-3 rtl:mr-3">
           {label}
         </Label.Root>
       )}
diff --git a/components/ui/TableActions.tsx b/components/ui/TableActions.tsx
index 353032d3fd..cf81ead593 100644
--- a/components/ui/TableActions.tsx
+++ b/components/ui/TableActions.tsx
@@ -24,7 +24,7 @@ const TableActions: FC<Props> = ({ actions }) => {
   const { t } = useLocale();
   return (
     <>
-      <div className="rtl:space-x-reverse space-x-2 hidden lg:block">
+      <div className="hidden space-x-2 rtl:space-x-reverse lg:block">
         {actions.map((action) => (
           <Button
             key={action.id}
@@ -38,11 +38,11 @@ const TableActions: FC<Props> = ({ actions }) => {
           </Button>
         ))}
       </div>
-      <Menu as="div" className="inline-block lg:hidden text-left ">
+      <Menu as="div" className="inline-block text-left lg:hidden ">
         {({ open }) => (
           <>
             <div>
-              <Menu.Button className="text-neutral-400 mt-1 p-2 border border-transparent hover:border-gray-200">
+              <Menu.Button className="mt-1 border border-transparent p-2 text-neutral-400 hover:border-gray-200">
                 <span className="sr-only">{t("open_options")}</span>
                 <DotsHorizontalIcon className="h-5 w-5" aria-hidden="true" />
               </Menu.Button>
@@ -59,7 +59,7 @@ const TableActions: FC<Props> = ({ actions }) => {
               leaveTo="transform opacity-0 scale-95">
               <Menu.Items
                 static
-                className="origin-top-right absolute right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none divide-y divide-neutral-100">
+                className="absolute right-0 mt-2 w-56 origin-top-right divide-y divide-neutral-100 rounded-sm bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                 <div className="py-1">
                   {actions.map((action) => {
                     const Element = typeof action.onClick === "function" ? "span" : "a";
@@ -74,7 +74,7 @@ const TableActions: FC<Props> = ({ actions }) => {
                               "group flex items-center px-4 py-2 text-sm font-medium"
                             )}>
                             <action.icon
-                              className="ltr:mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500"
+                              className="h-5 w-5 text-neutral-400 group-hover:text-neutral-500 ltr:mr-3"
                               aria-hidden="true"
                             />
                             {action.label}
diff --git a/components/ui/WeekdaySelect.tsx b/components/ui/WeekdaySelect.tsx
index 37684bd61c..6f595d38b8 100644
--- a/components/ui/WeekdaySelect.tsx
+++ b/components/ui/WeekdaySelect.tsx
@@ -33,8 +33,8 @@ export const WeekdaySelect = (props: WeekdaySelectProps) => {
                 toggleDay(idx);
               }}
               className={`
-              w-10 h-10
-                      bg-brand text-brandcontrast focus:outline-none px-3 py-1 rounded 
+              h-10 w-10
+                      rounded bg-brand px-3 py-1 text-brandcontrast focus:outline-none 
                     ${activeDays[idx + 1] ? "rounded-r-none" : ""} 
                     ${activeDays[idx - 1] ? "rounded-l-none" : ""} 
                     ${idx === 0 ? "rounded-l" : ""} 
@@ -50,7 +50,7 @@ export const WeekdaySelect = (props: WeekdaySelectProps) => {
                 toggleDay(idx);
               }}
               style={{ marginTop: "1px", marginBottom: "1px" }}
-              className={`w-10 h-10 bg-gray-50 focus:outline-none px-3 py-1 rounded-none ${
+              className={`h-10 w-10 rounded-none bg-gray-50 px-3 py-1 focus:outline-none ${
                 idx === 0 ? "rounded-l" : "border-l-0"
               } ${idx === days.length - 1 ? "rounded-r" : ""}`}>
               {day}
diff --git a/components/ui/colorpicker.tsx b/components/ui/colorpicker.tsx
index b00e96790b..b2dd41d5e3 100644
--- a/components/ui/colorpicker.tsx
+++ b/components/ui/colorpicker.tsx
@@ -69,13 +69,13 @@ const ColorPicker = (props: ColorPickerProps) => {
   const close = useCallback(() => toggle(false), []);
   useOnClickOutside(popover, close);
   return (
-    <div className="relative flex items-center justify-center mt-1">
+    <div className="relative mt-1 flex items-center justify-center">
       <Swatch size="sm" backgroundColor={color} onClick={() => toggle(!isOpen)} />
 
       {isOpen && (
         <div className="popover" ref={popover}>
           <HexColorPicker
-            className="!w-32 !h-32 !absolute !top-10 !left-0 !z-10"
+            className="!absolute !top-10 !left-0 !z-10 !h-32 !w-32"
             color={color}
             onChange={(val) => {
               setColor(val);
@@ -85,7 +85,7 @@ const ColorPicker = (props: ColorPickerProps) => {
         </div>
       )}
       <HexColorInput
-        className="block w-full px-3 py-2 ml-1 border border-gray-300 rounded-sm shadow-sm focus:outline-none focus:ring-neutral-800 focus:border-neutral-800 sm:text-sm"
+        className="ml-1 block w-full rounded-sm border border-gray-300 px-3 py-2 shadow-sm focus:border-neutral-800 focus:outline-none focus:ring-neutral-800 sm:text-sm"
         color={color}
         onChange={(val) => {
           setColor(val);
diff --git a/components/ui/form/CheckboxField.tsx b/components/ui/form/CheckboxField.tsx
index d1533e4c98..16fdc90004 100644
--- a/components/ui/form/CheckboxField.tsx
+++ b/components/ui/form/CheckboxField.tsx
@@ -7,7 +7,7 @@ type Props = InputHTMLAttributes<HTMLInputElement> & {
 
 const CheckboxField = forwardRef<HTMLInputElement, Props>(({ label, description, ...rest }, ref) => {
   return (
-    <div className="items-center block sm:flex">
+    <div className="block items-center sm:flex">
       <div className="mb-4 min-w-48 sm:mb-0">
         <label htmlFor={rest.id} className="flex text-sm font-medium text-neutral-700">
           {label}
@@ -15,15 +15,15 @@ const CheckboxField = forwardRef<HTMLInputElement, Props>(({ label, description,
       </div>
       <div className="w-full">
         <div className="relative flex items-start">
-          <div className="flex items-center h-5">
+          <div className="flex h-5 items-center">
             <input
               {...rest}
               ref={ref}
               type="checkbox"
-              className="w-4 h-4 border-gray-300 rounded focus:ring-primary-500 text-primary-600"
+              className="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
             />
           </div>
-          <div className="ltr:ml-3 rtl:mr-3 text-sm">
+          <div className="text-sm ltr:ml-3 rtl:mr-3">
             <p className="text-neutral-900">{description}</p>
           </div>
         </div>
diff --git a/components/ui/form/CheckedSelect.tsx b/components/ui/form/CheckedSelect.tsx
index ea7190892e..b3d2be90bd 100644
--- a/components/ui/form/CheckedSelect.tsx
+++ b/components/ui/form/CheckedSelect.tsx
@@ -1,15 +1,15 @@
-import { CheckIcon, XIcon } from "@heroicons/react/outline";
-import React, { ForwardedRef, useEffect, useState } from "react";
-
-import { useLocale } from "@lib/hooks/useLocale";
-
 import Avatar from "@components/ui/Avatar";
 import Select from "@components/ui/form/Select";
+import { CheckIcon, XIcon } from "@heroicons/react/outline";
+import { useLocale } from "@lib/hooks/useLocale";
+import React, { useEffect, useState } from "react";
+import { MultiValue } from "react-select";
 
 type CheckedSelectValue = {
   avatar: string;
   label: string;
   value: string;
+  disabled?: boolean;
 }[];
 
 export type CheckedSelectProps = {
@@ -21,7 +21,7 @@ export type CheckedSelectProps = {
   disabled: boolean;
 };
 
-export const CheckedSelect = React.forwardRef((props: CheckedSelectProps, ref: ForwardedRef<unknown>) => {
+export const CheckedSelect = (props: CheckedSelectProps) => {
   const [selectedOptions, setSelectedOptions] = useState<CheckedSelectValue>(props.defaultValue || []);
   const { t } = useLocale();
 
@@ -29,18 +29,6 @@ export const CheckedSelect = React.forwardRef((props: CheckedSelectProps, ref: F
     props.onChange(selectedOptions);
   }, [selectedOptions]);
 
-  const formatOptionLabel = ({ label, avatar, disabled }) => (
-    <div className="flex">
-      <Avatar className="h-6 w-6 rounded-full mr-3" displayName={label} imageSrc={avatar} />
-      {label}
-      {disabled && (
-        <div className="flex-grow">
-          <CheckIcon className="text-neutral-500 w-6 h-6 float-right" />
-        </div>
-      )}
-    </div>
-  );
-
   const options = props.options.map((option) => ({
     ...option,
     disabled: !!selectedOptions.find((selectedOption) => selectedOption.value === option.value),
@@ -49,7 +37,7 @@ export const CheckedSelect = React.forwardRef((props: CheckedSelectProps, ref: F
   const removeOption = (value: string) =>
     setSelectedOptions(selectedOptions.filter((option) => option.value !== value));
 
-  const changeHandler = (selections) =>
+  const changeHandler = (selections: MultiValue<CheckedSelectValue[number]>) =>
     selections.forEach((selected) => {
       if (selectedOptions.find((option) => option.value === selected.value)) {
         removeOption(selected.value);
@@ -60,8 +48,7 @@ export const CheckedSelect = React.forwardRef((props: CheckedSelectProps, ref: F
 
   return (
     <>
-      <Select
-        ref={ref}
+      <Select<CheckedSelectValue[number], true>
         styles={{
           option: (styles, { isDisabled }) => ({
             ...styles,
@@ -71,29 +58,39 @@ export const CheckedSelect = React.forwardRef((props: CheckedSelectProps, ref: F
         name={props.name}
         placeholder={props.placeholder || t("select")}
         isSearchable={false}
-        formatOptionLabel={formatOptionLabel}
+        formatOptionLabel={({ label, avatar, disabled }) => (
+          <div className="flex">
+            <Avatar className="mr-3 h-6 w-6 rounded-full" alt={label} imageSrc={avatar} />
+            {label}
+            {disabled && (
+              <div className="flex-grow">
+                <CheckIcon className="float-right h-6 w-6 text-neutral-500" />
+              </div>
+            )}
+          </div>
+        )}
         options={options}
         isMulti
-        value={props.placeholder || t("select")}
+        // value={props.placeholder || t("select")}
         onChange={changeHandler}
       />
       {selectedOptions.map((option) => (
-        <div key={option.value} className="border border-1 p-2 font-medium">
+        <div key={option.value} className="border-1 border p-2 font-medium">
           <Avatar
-            className="w-6 h-6 rounded-full inline ltr:mr-2 rtl:ml-2"
+            className="inline h-6 w-6 rounded-full ltr:mr-2 rtl:ml-2"
             imageSrc={option.avatar}
-            displayName={option.label}
+            alt={option.label}
           />
           {option.label}
           <XIcon
             onClick={() => changeHandler([option])}
-            className="cursor-pointer h-5 w-5 mt-0.5 text-neutral-500 float-right"
+            className="float-right mt-0.5 h-5 w-5 cursor-pointer text-neutral-500"
           />
         </div>
       ))}
     </>
   );
-});
+};
 
 CheckedSelect.displayName = "CheckedSelect";
 
diff --git a/components/ui/form/DatePicker.tsx b/components/ui/form/DatePicker.tsx
index f785cbcfd7..d4134a2f9f 100644
--- a/components/ui/form/DatePicker.tsx
+++ b/components/ui/form/DatePicker.tsx
@@ -16,11 +16,11 @@ export const DatePicker = ({ date, onDatesChange, className }: Props) => {
   return (
     <PrimitiveDatePicker
       className={classNames(
-        "p-1 pl-2 border border-gray-300 rounded-sm shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm",
+        "rounded-sm border border-gray-300 p-1 pl-2 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm",
         className
       )}
       clearIcon={null}
-      calendarIcon={<CalendarIcon className="w-5 h-5 text-gray-500" />}
+      calendarIcon={<CalendarIcon className="h-5 w-5 text-gray-500" />}
       value={date}
       onChange={onDatesChange}
     />
diff --git a/components/ui/form/DateRangePicker.tsx b/components/ui/form/DateRangePicker.tsx
index 93d27c0f9f..bbcdc942e1 100644
--- a/components/ui/form/DateRangePicker.tsx
+++ b/components/ui/form/DateRangePicker.tsx
@@ -14,13 +14,13 @@ type Props = {
 export const DateRangePicker = ({ startDate, endDate, onDatesChange }: Props) => {
   return (
     <PrimitiveDateRangePicker
-      className="border-gray-300 rounded-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
+      className="rounded-sm border-gray-300 focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
       clearIcon={null}
       calendarIcon={<CalendarIcon className="h-5 w-5 text-gray-500" />}
       rangeDivider={<ArrowRightIcon className="h-4 w-4 text-gray-400 ltr:mr-2 rtl:ml-2" />}
       value={[startDate, endDate]}
       onChange={([startDate, endDate]) => {
-        onDatesChange({ startDate, endDate });
+        if (typeof onDatesChange === "function") onDatesChange({ startDate, endDate });
       }}
     />
   );
diff --git a/components/ui/form/MinutesField.tsx b/components/ui/form/MinutesField.tsx
index 20cded635c..9ffc1e17c9 100644
--- a/components/ui/form/MinutesField.tsx
+++ b/components/ui/form/MinutesField.tsx
@@ -10,7 +10,7 @@ const MinutesField = forwardRef<HTMLInputElement, Props>(({ label, ...rest }, re
     <div className="block sm:flex">
       {!!label && (
         <div className="mb-4 min-w-48 sm:mb-0">
-          <label htmlFor={rest.id} className="flex items-center h-full text-sm font-medium text-neutral-700">
+          <label htmlFor={rest.id} className="flex h-full items-center text-sm font-medium text-neutral-700">
             {label}
           </label>
         </div>
@@ -22,11 +22,11 @@ const MinutesField = forwardRef<HTMLInputElement, Props>(({ label, ...rest }, re
             ref={ref}
             type="number"
             className={classNames(
-              "block w-full pl-2 pr-12 border-gray-300 rounded-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm",
+              "block w-full rounded-sm border-gray-300 pl-2 pr-12 focus:border-primary-500 focus:ring-primary-500 sm:text-sm",
               rest.className
             )}
           />
-          <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
+          <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
             <span className="text-gray-500 sm:text-sm" id="duration">
               mins
             </span>
diff --git a/components/ui/form/PhoneInput.tsx b/components/ui/form/PhoneInput.tsx
index 29c9600a6b..ae01d5414c 100644
--- a/components/ui/form/PhoneInput.tsx
+++ b/components/ui/form/PhoneInput.tsx
@@ -9,7 +9,7 @@ export const PhoneInput = (props: Optional<PhoneInputProps, "onChange">) => (
   <BasePhoneInput
     {...props}
     className={classNames(
-      "shadow-sm rounded-sm block w-full py-px px-3 border border-1 border-gray-300 ring-black focus-within:ring-1 focus-within:border-brand dark:border-black dark:text-white dark:bg-black",
+      "border-1 block w-full rounded-sm border border-gray-300 py-px px-3 shadow-sm ring-black focus-within:border-brand focus-within:ring-1 dark:border-black dark:bg-black dark:text-white",
       props.className
     )}
     onChange={() => {
diff --git a/components/ui/form/Schedule.tsx b/components/ui/form/Schedule.tsx
index 588d78b308..bce618da9a 100644
--- a/components/ui/form/Schedule.tsx
+++ b/components/ui/form/Schedule.tsx
@@ -139,21 +139,21 @@ const ScheduleBlock = ({ name, day, weekday }: ScheduleBlockProps) => {
   };
 
   return (
-    <fieldset className="flex flex-col space-y-2 sm:space-y-0 sm:flex-row justify-between py-5 min-h-[86px]">
+    <fieldset className="flex min-h-[86px] flex-col justify-between space-y-2 py-5 sm:flex-row sm:space-y-0">
       <div className="w-1/3">
         <label className="flex items-center space-x-2 rtl:space-x-reverse">
           <input
             type="checkbox"
             checked={fields.length > 0}
             onChange={(e) => (e.target.checked ? replace([defaultDayRange]) : replace([]))}
-            className="inline-block border-gray-300 rounded-sm focus:ring-neutral-500 text-neutral-900"
+            className="inline-block rounded-sm border-gray-300 text-neutral-900 focus:ring-neutral-500"
           />
           <span className="inline-block text-sm capitalize">{weekday}</span>
         </label>
       </div>
       <div className="flex-grow">
         {fields.map((field, index) => (
-          <div key={field.id} className="flex justify-between mb-1">
+          <div key={field.id} className="mb-1 flex justify-between">
             <div className="flex items-center space-x-2 rtl:space-x-reverse">
               <TimeRangeField name={`${name}.${day}.${index}`} />
             </div>
diff --git a/components/ui/form/radio-area/RadioAreaGroup.tsx b/components/ui/form/radio-area/RadioAreaGroup.tsx
index eace7064c7..8fde4f42fa 100644
--- a/components/ui/form/radio-area/RadioAreaGroup.tsx
+++ b/components/ui/form/radio-area/RadioAreaGroup.tsx
@@ -11,7 +11,7 @@ const RadioArea = (props: RadioAreaProps) => {
   return (
     <label
       className={classNames(
-        "block border border-1 p-4 focus:outline-none focus:ring focus:ring-neutral-500",
+        "border-1 block border p-4 focus:outline-none focus:ring focus:ring-neutral-500",
         props.checked && "border-brand",
         props.className
       )}>
diff --git a/components/ui/form/radio-area/Select.tsx b/components/ui/form/radio-area/Select.tsx
index fa261a163b..d522281b14 100644
--- a/components/ui/form/radio-area/Select.tsx
+++ b/components/ui/form/radio-area/Select.tsx
@@ -7,13 +7,15 @@ import { useLocale } from "@lib/hooks/useLocale";
 
 import { RadioArea, RadioAreaGroup } from "@components/ui/form/radio-area/RadioAreaGroup";
 
-type OptionProps = React.OptionHTMLAttributes<HTMLOptionElement> & {
+interface OptionProps
+  extends Pick<React.OptionHTMLAttributes<HTMLOptionElement>, "value" | "label" | "className"> {
   description?: string;
-};
+}
 
-type RadioAreaSelectProps = React.SelectHTMLAttributes<HTMLSelectElement> & {
+interface RadioAreaSelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "onChange"> {
   options: OptionProps[]; // allow options to be passed programmatically, like options={}
-};
+  onChange?: (value: string) => void;
+}
 
 export const Select = function RadioAreaSelect(props: RadioAreaSelectProps) {
   const { t } = useLocale();
@@ -23,7 +25,7 @@ export const Select = function RadioAreaSelect(props: RadioAreaSelectProps) {
     placeholder = t("select"),
   } = props;
 
-  const getLabel = (value: string | ReadonlyArray<string> | number) =>
+  const getLabel = (value: string | ReadonlyArray<string> | number | undefined) =>
     options.find((option: OptionProps) => option.value === value)?.label;
 
   return (
@@ -32,8 +34,8 @@ export const Select = function RadioAreaSelect(props: RadioAreaSelectProps) {
         type="button"
         disabled={disabled}
         className={classNames(
-          "mb-1 cursor-pointer focus:ring-primary-500 text-left border border-1 bg-white p-2 shadow-sm block w-full sm:text-sm border-gray-300 rounded-sm",
-          disabled && "focus:ring-0 cursor-default bg-gray-200 "
+          "border-1 mb-1 block w-full cursor-pointer rounded-sm border border-gray-300 bg-white p-2 text-left shadow-sm focus:ring-primary-500 sm:text-sm",
+          disabled && "cursor-default bg-gray-200 focus:ring-0 "
         )}>
         {getLabel(props.value) ?? placeholder}
         <ChevronDownIcon className="float-right h-5 w-5 text-neutral-500" />
@@ -41,8 +43,11 @@ export const Select = function RadioAreaSelect(props: RadioAreaSelectProps) {
       <CollapsibleContent>
         <RadioAreaGroup className="space-y-2 text-sm" name={props.name} onChange={props.onChange}>
           {options.map((option) => (
-            <RadioArea {...option} key={option.value} defaultChecked={props.value === option.value}>
-              <strong className="block mb-1">{option.label}</strong>
+            <RadioArea
+              {...option}
+              key={Array.isArray(option.value) ? option.value.join(",") : `${option.value}`}
+              defaultChecked={props.value === option.value}>
+              <strong className="mb-1 block">{option.label}</strong>
               <p>{option.description}</p>
             </RadioArea>
           ))}
diff --git a/components/ui/modal/SetTimesModal.tsx b/components/ui/modal/SetTimesModal.tsx
index a00424e95b..ea8d948358 100644
--- a/components/ui/modal/SetTimesModal.tsx
+++ b/components/ui/modal/SetTimesModal.tsx
@@ -5,31 +5,21 @@ import { useLocale } from "@lib/hooks/useLocale";
 
 import Button from "@components/ui/Button";
 
-export default function SetTimesModal(props) {
+interface SetTimesModalProps {
+  startTime: number;
+  endTime: number;
+  onChange: (times: { startTime: number; endTime: number }) => void;
+  onExit: (...p: unknown[]) => void;
+}
+
+export default function SetTimesModal(props: SetTimesModalProps) {
   const { t } = useLocale();
   const [startHours, startMinutes] = [Math.floor(props.startTime / 60), props.startTime % 60];
   const [endHours, endMinutes] = [Math.floor(props.endTime / 60), props.endTime % 60];
-
-  const startHoursRef = useRef<HTMLInputElement>();
-  const startMinsRef = useRef<HTMLInputElement>();
-  const endHoursRef = useRef<HTMLInputElement>();
-  const endMinsRef = useRef<HTMLInputElement>();
-
-  function updateStartEndTimesHandler(event) {
-    event.preventDefault();
-
-    const enteredStartHours = parseInt(startHoursRef.current.value);
-    const enteredStartMins = parseInt(startMinsRef.current.value);
-    const enteredEndHours = parseInt(endHoursRef.current.value);
-    const enteredEndMins = parseInt(endMinsRef.current.value);
-
-    props.onChange({
-      startTime: enteredStartHours * 60 + enteredStartMins,
-      endTime: enteredEndHours * 60 + enteredEndMins,
-    });
-
-    props.onExit(0);
-  }
+  const startHoursRef = useRef<HTMLInputElement>(null!);
+  const startMinsRef = useRef<HTMLInputElement>(null!);
+  const endHoursRef = useRef<HTMLInputElement>(null!);
+  const endMinsRef = useRef<HTMLInputElement>(null!);
 
   return (
     <div
@@ -37,19 +27,19 @@ export default function SetTimesModal(props) {
       aria-labelledby="modal-title"
       role="dialog"
       aria-modal="true">
-      <div className="flex items-end justify-center min-h-screen 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 pt-4 pb-20 text-center sm:block sm:p-0">
         <div
-          className="fixed inset-0 z-0 transition-opacity bg-gray-500 bg-opacity-75"
+          className="fixed inset-0 z-0 bg-gray-500 bg-opacity-75 transition-opacity"
           aria-hidden="true"></div>
 
-        <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
+        <span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">
           &#8203;
         </span>
 
-        <div className="inline-block px-4 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
+        <div className="inline-block transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
           <div className="mb-4 sm:flex sm:items-start">
-            <div className="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto bg-blue-100 rounded-full sm:mx-0 sm:h-10 sm:w-10">
-              <ClockIcon className="w-6 h-6 text-black" />
+            <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
+              <ClockIcon className="h-6 w-6 text-black" />
             </div>
             <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
@@ -60,7 +50,7 @@ export default function SetTimesModal(props) {
               </div>
             </div>
           </div>
-          <div className="flex mb-4">
+          <div className="mb-4 flex">
             <label className="block w-1/4 pt-2 text-sm font-medium text-gray-700">{t("start_time")}</label>
             <div>
               <label htmlFor="startHours" className="sr-only">
@@ -71,15 +61,15 @@ export default function SetTimesModal(props) {
                 type="number"
                 min="0"
                 max="23"
-                maxLength="2"
+                maxLength={2}
                 name="hours"
                 id="startHours"
-                className="block w-full border-gray-300 rounded-md shadow-sm focus:ring-black focus:border-brand sm:text-sm"
+                className="block w-full rounded-md border-gray-300 shadow-sm focus:border-brand focus:ring-black sm:text-sm"
                 placeholder="9"
                 defaultValue={startHours}
               />
             </div>
-            <span className="pt-1 mx-2">:</span>
+            <span className="mx-2 pt-1">:</span>
             <div>
               <label htmlFor="startMinutes" className="sr-only">
                 {t("minutes")}
@@ -90,10 +80,10 @@ export default function SetTimesModal(props) {
                 min="0"
                 max="59"
                 step="15"
-                maxLength="2"
+                maxLength={2}
                 name="minutes"
                 id="startMinutes"
-                className="block w-full border-gray-300 rounded-md shadow-sm focus:ring-black focus:border-brand sm:text-sm"
+                className="block w-full rounded-md border-gray-300 shadow-sm focus:border-brand focus:ring-black sm:text-sm"
                 placeholder="30"
                 defaultValue={startMinutes}
               />
@@ -110,15 +100,15 @@ export default function SetTimesModal(props) {
                 type="number"
                 min="0"
                 max="24"
-                maxLength="2"
+                maxLength={2}
                 name="hours"
                 id="endHours"
-                className="block w-full border-gray-300 rounded-md shadow-sm focus:ring-black focus:border-brand sm:text-sm"
+                className="block w-full rounded-md border-gray-300 shadow-sm focus:border-brand focus:ring-black sm:text-sm"
                 placeholder="17"
                 defaultValue={endHours}
               />
             </div>
-            <span className="pt-1 mx-2">:</span>
+            <span className="mx-2 pt-1">:</span>
             <div>
               <label htmlFor="endMinutes" className="sr-only">
                 {t("minutes")}
@@ -128,18 +118,34 @@ export default function SetTimesModal(props) {
                 type="number"
                 min="0"
                 max="59"
-                maxLength="2"
+                maxLength={2}
                 step="15"
                 name="minutes"
                 id="endMinutes"
-                className="block w-full border-gray-300 rounded-md shadow-sm focus:ring-black focus:border-brand sm:text-sm"
+                className="block w-full rounded-md border-gray-300 shadow-sm focus:border-brand focus:ring-black sm:text-sm"
                 placeholder="30"
                 defaultValue={endMinutes}
               />
             </div>
           </div>
           <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-            <Button onClick={updateStartEndTimesHandler} type="submit">
+            <Button
+              onClick={(event) => {
+                event.preventDefault();
+
+                const enteredStartHours = parseInt(startHoursRef.current.value);
+                const enteredStartMins = parseInt(startMinsRef.current.value);
+                const enteredEndHours = parseInt(endHoursRef.current.value);
+                const enteredEndMins = parseInt(endMinsRef.current.value);
+
+                props.onChange({
+                  startTime: enteredStartHours * 60 + enteredStartMins,
+                  endTime: enteredEndHours * 60 + enteredEndMins,
+                });
+
+                props.onExit(0);
+              }}
+              type="submit">
               {t("save")}
             </Button>
             <Button onClick={props.onExit} type="button" color="secondary" className="ltr:mr-2">
diff --git a/components/ui/svg/UserCalendarIllustration.tsx b/components/ui/svg/UserCalendarIllustration.tsx
index 0ccab719ea..726723661a 100644
--- a/components/ui/svg/UserCalendarIllustration.tsx
+++ b/components/ui/svg/UserCalendarIllustration.tsx
@@ -3,7 +3,7 @@ import React from "react";
 function UserCalendarIllustration() {
   return (
     <svg
-      className="w-1/2 md:w-32 mx-auto block mb-4"
+      className="mx-auto mb-4 block w-1/2 md:w-32"
       viewBox="0 0 132 132"
       fill="none"
       xmlns="http://www.w3.org/2000/svg">
diff --git a/ee/components/LicenseBanner.tsx b/ee/components/LicenseBanner.tsx
index bfe04e14b6..dbd3462db9 100644
--- a/ee/components/LicenseBanner.tsx
+++ b/ee/components/LicenseBanner.tsx
@@ -24,40 +24,40 @@ export default function LicenseBanner() {
   }
 
   return (
-    <div className="fixed inset-x-0 bottom-0 left-0 pb-2 md:left-56 sm:pb-5">
-      <div className="px-2 mx-auto max-w-7xl sm:px-8">
-        <div className="p-2 bg-green-600 rounded-sm shadow-lg sm:p-3">
+    <div className="fixed inset-x-0 bottom-0 left-0 pb-2 sm:pb-5 md:left-56">
+      <div className="mx-auto max-w-7xl px-2 sm:px-8">
+        <div className="rounded-sm bg-green-600 p-2 shadow-lg sm:p-3">
           <div className="flex flex-wrap items-center justify-between">
-            <div className="flex items-center flex-1 w-0">
-              <span className="flex p-2 bg-green-800 rounded-sm">
-                <BadgeCheckIcon className="w-6 h-6 text-white" aria-hidden="true" />
+            <div className="flex w-0 flex-1 items-center">
+              <span className="flex rounded-sm bg-green-800 p-2">
+                <BadgeCheckIcon className="h-6 w-6 text-white" aria-hidden="true" />
               </span>
-              <p className="ml-3 font-medium text-white truncate">
+              <p className="ml-3 truncate font-medium text-white">
                 <span className="inline">
                   <Trans i18nKey="accept_our_license" values={{ agree: "agree" }}>
                     Accept our license by changing the .env variable
-                    <span className="px-1 bg-gray-50 bg-opacity-20">NEXT_PUBLIC_LICENSE_CONSENT</span> to
+                    <span className="bg-gray-50 bg-opacity-20 px-1">NEXT_PUBLIC_LICENSE_CONSENT</span> to
                     &apos;agree&apos;.
                   </Trans>
                 </span>
               </p>
             </div>
-            <div className="flex-shrink-0 order-3 w-full mt-2 sm:order-2 sm:mt-0 sm:w-auto">
+            <div className="order-3 mt-2 w-full flex-shrink-0 sm:order-2 sm:mt-0 sm:w-auto">
               <Dialog>
                 <DialogTrigger asChild>
-                  <button className="flex items-center justify-center w-full px-4 py-2 text-sm font-medium text-green-600 bg-white border border-transparent rounded-sm shadow-sm hover:bg-green-50">
+                  <button className="flex w-full items-center justify-center rounded-sm border border-transparent bg-white px-4 py-2 text-sm font-medium text-green-600 shadow-sm hover:bg-green-50">
                     {t("accept_license")}
                   </button>
                 </DialogTrigger>
                 <DialogContent />
               </Dialog>
             </div>
-            <div className="flex-shrink-0 order-2 sm:order-3 sm:ml-2">
+            <div className="order-2 flex-shrink-0 sm:order-3 sm:ml-2">
               <Dialog>
                 <DialogTrigger asChild>
-                  <button className="flex p-2 -mr-1 rounded-sm hover:bg-green-500 focus:outline-none focus:ring-2 focus:ring-white">
+                  <button className="-mr-1 flex rounded-sm p-2 hover:bg-green-500 focus:outline-none focus:ring-2 focus:ring-white">
                     <span className="sr-only">{t("dismiss")}</span>
-                    <XIcon className="w-6 h-6 text-white" aria-hidden="true" />
+                    <XIcon className="h-6 w-6 text-white" aria-hidden="true" />
                   </button>
                 </DialogTrigger>
                 <DialogContent />
@@ -78,12 +78,12 @@ export default function LicenseBanner() {
         cancelBtnText={t("cancel")}>
         <Trans i18nKey="remove_banner_instructions" values={{ agree: "agree" }}>
           To remove this banner, please open your .env file and change the
-          <span className="bg-green-400 text-green-500 bg-opacity-20 p-[2px]">
+          <span className="bg-green-400 bg-opacity-20 p-[2px] text-green-500">
             NEXT_PUBLIC_LICENSE_CONSENT
-          </span>{" "}
+          </span>
           variable to &apos;agreeapos;.
         </Trans>
-        <h2 className="mt-8 mb-2 text-black font-cal">{t("terms_summary")}:</h2>
+        <h2 className="mt-8 mb-2 font-cal text-black">{t("terms_summary")}:</h2>
         <ul className="ml-5 list-disc">
           <li>{t("codebase_has_to_stay_opensource")}</li>
           <li>{t("cannot_repackage_codebase")}</li>
diff --git a/ee/components/TrialBanner.tsx b/ee/components/TrialBanner.tsx
index eedb0cb598..88d4751736 100644
--- a/ee/components/TrialBanner.tsx
+++ b/ee/components/TrialBanner.tsx
@@ -19,13 +19,13 @@ const TrialBanner = () => {
 
   return (
     <div
-      className="hidden p-4 m-4 text-sm font-medium text-center text-gray-600 bg-yellow-200 rounded-md sm:block"
+      className="m-4 hidden rounded-md bg-yellow-200 p-4 text-center text-sm font-medium text-gray-600 sm:block"
       data-testid="trial-banner">
       <div className="mb-2 text-left">{t("trial_days_left", { days: trialDaysLeft })}</div>
       <Button
         href="/api/upgrade"
         color="minimal"
-        className="justify-center w-full border-2 border-gray-600 hover:bg-yellow-100">
+        className="w-full justify-center border-2 border-gray-600 hover:bg-yellow-100">
         {t("upgrade_now")}
       </Button>
     </div>
diff --git a/ee/components/saml/Configuration.tsx b/ee/components/saml/Configuration.tsx
index 342ba42a6c..15c4a0ba12 100644
--- a/ee/components/saml/Configuration.tsx
+++ b/ee/components/saml/Configuration.tsx
@@ -94,7 +94,7 @@ export default function SAMLConfiguration({
         <>
           <hr className="mt-8" />
           <div className="mt-6">
-            <h2 className="text-lg font-medium leading-6 text-gray-900 font-cal">
+            <h2 className="font-cal text-lg font-medium leading-6 text-gray-900">
               {t("saml_configuration")}
               <Badge className="ml-2 text-xs" variant={samlConfig ? "success" : "gray"}>
                 {samlConfig ? t("enabled") : t("disabled")}
@@ -110,7 +110,7 @@ export default function SAMLConfiguration({
           </div>
 
           {samlConfig ? (
-            <div className="flex mt-2">
+            <div className="mt-2 flex">
               <Dialog>
                 <DialogTrigger asChild>
                   <Button
diff --git a/ee/components/stripe/Payment.tsx b/ee/components/stripe/Payment.tsx
index 1b8a8fda96..3debcdb855 100644
--- a/ee/components/stripe/Payment.tsx
+++ b/ee/components/stripe/Payment.tsx
@@ -106,7 +106,7 @@ export default function PaymentComponent(props: Props) {
   return (
     <form id="payment-form" className="mt-4" onSubmit={handleSubmit}>
       <CardElement id="card-element" options={CARD_OPTIONS} onChange={handleChange} />
-      <div className="flex justify-center mt-2">
+      <div className="mt-2 flex justify-center">
         <Button
           type="submit"
           disabled={["processing", "error"].includes(state.status)}
diff --git a/ee/components/stripe/PaymentPage.tsx b/ee/components/stripe/PaymentPage.tsx
index 375d89624a..7614d52d13 100644
--- a/ee/components/stripe/PaymentPage.tsx
+++ b/ee/components/stripe/PaymentPage.tsx
@@ -40,25 +40,25 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
         </title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <main className="max-w-3xl py-24 mx-auto">
+      <main className="mx-auto max-w-3xl py-24">
         <div className="fixed inset-0 z-50 overflow-y-auto">
-          <div className="flex items-end justify-center min-h-screen 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 pt-4 pb-20 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:align-middle sm:h-screen" aria-hidden="true">
+              <span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">
                 &#8203;
               </span>
               <div
-                className="inline-block px-8 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all transform bg-white border rounded-sm dark:bg-gray-800 border-neutral-200 dark:border-neutral-700 sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:py-6"
+                className="inline-block transform overflow-hidden rounded-sm border border-neutral-200 bg-white px-8 pt-5 pb-4 text-left align-bottom transition-all dark:border-neutral-700 dark:bg-gray-800 sm:my-8 sm:w-full sm:max-w-lg sm:py-6 sm:align-middle"
                 role="dialog"
                 aria-modal="true"
                 aria-labelledby="modal-headline">
                 <div>
-                  <div className="flex items-center justify-center w-12 h-12 mx-auto bg-green-100 rounded-full">
-                    <CreditCardIcon className="w-8 h-8 text-green-600" />
+                  <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
+                    <CreditCardIcon className="h-8 w-8 text-green-600" />
                   </div>
                   <div className="mt-3 text-center sm:mt-5">
                     <h3
-                      className="text-2xl font-semibold leading-6 dark:text-white text-neutral-900"
+                      className="text-2xl font-semibold leading-6 text-neutral-900 dark:text-white"
                       id="modal-headline">
                       {t("payment")}
                     </h3>
@@ -67,7 +67,7 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
                         {t("pay_later_instructions")}
                       </p>
                     </div>
-                    <div className="grid grid-cols-3 py-4 mt-4 text-left text-gray-700 border-t border-b dark:text-gray-300 dark:border-gray-900">
+                    <div className="mt-4 grid grid-cols-3 border-t border-b py-4 text-left text-gray-700 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>
@@ -117,7 +117,7 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
                   )}
                 </div>
                 {!props.profile.hideBranding && (
-                  <div className="pt-4 mt-4 text-xs text-center text-gray-400 border-t dark:border-gray-900 dark:text-white">
+                  <div className="mt-4 border-t pt-4 text-center text-xs text-gray-400 dark:border-gray-900 dark:text-white">
                     <a href="https://cal.com/signup">{t("create_booking_link_with_calcom")}</a>
                   </div>
                 )}
diff --git a/ee/components/team/availability/TeamAvailabilityModal.tsx b/ee/components/team/availability/TeamAvailabilityModal.tsx
index 79d287a0ef..af17c44d97 100644
--- a/ee/components/team/availability/TeamAvailabilityModal.tsx
+++ b/ee/components/team/availability/TeamAvailabilityModal.tsx
@@ -32,17 +32,17 @@ export default function TeamAvailabilityModal(props: Props) {
   }, [utils, selectedTimeZone, selectedDate]);
 
   return (
-    <div className="flex flex-row max-h-[500px] min-h-[500px]  rtl:space-x-reverse space-x-8">
-      <div className="w-64 p-5 pr-0 space-y-5 min-w-64">
+    <div className="flex max-h-[500px] min-h-[500px] flex-row  space-x-8 rtl:space-x-reverse">
+      <div className="w-64 min-w-64 space-y-5 p-5 pr-0">
         <div className="flex">
           <Avatar
             imageSrc={getPlaceholderAvatar(props.member?.avatar, props.member?.name as string)}
             alt={props.member?.name || ""}
-            className="rounded-full w-14 h-14"
+            className="h-14 w-14 rounded-full"
           />
-          <div className="inline-block pt-1 ml-3">
+          <div className="ml-3 inline-block pt-1">
             <span className="text-lg font-bold text-neutral-700">{props.member?.name}</span>
-            <span className="block -mt-1 text-sm text-gray-400">{props.member?.email}</span>
+            <span className="-mt-1 block text-sm text-gray-400">{props.member?.email}</span>
           </div>
         </div>
         <div className="flex flex-col">
@@ -61,7 +61,7 @@ export default function TeamAvailabilityModal(props: Props) {
             value={selectedTimeZone}
             onChange={(timezone) => setSelectedTimeZone(timezone.value)}
             classNamePrefix="react-select"
-            className="block w-full mt-1 border border-gray-300 rounded-sm shadow-sm react-select-container focus:ring-neutral-800 focus:border-neutral-800 sm:text-sm"
+            className="react-select-container mt-1 block w-full rounded-sm border border-gray-300 shadow-sm focus:border-neutral-800 focus:ring-neutral-800 sm:text-sm"
           />
         </div>
         <div>
@@ -74,7 +74,7 @@ export default function TeamAvailabilityModal(props: Props) {
             ]}
             isSearchable={false}
             classNamePrefix="react-select"
-            className="flex-1 block w-full min-w-0 border border-gray-300 rounded-sm react-select-container focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
+            className="react-select-container block w-full min-w-0 flex-1 rounded-sm border border-gray-300 focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
             value={{ value: frequency, label: `${frequency} minutes` }}
             onChange={(newFrequency) => setFrequency(newFrequency?.value ?? 30)}
           />
diff --git a/ee/components/team/availability/TeamAvailabilityScreen.tsx b/ee/components/team/availability/TeamAvailabilityScreen.tsx
index 8c5e01786e..a0966adaee 100644
--- a/ee/components/team/availability/TeamAvailabilityScreen.tsx
+++ b/ee/components/team/availability/TeamAvailabilityScreen.tsx
@@ -35,7 +35,7 @@ export default function TeamAvailabilityScreen(props: Props) {
     if (!member) return <></>;
 
     return (
-      <div key={member.id} style={style} className="flex pl-4 border-r border-gray-200 ">
+      <div key={member.id} style={style} className="flex border-r border-gray-200 pl-4 ">
         <TeamAvailabilityTimes
           teamId={props.team?.id as number}
           memberId={member.id}
@@ -43,15 +43,15 @@ export default function TeamAvailabilityScreen(props: Props) {
           selectedDate={selectedDate}
           selectedTimeZone={selectedTimeZone}
           HeaderComponent={
-            <div className="flex items-center mb-6">
+            <div className="mb-6 flex items-center">
               <Avatar
                 imageSrc={getPlaceholderAvatar(member?.avatar, member?.name as string)}
                 alt={member?.name || ""}
-                className="w-10 h-10 mt-1 rounded-full min-w-10 min-h-10"
+                className="mt-1 h-10 min-h-10 w-10 min-w-10 rounded-full"
               />
-              <div className="inline-block pt-1 ml-3 overflow-hidden">
-                <span className="text-lg font-bold truncate text-neutral-700">{member?.name}</span>
-                <span className="block -mt-1 text-sm text-gray-400 truncate">{member?.email}</span>
+              <div className="ml-3 inline-block overflow-hidden pt-1">
+                <span className="truncate text-lg font-bold text-neutral-700">{member?.name}</span>
+                <span className="-mt-1 block truncate text-sm text-gray-400">{member?.email}</span>
               </div>
             </div>
           }
@@ -61,8 +61,8 @@ export default function TeamAvailabilityScreen(props: Props) {
   };
 
   return (
-    <div className="flex flex-col flex-1 bg-white border rounded-sm border-neutral-200">
-      <div className="flex w-full p-4 rtl:space-x-reverse space-x-5 border-b border-gray-200">
+    <div className="flex flex-1 flex-col rounded-sm border border-neutral-200 bg-white">
+      <div className="flex w-full space-x-5 border-b border-gray-200 p-4 rtl:space-x-reverse">
         <div className="flex flex-col">
           <span className="text-sm font-medium text-neutral-700">Date</span>
           <DatePicker
@@ -80,7 +80,7 @@ export default function TeamAvailabilityScreen(props: Props) {
             value={selectedTimeZone}
             onChange={(timezone) => setSelectedTimeZone(timezone.value)}
             classNamePrefix="react-select"
-            className="w-full border border-gray-300 rounded-sm shadow-sm react-select-container focus:ring-neutral-800 focus:border-neutral-800 sm:text-sm"
+            className="react-select-container w-full rounded-sm border border-gray-300 shadow-sm focus:border-neutral-800 focus:ring-neutral-800 sm:text-sm"
           />
         </div>
         <div className="hidden sm:block">
@@ -93,13 +93,13 @@ export default function TeamAvailabilityScreen(props: Props) {
             ]}
             isSearchable={false}
             classNamePrefix="react-select"
-            className="flex-1 block w-full min-w-0 border border-gray-300 rounded-sm react-select-container focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
+            className="react-select-container block w-full min-w-0 flex-1 rounded-sm border border-gray-300 focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
             value={{ value: frequency, label: `${frequency} minutes` }}
             onChange={(newFrequency) => setFrequency(newFrequency?.value ?? 30)}
           />
         </div>
       </div>
-      <div className="flex flex-1 h-full">
+      <div className="flex h-full flex-1">
         <AutoSizer>
           {({ height, width }) => (
             <List
diff --git a/ee/components/team/availability/TeamAvailabilityTimes.tsx b/ee/components/team/availability/TeamAvailabilityTimes.tsx
index 3190e960f7..37629769ec 100644
--- a/ee/components/team/availability/TeamAvailabilityTimes.tsx
+++ b/ee/components/team/availability/TeamAvailabilityTimes.tsx
@@ -48,7 +48,7 @@ export default function TeamAvailabilityTimes(props: Props) {
     : [];
 
   return (
-    <div className={classNames("flex-grow p-5 pl-0 min-w-60", props.className)}>
+    <div className={classNames("min-w-60 flex-grow p-5 pl-0", props.className)}>
       {props.HeaderComponent}
       {isLoading && times.length === 0 && <Loader />}
       {!isLoading && times.length === 0 && (
@@ -59,7 +59,7 @@ export default function TeamAvailabilityTimes(props: Props) {
       {times.map((time) => (
         <div key={time.format()} className="flex flex-row items-center">
           <a
-            className="flex-grow block py-2 mb-2 mr-3 font-medium text-center bg-white border rounded-sm min-w-48 dark:bg-gray-600 text-primary-500 dark:text-neutral-200 border-brand dark:border-transparent hover:bg-brand hover:text-brandcontrast dark:hover:border-black dark:hover:text-white dark:hover:bg-black"
+            className="mb-2 mr-3 block min-w-48 flex-grow rounded-sm border border-brand bg-white py-2 text-center font-medium text-primary-500 hover:bg-brand hover:text-brandcontrast dark:border-transparent dark:bg-gray-600 dark:text-neutral-200 dark:hover:border-black dark:hover:bg-black dark:hover:text-white"
             data-testid="time">
             {time.format("HH:mm")}
           </a>
diff --git a/ee/components/web3/CryptoSection.tsx b/ee/components/web3/CryptoSection.tsx
index 596014cd42..76632c2195 100644
--- a/ee/components/web3/CryptoSection.tsx
+++ b/ee/components/web3/CryptoSection.tsx
@@ -96,7 +96,7 @@ const CryptoSection = (props: CryptoSectionProps) => {
   const verifyButton = useMemo(() => {
     return (
       <Button color="secondary" onClick={verifyWallet} type="button" id="hasToken" name="hasToken">
-        <img className="h-5 mr-1" src="/integrations/metamask.svg" />
+        <img className="mr-1 h-5" src="/integrations/metamask.svg" />
         {t("verify_wallet")}
       </Button>
     );
@@ -105,7 +105,7 @@ const CryptoSection = (props: CryptoSectionProps) => {
   const connectButton = useMemo(() => {
     return (
       <Button color="secondary" onClick={connectMetamask} type="button">
-        <img className="h-5 mr-1" src="/integrations/metamask.svg" />
+        <img className="mr-1 h-5" src="/integrations/metamask.svg" />
         {t("connect_metamask")}
       </Button>
     );
@@ -120,7 +120,7 @@ const CryptoSection = (props: CryptoSectionProps) => {
           await connectMetamask();
           await verifyWallet();
         }}>
-        <img className="h-5 mr-1" src="/integrations/metamask.svg" />
+        <img className="mr-1 h-5" src="/integrations/metamask.svg" />
         {t("verify_wallet")}
       </Button>
     );
@@ -141,7 +141,7 @@ const CryptoSection = (props: CryptoSectionProps) => {
 
   return (
     <div
-      className="absolute transition-opacity transform -translate-x-1/2 -translate-y-1/2 opacity-0 dark:bg-gray-900 top-1/2 left-1/2 group-hover:opacity-100"
+      className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform opacity-0 transition-opacity group-hover:opacity-100 dark:bg-gray-900"
       id={`crypto-${props.id}`}>
       {determineButton()}
     </div>
diff --git a/ee/lib/intercom/HelpMenuItem.tsx b/ee/lib/intercom/HelpMenuItem.tsx
index f70161d90d..92ad525bb6 100644
--- a/ee/lib/intercom/HelpMenuItem.tsx
+++ b/ee/lib/intercom/HelpMenuItem.tsx
@@ -20,7 +20,7 @@ const HelpMenuItem = () => {
         <ChatAltIcon
           className={classNames(
             "text-neutral-400 group-hover:text-neutral-500",
-            "ltr:mr-2 flex-shrink-0 h-5 w-5"
+            "h-5 w-5 flex-shrink-0 ltr:mr-2"
           )}
           aria-hidden="true"
         />
diff --git a/lib/core/http/error/http-error.ts b/lib/core/http/error/http-error.ts
index 103d604ac1..2237614803 100644
--- a/lib/core/http/error/http-error.ts
+++ b/lib/core/http/error/http-error.ts
@@ -1,11 +1,11 @@
 export class HttpError<TCode extends number = number> extends Error {
-  public readonly cause: unknown;
+  public readonly cause?: Error;
   public readonly statusCode: TCode;
   public readonly message: string;
   public readonly url: string | undefined;
   public readonly method: string | undefined;
 
-  constructor(opts: { url?: string; method?: string; message?: string; statusCode: TCode; cause?: unknown }) {
+  constructor(opts: { url?: string; method?: string; message?: string; statusCode: TCode; cause?: Error }) {
     super(opts.message ?? `HTTP Error ${opts.statusCode} `);
 
     Object.setPrototypeOf(this, HttpError.prototype);
diff --git a/lib/integrations/calendar/components/AddCalDavIntegration.tsx b/lib/integrations/calendar/components/AddCalDavIntegration.tsx
index f5cc551fff..25805c8520 100644
--- a/lib/integrations/calendar/components/AddCalDavIntegration.tsx
+++ b/lib/integrations/calendar/components/AddCalDavIntegration.tsx
@@ -123,14 +123,14 @@ const AddCalDavIntegration = React.forwardRef<HTMLFormElement, Props>((props, re
         <label htmlFor="url" className="block text-sm font-medium text-gray-700">
           Calendar URL
         </label>
-        <div className="flex mt-1 rounded-md shadow-sm">
+        <div className="mt-1 flex rounded-md shadow-sm">
           <input
             required
             type="text"
             name="url"
             id="url"
             placeholder="https://example.com/calendar"
-            className="flex-grow block w-full min-w-0 lowercase border-gray-300 rounded-none rounded-r-sm focus:ring-black focus:border-brand sm:text-sm"
+            className="block w-full min-w-0 flex-grow rounded-none rounded-r-sm border-gray-300 lowercase focus:border-brand focus:ring-black sm:text-sm"
           />
         </div>
       </div>
@@ -144,7 +144,7 @@ const AddCalDavIntegration = React.forwardRef<HTMLFormElement, Props>((props, re
           name="username"
           id="username"
           placeholder="rickroll"
-          className="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-sm shadow-sm focus:outline-none focus:ring-neutral-500 focus:border-neutral-500 sm:text-sm"
+          className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 shadow-sm focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
         />
       </div>
       <div className="mb-2">
@@ -157,7 +157,7 @@ const AddCalDavIntegration = React.forwardRef<HTMLFormElement, Props>((props, re
           name="password"
           id="password"
           placeholder="•••••••••••••"
-          className="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-sm shadow-sm focus:outline-none focus:ring-neutral-500 focus:border-neutral-500 sm:text-sm"
+          className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 shadow-sm focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
         />
       </div>
     </form>
diff --git a/package.json b/package.json
index f044911dd3..6af12f474a 100644
--- a/package.json
+++ b/package.json
@@ -152,6 +152,7 @@
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.4",
     "prettier": "^2.3.2",
+    "prettier-plugin-tailwindcss": "^0.1.6",
     "prisma": "3.0.2",
     "tailwindcss": "^3.0.0",
     "ts-jest": "^26.0.0",
diff --git a/pages/404.tsx b/pages/404.tsx
index 2b0c36477d..283fa6726e 100644
--- a/pages/404.tsx
+++ b/pages/404.tsx
@@ -43,36 +43,36 @@ export default function Custom404() {
           noindex: true,
         }}
       />
-      <div className="min-h-screen px-4 bg-white">
-        <main className="max-w-xl pt-16 pb-6 mx-auto sm:pt-24">
+      <div className="min-h-screen bg-white px-4">
+        <main className="mx-auto max-w-xl pt-16 pb-6 sm:pt-24">
           {isSignup && process.env.NEXT_PUBLIC_BASE_URL !== "https://app.cal.com" ? (
             <div>
               <div>
-                <p className="text-sm font-semibold tracking-wide text-black uppercase">
+                <p className="text-sm font-semibold uppercase tracking-wide text-black">
                   {t("missing_license")}
                 </p>
-                <h1 className="mt-2 text-3xl font-extrabold text-gray-900 font-cal">
+                <h1 className="mt-2 font-cal text-3xl font-extrabold text-gray-900">
                   {t("signup_requires")}
                 </h1>
                 <p className="mt-4">{t("signup_requires_description")}</p>
               </div>
               <div className="mt-12">
-                <h2 className="text-sm font-semibold tracking-wide text-gray-500 uppercase">
+                <h2 className="text-sm font-semibold uppercase tracking-wide text-gray-500">
                   {t("next_steps")}
                 </h2>
                 <ul role="list" className="mt-4">
-                  <li className="px-4 py-2 border-2 border-green-500">
+                  <li className="border-2 border-green-500 px-4 py-2">
                     <a
                       href="https://cal.com/pricing?infra"
-                      className="relative flex items-start py-6 space-x-4 rtl:space-x-reverse">
+                      className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
                       <div className="flex-shrink-0">
-                        <span className="flex items-center justify-center w-12 h-12 rounded-lg bg-green-50">
-                          <CheckIcon className="w-6 h-6 text-green-500" aria-hidden="true" />
+                        <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-50">
+                          <CheckIcon className="h-6 w-6 text-green-500" aria-hidden="true" />
                         </span>
                       </div>
-                      <div className="flex-1 min-w-0">
+                      <div className="min-w-0 flex-1">
                         <h3 className="text-base font-medium text-gray-900">
-                          <span className="rounded-sm focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-gray-500">
+                          <span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
                             <span className="focus:outline-none">
                               <span className="absolute inset-0" aria-hidden="true" />
                               {t("acquire_commercial_license")}
@@ -81,33 +81,33 @@ export default function Custom404() {
                         </h3>
                         <p className="text-base text-gray-500">{t("the_infrastructure_plan")}</p>
                       </div>
-                      <div className="self-center flex-shrink-0">
-                        <ChevronRightIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
+                      <div className="flex-shrink-0 self-center">
+                        <ChevronRightIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
                       </div>
                     </a>
                   </li>
                 </ul>
 
-                <ul role="list" className="border-gray-200 divide-y divide-gray-200">
+                <ul role="list" className="divide-y divide-gray-200 border-gray-200">
                   <li className="px-4 py-2">
                     <Link href="https://docs.cal.com/self-hosting/install#setting-up-your-first-user">
-                      <a className="relative flex items-start py-6 space-x-4 rtl:space-x-reverse">
+                      <a className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
                         <div className="flex-shrink-0">
-                          <span className="flex items-center justify-center w-12 h-12 rounded-lg bg-gray-50">
-                            <DocumentTextIcon className="w-6 h-6 text-gray-700" aria-hidden="true" />
+                          <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-gray-50">
+                            <DocumentTextIcon className="h-6 w-6 text-gray-700" aria-hidden="true" />
                           </span>
                         </div>
-                        <div className="flex-1 min-w-0">
+                        <div className="min-w-0 flex-1">
                           <h3 className="text-base font-medium text-gray-900">
-                            <span className="rounded-sm focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-gray-500">
+                            <span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
                               <span className="absolute inset-0" aria-hidden="true" />
                               {t("prisma_studio_tip")}
                             </span>
                           </h3>
                           <p className="text-base text-gray-500">{t("prisma_studio_tip_description")}</p>
                         </div>
-                        <div className="self-center flex-shrink-0">
-                          <ChevronRightIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
+                        <div className="flex-shrink-0 self-center">
+                          <ChevronRightIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
                         </div>
                       </a>
                     </Link>
@@ -115,12 +115,12 @@ export default function Custom404() {
                   <li className="px-4 py-2">
                     <a
                       href="https://cal.com/slack"
-                      className="relative flex items-start py-6 space-x-4 rtl:space-x-reverse">
+                      className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
                       <div className="flex-shrink-0">
-                        <span className="flex items-center justify-center w-12 h-12 rounded-lg bg-gray-50">
+                        <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-gray-50">
                           <svg
                             viewBox="0 0 2447.6 2452.5"
-                            className="w-6 h-6"
+                            className="h-6 w-6"
                             xmlns="http://www.w3.org/2000/svg">
                             <g clipRule="evenodd" fillRule="evenodd">
                               <path
@@ -139,17 +139,17 @@ export default function Custom404() {
                           </svg>
                         </span>
                       </div>
-                      <div className="flex-1 min-w-0">
+                      <div className="min-w-0 flex-1">
                         <h3 className="text-base font-medium text-gray-900">
-                          <span className="rounded-sm focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-gray-500">
+                          <span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
                             <span className="absolute inset-0" aria-hidden="true" />
                             Slack
                           </span>
                         </h3>
                         <p className="text-base text-gray-500">{t("join_our_community")}</p>
                       </div>
-                      <div className="self-center flex-shrink-0">
-                        <ChevronRightIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
+                      <div className="flex-shrink-0 self-center">
+                        <ChevronRightIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
                       </div>
                     </a>
                   </li>
@@ -167,18 +167,18 @@ export default function Custom404() {
           ) : (
             <>
               <div className="text-center">
-                <p className="text-sm font-semibold tracking-wide text-black uppercase">{t("error_404")}</p>
-                <h1 className="mt-2 text-4xl font-extrabold text-gray-900 font-cal sm:text-5xl">
+                <p className="text-sm font-semibold uppercase tracking-wide text-black">{t("error_404")}</p>
+                <h1 className="mt-2 font-cal text-4xl font-extrabold text-gray-900 sm:text-5xl">
                   {t("page_doesnt_exist")}
                 </h1>
                 {isSubpage ? (
-                  <span className="inline-block mt-2 text-lg ">
+                  <span className="mt-2 inline-block text-lg ">
                     {t("check_spelling_mistakes_or_go_back")}
                   </span>
                 ) : process.env.NEXT_PUBLIC_BASE_URL === "https://app.cal.com" ? (
                   <a
                     href={"https://cal.com/signup?username=" + username.replace("/", "")}
-                    className="inline-block mt-2 text-lg ">
+                    className="mt-2 inline-block text-lg ">
                     {t("the_username")} <strong className="text-blue-500">cal.com{username}</strong>{" "}
                     {t("is_still_available")} <span className="text-blue-500">{t("register_now")}</span>.
                   </a>
@@ -194,23 +194,23 @@ export default function Custom404() {
                 )}
               </div>
               <div className="mt-12">
-                <h2 className="text-sm font-semibold tracking-wide text-gray-500 uppercase">
+                <h2 className="text-sm font-semibold uppercase tracking-wide text-gray-500">
                   {t("popular_pages")}
                 </h2>
                 {!isSubpage && process.env.NEXT_PUBLIC_BASE_URL === "https://app.cal.com" && (
                   <ul role="list" className="mt-4">
-                    <li className="px-4 py-2 border-2 border-green-500">
+                    <li className="border-2 border-green-500 px-4 py-2">
                       <a
                         href={"https://cal.com/signup?username=" + username.replace("/", "")}
-                        className="relative flex items-start py-6 space-x-4 rtl:space-x-reverse">
+                        className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
                         <div className="flex-shrink-0">
-                          <span className="flex items-center justify-center w-12 h-12 rounded-lg bg-green-50">
-                            <CheckIcon className="w-6 h-6 text-green-500" aria-hidden="true" />
+                          <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-50">
+                            <CheckIcon className="h-6 w-6 text-green-500" aria-hidden="true" />
                           </span>
                         </div>
-                        <div className="flex-1 min-w-0">
+                        <div className="min-w-0 flex-1">
                           <h3 className="text-base font-medium text-gray-900">
-                            <span className="rounded-sm focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-gray-500">
+                            <span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
                               <span className="focus:outline-none">
                                 <span className="absolute inset-0" aria-hidden="true" />
                                 {t("register")} <strong className="text-green-500">{username}</strong>
@@ -219,35 +219,35 @@ export default function Custom404() {
                           </h3>
                           <p className="text-base text-gray-500">{t("claim_username_and_schedule_events")}</p>
                         </div>
-                        <div className="self-center flex-shrink-0">
-                          <ChevronRightIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
+                        <div className="flex-shrink-0 self-center">
+                          <ChevronRightIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
                         </div>
                       </a>
                     </li>
                   </ul>
                 )}
 
-                <ul role="list" className="mt-4 border-gray-200 divide-y divide-gray-200">
+                <ul role="list" className="mt-4 divide-y divide-gray-200 border-gray-200">
                   {links.map((link, linkIdx) => (
                     <li key={linkIdx} className="px-4 py-2">
                       <Link href={link.href}>
-                        <a className="relative flex items-start py-6 space-x-4 rtl:space-x-reverse">
+                        <a className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
                           <div className="flex-shrink-0">
-                            <span className="flex items-center justify-center w-12 h-12 rounded-lg bg-gray-50">
-                              <link.icon className="w-6 h-6 text-gray-700" aria-hidden="true" />
+                            <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-gray-50">
+                              <link.icon className="h-6 w-6 text-gray-700" aria-hidden="true" />
                             </span>
                           </div>
-                          <div className="flex-1 min-w-0">
+                          <div className="min-w-0 flex-1">
                             <h3 className="text-base font-medium text-gray-900">
-                              <span className="rounded-sm focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-gray-500">
+                              <span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
                                 <span className="absolute inset-0" aria-hidden="true" />
                                 {link.title}
                               </span>
                             </h3>
                             <p className="text-base text-gray-500">{link.description}</p>
                           </div>
-                          <div className="self-center flex-shrink-0">
-                            <ChevronRightIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
+                          <div className="flex-shrink-0 self-center">
+                            <ChevronRightIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
                           </div>
                         </a>
                       </Link>
@@ -256,12 +256,12 @@ export default function Custom404() {
                   <li className="px-4 py-2">
                     <a
                       href="https://cal.com/slack"
-                      className="relative flex items-start py-6 space-x-4 rtl:space-x-reverse">
+                      className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
                       <div className="flex-shrink-0">
-                        <span className="flex items-center justify-center w-12 h-12 rounded-lg bg-gray-50">
+                        <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-gray-50">
                           <svg
                             viewBox="0 0 2447.6 2452.5"
-                            className="w-6 h-6"
+                            className="h-6 w-6"
                             xmlns="http://www.w3.org/2000/svg">
                             <g clipRule="evenodd" fillRule="evenodd">
                               <path
@@ -280,17 +280,17 @@ export default function Custom404() {
                           </svg>
                         </span>
                       </div>
-                      <div className="flex-1 min-w-0">
+                      <div className="min-w-0 flex-1">
                         <h3 className="text-base font-medium text-gray-900">
-                          <span className="rounded-sm focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-gray-500">
+                          <span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
                             <span className="absolute inset-0" aria-hidden="true" />
                             Slack
                           </span>
                         </h3>
                         <p className="text-base text-gray-500">{t("join_our_community")}</p>
                       </div>
-                      <div className="self-center flex-shrink-0">
-                        <ChevronRightIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
+                      <div className="flex-shrink-0 self-center">
+                        <ChevronRightIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
                       </div>
                     </a>
                   </li>
diff --git a/pages/[user].tsx b/pages/[user].tsx
index 878143a64a..8f6065c78c 100644
--- a/pages/[user].tsx
+++ b/pages/[user].tsx
@@ -47,17 +47,17 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
       />
       {isReady && (
         <div className="h-screen dark:bg-black">
-          <main className="max-w-3xl px-4 py-24 mx-auto">
+          <main className="mx-auto max-w-3xl px-4 py-24">
             <div className="mb-8 text-center">
               <Avatar
                 imageSrc={user.avatar}
-                className="w-24 h-24 mx-auto mb-4 rounded-full"
+                className="mx-auto mb-4 h-24 w-24 rounded-full"
                 alt={nameOrUsername}
               />
-              <h1 className="mb-1 text-3xl font-bold font-cal text-neutral-900 dark:text-white">
+              <h1 className="mb-1 font-cal text-3xl font-bold text-neutral-900 dark:text-white">
                 {nameOrUsername}
                 {user.verified && (
-                  <BadgeCheckIcon className="inline w-6 h-6 -mt-1 text-blue-500 dark:text-white" />
+                  <BadgeCheckIcon className="-mt-1 inline h-6 w-6 text-blue-500 dark:text-white" />
                 )}
               </h1>
               <p className="text-neutral-500 dark:text-white">{user.bio}</p>
@@ -68,8 +68,8 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
                   <div
                     key={type.id}
                     style={{ display: "flex" }}
-                    className="relative bg-white border rounded-sm group dark:bg-neutral-900 dark:border-0 dark:hover:border-neutral-600 hover:bg-gray-50 border-neutral-200 hover:border-brand">
-                    <ArrowRightIcon className="absolute w-4 h-4 text-black transition-opacity opacity-0 right-3 top-3 dark:text-white group-hover:opacity-100" />
+                    className="group relative rounded-sm border border-neutral-200 bg-white hover:border-brand hover:bg-gray-50 dark:border-0 dark:bg-neutral-900 dark:hover:border-neutral-600">
+                    <ArrowRightIcon className="absolute right-3 top-3 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
                     <Link
                       href={{
                         pathname: `/${user.username}/${type.slug}`,
@@ -88,7 +88,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
                         }}
                         className="block w-full px-6 py-4"
                         data-testid="event-type-link">
-                        <h2 className="font-semibold grow text-neutral-900 dark:text-white">{type.title}</h2>
+                        <h2 className="grow font-semibold text-neutral-900 dark:text-white">{type.title}</h2>
                         <EventTypeDescription eventType={type} />
                       </a>
                     </Link>
@@ -108,10 +108,10 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
             {eventTypes.length === 0 && (
               <div className="overflow-hidden rounded-sm shadow">
                 <div className="p-8 text-center text-gray-400 dark:text-white">
-                  <h2 className="text-3xl font-semibold text-gray-600 font-cal dark:text-white">
+                  <h2 className="font-cal text-3xl font-semibold text-gray-600 dark:text-white">
                     {t("uh_oh")}
                   </h2>
-                  <p className="max-w-md mx-auto">{t("no_event_types_have_been_setup")}</p>
+                  <p className="mx-auto max-w-md">{t("no_event_types_have_been_setup")}</p>
                 </div>
               </div>
             )}
diff --git a/pages/auth/error.tsx b/pages/auth/error.tsx
index ad3f8acaf7..4db8ac6ae3 100644
--- a/pages/auth/error.tsx
+++ b/pages/auth/error.tsx
@@ -18,11 +18,11 @@ export default function Error() {
   return (
     <AuthContainer title="" description="">
       <div>
-        <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100">
+        <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
           <XIcon className="h-6 w-6 text-red-600" />
         </div>
         <div className="mt-3 text-center sm:mt-5">
-          <h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">
+          <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
             {error}
           </h3>
           <div className="mt-2">
@@ -32,7 +32,7 @@ export default function Error() {
       </div>
       <div className="mt-5 sm:mt-6">
         <Link href="/auth/login">
-          <Button className="w-full flex justify-center">{t("go_back_login")}</Button>
+          <Button className="flex w-full justify-center">{t("go_back_login")}</Button>
         </Link>
       </div>
     </AuthContainer>
diff --git a/pages/auth/forgot-password/[id].tsx b/pages/auth/forgot-password/[id].tsx
index 9cf850ccc4..e9832e7bc8 100644
--- a/pages/auth/forgot-password/[id].tsx
+++ b/pages/auth/forgot-password/[id].tsx
@@ -58,7 +58,7 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
       <>
         <div className="space-y-6">
           <div>
-            <h2 className="mt-6 text-3xl font-extrabold text-center text-gray-900 font-cal">
+            <h2 className="mt-6 text-center font-cal text-3xl font-extrabold text-gray-900">
               {t("success")}
             </h2>
           </div>
@@ -66,7 +66,7 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
           <Link href="/auth/login">
             <button
               type="button"
-              className="flex justify-center w-full px-4 py-2 text-sm font-medium text-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black">
+              className="flex w-full justify-center px-4 py-2 text-sm font-medium text-blue-600 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2">
               {t("login")}
             </button>
           </Link>
@@ -80,14 +80,14 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
       <>
         <div className="space-y-6">
           <div>
-            <h2 className="mt-6 text-3xl font-extrabold text-center text-gray-900 font-cal">{t("whoops")}</h2>
-            <h2 className="text-3xl font-extrabold text-center text-gray-900">{t("request_is_expired")}</h2>
+            <h2 className="mt-6 text-center font-cal text-3xl font-extrabold text-gray-900">{t("whoops")}</h2>
+            <h2 className="text-center text-3xl font-extrabold text-gray-900">{t("request_is_expired")}</h2>
           </div>
           <p>{t("request_is_expired_instructions")}</p>
           <Link href="/auth/forgot-password">
             <button
               type="button"
-              className="flex justify-center w-full px-4 py-2 text-sm font-medium text-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black">
+              className="flex w-full justify-center px-4 py-2 text-sm font-medium text-blue-600 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2">
               {t("try_again")}
             </button>
           </Link>
@@ -102,15 +102,15 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
   }, [resetPasswordRequest]);
 
   return (
-    <div className="flex flex-col justify-center min-h-screen py-12 bg-gray-50 sm:px-6 lg:px-8">
+    <div className="flex min-h-screen flex-col justify-center bg-gray-50 py-12 sm:px-6 lg:px-8">
       <HeadSeo title={t("reset_password")} description={t("change_your_password")} />
       <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-        <div className="px-4 py-8 mx-2 space-y-6 bg-white rounded-lg shadow sm:px-10">
+        <div className="mx-2 space-y-6 rounded-lg bg-white px-4 py-8 shadow sm:px-10">
           {isRequestExpired && <Expired />}
           {!isRequestExpired && !success && (
             <>
               <div className="space-y-6">
-                <h2 className="mt-6 text-3xl font-extrabold text-center text-gray-900 font-cal">
+                <h2 className="mt-6 text-center font-cal text-3xl font-extrabold text-gray-900">
                   {t("reset_password")}
                 </h2>
                 <p>{t("enter_new_password")}</p>
@@ -151,7 +151,7 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
                       type="password"
                       autoComplete="password"
                       required
-                      className="block w-full px-3 py-2 placeholder-gray-400 border border-gray-300 rounded-md shadow-sm appearance-none focus:outline-none focus:ring-black focus:border-brand sm:text-sm"
+                      className="block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-brand focus:outline-none focus:ring-black sm:text-sm"
                     />
                   </div>
                 </div>
@@ -160,12 +160,12 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
                   <button
                     type="submit"
                     disabled={loading}
-                    className={`w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black ${
+                    className={`flex w-full justify-center rounded-md border border-transparent bg-blue-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2 ${
                       loading ? "cursor-not-allowed" : ""
                     }`}>
                     {loading && (
                       <svg
-                        className="w-5 h-5 mr-3 -ml-1 text-white animate-spin"
+                        className="mr-3 -ml-1 h-5 w-5 animate-spin text-white"
                         xmlns="http://www.w3.org/2000/svg"
                         fill="none"
                         viewBox="0 0 24 24">
diff --git a/pages/auth/forgot-password/index.tsx b/pages/auth/forgot-password/index.tsx
index 6eadf2e6da..ff19a74671 100644
--- a/pages/auth/forgot-password/index.tsx
+++ b/pages/auth/forgot-password/index.tsx
@@ -111,7 +111,7 @@ export default function ForgotPassword({ csrfToken }: { csrfToken: string }) {
             />
             <div className="space-y-2">
               <Button
-                className="justify-center w-full"
+                className="w-full justify-center"
                 type="submit"
                 disabled={loading}
                 aria-label={t("request_password_reset")}
diff --git a/pages/auth/login.tsx b/pages/auth/login.tsx
index 6d380bf896..213a6a78a8 100644
--- a/pages/auth/login.tsx
+++ b/pages/auth/login.tsx
@@ -139,7 +139,7 @@ export default function Login({
           {errorMessage && <Alert severity="error" title={errorMessage} />}
           <div className="flex space-y-2">
             <Button
-              className="flex justify-center w-full"
+              className="flex w-full justify-center"
               type="submit"
               disabled={form.formState.isSubmitting}>
               {twoFactorRequired ? t("submit") : t("sign_in")}
@@ -153,7 +153,7 @@ export default function Login({
               <div className="mt-5">
                 <Button
                   color="secondary"
-                  className="flex justify-center w-full"
+                  className="flex w-full justify-center"
                   data-testid={"google"}
                   onClick={async (e) => {
                     e.preventDefault();
diff --git a/pages/auth/logout.tsx b/pages/auth/logout.tsx
index e8d2bcc87e..2f017266ec 100644
--- a/pages/auth/logout.tsx
+++ b/pages/auth/logout.tsx
@@ -26,8 +26,8 @@ export default function Logout(props: Props) {
   return (
     <AuthContainer title={t("logged_out")} description={t("youve_been_logged_out")}>
       <div className="mb-4">
-        <div className="flex items-center justify-center w-12 h-12 mx-auto bg-green-100 rounded-full">
-          <CheckIcon className="w-6 h-6 text-green-600" />
+        <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
+          <CheckIcon className="h-6 w-6 text-green-600" />
         </div>
         <div className="mt-3 text-center sm:mt-5">
           <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
@@ -39,7 +39,7 @@ export default function Logout(props: Props) {
         </div>
       </div>
       <Link href="/auth/login">
-        <Button className="flex justify-center w-full"> {t("go_back_login")}</Button>
+        <Button className="flex w-full justify-center"> {t("go_back_login")}</Button>
       </Link>
     </AuthContainer>
   );
diff --git a/pages/auth/signup.tsx b/pages/auth/signup.tsx
index a0d58c3d69..0307d88cc2 100644
--- a/pages/auth/signup.tsx
+++ b/pages/auth/signup.tsx
@@ -64,18 +64,18 @@ export default function Signup({ email }: Props) {
 
   return (
     <div
-      className="flex flex-col justify-center min-h-screen py-12 bg-gray-50 sm:px-6 lg:px-8"
+      className="flex min-h-screen flex-col justify-center bg-gray-50 py-12 sm:px-6 lg:px-8"
       aria-labelledby="modal-title"
       role="dialog"
       aria-modal="true">
       <HeadSeo title={t("sign_up")} description={t("sign_up")} />
       <div className="sm:mx-auto sm:w-full sm:max-w-md">
-        <h2 className="text-3xl font-extrabold text-center text-gray-900 font-cal">
+        <h2 className="text-center font-cal text-3xl font-extrabold text-gray-900">
           {t("create_your_account")}
         </h2>
       </div>
       <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-        <div className="px-4 py-8 mx-2 bg-white shadow sm:rounded-lg sm:px-10">
+        <div className="mx-2 bg-white px-4 py-8 shadow sm:rounded-lg sm:px-10">
           {/* TODO: Refactor as soon as /availability is live */}
           <FormProvider {...methods}>
             <form onSubmit={methods.handleSubmit(signUp)} className="space-y-6 bg-white">
@@ -83,25 +83,25 @@ export default function Signup({ email }: Props) {
               <div className="space-y-2">
                 <TextField
                   addOnLeading={
-                    <span className="inline-flex items-center px-3 text-gray-500 border border-r-0 border-gray-300 rounded-l-sm bg-gray-50 sm:text-sm">
+                    <span className="inline-flex items-center rounded-l-sm border border-r-0 border-gray-300 bg-gray-50 px-3 text-gray-500 sm:text-sm">
                       {process.env.NEXT_PUBLIC_APP_URL}/
                     </span>
                   }
                   labelProps={{ className: "block text-sm font-medium text-gray-700" }}
-                  className="flex-grow block w-full min-w-0 lowercase border-gray-300 rounded-none rounded-r-sm focus:ring-black focus:border-black sm:text-sm"
+                  className="block w-full min-w-0 flex-grow rounded-none rounded-r-sm border-gray-300 lowercase focus:border-black focus:ring-black sm:text-sm"
                   {...register("username")}
                   required
                 />
                 <EmailField
                   {...register("email")}
-                  className="block w-full px-3 py-2 mt-1 bg-gray-100 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-black focus:border-black sm:text-sm"
+                  className="mt-1 block w-full rounded-md border border-gray-300 bg-gray-100 px-3 py-2 shadow-sm focus:border-black focus:outline-none focus:ring-black sm:text-sm"
                 />
                 <PasswordField
                   labelProps={{
                     className: "block text-sm font-medium text-gray-700",
                   }}
                   {...register("password")}
-                  className="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-black focus:border-black sm:text-sm"
+                  className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-black focus:outline-none focus:ring-black sm:text-sm"
                 />
                 <PasswordField
                   label={t("confirm_password")}
@@ -112,16 +112,16 @@ export default function Signup({ email }: Props) {
                     validate: (value) =>
                       value === methods.watch("password") || (t("error_password_mismatch") as string),
                   })}
-                  className="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-black focus:border-black sm:text-sm"
+                  className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-black focus:outline-none focus:ring-black sm:text-sm"
                 />
               </div>
-              <div className="flex rtl:space-x-reverse space-x-2">
-                <Button loading={isSubmitting} className="justify-center w-7/12">
+              <div className="flex space-x-2 rtl:space-x-reverse">
+                <Button loading={isSubmitting} className="w-7/12 justify-center">
                   {t("create_account")}
                 </Button>
                 <Button
                   color="secondary"
-                  className="justify-center w-5/12"
+                  className="w-5/12 justify-center"
                   onClick={() =>
                     signIn("Cal.com", { callbackUrl: (router.query.callbackUrl || "") as string })
                   }>
diff --git a/pages/availability/index.tsx b/pages/availability/index.tsx
index 7597d67895..db084235a2 100644
--- a/pages/availability/index.tsx
+++ b/pages/availability/index.tsx
@@ -90,7 +90,7 @@ export function AvailabilityForm(props: inferQueryOutput<"viewer.availability">)
           await createSchedule(values);
         }}
         className="col-span-3 space-y-2 lg:col-span-2">
-        <div className="px-4 py-5 bg-white border border-gray-200 divide-y rounded-sm sm:p-6">
+        <div className="divide-y rounded-sm border border-gray-200 bg-white px-4 py-5 sm:p-6">
           <h3 className="mb-5 text-base font-medium leading-6 text-gray-900">{t("change_start_end")}</h3>
           <Schedule name="schedule" />
         </div>
@@ -107,12 +107,12 @@ export function AvailabilityForm(props: inferQueryOutput<"viewer.availability">)
           <Button>{t("save")}</Button>
         </div>
       </Form>
-      <div className="col-span-3 ltr:ml-2 rtl:mr-2 lg:col-span-1 min-w-40">
-        <div className="px-4 py-5 border border-gray-200 rounded-sm sm:p-6 ">
+      <div className="col-span-3 min-w-40 ltr:ml-2 rtl:mr-2 lg:col-span-1">
+        <div className="rounded-sm border border-gray-200 px-4 py-5 sm:p-6 ">
           <h3 className="text-base font-medium leading-6 text-gray-900">
             {t("something_doesnt_look_right")}
           </h3>
-          <div className="max-w-xl mt-2 text-sm text-gray-500">
+          <div className="mt-2 max-w-xl text-sm text-gray-500">
             <p>{t("troubleshoot_availability")}</p>
           </div>
           <div className="mt-5">
diff --git a/pages/availability/troubleshoot.tsx b/pages/availability/troubleshoot.tsx
index 4063ed5eb9..ef071d0407 100644
--- a/pages/availability/troubleshoot.tsx
+++ b/pages/availability/troubleshoot.tsx
@@ -16,14 +16,14 @@ type User = inferQueryOutput<"viewer.me">;
 const AvailabilityView = ({ user }: { user: User }) => {
   const { t } = useLocale();
   const [loading, setLoading] = useState(true);
-  const [availability, setAvailability] = useState([]);
+  const [availability, setAvailability] = useState<{ end: string; start: string }[]>([]);
   const [selectedDate, setSelectedDate] = useState(dayjs());
 
   function convertMinsToHrsMins(mins: number) {
     let h = Math.floor(mins / 60);
     let m = mins % 60;
-    h = h < 10 ? "0" + h : h;
-    m = m < 10 ? "0" + m : m;
+    h = h < 10 ? 0 + h : h;
+    m = m < 10 ? 0 + m : m;
     return `${h}:${m}`;
   }
 
@@ -51,12 +51,12 @@ const AvailabilityView = ({ user }: { user: User }) => {
   }, [selectedDate]);
 
   return (
-    <div className="max-w-xl overflow-hidden bg-white rounded-sm shadow">
+    <div className="max-w-xl overflow-hidden rounded-sm bg-white shadow">
       <div className="px-4 py-5 sm:p-6">
         {t("overview_of_day")}{" "}
         <input
           type="date"
-          className="inline h-8 p-0 border-none"
+          className="inline h-8 border-none p-0"
           defaultValue={selectedDate.format("YYYY-MM-DD")}
           onChange={(e) => {
             setSelectedDate(dayjs(e.target.value));
@@ -65,7 +65,7 @@ const AvailabilityView = ({ user }: { user: User }) => {
         <small className="block text-neutral-400">{t("hover_over_bold_times_tip")}</small>
         <div className="mt-4 space-y-4">
           <div className="overflow-hidden rounded-sm bg-brand">
-            <div className="px-4 py-2 sm:px-6 text-brandcontrast">
+            <div className="px-4 py-2 text-brandcontrast sm:px-6">
               {t("your_day_starts_at")} {convertMinsToHrsMins(user.startTime)}
             </div>
           </div>
@@ -95,7 +95,7 @@ const AvailabilityView = ({ user }: { user: User }) => {
           )}
 
           <div className="overflow-hidden rounded-sm bg-brand">
-            <div className="px-4 py-2 sm:px-6 text-brandcontrast">
+            <div className="px-4 py-2 text-brandcontrast sm:px-6">
               {t("your_day_ends_at")} {convertMinsToHrsMins(user.endTime)}
             </div>
           </div>
diff --git a/pages/bookings/[status].tsx b/pages/bookings/[status].tsx
index ece1227d76..f89b0d66b2 100644
--- a/pages/bookings/[status].tsx
+++ b/pages/bookings/[status].tsx
@@ -45,7 +45,7 @@ export default function Bookings() {
   return (
     <Shell heading={t("bookings")} subtitle={t("bookings_description")}>
       <BookingsShell>
-        <div className="flex flex-col -mx-4 sm:mx-auto">
+        <div className="-mx-4 flex flex-col sm:mx-auto">
           <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
             <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
               {query.status === "error" && (
@@ -54,9 +54,9 @@ export default function Bookings() {
               {(query.status === "loading" || query.status === "idle") && <Loader />}
               {query.status === "success" && !isEmpty && (
                 <>
-                  <div className="mt-6 overflow-hidden border border-b border-gray-200 rounded-sm">
+                  <div className="mt-6 overflow-hidden rounded-sm border border-b border-gray-200">
                     <table className="min-w-full divide-y divide-gray-200">
-                      <tbody className="bg-white divide-y divide-gray-200" data-testid="bookings">
+                      <tbody className="divide-y divide-gray-200 bg-white" data-testid="bookings">
                         {query.data.pages.map((page, index) => (
                           <Fragment key={index}>
                             {page.bookings.map((booking) => (
@@ -67,7 +67,7 @@ export default function Bookings() {
                       </tbody>
                     </table>
                   </div>
-                  <div className="text-center p-4" ref={buttonInView.ref}>
+                  <div className="p-4 text-center" ref={buttonInView.ref}>
                     <Button
                       loading={query.isFetchingNextPage}
                       disabled={!query.hasNextPage}
diff --git a/pages/call/[uid].tsx b/pages/call/[uid].tsx
index 7d44700a40..12437430ae 100644
--- a/pages/call/[uid].tsx
+++ b/pages/call/[uid].tsx
@@ -118,7 +118,7 @@ export default function JoinCall(props: JoinCallPageProps) {
       <div style={{ zIndex: 2, position: "relative" }}>
         <Link href="/">
           <img
-            className="fixed z-10 hidden w-auto h-5 sm:inline-block"
+            className="fixed z-10 hidden h-5 w-auto sm:inline-block"
             src="https://cal.com/logo-white.svg"
             alt="Cal.com Logo"
             style={{
diff --git a/pages/call/meeting-ended/[uid].tsx b/pages/call/meeting-ended/[uid].tsx
index b9a570abc8..2bd11bb454 100644
--- a/pages/call/meeting-ended/[uid].tsx
+++ b/pages/call/meeting-ended/[uid].tsx
@@ -30,33 +30,33 @@ export default function MeetingUnavailable(props: inferSSRProps<typeof getServer
     return (
       <div>
         <HeadSeo title={`Meeting Unavaialble`} description={`Meeting Unavailable`} />
-        <main className="max-w-3xl mx-auto my-24">
+        <main className="mx-auto my-24 max-w-3xl">
           <div className="fixed inset-0 z-50 overflow-y-auto">
-            <div className="flex items-end justify-center min-h-screen 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 pt-4 pb-20 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:align-middle sm:h-screen" aria-hidden="true">
+                <span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">
                   &#8203;
                 </span>
                 <div
-                  className="inline-block px-4 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6"
+                  className="inline-block transform overflow-hidden rounded-lg bg-white 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"
                   role="dialog"
                   aria-modal="true"
                   aria-labelledby="modal-headline">
                   <div>
-                    <div className="flex items-center justify-center w-12 h-12 mx-auto bg-red-100 rounded-full">
-                      <XIcon className="w-6 h-6 text-red-600" />
+                    <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
+                      <XIcon className="h-6 w-6 text-red-600" />
                     </div>
                     <div className="mt-3 text-center sm:mt-5">
                       <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
                         This meeting is in the past.
                       </h3>
                     </div>
-                    <div className="py-4 mt-4 border-t border-b">
-                      <h2 className="mb-2 text-lg font-medium text-center text-gray-600 font-cal">
+                    <div className="mt-4 border-t border-b py-4">
+                      <h2 className="mb-2 text-center font-cal text-lg font-medium text-gray-600">
                         {props.booking.title}
                       </h2>
                       <p className="text-center text-gray-500">
-                        <CalendarIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
+                        <CalendarIcon className="mr-1 -mt-1 inline-block h-4 w-4" />
                         {dayjs(props.booking.startTime).format(
                           (is24h ? "H:mm" : "h:mma") + ", dddd DD MMMM YYYY"
                         )}
diff --git a/pages/call/meeting-not-started/[uid].tsx b/pages/call/meeting-not-started/[uid].tsx
index f3807660d9..32fcaf1e91 100644
--- a/pages/call/meeting-not-started/[uid].tsx
+++ b/pages/call/meeting-not-started/[uid].tsx
@@ -29,33 +29,33 @@ export default function MeetingNotStarted(props: inferSSRProps<typeof getServerS
     return (
       <div>
         <HeadSeo title={`Meeting Unavaialble`} description={`Meeting Unavailable`} />
-        <main className="max-w-3xl mx-auto my-24">
+        <main className="mx-auto my-24 max-w-3xl">
           <div className="fixed inset-0 z-50 overflow-y-auto">
-            <div className="flex items-end justify-center min-h-screen 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 pt-4 pb-20 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:align-middle sm:h-screen" aria-hidden="true">
+                <span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">
                   &#8203;
                 </span>
                 <div
-                  className="inline-block px-4 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6"
+                  className="inline-block transform overflow-hidden rounded-lg bg-white 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"
                   role="dialog"
                   aria-modal="true"
                   aria-labelledby="modal-headline">
                   <div>
-                    <div className="flex items-center justify-center w-12 h-12 mx-auto bg-red-100 rounded-full">
-                      <XIcon className="w-6 h-6 text-red-600" />
+                    <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
+                      <XIcon className="h-6 w-6 text-red-600" />
                     </div>
                     <div className="mt-3 text-center sm:mt-5">
                       <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
                         This meeting has not started yet
                       </h3>
                     </div>
-                    <div className="py-4 mt-4 border-t border-b">
-                      <h2 className="mb-2 text-lg font-medium text-center text-gray-600 font-cal">
+                    <div className="mt-4 border-t border-b py-4">
+                      <h2 className="mb-2 text-center font-cal text-lg font-medium text-gray-600">
                         {props.booking.title}
                       </h2>
                       <p className="text-center text-gray-500">
-                        <CalendarIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
+                        <CalendarIcon className="mr-1 -mt-1 inline-block h-4 w-4" />
                         {dayjs(props.booking.startTime).format(
                           (is24h ? "H:mm" : "h:mma") + ", dddd DD MMMM YYYY"
                         )}
diff --git a/pages/call/no-meeting-found.tsx b/pages/call/no-meeting-found.tsx
index 2328d194c4..c5a799f8d6 100644
--- a/pages/call/no-meeting-found.tsx
+++ b/pages/call/no-meeting-found.tsx
@@ -12,21 +12,21 @@ export default function NoMeetingFound() {
   return (
     <div>
       <HeadSeo title={t("no_meeting_found")} description={t("no_meeting_found")} />
-      <main className="max-w-3xl mx-auto my-24">
+      <main className="mx-auto my-24 max-w-3xl">
         <div className="fixed inset-0 z-50 overflow-y-auto">
-          <div className="flex items-end justify-center min-h-screen 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 pt-4 pb-20 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:align-middle sm:h-screen" aria-hidden="true">
+              <span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">
                 &#8203;
               </span>
               <div
-                className="inline-block px-4 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6"
+                className="inline-block transform overflow-hidden rounded-lg bg-white 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"
                 role="dialog"
                 aria-modal="true"
                 aria-labelledby="modal-headline">
                 <div>
-                  <div className="flex items-center justify-center w-12 h-12 mx-auto bg-red-100 rounded-full">
-                    <XIcon className="w-6 h-6 text-red-600" />
+                  <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
+                    <XIcon className="h-6 w-6 text-red-600" />
                   </div>
                   <div className="mt-3 text-center sm:mt-5">
                     <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
@@ -34,7 +34,7 @@ export default function NoMeetingFound() {
                     </h3>
                   </div>
                   <div className="mt-2">
-                    <p className="text-sm text-center text-gray-500">{t("no_meeting_found_description")}</p>
+                    <p className="text-center text-sm text-gray-500">{t("no_meeting_found_description")}</p>
                   </div>
                 </div>
                 <div className="mt-5 text-center sm:mt-6">
diff --git a/pages/cancel/[uid].tsx b/pages/cancel/[uid].tsx
index 6ff856218f..0576cf4db1 100644
--- a/pages/cancel/[uid].tsx
+++ b/pages/cancel/[uid].tsx
@@ -36,22 +36,22 @@ export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
         description={`${t("cancel")} ${props.booking && props.booking.title} | ${props.profile?.name}`}
       />
       <CustomBranding val={props.profile?.brandColor} />
-      <main className="max-w-3xl mx-auto my-24">
+      <main className="mx-auto my-24 max-w-3xl">
         <div className="fixed inset-0 z-50 overflow-y-auto">
-          <div className="flex items-end justify-center min-h-screen 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 pt-4 pb-20 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:align-middle sm:h-screen" aria-hidden="true">
+              <span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">
                 &#8203;
               </span>
               <div
-                className="inline-block px-4 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6"
+                className="inline-block transform overflow-hidden rounded-lg bg-white 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"
                 role="dialog"
                 aria-modal="true"
                 aria-labelledby="modal-headline">
                 {error && (
                   <div>
-                    <div className="flex items-center justify-center w-12 h-12 mx-auto bg-red-100 rounded-full">
-                      <XIcon className="w-6 h-6 text-red-600" />
+                    <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
+                      <XIcon className="h-6 w-6 text-red-600" />
                     </div>
                     <div className="mt-3 text-center sm:mt-5">
                       <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
@@ -63,8 +63,8 @@ export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
                 {!error && (
                   <>
                     <div>
-                      <div className="flex items-center justify-center w-12 h-12 mx-auto bg-red-100 rounded-full">
-                        <XIcon className="w-6 h-6 text-red-600" />
+                      <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
+                        <XIcon className="h-6 w-6 text-red-600" />
                       </div>
                       <div className="mt-3 text-center sm:mt-5">
                         <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
@@ -77,12 +77,12 @@ export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
                             {props.cancellationAllowed ? t("reschedule_instead") : t("event_is_in_the_past")}
                           </p>
                         </div>
-                        <div className="py-4 mt-4 border-t border-b">
-                          <h2 className="mb-2 text-lg font-medium text-gray-600 font-cal">
+                        <div className="mt-4 border-t border-b py-4">
+                          <h2 className="mb-2 font-cal text-lg font-medium text-gray-600">
                             {props.booking?.title}
                           </h2>
                           <p className="text-gray-500">
-                            <CalendarIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
+                            <CalendarIcon className="mr-1 -mt-1 inline-block h-4 w-4" />
                             {dayjs(props.booking?.startTime).format(
                               (is24h ? "H:mm" : "h:mma") + ", dddd DD MMMM YYYY"
                             )}
@@ -99,7 +99,7 @@ export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
                           onChange={(e) => setCancellationReason(e.target.value)}
                           className="mb-5 sm:mb-6"
                         />
-                        <div className="text-center rtl:space-x-reverse space-x-2">
+                        <div className="space-x-2 text-center rtl:space-x-reverse">
                           <Button
                             color="secondary"
                             data-testid="cancel"
diff --git a/pages/cancel/success.tsx b/pages/cancel/success.tsx
index 9a8fc3bc86..03e3dc821d 100644
--- a/pages/cancel/success.tsx
+++ b/pages/cancel/success.tsx
@@ -21,21 +21,21 @@ export default function CancelSuccess() {
         title={`${t("cancelled")} ${title} | ${name}`}
         description={`${t("cancelled")} ${title} | ${name}`}
       />
-      <main className="max-w-3xl mx-auto my-24">
+      <main className="mx-auto my-24 max-w-3xl">
         <div className="fixed inset-0 z-50 overflow-y-auto">
-          <div className="flex items-end justify-center min-h-screen 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 pt-4 pb-20 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:align-middle sm:h-screen" aria-hidden="true">
+              <span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">
                 &#8203;
               </span>
               <div
-                className="inline-block px-4 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6"
+                className="inline-block transform overflow-hidden rounded-lg bg-white 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"
                 role="dialog"
                 aria-modal="true"
                 aria-labelledby="modal-headline">
                 <div>
-                  <div className="flex items-center justify-center w-12 h-12 mx-auto bg-green-100 rounded-full">
-                    <CheckIcon className="w-6 h-6 text-green-600" />
+                  <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
+                    <CheckIcon className="h-6 w-6 text-green-600" />
                   </div>
                   <div className="mt-3 text-center sm:mt-5">
                     <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
diff --git a/pages/event-types/[type].tsx b/pages/event-types/[type].tsx
index e85988c009..d77d3ccf29 100644
--- a/pages/event-types/[type].tsx
+++ b/pages/event-types/[type].tsx
@@ -249,7 +249,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                 {...locationFormMethods.register("locationAddress")}
                 id="address"
                 required
-                className="block w-full border-gray-300 rounded-sm shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
+                className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
                 defaultValue={
                   formMethods
                     .getValues("locations")
@@ -379,7 +379,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
               options={locationOptions}
               isSearchable={false}
               classNamePrefix="react-select"
-              className="flex-1 block w-full min-w-0 border border-gray-300 rounded-sm react-select-container focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
+              className="react-select-container block w-full min-w-0 flex-1 rounded-sm border border-gray-300 focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
               onChange={(e) => {
                 if (e?.value) {
                   locationFormMethods.setValue("locationType", e.value);
@@ -394,24 +394,24 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
             {formMethods.getValues("locations").map((location) => (
               <li
                 key={location.type}
-                className="py-1.5 px-2 mb-2 border rounded-sm shadow-sm border-neutral-300">
+                className="mb-2 rounded-sm border border-neutral-300 py-1.5 px-2 shadow-sm">
                 <div className="flex justify-between">
                   {location.type === LocationType.InPerson && (
-                    <div className="flex items-center flex-grow">
-                      <LocationMarkerIcon className="w-6 h-6" />
-                      <span className="ltr:ml-2 rtl:mr-2text-sm">{location.address}</span>
+                    <div className="flex flex-grow items-center">
+                      <LocationMarkerIcon className="h-6 w-6" />
+                      <span className="rtl:mr-2text-sm ltr:ml-2">{location.address}</span>
                     </div>
                   )}
                   {location.type === LocationType.Phone && (
-                    <div className="flex items-center flex-grow">
-                      <PhoneIcon className="w-6 h-6" />
-                      <span className="ltr:ml-2 rtl:mr-2text-sm">{t("phone_call")}</span>
+                    <div className="flex flex-grow items-center">
+                      <PhoneIcon className="h-6 w-6" />
+                      <span className="rtl:mr-2text-sm ltr:ml-2">{t("phone_call")}</span>
                     </div>
                   )}
                   {location.type === LocationType.GoogleMeet && (
-                    <div className="flex items-center flex-grow">
+                    <div className="flex flex-grow items-center">
                       <svg
-                        className="w-6 h-6"
+                        className="h-6 w-6"
                         viewBox="0 0 64 54"
                         fill="none"
                         xmlns="http://www.w3.org/2000/svg">
@@ -436,11 +436,11 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                         <path d="M0 16H16V37.3333H0" fill="#2684FC" />
                       </svg>
 
-                      <span className="ltr:ml-2 rtl:mr-2text-sm">Google Meet</span>
+                      <span className="rtl:mr-2text-sm ltr:ml-2">Google Meet</span>
                     </div>
                   )}
                   {location.type === LocationType.Huddle01 && (
-                    <div className="flex items-center flex-grow">
+                    <div className="flex flex-grow items-center">
                       <svg
                         width="1.25em"
                         height="1.25em"
@@ -509,13 +509,13 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                             fillRule="evenodd"></path>
                         </g>
                       </svg>
-                      <span className="ltr:ml-2 rtl:mr-2text-sm">Daily.co Video</span>
+                      <span className="rtl:mr-2text-sm ltr:ml-2">Daily.co Video</span>
                     </div>
                   )}
                   {location.type === LocationType.Zoom && (
-                    <div className="flex items-center flex-grow">
+                    <div className="flex flex-grow items-center">
                       <svg
-                        className="w-6 h-6"
+                        className="h-6 w-6"
                         viewBox="0 0 64 64"
                         fill="none"
                         xmlns="http://www.w3.org/2000/svg">
@@ -536,11 +536,11 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                           fill="white"
                         />
                       </svg>
-                      <span className="ltr:ml-2 rtl:mr-2text-sm">Zoom Video</span>
+                      <span className="rtl:mr-2text-sm ltr:ml-2">Zoom Video</span>
                     </div>
                   )}
                   {location.type === LocationType.Tandem && (
-                    <div className="flex items-center flex-grow">
+                    <div className="flex flex-grow items-center">
                       <svg
                         width="1.25em"
                         height="1.25em"
@@ -564,9 +564,9 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                     </div>
                   )}
                   {location.type === LocationType.Jitsi && (
-                    <div className="flex items-center flex-grow">
+                    <div className="flex flex-grow items-center">
                       <svg
-                        className="w-6 h-6"
+                        className="h-6 w-6"
                         viewBox="0 0 64 64"
                         fill="none"
                         xmlns="http://www.w3.org/2000/svg">
@@ -594,11 +594,11 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                     <button
                       type="button"
                       onClick={() => openLocationModal(location.type)}
-                      className="p-1 mr-1 text-gray-500 hover:text-gray-900">
-                      <PencilIcon className="w-4 h-4" />
+                      className="mr-1 p-1 text-gray-500 hover:text-gray-900">
+                      <PencilIcon className="h-4 w-4" />
                     </button>
                     <button type="button" onClick={() => removeLocation(location)}>
-                      <XIcon className="w-6 h-6 pl-1 text-gray-500 border-l-1 hover:text-gray-900 " />
+                      <XIcon className="border-l-1 h-6 w-6 pl-1 text-gray-500 hover:text-gray-900 " />
                     </button>
                   </div>
                 </div>
@@ -609,9 +609,9 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                 <li>
                   <button
                     type="button"
-                    className="flex px-3 py-2 rounded-sm hover:bg-gray-100"
+                    className="flex rounded-sm px-3 py-2 hover:bg-gray-100"
                     onClick={() => setShowLocationModal(true)}>
-                    <PlusIcon className="h-4 w-4 mt-0.5 text-neutral-900" />
+                    <PlusIcon className="mt-0.5 h-4 w-4 text-neutral-900" />
                     <span className="ml-1 text-sm font-medium text-neutral-700">{t("add_location")}</span>
                   </button>
                 </li>
@@ -628,7 +628,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
         centered
         title={t("event_type_title", { eventTypeTitle: eventType.title })}
         heading={
-          <div className="relative cursor-pointer group" onClick={() => setEditIcon(false)}>
+          <div className="group relative cursor-pointer" onClick={() => setEditIcon(false)}>
             {editIcon ? (
               <>
                 <h1
@@ -636,7 +636,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                   className="inline pl-0 text-gray-900 focus:text-black group-hover:text-gray-500">
                   {eventType.title}
                 </h1>
-                <PencilIcon className="inline w-4 h-4 ml-1 -mt-1 text-gray-700 group-hover:text-gray-500" />
+                <PencilIcon className="ml-1 -mt-1 inline h-4 w-4 text-gray-700 group-hover:text-gray-500" />
               </>
             ) : (
               <div style={{ marginBottom: -11 }}>
@@ -645,7 +645,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                   autoFocus
                   style={{ top: -6, fontSize: 22 }}
                   required
-                  className="relative w-full h-10 pl-0 text-gray-900 bg-transparent border-none cursor-pointer focus:text-black hover:text-gray-700 focus:ring-0 focus:outline-none"
+                  className="relative h-10 w-full cursor-pointer border-none bg-transparent pl-0 text-gray-900 hover:text-gray-700 focus:text-black focus:outline-none focus:ring-0"
                   placeholder={t("quick_chat")}
                   {...formMethods.register("title")}
                   defaultValue={eventType.title}
@@ -655,9 +655,9 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
           </div>
         }
         subtitle={eventType.description || ""}>
-        <div className="block mx-auto sm:flex md:max-w-5xl">
+        <div className="mx-auto block sm:flex md:max-w-5xl">
           <div className="w-full ltr:mr-2 rtl:ml-2 sm:w-9/12">
-            <div className="p-4 py-6 -mx-4 bg-white border rounded-sm border-neutral-200 sm:mx-0 sm:px-8">
+            <div className="-mx-4 rounded-sm border border-neutral-200 bg-white p-4 py-6 sm:mx-0 sm:px-8">
               <Form
                 form={formMethods}
                 handleSubmit={async (values) => {
@@ -677,23 +677,23 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                 }}
                 className="space-y-6">
                 <div className="space-y-3">
-                  <div className="items-center block sm:flex">
+                  <div className="block items-center sm:flex">
                     <div className="mb-4 min-w-48 sm:mb-0">
                       <label htmlFor="slug" className="flex text-sm font-medium text-neutral-700">
-                        <LinkIcon className="w-4 h-4 ltr:mr-2 rtl:ml-2 mt-0.5 text-neutral-500" />
+                        <LinkIcon className="mt-0.5 h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
                         {t("url")}
                       </label>
                     </div>
                     <div className="w-full">
                       <div className="flex rounded-sm shadow-sm">
-                        <span className="inline-flex items-center px-3 text-gray-500 border border-r-0 border-gray-300 rounded-l-sm bg-gray-50 sm:text-sm">
+                        <span className="inline-flex items-center rounded-l-sm border border-r-0 border-gray-300 bg-gray-50 px-3 text-gray-500 sm:text-sm">
                           {process.env.NEXT_PUBLIC_APP_URL?.replace(/^(https?:|)\/\//, "")}/
                           {team ? "team/" + team.slug : eventType.users[0].username}/
                         </span>
                         <input
                           type="text"
                           required
-                          className="flex-1 block w-full min-w-0 border-gray-300 rounded-none rounded-r-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
+                          className="block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
                           defaultValue={eventType.slug}
                           {...formMethods.register("slug")}
                         />
@@ -708,7 +708,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                       <MinutesField
                         label={
                           <>
-                            <ClockIcon className="w-4 h-4 ltr:mr-2 rtl:ml-2 mt-0.5 text-neutral-500" />{" "}
+                            <ClockIcon className="mt-0.5 h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />{" "}
                             {t("duration")}
                           </>
                         }
@@ -728,8 +728,8 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                 <div className="space-y-3">
                   <div className="block sm:flex">
                     <div className="min-w-48 sm:mb-0">
-                      <label htmlFor="location" className="flex mt-2.5 text-sm font-medium text-neutral-700">
-                        <LocationMarkerIcon className="w-4 h-4 ltr:mr-2 rtl:ml-2 mt-0.5 text-neutral-500" />
+                      <label htmlFor="location" className="mt-2.5 flex text-sm font-medium text-neutral-700">
+                        <LocationMarkerIcon className="mt-0.5 h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
                         {t("location")}
                       </label>
                     </div>
@@ -744,16 +744,16 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                 <hr className="border-neutral-200" />
                 <div className="space-y-3">
                   <div className="block sm:flex">
-                    <div className="mb-4 min-w-48 sm:mb-0 mt-2.5">
-                      <label htmlFor="description" className="flex mt-0 text-sm font-medium text-neutral-700">
-                        <DocumentIcon className="w-4 h-4 ltr:mr-2 rtl:ml-2 mt-0.5 text-neutral-500" />
+                    <div className="mb-4 mt-2.5 min-w-48 sm:mb-0">
+                      <label htmlFor="description" className="mt-0 flex text-sm font-medium text-neutral-700">
+                        <DocumentIcon className="mt-0.5 h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
                         {t("description")}
                       </label>
                     </div>
                     <div className="w-full">
                       <textarea
                         id="description"
-                        className="block w-full border-gray-300 rounded-sm shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
+                        className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
                         placeholder={t("quick_video_meeting")}
                         {...formMethods.register("description")}
                         defaultValue={asStringOrUndefined(eventType.description)}></textarea>
@@ -767,8 +767,8 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                       <div className="mb-4 min-w-48 sm:mb-0">
                         <label
                           htmlFor="schedulingType"
-                          className="flex mt-2 text-sm font-medium text-neutral-700">
-                          <UsersIcon className="w-5 h-5 ltr:mr-2 rtl:ml-2 text-neutral-500" />{" "}
+                          className="mt-2 flex text-sm font-medium text-neutral-700">
+                          <UsersIcon className="h-5 w-5 text-neutral-500 ltr:mr-2 rtl:ml-2" />{" "}
                           {t("scheduling_type")}
                         </label>
                       </div>
@@ -781,10 +781,8 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                             value={asStringOrUndefined(eventType.schedulingType)}
                             options={schedulingTypeOptions}
                             onChange={(val) => {
-                              // FIXME
-                              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                              // @ts-ignore
-                              formMethods.setValue("schedulingType", val);
+                              // FIXME: Better types are needed
+                              formMethods.setValue("schedulingType", val as SchedulingType);
                             }}
                           />
                         )}
@@ -794,7 +792,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                     <div className="block sm:flex">
                       <div className="mb-4 min-w-48 sm:mb-0">
                         <label htmlFor="users" className="flex text-sm font-medium text-neutral-700">
-                          <UserAddIcon className="w-5 h-5 ltr:mr-2 rtl:ml-2 text-neutral-500" />{" "}
+                          <UserAddIcon className="h-5 w-5 text-neutral-500 ltr:mr-2 rtl:ml-2" />{" "}
                           {t("attendees")}
                         </label>
                       </div>
@@ -829,8 +827,8 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                     <CollapsibleTrigger type="button" className="flex w-full">
                       <ChevronRightIcon
                         className={`${
-                          advancedSettingsVisible ? "transform rotate-90" : ""
-                        } w-5 h-5 text-neutral-500 ml-auto`}
+                          advancedSettingsVisible ? "rotate-90 transform" : ""
+                        } ml-auto h-5 w-5 text-neutral-500`}
                       />
                       <span className="text-sm font-medium text-neutral-700">
                         {t("show_advanced_settings")}
@@ -843,7 +841,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                        * This will fallback to each user selected destination calendar.
                        */}
                       {!!connectedCalendarsQuery.data?.connectedCalendars.length && !team && (
-                        <div className="items-center block sm:flex">
+                        <div className="block items-center sm:flex">
                           <div className="mb-4 min-w-48 sm:mb-0">
                             <label
                               htmlFor="createEventsOn"
@@ -869,7 +867,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                           </div>
                         </div>
                       )}
-                      <div className="items-center block sm:flex">
+                      <div className="block items-center sm:flex">
                         <div className="mb-4 min-w-48 sm:mb-0">
                           <label htmlFor="eventName" className="flex text-sm font-medium text-neutral-700">
                             {t("event_name")} <InfoBadge content={t("event_name_tooltip")} />
@@ -879,7 +877,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                           <div className="relative mt-1 rounded-sm shadow-sm">
                             <input
                               type="text"
-                              className="block w-full border-gray-300 rounded-sm shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
+                              className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
                               placeholder={t("meeting_with_user")}
                               defaultValue={eventType.eventName || ""}
                               {...formMethods.register("eventName")}
@@ -888,7 +886,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                         </div>
                       </div>
                       {eventType.isWeb3Active && (
-                        <div className="items-center block sm:flex">
+                        <div className="block items-center sm:flex">
                           <div className="mb-4 min-w-48 sm:mb-0">
                             <label
                               htmlFor="smartContractAddress"
@@ -901,7 +899,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                               {
                                 <input
                                   type="text"
-                                  className="block w-full border-gray-300 rounded-sm shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
+                                  className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
                                   placeholder={t("Example: 0x71c7656ec7ab88b098defb751b7401b5f6d8976f")}
                                   defaultValue={(eventType.metadata.smartContractAddress || "") as string}
                                   {...formMethods.register("smartContractAddress")}
@@ -911,23 +909,23 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                           </div>
                         </div>
                       )}
-                      <div className="items-center block sm:flex">
+                      <div className="block items-center sm:flex">
                         <div className="mb-4 min-w-48 sm:mb-0">
                           <label
                             htmlFor="additionalFields"
-                            className="mt-2 text-sm font-medium flexflex text-neutral-700">
+                            className="flexflex mt-2 text-sm font-medium text-neutral-700">
                             {t("additional_inputs")}
                           </label>
                         </div>
                         <div className="w-full">
                           <ul className="mt-1">
                             {customInputs.map((customInput: EventTypeCustomInput, idx: number) => (
-                              <li key={idx} className="p-2 mb-2 border bg-secondary-50">
+                              <li key={idx} className="mb-2 border bg-secondary-50 p-2">
                                 <div className="flex justify-between">
-                                  <div className="flex-1 w-0">
+                                  <div className="w-0 flex-1">
                                     <div className="truncate">
                                       <span
-                                        className="ltr:ml-2 rtl:mr-2text-sm"
+                                        className="rtl:mr-2text-sm ltr:ml-2"
                                         title={`${t("label")}: ${customInput.label}`}>
                                         {t("label")}: {customInput.label}
                                       </span>
@@ -935,19 +933,19 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                                     {customInput.placeholder && (
                                       <div className="truncate">
                                         <span
-                                          className="ltr:ml-2 rtl:mr-2text-sm"
+                                          className="rtl:mr-2text-sm ltr:ml-2"
                                           title={`${t("placeholder")}: ${customInput.placeholder}`}>
                                           {t("placeholder")}: {customInput.placeholder}
                                         </span>
                                       </div>
                                     )}
                                     <div>
-                                      <span className="ltr:ml-2 rtl:mr-2text-sm">
+                                      <span className="rtl:mr-2text-sm ltr:ml-2">
                                         {t("type")}: {customInput.type}
                                       </span>
                                     </div>
                                     <div>
-                                      <span className="ltr:ml-2 rtl:mr-2text-sm">
+                                      <span className="rtl:mr-2text-sm ltr:ml-2">
                                         {customInput.required ? t("required") : t("optional")}
                                       </span>
                                     </div>
@@ -963,7 +961,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                                       {t("edit")}
                                     </Button>
                                     <button type="button" onClick={() => removeCustom(idx)}>
-                                      <XIcon className="w-6 h-6 pl-1 border-l-2 hover:text-red-500 " />
+                                      <XIcon className="h-6 w-6 border-l-2 pl-1 hover:text-red-500 " />
                                     </button>
                                   </div>
                                 </div>
@@ -1040,7 +1038,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                         )}
                       />
 
-                      <div className="items-center block sm:flex">
+                      <div className="block items-center sm:flex">
                         <div className="mb-4 min-w-48 sm:mb-0">
                           <label htmlFor="eventName" className="flex text-sm font-medium text-neutral-700">
                             {t("slot_interval")}
@@ -1066,7 +1064,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                                   <Select
                                     isSearchable={false}
                                     classNamePrefix="react-select"
-                                    className="flex-1 block w-full min-w-0 border border-gray-300 rounded-sm react-select-container focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
+                                    className="react-select-container block w-full min-w-0 flex-1 rounded-sm border border-gray-300 focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
                                     onChange={(val) => {
                                       formMethods.setValue(
                                         "slotInterval",
@@ -1091,7 +1089,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                         <div className="mb-4 min-w-48 sm:mb-0">
                           <label
                             htmlFor="inviteesCanSchedule"
-                            className="flex text-sm font-medium text-neutral-700 mt-2.5">
+                            className="mt-2.5 flex text-sm font-medium text-neutral-700">
                             {t("invitees_can_schedule")}
                           </label>
                         </div>
@@ -1107,26 +1105,26 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                                   formMethods.setValue("periodType", val as PeriodType)
                                 }>
                                 {PERIOD_TYPES.map((period) => (
-                                  <div className="flex items-center mb-2 text-sm" key={period.type}>
+                                  <div className="mb-2 flex items-center text-sm" key={period.type}>
                                     <RadioGroup.Item
                                       id={period.type}
                                       value={period.type}
-                                      className="flex items-center w-4 h-4 bg-white border border-black rounded-full cursor-pointer ltr:mr-2 rtl:ml-2 focus:border-2 focus:outline-none">
-                                      <RadioGroup.Indicator className="relative flex items-center justify-center w-4 h-4 after:bg-black after:block after:w-2 after:h-2 after:rounded-full" />
+                                      className="flex h-4 w-4 cursor-pointer items-center rounded-full border border-black bg-white focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
+                                      <RadioGroup.Indicator className="relative flex h-4 w-4 items-center justify-center after:block after:h-2 after:w-2 after:rounded-full after:bg-black" />
                                     </RadioGroup.Item>
                                     {period.prefix ? <span>{period.prefix}&nbsp;</span> : null}
                                     {period.type === "ROLLING" && (
                                       <div className="inline-flex">
                                         <input
                                           type="number"
-                                          className="block w-12 ltr:mr-2 rtl:ml-2 border-gray-300 rounded-sm shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm [appearance:textfield]"
+                                          className="block w-12 rounded-sm border-gray-300 shadow-sm [appearance:textfield] focus:border-primary-500 focus:ring-primary-500 ltr:mr-2 rtl:ml-2 sm:text-sm"
                                           placeholder="30"
                                           {...formMethods.register("periodDays", { valueAsNumber: true })}
                                           defaultValue={eventType.periodDays || 30}
                                         />
                                         <select
                                           id=""
-                                          className="block w-full py-2 pl-3 pr-10 text-base border-gray-300 rounded-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
+                                          className="block w-full rounded-sm border-gray-300 py-2 pl-3 pr-10 text-base focus:border-primary-500 focus:outline-none focus:ring-primary-500 sm:text-sm"
                                           {...formMethods.register("periodCountCalendarDays")}
                                           defaultValue={eventType.periodCountCalendarDays ? "1" : "0"}>
                                           <option value="1">{t("calendar_days")}</option>
@@ -1135,7 +1133,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                                       </div>
                                     )}
                                     {period.type === "RANGE" && (
-                                      <div className="inline-flex space-x-2 rtl:space-x-reverse ltr:ml-2 rtl:mr-2">
+                                      <div className="inline-flex space-x-2 ltr:ml-2 rtl:mr-2 rtl:space-x-reverse">
                                         <Controller
                                           name="periodDates"
                                           control={formMethods.control}
@@ -1206,17 +1204,17 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                             <div className="mb-4 min-w-48 sm:mb-0">
                               <label
                                 htmlFor="payment"
-                                className="flex mt-2 text-sm font-medium text-neutral-700">
+                                className="mt-2 flex text-sm font-medium text-neutral-700">
                                 {t("payment")}
                               </label>
                             </div>
 
                             <div className="flex flex-col">
                               <div className="w-full">
-                                <div className="items-center block sm:flex">
+                                <div className="block items-center sm:flex">
                                   <div className="w-full">
                                     <div className="relative flex items-start">
-                                      <div className="flex items-center h-5">
+                                      <div className="flex h-5 items-center">
                                         <input
                                           onChange={(event) => {
                                             setRequirePayment(event.target.checked);
@@ -1227,7 +1225,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                                           id="requirePayment"
                                           name="requirePayment"
                                           type="checkbox"
-                                          className="w-4 h-4 border-gray-300 rounded focus:ring-primary-500 text-primary-600"
+                                          className="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
                                           defaultChecked={requirePayment}
                                         />
                                       </div>
@@ -1250,7 +1248,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                               </div>
                               {requirePayment && (
                                 <div className="w-full">
-                                  <div className="items-center block sm:flex">
+                                  <div className="block items-center sm:flex">
                                     <div className="w-full">
                                       <div className="relative mt-1 rounded-sm shadow-sm">
                                         <Controller
@@ -1264,7 +1262,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                                               min="0.5"
                                               type="number"
                                               required
-                                              className="block w-full pl-2 pr-12 border-gray-300 rounded-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
+                                              className="block w-full rounded-sm border-gray-300 pl-2 pr-12 focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
                                               placeholder="Price"
                                               onChange={(e) => {
                                                 field.onChange(e.target.valueAsNumber * 100);
@@ -1273,7 +1271,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                                             />
                                           )}
                                         />
-                                        <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
+                                        <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                           <span className="text-gray-500 sm:text-sm" id="duration">
                                             {new Intl.NumberFormat("en", {
                                               style: "currency",
@@ -1298,7 +1296,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                   </>
                   {/* )} */}
                 </Collapsible>
-                <div className="flex justify-end mt-4 space-x-2 rtl:space-x-reverse">
+                <div className="mt-4 flex justify-end space-x-2 rtl:space-x-reverse">
                   <Button href="/event-types" color="secondary" tabIndex={-1}>
                     {t("cancel")}
                   </Button>
@@ -1309,7 +1307,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
               </Form>
             </div>
           </div>
-          <div className="w-full px-2 mt-8 ltr:ml-2 rtl:mr-2 sm:w-3/12 sm:mt-0 min-w-[177px] ">
+          <div className="mt-8 w-full min-w-[177px] px-2 ltr:ml-2 rtl:mr-2 sm:mt-0 sm:w-3/12 ">
             <div className="px-2">
               <Controller
                 name="hidden"
@@ -1331,8 +1329,8 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                 href={permalink}
                 target="_blank"
                 rel="noreferrer"
-                className="inline-flex items-center px-2 py-1 text-sm font-medium rounded-sm text-md text-neutral-700 hover:text-gray-900 hover:bg-gray-200">
-                <ExternalLinkIcon className="w-4 h-4 ltr:mr-2 rtl:ml-2 text-neutral-500" aria-hidden="true" />
+                className="text-md inline-flex items-center rounded-sm px-2 py-1 text-sm font-medium text-neutral-700 hover:bg-gray-200 hover:text-gray-900">
+                <ExternalLinkIcon className="h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" aria-hidden="true" />
                 {t("preview")}
               </a>
               <button
@@ -1341,13 +1339,13 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                   showToast("Link copied!", "success");
                 }}
                 type="button"
-                className="flex items-center px-2 py-1 text-sm font-medium text-gray-700 rounded-sm text-md hover:text-gray-900 hover:bg-gray-200">
-                <LinkIcon className="w-4 h-4 ltr:mr-2 rtl:ml-2 text-neutral-500" />
+                className="text-md flex items-center rounded-sm px-2 py-1 text-sm font-medium text-gray-700 hover:bg-gray-200 hover:text-gray-900">
+                <LinkIcon className="h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
                 {t("copy_link")}
               </button>
               <Dialog>
-                <DialogTrigger className="flex items-center px-2 py-1 text-sm font-medium rounded-sm text-md text-neutral-700 hover:text-gray-900 hover:bg-gray-200">
-                  <TrashIcon className="w-4 h-4 ltr:mr-2 rtl:ml-2 text-neutral-500" />
+                <DialogTrigger className="text-md flex items-center rounded-sm px-2 py-1 text-sm font-medium text-neutral-700 hover:bg-gray-200 hover:text-gray-900">
+                  <TrashIcon className="h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
                   {t("delete")}
                 </DialogTrigger>
                 <ConfirmationDialogContent
@@ -1363,10 +1361,10 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
         </div>
         <Dialog open={showLocationModal} onOpenChange={setShowLocationModal}>
           <DialogContent asChild>
-            <div className="inline-block px-4 pt-5 pb-4 text-left align-bottom transition-all transform bg-white rounded-sm shadow-xl sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
+            <div className="inline-block transform rounded-sm bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
               <div className="mb-4 sm:flex sm:items-start">
-                <div className="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto rounded-full bg-secondary-100 sm:mx-0 sm:h-10 sm:w-10">
-                  <LocationMarkerIcon className="w-6 h-6 text-primary-600" />
+                <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-secondary-100 sm:mx-0 sm:h-10 sm:w-10">
+                  <LocationMarkerIcon className="h-6 w-6 text-primary-600" />
                 </div>
                 <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                   <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
@@ -1417,7 +1415,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                       options={locationOptions}
                       isSearchable={false}
                       classNamePrefix="react-select"
-                      className="flex-1 block w-full min-w-0 my-4 border border-gray-300 rounded-sm react-select-container focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
+                      className="react-select-container my-4 block w-full min-w-0 flex-1 rounded-sm border border-gray-300 focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
                       onChange={(val) => {
                         if (val) {
                           locationFormMethods.setValue("locationType", val.value);
@@ -1428,7 +1426,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                   )}
                 />
                 <LocationOptions />
-                <div className="flex justify-end mt-4 space-x-2">
+                <div className="mt-4 flex justify-end space-x-2">
                   <Button onClick={() => setShowLocationModal(false)} type="button" color="secondary">
                     {t("cancel")}
                   </Button>
@@ -1445,10 +1443,10 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
           render={() => (
             <Dialog open={selectedCustomInputModalOpen} onOpenChange={setSelectedCustomInputModalOpen}>
               <DialogContent asChild>
-                <div className="inline-block px-4 pt-5 pb-4 text-left align-bottom transition-all transform bg-white rounded-sm shadow-xl sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
+                <div className="inline-block transform rounded-sm bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
                   <div className="mb-4 sm:flex sm:items-start">
-                    <div className="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto rounded-full bg-secondary-100 sm:mx-0 sm:h-10 sm:w-10">
-                      <PlusIcon className="w-6 h-6 text-primary-600" />
+                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-secondary-100 sm:mx-0 sm:h-10 sm:w-10">
+                      <PlusIcon className="h-6 w-6 text-primary-600" />
                     </div>
                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                       <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
diff --git a/pages/event-types/index.tsx b/pages/event-types/index.tsx
index e2237a4dc4..acd93f49d7 100644
--- a/pages/event-types/index.tsx
+++ b/pages/event-types/index.tsx
@@ -44,9 +44,9 @@ const CreateFirstEventTypeView = ({ canAddEvents, profiles }: CreateEventTypePro
   return (
     <div className="md:py-20">
       <UserCalendarIllustration />
-      <div className="block mx-auto text-center md:max-w-screen-sm">
+      <div className="mx-auto block text-center md:max-w-screen-sm">
         <h3 className="mt-2 text-xl font-bold text-neutral-900">{t("new_event_type_heading")}</h3>
-        <p className="mt-1 mb-2 text-md text-neutral-600">{t("new_event_type_description")}</p>
+        <p className="text-md mt-1 mb-2 text-neutral-600">{t("new_event_type_description")}</p>
         <CreateEventTypeButton canAddEvents={canAddEvents} options={profiles} />
       </div>
     </div>
@@ -93,31 +93,31 @@ const EventTypeList = ({ readOnly, types, profile }: EventTypeListProps): JSX.El
   }
 
   return (
-    <div className="mb-16 -mx-4 overflow-hidden bg-white border border-gray-200 rounded-sm sm:mx-0">
+    <div className="-mx-4 mb-16 overflow-hidden rounded-sm border border-gray-200 bg-white sm:mx-0">
       <ul className="divide-y divide-neutral-200" data-testid="event-types">
         {sortableTypes.map((type, index) => (
           <li
             key={type.id}
             className={classNames(
-              type.$disabled && "opacity-30 cursor-not-allowed pointer-events-none select-none"
+              type.$disabled && "pointer-events-none cursor-not-allowed select-none opacity-30"
             )}
             data-disabled={type.$disabled ? 1 : 0}>
             <div
               className={classNames(
-                "hover:bg-neutral-50 flex justify-between items-center ",
+                "flex items-center justify-between hover:bg-neutral-50 ",
                 type.$disabled && "pointer-events-none"
               )}>
-              <div className="flex items-center justify-between w-full px-4 py-4 group sm:px-6 hover:bg-neutral-50">
+              <div className="group flex w-full items-center justify-between px-4 py-4 hover:bg-neutral-50 sm:px-6">
                 {sortableTypes.length > 1 && (
                   <>
                     <button
-                      className="hidden sm:block absolute -mt-4 mb-4 left-1/2 -ml-4 sm:ml-0 sm:left-[19px] border hover:border-transparent text-gray-400 transition-all hover:text-black hover:shadow group-hover:scale-100 scale-0 w-7 h-7 p-1 invisible group-hover:visible bg-white rounded-full"
+                      className="invisible absolute left-1/2 -mt-4 mb-4 -ml-4 hidden h-7 w-7 scale-0 rounded-full border bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black hover:shadow group-hover:visible group-hover:scale-100 sm:left-[19px] sm:ml-0 sm:block"
                       onClick={() => moveEventType(index, -1)}>
                       <ArrowUpIcon />
                     </button>
 
                     <button
-                      className="hidden sm:block absolute mt-4 left-1/2 -ml-4 sm:ml-0 sm:left-[19px] border hover:border-transparent text-gray-400 transition-all hover:text-black hover:shadow group-hover:scale-100 scale-0 w-7 h-7 p-1 invisible group-hover:visible bg-white rounded-full"
+                      className="invisible absolute left-1/2 mt-4 -ml-4 hidden h-7 w-7 scale-0 rounded-full border bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black hover:shadow group-hover:visible group-hover:scale-100 sm:left-[19px] sm:ml-0 sm:block"
                       onClick={() => moveEventType(index, 1)}>
                       <ArrowDownIcon />
                     </button>
@@ -125,18 +125,18 @@ const EventTypeList = ({ readOnly, types, profile }: EventTypeListProps): JSX.El
                 )}
                 <Link href={"/event-types/" + type.id}>
                   <a
-                    className="flex-grow text-sm truncate"
+                    className="flex-grow truncate text-sm"
                     title={`${type.title} ${type.description ? `– ${type.description}` : ""}`}>
                     <div>
-                      <span className="font-medium truncate text-neutral-900">{type.title} </span>
-                      <small className="hidden sm:inline text-neutral-500">{`/${profile.slug}/${type.slug}`}</small>
+                      <span className="truncate font-medium text-neutral-900">{type.title} </span>
+                      <small className="hidden text-neutral-500 sm:inline">{`/${profile.slug}/${type.slug}`}</small>
                       {type.hidden && (
-                        <span className="ltr:ml-2 rtl:mr-2inline items-center px-1.5 py-0.5 rounded-sm text-xs font-medium bg-yellow-100 text-yellow-800">
+                        <span className="rtl:mr-2inline items-center rounded-sm bg-yellow-100 px-1.5 py-0.5 text-xs font-medium text-yellow-800 ltr:ml-2">
                           {t("hidden")}
                         </span>
                       )}
                       {readOnly && (
-                        <span className="ltr:ml-2 rtl:mr-2inline items-center px-1.5 py-0.5 rounded-sm text-xs font-medium bg-gray-100 text-gray-800">
+                        <span className="rtl:mr-2inline items-center rounded-sm bg-gray-100 px-1.5 py-0.5 text-xs font-medium text-gray-800 ltr:ml-2">
                           {t("readonly")}
                         </span>
                       )}
@@ -145,8 +145,8 @@ const EventTypeList = ({ readOnly, types, profile }: EventTypeListProps): JSX.El
                   </a>
                 </Link>
 
-                <div className="flex-shrink-0 hidden mt-4 sm:flex sm:mt-0 sm:ml-5">
-                  <div className="flex items-center rtl:space-x-reverse space-x-2 overflow-hidden">
+                <div className="mt-4 hidden flex-shrink-0 sm:mt-0 sm:ml-5 sm:flex">
+                  <div className="flex items-center space-x-2 overflow-hidden rtl:space-x-reverse">
                     {type.users?.length > 1 && (
                       <AvatarGroup
                         size={8}
@@ -163,7 +163,7 @@ const EventTypeList = ({ readOnly, types, profile }: EventTypeListProps): JSX.El
                         target="_blank"
                         rel="noreferrer"
                         className="btn-icon appearance-none">
-                        <ExternalLinkIcon className="w-5 h-5 group-hover:text-black" />
+                        <ExternalLinkIcon className="h-5 w-5 group-hover:text-black" />
                       </a>
                     </Tooltip>
 
@@ -176,20 +176,20 @@ const EventTypeList = ({ readOnly, types, profile }: EventTypeListProps): JSX.El
                           );
                         }}
                         className="btn-icon">
-                        <LinkIcon className="w-5 h-5 group-hover:text-black" />
+                        <LinkIcon className="h-5 w-5 group-hover:text-black" />
                       </button>
                     </Tooltip>
                   </div>
                 </div>
               </div>
-              <div className="flex flex-shrink-0 mr-5 sm:hidden">
+              <div className="mr-5 flex flex-shrink-0 sm:hidden">
                 <Menu as="div" className="inline-block text-left">
                   {({ open }) => (
                     <>
                       <div>
-                        <Menu.Button className="p-2 mt-1 border border-transparent text-neutral-400 hover:border-gray-200">
+                        <Menu.Button className="mt-1 border border-transparent p-2 text-neutral-400 hover:border-gray-200">
                           <span className="sr-only">{t("open_options")}</span>
-                          <DotsHorizontalIcon className="w-5 h-5" aria-hidden="true" />
+                          <DotsHorizontalIcon className="h-5 w-5" aria-hidden="true" />
                         </Menu.Button>
                       </div>
 
@@ -204,7 +204,7 @@ const EventTypeList = ({ readOnly, types, profile }: EventTypeListProps): JSX.El
                         leaveTo="transform opacity-0 scale-95">
                         <Menu.Items
                           static
-                          className="absolute right-0 z-10 w-56 mt-2 origin-top-right bg-white divide-y rounded-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none divide-neutral-100">
+                          className="absolute right-0 z-10 mt-2 w-56 origin-top-right divide-y divide-neutral-100 rounded-sm bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                           <div className="py-1">
                             <Menu.Item>
                               {({ active }) => (
@@ -217,7 +217,7 @@ const EventTypeList = ({ readOnly, types, profile }: EventTypeListProps): JSX.El
                                     "group flex items-center px-4 py-2 text-sm font-medium"
                                   )}>
                                   <ExternalLinkIcon
-                                    className="w-4 h-4 mr-3 text-neutral-400 group-hover:text-neutral-500"
+                                    className="mr-3 h-4 w-4 text-neutral-400 group-hover:text-neutral-500"
                                     aria-hidden="true"
                                   />
                                   {t("preview")}
@@ -235,10 +235,10 @@ const EventTypeList = ({ readOnly, types, profile }: EventTypeListProps): JSX.El
                                   }}
                                   className={classNames(
                                     active ? "bg-neutral-100 text-neutral-900" : "text-neutral-700",
-                                    "group flex items-center px-4 py-2 text-sm w-full font-medium"
+                                    "group flex w-full items-center px-4 py-2 text-sm font-medium"
                                   )}>
                                   <LinkIcon
-                                    className="w-4 h-4 mr-3 text-neutral-400 group-hover:text-neutral-500"
+                                    className="mr-3 h-4 w-4 text-neutral-400 group-hover:text-neutral-500"
                                     aria-hidden="true"
                                   />
                                   {t("copy_link")}
@@ -265,14 +265,14 @@ interface EventTypeListHeadingProps {
   membershipCount: number;
 }
 const EventTypeListHeading = ({ profile, membershipCount }: EventTypeListHeadingProps): JSX.Element => (
-  <div className="flex mb-4">
+  <div className="mb-4 flex">
     <Link href="/settings/teams">
       <a>
         <Avatar
           alt={profile?.name || ""}
           imageSrc={profile?.image || undefined}
           size={8}
-          className="inline mt-1 ltr:mr-2 rtl:ml-2"
+          className="mt-1 inline ltr:mr-2 rtl:ml-2"
         />
       </a>
     </Link>
@@ -281,11 +281,11 @@ const EventTypeListHeading = ({ profile, membershipCount }: EventTypeListHeading
         <a className="font-bold">{profile?.name || ""}</a>
       </Link>
       {membershipCount && (
-        <span className="relative ltr:ml-2 rtl:mr-2 text-xs text-neutral-500 -top-px">
+        <span className="relative -top-px text-xs text-neutral-500 ltr:ml-2 rtl:mr-2">
           <Link href="/settings/teams">
             <a>
               <Badge variant="gray">
-                <UsersIcon className="inline w-3 h-3 mr-1 -mt-px" />
+                <UsersIcon className="mr-1 -mt-px inline h-3 w-3" />
                 {membershipCount}
               </Badge>
             </a>
diff --git a/pages/getting-started.tsx b/pages/getting-started.tsx
index b8059d8f43..f637f2196f 100644
--- a/pages/getting-started.tsx
+++ b/pages/getting-started.tsx
@@ -274,7 +274,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
       Component: (
         <>
           {selectedImport == "" && (
-            <div className="grid grid-cols-2 mb-4 gap-x-4">
+            <div className="mb-4 grid grid-cols-2 gap-x-4">
               <Button color="secondary" onClick={() => setSelectedImport("calendly")}>
                 {t("import_from")} Calendly
               </Button>
@@ -285,7 +285,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
           )}
           {selectedImport && (
             <div>
-              <h2 className="text-2xl text-gray-900 font-cal">
+              <h2 className="font-cal text-2xl text-gray-900">
                 {t("import_from")} {selectedImport === "calendly" ? "Calendly" : "SavvyCal"}
               </h2>
               <p className="mb-2 text-sm text-gray-500">
@@ -331,9 +331,9 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
                   id="token"
                   placeholder={t("access_token")}
                   required
-                  className="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-sm shadow-sm focus:outline-none focus:ring-neutral-500 focus:border-neutral-500 sm:text-sm"
+                  className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 shadow-sm focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
                 />
-                <Button type="submit" className="h-10 mt-1 ml-4">
+                <Button type="submit" className="mt-1 ml-4 h-10">
                   {t("import")}
                 </Button>
               </form>
@@ -344,7 +344,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
               <div className="w-full border-t border-gray-300" />
             </div>
             <div className="relative flex justify-center">
-              <span className="px-2 text-sm text-gray-500 bg-white">or</span>
+              <span className="bg-white px-2 text-sm text-gray-500">or</span>
             </div>
           </div>
           <form className="sm:mx-auto sm:w-full">
@@ -363,7 +363,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
                     placeholder={t("username")}
                     defaultValue={props.usernameParam ?? ""}
                     required
-                    className="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-sm shadow-sm focus:outline-none focus:ring-neutral-500 focus:border-neutral-500 sm:text-sm"
+                    className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 shadow-sm focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
                   />
                 </fieldset>
               )}
@@ -381,7 +381,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
                   placeholder={t("your_name")}
                   defaultValue={props.user.name ?? enteredName}
                   required
-                  className="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-sm shadow-sm focus:outline-none focus:ring-neutral-500 focus:border-neutral-500 sm:text-sm"
+                  className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 shadow-sm focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
                 />
               </fieldset>
 
@@ -399,7 +399,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
                   id="timeZone"
                   value={selectedTimeZone}
                   onChange={({ value }) => setSelectedTimeZone(value)}
-                  className="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+                  className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
                 />
               </fieldset>
             </section>
@@ -454,7 +454,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
       description: t("set_availability_instructions"),
       Component: (
         <Form<ScheduleFormValues>
-          className="max-w-lg mx-auto text-black bg-white dark:bg-opacity-5 dark:text-white"
+          className="mx-auto max-w-lg bg-white text-black dark:bg-opacity-5 dark:text-white"
           form={availabilityForm}
           handleSubmit={async (values) => {
             try {
@@ -470,7 +470,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
           }}>
           <section>
             <Schedule name="schedule" />
-            <footer className="flex flex-col py-6 space-y-6 sm:mx-auto sm:w-full">
+            <footer className="flex flex-col space-y-6 py-6 sm:mx-auto sm:w-full">
               <Button className="justify-center" EndIcon={ArrowRightIcon} type="submit">
                 {t("continue")}
               </Button>
@@ -501,7 +501,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
                 placeholder={t("your_name")}
                 defaultValue={props.user.name || enteredName}
                 required
-                className="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-sm shadow-sm focus:outline-none focus:ring-neutral-500 focus:border-neutral-500 sm:text-sm"
+                className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 shadow-sm focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
               />
             </fieldset>
             <fieldset>
@@ -514,7 +514,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
                 name="bio"
                 id="bio"
                 required
-                className="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-sm shadow-sm focus:outline-none focus:ring-neutral-500 focus:border-neutral-500 sm:text-sm"
+                className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 shadow-sm focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
                 defaultValue={props.user.bio || undefined}
               />
               <Text variant="caption" className="mt-2">
@@ -562,11 +562,11 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
       </Head>
 
       {isSubmitting && (
-        <div className="fixed z-10 flex flex-col items-center content-center justify-center w-full h-full bg-white bg-opacity-25">
+        <div className="fixed z-10 flex h-full w-full flex-col content-center items-center justify-center bg-white bg-opacity-25">
           <Loader />
         </div>
       )}
-      <div className="px-4 py-24 mx-auto">
+      <div className="mx-auto px-4 py-24">
         <article className="relative">
           <section className="space-y-4 sm:mx-auto sm:w-full sm:max-w-lg">
             <header>
@@ -577,7 +577,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
                 {steps[currentStep].description}
               </Text>
             </header>
-            <section className="pt-4 space-y-2">
+            <section className="space-y-2 pt-4">
               <Text variant="footnote">
                 Step {currentStep + 1} of {steps.length}
               </Text>
@@ -591,21 +591,21 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
                       key={`step-${index}`}
                       onClick={() => goToStep(index)}
                       className={classnames(
-                        "h-1 bg-white w-1/4",
+                        "h-1 w-1/4 bg-white",
                         index < currentStep ? "cursor-pointer" : ""
                       )}></div>
                   ) : (
-                    <div key={`step-${index}`} className="w-1/4 h-1 bg-white bg-opacity-25"></div>
+                    <div key={`step-${index}`} className="h-1 w-1/4 bg-white bg-opacity-25"></div>
                   );
                 })}
               </section>
             </section>
           </section>
-          <section className="max-w-xl p-10 mx-auto mt-10 bg-white rounded-sm">
+          <section className="mx-auto mt-10 max-w-xl rounded-sm bg-white p-10">
             {steps[currentStep].Component}
 
             {!steps[currentStep].hideConfirm && (
-              <footer className="flex flex-col mt-8 space-y-6 sm:mx-auto sm:w-full">
+              <footer className="mt-8 flex flex-col space-y-6 sm:mx-auto sm:w-full">
                 <Button
                   className="justify-center"
                   disabled={isSubmitting}
@@ -616,7 +616,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
               </footer>
             )}
           </section>
-          <section className="max-w-xl py-8 mx-auto">
+          <section className="mx-auto max-w-xl py-8">
             <div className="flex flex-row-reverse justify-between">
               <button
                 disabled={isSubmitting}
diff --git a/pages/integrations/index.tsx b/pages/integrations/index.tsx
index 15949d9c3f..62966163ef 100644
--- a/pages/integrations/index.tsx
+++ b/pages/integrations/index.tsx
@@ -43,26 +43,26 @@ function WebhookListItem(props: { webhook: TWebhook; onEditWebhook: () => void }
   });
 
   return (
-    <ListItem className="flex w-full p-4 -mt-px">
-      <div className="flex justify-between w-full">
-        <div className="flex flex-col max-w-full truncate">
+    <ListItem className="-mt-px flex w-full p-4">
+      <div className="flex w-full justify-between">
+        <div className="flex max-w-full flex-col truncate">
           <div className="flex space-y-1">
             <span
               className={classNames(
-                "text-sm truncate",
+                "truncate text-sm",
                 props.webhook.active ? "text-neutral-700" : "text-neutral-200"
               )}>
               {props.webhook.subscriberUrl}
             </span>
           </div>
-          <div className="flex mt-2">
-            <span className="flex flex-col space-y-1 text-xs sm:space-y-0 sm:flex-row sm:rtl:space-x-reverse space-x-2">
+          <div className="mt-2 flex">
+            <span className="flex flex-col space-y-1 space-x-2 text-xs sm:flex-row sm:space-y-0 sm:rtl:space-x-reverse">
               {props.webhook.eventTriggers.map((eventTrigger, ind) => (
                 <span
                   key={ind}
                   className={classNames(
-                    "px-1 text-xs rounded-sm w-max ",
-                    props.webhook.active ? "text-blue-700 bg-blue-100" : "text-blue-200 bg-blue-50"
+                    "w-max rounded-sm px-1 text-xs ",
+                    props.webhook.active ? "bg-blue-100 text-blue-700" : "bg-blue-50 text-blue-200"
                   )}>
                   {t(`${eventTrigger.toLowerCase()}`)}
                 </span>
@@ -77,7 +77,7 @@ function WebhookListItem(props: { webhook: TWebhook; onEditWebhook: () => void }
               color="minimal"
               size="icon"
               StartIcon={PencilAltIcon}
-              className="self-center w-full p-2 ml-4"></Button>
+              className="ml-4 w-full self-center p-2"></Button>
           </Tooltip>
           <Dialog>
             <Tooltip content={t("delete_webhook")}>
@@ -89,7 +89,7 @@ function WebhookListItem(props: { webhook: TWebhook; onEditWebhook: () => void }
                   color="minimal"
                   size="icon"
                   StartIcon={TrashIcon}
-                  className="self-center w-full p-2 ml-2"></Button>
+                  className="ml-2 w-full self-center p-2"></Button>
               </DialogTrigger>
             </Tooltip>
             <ConfirmationDialogContent
@@ -120,13 +120,13 @@ function WebhookTestDisclosure() {
 
   return (
     <Collapsible open={open} onOpenChange={() => setOpen(!open)}>
-      <CollapsibleTrigger type="button" className={"cursor-pointer flex w-full"}>
-        <ChevronRightIcon className={`${open ? "transform rotate-90" : ""} w-5 h-5 text-neutral-500`} />
+      <CollapsibleTrigger type="button" className={"flex w-full cursor-pointer"}>
+        <ChevronRightIcon className={`${open ? "rotate-90 transform" : ""} h-5 w-5 text-neutral-500`} />
         <span className="text-sm font-medium text-gray-700">{t("webhook_test")}</span>
       </CollapsibleTrigger>
       <CollapsibleContent>
-        <InputGroupBox className="px-0 space-y-0 border-0">
-          <div className="flex justify-between p-2 bg-gray-50">
+        <InputGroupBox className="space-y-0 border-0 px-0">
+          <div className="flex justify-between bg-gray-50 p-2">
             <h3 className="self-center text-gray-700">{t("webhook_response")}</h3>
             <Button
               StartIcon={SwitchHorizontalIcon}
@@ -137,14 +137,14 @@ function WebhookTestDisclosure() {
               {t("ping_test")}
             </Button>
           </div>
-          <div className="p-2 text-gray-500 border-8 border-gray-50">
+          <div className="border-8 border-gray-50 p-2 text-gray-500">
             {!mutation.data && <em>{t("no_data_yet")}</em>}
             {mutation.status === "success" && (
               <>
                 <div
                   className={classNames(
-                    "px-2 py-1 w-max text-xs ml-auto",
-                    mutation.data.ok ? "text-green-500 bg-green-50" : "text-red-500 bg-red-50"
+                    "ml-auto w-max px-2 py-1 text-xs",
+                    mutation.data.ok ? "bg-green-50 text-green-500" : "bg-red-50 text-red-500"
                   )}>
                   {mutation.data.ok ? t("success") : t("failed")}
                 </div>
@@ -249,7 +249,7 @@ function WebhookDialogForm(props: {
       </fieldset>
       <fieldset className="space-y-2">
         <FieldsetLegend>{t("payload_template")}</FieldsetLegend>
-        <div className="rtl:space-x-reverse space-x-3 text-sm">
+        <div className="space-x-3 text-sm rtl:space-x-reverse">
           <label>
             <input
               className="text-neutral-900 focus:ring-neutral-500"
@@ -308,9 +308,9 @@ function WebhookListContainer() {
           <List>
             <ListItem className={classNames("flex-col")}>
               <div
-                className={classNames("flex flex-1 rtl:space-x-reverse space-x-2 w-full p-3 items-center")}>
+                className={classNames("flex w-full flex-1 items-center space-x-2 p-3 rtl:space-x-reverse")}>
                 <Image width={40} height={40} src="/integrations/webhooks.svg" alt="Webhooks" />
-                <div className="flex-grow pl-2 truncate">
+                <div className="flex-grow truncate pl-2">
                   <ListItemTitle component="h3">Webhooks</ListItemTitle>
                   <ListItemText component="p">{t("automation")}</ListItemText>
                 </div>
@@ -378,19 +378,19 @@ function IframeEmbedContainer() {
   return (
     <>
       <ShellSubHeading title={t("iframe_embed")} subtitle={t("embed_calcom")} className="mt-10" />
-      <div className="lg:pb-8 lg:col-span-9">
+      <div className="lg:col-span-9 lg:pb-8">
         <List>
           <ListItem className={classNames("flex-col")}>
-            <div className={classNames("flex flex-1 rtl:space-x-reverse space-x-2 w-full p-3 items-center")}>
+            <div className={classNames("flex w-full flex-1 items-center space-x-2 p-3 rtl:space-x-reverse")}>
               <Image width={40} height={40} src="/integrations/embed.svg" alt="Embed" />
-              <div className="flex-grow pl-2 truncate">
+              <div className="flex-grow truncate pl-2">
                 <ListItemTitle component="h3">{t("standard_iframe")}</ListItemTitle>
                 <ListItemText component="p">{t("embed_your_calendar")}</ListItemText>
               </div>
               <div>
                 <input
                   id="iframe"
-                  className="px-2 py-1 text-sm text-gray-500 focus:ring-black focus:border-brand"
+                  className="px-2 py-1 text-sm text-gray-500 focus:border-brand focus:ring-black"
                   placeholder={t("loading")}
                   defaultValue={iframeTemplate}
                   readOnly
@@ -400,22 +400,22 @@ function IframeEmbedContainer() {
                     navigator.clipboard.writeText(iframeTemplate);
                     showToast("Copied to clipboard", "success");
                   }}>
-                  <ClipboardIcon className="w-4 h-4 -mb-0.5 ltr:mr-2 rtl:ml-2 text-gray-800" />
+                  <ClipboardIcon className="-mb-0.5 h-4 w-4 text-gray-800 ltr:mr-2 rtl:ml-2" />
                 </button>
               </div>
             </div>
           </ListItem>
           <ListItem className={classNames("flex-col")}>
-            <div className={classNames("flex flex-1 rtl:space-x-reverse space-x-2 w-full p-3 items-center")}>
+            <div className={classNames("flex w-full flex-1 items-center space-x-2 p-3 rtl:space-x-reverse")}>
               <Image width={40} height={40} src="/integrations/embed.svg" alt="Embed" />
-              <div className="flex-grow pl-2 truncate">
+              <div className="flex-grow truncate pl-2">
                 <ListItemTitle component="h3">{t("responsive_fullscreen_iframe")}</ListItemTitle>
                 <ListItemText component="p">A fullscreen scheduling experience on your website</ListItemText>
               </div>
               <div>
                 <input
                   id="fullscreen"
-                  className="px-2 py-1 text-sm text-gray-500 focus:ring-black focus:border-brand"
+                  className="px-2 py-1 text-sm text-gray-500 focus:border-brand focus:ring-black"
                   placeholder={t("loading")}
                   defaultValue={htmlTemplate}
                   readOnly
@@ -425,13 +425,13 @@ function IframeEmbedContainer() {
                     navigator.clipboard.writeText(htmlTemplate);
                     showToast("Copied to clipboard", "success");
                   }}>
-                  <ClipboardIcon className="w-4 h-4 -mb-0.5 ltr:mr-2 rtl:ml-2 text-gray-800" />
+                  <ClipboardIcon className="-mb-0.5 h-4 w-4 text-gray-800 ltr:mr-2 rtl:ml-2" />
                 </button>
               </div>
             </div>
           </ListItem>
         </List>
-        <div className="grid grid-cols-2 rtl:space-x-reverse space-x-4">
+        <div className="grid grid-cols-2 space-x-4 rtl:space-x-reverse">
           <div>
             <label htmlFor="iframe" className="block text-sm font-medium text-gray-700"></label>
             <div className="mt-1"></div>
@@ -482,7 +482,7 @@ function ConnectOrDisconnectIntegrationButton(props: {
   /** We don't need to "Connect", just show that it's installed */
   if (["daily_video", "huddle01_video", "jitsi_video"].includes(props.type)) {
     return (
-      <div className="px-3 py-2 truncate">
+      <div className="truncate px-3 py-2">
         <h3 className="text-sm font-medium text-gray-700">{t("installed")}</h3>
       </div>
     );
@@ -552,12 +552,12 @@ function Web3Container() {
   return (
     <>
       <ShellSubHeading title="Web3" subtitle={t("meet_people_with_the_same_tokens")} />
-      <div className="lg:pb-8 lg:col-span-9">
+      <div className="lg:col-span-9 lg:pb-8">
         <List>
           <ListItem className={classNames("flex-col")}>
-            <div className={classNames("flex flex-1 space-x-2 w-full p-3 items-center")}>
+            <div className={classNames("flex w-full flex-1 items-center space-x-2 p-3")}>
               <Image width={40} height={40} src="/integrations/metamask.svg" alt="Embed" />
-              <div className="flex-grow pl-2 truncate">
+              <div className="flex-grow truncate pl-2">
                 <ListItemTitle component="h3">
                   MetaMask (
                   <a className="text-blue-500" target="_blank" href="https://cal.com/web3" rel="noreferrer">
diff --git a/pages/sandbox/Alert.tsx b/pages/sandbox/Alert.tsx
index 0e920db7aa..ca085e1fea 100644
--- a/pages/sandbox/Alert.tsx
+++ b/pages/sandbox/Alert.tsx
@@ -24,11 +24,11 @@ const page = sandboxPage(function AlertPage() {
   ];
   return (
     <>
-      <div className="p-4 bg-gray-200">
+      <div className="bg-gray-200 p-4">
         <h1>Alert component</h1>
         <div className="flex flex-col">
           {list.map((props, index) => (
-            <div key={index} className="p-2 m-2 bg-white">
+            <div key={index} className="m-2 bg-white p-2">
               <h3>
                 <code>
                   {JSON.stringify(
diff --git a/pages/sandbox/Badge.tsx b/pages/sandbox/Badge.tsx
index f61027ec14..9a765c7743 100644
--- a/pages/sandbox/Badge.tsx
+++ b/pages/sandbox/Badge.tsx
@@ -11,11 +11,11 @@ const page = sandboxPage(function BadgePage() {
   ];
   return (
     <>
-      <div className="p-4 bg-gray-200">
+      <div className="bg-gray-200 p-4">
         <h1>Badge component</h1>
         <div className="flex flex-col">
           {list.map((props, index) => (
-            <div key={index} className="p-2 m-2 bg-white">
+            <div key={index} className="m-2 bg-white p-2">
               <h3>
                 <code>
                   {JSON.stringify(
diff --git a/pages/sandbox/Button.tsx b/pages/sandbox/Button.tsx
index d7c00bcc45..dce3f6d889 100644
--- a/pages/sandbox/Button.tsx
+++ b/pages/sandbox/Button.tsx
@@ -36,11 +36,11 @@ const page = sandboxPage(function ButtonPage() {
   ];
   return (
     <>
-      <div className="p-4 bg-gray-200">
+      <div className="bg-gray-200 p-4">
         <h1>Button component</h1>
         <div className="flex flex-col">
           {list.map((props, index) => (
-            <div key={index} className="p-2 m-2 bg-white">
+            <div key={index} className="m-2 bg-white p-2">
               <h3>
                 <code>
                   {JSON.stringify(
diff --git a/pages/sandbox/RadioArea.tsx b/pages/sandbox/RadioArea.tsx
index c0cdd11070..c4e05fa33c 100644
--- a/pages/sandbox/RadioArea.tsx
+++ b/pages/sandbox/RadioArea.tsx
@@ -19,21 +19,21 @@ const selectOptions = [
 export default function RadioAreaPage() {
   const [formData, setFormData] = useState({});
 
-  const onSubmit = (e) => {
-    e.preventDefault();
-  };
-
   return (
     <>
       <Head>
         <meta name="googlebot" content="noindex" />
       </Head>
       <div className="w-full p-4">
-        <h1 className="text-4xl mb-4">RadioArea component</h1>
-        <form onSubmit={onSubmit} className="space-y-4 mb-2">
+        <h1 className="mb-4 text-4xl">RadioArea component</h1>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+          }}
+          className="mb-2 space-y-4">
           <RadioArea.Group
             onChange={(radioGroup_1: string) => setFormData({ ...formData, radioGroup_1 })}
-            className="flex rtl:space-x-reverse space-x-4 max-w-screen-md"
+            className="flex max-w-screen-md space-x-4 rtl:space-x-reverse"
             name="radioGroup_1">
             <RadioArea.Item value="radioGroup_1_radio_1" className="flex-grow bg-white">
               <strong className="mb-1">radioGroup_1_radio_1</strong>
@@ -50,7 +50,7 @@ export default function RadioAreaPage() {
           </RadioArea.Group>
           <RadioArea.Group
             onChange={(radioGroup_2: string) => setFormData({ ...formData, radioGroup_2 })}
-            className="flex rtl:space-x-reverse space-x-4 max-w-screen-md"
+            className="flex max-w-screen-md space-x-4 rtl:space-x-reverse"
             name="radioGroup_2">
             <RadioArea.Item value="radioGroup_2_radio_1" className="flex-grow bg-white">
               <strong className="mb-1">radioGroup_1_radio_1</strong>
diff --git a/pages/sandbox/form.tsx b/pages/sandbox/form.tsx
index ee4444c82c..181d70f4ea 100644
--- a/pages/sandbox/form.tsx
+++ b/pages/sandbox/form.tsx
@@ -5,15 +5,15 @@ import { Label, Input, TextField } from "@components/form/fields";
 import { sandboxPage } from ".";
 
 const page = sandboxPage(() => (
-  <div className="p-4 space-y-6">
+  <div className="space-y-6 p-4">
     <div>
       <Label>Label</Label>
     </div>
     <div>
-      <Input placeholder="Input" />
+      <Input name="test-01" placeholder="Input" />
     </div>
     <div>
-      <TextField label="TextField" placeholder="it has an input baked in" />
+      <TextField name="test-02" label="TextField" placeholder="it has an input baked in" />
     </div>
   </div>
 ));
diff --git a/pages/sandbox/index.tsx b/pages/sandbox/index.tsx
index 389d8b7103..51b7861c3c 100644
--- a/pages/sandbox/index.tsx
+++ b/pages/sandbox/index.tsx
@@ -33,7 +33,7 @@ const SandboxPage: NextPage<PageProps> = (props) => {
         <meta name="googlebot" content="noindex" />
       </Head>
       <nav>
-        <ul className="flex justify-between flex-col md:flex-row">
+        <ul className="flex flex-col justify-between md:flex-row">
           {props.pages.map((pathname) => (
             <li key={pathname}>
               <Link href={"/sandbox/" + pathname + "#main"}>
@@ -66,7 +66,7 @@ export function sandboxPage(Component: NextPage) {
 }
 
 const page = sandboxPage(() => {
-  return <p className="text-center text-2xl my-20">Click a component above</p>;
+  return <p className="my-20 text-center text-2xl">Click a component above</p>;
 });
 
 export default page.default;
diff --git a/pages/settings/billing.tsx b/pages/settings/billing.tsx
index 935f4e625a..79802faf44 100644
--- a/pages/settings/billing.tsx
+++ b/pages/settings/billing.tsx
@@ -10,10 +10,10 @@ import Button from "@components/ui/Button";
 
 type CardProps = { title: string; description: string; className?: string; children: ReactNode };
 const Card = ({ title, description, className = "", children }: CardProps): JSX.Element => (
-  <div className={`bg-white border sm:rounded-sm ${className}`}>
+  <div className={`border bg-white sm:rounded-sm ${className}`}>
     <div className="px-4 py-5 sm:p-6">
       <h3 className="text-lg font-medium leading-6 text-gray-900">{title}</h3>
-      <div className="max-w-xl mt-2 text-sm text-gray-500">
+      <div className="mt-2 max-w-xl text-sm text-gray-500">
         <p>{description}</p>
       </div>
       <div className="mt-5">{children}</div>
@@ -30,7 +30,7 @@ export default function Billing() {
   return (
     <Shell heading={t("billing")} subtitle={t("manage_your_billing_info")}>
       <SettingsShell>
-        <div className="py-6 lg:pb-8 lg:col-span-9">
+        <div className="py-6 lg:col-span-9 lg:pb-8">
           {data?.plan && ["FREE", "TRIAL"].includes(data.plan) && (
             <Card
               title={t("plan_description", { plan: data.plan })}
@@ -38,7 +38,7 @@ export default function Billing() {
               className="mb-4">
               <form method="POST" action={`/api/upgrade`}>
                 <Button type="submit">
-                  {t("upgrade_now")} <ExternalLinkIcon className="w-4 h-4 ml-1" />
+                  {t("upgrade_now")} <ExternalLinkIcon className="ml-1 h-4 w-4" />
                 </Button>
               </form>
             </Card>
@@ -47,14 +47,14 @@ export default function Billing() {
           <Card title={t("view_and_manage_billing_details")} description={t("view_and_edit_billing_details")}>
             <form method="POST" action={`/api/integrations/stripepayment/portal`}>
               <Button type="submit" color="secondary">
-                {t("go_to_billing_portal")} <ExternalLinkIcon className="w-4 h-4 ml-1" />
+                {t("go_to_billing_portal")} <ExternalLinkIcon className="ml-1 h-4 w-4" />
               </Button>
             </form>
           </Card>
           <div className="mt-4 border bg-gray-50 sm:rounded-sm">
             <div className="px-4 py-5 sm:p-6">
               <h3 className="text-lg font-medium leading-6 text-gray-900">{t("need_anything_else")}</h3>
-              <div className="max-w-xl mt-2 text-sm text-gray-500">
+              <div className="mt-2 max-w-xl text-sm text-gray-500">
                 <p>{t("further_billing_help")}</p>
               </div>
               <div className="mt-5">
diff --git a/pages/settings/profile.tsx b/pages/settings/profile.tsx
index 72b19ae4d9..d84e8a9c45 100644
--- a/pages/settings/profile.tsx
+++ b/pages/settings/profile.tsx
@@ -47,7 +47,7 @@ function HideBrandingInput(props: { hideBrandingRef: RefObject<HTMLInputElement>
         ref={props.hideBrandingRef}
         defaultChecked={isBrandingHidden(props.user)}
         className={
-          "focus:ring-neutral-800 h-4 w-4 text-neutral-900 border-gray-300 rounded-sm disabled:opacity-50"
+          "h-4 w-4 rounded-sm border-gray-300 text-neutral-900 focus:ring-neutral-800 disabled:opacity-50"
         }
         onClick={(e) => {
           if (!e.currentTarget.checked || props.user.plan !== "FREE") {
@@ -62,12 +62,12 @@ function HideBrandingInput(props: { hideBrandingRef: RefObject<HTMLInputElement>
       />
       <Dialog open={modelOpen}>
         <DialogContent>
-          <div className="flex items-center justify-center w-12 h-12 mx-auto mb-4 bg-yellow-100 rounded-full">
-            <InformationCircleIcon className="w-6 h-6 text-yellow-400" aria-hidden="true" />
+          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-yellow-100">
+            <InformationCircleIcon className="h-6 w-6 text-yellow-400" aria-hidden="true" />
           </div>
           <div className="mb-4 sm:flex sm:items-start">
             <div className="mt-3 sm:mt-0 sm:text-left">
-              <h3 className="text-lg font-bold leading-6 text-gray-900 font-cal" id="modal-title">
+              <h3 className="font-cal text-lg font-bold leading-6 text-gray-900" id="modal-title">
                 {t("only_available_on_pro_plan")}
               </h3>
             </div>
@@ -84,9 +84,9 @@ function HideBrandingInput(props: { hideBrandingRef: RefObject<HTMLInputElement>
               </Trans>
             </p>
           </div>
-          <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse gap-x-2">
+          <div className="mt-5 gap-x-2 sm:mt-4 sm:flex sm:flex-row-reverse">
             <DialogClose asChild>
-              <Button className="table-cell text-center btn-wide" onClick={() => setModalOpen(false)}>
+              <Button className="btn-wide table-cell text-center" onClick={() => setModalOpen(false)}>
                 {t("dismiss")}
               </Button>
             </DialogClose>
@@ -214,12 +214,12 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
       <div className="py-6 lg:pb-8">
         <div className="flex flex-col lg:flex-row">
           <div className="flex-grow space-y-6">
-            <div className="block space-x-2 sm:flex rtl:space-x-reverse">
-              <div className="w-full mb-6 sm:w-1/2">
+            <div className="block space-x-2 rtl:space-x-reverse sm:flex">
+              <div className="mb-6 w-full sm:w-1/2">
                 <TextField
                   name="username"
                   addOnLeading={
-                    <span className="inline-flex items-center px-3 text-gray-500 border border-r-0 border-gray-300 rounded-l-sm bg-gray-50 sm:text-sm">
+                    <span className="inline-flex items-center rounded-l-sm border border-r-0 border-gray-300 bg-gray-50 px-3 text-gray-500 sm:text-sm">
                       {process.env.NEXT_PUBLIC_APP_URL}/
                     </span>
                   }
@@ -239,13 +239,13 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
                   autoComplete="given-name"
                   placeholder={t("your_name")}
                   required
-                  className="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-sm shadow-sm focus:outline-none focus:ring-neutral-800 focus:border-neutral-800 sm:text-sm"
+                  className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 shadow-sm focus:border-neutral-800 focus:outline-none focus:ring-neutral-800 sm:text-sm"
                   defaultValue={props.user.name || undefined}
                 />
               </div>
             </div>
             <div className="block sm:flex">
-              <div className="w-full mb-6 sm:w-1/2">
+              <div className="mb-6 w-full sm:w-1/2">
                 <label htmlFor="email" className="block text-sm font-medium text-gray-700">
                   {t("email")}
                 </label>
@@ -255,7 +255,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
                   name="email"
                   id="email"
                   placeholder={t("your_email")}
-                  className="block w-full mt-1 border-gray-300 rounded-sm shadow-sm focus:ring-neutral-800 focus:border-neutral-800 sm:text-sm"
+                  className="mt-1 block w-full rounded-sm border-gray-300 shadow-sm focus:border-neutral-800 focus:ring-neutral-800 sm:text-sm"
                   defaultValue={props.user.email}
                 />
                 <p className="mt-2 text-sm text-gray-500" id="email-description">
@@ -276,14 +276,14 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
                   placeholder={t("little_something_about")}
                   rows={3}
                   defaultValue={props.user.bio || undefined}
-                  className="block w-full mt-1 border-gray-300 rounded-sm shadow-sm focus:ring-neutral-800 focus:border-neutral-800 sm:text-sm"></textarea>
+                  className="mt-1 block w-full rounded-sm border-gray-300 shadow-sm focus:border-neutral-800 focus:ring-neutral-800 sm:text-sm"></textarea>
               </div>
             </div>
             <div>
-              <div className="flex mt-1">
+              <div className="mt-1 flex">
                 <Avatar
                   alt={props.user.name || ""}
-                  className="relative w-10 h-10 rounded-full"
+                  className="relative h-10 w-10 rounded-full"
                   gravatarFallbackMd5={props.user.emailMd5}
                   imageSrc={imageSrc}
                 />
@@ -293,7 +293,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
                   name="avatar"
                   id="avatar"
                   placeholder="URL"
-                  className="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-sm shadow-sm focus:outline-none focus:ring-neutral-800 focus:border-neutral-800 sm:text-sm"
+                  className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 shadow-sm focus:border-neutral-800 focus:outline-none focus:ring-neutral-800 sm:text-sm"
                   defaultValue={imageSrc}
                 />
                 <div className="flex items-center px-5">
@@ -329,7 +329,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
                   value={selectedLanguage || props.localeProp}
                   onChange={(v) => v && setSelectedLanguage(v)}
                   classNamePrefix="react-select"
-                  className="block w-full mt-1 capitalize border border-gray-300 rounded-sm shadow-sm react-select-container focus:ring-neutral-800 focus:border-neutral-800 sm:text-sm"
+                  className="react-select-container mt-1 block w-full rounded-sm border border-gray-300 capitalize shadow-sm focus:border-neutral-800 focus:ring-neutral-800 sm:text-sm"
                   options={localeOptions}
                 />
               </div>
@@ -344,7 +344,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
                   value={selectedTimeZone}
                   onChange={(v) => v && setSelectedTimeZone(v)}
                   classNamePrefix="react-select"
-                  className="block w-full mt-1 border border-gray-300 rounded-sm shadow-sm react-select-container focus:ring-neutral-800 focus:border-neutral-800 sm:text-sm"
+                  className="react-select-container mt-1 block w-full rounded-sm border border-gray-300 shadow-sm focus:border-neutral-800 focus:ring-neutral-800 sm:text-sm"
                 />
               </div>
             </div>
@@ -358,7 +358,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
                   value={selectedWeekStartDay}
                   onChange={(v) => v && setSelectedWeekStartDay(v)}
                   classNamePrefix="react-select"
-                  className="block w-full mt-1 capitalize border border-gray-300 rounded-sm shadow-sm react-select-container focus:ring-neutral-800 focus:border-neutral-800 sm:text-sm"
+                  className="react-select-container mt-1 block w-full rounded-sm border border-gray-300 capitalize shadow-sm focus:border-neutral-800 focus:ring-neutral-800 sm:text-sm"
                   options={[
                     { value: "Sunday", label: nameOfDay(props.localeProp, 0) },
                     { value: "Monday", label: nameOfDay(props.localeProp, 1) },
@@ -377,19 +377,19 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
                   defaultValue={selectedTheme || themeOptions[0]}
                   value={selectedTheme || themeOptions[0]}
                   onChange={(v) => v && setSelectedTheme(v)}
-                  className="shadow-sm | { value: string } focus:ring-neutral-800 focus:border-neutral-800 mt-1 block w-full sm:text-sm border-gray-300 rounded-sm"
+                  className="| { value: string } mt-1 block w-full rounded-sm border-gray-300 shadow-sm focus:border-neutral-800 focus:ring-neutral-800 sm:text-sm"
                   options={themeOptions}
                 />
               </div>
-              <div className="relative flex items-start mt-8">
-                <div className="flex items-center h-5">
+              <div className="relative mt-8 flex items-start">
+                <div className="flex h-5 items-center">
                   <input
                     id="theme-adjust-os"
                     name="theme-adjust-os"
                     type="checkbox"
                     onChange={(e) => setSelectedTheme(e.target.checked ? undefined : themeOptions[0])}
                     checked={!selectedTheme}
-                    className="w-4 h-4 border-gray-300 rounded-sm focus:ring-neutral-800 text-neutral-900"
+                    className="h-4 w-4 rounded-sm border-gray-300 text-neutral-900 focus:ring-neutral-800"
                   />
                 </div>
                 <div className="text-sm ltr:ml-3 rtl:mr-3">
@@ -408,7 +408,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
             </div>
             <div>
               <div className="relative flex items-start">
-                <div className="flex items-center h-5">
+                <div className="flex h-5 items-center">
                   <HideBrandingInput user={props.user} hideBrandingRef={hideBrandingRef} />
                 </div>
                 <div className="text-sm ltr:ml-3 rtl:mr-3">
@@ -420,7 +420,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
                 </div>
               </div>
             </div>
-            <h3 className="font-bold leading-6 text-red-700 mt-7 text-md">{t("danger_zone")}</h3>
+            <h3 className="text-md mt-7 font-bold leading-6 text-red-700">{t("danger_zone")}</h3>
             <div>
               <div className="relative flex items-start">
                 <Dialog>
@@ -429,7 +429,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
                       type="button"
                       color="warn"
                       StartIcon={TrashIcon}
-                      className="text-red-700 border-2 border-red-700"
+                      className="border-2 border-red-700 text-red-700"
                       data-testid="delete-account">
                       {t("delete_account")}
                     </Button>
diff --git a/pages/settings/security.tsx b/pages/settings/security.tsx
index 778fbd4060..2465bd98dd 100644
--- a/pages/settings/security.tsx
+++ b/pages/settings/security.tsx
@@ -22,7 +22,7 @@ export default function Security() {
         {user && user.identityProvider !== IdentityProvider.CAL ? (
           <>
             <div className="mt-6">
-              <h2 className="font-cal text-lg leading-6 font-medium text-gray-900">
+              <h2 className="font-cal text-lg font-medium leading-6 text-gray-900">
                 {t("account_managed_by_identity_provider", {
                   provider: identityProviderNameMap[user.identityProvider],
                 })}
diff --git a/pages/settings/teams.tsx b/pages/settings/teams.tsx
index 5086f70318..00a1b8ed0b 100644
--- a/pages/settings/teams.tsx
+++ b/pages/settings/teams.tsx
@@ -58,13 +58,13 @@ export default function Teams() {
           />
         )}
         {showCreateTeamModal && <TeamCreateModal onClose={() => setShowCreateTeamModal(false)} />}
-        <div className={classNames("flex justify-end my-4", isFreePlan && "opacity-50")}>
+        <div className={classNames("my-4 flex justify-end", isFreePlan && "opacity-50")}>
           <Button
             disabled={isFreePlan}
             type="button"
             className="btn btn-white"
             onClick={() => setShowCreateTeamModal(true)}>
-            <PlusIcon className="group-hover:text-black text-gray-700 w-3.5 h-3.5 ltr:mr-2 rtl:ml-2 inline-block" />
+            <PlusIcon className="inline-block h-3.5 w-3.5 text-gray-700 group-hover:text-black ltr:mr-2 rtl:ml-2" />
             {t("new_team")}
           </Button>
         </div>
diff --git a/pages/settings/teams/[id].tsx b/pages/settings/teams/[id].tsx
index bb15fa24e5..e831245bf2 100644
--- a/pages/settings/teams/[id].tsx
+++ b/pages/settings/teams/[id].tsx
@@ -109,7 +109,7 @@ export function TeamSettingsPage() {
                 </>
               )}
 
-              <div className="px-4 -mx-0 bg-white border rounded-sm border-neutral-200 sm:px-6">
+              <div className="-mx-0 rounded-sm border border-neutral-200 bg-white px-4 sm:px-6">
                 {isAdmin ? (
                   <TeamSettings team={team} />
                 ) : (
@@ -119,8 +119,8 @@ export function TeamSettingsPage() {
                   </div>
                 )}
               </div>
-              <div className="flex items-center justify-between mb-3 mt-7">
-                <h3 className="text-xl font-bold leading-6 text-gray-900 font-cal">{t("members")}</h3>
+              <div className="mb-3 mt-7 flex items-center justify-between">
+                <h3 className="font-cal text-xl font-bold leading-6 text-gray-900">{t("members")}</h3>
                 {isAdmin && (
                   <div className="relative flex items-center">
                     <Button
@@ -137,7 +137,7 @@ export function TeamSettingsPage() {
               <MemberList team={team} members={team.members || []} />
               {isAdmin && <SAMLConfiguration teamsView={true} teamId={team.id} />}
             </div>
-            <div className="w-full px-2 mt-8 ltr:ml-2 rtl:mr-2 md:w-3/12 sm:mt-0 min-w-32">
+            <div className="mt-8 w-full min-w-32 px-2 ltr:ml-2 rtl:mr-2 sm:mt-0 md:w-3/12">
               <TeamSettingsRightSidebar role={team.membership.role} team={team} />
             </div>
           </div>
diff --git a/pages/success.tsx b/pages/success.tsx
index 15f924f7ec..be4d595b97 100644
--- a/pages/success.tsx
+++ b/pages/success.tsx
@@ -95,26 +95,26 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
           description={needsConfirmation ? t("booking_submitted") : t("booking_confirmed")}
         />
         <CustomBranding val={props.profile.brandColor} />
-        <main className="max-w-3xl py-24 mx-auto">
+        <main className="mx-auto max-w-3xl py-24">
           <div className="fixed inset-0 z-50 overflow-y-auto">
-            <div className="flex items-end justify-center min-h-screen 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 pt-4 pb-20 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:align-middle sm:h-screen" aria-hidden="true">
+                <span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">
                   &#8203;
                 </span>
                 <div
-                  className="inline-block px-8 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all transform bg-white border rounded-sm dark:bg-gray-800 border-neutral-200 dark:border-neutral-700 sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:py-6"
+                  className="inline-block transform overflow-hidden rounded-sm border border-neutral-200 bg-white px-8 pt-5 pb-4 text-left align-bottom transition-all dark:border-neutral-700 dark:bg-gray-800 sm:my-8 sm:w-full sm:max-w-lg sm:py-6 sm:align-middle"
                   role="dialog"
                   aria-modal="true"
                   aria-labelledby="modal-headline">
                   <div>
-                    <div className="flex items-center justify-center w-12 h-12 mx-auto bg-green-100 rounded-full">
-                      {!needsConfirmation && <CheckIcon className="w-8 h-8 text-green-600" />}
-                      {needsConfirmation && <ClockIcon className="w-8 h-8 text-green-600" />}
+                    <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
+                      {!needsConfirmation && <CheckIcon className="h-8 w-8 text-green-600" />}
+                      {needsConfirmation && <ClockIcon className="h-8 w-8 text-green-600" />}
                     </div>
                     <div className="mt-3 text-center sm:mt-5">
                       <h3
-                        className="text-2xl font-semibold leading-6 dark:text-white text-neutral-900"
+                        className="text-2xl font-semibold leading-6 text-neutral-900 dark:text-white"
                         id="modal-headline">
                         {needsConfirmation ? t("submitted") : t("meeting_is_scheduled")}
                       </h3>
@@ -127,7 +127,7 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
                             : t("emailed_you_and_attendees")}
                         </p>
                       </div>
-                      <div className="grid grid-cols-3 py-4 mt-4 text-left text-gray-700 border-t border-b dark:text-gray-300 dark:border-gray-900">
+                      <div className="mt-4 grid grid-cols-3 border-t border-b py-4 text-left text-gray-700 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>
@@ -157,11 +157,11 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
                     </div>
                   </div>
                   {!needsConfirmation && (
-                    <div className="flex pt-2 pb-4 mt-5 text-center border-b dark:border-gray-900 sm:mt-0 sm:pt-4">
+                    <div className="mt-5 flex border-b pt-2 pb-4 text-center dark:border-gray-900 sm:mt-0 sm:pt-4">
                       <span className="flex self-center font-medium text-gray-700 ltr:mr-2 rtl:ml-2 dark:text-gray-50">
                         {t("add_to_calendar")}
                       </span>
-                      <div className="flex justify-center flex-grow text-center">
+                      <div className="flex flex-grow justify-center text-center">
                         <Link
                           href={
                             `https://calendar.google.com/calendar/r/eventedit?dates=${date
@@ -174,9 +174,9 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
                             }` +
                             (typeof location === "string" ? "&location=" + encodeURIComponent(location) : "")
                           }>
-                          <a className="w-10 h-10 px-3 py-2 mx-2 border rounded-sm border-neutral-200 dark:border-neutral-700 dark:text-white">
+                          <a className="mx-2 h-10 w-10 rounded-sm border border-neutral-200 px-3 py-2 dark:border-neutral-700 dark:text-white">
                             <svg
-                              className="inline-block w-4 h-4 -mt-1"
+                              className="-mt-1 inline-block h-4 w-4"
                               fill="currentColor"
                               xmlns="http://www.w3.org/2000/svg"
                               viewBox="0 0 24 24">
@@ -199,10 +199,10 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
                             ) + (location ? "&location=" + location : "")
                           }>
                           <a
-                            className="w-10 h-10 px-3 py-2 mx-2 border rounded-sm border-neutral-200 dark:border-neutral-700 dark:text-white"
+                            className="mx-2 h-10 w-10 rounded-sm border border-neutral-200 px-3 py-2 dark:border-neutral-700 dark:text-white"
                             target="_blank">
                             <svg
-                              className="inline-block w-4 h-4 mr-1 -mt-1"
+                              className="mr-1 -mt-1 inline-block h-4 w-4"
                               fill="currentColor"
                               xmlns="http://www.w3.org/2000/svg"
                               viewBox="0 0 24 24">
@@ -225,10 +225,10 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
                             ) + (location ? "&location=" + location : "")
                           }>
                           <a
-                            className="w-10 h-10 px-3 py-2 mx-2 border rounded-sm border-neutral-200 dark:border-neutral-700 dark:text-white"
+                            className="mx-2 h-10 w-10 rounded-sm border border-neutral-200 px-3 py-2 dark:border-neutral-700 dark:text-white"
                             target="_blank">
                             <svg
-                              className="inline-block w-4 h-4 mr-1 -mt-1"
+                              className="mr-1 -mt-1 inline-block h-4 w-4"
                               fill="currentColor"
                               xmlns="http://www.w3.org/2000/svg"
                               viewBox="0 0 24 24">
@@ -239,14 +239,14 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
                         </Link>
                         <Link href={"data:text/calendar," + eventLink()}>
                           <a
-                            className="w-10 h-10 px-3 py-2 mx-2 border rounded-sm border-neutral-200 dark:border-neutral-700 dark:text-white"
+                            className="mx-2 h-10 w-10 rounded-sm border border-neutral-200 px-3 py-2 dark:border-neutral-700 dark:text-white"
                             download={props.eventType.title + ".ics"}>
                             <svg
                               version="1.1"
                               fill="currentColor"
                               xmlns="http://www.w3.org/2000/svg"
                               viewBox="0 0 1000 1000"
-                              className="inline-block w-4 h-4 mr-1 -mt-1">
+                              className="mr-1 -mt-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>
@@ -256,7 +256,7 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
                     </div>
                   )}
                   {!props.hideBranding && (
-                    <div className="pt-4 text-xs text-center text-gray-400 dark:border-gray-900 dark:text-white">
+                    <div className="pt-4 text-center text-xs text-gray-400 dark:border-gray-900 dark:text-white">
                       <a href="https://cal.com/signup">{t("create_booking_link_with_calcom")}</a>
 
                       <form
@@ -264,12 +264,12 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
                           e.preventDefault();
                           router.push(`https://cal.com/signup?email=` + (e as any).target.email.value);
                         }}
-                        className="flex mt-4">
+                        className="mt-4 flex">
                         <EmailInput
                           name="email"
                           id="email"
                           defaultValue={router.query.email}
-                          className="block w-full text-gray-600 border-gray-300 shadow-sm dark:bg-brand dark:text-brandcontrast dark:border-gray-900 focus:ring-black focus:border-brand sm:text-sm"
+                          className="block w-full border-gray-300 text-gray-600 shadow-sm focus:border-brand focus:ring-black dark:border-gray-900 dark:bg-brand dark:text-brandcontrast sm:text-sm"
                           placeholder="rick.astley@cal.com"
                         />
                         <Button type="submit" className="min-w-max" color="primary">
diff --git a/pages/team/[slug].tsx b/pages/team/[slug].tsx
index c90b9bc424..f79238f3da 100644
--- a/pages/team/[slug].tsx
+++ b/pages/team/[slug].tsx
@@ -32,12 +32,12 @@ function TeamPage({ team }: TeamPageProps) {
       {team.eventTypes.map((type) => (
         <li
           key={type.id}
-          className="relative bg-white border rounded-sm group dark:bg-neutral-900 dark:border-0 dark:hover:border-neutral-600 hover:bg-gray-50 border-neutral-200 hover:border-brand">
-          <ArrowRightIcon className="absolute w-4 h-4 text-black transition-opacity opacity-0 right-3 top-3 dark:text-white group-hover:opacity-100" />
+          className="group relative rounded-sm border border-neutral-200 bg-white hover:border-brand hover:bg-gray-50 dark:border-0 dark:bg-neutral-900 dark:hover:border-neutral-600">
+          <ArrowRightIcon className="absolute right-3 top-3 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
           <Link href={`${team.slug}/${type.slug}`}>
             <a className="flex justify-between px-6 py-4">
               <div className="flex-shrink">
-                <h2 className="font-semibold font-cal text-neutral-900 dark:text-white">{type.title}</h2>
+                <h2 className="font-cal font-semibold text-neutral-900 dark:text-white">{type.title}</h2>
                 <EventTypeDescription className="text-sm" eventType={type} />
               </div>
               <div className="mt-1">
@@ -65,11 +65,11 @@ function TeamPage({ team }: TeamPageProps) {
       <div>
         <HeadSeo title={teamName} description={teamName} />
         <div className="px-4 pt-24 pb-12">
-          <div className="mx-auto mb-8 text-center max-w-96">
+          <div className="mx-auto mb-8 max-w-96 text-center">
             <Avatar
               alt={teamName}
               imageSrc={getPlaceholderAvatar(team.logo, team.name)}
-              className="w-20 h-20 mx-auto mb-4 rounded-full"
+              className="mx-auto mb-4 h-20 w-20 rounded-full"
             />
             <Text variant="largetitle">{teamName}</Text>
             <Text variant="subtitle" className="mt-2">
@@ -78,7 +78,7 @@ function TeamPage({ team }: TeamPageProps) {
           </div>
           {(showMembers.isOn || !team.eventTypes.length) && <Team team={team} />}
           {!showMembers.isOn && team.eventTypes.length > 0 && (
-            <div className="max-w-3xl mx-auto">
+            <div className="mx-auto max-w-3xl">
               {eventTypes}
 
               <div className="relative mt-12">
@@ -86,7 +86,7 @@ function TeamPage({ team }: TeamPageProps) {
                   <div className="w-full border-t border-gray-200 dark:border-gray-900" />
                 </div>
                 <div className="relative flex justify-center">
-                  <span className="px-2 text-sm text-gray-500 bg-gray-100 dark:bg-brand dark:text-brandcontrast">
+                  <span className="bg-gray-100 px-2 text-sm text-gray-500 dark:bg-brand dark:text-brandcontrast">
                     {t("or")}
                   </span>
                 </div>
diff --git a/styles/globals.css b/styles/globals.css
index f6fdee6622..342473f619 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -9,7 +9,7 @@
 
 /* PhoneInput dark-mode overrides (it would add a lot of boilerplate to do this in JavaScript) */
 .PhoneInputInput {
-  @apply text-sm border-0 focus:ring-0;
+  @apply border-0 text-sm focus:ring-0;
 }
 .dark .PhoneInputInput {
   @apply bg-black;
@@ -21,101 +21,101 @@
 /* DateRangePicker */
 .react-daterange-picker > .react-daterange-picker__wrapper {
   /* border consistent with other inputs */
-  @apply px-2 py-1.5 lg:py-1 border-gray-300 rounded-sm sm:text-sm;
+  @apply rounded-sm border-gray-300 px-2 py-1.5 sm:text-sm lg:py-1;
 }
 
 .react-daterange-picker > .react-daterange-picker__wrapper input {
   /* Makes sure the on-focus behaviour is like Cal.com's */
-  @apply rounded-sm focus:ring-primary-500 focus:border-primary-500 h-auto py-0.5 my-0.5;
+  @apply my-0.5 h-auto rounded-sm py-0.5 focus:border-primary-500 focus:ring-primary-500;
 }
 
 /* note(PeerRich): TODO move @layer components into proper React Components: <Button color="primary" size="xs" /> */
 @layer components {
   /* Primary buttons */
   .btn-xs.btn-primary {
-    @apply inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-neutral-900 hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
+    @apply inline-flex items-center rounded border border-transparent bg-neutral-900 px-2.5 py-1.5 text-xs font-medium text-white shadow-sm hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
   }
 
   .btn-sm.btn-primary {
-    @apply inline-flex items-center px-3 py-2 text-sm font-medium leading-4 text-white border border-transparent rounded-sm shadow-sm bg-neutral-900 hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
+    @apply inline-flex items-center rounded-sm border border-transparent bg-neutral-900 px-3 py-2 text-sm font-medium leading-4 text-white shadow-sm hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
   }
 
   .btn.btn-primary {
-    @apply inline-flex items-center px-4 py-2 text-sm font-medium text-white border border-transparent rounded-sm shadow-sm bg-neutral-900 hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
+    @apply inline-flex items-center rounded-sm border border-transparent bg-neutral-900 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
   }
 
   .btn-lg.btn-primary {
-    @apply inline-flex items-center px-4 py-2 text-base font-medium text-white border border-transparent rounded-sm shadow-sm bg-neutral-900 hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
+    @apply inline-flex items-center rounded-sm border border-transparent bg-neutral-900 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
   }
 
   .btn-xl.btn-primary {
-    @apply inline-flex items-center px-6 py-3 text-base font-medium text-white border border-transparent rounded-sm shadow-sm bg-neutral-900 hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
+    @apply inline-flex items-center rounded-sm border border-transparent bg-neutral-900 px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
   }
 
   .btn-wide.btn-primary {
-    @apply w-full px-4 py-2 text-sm font-medium text-center text-white border border-transparent rounded-sm shadow-sm bg-neutral-900 hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
+    @apply w-full rounded-sm border border-transparent bg-neutral-900 px-4 py-2 text-center text-sm font-medium text-white shadow-sm hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
   }
 
   /* Secondary buttons */
   .btn-xs.btn-secondary {
-    @apply inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-neutral-700 bg-neutral-100 hover:bg-neutral-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
+    @apply inline-flex items-center rounded border border-transparent bg-neutral-100 px-2.5 py-1.5 text-xs font-medium text-neutral-700 hover:bg-neutral-200 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
   }
 
   .btn-sm.btn-secondary {
-    @apply inline-flex items-center px-3 py-2 text-sm font-medium leading-4 border border-transparent rounded-sm text-neutral-700 bg-neutral-100 hover:bg-neutral-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
+    @apply inline-flex items-center rounded-sm border border-transparent bg-neutral-100 px-3 py-2 text-sm font-medium leading-4 text-neutral-700 hover:bg-neutral-200 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
   }
 
   .btn.btn-secondary {
-    @apply inline-flex items-center px-4 py-2 text-sm font-medium border border-transparent rounded-sm text-neutral-700 bg-neutral-100 hover:bg-neutral-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
+    @apply inline-flex items-center rounded-sm border border-transparent bg-neutral-100 px-4 py-2 text-sm font-medium text-neutral-700 hover:bg-neutral-200 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
   }
 
   .btn-lg.btn-secondary {
-    @apply inline-flex items-center px-4 py-2 text-base font-medium border border-transparent rounded-sm text-neutral-700 bg-neutral-100 hover:bg-neutral-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
+    @apply inline-flex items-center rounded-sm border border-transparent bg-neutral-100 px-4 py-2 text-base font-medium text-neutral-700 hover:bg-neutral-200 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
   }
 
   .btn-xl.btn-secondary {
-    @apply inline-flex items-center px-6 py-3 text-base font-medium border border-transparent rounded-sm text-neutral-700 bg-neutral-100 hover:bg-neutral-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
+    @apply inline-flex items-center rounded-sm border border-transparent bg-neutral-100 px-6 py-3 text-base font-medium text-neutral-700 hover:bg-neutral-200 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
   }
 
   .btn-wide.btn-secondary {
-    @apply w-full px-4 py-2 text-sm font-medium text-center border border-transparent rounded-sm text-neutral-700 bg-neutral-100 hover:bg-neutral-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
+    @apply w-full rounded-sm border border-transparent bg-neutral-100 px-4 py-2 text-center text-sm font-medium text-neutral-700 hover:bg-neutral-200 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
   }
 
   /* White buttons */
   .btn-xs.btn-white {
-    @apply inline-flex items-center px-2.5 py-1.5 border border-gray-300 shadow-sm text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
+    @apply inline-flex items-center rounded border border-gray-300 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
   }
 
   .btn-sm.btn-white {
-    @apply inline-flex items-center px-3 py-2 text-sm font-medium leading-4 text-gray-700 bg-white border border-gray-300 rounded-sm shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
+    @apply inline-flex items-center rounded-sm border border-gray-300 bg-white px-3 py-2 text-sm font-medium leading-4 text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
   }
 
   .btn.btn-white {
-    @apply inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-sm shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
+    @apply inline-flex items-center rounded-sm border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
   }
 
   .btn-lg.btn-white {
-    @apply inline-flex items-center px-4 py-2 text-base font-medium text-gray-700 bg-white border border-gray-300 rounded-sm shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
+    @apply inline-flex items-center rounded-sm border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
   }
 
   .btn-xl.btn-white {
-    @apply inline-flex items-center px-6 py-3 text-base font-medium text-gray-700 bg-white border border-gray-300 rounded-sm shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
+    @apply inline-flex items-center rounded-sm border border-gray-300 bg-white px-6 py-3 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
   }
 
   .btn-wide.btn-white {
-    @apply w-full px-4 py-2 text-sm font-medium text-center text-gray-700 bg-white border border-gray-300 rounded-sm shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
+    @apply w-full rounded-sm border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
   }
   /* btn icon */
   .btn-icon {
-    @apply p-2 border border-transparent rounded-sm cursor-pointer hover:border-gray-300 text-neutral-500 hover:text-neutral-900;
+    @apply cursor-pointer rounded-sm border border-transparent p-2 text-neutral-500 hover:border-gray-300 hover:text-neutral-900;
   }
   /* slider */
   .slider {
-    @apply relative flex items-center w-40 h-4 select-none;
+    @apply relative flex h-4 w-40 select-none items-center;
   }
 
   .slider > .slider-track {
-    @apply relative flex-grow h-1 rounded-md bg-neutral-400;
+    @apply relative h-1 flex-grow rounded-md bg-neutral-400;
   }
 
   .slider .slider-range {
@@ -123,7 +123,7 @@
   }
 
   .slider .slider-thumb {
-    @apply block w-3 h-3 transition-all rounded-full shadow-sm cursor-pointer bg-neutral-700;
+    @apply block h-3 w-3 cursor-pointer rounded-full bg-neutral-700 shadow-sm transition-all;
   }
 
   .slider .slider-thumb:hover {
@@ -175,12 +175,12 @@
 }
 
 .react-multi-email > [type="text"] {
-  @apply block w-full border-gray-300 rounded-md shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-black focus:border-brand sm:text-sm;
+  @apply block w-full rounded-md border-gray-300 shadow-sm focus:border-brand focus:ring-black dark:border-gray-900 dark:bg-gray-700 dark:text-white sm:text-sm;
 }
 
 .react-multi-email [data-tag] {
   box-shadow: none !important;
-  @apply inline-flex items-center px-2 py-1 my-1 ltr:mr-2 rtl:ml-2 text-sm font-medium text-gray-900 border border-transparent rounded-md dark:text-white bg-neutral-200 hover:bg-neutral-100 dark:bg-brand focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
+  @apply my-1 inline-flex items-center rounded-md border border-transparent bg-neutral-200 px-2 py-1 text-sm font-medium text-gray-900 hover:bg-neutral-100 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2 ltr:mr-2 rtl:ml-2 dark:bg-brand dark:text-white;
 }
 
 .react-multi-email > span[data-placeholder] {
@@ -208,7 +208,7 @@
 }
 
 .react-multi-email [data-tag] {
-  @apply inline-flex items-center px-2 py-1 my-1 ltr:mr-2 rtl:ml-2 text-sm font-medium text-gray-900 border border-transparent rounded-md shadow-sm dark:text-white bg-neutral-200 hover:bg-neutral-100 dark:bg-neutral-900 dark:hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
+  @apply my-1 inline-flex items-center rounded-md border border-transparent bg-neutral-200 px-2 py-1 text-sm font-medium text-gray-900 shadow-sm hover:bg-neutral-100 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2 ltr:mr-2 rtl:ml-2 dark:bg-neutral-900 dark:text-white dark:hover:bg-neutral-700;
 }
 
 .react-multi-email [data-tag] [data-tag-item] {
@@ -337,15 +337,15 @@
 }
 
 nav#nav--settings > a {
-  @apply flex items-center px-3 py-2 text-sm font-medium text-gray-900 border-l-4 border-transparent hover:bg-gray-50 hover:text-gray-900;
+  @apply flex items-center border-l-4 border-transparent px-3 py-2 text-sm font-medium text-gray-900 hover:bg-gray-50 hover:text-gray-900;
 }
 
 nav#nav--settings > a svg {
-  @apply flex-shrink-0 w-6 h-6 mr-3 -ml-1 text-gray-400 group-hover:text-gray-500;
+  @apply mr-3 -ml-1 h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500;
 }
 
 nav#nav--settings > a.active {
-  @apply bg-neutral-50 border-neutral-500 text-neutral-700 hover:bg-neutral-50 hover:text-neutral-700;
+  @apply border-neutral-500 bg-neutral-50 text-neutral-700 hover:bg-neutral-50 hover:text-neutral-700;
 }
 
 nav#nav--settings > a.active svg {
diff --git a/yarn.lock b/yarn.lock
index d4b3802a55..1f033f8b84 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9437,6 +9437,11 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
+prettier-plugin-tailwindcss@^0.1.6:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.1.6.tgz#a086682c16ba51629d068a3eb153662be5987e52"
+  integrity sha512-7OcFAv6d41KV61cDdn+mZycddAXQhv/B2yfA7ooK/yXPnBJf51Lx7iODOOQwOoMzSJQ/MJNqlK3BxqT9gDKVLA==
+
 prettier@^2.3.2:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.4.1.tgz#671e11c89c14a4cfc876ce564106c4a6726c9f5c"