diff --git a/apps/web/components/eventtype/EventLimitsTab.tsx b/apps/web/components/eventtype/EventLimitsTab.tsx
index f3daf7db898712..7d15f394bb6fb9 100644
--- a/apps/web/components/eventtype/EventLimitsTab.tsx
+++ b/apps/web/components/eventtype/EventLimitsTab.tsx
@@ -19,10 +19,14 @@ import type { PeriodType } from "@calcom/prisma/enums";
 import type { IntervalLimit } from "@calcom/types/Calendar";
 import { Button, DateRangePicker, InputField, Label, Select, SettingsToggle, TextField } from "@calcom/ui";
 
-const MinimumBookingNoticeInput = React.forwardRef<
-  HTMLInputElement,
-  Omit<UseFormRegisterReturn<"minimumBookingNotice">, "ref">
->(function MinimumBookingNoticeInput({ ...passThroughProps }, ref) {
+const MinimumBookingNoticeInput = function MinimumBookingNoticeInput(
+  {
+    ref,
+    ...passThroughProps
+  }: Omit<UseFormRegisterReturn<"minimumBookingNotice">, "ref"> & {
+    ref: React.RefObject<HTMLInputElement>;
+  }
+) {
   const { t } = useLocale();
   const { setValue, getValues } = useFormContext<FormValues>();
   const durationTypeOptions: {
@@ -107,7 +111,7 @@ const MinimumBookingNoticeInput = React.forwardRef<
       />
     </div>
   );
-});
+};
 
 export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventType">) => {
   const { t, i18n } = useLocale();
diff --git a/apps/web/components/ui/form/CheckboxField.tsx b/apps/web/components/ui/form/CheckboxField.tsx
index 3b264d7bbc4b4d..edcb2cc85a3a95 100644
--- a/apps/web/components/ui/form/CheckboxField.tsx
+++ b/apps/web/components/ui/form/CheckboxField.tsx
@@ -1,5 +1,5 @@
 import type { InputHTMLAttributes } from "react";
-import React, { forwardRef } from "react";
+import React from "react";
 
 import classNames from "@calcom/lib/classNames";
 import { InfoBadge } from "@calcom/ui";
@@ -11,56 +11,64 @@ type Props = InputHTMLAttributes<HTMLInputElement> & {
   informationIconText?: string;
 };
 
-const CheckboxField = forwardRef<HTMLInputElement, Props>(
-  ({ label, description, informationIconText, ...rest }, ref) => {
-    const descriptionAsLabel = !label || rest.descriptionAsLabel;
-    return (
-      <div className="block items-center sm:flex">
-        {label && (
-          <div className="min-w-48 mb-4 sm:mb-0">
-            {React.createElement(
-              descriptionAsLabel ? "div" : "label",
-              {
-                className: "flex text-sm font-medium text-default",
-                ...(!descriptionAsLabel
-                  ? {
-                      htmlFor: rest.id,
-                    }
-                  : {}),
-              },
-              label
-            )}
-          </div>
-        )}
-        <div className="w-full">
-          <div className="relative flex items-start">
-            {React.createElement(
-              descriptionAsLabel ? "label" : "div",
-              {
-                className: classNames(
-                  "relative flex items-start",
-                  descriptionAsLabel ? "text-default" : "text-emphasis"
-                ),
-              },
-              <>
-                <div className="flex h-5 items-center">
-                  <input
-                    {...rest}
-                    ref={ref}
-                    type="checkbox"
-                    className="text-emphasis focus:ring-emphasis dark:text-muted border-default bg-default h-4 w-4 rounded"
-                  />
-                </div>
-                <span className="ms-2 text-sm">{description}</span>
-              </>
-            )}
-            {informationIconText && <InfoBadge content={informationIconText} />}
-          </div>
+const CheckboxField = (
+  {
+    ref,
+    label,
+    description,
+    informationIconText,
+    ...rest
+  }: Props & {
+    ref: React.RefObject<HTMLInputElement>;
+  }
+) => {
+  const descriptionAsLabel = !label || rest.descriptionAsLabel;
+  return (
+    <div className="block items-center sm:flex">
+      {label && (
+        <div className="min-w-48 mb-4 sm:mb-0">
+          {React.createElement(
+            descriptionAsLabel ? "div" : "label",
+            {
+              className: "flex text-sm font-medium text-default",
+              ...(!descriptionAsLabel
+                ? {
+                    htmlFor: rest.id,
+                  }
+                : {}),
+            },
+            label
+          )}
+        </div>
+      )}
+      <div className="w-full">
+        <div className="relative flex items-start">
+          {React.createElement(
+            descriptionAsLabel ? "label" : "div",
+            {
+              className: classNames(
+                "relative flex items-start",
+                descriptionAsLabel ? "text-default" : "text-emphasis"
+              ),
+            },
+            <>
+              <div className="flex h-5 items-center">
+                <input
+                  {...rest}
+                  ref={ref}
+                  type="checkbox"
+                  className="text-emphasis focus:ring-emphasis dark:text-muted border-default bg-default h-4 w-4 rounded"
+                />
+              </div>
+              <span className="ms-2 text-sm">{description}</span>
+            </>
+          )}
+          {informationIconText && <InfoBadge content={informationIconText} />}
         </div>
       </div>
-    );
-  }
-);
+    </div>
+  );
+};
 
 CheckboxField.displayName = "CheckboxField";
 
diff --git a/apps/web/components/ui/form/MinutesField.tsx b/apps/web/components/ui/form/MinutesField.tsx
index 42d147ef6a1173..0aff3861762cb0 100644
--- a/apps/web/components/ui/form/MinutesField.tsx
+++ b/apps/web/components/ui/form/MinutesField.tsx
@@ -1,12 +1,20 @@
 import classNames from "classnames";
 import type { InputHTMLAttributes, ReactNode } from "react";
-import React, { forwardRef } from "react";
+import React from "react";
 
 type Props = InputHTMLAttributes<HTMLInputElement> & {
   label?: ReactNode;
 };
 
