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 a7fa7e05333..8004ec998a7 100644
--- a/theme/boost/scss/moodle/core.scss
+++ b/theme/boost/scss/moodle/core.scss
@@ -2414,4 +2414,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 c0436e8f299..1dbc9ff9a21 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -11569,6 +11569,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 438d25fb204..542c6e13372 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -11824,6 +11824,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;