diff --git a/client/src/pages/messenger.jsx b/client/src/pages/messenger.jsx
index 3fef47b..5b40718 100644
--- a/client/src/pages/messenger.jsx
+++ b/client/src/pages/messenger.jsx
@@ -1,14 +1,10 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import Header from '../components/Header'
-import ContactList from '../components/ContactList'
-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'
@@ -16,46 +12,26 @@
 import ConversationView from '../components/ConversationView';
 import AddContactPage from './addContactPage.jsx';
 import LoadingPage from '../components/loading';
+import { useParams } from 'react-router';
 
-class JamiMessenger extends React.Component {
+const JamiMessenger = (props) => {
+  const [conversations, setConversations] = useState(undefined)
+  const [searchResult, setSearchResults] = useState(undefined)
 
-  constructor(props) {
-    super(props)
+  const params = useParams()
+  const accountId = props.accountId || params.accountId
+  const conversationId = props.conversationId || params.conversationId
+  const contactId = props.contactId || params.contactId
 
-    this.state = {
-      conversations: undefined,
-      messages: [],
-      sound: false
-    }
-
+      //this.socket = socketIOClient(ENDPOINT);
     /*socket.on('connect', () => {
       console.log("Success !")
     })*/
-
-
-    //this.socket = socketIOClient(ENDPOINT);
-    //this.socket.on("FromAPI", data => {
+        //this.socket.on("FromAPI", data => {
     //  this.setState({
     //    messages: [...this.state.messages, data]
     //  })
     //});
-    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/${accountId}/conversations`, {signal: this.controller.signal})
-        .then(res => res.json())
-        .then(result => {
-          console.log(result)
-          this.setState({conversations:  Object.values(result).map(c => Conversation.from(accountId, c))})
-        })
-    }
     /*socket.on('receivedMessage', (data) => {
       const message = {
         senderId: '65f6674b26e5af6ed0b4e92a13b80ff4bbfdf1e8',
@@ -66,17 +42,29 @@
         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()
+  })
 
-  componentWillUnmount(){
-    this.controller.abort()
-    this.req = undefined
-  }
+  useEffect(() => {
+    const controller = new AbortController()
+    authManager.fetch(`/api/accounts/${accountId}/conversations`, {signal: controller.signal})
+    .then(res => res.json())
+    .then(result => {
+      console.log(result)
+      setConversations(Object.values(result).map(c => Conversation.from(accountId, c)))
+    })
+    return () => controller.abort()
+  }, [accountId])
 
-  handleSearch(query) {
-    const accountId = this.props.accountId || this.props.match.params.accountId
-    const conversationId = this.props.conversationId || this.props.match.params.conversationId
-
+  const handleSearch = (query) => {
     authManager.fetch(`/api/accounts/${accountId}/ns/name/${query}`)
     .then(response => {
       if (response.status === 200) {
@@ -88,54 +76,26 @@
       console.log(response)
       const contact = new Contact(response.address)
       contact.setRegisteredName(response.name)
-      this.setState({searchResult: contact ? Conversation.fromSingleContact(accountId, contact) : undefined})
+      setSearchResults(contact ? Conversation.fromSingleContact(accountId, contact) : undefined)
     }).catch(e => {
-      this.setState({searchResult: e})
+      setSearchResults(undefined)
     })
   }
 
-  sendMessage(text) {
-    var data = {
-      senderId: 'Me',
-      destinationId: '65f6674b26e5af6ed0b4e92a13b80ff4bbfdf1e8',
-      text: text
-    }
-    //socket.emit("SendMessage", data);
-    console.log(data.text);
-    this.setState({
-      messages: [...this.state.messages, data],
-      sound: false
-    })
-  }
-  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(props)
 
-    console.log("JamiMessenger render " + conversationId)
-    console.log(this.props)
-    console.log(this.state)
-
-    return (
-      <div className="app" >
-        <Header />
-        {this.state.conversations ?
-          <ConversationList search={this.state.searchResult} conversations={this.state.conversations} accountId={accountId} /> :
-          <div className="rooms-list"><LoadingPage /></div>}
-        <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}
-          playFromPosition={0 /* in milliseconds */}
-          onLoading={this.handleSongLoading}
-          onPlaying={this.handleSongPlaying}
-          onFinishedPlaying={this.handleSongFinishedPlaying}
-        />}
-      </div>
-    )
-  }
+  return (
+    <div className="app" >
+      <Header />
+      {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>
+  )
 }
 
 export default JamiMessenger
\ No newline at end of file
diff --git a/client/src/pages/serverConfiguration.jsx b/client/src/pages/serverConfiguration.jsx
new file mode 100644
index 0000000..ba99fe6
--- /dev/null
+++ b/client/src/pages/serverConfiguration.jsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import Header from '../components/Header'
+import AccountPreferences from '../components/AccountPreferences'
+import Container from '@material-ui/core/Container';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import authManager from '../AuthManager'
+import Account from '../../../model/Account'
+
+const ServerOverview = (props) => {
+
+    this.accountId = props.accountId || props.match.params.accountId
+    this.state = { loaded: false, account: props.account }
+    this.req = undefined
+
+  componentDidMount() {
+    this.controller = new AbortController()
+    if (this.req === undefined) {
+      this.req = authManager.fetch(`/api/serverConfig`, {signal: this.controller.signal})
+        .then(res => res.json())
+        .then(result => {
+          console.log(result)
+          this.setState({loaded: true, account: Account.from(result)})
+        })
+    }
+  }
+
+  componentWillUnmount() {
+    this.controller.abort()
+    this.req = undefined
+  }
+
+  return (
+    <Container maxWidth="sm" className="app" >
+      <Header />
+      {this.state.loaded ? <AccountPreferences account={this.state.account} /> : <CircularProgress />}
+    </Container>
+  )
+}
+
+export default ServerOverview;
\ No newline at end of file