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..b0053fd 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,9 +1,49 @@
 import "./App.css";
+import IdCard from "./components/IdCard";
+import Greetings from "./components/Greetings";
+import Random from "./components/Random";
+import BoxColor 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"
+      />
+      <hr />
+
+      {/* Iteration 2 */}
+      <Greetings lang="de">Ludwig</Greetings>
+      <Greetings lang="fr">François</Greetings>
+
+       <hr />
+
+      {/* Iteration 3 */}
+      <Random min={1} max={6} />
+      <Random min={1} max={100} />
+
+      <hr />
+
+      {/* Iteration 4 */}
+      <BoxColor r={255} g={0} b={0} />
+      <BoxColor r={128} g={255} b={0} />
+
     </div>
   );
 }
diff --git a/src/components/BoxColor.jsx b/src/components/BoxColor.jsx
new file mode 100644
index 0000000..13d7f1b
--- /dev/null
+++ b/src/components/BoxColor.jsx
@@ -0,0 +1,21 @@
+
+function BoxColor(props) {
+  const { r, g, b } = props;
+
+  const boxStyle = {
+    backgroundColor: `rgb(${r}, ${g}, ${b})`,
+    color: "white",
+    padding: "20px",
+    margin: "10px 0",
+    textAlign: "center",
+    border: "1px solid black"
+  };
+
+  return (
+    <div style={boxStyle}>
+      rgb({r}, {g}, {b})
+    </div>
+  );
+}
+
+export default BoxColor;
\ No newline at end of file
diff --git a/src/components/CreditCard.jsx b/src/components/CreditCard.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/Greetings.jsx b/src/components/Greetings.jsx
new file mode 100644
index 0000000..a63af74
--- /dev/null
+++ b/src/components/Greetings.jsx
@@ -0,0 +1,24 @@
+
+function Greetings(props) {
+  const { lang, children } = props;
+
+  let greeting = "";
+
+  if (lang === "de") {
+    greeting = "Hallo";
+  } else if (lang === "en") {
+    greeting = "Hello";
+  } else if (lang === "es") {
+    greeting = "Hola";
+  } else if (lang === "fr") {
+    greeting = "Bonjour";
+  }
+
+  return (
+    <p>
+      {greeting} {children}
+    </p>
+  );
+}
+
+export default Greetings;
diff --git a/src/components/IdCard.jsx b/src/components/IdCard.jsx
new file mode 100644
index 0000000..a214db9
--- /dev/null
+++ b/src/components/IdCard.jsx
@@ -0,0 +1,26 @@
+
+function IdCard(props) {
+  const { lastName, firstName, gender, height, birth, picture } = props;
+
+  return (
+    <div className="id-card">
+      <img src={picture} alt={`${firstName} ${lastName}`} />
+
+      <div className="id-card-info">
+        <p><strong>First name:</strong> {firstName}</p>
+        <p><strong>Last name:</strong> {lastName}</p>
+        <p><strong>Gender:</strong> {gender}</p>
+        <p><strong>Height:</strong> {height} cm</p>
+        <p>
+          <strong>Birth:</strong>{" "}
+          {birth.toDateString()}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default IdCard;
+
+
+
diff --git a/src/components/Random.jsx b/src/components/Random.jsx
new file mode 100644
index 0000000..7822e40
--- /dev/null
+++ b/src/components/Random.jsx
@@ -0,0 +1,15 @@
+
+function Random(props) {
+  const { min, max } = props;
+
+  const randomNumber =
+    Math.floor(Math.random() * (max - min + 1)) + min;
+
+  return (
+    <p>
+      Random value between {min} and {max} =&gt; {randomNumber}
+    </p>
+  );
+}
+
+export default Random;
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index ec2585e..a2f3d3d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -11,3 +11,21 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+
+.id-card {
+  display: flex;
+  border: 1px solid #000;
+  padding: 10px;
+  margin: 10px 0;
+  width: 400px;
+}
+
+.id-card img {
+  width: 120px;
+  margin-right: 10px;
+}
+
+.id-card-info p {
+  margin: 4px 0;
+}