diff --git a/.vscode/settings.json b/.vscode/settings.json
index 804ec75057..919ae19b36 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -7,7 +7,5 @@
   "typescript.preferences.importModuleSpecifier": "non-relative",
   "spellright.language": ["en"],
   "spellright.documentTypes": ["markdown", "typescript"],
-  "tailwindCSS.experimental.classRegex": [
-    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
-  ]
+  "tailwindCSS.experimental.classRegex": [["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]]
 }
diff --git a/apps/console b/apps/console
index 7d53a77c07..6aa7cb2bbd 160000
--- a/apps/console
+++ b/apps/console
@@ -1 +1 @@
-Subproject commit 7d53a77c07ab2b2f0fd0567b4d8ee4905d448442
+Subproject commit 6aa7cb2bbdd4586533269a1a45cae42ba4be57c1
diff --git a/apps/web/components/AddToHomescreen.tsx b/apps/web/components/AddToHomescreen.tsx
index 9f71751168..fe3296c86a 100644
--- a/apps/web/components/AddToHomescreen.tsx
+++ b/apps/web/components/AddToHomescreen.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui/Icon";
+import { Icon } from "@calcom/ui";
 
 export default function AddToHomescreen() {
   const { t } = useLocale();
diff --git a/apps/web/components/Embed.tsx b/apps/web/components/Embed.tsx
index b67edbc7c8..a35e3e0173 100644
--- a/apps/web/components/Embed.tsx
+++ b/apps/web/components/Embed.tsx
@@ -5,11 +5,20 @@ import { createRef, forwardRef, MutableRefObject, RefObject, useRef, useState }
 import { components, ControlProps } from "react-select";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui/Icon";
-import { Button } from "@calcom/ui/components";
-import { InputLeading, Label, TextArea, TextField } from "@calcom/ui/form/fields";
-import { HorizontalTabs, showToast, Switch } from "@calcom/ui/v2";
-import { Dialog, DialogClose, DialogContent } from "@calcom/ui/v2/core/Dialog";
+import {
+  Button,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  HorizontalTabs,
+  Icon,
+  InputLeading,
+  Label,
+  showToast,
+  Switch,
+  TextArea,
+  TextField,
+} from "@calcom/ui";
 
 import { EMBED_LIB_URL, WEBAPP_URL } from "@lib/config/constants";
 
diff --git a/apps/web/components/ImageUploader.tsx b/apps/web/components/ImageUploader.tsx
index 525224de95..0a7795b5e8 100644
--- a/apps/web/components/ImageUploader.tsx
+++ b/apps/web/components/ImageUploader.tsx
@@ -1,8 +1,7 @@
 import { FormEvent, useCallback, useEffect, useState } from "react";
 import Cropper from "react-easy-crop";
 
-import Button from "@calcom/ui/Button";
-import { Dialog, DialogClose, DialogContent, DialogTrigger } from "@calcom/ui/Dialog";
+import { Button, Dialog, DialogClose, DialogContent, DialogTrigger } from "@calcom/ui";
 
 import { Area, getCroppedImg } from "@lib/cropImage";
 import { useFileReader } from "@lib/hooks/useFileReader";
diff --git a/apps/web/components/Loader.tsx b/apps/web/components/Loader.tsx
index ae6af3d9ca..5ee2d90975 100644
--- a/apps/web/components/Loader.tsx
+++ b/apps/web/components/Loader.tsx
@@ -1,4 +1,4 @@
 /**
  * @deprecated Use custom Skeletons instead
  **/
-export { default } from "@calcom/ui/Loader";
+export { Loader as default } from "@calcom/ui";
diff --git a/apps/web/components/SettingsShell.tsx b/apps/web/components/SettingsShell.tsx
index a5cad37bf9..1599371328 100644
--- a/apps/web/components/SettingsShell.tsx
+++ b/apps/web/components/SettingsShell.tsx
@@ -1,8 +1,6 @@
 import React, { ComponentProps } from "react";
 
-import ErrorBoundary from "@calcom/ui/ErrorBoundary";
-import { Icon } from "@calcom/ui/Icon";
-import Shell from "@calcom/ui/Shell";
+import { ErrorBoundary, Icon, Shell } from "@calcom/ui";
 
 import NavTabs from "./NavTabs";
 
diff --git a/apps/web/components/apps/AdditionalCalendarSelector.tsx b/apps/web/components/apps/AdditionalCalendarSelector.tsx
index a8073de330..6eb9f2bb98 100644
--- a/apps/web/components/apps/AdditionalCalendarSelector.tsx
+++ b/apps/web/components/apps/AdditionalCalendarSelector.tsx
@@ -1,13 +1,10 @@
-import React from "react";
 import { OptionProps } from "react-select";
 
 import { InstallAppButton } from "@calcom/app-store/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import type { App } from "@calcom/types/App";
-import { Button } from "@calcom/ui";
-import { Icon } from "@calcom/ui/Icon";
-import { Select } from "@calcom/ui/v2";
+import { Button, Icon, Select } from "@calcom/ui";
 
 import { QueryCell } from "@lib/QueryCell";
 
diff --git a/apps/web/components/apps/App.tsx b/apps/web/components/apps/App.tsx
index f04d2083dc..6fcfb85567 100644
--- a/apps/web/components/apps/App.tsx
+++ b/apps/web/components/apps/App.tsx
@@ -9,11 +9,15 @@ import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { App as AppType } from "@calcom/types/App";
-import { Icon } from "@calcom/ui/Icon";
-import { Button } from "@calcom/ui/components";
-import { showToast, SkeletonText } from "@calcom/ui/v2";
-import { SkeletonButton, Shell } from "@calcom/ui/v2";
-import DisconnectIntegration from "@calcom/ui/v2/modules/integrations/DisconnectIntegration";
+import {
+  Button,
+  DisconnectIntegration,
+  Icon,
+  Shell,
+  showToast,
+  SkeletonButton,
+  SkeletonText,
+} from "@calcom/ui";
 
 import HeadSeo from "@components/seo/head-seo";
 
@@ -123,6 +127,7 @@ const Component = ({
                   render={({ useDefaultComponent, ...props }) => {
                     if (useDefaultComponent) {
                       props = {
+                        ...props,
                         onClick: () => {
                           mutation.mutate({ type, variant, slug });
                         },
@@ -161,6 +166,7 @@ const Component = ({
               render={({ useDefaultComponent, ...props }) => {
                 if (useDefaultComponent) {
                   props = {
+                    ...props,
                     onClick: () => {
                       mutation.mutate({ type, variant, slug });
                     },
diff --git a/apps/web/components/apps/CalendarListContainer.tsx b/apps/web/components/apps/CalendarListContainer.tsx
index dfc66cb163..35adbf3c10 100644
--- a/apps/web/components/apps/CalendarListContainer.tsx
+++ b/apps/web/components/apps/CalendarListContainer.tsx
@@ -6,15 +6,18 @@ import { InstallAppButton } from "@calcom/app-store/components";
 import DestinationCalendarSelector from "@calcom/features/calendars/DestinationCalendarSelector";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui/Icon";
-import SkeletonLoader from "@calcom/ui/apps/SkeletonLoader";
-import { Button } from "@calcom/ui/components";
-import { Alert, EmptyScreen } from "@calcom/ui/v2";
-import { List } from "@calcom/ui/v2/core/List";
-import { ShellSubHeading } from "@calcom/ui/v2/core/Shell";
-import Switch from "@calcom/ui/v2/core/Switch";
-import showToast from "@calcom/ui/v2/core/notifications";
-import DisconnectIntegration from "@calcom/ui/v2/modules/integrations/DisconnectIntegration";
+import {
+  Alert,
+  Button,
+  DisconnectIntegration,
+  EmptyScreen,
+  Icon,
+  List,
+  ShellSubHeading,
+  showToast,
+  SkeletonLoader,
+  Switch,
+} from "@calcom/ui";
 
 import { QueryCell } from "@lib/QueryCell";
 
diff --git a/apps/web/components/apps/IntegrationListItem.tsx b/apps/web/components/apps/IntegrationListItem.tsx
index a27d424371..fff73dd343 100644
--- a/apps/web/components/apps/IntegrationListItem.tsx
+++ b/apps/web/components/apps/IntegrationListItem.tsx
@@ -3,9 +3,7 @@ import { useRouter } from "next/router";
 import { ReactNode, useEffect, useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui";
-import { showToast } from "@calcom/ui/v2";
-import { ListItem, ListItemText, ListItemTitle } from "@calcom/ui/v2/core/List";
+import { Icon, ListItem, ListItemText, ListItemTitle, showToast } from "@calcom/ui";
 
 import classNames from "@lib/classNames";
 
diff --git a/apps/web/components/apps/OmniInstallAppButton.tsx b/apps/web/components/apps/OmniInstallAppButton.tsx
index 0883016823..7f887b5550 100644
--- a/apps/web/components/apps/OmniInstallAppButton.tsx
+++ b/apps/web/components/apps/OmniInstallAppButton.tsx
@@ -4,9 +4,7 @@ import { classNames } from "@calcom/lib";
 import useApp from "@calcom/lib/hooks/useApp";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui/Icon";
-import { Button } from "@calcom/ui/components/button";
-import { showToast } from "@calcom/ui/v2";
+import { Button, Icon, showToast } from "@calcom/ui";
 
 /**
  * Use this component to allow installing an app from anywhere on the app.
@@ -42,6 +40,7 @@ export default function OmniInstallAppButton({ appId, className }: { appId: stri
       render={({ useDefaultComponent, ...props }) => {
         if (useDefaultComponent) {
           props = {
+            ...props,
             onClick: () => {
               mutation.mutate({ type: app.type, variant: app.variant, slug: app.slug, isOmniInstall: true });
             },
diff --git a/apps/web/components/auth/TwoFactor.tsx b/apps/web/components/auth/TwoFactor.tsx
index 6e06e23b6b..3fb4986626 100644
--- a/apps/web/components/auth/TwoFactor.tsx
+++ b/apps/web/components/auth/TwoFactor.tsx
@@ -3,7 +3,7 @@ import useDigitInput from "react-digit-input";
 import { useFormContext } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Label, Input } from "@calcom/ui/form/fields";
+import { Label, Input } from "@calcom/ui";
 
 export default function TwoFactor({ center = true }) {
   const [value, onChange] = useState("");
diff --git a/apps/web/components/availability/SkeletonLoader.tsx b/apps/web/components/availability/SkeletonLoader.tsx
index d5c75a6b41..fb9258d599 100644
--- a/apps/web/components/availability/SkeletonLoader.tsx
+++ b/apps/web/components/availability/SkeletonLoader.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { SkeletonText } from "@calcom/ui/v2";
+import { SkeletonText } from "@calcom/ui";
 
 import classNames from "@lib/classNames";
 
diff --git a/apps/web/components/booking/AvailableEventLocations.tsx b/apps/web/components/booking/AvailableEventLocations.tsx
index 082ef1f441..940b94c575 100644
--- a/apps/web/components/booking/AvailableEventLocations.tsx
+++ b/apps/web/components/booking/AvailableEventLocations.tsx
@@ -1,7 +1,6 @@
 import { getEventLocationType, locationKeyToString } from "@calcom/app-store/locations";
 import { classNames } from "@calcom/lib";
-import { Icon } from "@calcom/ui";
-import Tooltip from "@calcom/ui/v2/core/Tooltip";
+import { Icon, Tooltip } from "@calcom/ui";
 
 import { Props } from "./pages/AvailabilityPage";
 
diff --git a/apps/web/components/booking/AvailableTimes.tsx b/apps/web/components/booking/AvailableTimes.tsx
index bdc8cdeef4..16f531f459 100644
--- a/apps/web/components/booking/AvailableTimes.tsx
+++ b/apps/web/components/booking/AvailableTimes.tsx
@@ -7,8 +7,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { TimeFormat } from "@calcom/lib/timeFormat";
 import { nameOfDay } from "@calcom/lib/weekday";
 import type { Slot } from "@calcom/trpc/server/routers/viewer/slots";
-import { SkeletonContainer, SkeletonText } from "@calcom/ui/v2";
-import { ToggleGroup } from "@calcom/ui/v2/core/form/ToggleGroup";
+import { SkeletonContainer, SkeletonText, ToggleGroup } from "@calcom/ui";
 
 import classNames from "@lib/classNames";
 import { timeZone } from "@lib/clock";
diff --git a/apps/web/components/booking/BookingDescription.tsx b/apps/web/components/booking/BookingDescription.tsx
index 1552965e9a..cacdb59359 100644
--- a/apps/web/components/booking/BookingDescription.tsx
+++ b/apps/web/components/booking/BookingDescription.tsx
@@ -3,7 +3,7 @@ import { FC, ReactNode } from "react";
 
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui/Icon";
+import { Icon } from "@calcom/ui";
 
 import { UserAvatars } from "@components/booking/UserAvatars";
 import EventTypeDescriptionSafeHTML from "@components/eventtype/EventTypeDescriptionSafeHTML";
diff --git a/apps/web/components/booking/BookingListItem.tsx b/apps/web/components/booking/BookingListItem.tsx
index 2023df30bf..201f0a2879 100644
--- a/apps/web/components/booking/BookingListItem.tsx
+++ b/apps/web/components/booking/BookingListItem.tsx
@@ -1,6 +1,6 @@
 import { BookingStatus } from "@prisma/client";
 import { useRouter } from "next/router";
-import { useState, useMemo } from "react";
+import { useState } from "react";
 
 import { EventLocationType, getEventLocationType } from "@calcom/app-store/locations";
 import dayjs from "@calcom/dayjs";
@@ -9,14 +9,20 @@ import { formatTime } from "@calcom/lib/date-fns";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
 import { RouterInputs, RouterOutputs, trpc } from "@calcom/trpc/react";
-import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
-import { Icon } from "@calcom/ui/Icon";
-import { Badge } from "@calcom/ui/components/badge";
-import { Button } from "@calcom/ui/components/button";
-import { TextArea } from "@calcom/ui/form/fields";
-import MeetingTimeInTimezones from "@calcom/ui/v2/core/MeetingTimeInTimezones";
-import Tooltip from "@calcom/ui/v2/core/Tooltip";
-import showToast from "@calcom/ui/v2/core/notifications";
+import {
+  Badge,
+  Button,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  Icon,
+  MeetingTimeInTimezones,
+  showToast,
+  TextArea,
+  Tooltip,
+} from "@calcom/ui";
 
 import useMeQuery from "@lib/hooks/useMeQuery";
 
diff --git a/apps/web/components/booking/CancelBooking.tsx b/apps/web/components/booking/CancelBooking.tsx
index e6da1c4e6a..951953e169 100644
--- a/apps/web/components/booking/CancelBooking.tsx
+++ b/apps/web/components/booking/CancelBooking.tsx
@@ -5,8 +5,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import type { RecurringEvent } from "@calcom/types/Calendar";
-import { Icon } from "@calcom/ui/Icon";
-import { Button, TextArea } from "@calcom/ui/components";
+import { Button, Icon, TextArea } from "@calcom/ui";
 
 type Props = {
   booking: {
diff --git a/apps/web/components/booking/SkeletonLoader.tsx b/apps/web/components/booking/SkeletonLoader.tsx
index e9cb916267..8bcbe26b85 100644
--- a/apps/web/components/booking/SkeletonLoader.tsx
+++ b/apps/web/components/booking/SkeletonLoader.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { SkeletonText } from "@calcom/ui/v2";
+import { SkeletonText } from "@calcom/ui";
 
 function SkeletonLoader() {
   return (
diff --git a/apps/web/components/booking/TimeOptions.tsx b/apps/web/components/booking/TimeOptions.tsx
index d62b3ff2c0..293276cf2b 100644
--- a/apps/web/components/booking/TimeOptions.tsx
+++ b/apps/web/components/booking/TimeOptions.tsx
@@ -1,7 +1,7 @@
 import { FC, useEffect, useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import TimezoneSelect, { ITimezoneOption } from "@calcom/ui/v2/core/TimezoneSelect";
+import { ITimezoneOption, TimezoneSelect } from "@calcom/ui";
 
 import { timeZone } from "../../lib/clock";
 
diff --git a/apps/web/components/booking/pages/AvailabilityPage.tsx b/apps/web/components/booking/pages/AvailabilityPage.tsx
index ac7022c448..d0d6f348e7 100644
--- a/apps/web/components/booking/pages/AvailabilityPage.tsx
+++ b/apps/web/components/booking/pages/AvailabilityPage.tsx
@@ -28,8 +28,7 @@ import { getRecurringFreq } from "@calcom/lib/recurringStrings";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { detectBrowserTimeFormat, setIs24hClockInLocalStorage, TimeFormat } from "@calcom/lib/timeFormat";
 import { trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui/Icon";
-import DatePicker from "@calcom/ui/v2/modules/booker/DatePicker";
+import { Icon, DatePicker } from "@calcom/ui";
 
 import { timeZone as localStorageTimeZone } from "@lib/clock";
 // import { timeZone } from "@lib/clock";
diff --git a/apps/web/components/booking/pages/BookingPage.tsx b/apps/web/components/booking/pages/BookingPage.tsx
index 9520b50c0c..472ddb2420 100644
--- a/apps/web/components/booking/pages/BookingPage.tsx
+++ b/apps/web/components/booking/pages/BookingPage.tsx
@@ -5,7 +5,7 @@ import { isValidPhoneNumber } from "libphonenumber-js";
 import { useSession } from "next-auth/react";
 import Head from "next/head";
 import { useRouter } from "next/router";
-import { useEffect, useMemo, useState, useReducer } from "react";
+import { useEffect, useMemo, useReducer, useState } from "react";
 import { Controller, useForm, useWatch } from "react-hook-form";
 import { FormattedNumber, IntlProvider } from "react-intl";
 import { ReactMultiEmail } from "react-multi-email";
@@ -14,11 +14,11 @@ import { z } from "zod";
 
 import BookingPageTagManager from "@calcom/app-store/BookingPageTagManager";
 import {
-  locationKeyToString,
-  getEventLocationValue,
-  getEventLocationType,
   EventLocationType,
+  getEventLocationType,
+  getEventLocationValue,
   getHumanReadableLocationValue,
+  locationKeyToString,
 } from "@calcom/app-store/locations";
 import { createPaymentLink } from "@calcom/app-store/stripepayment/lib/client";
 import { getEventTypeAppData } from "@calcom/app-store/utils";
@@ -37,12 +37,7 @@ import useTheme from "@calcom/lib/hooks/useTheme";
 import { HttpError } from "@calcom/lib/http-error";
 import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
-import { Icon } from "@calcom/ui/Icon";
-import { Tooltip } from "@calcom/ui/Tooltip";
-import { Button } from "@calcom/ui/components";
-import AddressInput from "@calcom/ui/form/AddressInputLazy";
-import PhoneInput from "@calcom/ui/form/PhoneInputLazy";
-import { EmailInput, Form } from "@calcom/ui/form/fields";
+import { AddressInput, Button, EmailInput, Form, Icon, PhoneInput, Tooltip } from "@calcom/ui";
 
 import { asStringOrNull } from "@lib/asStringOrNull";
 import { timeZone } from "@lib/clock";
diff --git a/apps/web/components/dialog/DeleteStripeDialogContent.tsx b/apps/web/components/dialog/DeleteStripeDialogContent.tsx
deleted file mode 100644
index a069550514..0000000000
--- a/apps/web/components/dialog/DeleteStripeDialogContent.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import React, { PropsWithChildren } from "react";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button } from "@calcom/ui/Button";
-import { DialogClose, DialogContent } from "@calcom/ui/Dialog";
-import { Icon } from "@calcom/ui/Icon";
-
-export type DeleteStripeDialogContentProps = {
-  cancelAllBookingsBtnText?: string;
-  removeBtnText?: string;
-  cancelBtnText?: string;
-  onConfirm?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-  onRemove?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-  title: string;
-  variety?: "danger" | "warning" | "success";
-};
-
-export default function DeleteStripeDialogContent(props: PropsWithChildren<DeleteStripeDialogContentProps>) {
-  const { t } = useLocale();
-  const {
-    title,
-    variety,
-    cancelAllBookingsBtnText,
-    removeBtnText,
-    cancelBtnText = t("cancel"),
-    onConfirm,
-    onRemove,
-    children,
-  } = props;
-
-  return (
-    <DialogContent>
-      <div className="flex">
-        {variety && (
-          <div className="mt-0.5 ltr:mr-3">
-            {variety === "danger" && (
-              <div className="mx-auto rounded-full bg-red-100 p-2 text-center">
-                <Icon.FiAlertTriangle className="h-5 w-5 text-red-600" />
-              </div>
-            )}
-            {variety === "warning" && (
-              <div className="mx-auto rounded-full bg-orange-100 p-2 text-center">
-                <Icon.FiAlertTriangle className="h-5 w-5 text-orange-600" />
-              </div>
-            )}
-            {variety === "success" && (
-              <div className="mx-auto rounded-full bg-green-100 p-2 text-center">
-                <Icon.FiCheck className="h-5 w-5 text-green-600" />
-              </div>
-            )}
-          </div>
-        )}
-        <div>
-          <DialogPrimitive.Title className="font-cal text-xl text-gray-900">{title}</DialogPrimitive.Title>
-          <DialogPrimitive.Description className="text-sm text-neutral-500">
-            {children}
-          </DialogPrimitive.Description>
-        </div>
-      </div>
-      <div className="mt-5 flex flex-row-reverse gap-x-2 sm:mt-8">
-        <DialogClose onClick={onConfirm} asChild>
-          <Button color="alert">{cancelAllBookingsBtnText}</Button>
-        </DialogClose>
-        <DialogClose onClick={onRemove} asChild>
-          <Button color="alert2">{removeBtnText}</Button>
-        </DialogClose>
-        <DialogClose asChild>
-          <Button color="secondary">{cancelBtnText}</Button>
-        </DialogClose>
-      </div>
-    </DialogContent>
-  );
-}
diff --git a/apps/web/components/dialog/EditLocationDialog.tsx b/apps/web/components/dialog/EditLocationDialog.tsx
index eba094c04a..6e90496796 100644
--- a/apps/web/components/dialog/EditLocationDialog.tsx
+++ b/apps/web/components/dialog/EditLocationDialog.tsx
@@ -6,20 +6,16 @@ import { Controller, useForm, useWatch } from "react-hook-form";
 import { z } from "zod";
 
 import {
-  LocationType,
-  getEventLocationType,
   EventLocationType,
+  getEventLocationType,
+  getHumanReadableLocationValue,
+  getMessageForOrganizer,
   LocationObject,
+  LocationType,
 } from "@calcom/app-store/locations";
-import { getMessageForOrganizer } from "@calcom/app-store/locations";
-import { getHumanReadableLocationValue } from "@calcom/app-store/locations";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { RouterOutputs, trpc } from "@calcom/trpc/react";
-import { Button } from "@calcom/ui";
-import { Dialog, DialogContent } from "@calcom/ui/Dialog";
-import { Icon } from "@calcom/ui/Icon";
-import PhoneInput from "@calcom/ui/form/PhoneInputLazy";
-import { Form } from "@calcom/ui/form/fields";
+import { Button, Dialog, DialogContent, Form, Icon, PhoneInput } from "@calcom/ui";
 
 import { QueryCell } from "@lib/QueryCell";
 
diff --git a/apps/web/components/dialog/RescheduleDialog.tsx b/apps/web/components/dialog/RescheduleDialog.tsx
index 1e5e70614a..694e453784 100644
--- a/apps/web/components/dialog/RescheduleDialog.tsx
+++ b/apps/web/components/dialog/RescheduleDialog.tsx
@@ -1,12 +1,18 @@
-import React, { useState, Dispatch, SetStateAction } from "react";
+import { Dispatch, SetStateAction, useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
-import { Icon } from "@calcom/ui/Icon";
-import { Button } from "@calcom/ui/components/button";
-import { TextArea } from "@calcom/ui/form/fields";
-import showToast from "@calcom/ui/v2/core/notifications";
+import {
+  Button,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  Icon,
+  showToast,
+  TextArea,
+} from "@calcom/ui";
 
 interface IRescheduleDialog {
   isOpenDialog: boolean;
diff --git a/apps/web/components/eventtype/AvailabilityTab.tsx b/apps/web/components/eventtype/AvailabilityTab.tsx
index 58ad79a169..5f15cfb022 100644
--- a/apps/web/components/eventtype/AvailabilityTab.tsx
+++ b/apps/web/components/eventtype/AvailabilityTab.tsx
@@ -1,6 +1,6 @@
 import { FormValues } from "pages/event-types/[type]";
 import { Controller, useFormContext } from "react-hook-form";
-import { SingleValueProps, OptionProps, components } from "react-select";
+import { components, OptionProps, SingleValueProps } from "react-select";
 
 import dayjs from "@calcom/dayjs";
 import classNames from "@calcom/lib/classNames";
@@ -8,12 +8,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { weekdayNames } from "@calcom/lib/weekday";
 import { trpc } from "@calcom/trpc/react";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
-import { Icon } from "@calcom/ui";
-import { Badge } from "@calcom/ui/components/badge";
-import { Button } from "@calcom/ui/components/button";
-import { SettingsToggle } from "@calcom/ui/v2";
-import Select from "@calcom/ui/v2/core/form/select";
-import { SkeletonText } from "@calcom/ui/v2/core/skeleton";
+import { Badge, Button, Icon, Select, SettingsToggle, SkeletonText } from "@calcom/ui";
 
 import { SelectSkeletonLoader } from "@components/availability/SkeletonLoader";
 
diff --git a/apps/web/components/eventtype/CreateEventType.tsx b/apps/web/components/eventtype/CreateEventType.tsx
index 2c7cb8454b..f7cff9aa49 100644
--- a/apps/web/components/eventtype/CreateEventType.tsx
+++ b/apps/web/components/eventtype/CreateEventType.tsx
@@ -11,19 +11,25 @@ import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { createEventTypeInput } from "@calcom/prisma/zod/custom/eventtype";
 import { trpc } from "@calcom/trpc/react";
-import { Alert } from "@calcom/ui/Alert";
-import { Button } from "@calcom/ui/Button";
-import { Dialog, DialogClose, DialogContent } from "@calcom/ui/Dialog";
-import Dropdown, {
+import {
+  Alert,
+  Button,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  Dropdown,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@calcom/ui/Dropdown";
-import { Icon } from "@calcom/ui/Icon";
-import { Form, InputLeading, TextAreaField, TextField } from "@calcom/ui/form/fields";
-import showToast from "@calcom/ui/v2/core/notifications";
+  Form,
+  Icon,
+  InputLeading,
+  showToast,
+  TextAreaField,
+  TextField,
+} from "@calcom/ui";
 
 import { HttpError } from "@lib/core/http/error";
 import { slugify } from "@lib/slugify";
diff --git a/apps/web/components/eventtype/CustomInputTypeForm.tsx b/apps/web/components/eventtype/CustomInputTypeForm.tsx
index 5eeed7467f..08a2b3fd5d 100644
--- a/apps/web/components/eventtype/CustomInputTypeForm.tsx
+++ b/apps/web/components/eventtype/CustomInputTypeForm.tsx
@@ -1,10 +1,8 @@
 import { EventTypeCustomInput, EventTypeCustomInputType } from "@prisma/client";
-import React, { FC } from "react";
+import { FC } from "react";
 import { Controller, SubmitHandler, useForm, useWatch } from "react-hook-form";
 
-import { Button } from "@calcom/ui/components";
-import { TextField } from "@calcom/ui/components/form";
-import { Select } from "@calcom/ui/v2";
+import { Button, Select, TextField } from "@calcom/ui";
 
 import { useLocale } from "@lib/hooks/useLocale";
 
diff --git a/apps/web/components/eventtype/EditLocationDialog.tsx b/apps/web/components/eventtype/EditLocationDialog.tsx
index 83b7bc1903..26c53c0e7d 100644
--- a/apps/web/components/eventtype/EditLocationDialog.tsx
+++ b/apps/web/components/eventtype/EditLocationDialog.tsx
@@ -7,21 +7,16 @@ import { Controller, useForm, useWatch } from "react-hook-form";
 import { z } from "zod";
 
 import {
-  LocationType,
-  getEventLocationType,
   EventLocationType,
+  getEventLocationType,
   getHumanReadableLocationValue,
   getMessageForOrganizer,
   LocationObject,
+  LocationType,
 } from "@calcom/app-store/locations";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { RouterOutputs, trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui/Icon";
-import { Button } from "@calcom/ui/components";
-import { Label, Form } from "@calcom/ui/components/form";
-import PhoneInput from "@calcom/ui/form/PhoneInputLazy";
-import { Dialog, DialogContent } from "@calcom/ui/v2";
-import { Select } from "@calcom/ui/v2/";
+import { Button, Dialog, DialogContent, Form, Icon, Label, PhoneInput, Select } from "@calcom/ui";
 
 import { QueryCell } from "@lib/QueryCell";
 
diff --git a/apps/web/components/eventtype/EventAdvancedTab.tsx b/apps/web/components/eventtype/EventAdvancedTab.tsx
index 473e04e42c..0730bc93a3 100644
--- a/apps/web/components/eventtype/EventAdvancedTab.tsx
+++ b/apps/web/components/eventtype/EventAdvancedTab.tsx
@@ -10,9 +10,19 @@ import DestinationCalendarSelector from "@calcom/features/calendars/DestinationC
 import { CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui";
-import { Checkbox, Button, TextField, Label } from "@calcom/ui/components";
-import { CustomInputItem, Dialog, DialogContent, SettingsToggle, showToast, Tooltip } from "@calcom/ui/v2";
+import {
+  Button,
+  Checkbox,
+  CustomInputItem,
+  Dialog,
+  DialogContent,
+  Icon,
+  Label,
+  SettingsToggle,
+  showToast,
+  TextField,
+  Tooltip,
+} from "@calcom/ui";
 
 import CustomInputTypeForm from "@components/eventtype/CustomInputTypeForm";
 
diff --git a/apps/web/components/eventtype/EventAppsTab.tsx b/apps/web/components/eventtype/EventAppsTab.tsx
index 4b2864cf17..19fead5016 100644
--- a/apps/web/components/eventtype/EventAppsTab.tsx
+++ b/apps/web/components/eventtype/EventAppsTab.tsx
@@ -1,5 +1,4 @@
 import { EventTypeSetupInfered, FormValues } from "pages/event-types/[type]";
-import React from "react";
 import { useFormContext } from "react-hook-form";
 
 import EventTypeAppContext, { GetAppData, SetAppData } from "@calcom/app-store/EventTypeAppContext";
@@ -8,10 +7,7 @@ import { EventTypeAppCardComponentProps } from "@calcom/app-store/types";
 import { EventTypeAppsList } from "@calcom/app-store/utils";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { RouterOutputs, trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui";
-import ErrorBoundary from "@calcom/ui/ErrorBoundary";
-import { Button } from "@calcom/ui/components";
-import { EmptyScreen } from "@calcom/ui/v2";
+import { Button, EmptyScreen, ErrorBoundary, Icon } from "@calcom/ui";
 
 type EventType = Pick<EventTypeSetupInfered, "eventType">["eventType"] &
   EventTypeAppCardComponentProps["eventType"];
diff --git a/apps/web/components/eventtype/EventLimitsTab.tsx b/apps/web/components/eventtype/EventLimitsTab.tsx
index 41c457fbf2..21f5d273ce 100644
--- a/apps/web/components/eventtype/EventLimitsTab.tsx
+++ b/apps/web/components/eventtype/EventLimitsTab.tsx
@@ -10,11 +10,7 @@ import findDurationType from "@calcom/lib/findDurationType";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { PeriodType } from "@calcom/prisma/client";
 import type { BookingLimit } from "@calcom/types/Calendar";
-import { Icon } from "@calcom/ui";
-import { Button } from "@calcom/ui/components";
-import { Input, InputField, Label } from "@calcom/ui/components/form";
-import { Select, SettingsToggle } from "@calcom/ui/v2";
-import DateRangePicker from "@calcom/ui/v2/core/form/date-range-picker/DateRangePicker";
+import { Button, DateRangePicker, Icon, Input, InputField, Label, Select, SettingsToggle } from "@calcom/ui";
 
 export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupInfered, "eventType">) => {
   const { t } = useLocale();
diff --git a/apps/web/components/eventtype/EventSetupTab.tsx b/apps/web/components/eventtype/EventSetupTab.tsx
index 12e229fd5f..1d08e60bdd 100644
--- a/apps/web/components/eventtype/EventSetupTab.tsx
+++ b/apps/web/components/eventtype/EventSetupTab.tsx
@@ -6,13 +6,10 @@ import { useState } from "react";
 import { Controller, useForm, useFormContext } from "react-hook-form";
 import { z } from "zod";
 
-import { getEventLocationType, EventLocationType } from "@calcom/app-store/locations";
+import { EventLocationType, getEventLocationType } from "@calcom/app-store/locations";
 import { CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui/Icon";
-import { Button } from "@calcom/ui/components";
-import { Label, TextField } from "@calcom/ui/components/form";
-import { Select, Skeleton } from "@calcom/ui/v2";
+import { Button, Icon, Label, Select, Skeleton, TextField } from "@calcom/ui";
 
 import { slugify } from "@lib/slugify";
 
diff --git a/apps/web/components/eventtype/EventTeamTab.tsx b/apps/web/components/eventtype/EventTeamTab.tsx
index 8117a5fcac..177163bdbb 100644
--- a/apps/web/components/eventtype/EventTeamTab.tsx
+++ b/apps/web/components/eventtype/EventTeamTab.tsx
@@ -5,10 +5,7 @@ import { Controller, useFormContext } from "react-hook-form";
 
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui";
-import { Button, Avatar } from "@calcom/ui/components";
-import { Label } from "@calcom/ui/components/form";
-import { Select, CheckedTeamSelect } from "@calcom/ui/v2";
+import { Avatar, Button, CheckedTeamSelect, Icon, Label, Select } from "@calcom/ui";
 
 interface IMemberToValue {
   id: number | null;
diff --git a/apps/web/components/eventtype/EventTypeSingleLayout.tsx b/apps/web/components/eventtype/EventTypeSingleLayout.tsx
index 321df9a22c..65d6de93d2 100644
--- a/apps/web/components/eventtype/EventTypeSingleLayout.tsx
+++ b/apps/web/components/eventtype/EventTypeSingleLayout.tsx
@@ -10,20 +10,27 @@ import { CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HttpError } from "@calcom/lib/http-error";
 import { trpc, TRPCClientError } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui/Icon";
-import { Button, ButtonGroup, Label } from "@calcom/ui/components";
-import { HorizontalTabs, showToast, Switch, Tooltip, VerticalTabs } from "@calcom/ui/v2";
-import ConfirmationDialogContent from "@calcom/ui/v2/core/ConfirmationDialogContent";
-import { Dialog } from "@calcom/ui/v2/core/Dialog";
-import Divider from "@calcom/ui/v2/core/Divider";
-import Dropdown, {
+import {
+  Button,
+  ButtonGroup,
+  ConfirmationDialogContent,
+  Dialog,
+  Divider,
+  Dropdown,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@calcom/ui/v2/core/Dropdown";
-import Shell from "@calcom/ui/v2/core/Shell";
-import VerticalDivider from "@calcom/ui/v2/core/VerticalDivider";
-import { Skeleton } from "@calcom/ui/v2/core/skeleton";
+  HorizontalTabs,
+  Icon,
+  Label,
+  Shell,
+  showToast,
+  Skeleton,
+  Switch,
+  Tooltip,
+  VerticalDivider,
+  VerticalTabs,
+} from "@calcom/ui";
 
 import { ClientSuspense } from "@components/ClientSuspense";
 import { EmbedButton, EmbedDialog } from "@components/Embed";
diff --git a/apps/web/components/eventtype/EventWorkfowsTab.tsx b/apps/web/components/eventtype/EventWorkfowsTab.tsx
index 1b5eaff2b9..6baf823a78 100644
--- a/apps/web/components/eventtype/EventWorkfowsTab.tsx
+++ b/apps/web/components/eventtype/EventWorkfowsTab.tsx
@@ -1 +1 @@
-export { default } from "@calcom/features/ee/workflows/components/v2/EventWorkflowsTab";
+export { default } from "@calcom/features/ee/workflows/components/EventWorkflowsTab";
diff --git a/apps/web/components/eventtype/RecurringEventController.tsx b/apps/web/components/eventtype/RecurringEventController.tsx
index f7f4c57c65..a95961829b 100644
--- a/apps/web/components/eventtype/RecurringEventController.tsx
+++ b/apps/web/components/eventtype/RecurringEventController.tsx
@@ -5,8 +5,7 @@ import { useFormContext } from "react-hook-form";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Frequency } from "@calcom/prisma/zod-utils";
 import type { RecurringEvent } from "@calcom/types/Calendar";
-import { Alert } from "@calcom/ui/Alert";
-import { Select, SettingsToggle } from "@calcom/ui/v2";
+import { Alert, Select, SettingsToggle } from "@calcom/ui";
 
 type RecurringEventControllerProps = {
   recurringEvent: RecurringEvent | null;
diff --git a/apps/web/components/eventtype/SkeletonLoader.tsx b/apps/web/components/eventtype/SkeletonLoader.tsx
index 7ddaf6bc85..8bebbd5405 100644
--- a/apps/web/components/eventtype/SkeletonLoader.tsx
+++ b/apps/web/components/eventtype/SkeletonLoader.tsx
@@ -1,5 +1,4 @@
-import { Icon } from "@calcom/ui/Icon";
-import { SkeletonAvatar, SkeletonContainer, SkeletonText } from "@calcom/ui/v2";
+import { Icon, SkeletonAvatar, SkeletonContainer, SkeletonText } from "@calcom/ui";
 
 function SkeletonLoader() {
   return (
diff --git a/apps/web/components/getting-started/components/CalendarItem.tsx b/apps/web/components/getting-started/components/CalendarItem.tsx
index 12effe2442..67f2f76994 100644
--- a/apps/web/components/getting-started/components/CalendarItem.tsx
+++ b/apps/web/components/getting-started/components/CalendarItem.tsx
@@ -1,7 +1,7 @@
 import { InstallAppButtonWithoutPlanCheck } from "@calcom/app-store/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { App } from "@calcom/types/App";
-import { Button } from "@calcom/ui/components/button";
+import { Button } from "@calcom/ui";
 
 interface ICalendarItem {
   title: string;
diff --git a/apps/web/components/getting-started/components/CalendarSwitch.tsx b/apps/web/components/getting-started/components/CalendarSwitch.tsx
index 2fe0c20ef7..e067c5f44d 100644
--- a/apps/web/components/getting-started/components/CalendarSwitch.tsx
+++ b/apps/web/components/getting-started/components/CalendarSwitch.tsx
@@ -1,8 +1,7 @@
 import { useMutation } from "@tanstack/react-query";
 
 import { trpc } from "@calcom/trpc/react";
-import { Switch } from "@calcom/ui/v2";
-import showToast from "@calcom/ui/v2/core/notifications";
+import { showToast, Switch } from "@calcom/ui";
 
 import classNames from "@lib/classNames";
 
diff --git a/apps/web/components/getting-started/steps-views/ConnectCalendars.tsx b/apps/web/components/getting-started/steps-views/ConnectCalendars.tsx
index 7b25b76bdd..41158b521c 100644
--- a/apps/web/components/getting-started/steps-views/ConnectCalendars.tsx
+++ b/apps/web/components/getting-started/steps-views/ConnectCalendars.tsx
@@ -3,8 +3,7 @@ import { ArrowRightIcon } from "@heroicons/react/solid";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { List } from "@calcom/ui/List";
-import { SkeletonAvatar, SkeletonText, SkeletonButton } from "@calcom/ui/v2";
+import { SkeletonAvatar, SkeletonText, SkeletonButton, List } from "@calcom/ui";
 
 import { CalendarItem } from "../components/CalendarItem";
 import { ConnectedCalendarItem } from "../components/ConnectedCalendarItem";
diff --git a/apps/web/components/getting-started/steps-views/SetupAvailability.tsx b/apps/web/components/getting-started/steps-views/SetupAvailability.tsx
index 0038f6e290..25cac4fe45 100644
--- a/apps/web/components/getting-started/steps-views/SetupAvailability.tsx
+++ b/apps/web/components/getting-started/steps-views/SetupAvailability.tsx
@@ -7,8 +7,7 @@ import { DEFAULT_SCHEDULE } from "@calcom/lib/availability";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc, TRPCClientErrorLike } from "@calcom/trpc/react";
 import { AppRouter } from "@calcom/trpc/server/routers/_app";
-import { Button } from "@calcom/ui/components/button";
-import { Form } from "@calcom/ui/form/fields";
+import { Button, Form } from "@calcom/ui";
 
 interface ISetupAvailabilityProps {
   nextStep: () => void;
diff --git a/apps/web/components/getting-started/steps-views/UserProfile.tsx b/apps/web/components/getting-started/steps-views/UserProfile.tsx
index 8454474591..e90e5f7e8b 100644
--- a/apps/web/components/getting-started/steps-views/UserProfile.tsx
+++ b/apps/web/components/getting-started/steps-views/UserProfile.tsx
@@ -6,10 +6,7 @@ import { useForm } from "react-hook-form";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { User } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
-import { Button } from "@calcom/ui/components";
-import { TextArea } from "@calcom/ui/components/form";
-import { showToast } from "@calcom/ui/v2";
-import ImageUploader from "@calcom/ui/v2/core/ImageUploader";
+import { Button, ImageUploader, showToast, TextArea } from "@calcom/ui";
 
 import { AvatarSSR } from "@components/ui/AvatarSSR";
 
diff --git a/apps/web/components/getting-started/steps-views/UserSettings.tsx b/apps/web/components/getting-started/steps-views/UserSettings.tsx
index e6ea505dfe..ce524fd796 100644
--- a/apps/web/components/getting-started/steps-views/UserSettings.tsx
+++ b/apps/web/components/getting-started/steps-views/UserSettings.tsx
@@ -1,13 +1,12 @@
 import { ArrowRightIcon } from "@heroicons/react/outline";
-import { useRef, useState } from "react";
+import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 
 import dayjs from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { User } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
-import { Button } from "@calcom/ui/components/button";
-import TimezoneSelect from "@calcom/ui/form/TimezoneSelect";
+import { Button, TimezoneSelect } from "@calcom/ui";
 
 import { UsernameAvailability } from "@components/ui/UsernameAvailability";
 
diff --git a/apps/web/components/integrations/CalendarListContainer.tsx b/apps/web/components/integrations/CalendarListContainer.tsx
deleted file mode 100644
index 60c3d4c55b..0000000000
--- a/apps/web/components/integrations/CalendarListContainer.tsx
+++ /dev/null
@@ -1,293 +0,0 @@
-import { useMutation } from "@tanstack/react-query";
-import { Fragment } from "react";
-
-import { InstallAppButton } from "@calcom/app-store/components";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { RouterOutputs, trpc } from "@calcom/trpc/react";
-import { Alert } from "@calcom/ui/Alert";
-import { List } from "@calcom/ui/List";
-import { ShellSubHeading } from "@calcom/ui/Shell";
-import Switch from "@calcom/ui/Switch";
-import SkeletonLoader from "@calcom/ui/apps/SkeletonLoader";
-import { Button } from "@calcom/ui/components/button";
-import showToast from "@calcom/ui/v2/core/notifications";
-
-import { QueryCell } from "@lib/QueryCell";
-
-import AdditionalCalendarSelector from "@components/AdditionalCalendarSelector";
-import DestinationCalendarSelector from "@components/DestinationCalendarSelector";
-
-import DisconnectIntegration from "./DisconnectIntegration";
-import IntegrationListItem from "./IntegrationListItem";
-import SubHeadingTitleWithConnections from "./SubHeadingTitleWithConnections";
-
-type Props = {
-  onChanged: () => unknown | Promise<unknown>;
-  fromOnboarding?: boolean;
-};
-
-function CalendarSwitch(props: {
-  type: string;
-  externalId: string;
-  title: string;
-  defaultSelected: boolean;
-}) {
-  const utils = trpc.useContext();
-
-  const mutation = useMutation<
-    unknown,
-    unknown,
-    {
-      isOn: boolean;
-    }
-  >(
-    async ({ isOn }) => {
-      const body = {
-        integration: props.type,
-        externalId: props.externalId,
-      };
-      if (isOn) {
-        const res = await fetch("/api/availability/calendar", {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify(body),
-        });
-        if (!res.ok) {
-          throw new Error("Something went wrong");
-        }
-      } else {
-        const res = await fetch("/api/availability/calendar", {
-          method: "DELETE",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify(body),
-        });
-
-        if (!res.ok) {
-          throw new Error("Something went wrong");
-        }
-      }
-    },
-    {
-      async onSettled() {
-        await utils.viewer.integrations.invalidate();
-      },
-      onError() {
-        showToast(`Something went wrong when toggling "${props.title}""`, "error");
-      },
-    }
-  );
-  return (
-    <div className="py-1">
-      <Switch
-        key={props.externalId}
-        name="enabled"
-        label={props.title}
-        defaultChecked={props.defaultSelected}
-        onCheckedChange={(isOn: boolean) => {
-          mutation.mutate({ isOn });
-        }}
-      />
-    </div>
-  );
-}
-
-function CalendarList(props: Props) {
-  const { t } = useLocale();
-  const query = trpc.viewer.integrations.useQuery({ variant: "calendar", onlyInstalled: false });
-
-  return (
-    <QueryCell
-      query={query}
-      success={({ data }) => (
-        <List>
-          {data.items.map((item) => (
-            <IntegrationListItem
-              name={item.name}
-              slug={item.slug}
-              key={item.title}
-              title={item.title}
-              logo={item.logo}
-              description={item.description}
-              actions={
-                <InstallAppButton
-                  type={item.type}
-                  render={(buttonProps) => (
-                    <Button color="secondary" {...buttonProps}>
-                      {t("connect")}
-                    </Button>
-                  )}
-                  onChanged={() => props.onChanged()}
-                />
-              }
-            />
-          ))}
-        </List>
-      )}
-    />
-  );
-}
-
-function ConnectedCalendarsList(props: Props) {
-  const { t } = useLocale();
-  const query = trpc.viewer.connectedCalendars.useQuery(undefined, {
-    suspense: true,
-    trpc: {},
-  });
-  const { fromOnboarding } = props;
-  return (
-    <QueryCell
-      query={query}
-      empty={() => null}
-      success={({ data }) => {
-        if (!data.connectedCalendars.length) {
-          return null;
-        }
-        return (
-          <List>
-            {data.connectedCalendars.map((item) => (
-              <Fragment key={item.credentialId}>
-                {item.calendars ? (
-                  <IntegrationListItem
-                    slug={item.integration.slug}
-                    title={item.integration.title}
-                    logo={item.integration.logo}
-                    description={item.primary?.externalId || "No external Id"}
-                    actions={
-                      <DisconnectIntegration
-                        id={item.credentialId}
-                        externalId={item.primary?.externalId}
-                        render={(btnProps) => (
-                          <Button {...btnProps} color="secondary" data-testid="integration-connection-button">
-                            {t("disconnect")}
-                          </Button>
-                        )}
-                        onOpenChange={props.onChanged}
-                      />
-                    }>
-                    {!fromOnboarding && (
-                      <>
-                        <p className="px-4 pt-4 text-sm text-neutral-500">{t("toggle_calendars_conflict")}</p>
-                        <ul className="space-y-2 p-4">
-                          {item.calendars.map((cal) => (
-                            <CalendarSwitch
-                              key={cal.externalId}
-                              externalId={cal.externalId}
-                              title={cal.name || "Nameless calendar"}
-                              type={item.integration.type}
-                              defaultSelected={cal.isSelected}
-                            />
-                          ))}
-                        </ul>
-                      </>
-                    )}
-                  </IntegrationListItem>
-                ) : (
-                  <Alert
-                    severity="warning"
-                    title={t("something_went_wrong")}
-                    message={t("calendar_error")}
-                    actions={
-                      <DisconnectIntegration
-                        id={item.credentialId}
-                        render={(btnProps) => (
-                          <Button {...btnProps} color="secondary" data-testid="integration-connection-button">
-                            Disconnect
-                          </Button>
-                        )}
-                        onOpenChange={() => props.onChanged()}
-                      />
-                    }
-                  />
-                )}
-              </Fragment>
-            ))}
-          </List>
-        );
-      }}
-    />
-  );
-}
-
-export function CalendarListContainer(props: {
-  heading?: boolean;
-  items?: RouterOutputs["viewer"]["integrations"]["items"];
-  fromOnboarding?: boolean;
-}) {
-  const { t } = useLocale();
-  const { heading = true, fromOnboarding } = props;
-  const utils = trpc.useContext();
-  const onChanged = () =>
-    Promise.allSettled([
-      utils.viewer.integrations.invalidate(
-        { variant: "calendar", onlyInstalled: true },
-        {
-          exact: true,
-        }
-      ),
-      utils.viewer.connectedCalendars.invalidate(),
-    ]);
-  const query = trpc.viewer.connectedCalendars.useQuery();
-  const installedCalendars = trpc.viewer.integrations.useQuery({ variant: "calendar", onlyInstalled: true });
-  const mutation = trpc.viewer.setDestinationCalendar.useMutation();
-  return (
-    <QueryCell
-      query={query}
-      customLoader={<SkeletonLoader className="mt-10" />}
-      success={({ data }) => {
-        return (
-          <>
-            {(!!data.connectedCalendars.length || !!installedCalendars.data?.items.length) && (
-              <>
-                {heading && (
-                  <ShellSubHeading
-                    className="mt-10 mb-0"
-                    title={
-                      <SubHeadingTitleWithConnections
-                        title="Calendars"
-                        numConnections={data.connectedCalendars.length}
-                      />
-                    }
-                    subtitle={t("configure_how_your_event_types_interact")}
-                    actions={
-                      <div className="flex flex-col xl:flex-row xl:space-x-5">
-                        <div className="sm:min-w-80 block max-w-full">
-                          <DestinationCalendarSelector
-                            onChange={mutation.mutate}
-                            isLoading={mutation.isLoading}
-                            value={data.destinationCalendar?.externalId}
-                          />
-                        </div>
-
-                        {!!data.connectedCalendars.length && (
-                          <div className="sm:min-w-80 inline max-w-full">
-                            <AdditionalCalendarSelector isLoading={mutation.isLoading} />
-                          </div>
-                        )}
-                      </div>
-                    }
-                  />
-                )}
-                <ConnectedCalendarsList onChanged={onChanged} fromOnboarding={fromOnboarding} />
-              </>
-            )}
-            {fromOnboarding && (
-              <>
-                {!!query.data?.connectedCalendars.length && (
-                  <ShellSubHeading
-                    className="mt-4"
-                    title={<SubHeadingTitleWithConnections title={t("connect_additional_calendar")} />}
-                  />
-                )}
-                <CalendarList onChanged={onChanged} />
-              </>
-            )}
-          </>
-        );
-      }}
-    />
-  );
-}
diff --git a/apps/web/components/integrations/DisconnectIntegration.tsx b/apps/web/components/integrations/DisconnectIntegration.tsx
deleted file mode 100644
index bffa40e32c..0000000000
--- a/apps/web/components/integrations/DisconnectIntegration.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { useState } from "react";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { trpc } from "@calcom/trpc/react";
-import ConfirmationDialogContent from "@calcom/ui/ConfirmationDialogContent";
-import { Dialog } from "@calcom/ui/Dialog";
-import { ButtonProps } from "@calcom/ui/components/button";
-import showToast from "@calcom/ui/v2/core/notifications";
-
-export default function DisconnectIntegration(props: {
-  /** Integration credential id */
-  id: number;
-  externalId?: string;
-  render: (renderProps: ButtonProps) => JSX.Element;
-  onOpenChange: (isOpen: boolean) => unknown | Promise<unknown>;
-}) {
-  const { id, externalId = "" } = props;
-  const { t } = useLocale();
-  const [modalOpen, setModalOpen] = useState(false);
-
-  const mutation = trpc.viewer.deleteCredential.useMutation({
-    onSettled: async () => {
-      await props.onOpenChange(modalOpen);
-    },
-    onSuccess: () => {
-      showToast("Integration deleted successfully", "success");
-      setModalOpen(false);
-    },
-    onError: () => {
-      throw new Error("Something went wrong");
-    },
-  });
-
-  return (
-    <>
-      <Dialog open={modalOpen} onOpenChange={setModalOpen}>
-        <ConfirmationDialogContent
-          variety="danger"
-          title={t("remove_app")}
-          confirmBtnText={t("yes_remove_app")}
-          cancelBtnText="Cancel"
-          onConfirm={() => {
-            mutation.mutate({ id, externalId });
-          }}>
-          {t("are_you_sure_you_want_to_remove_this_app")}
-        </ConfirmationDialogContent>
-      </Dialog>
-      {props.render({
-        onClick() {
-          setModalOpen(true);
-        },
-        disabled: modalOpen,
-        loading: mutation.isLoading,
-      })}
-    </>
-  );
-}
diff --git a/apps/web/components/integrations/IntegrationListItem.tsx b/apps/web/components/integrations/IntegrationListItem.tsx
deleted file mode 100644
index 2b29c6c32f..0000000000
--- a/apps/web/components/integrations/IntegrationListItem.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import Link from "next/link";
-import { ReactNode } from "react";
-
-import { ListItem, ListItemText, ListItemTitle } from "@calcom/ui/List";
-
-import classNames from "@lib/classNames";
-
-function IntegrationListItem(props: {
-  imageSrc?: string;
-  slug: string;
-  name?: string;
-  title?: string;
-  description: string;
-  actions?: ReactNode;
-  children?: ReactNode;
-  logo: string;
-}): JSX.Element {
-  const title = props.name || props.title;
-  return (
-    <ListItem expanded={!!props.children} className={classNames("flex-col")}>
-      <div className={classNames("flex w-full flex-1 items-center space-x-2 p-3 rtl:space-x-reverse")}>
-        {
-          // eslint-disable-next-line @next/next/no-img-element
-          props.logo && <img className="h-10 w-10" src={props.logo} alt={title} />
-        }
-        <div className="flex-grow truncate pl-2">
-          <ListItemTitle component="h3">
-            <Link href={"/apps/" + props.slug}>{props.name || title}</Link>
-          </ListItemTitle>
-          <ListItemText component="p">{props.description}</ListItemText>
-        </div>
-        <div>{props.actions}</div>
-      </div>
-      {props.children && <div className="w-full border-t border-gray-200">{props.children}</div>}
-    </ListItem>
-  );
-}
-
-export default IntegrationListItem;
diff --git a/apps/web/components/integrations/SubHeadingTitleWithConnections.tsx b/apps/web/components/integrations/SubHeadingTitleWithConnections.tsx
index 8effb21250..44178c6aa5 100644
--- a/apps/web/components/integrations/SubHeadingTitleWithConnections.tsx
+++ b/apps/web/components/integrations/SubHeadingTitleWithConnections.tsx
@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 
-import { Badge } from "@calcom/ui/components/badge";
+import { Badge } from "@calcom/ui";
 
 function pluralize(opts: { num: number; plural: string; singular: string }) {
   if (opts.num === 0) {
diff --git a/apps/web/components/pages/eventtypes/CustomInputTypeForm.tsx b/apps/web/components/pages/eventtypes/CustomInputTypeForm.tsx
index 063f84b613..b342c279d7 100644
--- a/apps/web/components/pages/eventtypes/CustomInputTypeForm.tsx
+++ b/apps/web/components/pages/eventtypes/CustomInputTypeForm.tsx
@@ -2,7 +2,7 @@ import { EventTypeCustomInput, EventTypeCustomInputType } from "@prisma/client";
 import React, { FC } from "react";
 import { Controller, SubmitHandler, useForm, useWatch } from "react-hook-form";
 
-import Button from "@calcom/ui/Button";
+import { Button } from "@calcom/ui";
 
 import { useLocale } from "@lib/hooks/useLocale";
 
diff --git a/apps/web/components/security/ChangePasswordSection.tsx b/apps/web/components/security/ChangePasswordSection.tsx
index 1e01411cea..93cfce7e2e 100644
--- a/apps/web/components/security/ChangePasswordSection.tsx
+++ b/apps/web/components/security/ChangePasswordSection.tsx
@@ -1,9 +1,8 @@
-import React, { SyntheticEvent, useState } from "react";
+import { SyntheticEvent, useState } from "react";
 
 import { ErrorCode } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import Button from "@calcom/ui/Button";
-import showToast from "@calcom/ui/v2/core/notifications";
+import { Button, showToast } from "@calcom/ui";
 
 const ChangePasswordSection = () => {
   const [oldPassword, setOldPassword] = useState("");
diff --git a/apps/web/components/security/DisableTwoFactorModal.tsx b/apps/web/components/security/DisableTwoFactorModal.tsx
index d4923fdd37..0a43f027a2 100644
--- a/apps/web/components/security/DisableTwoFactorModal.tsx
+++ b/apps/web/components/security/DisableTwoFactorModal.tsx
@@ -3,10 +3,7 @@ import { useForm } from "react-hook-form";
 
 import { ErrorCode } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import Button from "@calcom/ui/Button";
-import { Dialog, DialogContent } from "@calcom/ui/Dialog";
-import { PasswordField } from "@calcom/ui/components/form";
-import { Form, Label } from "@calcom/ui/form/fields";
+import { Button, Dialog, DialogContent, Form, Label, PasswordField } from "@calcom/ui";
 
 import TwoFactor from "@components/auth/TwoFactor";
 
diff --git a/apps/web/components/security/DisableUserImpersonation.tsx b/apps/web/components/security/DisableUserImpersonation.tsx
index 2c0cf604d2..fcb540e8d2 100644
--- a/apps/web/components/security/DisableUserImpersonation.tsx
+++ b/apps/web/components/security/DisableUserImpersonation.tsx
@@ -1,8 +1,6 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import Button from "@calcom/ui/Button";
-import { Badge } from "@calcom/ui/components/badge";
-import showToast from "@calcom/ui/v2/core/notifications";
+import { Badge, Button, showToast } from "@calcom/ui";
 
 const DisableUserImpersonation = ({ disableImpersonation }: { disableImpersonation: boolean }) => {
   const utils = trpc.useContext();
diff --git a/apps/web/components/security/EnableTwoFactorModal.tsx b/apps/web/components/security/EnableTwoFactorModal.tsx
index 653f575b46..9514da1535 100644
--- a/apps/web/components/security/EnableTwoFactorModal.tsx
+++ b/apps/web/components/security/EnableTwoFactorModal.tsx
@@ -3,9 +3,7 @@ import { useForm } from "react-hook-form";
 
 import { ErrorCode } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import Button from "@calcom/ui/Button";
-import { Dialog, DialogContent } from "@calcom/ui/Dialog";
-import { Form } from "@calcom/ui/components/form";
+import { Button, Dialog, DialogContent, Form } from "@calcom/ui";
 
 import TwoFactor from "@components/auth/TwoFactor";
 
diff --git a/apps/web/components/security/TwoFactorAuthSection.tsx b/apps/web/components/security/TwoFactorAuthSection.tsx
index a48550fae9..c53feff3bf 100644
--- a/apps/web/components/security/TwoFactorAuthSection.tsx
+++ b/apps/web/components/security/TwoFactorAuthSection.tsx
@@ -1,7 +1,6 @@
 import { useState } from "react";
 
-import Button from "@calcom/ui/Button";
-import { Badge } from "@calcom/ui/components/badge";
+import { Badge, Button } from "@calcom/ui";
 
 import { useLocale } from "@lib/hooks/useLocale";
 
diff --git a/apps/web/components/security/TwoFactorModalHeader.tsx b/apps/web/components/security/TwoFactorModalHeader.tsx
index 1df439cc74..44c251b7a3 100644
--- a/apps/web/components/security/TwoFactorModalHeader.tsx
+++ b/apps/web/components/security/TwoFactorModalHeader.tsx
@@ -1,6 +1,4 @@
-import React from "react";
-
-import { ShieldCheckIcon } from "@calcom/ui/Icon";
+import { ShieldCheckIcon } from "@calcom/ui";
 
 const TwoFactorModalHeader = ({ title, description }: { title: string; description: string }) => {
   return (
diff --git a/apps/web/components/settings/CalendarSwitch.tsx b/apps/web/components/settings/CalendarSwitch.tsx
index 9110f98922..70b90d6d02 100644
--- a/apps/web/components/settings/CalendarSwitch.tsx
+++ b/apps/web/components/settings/CalendarSwitch.tsx
@@ -2,10 +2,7 @@ import { useMutation } from "@tanstack/react-query";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui";
-import { Badge } from "@calcom/ui/components/badge";
-import Switch from "@calcom/ui/v2/core/Switch";
-import showToast from "@calcom/ui/v2/core/notifications";
+import { Badge, Icon, showToast, Switch } from "@calcom/ui";
 
 export function CalendarSwitch(props: {
   type: string;
diff --git a/apps/web/components/settings/DisableTwoFactorModal.tsx b/apps/web/components/settings/DisableTwoFactorModal.tsx
index 1a1a68d352..809059ac97 100644
--- a/apps/web/components/settings/DisableTwoFactorModal.tsx
+++ b/apps/web/components/settings/DisableTwoFactorModal.tsx
@@ -3,10 +3,7 @@ import { useForm } from "react-hook-form";
 
 import { ErrorCode } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button } from "@calcom/ui/components/button";
-import { Form, Label } from "@calcom/ui/components/form";
-import { PasswordField } from "@calcom/ui/components/form";
-import { Dialog, DialogContent } from "@calcom/ui/v2/core/Dialog";
+import { Button, Dialog, DialogContent, Form, Label, PasswordField } from "@calcom/ui";
 
 import TwoFactor from "@components/auth/TwoFactor";
 
diff --git a/apps/web/components/settings/EnableTwoFactorModal.tsx b/apps/web/components/settings/EnableTwoFactorModal.tsx
index d094720fc2..7f3f9f1b8d 100644
--- a/apps/web/components/settings/EnableTwoFactorModal.tsx
+++ b/apps/web/components/settings/EnableTwoFactorModal.tsx
@@ -3,9 +3,7 @@ import { useForm } from "react-hook-form";
 
 import { ErrorCode } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button } from "@calcom/ui/components/button";
-import { Form, TextField } from "@calcom/ui/components/form";
-import { Dialog, DialogContent } from "@calcom/ui/v2/core/Dialog";
+import { Button, Dialog, DialogContent, Form, TextField } from "@calcom/ui";
 
 import TwoFactor from "@components/auth/TwoFactor";
 
diff --git a/apps/web/components/team/TeamSettings.tsx b/apps/web/components/team/TeamSettings.tsx
index 1ecdf6709f..bebb0fbdb2 100644
--- a/apps/web/components/team/TeamSettings.tsx
+++ b/apps/web/components/team/TeamSettings.tsx
@@ -4,11 +4,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { objectKeys } from "@calcom/lib/objectKeys";
 import { TeamWithMembers } from "@calcom/lib/server/queries/teams";
 import { trpc } from "@calcom/trpc/react";
-import { Alert } from "@calcom/ui/Alert";
-import Button from "@calcom/ui/Button";
-import { Icon } from "@calcom/ui/Icon";
-import { TextField } from "@calcom/ui/form/fields";
-import showToast from "@calcom/ui/v2/core/notifications";
+import { Alert, Button, Icon, showToast, TextField } from "@calcom/ui";
 
 import ImageUploader from "@components/ImageUploader";
 import SettingInputContainer from "@components/ui/SettingInputContainer";
diff --git a/apps/web/components/team/TeamSettingsRightSidebar.tsx b/apps/web/components/team/TeamSettingsRightSidebar.tsx
index 38acac4189..18742a5f95 100644
--- a/apps/web/components/team/TeamSettingsRightSidebar.tsx
+++ b/apps/web/components/team/TeamSettingsRightSidebar.tsx
@@ -1,14 +1,10 @@
 import { MembershipRole } from "@prisma/client";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import React from "react";
 
 import { TeamWithMembers } from "@calcom/lib/server/queries/teams";
 import { trpc } from "@calcom/trpc/react";
-import ConfirmationDialogContent from "@calcom/ui/ConfirmationDialogContent";
-import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
-import { Icon } from "@calcom/ui/Icon";
-import showToast from "@calcom/ui/v2/core/notifications";
+import { ConfirmationDialogContent, Dialog, DialogTrigger, Icon, showToast } from "@calcom/ui";
 
 import { useLocale } from "@lib/hooks/useLocale";
 
diff --git a/apps/web/components/team/screens/Team.tsx b/apps/web/components/team/screens/Team.tsx
index 9a32b05d57..c03d6a50aa 100644
--- a/apps/web/components/team/screens/Team.tsx
+++ b/apps/web/components/team/screens/Team.tsx
@@ -2,7 +2,7 @@ import Link from "next/link";
 import { TeamPageProps } from "pages/team/[slug]";
 
 import { WEBAPP_URL } from "@calcom/lib/constants";
-import { Avatar } from "@calcom/ui/components";
+import { Avatar } from "@calcom/ui";
 
 import { useLocale } from "@lib/hooks/useLocale";
 
diff --git a/apps/web/components/ui/EditableHeading.tsx b/apps/web/components/ui/EditableHeading.tsx
index f55dd6f4e5..57b723f1c7 100644
--- a/apps/web/components/ui/EditableHeading.tsx
+++ b/apps/web/components/ui/EditableHeading.tsx
@@ -2,7 +2,7 @@ import classNames from "classnames";
 import React, { useState } from "react";
 import { ControllerRenderProps } from "react-hook-form";
 
-import { Icon } from "@calcom/ui/Icon";
+import { Icon } from "@calcom/ui";
 
 const EditableHeading = function EditableHeading({
   value,
diff --git a/apps/web/components/ui/InfoBadge.tsx b/apps/web/components/ui/InfoBadge.tsx
index 63e3d42eb7..f5b9577350 100644
--- a/apps/web/components/ui/InfoBadge.tsx
+++ b/apps/web/components/ui/InfoBadge.tsx
@@ -1,5 +1,4 @@
-import { Icon } from "@calcom/ui/Icon";
-import { Tooltip } from "@calcom/ui/Tooltip";
+import { Icon, Tooltip } from "@calcom/ui";
 
 export default function InfoBadge({ content }: { content: string }) {
   return (
diff --git a/apps/web/components/ui/ModalContainer.tsx b/apps/web/components/ui/ModalContainer.tsx
index 4577b11656..03d061fc11 100644
--- a/apps/web/components/ui/ModalContainer.tsx
+++ b/apps/web/components/ui/ModalContainer.tsx
@@ -1,7 +1,7 @@
 import classNames from "classnames";
 import React, { PropsWithChildren } from "react";
 
-import { Dialog, DialogContent } from "@calcom/ui/Dialog";
+import { Dialog, DialogContent } from "@calcom/ui";
 
 export default function ModalContainer(
   props: PropsWithChildren<{
diff --git a/apps/web/components/ui/NoCalendarConnectedAlert/__tests__/NoCalendarConnectedAlert.test.tsx b/apps/web/components/ui/NoCalendarConnectedAlert/__tests__/NoCalendarConnectedAlert.test.tsx
deleted file mode 100644
index 60390a4253..0000000000
--- a/apps/web/components/ui/NoCalendarConnectedAlert/__tests__/NoCalendarConnectedAlert.test.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { cleanup, screen, render } from "@testing-library/react";
-
-import { trpc } from "@calcom/trpc/react";
-
-import NoCalendarConnectedAlert from "..";
-
-// TODO: useQuery mock is not working
-describe.skip("Testing NoCalendarConnectedAlert", () => {
-  describe("Render test", () => {
-    it("should render without crashing", () => {
-      // Disabled as its asking for full trpc useQuery response
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      jest.spyOn(trpc, "useQuery").mockReturnValue({
-        isSuccess: true,
-        isFetched: true,
-        data: { connectedCalendars: [], destinationCalendar: undefined },
-      });
-      render(<NoCalendarConnectedAlert />);
-
-      const testProp = screen.getByText("missing_connected_calendar");
-      expect(testProp).toBeTruthy();
-    });
-
-    it("should not render", () => {
-      // Disabled as its asking for full trpc useQuery response
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      jest.spyOn(trpc, "useQuery").mockReturnValue({
-        isSuccess: true,
-        isFetched: true,
-        data: { connectedCalendars: [1, 2], destinationCalendar: { a: "test" } },
-      });
-      render(<NoCalendarConnectedAlert />);
-
-      expect(screen.queryByText("missing_connected_calendar")).toBeNull();
-    });
-
-    afterEach(cleanup);
-  });
-});
diff --git a/apps/web/components/ui/NoCalendarConnectedAlert/index.tsx b/apps/web/components/ui/NoCalendarConnectedAlert/index.tsx
deleted file mode 100644
index 3da363b859..0000000000
--- a/apps/web/components/ui/NoCalendarConnectedAlert/index.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { useTranslation } from "next-i18next";
-import { Trans } from "next-i18next";
-
-import { trpc } from "@calcom/trpc/react";
-// @TODO: alert v2
-import { Alert } from "@calcom/ui/Alert";
-
-import { LinkText } from "../LinkText";
-
-const NoCalendarConnectedAlert = () => {
-  const { t } = useTranslation();
-
-  const query = trpc.viewer.connectedCalendars.useQuery();
-  // We are not gonna show this alert till we fetch data from DB
-  let defaultCalendarConnected = true;
-  if (query.isSuccess && query.isFetched && query.data) {
-    defaultCalendarConnected =
-      query.data.connectedCalendars.length > 0 && query.data.destinationCalendar !== undefined;
-  }
-  return (
-    <>
-      {!defaultCalendarConnected && (
-        <Alert
-          severity="warning"
-          className="mb-4"
-          title={<>{t("missing_connected_calendar") as string}</>}
-          message={
-            <Trans i18nKey="connect_your_calendar_and_link">
-              You can connect your calendar from
-              <LinkText
-                data-testid="no-calendar-connected-alert"
-                href="/apps/categories/calendar"
-                classNameChildren="underline">
-                here
-              </LinkText>
-              .
-            </Trans>
-          }
-        />
-      )}
-    </>
-  );
-};
-export default NoCalendarConnectedAlert;
diff --git a/apps/web/components/ui/TableActions.tsx b/apps/web/components/ui/TableActions.tsx
index e29a9d6447..08352a8254 100644
--- a/apps/web/components/ui/TableActions.tsx
+++ b/apps/web/components/ui/TableActions.tsx
@@ -1,13 +1,14 @@
 import React, { FC } from "react";
 
-import Dropdown, {
+import {
+  Button,
+  Dropdown,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuTrigger,
   DropdownMenuPortal,
-} from "@calcom/ui/Dropdown";
-import { Icon } from "@calcom/ui/Icon";
-import { Button } from "@calcom/ui/components/button";
+  DropdownMenuTrigger,
+  Icon,
+} from "@calcom/ui";
 
 import { SVGComponent } from "@lib/types/SVGComponent";
 
diff --git a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
index 40277e66ba..08030ad41c 100644
--- a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
+++ b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
@@ -1,7 +1,7 @@
 import classNames from "classnames";
 import { debounce, noop } from "lodash";
 import { useRouter } from "next/router";
-import { RefCallback, useMemo, useEffect, useState } from "react";
+import { RefCallback, useEffect, useMemo, useState } from "react";
 
 import { getPremiumPlanMode, getPremiumPlanPriceValue } from "@calcom/app-store/stripepayment/lib/utils";
 import { fetchUsername } from "@calcom/lib/fetchUsername";
@@ -11,10 +11,17 @@ import { User } from "@calcom/prisma/client";
 import { TRPCClientErrorLike } from "@calcom/trpc/client";
 import { RouterOutputs, trpc } from "@calcom/trpc/react";
 import type { AppRouter } from "@calcom/trpc/server/routers/_app";
-import { Dialog, DialogClose, DialogContent, DialogHeader } from "@calcom/ui/Dialog";
-import { Icon, StarIconSolid } from "@calcom/ui/Icon";
-import { Button } from "@calcom/ui/components/button";
-import { Input, Label } from "@calcom/ui/components/form";
+import {
+  Button,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  Icon,
+  Input,
+  Label,
+  StarIconSolid,
+} from "@calcom/ui";
 
 export enum UsernameChangeStatusEnum {
   NORMAL = "NORMAL",
diff --git a/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx b/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
index 1e1502612b..4007eba87f 100644
--- a/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
+++ b/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
@@ -7,9 +7,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { TRPCClientErrorLike } from "@calcom/trpc/client";
 import { trpc } from "@calcom/trpc/react";
 import { AppRouter } from "@calcom/trpc/server/routers/_app";
-import { Dialog, DialogClose, DialogContent, DialogHeader } from "@calcom/ui/Dialog";
-import { Icon } from "@calcom/ui/Icon";
-import { Button, Input, Label } from "@calcom/ui/components";
+import { Button, Dialog, DialogClose, DialogContent, DialogHeader, Icon, Input, Label } from "@calcom/ui";
 
 interface ICustomUsernameProps {
   currentUsername: string | undefined;
diff --git a/apps/web/components/ui/colorpicker.tsx b/apps/web/components/ui/colorpicker.tsx
index 32f28e2793..214ed6a6f8 100644
--- a/apps/web/components/ui/colorpicker.tsx
+++ b/apps/web/components/ui/colorpicker.tsx
@@ -3,7 +3,7 @@ import { useEffect } from "react";
 import { HexColorInput, HexColorPicker } from "react-colorful";
 
 import { isValidHexCode, fallBackHex } from "@calcom/lib/CustomBranding";
-import { Swatch } from "@calcom/ui/v2";
+import { Swatch } from "@calcom/ui";
 
 type Handler = (event: MouseEvent | Event) => void;
 function useEventListener<
diff --git a/apps/web/components/ui/form/CheckedSelect.tsx b/apps/web/components/ui/form/CheckedSelect.tsx
index 95fe2232d0..793dac55a8 100644
--- a/apps/web/components/ui/form/CheckedSelect.tsx
+++ b/apps/web/components/ui/form/CheckedSelect.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { Props } from "react-select";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui/Icon";
+import { Icon } from "@calcom/ui";
 
 import Avatar from "@components/ui/Avatar";
 import Select from "@components/ui/form/Select";
diff --git a/apps/web/components/ui/form/DatePicker.tsx b/apps/web/components/ui/form/DatePicker.tsx
index d4a2dbccd7..3992ff8e9e 100644
--- a/apps/web/components/ui/form/DatePicker.tsx
+++ b/apps/web/components/ui/form/DatePicker.tsx
@@ -3,7 +3,7 @@ import "react-calendar/dist/Calendar.css";
 import "react-date-picker/dist/DatePicker.css";
 import PrimitiveDatePicker from "react-date-picker/dist/entry.nostyle";
 
-import { Icon } from "@calcom/ui/Icon";
+import { Icon } from "@calcom/ui";
 
 import classNames from "@lib/classNames";
 
diff --git a/apps/web/components/ui/form/DateRangePicker.tsx b/apps/web/components/ui/form/DateRangePicker.tsx
index b99633898e..fa36cba002 100644
--- a/apps/web/components/ui/form/DateRangePicker.tsx
+++ b/apps/web/components/ui/form/DateRangePicker.tsx
@@ -4,7 +4,7 @@ import PrimitiveDateRangePicker from "@wojtekmaj/react-daterange-picker/dist/ent
 import React from "react";
 import "react-calendar/dist/Calendar.css";
 
-import { Icon } from "@calcom/ui/Icon";
+import { Icon } from "@calcom/ui";
 
 type Props = {
   startDate: Date;
diff --git a/apps/web/components/ui/form/radio-area/Select.tsx b/apps/web/components/ui/form/radio-area/Select.tsx
index 7e67477cde..c205ddad05 100644
--- a/apps/web/components/ui/form/radio-area/Select.tsx
+++ b/apps/web/components/ui/form/radio-area/Select.tsx
@@ -1,7 +1,7 @@
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
 import React from "react";
 
-import { Icon } from "@calcom/ui/Icon";
+import { Icon } from "@calcom/ui";
 
 import classNames from "@lib/classNames";
 import { useLocale } from "@lib/hooks/useLocale";
diff --git a/apps/web/lib/QueryCell.tsx b/apps/web/lib/QueryCell.tsx
index 0b91c81cd2..fc4ea0e46c 100644
--- a/apps/web/lib/QueryCell.tsx
+++ b/apps/web/lib/QueryCell.tsx
@@ -12,8 +12,7 @@ import type { TRPCClientErrorLike } from "@calcom/trpc/client";
 import type { DecorateProcedure } from "@calcom/trpc/react/shared";
 import type { AnyQueryProcedure, inferProcedureInput, inferProcedureOutput } from "@calcom/trpc/server";
 import type { AppRouter } from "@calcom/trpc/server/routers/_app";
-import { Alert } from "@calcom/ui/Alert";
-import Loader from "@calcom/ui/Loader";
+import { Alert, Loader } from "@calcom/ui";
 
 import type { UseTRPCQueryOptions } from "@trpc/react-query/shared";
 
diff --git a/apps/web/lib/app-providers.tsx b/apps/web/lib/app-providers.tsx
index e404b94315..276a2721de 100644
--- a/apps/web/lib/app-providers.tsx
+++ b/apps/web/lib/app-providers.tsx
@@ -10,7 +10,7 @@ import { ComponentProps, ReactNode } from "react";
 import DynamicHelpscoutProvider from "@calcom/features/ee/support/lib/helpscout/providerDynamic";
 import DynamicIntercomProvider from "@calcom/features/ee/support/lib/intercom/providerDynamic";
 import { trpc } from "@calcom/trpc/react";
-import { MetaProvider } from "@calcom/ui/v2/core/Meta";
+import { MetaProvider } from "@calcom/ui";
 
 import usePublicPage from "@lib/hooks/usePublicPage";
 
diff --git a/apps/web/pages/404.tsx b/apps/web/pages/404.tsx
index 6b9edd33eb..3dd1d8428f 100644
--- a/apps/web/pages/404.tsx
+++ b/apps/web/pages/404.tsx
@@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
 
 import { DEVELOPER_DOCS, DOCS_URL, JOIN_SLACK, WEBSITE_URL } from "@calcom/lib/constants";
-import { Icon } from "@calcom/ui/Icon";
+import { Icon } from "@calcom/ui";
 
 import { useLocale } from "@lib/hooks/useLocale";
 
diff --git a/apps/web/pages/500.tsx b/apps/web/pages/500.tsx
index f92f45acae..13abf107b9 100644
--- a/apps/web/pages/500.tsx
+++ b/apps/web/pages/500.tsx
@@ -1,7 +1,7 @@
 import Head from "next/head";
 
 import { WEBSITE_URL } from "@calcom/lib/constants";
-import Button from "@calcom/ui/Button";
+import { Button } from "@calcom/ui";
 
 export default function Error500() {
   return (
diff --git a/apps/web/pages/[user].tsx b/apps/web/pages/[user].tsx
index d88e9d7a87..fda47613c9 100644
--- a/apps/web/pages/[user].tsx
+++ b/apps/web/pages/[user].tsx
@@ -1,4 +1,3 @@
-import { UserPlan } from "@prisma/client";
 import classNames from "classnames";
 import { GetServerSidePropsContext } from "next";
 import dynamic from "next/dynamic";
@@ -27,7 +26,7 @@ import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calco
 import prisma from "@calcom/prisma";
 import { baseEventTypeSelect } from "@calcom/prisma/selects";
 import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
-import { BadgeCheckIcon, Icon } from "@calcom/ui/Icon";
+import { BadgeCheckIcon, EventTypeDescriptionLazy as EventTypeDescription, Icon } from "@calcom/ui";
 
 import { useExposePlanGlobally } from "@lib/hooks/useExposePlanGlobally";
 import { inferSSRProps } from "@lib/types/inferSSRProps";
@@ -38,7 +37,6 @@ import { AvatarSSR } from "@components/ui/AvatarSSR";
 
 import { ssrInit } from "@server/lib/ssr";
 
-const EventTypeDescription = dynamic(() => import("@calcom/ui/v2/modules/event-types/EventTypeDescription"));
 const HeadSeo = dynamic(() => import("@components/seo/head-seo"));
 export default function User(props: inferSSRProps<typeof getServerSideProps> & EmbedProps) {
   const { users, profile, eventTypes, isDynamicGroup, dynamicNames, dynamicUsernames, isSingleUser } = props;
diff --git a/apps/web/pages/apps/categories/[category].tsx b/apps/web/pages/apps/categories/[category].tsx
index 966ee1d35d..a8a8dc5c46 100644
--- a/apps/web/pages/apps/categories/[category].tsx
+++ b/apps/web/pages/apps/categories/[category].tsx
@@ -6,9 +6,7 @@ import { useRouter } from "next/router";
 import { getAppRegistry } from "@calcom/app-store/_appRegistry";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import prisma from "@calcom/prisma";
-import { SkeletonText } from "@calcom/ui/v2";
-import Shell from "@calcom/ui/v2/core/Shell";
-import AppCard from "@calcom/ui/v2/core/apps/AppCard";
+import { AppCard, Shell, SkeletonText } from "@calcom/ui";
 
 export default function Apps({ apps }: InferGetStaticPropsType<typeof getStaticProps>) {
   const { t, isLocaleReady } = useLocale();
diff --git a/apps/web/pages/apps/categories/index.tsx b/apps/web/pages/apps/categories/index.tsx
index b9a5bb9726..98fe43ade3 100644
--- a/apps/web/pages/apps/categories/index.tsx
+++ b/apps/web/pages/apps/categories/index.tsx
@@ -3,9 +3,7 @@ import Link from "next/link";
 
 import { getAppRegistry } from "@calcom/app-store/_appRegistry";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui/Icon";
-import Shell from "@calcom/ui/Shell";
-import { SkeletonText } from "@calcom/ui/v2";
+import { Icon, Shell, SkeletonText } from "@calcom/ui";
 
 export default function Apps({ categories }: InferGetStaticPropsType<typeof getStaticProps>) {
   const { t, isLocaleReady } = useLocale();
diff --git a/apps/web/pages/apps/index.tsx b/apps/web/pages/apps/index.tsx
index 886fd25b28..51382a5b1a 100644
--- a/apps/web/pages/apps/index.tsx
+++ b/apps/web/pages/apps/index.tsx
@@ -4,10 +4,7 @@ import { getAppRegistry, getAppRegistryWithCredentials } from "@calcom/app-store
 import { getSession } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { AppCategories } from "@calcom/prisma/client";
-import AllApps from "@calcom/ui/v2/core/apps/AllApps";
-import AppStoreCategories from "@calcom/ui/v2/core/apps/Categories";
-import TrendingAppsSlider from "@calcom/ui/v2/core/apps/TrendingAppsSlider";
-import AppsLayout from "@calcom/ui/v2/core/layouts/AppsLayout";
+import { AllApps, AppsLayout, AppStoreCategories, TrendingAppsSlider } from "@calcom/ui";
 
 import { ssgInit } from "@server/lib/ssg";
 
diff --git a/apps/web/pages/apps/installed/[category].tsx b/apps/web/pages/apps/installed/[category].tsx
index da92ec8117..59f868d3b1 100644
--- a/apps/web/pages/apps/installed/[category].tsx
+++ b/apps/web/pages/apps/installed/[category].tsx
@@ -8,20 +8,22 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { RouterOutputs, trpc } from "@calcom/trpc/react";
 import { App } from "@calcom/types/App";
 import { AppGetServerSidePropsContext } from "@calcom/types/AppGetServerSideProps";
-import { Icon } from "@calcom/ui/Icon";
-import { Button } from "@calcom/ui/components/button";
-import { Alert } from "@calcom/ui/v2/core/Alert";
-import EmptyScreen from "@calcom/ui/v2/core/EmptyScreen";
-import { List } from "@calcom/ui/v2/core/List";
-import { ShellSubHeading } from "@calcom/ui/v2/core/Shell";
-import InstalledAppsLayout from "@calcom/ui/v2/core/layouts/InstalledAppsLayout";
-import DisconnectIntegration from "@calcom/ui/v2/modules/integrations/DisconnectIntegration";
+import {
+  Alert,
+  Button,
+  DisconnectIntegration,
+  EmptyScreen,
+  Icon,
+  InstalledAppsLayout,
+  List,
+  ShellSubHeading,
+  SkeletonLoader,
+} from "@calcom/ui";
 
 import { QueryCell } from "@lib/QueryCell";
 
 import { CalendarListContainer } from "@components/apps/CalendarListContainer";
 import IntegrationListItem from "@components/apps/IntegrationListItem";
-import SkeletonLoader from "@components/availability/SkeletonLoader";
 
 function ConnectOrDisconnectIntegrationButton(props: {
   credentialIds: number[];
diff --git a/apps/web/pages/auth/error.tsx b/apps/web/pages/auth/error.tsx
index ab4782c86f..2ebb336dc6 100644
--- a/apps/web/pages/auth/error.tsx
+++ b/apps/web/pages/auth/error.tsx
@@ -4,9 +4,7 @@ import { useRouter } from "next/router";
 import z from "zod";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import Button from "@calcom/ui/Button";
-import { Icon } from "@calcom/ui/Icon";
-import { SkeletonText } from "@calcom/ui/v2";
+import { Button, Icon, SkeletonText } from "@calcom/ui";
 
 import AuthContainer from "@components/ui/AuthContainer";
 
diff --git a/apps/web/pages/auth/forgot-password/[id].tsx b/apps/web/pages/auth/forgot-password/[id].tsx
index a48d286cfd..5b42351893 100644
--- a/apps/web/pages/auth/forgot-password/[id].tsx
+++ b/apps/web/pages/auth/forgot-password/[id].tsx
@@ -7,7 +7,7 @@ import React, { useMemo } from "react";
 
 import dayjs from "@calcom/dayjs";
 import prisma from "@calcom/prisma";
-import { Button, TextField } from "@calcom/ui/components";
+import { Button, TextField } from "@calcom/ui";
 
 import { useLocale } from "@lib/hooks/useLocale";
 
diff --git a/apps/web/pages/auth/forgot-password/index.tsx b/apps/web/pages/auth/forgot-password/index.tsx
index 7a93cfcf1c..f5f33b18e5 100644
--- a/apps/web/pages/auth/forgot-password/index.tsx
+++ b/apps/web/pages/auth/forgot-password/index.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import React, { SyntheticEvent } from "react";
 
-import { Button, EmailField } from "@calcom/ui/components";
+import { Button, EmailField } from "@calcom/ui";
 
 import { getSession } from "@lib/auth";
 import { useLocale } from "@lib/hooks/useLocale";
diff --git a/apps/web/pages/auth/login.tsx b/apps/web/pages/auth/login.tsx
index 2923122509..8a8228649c 100644
--- a/apps/web/pages/auth/login.tsx
+++ b/apps/web/pages/auth/login.tsx
@@ -4,7 +4,7 @@ import { getCsrfToken, signIn } from "next-auth/react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useState } from "react";
-import { useForm, FormProvider } from "react-hook-form";
+import { FormProvider, useForm } from "react-hook-form";
 import { FaGoogle } from "react-icons/fa";
 
 import { isSAMLLoginEnabled, samlProductID, samlTenantID } from "@calcom/features/ee/sso/lib/saml";
@@ -12,11 +12,7 @@ import { getSafeRedirectUrl } from "@calcom/lib/getSafeRedirectUrl";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import prisma from "@calcom/prisma";
-import { Icon } from "@calcom/ui";
-import { Alert } from "@calcom/ui/Alert";
-import { Button } from "@calcom/ui/components";
-import { EmailField, PasswordField } from "@calcom/ui/components/form";
-import SAMLLogin from "@calcom/ui/v2/modules/auth/SAMLLogin";
+import { Alert, Button, EmailField, Icon, PasswordField, SAMLLogin } from "@calcom/ui";
 
 import { ErrorCode, getSession } from "@lib/auth";
 import { WEBAPP_URL, WEBSITE_URL } from "@lib/config/constants";
diff --git a/apps/web/pages/auth/logout.tsx b/apps/web/pages/auth/logout.tsx
index f822092768..95038fc8f7 100644
--- a/apps/web/pages/auth/logout.tsx
+++ b/apps/web/pages/auth/logout.tsx
@@ -5,8 +5,7 @@ import { useEffect } from "react";
 
 import { WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui/Icon";
-import { Button } from "@calcom/ui/components/button";
+import { Button, Icon } from "@calcom/ui";
 
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 
diff --git a/apps/web/pages/auth/setup.tsx b/apps/web/pages/auth/setup.tsx
index fbeb788d82..d01a7ef56f 100644
--- a/apps/web/pages/auth/setup.tsx
+++ b/apps/web/pages/auth/setup.tsx
@@ -11,8 +11,7 @@ import { isPasswordValid } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import prisma from "@calcom/prisma";
 import { inferSSRProps } from "@calcom/types/inferSSRProps";
-import { TextField, EmailField, PasswordField, Label } from "@calcom/ui/components/form";
-import WizardForm from "@calcom/ui/v2/core/WizardForm";
+import { EmailField, Label, PasswordField, TextField, WizardForm } from "@calcom/ui";
 
 import { ssrInit } from "@server/lib/ssr";
 
diff --git a/apps/web/pages/auth/signin.tsx b/apps/web/pages/auth/signin.tsx
index 916cbcb994..0d0e78f173 100644
--- a/apps/web/pages/auth/signin.tsx
+++ b/apps/web/pages/auth/signin.tsx
@@ -1,7 +1,7 @@
 import { GetServerSidePropsContext } from "next";
 import { getProviders, signIn, getSession, getCsrfToken } from "next-auth/react";
 
-import { Button } from "@calcom/ui/components/button";
+import { Button } from "@calcom/ui";
 
 type Provider = {
   name: string;
diff --git a/apps/web/pages/auth/verify.tsx b/apps/web/pages/auth/verify.tsx
index bc41de09e4..e4ee54f77e 100644
--- a/apps/web/pages/auth/verify.tsx
+++ b/apps/web/pages/auth/verify.tsx
@@ -8,8 +8,7 @@ import z from "zod";
 
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { trpc } from "@calcom/trpc/react";
-import { Button } from "@calcom/ui/components";
-import showToast from "@calcom/ui/v2/core/notifications";
+import { Button, showToast } from "@calcom/ui";
 
 import Loader from "@components/Loader";
 
diff --git a/apps/web/pages/availability/[schedule].tsx b/apps/web/pages/availability/[schedule].tsx
index 2afb9bb300..9e24feed75 100644
--- a/apps/web/pages/availability/[schedule].tsx
+++ b/apps/web/pages/availability/[schedule].tsx
@@ -10,15 +10,19 @@ import { stringOrNumber } from "@calcom/prisma/zod-utils";
 import { trpc } from "@calcom/trpc/react";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
 import type { Schedule as ScheduleType } from "@calcom/types/schedule";
-import { Icon } from "@calcom/ui";
-import { Button } from "@calcom/ui/components/button";
-import { Form, Label } from "@calcom/ui/components/form";
-import Shell from "@calcom/ui/v2/core/Shell";
-import Switch from "@calcom/ui/v2/core/Switch";
-import TimezoneSelect from "@calcom/ui/v2/core/TimezoneSelect";
-import VerticalDivider from "@calcom/ui/v2/core/VerticalDivider";
-import showToast from "@calcom/ui/v2/core/notifications";
-import { Skeleton, SkeletonText } from "@calcom/ui/v2/core/skeleton";
+import {
+  Button,
+  Form,
+  Icon,
+  Label,
+  Shell,
+  showToast,
+  Skeleton,
+  SkeletonText,
+  Switch,
+  TimezoneSelect,
+  VerticalDivider,
+} from "@calcom/ui";
 
 import { HttpError } from "@lib/core/http/error";
 
diff --git a/apps/web/pages/availability/index.tsx b/apps/web/pages/availability/index.tsx
index bcf6208691..b650f55cd0 100644
--- a/apps/web/pages/availability/index.tsx
+++ b/apps/web/pages/availability/index.tsx
@@ -3,9 +3,7 @@ import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { NewScheduleButton, ScheduleListItem } from "@calcom/features/schedules";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { RouterOutputs, trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui/Icon";
-import Shell from "@calcom/ui/Shell";
-import { EmptyScreen, showToast } from "@calcom/ui/v2";
+import { EmptyScreen, Icon, Shell, showToast } from "@calcom/ui";
 
 import { withQuery } from "@lib/QueryCell";
 import { HttpError } from "@lib/core/http/error";
diff --git a/apps/web/pages/availability/troubleshoot.tsx b/apps/web/pages/availability/troubleshoot.tsx
index b63ad7d90f..bef2365538 100644
--- a/apps/web/pages/availability/troubleshoot.tsx
+++ b/apps/web/pages/availability/troubleshoot.tsx
@@ -3,8 +3,7 @@ import { useState } from "react";
 import dayjs from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { RouterOutputs, trpc } from "@calcom/trpc/react";
-import Shell from "@calcom/ui/Shell";
-import { SkeletonText } from "@calcom/ui/v2/core/skeleton";
+import { Shell, SkeletonText } from "@calcom/ui";
 
 type User = RouterOutputs["viewer"]["me"];
 
diff --git a/apps/web/pages/bookings/[status].tsx b/apps/web/pages/bookings/[status].tsx
index 14ddb1d1e0..7b427e3ef5 100644
--- a/apps/web/pages/bookings/[status].tsx
+++ b/apps/web/pages/bookings/[status].tsx
@@ -7,11 +7,7 @@ import { z } from "zod";
 import { WipeMyCalActionButton } from "@calcom/app-store/wipemycalother/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { RouterInputs, RouterOutputs, trpc } from "@calcom/trpc/react";
-import { Alert } from "@calcom/ui/Alert";
-import { Icon } from "@calcom/ui/Icon";
-import { Button } from "@calcom/ui/components";
-import { EmptyScreen } from "@calcom/ui/v2";
-import BookingLayout from "@calcom/ui/v2/core/layouts/BookingLayout";
+import { Alert, BookingLayout, Button, EmptyScreen, Icon } from "@calcom/ui";
 
 import { useInViewObserver } from "@lib/hooks/useInViewObserver";
 
diff --git a/apps/web/pages/cancel/success.tsx b/apps/web/pages/cancel/success.tsx
index 1f5e674708..0342d952f1 100644
--- a/apps/web/pages/cancel/success.tsx
+++ b/apps/web/pages/cancel/success.tsx
@@ -3,8 +3,7 @@ import { useRouter } from "next/router";
 import { z } from "zod";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui/Icon";
-import { Button } from "@calcom/ui/components/button";
+import { Button, Icon } from "@calcom/ui";
 
 import { HeadSeo } from "@components/seo/head-seo";
 
diff --git a/apps/web/pages/event-types/[type]/index.tsx b/apps/web/pages/event-types/[type]/index.tsx
index 88d883405f..7a577ec2d9 100644
--- a/apps/web/pages/event-types/[type]/index.tsx
+++ b/apps/web/pages/event-types/[type]/index.tsx
@@ -9,8 +9,8 @@ import { z } from "zod";
 
 import { StripeData } from "@calcom/app-store/stripepayment/lib/server";
 import getApps, { getEventTypeAppData, getLocationOptions } from "@calcom/app-store/utils";
-import { LocationObject, EventLocationType } from "@calcom/core/location";
-import { parseRecurringEvent, parseBookingLimit, validateBookingLimitOrder } from "@calcom/lib";
+import { EventLocationType, LocationObject } from "@calcom/core/location";
+import { parseBookingLimit, parseRecurringEvent, validateBookingLimitOrder } from "@calcom/lib";
 import { CAL_URL } from "@calcom/lib/constants";
 import convertToNewDurationType from "@calcom/lib/convertToNewDurationType";
 import findDurationType from "@calcom/lib/findDurationType";
@@ -20,8 +20,7 @@ import prisma from "@calcom/prisma";
 import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
 import { trpc } from "@calcom/trpc/react";
 import type { BookingLimit, RecurringEvent } from "@calcom/types/Calendar";
-import { Form } from "@calcom/ui/form/fields";
-import { showToast } from "@calcom/ui/v2";
+import { Form, showToast } from "@calcom/ui";
 
 import { asStringOrThrow } from "@lib/asStringOrNull";
 import { getSession } from "@lib/auth";
diff --git a/apps/web/pages/event-types/index.tsx b/apps/web/pages/event-types/index.tsx
index 0cbcd730f6..4c6c428106 100644
--- a/apps/web/pages/event-types/index.tsx
+++ b/apps/web/pages/event-types/index.tsx
@@ -6,23 +6,29 @@ import React, { Fragment, useEffect, useState } from "react";
 
 import { CAL_URL, WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { RouterOutputs, trpc } from "@calcom/trpc/react";
-import { TRPCClientError } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui";
-import { Button, ButtonGroup, Badge } from "@calcom/ui/components";
-import { Dialog, EmptyScreen, showToast, Switch, Tooltip } from "@calcom/ui/v2";
-import ConfirmationDialogContent from "@calcom/ui/v2/core/ConfirmationDialogContent";
-import Dropdown, {
+import { RouterOutputs, trpc, TRPCClientError } from "@calcom/trpc/react";
+import {
+  Badge,
+  Button,
+  ButtonGroup,
+  ConfirmationDialogContent,
+  CreateEventTypeButton,
+  Dialog,
+  Dropdown,
   DropdownItem,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuPortal,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-  DropdownMenuPortal,
-} from "@calcom/ui/v2/core/Dropdown";
-import Shell from "@calcom/ui/v2/core/Shell";
-import CreateEventTypeButton from "@calcom/ui/v2/modules/event-types/CreateEventType";
-import EventTypeDescription from "@calcom/ui/v2/modules/event-types/EventTypeDescription";
+  EmptyScreen,
+  EventTypeDescription,
+  Icon,
+  Shell,
+  showToast,
+  Switch,
+  Tooltip,
+} from "@calcom/ui";
 
 import { withQuery } from "@lib/QueryCell";
 import { HttpError } from "@lib/core/http/error";
diff --git a/apps/web/pages/getting-started/[[...step]].tsx b/apps/web/pages/getting-started/[[...step]].tsx
index 624a50917e..9603e6b85b 100644
--- a/apps/web/pages/getting-started/[[...step]].tsx
+++ b/apps/web/pages/getting-started/[[...step]].tsx
@@ -7,9 +7,7 @@ import { z } from "zod";
 import { getSession } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { User } from "@calcom/prisma/client";
-import { Button } from "@calcom/ui/components/button";
-import { StepCard } from "@calcom/ui/v2/core/StepCard";
-import { Steps } from "@calcom/ui/v2/core/Steps";
+import { Button, StepCard, Steps } from "@calcom/ui";
 
 import prisma from "@lib/prisma";
 
diff --git a/apps/web/pages/more.tsx b/apps/web/pages/more.tsx
index 9c495c84c6..a34dbc754b 100644
--- a/apps/web/pages/more.tsx
+++ b/apps/web/pages/more.tsx
@@ -1,6 +1,5 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { MobileNavigationMoreItems } from "@calcom/ui/Shell";
-import { Shell } from "@calcom/ui/v2";
+import { MobileNavigationMoreItems, Shell } from "@calcom/ui";
 
 export default function MorePage() {
   const { t } = useLocale();
diff --git a/apps/web/pages/sandbox/Alert.tsx b/apps/web/pages/sandbox/Alert.tsx
deleted file mode 100644
index a056435148..0000000000
--- a/apps/web/pages/sandbox/Alert.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from "react";
-
-import { Alert, AlertProps } from "@calcom/ui/Alert";
-
-import { sandboxPage } from ".";
-
-const page = sandboxPage(function AlertPage() {
-  const list: AlertProps[] = [
-    { title: "Something went wrong", severity: "error" },
-    { title: "Something went kinda wrong", severity: "warning" },
-    { title: "Something went great", severity: "success" },
-    { title: "Something went wrong", severity: "error", message: "Some extra context" },
-    {
-      title: "Something went wrong",
-      severity: "error",
-      message: (
-        <p>
-          Some extra context
-          <br />
-          hey
-        </p>
-      ),
-    },
-  ];
-  return (
-    <>
-      <div className="bg-gray-200 p-4">
-        <h1>Alert component</h1>
-        <div className="flex flex-col">
-          {list.map((props, index) => (
-            <div key={index} className="m-2 bg-white p-2">
-              <h3>
-                <code>
-                  {JSON.stringify(
-                    props,
-                    (key, value) => {
-                      if (key.includes("message")) {
-                        return "..";
-                      }
-                      return value;
-                    },
-                    2
-                  )}
-                </code>
-              </h3>
-              <Alert {...props}>Alert text</Alert>
-            </div>
-          ))}
-        </div>
-      </div>
-    </>
-  );
-});
-
-export default page.default;
-export const getStaticProps = page.getStaticProps;
diff --git a/apps/web/pages/sandbox/Badge.tsx b/apps/web/pages/sandbox/Badge.tsx
deleted file mode 100644
index 87961f176c..0000000000
--- a/apps/web/pages/sandbox/Badge.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Badge, BadgeProps } from "@calcom/ui/components/badge";
-
-import { sandboxPage } from ".";
-
-const page = sandboxPage(function BadgePage() {
-  const list: BadgeProps[] = [
-    //
-    { variant: "success" },
-    { variant: "gray" },
-    { variant: "success" },
-  ];
-  return (
-    <>
-      <div className="bg-gray-200 p-4">
-        <h1>Badge component</h1>
-        <div className="flex flex-col">
-          {list.map((props, index) => (
-            <div key={index} className="m-2 bg-white p-2">
-              <h3>
-                <code>
-                  {JSON.stringify(
-                    props,
-                    (key, value) => {
-                      if (key.includes("Icon")) {
-                        return "..";
-                      }
-                      return value;
-                    },
-                    2
-                  )}
-                </code>
-              </h3>
-              <Badge {...props}>Badge text</Badge>
-            </div>
-          ))}
-        </div>
-      </div>
-    </>
-  );
-});
-
-export default page.default;
-export const getStaticProps = page.getStaticProps;
diff --git a/apps/web/pages/sandbox/Button.tsx b/apps/web/pages/sandbox/Button.tsx
deleted file mode 100644
index 24127b86fb..0000000000
--- a/apps/web/pages/sandbox/Button.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import React from "react";
-
-import { Button, ButtonBaseProps } from "@calcom/ui/Button";
-import { Icon } from "@calcom/ui/Icon";
-
-import { sandboxPage } from ".";
-
-const page = sandboxPage(function ButtonPage() {
-  const list: ButtonBaseProps[] = [
-    // primary
-    { color: "primary" },
-    { color: "primary", disabled: true },
-    { color: "primary", disabled: true, loading: true },
-
-    // secondary
-    { color: "secondary" },
-    { color: "secondary", disabled: true },
-    { color: "secondary", disabled: true, loading: true },
-
-    // minimal
-    { color: "minimal" },
-    { color: "minimal", disabled: true },
-    { color: "minimal", disabled: true, loading: true },
-
-    // sizes
-    { color: "primary", size: "sm" },
-    { color: "primary", size: "base" },
-    { color: "primary", size: "lg" },
-
-    // // href
-    // { href: "/staging" },
-    // { href: "/staging", disabled: true },
-
-    { StartIcon: Icon.FiPlus },
-    { EndIcon: Icon.FiPlus },
-  ];
-  return (
-    <>
-      <div className="bg-gray-200 p-4">
-        <h1>Button component</h1>
-        <div className="flex flex-col">
-          {list.map((props, index) => (
-            <div key={index} className="m-2 bg-white p-2">
-              <h3>
-                <code>
-                  {JSON.stringify(
-                    props,
-                    (key, value) => {
-                      if (key.includes("Icon")) {
-                        return "..";
-                      }
-                      return value;
-                    },
-                    2
-                  )}
-                </code>
-              </h3>
-              <Button {...props}>Button text</Button>
-            </div>
-          ))}
-        </div>
-      </div>
-    </>
-  );
-});
-
-export default page.default;
-export const getStaticProps = page.getStaticProps;
diff --git a/apps/web/pages/sandbox/List.tsx b/apps/web/pages/sandbox/List.tsx
deleted file mode 100644
index c6782b3f4e..0000000000
--- a/apps/web/pages/sandbox/List.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React, { useState } from "react";
-
-import Button from "@calcom/ui/Button";
-import { List, ListItem } from "@calcom/ui/List";
-
-import { sandboxPage } from ".";
-
-const page = sandboxPage(() => {
-  const [expanded, setExpanded] = useState(false);
-  return (
-    <div className="p-4">
-      Unstyled -{" "}
-      <Button size="sm" color="minimal" onClick={() => setExpanded((state) => !state)}>
-        Toggle expanded
-      </Button>
-      <List>
-        <ListItem expanded={expanded} className="transition-all">
-          An item
-        </ListItem>
-        <ListItem expanded={expanded} className="transition-all">
-          An item
-        </ListItem>
-        <ListItem expanded={expanded} className="transition-all">
-          An item
-        </ListItem>
-        <ListItem expanded={expanded} className="transition-all">
-          An item
-        </ListItem>
-      </List>
-      One expanded
-      <List>
-        <ListItem>An item</ListItem>
-        <ListItem expanded>Spaced</ListItem>
-        <ListItem>An item</ListItem>
-        <ListItem>An item</ListItem>
-      </List>
-    </div>
-  );
-});
-
-export default page.default;
-export const getStaticProps = page.getStaticProps;
diff --git a/apps/web/pages/sandbox/RadioArea.tsx b/apps/web/pages/sandbox/RadioArea.tsx
deleted file mode 100644
index ab702e9a66..0000000000
--- a/apps/web/pages/sandbox/RadioArea.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import Head from "next/head";
-import React, { useState } from "react";
-
-import * as RadioArea from "@components/ui/form/radio-area";
-
-const selectOptions = [
-  {
-    value: "rabbit",
-    label: "Rabbit",
-    description: "Fast and hard.",
-  },
-  {
-    value: "turtle",
-    label: "Turtle",
-    description: "Slow and steady.",
-  },
-];
-
-export default function RadioAreaPage() {
-  const [formData, setFormData] = useState({});
-
-  return (
-    <>
-      <Head>
-        <meta name="googlebot" content="noindex" />
-      </Head>
-      <div className="w-full p-4">
-        <h1 className="mb-4 text-4xl">RadioArea component</h1>
-        <form
-          onSubmit={(e) => {
-            e.preventDefault();
-          }}
-          className="mb-2 space-y-4">
-          <RadioArea.Group
-            onChange={(radioGroup_1: string) => setFormData({ ...formData, radioGroup_1 })}
-            className="flex max-w-screen-md space-x-4 rtl:space-x-reverse"
-            name="radioGroup_1">
-            <RadioArea.Item value="radioGroup_1_radio_1" className="flex-grow bg-white">
-              <strong className="mb-1">radioGroup_1_radio_1</strong>
-              <p>Description #1</p>
-            </RadioArea.Item>
-            <RadioArea.Item value="radioGroup_1_radio_2" className="flex-grow bg-white">
-              <strong className="mb-1">radioGroup_1_radio_2</strong>
-              <p>Description #2</p>
-            </RadioArea.Item>
-            <RadioArea.Item value="radioGroup_1_radio_3" className="flex-grow bg-white">
-              <strong className="mb-1">radioGroup_1_radio_3</strong>
-              <p>Description #3</p>
-            </RadioArea.Item>
-          </RadioArea.Group>
-          <RadioArea.Group
-            onChange={(radioGroup_2: string) => setFormData({ ...formData, radioGroup_2 })}
-            className="flex max-w-screen-md space-x-4 rtl:space-x-reverse"
-            name="radioGroup_2">
-            <RadioArea.Item value="radioGroup_2_radio_1" className="flex-grow bg-white">
-              <strong className="mb-1">radioGroup_1_radio_1</strong>
-              <p>Description #1</p>
-            </RadioArea.Item>
-            <RadioArea.Item value="radioGroup_2_radio_2" className="flex-grow bg-white" defaultChecked={true}>
-              <strong className="mb-1">radioGroup_1_radio_2</strong>
-              <p>Description #2</p>
-            </RadioArea.Item>
-            <RadioArea.Item value="radioGroup_2_radio_3" className="flex-grow bg-white">
-              <strong className="mb-1">radioGroup_1_radio_3</strong>
-              <p>Description #3</p>
-            </RadioArea.Item>
-          </RadioArea.Group>
-          <div>
-            <p className="text-lg">Disabled RadioAreaSelect</p>
-            <RadioArea.Select options={[]} className="max-w-screen-md" />
-          </div>
-          <div>
-            <p className="text-lg">RadioArea disabled with custom placeholder</p>
-            <RadioArea.Select
-              className="max-w-screen-md"
-              options={[]}
-              placeholder="Does the rabbit or the turtle win the race?"
-            />
-          </div>
-          <div>
-            <p className="text-lg">RadioArea with options</p>
-            <RadioArea.Select
-              className="max-w-screen-md"
-              name="turtleOrRabbitWinsTheRace"
-              onChange={(turtleOrRabbitWinsTheRace: string) =>
-                setFormData({ ...formData, turtleOrRabbitWinsTheRace })
-              }
-              options={selectOptions}
-              placeholder="Does the rabbit or the turtle win the race?"
-            />
-          </div>
-
-          <div>
-            <p className="text-lg">RadioArea with default selected (disabled for clarity)</p>
-            <RadioArea.Select
-              disabled={true}
-              className="max-w-screen-md"
-              value="turtle"
-              options={selectOptions}
-            />
-          </div>
-        </form>
-        <pre>{JSON.stringify(formData)}</pre>
-      </div>
-    </>
-  );
-}
diff --git a/apps/web/pages/sandbox/form.tsx b/apps/web/pages/sandbox/form.tsx
deleted file mode 100644
index a6d3342aec..0000000000
--- a/apps/web/pages/sandbox/form.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from "react";
-
-import { Label, Input, TextField } from "@calcom/ui/form/fields";
-import { Segment, SegmentOption } from "@calcom/ui/v2/core";
-
-import { sandboxPage } from ".";
-
-const page = sandboxPage(() => (
-  <div className="space-y-6 p-4">
-    <div>
-      <Label>Label</Label>
-    </div>
-    <div>
-      <Input name="test-01" placeholder="Input" />
-    </div>
-    <div>
-      <TextField name="test-02" label="TextField" placeholder="it has an input baked in" />
-      {/* Adding to sandbox cause storybook doesnt like radix tailwind :S  */}
-      <div className="pt-4">
-        <Segment label="Test" value="Test">
-          <SegmentOption value="Test">One</SegmentOption>
-          <SegmentOption value="2">Two</SegmentOption>
-          <SegmentOption value="3">Three</SegmentOption>
-          <SegmentOption value="4" disabled>
-            Four
-          </SegmentOption>
-        </Segment>
-      </div>
-    </div>
-  </div>
-));
-
-export default page.default;
-export const getStaticProps = page.getStaticProps;
diff --git a/apps/web/pages/sandbox/index.tsx b/apps/web/pages/sandbox/index.tsx
deleted file mode 100644
index da49e2ee00..0000000000
--- a/apps/web/pages/sandbox/index.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import fs from "fs";
-import { NextPage } from "next";
-import Head from "next/head";
-import Link from "next/link";
-import path from "path";
-
-import { inferSSRProps } from "@lib/types/inferSSRProps";
-
-async function _getStaticProps() {
-  const dir = path.join(process.cwd(), "pages", "sandbox");
-
-  const pages = fs
-    .readdirSync(dir)
-    .filter((file) => !file.startsWith("."))
-    .map((file) => {
-      const parts = file.split(".");
-      // remove extension
-      parts.pop();
-      return parts.join(".");
-    });
-  return {
-    props: {
-      pages,
-    },
-  };
-}
-type PageProps = inferSSRProps<typeof _getStaticProps>;
-
-const SandboxPage: NextPage<PageProps & { children: React.ReactNode }> = (props) => {
-  return (
-    <>
-      <Head>
-        <meta name="googlebot" content="noindex" />
-      </Head>
-      <nav>
-        <ul className="flex flex-col justify-between md:flex-row">
-          {props.pages.map((pathname) => (
-            <li key={pathname}>
-              <Link href={"/sandbox/" + pathname + "#main"}>
-                <a className="px-4 font-mono">{pathname}</a>
-              </Link>
-            </li>
-          ))}
-        </ul>
-      </nav>
-      <main id="main" className="bg-gray-100">
-        {props.children}
-      </main>
-    </>
-  );
-};
-export function sandboxPage(Component: NextPage) {
-  const Wrapper: NextPage<PageProps> = (props) => {
-    return (
-      <>
-        <SandboxPage {...props}>
-          <Component />
-        </SandboxPage>
-      </>
-    );
-  };
-  return {
-    default: Wrapper,
-    getStaticProps: _getStaticProps,
-  };
-}
-
-const page = sandboxPage(() => {
-  return <p className="my-20 text-center text-2xl">Click a component above</p>;
-});
-
-export default page.default;
-export const getStaticProps = page.getStaticProps;
diff --git a/apps/web/pages/sandbox/preview-error-page.tsx b/apps/web/pages/sandbox/preview-error-page.tsx
deleted file mode 100644
index 9a2d938b15..0000000000
--- a/apps/web/pages/sandbox/preview-error-page.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { NextPage } from "next";
-import React from "react";
-
-import { HttpError } from "@lib/core/http/error";
-
-import { ErrorPage } from "@components/error/error-page";
-
-const PreviewErrorPage: NextPage = () => {
-  const statusCode = 403;
-  const message = `this was an http error ${statusCode}`;
-  const previousError = new Error("A test error");
-  const error = new HttpError({
-    statusCode,
-    message,
-    url: "http://some.invalid.url",
-    cause: previousError,
-  });
-  return <ErrorPage displayDebug={true} statusCode={statusCode} error={error} message={message} />;
-};
-
-export default PreviewErrorPage;
diff --git a/apps/web/pages/sandbox/test-async-error.tsx b/apps/web/pages/sandbox/test-async-error.tsx
deleted file mode 100644
index 3b5d01a6df..0000000000
--- a/apps/web/pages/sandbox/test-async-error.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import React from "react";
-
-import { HttpError } from "@lib/core/http/error";
-
-const TestAsyncErrorRoute: React.FC = () => {
-  const { error, isLoading } = useQuery(["error-promise"], async () => {
-    throw new HttpError({
-      statusCode: 400,
-      message: "A http error occurred on the client side in test-async-error.tsx.",
-      url: "http://awebsite.that.does.not.exist",
-    });
-  });
-
-  if (isLoading) {
-    return <>Loading...</>;
-  }
-
-  if (error) {
-    console.log("An error occurred", error);
-    throw error;
-  }
-  return <>If you see this message, there is really something wrong ;)</>;
-};
-
-export default TestAsyncErrorRoute;
diff --git a/apps/web/pages/sandbox/test-error.tsx b/apps/web/pages/sandbox/test-error.tsx
deleted file mode 100644
index 76544eaa3a..0000000000
--- a/apps/web/pages/sandbox/test-error.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from "react";
-
-import { HttpError } from "@lib/core/http/error";
-
-type Props = {
-  hasRunOnServer: boolean;
-};
-
-const TestErrorRoute: React.FC<Props> = (props) => {
-  if (!props.hasRunOnServer) {
-    throw new HttpError({ statusCode: 400, message: "test-error.tsx" });
-  }
-  return <>If you see this message, there is really something wrong ;)</>;
-};
-
-// Having a page that always throws error is very hard with nextjs
-// because it will try to pre-render the page at build-time... and
-// complain: 'you need to fix this'. So here because we want to always
-// throw an error for monitoring, let's force server side generation
-// all the time (the page won't be pre-generated, all cool).
-export async function getServerSideProps() {
-  return {
-    props: {
-      hasRunOnServer: false,
-    },
-  };
-}
-
-export default TestErrorRoute;
diff --git a/apps/web/pages/settings/admin/apps.tsx b/apps/web/pages/settings/admin/apps.tsx
index c0c9422d29..8fa3de5265 100644
--- a/apps/web/pages/settings/admin/apps.tsx
+++ b/apps/web/pages/settings/admin/apps.tsx
@@ -1,5 +1,4 @@
-import Meta from "@calcom/ui/v2/core/Meta";
-import { getLayout } from "@calcom/ui/v2/core/layouts/AdminLayout";
+import { getAdminLayout as getLayout, Meta } from "@calcom/ui";
 
 function AdminAppsView() {
   return (
diff --git a/apps/web/pages/settings/admin/impersonation.tsx b/apps/web/pages/settings/admin/impersonation.tsx
index 099c767f92..8ab2f39a73 100644
--- a/apps/web/pages/settings/admin/impersonation.tsx
+++ b/apps/web/pages/settings/admin/impersonation.tsx
@@ -2,9 +2,7 @@ import { signIn } from "next-auth/react";
 import { useRef } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, TextField } from "@calcom/ui/components";
-import Meta from "@calcom/ui/v2/core/Meta";
-import { getLayout } from "@calcom/ui/v2/core/layouts/AdminLayout";
+import { Button, getAdminLayout as getLayout, Meta, TextField } from "@calcom/ui";
 
 function AdminView() {
   const { t } = useLocale();
diff --git a/apps/web/pages/settings/admin/index.tsx b/apps/web/pages/settings/admin/index.tsx
index 43622a4464..52c8e55781 100644
--- a/apps/web/pages/settings/admin/index.tsx
+++ b/apps/web/pages/settings/admin/index.tsx
@@ -1,5 +1,4 @@
-import Meta from "@calcom/ui/v2/core/Meta";
-import { getLayout } from "@calcom/ui/v2/core/layouts/AdminLayout";
+import { getAdminLayout as getLayout, Meta } from "@calcom/ui";
 
 function AdminAppsView() {
   return (
diff --git a/apps/web/pages/settings/admin/users.tsx b/apps/web/pages/settings/admin/users.tsx
index e47a309752..503fa8d365 100644
--- a/apps/web/pages/settings/admin/users.tsx
+++ b/apps/web/pages/settings/admin/users.tsx
@@ -1,5 +1,4 @@
-import Meta from "@calcom/ui/v2/core/Meta";
-import { getLayout } from "@calcom/ui/v2/core/layouts/AdminLayout";
+import { getAdminLayout as getLayout, Meta } from "@calcom/ui";
 
 function AdminUsersView() {
   return (
diff --git a/apps/web/pages/settings/billing/index.tsx b/apps/web/pages/settings/billing/index.tsx
index b2b1d0f8ba..ba7443f620 100644
--- a/apps/web/pages/settings/billing/index.tsx
+++ b/apps/web/pages/settings/billing/index.tsx
@@ -6,10 +6,7 @@ import { classNames } from "@calcom/lib";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui";
-import { Button } from "@calcom/ui/components/button";
-import Meta from "@calcom/ui/v2/core/Meta";
-import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
+import { Button, getSettingsLayout as getLayout, Icon, Meta } from "@calcom/ui";
 
 interface CtaRowProps {
   title: string;
diff --git a/apps/web/pages/settings/developer/api-keys.tsx b/apps/web/pages/settings/developer/api-keys.tsx
index 54cc55935c..6a1aebdfc2 100644
--- a/apps/web/pages/settings/developer/api-keys.tsx
+++ b/apps/web/pages/settings/developer/api-keys.tsx
@@ -2,17 +2,20 @@ import { useState } from "react";
 
 import { TApiKeys } from "@calcom/ee/api-keys/components/ApiKeyListItem";
 import LicenseRequired from "@calcom/ee/common/components/v2/LicenseRequired";
-import ApiKeyDialogForm from "@calcom/features/ee/api-keys/components/v2/ApiKeyDialogForm";
-import ApiKeyListItem from "@calcom/features/ee/api-keys/components/v2/ApiKeyListItem";
+import ApiKeyDialogForm from "@calcom/features/ee/api-keys/components/ApiKeyDialogForm";
+import ApiKeyListItem from "@calcom/features/ee/api-keys/components/ApiKeyListItem";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui";
-import { Button } from "@calcom/ui/components";
-import { EmptyScreen } from "@calcom/ui/v2";
-import { Dialog, DialogContent } from "@calcom/ui/v2/core/Dialog";
-import Meta from "@calcom/ui/v2/core/Meta";
-import SkeletonLoader from "@calcom/ui/v2/core/apps/SkeletonLoader";
-import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  EmptyScreen,
+  getSettingsLayout as getLayout,
+  Icon,
+  Meta,
+  SkeletonLoader,
+} from "@calcom/ui";
 
 const ApiKeysView = () => {
   const { t } = useLocale();
diff --git a/apps/web/pages/settings/my-account/appearance.tsx b/apps/web/pages/settings/my-account/appearance.tsx
index 3d84ba881f..5642b61c00 100644
--- a/apps/web/pages/settings/my-account/appearance.tsx
+++ b/apps/web/pages/settings/my-account/appearance.tsx
@@ -2,15 +2,19 @@ import { Controller, useForm } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Badge } from "@calcom/ui/components/badge";
-import { Button } from "@calcom/ui/components/button";
-import { Form } from "@calcom/ui/components/form";
-import Meta from "@calcom/ui/v2/core/Meta";
-import Switch from "@calcom/ui/v2/core/Switch";
-import ColorPicker from "@calcom/ui/v2/core/colorpicker";
-import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
-import showToast from "@calcom/ui/v2/core/notifications";
-import { SkeletonContainer, SkeletonText, SkeletonButton } from "@calcom/ui/v2/core/skeleton";
+import {
+  Badge,
+  Button,
+  ColorPicker,
+  Form,
+  getSettingsLayout as getLayout,
+  Meta,
+  showToast,
+  SkeletonButton,
+  SkeletonContainer,
+  SkeletonText,
+  Switch,
+} from "@calcom/ui";
 
 const SkeletonLoader = () => {
   return (
diff --git a/apps/web/pages/settings/my-account/calendars.tsx b/apps/web/pages/settings/my-account/calendars.tsx
index 19c2c91c09..00f979d478 100644
--- a/apps/web/pages/settings/my-account/calendars.tsx
+++ b/apps/web/pages/settings/my-account/calendars.tsx
@@ -6,16 +6,23 @@ import { Fragment } from "react";
 import DestinationCalendarSelector from "@calcom/features/calendars/DestinationCalendarSelector";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui";
-import { Button } from "@calcom/ui/components";
-import { Badge } from "@calcom/ui/components/badge";
-import { Alert } from "@calcom/ui/v2";
-import EmptyScreen from "@calcom/ui/v2/core/EmptyScreen";
-import Meta from "@calcom/ui/v2/core/Meta";
-import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
-import { SkeletonContainer, SkeletonText, SkeletonButton } from "@calcom/ui/v2/core/skeleton";
-import { List, ListItem, ListItemText, ListItemTitle } from "@calcom/ui/v2/modules/List";
-import DisconnectIntegration from "@calcom/ui/v2/modules/integrations/DisconnectIntegration";
+import {
+  Alert,
+  Badge,
+  Button,
+  DisconnectIntegration,
+  EmptyScreen,
+  getSettingsLayout as getLayout,
+  Icon,
+  List,
+  ListItem,
+  ListItemText,
+  ListItemTitle,
+  Meta,
+  SkeletonButton,
+  SkeletonContainer,
+  SkeletonText,
+} from "@calcom/ui";
 
 import { QueryCell } from "@lib/QueryCell";
 
diff --git a/apps/web/pages/settings/my-account/conferencing.tsx b/apps/web/pages/settings/my-account/conferencing.tsx
index e75f587a0e..0d6fa2237d 100644
--- a/apps/web/pages/settings/my-account/conferencing.tsx
+++ b/apps/web/pages/settings/my-account/conferencing.tsx
@@ -2,15 +2,25 @@ import { useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui";
-import { Button } from "@calcom/ui/components";
-import { Dropdown, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/v2";
-import { Dialog, DialogContent } from "@calcom/ui/v2/core/Dialog";
-import Meta from "@calcom/ui/v2/core/Meta";
-import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
-import showToast from "@calcom/ui/v2/core/notifications";
-import { SkeletonContainer, SkeletonText } from "@calcom/ui/v2/core/skeleton";
-import { List, ListItem, ListItemText, ListItemTitle } from "@calcom/ui/v2/modules/List";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  Dropdown,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  getSettingsLayout as getLayout,
+  Icon,
+  List,
+  ListItem,
+  ListItemText,
+  ListItemTitle,
+  Meta,
+  showToast,
+  SkeletonContainer,
+  SkeletonText,
+} from "@calcom/ui";
 
 const SkeletonLoader = () => {
   return (
@@ -53,12 +63,12 @@ const ConferencingLayout = () => {
   return (
     <div className="w-full bg-white sm:mx-0 xl:mt-0">
       <Meta title="Conferencing" description="Add your favourite video conferencing apps for your meetings" />
-      <List roundContainer={true}>
+      <List>
         {apps?.items &&
           apps.items
             .map((app) => ({ ...app, title: app.title || app.name }))
             .map((app) => (
-              <ListItem rounded={false} className="flex-col border-0" key={app.title}>
+              <ListItem className="flex-col border-0" key={app.title}>
                 <div className="flex w-full flex-1 items-center space-x-3 pl-1 pt-1 rtl:space-x-reverse">
                   {
                     // eslint-disable-next-line @next/next/no-img-element
diff --git a/apps/web/pages/settings/my-account/general.tsx b/apps/web/pages/settings/my-account/general.tsx
index 9f97e1b692..4d3dde0d7b 100644
--- a/apps/web/pages/settings/my-account/general.tsx
+++ b/apps/web/pages/settings/my-account/general.tsx
@@ -1,17 +1,22 @@
 import { useRouter } from "next/router";
 import { useMemo } from "react";
-import { useForm, Controller } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { RouterOutputs, trpc } from "@calcom/trpc/react";
-import { Button } from "@calcom/ui/components/button";
-import { Form, Label } from "@calcom/ui/components/form";
-import Meta from "@calcom/ui/v2/core/Meta";
-import TimezoneSelect from "@calcom/ui/v2/core/TimezoneSelect";
-import Select from "@calcom/ui/v2/core/form/select";
-import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
-import showToast from "@calcom/ui/v2/core/notifications";
-import { SkeletonContainer, SkeletonText, SkeletonButton } from "@calcom/ui/v2/core/skeleton";
+import {
+  Button,
+  Form,
+  getSettingsLayout as getLayout,
+  Label,
+  Meta,
+  Select,
+  showToast,
+  SkeletonButton,
+  SkeletonContainer,
+  SkeletonText,
+  TimezoneSelect,
+} from "@calcom/ui";
 
 import { withQuery } from "@lib/QueryCell";
 import { nameOfDay } from "@lib/core/i18n/weekday";
diff --git a/apps/web/pages/settings/my-account/profile.tsx b/apps/web/pages/settings/my-account/profile.tsx
index 03f9d9b18a..c26538d1ac 100644
--- a/apps/web/pages/settings/my-account/profile.tsx
+++ b/apps/web/pages/settings/my-account/profile.tsx
@@ -1,7 +1,7 @@
 import { IdentityProvider } from "@prisma/client";
 import crypto from "crypto";
 import { signOut } from "next-auth/react";
-import { useRef, useState, BaseSyntheticEvent, useEffect } from "react";
+import { BaseSyntheticEvent, useEffect, useRef, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 
 import { ErrorCode } from "@calcom/lib/auth";
@@ -9,17 +9,27 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { TRPCClientErrorLike } from "@calcom/trpc/client";
 import { trpc } from "@calcom/trpc/react";
 import { AppRouter } from "@calcom/trpc/server/routers/_app";
-import { Icon } from "@calcom/ui";
-import { Alert } from "@calcom/ui/Alert";
-import { Avatar } from "@calcom/ui/components/avatar";
-import { Button } from "@calcom/ui/components/button";
-import { Form, Label, TextField, PasswordField } from "@calcom/ui/components/form";
-import { Dialog, DialogContent, DialogTrigger } from "@calcom/ui/v2/core/Dialog";
-import ImageUploader from "@calcom/ui/v2/core/ImageUploader";
-import Meta from "@calcom/ui/v2/core/Meta";
-import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
-import showToast from "@calcom/ui/v2/core/notifications";
-import { SkeletonContainer, SkeletonText, SkeletonButton, SkeletonAvatar } from "@calcom/ui/v2/core/skeleton";
+import {
+  Alert,
+  Avatar,
+  Button,
+  Dialog,
+  DialogContent,
+  DialogTrigger,
+  Form,
+  getSettingsLayout as getLayout,
+  Icon,
+  ImageUploader,
+  Label,
+  Meta,
+  PasswordField,
+  showToast,
+  SkeletonAvatar,
+  SkeletonButton,
+  SkeletonContainer,
+  SkeletonText,
+  TextField,
+} from "@calcom/ui";
 
 import TwoFactor from "@components/auth/TwoFactor";
 import { UsernameAvailability } from "@components/ui/UsernameAvailability";
diff --git a/apps/web/pages/settings/security/impersonation.tsx b/apps/web/pages/settings/security/impersonation.tsx
index 3f9964ad84..4ff36ea094 100644
--- a/apps/web/pages/settings/security/impersonation.tsx
+++ b/apps/web/pages/settings/security/impersonation.tsx
@@ -2,11 +2,16 @@ import { useForm } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Button } from "@calcom/ui/components";
-import { Label, Form } from "@calcom/ui/components/form";
-import { Switch, Skeleton, showToast } from "@calcom/ui/v2/core";
-import Meta from "@calcom/ui/v2/core/Meta";
-import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
+import {
+  Button,
+  Form,
+  getSettingsLayout as getLayout,
+  Label,
+  Meta,
+  showToast,
+  Skeleton,
+  Switch,
+} from "@calcom/ui";
 
 const ProfileImpersonationView = () => {
   const { t } = useLocale();
diff --git a/apps/web/pages/settings/security/password.tsx b/apps/web/pages/settings/security/password.tsx
index e205ce5ccb..d67c873136 100644
--- a/apps/web/pages/settings/security/password.tsx
+++ b/apps/web/pages/settings/security/password.tsx
@@ -5,11 +5,7 @@ import { useForm } from "react-hook-form";
 import { identityProviderNameMap } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Button } from "@calcom/ui/components/button";
-import { Form, PasswordField } from "@calcom/ui/components/form";
-import Meta from "@calcom/ui/v2/core/Meta";
-import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
-import showToast from "@calcom/ui/v2/core/notifications";
+import { Button, Form, getSettingsLayout as getLayout, Meta, PasswordField, showToast } from "@calcom/ui";
 
 type ChangePasswordFormValues = {
   oldPassword: string;
diff --git a/apps/web/pages/settings/security/two-factor-auth.tsx b/apps/web/pages/settings/security/two-factor-auth.tsx
index 14bbf356c1..eb32c6719d 100644
--- a/apps/web/pages/settings/security/two-factor-auth.tsx
+++ b/apps/web/pages/settings/security/two-factor-auth.tsx
@@ -2,11 +2,7 @@ import { useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Badge } from "@calcom/ui/components/badge";
-import Loader from "@calcom/ui/v2/core/Loader";
-import Meta from "@calcom/ui/v2/core/Meta";
-import Switch from "@calcom/ui/v2/core/Switch";
-import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
+import { Badge, getSettingsLayout as getLayout, Loader, Meta, Switch } from "@calcom/ui";
 
 import DisableTwoFactorModal from "@components/settings/DisableTwoFactorModal";
 import EnableTwoFactorModal from "@components/settings/EnableTwoFactorModal";
diff --git a/apps/web/pages/settings/teams/[id]/onboard-members.tsx b/apps/web/pages/settings/teams/[id]/onboard-members.tsx
index 3d8bb6bd1e..6b7213f886 100644
--- a/apps/web/pages/settings/teams/[id]/onboard-members.tsx
+++ b/apps/web/pages/settings/teams/[id]/onboard-members.tsx
@@ -2,7 +2,7 @@ import Head from "next/head";
 
 import AddNewTeamMembers from "@calcom/features/ee/teams/components/AddNewTeamMembers";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import WizardLayout from "@calcom/ui/v2/core/layouts/WizardLayout";
+import { WizardLayout } from "@calcom/ui";
 
 const OnboardTeamMembersPage = () => {
   const { t } = useLocale();
diff --git a/apps/web/pages/settings/teams/new/index.tsx b/apps/web/pages/settings/teams/new/index.tsx
index fd0fa1e9be..a1b2da4ba0 100644
--- a/apps/web/pages/settings/teams/new/index.tsx
+++ b/apps/web/pages/settings/teams/new/index.tsx
@@ -1,7 +1,7 @@
 import Head from "next/head";
 
 import { CreateANewTeamForm } from "@calcom/features/ee/teams/components";
-import { getLayout } from "@calcom/ui/v2/core/layouts/WizardLayout";
+import { getWizardLayout as getLayout } from "@calcom/ui";
 
 const CreateNewTeamPage = () => {
   return (
diff --git a/apps/web/pages/signup.tsx b/apps/web/pages/signup.tsx
index 7b5aa44610..183fc9414c 100644
--- a/apps/web/pages/signup.tsx
+++ b/apps/web/pages/signup.tsx
@@ -7,9 +7,7 @@ import LicenseRequired from "@calcom/features/ee/common/components/v2/LicenseReq
 import { isSAMLLoginEnabled } from "@calcom/features/ee/sso/lib/saml";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { inferSSRProps } from "@calcom/types/inferSSRProps";
-import { Alert } from "@calcom/ui/Alert";
-import { Button } from "@calcom/ui/components/button";
-import { EmailField, PasswordField, TextField } from "@calcom/ui/components/form";
+import { Alert, Button, EmailField, PasswordField, TextField } from "@calcom/ui";
 import { HeadSeo } from "@calcom/web/components/seo/head-seo";
 import { asStringOrNull } from "@calcom/web/lib/asStringOrNull";
 import { WEBAPP_URL } from "@calcom/web/lib/config/constants";
diff --git a/apps/web/pages/success.tsx b/apps/web/pages/success.tsx
index 1fe90b1aee..c97a971673 100644
--- a/apps/web/pages/success.tsx
+++ b/apps/web/pages/success.tsx
@@ -34,8 +34,7 @@ import { localStorage } from "@calcom/lib/webstorage";
 import prisma, { baseUserSelect } from "@calcom/prisma";
 import { Prisma } from "@calcom/prisma/client";
 import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
-import { Icon } from "@calcom/ui/Icon";
-import { Button, EmailInput } from "@calcom/ui/components";
+import { Button, EmailInput, Icon } from "@calcom/ui";
 
 import { timeZone } from "@lib/clock";
 import { inferSSRProps } from "@lib/types/inferSSRProps";
diff --git a/apps/web/pages/team/[slug].tsx b/apps/web/pages/team/[slug].tsx
index 27b2033ad7..33c8ca046c 100644
--- a/apps/web/pages/team/[slug].tsx
+++ b/apps/web/pages/team/[slug].tsx
@@ -3,7 +3,7 @@ import classNames from "classnames";
 import { GetServerSidePropsContext } from "next";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 
 import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
 import { CAL_URL } from "@calcom/lib/constants";
@@ -12,9 +12,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import { getTeamWithMembers } from "@calcom/lib/server/queries/teams";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
-import { Icon } from "@calcom/ui/Icon";
-import { Button, Avatar } from "@calcom/ui/components";
-import EventTypeDescription from "@calcom/ui/v2/modules/event-types/EventTypeDescription";
+import { Avatar, Button, EventTypeDescription, Icon } from "@calcom/ui";
 
 import { useExposePlanGlobally } from "@lib/hooks/useExposePlanGlobally";
 import { useToggleQuery } from "@lib/hooks/useToggleQuery";
diff --git a/apps/web/pages/teams/index.tsx b/apps/web/pages/teams/index.tsx
index 8497063478..3f2248c50c 100644
--- a/apps/web/pages/teams/index.tsx
+++ b/apps/web/pages/teams/index.tsx
@@ -1,9 +1,7 @@
 import { TeamsListing } from "@calcom/features/ee/teams/components";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui/Icon";
-import { Button } from "@calcom/ui/components/button";
-import { Shell } from "@calcom/ui/v2";
+import { Button, Icon, Shell } from "@calcom/ui";
 
 function Teams() {
   const { t } = useLocale();
diff --git a/apps/web/pages/video/meeting-ended/[uid].tsx b/apps/web/pages/video/meeting-ended/[uid].tsx
index e3c8d2d35c..8bba38db7e 100644
--- a/apps/web/pages/video/meeting-ended/[uid].tsx
+++ b/apps/web/pages/video/meeting-ended/[uid].tsx
@@ -4,8 +4,7 @@ import dayjs from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { detectBrowserTimeFormat } from "@calcom/lib/timeFormat";
 import prisma, { bookingMinimalSelect } from "@calcom/prisma";
-import Button from "@calcom/ui/Button";
-import { Icon } from "@calcom/ui/Icon";
+import { Button, Icon } from "@calcom/ui";
 
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 
diff --git a/apps/web/pages/video/meeting-not-started/[uid].tsx b/apps/web/pages/video/meeting-not-started/[uid].tsx
index 59c088aae7..c8fbc8a7c6 100644
--- a/apps/web/pages/video/meeting-not-started/[uid].tsx
+++ b/apps/web/pages/video/meeting-not-started/[uid].tsx
@@ -5,8 +5,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { detectBrowserTimeFormat } from "@calcom/lib/timeFormat";
 import prisma, { bookingMinimalSelect } from "@calcom/prisma";
 import type { inferSSRProps } from "@calcom/types/inferSSRProps";
-import Button from "@calcom/ui/Button";
-import { Icon } from "@calcom/ui/Icon";
+import { Button, Icon } from "@calcom/ui";
 
 import { HeadSeo } from "@components/seo/head-seo";
 
diff --git a/apps/web/pages/video/no-meeting-found.tsx b/apps/web/pages/video/no-meeting-found.tsx
index 068d85738e..70d41d5a52 100644
--- a/apps/web/pages/video/no-meeting-found.tsx
+++ b/apps/web/pages/video/no-meeting-found.tsx
@@ -1,6 +1,5 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import Button from "@calcom/ui/Button";
-import { Icon } from "@calcom/ui/Icon";
+import { Button, Icon } from "@calcom/ui";
 
 import { HeadSeo } from "@components/seo/head-seo";
 
diff --git a/apps/web/pages/workflows/[workflow].tsx b/apps/web/pages/workflows/[workflow].tsx
index 44d7bdeae3..02cf9fa15b 100644
--- a/apps/web/pages/workflows/[workflow].tsx
+++ b/apps/web/pages/workflows/[workflow].tsx
@@ -1,7 +1,7 @@
 import { GetStaticPaths, GetStaticProps } from "next";
 import { z } from "zod";
 
-export { default } from "@calcom/features/ee/workflows/pages/v2/workflow";
+export { default } from "@calcom/features/ee/workflows/pages/workflow";
 
 const querySchema = z.object({
   workflow: z.string(),
diff --git a/apps/web/pages/workflows/index.tsx b/apps/web/pages/workflows/index.tsx
index 740b209b29..a0ea681736 100644
--- a/apps/web/pages/workflows/index.tsx
+++ b/apps/web/pages/workflows/index.tsx
@@ -1 +1 @@
-export { default } from "@calcom/features/ee/workflows/pages/v2/index";
+export { default } from "@calcom/features/ee/workflows/pages/index";
diff --git a/apps/website b/apps/website
index 15c60e8b1c..4aa60d8665 160000
--- a/apps/website
+++ b/apps/website
@@ -1 +1 @@
-Subproject commit 15c60e8b1ca2a0cf63fea7bb6402e914b6992011
+Subproject commit 4aa60d8665314e522ac371e7c0e55b48a541ab82
diff --git a/packages/app-store/_components/AppCard.tsx b/packages/app-store/_components/AppCard.tsx
index 21059557f5..c935b5cc80 100644
--- a/packages/app-store/_components/AppCard.tsx
+++ b/packages/app-store/_components/AppCard.tsx
@@ -2,7 +2,7 @@ import { useAutoAnimate } from "@formkit/auto-animate/react";
 import Link from "next/link";
 
 import { RouterOutputs } from "@calcom/trpc/react";
-import { Switch } from "@calcom/ui/v2";
+import { Switch } from "@calcom/ui";
 import OmniInstallAppButton from "@calcom/web/components/apps/OmniInstallAppButton";
 
 import { SetAppDataGeneric } from "../EventTypeAppContext";
diff --git a/packages/app-store/applecalendar/index.ts b/packages/app-store/applecalendar/index.ts
index db3c2b10b2..5373eb04ef 100644
--- a/packages/app-store/applecalendar/index.ts
+++ b/packages/app-store/applecalendar/index.ts
@@ -1,4 +1,3 @@
 export * as api from "./api";
-export * as components from "./components";
 export * as lib from "./lib";
 export { metadata } from "./_metadata";
diff --git a/packages/app-store/applecalendar/pages/setup/index.tsx b/packages/app-store/applecalendar/pages/setup/index.tsx
index 1cbc6ab4f8..71436c4114 100644
--- a/packages/app-store/applecalendar/pages/setup/index.tsx
+++ b/packages/app-store/applecalendar/pages/setup/index.tsx
@@ -4,8 +4,7 @@ import { useForm } from "react-hook-form";
 import { Toaster } from "react-hot-toast";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, Form, TextField } from "@calcom/ui/components";
-import { Alert } from "@calcom/ui/v2";
+import { Alert, Button, Form, TextField } from "@calcom/ui";
 
 export default function AppleCalendarSetup() {
   const { t } = useLocale();
diff --git a/packages/app-store/around/index.ts b/packages/app-store/around/index.ts
index a698d1f5c5..5d372ceda3 100644
--- a/packages/app-store/around/index.ts
+++ b/packages/app-store/around/index.ts
@@ -1,3 +1,2 @@
 export * as api from "./api";
-export * as components from "./components";
 export { metadata } from "./_metadata";
diff --git a/packages/app-store/caldavcalendar/index.ts b/packages/app-store/caldavcalendar/index.ts
index b046fb8884..24c468e15a 100644
--- a/packages/app-store/caldavcalendar/index.ts
+++ b/packages/app-store/caldavcalendar/index.ts
@@ -23,5 +23,4 @@ export const metadata = {
 } as App;
 
 export * as api from "./api";
-export * as components from "./components";
 export * as lib from "./lib";
diff --git a/packages/app-store/caldavcalendar/pages/setup/index.tsx b/packages/app-store/caldavcalendar/pages/setup/index.tsx
index 24a8562d70..bfcc1fe61d 100644
--- a/packages/app-store/caldavcalendar/pages/setup/index.tsx
+++ b/packages/app-store/caldavcalendar/pages/setup/index.tsx
@@ -4,8 +4,7 @@ import { useForm } from "react-hook-form";
 import { Toaster } from "react-hot-toast";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, Form, TextField } from "@calcom/ui/components";
-import { Alert } from "@calcom/ui/v2";
+import { Alert, Button, Form, TextField } from "@calcom/ui";
 
 export default function CalDavCalendarSetup() {
   const { t } = useLocale();
diff --git a/packages/app-store/closecom/pages/setup/index.tsx b/packages/app-store/closecom/pages/setup/index.tsx
index efc5b5434e..d3c76da6f4 100644
--- a/packages/app-store/closecom/pages/setup/index.tsx
+++ b/packages/app-store/closecom/pages/setup/index.tsx
@@ -1,14 +1,13 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter } from "next/router";
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 import { Check, X } from "react-feather";
-import { useForm, Controller } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 import { Toaster } from "react-hot-toast";
 import z from "zod";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, TextField, Form } from "@calcom/ui/components";
-import { showToast } from "@calcom/ui/v2";
+import { Button, Form, showToast, TextField } from "@calcom/ui";
 
 const formSchema = z.object({
   api_key: z.string(),
diff --git a/packages/app-store/components.tsx b/packages/app-store/components.tsx
index 98612f88d2..932f51d343 100644
--- a/packages/app-store/components.tsx
+++ b/packages/app-store/components.tsx
@@ -7,7 +7,7 @@ import { trpc } from "@calcom/trpc/react";
 import type { App } from "@calcom/types/App";
 
 import { InstallAppButtonMap } from "./apps.browser.generated";
-import { InstallAppButtonProps } from "./types";
+import type { InstallAppButtonProps } from "./types";
 
 export const InstallAppButtonWithoutPlanCheck = (
   props: {
diff --git a/packages/app-store/ee/routing-forms/components/FormActions.tsx b/packages/app-store/ee/routing-forms/components/FormActions.tsx
index a18ab89b3d..bc2855ec4b 100644
--- a/packages/app-store/ee/routing-forms/components/FormActions.tsx
+++ b/packages/app-store/ee/routing-forms/components/FormActions.tsx
@@ -1,6 +1,6 @@
-import { useRouter } from "next/router";
 import type { NextRouter } from "next/router";
-import { useState, createContext, useContext, forwardRef } from "react";
+import { useRouter } from "next/router";
+import { createContext, forwardRef, useContext, useState } from "react";
 import { useForm } from "react-hook-form";
 import { v4 as uuidv4 } from "uuid";
 import { z } from "zod";
@@ -9,19 +9,24 @@ import { classNames } from "@calcom/lib";
 import { CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui";
-import ConfirmationDialogContent from "@calcom/ui/ConfirmationDialogContent";
-import { Dialog, DialogClose, DialogContent } from "@calcom/ui/Dialog";
-import { Button, ButtonProps } from "@calcom/ui/components/button";
-import { Form, TextField, TextAreaField } from "@calcom/ui/components/form";
 import {
+  Button,
+  ButtonProps,
+  ConfirmationDialogContent,
+  Dialog,
+  DialogClose,
+  DialogContent,
   Dropdown,
-  DropdownMenuItem,
   DropdownMenuContent,
+  DropdownMenuItem,
   DropdownMenuTrigger,
+  Form,
+  Icon,
   showToast,
   Switch,
-} from "@calcom/ui/v2";
+  TextAreaField,
+  TextField,
+} from "@calcom/ui";
 
 import { EmbedButton, EmbedDialog } from "@components/Embed";
 
diff --git a/packages/app-store/ee/routing-forms/components/RoutingNavBar.tsx b/packages/app-store/ee/routing-forms/components/RoutingNavBar.tsx
index b9a83dffa2..e3fe52dd9b 100644
--- a/packages/app-store/ee/routing-forms/components/RoutingNavBar.tsx
+++ b/packages/app-store/ee/routing-forms/components/RoutingNavBar.tsx
@@ -1,4 +1,4 @@
-import { HorizontalTabs } from "@calcom/ui/v2";
+import { HorizontalTabs } from "@calcom/ui";
 
 import { getSerializableForm } from "../lib/getSerializableForm";
 
diff --git a/packages/app-store/ee/routing-forms/components/SingleForm.tsx b/packages/app-store/ee/routing-forms/components/SingleForm.tsx
index c0df90ee79..b9e177aaf8 100644
--- a/packages/app-store/ee/routing-forms/components/SingleForm.tsx
+++ b/packages/app-store/ee/routing-forms/components/SingleForm.tsx
@@ -1,6 +1,6 @@
 import { App_RoutingForms_Form } from "@prisma/client";
 import { useEffect, useState } from "react";
-import { useForm, UseFormReturn, Controller } from "react-hook-form";
+import { Controller, useForm, UseFormReturn } from "react-hook-form";
 
 import useApp from "@calcom/lib/hooks/useApp";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -8,24 +8,35 @@ import { trpc } from "@calcom/trpc/react";
 import {
   AppGetServerSidePropsContext,
   AppPrisma,
-  AppUser,
   AppSsrInit,
+  AppUser,
 } from "@calcom/types/AppGetServerSideProps";
-import { Icon } from "@calcom/ui";
-import { Dialog, DialogContent, DialogClose, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
-import { Button, ButtonGroup } from "@calcom/ui/components";
-import { Form, TextAreaField, TextField } from "@calcom/ui/components/form";
-import { showToast, DropdownMenuSeparator, Tooltip, VerticalDivider } from "@calcom/ui/v2";
-import Meta from "@calcom/ui/v2/core/Meta";
-import SettingsToggle from "@calcom/ui/v2/core/SettingsToggle";
-import { ShellMain } from "@calcom/ui/v2/core/Shell";
-import Banner from "@calcom/ui/v2/core/banner";
+import {
+  Banner,
+  Button,
+  ButtonGroup,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DropdownMenuSeparator,
+  Form,
+  Icon,
+  Meta,
+  SettingsToggle,
+  ShellMain,
+  showToast,
+  TextAreaField,
+  TextField,
+  Tooltip,
+  VerticalDivider,
+} from "@calcom/ui";
 
 import { getSerializableForm } from "../lib/getSerializableForm";
 import { processRoute } from "../lib/processRoute";
 import { RoutingPages } from "../pages/route-builder/[...appPages]";
-import { SerializableForm } from "../types/types";
-import { Response, Route } from "../types/types";
+import { Response, Route, SerializableForm } from "../types/types";
 import { FormAction, FormActionsDropdown, FormActionsProvider } from "./FormActions";
 import FormInputFields from "./FormInputFields";
 import RoutingNavBar from "./RoutingNavBar";
diff --git a/packages/app-store/ee/routing-forms/components/react-awesome-query-builder/widgets.tsx b/packages/app-store/ee/routing-forms/components/react-awesome-query-builder/widgets.tsx
index 1812d05425..e5292f4425 100644
--- a/packages/app-store/ee/routing-forms/components/react-awesome-query-builder/widgets.tsx
+++ b/packages/app-store/ee/routing-forms/components/react-awesome-query-builder/widgets.tsx
@@ -1,18 +1,16 @@
 import { ChangeEvent } from "react";
 import {
-  FieldProps,
-  ConjsProps,
-  ButtonProps,
   ButtonGroupProps,
+  ButtonProps,
+  ConjsProps,
+  FieldProps,
+  NumberWidgetProps,
   ProviderProps,
   SelectWidgetProps,
-  NumberWidgetProps,
   TextWidgetProps,
 } from "react-awesome-query-builder";
 
-import { Icon } from "@calcom/ui/Icon";
-import { Button as CalButton, TextArea, TextField } from "@calcom/ui/components";
-import { SelectWithValidation as Select } from "@calcom/ui/v2";
+import { Button as CalButton, Icon, SelectWithValidation as Select, TextArea, TextField } from "@calcom/ui";
 
 // import { mapListValues } from "../../../../utils/stuff";
 
diff --git a/packages/app-store/ee/routing-forms/index.ts b/packages/app-store/ee/routing-forms/index.ts
index a698d1f5c5..5d372ceda3 100644
--- a/packages/app-store/ee/routing-forms/index.ts
+++ b/packages/app-store/ee/routing-forms/index.ts
@@ -1,3 +1,2 @@
 export * as api from "./api";
-export * as components from "./components";
 export { metadata } from "./_metadata";
diff --git a/packages/app-store/ee/routing-forms/pages/form-edit/[...appPages].tsx b/packages/app-store/ee/routing-forms/pages/form-edit/[...appPages].tsx
index a541745d20..9e32e10302 100644
--- a/packages/app-store/ee/routing-forms/pages/form-edit/[...appPages].tsx
+++ b/packages/app-store/ee/routing-forms/pages/form-edit/[...appPages].tsx
@@ -1,21 +1,27 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { App_RoutingForms_Form } from "@prisma/client";
 import { useEffect, useState } from "react";
-import { Controller, useFieldArray } from "react-hook-form";
-import { UseFormReturn } from "react-hook-form";
+import { Controller, useFieldArray, UseFormReturn } from "react-hook-form";
 import { v4 as uuidv4 } from "uuid";
 
 import classNames from "@calcom/lib/classNames";
-import { Icon } from "@calcom/ui";
-import { Button, TextAreaField, TextField } from "@calcom/ui/components";
-import { EmptyScreen, SelectField, Shell } from "@calcom/ui/v2";
-import { BooleanToggleGroupField } from "@calcom/ui/v2/core/form/BooleanToggleGroup";
-import FormCard from "@calcom/ui/v2/core/form/FormCard";
+import {
+  BooleanToggleGroupField,
+  Button,
+  EmptyScreen,
+  FormCard,
+  Icon,
+  SelectField,
+  Shell,
+  TextAreaField,
+  TextField,
+} from "@calcom/ui";
 
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 
-import { getServerSidePropsForSingleFormView as getServerSideProps } from "../../components/SingleForm";
-import SingleForm from "../../components/SingleForm";
+import SingleForm, {
+  getServerSidePropsForSingleFormView as getServerSideProps,
+} from "../../components/SingleForm";
 import { SerializableForm } from "../../types/types";
 
 export { getServerSideProps };
diff --git a/packages/app-store/ee/routing-forms/pages/forms/[...appPages].tsx b/packages/app-store/ee/routing-forms/pages/forms/[...appPages].tsx
index 7418cc2578..c9528d2222 100644
--- a/packages/app-store/ee/routing-forms/pages/forms/[...appPages].tsx
+++ b/packages/app-store/ee/routing-forms/pages/forms/[...appPages].tsx
@@ -5,12 +5,18 @@ import useApp from "@calcom/lib/hooks/useApp";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { AppGetServerSidePropsContext, AppPrisma, AppUser } from "@calcom/types/AppGetServerSideProps";
-import { Icon } from "@calcom/ui/Icon";
-import { Badge, ButtonGroup } from "@calcom/ui/components";
-import { DropdownMenuSeparator, Tooltip } from "@calcom/ui/v2";
-import { EmptyScreen } from "@calcom/ui/v2";
-import { List, ListLinkItem } from "@calcom/ui/v2/core/List";
-import Shell, { ShellMain } from "@calcom/ui/v2/core/Shell";
+import {
+  Badge,
+  ButtonGroup,
+  DropdownMenuSeparator,
+  EmptyScreen,
+  Icon,
+  List,
+  ListLinkItem,
+  Shell,
+  ShellMain,
+  Tooltip,
+} from "@calcom/ui";
 
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 
diff --git a/packages/app-store/ee/routing-forms/pages/reporting/[...appPages].tsx b/packages/app-store/ee/routing-forms/pages/reporting/[...appPages].tsx
index 41ce834403..ae16100660 100644
--- a/packages/app-store/ee/routing-forms/pages/reporting/[...appPages].tsx
+++ b/packages/app-store/ee/routing-forms/pages/reporting/[...appPages].tsx
@@ -1,18 +1,26 @@
-import React, { useRef, useState, useCallback } from "react";
-import { Query, Config, Builder, Utils as QbUtils, JsonLogicResult } from "react-awesome-query-builder";
-import { JsonTree, ImmutableTree, BuilderProps } from "react-awesome-query-builder";
+import React, { useCallback, useRef, useState } from "react";
+import {
+  Builder,
+  BuilderProps,
+  Config,
+  ImmutableTree,
+  JsonLogicResult,
+  JsonTree,
+  Query,
+  Utils as QbUtils,
+} from "react-awesome-query-builder";
 
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { inferSSRProps } from "@calcom/types/inferSSRProps";
-import { Button } from "@calcom/ui";
-import { Shell } from "@calcom/ui/v2";
+import { Button, Shell } from "@calcom/ui";
 
 import { useInViewObserver } from "@lib/hooks/useInViewObserver";
 
-import SingleForm from "../../components/SingleForm";
-import { getServerSidePropsForSingleFormView as getServerSideProps } from "../../components/SingleForm";
+import SingleForm, {
+  getServerSidePropsForSingleFormView as getServerSideProps,
+} from "../../components/SingleForm";
 import QueryBuilderInitialConfig from "../../components/react-awesome-query-builder/config/config";
 import "../../components/react-awesome-query-builder/styles.css";
 import { JsonLogicQuery } from "../../jsonLogicToPrisma";
diff --git a/packages/app-store/ee/routing-forms/pages/route-builder/[...appPages].tsx b/packages/app-store/ee/routing-forms/pages/route-builder/[...appPages].tsx
index 6fab53c1aa..f646f58c4e 100644
--- a/packages/app-store/ee/routing-forms/pages/route-builder/[...appPages].tsx
+++ b/packages/app-store/ee/routing-forms/pages/route-builder/[...appPages].tsx
@@ -1,19 +1,25 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { App_RoutingForms_Form } from "@prisma/client";
-import React, { useState, useCallback } from "react";
-import { Query, Config, Builder, Utils as QbUtils } from "react-awesome-query-builder";
+import React, { useCallback, useState } from "react";
+import { Builder, Config, Query, Utils as QbUtils } from "react-awesome-query-builder";
 // types
-import { JsonTree, ImmutableTree, BuilderProps } from "react-awesome-query-builder";
+import { BuilderProps, ImmutableTree, JsonTree } from "react-awesome-query-builder";
 
 import { trpc } from "@calcom/trpc/react";
 import { inferSSRProps } from "@calcom/types/inferSSRProps";
-import { Icon } from "@calcom/ui";
-import { Button, TextField, TextArea } from "@calcom/ui/components";
-import { SelectWithValidation as Select, Shell } from "@calcom/ui/v2";
-import FormCard from "@calcom/ui/v2/core/form/FormCard";
+import {
+  Button,
+  FormCard,
+  Icon,
+  SelectWithValidation as Select,
+  Shell,
+  TextArea,
+  TextField,
+} from "@calcom/ui";
 
-import { getServerSidePropsForSingleFormView as getServerSideProps } from "../../components/SingleForm";
-import SingleForm from "../../components/SingleForm";
+import SingleForm, {
+  getServerSidePropsForSingleFormView as getServerSideProps,
+} from "../../components/SingleForm";
 import QueryBuilderInitialConfig from "../../components/react-awesome-query-builder/config/config";
 import "../../components/react-awesome-query-builder/styles.css";
 import { SerializableForm } from "../../types/types";
diff --git a/packages/app-store/ee/routing-forms/pages/routing-link/[...appPages].tsx b/packages/app-store/ee/routing-forms/pages/routing-link/[...appPages].tsx
index 20ef9feef0..f3910db58d 100644
--- a/packages/app-store/ee/routing-forms/pages/routing-link/[...appPages].tsx
+++ b/packages/app-store/ee/routing-forms/pages/routing-link/[...appPages].tsx
@@ -1,7 +1,6 @@
 import Head from "next/head";
 import { useRouter } from "next/router";
-import { useState, useRef, FormEvent } from "react";
-import { useEffect } from "react";
+import { FormEvent, useEffect, useRef, useState } from "react";
 import { Toaster } from "react-hot-toast";
 import { v4 as uuidv4 } from "uuid";
 
@@ -13,8 +12,7 @@ import useTheme from "@calcom/lib/hooks/useTheme";
 import { trpc } from "@calcom/trpc/react";
 import { AppGetServerSidePropsContext, AppPrisma } from "@calcom/types/AppGetServerSideProps";
 import { inferSSRProps } from "@calcom/types/inferSSRProps";
-import { Button } from "@calcom/ui/components";
-import showToast from "@calcom/ui/v2/core/notifications";
+import { Button, showToast } from "@calcom/ui";
 
 import { useExposePlanGlobally } from "@lib/hooks/useExposePlanGlobally";
 
diff --git a/packages/app-store/exchange2013calendar/pages/setup/index.tsx b/packages/app-store/exchange2013calendar/pages/setup/index.tsx
index 436abd1df2..6ae478b988 100644
--- a/packages/app-store/exchange2013calendar/pages/setup/index.tsx
+++ b/packages/app-store/exchange2013calendar/pages/setup/index.tsx
@@ -4,8 +4,7 @@ import { useForm } from "react-hook-form";
 import { Toaster } from "react-hot-toast";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, Form, TextField } from "@calcom/ui/components";
-import { Alert } from "@calcom/ui/v2";
+import { Alert, Button, Form, TextField } from "@calcom/ui";
 
 export default function Exchange2013CalendarSetup() {
   const { t } = useLocale();
diff --git a/packages/app-store/exchange2016calendar/pages/setup/index.tsx b/packages/app-store/exchange2016calendar/pages/setup/index.tsx
index 62a9d37544..da536f3196 100644
--- a/packages/app-store/exchange2016calendar/pages/setup/index.tsx
+++ b/packages/app-store/exchange2016calendar/pages/setup/index.tsx
@@ -4,8 +4,7 @@ import { useForm } from "react-hook-form";
 import { Toaster } from "react-hot-toast";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, Form, TextField } from "@calcom/ui/components";
-import { Alert } from "@calcom/ui/v2";
+import { Alert, Button, Form, TextField } from "@calcom/ui";
 
 export default function Exchange2016CalendarSetup() {
   const { t } = useLocale();
diff --git a/packages/app-store/exchangecalendar/pages/setup/index.tsx b/packages/app-store/exchangecalendar/pages/setup/index.tsx
index a47cfb9fd2..6a683d29ec 100644
--- a/packages/app-store/exchangecalendar/pages/setup/index.tsx
+++ b/packages/app-store/exchangecalendar/pages/setup/index.tsx
@@ -6,8 +6,7 @@ import { Toaster } from "react-hot-toast";
 import z from "zod";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, EmailField, Form, PasswordField, TextField } from "@calcom/ui/components";
-import { Alert, SelectField, Switch } from "@calcom/ui/v2";
+import { Alert, Button, EmailField, Form, PasswordField, SelectField, Switch, TextField } from "@calcom/ui";
 
 import { ExchangeAuthentication } from "../../enums";
 
diff --git a/packages/app-store/fathom/extensions/EventTypeAppCard.tsx b/packages/app-store/fathom/extensions/EventTypeAppCard.tsx
index dc6ee96165..77c5b45b59 100644
--- a/packages/app-store/fathom/extensions/EventTypeAppCard.tsx
+++ b/packages/app-store/fathom/extensions/EventTypeAppCard.tsx
@@ -3,7 +3,7 @@ import { useState } from "react";
 import { useAppContextWithSchema } from "@calcom/app-store/EventTypeAppContext";
 import AppCard from "@calcom/app-store/_components/AppCard";
 import type { EventTypeAppCardComponent } from "@calcom/app-store/types";
-import { TextField } from "@calcom/ui/components/form";
+import { TextField } from "@calcom/ui";
 
 import { appDataSchema } from "../zod";
 
diff --git a/packages/app-store/ga4/extensions/EventTypeAppCard.tsx b/packages/app-store/ga4/extensions/EventTypeAppCard.tsx
index dc6ee96165..77c5b45b59 100644
--- a/packages/app-store/ga4/extensions/EventTypeAppCard.tsx
+++ b/packages/app-store/ga4/extensions/EventTypeAppCard.tsx
@@ -3,7 +3,7 @@ import { useState } from "react";
 import { useAppContextWithSchema } from "@calcom/app-store/EventTypeAppContext";
 import AppCard from "@calcom/app-store/_components/AppCard";
 import type { EventTypeAppCardComponent } from "@calcom/app-store/types";
-import { TextField } from "@calcom/ui/components/form";
+import { TextField } from "@calcom/ui";
 
 import { appDataSchema } from "../zod";
 
diff --git a/packages/app-store/giphy/components/SearchDialog.tsx b/packages/app-store/giphy/components/SearchDialog.tsx
index a9b926c9ba..f891b0a965 100644
--- a/packages/app-store/giphy/components/SearchDialog.tsx
+++ b/packages/app-store/giphy/components/SearchDialog.tsx
@@ -1,12 +1,9 @@
-import { SearchIcon, LinkIcon } from "@heroicons/react/outline";
-import { useState } from "react";
-import { Dispatch, SetStateAction } from "react";
+import { LinkIcon, SearchIcon } from "@heroicons/react/outline";
+import { Dispatch, SetStateAction, useState } from "react";
 
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Alert } from "@calcom/ui/Alert";
-import Button from "@calcom/ui/Button";
-import { Dialog, DialogClose, DialogContent, DialogFooter } from "@calcom/ui/Dialog";
+import { Alert, Button, Dialog, DialogClose, DialogContent, DialogFooter } from "@calcom/ui";
 
 interface ISearchDialog {
   isOpenDialog: boolean;
diff --git a/packages/app-store/giphy/components/SelectGifInput.tsx b/packages/app-store/giphy/components/SelectGifInput.tsx
index 199571a51c..809704ea38 100644
--- a/packages/app-store/giphy/components/SelectGifInput.tsx
+++ b/packages/app-store/giphy/components/SelectGifInput.tsx
@@ -1,8 +1,8 @@
-import { PlusIcon, PencilAltIcon, XIcon } from "@heroicons/react/solid";
+import { PencilAltIcon, PlusIcon, XIcon } from "@heroicons/react/solid";
 import { useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import Button from "@calcom/ui/Button";
+import { Button } from "@calcom/ui";
 
 import { SearchDialog } from "./SearchDialog";
 
@@ -35,7 +35,7 @@ export default function SelectGifInput(props: ISelectGifInput) {
 
         {selectedGif && (
           <Button
-            color="warn"
+            color="destructive"
             type="button"
             StartIcon={XIcon}
             onClick={() => {
diff --git a/packages/app-store/giphy/index.ts b/packages/app-store/giphy/index.ts
index 19f36d184d..5373eb04ef 100644
--- a/packages/app-store/giphy/index.ts
+++ b/packages/app-store/giphy/index.ts
@@ -1,4 +1,3 @@
 export * as api from "./api";
 export * as lib from "./lib";
 export { metadata } from "./_metadata";
-export * as components from "./components";
diff --git a/packages/app-store/office365video/components/AccountDialog.tsx b/packages/app-store/office365video/components/AccountDialog.tsx
index dc99603b78..ceae5db1d3 100644
--- a/packages/app-store/office365video/components/AccountDialog.tsx
+++ b/packages/app-store/office365video/components/AccountDialog.tsx
@@ -1,12 +1,5 @@
-import Button from "@calcom/ui/Button";
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogProps,
-} from "@calcom/ui/Dialog";
+import type { DialogProps } from "@calcom/ui";
+import { Button, Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui";
 
 import useAddAppMutation from "../../_utils/useAddAppMutation";
 
@@ -14,7 +7,7 @@ export function AccountDialog(props: DialogProps) {
   const mutation = useAddAppMutation("office365_video");
   return (
     <Dialog name="Account check" {...props}>
-      <DialogContent>
+      <DialogContent type="confirmation">
         <DialogHeader
           title="Connecting with MS Teams requires a work/school Microsoft account."
           subtitle="If you continue with a personal account you will receive an error"
diff --git a/packages/app-store/ping/index.ts b/packages/app-store/ping/index.ts
index a698d1f5c5..5d372ceda3 100644
--- a/packages/app-store/ping/index.ts
+++ b/packages/app-store/ping/index.ts
@@ -1,3 +1,2 @@
 export * as api from "./api";
-export * as components from "./components";
 export { metadata } from "./_metadata";
diff --git a/packages/app-store/qr_code/extensions/EventTypeAppCard.tsx b/packages/app-store/qr_code/extensions/EventTypeAppCard.tsx
index 81bbb6fdea..9146f836a1 100644
--- a/packages/app-store/qr_code/extensions/EventTypeAppCard.tsx
+++ b/packages/app-store/qr_code/extensions/EventTypeAppCard.tsx
@@ -3,7 +3,7 @@ import { useState } from "react";
 import { useAppContextWithSchema } from "@calcom/app-store/EventTypeAppContext";
 import AppCard from "@calcom/app-store/_components/AppCard";
 import type { EventTypeAppCardComponent } from "@calcom/app-store/types";
-import { Tooltip } from "@calcom/ui/v2";
+import { Tooltip } from "@calcom/ui";
 
 import { appDataSchema } from "../zod";
 
diff --git a/packages/app-store/rainbow/components/RainbowInstallForm.tsx b/packages/app-store/rainbow/components/RainbowInstallForm.tsx
index 1c6654ef56..5ef2dc0c8c 100644
--- a/packages/app-store/rainbow/components/RainbowInstallForm.tsx
+++ b/packages/app-store/rainbow/components/RainbowInstallForm.tsx
@@ -3,7 +3,7 @@ import { z } from "zod";
 import { SetAppDataGeneric } from "@calcom/app-store/EventTypeAppContext";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { SUPPORTED_CHAINS_FOR_FORM } from "@calcom/rainbow/utils/ethereum";
-import Select from "@calcom/ui/v2/core/form/select";
+import { Select } from "@calcom/ui";
 
 import { appDataSchema } from "../zod";
 
diff --git a/packages/app-store/rainbow/components/RainbowKit.tsx b/packages/app-store/rainbow/components/RainbowKit.tsx
index bb45d1c77d..9f417936b9 100644
--- a/packages/app-store/rainbow/components/RainbowKit.tsx
+++ b/packages/app-store/rainbow/components/RainbowKit.tsx
@@ -1,25 +1,22 @@
 import {
   ConnectButton,
-  getDefaultWallets,
-  RainbowKitProvider,
   darkTheme,
+  getDefaultWallets,
   lightTheme,
+  RainbowKitProvider,
 } from "@rainbow-me/rainbowkit";
 import "@rainbow-me/rainbowkit/styles.css";
 import { useTheme } from "next-themes";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { Trans } from "react-i18next";
-import { configureChains, createClient, WagmiConfig } from "wagmi";
-import { useAccount, useSignMessage } from "wagmi";
+import { configureChains, createClient, useAccount, useSignMessage, WagmiConfig } from "wagmi";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui/Icon";
-import { SkeletonText } from "@calcom/ui/v2";
-import showToast from "@calcom/ui/v2/core/notifications";
+import { Icon, showToast, SkeletonText } from "@calcom/ui";
 
-import { getProviders, ETH_MESSAGE, SUPPORTED_CHAINS } from "../utils/ethereum";
+import { ETH_MESSAGE, getProviders, SUPPORTED_CHAINS } from "../utils/ethereum";
 
 const { chains, provider } = configureChains(SUPPORTED_CHAINS, getProviders());
 
diff --git a/packages/app-store/riverside/index.ts b/packages/app-store/riverside/index.ts
index a698d1f5c5..5d372ceda3 100644
--- a/packages/app-store/riverside/index.ts
+++ b/packages/app-store/riverside/index.ts
@@ -1,3 +1,2 @@
 export * as api from "./api";
-export * as components from "./components";
 export { metadata } from "./_metadata";
diff --git a/packages/app-store/sendgrid/pages/setup/index.tsx b/packages/app-store/sendgrid/pages/setup/index.tsx
index 9fecd4df81..1797714f11 100644
--- a/packages/app-store/sendgrid/pages/setup/index.tsx
+++ b/packages/app-store/sendgrid/pages/setup/index.tsx
@@ -1,15 +1,12 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter } from "next/router";
-import { useState, useEffect } from "react";
-import { useForm, Controller } from "react-hook-form";
+import { useEffect, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
 import { Toaster } from "react-hot-toast";
 import z from "zod";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui/Icon";
-import { Button } from "@calcom/ui/components/button";
-import { Form, TextField } from "@calcom/ui/components/form";
-import { showToast } from "@calcom/ui/v2";
+import { Button, Form, Icon, showToast, TextField } from "@calcom/ui";
 
 const formSchema = z.object({
   api_key: z.string(),
diff --git a/packages/app-store/stripepayment/extensions/EventTypeAppCard.tsx b/packages/app-store/stripepayment/extensions/EventTypeAppCard.tsx
index 7548c075a4..0a02002824 100644
--- a/packages/app-store/stripepayment/extensions/EventTypeAppCard.tsx
+++ b/packages/app-store/stripepayment/extensions/EventTypeAppCard.tsx
@@ -5,8 +5,7 @@ import { useAppContextWithSchema } from "@calcom/app-store/EventTypeAppContext";
 import AppCard from "@calcom/app-store/_components/AppCard";
 import type { EventTypeAppCardComponent } from "@calcom/app-store/types";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { TextField } from "@calcom/ui/components";
-import { Alert } from "@calcom/ui/v2";
+import { Alert, TextField } from "@calcom/ui";
 
 import { appDataSchema } from "../zod";
 
diff --git a/packages/app-store/typeform/index.ts b/packages/app-store/typeform/index.ts
index a698d1f5c5..5d372ceda3 100644
--- a/packages/app-store/typeform/index.ts
+++ b/packages/app-store/typeform/index.ts
@@ -1,3 +1,2 @@
 export * as api from "./api";
-export * as components from "./components";
 export { metadata } from "./_metadata";
diff --git a/packages/app-store/types.d.ts b/packages/app-store/types.d.ts
index 5bb252df4f..081887a80c 100644
--- a/packages/app-store/types.d.ts
+++ b/packages/app-store/types.d.ts
@@ -3,8 +3,7 @@ import { z } from "zod";
 
 import { _EventTypeModel } from "@calcom/prisma/zod";
 import { RouterOutputs } from "@calcom/trpc/react";
-import { ButtonBaseProps } from "@calcom/ui/Button";
-import { ButtonBaseProps as v2ButtonBaseProps } from "@calcom/ui/components/button";
+import { ButtonProps } from "@calcom/ui";
 
 export type IntegrationOAuthCallbackState = {
   returnTo: string;
@@ -12,13 +11,10 @@ export type IntegrationOAuthCallbackState = {
 
 export interface InstallAppButtonProps {
   render: (
-    renderProps:
-      | Omit<ButtonBaseProps, "color" | "size"> & {
-          /** Tells that the default render component should be used */
-          useDefaultComponent?: boolean;
-          color?: ButtonBaseProps["color"] & v2ButtonBaseProps["color"];
-          size?: ButtonBaseProps["size"] & v2ButtonBaseProps["size"];
-        }
+    renderProps: ButtonProps & {
+      /** Tells that the default render component should be used */
+      useDefaultComponent?: boolean;
+    }
   ) => JSX.Element;
   onChanged?: () => unknown;
 }
diff --git a/packages/app-store/vital/components/AppConfiguration.tsx b/packages/app-store/vital/components/AppConfiguration.tsx
index ae74613dd7..e266616393 100644
--- a/packages/app-store/vital/components/AppConfiguration.tsx
+++ b/packages/app-store/vital/components/AppConfiguration.tsx
@@ -1,9 +1,7 @@
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import classNames from "@calcom/lib/classNames";
-import { Button, Select } from "@calcom/ui";
-import showToast from "@calcom/ui/v2/core/notifications";
+import { Button, Select, showToast } from "@calcom/ui";
 
 export interface IAppConfigurationProps {
   credentialIds: number[];
diff --git a/packages/app-store/vital/index.ts b/packages/app-store/vital/index.ts
index 8160a6e147..5373eb04ef 100644
--- a/packages/app-store/vital/index.ts
+++ b/packages/app-store/vital/index.ts
@@ -1,4 +1,3 @@
 export * as api from "./api";
 export * as lib from "./lib";
-export * as components from "./components";
 export { metadata } from "./_metadata";
diff --git a/packages/app-store/weather_in_your_calendar/components/AppSettings.tsx b/packages/app-store/weather_in_your_calendar/components/AppSettings.tsx
index 38851da5c4..f910fbe67b 100644
--- a/packages/app-store/weather_in_your_calendar/components/AppSettings.tsx
+++ b/packages/app-store/weather_in_your_calendar/components/AppSettings.tsx
@@ -1,12 +1,11 @@
 import { useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button } from "@calcom/ui/components/button";
-import { TextField } from "@calcom/ui/components/form";
+import { Button, TextField } from "@calcom/ui";
 
 /*
-import * as Radio from "@calcom/ui/v2/core/form/radio-area/Radio";
-import { RadioField } from "@calcom/ui/v2/core/form/radio-area/Radio";
+import * as Radio from "@calcom/ui";
+import { RadioField } from "@calcom/ui";
 */
 
 export default function AppSettings() {
diff --git a/packages/app-store/whereby/index.ts b/packages/app-store/whereby/index.ts
index a698d1f5c5..5d372ceda3 100644
--- a/packages/app-store/whereby/index.ts
+++ b/packages/app-store/whereby/index.ts
@@ -1,3 +1,2 @@
 export * as api from "./api";
-export * as components from "./components";
 export { metadata } from "./_metadata";
diff --git a/packages/app-store/wipemycalother/components/confirmDialog.tsx b/packages/app-store/wipemycalother/components/confirmDialog.tsx
index d3b685127c..d8023feb95 100644
--- a/packages/app-store/wipemycalother/components/confirmDialog.tsx
+++ b/packages/app-store/wipemycalother/components/confirmDialog.tsx
@@ -6,9 +6,7 @@ import dayjs from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import logger from "@calcom/lib/logger";
 import { trpc } from "@calcom/trpc/react";
-import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
-import { Button } from "@calcom/ui/components/button";
-import showToast from "@calcom/ui/v2/core/notifications";
+import { Button, Dialog, DialogContent, DialogFooter, DialogHeader, showToast } from "@calcom/ui";
 
 interface IConfirmDialogWipe {
   isOpenDialog: boolean;
diff --git a/packages/app-store/wipemycalother/components/wipeMyCalActionButton.tsx b/packages/app-store/wipemycalother/components/wipeMyCalActionButton.tsx
index fee002c9d5..da768923e2 100644
--- a/packages/app-store/wipemycalother/components/wipeMyCalActionButton.tsx
+++ b/packages/app-store/wipemycalother/components/wipeMyCalActionButton.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 
 import { trpc } from "@calcom/trpc/react";
-import { Button } from "@calcom/ui/components/button";
+import { Button } from "@calcom/ui";
 
 import { ConfirmDialog } from "./confirmDialog";
 
diff --git a/packages/app-store/wipemycalother/index.ts b/packages/app-store/wipemycalother/index.ts
index db3c2b10b2..5373eb04ef 100644
--- a/packages/app-store/wipemycalother/index.ts
+++ b/packages/app-store/wipemycalother/index.ts
@@ -1,4 +1,3 @@
 export * as api from "./api";
-export * as components from "./components";
 export * as lib from "./lib";
 export { metadata } from "./_metadata";
diff --git a/packages/app-store/zapier/components/TemplateCard.tsx b/packages/app-store/zapier/components/TemplateCard.tsx
index e8e9f10245..d1892a479a 100644
--- a/packages/app-store/zapier/components/TemplateCard.tsx
+++ b/packages/app-store/zapier/components/TemplateCard.tsx
@@ -1,4 +1,4 @@
-import { Button } from "@calcom/ui/components/button";
+import { Button } from "@calcom/ui";
 
 import { Template } from "./AppSettings";
 
diff --git a/packages/app-store/zapier/index.ts b/packages/app-store/zapier/index.ts
index a698d1f5c5..5d372ceda3 100644
--- a/packages/app-store/zapier/index.ts
+++ b/packages/app-store/zapier/index.ts
@@ -1,3 +1,2 @@
 export * as api from "./api";
-export * as components from "./components";
 export { metadata } from "./_metadata";
diff --git a/packages/app-store/zapier/pages/setup/index.tsx b/packages/app-store/zapier/pages/setup/index.tsx
index 5501bfcb95..701a40c595 100644
--- a/packages/app-store/zapier/pages/setup/index.tsx
+++ b/packages/app-store/zapier/pages/setup/index.tsx
@@ -5,9 +5,7 @@ import { Toaster } from "react-hot-toast";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { ClipboardCopyIcon } from "@calcom/ui/Icon";
-import { Button } from "@calcom/ui/components";
-import { showToast, Tooltip } from "@calcom/ui/v2";
+import { Button, ClipboardCopyIcon, showToast, Tooltip } from "@calcom/ui";
 
 export interface IZapierSetupProps {
   inviteLink: string;
diff --git a/packages/features/bookings/UnconfirmedBookingBadge.tsx b/packages/features/bookings/UnconfirmedBookingBadge.tsx
index d3bc782ccc..6c8e94925b 100644
--- a/packages/features/bookings/UnconfirmedBookingBadge.tsx
+++ b/packages/features/bookings/UnconfirmedBookingBadge.tsx
@@ -2,7 +2,7 @@ import Link from "next/link";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Badge } from "@calcom/ui/components/badge/Badge";
+import { Badge } from "@calcom/ui";
 
 export default function UnconfirmedBookingBadge() {
   const { t } = useLocale();
diff --git a/packages/features/calendars/DestinationCalendarSelector.tsx b/packages/features/calendars/DestinationCalendarSelector.tsx
index f169ef2d11..4d6b5d215b 100644
--- a/packages/features/calendars/DestinationCalendarSelector.tsx
+++ b/packages/features/calendars/DestinationCalendarSelector.tsx
@@ -1,12 +1,11 @@
 import classNames from "classnames";
-import React, { useEffect, useState } from "react";
-import { components } from "react-select";
-import { SingleValueProps, OptionProps } from "react-select";
+import { useEffect, useState } from "react";
+import { components, OptionProps, SingleValueProps } from "react-select";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { DestinationCalendar } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
-import Select from "@calcom/ui/v2/core/form/select";
+import { Select } from "@calcom/ui";
 
 interface Props {
   onChange: (value: { externalId: string; integration: string }) => void;
diff --git a/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx b/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx
index e32aa1df6b..968912d4d2 100644
--- a/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx
+++ b/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx
@@ -2,48 +2,57 @@ import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 
 import dayjs from "@calcom/dayjs";
+import { TApiKeys } from "@calcom/ee/api-keys/components/ApiKeyListItem";
+import LicenseRequired from "@calcom/ee/common/components/v2/LicenseRequired";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import Button from "@calcom/ui/Button";
-import { DialogFooter } from "@calcom/ui/Dialog";
-import { ClipboardCopyIcon } from "@calcom/ui/Icon";
-import Switch from "@calcom/ui/Switch";
-import { Tooltip } from "@calcom/ui/Tooltip";
-import { Form, TextField } from "@calcom/ui/form/fields";
-import { DatePicker } from "@calcom/ui/v2";
-import showToast from "@calcom/ui/v2/core/notifications";
+import {
+  Button,
+  ClipboardCopyIcon,
+  DatePickerField as DatePicker,
+  DialogFooter,
+  Form,
+  showToast,
+  Switch,
+  TextField,
+  Tooltip,
+} from "@calcom/ui";
 
-import LicenseRequired from "../../common/components/LicenseRequired";
-import type { TApiKeys } from "./ApiKeyListItem";
-
-export default function ApiKeyDialogForm(props: {
-  title: string;
+export default function ApiKeyDialogForm({
+  defaultValues,
+  handleClose,
+}: {
   defaultValues?: Omit<TApiKeys, "userId" | "createdAt" | "lastUsedAt"> & { neverExpires?: boolean };
   handleClose: () => void;
 }) {
   const { t } = useLocale();
   const utils = trpc.useContext();
 
-  const {
-    defaultValues = {
-      note: "",
-      neverExpires: false,
-      expiresAt: dayjs().add(1, "month").toDate(),
+  const updateApiKeyMutation = trpc.viewer.apiKeys.edit.useMutation({
+    onSuccess() {
+      utils.viewer.apiKeys.list.invalidate();
+      showToast(t("api_key_updated"), "success");
+      handleClose();
     },
-  } = props;
+    onError() {
+      showToast(t("api_key_update_failed"), "error");
+    },
+  });
 
   const [apiKey, setApiKey] = useState("");
   const [successfulNewApiKeyModal, setSuccessfulNewApiKeyModal] = useState(false);
   const [apiKeyDetails, setApiKeyDetails] = useState({
-    id: "",
-    hashedKey: "",
     expiresAt: null as Date | null,
     note: "" as string | null,
     neverExpires: false,
   });
 
   const form = useForm({
-    defaultValues,
+    defaultValues: {
+      note: defaultValues?.note || "",
+      neverExpires: defaultValues?.neverExpires || false,
+      expiresAt: defaultValues?.expiresAt || dayjs().add(1, "month").toDate(),
+    },
   });
   const watchNeverExpires = form.watch("neverExpires");
 
@@ -53,7 +62,7 @@ export default function ApiKeyDialogForm(props: {
         <>
           <div className="mb-10">
             <h2 className="font-semi-bold font-cal mb-2 text-xl tracking-wide text-gray-900">
-              {apiKeyDetails ? t("success_api_key_edited") : t("success_api_key_created")}
+              {t("success_api_key_created")}
             </h2>
             <div className="text-sm text-gray-900">
               <span className="font-semibold">{t("success_api_key_created_bold_tagline")}</span>{" "}
@@ -62,7 +71,7 @@ export default function ApiKeyDialogForm(props: {
           </div>
           <div>
             <div className="flex">
-              <code className="my-2 mr-1 w-full truncate rounded-sm bg-gray-100 py-2 px-3 align-middle font-mono text-gray-800">
+              <code className="mb-2 w-full truncate rounded-md rounded-r-none bg-gray-100 px-3 py-2 align-middle font-mono text-gray-800">
                 {apiKey}
               </code>
               <Tooltip side="top" content={t("copy_to_clipboard")}>
@@ -72,7 +81,7 @@ export default function ApiKeyDialogForm(props: {
                     showToast(t("api_key_copied"), "success");
                   }}
                   type="button"
-                  className=" my-2 px-4 text-base">
+                  className="rounded-l-none py-[19px] text-base ">
                   <ClipboardCopyIcon className="mr-2 h-5 w-5 text-neutral-100" />
                   {t("copy")}
                 </Button>
@@ -85,58 +94,84 @@ export default function ApiKeyDialogForm(props: {
             </span>
           </div>
           <DialogFooter>
-            <Button type="button" color="secondary" onClick={props.handleClose} tabIndex={-1}>
+            <Button type="button" color="secondary" onClick={handleClose} tabIndex={-1}>
               {t("done")}
             </Button>
           </DialogFooter>
         </>
       ) : (
-        <Form<Omit<TApiKeys, "userId" | "createdAt" | "lastUsedAt"> & { neverExpires?: boolean }>
+        <Form
           form={form}
           handleSubmit={async (event) => {
-            const apiKey = await utils.client.viewer.apiKeys.create.mutate(event);
-            setApiKey(apiKey);
-            setApiKeyDetails({ ...event, neverExpires: !!event.neverExpires });
-            await utils.viewer.apiKeys.list.invalidate();
-            setSuccessfulNewApiKeyModal(true);
+            if (defaultValues) {
+              console.log("Name changed");
+              await updateApiKeyMutation.mutate({ id: defaultValues.id, note: event.note });
+            } else {
+              const apiKey = await utils.client.viewer.apiKeys.create.mutate(event);
+              setApiKey(apiKey);
+              setApiKeyDetails({ ...event });
+              await utils.viewer.apiKeys.list.invalidate();
+              setSuccessfulNewApiKeyModal(true);
+            }
           }}
           className="space-y-4">
-          <div className="mb-10 mt-1">
-            <h2 className="font-semi-bold font-cal text-xl tracking-wide text-gray-900">{props.title}</h2>
+          <div className="mt-1 mb-10">
+            <h2 className="font-semi-bold font-cal text-xl tracking-wide text-gray-900">
+              {defaultValues ? t("edit_api_key") : t("create_api_key")}
+            </h2>
             <p className="mt-1 mb-5 text-sm text-gray-500">{t("api_key_modal_subtitle")}</p>
           </div>
           <div>
-            <TextField
-              label={t("personal_note")}
-              placeholder={t("personal_note_placeholder")}
-              {...form.register("note")}
-              type="text"
-            />
-          </div>
-          <div className="flex flex-col">
-            <div className="flex justify-between py-2">
-              <span className="block text-sm font-medium text-gray-700">{t("expire_date")}</span>
-              <Controller
-                name="neverExpires"
-                render={({ field: { onChange, value } }) => (
-                  <Switch label={t("never_expire_key")} onCheckedChange={onChange} checked={value} />
-                )}
-              />
-            </div>
             <Controller
-              name="expiresAt"
+              name="note"
+              control={form.control}
               render={({ field: { onChange, value } }) => (
-                <DatePicker
-                  disabled={watchNeverExpires}
-                  minDate={new Date()}
-                  date={value}
-                  onDatesChange={onChange}
+                <TextField
+                  name="note"
+                  label={t("personal_note")}
+                  placeholder={t("personal_note_placeholder")}
+                  value={value}
+                  onChange={(e) => {
+                    form.setValue("note", e?.target.value);
+                  }}
+                  type="text"
                 />
               )}
             />
           </div>
+          {!defaultValues && (
+            <div className="flex flex-col">
+              <div className="flex justify-between py-2">
+                <span className="block text-sm font-medium text-gray-700">{t("expire_date")}</span>
+                <Controller
+                  name="neverExpires"
+                  control={form.control}
+                  render={({ field: { onChange, value } }) => (
+                    <Switch
+                      label={t("never_expire_key")}
+                      onCheckedChange={onChange}
+                      checked={value}
+                      disabled={!!defaultValues}
+                    />
+                  )}
+                />
+              </div>
+              <Controller
+                name="expiresAt"
+                render={({ field: { onChange, value } }) => (
+                  <DatePicker
+                    disabled={watchNeverExpires || !!defaultValues}
+                    minDate={new Date()}
+                    date={value}
+                    onDatesChange={onChange}
+                  />
+                )}
+              />
+            </div>
+          )}
+
           <DialogFooter>
-            <Button type="button" color="secondary" onClick={props.handleClose} tabIndex={-1}>
+            <Button type="button" color="secondary" onClick={handleClose} tabIndex={-1}>
               {t("cancel")}
             </Button>
             <Button type="submit" loading={form.formState.isSubmitting}>
diff --git a/packages/features/ee/api-keys/components/ApiKeyListContainer.tsx b/packages/features/ee/api-keys/components/ApiKeyListContainer.tsx
deleted file mode 100644
index 6c2d501942..0000000000
--- a/packages/features/ee/api-keys/components/ApiKeyListContainer.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import { useState } from "react";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { trpc } from "@calcom/trpc/react";
-import Button from "@calcom/ui/Button";
-import { Dialog, DialogContent } from "@calcom/ui/Dialog";
-import { Icon } from "@calcom/ui/Icon";
-import { List } from "@calcom/ui/List";
-import { ShellSubHeading } from "@calcom/ui/Shell";
-import SkeletonLoader from "@calcom/ui/apps/SkeletonLoader";
-
-import LicenseRequired from "../../common/components/LicenseRequired";
-import ApiKeyDialogForm from "./ApiKeyDialogForm";
-import ApiKeyListItem, { TApiKeys } from "./ApiKeyListItem";
-
-function ApiKeyListContainer() {
-  const { t } = useLocale();
-  const query = trpc.viewer.apiKeys.list.useQuery();
-  const data = query.data;
-
-  const [newApiKeyModal, setNewApiKeyModal] = useState(false);
-  const [editModalOpen, setEditModalOpen] = useState(false);
-  const [apiKeyToEdit, setApiKeyToEdit] = useState<(TApiKeys & { neverExpires?: boolean }) | null>(null);
-  return (
-    <div className="border-b border-gray-200 py-8 pl-2 pr-1">
-      <ShellSubHeading
-        className="mt-2"
-        title={t("api_keys")}
-        subtitle={t("api_keys_subtitle")}
-        actions={
-          <Button
-            color="minimal"
-            size="icon"
-            StartIcon={Icon.FiPlus}
-            onClick={() => setNewApiKeyModal(true)}
-          />
-        }
-      />
-      <LicenseRequired>
-        {(() => {
-          if (query.isLoading) return <SkeletonLoader />;
-          if (!data) return null;
-          return (
-            <>
-              {data.length > 0 && (
-                <List className="mt-6">
-                  {data.map((item) => (
-                    <ApiKeyListItem
-                      key={item.id}
-                      apiKey={item}
-                      onEditApiKey={() => {
-                        setApiKeyToEdit(item);
-                        setEditModalOpen(true);
-                      }}
-                    />
-                  ))}
-                </List>
-              )}
-
-              {/* New api key dialog */}
-              <Dialog open={newApiKeyModal} onOpenChange={(isOpen) => !isOpen && setNewApiKeyModal(false)}>
-                <DialogContent>
-                  <ApiKeyDialogForm
-                    title={t("create_api_key")}
-                    handleClose={() => setNewApiKeyModal(false)}
-                  />
-                </DialogContent>
-              </Dialog>
-              {/* Edit api key dialog */}
-              <Dialog open={editModalOpen} onOpenChange={(isOpen) => !isOpen && setEditModalOpen(false)}>
-                <DialogContent>
-                  {apiKeyToEdit && (
-                    <ApiKeyDialogForm
-                      title={t("edit_api_key")}
-                      key={apiKeyToEdit.id}
-                      handleClose={() => setEditModalOpen(false)}
-                      defaultValues={apiKeyToEdit}
-                    />
-                  )}
-                </DialogContent>
-              </Dialog>
-            </>
-          );
-        })()}
-      </LicenseRequired>
-    </div>
-  );
-}
-
-export default ApiKeyListContainer;
diff --git a/packages/features/ee/api-keys/components/ApiKeyListItem.tsx b/packages/features/ee/api-keys/components/ApiKeyListItem.tsx
index c9385f1c1c..f54d4151e7 100644
--- a/packages/features/ee/api-keys/components/ApiKeyListItem.tsx
+++ b/packages/features/ee/api-keys/components/ApiKeyListItem.tsx
@@ -1,100 +1,97 @@
 import dayjs from "@calcom/dayjs";
-import classNames from "@calcom/lib/classNames";
+import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { RouterOutputs, trpc } from "@calcom/trpc/react";
-import Button from "@calcom/ui/Button";
-import ConfirmationDialogContent from "@calcom/ui/ConfirmationDialogContent";
-import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
-import { Icon } from "@calcom/ui/Icon";
-import { ListItem } from "@calcom/ui/List";
-import { Tooltip } from "@calcom/ui/Tooltip";
-import { Badge } from "@calcom/ui/components/badge";
+import {
+  Badge,
+  Button,
+  Dropdown,
+  DropdownItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Icon,
+} from "@calcom/ui";
 
 export type TApiKeys = RouterOutputs["viewer"]["apiKeys"]["list"][number];
 
-export default function ApiKeyListItem(props: { apiKey: TApiKeys; onEditApiKey: () => void }) {
+const ApiKeyListItem = ({
+  apiKey,
+  lastItem,
+  onEditClick,
+}: {
+  apiKey: TApiKeys;
+  lastItem: boolean;
+  onEditClick: () => void;
+}) => {
   const { t } = useLocale();
   const utils = trpc.useContext();
-  const isExpired = props?.apiKey?.expiresAt ? props.apiKey.expiresAt < new Date() : null;
-  const neverExpires = props?.apiKey?.expiresAt === null;
+
+  const isExpired = apiKey?.expiresAt ? apiKey.expiresAt < new Date() : null;
+  const neverExpires = apiKey?.expiresAt === null;
+
   const deleteApiKey = trpc.viewer.apiKeys.delete.useMutation({
     async onSuccess() {
       await utils.viewer.apiKeys.list.invalidate();
     },
   });
+
   return (
-    <ListItem className="flex w-full p-4">
-      <div className="flex w-full justify-between">
-        <div className="flex max-w-full flex-col truncate">
-          <div className="flex space-x-2">
-            <span className="text-gray-900">
-              {props?.apiKey?.note ? props.apiKey.note : t("api_key_no_note")}
-            </span>
-            {!neverExpires && isExpired && (
-              <Badge className="-p-2" variant="default">
-                {t("expired")}
-              </Badge>
+    <div
+      key={apiKey.id}
+      className={classNames("flex w-full justify-between p-4", lastItem ? "" : "border-b")}>
+      <div>
+        <p className="font-medium"> {apiKey?.note ? apiKey.note : t("api_key_no_note")}</p>
+        <div className="flex items-center space-x-3.5">
+          {!neverExpires && isExpired && (
+            <Badge className="-p-2" variant="red">
+              {t("expired")}
+            </Badge>
+          )}
+          {!isExpired && (
+            <Badge className="-p-2" variant="green">
+              {t("active")}
+            </Badge>
+          )}
+          <p className="text-xs text-gray-600">
+            {" "}
+            {neverExpires ? (
+              <div className="flex flex-row space-x-3 text-gray-500">{t("api_key_never_expires")}</div>
+            ) : (
+              `${isExpired ? t("expired") : t("expires")} ${dayjs(apiKey?.expiresAt?.toString()).fromNow()}`
             )}
-          </div>
-          <div className="mt-2 flex">
-            <span
-              className={classNames(
-                "flex flex-col space-x-2 space-y-1 text-xs sm:flex-row sm:space-y-0 sm:rtl:space-x-reverse",
-                isExpired ? "text-red-600" : "text-gray-500",
-                neverExpires ? "text-yellow-600" : ""
-              )}>
-              {neverExpires ? (
-                <div className="flex flex-row space-x-3 text-gray-500">
-                  <Icon.FiAlertTriangle className="w-4" />
-                  {t("api_key_never_expires")}
-                </div>
-              ) : (
-                `${isExpired ? t("expired") : t("expires")} ${dayjs(
-                  props?.apiKey?.expiresAt?.toString()
-                ).fromNow()}`
-              )}
-            </span>
-          </div>
-        </div>
-        <div className="flex">
-          <Tooltip side="top" content={t("edit_api_key")}>
-            <Button
-              onClick={() => props.onEditApiKey()}
-              color="minimal"
-              size="icon"
-              StartIcon={Icon.FiEdit2}
-              className="ml-4 w-full self-center p-2"
-            />
-          </Tooltip>
-          <Dialog>
-            <Tooltip side="top" content={t("delete_api_key")}>
-              <DialogTrigger asChild>
-                <Button
-                  onClick={(e) => {
-                    e.stopPropagation();
-                  }}
-                  color="warn"
-                  size="icon"
-                  StartIcon={Icon.FiTrash}
-                  className="ml-2 w-full self-center p-2"
-                />
-              </DialogTrigger>
-            </Tooltip>
-            <ConfirmationDialogContent
-              variety="danger"
-              title={t("confirm_delete_api_key")}
-              confirmBtnText={t("revoke_api_key")}
-              cancelBtnText={t("cancel")}
-              onConfirm={() =>
-                deleteApiKey.mutate({
-                  id: props.apiKey.id,
-                })
-              }>
-              {t("delete_api_key_confirm_title")}
-            </ConfirmationDialogContent>
-          </Dialog>
+          </p>
         </div>
       </div>
-    </ListItem>
+      <div>
+        <Dropdown>
+          <DropdownMenuTrigger asChild>
+            <Button type="button" size="icon" color="secondary" StartIcon={Icon.FiMoreHorizontal} />
+          </DropdownMenuTrigger>
+
+          <DropdownMenuContent>
+            <DropdownMenuItem>
+              <DropdownItem type="button" onClick={onEditClick} StartIcon={Icon.FiEdit2}>
+                {t("edit") as string}
+              </DropdownItem>
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <DropdownItem
+                type="button"
+                onClick={() =>
+                  deleteApiKey.mutate({
+                    id: apiKey.id,
+                  })
+                }
+                StartIcon={Icon.FiTrash}>
+                {t("delete") as string}
+              </DropdownItem>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </Dropdown>
+      </div>
+    </div>
   );
-}
+};
+
+export default ApiKeyListItem;
diff --git a/packages/features/ee/api-keys/components/v2/ApiKeyDialogForm.tsx b/packages/features/ee/api-keys/components/v2/ApiKeyDialogForm.tsx
deleted file mode 100644
index 04ba245f7b..0000000000
--- a/packages/features/ee/api-keys/components/v2/ApiKeyDialogForm.tsx
+++ /dev/null
@@ -1,182 +0,0 @@
-import { useState } from "react";
-import { Controller, useForm } from "react-hook-form";
-
-import dayjs from "@calcom/dayjs";
-import { TApiKeys } from "@calcom/ee/api-keys/components/ApiKeyListItem";
-import LicenseRequired from "@calcom/ee/common/components/v2/LicenseRequired";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { trpc } from "@calcom/trpc/react";
-import { DialogFooter } from "@calcom/ui/Dialog";
-import { ClipboardCopyIcon } from "@calcom/ui/Icon";
-import { Tooltip } from "@calcom/ui/Tooltip";
-import { Button } from "@calcom/ui/components/button";
-import { Form, TextField } from "@calcom/ui/components/form";
-import { DatePicker } from "@calcom/ui/v2";
-import Switch from "@calcom/ui/v2/core/Switch";
-import showToast from "@calcom/ui/v2/core/notifications";
-
-export default function ApiKeyDialogForm({
-  defaultValues,
-  handleClose,
-}: {
-  defaultValues?: Omit<TApiKeys, "userId" | "createdAt" | "lastUsedAt"> & { neverExpires?: boolean };
-  handleClose: () => void;
-}) {
-  const { t } = useLocale();
-  const utils = trpc.useContext();
-
-  const updateApiKeyMutation = trpc.viewer.apiKeys.edit.useMutation({
-    onSuccess() {
-      utils.viewer.apiKeys.list.invalidate();
-      showToast(t("api_key_updated"), "success");
-      handleClose();
-    },
-    onError() {
-      showToast(t("api_key_update_failed"), "error");
-    },
-  });
-
-  const [apiKey, setApiKey] = useState("");
-  const [successfulNewApiKeyModal, setSuccessfulNewApiKeyModal] = useState(false);
-  const [apiKeyDetails, setApiKeyDetails] = useState({
-    expiresAt: null as Date | null,
-    note: "" as string | null,
-    neverExpires: false,
-  });
-
-  const form = useForm({
-    defaultValues: {
-      note: defaultValues?.note || "",
-      neverExpires: defaultValues?.neverExpires || false,
-      expiresAt: defaultValues?.expiresAt || dayjs().add(1, "month").toDate(),
-    },
-  });
-  const watchNeverExpires = form.watch("neverExpires");
-
-  return (
-    <LicenseRequired>
-      {successfulNewApiKeyModal ? (
-        <>
-          <div className="mb-10">
-            <h2 className="font-semi-bold font-cal mb-2 text-xl tracking-wide text-gray-900">
-              {t("success_api_key_created")}
-            </h2>
-            <div className="text-sm text-gray-900">
-              <span className="font-semibold">{t("success_api_key_created_bold_tagline")}</span>{" "}
-              {t("you_will_only_view_it_once")}
-            </div>
-          </div>
-          <div>
-            <div className="flex">
-              <code className="mb-2 w-full truncate rounded-md rounded-r-none bg-gray-100 px-3 py-2 align-middle font-mono text-gray-800">
-                {apiKey}
-              </code>
-              <Tooltip side="top" content={t("copy_to_clipboard")}>
-                <Button
-                  onClick={() => {
-                    navigator.clipboard.writeText(apiKey);
-                    showToast(t("api_key_copied"), "success");
-                  }}
-                  type="button"
-                  className="rounded-l-none py-[19px] text-base ">
-                  <ClipboardCopyIcon className="mr-2 h-5 w-5 text-neutral-100" />
-                  {t("copy")}
-                </Button>
-              </Tooltip>
-            </div>
-            <span className="text-sm text-gray-400">
-              {apiKeyDetails.neverExpires
-                ? t("never_expire_key")
-                : `${t("expires")} ${apiKeyDetails?.expiresAt?.toLocaleDateString()}`}
-            </span>
-          </div>
-          <DialogFooter>
-            <Button type="button" color="secondary" onClick={handleClose} tabIndex={-1}>
-              {t("done")}
-            </Button>
-          </DialogFooter>
-        </>
-      ) : (
-        <Form
-          form={form}
-          handleSubmit={async (event) => {
-            if (defaultValues) {
-              console.log("Name changed");
-              await updateApiKeyMutation.mutate({ id: defaultValues.id, note: event.note });
-            } else {
-              const apiKey = await utils.client.viewer.apiKeys.create.mutate(event);
-              setApiKey(apiKey);
-              setApiKeyDetails({ ...event });
-              await utils.viewer.apiKeys.list.invalidate();
-              setSuccessfulNewApiKeyModal(true);
-            }
-          }}
-          className="space-y-4">
-          <div className="mt-1 mb-10">
-            <h2 className="font-semi-bold font-cal text-xl tracking-wide text-gray-900">
-              {defaultValues ? t("edit_api_key") : t("create_api_key")}
-            </h2>
-            <p className="mt-1 mb-5 text-sm text-gray-500">{t("api_key_modal_subtitle")}</p>
-          </div>
-          <div>
-            <Controller
-              name="note"
-              control={form.control}
-              render={({ field: { onChange, value } }) => (
-                <TextField
-                  name="note"
-                  label={t("personal_note")}
-                  placeholder={t("personal_note_placeholder")}
-                  value={value}
-                  onChange={(e) => {
-                    form.setValue("note", e?.target.value);
-                  }}
-                  type="text"
-                />
-              )}
-            />
-          </div>
-          {!defaultValues && (
-            <div className="flex flex-col">
-              <div className="flex justify-between py-2">
-                <span className="block text-sm font-medium text-gray-700">{t("expire_date")}</span>
-                <Controller
-                  name="neverExpires"
-                  control={form.control}
-                  render={({ field: { onChange, value } }) => (
-                    <Switch
-                      label={t("never_expire_key")}
-                      onCheckedChange={onChange}
-                      checked={value}
-                      disabled={!!defaultValues}
-                    />
-                  )}
-                />
-              </div>
-              <Controller
-                name="expiresAt"
-                render={({ field: { onChange, value } }) => (
-                  <DatePicker
-                    disabled={watchNeverExpires || !!defaultValues}
-                    minDate={new Date()}
-                    date={value}
-                    onDatesChange={onChange}
-                  />
-                )}
-              />
-            </div>
-          )}
-
-          <DialogFooter>
-            <Button type="button" color="secondary" onClick={handleClose} tabIndex={-1}>
-              {t("cancel")}
-            </Button>
-            <Button type="submit" loading={form.formState.isSubmitting}>
-              {apiKeyDetails ? t("save") : t("create")}
-            </Button>
-          </DialogFooter>
-        </Form>
-      )}
-    </LicenseRequired>
-  );
-}
diff --git a/packages/features/ee/api-keys/components/v2/ApiKeyListItem.tsx b/packages/features/ee/api-keys/components/v2/ApiKeyListItem.tsx
deleted file mode 100644
index 33df1b370f..0000000000
--- a/packages/features/ee/api-keys/components/v2/ApiKeyListItem.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import dayjs from "@calcom/dayjs";
-import { TApiKeys } from "@calcom/ee/api-keys/components/ApiKeyListItem";
-import { classNames } from "@calcom/lib";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui";
-import { Badge } from "@calcom/ui/components/badge";
-import { Button } from "@calcom/ui/components/button";
-import Dropdown, {
-  DropdownItem,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@calcom/ui/v2/core/Dropdown";
-
-const ApiKeyListItem = ({
-  apiKey,
-  lastItem,
-  onEditClick,
-}: {
-  apiKey: TApiKeys;
-  lastItem: boolean;
-  onEditClick: () => void;
-}) => {
-  const { t } = useLocale();
-  const utils = trpc.useContext();
-
-  const isExpired = apiKey?.expiresAt ? apiKey.expiresAt < new Date() : null;
-  const neverExpires = apiKey?.expiresAt === null;
-
-  const deleteApiKey = trpc.viewer.apiKeys.delete.useMutation({
-    async onSuccess() {
-      await utils.viewer.apiKeys.list.invalidate();
-    },
-  });
-
-  return (
-    <div
-      key={apiKey.id}
-      className={classNames("flex w-full justify-between p-4", lastItem ? "" : "border-b")}>
-      <div>
-        <p className="font-medium"> {apiKey?.note ? apiKey.note : t("api_key_no_note")}</p>
-        <div className="flex items-center space-x-3.5">
-          {!neverExpires && isExpired && (
-            <Badge className="-p-2" variant="red">
-              {t("expired")}
-            </Badge>
-          )}
-          {!isExpired && (
-            <Badge className="-p-2" variant="green">
-              {t("active")}
-            </Badge>
-          )}
-          <p className="text-xs text-gray-600">
-            {" "}
-            {neverExpires ? (
-              <div className="flex flex-row space-x-3 text-gray-500">{t("api_key_never_expires")}</div>
-            ) : (
-              `${isExpired ? t("expired") : t("expires")} ${dayjs(apiKey?.expiresAt?.toString()).fromNow()}`
-            )}
-          </p>
-        </div>
-      </div>
-      <div>
-        <Dropdown>
-          <DropdownMenuTrigger asChild>
-            <Button type="button" size="icon" color="secondary" StartIcon={Icon.FiMoreHorizontal} />
-          </DropdownMenuTrigger>
-
-          <DropdownMenuContent>
-            <DropdownMenuItem>
-              <DropdownItem type="button" onClick={onEditClick} StartIcon={Icon.FiEdit2}>
-                {t("edit") as string}
-              </DropdownItem>
-            </DropdownMenuItem>
-            <DropdownMenuItem>
-              <DropdownItem
-                type="button"
-                onClick={() =>
-                  deleteApiKey.mutate({
-                    id: apiKey.id,
-                  })
-                }
-                StartIcon={Icon.FiTrash}>
-                {t("delete") as string}
-              </DropdownItem>
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </Dropdown>
-      </div>
-    </div>
-  );
-};
-
-export default ApiKeyListItem;
diff --git a/packages/features/ee/common/components/LicenseBanner.tsx b/packages/features/ee/common/components/LicenseBanner.tsx
index 6766419523..0d1eae3e31 100644
--- a/packages/features/ee/common/components/LicenseBanner.tsx
+++ b/packages/features/ee/common/components/LicenseBanner.tsx
@@ -1,9 +1,7 @@
 import { Trans } from "react-i18next";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import ConfirmationDialogContent from "@calcom/ui/ConfirmationDialogContent";
-import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
-import { Icon, BadgeCheckIcon } from "@calcom/ui/Icon";
+import { BadgeCheckIcon, ConfirmationDialogContent, Dialog, DialogTrigger, Icon } from "@calcom/ui";
 
 export default function LicenseBanner() {
   const { t } = useLocale();
diff --git a/packages/features/ee/common/components/LicenseRequired.tsx b/packages/features/ee/common/components/LicenseRequired.tsx
index 1ab43ce8a3..ccbf570c6e 100644
--- a/packages/features/ee/common/components/LicenseRequired.tsx
+++ b/packages/features/ee/common/components/LicenseRequired.tsx
@@ -7,8 +7,7 @@ import { useSession } from "next-auth/react";
 import React, { AriaRole, ComponentType, Fragment } from "react";
 
 import { CONSOLE_URL } from "@calcom/lib/constants";
-import EmptyScreen from "@calcom/ui/EmptyScreen";
-import { Icon } from "@calcom/ui/Icon";
+import { EmptyScreen, Icon } from "@calcom/ui";
 
 type LicenseRequiredProps = {
   as?: keyof JSX.IntrinsicElements | "";
diff --git a/packages/features/ee/common/components/v2/LicenseRequired.tsx b/packages/features/ee/common/components/v2/LicenseRequired.tsx
index 36a38373b9..c1949d2ca8 100644
--- a/packages/features/ee/common/components/v2/LicenseRequired.tsx
+++ b/packages/features/ee/common/components/v2/LicenseRequired.tsx
@@ -2,8 +2,7 @@ import { useSession } from "next-auth/react";
 import React, { AriaRole, ComponentType, Fragment } from "react";
 
 import { CONSOLE_URL } from "@calcom/lib/constants";
-import { Icon } from "@calcom/ui/Icon";
-import { EmptyScreen } from "@calcom/ui/v2";
+import { EmptyScreen, Icon } from "@calcom/ui";
 
 type LicenseRequiredProps = {
   as?: keyof JSX.IntrinsicElements | "";
diff --git a/packages/features/ee/impersonation/components/ImpersonatingBanner.tsx b/packages/features/ee/impersonation/components/ImpersonatingBanner.tsx
index 7240349842..ba8cc74f0f 100644
--- a/packages/features/ee/impersonation/components/ImpersonatingBanner.tsx
+++ b/packages/features/ee/impersonation/components/ImpersonatingBanner.tsx
@@ -2,7 +2,7 @@ import { useSession } from "next-auth/react";
 import { Trans } from "next-i18next";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Alert } from "@calcom/ui/Alert";
+import { Alert } from "@calcom/ui";
 
 function ImpersonatingBanner() {
   const { t } = useLocale();
diff --git a/packages/features/ee/payments/components/Payment.tsx b/packages/features/ee/payments/components/Payment.tsx
index e63663fe4a..8d15682d45 100644
--- a/packages/features/ee/payments/components/Payment.tsx
+++ b/packages/features/ee/payments/components/Payment.tsx
@@ -6,7 +6,7 @@ import { SyntheticEvent, useEffect, useState } from "react";
 
 import { PaymentData } from "@calcom/app-store/stripepayment/lib/server";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import Button from "@calcom/ui/Button";
+import { Button } from "@calcom/ui";
 
 const CARD_OPTIONS: stripejs.StripeCardElementOptions = {
   iconStyle: "solid" as const,
diff --git a/packages/features/ee/payments/components/PaymentPage.tsx b/packages/features/ee/payments/components/PaymentPage.tsx
index 119bd61890..ee63386206 100644
--- a/packages/features/ee/payments/components/PaymentPage.tsx
+++ b/packages/features/ee/payments/components/PaymentPage.tsx
@@ -14,7 +14,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import { getIs24hClockFromLocalStorage, isBrowserLocale24h } from "@calcom/lib/timeFormat";
 import { localStorage } from "@calcom/lib/webstorage";
-import { Icon } from "@calcom/ui/Icon";
+import { Icon } from "@calcom/ui";
 
 import type { PaymentPageProps } from "../pages/payment";
 import PaymentComponent from "./Payment";
diff --git a/packages/features/ee/sso/components/ConfigDialogForm.tsx b/packages/features/ee/sso/components/ConfigDialogForm.tsx
index f06ab813bd..e65414adcb 100644
--- a/packages/features/ee/sso/components/ConfigDialogForm.tsx
+++ b/packages/features/ee/sso/components/ConfigDialogForm.tsx
@@ -4,10 +4,7 @@ import LicenseRequired from "@calcom/ee/common/components/v2/LicenseRequired";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { trpc } from "@calcom/trpc/react";
-import { DialogFooter } from "@calcom/ui/Dialog";
-import { Button } from "@calcom/ui/components/button";
-import { Form, TextArea } from "@calcom/ui/components/form";
-import { showToast } from "@calcom/ui/v2";
+import { Button, DialogFooter, Form, showToast, TextArea } from "@calcom/ui";
 
 interface TeamSSOValues {
   metadata: string;
diff --git a/packages/features/ee/sso/components/SAMLConfiguration.tsx b/packages/features/ee/sso/components/SAMLConfiguration.tsx
index 0ca3b3e5c5..2bf4ae1441 100644
--- a/packages/features/ee/sso/components/SAMLConfiguration.tsx
+++ b/packages/features/ee/sso/components/SAMLConfiguration.tsx
@@ -4,15 +4,21 @@ import LicenseRequired from "@calcom/features/ee/common/components/v2/LicenseReq
 import ConfigDialogForm from "@calcom/features/ee/sso/components/ConfigDialogForm";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui";
-import { Alert } from "@calcom/ui/Alert";
-import { ClipboardCopyIcon } from "@calcom/ui/Icon";
-import { Button, Label, Badge } from "@calcom/ui/components";
-import { showToast } from "@calcom/ui/v2";
-import ConfirmationDialogContent from "@calcom/ui/v2/core/ConfirmationDialogContent";
-import { Dialog, DialogTrigger, DialogContent } from "@calcom/ui/v2/core/Dialog";
-import Meta from "@calcom/ui/v2/core/Meta";
-import SkeletonLoader from "@calcom/ui/v2/core/apps/SkeletonLoader";
+import {
+  Alert,
+  Badge,
+  Button,
+  ClipboardCopyIcon,
+  ConfirmationDialogContent,
+  Dialog,
+  DialogContent,
+  DialogTrigger,
+  Icon,
+  Label,
+  Meta,
+  showToast,
+  SkeletonLoader,
+} from "@calcom/ui";
 
 export default function SAMLConfiguration({ teamId }: { teamId: number | null }) {
   const { t } = useLocale();
diff --git a/packages/features/ee/sso/page/teams-sso-view.tsx b/packages/features/ee/sso/page/teams-sso-view.tsx
index 4cf1e60884..692b1ea9ef 100644
--- a/packages/features/ee/sso/page/teams-sso-view.tsx
+++ b/packages/features/ee/sso/page/teams-sso-view.tsx
@@ -2,8 +2,7 @@ import { useRouter } from "next/router";
 
 import { HOSTED_CAL_FEATURES } from "@calcom/lib/constants";
 import { trpc } from "@calcom/trpc/react";
-import SkeletonLoader from "@calcom/ui/v2/core/apps/SkeletonLoader";
-import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
+import { getSettingsLayout as getLayout, SkeletonLoader } from "@calcom/ui";
 
 import SAMLConfiguration from "../components/SAMLConfiguration";
 
diff --git a/packages/features/ee/sso/page/user-sso-view.tsx b/packages/features/ee/sso/page/user-sso-view.tsx
index fdcf3d6d71..ce96edeb58 100644
--- a/packages/features/ee/sso/page/user-sso-view.tsx
+++ b/packages/features/ee/sso/page/user-sso-view.tsx
@@ -1,7 +1,7 @@
 import { useRouter } from "next/router";
 
 import { HOSTED_CAL_FEATURES } from "@calcom/lib/constants";
-import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
+import { getSettingsLayout as getLayout } from "@calcom/ui";
 
 import SAMLConfiguration from "../components/SAMLConfiguration";
 
diff --git a/packages/features/ee/support/components/HelpMenuItem.tsx b/packages/features/ee/support/components/HelpMenuItem.tsx
index 6b109dfd8d..3004ba59f5 100644
--- a/packages/features/ee/support/components/HelpMenuItem.tsx
+++ b/packages/features/ee/support/components/HelpMenuItem.tsx
@@ -4,9 +4,7 @@ import { useChat } from "react-live-chat-loader";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui/Icon";
-import { Button } from "@calcom/ui/components/button";
-import showToast from "@calcom/ui/v2/core/notifications";
+import { Button, Icon, showToast } from "@calcom/ui";
 
 import ContactMenuItem from "./ContactMenuItem";
 
diff --git a/packages/features/ee/teams/components/AddNewTeamMembers.tsx b/packages/features/ee/teams/components/AddNewTeamMembers.tsx
index 7b9c5d6f00..597cb7339e 100644
--- a/packages/features/ee/teams/components/AddNewTeamMembers.tsx
+++ b/packages/features/ee/teams/components/AddNewTeamMembers.tsx
@@ -8,10 +8,7 @@ import { classNames } from "@calcom/lib";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { RouterOutputs, trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui";
-import { Avatar, Badge, Button } from "@calcom/ui/components";
-import { showToast } from "@calcom/ui/v2/core";
-import { SkeletonContainer, SkeletonText } from "@calcom/ui/v2/core/skeleton";
+import { Avatar, Badge, Button, Icon, showToast, SkeletonContainer, SkeletonText } from "@calcom/ui";
 
 const querySchema = z.object({
   id: z.string().transform((val) => parseInt(val)),
diff --git a/packages/features/ee/teams/components/CreateANewTeamForm.tsx b/packages/features/ee/teams/components/CreateANewTeamForm.tsx
index ba265fb950..bdacf87c50 100644
--- a/packages/features/ee/teams/components/CreateANewTeamForm.tsx
+++ b/packages/features/ee/teams/components/CreateANewTeamForm.tsx
@@ -5,10 +5,7 @@ import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import slugify from "@calcom/lib/slugify";
 import { trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui";
-import { Avatar, Button } from "@calcom/ui/components";
-import { Form, TextField } from "@calcom/ui/components/form";
-import ImageUploader from "@calcom/ui/v2/core/ImageUploader";
+import { Avatar, Button, Form, Icon, ImageUploader, TextField } from "@calcom/ui";
 
 import { NewTeamFormValues } from "../lib/types";
 
diff --git a/packages/features/ee/teams/components/DisableTeamImpersonation.tsx b/packages/features/ee/teams/components/DisableTeamImpersonation.tsx
index 5ac9156eba..3b13b07ff9 100644
--- a/packages/features/ee/teams/components/DisableTeamImpersonation.tsx
+++ b/packages/features/ee/teams/components/DisableTeamImpersonation.tsx
@@ -1,7 +1,7 @@
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { showToast, Switch } from "@calcom/ui/v2/core";
+import { showToast, Switch } from "@calcom/ui";
 
 const DisableTeamImpersonation = ({
   teamId,
diff --git a/packages/features/ee/teams/components/MemberChangeRoleModal.tsx b/packages/features/ee/teams/components/MemberChangeRoleModal.tsx
index 4f0d2cb2db..8e3ba8ccc7 100644
--- a/packages/features/ee/teams/components/MemberChangeRoleModal.tsx
+++ b/packages/features/ee/teams/components/MemberChangeRoleModal.tsx
@@ -3,8 +3,7 @@ import { SyntheticEvent, useMemo, useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Button } from "@calcom/ui/components";
-import { Dialog, DialogContent, Select } from "@calcom/ui/v2";
+import { Button, Dialog, DialogContent, Select } from "@calcom/ui";
 
 type MembershipRoleOption = {
   label: string;
diff --git a/packages/features/ee/teams/components/MemberInvitationModal.tsx b/packages/features/ee/teams/components/MemberInvitationModal.tsx
index 76c2017009..290001d28d 100644
--- a/packages/features/ee/teams/components/MemberInvitationModal.tsx
+++ b/packages/features/ee/teams/components/MemberInvitationModal.tsx
@@ -5,10 +5,16 @@ import { Controller, useForm } from "react-hook-form";
 
 import { IS_TEAM_BILLING_ENABLED } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, TextField } from "@calcom/ui/components";
-import CheckboxField from "@calcom/ui/components/form/checkbox/Checkbox";
-import { Form } from "@calcom/ui/form/fields";
-import { Dialog, DialogContent, DialogFooter, Select } from "@calcom/ui/v2";
+import {
+  Button,
+  CheckboxField,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  Form,
+  Select,
+  TextField,
+} from "@calcom/ui";
 
 import { PendingMember } from "../lib/types";
 
diff --git a/packages/features/ee/teams/components/MemberListItem.tsx b/packages/features/ee/teams/components/MemberListItem.tsx
index a6c1d263b2..ba6b5e309f 100644
--- a/packages/features/ee/teams/components/MemberListItem.tsx
+++ b/packages/features/ee/teams/components/MemberListItem.tsx
@@ -6,9 +6,11 @@ import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { RouterOutputs, trpc } from "@calcom/trpc/react";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
-import { Icon } from "@calcom/ui/Icon";
-import { Button, ButtonGroup, Avatar } from "@calcom/ui/components";
 import {
+  Avatar,
+  Button,
+  ButtonGroup,
+  ConfirmationDialogContent,
   Dialog,
   DialogContent,
   DialogTrigger,
@@ -18,10 +20,10 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
+  Icon,
   showToast,
   Tooltip,
-} from "@calcom/ui/v2/core";
-import ConfirmationDialogContent from "@calcom/ui/v2/core/ConfirmationDialogContent";
+} from "@calcom/ui";
 
 import MemberChangeRoleModal from "./MemberChangeRoleModal";
 import TeamPill, { TeamRole } from "./TeamPill";
diff --git a/packages/features/ee/teams/components/SkeletonloaderTeamList.tsx b/packages/features/ee/teams/components/SkeletonloaderTeamList.tsx
index 84c00dcd7b..b960eefad8 100644
--- a/packages/features/ee/teams/components/SkeletonloaderTeamList.tsx
+++ b/packages/features/ee/teams/components/SkeletonloaderTeamList.tsx
@@ -1,4 +1,4 @@
-import { SkeletonText } from "@calcom/ui/v2";
+import { SkeletonText } from "@calcom/ui";
 
 function SkeletonLoaderTeamList() {
   return (
diff --git a/packages/features/ee/teams/components/TeamAvailabilityModal.tsx b/packages/features/ee/teams/components/TeamAvailabilityModal.tsx
index d4f0885eea..c8c98f304b 100644
--- a/packages/features/ee/teams/components/TeamAvailabilityModal.tsx
+++ b/packages/features/ee/teams/components/TeamAvailabilityModal.tsx
@@ -1,12 +1,10 @@
-import React, { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 
 import dayjs from "@calcom/dayjs";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { RouterOutputs, trpc } from "@calcom/trpc/react";
-import { Avatar } from "@calcom/ui/components/avatar";
-import Select from "@calcom/ui/form/Select";
-import TimezoneSelect, { ITimezone } from "@calcom/ui/form/TimezoneSelect";
-import DatePicker from "@calcom/ui/v2/core/form/DatePicker";
+import type { ITimezone } from "@calcom/ui";
+import { Avatar, DatePickerField as DatePicker, Select, TimezoneSelect } from "@calcom/ui";
 
 import LicenseRequired from "../../common/components/LicenseRequired";
 import TeamAvailabilityTimes from "./TeamAvailabilityTimes";
diff --git a/packages/features/ee/teams/components/TeamAvailabilityScreen.tsx b/packages/features/ee/teams/components/TeamAvailabilityScreen.tsx
index a39f84c33f..57b500ca06 100644
--- a/packages/features/ee/teams/components/TeamAvailabilityScreen.tsx
+++ b/packages/features/ee/teams/components/TeamAvailabilityScreen.tsx
@@ -1,14 +1,12 @@
-import React, { useState, useEffect, CSSProperties } from "react";
+import { CSSProperties, useEffect, useState } from "react";
 import AutoSizer from "react-virtualized-auto-sizer";
 import { FixedSizeList as List } from "react-window";
 
 import dayjs from "@calcom/dayjs";
 import { CAL_URL } from "@calcom/lib/constants";
 import { RouterOutputs, trpc } from "@calcom/trpc/react";
-import { Avatar } from "@calcom/ui/components/avatar";
-import Select from "@calcom/ui/form/Select";
-import TimezoneSelect, { ITimezone } from "@calcom/ui/form/TimezoneSelect";
-import DatePicker from "@calcom/ui/v2/core/form/DatePicker";
+import type { ITimezone } from "@calcom/ui";
+import { Avatar, DatePickerField as DatePicker, Select, TimezoneSelect } from "@calcom/ui";
 
 import TeamAvailabilityTimes from "./TeamAvailabilityTimes";
 
diff --git a/packages/features/ee/teams/components/TeamAvailabilityTimes.tsx b/packages/features/ee/teams/components/TeamAvailabilityTimes.tsx
index 7d7a04663f..711d369512 100644
--- a/packages/features/ee/teams/components/TeamAvailabilityTimes.tsx
+++ b/packages/features/ee/teams/components/TeamAvailabilityTimes.tsx
@@ -5,7 +5,7 @@ import { ITimezone } from "react-timezone-select";
 import { Dayjs } from "@calcom/dayjs";
 import getSlots from "@calcom/lib/slots";
 import { trpc } from "@calcom/trpc/react";
-import Loader from "@calcom/ui/Loader";
+import { Loader } from "@calcom/ui";
 
 interface Props {
   teamId: number;
diff --git a/packages/features/ee/teams/components/TeamInviteList.tsx b/packages/features/ee/teams/components/TeamInviteList.tsx
index 40378f3922..84c74ff82f 100644
--- a/packages/features/ee/teams/components/TeamInviteList.tsx
+++ b/packages/features/ee/teams/components/TeamInviteList.tsx
@@ -2,7 +2,7 @@ import { useState } from "react";
 
 import { MembershipRole } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
-import { showToast } from "@calcom/ui/v2";
+import { showToast } from "@calcom/ui";
 
 import TeamInviteListItem from "./TeamInviteListItem";
 
diff --git a/packages/features/ee/teams/components/TeamInviteListItem.tsx b/packages/features/ee/teams/components/TeamInviteListItem.tsx
index 66dc811452..36063f91aa 100644
--- a/packages/features/ee/teams/components/TeamInviteListItem.tsx
+++ b/packages/features/ee/teams/components/TeamInviteListItem.tsx
@@ -4,9 +4,15 @@ import classNames from "@calcom/lib/classNames";
 import { getPlaceholderAvatar } from "@calcom/lib/getPlaceholderAvatar";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui/Icon";
-import { Avatar, Button } from "@calcom/ui/components";
-import { Dropdown, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/v2";
+import {
+  Avatar,
+  Button,
+  Dropdown,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Icon,
+} from "@calcom/ui";
 
 interface Props {
   team: {
diff --git a/packages/features/ee/teams/components/TeamList.tsx b/packages/features/ee/teams/components/TeamList.tsx
index c1005bfa48..d92f32a9fe 100644
--- a/packages/features/ee/teams/components/TeamList.tsx
+++ b/packages/features/ee/teams/components/TeamList.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 
 import { RouterOutputs, trpc } from "@calcom/trpc/react";
-import showToast from "@calcom/ui/v2/core/notifications";
+import { showToast } from "@calcom/ui";
 
 import TeamListItem from "./TeamListItem";
 
diff --git a/packages/features/ee/teams/components/TeamListItem.tsx b/packages/features/ee/teams/components/TeamListItem.tsx
index 7fad5bdc33..5f331f1014 100644
--- a/packages/features/ee/teams/components/TeamListItem.tsx
+++ b/packages/features/ee/teams/components/TeamListItem.tsx
@@ -6,21 +6,23 @@ import classNames from "@calcom/lib/classNames";
 import { getPlaceholderAvatar } from "@calcom/lib/getPlaceholderAvatar";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { RouterOutputs, trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui/Icon";
-import { Avatar } from "@calcom/ui/components";
-import { Button } from "@calcom/ui/components/button";
-import { ButtonGroup } from "@calcom/ui/components/buttonGroup";
-import ConfirmationDialogContent from "@calcom/ui/v2/core/ConfirmationDialogContent";
-import { Dialog, DialogTrigger } from "@calcom/ui/v2/core/Dialog";
-import Dropdown, {
+import {
+  Avatar,
+  Button,
+  ButtonGroup,
+  ConfirmationDialogContent,
+  Dialog,
+  DialogTrigger,
+  Dropdown,
   DropdownItem,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@calcom/ui/v2/core/Dropdown";
-import { Tooltip } from "@calcom/ui/v2/core/Tooltip";
-import showToast from "@calcom/ui/v2/core/notifications";
+  Icon,
+  showToast,
+  Tooltip,
+} from "@calcom/ui";
 
 import { TeamRole } from "./TeamPill";
 
diff --git a/packages/features/ee/teams/components/TeamsListing.tsx b/packages/features/ee/teams/components/TeamsListing.tsx
index c4cf64a199..5e5097543f 100644
--- a/packages/features/ee/teams/components/TeamsListing.tsx
+++ b/packages/features/ee/teams/components/TeamsListing.tsx
@@ -3,10 +3,7 @@ import { useState } from "react";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui/Icon";
-import { Button } from "@calcom/ui/components/button";
-import { Alert } from "@calcom/ui/v2/core/Alert";
-import EmptyScreen from "@calcom/ui/v2/core/EmptyScreen";
+import { Alert, Button, EmptyScreen, Icon } from "@calcom/ui";
 
 import SkeletonLoaderTeamList from "./SkeletonloaderTeamList";
 import TeamList from "./TeamList";
diff --git a/packages/features/ee/teams/components/TeamsUpgradeBanner.tsx b/packages/features/ee/teams/components/TeamsUpgradeBanner.tsx
index 243ec72231..2142dbad04 100644
--- a/packages/features/ee/teams/components/TeamsUpgradeBanner.tsx
+++ b/packages/features/ee/teams/components/TeamsUpgradeBanner.tsx
@@ -2,8 +2,7 @@ import { useRouter } from "next/router";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { TopBanner } from "@calcom/ui/components";
-import { showToast } from "@calcom/ui/v2/core";
+import { showToast, TopBanner } from "@calcom/ui";
 
 export function TeamsUpgradeBanner() {
   const { t } = useLocale();
diff --git a/packages/features/ee/teams/components/v2/SkeletonLoaderAvailabilityTimes.tsx b/packages/features/ee/teams/components/v2/SkeletonLoaderAvailabilityTimes.tsx
index 8f1e4b71fb..745da0cf38 100644
--- a/packages/features/ee/teams/components/v2/SkeletonLoaderAvailabilityTimes.tsx
+++ b/packages/features/ee/teams/components/v2/SkeletonLoaderAvailabilityTimes.tsx
@@ -1,4 +1,4 @@
-import { SkeletonContainer, SkeletonText } from "@calcom/ui/v2";
+import { SkeletonContainer, SkeletonText } from "@calcom/ui";
 
 function SkeletonLoader() {
   return (
diff --git a/packages/features/ee/teams/components/v2/TeamAvailabilityModal.tsx b/packages/features/ee/teams/components/v2/TeamAvailabilityModal.tsx
index 7542d98246..d92451ad58 100644
--- a/packages/features/ee/teams/components/v2/TeamAvailabilityModal.tsx
+++ b/packages/features/ee/teams/components/v2/TeamAvailabilityModal.tsx
@@ -1,12 +1,11 @@
-import React, { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 
 import dayjs from "@calcom/dayjs";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { RouterOutputs, trpc } from "@calcom/trpc/react";
-import { Avatar, Label } from "@calcom/ui/components";
-import TimezoneSelect, { ITimezone } from "@calcom/ui/form/TimezoneSelect";
-import { Select, DatePicker } from "@calcom/ui/v2";
+import type { ITimezone } from "@calcom/ui";
+import { Avatar, DatePickerField as DatePicker, Label, Select, TimezoneSelect } from "@calcom/ui";
 
 import LicenseRequired from "../../../common/components/LicenseRequired";
 import TeamAvailabilityTimes from "./TeamAvailabilityTimes";
diff --git a/packages/features/ee/teams/components/v2/TeamAvailabilityScreen.tsx b/packages/features/ee/teams/components/v2/TeamAvailabilityScreen.tsx
index a39f84c33f..57b500ca06 100644
--- a/packages/features/ee/teams/components/v2/TeamAvailabilityScreen.tsx
+++ b/packages/features/ee/teams/components/v2/TeamAvailabilityScreen.tsx
@@ -1,14 +1,12 @@
-import React, { useState, useEffect, CSSProperties } from "react";
+import { CSSProperties, useEffect, useState } from "react";
 import AutoSizer from "react-virtualized-auto-sizer";
 import { FixedSizeList as List } from "react-window";
 
 import dayjs from "@calcom/dayjs";
 import { CAL_URL } from "@calcom/lib/constants";
 import { RouterOutputs, trpc } from "@calcom/trpc/react";
-import { Avatar } from "@calcom/ui/components/avatar";
-import Select from "@calcom/ui/form/Select";
-import TimezoneSelect, { ITimezone } from "@calcom/ui/form/TimezoneSelect";
-import DatePicker from "@calcom/ui/v2/core/form/DatePicker";
+import type { ITimezone } from "@calcom/ui";
+import { Avatar, DatePickerField as DatePicker, Select, TimezoneSelect } from "@calcom/ui";
 
 import TeamAvailabilityTimes from "./TeamAvailabilityTimes";
 
diff --git a/packages/features/ee/teams/pages/availability.tsx b/packages/features/ee/teams/pages/availability.tsx
index 9ca388f859..6adefc50c7 100644
--- a/packages/features/ee/teams/pages/availability.tsx
+++ b/packages/features/ee/teams/pages/availability.tsx
@@ -5,10 +5,7 @@ import { getPlaceholderAvatar } from "@calcom/lib/getPlaceholderAvatar";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
-import { Alert } from "@calcom/ui/Alert";
-import Loader from "@calcom/ui/Loader";
-import Shell from "@calcom/ui/Shell";
-import { Avatar } from "@calcom/ui/components/avatar";
+import { Alert, Avatar, Loader, Shell } from "@calcom/ui";
 
 import LicenseRequired from "../../common/components/LicenseRequired";
 import TeamAvailabilityScreen from "../components/TeamAvailabilityScreen";
diff --git a/packages/features/ee/teams/pages/team-appearance-view.tsx b/packages/features/ee/teams/pages/team-appearance-view.tsx
index 2cb1902737..b60c9e0bd4 100644
--- a/packages/features/ee/teams/pages/team-appearance-view.tsx
+++ b/packages/features/ee/teams/pages/team-appearance-view.tsx
@@ -4,10 +4,7 @@ import { Controller, useForm } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Button, Form } from "@calcom/ui/components";
-import { showToast, Switch } from "@calcom/ui/v2/core";
-import Meta from "@calcom/ui/v2/core/Meta";
-import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
+import { Button, Form, getSettingsLayout as getLayout, Meta, showToast, Switch } from "@calcom/ui";
 
 interface TeamAppearanceValues {
   hideBranding: boolean;
diff --git a/packages/features/ee/teams/pages/team-billing-view.tsx b/packages/features/ee/teams/pages/team-billing-view.tsx
index 49d0f0daf9..c4185dbdf3 100644
--- a/packages/features/ee/teams/pages/team-billing-view.tsx
+++ b/packages/features/ee/teams/pages/team-billing-view.tsx
@@ -2,9 +2,7 @@ import { useRouter } from "next/router";
 
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, Icon } from "@calcom/ui";
-import Meta from "@calcom/ui/v2/core/Meta";
-import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
+import { Button, getSettingsLayout as getLayout, Icon, Meta } from "@calcom/ui";
 
 const BillingView = () => {
   const { t } = useLocale();
diff --git a/packages/features/ee/teams/pages/team-listing-view.tsx b/packages/features/ee/teams/pages/team-listing-view.tsx
index 69ce551f96..3578ec4fc2 100644
--- a/packages/features/ee/teams/pages/team-listing-view.tsx
+++ b/packages/features/ee/teams/pages/team-listing-view.tsx
@@ -1,6 +1,5 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import Meta from "@calcom/ui/v2/core/Meta";
-import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
+import { getSettingsLayout as getLayout, Meta } from "@calcom/ui";
 
 import { TeamsListing } from "../components";
 
diff --git a/packages/features/ee/teams/pages/team-members-view.tsx b/packages/features/ee/teams/pages/team-members-view.tsx
index fb24440f88..f2985a67a4 100644
--- a/packages/features/ee/teams/pages/team-members-view.tsx
+++ b/packages/features/ee/teams/pages/team-members-view.tsx
@@ -5,11 +5,7 @@ import { useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui/Icon";
-import { Button } from "@calcom/ui/components";
-import { showToast } from "@calcom/ui/v2/core";
-import Meta from "@calcom/ui/v2/core/Meta";
-import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
+import { Button, getSettingsLayout as getLayout, Icon, Meta, showToast } from "@calcom/ui";
 
 import DisableTeamImpersonation from "../components/DisableTeamImpersonation";
 import MemberInvitationModal from "../components/MemberInvitationModal";
diff --git a/packages/features/ee/teams/pages/team-profile-view.tsx b/packages/features/ee/teams/pages/team-profile-view.tsx
index 5ea31ffff6..e45f7672d5 100644
--- a/packages/features/ee/teams/pages/team-profile-view.tsx
+++ b/packages/features/ee/teams/pages/team-profile-view.tsx
@@ -11,15 +11,23 @@ import { getPlaceholderAvatar } from "@calcom/lib/getPlaceholderAvatar";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import objectKeys from "@calcom/lib/objectKeys";
 import { trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui";
-import { Avatar, Button, Form, Label, TextArea, TextField } from "@calcom/ui/components";
-import ConfirmationDialogContent from "@calcom/ui/v2/core/ConfirmationDialogContent";
-import { Dialog, DialogTrigger } from "@calcom/ui/v2/core/Dialog";
-import ImageUploader from "@calcom/ui/v2/core/ImageUploader";
-import LinkIconButton from "@calcom/ui/v2/core/LinkIconButton";
-import Meta from "@calcom/ui/v2/core/Meta";
-import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
-import showToast from "@calcom/ui/v2/core/notifications";
+import {
+  Avatar,
+  Button,
+  ConfirmationDialogContent,
+  Dialog,
+  DialogTrigger,
+  Form,
+  getSettingsLayout as getLayout,
+  Icon,
+  ImageUploader,
+  Label,
+  LinkIconButton,
+  Meta,
+  showToast,
+  TextArea,
+  TextField,
+} from "@calcom/ui";
 
 const regex = new RegExp("^[a-zA-Z0-9-]*$");
 
diff --git a/packages/features/ee/workflows/components/AddActionDialog.tsx b/packages/features/ee/workflows/components/AddActionDialog.tsx
index 6ba545eef2..8186d6b4dd 100644
--- a/packages/features/ee/workflows/components/AddActionDialog.tsx
+++ b/packages/features/ee/workflows/components/AddActionDialog.tsx
@@ -1,8 +1,3 @@
-/**
- * @deprecated file
- * All new changes should be made to the V2 file in
- * `/packages/features/ee/workflows/components/v2/AddActionDialog.tsx`
- */
 import { zodResolver } from "@hookform/resolvers/zod";
 import { WorkflowActions } from "@prisma/client";
 import { isValidPhoneNumber } from "libphonenumber-js";
@@ -11,72 +6,127 @@ import { Controller, useForm } from "react-hook-form";
 import { z } from "zod";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import Button from "@calcom/ui/Button";
-import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
-import PhoneInput from "@calcom/ui/form/PhoneInputLazy";
-import Select from "@calcom/ui/form/Select";
-import { Form } from "@calcom/ui/form/fields";
+import {
+  Button,
+  Checkbox,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  EmailField,
+  Form,
+  Label,
+  PhoneInput,
+  Select,
+  TextField,
+} from "@calcom/ui";
 
 import { WORKFLOW_ACTIONS } from "../lib/constants";
 import { getWorkflowActionOptions } from "../lib/getOptions";
+import { onlyLettersNumbersSpaces } from "../pages/workflow";
 
 interface IAddActionDialog {
   isOpenDialog: boolean;
   setIsOpenDialog: Dispatch<SetStateAction<boolean>>;
-  addAction: (action: WorkflowActions, sendTo?: string) => void;
+  addAction: (action: WorkflowActions, sendTo?: string, numberRequired?: boolean, sender?: string) => void;
+  isFreeUser: boolean;
+}
+
+interface ISelectActionOption {
+  label: string;
+  value: WorkflowActions;
 }
 
 type AddActionFormValues = {
   action: WorkflowActions;
   sendTo?: string;
+  numberRequired?: boolean;
+  sender?: string;
+};
+
+const cleanUpActionsForFreeUser = (actions: ISelectActionOption[]) => {
+  return actions.filter(
+    (item) => item.value !== WorkflowActions.SMS_ATTENDEE && item.value !== WorkflowActions.SMS_NUMBER
+  );
 };
 
-/**
- * @deprecated file
- * All new changes should be made to the V2 file in
- * `/packages/features/ee/workflows/components/v2/AddActionDialog.tsx`
- */
 export const AddActionDialog = (props: IAddActionDialog) => {
   const { t } = useLocale();
-  const { isOpenDialog, setIsOpenDialog, addAction } = props;
+  const { isOpenDialog, setIsOpenDialog, addAction, isFreeUser } = props;
   const [isPhoneNumberNeeded, setIsPhoneNumberNeeded] = useState(false);
-  const actionOptions = getWorkflowActionOptions(t);
+  const [isSenderIdNeeded, setIsSenderIdNeeded] = useState(false);
+  const [isEmailAddressNeeded, setIsEmailAddressNeeded] = useState(false);
+  const workflowActions = getWorkflowActionOptions(t);
+  const actionOptions = isFreeUser ? cleanUpActionsForFreeUser(workflowActions) : workflowActions;
 
   const formSchema = z.object({
     action: z.enum(WORKFLOW_ACTIONS),
     sendTo: z
       .string()
-      .refine((val) => isValidPhoneNumber(val))
+      .refine((val) => isValidPhoneNumber(val) || val.includes("@"))
       .optional(),
+    numberRequired: z.boolean().optional(),
+    sender: z
+      .string()
+      .refine((val) => onlyLettersNumbersSpaces(val))
+      .nullable(),
   });
 
   const form = useForm<AddActionFormValues>({
     mode: "onSubmit",
     defaultValues: {
       action: WorkflowActions.EMAIL_HOST,
+      sender: "Cal",
     },
     resolver: zodResolver(formSchema),
   });
 
+  const handleSelectAction = (newValue: ISelectActionOption | null) => {
+    if (newValue) {
+      form.setValue("action", newValue.value);
+      if (newValue.value === WorkflowActions.SMS_NUMBER) {
+        setIsPhoneNumberNeeded(true);
+        setIsSenderIdNeeded(true);
+        setIsEmailAddressNeeded(false);
+      } else if (newValue.value === WorkflowActions.EMAIL_ADDRESS) {
+        setIsEmailAddressNeeded(true);
+        setIsSenderIdNeeded(false);
+        setIsPhoneNumberNeeded(false);
+      } else if (newValue.value === WorkflowActions.SMS_ATTENDEE) {
+        setIsSenderIdNeeded(true);
+        setIsEmailAddressNeeded(false);
+        setIsPhoneNumberNeeded(false);
+      } else {
+        setIsSenderIdNeeded(false);
+        setIsEmailAddressNeeded(false);
+        setIsPhoneNumberNeeded(false);
+      }
+      form.unregister("sendTo");
+      form.unregister("numberRequired");
+      form.clearErrors("action");
+      form.clearErrors("sendTo");
+    }
+  };
+
   return (
     <Dialog open={isOpenDialog} onOpenChange={setIsOpenDialog}>
-      <DialogContent>
+      <DialogContent type="creation" useOwnActionButtons={true} title={t("add_action")}>
         <div className="space-x-3 ">
           <div className="pt-1">
-            <DialogHeader title={t("add_action")} />
             <Form
               form={form}
               handleSubmit={(values) => {
-                addAction(values.action, values.sendTo);
+                addAction(values.action, values.sendTo, values.numberRequired, values.sender);
                 form.unregister("sendTo");
                 form.unregister("action");
+                form.unregister("numberRequired");
                 setIsOpenDialog(false);
                 setIsPhoneNumberNeeded(false);
+                setIsEmailAddressNeeded(false);
+                setIsSenderIdNeeded(false);
               }}>
-              <div className="space-y-1">
-                <label htmlFor="label" className="mt-5 block text-sm font-medium text-gray-700">
-                  {t("action")}:
-                </label>
+              <div className="mt-5 space-y-1">
+                <Label htmlFor="label">{t("action")}:</Label>
                 <Controller
                   name="action"
                   control={form.control}
@@ -84,20 +134,9 @@ export const AddActionDialog = (props: IAddActionDialog) => {
                     return (
                       <Select
                         isSearchable={false}
-                        className="block w-full min-w-0 flex-1 rounded-sm text-sm"
+                        className="text-sm"
                         defaultValue={actionOptions[0]}
-                        onChange={(val) => {
-                          if (val) {
-                            form.setValue("action", val.value);
-                            if (val.value === WorkflowActions.SMS_NUMBER) {
-                              setIsPhoneNumberNeeded(true);
-                            } else {
-                              setIsPhoneNumberNeeded(false);
-                              form.unregister("sendTo");
-                            }
-                            form.clearErrors("action");
-                          }
-                        }}
+                        onChange={handleSelectAction}
                         options={actionOptions}
                       />
                     );
@@ -109,13 +148,12 @@ export const AddActionDialog = (props: IAddActionDialog) => {
               </div>
               {isPhoneNumberNeeded && (
                 <div className="mt-5 space-y-1">
-                  <label htmlFor="sendTo" className="block text-sm font-medium text-gray-700 dark:text-white">
-                    {t("phone_number")}
-                  </label>
-                  <div className="mt-1">
+                  <Label htmlFor="sendTo">{t("phone_number")}</Label>
+                  <div className="mt-1 mb-5">
                     <PhoneInput<AddActionFormValues>
                       control={form.control}
                       name="sendTo"
+                      className="rounded-md"
                       placeholder={t("enter_phone_number")}
                       id="sendTo"
                       required
@@ -126,6 +164,37 @@ export const AddActionDialog = (props: IAddActionDialog) => {
                   </div>
                 </div>
               )}
+              {isEmailAddressNeeded && (
+                <div className="mt-5">
+                  <EmailField required label={t("email_address")} {...form.register("sendTo")} />
+                </div>
+              )}
+              {isSenderIdNeeded && (
+                <div className="mt-5">
+                  <TextField
+                    label={t("sender_id")}
+                    type="text"
+                    placeholder="Cal"
+                    maxLength={11}
+                    {...form.register(`sender`)}
+                  />
+                </div>
+              )}
+              {form.getValues("action") === WorkflowActions.SMS_ATTENDEE && (
+                <div className="mt-5">
+                  <Controller
+                    name="numberRequired"
+                    control={form.control}
+                    render={() => (
+                      <Checkbox
+                        defaultChecked={form.getValues("numberRequired") || false}
+                        description={t("make_phone_number_required")}
+                        onChange={(e) => form.setValue("numberRequired", e.target.checked)}
+                      />
+                    )}
+                  />
+                </div>
+              )}
               <DialogFooter>
                 <DialogClose asChild>
                   <Button
@@ -134,7 +203,10 @@ export const AddActionDialog = (props: IAddActionDialog) => {
                       setIsOpenDialog(false);
                       form.unregister("sendTo");
                       form.unregister("action");
+                      form.unregister("numberRequired");
                       setIsPhoneNumberNeeded(false);
+                      setIsEmailAddressNeeded(false);
+                      setIsSenderIdNeeded(false);
                     }}>
                     {t("cancel")}
                   </Button>
diff --git a/packages/features/ee/workflows/components/AddVariablesDropdown.tsx b/packages/features/ee/workflows/components/AddVariablesDropdown.tsx
index 3200529a43..909bd5ea3b 100644
--- a/packages/features/ee/workflows/components/AddVariablesDropdown.tsx
+++ b/packages/features/ee/workflows/components/AddVariablesDropdown.tsx
@@ -1,58 +1,57 @@
-/**
- * @deprecated file
- * All new changes should be made to the V2 file in
- * `/packages/features/ee/workflows/components/v2/AddVariablesDropdown.tsx`
- */
-import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Dropdown, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/Dropdown";
+import { Dropdown, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Icon } from "@calcom/ui";
 
 interface IAddVariablesDropdown {
   addVariable: (isEmailSubject: boolean, variable: string) => void;
-  disabled: boolean;
   isEmailSubject: boolean;
 }
 
 const variables = [
   "event_name",
-  "organizer_name",
-  "attendee_name",
   "event_date",
   "event_time",
   "location",
+  "organizer_name",
+  "attendee_name",
+  "attendee_email",
   "additional_notes",
 ];
 
-/**
- * @deprecated file
- * All new changes should be made to the V2 file in
- * `/packages/features/ee/workflows/components/v2/AddVariablesDropdown.tsx`
- */
 export const AddVariablesDropdown = (props: IAddVariablesDropdown) => {
   const { t } = useLocale();
 
   return (
     <Dropdown>
-      <DropdownMenuTrigger
-        disabled={props.disabled}
-        className={classNames(
-          "border-1 m-2 rounded-sm border border-gray-300 bg-gray-50 text-xs hover:border-gray-400 hover:bg-gray-100 focus:ring-0",
-          props.disabled ? "text-gray-300" : "text-gray-600"
-        )}>
-        <span className="-m-1">+ {t("variable")}</span>
+      <DropdownMenuTrigger className="pt-[6px] focus:bg-gray-50">
+        <div className="flex items-center ">
+          {t("add_variable")}
+          <Icon.FiChevronDown className="ml-1 h-4 w-4" />
+        </div>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="h-40 overflow-scroll">
-        {variables.map((variable) => (
-          <DropdownMenuItem key={variable}>
-            <button
-              key={variable}
-              type="button"
-              className="px-5 py-1"
-              onClick={() => props.addVariable(props.isEmailSubject, t(`${variable}_workflow`))}>
-              {t(`${variable}_workflow`)}
-            </button>
-          </DropdownMenuItem>
-        ))}
+        <div className="pt-4 pb-1">
+          <div className="mb-2 px-4 text-left text-xs text-gray-500">
+            {t("add_dynamic_variables").toLocaleUpperCase()}
+          </div>
+          {variables.map((variable) => (
+            <DropdownMenuItem key={variable} className="hover:ring-0">
+              <button
+                key={variable}
+                type="button"
+                className="w-full px-4 py-2"
+                onClick={() => props.addVariable(props.isEmailSubject, t(`${variable}_workflow`))}>
+                <div className="sm:grid sm:grid-cols-2">
+                  <div className="mr-3 text-left md:col-span-1">
+                    {`{${t(`${variable}_workflow`).toUpperCase().replace(/ /g, "_")}}`}
+                  </div>
+                  <div className="hidden text-left text-gray-600 sm:col-span-1 sm:flex">
+                    {t(`${variable}_info`)}
+                  </div>
+                </div>
+              </button>
+            </DropdownMenuItem>
+          ))}
+        </div>
       </DropdownMenuContent>
     </Dropdown>
   );
diff --git a/packages/features/ee/workflows/components/v2/DeleteDialog.tsx b/packages/features/ee/workflows/components/DeleteDialog.tsx
similarity index 90%
rename from packages/features/ee/workflows/components/v2/DeleteDialog.tsx
rename to packages/features/ee/workflows/components/DeleteDialog.tsx
index d6a47b83b5..925d7a75ec 100644
--- a/packages/features/ee/workflows/components/v2/DeleteDialog.tsx
+++ b/packages/features/ee/workflows/components/DeleteDialog.tsx
@@ -3,9 +3,7 @@ import { Dispatch, SetStateAction } from "react";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HttpError } from "@calcom/lib/http-error";
 import { trpc } from "@calcom/trpc/react";
-import { Dialog } from "@calcom/ui/v2";
-import { showToast } from "@calcom/ui/v2";
-import ConfirmationDialogContent from "@calcom/ui/v2/core/ConfirmationDialogContent";
+import { ConfirmationDialogContent, Dialog, showToast } from "@calcom/ui";
 
 interface IDeleteDialog {
   isOpenDialog: boolean;
diff --git a/packages/features/ee/workflows/components/v2/EmptyScreen.tsx b/packages/features/ee/workflows/components/EmptyScreen.tsx
similarity index 97%
rename from packages/features/ee/workflows/components/v2/EmptyScreen.tsx
rename to packages/features/ee/workflows/components/EmptyScreen.tsx
index 2b4d4901f3..b2cf69ffb8 100644
--- a/packages/features/ee/workflows/components/v2/EmptyScreen.tsx
+++ b/packages/features/ee/workflows/components/EmptyScreen.tsx
@@ -3,8 +3,7 @@ import { Icon as FeatherIcon } from "react-feather";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { SVGComponent } from "@calcom/types/SVGComponent";
-import { Icon } from "@calcom/ui/Icon";
-import { Button } from "@calcom/ui/components/button";
+import { Button, Icon } from "@calcom/ui";
 
 type WorkflowExampleType = {
   Icon: FeatherIcon;
diff --git a/packages/features/ee/workflows/components/v2/EventWorkflowsTab.tsx b/packages/features/ee/workflows/components/EventWorkflowsTab.tsx
similarity index 95%
rename from packages/features/ee/workflows/components/v2/EventWorkflowsTab.tsx
rename to packages/features/ee/workflows/components/EventWorkflowsTab.tsx
index 368b0d7bed..df73b66669 100644
--- a/packages/features/ee/workflows/components/v2/EventWorkflowsTab.tsx
+++ b/packages/features/ee/workflows/components/EventWorkflowsTab.tsx
@@ -1,18 +1,16 @@
 import { WorkflowActions } from "@prisma/client";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HttpError } from "@calcom/lib/http-error";
 import { trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui";
-import { Button } from "@calcom/ui/components";
-import { showToast, Switch, Tooltip, EmptyScreen } from "@calcom/ui/v2";
+import { Button, EmptyScreen, Icon, showToast, Switch, Tooltip } from "@calcom/ui";
 
-import LicenseRequired from "../../../common/components/v2/LicenseRequired";
-import { getActionIcon } from "../../lib/getActionIcon";
+import LicenseRequired from "../../common/components/v2/LicenseRequired";
+import { getActionIcon } from "../lib/getActionIcon";
 import SkeletonLoader from "./SkeletonLoaderEventWorkflowsTab";
 import { WorkflowType } from "./WorkflowListPage";
 
diff --git a/packages/features/ee/workflows/components/NewWorkflowButton.tsx b/packages/features/ee/workflows/components/NewWorkflowButton.tsx
deleted file mode 100644
index f790e511dc..0000000000
--- a/packages/features/ee/workflows/components/NewWorkflowButton.tsx
+++ /dev/null
@@ -1,255 +0,0 @@
-import { zodResolver } from "@hookform/resolvers/zod";
-import { TimeUnit, WorkflowActions, WorkflowTriggerEvents } from "@prisma/client";
-import { isValidPhoneNumber } from "libphonenumber-js";
-import { useRouter } from "next/router";
-import { useState } from "react";
-import { Controller, useForm } from "react-hook-form";
-import { z } from "zod";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { HttpError } from "@calcom/lib/http-error";
-import { trpc } from "@calcom/trpc/react";
-import { Button } from "@calcom/ui";
-import { Dialog, DialogClose, DialogContent, DialogTrigger } from "@calcom/ui/Dialog";
-import { Icon } from "@calcom/ui/Icon";
-import PhoneInput from "@calcom/ui/form/PhoneInputLazy";
-import Select from "@calcom/ui/form/Select";
-import { Form, TextField } from "@calcom/ui/form/fields";
-import showToast from "@calcom/ui/v2/core/notifications";
-
-import { TIME_UNIT, WORKFLOW_ACTIONS, WORKFLOW_TRIGGER_EVENTS } from "../lib/constants";
-import {
-  getWorkflowActionOptions,
-  getWorkflowTimeUnitOptions,
-  getWorkflowTriggerOptions,
-} from "../lib/getOptions";
-
-type WorkflowFormValues = {
-  name: string;
-  trigger: WorkflowTriggerEvents;
-  action: WorkflowActions;
-  time?: number;
-  timeUnit?: TimeUnit;
-  sendTo?: string;
-};
-
-export function NewWorkflowButton() {
-  const { t } = useLocale();
-  const router = useRouter();
-  const [showTimeSection, setShowTimeSection] = useState(false);
-  const [isPhoneNumberNeeded, setIsPhoneNumberNeeded] = useState(false);
-  const triggerOptions = getWorkflowTriggerOptions(t);
-  const actionOptions = getWorkflowActionOptions(t);
-  const timeUnitOptions = getWorkflowTimeUnitOptions(t);
-
-  const formSchema = z.object({
-    name: z.string().min(1),
-    trigger: z.enum(WORKFLOW_TRIGGER_EVENTS),
-    action: z.enum(WORKFLOW_ACTIONS),
-    time: z.number().min(1).optional(),
-    timeUnit: z.enum(TIME_UNIT).optional(),
-    sendTo: z
-      .string()
-      .refine((val) => isValidPhoneNumber(val))
-      .optional(),
-  });
-
-  const form = useForm<WorkflowFormValues>({
-    defaultValues: {
-      timeUnit: TimeUnit.HOUR,
-    },
-    mode: "onSubmit",
-    resolver: zodResolver(formSchema),
-  });
-
-  const createMutation = trpc.viewer.workflows.create.useMutation({
-    onSuccess: async ({ workflow }) => {
-      await router.replace("/workflows/" + workflow.id);
-      setIsPhoneNumberNeeded(false);
-      setShowTimeSection(false);
-      showToast(t("workflow_created_successfully", { workflowName: workflow.name }), "success");
-    },
-    onError: (err) => {
-      if (err instanceof HttpError) {
-        const message = `${err.statusCode}: ${err.message}`;
-        showToast(message, "error");
-      }
-
-      if (err.data?.code === "UNAUTHORIZED") {
-        const message = `${err.data.code}: You are not able to create this event`;
-        showToast(message, "error");
-      }
-    },
-  });
-
-  return (
-    <Dialog name="new-workflow">
-      <DialogTrigger asChild>
-        <Button StartIcon={Icon.FiPlus}>{t("new_workflow_btn")}</Button>
-      </DialogTrigger>
-      <DialogContent>
-        <div className="mb-4">
-          <h3 className="text-lg font-bold leading-6 text-gray-900" id="modal-title">
-            {t("add_new_workflow")}
-          </h3>
-        </div>
-        <Form
-          form={form}
-          handleSubmit={(values) => {
-            form.clearErrors();
-            createMutation.mutate(values);
-          }}>
-          <>
-            <div className="mt-9">
-              <TextField
-                label={t("workflow_name")}
-                placeholder={t("custom_workflow")}
-                {...form.register("name")}
-              />
-            </div>
-            <div className="mt-5 space-y-1">
-              <label htmlFor="label" className="mt-5 block text-sm font-medium text-gray-700">
-                {t("trigger")}:
-              </label>
-              <Controller
-                name="trigger"
-                control={form.control}
-                render={() => {
-                  return (
-                    <Select
-                      isSearchable={false}
-                      className="block w-full min-w-0 flex-1 rounded-sm text-sm"
-                      onChange={(val) => {
-                        if (val) {
-                          form.setValue("trigger", val.value);
-                          form.clearErrors("trigger");
-                          if (val.value === WorkflowTriggerEvents.BEFORE_EVENT) {
-                            setShowTimeSection(true);
-                          } else {
-                            setShowTimeSection(false);
-                            form.unregister("time");
-                            form.unregister("timeUnit");
-                          }
-                        }
-                      }}
-                      options={triggerOptions}
-                    />
-                  );
-                }}
-              />
-              {form.formState.errors.trigger && (
-                <p className="mt-1 text-sm text-red-500">{form.formState.errors.trigger.message}</p>
-              )}
-            </div>
-            {showTimeSection && (
-              <div className="mt-5 mb-4 space-y-1">
-                <label htmlFor="label" className="mb-2 block text-sm font-medium text-gray-700">
-                  {t("how_long_before")}
-                </label>
-                <div className="flex">
-                  <input
-                    type="number"
-                    min="1"
-                    defaultValue={24}
-                    className="mr-5 block w-32 rounded-sm border-gray-300 px-3 py-2 text-sm marker:border focus:border-neutral-800 focus:outline-none focus:ring-1 focus:ring-neutral-800"
-                    {...form.register("time", { valueAsNumber: true })}
-                  />
-                  <div className="w-28">
-                    <Controller
-                      name="timeUnit"
-                      control={form.control}
-                      render={() => {
-                        return (
-                          <Select
-                            isSearchable={false}
-                            className="block min-w-0 flex-1 rounded-sm text-sm"
-                            onChange={(val) => {
-                              if (val) {
-                                form.setValue("timeUnit", val.value);
-                              }
-                            }}
-                            defaultValue={timeUnitOptions[1]}
-                            options={timeUnitOptions}
-                          />
-                        );
-                      }}
-                    />
-                  </div>
-                </div>
-              </div>
-            )}
-            <div className="mt-5 space-y-1">
-              <label htmlFor="label" className="block text-sm font-medium text-gray-700">
-                {t("action")}:
-              </label>
-              <Controller
-                name="action"
-                control={form.control}
-                render={() => {
-                  return (
-                    <Select
-                      isSearchable={false}
-                      className="block w-full min-w-0 flex-1 rounded-sm text-sm"
-                      onChange={(val) => {
-                        if (val) {
-                          form.setValue("action", val.value);
-                          form.clearErrors("action");
-                          if (val.value === WorkflowActions.SMS_NUMBER) {
-                            setIsPhoneNumberNeeded(true);
-                          } else {
-                            setIsPhoneNumberNeeded(false);
-                            form.unregister("sendTo");
-                          }
-                        }
-                      }}
-                      options={actionOptions}
-                    />
-                  );
-                }}
-              />
-              {form.formState.errors.action && (
-                <p className="mt-1 text-sm text-red-500">{form.formState.errors.action.message}</p>
-              )}
-            </div>
-            {isPhoneNumberNeeded && (
-              <div className="mt-5 space-y-1">
-                <label htmlFor="sendTo" className="block text-sm font-medium text-gray-700 dark:text-white">
-                  {t("phone_number")}
-                </label>
-                <div className="mt-1">
-                  <PhoneInput<WorkflowFormValues>
-                    control={form.control}
-                    name="sendTo"
-                    placeholder={t("enter_phone_number")}
-                    id="sendTo"
-                    required
-                  />
-                </div>
-                {form.formState.errors.sendTo && (
-                  <p className="mt-1 text-sm text-red-500">{form.formState.errors.sendTo.message}</p>
-                )}
-              </div>
-            )}
-          </>
-          <div className=" mt-8 flex flex-row-reverse gap-x-2">
-            <Button type="submit" disabled={createMutation.isLoading}>
-              {t("continue")}
-            </Button>
-            <DialogClose asChild>
-              <Button
-                color="secondary"
-                onClick={() => {
-                  setShowTimeSection(false);
-                  setIsPhoneNumberNeeded(false);
-                  form.clearErrors();
-                  form.setValue("name", "");
-                }}>
-                {t("cancel")}
-              </Button>
-            </DialogClose>
-          </div>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-}
diff --git a/packages/features/ee/workflows/components/v2/SkeletonLoaderEdit.tsx b/packages/features/ee/workflows/components/SkeletonLoaderEdit.tsx
similarity index 91%
rename from packages/features/ee/workflows/components/v2/SkeletonLoaderEdit.tsx
rename to packages/features/ee/workflows/components/SkeletonLoaderEdit.tsx
index 8805020aa6..edb4308be9 100644
--- a/packages/features/ee/workflows/components/v2/SkeletonLoaderEdit.tsx
+++ b/packages/features/ee/workflows/components/SkeletonLoaderEdit.tsx
@@ -1,4 +1,4 @@
-import { SkeletonContainer, SkeletonText } from "@calcom/ui/v2";
+import { SkeletonContainer, SkeletonText } from "@calcom/ui";
 
 function SkeletonLoader() {
   return (
diff --git a/packages/features/ee/workflows/components/v2/SkeletonLoaderEventWorkflowsTab.tsx b/packages/features/ee/workflows/components/SkeletonLoaderEventWorkflowsTab.tsx
similarity index 91%
rename from packages/features/ee/workflows/components/v2/SkeletonLoaderEventWorkflowsTab.tsx
rename to packages/features/ee/workflows/components/SkeletonLoaderEventWorkflowsTab.tsx
index 4fcb23a789..2d699cf828 100644
--- a/packages/features/ee/workflows/components/v2/SkeletonLoaderEventWorkflowsTab.tsx
+++ b/packages/features/ee/workflows/components/SkeletonLoaderEventWorkflowsTab.tsx
@@ -1,5 +1,4 @@
-import { Icon } from "@calcom/ui";
-import { SkeletonAvatar, SkeletonText } from "@calcom/ui/v2";
+import { SkeletonAvatar, SkeletonText } from "@calcom/ui";
 
 function SkeletonLoader() {
   return (
diff --git a/packages/features/ee/workflows/components/v2/SkeletonLoaderList.tsx b/packages/features/ee/workflows/components/SkeletonLoaderList.tsx
similarity index 93%
rename from packages/features/ee/workflows/components/v2/SkeletonLoaderList.tsx
rename to packages/features/ee/workflows/components/SkeletonLoaderList.tsx
index e7e34ef5d7..0f2662e74d 100644
--- a/packages/features/ee/workflows/components/v2/SkeletonLoaderList.tsx
+++ b/packages/features/ee/workflows/components/SkeletonLoaderList.tsx
@@ -1,5 +1,4 @@
-import { Icon } from "@calcom/ui";
-import { SkeletonText } from "@calcom/ui/v2";
+import { Icon, SkeletonText } from "@calcom/ui";
 
 function SkeletonLoader() {
   return (
diff --git a/packages/features/ee/workflows/components/v2/TimeTimeUnitInput.tsx b/packages/features/ee/workflows/components/TimeTimeUnitInput.tsx
similarity index 86%
rename from packages/features/ee/workflows/components/v2/TimeTimeUnitInput.tsx
rename to packages/features/ee/workflows/components/TimeTimeUnitInput.tsx
index 5774f7e529..411d588535 100644
--- a/packages/features/ee/workflows/components/v2/TimeTimeUnitInput.tsx
+++ b/packages/features/ee/workflows/components/TimeTimeUnitInput.tsx
@@ -2,12 +2,17 @@ import { useState } from "react";
 import { UseFormReturn } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui/Icon";
-import { TextField } from "@calcom/ui/components/form";
-import { Dropdown, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/v2";
+import {
+  Dropdown,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Icon,
+  TextField,
+} from "@calcom/ui";
 
-import { getWorkflowTimeUnitOptions } from "../../lib/getOptions";
-import type { FormValues } from "../../pages/v2/workflow";
+import { getWorkflowTimeUnitOptions } from "../lib/getOptions";
+import type { FormValues } from "../pages/workflow";
 
 type Props = {
   form: UseFormReturn<FormValues>;
diff --git a/packages/features/ee/workflows/components/WorkflowDetailsPage.tsx b/packages/features/ee/workflows/components/WorkflowDetailsPage.tsx
index a9792a2ee2..9ee9c9d8c0 100644
--- a/packages/features/ee/workflows/components/WorkflowDetailsPage.tsx
+++ b/packages/features/ee/workflows/components/WorkflowDetailsPage.tsx
@@ -1,19 +1,19 @@
-import { ArrowDownIcon } from "@heroicons/react/outline";
 import { WorkflowActions, WorkflowTemplates } from "@prisma/client";
 import { useRouter } from "next/router";
 import { Dispatch, SetStateAction, useMemo, useState } from "react";
 import { Controller, UseFormReturn } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { HttpError } from "@calcom/lib/http-error";
 import { trpc } from "@calcom/trpc/react";
-import { Button } from "@calcom/ui";
-import MultiSelectCheckboxes, { Option } from "@calcom/ui/form/MultiSelectCheckboxes";
-import { Form } from "@calcom/ui/form/fields";
-import showToast from "@calcom/ui/v2/core/notifications";
+import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
+import { Icon } from "@calcom/ui";
+import { Button, Label, TextField } from "@calcom/ui";
+import { MultiSelectCheckboxes } from "@calcom/ui";
+import type { MultiSelectCheckboxesOptionType as Option } from "@calcom/ui";
 
 import type { FormValues } from "../pages/workflow";
 import { AddActionDialog } from "./AddActionDialog";
+import { DeleteDialog } from "./DeleteDialog";
 import WorkflowStepContainer from "./WorkflowStepContainer";
 
 interface Props {
@@ -27,11 +27,13 @@ export default function WorkflowDetailsPage(props: Props) {
   const { form, workflowId, selectedEventTypes, setSelectedEventTypes } = props;
   const { t } = useLocale();
   const router = useRouter();
-  const utils = trpc.useContext();
+
+  const me = useMeQuery();
+  const isFreeUser = me.data?.plan === "FREE";
 
   const [isAddActionDialogOpen, setIsAddActionDialogOpen] = useState(false);
   const [reload, setReload] = useState(false);
-  const [editCounter, setEditCounter] = useState(0);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
 
   const { data, isLoading } = trpc.viewer.eventTypes.getByViewer.useQuery();
 
@@ -50,29 +52,7 @@ export default function WorkflowDetailsPage(props: Props) {
     [data]
   );
 
-  const updateMutation = trpc.viewer.workflows.update.useMutation({
-    onSuccess: async ({ workflow }) => {
-      if (workflow) {
-        utils.viewer.workflows.get.setData({ id: +workflow.id }, workflow);
-
-        showToast(
-          t("workflow_updated_successfully", {
-            workflowName: workflow.name,
-          }),
-          "success"
-        );
-      }
-      await router.push("/workflows");
-    },
-    onError: (err) => {
-      if (err instanceof HttpError) {
-        const message = `${err.statusCode}: ${err.message}`;
-        showToast(message, "error");
-      }
-    },
-  });
-
-  const addAction = (action: WorkflowActions, sendTo?: string) => {
+  const addAction = (action: WorkflowActions, sendTo?: string, numberRequired?: boolean, sender?: string) => {
     const steps = form.getValues("steps");
     const id =
       steps?.length > 0
@@ -94,38 +74,22 @@ export default function WorkflowDetailsPage(props: Props) {
       workflowId: workflowId,
       reminderBody: null,
       emailSubject: null,
-      template: WorkflowTemplates.REMINDER,
-      numberRequired: null,
+      template: WorkflowTemplates.CUSTOM,
+      numberRequired: numberRequired || false,
+      sender: sender || "Cal",
     };
     steps?.push(step);
     form.setValue("steps", steps);
   };
 
   return (
-    <div>
-      <Form
-        form={form}
-        handleSubmit={async (values) => {
-          let activeOnEventTypeIds: number[] = [];
-          if (values.activeOn) {
-            activeOnEventTypeIds = values.activeOn.map((option) => {
-              return parseInt(option.value, 10);
-            });
-          }
-          updateMutation.mutate({
-            id: parseInt(router.query.workflow as string, 10),
-            name: values.name,
-            activeOn: activeOnEventTypeIds,
-            steps: values.steps,
-            trigger: values.trigger,
-            time: values.time || null,
-            timeUnit: values.timeUnit || null,
-          });
-        }}>
-        <div className="-mt-7 space-y-1">
-          <label htmlFor="label" className="blocktext-sm mb-2 font-medium text-gray-700">
-            {t("active_on")}:
-          </label>
+    <>
+      <div className="my-8 sm:my-0 md:flex">
+        <div className="pl-2 pr-3 md:sticky md:top-6 md:h-0 md:pl-0">
+          <div className="mb-5">
+            <TextField label={`${t("workflow_name")}:`} type="text" {...form.register("name")} />
+          </div>
+          <Label>{t("which_event_type_apply")}</Label>
           <Controller
             name="activeOn"
             control={form.control}
@@ -134,6 +98,7 @@ export default function WorkflowDetailsPage(props: Props) {
                 <MultiSelectCheckboxes
                   options={eventTypeOptions}
                   isLoading={isLoading}
+                  className="w-full md:w-64"
                   setSelected={setSelectedEventTypes}
                   selected={selectedEventTypes}
                   setValue={(s: Option[]) => {
@@ -143,13 +108,23 @@ export default function WorkflowDetailsPage(props: Props) {
               );
             }}
           />
+          <div className="my-7 border-transparent md:border-t md:border-gray-200" />
+          <Button
+            type="button"
+            StartIcon={Icon.FiTrash2}
+            color="destructive"
+            className="border"
+            onClick={() => setDeleteDialogOpen(true)}>
+            {t("delete_workflow")}
+          </Button>
+          <div className="my-7 border-t border-gray-200 md:border-none" />
         </div>
 
         {/* Workflow Trigger Event & Steps */}
-        <div className="mt-5 px-5 pt-10 pb-5">
+        <div className="w-full rounded-md border border-gray-200 bg-gray-50 p-3 py-5 md:ml-3 md:p-8">
           {form.getValues("trigger") && (
             <div>
-              <WorkflowStepContainer form={form} setEditCounter={setEditCounter} editCounter={editCounter} />
+              <WorkflowStepContainer form={form} isFreeUser={isFreeUser} />
             </div>
           )}
           {form.getValues("steps") && (
@@ -162,33 +137,34 @@ export default function WorkflowDetailsPage(props: Props) {
                     step={step}
                     reload={reload}
                     setReload={setReload}
-                    setEditCounter={setEditCounter}
-                    editCounter={editCounter}
+                    isFreeUser={isFreeUser}
                   />
                 );
               })}
             </>
           )}
-          <div className="flex justify-center">
-            <ArrowDownIcon className="my-4 h-7 stroke-1 text-gray-500" />
+          <div className="my-3 flex justify-center">
+            <Icon.FiArrowDown className="stroke-[1.5px] text-3xl text-gray-500" />
           </div>
           <div className="flex justify-center">
             <Button type="button" onClick={() => setIsAddActionDialogOpen(true)} color="secondary">
               {t("add_action")}
             </Button>
           </div>
-          <div className="rtl:space-x-reverse; mt-10 flex justify-end space-x-2">
-            <Button type="submit" disabled={updateMutation.isLoading || editCounter > 0}>
-              {t("save")}
-            </Button>
-          </div>
         </div>
-      </Form>
+      </div>
       <AddActionDialog
         isOpenDialog={isAddActionDialogOpen}
         setIsOpenDialog={setIsAddActionDialogOpen}
         addAction={addAction}
+        isFreeUser={isFreeUser}
       />
-    </div>
+      <DeleteDialog
+        isOpenDialog={deleteDialogOpen}
+        setIsOpenDialog={setDeleteDialogOpen}
+        workflowId={workflowId}
+        additionalFunction={async () => await router.push("/workflows")}
+      />
+    </>
   );
 }
diff --git a/packages/features/ee/workflows/components/WorkflowListPage.tsx b/packages/features/ee/workflows/components/WorkflowListPage.tsx
index 374706b353..bb36ad5b21 100644
--- a/packages/features/ee/workflows/components/WorkflowListPage.tsx
+++ b/packages/features/ee/workflows/components/WorkflowListPage.tsx
@@ -1,31 +1,71 @@
+import { Workflow, WorkflowStep } from "@prisma/client";
 import Link from "next/link";
+import { useRouter } from "next/router";
 import { useState } from "react";
 
+import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HttpError } from "@calcom/lib/http-error";
 import { trpc } from "@calcom/trpc/react";
-import { Button, Tooltip } from "@calcom/ui";
-import ConfirmationDialogContent from "@calcom/ui/ConfirmationDialogContent";
-import { Dialog } from "@calcom/ui/Dialog";
-import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/Dropdown";
-import EmptyScreen from "@calcom/ui/EmptyScreen";
-import { Icon } from "@calcom/ui/Icon";
-import showToast from "@calcom/ui/v2/core/notifications";
+import {
+  Button,
+  ButtonGroup,
+  Dropdown,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Icon,
+  showToast,
+  Tooltip,
+} from "@calcom/ui";
 
-import { WorkflowType } from "./v2/WorkflowListPage";
+import { getActionIcon } from "../lib/getActionIcon";
+import { DeleteDialog } from "./DeleteDialog";
+import EmptyScreen from "./EmptyScreen";
 
-const CreateFirstWorkflowView = () => {
+const CreateEmptyWorkflowView = () => {
   const { t } = useLocale();
+  const router = useRouter();
+
+  const createMutation = trpc.viewer.workflows.createV2.useMutation({
+    onSuccess: async ({ workflow }) => {
+      await router.replace("/workflows/" + workflow.id);
+    },
+    onError: (err) => {
+      if (err instanceof HttpError) {
+        const message = `${err.statusCode}: ${err.message}`;
+        showToast(message, "error");
+      }
+
+      if (err.data?.code === "UNAUTHORIZED") {
+        const message = `${err.data.code}: You are not able to create this workflow`;
+        showToast(message, "error");
+      }
+    },
+  });
 
   return (
     <EmptyScreen
-      Icon={Icon.FiZap}
-      headline={t("new_workflow_heading")}
-      description={t("new_workflow_description")}
+      buttonText={t("create_workflow")}
+      buttonOnClick={() => createMutation.mutate()}
+      IconHeading={Icon.FiZap}
+      headline={t("workflows")}
+      description={t("no_workflows_description")}
+      isLoading={createMutation.isLoading}
+      showExampleWorkflows={true}
     />
   );
 };
 
+export type WorkflowType = Workflow & {
+  steps: WorkflowStep[];
+  activeOn: {
+    eventType: {
+      id: number;
+      title: string;
+    };
+  }[];
+};
 interface Props {
   workflows: WorkflowType[] | undefined;
 }
@@ -33,68 +73,64 @@ export default function WorkflowListPage({ workflows }: Props) {
   const { t } = useLocale();
   const utils = trpc.useContext();
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
-  const [deleteDialogTypeId, setDeleteDialogTypeId] = useState(0);
-
-  const query = trpc.viewer.workflows.list.useQuery();
-
-  const deleteMutation = trpc.viewer.workflows.delete.useMutation({
-    onSuccess: async () => {
-      await utils.viewer.workflows.list.invalidate();
-      showToast(t("workflow_deleted_successfully"), "success");
-      setDeleteDialogOpen(false);
-    },
-    onError: (err) => {
-      if (err instanceof HttpError) {
-        const message = `${err.statusCode}: ${err.message}`;
-        showToast(message, "error");
-        setDeleteDialogOpen(false);
-      }
-    },
-  });
-
-  async function deleteWorkflowHandler(id: number) {
-    const payload = { id };
-    deleteMutation.mutate(payload);
-  }
+  const [workflowToDeleteId, setwWorkflowToDeleteId] = useState(0);
+  const router = useRouter();
 
   return (
     <>
       {workflows && workflows.length > 0 ? (
-        <div className="-mx-4 mb-16 overflow-hidden rounded-sm border border-gray-200 bg-white sm:mx-0">
-          <ul className="divide-y divide-neutral-200">
+        <div className="overflow-hidden rounded-md border border-gray-200 bg-white sm:mx-0">
+          <ul className="divide-y divide-gray-200">
             {workflows.map((workflow) => (
               <li key={workflow.id}>
-                <div className="first-line:group flex w-full items-center justify-between px-4 py-4 hover:bg-neutral-50 sm:px-6">
+                <div className="first-line:group flex w-full items-center justify-between p-4 hover:bg-neutral-50 sm:px-6">
                   <Link href={"/workflows/" + workflow.id}>
                     <a className="flex-grow cursor-pointer">
                       <div className="rtl:space-x-reverse">
-                        <div className="max-w-56 truncate text-sm font-medium leading-6 text-neutral-900 md:max-w-max">
-                          {workflow.name}
+                        <div
+                          className={classNames(
+                            "max-w-56 truncate text-sm font-medium leading-6 text-gray-900 md:max-w-max",
+                            workflow.name ? "text-gray-900" : "text-neutral-500"
+                          )}>
+                          {workflow.name
+                            ? workflow.name
+                            : "Untitled (" +
+                              `${t(`${workflow.steps[0].action.toLowerCase()}_action`)}`
+                                .charAt(0)
+                                .toUpperCase() +
+                              `${t(`${workflow.steps[0].action.toLowerCase()}_action`)}`.slice(1) +
+                              ")"}
                         </div>
-                        <ul className="mt-2 flex flex-wrap text-sm text-neutral-500 sm:flex-nowrap">
-                          <li className="mb-1 mr-4 flex min-w-[265px] items-center truncate whitespace-nowrap">
-                            <span className="mr-1">{t("triggers")}</span>
-                            {workflow.timeUnit && workflow.time && (
-                              <span className="mr-1">
-                                {t(`${workflow.timeUnit.toLowerCase()}`, { count: workflow.time })}
-                              </span>
-                            )}
-                            <span>{t(`${workflow.trigger.toLowerCase()}_trigger`)}</span>
+                        <ul className="mt-2 flex flex-wrap space-x-1 sm:flex-nowrap ">
+                          <li className="mb-1 flex items-center whitespace-nowrap rounded-sm bg-gray-100 px-1 py-px text-xs text-gray-800 dark:bg-gray-900 dark:text-white">
+                            <div>
+                              {getActionIcon(workflow.steps)}
+
+                              <span className="mr-1">{t("triggers")}</span>
+                              {workflow.timeUnit && workflow.time && (
+                                <span className="mr-1">
+                                  {t(`${workflow.timeUnit.toLowerCase()}`, { count: workflow.time })}
+                                </span>
+                              )}
+                              <span>{t(`${workflow.trigger.toLowerCase()}_trigger`)}</span>
+                            </div>
                           </li>
-                          <li className="mb-1 mr-4 flex min-w-[11rem] items-center whitespace-nowrap">
-                            <Icon.FiLink
-                              className="mr-1.5 inline h-4 w-4 text-neutral-400"
-                              aria-hidden="true"
-                            />
+                          <li className="mb-1 flex items-center whitespace-nowrap rounded-sm bg-gray-100 px-1 py-px text-xs text-gray-800 dark:bg-gray-900 dark:text-white">
                             {workflow.activeOn && workflow.activeOn.length > 0 ? (
                               <Tooltip
                                 content={workflow.activeOn.map((activeOn, key) => (
                                   <p key={key}>{activeOn.eventType.title}</p>
                                 ))}>
-                                <span>{t("active_on_event_types", { count: workflow.activeOn.length })}</span>
+                                <div>
+                                  <Icon.FiLink className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
+                                  {t("active_on_event_types", { count: workflow.activeOn.length })}
+                                </div>
                               </Tooltip>
                             ) : (
-                              <span>{t("no_active_event_types")}</span>
+                              <div>
+                                <Icon.FiLink className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
+                                {t("no_active_event_types")}
+                              </div>
                             )}
                           </li>
                         </ul>
@@ -102,7 +138,31 @@ export default function WorkflowListPage({ workflows }: Props) {
                     </a>
                   </Link>
                   <div className="flex flex-shrink-0">
-                    <div className="flex justify-between space-x-2 rtl:space-x-reverse">
+                    <div className="hidden sm:block">
+                      <ButtonGroup combined>
+                        <Tooltip content={t("edit") as string}>
+                          <Button
+                            type="button"
+                            color="secondary"
+                            size="icon"
+                            StartIcon={Icon.FiEdit2}
+                            onClick={async () => await router.replace("/workflows/" + workflow.id)}
+                          />
+                        </Tooltip>
+                        <Tooltip content={t("delete") as string}>
+                          <Button
+                            onClick={() => {
+                              setDeleteDialogOpen(true);
+                              setwWorkflowToDeleteId(workflow.id);
+                            }}
+                            color="secondary"
+                            size="icon"
+                            StartIcon={Icon.FiTrash2}
+                          />
+                        </Tooltip>
+                      </ButtonGroup>
+                    </div>
+                    <div className="block sm:hidden">
                       <Dropdown>
                         <DropdownMenuTrigger asChild>
                           <Button
@@ -114,27 +174,22 @@ export default function WorkflowListPage({ workflows }: Props) {
                         </DropdownMenuTrigger>
                         <DropdownMenuContent>
                           <DropdownMenuItem>
-                            <Link href={"/workflows/" + workflow.id} passHref={true}>
-                              <Button
-                                type="button"
-                                size="sm"
-                                color="minimal"
-                                className="w-full rounded-none"
-                                StartIcon={Icon.FiEdit2}>
-                                {t("edit")}
-                              </Button>
-                            </Link>
+                            <Button
+                              type="button"
+                              color="minimal"
+                              StartIcon={Icon.FiEdit2}
+                              onClick={async () => await router.replace("/workflows/" + workflow.id)}>
+                              {t("edit")}
+                            </Button>
                           </DropdownMenuItem>
                           <DropdownMenuItem>
                             <Button
                               onClick={() => {
                                 setDeleteDialogOpen(true);
-                                setDeleteDialogTypeId(workflow.id);
+                                setwWorkflowToDeleteId(workflow.id);
                               }}
-                              color="warn"
-                              size="sm"
-                              StartIcon={Icon.FiTrash}
-                              className="w-full rounded-none">
+                              color="minimal"
+                              StartIcon={Icon.FiTrash2}>
                               {t("delete")}
                             </Button>
                           </DropdownMenuItem>
@@ -146,24 +201,17 @@ export default function WorkflowListPage({ workflows }: Props) {
               </li>
             ))}
           </ul>
-
-          <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-            <ConfirmationDialogContent
-              isLoading={deleteMutation.isLoading}
-              variety="danger"
-              title={t("delete_workflow")}
-              confirmBtnText={t("confirm_delete_workflow")}
-              loadingText={t("confirm_delete_workflow")}
-              onConfirm={(e) => {
-                e.preventDefault();
-                deleteWorkflowHandler(deleteDialogTypeId);
-              }}>
-              {t("delete_workflow_description")}
-            </ConfirmationDialogContent>
-          </Dialog>
+          <DeleteDialog
+            isOpenDialog={deleteDialogOpen}
+            setIsOpenDialog={setDeleteDialogOpen}
+            workflowId={workflowToDeleteId}
+            additionalFunction={async () => {
+              await utils.viewer.workflows.list.invalidate();
+            }}
+          />
         </div>
       ) : (
-        <CreateFirstWorkflowView />
+        <CreateEmptyWorkflowView />
       )}
     </>
   );
diff --git a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx b/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
index b92a53ba53..86f0c6c7b0 100644
--- a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
+++ b/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
@@ -1,4 +1,3 @@
-import { ArrowDownIcon } from "@heroicons/react/outline";
 import {
   TimeUnit,
   WorkflowActions,
@@ -6,97 +5,104 @@ import {
   WorkflowTemplates,
   WorkflowTriggerEvents,
 } from "@prisma/client";
-import { isValidPhoneNumber } from "libphonenumber-js";
 import { Dispatch, SetStateAction, useRef, useState } from "react";
 import { Controller, UseFormReturn } from "react-hook-form";
-import PhoneInput from "react-phone-number-input";
 import "react-phone-number-input/style.css";
 
-import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HttpError } from "@calcom/lib/http-error";
 import { trpc } from "@calcom/trpc/react";
-import { Button } from "@calcom/ui";
-import ConfirmationDialogContent from "@calcom/ui/ConfirmationDialogContent";
-import { Dialog } from "@calcom/ui/Dialog";
-import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/Dropdown";
-import { Icon } from "@calcom/ui/Icon";
-import Select from "@calcom/ui/form/Select";
-import { TextArea } from "@calcom/ui/form/fields";
-import showToast from "@calcom/ui/v2/core/notifications";
+import {
+  Button,
+  Checkbox,
+  ConfirmationDialogContent,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  Dropdown,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  EmailField,
+  Icon,
+  Label,
+  PhoneInput,
+  Select,
+  showToast,
+  TextArea,
+  TextField,
+} from "@calcom/ui";
 
 import { AddVariablesDropdown } from "../components/AddVariablesDropdown";
 import {
   getWorkflowActionOptions,
   getWorkflowTemplateOptions,
-  getWorkflowTimeUnitOptions,
   getWorkflowTriggerOptions,
 } from "../lib/getOptions";
-import { getTranslatedText, translateVariablesToEnglish } from "../lib/variableTranslations";
+import { translateVariablesToEnglish } from "../lib/variableTranslations";
 import type { FormValues } from "../pages/workflow";
+import { TimeTimeUnitInput } from "./TimeTimeUnitInput";
 
 type WorkflowStepProps = {
   step?: WorkflowStep;
   form: UseFormReturn<FormValues>;
   reload?: boolean;
   setReload?: Dispatch<SetStateAction<boolean>>;
-  editCounter: number;
-  setEditCounter: Dispatch<SetStateAction<number>>;
+  isFreeUser: boolean;
 };
 
 export default function WorkflowStepContainer(props: WorkflowStepProps) {
   const { t, i18n } = useLocale();
-  const { step, form, reload, setReload, editCounter, setEditCounter } = props;
-  const [editNumberMode, setEditNumberMode] = useState(
-    step?.action === WorkflowActions.SMS_NUMBER && !step?.sendTo ? true : false
-  );
-  const [editEmailBodyMode, setEditEmailBodyMode] = useState(false);
-  const [sendTo, setSendTo] = useState(step?.sendTo || "");
-  const [errorMessageNumber, setErrorMessageNumber] = useState("");
-  const [errorMessageCustomInput, setErrorMessageCustomInput] = useState("");
-  const [isInfoParagraphOpen, setIsInfoParagraphOpen] = useState(false);
+  const { step, form, reload, setReload, isFreeUser } = props;
+  const [isAdditionalInputsDialogOpen, setIsAdditionalInputsDialogOpen] = useState(false);
   const [confirmationDialogOpen, setConfirmationDialogOpen] = useState(false);
-  const [isTestActionDisabled, setIsTestActionDisabled] = useState(false);
 
-  const [translatedReminderBody, setTranslatedReminderBody] = useState(
-    getTranslatedText((step ? form.getValues(`steps.${step.stepNumber - 1}.reminderBody`) : "") || "", {
-      locale: i18n.language,
-      t,
-    })
-  );
-
-  const [translatedSubject, setTranslatedSubject] = useState(
-    getTranslatedText((step ? form.getValues(`steps.${step.stepNumber - 1}.emailSubject`) : "") || "", {
-      locale: i18n.language,
-      t,
-    })
-  );
   const [isPhoneNumberNeeded, setIsPhoneNumberNeeded] = useState(
     step?.action === WorkflowActions.SMS_NUMBER ? true : false
   );
 
+  const [isSenderIdNeeded, setIsSenderIdNeeded] = useState(
+    step?.action === WorkflowActions.SMS_NUMBER || step?.action === WorkflowActions.SMS_ATTENDEE
+      ? true
+      : false
+  );
+
+  const [isEmailAddressNeeded, setIsEmailAddressNeeded] = useState(
+    step?.action === WorkflowActions.EMAIL_ADDRESS ? true : false
+  );
+
   const [isCustomReminderBodyNeeded, setIsCustomReminderBodyNeeded] = useState(
     step?.template === WorkflowTemplates.CUSTOM ? true : false
   );
 
   const [isEmailSubjectNeeded, setIsEmailSubjectNeeded] = useState(
-    step?.action === WorkflowActions.EMAIL_ATTENDEE || step?.action === WorkflowActions.EMAIL_HOST
+    step?.action === WorkflowActions.EMAIL_ATTENDEE ||
+      step?.action === WorkflowActions.EMAIL_HOST ||
+      step?.action === WorkflowActions.EMAIL_ADDRESS
       ? true
       : false
   );
 
   const [showTimeSection, setShowTimeSection] = useState(
-    form.getValues("trigger") === WorkflowTriggerEvents.BEFORE_EVENT ? true : false
+    form.getValues("trigger") === WorkflowTriggerEvents.BEFORE_EVENT ||
+      form.getValues("trigger") === WorkflowTriggerEvents.AFTER_EVENT
+  );
+
+  const [showTimeSectionAfter, setShowTimeSectionAfter] = useState(
+    form.getValues("trigger") === WorkflowTriggerEvents.AFTER_EVENT
   );
 
   const actionOptions = getWorkflowActionOptions(t);
   const triggerOptions = getWorkflowTriggerOptions(t);
-  const timeUnitOptions = getWorkflowTimeUnitOptions(t);
   const templateOptions = getWorkflowTemplateOptions(t);
 
-  const { ref: emailSubjectFormRef } = form.register(`steps.${step ? step.stepNumber - 1 : 0}.emailSubject`);
+  const { ref: emailSubjectFormRef, ...restEmailSubjectForm } = step
+    ? form.register(`steps.${step.stepNumber - 1}.emailSubject`)
+    : { ref: null, name: "" };
 
-  const { ref: reminderBodyFormRef } = form.register(`steps.${step ? step.stepNumber - 1 : 0}.reminderBody`);
+  const { ref: reminderBodyFormRef, ...restReminderBodyForm } = step
+    ? form.register(`steps.${step.stepNumber - 1}.reminderBody`)
+    : { ref: null, name: "" };
 
   const refEmailSubject = useRef<HTMLTextAreaElement | null>(null);
 
@@ -109,15 +115,15 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
         const cursorPosition = refEmailSubject?.current?.selectionStart || currentEmailSubject.length;
         const subjectWithAddedVariable = `${currentEmailSubject.substring(0, cursorPosition)}{${variable
           .toUpperCase()
-          .replace(" ", "_")}}${currentEmailSubject.substring(cursorPosition)}`;
-        setTranslatedSubject(subjectWithAddedVariable);
+          .replace(/ /g, "_")}}${currentEmailSubject.substring(cursorPosition)}`;
+        form.setValue(`steps.${step.stepNumber - 1}.emailSubject`, subjectWithAddedVariable);
       } else {
         const currentMessageBody = refReminderBody?.current?.value || "";
         const cursorPosition = refReminderBody?.current?.selectionStart || currentMessageBody.length;
         const messageWithAddedVariable = `${currentMessageBody.substring(0, cursorPosition)}{${variable
           .toUpperCase()
-          .replace(" ", "_")}}${currentMessageBody.substring(cursorPosition)}`;
-        setTranslatedReminderBody(messageWithAddedVariable);
+          .replace(/ /g, "_")}}${currentMessageBody.substring(cursorPosition)}`;
+        form.setValue(`steps.${step.stepNumber - 1}.reminderBody`, messageWithAddedVariable);
       }
     }
   };
@@ -137,20 +143,28 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
   //trigger
   if (!step) {
     const trigger = form.getValues("trigger");
-    const timeUnit = form.getValues("timeUnit");
+    const triggerString = t(`${trigger.toLowerCase()}_trigger`);
 
-    const selectedTrigger = { label: t(`${trigger.toLowerCase()}_trigger`), value: trigger };
-    const selectedTimeUnit = timeUnit
-      ? { label: t(`${timeUnit.toLowerCase()}_timeUnit`), value: timeUnit }
-      : undefined;
+    const selectedTrigger = {
+      label: triggerString.charAt(0).toUpperCase() + triggerString.slice(1),
+      value: trigger,
+    };
 
     return (
       <>
         <div className="flex justify-center">
-          <div className=" min-w-80 w-[50rem] rounded border border-gray-200 bg-white pl-10 pr-12 pb-9 pt-5">
-            <div className="text-base font-bold">{t("trigger")}</div>
-            <div className="text-sm text-gray-600">{t("when_something_happens")}</div>
+          <div className="min-w-80 w-full rounded-md border border-gray-200 bg-white p-7">
+            <div className="flex">
+              <div className="mt-[3px] mr-5 flex h-5 w-5 items-center justify-center rounded-full bg-gray-100 p-1 text-xs font-medium">
+                1
+              </div>
+              <div>
+                <div className="text-base font-bold">{t("trigger")}</div>
+                <div className="text-sm text-gray-600">{t("when_something_happens")}</div>
+              </div>
+            </div>
             <div className="my-7 border-t border-gray-200" />
+            <Label>{t("when")}</Label>
             <Controller
               name="trigger"
               control={form.control}
@@ -158,16 +172,25 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                 return (
                   <Select
                     isSearchable={false}
-                    className="mt-3 block w-full min-w-0 flex-1 rounded-sm text-sm"
+                    className="text-sm"
                     onChange={(val) => {
                       if (val) {
                         form.setValue("trigger", val.value);
-                        if (val.value === WorkflowTriggerEvents.BEFORE_EVENT) {
+                        if (
+                          val.value === WorkflowTriggerEvents.BEFORE_EVENT ||
+                          val.value === WorkflowTriggerEvents.AFTER_EVENT
+                        ) {
                           setShowTimeSection(true);
+                          if (val.value === WorkflowTriggerEvents.AFTER_EVENT) {
+                            setShowTimeSectionAfter(true);
+                          } else {
+                            setShowTimeSectionAfter(false);
+                          }
                           form.setValue("time", 24);
                           form.setValue("timeUnit", TimeUnit.HOUR);
                         } else {
                           setShowTimeSection(false);
+                          setShowTimeSectionAfter(false);
                           form.unregister("time");
                           form.unregister("timeUnit");
                         }
@@ -180,40 +203,9 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
               }}
             />
             {showTimeSection && (
-              <div className="mt-5 space-y-1">
-                <label htmlFor="label" className="mb-2 block text-sm font-medium text-gray-700">
-                  {t("how_long_before")}
-                </label>
-                <div className="flex">
-                  <input
-                    type="number"
-                    min="1"
-                    defaultValue={form.getValues("time") || 24}
-                    className="mr-5 block w-20 rounded-sm border-gray-300 px-3 py-2 text-sm marker:border focus:border-neutral-800 focus:outline-none focus:ring-1 focus:ring-neutral-800"
-                    {...form.register("time", { valueAsNumber: true })}
-                  />
-                  <div className="w-28">
-                    <Controller
-                      name="timeUnit"
-                      control={form.control}
-                      render={() => {
-                        return (
-                          <Select
-                            isSearchable={false}
-                            className="block min-w-0 flex-1 rounded-sm text-sm"
-                            onChange={(val) => {
-                              if (val) {
-                                form.setValue("timeUnit", val.value);
-                              }
-                            }}
-                            defaultValue={selectedTimeUnit || timeUnitOptions[1]}
-                            options={timeUnitOptions}
-                          />
-                        );
-                      }}
-                    />
-                  </div>
-                </div>
+              <div className="mt-5">
+                <Label>{showTimeSectionAfter ? t("how_long_after") : t("how_long_before")}</Label>
+                <TimeTimeUnitInput form={form} />
               </div>
             )}
           </div>
@@ -223,21 +215,73 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
   }
 
   if (step && step.action) {
-    const selectedAction = { label: t(`${step.action.toLowerCase()}_action`), value: step.action };
+    const actionString = t(`${step.action.toLowerCase()}_action`);
+
+    const selectedAction = {
+      label: actionString.charAt(0).toUpperCase() + actionString.slice(1),
+      value: step.action,
+    };
+
     const selectedTemplate = { label: t(`${step.template.toLowerCase()}`), value: step.template };
 
     return (
       <>
-        <div className="flex justify-center ">
-          <ArrowDownIcon className="my-4 h-7 stroke-1 text-gray-500" />
+        <div className="my-3 flex justify-center">
+          <Icon.FiArrowDown className="stroke-[1.5px] text-3xl text-gray-500" />
         </div>
         <div className="flex justify-center">
-          <div className=" min-w-80 flex w-[50rem] rounded border border-gray-200 bg-white px-6 pb-9 pt-5 pr-3 sm:px-10">
-            <div className="w-full pt-5">
-              <div className="text-base font-bold">{t("action")}</div>
-              <div className="text-sm text-gray-600">{t("action_is_performed")}</div>
+          <div className="min-w-80 flex w-full rounded-md border border-gray-200 bg-white p-7">
+            <div className="w-full">
+              <div className="flex">
+                <div className="w-full">
+                  <div className="flex">
+                    <div className="mt-[3px] mr-5 flex h-5 w-5 items-center justify-center rounded-full bg-gray-100 p-1 text-xs">
+                      {step.stepNumber + 1}
+                    </div>
+                    <div>
+                      <div className="text-base font-bold">{t("action")}</div>
+                      <div className="text-sm text-gray-600">{t("action_is_performed")}</div>
+                    </div>
+                  </div>
+                </div>
+                <div>
+                  <Dropdown>
+                    <DropdownMenuTrigger asChild>
+                      <Button type="button" color="minimal" size="icon" StartIcon={Icon.FiMoreHorizontal} />
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent>
+                      <DropdownMenuItem>
+                        <Button
+                          onClick={() => {
+                            const steps = form.getValues("steps");
+                            const updatedSteps = steps
+                              ?.filter((currStep) => currStep.id !== step.id)
+                              .map((s) => {
+                                const updatedStep = s;
+                                if (step.stepNumber < updatedStep.stepNumber) {
+                                  updatedStep.stepNumber = updatedStep.stepNumber - 1;
+                                }
+                                return updatedStep;
+                              });
+                            form.setValue("steps", updatedSteps);
+                            if (setReload) {
+                              setReload(!reload);
+                            }
+                          }}
+                          color="secondary"
+                          size="base"
+                          StartIcon={Icon.FiTrash2}
+                          className="w-full rounded-none">
+                          {t("delete")}
+                        </Button>
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </Dropdown>
+                </div>
+              </div>
               <div className="my-7 border-t border-gray-200" />
               <div>
+                <Label>{t("do_this")}</Label>
                 <Controller
                   name={`steps.${step.stepNumber - 1}.action`}
                   control={form.control}
@@ -245,127 +289,125 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                     return (
                       <Select
                         isSearchable={false}
-                        className="mt-3 block w-full min-w-0 flex-1 rounded-sm text-sm"
+                        className="text-sm"
                         onChange={(val) => {
                           if (val) {
-                            let counter = 0;
                             if (val.value === WorkflowActions.SMS_NUMBER) {
                               setIsPhoneNumberNeeded(true);
-                              setEditNumberMode(true);
-                              counter = counter + 1;
-                              setIsTestActionDisabled(true);
-                            } else {
+                              setIsSenderIdNeeded(true);
+                              setIsEmailAddressNeeded(false);
+                            } else if (val.value === WorkflowActions.EMAIL_ADDRESS) {
+                              setIsEmailAddressNeeded(true);
                               setIsPhoneNumberNeeded(false);
-                              setEditNumberMode(false);
-                            }
-                            if (
-                              form.getValues(`steps.${step.stepNumber - 1}.template`) ===
-                              WorkflowTemplates.CUSTOM
-                            ) {
-                              setEditEmailBodyMode(true);
-                              counter = counter + 1;
-                              setIsTestActionDisabled(true);
+                              setIsSenderIdNeeded(false);
+                            } else if (val.value === WorkflowActions.SMS_ATTENDEE) {
+                              setIsSenderIdNeeded(true);
+                              setIsEmailAddressNeeded(false);
+                              setIsPhoneNumberNeeded(false);
+                            } else {
+                              setIsEmailAddressNeeded(false);
+                              setIsPhoneNumberNeeded(false);
+                              setIsSenderIdNeeded(false);
                             }
+                            form.unregister(`steps.${step.stepNumber - 1}.sendTo`);
+                            form.clearErrors(`steps.${step.stepNumber - 1}.sendTo`);
                             if (
                               val.value === WorkflowActions.EMAIL_ATTENDEE ||
-                              val.value === WorkflowActions.EMAIL_HOST
+                              val.value === WorkflowActions.EMAIL_HOST ||
+                              val.value === WorkflowActions.EMAIL_ADDRESS
                             ) {
                               setIsEmailSubjectNeeded(true);
                             } else {
                               setIsEmailSubjectNeeded(false);
                             }
-                            setEditCounter(counter);
                             form.setValue(`steps.${step.stepNumber - 1}.action`, val.value);
-                            setErrorMessageNumber("");
-                            setErrorMessageCustomInput("");
                           }
                         }}
                         defaultValue={selectedAction}
-                        options={actionOptions}
+                        options={
+                          isFreeUser
+                            ? actionOptions.filter(
+                                (actionOption) =>
+                                  actionOption.value !== WorkflowActions.SMS_ATTENDEE &&
+                                  actionOption.value !== WorkflowActions.SMS_NUMBER
+                              )
+                            : actionOptions
+                        }
                       />
                     );
                   }}
                 />
-                {form.getValues(`steps.${step.stepNumber - 1}.action`) === WorkflowActions.SMS_ATTENDEE && (
-                  <p className="mt-2 ml-1 text-sm text-gray-500">{t("not_triggering_existing_bookings")}</p>
-                )}
               </div>
-              {isPhoneNumberNeeded && (
-                <>
-                  <label
-                    htmlFor="sendTo"
-                    className="mt-5 block text-sm font-medium text-gray-700 dark:text-white">
-                    {t("phone_number")}
-                  </label>
-                  <div className="flex space-y-1">
-                    <div className="mt-1 ">
-                      <PhoneInput
-                        international
-                        value={sendTo}
-                        onChange={(newValue) => {
-                          if (newValue) {
-                            setSendTo(newValue);
-                          } else {
-                            setSendTo("");
-                          }
-                          setErrorMessageNumber("");
-                        }}
-                        placeholder={t("enter_phone_number")}
-                        id="sendTo"
-                        disabled={!editNumberMode}
+              {(isPhoneNumberNeeded || isSenderIdNeeded) && (
+                <div className="mt-2 rounded-md bg-gray-50 p-4 pt-0">
+                  {isPhoneNumberNeeded && (
+                    <>
+                      <Label className="pt-4">{t("custom_phone_number")}</Label>
+                      <PhoneInput<FormValues>
+                        control={form.control}
+                        name={`steps.${step.stepNumber - 1}.sendTo`}
+                        placeholder={t("phone_number")}
+                        id={`steps.${step.stepNumber - 1}.sendTo`}
+                        className="w-full rounded-md"
                         required
-                        countrySelectProps={{ className: "text-black" }}
-                        numberInputProps={{ className: "border-0 text-sm focus:ring-0 dark:bg-gray-700" }}
-                        className={classNames(
-                          "focus-within:border-brand order-1 block w-full rounded-sm border border-gray-300 py-px pl-3 ring-black focus-within:ring-1 disabled:text-gray-500 disabled:opacity-50 dark:border-gray-900 dark:bg-gray-700 dark:text-white dark:selection:bg-green-500 disabled:dark:text-gray-500",
-                          !editNumberMode ? "text-gray-500 dark:text-gray-500" : ""
-                        )}
                       />
-                    </div>
-                    {!editNumberMode ? (
-                      <Button
-                        type="button"
-                        color="secondary"
-                        className="-ml-3"
-                        onClick={() => {
-                          setEditNumberMode(true);
-                          setEditCounter(editCounter + 1);
-                          setIsTestActionDisabled(true);
-                        }}>
-                        {t("edit")}
-                      </Button>
-                    ) : (
-                      <Button
-                        type="button"
-                        color="primary"
-                        className="-ml-3"
-                        onClick={async () => {
-                          if (sendTo) {
-                            if (isValidPhoneNumber(sendTo)) {
-                              form.setValue(`steps.${step.stepNumber - 1}.sendTo`, sendTo);
-                              setEditNumberMode(false);
-                              setEditCounter(editCounter - 1);
-                              if (!editEmailBodyMode) {
-                                setIsTestActionDisabled(false);
-                              }
-                            } else {
-                              setErrorMessageNumber(t("invalid_input"));
-                            }
-                          } else {
-                            setErrorMessageNumber(t("no_input"));
-                          }
-                        }}>
-                        {t("save")}
-                      </Button>
+                      {form.formState.errors.steps &&
+                        form.formState?.errors?.steps[step.stepNumber - 1]?.sendTo && (
+                          <p className="mt-1 text-xs text-red-500">
+                            {form.formState?.errors?.steps[step.stepNumber - 1]?.sendTo?.message || ""}
+                          </p>
+                        )}
+                    </>
+                  )}
+                  {isSenderIdNeeded && (
+                    <>
+                      <div className="pt-4">
+                        <TextField
+                          label={t("sender_id")}
+                          type="text"
+                          placeholder="Cal"
+                          maxLength={11}
+                          {...form.register(`steps.${step.stepNumber - 1}.sender`)}
+                        />
+                      </div>
+                      {form.formState.errors.steps &&
+                        form.formState?.errors?.steps[step.stepNumber - 1]?.sender && (
+                          <p className="mt-1 text-xs text-red-500">{t("sender_id_error_message")}</p>
+                        )}
+                    </>
+                  )}
+                </div>
+              )}
+              {form.getValues(`steps.${step.stepNumber - 1}.action`) === WorkflowActions.SMS_ATTENDEE && (
+                <div className="mt-2">
+                  <Controller
+                    name={`steps.${step.stepNumber - 1}.numberRequired`}
+                    control={form.control}
+                    render={() => (
+                      <Checkbox
+                        defaultChecked={
+                          form.getValues(`steps.${step.stepNumber - 1}.numberRequired`) || false
+                        }
+                        description={t("make_phone_number_required")}
+                        onChange={(e) =>
+                          form.setValue(`steps.${step.stepNumber - 1}.numberRequired`, e.target.checked)
+                        }
+                      />
                     )}
-                  </div>
-                  {errorMessageNumber && <p className="mt-1 text-sm text-red-500">{errorMessageNumber}</p>}
-                </>
+                  />
+                </div>
+              )}
+              {isEmailAddressNeeded && (
+                <div className="mt-5 rounded-md bg-gray-50 p-4">
+                  <EmailField
+                    required
+                    label={t("email_address")}
+                    {...form.register(`steps.${step.stepNumber - 1}.sendTo`)}
+                  />
+                </div>
               )}
               <div className="mt-5">
-                <label htmlFor="label" className="mt-5 block text-sm font-medium text-gray-700">
-                  {t("choose_template")}
-                </label>
+                <Label>{t("message_template")}</Label>
                 <Controller
                   name={`steps.${step.stepNumber - 1}.template`}
                   control={form.control}
@@ -373,21 +415,12 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                     return (
                       <Select
                         isSearchable={false}
-                        className="mt-3 block w-full min-w-0 flex-1 rounded-sm text-sm"
+                        className="text-sm"
                         onChange={(val) => {
                           if (val) {
                             form.setValue(`steps.${step.stepNumber - 1}.template`, val.value);
                             const isCustomTemplate = val.value === WorkflowTemplates.CUSTOM;
                             setIsCustomReminderBodyNeeded(isCustomTemplate);
-                            if (isCustomTemplate) {
-                              setEditEmailBodyMode(true);
-                              setEditCounter(editCounter + 1);
-                            } else if (editEmailBodyMode) {
-                              setEditEmailBodyMode(false);
-                              setEditCounter(editCounter - 1);
-                            }
-
-                            setErrorMessageCustomInput("");
                           }
                         }}
                         defaultValue={selectedTemplate}
@@ -398,176 +431,127 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                 />
               </div>
               {isCustomReminderBodyNeeded && (
-                <>
+                <div className="mt-2 rounded-md bg-gray-50 p-4 pt-2 md:p-6 md:pt-4">
                   {isEmailSubjectNeeded && (
-                    <div className="mt-5 mb-2 ">
-                      <label className="mt-3 mb-1 block text-sm font-medium text-gray-700">
-                        {t("subject")}
-                      </label>
-                      <div className="mtext-sm border-1 focus-within:border-1 rounded-sm border border-gray-300 bg-white focus-within:border-black">
-                        <AddVariablesDropdown
-                          disabled={!editEmailBodyMode}
-                          addVariable={addVariable}
-                          isEmailSubject={true}
-                        />
-                        <TextArea
-                          name="emailSubject"
-                          disabled={!editEmailBodyMode}
-                          ref={(e) => {
-                            emailSubjectFormRef(e);
-                            refEmailSubject.current = e;
-                          }}
-                          value={translatedSubject}
-                          onChange={(e) => {
-                            setTranslatedSubject(e.target.value);
-                          }}
-                          rows={1}
-                          className={classNames(
-                            "block w-full rounded-sm border-0 p-2 text-sm  focus:border-0 focus:ring-0 dark:border-black dark:bg-black dark:text-white",
-                            !editEmailBodyMode ? "text-gray-500 dark:text-gray-500" : ""
-                          )}
-                        />
+                    <div className="mb-5">
+                      <div className="mb-2 flex items-center">
+                        <Label className="mb-0 flex-none">{t("subject")}</Label>
+                        <div className="flex-grow text-right">
+                          <AddVariablesDropdown addVariable={addVariable} isEmailSubject={true} />
+                        </div>
                       </div>
+                      <TextArea
+                        ref={(e) => {
+                          emailSubjectFormRef?.(e);
+                          refEmailSubject.current = e;
+                        }}
+                        className="my-0"
+                        required
+                        {...restEmailSubjectForm}
+                      />
+                      {form.formState.errors.steps &&
+                        form.formState?.errors?.steps[step.stepNumber - 1]?.emailSubject && (
+                          <p className="mt-1 text-xs text-red-500">
+                            {form.formState?.errors?.steps[step.stepNumber - 1]?.emailSubject?.message || ""}
+                          </p>
+                        )}
                     </div>
                   )}
-                  <label className="mt-3 mb-1 block text-sm font-medium text-gray-700 dark:text-white">
-                    {isEmailSubjectNeeded ? t("email_body") : t("text_message")}
-                  </label>
-                  <div className="border-1 focus-within:border-1 mb-2 rounded-sm border border-gray-300 bg-white text-sm focus-within:border-black">
-                    <AddVariablesDropdown
-                      disabled={!editEmailBodyMode}
-                      addVariable={addVariable}
-                      isEmailSubject={false}
-                    />
-                    <TextArea
-                      name="reminderBody"
-                      disabled={!editEmailBodyMode}
-                      ref={(e) => {
-                        reminderBodyFormRef(e);
-                        refReminderBody.current = e;
-                      }}
-                      value={translatedReminderBody}
-                      onChange={(e) => {
-                        setTranslatedReminderBody(e.target.value);
-                      }}
-                      rows={5}
-                      className={classNames(
-                        "block w-full rounded-sm border-0 p-2 text-sm  focus:border-0 focus:ring-0 dark:border-black dark:bg-black dark:text-white",
-                        !editEmailBodyMode ? "text-gray-500 dark:text-gray-500" : ""
-                      )}
-                    />
+                  <div className="mb-2 flex items-center">
+                    <Label className="mb-0 flex-none">
+                      {isEmailSubjectNeeded ? t("email_body") : t("text_message")}
+                    </Label>
+                    <div className="flex-grow text-right">
+                      <AddVariablesDropdown addVariable={addVariable} isEmailSubject={false} />
+                    </div>
                   </div>
-                  <div className="mt-3 mb-5 ">
-                    <button
-                      className="flex"
-                      type="button"
-                      onClick={() => setIsInfoParagraphOpen(!isInfoParagraphOpen)}>
-                      {isInfoParagraphOpen ? (
-                        <Icon.FiChevronDown className="w5 h-5 text-gray-700" />
-                      ) : (
-                        <Icon.FiChevronRight className="w5 h-5 text-gray-700" />
-                      )}
-                      <span className="text-sm">{t("using_additional_inputs_as_variables")}</span>
-                    </button>
-                    {isInfoParagraphOpen && (
-                      <div className="mt-4 ml-6 w-full pr-6 text-sm">
-                        <div className="lg:flex">
-                          <div className="lg:w-1/2">
-                            <p className="font-medium">{t("example_1")}:</p>
-                            <p>{`${t("additonal_input_label")}: ${t("company_size")}`}</p>
-                            <p>{`${t("variable")}: {${t("company_size")
-                              .replace(/[^a-zA-Z0-9 ]/g, "")
-                              .trim()
-                              .replace(/ /g, "_")
-                              .toUpperCase()}}`}</p>
-                          </div>
-                          <div className="mt-3 lg:mt-0 lg:w-1/2">
-                            <p className="font-medium">{t("example_2")}:</p>
-                            <p>{`${t("additonal_input_label")}: ${t("what_help_needed")}`}</p>
-                            <p>{`${t("variable")}: {${t("what_help_needed")
-                              .replace(/[^a-zA-Z0-9 ]/g, "")
-                              .trim()
-                              .replace(/ /g, "_")
-                              .toUpperCase()}}`}</p>
-                          </div>
-                        </div>
-                        <p className="mt-4 font-medium">{t("variable_format")}:</p>
-                        <p>{t("custom_input_as_variable_info")}</p>
-                      </div>
+                  <TextArea
+                    ref={(e) => {
+                      reminderBodyFormRef?.(e);
+                      refReminderBody.current = e;
+                    }}
+                    className="my-0 h-24"
+                    required
+                    {...restReminderBodyForm}
+                  />
+                  {form.formState.errors.steps &&
+                    form.formState?.errors?.steps[step.stepNumber - 1]?.reminderBody && (
+                      <p className="mt-1 text-xs text-red-500">
+                        {form.formState?.errors?.steps[step.stepNumber - 1]?.reminderBody?.message || ""}
+                      </p>
                     )}
+                  <div className="mt-3 ">
+                    <button type="button" onClick={() => setIsAdditionalInputsDialogOpen(true)}>
+                      <div className="mt-2 flex text-sm text-gray-600">
+                        <Icon.FiHelpCircle className="mt-[3px] mr-2 h-3 w-3" />
+                        <p className="text-left">{t("using_additional_inputs_as_variables")}</p>
+                      </div>
+                    </button>
                   </div>
-
-                  {errorMessageCustomInput && (
-                    <p className="mb-3 text-sm text-red-500">{errorMessageCustomInput}</p>
-                  )}
-
-                  {!editEmailBodyMode ? (
-                    <Button
-                      type="button"
-                      color="secondary"
-                      onClick={() => {
-                        setEditEmailBodyMode(true);
-                        setEditCounter(editCounter + 1);
-                        setIsTestActionDisabled(true);
-                      }}>
-                      {t("edit")}
-                    </Button>
-                  ) : (
-                    <Button
-                      type="button"
-                      color="primary"
-                      onClick={async () => {
-                        let isEmpty = false;
-                        let errorMessage = "";
-
-                        if (isEmailSubjectNeeded) {
-                          if (!translatedReminderBody || !translatedSubject) {
-                            isEmpty = true;
-                            errorMessage = "Email body or subject is empty";
-                          }
-                        } else if (!translatedReminderBody) {
-                          isEmpty = true;
-                          errorMessage = "Text message is empty";
-                        }
-                        form.setValue(
-                          `steps.${step.stepNumber - 1}.reminderBody`,
-                          translateVariablesToEnglish(translatedReminderBody, { locale: i18n.language, t })
-                        );
-                        form.setValue(
-                          `steps.${step.stepNumber - 1}.emailSubject`,
-                          translateVariablesToEnglish(translatedSubject, { locale: i18n.language, t })
-                        );
-                        if (!isEmpty) {
-                          setEditEmailBodyMode(false);
-                          setEditCounter(editCounter - 1);
-                          if (!editNumberMode) {
-                            setIsTestActionDisabled(false);
-                          }
-                        }
-                        setErrorMessageCustomInput(errorMessage);
-                      }}>
-                      {t("save")}
-                    </Button>
-                  )}
-                </>
+                </div>
               )}
               {form.getValues(`steps.${step.stepNumber - 1}.action`) !== WorkflowActions.SMS_ATTENDEE && (
                 <Button
                   type="button"
                   className="mt-7 w-full"
-                  disabled={isTestActionDisabled}
                   onClick={() => {
+                    let isEmpty = false;
+                    if (!form.getValues(`steps.${step.stepNumber - 1}.sendTo`) && isPhoneNumberNeeded) {
+                      form.setError(`steps.${step.stepNumber - 1}.sendTo`, {
+                        type: "custom",
+                        message: t("no_input"),
+                      });
+                      isEmpty = true;
+                    }
                     if (
-                      form.getValues(`steps.${step.stepNumber - 1}.action`) !== WorkflowActions.SMS_NUMBER
+                      form.getValues(`steps.${step.stepNumber - 1}.template`) === WorkflowTemplates.CUSTOM
                     ) {
+                      if (!form.getValues(`steps.${step.stepNumber - 1}.reminderBody`)) {
+                        form.setError(`steps.${step.stepNumber - 1}.reminderBody`, {
+                          type: "custom",
+                          message: t("no_input"),
+                        });
+                        isEmpty = true;
+                      } else if (
+                        isEmailSubjectNeeded &&
+                        !form.getValues(`steps.${step.stepNumber - 1}.emailSubject`)
+                      ) {
+                        form.setError(`steps.${step.stepNumber - 1}.emailSubject`, {
+                          type: "custom",
+                          message: t("no_input"),
+                        });
+                        isEmpty = true;
+                      }
+                    }
+
+                    if (!isPhoneNumberNeeded && !isEmpty) {
+                      //translate body and reminder to english
+                      const emailSubject = translateVariablesToEnglish(
+                        form.getValues(`steps.${step.stepNumber - 1}.emailSubject`) || "",
+                        { locale: i18n.language, t }
+                      );
+                      const reminderBody = translateVariablesToEnglish(
+                        form.getValues(`steps.${step.stepNumber - 1}.reminderBody`) || "",
+                        { locale: i18n.language, t }
+                      );
+
                       testActionMutation.mutate({
                         action: step.action,
-                        emailSubject: step.emailSubject || "",
-                        reminderBody: step.reminderBody || "",
+                        emailSubject,
+                        reminderBody,
                         template: step.template,
+                        sender: step.sender || "Cal",
                       });
                     } else {
-                      setConfirmationDialogOpen(true);
+                      const isNumberValid =
+                        form.formState.errors.steps &&
+                        form.formState?.errors?.steps[step.stepNumber - 1]?.sendTo
+                          ? false
+                          : true;
+
+                      if (isPhoneNumberNeeded && isNumberValid && !isEmpty) {
+                        setConfirmationDialogOpen(true);
+                      }
                     }
                   }}
                   color="secondary">
@@ -575,40 +559,6 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                 </Button>
               )}
             </div>
-            <div>
-              <Dropdown>
-                <DropdownMenuTrigger asChild>
-                  <Button type="button" color="minimal" size="icon" StartIcon={Icon.FiMoreHorizontal} />
-                </DropdownMenuTrigger>
-                <DropdownMenuContent>
-                  <DropdownMenuItem>
-                    <Button
-                      onClick={() => {
-                        const steps = form.getValues("steps");
-                        const updatedSteps = steps
-                          ?.filter((currStep) => currStep.id !== step.id)
-                          .map((s) => {
-                            const updatedStep = s;
-                            if (step.stepNumber < updatedStep.stepNumber) {
-                              updatedStep.stepNumber = updatedStep.stepNumber - 1;
-                            }
-                            return updatedStep;
-                          });
-                        form.setValue("steps", updatedSteps);
-                        if (setReload) {
-                          setReload(!reload);
-                        }
-                      }}
-                      color="warn"
-                      size="sm"
-                      StartIcon={Icon.FiTrash}
-                      className="w-full rounded-none">
-                      {t("delete")}
-                    </Button>
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </Dropdown>
-            </div>
           </div>
         </div>
         <Dialog open={confirmationDialogOpen} onOpenChange={setConfirmationDialogOpen}>
@@ -618,18 +568,78 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
             confirmBtnText={t("send_sms")}
             onConfirm={(e) => {
               e.preventDefault();
+              const reminderBody = translateVariablesToEnglish(
+                form.getValues(`steps.${step.stepNumber - 1}.reminderBody`) || "",
+                { locale: i18n.language, t }
+              );
+
               testActionMutation.mutate({
                 action: step.action,
-                emailSubject: step.emailSubject || "",
-                reminderBody: step.reminderBody || "",
+                emailSubject: "",
+                reminderBody: reminderBody || "",
                 template: step.template,
                 sendTo: step.sendTo || "",
               });
               setConfirmationDialogOpen(false);
             }}>
-            {t("send_sms_to_number", { number: sendTo })}
+            {t("send_sms_to_number", { number: form.getValues(`steps.${step.stepNumber - 1}.sendTo`) })}
           </ConfirmationDialogContent>
         </Dialog>
+        <Dialog open={isAdditionalInputsDialogOpen} onOpenChange={setIsAdditionalInputsDialogOpen}>
+          <DialogContent useOwnActionButtons type="creation" className="sm:max-w-[610px] md:h-[570px]">
+            <div className="-m-3 h-[430px] overflow-x-hidden overflow-y-scroll sm:m-0">
+              <h1 className="w-full text-xl font-semibold ">{t("how_additional_inputs_as_variables")}</h1>
+              <div className="mb-7 mt-7 rounded-md bg-gray-50 p-3 sm:p-4">
+                <p className="test-sm font-medium">{t("format")}</p>
+                <ul className="mt-2 ml-5 list-disc text-gray-900">
+                  <li>{t("uppercase_for_letters")}</li>
+                  <li>{t("replace_whitespaces_underscores")}</li>
+                  <li>{t("ignore_special_characters")}</li>
+                </ul>
+                <div className="mt-6">
+                  <p className="test-sm w-full font-medium">{t("example_1")}</p>
+                  <div className="mt-2 grid grid-cols-12">
+                    <div className="test-sm col-span-5 mr-2 text-gray-600">{t("additional_input_label")}</div>
+                    <div className="test-sm col-span-7 text-gray-900">{t("company_size")}</div>
+                    <div className="test-sm col-span-5 w-full text-gray-600">{t("variable")}</div>
+
+                    <div className="test-sm col-span-7 break-words text-gray-900">
+                      {" "}
+                      {`{${t("company_size")
+                        .replace(/[^a-zA-Z0-9 ]/g, "")
+                        .trim()
+                        .replace(/ /g, "_")
+                        .toUpperCase()}}`}
+                    </div>
+                  </div>
+                </div>
+                <div className="mt-6">
+                  <p className="test-sm w-full font-medium">{t("example_2")}</p>
+                  <div className="mt-2 grid grid-cols-12">
+                    <div className="test-sm col-span-5 mr-2 text-gray-600">{t("additional_input_label")}</div>
+                    <div className="test-sm col-span-7 text-gray-900">{t("what_help_needed")}</div>
+                    <div className="test-sm col-span-5 text-gray-600">{t("variable")}</div>
+                    <div className="test-sm col-span-7 break-words text-gray-900">
+                      {" "}
+                      {`{${t("what_help_needed")
+                        .replace(/[^a-zA-Z0-9 ]/g, "")
+                        .trim()
+                        .replace(/ /g, "_")
+                        .toUpperCase()}}`}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="flex flex-row-reverse">
+              <DialogClose asChild>
+                <Button color="primary" type="button">
+                  {t("close")}
+                </Button>
+              </DialogClose>
+            </div>
+          </DialogContent>
+        </Dialog>
       </>
     );
   }
diff --git a/packages/features/ee/workflows/components/v2/AddActionDialog.tsx b/packages/features/ee/workflows/components/v2/AddActionDialog.tsx
deleted file mode 100644
index c4db677a95..0000000000
--- a/packages/features/ee/workflows/components/v2/AddActionDialog.tsx
+++ /dev/null
@@ -1,211 +0,0 @@
-import { zodResolver } from "@hookform/resolvers/zod";
-import { WorkflowActions } from "@prisma/client";
-import { isValidPhoneNumber } from "libphonenumber-js";
-import { Dispatch, SetStateAction, useState } from "react";
-import { Controller, useForm } from "react-hook-form";
-import { z } from "zod";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, Checkbox, EmailField, Form, Label, TextField } from "@calcom/ui/components";
-import PhoneInput from "@calcom/ui/form/PhoneInputLazy";
-import { Dialog, DialogClose, DialogContent, DialogFooter, Select } from "@calcom/ui/v2";
-
-import { WORKFLOW_ACTIONS } from "../../lib/constants";
-import { getWorkflowActionOptions } from "../../lib/getOptions";
-import { onlyLettersNumbersSpaces } from "../../pages/v2/workflow";
-
-interface IAddActionDialog {
-  isOpenDialog: boolean;
-  setIsOpenDialog: Dispatch<SetStateAction<boolean>>;
-  addAction: (action: WorkflowActions, sendTo?: string, numberRequired?: boolean, sender?: string) => void;
-  isFreeUser: boolean;
-}
-
-interface ISelectActionOption {
-  label: string;
-  value: WorkflowActions;
-}
-
-type AddActionFormValues = {
-  action: WorkflowActions;
-  sendTo?: string;
-  numberRequired?: boolean;
-  sender?: string;
-};
-
-const cleanUpActionsForFreeUser = (actions: ISelectActionOption[]) => {
-  return actions.filter(
-    (item) => item.value !== WorkflowActions.SMS_ATTENDEE && item.value !== WorkflowActions.SMS_NUMBER
-  );
-};
-
-export const AddActionDialog = (props: IAddActionDialog) => {
-  const { t } = useLocale();
-  const { isOpenDialog, setIsOpenDialog, addAction, isFreeUser } = props;
-  const [isPhoneNumberNeeded, setIsPhoneNumberNeeded] = useState(false);
-  const [isSenderIdNeeded, setIsSenderIdNeeded] = useState(false);
-  const [isEmailAddressNeeded, setIsEmailAddressNeeded] = useState(false);
-  const workflowActions = getWorkflowActionOptions(t);
-  const actionOptions = isFreeUser ? cleanUpActionsForFreeUser(workflowActions) : workflowActions;
-
-  const formSchema = z.object({
-    action: z.enum(WORKFLOW_ACTIONS),
-    sendTo: z
-      .string()
-      .refine((val) => isValidPhoneNumber(val) || val.includes("@"))
-      .optional(),
-    numberRequired: z.boolean().optional(),
-    sender: z
-      .string()
-      .refine((val) => onlyLettersNumbersSpaces(val))
-      .nullable(),
-  });
-
-  const form = useForm<AddActionFormValues>({
-    mode: "onSubmit",
-    defaultValues: {
-      action: WorkflowActions.EMAIL_HOST,
-      sender: "Cal",
-    },
-    resolver: zodResolver(formSchema),
-  });
-
-  const handleSelectAction = (newValue: ISelectActionOption | null) => {
-    if (newValue) {
-      form.setValue("action", newValue.value);
-      if (newValue.value === WorkflowActions.SMS_NUMBER) {
-        setIsPhoneNumberNeeded(true);
-        setIsSenderIdNeeded(true);
-        setIsEmailAddressNeeded(false);
-      } else if (newValue.value === WorkflowActions.EMAIL_ADDRESS) {
-        setIsEmailAddressNeeded(true);
-        setIsSenderIdNeeded(false);
-        setIsPhoneNumberNeeded(false);
-      } else if (newValue.value === WorkflowActions.SMS_ATTENDEE) {
-        setIsSenderIdNeeded(true);
-        setIsEmailAddressNeeded(false);
-        setIsPhoneNumberNeeded(false);
-      } else {
-        setIsSenderIdNeeded(false);
-        setIsEmailAddressNeeded(false);
-        setIsPhoneNumberNeeded(false);
-      }
-      form.unregister("sendTo");
-      form.unregister("numberRequired");
-      form.clearErrors("action");
-      form.clearErrors("sendTo");
-    }
-  };
-
-  return (
-    <Dialog open={isOpenDialog} onOpenChange={setIsOpenDialog}>
-      <DialogContent type="creation" useOwnActionButtons={true} title={t("add_action")}>
-        <div className="space-x-3 ">
-          <div className="pt-1">
-            <Form
-              form={form}
-              handleSubmit={(values) => {
-                addAction(values.action, values.sendTo, values.numberRequired, values.sender);
-                form.unregister("sendTo");
-                form.unregister("action");
-                form.unregister("numberRequired");
-                setIsOpenDialog(false);
-                setIsPhoneNumberNeeded(false);
-                setIsEmailAddressNeeded(false);
-                setIsSenderIdNeeded(false);
-              }}>
-              <div className="mt-5 space-y-1">
-                <Label htmlFor="label">{t("action")}:</Label>
-                <Controller
-                  name="action"
-                  control={form.control}
-                  render={() => {
-                    return (
-                      <Select
-                        isSearchable={false}
-                        className="text-sm"
-                        defaultValue={actionOptions[0]}
-                        onChange={handleSelectAction}
-                        options={actionOptions}
-                      />
-                    );
-                  }}
-                />
-                {form.formState.errors.action && (
-                  <p className="mt-1 text-sm text-red-500">{form.formState.errors.action.message}</p>
-                )}
-              </div>
-              {isPhoneNumberNeeded && (
-                <div className="mt-5 space-y-1">
-                  <Label htmlFor="sendTo">{t("phone_number")}</Label>
-                  <div className="mt-1 mb-5">
-                    <PhoneInput<AddActionFormValues>
-                      control={form.control}
-                      name="sendTo"
-                      className="rounded-md"
-                      placeholder={t("enter_phone_number")}
-                      id="sendTo"
-                      required
-                    />
-                    {form.formState.errors.sendTo && (
-                      <p className="mt-1 text-sm text-red-500">{form.formState.errors.sendTo.message}</p>
-                    )}
-                  </div>
-                </div>
-              )}
-              {isEmailAddressNeeded && (
-                <div className="mt-5">
-                  <EmailField required label={t("email_address")} {...form.register("sendTo")} />
-                </div>
-              )}
-              {isSenderIdNeeded && (
-                <div className="mt-5">
-                  <TextField
-                    label={t("sender_id")}
-                    type="text"
-                    placeholder="Cal"
-                    maxLength={11}
-                    {...form.register(`sender`)}
-                  />
-                </div>
-              )}
-              {form.getValues("action") === WorkflowActions.SMS_ATTENDEE && (
-                <div className="mt-5">
-                  <Controller
-                    name="numberRequired"
-                    control={form.control}
-                    render={() => (
-                      <Checkbox
-                        defaultChecked={form.getValues("numberRequired") || false}
-                        description={t("make_phone_number_required")}
-                        onChange={(e) => form.setValue("numberRequired", e.target.checked)}
-                      />
-                    )}
-                  />
-                </div>
-              )}
-              <DialogFooter>
-                <DialogClose asChild>
-                  <Button
-                    color="secondary"
-                    onClick={() => {
-                      setIsOpenDialog(false);
-                      form.unregister("sendTo");
-                      form.unregister("action");
-                      form.unregister("numberRequired");
-                      setIsPhoneNumberNeeded(false);
-                      setIsEmailAddressNeeded(false);
-                      setIsSenderIdNeeded(false);
-                    }}>
-                    {t("cancel")}
-                  </Button>
-                </DialogClose>
-                <Button type="submit">{t("add")}</Button>
-              </DialogFooter>
-            </Form>
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-};
diff --git a/packages/features/ee/workflows/components/v2/AddVariablesDropdown.tsx b/packages/features/ee/workflows/components/v2/AddVariablesDropdown.tsx
deleted file mode 100644
index 348c37bb01..0000000000
--- a/packages/features/ee/workflows/components/v2/AddVariablesDropdown.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui";
-import {
-  Dropdown,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@calcom/ui/v2/core/Dropdown";
-
-interface IAddVariablesDropdown {
-  addVariable: (isEmailSubject: boolean, variable: string) => void;
-  isEmailSubject: boolean;
-}
-
-const variables = [
-  "event_name",
-  "event_date",
-  "event_time",
-  "location",
-  "organizer_name",
-  "attendee_name",
-  "attendee_email",
-  "additional_notes",
-];
-
-export const AddVariablesDropdown = (props: IAddVariablesDropdown) => {
-  const { t } = useLocale();
-
-  return (
-    <Dropdown>
-      <DropdownMenuTrigger className="pt-[6px] focus:bg-gray-50">
-        <div className="flex items-center ">
-          {t("add_variable")}
-          <Icon.FiChevronDown className="ml-1 h-4 w-4" />
-        </div>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className="h-40 overflow-scroll">
-        <div className="pt-4 pb-1">
-          <div className="mb-2 px-4 text-left text-xs text-gray-500">
-            {t("add_dynamic_variables").toLocaleUpperCase()}
-          </div>
-          {variables.map((variable) => (
-            <DropdownMenuItem key={variable} className="hover:ring-0">
-              <button
-                key={variable}
-                type="button"
-                className="w-full px-4 py-2"
-                onClick={() => props.addVariable(props.isEmailSubject, t(`${variable}_workflow`))}>
-                <div className="sm:grid sm:grid-cols-2">
-                  <div className="mr-3 text-left md:col-span-1">
-                    {`{${t(`${variable}_workflow`).toUpperCase().replace(/ /g, "_")}}`}
-                  </div>
-                  <div className="hidden text-left text-gray-600 sm:col-span-1 sm:flex">
-                    {t(`${variable}_info`)}
-                  </div>
-                </div>
-              </button>
-            </DropdownMenuItem>
-          ))}
-        </div>
-      </DropdownMenuContent>
-    </Dropdown>
-  );
-};
diff --git a/packages/features/ee/workflows/components/v2/WorkflowDetailsPage.tsx b/packages/features/ee/workflows/components/v2/WorkflowDetailsPage.tsx
deleted file mode 100644
index 8d79b9a54a..0000000000
--- a/packages/features/ee/workflows/components/v2/WorkflowDetailsPage.tsx
+++ /dev/null
@@ -1,169 +0,0 @@
-import { WorkflowActions, WorkflowTemplates } from "@prisma/client";
-import { useRouter } from "next/router";
-import { Dispatch, SetStateAction, useMemo, useState } from "react";
-import { Controller, UseFormReturn } from "react-hook-form";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { trpc } from "@calcom/trpc/react";
-import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
-import { Icon } from "@calcom/ui/Icon";
-import { Button, Label, TextField } from "@calcom/ui/components";
-import MultiSelectCheckboxes, { Option } from "@calcom/ui/v2/core/form/MultiSelectCheckboxes";
-
-import type { FormValues } from "../../pages/v2/workflow";
-import { AddActionDialog } from "./AddActionDialog";
-import { DeleteDialog } from "./DeleteDialog";
-import WorkflowStepContainer from "./WorkflowStepContainer";
-
-interface Props {
-  form: UseFormReturn<FormValues>;
-  workflowId: number;
-  selectedEventTypes: Option[];
-  setSelectedEventTypes: Dispatch<SetStateAction<Option[]>>;
-}
-
-export default function WorkflowDetailsPage(props: Props) {
-  const { form, workflowId, selectedEventTypes, setSelectedEventTypes } = props;
-  const { t } = useLocale();
-  const router = useRouter();
-
-  const me = useMeQuery();
-  const isFreeUser = me.data?.plan === "FREE";
-
-  const [isAddActionDialogOpen, setIsAddActionDialogOpen] = useState(false);
-  const [reload, setReload] = useState(false);
-  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
-
-  const { data, isLoading } = trpc.viewer.eventTypes.getByViewer.useQuery();
-
-  const eventTypeOptions = useMemo(
-    () =>
-      data?.eventTypeGroups.reduce(
-        (options, group) => [
-          ...options,
-          ...group.eventTypes.map((eventType) => ({
-            value: String(eventType.id),
-            label: eventType.title,
-          })),
-        ],
-        [] as Option[]
-      ) || [],
-    [data]
-  );
-
-  const addAction = (action: WorkflowActions, sendTo?: string, numberRequired?: boolean, sender?: string) => {
-    const steps = form.getValues("steps");
-    const id =
-      steps?.length > 0
-        ? steps.sort((a, b) => {
-            return a.id - b.id;
-          })[0].id - 1
-        : 0;
-
-    const step = {
-      id: id > 0 ? 0 : id, //id of new steps always <= 0
-      action,
-      stepNumber:
-        steps && steps.length > 0
-          ? steps.sort((a, b) => {
-              return a.stepNumber - b.stepNumber;
-            })[steps.length - 1].stepNumber + 1
-          : 1,
-      sendTo: sendTo || null,
-      workflowId: workflowId,
-      reminderBody: null,
-      emailSubject: null,
-      template: WorkflowTemplates.CUSTOM,
-      numberRequired: numberRequired || false,
-      sender: sender || "Cal",
-    };
-    steps?.push(step);
-    form.setValue("steps", steps);
-  };
-
-  return (
-    <>
-      <div className="my-8 sm:my-0 md:flex">
-        <div className="pl-2 pr-3 md:sticky md:top-6 md:h-0 md:pl-0">
-          <div className="mb-5">
-            <TextField label={`${t("workflow_name")}:`} type="text" {...form.register("name")} />
-          </div>
-          <Label>{t("which_event_type_apply")}</Label>
-          <Controller
-            name="activeOn"
-            control={form.control}
-            render={() => {
-              return (
-                <MultiSelectCheckboxes
-                  options={eventTypeOptions}
-                  isLoading={isLoading}
-                  className="w-full md:w-64"
-                  setSelected={setSelectedEventTypes}
-                  selected={selectedEventTypes}
-                  setValue={(s: Option[]) => {
-                    form.setValue("activeOn", s);
-                  }}
-                />
-              );
-            }}
-          />
-          <div className="my-7 border-transparent md:border-t md:border-gray-200" />
-          <Button
-            type="button"
-            StartIcon={Icon.FiTrash2}
-            color="destructive"
-            className="border"
-            onClick={() => setDeleteDialogOpen(true)}>
-            {t("delete_workflow")}
-          </Button>
-          <div className="my-7 border-t border-gray-200 md:border-none" />
-        </div>
-
-        {/* Workflow Trigger Event & Steps */}
-        <div className="w-full rounded-md border border-gray-200 bg-gray-50 p-3 py-5 md:ml-3 md:p-8">
-          {form.getValues("trigger") && (
-            <div>
-              <WorkflowStepContainer form={form} isFreeUser={isFreeUser} />
-            </div>
-          )}
-          {form.getValues("steps") && (
-            <>
-              {form.getValues("steps")?.map((step) => {
-                return (
-                  <WorkflowStepContainer
-                    key={step.id}
-                    form={form}
-                    step={step}
-                    reload={reload}
-                    setReload={setReload}
-                    isFreeUser={isFreeUser}
-                  />
-                );
-              })}
-            </>
-          )}
-          <div className="my-3 flex justify-center">
-            <Icon.FiArrowDown className="stroke-[1.5px] text-3xl text-gray-500" />
-          </div>
-          <div className="flex justify-center">
-            <Button type="button" onClick={() => setIsAddActionDialogOpen(true)} color="secondary">
-              {t("add_action")}
-            </Button>
-          </div>
-        </div>
-      </div>
-      <AddActionDialog
-        isOpenDialog={isAddActionDialogOpen}
-        setIsOpenDialog={setIsAddActionDialogOpen}
-        addAction={addAction}
-        isFreeUser={isFreeUser}
-      />
-      <DeleteDialog
-        isOpenDialog={deleteDialogOpen}
-        setIsOpenDialog={setDeleteDialogOpen}
-        workflowId={workflowId}
-        additionalFunction={async () => await router.push("/workflows")}
-      />
-    </>
-  );
-}
diff --git a/packages/features/ee/workflows/components/v2/WorkflowListPage.tsx b/packages/features/ee/workflows/components/v2/WorkflowListPage.tsx
deleted file mode 100644
index 621d744db0..0000000000
--- a/packages/features/ee/workflows/components/v2/WorkflowListPage.tsx
+++ /dev/null
@@ -1,217 +0,0 @@
-import { Workflow, WorkflowStep } from "@prisma/client";
-import Link from "next/link";
-import { useRouter } from "next/router";
-import { useState } from "react";
-
-import classNames from "@calcom/lib/classNames";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { HttpError } from "@calcom/lib/http-error";
-import { trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui/Icon";
-import { Button, ButtonGroup } from "@calcom/ui/components";
-import {
-  Dropdown,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-  showToast,
-  Tooltip,
-} from "@calcom/ui/v2";
-
-import { getActionIcon } from "../../lib/getActionIcon";
-import { DeleteDialog } from "./DeleteDialog";
-import EmptyScreen from "./EmptyScreen";
-
-const CreateEmptyWorkflowView = () => {
-  const { t } = useLocale();
-  const router = useRouter();
-
-  const createMutation = trpc.viewer.workflows.createV2.useMutation({
-    onSuccess: async ({ workflow }) => {
-      await router.replace("/workflows/" + workflow.id);
-    },
-    onError: (err) => {
-      if (err instanceof HttpError) {
-        const message = `${err.statusCode}: ${err.message}`;
-        showToast(message, "error");
-      }
-
-      if (err.data?.code === "UNAUTHORIZED") {
-        const message = `${err.data.code}: You are not able to create this workflow`;
-        showToast(message, "error");
-      }
-    },
-  });
-
-  return (
-    <EmptyScreen
-      buttonText={t("create_workflow")}
-      buttonOnClick={() => createMutation.mutate()}
-      IconHeading={Icon.FiZap}
-      headline={t("workflows")}
-      description={t("no_workflows_description")}
-      isLoading={createMutation.isLoading}
-      showExampleWorkflows={true}
-    />
-  );
-};
-
-export type WorkflowType = Workflow & {
-  steps: WorkflowStep[];
-  activeOn: {
-    eventType: {
-      id: number;
-      title: string;
-    };
-  }[];
-};
-interface Props {
-  workflows: WorkflowType[] | undefined;
-}
-export default function WorkflowListPage({ workflows }: Props) {
-  const { t } = useLocale();
-  const utils = trpc.useContext();
-  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
-  const [workflowToDeleteId, setwWorkflowToDeleteId] = useState(0);
-  const router = useRouter();
-
-  return (
-    <>
-      {workflows && workflows.length > 0 ? (
-        <div className="overflow-hidden rounded-md border border-gray-200 bg-white sm:mx-0">
-          <ul className="divide-y divide-gray-200">
-            {workflows.map((workflow) => (
-              <li key={workflow.id}>
-                <div className="first-line:group flex w-full items-center justify-between p-4 hover:bg-neutral-50 sm:px-6">
-                  <Link href={"/workflows/" + workflow.id}>
-                    <a className="flex-grow cursor-pointer">
-                      <div className="rtl:space-x-reverse">
-                        <div
-                          className={classNames(
-                            "max-w-56 truncate text-sm font-medium leading-6 text-gray-900 md:max-w-max",
-                            workflow.name ? "text-gray-900" : "text-neutral-500"
-                          )}>
-                          {workflow.name
-                            ? workflow.name
-                            : "Untitled (" +
-                              `${t(`${workflow.steps[0].action.toLowerCase()}_action`)}`
-                                .charAt(0)
-                                .toUpperCase() +
-                              `${t(`${workflow.steps[0].action.toLowerCase()}_action`)}`.slice(1) +
-                              ")"}
-                        </div>
-                        <ul className="mt-2 flex flex-wrap space-x-1 sm:flex-nowrap ">
-                          <li className="mb-1 flex items-center whitespace-nowrap rounded-sm bg-gray-100 px-1 py-px text-xs text-gray-800 dark:bg-gray-900 dark:text-white">
-                            <div>
-                              {getActionIcon(workflow.steps)}
-
-                              <span className="mr-1">{t("triggers")}</span>
-                              {workflow.timeUnit && workflow.time && (
-                                <span className="mr-1">
-                                  {t(`${workflow.timeUnit.toLowerCase()}`, { count: workflow.time })}
-                                </span>
-                              )}
-                              <span>{t(`${workflow.trigger.toLowerCase()}_trigger`)}</span>
-                            </div>
-                          </li>
-                          <li className="mb-1 flex items-center whitespace-nowrap rounded-sm bg-gray-100 px-1 py-px text-xs text-gray-800 dark:bg-gray-900 dark:text-white">
-                            {workflow.activeOn && workflow.activeOn.length > 0 ? (
-                              <Tooltip
-                                content={workflow.activeOn.map((activeOn, key) => (
-                                  <p key={key}>{activeOn.eventType.title}</p>
-                                ))}>
-                                <div>
-                                  <Icon.FiLink className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
-                                  {t("active_on_event_types", { count: workflow.activeOn.length })}
-                                </div>
-                              </Tooltip>
-                            ) : (
-                              <div>
-                                <Icon.FiLink className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
-                                {t("no_active_event_types")}
-                              </div>
-                            )}
-                          </li>
-                        </ul>
-                      </div>
-                    </a>
-                  </Link>
-                  <div className="flex flex-shrink-0">
-                    <div className="hidden sm:block">
-                      <ButtonGroup combined>
-                        <Tooltip content={t("edit") as string}>
-                          <Button
-                            type="button"
-                            color="secondary"
-                            size="icon"
-                            StartIcon={Icon.FiEdit2}
-                            onClick={async () => await router.replace("/workflows/" + workflow.id)}
-                          />
-                        </Tooltip>
-                        <Tooltip content={t("delete") as string}>
-                          <Button
-                            onClick={() => {
-                              setDeleteDialogOpen(true);
-                              setwWorkflowToDeleteId(workflow.id);
-                            }}
-                            color="secondary"
-                            size="icon"
-                            StartIcon={Icon.FiTrash2}
-                          />
-                        </Tooltip>
-                      </ButtonGroup>
-                    </div>
-                    <div className="block sm:hidden">
-                      <Dropdown>
-                        <DropdownMenuTrigger asChild>
-                          <Button
-                            type="button"
-                            color="minimal"
-                            size="icon"
-                            StartIcon={Icon.FiMoreHorizontal}
-                          />
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent>
-                          <DropdownMenuItem>
-                            <Button
-                              type="button"
-                              color="minimal"
-                              StartIcon={Icon.FiEdit2}
-                              onClick={async () => await router.replace("/workflows/" + workflow.id)}>
-                              {t("edit")}
-                            </Button>
-                          </DropdownMenuItem>
-                          <DropdownMenuItem>
-                            <Button
-                              onClick={() => {
-                                setDeleteDialogOpen(true);
-                                setwWorkflowToDeleteId(workflow.id);
-                              }}
-                              color="minimal"
-                              StartIcon={Icon.FiTrash2}>
-                              {t("delete")}
-                            </Button>
-                          </DropdownMenuItem>
-                        </DropdownMenuContent>
-                      </Dropdown>
-                    </div>
-                  </div>
-                </div>
-              </li>
-            ))}
-          </ul>
-          <DeleteDialog
-            isOpenDialog={deleteDialogOpen}
-            setIsOpenDialog={setDeleteDialogOpen}
-            workflowId={workflowToDeleteId}
-            additionalFunction={async () => {
-              await utils.viewer.workflows.list.invalidate();
-            }}
-          />
-        </div>
-      ) : (
-        <CreateEmptyWorkflowView />
-      )}
-    </>
-  );
-}
diff --git a/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx b/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
deleted file mode 100644
index 2a11a2810e..0000000000
--- a/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
+++ /dev/null
@@ -1,639 +0,0 @@
-import {
-  TimeUnit,
-  WorkflowActions,
-  WorkflowStep,
-  WorkflowTemplates,
-  WorkflowTriggerEvents,
-} from "@prisma/client";
-import { Dispatch, SetStateAction, useRef, useState } from "react";
-import { Controller, UseFormReturn } from "react-hook-form";
-import "react-phone-number-input/style.css";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { HttpError } from "@calcom/lib/http-error";
-import { trpc } from "@calcom/trpc/react";
-import { Dialog } from "@calcom/ui/Dialog";
-import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/Dropdown";
-import { Icon } from "@calcom/ui/Icon";
-import { Button } from "@calcom/ui/components";
-import { Checkbox } from "@calcom/ui/components";
-import { EmailField, Label, TextArea, TextField } from "@calcom/ui/components/form";
-import PhoneInput from "@calcom/ui/form/PhoneInputLazy";
-import { DialogClose, DialogContent } from "@calcom/ui/v2";
-import ConfirmationDialogContent from "@calcom/ui/v2/core/ConfirmationDialogContent";
-import Select from "@calcom/ui/v2/core/form/select";
-import showToast from "@calcom/ui/v2/core/notifications";
-
-import { AddVariablesDropdown } from "../../components/v2/AddVariablesDropdown";
-import {
-  getWorkflowActionOptions,
-  getWorkflowTemplateOptions,
-  getWorkflowTriggerOptions,
-} from "../../lib/getOptions";
-import { translateVariablesToEnglish } from "../../lib/variableTranslations";
-import type { FormValues } from "../../pages/v2/workflow";
-import { TimeTimeUnitInput } from "./TimeTimeUnitInput";
-
-type WorkflowStepProps = {
-  step?: WorkflowStep;
-  form: UseFormReturn<FormValues>;
-  reload?: boolean;
-  setReload?: Dispatch<SetStateAction<boolean>>;
-  isFreeUser: boolean;
-};
-
-export default function WorkflowStepContainer(props: WorkflowStepProps) {
-  const { t, i18n } = useLocale();
-  const { step, form, reload, setReload, isFreeUser } = props;
-  const [isAdditionalInputsDialogOpen, setIsAdditionalInputsDialogOpen] = useState(false);
-  const [confirmationDialogOpen, setConfirmationDialogOpen] = useState(false);
-
-  const [isPhoneNumberNeeded, setIsPhoneNumberNeeded] = useState(
-    step?.action === WorkflowActions.SMS_NUMBER ? true : false
-  );
-
-  const [isSenderIdNeeded, setIsSenderIdNeeded] = useState(
-    step?.action === WorkflowActions.SMS_NUMBER || step?.action === WorkflowActions.SMS_ATTENDEE
-      ? true
-      : false
-  );
-
-  const [isEmailAddressNeeded, setIsEmailAddressNeeded] = useState(
-    step?.action === WorkflowActions.EMAIL_ADDRESS ? true : false
-  );
-
-  const [isCustomReminderBodyNeeded, setIsCustomReminderBodyNeeded] = useState(
-    step?.template === WorkflowTemplates.CUSTOM ? true : false
-  );
-
-  const [isEmailSubjectNeeded, setIsEmailSubjectNeeded] = useState(
-    step?.action === WorkflowActions.EMAIL_ATTENDEE ||
-      step?.action === WorkflowActions.EMAIL_HOST ||
-      step?.action === WorkflowActions.EMAIL_ADDRESS
-      ? true
-      : false
-  );
-
-  const [showTimeSection, setShowTimeSection] = useState(
-    form.getValues("trigger") === WorkflowTriggerEvents.BEFORE_EVENT ||
-      form.getValues("trigger") === WorkflowTriggerEvents.AFTER_EVENT
-  );
-
-  const [showTimeSectionAfter, setShowTimeSectionAfter] = useState(
-    form.getValues("trigger") === WorkflowTriggerEvents.AFTER_EVENT
-  );
-
-  const actionOptions = getWorkflowActionOptions(t);
-  const triggerOptions = getWorkflowTriggerOptions(t);
-  const templateOptions = getWorkflowTemplateOptions(t);
-
-  const { ref: emailSubjectFormRef, ...restEmailSubjectForm } = step
-    ? form.register(`steps.${step.stepNumber - 1}.emailSubject`)
-    : { ref: null, name: "" };
-
-  const { ref: reminderBodyFormRef, ...restReminderBodyForm } = step
-    ? form.register(`steps.${step.stepNumber - 1}.reminderBody`)
-    : { ref: null, name: "" };
-
-  const refEmailSubject = useRef<HTMLTextAreaElement | null>(null);
-
-  const refReminderBody = useRef<HTMLTextAreaElement | null>(null);
-
-  const addVariable = (isEmailSubject: boolean, variable: string) => {
-    if (step) {
-      if (isEmailSubject) {
-        const currentEmailSubject = refEmailSubject?.current?.value || "";
-        const cursorPosition = refEmailSubject?.current?.selectionStart || currentEmailSubject.length;
-        const subjectWithAddedVariable = `${currentEmailSubject.substring(0, cursorPosition)}{${variable
-          .toUpperCase()
-          .replace(/ /g, "_")}}${currentEmailSubject.substring(cursorPosition)}`;
-        form.setValue(`steps.${step.stepNumber - 1}.emailSubject`, subjectWithAddedVariable);
-      } else {
-        const currentMessageBody = refReminderBody?.current?.value || "";
-        const cursorPosition = refReminderBody?.current?.selectionStart || currentMessageBody.length;
-        const messageWithAddedVariable = `${currentMessageBody.substring(0, cursorPosition)}{${variable
-          .toUpperCase()
-          .replace(/ /g, "_")}}${currentMessageBody.substring(cursorPosition)}`;
-        form.setValue(`steps.${step.stepNumber - 1}.reminderBody`, messageWithAddedVariable);
-      }
-    }
-  };
-
-  const testActionMutation = trpc.viewer.workflows.testAction.useMutation({
-    onSuccess: async () => {
-      showToast(t("notification_sent"), "success");
-    },
-    onError: (err) => {
-      if (err instanceof HttpError) {
-        const message = `${err.statusCode}: ${err.message}`;
-        showToast(message, "error");
-      }
-    },
-  });
-
-  //trigger
-  if (!step) {
-    const trigger = form.getValues("trigger");
-    const triggerString = t(`${trigger.toLowerCase()}_trigger`);
-
-    const selectedTrigger = {
-      label: triggerString.charAt(0).toUpperCase() + triggerString.slice(1),
-      value: trigger,
-    };
-
-    return (
-      <>
-        <div className="flex justify-center">
-          <div className="min-w-80 w-full rounded-md border border-gray-200 bg-white p-7">
-            <div className="flex">
-              <div className="mt-[3px] mr-5 flex h-5 w-5 items-center justify-center rounded-full bg-gray-100 p-1 text-xs font-medium">
-                1
-              </div>
-              <div>
-                <div className="text-base font-bold">{t("trigger")}</div>
-                <div className="text-sm text-gray-600">{t("when_something_happens")}</div>
-              </div>
-            </div>
-            <div className="my-7 border-t border-gray-200" />
-            <Label>{t("when")}</Label>
-            <Controller
-              name="trigger"
-              control={form.control}
-              render={() => {
-                return (
-                  <Select
-                    isSearchable={false}
-                    className="text-sm"
-                    onChange={(val) => {
-                      if (val) {
-                        form.setValue("trigger", val.value);
-                        if (
-                          val.value === WorkflowTriggerEvents.BEFORE_EVENT ||
-                          val.value === WorkflowTriggerEvents.AFTER_EVENT
-                        ) {
-                          setShowTimeSection(true);
-                          if (val.value === WorkflowTriggerEvents.AFTER_EVENT) {
-                            setShowTimeSectionAfter(true);
-                          } else {
-                            setShowTimeSectionAfter(false);
-                          }
-                          form.setValue("time", 24);
-                          form.setValue("timeUnit", TimeUnit.HOUR);
-                        } else {
-                          setShowTimeSection(false);
-                          setShowTimeSectionAfter(false);
-                          form.unregister("time");
-                          form.unregister("timeUnit");
-                        }
-                      }
-                    }}
-                    defaultValue={selectedTrigger}
-                    options={triggerOptions}
-                  />
-                );
-              }}
-            />
-            {showTimeSection && (
-              <div className="mt-5">
-                <Label>{showTimeSectionAfter ? t("how_long_after") : t("how_long_before")}</Label>
-                <TimeTimeUnitInput form={form} />
-              </div>
-            )}
-          </div>
-        </div>
-      </>
-    );
-  }
-
-  if (step && step.action) {
-    const actionString = t(`${step.action.toLowerCase()}_action`);
-
-    const selectedAction = {
-      label: actionString.charAt(0).toUpperCase() + actionString.slice(1),
-      value: step.action,
-    };
-
-    const selectedTemplate = { label: t(`${step.template.toLowerCase()}`), value: step.template };
-
-    return (
-      <>
-        <div className="my-3 flex justify-center">
-          <Icon.FiArrowDown className="stroke-[1.5px] text-3xl text-gray-500" />
-        </div>
-        <div className="flex justify-center">
-          <div className="min-w-80 flex w-full rounded-md border border-gray-200 bg-white p-7">
-            <div className="w-full">
-              <div className="flex">
-                <div className="w-full">
-                  <div className="flex">
-                    <div className="mt-[3px] mr-5 flex h-5 w-5 items-center justify-center rounded-full bg-gray-100 p-1 text-xs">
-                      {step.stepNumber + 1}
-                    </div>
-                    <div>
-                      <div className="text-base font-bold">{t("action")}</div>
-                      <div className="text-sm text-gray-600">{t("action_is_performed")}</div>
-                    </div>
-                  </div>
-                </div>
-                <div>
-                  <Dropdown>
-                    <DropdownMenuTrigger asChild>
-                      <Button type="button" color="minimal" size="icon" StartIcon={Icon.FiMoreHorizontal} />
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent>
-                      <DropdownMenuItem>
-                        <Button
-                          onClick={() => {
-                            const steps = form.getValues("steps");
-                            const updatedSteps = steps
-                              ?.filter((currStep) => currStep.id !== step.id)
-                              .map((s) => {
-                                const updatedStep = s;
-                                if (step.stepNumber < updatedStep.stepNumber) {
-                                  updatedStep.stepNumber = updatedStep.stepNumber - 1;
-                                }
-                                return updatedStep;
-                              });
-                            form.setValue("steps", updatedSteps);
-                            if (setReload) {
-                              setReload(!reload);
-                            }
-                          }}
-                          color="secondary"
-                          size="base"
-                          StartIcon={Icon.FiTrash2}
-                          className="w-full rounded-none">
-                          {t("delete")}
-                        </Button>
-                      </DropdownMenuItem>
-                    </DropdownMenuContent>
-                  </Dropdown>
-                </div>
-              </div>
-              <div className="my-7 border-t border-gray-200" />
-              <div>
-                <Label>{t("do_this")}</Label>
-                <Controller
-                  name={`steps.${step.stepNumber - 1}.action`}
-                  control={form.control}
-                  render={() => {
-                    return (
-                      <Select
-                        isSearchable={false}
-                        className="text-sm"
-                        onChange={(val) => {
-                          if (val) {
-                            if (val.value === WorkflowActions.SMS_NUMBER) {
-                              setIsPhoneNumberNeeded(true);
-                              setIsSenderIdNeeded(true);
-                              setIsEmailAddressNeeded(false);
-                            } else if (val.value === WorkflowActions.EMAIL_ADDRESS) {
-                              setIsEmailAddressNeeded(true);
-                              setIsPhoneNumberNeeded(false);
-                              setIsSenderIdNeeded(false);
-                            } else if (val.value === WorkflowActions.SMS_ATTENDEE) {
-                              setIsSenderIdNeeded(true);
-                              setIsEmailAddressNeeded(false);
-                              setIsPhoneNumberNeeded(false);
-                            } else {
-                              setIsEmailAddressNeeded(false);
-                              setIsPhoneNumberNeeded(false);
-                              setIsSenderIdNeeded(false);
-                            }
-                            form.unregister(`steps.${step.stepNumber - 1}.sendTo`);
-                            form.clearErrors(`steps.${step.stepNumber - 1}.sendTo`);
-                            if (
-                              val.value === WorkflowActions.EMAIL_ATTENDEE ||
-                              val.value === WorkflowActions.EMAIL_HOST ||
-                              val.value === WorkflowActions.EMAIL_ADDRESS
-                            ) {
-                              setIsEmailSubjectNeeded(true);
-                            } else {
-                              setIsEmailSubjectNeeded(false);
-                            }
-                            form.setValue(`steps.${step.stepNumber - 1}.action`, val.value);
-                          }
-                        }}
-                        defaultValue={selectedAction}
-                        options={
-                          isFreeUser
-                            ? actionOptions.filter(
-                                (actionOption) =>
-                                  actionOption.value !== WorkflowActions.SMS_ATTENDEE &&
-                                  actionOption.value !== WorkflowActions.SMS_NUMBER
-                              )
-                            : actionOptions
-                        }
-                      />
-                    );
-                  }}
-                />
-              </div>
-              {(isPhoneNumberNeeded || isSenderIdNeeded) && (
-                <div className="mt-2 rounded-md bg-gray-50 p-4 pt-0">
-                  {isPhoneNumberNeeded && (
-                    <>
-                      <Label className="pt-4">{t("custom_phone_number")}</Label>
-                      <PhoneInput<FormValues>
-                        control={form.control}
-                        name={`steps.${step.stepNumber - 1}.sendTo`}
-                        placeholder={t("phone_number")}
-                        id={`steps.${step.stepNumber - 1}.sendTo`}
-                        className="w-full rounded-md"
-                        required
-                      />
-                      {form.formState.errors.steps &&
-                        form.formState?.errors?.steps[step.stepNumber - 1]?.sendTo && (
-                          <p className="mt-1 text-xs text-red-500">
-                            {form.formState?.errors?.steps[step.stepNumber - 1]?.sendTo?.message || ""}
-                          </p>
-                        )}
-                    </>
-                  )}
-                  {isSenderIdNeeded && (
-                    <>
-                      <div className="pt-4">
-                        <TextField
-                          label={t("sender_id")}
-                          type="text"
-                          placeholder="Cal"
-                          maxLength={11}
-                          {...form.register(`steps.${step.stepNumber - 1}.sender`)}
-                        />
-                      </div>
-                      {form.formState.errors.steps &&
-                        form.formState?.errors?.steps[step.stepNumber - 1]?.sender && (
-                          <p className="mt-1 text-xs text-red-500">{t("sender_id_error_message")}</p>
-                        )}
-                    </>
-                  )}
-                </div>
-              )}
-              {form.getValues(`steps.${step.stepNumber - 1}.action`) === WorkflowActions.SMS_ATTENDEE && (
-                <div className="mt-2">
-                  <Controller
-                    name={`steps.${step.stepNumber - 1}.numberRequired`}
-                    control={form.control}
-                    render={() => (
-                      <Checkbox
-                        defaultChecked={
-                          form.getValues(`steps.${step.stepNumber - 1}.numberRequired`) || false
-                        }
-                        description={t("make_phone_number_required")}
-                        onChange={(e) =>
-                          form.setValue(`steps.${step.stepNumber - 1}.numberRequired`, e.target.checked)
-                        }
-                      />
-                    )}
-                  />
-                </div>
-              )}
-              {isEmailAddressNeeded && (
-                <div className="mt-5 rounded-md bg-gray-50 p-4">
-                  <EmailField
-                    required
-                    label={t("email_address")}
-                    {...form.register(`steps.${step.stepNumber - 1}.sendTo`)}
-                  />
-                </div>
-              )}
-              <div className="mt-5">
-                <Label>{t("message_template")}</Label>
-                <Controller
-                  name={`steps.${step.stepNumber - 1}.template`}
-                  control={form.control}
-                  render={() => {
-                    return (
-                      <Select
-                        isSearchable={false}
-                        className="text-sm"
-                        onChange={(val) => {
-                          if (val) {
-                            form.setValue(`steps.${step.stepNumber - 1}.template`, val.value);
-                            const isCustomTemplate = val.value === WorkflowTemplates.CUSTOM;
-                            setIsCustomReminderBodyNeeded(isCustomTemplate);
-                          }
-                        }}
-                        defaultValue={selectedTemplate}
-                        options={templateOptions}
-                      />
-                    );
-                  }}
-                />
-              </div>
-              {isCustomReminderBodyNeeded && (
-                <div className="mt-2 rounded-md bg-gray-50 p-4 pt-2 md:p-6 md:pt-4">
-                  {isEmailSubjectNeeded && (
-                    <div className="mb-5">
-                      <div className="mb-2 flex items-center">
-                        <Label className="mb-0 flex-none">{t("subject")}</Label>
-                        <div className="flex-grow text-right">
-                          <AddVariablesDropdown addVariable={addVariable} isEmailSubject={true} />
-                        </div>
-                      </div>
-                      <TextArea
-                        ref={(e) => {
-                          emailSubjectFormRef?.(e);
-                          refEmailSubject.current = e;
-                        }}
-                        className="my-0"
-                        required
-                        {...restEmailSubjectForm}
-                      />
-                      {form.formState.errors.steps &&
-                        form.formState?.errors?.steps[step.stepNumber - 1]?.emailSubject && (
-                          <p className="mt-1 text-xs text-red-500">
-                            {form.formState?.errors?.steps[step.stepNumber - 1]?.emailSubject?.message || ""}
-                          </p>
-                        )}
-                    </div>
-                  )}
-                  <div className="mb-2 flex items-center">
-                    <Label className="mb-0 flex-none">
-                      {isEmailSubjectNeeded ? t("email_body") : t("text_message")}
-                    </Label>
-                    <div className="flex-grow text-right">
-                      <AddVariablesDropdown addVariable={addVariable} isEmailSubject={false} />
-                    </div>
-                  </div>
-                  <TextArea
-                    ref={(e) => {
-                      reminderBodyFormRef?.(e);
-                      refReminderBody.current = e;
-                    }}
-                    className="my-0 h-24"
-                    required
-                    {...restReminderBodyForm}
-                  />
-                  {form.formState.errors.steps &&
-                    form.formState?.errors?.steps[step.stepNumber - 1]?.reminderBody && (
-                      <p className="mt-1 text-xs text-red-500">
-                        {form.formState?.errors?.steps[step.stepNumber - 1]?.reminderBody?.message || ""}
-                      </p>
-                    )}
-                  <div className="mt-3 ">
-                    <button type="button" onClick={() => setIsAdditionalInputsDialogOpen(true)}>
-                      <div className="mt-2 flex text-sm text-gray-600">
-                        <Icon.FiHelpCircle className="mt-[3px] mr-2 h-3 w-3" />
-                        <p className="text-left">{t("using_additional_inputs_as_variables")}</p>
-                      </div>
-                    </button>
-                  </div>
-                </div>
-              )}
-              {form.getValues(`steps.${step.stepNumber - 1}.action`) !== WorkflowActions.SMS_ATTENDEE && (
-                <Button
-                  type="button"
-                  className="mt-7 w-full"
-                  onClick={() => {
-                    let isEmpty = false;
-                    if (!form.getValues(`steps.${step.stepNumber - 1}.sendTo`) && isPhoneNumberNeeded) {
-                      form.setError(`steps.${step.stepNumber - 1}.sendTo`, {
-                        type: "custom",
-                        message: t("no_input"),
-                      });
-                      isEmpty = true;
-                    }
-                    if (
-                      form.getValues(`steps.${step.stepNumber - 1}.template`) === WorkflowTemplates.CUSTOM
-                    ) {
-                      if (!form.getValues(`steps.${step.stepNumber - 1}.reminderBody`)) {
-                        form.setError(`steps.${step.stepNumber - 1}.reminderBody`, {
-                          type: "custom",
-                          message: t("no_input"),
-                        });
-                        isEmpty = true;
-                      } else if (
-                        isEmailSubjectNeeded &&
-                        !form.getValues(`steps.${step.stepNumber - 1}.emailSubject`)
-                      ) {
-                        form.setError(`steps.${step.stepNumber - 1}.emailSubject`, {
-                          type: "custom",
-                          message: t("no_input"),
-                        });
-                        isEmpty = true;
-                      }
-                    }
-
-                    if (!isPhoneNumberNeeded && !isEmpty) {
-                      //translate body and reminder to english
-                      const emailSubject = translateVariablesToEnglish(
-                        form.getValues(`steps.${step.stepNumber - 1}.emailSubject`) || "",
-                        { locale: i18n.language, t }
-                      );
-                      const reminderBody = translateVariablesToEnglish(
-                        form.getValues(`steps.${step.stepNumber - 1}.reminderBody`) || "",
-                        { locale: i18n.language, t }
-                      );
-
-                      testActionMutation.mutate({
-                        action: step.action,
-                        emailSubject,
-                        reminderBody,
-                        template: step.template,
-                        sender: step.sender || "Cal",
-                      });
-                    } else {
-                      const isNumberValid =
-                        form.formState.errors.steps &&
-                        form.formState?.errors?.steps[step.stepNumber - 1]?.sendTo
-                          ? false
-                          : true;
-
-                      if (isPhoneNumberNeeded && isNumberValid && !isEmpty) {
-                        setConfirmationDialogOpen(true);
-                      }
-                    }
-                  }}
-                  color="secondary">
-                  <div className="w-full">{t("test_action")}</div>
-                </Button>
-              )}
-            </div>
-          </div>
-        </div>
-        <Dialog open={confirmationDialogOpen} onOpenChange={setConfirmationDialogOpen}>
-          <ConfirmationDialogContent
-            variety="warning"
-            title={t("test_workflow_action")}
-            confirmBtnText={t("send_sms")}
-            onConfirm={(e) => {
-              e.preventDefault();
-              const reminderBody = translateVariablesToEnglish(
-                form.getValues(`steps.${step.stepNumber - 1}.reminderBody`) || "",
-                { locale: i18n.language, t }
-              );
-
-              testActionMutation.mutate({
-                action: step.action,
-                emailSubject: "",
-                reminderBody: reminderBody || "",
-                template: step.template,
-                sendTo: step.sendTo || "",
-              });
-              setConfirmationDialogOpen(false);
-            }}>
-            {t("send_sms_to_number", { number: form.getValues(`steps.${step.stepNumber - 1}.sendTo`) })}
-          </ConfirmationDialogContent>
-        </Dialog>
-        <Dialog open={isAdditionalInputsDialogOpen} onOpenChange={setIsAdditionalInputsDialogOpen}>
-          <DialogContent useOwnActionButtons type="creation" className="sm:max-w-[610px] md:h-[570px]">
-            <div className="-m-3 h-[430px] overflow-x-hidden overflow-y-scroll sm:m-0">
-              <h1 className="w-full text-xl font-semibold ">{t("how_additional_inputs_as_variables")}</h1>
-              <div className="mb-7 mt-7 rounded-md bg-gray-50 p-3 sm:p-4">
-                <p className="test-sm font-medium">{t("format")}</p>
-                <ul className="mt-2 ml-5 list-disc text-gray-900">
-                  <li>{t("uppercase_for_letters")}</li>
-                  <li>{t("replace_whitespaces_underscores")}</li>
-                  <li>{t("ignore_special_characters")}</li>
-                </ul>
-                <div className="mt-6">
-                  <p className="test-sm w-full font-medium">{t("example_1")}</p>
-                  <div className="mt-2 grid grid-cols-12">
-                    <div className="test-sm col-span-5 mr-2 text-gray-600">{t("additional_input_label")}</div>
-                    <div className="test-sm col-span-7 text-gray-900">{t("company_size")}</div>
-                    <div className="test-sm col-span-5 w-full text-gray-600">{t("variable")}</div>
-
-                    <div className="test-sm col-span-7 break-words text-gray-900">
-                      {" "}
-                      {`{${t("company_size")
-                        .replace(/[^a-zA-Z0-9 ]/g, "")
-                        .trim()
-                        .replace(/ /g, "_")
-                        .toUpperCase()}}`}
-                    </div>
-                  </div>
-                </div>
-                <div className="mt-6">
-                  <p className="test-sm w-full font-medium">{t("example_2")}</p>
-                  <div className="mt-2 grid grid-cols-12">
-                    <div className="test-sm col-span-5 mr-2 text-gray-600">{t("additional_input_label")}</div>
-                    <div className="test-sm col-span-7 text-gray-900">{t("what_help_needed")}</div>
-                    <div className="test-sm col-span-5 text-gray-600">{t("variable")}</div>
-                    <div className="test-sm col-span-7 break-words text-gray-900">
-                      {" "}
-                      {`{${t("what_help_needed")
-                        .replace(/[^a-zA-Z0-9 ]/g, "")
-                        .trim()
-                        .replace(/ /g, "_")
-                        .toUpperCase()}}`}
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="flex flex-row-reverse">
-              <DialogClose asChild>
-                <Button color="primary" type="button">
-                  {t("close")}
-                </Button>
-              </DialogClose>
-            </div>
-          </DialogContent>
-        </Dialog>
-      </>
-    );
-  }
-
-  return <></>;
-}
diff --git a/packages/features/ee/workflows/lib/getActionIcon.tsx b/packages/features/ee/workflows/lib/getActionIcon.tsx
index 4d59ab4187..ee1b44e4d6 100644
--- a/packages/features/ee/workflows/lib/getActionIcon.tsx
+++ b/packages/features/ee/workflows/lib/getActionIcon.tsx
@@ -1,7 +1,7 @@
 import { WorkflowActions, WorkflowStep } from "@prisma/client";
 
 import { classNames } from "@calcom/lib";
-import { Icon } from "@calcom/ui/Icon";
+import { Icon } from "@calcom/ui";
 
 export function getActionIcon(steps: WorkflowStep[], className?: string): JSX.Element {
   if (steps.length === 0) {
diff --git a/packages/features/ee/workflows/pages/index.tsx b/packages/features/ee/workflows/pages/index.tsx
index 3646ba057c..7fc3c16f69 100644
--- a/packages/features/ee/workflows/pages/index.tsx
+++ b/packages/features/ee/workflows/pages/index.tsx
@@ -1,45 +1,69 @@
 import { useSession } from "next-auth/react";
+import { useRouter } from "next/router";
 
-import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { HttpError } from "@calcom/lib/http-error";
 import { trpc } from "@calcom/trpc/react";
-import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
-import { Alert } from "@calcom/ui/Alert";
-import Loader from "@calcom/ui/Loader";
-import Shell from "@calcom/ui/Shell";
+import { Button, Icon, Shell, showToast } from "@calcom/ui";
 
-import { NewWorkflowButton } from "../components/NewWorkflowButton";
+import LicenseRequired from "../../common/components/v2/LicenseRequired";
+import SkeletonLoader from "../components/SkeletonLoaderList";
 import WorkflowList from "../components/WorkflowListPage";
 
 function WorkflowsPage() {
   const { t } = useLocale();
 
   const session = useSession();
-
-  const me = useMeQuery();
-  const isFreeUser = me.data?.plan === "FREE";
+  const router = useRouter();
 
   const { data, isLoading } = trpc.viewer.workflows.list.useQuery();
 
-  return (
+  const createMutation = trpc.viewer.workflows.createV2.useMutation({
+    onSuccess: async ({ workflow }) => {
+      await router.replace("/workflows/" + workflow.id);
+    },
+    onError: (err) => {
+      if (err instanceof HttpError) {
+        const message = `${err.statusCode}: ${err.message}`;
+        showToast(message, "error");
+      }
+
+      if (err.data?.code === "UNAUTHORIZED") {
+        const message = `${err.data.code}: You are not able to create this workflow`;
+        showToast(message, "error");
+      }
+    },
+  });
+
+  return session.data ? (
     <Shell
-      heading={t("workflows")}
-      subtitle={t("workflows_to_automate_notifications")}
-      CTA={session.data?.hasValidLicense && !isFreeUser ? <NewWorkflowButton /> : <></>}>
+      heading={data?.workflows.length ? t("workflows") : undefined}
+      title={t("workflows")}
+      subtitle={data?.workflows.length ? t("workflows_to_automate_notifications") : ""}
+      CTA={
+        session.data?.hasValidLicense && data?.workflows && data?.workflows.length > 0 ? (
+          <Button
+            StartIcon={Icon.FiPlus}
+            onClick={() => createMutation.mutate()}
+            loading={createMutation.isLoading}>
+            {t("new")}
+          </Button>
+        ) : (
+          <></>
+        )
+      }>
       <LicenseRequired>
         {isLoading ? (
-          <Loader />
+          <SkeletonLoader />
         ) : (
           <>
-            {isFreeUser ? (
-              <Alert className="border " severity="warning" title={t("pro_feature_workflows")} />
-            ) : (
-              <WorkflowList workflows={data?.workflows} />
-            )}
+            <WorkflowList workflows={data?.workflows} />
           </>
         )}
       </LicenseRequired>
     </Shell>
+  ) : (
+    <></>
   );
 }
 
diff --git a/packages/features/ee/workflows/pages/v2/index.tsx b/packages/features/ee/workflows/pages/v2/index.tsx
deleted file mode 100644
index a6b013858d..0000000000
--- a/packages/features/ee/workflows/pages/v2/index.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { useSession } from "next-auth/react";
-import { useRouter } from "next/router";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { HttpError } from "@calcom/lib/http-error";
-import { trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui";
-import { Button } from "@calcom/ui/components";
-import { showToast } from "@calcom/ui/v2";
-import Shell from "@calcom/ui/v2/core/Shell";
-
-import LicenseRequired from "../../../common/components/v2/LicenseRequired";
-import SkeletonLoader from "../../components/v2/SkeletonLoaderList";
-import WorkflowList from "../../components/v2/WorkflowListPage";
-
-function WorkflowsPage() {
-  const { t } = useLocale();
-
-  const session = useSession();
-  const router = useRouter();
-
-  const { data, isLoading } = trpc.viewer.workflows.list.useQuery();
-
-  const createMutation = trpc.viewer.workflows.createV2.useMutation({
-    onSuccess: async ({ workflow }) => {
-      await router.replace("/workflows/" + workflow.id);
-    },
-    onError: (err) => {
-      if (err instanceof HttpError) {
-        const message = `${err.statusCode}: ${err.message}`;
-        showToast(message, "error");
-      }
-
-      if (err.data?.code === "UNAUTHORIZED") {
-        const message = `${err.data.code}: You are not able to create this workflow`;
-        showToast(message, "error");
-      }
-    },
-  });
-
-  return session.data ? (
-    <Shell
-      heading={data?.workflows.length ? t("workflows") : undefined}
-      title={t("workflows")}
-      subtitle={data?.workflows.length ? t("workflows_to_automate_notifications") : ""}
-      CTA={
-        session.data?.hasValidLicense && data?.workflows && data?.workflows.length > 0 ? (
-          <Button
-            StartIcon={Icon.FiPlus}
-            onClick={() => createMutation.mutate()}
-            loading={createMutation.isLoading}>
-            {t("new")}
-          </Button>
-        ) : (
-          <></>
-        )
-      }>
-      <LicenseRequired>
-        {isLoading ? (
-          <SkeletonLoader />
-        ) : (
-          <>
-            <WorkflowList workflows={data?.workflows} />
-          </>
-        )}
-      </LicenseRequired>
-    </Shell>
-  ) : (
-    <></>
-  );
-}
-
-export default WorkflowsPage;
diff --git a/packages/features/ee/workflows/pages/v2/workflow.tsx b/packages/features/ee/workflows/pages/v2/workflow.tsx
deleted file mode 100644
index c8aac94470..0000000000
--- a/packages/features/ee/workflows/pages/v2/workflow.tsx
+++ /dev/null
@@ -1,246 +0,0 @@
-import { zodResolver } from "@hookform/resolvers/zod";
-import {
-  TimeUnit,
-  WorkflowActions,
-  WorkflowStep,
-  WorkflowTemplates,
-  WorkflowTriggerEvents,
-} from "@prisma/client";
-import { isValidPhoneNumber } from "libphonenumber-js";
-import { useSession } from "next-auth/react";
-import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-
-import { classNames } from "@calcom/lib";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { HttpError } from "@calcom/lib/http-error";
-import { stringOrNumber } from "@calcom/prisma/zod-utils";
-import { trpc } from "@calcom/trpc/react";
-import { Button, Form } from "@calcom/ui/components";
-import { Option } from "@calcom/ui/form/MultiSelectCheckboxes";
-import { showToast, Alert } from "@calcom/ui/v2";
-import Shell from "@calcom/ui/v2/core/Shell";
-
-import LicenseRequired from "../../../common/components/v2/LicenseRequired";
-import SkeletonLoader from "../../components/v2/SkeletonLoaderEdit";
-import WorkflowDetailsPage from "../../components/v2/WorkflowDetailsPage";
-import { getTranslatedText } from "../../lib/variableTranslations";
-import { translateVariablesToEnglish } from "../../lib/variableTranslations";
-
-export type FormValues = {
-  name: string;
-  activeOn: Option[];
-  steps: WorkflowStep[];
-  trigger: WorkflowTriggerEvents;
-  time?: number;
-  timeUnit?: TimeUnit;
-};
-
-export function onlyLettersNumbersSpaces(str: string) {
-  if (str.length <= 11 && /^[A-Za-z0-9\s]*$/.test(str)) {
-    return true;
-  }
-  return false;
-}
-
-const formSchema = z.object({
-  name: z.string(),
-  activeOn: z.object({ value: z.string(), label: z.string() }).array(),
-  trigger: z.nativeEnum(WorkflowTriggerEvents),
-  time: z.number().gte(0).optional(),
-  timeUnit: z.nativeEnum(TimeUnit).optional(),
-  steps: z
-    .object({
-      id: z.number(),
-      stepNumber: z.number(),
-      action: z.nativeEnum(WorkflowActions),
-      workflowId: z.number(),
-      reminderBody: z.string().nullable(),
-      emailSubject: z.string().nullable(),
-      template: z.nativeEnum(WorkflowTemplates),
-      numberRequired: z.boolean().nullable(),
-      sendTo: z
-        .string()
-        .refine((val) => isValidPhoneNumber(val) || val.includes("@"))
-        .nullable(),
-      sender: z
-        .string()
-        .refine((val) => onlyLettersNumbersSpaces(val))
-        .optional()
-        .nullable(),
-    })
-    .array(),
-});
-
-const querySchema = z.object({
-  workflow: stringOrNumber,
-});
-
-function WorkflowPage() {
-  const { t, i18n } = useLocale();
-  const session = useSession();
-  const router = useRouter();
-
-  const [selectedEventTypes, setSelectedEventTypes] = useState<Option[]>([]);
-  const [isAllDataLoaded, setIsAllDataLoaded] = useState(false);
-
-  const form = useForm<FormValues>({
-    mode: "onBlur",
-    resolver: zodResolver(formSchema),
-  });
-
-  const { workflow: workflowId } = router.isReady ? querySchema.parse(router.query) : { workflow: -1 };
-  const utils = trpc.useContext();
-
-  const {
-    data: workflow,
-    isError,
-    error,
-  } = trpc.viewer.workflows.get.useQuery(
-    { id: +workflowId },
-    {
-      enabled: router.isReady && !!workflowId,
-    }
-  );
-
-  useEffect(() => {
-    if (workflow) {
-      setSelectedEventTypes(
-        workflow.activeOn.map((active) => ({
-          value: String(active.eventType.id),
-          label: active.eventType.title,
-        })) || []
-      );
-      const activeOn = workflow.activeOn
-        ? workflow.activeOn.map((active) => ({
-            value: active.eventType.id.toString(),
-            label: active.eventType.slug,
-          }))
-        : undefined;
-
-      //translate dynamic variables into local language
-      const steps = workflow.steps.map((step) => {
-        const updatedStep = step;
-        if (step.reminderBody) {
-          updatedStep.reminderBody = getTranslatedText(step.reminderBody || "", {
-            locale: i18n.language,
-            t,
-          });
-        }
-        if (step.emailSubject) {
-          updatedStep.emailSubject = getTranslatedText(step.emailSubject || "", {
-            locale: i18n.language,
-            t,
-          });
-        }
-        return updatedStep;
-      });
-
-      form.setValue("name", workflow.name);
-      form.setValue("steps", steps);
-      form.setValue("trigger", workflow.trigger);
-      form.setValue("time", workflow.time || undefined);
-      form.setValue("timeUnit", workflow.timeUnit || undefined);
-      form.setValue("activeOn", activeOn || []);
-      setIsAllDataLoaded(true);
-    }
-  }, [workflow]);
-
-  const updateMutation = trpc.viewer.workflows.update.useMutation({
-    onSuccess: async ({ workflow }) => {
-      if (workflow) {
-        utils.viewer.workflows.get.setData({ id: +workflow.id }, workflow);
-
-        showToast(
-          t("workflow_updated_successfully", {
-            workflowName: workflow.name,
-          }),
-          "success"
-        );
-      }
-      await router.push("/workflows");
-    },
-    onError: (err) => {
-      if (err instanceof HttpError) {
-        const message = `${err.statusCode}: ${err.message}`;
-        showToast(message, "error");
-      }
-    },
-  });
-
-  return session.data ? (
-    <Form
-      form={form}
-      handleSubmit={async (values) => {
-        let activeOnEventTypeIds: number[] = [];
-
-        values.steps.forEach((step) => {
-          if (step.reminderBody) {
-            step.reminderBody = translateVariablesToEnglish(step.reminderBody, { locale: i18n.language, t });
-          }
-          if (step.emailSubject) {
-            step.emailSubject = translateVariablesToEnglish(step.emailSubject, { locale: i18n.language, t });
-          }
-        });
-
-        if (values.activeOn) {
-          activeOnEventTypeIds = values.activeOn.map((option) => {
-            return parseInt(option.value, 10);
-          });
-        }
-        updateMutation.mutate({
-          id: parseInt(router.query.workflow as string, 10),
-          name: values.name,
-          activeOn: activeOnEventTypeIds,
-          steps: values.steps,
-          trigger: values.trigger,
-          time: values.time || null,
-          timeUnit: values.timeUnit || null,
-        });
-      }}>
-      <Shell
-        backPath="/workflows"
-        title={workflow && workflow.name ? workflow.name : "Untitled"}
-        CTA={
-          <div>
-            <Button type="submit">{t("save")}</Button>
-          </div>
-        }
-        heading={
-          session.data?.hasValidLicense &&
-          isAllDataLoaded && (
-            <div className={classNames(workflow && !workflow.name ? "text-gray-400" : "")}>
-              {workflow && workflow.name ? workflow.name : "untitled"}
-            </div>
-          )
-        }>
-        <LicenseRequired>
-          {!isError ? (
-            <>
-              {isAllDataLoaded ? (
-                <>
-                  <WorkflowDetailsPage
-                    form={form}
-                    workflowId={+workflowId}
-                    selectedEventTypes={selectedEventTypes}
-                    setSelectedEventTypes={setSelectedEventTypes}
-                  />
-                </>
-              ) : (
-                <SkeletonLoader />
-              )}
-            </>
-          ) : (
-            <Alert severity="error" title="Something went wrong" message={error.message} />
-          )}
-        </LicenseRequired>
-      </Shell>
-    </Form>
-  ) : (
-    <></>
-  );
-}
-
-export default WorkflowPage;
diff --git a/packages/features/ee/workflows/pages/workflow.tsx b/packages/features/ee/workflows/pages/workflow.tsx
index 639a847c82..69336b91ec 100644
--- a/packages/features/ee/workflows/pages/workflow.tsx
+++ b/packages/features/ee/workflows/pages/workflow.tsx
@@ -13,18 +13,18 @@ import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
+import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { HttpError } from "@calcom/lib/http-error";
 import { stringOrNumber } from "@calcom/prisma/zod-utils";
 import { trpc } from "@calcom/trpc/react";
-import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
-import { Alert } from "@calcom/ui/Alert";
-import { Icon } from "@calcom/ui/Icon";
-import Loader from "@calcom/ui/Loader";
-import Shell from "@calcom/ui/Shell";
-import { Option } from "@calcom/ui/form/MultiSelectCheckboxes";
+import type { MultiSelectCheckboxesOptionType as Option } from "@calcom/ui";
+import { Alert, Button, Form, Shell, showToast } from "@calcom/ui";
 
-import LicenseRequired from "../../common/components/LicenseRequired";
+import LicenseRequired from "../../common/components/v2/LicenseRequired";
+import SkeletonLoader from "../components/SkeletonLoaderEdit";
 import WorkflowDetailsPage from "../components/WorkflowDetailsPage";
+import { getTranslatedText, translateVariablesToEnglish } from "../lib/variableTranslations";
 
 export type FormValues = {
   name: string;
@@ -35,6 +35,13 @@ export type FormValues = {
   timeUnit?: TimeUnit;
 };
 
+export function onlyLettersNumbersSpaces(str: string) {
+  if (str.length <= 11 && /^[A-Za-z0-9\s]*$/.test(str)) {
+    return true;
+  }
+  return false;
+}
+
 const formSchema = z.object({
   name: z.string(),
   activeOn: z.object({ value: z.string(), label: z.string() }).array(),
@@ -50,9 +57,15 @@ const formSchema = z.object({
       reminderBody: z.string().nullable(),
       emailSubject: z.string().nullable(),
       template: z.nativeEnum(WorkflowTemplates),
+      numberRequired: z.boolean().nullable(),
       sendTo: z
         .string()
-        .refine((val) => isValidPhoneNumber(val))
+        .refine((val) => isValidPhoneNumber(val) || val.includes("@"))
+        .nullable(),
+      sender: z
+        .string()
+        .refine((val) => onlyLettersNumbersSpaces(val))
+        .optional()
         .nullable(),
     })
     .array(),
@@ -63,26 +76,25 @@ const querySchema = z.object({
 });
 
 function WorkflowPage() {
-  const { t } = useLocale();
+  const { t, i18n } = useLocale();
   const session = useSession();
   const router = useRouter();
-  const me = useMeQuery();
-  const isFreeUser = me.data?.plan === "FREE";
 
-  const [editIcon, setEditIcon] = useState(true);
   const [selectedEventTypes, setSelectedEventTypes] = useState<Option[]>([]);
   const [isAllDataLoaded, setIsAllDataLoaded] = useState(false);
 
   const form = useForm<FormValues>({
+    mode: "onBlur",
     resolver: zodResolver(formSchema),
   });
+
   const { workflow: workflowId } = router.isReady ? querySchema.parse(router.query) : { workflow: -1 };
+  const utils = trpc.useContext();
 
   const {
     data: workflow,
     isError,
     error,
-    dataUpdatedAt,
   } = trpc.viewer.workflows.get.useQuery(
     { id: +workflowId },
     {
@@ -91,7 +103,7 @@ function WorkflowPage() {
   );
 
   useEffect(() => {
-    if (workflow && !form.getValues("name")) {
+    if (workflow) {
       setSelectedEventTypes(
         workflow.activeOn.map((active) => ({
           value: String(active.eventType.id),
@@ -104,80 +116,127 @@ function WorkflowPage() {
             label: active.eventType.slug,
           }))
         : undefined;
+
+      //translate dynamic variables into local language
+      const steps = workflow.steps.map((step) => {
+        const updatedStep = step;
+        if (step.reminderBody) {
+          updatedStep.reminderBody = getTranslatedText(step.reminderBody || "", {
+            locale: i18n.language,
+            t,
+          });
+        }
+        if (step.emailSubject) {
+          updatedStep.emailSubject = getTranslatedText(step.emailSubject || "", {
+            locale: i18n.language,
+            t,
+          });
+        }
+        return updatedStep;
+      });
+
       form.setValue("name", workflow.name);
-      form.setValue("steps", workflow.steps);
+      form.setValue("steps", steps);
       form.setValue("trigger", workflow.trigger);
       form.setValue("time", workflow.time || undefined);
       form.setValue("timeUnit", workflow.timeUnit || undefined);
       form.setValue("activeOn", activeOn || []);
       setIsAllDataLoaded(true);
     }
-  }, [dataUpdatedAt]);
+  }, [workflow]);
 
-  return (
-    <Shell
-      title="Title"
-      heading={
-        session.data?.hasValidLicense &&
-        isAllDataLoaded && (
-          <div className="group relative cursor-pointer" onClick={() => setEditIcon(false)}>
-            {editIcon ? (
-              <>
-                <h1
-                  style={{ fontSize: 22, letterSpacing: "-0.0009em" }}
-                  className="inline pl-0 text-gray-900 focus:text-black group-hover:text-gray-500">
-                  {form.getValues("name") && form.getValues("name") !== ""
-                    ? form.getValues("name")
-                    : workflow?.name}
-                </h1>
-                <Icon.FiEdit2 className="ml-1 -mt-1 inline h-4 w-4 text-gray-700 group-hover:text-gray-500" />
-              </>
-            ) : (
-              <div style={{ marginBottom: -11 }}>
-                <input
-                  type="text"
-                  autoFocus
-                  style={{ top: -6, fontSize: 22 }}
-                  required
-                  className="relative h-10 w-full cursor-pointer border-none bg-transparent pl-0 text-gray-900 hover:text-gray-700 focus:text-black focus:outline-none focus:ring-0"
-                  placeholder={t("Custom workflow")}
-                  {...form.register("name")}
-                  defaultValue={workflow?.name}
-                  onBlur={() => {
-                    setEditIcon(true);
-                    form.getValues("name") === "" && form.setValue("name", workflow?.name || "");
-                  }}
-                />
-              </div>
-            )}
+  const updateMutation = trpc.viewer.workflows.update.useMutation({
+    onSuccess: async ({ workflow }) => {
+      if (workflow) {
+        utils.viewer.workflows.get.setData({ id: +workflow.id }, workflow);
+
+        showToast(
+          t("workflow_updated_successfully", {
+            workflowName: workflow.name,
+          }),
+          "success"
+        );
+      }
+      await router.push("/workflows");
+    },
+    onError: (err) => {
+      if (err instanceof HttpError) {
+        const message = `${err.statusCode}: ${err.message}`;
+        showToast(message, "error");
+      }
+    },
+  });
+
+  return session.data ? (
+    <Form
+      form={form}
+      handleSubmit={async (values) => {
+        let activeOnEventTypeIds: number[] = [];
+
+        values.steps.forEach((step) => {
+          if (step.reminderBody) {
+            step.reminderBody = translateVariablesToEnglish(step.reminderBody, { locale: i18n.language, t });
+          }
+          if (step.emailSubject) {
+            step.emailSubject = translateVariablesToEnglish(step.emailSubject, { locale: i18n.language, t });
+          }
+        });
+
+        if (values.activeOn) {
+          activeOnEventTypeIds = values.activeOn.map((option) => {
+            return parseInt(option.value, 10);
+          });
+        }
+        updateMutation.mutate({
+          id: parseInt(router.query.workflow as string, 10),
+          name: values.name,
+          activeOn: activeOnEventTypeIds,
+          steps: values.steps,
+          trigger: values.trigger,
+          time: values.time || null,
+          timeUnit: values.timeUnit || null,
+        });
+      }}>
+      <Shell
+        backPath="/workflows"
+        title={workflow && workflow.name ? workflow.name : "Untitled"}
+        CTA={
+          <div>
+            <Button type="submit">{t("save")}</Button>
           </div>
-        )
-      }>
-      <LicenseRequired>
-        {isFreeUser ? (
-          <Alert className="border " severity="warning" title={t("pro_feature_workflows")} />
-        ) : (
-          <>
-            {!isError ? (
-              <>
-                {isAllDataLoaded ? (
+        }
+        heading={
+          session.data?.hasValidLicense &&
+          isAllDataLoaded && (
+            <div className={classNames(workflow && !workflow.name ? "text-gray-400" : "")}>
+              {workflow && workflow.name ? workflow.name : "untitled"}
+            </div>
+          )
+        }>
+        <LicenseRequired>
+          {!isError ? (
+            <>
+              {isAllDataLoaded ? (
+                <>
                   <WorkflowDetailsPage
                     form={form}
                     workflowId={+workflowId}
                     selectedEventTypes={selectedEventTypes}
                     setSelectedEventTypes={setSelectedEventTypes}
                   />
-                ) : (
-                  <Loader />
-                )}
-              </>
-            ) : (
-              <Alert severity="error" title="Something went wrong" message={error.message} />
-            )}
-          </>
-        )}
-      </LicenseRequired>
-    </Shell>
+                </>
+              ) : (
+                <SkeletonLoader />
+              )}
+            </>
+          ) : (
+            <Alert severity="error" title="Something went wrong" message={error.message} />
+          )}
+        </LicenseRequired>
+      </Shell>
+    </Form>
+  ) : (
+    <></>
   );
 }
 
diff --git a/packages/features/schedules/components/NewScheduleButton.tsx b/packages/features/schedules/components/NewScheduleButton.tsx
index 7dc323e769..e8af5aed3b 100644
--- a/packages/features/schedules/components/NewScheduleButton.tsx
+++ b/packages/features/schedules/components/NewScheduleButton.tsx
@@ -4,11 +4,7 @@ import { useForm } from "react-hook-form";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HttpError } from "@calcom/lib/http-error";
 import { trpc } from "@calcom/trpc/react";
-import { Dialog, DialogClose, DialogContent, DialogTrigger } from "@calcom/ui/Dialog";
-import { Icon } from "@calcom/ui/Icon";
-import { Button } from "@calcom/ui/components/button";
-import { Form } from "@calcom/ui/form/fields";
-import showToast from "@calcom/ui/v2/core/notifications";
+import { Button, Dialog, DialogClose, DialogContent, DialogTrigger, Form, Icon, showToast } from "@calcom/ui";
 
 export function NewScheduleButton({ name = "new-schedule" }: { name?: string }) {
   const router = useRouter();
diff --git a/packages/features/schedules/components/Schedule.tsx b/packages/features/schedules/components/Schedule.tsx
index 7aa1b9cc59..ed0e6665a0 100644
--- a/packages/features/schedules/components/Schedule.tsx
+++ b/packages/features/schedules/components/Schedule.tsx
@@ -1,15 +1,15 @@
-import { useCallback, useEffect, useMemo, useState, Fragment } from "react";
-import { Controller, useFieldArray, useFormContext } from "react-hook-form";
+import { Fragment, useCallback, useEffect, useMemo, useState } from "react";
 import type {
-  UseFieldArrayRemove,
-  FieldValues,
+  ArrayPath,
+  Control,
+  ControllerRenderProps,
+  FieldArrayWithId,
   FieldPath,
   FieldPathValue,
-  FieldArrayWithId,
-  ArrayPath,
-  ControllerRenderProps,
-  Control,
+  FieldValues,
+  UseFieldArrayRemove,
 } from "react-hook-form";
+import { Controller, useFieldArray, useFormContext } from "react-hook-form";
 import { GroupBase, Props } from "react-select";
 
 import dayjs, { ConfigType, Dayjs } from "@calcom/dayjs";
@@ -19,11 +19,16 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { weekdayNames } from "@calcom/lib/weekday";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
 import { TimeRange } from "@calcom/types/schedule";
-import { Icon } from "@calcom/ui";
-import Dropdown, { DropdownMenuContent, DropdownMenuTrigger } from "@calcom/ui/Dropdown";
-import { Button } from "@calcom/ui/components/button";
-import { Select, Switch } from "@calcom/ui/v2";
-import { SkeletonText } from "@calcom/ui/v2/core/skeleton";
+import {
+  Button,
+  Dropdown,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  Icon,
+  Select,
+  SkeletonText,
+  Switch,
+} from "@calcom/ui";
 
 export type FieldPathByValue<TFieldValues extends FieldValues, TValue> = {
   [Key in FieldPath<TFieldValues>]: FieldPathValue<TFieldValues, Key> extends TValue ? Key : never;
diff --git a/packages/features/schedules/components/ScheduleListItem.tsx b/packages/features/schedules/components/ScheduleListItem.tsx
index 61bf07783c..83c9aaa326 100644
--- a/packages/features/schedules/components/ScheduleListItem.tsx
+++ b/packages/features/schedules/components/ScheduleListItem.tsx
@@ -5,10 +5,15 @@ import { availabilityAsString } from "@calcom/lib/availability";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Availability } from "@calcom/prisma/client";
 import { RouterOutputs } from "@calcom/trpc/react";
-import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/Dropdown";
-import { Icon } from "@calcom/ui/Icon";
-import { Badge } from "@calcom/ui/components/badge";
-import { Button } from "@calcom/ui/components/button";
+import {
+  Badge,
+  Button,
+  Dropdown,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Icon,
+} from "@calcom/ui";
 
 export function ScheduleListItem({
   schedule,
diff --git a/packages/features/webhooks/components/WebhookForm.tsx b/packages/features/webhooks/components/WebhookForm.tsx
index 5887f0e98c..09fd298967 100644
--- a/packages/features/webhooks/components/WebhookForm.tsx
+++ b/packages/features/webhooks/components/WebhookForm.tsx
@@ -5,11 +5,7 @@ import { Controller, useForm } from "react-hook-form";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { RouterOutputs } from "@calcom/trpc/react";
-import { Button } from "@calcom/ui/components/button";
-import { Form, Label, TextArea, TextField } from "@calcom/ui/components/form";
-import Switch from "@calcom/ui/v2/core/Switch";
-import { ToggleGroup } from "@calcom/ui/v2/core/form/ToggleGroup";
-import Select from "@calcom/ui/v2/core/form/select";
+import { Button, Form, Label, Select, Switch, TextArea, TextField, ToggleGroup } from "@calcom/ui";
 
 import customTemplate, { hasTemplateIntegration } from "../lib/integrationTemplate";
 import WebhookTestDisclosure from "./WebhookTestDisclosure";
diff --git a/packages/features/webhooks/components/WebhookListItem.tsx b/packages/features/webhooks/components/WebhookListItem.tsx
index a92e81f581..94fcc133fd 100644
--- a/packages/features/webhooks/components/WebhookListItem.tsx
+++ b/packages/features/webhooks/components/WebhookListItem.tsx
@@ -1,12 +1,7 @@
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { RouterOutputs, trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui/Icon";
-import { Badge } from "@calcom/ui/components/badge";
-import { Button } from "@calcom/ui/components/button";
-import Switch from "@calcom/ui/v2/core/Switch";
-import { Tooltip } from "@calcom/ui/v2/core/Tooltip";
-import showToast from "@calcom/ui/v2/core/notifications";
+import { Badge, Button, Icon, showToast, Switch, Tooltip } from "@calcom/ui";
 
 export type TWebhook = RouterOutputs["viewer"]["webhook"]["list"][number];
 
diff --git a/packages/features/webhooks/components/WebhookListItemSkeleton.tsx b/packages/features/webhooks/components/WebhookListItemSkeleton.tsx
index 09711aadff..3af3678003 100644
--- a/packages/features/webhooks/components/WebhookListItemSkeleton.tsx
+++ b/packages/features/webhooks/components/WebhookListItemSkeleton.tsx
@@ -1,4 +1,4 @@
-import { SkeletonText } from "@calcom/ui/v2";
+import { SkeletonText } from "@calcom/ui";
 
 export default function WebhookListItemSkeleton() {
   return (
diff --git a/packages/features/webhooks/components/WebhookListSkeleton.tsx b/packages/features/webhooks/components/WebhookListSkeleton.tsx
index 2e77941ea1..9d2be41cc2 100644
--- a/packages/features/webhooks/components/WebhookListSkeleton.tsx
+++ b/packages/features/webhooks/components/WebhookListSkeleton.tsx
@@ -1,4 +1,4 @@
-import { SkeletonContainer } from "@calcom/ui/v2";
+import { SkeletonContainer } from "@calcom/ui";
 
 import WebhookListItemSkeleton from "./WebhookListItemSkeleton";
 
diff --git a/packages/features/webhooks/components/WebhookTestDisclosure.tsx b/packages/features/webhooks/components/WebhookTestDisclosure.tsx
index 8b3a2c7562..6a268dd705 100644
--- a/packages/features/webhooks/components/WebhookTestDisclosure.tsx
+++ b/packages/features/webhooks/components/WebhookTestDisclosure.tsx
@@ -2,10 +2,7 @@ import { useWatch } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui/Icon";
-import { Badge } from "@calcom/ui/components/badge";
-import { Button } from "@calcom/ui/components/button";
-import showToast from "@calcom/ui/v2/core/notifications";
+import { Badge, Button, Icon, showToast } from "@calcom/ui";
 
 export default function WebhookTestDisclosure() {
   const subscriberUrl: string = useWatch({ name: "subscriberUrl" });
diff --git a/packages/features/webhooks/pages/webhook-edit-view.tsx b/packages/features/webhooks/pages/webhook-edit-view.tsx
index 818a0e13c7..c7775fb603 100644
--- a/packages/features/webhooks/pages/webhook-edit-view.tsx
+++ b/packages/features/webhooks/pages/webhook-edit-view.tsx
@@ -3,10 +3,7 @@ import z from "zod";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { SkeletonContainer } from "@calcom/ui/v2";
-import Meta from "@calcom/ui/v2/core/Meta";
-import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
-import showToast from "@calcom/ui/v2/core/notifications";
+import { getSettingsLayout as getLayout, Meta, showToast, SkeletonContainer } from "@calcom/ui";
 
 import WebhookForm, { WebhookFormSubmitData } from "../components/WebhookForm";
 
diff --git a/packages/features/webhooks/pages/webhook-new-view.tsx b/packages/features/webhooks/pages/webhook-new-view.tsx
index 1a732759d1..834bf0a396 100644
--- a/packages/features/webhooks/pages/webhook-new-view.tsx
+++ b/packages/features/webhooks/pages/webhook-new-view.tsx
@@ -2,10 +2,7 @@ import { useRouter } from "next/router";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { SkeletonContainer } from "@calcom/ui/v2";
-import Meta from "@calcom/ui/v2/core/Meta";
-import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
-import showToast from "@calcom/ui/v2/core/notifications";
+import { getSettingsLayout as getLayout, Meta, showToast, SkeletonContainer } from "@calcom/ui";
 
 import WebhookForm, { WebhookFormSubmitData } from "../components/WebhookForm";
 
diff --git a/packages/features/webhooks/pages/webhooks-view.tsx b/packages/features/webhooks/pages/webhooks-view.tsx
index 74994e4aaa..cd01de7562 100644
--- a/packages/features/webhooks/pages/webhooks-view.tsx
+++ b/packages/features/webhooks/pages/webhooks-view.tsx
@@ -4,11 +4,7 @@ import { Suspense } from "react";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui";
-import { Button } from "@calcom/ui/components/button";
-import { EmptyScreen, SkeletonText } from "@calcom/ui/v2";
-import Meta from "@calcom/ui/v2/core/Meta";
-import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
+import { Button, EmptyScreen, getSettingsLayout as getLayout, Icon, Meta, SkeletonText } from "@calcom/ui";
 
 import { WebhookListItem, WebhookListSkeleton } from "../components";
 
diff --git a/packages/tsconfig/base.json b/packages/tsconfig/base.json
index 26743a805a..0d6d7ce8c2 100644
--- a/packages/tsconfig/base.json
+++ b/packages/tsconfig/base.json
@@ -9,7 +9,7 @@
     "forceConsistentCasingInFileNames": true,
     "inlineSources": false,
     "isolatedModules": true,
-    "moduleResolution": "node",
+    "moduleResolution": "Node16",
     "noUnusedLocals": false,
     "noUnusedParameters": false,
     "preserveWatchOutput": true,
diff --git a/packages/ui/ConfirmationDialogContent.tsx b/packages/ui/ConfirmationDialogContent.tsx
index 2261f529ea..7d9713e3c9 100644
--- a/packages/ui/ConfirmationDialogContent.tsx
+++ b/packages/ui/ConfirmationDialogContent.tsx
@@ -7,9 +7,8 @@ import * as DialogPrimitive from "@radix-ui/react-dialog";
 import React, { PropsWithChildren, ReactNode } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button } from "@calcom/ui/Button";
-import { DialogClose, DialogContent } from "@calcom/ui/Dialog";
-import { Icon } from "@calcom/ui/Icon";
+
+import { Button, DialogClose, DialogContent, Icon } from ".";
 
 export type ConfirmationDialogContentProps = {
   confirmBtn?: ReactNode;
diff --git a/packages/ui/EmptyScreen.tsx b/packages/ui/EmptyScreen.tsx
deleted file mode 100644
index 3b7e0b9606..0000000000
--- a/packages/ui/EmptyScreen.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from "react";
-
-import { SVGComponent } from "@calcom/types/SVGComponent";
-
-export default function EmptyScreen({
-  Icon,
-  headline,
-  description,
-  button,
-}: {
-  Icon: SVGComponent;
-  headline: string;
-  description: string | React.ReactElement;
-  button?: React.ReactElement;
-}) {
-  return (
-    <>
-      <div
-        data-testid="empty-screen"
-        className="min-h-80 my-6 flex flex-col items-center justify-center rounded-sm border border-dashed">
-        <div className="flex h-[72px] w-[72px] items-center justify-center rounded-full bg-gray-600 dark:bg-white">
-          <Icon className="inline-block h-10 w-10 text-white dark:bg-white dark:text-gray-600" />
-        </div>
-        <div className="max-w-[420px] text-center">
-          <h2 className="mt-6 mb-1 text-lg font-medium dark:text-gray-300">{headline}</h2>
-          <p className="mb-2 text-sm leading-6 text-gray-600 dark:text-gray-300">{description}</p>
-          {button}
-        </div>
-      </div>
-    </>
-  );
-}
diff --git a/packages/ui/Icon.tsx b/packages/ui/Icon.tsx
index 90336278bf..7932918cff 100644
--- a/packages/ui/Icon.tsx
+++ b/packages/ui/Icon.tsx
@@ -15,4 +15,4 @@ export { StarIcon as StarIconSolid } from "@heroicons/react/solid";
 // I want:
 // export CollectionIcon as Icon.Collection
 // so I can
-// import { Icon } from "@calcom/ui/Icon";
+// import { Icon } from "@calcom/ui";
diff --git a/packages/ui/Kbar.tsx b/packages/ui/Kbar.tsx
index 886ec21142..67b44b6d0b 100644
--- a/packages/ui/Kbar.tsx
+++ b/packages/ui/Kbar.tsx
@@ -1,19 +1,19 @@
 import {
-  KBarProvider,
+  KBarAnimator,
   KBarPortal,
   KBarPositioner,
-  KBarAnimator,
-  KBarSearch,
+  KBarProvider,
   KBarResults,
-  useMatches,
+  KBarSearch,
   useKBar,
+  useMatches,
 } from "kbar";
 import { useRouter } from "next/router";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { isMac } from "@calcom/lib/isMac";
-import { Icon } from "@calcom/ui/Icon";
-import Tooltip from "@calcom/ui/v2/core/Tooltip";
+
+import { Icon, Tooltip } from ".";
 
 type shortcutArrayType = {
   shortcuts?: string[];
diff --git a/packages/ui/List.tsx b/packages/ui/List.tsx
deleted file mode 100644
index 15ecf8f088..0000000000
--- a/packages/ui/List.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import Link from "next/link";
-import { createElement } from "react";
-
-import classNames from "@calcom/lib/classNames";
-
-export function List(props: JSX.IntrinsicElements["ul"]) {
-  return (
-    <ul {...props} className={classNames("-mx-4 rounded-sm sm:mx-0 sm:overflow-hidden", props.className)}>
-      {props.children}
-    </ul>
-  );
-}
-
-export type ListItemProps = { expanded?: boolean } & ({ href?: never } & JSX.IntrinsicElements["li"]);
-
-export function ListItem(props: ListItemProps) {
-  const { href, expanded, ...passThroughProps } = props;
-
-  const elementType = href ? "a" : "li";
-
-  const element = createElement(
-    elementType,
-    {
-      ...passThroughProps,
-      className: classNames(
-        "items-center bg-white min-w-0 flex-1 flex border-gray-200",
-        expanded ? "my-2 border" : "border -mb-px last:mb-0",
-        props.className,
-        (props.onClick || href) && "hover:bg-neutral-50"
-      ),
-    },
-    props.children
-  );
-
-  return href ? (
-    <Link passHref href={href}>
-      {element}
-    </Link>
-  ) : (
-    element
-  );
-}
-
-export function ListItemTitle<TComponent extends keyof JSX.IntrinsicElements = "span">(
-  props: JSX.IntrinsicElements[TComponent] & { component?: TComponent }
-) {
-  const { component = "span", ...passThroughProps } = props;
-
-  return createElement(
-    component,
-    {
-      ...passThroughProps,
-      className: classNames("text-sm font-medium text-neutral-900 truncate", props.className),
-    },
-    props.children
-  );
-}
-
-export function ListItemText<TComponent extends keyof JSX.IntrinsicElements = "span">(
-  props: JSX.IntrinsicElements[TComponent] & { component?: TComponent }
-) {
-  const { component = "span", ...passThroughProps } = props;
-
-  return createElement(
-    component,
-    {
-      ...passThroughProps,
-      className: classNames("text-sm text-gray-500 truncate", props.className),
-    },
-    props.children
-  );
-}
diff --git a/packages/ui/Shell.tsx b/packages/ui/Shell.tsx
index 9a5c73a0d6..dcaaa1b138 100644
--- a/packages/ui/Shell.tsx
+++ b/packages/ui/Shell.tsx
@@ -1,2 +1,11 @@
-export { default } from "@calcom/ui/v2/core/Shell";
-export * from "@calcom/ui/v2/core/Shell";
+export {
+  default,
+  default as Shell,
+  MobileNavigationMoreItems,
+  ONBOARDING_INTRODUCED_AT,
+  ONBOARDING_NEXT_REDIRECT,
+  ShellMain,
+  ShellSubHeading,
+  shouldShowOnboarding,
+} from "./v2/core/Shell";
+export type { NavigationItemType } from "./v2/core/Shell";
diff --git a/packages/ui/Switch.tsx b/packages/ui/Switch.tsx
deleted file mode 100644
index 77cf1ef722..0000000000
--- a/packages/ui/Switch.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { useId } from "@radix-ui/react-id";
-import * as Label from "@radix-ui/react-label";
-import * as PrimitiveSwitch from "@radix-ui/react-switch";
-import React from "react";
-
-const Switch = (
-  props: React.ComponentProps<typeof PrimitiveSwitch.Root> & {
-    label?: string;
-  }
-) => {
-  const { label, ...primitiveProps } = props;
-  const id = useId();
-
-  return (
-    <div className="flex h-[20px] items-center">
-      <PrimitiveSwitch.Root className="h-[20px] w-[36px] rounded-sm bg-gray-400 p-0.5" {...primitiveProps}>
-        <PrimitiveSwitch.Thumb
-          id={id}
-          className="block h-[16px] w-[16px] translate-x-0 bg-white transition-transform"
-        />
-      </PrimitiveSwitch.Root>
-      {label && (
-        <Label.Root
-          htmlFor={id}
-          className="cursor-pointer align-text-top text-sm font-medium text-neutral-700 ltr:ml-3 rtl:mr-3 dark:text-white">
-          {label}
-        </Label.Root>
-      )}
-    </div>
-  );
-};
-
-export default Switch;
diff --git a/packages/ui/TimezoneChangeDialog.tsx b/packages/ui/TimezoneChangeDialog.tsx
index bfdf849925..b9983266bc 100644
--- a/packages/ui/TimezoneChangeDialog.tsx
+++ b/packages/ui/TimezoneChangeDialog.tsx
@@ -1,11 +1,11 @@
 import { useSession } from "next-auth/react";
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 
 import dayjs from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { DialogContent, showToast } from "@calcom/ui/v2";
-import { Dialog } from "@calcom/ui/v2/core/Dialog";
+
+import { Dialog, DialogContent, showToast } from ".";
 
 export default function TimezoneChangeDialog() {
   const { t } = useLocale();
diff --git a/packages/ui/apps/SkeletonLoader.tsx b/packages/ui/apps/SkeletonLoader.tsx
deleted file mode 100644
index 5e0d1fa1c7..0000000000
--- a/packages/ui/apps/SkeletonLoader.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { ShellSubHeading } from "../Shell";
-import { SkeletonText } from "../v2/core/skeleton";
-
-/** @deprecated Use `packages/ui/v2/core/apps/SkeletonLoader.tsx` */
-function SkeletonLoader({ className }: { className?: string }) {
-  return (
-    <>
-      <ShellSubHeading title={<div className="h-6 w-32 bg-gray-100" />} {...{ className }} />
-      <ul className="-mx-4 animate-pulse divide-y divide-neutral-200 rounded-md border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
-        <SkeletonItem />
-        <SkeletonItem />
-        <SkeletonItem />
-      </ul>
-    </>
-  );
-}
-
-export default SkeletonLoader;
-
-function SkeletonItem() {
-  return (
-    <li className="group flex w-full items-center justify-between p-3">
-      <div className="flex-grow truncate text-sm">
-        <div className="flex justify-start space-x-2">
-          <SkeletonText className="h-3 w-3" />
-          <div className="space-y-2">
-            <SkeletonText className="h-1 w-8" />
-            <SkeletonText className="h-1 w-4" />
-          </div>
-        </div>
-      </div>
-      <div className="mt-4 hidden flex-shrink-0 sm:mt-0 sm:ml-5 lg:flex">
-        <div className="flex justify-between space-x-2 rtl:space-x-reverse">
-          <SkeletonText className="h-3 w-8" />
-        </div>
-      </div>
-    </li>
-  );
-}
diff --git a/packages/ui/components/avatar/avatar.stories.mdx b/packages/ui/components/avatar/avatar.stories.mdx
index c006a66a5e..709cb75c8d 100644
--- a/packages/ui/components/avatar/avatar.stories.mdx
+++ b/packages/ui/components/avatar/avatar.stories.mdx
@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
 import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable,VariantRow } from '@calcom/storybook/components'
-import { Icon } from "@calcom/ui/Icon";
+import { Icon } from "@calcom/ui";
 import {Avatar} from './Avatar';
 import {AvatarGroup} from './AvatarGroup';
 
diff --git a/packages/ui/components/avatar/index.ts b/packages/ui/components/avatar/index.ts
index 6758a3ccd2..3080c61055 100644
--- a/packages/ui/components/avatar/index.ts
+++ b/packages/ui/components/avatar/index.ts
@@ -1,2 +1,3 @@
-export * from "./Avatar";
-export * from "./AvatarGroup";
+export { Avatar } from "./Avatar";
+export type { AvatarProps } from "./Avatar";
+export { AvatarGroup } from "./AvatarGroup";
diff --git a/packages/ui/components/badge/Badge.tsx b/packages/ui/components/badge/Badge.tsx
index 819217e469..2da015d269 100644
--- a/packages/ui/components/badge/Badge.tsx
+++ b/packages/ui/components/badge/Badge.tsx
@@ -3,7 +3,7 @@ import { GoPrimitiveDot } from "react-icons/go";
 
 import classNames from "@calcom/lib/classNames";
 
-export const badgeClassNameByVariant = {
+const badgeClassNameByVariant = {
   default: "bg-orange-100 text-orange-800",
   warning: "bg-orange-100 text-orange-800",
   orange: "bg-orange-100 text-orange-800",
diff --git a/packages/ui/components/badge/badge.stories.mdx b/packages/ui/components/badge/badge.stories.mdx
index 999e66bedf..ec8055f3e3 100644
--- a/packages/ui/components/badge/badge.stories.mdx
+++ b/packages/ui/components/badge/badge.stories.mdx
@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
 import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable, VariantRow } from '@calcom/storybook/components'
-import { Icon } from "@calcom/ui/Icon";
+import { Icon } from "@calcom/ui";
 import { Badge } from './Badge';
 
 <Meta title="UI/Badge" component={Badge} />
diff --git a/packages/ui/components/badge/index.ts b/packages/ui/components/badge/index.ts
index ae21190ba6..d172dc35c8 100644
--- a/packages/ui/components/badge/index.ts
+++ b/packages/ui/components/badge/index.ts
@@ -1 +1,2 @@
-export * from "./Badge";
+export { Badge } from "./Badge";
+export type { BadgeProps } from "./Badge";
diff --git a/packages/ui/components/breadcrumb/breadcrumb.stories.mdx b/packages/ui/components/breadcrumb/breadcrumb.stories.mdx
index f80a6754ee..fe743b5bb0 100644
--- a/packages/ui/components/breadcrumb/breadcrumb.stories.mdx
+++ b/packages/ui/components/breadcrumb/breadcrumb.stories.mdx
@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
 import { Examples, Example, Note, Title,CustomArgsTable } from '@calcom/storybook/components'
-import { Icon } from "@calcom/ui/Icon";
+import { Icon } from "@calcom/ui";
 
 import { Breadcrumb } from './Breadcrumb';
 
diff --git a/packages/ui/components/breadcrumb/index.ts b/packages/ui/components/breadcrumb/index.ts
index 3bc34d185a..536aa7c881 100644
--- a/packages/ui/components/breadcrumb/index.ts
+++ b/packages/ui/components/breadcrumb/index.ts
@@ -1 +1 @@
-export * from "./Breadcrumb";
+export { Breadcrumb, BreadcrumbContainer, BreadcrumbItem } from "./Breadcrumb";
diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx
index 6901a4454c..6e61ad9119 100644
--- a/packages/ui/components/button/Button.tsx
+++ b/packages/ui/components/button/Button.tsx
@@ -8,6 +8,8 @@ import { applyStyleToMultipleVariants } from "@calcom/lib/cva";
 
 import Tooltip from "../../v2/core/Tooltip";
 
+type InferredVariantProps = VariantProps<typeof buttonClasses>;
+
 export type ButtonBaseProps = {
   /** Action that happens when the button is clicked */
   onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
@@ -19,7 +21,9 @@ export type ButtonBaseProps = {
   /**Tool tip used when icon size is set to small */
   tooltip?: string;
   flex?: boolean;
-} & VariantProps<typeof buttonClasses>;
+} & Omit<InferredVariantProps, "color"> & {
+    color?: NonNullable<InferredVariantProps["color"]>;
+  };
 
 export type ButtonProps = ButtonBaseProps &
   (
@@ -38,7 +42,8 @@ const buttonClasses = cva(
         destructive: "",
       },
       size: {
-        base: "h-9 px-4 py-2.5  ",
+        sm: "px-3 py-2 leading-4 rounded-sm" /** For backwards compatibility */,
+        base: "h-9 px-4 py-2.5 ",
         lg: "h-[36px] px-4 py-2.5 ",
         icon: "flex justify-center min-h-[36px] min-w-[36px] ",
       },
@@ -138,7 +143,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
 ) {
   const {
     loading = false,
-    color,
+    color = "primary",
     size,
     type = "button",
     StartIcon,
diff --git a/packages/ui/components/button/button.stories.mdx b/packages/ui/components/button/button.stories.mdx
index 49e63f70a3..e7af447208 100644
--- a/packages/ui/components/button/button.stories.mdx
+++ b/packages/ui/components/button/button.stories.mdx
@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
 import { Examples, Example, Note, Title, VariantsTable, VariantColumn, RowTitles, CustomArgsTable} from '@calcom/storybook/components'
-import { Icon } from "@calcom/ui/Icon";
+import { Icon } from "@calcom/ui";
 
 import { Button } from './Button';
 
diff --git a/packages/ui/components/button/index.ts b/packages/ui/components/button/index.ts
index e22c29adcf..22f01084ac 100644
--- a/packages/ui/components/button/index.ts
+++ b/packages/ui/components/button/index.ts
@@ -1 +1,2 @@
-export * from "./Button";
+export { Button } from "./Button";
+export type { ButtonBaseProps, ButtonProps } from "./Button";
diff --git a/packages/ui/components/buttonGroup/buttongroup.stories.mdx b/packages/ui/components/buttonGroup/buttongroup.stories.mdx
index 662148c086..3baee6c3d9 100644
--- a/packages/ui/components/buttonGroup/buttongroup.stories.mdx
+++ b/packages/ui/components/buttonGroup/buttongroup.stories.mdx
@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
 import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable,VariantsRow } from '@calcom/storybook/components'
-import { Icon } from "@calcom/ui/Icon";
+import { Icon } from "@calcom/ui";
 
 import { ButtonGroup} from './ButtonGroup';
 import { Button} from '../button/Button';
diff --git a/packages/ui/components/buttonGroup/index.ts b/packages/ui/components/buttonGroup/index.ts
index d22eaf4c2e..806780255a 100644
--- a/packages/ui/components/buttonGroup/index.ts
+++ b/packages/ui/components/buttonGroup/index.ts
@@ -1 +1 @@
-export * from "./ButtonGroup";
+export { ButtonGroup } from "./ButtonGroup";
diff --git a/packages/ui/components/form/checkbox/checkbox.stories.mdx b/packages/ui/components/form/checkbox/checkbox.stories.mdx
index cea9068d50..089edcd228 100644
--- a/packages/ui/components/form/checkbox/checkbox.stories.mdx
+++ b/packages/ui/components/form/checkbox/checkbox.stories.mdx
@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
 import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable,VariantsRow } from '@calcom/storybook/components'
-import { Icon } from "@calcom/ui/Icon";
+import { Icon } from "@calcom/ui";
 
 import Checkbox from './Checkbox';
 
diff --git a/packages/ui/components/form/index.ts b/packages/ui/components/form/index.ts
index 88cae220de..7dea7d0ac9 100644
--- a/packages/ui/components/form/index.ts
+++ b/packages/ui/components/form/index.ts
@@ -1,4 +1,17 @@
-export * from "./checkbox";
-export * from "./inputs/HintOrErrors";
-export * from "./inputs/Input";
-export * from "./inputs/Label";
+export { Checkbox } from "./checkbox";
+export { HintsOrErrors } from "./inputs/HintOrErrors";
+export {
+  EmailField,
+  EmailInput,
+  FieldsetLegend,
+  Form,
+  Input,
+  InputField,
+  InputGroupBox,
+  InputLeading,
+  PasswordField,
+  TextArea,
+  TextAreaField,
+  TextField,
+} from "./inputs/Input";
+export { Label } from "./inputs/Label";
diff --git a/packages/ui/components/form/inputs/Input.tsx b/packages/ui/components/form/inputs/Input.tsx
index 214761a53b..bea952e6e4 100644
--- a/packages/ui/components/form/inputs/Input.tsx
+++ b/packages/ui/components/form/inputs/Input.tsx
@@ -1,16 +1,12 @@
-import { forwardRef, ReactElement, ReactNode, Ref, useCallback, useId, useState } from "react";
-import React from "react";
+import React, { forwardRef, ReactElement, ReactNode, Ref, useCallback, useId, useState } from "react";
 import { Eye, EyeOff } from "react-feather";
 import { FieldValues, FormProvider, SubmitHandler, useFormContext, UseFormReturn } from "react-hook-form";
 
 import classNames from "@calcom/lib/classNames";
 import { getErrorFromUnknown } from "@calcom/lib/errors";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Alert } from "@calcom/ui/v2/core/Alert";
-import { Tooltip } from "@calcom/ui/v2/core/Tooltip";
-import showToast from "@calcom/ui/v2/core/notifications";
-import { Skeleton } from "@calcom/ui/v2/core/skeleton";
 
+import { Alert, showToast, Skeleton, Tooltip } from "../../..";
 import { HintsOrErrors } from "./HintOrErrors";
 import { Label } from "./Label";
 
diff --git a/packages/ui/components/form/inputs/inputs.stories.mdx b/packages/ui/components/form/inputs/inputs.stories.mdx
index 7acd25cb27..891bfcfac5 100644
--- a/packages/ui/components/form/inputs/inputs.stories.mdx
+++ b/packages/ui/components/form/inputs/inputs.stories.mdx
@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
 import { Examples, Example, Note, Title,CustomArgsTable, VariantRow,VariantsTable} from '@calcom/storybook/components'
-import { Icon } from "@calcom/ui/Icon";
+import { Icon } from "@calcom/ui";
 
 import {InputField} from "./Input"
 
diff --git a/packages/ui/components/index.ts b/packages/ui/components/index.ts
index 2d01c0ba6a..91543fbaa1 100644
--- a/packages/ui/components/index.ts
+++ b/packages/ui/components/index.ts
@@ -1,8 +1,27 @@
-export * from "./avatar";
-export * from "./badge";
-export * from "./breadcrumb";
-export * from "./button";
-export * from "./buttonGroup";
-export * from "./form";
+export { Avatar, AvatarGroup } from "./avatar";
+export type { AvatarProps } from "./avatar";
+export { Badge } from "./badge";
+export type { BadgeProps } from "./badge";
+export { Breadcrumb, BreadcrumbContainer, BreadcrumbItem } from "./breadcrumb";
+export { Button } from "./button";
+export type { ButtonBaseProps, ButtonProps } from "./button";
+export { ButtonGroup } from "./buttonGroup";
+export {
+  Checkbox,
+  EmailField,
+  EmailInput,
+  FieldsetLegend,
+  Form,
+  HintsOrErrors,
+  Input,
+  InputField,
+  InputGroupBox,
+  InputLeading,
+  Label,
+  PasswordField,
+  TextArea,
+  TextAreaField,
+  TextField,
+} from "./form";
 export { TopBanner } from "./top-banner";
 export type { TopBannerProps } from "./top-banner";
diff --git a/packages/ui/components/top-banner/topbanner.stories.mdx b/packages/ui/components/top-banner/topbanner.stories.mdx
index 03849a8243..0868c387b6 100644
--- a/packages/ui/components/top-banner/topbanner.stories.mdx
+++ b/packages/ui/components/top-banner/topbanner.stories.mdx
@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
 import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable, VariantRow } from '@calcom/storybook/components'
-import { Icon } from "@calcom/ui/Icon";
+import { Icon } from "@calcom/ui";
 import { TopBanner } from './TopBanner'
 
 <Meta title="UI/TopBanner" component={TopBanner} />
@@ -63,5 +63,3 @@ Each toast has a state to represent neutral, positive or negative responses.
         />
          </Example>
 </Examples>
-
-
diff --git a/packages/ui/form/TimezoneSelect.tsx b/packages/ui/form/TimezoneSelect.tsx
index 741d7b241e..c13deb23e3 100644
--- a/packages/ui/form/TimezoneSelect.tsx
+++ b/packages/ui/form/TimezoneSelect.tsx
@@ -2,12 +2,12 @@ import classNames from "classnames";
 import { components } from "react-select";
 import BaseSelect, {
   allTimezones,
-  ITimezoneOption,
   ITimezone,
+  ITimezoneOption,
   Props as SelectProps,
 } from "react-timezone-select";
 
-import { InputComponent } from "@calcom/ui/v2/core/form/select/components";
+import { InputComponent } from "../v2/core/form/select/components";
 
 function TimezoneSelect({ className, ...props }: SelectProps) {
   // @TODO: remove borderRadius and haveRoundedClassName logic from theme so we use only new style
diff --git a/packages/ui/form/fields.tsx b/packages/ui/form/fields.tsx
index 3d0777361f..54ff577f5e 100644
--- a/packages/ui/form/fields.tsx
+++ b/packages/ui/form/fields.tsx
@@ -5,9 +5,9 @@ import { FieldValues, FormProvider, SubmitHandler, useFormContext, UseFormReturn
 import classNames from "@calcom/lib/classNames";
 import { getErrorFromUnknown } from "@calcom/lib/errors";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import showToast from "@calcom/ui/v2/core/notifications";
 
 import { Alert } from "../Alert";
+import { showToast } from "../v2/core/notifications";
 
 type InputProps = Omit<JSX.IntrinsicElements["input"], "name"> & { name: string };
 
diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx
index faaeee9dc4..ee7b108100 100644
--- a/packages/ui/index.tsx
+++ b/packages/ui/index.tsx
@@ -1,7 +1,122 @@
-export { default as Button } from "./Button";
-export { default as EmptyScreen } from "./EmptyScreen";
+export {
+  Avatar,
+  AvatarGroup,
+  Badge,
+  Breadcrumb,
+  BreadcrumbContainer,
+  BreadcrumbItem,
+  Button,
+  ButtonGroup,
+  Checkbox,
+  EmailField,
+  EmailInput,
+  FieldsetLegend,
+  Form,
+  HintsOrErrors,
+  Input,
+  InputField,
+  InputGroupBox,
+  InputLeading,
+  Label,
+  PasswordField,
+  TextArea,
+  TextAreaField,
+  TextField,
+  TopBanner,
+} from "./components";
+export type { AvatarProps, BadgeProps, ButtonBaseProps, ButtonProps, TopBannerProps } from "./components";
+export { default as CheckboxField } from "./components/form/checkbox/Checkbox";
+/** ⬇️ TODO - Move these to components */
+export { default as ErrorBoundary } from "./ErrorBoundary";
+export { default as AddressInput } from "./form/AddressInputLazy";
+export { default as PhoneInput } from "./form/PhoneInputLazy";
 export { default as Select } from "./form/Select";
+export { BadgeCheckIcon, ClipboardCopyIcon, Icon, ShieldCheckIcon, StarIconSolid } from "./Icon";
 export { default as Loader } from "./Loader";
-export { default as Switch } from "./Switch";
-export { default as Tooltip } from "./Tooltip";
-export * from "./Icon";
+export { default as Shell, ShellMain } from "./Shell";
+export { default as TimezoneChangeDialog } from "./TimezoneChangeDialog";
+// export { default as Tooltip } from "./Tooltip";
+export {
+  Alert,
+  CheckedTeamSelect,
+  CustomInputItem,
+  EmptyScreen,
+  HorizontalTabs,
+  SelectField,
+  SelectWithValidation,
+  SettingsToggle,
+  showToast,
+  SkeletonAvatar,
+  SkeletonButton,
+  SkeletonContainer,
+  SkeletonText,
+  Swatch,
+  Switch,
+  VerticalTabs,
+} from "./v2";
+export type { AlertProps } from "./v2";
+export { getReactSelectProps, Segment, SegmentOption } from "./v2/core";
+export { default as AllApps } from "./v2/core/apps/AllApps";
+export { default as AppCard } from "./v2/core/apps/AppCard";
+export { default as AppStoreCategories } from "./v2/core/apps/Categories";
+export { default as SkeletonLoader } from "./v2/core/apps/SkeletonLoader";
+export { default as TrendingAppsSlider } from "./v2/core/apps/TrendingAppsSlider";
+export { default as Banner } from "./v2/core/banner";
+export { default as ColorPicker } from "./v2/core/colorpicker";
+export { default as ConfirmationDialogContent } from "./v2/core/ConfirmationDialogContent";
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTrigger,
+} from "./v2/core/Dialog";
+export type { DialogProps } from "./v2/core/Dialog";
+export { default as Divider } from "./v2/core/Divider";
+export {
+  Dropdown,
+  DropdownItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "./v2/core/Dropdown";
+export { RadioGroup } from "./v2/core/form";
+export { BooleanToggleGroupField } from "./v2/core/form/BooleanToggleGroup";
+export { default as DateRangePicker } from "./v2/core/form/date-range-picker/DateRangePicker";
+export { default as DatePickerField } from "./v2/core/form/DatePicker";
+export { default as FormCard } from "./v2/core/form/FormCard";
+export { default as MultiSelectCheckboxes } from "./v2/core/form/MultiSelectCheckboxes";
+export type { Option as MultiSelectCheckboxesOptionType } from "./v2/core/form/MultiSelectCheckboxes";
+export { ToggleGroup } from "./v2/core/form/ToggleGroup";
+export { default as ImageUploader } from "./v2/core/ImageUploader";
+export { default as AdminLayout, getLayout as getAdminLayout } from "./v2/core/layouts/AdminLayout";
+export { default as AppsLayout } from "./v2/core/layouts/AppsLayout";
+export { default as BookingLayout } from "./v2/core/layouts/BookingLayout";
+export { default as InstalledAppsLayout } from "./v2/core/layouts/InstalledAppsLayout";
+export { default as SettingsLayout, getLayout as getSettingsLayout } from "./v2/core/layouts/SettingsLayout";
+export { default as WizardLayout, getLayout as getWizardLayout } from "./v2/core/layouts/WizardLayout";
+export { default as LinkIconButton } from "./v2/core/LinkIconButton";
+export { List, ListItem, ListItemText, ListItemTitle, ListLinkItem } from "./v2/core/List";
+export { default as MeetingTimeInTimezones } from "./v2/core/MeetingTimeInTimezones";
+export { default as Meta, MetaProvider } from "./v2/core/Meta";
+export { MobileNavigationMoreItems, ShellSubHeading } from "./v2/core/Shell";
+export { Skeleton } from "./v2/core/skeleton";
+export { StepCard } from "./v2/core/StepCard";
+export { default as Stepper } from "./v2/core/Stepper";
+export { Steps } from "./v2/core/Steps";
+export { default as TimezoneSelect } from "./v2/core/TimezoneSelect";
+export type { ITimezone, ITimezoneOption } from "./v2/core/TimezoneSelect";
+export { Tooltip } from "./v2/core/Tooltip";
+export { default as VerticalDivider } from "./v2/core/VerticalDivider";
+export { default as WizardForm } from "./v2/core/WizardForm";
+export { default as SAMLLogin } from "./v2/modules/auth/SAMLLogin";
+export { default as DatePicker } from "./v2/modules/booker/DatePicker";
+export { EventTypeDescriptionLazy } from "./v2/modules/event-types";
+export { default as CreateEventTypeButton } from "./v2/modules/event-types/CreateEventType";
+export { EventTypeDescription } from "./v2/modules/event-types/EventTypeDescription";
+export { default as DisconnectIntegration } from "./v2/modules/integrations/DisconnectIntegration";
+export { default as Tips } from "./v2/modules/tips/Tips";
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 912aeb5e78..3ccafa4fa2 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -3,6 +3,7 @@
   "sideEffects": false,
   "version": "0.0.0",
   "main": "./index.tsx",
+  "exports": "./index.tsx",
   "types": "./index.tsx",
   "license": "MIT",
   "scripts": {
diff --git a/packages/ui/v2/core/ConfirmationDialogContent.tsx b/packages/ui/v2/core/ConfirmationDialogContent.tsx
index bd1142c585..66c3c138d0 100644
--- a/packages/ui/v2/core/ConfirmationDialogContent.tsx
+++ b/packages/ui/v2/core/ConfirmationDialogContent.tsx
@@ -2,9 +2,10 @@ import * as DialogPrimitive from "@radix-ui/react-dialog";
 import React, { PropsWithChildren, ReactNode } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui/Icon";
-import { Button } from "@calcom/ui/components";
-import { DialogClose, DialogContent } from "@calcom/ui/v2";
+
+import { Icon } from "../../Icon";
+import { Button } from "../../components";
+import { DialogClose, DialogContent } from "./Dialog";
 
 export type ConfirmationDialogContentProps = {
   confirmBtn?: ReactNode;
diff --git a/packages/ui/v2/core/Dialog.tsx b/packages/ui/v2/core/Dialog.tsx
index 37ba6329fa..3e45fb0615 100644
--- a/packages/ui/v2/core/Dialog.tsx
+++ b/packages/ui/v2/core/Dialog.tsx
@@ -65,7 +65,7 @@ export function Dialog(props: DialogProps) {
 }
 type DialogContentProps = React.ComponentProps<typeof DialogPrimitive["Content"]> & {
   size?: "xl" | "lg" | "md";
-  type: "creation" | "confirmation";
+  type?: "creation" | "confirmation";
   title?: string;
   description?: string | JSX.Element | undefined;
   closeText?: string;
@@ -80,7 +80,10 @@ type DialogContentProps = React.ComponentProps<typeof DialogPrimitive["Content"]
 };
 
 export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(
-  ({ children, title, Icon, actionProps, useOwnActionButtons, ...props }, forwardedRef) => {
+  (
+    { children, title, Icon, actionProps, useOwnActionButtons, type = "creation", ...props },
+    forwardedRef
+  ) => {
     const { t } = useLocale();
 
     return (
@@ -102,14 +105,14 @@ export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps
             `${props.className || ""}`
           )}
           ref={forwardedRef}>
-          {props.type === "creation" && (
+          {type === "creation" && (
             <div>
               {title && <DialogHeader title={title} />}
               {props.description && <p className="pb-5 text-sm text-gray-500">{props.description}</p>}
               <div className="flex flex-col space-y-6">{children}</div>
             </div>
           )}
-          {props.type === "confirmation" && (
+          {type === "confirmation" && (
             <div className="flex">
               {Icon && (
                 <div className="mr-4 inline-flex h-10 w-10 items-center justify-center rounded-full bg-gray-300">
diff --git a/packages/ui/v2/core/ImageUploader.tsx b/packages/ui/v2/core/ImageUploader.tsx
index 8f106c43fc..a2c6749a57 100644
--- a/packages/ui/v2/core/ImageUploader.tsx
+++ b/packages/ui/v2/core/ImageUploader.tsx
@@ -3,8 +3,8 @@ import { FormEvent, useCallback, useEffect, useState } from "react";
 import Cropper from "react-easy-crop";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Dialog, DialogClose, DialogContent, DialogTrigger } from "@calcom/ui/Dialog";
-import { Button } from "@calcom/ui/components/button";
+
+import { Button, Dialog, DialogClose, DialogContent, DialogTrigger } from "../../";
 
 type ReadAsMethod = "readAsText" | "readAsDataURL" | "readAsArrayBuffer" | "readAsBinaryString";
 
diff --git a/packages/ui/v2/core/PageHeader.tsx b/packages/ui/v2/core/PageHeader.tsx
index 00383f48f1..a0d43654bb 100644
--- a/packages/ui/v2/core/PageHeader.tsx
+++ b/packages/ui/v2/core/PageHeader.tsx
@@ -1,12 +1,12 @@
 import { ReactNode } from "react";
 
-import { Badge, badgeClassNameByVariant } from "../../components/badge";
+import { Badge, BadgeProps } from "../../components/badge";
 
 type Props = {
   title: string;
   description?: string;
   badgeText?: string;
-  badgeVariant?: keyof typeof badgeClassNameByVariant;
+  badgeVariant?: BadgeProps["variant"];
   infoIcon?: string;
   rightAlignedComponent?: ReactNode;
 };
diff --git a/packages/ui/v2/core/Shell.tsx b/packages/ui/v2/core/Shell.tsx
index 1544cd8d4d..2267e94ce2 100644
--- a/packages/ui/v2/core/Shell.tsx
+++ b/packages/ui/v2/core/Shell.tsx
@@ -21,18 +21,20 @@ import isCalcom from "@calcom/lib/isCalcom";
 import { trpc } from "@calcom/trpc/react";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
 import { SVGComponent } from "@calcom/types/SVGComponent";
-import Dropdown, {
+
+import {
+  Button,
+  Dropdown,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuPortal,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@calcom/ui/Dropdown";
-import { Icon } from "@calcom/ui/Icon";
-import TimezoneChangeDialog from "@calcom/ui/TimezoneChangeDialog";
-import { Button } from "@calcom/ui/components/button";
-import showToast from "@calcom/ui/v2/core/notifications";
-import Tips from "@calcom/ui/v2/modules/tips/Tips";
+  Icon,
+  showToast,
+  TimezoneChangeDialog,
+  Tips,
+} from "../..";
 
 /* TODO: Get this from endpoint */
 import pkg from "../../../../apps/web/package.json";
diff --git a/packages/ui/v2/core/TableActions.tsx b/packages/ui/v2/core/TableActions.tsx
index 37addd32fc..eb85f4f05e 100644
--- a/packages/ui/v2/core/TableActions.tsx
+++ b/packages/ui/v2/core/TableActions.tsx
@@ -1,15 +1,16 @@
 import React, { FC } from "react";
 
 import { SVGComponent } from "@calcom/types/SVGComponent";
-import { Icon } from "@calcom/ui/Icon";
-import { Button } from "@calcom/ui/components/button";
+
 import {
+  Button,
+  Dropdown,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuTrigger,
   DropdownMenuPortal,
-} from "@calcom/ui/v2/core/Dropdown";
-import Dropdown from "@calcom/ui/v2/core/Dropdown";
+  DropdownMenuTrigger,
+  Icon,
+} from "../..";
 
 export type ActionType = {
   id: string;
diff --git a/packages/ui/v2/core/TimezoneSelect.tsx b/packages/ui/v2/core/TimezoneSelect.tsx
index 4eff91daec..9cdf77a97b 100644
--- a/packages/ui/v2/core/TimezoneSelect.tsx
+++ b/packages/ui/v2/core/TimezoneSelect.tsx
@@ -6,7 +6,7 @@ import BaseSelect, {
   Props as SelectProps,
 } from "react-timezone-select";
 
-import { getReactSelectProps } from "@calcom/ui/v2/core/form/select";
+import { getReactSelectProps } from "../..";
 
 function TimezoneSelect({ className, components, ...props }: SelectProps) {
   const reactSelectProps = useMemo(() => {
diff --git a/packages/ui/v2/core/WizardForm.tsx b/packages/ui/v2/core/WizardForm.tsx
index 5b2f56d272..4c10f09bc9 100644
--- a/packages/ui/v2/core/WizardForm.tsx
+++ b/packages/ui/v2/core/WizardForm.tsx
@@ -1,8 +1,8 @@
 import { useRouter } from "next/router";
 
 import classNames from "@calcom/lib/classNames";
-import { Button } from "@calcom/ui/components/button";
-import Stepper from "@calcom/ui/v2/core/Stepper";
+
+import { Button, Stepper } from "../..";
 
 type DefaultStep = {
   title: string;
diff --git a/packages/ui/v2/core/apps/AppCard.tsx b/packages/ui/v2/core/apps/AppCard.tsx
index 9f4986271f..aad7a2e0d1 100644
--- a/packages/ui/v2/core/apps/AppCard.tsx
+++ b/packages/ui/v2/core/apps/AppCard.tsx
@@ -5,9 +5,9 @@ import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
 import { InstallAppButton } from "@calcom/app-store/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { App } from "@calcom/types/App";
-import { Icon } from "@calcom/ui/Icon";
-import { Button } from "@calcom/ui/components/button";
-import { showToast } from "@calcom/ui/v2";
+
+import { Button, Icon } from "../../..";
+import { showToast } from "../notifications";
 
 interface AppCardProps {
   app: App;
@@ -71,6 +71,7 @@ export default function AppCard({ app, credentials }: AppCardProps) {
                 render={({ useDefaultComponent, ...props }) => {
                   if (useDefaultComponent) {
                     props = {
+                      ...props,
                       onClick: () => {
                         mutation.mutate({ type: app.type, variant: app.variant, slug: app.slug });
                       },
@@ -97,11 +98,14 @@ export default function AppCard({ app, credentials }: AppCardProps) {
                 render={({ useDefaultComponent, ...props }) => {
                   if (useDefaultComponent) {
                     props = {
+                      ...props,
                       onClick: () => {
                         mutation.mutate({ type: app.type, variant: app.variant, slug: app.slug });
                       },
                     };
                   }
+                  props.color;
+                  //     ^?
                   return (
                     <Button
                       StartIcon={Icon.FiPlus}
diff --git a/packages/ui/v2/core/apps/Slider.tsx b/packages/ui/v2/core/apps/Slider.tsx
index 041563f250..143e809489 100644
--- a/packages/ui/v2/core/apps/Slider.tsx
+++ b/packages/ui/v2/core/apps/Slider.tsx
@@ -4,8 +4,8 @@ import "@glidejs/glide/dist/css/glide.theme.min.css";
 import { useEffect, useRef } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui/Icon";
 
+import { Icon } from "../../..";
 import { SkeletonText } from "../skeleton";
 
 const Slider = <T extends string | unknown>({
diff --git a/packages/ui/v2/core/colorpicker.tsx b/packages/ui/v2/core/colorpicker.tsx
index 37a86120c1..c12268dc2b 100644
--- a/packages/ui/v2/core/colorpicker.tsx
+++ b/packages/ui/v2/core/colorpicker.tsx
@@ -1,9 +1,9 @@
-import { useCallback, useRef, useState } from "react";
-import { useEffect } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { HexColorInput, HexColorPicker } from "react-colorful";
 
-import { isValidHexCode, fallBackHex } from "@calcom/lib/CustomBranding";
-import Swatch from "@calcom/ui/v2/core/Swatch";
+import { fallBackHex, isValidHexCode } from "@calcom/lib/CustomBranding";
+
+import { Swatch } from "../..";
 
 type Handler = (event: MouseEvent | Event) => void;
 function useEventListener<
diff --git a/packages/ui/v2/core/form/FormCard.tsx b/packages/ui/v2/core/form/FormCard.tsx
index 3dcb774cc1..2846b50455 100644
--- a/packages/ui/v2/core/form/FormCard.tsx
+++ b/packages/ui/v2/core/form/FormCard.tsx
@@ -1,6 +1,6 @@
 import { classNames } from "@calcom/lib";
-import { Icon } from "@calcom/ui/Icon";
 
+import { Icon } from "../../..";
 import Divider from "../Divider";
 
 type Action = { check: () => boolean; fn: () => void };
diff --git a/packages/ui/v2/core/form/date-range-picker/DateRangePicker.tsx b/packages/ui/v2/core/form/date-range-picker/DateRangePicker.tsx
index f945ad3719..233bd9548f 100644
--- a/packages/ui/v2/core/form/date-range-picker/DateRangePicker.tsx
+++ b/packages/ui/v2/core/form/date-range-picker/DateRangePicker.tsx
@@ -1,10 +1,9 @@
 // @see: https://github.com/wojtekmaj/react-daterange-picker/issues/91
 import "@wojtekmaj/react-daterange-picker/dist/DateRangePicker.css";
 import PrimitiveDateRangePicker from "@wojtekmaj/react-daterange-picker/dist/entry.nostyle";
-import React from "react";
 
-import { Icon } from "@calcom/ui/Icon";
-import "@calcom/ui/v2/core/form/date-range-picker/styles.css";
+import { Icon } from "../../../..";
+import "./styles.css";
 
 type Props = {
   disabled?: boolean | undefined;
diff --git a/packages/ui/v2/core/form/index.ts b/packages/ui/v2/core/form/index.ts
index 5049b54846..93e21c7c8d 100644
--- a/packages/ui/v2/core/form/index.ts
+++ b/packages/ui/v2/core/form/index.ts
@@ -1,4 +1,4 @@
-export * from "./radio-area";
+export { RadioGroup, /* TODO: solve this conflict -> Select, */ Radio } from "./radio-area";
 export { default as Checkbox } from "../../../components/form/checkbox/Checkbox";
 export { default as DatePicker } from "./DatePicker";
 export { default as Select, SelectWithValidation, SelectField, getReactSelectProps } from "./select";
diff --git a/packages/ui/v2/core/form/radio-area/Select.tsx b/packages/ui/v2/core/form/radio-area/Select.tsx
index a578a5a9f7..90b8035f80 100644
--- a/packages/ui/v2/core/form/radio-area/Select.tsx
+++ b/packages/ui/v2/core/form/radio-area/Select.tsx
@@ -4,7 +4,8 @@ import React from "react";
 
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { RadioArea, RadioAreaGroup } from "@calcom/ui/v2/core/form/radio-area/RadioAreaGroup";
+
+import { RadioArea, RadioAreaGroup } from "./RadioAreaGroup";
 
 interface OptionProps
   extends Pick<React.OptionHTMLAttributes<HTMLOptionElement>, "value" | "label" | "className"> {
diff --git a/packages/ui/v2/core/form/select/components.tsx b/packages/ui/v2/core/form/select/components.tsx
index 8610c767bb..ac7a003235 100644
--- a/packages/ui/v2/core/form/select/components.tsx
+++ b/packages/ui/v2/core/form/select/components.tsx
@@ -12,7 +12,8 @@ import {
 } from "react-select";
 
 import { classNames } from "@calcom/lib";
-import { Icon } from "@calcom/ui/Icon";
+
+import { Icon } from "../../../..";
 
 export const InputComponent = <
   Option,
diff --git a/packages/ui/v2/core/index.ts b/packages/ui/v2/core/index.ts
index 921d0b55a7..16e81e93c3 100644
--- a/packages/ui/v2/core/index.ts
+++ b/packages/ui/v2/core/index.ts
@@ -1,29 +1,58 @@
-export * from "./Alert";
-export * from "./Card";
-export * from "./Dialog";
-export { default as Dropdown } from "./Dropdown";
-export * from "./Dropdown";
+export { Alert } from "./Alert";
+export type { AlertProps } from "./Alert";
+export { default as Banner } from "./banner";
+export { Card } from "./Card";
+export type { BaseCardProps } from "./Card";
+export { default as ColorPicker } from "./colorpicker";
+export { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader, DialogTrigger } from "./Dialog";
+export type { DialogProps } from "./Dialog";
+export {
+  ButtonOrLink,
+  Dropdown,
+  DropdownItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  DropdownMenuTriggerItem,
+} from "./Dropdown";
 export { default as EmptyScreen } from "./EmptyScreen";
+export {
+  Checkbox,
+  DatePicker,
+  FormStep,
+  getReactSelectProps,
+  Radio,
+  RadioGroup,
+  Select,
+  SelectField,
+  SelectWithValidation,
+} from "./form";
+export { default as LinkIconButton } from "./LinkIconButton";
+export { List, ListItem } from "./List";
+export type { ListItemProps } from "./List";
 export { default as Loader } from "./Loader";
 export { default as MeetingTimeInTimezones } from "./MeetingTimeInTimezones";
+export type { HorizontalTabItemProps } from "./navigation/tabs/HorizontalTabItem";
+export { default as HorizontalTabs, HorizontalTabItem } from "./navigation/tabs/HorizontalTabs";
+export type { VerticalTabItemProps } from "./navigation/tabs/VerticalTabItem";
+export { default as VerticalTabs, VerticalTabItem } from "./navigation/tabs/VerticalTabs";
+export { default as showToast } from "./notifications";
 export { default as PageHeader } from "./PageHeader";
+export { Portal } from "./Portal";
+export { Segment, SegmentOption } from "./Segment";
+export { default as SettingsToggle } from "./SettingsToggle";
 export { default as Shell } from "./Shell";
+export { Skeleton, SkeletonAvatar, SkeletonButton, SkeletonContainer, SkeletonText } from "./skeleton";
 export { default as Stepper } from "./Stepper";
 export { default as Swatch } from "./Swatch";
 export { default as Switch } from "./Switch";
 export { default as Tooltip } from "./Tooltip";
-export { default as WizardForm } from "./WizardForm";
-export { default as Banner } from "./banner";
-export { default as ColorPicker } from "./colorpicker";
-export * from "./form";
-export { default as showToast } from "./notifications";
-export { default as LinkIconButton } from "./LinkIconButton";
 export { default as VerticalDivider } from "./VerticalDivider";
-export * from "./skeleton";
-export { default as VerticalTabs, VerticalTabItem } from "./navigation/tabs/VerticalTabs";
-export { default as HorizontalTabs, HorizontalTabItem } from "./navigation/tabs/HorizontalTabs";
-export type { VerticalTabItemProps } from "./navigation/tabs/VerticalTabItem";
-export type { HorizontalTabItemProps } from "./navigation/tabs/HorizontalTabItem";
-export * from "./Portal";
-export * from "./Segment";
-export { default as SettingsToggle } from "./SettingsToggle";
+export { default as WizardForm } from "./WizardForm";
diff --git a/packages/ui/v2/core/layouts/BookingLayout.tsx b/packages/ui/v2/core/layouts/BookingLayout.tsx
index a7f67de982..bf7eecd3fc 100644
--- a/packages/ui/v2/core/layouts/BookingLayout.tsx
+++ b/packages/ui/v2/core/layouts/BookingLayout.tsx
@@ -1,10 +1,8 @@
 import React, { ComponentProps } from "react";
 
-import { Icon } from "@calcom/ui";
-import HorizontalTabs from "@calcom/ui/v2/core/navigation/tabs/HorizontalTabs";
-import type { VerticalTabItemProps } from "@calcom/ui/v2/core/navigation/tabs/VerticalTabItem";
-import VerticalTabs from "@calcom/ui/v2/core/navigation/tabs/VerticalTabs";
-
+import type { VerticalTabItemProps } from "../";
+import { HorizontalTabs, VerticalTabs } from "../";
+import { Icon } from "../../../Icon";
 import Shell from "../Shell";
 import type { HorizontalTabItemProps } from "../navigation/tabs/HorizontalTabItem";
 
diff --git a/packages/ui/v2/core/layouts/SettingsLayout.tsx b/packages/ui/v2/core/layouts/SettingsLayout.tsx
index a798713b4c..21635ecb5d 100644
--- a/packages/ui/v2/core/layouts/SettingsLayout.tsx
+++ b/packages/ui/v2/core/layouts/SettingsLayout.tsx
@@ -6,16 +6,12 @@ import { useRouter } from "next/router";
 import React, { ComponentProps, useEffect, useState } from "react";
 
 import { classNames } from "@calcom/lib";
-import { WEBAPP_URL } from "@calcom/lib/constants";
-import { HOSTED_CAL_FEATURES } from "@calcom/lib/constants";
+import { HOSTED_CAL_FEATURES, WEBAPP_URL } from "@calcom/lib/constants";
 import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Button } from "@calcom/ui/components/button";
 
-import ErrorBoundary from "../../../ErrorBoundary";
-import { Icon } from "../../../Icon";
-import { Badge } from "../../../components/badge";
+import { Badge, Button, ErrorBoundary, Icon } from "../../..";
 import { useMeta } from "../Meta";
 import Shell from "../Shell";
 import { VerticalTabItemProps } from "../navigation/tabs/VerticalTabItem";
diff --git a/packages/ui/v2/core/layouts/WizardLayout.tsx b/packages/ui/v2/core/layouts/WizardLayout.tsx
index b090fbb4b6..08e17bb690 100644
--- a/packages/ui/v2/core/layouts/WizardLayout.tsx
+++ b/packages/ui/v2/core/layouts/WizardLayout.tsx
@@ -3,8 +3,7 @@ import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
 import { Toaster } from "react-hot-toast";
 
-import { StepCard } from "@calcom/ui/v2/core/StepCard";
-import { Steps } from "@calcom/ui/v2/core/Steps";
+import { StepCard, Steps } from "../../..";
 
 export default function WizardLayout({
   children,
diff --git a/packages/ui/v2/core/navigation/tabs/VerticalTabItem.tsx b/packages/ui/v2/core/navigation/tabs/VerticalTabItem.tsx
index 2b0a02b0ce..d0d147da42 100644
--- a/packages/ui/v2/core/navigation/tabs/VerticalTabItem.tsx
+++ b/packages/ui/v2/core/navigation/tabs/VerticalTabItem.tsx
@@ -5,8 +5,8 @@ import { ComponentProps, Fragment } from "react";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { SVGComponent } from "@calcom/types/SVGComponent";
-import { Icon } from "@calcom/ui/Icon";
 
+import { Icon } from "../../../..";
 import { Skeleton } from "../../skeleton";
 
 export type VerticalTabItemProps = {
diff --git a/packages/ui/v2/core/notifications.tsx b/packages/ui/v2/core/notifications.tsx
index 6b78b63586..30faf30bbe 100644
--- a/packages/ui/v2/core/notifications.tsx
+++ b/packages/ui/v2/core/notifications.tsx
@@ -2,7 +2,7 @@ import classNames from "classnames";
 import { Check, Info } from "react-feather";
 import toast from "react-hot-toast";
 
-export default function showToast(message: string, variant: "success" | "warning" | "error") {
+export function showToast(message: string, variant: "success" | "warning" | "error") {
   switch (variant) {
     case "success":
       toast.custom(
@@ -66,3 +66,4 @@ export default function showToast(message: string, variant: "success" | "warning
       break;
   }
 }
+export default showToast;
diff --git a/packages/ui/v2/index.ts b/packages/ui/v2/index.ts
index 8c3b5fc59b..14e128a437 100644
--- a/packages/ui/v2/index.ts
+++ b/packages/ui/v2/index.ts
@@ -1,2 +1,3 @@
+/* TODO: Make this index explicit */
 export * from "./core";
 export * from "./modules";
diff --git a/packages/ui/v2/modules/auth/SAMLLogin.tsx b/packages/ui/v2/modules/auth/SAMLLogin.tsx
index abc2bb04cc..3689a226e3 100644
--- a/packages/ui/v2/modules/auth/SAMLLogin.tsx
+++ b/packages/ui/v2/modules/auth/SAMLLogin.tsx
@@ -7,8 +7,8 @@ import { HOSTED_CAL_FEATURES } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui";
-import { Button } from "@calcom/ui/components/button";
+
+import { Button, Icon } from "../../..";
 
 interface Props {
   samlTenantID: string;
diff --git a/packages/ui/v2/modules/booker/DatePicker.tsx b/packages/ui/v2/modules/booker/DatePicker.tsx
index 0ddbcda191..4b7a2fd2f2 100644
--- a/packages/ui/v2/modules/booker/DatePicker.tsx
+++ b/packages/ui/v2/modules/booker/DatePicker.tsx
@@ -6,7 +6,8 @@ import classNames from "@calcom/lib/classNames";
 import { daysInMonth, yyyymmdd } from "@calcom/lib/date-fns";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { weekdayNames } from "@calcom/lib/weekday";
-import { SkeletonText } from "@calcom/ui/v2";
+
+import { SkeletonText } from "../../..";
 
 export type DatePickerProps = {
   /** which day of the week to render the calendar. Usually Sunday (=0) or Monday (=1) - default: Sunday */
diff --git a/packages/ui/v2/modules/event-types/CheckedTeamSelect.tsx b/packages/ui/v2/modules/event-types/CheckedTeamSelect.tsx
index 4e85729d86..f74082a9c7 100644
--- a/packages/ui/v2/modules/event-types/CheckedTeamSelect.tsx
+++ b/packages/ui/v2/modules/event-types/CheckedTeamSelect.tsx
@@ -3,10 +3,8 @@ import { Props } from "react-select";
 
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui/Icon";
 
-import { Avatar } from "../../../components";
-import { Select } from "../../core/form";
+import { Avatar, Icon, Select } from "../../..";
 
 type CheckedSelectOption = {
   avatar: string;
diff --git a/packages/ui/v2/modules/event-types/CreateEventType.tsx b/packages/ui/v2/modules/event-types/CreateEventType.tsx
index 4871487e7f..20fc0059a1 100644
--- a/packages/ui/v2/modules/event-types/CreateEventType.tsx
+++ b/packages/ui/v2/modules/event-types/CreateEventType.tsx
@@ -13,21 +13,27 @@ import { HttpError } from "@calcom/lib/http-error";
 import slugify from "@calcom/lib/slugify";
 import { createEventTypeInput } from "@calcom/prisma/zod/custom/eventtype";
 import { trpc } from "@calcom/trpc/react";
-import { Alert } from "@calcom/ui/Alert";
-import { Icon } from "@calcom/ui/Icon";
-import { Avatar } from "@calcom/ui/components/avatar";
-import { Button } from "@calcom/ui/components/button";
-import { Form, TextAreaField, TextField } from "@calcom/ui/components/form";
-import { Dialog, DialogClose, DialogContent } from "@calcom/ui/v2/core/Dialog";
-import Dropdown, {
+
+import {
+  Alert,
+  Avatar,
+  Button,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  Dropdown,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@calcom/ui/v2/core/Dropdown";
-import * as RadioArea from "@calcom/ui/v2/core/form/radio-area/RadioAreaGroup";
-import showToast from "@calcom/ui/v2/core/notifications";
+  Form,
+  Icon,
+  RadioGroup as RadioArea,
+  showToast,
+  TextAreaField,
+  TextField,
+} from "../../..";
 
 // this describes the uniform data needed to create a new event type on Profile or Team
 export interface EventTypeParent {
diff --git a/packages/ui/v2/modules/event-types/CustomInputItem.tsx b/packages/ui/v2/modules/event-types/CustomInputItem.tsx
index ec81f2d3f4..08808f8e8b 100644
--- a/packages/ui/v2/modules/event-types/CustomInputItem.tsx
+++ b/packages/ui/v2/modules/event-types/CustomInputItem.tsx
@@ -1,8 +1,6 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui";
-import { Badge } from "@calcom/ui/components/badge";
-import { Button } from "@calcom/ui/components/button";
-import { ButtonGroup } from "@calcom/ui/components/buttonGroup";
+
+import { Badge, Button, ButtonGroup, Icon } from "../../..";
 
 type Props = {
   required?: boolean;
diff --git a/packages/ui/v2/modules/event-types/EventTypeDescription.tsx b/packages/ui/v2/modules/event-types/EventTypeDescription.tsx
index 01aefdcdd3..73111c606d 100644
--- a/packages/ui/v2/modules/event-types/EventTypeDescription.tsx
+++ b/packages/ui/v2/modules/event-types/EventTypeDescription.tsx
@@ -8,8 +8,8 @@ import getStripeAppData from "@calcom/lib/getStripeAppData";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { baseEventTypeSelect } from "@calcom/prisma";
 import { EventTypeModel } from "@calcom/prisma/zod";
-import { Icon } from "@calcom/ui";
-import { Badge } from "@calcom/ui/components/badge";
+
+import { Badge, Icon } from "../../..";
 
 export type EventTypeDescriptionProps = {
   eventType: Pick<
diff --git a/packages/ui/v2/modules/event-types/MultiDropdownSelect.tsx b/packages/ui/v2/modules/event-types/MultiDropdownSelect.tsx
index de3d66e4e7..23026e8a38 100644
--- a/packages/ui/v2/modules/event-types/MultiDropdownSelect.tsx
+++ b/packages/ui/v2/modules/event-types/MultiDropdownSelect.tsx
@@ -1,8 +1,7 @@
 import { components, GroupBase, Props, ValueContainerProps } from "react-select";
 
-import { Icon } from "@calcom/ui/Icon";
-
 import { Select } from "../..";
+import { Icon } from "../../..";
 
 const LimitedChipsContainer = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({
   children,
diff --git a/packages/ui/v2/modules/event-types/index.ts b/packages/ui/v2/modules/event-types/index.ts
index b0f53fe2ec..ee8ea043f7 100644
--- a/packages/ui/v2/modules/event-types/index.ts
+++ b/packages/ui/v2/modules/event-types/index.ts
@@ -1,3 +1,6 @@
+import dynamic from "next/dynamic";
+
+export { default as CheckedTeamSelect } from "./CheckedTeamSelect";
 export { default as CreateEventType } from "./CreateEventType";
 export { default as CustomInputItem } from "./CustomInputItem";
-export { default as CheckedTeamSelect } from "./CheckedTeamSelect";
+export const EventTypeDescriptionLazy = dynamic(() => import("./EventTypeDescription"));
diff --git a/packages/ui/v2/modules/integrations/DisconnectIntegration.tsx b/packages/ui/v2/modules/integrations/DisconnectIntegration.tsx
index 4bae10a4ad..e0f4ff3ea5 100644
--- a/packages/ui/v2/modules/integrations/DisconnectIntegration.tsx
+++ b/packages/ui/v2/modules/integrations/DisconnectIntegration.tsx
@@ -2,10 +2,8 @@ import { useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui";
-import { Button, ButtonProps } from "@calcom/ui/components/button";
-import { Dialog, DialogTrigger, DialogContent } from "@calcom/ui/v2/core/Dialog";
-import showToast from "@calcom/ui/v2/core/notifications";
+
+import { Button, ButtonProps, Dialog, DialogContent, DialogTrigger, Icon, showToast } from "../../..";
 
 export default function DisconnectIntegration({
   credentialId,
diff --git a/packages/ui/v2/modules/teams/TeamSettingsRightSidebar.tsx b/packages/ui/v2/modules/teams/TeamSettingsRightSidebar.tsx
index fbcaa8eaea..4c74fdfe45 100644
--- a/packages/ui/v2/modules/teams/TeamSettingsRightSidebar.tsx
+++ b/packages/ui/v2/modules/teams/TeamSettingsRightSidebar.tsx
@@ -1,17 +1,12 @@
 import { MembershipRole } from "@prisma/client";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import React from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { TeamWithMembers } from "@calcom/lib/server/queries/teams";
 import { trpc } from "@calcom/trpc/react";
-import ConfirmationDialogContent from "@calcom/ui/ConfirmationDialogContent";
-import { Icon } from "@calcom/ui/Icon";
-import { Dialog, DialogTrigger } from "@calcom/ui/v2/core/Dialog";
-import LinkIconButton from "@calcom/ui/v2/core/LinkIconButton";
-import showToast from "@calcom/ui/v2/core/notifications";
 
+import { ConfirmationDialogContent, Dialog, DialogTrigger, Icon, LinkIconButton, showToast } from "../../..";
 import CreateEventTypeButton from "../event-types/CreateEventType";
 
 export default function TeamSettingsRightSidebar(props: { team: TeamWithMembers; role: MembershipRole }) {