diff --git a/src/assets/scripts/app/index.js b/src/assets/scripts/app/index.js
index db45c68..b8e6912 100644
--- a/src/assets/scripts/app/index.js
+++ b/src/assets/scripts/app/index.js
@@ -16,6 +16,7 @@ angular.module('NomitWisp',
         'nwProfile',
         'nwSignup',
         'nwHistory',
+        'nwUsers',
         ngRoute
         
     ])
@@ -51,10 +52,14 @@ angular.module('NomitWisp',
             controller: 'HistoryController', 
             templateUrl: 'assets/scripts/history/history.html' 
         })
-        // .when('/users', { 
-        //     controller: 'UsersController', 
-        //     templateUrl: '' 
-        // })
+        .when('/users', { 
+            controller: 'UsersController', 
+            templateUrl: 'assets/scripts/users/users.html' 
+        })
+        .when('/users/:id',{
+            controller: 'UserDetailsController',
+            templateUrl: 'assets/scripts/user-details/user-details.html'
+        })
         // .when('/companies', { 
         //     controller: 'CompaniesController', 
         //     templateUrl: '' 
diff --git a/src/assets/scripts/avatar-initials.js b/src/assets/scripts/avatar-initials.js
deleted file mode 100644
index 43a165e..0000000
--- a/src/assets/scripts/avatar-initials.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import Avatar from 'avatar-initials';
-const avatar = new Avatar(document.getElementById('avatar'), {
-  'useGravatar': false,
-  'initials': 'MC',
-});
-
diff --git a/src/assets/scripts/dashboard/dashboard.html b/src/assets/scripts/dashboard/dashboard.html
index 50f44dc..66977f5 100644
--- a/src/assets/scripts/dashboard/dashboard.html
+++ b/src/assets/scripts/dashboard/dashboard.html
@@ -1,4 +1,4 @@
-<main class='main-content bgc-grey-300'>
+<main class='main-content bgc-grey-300' ng-controller="DashboardController">
   <div id='mainContent row'>
     <div class="row content-title mT-60">
       <div class="col-8 ml-1 mb-3">
diff --git a/src/assets/scripts/index.js b/src/assets/scripts/index.js
index d0465e3..a99f733 100755
--- a/src/assets/scripts/index.js
+++ b/src/assets/scripts/index.js
@@ -29,5 +29,6 @@ import './profile';
 import './signup';
 import './history';
 import './trumbowyg';
+import './users';
 
 import './app';
\ No newline at end of file
diff --git a/src/assets/scripts/nwTopbar/topbar.controller.js b/src/assets/scripts/nwTopbar/topbar.controller.js
index dbe0fb8..e9394fe 100644
--- a/src/assets/scripts/nwTopbar/topbar.controller.js
+++ b/src/assets/scripts/nwTopbar/topbar.controller.js
@@ -1,7 +1,7 @@
 import functionSearch from '../search';
+import Avatar from 'avatar-initials';
 
 /** @ngInject */
