diff --git a/config/postgres/initdb/scripts/initial_credentials.dev.sql b/config/postgres/initdb/scripts/initial_credentials.dev.sql
index dbedf5d47..323a2d8f0 100644
--- a/config/postgres/initdb/scripts/initial_credentials.dev.sql
+++ b/config/postgres/initdb/scripts/initial_credentials.dev.sql
@@ -1,2 +1,2 @@
 SELECT * FROM USERS_CREATE( 'admin@email.com', 'pbkdf2:sha256:150000$c30CjWVB$d1d6d544dfffd2dee5488cfe89cc2f965a8c4cddbf9180ad206f272237a5fa1a', 'Ima Admin', 'Ima Group', true);
-SELECT * FROM USERS_CREATE('user@email.com', 'pbkdf2:sha256:150000$K5efuBwy$fcaa41a3203fd8f64b5d4aee241365ffa35e0a3a1c02f605bbc20cbea701cf89', 'Ima User', 'Ima Group' , true);
+SELECT * FROM USERS_CREATE('user@email.com', 'pbkdf2:sha256:150000$K5efuBwy$fcaa41a3203fd8f64b5d4aee241365ffa35e0a3a1c02f605bbc20cbea701cf89', 'Ima User', 'Ima Group' , false);
diff --git a/src/backend/expungeservice/endpoints/usersview.py b/src/backend/expungeservice/endpoints/usersview.py
index c96be1cf7..07ae76e93 100644
--- a/src/backend/expungeservice/endpoints/usersview.py
+++ b/src/backend/expungeservice/endpoints/usersview.py
@@ -107,10 +107,10 @@ def get(self, user_id):
             response_data: Dict[str, List[Dict[str, str]]] = {"users": []}
             for user_entry in user_db_data:
                 response_data["users"].append({
-                    "user_id": user_entry["user_id"],
+                    "id": user_entry["user_id"],
                     "email": user_entry["email"],
                     "name": user_entry["name"],
-                    "group_name": user_entry["group_name"],
+                    "group": user_entry["group_name"],
                     "admin": user_entry["admin"],
                     "timestamp": user_entry["date_created"]
                     })
diff --git a/src/backend/tests/endpoints/test_users.py b/src/backend/tests/endpoints/test_users.py
index 918914733..9fe1dad15 100644
--- a/src/backend/tests/endpoints/test_users.py
+++ b/src/backend/tests/endpoints/test_users.py
@@ -113,8 +113,8 @@ def test_get_users_success(self):
         assert data["users"][0]["admin"] in [True, False]
         assert data["users"][0]["timestamp"]
         assert data["users"][0]["name"]
-        assert data["users"][0]["group_name"]
-        assert data["users"][0]["user_id"]
+        assert data["users"][0]["group"]
+        assert data["users"][0]["id"]
 
     def test_get_users_not_admin(self):
         self.login(self.user_data["user1"]["email"], self.user_data["user1"]["password"])
diff --git a/src/frontend/src/components/LoadingSpinner/index.tsx b/src/frontend/src/components/LoadingSpinner/index.tsx
new file mode 100644
index 000000000..582526fee
--- /dev/null
+++ b/src/frontend/src/components/LoadingSpinner/index.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+interface Props {
+  inputString: string;
+}
+
+class LoadingSpinner extends React.Component<Props> {
+  render() {
+    return (
+      <p className="bg-white mv4 pa4 br3 fw6 tc">
+        <span className="spinner mr2"></span>Loading {this.props.inputString}...
+      </p>
+    );
+  }
+}
+
+export default LoadingSpinner;
diff --git a/src/frontend/src/components/LogIn/index.tsx b/src/frontend/src/components/LogIn/index.tsx
index 9f345c66e..a150129e0 100644
--- a/src/frontend/src/components/LogIn/index.tsx
+++ b/src/frontend/src/components/LogIn/index.tsx
@@ -153,7 +153,7 @@ class LogIn extends React.Component<Props, State> {
               ) : null}
               {this.state.invalidResponse === true ? (
                 <p id="no_match_msg" className="bg-washed-red mv4 pa3 br3 fw6">
-                  Technical difficulties try again later.
+                  Technical difficulties, please contact system administrator.
                 </p>
               ) : null}
             </div>
