diff --git a/awx/ui_next/src/api/models/Teams.js b/awx/ui_next/src/api/models/Teams.js
index de2d3db077..1a205993d4 100644
--- a/awx/ui_next/src/api/models/Teams.js
+++ b/awx/ui_next/src/api/models/Teams.js
@@ -28,6 +28,16 @@ class Teams extends Base {
   readRoleOptions(teamId) {
     return this.http.options(`${this.baseUrl}${teamId}/roles/`);
   }
+
+  readAccessList(teamId, params) {
+    return this.http.get(`${this.baseUrl}${teamId}/access_list/`, {
+      params,
+    });
+  }
+
+  readUsersAccessOptions(teamId) {
+    return this.http.options(`${this.baseUrl}${teamId}/users/`);
+  }
 }
 
 export default Teams;
diff --git a/awx/ui_next/src/screens/Team/Team.jsx b/awx/ui_next/src/screens/Team/Team.jsx
index 52203d3748..2d46f30360 100644
--- a/awx/ui_next/src/screens/Team/Team.jsx
+++ b/awx/ui_next/src/screens/Team/Team.jsx
@@ -16,7 +16,8 @@ import ContentError from '../../components/ContentError';
 import TeamDetail from './TeamDetail';
 import TeamEdit from './TeamEdit';
 import { TeamsAPI } from '../../api';
-import TeamAccessList from './TeamAccess';
+import TeamAccessList from './TeamRoles';
+import { ResourceAccessList } from '../../components/ResourceAccessList';
 
 function Team({ i18n, setBreadcrumb }) {
   const [team, setTeam] = useState(null);
@@ -51,8 +52,8 @@ function Team({ i18n, setBreadcrumb }) {
       id: 99,
     },
     { name: i18n._(t`Details`), link: `/teams/${id}/details`, id: 0 },
-    { name: i18n._(t`Users`), link: `/teams/${id}/users`, id: 1 },
-    { name: i18n._(t`Access`), link: `/teams/${id}/access`, id: 2 },
+    { name: i18n._(t`Access`), link: `/teams/${id}/access`, id: 1 },
+    { name: i18n._(t`Roles`), link: `/teams/${id}/roles`, id: 2 },
   ];
 
   let showCardHeader = true;
@@ -95,12 +96,12 @@ function Team({ i18n, setBreadcrumb }) {
             </Route>
           )}
           {team && (
-            <Route path="/teams/:id/users">
-              <span>Coming soon :)</span>
+            <Route path="/teams/:id/access">
+              <ResourceAccessList resource={team} apiModel={TeamsAPI} />
             </Route>
           )}
           {team && (
-            <Route path="/teams/:id/access">
+            <Route path="/teams/:id/roles">
               <TeamAccessList />
             </Route>
           )}
diff --git a/awx/ui_next/src/screens/Team/TeamAccess/index.js b/awx/ui_next/src/screens/Team/TeamAccess/index.js
deleted file mode 100644
index d249ad2afa..0000000000
--- a/awx/ui_next/src/screens/Team/TeamAccess/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './TeamAccessList';
diff --git a/awx/ui_next/src/screens/Team/TeamAccess/TeamAccessListItem.jsx b/awx/ui_next/src/screens/Team/TeamRoles/TeamRoleListItem.jsx
similarity index 94%
rename from awx/ui_next/src/screens/Team/TeamAccess/TeamAccessListItem.jsx
rename to awx/ui_next/src/screens/Team/TeamRoles/TeamRoleListItem.jsx
index e32199d19e..7c32f50d60 100644
--- a/awx/ui_next/src/screens/Team/TeamAccess/TeamAccessListItem.jsx
+++ b/awx/ui_next/src/screens/Team/TeamRoles/TeamRoleListItem.jsx
@@ -11,7 +11,7 @@ import { Link } from 'react-router-dom';
 import { DetailList, Detail } from '../../../components/DetailList';
 import DataListCell from '../../../components/DataListCell';
 
