diff --git a/.env b/.env
new file mode 100644
index 000000000..7d910f148
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 47b084a03..00e4b082b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12521,14 +12521,13 @@
       }
     },
     "react": {
-      "version": "16.8.6",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.8.6.tgz",
-      "integrity": "sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==",
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.13.1.tgz",
+      "integrity": "sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2",
-        "scheduler": "^0.13.6"
+        "prop-types": "^15.6.2"
       }
     },
     "react-app-polyfill": {
@@ -12673,14 +12672,14 @@
       }
     },
     "react-dom": {
-      "version": "16.8.6",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.6.tgz",
-      "integrity": "sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==",
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz",
+      "integrity": "sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
         "prop-types": "^15.6.2",
-        "scheduler": "^0.13.6"
+        "scheduler": "^0.19.1"
       }
     },
     "react-error-overlay": {
@@ -13763,9 +13762,9 @@
       "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
     },
     "scheduler": {
-      "version": "0.13.6",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.6.tgz",
-      "integrity": "sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==",
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
+      "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1"
diff --git a/package.json b/package.json
index 1c2e51d9b..58c5db01c 100644
--- a/package.json
+++ b/package.json
@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "react": "^16.8.2",
-    "react-dom": "^16.8.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "react-scripts": "2.1.5"
   },
   "scripts": {
diff --git a/src/App.js b/src/App.js
index e7ca67f20..f938a4a72 100755
--- a/src/App.js
+++ b/src/App.js
@@ -1,14 +1,71 @@
-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";
 
 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 */}
+        <Greetings lang="de">Ludwig</Greetings>
+        <Greetings lang="fr">François</Greetings>
+        <h1>Random</h1>
+        <Random min={1} max={6} />
+        <Random min={1} max={100} />
+        <h1>BoxColor</h1>
+        <BoxColor r={255} g={0} b={0} />
+        <BoxColor r={128} g={255} b={0} />
+        <h1>CreditCard</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="Firstname Lastname"
+          bgColor="#ddbb55"
+          color="white"
+        />
       </div>
     );
   }
