diff --git a/apps/web/components/booking/BookingListItem.tsx b/apps/web/components/booking/BookingListItem.tsx
index b0ffea2ac6..194d39ceee 100644
--- a/apps/web/components/booking/BookingListItem.tsx
+++ b/apps/web/components/booking/BookingListItem.tsx
@@ -207,8 +207,8 @@ function BookingListItem(booking: BookingItemProps) {
         type: booking.eventType.id,
         eventSlug: booking.eventType.slug,
         user: user?.username || "",
-        name: booking.attendees[0].name,
-        email: booking.attendees[0].email,
+        name: booking.attendees[0] ? booking.attendees[0].name : undefined,
+        email: booking.attendees[0] ? booking.attendees[0].email : undefined,
         location: booking.location
           ? booking.location.includes("integration")
             ? (t("web_conferencing_details_to_follow") as string)
@@ -218,6 +218,8 @@ function BookingListItem(booking: BookingItemProps) {
         bookingId: booking.id,
         recur: booking.recurringEventId,
         reschedule: booking.confirmed,
+        listingStatus: booking.listingStatus,
+        status: booking.status,
       },
     });
   };
diff --git a/apps/web/pages/success.tsx b/apps/web/pages/success.tsx
index 0535ce609f..678166117a 100644
--- a/apps/web/pages/success.tsx
+++ b/apps/web/pages/success.tsx
@@ -148,7 +148,7 @@ type SuccessProps = inferSSRProps<typeof getServerSideProps>;
 export default function Success(props: SuccessProps) {
   const { t } = useLocale();
   const router = useRouter();
-  const { location: _location, name, reschedule, status } = router.query;
+  const { location: _location, name, reschedule, listingStatus, status } = router.query;
   const location = Array.isArray(_location) ? _location[0] : _location;
   const [is24h, setIs24h] = useState(isBrowserLocale24h());
   const { data: session } = useSession();
@@ -176,6 +176,7 @@ export default function Success(props: SuccessProps) {
 
   const eventName = getEventName(eventNameObject);
   const needsConfirmation = eventType.requiresConfirmation && reschedule != "true";
+  const isCancelled = status === "CANCELLED" || status === "REJECTED";
   const telemetry = useTelemetry();
   useEffect(() => {
     telemetry.withJitsu((jitsu) =>
@@ -238,6 +239,9 @@ export default function Success(props: SuccessProps) {
 
   function getTitle(): string {
     const titleSuffix = props.recurringBookings ? "_recurring" : "";
+    if (isCancelled) {
+      return t("emailed_information_about_cancelled_event");
+    }
     if (needsConfirmation) {
       if (props.profile.name !== null) {
         return t("user_needs_to_confirm_or_reject_booking" + titleSuffix, {
@@ -298,25 +302,31 @@ export default function Success(props: SuccessProps) {
                       <div
                         className={classNames(
                           "mx-auto flex items-center justify-center",
-                          !giphyImage ? "h-12 w-12 rounded-full bg-green-100" : ""
+                          !giphyImage && !isCancelled ? "h-12 w-12 rounded-full bg-green-100" : "",
+                          isCancelled ? "h-12 w-12 rounded-full bg-red-100" : ""
                         )}>
                         {giphyImage && !needsConfirmation && (
                           // eslint-disable-next-line @next/next/no-img-element
                           <img src={giphyImage} alt={"Gif from Giphy"} />
                         )}
-                        {!giphyImage && !needsConfirmation && (
+                        {!giphyImage && !needsConfirmation && !isCancelled && (
                           <CheckIcon className="h-8 w-8 text-green-600" />
                         )}
-                        {needsConfirmation && <ClockIcon className="h-8 w-8 text-green-600" />}
+                        {needsConfirmation && !isCancelled && (
+                          <ClockIcon className="h-8 w-8 text-green-600" />
+                        )}
+                        {isCancelled && <XIcon className="h-8 w-8 text-red-600" />}
                       </div>
                       <div className="mt-3 text-center sm:mt-5">
                         <h3
                           className="text-2xl font-semibold leading-6 text-neutral-900 dark:text-white"
                           id="modal-headline">
-                          {needsConfirmation
+                          {needsConfirmation && !isCancelled
                             ? props.recurringBookings
                               ? t("submitted_recurring")
                               : t("submitted")
+                            : isCancelled
+                            ? t("event_cancelled")
                             : props.recurringBookings
                             ? t("meeting_is_scheduled_recurring")
                             : t("meeting_is_scheduled")}
@@ -333,32 +343,36 @@ export default function Success(props: SuccessProps) {
                               isReschedule={reschedule === "true"}
                               eventType={props.eventType}
                               recurringBookings={props.recurringBookings}
-                              status={(status as string) || "upcoming"}
+                              listingStatus={(listingStatus as string) || "upcoming"}
                               date={date}
                               is24h={is24h}
                             />
                           </div>
-                          <div className="font-medium">{t("who")}</div>
-                          <div className="col-span-2 mb-6">
-                            {bookingInfo?.user && (
-                              <div className="mb-3">
-                                <p>{bookingInfo.user.name}</p>
-                                <p className="text-bookinglight">{bookingInfo.user.email}</p>
+                          {(bookingInfo?.user || bookingInfo?.attendees) && (
+                            <>
+                              <div className="font-medium">{t("who")}</div>
+                              <div className="col-span-2 mb-6">
+                                {bookingInfo?.user && (
+                                  <div className="mb-3">
+                                    <p>{bookingInfo.user.name}</p>
+                                    <p className="text-bookinglight">{bookingInfo.user.email}</p>
+                                  </div>
+                                )}
+                                {bookingInfo?.attendees.map((attendee, index) => (
+                                  <div
+                                    key={attendee.name}
+                                    className={index === bookingInfo.attendees.length - 1 ? "" : "mb-3"}>
+                                    <p>{attendee.name}</p>
+                                    <p className="text-bookinglight">{attendee.email}</p>
+                                  </div>
+                                ))}
                               </div>
-                            )}
-                            {bookingInfo?.attendees.map((attendee, index) => (
-                              <div
-                                key={attendee.name}
-                                className={index === bookingInfo.attendees.length - 1 ? "" : "mb-3"}>
-                                <p>{attendee.name}</p>
-                                <p className="text-bookinglight">{attendee.email}</p>
-                              </div>
-                            ))}
-                          </div>
+                            </>
+                          )}
                           {location && (
                             <>
-                              <div className="mt-6 font-medium">{t("where")}</div>
-                              <div className="col-span-2 mt-6">
+                              <div className="mt-3 font-medium">{t("where")}</div>
+                              <div className="col-span-2 mt-3">
                                 {location.startsWith("http") ? (
                                   <a title="Meeting Link" href={location}>
                                     {location}
@@ -401,6 +415,7 @@ export default function Success(props: SuccessProps) {
                       </div>
                     </div>
                     {!needsConfirmation &&
+                      !isCancelled &&
                       (!isCancellationMode ? (
                         <div className="border-bookinglightest text-bookingdark mt-2 grid grid-cols-3 border-b py-4 text-left dark:border-gray-900">
                           <span className="flex self-center font-medium text-gray-700 ltr:mr-2 rtl:ml-2 dark:text-gray-50">
@@ -425,7 +440,7 @@ export default function Success(props: SuccessProps) {
                           theme={userIsOwner ? "light" : props.profile.theme}
                         />
                       ))}
-                    {userIsOwner && !needsConfirmation && !isCancellationMode && (
+                    {userIsOwner && !needsConfirmation && !isCancellationMode && !isCancelled && (
                       <div className="border-bookinglightest mt-9 flex border-b pt-2 pb-4 text-center dark:border-gray-900 sm:mt-0 sm:pt-4">
                         <span className="flex self-center font-medium text-gray-700 ltr:mr-2 rtl:ml-2 dark:text-gray-50">
                           {t("add_to_calendar")}
@@ -591,7 +606,7 @@ type RecurringBookingsProps = {
   recurringBookings: SuccessProps["recurringBookings"];
   date: dayjs.Dayjs;
   is24h: boolean;
-  status: string;
+  listingStatus: string;
 };
 
 function RecurringBookings({
@@ -599,11 +614,11 @@ function RecurringBookings({
   eventType,
   recurringBookings,
   date,
-  status,
+  listingStatus,
 }: RecurringBookingsProps) {
   const [moreEventsVisible, setMoreEventsVisible] = useState(false);
   const { t } = useLocale();
-  return !isReschedule && recurringBookings && status === "upcoming" ? (
+  return !isReschedule && recurringBookings && listingStatus === "upcoming" ? (
     <>
       {eventType.recurringEvent?.count &&
         recurringBookings.slice(0, 4).map((dateStr, idx) => (
diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
index aed4952683..516cae00d9 100644
--- a/apps/web/public/static/locales/en/common.json
+++ b/apps/web/public/static/locales/en/common.json
@@ -867,8 +867,10 @@
   "nevermind": "Nevermind",
   "go_to": "Go to: ",
   "zapier_invite_link": "Zapier Invite Link",
+  "meeting_url_provided_after_confirmed":"A Meeting URL will be created once the event is confirmed.",
+  "event_cancelled":"This event is cancelled",
+  "emailed_information_about_cancelled_event": "We emailed you and the other attendees to let them know.",
   "this_input_will_shown_booking_this_event": "This input will be shown when booking this event",
-  "meeting_url_provided_after_confirmed": "A Meeting URL will be created once the event is confirmed.",
   "meeting_url_in_conformation_email": "Meeting url is in the confirmation email",
   "url_start_with_https": "URL needs to start with http:// or https://",
   "number_provided": "Phone number will be provided"
diff --git a/turbo.json b/turbo.json
index ae353d1b56..fdf20fe6e8 100644
--- a/turbo.json
+++ b/turbo.json
@@ -105,7 +105,12 @@
       "outputs": [".next/**"]
     },
     "build": {
-      "dependsOn": ["^build",  "@calcom/embed-core#build","@calcom/embed-react#build", "@calcom/embed-react#build"],
+      "dependsOn": [
+        "^build",
+        "@calcom/embed-core#build",
+        "@calcom/embed-react#build",
+        "@calcom/embed-react#build"
+      ],
       "outputs": ["dist/**", ".next/**"]
     },
     "db-deploy": {},
@@ -150,7 +155,7 @@
       "dependsOn": ["@calcom/prisma#db-reset", "@calcom/web#test", "@calcom/web#build"]
     },
     "type-check": {
-      "dependsOn": ["@calcom/embed-react#build","@calcom/embed-core#build", "@calcom/embed-snippet#build"],
+      "dependsOn": ["@calcom/embed-react#build", "@calcom/embed-core#build", "@calcom/embed-snippet#build"],
       "outputs": []
     }
   }