diff --git a/.firebase/hosting.YnVpbGQ.cache b/.firebase/hosting.YnVpbGQ.cache
new file mode 100644
index 000000000..5ff06a31f
--- /dev/null
+++ b/.firebase/hosting.YnVpbGQ.cache
@@ -0,0 +1,9 @@
+asset-manifest.json,1675364990843,dece47109c0ca1e64c1b5e94618f11bfa9d69585a6a8c297d281df22928b0ec7
+manifest.json,1675364988458,5fb9316df9fcb631af8259f9a91b476804b4d68258e1c4144017c018f2b63aa3
+index.html,1675364990843,d7d5a09cf7feab5366cf2d0dbe3c9989a15fe8749268439a902cd564b3e09f40
+favicon.ico,1675364988457,b72f7455f00e4e58792d2bca892abb068e2213838c0316d6b7a0d6d16acd1955
+static/js/main.95edea91.js.LICENSE.txt,1675364990845,65c6ecb6192f97a7b3e674b68ee6129941ddc83db480b46ce95eaea24ff40121
+static/css/main.a6e8f088.css.map,1675364990845,12abce3ad8340f964b204829f9fb593ab92dd96d24cd074a8f1380636efd11bb
+static/css/main.a6e8f088.css,1675364990845,76e1ca20fd6535a8bba07534184f8a7a6eba7698a209b025cca6fb5c763df7fb
+static/js/main.95edea91.js,1675364990845,11186382d3ddf88d44e43905aeb9c485a2e600a7316fd34fc3241184d679ea57
+static/js/main.95edea91.js.map,1675364990845,c45e64aadb10424bf980a4a465c3c7225448e3129425eca8eb25e3486b390fd8
diff --git a/.firebaserc b/.firebaserc
new file mode 100644
index 000000000..c4b0ef027
--- /dev/null
+++ b/.firebaserc
@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "react-chatlog"
+  }
+}
diff --git a/firebase.json b/firebase.json
new file mode 100644
index 000000000..f47555498
--- /dev/null
+++ b/firebase.json
@@ -0,0 +1,10 @@
+{
+  "hosting": {
+    "public": "build",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ]
+  }
+}
diff --git a/src/App.css b/src/App.css
index d97beb4e6..fb8f42f5b 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,3 +1,4 @@
+
 #App {
   background-color: #87cefa;
 }
@@ -11,6 +12,7 @@
   z-index: 100;
   text-align: center;
   align-items: center;
+  
 }
 
 #App main {
@@ -26,23 +28,38 @@
   display: inline-block;
 }
 
+#App h3 { 
+  margin-block-start: 0.2em;
+  margin-block-end:  0.2em;
+}
+
+
 #App header section {
   background-color: #e0ffff;
 }
 
+#header-container {
+  color: #222;
+  display: flex;
+  justify-content: space-evenly;
+  margin: auto;
+  max-width: 50rem;
+} 
+
 #App .widget {
   display: inline-block;
-  line-height: 0.5em;
+  line-height: 1em; 
   border-radius: 10px;
   color: black;
-  font-size:0.8em;
+  font-size: 0.8em;
   padding-left: 1em;
   padding-right: 1em;
+  font-weight: bold; 
 }
 
 #App #heartWidget {
   font-size: 1.5em;
-  margin: 1em
+  margin: 1em;
 }
 
 #App span {
