diff --git a/components/booking/DatePicker.tsx b/components/booking/DatePicker.tsx
index f136fd44..7c39b591 100644
--- a/components/booking/DatePicker.tsx
+++ b/components/booking/DatePicker.tsx
@@ -166,9 +166,9 @@ const DatePicker = ({
   return selectedMonth ? (
     <div
       className={
-        "mt-8 sm:mt-0 sm:min-w-[480px] " +
+        "mt-8 sm:mt-0 sm:min-w-[455px] " +
         (selectedDate
-          ? "w-full sm:min-w-[465px] sm:w-1/2 md:w-1/3 sm:border-r sm:dark:border-gray-800 sm:pl-4 sm:pr-6 "
+          ? "w-full sm:w-1/2 md:w-1/3 sm:border-r sm:dark:border-gray-800 sm:pl-4 sm:pr-6 "
           : "sm:w-1/2 sm:pl-4")
       }>
       <div className="flex text-gray-600 font-light text-xl mb-4">
diff --git a/pages/[user].tsx b/pages/[user].tsx
index 209b213b..a27c0cd1 100644
--- a/pages/[user].tsx
+++ b/pages/[user].tsx
@@ -47,33 +47,83 @@ export default function User(props): User {
     </div>
   ));
   return (
-    isReady && (
-      <div className="bg-neutral-50 dark:bg-black h-screen">
-        <Head>
-          <title>{props.user.name || props.user.username} | Calendso</title>
-          <link rel="icon" href="/favicon.ico" />
-        </Head>
+    <>
+      <Head>
+        <title>{props.user.name || props.user.username} | Calendso</title>
+        <link rel="icon" href="/favicon.ico" />
 
-        <main className="max-w-3xl mx-auto py-24 px-4">
-          <div className="mb-8 text-center">
-            <Avatar user={props.user} className="mx-auto w-24 h-24 rounded-full mb-4" />
-            <h1 className="text-3xl font-bold text-neutral-900 dark:text-white mb-1">
-              {props.user.name || props.user.username}
-            </h1>
-            <p className="text-neutral-500 dark:text-white">{props.user.bio}</p>
-          </div>
-          <div className="space-y-6">{eventTypes}</div>
-          {eventTypes.length == 0 && (
-            <div className="shadow overflow-hidden rounded-sm">
-              <div className="p-8 text-center text-gray-400 dark:text-white">
-                <h2 className="font-semibold text-3xl text-gray-600">Uh oh!</h2>
-                <p className="max-w-md mx-auto">This user hasn&apos;t set up any event types yet.</p>
-              </div>
+        <meta name="title" content={"Meet " + (props.user.name || props.user.username) + " via Calendso"} />
+        <meta name="description" content={"Book a time with " + (props.user.name || props.user.username)} />
+
+        <meta property="og:type" content="website" />
+        <meta property="og:url" content="https://calendso/" />
+        <meta
+          property="og:title"
+          content={"Meet " + (props.user.name || props.user.username) + " via Calendso"}
+        />
+        <meta
+          property="og:description"
+          content={"Book a time with " + (props.user.name || props.user.username)}
+        />
+        <meta
+          property="og:image"
+          content={
+            "https://og-image-one-pi.vercel.app/" +
+            encodeURIComponent("Meet **" + (props.user.name || props.user.username) + "** <br>").replace(
+              /'/g,
+              "%27"
+            ) +
+            ".png?md=1&images=https%3A%2F%2Fcalendso.com%2Fcalendso-logo-white.svg&images=" +
+            encodeURIComponent(props.user.avatar)
+          }
+        />
+
+        <meta property="twitter:card" content="summary_large_image" />
+        <meta property="twitter:url" content="https://calendso/" />
+        <meta
+          property="twitter:title"
+          content={"Meet " + (props.user.name || props.user.username) + " via Calendso"}
+        />
+        <meta
+          property="twitter:description"
+          content={"Book a time with " + (props.user.name || props.user.username)}
+        />
+        <meta
+          property="twitter:image"
+          content={
+            "https://og-image-one-pi.vercel.app/" +
+            encodeURIComponent("Meet **" + (props.user.name || props.user.username) + "** <br>").replace(
+              /'/g,
+              "%27"
+            ) +
+            ".png?md=1&images=https%3A%2F%2Fcalendso.com%2Fcalendso-logo-white.svg&images=" +
+            encodeURIComponent(props.user.avatar)
+          }
+        />
+      </Head>
+      {isReady && (
+        <div className="bg-neutral-50 dark:bg-black h-screen">
+          <main className="max-w-3xl mx-auto py-24 px-4">
+            <div className="mb-8 text-center">
+              <Avatar user={props.user} className="mx-auto w-24 h-24 rounded-full mb-4" />
+              <h1 className="text-3xl font-bold text-neutral-900 dark:text-white mb-1">
+                {props.user.name || props.user.username}
+              </h1>
+              <p className="text-neutral-500 dark:text-white">{props.user.bio}</p>
             </div>
-          )}
-        </main>
-      </div>
-    )
+            <div className="space-y-6">{eventTypes}</div>
+            {eventTypes.length == 0 && (
+              <div className="shadow overflow-hidden rounded-sm">
+                <div className="p-8 text-center text-gray-400 dark:text-white">
+                  <h2 className="font-semibold text-3xl text-gray-600">Uh oh!</h2>
+                  <p className="max-w-md mx-auto">This user hasn&apos;t set up any event types yet.</p>
+                </div>
+              </div>
+            )}
+          </main>
+        </div>
+      )}
+    </>
   );
 }
 
diff --git a/pages/[user]/[type].tsx b/pages/[user]/[type].tsx
index 21185826..677cabfb 100644
--- a/pages/[user]/[type].tsx
+++ b/pages/[user]/[type].tsx
@@ -78,136 +78,139 @@ export default function Type(props): Type {
   };
 
   return (
-    isReady && (
-      <div>
-        <Head>
-          <title>
-            {rescheduleUid && "Reschedule"} {props.eventType.title} | {props.user.name || props.user.username}{" "}
-            | Calendso
-          </title>
-          <meta name="title" content={"Meet " + (props.user.name || props.user.username) + " via Calendso"} />
-          <meta name="description" content={props.eventType.description} />
+    <>
+      <Head>
+        <title>
+          {rescheduleUid && "Reschedule"} {props.eventType.title} | {props.user.name || props.user.username} |
+          Calendso
+        </title>
+        <meta name="title" content={"Meet " + (props.user.name || props.user.username) + " via Calendso"} />
+        <meta name="description" content={props.eventType.description} />
 
-          <meta property="og:type" content="website" />
-          <meta property="og:url" content="https://calendso/" />
-          <meta
-            property="og:title"
-            content={"Meet " + (props.user.name || props.user.username) + " via Calendso"}
-          />
-          <meta property="og:description" content={props.eventType.description} />
-          <meta
-            property="og:image"
-            content={
-              "https://og-image-one-pi.vercel.app/" +
-              encodeURIComponent(
-                "Meet **" + (props.user.name || props.user.username) + "** <br>" + props.eventType.description
-              ).replace(/'/g, "%27") +
-              ".png?md=1&images=https%3A%2F%2Fcalendso.com%2Fcalendso-logo-white.svg&images=" +
-              encodeURIComponent(props.user.avatar)
-            }
-          />
+        <meta property="og:type" content="website" />
+        <meta property="og:url" content="https://calendso/" />
+        <meta
+          property="og:title"
+          content={"Meet " + (props.user.name || props.user.username) + " via Calendso"}
+        />
+        <meta property="og:description" content={props.eventType.description} />
+        <meta
+          property="og:image"
+          content={
+            "https://og-image-one-pi.vercel.app/" +
+            encodeURIComponent(
+              "Meet **" + (props.user.name || props.user.username) + "** <br>" + props.eventType.description
+            ).replace(/'/g, "%27") +
+            ".png?md=1&images=https%3A%2F%2Fcalendso.com%2Fcalendso-logo-white.svg&images=" +
+            encodeURIComponent(props.user.avatar)
+          }
+        />
 
-          <meta property="twitter:card" content="summary_large_image" />
-          <meta property="twitter:url" content="https://calendso/" />
-          <meta
-            property="twitter:title"
-            content={"Meet " + (props.user.name || props.user.username) + " via Calendso"}
-          />
-          <meta property="twitter:description" content={props.eventType.description} />
-          <meta
-            property="twitter:image"
-            content={
-              "https://og-image-one-pi.vercel.app/" +
-              encodeURIComponent(
-                "Meet **" + (props.user.name || props.user.username) + "** <br>" + props.eventType.description
-              ).replace(/'/g, "%27") +
-              ".png?md=1&images=https%3A%2F%2Fcalendso.com%2Fcalendso-logo-white.svg&images=" +
-              encodeURIComponent(props.user.avatar)
-            }
-          />
-        </Head>
-        <main
-          className={
-            "mx-auto my-0 md:my-24 transition-max-width ease-in-out duration-500 " +
-            (selectedDate ? "max-w-5xl" : "max-w-3xl")
-          }>
-          <div className="sm:dark:border-gray-600 dark:bg-gray-900 bg-white md:border border-gray-200 rounded-sm">
-            {/* mobile: details */}
-            <div className="p-4 sm:p-8 block md:hidden">
-              <div className="flex items-center">
-                <Avatar user={props.user} className="inline-block h-9 w-9 rounded-full" />
-                <div className="ml-3">
-                  <p className="text-sm font-medium dark:text-gray-300 text-black">{props.user.name}</p>
-                  <div className="flex gap-2 text-xs font-medium text-gray-600">
-                    {props.eventType.title}
-                    <div>
-                      <ClockIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
-                      {props.eventType.length} minutes
+        <meta property="twitter:card" content="summary_large_image" />
+        <meta property="twitter:url" content="https://calendso/" />
+        <meta
+          property="twitter:title"
+          content={"Meet " + (props.user.name || props.user.username) + " via Calendso"}
+        />
+        <meta property="twitter:description" content={props.eventType.description} />
+        <meta
+          property="twitter:image"
+          content={
+            "https://og-image-one-pi.vercel.app/" +
+            encodeURIComponent(
+              "Meet **" + (props.user.name || props.user.username) + "** <br>" + props.eventType.description
+            ).replace(/'/g, "%27") +
+            ".png?md=1&images=https%3A%2F%2Fcalendso.com%2Fcalendso-logo-white.svg&images=" +
+            encodeURIComponent(props.user.avatar)
+          }
+        />
+      </Head>
+
+      {isReady && (
+        <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")
+            }>
+            <div className="sm:dark:border-gray-600 dark:bg-gray-900 bg-white md:border border-gray-200 rounded-sm">
+              {/* mobile: details */}
+              <div className="p-4 sm:p-8 block md:hidden">
+                <div className="flex items-center">
+                  <Avatar user={props.user} className="inline-block h-9 w-9 rounded-full" />
+                  <div className="ml-3">
+                    <p className="text-sm font-medium dark:text-gray-300 text-black">{props.user.name}</p>
+                    <div className="flex gap-2 text-xs font-medium text-gray-600">
+                      {props.eventType.title}
+                      <div>
+                        <ClockIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
+                        {props.eventType.length} minutes
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
-              <p className="dark:text-gray-200 text-gray-600 mt-3">{props.eventType.description}</p>
-            </div>
-
-            <div className="sm:flex px-4 sm:py-5 sm:p-4">
-              <div
-                className={
-                  "hidden md:block pr-8 sm:border-r sm:dark:border-gray-800 " +
-                  (selectedDate ? "sm:w-1/3" : "sm:w-1/2")
-                }>
-                <Avatar user={props.user} className="w-16 h-16 rounded-full mb-4" />
-                <h2 className="font-medium dark:text-gray-300 text-gray-500">{props.user.name}</h2>
-                <h1 className="text-3xl font-semibold dark:text-white text-gray-800 mb-4">
-                  {props.eventType.title}
-                </h1>
-                <p className="text-gray-500 mb-1 px-2 py-1 -ml-2">
-                  <ClockIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
-                  {props.eventType.length} minutes
-                </p>
-
-                <TimezoneDropdown />
-
-                <p className="dark:text-gray-200 text-gray-600 mt-3 mb-8">{props.eventType.description}</p>
-              </div>
-              <DatePicker
-                date={selectedDate}
-                periodType={props.eventType?.periodType}
-                periodStartDate={props.eventType?.periodStartDate}
-                periodEndDate={props.eventType?.periodEndDate}
-                periodDays={props.eventType?.periodDays}
-                periodCountCalendarDays={props.eventType?.periodCountCalendarDays}
-                weekStart={props.user.weekStart}
-                onDatePicked={changeDate}
-                workingHours={props.workingHours}
-                organizerTimeZone={props.eventType.timeZone || props.user.timeZone}
-                inviteeTimeZone={timeZone()}
-                eventLength={props.eventType.length}
-                minimumBookingNotice={props.eventType.minimumBookingNotice}
-              />
-
-              <div className="ml-1 mt-4 block sm:hidden">
-                <TimezoneDropdown />
+                <p className="dark:text-gray-200 text-gray-600 mt-3">{props.eventType.description}</p>
               </div>
 
-              {selectedDate && (
-                <AvailableTimes
-                  workingHours={props.workingHours}
-                  timeFormat={timeFormat}
-                  organizerTimeZone={props.eventType.timeZone || props.user.timeZone}
-                  minimumBookingNotice={props.eventType.minimumBookingNotice}
-                  eventTypeId={props.eventType.id}
-                  eventLength={props.eventType.length}
+              <div className="sm:flex px-4 sm:py-5 sm:p-4">
+                <div
+                  className={
+                    "hidden md:block pr-8 sm:border-r sm:dark:border-gray-800 " +
+                    (selectedDate ? "sm:w-1/3" : "sm:w-1/2")
+                  }>
+                  <Avatar user={props.user} className="w-16 h-16 rounded-full mb-4" />
+                  <h2 className="font-medium dark:text-gray-300 text-gray-500">{props.user.name}</h2>
+                  <h1 className="text-3xl font-semibold dark:text-white text-gray-800 mb-4">
+                    {props.eventType.title}
+                  </h1>
+                  <p className="text-gray-500 mb-1 px-2 py-1 -ml-2">
+                    <ClockIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
+                    {props.eventType.length} minutes
+                  </p>
+
+                  <TimezoneDropdown />
+
+                  <p className="dark:text-gray-200 text-gray-600 mt-3 mb-8">{props.eventType.description}</p>
+                </div>
+                <DatePicker
                   date={selectedDate}
-                  user={props.user}
+                  periodType={props.eventType?.periodType}
+                  periodStartDate={props.eventType?.periodStartDate}
+                  periodEndDate={props.eventType?.periodEndDate}
+                  periodDays={props.eventType?.periodDays}
+                  periodCountCalendarDays={props.eventType?.periodCountCalendarDays}
+                  weekStart={props.user.weekStart}
+                  onDatePicked={changeDate}
+                  workingHours={props.workingHours}
+                  organizerTimeZone={props.eventType.timeZone || props.user.timeZone}
+                  inviteeTimeZone={timeZone()}
+                  eventLength={props.eventType.length}
+                  minimumBookingNotice={props.eventType.minimumBookingNotice}
                 />
-              )}
+
+                <div className="ml-1 mt-4 block sm:hidden">
+                  <TimezoneDropdown />
+                </div>
+
+                {selectedDate && (
+                  <AvailableTimes
+                    workingHours={props.workingHours}
+                    timeFormat={timeFormat}
+                    organizerTimeZone={props.eventType.timeZone || props.user.timeZone}
+                    minimumBookingNotice={props.eventType.minimumBookingNotice}
+                    eventTypeId={props.eventType.id}
+                    eventLength={props.eventType.length}
+                    date={selectedDate}
+                    user={props.user}
+                  />
+                )}
+              </div>
             </div>
-          </div>
-          {!props.user.hideBranding && <PoweredByCalendso />}
-        </main>
-      </div>
-    )
+            {!props.user.hideBranding && <PoweredByCalendso />}
+          </main>
+        </div>
+      )}
+    </>
   );
 
   function TimezoneDropdown() {
