diff --git a/.travis.yml b/.travis.yml
index 848cc3f..f895c13 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -11,15 +11,8 @@ cache:
     - "node_modules"
 env: 
   global:
-    - CC_TEST_REPORTER_ID=c14abfc89b0eb06fcb10f480f4b3e47142ac181c60c21f0131b570e72b1fbeb7
-before_script:
-  - npm install -g nyc
-  - curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./cc-test-reporter
-  - chmod +x ./cc-test-reporter
-  - ./cc-test-reporter before-build
+    - CODECLIMATE_REPO_TOKEN=c14abfc89b0eb06fcb10f480f4b3e47142ac181c60c21f0131b570e72b1fbeb7
 script:
-  - - nyc --reporter=lcov npm run test
-after_script:
-  - ./cc-test-reporter after-build --exit-code $TRAVIS_TEST_RESULT
+  - npm run test
 services:
   - postgresql
\ No newline at end of file
diff --git a/frontend-app/js/addstaff.js b/frontend-app/js/addstaff.js
index 02191bd..cb03190 100644
--- a/frontend-app/js/addstaff.js
+++ b/frontend-app/js/addstaff.js
@@ -1,4 +1,4 @@
-const api = 'https://bankaapp-api.herokuapp.com/api';
+const api = 'https://bankaapp-api.herokuapp.com/api/v1';
 const token = sessionStorage.getItem('token');
 
 const fnameAndLnameRegex = /^[a-zA-Z ]{2,15}$/;
@@ -104,7 +104,7 @@ submit.addEventListener('click', (e) => {
         password: password.value,
         isAdmin: false,
       };
-      postApi(`${api}/auth/signup/addstaff`, signupData);
+      postApi(`${api}/users/addstaff`, signupData);
     } else {
       const signupData = {
         firstName: firstName.value,
@@ -114,7 +114,7 @@ submit.addEventListener('click', (e) => {
         password: password.value,
         isAdmin: true,
       };
-      postApi(`${api}/auth/signup/addstaff`, signupData);
+      postApi(`${api}/users/addstaff`, signupData);
     }
   }
 });
