diff --git a/src/App.js b/src/App.js
index 76d86d2..6210b5e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,19 +1,19 @@
 import React from 'react';
-import logo from './logo.svg';
 import './App.css';
 import timelineData from './data/timeline.json';
 import Timeline from './components/Timeline';
 
 function App() {
-  console.log(timelineData);
+  console.log(timelineData.events);
 
   // 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}'s social media feed</h1>
       </header>
       <main className="App-main">
+        <Timeline events={timelineData.events}/>
       </main>
     </div>
   );
diff --git a/src/components/Timeline.css b/src/components/Timeline.css
index e31f946..e76bd66 100644
--- a/src/components/Timeline.css
+++ b/src/components/Timeline.css
@@ -1,5 +1,6 @@
 .timeline {
-  width: 30%;
+  width: 55%;
   margin: auto;
   text-align: left;
+  word-break: break-all;
 }
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 463eb3e..58b7606 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -2,9 +2,25 @@ import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
-const Timeline = () => {
-  
-  return;
-}
+const Timeline = (props) => {
+ 
+  const TimelineComponents = props.events.map((events, i) =>{
+    return(
+      <TimelineEvent 
+      name={events.person}
+      status={events.status}
+      timestamp={events.timeStamp}
+      key={i}
+      />
+    );
+  });
+
+
+  return (
+    <section className="timeline">
+      {TimelineComponents}
+    </section>
+  );
+};
 
 export default Timeline;
\ No newline at end of file
diff --git a/src/components/TimelineEvent.css b/src/components/TimelineEvent.css
index ea6407a..1d76b83 100644
--- a/src/components/TimelineEvent.css
+++ b/src/components/TimelineEvent.css
@@ -7,7 +7,7 @@
 }
 
 .timeline-event:hover {
-  background-color: #F5F8FA;
+  background-color:#F5F8FA;
 }
 
 .event-person {
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index cc476c2..7e16dec 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 = () => {
+const TimelineEvent = (props) => {
   
-  return;
+  return (
+    <article className="timeline-event">
+      <p className="event-person">{props.name}</p>
+      <p className="event-time">
+        <Timestamp time={props.timestamp} />
+      </p>
+      <p className="event-status">{props.status}</p>
+    </article>
+  )
 }
 
 export default TimelineEvent;
\ No newline at end of file
diff --git a/src/components/Timestamp.js b/src/components/Timestamp.js
index 6251538..247e781 100644
--- a/src/components/Timestamp.js
+++ b/src/components/Timestamp.js
@@ -7,7 +7,9 @@ const Timestamp = (props) => {
   const relative = time.fromNow();
 
   return (
-    <span title={absolute}>{relative}</span>
+    <div>
+      <span title={absolute}>{relative}</span>
+    </div>
   );
 };