-const MinutesField = forwardRef<HTMLInputElement, Props>(({ label, ...rest }, ref) => {
+const MinutesField = (
+  {
+    ref,
+    label,
+    ...rest
+  }: Props & {
+    ref: React.RefObject<HTMLInputElement>;
+  }
+) => {
   return (
     <div className="block sm:flex">
       {!!label && (
@@ -36,7 +44,7 @@ const MinutesField = forwardRef<HTMLInputElement, Props>(({ label, ...rest }, re
       </div>
     </div>
   );
-});
+};
 
 MinutesField.displayName = "MinutesField";
 
diff --git a/packages/app-store/routing-forms/components/FormActions.tsx b/packages/app-store/routing-forms/components/FormActions.tsx
index fbe6f8ed465b23..0e1ed77f62f781 100644
--- a/packages/app-store/routing-forms/components/FormActions.tsx
+++ b/packages/app-store/routing-forms/components/FormActions.tsx
@@ -1,6 +1,6 @@
 import type { App_RoutingForms_Form } from "@prisma/client";
 import { usePathname, useRouter } from "next/navigation";
-import { createContext, forwardRef, useContext, useState } from "react";
+import { createContext, useContext, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { v4 as uuidv4 } from "uuid";
 import { z } from "zod";
@@ -386,9 +386,13 @@ type FormActionProps<T> = {
   extraClassNames?: string;
 } & ButtonProps;
 
-export const FormAction = forwardRef(function FormAction<T extends typeof Button>(
-  props: FormActionProps<T>,
-  forwardedRef: React.ForwardedRef<HTMLAnchorElement | HTMLButtonElement>
+export const FormAction = function FormAction<T extends typeof Button>(
+  {
+    ref: forwardedRef,
+    ...props
+  }: FormActionProps<T> & {
+    ref: React.RefObject<unknown>;
+  }
 ) {
   const {
     action: actionName,
@@ -517,4 +521,4 @@ export const FormAction = forwardRef(function FormAction<T extends typeof Button
       </Component>
     </DropdownMenuItem>
   );
-});
+};
diff --git a/packages/features/bookings/Booker/components/Section.tsx b/packages/features/bookings/Booker/components/Section.tsx
index abfcbc76ea9efc..e8ae93bca9eee1 100644
--- a/packages/features/bookings/Booker/components/Section.tsx
+++ b/packages/features/bookings/Booker/components/Section.tsx
@@ -1,6 +1,5 @@
 import type { MotionProps } from "framer-motion";
 import { m } from "framer-motion";
-import { forwardRef } from "react";
 
 import { classNames } from "@calcom/lib";
 
@@ -40,9 +39,17 @@ const gridAreaClassNameMap: { [key in BookerAreas]: string } = {
 /**
  * Small helper compnent that renders a booker section in a specific grid area.
  */
-export const BookerSection = forwardRef<HTMLDivElement, BookerSectionProps>(function BookerSection(
-  { children, area, visible, className, ...props },
-  ref
+export const BookerSection = function BookerSection(
+  {
+    ref,
+    children,
+    area,
+    visible,
+    className,
+    ...props
+  }: BookerSectionProps & {
+    ref: React.RefObject<HTMLDivElement>;
+  }
 ) {
   const layout = useBookerStore((state) => state.layout);
   let gridClassName: string;
@@ -60,4 +67,4 @@ export const BookerSection = forwardRef<HTMLDivElement, BookerSectionProps>(func
       {children}
     </m.div>
   );
-});
+};
diff --git a/packages/features/calendars/weeklyview/components/grid/index.tsx b/packages/features/calendars/weeklyview/components/grid/index.tsx
index 682e84f26d2707..2f6ba8ed857aa5 100644
--- a/packages/features/calendars/weeklyview/components/grid/index.tsx
+++ b/packages/features/calendars/weeklyview/components/grid/index.tsx
@@ -7,9 +7,16 @@ type Props = {
   zIndex?: number;
 };
 
-export const SchedulerColumns = React.forwardRef<HTMLOListElement, Props>(function SchedulerColumns(
-  { offsetHeight, gridStopsPerDay, children, zIndex },
-  ref
+export const SchedulerColumns = function SchedulerColumns(
+  {
+    ref,
+    offsetHeight,
+    gridStopsPerDay,
+    children,
+    zIndex
+  }: Props & {
+    ref: React.RefObject<HTMLOListElement>;
+  }
 ) {
   return (
     <ol
@@ -20,4 +27,4 @@ export const SchedulerColumns = React.forwardRef<HTMLOListElement, Props>(functi
       {children}
     </ol>
   );
-});
+};
diff --git a/packages/features/embed/lib/EmbedTabs.tsx b/packages/features/embed/lib/EmbedTabs.tsx
index 654ee273bbf384..11b36f38b1aa54 100644
--- a/packages/features/embed/lib/EmbedTabs.tsx
+++ b/packages/features/embed/lib/EmbedTabs.tsx
@@ -1,5 +1,4 @@
 import type { MutableRefObject } from "react";
-import { forwardRef } from "react";
 
 import type { BookerLayout } from "@calcom/features/bookings/Booker/types";
 import { APP_NAME } from "@calcom/lib/constants";
@@ -20,10 +19,15 @@ export const tabs = [
     href: "embedTabName=embed-code",
     icon: "code" as const,
     type: "code",
-    Component: forwardRef<
-      HTMLTextAreaElement | HTMLIFrameElement | null,
-      { embedType: EmbedType; calLink: string; previewState: PreviewState; namespace: string }
-    >(function EmbedHtml({ embedType, calLink, previewState, namespace }, ref) {
+    Component: function EmbedHtml(
+      {
+        ref,
+        embedType,
+        calLink,
+        previewState,
+        namespace
+      }
+    ) {
       const { t } = useLocale();
       const embedSnippetString = useGetEmbedSnippetString(namespace);
       const embedCalOrigin = useEmbedCalOrigin();
@@ -69,17 +73,22 @@ export const tabs = [
           <p className="text-subtle hidden text-sm">{t("need_help_embedding")}</p>
         </>
       );
-    }),
+    },
   },
   {
     name: "React",
     href: "embedTabName=embed-react",
     icon: "code" as const,
     type: "code",
-    Component: forwardRef<
-      HTMLTextAreaElement | HTMLIFrameElement | null,
-      { embedType: EmbedType; calLink: string; previewState: PreviewState; namespace: string }
-    >(function EmbedReact({ embedType, calLink, previewState, namespace }, ref) {
+    Component: function EmbedReact(
+      {
+        ref,
+        embedType,
+        calLink,
+        previewState,
+        namespace
+      }
+    ) {
       const { t } = useLocale();
       const embedCalOrigin = useEmbedCalOrigin();
 
@@ -118,17 +127,20 @@ export const tabs = [
           />
         </>
       );
-    }),
+    },
   },
   {
     name: "Preview",
     href: "embedTabName=embed-preview",
     icon: "trello" as const,
     type: "iframe",
-    Component: forwardRef<
-      HTMLIFrameElement | HTMLTextAreaElement | null,
-      { calLink: string; embedType: EmbedType; previewState: PreviewState; namespace: string }
-    >(function Preview({ calLink, embedType }, ref) {
+    Component: function Preview(
+      {
+        ref,
+        calLink,
+        embedType
+      }
+    ) {
       const bookerUrl = useBookerUrl();
       const iframeSrc = `${EMBED_PREVIEW_HTML_URL}?embedType=${embedType}&calLink=${calLink}&embedLibUrl=${embedLibUrl}&bookerUrl=${bookerUrl}`;
       if (ref instanceof Function || !ref) {
@@ -148,7 +160,7 @@ export const tabs = [
           key={iframeSrc}
         />
       );
-    }),
+    },
   },
 ];
 
diff --git a/packages/features/filters/components/TeamsFilter.tsx b/packages/features/filters/components/TeamsFilter.tsx
index 74700545ccc687..9f3e95b5d5eedd 100644
--- a/packages/features/filters/components/TeamsFilter.tsx
+++ b/packages/features/filters/components/TeamsFilter.tsx
@@ -1,6 +1,5 @@
 import { useSession } from "next-auth/react";
 import type { InputHTMLAttributes, ReactNode } from "react";
-import { forwardRef } from "react";
 
 import { classNames } from "@calcom/lib";
 import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
@@ -147,7 +146,16 @@ type Props = InputHTMLAttributes<HTMLInputElement> & {
   icon?: ReactNode;
 };
 
-export const FilterCheckboxField = forwardRef<HTMLInputElement, Props>(({ label, icon, ...rest }, ref) => {
+export const FilterCheckboxField = (
+  {
+    ref,
+    label,
+    icon,
+    ...rest
+  }: Props & {
+    ref: React.RefObject<HTMLInputElement>;
+  }
+) => {
   return (
     <div className="hover:bg-muted flex items-center py-2 pl-3 pr-2.5 hover:cursor-pointer">
       <label className="flex w-full max-w-full items-center justify-between hover:cursor-pointer">
@@ -176,6 +184,6 @@ export const FilterCheckboxField = forwardRef<HTMLInputElement, Props>(({ label,
       </label>
     </div>
   );
-});
+};
 
 FilterCheckboxField.displayName = "FilterCheckboxField";
diff --git a/packages/platform/atoms/src/components/ui/button.tsx b/packages/platform/atoms/src/components/ui/button.tsx
index f44261ad80c240..f35e1c02c10951 100644
--- a/packages/platform/atoms/src/components/ui/button.tsx
+++ b/packages/platform/atoms/src/components/ui/button.tsx
@@ -36,12 +36,21 @@ export interface ButtonProps
   asChild?: boolean;
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+const Button = (
+  {
+    ref,
+    className,
+    variant,
+    size,
+    asChild = false,
+    ...props
+  }: ButtonProps & {
+    ref: React.RefObject<HTMLButtonElement>;
   }
-);
+) => {
+  const Comp = asChild ? Slot : "button";
+  return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+};
 Button.displayName = "Button";
 
 export { Button, buttonVariants };
diff --git a/packages/platform/atoms/src/components/ui/dialog.tsx b/packages/platform/atoms/src/components/ui/dialog.tsx
index e35cad9be85962..4bfbb2770d36f4 100644
--- a/packages/platform/atoms/src/components/ui/dialog.tsx
+++ b/packages/platform/atoms/src/components/ui/dialog.tsx
@@ -13,42 +13,49 @@ const DialogPortal = DialogPrimitive.Portal;
 
 const DialogClose = DialogPrimitive.Close;
 
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
+const DialogOverlay = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> & {
+    ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Overlay>>;
+  }
+) => (<DialogPrimitive.Overlay
+  ref={ref}
+  className={cn(
+    "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80",
+    className
+  )}
+  {...props}
+/>);
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = (
+  {
+    ref,
+    className,
+    children,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Content>>;
+  }
+) => (<>
+  <DialogOverlay />
+  <DialogPrimitive.Content
     ref={ref}
     className={cn(
-      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80",
+      "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
       className
     )}
-    {...props}
-  />
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
-        className
-      )}
-      {...props}>
-      {children}
-      <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
-        <Icon name="x" className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </>
-));
+    {...props}>
+    {children}
+    <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
+      <Icon name="x" className="h-4 w-4" />
+      <span className="sr-only">Close</span>
+    </DialogPrimitive.Close>
+  </DialogPrimitive.Content>
+</>);
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
@@ -64,28 +71,34 @@ const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivEleme
 );
 DialogFooter.displayName = "DialogFooter";
 
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
-    {...props}
-  />
-));
+const DialogTitle = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> & {
+    ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Title>>;
+  }
+) => (<DialogPrimitive.Title
+  ref={ref}
+  className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+  {...props}
+/>);
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn("text-muted-foreground text-sm", className)}
-    {...props}
-  />
-));
+const DialogDescription = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> & {
+    ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Description>>;
+  }
+) => (<DialogPrimitive.Description
+  ref={ref}
+  className={cn("text-muted-foreground text-sm", className)}
+  {...props}
+/>);
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
diff --git a/packages/platform/atoms/src/components/ui/toast.tsx b/packages/platform/atoms/src/components/ui/toast.tsx
index 1d0f0f8f170bb2..3836c173c939ac 100644
--- a/packages/platform/atoms/src/components/ui/toast.tsx
+++ b/packages/platform/atoms/src/components/ui/toast.tsx
@@ -8,19 +8,22 @@ import { cn } from "../../lib/utils";
 
 const ToastProvider = ToastPrimitives.Provider;
 