diff --git a/frontend-app/js/staffs.js b/frontend-app/js/staffs.js
new file mode 100644
index 0000000..3c3198c
--- /dev/null
+++ b/frontend-app/js/staffs.js
@@ -0,0 +1,132 @@
+const token = sessionStorage.getItem('token');
+const api = 'https://bankaapp-api.herokuapp.com/api';
+const limitSelect = document.querySelector('#limit');
+const submit = document.querySelector('#go');
+const errMsg = document.querySelector('.errMsg');
+const successMsg = document.querySelector('.successMsg');
+const userTable = document.querySelector('.user-table');
+const queryForm = document.querySelector('.queryForm');
+
+// DELETE FETCH REQUEST FOR USERS
+const deleteApi = (url) => {
+  fetch(url, {
+    method: 'DELETE',
+    mode: 'cors',
+    cache: 'no-cache',
+    credentials: 'same-origin',
+    headers: {
+      Authorization: `Bearer ${token}`,
+      'Content-Type': 'application/json',
+    },
+    redirect: 'follow',
+    referrer: 'no-referrer',
+  })
+    .then(response => response.json());
+};
+
+// GET FETCH API REQUEST TO GET ALL ACCOUNTS OF A USER
+const getUsersApi = (url) => {
+  fetch(url, {
+    method: 'GET',
+    mode: 'cors',
+    cache: 'no-cache',
+    credentials: 'same-origin',
+    headers: {
+      Authorization: `Bearer ${token}`,
+      'Content-Type': 'application/json',
+    },
+    redirect: 'follow',
+    referrer: 'no-referrer',
+  })
+    .then((response) => {
+      if (response.status === 403) {
+        errMsg.parentElement.style.display = 'flex';
+        userTable.style.display = 'none';
+        queryForm.style.display = 'none';
+        errMsg.innerHTML = 'you must be logged in to view users';
+      } else {
+        userTable.style.display = 'block';
+        queryForm.style.display = 'flex';
+        errMsg.parentElement.style.display = 'none';
+        errMsg.innerHTML = '';
+        return response.json();
+      }
+    })
+    .then((data1) => {
+      if (data1.status === 401) {
+        errMsg.parentElement.style.display = 'flex';
+        userTable.style.display = 'none';
+        queryForm.style.display = 'none';
+        errMsg.innerHTML = 'you must be an admin or staff to view accounts';
+      } else {
+        userTable.style.display = 'block';
+        queryForm.style.display = 'flex';
+        errMsg.parentElement.style.display = 'none';
+        data1.data.map((i) => {
+          const table = document.querySelector('.table');
+          const tableRow = document.createElement('div');
+          tableRow.classList = 'table-row table-body';
+          const userId = document.createElement('div');
+          userId.className = 'none';
+          userId.innerHTML = i.id;
+          const fullname = document.createElement('div');
+          fullname.className = 'account-index';
+          fullname.innerHTML = `${i.firstname} ${i.lastname}`;
+          const email = document.createElement('div');
+          email.className = 'account-name';
+          email.innerHTML = i.email;
+          const type = document.createElement('div');
+          type.className = 'account-status';
+          type.innerHTML = i.type;
+          const isAdmin = document.createElement('div');
+          isAdmin.className = 'activate';
+          isAdmin.innerHTML = i.isadmin;
+          const deleteUser = document.createElement('div');
+          deleteUser.className = 'deactivate';
+          const aDeleteUser = document.createElement('a');
+          aDeleteUser.href = '#';
+          aDeleteUser.className = 'delete-btn';
+          aDeleteUser.id = 'delete';
+          aDeleteUser.innerHTML = 'Delete';
+          deleteUser.appendChild(aDeleteUser);
+          const newBalnace = document.createElement('div');
+          newBalnace.className = 'account-status';
+          newBalnace.innerHTML = i.newbalance;
+          tableRow.appendChild(userId);
+          tableRow.appendChild(fullname);
+          tableRow.appendChild(email);
+          tableRow.appendChild(type);
+          tableRow.appendChild(isAdmin);
+          tableRow.appendChild(deleteUser);
+          table.appendChild(tableRow);
+        });
+
+        // DELETE
+        const dels = document.querySelectorAll('.delete-btn');
+        dels.forEach((del) => {
+          del.addEventListener('click', (e) => {
+            const id = e.target.parentElement.parentElement.children[0].innerHTML;
+            deleteApi(`${api}/v1/users/${id}`);
+            e.target.parentElement.parentElement.remove();
+            successMsg.parentElement.style.display = 'flex';
+            successMsg.innerHTML = 'User successfully deleted';
+            setInterval(() => {
+              location.reload(true);
+            }, 3000);
+          });
+        });
+      }
+      return data1;
+    });
+};
+getUsersApi(`${api}/v1/users/staffs`);
+
+submit.addEventListener('click', (e) => {
+  e.preventDefault();
+  const tableBodies = document.querySelectorAll('.table-body');
+  tableBodies.forEach((tableBody) => {
+    tableBody.remove();
+  });
+
+  getUsersApi(`${api}/v1/users/staffs?limit=${limitSelect.value}`);
+});
diff --git a/frontend-app/js/users.js b/frontend-app/js/users.js
index 242ec39..87f14ef 100644
--- a/frontend-app/js/users.js
+++ b/frontend-app/js/users.js
@@ -21,19 +21,7 @@ const deleteApi = (url) => {
     redirect: 'follow',
     referrer: 'no-referrer',
   })
-    .then((response) => {
-      if (response.status === 204) {
-        errMessage.forEach((err) => {
-          err.innerHTML = '';
-        });
-        onSuccess.forEach((success) => {
-          success.innerHTML = 'Deleted successfully';
-          setInterval(() => {
-            document.location.reload(true);
-          }, 3000);
-        });
-      }
-    });
+    .then(response => response.json());
 };
 
 // GET FETCH API REQUEST TO GET ALL ACCOUNTS OF A USER
