diff --git a/src/App.js b/src/App.js
index 7e261ca47..18d0d9c7a 100755
--- a/src/App.js
+++ b/src/App.js
@@ -1,25 +1,73 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
 import './App.css';
+import contacts from './data/contacts.json'
+import Card from './Components/Card'
+import AddRandomButon from './Components/AddRandomButton'
+
 
 class App extends Component {
+
+  state = {
+    contacts: contacts.slice(0, 5)
+  }
+
+  handleClickRandom = () => {
+    const index = Math.floor(Math.random() * contacts.length);
+    const randomContact = contacts[index]
+    this.setState({
+      contacts: [...this.state.contacts, randomContact]
+    })
+  }
+
+  handleClickSortByName = () => {
+    const nameArray = this.state.contacts.sort((a, b) => {
+      return a.name.localeCompare(b.name);
+    })
+    this.setState({
+      contacts: nameArray,
+    })
+  }
+
+  handleClickSortByPopularity = () => {
+    const popuArray = this.state.contacts.sort((a, b) => {
+      return b.popularity - a.popularity;
+    })
+    this.setState({
+      contacts: popuArray,
+    })
+  }
+
+  handleClickDeleted = (index) => {
+    const { contacts } = this.state;
+    contacts.splice(index, 1);
+    this.setState({
+      contacts
+    })
+  }
+
   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>
+        <h1>IronContacts</h1>
+        <AddRandomButon
+          addContact={this.handleClickRandom}
+        />
+        <button onClick={this.handleClickSortByName}>Sort by Name</button>
+        <button onClick={this.handleClickSortByPopularity}>Sort by Popularity</button>
+        <section className="row">
+          {this.state.contacts.map((item, index) => {
+              return <div>
+                <Card
+                  key={`id-${index}`}
+                  pictureUrl={item.pictureUrl}
+                  name={item.name}
+                  popularity={item.popularity}
+                />
+                <button onClick={()=>this.handleClickDeleted(index)}>Delete</button>
+              </div>
+            })
+          }
+        </section>
       </div>
     );
   }
diff --git a/src/Components/AddRandomButton.js b/src/Components/AddRandomButton.js
new file mode 100644
index 000000000..860310ec9
--- /dev/null
+++ b/src/Components/AddRandomButton.js
@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+
+class AddRandomButon extends Component {
+  render() {
+    return (
+      <div>
+        <button onClick={this.props.addContact} >Add Random Contact</button>
+      </div>
+    );
+  }
+}
+
+export default AddRandomButon;
\ No newline at end of file
diff --git a/src/Components/Card.js b/src/Components/Card.js
new file mode 100644
index 000000000..578848e57
--- /dev/null
+++ b/src/Components/Card.js
@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+
+
+class Card extends Component {
+  render() {
+    const { pictureUrl, name, popularity } = this.props;
+    return (
+      <div className="card">
+        <article>
+          <img src={pictureUrl} alt="" />
+          <p>{name}</p>
+          <p>{popularity}</p>
+          
+        </article>
+      </div>
+    );
+  }
+}
+
+export default Card;
\ No newline at end of file