-const ToastViewport = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Viewport>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Viewport
-    ref={ref}
-    className={cn(
-      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
-      className
-    )}
-    {...props}
-  />
-));
+const ToastViewport = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport> & {
+    ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Viewport>>;
+  }
+) => (<ToastPrimitives.Viewport
+  ref={ref}
+  className={cn(
+    "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+    className
+  )}
+  {...props}
+/>);
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 
 const toastVariants = cva(
@@ -38,60 +41,76 @@ const toastVariants = cva(
   }
 );
 
-const Toast = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
->(({ className, variant, ...props }, ref) => {
+const Toast = (
+  {
+    ref,
+    className,
+    variant,
+    ...props
+  }
+) => {
   return <ToastPrimitives.Root ref={ref} className={cn(toastVariants({ variant }), className)} {...props} />;
-});
+};
 Toast.displayName = ToastPrimitives.Root.displayName;
 
-const ToastAction = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Action>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Action
-    ref={ref}
-    className={cn(
-      "ring-offset-background hover:bg-secondary focus:ring-ring group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-      className
-    )}
-    {...props}
-  />
-));
+const ToastAction = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action> & {
+    ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Action>>;
+  }
+) => (<ToastPrimitives.Action
+  ref={ref}
+  className={cn(
+    "ring-offset-background hover:bg-secondary focus:ring-ring group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+    className
+  )}
+  {...props}
+/>);
 ToastAction.displayName = ToastPrimitives.Action.displayName;
 
-const ToastClose = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Close>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Close
-    ref={ref}
-    className={cn(
-      "text-foreground/50 hover:text-foreground absolute right-2 top-2 rounded-md p-1 opacity-0 transition-opacity focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
-      className
-    )}
-    toast-close=""
-    {...props}>
-    <Icon name="x" className="h-4 w-4" />
-  </ToastPrimitives.Close>
-));
+const ToastClose = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close> & {
+    ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Close>>;
+  }
+) => (<ToastPrimitives.Close
+  ref={ref}
+  className={cn(
+    "text-foreground/50 hover:text-foreground absolute right-2 top-2 rounded-md p-1 opacity-0 transition-opacity focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+    className
+  )}
+  toast-close=""
+  {...props}>
+  <Icon name="x" className="h-4 w-4" />
+</ToastPrimitives.Close>);
 ToastClose.displayName = ToastPrimitives.Close.displayName;
 
-const ToastTitle = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Title>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Title ref={ref} className={cn("text-sm font-semibold", className)} {...props} />
-));
+const ToastTitle = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title> & {
+    ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Title>>;
+  }
+) => (<ToastPrimitives.Title ref={ref} className={cn("text-sm font-semibold", className)} {...props} />);
 ToastTitle.displayName = ToastPrimitives.Title.displayName;
 
-const ToastDescription = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Description>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Description ref={ref} className={cn("text-sm opacity-90", className)} {...props} />
-));
+const ToastDescription = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description> & {
+    ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Description>>;
+  }
+) => (<ToastPrimitives.Description ref={ref} className={cn("text-sm opacity-90", className)} {...props} />);
 ToastDescription.displayName = ToastPrimitives.Description.displayName;
 
 type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
diff --git a/packages/ui/components/alert/Alert.tsx b/packages/ui/components/alert/Alert.tsx
index 98ae1dc2f0af22..7739ea6566a607 100644
--- a/packages/ui/components/alert/Alert.tsx
+++ b/packages/ui/components/alert/Alert.tsx
@@ -1,6 +1,5 @@
 import classNames from "classnames";
 import type { ReactNode } from "react";
-import { forwardRef } from "react";
 
 import { Icon, type IconName } from "../..";
 
@@ -17,7 +16,14 @@ export interface AlertProps {
   CustomIcon?: IconName;
   customIconColor?: string;
 }
-export const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
+export const Alert = (
+  {
+    ref,
+    ...props
+  }: AlertProps & {
+    ref: React.RefObject<HTMLDivElement>;
+  }
+) => {
   const { severity, iconClassName, CustomIcon, customIconColor } = props;
 
   return (
@@ -98,6 +104,6 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
       </div>
     </div>
   );
-});
+};
 
 Alert.displayName = "Alert";
diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx
index 1a0495438bf0c8..211d570d9bea02 100644
--- a/packages/ui/components/button/Button.tsx
+++ b/packages/ui/components/button/Button.tsx
@@ -2,7 +2,7 @@ import type { VariantProps } from "class-variance-authority";
 import { cva } from "class-variance-authority";
 import type { LinkProps } from "next/link";
 import Link from "next/link";
-import React, { forwardRef } from "react";
+import React from "react";
 
 import classNames from "@calcom/lib/classNames";
 
@@ -115,9 +115,13 @@ export const buttonClasses = cva(
   }
 );
 
-export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonProps>(function Button(
-  props: ButtonProps,
-  forwardedRef
+export const Button = function Button(
+  {
+    ref: forwardedRef,
+    ...props
+  }: ButtonProps & {
+    ref: React.RefObject<unknown>;
+  }
 ) {
   const {
     loading = false,
@@ -232,7 +236,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
       {element}
     </Wrapper>
   );
-});
+};
 
 const Wrapper = ({
   children,
diff --git a/packages/ui/components/command/index.tsx b/packages/ui/components/command/index.tsx
index c6a7b961c20696..37a70305a62c28 100644
--- a/packages/ui/components/command/index.tsx
+++ b/packages/ui/components/command/index.tsx
@@ -6,19 +6,22 @@ import { classNames } from "@calcom/lib";
 
 import { Dialog, DialogContent } from "../dialog";
 
-const Command = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive
-    ref={ref}
-    className={classNames(
-      "bg-popover text-default flex h-full w-full flex-col overflow-hidden rounded-md",
-      className
-    )}
-    {...props}
-  />
-));
+const Command = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof CommandPrimitive> & {
+    ref: React.RefObject<React.ElementRef<typeof CommandPrimitive>>;
+  }
+) => (<CommandPrimitive
+  ref={ref}
+  className={classNames(
+    "bg-popover text-default flex h-full w-full flex-col overflow-hidden rounded-md",
+    className
+  )}
+  {...props}
+/>);
 Command.displayName = CommandPrimitive.displayName;
 
 type CommandDialogProps = DialogProps;
@@ -35,85 +38,104 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   );
 };
 
-const CommandInput = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-3 py-2" cmdk-input-wrapper="">
-    <CommandPrimitive.Input
-      ref={ref}
-      className={classNames(
-        "placeholder:text-muted hover:border-emphasis dark:focus:border-emphasis border-default bg-default placeholder:text-muted text-emphasis disabled:hover:border-default disabled:bg-subtle focus:ring-brand-default focus:border-subtle block flex h-[28px] w-full rounded-md rounded-md border bg-transparent px-3 py-1.5 text-sm text-sm leading-4 outline-none focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  </div>
-));
-
-CommandInput.displayName = CommandPrimitive.Input.displayName;
-
-const CommandList = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.List
+const CommandInput = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & {
+    ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Input>>;
+  }
+) => (<div className="flex items-center border-b px-3 py-2" cmdk-input-wrapper="">
+  <CommandPrimitive.Input
     ref={ref}
-    className={classNames("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    className={classNames(
+      "placeholder:text-muted hover:border-emphasis dark:focus:border-emphasis border-default bg-default placeholder:text-muted text-emphasis disabled:hover:border-default disabled:bg-subtle focus:ring-brand-default focus:border-subtle block flex h-[28px] w-full rounded-md rounded-md border bg-transparent px-3 py-1.5 text-sm text-sm leading-4 outline-none focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    )}
     {...props}
   />
-));
+</div>);
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.List> & {
+    ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.List>>;
+  }
+) => (<CommandPrimitive.List
+  ref={ref}
+  className={classNames("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+  {...props}
+/>);
 
 CommandList.displayName = CommandPrimitive.List.displayName;
 
-const CommandEmpty = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Empty>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />);
+const CommandEmpty = (
+  {
+    ref,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty> & {
+    ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Empty>>;
+  }
+) => <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />;
 
 CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
 
-const CommandGroup = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Group>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Group
-    ref={ref}
-    className={classNames(
-      "text-default [&_[cmdk-group-heading]]:text-muted overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
-      className
-    )}
-    {...props}
-  />
-));
+const CommandGroup = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group> & {
+    ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Group>>;
+  }
+) => (<CommandPrimitive.Group
+  ref={ref}
+  className={classNames(
+    "text-default [&_[cmdk-group-heading]]:text-muted overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+    className
+  )}
+  {...props}
+/>);
 
 CommandGroup.displayName = CommandPrimitive.Group.displayName;
 
-const CommandSeparator = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Separator
-    ref={ref}
-    className={classNames("bg-subtle -mx-1 mb-2 h-px", className)}
-    {...props}
-  />
-));
+const CommandSeparator = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator> & {
+    ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Separator>>;
+  }
+) => (<CommandPrimitive.Separator
+  ref={ref}
+  className={classNames("bg-subtle -mx-1 mb-2 h-px", className)}
+  {...props}
+/>);
 CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
 
-const CommandItem = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Item
-    ref={ref}
-    className={classNames(
-      "aria-selected:bg-muted aria-selected:text-emphasis relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    {...props}
-  />
-));
+const CommandItem = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item> & {
+    ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Item>>;
+  }
+) => (<CommandPrimitive.Item
+  ref={ref}
+  className={classNames(
+    "aria-selected:bg-muted aria-selected:text-emphasis relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+    className
+  )}
+  {...props}
+/>);
 
 CommandItem.displayName = CommandPrimitive.Item.displayName;
 
