diff --git a/src/components/CreditCard.jsx b/src/components/CreditCard.jsx
new file mode 100644
index 000000000..778803c34
--- /dev/null
+++ b/src/components/CreditCard.jsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import visa from  '../assets/images/visa.png'
+import masterCard from '../assets/images/master-card.svg'
+
+/* eslint-disable react/prop-types */
+function CreditCard(props) {
+    const { type, number, expirationMonth, expirationYear, bank, owner, bgColor, color } = props
+
+
+    return (
+        <div className="creditCard" style={{color: color, backgroundColor: bgColor}}>
+            <img src={type == 'Visa' ? visa : masterCard} className='cc'></img>
+            <p style={{fontSize: '25px', margin: '10px 0'}}>{"•••• •••• •••• " + number.slice(-4)}</p>
+            <p style={{textAlign: 'start'}}>Expires {expirationMonth}/{expirationYear.toString().slice(-2)}      
+                <span style={{paddingLeft: '20px'}}>{bank}</span>
+            </p>
+            <p style={{textAlign: 'start'}}>{owner}</p>
+        </div>
+    )
+}
+
+export default CreditCard
\ No newline at end of file
diff --git a/src/components/Greetings.jsx b/src/components/Greetings.jsx
new file mode 100644
index 000000000..83cef7753
--- /dev/null
+++ b/src/components/Greetings.jsx
@@ -0,0 +1,12 @@
+import React from 'react'
+
+function Greetings({ lang, children }) {
+
+    return (
+      <div>
+        <p>{children}</p>
+      </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 000000000..038bf92f6
--- /dev/null
+++ b/src/components/IdCard.jsx
@@ -0,0 +1,14 @@
+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
\ No newline at end of file
diff --git a/src/components/Random.jsx b/src/components/Random.jsx
new file mode 100644
index 000000000..5597bed56
--- /dev/null
+++ b/src/components/Random.jsx
@@ -0,0 +1,12 @@
+import React from 'react'
+
+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
\ No newline at end of file
diff --git a/src/components/Rating.jsx b/src/components/Rating.jsx
new file mode 100644
index 000000000..a949d132a
--- /dev/null
+++ b/src/components/Rating.jsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+function Rating(props) {
+    const { children } = props
+
+    function convertToStars(rating) {
+        const roundedRating = Math.round(rating);
+        const filledStars = '★'.repeat(roundedRating);
+        const emptyStars = '☆'.repeat(5 - roundedRating);
+        return filledStars + emptyStars;
+    }
+
+    return (
+        <div>
+            {convertToStars(children)}
+        </div>
+    )
+}
+
+export default Rating
diff --git a/src/components/boxColor.jsx b/src/components/boxColor.jsx
new file mode 100644
index 000000000..77d9ea219
--- /dev/null
+++ b/src/components/boxColor.jsx
@@ -0,0 +1,18 @@
+import React from 'react'
+
+function BoxColor(props) {
+    const { r, g, b } = props
+
+    function rgbToHex(r, g, b) {
+        return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();
+    }
+
+    return (
+        <div className="container" style={{backgroundColor: `rgb(${r},${g},${b})`}}>
+            rgb({r},{g},{b})<br />
+            {rgbToHex(r,g,b)}
+        </div>
+    )
+}
+
+export default BoxColor
\ No newline at end of file