diff --git a/.gitignore b/.gitignore
index 7a1537ba..0ba7aef1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 .idea
-node_modules
+node_modules/
+.DS_Store
diff --git a/README.md b/README.md
old mode 100644
new mode 100755
index ba20ee01..b48916f1
--- a/README.md
+++ b/README.md
@@ -1,52 +1,56 @@
-# PHP BASIC APPLICATION TO MANAGE AN EMPLOYEES LIST
 
-## Application main points
-
-1. Login and logout with a json file as user storage
-2. Controlled user session set to 10 minutes
-3. Show data from a JSON in a JS Grid
-4. Pagination of the data configured by the grid
-5. Employees CRUD Create Read Delete and Update with a json file as employees storage
-6. Employee page with employee detail
-7. External web service to get employees images
-8. Employee avatar through web service images
-
-### File structure
-
-This file structure has a specific purpose. So you have to implement all the required over it. Later when we get to OPP and MySQL we will refactor the project to get it more sophisticated, modern and cleaner. Please take care of it!!
-
-```
-assets/
-resources/
-src/
+# PHP BASIC APPLICATION TO MANAGE AN EMPLOYEES LIST  
+  
+  
+## Application main points  
+  
+1. Login and logout with a json file as user storage  
+2. Controlled user session set to 10 minutes  
+3. Show data from a JSON in a JS Grid  
+4. Pagination of the data configured by the grid  
+5. Employees CRUD Create Read Delete and Update with a json file as employees storage  
+6. Employee page  with employee detail  
+7. External web service to get employees images  
+8. Employee avatar through web service images  
+  
+  
+### File structure  
+This file structure has a specific purpose. So you have to implement all the required over it. Later when we get to OPP and MySQL we will refactor the project to get it more sophisticated, modern and cleaner. Please take care of it!!  
+  
+````  
+assets/  
+css/  
+resources/  
+src/  
  /library
-```
-
-- Assets contains html, css, js & images
-- Css just css files.
-- Resources folder contains users.json and employees.json
-- Src folder contains PHP files which contain HTML or JS
-- Src/library folder contains PHP files that contain just PHP
-
-**We left to you the project files in their folders to give you a structure which we want you to work with in order to later refactor it.**
-
-We use some naming conventions when create code files. For instance a file which handles HTTP request we name it as `Controller`.
-
-In the other hand we have also the concept of `Manager` which typically implements an abstraction layer over a storage system, in this case as we are going to work with json files for a while (bear on mind later we refactor it to MySQL and then we will also have a `Model` file) we would need to create on it all functions we need to access the json file.
+````
+ 
+* Assets contains images and plain HTML files.  
+* Css just css files.  
+* Resources folder contains users.json and employees.json  
+* Src folder contains PHP files which contain HTML or JS  
+* Src/library folder contains PHP files that contain just PHP  
+  
+**We left to you the project files in their folders to give you a structure which we want you to work with in order to later refactor it.**  
+  
+We use some naming conventions when create code files. For instance a file which handles HTTP request we name it as `Controller`.  
+  
+In the other hand we have also the concept of `Manager` which typically implements an abstraction layer over a storage system, in this case as we are going to work with json files for a while (bear on mind later we refactor it to MySQL and then we will also have a `Model` file) we would need to create on it all functions we need to access the json file. 
 
 A file called `Model` implements a database layer is a file which interacts directly with a Database. **On future projects we will refactor this project to add Models and much more!!**
 
-We also added the concept of `Helper` which is a class which its finality is to help `Controllers` and `Managers` to be lighter and to keep single responsibility.
+We also added the concept of `Helper` which is a class which its finality is to help `Controllers` and `Managers` to be lighter and to keep single responsibility.  
 
-```
+
+```  
 index.php // which is the entry point of the application. The login view
-employeeController.php // file which has JUST the php code to handle employees request
+employeeController.php // file which has JUST the php code to handle employees request  
 employeeManager.php // In this file we left you a list of named mehtods to implement and use.
 
-loginController.php // here you need to handle all HTTP request of login things
-loginManager.php // same thing here you need to write things as login validation logout etc..
+loginController.php // here you need to handle all HTTP request of login things  
+loginManager.php // same thing here you need to write things as login validation logout etc..  
 
-sessionHelper.php // here you can add the code to check if the user session has expired.
+sessionHelper.php // here you can add the code to check if the user session has expired.  
 ```
 
 The sessionHelper file need to be added to each page we visit in order to check if the user session has expired and if so to call the methods of the loginManager to logout the admin user.
@@ -56,208 +60,206 @@ The sessionHelper file need to be added to each page we visit in order to check
 As you have seen in JS there are sentences to import code from other files to the current file we are working. In PHP happens the same thing. And as we want to encapsulate code by concepts( the login page request are managed by a loginController and so on) it is required to import files.
 
 So for instance a dashboard.php page can look like this at the beginning of the file:
-
 ```
- <?php
+ <?php  
 include "./library/sessionHelper.php";  // we added the code of the helper to check session
