diff --git a/src/App.css b/src/App.css
index 74b5e0534..bc9917744 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,5 +1,6 @@
 .App {
-  text-align: center;
+  /* text-align: center; */
+  margin: 20px;
 }
 
 .App-logo {
@@ -17,11 +18,11 @@
   background-color: #282c34;
   min-height: 100vh;
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+  /* flex-direction: column;
+  /* align-items: center; */
+  /* justify-content: center;  */
   font-size: calc(10px + 2vmin);
-  color: white;
+  color: black;
 }
 
 .App-link {
@@ -36,3 +37,114 @@
     transform: rotate(360deg);
   }
 }
+
+.cardDiv {
+  display: flex;
+  flex-direction: row;
+  padding: 20px;
+  border: 1px solid black;
+  width: 600px;
+  margin: 20px;
+}
+
+.cardImage {
+  padding: 20px;
+}
+
+.cardTextDiv {
+  text-align: left;
+  padding: 5px;
+}
+
+.langdiv {
+  display: flex;
+  flex-direction: row;
+  padding: 20px;
+  border: 1px solid black;
+  width: 400px;
+  margin: 20px;
+}
+
+.ccdiv {
+  width: 500px;
+  height: 250px;
+  margin: 14px;
+  padding: 20px;
+  border-radius: 15px;
+  display: flex;
+  flex-direction: column;
+}
+
+.cardlogo {
+  max-height: 60px;
+  max-width: 60px;
+  align-self: flex-end;
+}
+
+.cardnumbers {
+  font-size: 50px;
+}
+
+.smallercard {
+  font-size: 20px;
+  margin: 0px;
+}
+
+.driverdiv {
+  background-color: #485cb4;
+  width: 650px;
+  height: 100px;
+  margin: 1%;
+  padding: 1%;
+  border-radius: 15px;
+  display: flex;
+  color: white;
+  flex-direction: row;
+}
+
+.imgcrop {
+  width: 100px;
+  height: 100px;
+  /* position: relative; */
+  overflow: hidden;
+  border-radius: 50%;
+  margin-left: 20%;
+}
+
+.driverimg {
+  /* display: inline; */
+  height: 100%;
+}
+
+.driveinfo > p,
+h3 {
+  margin: 0;
+  padding: 0;
+}
+
+.number {
+  height: 100px;
+  width: 100px;
+  border: 3px black solid;
+  font-size: 30px;
+  text-align: center;
+}
+
+.numbersDiv {
+  display: flex;
+  flex-wrap: wrap;
+  max-width: 550px;
+
+}
+
+.facebookdiv {
+  border: 1px black solid;
+  display: flex;
+  flex-direction: row;
+  width: 500px;
+  height: 180px;
+}
+
+button{
+  
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 378457572..a767f3ca8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,23 +1,59 @@
-import logo from './logo.svg';
 import './App.css';
+import IdCard from './components/IdCard';
+import Greetings from './components/Greetings';
+import Random from './components/Random';
+import LikeButton from './components/LikeButton';
+import ClickablePicture from './components/ClickablePicture';
+import Dice from './components/Dice';
+import NumbersTable from './components/NumbersTable';
 
 function App() {
+
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+
+    {/* Iteration 1 */}
+      <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"
+        />
+
+      {/* Iteration 2 */}
+        <Greetings lang="de">Ludwig</Greetings>
+        <Greetings lang="fr">François</Greetings>
+
+      {/* Iteration 3 */}
+        <Random min={1} max={6}/>
+        <Random min={1} max={100}/>
+
+      {/* Iteration 8 */}
+        <LikeButton />
+
+      {/* Iteration 9 */}
+        <ClickablePicture
+          img='maxence.png'
+          imgClicked='maxence-glasses.png'
+        />
+
+        {/* Iteration 10 */}
+        <Dice />
+
+        {/* Iteration 12 */}
+        <NumbersTable limit={12} />
+
     </div>
   );
 }
