diff --git a/awx/ui_next/src/api/models/Users.js b/awx/ui_next/src/api/models/Users.js
index 3f5a177390..12eb74c4a6 100644
--- a/awx/ui_next/src/api/models/Users.js
+++ b/awx/ui_next/src/api/models/Users.js
@@ -40,6 +40,10 @@ class Users extends Base {
       params,
     });
   }
+
+  readTeamsOptions(userId) {
+    return this.http.options(`${this.baseUrl}${userId}/teams/`);
+  }
 }
 
 export default Users;
diff --git a/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx b/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx
index f088dede27..47b2b4011c 100644
--- a/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx
+++ b/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx
@@ -58,7 +58,7 @@ class TeamListItem extends React.Component {
               <DataListCell key="organization">
                 {team.summary_fields.organization && (
                   <Fragment>
-                    <b css="margin-right: 24px">{i18n._(t`Organization`)}</b>
+                    <b>{i18n._(t`Organization`)}</b>{' '}
                     <Link
                       to={`/organizations/${team.summary_fields.organization.id}/details`}
                     >
diff --git a/awx/ui_next/src/screens/User/User.jsx b/awx/ui_next/src/screens/User/User.jsx
index 982ae0de5e..5e195da2f3 100644
--- a/awx/ui_next/src/screens/User/User.jsx
+++ b/awx/ui_next/src/screens/User/User.jsx
@@ -108,7 +108,7 @@ function User({ i18n, setBreadcrumb }) {
               <UserOrganizations id={Number(match.params.id)} />
             </Route>
             <Route path="/users/:id/teams">
-              <UserTeams id={Number(match.params.id)} />
+              <UserTeams userId={Number(match.params.id)} />
             </Route>
             {user && (
               <Route path="/users/:id/access">
diff --git a/awx/ui_next/src/screens/User/UserTeams/UserTeamsList.jsx b/awx/ui_next/src/screens/User/UserTeams/UserTeamList.jsx
similarity index 92%
rename from awx/ui_next/src/screens/User/UserTeams/UserTeamsList.jsx
rename to awx/ui_next/src/screens/User/UserTeams/UserTeamList.jsx
index 6bc06dba3e..c9d0c051e8 100644
--- a/awx/ui_next/src/screens/User/UserTeams/UserTeamsList.jsx
+++ b/awx/ui_next/src/screens/User/UserTeams/UserTeamList.jsx
@@ -7,7 +7,7 @@ import PaginatedDataList from '../../../components/PaginatedDataList';
 import useRequest from '../../../util/useRequest';
 import { UsersAPI } from '../../../api';
 import { getQSConfig, parseQueryString } from '../../../util/qs';
-import UserTeamListItem from './UserTeamsListItem';
+import UserTeamListItem from './UserTeamListItem';
 
 const QS_CONFIG = getQSConfig('teams', {
   page: 1,
@@ -15,7 +15,7 @@ const QS_CONFIG = getQSConfig('teams', {
   order_by: 'name',
 });
 
-function UserTeamsList({ i18n }) {
+function UserTeamList({ i18n }) {
   const location = useLocation();
   const { id: userId } = useParams();
 
@@ -67,4 +67,4 @@ function UserTeamsList({ i18n }) {
   );
 }
 
-export default withI18n()(UserTeamsList);
+export default withI18n()(UserTeamList);
diff --git a/awx/ui_next/src/screens/User/UserTeams/UserTeamList.test.jsx b/awx/ui_next/src/screens/User/UserTeams/UserTeamList.test.jsx
new file mode 100644
index 0000000000..caac6b0c5f
--- /dev/null
+++ b/awx/ui_next/src/screens/User/UserTeams/UserTeamList.test.jsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { UsersAPI } from '../../../api';
+import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
+
+import UserTeamList from './UserTeamList';
+
+jest.mock('../../../api');
+
+const mockAPIUserTeamList = {
+  data: {
+    count: 3,
+    results: [
+      {
+        name: 'Team 0',
+        id: 1,
+        url: '/teams/1',
+        summary_fields: {
+          user_capabilities: {
+            delete: true,
+            edit: true,
+          },
+        },
+      },
+      {
+        name: 'Team 1',
+        id: 2,
+        url: '/teams/2',
+        summary_fields: {
+          user_capabilities: {
+            delete: true,
+            edit: true,
+          },
+        },
+      },
+      {
+        name: 'Team 2',
+        id: 3,
+        url: '/teams/3',
+        summary_fields: {
+          user_capabilities: {
+            delete: true,
+            edit: true,
+          },
+        },
+      },
+    ],
+  },
+  isModalOpen: false,
+  warningTitle: 'title',
+  warningMsg: 'message',
+};
+
+describe('<UserTeamList />', () => {
+  beforeEach(() => {
+    UsersAPI.readTeams = jest.fn(() =>
+      Promise.resolve({
+        data: mockAPIUserTeamList.data,
+      })
+    );
+    UsersAPI.readOptions = jest.fn(() =>
+      Promise.resolve({
+        data: {
+          actions: {
+            GET: {},
+            POST: {},
+          },
+        },
+      })
+    );
+  });
+
+  test('should load and render teams', async () => {
+    let wrapper;
+    await act(async () => {
+      wrapper = mountWithContexts(<UserTeamList />);
+    });
+    wrapper.update();
+
+    expect(wrapper.find('UserTeamListItem')).toHaveLength(3);
+  });
+});
diff --git a/awx/ui_next/src/screens/User/UserTeams/UserTeamsListItem.jsx b/awx/ui_next/src/screens/User/UserTeams/UserTeamListItem.jsx
similarity index 87%
rename from awx/ui_next/src/screens/User/UserTeams/UserTeamsListItem.jsx
rename to awx/ui_next/src/screens/User/UserTeams/UserTeamListItem.jsx
index 44995f004c..41f4429879 100644
--- a/awx/ui_next/src/screens/User/UserTeams/UserTeamsListItem.jsx
+++ b/awx/ui_next/src/screens/User/UserTeams/UserTeamListItem.jsx
@@ -9,7 +9,7 @@ import {
 } from '@patternfly/react-core';
 import DataListCell from '../../../components/DataListCell';
 
-function UserTeamsListItem({ team, i18n }) {
+function UserTeamListItem({ team, i18n }) {
   return (
     <DataListItem aria-labelledby={`team-${team.id}`}>
       <DataListItemRow>
@@ -23,7 +23,7 @@ function UserTeamsListItem({ team, i18n }) {
             <DataListCell key="organization">
               {team.summary_fields.organization && (
                 <>
-                  <b css="margin-right: 24px">{i18n._(t`Organization`)}</b>
+                  <b>{i18n._(t`Organization`)}</b>{' '}
                   <Link
                     to={`/organizations/${team.summary_fields.organization.id}/details`}
                   >
@@ -40,4 +40,4 @@ function UserTeamsListItem({ team, i18n }) {
   );
 }
 
-export default withI18n()(UserTeamsListItem);
+export default withI18n()(UserTeamListItem);
diff --git a/awx/ui_next/src/screens/User/UserTeams/UserTeamListItem.test.jsx b/awx/ui_next/src/screens/User/UserTeams/UserTeamListItem.test.jsx
new file mode 100644
index 0000000000..5816622eb2
--- /dev/null
+++ b/awx/ui_next/src/screens/User/UserTeams/UserTeamListItem.test.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { I18nProvider } from '@lingui/react';
+import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
+import UserTeamListItem from './UserTeamListItem';
+
+describe('<UserTeamListItem />', () => {
+  test('should render item', () => {
+    const wrapper = mountWithContexts(
+      <I18nProvider>
+        <MemoryRouter initialEntries={['/teams']} initialIndex={0}>
+          <UserTeamListItem
+            team={{
+              id: 1,
+              name: 'Team 1',
+              description: 'something something team',
+              summary_fields: {
+                organization: {
+                  id: 2,
+                  name: 'The Org',
+                },
+              },
+            }}
+            detailUrl="/team/1"
+            isSelected
+            onSelect={() => {}}
+          />
+        </MemoryRouter>
+      </I18nProvider>
+    );
+
+    const cells = wrapper.find('DataListCell');
+    expect(cells).toHaveLength(3);
+    expect(cells.at(0).text()).toEqual('Team 1');
+    expect(cells.at(1).text()).toEqual('Organization The Org');
+    expect(cells.at(2).text()).toEqual('something something team');
+  });
+});
diff --git a/awx/ui_next/src/screens/User/UserTeams/UserTeams.jsx b/awx/ui_next/src/screens/User/UserTeams/UserTeams.jsx
index 1cfc018236..65ddf670e5 100644
--- a/awx/ui_next/src/screens/User/UserTeams/UserTeams.jsx
+++ b/awx/ui_next/src/screens/User/UserTeams/UserTeams.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import UserTeamsList from './UserTeamsList';
+import UserTeamList from './UserTeamList';
 
 export default function UserTeams() {
-  return <UserTeamsList />;
+  return <UserTeamList />;
 }