diff --git a/lib/templates/local/toast/wrapper.mustache b/lib/templates/local/toast/wrapper.mustache
index d9059050f1d..6ab5b9910f9 100644
--- a/lib/templates/local/toast/wrapper.mustache
+++ b/lib/templates/local/toast/wrapper.mustache
@@ -1 +1 @@
-<div class="toast-wrapper mx-auto py-3 fixed-top" role="status" aria-live="polite"></div>
+<div class="toast-wrapper mx-auto py-0 fixed-top" role="status" aria-live="polite"></div>
diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss
index cd8d25ac3f1..626f558983f 100644
--- a/theme/boost/scss/moodle/core.scss
+++ b/theme/boost/scss/moodle/core.scss
@@ -2281,4 +2281,8 @@ $picker-emojis-per-row: 7 !default;
     max-height: 0;
     // Place these above any modals and other elements.
     z-index: 1051;
+
+    > :first-child {
+        margin-top: $spacer;
+    }
 }
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index d5542acd236..3f0c2df9ba2 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -11237,6 +11237,8 @@ body.h5p-embed .h5pmessages {
   max-width: 350px;
   max-height: 0;
   z-index: 1051; }
+  .toast-wrapper > :first-child {
+    margin-top: 1rem; }
 
 .icon {
   font-size: 16px;
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 266ab1244f8..d0e5faeea23 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -11448,6 +11448,8 @@ body.h5p-embed .h5pmessages {
   max-width: 350px;
   max-height: 0;
   z-index: 1051; }
+  .toast-wrapper > :first-child {
+    margin-top: 1rem; }
 
 .icon {
   font-size: 16px;