diff --git a/src/App.js b/src/App.js
index 76d86d2..0396738 100644
--- a/src/App.js
+++ b/src/App.js
@@ -11,10 +11,11 @@ function App() {
   return (
     <div className="App">
       <header className="App-header">
-        <h1 className="App-title">Application title</h1>
+        <h1 className="App-title">{timelineData.person}'s Social Media Feed</h1>
       </header>
       <main className="App-main">
       </main>
+      < Timeline events = {timelineData.events} />
     </div>
   );
 }
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 463eb3e..d6b460c 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -2,9 +2,20 @@ import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
-const Timeline = () => {
-  
-  return;
-}
+const Timeline = (props) => {
+  const components = props.events.map((event, i) => {
+  return (
+    <div key={i}>
+      <TimelineEvent person={event.person} status={event.status} time={event.timeStamp}/>
+      </div>
+  );
+});
+
+return(
+  <div className="timeline">
+    {components}
+    </div>
+);
+};
 
 export default Timeline;
\ No newline at end of file
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index cc476c2..d808829 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -2,9 +2,16 @@ import React from 'react';
 import './TimelineEvent.css';
 import Timestamp from './Timestamp';
 
-const TimelineEvent = () => {
-  
-  return;
-}
+
+const TimelineEvent = (props) => {
+  return (
+<div className="timeline-event">
+  <div className="event-person">{props.person}</div>
+  <div className="event-status">{props.status}</div>
+  <div className="event-time"><Timestamp time={props.timestamp}/></div>
+  </div>
+  // return;
+  );
+};
 
 export default TimelineEvent;
\ No newline at end of file