diff --git a/apps/web/modules/apps/installation/[[...step]]/step-view.tsx b/apps/web/modules/apps/installation/[[...step]]/step-view.tsx
index 6245054a032b24..e18eb3ad3dcc44 100644
--- a/apps/web/modules/apps/installation/[[...step]]/step-view.tsx
+++ b/apps/web/modules/apps/installation/[[...step]]/step-view.tsx
@@ -3,7 +3,7 @@
 import { usePathname, useRouter } from "next/navigation";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
-import { Toaster } from "react-hot-toast";
+import { Toaster } from "sonner";
 import type { z } from "zod";
 
 import checkForMultiplePaymentApps from "@calcom/app-store/_utils/payments/checkForMultiplePaymentApps";
diff --git a/apps/web/modules/auth/verify-email-change-view.tsx b/apps/web/modules/auth/verify-email-change-view.tsx
index 4d036821ce1bb9..2559eae346ab7d 100644
--- a/apps/web/modules/auth/verify-email-change-view.tsx
+++ b/apps/web/modules/auth/verify-email-change-view.tsx
@@ -4,7 +4,7 @@ import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 import React from "react";
-import { Toaster } from "react-hot-toast";
+import { Toaster } from "sonner";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { inferSSRProps } from "@calcom/types/inferSSRProps";
diff --git a/apps/web/modules/bookings/views/bookings-single-view.tsx b/apps/web/modules/bookings/views/bookings-single-view.tsx
index 976a08a743d61f..2455aad2730ae7 100644
--- a/apps/web/modules/bookings/views/bookings-single-view.tsx
+++ b/apps/web/modules/bookings/views/bookings-single-view.tsx
@@ -7,8 +7,8 @@ import { useSession } from "next-auth/react";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import { Fragment, useEffect, useState } from "react";
-import { Toaster } from "react-hot-toast";
 import { RRule } from "rrule";
+import { Toaster } from "sonner";
 import { z } from "zod";
 
 import BookingPageTagManager from "@calcom/app-store/BookingPageTagManager";
diff --git a/apps/web/modules/getting-started/[[...step]]/onboarding-view.tsx b/apps/web/modules/getting-started/[[...step]]/onboarding-view.tsx
index 1fdcfebfeab28e..0254d6ceafee3c 100644
--- a/apps/web/modules/getting-started/[[...step]]/onboarding-view.tsx
+++ b/apps/web/modules/getting-started/[[...step]]/onboarding-view.tsx
@@ -4,7 +4,7 @@ import { signOut } from "next-auth/react";
 import type { TFunction } from "next-i18next";
 import { usePathname, useRouter } from "next/navigation";
 import { Suspense } from "react";
-import { Toaster } from "react-hot-toast";
+import { Toaster } from "sonner";
 import { z } from "zod";
 
 import { classNames } from "@calcom/lib";
diff --git a/apps/web/modules/signup-view.tsx b/apps/web/modules/signup-view.tsx
index dcead86993566f..7c1b748e80e1d3 100644
--- a/apps/web/modules/signup-view.tsx
+++ b/apps/web/modules/signup-view.tsx
@@ -11,7 +11,7 @@ import Script from "next/script";
 import { useState, useEffect } from "react";
 import type { SubmitHandler } from "react-hook-form";
 import { useForm, useFormContext } from "react-hook-form";
-import { Toaster } from "react-hot-toast";
+import { Toaster } from "sonner";
 import { z } from "zod";
 
 import getStripe from "@calcom/app-store/stripepayment/lib/client";
diff --git a/apps/web/modules/users/views/users-public-view.tsx b/apps/web/modules/users/views/users-public-view.tsx
index 97143b8efb9870..96d6a3cefc2def 100644
--- a/apps/web/modules/users/views/users-public-view.tsx
+++ b/apps/web/modules/users/views/users-public-view.tsx
@@ -3,7 +3,7 @@
 import classNames from "classnames";
 import type { InferGetServerSidePropsType } from "next";
 import Link from "next/link";
