diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss
index 56726cb4b..c1f8f2bf7 100644
--- a/stylesheets/_session_conversation.scss
+++ b/stylesheets/_session_conversation.scss
@@ -18,7 +18,16 @@ $composition-container-height: 60px;
   display: flex;
   flex-grow: 1;
   flex-direction: column;
+  overflow-y: auto;
+  scrollbar-width: 4px;
   padding: $session-margin-lg;
+
+  &__loading {
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: center;
+  }
 }
 
 .composition-container {
diff --git a/ts/components/session/SessionConversation.tsx b/ts/components/session/SessionConversation.tsx
index 7fcaf6bf8..14b8f5509 100644
--- a/ts/components/session/SessionConversation.tsx
+++ b/ts/components/session/SessionConversation.tsx
@@ -5,7 +5,7 @@ import { SessionCompositionBox } from './SessionCompositionBox';
 import { SessionProgress } from './SessionProgress'
 
 import { Message } from '../conversation/Message';
-
+import { SessionSpinner } from './SessionSpinner';
 
 
 interface Props {
@@ -16,8 +16,7 @@ interface Props {
 interface State {
   sendingProgess: number;
   prevSendingProgess: number;
-  loadingMessages: boolean;
-  messages: any;
+  messages: Array<any>;
 }
 
 export class SessionConversation extends React.Component<Props, State> {
@@ -26,8 +25,7 @@ export class SessionConversation extends React.Component<Props, State> {
     this.state = {
       sendingProgess: 0,
       prevSendingProgess: 0,
-      loadingMessages: false,
-      messages: {},
+      messages: [],
     };
   }
 
@@ -36,19 +34,21 @@ export class SessionConversation extends React.Component<Props, State> {
 
     this.setState({
       messages: await window.getMessagesByKey(conversationKey)
-    })
+    });
     
   }
 
   render() {
     // const headerProps = this.props.getHeaderProps;
     const { conversationKey } = this.props;
+    const loadingMessages = this.state.messages.length === 0;
 
     // TMEPORARY SOLUTION TO GETTING CONVERSATION UNTIL
     // SessionConversationStack is created
 
     // Get conversation by Key (NOT cid)
     const conversation = window.getConversationByKey(conversationKey);
+    const conversationType = conversation.attributes.type;
 
     console.log(`Conversation key: `, conversationKey);
 
@@ -66,9 +66,17 @@ export class SessionConversation extends React.Component<Props, State> {
         
 
         <div className="messages-container">
-          {this.renderMessages(conversationKey)}
-
+          { loadingMessages ? (
+            <div className="messages-container__loading">
+              <SessionSpinner/>
+            </div>
+          ) : (
+            <>
+              {this.renderMessages(conversationKey, conversationType)}
+            </>
+          )}
         </div>
+        
 
         <SessionCompositionBox
             onSendMessage={() => null}
@@ -77,96 +85,50 @@ export class SessionConversation extends React.Component<Props, State> {
     );
   }
 
-  public renderMessages(conversationKey: string ) {
+  public renderMessages(conversationKey: string, conversationType: 'group' | 'direct') {
     const { messages } = this.state;
 
-    // FIXME PAY ATTENTION; ONLY RENDER MESSAGES THAT ARE VISIBLE
-    const messagesLength = messages.length;
-
     console.log(`Messages`, messages);
 
-    let messageList = [];
+    // FIND FOR EACH MESSAGE
+    const isExpired = false;
+    const isDeletable = false;
+    const messageType = 'direct';
+    const selected = false;
+    const preview:any = [];
+    const multiSelectMode = false;
+    const onSelectMessage = () => null;
+    const onSelectMessageUnchecked = () => null;
+    const onShowDetail = () => null;
+    const onShowUserDetails = () => null;
+
+
+    // FIXME PAY ATTENTION; ONLY RENDER MESSAGES THAT ARE VISIBLE
+    return (
+      <>{
+        messages.map((message: any) => (
+            <Message
+              text = {message.body || ''}
+              direction = {'incoming'}
+              timestamp = {1581565995228}
+              i18n = {window.i18n}
+              authorPhoneNumber = {message.source}
+              conversationType = {conversationType}
+              previews = {preview}
+              isExpired = {isExpired}
+              isDeletable = {isDeletable}
+              convoId = {conversationKey}
+              selected = {selected}
+              multiSelectMode = {multiSelectMode}
+              onSelectMessage = {onSelectMessage}
+              onSelectMessageUnchecked = {onSelectMessageUnchecked}
+              onShowDetail = {onShowDetail}
+              onShowUserDetails = {onShowUserDetails}
+            />
+        ))
+      }</>
+    );
 
-    messages?.keys.map(key => {
-      const message = messages[key];
-      return (<>THIS IS A MESSAGE</>)
-    });
-    console.log(messages);
-
-    return messages;
-
-    // for(let i = messagesLength - 1; i > 0; i--){
-    //     messageList.push({
-    //       isDeletable: true,
-    //       text: 'fdgdfg',
-    //       direction: 'incoming',
-    //       timestamp: '1581565995228',
-    //       i18n: window.i18n,
-    //       authorPhoneNumber: messages[i].source,
-    //       conversationType: 'direct',
-    //       previews: [],
-    //       isExpired: false, 
-    //       convoId: messages[i].conversationId,
-    //       selected: false,
-    //       multiSelectMode: false,
-    //       onSelectMessage: () => null,
-    //       onSelectMessageUnchecked: () => null,
-    //       onShowDetail : () => null,
-    //       onShowUserDetails: () => null,
-    //     });
-    // }
-
-    // console.log(`[vince] MessageList: `, messageList);
-
-    // return messages && (
-    //   <Message
-    //     isDeletable = {false}
-    //     text = {messages[0].body}
-    //     direction = {'incoming'}
-    //     timestamp = {1581565995228}
-    //     i18n = {window.i18n}
-    //     authorPhoneNumber = {messages[0].source}
-    //     conversationType = {'direct'}
-    //     previews = {[]}
-    //     isExpired = {false}
-    //     convoId = {messages[0].conversationId}
-    //     selected = {false}
-    //     multiSelectMode = {false}
-    //     onSelectMessage = {() => null}
-    //     onSelectMessageUnchecked = {() => null}
-    //     onShowDetail = {() => null}
-    //     onShowUserDetails = {() => null}
-    //   />
-    // )
-
-    // return (
-    //   <>
-    //     {
-    //       messageList.map(message => {
-    //         return (
-    //           <Message
-    //             isDeletable = {message.isDeletable}
-    //             text = {message.text}
-    //             direction = {'incoming'}
-    //             timestamp = {1581565995228}
-    //             i18n = {message.i18n}
-    //             authorPhoneNumber = {message.authorPhoneNumber}
-    //             conversationType = {'direct'}
-    //             previews = {message.previews}
-    //             isExpired = {message.isExpired}
-    //             convoId = {message.convoId}
-    //             selected = {message.selected}
-    //             multiSelectMode = {message.multiSelectMode}
-    //             onSelectMessage = {message.onSelectMessage}
-    //             onSelectMessageUnchecked = {message.onSelectMessageUnchecked}
-    //             onShowDetail = {message.onShowDetail}
-    //             onShowUserDetails = {message.onShowUserDetails}
-    //           />
-    //         )}
-    //       );
-    //     }
-    //   </>
-    // );
   }
 
   public renderHeader(conversation: any) {
@@ -215,4 +177,12 @@ export class SessionConversation extends React.Component<Props, State> {
       />
     );
   }
+
+  public scrollToUnread() {
+
+  }
+
+  public scrollToBottom() {
+    
+  }
 }
diff --git a/yarn.lock b/yarn.lock
index 26353ee99..7b1872633 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10537,10 +10537,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@3.3.3333:
-  version "3.3.3333"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.3.3333.tgz#171b2c5af66c59e9431199117a3bcadc66fdcfd6"
-  integrity sha512-JjSKsAfuHBE/fB2oZ8NxtRTk5iGcg6hkYXMnZ3Wc+b2RSqejEqTaem11mHASMnFilHrax3sLK0GDzcJrekZYLw==
+typescript@^3.7:
+  version "3.7.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.5.tgz#0692e21f65fd4108b9330238aac11dd2e177a1ae"
+  integrity sha512-/P5lkRXkWHNAbcJIiHPfRoKqyd7bsyCma1hZNUGfn20qm64T6ZBlrzprymeu918H+mB/0rIg2gGK/BXkhhYgBw==
 
 uc.micro@^1.0.1:
   version "1.0.6"