diff --git a/components/Modal.tsx b/components/Modal.tsx
index d687a291..88fe7319 100644
--- a/components/Modal.tsx
+++ b/components/Modal.tsx
@@ -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-10 bg-opacity-75 transition-opacity" />
                     </Transition.Child>
 
                     {/* This element is to trick the browser into centering the modal contents. */}
diff --git a/components/team/EditTeamModal.tsx b/components/team/EditTeamModal.tsx
index d1358ebd..752097bc 100644
--- a/components/team/EditTeamModal.tsx
+++ b/components/team/EditTeamModal.tsx
@@ -34,7 +34,7 @@ export default function EditTeamModal(props) {
 
   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-10 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 1f1e435a..35749d15 100644
--- a/components/team/MemberInvitationModal.tsx
+++ b/components/team/MemberInvitationModal.tsx
@@ -45,7 +45,7 @@ export default function MemberInvitationModal(props) {
       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-10 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 3269dcca..94369fa1 100644
--- a/components/ui/modal/SetTimesModal.tsx
+++ b/components/ui/modal/SetTimesModal.tsx
@@ -33,7 +33,7 @@ export default function SetTimesModal(props) {
       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-10 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/availability/event/[type].tsx b/pages/availability/event/[type].tsx
index 9ecea04f..a9dbd138 100644
--- a/pages/availability/event/[type].tsx
+++ b/pages/availability/event/[type].tsx
@@ -854,7 +854,7 @@ export default function EventTypePage({
             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-10 bg-opacity-75 transition-opacity"
                 aria-hidden="true"></div>
 
               <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
@@ -903,7 +903,7 @@ export default function EventTypePage({
             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-10 bg-opacity-75 transition-opacity"
                 aria-hidden="true"
               />
 
diff --git a/pages/availability/index.tsx b/pages/availability/index.tsx
index f52abb20..0cd5787f 100644
--- a/pages/availability/index.tsx
+++ b/pages/availability/index.tsx
@@ -167,7 +167,7 @@ export default function Availability(props) {
             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-10 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/event-types/[type].tsx b/pages/event-types/[type].tsx
index 00831647..4da03c31 100644
--- a/pages/event-types/[type].tsx
+++ b/pages/event-types/[type].tsx
@@ -922,7 +922,7 @@ export default function EventTypePage({
             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-10 bg-opacity-75 transition-opacity"
                 aria-hidden="true"></div>
 
               <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
@@ -972,7 +972,7 @@ export default function EventTypePage({
             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-10 bg-opacity-75 transition-opacity"
                 aria-hidden="true"
               />
 
diff --git a/pages/event-types/index.tsx b/pages/event-types/index.tsx
index 4e5cd39f..75e4b56c 100644
--- a/pages/event-types/index.tsx
+++ b/pages/event-types/index.tsx
@@ -522,7 +522,7 @@ export default function Availability({ user, types }) {
             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-10 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/integrations/index.tsx b/pages/integrations/index.tsx
index a8151159..1e4f934a 100644
--- a/pages/integrations/index.tsx
+++ b/pages/integrations/index.tsx
@@ -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-10 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;
@@ -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-10 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/teams.tsx b/pages/settings/teams.tsx
index 356c7a65..06887d10 100644
--- a/pages/settings/teams.tsx
+++ b/pages/settings/teams.tsx
@@ -132,7 +132,7 @@ export default function Teams() {
             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-10 bg-opacity-75 transition-opacity"
                 aria-hidden="true"></div>
 
               <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">