diff --git a/src/App.js b/src/App.js
index 76d86d2..7403e5a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,15 +5,14 @@ import timelineData 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">Ada's Social Feed</h1>
       </header>
       <main className="App-main">
+        <Timeline posts = {timelineData.events} />
       </main>
     </div>
   );
diff --git a/src/components/Timeline.css b/src/components/Timeline.css
index e31f946..cea8e71 100644
--- a/src/components/Timeline.css
+++ b/src/components/Timeline.css
@@ -1,5 +1,5 @@
 .timeline {
-  width: 30%;
+  width: 50%;
   margin: auto;
   text-align: left;
 }
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 463eb3e..6771139 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -2,9 +2,21 @@ import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
-const Timeline = () => {
-  
-  return;
+const Timeline = (props) => {
+  const timelineComponents = props.posts.map( (post) =>
+    <TimelineEvent
+      person = {post.person}
+      status = {post.status}
+      timestamp = {post.timeStamp}
+      key = {post.person}
+    />
+  )
+    
+  return(
+    <ul className = "timeline">
+      {timelineComponents}
+    </ul>
+  );
 }
 
 export default Timeline;
\ No newline at end of file
diff --git a/src/components/TimelineEvent.css b/src/components/TimelineEvent.css
index ea6407a..605c61f 100644
--- a/src/components/TimelineEvent.css
+++ b/src/components/TimelineEvent.css
@@ -18,6 +18,7 @@
 
 .event-status {
   grid-area: 2 / 1 / span 1 / -1;
+  word-wrap: break-word;
 }
 
 .event-time {
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index cc476c2..37d2b0c 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 = () => {
+const TimelineEvent = (props) => {
   
-  return;
+  return(
+    <div className ="timeline-event">
+      <h3 className = "event-person">{props.person}</h3>
+      <p className = "event-status">{props.status}</p>
+      <p className = "event-time"><Timestamp time={props.timestamp} /></p>
+    </div>
+  );
 }
 
 export default TimelineEvent;
\ No newline at end of file