diff --git a/src/assets/scripts/app/index.js b/src/assets/scripts/app/index.js
index 8a68b57..32a9fb5 100644
--- a/src/assets/scripts/app/index.js
+++ b/src/assets/scripts/app/index.js
@@ -18,6 +18,7 @@ angular.module('NomitWisp',
         'nwHistory',
         'nwUserAdd',
         'nwUsers',
+        'nwUserDetails',
         'nwCompanies',
         'nwReferees',
         'nwReports',
diff --git a/src/assets/scripts/index.js b/src/assets/scripts/index.js
index 6c40505..31c9a1f 100755
--- a/src/assets/scripts/index.js
+++ b/src/assets/scripts/index.js
@@ -34,5 +34,6 @@ import './users';
 import './companies';
 import './referees';
 import './reports';
+import './user-details';
 
 import './app';
\ No newline at end of file
diff --git a/src/assets/scripts/user-details/index.js b/src/assets/scripts/user-details/index.js
index cb35324..0e6dd48 100644
--- a/src/assets/scripts/user-details/index.js
+++ b/src/assets/scripts/user-details/index.js
@@ -1,8 +1,9 @@
 import * as angular from 'angular';
+import ngRoute from 'angular-route';
 import UserDetailsController from './user-details.controller';
 import UserDetailsService from './user-details.service';
 
-angular.module('nwUsers', [])
+angular.module('nwUserDetails', [ngRoute])
     .config(['$httpProvider', function($httpProvider) {
         $httpProvider.defaults.withCredentials = true;
     }])
diff --git a/src/assets/scripts/user-details/user-details.controller.js b/src/assets/scripts/user-details/user-details.controller.js
index ed14728..47e4711 100644
--- a/src/assets/scripts/user-details/user-details.controller.js
+++ b/src/assets/scripts/user-details/user-details.controller.js
@@ -1,12 +1,13 @@
 /** @ngInject */
-const UsersController = ($scope, UsersService, UserService) => {
+const UserDetailsController = ($scope, $routeParams, UserDetailsService, UserService) => {
     $scope.$on('loadUserSuccess', function (event, user) {
         $scope.user = user;
-        UsersService.fetchUsersService()
-          .then( (result) => { $scope.userDetails = result; })
+        UserDetailsService.fetchUserDetails($routeParams)
+          .then( (result) => { console.log(result);
+           $scope.userDetails = result; })
           .catch( (error) => { console.log(error); })
       });
       UserService.loadUser();
 }
 
-export default UsersController;
\ No newline at end of file
+export default UserDetailsController;
\ No newline at end of file
diff --git a/src/assets/scripts/user-details/user-details.html b/src/assets/scripts/user-details/user-details.html
index d9c1680..e8aaa15 100644
--- a/src/assets/scripts/user-details/user-details.html
+++ b/src/assets/scripts/user-details/user-details.html
@@ -12,13 +12,13 @@
   
   
         <!-- #user profile ========= -->
-        <div class="masonry-item  w-100 visible-admin visible-nomit visible-referee visible-company" ng-show="profile.role =='admin' || profile.role =='nomit' || profile.role =='referee' || profile.role =='company' ">
+        <div class="masonry-item  w-100 visible-admin visible-nomit visible-referee visible-company" ng-show="user.role != 'user'">
   
           <div class="card item-box">
             <div class="user-data-title">
               <img class="user-update-img" src="assets/static/images/user-update.png" alt="">
               <div class="testo">
-                <h5>{{ profile.fullname }}</h5> Bla Bla, this is your bio or whatever!
+                <h5>{{userDetails.personal.first_name}}</h5> {{userDetails.personal.bio}}
               </div>
             </div>
             <div class="card-body-profile">
@@ -28,26 +28,26 @@
                 <div class="row ">
                   <div class="col-4 profile-form-row">
                     <h9 class="">First Name</h9>
-                    <input type="text" class="form-control" placeholder="{{ profile.fullname }}" value="Francesca" disabled>
+                    <input type="text" class="form-control" placeholder="{{userDetails.personal.first_name}}" disabled>
                   </div>
                   <div class="col-4 profile-form-row">
                     <h9 class="">Middle Name</h9>
-                    <input type="text" class="form-control" placeholder="{{ profile.fullname }}" value="" disabled>
+                    <input type="text" class="form-control" placeholder="{{userDetails.personal.middle_name}}" value="" disabled>
                   </div>
                   <div class="col-4 profile-form-row">
                     <h9 class="">Last Name</h9>
-                    <input type="text" class="form-control" placeholder="{{ profile.fullname }}" value="Sperati" disabled>
+                    <input type="text" class="form-control" placeholder="{{userDetails.personal.last_name}}" disabled>
                   </div>
                 </div>
   
                 <div class="row ">
                   <div class="col-4 profile-form-row">
                     <h9 class="">Email Address</h9>
-                    <input type="text" class="form-control" placeholder="Email" value="{{ profile.email }}" disabled>
+                    <input type="text" class="form-control" placeholder="Email" value="{{userDetails.email}}" disabled>
                   </div>
                   <div class="col-4 profile-form-row">
                     <h9 class="">Phone Number</h9>
-                    <input type="text" class="form-control" placeholder="Phone" value="{{ profile.fullname }}" disabled>
+                    <input type="text" class="form-control" placeholder="Phone" value="{{userDetails.personal.phone}}" disabled>
                   </div>
                   <div class="col-4 profile-form-row">
                     <h9 class="">State</h9>
diff --git a/src/assets/scripts/user-details/user-details.service.js b/src/assets/scripts/user-details/user-details.service.js
index c83f1bf..47d6455 100644
--- a/src/assets/scripts/user-details/user-details.service.js
+++ b/src/assets/scripts/user-details/user-details.service.js
@@ -1,9 +1,10 @@
+/** @ngInject */
 const UserDetailsService = ($http) => {
     let serv = {};
 
-    serv.fetchUserDetails = (route) =>{
-        return $http.get(`${process.env.RESTAPI_URL}/api/users/${route.id}`)
-            .then( (result) => { return result.data; })
+    serv.fetchUserDetails = (route) => {
+        return $http.get(`${process.env.RESTAPI_URL}/api/user/${route.id}`)
+            .then( (result) => { console.log(result); return result.data; })
             .catch( (error) => { return error; })
     }
     return serv;
diff --git a/src/assets/scripts/users/users.html b/src/assets/scripts/users/users.html
index d188248..d78df99 100644
--- a/src/assets/scripts/users/users.html
+++ b/src/assets/scripts/users/users.html
@@ -17,7 +17,7 @@
               <div class="user-card-title">{{u.personal.first_name}} {{u.personal.last_name}}</div>
               <div class=" text-size-11">{{u.personal.city}}</div>
               <div class=" text-size-11">{{u.personal.phone}}</div>
-              <a href="#!user-details" id="user-action-fill">view user profile</a>
+              <a href="#!users/{{u._id}}" id="user-action-fill">view user profile</a>
               <a href="#" class="visible-nomit visible-referee visible-admin" ng-show="user.role =='nomit' || user.role =='referee' || user.role =='admin'" id="user-action-border" data-toggle="tooltip" data-placement="bottom" title="User will be unable to log in to WISP">
                 ban user</a>
             </div>