diff --git a/src/frontend/src/components/NotAuthorized/index.tsx b/src/frontend/src/components/NotAuthorized/index.tsx
new file mode 100644
index 000000000..a05449c0f
--- /dev/null
+++ b/src/frontend/src/components/NotAuthorized/index.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+class NotAuthorized extends React.Component {
+  render() {
+    return (
+      <p className="bg-white mv4 pa4 br3 fw6 tc shadow br3">
+        You are not authorized to view this content, please contact system
+        administrator.
+      </p>
+    );
+  }
+}
+
+export default NotAuthorized;
diff --git a/src/frontend/src/components/OeciLogin/index.tsx b/src/frontend/src/components/OeciLogin/index.tsx
index dc9457986..a69b547cf 100644
--- a/src/frontend/src/components/OeciLogin/index.tsx
+++ b/src/frontend/src/components/OeciLogin/index.tsx
@@ -133,7 +133,7 @@ class OeciLogin extends React.Component<Props, State> {
               ) : null}
               {this.state.invalidResponse === true ? (
                 <p id="no_match_msg" className="bg-washed-red mv4 pa3 br3 fw6">
-                  Technical difficulties try again later.
+                  Technical difficulties, please contact system administrator.
                 </p>
               ) : null}
             </div>
diff --git a/src/frontend/src/components/Spinner/index.tsx b/src/frontend/src/components/Spinner/index.tsx
deleted file mode 100644
index d27c2fa07..000000000
--- a/src/frontend/src/components/Spinner/index.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-
-export default function() {
-  return (
-    <p className="bg-white mv4 pa4 br3 fw6">
-      <span className="spinner mr2"></span>Loading your search results...
-    </p>
-  );
-}
diff --git a/src/frontend/src/components/TechnicalDifficulties/index.tsx b/src/frontend/src/components/TechnicalDifficulties/index.tsx
new file mode 100644
index 000000000..8b659e946
--- /dev/null
+++ b/src/frontend/src/components/TechnicalDifficulties/index.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+class TechnicalDifficulties extends React.Component {
+  render() {
+    return (
+      <p className="bg-white mv4 pa4 br3 fw6 tc shadow br3">
+        Something went wrong, please contact system administrator to report
+        technical difficulties.
+      </p>
+    );
+  }
+}
+
+export default TechnicalDifficulties;
diff --git a/src/frontend/src/components/User/index.tsx b/src/frontend/src/components/User/index.tsx
index a557ec950..7679188af 100644
--- a/src/frontend/src/components/User/index.tsx
+++ b/src/frontend/src/components/User/index.tsx
@@ -8,14 +8,28 @@ interface Props {
 class User extends React.Component<Props> {
   public render() {
     return (
-      <tr>
-        <td className="pa3 bb b--black-20">
-          <a href="#" className="underline">
+      <tr className="bt b--black-20">
+        <td className="pa3">
+          <a href="/admin" className="underline">
             {this.props.user.name}
           </a>
         </td>
-        <td className="pa3 bb b--black-20">{this.props.user.role}</td>
-        <td className="pa3 bb b--black-20">{this.props.user.group}</td>
+        <td className="pa3">{this.props.user.admin ? 'Admin' : 'Search'}</td>
+        <td className="pa3">{this.props.user.group}</td>
+        <td className="pa3 flex justify-end">
+          <button
+            aria-label={`edit user: ${this.props.user.name}`}
+            className="navy hover-dark-blue"
+          >
+            <i aria-hidden="true" className="fa fa-pen pr3" />
+          </button>
+          <button
+            aria-label={`delete user: ${this.props.user.name}`}
+            className="navy hover-dark-blue"
+          >
+            <i aria-hidden="true" className="fa fa-trash" />
+          </button>
+        </td>
       </tr>
     );
   }
diff --git a/src/frontend/src/components/UserList/index.tsx b/src/frontend/src/components/UserList/index.tsx
index c8e65620a..4a5472842 100644
--- a/src/frontend/src/components/UserList/index.tsx
+++ b/src/frontend/src/components/UserList/index.tsx
@@ -1,57 +1,90 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { AppState } from '../../redux/store';
-import { loadUsers } from '../../redux/users/actions';
-import { User as UserTypes, UserState } from '../../redux/users/types';
+import { loadUsers, clearUsers } from '../../redux/users/actions';
+import { UserState } from '../../redux/users/types';
 import User from '../User';
+import LoadingSpinner from '../LoadingSpinner';
+import NotAuthorized from '../NotAuthorized';
+import TechnicalDifficulties from '../TechnicalDifficulties';
 
 interface Props {
   users: UserState;
-  loadUsers: Function;
+  loadUsers: () => Promise<void>;
+  clearUsers: Function;
+}
+
+interface State {
+  errorType: string;
 }
 
 class UserList extends React.Component<Props> {
-  public componentWillMount() {
+  state: State = {
+    errorType: 'none'
+  };
+  componentDidMount() {
     // this will call the axios request to populate the component with userList
-    this.props.loadUsers();
+    this.props.loadUsers().catch(error => {
+      if (error.response.status === 403) {
+        // error if user is not admin
+        this.setState({ errorType: 'unauthorized' });
+      } else {
+        this.setState({ errorType: 'technical' });
+      }
+    });
   }
 
-  public displayUsers = (inputUsers: UserTypes[]) => {
-    if (inputUsers) {
-      const returnList = inputUsers.map(user => {
-        return <User key={user.id} user={user} />;
-      });
+  componentWillUnmount() {
+    this.props.clearUsers();
+  }
 
-      return returnList;
+  displayNoUsers = () => {
+    if (this.state.errorType === 'none') {
+      return <LoadingSpinner inputString={'Users'} />;
+    } else if (this.state.errorType === 'unauthorized') {
+      return <NotAuthorized />;
+    } else {
+      return <TechnicalDifficulties />;
     }
   };
 
-  public render() {
-    return (
-      <section className="cf bg-white shadow br3 mb5">
-        <div className="pv4 ph3">
-          <h1 className="f3 fw6 dib">Users</h1>
-          <button className="bg-navy white bg-animate hover-bg-dark-blue fw6 br2 pv2 ph3 fr">
-            New User
-          </button>
-        </div>
+  displayUserList = () => {
+    const returnList = this.props.users.userList.map(user => {
+      return <User key={user.id} user={user} />;
+    });
+
+    return returnList;
+  };
+
+  displayUsers = () => (
+    <section className="cf bg-white shadow br3 mb5">
+      <div className="pv4 ph3">
+        <h1 className="f3 fw6 dib">Users</h1>
+        <button className="bg-navy white bg-animate hover-bg-dark-blue fw6 br2 pv2 ph3 fr">
+          New User
+        </button>
+      </div>
+
+      <div className="overflow-auto">
+        <table className="f6 w-100 mw8 center collapse">
+          <thead className="bb b--black-20">
+            <tr>
+              <th className="fw6 tl pb3 ph3 bg-white">Name</th>
+              <th className="fw6 tl pb3 ph3 bg-white">Role</th>
+              <th className="fw6 tl pb3 ph3 bg-white">Group</th>
+            </tr>
+          </thead>
+
+          <tbody className="lh-copy">{this.displayUserList()}</tbody>
+        </table>
+      </div>
+    </section>
+  );
 
-        <div className="overflow-auto">
-          <table className="f6 w-100 mw8 center" data-cellspacing="0">
-            <thead>
-              <tr>
-                <th className="fw6 bb b--black-20 tl pb3 ph3 bg-white">Name</th>
-                <th className="fw6 bb b--black-20 tl pb3 ph3 bg-white">Role</th>
-                <th className="fw6 bb b--black-20 tl pb3 ph3 bg-white">Group</th>
-              </tr>
-            </thead>
-            {this.props.users
-              ? this.displayUsers(this.props.users.userList)
-              : null}
-          </table>
-        </div>
-      </section>
-    );
+  render() {
+    return this.props.users.userList.length > 0
+      ? this.displayUsers()
+      : this.displayNoUsers();
   }
 }
 
@@ -61,5 +94,5 @@ const mapStateToProps = (state: AppState) => ({
 
 export default connect(
   mapStateToProps,
-  { loadUsers }
+  { loadUsers, clearUsers }
 )(UserList);
diff --git a/src/frontend/src/containers/AllRecords.tsx b/src/frontend/src/containers/AllRecords.tsx
index d10e10737..fc5937ddd 100644
--- a/src/frontend/src/containers/AllRecords.tsx
+++ b/src/frontend/src/containers/AllRecords.tsx
@@ -44,7 +44,10 @@ const mapStateToProps = (state: AppState) => {
   };
 };
 
-export default connect(mapStateToProps, {
-  fetchRecords: loadSearchRecords,
-  clearRecords: clearSearchRecords
-})(AllRecords);
+export default connect(
+  mapStateToProps,
+  {
+    fetchRecords: loadSearchRecords,
+    clearRecords: clearSearchRecords
+  }
+)(AllRecords);
diff --git a/src/frontend/src/containers/AllStatus.tsx b/src/frontend/src/containers/AllStatus.tsx
index 877882a75..4baae5910 100644
--- a/src/frontend/src/containers/AllStatus.tsx
+++ b/src/frontend/src/containers/AllStatus.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { AppState } from '../redux/store';
-import Spinner from '../components/Spinner';
+import LoadingSpinner from '../components/LoadingSpinner';
 import NoSearchResults from '../components/NoSearchResults';
 
 type Props = {
@@ -12,7 +12,11 @@ class AllStatus extends React.Component<Props> {
   render() {
     return (
       <section>
-        {this.props.loading ? <Spinner /> : <NoSearchResults />}
+        {this.props.loading ? (
+          <LoadingSpinner inputString={'your search results'} />
+        ) : (
+          <NoSearchResults />
+        )}
       </section>
     );
   }
diff --git a/src/frontend/src/redux/groups/actions.ts b/src/frontend/src/redux/groups/actions.ts
index 542eab867..8ccc8609e 100644
--- a/src/frontend/src/redux/groups/actions.ts
+++ b/src/frontend/src/redux/groups/actions.ts
@@ -11,12 +11,12 @@ export const loadGroups = () => (dispatch: Dispatch) => {
           type: LOAD_GROUPS,
           groups
         })
-      )
-
+      );
     }, 1000);
   });
 };
 
+const date = () => new Date();
 // Data for loadGroups action to populate the store with group data
 const placeholderGroupData: Group[] = [
   {
@@ -28,21 +28,24 @@ const placeholderGroupData: Group[] = [
         group: 'Metropolitan Public Defender',
         id: 1,
         name: 'Jane Dolby',
-        role: 'Search'
+        admin: false,
+        timestamp: date()
       },
       {
         email: 'michael@email.com',
         group: 'Metropolitan Public Defender',
         id: 2,
         name: 'Michael Zhang',
-        role: 'Admin'
+        admin: true,
+        timestamp: date()
       },
       {
         email: 'melissa@email.com',
         group: 'Royce, Jennings & Coldwater',
         id: 3,
         name: 'Melissa Jennings',
-        role: 'Search'
+        admin: false,
+        timestamp: date()
       }
     ]
   },
@@ -55,42 +58,48 @@ const placeholderGroupData: Group[] = [
         group: 'Metropolitan Public Defender',
         id: 1,
         name: 'Jane Dolby',
-        role: 'Search'
+        admin: false,
+        timestamp: date()
       },
       {
         email: 'michael@email.com',
         group: 'Metropolitan Public Defender',
         id: 2,
         name: 'Michael Zhang',
-        role: 'Admin'
+        admin: true,
+        timestamp: date()
       },
       {
         email: 'melissa@email.com',
         group: 'Royce, Jennings & Coldwater',
         id: 3,
         name: 'Melissa Jennings',
-        role: 'Search'
+        admin: false,
+        timestamp: date()
       },
       {
         email: 'michael@email.com',
         group: 'Metropolitan Public Defender',
         id: 2,
         name: 'Michael Zhang',
-        role: 'Admin'
+        admin: true,
+        timestamp: date()
       },
       {
         email: 'melissa@email.com',
         group: 'Royce, Jennings & Coldwater',
         id: 3,
         name: 'Melissa Jennings',
-        role: 'Search'
+        admin: false,
+        timestamp: date()
       },
       {
         email: 'terri@email.com',
         group: 'Royce, Jennings & Coldwater',
         id: 4,
         name: 'Terri Royce',
-        role: 'Search'
+        admin: false,
+        timestamp: date()
       }
     ]
   },
