diff --git a/src/App.css b/src/App.css
index d97beb4e..b96eedbf 100644
--- a/src/App.css
+++ b/src/App.css
@@ -2,6 +2,7 @@
   background-color: #87cefa;
 }
 
+
 #App header {
   background-color: #222;
   color: #fff;
@@ -13,6 +14,20 @@
   align-items: center;
 }
 
+/* #App span {
+  background-color: violet;
+  color: #fff;
+  padding-bottom: 0.5rem;
+  position: fixed;
+  width: 100%;
+  height: 120px;
+  z-index: 100;
+  text-align: center;
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+} */
+
 #App main {
   padding-left: 2em;
   padding-right: 2em;
@@ -30,6 +45,14 @@
   background-color: #e0ffff;
 }
 
+#App .header {
+  font-size: 1.2em;
+  text-align: center;
+  font-weight: bold;
+  font-family: sans-serif;
+  height: 20px;
+}
+
 #App .widget {
   display: inline-block;
   line-height: 0.5em;
diff --git a/src/App.js b/src/App.js
index c1085909..5ce50b96 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,16 +1,54 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './App.css';
 import chatMessages from './data/messages.json';
+import ChatLog from './components/ChatLog';
 
 const App = () => {
+  const [chatMessagesData, setChatMessagesData] = useState(chatMessages);
+  const users = [];
+  let likesCount = 0;
+  let user1 = '';
+  let user2 = '';
+
+  const updateChatData = (updatedMessage) => {
+    const messages = chatMessagesData.map((message) => {
+      if (message.id === updatedMessage.id) {
+        return updatedMessage;
+      } else {
+        return message;
+      }
+    });
+
+    setChatMessagesData(messages);
+  };
+
+  for (let i = 0; i < chatMessagesData.length; i++) {
+    let message = chatMessagesData[i];
+    if (users.indexOf(message['sender']) === -1) {
+      users.push(message['sender'])
+    }
+    if (message['liked']) {
+      likesCount++;
+    }
+  }
+
+  if (users.length === 2) {
+    user1 = users[0].toUpperCase();
+    user2 = users[1].toUpperCase();
+  }
+
   return (
     <div id="App">
-      <header>
-        <h1>Application title</h1>
-      </header>
+
+        <header>
+          <h1>CHAT BETWEEN {user1} AND {user2} </h1>
+          <p className="header">{likesCount} 💙s</p>
+        </header>
       <main>
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
+        <ChatLog
+          entries={chatMessagesData}
+          onUpdateChatData={updateChatData}>
+        </ChatLog>
       </main>
     </div>
   );
diff --git a/src/App.test.js b/src/App.test.js
index ca75c71d..48d446b9 100644
--- a/src/App.test.js
+++ b/src/App.test.js
@@ -14,7 +14,7 @@ describe('Wave 03: clicking like button and rendering App', () => {
     fireEvent.click(buttons[10])
 
     // Assert
-    const countScreen = screen.getByText(/3 ❤️s/)
+    const countScreen = screen.getByText(/3 💙s/)
     expect(countScreen).not.toBeNull()
   })
 
@@ -26,10 +26,9 @@ describe('Wave 03: clicking like button and rendering App', () => {
     const lastButton = buttons[buttons.length - 1]
 
     // Act-Assert
-
     // click the first button
     fireEvent.click(firstButton)
-    expect(firstButton.innerHTML).toEqual('❤️')
+    expect(firstButton.innerHTML).toEqual('💙')
 
     // check that all other buttons haven't changed
     for (let i = 1; i < buttons.length; i++) {
@@ -40,13 +39,13 @@ describe('Wave 03: clicking like button and rendering App', () => {
     fireEvent.click(firstButton)
     expect(firstButton.innerHTML).toEqual('🤍')
     fireEvent.click(firstButton)
-    expect(firstButton.innerHTML).toEqual('❤️')
+    expect(firstButton.innerHTML).toEqual('💙')
     fireEvent.click(firstButton)
     expect(firstButton.innerHTML).toEqual('🤍')
 
     // click the last button a couple times
     fireEvent.click(lastButton)
-    expect(lastButton.innerHTML).toEqual('❤️')
+    expect(lastButton.innerHTML).toEqual('💙')
     fireEvent.click(lastButton)
     expect(lastButton.innerHTML).toEqual('🤍')
   })
diff --git a/src/components/ChatEntry.css b/src/components/ChatEntry.css
index 05c3baa4..ece5ad73 100644
--- a/src/components/ChatEntry.css
+++ b/src/components/ChatEntry.css
@@ -97,4 +97,4 @@ button {
 
 .chat-entry.remote .entry-bubble:hover::before {
   background-color: #a9f6f6;
-}
\ No newline at end of file
+}
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index b92f0b7b..425ccdd6 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -2,21 +2,51 @@ import React from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
 
+function getDifferenceInYears(timeStamp) {
+  const today = new Date();
+  const year = today.getFullYear();
+
+  const pastDay = new Date(timeStamp);
+  const pastYear = pastDay.getFullYear();
+
+  const difference = year - pastYear;
+  return difference;
+}
+
 const ChatEntry = (props) => {
+  const timeInYears = getDifferenceInYears(props.timeStamp) + ' years ago';
+
+  const onLikeButtonClick = () => {
+    const updatedMessage = {
+        id: props.id,
+        sender: props.sender,
+        body: props.body,
+        timeStamp: props.timeStamp,
+        liked: !props.liked
+    };
+
+    props.onUpdateChatData(updatedMessage);
+  };
+
   return (
-    <div className="chat-entry local">
-      <h2 className="entry-name">Replace with name of sender</h2>
+    <div className={props.sender==='Vladimir'?'chat-entry local':'chat-entry remote'}>
+      <h2 className="entry-name">{props.sender}</h2>
       <section className="entry-bubble">
-        <p>Replace with body of ChatEntry</p>
-        <p className="entry-time">Replace with TimeStamp component</p>
-        <button className="like">🤍</button>
+        <p>{props.body}</p>
+        <p className="entry-time">{timeInYears}</p>
+        <button onClick={onLikeButtonClick} className="like">{!props['liked']?'🤍':'💙'}</button>
       </section>
     </div>
   );
 };
 
 ChatEntry.propTypes = {
-  //Fill with correct proptypes
+  id: PropTypes.number,
+  sender: PropTypes.string.isRequired,
+  body: PropTypes.string.isRequired,
+  timeStamp: PropTypes.string.isRequired,
+  liked: PropTypes.bool,
+  onUpdateChatData: PropTypes.func
 };
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
new file mode 100644
index 00000000..870d26ae
--- /dev/null
+++ b/src/components/ChatLog.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import './ChatLog.css';
+import ChatEntry from './ChatEntry';
+import PropTypes from 'prop-types';
+
+const ChatLog = (props) => {
+  const messageComponents = props.entries.map((message) => {
+    return (
+      <ChatEntry
+        key={message['timeStamp']}
+        id={message['id']}
+        sender={message['sender']}
+        body={message['body']}
+        timeStamp={message['timeStamp']}
+        liked={message['liked']}
+        onUpdateChatData={props.onUpdateChatData}>
+      </ChatEntry>
+    );
+  });
+
+  return (
+    <div>{messageComponents}</div>
+  );
+};
+
+ChatLog.propTypes = {
+  entries: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.number,
+    sender: PropTypes.string.isRequired,
+    body: PropTypes.string.isRequired,
+    timeStamp: PropTypes.string.isRequired,
+    liked: PropTypes.bool
+  })).isRequired,
+  onUpdateChatData: PropTypes.func
+};
+
+export default ChatLog;
\ No newline at end of file