diff --git a/src/App.js b/src/App.js
index 7e261ca47..cfd098e3e 100755
--- a/src/App.js
+++ b/src/App.js
@@ -1,25 +1,15 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
+import PopularContacts from './components/PopularContacts.js';
+import contacts from './data/contacts.json';
 import './App.css';
 
+
 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>
+        <h1>Popular Contacts</h1>
+          <PopularContacts contactsArray={contacts}></PopularContacts>
       </div>
     );
   }
diff --git a/src/components/Card.css b/src/components/Card.css
new file mode 100644
index 000000000..3e9438376
--- /dev/null
+++ b/src/components/Card.css
@@ -0,0 +1,37 @@
+*{
+  margin: 0;
+  padding: 0;
+}
+
+.card{
+  width: 360px;
+  height: 200px;
+  border: 1x solid black;
+  display: flex;
+  flex-direction: row;
+  justify-items: flex-start;
+  align-content: center;
+  /* margin: 20px; */
+  margin: 0 auto;
+
+}
+
+.score{
+  display: flex;
+  flex-direction: column;
+  justify-items: flex-start;
+  margin-left: 20px;
+}
+
+.card h1{
+  font-size: 1.2em;
+} 
+.card h3{
+  font-size: .8em;
+  text-align: left;
+} 
+
+.card img{
+  width: 140px;
+} 
+
diff --git a/src/components/Card.js b/src/components/Card.js
new file mode 100644
index 000000000..645ebd08d
--- /dev/null
+++ b/src/components/Card.js
@@ -0,0 +1,18 @@
+import React from 'react'
+import './Card.css';
+
+const Card = (props) => {
+  return (
+    <li>
+      <div className="card">
+        <img src={props.pic} alt="" />
+        <div className="score">
+          <h1>{props.name}</h1>
+          <h3>{props.popular}</h3>
+        </div>
+      </div>
+    </li>
+  )
+}
+
+export default Card;
diff --git a/src/components/PopularContacts.js b/src/components/PopularContacts.js
new file mode 100644
index 000000000..f68e5ac32
--- /dev/null
+++ b/src/components/PopularContacts.js
@@ -0,0 +1,38 @@
+import React, { Component } from 'react'
+import Card from './Card'
+
+
+
+class PopularContacts extends Component {
+constructor(props){
+  super();
+  this.state = {
+    contacts : props.contactsArray.slice(0,5)
+  }
+}
+
+
+
+  render() {
+    return (
+      <ul>
+        {/* <li>
+        Picture Name Popularity
+        </li> */}
+      {
+      this.state.contacts.map ((oneContact,index) => {
+        return (
+          <Card key={index}
+          name={oneContact.name}
+          pic={oneContact.pictureUrl}
+          popular={oneContact.popularity}
+            />
+        )
+      })
+
+      }
+      </ul>
+    )
+  }
+}
+export default PopularContacts;
\ No newline at end of file