diff --git a/backend/web/login/login.py b/backend/web/login/login.py
index 424767b3e98455004181b7d9d1ee4c02e28c518a..e285572165ef9abb04f69910e1b14a1c3b0d9138 100644
--- a/backend/web/login/login.py
+++ b/backend/web/login/login.py
@@ -147,7 +147,9 @@ def login():
                 "message": "Please confirm your credentials to complete this action.",
                 "type": "info"
             }
-            messages.append(message)
+            # Not appending, depending on rendering in frontend now,
+            # see issue: #136
+            # messages.append(message)
         try:
             for msg in flow.ui.messages.value:
                 current_app.logger.info("Kratos message:" + msg.text)
@@ -168,7 +170,9 @@ def login():
                     else:
                         message['type'] = 'info'
 
-                messages.append(message)
+                # Not appending, depending on rendering in frontend now,
+                # see issue: #136
+                # messages.append(message)
 
         except ory_kratos_client.exceptions.ApiAttributeError as ex:
             # This exception is expected when there are no messages
diff --git a/backend/web/static/base.js b/backend/web/static/base.js
index 2c5d21afd5a216566c840c0748d557573e2badb5..1a08b477e14f80b8ac1d60e3750dcfc2d2a9b268 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,33 @@ 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>';
+
+  // Not show again if already shown. User probably just reloaded the screen
+  if (Cookies.get('last_flow_id_rendered_message') == data.id) {
+    return;
+  }
+
+  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');
+  }
+
+  // Store we shown these messages
+  Cookies.set('last_flow_id_rendered_message', data.id);
+
   return html;
 }
 
@@ -357,12 +376,12 @@ function getFormElement(node, context) {
 
   if (name == 'email' || name == 'traits.email') {
     var label;
-    var disable;
+    var readonly;
     if (context == 'settings') {
-      disable = true;
+      readonly = true;
       label = 'Changing your e-mail address is not supported at this point.';
     } else {
-      disable = false;
+      readonly = false;
       label = 'Please provide your e-mail address. We will send a recovery link to that e-mail address.';
     }
     return getFormInput(
@@ -373,7 +392,7 @@ function getFormElement(node, context) {
       'Please enter your e-mail address here',
       label,
       messages,
-      disable,
+      readonly,
     );
   }
 
@@ -475,12 +494,13 @@ function getFormElement(node, context) {
 // param placeHolder: Label to display in field if empty
 // param help: Additional help text, displayed below the field in small font
 // param messages: Message about failed input
-function getFormInput(type, name, value, label, placeHolder, help, messages, disable) {
+// param readonly: Whether the input should be readonly (defaults to false)
+function getFormInput(type, name, value, label, placeHolder, help, messages, readonly) {
   if (typeof help == 'undefined' || help == null) {
     help = '';
   }
-  if (typeof disable == 'undefined') {
-    disable = false;
+  if (typeof readonly == 'undefined') {
+    readonly = false;
   }
   console.log('Messages: ', messages);
 
@@ -509,8 +529,8 @@ function getFormInput(type, name, value, label, placeHolder, help, messages, dis
   if (placeHolder) {
     element += 'placeholder="' + placeHolder + '" ';
   }
-  if (disable) {
-    element += 'disabled ';
+  if (readonly) {
+    element += 'readonly ';
   }
   element += '>';