-import { Toaster } from "react-hot-toast";
+import { Toaster } from "sonner";
 
 import {
   sdkActionManager,
diff --git a/apps/web/package.json b/apps/web/package.json
index 9ffcba9b8f1e40..ff6cbe2cc1bd6c 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -122,7 +122,6 @@
     "react-dom": "^18.2.0",
     "react-easy-crop": "^3.5.2",
     "react-hook-form": "^7.43.3",
-    "react-hot-toast": "^2.3.0",
     "react-intl": "^5.25.1",
     "react-live-chat-loader": "^2.8.1",
     "react-multi-email": "^0.5.3",
@@ -139,6 +138,7 @@
     "sanitize-html": "^2.10.0",
     "schema-dts": "^1.1.0",
     "short-uuid": "^4.2.0",
+    "sonner": "^1.7.4",
     "stripe": "^9.16.0",
     "superjson": "1.9.1",
     "tailwindcss-radix": "^2.6.0",
diff --git a/packages/app-store/alby/pages/setup/index.tsx b/packages/app-store/alby/pages/setup/index.tsx
index a39990ef5912c9..225093b40891d1 100644
--- a/packages/app-store/alby/pages/setup/index.tsx
+++ b/packages/app-store/alby/pages/setup/index.tsx
@@ -2,7 +2,7 @@ import { auth, Client, webln } from "@getalby/sdk";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useState, useCallback, useEffect } from "react";
-import { Toaster } from "react-hot-toast";
+import { Toaster } from "sonner";
 
 import AppNotInstalledMessage from "@calcom/app-store/_components/AppNotInstalledMessage";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
diff --git a/packages/app-store/applecalendar/pages/setup/index.tsx b/packages/app-store/applecalendar/pages/setup/index.tsx
index 43ef54ebdcf5ac..9c79fc434af216 100644
--- a/packages/app-store/applecalendar/pages/setup/index.tsx
+++ b/packages/app-store/applecalendar/pages/setup/index.tsx
@@ -1,7 +1,7 @@
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
-import { Toaster } from "react-hot-toast";
+import { Toaster } from "sonner";
 
 import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
diff --git a/packages/app-store/caldavcalendar/pages/setup/index.tsx b/packages/app-store/caldavcalendar/pages/setup/index.tsx
index 9e6fad02daea41..ab3fe42b60b071 100644
--- a/packages/app-store/caldavcalendar/pages/setup/index.tsx
+++ b/packages/app-store/caldavcalendar/pages/setup/index.tsx
@@ -1,7 +1,7 @@
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
-import { Toaster } from "react-hot-toast";
+import { Toaster } from "sonner";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Alert, Button, Form, TextField } from "@calcom/ui";
diff --git a/packages/app-store/exchange2013calendar/pages/setup/index.tsx b/packages/app-store/exchange2013calendar/pages/setup/index.tsx
index 382a17fe1f6cf8..329da7739a856d 100644
--- a/packages/app-store/exchange2013calendar/pages/setup/index.tsx
+++ b/packages/app-store/exchange2013calendar/pages/setup/index.tsx
@@ -1,7 +1,7 @@
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
-import { Toaster } from "react-hot-toast";
+import { Toaster } from "sonner";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Alert, Button, Form, TextField } from "@calcom/ui";
diff --git a/packages/app-store/exchange2016calendar/pages/setup/index.tsx b/packages/app-store/exchange2016calendar/pages/setup/index.tsx
index 866cbd48c5fd8e..bf26540361b0f9 100644
--- a/packages/app-store/exchange2016calendar/pages/setup/index.tsx
+++ b/packages/app-store/exchange2016calendar/pages/setup/index.tsx
@@ -1,7 +1,7 @@
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
-import { Toaster } from "react-hot-toast";
+import { Toaster } from "sonner";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Alert, Button, Form, TextField } from "@calcom/ui";
diff --git a/packages/app-store/exchangecalendar/pages/setup/index.tsx b/packages/app-store/exchangecalendar/pages/setup/index.tsx
index 92ba50af9aa719..f3926cd7fea55f 100644
--- a/packages/app-store/exchangecalendar/pages/setup/index.tsx
+++ b/packages/app-store/exchangecalendar/pages/setup/index.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
-import { Toaster } from "react-hot-toast";
+import { Toaster } from "sonner";
 import z from "zod";
 
 import { emailSchema } from "@calcom/lib/emailSchema";