@@ -50,7 +67,7 @@
 }
 
 .red {
-  color: #b22222
+  color: #b22222 
 }
 
 .orange {
diff --git a/src/App.js b/src/App.js
index c10859093..cd8d73460 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,18 +1,92 @@
-import React from 'react';
+import React, {useState} from 'react';
 import './App.css';
-import chatMessages from './data/messages.json';
+import MESSAGES from './data/messages.json';
+import ChatLog from './components/ChatLog';
+import ColorButtons from './components/ColorButtons'
+
+let senders = []; //MESSAGES can have many senders
+for (let message of MESSAGES) {
+  if (!senders.includes(message.sender)){
+    senders.push(message.sender);
+  };
+};
+//This chatLog has only two people
+const localSender = senders[0];
+const remoteSender = senders[1];
+let initialLiked = 0;
+for (let message of MESSAGES) {
+  if (message.liked){
+    initialLiked++
+  };
+};
 
 const App = () => {
+  const [chatMessages, setChatMessages] = useState(MESSAGES);
+  const [likesCount, setLikesCount] = useState(initialLiked);
+  const [localColor, setLocalColor] = useState('black');
+  const [remoteColor, setRemoteColor] = useState('black');
+  
+  const updateChats = (updatedChat) => {
+    const chats = chatMessages.map((chat) => { 
+      if (updatedChat.id === chat.id){
+        return updatedChat;
+      } else {
+        return chat;
+      }
+      
+    });
+    setChatMessages(chats);
+    let likes = 0;
+    for (const chat of chats){
+      if (chat.liked){
+        likes++
+      }
+    };
+    setLikesCount(likes);
+  }
+  
+  const handleLocalColor = (changedColor) => {
+    setLocalColor(changedColor)}
+  
+  const handleRemoteColor = (changedColor) => {
+    setRemoteColor(changedColor);
+  }
+
   return (
-    <div id="App">
+    <section id="App">
       <header>
-        <h1>Application title</h1>
+        <h1>
+          {`Chat between `}
+          <span className={`${localColor}`}>{localSender}</span> 
+          {` and `} 
+          <span className={`${remoteColor}`}>{remoteSender}</span>
+        </h1>
+        <section>
+          <section id='header-container'>
+            <section id='header-local'> 
+              <h3 className={localColor}>{localSender}'s color</h3>
+              <ColorButtons onChange={handleLocalColor} /> 
+            </section>
+            <span className='widget' id='heartWidget'>{likesCount} ❤️s</span>
+            <section id='header-remote'> 
+              <h3 className={remoteColor}>{remoteSender}'s color</h3>
+              <ColorButtons onChange={handleRemoteColor} />
+            </section>
+          </section>
+        </section>  
       </header>
       <main>
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
+        <section>
+          {<ChatLog
+            entries={chatMessages} 
+            onUpdate={updateChats}
+            localColor={localColor}
+            remoteColor={remoteColor}
+            localSender={localSender}
+          />}
+          </section>
       </main>
-    </div>
+    </section>
   );
 };
 
diff --git a/src/App.test.js b/src/App.test.js
index ca75c71dd..b6f318cc3 100644
--- a/src/App.test.js
+++ b/src/App.test.js
@@ -22,6 +22,7 @@ describe('Wave 03: clicking like button and rendering App', () => {
     // Arrange
     const { container } = render(<App />)
     const buttons = container.querySelectorAll('button.like')
+    console.log(buttons)
     const firstButton = buttons[0]
     const lastButton = buttons[buttons.length - 1]
 
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index b92f0b7b2..5f9adabd1 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -1,22 +1,43 @@
 import React from 'react';
+import '../App.css';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
+import TimeStamp from './TimeStamp';
+
+const ChatEntry = ({id, sender, body, timeStamp, liked, onUpdate, color, location}) => {
+
+  const toggleHeart = () => {
+    return onUpdate({
+      id,
+      sender,
+      body,
+      timeStamp,
+      liked: !liked,
+    })
+  };
 
-const ChatEntry = (props) => {
   return (
-    <div className="chat-entry local">
-      <h2 className="entry-name">Replace with name of sender</h2>
+    <div className={`chat-entry ${location}`}>
+      <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 className={`${color}`}>{body}</p>
+        <p className="entry-time">
+          <TimeStamp time = {timeStamp}/></p>
+        <button className="like" onClick={toggleHeart}>{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,
+    onUpdate: PropTypes.func,
+    color: PropTypes.string,
+    location: PropTypes.string,
 };
 
 export default ChatEntry;
diff --git a/src/components/ChatEntry.test.js b/src/components/ChatEntry.test.js
index b69270c03..4a9a2b09f 100644
--- a/src/components/ChatEntry.test.js
+++ b/src/components/ChatEntry.test.js
@@ -1,9 +1,9 @@
-import React from "react";
-import "@testing-library/jest-dom/extend-expect";
-import ChatEntry from "./ChatEntry";
-import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import ChatEntry from './ChatEntry';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 
-describe("Wave 01: ChatEntry", () => {
+describe('Wave 01: ChatEntry', () => {
   beforeEach(() => {
     render(
       <ChatEntry
@@ -14,15 +14,15 @@ describe("Wave 01: ChatEntry", () => {
     );
   });
 
-  test("renders without crashing and shows the sender", () => {
+  test('renders without crashing and shows the sender', () => {
     expect(screen.getByText(/Joe Biden/)).toBeInTheDocument();
   });
 
-  test("that it will display the body", () => {
+  test('that it will display the body', () => {
     expect(screen.getByText(/Get out by 8am/)).toBeInTheDocument();
   });
 
-  test("that it will display the time", () => {
+  test('that it will display the time', () => {
     expect(screen.getByText(/\d+ years ago/)).toBeInTheDocument();
   });
 });
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
new file mode 100644
index 000000000..e581eb6fb
--- /dev/null
+++ b/src/components/ChatLog.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ChatEntry from './ChatEntry';
+import './ChatLog.css';
+
+const ChatLog = ({entries, onUpdate, localColor, remoteColor, localSender}) => {
+    return <ul className="chat-log">
+        {entries.map((entry) => (
+            (entry.sender === localSender)?
+                <ChatEntry
+                    // key={entry.id}
+                    key={entry.timeStamp}
+                    id={entry.id}       
+                    sender={entry.sender}
+                    body={entry.body}
+                    timeStamp={entry.timeStamp}
+                    liked={entry.liked}
+                    onUpdate = {onUpdate}
+                    color={localColor}
+                    location='local'
+                /> :
+                <ChatEntry
+                    // key={entry.id}
+                    key={entry.timeStamp}
+                    id={entry.id}       
+                    sender={entry.sender}
+                    body={entry.body}
+                    timeStamp={entry.timeStamp}
+                    liked={entry.liked}
+                    onUpdate = {onUpdate}
+                    color={remoteColor}
+                    location='remote'
+                />
+        ))}
+        </ul>
+};
+
+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,
+    onUpdate: PropTypes.func,
+    localColor: PropTypes.string,
+    remoteColor: PropTypes.string,
+    localSender: PropTypes.string,
+};
+
+export default ChatLog;
diff --git a/src/components/ChatLog.test.js b/src/components/ChatLog.test.js
index 96f89ebc3..5bafee291 100644
--- a/src/components/ChatLog.test.js
+++ b/src/components/ChatLog.test.js
@@ -1,49 +1,49 @@
-import React from "react";
-import "@testing-library/jest-dom/extend-expect";
-import ChatLog from "./ChatLog";
-import { render, screen } from "@testing-library/react";
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import ChatLog from './ChatLog';
+import { render, screen } from '@testing-library/react';
 
 const LOG = [
   {
-    sender: "Vladimir",
-    body: "why are you arguing with me",
-    timeStamp: "2018-05-29T22:49:06+00:00",
+    sender: 'Vladimir',
+    body: 'why are you arguing with me',
+    timeStamp: '2018-05-29T22:49:06+00:00',
   },
   {
-    sender: "Estragon",
-    body: "Because you are wrong.",
-    timeStamp: "2018-05-29T22:49:33+00:00",
+    sender: 'Estragon',
+    body: 'Because you are wrong.',
+    timeStamp: '2018-05-29T22:49:33+00:00',
   },
   {
-    sender: "Vladimir",
-    body: "because I am what",
-    timeStamp: "2018-05-29T22:50:22+00:00",
+    sender: 'Vladimir',
+    body: 'because I am what',
+    timeStamp: '2018-05-29T22:50:22+00:00',
   },
   {
-    sender: "Estragon",
-    body: "A robot.",
-    timeStamp: "2018-05-29T22:52:21+00:00",
+    sender: 'Estragon',
+    body: 'A robot.',
+    timeStamp: '2018-05-29T22:52:21+00:00',
   },
   {
-    sender: "Vladimir",
-    body: "Notabot",
-    timeStamp: "2019-07-23T22:52:21+00:00",
+    sender: 'Vladimir',
+    body: 'Notabot',
+    timeStamp: '2019-07-23T22:52:21+00:00',
   },
 ];
 
-describe("Wave 02: ChatLog", () => {
+describe('Wave 02: ChatLog', () => {
   beforeEach(() => {
     render(<ChatLog entries={LOG} />);
   });
 
-  test("renders without crashing and shows all the names", () => {
+  test('renders without crashing and shows all the names', () => {
     [
       {
-        name: "Vladimir",
+        name: 'Vladimir',
         numChats: 3,
       },
       {
-        name: "Estragon",
+        name: 'Estragon',
         numChats: 2,
       },
     ].forEach((person) => {
@@ -56,7 +56,7 @@ describe("Wave 02: ChatLog", () => {
     });
   });
 
-  test("renders an empty list without crashing", () => {
+  test('renders an empty list without crashing', () => {
     const element = render(<ChatLog entries={[]} />);
     expect(element).not.toBeNull();
   });
diff --git a/src/components/ColorButtons.js b/src/components/ColorButtons.js
new file mode 100644
index 000000000..59dd54188
--- /dev/null
+++ b/src/components/ColorButtons.js
@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types';
+import COLORS from '../data/colors.json';
+import ColorChoice from './ColorChoice'
+
+const ColorButtons = ({onChange}) => {
+    return (
+        <section>
+        {COLORS.map((color)=>
+                <ColorChoice 
+                    key={color.id} 
+                    colorName={color.colorName}
+                    emoji={color.emoji} 
+                    onChange={onChange}
+                />)
+        }
+        </section>
+    );
+};
+
+ColorButtons.propTypes = {
+    onChange: PropTypes.func.isRequired,
+};
+
+
+export default ColorButtons;
\ No newline at end of file
diff --git a/src/components/ColorChoice.js b/src/components/ColorChoice.js
new file mode 100644
index 000000000..20fba1655
--- /dev/null
+++ b/src/components/ColorChoice.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const ColorChoice = ({id, colorName, emoji, onChange}) => {
+
+    const changeColor = (e) => {
+        onChange(colorName);
+    }
+
+    return(
+    <button onClick={changeColor}>{emoji}</button>
+    );
+}
+
+ColorChoice.propTypes = {
+    id: PropTypes.number,
+    colorName: PropTypes.string.isRequired,
+    emoji: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+};
+
+export default ColorChoice;
\ No newline at end of file
diff --git a/src/data/colors.json b/src/data/colors.json
new file mode 100644
index 000000000..d3c53428f
--- /dev/null
+++ b/src/data/colors.json
@@ -0,0 +1,32 @@
+[
+    {
+        "id": 1,
+        "colorName": "red",
+        "emoji": "🔴"
+    },
+    {
+        "id": 2,
+        "colorName": "orange",
+        "emoji": "🟠"
+    },
+    {
+        "id": 3,
+        "colorName": "yellow",
+        "emoji": "🟡"
+    },
+    {
+        "id": 4,
+        "colorName": "green",
+        "emoji": "🟢"
+    },
+    {
+        "id": 5,
+        "colorName": "blue",
+        "emoji": "🔵"
+    },
+    {
+        "id": 6,
+        "colorName": "purple",
+        "emoji": "🟣"
+    }
+]
\ No newline at end of file