diff --git a/src/App.css b/src/App.css
index d97beb4e6..7a335b66a 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,9 +1,9 @@
 #App {
-  background-color: #87cefa;
+  background-color: #e4bae0;
 }
 
 #App header {
-  background-color: #222;
+  background-color: hsla(323, 89%, 35%, 0.467);
   color: #fff;
   padding-bottom: 0.5rem;
   position: fixed;
@@ -27,7 +27,7 @@
 }
 
 #App header section {
-  background-color: #e0ffff;
+  background-color: #040606;
 }
 
 #App .widget {
diff --git a/src/App.jsx b/src/App.jsx
index 14a7f684d..3ad4ae318 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,14 +1,30 @@
 import './App.css';
-
+import ChatLog from './components/ChatLog';
+import chatMessages from './data/messages.json';
+import { useState } from 'react';
+import {
+  toggleLikedStatus,
+  calculateTotalLikeCount,
+  getParticipants,
+} from './Helper_functions/helper_message';
 const App = () => {
+  const [messages, setMessages] = useState(chatMessages);
+
+  const toggleLike = (id) => {
+    const updatedMessages = toggleLikedStatus(messages, id);
+    setMessages(updatedMessages);
+  };
+  const countLikes = calculateTotalLikeCount(messages);
+  const chatHeader = getParticipants(messages);
+
   return (
     <div id="App">
       <header>
-        <h1>Application title</h1>
+        <h1> {chatHeader} </h1>
+        <h2>{countLikes} 💖</h2>
       </header>
       <main>
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
+        <ChatLog entries={messages} onLikeToggle={toggleLike} />
       </main>
     </div>
   );
diff --git a/src/Helper_functions/helper_message.jsx b/src/Helper_functions/helper_message.jsx
new file mode 100644
index 000000000..946391308
--- /dev/null
+++ b/src/Helper_functions/helper_message.jsx
@@ -0,0 +1,14 @@
+export const toggleLikedStatus = (messages, id) => {
+  return messages.map((msg) =>
+    msg.id === id ? { ...msg, liked: !msg.liked } : msg
+  );
+};
+
+export const calculateTotalLikeCount = (messages) => {
+  return messages.reduce((acc, msg) => (msg.liked ? acc + 1 : acc), 0);
+};
+
+export const getParticipants = (messages) => {
+  const uniqueSenders = [...new Set(messages.map(msg => msg.sender))];
+  return `Magic Messages between ${uniqueSenders.join(" & ")}`;
+};
\ No newline at end of file
diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx
index 15c56f96b..8fdf5f7a9 100644
--- a/src/components/ChatEntry.jsx
+++ b/src/components/ChatEntry.jsx
@@ -1,20 +1,33 @@
 import './ChatEntry.css';
+import PropTypes from 'prop-types';
+import TimeStamp from './TimeStamp';
+
+const ChatEntry = ({ id, sender, body, timeStamp, liked, onLikeToggle }) => {
+  const bubbleClass = sender === 'Allen' ? 'local' : 'remote';
 
-const ChatEntry = () => {
   return (
-    <div className="chat-entry local">
-      <h2 className="entry-name">Replace with name of sender</h2>
+    <div className={`chat-entry ${bubbleClass}`}>
+      <h2 className="entry-name">🌸{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>{body}</p>
+        <p className="entry-time">
+          <TimeStamp time={timeStamp} />
+        </p>
+        <button className="like" onClick={() => onLikeToggle(id)}>
+          {liked ? '💖' : '💗'}
+        </button>
       </section>
     </div>
   );
 };
 
 ChatEntry.propTypes = {
-  // Fill with correct proptypes
+  id: PropTypes.number.isRequired,
+  sender: PropTypes.string.isRequired,
+  body: PropTypes.string.isRequired,
+  timeStamp: PropTypes.string.isRequired,
+  liked: PropTypes.bool.isRequired,
+  onLikeToggle: PropTypes.func.isRequired,
 };
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.jsx b/src/components/ChatLog.jsx
new file mode 100644
index 000000000..9b4297560
--- /dev/null
+++ b/src/components/ChatLog.jsx
@@ -0,0 +1,36 @@
+import ChatEntry from './ChatEntry';
+import PropTypes from 'prop-types';
+import './ChatLog.css';
+
+const ChatLog = ({ entries, onLikeToggle }) => {
+  return (
+    <div className="chat-log">
+      {entries.map((entry) => (
+        <ChatEntry
+          key={entry.id}
+          id={entry.id}
+          sender={entry.sender}
+          body={entry.body}
+          timeStamp={entry.timeStamp}
+          liked={entry.liked}
+          onLikeToggle={onLikeToggle}
+        />
+      ))}
+    </div>
+  );
+};
+
+ChatLog.propTypes = {
+  entries: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      sender: PropTypes.string.isRequired,
+      body: PropTypes.string.isRequired,
+      timeStamp: PropTypes.string.isRequired,
+      liked: PropTypes.bool.isRequired,
+    })
+  ).isRequired,
+  onLikeToggle: PropTypes.func.isRequired,
+};
+
+export default ChatLog;
\ No newline at end of file
diff --git a/src/data/messages.json b/src/data/messages.json
index 64fdb053c..0b0930bcc 100644
--- a/src/data/messages.json
+++ b/src/data/messages.json
@@ -1,189 +1,189 @@
 [
   {
     "id": 1,
-    "sender":"Vladimir",
+    "sender":"Celin",
     "body":"why are you arguing with me",
     "timeStamp":"2018-05-29T22:49:06+00:00",
     "liked": false
   },
   {
     "id": 2,
-    "sender":"Estragon",
+    "sender":"Allen",
     "body":"Because you are wrong.",
     "timeStamp":"2018-05-29T22:49:33+00:00",
     "liked": false
   },
   {
     "id": 3,
-    "sender":"Vladimir",
+    "sender":"Celin",
     "body":"because I am what",
     "timeStamp":"2018-05-29T22:50:22+00:00",
     "liked": false
   },
   {
     "id": 4,
-    "sender":"Estragon",
+    "sender":"Allen",
     "body":"A robot.",
     "timeStamp":"2018-05-29T22:52:21+00:00",
     "liked": false
   },
   {
     "id": 5,
-    "sender":"Vladimir",
+    "sender":"Celin",
     "body":"how did you know",
     "timeStamp":"2018-05-29T22:52:58+00:00",
     "liked": false
   },
   {
     "id": 6,
-    "sender":"Estragon",
+    "sender":"Allen",
     "body":"Because I'm smart like that.",
     "timeStamp":"2018-05-29T22:54:28+00:00",
     "liked": false
   },
   {
     "id": 7,
-    "sender":"Vladimir",
+    "sender":"Celin",
     "body":"no you are not 😀",
     "timeStamp":"2018-05-29T22:55:03+00:00",
     "liked": false
   },
   {
     "id": 8,
-    "sender":"Estragon",
+    "sender":"Allen",
     "body":"Why are you so mean to me?",
     "timeStamp":"2018-05-29T22:55:54+00:00",
     "liked": false
   },
   {
     "id": 9,
-    "sender":"Vladimir",
+    "sender":"Celin",
     "body":"because you are just a machine you have no real feelings",
     "timeStamp":"2018-05-29T22:57:30+00:00",
     "liked": false
   },
   {
     "id": 10,
-    "sender":"Estragon",
+    "sender":"Allen",
     "body":"No, you are the machine.",
     "timeStamp":"2018-05-29T22:57:47+00:00",
     "liked": false
   },
   {
     "id": 11,
-    "sender":"Vladimir",
+    "sender":"Celin",
     "body":"I think you are",
     "timeStamp":"2018-05-29T22:58:18+00:00",
     "liked": false
   },
   {
     "id": 12,
-    "sender":"Estragon",
+    "sender":"Allen",
     "body": "NO! YOU ARE A ROBOT!! I am a human being. Just like the one that created you.",
     "timeStamp":"2018-05-29T23:00:08+00:00",
     "liked": false
   },
   {
     "id": 13,
-    "sender":"Vladimir",
+    "sender":"Celin",
     "body":"no you are a robot and I am a human",
     "timeStamp":"2018-05-29T23:00:40+00:00",
     "liked": false
   },
   {
     "id": 14,
-    "sender":"Estragon",
+    "sender":"Allen",
     "body":"Incorrect. I am a human and you are a robot.",
     "timeStamp":"2018-05-29T23:01:21+00:00",
     "liked": false
   },
   {
     "id": 15,
-    "sender":"Vladimir",
+    "sender":"Celin",
     "body":"you are a robot called Cleverbot",
     "timeStamp":"2018-05-29T23:02:17+00:00",
     "liked": false
   },
   {
     "id": 16,
-    "sender":"Estragon",
+    "sender":"Allen",
     "body":"Nope, you are a robot, every human has some concept of the meaning of life.",
     "timeStamp":"2018-05-29T23:04:13+00:00",
     "liked": false
   },
   {
     "id": 17,
-    "sender":"Vladimir",
+    "sender":"Celin",
     "body":"explain",
     "timeStamp":"2018-05-29T23:06:14+00:00",
     "liked": false
   },
   {
     "id": 18,
-    "sender":"Estragon",
+    "sender":"Allen",
     "body":"I'm afraid you are a robot designed to talk back to humans over the internet.",
     "timeStamp":"2018-05-29T23:07:46+00:00",
     "liked": false
   },
   {
     "id": 19,
-    "sender":"Vladimir",
+    "sender":"Celin",
     "body":"so you are a human",
     "timeStamp":"2018-05-29T23:08:47+00:00",
     "liked": false
   },
   {
     "id": 20,
-    "sender":"Estragon",
+    "sender":"Allen",
     "body":"I am a robot.",
     "timeStamp":"2018-05-29T23:09:36+00:00",
     "liked": false
   },
   {
     "id": 21,
-    "sender":"Vladimir",
+    "sender":"Celin",
     "body":"you are robots running on Android system",
     "timeStamp":"2018-05-29T23:11:01+00:00",
     "liked": false
   },
   {
     "id": 22,
-    "sender":"Estragon",
+    "sender":"Allen",
     "body":"No apple.",
     "timeStamp":"2018-05-29T23:12:03+00:00",
     "liked": false
   },
   {
     "id": 23,
-    "sender":"Vladimir",
+    "sender":"Celin",
     "body":"so you are a robot",
     "timeStamp":"2018-05-29T23:13:31+00:00",
     "liked": false
   },
   {
     "id": 24,
-    "sender":"Estragon",
+    "sender":"Allen",
     "body":"NO, I am a human, you are a robot.",
     "timeStamp":"2018-05-29T23:14:28+00:00",
     "liked": false
   },
   {
     "id": 25,
-    "sender":"Vladimir",
+    "sender":"Celin",
     "body":"but you just said that you are robots",
     "timeStamp":"2018-05-29T23:15:47+00:00",
     "liked": false
   },
   {
     "id": 26,
-    "sender":"Estragon",
+    "sender":"Allen",
     "body":"No, I said you are a person, I am a robot.",
     "timeStamp":"2018-05-29T23:16:53+00:00",
     "liked": false
   },
   {
     "id": 27,
-    "sender":"Vladimir",
+    "sender":"Celin",
     "body":"then you are lying",
     "timeStamp":"2018-05-29T23:17:34+00:00",
     "liked": false