diff --git a/packages/app-store/hitpay/pages/setup/index.tsx b/packages/app-store/hitpay/pages/setup/index.tsx
index 729007be82e1dd..b9e652db9068d4 100644
--- a/packages/app-store/hitpay/pages/setup/index.tsx
+++ b/packages/app-store/hitpay/pages/setup/index.tsx
@@ -4,7 +4,7 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useState, useEffect } from "react";
 import { useForm } from "react-hook-form";
-import { Toaster } from "react-hot-toast";
+import { Toaster } from "sonner";
 import { z } from "zod";
 
 import AppNotInstalledMessage from "@calcom/app-store/_components/AppNotInstalledMessage";
diff --git a/packages/app-store/ics-feedcalendar/pages/setup/index.tsx b/packages/app-store/ics-feedcalendar/pages/setup/index.tsx
index 1c237c89a5c611..4d49d4c2df4179 100644
--- a/packages/app-store/ics-feedcalendar/pages/setup/index.tsx
+++ b/packages/app-store/ics-feedcalendar/pages/setup/index.tsx
@@ -1,7 +1,7 @@
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
-import { Toaster } from "react-hot-toast";
+import { Toaster } from "sonner";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Alert, Button, Form, TextField, CheckboxField } from "@calcom/ui";
diff --git a/packages/app-store/make/pages/setup/index.tsx b/packages/app-store/make/pages/setup/index.tsx
index 39e691a993fc46..fc23a64daf2967 100644
--- a/packages/app-store/make/pages/setup/index.tsx
+++ b/packages/app-store/make/pages/setup/index.tsx
@@ -2,7 +2,7 @@ import type { InferGetServerSidePropsType } from "next";
 import { Trans } from "next-i18next";
 import Link from "next/link";
 import { useState } from "react";
-import { Toaster } from "react-hot-toast";
+import { Toaster } from "sonner";
 
 import AppNotInstalledMessage from "@calcom/app-store/_components/AppNotInstalledMessage";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
diff --git a/packages/app-store/paypal/pages/setup/index.tsx b/packages/app-store/paypal/pages/setup/index.tsx
index 3b78f6496101b2..1e4e5b887fb46e 100644
--- a/packages/app-store/paypal/pages/setup/index.tsx
+++ b/packages/app-store/paypal/pages/setup/index.tsx
@@ -1,6 +1,6 @@
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { Toaster } from "react-hot-toast";
+import { Toaster } from "sonner";
 
 import AppNotInstalledMessage from "@calcom/app-store/_components/AppNotInstalledMessage";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
diff --git a/packages/app-store/routing-forms/pages/routing-link/[...appPages].tsx b/packages/app-store/routing-forms/pages/routing-link/[...appPages].tsx
index ff05744f96faa1..4b38cb2c024bd2 100644
--- a/packages/app-store/routing-forms/pages/routing-link/[...appPages].tsx
+++ b/packages/app-store/routing-forms/pages/routing-link/[...appPages].tsx
@@ -3,7 +3,7 @@
 import { useRouter } from "next/navigation";
 import type { FormEvent } from "react";
 import { useEffect, useRef, useState } from "react";
-import { Toaster } from "react-hot-toast";
+import { Toaster } from "sonner";
 import { v4 as uuidv4 } from "uuid";
 
 import { sdkActionManager, useIsEmbed } from "@calcom/embed-core/embed-iframe";
diff --git a/packages/app-store/sendgrid/pages/setup/index.tsx b/packages/app-store/sendgrid/pages/setup/index.tsx
index 9dc4032c001a7b..9f92171698c196 100644
--- a/packages/app-store/sendgrid/pages/setup/index.tsx
+++ b/packages/app-store/sendgrid/pages/setup/index.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
-import { Toaster } from "react-hot-toast";
+import { Toaster } from "sonner";
 import z from "zod";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
diff --git a/packages/app-store/zapier/pages/setup/index.tsx b/packages/app-store/zapier/pages/setup/index.tsx
index 550e812c88edf6..56353cc92fe686 100644
--- a/packages/app-store/zapier/pages/setup/index.tsx
+++ b/packages/app-store/zapier/pages/setup/index.tsx
@@ -1,7 +1,7 @@
 import { Trans } from "next-i18next";
 import Link from "next/link";
 import { useState } from "react";