-
-include "../assets/html/header.html"; // the header file that we also include it on every page
+  
+include "../assets/header.html"; // the header file that we also include it on every page
 ?>
-<div id="alert" class="alert alert-danger w-25 mx-auto text-center" data-dismiss="alert" aria-label="Close" role="alert"></div>
-<div id="employeesGrid" class="ml-5"></div>
+<div id="alert" class="alert alert-danger w-25 mx-auto text-center" data-dismiss="alert" aria-label="Close" role="alert"></div>  
+<div id="employeesGrid" class="ml-5"></div>  
 <script>
 ..............
 ```
 
 So when the server returns the processed file, PHP has changed all `include` sentences by the code that is on that files.
 Let's make it clearer. Let's say that we have a sessionHelper which has this code.
-
 ```
-session_start();
-if(isset($_SESSION['userId'])) {
-    if(time() - $_SESSION['time'] > $_SESSION['lifeTime']) {
-        logout();
-		....
-  }
-} else {
+session_start();  
+if(isset($_SESSION['userId'])) {  
+    if(time() - $_SESSION['time'] > $_SESSION['lifeTime']) {  
+        logout();  
+		.... 
+  }  
+} else {  
 	.....
 }
 ```
-
 And we want to include it on every page user visits in order to check if his session is still valid. We just need to do this to include it for instance on `dashboard.php` file.
 
 ```
 <?php include "./library/sessionHelper.php";?>
 
-<div id="alert" class="alert alert-danger w-25 mx-auto text-center" data-dismiss="alert" aria-label="Close" role="alert"></div>
+<div id="alert" class="alert alert-danger w-25 mx-auto text-center" data-dismiss="alert" aria-label="Close" role="alert"></div>  
 ..............
 ```
-
 So what we have done is to include literally that `if else` of the helper at the top of the `dashboard.php` file. We can do this with all files we need.
 
-### Project key points
-
-The user is stored in `resouces/users.json` file there you have an admin user work with it.
-
+  
+### Project key points  
+  
+The user is stored in `resouces/users.json` file there you have an admin user work with it.  
+  
 The employees are stored `resouces/employees.json` file you have to make a CRUD over this file
-
+  
+  
+  
 You should follow with coherence the project structure we give you and when you add files or functions make them self-descriptive. As you could see in the methodology we left on the project.
-
-```
-$data = getAllData($id); // get employee data
-$employee = getEmployee($id);// just reading we know that gets employee by id, cool! and clean!
-```
-
-The functions you create have to be coherent, the naming is a serious affair. You can write in such a way that everything describes itself.
-
-Same thing for variables, it is really important to give proper names.
-
-```
-$data = "John";
-$name = 'John;// no words needed
-```
-
-And yeah! also same thing for every file you create give sense and coherence to it.
-
-[About naming](https://dzone.com/articles/naming-conventions-from-uncle-bobs-clean-code-phil)
-
-## External libraries
-
-All them must be installed with the npm here you have a package.json take a look please.
-
-- [Bootstrap](https://getbootstrap.com/)
-- [Bootstrap icons](https://icons.getbootstrap.com/)
-- [JSGrid](http://js-grid.com/)
-
-## Images Web Service for the extra feature
-
-As we explained in the pdf document of this project we will use [this images api](https://uifaces.co/)
-
+  
+````  
+$data = getAllData($id); // get employee data  
+$employee = getEmployee($id);// just reading we know that gets employee by id, cool! and clean!  
+````  
+  
+The functions you create have to be coherent, the naming is a serious affair. You can write in such a way that everything describes itself.  
+  
+Same thing for variables, it is really important to give proper names.  
+  
+````  
+$data = "John";  
+$name = 'John;// no words needed  
+````  
+  
+
+And yeah! also same thing for every file you create give sense and coherence to it.  
+  
+
+[About naming](https://dzone.com/articles/naming-conventions-from-uncle-bobs-clean-code-phil)  
+  
+
+  
+## External libraries  
+  
+All them must be installed with the npm here you have a package.json take a look please.  
+  
+* [Bootstrap](https://getbootstrap.com/)  
+* [Bootstrap icons](https://icons.getbootstrap.com/)  
+* [JSGrid](http://js-grid.com/)  
+
+## Images Web Service for the extra feature  
+  
+As we explained in the pdf document of this project we will use [this images api](https://uifaces.co/) 
+
+  
 This web service in the version free that is which we are going to use has limitations. Five request per minute or thirty in an hour.  
-So if you want to develop this extra feature it would be cool to have a mocked response to develop at ease. So for this purpose we left in `resources/` folder a file called images_mock which can be used to the implementation of the extra feature once you have your code running well you need to remove this mock and to connect directly with the web service.
-
-[Read the doc!](https://uifaces.co/api-docs)
-
-## Curl
-
-In php we interact with HTTP web services through cUrl or client URL.  
-This is also a command in Unix systems. We are going to give you an over view in order to familiarise with it and then use it in the application for the extra feature.
-
+So if you want to develop this extra feature it would be cool to have a mocked response to develop at ease. So for this purpose we left in `resources/` folder a file called images_mock which can be used to the implementation of the extra feature once you have your code running well you need to remove this mock and to connect directly with the web service.   
+  
+[Read the doc!](https://uifaces.co/api-docs)  
+  
+
+## Curl  
+  
+In php we interact with HTTP web services through cUrl or client URL.   
+This is also a command in Unix systems. We are going to give you an over view in order to familiarise with it and then use it in the application for the extra feature.  
+  
 To play a little with it, You can create a script in the root folder of your web server and with these request we have here to try make GET, POST. PUT and DELETE request against this super cool service which ables to developer to post and get data from what we call a request bin.  
-[ReqBin ](https://reqbin.com/curl)
-
-#### Basic knowledge
-
-```
-<?php
-curl_init();      // initializes a session
-curl_setopt();    // changes the session behavior setting options
-curl_exec();      // executes the started session
-curl_close();     // closes the session and deletes data made by curl_init();
-```
-
-#### Adding headers to request
-
-```
-curl_setopt($curlHandler, CURLOPT_HTTPHEADER, array(
- 'Header-Key: Header-Value', 'X-API-KEY: 5d17e5de89a3e35d3902c4d667534'));
-```
-
-#### Getting error messages from cUrl
-
-```
-$curlHandler = curl_init('https://hostname.com/resource/');
-curl_setopt($curlHandler, CURLOPT_RETURNTRANSFER, true);
-
-if(curl_exec($curlHandler) === false)
-{
- echo 'Curl error: ' . curl_error($curlHandler); //gets last cUrl error as a string
-}
-```
-
-#### Get Request
-
-```
-<?php
-
-$curlHandler = curl_init();
-
-curl_setopt($curlHandler, CURLOPT_URL, 'https://hostname.com/resource');
-curl_setopt($curlHandler, CURLOPT_RETURNTRANSFER, true);
-
-$apiResponse = curl_exec($curlHandler);
-curl_close($curlHandler);
-
-$decodedResponse = json_decode($apiResponse);
-
-```
-
-#### Post Request
-
-```
-<?php
-
-$postData = [
- 'parameter1' => 'foo', 'parameter2' => 'bar'];
-
-$curlHandler = curl_init('http://hostname.com/api/resource');
-curl_setopt($curlHandler, CURLOPT_POSTFIELDS, $postData);
-curl_setopt($curlHandler, CURLOPT_RETURNTRANSFER, true);// saying cUrl to return the response in the cUrl exec call
-
-$apiResponse = curl_exec($curlHandler);
-curl_close($curlHandler);
-
-$decodedResponse = json_decode($apiResponse);
-
-```
-
-#### Post Request
-
-```
-<?php
-
-$postData = [
- 'parameter1' => 'foo', 'parameter2' => 'bar'];
-
-$curlHandler = curl_init('http://hostname.com/api/resource');
-curl_setopt($curlHandler, CURLOPT_POSTFIELDS, $postData);
-curl_setopt($curlHandler, CURLOPT_RETURNTRANSFER, true);// saying cUrl to return the response in the cUrl exec call
-
-$apiResponse = curl_exec($curlHandler);
-curl_close($curlHandler);
-
-$decodedResponse = json_decode($apiResponse);
-
-```
-
-#### Delete Request
-
-```
-$curlHandler = curl_init('http://hostname.com/api/resource');
-curl_setopt($curlHandler, CURLOPT_CUSTOMREQUEST, 'DELETE');// Setting HTTP verb that will by used for the request
-
-$apiResponse = curl_exec($curlHandler);
-$httpCode = curl_getinfo($curlHandler, CURLINFO_HTTP_CODE);// Getting http response code
-curl_close($curlHandler);
-
-$decodedResponse = json_decode($apiResponse);
-```
-
-#### All together
-
-```
-$postData = [
- 'parameter1' => 'foo', 'parameter2' => 'bar'];
-
-$curlHandler = curl_init('http://hostname.com/api/resource');
-curl_setopt($curlHandler, CURLOPT_POSTFIELDS, $postData);
-curl_setopt($curlHandler, CURLOPT_RETURNTRANSFER, true);// saying cUrl to return the response in the cUrl exec call
-
-$apiResponse = curl_exec($curlHandler);
-if (curl_errno($curlHandler)) {
- $errorMessage = curl_error($curlHandler);
- //throw error}
-curl_close($curlHandler);
-
-$decodedResponse = json_decode($apiResponse);
-```
+[ReqBin ](https://reqbin.com/curl)  
+  
+  
+#### Basic knowledge  
+  
+````  
+<?php  
+curl_init();      // initializes a session  
+curl_setopt();    // changes the session behavior setting options  
+curl_exec();      // executes the started session  
+curl_close();     // closes the session and deletes data made by curl_init();  
+````   
+#### Adding headers to request  
+```  
+curl_setopt($curlHandler, CURLOPT_HTTPHEADER, array(  
+ 'Header-Key: Header-Value', 'X-API-KEY: 5d17e5de89a3e35d3902c4d667534'));  
+```  
+  
+#### Getting error messages from cUrl  
+```  
+$curlHandler = curl_init('https://hostname.com/resource/');  
+curl_setopt($curlHandler, CURLOPT_RETURNTRANSFER, true);  
+  
+if(curl_exec($curlHandler) === false)  
+{  
+ echo 'Curl error: ' . curl_error($curlHandler); //gets last cUrl error as a string  
+}  
+```  
+  
+#### Get Request  
+```  
+<?php  
+  
+$curlHandler = curl_init();  
+  
+curl_setopt($curlHandler, CURLOPT_URL, 'https://hostname.com/resource');  
+curl_setopt($curlHandler, CURLOPT_RETURNTRANSFER, true);  
+  
+$apiResponse = curl_exec($curlHandler);  
+curl_close($curlHandler);  
+  
+$decodedResponse = json_decode($apiResponse);  
+  
+```  
+  
+#### Post Request  
+```  
+<?php  
+  
+$postData = [  
+ 'parameter1' => 'foo', 'parameter2' => 'bar'];  
+  
+$curlHandler = curl_init('http://hostname.com/api/resource');  
+curl_setopt($curlHandler, CURLOPT_POSTFIELDS, $postData);  
+curl_setopt($curlHandler, CURLOPT_RETURNTRANSFER, true);// saying cUrl to return the response in the cUrl exec call  
+  
+$apiResponse = curl_exec($curlHandler);  
+curl_close($curlHandler);  
+  
+$decodedResponse = json_decode($apiResponse);  
+  
+```  
+  
+#### Post Request  
+```  
+<?php  
+  
+$postData = [  
+ 'parameter1' => 'foo', 'parameter2' => 'bar'];  
+  
+$curlHandler = curl_init('http://hostname.com/api/resource');  
+curl_setopt($curlHandler, CURLOPT_POSTFIELDS, $postData);  
+curl_setopt($curlHandler, CURLOPT_RETURNTRANSFER, true);// saying cUrl to return the response in the cUrl exec call  
+  
+$apiResponse = curl_exec($curlHandler);  
+curl_close($curlHandler);  
+  
+$decodedResponse = json_decode($apiResponse);  
+  
+```  
+  
+#### Delete Request  
+````  
+$curlHandler = curl_init('http://hostname.com/api/resource');  
+curl_setopt($curlHandler, CURLOPT_CUSTOMREQUEST, 'DELETE');// Setting HTTP verb that will by used for the request  
+  
+$apiResponse = curl_exec($curlHandler);  
+$httpCode = curl_getinfo($curlHandler, CURLINFO_HTTP_CODE);// Getting http response code  
+curl_close($curlHandler);  
+  
+$decodedResponse = json_decode($apiResponse);  
+````  
+  
+#### All together  
+````
+$postData = [  
+ 'parameter1' => 'foo', 'parameter2' => 'bar'];  
+  
+$curlHandler = curl_init('http://hostname.com/api/resource');  
+curl_setopt($curlHandler, CURLOPT_POSTFIELDS, $postData);  
+curl_setopt($curlHandler, CURLOPT_RETURNTRANSFER, true);// saying cUrl to return the response in the cUrl exec call  
+  
+$apiResponse = curl_exec($curlHandler);  
+if (curl_errno($curlHandler)) {  
+ $errorMessage = curl_error($curlHandler);  
+ //throw error}  
+curl_close($curlHandler);  
+  
+$decodedResponse = json_decode($apiResponse);  
+````
diff --git a/assets/css/login.css b/assets/css/login.css
deleted file mode 100644
index e69de29b..00000000
diff --git a/assets/css/main.css b/assets/css/main.css
deleted file mode 100644
index e69de29b..00000000
diff --git a/assets/footer.html b/assets/footer.html
new file mode 100755
index 00000000..6510ec79
--- /dev/null
+++ b/assets/footer.html
@@ -0,0 +1,6 @@
+<footer>
+    <div class="card-footer text-muted">
+        <p class="text-center mt-3">Made By Artantza Beitia & Josep Romero Ros</p>
+        <p class="text-center">&#169 2021</p>
+    </div>
+</footer>
\ No newline at end of file
diff --git a/assets/head.html b/assets/head.html
new file mode 100755
index 00000000..bba44594
--- /dev/null
+++ b/assets/head.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Employees</title>
+		<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css" type="text/css" media="all">
+		<link
+			href="http://fonts.googleapis.com/css?family=Open+Sans:300,600,400"
+			rel="stylesheet"
+			type="text/css"
+		/>
+		<link rel="stylesheet" type="text/css" href="../css/main.css" />
+		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
+		<link
+			type="text/css"
+			rel="stylesheet"
+			href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css"
+		/>
+		<link
+			type="text/css"
+			rel="stylesheet"
+			href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css"
+		/>
+		<script
+			type="text/javascript"
+			src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"
+		></script>
+		<script src="../js/index.js" defer></script>
+		
+	</head>
+</html>
diff --git a/assets/header.html b/assets/header.html
new file mode 100755
index 00000000..be3fa5bf
--- /dev/null
+++ b/assets/header.html
@@ -0,0 +1,5 @@
+<header>
+    <div class="card-header">
+        <h1 class="text-center mt-1">Employees Manager<h1>
+    </div>
+</header>
diff --git a/assets/html/footer.html b/assets/html/footer.html
deleted file mode 100644
index e69de29b..00000000
diff --git a/assets/html/header.html b/assets/html/header.html
deleted file mode 100644
index e69de29b..00000000
diff --git a/assets/js/index.js b/assets/js/index.js
deleted file mode 100644
index e69de29b..00000000
diff --git a/css/base.css b/css/base.css
new file mode 100755
index 00000000..3c4fd66d
--- /dev/null
+++ b/css/base.css
@@ -0,0 +1,82 @@
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+html {
+	height: 100%;
+}
+
+body {
+	height: 100%;
+	padding: 10px;
+	color: #262626;
+	font-family: 'Helvetica Neue Light', 'Open Sans', Helvetica;
+	font-size: 14px;
+	font-weight: 300;
+}
+
+h1 {
+	margin: 0 0 8px 0;
+	font-size: 24px;
+	font-family: 'Helvetica Neue Light', 'Open Sans', Helvetica;
+	font-weight: 300;
+}
+
+h2 {
+	margin: 16px 0 8px 0;
+	font-size: 18px;
+	font-family: 'Helvetica Neue Light', 'Open Sans', Helvetica;
+	font-weight: 300;
+}
+
+ul {
+	list-style: none;
+}
+
+a {
+	color: #2ba6cb;
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+	color: #258faf;
+}
+
+input, button, select {
+	font-family: 'Helvetica Neue Light', 'Open Sans', Helvetica;
+	font-weight: 300;
+	font-size: 14px;
+	padding: 2px;
+}
+
+.navigation {
+	width: 200px;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	padding: 10px;
+	border-right: 1px solid #e9e9e9;
+}
+
+.navigation li {
+	margin: 10px 0;
+}
+
+.demo-frame {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 200px;
+}
+
+iframe[name='demo'] {
+	display: block;
+	width: 100%;
+	height: 100%;
+	border: none;
+}
\ No newline at end of file
diff --git a/css/login.css b/css/login.css
new file mode 100755
index 00000000..06cf2fb9
--- /dev/null
+++ b/css/login.css
@@ -0,0 +1,7 @@
+.alert__msg{
+    position: relative;
+    background-color: rgb(219, 246, 255);
+    padding: 4vh;
+    border: 1px solid lightgray;
+    border-radius: 5%;
+}
\ No newline at end of file
diff --git a/css/main.css b/css/main.css
new file mode 100755
index 00000000..d9087f09
--- /dev/null
+++ b/css/main.css
@@ -0,0 +1,2 @@
+@import 'base.css';
+@import 'login.css';
\ No newline at end of file
diff --git a/index.php b/index.php
old mode 100644
new mode 100755
index e117ab86..a7f9f473
--- a/index.php
+++ b/index.php
@@ -1 +1,67 @@
 <!-- TODO Application entry point. Login view -->
+<?php require_once("./src/library/sessionHelper.php"); 
+    $warning = checkSession();
+	
+?>
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Employees</title>
+		<link
+			href="http://fonts.googleapis.com/css?family=Open+Sans:300,600,400"
+			rel="stylesheet"
+			type="text/css"
+		/>
+		<link rel="stylesheet" type="text/css" href="./css/main.css" />
+		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
+		<link
+			type="text/css"
+			rel="stylesheet"
+			href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css"
+		/>
+		<link
+			type="text/css"
+			rel="stylesheet"
+			href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css"
+		/>
+		<script
+			type="text/javascript"
+			src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"
+		></script>
+		<script src="./js/index.js" defer></script>
+		<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css" type="text/css" media="all">
+	</head>
+</html>
+<body>
+	<?php require_once("./assets/header.html"); ?>
+	<main class="container d-flex align-items-center justify-content-around">
+       <div>
+            <h3 class="mb-4">Please Log in</h3>
+            <form action="./src/library/loginController.php" method="POST" class="form">
+                <div>
+                    <input name="email" type="email" id="email" placeholder="Email" required></input>
+                </div>
+                <div>
+                    <input name="pass" type="password" id="password" placeholder="Password" required></input>
+                </div>
+                <div>
+                    <button type="submit" class="btn-3d">Submit</button>
+                </div>
+                
+            </form>
+        </div>
+		<div>
+		<?= $warning ? "<div class='alert__msg alert-$warning[type]' role='alert'>$warning[text]</div>" : "" ?>
+		<?php if(isset($_GET["logout"])){
+			echo "<div class='alert__msg alert-danger'>You have logged out or your session has expired</div>";
+		}	?>	
+		</div>
+    </main>
+    <div>
+    </div>
+    <?php require_once("./assets/footer.html"); ?>
+</body>
+</html>
\ No newline at end of file
diff --git a/js/index.js b/js/index.js
new file mode 100755
index 00000000..e794d69c
--- /dev/null
+++ b/js/index.js
@@ -0,0 +1,72 @@
+$('#jsGrid').jsGrid({
+	width: '100%',
+	filtering: true,
+	editing: true,
+	inserting: true,
+	sorting: true,
+	paging: true,
+	autoload: true,
+	pageSize: 15,
+	pageButtonCount: 5,
+	controller: {
+		loadData: function (filter) {
+			return $.ajax({
+				type: 'GET',
+				url: '../src/library/employeeController.php',
+				data: filter,
+				success: function (response) {
+					console.log('GET: ', response)
+				},
+			})
+		},
+		insertItem: function (item) {
+			return $.ajax({
+				type: 'POST',
+				url: '../src/library/employeeController.php',
+				data: { newEmployee: item },
+				success: function (response) {
+					console.log('POST: ', response)
+				},
+			})
+		},
+		updateItem: function (item) {
+			return $.ajax({
+				type: 'PUT',
+				url: '../src/library/employeeController.php',
+				data: { item },
+				success: function (response) {
+					console.log('PUT: ', response)
+				},
+			})
+		},
+		deleteItem: function (item) {
+			return $.ajax({
+				type: 'DELETE',
+				url: '../src/library/employeeController.php',
+				data: { itemId: item.id },
+				success: function (response) {
+					console.log('DELETE: ', response)
+				},
+			})
+		},
+	},
+
+	fields: [
+		{ name: 'id', type: 'text', width: 30 },
+		{ name: 'name', type: 'text', width: 80, title: 'Name' },
+		{ name: 'email', type: 'text', width: 100, title: 'Email' },
+		{ name: 'age', type: 'number', width: 50, title: 'Age' },
+		{ name: 'streetAddress', type: 'text', width: 50, title: 'Street No.' },
+		{ name: 'city', type: 'text', width: 100, title: 'City' },
+		{ name: 'state', type: 'text', width: 50, title: 'Phone State' },
+		{
+			name: 'postalCode',
+			type: 'text',
+			width: 150,
+			title: 'Phone Postal Code',
+		},
+		{ name: 'phoneNumber', type: 'text', width: 150, title: 'Phone Number' },
+
+		{ type: 'control' },
+	],
+})
diff --git a/package-lock.json b/package-lock.json
new file mode 100755
index 00000000..380115f4
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,101 @@
+{
+  "name": "assemblerschool",
+  "version": "1.0.0",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "assemblerschool",
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "bootstrap": "^4.6.1",
+        "bootstrap-icons": "^1.0.0-alpha4",
+        "jquery": "^3.6.0",
+        "jquery-1.8": "^1.8.3",
+        "jsgrid": "^1.5.3"
+      }
+    },
+    "node_modules/bootstrap": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.1.tgz",
+      "integrity": "sha512-0dj+VgI9Ecom+rvvpNZ4MUZJz8dcX7WCX+eTID9+/8HgOkv3dsRzi8BGeZJCQU6flWQVYxwTQnEZFrmJSEO7og==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/bootstrap"
+      },
+      "peerDependencies": {
+        "jquery": "1.9.1 - 3",
+        "popper.js": "^1.16.1"
+      }
+    },
+    "node_modules/bootstrap-icons": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.7.0.tgz",
+      "integrity": "sha512-x2ORQ3lv1QdSnIzzQdU8mf83fbCq4FIaUinrAWw+a/d186vO3Ph7qUfqzvQDBA41AD6IoxdRHD6zUt9IXC1J6A==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/jquery": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
+      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
+    },
+    "node_modules/jquery-1.8": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/jquery-1.8/-/jquery-1.8-1.8.3.tgz",
+      "integrity": "sha1-Bbzg17NK6QpQ03T1CLcK2Gl/FtE="
+    },
+    "node_modules/jsgrid": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/jsgrid/-/jsgrid-1.5.3.tgz",
+      "integrity": "sha1-sV/EJkgxU77itrVnMS9nXZKDSg0="
+    },
+    "node_modules/popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
+      "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    }
+  },
+  "dependencies": {
+    "bootstrap": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.1.tgz",
+      "integrity": "sha512-0dj+VgI9Ecom+rvvpNZ4MUZJz8dcX7WCX+eTID9+/8HgOkv3dsRzi8BGeZJCQU6flWQVYxwTQnEZFrmJSEO7og==",
+      "requires": {}
+    },
+    "bootstrap-icons": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.7.0.tgz",
+      "integrity": "sha512-x2ORQ3lv1QdSnIzzQdU8mf83fbCq4FIaUinrAWw+a/d186vO3Ph7qUfqzvQDBA41AD6IoxdRHD6zUt9IXC1J6A=="
+    },
+    "jquery": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
+      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
+    },
+    "jquery-1.8": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/jquery-1.8/-/jquery-1.8-1.8.3.tgz",
+      "integrity": "sha1-Bbzg17NK6QpQ03T1CLcK2Gl/FtE="
+    },
+    "jsgrid": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/jsgrid/-/jsgrid-1.5.3.tgz",
+      "integrity": "sha1-sV/EJkgxU77itrVnMS9nXZKDSg0="
+    },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
+      "peer": true
+    }
+  }
+}
diff --git a/package.json b/package.json
old mode 100644
new mode 100755
index 9cfa9ad1..9459c0d9
--- a/package.json
+++ b/package.json
@@ -9,9 +9,10 @@
   "author": "Jose Manuel Orts",
   "license": "ISC",
   "dependencies": {
-    "bootstrap": "^4.5.0",
+    "bootstrap": "^4.6.1",
     "bootstrap-icons": "^1.0.0-alpha4",
-    "jquery": "^3.5.1",
+    "jquery": "^3.6.0",
+    "jquery-1.8": "^1.8.3",
     "jsgrid": "^1.5.3"
   }
 }
diff --git a/resources/images_mock.json b/resources/images_mock.json
old mode 100644
new mode 100755
diff --git a/resources/users.json b/resources/users.json
old mode 100644
new mode 100755
diff --git a/src/dashboard.php b/src/dashboard.php
old mode 100644
new mode 100755
index bd0bef21..5107fa86
--- a/src/dashboard.php
+++ b/src/dashboard.php
@@ -1 +1,22 @@
 <!-- TODO Main view or Employees Grid View here is where you get when logged here there's the grid of employees -->
+
+<?php include '../assets/head.html';
+	require_once("./library/sessionHelper.php");
+	session_start();
+	timeExpires();
+?>
+
+<body>
+	<div class="d-flex justify-content-between">
+		<h1>dashboard</h1>
+		<a href="./library/loginController.php?logout"><button class="btn">log out</button></a>
+	</div>
+	<a href="./employee.php">Go to employee</a>
+	<p>Hola: <?php 
+			if(isset($_SESSION["name"])) {
+				echo $_SESSION["name"];
+			}
+	?> </p>
+	<div id="jsGrid"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/employee.php b/src/employee.php
old mode 100644
new mode 100755
index 2ac36b1d..f10d00e1
--- a/src/employee.php
+++ b/src/employee.php
@@ -1 +1,12 @@
 <!-- TODO Employee view -->
+<?php include '../assets/head.html';
+	require_once("./library/sessionHelper.php");
+	session_start();
+	timeExpires();
+	?>
+<body>
+	<h1>employee</h1>
+	<a href="./dashboard.php">Go back</a>
+	
+</body>
+</html>
\ No newline at end of file
diff --git a/src/imageGallery.php b/src/imageGallery.php
old mode 100644
new mode 100755
diff --git a/src/library/avatarsApi.php b/src/library/avatarsApi.php
old mode 100644
new mode 100755
diff --git a/src/library/employeeController.php b/src/library/employeeController.php
old mode 100644
new mode 100755
index e69de29b..cb21b045
--- a/src/library/employeeController.php
+++ b/src/library/employeeController.php
@@ -0,0 +1,31 @@
+<?php
+	include_once('./employeeManager.php');
+
+	switch ($_SERVER['REQUEST_METHOD']) {
+		case 'GET': // loadData
+			header("Content-Type: application/json");
+			getEmployeesData();
+			break;
+
+		case 'POST': // insertItem
+			if(isset($_POST['newEmployee'])) {
+				print_r($_POST['newEmployee']);
+				addEmployee($_POST['newEmployee']);
+			}
+			break;
+
+		case 'PUT': // updateItem
+			parse_str(file_get_contents("php://input"), $put_vars);
+			if(isset($put_vars['item'])) {
+				updateEmployee([1,2,3]);
+			}
+			break;
+
+		case 'DELETE': // deleteItem
+			parse_str(file_get_contents("php://input"), $put_vars);
+			if(isset($put_vars['itemId'])) {
+				deleteEmployee($put_vars['itemId']);
+			}
+			break;
+	}
+?>
\ No newline at end of file
diff --git a/src/library/employeeManager.php b/src/library/employeeManager.php
old mode 100644
new mode 100755
index 257c204e..bdb05fdb
--- a/src/library/employeeManager.php
+++ b/src/library/employeeManager.php
@@ -1,31 +1,66 @@
 <?php
-/**
- * EMPLOYEE FUNCTIONS LIBRARY
- *
- * @author: Jose Manuel Orts
- * @date: 11/06/2020
- */
-
-function addEmployee(array $newEmployee)
-{
-// TODO implement it
-}
+// /**
+//  * EMPLOYEE FUNCTIONS LIBRARY
+//  *
+//  * @author: Jose Manuel Orts
+//  * @date: 11/06/2020
+//  */
 
+function addEmployee(array $newEmployee) {
+	$employeeArray = json_decode(file_get_contents("../../resources/employees.json"), true);
+	$newArray = array();
+	$id = Array();
 
-function deleteEmployee(string $id)
-{
+	foreach($employeeArray as $employee) {
+		$id[] = $employee["id"];
+	}
+echo $id;
+	$newId = max($id) + 1;
+	$newArray = array(
+		"id" => $newEmployee[$newId],
+		"name" => $newEmployee["name"],
+		"email" => $newEmployee["email"],
+		"age" => $newEmployee["age"],
+		"streetAddress" => $newEmployee["streetAddress"],
+		"city" => $newEmployee["city"],
+		"state" => $newEmployee["state"],
+		"postalCode" => $newEmployee["postalCode"],
+		"phoneNumber" => $newEmployee["phoneNumber"],
+	);
+
+	array_push($employeeArray, $newArray);
+
+	file_put_contents("../../resources/employees.json", json_encode($employeeArray));
 // TODO implement it
 }
 
+function deleteEmployee(string $id) {
+	$employeesArray = json_decode(file_get_contents("../../resources/employees.json"), true);
+	$newArray = array();
 
-function updateEmployee(array $updateEmployee)
-{
+	foreach($employeesArray as $index => $employee) {
+		if($employee["id"] === $id) {
+			unset($employeesArray[$index]);
+		} else {
+			array_push($newArray, $employee);
+		}
+	}
+	file_put_contents("../../resources/employees.json", json_encode($newArray));
+}
+
+function updateEmployee(array $updateEmployee) {
+	$employeeArray = json_decode(file_get_contents("../../resources/employees.json"));
+	 $id = 0;
+	foreach($employeeArray as $employee) {
+		$id ++;
+	}
 // TODO implement it
+	echo print_r($employeeArray);
+
 }
 
 
-function getEmployee(string $id)
-{
+function getEmployee(string $id) {
 // TODO implement it
 }
 
@@ -43,5 +78,10 @@ function getQueryStringParameters(): array
 
 function getNextIdentifier(array $employeesCollection): int
 {
+
 // TODO implement it
 }
+
+function getEmployeesData() {
+	echo file_get_contents("../../resources/employees.json");
+}
diff --git a/src/library/loginController.php b/src/library/loginController.php
old mode 100644
new mode 100755
index e69de29b..12ae8e0c
--- a/src/library/loginController.php
+++ b/src/library/loginController.php
@@ -0,0 +1,14 @@
+<?php
+    require_once("./loginManager.php");
+
+    if(isset($_GET["logout"])){
+        logOut();
+    } 
+    else if(isset($_POST["email"]) && isset($_POST["pass"])){
+            $email = $_POST["email"];
+            $pass = $_POST["pass"];
+            authUser($email,$pass);
+        }
+        
+        
+        
\ No newline at end of file
diff --git a/src/library/loginManager.php b/src/library/loginManager.php
old mode 100644
new mode 100755
index e69de29b..180bbb35
--- a/src/library/loginManager.php
+++ b/src/library/loginManager.php
@@ -0,0 +1,37 @@
+<?php
+    function authUser($email, $pass){
+        
+        $userJson = file_get_contents("../../resources/users.json");
+        $userData = json_decode($userJson, true);
+
+        if($email == $userData["users"][0]["email"] && password_verify($pass, $userData["users"][0]["password"])){
+            session_start();
+
+            $_SESSION["email"] = $email;
+            $_SESSION["name"] = $userData["users"][0]["name"];
+            $_SESSION["expTime"] = 10;
+            $_SESSION["time"] = time();
+            
+            header("Location:../dashboard.php");
+        }
+        else{
+            session_start();
+
+            $_SESSION["wrongLogin"] = "Wrong email or password!";
+            header("Location:../../index.php");
+        }
+    }
+
+    function logOut(){
+        session_start();
+        unset($_SESSION);
+        if (ini_get("session.use_cookies")) {
+            $params = session_get_cookie_params();
+            setcookie(session_name(), '', time() - 42000,
+                $params["path"], $params["domain"],
+                $params["secure"], $params["httponly"]
+            );
+        }
+        session_destroy();
+        header("Location:../../index.php?logout");
+    }
\ No newline at end of file
diff --git a/src/library/sessionHelper.php b/src/library/sessionHelper.php
old mode 100644
new mode 100755
index e69de29b..9e43a946
--- a/src/library/sessionHelper.php
+++ b/src/library/sessionHelper.php
@@ -0,0 +1,27 @@
+<?php  
+    function checkSession(){
+        
+    session_start();
+        
+    if(isset($_SESSION["email"])){
+        header("Location:./src/dashboard.php");
+    }
+    else if(isset($_GET["logout"])){
+        header("refresh:5, index.php");
+    }
+    else if (isset($_SESSION["wrongLogin"])){
+        $errorMsg =  $_SESSION["wrongLogin"];
+        unset($_SESSION);
+        session_destroy();
+        return ["type" => "danger", "text" => $errorMsg] ;
+        }
+        
+    }
+
+    function timeExpires(){
+        if(time() > $_SESSION["expTime"]+$_SESSION["time"]){
+		
+            header("Location: ./library/loginController.php?logout");
+            die();
+        }
+    }
\ No newline at end of file