diff --git a/components/booking/pages/AvailabilityPage.tsx b/components/booking/pages/AvailabilityPage.tsx
index 56abfdb7a8..2e681109e4 100644
--- a/components/booking/pages/AvailabilityPage.tsx
+++ b/components/booking/pages/AvailabilityPage.tsx
@@ -29,7 +29,7 @@ dayjs.extend(customParseFormat);
 const AvailabilityPage = ({ profile, eventType, workingHours }: AvailabilityPageProps) => {
   const router = useRouter();
   const { rescheduleUid } = router.query;
-  const themeLoaded = useTheme(profile.theme);
+  const { isReady } = useTheme(profile.theme);
 
   const selectedDate = useMemo(() => {
     const dateString = asStringOrNull(router.query.date);
@@ -83,20 +83,20 @@ const AvailabilityPage = ({ profile, eventType, workingHours }: AvailabilityPage
   };
 
   return (
-    themeLoaded && (
-      <>
-        <HeadSeo
-          title={`${rescheduleUid ? "Reschedule" : ""} ${eventType.title} | ${profile.name}`}
-          description={`${rescheduleUid ? "Reschedule" : ""} ${eventType.title}`}
-          name={profile.name}
-          avatar={profile.image}
-        />
-        <div>
-          <main
-            className={
-              "mx-auto my-0 md:my-24 transition-max-width ease-in-out duration-500 " +
-              (selectedDate ? "max-w-5xl" : "max-w-3xl")
-            }>
+    <>
+      <HeadSeo
+        title={`${rescheduleUid ? "Reschedule" : ""} ${eventType.title} | ${profile.name}`}
+        description={`${rescheduleUid ? "Reschedule" : ""} ${eventType.title}`}
+        name={profile.name}
+        avatar={profile.image}
+      />
+      <div>
+        <main
+          className={
+            "mx-auto my-0 md:my-24 transition-max-width ease-in-out duration-500 " +
+            (selectedDate ? "max-w-5xl" : "max-w-3xl")
+          }>
+          {isReady && (
             <div className="bg-white border-gray-200 rounded-sm sm:dark:border-gray-600 dark:bg-gray-900 md:border">
               {/* mobile: details */}
               <div className="block p-4 sm:p-8 md:hidden">
@@ -214,11 +214,11 @@ const AvailabilityPage = ({ profile, eventType, workingHours }: AvailabilityPage
                 )}
               </div>
             </div>
-            {(!eventType.users[0] || !isBrandingHidden(eventType.users[0])) && <PoweredByCalendso />}
-          </main>
-        </div>
-      </>
-    )
+          )}
+          {(!eventType.users[0] || !isBrandingHidden(eventType.users[0])) && <PoweredByCalendso />}
+        </main>
+      </div>
+    </>
   );
 
   function TimezoneDropdown() {
diff --git a/components/booking/pages/BookingPage.tsx b/components/booking/pages/BookingPage.tsx
index 9ee787c2fb..c78c5d7db2 100644
--- a/components/booking/pages/BookingPage.tsx
+++ b/components/booking/pages/BookingPage.tsx
@@ -38,7 +38,7 @@ type BookingPageProps = BookPageProps | TeamBookingPageProps;
 const BookingPage = (props: BookingPageProps) => {
   const router = useRouter();
   const { rescheduleUid } = router.query;
-  const themeLoaded = useTheme(props.profile.theme);
+  const { isReady } = useTheme(props.profile.theme);
 
   const date = asStringOrNull(router.query.date);
   const timeFormat = asStringOrNull(router.query.clock) === "24h" ? "H:mm" : "h:mma";
@@ -175,17 +175,17 @@ const BookingPage = (props: BookingPageProps) => {
   const bookingHandler = useCallback(_bookingHandler, []);
 
   return (
-    themeLoaded && (
-      <div>
-        <Head>
-          <title>
-            {rescheduleUid ? "Reschedule" : "Confirm"} your {props.eventType.title} with {props.profile.name}{" "}
-            | Cal.com
-          </title>
-          <link rel="icon" href="/favicon.ico" />
-        </Head>
+    <div>
+      <Head>
+        <title>
+          {rescheduleUid ? "Reschedule" : "Confirm"} your {props.eventType.title} with {props.profile.name} |
+          Cal.com
+        </title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
 
-        <main className="max-w-3xl mx-auto my-0 sm:my-24">
+      <main className="max-w-3xl mx-auto my-0 sm:my-24">
+        {isReady && (
           <div className="dark:bg-neutral-900 bg-white overflow-hidden border border-gray-200 dark:border-0 sm:rounded-sm">
             <div className="sm:flex px-4 py-5 sm:p-4">
               <div className="sm:w-1/2 sm:border-r sm:dark:border-black">
@@ -459,9 +459,9 @@ const BookingPage = (props: BookingPageProps) => {
               </div>
             </div>
           </div>
-        </main>
-      </div>
-    )
+        )}
+      </main>
+    </div>
   );
 };
 
diff --git a/pages/success.tsx b/pages/success.tsx
index 98f44263af..307f33c456 100644
--- a/pages/success.tsx
+++ b/pages/success.tsx
@@ -67,7 +67,7 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
   const needsConfirmation = props.eventType.requiresConfirmation && reschedule != "true";
 
   return (
-    isReady && (
+    (isReady && (
       <div className="bg-neutral-50 dark:bg-neutral-900 h-screen">
         <HeadSeo
           title={`Booking ${needsConfirmation ? "Submitted" : "Confirmed"}`}
@@ -235,7 +235,8 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
           </div>
         </main>
       </div>
-    )
+    )) ||
+    null
   );
 }
 
