diff --git a/src/App.css b/src/App.css
index b41d297ca..1eaad2196 100755
--- a/src/App.css
+++ b/src/App.css
@@ -1,13 +1,39 @@
 .App {
   text-align: center;
 }
-
+.row {  
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  flex-direction: column;
+}
 .App-logo {
   animation: App-logo-spin infinite 20s linear;
   height: 40vmin;
   pointer-events: none;
 }
-
+.h2 {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+li {
+  display: flex;
+  flex-direction: row;
+  }
+ul {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+.img {
+  width: 2rem;
+  height: 3rem;
+  margin: 0 6rem;
+}
+p {
+  margin: 0 3rem;
+}
 .App-header {
   background-color: #282c34;
   min-height: 100vh;
diff --git a/src/App.js b/src/App.js
index 7e261ca47..31c4cfb15 100755
--- a/src/App.js
+++ b/src/App.js
@@ -1,28 +1,80 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
 import './App.css';
+import contacts from './data/contacts.json';
+import List from './Components/List';
+import Add from './Components/Add';
+import ByName from './Components/ByName';
+import ByPop from './Components/ByPop';
+
 
 class App extends Component {
+  state = {
+    contacts: contacts.slice(0,5)
+  };
+
+  getRandomInt = (min, max)  => {
+    return Math.floor(Math.random() * (max - min)) + min;
+  };
+
+  random = () => {
+    console.log("Click")
+    const contactRandom = this.getRandomInt(0,contacts.length);
+    
+    this.setState({
+      contacts: [...this.state.contacts, contacts[contactRandom]],
+    
+    });
+  };
+  SortName = () => {
+    this.setState({
+      contacts: this.state.contacts.sort((a,b) => (a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0)),
+    })
+  };
+
+  SortPop = () => {
+    this.setState({
+      contacts: this.state.contacts.sort((a,b) => (a.popularity < b.popularity) ? 1 : ((b.popularity < a.popularity) ? -1 : 0)),
+    })
+  };
+
+  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>
+        <h1>Iron Contacts</h1>
+        <Add button={this.random} />
+        <ByName button={this.SortName} />
+        <ByPop button={this.SortPop} />
+        <div className="h2">
+          <h2>Pic</h2>
+          <h2>Name</h2>
+          <h2>Pop</h2>
+        </div>
+        <ul>
+          {contacts.map((contact,index) => {
+            return ( <List
+              key={index}
+              index={index}
+              list={contact}
+              del={this.deleteContact}
+            />
+            )
+          })};
+        </ul>
       </div>
+      </>
     );
-  }
-}
+  };
+};
 
 export default App;
diff --git a/src/Components/Add.js b/src/Components/Add.js
new file mode 100644
index 000000000..b26669d1e
--- /dev/null
+++ b/src/Components/Add.js
@@ -0,0 +1,11 @@
+import React, { Component } from 'react';
+
+class Add extends Component { 
+
+render(){
+    return(
+        <button onClick={this.props.button}>Add Random Contact</button>
+    )}
+
+}
+export default Add;
\ No newline at end of file
diff --git a/src/Components/ByName.js b/src/Components/ByName.js
new file mode 100644
index 000000000..b1c91a90b
--- /dev/null
+++ b/src/Components/ByName.js
@@ -0,0 +1,11 @@
+import React, { Component } from 'react';
+
+class ByName extends Component { 
+
+render(){
+    return(
+        <button onClick={this.props.button}>Sort By Name</button>
+    )}
+}
+
+export default ByName;
\ No newline at end of file
diff --git a/src/Components/ByPop.js b/src/Components/ByPop.js
new file mode 100644
index 000000000..74c4e3ebd
--- /dev/null
+++ b/src/Components/ByPop.js
@@ -0,0 +1,11 @@
+import React, { Component } from 'react';
+
+class ByPop extends Component { 
+
+render(){
+    return(
+        <button onClick={this.props.button}>Sort By Popularity</button>
+    )}
+}
+
+export default ByPop;
\ No newline at end of file
diff --git a/src/Components/List.js b/src/Components/List.js
new file mode 100644
index 000000000..d79558a31
--- /dev/null
+++ b/src/Components/List.js
@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+
+class List extends Component { 
+
+    handleClick = () => {
+        this.props.del(this.props.index);
+        console.log(this.props.index)
+    }
+    
+    render () {
+        return (
+            <div className="row">
+                <li>
+                    <img src={this.props.list.pictureUrl} alt="Famous" className="img" ></img>
+                    <p >{this.props.list.name}</p>
+                    <p >{this.props.list.popularity}</p>
+                    <button onClick={this.handleClick}>Delete</button>
+                </li>
+            </div>
+        );
+    }
+}
+
+export default List;
\ No newline at end of file
diff --git a/src/data/contacts.json b/src/data/contacts.json
index 270023615..65ee0cc38 100644
--- a/src/data/contacts.json
+++ b/src/data/contacts.json
@@ -994,4 +994,5 @@
     "pictureUrl": "https://image.tmdb.org/t/p/w500/aqZ9RjL5j44HMlBMvTaawhHiGOH.jpg",
     "popularity": 6.914606
   }
-]
\ No newline at end of file
+]
+