diff --git a/src/App.jsx b/src/App.jsx
index 98d0f49..98ee8e1 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,9 +1,33 @@
 import "./App.css";
+import IdCard from "./components/IdCard.jsx";
+import Greetings from "./components/Greetings.jsx";
 
 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>
+
     </div>
   );
 }
diff --git a/src/components/BoxColor.jsx b/src/components/BoxColor.jsx
new file mode 100644
index 0000000..eefcbe3
--- /dev/null
+++ b/src/components/BoxColor.jsx
@@ -0,0 +1,15 @@
+function BoxColor(r,g,b) {
+
+    let mini = 0;
+    let maxi = 255
+      let r = Math.floor(Math.random() * (maxi - mini) + mini);
+  let g = Math.floor(Math.random() * (maxi - mini) + mini);
+ let b =  Math.floor(Math.random() * (maxi - mini) + mini);
+
+
+  return (
+    <div> r={r} g={g} b={b} </div>
+
+  )
+}
+export default BoxColor
\ No newline at end of file
diff --git a/src/components/Greetings.jsx b/src/components/Greetings.jsx
new file mode 100644
index 0000000..76c527b
--- /dev/null
+++ b/src/components/Greetings.jsx
@@ -0,0 +1,22 @@
+function Greetings ({lang, children}) {
+
+    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 (
+    <div>
+      {greeting} {children}
+    </div>)
+}
+
+export default Greetings
\ No newline at end of file
diff --git a/src/components/IdCard.jsx b/src/components/IdCard.jsx
new file mode 100644
index 0000000..c990be1
--- /dev/null
+++ b/src/components/IdCard.jsx
@@ -0,0 +1,13 @@
+function IdCard({ lastName, firstName, gender, height, birth, picture}) {
+  return (
+    <div>
+      <p>lastName: {lastName}</p>
+      <p>firstName: {firstName}</p>
+      <p>gender: {gender} </p>
+      <p>height: {height}</p>
+      <p>birth: {birth}</p>
+      <p>picture: {picture}</p>
+    </div>
+  );
+}
+export default IdCard
diff --git a/src/components/Random.jsx b/src/components/Random.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/index.css b/src/index.css
index ec2585e..fd5ae43 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,13 +1,20 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+.rectangle {
+  width: 200px;
+  height: 100px;
+  background-color: red;
+  margin-bottom: 10px;
+}