diff --git a/packages/platform/examples/base/src/pages/[bookingUid].tsx b/packages/platform/examples/base/src/pages/[bookingUid].tsx
index 0c4cc8250d..54968af26b 100644
--- a/packages/platform/examples/base/src/pages/[bookingUid].tsx
+++ b/packages/platform/examples/base/src/pages/[bookingUid].tsx
@@ -1,14 +1,26 @@
 import { Navbar } from "@/components/Navbar";
+import { CheckCircle2Icon } from "lucide-react";
+import { X } from "lucide-react";
 import { Inter } from "next/font/google";
 import { useRouter } from "next/router";
 
 import { useGetBooking, useCancelBooking } from "@calcom/atoms";
+import dayjs from "@calcom/dayjs";
 
 const inter = Inter({ subsets: ["latin"] });
 
 export default function Bookings(props: { calUsername: string; calEmail: string }) {
   const router = useRouter();
+
   const { isLoading, data: booking, refetch } = useGetBooking((router.query.bookingUid as string) ?? "");
+  const startTime = dayjs(booking?.startTime).format(12 === 12 ? "h:mma" : "HH:mm");
+  const endTime = dayjs(booking?.endTime).format(12 === 12 ? "h:mma" : "HH:mm");
+  const date = dayjs(booking?.startTime).toDate();
+  const dateToday = dayjs(booking?.startTime).date();
+  const year = dayjs(booking?.startTime).year();
+  const day = dayjs(date).format("dddd");
+  const month = dayjs(date).format("MMMM");
+
   const { mutate: cancelBooking } = useCancelBooking({
     onSuccess: () => {
       refetch();
@@ -20,41 +32,118 @@ export default function Bookings(props: { calUsername: string; calEmail: string
       <Navbar username={props.calUsername} />
       {isLoading && <p>Loading...</p>}
       {!isLoading && booking && (
-        <div key={booking.id} className="my-2 w-[440px] overflow-hidden rounded p-2 shadow-md">
-          <div className="px-6 py-4">
-            <div className="text-md mb-0.5 font-semibold">
-              <p>{booking.title}</p>
+        <div
+          key={booking.id}
+          className="my-10 w-[440px] overflow-hidden rounded-md border-[0.7px] border-black px-10 py-5">
+          {booking.status === "ACCEPTED" ? (
+            <div className="mx-2 my-4 flex flex-col items-center justify-center text-center">
+              <CheckCircle2Icon className="my-5 flex h-[40px] w-[40px] rounded-full bg-green-500" />
+              <h1 className="text-xl font-bold">This meeting is scheduled</h1>
+              <p>We sent an email with a calendar invitation with the details to everyone.</p>
             </div>
+          ) : (
+            <div className="mx-2 my-4 flex flex-col items-center justify-center text-center">
+              <X className="my-5 flex h-[40px] w-[40px] rounded-full bg-red-400" />
+              <h4 className="text-2xl font-bold">This event is cancelled</h4>
+            </div>
+          )}
+          <hr className="mx-2 bg-black text-black" />
+          <div className="mx-2 my-7 flex flex-col gap-y-3">
+            <div className="flex gap-[70px]">
+              <div>
+                <h4>What</h4>
+              </div>
+              <div>
+                <p>{booking.title}</p>
+              </div>
+            </div>
+            <div className="flex gap-[70px]">
+              <div>
+                <h4>When</h4>
+              </div>
+              <div>
+                <div>
+                  <p
+                    style={{
+                      textDecoration: booking.status === "ACCEPTED" ? "normal" : "line-through",
+                    }}>
+                    {`${day}, ${month} ${dateToday}, ${year}`}
+                  </p>
+                </div>
+                <div>
+                  <p
+                    style={{
+                      textDecoration: booking.status === "ACCEPTED" ? "normal" : "line-through",
+                    }}>
+                    {`${startTime}`} - {`${endTime}`}
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div className="flex gap-[70px]">
+              <div>Who</div>
+              <div>
+                <div>
+                  <div>
+                    <h4>
+                      {booking.user.name}{" "}
+                      <span className="rounded-md bg-blue-800 px-2 text-sm text-white">Host</span>
+                    </h4>
+                    <p>{booking.user.email}</p>
+                  </div>
+                </div>
+                <div>
+                  <div>
+                    <h4>{`${booking.responses.name}`}</h4>
+                    <p>{`${booking.responses.email}`}</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+            {booking.responses.notes && (
+              <div className="flex gap-[70px]">
+                <div className="w-[40px]">
+                  <h4>Additional notes</h4>
+                </div>
+                <div>
+                  <p>{`${booking.responses.notes}`}</p>
+                </div>
+              </div>
+            )}
           </div>
-          <div className="px-6 pb-2">
-            <p>{booking.description}</p>
-            <p>{booking.startTime}</p>
-            <p>{booking.endTime}</p>
-            <p>{booking.status}</p>
-          </div>
-          <div className="px-6">
-            <button
-              className="rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
-              onClick={() => {
-                cancelBooking({
-                  id: parseInt(booking.id),
-                  uid: booking.uid,
-                  cancellationReason: "User request",
-                  allRemainingBookings: true,
-                });
-              }}>
-              Cancel
-            </button>
-            <button
-              className="ml-4 rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
-              onClick={() => {
-                router.push(
-                  `/booking?rescheduleUid=${booking?.uid}&eventTypeSlug=${booking?.eventType?.slug}`
-                );
-              }}>
-              Reschedule
-            </button>
-          </div>
+
+          {booking.status === "ACCEPTED" && (
+            <>
+              <hr className="mx-3" />
+              <div className="mx-2 my-3 text-center">
+                <p>
+                  Need to make a change?{" "}
+                  <button
+                    className="underline"
+                    onClick={() => {
+                      router.push(
+                        `/booking?rescheduleUid=${booking?.uid}&eventTypeSlug=${booking?.eventType?.slug}`
+                      );
+                    }}>
+                    Reschedule
+                  </button>{" "}
+                  or{" "}
+                  <button
+                    className="underline"
+                    onClick={() => {
+                      cancelBooking({
+                        id: parseInt(booking.id),
+                        uid: booking.uid,
+                        cancellationReason: "User request",
+                        allRemainingBookings: true,
+                      });
+                    }}>
+                    Cancel
+                  </button>
+                </p>
+              </div>
+            </>
+          )}
         </div>
       )}
     </main>
diff --git a/packages/platform/examples/base/src/pages/booking.tsx b/packages/platform/examples/base/src/pages/booking.tsx
index e0606fdb01..1a8f8c81ef 100644
--- a/packages/platform/examples/base/src/pages/booking.tsx
+++ b/packages/platform/examples/base/src/pages/booking.tsx
@@ -19,20 +19,29 @@ export default function Bookings(props: { calUsername: string; calEmail: string
       className={`flex min-h-screen flex-col ${inter.className} main text-default flex min-h-full w-full flex-col items-center overflow-visible`}>
       <Navbar username={props.calUsername} />
       <div>
-        <h1 className="my-4 text-2xl font-semibold">{props.calUsername} Public Booking Page</h1>
+        <h1 className="mx-10 my-4 text-2xl font-semibold">{props.calUsername} Public Booking Page</h1>
 
         {isLoadingEvents && !eventTypeSlug && <p>Loading...</p>}
 
         {!isLoadingEvents && !eventTypeSlug && Boolean(eventTypes?.length) && !rescheduleUid && (
-          <div className="flex flex-row gap-4">
-            {eventTypes?.map((event: { id: number; slug: string; title: string }) => (
-              <button
-                key={event.id}
-                className="rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
-                onClick={() => setEventTypeSlug(event.slug)}>
-                {event.slug}
-              </button>
-            ))}
+          <div className="flex flex-col gap-4">
+            {eventTypes?.map((event: { id: number; slug: string; title: string }) => {
+              const formatEventSlug = event.slug
+                .split("-")
+                .map((item) => `${item[0].toLocaleUpperCase()}${item.slice(1)}`)
+                .join(" ");
+
+              return (
+                <div
+                  onClick={() => setEventTypeSlug(event.slug)}
+                  className="mx-10 w-[80vw] cursor-pointer rounded-md border-[0.8px] border-black px-10 py-4"
+                  key={event.id}>
+                  <h1 className="text-lg font-semibold">{formatEventSlug}</h1>
+                  <p>{`/${event.slug}`}</p>
+                  <span className="border-none bg-gray-800 px-2 text-white">{event?.length}</span>
+                </div>
+              );
+            })}
           </div>
         )}
 
diff --git a/packages/platform/examples/base/src/pages/bookings.tsx b/packages/platform/examples/base/src/pages/bookings.tsx
index 00f2067c52..d9d38c4db5 100644
--- a/packages/platform/examples/base/src/pages/bookings.tsx
+++ b/packages/platform/examples/base/src/pages/bookings.tsx
@@ -3,6 +3,7 @@ import { Inter } from "next/font/google";
 import { useRouter } from "next/router";
 
 import { useGetBookings } from "@calcom/atoms";
+import dayjs from "@calcom/dayjs";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -29,25 +30,45 @@ export default function Bookings(props: { calUsername: string; calEmail: string
       {isLoading && <p>Loading...</p>}
       {!isLoading &&
         (Boolean(upcomingBookings?.bookings.length) || Boolean(pastBookings?.bookings.length)) &&
-        [...pastBookings?.bookings, ...upcomingBookings?.bookings].map((booking) => (
-          <div
-            key={booking.id}
-            className="my-2 w-[440px] cursor-pointer overflow-hidden rounded shadow-md"
-            onClick={() => {
-              router.push(`/${booking.uid}`);
-            }}>
-            <div className="px-6 py-4">
-              <div className="text-md mb-0.5 font-semibold">
-                <p>{booking.title}</p>
+        [...pastBookings?.bookings, ...upcomingBookings?.bookings].map((booking) => {
+          const date = dayjs(booking.startTime).toDate();
+          const startTime = dayjs(booking?.startTime).format(12 === 12 ? "h:mma" : "HH:mm");
+          const endTime = dayjs(booking?.endTime).format(12 === 12 ? "h:mma" : "HH:mm");
+          const day = dayjs(date).format("dddd");
+          const month = dayjs(date).format("MMMM");
+
+          return (
+            <div
+              key={booking.id}
+              className="mx-10 my-2 flex w-[80vw] cursor-pointer items-center justify-between overflow-hidden rounded border-[0.8px] border-black py-4"
+              onClick={() => {
+                router.push(`/${booking.uid}`);
+              }}>
+              <div>
+                <div className="px-6">{`${day}, ${dayjs(booking.startTime).date()} ${month}`}</div>
+                <div className="px-6">
+                  <p>
+                    {startTime} - {endTime}
+                  </p>{" "}
+                  <p />
+                </div>
+              </div>
+              <div>
+                <div className="px-6">
+                  <div className="text-md mb-0.5 font-semibold">
+                    <p>{booking.title}</p>
+                  </div>
+                </div>
+                <div className="px-6">
+                  <p>
+                    {booking.user.name} and {booking.attendees[0].name}
+                  </p>{" "}
+                  <p />
+                </div>
               </div>
             </div>
-            <div className="px-6 pb-2">
-              <p>{booking.startTime}</p>
-              <p>{booking.endTime}</p>
-              <p>{booking.status}</p>
-            </div>
-          </div>
-        ))}
+          );
+        })}
     </main>
   );
 }
diff --git a/packages/platform/examples/base/src/pages/calendars.tsx b/packages/platform/examples/base/src/pages/calendars.tsx
index d8452ceda7..0a273b3061 100644
--- a/packages/platform/examples/base/src/pages/calendars.tsx
+++ b/packages/platform/examples/base/src/pages/calendars.tsx
@@ -13,7 +13,13 @@ export default function Calendars(props: { calUsername: string; calEmail: string
     <main className={`flex min-h-screen flex-col ${inter.className}`}>
       <Navbar username={props.calUsername} />
       <div className="p-4">
-        <h1 className="my-4 text-lg font-bold">Your Connected Calendars</h1>
+        {!!connectedCalendars?.length ? (
+          <h1 className="my-4 text-lg font-bold">Your Connected Calendars</h1>
+        ) : (
+          <h1 className="mx-10 my-4 text-xl font-bold">
+            You have not connected any calendars yet, please connect your Google calendar.
+          </h1>
+        )}
         {isLoading ? (
           <div>Loading...</div>
         ) : (
@@ -29,7 +35,7 @@ export default function Calendars(props: { calUsername: string; calEmail: string
             </div>
           ))
         )}
-        <hr className="my-4" />
+        {!!connectedCalendars?.length && <hr className="my-4" />}
         {!isLoading && destinationCalendar.id && (
           <div className="">
             <h2 className="text-md font-bold">Destination Calendar: {destinationCalendar.name}</h2>
diff --git a/packages/platform/examples/base/src/pages/index.tsx b/packages/platform/examples/base/src/pages/index.tsx
index 3014ea30aa..525ffe1a79 100644
--- a/packages/platform/examples/base/src/pages/index.tsx
+++ b/packages/platform/examples/base/src/pages/index.tsx
@@ -8,12 +8,12 @@ const poppins = Poppins({ subsets: ["latin"], weight: ["400", "800"] });
 
 export default function Home(props: { calUsername: string; calEmail: string }) {
   return (
-    <main className={`flex min-h-screen flex-col ${inter.className}`}>
+    <main className={`flex min-h-screen flex-col ${inter.className} items-center justify-center`}>
       <Navbar username={props.calUsername} />
       <div
-        className={`flex h-[80vh] w-full items-center justify-center gap-y-3 p-14 font-mono lg:flex ${inter.className}`}>
-        <div>
-          <h1 className={`${poppins.className} w-[70%] pb-3 text-8xl font-bold`}>
+        className={` h-[100vh] w-full items-center justify-center gap-y-3  font-mono lg:flex ${inter.className} gap-16 `}>
+        <div className="ml-32">
+          <h1 className={`${poppins.className} w-[100%] pb-3 text-7xl font-bold`}>
             The all in one Scheduling marketplace
           </h1>
           <p className={`w-[70%] font-normal ${inter.className} pb-3 text-2xl`}>
@@ -21,12 +21,13 @@ export default function Home(props: { calUsername: string; calEmail: string }) {
           </p>
           <GcalConnect className="h-[40px] bg-gradient-to-r from-[#8A2387] via-[#E94057] to-[#F27121] text-center text-base font-semibold text-transparent text-white hover:bg-orange-700" />
         </div>
-        <div>
+        <div className="hidden lg:block">
           <img
-            width="700px"
-            height="700px"
+            width="76%"
+            height="76%"
+            className=" rounded-lg shadow-2xl"
             alt="cover image"
-            src="https://images.unsplash.com/photo-1508030592112-5b1661446db8?q=80&w=3200&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+            src="https://images.unsplash.com/photo-1506784365847-bbad939e9335?q=80&w=2668&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
           />
         </div>
       </div>