diff --git a/client/src/App.js b/client/src/App.js
index 10a9370..bf9cc15 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -33,9 +33,9 @@
         <Router>
           <Switch>
             <Route exact path="/"><Redirect to="/account" /></Route>
-            <Route path="/account/:accountId" component={AccountSettings} />
+            <Route path="/account/:accountId" component={JamiMessenger} />
+            <Route path="/account/:accountId/settings" component={AccountSettings} />
             <Route path="/account" component={AccountSelection} />
-            <Route path="/messaging" component={JamiMessenger} />
             <Route component={NotFoundPage} />
           </Switch>
         </Router>
diff --git a/client/src/App.scss b/client/src/App.scss
index 915ab44..74b5e05 100644
--- a/client/src/App.scss
+++ b/client/src/App.scss
@@ -28,10 +28,6 @@
   color: #61dafb;
 }
 
-.loginCard {
-  margin-top: 2em;
-}
-
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);
diff --git a/client/src/components/ContactList.js b/client/src/components/ContactList.js
index af232a0..50b773d 100644
--- a/client/src/components/ContactList.js
+++ b/client/src/components/ContactList.js
@@ -1,14 +1,12 @@
+import List from '@material-ui/core/List'
 import React from 'react'
 
 class ContactList extends React.Component {
     render() {
-
         return (
-            <div className="rooms-list">
-                <ul>
-                    <h3>Liste de contacts</h3>
-                </ul>
-            </div>
+            <List>
+
+            </List>
         )
     }
 }
diff --git a/client/src/components/ConversationList.js b/client/src/components/ConversationList.js
new file mode 100644
index 0000000..4620d77
--- /dev/null
+++ b/client/src/components/ConversationList.js
@@ -0,0 +1,18 @@
+import List from '@material-ui/core/List'
+import React from 'react'
+import ConversationListItem from './ConversationListItem'
+
+class ConversationList extends React.Component {
+    render() {
+
+        return (
+            <List>
+                {this.props.conversations.forEach(conversation => {
+                    <ConversationListItem conversation={conversation} />
+                })}
+            </List>
+        )
+    }
+}
+
+export default ConversationList
\ No newline at end of file
diff --git a/client/src/components/ConversationListItem.js b/client/src/components/ConversationListItem.js
new file mode 100644
index 0000000..3a271fc
--- /dev/null
+++ b/client/src/components/ConversationListItem.js
@@ -0,0 +1,16 @@
+import { Avatar, ListItem, ListItemAvatar, ListItemText } from '@material-ui/core'
+import React from 'react'
+
+class ConversationListItem extends React.Component {
+    render() {
+
+        return (
+            <ListItem alignItems="flex-start">
+                <ListItemAvatar><Avatar>{this.props.conversation.getDisplayName()[0]}</Avatar></ListItemAvatar>
+                <ListItemText primary={this.props.conversation.getDisplayName()} />
+            </ListItem>
+        )
+    }
+}
+
+export default ConversationListItem
\ No newline at end of file
diff --git a/client/src/components/SendMessageForm.js b/client/src/components/SendMessageForm.js
index 43a4998..fd648e5 100644
--- a/client/src/components/SendMessageForm.js
+++ b/client/src/components/SendMessageForm.js
@@ -37,8 +37,8 @@
                     disabled={this.props.disabled}
                     onChange={this.handleChange}
                     value={this.state.message}
-                    cleanOnEnter
-                    onEnter={this.handleSubmit}
+                    //cleanOnEnter
+                    //onEnter={this.handleSubmit}
                     placeholder="Écris ton message et cliques sur Entrer"
                     height="35"
                 />
diff --git a/client/src/pages/messenger.jsx b/client/src/pages/messenger.jsx
index 23f3935..a91a04e 100644
--- a/client/src/pages/messenger.jsx
+++ b/client/src/pages/messenger.jsx
@@ -6,13 +6,18 @@
 import NewContactForm from '../components/NewContactForm'
 //import Sound from 'react-sound';
 import io from "socket.io-client";
+import ConversationList from '../components/ConversationList';
+import CircularProgress from '@material-ui/core/CircularProgress';
 //const socket = io.connect('http://localhost:3000');
+import authManager from '../AuthManager'
 
 class JamiMessenger extends React.Component {
 
-  constructor() {
-    super()
+  constructor(props) {
+    super(props)
+    this.accountId = props.accountId || props.match.params.accountId
     this.state = {
+      conversations: undefined,
       messages: [],
       sound: false
     }
@@ -29,9 +34,18 @@
     //  })
     //});
     this.sendMessage = this.sendMessage.bind(this)
+    this.controller = new AbortController()
   }
 
   componentDidMount() {
+    if (this.req === undefined) {
+      this.req = authManager.fetch(`/api/accounts/${this.accountId}/conversations`, {signal: this.controller.signal})
+        .then(res => res.json())
+        .then(result => {
+          console.log(result)
+          this.setState({conversations: result})
+        })
+    }
     /*socket.on('receivedMessage', (data) => {
       const message = {
         senderId: '65f6674b26e5af6ed0b4e92a13b80ff4bbfdf1e8',
@@ -44,6 +58,11 @@
     });*/
   }
 
+  componentWillUnmount(){
+    this.controller.abort()
+    this.req = undefined
+  }
+
   sendMessage(text) {
     var data = {
       senderId: 'Me',
@@ -61,7 +80,7 @@
     return (
       <div className="app" >
         <Header />
-        <ContactList />
+        {this.state.conversations ? <ConversationList conversations={this.state.conversations} /> : <CircularProgress />}
         <MessageList messages={this.state.messages} />
         <SendMessageForm sendMessage={this.sendMessage} />
         <NewContactForm />
diff --git a/model/Conversation.js b/model/Conversation.js
index d5c41de..8046219 100644
--- a/model/Conversation.js
+++ b/model/Conversation.js
@@ -1,7 +1,7 @@
 class Conversation {
     constructor(id, members) {
         this.id = id
-        this.members = members
+        this.members = members || []
         this.messages = []
     }
 
@@ -12,13 +12,12 @@
     getId() { return this.id }
 
     getDisplayName() {
-        return this.details["Account.displayName"] || this.getDisplayUri()
+        if (this.members.length !== 0) {
+            return this.members[0].getDisplayName()
+        }
+        return this.getDisplayUri()
     }
 
-    getUri() { return this.details["Account.username"] }
-
-    getRegisteredName() { return this.volatileDetails["Account.registeredName"] }
-
     getObject() {
         return {
             id: this.id,
@@ -31,7 +30,7 @@
     }
 
     getDisplayUri() {
-        return this.getRegisteredName() || this.getUri()
+        return this.getId()
     }
 
     addMessage(message) {