@@ -103,28 +112,32 @@ const placeholderGroupData: Group[] = [
         group: 'Metropolitan Public Defender',
         id: 1,
         name: 'Jane Dolby',
-        role: 'Search'
+        admin: false,
+        timestamp: date()
       },
       {
         email: 'michael@email.com',
         group: 'Metropolitan Public Defender',
         id: 2,
         name: 'Michael Zhang',
-        role: 'Admin'
+        admin: true,
+        timestamp: date()
       },
       {
         email: 'melissa@email.com',
         group: 'Royce, Jennings & Coldwater',
         id: 3,
         name: 'Melissa Jennings',
-        role: 'Search'
+        admin: false,
+        timestamp: date()
       },
       {
         email: 'terri@email.com',
         group: 'Royce, Jennings & Coldwater',
         id: 4,
         name: 'Terri Royce',
-        role: 'Search'
+        admin: false,
+        timestamp: date()
       }
     ]
   },
@@ -137,16 +150,17 @@ const placeholderGroupData: Group[] = [
         group: 'Metropolitan Public Defender',
         id: 1,
         name: 'Jane Dolby',
-        role: 'Search'
+        admin: false,
+        timestamp: date()
       },
       {
         email: 'michael@email.com',
         group: 'Metropolitan Public Defender',
         id: 2,
         name: 'Michael Zhang',
-        role: 'Admin'
+        admin: true,
+        timestamp: date()
       }
     ]
   }
