diff --git a/e2e/src/feature/Read/read.feature b/e2e/src/feature/Read/read.feature
new file mode 100644
index 0000000..f0b16ed
--- /dev/null
+++ b/e2e/src/feature/Read/read.feature
@@ -0,0 +1,11 @@
+@Read
+    Feature: Read
+    As a User
+    I should be able to see the employee table
+
+    Scenario: Read
+    
+    Given I redirected on the dashboard
+    When I browse the table
+    Then I should see the details of different employees
+    
\ No newline at end of file
diff --git a/e2e/src/feature/creation/creation.feature b/e2e/src/feature/creation/creation.feature
new file mode 100644
index 0000000..e750215
--- /dev/null
+++ b/e2e/src/feature/creation/creation.feature
@@ -0,0 +1,10 @@
+@Creation
+    Feature: Creation
+    As a User
+    I should be able to create a new Employee
+
+    Scenario: Create
+    Given I am on the dashboard
+    When I create an Employee
+    Then I should see the success message "Success: Data has been added!"
+    And I should see an employee should be added on the list
diff --git a/e2e/src/feature/delete/delete.feature b/e2e/src/feature/delete/delete.feature
new file mode 100644
index 0000000..0e223eb
--- /dev/null
+++ b/e2e/src/feature/delete/delete.feature
@@ -0,0 +1,9 @@
+@Delete
+    Feature: Delete
+    As a User
+    I should be able to delete an employee detail
+
+    Scenario: Delete
+    Given I am still on the dashboard
+    When I deleted an Employee
+    Then The deleted data will not be shown in the table
diff --git a/e2e/src/feature/security/security.feature b/e2e/src/feature/security/security.feature
new file mode 100644
index 0000000..365fa54
--- /dev/null
+++ b/e2e/src/feature/security/security.feature
@@ -0,0 +1,10 @@
+@Security
+    Feature: Security
+    As a User
+    I should be able to access the system with proper credentials
+
+    Scenario: Login
+    Given I am on the login page
+    When I log in
+    Then I should be redirected to the dashboard
+
diff --git a/e2e/src/feature/update/update.feature b/e2e/src/feature/update/update.feature
new file mode 100644
index 0000000..544faaf
--- /dev/null
+++ b/e2e/src/feature/update/update.feature
@@ -0,0 +1,10 @@
+@Update
+    Feature: Update
+    As a User
+    I should be able to edit employee details
+
+    Scenario: Update
+    Given I am on the dashboard2
+    When I updated an Employee
+    Then I should see the updated success message "Data has been updated!"
+    And I should see the updated data on the table
diff --git a/e2e/src/hooks/generic.hooks.ts b/e2e/src/hooks/generic.hooks.ts
new file mode 100644
index 0000000..8de434e
--- /dev/null
+++ b/e2e/src/hooks/generic.hooks.ts
@@ -0,0 +1,8 @@
+import  {BeforeAll, setDefaultTimeout } from 'cucumber';
+import { browser } from 'protractor';
+
+BeforeAll(async() => {
+    console.log('hook executed');
+    browser.waitForAngularEnabled(false);
+    setDefaultTimeout(60 *10000);
+});
\ No newline at end of file
diff --git a/e2e/src/po/creation.po.ts b/e2e/src/po/creation.po.ts
new file mode 100644
index 0000000..584c1f5
--- /dev/null
+++ b/e2e/src/po/creation.po.ts
@@ -0,0 +1,39 @@
+import { element, by, ElementFinder, logging, browser } from 'protractor';
+export class FormPage {
+
+  static get updateButton() {
+    return element(by.buttonText('Update'));
+  }
+  static get newEmployeeButton(): ElementFinder{
+    return element(by.id('new-employee'));
+  }
+  static getFormControlElement(formControlName: string) {
+    return element(by.css(`[formcontrolname=${formControlName}]`));
+  }
+  static get addbuttonEmployee(): ElementFinder{
+    return element(by.css('[ng-reflect-label="Add"]'));
+  }
+
+  static async fillForm(){
+    await this.getFormControlElement('firstName').sendKeys('Arden');
+    await this.getFormControlElement('lastName').sendKeys('Gatdula');
+    await this.getFormControlElement('country').sendKeys('Japan');
+    await this.getFormControlElement('nationality').sendKeys('Nihonjin');
+    await this.getFormControlElement('company').sendKeys('TitusUniversal');
+    await this.getFormControlElement('designation').sendKeys('CEO');
+    await this.getFormControlElement('workExp').sendKeys('69years');
+    await this.getFormControlElement('dataSource').click();
+    //    browser.executeScript('window.scrollTo(0,document.body.scrollHeight)');
+    await element.all(by.tagName('p-dropdownitem')).get(1).click();
+  }
+
+  static async updateFill(){
+    await this.getFormControlElement('nationality').clear();
+    await this.getFormControlElement('nationality').sendKeys('Japanese');
+    await this.getFormControlElement('company').clear();
+    await this.getFormControlElement('company').sendKeys('Titus');
+    await this.getFormControlElement('country').clear();
+    await this.getFormControlElement('country').sendKeys('Japan');
+    browser.sleep(2000);
+  }
+}
diff --git a/e2e/src/po/dashboard.po.ts b/e2e/src/po/dashboard.po.ts
new file mode 100644
index 0000000..734820c
--- /dev/null
+++ b/e2e/src/po/dashboard.po.ts
@@ -0,0 +1,72 @@
+import { element, by, browser } from 'protractor';
+import { FormPage } from './creation.po';
+​import { Alert } from 'selenium-webdriver';
+export class DashboardPage {
+
+  // static get tableFiles(){
+  //   return expect(element(by.tagName('table')));
+  // }
+
+  static get newEmployeeButton() {
+    return element(by.buttonText('New Employee'));
+  }
+​
+  static get deleteEmployeeButton(){
+    return element(by.buttonText('Delete'));
+  }
+
+  static get alertButtonOk(){
+    let ale:Alert = browser.switchTo().alert();
+    return ale;
+  }
+
+  // static get clickTable(){
+  //   return this.table.all(by.tagName('tr'));
+  // }
+
+
+  static async createEmployee() {
+    await this.newEmployeeButton.click();
+    await FormPage.fillForm();
+    await FormPage.addbuttonEmployee.click();
+
+  }
+
+  static async deleteEmployee(){
+    await this.deleteEmployeeButton.click();
+    await this.alertButtonOk.accept();
+  }
+
+  static async updateEmployee(){
+    await this.table.click();
+    await FormPage.updateFill();
+    await FormPage.updateButton.click();
+  }
+​
+  static get table() {
+    return element(by.tagName('p-table'));
+  }
+​
+  static get tableRows() {
+    return this.table.all(by.tagName('tr'));
+  }
+​
+  static get tableNextPageButton() {
+    return element(by.css('span[class="ui-paginator-icon pi pi-caret-right"]'));
+  }
+
+  static get tableBackPageButton() {
+    return element(by.css('span[class="ui-paginator-icon pi pi-caret-left"]'));
+  }
+​
+  static async checkTableRowForData(data: string) {
+    let foundData = null;
+    (await this.tableRows.getText() as any).forEach(trData => {
+      if (trData.includes(data)) {
+        foundData = trData;
+      }
+    });
+​
+    return foundData;
+  }
+}
diff --git a/e2e/src/po/message.po.ts b/e2e/src/po/message.po.ts
new file mode 100644
index 0000000..1c136f4
--- /dev/null
+++ b/e2e/src/po/message.po.ts
@@ -0,0 +1,9 @@
+import { element, by } from 'protractor';
+export class MessagePage {
+static get successMessage() {
+  return element(by.id('success-message'));
+}
+static get updatedMessage() {
+  return element(by.css('span[class="ui-messages-detail ng-tns-c3-2 ng-star-inserted"]'));
+}
+}
diff --git a/e2e/src/po/security.po.ts b/e2e/src/po/security.po.ts
new file mode 100644
index 0000000..24a9dd3
--- /dev/null
+++ b/e2e/src/po/security.po.ts
@@ -0,0 +1,17 @@
+import { element, by, ElementFinder, logging, browser } from 'protractor';
+export class SecurityPage {
+static get usernameField(): ElementFinder{
+    return element(by.id('username-field'));
+} 
+static get passwordField(): ElementFinder{
+    return element(by.id('password-field'));
+}
+static get loginButton(): ElementFinder{
+    return element(by.css('button[label="Login"]'));
+}
+static async login(){
+    await this.usernameField.sendKeys('asd');
+    await this.passwordField.sendKeys('asd');
+    await this.loginButton.click();
+}
+}
diff --git a/e2e/src/steps_definition/creation_definitions.ts b/e2e/src/steps_definition/creation_definitions.ts
new file mode 100644
index 0000000..9d991ac
--- /dev/null
+++ b/e2e/src/steps_definition/creation_definitions.ts
@@ -0,0 +1,40 @@
+import {Given, When, Then} from 'cucumber';
+import { SecurityPage } from '../po/security.po';
+import { browser, element, by, ElementFinder} from 'protractor';
+import { FormPage } from '../po/creation.po';
+import { DashboardPage } from '../po/dashboard.po';
+import { MessagePage } from '../po/message.po';
+
+const chai = require('chai').use(require('chai-as-promised'));
+const expect = chai.expect;
+
+Given('I am on the dashboard', async function () {
+  if (await browser.getCurrentUrl() === "http://localhost:4200/dashboard"){
+    return true;
+  }
+  else{
+    throw Error('The user is not on the dashboard page');
+  }
+});
+
+When('I create an Employee', async function(){
+    await DashboardPage.createEmployee();
+  });
+
+Then('I should see the success message {string}', async function(expectedMessage: string) {
+  const messageObject = MessagePage.successMessage;
+  expect(true, 'The success message was not displayed').to.equal(await messageObject.isPresent());
+  expect(await messageObject.getText(), 'The success message did not match the expected message').to.equal(expectedMessage);
+});
+
+Then('I should see an employee should be added on the list', async function () {
+  let rowData;
+​
+  if (!(await DashboardPage.checkTableRowForData('Arden Gatdula'))) {
+    await DashboardPage.tableNextPageButton.click();
+  }
+  rowData = (await DashboardPage.checkTableRowForData('Arden Gatdula') as string);
+  rowData = (rowData.replace('Delete', '')).trim();
+  expect('8 Arden Gatdula Japan Nihonjin TitusUniversal CEO 69years Google').to.equal(rowData);
+});
+
diff --git a/e2e/src/steps_definition/delete_definition.ts b/e2e/src/steps_definition/delete_definition.ts
new file mode 100644
index 0000000..85d53bb
--- /dev/null
+++ b/e2e/src/steps_definition/delete_definition.ts
@@ -0,0 +1,26 @@
+import {Given, When, Then} from 'cucumber';
+import { Alert } from 'selenium-webdriver';
+import { browser } from 'protractor';
+import { DashboardPage } from '../po/dashboard.po';
+
+const chai = require('chai').use(require('chai-as-promised'));
+const expect = chai.expect;
+
+Given('I am still on the dashboard', async function () {
+  if(await browser.getCurrentUrl()==="http://localhost:4200/dashboard"){
+    return true;
+  }
+  else{
+    throw Error('The user is not on the dashboard page');
+  }
+});
+
+When('I deleted an Employee', async function() {
+ await  DashboardPage.deleteEmployee();
+});
+
+Then('The deleted data will not be shown in the table', async function(){
+  let rowData;
+  rowData = (await DashboardPage.checkTableRowForData('Brenden Wagner') as string);
+  expect(rowData).to.equal(null);
+});
diff --git a/e2e/src/steps_definition/read_definition.ts b/e2e/src/steps_definition/read_definition.ts
new file mode 100644
index 0000000..c31dd55
--- /dev/null
+++ b/e2e/src/steps_definition/read_definition.ts
@@ -0,0 +1,62 @@
+import { Given, When, Then } from 'cucumber';
+import { browser, element, by } from 'protractor';
+import { DashboardPage } from '../po/dashboard.po';
+import { MessagePage } from '../po/message.po';
+
+
+const chai = require('chai').use(require('chai-as-promised'));
+const expect = chai.expect;
+
+Given('I redirected on the dashboard', async function () {
+  const currentUrl = await browser.getCurrentUrl();
+  const dashboardUrl = 'http://localhost:4200/dashboard';
+​
+  if (currentUrl !== dashboardUrl) {
+    await browser.get(dashboardUrl);
+  }
+​
+  const dashboardElement = element(by.tagName('app-dashboard'));
+  if (!(await dashboardElement.isPresent())) {
+    throw Error('The user is not on the dashboard page');
+  }
+});
+
+When('I browse the table', async function () {
+  const tableObject =  element(by.tagName('table'));
+  if(await tableObject.isPresent()){
+    return true;
+  }
+  else{
+    throw Error('error');
+  }
+});
+
+Then('I should see the details of different employees', async function () {
+  let rowData;
+  let rowData2;
+  let rowData3;
+  let counter: number = 0;
+
+  rowData = (await DashboardPage.checkTableRowForData('1 Cara Steves United States of America, New York American Walmart Sales Assistant 5 Google') as string);
+  rowData = (rowData.replace('Delete', '')).trim();
+
+  rowData2 = (await DashboardPage.checkTableRowForData('4 Jenny Chang Singapore, Singapore Chinese Singapore Airlines Regional Director 15 Twitter') as string);
+  rowData2= (rowData2.replace('Delete', '')).trim();
+
+  rowData3 = (await DashboardPage.checkTableRowForData('0 Brenden Wagner United States of America, California American Facebook Software Engineer 8 Facebook') as string);
+  rowData3= (rowData3.replace('Delete', '')).trim();
+    // await DashboardPage.tableNextPageButton.click();
+    // check to 2nd page
+  if('1 Cara Steves United States of America, New York American Walmart Sales Assistant 5 Google' === rowData){
+    await counter++;
+  }
+  if('4 Jenny Chang Singapore, Singapore Chinese Singapore Airlines Regional Director 15 Twitter' === rowData2){
+    await counter++;
+  } 
+  if('0 Brenden Wagner United States of America, California American Facebook Software Engineer 8 Facebook' === rowData3){
+    await counter++;
+  }
+    // await DashboardPage.tableBackPageButton.click();
+    // go back to first page
+  expect(counter).to.equal(3);
+});
\ No newline at end of file
diff --git a/e2e/src/steps_definition/security_definitions.ts b/e2e/src/steps_definition/security_definitions.ts
new file mode 100644
index 0000000..6316cbc
--- /dev/null
+++ b/e2e/src/steps_definition/security_definitions.ts
@@ -0,0 +1,18 @@
+import {Given, When, Then} from 'cucumber';
+import { SecurityPage } from '../po/security.po';
+import { browser } from 'protractor';
+
+const chai = require('chai').use(require('chai-as-promised'));
+const expect = chai.expect;
+
+Given('I am on the login page', async function () {
+ await browser.get('http://localhost:4200/login')
+});
+
+When('I log in', async function () {
+ await SecurityPage.login();
+});
+
+Then('I should be redirected to the dashboard', async function () {
+  expect (await browser.getCurrentUrl(), `the current url is `).to.equal("http://localhost:4200/dashboard");
+});
diff --git a/e2e/src/steps_definition/update_definition.ts b/e2e/src/steps_definition/update_definition.ts
new file mode 100644
index 0000000..931320d
--- /dev/null
+++ b/e2e/src/steps_definition/update_definition.ts
@@ -0,0 +1,44 @@
+import {Given, When, Then} from 'cucumber';
+import { SecurityPage } from '../po/security.po';
+import { browser, element, by, ElementFinder} from 'protractor';
+import { FormPage } from '../po/creation.po';
+import { DashboardPage } from '../po/dashboard.po';
+import { MessagePage } from '../po/message.po';
+
+const chai = require('chai').use(require('chai-as-promised'));
+const expect = chai.expect;
+
+Given('I am on the dashboard2', async function () {
+  if(await browser.getCurrentUrl() === "http://localhost:4200/dashboard"){
+    return true;
+  }
+  else{
+    throw Error('The user is not on the dashboard page');
+  }
+});
+
+When('I updated an Employee', async function() {
+  await DashboardPage.updateEmployee();
+});
+
+Then('I should see the updated success message {string}', async function(expectedMessage: string) {
+    const messageObject = MessagePage.updatedMessage;
+    expect(true, 'The success message was not displayed').to.equal(await messageObject.isPresent());
+    expect(await messageObject.getText(), 'The success message did not match the expected message').to.equal(expectedMessage);
+});
+
+Then('I should see the updated data on the table', async function() {
+  let rowData;
+
+  if (!(await DashboardPage.checkTableRowForData('Japan Japanese Titus'))) {
+    await DashboardPage.tableNextPageButton.click();
+  }
+
+  rowData = (await DashboardPage.checkTableRowForData('Japan Japanese Titus') as string);
+  rowData = (rowData.replace('Delete', '')).trim();
+  expect('1 Cara Steves Japan Japanese Titus Sales Assistant 5 Google').to.equal(rowData);
+});
+
+
+
+