diff --git a/package-lock.json b/package-lock.json
index 679a99b5a..a7d46a6c7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2558,6 +2558,11 @@
       "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz",
       "integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug="
     },
+    "bulma": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.7.4.tgz",
+      "integrity": "sha512-krG2rP6eAX1WE0sf6O0SC/FUVSOBX4m1PBC2+GKLpb2pX0qanaDqcv9U2nu75egFrsHkI0zdWYuk/oGwoszVWg=="
+    },
     "bytes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
diff --git a/package.json b/package.json
index 5fc4fc057..9829b9559 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "bulma": "^0.7.4",
     "react": "^16.8.1",
     "react-dom": "^16.8.1",
     "react-scripts": "2.1.5"
diff --git a/src/App.js b/src/App.js
index 7e261ca47..61dc41a2f 100755
--- a/src/App.js
+++ b/src/App.js
@@ -1,25 +1,83 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
 import './App.css';
+import Ironcontacts from './components/Ironcontacts';
+import contacts from './data/contacts.json';
+import Titles from './components/Titles';
+ 
+
 
 class App extends Component {
+
+  //Definir estado actuaql
+  state = {
+    arrayContacts : contacts.slice(0,5),
+  }
+
+  // todo lq eu renderizamos de Ironcontacts.js
+  renderList(){
+    return this.state.arrayContacts.map((contact, index) => {
+      return <Ironcontacts 
+                  key={`id-${index}`} 
+                  name={contact.name} 
+                  pictureUrl={contact.pictureUrl} 
+                  popularity={contact.popularity}
+                  index={index}
+                  deleteHandler={this.deleteContact} />
+    })
+  }
+
+  addRandom = () => {
+    const randomContact = contacts[Math.floor(Math.random() * contacts.length)];
+    // estado que queremos crear    ... Array actual
+    this.setState({
+      arrayContacts:[...this.state.arrayContacts, randomContact]
+    })
+  }
+  // Ordenar por nombre utlizando sort
+  sortName = () => {
+    this.setState({
+      arrayContacts: this.state.arrayContacts.sort(function(a, b) {
+        if (a.name < b.name) {
+          return -1;
+        }
+        if (a.name > b.name) {
+          return 1;
+        }
+        return 0;
+      })
+        
+    })
+  }
+  // ordenaar por valor utlizando sort
+  sortPopularity = () => {
+    this.setState({
+      arrayContacts: this.state.arrayContacts.sort(function(a, b) {
+        return b.popularity - a.popularity;
+      })
+        
+    })
+  }
+  // Eliminar pasando como parametro el contact del array y luego actualizamos estado
+  deleteContact = (contact) => {
+    let { arrayContacts } = this.state
+    arrayContacts.splice(contact, 1)
+    this.setState({
+      arrayContacts
+    })
+  }
+  
+
+
+  // Rendetizamos todo
   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>
+      <div> 
+        <button onClick={this.addRandom}>Random</button>
+        <button onClick={this.sortName}>Sort Name</button>
+        <button onClick={this.sortPopularity}>Sort Popularity</button>
+
+        <Titles />
+        {this.renderList()}      
       </div>
     );
   }
diff --git a/src/components/Ironcontacts.js b/src/components/Ironcontacts.js
new file mode 100644
index 000000000..e37349795
--- /dev/null
+++ b/src/components/Ironcontacts.js
@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+
+
+class Ironcontacts extends Component {
+  render() {
+    // Guardamos en una const las props que biene del App.js justamente del renderList()
+    const {deleteHandler, index, name, popularity, pictureUrl} = this.props;
+    return (
+      <div class="containerIroncontacts">
+        <img src={pictureUrl} alt="pic"></img>
+        <p>{name}</p>
+        <p>{popularity}</p>
+        <button onClick={() => deleteHandler(index)}>Delete</button>
+      </div>
+    );
+  }
+}
+
+export default Ironcontacts;
\ No newline at end of file
diff --git a/src/components/Titles.js b/src/components/Titles.js
new file mode 100644
index 000000000..d96ad567f
--- /dev/null
+++ b/src/components/Titles.js
@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+
+class Titles extends Component {
+  render() {
+    return (
+      <div>
+        <h1>Iron Contacts</h1>
+        <div class="containerIroncontacts">
+        <h2>Picture</h2>
+        <h2>Name</h2>
+        <h2>Pupularity</h2>
+        </div>
+        
+      </div>
+    );
+  }
+}
+
+export default Titles;
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index cee5f348f..c22b6f008 100755
--- a/src/index.css
+++ b/src/index.css
@@ -12,3 +12,17 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+.containerIroncontacts{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+
+}
+
+.containerIroncontacts img{
+  width: 100px;
+  height: 150px;
+  margin-bottom: 10px;
+
+}
diff --git a/src/index.js b/src/index.js
index 0c5e75da1..f0a8e6d8b 100755
--- a/src/index.js
+++ b/src/index.js
@@ -4,6 +4,7 @@ import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 
+
 ReactDOM.render(<App />, document.getElementById('root'));
 
 // If you want your app to work offline and load faster, you can change