diff --git a/frontend/app/components/ui/Message/Message.js b/frontend/app/components/ui/Message/Message.js
index ec85e7a96..f8417c25f 100644
--- a/frontend/app/components/ui/Message/Message.js
+++ b/frontend/app/components/ui/Message/Message.js
@@ -1,16 +1,31 @@
 import React from 'react';
 import styles from './message.module.css';
 import { Icon } from 'UI';
+import cn from 'classnames';
 
-const Message = ({ hidden = false, visible = false, children, inline=false, success=false, info=true, text }) => (visible || !hidden) ? (
-	<div className={ styles.message } data-inline={ inline }>
-		<Icon name="check" color='green' />
-		{ text 
-			? text
-			: children 
-		}
-	</div>) : null;
+// TODO this has to be improved
+const Message = ({
+  icon = 'check',
+  hidden = false,
+  visible = false,
+  children,
+  inline = false,
+  success = false,
+  info = true,
+  text,
+}) =>
+  visible || !hidden ? (
+    <div className={cn(styles.message, 'flex items-center')} data-inline={inline}>
+      <Icon
+        name={success ? 'check' : 'close'}
+        color={success ? 'green' : 'red'}
+        className="mr-2"
+        size={success ? 20 : 14}
+      />
+      {text ? text : children}
+    </div>
+  ) : null;
 
-Message.displayName = "Message";
+Message.displayName = 'Message';
 
-export default Message;
\ No newline at end of file
+export default Message;