diff --git a/src/components/BoxColor.css b/src/components/BoxColor.css
new file mode 100644
index 000000000..dbd5b3923
--- /dev/null
+++ b/src/components/BoxColor.css
@@ -0,0 +1,7 @@
+.BoxColor {
+  display: flex;
+  border-style: solid;
+  align-items: center;
+  margin: 5px;
+  justify-content: center;
+}
diff --git a/src/components/BoxColor.js b/src/components/BoxColor.js
new file mode 100644
index 000000000..cc5a32e50
--- /dev/null
+++ b/src/components/BoxColor.js
@@ -0,0 +1,16 @@
+import React from "react";
+import "./BoxColor.css";
+
+// option 1
+const BoxColor = props => {
+  // const { r, g, b } = props;
+  const rgb = `rgb(${props.r},${props.g},${props.b})`;
+
+  return (
+    <div className="BoxColor" style={{ backgroundColor: rgb }}>
+      rgb({props.r},{props.g},{props.b})
+    </div>
+  );
+};
+
+export default BoxColor;
diff --git a/src/components/CreditCard.css b/src/components/CreditCard.css
new file mode 100644
index 000000000..000affcc0
--- /dev/null
+++ b/src/components/CreditCard.css
@@ -0,0 +1,12 @@
+.CreditCard {
+  display: flex;
+  border-style: solid;
+  align-items: center;
+  margin: 5px;
+  justify-content: space-between;
+}
+
+.CreditCard-pic {
+  border-radius: 8px;
+  max-width: 10%;
+}
diff --git a/src/components/CreditCard.js b/src/components/CreditCard.js
new file mode 100644
index 000000000..94643e3dc
--- /dev/null
+++ b/src/components/CreditCard.js
@@ -0,0 +1,41 @@
+import React from "react";
+import "./CreditCard.css";
+
+// option 1
+const CreditCard = props => {
+  const {
+    type,
+    number,
+    expirationMonth,
+    expirationYear,
+    bank,
+    owner,
+    bgColor,
+    color
+  } = props;
+  return (
+    <div
+      className="CreditCard"
+      style={{ backgroundColor: bgColor, color: color }}
+    >
+      <section>
+        <p>•••• •••• •••• {number.slice(12, 16)}</p>
+      </section>
+      <section>
+        {expirationMonth < 10 ? `0${expirationMonth}` : `${expirationMonth}`}
+        {expirationYear.toString().slice(2, 4)}
+      </section>
+      <section>{bank}</section>
+      <section>{owner}</section>
+      <section>
+        <img
+          className="CreditCard-pic"
+          src={type === "Visa" ? "/img/visa.png" : "/img/master-card.svg"}
+          alt=""
+        />
+      </section>
+    </div>
+  );
+};
+
+export default CreditCard;
diff --git a/src/components/Greetings.css b/src/components/Greetings.css
new file mode 100644
index 000000000..f7a6adac2
--- /dev/null
+++ b/src/components/Greetings.css
@@ -0,0 +1,6 @@
+.Greetings {
+  display: flex;
+  border-style: solid;
+  align-items: center;
+  margin: 5px;
+}
diff --git a/src/components/Greetings.js b/src/components/Greetings.js
new file mode 100644
index 000000000..bc0dc25cf
--- /dev/null
+++ b/src/components/Greetings.js
@@ -0,0 +1,17 @@
+import React, { Component } from "react";
+import "./Greetings.css";
+
+// option 1
+const Greetings = props => {
+  return (
+    <div className="Greetings">
+      {props.lang === "de" ? (
+        <p>Hallo {props.children}</p>
+      ) : (
+        <p>Bonjour {props.children}</p>
+      )}
+    </div>
+  );
+};
+
+export default Greetings;
diff --git a/src/components/IdCard.css b/src/components/IdCard.css
new file mode 100644
index 000000000..d7aae6e66
--- /dev/null
+++ b/src/components/IdCard.css
@@ -0,0 +1,11 @@
+.IdCard {
+  display: flex;
+  border-style: solid;
+  align-items: center;
+  margin: 5px;
+}
+
+.IdCard-pic {
+  margin-left: 10px;
+  margin-right: 10px;
+}
diff --git a/src/components/IdCard.js b/src/components/IdCard.js
new file mode 100644
index 000000000..1d3ba0eb0
--- /dev/null
+++ b/src/components/IdCard.js
@@ -0,0 +1,34 @@
+import React, { Component } from "react";
+import "./IdCard.css";
+
+// option 1
+const IdCard = props => {
+  return (
+    <div className="IdCard">
+      <div className="IdCard-pic">
+        <img src={props.picture} alt=""></img>
+      </div>
+      <div>
+        <p>{props.lastName}</p>
+        <p>{props.firstName}</p>
+        <p>{props.gender}</p>
+        <p>{props.height}</p>
+        <p>{props.birth.toString()}</p>
+      </div>
+    </div>
+  );
+};
+
+// option 2
+// function IdCard(props) {
+//   return <h1>Hello, {props.lastName}</h1>;
+// }
+
+// option 3
+// class IdCard extends React.Component {
+//   render() {
+//     return <h1>Hello, {this.props.lastName}</h1>;
+//   }
+// }
+
+export default IdCard;
diff --git a/src/components/Random.css b/src/components/Random.css
new file mode 100644
index 000000000..657eadfb3
--- /dev/null
+++ b/src/components/Random.css
@@ -0,0 +1,6 @@
+.Random {
+  display: flex;
+  border-style: solid;
+  align-items: center;
+  margin: 5px;
+}
diff --git a/src/components/Random.js b/src/components/Random.js
new file mode 100644
index 000000000..3383f456b
--- /dev/null
+++ b/src/components/Random.js
@@ -0,0 +1,17 @@
+import React, { Component } from "react";
+import "./Random.css";
+
+function rand(min, max) {
+  return Math.floor(min + (max - min + 1) * Math.random());
+}
+// option 1
+const Random = props => {
+  return (
+    <div className="Random">
+      Random value between {props.min} and {props.max} =>{" "}
+      {rand(props.min, props.max)}
+    </div>
+  );
+};
+
+export default Random;