diff --git a/src/components/Greetings.jsx b/src/components/Greetings.jsx
new file mode 100644
index 000000000..67b085dc1
--- /dev/null
+++ b/src/components/Greetings.jsx
@@ -0,0 +1,13 @@
+
+
+
+function Greetings({ lang, children }) {
+  
+  return (
+    <div>
+      <p>{children}</p>
+    </div>  
+  )
+}
+
+export default Greetings
diff --git a/src/components/IdCard.jsx b/src/components/IdCard.jsx
new file mode 100644
index 000000000..429ceb674
--- /dev/null
+++ b/src/components/IdCard.jsx
@@ -0,0 +1,17 @@
+
+
+
+function IdCard(props) {
+  return (
+    <div>
+      <img src={props.picture}></img>
+      <p>First name: {props.firstName}</p>
+      <p>Last name: {props.firstName}</p>
+      <p>Gender: {props.gender}</p>
+      <p>Height: {props.height}</p>
+      <p>Birth: {props.birth}</p>
+    </div>
+  )
+}
+
+export default IdCard
diff --git a/src/components/Random.jsx b/src/components/Random.jsx
new file mode 100644
index 000000000..8fc8eaf5e
--- /dev/null
+++ b/src/components/Random.jsx
@@ -0,0 +1,13 @@
+
+
+
+function Random({ min, max }) {
+  const displayedRandomNumber = Math.floor(Math.random() )
+  return (
+    <div>
+      <h3>{`Random value between ${min} and ${max} => ${displayedRandomNumber}`}</h3>
+    </div>
+  )
+}
+
+export default Random
diff --git a/src/components/boxColor.jsx b/src/components/boxColor.jsx
new file mode 100644
index 000000000..139597f9c
--- /dev/null
+++ b/src/components/boxColor.jsx
@@ -0,0 +1,2 @@
+
+