diff --git a/client/src/components/ConversationList.js b/client/src/components/ConversationList.js
index e83b6c1..b28a6d6 100644
--- a/client/src/components/ConversationList.js
+++ b/client/src/components/ConversationList.js
@@ -4,34 +4,28 @@
 import ListSubheader from '@material-ui/core/ListSubheader';
 import Conversation from '../../../model/Conversation';
 import GroupRoundedIcon from '@material-ui/icons/GroupRounded';
-import { Typography } from '@material-ui/core';
+import Typography from '@material-ui/core/Typography';
 
-class ConversationList extends React.Component {
-    render() {
-        console.log("ConversationList render " + this.props.accountId)
-        console.log(this.props.conversations)
-        return (
-            <div className="rooms-list">
-                <List>
-                    {this.props.search instanceof Conversation &&
-                    (<div>
-                        <ListSubheader>Public directory</ListSubheader>
-                        <ConversationListItem conversation={this.props.search} />
+export default function ConversationList(props) {
+    return (
+        <div className="rooms-list">
+            <List>
+                {props.search instanceof Conversation &&
+                (<div>
+                    <ListSubheader>Public directory</ListSubheader>
+                    <ConversationListItem conversation={props.search} />
                     <ListSubheader>Conversations</ListSubheader>
-                    </div>)}
-                    {this.props.conversations.map(conversation =>
-                        <ConversationListItem key={conversation.getId()} conversation={conversation} />
-                    )}
-                    {this.props.conversations.length === 0 && (
-                        <div className="list-placeholder">
-                            <GroupRoundedIcon color="disabled" fontSize="large"  />
-                            <Typography className="subtitle" variant="subtitle2">No conversation yet</Typography>
-                        </div>
-                    )}
-                </List>
-            </div>
-        )
-    }
+                </div>)}
+                {props.conversations.map(conversation =>
+                    <ConversationListItem key={conversation.getId()} conversation={conversation} />
+                )}
+                {props.conversations.length === 0 && (
+                    <div className="list-placeholder">
+                        <GroupRoundedIcon color="disabled" fontSize="large"  />
+                        <Typography className="subtitle" variant="subtitle2">No conversation yet</Typography>
+                    </div>
+                )}
+            </List>
+        </div>
+    )
 }
-
-export default ConversationList
\ No newline at end of file
diff --git a/client/src/components/ConversationListItem.js b/client/src/components/ConversationListItem.js
index cc72c70..7e13974 100644
--- a/client/src/components/ConversationListItem.js
+++ b/client/src/components/ConversationListItem.js
@@ -1,34 +1,34 @@
 import { Avatar, ListItem, ListItemAvatar, ListItemText } from '@material-ui/core'
 import React from 'react'
 import Conversation from '../../../model/Conversation'
-import { withRouter } from 'react-router-dom';
+import { useHistory, useParams } from "react-router-dom"
+import PersonIcon from '@material-ui/icons/PersonRounded'
 
-class ConversationListItem extends React.Component {
-    render() {
-        const conversation = this.props.conversation;
-        const pathId = this.props.match.params.conversationId || this.props.match.params.contactId
-        const isSelected = conversation.getDisplayUri() === pathId
-        console.log("ConversationListItem render " + conversation)
-        console.log(this.props)
+export default function ConversationListItem(props) {
+    const { conversationId, contactId } = useParams()
+    const conversation = props.conversation
+    const pathId = conversationId || contactId
+    const isSelected = conversation.getDisplayUri() === pathId
+    const displayName = conversation.getDisplayName()
+    const history = useHistory()
 
-        const uri = conversation.getId() ? `conversation/${conversation.getId()}` : `addContact/${conversation.getFirstMember().contact.getUri()}`;
-        if (conversation instanceof Conversation) {
-            return (
-                <ListItem
-                    button
-                    alignItems="flex-start"
-                    selected={isSelected}
-                    style={{overflow:'hidden'}}
-                    onClick={() => this.props.history.push(`/account/${conversation.getAccountId()}/${uri}`)}>
-                    <ListItemAvatar><Avatar>{conversation.getDisplayName()[0].toUpperCase()}</Avatar></ListItemAvatar>
-                    <ListItemText
-                        style={{overflow:'hidden', textOverflow:'ellipsis'}}
-                        primary={conversation.getDisplayName()} secondary={conversation.getDisplayUri()} />
-                </ListItem>
-            )
-        } else
-            return null
-    }
+    const uri = conversation.getId() ? `conversation/${conversation.getId()}` : `addContact/${conversation.getFirstMember().contact.getUri()}`
+    if (conversation instanceof Conversation) {
+        return (
+            <ListItem
+                button
+                alignItems="flex-start"
+                selected={isSelected}
+                style={{overflow:'hidden'}}
+                onClick={() => history.push(`/account/${conversation.getAccountId()}/${uri}`)}>
+                <ListItemAvatar>
+                    <Avatar>{displayName ? displayName[0].toUpperCase() : <PersonIcon />}</Avatar>
+                </ListItemAvatar>
+                <ListItemText
+                    style={{overflow:'hidden', textOverflow:'ellipsis'}}
+                    primary={conversation.getDisplayName()} secondary={conversation.getDisplayUri()} />
+            </ListItem>
+        )
+    } else
+        return null
 }
-
-export default withRouter(ConversationListItem)
\ No newline at end of file
diff --git a/client/src/components/MessageList.js b/client/src/components/MessageList.js
index 48bfb28..d856c17 100644
--- a/client/src/components/MessageList.js
+++ b/client/src/components/MessageList.js
@@ -1,32 +1,26 @@
 import { Avatar, Box, Divider, Typography } from '@material-ui/core'
-import Paper from '@material-ui/core/Paper'
 import React from 'react'
 import Message from './Message'
+import PersonIcon from '@material-ui/icons/PersonRounded'
 
-class MessageList extends React.Component {
-    render() {
-        return (
-            <div className="message-list">
-                <Box>
-                <Box style={{display:'inline-block', margin: 16, verticalAlign:'middle'}}>
-                    <Avatar>{this.props.conversation.getDisplayName()[0].toUpperCase()}</Avatar>
+export default function MessageList(props) {
+    const displayName = props.conversation.getDisplayName()
+
+    return (
+        <div className="message-list">
+            <Box>
+                <Box style={{ display: 'inline-block', margin: 16, verticalAlign: 'middle' }}>
+                    <Avatar>{displayName ? displayName[0].toUpperCase() : <PersonIcon />}</Avatar>
                 </Box>
-                <Box style={{display:'inline-block', verticalAlign:'middle'}}>
-                    <Typography variant="h5">{this.props.conversation.getDisplayName()}</Typography>
-                    <Typography variant="subtitle1">{this.props.conversation.getId()}</Typography>
-                    </Box>
-                    </Box>
-                <Divider orientation="horizontal" />
-                {
-                    this.props.messages.map((message, index) => {
-                        /*DUMMY_DATA.map((message, index) => {*/
-                        return (
-                            <Message key={index} username={message.senderId} text={message.text} />
-                        )
-                    })}
-            </div>
-        )
-    }
-}
-
-export default MessageList
\ No newline at end of file
+                <Box style={{ display: 'inline-block', verticalAlign: 'middle' }}>
+                    <Typography variant="h5">{displayName}</Typography>
+                    <Typography variant="subtitle1">{props.conversation.getId()}</Typography>
+                </Box>
+            </Box>
+            <Divider orientation="horizontal" />
+            {props.messages.map((message, index) =>
+                <Message key={index} username={message.senderId} text={message.text} />
+            )}
+        </div>
+    )
+}
\ No newline at end of file