diff --git a/frontend-app/staffs.html b/frontend-app/staffs.html
new file mode 100644
index 0000000..cb5833e
--- /dev/null
+++ b/frontend-app/staffs.html
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Users - Banka Dashboard</title>
+  <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
+  <link rel="stylesheet" href="./css/style.css">
+</head>
+
+<body>
+  <div class="container">
+
+    <!--Wrapper-->
+    <div class="wrapper">
+      <!--Sidebar-->
+      <div class="sidebar">
+        <div class="sidebar-header">
+          <h1 class="logo">Banka</h1>
+        </div>
+        <div class="sidebar-menu">
+          <ul class="sidebar-list">
+            <li class="sidebar-item">
+              <a href="./dashboard.html" class="sidebar-link">Dashboard</a>
+            </li>
+            <li class="sidebar-item">
+              <a href="./createaccount.html" class="sidebar-link">Create an account</a>
+            </li>
+            <li class="sidebar-item">
+              <a href="./accounts.html" class="sidebar-link">Credit / Debit</a>
+            </li>
+            <li class="sidebar-item">
+              <a href="./transactions.html" class="sidebar-link">Transactions</a>
+            </li>
+            <li class="sidebar-item">
+              <a href="./users.html" class="sidebar-link">Users</a>
+            </li>
+            <li class="sidebar-item sidebar-item-active">
+              <a href="staffs.html" class="sidebar-link">Staffs</a>
+            </li>
+            <li class="sidebar-item">
+              <a href="./adduser.html" class="sidebar-link">Create Staffs</a>
+            </li>
+            <li class="sidebar-item">
+              <a href="./activate.html" class="sidebar-link">Activate / Deactivate</a>
+            </li>
+          </ul>
+        </div>
+        <div class="sidebar-legal">
+          &copy; 2019 Banka. All Rights Reserved.
+        </div>
+      </div>
+
+      <!--Main Content-->
+      <div class="main-content">
+        <!--Header-->
+        <header class="header">
+          <button class="toggle-sidebar" id="toggle-sidebar">
+            <svg class="toggle-sidebar-button">
+              <use xlink:href="./svg/sprite.svg#icon-list"></use>
+            </svg>
+          </button>
+          <form class="search-form">
+            <input type="text" class="search-input" placeholder="Search...">
+            <button class="search-form-button">
+              <svg class="search-form-icon">
+                <use xlink:href="./svg/sprite.svg#icon-magnifying-glass"></use>
+              </svg>
+            </button>
+          </form>
+
+          <nav class="user-nav">
+            <div class="user-nav-icon-box">
+              <svg class="user-nav-icon">
+                <use xlink:href="./svg/sprite.svg#icon-bell"></use>
+              </svg>
+              <span class="user-nav-notification"></span>
+
+              <div class="user-nav-notification-pop">
+                <ul class="list">
+                  <li class="item">
+                    <a href="#" class="link">Lorem ipsum dolor, sit amet consectetur adipisicing
+                      elit. Quae, optio?</a>
+                  </li>
+                  <li class="item">
+                    <a href="#" class="link">Lorem ipsum dolor, sit amet consectetur adipisicing.</a>
+                  </li>
+                  <li class="item">
+                    <a href="#" class="link">Lorem ipsum dolor sit amet consectetur adipisicing
+                      elit. Nobis similique soluta sit impedit, provident laborum?</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="user-nav-user">
+              <img class="user-nav-user-photo" src="./img/js2.png" alt="">
+              <span class="user-nav-username">Franklin</span>
+              <svg class="user-nav-user-icon">
+                <use xlink:href="./svg/sprite.svg#icon-chevron-down"></use>
+              </svg>
+
+              <div class="user-nav-user-pop">
+                <ul class="list">
+                  <li class="item"><a href="./profile.html" class="link">
+                      <svg class="user-nav-link-icon">
+                        <use xlink:href="./svg/sprite.svg#icon-user"></use>
+                      </svg>Profile</a>
+                  </li>
+                  <li class="item"><a href="#" class="link">
+                      <svg class="user-nav-link-icon">
+                        <use xlink:href="./svg/sprite.svg#icon-help-with-circle"></use>
+                      </svg>Help</a>
+                  </li>
+                  <li class="item"><a href="#" class="link" id="logout">
+                      <svg class="user-nav-link-icon">
+                        <use xlink:href="./svg/sprite.svg#icon-log-out"></use>
+                      </svg>Logout</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </nav>
+        </header>
+
+        <!--Main Body-->
+        <main class="main-body">
+          <div class="alert alert-success"><span class="successMsg">Success </span><span id="close">X</span></div>
+          <div class="alert alert-danger"><span class="errMsg">Something went wrong. Try again </span><span
+              id="close">X</span></div>
+          <!--Accounts Limit-->
+          <div class="accountsQuery">
+            <div class="queryForm">
+              <div class="card">
+                <form action="" class="accounts-form">
+                  <div class="form-group">
+                    <select class="accounts-select" id="limit">
+                      <option value="5">5</option>
+                      <option value="10">10</option>
+                      <option value="20">20</option>
+                      <option value="30">30</option>
+                    </select>
+                  </div>
+
+                  <input type="submit" id="go" class="btn-go" value="Go">
+                </form>
+              </div>
+            </div>
+          </div>
+          <div class="card user-table">
+            <h1 class="content-title">Users Accounts</h1>
+
+            <div class="table">
+              <div class="table-row">
+                <div class="account-index">Name</div>
+                <div class="account-name">Email</div>
+                <div class="account-status">Type</div>
+                <div class="activate">IsAdmin</div>
+                <div class="deactivate">Delete</div>
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+  </div>
+
+  <!--Js-->
+  <script src="./js/app.js"></script>
+  <script src="./js/staffs.js"></script>
+</body>
+
+</html>
\ No newline at end of file