diff --git a/packages/ui/components/dialog/Dialog.tsx b/packages/ui/components/dialog/Dialog.tsx
index 9df8d7105504a0..76bd3c51e960be 100644
--- a/packages/ui/components/dialog/Dialog.tsx
+++ b/packages/ui/components/dialog/Dialog.tsx
@@ -90,66 +90,76 @@ type DialogContentProps = React.ComponentProps<(typeof DialogPrimitive)["Content
 };
 
 // enableOverflow:- use this prop whenever content inside DialogContent could overflow and require scrollbar
-export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(
-  ({ children, title, Icon: icon, enableOverflow, type = "creation", ...props }, forwardedRef) => {
-    const isPlatform = useIsPlatform();
-    const [Portal, Overlay, Content] = useMemo(
-      () =>
-        isPlatform
-          ? [
-              ({ children }: { children: ReactElement | ReactElement[] }) => <>{children}</>,
-              PlatformDialogPrimitives.DialogOverlay,
-              PlatformDialogPrimitives.DialogContent,
-            ]
-          : [DialogPrimitive.Portal, DialogPrimitive.Overlay, DialogPrimitive.Content],
-      [isPlatform]
-    );
-    return (
-      <Portal>
-        <Overlay className="fadeIn fixed inset-0 z-50 bg-neutral-800 bg-opacity-70 transition-opacity dark:bg-opacity-70 " />
-        <Content
-          {...props}
-          className={classNames(
-            "fadeIn bg-default scroll-bar fixed left-1/2 top-1/2 z-50 w-full max-w-[22rem] -translate-x-1/2 -translate-y-1/2 rounded-md text-left shadow-xl focus-visible:outline-none sm:align-middle",
-            props.size == "xl"
-              ? "px-8 pt-8 sm:max-w-[90rem]"
-              : props.size == "lg"
-              ? "px-8 pt-8 sm:max-w-[70rem]"
-              : props.size == "md"
-              ? "px-8 pt-8 sm:max-w-[48rem]"
-              : "px-8 pt-8 sm:max-w-[35rem]",
-            "max-h-[95vh]",
-            enableOverflow ? "overflow-auto" : "overflow-visible",
-            `${props.className || ""}`
-          )}
-          ref={forwardedRef}>
-          {type === "creation" && (
-            <div>
-              <DialogHeader title={title} subtitle={props.description} />
-              <div data-testid="dialog-creation" className="flex flex-col">
-                {children}
-              </div>
+export const DialogContent = (
+  {
+    ref: forwardedRef,
+    children,
+    title,
+    Icon: icon,
+    enableOverflow,
+    type = "creation",
+    ...props
+  }: DialogContentProps & {
+    ref: React.RefObject<HTMLDivElement>;
+  }
+) => {
+  const isPlatform = useIsPlatform();
+  const [Portal, Overlay, Content] = useMemo(
+    () =>
+      isPlatform
+        ? [
+            ({ children }: { children: ReactElement | ReactElement[] }) => <>{children}</>,
+            PlatformDialogPrimitives.DialogOverlay,
+            PlatformDialogPrimitives.DialogContent,
+          ]
+        : [DialogPrimitive.Portal, DialogPrimitive.Overlay, DialogPrimitive.Content],
+    [isPlatform]
+  );
+  return (
+    <Portal>
+      <Overlay className="fadeIn fixed inset-0 z-50 bg-neutral-800 bg-opacity-70 transition-opacity dark:bg-opacity-70 " />
+      <Content
+        {...props}
+        className={classNames(
+          "fadeIn bg-default scroll-bar fixed left-1/2 top-1/2 z-50 w-full max-w-[22rem] -translate-x-1/2 -translate-y-1/2 rounded-md text-left shadow-xl focus-visible:outline-none sm:align-middle",
+          props.size == "xl"
+            ? "px-8 pt-8 sm:max-w-[90rem]"
+            : props.size == "lg"
+            ? "px-8 pt-8 sm:max-w-[70rem]"
+            : props.size == "md"
+            ? "px-8 pt-8 sm:max-w-[48rem]"
+            : "px-8 pt-8 sm:max-w-[35rem]",
+          "max-h-[95vh]",
+          enableOverflow ? "overflow-auto" : "overflow-visible",
+          `${props.className || ""}`
+        )}
+        ref={forwardedRef}>
+        {type === "creation" && (
+          <div>
+            <DialogHeader title={title} subtitle={props.description} />
+            <div data-testid="dialog-creation" className="flex flex-col">
+              {children}
             </div>
-          )}
-          {type === "confirmation" && (
-            <div className="flex">
-              {icon && (
-                <div className="bg-emphasis mr-4 inline-flex h-10 w-10 items-center justify-center rounded-full">
-                  <Icon name={icon} className="text-emphasis h-4 w-4" />
-                </div>
-              )}
-              <div className="w-full">
-                <DialogHeader title={title} subtitle={props.description} />
-                <div data-testid="dialog-confirmation">{children}</div>
+          </div>
+        )}
+        {type === "confirmation" && (
+          <div className="flex">
+            {icon && (
+              <div className="bg-emphasis mr-4 inline-flex h-10 w-10 items-center justify-center rounded-full">
+                <Icon name={icon} className="text-emphasis h-4 w-4" />
               </div>
+            )}
+            <div className="w-full">
+              <DialogHeader title={title} subtitle={props.description} />
+              <div data-testid="dialog-confirmation">{children}</div>
             </div>
-          )}
-          {!type && children}
-        </Content>
-      </Portal>
-    );
-  }
-);
+          </div>
+        )}
+        {!type && children}
+      </Content>
+    </Portal>
+  );
+};
 
 type DialogHeaderProps = {
   title: React.ReactNode;
@@ -179,10 +189,10 @@ type DialogFooterProps = {
 
 export function DialogFooter(props: DialogFooterProps) {
   return (
-    <div className={classNames("bg-default sticky bottom-0", props.className)}>
+    (<div className={classNames("bg-default sticky bottom-0", props.className)}>
       {props.showDivider && (
         // TODO: the -mx-8 is causing overflow in the dialog buttons
-        <hr data-testid="divider" className="border-subtle -mx-8" />
+        (<hr data-testid="divider" className="border-subtle -mx-8" />)
       )}
       <div
         className={classNames(
@@ -191,7 +201,7 @@ export function DialogFooter(props: DialogFooterProps) {
         )}>
         {props.children}
       </div>
-    </div>
+    </div>)
   );
 }
 
@@ -199,14 +209,19 @@ DialogContent.displayName = "DialogContent";
 
 export const DialogTrigger: ForwardRefExoticComponent<
   DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>
-> = React.forwardRef((props, ref) => {
+> = (
+  {
+    ref,
+    ...props
+  }
+) => {
   const isPlatform = useIsPlatform();
   return !isPlatform ? (
     <DialogPrimitive.Trigger {...props} ref={ref} />
   ) : (
     <PlatformDialogPrimitives.DialogTrigger {...props} ref={ref} />
   );
-});
+};
 
 DialogTrigger.displayName = "DialogTrigger";
 
diff --git a/packages/ui/components/form/checkbox/Checkbox.tsx b/packages/ui/components/form/checkbox/Checkbox.tsx
index 8dc84724ef3bf8..8410cc66a37592 100644
--- a/packages/ui/components/form/checkbox/Checkbox.tsx
+++ b/packages/ui/components/form/checkbox/Checkbox.tsx
@@ -1,7 +1,7 @@
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { useId } from "@radix-ui/react-id";
 import type { InputHTMLAttributes } from "react";
-import React, { forwardRef } from "react";
+import React from "react";
 
 import classNames from "@calcom/lib/classNames";
 import { Icon } from "@calcom/ui";
@@ -20,95 +20,108 @@ type Props = InputHTMLAttributes<HTMLInputElement> & {
   descriptionAsSafeHtml?: string;
 };
 
-const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    className={classNames(
-      "border-default data-[state=checked]:bg-brand-default data-[state=checked]:text-brand peer h-4 w-4 shrink-0 rounded-[4px] border ring-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed",
-      className
-    )}
-    {...props}>
-    <CheckboxPrimitive.Indicator className={classNames("flex items-center justify-center text-current")}>
-      <Icon name="check" className="h-4 w-4" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-));
+const Checkbox = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & {
+    ref: React.RefObject<React.ElementRef<typeof CheckboxPrimitive.Root>>;
+  }
+) => (<CheckboxPrimitive.Root
+  ref={ref}
+  className={classNames(
+    "border-default data-[state=checked]:bg-brand-default data-[state=checked]:text-brand peer h-4 w-4 shrink-0 rounded-[4px] border ring-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed",
+    className
+  )}
+  {...props}>
+  <CheckboxPrimitive.Indicator className={classNames("flex items-center justify-center text-current")}>
+    <Icon name="check" className="h-4 w-4" />
+  </CheckboxPrimitive.Indicator>
+</CheckboxPrimitive.Root>);
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
-const CheckboxField = forwardRef<HTMLInputElement, Props>(
-  ({ label, description, error, disabled, descriptionAsSafeHtml, ...rest }, ref) => {
-    const descriptionAsLabel = !label || rest.descriptionAsLabel;
-    const id = useId();
-    return (
-      <div className="block items-center sm:flex">
-        {label && (
-          <div className="min-w-48 mb-4 sm:mb-0">
-            {React.createElement(
-              descriptionAsLabel ? "div" : "label",
-              {
-                className: classNames("flex text-sm font-medium text-emphasis"),
-                ...(!descriptionAsLabel
-                  ? {
-                      htmlFor: rest.id ? rest.id : id,
-                    }
-                  : {}),
-              },
-              label
-            )}
-          </div>
-        )}
-        <div className="w-full">
-          <div className="relative flex items-center">
-            {React.createElement(
-              descriptionAsLabel ? "label" : "div",
-              {
-                className: classNames(
-                  "relative flex items-start",
-                  !error && descriptionAsLabel ? "text-emphasis" : "text-emphasis",
-                  error && "text-error"
-                ),
-              },
-              <>
-                <div className="flex h-5 items-center">
-                  <input
-                    {...rest}
-                    ref={ref}
-                    type="checkbox"
-                    disabled={disabled}
-                    id={rest.id ? rest.id : id}
-                    className={classNames(
-                      "text-emphasis focus:ring-emphasis dark:text-muted border-default bg-default focus:bg-default active:bg-default h-4 w-4 rounded checked:hover:bg-gray-600 focus:outline-none focus:ring-0 ltr:mr-2 rtl:ml-2",
-                      !error && disabled
-                        ? "cursor-not-allowed bg-gray-300 checked:bg-gray-300 hover:bg-gray-300 hover:checked:bg-gray-300"
-                        : "hover:bg-subtle hover:border-emphasis checked:bg-gray-800",
-                      error &&
-                        "border-error hover:bg-error hover:border-error checked:bg-darkerror checked:hover:border-error checked:hover:bg-darkerror",
-                      rest.className
-                    )}
-                  />
-                </div>
-                {descriptionAsSafeHtml ? (
-                  <span
-                    className={classNames("text-sm", rest.descriptionClassName)}
-                    dangerouslySetInnerHTML={{
-                      __html: descriptionAsSafeHtml,
-                    }}
-                  />
-                ) : (
-                  <span className={classNames("text-sm", rest.descriptionClassName)}>{description}</span>
-                )}
-              </>
-            )}
-            {/* {informationIconText && <InfoBadge content={informationIconText}></InfoBadge>} */}
-          </div>
+const CheckboxField = (
+  {
+    ref,
+    label,
+    description,
+    error,
+    disabled,
+    descriptionAsSafeHtml,
+    ...rest
+  }: Props & {
+    ref: React.RefObject<HTMLInputElement>;
+  }
+) => {
+  const descriptionAsLabel = !label || rest.descriptionAsLabel;
+  const id = useId();
+  return (
+    <div className="block items-center sm:flex">
+      {label && (
+        <div className="min-w-48 mb-4 sm:mb-0">
+          {React.createElement(
+            descriptionAsLabel ? "div" : "label",
+            {
+              className: classNames("flex text-sm font-medium text-emphasis"),
+              ...(!descriptionAsLabel
+                ? {
+                    htmlFor: rest.id ? rest.id : id,
+                  }
+                : {}),
+            },
+            label
+          )}
+        </div>
+      )}
+      <div className="w-full">
+        <div className="relative flex items-center">
+          {React.createElement(
+            descriptionAsLabel ? "label" : "div",
+            {
+              className: classNames(
+                "relative flex items-start",
+                !error && descriptionAsLabel ? "text-emphasis" : "text-emphasis",
+                error && "text-error"
+              ),
+            },
+            <>
+              <div className="flex h-5 items-center">
+                <input
+                  {...rest}
+                  ref={ref}
+                  type="checkbox"
+                  disabled={disabled}
+                  id={rest.id ? rest.id : id}
+                  className={classNames(
+                    "text-emphasis focus:ring-emphasis dark:text-muted border-default bg-default focus:bg-default active:bg-default h-4 w-4 rounded checked:hover:bg-gray-600 focus:outline-none focus:ring-0 ltr:mr-2 rtl:ml-2",
+                    !error && disabled
+                      ? "cursor-not-allowed bg-gray-300 checked:bg-gray-300 hover:bg-gray-300 hover:checked:bg-gray-300"
+                      : "hover:bg-subtle hover:border-emphasis checked:bg-gray-800",
+                    error &&
+                      "border-error hover:bg-error hover:border-error checked:bg-darkerror checked:hover:border-error checked:hover:bg-darkerror",
+                    rest.className
+                  )}
+                />
+              </div>
+              {descriptionAsSafeHtml ? (
+                <span
+                  className={classNames("text-sm", rest.descriptionClassName)}
+                  dangerouslySetInnerHTML={{
+                    __html: descriptionAsSafeHtml,
+                  }}
+                />
+              ) : (
+                <span className={classNames("text-sm", rest.descriptionClassName)}>{description}</span>
+              )}
+            </>
+          )}
+          {/* {informationIconText && <InfoBadge content={informationIconText}></InfoBadge>} */}
         </div>
       </div>
-    );
-  }
-);
+    </div>
+  );
+};
 
 CheckboxField.displayName = "CheckboxField";
 
