diff --git a/package-lock.json b/package-lock.json
index 679a99b5a..088a5367b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1721,6 +1721,11 @@
       "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
       "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU="
     },
+    "assertion-error": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.0.0.tgz",
+      "integrity": "sha1-x/hUOP3UZrx8oWq5DIFRN5el0js="
+    },
     "assign-symbols": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
@@ -9431,6 +9436,11 @@
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
       "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
     },
+    "merge-recursive": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/merge-recursive/-/merge-recursive-0.0.3.tgz",
+      "integrity": "sha1-3nkB78rsyQbYyrKtHpxHD1o9roQ="
+    },
     "merge-stream": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-1.0.1.tgz",
@@ -9834,6 +9844,14 @@
       "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.1.0.tgz",
       "integrity": "sha512-ZG3bLAvdHmhIjaQ/Db1qvBxsGvFMLIRpQszyqbg31VJ53UP++uZX1/gf3Ut96pdwN9AuDwlMqIYLm0UPCdUeHg=="
     },
+    "oath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/oath/-/oath-1.0.0.tgz",
+      "integrity": "sha1-L04fd5e5A6eLJDUn3GgkWwrrDVg=",
+      "requires": {
+        "simple-assert": "~1.0.0"
+      }
+    },
     "oauth-sign": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
@@ -14113,6 +14131,14 @@
         "ajv-keywords": "^3.1.0"
       }
     },
+    "sechash": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/sechash/-/sechash-0.2.1.tgz",
+      "integrity": "sha1-i3H+R9aCcvR6NfFkDkzJITJbEzs=",
+      "requires": {
+        "oath": "^1.0.0"
+      }
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -14321,11 +14347,28 @@
       "resolved": "https://registry.npmjs.org/shellwords/-/shellwords-0.1.1.tgz",
       "integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww=="
     },
+    "short-id": {
+      "version": "0.1.0-1",
+      "resolved": "https://registry.npmjs.org/short-id/-/short-id-0.1.0-1.tgz",
+      "integrity": "sha1-pMDzU3//RiP/hJZIgrXUMBmiQJU=",
+      "requires": {
+        "merge-recursive": "0.0.3",
+        "sechash": "~0.2.1"
+      }
+    },
     "signal-exit": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
       "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0="
     },
+    "simple-assert": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/simple-assert/-/simple-assert-1.0.0.tgz",
+      "integrity": "sha1-U/F5AADXFEJBJCkHgLwqPlEc8O8=",
+      "requires": {
+        "assertion-error": "1.0.0"
+      }
+    },
     "simple-swizzle": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
diff --git a/package.json b/package.json
index 5fc4fc057..7292a8d8a 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,8 @@
   "dependencies": {
     "react": "^16.8.1",
     "react-dom": "^16.8.1",
-    "react-scripts": "2.1.5"
+    "react-scripts": "2.1.5",
+    "short-id": "0.1.0-1"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/src/App.css b/src/App.css
index b41d297ca..1b459902c 100755
--- a/src/App.css
+++ b/src/App.css
@@ -1,5 +1,6 @@
 .App {
   text-align: center;
+
 }
 
 .App-logo {
@@ -23,6 +24,22 @@
   color: #61dafb;
 }
 
+.App table{
+  width: 50%;
+  max-width: 900px;
+  margin: 0 auto;
+}
+.App table td{
+  width: 10%;
+}
+.App table td img{
+  width: 100%;
+  transition: all 300ms;
+}
+.App table td img:hover{
+  transform: scale(1.1) rotate(-5deg);
+}
+
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);
diff --git a/src/App.js b/src/App.js
index 7e261ca47..6eded609d 100755
--- a/src/App.js
+++ b/src/App.js
@@ -1,28 +1,54 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
 import './App.css';
+import contacts from './data/contacts.json';
+
+const ContactList = contacts.slice(0,5);
+const RandomContact = contacts[Math.floor(Math.random()*contacts.length)];
+ContactList.push(RandomContact)
+
+const ContactListFinal = ContactList.map((contact, index) =>
+<tr key={index}>
+  <td ><img src={contact.pictureUrl}/></td>
+  <td >{contact.name}</td>
+  <td >{contact.popularity}</td>
+</tr>
+);
+
 
 class App extends Component {
+
+  state={
+    contacts : ContactListFinal
+  }
+
+  DeleteAll = () => {
+    this.setState({ contacts: [] });
+  }
+  RandomActor = () => {
+    /* this.setState({ contacts: ContactListFinal }); */
+  }
+
   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>
+        <button onClick={this.RandomActor}>Add Random Contact</button>
+        <table>
+          <thead>
+          </thead>
+          <tbody>
+            <tr>
+              <th>Picture</th>
+              <th>Name</th>
+              <th>Popularity</th>
+            </tr>
+              {this.state.contacts}
+          </tbody>
+        </table>
       </div>
     );
   }
-}
 
+}
 export default App;