diff --git a/src/App.css b/src/App.css
new file mode 100644
index 000000000..b9da15ca0
--- /dev/null
+++ b/src/App.css
@@ -0,0 +1,122 @@
+
+.App {
+  margin-left: 10px;
+  font-size: 18px;
+  font-family: Verdana, Geneva, Tahoma, sans-serif;
+}
+
+.IdCard {
+  display: flex;
+}
+
+.IdCard img {
+  width: 156px;
+}
+
+.right {
+  display: flex;
+  flex-direction: column;
+}
+
+.right li {
+  list-style-type: none;
+}
+
+.box {
+  padding: 10px;
+  margin-bottom: 10px;
+  border: solid 1px black;
+}
+
+.tx-center p {
+  text-align: center;
+}
+
+.CreditCard {
+  padding: 50px;
+  width: 350px;
+  border-radius: 10px;
+  margin-bottom: 15px;
+}
+
+.CreditCard img {
+  width: 70px;
+}
+
+.number {
+  text-align: center;
+  font-size: 2rem;
+}
+
+.type {
+  text-align: right;
+}
+
+.bank {
+  margin-left: 10px;
+}
+
+.Rating {
+  font-size: 3rem;
+}
+
+.DriverCard {
+  background-color: #425cbb;
+  border-radius: 10px;
+  color: #fff;
+  padding: 5px;
+  display: flex;
+  justify-content: center;
+  margin: 10px;
+  align-items: center;
+}
+
+.DriverCard img {
+  height: 150px;
+  width: 150px;
+  object-fit: cover;
+  border-radius: 100px;
+  margin-right: 20px;
+}
+
+.DriverCard h2 {
+  font-size: 1.5em;
+  font-weight: bold;
+}
+
+.ratingCard {
+  font-size: 3rem;
+}
+
+.NumbersTable {
+  display: flex;
+}
+
+.NumbersBox {
+  list-style-type: none;
+  border: solid 1px;
+  padding: 30px;
+}
+
+.country-button {
+  border: 0px;
+  border-radius: 10px;
+  background-color: lightblue;
+  padding: 10px;
+  margin: 5px;
+}
+
+.country-button:hover {
+  background-color: darkblue;
+  color: white;
+}
+
+.SignupPage {
+  display: flex;
+  flex-direction: column;
+}
+
+.SignupPage input {
+  padding: 10px;
+  margin: 5px 0px 5px 0px;
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index e7ca67f20..e919a38a9 100755
--- a/src/App.js
+++ b/src/App.js
@@ -1,14 +1,129 @@
 import React, { Component } from 'react';
+import IdCard from './components/IdCard';
+import './App.css';
+import Greetings from './components/Greetings';
+import Random from './components/Random';
+import BoxColor from './components/BoxColor';
+import CreditCard from './components/CreditCard';
+import Rating from './components/Rating';
+import DriverCard from './components/DriverCard';
+import LikeButton from './components/LikeButton';
+import ClickablePicture from './components/ClickablePicture';
+import Dice from './components/Dice';
+import NumbersTable from './components/NumbersTable';
+import Facebook from './components/Facebook';
+import SignupPage from './components/SignupPage';
 
 class App extends Component {
   render() {
     return (
       <div className="App">
         <h1>IdCard</h1>
-        {/* TODO: Use the IdCard component */}
+        <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"
+        />
 
         <h1>Greetings</h1>
-        {/* TODO: Use the Greetings component */}
+        <Greetings lang="de">Ludwig</Greetings>
+        <Greetings lang="fr">François</Greetings>
+
+        <h1>Random</h1>
+        <Random min={1} max={6}/>
+        <Random min={1} max={100}/>
+
+        <h1>BoxColor</h1>
+        <BoxColor r={255} g={0} b={0} />
+        <BoxColor r={128} g={255} b={0} />
+
+        <h1>CreditCard</h1>
+        <CreditCard 
+          type="Visa"
+          number="0123456789018845"
+          expirationMonth={3}
+          expirationYear={2021}
+          bank="BNP"
+          owner="Maxence Bouret"
+          bgColor="#11aa99"
+          color="white" />
+        <CreditCard 
+          type="Master Card"
+          number="0123456789010995"
+          expirationMonth={3}
+          expirationYear={2021}
+          bank="N26"
+          owner="Maxence Bouret"
+          bgColor="#eeeeee"
+          color="#222222" />
+        <CreditCard 
+          type="Visa"
+          number="0123456789016984"
+          expirationMonth={12}
+          expirationYear={2019}
+          bank="Name of the Bank"
+          owner="Firstname Lastname"
+          bgColor="#ddbb55"
+          color="white" />
+
+        <h1>Rating</h1>
+        <Rating>0</Rating>
+        <Rating>1.49</Rating>
+        <Rating>1.5</Rating>
+        <Rating>3</Rating>
+        <Rating>4</Rating>
+        <Rating>5</Rating>
+
+        <h1>DriverCard</h1>
+        <DriverCard 
+          name="Travis Kalanick"
+          rating={4.2}
+          img="https://si.wsj.net/public/resources/images/BN-TY647_37gql_OR_20170621052140.jpg?width=620&height=428"
+          car={{
+            model: "Toyota Corolla Altis",
+            licensePlate: "CO42DE"
+          }} />
+        <DriverCard 
+          name="Dara Khosrowshahi"
+          rating={4.9}
+          img="https://ubernewsroomapi.10upcdn.com/wp-content/uploads/2017/09/Dara_ELT_Newsroom_1000px.jpg"
+          car={{
+            model: "Audi A3",
+            licensePlate: "BE33ER"
+          }} />
+
+        <h1>LikeButton</h1>
+        <LikeButton /> <LikeButton />
+
+        <h1>ClickablePicture</h1>
+        <ClickablePicture
+          img="/img/persons/maxence.png"
+          imgClicked="/img/persons/maxence-glasses.png"
+        />
+
+        <h1>Dice</h1>
+        <Dice />
+
+        <h1>NumbersTable</h1>
+        <NumbersTable limit={12} />
+
+        <h1>Facebook</h1>
+        <Facebook />
+
+        <h1>Signup Form</h1>
+        <SignupPage />
+
       </div>
     );
   }
diff --git a/src/components/BoxColor.js b/src/components/BoxColor.js
new file mode 100644
index 000000000..902a1c7ea
--- /dev/null
+++ b/src/components/BoxColor.js
@@ -0,0 +1,22 @@
+import React from 'react'
+
+const BoxColor = (props) => {
+  const componentToHex = (c) => {
+    let hex = c.toString(16);
+    return hex.length === 1 ? "0" + hex : hex;
+  }
+
+  const rgbToHex = (r, g, b) => {
+    return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
+  }
+  const hex = rgbToHex(props.r, props.b, props.g);
+
+  return (
+    <div className="box tx-center" style={{backgroundColor: 'rgb(' + props.r + ', ' + props.g + ', ' + props.b + ')'}} >
+      <p><strong>rgb({props.r},{props.g},{props.b})</strong></p>
+      <p><strong>{hex}</strong></p>
+    </div>
+  )
+}
+
+export default BoxColor;
diff --git a/src/components/ClickablePicture.js b/src/components/ClickablePicture.js
new file mode 100644
index 000000000..2358a46a2
--- /dev/null
+++ b/src/components/ClickablePicture.js
@@ -0,0 +1,18 @@
+import React, { Component } from 'react'
+
+export default class ClickablePicture extends Component {
+
+  state = {
+    img: this.props.img
+  }
+
+  changePicture = () => {
+    (this.state.img === this.props.img) ? this.setState({ img: this.props.imgClicked }) : this.setState({ img: this.props.img })
+  }
+
+  render() {
+    return (
+      <img src ={this.state.img} alt = "" onClick = {this.changePicture}/>
+    )
+  }
+}
diff --git a/src/components/CreditCard.js b/src/components/CreditCard.js
new file mode 100644
index 000000000..f5ace6af6
--- /dev/null
+++ b/src/components/CreditCard.js
@@ -0,0 +1,26 @@
+import React from 'react'
+
+const CreditCard = (props) => {
+  let imgUrl = '';
+  if (props.type === "Visa") {
+    imgUrl = './img/visa.png'
+   } else {
+    imgUrl = './img/master-card.svg';
+   }
+  return (
+    <div className="CreditCard" style={{backgroundColor: props.bgColor, color: props.color}}>
+      <div className="type">
+        <img src={imgUrl} alt={props.type}/>
+      </div>
+      <div className="number">
+        <p>•••• •••• •••• {props.number.slice(12, 16)}</p>
+      </div>
+      <div className="expiresBank">
+        <span>Expires {props.expirationMonth}/{props.expirationYear}</span><span className="bank">{props.bank}</span>
+      </div>
+      <div className="owner">{props.owner}</div>
+    </div>
+  )
+}
+
+export default CreditCard;
diff --git a/src/components/Dice.js b/src/components/Dice.js
new file mode 100644
index 000000000..52d6ecaea
--- /dev/null
+++ b/src/components/Dice.js
@@ -0,0 +1,27 @@
+import React, { Component } from 'react'
+
+export default class Dice extends Component {
+  constructor() {
+    super();
+    this.state = {
+      img: '/img/dice' + (Math.floor(Math.random() * 6) + 1) + '.png'
+    }
+  }
+
+  changePicture = () => {
+    this.setState({
+      img: '/img/dice-empty.png'
+    })
+    setTimeout(() => {
+      this.setState({
+        img: '/img/dice' + (Math.floor(Math.random() * 6) + 1) + '.png'
+      })
+    }, 1000)
+  }
+
+  render() {
+    return (
+      <img src={this.state.img} alt="" onClick={this.changePicture} style={{width: 100+"px"}} />
+    )
+  }
+}
diff --git a/src/components/DriverCard.js b/src/components/DriverCard.js
new file mode 100644
index 000000000..3f6f2ebf1
--- /dev/null
+++ b/src/components/DriverCard.js
@@ -0,0 +1,24 @@
+import React from 'react'
+
+const DriverCard = (props) => {
+  let string = '';
+  for (let i = 0; i < Math.round(props.rating); i++) {
+    string += '★';
+  }
+
+
+  return (
+    <div className="DriverCard">
+      <img className="left" src={props.img} alt={props.name} style={{maxWidth: 100 + '%'}}></img>
+      <div className="right">
+        <h2>{props.name}</h2>
+        <div className="ratingCard">
+          {string.padEnd(5, "☆")}
+        </div>
+        <p>{props.car.model} - {props.car.licensePlate}</p>
+      </div>
+    </div>
+  )
+}
+
+export default DriverCard;
diff --git a/src/components/Facebook.js b/src/components/Facebook.js
new file mode 100644
index 000000000..120fbb672
--- /dev/null
+++ b/src/components/Facebook.js
@@ -0,0 +1,65 @@
+import React, { Component } from 'react';
+import berlinJSON from '../data/berlin.json';
+import FacebookProfile from './FacebookProfile.js';
+
+export default class Facebook extends Component {
+  constructor() {
+    super();
+    this.state = {
+      berlin: berlinJSON
+    }
+  }
+
+  getCountries = () => {
+    let countries = [];
+    for (let i = 0; i < berlinJSON.length; i++) {
+      countries.push(berlinJSON[i].country);
+    }
+    return [...new Set(countries)];
+  }
+
+  listCountries = (country) => {
+    if (country === 'All') {
+      this.setState({
+        berlin: berlinJSON
+      })
+    } else {
+      const countries = berlinJSON.filter(element => {
+        return element.country === country;
+      })
+      this.setState({
+        berlin: countries
+      })
+    }
+  }
+
+  render() {
+    return (
+      <div>
+        <div>
+          <button className="country-button" onClick={() => this.listCountries('All')}>All</button>
+          {
+            this.getCountries().map((element, index) =>
+              <button key={index} className="country-button" onClick={() => this.listCountries(element)}>{element}</button>
+            )
+          }
+        </div>
+        <div className="FacebookProfile">
+        {
+          this.state.berlin.map((element, index) =>
+            <FacebookProfile
+              key = {index}
+              firstName = {element.firstName}
+              lastName = {element.lastName}
+              country = {element.country}
+              img = {element.img}
+              isStudent = {element.isStudent}
+            />
+          )
+        }
+      </div>
+      </div>
+      
+    )
+  }
+}
diff --git a/src/components/FacebookProfile.js b/src/components/FacebookProfile.js
new file mode 100644
index 000000000..a6f643df7
--- /dev/null
+++ b/src/components/FacebookProfile.js
@@ -0,0 +1,21 @@
+import React from 'react'
+
+const type = (isStudent) => {
+  return (isStudent === true) ? "Student" : "Teacher";
+}
+
+const FacebookProfile = (props) => {
+  return (
+    <div className="IdCard box">
+      <img src={props.img} alt={props.firstName}></img>
+      <ul className="right">
+        <li><strong>First name</strong>: {props.firstName}</li>
+        <li><strong>Last name</strong>: {props.lastName}</li>
+        <li><strong>Country</strong>: {props.country}</li>
+        <li><strong>Type</strong>: {type(props.isStudent)}</li>
+      </ul>
+    </div>
+  )
+}
+
+export default FacebookProfile;
diff --git a/src/components/Greetings.js b/src/components/Greetings.js
new file mode 100644
index 000000000..934c1acff
--- /dev/null
+++ b/src/components/Greetings.js
@@ -0,0 +1,33 @@
+import React from 'react'
+
+const Greetings = (props) => {
+  const greets = [
+    {
+      lang: 'de',
+      greet: 'Hallo'
+    },
+    {
+      lang: 'en',
+      greet: 'Hello'
+    },
+    {
+      lang: 'es',
+      greet: 'Hola'
+    },
+    {
+      lang: 'fr',
+      greet: 'Bonjour'
+    }
+  ];
+
+  let getGreeting = lang => greets.find(language => language.lang === lang);
+  const localGreeting = getGreeting(props.lang);
+
+  return (
+    <div className="box">
+      {localGreeting.greet} {props.children}
+    </div>
+  )
+}
+
+export default Greetings;
diff --git a/src/components/IdCard.js b/src/components/IdCard.js
new file mode 100644
index 000000000..cb0eb0d6d
--- /dev/null
+++ b/src/components/IdCard.js
@@ -0,0 +1,18 @@
+import React from 'react'
+
+const IdCard = (props) => {
+  return (
+    <div className="IdCard box">
+      <img src={props.picture} alt={props.firstName}></img>
+      <ul className="right">
+        <li><strong>First name</strong>: {props.firstName}</li>
+        <li><strong>Last name</strong>: {props.lastName}</li>
+        <li><strong>Gender</strong>: {props.gender}</li>
+        <li><strong>Height</strong>: {props.height} cm</li>
+        <li><strong>Birth</strong>: {props.birth.toString().slice(0,15)}</li>
+      </ul>
+    </div>
+  );
+}
+
+export default IdCard;
diff --git a/src/components/LikeButton.js b/src/components/LikeButton.js
new file mode 100644
index 000000000..b205f962d
--- /dev/null
+++ b/src/components/LikeButton.js
@@ -0,0 +1,31 @@
+import React, { Component } from 'react'
+
+export default class LikeButton extends Component {
+  constructor() {
+    super();
+    this.state = {
+      num: 0,
+      title: "Likes",
+      color: ['purple', 'blue', 'green', 'yellow', 'orange', 'red']
+    }
+  }
+
+  changeButton = () => {
+    this.setState({
+      num: this.state.num + 1
+    })
+  }
+
+  render() {
+    return (
+      <button style={{
+          backgroundColor: this.state.color[this.state.num],
+          border: 0+"px",
+          borderRadius: 5+"px",
+          padding: 10+"px",
+          color: "white"
+        }} onClick={this.changeButton}>{this.state.num} {this.state.title}
+      </button>
+    );
+  }
+}
diff --git a/src/components/NumbersBox.js b/src/components/NumbersBox.js
new file mode 100644
index 000000000..46f891ef9
--- /dev/null
+++ b/src/components/NumbersBox.js
@@ -0,0 +1,9 @@
+import React from 'react'
+
+export const NumbersBox = (props) => {
+  return (
+  <li className="NumbersBox" style={{backgroundColor: props.color}}>{props.value}</li>
+  )
+}
+
+export default NumbersBox;
diff --git a/src/components/NumbersTable.js b/src/components/NumbersTable.js
new file mode 100644
index 000000000..9dacb4d97
--- /dev/null
+++ b/src/components/NumbersTable.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import NumbersBox from './NumbersBox';
+
+const generateArray = (number) => {
+  let arr = [];
+  let color = '';
+
+  for (let i = 1; i <= number; i++) {
+    (i % 2 === 0) ? color = "red" : color = 'white';
+    arr.push(
+      {
+        value: i,
+        color: color
+      }
+    )
+  }
+  return arr;
+}
+
+
+const NumbersTable = (props) => {
+  
+  return (
+    <ul className="NumbersTable">
+      {
+        generateArray(props.limit).map((element, index) =>
+          <NumbersBox
+            key = {index}
+            value = {element.value}
+            color = {element.color}
+          />
+        )
+      }
+    </ul>
+  )
+}
+
+export default NumbersTable;
diff --git a/src/components/Random.js b/src/components/Random.js
new file mode 100644
index 000000000..cb7814ddb
--- /dev/null
+++ b/src/components/Random.js
@@ -0,0 +1,12 @@
+import React from 'react'
+
+const Random = (props) => {
+  const random = Math.floor(Math.random() * props.max) + props.min;
+  return (
+    <div className="box">
+      <p>Random value between {props.min} and {props.max} => {random}</p>
+    </div>
+  )
+}
+
+export default Random;
diff --git a/src/components/Rating.js b/src/components/Rating.js
new file mode 100644
index 000000000..f26293a3f
--- /dev/null
+++ b/src/components/Rating.js
@@ -0,0 +1,16 @@
+import React from 'react'
+
+const Rating = (props) => {
+  let string = '';
+  for (let i = 0; i < Math.round(props.children); i++) {
+    string += '★';
+  }
+
+  return (
+    <div className="Rating">
+      <pre>{string.padEnd(5, "☆")}</pre>
+    </div>
+  )
+}
+
+export default Rating;
diff --git a/src/components/SignupPage.js b/src/components/SignupPage.js
new file mode 100644
index 000000000..ecd552975
--- /dev/null
+++ b/src/components/SignupPage.js
@@ -0,0 +1,62 @@
+import React, { Component } from 'react'
+
+export default class SignupPage extends Component {
+  constructor() {
+    super();
+    this.state = {
+      email: '',
+      password: '',
+      nationality: ''
+    }
+  }
+
+  handleChange(event) {
+    let { name, value } = event.target;
+    this.setState({[name]: value});
+  }
+
+  handleFormSubmit = event => {
+    event.preventDefault();
+    this.props.signup(this.state);
+    
+    this.setState({
+      email: "",
+      password: "",
+      nationality: ""
+    })
+  };
+
+  render() {
+    return (
+      <form className="SignupPage" onSubmit={this.handleFormSubmit}>
+        <label htmlFor="email">Email</label>
+        <input
+          type="email"
+          id="email"
+          name="email"
+          autoComplete="email"
+          value={this.state.email}
+          onChange={(e) => this.handleChange(e)}
+        />
+        <label htmlFor="password">Password</label>
+        <input
+          type="password"
+          id="password"
+          name="password"
+          autoComplete="password"
+          value={this.state.password}
+          onChange={(e) => this.handleChange(e)}
+        />
+        <label htmlFor="nationality">Nationality</label>
+        <input
+          type="text"
+          id="nationality"
+          name="nationality"
+          value={this.state.nationality}
+          onChange={(e) => this.handleChange(e)}
+        />
+        <button type="submit" value="Submit">Submit</button>
+      </form>
+    )
+  }
+}
diff --git a/src/index.css b/src/index.css
index cee5f348f..b874ac530 100755
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,5 @@
 body {
-  margin: 0;
+  margin-left: 0;
   padding: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",