diff --git a/src/assets/images/mastercard.png b/src/assets/images/mastercard.png
new file mode 100644
index 000000000..983ded005
Binary files /dev/null and b/src/assets/images/mastercard.png differ
diff --git a/src/components/ClickablePicture.js b/src/components/ClickablePicture.js
new file mode 100644
index 000000000..f9f76c38d
--- /dev/null
+++ b/src/components/ClickablePicture.js
@@ -0,0 +1,15 @@
+import { useState } from "react";
+
+function ClickablePicture({img, imgClicked}) {
+    const [isImageClicked, setIsImageClicked] = useState(false);
+
+    const toggleImage = () => {
+        return setIsImageClicked(!isImageClicked);
+    }
+
+    return <div>
+        <img onClick={toggleImage} src={isImageClicked ? img : imgClicked}  alt="Ironhacker"></img>
+    </div>
+}
+
+export default ClickablePicture;
\ No newline at end of file
diff --git a/src/components/Dice.js b/src/components/Dice.js
new file mode 100644
index 000000000..d1e1b8a09
--- /dev/null
+++ b/src/components/Dice.js
@@ -0,0 +1,30 @@
+import { useState } from 'react';
+import emptyDice from '../assets/images/dice-empty.png';
+import dice1 from '../assets/images/dice1.png';
+import dice2 from '../assets/images/dice2.png';
+import dice3 from '../assets/images/dice3.png';
+import dice4 from '../assets/images/dice4.png';
+import dice5 from '../assets/images/dice5.png';
+import dice6 from '../assets/images/dice6.png';
+
+
+function Dice() {
+    const DiceArray = [emptyDice, dice1, dice2, dice3, dice4, dice5, dice6];
+    const [isDiceEmpty, setIsDiceEmpty] = useState(true);
+
+    const toggleDice = () => { 
+        setIsDiceEmpty(!isDiceEmpty);
+    }
+
+    const randomDiceImage = () => {
+        const randomIndex = Math.floor(Math.random() * 6);
+        const diceImage = DiceArray[randomIndex];
+        return diceImage;
+    }
+
+    return <div>
+        <img onClick={toggleDice} src={isDiceEmpty ? emptyDice : randomDiceImage()} width="200" alt="Dice"/>
+    </div>
+}
+
+export default Dice;
diff --git a/src/components/Greetings.js b/src/components/Greetings.js
new file mode 100644
index 000000000..8638fc8f1
--- /dev/null
+++ b/src/components/Greetings.js
@@ -0,0 +1,16 @@
+function Greetings({lang, children}) {
+    const chooseGreeting = (lang) => {
+        if (lang==="de") {
+            return "Hallo"
+        }
+        if (lang==="fr") {
+            return "Bonjour"
+        }
+        else return "Nothing"
+    };
+    return <div>
+        <p>{chooseGreeting(lang)} {children} </p>
+    </div>
+}
+
+export default Greetings;
\ No newline at end of file
diff --git a/src/components/IdCard.js b/src/components/IdCard.js
new file mode 100644
index 000000000..1b4e6e79d
--- /dev/null
+++ b/src/components/IdCard.js
@@ -0,0 +1,13 @@
+function IdCard({lastName, firstName, gender, height, birth, picture}){
+    return <div>
+        <img src={picture} alt="Id of person"/>
+        <p>First name: {firstName}</p>
+        <p>Last name: {lastName}</p>
+        <p>Gender: {gender}</p>
+        <p>Height: {height/100}m</p>
+        <p>Birth: {birth.toLocaleDateString()}</p>
+
+    </div>
+}
+
+export default IdCard;
\ No newline at end of file
diff --git a/src/components/LikeButton.js b/src/components/LikeButton.js
new file mode 100644
index 000000000..93a7af540
--- /dev/null
+++ b/src/components/LikeButton.js
@@ -0,0 +1,20 @@
+import { useState } from "react";
+
+function LikeButton() {
+    const [count, setCount] = useState(0);
+    
+    const colorsArray = ['purple','blue','green','yellow','orange','red']
+    const buttonCounter = () => { return setCount(count+1)}
+
+    return <div>
+        <button 
+            onClick={buttonCounter} 
+            style={{padding: "10px", margin: "10px", color: "white", backgroundColor: colorsArray[count % 6]
+            }} 
+            >
+            {count} Likes
+        </button>
+    </div>
+}
+
+export default LikeButton;
\ No newline at end of file
diff --git a/src/components/NumbersTable.js b/src/components/NumbersTable.js
new file mode 100644
index 000000000..ec6c90aa5
--- /dev/null
+++ b/src/components/NumbersTable.js
@@ -0,0 +1,23 @@
+
+
+function NumbersTable({limit}) {
+    const NumbersArray=[];
+    for (let i=0; i<limit; i++) {
+        NumbersArray.push(i);
+    }
+
+    return <div>
+        {NumbersArray.map((number) => {
+            return(
+            <div
+                style={{border:"2px solid black", padding: "10px", height: "50px", width: "50px", backgroundColor: number % 2 === 0  ? "white" : "red"}} 
+                >
+                    {number}
+            </div>)
+        })}
+        
+        
+    </div>
+}
+
+export default NumbersTable;
\ No newline at end of file
diff --git a/src/components/Random.js b/src/components/Random.js
new file mode 100644
index 000000000..5d5328f9e
--- /dev/null
+++ b/src/components/Random.js
@@ -0,0 +1,11 @@
+
+
+function Random({min,max}) {
+    let calculateRandom;
+    calculateRandom = (min,max) => Math.floor(Math.random() * (max - min) + min);
+    return <div>
+        <p>Random value between 1 and {max} is {calculateRandom(min,max)}</p>
+    </div>
+}
+
+export default Random;
\ No newline at end of file