diff --git a/packages/ui/components/form/dropdown/Dropdown.tsx b/packages/ui/components/form/dropdown/Dropdown.tsx
index cd09315c335ae6..796025658f33ef 100644
--- a/packages/ui/components/form/dropdown/Dropdown.tsx
+++ b/packages/ui/components/form/dropdown/Dropdown.tsx
@@ -1,7 +1,6 @@
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import Link from "next/link";
 import type { ComponentProps } from "react";
-import { forwardRef } from "react";
 
 import { classNames } from "@calcom/lib";
 import { Icon, type IconName } from "@calcom/ui";
@@ -11,18 +10,22 @@ import type { ButtonColor } from "../../button/Button";
 export const Dropdown = DropdownMenuPrimitive.Root;
 
 type DropdownMenuTriggerProps = ComponentProps<(typeof DropdownMenuPrimitive)["Trigger"]>;
-export const DropdownMenuTrigger = forwardRef<HTMLButtonElement, DropdownMenuTriggerProps>(
-  ({ className = "", ...props }, forwardedRef) => (
-    <DropdownMenuPrimitive.Trigger
-      {...props}
-      className={classNames(
-        !props.asChild &&
-          `focus:bg-subtle hover:bg-muted text-default group-hover:text-emphasis inline-flex items-center rounded-md bg-transparent px-3 py-2 text-sm font-medium ring-0 ${className}`
-      )}
-      ref={forwardedRef}
-    />
-  )
-);
+export const DropdownMenuTrigger = (
+  {
+    ref: forwardedRef,
+    className = "",
+    ...props
+  }: DropdownMenuTriggerProps & {
+    ref: React.RefObject<HTMLButtonElement>;
+  }
+) => (<DropdownMenuPrimitive.Trigger
+  {...props}
+  className={classNames(
+    !props.asChild &&
+      `focus:bg-subtle hover:bg-muted text-default group-hover:text-emphasis inline-flex items-center rounded-md bg-transparent px-3 py-2 text-sm font-medium ring-0 ${className}`
+  )}
+  ref={forwardedRef}
+/>);
 DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
 
 export const DropdownMenuTriggerItem = DropdownMenuPrimitive.Trigger;
@@ -30,24 +33,32 @@ export const DropdownMenuTriggerItem = DropdownMenuPrimitive.Trigger;
 export const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 
 type DropdownMenuContentProps = ComponentProps<(typeof DropdownMenuPrimitive)["Content"]>;
