diff --git a/awx/ui_next/src/api/models/Users.js b/awx/ui_next/src/api/models/Users.js
index d486e3ea81..b98cf45cae 100644
--- a/awx/ui_next/src/api/models/Users.js
+++ b/awx/ui_next/src/api/models/Users.js
@@ -27,12 +27,12 @@ class Users extends Base {
 
   readRoles(userId, params) {
     return this.http.get(`${this.baseUrl}${userId}/roles/`, {
-      params
+      params,
     });
   }
 
-  roleOptions(userId) {
-    return this.http.options(`${this.baseUrl}${userId}/roles/`)
+  readRoleOptions(userId) {
+    return this.http.options(`${this.baseUrl}${userId}/roles/`);
   }
 }
 
diff --git a/awx/ui_next/src/screens/User/UserAccess/UserAccessList.jsx b/awx/ui_next/src/screens/User/UserAccess/UserAccessList.jsx
index 27082dfd44..808ec3530a 100644
--- a/awx/ui_next/src/screens/User/UserAccess/UserAccessList.jsx
+++ b/awx/ui_next/src/screens/User/UserAccess/UserAccessList.jsx
@@ -31,12 +31,17 @@ function UserAccessList({ i18n }) {
   } = useRequest(
     useCallback(async () => {
       const params = parseQueryString(QS_CONFIG, search);
-      const {
-        data: { results, count },
-      } = await UsersAPI.readRoles(id, params);
-      const {
-        data: { actions },
-      } = await UsersAPI.roleOptions(id);
+      const [
+        {
+          data: { results, count },
+        },
+        {
+          data: { actions },
+        },
+      ] = await Promise.all([
+        UsersAPI.readRoles(id, params),
+        UsersAPI.readRoleOptions(id),
+      ]);
       return { roleCount: count, roles: results, options: actions };
     }, [id, search]),
     {
@@ -76,8 +81,8 @@ function UserAccessList({ i18n }) {
       qsConfig={QS_CONFIG}
       toolbarSearchColumns={[
         {
-          name: i18n._(t`Type`),
-          key: 'content_type__search',
+          name: i18n._(t`Role`),
+          key: 'role_field',
           isDefault: true,
         },
       ]}
diff --git a/awx/ui_next/src/screens/User/UserAccess/UserAccessList.test.jsx b/awx/ui_next/src/screens/User/UserAccess/UserAccessList.test.jsx
index 366d263926..85cdf25f4f 100644
--- a/awx/ui_next/src/screens/User/UserAccess/UserAccessList.test.jsx
+++ b/awx/ui_next/src/screens/User/UserAccess/UserAccessList.test.jsx
@@ -3,12 +3,14 @@ import { act } from 'react-dom/test-utils';
 import { createMemoryHistory } from 'history';
 import { UsersAPI } from '@api';
 import { Route } from 'react-router-dom';
-import { mountWithContexts } from '@testUtils/enzymeHelpers';
+import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
 import UserAccessList from './UserAccessList';
 
 jest.mock('@api/models/Users');
 describe('<UserAccessList />', () => {
-  test('should render properly', async () => {
+  let wrapper;
+  let history;
+  beforeEach(async () => {
     UsersAPI.readRoles.mockResolvedValue({
       data: {
         results: [
@@ -27,28 +29,66 @@ describe('<UserAccessList />', () => {
           },
           {
             id: 3,
-            name: 'Update',
+            name: 'Admin',
+            type: 'role',
+            url: '/api/v2/roles/257/',
+            summary_fields: {
+              resource_name: 'template delete project',
+              resource_id: 16,
+              resource_type: 'workflow_job_template',
+              resource_type_display_name: 'Job Template',
+              user_capabilities: { unattach: true },
+            },
+          },
+          {
+            id: 4,
+            name: 'Execute',
             type: 'role',
             url: '/api/v2/roles/258/',
             summary_fields: {
-              resource_name: 'Foo Bar',
+              resource_name: 'Credential Bar',
               resource_id: 75,
               resource_type: 'credential',
               resource_type_display_name: 'Credential',
               user_capabilities: { unattach: true },
             },
           },
+          {
+            id: 5,
+            name: 'Update',
+            type: 'role',
+            url: '/api/v2/roles/259/',
+            summary_fields: {
+              resource_name: 'Inventory Foo',
+              resource_id: 76,
+              resource_type: 'inventory',
+              resource_type_display_name: 'Inventory',
+              user_capabilities: { unattach: true },
+            },
+          },
+          {
+            id: 6,
+            name: 'Admin',
+            type: 'role',
+            url: '/api/v2/roles/260/',
+            summary_fields: {
+              resource_name: 'Smart Inventory Foo',
+              resource_id: 77,
+              resource_type: 'smart_inventory',
+              resource_type_display_name: 'Inventory',
+              user_capabilities: { unattach: true },
+            },
+          },
         ],
-        count: 2,
+        count: 4,
       },
     });
 
-    UsersAPI.roleOptions.mockResolvedValue({
+    UsersAPI.readRoleOptions.mockResolvedValue({
       data: { actions: { POST: { id: 1, disassociate: true } } },
     });
 
-    let wrapper;
-    const history = createMemoryHistory({
+    history = createMemoryHistory({
       initialEntries: ['/users/18/access'],
     });
 
@@ -70,7 +110,32 @@ describe('<UserAccessList />', () => {
         }
       );
     });
-
+  });
+  afterEach(() => {
+    jest.clearAllMocks();
+    wrapper.unmount();
+  });
+  test('should render properly', async () => {
     expect(wrapper.find('UserAccessList').length).toBe(1);
   });
+
+  test('should create proper detailUrl', async () => {
+    waitForElement(wrapper, 'ContentEmpty', el => el.length === 0);
+
+    expect(wrapper.find(`Link#userRole-2`).prop('to')).toBe(
+      '/templates/job_template/15/details'
+    );
+    expect(wrapper.find(`Link#userRole-3`).prop('to')).toBe(
+      '/templates/workflow_job_template/16/details'
+    );
+    expect(wrapper.find('Link#userRole-4').prop('to')).toBe(
+      '/credentials/75/details'
+    );
+    expect(wrapper.find('Link#userRole-5').prop('to')).toBe(
+      '/inventories/inventory/76/details'
+    );
+    expect(wrapper.find('Link#userRole-6').prop('to')).toBe(
+      '/inventories/smart_inventory/77/details'
+    );
+  });
 });
diff --git a/awx/ui_next/src/screens/User/UserAccess/UserAccessListItem.jsx b/awx/ui_next/src/screens/User/UserAccess/UserAccessListItem.jsx
index 6d9bd1fd15..032c981da6 100644
--- a/awx/ui_next/src/screens/User/UserAccess/UserAccessListItem.jsx
+++ b/awx/ui_next/src/screens/User/UserAccess/UserAccessListItem.jsx
@@ -11,7 +11,7 @@ import DataListCell from '@components/DataListCell';
 import { Link } from 'react-router-dom';
 
 function UserAccessListItem({ role, i18n, detailUrl }) {
-  const labelId = `check-action-${role.id}`;
+  const labelId = `userRole-${role.id}`;
   return (
     <DataListItem key={role.id} aria-labelledby={labelId} id={`${role.id}`}>
       <DataListItemRow>
diff --git a/awx/ui_next/src/screens/User/UserAccess/UserAccessListItem.test.jsx b/awx/ui_next/src/screens/User/UserAccess/UserAccessListItem.test.jsx
index 4837906f35..3b6df96c73 100644
--- a/awx/ui_next/src/screens/User/UserAccess/UserAccessListItem.test.jsx
+++ b/awx/ui_next/src/screens/User/UserAccess/UserAccessListItem.test.jsx
@@ -35,7 +35,6 @@ describe('<UserAccessListItem/>', () => {
     expect(
       wrapper.find('PFDataListCell[aria-label="resource name"]').text()
     ).toBe('template delete project');
-    console.log(wrapper.debug());
     expect(
       wrapper.find('PFDataListCell[aria-label="resource type"]').text()
     ).toContain('Job Template');
diff --git a/awx/ui_next/src/screens/User/UserAccess/index.js b/awx/ui_next/src/screens/User/UserAccess/index.js
index df470abaa6..754ba1ae99 100644
--- a/awx/ui_next/src/screens/User/UserAccess/index.js
+++ b/awx/ui_next/src/screens/User/UserAccess/index.js
@@ -1,8 +1,2 @@
-export {
-  default as UserAccessListList
-}
-from './UserAccessList';
-export {
-  default as UserAccessListItem
-}
-from './UserAccessListItem';
+export { default as UserAccessListList } from './UserAccessList';
+export { default as UserAccessListItem } from './UserAccessListItem';