diff --git a/client/src/components/MessageList.js b/client/src/components/MessageList.js
index 94947ca..b2fca5e 100644
--- a/client/src/components/MessageList.js
+++ b/client/src/components/MessageList.js
@@ -1,13 +1,21 @@
 import Message from './Message'
-import React from 'react'
+import React, { useEffect } from 'react'
 import { Box, Divider, Typography } from '@material-ui/core'
 import ConversationAvatar from './ConversationAvatar'
+const reverseMap = (arr, f) => arr.map((_, idx, arr) => f(arr[arr.length - 1 - idx ]));
 
 export default function MessageList(props) {
   const displayName = props.conversation.getDisplayName()
+  const messages = props.conversation.getMessages()
+  console.log("MessageList render " + messages.length)
+
+  useEffect(() => {
+    props.loadMore()
+  }, [props.conversation.getId()])
+
   return (
-    <div className="message-list">
-      <Box>
+    <React.Fragment>
+      <Box className="conversation-header">
         <Box style={{ display: 'inline-block', margin: 16, verticalAlign: 'middle' }}>
           <ConversationAvatar displayName={props.conversation.getDisplayNameNoFallback()} />
         </Box>
@@ -15,11 +23,13 @@
           <Typography variant="h6">{displayName}</Typography>
           <Typography variant="subtitle1">{props.conversation.getId()}</Typography>
         </Box>
+        <Divider orientation="horizontal" />
       </Box>
-      <Divider orientation="horizontal" />
-      {props.messages.map((message, index) =>
-        <Message key={index} username={message.senderId} text={message.body} />
-      )}
-    </div>
+      <div className="message-list">
+      <div className="message-list-inner">
+      {reverseMap(messages, (message) => <Message key={message.id} message={message} />)}
+      </div>
+      </div>
+    </React.Fragment>
   )
 }
\ No newline at end of file