diff --git a/src/App.css b/src/App.css
index e20270c..fc94467 100644
--- a/src/App.css
+++ b/src/App.css
@@ -14,4 +14,7 @@
 .App-main {
   padding-top: 7rem;
   background-color: #E6ECF0;
+  text-align: center;
+  border: black;
+  /* margin: 30px;    */
 }
diff --git a/src/App.js b/src/App.js
index 76d86d2..19aeb0a 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';
+import Timestamp from './components/Timestamp';
 
 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 Feed</h1>
       </header>
       <main className="App-main">
+        <Timeline events={timelineData.events} />
       </main>
     </div>
   );
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 463eb3e..bc067ee 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -1,10 +1,24 @@
 import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
+import { render } from '@testing-library/react';
+import '../data/timeline.json';
 
-const Timeline = () => {
-  
-  return;
+const Timeline = (props) => {
+    const posts = props.events.map ((event) => {
+      return (
+        <TimelineEvent
+          person = {event.person}
+          status = {event.status}
+          timeStamp = {event.timeStamp}
+          />
+      );
+    });
+  return (
+    <ul>
+      {posts}
+    </ul>
+  );
 }
 
 export default Timeline;
\ No newline at end of file
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index cc476c2..64bc6dc 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -1,10 +1,17 @@
 import React from 'react';
 import './TimelineEvent.css';
 import Timestamp from './Timestamp';
+import { render } from '@testing-library/react';
 
-const TimelineEvent = () => {
-  
-  return;
+
+const TimelineEvent = (props) => {
+  return(
+    <div>
+      <h3>{props.person}</h3>
+      <p><Timestamp time={props.timestamp}/></p>
+      <p>{props.status}</p>
+    </div>
+  );  
 }
 
-export default TimelineEvent;
\ No newline at end of file
+export default TimelineEvent;