diff --git a/components/Modal.tsx b/components/Modal.tsx
index 12232876..ed4fbbe5 100644
--- a/components/Modal.tsx
+++ b/components/Modal.tsx
@@ -5,7 +5,7 @@ import { CheckIcon } from '@heroicons/react/outline'
 export default function Modal(props) {
     return (
         <Transition.Root show={props.open} as={Fragment}>
-            <Dialog as="div" static className="fixed z-10 inset-0 overflow-y-auto" open={props.open} onClose={props.handleClose}>
+            <Dialog as="div" static className="fixed z-50 inset-0 overflow-y-auto" open={props.open} onClose={props.handleClose}>
                 <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
                     <Transition.Child
                         as={Fragment}
@@ -16,7 +16,7 @@ export default function Modal(props) {
                         leaveFrom="opacity-100"
                         leaveTo="opacity-0"
                     >
-                        <Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+                        <Dialog.Overlay className="fixed inset-0 bg-gray-500 z-0 bg-opacity-75 transition-opacity" />
                     </Transition.Child>
 
                     {/* This element is to trick the browser into centering the modal contents. */}
diff --git a/components/Shell.tsx b/components/Shell.tsx
index 063feaa8..1fe932e4 100644
--- a/components/Shell.tsx
+++ b/components/Shell.tsx
@@ -67,117 +67,121 @@ export default function Shell(props) {
   }
 
   return session ? (
-    <div className="h-screen flex overflow-hidden bg-gray-100">
-      {/* Static sidebar for desktop */}
-      <div className="hidden md:flex md:flex-shrink-0">
-        <div className="flex flex-col w-64">
-          {/* Sidebar component, swap this element with another sidebar if you like */}
-          <div className="flex flex-col h-0 flex-1 border-r border-gray-200 bg-white">
-            <div className="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
-              <Link href="/event-types">
-                <a className="px-4">
-                  <Logo small />
-                </a>
-              </Link>
-              <nav className="mt-5 flex-1 px-2 bg-white space-y-1">
-                {navigation.map((item) => (
-                  <Link key={item.name} href={item.href}>
-                    <a
-                      className={classNames(
-                        item.current
-                          ? "bg-neutral-100 text-neutral-900"
-                          : "text-neutral-500 hover:bg-gray-50 hover:text-neutral-900",
-                        "group flex items-center px-2 py-2 text-sm font-medium rounded-sm"
-                      )}>
-                      <item.icon
+    <>
+      <div className="h-screen flex overflow-hidden bg-gray-100">
+        {/* Static sidebar for desktop */}
+        <div className="hidden md:flex md:flex-shrink-0">
+          <div className="flex flex-col w-64">
+            {/* Sidebar component, swap this element with another sidebar if you like */}
+            <div className="flex flex-col h-0 flex-1 border-r border-gray-200 bg-white">
+              <div className="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
+                <Link href="/event-types">
+                  <a className="px-4">
+                    <Logo small />
+                  </a>
+                </Link>
+                <nav className="mt-5 flex-1 px-2 bg-white space-y-1">
+                  {navigation.map((item) => (
+                    <Link key={item.name} href={item.href}>
+                      <a
                         className={classNames(
-                          item.current ? "text-neutral-500" : "text-neutral-400 group-hover:text-neutral-500",
-                          "mr-3 flex-shrink-0 h-5 w-5"
-                        )}
-                        aria-hidden="true"
-                      />
-                      {item.name}
-                    </a>
-                  </Link>
-                ))}
-              </nav>
-            </div>
-            <div className="flex-shrink-0 flex border-t border-gray-200 p-4">
-              <UserDropdown session={session} />
+                          item.current
+                            ? "bg-neutral-100 text-neutral-900"
+                            : "text-neutral-500 hover:bg-gray-50 hover:text-neutral-900",
+                          "group flex items-center px-2 py-2 text-sm font-medium rounded-sm"
+                        )}>
+                        <item.icon
+                          className={classNames(
+                            item.current
+                              ? "text-neutral-500"
+                              : "text-neutral-400 group-hover:text-neutral-500",
+                            "mr-3 flex-shrink-0 h-5 w-5"
+                          )}
+                          aria-hidden="true"
+                        />
+                        {item.name}
+                      </a>
+                    </Link>
+                  ))}
+                </nav>
+              </div>
+              <div className="flex-shrink-0 flex border-t border-gray-200 p-4">
+                <UserDropdown session={session} />
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      <div className="flex flex-col w-0 flex-1 overflow-hidden">
-        {/* show top navigation for md and smaller (tablet and phones) */}
-        <nav className="md:hidden bg-white shadow p-4 flex justify-between items-center">
-          <Link href="/event-types">
-            <a>
-              <Logo />
-            </a>
-          </Link>
-          <div className="flex gap-3 items-center self-center">
-            <button className="bg-white p-2 rounded-full text-gray-400 hover:text-gray-500 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black">
-              <span className="sr-only">View notifications</span>
-              <Link href="/settings/profile">
+
+        <div className="flex flex-col w-0 flex-1 overflow-hidden">
+          <main className="flex-1 relative z-0 overflow-y-auto focus:outline-none">
+            {/* show top navigation for md and smaller (tablet and phones) */}
+            <nav className="md:hidden bg-white shadow p-4 flex justify-between items-center">
+              <Link href="/event-types">
                 <a>
-                  <CogIcon className="h-6 w-6" aria-hidden="true" />
+                  <Logo />
                 </a>
               </Link>
-            </button>
-            <div className="mt-1">
-              <UserDropdown small bottom session={session} />
-            </div>
-          </div>
-        </nav>
-
-        <main className="flex-1 relative z-0 overflow-y-auto focus:outline-none">
-          <div className="py-6">
-            <div className="block sm:flex justify-between px-4 sm:px-6 md:px-8">
-              <div className="mb-6">
-                <h1 className="text-2xl font-semibold text-gray-900">{props.heading}</h1>
-                <p className="text-sm text-neutral-500 mr-4">{props.subtitle}</p>
-              </div>
-              <div className="mb-4 flex-shrink-0">{props.CTA}</div>
-            </div>
-            <div className="px-4 sm:px-6 md:px-8">{props.children}</div>
-
-            {/* show bottom navigation for md and smaller (tablet and phones) */}
-            <nav className="md:hidden flex fixed bottom-0 bg-white w-full rounded-lg shadow">
-              {/* note(PeerRich): using flatMap instead of map to remove settings from bottom nav */}
-              {navigation.flatMap((item, itemIdx) =>
-                item.name === "Settings" ? (
-                  []
-                ) : (
-                  <Link key={item.name} href={item.href}>
-                    <a
-                      className={classNames(
-                        item.current ? "text-gray-900" : "text-neutral-400 hover:text-gray-700",
-                        itemIdx === 0 ? "rounded-l-lg" : "",
-                        itemIdx === navigation.length - 1 ? "rounded-r-lg" : "",
-                        "group relative min-w-0 flex-1 overflow-hidden bg-white py-2 px-2 text-xs sm:text-sm font-medium text-center hover:bg-gray-50 focus:z-10"
-                      )}
-                      aria-current={item.current ? "page" : undefined}>
-                      <item.icon
-                        className={classNames(
-                          item.current ? "text-gray-900" : "text-gray-400 group-hover:text-gray-500",
-                          "block mx-auto flex-shrink-0 h-5 w-5 mb-1 text-center"
-                        )}
-                        aria-hidden="true"
-                      />
-                      <span>{item.name}</span>
+              <div className="flex gap-3 items-center self-center">
+                <button className="bg-white p-2 rounded-full text-gray-400 hover:text-gray-500 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black">
+                  <span className="sr-only">View notifications</span>
+                  <Link href="/settings/profile">
+                    <a>
+                      <CogIcon className="h-6 w-6" aria-hidden="true" />
                     </a>
                   </Link>
-                )
-              )}
+                </button>
+                <div className="mt-1">
+                  <UserDropdown small bottom session={session} />
+                </div>
+              </div>
             </nav>
+            <div className="py-6">
+              <div className="block sm:flex justify-between px-4 sm:px-6 md:px-8">
+                <div className="mb-6">
+                  <h1 className="text-2xl font-semibold text-gray-900">{props.heading}</h1>
+                  <p className="text-sm text-neutral-500 mr-4">{props.subtitle}</p>
+                </div>
+                <div className="mb-4 flex-shrink-0">{props.CTA}</div>
+              </div>
+              <div className="px-4 sm:px-6 md:px-8">{props.children}</div>
 
-            {/* add padding to content for mobile navigation*/}
-            <div className="block md:hidden pt-12" />
-          </div>
-        </main>
+              {/* show bottom navigation for md and smaller (tablet and phones) */}
+              <nav className="md:hidden flex fixed bottom-0 bg-white w-full rounded-lg shadow">
+                {/* note(PeerRich): using flatMap instead of map to remove settings from bottom nav */}
+                {navigation.flatMap((item, itemIdx) =>
+                  item.name === "Settings" ? (
+                    []
+                  ) : (
+                    <Link key={item.name} href={item.href}>
+                      <a
+                        className={classNames(
+                          item.current ? "text-gray-900" : "text-neutral-400 hover:text-gray-700",
+                          itemIdx === 0 ? "rounded-l-lg" : "",
+                          itemIdx === navigation.length - 1 ? "rounded-r-lg" : "",
+                          "group relative min-w-0 flex-1 overflow-hidden bg-white py-2 px-2 text-xs sm:text-sm font-medium text-center hover:bg-gray-50 focus:z-10"
+                        )}
+                        aria-current={item.current ? "page" : undefined}>
+                        <item.icon
+                          className={classNames(
+                            item.current ? "text-gray-900" : "text-gray-400 group-hover:text-gray-500",
+                            "block mx-auto flex-shrink-0 h-5 w-5 mb-1 text-center"
+                          )}
+                          aria-hidden="true"
+                        />
+                        <span>{item.name}</span>
+                      </a>
+                    </Link>
+                  )
+                )}
+              </nav>
+
+              {/* add padding to content for mobile navigation*/}
+              <div className="block md:hidden pt-12" />
+            </div>
+          </main>
+        </div>
       </div>
-    </div>
+    </>
   ) : null;
 }
 
