diff --git a/client/src/components/ConversationView.js b/client/src/components/ConversationView.js
index dfba0d1..964d5bf 100644
--- a/client/src/components/ConversationView.js
+++ b/client/src/components/ConversationView.js
@@ -7,35 +7,40 @@
 import io from "socket.io-client";
 import { Box, Stack, Typography } from '@mui/material';
 import ConversationAvatar from './ConversationAvatar';
+import { useConversationQuery, useMessagesQuery } from '../services/conversation';
 
 const ConversationView = props => {
   const [loadingMessages, setLoadingMessages] = useState(false)
-  const [socket, setSocket] = useState(undefined)
-  const [state, setState] = useState({
-    loaded: false,
-    error: false,
-    conversation: undefined
-  })
+  const [socket, setSocket] = useState()
+  const [conversation, setConversation] = useState()
+  const [messages, setMessages] = useState([])
+  const [loaded, setLoaded] = useState(true)
+  const [error, setError] = useState(false)
+
+  const conversationQuery = useConversationQuery(props.accountId, props.conversationId)
+  const messagesQuery = useMessagesQuery(props.accountId, props.conversationId)
 
   useEffect(() => {
-    const controller = new AbortController()
-    authManager.fetch(`/api/accounts/${props.accountId}/conversations/${props.conversationId}`, {signal: controller.signal})
-    .then(res => res.json())
-    .then(result => {
-      console.log(result)
-      setState({
-        loaded: true,
-        conversation: Conversation.from(props.accountId, result)
-      })
-    }, error => {
-      console.log(`get error ${error}`)
-      setState({
-        loaded: true,
-        error: true
-      })
-    })
-   // return () => controller.abort() // crash on React18
-  }, [props.accountId, props.conversationId])
+    if (conversationQuery.data) {
+      const conversation = Conversation.from(props.accountId, conversationQuery.data)
+      setConversation(conversation)
+    }
+  }, [conversationQuery.data])
+
+  useEffect(() => {
+    if (messagesQuery.data) {
+      const sortedMessages = sortMessages(messagesQuery.data)
+      setMessages(sortedMessages)
+    }
+  }, [messagesQuery.data])
+
+  useEffect(() => {
+    setLoaded(!(conversationQuery.isLoading || messagesQuery.isLoading))
+  }, [conversationQuery.isLoading, messagesQuery.isLoading])
+  
+  useEffect(() => {
+    setError(conversationQuery.isError || messagesQuery.isError)
+  }, [conversationQuery.isError, messagesQuery.isError])
 
   useEffect(() => {
     console.log("io.connect")
@@ -49,41 +54,18 @@
   }, [])
 
   useEffect(() => {
-    if (!state.conversation)
+    if (!conversation)
       return
-    console.log(`io set conversation ${state.conversation.getId()} `+ socket)
+    console.log(`io set conversation ${props.conversationId} `+ socket)
     if (socket)
-      socket.emit('conversation', { accountId: state.conversation.getAccountId(), conversationId: state.conversation.getId() })
+      socket.emit('conversation', { accountId: props.accountId, conversationId: props.conversationId })
     socket.off('newMessage')
     socket.on('newMessage', (data) => {
       console.log("newMessage")
       console.log(data)
-      setState(state => {
-        if (state.conversation)
-          state.conversation.addMessage(data)
-        return {...state}
-      })
+      setMessages(addMessage(messages, data))
     })
-  }, [state.conversation ? state.conversation.getId() : "", socket])
-
-  useEffect(() => {
-    if (!loadingMessages || !state.conversation)
-      return
-    console.log(`Load more messages`)
-    const controller = new AbortController()
-    authManager.fetch(`/api/accounts/${state.conversation.getAccountId()}/conversations/${state.conversation.getId()}/messages`, {signal: controller.signal})
-      .then(res => res.json())
-      .then(messages => {
-        console.log(messages)
-        setLoadingMessages(false)
-        setState(state => {
-          if (state.conversation)
-            state.conversation.addLoadedMessages(messages)
-            return {...state}
-          })
-      }).catch(e => console.log(e))
-     // return () => controller.abort() // crash on React18
-  }, [state, loadingMessages])
+  }, [conversation ? props.conversationId : "", socket])
 
   const sendMessage = (message) => {
     authManager.fetch(`/api/accounts/${props.accountId}/conversations/${props.conversationId}`, {
@@ -96,10 +78,10 @@
     })
   }
 
-  if (state.loaded === false) {
+  if (!loaded) {
       return <LoadingPage />
-  } else if (state.error === true) {
-      return <div>Error loding {props.conversationId}</div>
+  } else if (error) {
+      return <div>Error loading {props.conversationId}</div>
   }
 
   return (
@@ -109,19 +91,19 @@
     >
       <Stack direction="row" flexGrow={0}>
         <Box style={{ margin: 16, flexShrink: 0 }}>
-          <ConversationAvatar displayName={state.conversation.getDisplayNameNoFallback()} />
+          <ConversationAvatar displayName={conversation?.getDisplayNameNoFallback()} />
         </Box>
         <Box style={{ flex: "1 1 auto", overflow: 'hidden' }}>
-          <Typography className="title" variant="h6">{state.conversation.getDisplayName()}</Typography>
-          <Typography className="subtitle" variant="subtitle1" >{state.conversation.getId()}</Typography>
+          <Typography className="title" variant="h6">{conversation?.getDisplayName()}</Typography>
+          <Typography className="subtitle" variant="subtitle1" >{props.conversationId}</Typography>
         </Box>
       </Stack>
       <Stack flexGrow={1} overflow="auto" direction="column-reverse">
         <MessageList
-          conversationId={state.conversation.getId()}
+          conversationId={props.conversationId}
           loading={loadingMessages} 
           loadMore={() => setLoadingMessages(true)}
-          messages={state.conversation.getMessages()}
+          messages={messages}
         />
       </Stack>
       <Stack flexGrow={0}>
@@ -131,4 +113,22 @@
   )
 }
 
+const addMessage = (sortedMessages, message) => {
+  if (sortedMessages.length === 0) {
+    return [message]
+  } else if (message.id === sortedMessages[sortedMessages.length - 1].linearizedParent) {
+    return [...sortedMessages, message]
+  } else if (message.linearizedParent === sortedMessages[0].id) {
+    return [message, ...sortedMessages]
+  } else {
+    console.log("Can't insert message " + message.id)
+  }
+}
+
+const sortMessages = (messages) => {
+  let sortedMessages = []
+  messages.forEach(message => sortedMessages = addMessage(sortedMessages, message))
+  return sortedMessages
+}
+
 export default ConversationView
\ No newline at end of file