diff --git a/ui/src/app/user/admin/container/admin-management.component.html b/ui/src/app/user/admin/container/admin-management.component.html
index 7b32aa82f..13d79a1ff 100644
--- a/ui/src/app/user/admin/container/admin-management.component.html
+++ b/ui/src/app/user/admin/container/admin-management.component.html
@@ -20,16 +20,16 @@
                 </thead>
                 <tbody>
                     <tr *ngFor="let user of users$ | async">
-                        <th>{{ user.resourceId }}</th>
-                        <td>{{ user.name.first }} {{ user.name.last }}</td>
-                        <td>{{ user.email }}</td>
+                        <th>{{ user.username }}</th>
+                        <td>{{ user.firstName }} {{ user.lastName }}</td>
+                        <td>{{ user.emailAddress }}</td>
                         <td>
-                            <select [name]="user.resourceId" [ngModel]="user.role" class="form-control" (change)="setUserRole(user, $event.target.value)">
-                                <option *ngFor="let role of roles$ | async">{{ role }}</option>
+                            <select [name]="user.username" [ngModel]="user.role.name" class="form-control" (change)="setUserRole(user, $event.target.value)">
+                                <option *ngFor="let role of roles$ | async" [value]="role.name">{{ role.name }}</option>
                             </select>
                         </td>
                         <td>
-                            <button class="btn btn-link" (click)="deleteUser(user.resourceId)">
+                            <button class="btn btn-link" (click)="deleteUser(user.username)">
                                 <span class="sr-only">Delete User</span>
                                 <i class="fa fa-trash fa-lg text-danger"></i>
                             </button>
diff --git a/ui/src/app/user/admin/container/admin-management.component.ts b/ui/src/app/user/admin/container/admin-management.component.ts
index 08c69264d..fd3219723 100644
--- a/ui/src/app/user/admin/container/admin-management.component.ts
+++ b/ui/src/app/user/admin/container/admin-management.component.ts
@@ -7,7 +7,7 @@ import * as fromAdmin from '../reducer';
 
 import { UserService } from '../../../core/service/user.service';
 import { LoadAdminRequest, UpdateAdminRequest, RemoveAdminRequest } from '../action/collection.action';
