diff --git a/client/src/components/ConversationView.js b/client/src/components/ConversationView.js
index 964d5bf..bf459ea 100644
--- a/client/src/components/ConversationView.js
+++ b/client/src/components/ConversationView.js
@@ -1,47 +1,51 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import MessageList from './MessageList';
 import SendMessageForm from './SendMessageForm';
-import authManager from '../AuthManager'
 import Conversation from '../../../model/Conversation';
 import LoadingPage from './loading';
 import io from "socket.io-client";
 import { Box, Stack, Typography } from '@mui/material';
 import ConversationAvatar from './ConversationAvatar';
-import { useConversationQuery, useMessagesQuery } from '../services/conversation';
+import { useConversationQuery, useMessagesQuery, useSendMessageMutation } from '../services/conversation';
 
 const ConversationView = props => {
-  const [loadingMessages, setLoadingMessages] = useState(false)
   const [socket, setSocket] = useState()
   const [conversation, setConversation] = useState()
   const [messages, setMessages] = useState([])
-  const [loaded, setLoaded] = useState(true)
+  const [isLoading, setIsLoading] = useState(true)
   const [error, setError] = useState(false)
 
   const conversationQuery = useConversationQuery(props.accountId, props.conversationId)
   const messagesQuery = useMessagesQuery(props.accountId, props.conversationId)
+  const sendMessageMutation = useSendMessageMutation(props.accountId, props.conversationId)
 
   useEffect(() => {
-    if (conversationQuery.data) {
+    if (conversationQuery.isSuccess) {
       const conversation = Conversation.from(props.accountId, conversationQuery.data)
       setConversation(conversation)
     }
   }, [conversationQuery.data])
 
   useEffect(() => {
-    if (messagesQuery.data) {
+    if (messagesQuery.isSuccess) {
       const sortedMessages = sortMessages(messagesQuery.data)
       setMessages(sortedMessages)
     }
   }, [messagesQuery.data])
 
   useEffect(() => {
-    setLoaded(!(conversationQuery.isLoading || messagesQuery.isLoading))
+    setIsLoading(conversationQuery.isLoading || messagesQuery.isLoading)
   }, [conversationQuery.isLoading, messagesQuery.isLoading])
   
   useEffect(() => {
     setError(conversationQuery.isError || messagesQuery.isError)
   }, [conversationQuery.isError, messagesQuery.isError])
 
+  const sendMessage = useCallback(
+    (message) => sendMessageMutation.mutate(message),
+    [sendMessageMutation]
+  )
+
   useEffect(() => {
     console.log("io.connect")
     const socket = io()
@@ -67,18 +71,7 @@
     })
   }, [conversation ? props.conversationId : "", socket])
 
-  const sendMessage = (message) => {
-    authManager.fetch(`/api/accounts/${props.accountId}/conversations/${props.conversationId}`, {
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      method:"POST",
-      body: JSON.stringify({ message })
-    })
-  }
-
-  if (!loaded) {
+  if (isLoading) {
       return <LoadingPage />
   } else if (error) {
       return <div>Error loading {props.conversationId}</div>
@@ -100,9 +93,6 @@
       </Stack>
       <Stack flexGrow={1} overflow="auto" direction="column-reverse">
         <MessageList
-          conversationId={props.conversationId}
-          loading={loadingMessages} 
-          loadMore={() => setLoadingMessages(true)}
           messages={messages}
         />
       </Stack>
diff --git a/client/src/components/MessageList.js b/client/src/components/MessageList.js
index f6da60c..5ea46b5 100644
--- a/client/src/components/MessageList.js
+++ b/client/src/components/MessageList.js
@@ -1,5 +1,5 @@
 import dayjs from "dayjs"
-import React, { useEffect, useMemo } from 'react'
+import React, { useMemo } from 'react'
 import dayOfYear from 'dayjs/plugin/dayOfYear'
 import isBetween from 'dayjs/plugin/isBetween'
 import { Stack } from "@mui/system"
@@ -14,11 +14,6 @@
     [props.messages]
   )
 
-  useEffect(() => {
-    if (!props.loading)
-      props.loadMore()
-  }, [props.conversationId])
-
   return (
     <Stack
       marginLeft="16px"
diff --git a/client/src/services/conversation.js b/client/src/services/conversation.js
index f6b0f49..4a68077 100644
--- a/client/src/services/conversation.js
+++ b/client/src/services/conversation.js
@@ -21,6 +21,18 @@
     )
 }
 
+export const useSendMessageMutation = (accountId, conversationId) => {
+    const queryClient = useQueryClient();
+    return useMutation(
+        (message) => (
+            axios.post(`/api/accounts/${accountId}/conversations/${conversationId}`, {message})
+        ),
+        {
+            "onSuccess": () => queryClient.invalidateQueries(["messages", accountId, conversationId]),
+        }
+    )
+}
+
 const fetchConversation = (accountId, conversationId) => (
     axios
     .get(`/api/accounts/${accountId}/conversations/${conversationId}`)