diff --git a/src/App.js b/src/App.js
index e7ca67f20..8803b6d9e 100755
--- a/src/App.js
+++ b/src/App.js
@@ -1,14 +1,80 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
+import IdCard from "./components/idCard";
+import Greetings from "./components/Greetings";
+import Random from "./components/Random";
+import BoxColor from "./components/BoxColor";
+import CreditCard from "./components/CreditCard";
+import "./components/css/app.css";
 
 class App extends Component {
   render() {
     return (
       <div className="App">
-        <h1>IdCard</h1>
-        {/* TODO: Use the IdCard component */}
+        <div>
+          <h1>IdCard</h1>
+          <IdCard
+            lastName="Doe"
+            firstName="John"
+            gender="male"
+            height={178}
+            birth={new Date("1992-07-14")}
+            picture="https://randomuser.me/api/portraits/men/44.jpg"
+          />
+
+          <IdCard
+            lastName="Delores "
+            firstName="Obrien"
+            gender="female"
+            height={172}
+            birth={new Date("1988-05-11")}
+            picture="https://randomuser.me/api/portraits/women/44.jpg"
+          />
+        </div>
 
         <h1>Greetings</h1>
-        {/* TODO: Use the Greetings component */}
+        <Greetings lang="es">Ludwig</Greetings>
+        <Greetings lang="fr">François</Greetings>
+
+        <h2>Random</h2>
+        <Random min={1} max={6} />
+        <Random min={1} max={100} />
+        <h2>BoxColor</h2>
+        <BoxColor r={255} g={0} b={0} />
+        <BoxColor r={128} g={255} b={0} />
+
+        <h2>CreditCard</h2>
+        <div className="creditCard">
+          <CreditCard
+            type="Visa"
+            number="0123456789018845"
+            expirationMonth={3}
+            expirationYear={2021}
+            bank="BNP"
+            owner="Maxence Bouret"
+            bgColor="#11aa99"
+            color="white"
+          />
+          <CreditCard
+            type="Master Card"
+            number="0123456789010995"
+            expirationMonth={3}
+            expirationYear={2021}
+            bank="N26"
+            owner="Maxence Bouret"
+            bgColor="#eeeeee"
+            color="#222222"
+          />
+          <CreditCard
+            type="Visa"
+            number="0123456789016984"
+            expirationMonth={12}
+            expirationYear={2019}
+            bank="Name of the Bank"
+            owner="Firstname Lastname"
+            bgColor="#ddbb55"
+            color="white"
+          />
+        </div>
       </div>
     );
   }
diff --git a/src/components/BoxColor.js b/src/components/BoxColor.js
new file mode 100644
index 000000000..b8a1b68e4
--- /dev/null
+++ b/src/components/BoxColor.js
@@ -0,0 +1,18 @@
+import React, { Component } from "react";
+
+class BoxColor extends Component {
+  render() {
+    const divStyle = {
+      background: `rgb(${this.props.r},${this.props.g},${this.props.b})`,
+      width: `300px`,
+      height: `50px`
+    };
+    return (
+      <div style={divStyle}>
+        rgb({this.props.r},{this.props.g},{this.props.b})
+      </div>
+    );
+  }
+}
+
+export default BoxColor;
diff --git a/src/components/CreditCard.js b/src/components/CreditCard.js
new file mode 100644
index 000000000..e64ee3b44
--- /dev/null
+++ b/src/components/CreditCard.js
@@ -0,0 +1,30 @@
+import React, { Component } from "react";
+
+class CreditCard extends Component {
+  render() {
+    const divStyle = {
+      background: this.props.bgColor,
+      color: this.props.color,
+      width: `300px`,
+      height: `170px`
+    };
+    const hideNumber = number => {
+      return "**** **** **** " + number.slice(-4);
+    };
+
+    return (
+      <div style={divStyle}>
+        <p>{this.props.type}</p>
+        <p>{hideNumber(this.props.number)}</p>
+        <p>
+          Expires {this.props.expirationMonth}
+          <span>/{this.props.expirationYear}</span>
+          <span> {this.props.bank}</span>
+        </p>
+        <p>{this.props.owner}</p>
+      </div>
+    );
+  }
+}
+
+export default CreditCard;
diff --git a/src/components/Greetings.js b/src/components/Greetings.js
new file mode 100644
index 000000000..c2c3a520a
--- /dev/null
+++ b/src/components/Greetings.js
@@ -0,0 +1,23 @@
+import React, { Component } from "react";
+
+class Greetings extends Component {
+  render() {
+    return (
+      <div>
+        {this.props.lang === "en" ? (
+          <span>Hello {this.props.children}</span>
+        ) : null}
+        {this.props.lang === "es" ? (
+          <span>Hola {this.props.children}</span>
+        ) : null}
+        {this.props.lang === "de" ? (
+          <span>Hallo {this.props.children}</span>
+        ) : null}
+        {this.props.lang === "fr" ? (
+          <span>Bonjour {this.props.children}</span>
+        ) : null}
+      </div>
+    );
+  }
+}
+export default Greetings;
diff --git a/src/components/Random.js b/src/components/Random.js
new file mode 100644
index 000000000..ec4564fcd
--- /dev/null
+++ b/src/components/Random.js
@@ -0,0 +1,16 @@
+import React, { Component } from "react";
+
+class Random extends Component {
+  render() {
+    return (
+      <div>
+        Random value beetween {this.props.min} and {this.props.max} =>{" "}
+        {Math.floor(Math.random() * (this.props.max - this.props.min + 1)) +
+          this.props.min}
+        ;
+      </div>
+    );
+  }
+}
+
+export default Random;
diff --git a/src/components/css/app.css b/src/components/css/app.css
new file mode 100644
index 000000000..159cc9e26
--- /dev/null
+++ b/src/components/css/app.css
@@ -0,0 +1,4 @@
+.creditCard {
+  display: flex;
+  justify-content: space-around;
+}
diff --git a/src/components/css/idCard.css b/src/components/css/idCard.css
new file mode 100644
index 000000000..670b55f98
--- /dev/null
+++ b/src/components/css/idCard.css
@@ -0,0 +1,10 @@
+.card {
+  display: flex;
+  flex-direction: row;
+  border: solid 1px rgb(0, 0, 0);
+}
+
+.cardText {
+  display: block;
+  flex-direction: column;
+}
diff --git a/src/components/idCard.js b/src/components/idCard.js
new file mode 100644
index 000000000..97f9cdc51
--- /dev/null
+++ b/src/components/idCard.js
@@ -0,0 +1,36 @@
+import React, { Component } from "react";
+import "./css/idCard.css";
+
+class IdCard extends Component {
+  render() {
+    return (
+      <div className="card">
+        <img src={this.props.picture} alt="cardImage" />
+        <div className="cardText">
+          <p>{this.props.lastName}</p>
+          <p>{this.props.firstName}</p>
+          <p>{this.props.gender}</p>
+          <p>{this.props.height}</p>
+          <p>{this.props.birth.toISOString()}</p>
+        </div>
+      </div>
+    );
+  }
+}
+export default IdCard;
+
+// const IdCard = props => {
+//   console.log(props);
+//   return (
+//     <div className="card">
+//       <img src={props.picture} alt="cardImage" />
+//       <div className="">
+//         <p>{props.lastName}</p>
+//         <p>{props.firstName}</p>
+//         <p>{props.gender}</p>
+//         <p>{props.height}</p>
+//         <p>{props.birth}</p>
+//       </div>
+//     </div>
+//   );
+// };