diff --git a/src/App.js b/src/App.js
index 76d86d2..4437d26 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,17 +3,19 @@ import logo from './logo.svg';
 import './App.css';
 import timelineData from './data/timeline.json';
 import Timeline from './components/Timeline';
+// import TimelineEvent from './components/TimelineEvent';
 
 function App() {
-  console.log(timelineData);
+  // 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">{timelineData.person}' social media feed</h1>
       </header>
       <main className="App-main">
+        <Timeline eventsData={timelineData.events} />
       </main>
     </div>
   );
diff --git a/src/components/Timeline.css b/src/components/Timeline.css
index e31f946..87888d0 100644
--- a/src/components/Timeline.css
+++ b/src/components/Timeline.css
@@ -1,5 +1,15 @@
 .timeline {
-  width: 30%;
+  width: 40%;
   margin: auto;
   text-align: left;
+  
 }
+
+.timeline li {
+  list-style-type: none;
+
+}
+
+.event-status {
+  word-wrap: break-word;
+}
\ No newline at end of file
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 463eb3e..49c8ffb 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 = (props) => {
+  const events = props.eventsData.map((event, i)=> {
+    return(
+      <li key={i}>
+        <TimelineEvent
+          person={event.person}
+          status={event.status}
+          timeStamp={event.timeStamp}
+        />
+      </li>
+    );
+  });
+  return(
+    <ul className="timeline">
+     {events}
+    </ul>
+  );
 }
 
 export default Timeline;
\ No newline at end of file
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index cc476c2..0b3fff6 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -2,9 +2,17 @@ import React from 'react';
 import './TimelineEvent.css';
 import Timestamp from './Timestamp';
 
-const TimelineEvent = () => {
-  
-  return;
+const TimelineEvent = (props) => {
+  console.log(props)
+
+  return( 
+    <div className="timeline-event">
+      <h3 className="event-person">{props.person}</h3>
+      <p className="event-time"><Timestamp time={props.timeStamp} /></p>
+      <p className="event-status">{props.status}</p>
+    </div>
+
+  );
 }
 
 export default TimelineEvent;
\ No newline at end of file