diff --git a/.gitignore b/.gitignore
index 199290d..698e8b3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,6 +11,8 @@ __pycache__/
 # C extensions
 *.so
 
+venv/
+
 # Distribution / packaging
 .Python
 build/
diff --git a/allauth_ui/templates/allauth/layouts/base.html b/allauth_ui/templates/allauth/layouts/base.html
index 63e04a8..7ee2869 100644
--- a/allauth_ui/templates/allauth/layouts/base.html
+++ b/allauth_ui/templates/allauth/layouts/base.html
@@ -4,64 +4,62 @@
 {% load allauth_ui %}
 <!DOCTYPE html>
 <html data-theme="{% allauth_ui_theme %}">
-    <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>
-            {% block head_title %}
-            {% endblock head_title %}
-        </title>
-        {% block extra_head %}
-            <link rel="stylesheet" href="{% static 'allauth_ui/output.css' %}">
-        {% endblock extra_head %}
-    </head>
-    <body class="min-h-screen bg-base-300">
-        {% block body %}
-            {% if messages %}
-                {% for message in messages %}
-                    <div role="alert"
-                         class="text-sm md:text-base alert alert-{{ message.tags }}">
-                        <span><strong>{{ message }}</strong></span>
-                    </div>
-                {% endfor %}
-            {% endif %}
-            {% block content %}
-            {% endblock content %}
-            <div class="mx-auto [&_a]:link text-sm flex flex-col md:flex-row items-center justify-center gap-3 mt-3">
-                {% if user.is_authenticated %}
-                    {% url 'account_email' as email_url %}
-                    {% if email_url %}
-                        <a href="{{ email_url }}">{% trans "Change Email" %}</a>
-                    {% endif %}
-                    {% url 'account_change_password' as change_password_url %}
-                    {% if change_password_url %}
-                        <a href="{{ change_password_url }}">{% trans "Change Password" %}</a>
-                    {% endif %}
-                    {% url 'mfa_index' as mfa_url %}
-                    {% if mfa_url %}
-                        <a href="{{ mfa_url }}">{% trans "Two-Factor Authentication" %}</a>
-                    {% endif %}
-                    {% url 'usersessions_list' as usersessions_list_url %}
-                    {% if usersessions_list_url %}
-                        <a href="{{ usersessions_list_url }}">{% trans "Sessions" %}</a>
-                    {% endif %}
-                    {% url 'account_logout' as logout_url %}
-                    {% if logout_url %}
-                        <a href="{{ logout_url }}">{% trans "Sign Out" %}</a>
-                    {% endif %}
-                {% else %}
-                    {% url 'account_login' as login_url %}
-                    {% if login_url %}
-                        <a href="{{ login_url }}">{% trans "Sign In" %}</a>
-                    {% endif %}
-                    {% url 'account_signup' as signup_url %}
-                    {% if signup_url %}
-                        <a href="{{ signup_url }}">{% trans "Sign Up" %}</a>
-                    {% endif %}
-                {% endif %}
-            </div>
-        {% endblock body %}
-        {% block extra_body %}
-        {% endblock extra_body %}
-    </body>
-</html>
+
+<head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>
+        {% block head_title %}
+        {% endblock head_title %}
+    </title>
+    {% block extra_head %}
+    <link rel="stylesheet" href="{% static 'allauth_ui/output.css' %}">
+    {% endblock extra_head %}
+</head>
+
+<body class="min-h-screen bg-base-300">
+    {% block body %}
+
+    {% include 'helpers/messages.html' %}
+
+    {% block content %}
+    {% endblock content %}
+    <div class="mx-auto [&_a]:link text-sm flex flex-col md:flex-row items-center justify-center gap-3 mt-3">
+        {% if user.is_authenticated %}
+        {% url 'account_email' as email_url %}
+        {% if email_url %}
+        <a href="{{ email_url }}">{% trans "Change Email" %}</a>
+        {% endif %}
+        {% url 'account_change_password' as change_password_url %}
+        {% if change_password_url %}
+        <a href="{{ change_password_url }}">{% trans "Change Password" %}</a>
+        {% endif %}
+        {% url 'mfa_index' as mfa_url %}
+        {% if mfa_url %}
+        <a href="{{ mfa_url }}">{% trans "Two-Factor Authentication" %}</a>
+        {% endif %}
+        {% url 'usersessions_list' as usersessions_list_url %}
+        {% if usersessions_list_url %}
+        <a href="{{ usersessions_list_url }}">{% trans "Sessions" %}</a>
+        {% endif %}
+        {% url 'account_logout' as logout_url %}
+        {% if logout_url %}
+        <a href="{{ logout_url }}">{% trans "Sign Out" %}</a>
+        {% endif %}
+        {% else %}
+        {% url 'account_login' as login_url %}
+        {% if login_url %}
+        <a href="{{ login_url }}">{% trans "Sign In" %}</a>
+        {% endif %}
+        {% url 'account_signup' as signup_url %}
+        {% if signup_url %}
+        <a href="{{ signup_url }}">{% trans "Sign Up" %}</a>
+        {% endif %}
+        {% endif %}
+    </div>
+    {% endblock body %}
+    {% block extra_body %}
+    {% endblock extra_body %}
+</body>
+
+</html>
\ No newline at end of file
diff --git a/allauth_ui/templates/helpers/messages.html b/allauth_ui/templates/helpers/messages.html
new file mode 100644
index 0000000..9918f1b
--- /dev/null
+++ b/allauth_ui/templates/helpers/messages.html
@@ -0,0 +1,17 @@
+{% if messages %}
+<ul class="max-w-screen-lg mx-auto flex flex-col gap-4 mb-5 pt-5">
+    {% for message in messages %}
+    <li class="*:!mb-0">
+        {% if message.tags == 'info' %}
+        {% include "helpers/messages/info.html" with message=message %}
+        {% elif message.tags == 'success' %}
+        {% include "helpers/messages/success.html" with message=message %}
+        {% elif message.tags == 'warning' %}
+        {% include "helpers/messages/warning.html" with message=message %}
+        {% elif message.tags == 'error' %}
+        {% include "helpers/messages/error.html" with message=message %}
+        {% endif %}
+    </li>
+    {% endfor %}
+</ul>
+{% endif %}
\ No newline at end of file
diff --git a/allauth_ui/templates/helpers/messages/error.html b/allauth_ui/templates/helpers/messages/error.html
new file mode 100644
index 0000000..aa2b22d
--- /dev/null
+++ b/allauth_ui/templates/helpers/messages/error.html
@@ -0,0 +1,3 @@
+<p class="mb-3 px-3 py-3 rounded-md text-sm last:mb-8 bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400">
+    {{ message }}
+</p>
\ No newline at end of file
diff --git a/allauth_ui/templates/helpers/messages/info.html b/allauth_ui/templates/helpers/messages/info.html
new file mode 100644
index 0000000..ed51aed
--- /dev/null
+++ b/allauth_ui/templates/helpers/messages/info.html
@@ -0,0 +1,3 @@
+<p class="mb-3 px-3 py-3 rounded-md text-sm last:mb-8 bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400">
+    {{ message }}
+</p>
diff --git a/allauth_ui/templates/helpers/messages/success.html b/allauth_ui/templates/helpers/messages/success.html
new file mode 100644
index 0000000..f78d810
--- /dev/null
+++ b/allauth_ui/templates/helpers/messages/success.html
@@ -0,0 +1,3 @@
+<p class="mb-3 px-3 py-3 rounded-md text-sm last:mb-8 bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400">
+    {{ message }}
+</p>
diff --git a/allauth_ui/templates/helpers/messages/warning.html b/allauth_ui/templates/helpers/messages/warning.html
new file mode 100644
index 0000000..ba161d8
--- /dev/null
+++ b/allauth_ui/templates/helpers/messages/warning.html
@@ -0,0 +1,3 @@
+<p class="mb-3 px-3 py-3 rounded-md text-sm last:mb-8 bg-orange-100 text-orange-700 dark:bg-orange-500/20 dark:text-orange-400">
+    {{ message }}
+</p>
