diff --git a/frontend/application/templates/_messages.html b/frontend/application/templates/_messages.html
index fd55a380f4bdf5a1e2c66af4a859cdb5adc3bbf1..1cc31eb6655453eb72ef9313539ad19f6f594dfe 100644
--- a/frontend/application/templates/_messages.html
+++ b/frontend/application/templates/_messages.html
@@ -1,11 +1,75 @@
-<div>
- {% with messages = get_flashed_messages(with_categories=true) %}
- {% if messages %}
- <ul>
- {% for category, message in messages %}
- <li class="{{ category }}">{{ message }}</li>
- {% endfor %}
- </ul>
- {% endif %}
- {% endwith %}
- </div>
\ No newline at end of file
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>Flash Messages</title>
+ <style>
+ .flash-messages {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ .flash-messages__list {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ }
+ .flash-messages__item {
+ margin: 0 0 10px;
+ padding: 15px;
+ border-radius: 5px;
+ font-size: 16px;
+ font-weight: bold;
+ display: flex;
+ align-items: center;
+ }
+ .flash-messages__item--error {
+ background-color: #f44336;
+ border: 1px solid #f44336;
+ }
+ .flash-messages__item--warning {
+ background-color: #ff9800;
+ border: 1px solid #ff9800;
+ }
+ .flash-messages__item--success {
+ background-color: #4caf50;
+ border: 1px solid #4caf50;
+ }
+ .flash-messages__icon {
+ display: inline-block;
+ width: 20px;
+ height: 20px;
+ margin-right: 10px;
+ border-radius: 50%;
+ }
+ .flash-messages__icon--error {
+ background-color: #f44336;
+ }
+ .flash-messages__icon--warning {
+ background-color: #ff9800;
+ }
+ .flash-messages__icon--success {
+ background-color: #4caf50;
+ }
+ .flash-messages__text {
+ color: #fff;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flash-messages">
+ {% with messages = get_flashed_messages(with_categories=true) %}
+ {% if messages %}
+ <ul class="flash-messages__list">
+ {% for category, message in messages %}
+ <li class="flash-messages__item flash-messages__item--{{ category }}">
+ <span class="flash-messages__icon"></span>
+ <span class="flash-messages__text">{{ message }}</span>
+ </li>
+ {% endfor %}
+ </ul>
+ {% endif %}
+ {% endwith %}
+ </div>
+ </body>
+</html>