-import { Admin } from '../model/admin';
+import { Admin, Role } from '../model/admin';
 
 @Component({
     selector: 'admin-management-page',
@@ -18,7 +18,7 @@ import { Admin } from '../model/admin';
 export class AdminManagementPageComponent {
 
     users$: Observable<Admin[]>;
-    roles$: Observable<string[]> = of(['SUPER_ADMIN', 'DELEGATED_ADMIN']);
+    roles$: Observable<Role[]> = of([{name: 'ROLE_ADMIN' },  {name: 'ROLE_USER'}]);
 
     constructor(
         private store: Store<fromRoot.State>
@@ -28,7 +28,7 @@ export class AdminManagementPageComponent {
         this.users$ = this.store.select(fromAdmin.getAllAdmins);
     }
 
-    setUserRole(user: Admin, change: string): void {
+    setUserRole(user: Admin, change: Role): void {
         this.store.dispatch(new UpdateAdminRequest({
             ...user,
             role: change
diff --git a/ui/src/app/user/admin/effect/collection.effect.ts b/ui/src/app/user/admin/effect/collection.effect.ts
index 6120faf5b..4958f1d8e 100644
--- a/ui/src/app/user/admin/effect/collection.effect.ts
+++ b/ui/src/app/user/admin/effect/collection.effect.ts
@@ -34,7 +34,7 @@ export class AdminCollectionEffects {
         map(action => action.payload),
         switchMap(changes => this.adminService.update(changes).pipe(
             map(user => new UpdateAdminSuccess({
-                id: changes.resourceId,
+                id: changes.username,
                 changes
             }))
         ))
diff --git a/ui/src/app/user/admin/model/admin-entity.ts b/ui/src/app/user/admin/model/admin-entity.ts
new file mode 100644
index 000000000..70a6e93b7
--- /dev/null
+++ b/ui/src/app/user/admin/model/admin-entity.ts
@@ -0,0 +1,25 @@
+import { Admin, Role } from './admin';
+
+export class AdminEntity implements Admin {
+
+    username: string;
+    firstName: string;
+    lastName: string;
+    emailAddress: string;
+
+    roles: Role[];
+
+    constructor(
+        properties: Admin
+    ) {
+        Object.assign(this, properties);
+    }
+
+    get role(): Role {
+        return this.roles[0];
+    }
+
+    set role(newRole: Role) {
+        this.roles[0] = newRole;
+    }
+}
diff --git a/ui/src/app/user/admin/model/admin.ts b/ui/src/app/user/admin/model/admin.ts
index 5a5a9400a..29a29ccfe 100644
--- a/ui/src/app/user/admin/model/admin.ts
+++ b/ui/src/app/user/admin/model/admin.ts
@@ -1,9 +1,19 @@
 import { User } from '../../../core/model/user';
 
-export interface Admin extends User {
+export interface Admin {
     createdDate?: string;
     updatedDate?: string;
-    resourceId: string;
+    username: string;
+    firstName: string;
+    lastName: string;
 
-    email: string;
+    roles: Role[];
+
+    role: Role;
+
+    emailAddress: string;
+}
+
+export interface Role {
+    name: string;
 }
diff --git a/ui/src/app/user/admin/reducer/collection.reducer.ts b/ui/src/app/user/admin/reducer/collection.reducer.ts
index 1e884b907..70d8ba9a4 100644
--- a/ui/src/app/user/admin/reducer/collection.reducer.ts
+++ b/ui/src/app/user/admin/reducer/collection.reducer.ts
@@ -8,7 +8,7 @@ export interface CollectionState extends EntityState<Admin> {
 }
 
 export const adapter: EntityAdapter<Admin> = createEntityAdapter<Admin>({
-    selectId: (model: Admin) => model.resourceId
+    selectId: (model: Admin) => model.username
 });
 
 export const initialState: CollectionState = adapter.getInitialState({
diff --git a/ui/src/app/user/admin/service/admin.service.ts b/ui/src/app/user/admin/service/admin.service.ts
index 77bd39c05..1d050f433 100644
--- a/ui/src/app/user/admin/service/admin.service.ts
+++ b/ui/src/app/user/admin/service/admin.service.ts
@@ -1,47 +1,39 @@
 import { Injectable } from '@angular/core';
 import { Observable, of } from 'rxjs';
 import { Admin } from '../model/admin';
-
-let users = <Admin[]>[
-    {
-        resourceId: 'abc',
-        role: 'SUPER_ADMIN',
-        email: 'foo@bar.com',
-        name: {
-            first: 'Jane',
-            last: 'Doe'
-        }
-    },
-    {
-        resourceId: 'def',
-        role: 'DELEGATED_ADMIN',
-        email: 'bar@baz.com',
-        name: {
-            first: 'John',
-            last: 'Doe'
-        }
-    }
-];
+import { HttpClient } from '@angular/common/http';
+import { map, catchError } from 'rxjs/operators';
+import { AdminEntity } from '../model/admin-entity';
 
 @Injectable()
 export class AdminService {
 
-    constructor() { }
+    private endpoint = '/admin/users';
+    private base = '/api';
+
+    constructor(
+        private http: HttpClient
+    ) { }
     query(): Observable<Admin[]> {
-        return of([
-            ...users
-        ]);
+        return this.http.get<Admin[]>(
+            `${this.base}${this.endpoint}`, {}
+        ).pipe(
+            map(users => users.map(u => new AdminEntity(u)))
+        );
     }
 
     update(user: Admin): Observable<Admin> {
-        return of({
-            ...users.find(u => u.resourceId === user.resourceId),
-            ...user
-        });
+        return this.http.put<Admin>(
+            `${this.base}${this.endpoint}/${user.username}`, {user}
+        );
     }
 
     remove(userId: string): Observable<boolean> {
-        users = users.filter(u => u.resourceId !== userId);
-        return of(true);
+        return this.http.delete<Admin>(
+            `${this.base}${this.endpoint}/${userId}`
+        ).pipe(
+            map(response => !!response),
+            catchError(() => of(false))
+        );
     }
 }