diff --git a/client/src/components/ConversationView.js b/client/src/components/ConversationView.js
index e818ba0..719d3d0 100644
--- a/client/src/components/ConversationView.js
+++ b/client/src/components/ConversationView.js
@@ -1,85 +1,59 @@
 import CircularProgress from '@material-ui/core/CircularProgress';
-import React from 'react';
+import React, { 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';
 
-class ConversationView extends React.Component {
-    constructor(props) {
-        super(props)
-        this.state = {
-            loaded:false,
-            error: false,
-            messages:[]
-        }
-    }
+const ConversationView = props => {
+  const [state, setState] = useState({
+    loaded:false,
+    error: false,
+    conversation: undefined
+  })
 
-    componentDidMount() {
-      this.controller = new AbortController()
-      if (!this.state.loaded) {
-        authManager.fetch(`/api/accounts/${this.props.accountId}/conversations/${this.props.conversationId}`, {signal: this.controller.signal})
-          .then(res => res.json())
-          .then(result => {
-            console.log(result)
-            this.setState({
-              loaded: true,
-              conversation: Conversation.from(this.props.accountId, result)// result.map(account => Account.from(account)),
-            })
-          }, error => {
-            console.log(`get error ${error}`)
-            this.setState({
-              loaded: true,
-              error: true
-            })
-          })
-        }
-    }
-    componentDidUpdate(prevProps, prevState) {
-      console.log("componentDidUpdate " + this.props.conversationId)
-      if (this.props.conversationId !== prevProps.conversationId) {
-        if (this.state.loaded === true) {
-          this.setState({
-              loaded:false,
-              error: false,
-              messages:[]
-          })
-        }
-        this.controller = new AbortController()
-        authManager.fetch(`/api/accounts/${this.props.accountId}/conversations/${this.props.conversationId}`, {signal: this.controller.signal})
-          .then(res => res.json())
-          .then(result => {
-            console.log(result)
-            this.setState({
-              loaded: true,
-              conversation: Conversation.from(this.props.accountId, result)// result.map(account => Account.from(account)),
-            })
-          }, error => {
-            console.log(`get error ${error}`)
-            this.setState({
-              loaded: true,
-              error: true
-            })
-          })
-      }
-    }
-    componentWillUnmount() {
-      this.controller.abort()
-    }
+  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)// result.map(account => Account.from(account)),
+      })
+    }, error => {
+      console.log(`get error ${error}`)
+      setState({
+        loaded: true,
+        error: true
+      })
+    })
+    return () => controller.abort()
+  }, [props.accountId, props.conversationId])
 
-    render() {
-        if (this.state.loaded === false) {
-            return <LoadingPage />
-        } else if (this.state.error === true) {
-            return <div>Error loding {this.props.conversationId}</div>
-        } else {
-        return <React.Fragment>
-            <MessageList conversation={this.state.conversation} messages={this.state.messages} />
-            <SendMessageForm sendMessage={this.sendMessage} />
-          </React.Fragment>
-        }
-    }
+  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 (state.loaded === false) {
+      return <LoadingPage />
+  } else if (state.error === true) {
+      return <div>Error loding {props.conversationId}</div>
+  } else {
+  return <React.Fragment>
+      <MessageList conversation={state.conversation} messages={state.conversation.getMessages()} />
+      <SendMessageForm onSend={sendMessage} />
+    </React.Fragment>
+  }
 }
 
 export default ConversationView
\ No newline at end of file
diff --git a/client/src/components/ConversationsOverviewCard.js b/client/src/components/ConversationsOverviewCard.js
index 01b2d7b..407ed94 100644
--- a/client/src/components/ConversationsOverviewCard.js
+++ b/client/src/components/ConversationsOverviewCard.js
@@ -28,7 +28,7 @@
         setState({ loaded: true, conversations: Object.values(result).map(c => Conversation.from(accountId, c)) })
       })
     return () => controller.abort()