-import { Toaster } from "react-hot-toast";
+import { Toaster } from "sonner";
 
 import AppNotInstalledMessage from "@calcom/app-store/_components/AppNotInstalledMessage";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
diff --git a/packages/features/bookings/Booker/Booker.tsx b/packages/features/bookings/Booker/Booker.tsx
index 6b9abf6c0bae8c..d86f9c55838849 100644
--- a/packages/features/bookings/Booker/Booker.tsx
+++ b/packages/features/bookings/Booker/Booker.tsx
@@ -1,8 +1,8 @@
 import { AnimatePresence, LazyMotion, m } from "framer-motion";
 import dynamic from "next/dynamic";
 import { useEffect, useMemo, useRef } from "react";
-import { Toaster } from "react-hot-toast";
 import StickyBox from "react-sticky-box";
+import { Toaster } from "sonner";
 import { shallow } from "zustand/shallow";
 
 import BookingPageTagManager from "@calcom/app-store/BookingPageTagManager";
diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index a7ceb860c15464..aaeb379d568c7f 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -4,7 +4,7 @@ import { useSession } from "next-auth/react";
 import { usePathname, useRouter } from "next/navigation";
 import type { Dispatch, ReactElement, ReactNode, SetStateAction } from "react";
 import React, { cloneElement } from "react";
-import { Toaster } from "react-hot-toast";
+import { Toaster } from "sonner";
 
 import { useRedirectToLoginIfUnauthenticated } from "@calcom/features/auth/lib/hooks/useRedirectToLoginIfUnauthenticated";
 import { useRedirectToOnboardingIfNeeded } from "@calcom/features/auth/lib/hooks/useRedirectToOnboardingIfNeeded";
diff --git a/packages/lib/package.json b/packages/lib/package.json
index 6f66b7c1426949..81b1d83e27852c 100644
--- a/packages/lib/package.json
+++ b/packages/lib/package.json
@@ -26,8 +26,8 @@
     "jimp": "^0.16.1",
     "next-collect": "^0.2.1",
     "next-i18next": "^13.2.2",
-    "react-hot-toast": "^2.3.0",
     "rrule": "^2.7.1",
+    "sonner": "^1.7.4",
     "tailwind-merge": "^1.13.2",
     "tsdav": "2.0.3",
     "tslog": "^4.9.2",
diff --git a/packages/ui/components/toast/showToast.tsx b/packages/ui/components/toast/showToast.tsx
index 4dd5f0b19ff8c9..07da2aaf261f9f 100644
--- a/packages/ui/components/toast/showToast.tsx
+++ b/packages/ui/components/toast/showToast.tsx
@@ -1,21 +1,19 @@
 import classNames from "classnames";
-import type { ToastOptions, Toast } from "react-hot-toast";
-import toast from "react-hot-toast";
+import type { ToastT } from "sonner";
+import { toast } from "sonner";
 
 import { Icon } from "../icon";
 
 type IToast = {
   message: string;
-  toastVisible: boolean;
-  toastId: string;
-  onClose: (toastId: string) => void;
+  toastId: string | number;
+  onClose: (toastId: string | number) => void;
 };
 