-function TeamAccessListItem({ role, i18n, detailUrl, onSelect }) {
+function TeamRoleListItem({ role, i18n, detailUrl, onSelect }) {
   const labelId = `teamRole-${role.id}`;
   return (
     <DataListItem key={role.id} aria-labelledby={labelId} id={`${role.id}`}>
@@ -60,4 +60,4 @@ function TeamAccessListItem({ role, i18n, detailUrl, onSelect }) {
     </DataListItem>
   );
 }
-export default withI18n()(TeamAccessListItem);
+export default withI18n()(TeamRoleListItem);
diff --git a/awx/ui_next/src/screens/Team/TeamAccess/TeamAccessListItem.test.jsx b/awx/ui_next/src/screens/Team/TeamRoles/TeamRoleListItem.test.jsx
similarity index 89%
rename from awx/ui_next/src/screens/Team/TeamAccess/TeamAccessListItem.test.jsx
rename to awx/ui_next/src/screens/Team/TeamRoles/TeamRoleListItem.test.jsx
index 094ba21bf8..3e446a34a8 100644
--- a/awx/ui_next/src/screens/Team/TeamAccess/TeamAccessListItem.test.jsx
+++ b/awx/ui_next/src/screens/Team/TeamRoles/TeamRoleListItem.test.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
-import TeamAccessListItem from './TeamAccessListItem';
+import TeamRoleListItem from './TeamRoleListItem';
 
-describe('<TeamAccessListItem/>', () => {
+describe('<TeamRoleListItem/>', () => {
   let wrapper;
   const role = {
     id: 1,
@@ -20,7 +20,7 @@ describe('<TeamAccessListItem/>', () => {
 
   test('should mount properly', () => {
     wrapper = mountWithContexts(
-      <TeamAccessListItem
+      <TeamRoleListItem
         role={role}
         detailUrl="/templates/job_template/15/details"
       />
@@ -31,7 +31,7 @@ describe('<TeamAccessListItem/>', () => {
 
   test('should render proper list item data', () => {
     wrapper = mountWithContexts(
-      <TeamAccessListItem
+      <TeamRoleListItem
         role={role}
         detailUrl="/templates/job_template/15/details"
       />
@@ -49,7 +49,7 @@ describe('<TeamAccessListItem/>', () => {
   });
   test('should render deletable chip', () => {
     wrapper = mountWithContexts(
-      <TeamAccessListItem
+      <TeamRoleListItem
         role={role}
         detailUrl="/templates/job_template/15/details"
       />
@@ -59,7 +59,7 @@ describe('<TeamAccessListItem/>', () => {
   test('should render read only chip', () => {
     role.summary_fields.user_capabilities.unattach = false;
     wrapper = mountWithContexts(
-      <TeamAccessListItem
+      <TeamRoleListItem
         role={role}
         detailUrl="/templates/job_template/15/details"
       />
diff --git a/awx/ui_next/src/screens/Team/TeamAccess/TeamAccessList.jsx b/awx/ui_next/src/screens/Team/TeamRoles/TeamRolesList.jsx
similarity index 97%
rename from awx/ui_next/src/screens/Team/TeamAccess/TeamAccessList.jsx
rename to awx/ui_next/src/screens/Team/TeamRoles/TeamRolesList.jsx
index e29b7d5e5f..25c3a59220 100644
--- a/awx/ui_next/src/screens/Team/TeamAccess/TeamAccessList.jsx
+++ b/awx/ui_next/src/screens/Team/TeamRoles/TeamRolesList.jsx
@@ -19,7 +19,7 @@ import PaginatedDataList from '../../../components/PaginatedDataList';
 import { getQSConfig, parseQueryString } from '../../../util/qs';
 import ErrorDetail from '../../../components/ErrorDetail';
 import AlertModal from '../../../components/AlertModal';
-import TeamAccessListItem from './TeamAccessListItem';
+import TeamRoleListItem from './TeamRoleListItem';
 import UserAndTeamAccessAdd from '../../../components/UserAndTeamAccessAdd/UserAndTeamAccessAdd';
 
 const QS_CONFIG = getQSConfig('roles', {
@@ -28,7 +28,7 @@ const QS_CONFIG = getQSConfig('roles', {
   order_by: 'id',
 });
 
-function TeamAccessList({ i18n }) {
+function TeamRolesList({ i18n }) {
   const [isWizardOpen, setIsWizardOpen] = useState(false);
   const { search } = useLocation();
   const { id } = useParams();
@@ -165,7 +165,7 @@ function TeamAccessList({ i18n }) {
           />
         )}
         renderItem={role => (
-          <TeamAccessListItem
+          <TeamRoleListItem
             key={role.id}
             role={role}
             detailUrl={detailUrl(role)}
@@ -234,4 +234,4 @@ function TeamAccessList({ i18n }) {
     </>
   );
 }
-export default withI18n()(TeamAccessList);
+export default withI18n()(TeamRolesList);
diff --git a/awx/ui_next/src/screens/Team/TeamAccess/TeamAccessList.test.jsx b/awx/ui_next/src/screens/Team/TeamRoles/TeamRolesList.test.jsx
similarity index 94%
rename from awx/ui_next/src/screens/Team/TeamAccess/TeamAccessList.test.jsx
rename to awx/ui_next/src/screens/Team/TeamRoles/TeamRolesList.test.jsx
index 5828d162df..5475470486 100644
--- a/awx/ui_next/src/screens/Team/TeamAccess/TeamAccessList.test.jsx
+++ b/awx/ui_next/src/screens/Team/TeamRoles/TeamRolesList.test.jsx
@@ -5,7 +5,7 @@ import {
   mountWithContexts,
   waitForElement,
 } from '../../../../testUtils/enzymeHelpers';
-import TeamAccessList from './TeamAccessList';
+import TeamRolesList from './TeamRolesList';
 
 jest.mock('../../../api/models/Teams');
 jest.mock('../../../api/models/Roles');
@@ -92,7 +92,7 @@ const roles = {
 const options = {
   data: { actions: { POST: { id: 1, disassociate: true } } },
 };
-describe('<TeamAccessList />', () => {
+describe('<TeamRolesList />', () => {
   let wrapper;
 
   afterEach(() => {
@@ -104,9 +104,9 @@ describe('<TeamAccessList />', () => {
     TeamsAPI.readRoleOptions.mockResolvedValue(options);
 
     await act(async () => {
-      wrapper = mountWithContexts(<TeamAccessList />);
+      wrapper = mountWithContexts(<TeamRolesList />);
     });
-    expect(wrapper.find('TeamAccessList').length).toBe(1);
+    expect(wrapper.find('TeamRolesList').length).toBe(1);
   });
 
   test('should create proper detailUrl', async () => {
@@ -114,7 +114,7 @@ describe('<TeamAccessList />', () => {
     TeamsAPI.readRoleOptions.mockResolvedValue(options);
 
     await act(async () => {
-      wrapper = mountWithContexts(<TeamAccessList />);
+      wrapper = mountWithContexts(<TeamRolesList />);
     });
     waitForElement(wrapper, 'ContentEmpty', el => el.length === 0);
 
@@ -161,7 +161,7 @@ describe('<TeamAccessList />', () => {
       },
     });
     await act(async () => {
-      wrapper = mountWithContexts(<TeamAccessList />);
+      wrapper = mountWithContexts(<TeamRolesList />);
     });
 
     waitForElement(wrapper, 'ContentEmpty', el => el.length === 0);
@@ -175,7 +175,7 @@ describe('<TeamAccessList />', () => {
     TeamsAPI.readRoleOptions.mockResolvedValue(options);
 
     await act(async () => {
-      wrapper = mountWithContexts(<TeamAccessList />);
+      wrapper = mountWithContexts(<TeamRolesList />);
     });
 
     waitForElement(wrapper, 'ContentEmpty', el => el.length === 0);
@@ -228,7 +228,7 @@ describe('<TeamAccessList />', () => {
     TeamsAPI.readRoleOptions.mockResolvedValue(options);
 
     await act(async () => {
-      wrapper = mountWithContexts(<TeamAccessList />);
+      wrapper = mountWithContexts(<TeamRolesList />);
     });
 
     waitForElement(wrapper, 'ContentEmpty', el => el.length === 0);
@@ -285,7 +285,7 @@ describe('<TeamAccessList />', () => {
     TeamsAPI.readRoleOptions.mockResolvedValue(options);
 
     await act(async () => {
-      wrapper = mountWithContexts(<TeamAccessList />);
+      wrapper = mountWithContexts(<TeamRolesList />);
     });
 
     waitForElement(
diff --git a/awx/ui_next/src/screens/Team/TeamRoles/index.js b/awx/ui_next/src/screens/Team/TeamRoles/index.js
new file mode 100644
index 0000000000..67d96f34fd
--- /dev/null
+++ b/awx/ui_next/src/screens/Team/TeamRoles/index.js
@@ -0,0 +1 @@
+export { default } from './TeamRolesList';