diff --git a/apps/web/components/booking/BookingListItem.tsx b/apps/web/components/booking/BookingListItem.tsx
index 11300140e3..a1b80a01d5 100644
--- a/apps/web/components/booking/BookingListItem.tsx
+++ b/apps/web/components/booking/BookingListItem.tsx
@@ -27,10 +27,6 @@ import type { ActionType } from "@calcom/ui";
 import {
   Badge,
   Button,
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogFooter,
   Dropdown,
   DropdownItem,
   DropdownMenuCheckboxItem,
@@ -43,7 +39,6 @@ import {
   MeetingTimeInTimezones,
   showToast,
   TableActions,
-  TextAreaField,
   Tooltip,
 } from "@calcom/ui";
 
@@ -75,19 +70,12 @@ function BookingListItem(booking: BookingItemProps) {
     i18n: { language },
   } = useLocale();
   const utils = trpc.useUtils();
-  const [rejectionReason, setRejectionReason] = useState<string>("");
-  const [rejectionDialogIsOpen, setRejectionDialogIsOpen] = useState(false);
   const [chargeCardDialogIsOpen, setChargeCardDialogIsOpen] = useState(false);
   const [viewRecordingsDialogIsOpen, setViewRecordingsDialogIsOpen] = useState<boolean>(false);
   const cardCharged = booking?.payment[0]?.success;
   const mutation = trpc.viewer.bookings.confirm.useMutation({
-    onSuccess: (data) => {
-      if (data?.status === BookingStatus.REJECTED) {
-        setRejectionDialogIsOpen(false);
-        showToast(t("booking_rejection_success"), "success");
-      } else {
-        showToast(t("booking_confirmation_success"), "success");
-      }
+    onSuccess: () => {
+      showToast(t("booking_confirmation_success"), "success");
       utils.viewer.bookings.invalidate();
     },
     onError: () => {
@@ -122,7 +110,7 @@ function BookingListItem(booking: BookingItemProps) {
     let body = {
       bookingId: booking.id,
       confirmed: confirm,
-      reason: rejectionReason,
+      reason: "",
     };
     /**
      * Only pass down the recurring event id when we need to confirm the entire series, which happens in
@@ -145,9 +133,7 @@ function BookingListItem(booking: BookingItemProps) {
     {
       id: "reject",
       label: (isTabRecurring || isTabUnconfirmed) && isRecurring ? t("reject_all") : t("reject"),
-      onClick: () => {
-        setRejectionDialogIsOpen(true);
-      },
+      href: `/booking/${booking.uid}?reject=true`,
       icon: "ban",
       disabled: mutation.isPending,
     },
@@ -347,37 +333,6 @@ function BookingListItem(booking: BookingItemProps) {
           timeFormat={userTimeFormat ?? null}
         />
       )}
-      {/* NOTE: Should refactor this dialog component as is being rendered multiple times */}
-      <Dialog open={rejectionDialogIsOpen} onOpenChange={setRejectionDialogIsOpen}>
-        <DialogContent title={t("rejection_reason_title")} description={t("rejection_reason_description")}>
-          <div>
-            <TextAreaField
-              name="rejectionReason"
-              label={
-                <>
-                  {t("rejection_reason")}
-                  <span className="text-subtle font-normal"> (Optional)</span>
-                </>
-              }
-              value={rejectionReason}
-              onChange={(e) => setRejectionReason(e.target.value)}
-            />
-          </div>
-
-          <DialogFooter>
-            <DialogClose />
-            <Button
-              disabled={mutation.isPending}
-              data-testid="rejection-confirm"
-              onClick={() => {
-                bookingConfirm(false);
-              }}>
-              {t("rejection_confirmation")}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
       <tr data-testid="booking-item" className="hover:bg-muted group flex flex-col transition sm:flex-row">
         <td className="hidden align-top ltr:pl-6 rtl:pr-6 sm:table-cell sm:min-w-[12rem]">
           <Link href={bookingLink}>
diff --git a/apps/web/components/booking/RejectBooking.tsx b/apps/web/components/booking/RejectBooking.tsx
new file mode 100644
index 0000000000..8d9b3f32cc
--- /dev/null
+++ b/apps/web/components/booking/RejectBooking.tsx
@@ -0,0 +1,88 @@
+import { useCallback, useState } from "react";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
+import { Button, TextArea } from "@calcom/ui";
+
+type Props = {
+  booking: {
+    uid?: string | null;
+    id: number;
+    recurringEventId: string | null;
+  };
+  setIsRejectionMode: () => void;
+};
+
+export default function RejectBooking(props: Props) {
+  const [rejectionReason, setRejectionReason] = useState<string>("");
+  const { t } = useLocale();
+  const utils = trpc.useUtils();
+  const { booking } = props;
+  const isRecurring = booking.recurringEventId !== null;
+
+  const mutation = trpc.viewer.bookings.confirm.useMutation({
+    onSuccess: () => {
+      props.setIsRejectionMode();
+      utils.viewer.bookings.invalidate();
+    },
+    onError: () => {
+      utils.viewer.bookings.invalidate();
+    },
+  });
+
+  const bookingConfirm = async (confirm: boolean) => {
+    let body = {
+      bookingId: booking.id,
+      confirmed: confirm,
+      reason: rejectionReason,
+    };
+    if (isRecurring) {
+      body = Object.assign({}, body, { recurringEventId: booking.recurringEventId });
+    }
+    mutation.mutate(body);
+  };
+
+  const rejectBookingRef = useCallback((node: HTMLTextAreaElement) => {
+    if (node !== null) {
+      node.scrollIntoView({ behavior: "smooth" });
+      node.focus();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <>
+      <div className="mt-5 sm:mt-6">
+        <label className="text-default font-medium">
+          <>
+            {t("rejection_reason")}
+            <span className="text-subtle font-normal"> (Optional)</span>
+          </>
+        </label>
+        <TextArea
+          ref={rejectBookingRef}
+          placeholder={t("rejection_reason_placeholder")}
+          value={rejectionReason}
+          onChange={(e) => setRejectionReason(e.target.value)}
+          className="mb-4 mt-2 w-full "
+          rows={3}
+        />
+        <div className="flex flex-col-reverse rtl:space-x-reverse ">
+          <div className="ml-auto flex w-full space-x-4 ">
+            <Button className="ml-auto" color="secondary" onClick={() => props.setIsRejectionMode()}>
+              {t("nevermind")}
+            </Button>
+            <Button
+              loading={mutation.isPending}
+              data-testid="rejection-confirm"
+              onClick={() => {
+                bookingConfirm(false);
+              }}>
+              {t("rejection_confirmation")}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/apps/web/modules/bookings/views/bookings-single-view.tsx b/apps/web/modules/bookings/views/bookings-single-view.tsx
index 3b7533265c..cc65e81cf7 100644
--- a/apps/web/modules/bookings/views/bookings-single-view.tsx
+++ b/apps/web/modules/bookings/views/bookings-single-view.tsx
@@ -63,6 +63,7 @@ import {
 } from "@calcom/ui";
 import PageWrapper from "@calcom/web/components/PageWrapper";
 import CancelBooking from "@calcom/web/components/booking/CancelBooking";
+import RejectBooking from "@calcom/web/components/booking/RejectBooking";
 import EventReservationSchema from "@calcom/web/components/schemas/EventReservationSchema";
 import { timeZone } from "@calcom/web/lib/clock";
 
@@ -78,6 +79,7 @@ const querySchema = z.object({
   email: z.string().optional(),
   eventTypeSlug: z.string().optional(),
   cancel: stringToBoolean,
+  reject: stringToBoolean,
   allRemainingBookings: stringToBoolean,
   changes: stringToBoolean,
   reschedule: stringToBoolean,
@@ -114,6 +116,7 @@ export default function Success(props: PageProps) {
     allRemainingBookings,
     isSuccessBookingPage,
     cancel: isCancellationMode,
+    reject: isRejectionMode,
     formerTime,
     email,
     seatReferenceUid,
@@ -209,6 +212,16 @@ export default function Success(props: PageProps) {
     router.replace(`${pathname}?${_searchParams.toString()}`);
   }
 
+  function setIsRejectionMode() {
+    const _searchParams = new URLSearchParams(searchParams ?? undefined);
+
+    if (_searchParams.get("reject")) {
+      _searchParams.delete("reject");
+    }
+
+    router.replace(`${pathname}?${_searchParams.toString()}`);
+  }
+
   let evtName = eventType.eventName;
   if (eventType.isDynamic && bookingInfo.responses?.title) {
     evtName = bookingInfo.responses.title as string;
@@ -660,6 +673,7 @@ export default function Success(props: PageProps) {
                     {!requiresLoginToUpdate &&
                       (!needsConfirmation || !userIsOwner) &&
                       isReschedulable &&
+                      !isRejectionMode &&
                       (!isCancellationMode ? (
                         <>
                           <hr className="border-subtle mb-8" />
@@ -714,6 +728,19 @@ export default function Success(props: PageProps) {
                           />
                         </>
                       ))}
+                    {userIsOwner && !isCancelled && isRejectionMode && (
+                      <>
+                        <hr className="border-subtle" />
+                        <RejectBooking
+                          booking={{
+                            id: bookingInfo.id,
+                            uid: bookingInfo?.uid,
+                            recurringEventId: bookingInfo.recurringEventId,
+                          }}
+                          setIsRejectionMode={setIsRejectionMode}
+                        />
+                      </>
+                    )}
                     {userIsOwner &&
                       !needsConfirmation &&
                       !isCancellationMode &&
diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
index 73fa6b2594..1a48c8fed2 100644
--- a/apps/web/public/static/locales/en/common.json
+++ b/apps/web/public/static/locales/en/common.json
@@ -45,6 +45,7 @@
   "no_options_available": "No options available",
   "cancellation_reason": "Reason for cancellation (optional)",
   "cancellation_reason_placeholder": "Why are you cancelling?",
+  "rejection_reason_placeholder": "Why are you rejecting?",
   "rejection_reason": "Reason for rejecting",
   "rejection_reason_title": "Reject the booking request?",
   "rejection_reason_description": "Are you sure you want to reject the booking? We'll let the person who tried to book know. You can provide a reason below.",
diff --git a/packages/emails/src/templates/OrganizerRequestEmail.tsx b/packages/emails/src/templates/OrganizerRequestEmail.tsx
index 2d16770065..5d6b37bd1f 100644
--- a/packages/emails/src/templates/OrganizerRequestEmail.tsx
+++ b/packages/emails/src/templates/OrganizerRequestEmail.tsx
@@ -9,6 +9,8 @@ export const OrganizerRequestEmail = (props: React.ComponentProps<typeof Organiz
   const token = symmetricEncrypt(JSON.stringify(seedData), process.env.CALENDSO_ENCRYPTION_KEY || "");
   //TODO: We should switch to using org domain if available
   const actionHref = `${WEBAPP_URL}/api/link/?token=${encodeURIComponent(token)}`;
+  const rejectLink = new URL(`${props.calEvent.bookerUrl ?? WEBAPP_URL}/booking/${props.calEvent.uid}`);
+  rejectLink.searchParams.append("reject", "true");
   return (
     <OrganizerScheduledEmail
       title={
@@ -29,7 +31,7 @@ export const OrganizerRequestEmail = (props: React.ComponentProps<typeof Organiz
           <Separator />
           <CallToAction
             label={props.calEvent.organizer.language.translate("reject")}
-            href={`${actionHref}&action=reject`}
+            href={rejectLink.toString()}
             startIconName="rejectIcon"
             secondary
           />