diff --git a/scripts/pi-hole/js/utils.js b/scripts/pi-hole/js/utils.js
index 15de336b..55dfca3d 100644
--- a/scripts/pi-hole/js/utils.js
+++ b/scripts/pi-hole/js/utils.js
@@ -93,6 +93,10 @@ function showAlert(type, icon, title, message) {
       type: type,
       delay: 5000, // default value
       mouse_over: "pause",
+      animate: {
+        enter: "animate__animated animate__fadeInDown",
+        exit: "animate__animated animate__fadeOutUp"
+      }
     };
   switch (type) {
     case "info":
diff --git a/scripts/pi-hole/lua/header.lp b/scripts/pi-hole/lua/header.lp
index 4417e652..8e41a0e8 100644
--- a/scripts/pi-hole/lua/header.lp
+++ b/scripts/pi-hole/lua/header.lp
@@ -89,11 +89,11 @@ is_authenticated = mg.request_info.is_authenticated
 
     <!-- Common styles -->
     <link rel="stylesheet" href="<?=pihole.fileversion('style/vendor/bootstrap/css/bootstrap.min.css')?>">
+    <link rel="stylesheet" href="<?=pihole.fileversion('style/vendor/animate.min.css')?>">
 <?
 if startsWith(scriptname, 'groups') then
     -- Group management styles
 ?>
-    <link rel="stylesheet" href="<?=pihole.fileversion('style/vendor/animate.min.css')?>">
     <link rel="stylesheet" href="<?=pihole.fileversion('style/vendor/bootstrap-select.min.css')?>">
     <link rel="stylesheet" href="<?=pihole.fileversion('style/vendor/bootstrap-toggle.min.css')?>">
 <? end ?>