diff --git a/assets/index.js b/assets/index.js
index 700ff228b..c9dbcff26 100755
--- a/assets/index.js
+++ b/assets/index.js
@@ -2,7 +2,7 @@ import $ from 'jquery';
 
 /* Materialize imports */
 import '@materializecss/materialize/dist/css/materialize.css';
-import '@materializecss/materialize/dist/js/materialize';
+import M from '@materializecss/materialize/dist/js/materialize';
 
 /* Annotations */
 import annotator from 'annotator';
@@ -382,4 +382,10 @@ $(document).ready(() => {
 
     qrcode.setAttribute('src', src);
   });
+
+  document.querySelectorAll('.material-toast').forEach((toast) => {
+    M.toast({
+      text: toast.innerText,
+    });
+  });
 });
diff --git a/templates/Import/check_queue.html.twig b/templates/Import/check_queue.html.twig
index a26336989..34ab57a16 100644
--- a/templates/Import/check_queue.html.twig
+++ b/templates/Import/check_queue.html.twig
@@ -1,13 +1,9 @@
 {% if nbRedisMessages is defined and nbRedisMessages > 0 %}
-    <script>
-        Materialize.toast('Messages in queue: {{ nbRedisMessages }}', 4000);
-    </script>
+    <p class="material-toast hidden">Messages in queue: {{ nbRedisMessages }}</p>
 {% endif %}
 
 {% if nbRabbitMessages is defined and nbRabbitMessages > 0 %}
-    <script>
-        Materialize.toast('Messages in queue: {{ nbRabbitMessages }}', 4000);
-    </script>
+    <p class="material-toast hidden">Messages in queue: {{ nbRabbitMessages }}</p>
 {% endif %}
 
 {% if redisNotInstalled is defined and redisNotInstalled  %}
diff --git a/templates/bundles/FOSUserBundle/Security/login.html.twig b/templates/bundles/FOSUserBundle/Security/login.html.twig
index 870e4c829..2466a0752 100644
--- a/templates/bundles/FOSUserBundle/Security/login.html.twig
+++ b/templates/bundles/FOSUserBundle/Security/login.html.twig
@@ -5,11 +5,11 @@
     <div class="card-content">
 
         {% if error %}
-            <script>Materialize.toast('{{ error.messageKey|trans(error.messageData, 'security') }}', 4000)</script>
+            <p class="material-toast hidden">{{ error.messageKey|trans(error.messageData, 'security') }}</p>
         {% endif %}
 
         {% for flash_message in app.session.flashbag.get('notice') %}
-            <script>Materialize.toast('{{ flash_message }}')</script>
+            <p class="material-toast hidden">{{ flash_message }}</p>
         {% endfor %}
 
         <div class="row">
diff --git a/templates/layout.html.twig b/templates/layout.html.twig
index 23b433c0c..672e0ca0e 100644
--- a/templates/layout.html.twig
+++ b/templates/layout.html.twig
@@ -17,9 +17,7 @@
 
 {% block messages %}
     {% for flash_message in app.session.flashbag.get('notice') %}
-        <script>
-            Materialize.toast('{{ flash_message|trans }}', 4000);
-        </script>
+        <p class="material-toast hidden">{{ flash_message|trans }}</p>
     {% endfor %}
 {% endblock %}