diff --git a/components/Modal.tsx b/components/Modal.tsx
index 12232876..d687a291 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}
diff --git a/components/team/EditTeamModal.tsx b/components/team/EditTeamModal.tsx
index d6991a1e..d1358ebd 100644
--- a/components/team/EditTeamModal.tsx
+++ b/components/team/EditTeamModal.tsx
@@ -32,7 +32,7 @@ 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>
 
diff --git a/components/team/MemberInvitationModal.tsx b/components/team/MemberInvitationModal.tsx
index f355abe1..1f1e435a 100644
--- a/components/team/MemberInvitationModal.tsx
+++ b/components/team/MemberInvitationModal.tsx
@@ -40,7 +40,7 @@ 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">
diff --git a/components/ui/modal/SetTimesModal.tsx b/components/ui/modal/SetTimesModal.tsx
index 8dc9a759..3269dcca 100644
--- a/components/ui/modal/SetTimesModal.tsx
+++ b/components/ui/modal/SetTimesModal.tsx
@@ -28,7 +28,7 @@ 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">
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..9ecea04f 100644
--- a/pages/availability/event/[type].tsx
+++ b/pages/availability/event/[type].tsx
@@ -848,7 +848,7 @@ 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">
@@ -897,7 +897,7 @@ 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">
diff --git a/pages/availability/index.tsx b/pages/availability/index.tsx
index 99ce3bb3..f52abb20 100644
--- a/pages/availability/index.tsx
+++ b/pages/availability/index.tsx
@@ -161,7 +161,7 @@ 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">
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 1bb8b843..00831647 100644
--- a/pages/event-types/[type].tsx
+++ b/pages/event-types/[type].tsx
@@ -916,7 +916,7 @@ 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">
@@ -966,7 +966,7 @@ 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">
diff --git a/pages/event-types/index.tsx b/pages/event-types/index.tsx
index 0ffd0409..4e5cd39f 100644
--- a/pages/event-types/index.tsx
+++ b/pages/event-types/index.tsx
@@ -516,7 +516,7 @@ export default function Availability({ user, types }) {
         )}
         {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">
diff --git a/pages/integrations/index.tsx b/pages/integrations/index.tsx
index 76c0c39d..a8151159 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">
@@ -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">
diff --git a/pages/settings/teams.tsx b/pages/settings/teams.tsx
index cf87546a..356c7a65 100644
--- a/pages/settings/teams.tsx
+++ b/pages/settings/teams.tsx
@@ -126,7 +126,7 @@ 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">
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">