-
 ];
diff --git a/src/frontend/src/redux/users/actions.ts b/src/frontend/src/redux/users/actions.ts
index fbfb18a39..fc73c5071 100644
--- a/src/frontend/src/redux/users/actions.ts
+++ b/src/frontend/src/redux/users/actions.ts
@@ -1,47 +1,25 @@
 import { Dispatch } from 'redux';
-import { LOAD_USERS, User } from './types';
+import { LOAD_USERS, CLEAR_USERS } from './types';
+import apiService from '../../service/api-service';
 
-export const loadUsers = () => (dispatch: Dispatch) => {
-  return new Promise(resolve => {
-    setTimeout(() => {
-      // placeholderUserData will be replaced with the payload from the axios request
-      const users: User[] = placeholderUserData;
+export const loadUsers = () => {
+  return (dispatch: Dispatch) => {
+    return apiService(dispatch, {
+      url: '/api/users',
+      method: 'get'
+    }).then((response: any) => {
       dispatch({
         type: LOAD_USERS,
-        users
+        users: response.data.users
       });
-    }, 1000);
-  });
+    });
+  };
 };
 
-// Data for loadUsers action to populate the store with user data
-const placeholderUserData: User[] = [
-  {
-    email: 'jane@email.com',
-    group: 'Metropolitan Public Defender',
-    id: 1,
-    name: 'Jane Dolby',
-    role: 'Search'
-  },
-  {
-    email: 'michael@email.com',
-    group: 'Metropolitan Public Defender',
-    id: 2,
-    name: 'Michael Zhang',
-    role: 'Admin'
-  },
-  {
-    email: 'melissa@email.com',
-    group: 'Royce, Jennings & Coldwater',
-    id: 3,
-    name: 'Melissa Jennings',
-    role: 'Search'
-  },
-  {
-    email: 'terri@email.com',
-    group: 'Royce, Jennings & Coldwater',
-    id: 4,
-    name: 'Terri Royce',
-    role: 'Search'
-  }
-];
+export const clearUsers = () => {
+  return (dispatch: Dispatch) => {
+    dispatch({
+      type: CLEAR_USERS
+    });
+  };
+};
diff --git a/src/frontend/src/redux/users/reducer.ts b/src/frontend/src/redux/users/reducer.ts
index 77eac56aa..e542ed471 100644
--- a/src/frontend/src/redux/users/reducer.ts
+++ b/src/frontend/src/redux/users/reducer.ts
@@ -1,4 +1,4 @@
-import { LOAD_USERS, UserActionTypes, UserState } from './types';
+import { CLEAR_USERS, LOAD_USERS, UserActionTypes, UserState } from './types';
 
 const initialState: UserState = {
   userList: []
@@ -13,6 +13,10 @@ export function usersReducer(
       return {
         userList: action.users
       };
+    case CLEAR_USERS:
+      return {
+        userList: []
+      };
     default:
       return state;
   }
diff --git a/src/frontend/src/redux/users/types.ts b/src/frontend/src/redux/users/types.ts
index 3d8ccabf8..ac3d89d76 100644
--- a/src/frontend/src/redux/users/types.ts
+++ b/src/frontend/src/redux/users/types.ts
@@ -3,18 +3,25 @@ export interface UserState {
 }
 
 export interface User {
+  admin: boolean;
   email: string;
   group: string;
   id: number;
   name: string;
-  role: string;
+  timestamp: Date;
 }
 
 export const LOAD_USERS = 'LOAD_USERS';
+export const CLEAR_USERS = 'CLEAR_USERS';
 
 interface LoadUsersAction {
   type: typeof LOAD_USERS;
   users: User[];
 }
 
-export type UserActionTypes = LoadUsersAction;
+interface ClearUserAction {
+  type: typeof CLEAR_USERS;
+  users: User[];
+}
+
+export type UserActionTypes = LoadUsersAction | ClearUserAction;