diff --git a/package-lock.json b/package-lock.json
index 679a99b5a..034d0a0b2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2791,8 +2791,7 @@
             },
             "ansi-regex": {
               "version": "2.1.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -2810,13 +2809,11 @@
             },
             "balanced-match": {
               "version": "1.0.0",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "brace-expansion": {
               "version": "1.1.11",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -2829,18 +2826,15 @@
             },
             "code-point-at": {
               "version": "1.1.0",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "concat-map": {
               "version": "0.0.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "console-control-strings": {
               "version": "1.1.0",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -2943,8 +2937,7 @@
             },
             "inherits": {
               "version": "2.0.3",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "ini": {
               "version": "1.3.5",
@@ -2954,7 +2947,6 @@
             "is-fullwidth-code-point": {
               "version": "1.0.0",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -2967,20 +2959,17 @@
             "minimatch": {
               "version": "3.0.4",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
             },
             "minimist": {
               "version": "0.0.8",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "minipass": {
               "version": "2.3.5",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -2997,7 +2986,6 @@
             "mkdirp": {
               "version": "0.5.1",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -3070,8 +3058,7 @@
             },
             "number-is-nan": {
               "version": "1.0.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -3081,7 +3068,6 @@
             "once": {
               "version": "1.4.0",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -3157,8 +3143,7 @@
             },
             "safe-buffer": {
               "version": "5.1.2",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -3188,7 +3173,6 @@
             "string-width": {
               "version": "1.0.2",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -3206,7 +3190,6 @@
             "strip-ansi": {
               "version": "3.0.1",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -3245,13 +3228,11 @@
             },
             "wrappy": {
               "version": "1.0.2",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "yallist": {
               "version": "3.0.3",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             }
           }
         },
@@ -6223,8 +6204,7 @@
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -6242,13 +6222,11 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -6261,18 +6239,15 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -6375,8 +6350,7 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "ini": {
           "version": "1.3.5",
@@ -6386,7 +6360,6 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -6399,20 +6372,17 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -6429,7 +6399,6 @@
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -6502,8 +6471,7 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -6513,7 +6481,6 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -6589,8 +6556,7 @@
         },
         "safe-buffer": {
           "version": "5.1.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -6620,7 +6586,6 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -6638,7 +6603,6 @@
         "strip-ansi": {
           "version": "3.0.1",
           "bundled": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -6677,13 +6641,11 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "yallist": {
           "version": "3.0.2",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         }
       }
     },
diff --git a/src/App.css b/src/App.css
index b41d297ca..77aaef37f 100755
--- a/src/App.css
+++ b/src/App.css
@@ -31,3 +31,19 @@
     transform: rotate(360deg);
   }
 }
+
+.flexbox {
+  display: flex;
+  list-style: none;
+  justify-content: space-between;
+}
+
+.container {
+  margin: 2rem 4rem 0 2rem;
+}
+
+.btn {
+  padding: 1rem;
+  background-color: red;
+  color: white;
+}
diff --git a/src/App.js b/src/App.js
index 7e261ca47..e217af297 100755
--- a/src/App.js
+++ b/src/App.js
@@ -1,26 +1,104 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
+import contacts from './data/contacts.json';
+import Contact from './Components/Contact.js';
+import AddContact from './Components/AddContact.js';
 import './App.css';
 
+
 class App extends Component {
+  
+  state = {
+    seenContacts: contacts.splice(0, 5),
+  }
+  
+  handleNewContact = () => {
+    const newContactNumber = Math.floor(Math.random() * contacts.length );
+    
+    this.setState({
+      seenContacts: [...this.state.seenContacts, contacts[newContactNumber]]
+    })
+  }
+
+  handleSortByName = () => {    
+    const orderedContacts = this.state.seenContacts;
+    
+    function sortByName(a,b) {
+      if (a.name < b.name)
+        return -1;
+      if (a.name > b.name)
+        return 1;
+      return 0;
+    }
+    
+    orderedContacts.sort(sortByName);
+
+    this.setState({
+      seenContacts: orderedContacts
+    })
+  }
+
+  handleSortByPopularity = () => {    
+    const orderedContacts = this.state.seenContacts;
+    
+    function sortByPopularity(a,b) {
+      if (a.popularity < b.popularity)
+        return 1;
+      if (a.popularity > b.popularity)
+        return -1;
+      return 0;
+    }
+    
+    orderedContacts.sort(sortByPopularity);
+
+    this.setState({
+      seenContacts: orderedContacts
+    })
+  }
+
+  delete = (index) => {
+    const removedList = this.state.seenContacts;
+    removedList.splice(index, 1);
+
+    this.setState({
+      seenContacts: removedList
+    })
+  }
+
+  handleTask = (contact) => {
+    const newContactList = this.state.seenContacts;
+    newContactList.push({
+      name: contact,
+      pictureUrl: "https://image.tmdb.org/t/p/w500/kbWValANhZI8rbWZXximXuMN4UN.jpg",
+      popularity: 15.656534
+    })
+
+    this.setState({
+      seenContacts: newContactList
+    })
+  }
+
   render() {
+    const { seenContacts } = 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>
-      </div>
+      <div className="container">
+        <h1>IronContacts</h1>
+        <AddContact onClick={this.handleTask} />
+        <br></br>
+        <button onClick={this.handleNewContact}>Add Random Contact</button>
+        <button onClick={this.handleSortByName}>Sort By Name</button>
+        <button onClick={this.handleSortByPopularity}>Sort By Popularity</button>
+        <ul>
+          {seenContacts.map((contact, index) => { 
+          return < Contact 
+            contact = {contact}
+            key = {index} 
+            index = {index}
+            deleteContact = { this.delete }
+          />
+          })}
+        </ul>
+     </div>
     );
   }
 }
diff --git a/src/Components/AddContact.js b/src/Components/AddContact.js
new file mode 100644
index 000000000..8d57affd6
--- /dev/null
+++ b/src/Components/AddContact.js
@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+
+class AddContact extends Component {
+  
+  state = {
+    newContact: '',
+  }
+
+  handleInput = (e) => {
+    this.setState({
+      newContact: e.target.value,
+    })
+  }
+
+  handleClick = () => {
+    const { newContact } = this.state
+    this.props.onClick(newContact);
+    this.setState({
+      newContact: '',
+    })
+  }
+
+  render() {
+    const { newContact } = this.state;
+    return (
+      <>
+        <input 
+          type="text"
+          value={newContact}
+          onChange={this.handleInput}
+          name='newContact'
+          placeholder='Name'
+        />
+        <button onClick={this.handleClick}>Add Contact</button>
+      </>
+    );
+  }
+}
+
+export default AddContact;
\ No newline at end of file
diff --git a/src/Components/Contact.js b/src/Components/Contact.js
new file mode 100644
index 000000000..7c414f7bf
--- /dev/null
+++ b/src/Components/Contact.js
@@ -0,0 +1,23 @@
+import React from 'react';
+
+const Contact = (props) => {
+  const { name, popularity, pictureUrl } = props.contact;
+  
+  const handleDelete = (e) => {
+    props.deleteContact(props.index);
+  }
+
+  return (
+    <li className="flexbox">
+      <img height="50px" src={pictureUrl} alt={name}></img>
+      <h4>{name}</h4>
+      <h5>{popularity}</h5>
+      <button className="btn" onClick={handleDelete}>Delete</button>
+    </li>
+  )
+}
+
+
+
+
+export default Contact;