diff --git a/src/App.css b/src/App.css
index b41d297ca..ceb100cb2 100755
--- a/src/App.css
+++ b/src/App.css
@@ -31,3 +31,8 @@
     transform: rotate(360deg);
   }
 }
+
+img {
+  width: 200px;
+  height: auto;
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 7e261ca47..313cd8173 100755
--- a/src/App.js
+++ b/src/App.js
@@ -1,25 +1,68 @@
 import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
+import contacts from './data/contacts.json';
+import ContactList from './components/ContactList';
+
 
 class App extends Component {
+  state = {
+    arrayofContacts: contacts,
+    contacts: contacts.splice(0, 5),
+   // name: contacts.name
+    }
+
+  addRandomContact = () => {
+    const numberContact = this.state.arrayofContacts.length;
+    const num = Math.floor(Math.random() * numberContact);
+    const newContact = this.state.arrayofContacts[num];
+    const newCon = [...this.state.contacts, newContact]
+
+    this.setState({contacts: newCon})
+  }
+
+  sortedContacts = () => {
+     const sorted = this.state.contacts.sort( (a, b) => {
+      if (a.name > b.name) {
+        return 1;
+      }
+      if (a.name < b.name) {
+        return -1;
+      }
+      // a must be equal to b
+      return 0;
+     })
+     this.setState({contacts: sorted})
+  }
+
+sortByPopularity = () => {
+  const sortedbyPop = this.state.contacts.sort( (a, b) => {
+    return b.popularity - a.popularity;
+  })
+  this.setState({contacts: sortedbyPop})
+}
+
+deleteContact = (index) => {
+  this.state.contacts.splice(index, 1)
+  this.setState({contacts: [...this.state.contacts]})
+}
   render() {
+
+    const { contacts } = this.state;
+
     return (
+
       <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-        </header>
+
+        <button onClick={this.addRandomContact}>Add New Contact</button>
+        <button onClick={this.sortedContacts}>Sort Contacts</button>
+        <button onClick={this.sortByPopularity}>Sort Popularity</button>
+        {
+          contacts.map( (contacts, index) => {
+              return <ContactList contacts={contacts} key={index} delete={this.deleteContact} />
+          })
+        }
+        
       </div>
     );
   }
diff --git a/src/components/ContactList.js b/src/components/ContactList.js
new file mode 100644
index 000000000..5e3c04264
--- /dev/null
+++ b/src/components/ContactList.js
@@ -0,0 +1,23 @@
+import React, { Component } from 'react'
+
+export default class ContactList extends Component {
+
+handleDelete = (e) => {
+  this.props.delete(this.props.key);
+}
+
+    render() {
+    
+        const { name, pictureUrl, popularity } = this.props.contacts;
+    return (
+    <ul>
+      <li>
+        <img src={pictureUrl}></img>
+        <h1>{name}</h1>
+        <h2>{popularity}</h2>
+      </li>
+      <button onClick={this.handleDelete}>Delete contact</button>
+    </ul>
+    )
+  }
+}