diff --git a/client/src/components/Message.js b/client/src/components/Message.js
index 9054cd7..f4b4f57 100644
--- a/client/src/components/Message.js
+++ b/client/src/components/Message.js
@@ -1,16 +1,27 @@
 import { Typography } from '@material-ui/core'
+import { GroupOutlined } from '@material-ui/icons'
 import React from 'react'
+import ConversationAvatar from './ConversationAvatar'
 
 function Message(props) {
-    console.log("Message render")
-    console.log(props.message)
-
-    return (
-        <div className="message">
-            <div className="message-username">{props.message.author}</div>
-            <Typography className="message-text">{props.message.body}</Typography>
-        </div>
-    )
+    const message = props.message
+    if (message.type == 'text/plain')
+        return (<div className="message">
+            <div className="message-avatar">
+                    <ConversationAvatar name="{message.author}" /></div>
+                    <Typography className="message-text">{message.body}</Typography>
+                </div>)
+    else if (message.type == 'contact')
+        return (<div className="contact-event">
+            <Typography className="message-text">Contact event</Typography>
+        </div>)
+    else if (message.type == 'initial')
+        return (<div className="conversation-event">
+            <Typography variant="h6" className="message-text" color="textSecondary">
+                <div className="inline-avatar"><GroupOutlined color="action" style={{ fontSize: 32 }} /></div>Conversation created
+                </Typography>
+        </div>)
+    else return ''
 }
 
 export default Message
\ No newline at end of file