diff --git a/pages/cancel/[uid].tsx b/pages/cancel/[uid].tsx
index 06af00d123..2e9d1fa5f7 100644
--- a/pages/cancel/[uid].tsx
+++ b/pages/cancel/[uid].tsx
@@ -1,13 +1,13 @@
-import { useState } from "react";
-import Head from "next/head";
-import prisma from "../../lib/prisma";
-import { useRouter } from "next/router";
-import dayjs from "dayjs";
 import { CalendarIcon, ClockIcon, XIcon } from "@heroicons/react/solid";
-import isSameOrBefore from "dayjs/plugin/isSameOrBefore";
+import dayjs from "dayjs";
 import isBetween from "dayjs/plugin/isBetween";
-import utc from "dayjs/plugin/utc";
+import isSameOrBefore from "dayjs/plugin/isSameOrBefore";
 import timezone from "dayjs/plugin/timezone";
+import utc from "dayjs/plugin/utc";
+import Head from "next/head";
+import { useRouter } from "next/router";
+import { useState } from "react";
+import prisma from "../../lib/prisma";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "../../lib/telemetry";
 
 dayjs.extend(isSameOrBefore);
@@ -23,7 +23,7 @@ export default function Type(props) {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [is24h, setIs24h] = useState(false);
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
+  const [error, setError] = useState(props.booking ? null : "This booking was already cancelled");
   const telemetry = useTelemetry();
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -57,7 +57,8 @@ export default function Type(props) {
     <div>
       <Head>
         <title>
-          Cancel {props.booking.title} | {props.user.name || props.user.username} | Calendso
+          Cancel {props.booking && `${props.booking.title} | ${props.user.name || props.user.username} `}|
+          Calendso
         </title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
@@ -86,51 +87,53 @@ export default function Type(props) {
                   </div>
                 )}
                 {!error && (
-                  <div>
-                    <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100">
-                      <XIcon className="h-6 w-6 text-red-600" />
-                    </div>
-                    <div className="mt-3 text-center sm:mt-5">
-                      <h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-headline">
-                        Really cancel your booking?
-                      </h3>
-                      <div className="mt-2">
-                        <p className="text-sm text-gray-500">Instead, you could also reschedule it.</p>
+                  <>
+                    <div>
+                      <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100">
+                        <XIcon className="h-6 w-6 text-red-600" />
                       </div>
-                      <div className="mt-4 border-t border-b py-4">
-                        <h2 className="text-lg font-medium text-gray-600 mb-2">{props.booking.title}</h2>
-                        <p className="text-gray-500 mb-1">
-                          <ClockIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
-                          {props.eventType.length} minutes
-                        </p>
-                        <p className="text-gray-500">
-                          <CalendarIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
-                          {dayjs
-                            .utc(props.booking.startTime)
-                            .format((is24h ? "H:mm" : "h:mma") + ", dddd DD MMMM YYYY")}
-                        </p>
+                      <div className="mt-3 text-center sm:mt-5">
+                        <h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-headline">
+                          Really cancel your booking?
+                        </h3>
+                        <div className="mt-2">
+                          <p className="text-sm text-gray-500">Instead, you could also reschedule it.</p>
+                        </div>
+                        <div className="mt-4 border-t border-b py-4">
+                          <h2 className="text-lg font-medium text-gray-600 mb-2">{props.booking.title}</h2>
+                          <p className="text-gray-500 mb-1">
+                            <ClockIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
+                            {props.eventType.length} minutes
+                          </p>
+                          <p className="text-gray-500">
+                            <CalendarIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
+                            {dayjs
+                              .utc(props.booking.startTime)
+                              .format((is24h ? "H:mm" : "h:mma") + ", dddd DD MMMM YYYY")}
+                          </p>
+                        </div>
                       </div>
                     </div>
-                  </div>
+                    <div className="mt-5 sm:mt-6 text-center">
+                      <div className="mt-5">
+                        <button
+                          onClick={cancellationHandler}
+                          disabled={loading}
+                          type="button"
+                          className="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm mx-2 btn-white">
+                          Cancel
+                        </button>
+                        <button
+                          onClick={() => router.push("/reschedule/" + uid)}
+                          disabled={loading}
+                          type="button"
+                          className="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-gray-700 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:text-sm mx-2 btn-white">
+                          Reschedule
+                        </button>
+                      </div>
+                    </div>
+                  </>
                 )}
-                <div className="mt-5 sm:mt-6 text-center">
-                  <div className="mt-5">
-                    <button
-                      onClick={cancellationHandler}
-                      disabled={loading}
-                      type="button"
-                      className="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm mx-2 btn-white">
-                      Cancel
-                    </button>
-                    <button
-                      onClick={() => router.push("/reschedule/" + uid)}
-                      disabled={loading}
-                      type="button"
-                      className="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-gray-700 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:text-sm mx-2 btn-white">
-                      Reschedule
-                    </button>
-                  </div>
-                </div>
               </div>
             </div>
           </div>
@@ -163,6 +166,12 @@ export async function getServerSideProps(context) {
     },
   });
 
+  if (!booking) {
+    return {
+      props: { booking: null },
+    };
+  }
+
   // Workaround since Next.js has problems serializing date objects (see https://github.com/vercel/next.js/issues/11993)
   const bookingObj = Object.assign({}, booking, {
     startTime: booking.startTime.toString(),
