diff --git a/client/src/pages/messenger.jsx b/client/src/pages/messenger.jsx
index a91a04e..f5e5104 100644
--- a/client/src/pages/messenger.jsx
+++ b/client/src/pages/messenger.jsx
@@ -4,18 +4,23 @@
 import MessageList from '../components/MessageList'
 import SendMessageForm from '../components/SendMessageForm'
 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'
+import Conversation from '../../../model/Conversation'
+import Contact from '../../../model/Contact'
+import ConversationView from '../components/ConversationView';
+import AddContactPage from './addContactPage.jsx';
 
 class JamiMessenger extends React.Component {
 
   constructor(props) {
     super(props)
-    this.accountId = props.accountId || props.match.params.accountId
+
     this.state = {
       conversations: undefined,
       messages: [],
@@ -34,16 +39,20 @@
     //  })
     //});
     this.sendMessage = this.sendMessage.bind(this)
+    this.handleSearch = this.handleSearch.bind(this)
     this.controller = new AbortController()
   }
 
   componentDidMount() {
+    const accountId = this.props.accountId || this.props.match.params.accountId
+    const conversationId = this.props.conversationId || this.props.match.params.conversationId
+
     if (this.req === undefined) {
-      this.req = authManager.fetch(`/api/accounts/${this.accountId}/conversations`, {signal: this.controller.signal})
+      this.req = authManager.fetch(`/api/accounts/${accountId}/conversations`, {signal: this.controller.signal})
         .then(res => res.json())
         .then(result => {
           console.log(result)
-          this.setState({conversations: result})
+          this.setState({conversations:  Object.values(result).map(c => Conversation.from(accountId, c))})
         })
     }
     /*socket.on('receivedMessage', (data) => {
@@ -63,6 +72,27 @@
     this.req = undefined
   }
 
+  handleSearch(query) {
+    const accountId = this.props.accountId || this.props.match.params.accountId
+    const conversationId = this.props.conversationId || this.props.match.params.conversationId
+
+    authManager.fetch(`/api/accounts/${accountId}/ns/name/${query}`)
+    .then(response => {
+      if (response.status === 200) {
+        return response.json()
+      } else {
+        throw new Error(response.status)
+      }
+    }).then(response => {
+      console.log(response)
+      const contact = new Contact(response.address)
+      contact.setRegisteredName(response.name)
+      this.setState({searchResult: contact ? Conversation.fromSingleContact(accountId, contact) : undefined})
+    }).catch(e => {
+      this.setState({searchResult: e})
+    })
+  }
+
   sendMessage(text) {
     var data = {
       senderId: 'Me',
@@ -77,13 +107,23 @@
     })
   }
   render() {
+    const accountId = this.props.accountId || this.props.match.params.accountId
+    const conversationId = this.props.conversationId || this.props.match.params.conversationId
+    const contactId = this.props.contactId || this.props.match.params.contactId
+
+    console.log("JamiMessenger render " + conversationId)
+    console.log(this.props)
+    console.log(this.state)
+
     return (
       <div className="app" >
         <Header />
-        {this.state.conversations ? <ConversationList conversations={this.state.conversations} /> : <CircularProgress />}
-        <MessageList messages={this.state.messages} />
-        <SendMessageForm sendMessage={this.sendMessage} />
-        <NewContactForm />
+        {this.state.conversations ?
+          <ConversationList search={this.state.searchResult} conversations={this.state.conversations} accountId={accountId} /> :
+          <CircularProgress />}
+        <NewContactForm onChange={query => this.handleSearch(query)} />
+        {conversationId && <ConversationView accountId={accountId} conversationId={conversationId} />}
+        {contactId && <AddContactPage accountId={accountId} contactId={contactId} />}
         {this.state.sound && <Sound
           url="stairs.mp3" /*https://notificationsounds.com/message-tones/stairs-567*/
           playStatus={Sound.status.PLAYING}