diff --git a/assets/controllers/materialize/toast_controller.js b/assets/controllers/materialize/toast_controller.js
new file mode 100644
index 000000000..ba9165473
--- /dev/null
+++ b/assets/controllers/materialize/toast_controller.js
@@ -0,0 +1,12 @@
+import { Controller } from '@hotwired/stimulus';
+import M from '@materializecss/materialize';
+
+export default class extends Controller {
+  connect() {
+    this.instance = M.toast({ text: this.element.innerText });
+  }
+
+  disconnect() {
+    this.instance.dismissAll();
+  }
+}
diff --git a/assets/index.js b/assets/index.js
index 253fad183..210a6c716 100755
--- a/assets/index.js
+++ b/assets/index.js
@@ -4,7 +4,7 @@ import $ from 'jquery';
 
 /* Materialize imports */
 import '@materializecss/materialize/dist/css/materialize.css';
-import M from '@materializecss/materialize/dist/js/materialize';
+import '@materializecss/materialize/dist/js/materialize';
 
 /* Annotations */
 import annotator from 'annotator';
@@ -348,10 +348,4 @@ $(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 34ab57a16..4d8e924ad 100644
--- a/templates/Import/check_queue.html.twig
+++ b/templates/Import/check_queue.html.twig
@@ -1,9 +1,9 @@
 {% if nbRedisMessages is defined and nbRedisMessages > 0 %}
-    <p class="material-toast hidden">Messages in queue: {{ nbRedisMessages }}</p>
+    <p class="hidden" data-controller="materialize--toast">Messages in queue: {{ nbRedisMessages }}</p>
 {% endif %}
 
 {% if nbRabbitMessages is defined and nbRabbitMessages > 0 %}
-    <p class="material-toast hidden">Messages in queue: {{ nbRabbitMessages }}</p>
+    <p class="hidden" data-controller="materialize--toast">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 2466a0752..c25b106ff 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 %}
-            <p class="material-toast hidden">{{ error.messageKey|trans(error.messageData, 'security') }}</p>
+            <p class="hidden" data-controller="materialize--toast">{{ error.messageKey|trans(error.messageData, 'security') }}</p>
         {% endif %}
 
         {% for flash_message in app.session.flashbag.get('notice') %}
-            <p class="material-toast hidden">{{ flash_message }}</p>
+            <p class="hidden" data-controller="materialize--toast">{{ flash_message }}</p>
         {% endfor %}
 
         <div class="row">
diff --git a/templates/layout.html.twig b/templates/layout.html.twig
index 9ff3b21ab..a0c7b11e7 100644
--- a/templates/layout.html.twig
+++ b/templates/layout.html.twig
@@ -35,7 +35,7 @@
 
 {% block messages %}
     {% for flash_message in app.session.flashbag.get('notice') %}
-        <p class="material-toast hidden">{{ flash_message|trans }}</p>
+        <p class="hidden" data-controller="materialize--toast">{{ flash_message|trans }}</p>
     {% endfor %}
 {% endblock %}