diff --git a/components/toast.js b/components/toast.js
index 24c31816..520185a7 100644
--- a/components/toast.js
+++ b/components/toast.js
@@ -52,7 +52,7 @@ export const ToastProvider = ({ children }) => {
 
   return (
     <ToastContext.Provider value={toaster}>
-      <ToastContainer className='pb-3 pe-3' position='bottom-end' containerPosition='fixed'>
+      <ToastContainer className={`pb-3 pe-3 ${styles.toastContainer}`} position='bottom-end' containerPosition='fixed'>
         {toasts.map(toast => (
           <Toast
             key={toast.id} bg={toast.variant} show autohide={toast.autohide}
diff --git a/components/toast.module.css b/components/toast.module.css
index fab1e1f6..0dd58386 100644
--- a/components/toast.module.css
+++ b/components/toast.module.css
@@ -1,3 +1,7 @@
+.toastContainer {
+  transform: translate3d(0,0,0);
+}
+
 .toast {
   width: auto;
   border: 1px solid var(--bs-success-border-subtle);
@@ -5,7 +9,7 @@
 }
 
 .toastClose {
-color: #fff;
+  color: #fff;
   font-family: "lightning";
   font-size: 150%;
   line-height: 1rem;