-  }, [])
+  }, [accountId])
 
   return (
     <Card onClick={() => history.push(`/account/${accountId}`)} >
diff --git a/client/src/components/Message.js b/client/src/components/Message.js
index 2e1c086..f0aaba8 100644
--- a/client/src/components/Message.js
+++ b/client/src/components/Message.js
@@ -1,10 +1,11 @@
+import { Typography } from '@material-ui/core'
 import React from 'react'
 
 function Message(props) {
     return (
         <div className="message">
             <div className="message-username">{props.username}</div>
-            <div className="message-text">{props.text}</div>
+            <Typography className="message-text">{props.text}</Typography>
         </div>
     )
 }
diff --git a/client/src/components/MessageList.js b/client/src/components/MessageList.js
index 1673a38..94947ca 100644
--- a/client/src/components/MessageList.js
+++ b/client/src/components/MessageList.js
@@ -5,7 +5,6 @@
 
 export default function MessageList(props) {
   const displayName = props.conversation.getDisplayName()
-
   return (
     <div className="message-list">
       <Box>
@@ -19,7 +18,7 @@
       </Box>
       <Divider orientation="horizontal" />
       {props.messages.map((message, index) =>
-        <Message key={index} username={message.senderId} text={message.text} />
+        <Message key={index} username={message.senderId} text={message.body} />
       )}
     </div>
   )
diff --git a/client/src/components/SendMessageForm.js b/client/src/components/SendMessageForm.js
index 48770ba..fb06d49 100644
--- a/client/src/components/SendMessageForm.js
+++ b/client/src/components/SendMessageForm.js
@@ -3,6 +3,7 @@
 import { IconButton, InputBase, Paper, Popper } from '@material-ui/core'
 import { Send, EmojiEmotionsRounded } from '@material-ui/icons'
 import EmojiPicker from 'emoji-picker-react'
+import authManager from '../AuthManager'
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -23,27 +24,23 @@
     height: 28,
     margin: 4,
   },
-}));
+}))
 
 export default function SendMessageForm(props) {
   const classes = useStyles()
   const [anchorEl, setAnchorEl] = React.useState(null)
   const [currentMessage, setCurrentMessage] = React.useState("")
 
-  const handleOpenEmojiPicker = e => {
-    setAnchorEl(anchorEl ? null : e.currentTarget)
-  }
-  const handleClose = () => {
-    setAnchorEl(null)
-  }
+  const handleOpenEmojiPicker = e => setAnchorEl(anchorEl ? null : e.currentTarget)
+  const handleClose = () => setAnchorEl(null)
+
   const handleSubmit = e => {
     e.preventDefault()
+    props.onSend(currentMessage)
+    setCurrentMessage('')
   }
-  const handleInputChange = (event) => {
-    setCurrentMessage(event.target.value);
-  };
+  const handleInputChange = (event) => setCurrentMessage(event.target.value)
   const onEmojiClick = (e, emojiObject) => {
-    console.log(emojiObject.emoji)
     setCurrentMessage(currentMessage + emojiObject.emoji)
     handleClose()
   }
diff --git a/client/src/index.scss b/client/src/index.scss
index 9ddcfc8..970825f 100644
--- a/client/src/index.scss
+++ b/client/src/index.scss
@@ -1,7 +1,7 @@
 :root {
   --main-color: #1F1F1F;
   --secondary-color: white;
-  --third-color: #2F2F2F;
+  --third-color: #8b8b8b;
   --main-text-color: #3e5869;
   --secondary-text-color: #b0c7d6;
   --send-message-form: #F5F5F5;
@@ -190,8 +190,8 @@
   background: var(--third-color);
   color: var(--secondary-color);
   display: inline;
-  padding: 4px 8px;
-  border-radius: 8px;
+  padding: 8px 16px;
+  border-radius: 16px;
 }
 
 .send-message-card {
diff --git a/client/src/pages/accountSettings.jsx b/client/src/pages/accountSettings.jsx
index 79ab388..c685a3b 100644
--- a/client/src/pages/accountSettings.jsx
+++ b/client/src/pages/accountSettings.jsx
@@ -19,7 +19,7 @@
         setState({loaded: true, account: Account.from(result)})
       })
       return () => controller.abort()
-  }, [])
+  }, [accountId])
 
   return (
     <Container maxWidth="sm">