diff --git a/backend/web/static/base.js b/backend/web/static/base.js
index 2c5d21afd5a216566c840c0748d557573e2badb5..8b8ef3046d96981e9fc82bef0c2a369465705976 100644
--- a/backend/web/static/base.js
+++ b/backend/web/static/base.js
@@ -91,8 +91,7 @@ function flow_login() {
         $('#contentLogin_' + group).html(form_html);
       }
 
-      var messages_html = render_messages(data);
-      $('#contentMessages').html(messages_html);
+      render_messages(data);
 
       $('#totp_code').focus();
       $('#identifier').focus();
@@ -168,6 +167,9 @@ function flow_settings() {
         $('#contentTotp').hide();
       }
 
+      // Render messages given from the API
+      render_messages(data);
+
       // Render the forms (password, profile, totp) based on the fields we got
       // from the API.
       var html = render_form(data, 'password', 'settings');
@@ -292,16 +294,32 @@ function render_form(data, group, context) {
 // Check if there are any general messages to show to the user and render them
 function render_messages(data) {
   var messages = data.ui.messages;
-  if (typeof message == 'undefined' || messages == []) {
+  if (typeof messages == 'undefined' || messages == []) {
     return '';
   }
-  var html = '<ul>';
+
+  if (Cookies.get('last_flow_id_rendered_message') == data.id) {
+    console.log("We already shown this message. User manually reloaded page.");
+    return;
+  }
+  console.log("Running message render, and gues what, i have messages");
+  var html = '';
   messages.forEach((message) => {
-    html += '<li>';
     html += message.text;
-    html += '</li>';
+    html += '</br>';
   });
-  html += '</ul>';
+  $('#contentMessages').html(html);
+
+  $('#contentMessages').addClass('alert');
+  if (data.state == 'success') {
+    $('#contentMessages').addClass('alert-success');
+  }
+  else {
+    $('#contentMessages').addClass('alert-warning');
+  }
+
+  Cookies.set('last_flow_id_rendered_message', data.id);
+ 
   return html;
 }