-export const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuContentProps>(
-  ({ children, sideOffset = 2, align = "end", ...props }, forwardedRef) => {
-    return (
-      <DropdownMenuPrimitive.Content
-        align={align}
-        {...props}
-        sideOffset={sideOffset}
-        className={classNames(
-          "shadow-dropdown w-50 bg-default border-subtle relative z-10 ml-1.5 origin-top-right rounded-md border text-sm",
-          "[&>*:first-child]:mt-1 [&>*:last-child]:mb-1",
-          props.className
-        )}
-        ref={forwardedRef}>
-        {children}
-      </DropdownMenuPrimitive.Content>
-    );
+export const DropdownMenuContent = (
+  {
+    ref: forwardedRef,
+    children,
+    sideOffset = 2,
+    align = "end",
+    ...props
+  }: DropdownMenuContentProps & {
+    ref: React.RefObject<HTMLDivElement>;
   }
-);
+) => {
+  return (
+    <DropdownMenuPrimitive.Content
+      align={align}
+      {...props}
+      sideOffset={sideOffset}
+      className={classNames(
+        "shadow-dropdown w-50 bg-default border-subtle relative z-10 ml-1.5 origin-top-right rounded-md border text-sm",
+        "[&>*:first-child]:mt-1 [&>*:last-child]:mb-1",
+        props.className
+      )}
+      ref={forwardedRef}>
+      {children}
+    </DropdownMenuPrimitive.Content>
+  );
+};
 DropdownMenuContent.displayName = "DropdownMenuContent";
 
 type DropdownMenuLabelProps = ComponentProps<(typeof DropdownMenuPrimitive)["Label"]>;
@@ -56,49 +67,65 @@ export const DropdownMenuLabel = (props: DropdownMenuLabelProps) => (
 );
 
 type DropdownMenuItemProps = ComponentProps<(typeof DropdownMenuPrimitive)["CheckboxItem"]>;
-export const DropdownMenuItem = forwardRef<HTMLDivElement, DropdownMenuItemProps>(
-  ({ className = "", ...props }, forwardedRef) => (
-    <DropdownMenuPrimitive.Item
-      className={`focus:ring-brand-800 hover:bg-subtle hover:text-emphasis text-default text-sm ring-inset first-of-type:rounded-t-[inherit] last-of-type:rounded-b-[inherit] focus:outline-none focus:ring-1 ${className}`}
-      {...props}
-      ref={forwardedRef}
-    />
-  )
-);
+export const DropdownMenuItem = (
+  {
+    ref: forwardedRef,
+    className = "",
+    ...props
+  }: DropdownMenuItemProps & {
+    ref: React.RefObject<HTMLDivElement>;
+  }
+) => (<DropdownMenuPrimitive.Item
+  className={`focus:ring-brand-800 hover:bg-subtle hover:text-emphasis text-default text-sm ring-inset first-of-type:rounded-t-[inherit] last-of-type:rounded-b-[inherit] focus:outline-none focus:ring-1 ${className}`}
+  {...props}
+  ref={forwardedRef}
+/>);
 DropdownMenuItem.displayName = "DropdownMenuItem";
 
 export const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 
 type DropdownMenuCheckboxItemProps = ComponentProps<(typeof DropdownMenuPrimitive)["CheckboxItem"]>;
-export const DropdownMenuCheckboxItem = forwardRef<HTMLDivElement, DropdownMenuCheckboxItemProps>(
-  ({ children, ...props }, forwardedRef) => {
-    return (
-      <DropdownMenuPrimitive.CheckboxItem {...props} ref={forwardedRef} className="">
-        {children}
-        <DropdownMenuPrimitive.ItemIndicator>
-          <Icon name="circle-check" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </DropdownMenuPrimitive.CheckboxItem>
-    );
+export const DropdownMenuCheckboxItem = (
+  {
+    ref: forwardedRef,
+    children,
+    ...props
+  }: DropdownMenuCheckboxItemProps & {
+    ref: React.RefObject<HTMLDivElement>;
   }
-);
+) => {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem {...props} ref={forwardedRef} className="">
+      {children}
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Icon name="circle-check" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+};
 DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";
 
 export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
 type DropdownMenuRadioItemProps = ComponentProps<(typeof DropdownMenuPrimitive)["RadioItem"]>;
-export const DropdownMenuRadioItem = forwardRef<HTMLDivElement, DropdownMenuRadioItemProps>(
-  ({ children, ...props }, forwardedRef) => {
-    return (
-      <DropdownMenuPrimitive.RadioItem {...props} ref={forwardedRef}>
-        {children}
-        <DropdownMenuPrimitive.ItemIndicator>
-          <Icon name="circle-check" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </DropdownMenuPrimitive.RadioItem>
-    );
+export const DropdownMenuRadioItem = (
+  {
+    ref: forwardedRef,
+    children,
+    ...props
+  }: DropdownMenuRadioItemProps & {
+    ref: React.RefObject<HTMLDivElement>;
   }
-);
+) => {
+  return (
+    <DropdownMenuPrimitive.RadioItem {...props} ref={forwardedRef}>
+      {children}
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Icon name="circle-check" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </DropdownMenuPrimitive.RadioItem>
+  );
+};
 DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
 
 type DropdownItemProps = {
@@ -153,17 +180,23 @@ export const DropdownItem = (props: DropdownItemProps) => {
 };
 
 type DropdownMenuSeparatorProps = ComponentProps<(typeof DropdownMenuPrimitive)["Separator"]>;
-export const DropdownMenuSeparator = forwardRef<HTMLDivElement, DropdownMenuSeparatorProps>(
-  ({ className = "", ...props }, forwardedRef) => {
-    return (
-      <DropdownMenuPrimitive.Separator
-        className={classNames("bg-emphasis my-1 h-px", className)}
-        {...props}
-        ref={forwardedRef}
-      />
-    );
+export const DropdownMenuSeparator = (
+  {
+    ref: forwardedRef,
+    className = "",
+    ...props
+  }: DropdownMenuSeparatorProps & {
+    ref: React.RefObject<HTMLDivElement>;
   }
-);
+) => {
+  return (
+    <DropdownMenuPrimitive.Separator
+      className={classNames("bg-emphasis my-1 h-px", className)}
+      {...props}
+      ref={forwardedRef}
+    />
+  );
+};
 DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
 
 export default Dropdown;
diff --git a/packages/ui/components/form/inputs/Input.tsx b/packages/ui/components/form/inputs/Input.tsx
index fef01c209e0074..8085cad1878c84 100644
--- a/packages/ui/components/form/inputs/Input.tsx
+++ b/packages/ui/components/form/inputs/Input.tsx
@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import React, { forwardRef, useCallback, useId, useState } from "react";
+import React, { useCallback, useId, useState } from "react";
 import { useFormContext } from "react-hook-form";
 
 import classNames from "@calcom/lib/classNames";
@@ -17,9 +17,13 @@ export function InputLeading(props: JSX.IntrinsicElements["div"]) {
   );
 }
 
-export const PasswordField = forwardRef<HTMLInputElement, InputFieldProps>(function PasswordField(
-  props,
-  ref
+export const PasswordField = function PasswordField(
+  {
+    ref,
+    ...props
+  }: InputFieldProps & {
+    ref: React.RefObject<HTMLInputElement>;
+  }
 ) {
   const { t } = useLocale();
   const [isPasswordVisible, setIsPasswordVisible] = useState(false);
@@ -58,9 +62,16 @@ export const PasswordField = forwardRef<HTMLInputElement, InputFieldProps>(funct
       }
     />
   );
-});
+};
 
-export const EmailInput = forwardRef<HTMLInputElement, InputFieldProps>(function EmailInput(props, ref) {
+export const EmailInput = function EmailInput(
+  {
+    ref,
+    ...props
+  }: InputFieldProps & {
+    ref: React.RefObject<HTMLInputElement>;
+  }
+) {
   return (
     <Input
       ref={ref}
@@ -72,9 +83,16 @@ export const EmailInput = forwardRef<HTMLInputElement, InputFieldProps>(function
       {...props}
     />
   );
-});
+};
 
-export const EmailField = forwardRef<HTMLInputElement, InputFieldProps>(function EmailField(props, ref) {
+export const EmailField = function EmailField(
+  {
+    ref,
+    ...props
+  }: InputFieldProps & {
+    ref: React.RefObject<HTMLInputElement>;
+  }
+) {
   return (
     <InputField
       ref={ref}
@@ -86,11 +104,18 @@ export const EmailField = forwardRef<HTMLInputElement, InputFieldProps>(function
       {...props}
     />
   );
-});
+};
 
 type TextAreaProps = JSX.IntrinsicElements["textarea"];
 
-export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextAreaInput(props, ref) {
+export const TextArea = function TextAreaInput(
+  {
+    ref,
+    ...props
+  }: TextAreaProps & {
+    ref: React.RefObject<HTMLTextAreaElement>;
+  }
+) {
   return (
     <textarea
       ref={ref}
@@ -101,7 +126,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function
       )}
     />
   );
-});
+};
 
 type TextAreaFieldProps = {
   label?: ReactNode;
@@ -111,9 +136,13 @@ type TextAreaFieldProps = {
     labelProps?: React.ComponentProps<typeof Label>;
   };
 
-export const TextAreaField = forwardRef<HTMLTextAreaElement, TextAreaFieldProps>(function TextField(
-  props,
-  ref
+export const TextAreaField = function TextField(
+  {
+    ref,
+    ...props
+  }: TextAreaFieldProps & {
+    ref: React.RefObject<HTMLTextAreaElement>;
+  }
 ) {
   const id = useId();
   const { t: _t } = useLocale();
@@ -145,7 +174,7 @@ export const TextAreaField = forwardRef<HTMLTextAreaElement, TextAreaFieldProps>
       )}
     </div>
   );
-});
+};
 
 export function FieldsetLegend(props: JSX.IntrinsicElements["legend"]) {
   return (
@@ -165,7 +194,14 @@ export function InputGroupBox(props: JSX.IntrinsicElements["div"]) {
   );
 }
 
-export const NumberInput = forwardRef<HTMLInputElement, InputFieldProps>(function NumberInput(props, ref) {
+export const NumberInput = function NumberInput(
+  {
+    ref,
+    ...props
+  }: InputFieldProps & {
+    ref: React.RefObject<HTMLInputElement>;
+  }
+) {
   return (
     <Input
       ref={ref}
@@ -177,11 +213,15 @@ export const NumberInput = forwardRef<HTMLInputElement, InputFieldProps>(functio
       {...props}
     />
   );
-});
+};
 
-export const FilterSearchField = forwardRef<HTMLInputElement, InputFieldProps>(function TextField(
-  props,
-  ref
+export const FilterSearchField = function TextField(
+  {
+    ref,
+    ...props
+  }: InputFieldProps & {
+    ref: React.RefObject<HTMLInputElement>;
+  }
 ) {
   return (
     <div
@@ -197,4 +237,4 @@ export const FilterSearchField = forwardRef<HTMLInputElement, InputFieldProps>(f
       />
     </div>
   );
-});
+};
diff --git a/packages/ui/components/form/inputs/InputFieldWithSelect.tsx b/packages/ui/components/form/inputs/InputFieldWithSelect.tsx
index 72b0cd550f1e70..ffcb6a96077d44 100644
--- a/packages/ui/components/form/inputs/InputFieldWithSelect.tsx
+++ b/packages/ui/components/form/inputs/InputFieldWithSelect.tsx
@@ -1,12 +1,14 @@
-import React, { forwardRef } from "react";
+import React from "react";
 
 import { InputField, UnstyledSelect } from "../../..";
 import type { InputFieldProps } from "./types";
 
-export const InputFieldWithSelect = forwardRef<
-  HTMLInputElement,
-  InputFieldProps & { selectProps: typeof UnstyledSelect }
->(function EmailField(props, ref) {
+export const InputFieldWithSelect = function EmailField(
+  {
+    ref,
+    ...props
+  }
+) {
   return (
     <InputField
       ref={ref}
@@ -16,4 +18,4 @@ export const InputFieldWithSelect = forwardRef<
       addOnSuffix={<UnstyledSelect {...props.selectProps} />}
     />
   );
-});
+};
diff --git a/packages/ui/components/form/inputs/TextField.tsx b/packages/ui/components/form/inputs/TextField.tsx
index ed4ff6e11edc4f..8b3db3f23e8df1 100644
--- a/packages/ui/components/form/inputs/TextField.tsx
+++ b/packages/ui/components/form/inputs/TextField.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, useId, useState } from "react";
+import React, { useId, useState } from "react";
 
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -8,9 +8,14 @@ import { HintsOrErrors } from "./HintOrErrors";
 import { Label } from "./Label";
 import type { InputFieldProps, InputProps } from "./types";
 
-export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
-  { isFullWidth = true, ...props },
-  ref
+export const Input = function Input(
+  {
+    ref,
+    isFullWidth = true,
+    ...props
+  }: InputProps & {
+    ref: React.RefObject<HTMLInputElement>;
+  }
 ) {
   return (
     <input
@@ -23,7 +28,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
       )}
     />
   );
-});
+};
 
 type AddonProps = {
   children: React.ReactNode;
@@ -61,7 +66,14 @@ const Addon = ({ isFilled, children, className, error, onClickAddon }: AddonProp
   </div>
 );
 
-export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function InputField(props, ref) {
+export const InputField = function InputField(
+  {
+    ref,
+    ...props
+  }: InputFieldProps & {
+    ref: React.RefObject<HTMLInputElement>;
+  }
+) {
   const id = useId();
   const { t: _t, isLocaleReady, i18n } = useLocale();
   const t = props.t || _t;
@@ -186,8 +198,15 @@ export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function
       {hint && <div className="text-default mt-2 flex items-center text-sm">{hint}</div>}
     </div>
   );
-});
+};
 
