diff --git a/packages/compass-components/src/hooks/use-toast.tsx b/packages/compass-components/src/hooks/use-toast.tsx
index c650e59b224..7d36686d05f 100644
--- a/packages/compass-components/src/hooks/use-toast.tsx
+++ b/packages/compass-components/src/hooks/use-toast.tsx
@@ -195,9 +195,9 @@ const ToastAreaMountedContext = React.createContext(false);
 
 export const ToastArea: React.FunctionComponent = ({ children }) => {
   const stackedContext = useStackedComponent();
-  // We always want to show the toast over modal or other stacked components that may hide the toast and hence +1
-  const stackedElemStyles = useMemo(() => {
-    const zIndex = stackedContext?.zIndex ? stackedContext.zIndex + 1 : 1;
+  // We always want to show the toast under the modal
+  const toastPortalStyles = useMemo(() => {
+    const zIndex = stackedContext?.zIndex ? stackedContext.zIndex - 1 : 0;
     return css({ zIndex });
   }, [stackedContext]);
 
@@ -207,7 +207,7 @@ export const ToastArea: React.FunctionComponent = ({ children }) => {
 
   return (
     <ToastAreaMountedContext.Provider value={true}>
-      <ToastProvider portalClassName={stackedElemStyles}>
+      <ToastProvider portalClassName={toastPortalStyles}>
         <ToastStateHandler>{children}</ToastStateHandler>
       </ToastProvider>
     </ToastAreaMountedContext.Provider>