diff --git a/pages/call/[uid].tsx b/pages/call/[uid].tsx
index e34b1af7..02cd58d5 100644
--- a/pages/call/[uid].tsx
+++ b/pages/call/[uid].tsx
@@ -14,15 +14,50 @@ export default function JoinCall(props, session) {
 
   //if no booking redirectis to the 404 page
   const emptyBooking = props.booking === null;
+
+  //daily.co calls have a 60 minute exit and entry buffer when a user enters a call when it's not available it will trigger the modals
+  const now = new Date();
+  const enterDate = new Date(now.getTime() + 60 * 60 * 1000);
+  const exitDate = new Date(now.getTime() - 60 * 60 * 1000);
+
+  console.log(enterDate);
+
+  //find out if the meeting is upcoming or in the past
+  const isPast = new Date(props.booking.endTime) <= exitDate;
+  const isUpcoming = new Date(props.booking.startTime) >= enterDate;
+  const meetingUnavailable = isUpcoming == true || isPast == true;
+
   useEffect(() => {
     if (emptyBooking) {
       router.push("/call/no-meeting-found");
     }
+
+    if (isUpcoming) {
+      router.push(`/call/meeting-not-started/${props.booking.uid}`);
+    }
+
+    if (isPast) {
+      router.push(`/call/meeting-ended/${props.booking.uid}`);
+    }
   });
 
   useEffect(() => {
-    if (!emptyBooking && session.userid !== props.booking.user.id) {
+    if (!meetingUnavailable && !emptyBooking && session.userid !== props.booking.user.id) {
       const callFrame = DailyIframe.createFrame({
+        theme: {
+          colors: {
+            accent: "#FFF",
+            accentText: "#111111",
+            background: "#111111",
+            backgroundAccent: "#111111",
+            baseText: "#FFF",
+            border: "#000000",
+            mainAreaBg: "#111111",
+            mainAreaBgAccent: "#111111",
+            mainAreaText: "#FFF",
+            supportiveText: "#FFF",
+          },
+        },
         showLeaveButton: true,
         iframeStyle: {
           position: "fixed",
@@ -35,8 +70,22 @@ export default function JoinCall(props, session) {
         showLeaveButton: true,
       });
     }
-    if (!emptyBooking && session.userid === props.booking.user.id) {
+    if (!meetingUnavailable && !emptyBooking && session.userid === props.booking.user.id) {
       const callFrame = DailyIframe.createFrame({
+        theme: {
+          colors: {
+            accent: "#FFF",
+            accentText: "#111111",
+            background: "#111111",
+            backgroundAccent: "#111111",
+            baseText: "#FFF",
+            border: "#000000",
+            mainAreaBg: "#111111",
+            mainAreaBgAccent: "#111111",
+            mainAreaText: "#FFF",
+            supportiveText: "#FFF",
+          },
+        },
         showLeaveButton: true,
         iframeStyle: {
           position: "fixed",
@@ -64,7 +113,7 @@ export default function JoinCall(props, session) {
       <div style={{ zIndex: 2, position: "relative" }}>
         <Link href="/">
           <img
-            className="hidden sm:inline-block z-10 fixed w-auto h-5"
+            className="fixed z-10 hidden w-auto h-5 sm:inline-block"
             src="https://cal.com/logo-white.svg"
             alt="Cal.com Logo"
             style={{
@@ -80,12 +129,17 @@ export default function JoinCall(props, session) {
 }
 
 export async function getServerSideProps(context) {
-  const booking = await prisma.booking.findFirst({
+  const booking = await prisma.booking.findUnique({
     where: {
       uid: context.query.uid,
     },
     select: {
+      uid: true,
       id: true,
+      title: true,
+      description: true,
+      startTime: true,
+      endTime: true,
       user: {
         select: {
           credentials: true,
@@ -107,11 +161,22 @@ export async function getServerSideProps(context) {
     },
   });
 
+  if (!booking) {
+    // TODO: Booking is already cancelled
+    return {
+      props: { booking: null },
+    };
+  }
+
+  const bookingObj = Object.assign({}, booking, {
+    startTime: booking.startTime.toString(),
+    endTime: booking.endTime.toString(),
+  });
   const session = await getSession();
 
   return {
     props: {
-      booking: booking,
+      booking: bookingObj,
       session: session,
     },
   };
diff --git a/pages/call/meeting-ended/[uid].tsx b/pages/call/meeting-ended/[uid].tsx
new file mode 100644
index 00000000..d7c35c95
--- /dev/null
+++ b/pages/call/meeting-ended/[uid].tsx
@@ -0,0 +1,134 @@
+import { CalendarIcon, XIcon } from "@heroicons/react/outline";
+import { ArrowRightIcon } from "@heroicons/react/solid";
+import dayjs from "dayjs";
+import { getSession } from "next-auth/client";
+import { useRouter } from "next/router";
+import { useState } from "react";
+import { useEffect } from "react";
+
+import prisma from "@lib/prisma";
+
+import { HeadSeo } from "@components/seo/head-seo";
+import Button from "@components/ui/Button";
+
+export default function MeetingUnavailable(props) {
+  const router = useRouter();
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [is24h, setIs24h] = useState(false);
+
+  //if no booking redirectis to the 404 page
+  const emptyBooking = props.booking === null;
+  useEffect(() => {
+    if (emptyBooking) {
+      router.push("/call/no-meeting-found");
+    }
+  });
+  if (!emptyBooking) {
+    return (
+      <div>
+        <HeadSeo title={`Meeting Unavaialble`} description={`Meeting Unavailable`} />
+        <main className="max-w-3xl mx-auto my-24">
+          <div className="fixed inset-0 z-50 overflow-y-auto">
+            <div className="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
+              <div className="fixed inset-0 my-4 transition-opacity sm:my-0" aria-hidden="true">
+                <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
+                  &#8203;
+                </span>
+                <div
+                  className="inline-block px-4 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6"
+                  role="dialog"
+                  aria-modal="true"
+                  aria-labelledby="modal-headline">
+                  <div>
+                    <div className="flex items-center justify-center w-12 h-12 mx-auto bg-red-100 rounded-full">
+                      <XIcon className="w-6 h-6 text-red-600" />
+                    </div>
+                    <div className="mt-3 text-center sm:mt-5">
+                      <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
+                        This meeting is in the past.
+                      </h3>
+                    </div>
+                    <div className="py-4 mt-4 border-t border-b">
+                      <h2 className="mb-2 text-lg font-medium text-center text-gray-600 font-cal">
+                        {props.booking.title}
+                      </h2>
+                      <p className="text-center text-gray-500">
+                        <CalendarIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
+                        {dayjs(props.booking.startTime).format(
+                          (is24h ? "H:mm" : "h:mma") + ", dddd DD MMMM YYYY"
+                        )}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="mt-5 text-center sm:mt-6">
+                    <div className="mt-5">
+                      <Button data-testid="return-home" href="/event-types" EndIcon={ArrowRightIcon}>
+                        Go back home
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
+    );
+  }
+  return null;
+}
+
+export async function getServerSideProps(context) {
+  const booking = await prisma.booking.findUnique({
+    where: {
+      uid: context.query.uid,
+    },
+    select: {
+      uid: true,
+      id: true,
+      title: true,
+      description: true,
+      startTime: true,
+      endTime: true,
+      user: {
+        select: {
+          credentials: true,
+        },
+      },
+      attendees: true,
+      dailyRef: {
+        select: {
+          dailyurl: true,
+          dailytoken: true,
+        },
+      },
+      references: {
+        select: {
+          uid: true,
+          type: true,
+        },
+      },
+    },
+  });
+
+  if (!booking) {
+    // TODO: Booking is already cancelled
+    return {
+      props: { booking: null },
+    };
+  }
+
+  const bookingObj = Object.assign({}, booking, {
+    startTime: booking.startTime.toString(),
+    endTime: booking.endTime.toString(),
+  });
+  const session = await getSession();
+
+  return {
+    props: {
+      booking: bookingObj,
+      session: session,
+    },
+  };
+}
diff --git a/pages/call/meeting-not-started/[uid].tsx b/pages/call/meeting-not-started/[uid].tsx
new file mode 100644
index 00000000..c2d1aceb
--- /dev/null
+++ b/pages/call/meeting-not-started/[uid].tsx
@@ -0,0 +1,138 @@
+import { CalendarIcon, XIcon } from "@heroicons/react/outline";
+import { ArrowRightIcon } from "@heroicons/react/solid";
+import dayjs from "dayjs";
+import { getSession } from "next-auth/client";
+import { useRouter } from "next/router";
+import { useState } from "react";
+import { useEffect } from "react";
+
+import prisma from "@lib/prisma";
+
+import { HeadSeo } from "@components/seo/head-seo";
+import Button from "@components/ui/Button";
+
+export default function MeetingUnavailable(props) {
+  const router = useRouter();
+
+  //if no booking redirectis to the 404 page
+  const emptyBooking = props.booking === null;
+  useEffect(() => {
+    if (emptyBooking) {
+      router.push("/call/no-meeting-found");
+    }
+  });
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [is24h, setIs24h] = useState(false);
+  if (!emptyBooking) {
+    return (
+      <div>
+        <HeadSeo title={`Meeting Unavaialble`} description={`Meeting Unavailable`} />
+        <main className="max-w-3xl mx-auto my-24">
+          <div className="fixed inset-0 z-50 overflow-y-auto">
+            <div className="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
+              <div className="fixed inset-0 my-4 transition-opacity sm:my-0" aria-hidden="true">
+                <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
+                  &#8203;
+                </span>
+                <div
+                  className="inline-block px-4 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6"
+                  role="dialog"
+                  aria-modal="true"
+                  aria-labelledby="modal-headline">
+                  <div>
+                    <div className="flex items-center justify-center w-12 h-12 mx-auto bg-red-100 rounded-full">
+                      <XIcon className="w-6 h-6 text-red-600" />
+                    </div>
+                    <div className="mt-3 text-center sm:mt-5">
+                      <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
+                        This meeting has not started yet
+                      </h3>
+                    </div>
+                    <div className="py-4 mt-4 border-t border-b">
+                      <h2 className="mb-2 text-lg font-medium text-center text-gray-600 font-cal">
+                        {props.booking.title}
+                      </h2>
+                      <p className="text-center text-gray-500">
+                        <CalendarIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
+                        {dayjs(props.booking.startTime).format(
+                          (is24h ? "H:mm" : "h:mma") + ", dddd DD MMMM YYYY"
+                        )}
+                      </p>
+                    </div>
+                    <div className="mt-3 text-center sm:mt-5">
+                      <p className="text-sm text-gray-500">
+                        This meeting will be accessible 60 minutes in advance.
+                      </p>
+                    </div>
+                  </div>
+                  <div className="mt-5 text-center sm:mt-6">
+                    <div className="mt-5">
+                      <Button data-testid="return-home" href="/event-types" EndIcon={ArrowRightIcon}>
+                        Go back home
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
+    );
+  }
+  return null;
+}
+
+export async function getServerSideProps(context) {
+  const booking = await prisma.booking.findUnique({
+    where: {
+      uid: context.query.uid,
+    },
+    select: {
+      uid: true,
+      id: true,
+      title: true,
+      description: true,
+      startTime: true,
+      endTime: true,
+      user: {
+        select: {
+          credentials: true,
+        },
+      },
+      attendees: true,
+      dailyRef: {
+        select: {
+          dailyurl: true,
+          dailytoken: true,
+        },
+      },
+      references: {
+        select: {
+          uid: true,
+          type: true,
+        },
+      },
+    },
+  });
+
+  if (!booking) {
+    // TODO: Booking is already cancelled
+    return {
+      props: { booking: null },
+    };
+  }
+
+  const bookingObj = Object.assign({}, booking, {
+    startTime: booking.startTime.toString(),
+    endTime: booking.endTime.toString(),
+  });
+  const session = await getSession();
+
+  return {
+    props: {
+      booking: bookingObj,
+      session: session,
+    },
+  };
+}
diff --git a/yarn.lock b/yarn.lock
index 1da4101c..663ee669 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2606,6 +2606,11 @@ bowser@^2.8.1:
   resolved "https://registry.yarnpkg.com/bowser/-/bowser-2.11.0.tgz#5ca3c35757a7aa5771500c70a73a9f91ef420a8f"
   integrity sha512-AlcaJBi/pqqJBIQ8U9Mcpc9i8Aqxn88Skv5d+xBX006BY5u8N3mGLHa5Lgppa7L/HfwgwLgZ6NYs+Ag6uUmJRA==
 
+bowser@^2.8.1:
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/bowser/-/bowser-2.11.0.tgz#5ca3c35757a7aa5771500c70a73a9f91ef420a8f"
+  integrity sha512-AlcaJBi/pqqJBIQ8U9Mcpc9i8Aqxn88Skv5d+xBX006BY5u8N3mGLHa5Lgppa7L/HfwgwLgZ6NYs+Ag6uUmJRA==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -3808,6 +3813,11 @@ fast-equals@^1.6.3:
   resolved "https://registry.yarnpkg.com/fast-equals/-/fast-equals-1.6.3.tgz#84839a1ce20627c463e1892f2ae316380c81b459"
   integrity sha512-4WKW0AL5+WEqO0zWavAfYGY1qwLsBgE//DN4TTcVEN2UlINgkv9b3vm2iHicoenWKSX9mKWmGOsU/iI5IST7pQ==
 
+fast-equals@^1.6.3:
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/fast-equals/-/fast-equals-1.6.3.tgz#84839a1ce20627c463e1892f2ae316380c81b459"
+  integrity sha512-4WKW0AL5+WEqO0zWavAfYGY1qwLsBgE//DN4TTcVEN2UlINgkv9b3vm2iHicoenWKSX9mKWmGOsU/iI5IST7pQ==
+
 fast-glob@^3.1.1, fast-glob@^3.2.7:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.7.tgz#fd6cb7a2d7e9aa7a7846111e85a196d6b2f766a1"
@@ -4333,6 +4343,18 @@ history@^4.9.0:
     tiny-warning "^1.0.0"
     value-equal "^1.0.1"
 
+history@^4.9.0:
+  version "4.10.1"
+  resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
+  integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    loose-envify "^1.2.0"
+    resolve-pathname "^3.0.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+    value-equal "^1.0.1"
+
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -6529,6 +6551,13 @@ path-to-regexp@^1.7.0:
   dependencies:
     isarray "0.0.1"
 
+path-to-regexp@^1.7.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.8.0.tgz#887b3ba9d84393e87a0a0b9f4cb756198b53548a"
+  integrity sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==
+  dependencies:
+    isarray "0.0.1"
+
 path-type@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
@@ -7298,6 +7327,11 @@ resolve-pathname@^3.0.0:
   resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd"
   integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==
 
+resolve-pathname@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd"
+  integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==
+
 resolve@^1.10.0, resolve@^1.20.0:
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"