-export const TextField = forwardRef<HTMLInputElement, InputFieldProps>(function TextField(props, ref) {
+export const TextField = function TextField(
+  {
+    ref,
+    ...props
+  }: InputFieldProps & {
+    ref: React.RefObject<HTMLInputElement>;
+  }
+) {
   return <InputField ref={ref} {...props} />;
-});
+};
diff --git a/packages/ui/components/popover/index.tsx b/packages/ui/components/popover/index.tsx
index 2841491d7e3725..4584a42af8e977 100644
--- a/packages/ui/components/popover/index.tsx
+++ b/packages/ui/components/popover/index.tsx
@@ -7,23 +7,28 @@ const Popover = PopoverPrimitive.Root;
 
 const PopoverTrigger = PopoverPrimitive.Trigger;
 
-const PopoverContent = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      className={classNames(
-        "bg-default text-emphasis z-50 w-72 rounded-md border p-4 outline-none",
-        className
-      )}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
-));
+const PopoverContent = (
+  {
+    ref,
+    className,
+    align = "center",
+    sideOffset = 4,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
+    ref: React.RefObject<React.ElementRef<typeof PopoverPrimitive.Content>>;
+  }
+) => (<PopoverPrimitive.Portal>
+  <PopoverPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={classNames(
+      "bg-default text-emphasis z-50 w-72 rounded-md border p-4 outline-none",
+      className
+    )}
+    {...props}
+  />
+</PopoverPrimitive.Portal>);
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 export { Popover, PopoverTrigger, PopoverContent };
diff --git a/packages/ui/components/sheet/sheet.tsx b/packages/ui/components/sheet/sheet.tsx
index ff6f0f953e38b8..87d3509964823f 100644
--- a/packages/ui/components/sheet/sheet.tsx
+++ b/packages/ui/components/sheet/sheet.tsx
@@ -32,20 +32,24 @@ const SheetPortal = ({ position, className, children, ...props }: SheetPortalPro
 );
 SheetPortal.displayName = SheetPrimitive.Portal.displayName;
 
-const SheetOverlay = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
->(({ className, children, ...props }, ref) => (
-  <SheetPrimitive.Overlay
-    className={classNames(
-      "data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in fixed inset-0 z-50 bg-neutral-800 bg-opacity-70 backdrop-blur-[1px] transition-all duration-100",
-      className
-    )}
-    {...props}
-    ref={ref}
-  />
-));
+const SheetOverlay = // eslint-disable-next-line @typescript-eslint/no-unused-vars
+(
+  {
+    ref,
+    className,
+    children,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay> & {
+    ref: React.RefObject<React.ElementRef<typeof SheetPrimitive.Overlay>>;
+  }
+) => (<SheetPrimitive.Overlay
+  className={classNames(
+    "data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in fixed inset-0 z-50 bg-neutral-800 bg-opacity-70 backdrop-blur-[1px] transition-all duration-100",
+    className
+  )}
+  {...props}
+  ref={ref}
+/>);
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
@@ -142,28 +146,36 @@ export interface DialogContentProps
   bottomActions?: React.ReactNode;
 }
 
-const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Content>, DialogContentProps>(
-  ({ position, size, className, children, bottomActions, ...props }, ref) => (
-    <SheetPortal position={position}>
-      <SheetOverlay />
-      <SheetPrimitive.Content
-        ref={ref}
-        {...props}
-        className={classNames(sheetVariants({ position, size }), className)}>
-        <div className="no-scrollbar h-full overflow-y-auto">{children}</div>
-        {bottomActions && (
-          <div className="mt-auto flex justify-end">
-            <div className="flex gap-2">{bottomActions}</div>
-          </div>
-        )}
-        <SheetPrimitive.Close className="focus:ring-emphasis data-[state=open]:bg-deafult absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
-          <Icon name="x" className="h-4 w-4" />
-          <span className="sr-only">Close</span>
-        </SheetPrimitive.Close>
-      </SheetPrimitive.Content>
-    </SheetPortal>
-  )
-);
+const SheetContent = (
+  {
+    ref,
+    position,
+    size,
+    className,
+    children,
+    bottomActions,
+    ...props
+  }: DialogContentProps & {
+    ref: React.RefObject<React.ElementRef<typeof SheetPrimitive.Content>>;
+  }
+) => (<SheetPortal position={position}>
+  <SheetOverlay />
+  <SheetPrimitive.Content
+    ref={ref}
+    {...props}
+    className={classNames(sheetVariants({ position, size }), className)}>
+    <div className="no-scrollbar h-full overflow-y-auto">{children}</div>
+    {bottomActions && (
+      <div className="mt-auto flex justify-end">
+        <div className="flex gap-2">{bottomActions}</div>
+      </div>
+    )}
+    <SheetPrimitive.Close className="focus:ring-emphasis data-[state=open]:bg-deafult absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
+      <Icon name="x" className="h-4 w-4" />
+      <span className="sr-only">Close</span>
+    </SheetPrimitive.Close>
+  </SheetPrimitive.Content>
+</SheetPortal>);
 SheetContent.displayName = SheetPrimitive.Content.displayName;
 
 const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
@@ -179,28 +191,34 @@ const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElemen
 );
 SheetFooter.displayName = "SheetFooter";
 
-const SheetTitle = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Title
-    ref={ref}
-    className={classNames("text-foreground text-lg font-semibold", className)}
-    {...props}
-  />
-));
+const SheetTitle = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title> & {
+    ref: React.RefObject<React.ElementRef<typeof SheetPrimitive.Title>>;
+  }
+) => (<SheetPrimitive.Title
+  ref={ref}
+  className={classNames("text-foreground text-lg font-semibold", className)}
+  {...props}
+/>);
 SheetTitle.displayName = SheetPrimitive.Title.displayName;
 
-const SheetDescription = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Description
-    ref={ref}
-    className={classNames("text-muted-foreground text-sm", className)}
-    {...props}
-  />
-));
+const SheetDescription = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description> & {
+    ref: React.RefObject<React.ElementRef<typeof SheetPrimitive.Description>>;
+  }
+) => (<SheetPrimitive.Description
+  ref={ref}
+  className={classNames("text-muted-foreground text-sm", className)}
+  {...props}
+/>);
 SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
 export {
diff --git a/packages/ui/components/table/TableNew.tsx b/packages/ui/components/table/TableNew.tsx
index d04e2ecf0a5c0d..b2def78a219b09 100644
--- a/packages/ui/components/table/TableNew.tsx
+++ b/packages/ui/components/table/TableNew.tsx
@@ -2,88 +2,120 @@ import * as React from "react";
 
 import { classNames } from "@calcom/lib";
 
-const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
-  ({ className, ...props }, ref) => (
-    <div className="w-full overflow-auto md:overflow-visible">
-      <table
-        ref={ref}
-        className={classNames("border-subtle w-full caption-bottom border text-sm", className)}
-        {...props}
-      />
-    </div>
-  )
-);
+const Table = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLTableElement> & {
+    ref: React.RefObject<HTMLTableElement>;
+  }
+) => (<div className="w-full overflow-auto md:overflow-visible">
+  <table
+    ref={ref}
+    className={classNames("border-subtle w-full caption-bottom border text-sm", className)}
+    {...props}
+  />
+</div>);
 Table.displayName = "Table";
 
