diff --git a/src/App.js b/src/App.js
index 43e3c71..2d7e652 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,7 @@
 import './App.css';
 import React from 'react';
 import axios from 'axios';
+import Person from './components/person.js'
 
 class App extends React.Component {
 
@@ -59,7 +60,7 @@ class App extends React.Component {
 				<ul>
 					{
 						this.state.contacts.map((contact)=>{
-							return <li key={contact.id}>{contact.name} is {contact.age} years old</li>
+							return <Person data={contact} />
 						})
 					}
 				</ul>
diff --git a/src/components/person.js b/src/components/person.js
new file mode 100644
index 0000000..ec7a443
--- /dev/null
+++ b/src/components/person.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import axios from 'axios';
+
+
+class Person extends React.Component {
+	render = ()=>{
+		return <li key={this.props.data.id}>
+			{this.props.data.name} is {this.props.data.age} years old
+			<button>Delete</button>
+		</li>
+	}
+}
+
+export default Person