diff --git a/templates/base.html b/templates/base.html
index 8bf7060..28313da 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -249,7 +249,7 @@
     <div class="container mx-auto mt-20 p-2">
         {% if messages %}
             {% for message in messages %}
-                <div class="bg-{{ message.tags }}-100 bg-yellow-100 border border-{{ message.tags }}-400 text-{{ message.tags }}-700 border-yellow-500 text-yellow-700 px-4 py-3 rounded relative mb-4" role="alert">
+                <div class="flash-message bg-{{ message.tags }}-100 bg-yellow-100 border border-{{ message.tags }}-400 text-{{ message.tags }}-700 border-yellow-500 text-yellow-700 px-4 py-3 rounded relative mb-4 transition-all duration-500 ease-in-out" role="alert">
                     <span class="block sm:inline">{{ message }}</span>
                 </div>
             {% endfor %}
@@ -272,6 +272,16 @@
                 theme: 'classic',
                 width: '100%'
             });
+
+            // Auto-dismiss flash messages after 5s with fade + collapse animation
+            setTimeout(function() {
+                $('.flash-message').each(function() {
+                    $(this).css({'opacity': '0', 'max-height': $(this).outerHeight(true) + 'px', 'overflow': 'hidden', 'margin-bottom': $(this).css('margin-bottom')});
+                    $(this).animate({'opacity': 0, 'max-height': 0, 'marginBottom': 0, 'paddingTop': 0, 'paddingBottom': 0}, 500, function() {
+                        $(this).remove();
+                    });
+                });
+            }, 5000);
         });
     </script>
     {% block extra_js %}{% endblock %}