diff --git a/components/team/EditTeamModal.tsx b/components/team/EditTeamModal.tsx
index d6991a1e..c5e15c6f 100644
--- a/components/team/EditTeamModal.tsx
+++ b/components/team/EditTeamModal.tsx
@@ -32,9 +32,9 @@ export default function EditTeamModal(props) {
     }).then(loadMembers);
   }
 
-  return (<div className="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
+  return (<div className="fixed z-50 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
     <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-      <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
+      <div className="fixed inset-0 bg-gray-500 z-0 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
 
       <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
 
diff --git a/components/team/MemberInvitationModal.tsx b/components/team/MemberInvitationModal.tsx
index f355abe1..6c916baa 100644
--- a/components/team/MemberInvitationModal.tsx
+++ b/components/team/MemberInvitationModal.tsx
@@ -40,12 +40,12 @@ export default function MemberInvitationModal(props) {
 
   return (
     <div
-      className="fixed z-10 inset-0 overflow-y-auto"
+      className="fixed z-50 inset-0 overflow-y-auto"
       aria-labelledby="modal-title"
       role="dialog"
       aria-modal="true">
       <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-        <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
+        <div className="fixed inset-0 bg-gray-500 z-0 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
 
         <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
           &#8203;
diff --git a/components/ui/modal/SetTimesModal.tsx b/components/ui/modal/SetTimesModal.tsx
index 8dc9a759..328bca6e 100644
--- a/components/ui/modal/SetTimesModal.tsx
+++ b/components/ui/modal/SetTimesModal.tsx
@@ -28,12 +28,12 @@ export default function SetTimesModal(props) {
 
   return (
     <div
-      className="fixed z-10 inset-0 overflow-y-auto"
+      className="fixed z-50 inset-0 overflow-y-auto"
       aria-labelledby="modal-title"
       role="dialog"
       aria-modal="true">
       <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-        <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
+        <div className="fixed inset-0 bg-gray-500 z-0 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
 
         <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
           &#8203;
diff --git a/pages/[user]/book.tsx b/pages/[user]/book.tsx
index 36cac26c..58a3e56b 100644
--- a/pages/[user]/book.tsx
+++ b/pages/[user]/book.tsx
@@ -65,7 +65,7 @@ export default function Book(props: any): JSX.Element {
             const data = event.target["custom_" + input.id];
             if (data) {
               if (input.type === EventTypeCustomInputType.Bool) {
-                return input.label + "\n" + (data.value ? "Yes" : "No");
+                return input.label + "\n" + (data.checked ? "Yes" : "No");
               } else {
                 return input.label + "\n" + data.value;
               }
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 4cd35999..2a640cc9 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -9,7 +9,19 @@ class MyDocument extends Document {
   render() {
     return (
       <Html>
-        <Head />
+        <Head>
+          <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+          />
+          <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+          <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+          <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+          <link rel="manifest" href="/site.webmanifest" />
+          <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000" />
+          <meta name="msapplication-TileColor" content="#ff0000" />
+          <meta name="theme-color" content="#ffffff" />
+        </Head>
         <body className="dark:bg-gray-900 bg-white">
           <Main />
           <NextScript />
diff --git a/pages/auth/error.tsx b/pages/auth/error.tsx
index 0c930650..82496187 100644
--- a/pages/auth/error.tsx
+++ b/pages/auth/error.tsx
@@ -8,7 +8,7 @@ export default function Error() {
     const { error } = router.query;
 
     return (
-        <div className="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
+        <div className="fixed z-50 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
             <Head>
                 <title>{error} - Calendso</title>
                 <link rel="icon" href="/favicon.ico" />
diff --git a/pages/auth/logout.tsx b/pages/auth/logout.tsx
index f2dd5bd8..e5156c5a 100644
--- a/pages/auth/logout.tsx
+++ b/pages/auth/logout.tsx
@@ -4,7 +4,7 @@ import { CheckIcon } from '@heroicons/react/outline';
 
 export default function Logout() {
     return (
-        <div className="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
+        <div className="fixed z-50 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
             <Head>
                 <title>Logged out - Calendso</title>
                 <link rel="icon" href="/favicon.ico" />
diff --git a/pages/availability/event/[type].tsx b/pages/availability/event/[type].tsx
index 0aad0665..bc88c293 100644
--- a/pages/availability/event/[type].tsx
+++ b/pages/availability/event/[type].tsx
@@ -848,13 +848,13 @@ export default function EventTypePage({
         </div>
         {showLocationModal && (
           <div
-            className="fixed z-10 inset-0 overflow-y-auto"
+            className="fixed z-50 inset-0 overflow-y-auto"
             aria-labelledby="modal-title"
             role="dialog"
             aria-modal="true">
             <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
               <div
-                className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
+                className="fixed inset-0 bg-gray-500 z-0 bg-opacity-75 transition-opacity"
                 aria-hidden="true"></div>
 
               <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
@@ -897,13 +897,13 @@ export default function EventTypePage({
         )}
         {showAddCustomModal && (
           <div
-            className="fixed z-10 inset-0 overflow-y-auto"
+            className="fixed z-50 inset-0 overflow-y-auto"
             aria-labelledby="modal-title"
             role="dialog"
             aria-modal="true">
             <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
               <div
-                className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
+                className="fixed inset-0 bg-gray-500 z-0 bg-opacity-75 transition-opacity"
                 aria-hidden="true"
               />
 
diff --git a/pages/availability/index.tsx b/pages/availability/index.tsx
index 99ce3bb3..5b7edc68 100644
--- a/pages/availability/index.tsx
+++ b/pages/availability/index.tsx
@@ -161,13 +161,13 @@ export default function Availability(props) {
         </div>
         {showChangeTimesModal && (
           <div
-            className="fixed z-10 inset-0 overflow-y-auto"
+            className="fixed z-50 inset-0 overflow-y-auto"
             aria-labelledby="modal-title"
             role="dialog"
             aria-modal="true">
             <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
               <div
-                className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
+                className="fixed inset-0 bg-gray-500 z-0 bg-opacity-75 transition-opacity"
                 aria-hidden="true"></div>
 
               <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
diff --git a/pages/bookings/index.tsx b/pages/bookings/index.tsx
index fe5e27a4..917d6e7d 100644
--- a/pages/bookings/index.tsx
+++ b/pages/bookings/index.tsx
@@ -11,7 +11,9 @@ import classNames from "@lib/classNames";
 import { ClockIcon, XIcon } from "@heroicons/react/outline";
 
 export default function Bookings({ bookings }) {
-  const [, loading] = useSession();
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [session, loading] = useSession();
+
   const router = useRouter();
 
   if (loading) {
@@ -72,7 +74,7 @@ export default function Bookings({ bookings }) {
                                 Unconfirmed
                               </span>
                             )}
-                            <div className="text-sm text-neutral-900 font-medium  truncate">
+                            <div className="text-sm text-neutral-900 font-medium  truncate max-w-60 md:max-w-96">
                               {booking.title}
                             </div>
                             <div className="sm:hidden">
@@ -109,7 +111,7 @@ export default function Bookings({ bookings }) {
                                 </button>
                                 <button
                                   onClick={() => confirmBookingHandler(booking, false)}
-                                  className="text-xs sm:text-sm ml-4 inline-flex items-center px-4 py-2 border-transparent font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black ml-2">
+                                  className="text-xs sm:text-sm inline-flex items-center px-4 py-2 border-transparent font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black ml-2">
                                   Reject
                                 </button>
                               </>
diff --git a/pages/cancel/[uid].tsx b/pages/cancel/[uid].tsx
index 11724e01..bf1ebb32 100644
--- a/pages/cancel/[uid].tsx
+++ b/pages/cancel/[uid].tsx
@@ -62,7 +62,7 @@ export default function Type(props) {
                 <link rel="icon" href="/favicon.ico"/>
             </Head>
             <main className="max-w-3xl mx-auto my-24">
-                <div className="fixed z-10 inset-0 overflow-y-auto">
+                <div className="fixed z-50 inset-0 overflow-y-auto">
                     <div
                         className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
                         <div className="fixed inset-0 my-4 sm:my-0 transition-opacity" aria-hidden="true">
diff --git a/pages/cancel/success.tsx b/pages/cancel/success.tsx
index f221603b..d6b597f1 100644
--- a/pages/cancel/success.tsx
+++ b/pages/cancel/success.tsx
@@ -27,7 +27,7 @@ export default function Type(props) {
                 <link rel="icon" href="/favicon.ico"/>
             </Head>
             <main className="max-w-3xl mx-auto my-24">
-                <div className="fixed z-10 inset-0 overflow-y-auto">
+                <div className="fixed z-50 inset-0 overflow-y-auto">
                     <div
                         className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
                         <div className="fixed inset-0 my-4 sm:my-0 transition-opacity" aria-hidden="true">
diff --git a/pages/event-types/[type].tsx b/pages/event-types/[type].tsx
index 4d6329fe..afa9e7d1 100644
--- a/pages/event-types/[type].tsx
+++ b/pages/event-types/[type].tsx
@@ -391,10 +391,10 @@ export default function EventTypePage({
       <Shell heading={"Event Type: " + eventType.title} subtitle={eventType.description}>
         <div className="block sm:flex">
           <div className="w-full sm:w-10/12 mr-2">
-            <div className="bg-white rounded-sm border border-neutral-200 p-8">
+            <div className="bg-white rounded-sm border border-neutral-200 -mx-4 sm:mx-0 p-4 sm:p-8">
               <form onSubmit={updateEventTypeHandler} className="space-y-4">
-                <div className="flex">
-                  <div className="min-w-32">
+                <div className="block sm:flex">
+                  <div className="min-w-32 mb-4 sm:mb-0">
                     <label htmlFor="title" className="flex font-medium text-neutral-700 mt-1">
                       <PencilIcon className="w-4 h-4 mr-2 mt-1 text-neutral-500" />
                       Title
@@ -413,8 +413,8 @@ export default function EventTypePage({
                     />
                   </div>
                 </div>
-                <div className="flex">
-                  <div className="min-w-32">
+                <div className="block sm:flex">
+                  <div className="min-w-32 mb-4 sm:mb-0">
                     <label htmlFor="slug" className="flex font-medium text-neutral-700 mt-1">
                       <LinkIcon className="w-4 h-4 mr-2 mt-1 text-neutral-500" />
                       URL
@@ -437,8 +437,8 @@ export default function EventTypePage({
                     </div>
                   </div>
                 </div>
-                <div className="flex">
-                  <div className="min-w-32">
+                <div className="block sm:flex">
+                  <div className="min-w-32 mb-4 sm:mb-0">
                     <label htmlFor="location" className="flex font-medium text-neutral-700 mt-1">
                       <LocationMarkerIcon className="w-4 h-4 mr-2 mt-1 text-neutral-500" />
                       Location
@@ -566,8 +566,8 @@ export default function EventTypePage({
                     )}
                   </div>
                 </div>
-                <div className="flex">
-                  <div className="min-w-32">
+                <div className="block sm:flex">
+                  <div className="min-w-32 mb-4 sm:mb-0">
                     <label htmlFor="length" className="flex font-medium text-neutral-700 mt-1">
                       <ClockIcon className="w-4 h-4 mr-2 mt-1 text-neutral-500" />
                       Duration
@@ -593,8 +593,8 @@ export default function EventTypePage({
                     </div>
                   </div>
                 </div>
-                <div className="flex">
-                  <div className="min-w-32">
+                <div className="block sm:flex">
+                  <div className="min-w-32 mb-4 sm:mb-0">
                     <label htmlFor="description" className="flex font-medium text-neutral-700 mt-1">
                       <DocumentIcon className="w-4 h-4 mr-2 mt-1 text-neutral-500" />
                       Description
@@ -620,8 +620,8 @@ export default function EventTypePage({
                         <span className="text-neutral-700 text-sm font-medium">Show advanced settings</span>
                       </Disclosure.Button>
                       <Disclosure.Panel className="space-y-4">
-                        <div className="flex">
-                          <div className="min-w-32">
+                        <div className="block sm:flex">
+                          <div className="min-w-32 mb-4 sm:mb-0">
                             <label htmlFor="eventName" className="flex font-medium text-neutral-700 mt-2">
                               Event name
                             </label>
@@ -640,8 +640,8 @@ export default function EventTypePage({
                             </div>
                           </div>
                         </div>
-                        <div className="flex">
-                          <div className="min-w-32">
+                        <div className="block sm:flex">
+                          <div className="min-w-32 mb-4 sm:mb-0">
                             <label
                               htmlFor="additionalFields"
                               className="flex font-medium text-neutral-700 mt-2">
@@ -694,8 +694,8 @@ export default function EventTypePage({
                             </ul>
                           </div>
                         </div>
-                        <div className="flex">
-                          <div className="min-w-32">
+                        <div className="block sm:flex">
+                          <div className="min-w-32 mb-4 sm:mb-0">
                             <label htmlFor="hidden" className="flex font-medium text-neutral-700">
                               Hide event type
                             </label>
@@ -721,8 +721,8 @@ export default function EventTypePage({
                             </div>
                           </div>
                         </div>
-                        <div className="flex">
-                          <div className="min-w-32">
+                        <div className="block sm:flex">
+                          <div className="min-w-32 mb-4 sm:mb-0">
                             <label
                               htmlFor="requiresConfirmation"
                               className="flex font-medium text-neutral-700">
@@ -750,8 +750,8 @@ export default function EventTypePage({
                             </div>
                           </div>
                         </div>
-                        <div className="flex">
-                          <div className="min-w-32">
+                        <div className="block sm:flex">
+                          <div className="min-w-32 mb-4 sm:mb-0">
                             <label
                               htmlFor="inviteesCanSchedule"
                               className="flex font-medium text-neutral-700 mt-2">
@@ -769,22 +769,22 @@ export default function EventTypePage({
                                     className={({ checked }) =>
                                       classnames(
                                         checked ? "border-secondary-200 z-10" : "border-gray-200",
-                                        "relative min-h-14 lg:flex items-center cursor-pointer focus:outline-none"
+                                        "relative min-h-14 flex items-center cursor-pointer focus:outline-none"
                                       )
                                     }>
                                     {({ active, checked }) => (
                                       <>
-                                        <span
+                                        <div
                                           className={classnames(
                                             checked
                                               ? "bg-primary-600 border-transparent"
                                               : "bg-white border-gray-300",
                                             active ? "ring-2 ring-offset-2 ring-primary-500" : "",
-                                            "h-4 w-4 mt-0.5 cursor-pointer rounded-full border flex items-center justify-center"
+                                            "h-4 w-4 mt-0.5 mr-2 cursor-pointer rounded-full border items-center justify-center"
                                           )}
                                           aria-hidden="true">
                                           <span className="rounded-full bg-white w-1.5 h-1.5" />
-                                        </span>
+                                        </div>
                                         <div className="lg:ml-3 flex flex-col">
                                           <RadioGroup.Label
                                             as="span"
@@ -849,8 +849,8 @@ export default function EventTypePage({
                             </RadioGroup>
                           </div>
                         </div>
-                        <div className="flex">
-                          <div className="min-w-32">
+                        <div className="block sm:flex">
+                          <div className="min-w-32 mb-4 sm:mb-0">
                             <label htmlFor="availability" className="flex font-medium text-neutral-700 mt-2">
                               Availability
                             </label>
@@ -916,13 +916,13 @@ export default function EventTypePage({
         </div>
         {showLocationModal && (
           <div
-            className="fixed z-10 inset-0 overflow-y-auto"
+            className="fixed z-50 inset-0 overflow-y-auto"
             aria-labelledby="modal-title"
             role="dialog"
             aria-modal="true">
             <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
               <div
-                className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
+                className="fixed inset-0 bg-gray-500 z-0 bg-opacity-75 transition-opacity"
                 aria-hidden="true"></div>
 
               <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
@@ -966,13 +966,13 @@ export default function EventTypePage({
         )}
         {showAddCustomModal && (
           <div
-            className="fixed z-10 inset-0 overflow-y-auto"
+            className="fixed z-50 inset-0 overflow-y-auto"
             aria-labelledby="modal-title"
             role="dialog"
             aria-modal="true">
             <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
               <div
-                className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
+                className="fixed inset-0 bg-gray-500 z-0 bg-opacity-75 transition-opacity"
                 aria-hidden="true"
               />
 
diff --git a/pages/event-types/index.tsx b/pages/event-types/index.tsx
index 6ad1eb8b..64eb7e55 100644
--- a/pages/event-types/index.tsx
+++ b/pages/event-types/index.tsx
@@ -173,7 +173,7 @@ export default function Availability({ user, types }) {
         heading="Event Types"
         subtitle="Create events to share for people to book on your calendar."
         CTA={types.length !== 0 && CreateNewEventDialog}>
-        <div className="bg-white shadow overflow-hidden sm:rounded-sm">
+        <div className="bg-white shadow overflow-hidden sm:rounded-sm -mx-4 sm:mx-0">
           <ul className="divide-y divide-neutral-200">
             {types.map((type) => (
               <li key={type.id}>
diff --git a/pages/integrations/index.tsx b/pages/integrations/index.tsx
index 76c0c39d..dca940c4 100644
--- a/pages/integrations/index.tsx
+++ b/pages/integrations/index.tsx
@@ -191,7 +191,7 @@ export default function Home({ integrations }) {
         </div>
         {showAddModal && (
           <div
-            className="fixed z-10 inset-0 overflow-y-auto"
+            className="fixed z-50 inset-0 overflow-y-auto"
             aria-labelledby="modal-title"
             role="dialog"
             aria-modal="true">
@@ -207,7 +207,7 @@ export default function Home({ integrations }) {
                             To: "opacity-0"
                         --> */}
               <div
-                className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
+                className="fixed inset-0 bg-gray-500 z-0 bg-opacity-75 transition-opacity"
                 aria-hidden="true"></div>
               <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
                 &#8203;
@@ -291,7 +291,7 @@ export default function Home({ integrations }) {
         </div>
         {showSelectCalendarModal && (
           <div
-            className="fixed z-10 inset-0 overflow-y-auto"
+            className="fixed z-50 inset-0 overflow-y-auto"
             aria-labelledby="modal-title"
             role="dialog"
             aria-modal="true">
@@ -307,7 +307,7 @@ export default function Home({ integrations }) {
                             To: "opacity-0"
                         --> */}
               <div
-                className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
+                className="fixed inset-0 bg-gray-500 z-0 bg-opacity-75 transition-opacity"
                 aria-hidden="true"></div>
               <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
                 &#8203;
diff --git a/pages/settings/password.tsx b/pages/settings/password.tsx
index 347d1c3a..b7cb51cb 100644
--- a/pages/settings/password.tsx
+++ b/pages/settings/password.tsx
@@ -1,21 +1,22 @@
 import Head from "next/head";
-import Link from "next/link";
 import { useRef, useState } from "react";
 import prisma from "../../lib/prisma";
 import Modal from "../../components/Modal";
 import Shell from "../../components/Shell";
 import SettingsShell from "../../components/Settings";
 import { useSession, getSession } from "next-auth/client";
-import Loader from '@components/Loader';
+import Loader from "@components/Loader";
 
-export default function Settings(props) {
+export default function Settings() {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [session, loading] = useSession();
+
   const [successModalOpen, setSuccessModalOpen] = useState(false);
   const oldPasswordRef = useRef<HTMLInputElement>();
   const newPasswordRef = useRef<HTMLInputElement>();
 
   if (loading) {
-    return <Loader/>;
+    return <Loader />;
   }
 
   const closeSuccessModal = () => {
@@ -30,6 +31,7 @@ export default function Settings(props) {
 
     // TODO: Add validation
 
+    /*eslint-disable */
     const response = await fetch("/api/auth/changepw", {
       method: "PATCH",
       body: JSON.stringify({ oldPassword: enteredOldPassword, newPassword: enteredNewPassword }),
@@ -37,12 +39,13 @@ export default function Settings(props) {
         "Content-Type": "application/json",
       },
     });
+    /*eslint-enable */
 
     setSuccessModalOpen(true);
   }
 
   return (
-    <Shell heading="Password" subtitle="Change the password that you use to sign in.">
+    <Shell heading="Password" subtitle="Change the password that you use to sign in to your account.">
       <Head>
         <title>Change Password | Calendso</title>
         <link rel="icon" href="/favicon.ico" />
diff --git a/pages/settings/teams.tsx b/pages/settings/teams.tsx
index cf87546a..260d06b3 100644
--- a/pages/settings/teams.tsx
+++ b/pages/settings/teams.tsx
@@ -126,13 +126,13 @@ export default function Teams() {
         </div>
         {showCreateTeamModal && (
           <div
-            className="fixed z-10 inset-0 overflow-y-auto"
+            className="fixed z-50 inset-0 overflow-y-auto"
             aria-labelledby="modal-title"
             role="dialog"
             aria-modal="true">
             <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
               <div
-                className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
+                className="fixed inset-0 bg-gray-500 z-0 bg-opacity-75 transition-opacity"
                 aria-hidden="true"></div>
 
               <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
diff --git a/pages/success.tsx b/pages/success.tsx
index 70a0a978..0c73d2bb 100644
--- a/pages/success.tsx
+++ b/pages/success.tsx
@@ -69,7 +69,7 @@ export default function Success(props) {
           <link rel="icon" href="/favicon.ico" />
         </Head>
         <main className="max-w-3xl mx-auto my-24">
-          <div className="fixed z-10 inset-0 overflow-y-auto">
+          <div className="fixed z-50 inset-0 overflow-y-auto">
             <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
               <div className="fixed inset-0 my-4 sm:my-0 transition-opacity" aria-hidden="true">
                 <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
new file mode 100644
index 00000000..f2d42761
Binary files /dev/null and b/public/android-chrome-192x192.png differ
diff --git a/public/android-chrome-256x256.png b/public/android-chrome-256x256.png
new file mode 100644
index 00000000..d2f5ab03
Binary files /dev/null and b/public/android-chrome-256x256.png differ
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
new file mode 100644
index 00000000..5a260ebf
Binary files /dev/null and b/public/apple-touch-icon.png differ
diff --git a/public/browserconfig.xml b/public/browserconfig.xml
new file mode 100644
index 00000000..748e8459
--- /dev/null
+++ b/public/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#ff0000</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
new file mode 100644
index 00000000..ae31464d
Binary files /dev/null and b/public/favicon-16x16.png differ
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
new file mode 100644
index 00000000..3ab5b534
Binary files /dev/null and b/public/favicon-32x32.png differ
diff --git a/public/favicon.ico b/public/favicon.ico
index 4021a7bc..eaaa2f9f 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/mstile-150x150.png b/public/mstile-150x150.png
new file mode 100644
index 00000000..e4990a1a
Binary files /dev/null and b/public/mstile-150x150.png differ
diff --git a/public/safari-pinned-tab.svg b/public/safari-pinned-tab.svg
new file mode 100644
index 00000000..1598a6c8
--- /dev/null
+++ b/public/safari-pinned-tab.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="363.000000pt" height="363.000000pt" viewBox="0 0 363.000000 363.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,363.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M1738 2645 c-2 -2 -27 -6 -57 -9 -65 -8 -188 -48 -256 -84 -209 -110
+-337 -273 -407 -517 -30 -107 -32 -313 -4 -425 64 -253 214 -439 439 -545 384
+-181 845 -49 1053 303 45 76 93 185 97 221 l2 25 -160 1 c-88 0 -165 -1 -172
+-3 -6 -2 -14 -14 -17 -26 -8 -32 -85 -129 -132 -167 -82 -66 -190 -100 -319
+-101 -133 0 -247 52 -344 158 -206 225 -155 617 99 766 154 89 325 96 486 18
+87 -42 170 -119 209 -196 l21 -39 167 0 c92 0 167 0 167 1 0 0 -11 33 -24 72
+-25 73 -75 174 -88 180 -5 2 -8 8 -8 14 0 14 -67 95 -120 146 -96 92 -272 179
+-400 197 -45 7 -227 14 -232 10z"/>
+</g>
+</svg>
diff --git a/public/site.webmanifest b/public/site.webmanifest
new file mode 100644
index 00000000..11e9eb0e
--- /dev/null
+++ b/public/site.webmanifest
@@ -0,0 +1,19 @@
+{
+    "name": "Calendso",
+    "short_name": "Calendso",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-256x256.png",
+            "sizes": "256x256",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}