diff --git a/package.json b/package.json
index 4557722..2d7f027 100644
--- a/package.json
+++ b/package.json
@@ -18,5 +18,8 @@
      "devDependencies": {
           "concurrently": "^4.0.1",
           "recursive-install": "^1.4.0"
+     },
+     "dependencies": {
+          "react-chat-ui": "^0.3.2"
      }
 }
diff --git a/src/client/src/App.js b/src/client/src/App.js
index a9004ba..6bb202d 100644
--- a/src/client/src/App.js
+++ b/src/client/src/App.js
@@ -2,7 +2,9 @@ import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
 import Socket from './socket'
-import {Conversation, Message, Sender} from './message'
+import {Conversation, Msg, Sender} from './message'
+import { ChatFeed, Message } from 'react-chat-ui';
+
 
 class App extends Component {
     socket = new Socket(document.location.pathname.replace('/', ''))
@@ -22,23 +24,25 @@ class App extends Component {
         }
     }
     onKeyPress = event => {
-         if (event.key === ' ') {
-              if (this.state.text === ' ') {
-                   this.setState({text: ''});
-              } else {
-                   this.handleSubmit();
-              }
-         }
+         // if (event.key === ' ') {
+         //      if (this.state.text === ' ') {
+         //           this.setState({text: ''});
+         //      } else {
+         //           this.handleSubmit();
+         //      }
+         // }
+         this.handleSubmit();
     }
     handleSubmit = async e => {
         if (e) {
              e.preventDefault();
         }
-        let newMessage = new Message(this.state.user, this.state.text)
-        this.setState(previousState => ({
-            text: "",
-            conversation: previousState.conversation.addMessage(newMessage),
-        }));
+        // alert(this.state.text)
+        let newMessage = new Msg(this.state.user, this.state.text)
+        // this.setState(previousState => ({
+        //     text: "",
+        //     conversation: previousState.conversation.addMessage(newMessage),
+        // }));
         this.socket.sendMessage(newMessage);
     };
     render() {
@@ -47,6 +51,8 @@ class App extends Component {
             <header className="App-header">
               <img src={logo} className="App-logo" alt="logo" />
             </header>
+
+
             <form onSubmit={this.handleSubmit}>
                 <p>
                     <strong>Say Something, {this.state.user.name}:</strong>
@@ -55,12 +61,17 @@ class App extends Component {
                     type="text"
                     value={this.state.text}
                     onKeyPress={this.onKeyPress}
-                    onChange={e => this.setState({ text: e.target.value })}/>
+                    onChange={e => this.setState({ text: e.target.value },()=> console.log())}/>
             </form>
-            {this.state.conversation.messages.slice().reverse().map((value, index) => {
-                  return <p key={index}><b>{value.sender.name}: </b>{value.text}</p>
-            })}
-          </div>
+
+            <ChatFeed
+              messages={[new Message({id: 1,message: this.state.conversation.lastMessage.text,senderName:this.state.user.name}),
+                         new Message({id: 0,message: this.state.text,senderName:this.state.user.name})]}
+              showSenderName
+            />
+
+
+        </div>
         );
     }
 }
