diff --git a/src/app/EmployeesHistory/Components/EmployeeDetails.js b/src/app/EmployeesHistory/Components/EmployeeDetails.js
new file mode 100644
index 0000000..8049764
--- /dev/null
+++ b/src/app/EmployeesHistory/Components/EmployeeDetails.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import ProjectsHistoryDetails from './ProjectsHistoryDetails';
+import Evaluations from './Evaluations';
+
+class EmployeeDetails extends React.Component {
+  state = {
+    projectsHistory: [],
+    evaluations: []
+  };
+
+  componentWillReceiveProps(nextProps) {
+    this.setState({
+      projectsHistory: nextProps.employee.projectsHistory,
+      evaluations: nextProps.employee.employeeEvaluations
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <strong>Employee Details</strong>
+        <hr style={{ borderTop: 'dotted 1p' }} />
+        <ProjectsHistoryDetails projectsHistory={this.state.projectsHistory} />
+        <br />
+        <Evaluations evaluations={this.state.evaluations} />
+      </div>
+    );
+  }
+}
+
+export default EmployeeDetails;
diff --git a/src/app/EmployeesHistory/Components/EmployeeSummary.js b/src/app/EmployeesHistory/Components/EmployeeSummary.js
new file mode 100644
index 0000000..13f5f60
--- /dev/null
+++ b/src/app/EmployeesHistory/Components/EmployeeSummary.js
@@ -0,0 +1,46 @@
+import React, { Component } from 'react';
+import ItemsList from './ItemsList';
+import ProjectsItemList from './ProjectsItemList';
+
+class EmployeeSummary extends Component {
+  render() {
+    const employee = this.props.employee;
+
+    return (
+      <div>
+        <br />
+        <strong>Employee Summary</strong>
+        <table>
+          <tbody>
+            <tr>
+              <td>Joined date</td>
+              <td>
+                {employee.joinDate}
+              </td>
+            </tr>
+            <tr>
+              <td>Techinical experience</td>
+              <td>
+                <ItemsList items={employee.technicalExperience} />
+              </td>
+            </tr>
+            <tr>
+              <td>Passions</td>
+              <td>
+                <ItemsList items={employee.hobbies} />
+              </td>
+            </tr>
+            <tr>
+              <td>Projects history</td>
+              <td>
+                <ProjectsItemList items={employee.projectsHistory} />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+}
+
+export default EmployeeSummary;
diff --git a/src/app/EmployeesHistory/Components/EvaluationItemsList.js b/src/app/EmployeesHistory/Components/EvaluationItemsList.js
new file mode 100644
index 0000000..ce44f4e
--- /dev/null
+++ b/src/app/EmployeesHistory/Components/EvaluationItemsList.js
@@ -0,0 +1,18 @@
+import React from 'react';
+
+const EvaluationItemsList = props => {
+  const evaluationItems = props.items.map((item, index) => {
+    return (
+      <li key={index}>
+        <i>{item.date}</i>: {item.feedback}
+      </li>
+    );
+  });
+  return (
+    <ul>
+      {evaluationItems}
+    </ul>
+  );
+};
+
+export default EvaluationItemsList;
diff --git a/src/app/EmployeesHistory/Components/Evaluations.js b/src/app/EmployeesHistory/Components/Evaluations.js
new file mode 100644
index 0000000..d60400b
--- /dev/null
+++ b/src/app/EmployeesHistory/Components/Evaluations.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import EvaluationItemsList from './EvaluationItemsList';
+
+const Evaluations = props => {
+  return (
+    <div>
+      <strong>Evaluations</strong>
+      <EvaluationItemsList items={props.evaluations} />
+    </div>
+  );
+};
+
+export default Evaluations;
diff --git a/src/app/EmployeesHistory/Components/ItemsList.js b/src/app/EmployeesHistory/Components/ItemsList.js
new file mode 100644
index 0000000..704c04a
--- /dev/null
+++ b/src/app/EmployeesHistory/Components/ItemsList.js
@@ -0,0 +1,27 @@
+import React from 'react';
+
+class ItemsList extends React.Component {
+  state = { items: [] };
+
+  componentWillReceiveProps(nextProps) {
+    this.setState({ items: nextProps.items });
+  }
+
+  render() {
+    const listItems = this.state.items.map((value, index) => {
+      return (
+        <li key={index}>
+          {value}
+        </li>
+      );
+    });
+
+    return (
+      <ul>
+        {listItems}
+      </ul>
+    );
+  }
+}
+
+export default ItemsList;
diff --git a/src/app/EmployeesHistory/Components/ProjectsHistoryDetails.js b/src/app/EmployeesHistory/Components/ProjectsHistoryDetails.js
new file mode 100644
index 0000000..672b034
--- /dev/null
+++ b/src/app/EmployeesHistory/Components/ProjectsHistoryDetails.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import ProjectsTimeline from './ProjectsTimeline';
+
+const ProjectsHistoryDetails = props => {
+  return (
+    <div>
+      <strong>Projects</strong>
+      <ProjectsTimeline projectsTimeline={props.projectsHistory} />
+    </div>
+  );
+};
+
+export default ProjectsHistoryDetails;
diff --git a/src/app/EmployeesHistory/Components/ProjectsItemList.js b/src/app/EmployeesHistory/Components/ProjectsItemList.js
new file mode 100644
index 0000000..44e6780
--- /dev/null
+++ b/src/app/EmployeesHistory/Components/ProjectsItemList.js
@@ -0,0 +1,27 @@
+import React from 'react';
+
+class ProjectItemList extends React.Component {
+  state = { items: [] };
+
+  componentWillReceiveProps(nextProps) {
+    this.setState({ items: nextProps.items });
+  }
+
+  render() {
+    const listItems = this.state.items.map((value, index) => {
+      return (
+        <li key={index}>
+          {value.projectName}
+        </li>
+      );
+    });
+
+    return (
+      <ul>
+        {listItems}
+      </ul>
+    );
+  }
+}
+
+export default ProjectItemList;
diff --git a/src/app/EmployeesHistory/Components/ProjectsTimeline.js b/src/app/EmployeesHistory/Components/ProjectsTimeline.js
new file mode 100644
index 0000000..69b38d5
--- /dev/null
+++ b/src/app/EmployeesHistory/Components/ProjectsTimeline.js
@@ -0,0 +1,20 @@
+import React from 'react';
+
+const ProjectsTimeline = props => {
+  const timelines = props.projectsTimeline.map((projectTimeline, index) => {
+    return (
+      <li key={index}>
+        <strong>{projectTimeline.projectName}</strong> : ({projectTimeline.startDate}{' '}
+        - {projectTimeline.endDate})
+      </li>
+    );
+  });
+
+  return (
+    <ul>
+      {timelines}
+    </ul>
+  );
+};
+
+export default ProjectsTimeline;
diff --git a/src/app/EmployeesHistory/Components/employeeDetails.js b/src/app/EmployeesHistory/Components/employeeDetails.js
new file mode 100644
index 0000000..8049764
--- /dev/null
+++ b/src/app/EmployeesHistory/Components/employeeDetails.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import ProjectsHistoryDetails from './ProjectsHistoryDetails';
+import Evaluations from './Evaluations';
+
+class EmployeeDetails extends React.Component {
+  state = {
+    projectsHistory: [],
+    evaluations: []
+  };
+
+  componentWillReceiveProps(nextProps) {
+    this.setState({
+      projectsHistory: nextProps.employee.projectsHistory,
+      evaluations: nextProps.employee.employeeEvaluations
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <strong>Employee Details</strong>
+        <hr style={{ borderTop: 'dotted 1p' }} />
+        <ProjectsHistoryDetails projectsHistory={this.state.projectsHistory} />
+        <br />
+        <Evaluations evaluations={this.state.evaluations} />
+      </div>
+    );
+  }
+}
+
+export default EmployeeDetails;
diff --git a/src/app/EmployeesHistory/Components/employeeSummary.js b/src/app/EmployeesHistory/Components/employeeSummary.js
new file mode 100644
index 0000000..13f5f60
--- /dev/null
+++ b/src/app/EmployeesHistory/Components/employeeSummary.js
@@ -0,0 +1,46 @@
+import React, { Component } from 'react';
+import ItemsList from './ItemsList';
+import ProjectsItemList from './ProjectsItemList';
+
+class EmployeeSummary extends Component {
+  render() {
+    const employee = this.props.employee;
+
+    return (
+      <div>
+        <br />
+        <strong>Employee Summary</strong>
+        <table>
+          <tbody>
+            <tr>
+              <td>Joined date</td>
+              <td>
+                {employee.joinDate}
+              </td>
+            </tr>
+            <tr>
+              <td>Techinical experience</td>
+              <td>
+                <ItemsList items={employee.technicalExperience} />
+              </td>
+            </tr>
+            <tr>
+              <td>Passions</td>
+              <td>
+                <ItemsList items={employee.hobbies} />
+              </td>
+            </tr>
+            <tr>
+              <td>Projects history</td>
+              <td>
+                <ProjectsItemList items={employee.projectsHistory} />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+}
+
+export default EmployeeSummary;
diff --git a/src/app/EmployeesHistory/Components/evaluationItemsList.js b/src/app/EmployeesHistory/Components/evaluationItemsList.js
new file mode 100644
index 0000000..ce44f4e
--- /dev/null
+++ b/src/app/EmployeesHistory/Components/evaluationItemsList.js
@@ -0,0 +1,18 @@
+import React from 'react';
+
+const EvaluationItemsList = props => {
+  const evaluationItems = props.items.map((item, index) => {
+    return (
+      <li key={index}>
+        <i>{item.date}</i>: {item.feedback}
+      </li>
+    );
+  });
+  return (
+    <ul>
+      {evaluationItems}
+    </ul>
+  );
+};
+
+export default EvaluationItemsList;
diff --git a/src/app/EmployeesHistory/Components/evaluations.js b/src/app/EmployeesHistory/Components/evaluations.js
new file mode 100644
index 0000000..d60400b
--- /dev/null
+++ b/src/app/EmployeesHistory/Components/evaluations.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import EvaluationItemsList from './EvaluationItemsList';
+
+const Evaluations = props => {
+  return (
+    <div>
+      <strong>Evaluations</strong>
+      <EvaluationItemsList items={props.evaluations} />
+    </div>
+  );
+};
+
+export default Evaluations;
diff --git a/src/app/EmployeesHistory/Components/itemsList.js b/src/app/EmployeesHistory/Components/itemsList.js
new file mode 100644
index 0000000..704c04a
--- /dev/null
+++ b/src/app/EmployeesHistory/Components/itemsList.js
@@ -0,0 +1,27 @@
+import React from 'react';
+
+class ItemsList extends React.Component {
+  state = { items: [] };
+
+  componentWillReceiveProps(nextProps) {
+    this.setState({ items: nextProps.items });
+  }
+
+  render() {
+    const listItems = this.state.items.map((value, index) => {
+      return (
+        <li key={index}>
+          {value}
+        </li>
+      );
+    });
+
+    return (
+      <ul>
+        {listItems}
+      </ul>
+    );
+  }
+}
+
+export default ItemsList;
diff --git a/src/app/EmployeesHistory/Components/projectsHistoryDetails.js b/src/app/EmployeesHistory/Components/projectsHistoryDetails.js
new file mode 100644
index 0000000..672b034
--- /dev/null
+++ b/src/app/EmployeesHistory/Components/projectsHistoryDetails.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import ProjectsTimeline from './ProjectsTimeline';
+
+const ProjectsHistoryDetails = props => {
+  return (
+    <div>
+      <strong>Projects</strong>
+      <ProjectsTimeline projectsTimeline={props.projectsHistory} />
+    </div>
+  );
+};
+
+export default ProjectsHistoryDetails;
diff --git a/src/app/EmployeesHistory/Components/projectsTimeline.js b/src/app/EmployeesHistory/Components/projectsTimeline.js
new file mode 100644
index 0000000..69b38d5
--- /dev/null
+++ b/src/app/EmployeesHistory/Components/projectsTimeline.js
@@ -0,0 +1,20 @@
+import React from 'react';
+
+const ProjectsTimeline = props => {
+  const timelines = props.projectsTimeline.map((projectTimeline, index) => {
+    return (
+      <li key={index}>
+        <strong>{projectTimeline.projectName}</strong> : ({projectTimeline.startDate}{' '}
+        - {projectTimeline.endDate})
+      </li>
+    );
+  });
+
+  return (
+    <ul>
+      {timelines}
+    </ul>
+  );
+};
+
+export default ProjectsTimeline;
diff --git a/src/app/EmployeesHistory/EmployeeHistory.css b/src/app/EmployeesHistory/EmployeeHistory.css
new file mode 100644
index 0000000..84f1681
--- /dev/null
+++ b/src/app/EmployeesHistory/EmployeeHistory.css
@@ -0,0 +1,16 @@
+table {
+  font-family: arial, sans-serif;
+  border-collapse: collapse;
+  width: 100%;
+}
+
+td,
+th {
+  border: 1px solid #dddddd;
+  text-align: left;
+  padding: 8px;
+}
+
+tr:nth-child(even) {
+  background-color: #dddddd;
+}
diff --git a/src/app/EmployeesHistory/database/employeeHistory.json b/src/app/EmployeesHistory/database/employeeHistory.json
new file mode 100644
index 0000000..d8bb553
--- /dev/null
+++ b/src/app/EmployeesHistory/database/employeeHistory.json
@@ -0,0 +1,35 @@
+{
+  "employees": [
+    {
+      "id": 1,
+      "name": "Ion",
+      "joinDate": "22/06/2015",
+      "technicalExperience": ["Java", "React", "Css"],
+      "hobbies": ["Football", "Reading"],
+      "projectsHistory": [
+        {
+          "projectId": 1,
+          "projectName": "Project 1",
+          "startDate": "10/05/2015",
+          "endDate": "10/05/2016"
+        },
+        {
+          "projectId": 2,
+          "projectName": "Project 2",
+          "startDate": "19/07/2016",
+          "endDate": "04/07/2017"
+        }
+      ],
+      "employeeEvaluations": [
+        {
+          "feedback": "Needs to improve front-end skills",
+          "date": "22/06/2016"
+        },
+        {
+          "feedback": "Promoted to TD2",
+          "date": "22/06/2017"
+        }
+      ]
+    }
+  ]
+}
diff --git a/src/app/EmployeesHistory/employeeHistoryProvider.js b/src/app/EmployeesHistory/employeeHistoryProvider.js
new file mode 100644
index 0000000..369aaa7
--- /dev/null
+++ b/src/app/EmployeesHistory/employeeHistoryProvider.js
@@ -0,0 +1,11 @@
+class EmployeeHistoryProvider {
+  endpointPath = 'http://localhost:3000';
+
+  getEmployee(employeeId) {
+    return fetch(
+      this.endpointPath + '/employees/' + employeeId
+    ).then(response => response.json());
+  }
+}
+
+export default EmployeeHistoryProvider;
diff --git a/src/app/EmployeesHistory/index.js b/src/app/EmployeesHistory/index.js
index c09cdf8..c333562 100644
--- a/src/app/EmployeesHistory/index.js
+++ b/src/app/EmployeesHistory/index.js
@@ -1,10 +1,30 @@
 import React from 'react';
+import EmployeeDetails from './Components/EmployeeDetails';
+import EmployeeSummary from './Components/EmployeeSummary';
+import EmployeeHistoryProvider from './employeeHistoryProvider';
+import './EmployeeHistory.css';
 
-const Mock = ({ match }) =>
-  <div>
-    <p>
-      {match.url}
-    </p>
-  </div>;
+const employeeProvider = new EmployeeHistoryProvider();
 
-export default Mock;
+class EmployeeHistory extends React.Component {
+  employeeId = 1;
+  state = { currentEmployee: {} };
+
+  componentDidMount() {
+    employeeProvider.getEmployee(this.employeeId).then(data => {
+      this.setState({ currentEmployee: data });
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <EmployeeSummary employee={this.state.currentEmployee} />
+        <br />
+        <br />
+        <EmployeeDetails employee={this.state.currentEmployee} />
+      </div>
+    );
+  }
+}
+export default EmployeeHistory;