diff --git a/client/app/bundles/course/duplication/components/UnpublishedIcon.jsx b/client/app/bundles/course/duplication/components/UnpublishedIcon.jsx
index d648d7aaf58..59fe6556a05 100644
--- a/client/app/bundles/course/duplication/components/UnpublishedIcon.jsx
+++ b/client/app/bundles/course/duplication/components/UnpublishedIcon.jsx
@@ -9,7 +9,6 @@ const styles = {
     marginRight: 3,
   },
   withTooltip: {
-    zIndex: 3,
     position: 'relative',
   },
 };
@@ -21,6 +20,7 @@ const UnpublishedIcon = ({ tooltipId }) => {
   return (
     <Block
       data-tooltip-id={tooltipId}
+      className="z-badge"
       style={{ ...styles.unpublishedIcon, ...styles.withTooltip }}
     />
   );
diff --git a/client/app/bundles/course/learning-map/components/ZoomActionElements/index.jsx b/client/app/bundles/course/learning-map/components/ZoomActionElements/index.jsx
index 70a157a60e0..e75e1ba53e3 100644
--- a/client/app/bundles/course/learning-map/components/ZoomActionElements/index.jsx
+++ b/client/app/bundles/course/learning-map/components/ZoomActionElements/index.jsx
@@ -16,7 +16,6 @@ const styles = {
     position: 'absolute',
     right: 20,
     width: '100%',
-    zIndex: 999,
   },
 };
 
@@ -24,7 +23,7 @@ const ZoomActionElements = (props) => {
   const { zoomIn, zoomOut } = props;
 
   return (
-    <div style={styles.wrapper}>
+    <div className="z-dropdown" style={styles.wrapper}>
       <Button
         className="btn-submit"
         color="primary"
diff --git a/client/app/bundles/course/learning-map/containers/Dashboard/index.jsx b/client/app/bundles/course/learning-map/containers/Dashboard/index.jsx
index 7c05e4cd8ce..84ddd40ab42 100644
--- a/client/app/bundles/course/learning-map/containers/Dashboard/index.jsx
+++ b/client/app/bundles/course/learning-map/containers/Dashboard/index.jsx
@@ -43,7 +43,6 @@ const styles = {
     bottom: 0,
     position: 'sticky',
     textAlign: 'center',
-    zIndex: 999,
   },
 };
 
@@ -204,7 +203,7 @@ const Dashboard = (props) => {
 
   return (
     <>
-      <Card style={{ ...styles.wrapper, backgroundColor: color }}>
+      <Card className="z-dropdown" style={{ ...styles.wrapper, backgroundColor: color }}>
         <CardContent style={styles.content}>
           {text}
           {getActionElements()}
diff --git a/client/app/lib/components/core/LoadingOverlay.tsx b/client/app/lib/components/core/LoadingOverlay.tsx
index 6a4977b17d3..9e455e46fd3 100644
--- a/client/app/lib/components/core/LoadingOverlay.tsx
+++ b/client/app/lib/components/core/LoadingOverlay.tsx
@@ -9,7 +9,6 @@ const styles = {
     position: 'absolute',
     top: 0,
     left: 0,
-    zIndex: 110,
     display: 'flex',
     width: '100%',
     height: '100%',
@@ -22,7 +21,7 @@ const styles = {
 
 const LoaderOverlay = (): JSX.Element => {
   return (
-    <Box sx={styles.overlay}>
+    <Box className="z-overlay" sx={styles.overlay}>
       <Box style={styles.progressContainer}>
         <LoadingIndicator />
       </Box>
diff --git a/client/app/lib/components/core/NotificationBar.jsx b/client/app/lib/components/core/NotificationBar.jsx
index 6c09e096800..be1ed53f52a 100644
--- a/client/app/lib/components/core/NotificationBar.jsx
+++ b/client/app/lib/components/core/NotificationBar.jsx
@@ -49,11 +49,11 @@ const NotificationBar = (props) => {
       message={notificationNode}
       onClose={handleClose}
       open={open}
+      className="z-modal"
       style={{
         height: 'auto',
         maxWidth: '100%',
         whiteSpace: 'pre-line',
-        zIndex: 9999,
       }}
       {...options}
     />
diff --git a/client/app/lib/components/core/dialogs/ConfirmationDialog.jsx b/client/app/lib/components/core/dialogs/ConfirmationDialog.jsx
index c3139ed2dec..6f70d7eb3f2 100644
--- a/client/app/lib/components/core/dialogs/ConfirmationDialog.jsx
+++ b/client/app/lib/components/core/dialogs/ConfirmationDialog.jsx
@@ -128,8 +128,8 @@ class ConfirmationDialog extends Component {
             ? handleDialogClose
             : onCancel
         }
+        className="z-modal"
         open={open}
-        style={{ zIndex: 9999 }}
       >
         <DialogContent>
           <Typography variant="body2">{confirmationMessage}</Typography>
diff --git a/client/tailwind.config.ts b/client/tailwind.config.ts
index 154f67c44e9..1a0e5779dc2 100644
--- a/client/tailwind.config.ts
+++ b/client/tailwind.config.ts
@@ -47,6 +47,14 @@ export default {
         warning: palette.warning.main,
         info: palette.info.main,
       },
+      zIndex: {
+        base: '1',
+        badge: '3',
+        sticky: '100',
+        overlay: '110',
+        dropdown: '1000',
+        modal: '9999',
+      },
     },
   },
   corePlugins: {