diff --git a/src/App.js b/src/App.js
index e7ca67f20..6b6c1f74a 100755
--- a/src/App.js
+++ b/src/App.js
@@ -1,14 +1,93 @@
 import React, { Component } from 'react';
+import IdCard from './Components/IdCard';
+import Greetings from './Components/Greetings'
+import Random from './Components/Random.js';
+import BoxColor from './Components/BoxColor';
+import CreditCard from './Components/CreditCard';
+import Rating from './Components/Rating';
 
 class App extends Component {
   render() {
+  
     return (
       <div className="App">
-        <h1>IdCard</h1>
-        {/* TODO: Use the IdCard component */}
 
+       <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='Perez'
+       firstName='Paquita'
+       gender='female'
+       height={128}
+       birth={new Date("1900-07-14")}
+       picture="https://randomuser.me/api/portraits/men/44.jpg"
+       />
+       
         <h1>Greetings</h1>
-        {/* TODO: Use the Greetings component */}
+
+        <Greetings lang="de">Ludwig</Greetings>
+        <Greetings lang="fr">François</Greetings>
+
+        <div>
+          <h1>Random</h1>
+          <Random min={1} max={6}></Random>
+          <Random min={1} max={100}></Random>
+        </div>
+
+        <div>
+          <h1>Boxcolor</h1>
+          <BoxColor r={255} g={0} b={0} />
+          <BoxColor r={128} g={255} b={0} />
+        </div>
+        <div>
+          <h1>CreditCard</h1>
+          <CreditCard 
+            type="Visa"
+            number="0123456789018845"
+            expirationMonth={3}
+            expirationYear={21}
+            bank="BNP"
+            owner="Maxence Bouret"
+            bgColor="#11aa99"
+            color="white" />
+            <CreditCard 
+            type="Master Card"
+            number="0123456789010995"
+            expirationMonth={3}
+            expirationYear={21}
+            bank="N26"
+            owner="Maxence Bouret"
+            bgColor="#eeeeee"
+            color="#222222" />
+            <CreditCard 
+            type="Visa"
+            number="0123456789016984"
+            expirationMonth={12}
+            expirationYear={19}
+            bank="Name of the Bank"
+            owner="Firstname Lastname"
+            bgColor="#ddbb55"
+            color="white" />
+
+        </div>
+
+        <div>
+          <h1>Rating</h1>
+            <Rating>0</Rating>
+            <Rating>1.49</Rating>
+            <Rating>1.5</Rating>
+            <Rating>3</Rating>
+            <Rating>4</Rating>
+            <Rating>5</Rating>
+        </div>
+
       </div>
     );
   }
diff --git a/src/Components/BoxColor.js b/src/Components/BoxColor.js
new file mode 100644
index 000000000..63ae2366b
--- /dev/null
+++ b/src/Components/BoxColor.js
@@ -0,0 +1,13 @@
+import React from 'react';
+
+
+ function BoxColor( props )  {
+  var a = `rgb( ${props.r}, ${props.g}, ${props.b} )`
+  var divstyle = {backgroundColor: a}
+  return (
+    <div style= {divstyle}>
+      <p> {a} </p>
+    </div>
+  )
+}
+export default BoxColor;
diff --git a/src/Components/CreditCard.js b/src/Components/CreditCard.js
new file mode 100644
index 000000000..5eae1f70e
--- /dev/null
+++ b/src/Components/CreditCard.js
@@ -0,0 +1,38 @@
+import React from 'react'
+
+function CreditCard(props) {
+
+  function esconderNum (){
+    let maskString = '';
+    for (var i = 0; i < props.number.length; i++){
+      if(i < props.number.length - 4){
+        maskString = maskString  + '*';
+        }
+        else {
+          maskString = maskString + props.number.charAt(i)
+        }
+      }
+      return maskString
+    }
+  
+
+
+
+  return (
+    <div >
+      <p>type: {props.type}</p>
+
+      <p>number: {esconderNum()}</p>
+      <p>expiration: {props.expirationMonth}/{props.expirationYear}</p>
+
+
+      <p>bank: {props.bank}</p>
+      <p>owner: {props.owner}</p>
+
+      <p>bgColors: {props.bgColors}</p>
+      <p>color: {props.color}</p>
+    </div>
+  )
+}
+
+export default CreditCard
diff --git a/src/Components/Greetings.js b/src/Components/Greetings.js
new file mode 100644
index 000000000..0fc35e147
--- /dev/null
+++ b/src/Components/Greetings.js
@@ -0,0 +1,22 @@
+import React from 'react'
+
+function Greetings(props) {
+  const languaje =() =>{
+  if(props.lang === "de") {
+    return 'Hallo'
+  }
+  else{
+    return 'Bonjour'
+  }
+}
+  return (
+    <div>
+      
+      <p>{languaje()} {props.children}</p>
+
+    </div>
+  )
+}
+
+
+export default Greetings
diff --git a/src/Components/IdCard.js b/src/Components/IdCard.js
new file mode 100644
index 000000000..8b78afedf
--- /dev/null
+++ b/src/Components/IdCard.js
@@ -0,0 +1,16 @@
+
+import React from 'react'
+
+export default function IdCard(props) {
+  return (
+    <div>
+      <p>firstName: {props.firstName}</p>
+      <p>lastName: {props.lastName}</p>
+      <p>gender: {props.gender}</p>
+      <p>height: {props.height}</p>
+      <p>birth: {props.firstbirth}</p>
+      <p>picture: {props.picture}</p>
+
+    </div>
+  )
+}
diff --git a/src/Components/Random.js b/src/Components/Random.js
new file mode 100644
index 000000000..47a40c14b
--- /dev/null
+++ b/src/Components/Random.js
@@ -0,0 +1,16 @@
+import React from 'react'
+
+function Random(props) {
+  const random = () => {
+    return Math.round(Math.random()*(props.max - props.min) + props.min);
+    
+ }
+  return (
+   
+    <div>
+     <p>Random value between {props.min} and{props.max} -> {random()}</p>
+    </div>
+  )
+}
+
+export default Random;
diff --git a/src/Components/Rating.js b/src/Components/Rating.js
new file mode 100644
index 000000000..733471a1e
--- /dev/null
+++ b/src/Components/Rating.js
@@ -0,0 +1,41 @@
+import React from 'react'
+
+function Rating(props) {
+  const star = Math.floor(props.child);
+
+  // let rating = '';
+
+  // switch (star) {
+   
+  //   case 0: 
+  //   rating = '☆☆☆☆☆'; 
+  //   break;
+  //   case 1: 
+  //   rating = '★☆☆☆☆'; 
+  //   break;
+  //   case 2: 
+  //   rating = '★★☆☆☆'; 
+  //   break;
+  //   case 3: 
+  //   rating = '★★★☆☆'; 
+  //   break;
+  //   case 4: 
+  //   rating = '★★★★☆'; 
+  //   break;
+  //   case 5: 
+  //   rating = '★★★★★'; 
+  //   break;
+  //   default: 
+  //   break;
+  // }
+if(star === 1){
+  return '☆☆☆☆☆'
+}
+  
+  return (
+    <div>
+      <p>{star}</p>
+    </div>
+  )
+}
+export default Rating;
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index cee5f348f..85ce772c0 100755
--- a/src/index.css
+++ b/src/index.css
@@ -11,4 +11,5 @@ body {
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
+    
 }