diff --git a/src/App.css b/src/App.css
index e20270c..78612b6 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,5 +1,5 @@
 .App-header {
-  background-color: #222;
+  background-color: rgb(4, 124, 54);
   padding-bottom: 0.5rem;
   color: white;
   position: fixed;
diff --git a/src/App.js b/src/App.js
index 76d86d2..db2e0d4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,19 +1,20 @@
 import React from 'react';
-import logo from './logo.svg';
 import './App.css';
-import timelineData from './data/timeline.json';
+import timeline from './data/timeline.json';
 import Timeline from './components/Timeline';
 
+
 function App() {
-  console.log(timelineData);
 
   // Customize the code below
   return (
     <div className="App">
       <header className="App-header">
-        <h1 className="App-title">Application title</h1>
+        <h1 className="App-title">Look! Here is the title!</h1>
       </header>
       <main className="App-main">
+      
+      <Timeline events={timeline.events}/>
       </main>
     </div>
   );
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 463eb3e..68bf091 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -2,9 +2,23 @@ import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
-const Timeline = () => {
-  
-  return;
+const Timeline = (events) => {
+  const allPosts = events.events.map((post) => {
+    return (
+      <TimelineEvent 
+        person={post.person}
+        status={post.status}
+        timeStamp={post.timeStamp}
+        key={post.timeStamp + post.person}
+      />
+    );
+  });
+
+  return(
+  <ul className="PostCollection">
+    {allPosts}
+  </ul>
+  );
 }
 
 export default Timeline;
\ No newline at end of file
diff --git a/src/components/TimelineEvent.css b/src/components/TimelineEvent.css
index ea6407a..16ab248 100644
--- a/src/components/TimelineEvent.css
+++ b/src/components/TimelineEvent.css
@@ -14,6 +14,7 @@
   grid-area: 1 / 1 / span 1 / span 1;
   margin-top: 0.5rem;
   font-weight: bolder;
+  color: green;
 }
 
 .event-status {
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index cc476c2..81cb106 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -2,9 +2,15 @@ import React from 'react';
 import './TimelineEvent.css';
 import Timestamp from './Timestamp';
 
-const TimelineEvent = () => {
-  
-  return;
+const TimelineEvent = (props) => {
+
+  return (
+    <div className='timeline-event'>
+      <h2 className='event-person'>{props.person}</h2>
+      <p className='event-status'>{props.status}</p>
+      <p className='event-time'>{<Timestamp props={props.timeStamp} />}</p>
+    </div>
+  );
 }
 
 export default TimelineEvent;
\ No newline at end of file
diff --git a/src/components/Timestamp.js b/src/components/Timestamp.js
index 6251538..d4613b5 100644
--- a/src/components/Timestamp.js
+++ b/src/components/Timestamp.js
@@ -6,8 +6,11 @@ const Timestamp = (props) => {
   const absolute = time.format('MMMM Do YYYY, h:mm:ss a');
   const relative = time.fromNow();
 
+
   return (
+    <div>
     <span title={absolute}>{relative}</span>
+    </div>
   );
 };