diff --git a/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/RouteBuilder.tsx b/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/RouteBuilder.tsx
index fc444f9153749d..37c16be0d9b225 100644
--- a/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/RouteBuilder.tsx
+++ b/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/RouteBuilder.tsx
@@ -361,6 +361,8 @@ type RouteActionSelectorProps = {
   fieldIdentifiers?: string[];
 };
 
+const EMPTY_FIELD_IDENTIFIERS: string[] = [];
+
 const RouteActionSelector = ({
   action,
   onActionChange,
@@ -373,7 +375,7 @@ const RouteActionSelector = ({
   customEventTypeSlug = "",
   onCustomEventTypeSlugChange,
   eventTypePrefix = "",
-  fieldIdentifiers = [],
+  fieldIdentifiers = EMPTY_FIELD_IDENTIFIERS,
 }: RouteActionSelectorProps) => {
   const { t } = useLocale();
   return (
diff --git a/apps/web/app/(use-page-wrapper)/payment/[uid]/PaymentPage.tsx b/apps/web/app/(use-page-wrapper)/payment/[uid]/PaymentPage.tsx
index 71367a72a882ad..3f973d11330ae4 100644
--- a/apps/web/app/(use-page-wrapper)/payment/[uid]/PaymentPage.tsx
+++ b/apps/web/app/(use-page-wrapper)/payment/[uid]/PaymentPage.tsx
@@ -58,8 +58,8 @@ const BtcpayPaymentComponent = dynamic(
 
 const PaymentPage: FC<PaymentPageProps> = (props) => {
   const { t, i18n } = useLocale();
-  const [is24h, setIs24h] = useState(isBrowserLocale24h());
-  const [date, setDate] = useState(dayjs.utc(props.booking.startTime));
+  const [is24h, setIs24h] = useState(() => isBrowserLocale24h());
+  const [date, setDate] = useState(() => dayjs.utc(props.booking.startTime));
   const [timezone, setTimezone] = useState<string | null>(null);
   useTheme(props.profile.theme);
   const isEmbed = useIsEmbed();
diff --git a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/AdvancedPermissionGroup.tsx b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/AdvancedPermissionGroup.tsx
index 676bd0fb0aa6a5..1f718a174bfd80 100644
--- a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/AdvancedPermissionGroup.tsx
+++ b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/AdvancedPermissionGroup.tsx
@@ -97,7 +97,7 @@ export function AdvancedPermissionGroup({
             setIsExpanded(!isExpanded);
           }
         }}>
-        <div className="flex items-center gap-1.5" onClick={() => setIsExpanded(!isExpanded)}>
+        <div role="presentation" className="flex items-center gap-1.5" onClick={() => setIsExpanded(!isExpanded)}>
           <ChevronRightIcon
             className={classNames(
               "h-4 w-4 transition-transform",
@@ -113,11 +113,13 @@ export function AdvancedPermissionGroup({
             disabled={disabled}
           />
           <span
+            role="presentation"
             className="text-default cursor-pointer text-sm font-medium leading-none"
             onClick={() => setIsExpanded(!isExpanded)}>
             {t(resourceConfig?._resource?.i18nKey || "")}
           </span>
           <span
+            role="presentation"
             className="text-muted cursor-pointer text-sm font-medium leading-none"
             onClick={() => setIsExpanded(!isExpanded)}>
             {t("all_permissions")}
@@ -126,8 +128,9 @@ export function AdvancedPermissionGroup({
       </button>
       {isExpanded && !isAllResources && (
         <div
+          role="presentation"
           className="bg-default border-muted m-1 flex flex-col gap-2.5 rounded-xl border p-3"
-          onClick={(e) => e.stopPropagation()} // Stop clicks in the permission list from affecting parent
+          onClick={(e) => e.stopPropagation()}
         >
           {resourceConfig &&
             Object.entries(resourceConfig).map(([action, actionConfig]) => {
@@ -155,8 +158,9 @@ export function AdvancedPermissionGroup({
                     disabled={disabled}
                   />
                   <div
+                    role="presentation"
                     className="flex items-center gap-2"
-                    onClick={(e) => e.stopPropagation()} // Stop label clicks from affecting parent
+                    onClick={(e) => e.stopPropagation()}
                   >
                     <Label htmlFor={permission} className="mb-0">
                       <span className={classNames(isAutoEnabled && "text-muted-foreground")}>
diff --git a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/FingerprintAnimation.tsx b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/FingerprintAnimation.tsx
index da28eb661f9d74..83c300e5ae0960 100644
--- a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/FingerprintAnimation.tsx
+++ b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/FingerprintAnimation.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { motion } from "framer-motion";
+import { LazyMotion, domAnimation, m } from "framer-motion";
 
 interface FingerprintAnimationProps {
   isHovered: boolean;
@@ -8,6 +8,7 @@ interface FingerprintAnimationProps {
 
 export function FingerprintAnimation({ isHovered }: FingerprintAnimationProps) {
   return (
+    <LazyMotion features={domAnimation}>
     <div className="size-32 relative mx-auto flex aspect-square rounded-full border before:absolute before:-inset-2 before:rounded-full before:border dark:border-white/10 dark:before:border-white/5">
       <svg className="m-auto h-fit w-24" viewBox="0 0 212 143" fill="none" xmlns="http://www.w3.org/2000/svg">
         {/*Fingerprint*/}
@@ -25,7 +26,7 @@ export function FingerprintAnimation({ isHovered }: FingerprintAnimationProps) {
         </g>
 
         {/* Animated scanning line */}
-        <motion.path
+        <m.path
           className="text-emphasis"
           d="M48 0H164"
           stroke="currentColor"
@@ -59,5 +60,6 @@ export function FingerprintAnimation({ isHovered }: FingerprintAnimationProps) {
         </defs>
       </svg>
     </div>
+    </LazyMotion>
   );
 }
diff --git a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/RoleColorPicker.tsx b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/RoleColorPicker.tsx
index 9f8daada102834..5cd94ac7493c71 100644
--- a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/RoleColorPicker.tsx
+++ b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/RoleColorPicker.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useRef, useState } from "react";
+import { useRef } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
@@ -12,13 +12,10 @@ export interface RoleColorPickerProps {
 
 export default function RoleColorPicker({ value, onChange, disabled }: RoleColorPickerProps) {
   const { t } = useLocale();
-  const [, setCustomColor] = useState(value);
   const colorInputRef = useRef<HTMLInputElement>(null);
 
   const handleCustomColorChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newColor = e.target.value;
-    setCustomColor(newColor);
-    onChange(newColor);
+    onChange(e.target.value);
   };
 
   const handleColorSquareClick = () => {
diff --git a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/RolesList.tsx b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/RolesList.tsx
index df3a8d2eaf922e..11aab02a327d29 100644
--- a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/RolesList.tsx
+++ b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/RolesList.tsx
@@ -139,13 +139,21 @@ function RoleItem({
 
   return (
     <div
+      role="button"
+      tabIndex={0}
       className={classNames(
         "border-subtle flex p-3",
         (canUpdate && role.type !== "SYSTEM") || role.type === "SYSTEM"
           ? "hover:bg-subtle cursor-pointer"
           : ""
       )}
-      onClick={onClick}>
+      onClick={onClick}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick();
+        }
+      }}>
       <div className="flex w-full items-center gap-3 truncate">
         {/* Icon */}
         <div className="flex items-center justify-center">
@@ -161,7 +169,7 @@ function RoleItem({
         </Badge>
 
         {showDropdown && (
-          <div className="ml-auto" onClick={(e) => e.stopPropagation()}>
+          <div role="presentation" className="ml-auto" onClick={(e) => e.stopPropagation()}>
             <Dropdown>
               <DropdownMenuTrigger asChild>
                 <Button variant="icon" color="secondary" StartIcon="ellipsis" />
diff --git a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/teams/[id]/roles/page.tsx b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/teams/[id]/roles/page.tsx
index 1568df8f48fd8d..d44b9f826b6318 100644
--- a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/teams/[id]/roles/page.tsx
+++ b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/teams/[id]/roles/page.tsx
@@ -95,9 +95,13 @@ const Page = async ({
   params: Promise<{ id: string }>;
   searchParams: Record<string, string | string[] | undefined>;
 }) => {
-  const t = await getTranslate();
-  const session = await getServerSession({ req: buildLegacyRequest(await headers(), await cookies()) });
-  const { id: teamId } = await params;
+  const [t, session, { id: teamId }] = await Promise.all([
+    getTranslate(),
+    Promise.all([headers(), cookies()]).then(([h, c]) =>
+      getServerSession({ req: buildLegacyRequest(h, c) })
+    ),
+    params,
+  ]);
 
   if (!session?.user?.id) {
     return notFound();
diff --git a/apps/web/app/(use-page-wrapper)/workflow/new/page.tsx b/apps/web/app/(use-page-wrapper)/workflow/new/page.tsx
index 6555cf19d8b015..76bdd86c4e20e6 100644
--- a/apps/web/app/(use-page-wrapper)/workflow/new/page.tsx
+++ b/apps/web/app/(use-page-wrapper)/workflow/new/page.tsx
@@ -91,6 +91,7 @@ const Page = async ({ searchParams }: PageProps) => {
 
   const template = WORKFLOW_TEMPLATES[templateWorkflowId as keyof typeof WORKFLOW_TEMPLATES];
 
+  let redirectTarget: string;
   try {
     const workflow: Workflow = await prisma.workflow.create({
       data: {
@@ -116,23 +117,13 @@ const Page = async ({ searchParams }: PageProps) => {
       },
     });
 
-    const redirectUrl = `/workflows/${workflow.id}?autoCreateAgent=true&templateWorkflowId=${templateWorkflowId}`;
-
-    redirect(redirectUrl);
+    redirectTarget = `/workflows/${workflow.id}?autoCreateAgent=true&templateWorkflowId=${templateWorkflowId}`;
   } catch (error) {
-    if (
-      error &&
-      typeof error === "object" &&
-      "digest" in error &&
-      typeof error.digest === "string" &&
-      error.digest.startsWith("NEXT_REDIRECT")
-    ) {
-      throw error;
-    }
-
     console.error("Failed to create Cal.ai workflow:", error);
-    redirect("/workflows?error=failed-to-create-workflow");
+    redirectTarget = "/workflows?error=failed-to-create-workflow";
   }
+
+  redirect(redirectTarget);
 };
 
 export default Page;
diff --git a/apps/web/app/SpeculationRules.tsx b/apps/web/app/SpeculationRules.tsx
index 5d1d755c26511c..06ab23fd8e4bf2 100644
--- a/apps/web/app/SpeculationRules.tsx
+++ b/apps/web/app/SpeculationRules.tsx
@@ -1,8 +1,11 @@
 import Script from "next/script";
 
+const EMPTY_PREFETCH_PATHS: string[] = [];
+const EMPTY_PRERENDER_PATHS: string[] = [];
+
 export function SpeculationRules({
-  prefetchPathsOnHover = [],
-  prerenderPathsOnHover = [],
+  prefetchPathsOnHover = EMPTY_PREFETCH_PATHS,
+  prerenderPathsOnHover = EMPTY_PRERENDER_PATHS,
 }: {
   prefetchPathsOnHover?: string[];
   prerenderPathsOnHover?: string[];
diff --git a/apps/web/app/global-error.tsx b/apps/web/app/global-error.tsx
index 2f957c05a31bab..4338d5e258e174 100644
--- a/apps/web/app/global-error.tsx
+++ b/apps/web/app/global-error.tsx
@@ -12,7 +12,7 @@ export const GlobalError: NextPage<ErrorProps> = (props) => {
     Sentry.captureException(props.error);
   }, [props.error]);
   return (
-    <html>
+    <html lang="en">
       <body>
         <CustomError {...props} />
       </body>
diff --git a/apps/web/components/apps/AppPage.tsx b/apps/web/components/apps/AppPage.tsx
index ca85f883b12732..bc48af74d5471e 100644
--- a/apps/web/components/apps/AppPage.tsx
+++ b/apps/web/components/apps/AppPage.tsx
@@ -322,7 +322,7 @@ export const AppPage = ({
                 <div
                   key={`iframe-${index}`}
                   className="mr-4 max-h-full min-h-[315px] min-w-[90%] max-w-full snap-center overflow-hidden rounded-md last:mb-0 lg:mb-4 lg:mr-0 [&_iframe]:h-full [&_iframe]:min-h-[315px] [&_iframe]:w-full">
-                  <iframe allowFullScreen {...descriptionItem.iframe} />
+                  <iframe allowFullScreen title="App content" {...descriptionItem.iframe} />
                 </div>
               ) : (
                 // eslint-disable-next-line @next/next/no-img-element -- external app screenshots with unknown dimensions
diff --git a/apps/web/components/apps/installation/AccountsStepCard.tsx b/apps/web/components/apps/installation/AccountsStepCard.tsx
index 9948d8a354a3a0..52f077705f2f17 100644
--- a/apps/web/components/apps/installation/AccountsStepCard.tsx
+++ b/apps/web/components/apps/installation/AccountsStepCard.tsx
@@ -41,6 +41,8 @@ const AccountSelector: FC<AccountSelectorProps> = ({
   const [selected, setSelected] = useState(false);
   return (
     <div
+      role="button"
+      tabIndex={0}
       className={classNames(
         "hover:bg-cal-muted flex cursor-pointer flex-row items-center gap-2 p-1",
         (alreadyInstalled || loading) && "cursor-not-allowed",
@@ -52,6 +54,15 @@ const AccountSelector: FC<AccountSelectorProps> = ({
           setSelected(true);
           onClick();
         }
+      }}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          if (!alreadyInstalled && !loading && onClick) {
+            setSelected(true);
+            onClick();
+          }
+        }
       }}>
       <Avatar
         alt={avatar || ""}
diff --git a/apps/web/components/apps/installation/ConfigureStepCard.tsx b/apps/web/components/apps/installation/ConfigureStepCard.tsx
index bddc23e9653bb1..f45b03c2638465 100644
--- a/apps/web/components/apps/installation/ConfigureStepCard.tsx
+++ b/apps/web/components/apps/installation/ConfigureStepCard.tsx
@@ -203,7 +203,7 @@ const ConfigureStepCardContent: FC<ConfigureStepCardProps> = (props) => {
 
   const mainForSubmitRef = useRef<HTMLButtonElement>(null);
   const [updatedEventTypesStatus, setUpdatedEventTypesStatus] = useState<TUpdatedEventTypesStatus>(
-    eventTypeGroups.reduce((arr: Array<{ id: number; updated: boolean }[]>, field) => {
+    () => eventTypeGroups.reduce((arr: Array<{ id: number; updated: boolean }[]>, field) => {
       const selectedEventTypes = field.eventTypes
         .filter((eventType) => eventType.selected)
         .map((eventType) => ({ id: eventType.id as number, updated: false }));
diff --git a/apps/web/components/apps/installation/EventTypeConferencingAppSettings.tsx b/apps/web/components/apps/installation/EventTypeConferencingAppSettings.tsx
index 4354f43049e799..47dbf31be8978d 100644
--- a/apps/web/components/apps/installation/EventTypeConferencingAppSettings.tsx
+++ b/apps/web/components/apps/installation/EventTypeConferencingAppSettings.tsx
@@ -68,18 +68,18 @@ const LocationsWrapper = ({
   );
 };
 
+const SkeletonLoader = () => {
+  return (
+    <SkeletonContainer>
+      <SkeletonText className="my-2 h-8 w-full" />
+    </SkeletonContainer>
+  );
+};
+
 const EventTypeConferencingAppSettings = ({ eventType, slug }: { eventType: TEventType; slug: string }) => {
   const locationsQuery = trpc.viewer.apps.locationOptions.useQuery({});
   const { t } = useLocale();
 
-  const SkeletonLoader = () => {
-    return (
-      <SkeletonContainer>
-        <SkeletonText className="my-2 h-8 w-full" />
-      </SkeletonContainer>
-    );
-  };
-
   return (
     <QueryCell
       query={locationsQuery}
diff --git a/apps/web/components/apps/installation/EventTypesStepCard.tsx b/apps/web/components/apps/installation/EventTypesStepCard.tsx
index 3ca294eb8b750d..94614f5f4266f7 100644
--- a/apps/web/components/apps/installation/EventTypesStepCard.tsx
+++ b/apps/web/components/apps/installation/EventTypesStepCard.tsx
@@ -47,6 +47,7 @@ const EventTypeCard: FC<EventTypeCardProps> = ({
       : [length];
   return (
     <div
+      role="presentation"
       data-testid={`select-event-type-${id}`}
       className="hover:bg-cal-muted min-h-20 box-border flex w-full cursor-pointer select-none items-center space-x-4 px-4 py-3"
       onClick={() => handleSelect()}>
diff --git a/apps/web/components/apps/routing-forms/Header.tsx b/apps/web/components/apps/routing-forms/Header.tsx
index f301ac73c45289..2595d03163ae59 100644
--- a/apps/web/components/apps/routing-forms/Header.tsx
+++ b/apps/web/components/apps/routing-forms/Header.tsx
@@ -284,13 +284,20 @@ export function Header({
               onKeyDown={handleKeyDown}
               onBlur={handleTitleSubmit}
               className="text-default h-auto w-full whitespace-nowrap border-none p-0 text-sm font-semibold leading-none focus:ring-0"
-              autoFocus
             />
           ) : (
             <div className="group flex items-center gap-1">
               <span
+                role="button"
+                tabIndex={0}
                 className="text-default hover:bg-cal-muted min-w-0 cursor-pointer truncate whitespace-nowrap rounded px-1 text-sm font-semibold leading-none"
-                onClick={() => setIsEditing(true)}>
+                onClick={() => setIsEditing(true)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    setIsEditing(true);
+                  }
+                }}>
                 {watchedName || "Loading..."}
               </span>
               <Button
diff --git a/apps/web/components/apps/routing-forms/SingleForm.tsx b/apps/web/components/apps/routing-forms/SingleForm.tsx
index 2414a94aac897a..84c5ed8d5156ba 100644
--- a/apps/web/components/apps/routing-forms/SingleForm.tsx
+++ b/apps/web/components/apps/routing-forms/SingleForm.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence, LazyMotion, domAnimation, m } from "framer-motion";
 import { useEffect, useState } from "react";
 import { useFormContext } from "react-hook-form";
 import type { UseFormReturn } from "react-hook-form";
@@ -165,7 +165,7 @@ function SingleForm({
   };
 
   return (
-    <>
+    <LazyMotion features={domAnimation}>
       <Form form={hookForm} handleSubmit={handleSubmit}>
         <FormActionsProvider
           appUrl={appUrl}
@@ -190,12 +190,12 @@ function SingleForm({
                 !isDesktop && "flex flex-col"
               )}>
               {isDesktop ? (
-                <motion.div
+                <m.div
                   layout
                   className="mx-auto w-full max-w-4xl px-3 lg:px-4 xl:px-0"
                   transition={{ duration: 0.3, ease: "easeInOut" }}>
                   <Page hookForm={hookForm} form={form} appUrl={appUrl} />
-                </motion.div>
+                </m.div>
               ) : (
                 <div className="mx-auto w-full max-w-4xl px-2">
                   <Page hookForm={hookForm} form={form} appUrl={appUrl} />
@@ -203,7 +203,7 @@ function SingleForm({
               )}
               <AnimatePresence>
                 {isTestPreviewOpen && isDesktop ? (
-                  <motion.div
+                  <m.div
                     initial={{ opacity: 0, x: 20 }}
                     animate={{ opacity: 1, x: 0 }}
                     exit={{ opacity: 0, x: 20 }}
@@ -214,7 +214,7 @@ function SingleForm({
                       isTestPreviewOpen={isTestPreviewOpen}
                       setIsTestPreviewOpen={setIsTestPreviewOpen}
                     />
-                  </motion.div>
+                  </m.div>
                 ) : isTestPreviewOpen ? (
                   <div>
                     <TestFormRenderer
@@ -242,7 +242,7 @@ function SingleForm({
           />
         )}
       </Form>
-    </>
+    </LazyMotion>
   );
 }
 
diff --git a/apps/web/components/apps/routing-forms/TestForm.tsx b/apps/web/components/apps/routing-forms/TestForm.tsx
index a552196b826646..02916ebe71b7b8 100644
--- a/apps/web/components/apps/routing-forms/TestForm.tsx
+++ b/apps/web/components/apps/routing-forms/TestForm.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence, LazyMotion, domAnimation, m } from "framer-motion";
 import type { Dispatch, SetStateAction } from "react";
 import { useState, useMemo } from "react";
 
@@ -50,7 +50,7 @@ const FormView = ({
 }) => {
   const { t } = useLocale();
   return (
-    <motion.div
+    <m.div
       initial={{ opacity: 0, x: -20 }}
       animate={{ opacity: 1, x: 0 }}
       exit={{ opacity: 0, x: 20 }}
@@ -71,7 +71,7 @@ const FormView = ({
       ) : (
         renderFooter(onClose, onSubmit, areRequiredFieldsFilled)
       )}
-    </motion.div>
+    </m.div>
   );
 };
 
@@ -198,6 +198,7 @@ export const TestForm = ({
     });
 
   return (
+    <LazyMotion features={domAnimation}>
     <div>
       <AnimatePresence mode="wait">
         {!showResults ? (
@@ -315,6 +316,7 @@ export const TestForm = ({
         )}
       </AnimatePresence>
     </div>
+    </LazyMotion>
   );
 };
 
diff --git a/apps/web/components/auth/TwoFactor.tsx b/apps/web/components/auth/TwoFactor.tsx
index 096145a99b5928..6571e41e71c029 100644
--- a/apps/web/components/auth/TwoFactor.tsx
+++ b/apps/web/components/auth/TwoFactor.tsx
@@ -1,27 +1,27 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import useDigitInput from "react-digit-input";
 import { useFormContext } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Input, Label } from "@calcom/ui/components/form";
 
-export default function TwoFactor({ center = true, autoFocus = true }) {
-  const [value, onChange] = useState("");
+export default function TwoFactor({ center = true }) {
+  const [value, setValue] = useState("");
   const { t } = useLocale();
   const methods = useFormContext();
 
+  const handleDigitChange = (newValue: string) => {
+    setValue(newValue);
+    if (newValue) methods.setValue("totpCode", newValue);
+  };
+
   const digits = useDigitInput({
     acceptedCharacters: /^[0-9]$/,
     length: 6,
     value,
-    onChange,
+    onChange: handleDigitChange,
   });
 
-  useEffect(() => {
-    if (value) methods.setValue("totpCode", value);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value]);
-
   const className = "h-12 w-12 text-xl! text-center";
 
   return (
@@ -40,7 +40,6 @@ export default function TwoFactor({ center = true, autoFocus = true }) {
             name={`2fa${index + 1}`}
             inputMode="decimal"
             {...digit}
-            autoFocus={autoFocus && index === 0}
             autoComplete="one-time-code"
           />
         ))}
diff --git a/apps/web/components/booking/BookingListItem.tsx b/apps/web/components/booking/BookingListItem.tsx
index 1c3ca971c79864..82175623e4c45e 100644
--- a/apps/web/components/booking/BookingListItem.tsx
+++ b/apps/web/components/booking/BookingListItem.tsx
@@ -136,6 +136,15 @@ const ConditionalLink = ({
   );
 };
 
+const RequestSentMessage = () => {
+  const { t } = useLocale();
+  return (
+    <Badge startIcon="send" size="md" variant="gray" data-testid="request_reschedule_sent">
+      {t("reschedule_request_sent")}
+    </Badge>
+  );
+};
+
 function BookingListItem(booking: BookingItemProps) {
   const parsedBooking = buildParsedBooking(booking);
   const itemRef = useRef<HTMLDivElement>(null);
@@ -239,14 +248,6 @@ function BookingListItem(booking: BookingItemProps) {
     t,
   } as BookingActionContext;
 
-  const RequestSentMessage = () => {
-    return (
-      <Badge startIcon="send" size="md" variant="gray" data-testid="request_reschedule_sent">
-        {t("reschedule_request_sent")}
-      </Badge>
-    );
-  };
-
   const bookingYear = dayjs(booking.startTime).year();
   const currentYear = dayjs().year();
   const isDifferentYear = bookingYear !== currentYear;
@@ -1095,7 +1096,7 @@ const DisplayAttendees = ({
   attendees.sort((a, b) => a.id - b.id);
 
   return (
-    <div className="text-emphasis text-sm" onClick={(e) => e.stopPropagation()}>
+    <div role="presentation" className="text-emphasis text-sm" onClick={(e) => e.stopPropagation()}>
       {user && (
         <FirstAttendee user={user} currentEmail={currentEmail} hideOrganizerEmail={hideOrganizerEmail} />
       )}
diff --git a/apps/web/components/booking/actions/BookingActionsDropdown.tsx b/apps/web/components/booking/actions/BookingActionsDropdown.tsx
index d6c16111d80465..19d40e9f0b2d7f 100644
--- a/apps/web/components/booking/actions/BookingActionsDropdown.tsx
+++ b/apps/web/components/booking/actions/BookingActionsDropdown.tsx
@@ -64,6 +64,84 @@ interface BookingActionsDropdownProps {
   context: "list" | "details";
 }
 
+const NoShowAttendeesDialog = ({
+  bookingUid,
+  attendees,
+  setIsOpen,
+  isOpen,
+}: {
+  bookingUid: string;
+  attendees: Array<{
+    name: string;
+    email: string;
+    id: number;
+    noShow: boolean;
+    phoneNumber: string | null;
+  }>;
+  setIsOpen: (open: boolean) => void;
+  isOpen: boolean;
+}) => {
+  const { t } = useLocale();
+  const utils = trpc.useUtils();
+  const [noShowAttendees, setNoShowAttendees] = useState<
+    Array<{
+      email: string;
+      noShow: boolean;
+    }>
+  >(() => attendees.map((attendee) => ({ email: attendee.email, noShow: attendee.noShow })));
+
+  const noShowMutation = trpc.viewer.loggedInViewerRouter.markNoShow.useMutation({
+    onSuccess: async (data) => {
+      showToast(data.message, "success");
+      setIsOpen(false);
+      await utils.viewer.bookings.invalidate();
+    },
+    onError: (err) => {
+      showToast(err.message, "error");
+    },
+  });
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogContent title={t("mark_as_no_show")} enableOverflow>
+        <div className="stack-y-2">
+          {attendees.map((attendee, index) => (
+            <label key={attendee.email} className="flex items-center space-x-2">
+              <input
+                type="checkbox"
+                checked={noShowAttendees[index]?.noShow || false}
+                onChange={(e) => {
+                  const newNoShowAttendees = [...noShowAttendees];
+                  newNoShowAttendees[index] = {
+                    email: attendee.email,
+                    noShow: e.target.checked,
+                  };
+                  setNoShowAttendees(newNoShowAttendees);
+                }}
+              />
+              <span>
+                {attendee.name} ({attendee.email})
+              </span>
+            </label>
+          ))}
+        </div>
+        <DialogFooter>
+          <DialogClose />
+          <Button
+            onClick={() => {
+              noShowMutation.mutate({
+                bookingUid,
+                attendees: noShowAttendees,
+              });
+            }}>
+            {t("confirm")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
 export function BookingActionsDropdown({
   booking,
   size = "base",
@@ -333,82 +411,6 @@ export function BookingActionsDropdown({
     onClick: () => setIsOpenReportDialog(true),
   };
 
-  const NoShowAttendeesDialog = ({
-    bookingUid,
-    attendees,
-    setIsOpen,
-    isOpen,
-  }: {
-    bookingUid: string;
-    attendees: Array<{
-      name: string;
-      email: string;
-      id: number;
-      noShow: boolean;
-      phoneNumber: string | null;
-    }>;
-    setIsOpen: (open: boolean) => void;
-    isOpen: boolean;
-  }) => {
-    const [noShowAttendees, setNoShowAttendees] = useState<
-      Array<{
-        email: string;
-        noShow: boolean;
-      }>
-    >(attendees.map((attendee) => ({ email: attendee.email, noShow: attendee.noShow })));
-
-    const noShowMutation = trpc.viewer.loggedInViewerRouter.markNoShow.useMutation({
-      onSuccess: async (data) => {
-        showToast(data.message, "success");
-        setIsOpen(false);
-        await utils.viewer.bookings.invalidate();
-      },
-      onError: (err) => {
-        showToast(err.message, "error");
-      },
-    });
-
-    return (
-      <Dialog open={isOpen} onOpenChange={setIsOpen}>
-        <DialogContent title={t("mark_as_no_show")} enableOverflow>
-          <div className="stack-y-2">
-            {attendees.map((attendee, index) => (
-              <label key={attendee.email} className="flex items-center space-x-2">
-                <input
-                  type="checkbox"
-                  checked={noShowAttendees[index]?.noShow || false}
-                  onChange={(e) => {
-                    const newNoShowAttendees = [...noShowAttendees];
-                    newNoShowAttendees[index] = {
-                      email: attendee.email,
-                      noShow: e.target.checked,
-                    };
-                    setNoShowAttendees(newNoShowAttendees);
-                  }}
-                />
-                <span>
-                  {attendee.name} ({attendee.email})
-                </span>
-              </label>
-            ))}
-          </div>
-          <DialogFooter>
-            <DialogClose />
-            <Button
-              onClick={() => {
-                noShowMutation.mutate({
-                  bookingUid,
-                  attendees: noShowAttendees,
-                });
-              }}>
-              {t("confirm")}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    );
-  };
-
   const parsedBooking = {
     ...booking,
     eventType: booking.eventType.id ? booking.eventType : null,
diff --git a/apps/web/components/dialog/RerouteDialog.tsx b/apps/web/components/dialog/RerouteDialog.tsx
index e043ff2ae7b099..f1f05454208536 100644
--- a/apps/web/components/dialog/RerouteDialog.tsx
+++ b/apps/web/components/dialog/RerouteDialog.tsx
@@ -644,12 +644,12 @@ const NewRoutingManager = ({
       <div>
         <span className="text-attention">
           <span>Continue with rerouting in the new</span>{" "}
-          <a
-            href="javascript:void(0)"
+          <button
+            type="button"
             className="text-attention underline"
             onClick={() => reroutingState.value?.reschedulerWindow?.focus()}>
             tab
-          </a>
+          </button>
         </span>
       </div>
     );
@@ -740,6 +740,48 @@ const RerouteDialogContentAndFooter = ({
   );
 };
 
+const RerouteDialogFooter = ({
+  reroutingState,
+  setIsOpenDialog,
+  verifyRoute,
+}: {
+  reroutingState: { status: ReroutingStatusEnum };
+  setIsOpenDialog: (value: boolean) => void;
+  verifyRoute: () => void;
+}) => {
+  const { t } = useLocale();
+
+  if (reroutingState.status !== ReroutingStatusEnum.REROUTING_COMPLETE) {
+    return (
+      <DialogFooter>
+        <Button color="secondary" onClick={() => setIsOpenDialog(false)}>
+          {t("cancel")}
+        </Button>
+        <Button
+          onClick={verifyRoute}
+          data-testid="verify-new-route-button"
+          disabled={reroutingState.status === ReroutingStatusEnum.REROUTING_IN_PROGRESS}>
+          {t("verify_new_route")}
+        </Button>
+      </DialogFooter>
+    );
+  }
+
+  if (reroutingState.status === ReroutingStatusEnum.REROUTING_COMPLETE) {
+    return (
+      <DialogFooter>
+        <Button
+          onClick={() => {
+            setIsOpenDialog(false);
+          }}>
+          {t("close")}
+        </Button>
+      </DialogFooter>
+    );
+  }
+  return null;
+};
+
 const RerouteDialogContentAndFooterWithFormResponse = ({
   responseWithForm,
   booking,
@@ -832,41 +874,13 @@ const RerouteDialogContentAndFooterWithFormResponse = ({
           )}
         </div>
       </div>
-      {renderFooter()}
+      <RerouteDialogFooter
+        reroutingState={reroutingState}
+        setIsOpenDialog={setIsOpenDialog}
+        verifyRoute={verifyRoute}
+      />
     </div>
   );
-
-  function renderFooter() {
-    if (reroutingState.status !== ReroutingStatusEnum.REROUTING_COMPLETE) {
-      return (
-        <DialogFooter>
-          <Button color="secondary" onClick={() => setIsOpenDialog(false)}>
-            {t("cancel")}
-          </Button>
-          <Button
-            onClick={verifyRoute}
-            data-testid="verify-new-route-button"
-            disabled={reroutingState.status === ReroutingStatusEnum.REROUTING_IN_PROGRESS}>
-            {t("verify_new_route")}
-          </Button>
-        </DialogFooter>
-      );
-    }
-
-    if (reroutingState.status === ReroutingStatusEnum.REROUTING_COMPLETE) {
-      return (
-        <DialogFooter>
-          <Button
-            onClick={() => {
-              setIsOpenDialog(false);
-            }}>
-            {t("close")}
-          </Button>
-        </DialogFooter>
-      );
-    }
-    return null;
-  }
 };
 
 export const RerouteDialog = ({ isOpenDialog, setIsOpenDialog, booking }: RerouteDialogProps) => {
diff --git a/apps/web/components/notification-sound-handler.tsx b/apps/web/components/notification-sound-handler.tsx
index b052dab08ccebe..1f555bdfca8d17 100644
--- a/apps/web/components/notification-sound-handler.tsx
+++ b/apps/web/components/notification-sound-handler.tsx
@@ -133,7 +133,7 @@ export function NotificationSoundHandler() {
     };
 
     document.addEventListener("click", handleFirstInteraction);
-    document.addEventListener("touchstart", handleFirstInteraction);
+    document.addEventListener("touchstart", handleFirstInteraction, { passive: true });
 
     return () => {
       document.removeEventListener("click", handleFirstInteraction);
diff --git a/apps/web/components/security/TwoFactorAuthSection.tsx b/apps/web/components/security/TwoFactorAuthSection.tsx
index 59928e33be2dab..e7bba0d25a0c4c 100644
--- a/apps/web/components/security/TwoFactorAuthSection.tsx
+++ b/apps/web/components/security/TwoFactorAuthSection.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useRef, useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Badge } from "@calcom/ui/components/badge";
@@ -9,6 +9,11 @@ import EnableTwoFactorModal from "./EnableTwoFactorModal";
 
 const TwoFactorAuthSection = ({ twoFactorEnabled }: { twoFactorEnabled: boolean }) => {
   const [enabled, setEnabled] = useState(twoFactorEnabled);
+  const prevTwoFactorEnabled = useRef(twoFactorEnabled);
+  if (prevTwoFactorEnabled.current !== twoFactorEnabled) {
+    prevTwoFactorEnabled.current = twoFactorEnabled;
+    setEnabled(twoFactorEnabled);
+  }
   const [enableModalOpen, setEnableModalOpen] = useState(false);
   const [disableModalOpen, setDisableModalOpen] = useState(false);
   const { t } = useLocale();
diff --git a/apps/web/components/settings/DisableTwoFactorModal.tsx b/apps/web/components/settings/DisableTwoFactorModal.tsx
index 2d6491fcf3a8ef..b8dd4517437d8f 100644
--- a/apps/web/components/settings/DisableTwoFactorModal.tsx
+++ b/apps/web/components/settings/DisableTwoFactorModal.tsx
@@ -106,7 +106,7 @@ const DisableTwoFactorAuthModal = ({
             {twoFactorLostAccess ? (
               <BackupCode center={false} />
             ) : (
-              <TwoFactor center={false} autoFocus={false} />
+              <TwoFactor center={false} />
             )}
 
             {errorMessage && <p className="mt-1 text-sm text-red-700">{errorMessage}</p>}
diff --git a/apps/web/components/setup/EnterpriseLicense.tsx b/apps/web/components/setup/EnterpriseLicense.tsx
index 21e2b6738f2291..83948adc7674e4 100644
--- a/apps/web/components/setup/EnterpriseLicense.tsx
+++ b/apps/web/components/setup/EnterpriseLicense.tsx
@@ -1,6 +1,5 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-// eslint-disable-next-line no-restricted-imports
-import { noop } from "lodash";
+import noop from "lodash/noop";
 import { useCallback, useState } from "react";
 import { Controller, FormProvider, useForm, useFormState } from "react-hook-form";
 import { z } from "zod";
diff --git a/apps/web/components/ui/LimitedBadges.tsx b/apps/web/components/ui/LimitedBadges.tsx
index f440e094baeefa..3372d345dc56bd 100644
--- a/apps/web/components/ui/LimitedBadges.tsx
+++ b/apps/web/components/ui/LimitedBadges.tsx
@@ -91,9 +91,17 @@ function LimitedBadges({
             <div className="flex flex-col gap-1">
               {hiddenItems.map((item) => (
                 <span
+                  role="button"
+                  tabIndex={0}
                   key={item.label}
                   className="text-default cursor-pointer text-sm hover:text-emphasis"
-                  onClick={item.onClick}>
+                  onClick={item.onClick}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      item.onClick?.();
+                    }
+                  }}>
                   {item.label}
                 </span>
               ))}
diff --git a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
index 1fce8e1e87ea05..00c8944ec69066 100644
--- a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
+++ b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
@@ -1,10 +1,9 @@
 import classNames from "classnames";
-// eslint-disable-next-line no-restricted-imports
-import { noop } from "lodash";
+import noop from "lodash/noop";
 import { useSession } from "next-auth/react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import type { RefCallback } from "react";
-import { useEffect, useState } from "react";
+import type { Dispatch, RefCallback, SetStateAction } from "react";
+import { Suspense, useEffect, useState } from "react";
 
 import { getPremiumPlanPriceValue } from "@calcom/app-store/stripepayment/lib/utils";
 import { Dialog } from "@calcom/features/components/controlled-dialog";
@@ -23,6 +22,7 @@ import { Icon } from "@calcom/ui/components/icon";
 import { CheckIcon, ExternalLinkIcon } from "@coss/ui/icons";
 
 import type { TRPCClientErrorLike } from "@trpc/client";
+import type { TFunction } from "i18next";
 
 export enum UsernameChangeStatusEnum {
   UPGRADE = "UPGRADE",
@@ -52,7 +52,69 @@ const obtainNewUsernameChangeCondition = ({
   }
 };
 
-const PremiumTextfield = (props: ICustomUsernameProps) => {
+const ActionButtons = ({
+  paymentRequired,
+  paymentLink,
+  t,
+  usernameIsAvailable,
+  isInputUsernamePremium,
+  currentUsername,
+  inputUsernameValue,
+  setOpenDialogSaveUsername,
+  setInputUsernameValue,
+}: {
+  paymentRequired: boolean | undefined;
+  paymentLink: string;
+  t: TFunction;
+  usernameIsAvailable: boolean;
+  isInputUsernamePremium: boolean;
+  currentUsername: string | undefined;
+  inputUsernameValue: string | undefined;
+  setOpenDialogSaveUsername: Dispatch<SetStateAction<boolean>>;
+  setInputUsernameValue: (value: string) => void;
+}) => {
+  if (paymentRequired) {
+    return (
+      <div className="flex flex-row">
+        <Button
+          type="button"
+          color="primary"
+          className="mx-2"
+          href={paymentLink}
+          data-testid="reserve-username-btn">
+          {t("Reserve")}
+        </Button>
+      </div>
+    );
+  }
+  if ((usernameIsAvailable || isInputUsernamePremium) && currentUsername !== inputUsernameValue) {
+    return (
+      <div className="flex flex-row">
+        <Button
+          type="button"
+          color="primary"
+          className="mx-2"
+          onClick={() => setOpenDialogSaveUsername(true)}
+          data-testid="update-username-btn">
+          {t("update")}
+        </Button>
+        <Button
+          type="button"
+          color="secondary"
+          onClick={() => {
+            if (currentUsername) {
+              setInputUsernameValue(currentUsername);
+            }
+          }}>
+          {t("cancel")}
+        </Button>
+      </div>
+    );
+  }
+  return <></>;
+};
+
+const PremiumTextfieldInner = (props: ICustomUsernameProps) => {
   const searchParams = useSearchParams();
   const pathname = usePathname();
   const router = useRouter();
@@ -69,40 +131,40 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
     readonly: disabled,
   } = props;
   const [user] = trpc.viewer.me.get.useSuspenseQuery();
-  const [usernameIsAvailable, setUsernameIsAvailable] = useState(false);
-  const [markAsError, setMarkAsError] = useState(false);
+  const [usernameStatus, setUsernameStatus] = useState({ available: false, error: false, premium: false });
   const recentAttemptPaymentStatus = searchParams?.get("recentAttemptPaymentStatus");
   const [openDialogSaveUsername, setOpenDialogSaveUsername] = useState(false);
   const { data: stripeCustomer } = trpc.viewer.loggedInViewerRouter.stripeCustomer.useQuery();
   const isCurrentUsernamePremium =
     user && user.metadata && hasKeyInMetadata(user, "isPremium") ? !!user.metadata.isPremium : false;
-  const [isInputUsernamePremium, setIsInputUsernamePremium] = useState(false);
-  // debounce the username input, set the delay to 600ms to be consistent with signup form
   const debouncedUsername = useDebounce(inputUsernameValue, 600);
 
   useEffect(() => {
-    // Use the current username or if it's not set, use the one available from stripe
     setInputUsernameValue(currentUsername || stripeCustomer?.username || "");
   }, [setInputUsernameValue, currentUsername, stripeCustomer?.username]);
 
   useEffect(() => {
     async function checkUsername(username: string | undefined) {
       if (!username) {
-        setUsernameIsAvailable(false);
-        setMarkAsError(false);
-        setIsInputUsernamePremium(false);
+        setUsernameStatus({ available: false, error: false, premium: false });
         return;
       }
 
       const { data } = await fetchUsername(username, null);
-      setMarkAsError(!data.available && !!currentUsername && username !== currentUsername);
-      setIsInputUsernamePremium(data.premium);
-      setUsernameIsAvailable(data.available);
+      setUsernameStatus({
+        available: data.available,
+        error: !data.available && !!currentUsername && username !== currentUsername,
+        premium: data.premium,
+      });
     }
 
     checkUsername(debouncedUsername);
   }, [debouncedUsername, currentUsername]);
 
+  const usernameIsAvailable = usernameStatus.available;
+  const markAsError = usernameStatus.error;
+  const isInputUsernamePremium = usernameStatus.premium;
+
   const updateUsername = trpc.viewer.me.updateProfile.useMutation({
     onSuccess: async () => {
       onSuccessMutation && (await onSuccessMutation());
@@ -129,48 +191,6 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
     inputUsernameValue || usernameFromStripe
   }&action=${usernameChangeCondition}&callbackUrl=${WEBAPP_URL}${pathname}`;
 
-  const ActionButtons = () => {
-    if (paymentRequired) {
-      return (
-        <div className="flex flex-row">
-          <Button
-            type="button"
-            color="primary"
-            className="mx-2"
-            href={paymentLink}
-            data-testid="reserve-username-btn">
-            {t("Reserve")}
-          </Button>
-        </div>
-      );
-    }
-    if ((usernameIsAvailable || isInputUsernamePremium) && currentUsername !== inputUsernameValue) {
-      return (
-        <div className="flex flex-row">
-          <Button
-            type="button"
-            color="primary"
-            className="mx-2"
-            onClick={() => setOpenDialogSaveUsername(true)}
-            data-testid="update-username-btn">
-            {t("update")}
-          </Button>
-          <Button
-            type="button"
-            color="secondary"
-            onClick={() => {
-              if (currentUsername) {
-                setInputUsernameValue(currentUsername);
-              }
-            }}>
-            {t("cancel")}
-          </Button>
-        </div>
-      );
-    }
-    return <></>;
-  };
-
   const saveUsername = () => {
     if (usernameChangeCondition !== UsernameChangeStatusEnum.UPGRADE) {
       updateUsername.mutate({
@@ -262,7 +282,17 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
 
         {(usernameIsAvailable || isInputUsernamePremium) && currentUsername !== inputUsernameValue && (
           <div className="flex justify-end">
-            <ActionButtons />
+            <ActionButtons
+              paymentRequired={paymentRequired}
+              paymentLink={paymentLink}
+              t={t}
+              usernameIsAvailable={usernameIsAvailable}
+              isInputUsernamePremium={isInputUsernamePremium}
+              currentUsername={currentUsername}
+              inputUsernameValue={inputUsernameValue}
+              setOpenDialogSaveUsername={setOpenDialogSaveUsername}
+              setInputUsernameValue={setInputUsernameValue}
+            />
           </div>
         )}
       </div>
@@ -334,4 +364,12 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
   );
 };
 
+const PremiumTextfield = (props: ICustomUsernameProps) => {
+  return (
+    <Suspense>
+      <PremiumTextfieldInner {...props} />
+    </Suspense>
+  );
+};
+
 export { PremiumTextfield };
diff --git a/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx b/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
index 81e319088d5bf0..a6c29ccdaaa2a6 100644
--- a/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
+++ b/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
@@ -1,8 +1,7 @@
 import classNames from "classnames";
-// eslint-disable-next-line no-restricted-imports
-import { noop } from "lodash";
+import noop from "lodash/noop";
 import { useSession } from "next-auth/react";
-import type { RefCallback } from "react";
+import type { Dispatch, RefCallback, SetStateAction } from "react";
 import { useEffect, useState } from "react";
 
 import { Dialog } from "@calcom/features/components/controlled-dialog";
@@ -18,6 +17,7 @@ import { CheckIcon } from "@coss/ui/icons";
 import { Tooltip } from "@calcom/ui/components/tooltip";
 
 import type { TRPCClientErrorLike } from "@trpc/client";
+import type { TFunction } from "i18next";
 
 interface ICustomUsernameProps {
   currentUsername: string | undefined;
@@ -29,6 +29,45 @@ interface ICustomUsernameProps {
   onErrorMutation?: (error: TRPCClientErrorLike<AppRouter>) => void;
 }
 
+const ActionButtons = ({
+  usernameIsAvailable,
+  currentUsername,
+  inputUsernameValue,
+  setOpenDialogSaveUsername,
+  t,
+  setInputUsernameValue,
+}: {
+  usernameIsAvailable: boolean;
+  currentUsername: string | undefined;
+  inputUsernameValue: string | undefined;
+  setOpenDialogSaveUsername: Dispatch<SetStateAction<boolean>>;
+  t: TFunction;
+  setInputUsernameValue: (value: string) => void;
+}) => {
+  return usernameIsAvailable && currentUsername !== inputUsernameValue ? (
+    <div className="relative bottom-[6px] me-2 ms-2 flex flex-row space-x-2">
+      <Button
+        type="button"
+        onClick={() => setOpenDialogSaveUsername(true)}
+        data-testid="update-username-btn">
+        {t("update")}
+      </Button>
+      <Button
+        type="button"
+        color="minimal"
+        onClick={() => {
+          if (currentUsername) {
+            setInputUsernameValue(currentUsername);
+          }
+        }}>
+        {t("cancel")}
+      </Button>
+    </div>
+  ) : (
+    <></>
+  );
+};
+
 const UsernameTextfield = (props: ICustomUsernameProps & Partial<React.ComponentProps<typeof TextField>>) => {
   const { t } = useLocale();
   const { update } = useSession();
@@ -43,33 +82,32 @@ const UsernameTextfield = (props: ICustomUsernameProps & Partial<React.Component
     onErrorMutation,
     ...rest
   } = props;
-  const [usernameIsAvailable, setUsernameIsAvailable] = useState(false);
-  const [markAsError, setMarkAsError] = useState(false);
+  const [usernameStatus, setUsernameStatus] = useState({ available: false, error: false });
   const [openDialogSaveUsername, setOpenDialogSaveUsername] = useState(false);
 
-  // debounce the username input, set the delay to 600ms to be consistent with signup form
   const debouncedUsername = useDebounce(inputUsernameValue, 600);
 
   useEffect(() => {
     async function checkUsername(username: string | undefined) {
       if (!username) {
-        setUsernameIsAvailable(false);
-        setMarkAsError(false);
+        setUsernameStatus({ available: false, error: false });
         return;
       }
 
       if (currentUsername !== username) {
         const { data } = await fetchUsername(username, null);
-        setMarkAsError(!data.available);
-        setUsernameIsAvailable(data.available);
+        setUsernameStatus({ available: data.available, error: !data.available });
       } else {
-        setUsernameIsAvailable(false);
+        setUsernameStatus({ available: false, error: false });
       }
     }
 
     checkUsername(debouncedUsername);
   }, [debouncedUsername, currentUsername]);
 
+  const usernameIsAvailable = usernameStatus.available;
+  const markAsError = usernameStatus.error;
+
   const updateUsernameMutation = trpc.viewer.me.updateProfile.useMutation({
     onSuccess: async () => {
       onSuccessMutation && (await onSuccessMutation());
@@ -82,31 +120,6 @@ const UsernameTextfield = (props: ICustomUsernameProps & Partial<React.Component
     },
   });
 
-  const ActionButtons = () => {
-    return usernameIsAvailable && currentUsername !== inputUsernameValue ? (
-      <div className="relative bottom-[6px] me-2 ms-2 flex flex-row space-x-2">
-        <Button
-          type="button"
-          onClick={() => setOpenDialogSaveUsername(true)}
-          data-testid="update-username-btn">
-          {t("update")}
-        </Button>
-        <Button
-          type="button"
-          color="minimal"
-          onClick={() => {
-            if (currentUsername) {
-              setInputUsernameValue(currentUsername);
-            }
-          }}>
-          {t("cancel")}
-        </Button>
-      </div>
-    ) : (
-      <></>
-    );
-  };
-
   const updateUsername = async () => {
     updateUsernameMutation.mutate({
       username: inputUsernameValue,
@@ -152,14 +165,28 @@ const UsernameTextfield = (props: ICustomUsernameProps & Partial<React.Component
           )}
         </div>
         <div className="mt-7 hidden md:inline">
-          <ActionButtons />
+          <ActionButtons
+            usernameIsAvailable={usernameIsAvailable}
+            currentUsername={currentUsername}
+            inputUsernameValue={inputUsernameValue}
+            setOpenDialogSaveUsername={setOpenDialogSaveUsername}
+            t={t}
+            setInputUsernameValue={setInputUsernameValue}
+          />
         </div>
       </div>
       {markAsError && <p className="mt-1 text-xs text-red-500">{t("username_already_taken")}</p>}
 
       {usernameIsAvailable && currentUsername !== inputUsernameValue && (
         <div className="mt-2 flex justify-end md:hidden">
-          <ActionButtons />
+          <ActionButtons
+            usernameIsAvailable={usernameIsAvailable}
+            currentUsername={currentUsername}
+            inputUsernameValue={inputUsernameValue}
+            setOpenDialogSaveUsername={setOpenDialogSaveUsername}
+            t={t}
+            setInputUsernameValue={setInputUsernameValue}
+          />
         </div>
       )}
       <Dialog open={openDialogSaveUsername}>
diff --git a/apps/web/components/ui/UsernameAvailability/index.tsx b/apps/web/components/ui/UsernameAvailability/index.tsx
index 85395a1cffa585..c6116bce9ffe18 100644
--- a/apps/web/components/ui/UsernameAvailability/index.tsx
+++ b/apps/web/components/ui/UsernameAvailability/index.tsx
@@ -1,6 +1,6 @@
 import dynamic from "next/dynamic";
 import { useSearchParams } from "next/navigation";
-import { useState } from "react";
+import { Suspense, useState } from "react";
 import type { RefCallback, ReactNode } from "react";
 import { Controller, useForm } from "react-hook-form";
 
@@ -45,7 +45,7 @@ export const UsernameAvailability = (props: ICustomUsernameProps) => {
   return <UsernameAvailabilityComponent {...componentProps} />;
 };
 
-export const UsernameAvailabilityField = ({
+const UsernameAvailabilityFieldInner = ({
   onSuccessMutation,
   onErrorMutation,
   disabled,
@@ -93,3 +93,11 @@ export const UsernameAvailabilityField = ({
     />
   );
 };
+
+export const UsernameAvailabilityField = (props: UsernameAvailabilityFieldProps) => {
+  return (
+    <Suspense>
+      <UsernameAvailabilityFieldInner {...props} />
+    </Suspense>
+  );
+};
diff --git a/apps/web/components/ui/form/CheckedSelect.tsx b/apps/web/components/ui/form/CheckedSelect.tsx
index a8ed41ddc204e8..eb689e71a47679 100644
--- a/apps/web/components/ui/form/CheckedSelect.tsx
+++ b/apps/web/components/ui/form/CheckedSelect.tsx
@@ -13,9 +13,12 @@ type CheckedSelectOption = {
   disabled?: boolean;
 };
 
+const EMPTY_OPTIONS: CheckedSelectOption[] = [];
+const EMPTY_VALUE: readonly CheckedSelectOption[] = [];
+
 export const CheckedSelect = ({
-  options = [],
-  value = [],
+  options = EMPTY_OPTIONS,
+  value = EMPTY_VALUE,
   ...props
 }: Omit<Props<CheckedSelectOption, true>, "value" | "onChange"> & {
   value?: readonly CheckedSelectOption[];
diff --git a/apps/web/lib/app-providers-app-dir.tsx b/apps/web/lib/app-providers-app-dir.tsx
index e76f17fb48edb1..745e12695c7a3f 100644
--- a/apps/web/lib/app-providers-app-dir.tsx
+++ b/apps/web/lib/app-providers-app-dir.tsx
@@ -6,6 +6,7 @@ import type { AppProps as NextAppProps } from "next/app";
 import type { ReadonlyURLSearchParams } from "next/navigation";
 import { usePathname, useSearchParams } from "next/navigation";
 import { NuqsAdapter } from "nuqs/adapters/next/app";
+import { Suspense } from "react";
 
 import DynamicPostHogProvider from "~/ee/posthog/providerDynamic";
 import DynamicPostHogPageView from "~/ee/posthog/pageViewDynamic";
@@ -58,7 +59,7 @@ type CalcomThemeProps = Readonly<{
   isThemeSupported: boolean;
 }>;
 
-const CalcomThemeProvider = (props: CalcomThemeProps) => {
+const CalcomThemeProviderInner = (props: CalcomThemeProps) => {
   // Use namespace of embed to ensure same namespaced embed are displayed with same theme. This allows different embeds on the same website to be themed differently
   // One such example is our Embeds Demo and Testing page at http://localhost:3100
   // Having `getEmbedNamespace` defined on window before react initializes the app, ensures that embedNamespace is available on the first mount and can be used as part of storageKey
@@ -93,6 +94,14 @@ const CalcomThemeProvider = (props: CalcomThemeProps) => {
   );
 };
 
+const CalcomThemeProvider = (props: CalcomThemeProps) => {
+  return (
+    <Suspense>
+      <CalcomThemeProviderInner {...props} />
+    </Suspense>
+  );
+};
+
 function FeatureFlagsProvider({ children }: { children: React.ReactNode }) {
   const flags = useFlags();
   return <FeatureProvider value={flags}>{children}</FeatureProvider>;
diff --git a/apps/web/lib/signup/getServerSideProps.tsx b/apps/web/lib/signup/getServerSideProps.tsx
index 0bb15253fa38e6..3357668b80cc30 100644
--- a/apps/web/lib/signup/getServerSideProps.tsx
+++ b/apps/web/lib/signup/getServerSideProps.tsx
@@ -26,10 +26,11 @@ const querySchema = z.object({
 export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
   const prisma = await import("@calcom/prisma").then((mod) => mod.default);
   const featuresRepository = new FeaturesRepository(prisma);
-  const emailVerificationEnabled =
-    await featuresRepository.checkIfFeatureIsEnabledGlobally("email-verification");
-  const signupDisabled = await featuresRepository.checkIfFeatureIsEnabledGlobally("disable-signup");
-  const onboardingV3Enabled = await featuresRepository.checkIfFeatureIsEnabledGlobally("onboarding-v3");
+  const [emailVerificationEnabled, signupDisabled, onboardingV3Enabled] = await Promise.all([
+    featuresRepository.checkIfFeatureIsEnabledGlobally("email-verification"),
+    featuresRepository.checkIfFeatureIsEnabledGlobally("disable-signup"),
+    featuresRepository.checkIfFeatureIsEnabledGlobally("onboarding-v3"),
+  ]);
 
   const token = z.string().optional().parse(ctx.query.token);
   const redirectUrlData = z
diff --git a/apps/web/modules/apps/components/AdminAppsList.tsx b/apps/web/modules/apps/components/AdminAppsList.tsx
index e661a4c347bc79..ef90d8ca114ada 100644
--- a/apps/web/modules/apps/components/AdminAppsList.tsx
+++ b/apps/web/modules/apps/components/AdminAppsList.tsx
@@ -1,8 +1,7 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-// eslint-disable-next-line no-restricted-imports
-import { noop } from "lodash";
+import noop from "lodash/noop";
 import type { FC } from "react";
 import { useReducer, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
diff --git a/apps/web/modules/apps/components/AllApps.tsx b/apps/web/modules/apps/components/AllApps.tsx
index 206805ca478693..7eb969eec71685 100644
--- a/apps/web/modules/apps/components/AllApps.tsx
+++ b/apps/web/modules/apps/components/AllApps.tsx
@@ -100,9 +100,17 @@ function CategoryTab({ selectedCategory, categories, searchText, onCategoryChang
         onScroll={(e) => calculateScroll(e)}
         ref={ref}>
         <li
+          role="button"
+          tabIndex={0}
           onClick={() => {
             onCategoryChange(null);
           }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              onCategoryChange(null);
+            }
+          }}
           className={classNames(
             selectedCategory === null ? "bg-emphasis text-default" : "bg-cal-muted text-emphasis",
             "hover:bg-emphasis min-w-max rounded-md px-4 py-2.5 text-sm font-medium transition hover:cursor-pointer"
@@ -111,6 +119,8 @@ function CategoryTab({ selectedCategory, categories, searchText, onCategoryChang
         </li>
         {categories.map((cat, pos) => (
           <li
+            role="button"
+            tabIndex={0}
             key={pos}
             onClick={() => {
               if (selectedCategory === cat) {
@@ -119,6 +129,16 @@ function CategoryTab({ selectedCategory, categories, searchText, onCategoryChang
                 onCategoryChange(cat);
               }
             }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                if (selectedCategory === cat) {
+                  onCategoryChange(null);
+                } else {
+                  onCategoryChange(cat);
+                }
+              }
+            }}
             className={classNames(
               selectedCategory === cat ? "bg-emphasis text-default" : "bg-cal-muted text-emphasis",
               "hover:bg-emphasis rounded-md px-4 py-2.5 text-sm font-medium transition hover:cursor-pointer"
diff --git a/apps/web/modules/apps/components/AppList.tsx b/apps/web/modules/apps/components/AppList.tsx
index 0b60bb3ee7d7ff..a757bd9d7a70ff 100644
--- a/apps/web/modules/apps/components/AppList.tsx
+++ b/apps/web/modules/apps/components/AppList.tsx
@@ -1,3 +1,4 @@
+import type { Dispatch, SetStateAction } from "react";
 import { useCallback, useState } from "react";
 
 import { InstallAppButton } from "@calcom/app-store/InstallAppButton";
@@ -48,6 +49,101 @@ interface AppListProps {
   handleBulkEditDialogToggle: () => void;
 }
 
+const ChildAppCard = ({
+  item,
+  defaultConferencingApp,
+  appCardClassName,
+  appCardMenuClassName,
+  variant,
+  handleUpdateUserDefaultConferencingApp,
+  handleDisconnect,
+  handleConnectDisconnectIntegrationMenuToggle,
+  setBulkUpdateModal,
+  setLocationType,
+}: {
+  item: AppCardApp;
+  defaultConferencingApp: RouterOutputs["viewer"]["apps"]["getUsersDefaultConferencingApp"];
+  appCardClassName?: string;
+  appCardMenuClassName?: string;
+  variant?: AppCategories;
+  handleUpdateUserDefaultConferencingApp: (params: UpdateUsersDefaultConferencingAppParams) => void;
+  handleDisconnect: HandleDisconnect;
+  handleConnectDisconnectIntegrationMenuToggle: () => void;
+  setBulkUpdateModal: Dispatch<SetStateAction<boolean>>;
+  setLocationType: Dispatch<SetStateAction<(EventLocationType & { slug: string }) | undefined>>;
+}) => {
+  const { t } = useLocale();
+  const appSlug = item?.slug;
+  const appIsDefault =
+    appSlug === defaultConferencingApp?.appSlug ||
+    (appSlug === "daily-video" && !defaultConferencingApp?.appSlug);
+  return (
+    <AppListCard
+      key={item.name}
+      description={item.description}
+      title={item.name}
+      logo={item.logo}
+      isDefault={appIsDefault}
+      shouldHighlight
+      slug={item.slug}
+      invalidCredential={item?.invalidCredentialIds ? item.invalidCredentialIds.length > 0 : false}
+      credentialOwner={item?.credentialOwner}
+      className={appCardClassName}
+      actions={
+        !item.credentialOwner?.readOnly ? (
+          <div className="flex justify-end">
+            <Dropdown modal={false}>
+              <DropdownMenuTrigger asChild>
+                <Button StartIcon="ellipsis" variant="icon" color="secondary" />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent className={appCardMenuClassName}>
+                {!appIsDefault && variant === "conferencing" && (
+                  <DropdownMenuItem>
+                    <DropdownItem
+                      type="button"
+                      color="secondary"
+                      StartIcon="video"
+                      onClick={() => {
+                        const locationType = getLocationFromApp(item?.locationOption?.value ?? "");
+                        if (locationType?.linkType === "static") {
+                          setLocationType({ ...locationType, slug: appSlug });
+                        } else {
+                          handleUpdateUserDefaultConferencingApp({
+                            appSlug,
+                            onSuccessCallback: () => setBulkUpdateModal(true),
+                            onErrorCallback: () => {
+                              return;
+                            },
+                          });
+                        }
+                      }}>
+                      {t("set_as_default")}
+                    </DropdownItem>
+                  </DropdownMenuItem>
+                )}
+                <ConnectOrDisconnectIntegrationMenuItem
+                  credentialId={item.credentialOwner?.credentialId || item.userCredentialIds[0]}
+                  type={item.type}
+                  app={item.slug}
+                  isGlobal={item.isGlobal}
+                  installed
+                  invalidCredentialIds={item.invalidCredentialIds}
+                  handleDisconnect={handleDisconnect}
+                  teamId={item.credentialOwner ? item.credentialOwner?.teamId : undefined}
+                  handleConnectDisconnectIntegrationMenuToggle={
+                    handleConnectDisconnectIntegrationMenuToggle
+                  }
+                />
+              </DropdownMenuContent>
+            </Dropdown>
+          </div>
+        ) : null
+      }>
+      <AppSettings slug={item.slug} />
+    </AppListCard>
+  );
+};
+
 export const AppList = ({
   data,
   handleDisconnect,
@@ -73,84 +169,25 @@ export const AppList = ({
     showToast("Default app updated successfully", "success");
   }, []);
 
-  const ChildAppCard = ({ item }: { item: AppCardApp }) => {
-    const appSlug = item?.slug;
-    const appIsDefault =
-      appSlug === defaultConferencingApp?.appSlug ||
-      (appSlug === "daily-video" && !defaultConferencingApp?.appSlug);
-    return (
-      <AppListCard
-        key={item.name}
-        description={item.description}
-        title={item.name}
-        logo={item.logo}
-        isDefault={appIsDefault}
-        shouldHighlight
-        slug={item.slug}
-        invalidCredential={item?.invalidCredentialIds ? item.invalidCredentialIds.length > 0 : false}
-        credentialOwner={item?.credentialOwner}
-        className={appCardClassName}
-        actions={
-          !item.credentialOwner?.readOnly ? (
-            <div className="flex justify-end">
-              <Dropdown modal={false}>
-                <DropdownMenuTrigger asChild>
-                  <Button StartIcon="ellipsis" variant="icon" color="secondary" />
-                </DropdownMenuTrigger>
-                <DropdownMenuContent className={appCardMenuClassName}>
-                  {!appIsDefault && variant === "conferencing" && (
-                    <DropdownMenuItem>
-                      <DropdownItem
-                        type="button"
-                        color="secondary"
-                        StartIcon="video"
-                        onClick={() => {
-                          const locationType = getLocationFromApp(item?.locationOption?.value ?? "");
-                          if (locationType?.linkType === "static") {
-                            setLocationType({ ...locationType, slug: appSlug });
-                          } else {
-                            handleUpdateUserDefaultConferencingApp({
-                              appSlug,
-                              onSuccessCallback: () => setBulkUpdateModal(true),
-                              onErrorCallback: () => {
-                                return;
-                              },
-                            });
-                          }
-                        }}>
-                        {t("set_as_default")}
-                      </DropdownItem>
-                    </DropdownMenuItem>
-                  )}
-                  <ConnectOrDisconnectIntegrationMenuItem
-                    credentialId={item.credentialOwner?.credentialId || item.userCredentialIds[0]}
-                    type={item.type}
-                    app={item.slug}
-                    isGlobal={item.isGlobal}
-                    installed
-                    invalidCredentialIds={item.invalidCredentialIds}
-                    handleDisconnect={handleDisconnect}
-                    teamId={item.credentialOwner ? item.credentialOwner?.teamId : undefined}
-                    handleConnectDisconnectIntegrationMenuToggle={
-                      handleConnectDisconnectIntegrationMenuToggle
-                    }
-                  />
-                </DropdownMenuContent>
-              </Dropdown>
-            </div>
-          ) : null
-        }>
-        <AppSettings slug={item.slug} />
-      </AppListCard>
-    );
-  };
-
   const appsWithTeamCredentials = data.items.filter((app) => app.teams.length);
   const cardsForAppsWithTeams = appsWithTeamCredentials.map((app) => {
     const appCards = [];
 
     if (app.userCredentialIds.length) {
-      appCards.push(<ChildAppCard item={app} />);
+      appCards.push(
+        <ChildAppCard
+          item={app}
+          defaultConferencingApp={defaultConferencingApp}
+          appCardClassName={appCardClassName}
+          appCardMenuClassName={appCardMenuClassName}
+          variant={variant}
+          handleUpdateUserDefaultConferencingApp={handleUpdateUserDefaultConferencingApp}
+          handleDisconnect={handleDisconnect}
+          handleConnectDisconnectIntegrationMenuToggle={handleConnectDisconnectIntegrationMenuToggle}
+          setBulkUpdateModal={setBulkUpdateModal}
+          setLocationType={setLocationType}
+        />
+      );
     }
     for (const team of app.teams) {
       if (team) {
@@ -166,6 +203,15 @@ export const AppList = ({
                 readOnly: !team.isAdmin,
               },
             }}
+            defaultConferencingApp={defaultConferencingApp}
+            appCardClassName={appCardClassName}
+            appCardMenuClassName={appCardMenuClassName}
+            variant={variant}
+            handleUpdateUserDefaultConferencingApp={handleUpdateUserDefaultConferencingApp}
+            handleDisconnect={handleDisconnect}
+            handleConnectDisconnectIntegrationMenuToggle={handleConnectDisconnectIntegrationMenuToggle}
+            setBulkUpdateModal={setBulkUpdateModal}
+            setLocationType={setLocationType}
           />
         );
       }
@@ -181,7 +227,24 @@ export const AppList = ({
         {data.items
           .filter((item) => item.invalidCredentialIds)
           .map((item, i) => {
-            if (!item.teams.length) return <ChildAppCard key={i} item={item} />;
+            if (!item.teams.length)
+              return (
+                <ChildAppCard
+                  key={i}
+                  item={item}
+                  defaultConferencingApp={defaultConferencingApp}
+                  appCardClassName={appCardClassName}
+                  appCardMenuClassName={appCardMenuClassName}
+                  variant={variant}
+                  handleUpdateUserDefaultConferencingApp={handleUpdateUserDefaultConferencingApp}
+                  handleDisconnect={handleDisconnect}
+                  handleConnectDisconnectIntegrationMenuToggle={
+                    handleConnectDisconnectIntegrationMenuToggle
+                  }
+                  setBulkUpdateModal={setBulkUpdateModal}
+                  setLocationType={setLocationType}
+                />
+              );
           })}
       </List>
       {locationType && (
diff --git a/apps/web/modules/apps/components/Slider.tsx b/apps/web/modules/apps/components/Slider.tsx
index c72bb3a4ebecc6..be140b23a3ae0b 100644
--- a/apps/web/modules/apps/components/Slider.tsx
+++ b/apps/web/modules/apps/components/Slider.tsx
@@ -20,13 +20,29 @@ const SliderButton: FC<ComponentProps<"button">> = (props) => {
   );
 };
 
+function SliderItem<T>({
+  item,
+  renderItem,
+}: {
+  item: T;
+  renderItem: (item: T) => JSX.Element;
+}) {
+  return (
+    <li className="glide__slide h-auto pl-0">
+      {renderItem(item)}
+    </li>
+  );
+}
+
+const EMPTY_OPTIONS: Options = {};
+
 export const Slider = <T extends string | unknown>({
   title = "",
   className = "",
   items,
   itemKey = (item) => `${item}`,
   renderItem,
-  options = {},
+  options = EMPTY_OPTIONS,
 }: {
   title?: string;
   className?: string;
@@ -75,11 +91,7 @@ export const Slider = <T extends string | unknown>({
           <ul className="glide__slides">
             {items.map((item) => {
               if (typeof renderItem !== "function") return null;
-              return (
-                <li key={itemKey(item)} className="glide__slide h-auto pl-0">
-                  {renderItem(item)}
-                </li>
-              );
+              return <SliderItem key={itemKey(item)} item={item} renderItem={renderItem} />;
             })}
           </ul>
         </div>
diff --git a/apps/web/modules/apps/installation/[[...step]]/step-view.tsx b/apps/web/modules/apps/installation/[[...step]]/step-view.tsx
index d8e498c6c7d0b5..f8435de4ed7820 100644
--- a/apps/web/modules/apps/installation/[[...step]]/step-view.tsx
+++ b/apps/web/modules/apps/installation/[[...step]]/step-view.tsx
@@ -100,9 +100,11 @@ type TUpdateObject = {
   locations?: LocationObject[];
 };
 
+const EMPTY_TEAMS: TTeams = [];
+
 const OnboardingPage = ({
   step,
-  teams = [],
+  teams = EMPTY_TEAMS,
   personalAccount,
   appMetadata,
   eventTypeGroups,
diff --git a/apps/web/modules/auth/forgot-password/[id]/forgot-password-single-view.tsx b/apps/web/modules/auth/forgot-password/[id]/forgot-password-single-view.tsx
index 66056bf1f4220a..1541cc7d3699f7 100644
--- a/apps/web/modules/auth/forgot-password/[id]/forgot-password-single-view.tsx
+++ b/apps/web/modules/auth/forgot-password/[id]/forgot-password-single-view.tsx
@@ -1,7 +1,8 @@
 "use client";
 
+import { useQuery } from "@tanstack/react-query";
 import Link from "next/link";
-import { useEffect, useReducer, type CSSProperties } from "react";
+import { useReducer, type CSSProperties } from "react";
 import type { UseFormReturn } from "react-hook-form";
 import { useForm } from "react-hook-form";
 
@@ -76,12 +77,15 @@ function PasswordResetForm({
     formState: { isSubmitting: loading },
   } = formMethods;
 
-  useEffect(() => {
-    fetch("/api/csrf", { cache: "no-store" })
-      .then((res) => res.json())
-      .then(({ csrfToken }) => setValue("csrfToken", csrfToken))
-      .catch(() => setValue("csrfToken", ""));
-  }, [setValue, refreshToken]);
+  useQuery({
+    queryKey: ["csrf", refreshToken],
+    queryFn: async () => {
+      const res = await fetch("/api/csrf", { cache: "no-store" });
+      const { csrfToken } = await res.json();
+      setValue("csrfToken", csrfToken || "");
+      return csrfToken;
+    },
+  });
 
   const submitChangePassword = async ({
     password,
diff --git a/apps/web/modules/auth/forgot-password/forgot-password-view.tsx b/apps/web/modules/auth/forgot-password/forgot-password-view.tsx
index d7dfd80cc5b1e6..4f2745b6713f5a 100644
--- a/apps/web/modules/auth/forgot-password/forgot-password-view.tsx
+++ b/apps/web/modules/auth/forgot-password/forgot-password-view.tsx
@@ -1,7 +1,6 @@
 "use client";
 
-// eslint-disable-next-line no-restricted-imports
-import { debounce } from "lodash";
+import debounce from "lodash/debounce";
 import Link from "next/link";
 import type { CSSProperties, SyntheticEvent } from "react";
 import React from "react";
@@ -16,6 +15,20 @@ export type PageProps = {
   csrfToken?: string;
 };
 
+const Success = ({ email, error }: { email: string; error: { message: string } | null }) => {
+  const { t } = useLocale();
+  return (
+    <div className="stack-y-6 text-sm leading-normal ">
+      <p className="">{t("password_reset_email", { email })}</p>
+      <p className="">{t("password_reset_leading")}</p>
+      {error && <p className="text-center text-red-600">{error.message}</p>}
+      <Button color="secondary" className="w-full justify-center" href="/auth/login">
+        {t("back_to_signin")}
+      </Button>
+    </div>
+  );
+};
+
 export default function ForgotPassword(props: PageProps) {
   const csrfToken = "csrfToken" in props ? (props.csrfToken as string) : undefined;
   const { t } = useLocale();
@@ -74,19 +87,6 @@ export default function ForgotPassword(props: PageProps) {
     await debouncedHandleSubmitPasswordRequest({ email });
   };
 
-  const Success = () => {
-    return (
-      <div className="stack-y-6 text-sm leading-normal ">
-        <p className="">{t("password_reset_email", { email })}</p>
-        <p className="">{t("password_reset_leading")}</p>
-        {error && <p className="text-center text-red-600">{error.message}</p>}
-        <Button color="secondary" className="w-full justify-center" href="/auth/login">
-          {t("back_to_signin")}
-        </Button>
-      </div>
-    );
-  };
-
   return (
     <AuthContainer
       showLogo
@@ -100,7 +100,7 @@ export default function ForgotPassword(props: PageProps) {
           </>
         )
       }>
-      {success && <Success />}
+      {success && <Success email={email} error={error} />}
       {!success && (
         <>
           <div className="stack-y-6">{error && <p className="text-red-600">{error.message}</p>}</div>
diff --git a/apps/web/modules/auth/hooks/useLastUsed.tsx b/apps/web/modules/auth/hooks/useLastUsed.tsx
index 0ab3a23f0a8bf8..c71da54e169627 100644
--- a/apps/web/modules/auth/hooks/useLastUsed.tsx
+++ b/apps/web/modules/auth/hooks/useLastUsed.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { localStorage } from "@calcom/lib/webstorage";
@@ -7,22 +7,23 @@ import classNames from "@calcom/ui/classNames";
 type LoginType = "saml" | "google" | "credentials";
 
 export function useLastUsed() {
-  const [lastUsed, setLastUsed] = useState<LoginType>();
+  const [lastUsed, setLastUsedState] = useState<LoginType>();
 
   useEffect(() => {
     const storedValue = localStorage.getItem("last_cal_login");
     if (storedValue) {
-      setLastUsed(storedValue as LoginType);
+      setLastUsedState(storedValue as LoginType);
     }
   }, []);
 
-  useEffect(() => {
-    if (lastUsed) {
-      localStorage.setItem("last_cal_login", lastUsed);
+  const setLastUsed = useCallback((value: LoginType | undefined) => {
+    setLastUsedState(value);
+    if (value) {
+      localStorage.setItem("last_cal_login", value);
     } else {
       localStorage.removeItem("last_cal_login");
     }
-  }, [lastUsed]);
+  }, []);
 
   return [lastUsed, setLastUsed] as const;
 }
diff --git a/apps/web/modules/auth/verify-view.tsx b/apps/web/modules/auth/verify-view.tsx
index e8d539a4791132..1a6c9bad1fe431 100644
--- a/apps/web/modules/auth/verify-view.tsx
+++ b/apps/web/modules/auth/verify-view.tsx
@@ -8,7 +8,7 @@ import classNames from "@calcom/ui/classNames";
 import { Button } from "@calcom/ui/components/button";
 import { showToast } from "@calcom/ui/components/toast";
 import { MailOpenIcon, TriangleAlertIcon } from "@coss/ui/icons";
-import { motion } from "framer-motion";
+import { LazyMotion, domAnimation, m } from "framer-motion";
 import { usePathname, useRouter } from "next/navigation";
 import { signIn } from "next-auth/react";
 import { useEffect, useRef, useState } from "react";
@@ -63,6 +63,7 @@ const PaymentFailedIcon = () => (
 );
 
 const PaymentSuccess = () => (
+  <LazyMotion features={domAnimation}>
   <div
     className="rounded-full"
     style={{
@@ -70,7 +71,7 @@ const PaymentSuccess = () => (
       border: "0.6px solid rgba(0, 0, 0, 0.02)",
       background: "rgba(123, 203, 197, 0.10)",
     }}>
-    <motion.div
+    <m.div
       className="rounded-full"
       style={{
         padding: "6px",
@@ -84,7 +85,7 @@ const PaymentSuccess = () => (
         repeatType: "reverse",
         delay: 0.2, // Delay the start of animation for the second ring
       }}>
-      <motion.div
+      <m.div
         className="rounded-full p-3"
         style={{
           border: "1px solid rgba(255, 255, 255, 0.40)",
@@ -100,9 +101,10 @@ const PaymentSuccess = () => (
             strokeLinejoin="round"
           />
         </svg>
-      </motion.div>
-    </motion.div>
+      </m.div>
+    </m.div>
   </div>
+  </LazyMotion>
 );
 
 const MailOpenIconWrapper = () => (
@@ -149,7 +151,7 @@ export default function Verify({ EMAIL_FROM }: { EMAIL_FROM?: string }) {
     if (secondsLeft > 0) {
       const interval = setInterval(() => {
         if (secondsLeft > 0) {
-          setSecondsLeft(secondsLeft - 1);
+          setSecondsLeft((prev) => prev - 1);
         }
       }, 1000);
       return () => clearInterval(interval);
diff --git a/apps/web/modules/availability/[schedule]/schedule-view.tsx b/apps/web/modules/availability/[schedule]/schedule-view.tsx
index e65ec4ad32209e..8e0ffeaddca3f7 100644
--- a/apps/web/modules/availability/[schedule]/schedule-view.tsx
+++ b/apps/web/modules/availability/[schedule]/schedule-view.tsx
@@ -3,7 +3,7 @@
 import { revalidateAvailabilityList } from "app/(use-page-wrapper)/(main-nav)/availability/actions";
 import { revalidateSchedulePage } from "app/(use-page-wrapper)/availability/[schedule]/actions";
 import { useRouter, useSearchParams } from "next/navigation";
-import { useState } from "react";
+import { Suspense, useState } from "react";
 
 import { AvailabilitySettings } from "@calcom/atoms/availability/AvailabilitySettings";
 import type { BulkUpdatParams } from "@calcom/features/eventtypes/components/BulkEditDefaultForEventsModal";
@@ -20,7 +20,7 @@ type PageProps = {
   travelSchedulesData: RouterOutputs["viewer"]["travelSchedules"]["get"];
 };
 
-export const AvailabilitySettingsWebWrapper = ({
+const AvailabilitySettingsWebWrapperInner = ({
   scheduleData: schedule,
   travelSchedulesData: travelSchedules,
 }: PageProps) => {
@@ -143,3 +143,11 @@ export const AvailabilitySettingsWebWrapper = ({
     />
   );
 };
+
+export const AvailabilitySettingsWebWrapper = (props: PageProps) => {
+  return (
+    <Suspense>
+      <AvailabilitySettingsWebWrapperInner {...props} />
+    </Suspense>
+  );
+};
diff --git a/apps/web/modules/blocklist/components/BlockedEntriesTable.tsx b/apps/web/modules/blocklist/components/BlockedEntriesTable.tsx
index c5cc5f1482a22f..0452fce25b86ee 100644
--- a/apps/web/modules/blocklist/components/BlockedEntriesTable.tsx
+++ b/apps/web/modules/blocklist/components/BlockedEntriesTable.tsx
@@ -16,6 +16,28 @@ import type { BlocklistEntry, BlocklistPermissions, BlocklistScope } from "@calc
 import { useBlockedEntriesColumns } from "./BlockedEntriesColumns";
 import { BlocklistEntryDetailsSheet } from "./BlocklistEntryDetailsSheet";
 
+function BulkActionsBar<T extends BlocklistEntry>({
+  numberOfSelectedRows,
+  renderBulkActions,
+  selectedEntries,
+  clearSelection,
+}: {
+  numberOfSelectedRows: number;
+  renderBulkActions: (selectedEntries: T[], clearSelection: () => void) => ReactNode;
+  selectedEntries: T[];
+  clearSelection: () => void;
+}) {
+  const { t } = useLocale();
+  return (
+    <DataTableSelectionBar.Root className="bottom-16! justify-center md:w-max">
+      <p className="text-brand-subtle px-2 text-center text-xs leading-none sm:text-sm sm:font-medium">
+        {t("number_selected", { count: numberOfSelectedRows })}
+      </p>
+      {renderBulkActions(selectedEntries, clearSelection)}
+    </DataTableSelectionBar.Root>
+  );
+}
+
 export interface BlockedEntriesTableProps<T extends BlocklistEntry> {
   scope: BlocklistScope;
   data: T[];
@@ -144,7 +166,7 @@ export function BlockedEntriesTable<T extends BlocklistEntry>({
         paginationMode="standard"
         EmptyView={
           <EmptyScreen
-            customIcon={<img className="mb-6" src="/slash-icon-cards.svg" />}
+            customIcon={<img className="mb-6" src="/slash-icon-cards.svg" alt="" />}
             headline={
               searchTerm
                 ? t("no_result_found_for", { searchTerm })
@@ -179,12 +201,12 @@ export function BlockedEntriesTable<T extends BlocklistEntry>({
         }
         totalRowCount={totalRowCount}>
         {enableRowSelection && numberOfSelectedRows > 0 && renderBulkActions && (
-          <DataTableSelectionBar.Root className="bottom-16! justify-center md:w-max">
-            <p className="text-brand-subtle px-2 text-center text-xs leading-none sm:text-sm sm:font-medium">
-              {t("number_selected", { count: numberOfSelectedRows })}
-            </p>
-            {renderBulkActions(selectedEntries, clearSelection)}
-          </DataTableSelectionBar.Root>
+          <BulkActionsBar
+            numberOfSelectedRows={numberOfSelectedRows}
+            renderBulkActions={renderBulkActions}
+            selectedEntries={selectedEntries}
+            clearSelection={clearSelection}
+          />
         )}
       </DataTableWrapper>
 
diff --git a/apps/web/modules/blocklist/components/PendingReportsTable.tsx b/apps/web/modules/blocklist/components/PendingReportsTable.tsx
index 3fd605f1a35030..e0340f01c4be7d 100644
--- a/apps/web/modules/blocklist/components/PendingReportsTable.tsx
+++ b/apps/web/modules/blocklist/components/PendingReportsTable.tsx
@@ -14,6 +14,28 @@ import type { GroupedBookingReport, BlocklistScope } from "@calcom/features/bloc
 import { BookingReportDetailsModal } from "./BookingReportDetailsModal";
 import { usePendingReportsColumns } from "./PendingReportsColumns";
 
+function BulkActionsBar<T extends GroupedBookingReport>({
+  numberOfSelectedRows,
+  renderBulkActions,
+  selectedReports,
+  clearSelection,
+}: {
+  numberOfSelectedRows: number;
+  renderBulkActions: (selectedReports: T[], clearSelection: () => void) => ReactNode;
+  selectedReports: T[];
+  clearSelection: () => void;
+}) {
+  const { t } = useLocale();
+  return (
+    <DataTableSelectionBar.Root className="bottom-16! justify-center md:w-max">
+      <p className="text-brand-subtle px-2 text-center text-xs leading-none sm:text-sm sm:font-medium">
+        {t("number_selected", { count: numberOfSelectedRows })}
+      </p>
+      {renderBulkActions(selectedReports, clearSelection)}
+    </DataTableSelectionBar.Root>
+  );
+}
+
 export type SortByOption = "createdAt" | "reportCount";
 
 export interface PendingReportsTableProps<T extends GroupedBookingReport> {
@@ -96,7 +118,7 @@ export function PendingReportsTable<T extends GroupedBookingReport>({
         paginationMode="standard"
         EmptyView={
           <EmptyScreen
-            customIcon={<img className="mb-6" src="/slash-icon-cards.svg" />}
+            customIcon={<img className="mb-6" src="/slash-icon-cards.svg" alt="" />}
             headline={t("no_pending_reports")}
             className="bg-muted mb-16"
             iconWrapperClassName="bg-default"
@@ -105,12 +127,12 @@ export function PendingReportsTable<T extends GroupedBookingReport>({
         }
         totalRowCount={totalRowCount}>
         {enableRowSelection && numberOfSelectedRows > 0 && renderBulkActions && (
-          <DataTableSelectionBar.Root className="bottom-16! justify-center md:w-max">
-            <p className="text-brand-subtle px-2 text-center text-xs leading-none sm:text-sm sm:font-medium">
-              {t("number_selected", { count: numberOfSelectedRows })}
-            </p>
-            {renderBulkActions(selectedReports, clearSelection)}
-          </DataTableSelectionBar.Root>
+          <BulkActionsBar
+            numberOfSelectedRows={numberOfSelectedRows}
+            renderBulkActions={renderBulkActions}
+            selectedReports={selectedReports}
+            clearSelection={clearSelection}
+          />
         )}
       </DataTableWrapper>
 
diff --git a/apps/web/modules/bookings/components/AvailableTimes.tsx b/apps/web/modules/bookings/components/AvailableTimes.tsx
index 5f495ad47ebfb5..d08df9c9e3d039 100644
--- a/apps/web/modules/bookings/components/AvailableTimes.tsx
+++ b/apps/web/modules/bookings/components/AvailableTimes.tsx
@@ -78,6 +78,8 @@ type SlotItemProps = {
   handleSlotClick?: (slot: Slot, isOverlapping: boolean) => void;
 };
 
+const EMPTY_UNAVAILABLE_TIME_SLOTS: string[] = [];
+
 const SlotItem = ({
   slot,
   seatsPerTimeSlot,
@@ -94,7 +96,7 @@ const SlotItem = ({
   watchedCfToken,
   handleSlotClick,
   onTentativeTimeSelect,
-  unavailableTimeSlots = [],
+  unavailableTimeSlots = EMPTY_UNAVAILABLE_TIME_SLOTS,
   confirmButtonDisabled,
   confirmStepClassNames,
 }: SlotItemProps) => {
diff --git a/apps/web/modules/bookings/components/Booker.tsx b/apps/web/modules/bookings/components/Booker.tsx
index 0428d426b5a313..0de60e06d172d5 100644
--- a/apps/web/modules/bookings/components/Booker.tsx
+++ b/apps/web/modules/bookings/components/Booker.tsx
@@ -262,10 +262,11 @@ const BookerComponent = ({
     : [];
 
   const slot = getQueryParam("slot");
-
-  useEffect(() => {
+  const prevSlotRef = useRef(slot);
+  if (slot !== prevSlotRef.current) {
+    prevSlotRef.current = slot;
     setSelectedTimeslot(slot || null);
-  }, [slot, setSelectedTimeslot]);
+  }
 
   const onSubmit = (timeSlot?: string) =>
     renderConfirmNotVerifyEmailButtonCond ? handleBookEvent(timeSlot) : handleVerifyEmail();
diff --git a/apps/web/modules/bookings/components/BookerWebWrapper.tsx b/apps/web/modules/bookings/components/BookerWebWrapper.tsx
index a252fcb0b4f29c..b91ab16e8f2f1c 100644
--- a/apps/web/modules/bookings/components/BookerWebWrapper.tsx
+++ b/apps/web/modules/bookings/components/BookerWebWrapper.tsx
@@ -24,7 +24,7 @@ import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
 import { localStorage } from "@calcom/lib/webstorage";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useSession } from "next-auth/react";
-import { useCallback, useEffect, useMemo } from "react";
+import { Suspense, useCallback, useEffect, useMemo } from "react";
 import { shallow } from "zustand/shallow";
 import { Booker as BookerComponent } from "./Booker";
 
@@ -265,7 +265,9 @@ const BookerWebWrapperComponent = (props: BookerWebWrapperAtomProps): JSX.Elemen
 export const BookerWebWrapper = (props: BookerWebWrapperAtomProps) => {
   return (
     <BookerStoreProvider>
-      <BookerWebWrapperComponent {...props} />
+      <Suspense>
+        <BookerWebWrapperComponent {...props} />
+      </Suspense>
     </BookerStoreProvider>
   );
 };
diff --git a/apps/web/modules/bookings/components/DatePicker.tsx b/apps/web/modules/bookings/components/DatePicker.tsx
index 1c1a57efc39b87..1c98bed23daf1e 100644
--- a/apps/web/modules/bookings/components/DatePicker.tsx
+++ b/apps/web/modules/bookings/components/DatePicker.tsx
@@ -52,9 +52,11 @@ const useMoveToNextMonthOnNoAvailability = ({
   };
 };
 
+const EMPTY_SLOTS: Slots = {};
+
 export const DatePicker = ({
   event,
-  slots = {},
+  slots = EMPTY_SLOTS,
   isLoading,
   classNames,
   scrollToTimeSlots,
diff --git a/apps/web/modules/bookings/components/DryRunMessage.tsx b/apps/web/modules/bookings/components/DryRunMessage.tsx
index e6b9ff9d28c665..8ab3e0f1f16709 100644
--- a/apps/web/modules/bookings/components/DryRunMessage.tsx
+++ b/apps/web/modules/bookings/components/DryRunMessage.tsx
@@ -11,7 +11,15 @@ export const DryRunMessage = ({ isEmbed }: { isEmbed?: boolean }) => {
 
   return (
     <div
+      role="button"
+      tabIndex={0}
       onClick={() => setIsVisible(false)}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          setIsVisible(false);
+        }
+      }}
       className={`bg-default border-subtle fixed left-1/2 ${
         !isEmbed ? "top-4" : "top-0"
       } z-50 -translate-x-1/2 transform cursor-pointer items-center gap-3 rounded-xl border p-3 text-sm shadow-md`}>
diff --git a/apps/web/modules/bookings/components/RedirectToInstantMeetingModal.tsx b/apps/web/modules/bookings/components/RedirectToInstantMeetingModal.tsx
index 971d213a39d79c..24d9304ad13cbf 100644
--- a/apps/web/modules/bookings/components/RedirectToInstantMeetingModal.tsx
+++ b/apps/web/modules/bookings/components/RedirectToInstantMeetingModal.tsx
@@ -27,9 +27,9 @@ export const RedirectToInstantMeetingModal = ({
   orgName?: string | null;
 }) => {
   const { t } = useLocale();
-  const [timeRemaining, setTimeRemaining] = useState(calculateTimeRemaining());
-  const [hasInstantMeetingTokenExpired, setHasInstantMeetingTokenExpired] = useState(false);
+  const [timeRemaining, setTimeRemaining] = useState(() => calculateTimeRemaining());
   const router = useRouter();
+  const hasInstantMeetingTokenExpired = expiryTime ? new Date(expiryTime) < new Date() : false;
 
   function calculateTimeRemaining() {
     const now = dayjs();
@@ -43,7 +43,6 @@ export const RedirectToInstantMeetingModal = ({
 
     const timer = setInterval(() => {
       setTimeRemaining(calculateTimeRemaining());
-      setHasInstantMeetingTokenExpired(expiryTime && new Date(expiryTime) < new Date());
     }, 1000);
 
     return () => {
@@ -105,7 +104,7 @@ export const RedirectToInstantMeetingModal = ({
               </p>
 
               <div className="mt-4 h-[414px]">
-                <iframe className="mx-auto h-full w-[276px] rounded-lg" src="https://cal.games/" />
+                <iframe className="mx-auto h-full w-[276px] rounded-lg" src="https://cal.games/" title="Game" />
               </div>
             </div>
           )}
diff --git a/apps/web/modules/bookings/components/VerifyCodeDialog.tsx b/apps/web/modules/bookings/components/VerifyCodeDialog.tsx
index cc7bddac843bca..5c53f2309f2681 100644
--- a/apps/web/modules/bookings/components/VerifyCodeDialog.tsx
+++ b/apps/web/modules/bookings/components/VerifyCodeDialog.tsx
@@ -101,7 +101,6 @@ export const VerifyCodeDialog = ({
                 name="2fa1"
                 inputMode="decimal"
                 {...digits[0]}
-                autoFocus
                 autoComplete="one-time-code"
               />
               <Input className={digitClassName} name="2fa2" inputMode="decimal" {...digits[1]} />
diff --git a/apps/web/modules/bookings/components/WeekPicker.tsx b/apps/web/modules/bookings/components/WeekPicker.tsx
index 407cd5e70e1eff..6fc503639c57b8 100644
--- a/apps/web/modules/bookings/components/WeekPicker.tsx
+++ b/apps/web/modules/bookings/components/WeekPicker.tsx
@@ -12,7 +12,7 @@ interface WeekPickerProps {
 }
 
 export function WeekPicker({ currentWeekStart, userWeekStart, onDateChange }: WeekPickerProps) {
-  const [selectedDate, setSelectedDate] = useState<Date>(currentWeekStart.toDate());
+  const [selectedDate, setSelectedDate] = useState<Date>(() => currentWeekStart.toDate());
   useEffect(() => {
     setSelectedDate(currentWeekStart.toDate());
   }, [currentWeekStart]);
diff --git a/apps/web/modules/bookings/components/event-meta/Duration.tsx b/apps/web/modules/bookings/components/event-meta/Duration.tsx
index 8d51789bb2909b..14673b37648df5 100644
--- a/apps/web/modules/bookings/components/event-meta/Duration.tsx
+++ b/apps/web/modules/bookings/components/event-meta/Duration.tsx
@@ -119,10 +119,18 @@ export const EventDuration = ({
           .filter((dur) => state !== "booking" || dur === selectedDuration)
           .map((duration, index) => (
             <li
+              role="button"
+              tabIndex={0}
               data-testId={`multiple-choice-${duration}mins`}
               data-active={selectedDuration === duration ? "true" : "false"}
               key={index}
               onClick={() => setSelectedDuration(duration)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  setSelectedDuration(duration);
+                }
+              }}
               ref={(el) => (itemRefs.current[duration] = el)}
               className={classNames(
                 selectedDuration === duration ? "bg-emphasis" : "hover:text-emphasis",
diff --git a/apps/web/modules/data-table/components/DataTable.tsx b/apps/web/modules/data-table/components/DataTable.tsx
index b5ead5513fd33b..914066572c61c0 100644
--- a/apps/web/modules/data-table/components/DataTable.tsx
+++ b/apps/web/modules/data-table/components/DataTable.tsx
@@ -181,6 +181,7 @@ export function DataTable<TData>({
                       <TableHeadLabel header={header} />
                       {Boolean(enableColumnResizing) && header.column.getCanResize() && (
                         <div
+                          role="separator"
                           onMouseDown={header.getResizeHandler()}
                           onTouchStart={header.getResizeHandler()}
                           className={classNames(
diff --git a/apps/web/modules/data-table/components/DataTablePagination.tsx b/apps/web/modules/data-table/components/DataTablePagination.tsx
index a8589adbe3f0b6..69e102abc55c0a 100644
--- a/apps/web/modules/data-table/components/DataTablePagination.tsx
+++ b/apps/web/modules/data-table/components/DataTablePagination.tsx
@@ -37,7 +37,7 @@ export function DataTablePagination<TData>({
         pageSize={pageSize}
         totalItems={totalRowCount}
         onPageSizeChange={(newSize) => setPageSize(newSize)}
-        onPageChange={(page) => setPageIndex(page - 1)}
+        onPageChange={(page) => setPageIndex(() => page - 1)}
       />
     );
   } else {
diff --git a/apps/web/modules/data-table/components/DataTableSkeleton.tsx b/apps/web/modules/data-table/components/DataTableSkeleton.tsx
index a5a3eacb668bab..caad6479b33b85 100644
--- a/apps/web/modules/data-table/components/DataTableSkeleton.tsx
+++ b/apps/web/modules/data-table/components/DataTableSkeleton.tsx
@@ -13,7 +13,9 @@ interface DataTableSkeletonProps {
   columnWidths?: number[];
 }
 
-export function DataTableSkeleton({ columns, rows = 10, columnWidths = [] }: DataTableSkeletonProps) {
+const EMPTY_COLUMN_WIDTHS: number[] = [];
+
+export function DataTableSkeleton({ columns, rows = 10, columnWidths = EMPTY_COLUMN_WIDTHS }: DataTableSkeletonProps) {
   return (
     <div
       className="grid h-[75dvh]"
diff --git a/apps/web/modules/data-table/components/DataTableToolbar.tsx b/apps/web/modules/data-table/components/DataTableToolbar.tsx
index 49861d2b55f9d6..efb4436365394e 100644
--- a/apps/web/modules/data-table/components/DataTableToolbar.tsx
+++ b/apps/web/modules/data-table/components/DataTableToolbar.tsx
@@ -1,9 +1,9 @@
 "use client";
 
 import type { Table } from "@tanstack/react-table";
-import { forwardRef, useEffect } from "react";
+import { forwardRef } from "react";
 import type { ComponentPropsWithoutRef } from "react";
-import { useState, type Ref, type ChangeEvent } from "react";
+import { type Ref, type ChangeEvent } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import classNames from "@calcom/ui/classNames";
@@ -37,16 +37,9 @@ interface SearchBarProps {
 function SearchBarComponent({ className }: SearchBarProps, ref: Ref<HTMLInputElement>) {
   const { searchTerm, setSearchTerm } = useDataTable();
   const { t } = useLocale();
-  const [localValue, setLocalValue] = useState(searchTerm);
-
-  useEffect(() => {
-    setLocalValue(searchTerm);
-  }, [searchTerm]);
 
   const handleSearchChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const value = event.target.value;
-    setLocalValue(value);
-    setSearchTerm(value);
+    setSearchTerm(event.target.value);
   };
 
   return (
@@ -54,7 +47,7 @@ function SearchBarComponent({ className }: SearchBarProps, ref: Ref<HTMLInputEle
       ref={ref}
       className={classNames("max-w-48", className)}
       placeholder={t("search")}
-      value={localValue}
+      value={searchTerm}
       onChange={handleSearchChange}
     />
   );
diff --git a/apps/web/modules/data-table/components/DataTableWrapper.tsx b/apps/web/modules/data-table/components/DataTableWrapper.tsx
index d6a8d7c778505e..cc67821dcb7a73 100644
--- a/apps/web/modules/data-table/components/DataTableWrapper.tsx
+++ b/apps/web/modules/data-table/components/DataTableWrapper.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import type { Row, VisibilityState } from "@tanstack/react-table";
-import { noop } from "lodash";
+import noop from "lodash/noop";
 import { useEffect, useRef } from "react";
 
 import { useColumnFilters } from "~/data-table/hooks/useColumnFilters";
diff --git a/apps/web/modules/ee/dsync/components/GroupNameCell.tsx b/apps/web/modules/ee/dsync/components/GroupNameCell.tsx
index 369d7cae531f1f..e804d71e394788 100644
--- a/apps/web/modules/ee/dsync/components/GroupNameCell.tsx
+++ b/apps/web/modules/ee/dsync/components/GroupNameCell.tsx
@@ -88,13 +88,20 @@ const GroupNameCell = ({ groupNames, teamId, directoryId }: GroupNameCellProps)
         size="lg"
         className={classNames(!showTextInput && "hover:bg-emphasis", "min-h-8 h-auto py-2")}>
         <div
+          role="button"
+          tabIndex={0}
           className="flex items-center space-x-1"
           onClick={() => {
             if (!showTextInput) setShowTextInput(true);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              if (!showTextInput) setShowTextInput(true);
+            }
           }}>
           {showTextInput ? (
             <TextField
-              autoFocus
               className="mb-0 h-6"
               onBlur={() => {
                 if (!newGroupName) setShowTextInput(false);
diff --git a/apps/web/modules/ee/organizations/admin/views/AdminOrgPage.tsx b/apps/web/modules/ee/organizations/admin/views/AdminOrgPage.tsx
index 85ef95c4809ed8..a9d90cc079180c 100644
--- a/apps/web/modules/ee/organizations/admin/views/AdminOrgPage.tsx
+++ b/apps/web/modules/ee/organizations/admin/views/AdminOrgPage.tsx
@@ -262,12 +262,13 @@ const DeleteOrgDialog = ({
 };
 
 async function invalidateQueries(utils: ReturnType<typeof trpc.useUtils>, data: { orgId: number }) {
-  await utils.viewer.organizations.adminGetAll.invalidate();
-  await utils.viewer.organizations.adminGet.invalidate({
-    id: data.orgId,
-  });
-  // Due to some super weird reason, just invalidate doesn't work, so do refetch as well.
-  await utils.viewer.organizations.adminGet.refetch({
-    id: data.orgId,
-  });
+  await Promise.all([
+    utils.viewer.organizations.adminGetAll.invalidate(),
+    utils.viewer.organizations.adminGet.invalidate({
+      id: data.orgId,
+    }),
+    utils.viewer.organizations.adminGet.refetch({
+      id: data.orgId,
+    }),
+  ]);
 }
diff --git a/apps/web/modules/ee/organizations/admin/views/SystemBlocklistView.tsx b/apps/web/modules/ee/organizations/admin/views/SystemBlocklistView.tsx
index 9b3faf98eaed3d..efafd1a6f1c8dd 100644
--- a/apps/web/modules/ee/organizations/admin/views/SystemBlocklistView.tsx
+++ b/apps/web/modules/ee/organizations/admin/views/SystemBlocklistView.tsx
@@ -89,9 +89,11 @@ function SystemBlocklistContent() {
 
   const addToWatchlist = trpc.viewer.admin.watchlist.addToWatchlist.useMutation({
     onSuccess: async () => {
-      await utils.viewer.admin.watchlist.listReports.invalidate();
-      await utils.viewer.admin.watchlist.list.invalidate();
-      await utils.viewer.admin.watchlist.pendingReportsCount.invalidate();
+      await Promise.all([
+        utils.viewer.admin.watchlist.listReports.invalidate(),
+        utils.viewer.admin.watchlist.list.invalidate(),
+        utils.viewer.admin.watchlist.pendingReportsCount.invalidate(),
+      ]);
       showToast(t("system_blocklist_entry_created"), "success");
     },
     onError: (error) => {
diff --git a/apps/web/modules/ee/organizations/components/TeamInviteFromOrg.tsx b/apps/web/modules/ee/organizations/components/TeamInviteFromOrg.tsx
index b109f370697d5c..91076d2b0e7c6d 100644
--- a/apps/web/modules/ee/organizations/components/TeamInviteFromOrg.tsx
+++ b/apps/web/modules/ee/organizations/components/TeamInviteFromOrg.tsx
@@ -67,8 +67,9 @@ function UserToInviteItem({
 }) {
   return (
     <div
+      role="presentation"
       key={member.userId}
-      onClick={() => onChange()} // We handle this on click on the div also - for a11y we handle it with label and checkbox below
+      onClick={() => onChange()}
       className={classNames(
         "flex cursor-pointer items-center rounded-md px-2 py-1 transition",
         isSelected ? "bg-emphasis" : "hover:bg-subtle "
diff --git a/apps/web/modules/ee/organizations/components/WelcomeToOrganizationsModal.tsx b/apps/web/modules/ee/organizations/components/WelcomeToOrganizationsModal.tsx
index f0c48f27cf29d7..20ae8d7da01492 100644
--- a/apps/web/modules/ee/organizations/components/WelcomeToOrganizationsModal.tsx
+++ b/apps/web/modules/ee/organizations/components/WelcomeToOrganizationsModal.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { motion } from "framer-motion";
+import { LazyMotion, domAnimation, m } from "framer-motion";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui/components/button";
@@ -30,6 +30,7 @@ export function WelcomeToOrganizationsModal() {
   const RING_STROKE = 1;
 
   return (
+    <LazyMotion features={domAnimation}>
     <Dialog open={isOpen} onOpenChange={(open) => !open && closeModal()}>
       <DialogContent size="default" className="flex max-h-[95vh] flex-col !p-0" enableOverflow>
         <div className="flex flex-1 flex-col overflow-y-auto">
@@ -102,7 +103,7 @@ export function WelcomeToOrganizationsModal() {
                   }
 
                   return (
-                    <motion.div
+                    <m.div
                       key={index}
                       className="from-default to-muted border-subtle absolute flex items-center justify-center rounded-full border bg-gradient-to-b shadow-sm"
                       style={{
@@ -129,7 +130,7 @@ export function WelcomeToOrganizationsModal() {
                         className="text-default"
                         style={{ width: SMALL.icon, height: SMALL.icon }}
                       />
-                    </motion.div>
+                    </m.div>
                   );
                 })}
               </div>
@@ -168,5 +169,6 @@ export function WelcomeToOrganizationsModal() {
         </div>
       </DialogContent>
     </Dialog>
+    </LazyMotion>
   );
 }
diff --git a/apps/web/modules/ee/organizations/delegationCredential.tsx b/apps/web/modules/ee/organizations/delegationCredential.tsx
index a66c6fededb367..e5dfc0d59e714a 100644
--- a/apps/web/modules/ee/organizations/delegationCredential.tsx
+++ b/apps/web/modules/ee/organizations/delegationCredential.tsx
@@ -278,6 +278,15 @@ function DelegationFormFields({
   );
 }
 
+const AddDwDButton = ({ onClick }: { onClick: () => void }) => {
+  const { t } = useLocale();
+  return (
+    <Button type="button" color="secondary" StartIcon="plus" className="mt-6" onClick={onClick}>
+      {t("add_delegation_credential")}
+    </Button>
+  );
+};
+
 function DelegationCredentialList() {
   const { t } = useLocale();
   const utils = trpc.useContext();
@@ -381,14 +390,6 @@ function DelegationCredentialList() {
     setCreateEditDialog({ isOpen: false, delegation: null });
   };
 
-  const AddDwDButton = () => {
-    return (
-      <Button type="button" color="secondary" StartIcon="plus" className="mt-6" onClick={onCreateClick}>
-        {t("add_delegation_credential")}
-      </Button>
-    );
-  };
-
   if (isLoading || isLoadingWorkspacePlatforms) {
     return <SkeletonLoader />;
   }
@@ -420,7 +421,7 @@ function DelegationCredentialList() {
             )}
           </ul>
           {/* Disable till we thoroughly test multiple delegation credentials support */}
-          {/* <AddDwDButton /> */}
+          {/* <AddDwDButton onClick={onCreateClick} /> */}
         </>
       ) : (
         <EmptyScreen
@@ -428,7 +429,7 @@ function DelegationCredentialList() {
           headline={t("add_delegation_credential")}
           description={t("delegation_credential_description")}
           className="rounded-b-lg rounded-t-none border-t-0"
-          buttonRaw={<AddDwDButton />}
+          buttonRaw={<AddDwDButton onClick={onCreateClick} />}
         />
       )}
 
diff --git a/apps/web/modules/ee/organizations/new/_components/AddNewTeamsForm.tsx b/apps/web/modules/ee/organizations/new/_components/AddNewTeamsForm.tsx
index 341e9f0337d977..77e831a952b052 100644
--- a/apps/web/modules/ee/organizations/new/_components/AddNewTeamsForm.tsx
+++ b/apps/web/modules/ee/organizations/new/_components/AddNewTeamsForm.tsx
@@ -157,9 +157,9 @@ const AddNewTeamsFormChild = ({ teams }: { teams: { id: number; name: string; sl
       <Form form={form} handleSubmit={handleFormSubmit}>
         {moveTeams.length ? (
           <>
-            <label className="text-emphasis mb-2 block text-sm font-medium leading-none">
+            <p className="text-emphasis mb-2 block text-sm font-medium leading-none">
               Move existing teams
-            </label>
+            </p>
             <ul className="mb-8 stack-y-4">
               {moveTeams.map((team, index) => {
                 const currentTeam = teams.find((t) => t.id === team.id);
@@ -199,7 +199,7 @@ const AddNewTeamsFormChild = ({ teams }: { teams: { id: number; name: string; sl
             </ul>
           </>
         ) : null}
-        <label className="text-emphasis mb-2 block text-sm font-medium leading-none">Add New Teams</label>
+        <p className="text-emphasis mb-2 block text-sm font-medium leading-none">Add New Teams</p>
         {fields.map((field, index) => (
           <div className={classNames("relative", index > 0 ? "mb-2" : "")} key={field.id}>
             <TextField
diff --git a/apps/web/modules/ee/organizations/new/_components/PaymentStatusView.tsx b/apps/web/modules/ee/organizations/new/_components/PaymentStatusView.tsx
index e9b00e86e4caba..6462a2c5f1558a 100644
--- a/apps/web/modules/ee/organizations/new/_components/PaymentStatusView.tsx
+++ b/apps/web/modules/ee/organizations/new/_components/PaymentStatusView.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useRouter, useSearchParams } from "next/navigation";
-import { useEffect, useState } from "react";
+import { Suspense, useEffect, useState } from "react";
 
 import { useOnboarding } from "@calcom/web/modules/ee/organizations/lib/onboardingStore";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -9,7 +9,7 @@ import { trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui/components/button";
 import { CheckIcon, XIcon } from "@coss/ui/icons";
 
-const PaymentStatusView = () => {
+const PaymentStatusViewInner = () => {
   const { t } = useLocale();
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -63,4 +63,12 @@ const PaymentStatusView = () => {
   );
 };
 
+const PaymentStatusView = () => {
+  return (
+    <Suspense>
+      <PaymentStatusViewInner />
+    </Suspense>
+  );
+};
+
 export default PaymentStatusView;
diff --git a/apps/web/modules/ee/organizations/new/resume-view.tsx b/apps/web/modules/ee/organizations/new/resume-view.tsx
index e9fe618ea08312..54a94983e7f5eb 100644
--- a/apps/web/modules/ee/organizations/new/resume-view.tsx
+++ b/apps/web/modules/ee/organizations/new/resume-view.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useRouter, useSearchParams } from "next/navigation";
-import { useEffect } from "react";
+import { Suspense, useEffect } from "react";
 
 import { useOnboarding } from "@calcom/web/modules/ee/organizations/lib/onboardingStore";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -14,7 +14,7 @@ export const LayoutWrapper = ({ children }: { children: React.ReactNode }) => {
   return <OrganizationWizardLayout currentStep={1}>{children}</OrganizationWizardLayout>;
 };
 
-const ResumeOnboardingView = () => {
+const ResumeOnboardingViewInner = () => {
   const { t } = useLocale();
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -108,4 +108,12 @@ const ResumeOnboardingView = () => {
   );
 };
 
+const ResumeOnboardingView = () => {
+  return (
+    <Suspense>
+      <ResumeOnboardingViewInner />
+    </Suspense>
+  );
+};
+
 export default ResumeOnboardingView;
diff --git a/apps/web/modules/ee/organizations/privacy/blocklist-table.tsx b/apps/web/modules/ee/organizations/privacy/blocklist-table.tsx
index f5a1e8d770d0aa..87852b0e725fe7 100644
--- a/apps/web/modules/ee/organizations/privacy/blocklist-table.tsx
+++ b/apps/web/modules/ee/organizations/privacy/blocklist-table.tsx
@@ -95,9 +95,11 @@ export function BlocklistTable({ permissions }: BlocklistTableProps) {
 
   const addToWatchlist = trpc.viewer.organizations.addToWatchlist.useMutation({
     onSuccess: async () => {
-      await utils.viewer.organizations.listBookingReports.invalidate();
-      await utils.viewer.organizations.listWatchlistEntries.invalidate();
-      await utils.viewer.organizations.pendingReportsCount.invalidate();
+      await Promise.all([
+        utils.viewer.organizations.listBookingReports.invalidate(),
+        utils.viewer.organizations.listWatchlistEntries.invalidate(),
+        utils.viewer.organizations.pendingReportsCount.invalidate(),
+      ]);
       showToast(t("blocklist_entry_created"), "success");
     },
     onError: (error) => {
diff --git a/apps/web/modules/ee/posthog/PostHogPageView.tsx b/apps/web/modules/ee/posthog/PostHogPageView.tsx
index 913863071ab639..9c76ff16162d9b 100644
--- a/apps/web/modules/ee/posthog/PostHogPageView.tsx
+++ b/apps/web/modules/ee/posthog/PostHogPageView.tsx
@@ -2,7 +2,7 @@
 
 import { usePathname, useSearchParams } from "next/navigation";
 import { usePostHog } from "posthog-js/react";
-import { useEffect } from "react";
+import { Suspense, useEffect } from "react";
 
 const TRACKED_ROUTES = [
   "/signup",
@@ -13,7 +13,7 @@ const TRACKED_ROUTES = [
   "/settings/teams",
 ];
 
-export default function PostHogPageView() {
+function PostHogPageViewInner() {
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const posthog = usePostHog();
@@ -37,3 +37,11 @@ export default function PostHogPageView() {
 
   return null;
 }
+
+export default function PostHogPageView() {
+  return (
+    <Suspense>
+      <PostHogPageViewInner />
+    </Suspense>
+  );
+}
diff --git a/apps/web/modules/ee/support/lib/intercom/provider.tsx b/apps/web/modules/ee/support/lib/intercom/provider.tsx
index 523717e3d84e9d..13a076857c7b93 100644
--- a/apps/web/modules/ee/support/lib/intercom/provider.tsx
+++ b/apps/web/modules/ee/support/lib/intercom/provider.tsx
@@ -2,7 +2,7 @@
 
 import { useSession } from "next-auth/react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { useEffect, type FC } from "react";
+import { Suspense, useEffect, type FC } from "react";
 import { IntercomProvider } from "react-use-intercom";
 
 import { useFlagMap } from "@calcom/features/flags/context/provider";
@@ -26,7 +26,7 @@ function IntercomBootstrap() {
   return null;
 }
 
-const Provider: FC<{ children: React.ReactNode }> = ({ children }) => {
+const ProviderInner: FC<{ children: React.ReactNode }> = ({ children }) => {
   const { hasPaidPlan } = useHasPaidPlan();
   const isMobile = useMediaQuery("(max-width: 768px)");
   const flagMap = useFlagMap();
@@ -91,4 +91,12 @@ const Provider: FC<{ children: React.ReactNode }> = ({ children }) => {
   );
 };
 
+const Provider: FC<{ children: React.ReactNode }> = ({ children }) => {
+  return (
+    <Suspense>
+      <ProviderInner>{children}</ProviderInner>
+    </Suspense>
+  );
+};
+
 export default Provider;
diff --git a/apps/web/modules/ee/teams/components/AddNewTeamMembers.tsx b/apps/web/modules/ee/teams/components/AddNewTeamMembers.tsx
index a30dd845059ee6..cc3536921f3271 100644
--- a/apps/web/modules/ee/teams/components/AddNewTeamMembers.tsx
+++ b/apps/web/modules/ee/teams/components/AddNewTeamMembers.tsx
@@ -207,9 +207,11 @@ const PendingMemberItem = (props: { member: TeamMember; index: number; teamId: n
   const bookerUrl = member.bookerUrl;
   const removeMemberMutation = trpc.viewer.teams.removeMember.useMutation({
     async onSuccess() {
-      await utils.viewer.teams.get.invalidate();
-      await utils.viewer.teams.listMembers.invalidate();
-      await utils.viewer.eventTypes.invalidate();
+      await Promise.all([
+        utils.viewer.teams.get.invalidate(),
+        utils.viewer.teams.listMembers.invalidate(),
+        utils.viewer.eventTypes.invalidate(),
+      ]);
       showToast(t("member_removed"), "success");
     },
     async onError(err) {
diff --git a/apps/web/modules/ee/teams/components/CreateANewTeamForm.tsx b/apps/web/modules/ee/teams/components/CreateANewTeamForm.tsx
index 52789f3be8783c..a9b2e2b04fe1ce 100644
--- a/apps/web/modules/ee/teams/components/CreateANewTeamForm.tsx
+++ b/apps/web/modules/ee/teams/components/CreateANewTeamForm.tsx
@@ -27,6 +27,40 @@ interface CreateANewTeamFormProps {
   slug?: string;
 }
 
+const FormButtons = ({
+  isPending,
+  isSubmitting,
+  onCancel,
+  submitLabel,
+}: {
+  isPending: boolean;
+  isSubmitting: boolean;
+  onCancel: () => void;
+  submitLabel: string;
+}) => {
+  const { t } = useLocale();
+  return (
+    <>
+      <Button
+        disabled={isPending}
+        color="secondary"
+        onClick={onCancel}
+        className="w-full justify-center">
+        {t("cancel")}
+      </Button>
+      <Button
+        disabled={isSubmitting || isPending}
+        color="primary"
+        EndIcon="arrow-right"
+        type="submit"
+        className="w-full justify-center"
+        data-testid="continue-button">
+        {t(submitLabel)}
+      </Button>
+    </>
+  );
+};
+
 export const CreateANewTeamForm = (props: CreateANewTeamFormProps) => {
   const { inDialog, onCancel, slug, submitLabel, onSuccess } = props;
   const { t, isLocaleReady } = useLocale();
@@ -43,9 +77,11 @@ export const CreateANewTeamForm = (props: CreateANewTeamFormProps) => {
 
   const createTeamMutation = trpc.viewer.teams.create.useMutation({
     onSuccess: async (data) => {
-      await utils.viewer.eventTypes.getUserEventGroups.invalidate();
-      await revalidateEventTypesList();
-      await revalidateTeamsList();
+      await Promise.all([
+        utils.viewer.eventTypes.getUserEventGroups.invalidate(),
+        revalidateEventTypesList(),
+        revalidateTeamsList(),
+      ]);
       onSuccess(data);
     },
 
@@ -58,27 +94,6 @@ export const CreateANewTeamForm = (props: CreateANewTeamFormProps) => {
     },
   });
 
-  const FormButtons = () => (
-    <>
-      <Button
-        disabled={createTeamMutation.isPending}
-        color="secondary"
-        onClick={onCancel}
-        className="w-full justify-center">
-        {t("cancel")}
-      </Button>
-      <Button
-        disabled={newTeamFormMethods.formState.isSubmitting || createTeamMutation.isPending}
-        color="primary"
-        EndIcon="arrow-right"
-        type="submit"
-        className="w-full justify-center"
-        data-testid="continue-button">
-        {t(submitLabel)}
-      </Button>
-    </>
-  );
-
   return (
     <>
       <Form
@@ -165,12 +180,22 @@ export const CreateANewTeamForm = (props: CreateANewTeamFormProps) => {
         {inDialog ? (
           <DialogFooter>
             <div className="flex space-x-2 rtl:space-x-reverse">
-              <FormButtons />
+              <FormButtons
+                isPending={createTeamMutation.isPending}
+                isSubmitting={newTeamFormMethods.formState.isSubmitting}
+                onCancel={onCancel}
+                submitLabel={submitLabel}
+              />
             </div>
           </DialogFooter>
         ) : (
           <div className="flex space-x-2 rtl:space-x-reverse">
-            <FormButtons />
+            <FormButtons
+              isPending={createTeamMutation.isPending}
+              isSubmitting={newTeamFormMethods.formState.isSubmitting}
+              onCancel={onCancel}
+              submitLabel={submitLabel}
+            />
           </div>
         )}
       </Form>
diff --git a/apps/web/modules/ee/teams/components/DeleteBulkTeamMembers.tsx b/apps/web/modules/ee/teams/components/DeleteBulkTeamMembers.tsx
index 2d60af46eab162..00e4ec2d9b594e 100644
--- a/apps/web/modules/ee/teams/components/DeleteBulkTeamMembers.tsx
+++ b/apps/web/modules/ee/teams/components/DeleteBulkTeamMembers.tsx
@@ -21,10 +21,12 @@ export default function DeleteBulkTeamMembers({ users, onRemove, isOrg, teamId }
   const utils = trpc.useUtils();
   const deleteMutation = trpc.viewer.teams.removeMember.useMutation({
     async onSuccess() {
-      await utils.viewer.teams.get.invalidate();
-      await utils.viewer.eventTypes.invalidate();
-      await utils.viewer.organizations.listMembers.invalidate();
-      await utils.viewer.organizations.getMembers.invalidate();
+      await Promise.all([
+        utils.viewer.teams.get.invalidate(),
+        utils.viewer.eventTypes.invalidate(),
+        utils.viewer.organizations.listMembers.invalidate(),
+        utils.viewer.organizations.getMembers.invalidate(),
+      ]);
       showToast("Deleted Users", "success");
     },
     async onError(err) {
diff --git a/apps/web/modules/ee/teams/components/EditMemberSheet.tsx b/apps/web/modules/ee/teams/components/EditMemberSheet.tsx
index 694217455b9ad5..cacaf4c1375e60 100644
--- a/apps/web/modules/ee/teams/components/EditMemberSheet.tsx
+++ b/apps/web/modules/ee/teams/components/EditMemberSheet.tsx
@@ -172,13 +172,13 @@ export function EditMemberSheet({
   const appList = (connectedApps || []).map(({ logo, name, externalId }) => {
     return logo ? (
       externalId ? (
-        <div className="ltr:mr-2 rtl:ml-2 ">
+        <div key={name} className="ltr:mr-2 rtl:ml-2 ">
           <Tooltip content={externalId}>
             <img className="h-5 w-5" src={logo} alt={`${name} logo`} />
           </Tooltip>
         </div>
       ) : (
-        <div className="ltr:mr-2 rtl:ml-2">
+        <div key={name} className="ltr:mr-2 rtl:ml-2">
           <img className="h-5 w-5" src={logo} alt={`${name} logo`} />
         </div>
       )
diff --git a/apps/web/modules/ee/teams/components/GoogleWorkspaceInviteButton.tsx b/apps/web/modules/ee/teams/components/GoogleWorkspaceInviteButton.tsx
index b67d1c93736e72..7d318d8f9debc8 100644
--- a/apps/web/modules/ee/teams/components/GoogleWorkspaceInviteButton.tsx
+++ b/apps/web/modules/ee/teams/components/GoogleWorkspaceInviteButton.tsx
@@ -11,7 +11,7 @@ import { Tooltip } from "@calcom/ui/components/tooltip";
 
 const GoogleIcon = () => (
   <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g clip-path="url(#clip0_4178_176214)">
+    <g clipPath="url(#clip0_4178_176214)">
       <path
         d="M8.31875 15.36C4.26 15.36 0.9575 12.0588 0.9575 8.00001C0.9575 3.94126 4.26 0.640015 8.31875 0.640015C10.1575 0.640015 11.9175 1.32126 13.2763 2.55876L13.5238 2.78501L11.0963 5.21251L10.8713 5.02001C10.1588 4.41001 9.2525 4.07376 8.31875 4.07376C6.15375 4.07376 4.39125 5.83501 4.39125 8.00001C4.39125 10.165 6.15375 11.9263 8.31875 11.9263C9.88 11.9263 11.1138 11.1288 11.695 9.77001H7.99875V6.45626L15.215 6.46626L15.2688 6.72001C15.645 8.50626 15.3438 11.1338 13.8188 13.0138C12.5563 14.57 10.7063 15.36 8.31875 15.36Z"
         fill="#6B7280"
diff --git a/apps/web/modules/ee/teams/components/MakeTeamPrivateSwitch.tsx b/apps/web/modules/ee/teams/components/MakeTeamPrivateSwitch.tsx
index 883adaf307b1f1..7b63b2b6e2bcb9 100644
--- a/apps/web/modules/ee/teams/components/MakeTeamPrivateSwitch.tsx
+++ b/apps/web/modules/ee/teams/components/MakeTeamPrivateSwitch.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useRef, useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
@@ -31,6 +31,11 @@ const MakeTeamPrivateSwitch = ({
   });
 
   const [isTeamPrivate, setTeamPrivate] = useState(isPrivate);
+  const prevIsPrivate = useRef(isPrivate);
+  if (prevIsPrivate.current !== isPrivate) {
+    prevIsPrivate.current = isPrivate;
+    setTeamPrivate(isPrivate);
+  }
 
   return (
     <>
diff --git a/apps/web/modules/ee/teams/components/MemberInvitationModal.tsx b/apps/web/modules/ee/teams/components/MemberInvitationModal.tsx
index 6e3c00eb5050f3..b6d0743ea9a772 100644
--- a/apps/web/modules/ee/teams/components/MemberInvitationModal.tsx
+++ b/apps/web/modules/ee/teams/components/MemberInvitationModal.tsx
@@ -529,9 +529,11 @@ export const MemberInvitationModalWithoutMembers = ({
           },
           {
             onSuccess: async (data) => {
-              await utils.viewer.teams.get.invalidate();
-              await utils.viewer.teams.listMembers.invalidate();
-              await utils.viewer.organizations.getMembers.invalidate();
+              await Promise.all([
+                utils.viewer.teams.get.invalidate(),
+                utils.viewer.teams.listMembers.invalidate(),
+                utils.viewer.organizations.getMembers.invalidate(),
+              ]);
               hideInvitationModal();
 
               if (Array.isArray(data.usernameOrEmail)) {
diff --git a/apps/web/modules/ee/teams/components/MemberList.tsx b/apps/web/modules/ee/teams/components/MemberList.tsx
index 7af6d2634c9d3a..0c10b46eeb856b 100644
--- a/apps/web/modules/ee/teams/components/MemberList.tsx
+++ b/apps/web/modules/ee/teams/components/MemberList.tsx
@@ -270,10 +270,12 @@ function MemberListContent(props: Props) {
       return { previousValue };
     },
     async onSuccess() {
-      await utils.viewer.teams.get.invalidate();
-      await utils.viewer.eventTypes.invalidate();
-      await utils.viewer.organizations.listMembers.invalidate();
-      await utils.viewer.organizations.getMembers.invalidate();
+      await Promise.all([
+        utils.viewer.teams.get.invalidate(),
+        utils.viewer.eventTypes.invalidate(),
+        utils.viewer.organizations.listMembers.invalidate(),
+        utils.viewer.organizations.getMembers.invalidate(),
+      ]);
       showToast(t("success"), "success");
     },
     async onError(err) {
diff --git a/apps/web/modules/ee/teams/components/TeamAvailabilityModal.tsx b/apps/web/modules/ee/teams/components/TeamAvailabilityModal.tsx
index a67bb4a5dd3040..0de93e2726a2e9 100644
--- a/apps/web/modules/ee/teams/components/TeamAvailabilityModal.tsx
+++ b/apps/web/modules/ee/teams/components/TeamAvailabilityModal.tsx
@@ -22,7 +22,7 @@ interface Props {
 
 export default function TeamAvailabilityModal(props: Props) {
   const utils = trpc.useUtils();
-  const [selectedDate, setSelectedDate] = useState(dayjs());
+  const [selectedDate, setSelectedDate] = useState(() => dayjs());
   const [selectedTimeZone, setSelectedTimeZone] = useState<ITimezone>(
     localStorage.getItem("timeOption.preferredTimeZone") || CURRENT_TIMEZONE
   );
@@ -65,7 +65,6 @@ export default function TeamAvailabilityModal(props: Props) {
               <Label className="mt-4">{t("timezone")}</Label>
               <TimezoneSelect
                 id="timeZone"
-                autoFocus
                 value={selectedTimeZone}
                 className="w-64 rounded-md"
                 onChange={(timezone) => setSelectedTimeZone(timezone.value)}
diff --git a/apps/web/modules/ee/teams/components/TeamAvailabilityTimes.tsx b/apps/web/modules/ee/teams/components/TeamAvailabilityTimes.tsx
index 765341a099bd55..a3a2accb5d7c48 100644
--- a/apps/web/modules/ee/teams/components/TeamAvailabilityTimes.tsx
+++ b/apps/web/modules/ee/teams/components/TeamAvailabilityTimes.tsx
@@ -67,11 +67,11 @@ export default function TeamAvailabilityTimes(props: Props) {
       <div className="max-h-[390px] overflow-scroll">
         {slots.map((slot) => (
           <div key={slot.time.format()} className="flex flex-row items-center ">
-            <a
+            <div
               className="min-w-48 border-brand-default text-bookingdarker  bg-default mb-2 mr-3 block grow rounded-md border py-2 text-center font-medium dark:border-transparent dark:bg-gray-600 "
               data-testid="time">
               {slot.time.tz(props.selectedTimeZone.toString()).format("HH:mm")}
-            </a>
+            </div>
           </div>
         ))}
       </div>
diff --git a/apps/web/modules/ee/teams/components/TeamInviteListItem.tsx b/apps/web/modules/ee/teams/components/TeamInviteListItem.tsx
index 1f522566b45167..9a55c8208b9e9c 100644
--- a/apps/web/modules/ee/teams/components/TeamInviteListItem.tsx
+++ b/apps/web/modules/ee/teams/components/TeamInviteListItem.tsx
@@ -41,11 +41,13 @@ export default function TeamInviteListItem(props: Props) {
   const acceptOrLeaveMutation = trpc.viewer.teams.acceptOrLeave.useMutation({
     onSuccess: async () => {
       showToast(t("success"), "success");
-      await utils.viewer.teams.get.invalidate();
-      await utils.viewer.teams.hasTeamPlan.invalidate();
-      await utils.viewer.teams.list.invalidate();
+      await Promise.all([
+        utils.viewer.teams.get.invalidate(),
+        utils.viewer.teams.hasTeamPlan.invalidate(),
+        utils.viewer.teams.list.invalidate(),
+        utils.viewer.organizations.listMembers.invalidate(),
+      ]);
       revalidateTeamsList();
-      await utils.viewer.organizations.listMembers.invalidate();
     },
   });
 
diff --git a/apps/web/modules/ee/teams/components/TeamsListing.tsx b/apps/web/modules/ee/teams/components/TeamsListing.tsx
index bdb3eab907bd68..da01df2e5fd08b 100644
--- a/apps/web/modules/ee/teams/components/TeamsListing.tsx
+++ b/apps/web/modules/ee/teams/components/TeamsListing.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useRouter, useSearchParams } from "next/navigation";
-import { useEffect, useMemo } from "react";
+import { Suspense, useEffect, useMemo } from "react";
 
 import { APP_NAME, WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -37,7 +37,7 @@ type TeamsListingProps = {
   errorMsgFromInvite: string | null;
 };
 
-export function TeamsListing({
+function TeamsListingInner({
   invitationAccepted,
   orgId,
   permissions,
@@ -188,3 +188,11 @@ export function TeamsListing({
     </>
   );
 }
+
+export function TeamsListing(props: TeamsListingProps) {
+  return (
+    <Suspense>
+      <TeamsListingInner {...props} />
+    </Suspense>
+  );
+}
diff --git a/apps/web/modules/ee/users/components/UserForm.tsx b/apps/web/modules/ee/users/components/UserForm.tsx
index 31a5616d8b1832..f9a6cb74f04180 100644
--- a/apps/web/modules/ee/users/components/UserForm.tsx
+++ b/apps/web/modules/ee/users/components/UserForm.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { noop } from "lodash";
+import noop from "lodash/noop";
 import { Controller, useForm } from "react-hook-form";
 
 import { TimezoneSelect } from "@calcom/web/modules/timezone/components/TimezoneSelect";
diff --git a/apps/web/modules/ee/workflows/components/TestPhoneCallDialog.tsx b/apps/web/modules/ee/workflows/components/TestPhoneCallDialog.tsx
index 5d52e6899ff379..a16e6391f45bbc 100644
--- a/apps/web/modules/ee/workflows/components/TestPhoneCallDialog.tsx
+++ b/apps/web/modules/ee/workflows/components/TestPhoneCallDialog.tsx
@@ -23,13 +23,15 @@ interface TestPhoneCallDialogProps {
   outboundEventTypeId?: number | null;
 }
 
+const EMPTY_EVENT_TYPE_IDS: number[] = [];
+
 export function TestPhoneCallDialog({
   open,
   onOpenChange,
   agentId,
   teamId,
   form,
-  eventTypeIds = [],
+  eventTypeIds = EMPTY_EVENT_TYPE_IDS,
   outboundEventTypeId,
 }: TestPhoneCallDialogProps) {
   const { t } = useLocale();
diff --git a/apps/web/modules/ee/workflows/components/WebCallDialog.tsx b/apps/web/modules/ee/workflows/components/WebCallDialog.tsx
index f6056b188b8044..7339eeadbae2ac 100644
--- a/apps/web/modules/ee/workflows/components/WebCallDialog.tsx
+++ b/apps/web/modules/ee/workflows/components/WebCallDialog.tsx
@@ -42,6 +42,8 @@ interface TranscriptEntry {
 
 type CallStatus = "idle" | "connecting" | "active" | "ended" | "error";
 
+const EMPTY_EVENT_TYPE_IDS: number[] = [];
+
 export function WebCallDialog({
   open,
   onOpenChange,
@@ -49,7 +51,7 @@ export function WebCallDialog({
   teamId,
   isOrganization = false,
   form,
-  eventTypeIds = [],
+  eventTypeIds = EMPTY_EVENT_TYPE_IDS,
   outboundEventTypeId,
 }: WebCallDialogProps) {
   const { t } = useLocale();
diff --git a/apps/web/modules/ee/workflows/components/WorkflowCreationDialog.tsx b/apps/web/modules/ee/workflows/components/WorkflowCreationDialog.tsx
index 113576b8c1b2cc..a3f1f20b815089 100644
--- a/apps/web/modules/ee/workflows/components/WorkflowCreationDialog.tsx
+++ b/apps/web/modules/ee/workflows/components/WorkflowCreationDialog.tsx
@@ -29,8 +29,16 @@ function WorkflowOptionCard(props: WorkflowOptionCardProps) {
 
   return (
     <div
+      role="button"
+      tabIndex={0}
       data-testid={`workflow-option-card-${value}`}
       onClick={onClick}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick();
+        }
+      }}
       className={cn(
         `relative flex flex-1 cursor-pointer flex-col rounded-lg border p-4 transition-colors`,
         isSelected ? "border-brand-default" : "border-subtle hover:border-emphasis"
diff --git a/apps/web/modules/ee/workflows/components/WorkflowDetailsPage.tsx b/apps/web/modules/ee/workflows/components/WorkflowDetailsPage.tsx
index f564e5490a3b9c..84aacf89718c4b 100644
--- a/apps/web/modules/ee/workflows/components/WorkflowDetailsPage.tsx
+++ b/apps/web/modules/ee/workflows/components/WorkflowDetailsPage.tsx
@@ -20,7 +20,7 @@ import { useAgentsData } from "@calcom/web/modules/ee/workflows/hooks/useAgentsD
 import { ArrowRightIcon, ZapIcon } from "@coss/ui/icons";
 import { useSearchParams } from "next/navigation";
 import type { Dispatch, SetStateAction } from "react";
-import { useEffect, useState } from "react";
+import { Suspense, useEffect, useState } from "react";
 import type { UseFormReturn } from "react-hook-form";
 
 import { AddActionDialog } from "./AddActionDialog";
@@ -42,7 +42,7 @@ interface Props {
   permissions: WorkflowPermissions;
 }
 
-export default function WorkflowDetailsPage(props: Props) {
+function WorkflowDetailsPageInner(props: Props) {
   const {
     form,
     workflowId,
@@ -330,3 +330,11 @@ export default function WorkflowDetailsPage(props: Props) {
     </>
   );
 }
+
+export default function WorkflowDetailsPage(props: Props) {
+  return (
+    <Suspense>
+      <WorkflowDetailsPageInner {...props} />
+    </Suspense>
+  );
+}
diff --git a/apps/web/modules/ee/workflows/components/WorkflowStepContainer.tsx b/apps/web/modules/ee/workflows/components/WorkflowStepContainer.tsx
index 150b7a89fcb602..a1928afed1ec54 100644
--- a/apps/web/modules/ee/workflows/components/WorkflowStepContainer.tsx
+++ b/apps/web/modules/ee/workflows/components/WorkflowStepContainer.tsx
@@ -1,7 +1,7 @@
 import { type TFunction } from "i18next";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
 import type { Dispatch, SetStateAction } from "react";
-import { useEffect, useRef, useState, useCallback } from "react";
+import { Suspense, useEffect, useRef, useState, useCallback } from "react";
 import type { UseFormReturn } from "react-hook-form";
 import { Controller, useWatch } from "react-hook-form";
 import "react-phone-number-input/style.css";
@@ -156,7 +156,7 @@ const getActivePhoneNumbers = (
   );
 };
 
-export default function WorkflowStepContainer(props: WorkflowStepProps) {
+function WorkflowStepContainerInner(props: WorkflowStepProps) {
   const { t, i18n } = useLocale();
   const utils = trpc.useUtils();
   const params = useParams();
@@ -303,7 +303,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
     name: "trigger",
   });
 
-  const [timeSectionText, setTimeSectionText] = useState(getTimeSectionText(trigger, t));
+  const [timeSectionText, setTimeSectionText] = useState(() => getTimeSectionText(trigger, t));
   const isCreatingAgent = useRef(false);
   const hasAutoCreated = useRef(false);
 
@@ -411,8 +411,8 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
     !!step &&
     !!verifiedEmails.find((email: string) => email === form.getValues(`steps.${step.stepNumber - 1}.sendTo`));
 
-  const [numberVerified, setNumberVerified] = useState(getNumberVerificationStatus());
-  const [emailVerified, setEmailVerified] = useState(getEmailVerificationStatus());
+  const [numberVerified, setNumberVerified] = useState(() => getNumberVerificationStatus());
+  const [emailVerified, setEmailVerified] = useState(() => getEmailVerificationStatus());
 
   // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally only run when verifiedNumbers.length changes
   useEffect(() => setNumberVerified(getNumberVerificationStatus()), [verifiedNumbers.length]);
@@ -889,6 +889,8 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
           {stepAgentId && agentData && (
             <div className="bg-cal-muted mt-4 rounded-lg p-4">
               <div
+                role="button"
+                tabIndex={0}
                 className="flex cursor-pointer items-center justify-between"
                 onClick={(e) => {
                   const target = e.target as HTMLElement;
@@ -905,6 +907,17 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                       activeTab: "outgoingCalls",
                     });
                   }
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    if (!props.readOnly) {
+                      setAgentConfigurationSheet({
+                        open: true,
+                        activeTab: "outgoingCalls",
+                      });
+                    }
+                  }
                 }}>
                 <div>
                   <h3 className="text-emphasis text-base font-medium">{t("cal_ai_agent")}</h3>
@@ -924,7 +937,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                     </div>
                   )}
                 </div>
-                <div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
+                <div role="presentation" className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
                   {arePhoneNumbersActive.length > 0 ? (
                     <Dropdown>
                       <DropdownMenuTrigger asChild>
@@ -1806,3 +1819,11 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
 
   return <></>;
 }
+
+export default function WorkflowStepContainer(props: WorkflowStepProps) {
+  return (
+    <Suspense>
+      <WorkflowStepContainerInner {...props} />
+    </Suspense>
+  );
+}
diff --git a/apps/web/modules/ee/workflows/components/agent-configuration/AgentConfigurationSheet.tsx b/apps/web/modules/ee/workflows/components/agent-configuration/AgentConfigurationSheet.tsx
index c730d96d54b978..b318c0b6f6bf70 100644
--- a/apps/web/modules/ee/workflows/components/agent-configuration/AgentConfigurationSheet.tsx
+++ b/apps/web/modules/ee/workflows/components/agent-configuration/AgentConfigurationSheet.tsx
@@ -52,6 +52,8 @@ type AgentConfigurationSheetProps = {
   eventTypeOptions?: Option[];
 };
 
+const EMPTY_EVENT_TYPE_OPTIONS: Option[] = [];
+
 export function AgentConfigurationSheet({
   open,
   activeTab: _activeTab,
@@ -66,7 +68,7 @@ export function AgentConfigurationSheet({
   workflowId,
   workflowStepId,
   form,
-  eventTypeOptions = [],
+  eventTypeOptions = EMPTY_EVENT_TYPE_OPTIONS,
 }: AgentConfigurationSheetProps) {
   const { t } = useLocale();
   const utils = trpc.useUtils();
diff --git a/apps/web/modules/ee/workflows/components/agent-configuration/components/tabs/OutgoingCallsTab.tsx b/apps/web/modules/ee/workflows/components/agent-configuration/components/tabs/OutgoingCallsTab.tsx
index 41697f76d329e5..5d9eb898e7d007 100644
--- a/apps/web/modules/ee/workflows/components/agent-configuration/components/tabs/OutgoingCallsTab.tsx
+++ b/apps/web/modules/ee/workflows/components/agent-configuration/components/tabs/OutgoingCallsTab.tsx
@@ -20,10 +20,12 @@ interface OutgoingCallsTabProps {
   trigger?: WorkflowTriggerEvents;
 }
 
+const EMPTY_EVENT_TYPE_OPTIONS: Option[] = [];
+
 export function OutgoingCallsTab({
   outboundAgentForm,
   readOnly = false,
-  eventTypeOptions = [],
+  eventTypeOptions = EMPTY_EVENT_TYPE_OPTIONS,
   trigger,
 }: OutgoingCallsTabProps) {
   const [isVoiceDialogOpen, setIsVoiceDialogOpen] = useState(false);
diff --git a/apps/web/modules/ee/workflows/components/agent-configuration/components/tabs/PhoneNumberTab.tsx b/apps/web/modules/ee/workflows/components/agent-configuration/components/tabs/PhoneNumberTab.tsx
index 2716b09b93a1c6..3696236e508f8d 100644
--- a/apps/web/modules/ee/workflows/components/agent-configuration/components/tabs/PhoneNumberTab.tsx
+++ b/apps/web/modules/ee/workflows/components/agent-configuration/components/tabs/PhoneNumberTab.tsx
@@ -41,6 +41,8 @@ interface PhoneNumberTabProps {
   eventTypeIds?: number[];
 }
 
+const EMPTY_EVENT_TYPE_IDS: number[] = [];
+
 export function PhoneNumberTab({
   agentData,
   readOnly = false,
@@ -49,7 +51,7 @@ export function PhoneNumberTab({
   workflowId,
   isOrganization = false,
   form,
-  eventTypeIds = [],
+  eventTypeIds = EMPTY_EVENT_TYPE_IDS,
 }: PhoneNumberTabProps) {
   const { t } = useLocale();
   const utils = trpc.useUtils();
diff --git a/apps/web/modules/ee/workflows/views/WorkflowPage.tsx b/apps/web/modules/ee/workflows/views/WorkflowPage.tsx
index c85ef06e551321..14f4542fd57814 100644
--- a/apps/web/modules/ee/workflows/views/WorkflowPage.tsx
+++ b/apps/web/modules/ee/workflows/views/WorkflowPage.tsx
@@ -3,7 +3,7 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useSession } from "next-auth/react";
 import { useSearchParams } from "next/navigation";
-import { useEffect, useState } from "react";
+import { Suspense, useEffect, useState } from "react";
 import { useForm, useWatch } from "react-hook-form";
 import { Toaster } from "sonner";
 
@@ -49,7 +49,7 @@ type PageProps = {
   verifiedEmails?: Awaited<ReturnType<typeof WorkflowRepository.getVerifiedEmails>>;
 };
 
-function WorkflowPage({
+function WorkflowPageInner({
   workflow: workflowId,
   workflowData: workflowDataProp,
   verifiedNumbers: verifiedNumbersProp,
@@ -460,13 +460,20 @@ function WorkflowPage({
                     onKeyDown={handleNameKeyDown}
                     onBlur={handleNameSubmit}
                     className="text-default focus:shadow-outline-gray-focused h-auto w-full whitespace-nowrap border-none p-1 text-sm font-semibold leading-none focus:ring-0"
-                    autoFocus
                   />
                 ) : (
                   <div className="group flex min-w-0 items-center gap-1">
                     <span
+                      role="button"
+                      tabIndex={0}
                       className="text-default hover:bg-cal-muted min-w-0 cursor-pointer truncate whitespace-nowrap rounded p-1 text-sm font-semibold leading-none"
-                      onClick={() => setIsEditingName(true)}>
+                      onClick={() => setIsEditingName(true)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.preventDefault();
+                          setIsEditingName(true);
+                        }
+                      }}>
                       {watchedName ? watchedName : isPending ? t("loading") : t("untitled")}
                     </span>
                     <Button
@@ -574,4 +581,12 @@ function WorkflowPage({
   );
 }
 
+function WorkflowPage(props: PageProps) {
+  return (
+    <Suspense>
+      <WorkflowPageInner {...props} />
+    </Suspense>
+  );
+}
+
 export default WorkflowPage;
diff --git a/apps/web/modules/event-types/components/AddMembersWithSwitch.tsx b/apps/web/modules/event-types/components/AddMembersWithSwitch.tsx
index 216487786398d1..523fe7245220dc 100644
--- a/apps/web/modules/event-types/components/AddMembersWithSwitch.tsx
+++ b/apps/web/modules/event-types/components/AddMembersWithSwitch.tsx
@@ -10,7 +10,7 @@ import { Segment } from "./Segment";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { AttributesQueryValue } from "@calcom/lib/raqb/types";
 import { Label, SettingsToggle } from "@calcom/ui/components/form";
-import { type ComponentProps, type Dispatch, type SetStateAction, useMemo } from "react";
+import type { ComponentProps, Dispatch, SetStateAction } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import type { Options } from "react-select";
 import { AddMembersWithSwitchWebWrapper } from "./AddMembersWithSwitchWebWrapper";
@@ -52,10 +52,12 @@ const sortByLabel = (a: ReturnType<typeof mapUserToValue>, b: ReturnType<typeof
   return 0;
 };
 
+const EMPTY_OPTIONS: Options<CheckedSelectOption> = [];
+
 const CheckedHostField = ({
   labelText,
   placeholder,
-  options = [],
+  options = EMPTY_OPTIONS,
   isFixed,
   value,
   onChange,
@@ -359,10 +361,7 @@ const AddMembersWithSwitchWrapper = ({
   containerClassName?: string;
 }) => {
   const isPlatform = useIsPlatform();
-  const AddMembersWithSwitchWrapped = useMemo(
-    () => (isPlatform ? AddMembersWithSwitchPlatformWrapper : AddMembersWithSwitchWebWrapper),
-    [isPlatform]
-  );
+  const AddMembersWithSwitchWrapped = isPlatform ? AddMembersWithSwitchPlatformWrapper : AddMembersWithSwitchWebWrapper;
   return (
     <div className="rounded-md">
       <div className={`flex flex-col rounded-md pb-2 pt-6 ${containerClassName}`}>
diff --git a/apps/web/modules/event-types/components/CheckedUserSelect.tsx b/apps/web/modules/event-types/components/CheckedUserSelect.tsx
index 201d23d4375aa1..e7b3be8457b6b1 100644
--- a/apps/web/modules/event-types/components/CheckedUserSelect.tsx
+++ b/apps/web/modules/event-types/components/CheckedUserSelect.tsx
@@ -15,9 +15,12 @@ export type CheckedUserSelectOption = {
   disabled?: boolean;
 };
 
+const EMPTY_OPTIONS: CheckedUserSelectOption[] = [];
+const EMPTY_VALUE: readonly CheckedUserSelectOption[] = [];
+
 export const CheckedUserSelect = ({
-  options = [],
-  value = [],
+  options = EMPTY_OPTIONS,
+  value = EMPTY_VALUE,
   ...props
 }: Omit<Props<CheckedUserSelectOption, true>, "value" | "onChange"> & {
   value?: readonly CheckedUserSelectOption[];
diff --git a/apps/web/modules/event-types/components/CreateEventTypeDialog.tsx b/apps/web/modules/event-types/components/CreateEventTypeDialog.tsx
index f95f93ea1c1754..98a7075566b070 100644
--- a/apps/web/modules/event-types/components/CreateEventTypeDialog.tsx
+++ b/apps/web/modules/event-types/components/CreateEventTypeDialog.tsx
@@ -64,6 +64,18 @@ const querySchema = z.object({
     .optional(),
 });
 
+const SubmitButton = (isPending: boolean) => {
+  const { t } = useLocale();
+  return (
+    <DialogFooter showDivider>
+      <DialogClose />
+      <Button type="submit" loading={isPending}>
+        {t("continue")}
+      </Button>
+    </DialogFooter>
+  );
+};
+
 export function CreateEventTypeDialog({ profileOptions }: { profileOptions: ProfileOption[] }) {
   const { t } = useLocale();
   const router = useRouter();
@@ -91,17 +103,6 @@ export function CreateEventTypeDialog({ profileOptions }: { profileOptions: Prof
     showToast(err, "error");
   };
 
-  const SubmitButton = (isPending: boolean) => {
-    return (
-      <DialogFooter showDivider>
-        <DialogClose />
-        <Button type="submit" loading={isPending}>
-          {t("continue")}
-        </Button>
-      </DialogFooter>
-    );
-  };
-
   const { form, createMutation, isManagedEventType } = useCreateEventType(onSuccessMutation, onErrorMutation);
 
   const urlPrefix = orgBranding?.fullDomain ?? process.env.NEXT_PUBLIC_WEBSITE_URL;
diff --git a/apps/web/modules/event-types/components/MultiDropdownSelect.tsx b/apps/web/modules/event-types/components/MultiDropdownSelect.tsx
index 442a0962a4cc6c..20bdc281811874 100644
--- a/apps/web/modules/event-types/components/MultiDropdownSelect.tsx
+++ b/apps/web/modules/event-types/components/MultiDropdownSelect.tsx
@@ -39,7 +39,10 @@ const LimitedChipsContainer = <Option, IsMulti extends boolean, Group extends Gr
   );
 };
 
-export const MultiDropdownSelect = ({ options = [], value = [], ...props }: Props) => {
+const EMPTY_OPTIONS: Props["options"] = [];
+const EMPTY_VALUE: Props["value"] = [];
+
+export const MultiDropdownSelect = ({ options = EMPTY_OPTIONS, value = EMPTY_VALUE, ...props }: Props) => {
   // const { t } = useLocale();
 
   return (
diff --git a/apps/web/modules/event-types/components/locations/HostLocations.tsx b/apps/web/modules/event-types/components/locations/HostLocations.tsx
index 86de74e4d5b1e5..01d6049ac69299 100644
--- a/apps/web/modules/event-types/components/locations/HostLocations.tsx
+++ b/apps/web/modules/event-types/components/locations/HostLocations.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useSession } from "next-auth/react";
+import Link from "next/link";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useFormContext } from "react-hook-form";
 import type { CSSObjectWithLabel } from "react-select";
@@ -113,12 +114,13 @@ const LocationInputDialog = ({
   const { t } = useLocale();
   const eventLocationType = locationOption ? getEventLocationType(locationOption.value) : null;
   const [inputValue, setInputValue] = useState(initialValue);
-
-  useEffect(() => {
-    if (isOpen) {
-      setInputValue(initialValue);
-    }
-  }, [isOpen, initialValue]);
+  const prevIsOpen = useRef(isOpen);
+  const prevInitialValue = useRef(initialValue);
+  if (isOpen && (isOpen !== prevIsOpen.current || initialValue !== prevInitialValue.current)) {
+    setInputValue(initialValue);
+  }
+  prevIsOpen.current = isOpen;
+  prevInitialValue.current = initialValue;
 
   const handleSave = () => {
     onSave(inputValue);
@@ -449,6 +451,13 @@ const useMassApplyDialogState = (isOpen: boolean) => {
   return { selectedType, setSelectedType, inputValue, setInputValue, reset };
 };
 
+const OptionWithIcon = ({ icon, label }: { icon?: string; label: string | null }) => (
+  <div className="flex items-center gap-3">
+    {icon && <img src={icon} alt="" className={`h-4 w-4 ${invertLogoOnDark(icon)}`} />}
+    <span>{label}</span>
+  </div>
+);
+
 const MassApplyLocationDialog = ({ isOpen, onClose, onApply, isApplying }: MassApplyLocationDialogProps) => {
   const { t } = useLocale();
   const { selectedType, setSelectedType, inputValue, setInputValue, reset } = useMassApplyDialogState(isOpen);
@@ -488,13 +497,6 @@ const MassApplyLocationDialog = ({ isOpen, onClose, onApply, isApplying }: MassA
     ? { value: selectedOption.value, label: selectedTranslatedLabel, icon: selectedOption.icon }
     : null;
 
-  const OptionWithIcon = ({ icon, label }: { icon?: string; label: string | null }) => (
-    <div className="flex items-center gap-3">
-      {icon && <img src={icon} alt="" className={`h-4 w-4 ${invertLogoOnDark(icon)}`} />}
-      <span>{label}</span>
-    </div>
-  );
-
   return (
     <Dialog open={isOpen} onOpenChange={(open) => !open && handleClose()}>
       <DialogContent>
@@ -601,7 +603,7 @@ const useFetchMoreOnScroll = (
     const container = containerRef.current;
     if (!container) return;
 
-    container.addEventListener("scroll", handleScroll);
+    container.addEventListener("scroll", handleScroll, { passive: true });
     return () => container.removeEventListener("scroll", handleScroll);
   }, [handleScroll, containerRef]);
 };
@@ -826,9 +828,9 @@ const useMassApplyMutation = (
 const UpgradeBadge = () => {
   const { t } = useLocale();
   return (
-    <a href="/enterprise" className="hover:underline">
+    <Link href="/enterprise" className="hover:underline">
       <Badge variant="gray">{t("upgrade")}</Badge>
-    </a>
+    </Link>
   );
 };
 
diff --git a/apps/web/modules/event-types/components/tabs/advanced/EventAdvancedTab.tsx b/apps/web/modules/event-types/components/tabs/advanced/EventAdvancedTab.tsx
index 2e7e6da820a42e..306836b09afb3e 100644
--- a/apps/web/modules/event-types/components/tabs/advanced/EventAdvancedTab.tsx
+++ b/apps/web/modules/event-types/components/tabs/advanced/EventAdvancedTab.tsx
@@ -174,7 +174,7 @@ const destinationCalendarComponents = {
     const { t } = useLocale();
     const formMethods = useFormContext<FormValues>();
     const [useEventTypeDestinationCalendarEmail, setUseEventTypeDestinationCalendarEmail] = useState(
-      formMethods.getValues("useEventTypeDestinationCalendarEmail")
+      () => formMethods.getValues("useEventTypeDestinationCalendarEmail")
     );
     const selectedSecondaryEmailId = formMethods.getValues("secondaryEmailId") || -1;
     return (
@@ -469,7 +469,7 @@ export const EventAdvancedTab = ({
   };
 
   const [requiresConfirmation, setRequiresConfirmation] = useState(
-    formMethods.getValues("requiresConfirmation")
+    () => formMethods.getValues("requiresConfirmation")
   );
   const seatsEnabled = formMethods.watch("seatsPerTimeSlotEnabled");
   const multiLocation = (formMethods.getValues("locations") || []).length > 1;
@@ -608,9 +608,7 @@ export const EventAdvancedTab = ({
     [paymentAppData]
   );
 
-  const TimezoneSelect = useMemo(() => {
-    return isPlatform ? PlatformTimzoneSelect : WebTimezoneSelect;
-  }, [isPlatform]);
+  const TimezoneSelect = isPlatform ? PlatformTimzoneSelect : WebTimezoneSelect;
 
   return (
     <div className="stack-y-4 flex flex-col">
diff --git a/apps/web/modules/event-types/components/tabs/advanced/RequiresConfirmationController.tsx b/apps/web/modules/event-types/components/tabs/advanced/RequiresConfirmationController.tsx
index b94195073efb1d..3b13fbf334e856 100644
--- a/apps/web/modules/event-types/components/tabs/advanced/RequiresConfirmationController.tsx
+++ b/apps/web/modules/event-types/components/tabs/advanced/RequiresConfirmationController.tsx
@@ -209,6 +209,7 @@ export default function RequiresConfirmationController({
                                       defaultValue={metadata?.requiresConfirmationThreshold?.time || 30}
                                     />
                                     <label
+                                      htmlFor="notice"
                                       className={classNames(
                                         requiresConfirmationLockedProps.disabled && "cursor-not-allowed"
                                       )}>
diff --git a/apps/web/modules/event-types/components/tabs/assignment/EventTeamAssignmentTab.tsx b/apps/web/modules/event-types/components/tabs/assignment/EventTeamAssignmentTab.tsx
index 5c5777ed56c224..8c63d1dcc8331a 100644
--- a/apps/web/modules/event-types/components/tabs/assignment/EventTeamAssignmentTab.tsx
+++ b/apps/web/modules/event-types/components/tabs/assignment/EventTeamAssignmentTab.tsx
@@ -79,8 +79,10 @@ export const mapMemberToChildrenOption = (
   };
 };
 
+const EMPTY_CHILDREN_OPTIONS: Options<ReturnType<typeof mapMemberToChildrenOption>> = [];
+
 const ChildrenEventTypesList = ({
-  options = [],
+  options = EMPTY_CHILDREN_OPTIONS,
   value,
   onChange,
   customClassNames,
@@ -276,6 +278,114 @@ type RoundRobinHostsCustomClassNames = {
   addMembers?: AddMembersWithSwitchCustomClassNames;
 };
 
+const AddMembersWithSwitchComponent = ({
+  groupId,
+  containerClassName,
+  t,
+  teamId,
+  teamMembers,
+  value,
+  onChange,
+  assignAllTeamMembers,
+  setAssignAllTeamMembers,
+  isSegmentApplicable,
+  isRRWeightsEnabled,
+  handleMembersActivation,
+  customClassNames,
+}: {
+  groupId: string | null;
+  containerClassName?: string;
+  t: TFunction;
+  teamId: number;
+  teamMembers: TeamMember[];
+  value: Host[];
+  onChange: (hosts: Host[]) => void;
+  assignAllTeamMembers: boolean;
+  setAssignAllTeamMembers: Dispatch<SetStateAction<boolean>>;
+  isSegmentApplicable: boolean;
+  isRRWeightsEnabled: boolean;
+  handleMembersActivation: (groupId: string | null) => void;
+  customClassNames?: AddMembersWithSwitchCustomClassNames;
+}) => {
+  return (
+    <AddMembersWithSwitch
+      placeholder={t("add_a_member")}
+      teamId={teamId}
+      teamMembers={teamMembers}
+      value={value}
+      onChange={onChange}
+      assignAllTeamMembers={assignAllTeamMembers}
+      setAssignAllTeamMembers={setAssignAllTeamMembers}
+      isSegmentApplicable={isSegmentApplicable}
+      automaticAddAllEnabled={true}
+      isRRWeightsEnabled={isRRWeightsEnabled}
+      isFixed={false}
+      groupId={groupId}
+      containerClassName={containerClassName || (assignAllTeamMembers ? "-mt-4" : "")}
+      onActive={() => handleMembersActivation(groupId)}
+      customClassNames={customClassNames}
+    />
+  );
+};
+
+const UnassignedHostsGroup = ({
+  value,
+  hostGroups,
+  t,
+  teamId,
+  teamMembers,
+  onChange,
+  assignAllTeamMembers,
+  setAssignAllTeamMembers,
+  isSegmentApplicable,
+  isRRWeightsEnabled,
+  handleMembersActivation,
+  customClassNames,
+}: {
+  value: Host[];
+  hostGroups: FormValues["hostGroups"];
+  t: TFunction;
+  teamId: number;
+  teamMembers: TeamMember[];
+  onChange: (hosts: Host[]) => void;
+  assignAllTeamMembers: boolean;
+  setAssignAllTeamMembers: Dispatch<SetStateAction<boolean>>;
+  isSegmentApplicable: boolean;
+  isRRWeightsEnabled: boolean;
+  handleMembersActivation: (groupId: string | null) => void;
+  customClassNames?: AddMembersWithSwitchCustomClassNames;
+}) => {
+  const unassignedHosts = value.filter((host) => !host.isFixed && !host.groupId);
+
+  if (unassignedHosts.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="border-subtle my-4 rounded-md border p-4 pb-0">
+      <div className="-mb-4 flex items-center justify-between">
+        <div className="flex items-center gap-1">
+          <span className="text-default text-sm font-medium">{`Group ${hostGroups.length + 1}`}</span>
+        </div>
+      </div>
+      <AddMembersWithSwitchComponent
+        groupId={null}
+        t={t}
+        teamId={teamId}
+        teamMembers={teamMembers}
+        value={value}
+        onChange={onChange}
+        assignAllTeamMembers={assignAllTeamMembers}
+        setAssignAllTeamMembers={setAssignAllTeamMembers}
+        isSegmentApplicable={isSegmentApplicable}
+        isRRWeightsEnabled={isRRWeightsEnabled}
+        handleMembersActivation={handleMembersActivation}
+        customClassNames={customClassNames}
+      />
+    </div>
+  );
+};
+
 const RoundRobinHosts = ({
   orgId,
   teamMembers,
@@ -411,53 +521,6 @@ const RoundRobinHosts = ({
     [getValues, setValue, teamMembers]
   );
 
-  const AddMembersWithSwitchComponent = ({
-    groupId,
-    containerClassName,
-  }: {
-    groupId: string | null;
-    containerClassName?: string;
-  }) => {
-    return (
-      <AddMembersWithSwitch
-        placeholder={t("add_a_member")}
-        teamId={teamId}
-        teamMembers={teamMembers}
-        value={value}
-        onChange={onChange}
-        assignAllTeamMembers={assignAllTeamMembers}
-        setAssignAllTeamMembers={setAssignAllTeamMembers}
-        isSegmentApplicable={isSegmentApplicable}
-        automaticAddAllEnabled={true}
-        isRRWeightsEnabled={isRRWeightsEnabled}
-        isFixed={false}
-        groupId={groupId}
-        containerClassName={containerClassName || (assignAllTeamMembers ? "-mt-4" : "")}
-        onActive={() => handleMembersActivation(groupId)}
-        customClassNames={customClassNames?.addMembers}
-      />
-    );
-  };
-
-  const UnassignedHostsGroup = () => {
-    const unassignedHosts = value.filter((host) => !host.isFixed && !host.groupId);
-
-    if (unassignedHosts.length === 0) {
-      return null;
-    }
-
-    return (
-      <div className="border-subtle my-4 rounded-md border p-4 pb-0">
-        <div className="-mb-4 flex items-center justify-between">
-          <div className="flex items-center gap-1">
-            <span className="text-default text-sm font-medium">{`Group ${hostGroups.length + 1}`}</span>
-          </div>
-        </div>
-        <AddMembersWithSwitchComponent groupId={null} />
-      </div>
-    );
-  };
-
   return (
     <div className={classNames("rounded-lg")}>
       <div
@@ -513,11 +576,37 @@ const RoundRobinHosts = ({
           />
         </>
         {!hostGroups.length ? (
-          <AddMembersWithSwitchComponent groupId={hostGroups[0]?.id ?? null} />
+          <AddMembersWithSwitchComponent
+            groupId={hostGroups[0]?.id ?? null}
+            t={t}
+            teamId={teamId}
+            teamMembers={teamMembers}
+            value={value}
+            onChange={onChange}
+            assignAllTeamMembers={assignAllTeamMembers}
+            setAssignAllTeamMembers={setAssignAllTeamMembers}
+            isSegmentApplicable={isSegmentApplicable}
+            isRRWeightsEnabled={isRRWeightsEnabled}
+            handleMembersActivation={handleMembersActivation}
+            customClassNames={customClassNames?.addMembers}
+          />
         ) : (
           <>
             {/* Show unassigned hosts first */}
-            <UnassignedHostsGroup />
+            <UnassignedHostsGroup
+              value={value}
+              hostGroups={hostGroups}
+              t={t}
+              teamId={teamId}
+              teamMembers={teamMembers}
+              onChange={onChange}
+              assignAllTeamMembers={assignAllTeamMembers}
+              setAssignAllTeamMembers={setAssignAllTeamMembers}
+              isSegmentApplicable={isSegmentApplicable}
+              isRRWeightsEnabled={isRRWeightsEnabled}
+              handleMembersActivation={handleMembersActivation}
+              customClassNames={customClassNames?.addMembers}
+            />
 
             {/* Show all defined groups */}
             {hostGroups.map((group, index) => {
@@ -542,7 +631,20 @@ const RoundRobinHosts = ({
                       <XIcon className="h-4 w-4" />
                     </button>
                   </div>
-                  <AddMembersWithSwitchComponent groupId={group.id} />
+                  <AddMembersWithSwitchComponent
+                    groupId={group.id}
+                    t={t}
+                    teamId={teamId}
+                    teamMembers={teamMembers}
+                    value={value}
+                    onChange={onChange}
+                    assignAllTeamMembers={assignAllTeamMembers}
+                    setAssignAllTeamMembers={setAssignAllTeamMembers}
+                    isSegmentApplicable={isSegmentApplicable}
+                    isRRWeightsEnabled={isRRWeightsEnabled}
+                    handleMembersActivation={handleMembersActivation}
+                    customClassNames={customClassNames?.addMembers}
+                  />
                 </div>
               );
             })}
diff --git a/apps/web/modules/event-types/components/tabs/instant/InstantEventController.tsx b/apps/web/modules/event-types/components/tabs/instant/InstantEventController.tsx
index fa829607c0534c..c711b0357e8c58 100644
--- a/apps/web/modules/event-types/components/tabs/instant/InstantEventController.tsx
+++ b/apps/web/modules/event-types/components/tabs/instant/InstantEventController.tsx
@@ -274,6 +274,19 @@ export default function InstantEventController({
   );
 }
 
+const NewWebhookButton = ({ onCreateNew }: { onCreateNew: () => void }) => {
+  const { t } = useLocale();
+  return (
+    <Button
+      color="secondary"
+      data-testid="new_webhook"
+      StartIcon="plus"
+      onClick={onCreateNew}>
+      {t("new_webhook")}
+    </Button>
+  );
+};
+
 const InstantMeetingWebhooks = ({ eventType }: { eventType: EventTypeSetup }) => {
   const { t } = useLocale();
   const utils = trpc.useUtils();
@@ -341,19 +354,6 @@ const InstantMeetingWebhooks = ({ eventType }: { eventType: EventTypeSetup }) =>
     });
   };
 
-  const NewWebhookButton = () => {
-    const { t } = useLocale();
-    return (
-      <Button
-        color="secondary"
-        data-testid="new_webhook"
-        StartIcon="plus"
-        onClick={() => setCreateModalOpen(true)}>
-        {t("new_webhook")}
-      </Button>
-    );
-  };
-
   const { shouldLockDisableProps, isChildrenManagedEventType, isManagedEventType } = useLockedFieldsManager({
     eventType,
     formMethods,
@@ -405,7 +405,7 @@ const InstantMeetingWebhooks = ({ eventType }: { eventType: EventTypeSetup }) =>
                         {t("locked_by_admin")}
                       </Button>
                     ) : (
-                      <NewWebhookButton />
+                      <NewWebhookButton onCreateNew={() => setCreateModalOpen(true)} />
                     )
                   }
                 />
diff --git a/apps/web/modules/event-types/components/tabs/setup/EventSetupTab.tsx b/apps/web/modules/event-types/components/tabs/setup/EventSetupTab.tsx
index db2e62f501437c..d72a1aa3aaa8e6 100644
--- a/apps/web/modules/event-types/components/tabs/setup/EventSetupTab.tsx
+++ b/apps/web/modules/event-types/components/tabs/setup/EventSetupTab.tsx
@@ -98,7 +98,7 @@ export const EventSetupTab = (
       value: number;
       label: string;
     }>
-  >(multipleDurationOptions.filter((mdOpt) => multipleDuration?.includes(mdOpt.value)));
+  >(() => multipleDurationOptions.filter((mdOpt) => multipleDuration?.includes(mdOpt.value)));
   const [defaultDuration, setDefaultDuration] = useState(
     selectedMultipleDuration.find((opt) => opt.value === formMethods.getValues("length")) ?? null
   );
diff --git a/apps/web/modules/event-types/components/tabs/webhooks/EventWebhooksTab.tsx b/apps/web/modules/event-types/components/tabs/webhooks/EventWebhooksTab.tsx
index 816f56b51eca1a..b07f0eaea72463 100644
--- a/apps/web/modules/event-types/components/tabs/webhooks/EventWebhooksTab.tsx
+++ b/apps/web/modules/event-types/components/tabs/webhooks/EventWebhooksTab.tsx
@@ -21,6 +21,19 @@ import { WebhookForm } from "~/webhooks/components";
 import EventTypeWebhookListItem from "~/webhooks/components/EventTypeWebhookListItem";
 import type { TWebhook, WebhookFormSubmitData } from "~/webhooks/components/WebhookForm";
 
+const NewWebhookButton = ({ onCreateNew }: { onCreateNew: () => void }) => {
+  const { t } = useLocale();
+  return (
+    <Button
+      color="secondary"
+      data-testid="new_webhook"
+      StartIcon="plus"
+      onClick={onCreateNew}>
+      {t("new_webhook")}
+    </Button>
+  );
+};
+
 export const EventWebhooksTab = ({ eventType }: Pick<EventTypeSetupProps, "eventType">) => {
   const { t } = useLocale();
 
@@ -93,19 +106,6 @@ export const EventWebhooksTab = ({ eventType }: Pick<EventTypeSetupProps, "event
     });
   };
 
-  const NewWebhookButton = () => {
-    const { t } = useLocale();
-    return (
-      <Button
-        color="secondary"
-        data-testid="new_webhook"
-        StartIcon="plus"
-        onClick={() => setCreateModalOpen(true)}>
-        {t("new_webhook")}
-      </Button>
-    );
-  };
-
   const { shouldLockDisableProps, isChildrenManagedEventType, isManagedEventType } = useLockedFieldsManager({
     eventType,
     translate: t,
@@ -159,7 +159,7 @@ export const EventWebhooksTab = ({ eventType }: Pick<EventTypeSetupProps, "event
                             {t("locked_by_team_admin")}
                           </Button>
                         ) : (
-                          <NewWebhookButton />
+                          <NewWebhookButton onCreateNew={() => setCreateModalOpen(true)} />
                         )}
                       </div>
 
@@ -207,7 +207,7 @@ export const EventWebhooksTab = ({ eventType }: Pick<EventTypeSetupProps, "event
                           {t("locked_by_team_admin")}
                         </Button>
                       ) : (
-                        <NewWebhookButton />
+                        <NewWebhookButton onCreateNew={() => setCreateModalOpen(true)} />
                       )
                     }
                   />
diff --git a/apps/web/modules/event-types/views/event-types-listing-view.tsx b/apps/web/modules/event-types/views/event-types-listing-view.tsx
index 6169ea2c7d577e..a978709050446f 100644
--- a/apps/web/modules/event-types/views/event-types-listing-view.tsx
+++ b/apps/web/modules/event-types/views/event-types-listing-view.tsx
@@ -57,7 +57,7 @@ import Link from "next/link";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import type React from "react";
 import type { FC } from "react";
-import { createContext, memo, useContext, useEffect, useState } from "react";
+import { Suspense, createContext, memo, useContext, useEffect, useState } from "react";
 import { z } from "zod";
 
 type GetUserEventGroupsResponse = RouterOutputs["viewer"]["eventTypes"]["getUserEventGroups"];
@@ -281,7 +281,7 @@ const Item = ({
 
 const MemoizedItem = memo(Item);
 
-export const InfiniteEventTypeList = ({
+const InfiniteEventTypeListInner = ({
   group,
   readOnly,
   pages,
@@ -900,6 +900,14 @@ export const InfiniteEventTypeList = ({
   );
 };
 
+export const InfiniteEventTypeList = (props: InfiniteEventTypeListProps): JSX.Element => {
+  return (
+    <Suspense>
+      <InfiniteEventTypeListInner {...props} />
+    </Suspense>
+  );
+};
+
 const CreateFirstEventTypeView = ({ slug, searchTerm }: { slug: string; searchTerm?: string }) => {
   const { t } = useLocale();
 
@@ -975,13 +983,15 @@ const EmptyEventTypeList = ({
   );
 };
 
-const InfiniteScrollMain = ({
-  eventTypeGroups,
-  profiles,
-}: {
+type InfiniteScrollMainProps = {
   eventTypeGroups: GetUserEventGroupsResponse["eventTypeGroups"];
   profiles: GetUserEventGroupsResponse["profiles"];
-}) => {
+};
+
+const InfiniteScrollMainInner = ({
+  eventTypeGroups,
+  profiles,
+}: InfiniteScrollMainProps) => {
   const searchParams = useSearchParams();
   const { data } = useTypedQuery(querySchema);
   const orgBranding = useOrgBranding();
@@ -1020,6 +1030,14 @@ const InfiniteScrollMain = ({
   );
 };
 
+const InfiniteScrollMain = (props: InfiniteScrollMainProps) => {
+  return (
+    <Suspense>
+      <InfiniteScrollMainInner {...props} />
+    </Suspense>
+  );
+};
+
 type Props = {
   userEventGroupsData: GetUserEventGroupsResponse;
   user: {
diff --git a/apps/web/modules/feature-opt-in/components/FeatureOptInBanner.tsx b/apps/web/modules/feature-opt-in/components/FeatureOptInBanner.tsx
index 628bb8f83f36fe..c5fb5aaa23c1c3 100644
--- a/apps/web/modules/feature-opt-in/components/FeatureOptInBanner.tsx
+++ b/apps/web/modules/feature-opt-in/components/FeatureOptInBanner.tsx
@@ -56,6 +56,7 @@ export function FeatureOptInBanner({
             src={featureConfig.bannerImage.src}
             alt={t(featureConfig.i18n.title)}
             fill
+            sizes="100vw"
             className="object-contain"
           />
         </div>
diff --git a/apps/web/modules/feature-opt-in/components/FeedbackDialog.tsx b/apps/web/modules/feature-opt-in/components/FeedbackDialog.tsx
index c05968378e73f6..d677fae944f032 100644
--- a/apps/web/modules/feature-opt-in/components/FeedbackDialog.tsx
+++ b/apps/web/modules/feature-opt-in/components/FeedbackDialog.tsx
@@ -100,6 +100,7 @@ export function FeedbackDialog({
         {/* Mobile-only backdrop */}
         {showMobileBackdrop && (
           <div
+            role="presentation"
             className="fixed inset-0 z-40 bg-black/50 sm:hidden"
             onClick={resetAndClose}
           />
@@ -142,6 +143,7 @@ export function FeedbackDialog({
       {/* Mobile-only backdrop */}
       {showMobileBackdrop && (
         <div
+          role="presentation"
           className="fixed inset-0 z-40 bg-black/50 sm:hidden"
           onClick={handleSkip}
         />
diff --git a/apps/web/modules/form-builder/components/FormBuilderField.tsx b/apps/web/modules/form-builder/components/FormBuilderField.tsx
index 0934b6ffd5b0fa..cf8f31d3b5dffa 100644
--- a/apps/web/modules/form-builder/components/FormBuilderField.tsx
+++ b/apps/web/modules/form-builder/components/FormBuilderField.tsx
@@ -20,8 +20,7 @@ import {
 } from "@calcom/features/form-builder/useShouldBeDisabledDueToPrefill";
 import { getTranslatedConfig as getTranslatedVariantsConfig } from "@calcom/features/form-builder/utils/variantsConfig";
 
-// helper to render markdown label safely
-const renderLabel = (field: Partial<RhfFormField>) => {
+const FieldLabel = ({ field }: { field: Partial<RhfFormField> }) => {
   if (field.labelAsSafeHtml) {
     return (
       // biome-ignore lint/security/noDangerouslySetInnerHtml: Content is sanitized via markdownToSafeHTML
@@ -172,7 +171,7 @@ const WithLabel = ({
           field.label && (
             <div className="mb-2 flex items-center">
               <Label className="mb-0! flex items-center" htmlFor={htmlFor}>
-                {renderLabel(field)}
+                <FieldLabel field={field} />
                 <span className="text-emphasis -mb-1 ml-1 text-sm font-medium leading-none">
                   {!readOnly && field.required ? "*" : ""}
                 </span>
diff --git a/apps/web/modules/insights/components/booking/AverageEventDurationChart.tsx b/apps/web/modules/insights/components/booking/AverageEventDurationChart.tsx
index d60fe20eb4bb7f..d06a4a5f15d7f0 100644
--- a/apps/web/modules/insights/components/booking/AverageEventDurationChart.tsx
+++ b/apps/web/modules/insights/components/booking/AverageEventDurationChart.tsx
@@ -1,8 +1,18 @@
 "use client";
 
-import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts";
+import dynamic from "next/dynamic";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+
+const LineChart = dynamic(() => import("recharts").then((mod) => mod.LineChart), { ssr: false });
+const Line = dynamic(() => import("recharts").then((mod) => mod.Line), { ssr: false });
+const XAxis = dynamic(() => import("recharts").then((mod) => mod.XAxis), { ssr: false });
+const YAxis = dynamic(() => import("recharts").then((mod) => mod.YAxis), { ssr: false });
+const CartesianGrid = dynamic(() => import("recharts").then((mod) => mod.CartesianGrid), { ssr: false });
+const Tooltip = dynamic(() => import("recharts").then((mod) => mod.Tooltip), { ssr: false });
+const ResponsiveContainer = dynamic(() => import("recharts").then((mod) => mod.ResponsiveContainer), {
+  ssr: false,
+});
 import { trpc } from "@calcom/trpc/react";
 import type { RouterOutputs } from "@calcom/trpc/react";
 
diff --git a/apps/web/modules/insights/components/booking/BookingsByHourChart.tsx b/apps/web/modules/insights/components/booking/BookingsByHourChart.tsx
index 71af336ae2c58c..4fde0f73723f7b 100644
--- a/apps/web/modules/insights/components/booking/BookingsByHourChart.tsx
+++ b/apps/web/modules/insights/components/booking/BookingsByHourChart.tsx
@@ -1,17 +1,19 @@
 "use client";
 
-import {
-  BarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  ResponsiveContainer,
-  Rectangle,
-} from "recharts";
+import dynamic from "next/dynamic";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+
+const BarChart = dynamic(() => import("recharts").then((mod) => mod.BarChart), { ssr: false });
+const Bar = dynamic(() => import("recharts").then((mod) => mod.Bar), { ssr: false });
+const XAxis = dynamic(() => import("recharts").then((mod) => mod.XAxis), { ssr: false });
+const YAxis = dynamic(() => import("recharts").then((mod) => mod.YAxis), { ssr: false });
+const CartesianGrid = dynamic(() => import("recharts").then((mod) => mod.CartesianGrid), { ssr: false });
+const Tooltip = dynamic(() => import("recharts").then((mod) => mod.Tooltip), { ssr: false });
+const ResponsiveContainer = dynamic(() => import("recharts").then((mod) => mod.ResponsiveContainer), {
+  ssr: false,
+});
+const Rectangle = dynamic(() => import("recharts").then((mod) => mod.Rectangle), { ssr: false });
 import { trpc } from "@calcom/trpc/react";
 import type { RouterOutputs } from "@calcom/trpc/react";
 
diff --git a/apps/web/modules/insights/components/booking/CSATOverTimeChart.tsx b/apps/web/modules/insights/components/booking/CSATOverTimeChart.tsx
index 28f49b99ffa9cb..56672dd6223a43 100644
--- a/apps/web/modules/insights/components/booking/CSATOverTimeChart.tsx
+++ b/apps/web/modules/insights/components/booking/CSATOverTimeChart.tsx
@@ -1,8 +1,18 @@
 "use client";
 
-import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts";
+import dynamic from "next/dynamic";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+
+const LineChart = dynamic(() => import("recharts").then((mod) => mod.LineChart), { ssr: false });
+const Line = dynamic(() => import("recharts").then((mod) => mod.Line), { ssr: false });
+const XAxis = dynamic(() => import("recharts").then((mod) => mod.XAxis), { ssr: false });
+const YAxis = dynamic(() => import("recharts").then((mod) => mod.YAxis), { ssr: false });
+const CartesianGrid = dynamic(() => import("recharts").then((mod) => mod.CartesianGrid), { ssr: false });
+const Tooltip = dynamic(() => import("recharts").then((mod) => mod.Tooltip), { ssr: false });
+const ResponsiveContainer = dynamic(() => import("recharts").then((mod) => mod.ResponsiveContainer), {
+  ssr: false,
+});
 import { trpc } from "@calcom/trpc/react";
 import type { RouterOutputs } from "@calcom/trpc/react";
 
diff --git a/apps/web/modules/insights/components/booking/EventTrendsChart.tsx b/apps/web/modules/insights/components/booking/EventTrendsChart.tsx
index 8b415cf8d75587..fdd0907b5a01c3 100644
--- a/apps/web/modules/insights/components/booking/EventTrendsChart.tsx
+++ b/apps/web/modules/insights/components/booking/EventTrendsChart.tsx
@@ -1,8 +1,18 @@
 "use client";
 
-import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts";
+import dynamic from "next/dynamic";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+
+const LineChart = dynamic(() => import("recharts").then((mod) => mod.LineChart), { ssr: false });
+const Line = dynamic(() => import("recharts").then((mod) => mod.Line), { ssr: false });
+const XAxis = dynamic(() => import("recharts").then((mod) => mod.XAxis), { ssr: false });
+const YAxis = dynamic(() => import("recharts").then((mod) => mod.YAxis), { ssr: false });
+const CartesianGrid = dynamic(() => import("recharts").then((mod) => mod.CartesianGrid), { ssr: false });
+const Tooltip = dynamic(() => import("recharts").then((mod) => mod.Tooltip), { ssr: false });
+const ResponsiveContainer = dynamic(() => import("recharts").then((mod) => mod.ResponsiveContainer), {
+  ssr: false,
+});
 import { trpc } from "@calcom/trpc/react";
 import type { RouterOutputs } from "@calcom/trpc/react";
 
diff --git a/apps/web/modules/insights/components/booking/NoShowHostsOverTimeChart.tsx b/apps/web/modules/insights/components/booking/NoShowHostsOverTimeChart.tsx
index f293d1d3fe23dc..9b7fe971a5c239 100644
--- a/apps/web/modules/insights/components/booking/NoShowHostsOverTimeChart.tsx
+++ b/apps/web/modules/insights/components/booking/NoShowHostsOverTimeChart.tsx
@@ -1,8 +1,18 @@
 "use client";
 
-import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts";
+import dynamic from "next/dynamic";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+
+const LineChart = dynamic(() => import("recharts").then((mod) => mod.LineChart), { ssr: false });
+const Line = dynamic(() => import("recharts").then((mod) => mod.Line), { ssr: false });
+const XAxis = dynamic(() => import("recharts").then((mod) => mod.XAxis), { ssr: false });
+const YAxis = dynamic(() => import("recharts").then((mod) => mod.YAxis), { ssr: false });
+const CartesianGrid = dynamic(() => import("recharts").then((mod) => mod.CartesianGrid), { ssr: false });
+const Tooltip = dynamic(() => import("recharts").then((mod) => mod.Tooltip), { ssr: false });
+const ResponsiveContainer = dynamic(() => import("recharts").then((mod) => mod.ResponsiveContainer), {
+  ssr: false,
+});
 import { trpc } from "@calcom/trpc/react";
 import type { RouterOutputs } from "@calcom/trpc/react";
 
diff --git a/apps/web/modules/insights/components/filters/DateTargetSelector.tsx b/apps/web/modules/insights/components/filters/DateTargetSelector.tsx
index 114e1732d6e712..343bf57bbae9cd 100644
--- a/apps/web/modules/insights/components/filters/DateTargetSelector.tsx
+++ b/apps/web/modules/insights/components/filters/DateTargetSelector.tsx
@@ -38,6 +38,8 @@ export const DateTargetSelector = ({ value, onChange }: DateTargetSelectorProps)
 
   const selectedOption = options.find((option) => option.value === value) || options[0];
 
+  const listboxId = "date-target-listbox";
+
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
@@ -46,12 +48,13 @@ export const DateTargetSelector = ({ value, onChange }: DateTargetSelectorProps)
           color="secondary"
           StartIcon="sliders-horizontal"
           role="combobox"
-          aria-expanded={open}>
+          aria-expanded={open}
+          aria-controls={listboxId}>
           <span className="sr-only">{selectedOption.label}</span>
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-64 p-0" align="end">
-        <Command>
+        <Command id={listboxId}>
           <CommandList>
             {options.map((option) => (
               <CommandItem
diff --git a/apps/web/modules/insights/components/routing/FailedBookingsByField.tsx b/apps/web/modules/insights/components/routing/FailedBookingsByField.tsx
index 682d8c9cda8a3b..85c4298484fe97 100644
--- a/apps/web/modules/insights/components/routing/FailedBookingsByField.tsx
+++ b/apps/web/modules/insights/components/routing/FailedBookingsByField.tsx
@@ -1,18 +1,20 @@
 "use client";
 
 import { useState } from "react";
-import {
-  BarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  ResponsiveContainer,
-  Rectangle,
-} from "recharts";
+import dynamic from "next/dynamic";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+
+const BarChart = dynamic(() => import("recharts").then((mod) => mod.BarChart), { ssr: false });
+const Bar = dynamic(() => import("recharts").then((mod) => mod.Bar), { ssr: false });
+const XAxis = dynamic(() => import("recharts").then((mod) => mod.XAxis), { ssr: false });
+const YAxis = dynamic(() => import("recharts").then((mod) => mod.YAxis), { ssr: false });
+const CartesianGrid = dynamic(() => import("recharts").then((mod) => mod.CartesianGrid), { ssr: false });
+const Tooltip = dynamic(() => import("recharts").then((mod) => mod.Tooltip), { ssr: false });
+const ResponsiveContainer = dynamic(() => import("recharts").then((mod) => mod.ResponsiveContainer), {
+  ssr: false,
+});
+const Rectangle = dynamic(() => import("recharts").then((mod) => mod.Rectangle), { ssr: false });
 import { trpc } from "@calcom/trpc/react";
 import { ToggleGroup } from "@calcom/ui/components/form";
 
diff --git a/apps/web/modules/insights/components/routing/RoutingFunnelContent.tsx b/apps/web/modules/insights/components/routing/RoutingFunnelContent.tsx
index 591ccf243e7f21..6642fc4677962a 100644
--- a/apps/web/modules/insights/components/routing/RoutingFunnelContent.tsx
+++ b/apps/web/modules/insights/components/routing/RoutingFunnelContent.tsx
@@ -1,9 +1,19 @@
 "use client";
 
-import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts";
+import dynamic from "next/dynamic";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
+const AreaChart = dynamic(() => import("recharts").then((mod) => mod.AreaChart), { ssr: false });
+const Area = dynamic(() => import("recharts").then((mod) => mod.Area), { ssr: false });
+const XAxis = dynamic(() => import("recharts").then((mod) => mod.XAxis), { ssr: false });
+const YAxis = dynamic(() => import("recharts").then((mod) => mod.YAxis), { ssr: false });
+const CartesianGrid = dynamic(() => import("recharts").then((mod) => mod.CartesianGrid), { ssr: false });
+const Tooltip = dynamic(() => import("recharts").then((mod) => mod.Tooltip), { ssr: false });
+const ResponsiveContainer = dynamic(() => import("recharts").then((mod) => mod.ResponsiveContainer), {
+  ssr: false,
+});
+
 interface RoutingFunnelData {
   name: string;
   formattedDateFull: string;
diff --git a/apps/web/modules/integration-attribute-sync/components/RuleBuilder.tsx b/apps/web/modules/integration-attribute-sync/components/RuleBuilder.tsx
index 7fbbc286ded577..b85b47c5e033c8 100644
--- a/apps/web/modules/integration-attribute-sync/components/RuleBuilder.tsx
+++ b/apps/web/modules/integration-attribute-sync/components/RuleBuilder.tsx
@@ -201,6 +201,96 @@ const TeamConditionFields = ({ condition, onChange, teamOptions, isLoading }: Te
   );
 };
 
+const ValueInput = ({
+  selectedAttribute,
+  condition,
+  handleValueChange,
+  handleTextValueChange,
+  handleNumberValueChange,
+  isLoading,
+}: {
+  selectedAttribute: Attribute | undefined;
+  condition: IAttributeCondition;
+  handleValueChange: (
+    selected: MultiValue<{ value: string; label: string }> | SingleValue<{ value: string; label: string }>
+  ) => void;
+  handleTextValueChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  handleNumberValueChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  isLoading?: boolean;
+}) => {
+  const { t } = useLocale();
+
+  if (!selectedAttribute) {
+    return (
+      <div className="text-subtle flex-1 text-sm" style={{ minWidth: "200px" }}>
+        {t("attribute_sync_select_attribute_first")}
+      </div>
+    );
+  }
+
+  const isMulti = isArrayOperator(condition.operator);
+
+  switch (selectedAttribute.type) {
+    case "SINGLE_SELECT":
+    case "MULTI_SELECT": {
+      const valueOptions = selectedAttribute.options.map((opt: { id: string; value: string }) => ({
+        value: opt.id,
+        label: opt.value,
+      }));
+
+      const selectedValues = isMulti
+        ? valueOptions.filter((opt: { value: string; label: string }) =>
+            condition.value.includes(opt.value)
+          )
+        : valueOptions.find((opt: { value: string; label: string }) => condition.value[0] === opt.value);
+
+      return (
+        <div className="flex-1" style={{ minWidth: "200px" }}>
+          <Select
+            size="sm"
+            isMulti={isMulti}
+            value={selectedValues}
+            onChange={handleValueChange}
+            options={valueOptions}
+            isLoading={isLoading}
+            isDisabled={isLoading}
+            placeholder={t("attribute_sync_select_values")}
+            className="w-full"
+          />
+        </div>
+      );
+    }
+
+    case "TEXT":
+      return (
+        <div className="flex-1" style={{ minWidth: "200px" }}>
+          <Input
+            type="text"
+            value={condition.value[0] || ""}
+            onChange={handleTextValueChange}
+            disabled={isLoading}
+            placeholder={t("attribute_sync_enter_text_value")}
+            className="h-7 text-sm"
+          />
+        </div>
+      );
+
+    case "NUMBER":
+      return (
+        <div className="flex-1" style={{ minWidth: "200px" }}>
+          <Input
+            type="number"
+            value={condition.value[0] || ""}
+            onChange={handleNumberValueChange}
+            disabled={isLoading}
+            placeholder={t("attribute_sync_enter_number_value")}
+            className="h-7 text-sm"
+          />
+        </div>
+      );
+  }
+};
+
 interface AttributeConditionFieldsProps {
   condition: IAttributeCondition;
   onChange: (condition: TAttributeSyncRuleCondition) => void;
@@ -294,79 +384,6 @@ const AttributeConditionFields = ({
     });
   };
 
-  // Render value input based on attribute type
-  const renderValueInput = () => {
-    if (!selectedAttribute) {
-      return (
-        <div className="text-subtle flex-1 text-sm" style={{ minWidth: "200px" }}>
-          {t("attribute_sync_select_attribute_first")}
-        </div>
-      );
-    }
-
-    const isMulti = isArrayOperator(condition.operator);
-
-    switch (selectedAttribute.type) {
-      case "SINGLE_SELECT":
-      case "MULTI_SELECT": {
-        const valueOptions = selectedAttribute.options.map((opt: { id: string; value: string }) => ({
-          value: opt.id,
-          label: opt.value,
-        }));
-
-        const selectedValues = isMulti
-          ? valueOptions.filter((opt: { value: string; label: string }) =>
-              condition.value.includes(opt.value)
-            )
-          : valueOptions.find((opt: { value: string; label: string }) => condition.value[0] === opt.value);
-
-        return (
-          <div className="flex-1" style={{ minWidth: "200px" }}>
-            <Select
-              size="sm"
-              isMulti={isMulti}
-              value={selectedValues}
-              onChange={handleValueChange}
-              options={valueOptions}
-              isLoading={isLoading}
-              isDisabled={isLoading}
-              placeholder={t("attribute_sync_select_values")}
-              className="w-full"
-            />
-          </div>
-        );
-      }
-
-      case "TEXT":
-        return (
-          <div className="flex-1" style={{ minWidth: "200px" }}>
-            <Input
-              type="text"
-              value={condition.value[0] || ""}
-              onChange={handleTextValueChange}
-              disabled={isLoading}
-              placeholder={t("attribute_sync_enter_text_value")}
-              className="h-7 text-sm"
-            />
-          </div>
-        );
-
-      case "NUMBER":
-        return (
-          <div className="flex-1" style={{ minWidth: "200px" }}>
-            <Input
-              type="number"
-              value={condition.value[0] || ""}
-              onChange={handleNumberValueChange}
-              disabled={isLoading}
-              placeholder={t("attribute_sync_enter_number_value")}
-              className="h-7 text-sm"
-            />
-          </div>
-        );
-    }
-  };
-
   return (
     <>
       <span className="text-default text-sm">{t("attribute").toLowerCase()}</span>
@@ -393,7 +410,14 @@ const AttributeConditionFields = ({
             isDisabled={isLoading}
           />
 
-          {renderValueInput()}
+          <ValueInput
+            selectedAttribute={selectedAttribute}
+            condition={condition}
+            handleValueChange={handleValueChange}
+            handleTextValueChange={handleTextValueChange}
+            handleNumberValueChange={handleNumberValueChange}
+            isLoading={isLoading}
+          />
         </>
       )}
     </>
diff --git a/apps/web/modules/onboarding/components/EmailInviteForm.tsx b/apps/web/modules/onboarding/components/EmailInviteForm.tsx
index f372fc0d54d7a2..95b170c051fb49 100644
--- a/apps/web/modules/onboarding/components/EmailInviteForm.tsx
+++ b/apps/web/modules/onboarding/components/EmailInviteForm.tsx
@@ -34,13 +34,15 @@ type EmailInviteFormProps = {
   emailPlaceholder?: string;
 };
 
+const EMPTY_TEAMS: Array<{ value: string; label: string }> = [];
+
 export function EmailInviteForm({
   fields,
   append,
   remove,
   defaultRole,
   showTeamSelect = false,
-  teams = [],
+  teams = EMPTY_TEAMS,
   emailPlaceholder,
 }: EmailInviteFormProps) {
   const { t } = useLocale();
diff --git a/apps/web/modules/onboarding/components/OnboardingCard.tsx b/apps/web/modules/onboarding/components/OnboardingCard.tsx
index c97a53774850fb..6ffee4d85ee28d 100644
--- a/apps/web/modules/onboarding/components/OnboardingCard.tsx
+++ b/apps/web/modules/onboarding/components/OnboardingCard.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence, LazyMotion, domAnimation, m } from "framer-motion";
 import { usePathname } from "next/navigation";
 import type { ReactNode } from "react";
 
@@ -42,9 +42,10 @@ export const OnboardingCard = ({
   };
 
   return (
+    <LazyMotion features={domAnimation}>
     <div className="relative flex h-full min-h-0 w-full flex-col">
       <AnimatePresence mode="wait">
-        <motion.div
+        <m.div
           key={pathname}
           className="flex h-full min-h-0 w-full flex-col"
           variants={containerVariants}
@@ -77,7 +78,7 @@ export const OnboardingCard = ({
               children
             )}
           </div>
-        </motion.div>
+        </m.div>
       </AnimatePresence>
 
       {/* Footer */}
@@ -89,5 +90,6 @@ export const OnboardingCard = ({
         <div className="mt-4 flex w-full items-center justify-start py-2">{footer}</div>
       )}
     </div>
+    </LazyMotion>
   );
 };
diff --git a/apps/web/modules/onboarding/components/onboarding-browser-view.tsx b/apps/web/modules/onboarding/components/onboarding-browser-view.tsx
index d448cb3eeb39fd..0805209a7c4c0e 100644
--- a/apps/web/modules/onboarding/components/onboarding-browser-view.tsx
+++ b/apps/web/modules/onboarding/components/onboarding-browser-view.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import classNames from "classnames";
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence, LazyMotion, domAnimation, m } from "framer-motion";
 import { usePathname } from "next/navigation";
 
 import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider";
@@ -102,6 +102,7 @@ export const OnboardingBrowserView = ({
     },
   ];
   return (
+    <LazyMotion features={domAnimation}>
     <div className="bg-default border-subtle hidden h-full w-full flex-col overflow-hidden rounded-l-2xl border-y border-s xl:flex">
       {/* Browser header */}
       <div className="border-subtle bg-default flex min-w-0 shrink-0 items-center gap-3 rounded-t-2xl border-b p-3">
@@ -120,7 +121,7 @@ export const OnboardingBrowserView = ({
       {/* Content */}
       <div className="bg-cal-muted h-full pl-11 pt-11">
         <AnimatePresence mode="wait">
-          <motion.div
+          <m.div
             key={pathname}
             className="bg-default border-muted flex h-full w-full flex-col overflow-hidden rounded-l-xl border-y border-s"
             variants={containerVariants}
@@ -177,9 +178,10 @@ export const OnboardingBrowserView = ({
                 </div>
               ))}
             </div>
-          </motion.div>
+          </m.div>
         </AnimatePresence>
       </div>
     </div>
+    </LazyMotion>
   );
 };
diff --git a/apps/web/modules/onboarding/components/onboarding-calendar-browser-view.tsx b/apps/web/modules/onboarding/components/onboarding-calendar-browser-view.tsx
index eecc24a56d315c..0e14d49659659d 100644
--- a/apps/web/modules/onboarding/components/onboarding-calendar-browser-view.tsx
+++ b/apps/web/modules/onboarding/components/onboarding-calendar-browser-view.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence, LazyMotion, domAnimation, m } from "framer-motion";
 import { usePathname } from "next/navigation";
 import { useMemo } from "react";
 
@@ -80,8 +80,9 @@ export const OnboardingCalendarBrowserView = () => {
   );
 
   return (
+    <LazyMotion features={domAnimation}>
     <AnimatePresence mode="wait">
-      <motion.div
+      <m.div
         key={pathname}
         className="bg-default border-muted flex h-full w-full flex-col overflow-hidden rounded-xl border"
         variants={containerVariants}
@@ -103,7 +104,8 @@ export const OnboardingCalendarBrowserView = () => {
         <div className="flex h-full flex-col overflow-hidden">
           <Calendar {...calendarProps} />
         </div>
-      </motion.div>
+      </m.div>
     </AnimatePresence>
+    </LazyMotion>
   );
 };
diff --git a/apps/web/modules/onboarding/components/onboarding-continuation-prompt.tsx b/apps/web/modules/onboarding/components/onboarding-continuation-prompt.tsx
index 1d42b3b922e031..7d06a519b0007d 100644
--- a/apps/web/modules/onboarding/components/onboarding-continuation-prompt.tsx
+++ b/apps/web/modules/onboarding/components/onboarding-continuation-prompt.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui/components/button";
@@ -13,36 +13,20 @@ export const OnboardingContinuationPrompt = () => {
   const router = useRouter();
   const { t } = useLocale();
   const { selectedPlan, organizationDetails, teamDetails, resetOnboarding } = useOnboardingStore();
-  const [isVisible, setIsVisible] = useState(false);
-  const [entityName, setEntityName] = useState<string>("");
-  const [entityType, setEntityType] = useState<"organization" | "team" | null>(null);
+  const [isDismissed, setIsDismissed] = useState(false);
 
-  useEffect(() => {
-    // Check for organization plan and data
-    const hasOrganizationPlan = selectedPlan === "organization";
-    const hasOrganizationData = organizationDetails.name?.trim() && organizationDetails.link?.trim();
+  const hasOrganizationData =
+    selectedPlan === "organization" && !!organizationDetails.name?.trim() && !!organizationDetails.link?.trim();
+  const hasTeamData = selectedPlan === "team" && !!teamDetails.name?.trim() && !!teamDetails.slug?.trim();
 
-    // Check for team plan and data
-    const hasTeamPlan = selectedPlan === "team";
-    const hasTeamData = teamDetails.name?.trim() && teamDetails.slug?.trim();
+  const entityType = hasOrganizationData ? "organization" : hasTeamData ? "team" : null;
+  const entityName = hasOrganizationData
+    ? organizationDetails.name
+    : hasTeamData
+      ? teamDetails.name
+      : "";
 
-    // Show if either organization or team has data
-    if (hasOrganizationPlan && hasOrganizationData) {
-      setIsVisible(true);
-      setEntityName(organizationDetails.name);
-      setEntityType("organization");
-    } else if (hasTeamPlan && hasTeamData) {
-      setIsVisible(true);
-      setEntityName(teamDetails.name);
-      setEntityType("team");
-    } else {
-      setIsVisible(false);
-      setEntityName("");
-      setEntityType(null);
-    }
-  }, [selectedPlan, organizationDetails, teamDetails]);
-
-  if (!isVisible || !entityName || !entityType) {
+  if (isDismissed || !entityName || !entityType) {
     return null;
   }
 
@@ -59,14 +43,14 @@ export const OnboardingContinuationPrompt = () => {
 
   const handleStartOver = () => {
     resetOnboarding();
-    setIsVisible(false);
+    setIsDismissed(true);
   };
 
   return (
     <div className="animate-fade-in fixed bottom-4 right-4 z-50">
       <div className="bg-default border-muted shadow-default relative w-[360px] rounded-lg border p-4">
         <button
-          onClick={() => setIsVisible(false)}
+          onClick={() => setIsDismissed(true)}
           className="text-muted hover:text-emphasis absolute right-2 top-2 rounded-md p-1 transition-colors">
           <XIcon className="h-4 w-4" />
         </button>
diff --git a/apps/web/modules/onboarding/components/onboarding-invite-browser-view.tsx b/apps/web/modules/onboarding/components/onboarding-invite-browser-view.tsx
index 29eb63a3ae81a9..0bc6e02727a502 100644
--- a/apps/web/modules/onboarding/components/onboarding-invite-browser-view.tsx
+++ b/apps/web/modules/onboarding/components/onboarding-invite-browser-view.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence, LazyMotion, domAnimation, m } from "framer-motion";
 import { usePathname } from "next/navigation";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -160,11 +160,12 @@ export const OnboardingInviteBrowserView = ({
   }
 
   return (
+    <LazyMotion features={domAnimation}>
     <div className="border-subtle bg-cal-muted hidden h-full w-full flex-col overflow-hidden rounded-l-2xl border xl:flex">
       {/* Content */}
       <div className="h-full px-6 pt-6">
         <AnimatePresence mode="wait">
-          <motion.div
+          <m.div
             key={pathname}
             className="flex h-full flex-col"
             variants={containerVariants}
@@ -275,9 +276,10 @@ export const OnboardingInviteBrowserView = ({
                 </div>
               ))}
             </div>
-          </motion.div>
+          </m.div>
         </AnimatePresence>
       </div>
     </div>
+    </LazyMotion>
   );
 };
diff --git a/apps/web/modules/onboarding/components/onboarding-migrate-members-browser-view.tsx b/apps/web/modules/onboarding/components/onboarding-migrate-members-browser-view.tsx
index f20447978f6044..ed1a608d0880d9 100644
--- a/apps/web/modules/onboarding/components/onboarding-migrate-members-browser-view.tsx
+++ b/apps/web/modules/onboarding/components/onboarding-migrate-members-browser-view.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence, LazyMotion, domAnimation, m } from "framer-motion";
 import { usePathname } from "next/navigation";
 
 import { subdomainSuffix } from "@calcom/features/ee/organizations/lib/orgDomains";
@@ -62,6 +62,7 @@ export const OnboardingMigrateMembersBrowserView = ({
   const hasMembers = members.length > 0;
 
   return (
+    <LazyMotion features={domAnimation}>
     <div className="bg-default border-subtle hidden h-full w-full flex-col overflow-hidden rounded-l-2xl border-y border-s xl:flex">
       {/* Browser header */}
       <div className="border-subtle bg-default flex min-w-0 shrink-0 items-center gap-3 rounded-t-2xl border-b p-3">
@@ -81,7 +82,7 @@ export const OnboardingMigrateMembersBrowserView = ({
       {/* Content */}
       <div className="bg-cal-muted h-full pl-11 pt-11">
         <AnimatePresence mode="wait">
-          <motion.div
+          <m.div
             key={pathname}
             className="bg-default border-muted flex h-full w-full flex-col overflow-hidden rounded-tl-xl border"
             variants={containerVariants}
@@ -188,9 +189,10 @@ export const OnboardingMigrateMembersBrowserView = ({
                 </div>
               )}
             </div>
-          </motion.div>
+          </m.div>
         </AnimatePresence>
       </div>
     </div>
+    </LazyMotion>
   );
 };
diff --git a/apps/web/modules/onboarding/components/onboarding-migrate-teams-browser-view.tsx b/apps/web/modules/onboarding/components/onboarding-migrate-teams-browser-view.tsx
index eaa0df770f6db5..3b58c6f319f6b3 100644
--- a/apps/web/modules/onboarding/components/onboarding-migrate-teams-browser-view.tsx
+++ b/apps/web/modules/onboarding/components/onboarding-migrate-teams-browser-view.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence, LazyMotion, domAnimation, m } from "framer-motion";
 import { usePathname } from "next/navigation";
 
 import { subdomainSuffix } from "@calcom/features/ee/organizations/lib/orgDomains";
@@ -55,6 +55,7 @@ export const OnboardingMigrateTeamsBrowserView = ({
   };
 
   return (
+    <LazyMotion features={domAnimation}>
     <div className="bg-default border-subtle hidden h-full w-full flex-col overflow-hidden rounded-l-2xl border-y border-s xl:flex">
       {/* Browser header */}
       <div className="border-subtle bg-default flex min-w-0 shrink-0 items-center gap-3 rounded-t-2xl border-b p-3">
@@ -74,7 +75,7 @@ export const OnboardingMigrateTeamsBrowserView = ({
       {/* Content */}
       <div className="bg-cal-muted h-full pl-11 pt-11">
         <AnimatePresence mode="wait">
-          <motion.div
+          <m.div
             key={pathname}
             className="bg-default border-muted flex h-full w-full flex-col overflow-hidden rounded-tl-xl border"
             variants={containerVariants}
@@ -190,9 +191,10 @@ export const OnboardingMigrateTeamsBrowserView = ({
                 </div>
               )}
             </div>
-          </motion.div>
+          </m.div>
         </AnimatePresence>
       </div>
     </div>
+    </LazyMotion>
   );
 };
diff --git a/apps/web/modules/onboarding/components/onboarding-organization-browser-view.tsx b/apps/web/modules/onboarding/components/onboarding-organization-browser-view.tsx
index 09b4d5e9262824..389b2a8be8cc39 100644
--- a/apps/web/modules/onboarding/components/onboarding-organization-browser-view.tsx
+++ b/apps/web/modules/onboarding/components/onboarding-organization-browser-view.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import classNames from "classnames";
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence, LazyMotion, domAnimation, m } from "framer-motion";
 import { usePathname } from "next/navigation";
 import { useEffect, useRef } from "react";
 
@@ -101,6 +101,7 @@ export const OnboardingOrganizationBrowserView = ({
   ];
 
   return (
+    <LazyMotion features={domAnimation}>
     <div
       ref={containerRef}
       className="bg-default border-subtle hidden h-full w-full flex-col overflow-hidden rounded-l-2xl border-y border-s xl:flex">
@@ -121,7 +122,7 @@ export const OnboardingOrganizationBrowserView = ({
       {/* Content */}
       <div className="bg-cal-muted h-full pl-11 pt-11">
         <AnimatePresence mode="wait">
-          <motion.div
+          <m.div
             key={pathname}
             className="bg-default border-muted flex h-full w-full flex-col overflow-hidden rounded-l-xl border-y border-s"
             variants={containerVariants}
@@ -195,9 +196,10 @@ export const OnboardingOrganizationBrowserView = ({
                 </div>
               ))}
             </div>
-          </motion.div>
+          </m.div>
         </AnimatePresence>
       </div>
     </div>
+    </LazyMotion>
   );
 };
diff --git a/apps/web/modules/onboarding/components/onboarding-teams-browser-view.tsx b/apps/web/modules/onboarding/components/onboarding-teams-browser-view.tsx
index b90492a6d8b350..c74d1490e9739c 100644
--- a/apps/web/modules/onboarding/components/onboarding-teams-browser-view.tsx
+++ b/apps/web/modules/onboarding/components/onboarding-teams-browser-view.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence, LazyMotion, domAnimation, m } from "framer-motion";
 import { usePathname } from "next/navigation";
 
 import { subdomainSuffix } from "@calcom/features/ee/organizations/lib/orgDomains";
@@ -56,6 +56,7 @@ export const OnboardingTeamsBrowserView = ({
   };
 
   return (
+    <LazyMotion features={domAnimation}>
     <div className="bg-default border-subtle hidden h-full w-full flex-col overflow-hidden rounded-l-2xl border-y border-s xl:flex">
       {/* Browser header */}
       <div className="border-subtle bg-default flex min-w-0 shrink-0 items-center gap-3 rounded-t-2xl border-b p-3">
@@ -75,7 +76,7 @@ export const OnboardingTeamsBrowserView = ({
       {/* Content */}
       <div className="bg-cal-muted h-full pl-11 pt-11">
         <AnimatePresence mode="wait">
-          <motion.div
+          <m.div
             key={pathname}
             className="bg-default border-muted flex h-full w-full flex-col overflow-hidden rounded-tl-xl border"
             variants={containerVariants}
@@ -186,9 +187,10 @@ export const OnboardingTeamsBrowserView = ({
                 </div>
               )}
             </div>
-          </motion.div>
+          </m.div>
         </AnimatePresence>
       </div>
     </div>
+    </LazyMotion>
   );
 };
diff --git a/apps/web/modules/onboarding/components/plan-icon.tsx b/apps/web/modules/onboarding/components/plan-icon.tsx
index 3cebe64aaf2f46..c08a3a0137ed9e 100644
--- a/apps/web/modules/onboarding/components/plan-icon.tsx
+++ b/apps/web/modules/onboarding/components/plan-icon.tsx
@@ -1,4 +1,4 @@
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence, LazyMotion, domAnimation, m } from "framer-motion";
 
 import { Icon, type IconName } from "@calcom/ui/components/icon";
 
@@ -17,6 +17,41 @@ const TEAM_ICON_POSITIONS = [
   { ringIndex: 3, angle: 180 }, // Bottom of largest ring
 ];
 
+function IconContainer({
+  variant,
+  icon,
+}: {
+  variant: "single" | "organization" | "team";
+  icon: IconName;
+}) {
+  return (
+    <div
+      className="bg-default absolute left-1/2 top-1/2 flex h-[80px] w-[80px] -translate-x-1/2 -translate-y-1/2 items-center justify-center overflow-clip rounded-full"
+      style={{
+        background: "linear-gradient(to bottom, var(--cal-bg, #ffffff), var(--cal-bg-muted, #f7f7f7))",
+        boxShadow:
+          "0px 2.818px 5.635px 0px var(--cal-border-subtle), 0px 0px 0px 0.704px var(--cal-border), 0px 0.704px 3.522px -2.818px rgba(0, 0, 0, 0.3)",
+      }}>
+      <div className="size-12 flex items-center justify-center">
+        <Icon
+          name={variant === "organization" ? "users" : icon}
+          size={32}
+          strokeWidth={1.75}
+          className="text-emphasis opacity-80"
+        />
+      </div>
+
+      <div
+        className="pointer-events-none absolute inset-0 rounded-full"
+        style={{
+          boxShadow: "0px 0.704px 0.423px 0px inset var(--cal-bg-inverted)",
+          opacity: 0.15,
+        }}
+      />
+    </div>
+  );
+}
+
 export function PlanIcon({
   icon,
   variant = "single",
@@ -26,36 +61,6 @@ export function PlanIcon({
   variant?: "single" | "organization" | "team";
   animationDirection?: "up" | "down";
 }) {
-  const renderIconContainer = () => {
-    return (
-      <div
-        className="bg-default absolute left-1/2 top-1/2 flex h-[80px] w-[80px] -translate-x-1/2 -translate-y-1/2 items-center justify-center overflow-clip rounded-full"
-        style={{
-          background: "linear-gradient(to bottom, var(--cal-bg, #ffffff), var(--cal-bg-muted, #f7f7f7))",
-          boxShadow:
-            "0px 2.818px 5.635px 0px var(--cal-border-subtle), 0px 0px 0px 0.704px var(--cal-border), 0px 0.704px 3.522px -2.818px rgba(0, 0, 0, 0.3)",
-        }}>
-        {/* Icon */}
-        <div className="size-12 flex items-center justify-center">
-          <Icon
-            name={variant === "organization" ? "users" : icon}
-            size={32}
-            strokeWidth={1.75}
-            className="text-emphasis opacity-80"
-          />
-        </div>
-
-        {/* Inner highlight/shine effect */}
-        <div
-          className="pointer-events-none absolute inset-0 rounded-full"
-          style={{
-            boxShadow: "0px 0.704px 0.423px 0px inset var(--cal-bg-inverted)",
-            opacity: 0.15,
-          }}
-        />
-      </div>
-    );
-  };
 
   const renderSmallUserIcon = (ringIndex: number, angle: number, index: number) => {
     const ringSize = RING_SIZES[ringIndex];
@@ -68,7 +73,7 @@ export function PlanIcon({
     const iconHalfSize = 20.25; // Half of 40.5px
 
     return (
-      <motion.div
+      <m.div
         key={`small-icon-${ringIndex}-${angle}`}
         initial={{
           opacity: 0,
@@ -104,11 +109,12 @@ export function PlanIcon({
             opacity: 0.15,
           }}
         />
-      </motion.div>
+      </m.div>
     );
   };
 
   return (
+    <LazyMotion features={domAnimation}>
     <div className="relative mx-auto h-[465px] w-[465px] shrink-0 overflow-visible">
       {/* Generate concentric rings centered on icon */}
       {RING_SIZES.map((size, index) => {
@@ -137,7 +143,8 @@ export function PlanIcon({
           : null}
       </AnimatePresence>
 
-      {renderIconContainer()}
+      <IconContainer variant={variant} icon={icon} />
     </div>
+    </LazyMotion>
   );
 }
diff --git a/apps/web/modules/onboarding/organization/brand/organization-brand-view.tsx b/apps/web/modules/onboarding/organization/brand/organization-brand-view.tsx
index d68889a8d0f39e..e9bfdbfdfbb8db 100644
--- a/apps/web/modules/onboarding/organization/brand/organization-brand-view.tsx
+++ b/apps/web/modules/onboarding/organization/brand/organization-brand-view.tsx
@@ -2,7 +2,7 @@
 
 import { useRouter, useSearchParams } from "next/navigation";
 import posthog from "posthog-js";
-import { useEffect, useState } from "react";
+import { Suspense, useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui/components/button";
@@ -19,22 +19,16 @@ type OrganizationBrandViewProps = {
   userEmail: string;
 };
 
-export const OrganizationBrandView = ({ userEmail }: OrganizationBrandViewProps) => {
+const OrganizationBrandViewInner = ({ userEmail }: OrganizationBrandViewProps) => {
   const router = useRouter();
   const searchParams = useSearchParams();
   const { t } = useLocale();
   const { organizationDetails, organizationBrand, setOrganizationBrand } = useOnboardingStore();
   const { isMigrationFlow, hasTeams } = useMigrationFlow();
 
-  const [logoPreview, setLogoPreview] = useState<string | null>(null);
-  const [bannerPreview, setBannerPreview] = useState<string | null>(null);
-  const [brandColor, setBrandColor] = useState("#000000");
-
-  useEffect(() => {
-    setLogoPreview(organizationBrand.logo);
-    setBannerPreview(organizationBrand.banner);
-    setBrandColor(organizationBrand.color);
-  }, [organizationBrand]);
+  const [logoPreview, setLogoPreview] = useState<string | null>(organizationBrand.logo);
+  const [bannerPreview, setBannerPreview] = useState<string | null>(organizationBrand.banner);
+  const [brandColor, setBrandColor] = useState(organizationBrand.color);
 
   const handleLogoChange = (newLogo: string) => {
     setLogoPreview(newLogo);
@@ -218,3 +212,11 @@ export const OrganizationBrandView = ({ userEmail }: OrganizationBrandViewProps)
     </OnboardingLayout>
   );
 };
+
+export const OrganizationBrandView = (props: OrganizationBrandViewProps) => {
+  return (
+    <Suspense>
+      <OrganizationBrandViewInner {...props} />
+    </Suspense>
+  );
+};
diff --git a/apps/web/modules/onboarding/organization/details/organization-details-view.tsx b/apps/web/modules/onboarding/organization/details/organization-details-view.tsx
index f26f031c864b8e..8665116e31d481 100644
--- a/apps/web/modules/onboarding/organization/details/organization-details-view.tsx
+++ b/apps/web/modules/onboarding/organization/details/organization-details-view.tsx
@@ -2,7 +2,7 @@
 
 import { useRouter, useSearchParams } from "next/navigation";
 import posthog from "posthog-js";
-import { useEffect, useState } from "react";
+import { Suspense, useEffect, useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui/components/button";
@@ -29,37 +29,25 @@ const slugify = (text: string): string => {
     .replace(/^-+|-+$/g, ""); // Remove leading/trailing dashes
 };
 
-export const OrganizationDetailsView = ({ userEmail }: OrganizationDetailsViewProps) => {
+const OrganizationDetailsViewInner = ({ userEmail }: OrganizationDetailsViewProps) => {
   const router = useRouter();
   const searchParams = useSearchParams();
   const { t } = useLocale();
   const { organizationDetails, setOrganizationDetails, selectedPlan, setSelectedPlan } = useOnboardingStore();
   const { isMigrationFlow, hasTeams } = useMigrationFlow();
 
-  const [organizationName, setOrganizationName] = useState("");
-  const [organizationLink, setOrganizationLink] = useState("");
-  const [organizationBio, setOrganizationBio] = useState("");
+  const [organizationName, setOrganizationName] = useState(organizationDetails.name);
+  const [organizationLink, setOrganizationLink] = useState(organizationDetails.link);
+  const [organizationBio, setOrganizationBio] = useState(organizationDetails.bio);
   const [isSlugValid, setIsSlugValid] = useState(false);
-  const [isSlugManuallyEdited, setIsSlugManuallyEdited] = useState(false);
+  const [isSlugManuallyEdited, setIsSlugManuallyEdited] = useState(!!organizationDetails.link);
 
-  // Ensure selectedPlan is set to "organization" when entering organization onboarding
   useEffect(() => {
     if (selectedPlan !== "organization") {
       setSelectedPlan("organization");
     }
   }, [selectedPlan, setSelectedPlan]);
 
-  // Load from store on mount
-  useEffect(() => {
-    setOrganizationName(organizationDetails.name);
-    setOrganizationLink(organizationDetails.link);
-    setOrganizationBio(organizationDetails.bio);
-    // If there's a pre-existing link, consider it manually set
-    if (organizationDetails.link) {
-      setIsSlugManuallyEdited(true);
-    }
-  }, [organizationDetails]);
-
   // Auto-populate slug from organization name (unless manually edited)
   useEffect(() => {
     if (!isSlugManuallyEdited && organizationName) {
@@ -173,3 +161,11 @@ export const OrganizationDetailsView = ({ userEmail }: OrganizationDetailsViewPr
     </OnboardingLayout>
   );
 };
+
+export const OrganizationDetailsView = (props: OrganizationDetailsViewProps) => {
+  return (
+    <Suspense>
+      <OrganizationDetailsViewInner {...props} />
+    </Suspense>
+  );
+};
diff --git a/apps/web/modules/onboarding/organization/invite/email/organization-invite-email-view.tsx b/apps/web/modules/onboarding/organization/invite/email/organization-invite-email-view.tsx
index 3de06b7f238f10..140c67ac17b0cd 100644
--- a/apps/web/modules/onboarding/organization/invite/email/organization-invite-email-view.tsx
+++ b/apps/web/modules/onboarding/organization/invite/email/organization-invite-email-view.tsx
@@ -2,7 +2,7 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter, useSearchParams } from "next/navigation";
-import React from "react";
+import React, { Suspense } from "react";
 import { useForm, useFieldArray } from "react-hook-form";
 import { z } from "zod";
 
@@ -33,7 +33,7 @@ type FormValues = {
   }[];
 };
 
-export const OrganizationInviteEmailView = ({ userEmail }: OrganizationInviteEmailViewProps) => {
+const OrganizationInviteEmailViewInner = ({ userEmail }: OrganizationInviteEmailViewProps) => {
   const router = useRouter();
   const searchParams = useSearchParams();
   const { t } = useLocale();
@@ -209,3 +209,11 @@ export const OrganizationInviteEmailView = ({ userEmail }: OrganizationInviteEma
     </OnboardingLayout>
   );
 };
+
+export const OrganizationInviteEmailView = (props: OrganizationInviteEmailViewProps) => {
+  return (
+    <Suspense>
+      <OrganizationInviteEmailViewInner {...props} />
+    </Suspense>
+  );
+};
diff --git a/apps/web/modules/onboarding/organization/migrate-members/organization-migrate-members-view.tsx b/apps/web/modules/onboarding/organization/migrate-members/organization-migrate-members-view.tsx
index 21fbb2791d767f..ffde270a5525cc 100644
--- a/apps/web/modules/onboarding/organization/migrate-members/organization-migrate-members-view.tsx
+++ b/apps/web/modules/onboarding/organization/migrate-members/organization-migrate-members-view.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useRouter, useSearchParams } from "next/navigation";
+import { Suspense } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { RouterOutputs } from "@calcom/trpc/react";
@@ -23,7 +24,7 @@ type OrganizationMigrateMembersViewProps = {
   userEmail: string;
 };
 
-export const OrganizationMigrateMembersView = ({ userEmail }: OrganizationMigrateMembersViewProps) => {
+const OrganizationMigrateMembersViewInner = ({ userEmail }: OrganizationMigrateMembersViewProps) => {
   const router = useRouter();
   const searchParams = useSearchParams();
   const { t } = useLocale();
@@ -139,3 +140,11 @@ export const OrganizationMigrateMembersView = ({ userEmail }: OrganizationMigrat
     </OnboardingLayout>
   );
 };
+
+export const OrganizationMigrateMembersView = (props: OrganizationMigrateMembersViewProps) => {
+  return (
+    <Suspense>
+      <OrganizationMigrateMembersViewInner {...props} />
+    </Suspense>
+  );
+};
diff --git a/apps/web/modules/onboarding/organization/migrate-teams/organization-migrate-teams-view.tsx b/apps/web/modules/onboarding/organization/migrate-teams/organization-migrate-teams-view.tsx
index ed1ff646a57f22..bf362029ab9224 100644
--- a/apps/web/modules/onboarding/organization/migrate-teams/organization-migrate-teams-view.tsx
+++ b/apps/web/modules/onboarding/organization/migrate-teams/organization-migrate-teams-view.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useRouter, useSearchParams } from "next/navigation";
-import { useEffect } from "react";
+import { Suspense, useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -35,7 +35,7 @@ const schema = z.object({
 
 type FormValues = z.infer<typeof schema>;
 
-export const OrganizationMigrateTeamsView = ({ userEmail }: OrganizationMigrateTeamsViewProps) => {
+const OrganizationMigrateTeamsViewInner = ({ userEmail }: OrganizationMigrateTeamsViewProps) => {
   const router = useRouter();
   const searchParams = useSearchParams();
   const { t } = useLocale();
@@ -232,3 +232,11 @@ export const OrganizationMigrateTeamsView = ({ userEmail }: OrganizationMigrateT
     </OnboardingLayout>
   );
 };
+
+export const OrganizationMigrateTeamsView = (props: OrganizationMigrateTeamsViewProps) => {
+  return (
+    <Suspense>
+      <OrganizationMigrateTeamsViewInner {...props} />
+    </Suspense>
+  );
+};
diff --git a/apps/web/modules/onboarding/organization/teams/organization-teams-view.tsx b/apps/web/modules/onboarding/organization/teams/organization-teams-view.tsx
index b41896f263a607..99df97ef9ba4af 100644
--- a/apps/web/modules/onboarding/organization/teams/organization-teams-view.tsx
+++ b/apps/web/modules/onboarding/organization/teams/organization-teams-view.tsx
@@ -3,6 +3,7 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter, useSearchParams } from "next/navigation";
 import posthog from "posthog-js";
+import { Suspense } from "react";
 import { useForm, useFieldArray } from "react-hook-form";
 import { z } from "zod";
 
@@ -27,7 +28,7 @@ type FormValues = {
   teams: { name: string }[];
 };
 
-export const OrganizationTeamsView = ({ userEmail }: OrganizationTeamsViewProps) => {
+const OrganizationTeamsViewInner = ({ userEmail }: OrganizationTeamsViewProps) => {
   const router = useRouter();
   const searchParams = useSearchParams();
   const { t } = useLocale();
@@ -248,3 +249,11 @@ export const OrganizationTeamsView = ({ userEmail }: OrganizationTeamsViewProps)
     </OnboardingLayout>
   );
 };
+
+export const OrganizationTeamsView = (props: OrganizationTeamsViewProps) => {
+  return (
+    <Suspense>
+      <OrganizationTeamsViewInner {...props} />
+    </Suspense>
+  );
+};
diff --git a/apps/web/modules/onboarding/teams/details/team-details-view.tsx b/apps/web/modules/onboarding/teams/details/team-details-view.tsx
index 2caf133f66aa1a..59852878df23d3 100644
--- a/apps/web/modules/onboarding/teams/details/team-details-view.tsx
+++ b/apps/web/modules/onboarding/teams/details/team-details-view.tsx
@@ -30,22 +30,12 @@ export const TeamDetailsView = ({ userEmail }: TeamDetailsViewProps) => {
   const { createTeam, isSubmitting } = useCreateTeam();
 
   const logoRef = useRef<HTMLInputElement>(null);
-  const [teamName, setTeamName] = useState("");
-  const [teamSlug, setTeamSlug] = useState("");
-  const [teamBio, setTeamBio] = useState("");
-  const [teamLogo, setTeamLogo] = useState<string>("");
+  const [teamName, setTeamName] = useState(teamDetails.name);
+  const [teamSlug, setTeamSlug] = useState(teamDetails.slug);
+  const [teamBio, setTeamBio] = useState(teamDetails.bio);
+  const [teamLogo, setTeamLogo] = useState<string>(teamBrand.logo || "");
   const [isSlugValid, setIsSlugValid] = useState(false);
-  const [isSlugManuallyEdited, setIsSlugManuallyEdited] = useState(false);
-
-  useEffect(() => {
-    setTeamName(teamDetails.name);
-    setTeamSlug(teamDetails.slug);
-    setTeamBio(teamDetails.bio);
-    setTeamLogo(teamBrand.logo || "");
-    if (teamDetails.slug) {
-      setIsSlugManuallyEdited(true);
-    }
-  }, [teamDetails, teamBrand]);
+  const [isSlugManuallyEdited, setIsSlugManuallyEdited] = useState(!!teamDetails.slug);
 
   useEffect(() => {
     if (!isSlugManuallyEdited && teamName) {
diff --git a/apps/web/modules/onboarding/teams/invite/email/team-invite-email-view.tsx b/apps/web/modules/onboarding/teams/invite/email/team-invite-email-view.tsx
index 1c63b178b08ee5..deaab7670cdccd 100644
--- a/apps/web/modules/onboarding/teams/invite/email/team-invite-email-view.tsx
+++ b/apps/web/modules/onboarding/teams/invite/email/team-invite-email-view.tsx
@@ -2,7 +2,7 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter, useSearchParams } from "next/navigation";
-import React, { useEffect } from "react";
+import React, { Suspense, useEffect } from "react";
 import { useForm, useFieldArray } from "react-hook-form";
 import { z } from "zod";
 
@@ -30,7 +30,7 @@ type FormValues = {
   }[];
 };
 
-export const TeamInviteEmailView = ({ userEmail }: TeamInviteEmailViewProps) => {
+const TeamInviteEmailViewInner = ({ userEmail }: TeamInviteEmailViewProps) => {
   const router = useRouter();
   const searchParams = useSearchParams();
   const { t, i18n } = useLocale();
@@ -195,3 +195,11 @@ export const TeamInviteEmailView = ({ userEmail }: TeamInviteEmailViewProps) =>
     </OnboardingLayout>
   );
 };
+
+export const TeamInviteEmailView = (props: TeamInviteEmailViewProps) => {
+  return (
+    <Suspense>
+      <TeamInviteEmailViewInner {...props} />
+    </Suspense>
+  );
+};
diff --git a/apps/web/modules/onboarding/teams/invite/team-invite-view.tsx b/apps/web/modules/onboarding/teams/invite/team-invite-view.tsx
index 43200764f8275a..247bf666f61146 100644
--- a/apps/web/modules/onboarding/teams/invite/team-invite-view.tsx
+++ b/apps/web/modules/onboarding/teams/invite/team-invite-view.tsx
@@ -2,7 +2,7 @@
 
 import { useRouter, useSearchParams } from "next/navigation";
 import posthog from "posthog-js";
-import React, { useEffect } from "react";
+import React, { Suspense, useEffect } from "react";
 
 import { useFlags } from "@calcom/web/modules/feature-flags/hooks/useFlags";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -20,7 +20,7 @@ type TeamInviteViewProps = {
   userEmail: string;
 };
 
-export const TeamInviteView = ({ userEmail }: TeamInviteViewProps) => {
+const TeamInviteViewInner = ({ userEmail }: TeamInviteViewProps) => {
   const router = useRouter();
   const searchParams = useSearchParams();
   const { t } = useLocale();
@@ -119,3 +119,11 @@ export const TeamInviteView = ({ userEmail }: TeamInviteViewProps) => {
     </>
   );
 };
+
+export const TeamInviteView = (props: TeamInviteViewProps) => {
+  return (
+    <Suspense>
+      <TeamInviteViewInner {...props} />
+    </Suspense>
+  );
+};
diff --git a/apps/web/modules/schedules/components/date-override-list.test.tsx b/apps/web/modules/schedules/components/date-override-list.test.tsx
index c36d5ba6898131..18c04d255214b7 100644
--- a/apps/web/modules/schedules/components/date-override-list.test.tsx
+++ b/apps/web/modules/schedules/components/date-override-list.test.tsx
@@ -1,7 +1,6 @@
 import { TooltipProvider } from "@radix-ui/react-tooltip";
 import { render, renderHook, screen } from "@testing-library/react";
-// eslint-disable-next-line no-restricted-imports
-import { noop } from "lodash";
+import noop from "lodash/noop";
 import { useFieldArray, useForm, FormProvider } from "react-hook-form";
 import { vi } from "vitest";
 
diff --git a/apps/web/modules/settings/admin/components/UsersTable.tsx b/apps/web/modules/settings/admin/components/UsersTable.tsx
index 680053a9155c92..090a7ba0a04a32 100644
--- a/apps/web/modules/settings/admin/components/UsersTable.tsx
+++ b/apps/web/modules/settings/admin/components/UsersTable.tsx
@@ -43,9 +43,12 @@ function UsersTable({ setSMSLockState }: Props) {
   return <LockStatusTable users={users} teams={teams} setSMSLockState={setSMSLockState} />;
 }
 
+const EMPTY_USERS: User[] = [];
+const EMPTY_TEAMS: Team[] = [];
+
 const LockStatusTable = ({
-  users = [],
-  teams = [],
+  users = EMPTY_USERS,
+  teams = EMPTY_TEAMS,
   setSMSLockState,
 }: {
   users?: User[];
diff --git a/apps/web/modules/settings/admin/impersonation-view.tsx b/apps/web/modules/settings/admin/impersonation-view.tsx
index c8c921da9f303a..35b972340157c4 100644
--- a/apps/web/modules/settings/admin/impersonation-view.tsx
+++ b/apps/web/modules/settings/admin/impersonation-view.tsx
@@ -2,7 +2,7 @@
 
 import { signIn } from "next-auth/react";
 import { useSearchParams } from "next/navigation";
-import { useRef, useEffect, useState } from "react";
+import { Suspense, useRef, useEffect, useState } from "react";
 
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -13,7 +13,7 @@ import { TextField } from "@calcom/ui/components/form";
 
 import RecentImpersonationsList from "../../../components/settings/admin/RecentImpersonationsList";
 
-const ImpersonationView = () => {
+const ImpersonationViewInner = () => {
   const { t } = useLocale();
   const usernameRef = useRef<HTMLInputElement>(null);
   const searchParams = useSearchParams();
@@ -81,4 +81,12 @@ const ImpersonationView = () => {
   );
 };
 
+const ImpersonationView = () => {
+  return (
+    <Suspense>
+      <ImpersonationViewInner />
+    </Suspense>
+  );
+};
+
 export default ImpersonationView;
diff --git a/apps/web/modules/settings/billing/components/ActiveUserBreakdown.tsx b/apps/web/modules/settings/billing/components/ActiveUserBreakdown.tsx
index f960563c4bec14..13f497703f048b 100644
--- a/apps/web/modules/settings/billing/components/ActiveUserBreakdown.tsx
+++ b/apps/web/modules/settings/billing/components/ActiveUserBreakdown.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useRef, useState } from "react";
 
 import dayjs from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -68,9 +68,11 @@ function ActiveUserBreakdownContent({ data, teamId }: { data: BreakdownData; tea
 
   const { activeUsers, totalMembers, activeHosts, activeAttendees, periodStart, periodEnd } = data;
 
-  useEffect(() => {
+  const prevActiveUsersRef = useRef(activeUsers);
+  if (activeUsers !== prevActiveUsersRef.current) {
+    prevActiveUsersRef.current = activeUsers;
     setCurrentPage(0);
-  }, [activeUsers]);
+  }
 
   const totalPages = Math.ceil(activeUsers.length / PAGE_SIZE);
   const paginatedUsers = activeUsers.slice(currentPage * PAGE_SIZE, (currentPage + 1) * PAGE_SIZE);
@@ -135,7 +137,7 @@ function ActiveUserBreakdownContent({ data, teamId }: { data: BreakdownData; tea
                 <Button
                   color="secondary"
                   size="sm"
-                  onClick={() => setCurrentPage(currentPage - 1)}
+                  onClick={() => setCurrentPage((prev) => prev - 1)}
                   disabled={currentPage === 0}
                   StartIcon="arrow-left">
                   {t("previous")}
@@ -143,7 +145,7 @@ function ActiveUserBreakdownContent({ data, teamId }: { data: BreakdownData; tea
                 <Button
                   color="secondary"
                   size="sm"
-                  onClick={() => setCurrentPage(currentPage + 1)}
+                  onClick={() => setCurrentPage((prev) => prev + 1)}
                   disabled={currentPage >= totalPages - 1}
                   EndIcon="arrow-right">
                   {t("next")}
diff --git a/apps/web/modules/settings/components/BookerLayoutSelector.tsx b/apps/web/modules/settings/components/BookerLayoutSelector.tsx
index b3220e7c5a9693..708cc8bc7bc05f 100644
--- a/apps/web/modules/settings/components/BookerLayoutSelector.tsx
+++ b/apps/web/modules/settings/components/BookerLayoutSelector.tsx
@@ -185,13 +185,14 @@ const BookerLayoutFields = ({
         )}>
         {bookerLayoutOptions.map((layout) => (
           <div className="w-full" key={layout}>
-            <label>
+            <label htmlFor={`bookerlayout_${layout}`}>
               <img
                 className="mb-3 w-full max-w-none cursor-pointer"
                 src={`/bookerlayout_${layout}${isDark ? "_dark" : ""}.svg`}
                 alt="Layout preview"
               />
               <CheckboxField
+                id={`bookerlayout_${layout}`}
                 value={layout}
                 name={`bookerlayout_${layout}`}
                 description={t(`bookerlayout_${layout}`)}
diff --git a/apps/web/modules/settings/my-account/profile-view.tsx b/apps/web/modules/settings/my-account/profile-view.tsx
index 4ecaa8d2514953..0f55c04166ee3d 100644
--- a/apps/web/modules/settings/my-account/profile-view.tsx
+++ b/apps/web/modules/settings/my-account/profile-view.tsx
@@ -2,8 +2,8 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import { revalidateSettingsProfile } from "app/cache/path/settings/my-account";
-// eslint-disable-next-line no-restricted-imports
-import { get, pick } from "lodash";
+import get from "lodash/get";
+import pick from "lodash/pick";
 import { signOut, useSession } from "next-auth/react";
 import type { BaseSyntheticEvent } from "react";
 import React, { useRef, useState } from "react";
diff --git a/apps/web/modules/settings/platform/managed-users/managed-users-view.tsx b/apps/web/modules/settings/platform/managed-users/managed-users-view.tsx
index 3809eaa20a0067..b2b02a965c1176 100644
--- a/apps/web/modules/settings/platform/managed-users/managed-users-view.tsx
+++ b/apps/web/modules/settings/platform/managed-users/managed-users-view.tsx
@@ -14,6 +14,34 @@ import Shell from "~/shell/Shell";
 
 type OAuthClientOption = { label: string; value: string };
 
+const ManagedUsersSkeletonLoader = () => {
+  return (
+    <div className="flex">
+      <div className="w-1/4 p-4" />
+      <div className="flex-1 p-6">
+        <SkeletonContainer>
+          <div className="mb-4 flex justify-between">
+            <SkeletonText className="mb-2 h-6 w-1/3" />
+            <SkeletonText className="h-6 w-1/5" />
+          </div>
+          <div className="mb-4">
+            <SkeletonText className="h-8 w-1/2 rounded-md" />
+          </div>
+          <div className="border-subtle flex items-center border-b py-3">
+            <SkeletonText className="h-6 w-1/4" />
+            <SkeletonText className="ml-4 h-6 w-1/5" />
+            <SkeletonText className="ml-4 h-6 w-1/5" />
+          </div>
+
+          <div className="mt-4">
+            <SkeletonText className="mx-auto h-4 w-1/3" />
+          </div>
+        </SkeletonContainer>
+      </div>
+    </div>
+  );
+};
+
 const ManagedUsersView = () => {
   const { t } = useLocale();
   const { data: OAuthClientsQueryData, error, isLoading: isOAuthClientLoading } = useOAuthClients();
@@ -29,34 +57,6 @@ const ManagedUsersView = () => {
 
   const [oAuthClient, setOAuthClient] = useState<OAuthClientOption | null>(oAuthClientOptions[0] || null);
 
-  const ManagedUsersSkeletonLoader = () => {
-    return (
-      <div className="flex">
-        <div className="w-1/4 p-4" />
-        <div className="flex-1 p-6">
-          <SkeletonContainer>
-            <div className="mb-4 flex justify-between">
-              <SkeletonText className="mb-2 h-6 w-1/3" />
-              <SkeletonText className="h-6 w-1/5" />
-            </div>
-            <div className="mb-4">
-              <SkeletonText className="h-8 w-1/2 rounded-md" />
-            </div>
-            <div className="border-subtle flex items-center border-b py-3">
-              <SkeletonText className="h-6 w-1/4" />
-              <SkeletonText className="ml-4 h-6 w-1/5" />
-              <SkeletonText className="ml-4 h-6 w-1/5" />
-            </div>
-
-            <div className="mt-4">
-              <SkeletonText className="mx-auto h-4 w-1/3" />
-            </div>
-          </SkeletonContainer>
-        </div>
-      </div>
-    );
-  };
-
   if (isOAuthClientLoading) {
     return <ManagedUsersSkeletonLoader />;
   }
diff --git a/apps/web/modules/settings/teams/[id]/event-types-view.tsx b/apps/web/modules/settings/teams/[id]/event-types-view.tsx
index a5a56234acf4f5..6fff4c10131ba8 100644
--- a/apps/web/modules/settings/teams/[id]/event-types-view.tsx
+++ b/apps/web/modules/settings/teams/[id]/event-types-view.tsx
@@ -16,6 +16,20 @@ type CreateTeamEventTypeProps = {
   permissions: { canCreateEventType: boolean };
 };
 
+const SubmitButton = (isPending: boolean) => {
+  const { t } = useLocale();
+  return (
+    <Button
+      data-testid="finish-button"
+      type="submit"
+      color="primary"
+      className="w-full justify-center"
+      disabled={isPending}>
+      {t("finish")}
+    </Button>
+  );
+};
+
 export const CreateTeamEventType = ({ permissions }: CreateTeamEventTypeProps) => {
   const searchParams = useCompatSearchParams();
   const { t } = useLocale();
@@ -30,19 +44,6 @@ export const CreateTeamEventType = ({ permissions }: CreateTeamEventTypeProps) =
     showToast(err, "error");
   };
 
-  const SubmitButton = (isPending: boolean) => {
-    return (
-      <Button
-        data-testid="finish-button"
-        type="submit"
-        color="primary"
-        className="w-full justify-center"
-        disabled={isPending}>
-        {t("finish")}
-      </Button>
-    );
-  };
-
   const { data: team } = trpc.viewer.teams.get.useQuery(
     { teamId: teamId ?? -1, isOrg: false },
     { enabled: !!teamId }
diff --git a/apps/web/modules/settings/teams/new/create-new-team-view.tsx b/apps/web/modules/settings/teams/new/create-new-team-view.tsx
index adeba88a3f9b03..34342e3fe01365 100644
--- a/apps/web/modules/settings/teams/new/create-new-team-view.tsx
+++ b/apps/web/modules/settings/teams/new/create-new-team-view.tsx
@@ -34,29 +34,18 @@ export const CreateNewTeamView = ({ userEmail }: CreateNewTeamViewProps) => {
   });
 
   const logoRef = useRef<HTMLInputElement>(null);
-  const [teamName, setTeamName] = useState("");
-  const [teamSlug, setTeamSlug] = useState("");
-  const [teamBio, setTeamBio] = useState("");
-  const [teamLogo, setTeamLogo] = useState<string>("");
+  const [teamName, setTeamName] = useState(teamDetails.name);
+  const [teamSlug, setTeamSlug] = useState(teamDetails.slug);
+  const [teamBio, setTeamBio] = useState(teamDetails.bio);
+  const [teamLogo, setTeamLogo] = useState<string>(teamBrand.logo || "");
   const [isSlugValid, setIsSlugValid] = useState(false);
-  const [isSlugManuallyEdited, setIsSlugManuallyEdited] = useState(false);
+  const [isSlugManuallyEdited, setIsSlugManuallyEdited] = useState(!!teamDetails.slug);
 
-  // Reset onboarding store when entering the team creation flow from settings
   useEffect(() => {
     resetOnboardingPreservingPlan();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  useEffect(() => {
-    setTeamName(teamDetails.name);
-    setTeamSlug(teamDetails.slug);
-    setTeamBio(teamDetails.bio);
-    setTeamLogo(teamBrand.logo || "");
-    if (teamDetails.slug) {
-      setIsSlugManuallyEdited(true);
-    }
-  }, [teamDetails, teamBrand]);
-
   useEffect(() => {
     if (!isSlugManuallyEdited && teamName) {
       const slugifiedName = slugify(teamName);
diff --git a/apps/web/modules/settings/teams/new/invite/csv-upload-modal.tsx b/apps/web/modules/settings/teams/new/invite/csv-upload-modal.tsx
index 9b124f22cc94c3..5126b2ec6ef879 100644
--- a/apps/web/modules/settings/teams/new/invite/csv-upload-modal.tsx
+++ b/apps/web/modules/settings/teams/new/invite/csv-upload-modal.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useRouter, useSearchParams } from "next/navigation";
-import React, { useRef, useState } from "react";
+import React, { Suspense, useRef, useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui/components/button";
@@ -43,7 +43,7 @@ type CSVUploadModalProps = {
   onClose: () => void;
 };
 
-export const CSVUploadModal = ({ isOpen, onClose }: CSVUploadModalProps) => {
+const CSVUploadModalInner = ({ isOpen, onClose }: CSVUploadModalProps) => {
   const { t } = useLocale();
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -261,3 +261,11 @@ export const CSVUploadModal = ({ isOpen, onClose }: CSVUploadModalProps) => {
     </Dialog>
   );
 };
+
+export const CSVUploadModal = (props: CSVUploadModalProps) => {
+  return (
+    <Suspense>
+      <CSVUploadModalInner {...props} />
+    </Suspense>
+  );
+};
diff --git a/apps/web/modules/settings/teams/new/invite/email/team-invite-email-view.tsx b/apps/web/modules/settings/teams/new/invite/email/team-invite-email-view.tsx
index 697e9c6c607857..5011dfb616bb95 100644
--- a/apps/web/modules/settings/teams/new/invite/email/team-invite-email-view.tsx
+++ b/apps/web/modules/settings/teams/new/invite/email/team-invite-email-view.tsx
@@ -8,7 +8,7 @@ import { showToast } from "@calcom/ui/components/toast";
 import { revalidateTeamsList } from "@calcom/web/app/(use-page-wrapper)/(main-nav)/teams/actions";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter, useSearchParams } from "next/navigation";
-import React, { useEffect } from "react";
+import React, { Suspense, useEffect } from "react";
 import { useFieldArray, useForm } from "react-hook-form";
 import { z } from "zod";
 import { EmailInviteForm } from "~/onboarding/components/EmailInviteForm";
@@ -30,7 +30,7 @@ type FormValues = {
   }[];
 };
 
-export const TeamInviteEmailView = ({ userEmail }: TeamInviteEmailViewProps) => {
+const TeamInviteEmailViewInner = ({ userEmail }: TeamInviteEmailViewProps) => {
   const router = useRouter();
   const searchParams = useSearchParams();
   const { t, i18n } = useLocale();
@@ -114,8 +114,7 @@ export const TeamInviteEmailView = ({ userEmail }: TeamInviteEmailViewProps) =>
           i18n.language
         );
         // Invalidate both server-side cache and client-side tRPC cache
-        await revalidateTeamsList();
-        await utils.viewer.teams.list.invalidate();
+        await Promise.all([revalidateTeamsList(), utils.viewer.teams.list.invalidate()]);
         resetOnboardingPreservingPlan();
         router.replace("/teams");
       } catch (error) {
@@ -125,8 +124,7 @@ export const TeamInviteEmailView = ({ userEmail }: TeamInviteEmailViewProps) =>
       }
     } else {
       // No invites, skip to teams page
-      await revalidateTeamsList();
-      await utils.viewer.teams.list.invalidate();
+      await Promise.all([revalidateTeamsList(), utils.viewer.teams.list.invalidate()]);
       resetOnboardingPreservingPlan();
       router.replace("/teams");
     }
@@ -209,3 +207,11 @@ export const TeamInviteEmailView = ({ userEmail }: TeamInviteEmailViewProps) =>
     </OnboardingLayout>
   );
 };
+
+export const TeamInviteEmailView = (props: TeamInviteEmailViewProps) => {
+  return (
+    <Suspense>
+      <TeamInviteEmailViewInner {...props} />
+    </Suspense>
+  );
+};
diff --git a/apps/web/modules/settings/teams/new/invite/team-invite-view.tsx b/apps/web/modules/settings/teams/new/invite/team-invite-view.tsx
index 780d4dadd3e94a..33309593d7919f 100644
--- a/apps/web/modules/settings/teams/new/invite/team-invite-view.tsx
+++ b/apps/web/modules/settings/teams/new/invite/team-invite-view.tsx
@@ -2,7 +2,7 @@
 
 import { useRouter, useSearchParams } from "next/navigation";
 import posthog from "posthog-js";
-import React, { useEffect } from "react";
+import React, { Suspense, useEffect } from "react";
 
 import { useFlags } from "@calcom/web/modules/feature-flags/hooks/useFlags";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -21,7 +21,7 @@ type TeamInviteViewProps = {
   userEmail: string;
 };
 
-export const TeamInviteView = ({ userEmail }: TeamInviteViewProps) => {
+const TeamInviteViewInner = ({ userEmail }: TeamInviteViewProps) => {
   const router = useRouter();
   const searchParams = useSearchParams();
   const { t } = useLocale();
@@ -126,3 +126,11 @@ export const TeamInviteView = ({ userEmail }: TeamInviteViewProps) => {
     </>
   );
 };
+
+export const TeamInviteView = (props: TeamInviteViewProps) => {
+  return (
+    <Suspense>
+      <TeamInviteViewInner {...props} />
+    </Suspense>
+  );
+};
diff --git a/apps/web/modules/signup-view.tsx b/apps/web/modules/signup-view.tsx
index e72fbde1b38da0..254c69bffc865f 100644
--- a/apps/web/modules/signup-view.tsx
+++ b/apps/web/modules/signup-view.tsx
@@ -47,7 +47,7 @@ import { useRouter } from "next/navigation";
 import Script from "next/script";
 import { signIn } from "next-auth/react";
 import posthog from "posthog-js";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import type { SubmitHandler } from "react-hook-form";
 import { useForm, useFormContext } from "react-hook-form";
 import { Toaster } from "sonner";
@@ -103,20 +103,18 @@ function truncateDomain(domain: string) {
 
 function UsernameField({
   username,
-  setPremium,
   premium,
-  setUsernameTaken,
-  orgSlug,
   usernameTaken,
+  orgSlug,
+  onUsernameCheck,
   disabled,
   ...props
 }: React.ComponentProps<typeof TextField> & {
   username: string;
-  setPremium: (value: boolean) => void;
   premium: boolean;
   usernameTaken: boolean;
   orgSlug?: string;
-  setUsernameTaken: (value: boolean) => void;
+  onUsernameCheck: (check: { premium: boolean; taken: boolean }) => void;
 }) {
   const { t } = useLocale();
   const { register, formState } = useFormContext<FormValues>();
@@ -126,16 +124,13 @@ function UsernameField({
     if (formState.isSubmitting || formState.isSubmitSuccessful) return;
 
     async function checkUsername() {
-      // If the username can't be changed, there is no point in doing the username availability check
       if (disabled) return;
       if (!debouncedUsername) {
-        setPremium(false);
-        setUsernameTaken(false);
+        onUsernameCheck({ premium: false, taken: false });
         return;
       }
       fetchUsername(debouncedUsername, orgSlug ?? null).then(({ data }) => {
-        setPremium(data.premium);
-        setUsernameTaken(!data.available);
+        onUsernameCheck({ premium: data.premium, taken: !data.available });
       });
     }
     checkUsername();
@@ -195,11 +190,17 @@ export default function Signup({
 }: SignupProps) {
   const isOrgInviteByLink = orgSlug && !prepopulateFormValues?.username;
   const [isSamlSignup, setIsSamlSignup] = useState(false);
-  const [premiumUsername, setPremiumUsername] = useState(false);
-  const [usernameTaken, setUsernameTaken] = useState(false);
+  const [usernameCheck, setUsernameCheck] = useState({ premium: false, taken: false });
+  const premiumUsername = usernameCheck.premium;
+  const usernameTaken = usernameCheck.taken;
   const [isGoogleLoading, setIsGoogleLoading] = useState(false);
   const [accountUnderReview, setAccountUnderReview] = useState(false);
   const [displayEmailForm, setDisplayEmailForm] = useState(token);
+  const prevToken = useRef(token);
+  if (prevToken.current !== token) {
+    prevToken.current = token;
+    setDisplayEmailForm(token);
+  }
   const [turnstileKey, setTurnstileKey] = useState(0);
   const searchParams = useCompatSearchParams();
   const { t, i18n } = useLocale();
@@ -507,9 +508,8 @@ export default function Signup({
                           premium={premiumUsername}
                           usernameTaken={usernameTaken}
                           disabled={!!orgSlug}
-                          setUsernameTaken={(value) => setUsernameTaken(value)}
+                          onUsernameCheck={setUsernameCheck}
                           data-testid="signup-usernamefield"
-                          setPremium={(value) => setPremiumUsername(value)}
                           addOnLeading={
                             orgSlug
                               ? truncateDomain(
diff --git a/apps/web/modules/team/team-view.tsx b/apps/web/modules/team/team-view.tsx
index cfabf09c59ad4f..e13a17d10a7785 100644
--- a/apps/web/modules/team/team-view.tsx
+++ b/apps/web/modules/team/team-view.tsx
@@ -28,6 +28,102 @@ import type { inferSSRProps } from "@lib/types/inferSSRProps";
 import Team from "@components/team/screens/Team";
 
 export type PageProps = inferSSRProps<typeof getServerSideProps>;
+
+const EventTypes = ({
+  eventTypes,
+  isEmbed,
+  queryParamsToForward,
+  team,
+  isValidOrgDomain,
+}: {
+  eventTypes: NonNullable<PageProps["team"]["eventTypes"]>;
+  isEmbed: boolean;
+  queryParamsToForward: Record<string, string | string[]>;
+  team: PageProps["team"];
+  isValidOrgDomain: boolean;
+}) => (
+  <ul className="border-subtle rounded-md border">
+    {eventTypes.map((type, index) => (
+      <li
+        key={index}
+        className={classNames(
+          "bg-default hover:bg-cal-muted border-subtle group relative border-b transition first:rounded-t-md last:rounded-b-md last:border-b-0",
+          !isEmbed && "bg-default"
+        )}>
+        <div className="px-6 py-4 ">
+          <Link
+            prefetch={false}
+            href={{
+              pathname: `${isValidOrgDomain ? "" : "/team"}/${team.slug}/${type.slug}`,
+              query: queryParamsToForward,
+            }}
+            onClick={async () => {
+              sdkActionManager?.fire("eventTypeSelected", {
+                eventType: type,
+              });
+            }}
+            data-testid="event-type-link"
+            className="flex justify-between">
+            <div className="shrink">
+              <div className="flex flex-wrap items-center space-x-2 rtl:space-x-reverse">
+                <h2 className=" text-default text-sm font-semibold">{type.title}</h2>
+              </div>
+              <EventTypeDescription className="text-sm" eventType={type} />
+            </div>
+            <div className="mt-1 self-center">
+              <UserAvatarGroup truncateAfter={4} className="flex shrink-0" size="sm" users={type.users} />
+            </div>
+          </Link>
+        </div>
+      </li>
+    ))}
+  </ul>
+);
+
+const SubTeams = ({ team }: { team: PageProps["team"] }) => {
+  const { t } = useLocale();
+  return team.children.length ? (
+    <ul className="divide-subtle border-subtle bg-default static! w-full divide-y rounded-md border">
+      {team.children.map((ch, i) => {
+        const memberCount = team.members.filter(
+          (mem) => mem.subteams?.includes(ch.slug) && mem.accepted
+        ).length;
+        return (
+          <li key={i} className="hover:bg-cal-muted w-full rounded-md transition">
+            <Link prefetch={false} href={`/${ch.slug}`} className="flex items-center justify-between">
+              <div className="flex items-center px-5 py-5">
+                <div className="ms-3 inline-block truncate">
+                  <span className="text-default text-sm font-bold">{ch.name}</span>
+                  <span className="text-subtle block text-xs">
+                    {t("number_member", {
+                      count: memberCount,
+                    })}
+                  </span>
+                </div>
+              </div>
+              <UserAvatarGroup
+                className="mr-6"
+                size="sm"
+                truncateAfter={4}
+                users={team.members.filter((mem) => mem.subteams?.includes(ch.slug) && mem.accepted)}
+              />
+            </Link>
+          </li>
+        );
+      })}
+    </ul>
+  ) : (
+    <div className="stack-y-6" data-testid="event-types">
+      <div className="overflow-hidden rounded-sm border dark:border-gray-900">
+        <div className="text-muted p-8 text-center">
+          <h2 className="font-cal text-emphasis mb-2 text-3xl">{` ${t("org_no_teams_yet")}`}</h2>
+          <p className="text-emphasis mx-auto max-w-md">{t("org_no_teams_yet_description")}</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
 function TeamPage({ team, considerUnpublished, isValidOrgDomain }: PageProps) {
   useTheme(team.theme);
   const routerQuery = useRouterQuery();
@@ -59,87 +155,6 @@ function TeamPage({ team, considerUnpublished, isValidOrgDomain }: PageProps) {
   // slug is a route parameter, we don't want to forward it to the next route
   const { slug: _slug, orgSlug: _orgSlug, user: _user, ...queryParamsToForward } = routerQuery;
 
-  const EventTypes = ({ eventTypes }: { eventTypes: NonNullable<(typeof team)["eventTypes"]> }) => (
-    <ul className="border-subtle rounded-md border">
-      {eventTypes.map((type, index) => (
-        <li
-          key={index}
-          className={classNames(
-            "bg-default hover:bg-cal-muted border-subtle group relative border-b transition first:rounded-t-md last:rounded-b-md last:border-b-0",
-            !isEmbed && "bg-default"
-          )}>
-          <div className="px-6 py-4 ">
-            <Link
-              prefetch={false}
-              href={{
-                pathname: `${isValidOrgDomain ? "" : "/team"}/${team.slug}/${type.slug}`,
-                query: queryParamsToForward,
-              }}
-              onClick={async () => {
-                sdkActionManager?.fire("eventTypeSelected", {
-                  eventType: type,
-                });
-              }}
-              data-testid="event-type-link"
-              className="flex justify-between">
-              <div className="shrink">
-                <div className="flex flex-wrap items-center space-x-2 rtl:space-x-reverse">
-                  <h2 className=" text-default text-sm font-semibold">{type.title}</h2>
-                </div>
-                <EventTypeDescription className="text-sm" eventType={type} />
-              </div>
-              <div className="mt-1 self-center">
-                <UserAvatarGroup truncateAfter={4} className="flex shrink-0" size="sm" users={type.users} />
-              </div>
-            </Link>
-          </div>
-        </li>
-      ))}
-    </ul>
-  );
-
-  const SubTeams = () =>
-    team.children.length ? (
-      <ul className="divide-subtle border-subtle bg-default static! w-full divide-y rounded-md border">
-        {team.children.map((ch, i) => {
-          const memberCount = team.members.filter(
-            (mem) => mem.subteams?.includes(ch.slug) && mem.accepted
-          ).length;
-          return (
-            <li key={i} className="hover:bg-cal-muted w-full rounded-md transition">
-              <Link prefetch={false} href={`/${ch.slug}`} className="flex items-center justify-between">
-                <div className="flex items-center px-5 py-5">
-                  <div className="ms-3 inline-block truncate">
-                    <span className="text-default text-sm font-bold">{ch.name}</span>
-                    <span className="text-subtle block text-xs">
-                      {t("number_member", {
-                        count: memberCount,
-                      })}
-                    </span>
-                  </div>
-                </div>
-                <UserAvatarGroup
-                  className="mr-6"
-                  size="sm"
-                  truncateAfter={4}
-                  users={team.members.filter((mem) => mem.subteams?.includes(ch.slug) && mem.accepted)}
-                />
-              </Link>
-            </li>
-          );
-        })}
-      </ul>
-    ) : (
-      <div className="stack-y-6" data-testid="event-types">
-        <div className="overflow-hidden rounded-sm border dark:border-gray-900">
-          <div className="text-muted p-8 text-center">
-            <h2 className="font-cal text-emphasis mb-2 text-3xl">{` ${t("org_no_teams_yet")}`}</h2>
-            <p className="text-emphasis mx-auto max-w-md">{t("org_no_teams_yet_description")}</p>
-          </div>
-        </div>
-      </div>
-    );
-
   const profileImageSrc = getOrgOrTeamAvatar(team);
 
   return (
@@ -165,7 +180,7 @@ function TeamPage({ team, considerUnpublished, isValidOrgDomain }: PageProps) {
         </div>
         {team.isOrganization ? (
           !teamOrOrgIsPrivate ? (
-            <SubTeams />
+            <SubTeams team={team} />
           ) : (
             <div className="w-full text-center">
               <h2 className="text-emphasis font-semibold">{t("you_cannot_see_teams_of_org")}</h2>
@@ -185,7 +200,13 @@ function TeamPage({ team, considerUnpublished, isValidOrgDomain }: PageProps) {
               ))}
             {!showMembers.isOn && team.eventTypes && team.eventTypes.length > 0 && (
               <div className="mx-auto max-w-3xl ">
-                <EventTypes eventTypes={team.eventTypes} />
+                <EventTypes
+                  eventTypes={team.eventTypes}
+                  isEmbed={isEmbed}
+                  queryParamsToForward={queryParamsToForward}
+                  team={team}
+                  isValidOrgDomain={isValidOrgDomain}
+                />
 
                 {/* Hide "Book a team member button when team is private or hideBookATeamMember is true" */}
                 {!team.hideBookATeamMember && !teamOrOrgIsPrivate && (
diff --git a/apps/web/modules/team/type-view.tsx b/apps/web/modules/team/type-view.tsx
index 2e2c312086df6c..7fcf1ca269464d 100644
--- a/apps/web/modules/team/type-view.tsx
+++ b/apps/web/modules/team/type-view.tsx
@@ -2,6 +2,7 @@
 
 import type { EmbedProps } from "app/WithEmbedSSR";
 import { useSearchParams } from "next/navigation";
+import { Suspense } from "react";
 
 import { BookerWebWrapper as Booker } from "@calcom/web/modules/bookings/components/BookerWebWrapper";
 import { getBookerWrapperClasses } from "@calcom/features/bookings/Booker/utils/getBookerWrapperClasses";
@@ -23,7 +24,7 @@ export const getMultipleDurationValue = (
   return defaultValue;
 };
 
-function Type({
+function TypeInner({
   slug,
   user,
   booking,
@@ -72,4 +73,12 @@ function Type({
   );
 }
 
+function Type(props: PageProps) {
+  return (
+    <Suspense>
+      <TypeInner {...props} />
+    </Suspense>
+  );
+}
+
 export default Type;
diff --git a/apps/web/modules/timezone-buddy/components/AvailabilitySliderTable.tsx b/apps/web/modules/timezone-buddy/components/AvailabilitySliderTable.tsx
index ed4a4b94aa2fa4..7bf9bd4ee0b806 100644
--- a/apps/web/modules/timezone-buddy/components/AvailabilitySliderTable.tsx
+++ b/apps/web/modules/timezone-buddy/components/AvailabilitySliderTable.tsx
@@ -81,7 +81,7 @@ export function AvailabilitySliderTable(props: { isOrg: boolean }) {
 
 function AvailabilitySliderTableContent(props: { isOrg: boolean }) {
   const tableContainerRef = useRef<HTMLDivElement>(null);
-  const [browsingDate, setBrowsingDate] = useState(dayjs());
+  const [browsingDate, setBrowsingDate] = useState(() => dayjs());
   const [editSheetOpen, setEditSheetOpen] = useState(false);
   const [selectedUser, setSelectedUser] = useState<SliderUser | null>(null);
   const { searchTerm } = useDataTable();
diff --git a/apps/web/modules/timezone-buddy/components/TimeDial.tsx b/apps/web/modules/timezone-buddy/components/TimeDial.tsx
index 0df2b66447f4c8..5954ea7097906b 100644
--- a/apps/web/modules/timezone-buddy/components/TimeDial.tsx
+++ b/apps/web/modules/timezone-buddy/components/TimeDial.tsx
@@ -169,15 +169,6 @@ export function TimeDial({ timezone, dateRanges }: TimeDialProps) {
                     }
                   }
 
-                  const TimeLabel = () => (
-                    <>
-                      {hourSet.format("H")}
-                      {minutes !== 0 && (
-                        <span className="align-text-top text-[.5rem]">{hourSet.format("mm")}</span>
-                      )}
-                    </>
-                  );
-
                   return (
                     <div
                       key={h}
@@ -200,7 +191,10 @@ export function TimeDial({ timezone, dateRanges }: TimeDialProps) {
                               <>
                                 {/* light mode */}
                                 <span className={classNames("font-bold dark:hidden")}>
-                                  <TimeLabel />
+                                  {hourSet.format("H")}
+                                  {minutes !== 0 && (
+                                    <span className="align-text-top text-[.5rem]">{hourSet.format("mm")}</span>
+                                  )}
                                 </span>
                                 {/* dark mode */}
                                 <span
@@ -211,12 +205,18 @@ export function TimeDial({ timezone, dateRanges }: TimeDialProps) {
                                     "hidden dark:block",
                                     rangeOverlap ? "bg-clip-text text-transparent" : ""
                                   )}>
-                                  <TimeLabel />
+                                  {hourSet.format("H")}
+                                  {minutes !== 0 && (
+                                    <span className="align-text-top text-[.5rem]">{hourSet.format("mm")}</span>
+                                  )}
                                 </span>
                               </>
                             ) : (
                               <span>
-                                <TimeLabel />
+                                {hourSet.format("H")}
+                                {minutes !== 0 && (
+                                  <span className="align-text-top text-[.5rem]">{hourSet.format("mm")}</span>
+                                )}
                               </span>
                             )}
                           </div>
diff --git a/apps/web/modules/troubleshooter/components/TroubleshooterHeader.tsx b/apps/web/modules/troubleshooter/components/TroubleshooterHeader.tsx
index 1326b698f82204..9791d278a371e3 100644
--- a/apps/web/modules/troubleshooter/components/TroubleshooterHeader.tsx
+++ b/apps/web/modules/troubleshooter/components/TroubleshooterHeader.tsx
@@ -1,5 +1,6 @@
 import { useMemo } from "react";
 
+import type { Dayjs } from "@calcom/dayjs";
 import dayjs from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui/components/button";
@@ -7,6 +8,31 @@ import { ButtonGroup } from "@calcom/ui/components/buttonGroup";
 
 import { useTroubleshooterStore } from "@calcom/features/troubleshooter/store";
 
+function FormattedSelectedDateRange({
+  formattedMonth,
+  selectedDate,
+  endDate,
+  isSameYear,
+  isSameMonth,
+}: {
+  formattedMonth: Intl.DateTimeFormat;
+  selectedDate: Dayjs;
+  endDate: Dayjs;
+  isSameYear: boolean;
+  isSameMonth: boolean;
+}) {
+  return (
+    <h3 className="min-w-[150px] text-base font-semibold leading-4">
+      {formattedMonth.format(selectedDate.toDate())} {selectedDate.format("D")}
+      {!isSameYear && <span className="text-subtle">, {selectedDate.format("YYYY")} </span>}-{" "}
+      {!isSameMonth && formattedMonth.format(endDate.toDate())} {endDate.format("D")},{" "}
+      <span className="text-subtle">
+        {isSameYear ? selectedDate.format("YYYY") : endDate.format("YYYY")}
+      </span>
+    </h3>
+  );
+}
+
 export function TroubleshooterHeader({ extraDays, isMobile }: { extraDays: number; isMobile: boolean }) {
   const { t, i18n } = useLocale();
   const selectedDateString = useTroubleshooterStore((state) => state.selectedDate);
@@ -31,23 +57,17 @@ export function TroubleshooterHeader({ extraDays, isMobile }: { extraDays: numbe
     return selectedDate.format("YYYY") === endDate.format("YYYY");
   };
   const formattedMonth = new Intl.DateTimeFormat(i18n.language, { month: "short" });
-  const FormattedSelectedDateRange = () => {
-    return (
-      <h3 className="min-w-[150px] text-base font-semibold leading-4">
-        {formattedMonth.format(selectedDate.toDate())} {selectedDate.format("D")}
-        {!isSameYear() && <span className="text-subtle">, {selectedDate.format("YYYY")} </span>}-{" "}
-        {!isSameMonth() && formattedMonth.format(endDate.toDate())} {endDate.format("D")},{" "}
-        <span className="text-subtle">
-          {isSameYear() ? selectedDate.format("YYYY") : endDate.format("YYYY")}
-        </span>
-      </h3>
-    );
-  };
 
   return (
     <div className="border-default relative z-10 flex border-b px-5 py-4 ltr:border-l rtl:border-r">
       <div className="flex items-center gap-5 rtl:grow">
-        <FormattedSelectedDateRange />
+        <FormattedSelectedDateRange
+          formattedMonth={formattedMonth}
+          selectedDate={selectedDate}
+          endDate={endDate}
+          isSameYear={isSameYear()}
+          isSameMonth={isSameMonth()}
+        />
         <ButtonGroup>
           <Button
             className="group rtl:ml-1 rtl:rotate-180"
diff --git a/apps/web/modules/users/components/UserTable/PlatformManagedUsersTable.tsx b/apps/web/modules/users/components/UserTable/PlatformManagedUsersTable.tsx
index 81c9e377bb5fa4..246a8111f616d1 100644
--- a/apps/web/modules/users/components/UserTable/PlatformManagedUsersTable.tsx
+++ b/apps/web/modules/users/components/UserTable/PlatformManagedUsersTable.tsx
@@ -279,7 +279,7 @@ function UserListTableContent({ oAuthClientId }: PlatformManagedUsersTableProps)
     }
   }
 
-  const numberOfSelectedRows = useMemo(() => table.getSelectedRowModel().rows.length, [table]);
+  const numberOfSelectedRows = table.getSelectedRowModel().rows.length;
 
   return (
     <>
diff --git a/apps/web/modules/users/components/VerifyEmailBanner.tsx b/apps/web/modules/users/components/VerifyEmailBanner.tsx
index e74180c098acb3..aa320084f314bc 100644
--- a/apps/web/modules/users/components/VerifyEmailBanner.tsx
+++ b/apps/web/modules/users/components/VerifyEmailBanner.tsx
@@ -23,14 +23,15 @@ function VerifyEmailBanner({ data }: VerifyEmailBannerProps) {
         text={t("verify_email_banner_body", { appName: APP_NAME })}
         variant="warning"
         actions={
-          <a
+          <button
+            type="button"
             className="underline hover:cursor-pointer"
             onClick={() => {
               mutation.mutate();
               showToast(t("email_sent"), "success");
             }}>
             {t("resend_email")}
-          </a>
+          </button>
         }
       />
     </>
diff --git a/apps/web/modules/users/views/users-type-public-view.tsx b/apps/web/modules/users/views/users-type-public-view.tsx
index ab9910bdbaaccb..6f313a3464c521 100644
--- a/apps/web/modules/users/views/users-type-public-view.tsx
+++ b/apps/web/modules/users/views/users-type-public-view.tsx
@@ -2,6 +2,7 @@
 
 import type { EmbedProps } from "app/WithEmbedSSR";
 import { useSearchParams } from "next/navigation";
+import { Suspense } from "react";
 
 import { BookerWebWrapper as Booker } from "@calcom/web/modules/bookings/components/BookerWebWrapper";
 import { getBookerWrapperClasses } from "@calcom/features/bookings/Booker/utils/getBookerWrapperClasses";
@@ -24,7 +25,7 @@ export const getMultipleDurationValue = (
   return defaultValue;
 };
 
-function Type({ slug, user, isEmbed, booking, isBrandingHidden, eventData, orgBannerUrl }: PageProps) {
+function TypeInner({ slug, user, isEmbed, booking, isBrandingHidden, eventData, orgBannerUrl }: PageProps) {
   const searchParams = useSearchParams();
 
   return (
@@ -53,4 +54,12 @@ function Type({ slug, user, isEmbed, booking, isBrandingHidden, eventData, orgBa
   );
 }
 
+function Type(props: PageProps) {
+  return (
+    <Suspense>
+      <TypeInner {...props} />
+    </Suspense>
+  );
+}
+
 export default Type;
diff --git a/apps/web/modules/videos/views/videos-single-view.tsx b/apps/web/modules/videos/views/videos-single-view.tsx
index 5197393359c25c..2aec1b26091572 100644
--- a/apps/web/modules/videos/views/videos-single-view.tsx
+++ b/apps/web/modules/videos/views/videos-single-view.tsx
@@ -477,7 +477,6 @@ export function LogInOverlay(props: LogInOverlayProps) {
               onChange={handleUserNameChange}
               onKeyDown={handleKeyDown}
               disabled={isLoading}
-              autoFocus
             />
 
             {requireEmailForGuests && (
diff --git a/apps/web/modules/webhooks/components/EventTypeWebhookListItem.tsx b/apps/web/modules/webhooks/components/EventTypeWebhookListItem.tsx
index 5eb0b4e43f2d77..b6656c4f3b2c8c 100644
--- a/apps/web/modules/webhooks/components/EventTypeWebhookListItem.tsx
+++ b/apps/web/modules/webhooks/components/EventTypeWebhookListItem.tsx
@@ -49,9 +49,11 @@ export default function EventTypeWebhookListItem(props: {
     async onSuccess() {
       if (webhook.eventTypeId) revalidateEventTypeEditPage(webhook.eventTypeId);
       showToast(t("webhook_removed_successfully"), "success");
-      await utils.viewer.webhook.getByViewer.invalidate();
-      await utils.viewer.webhook.list.invalidate();
-      await utils.viewer.eventTypes.get.invalidate();
+      await Promise.all([
+        utils.viewer.webhook.getByViewer.invalidate(),
+        utils.viewer.webhook.list.invalidate(),
+        utils.viewer.eventTypes.get.invalidate(),
+      ]);
       setDeleteDialogOpen(false);
     },
     onError() {
@@ -63,9 +65,11 @@ export default function EventTypeWebhookListItem(props: {
     async onSuccess(data) {
       if (webhook.eventTypeId) revalidateEventTypeEditPage(webhook.eventTypeId);
       showToast(t(data?.active ? "enabled" : "disabled"), "success");
-      await utils.viewer.webhook.getByViewer.invalidate();
-      await utils.viewer.webhook.list.invalidate();
-      await utils.viewer.eventTypes.get.invalidate();
+      await Promise.all([
+        utils.viewer.webhook.getByViewer.invalidate(),
+        utils.viewer.webhook.list.invalidate(),
+        utils.viewer.eventTypes.get.invalidate(),
+      ]);
     },
   });
 
diff --git a/apps/web/modules/webhooks/components/WebhookForm.tsx b/apps/web/modules/webhooks/components/WebhookForm.tsx
index f98f3f42d63eb5..bd16072ea7db7c 100644
--- a/apps/web/modules/webhooks/components/WebhookForm.tsx
+++ b/apps/web/modules/webhooks/components/WebhookForm.tsx
@@ -358,12 +358,6 @@ const WebhookForm = (props: {
     }
   }, [isCreating, needsTime, time, timeUnit, formMethods]);
 
-  useEffect(() => {
-    if (changeSecret) {
-      formMethods.unregister("secret", { keepDefaultValue: false });
-    }
-  }, [changeSecret, formMethods]);
-
   const formContent = (
     <Form
       form={formMethods}
@@ -480,6 +474,7 @@ const WebhookForm = (props: {
                         type="button"
                         onClick={() => {
                           setChangeSecret(true);
+                          formMethods.unregister("secret", { keepDefaultValue: false });
                         }}>
                         {t("change_secret")}
                       </Button>
@@ -575,6 +570,8 @@ const WebhookForm = (props: {
                           <div className="stack-y-2">
                             {variables.map(({ name, variable, description }) => (
                               <div
+                                role="button"
+                                tabIndex={0}
                                 key={name}
                                 className="hover:bg-cal-muted cursor-pointer rounded p-2 text-sm transition-colors"
                                 onClick={() => {
@@ -587,6 +584,20 @@ const WebhookForm = (props: {
                                   formMethods.setValue("payloadTemplate", updatedValue, {
                                     shouldDirty: true,
                                   });
+                                }}
+                                onKeyDown={(e) => {
+                                  if (e.key === "Enter" || e.key === " ") {
+                                    e.preventDefault();
+                                    const currentValue = formMethods.getValues("payloadTemplate") || "{}";
+                                    const updatedValue = insertVariableIntoTemplate(
+                                      currentValue,
+                                      name,
+                                      variable
+                                    );
+                                    formMethods.setValue("payloadTemplate", updatedValue, {
+                                      shouldDirty: true,
+                                    });
+                                  }
                                 }}>
                                 <div className="text-emphasis font-mono">{variable}</div>
                                 <div className="text-muted mt-1 text-xs">{description}</div>
diff --git a/apps/web/modules/webhooks/components/WebhookListItem.tsx b/apps/web/modules/webhooks/components/WebhookListItem.tsx
index 4a62b1d7c80632..520e30d632b3ec 100644
--- a/apps/web/modules/webhooks/components/WebhookListItem.tsx
+++ b/apps/web/modules/webhooks/components/WebhookListItem.tsx
@@ -49,9 +49,11 @@ export default function WebhookListItem(props: {
       if (webhook.eventTypeId) revalidateEventTypeEditPage(webhook.eventTypeId);
       revalidateWebhooksList();
       showToast(t("webhook_removed_successfully"), "success");
-      await utils.viewer.webhook.getByViewer.invalidate();
-      await utils.viewer.webhook.list.invalidate();
-      await utils.viewer.eventTypes.get.invalidate();
+      await Promise.all([
+        utils.viewer.webhook.getByViewer.invalidate(),
+        utils.viewer.webhook.list.invalidate(),
+        utils.viewer.eventTypes.get.invalidate(),
+      ]);
       setDeleteDialogOpen(false);
     },
     onError() {
@@ -64,9 +66,11 @@ export default function WebhookListItem(props: {
       if (webhook.eventTypeId) revalidateEventTypeEditPage(webhook.eventTypeId);
       revalidateWebhooksList();
       showToast(t(data?.active ? "enabled" : "disabled"), "success");
-      await utils.viewer.webhook.getByViewer.invalidate();
-      await utils.viewer.webhook.list.invalidate();
-      await utils.viewer.eventTypes.get.invalidate();
+      await Promise.all([
+        utils.viewer.webhook.getByViewer.invalidate(),
+        utils.viewer.webhook.list.invalidate(),
+        utils.viewer.eventTypes.get.invalidate(),
+      ]);
     },
   });
 
diff --git a/apps/web/pages/_document.tsx b/apps/web/pages/_document.tsx
index 9d1a8e3e2ddb10..8a8d9db33b414b 100644
--- a/apps/web/pages/_document.tsx
+++ b/apps/web/pages/_document.tsx
@@ -3,6 +3,7 @@ import type { IncomingMessage } from "node:http";
 import { dir } from "i18next";
 import type { DocumentContext, DocumentProps } from "next/document";
 import Document, { Head, Html, Main, NextScript } from "next/document";
+import Script from "next/script";
 
 import { IS_PRODUCTION } from "@calcom/lib/constants";
 
@@ -52,19 +53,6 @@ class MyDocument extends Document<Props> {
         dir={newDir}
         style={embedColorScheme ? { colorScheme: embedColorScheme as string } : undefined}>
         <Head>
-          <script
-            id="newLocale"
-            // eslint-disable-next-line react/no-danger
-            // biome-ignore lint/security/noDangerouslySetInnerHtml: Setting locale and theme requires inline script
-            dangerouslySetInnerHTML={{
-              __html: `
-              window.calNewLocale = "${newLocale}";
-              window.calIsDesktopApp = ${isDesktopApp};
-              (${applyTheme.toString()})();
-              (${applyToDesktopClass.toString()})();
-            `,
-            }}
-          />
           <link rel="apple-touch-icon" sizes="180x180" href="/api/logo?type=apple-touch-icon" />
           <link rel="icon" type="image/png" sizes="32x32" href="/api/logo?type=favicon-32" />
           <link rel="icon" type="image/png" sizes="16x16" href="/api/logo?type=favicon-16" />
@@ -73,13 +61,6 @@ class MyDocument extends Document<Props> {
           <meta name="msapplication-TileColor" content="#ff0000" />
           <meta name="theme-color" media="(prefers-color-scheme: light)" content="#F9FAFC" />
           <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1F1F1F" />
-          {!IS_PRODUCTION && process.env.VERCEL_ENV === "preview" && (
-            // eslint-disable-next-line @next/next/no-sync-scripts
-            <script
-              data-project-id="KjpMrKTnXquJVKfeqmjdTffVPf1a6Unw2LZ58iE4"
-              src="https://snippet.meticulous.ai/v1/stagingMeticulousSnippet.js"
-            />
-          )}
         </Head>
 
         <body
@@ -96,6 +77,28 @@ class MyDocument extends Document<Props> {
                 }
               : {}
           }>
+          <Script
+            id="newLocale"
+            strategy="beforeInteractive"
+            // eslint-disable-next-line react/no-danger
+            // biome-ignore lint/security/noDangerouslySetInnerHtml: Setting locale and theme requires inline script
+            dangerouslySetInnerHTML={{
+              __html: `
+              window.calNewLocale = "${newLocale}";
+              window.calIsDesktopApp = ${isDesktopApp};
+              (${applyTheme.toString()})();
+              (${applyToDesktopClass.toString()})();
+            `,
+            }}
+          />
+          {!IS_PRODUCTION && process.env.VERCEL_ENV === "preview" && (
+            <Script
+              id="meticulous"
+              strategy="beforeInteractive"
+              data-project-id="KjpMrKTnXquJVKfeqmjdTffVPf1a6Unw2LZ58iE4"
+              src="https://snippet.meticulous.ai/v1/stagingMeticulousSnippet.js"
+            />
+          )}
           <Main />
           <NextScript />
         </body>