diff --git a/client/src/pages/addContactPage.jsx b/client/src/pages/addContactPage.jsx
index ee57b69..a4c32d7 100644
--- a/client/src/pages/addContactPage.jsx
+++ b/client/src/pages/addContactPage.jsx
@@ -40,7 +40,7 @@
   }
 
   return (
-    <Container className='message-list'>
+    <Container className='messenger'>
       <Card variant='outlined' style={{ borderRadius: 16, maxWidth: 560, margin: "16px auto" }}>
         <CardContent>
           <Typography variant='h6'>Jami key ID</Typography>
diff --git a/client/src/pages/messenger.jsx b/client/src/pages/messenger.jsx
index 5b40718..9b825f9 100644
--- a/client/src/pages/messenger.jsx
+++ b/client/src/pages/messenger.jsx
@@ -3,9 +3,7 @@
 import NewContactForm from '../components/NewContactForm'
 
 //import Sound from 'react-sound';
-import io from "socket.io-client";
 import ConversationList from '../components/ConversationList';
-//const socket = io.connect('http://localhost:3000');
 import authManager from '../AuthManager'
 import Conversation from '../../../model/Conversation'
 import Contact from '../../../model/Contact'
@@ -16,6 +14,7 @@
 
 const JamiMessenger = (props) => {
   const [conversations, setConversations] = useState(undefined)
+  const [searchQuery, setSearchQuery] = useState('')
   const [searchResult, setSearchResults] = useState(undefined)
 
   const params = useParams()
@@ -23,36 +22,6 @@
   const conversationId = props.conversationId || params.conversationId
   const contactId = props.contactId || params.contactId
 
-      //this.socket = socketIOClient(ENDPOINT);
-    /*socket.on('connect', () => {
-      console.log("Success !")
-    })*/
-        //this.socket.on("FromAPI", data => {
-    //  this.setState({
-    //    messages: [...this.state.messages, data]
-    //  })
-    //});
-    /*socket.on('receivedMessage', (data) => {
-      const message = {
-        senderId: '65f6674b26e5af6ed0b4e92a13b80ff4bbfdf1e8',
-        text: data
-      }
-      this.setState({
-        messages: [...this.state.messages, message],
-        sound: true
-      })
-    });*/
-  useEffect(() => {
-    console.log("io.connect")
-    const socket = io()
-    socket.on('receivedMessage', (data) => {
-      console.log("receivedMessage")
-      console.log(data)
-      conversation.addMessage(data)
-    })
-    return () => socket.disconnect()
-  })
-
   useEffect(() => {
     const controller = new AbortController()
     authManager.fetch(`/api/accounts/${accountId}/conversations`, {signal: controller.signal})
@@ -64,8 +33,11 @@
     return () => controller.abort()
   }, [accountId])
 
-  const handleSearch = (query) => {
-    authManager.fetch(`/api/accounts/${accountId}/ns/name/${query}`)
+  useEffect(() => {
+    if (!searchQuery)
+      return
+    const controller = new AbortController()
+    authManager.fetch(`/api/accounts/${accountId}/ns/name/${searchQuery}`, {signal: controller.signal})
     .then(response => {
       if (response.status === 200) {
         return response.json()
@@ -80,18 +52,16 @@
     }).catch(e => {
       setSearchResults(undefined)
     })
-  }
-
-  console.log("JamiMessenger render " + conversationId)
-  console.log(props)
+    return () => controller.abort()
+  }, [accountId, searchQuery])
 
   return (
     <div className="app" >
       <Header />
+      <NewContactForm onChange={setSearchQuery} />
       {conversations ?
         <ConversationList search={searchResult} conversations={conversations} accountId={accountId} /> :
         <div className="rooms-list"><LoadingPage /></div>}
-      <NewContactForm onChange={handleSearch} />
       {conversationId && <ConversationView accountId={accountId} conversationId={conversationId} />}
       {contactId && <AddContactPage accountId={accountId} contactId={contactId} />}
     </div>