diff --git a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx b/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
index 3b03ac838e..0d5563a6f2 100644
--- a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
+++ b/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
@@ -34,13 +34,6 @@ const AdditionalControlsDataToolbarGroup = styled(DataToolbarGroup)`
   margin-right: 0 !important;
 `;
 
-const DataToolbarSeparator = styled(DataToolbarItem)`
-  width: 1px !important;
-  height: 30px !important;
-  margin-left: 3px !important;
-  margin-right: 10px !important;
-`;
-
 class DataListToolbar extends React.Component {
   render() {
     const {
@@ -80,7 +73,6 @@ class DataListToolbar extends React.Component {
                   id="select-all"
                 />
               </DataToolbarItem>
-              <DataToolbarSeparator variant="separator" />
             </DataToolbarGroup>
           )}
           <DataToolbarToggleGroup toggleIcon={<SearchIcon />} breakpoint="lg">
diff --git a/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.jsx b/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.jsx
index 782b11da36..cf05f48e89 100644
--- a/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.jsx
+++ b/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.jsx
@@ -8,7 +8,6 @@ import { CredentialsAPI, CredentialTypesAPI } from '@api';
 import AnsibleSelect from '@components/AnsibleSelect';
 import { FieldTooltip } from '@components/FormField';
 import CredentialChip from '@components/CredentialChip';
-import VerticalSeperator from '@components/VerticalSeparator';
 import { getQSConfig, parseQueryString } from '@util/qs';
 import Lookup from './Lookup';
 import OptionsList from './shared/OptionsList';
@@ -97,8 +96,9 @@ function MultiCredentialsLookup(props) {
             <Fragment>
               {credentialTypes && credentialTypes.length > 0 && (
                 <ToolbarItem css=" display: flex; align-items: center;">
-                  <div css="flex: 0 0 25%;">{i18n._(t`Selected Category`)}</div>
-                  <VerticalSeperator />
+                  <div css="flex: 0 0 25%; margin-right: 32px">
+                    {i18n._(t`Selected Category`)}
+                  </div>
                   <AnsibleSelect
                     css="flex: 1 1 75%;"
                     id="multiCredentialsLookUp-select"
diff --git a/awx/ui_next/src/components/SelectedList/SelectedList.jsx b/awx/ui_next/src/components/SelectedList/SelectedList.jsx
index c452c68657..60045a04b0 100644
--- a/awx/ui_next/src/components/SelectedList/SelectedList.jsx
+++ b/awx/ui_next/src/components/SelectedList/SelectedList.jsx
@@ -7,7 +7,6 @@ import {
   SplitItem,
 } from '@patternfly/react-core';
 import styled from 'styled-components';
-import VerticalSeparator from '../VerticalSeparator';
 
 const Split = styled(PFSplit)`
   margin: 20px 0px;
@@ -40,8 +39,7 @@ class SelectedList extends Component {
 
     return (
       <Split>
-        <SplitLabelItem>{label}</SplitLabelItem>
-        <VerticalSeparator />
+        <SplitLabelItem css="margin-right: 32px">{label}</SplitLabelItem>
         <SplitItem>
           <ChipGroup numChips={5}>
             {selected.map(item =>
diff --git a/awx/ui_next/src/components/VerticalSeparator/VerticalSeparator.jsx b/awx/ui_next/src/components/VerticalSeparator/VerticalSeparator.jsx
deleted file mode 100644
index ebe53e5ada..0000000000
--- a/awx/ui_next/src/components/VerticalSeparator/VerticalSeparator.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-const Separator = styled.span`
-  display: inline-block;
-  width: 1px;
-  height: 30px;
-  margin-right: 20px;
-  margin-left: 20px;
-  background-color: #d7d7d7;
-  vertical-align: middle;
-`;
-
-const VerticalSeparator = () => (
-  <div>
-    <Separator />
-  </div>
-);
-
-export default VerticalSeparator;
diff --git a/awx/ui_next/src/components/VerticalSeparator/VerticalSeparator.test.jsx b/awx/ui_next/src/components/VerticalSeparator/VerticalSeparator.test.jsx
deleted file mode 100644
index 3de7ae1e3e..0000000000
--- a/awx/ui_next/src/components/VerticalSeparator/VerticalSeparator.test.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-
-import VerticalSeparator from './VerticalSeparator';
-
-describe('VerticalSeparator', () => {
-  test('renders the expected content', () => {
-    const wrapper = mount(<VerticalSeparator />);
-    expect(wrapper).toHaveLength(1);
-  });
-});
diff --git a/awx/ui_next/src/components/VerticalSeparator/index.js b/awx/ui_next/src/components/VerticalSeparator/index.js
deleted file mode 100644
index 73c51cd580..0000000000
--- a/awx/ui_next/src/components/VerticalSeparator/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './VerticalSeparator';
diff --git a/awx/ui_next/src/screens/Credential/CredentialList/CredentialList.test.jsx b/awx/ui_next/src/screens/Credential/CredentialList/CredentialList.test.jsx
index 8ec83f2f49..5bab169d03 100644
--- a/awx/ui_next/src/screens/Credential/CredentialList/CredentialList.test.jsx
+++ b/awx/ui_next/src/screens/Credential/CredentialList/CredentialList.test.jsx
@@ -54,44 +54,44 @@ describe('<CredentialList />', () => {
 
   test('should check and uncheck the row item', async () => {
     expect(
-      wrapper.find('PFDataListCheck[id="select-credential-1"]').props().checked
+      wrapper.find('DataListCheck[id="select-credential-1"]').props().checked
     ).toBe(false);
     await act(async () => {
       wrapper
-        .find('PFDataListCheck[id="select-credential-1"]')
+        .find('DataListCheck[id="select-credential-1"]')
         .invoke('onChange')(true);
     });
     wrapper.update();
     expect(
-      wrapper.find('PFDataListCheck[id="select-credential-1"]').props().checked
+      wrapper.find('DataListCheck[id="select-credential-1"]').props().checked
     ).toBe(true);
     await act(async () => {
       wrapper
-        .find('PFDataListCheck[id="select-credential-1"]')
+        .find('DataListCheck[id="select-credential-1"]')
         .invoke('onChange')(false);
     });
     wrapper.update();
     expect(
-      wrapper.find('PFDataListCheck[id="select-credential-1"]').props().checked
+      wrapper.find('DataListCheck[id="select-credential-1"]').props().checked
     ).toBe(false);
   });
 
   test('should check all row items when select all is checked', async () => {
-    wrapper.find('PFDataListCheck').forEach(el => {
+    wrapper.find('DataListCheck').forEach(el => {
       expect(el.props().checked).toBe(false);
     });
     await act(async () => {
       wrapper.find('Checkbox#select-all').invoke('onChange')(true);
     });
     wrapper.update();
-    wrapper.find('PFDataListCheck').forEach(el => {
+    wrapper.find('DataListCheck').forEach(el => {
       expect(el.props().checked).toBe(true);
     });
     await act(async () => {
       wrapper.find('Checkbox#select-all').invoke('onChange')(false);
     });
     wrapper.update();
-    wrapper.find('PFDataListCheck').forEach(el => {
+    wrapper.find('DataListCheck').forEach(el => {
       expect(el.props().checked).toBe(false);
     });
   });
@@ -102,7 +102,7 @@ describe('<CredentialList />', () => {
 
     await act(async () => {
       wrapper
-        .find('PFDataListCheck[id="select-credential-3"]')
+        .find('DataListCheck[id="select-credential-3"]')
         .invoke('onChange')();
     });
     wrapper.update();
@@ -119,7 +119,7 @@ describe('<CredentialList />', () => {
     );
     await act(async () => {
       wrapper
-        .find('PFDataListCheck[id="select-credential-2"]')
+        .find('DataListCheck[id="select-credential-2"]')
         .invoke('onChange')();
     });
     wrapper.update();
diff --git a/awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx b/awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx
index 937dde8607..f5f6cff512 100644
--- a/awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx
+++ b/awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx
@@ -5,6 +5,7 @@ import { t } from '@lingui/macro';
 import { Link } from 'react-router-dom';
 import {
   Button,
+  DataListCheck,
   DataListItem,
   DataListItemRow,
   DataListItemCells as _DataListItemCells,
@@ -13,8 +14,6 @@ import {
 import { PencilAltIcon } from '@patternfly/react-icons';
 
 import DataListCell from '@components/DataListCell';
-import DataListCheck from '@components/DataListCheck';
-import VerticalSeparator from '@components/VerticalSeparator';
 import styled from 'styled-components';
 import { Credential } from '@types';
 
@@ -50,7 +49,6 @@ function CredentialListItem({
         <DataListItemCells
           dataListCells={[
             <DataListCell key="name">
-              <VerticalSeparator />
               <Link to={`${detailUrl}`}>
                 <b>{credential.name}</b>
               </Link>
diff --git a/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx b/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx
index cb81224fd3..72baf5e8f9 100644
--- a/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx
+++ b/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx
@@ -4,6 +4,7 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
   Button,
+  DataListCheck,
   DataListItem,
   DataListItemRow,
   DataListItemCells,
@@ -14,9 +15,7 @@ import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
 import DataListCell from '@components/DataListCell';
-import DataListCheck from '@components/DataListCheck';
 import { Sparkline } from '@components/Sparkline';
-import VerticalSeparator from '@components/VerticalSeparator';
 import { Host } from '@types';
 
 class HostListItem extends React.Component {
@@ -56,7 +55,6 @@ class HostListItem extends React.Component {
           <DataListItemCells
             dataListCells={[
               <DataListCell key="name">
-                <VerticalSeparator />
                 <Link to={`${detailUrl}`}>
                   <b>{host.name}</b>
                 </Link>
diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupItem.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupItem.jsx
index 94c4edb7f4..55ef6ccdce 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupItem.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupItem.jsx
@@ -6,6 +6,7 @@ import { Group } from '@types';
 
 import {
   Button,
+  DataListCheck,
   DataListItem,
   DataListItemRow,
   DataListItemCells,
@@ -15,8 +16,6 @@ import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
 import DataListCell from '@components/DataListCell';
-import DataListCheck from '@components/DataListCheck';
-import VerticalSeparator from '@components/VerticalSeparator';
 
 function InventoryGroupItem({
   i18n,
@@ -41,7 +40,6 @@ function InventoryGroupItem({
         <DataListItemCells
           dataListCells={[
             <DataListCell key="divider">
-              <VerticalSeparator />
               <Link to={`${detailUrl}`} id={labelId}>
                 <b>{group.name}</b>
               </Link>
diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.test.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.test.jsx
index 3c9df3ec3b..d3f9f042c1 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.test.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.test.jsx
@@ -98,46 +98,46 @@ describe('<InventoryGroupsList />', () => {
 
   test('should check and uncheck the row item', async () => {
     expect(
-      wrapper.find('PFDataListCheck[id="select-group-1"]').props().checked
+      wrapper.find('DataListCheck[id="select-group-1"]').props().checked
     ).toBe(false);
 
     await act(async () => {
-      wrapper.find('PFDataListCheck[id="select-group-1"]').invoke('onChange')(
+      wrapper.find('DataListCheck[id="select-group-1"]').invoke('onChange')(
         true
       );
     });
     wrapper.update();
     expect(
-      wrapper.find('PFDataListCheck[id="select-group-1"]').props().checked
+      wrapper.find('DataListCheck[id="select-group-1"]').props().checked
     ).toBe(true);
 
     await act(async () => {
-      wrapper.find('PFDataListCheck[id="select-group-1"]').invoke('onChange')(
+      wrapper.find('DataListCheck[id="select-group-1"]').invoke('onChange')(
         false
       );
     });
     wrapper.update();
     expect(
-      wrapper.find('PFDataListCheck[id="select-group-1"]').props().checked
+      wrapper.find('DataListCheck[id="select-group-1"]').props().checked
     ).toBe(false);
   });
 
   test('should check all row items when select all is checked', async () => {
-    wrapper.find('PFDataListCheck').forEach(el => {
+    wrapper.find('DataListCheck').forEach(el => {
       expect(el.props().checked).toBe(false);
     });
     await act(async () => {
       wrapper.find('Checkbox#select-all').invoke('onChange')(true);
     });
     wrapper.update();
-    wrapper.find('PFDataListCheck').forEach(el => {
+    wrapper.find('DataListCheck').forEach(el => {
       expect(el.props().checked).toBe(true);
     });
     await act(async () => {
       wrapper.find('Checkbox#select-all').invoke('onChange')(false);
     });
     wrapper.update();
-    wrapper.find('PFDataListCheck').forEach(el => {
+    wrapper.find('DataListCheck').forEach(el => {
       expect(el.props().checked).toBe(false);
     });
   });
@@ -157,7 +157,7 @@ describe('<InventoryGroupsList />', () => {
       Promise.reject(new Error())
     );
     await act(async () => {
-      wrapper.find('PFDataListCheck[id="select-group-1"]').invoke('onChange')();
+      wrapper.find('DataListCheck[id="select-group-1"]').invoke('onChange')();
     });
     wrapper.update();
     await act(async () => {
@@ -191,7 +191,7 @@ describe('<InventoryGroupsList />', () => {
       })
     );
     await act(async () => {
-      wrapper.find('PFDataListCheck[id="select-group-1"]').invoke('onChange')();
+      wrapper.find('DataListCheck[id="select-group-1"]').invoke('onChange')();
     });
     wrapper.update();
     await act(async () => {
diff --git a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx
index 305fdfca92..89a19fec6f 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx
@@ -4,6 +4,7 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
   Button,
+  DataListCheck,
   DataListItem,
   DataListItemRow,
   DataListItemCells,
@@ -14,9 +15,7 @@ import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
 import DataListCell from '@components/DataListCell';
-import DataListCheck from '@components/DataListCheck';
 import { Sparkline } from '@components/Sparkline';
-import VerticalSeparator from '@components/VerticalSeparator';
 import { Host } from '@types';
 
 function InventoryHostItem(props) {
@@ -50,7 +49,6 @@ function InventoryHostItem(props) {
         <DataListItemCells
           dataListCells={[
             <DataListCell key="divider">
-              <VerticalSeparator />
               <Link to={`${detailUrl}`}>
                 <b>{host.name}</b>
               </Link>
diff --git a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.test.jsx b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.test.jsx
index 0a60a71ada..6e8c5ffdb6 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.test.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.test.jsx
@@ -104,48 +104,48 @@ describe('<InventoryHostList />', () => {
 
   test('should check and uncheck the row item', async () => {
     expect(
-      wrapper.find('PFDataListCheck[id="select-host-1"]').props().checked
+      wrapper.find('DataListCheck[id="select-host-1"]').props().checked
     ).toBe(false);
 
     await act(async () => {
-      wrapper.find('PFDataListCheck[id="select-host-1"]').invoke('onChange')(
+      wrapper.find('DataListCheck[id="select-host-1"]').invoke('onChange')(
         true
       );
     });
 
     wrapper.update();
     expect(
-      wrapper.find('PFDataListCheck[id="select-host-1"]').props().checked
+      wrapper.find('DataListCheck[id="select-host-1"]').props().checked
     ).toBe(true);
 
     await act(async () => {
-      wrapper.find('PFDataListCheck[id="select-host-1"]').invoke('onChange')(
+      wrapper.find('DataListCheck[id="select-host-1"]').invoke('onChange')(
         false
       );
     });
 
     wrapper.update();
     expect(
-      wrapper.find('PFDataListCheck[id="select-host-1"]').props().checked
+      wrapper.find('DataListCheck[id="select-host-1"]').props().checked
     ).toBe(false);
   });
 
   test('should check all row items when select all is checked', async () => {
-    wrapper.find('PFDataListCheck').forEach(el => {
+    wrapper.find('DataListCheck').forEach(el => {
       expect(el.props().checked).toBe(false);
     });
     await act(async () => {
       wrapper.find('Checkbox#select-all').invoke('onChange')(true);
     });
     wrapper.update();
-    wrapper.find('PFDataListCheck').forEach(el => {
+    wrapper.find('DataListCheck').forEach(el => {
       expect(el.props().checked).toBe(true);
     });
     await act(async () => {
       wrapper.find('Checkbox#select-all').invoke('onChange')(false);
     });
     wrapper.update();
-    wrapper.find('PFDataListCheck').forEach(el => {
+    wrapper.find('DataListCheck').forEach(el => {
       expect(el.props().checked).toBe(false);
     });
   });
@@ -186,7 +186,7 @@ describe('<InventoryHostList />', () => {
 
   test('delete button is disabled if user does not have delete capabilities on a selected host', async () => {
     await act(async () => {
-      wrapper.find('PFDataListCheck[id="select-host-3"]').invoke('onChange')();
+      wrapper.find('DataListCheck[id="select-host-3"]').invoke('onChange')();
     });
     wrapper.update();
     expect(wrapper.find('ToolbarDeleteButton button').props().disabled).toBe(
@@ -197,7 +197,7 @@ describe('<InventoryHostList />', () => {
   test('should call api delete hosts for each selected host', async () => {
     HostsAPI.destroy = jest.fn();
     await act(async () => {
-      wrapper.find('PFDataListCheck[id="select-host-1"]').invoke('onChange')();
+      wrapper.find('DataListCheck[id="select-host-1"]').invoke('onChange')();
     });
     wrapper.update();
     await act(async () => {
@@ -220,7 +220,7 @@ describe('<InventoryHostList />', () => {
       })
     );
     await act(async () => {
-      wrapper.find('PFDataListCheck[id="select-host-1"]').invoke('onChange')();
+      wrapper.find('DataListCheck[id="select-host-1"]').invoke('onChange')();
     });
     wrapper.update();
     await act(async () => {
@@ -242,7 +242,7 @@ describe('<InventoryHostList />', () => {
       Promise.reject(new Error())
     );
     await act(async () => {
-      wrapper.find('PFDataListCheck[id="select-host-1"]').invoke('onChange')();
+      wrapper.find('DataListCheck[id="select-host-1"]').invoke('onChange')();
     });
     wrapper.update();
     await act(async () => {
diff --git a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx
index 168ac9e61b..60092cc06c 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx
@@ -3,6 +3,7 @@ import { string, bool, func } from 'prop-types';
 import { withI18n } from '@lingui/react';
 import {
   Button,
+  DataListCheck,
   DataListItem,
   DataListItemRow,
   DataListItemCells,
@@ -13,8 +14,6 @@ import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
 import DataListCell from '@components/DataListCell';
-import DataListCheck from '@components/DataListCheck';
-import VerticalSeparator from '@components/VerticalSeparator';
 import { Inventory } from '@types';
 
 class InventoryListItem extends React.Component {
@@ -44,7 +43,6 @@ class InventoryListItem extends React.Component {
           <DataListItemCells
             dataListCells={[
               <DataListCell key="divider">
-                <VerticalSeparator />
                 <Link to={`${detailUrl}`}>
                   <b>{inventory.name}</b>
                 </Link>
diff --git a/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx b/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx
index 5cbdec219b..fe93aa04e1 100644
--- a/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx
+++ b/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx
@@ -38,7 +38,10 @@ class JobListItem extends Component {
           />
           <DataListItemCells
             dataListCells={[
-              <DataListCell key="divider">
+              <DataListCell
+                key="name"
+                css="display: inline-flex; align-items: center;"
+              >
                 {job.status && <PaddedIcon status={job.status} />}
                 <span>
                   <Link
diff --git a/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputToolbar.jsx b/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputToolbar.jsx
index 26907ab3e4..d5b810b64d 100644
--- a/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputToolbar.jsx
+++ b/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputToolbar.jsx
@@ -9,11 +9,10 @@ import { shape } from 'prop-types';
 import { Badge as PFBadge, Button, Tooltip } from '@patternfly/react-core';
 import { CompassIcon, WrenchIcon } from '@patternfly/react-icons';
 import { StatusIcon } from '@components/Sparkline';
-import VerticalSeparator from '@components/VerticalSeparator';
 import styled from 'styled-components';
 
 const Toolbar = styled.div`
-  align-items: center
+  align-items: center;
   border-bottom: 1px solid grey;
   display: flex;
   height: 56px;
@@ -73,7 +72,6 @@ function WorkflowOutputToolbar({ i18n, job }) {
       <ToolbarActions>
         <div>{i18n._(t`Total Nodes`)}</div>
         <Badge isRead>{totalNodes}</Badge>
-        <VerticalSeparator />
         <Tooltip content={i18n._(t`Toggle Legend`)} position="bottom">
           <ActionButton
             id="workflow-output-toggle-legend"
diff --git a/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx b/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx
index 261dee5700..fe99e91716 100644
--- a/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx
+++ b/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx
@@ -5,6 +5,7 @@ import { t } from '@lingui/macro';
 import {
   Badge as PFBadge,
   Button,
+  DataListCheck,
   DataListItem,
   DataListItemRow,
   DataListItemCells,
@@ -15,8 +16,6 @@ import styled from 'styled-components';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
 import DataListCell from '@components/DataListCell';
-import DataListCheck from '@components/DataListCheck';
-import VerticalSeparator from '@components/VerticalSeparator';
 import { Organization } from '@types';
 
 const Badge = styled(PFBadge)`
@@ -63,7 +62,6 @@ function OrganizationListItem({
         <DataListItemCells
           dataListCells={[
             <DataListCell key="divider">
-              <VerticalSeparator />
               <span id={labelId}>
                 <Link to={`${detailUrl}`}>
                   <b>{organization.name}</b>
diff --git a/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx b/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx
index 10626c5c70..993293785f 100644
--- a/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx
+++ b/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx
@@ -3,6 +3,7 @@ import { string, bool, func } from 'prop-types';
 import { withI18n } from '@lingui/react';
 import {
   Button,
+  DataListCheck,
   DataListItem,
   DataListItemRow,
   DataListItemCells,
@@ -14,10 +15,8 @@ import { PencilAltIcon, SyncIcon } from '@patternfly/react-icons';
 
 import ClipboardCopyButton from '@components/ClipboardCopyButton';
 import DataListCell from '@components/DataListCell';
-import DataListCheck from '@components/DataListCheck';
 import ProjectSyncButton from '../shared/ProjectSyncButton';
 import { StatusIcon } from '@components/Sparkline';
-import VerticalSeparator from '@components/VerticalSeparator';
 import { toTitleCase } from '@util/strings';
 import { Project } from '@types';
 
@@ -74,7 +73,6 @@ class ProjectListItem extends React.Component {
           <DataListItemCells
             dataListCells={[
               <DataListCell key="divider">
-                <VerticalSeparator />
                 {project.summary_fields.last_job && (
                   <Tooltip
                     position="top"
diff --git a/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx b/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx
index 6668547824..ff5da73316 100644
--- a/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx
+++ b/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx
@@ -4,6 +4,7 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
   Button,
+  DataListCheck,
   DataListItem,
   DataListItemRow,
   DataListItemCells,
@@ -13,8 +14,6 @@ import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
 import DataListCell from '@components/DataListCell';
-import DataListCheck from '@components/DataListCheck';
-import VerticalSeparator from '@components/VerticalSeparator';
 import { Team } from '@types';
 
 class TeamListItem extends React.Component {
@@ -40,7 +39,6 @@ class TeamListItem extends React.Component {
           <DataListItemCells
             dataListCells={[
               <DataListCell key="divider">
-                <VerticalSeparator />
                 <Link id={labelId} to={`${detailUrl}`}>
                   <b>{team.name}</b>
                 </Link>
diff --git a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx b/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
index b3742dc574..b9c2debc50 100644
--- a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
+++ b/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import {
   Button,
+  DataListCheck,
   DataListItem,
   DataListItemRow,
   DataListItemCells,
@@ -16,9 +17,7 @@ import {
 } from '@patternfly/react-icons';
 
 import DataListCell from '@components/DataListCell';
-import DataListCheck from '@components/DataListCheck';
 import LaunchButton from '@components/LaunchButton';
-import VerticalSeparator from '@components/VerticalSeparator';
 import { Sparkline } from '@components/Sparkline';
 import { toTitleCase } from '@util/strings';
 
@@ -46,7 +45,6 @@ function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
         <DataListItemCells
           dataListCells={[
             <DataListCell key="divider">
-              <VerticalSeparator />
               <span>
                 <Link to={`${detailUrl}`}>
                   <b>{template.name}</b>
diff --git a/awx/ui_next/src/screens/User/UserList/UserListItem.jsx b/awx/ui_next/src/screens/User/UserList/UserListItem.jsx
index cf9ee9a382..723b38bbe0 100644
--- a/awx/ui_next/src/screens/User/UserList/UserListItem.jsx
+++ b/awx/ui_next/src/screens/User/UserList/UserListItem.jsx
@@ -4,6 +4,7 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
   Button,
+  DataListCheck,
   DataListItem,
   DataListItemRow,
   DataListItemCells,
@@ -13,8 +14,6 @@ import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
 import DataListCell from '@components/DataListCell';
-import DataListCheck from '@components/DataListCheck';
-import VerticalSeparator from '@components/VerticalSeparator';
 import { User } from '@types';
 
 class UserListItem extends React.Component {
@@ -40,7 +39,6 @@ class UserListItem extends React.Component {
           <DataListItemCells
             dataListCells={[
               <DataListCell key="divider">
-                <VerticalSeparator />
                 <Link to={`${detailUrl}`} id={labelId}>
                   <b>{user.username}</b>
                 </Link>