diff --git a/src/App.js b/src/App.js
index e7ca67f20..c5e4474a4 100755
--- a/src/App.js
+++ b/src/App.js
@@ -1,14 +1,84 @@
 import React, { Component } from 'react';
+import { IdCard } from './data/components/IdCard';
+import { Grettings } from './data/components/Grettings';
+import { Random } from './data/components/Random';
+import { Color } from './data/components/Color';
+import { CreditCard } from './data/components/CreditCard';
+import { Rating } from './data/components/Rating';
+
+
+
 
 class App extends Component {
+
   render() {
     return (
       <div className="App">
         <h1>IdCard</h1>
-        {/* TODO: Use the IdCard component */}
+       <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"
+          />
         <h1>Greetings</h1>
-        {/* TODO: Use the Greetings component */}
+        <Grettings lang="de">Hallo</Grettings>
+        <Grettings lang="fr">François</Grettings>
+
+        <h1>random</h1>
+        <Random min={1} max={6}/>
+        <Random min={1} max={100}/>
+
+        <h1>BOX color</h1>
+        <Color r={255} g={0} b={0} />
+        <Color r={128} g={255} b={0} />
+        <h1>CREDIT CARD</h1>
+        <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="Noemi Alonso"
+                bgColor="#ddbb55"
+                color="white" />
+
+               <h1>Ratings</h1> 
+                 <Rating>0</Rating>
+                <Rating>1.49</Rating>
+                <Rating>1.5</Rating>
+                <Rating>3</Rating>
+                <Rating>4</Rating>
+                <Rating>5</Rating>
       </div>
     );
   }
diff --git a/src/data/components/Color.js b/src/data/components/Color.js
new file mode 100644
index 000000000..5761ea4b9
--- /dev/null
+++ b/src/data/components/Color.js
@@ -0,0 +1,16 @@
+import React from 'react'
+
+export const Color = (props) => {
+   
+ const divStyle={
+     backgroundColor : `rgb(${props.r}, ${props.g}, ${props.b})`
+
+
+ }
+
+    return (
+        <div style={divStyle}>
+        <h2> {divStyle.backgroundColor}</h2>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/data/components/CreditCard.js b/src/data/components/CreditCard.js
new file mode 100644
index 000000000..49fe3ac9a
--- /dev/null
+++ b/src/data/components/CreditCard.js
@@ -0,0 +1,24 @@
+import React from 'react'
+
+export const CreditCard = (props) => {
+    const divStyle={
+        backgroundColor : props.bgColor,
+        color : props.color,
+        width: "30%",
+        float: "left",
+        margin: "10px"
+   
+    }
+
+    const hide = props.number.replace(/\d(?=\d{4})/g, "*")
+    const year= props.expirationYear.toString().slice(2,4);
+    return (
+        <div style={divStyle}>
+            <p>{props.type}</p>
+            <h3>{hide}</h3>
+            <p>{props.expirationMonth}/{year}</p>
+            <p>{props.bank}</p>
+            <h5> {props.owner}</h5>
+        </div>
+    )
+}
diff --git a/src/data/components/Grettings.js b/src/data/components/Grettings.js
new file mode 100644
index 000000000..df79f3574
--- /dev/null
+++ b/src/data/components/Grettings.js
@@ -0,0 +1,17 @@
+import React from 'react'
+
+export const Grettings = (props) => {
+
+    const lang={
+        de:"Hallo",
+        en:"Hi",
+        es:"hola",
+        fr:'Bonjoour'
+    }
+
+    return (
+        <div>
+                <h1>{lang[props.lang]} {props.children}</h1>
+        </div>
+    )
+}
diff --git a/src/data/components/IdCard.js b/src/data/components/IdCard.js
new file mode 100644
index 000000000..9273769cb
--- /dev/null
+++ b/src/data/components/IdCard.js
@@ -0,0 +1,16 @@
+import React from 'react'
+export const IdCard = (props) => {
+    let birth= JSON.stringify(props.birth)
+    return (
+        <div>
+                <img src={props.picture} alt=""></img>
+                <p>{props.firstName}</p>
+                <p>{props.lastName}</p>
+                <p>{props.gender}</p>
+                <p>{props.height}</p>
+                <p>{birth}</p>
+
+            
+        </div>
+    )
+}
diff --git a/src/data/components/Random.js b/src/data/components/Random.js
new file mode 100644
index 000000000..fc408aa16
--- /dev/null
+++ b/src/data/components/Random.js
@@ -0,0 +1,11 @@
+import React from 'react'
+
+export const Random = (props) => {
+    const result = Math.floor(Math.random()*(props.max - props.min)+props.min)
+
+    return (
+        <div>
+            <p>Random value between {props.min} and {props.max} => {result}</p>
+        </div>
+    )
+}
diff --git a/src/data/components/Rating.js b/src/data/components/Rating.js
new file mode 100644
index 000000000..132a015bf
--- /dev/null
+++ b/src/data/components/Rating.js
@@ -0,0 +1,14 @@
+import React from 'react'
+
+export const Rating = (props) => {
+        let stars = '';
+        for (let i=0; i < 5; i++) {
+           (Math.round(props.children) <= i) ? stars += '☆' : stars += '★'
+        }
+        return (
+            <div>
+                <p>{stars}</p>
+            </div>
+        )
+    }
+