diff --git a/src/App.js b/src/App.js
index 7e261ca47..4c773d17f 100755
--- a/src/App.js
+++ b/src/App.js
@@ -1,25 +1,14 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
 import './App.css';
+import contacts from './data/contacts.json';
+import ListContacts from './ListContacts';
+
 
 class App extends Component {
   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>
+      <ListContacts/>
       </div>
     );
   }
diff --git a/src/Card.js b/src/Card.js
new file mode 100644
index 000000000..28cbb8d25
--- /dev/null
+++ b/src/Card.js
@@ -0,0 +1,19 @@
+import React from 'react';
+
+const Card = ({ picture, name, popularity }) => {
+    return (
+        <tr>
+        <td>
+            <img width="80" src={picture} alt=""/>
+        </td>
+        <td>
+            <h2>{name}</h2>
+        </td>
+        <td>
+            <p>{popularity}</p>
+        </td>
+        </tr>
+    )
+}
+
+export default Card;
\ No newline at end of file
diff --git a/src/ListContacts.js b/src/ListContacts.js
new file mode 100644
index 000000000..61ef326c8
--- /dev/null
+++ b/src/ListContacts.js
@@ -0,0 +1,80 @@
+import React, { Component } from 'react';
+import Card from './Card';
+import contacts from './data/contacts.json';
+
+
+class ListContacts extends Component {
+    constructor(){
+        super();
+        this.state = {
+            contacts: [
+                {
+                  "name": "Idris Elba",
+                  "pictureUrl": "https://image.tmdb.org/t/p/w500/d9NkfCwczP0TjgrjpF94jF67SK8.jpg",
+                  "popularity": 11.622713
+                },
+                {
+                  "name": "Jessica Chastain",
+                  "pictureUrl": "https://image.tmdb.org/t/p/w500/nkFrkn5NZVGWb4b2X0yIcXezhyt.jpg",
+                  "popularity": 8.324357
+                },
+                {
+                  "name": "Johnny Depp",
+                  "pictureUrl": "https://image.tmdb.org/t/p/w500/kbWValANhZI8rbWZXximXuMN4UN.jpg",
+                  "popularity": 15.656534
+                },
+                {
+                  "name": "Emilia Clarke",
+                  "pictureUrl": "https://image.tmdb.org/t/p/w500/j7d083zIMhwnKro3tQqDz2Fq1UD.jpg",
+                  "popularity": 16.211837
+                },
+                {
+                  "name": "Leonardo DiCaprio",
+                  "pictureUrl": "https://image.tmdb.org/t/p/w500/A85WIRIKVsD2DeUSc8wQ4fOKc4e.jpg",
+                  "popularity": 11.245333
+                }]
+
+        }
+    }
+
+  randomContact = () => {
+    return Math.floor(Math.random() * this.state.contacts.length);
+  }
+
+  
+ /*    const contactsCopy = [...this.state.contacts]
+    contactsCopy.splice(contactIndex, 1);
+    this.ListeningStateChangedEvent({
+      contacts: contactsCopy
+  }) */
+
+
+    render() {
+        return (
+            <div>
+              <h1>IronContacts</h1>
+              <button>Add Random</button>
+              <table style={tableStyle}>
+                <tr>
+                  <th>Picture</th>
+                  <th>Name</th>
+                  <th>popularity</th>
+                </tr>
+                {
+                this.state.contacts.map((oneContact, index) =>
+                    <Card key={index} picture={oneContact.pictureUrl} name={oneContact.name} popularity={oneContact.popularity} />)
+                } 
+
+              </table>
+            </div>
+        )
+    }
+}
+
+
+
+export default ListContacts;
+
+const tableStyle = {
+  margin: "0 auto"
+  }
\ No newline at end of file