diff --git a/package-lock.json b/package-lock.json
index 1349153..d79848d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -61,6 +61,7 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.21.8.tgz",
       "integrity": "sha512-YeM22Sondbo523Sz0+CirSPnbj9bG3P0CdHcBZdqUuaeOaYEFbOLoGU7lebvGP6P5J/WE9wOn7u7C4J9HvS1xQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.21.4",
@@ -964,6 +965,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
       "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
       "dev": true,
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1129,6 +1131,7 @@
           "url": "https://tidelift.com/funding/github/npm/browserslist"
         }
       ],
+      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001449",
         "electron-to-chromium": "^1.4.284",
@@ -1450,6 +1453,7 @@
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.41.0.tgz",
       "integrity": "sha512-WQDQpzGBOP5IrXPo4Hc0814r4/v2rrIsB0rhT7jtunIalgg6gYXWhRMOejVO8yH21T/FGaxjmFjBMNqcIlmH1Q==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.4.0",
@@ -2837,6 +2841,7 @@
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
       "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -3277,6 +3282,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-4.3.8.tgz",
       "integrity": "sha512-uYB8PwN7hbMrf4j1xzGDk/lqjsZvCDbt/JC5dyfxc19Pg8kRm14LinK/uq+HSLNswZEoKmweGdtpbnxRtrAXiQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.17.5",
         "postcss": "^8.4.23",
@@ -3436,6 +3442,7 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.21.8.tgz",
       "integrity": "sha512-YeM22Sondbo523Sz0+CirSPnbj9bG3P0CdHcBZdqUuaeOaYEFbOLoGU7lebvGP6P5J/WE9wOn7u7C4J9HvS1xQ==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.21.4",
@@ -4004,7 +4011,8 @@
       "version": "8.8.2",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
       "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "acorn-jsx": {
       "version": "5.3.2",
@@ -4121,6 +4129,7 @@
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.5.tgz",
       "integrity": "sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==",
       "dev": true,
+      "peer": true,
       "requires": {
         "caniuse-lite": "^1.0.30001449",
         "electron-to-chromium": "^1.4.284",
@@ -4365,6 +4374,7 @@
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.41.0.tgz",
       "integrity": "sha512-WQDQpzGBOP5IrXPo4Hc0814r4/v2rrIsB0rhT7jtunIalgg6gYXWhRMOejVO8yH21T/FGaxjmFjBMNqcIlmH1Q==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.4.0",
@@ -5342,6 +5352,7 @@
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
       "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "peer": true,
       "requires": {
         "loose-envify": "^1.1.0"
       }
@@ -5638,6 +5649,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-4.3.8.tgz",
       "integrity": "sha512-uYB8PwN7hbMrf4j1xzGDk/lqjsZvCDbt/JC5dyfxc19Pg8kRm14LinK/uq+HSLNswZEoKmweGdtpbnxRtrAXiQ==",
       "dev": true,
+      "peer": true,
       "requires": {
         "esbuild": "^0.17.5",
         "fsevents": "~2.3.2",
diff --git a/src/App.jsx b/src/App.jsx
index 98d0f49..2527459 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,9 +1,36 @@
-import "./App.css";
+import './App.css';
+import IdCard from './components/IdCard';
+import Greetings from './components/Greetings';
+import Random from './components/Random';
+import ColorBox from './components/BoxColor';
 
 function App() {
   return (
     <div className="App">
       <h1> LAB | React Training</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"
+      />
+      <Greetings lang="de">Ludwig</Greetings>
+      <Greetings lang="fr">François</Greetings>
+      <Random min={1} max={6} />
+      <Random min={1} max={100} />
+      <ColorBox r={255} g={0} b={0} />
+      <ColorBox r={128} g={255} b={0} />
+      <ColorBox r={0} g={0} b={255} />
     </div>
   );
 }
diff --git a/src/components/BoxColor.jsx b/src/components/BoxColor.jsx
new file mode 100644
index 0000000..8912a57
--- /dev/null
+++ b/src/components/BoxColor.jsx
@@ -0,0 +1,11 @@
+function BoxColor(props) {
+  let newColor = {
+    backgroundColor: `rgb(${props.r}, ${props.g}, ${props.b})`,
+    width: '300px',
+    height: '150px',
+    margin: '20px',
+  };
+
+  return <div style={newColor}></div>;
+}
+export default BoxColor;
diff --git a/src/components/Greetings.jsx b/src/components/Greetings.jsx
new file mode 100644
index 0000000..06cd333
--- /dev/null
+++ b/src/components/Greetings.jsx
@@ -0,0 +1,15 @@
+function Greetings(props) {
+  const greeting = {
+    de: 'Hallo',
+    en: 'Hello',
+    es: 'Hola',
+    fr: 'Bonjour',
+  };
+
+  return (
+    <p>
+      {greeting[props.lang]} {props.children}
+    </p>
+  );
+}
+export default Greetings;
diff --git a/src/components/IdCard.jsx b/src/components/IdCard.jsx
new file mode 100644
index 0000000..60d3d95
--- /dev/null
+++ b/src/components/IdCard.jsx
@@ -0,0 +1,13 @@
+function IdCard(props) {
+  return (
+    <div className="infos-container">
+      <p>First name: {props.firstName}</p>
+      <p>Last name: {props.lastName}</p>
+      <p>Gender: {props.gender}</p>
+      <p>Height: {props.height}</p>
+      <p>Birth: {props.birth.toDateString()}</p>
+      <img src={props.picture} alt={`${props.firstName} ${props.lastName}`} />
+    </div>
+  );
+}
+export default IdCard;
diff --git a/src/components/Random.jsx b/src/components/Random.jsx
new file mode 100644
index 0000000..6a731e1
--- /dev/null
+++ b/src/components/Random.jsx
@@ -0,0 +1,7 @@
+function Random(props) {
+  let number =
+    Math.floor(Math.random() * (props.max - props.min + 1)) + props.min;
+
+  return <div>{number}</div>;
+}
+export default Random;
diff --git a/src/components/idcard.css b/src/components/idcard.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/main.jsx b/src/main.jsx
index 4046932..77c2555 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -8,5 +8,5 @@ const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 );