diff --git a/src/App.js b/src/App.js
index e7ca67f20..5f562347e 100755
--- a/src/App.js
+++ b/src/App.js
@@ -1,17 +1,50 @@
 import React, { Component } from 'react';
+import IdCard from './components/IdCard';
+import Greeting from './components/Greeting';
 
 class App extends Component {
   render() {
     return (
       <div className="App">
-        <h1>IdCard</h1>
-        {/* TODO: Use the IdCard component */}
+        <h1>IDCARD</h1>
 
-        <h1>Greetings</h1>
-        {/* TODO: Use the Greetings component */}
+        <IdCard
+          lastName="Doe"
+          firstName="John"
+          gender="male"
+          height={178}
+          birth={new Date('1992-07-14').toDateString()}
+          picture="https://randomuser.me/api/portraits/men/44.jpg"
+        />
+        <IdCard
+          lastName="Delores "
+          firstName="Obrien"
+          gender="female"
+          height={172}
+          birth={new Date('1988-05-11').toDateString()}
+          picture="https://randomuser.me/api/portraits/women/44.jpg"
+        />
+
+        <h1>GREETING</h1>
+
+        <Greeting lang="de">
+          Ludwig
+        </Greeting>
+        <Greeting lang="es">
+          José
+        </Greeting>
+        <Greeting lang="fr">
+          Francoise
+        </Greeting>
+        <Greeting lang="en">
+          John
+        </Greeting>
+        <Greeting lang="">
+          Hirashi
+        </Greeting>
       </div>
     );
-  }
+}
 }
 
 export default App;
diff --git a/src/components/BoxColor.js b/src/components/BoxColor.js
new file mode 100644
index 000000000..d84ec1fab
--- /dev/null
+++ b/src/components/BoxColor.js
@@ -0,0 +1,10 @@
+import React, { Component } from 'react';
+import './css/BoxColor.css';
+
+class BoxColor extends Component {
+  render() {
+    return <div className=""></div>;
+  }
+}
+
+export default BoxColor;
diff --git a/src/components/CreditCards.js b/src/components/CreditCards.js
new file mode 100644
index 000000000..3d560d90b
--- /dev/null
+++ b/src/components/CreditCards.js
@@ -0,0 +1,10 @@
+import React, { Component } from 'react';
+import './css/CreditCard.css';
+
+class CreditCard extends Component {
+  render() {
+    return <div className=""></div>;
+  }
+}
+
+export default CreditCard;
diff --git a/src/components/Greeting.js b/src/components/Greeting.js
new file mode 100644
index 000000000..8e7b7e116
--- /dev/null
+++ b/src/components/Greeting.js
@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+import './css/Greeting.css';
+
+class Greeting extends Component {
+  render() {
+    let greet = '';
+    const { lang, children } = this.props;
+    switch (lang) {
+      case 'es':
+        greet = 'Hola';
+        break;
+      case 'fr':
+        greet = 'Bonjour';
+        break;
+      case 'de':
+        greet = 'Hallo';
+        break;
+      case 'en':
+        greet = 'Hello';
+        break;
+      default:
+        greet = 'Yep';
+        break;
+    }
+    return (
+      <div className="App-Boxed">
+        <h2>
+          {greet} {children}
+        </h2>
+      </div>
+    );
+  }
+}
+
+export default Greeting;
\ No newline at end of file
diff --git a/src/components/IdCard.js b/src/components/IdCard.js
new file mode 100644
index 000000000..665cbd842
--- /dev/null
+++ b/src/components/IdCard.js
@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+import './css/IdCard.css';
+
+
+class IdCard extends Component {
+  render() {
+    const { firstName, lastName, gender, height, birth, picture } = this.props;
+
+    return (
+      <div className="App-IdCard">
+        <img src={picture} alt="Photography" />
+        <div className="App-IdCard-text">
+          <p>
+            <span>First Name:</span> {firstName}{' '}
+          </p>
+          <p>
+            <span>Last name:</span> {lastName}{' '}
+          </p>
+          <p>
+            <span>Gender:</span> {gender}{' '}
+          </p>
+          <p>
+            <span>Height:</span> {height} cm{' '}
+          </p>
+          <p>
+            <span>Birth:</span> {birth}{' '}
+          </p>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default IdCard;
diff --git a/src/components/Random.js b/src/components/Random.js
new file mode 100644
index 000000000..038bfdd50
--- /dev/null
+++ b/src/components/Random.js
@@ -0,0 +1,12 @@
+import React, { Component } from 'react';
+import './css/Random.css';
+
+class Random extends Component {
+  render() { 
+    return (
+      <div className=""></div>
+    );
+  }
+}
+
+export default Random;
diff --git a/src/components/css/BoxColor.css b/src/components/css/BoxColor.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/css/CreditCard.css b/src/components/css/CreditCard.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/css/Greeting.css b/src/components/css/Greeting.css
new file mode 100644
index 000000000..472601282
--- /dev/null
+++ b/src/components/css/Greeting.css
@@ -0,0 +1,7 @@
+.App-Boxed {
+  width: 30%;
+  border: 1px deeppink solid;
+  box-shadow: 2px 2px 2px 0  grey;
+  margin: 20px 0;
+  padding-left: 20px;
+}
diff --git a/src/components/css/IdCard.css b/src/components/css/IdCard.css
new file mode 100644
index 000000000..f682b6a07
--- /dev/null
+++ b/src/components/css/IdCard.css
@@ -0,0 +1,22 @@
+.App-IdCard {
+  display: flex;
+  flex-direction: row;
+  width: 50%;
+  border: 2px solid black;
+  margin-bottom: 20px;
+  align-items: center;
+}
+
+.App-IdCard img {
+  width: 128px;
+  height: 128px;
+  margin: 5px;
+}
+
+.App-IdCard-text {
+  margin-left: 20px;
+}
+
+.App-IdCard-text span {
+  font-weight: bolder;
+}
diff --git a/src/components/css/Random.css b/src/components/css/Random.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/index.css b/src/index.css
index cee5f348f..4877ef03a 100755
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,8 @@
 body {
-  margin: 0;
+  margin-top: 0;
+  margin-right: 20px;
+  margin-bottom: 0;
+  margin-left: 20px;
   padding: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
@@ -12,3 +15,8 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+h1 {
+  font-weight: lighter;
+  text-shadow: 2px 2px 5px grey;
+}