diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..953e321
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+  "workbench.colorCustomizations": {
+    "tab.unfocusedActiveBorder": "#fff0"
+  }
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 5f4cdf8..138a867 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,24 +1,20 @@
-import React, { Component } from 'react';
+import React from 'react';
 import './App.css';
 import timelineData from './data/timeline.json';
-
 import Timeline from './components/Timeline';
 
-class App extends Component {
-  render() {
-    console.log(timelineData);
-
-    // Customize the code below
-    return (
-      <div className="App">
-        <header className="App-header">
-          <h1 className="App-title">Application title</h1>
-        </header>
-        <main className="App-main">
-        </main>
-      </div>
-    );
-  }
-}
+const App = () => {
+  console.log(timelineData);
+  return (
+    <div className="App">
+      <header className="App-header">
+        <h1 className="App-title">{timelineData.person}'s Timeline</h1>
+      </header>
+      <main className="App-main">
+        <Timeline events={timelineData.events} />
+      </main>
+    </div>
+  );
+};
 
 export default App;
diff --git a/src/components/Timeline.css b/src/components/Timeline.css
index e31f946..24afd2f 100644
--- a/src/components/Timeline.css
+++ b/src/components/Timeline.css
@@ -1,5 +1,5 @@
 .timeline {
-  width: 30%;
+  width: 60%;
   margin: auto;
   text-align: left;
 }
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 624d4ec..df9c786 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -2,9 +2,18 @@ import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
-const Timeline = () => {
-  // Fill in your code here
-  return;
-}
+const Timeline = props => {
+  const eventFeed = props.events.map((event, i) => {
+    return (
+      <TimelineEvent
+        key={i}
+        person={event.person}
+        status={event.status}
+        time={event.timeStamp}
+      />
+    );
+  });
 
+  return <section className="timeline">{eventFeed}</section>;
+};
 export default Timeline;
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index 9079165..1c445da 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 = () => {
-  // Fill in your code here
-  return;
-}
+const TimelineEvent = props => {
+  return (
+    <article className="timeline-event">
+      <p className="event-person">{props.person}</p>
+      <p className="event-status">{props.status}</p>
+      <p className="event-time">
+        <Timestamp time={props.time} />
+      </p>
+    </article>
+  );
+};
 
 export default TimelineEvent;
diff --git a/src/components/Timestamp.js b/src/components/Timestamp.js
index 9a39231..e3e8e35 100644
--- a/src/components/Timestamp.js
+++ b/src/components/Timestamp.js
@@ -1,14 +1,12 @@
 import React from 'react';
 import moment from 'moment';
 
-const Timestamp = (props) => {
+const Timestamp = props => {
   const time = moment(props.time);
   const absolute = time.format('MMMM Do YYYY, h:mm:ss a');
   const relative = time.fromNow();
 
-  return (
-    <span title={absolute}>{relative}</span>
-  );
+  return <span title={absolute}>{relative}</span>;
 };
 
 export default Timestamp;
diff --git a/src/index.css b/src/index.css
index b696191..3455b33 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,7 @@
+@import url('https://fonts.googleapis.com/css?family=Courgette|Open+Sans&display=swap');
+
 body {
   margin: 0;
   padding: 0;
-  font-family: 'Muli', sans-serif;
+  font-family: 'Courgette', sans-serif;
 }