diff --git a/src/App.js b/src/App.js
index 7e261ca47..48b044c05 100755
--- a/src/App.js
+++ b/src/App.js
@@ -1,27 +1,68 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
 import './App.css';
+import contacts from './data/contacts.json';
+import CardsList from './components/CardsList';
 
+
+  
 class App extends Component {
-  render() {
+  state = {
+    list: contacts.slice(0,5)
+  };
+  onAddItem = () => {
+    this.setState(state => {
+    const randomValue = Math.floor(contacts.length * Math.random())
+    const list = state.list.concat(contacts[randomValue]);
+    return {
+      list,
+      value: '',
+      };
+    });
+  }; 
+  sortByName = () => {
+    const list=this.state.list.sort((a,b) => (a.name > b.name) ? 1 : ((b.name> a.name) ? -1 : 0)); 
+    this.setState({list: list})
+  }; 
+  sortByPopularity = () => {
+    const list=this.state.list.sort((a,b) => (a.popularity < b.popularity) ? 1 : ((b.popularity< a.popularity) ? -1 : 0)); 
+    this.setState({list: list})
+  }; 
+  onDeleteItem = (index) => {
+    let {list} = this.state
+    list.splice(index,1)
+    this.setState({
+      list
+    })
+      
+  };
+  render () {
     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>
+      <div>
+        { <button
+          type="button"
+          onClick={this.onAddItem}
+        >
+          Add Random Contact
+        </button> }
+        { <button
+          type="button"
+          onClick={this.sortByName}
+        >
+          Sort By Name
+        </button> }
+        { <button
+          type="button"
+          onClick={this.sortByPopularity}
+        >
+          Sort By Popularity
+        </button> }
+       
+        <CardsList  contacts={this.state.list} onDelete={this.onDeleteItem}/>
+        
+        
       </div>
-    );
+
+    )
   }
 }
 
diff --git a/src/components/Card.js b/src/components/Card.js
new file mode 100644
index 000000000..879e0a227
--- /dev/null
+++ b/src/components/Card.js
@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+
+class Card extends Component {
+
+  render () {
+    console.log(this.props)
+    const {pictureUrl, name, popularity} = this.props.contact;
+    return (
+     <div >
+        <img src={pictureUrl}/>
+        <h2>{name}</h2>
+        <h3>{popularity}</h3>
+        
+      </div>
+
+    )
+  }
+}
+export default Card;
\ No newline at end of file
diff --git a/src/components/CardsList.js b/src/components/CardsList.js
new file mode 100644
index 000000000..8bf87677d
--- /dev/null
+++ b/src/components/CardsList.js
@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+import Card from './Card';
+
+
+
+class CardsList extends Component {
+  
+  
+    
+  renderList () {
+    return this.props.contacts.map((contact, index) => {
+      return <div>
+          <Card key={`id-${index}`} contact={contact}/>
+            <button
+             type="button"
+             onClick={() => this.props.onDelete(index)}
+             >
+             Delete
+           </button> 
+      </div>
+      
+    })
+  }
+
+
+  
+  render () {
+    return (
+      <div >
+         {this.renderList()}
+       </div>
+
+    )
+  }
+}
+export default CardsList;
\ No newline at end of file
diff --git a/src/data/contacts.json b/src/data/contacts.json
index 270023615..3e603fe44 100644
--- a/src/data/contacts.json
+++ b/src/data/contacts.json
@@ -1,4 +1,4 @@
-[
+ [
   {
     "name": "Idris Elba",
     "pictureUrl": "https://image.tmdb.org/t/p/w500/d9NkfCwczP0TjgrjpF94jF67SK8.jpg",