diff --git a/src/client/src/__tests__/message.test.js b/src/client/src/__tests__/message.test.js
index bc40f40..da0ab1d 100644
--- a/src/client/src/__tests__/message.test.js
+++ b/src/client/src/__tests__/message.test.js
@@ -1,4 +1,4 @@
-import {Conversation, Message, Sender} from '../message'
+import {Conversation, Msg, Sender} from '../message'
 
 describe('Conversation tests', () => {
     it('creates an empty array of messages', () => {
@@ -20,7 +20,7 @@ describe('Conversation tests', () => {
         conversation.addMessage(message);
 
         const receivedMessage = conversation.messages[0];
-        expect(receivedMessage).toBeInstanceOf(Message);
+        expect(receivedMessage).toBeInstanceOf(Msg);
         expect(receivedMessage.sender).toBeInstanceOf(Sender);
         expect(receivedMessage.text).toBe(message.text);
         expect(receivedMessage.sender.name).toBe(message.sender.name);
@@ -47,7 +47,7 @@ describe('Conversation tests', () => {
 
         const receivedMessage = conversation.messages[0];
         expect(conversation.length).toBe(1);
-        expect(receivedMessage).toBeInstanceOf(Message);
+        expect(receivedMessage).toBeInstanceOf(Msg);
         expect(receivedMessage.sender).toBeInstanceOf(Sender);
         expect(receivedMessage.text).toBe(firstMessage.text + secondMessage.text);
         expect(receivedMessage.sender.name).toBe(sender.name);
@@ -77,12 +77,12 @@ describe('Conversation tests', () => {
         const receivedMessageSender1 = conversation.messages[0];
         const receivedMessageSender2 = conversation.messages[1];
         expect(conversation.length).toBe(2);
-        expect(receivedMessageSender1).toBeInstanceOf(Message);
+        expect(receivedMessageSender1).toBeInstanceOf(Msg);
         expect(receivedMessageSender1.sender).toBeInstanceOf(Sender);
         expect(receivedMessageSender1.text).toBe(messageSender1.text);
         expect(receivedMessageSender1.sender.name).toBe(messageSender1.sender.name);
         expect(receivedMessageSender1.sender.id).toBe(messageSender1.sender.id);
-        expect(receivedMessageSender2).toBeInstanceOf(Message);
+        expect(receivedMessageSender2).toBeInstanceOf(Msg);
         expect(receivedMessageSender2.sender).toBeInstanceOf(Sender);
         expect(receivedMessageSender2.text).toBe(messageSender2.text);
         expect(receivedMessageSender2.sender.name).toBe(messageSender2.sender.name);
@@ -115,12 +115,12 @@ describe('Conversation tests', () => {
     });
 });
 
-describe('Message tests', () => {
+describe('Msg tests', () => {
     it('initializes correctly', () => {
         const sender = new Sender('NAME');
         const text = 'TEXT';
 
-        const message = new Message(sender, text);
+        const message = new Msg(sender, text);
 
         expect(message.sender).toBe(sender);
         expect(message.text).toBe(text);
@@ -129,10 +129,10 @@ describe('Message tests', () => {
     it('adds additional text', () => {
         const sender = new Sender('NAME');
         const text = 'TEXT';
-        const message = new Message(sender, text);
+        const message = new Msg(sender, text);
         const additionalText = 'MORE';
 
-        message.concat(new Message(sender, additionalText));
+        message.concat(new Msg(sender, additionalText));
 
         expect(message.text).toBe(text + additionalText);
     });
diff --git a/src/client/src/message.js b/src/client/src/message.js
index a5c9f4b..bc703fb 100644
--- a/src/client/src/message.js
+++ b/src/client/src/message.js
@@ -11,24 +11,19 @@ class Conversation {
         if(this.messages.length) {
             return this.messages[this.messages.length - 1];
         }
-        return null;
+        return '';
     }
     addMessage(message) {
-        message = Object.assign(new Message(), message);
+        message = Object.assign(new Msg(), message);
         message.sender = Object.assign(new Sender(), message.sender);
-        let newSender = message.sender;
-        let lastMessage = this.lastMessage;
-        // return this;
-        if (lastMessage && newSender.equals(lastMessage.sender)) {
-            lastMessage.concat(message);
-        } else {
-            this.messages.push(message);
-        }
+        // let newSender = message.sender;
+        // let lastMessage = this.lastMessage;
+        this.messages.push(message);
         return this;
     }
 }
 
-class Message {
+class Msg {
     constructor(sender, text) {
         this.sender = sender;
         this.text = text;
@@ -54,6 +49,6 @@ class Sender {
 
 export {
     Conversation,
-    Message,
+    Msg,
     Sender,
 }