-const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
-  ({ className, ...props }, ref) => (
-    <thead
-      ref={ref}
-      className={classNames("[&_tr]:bg-subtle md:z-10 [&_tr]:border-b", className)}
-      {...props}
-    />
-  )
-);
+const TableHeader = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLTableSectionElement> & {
+    ref: React.RefObject<HTMLTableSectionElement>;
+  }
+) => (<thead
+  ref={ref}
+  className={classNames("[&_tr]:bg-subtle md:z-10 [&_tr]:border-b", className)}
+  {...props}
+/>);
 TableHeader.displayName = "TableHeader";
 
-const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
-  ({ className, ...props }, ref) => (
-    <tbody ref={ref} className={classNames("[&_tr:last-child]:border-0", className)} {...props} />
-  )
-);
+const TableBody = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLTableSectionElement> & {
+    ref: React.RefObject<HTMLTableSectionElement>;
+  }
+) => (<tbody ref={ref} className={classNames("[&_tr:last-child]:border-0", className)} {...props} />);
 TableBody.displayName = "TableBody";
 
-const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
-  ({ className, ...props }, ref) => (
-    <tfoot ref={ref} className={classNames("bg-default text-emphasis font-medium", className)} {...props} />
-  )
-);
+const TableFooter = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLTableSectionElement> & {
+    ref: React.RefObject<HTMLTableSectionElement>;
+  }
+) => (<tfoot ref={ref} className={classNames("bg-default text-emphasis font-medium", className)} {...props} />);
 TableFooter.displayName = "TableFooter";
 
-const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
-  ({ className, ...props }, ref) => (
-    <tr
-      ref={ref}
-      className={classNames(
-        "hover:bg-muted data-[state=selected]:bg-subtle border-subtle border-b",
-        className
-      )}
-      {...props}
-    />
-  )
-);
+const TableRow = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLTableRowElement> & {
+    ref: React.RefObject<HTMLTableRowElement>;
+  }
+) => (<tr
+  ref={ref}
+  className={classNames(
+    "hover:bg-muted data-[state=selected]:bg-subtle border-subtle border-b",
+    className
+  )}
+  {...props}
+/>);
 TableRow.displayName = "TableRow";
 
-const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
-  ({ className, ...props }, ref) => (
-    <th
-      ref={ref}
-      className={classNames(
-        "text-default h-12 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0",
-        className
-      )}
-      {...props}
-    />
-  )
-);
+const TableHead = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ThHTMLAttributes<HTMLTableCellElement> & {
+    ref: React.RefObject<HTMLTableCellElement>;
+  }
+) => (<th
+  ref={ref}
+  className={classNames(
+    "text-default h-12 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0",
+    className
+  )}
+  {...props}
+/>);
 TableHead.displayName = "TableHead";
 
-const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
-  ({ className, ...props }, ref) => (
-    <td
-      ref={ref}
-      className={classNames("text-default px-2 py-2.5 align-middle [&:has([role=checkbox])]:pr-0", className)}
-      {...props}
-    />
-  )
-);
+const TableCell = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.TdHTMLAttributes<HTMLTableCellElement> & {
+    ref: React.RefObject<HTMLTableCellElement>;
+  }
+) => (<td
+  ref={ref}
+  className={classNames("text-default px-2 py-2.5 align-middle [&:has([role=checkbox])]:pr-0", className)}
+  {...props}
+/>);
 TableCell.displayName = "TableCell";
 
-const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
-  ({ className, ...props }, ref) => (
-    <caption ref={ref} className={classNames("text-default mt-4 text-sm", className)} {...props} />
-  )
-);
+const TableCaption = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLTableCaptionElement> & {
+    ref: React.RefObject<HTMLTableCaptionElement>;
+  }
+) => (<caption ref={ref} className={classNames("text-default mt-4 text-sm", className)} {...props} />);
 TableCaption.displayName = "TableCaption";
 
 export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
diff --git a/packages/ui/form/fields.tsx b/packages/ui/form/fields.tsx
index f1c0dedc41a35b..0e84cc7053bd6c 100644
--- a/packages/ui/form/fields.tsx
+++ b/packages/ui/form/fields.tsx
@@ -1,6 +1,6 @@
 import { useId } from "@radix-ui/react-id";
 import type { ReactElement, ReactNode, Ref } from "react";
-import React, { forwardRef } from "react";
+import React from "react";
 import type { FieldValues, SubmitHandler, UseFormReturn } from "react-hook-form";
 import { FormProvider, useFormContext } from "react-hook-form";
 
@@ -12,7 +12,14 @@ import { Alert, showToast } from "../";
 
 type InputProps = Omit<JSX.IntrinsicElements["input"], "name"> & { name: string };
 
-export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(props, ref) {
+export const Input = function Input(
+  {
+    ref,
+    ...props
+  }: InputProps & {
+    ref: React.RefObject<HTMLInputElement>;
+  }
+) {
   return (
     <input
       {...props}
@@ -23,7 +30,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(pro
       )}
     />
   );
-});
+};
 
 export function Label(props: JSX.IntrinsicElements["label"]) {
   return (
@@ -49,7 +56,14 @@ type InputFieldProps = {
     labelProps?: React.ComponentProps<typeof Label>;
   };
 
-const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function InputField(props, ref) {
+const InputField = function InputField(
+  {
+    ref,
+    ...props
+  }: InputFieldProps & {
+    ref: React.RefObject<HTMLInputElement>;
+  }
+) {
   const id = useId();
   const { t } = useLocale();
   const methods = useFormContext();
@@ -95,22 +109,40 @@ const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function InputF
       )}
     </div>
   );
-});
+};
 
-export const TextField = forwardRef<HTMLInputElement, InputFieldProps>(function TextField(props, ref) {
+export const TextField = function TextField(
+  {
+    ref,
+    ...props
+  }: InputFieldProps & {
+    ref: React.RefObject<HTMLInputElement>;
+  }
+) {
   return <InputField ref={ref} {...props} />;
-});
+};
 
-export const PasswordField = forwardRef<HTMLInputElement, InputFieldProps>(function PasswordField(
-  props,
-  ref
+export const PasswordField = function PasswordField(
+  {
+    ref,
+    ...props
+  }: InputFieldProps & {
+    ref: React.RefObject<HTMLInputElement>;
+  }
 ) {
   return (
     <InputField data-testid="password" type="password" placeholder="•••••••••••••" ref={ref} {...props} />
   );
-});
+};
 
-export const EmailInput = forwardRef<HTMLInputElement, InputFieldProps>(function EmailInput(props, ref) {
+export const EmailInput = function EmailInput(
+  {
+    ref,
+    ...props
+  }: InputFieldProps & {
+    ref: React.RefObject<HTMLInputElement>;
+  }
+) {
   return (
     <Input
       ref={ref}
@@ -122,9 +154,16 @@ export const EmailInput = forwardRef<HTMLInputElement, InputFieldProps>(function
       {...props}
     />
   );
-});
+};
 
-export const EmailField = forwardRef<HTMLInputElement, InputFieldProps>(function EmailField(props, ref) {
+export const EmailField = function EmailField(
+  {
+    ref,
+    ...props
+  }: InputFieldProps & {
+    ref: React.RefObject<HTMLInputElement>;
+  }
+) {
   return (
     <InputField
       ref={ref}
@@ -136,11 +175,18 @@ export const EmailField = forwardRef<HTMLInputElement, InputFieldProps>(function
       {...props}
     />
   );
-});
+};
 
 type TextAreaProps = Omit<JSX.IntrinsicElements["textarea"], "name"> & { name: string };
 
-export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextAreaInput(props, ref) {
+export const TextArea = function TextAreaInput(
+  {
+    ref,
+    ...props
+  }: TextAreaProps & {
+    ref: React.RefObject<HTMLTextAreaElement>;
+  }
+) {
   return (
     <textarea
       ref={ref}
@@ -151,7 +197,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function
       )}
     />
   );
-});
+};
 
 type TextAreaFieldProps = {
   label?: ReactNode;
@@ -159,9 +205,13 @@ type TextAreaFieldProps = {
     labelProps?: React.ComponentProps<typeof Label>;
   };
 
-export const TextAreaField = forwardRef<HTMLTextAreaElement, TextAreaFieldProps>(function TextField(
-  props,
-  ref
+export const TextAreaField = function TextField(
+  {
+    ref,
+    ...props
+  }: TextAreaFieldProps & {
+    ref: React.RefObject<HTMLTextAreaElement>;
+  }
 ) {
   const id = useId();
   const { t } = useLocale();
@@ -191,7 +241,7 @@ export const TextAreaField = forwardRef<HTMLTextAreaElement, TextAreaFieldProps>
       )}
     </div>
   );
-});
+};
 
 type FormProps<T extends object> = { form: UseFormReturn<T>; handleSubmit: SubmitHandler<T> } & Omit<
   JSX.IntrinsicElements["form"],