-export const SuccessToast = ({ message, toastVisible, onClose, toastId }: IToast) => (
+export const SuccessToast = ({ message, onClose, toastId }: IToast) => (
   <button
     className={classNames(
-      "data-testid-toast-success bg-default dark:bg-inverted text-emphasis dark:text-inverted shadow-elevation-low border-subtle mb-2 flex h-auto space-x-2 rounded-lg border px-3 py-2.5 text-sm font-semibold rtl:space-x-reverse md:max-w-sm",
-      toastVisible && "animate-fade-in-up cursor-pointer"
+      "data-testid-toast-success bg-default dark:bg-inverted text-emphasis dark:text-inverted shadow-elevation-low border-subtle mb-2 flex h-auto space-x-2 rounded-lg border px-3 py-2.5 text-sm font-semibold rtl:space-x-reverse md:max-w-sm"
     )}
     onClick={() => onClose(toastId)}>
     <span className="mt-0.5">
@@ -30,11 +28,10 @@ export const SuccessToast = ({ message, toastVisible, onClose, toastId }: IToast
   </button>
 );
 
-export const ErrorToast = ({ message, toastVisible, onClose, toastId }: IToast) => (
+export const ErrorToast = ({ message, onClose, toastId }: IToast) => (
   <button
     className={classNames(
-      "animate-fade-in-up bg-semantic-error-subtle text-semantic-error shadow-elevation-low border-semantic-error-subtle mb-2 flex h-auto space-x-2 rounded-md border px-3 py-2.5 text-sm font-semibold rtl:space-x-reverse md:max-w-sm",
-      toastVisible && "animate-fade-in-up cursor-pointer"
+      "animate-fade-in-up bg-semantic-error-subtle text-semantic-error shadow-elevation-low border-semantic-error-subtle mb-2 flex h-auto space-x-2 rounded-md border px-3 py-2.5 text-sm font-semibold rtl:space-x-reverse md:max-w-sm"
     )}
     onClick={() => onClose(toastId)}>
     <span className="mt-0.5">
@@ -49,11 +46,10 @@ export const ErrorToast = ({ message, toastVisible, onClose, toastId }: IToast)
   </button>
 );
 
-export const WarningToast = ({ message, toastVisible, onClose, toastId }: IToast) => (
+export const WarningToast = ({ message, onClose, toastId }: IToast) => (
   <button
     className={classNames(
-      "animate-fade-in-up bg-semantic-attention-subtle text-semantic-attention shadow-elevation-low border-semantic-attention-subtle mb-2 flex h-auto space-x-2 rounded-md border px-3 py-2.5 text-sm font-semibold rtl:space-x-reverse md:max-w-sm",
-      toastVisible && "animate-fade-in-up cursor-pointer"
+      "animate-fade-in-up bg-semantic-attention-subtle text-semantic-attention shadow-elevation-low border-semantic-attention-subtle mb-2 flex h-auto space-x-2 rounded-md border px-3 py-2.5 text-sm font-semibold rtl:space-x-reverse md:max-w-sm"
     )}
     onClick={() => onClose(toastId)}>
     <span className="mt-0.5">
@@ -76,28 +72,25 @@ export function showToast(
   message: string,
   variant: ToastVariants,
   // Options or duration (duration for backwards compatibility reasons)
-  options: number | ToastOptions = TOAST_VISIBLE_DURATION
+  options: number | ToastT = TOAST_VISIBLE_DURATION
 ) {
-  //
-  const _options: ToastOptions = typeof options === "number" ? { duration: options } : options;
+  const _options: ToastT = typeof options === "number" ? { duration: options, id: "" } : options;
   if (!_options.duration) _options.duration = TOAST_VISIBLE_DURATION;
   if (!_options.position) _options.position = "bottom-center";
 
-  const onClose = (toastId: string) => {
-    toast.remove(toastId);
+  const onClose = (toastId: string | number) => {
+    toast.dismiss(toastId);
   };
-  const toastElements: { [x in ToastVariants]: (t: Toast) => JSX.Element } = {
-    success: (t) => (
-      <SuccessToast message={message} toastVisible={t.visible} onClose={onClose} toastId={t.id} />
-    ),
-    error: (t) => <ErrorToast message={message} toastVisible={t.visible} onClose={onClose} toastId={t.id} />,
-    warning: (t) => (
-      <WarningToast message={message} toastVisible={t.visible} onClose={onClose} toastId={t.id} />
-    ),
+
+  const toastElements: { [x in ToastVariants]: (t: number | string) => JSX.Element } = {
+    success: (toastId) => <SuccessToast message={message} onClose={onClose} toastId={toastId} />,
+    error: (toastId) => <ErrorToast message={message} onClose={onClose} toastId={toastId} />,
+    warning: (toastId) => <WarningToast message={message} onClose={onClose} toastId={toastId} />,
   };
+
   return toast.custom(
     toastElements[variant] ||
-      ((t) => <SuccessToast message={message} toastVisible={t.visible} onClose={onClose} toastId={t.id} />),
+      ((toastId) => <SuccessToast message={message} onClose={onClose} toastId={toastId} />),
     _options
   );
 }
diff --git a/packages/ui/components/toast/toast.stories.mdx b/packages/ui/components/toast/toast.stories.mdx
index 83188e647ddc6b..895e11cea8e920 100644
--- a/packages/ui/components/toast/toast.stories.mdx
+++ b/packages/ui/components/toast/toast.stories.mdx
@@ -12,9 +12,9 @@ import {
   VariantRow,
 } from "@calcom/storybook/components";
 
-import { SuccessToast, ErrorToast, WarningToast, DefaultToast } from "./";
+import { SuccessToast, ErrorToast, WarningToast } from "./";
 
-<Meta title="UI/Toasts" component={DefaultToast} />
+<Meta title="UI/Toasts" component={SuccessToast} />
 
 <Title title="Toasts" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />
 
@@ -24,20 +24,17 @@ Toasts are used to show an action has had a impact. If a user submits a form a t
 
 ## Structure
 
-<CustomArgsTable of={DefaultToast} />
+<CustomArgsTable of={SuccessToast} />
 
 <Examples title="Toasts">
-  <Example title="Default">
-    <DefaultToast message="Default Toast" toastVisible={true} />
-  </Example>
   <Example title="Success">
-    <SuccessToast message="Success Toast" toastVisible={true} />
+    <SuccessToast message="Success Toast" />
   </Example>
   <Example title="Warning">
-    <WarningToast message="Warning Toast" toastVisible={true} />
+    <WarningToast message="Warning Toast" />
   </Example>
   <Example title="Error">
-    <ErrorToast message="Error Toast" toastVisible={true} />
+    <ErrorToast message="Error Toast" />
   </Example>
 </Examples>
 
@@ -45,22 +42,19 @@ Toasts are used to show an action has had a impact. If a user submits a form a t
 
 <Canvas>
   <Story
-    name="Default"
+    name="Toast Variants"
     args={{
-      message: "Default Toast",
-      toastVisible: true,
+      message: "Toast Message",
     }}
     argTypes={{
       message: { control: "text" },
-      toastVisible: { control: "boolean" },
     }}>
     {({ message, toastVisible }) => (
-      <VariantsTable titles={["Default", "Success", "Warning", "Error"]} columnMinWidth={150}>
-        <VariantRow variant="Default">
-          <DefaultToast message={message} toastVisible={toastVisible} />
-          <SuccessToast message={message} toastVisible={toastVisible} />
-          <WarningToast message={message} toastVisible={toastVisible} />
-          <ErrorToast message={message} toastVisible={toastVisible} />
+      <VariantsTable titles={["Success", "Warning", "Error"]} columnMinWidth={150}>
+        <VariantRow variant="Success">
+          <SuccessToast message={message} />
+          <WarningToast message={message} />
+          <ErrorToast message={message} />
         </VariantRow>
       </VariantsTable>
     )}
diff --git a/packages/ui/components/toast/toast.test.tsx b/packages/ui/components/toast/toast.test.tsx
index 91f6baca1fca8d..450c2af9044835 100644
--- a/packages/ui/components/toast/toast.test.tsx
+++ b/packages/ui/components/toast/toast.test.tsx
@@ -9,7 +9,7 @@ describe("Tests for Toast Components", () => {
     const toastId = "some-id";
 
     const onCloseMock = vi.fn();
-    render(<Component message={message} toastVisible={true} onClose={onCloseMock} toastId={toastId} />);
+    render(<Component message={message} onClose={onCloseMock} toastId={toastId} />);
 
     const toast = screen.getByTestId(toastTestId);
     expect(toast).toBeInTheDocument();
diff --git a/packages/ui/layouts/WizardLayout.tsx b/packages/ui/layouts/WizardLayout.tsx
index 0e81d6b265ce16..8f3d6aa1f30eef 100644
--- a/packages/ui/layouts/WizardLayout.tsx
+++ b/packages/ui/layouts/WizardLayout.tsx
@@ -4,7 +4,7 @@
 import { noop } from "lodash";
 import { usePathname } from "next/navigation";
 import React, { useEffect, useState } from "react";
-import { Toaster } from "react-hot-toast";
+import { Toaster } from "sonner";
 
 import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";