diff --git a/src/App.js b/src/App.js
index 76d86d2..5638d98 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,19 +1,16 @@
 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);
-
-  // Customize the code below
   return (
     <div className="App">
       <header className="App-header">
-        <h1 className="App-title">Application title</h1>
+        <h1 className="App-title">Ada Lovelace's social media feed!</h1>
       </header>
       <main className="App-main">
+      <Timeline data={timelineData.events}  />
       </main>
     </div>
   );
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 463eb3e..f3c745f 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -1,10 +1,31 @@
 import React from 'react';
 import './Timeline.css';
+import PropTypes from 'prop-types';
 import TimelineEvent from './TimelineEvent';
 
-const Timeline = () => {
+const Timeline = (props) => {
+  console.log(props);
+
+  const events = props.data.map((event, index) => {
+    return (
+      <section key={index}>
+        <TimelineEvent 
+          person={event.person}
+          status={event.status}
+          timeStamp={event.timeStamp}
+        />
+      </section>
+
+    )
+  });
+
   
-  return;
+  return(
+    <div className='timeLine'> {events} </div>
+  );
 }
+Timeline.propTypes = {
+  events: PropTypes.arrayOf(PropTypes.object)
+};
 
 export default Timeline;
\ No newline at end of file
diff --git a/src/components/TimelineEvent.css b/src/components/TimelineEvent.css
index ea6407a..dc2f6fc 100644
--- a/src/components/TimelineEvent.css
+++ b/src/components/TimelineEvent.css
@@ -16,6 +16,7 @@
   font-weight: bolder;
 }
 
+
 .event-status {
   grid-area: 2 / 1 / span 1 / -1;
 }
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index cc476c2..66b9718 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -1,10 +1,29 @@
 import React from 'react';
 import './TimelineEvent.css';
+import PropTypes from 'prop-types';
 import Timestamp from './Timestamp';
 
-const TimelineEvent = () => {
+const TimelineEvent = (props) => {
+
+
   
-  return;
-}
+  return (
+    <section className='timeline-event'>
+      <h3 className='event-person'>{props.person}</h3>
+      <h4 className='event-status'>{props.status}</h4>
+      <h3 className='event-time'><Timestamp time={props.timeStamp}/></h3>
+    </section>
+
+  );
+};
+
+
+TimelineEvent.propTypes = {
+  person: PropTypes.string.isRequired,
+  status: PropTypes.string.isRequired,
+};
+
+
+
 
-export default TimelineEvent;
\ No newline at end of file
+export default TimelineEvent;
diff --git a/src/components/Timestamp.js b/src/components/Timestamp.js
index 6251538..5afdc80 100644
--- a/src/components/Timestamp.js
+++ b/src/components/Timestamp.js
@@ -2,6 +2,7 @@ import React from 'react';
 import moment from 'moment';
 
 const Timestamp = (props) => {
+  console.log(props);
   const time = moment(props.time);
   const absolute = time.format('MMMM Do YYYY, h:mm:ss a');
   const relative = time.fromNow();
@@ -11,4 +12,4 @@ const Timestamp = (props) => {
   );
 };
 
-export default Timestamp;
\ No newline at end of file
+export default Timestamp;