-import Avatar from 'avatar-initials';
 
 const TopbarController = ($scope, UserService) => {
     $scope.$on('loadUserSuccess', function (event, user) {
diff --git a/src/assets/scripts/user-details/index.js b/src/assets/scripts/user-details/index.js
new file mode 100644
index 0000000..cb35324
--- /dev/null
+++ b/src/assets/scripts/user-details/index.js
@@ -0,0 +1,10 @@
+import * as angular from 'angular';
+import UserDetailsController from './user-details.controller';
+import UserDetailsService from './user-details.service';
+
+angular.module('nwUsers', [])
+    .config(['$httpProvider', function($httpProvider) {
+        $httpProvider.defaults.withCredentials = true;
+    }])
+    .controller(UserDetailsController.name, UserDetailsController)
+    .factory(UserDetailsService.name, UserDetailsService);
\ No newline at end of file
diff --git a/src/assets/scripts/user-details/user-details.controller.js b/src/assets/scripts/user-details/user-details.controller.js
new file mode 100644
index 0000000..ed14728
--- /dev/null
+++ b/src/assets/scripts/user-details/user-details.controller.js
@@ -0,0 +1,12 @@
+/** @ngInject */
+const UsersController = ($scope, UsersService, UserService) => {
+    $scope.$on('loadUserSuccess', function (event, user) {
+        $scope.user = user;
+        UsersService.fetchUsersService()
+          .then( (result) => { $scope.userDetails = result; })
+          .catch( (error) => { console.log(error); })
+      });
+      UserService.loadUser();
+}
+
+export default UsersController;
\ No newline at end of file
diff --git a/src/assets/scripts/user-details/user-details.service.js b/src/assets/scripts/user-details/user-details.service.js
new file mode 100644
index 0000000..00d4886
--- /dev/null
+++ b/src/assets/scripts/user-details/user-details.service.js
@@ -0,0 +1,12 @@
+const UserDetailsService = ($http) => {
+    let serv = {};
+
+    serv.fetchUserDetails = (route) =>{
+        return $http.get('https://nomitwisp-restapi.herokuapp.com/api/users/'+route.id)
+            .then( (result) => { return result.data; })
+            .catch( (error) => { return error; })
+    }
+    return serv;
+}
+
+export default UserDetailsService;
\ No newline at end of file
diff --git a/src/assets/scripts/users/index.js b/src/assets/scripts/users/index.js
new file mode 100644
index 0000000..248c2d2
--- /dev/null
+++ b/src/assets/scripts/users/index.js
@@ -0,0 +1,10 @@
+import * as angular from 'angular';
+import UsersController from './users.controller';
+import UsersService from './users.service';
+
+angular.module('nwUsers', [])
+    .config(['$httpProvider', function($httpProvider) {
+        $httpProvider.defaults.withCredentials = true;
+    }])
+    .controller(UsersController.name, UsersController)
+    .factory(UsersService.name, UsersService);
\ No newline at end of file
diff --git a/src/assets/scripts/users/users.controller.js b/src/assets/scripts/users/users.controller.js
new file mode 100644
index 0000000..9a764a4
--- /dev/null
+++ b/src/assets/scripts/users/users.controller.js
@@ -0,0 +1,12 @@
+/** @ngInject */
+const UsersController = ($scope, UsersService, UserService) => {
+    $scope.$on('loadUserSuccess', function (event, user) {
+        $scope.user = user;
+        UsersService.fetchUsersService()
+          .then( (result) => { $scope.users = result; })
+          .catch( (error) => { console.log(error); })
+      });
+      UserService.loadUser();
+}
+
+export default UsersController;
\ No newline at end of file
diff --git a/src/assets/scripts/users/users.html b/src/assets/scripts/users/users.html
index 6492d77..ee8c21d 100644
--- a/src/assets/scripts/users/users.html
+++ b/src/assets/scripts/users/users.html
@@ -1,4 +1,4 @@
-<main class='main-content bgc-grey-300'>
+<main class='main-content' ng-controller="UsersController">
   <div id='mainContent row'>
     <div class="row content-title mT-60">
       <h1 class="col-8 ml-1 mb-4">Users</h1>
@@ -8,32 +8,25 @@
       <!-- #content container ===== -->
       <div class="masonry-sizer col-md-6"></div>
 
-      <div class="masonry-item  w-50">
+      <div class="masonry-item  w-50" ng-repeat="user in users">
         <!-- #first user ========= -->
         <div class="card item-box">
           <div class="user-data-title container">
-            <div class="row">
-              <div class="col-8">
-                <img class="user-update-img  rounded-circle" src="https://content.invisioncic.com/Mseclife/monthly_2017_08/C.png.2537be5c760ba5232ee4716f77d13c51.png"
-                  alt="">
-                <div class="testo">
-                  <h5 class=" form-title">David James</h5>
-                  <div class=" text-size-11">Victoria</div>
-                  <div class=" text-size-11">Mobile: 0414987654</div>
-                </div>
-              </div>
-              <div class="col-4 users-action-btn" style="text-align: right">
-                <div class="d-inline-block">
-                  <a href=""><i class="fa fa-eye" data-toggle="tooltip" data-placement="bottom" title="View user details"></i></a>
-                  <a href=""><i class="fa fa-ban" data-toggle="tooltip" data-placement="bottom" title="Ban user (user will not be able to login)"></i></a>
-                </div>
-              </div>
+            <img class="user-card-img  rounded-circle" src="https://www.monmouth.edu/university-advancement/wp-content/uploads/sites/237/2018/08/person-placeholder.jpg"
+              alt="">
+            <div class="user-card-col">
+              <div class="user-card-title">{{user.fullname}}</div>
+              <div class=" text-size-11">Victoria</div>
+              <div class=" text-size-11">Mobile: 0414987654</div>
+              <a href="#" id="user-action-fill">view user profile</a>
+              <a href="#" id="user-action-border" data-toggle="tooltip" data-placement="bottom" title="User will be unable to log in to WISP">ban
+                user</a>
             </div>
-
           </div>
           <div class="card-body p-0">
             <div class="card-body-users row">
-              <div class="users-icons">
+              <div class="col-4"></div>
+              <div class="users-icons col-8">
                 <a href=""><i class="fa fa-envelope-o"></i></a>
                 <a href=""><i class="fa fa-linkedin"></i></a>
                 <a href=""><i class="fa fa-facebook"></i></a>
@@ -45,30 +38,20 @@
         </div>
       </div>
 
-      <div class="masonry-item  w-50">
-        <!-- #second user ========= -->
-        <div class="card item-box">
-          <div class="user-data-title">
-            <img class="user-update-img" src="assets/static/images/nomit-logo.png" alt="">
-            <div class="testo">
-              <h5 class=" form-title">David James</h5>
-              <div class=" text-size-11">Victoria</div>
-              <div class=" text-size-11">Mobile: 0414987654</div>
-            </div>
-          </div>
-          <div class="card-body p-0">
-            <div class="card-body-users row">
-              <div class="users-icons">
-                <a href=""><i class="ti-instagram "></i></a>
-                <a href=""><i class="ti-twitter "></i></a>
-                <a href=""><i class="ti-facebook   "></i></a>
-                <a href=""><i class="ti-email"></i></a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+    <!-- PAGINATION-->
+    <div class="pagination">
+      <a href="#">&laquo;</a>
+      <a href="#">1</a>
+      <a class="active" href="#">2</a>
+      <a href="#">3</a>
+      <a href="#">4</a>
+      <a href="#">5</a>
+      <a href="#">6</a>
+      <a href="#">&raquo;</a>
     </div>
+
+
   </div>
   <!--content container-->
+
 </main>
diff --git a/src/assets/scripts/users/users.service.js b/src/assets/scripts/users/users.service.js
new file mode 100644
index 0000000..ba011a7
--- /dev/null
+++ b/src/assets/scripts/users/users.service.js
@@ -0,0 +1,13 @@
+/** @ngInject */
+const UsersService = ($http) => {
+    let serv = {};
+    
+    serv.fetchUsersService = () =>{
+        return $http.get('https://nomitwisp-restapi.herokuapp.com/api/users/user', { withCredentials: true })
+        .then( (result) => { console.log(result.data); return result.data; })
+        .catch( (error) => { return error; });
+    }
+    return serv;
+}
+
+export default UsersService;
\ No newline at end of file