diff --git a/src/App.js b/src/App.js
index e7ca67f20..a7b138195 100755
--- a/src/App.js
+++ b/src/App.js
@@ -1,14 +1,124 @@
 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 Rating from './components/Rating';
 
 class App extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      dataIdCard: [
+        {
+        lastName: 'Doe',
+        firstName: 'John',
+        gender: 'male',
+        height: 178,
+        birth: `${new Date("1992-07-14").toString().slice(0, 16)}`,
+        picture: "https://randomuser.me/api/portraits/men/44.jpg"
+        },
+        {
+        lastName: 'Delores ',
+        firstName: 'Obrien',
+        gender: 'female',
+        height: 172,
+        birth: `${new Date("1988-05-11").toString().slice(0, 16)}`,
+        picture: "https://randomuser.me/api/portraits/women/44.jpg"
+      }],
+      dataGreetings: [
+        {
+        lang: "de",
+        name: "Ludwig"
+        },
+        {
+        lang: "fr",
+        name: "François"
+        }],
+      dataRandom: [
+        {
+        max: 1,
+        min: 6
+        },
+        {
+        max: 1,
+        min: 100
+        }],
+      dataBoxColor: [
+        {
+        r: 255,
+        g: 0,
+        b: 0
+        },
+        {
+        r: 128,
+        g: 255,
+        b: 0
+      }],
+      dataCreditCard: [
+        {
+        ype: "Visa",
+        number: "0123456789018845",
+        expirationMonth: 3,
+        expirationYear: 2021,
+        bank: "BNP",
+        owner: "Maxence Bouret",
+        bgColor: "#11aa99",
+        color: "white"
+        },
+        {
+          ype: "Master Card",
+          number: "0123456789010995",
+          expirationMonth: 3,
+          expirationYear: 2021,
+          bank: "N26",
+          owner: "Maxence Bouret",
+          bgColor: "#eeeeee",
+          color: "222222"
+          },
+          {
+          ype: "Visa",
+          number: "0123456789016984",
+          expirationMonth: 12,
+          expirationYear: 2019,
+          bank: "Name of the Bank",
+          owner: "Firstname Lastname",
+          bgColor: "#ddbb55",
+          color: "white"
+          },
+        ],
+        dataRating: [0, 1.49, 1.5, 3, 4, 5]
+    };
+  }
+
   render() {
+    const {dataIdCard, dataGreetings, dataRandom, dataBoxColor, dataCreditCard, dataRating} = this.state;
     return (
       <div className="App">
         <h1>IdCard</h1>
+        <IdCard people={dataIdCard} />
         {/* TODO: Use the IdCard component */}
 
         <h1>Greetings</h1>
+        <Greetings gree={dataGreetings} />
         {/* TODO: Use the Greetings component */}
+
+        <h1>Random</h1>
+        <Random randomarray={dataRandom} />
+        {/* TODO: Use the Random component */}
+
+        <h1>BoxColor</h1>
+        <BoxColor boxcolorarray={dataBoxColor} />
+        {/* TODO: Use the BoxColor component */}
+       
+        <h1>CreditCard</h1>
+        <CreditCard creditCardrarray={dataCreditCard} />
+        {/* TODO: Use the CreditCard component */}
+        
+        <h1>Rating</h1>
+        <Rating Ratingarray={dataRating} />
+        {/* TODO: Use the Rating component */}
       </div>
     );
   }
diff --git a/src/components/BoxColor.js b/src/components/BoxColor.js
new file mode 100644
index 000000000..1afa0aeff
--- /dev/null
+++ b/src/components/BoxColor.js
@@ -0,0 +1,15 @@
+import React from 'react'
+
+export default function BoxColor(props) {
+  return (
+    <>
+      {props.boxcolorarray.map((color, index) => {
+        return (
+          <div key={index}>
+            <p>rgb({color.r},{color.g},{color.b})</p>
+          </div>
+        )
+      })}
+    </>
+  )
+}
diff --git a/src/components/CreditCard.js b/src/components/CreditCard.js
new file mode 100644
index 000000000..916d86ea4
--- /dev/null
+++ b/src/components/CreditCard.js
@@ -0,0 +1,18 @@
+import React from 'react'
+
+export default function CreditCard(params) {
+  return (
+    <>
+      {params.creditCardrarray.map((card,index) => {
+        return (
+          <div key={index}>
+            <p>{card.ype}</p>
+            <h3>{card.number}</h3>
+            <p>Expires {card.expirationMonth}/{card.expirationYear} {card.bank}</p>
+            <p>{card.owner}</p>
+          </div>
+        )
+      })}
+    </>
+  )
+}
diff --git a/src/components/Greetings.js b/src/components/Greetings.js
new file mode 100644
index 000000000..f41a7da48
--- /dev/null
+++ b/src/components/Greetings.js
@@ -0,0 +1,26 @@
+import React from 'react'
+
+export default function Greetings(props) {
+  return (
+    <>
+      {props.gree.map((element, index) => {
+        return (
+          <div key={index}>
+            {element.lang === 'de' &&
+              <p>Hallo {element.name}</p>
+            }
+            {element.lang === 'fr' &&
+              <p>Bonjour {element.name}</p>
+            }
+            {element.lang === 'en' &&
+              <p>Hello {element.name}</p>
+            }
+            {element.lang === 'es' &&
+              <p>Hola {element.name}</p>
+            }
+          </div>
+        )
+      })}
+    </>
+  )
+}
\ No newline at end of file
diff --git a/src/components/IdCard.js b/src/components/IdCard.js
new file mode 100644
index 000000000..05ade5cd4
--- /dev/null
+++ b/src/components/IdCard.js
@@ -0,0 +1,21 @@
+import React from 'react'
+
+export default function IdCard(props) {
+  return (
+    <>
+      {props.people.map((element, index) => {
+        return (
+          <div key={index}>
+            <img src={element.picture} alt=""/>
+            <p><strong>First name: </strong>{element.firstName}</p>
+            <p><strong>Last name: </strong>{element.lastName}</p>
+            <p><strong>Gender: </strong>{element.gender}</p>
+            <p><strong>Height: </strong>{element.height/100}m</p>
+            <p>{element.birth}</p>
+          </div>
+        )
+      })}
+    </>
+  )
+}
+
diff --git a/src/components/Random.js b/src/components/Random.js
new file mode 100644
index 000000000..29931f124
--- /dev/null
+++ b/src/components/Random.js
@@ -0,0 +1,15 @@
+import React from 'react'
+
+export default function Random(props) {
+  return (
+    <>
+    {props.randomarray.map((elems, index) => {
+      return (
+        <div key={index}>
+          <p>Random value between {elems.min} and {elems.max} => {Math.floor((Math.random()*(elems.max-elems.min) + elems.min))}</p>
+        </div>
+      )
+    })}
+    </>
+  )
+}
diff --git a/src/components/Rating.js b/src/components/Rating.js
new file mode 100644
index 000000000..fdf01a542
--- /dev/null
+++ b/src/components/Rating.js
@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function Rating() {
+  return (
+    <div>
+      
+    </div>
+  )
+}