diff --git a/awx/ui_next/src/components/AddRole/SelectResourceStep.jsx b/awx/ui_next/src/components/AddRole/SelectResourceStep.jsx
index 1128015bdd..02de0f8ee8 100644
--- a/awx/ui_next/src/components/AddRole/SelectResourceStep.jsx
+++ b/awx/ui_next/src/components/AddRole/SelectResourceStep.jsx
@@ -93,7 +93,6 @@ class SelectResourceStep extends React.Component {
                 label={selectedLabel}
                 onRemove={onRowClick}
                 selected={selectedResourceRows}
-                showOverflowAfter={5}
               />
             )}
             <PaginatedDataList
diff --git a/awx/ui_next/src/components/AddRole/SelectRoleStep.jsx b/awx/ui_next/src/components/AddRole/SelectRoleStep.jsx
index f867d0b54f..826c2d52aa 100644
--- a/awx/ui_next/src/components/AddRole/SelectRoleStep.jsx
+++ b/awx/ui_next/src/components/AddRole/SelectRoleStep.jsx
@@ -33,7 +33,6 @@ class RolesStep extends React.Component {
               isReadOnly
               label={selectedListLabel || i18n._(t`Selected`)}
               selected={selectedResourceRows}
-              showOverflowAfter={5}
             />
           )}
         </div>
diff --git a/awx/ui_next/src/components/Chip/Chip.jsx b/awx/ui_next/src/components/Chip/Chip.jsx
index 8c86115919..2f0a6c1049 100644
--- a/awx/ui_next/src/components/Chip/Chip.jsx
+++ b/awx/ui_next/src/components/Chip/Chip.jsx
@@ -4,17 +4,14 @@ import styled from 'styled-components';
 Chip.displayName = 'PFChip';
 export default styled(Chip)`
   --pf-c-chip--m-read-only--PaddingTop: 3px;
-  --pf-c-chip--m-read-only--PaddingRight: 8px;
   --pf-c-chip--m-read-only--PaddingBottom: 3px;
   --pf-c-chip--m-read-only--PaddingLeft: 8px;
+  --pf-c-chip--m-read-only--PaddingRight: 8px;
 
-  & > .pf-c-button {
-    padding: 3px 8px;
+  .pf-c-button {
+    --pf-c-button--PaddingTop: 3px;
+    --pf-c-button--PaddingBottom: 3px;
+    --pf-c-button--PaddingLeft: 8px;
+    --pf-c-button--PaddingRight: 8px;
   }
-
-  ${props =>
-    props.isOverflowChip &&
-    `
-    padding: 0;
-  `}
 `;
diff --git a/awx/ui_next/src/components/Chip/Chip.test.jsx b/awx/ui_next/src/components/Chip/Chip.test.jsx
index 8e38d71453..b0b9819794 100644
--- a/awx/ui_next/src/components/Chip/Chip.test.jsx
+++ b/awx/ui_next/src/components/Chip/Chip.test.jsx
@@ -5,6 +5,6 @@ import Chip from './Chip';
 describe('Chip', () => {
   test('renders the expected content', () => {
     const wrapper = mount(<Chip />);
-    expect(wrapper).toHaveLength(1);
+    expect(wrapper).toMatchSnapshot();
   });
 });
diff --git a/awx/ui_next/src/components/Chip/ChipGroup.jsx b/awx/ui_next/src/components/Chip/ChipGroup.jsx
index 58ba8ac7e5..4098faf1f2 100644
--- a/awx/ui_next/src/components/Chip/ChipGroup.jsx
+++ b/awx/ui_next/src/components/Chip/ChipGroup.jsx
@@ -1,46 +1,14 @@
-import React, { useState } from 'react';
-import { number } from 'prop-types';
+import { ChipGroup } from '@patternfly/react-core';
 import styled from 'styled-components';
-import Chip from './Chip';
-
-const ChipGroup = ({ children, className, showOverflowAfter, ...props }) => {
-  const [isExpanded, setIsExpanded] = useState(!showOverflowAfter);
-  const toggleIsOpen = () => setIsExpanded(!isExpanded);
-
-  const mappedChildren = React.Children.map(children, c =>
-    React.cloneElement(c, { component: 'li' })
-  );
-  const showOverflowToggle =
-    showOverflowAfter && children.length > showOverflowAfter;
-  const numToShow = isExpanded
-    ? children.length
-    : Math.min(showOverflowAfter, children.length);
-  const expandedText = 'Show Less';
-  const collapsedText = `${children.length - showOverflowAfter} more`;
-
-  return (
-    <ul className={`pf-c-chip-group ${className}`} {...props}>
-      {!showOverflowAfter ? mappedChildren : mappedChildren.slice(0, numToShow)}
-      {showOverflowAfter && showOverflowToggle && (
-        <Chip isOverflowChip onClick={toggleIsOpen} component="li">
-          {isExpanded ? expandedText : collapsedText}
-        </Chip>
-      )}
-    </ul>
-  );
-};
-ChipGroup.propTypes = {
-  showOverflowAfter: number,
-};
-ChipGroup.defaultProps = {
-  showOverflowAfter: null,
-};
 
 export default styled(ChipGroup)`
   --pf-c-chip-group--c-chip--MarginRight: 10px;
   --pf-c-chip-group--c-chip--MarginBottom: 10px;
 
-  > .pf-c-chip.pf-m-overflow button {
-    padding: 3px 8px;
+  > .pf-c-chip.pf-m-overflow .pf-c-button {
+    --pf-c-button--PaddingTop: 3px;
+    --pf-c-button--PaddingBottom: 3px;
+    --pf-c-chip--m-overflow--c-button--PaddingLeft: 8px;
+    --pf-c-chip--m-overflow--c-button--PaddingRight: 8px;
   }
 `;
diff --git a/awx/ui_next/src/components/Chip/ChipGroup.test.jsx b/awx/ui_next/src/components/Chip/ChipGroup.test.jsx
index f0b4a701fa..90e0dcb48f 100644
--- a/awx/ui_next/src/components/Chip/ChipGroup.test.jsx
+++ b/awx/ui_next/src/components/Chip/ChipGroup.test.jsx
@@ -1,74 +1,10 @@
 import React from 'react';
-import { act } from 'react-dom/test-utils';
-import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
-import { ChipGroup, Chip } from '.';
+import { mount } from 'enzyme';
+import { ChipGroup } from '.';
 
 describe('<ChipGroup />', () => {
-  test('should render all chips', () => {
-    const wrapper = mountWithContexts(
-      <ChipGroup>
-        <Chip>One</Chip>
-        <Chip>Two</Chip>
-        <Chip>Three</Chip>
-        <Chip>Four</Chip>
-        <Chip>Five</Chip>
-        <Chip>Six</Chip>
-      </ChipGroup>
-    );
-    expect(wrapper.find(Chip)).toHaveLength(6);
-    expect(wrapper.find('li')).toHaveLength(6);
-  });
-
-  test('should render show more toggle', () => {
-    const wrapper = mountWithContexts(
-      <ChipGroup showOverflowAfter={5}>
-        <Chip>One</Chip>
-        <Chip>Two</Chip>
-        <Chip>Three</Chip>
-        <Chip>Four</Chip>
-        <Chip>Five</Chip>
-        <Chip>Six</Chip>
-        <Chip>Seven</Chip>
-      </ChipGroup>
-    );
-    expect(wrapper.find(Chip)).toHaveLength(6);
-    const toggle = wrapper.find(Chip).at(5);
-    expect(toggle.prop('isOverflowChip')).toBe(true);
-    expect(toggle.text()).toEqual('2 more');
-  });
-
-  test('should render show less toggle', () => {
-    const wrapper = mountWithContexts(
-      <ChipGroup showOverflowAfter={5}>
-        <Chip>One</Chip>
-        <Chip>Two</Chip>
-        <Chip>Three</Chip>
-        <Chip>Four</Chip>
-        <Chip>Five</Chip>
-        <Chip>Six</Chip>
-        <Chip>Seven</Chip>
-      </ChipGroup>
-    );
-    expect(wrapper.find(Chip)).toHaveLength(6);
-    const toggle = wrapper.find(Chip).at(5);
-    expect(toggle.prop('isOverflowChip')).toBe(true);
-    act(() => {
-      toggle.prop('onClick')();
-    });
-    wrapper.update();
-    expect(wrapper.find(Chip)).toHaveLength(8);
-    expect(
-      wrapper
-        .find(Chip)
-        .at(7)
-        .text()
-    ).toEqual('Show Less');
-    act(() => {
-      const toggle2 = wrapper.find(Chip).at(7);
-      expect(toggle2.prop('isOverflowChip')).toBe(true);
-      toggle2.prop('onClick')();
-    });
-    wrapper.update();
-    expect(wrapper.find(Chip)).toHaveLength(6);
+  test('renders the expected content', () => {
+    const wrapper = mount(<ChipGroup />);
+    expect(wrapper).toMatchSnapshot();
   });
 });
diff --git a/awx/ui_next/src/components/Chip/CredentialChip.jsx b/awx/ui_next/src/components/Chip/CredentialChip.jsx
index 1e806a0c01..37e344bee4 100644
--- a/awx/ui_next/src/components/Chip/CredentialChip.jsx
+++ b/awx/ui_next/src/components/Chip/CredentialChip.jsx
@@ -4,7 +4,7 @@ import { toTitleCase } from '@util/strings';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import Chip from './Chip';
-import { Credential } from '../../types';
+import { Credential } from '@types';
 
 function CredentialChip({ credential, i18n, ...props }) {
   let type;
diff --git a/awx/ui_next/src/components/Chip/__snapshots__/Chip.test.jsx.snap b/awx/ui_next/src/components/Chip/__snapshots__/Chip.test.jsx.snap
new file mode 100644
index 0000000000..0fc48e9943
--- /dev/null
+++ b/awx/ui_next/src/components/Chip/__snapshots__/Chip.test.jsx.snap
@@ -0,0 +1,171 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Chip renders the expected content 1`] = `
+<Chip>
+  <StyledComponent
+    forwardedComponent={
+      Object {
+        "$$typeof": Symbol(react.forward_ref),
+        "attrs": Array [],
+        "componentStyle": ComponentStyle {
+          "componentId": "Chip-sc-1rzr8oo-0",
+          "isStatic": true,
+          "lastClassName": "iczEeI",
+          "rules": Array [
+            "--pf-c-chip--m-read-only--PaddingTop:3px;--pf-c-chip--m-read-only--PaddingBottom:3px;--pf-c-chip--m-read-only--PaddingLeft:8px;--pf-c-chip--m-read-only--PaddingRight:8px;.pf-c-button{--pf-c-button--PaddingTop:3px;--pf-c-button--PaddingBottom:3px;--pf-c-button--PaddingLeft:8px;--pf-c-button--PaddingRight:8px;}",
+          ],
+        },
+        "displayName": "Chip",
+        "foldedComponentIds": Array [],
+        "render": [Function],
+        "styledComponentId": "Chip-sc-1rzr8oo-0",
+        "target": [Function],
+        "toString": [Function],
+        "warnTooManyClasses": [Function],
+        "withComponent": [Function],
+      }
+    }
+    forwardedRef={null}
+  >
+    <PFChip
+      className="Chip-sc-1rzr8oo-0 iczEeI"
+    >
+      <ComponentWithOuia
+        component={[Function]}
+        componentProps={
+          Object {
+            "className": "Chip-sc-1rzr8oo-0 iczEeI",
+          }
+        }
+        consumerContext={null}
+      >
+        <Chip
+          className="Chip-sc-1rzr8oo-0 iczEeI"
+          closeBtnAriaLabel="close"
+          component="div"
+          isOverflowChip={false}
+          isReadOnly={false}
+          onClick={[Function]}
+          ouiaContext={
+            Object {
+              "isOuia": false,
+              "ouiaId": null,
+            }
+          }
+          tooltipPosition="top"
+        >
+          <GenerateId
+            prefix="pf-random-id-"
+          >
+            <div
+              className="pf-c-chip Chip-sc-1rzr8oo-0 iczEeI"
+            >
+              <span
+                className="pf-c-chip__text"
+                id="pf-random-id-0"
+              />
+              <ChipButton
+                aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
+                ariaLabel="close"
+                id="remove_pf-random-id-0"
+                onClick={[Function]}
+              >
+                <Component
+                  aria-label="close"
+                  aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
+                  className=""
+                  id="remove_pf-random-id-0"
+                  onClick={[Function]}
+                  variant="plain"
+                >
+                  <ComponentWithOuia
+                    component={[Function]}
+                    componentProps={
+                      Object {
+                        "aria-label": "close",
+                        "aria-labelledby": "remove_pf-random-id-0 pf-random-id-0",
+                        "children": <TimesCircleIcon
+                          aria-hidden="true"
+                          color="currentColor"
+                          noVerticalAlign={false}
+                          size="sm"
+                          title={null}
+                        />,
+                        "className": "",
+                        "id": "remove_pf-random-id-0",
+                        "onClick": [Function],
+                        "variant": "plain",
+                      }
+                    }
+                    consumerContext={
+                      Object {
+                        "isOuia": false,
+                        "ouiaId": null,
+                      }
+                    }
+                  >
+                    <Button
+                      aria-label="close"
+                      aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
+                      className=""
+                      id="remove_pf-random-id-0"
+                      onClick={[Function]}
+                      ouiaContext={
+                        Object {
+                          "isOuia": false,
+                          "ouiaId": null,
+                        }
+                      }
+                      variant="plain"
+                    >
+                      <button
+                        aria-disabled={null}
+                        aria-label="close"
+                        aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
+                        className="pf-c-button pf-m-plain"
+                        disabled={false}
+                        id="remove_pf-random-id-0"
+                        onClick={[Function]}
+                        tabIndex={null}
+                        type="button"
+                      >
+                        <TimesCircleIcon
+                          aria-hidden="true"
+                          color="currentColor"
+                          noVerticalAlign={false}
+                          size="sm"
+                          title={null}
+                        >
+                          <svg
+                            aria-hidden="true"
+                            aria-labelledby={null}
+                            fill="currentColor"
+                            height="1em"
+                            role="img"
+                            style={
+                              Object {
+                                "verticalAlign": "-0.125em",
+                              }
+                            }
+                            viewBox="0 0 512 512"
+                            width="1em"
+                          >
+                            <path
+                              d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
+                              transform=""
+                            />
+                          </svg>
+                        </TimesCircleIcon>
+                      </button>
+                    </Button>
+                  </ComponentWithOuia>
+                </Component>
+              </ChipButton>
+            </div>
+          </GenerateId>
+        </Chip>
+      </ComponentWithOuia>
+    </PFChip>
+  </StyledComponent>
+</Chip>
+`;
diff --git a/awx/ui_next/src/components/Chip/__snapshots__/ChipGroup.test.jsx.snap b/awx/ui_next/src/components/Chip/__snapshots__/ChipGroup.test.jsx.snap
new file mode 100644
index 0000000000..30d29d4107
--- /dev/null
+++ b/awx/ui_next/src/components/Chip/__snapshots__/ChipGroup.test.jsx.snap
@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ChipGroup /> renders the expected content 1`] = `
+<ChipGroup>
+  <StyledComponent
+    forwardedComponent={
+      Object {
+        "$$typeof": Symbol(react.forward_ref),
+        "attrs": Array [],
+        "componentStyle": ComponentStyle {
+          "componentId": "ChipGroup-sc-10zu8t0-0",
+          "isStatic": true,
+          "lastClassName": "bwbBYO",
+          "rules": Array [
+            "--pf-c-chip-group--c-chip--MarginRight:10px;--pf-c-chip-group--c-chip--MarginBottom:10px;> .pf-c-chip.pf-m-overflow .pf-c-button{--pf-c-button--PaddingTop:3px;--pf-c-button--PaddingBottom:3px;--pf-c-chip--m-overflow--c-button--PaddingLeft:8px;--pf-c-chip--m-overflow--c-button--PaddingRight:8px;}",
+          ],
+        },
+        "displayName": "ChipGroup",
+        "foldedComponentIds": Array [],
+        "render": [Function],
+        "styledComponentId": "ChipGroup-sc-10zu8t0-0",
+        "target": [Function],
+        "toString": [Function],
+        "warnTooManyClasses": [Function],
+        "withComponent": [Function],
+      }
+    }
+    forwardedRef={null}
+  >
+    <ChipGroup
+      className="ChipGroup-sc-10zu8t0-0 bwbBYO"
+      collapsedText="\${remaining} more"
+      defaultIsOpen={false}
+      expandedText="Show Less"
+      numChips={3}
+      withToolbar={false}
+    />
+  </StyledComponent>
+</ChipGroup>
+`;
diff --git a/awx/ui_next/src/components/Lookup/Lookup.jsx b/awx/ui_next/src/components/Lookup/Lookup.jsx
index dfe6c2ad00..ce2f85f24b 100644
--- a/awx/ui_next/src/components/Lookup/Lookup.jsx
+++ b/awx/ui_next/src/components/Lookup/Lookup.jsx
@@ -49,6 +49,7 @@ const InputGroup = styled(PFInputGroup)`
 const ChipHolder = styled.div`
   --pf-c-form-control--BorderTopColor: var(--pf-global--BorderColor--200);
   --pf-c-form-control--BorderRightColor: var(--pf-global--BorderColor--200);
+  --pf-c-form-control--Height: auto;
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 `;
@@ -240,7 +241,7 @@ class Lookup extends React.Component {
     const canDelete = !required || (multiple && value.length > 1);
     const chips = () => {
       return selectCategoryOptions && selectCategoryOptions.length > 0 ? (
-        <ChipGroup>
+        <ChipGroup defaultIsOpen numChips={5}>
           {(multiple ? value : [value]).map(chip => (
             <CredentialChip
               key={chip.id}
@@ -251,7 +252,7 @@ class Lookup extends React.Component {
           ))}
         </ChipGroup>
       ) : (
-        <ChipGroup>
+        <ChipGroup defaultIsOpen numChips={5}>
           {(multiple ? value : [value]).map(chip => (
             <Chip
               key={chip.id}
@@ -350,7 +351,6 @@ class Lookup extends React.Component {
             <SelectedList
               label={i18n._(t`Selected`)}
               selected={selectCategoryOptions ? value : lookupSelectedItems}
-              showOverflowAfter={5}
               onRemove={this.toggleSelected}
               isReadOnly={!canDelete}
               isCredentialList={
diff --git a/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.test.jsx b/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.test.jsx
index a525fb9e9a..cc00396525 100644
--- a/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.test.jsx
+++ b/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.test.jsx
@@ -70,8 +70,8 @@ describe('<MultiCredentialsLookup />', () => {
   });
 
   test('onChange is called when you click to remove a credential from input', async () => {
-    const chip = wrapper.find('PFChip');
-    const button = chip.at(1).find('Button');
+    const chip = wrapper.find('PFChip').find({ isOverflowChip: false });
+    const button = chip.at(1).find('ChipButton');
     expect(chip).toHaveLength(4);
     button.prop('onClick')();
     expect(onChange).toBeCalledWith([
diff --git a/awx/ui_next/src/components/MultiSelect/MultiSelect.jsx b/awx/ui_next/src/components/MultiSelect/MultiSelect.jsx
index 1f00008859..b8afb15855 100644
--- a/awx/ui_next/src/components/MultiSelect/MultiSelect.jsx
+++ b/awx/ui_next/src/components/MultiSelect/MultiSelect.jsx
@@ -206,7 +206,7 @@ class MultiSelect extends Component {
             />
           </div>
           <div css="margin: 10px">
-            <ChipGroup>
+            <ChipGroup defaultIsOpen numChips={5}>
               {value.map(item => (
                 <Chip
                   key={item.id}
diff --git a/awx/ui_next/src/components/ResourceAccessList/ResourceAccessListItem.jsx b/awx/ui_next/src/components/ResourceAccessList/ResourceAccessListItem.jsx
index ae89bebb20..bc1b5ccb60 100644
--- a/awx/ui_next/src/components/ResourceAccessList/ResourceAccessListItem.jsx
+++ b/awx/ui_next/src/components/ResourceAccessList/ResourceAccessListItem.jsx
@@ -110,7 +110,9 @@ class ResourceAccessListItem extends React.Component {
                     <Detail
                       label={i18n._(t`User Roles`)}
                       value={
-                        <ChipGroup>{userRoles.map(this.renderChip)}</ChipGroup>
+                        <ChipGroup numChips={5}>
+                          {userRoles.map(this.renderChip)}
+                        </ChipGroup>
                       }
                     />
                   )}
@@ -118,7 +120,9 @@ class ResourceAccessListItem extends React.Component {
                     <Detail
                       label={i18n._(t`Team Roles`)}
                       value={
-                        <ChipGroup>{teamRoles.map(this.renderChip)}</ChipGroup>
+                        <ChipGroup numChips={5}>
+                          {teamRoles.map(this.renderChip)}
+                        </ChipGroup>
                       }
                     />
                   )}
diff --git a/awx/ui_next/src/components/ResourceAccessList/__snapshots__/ResourceAccessListItem.test.jsx.snap b/awx/ui_next/src/components/ResourceAccessList/__snapshots__/ResourceAccessListItem.test.jsx.snap
index d404aaf693..017091a61d 100644
--- a/awx/ui_next/src/components/ResourceAccessList/__snapshots__/ResourceAccessListItem.test.jsx.snap
+++ b/awx/ui_next/src/components/ResourceAccessList/__snapshots__/ResourceAccessListItem.test.jsx.snap
@@ -84,7 +84,9 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
                       fullWidth={false}
                       label="Team Roles"
                       value={
-                        <ForwardRef>
+                        <ForwardRef
+                          numChips={5}
+                        >
                           <ForwardRef
                             isReadOnly={false}
                             onClick={[Function]}
@@ -138,7 +140,9 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
                         fullWidth={false}
                         label="Team Roles"
                         value={
-                          <ForwardRef>
+                          <ForwardRef
+                            numChips={5}
+                          >
                             <ForwardRef
                               isReadOnly={false}
                               onClick={[Function]}
@@ -215,7 +219,9 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
                           fullWidth={false}
                           label="Team Roles"
                           value={
-                            <ForwardRef>
+                            <ForwardRef
+                              numChips={5}
+                            >
                               <ForwardRef
                                 isReadOnly={false}
                                 onClick={[Function]}
@@ -543,7 +549,9 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
                                   fullWidth={false}
                                   label="Team Roles"
                                   value={
-                                    <ForwardRef>
+                                    <ForwardRef
+                                      numChips={5}
+                                    >
                                       <ForwardRef
                                         isReadOnly={false}
                                         onClick={[Function]}
@@ -649,7 +657,9 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
                                             className="Detail__DetailValue-sc-16ypsyv-1 yHlYM"
                                             data-pf-content={true}
                                           >
-                                            <ChipGroup>
+                                            <ChipGroup
+                                              numChips={5}
+                                            >
                                               <StyledComponent
                                                 forwardedComponent={
                                                   Object {
@@ -658,9 +668,9 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
                                                     "componentStyle": ComponentStyle {
                                                       "componentId": "ChipGroup-sc-10zu8t0-0",
                                                       "isStatic": true,
-                                                      "lastClassName": "ldAQsx",
+                                                      "lastClassName": "bwbBYO",
                                                       "rules": Array [
-                                                        "--pf-c-chip-group--c-chip--MarginRight:10px;--pf-c-chip-group--c-chip--MarginBottom:10px;> .pf-c-chip.pf-m-overflow button{padding:3px 8px;}",
+                                                        "--pf-c-chip-group--c-chip--MarginRight:10px;--pf-c-chip-group--c-chip--MarginBottom:10px;> .pf-c-chip.pf-m-overflow .pf-c-button{--pf-c-button--PaddingTop:3px;--pf-c-button--PaddingBottom:3px;--pf-c-chip--m-overflow--c-button--PaddingLeft:8px;--pf-c-chip--m-overflow--c-button--PaddingRight:8px;}",
                                                       ],
                                                     },
                                                     "displayName": "ChipGroup",
@@ -674,199 +684,214 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
                                                   }
                                                 }
                                                 forwardedRef={null}
+                                                numChips={5}
                                               >
                                                 <ChipGroup
-                                                  className="ChipGroup-sc-10zu8t0-0 ldAQsx"
-                                                  showOverflowAfter={null}
+                                                  className="ChipGroup-sc-10zu8t0-0 bwbBYO"
+                                                  collapsedText="\${remaining} more"
+                                                  defaultIsOpen={false}
+                                                  expandedText="Show Less"
+                                                  numChips={5}
+                                                  withToolbar={false}
                                                 >
                                                   <ul
-                                                    className="pf-c-chip-group ChipGroup-sc-10zu8t0-0 ldAQsx"
+                                                    className="pf-c-chip-group ChipGroup-sc-10zu8t0-0 bwbBYO"
                                                   >
-                                                    <Chip
-                                                      component="li"
-                                                      isReadOnly={false}
-                                                      key=".$3"
-                                                      onClick={[Function]}
+                                                    <InnerChipGroup
+                                                      className="ChipGroup-sc-10zu8t0-0 bwbBYO"
+                                                      collapsedText="\${remaining} more"
+                                                      defaultIsOpen={false}
+                                                      expandedText="Show Less"
+                                                      isOpen={false}
+                                                      numChips={5}
+                                                      onToggleCollapse={[Function]}
+                                                      withToolbar={false}
                                                     >
-                                                      <StyledComponent
+                                                      <Chip
                                                         component="li"
-                                                        forwardedComponent={
-                                                          Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "attrs": Array [],
-                                                            "componentStyle": ComponentStyle {
-                                                              "componentId": "Chip-sc-1rzr8oo-0",
-                                                              "isStatic": false,
-                                                              "lastClassName": "dgUGLg",
-                                                              "rules": Array [
-                                                                "--pf-c-chip--m-read-only--PaddingTop:3px;--pf-c-chip--m-read-only--PaddingRight:8px;--pf-c-chip--m-read-only--PaddingBottom:3px;--pf-c-chip--m-read-only--PaddingLeft:8px;& > .pf-c-button{padding:3px 8px;}",
-                                                                [Function],
-                                                              ],
-                                                            },
-                                                            "displayName": "Chip",
-                                                            "foldedComponentIds": Array [],
-                                                            "render": [Function],
-                                                            "styledComponentId": "Chip-sc-1rzr8oo-0",
-                                                            "target": [Function],
-                                                            "toString": [Function],
-                                                            "warnTooManyClasses": [Function],
-                                                            "withComponent": [Function],
-                                                          }
-                                                        }
-                                                        forwardedRef={null}
                                                         isReadOnly={false}
+                                                        key=".$3"
                                                         onClick={[Function]}
                                                       >
-                                                        <PFChip
-                                                          className="Chip-sc-1rzr8oo-0 dgUGLg"
+                                                        <StyledComponent
                                                           component="li"
+                                                          forwardedComponent={
+                                                            Object {
+                                                              "$$typeof": Symbol(react.forward_ref),
+                                                              "attrs": Array [],
+                                                              "componentStyle": ComponentStyle {
+                                                                "componentId": "Chip-sc-1rzr8oo-0",
+                                                                "isStatic": true,
+                                                                "lastClassName": "iczEeI",
+                                                                "rules": Array [
+                                                                  "--pf-c-chip--m-read-only--PaddingTop:3px;--pf-c-chip--m-read-only--PaddingBottom:3px;--pf-c-chip--m-read-only--PaddingLeft:8px;--pf-c-chip--m-read-only--PaddingRight:8px;.pf-c-button{--pf-c-button--PaddingTop:3px;--pf-c-button--PaddingBottom:3px;--pf-c-button--PaddingLeft:8px;--pf-c-button--PaddingRight:8px;}",
+                                                                ],
+                                                              },
+                                                              "displayName": "Chip",
+                                                              "foldedComponentIds": Array [],
+                                                              "render": [Function],
+                                                              "styledComponentId": "Chip-sc-1rzr8oo-0",
+                                                              "target": [Function],
+                                                              "toString": [Function],
+                                                              "warnTooManyClasses": [Function],
+                                                              "withComponent": [Function],
+                                                            }
+                                                          }
+                                                          forwardedRef={null}
                                                           isReadOnly={false}
                                                           onClick={[Function]}
                                                         >
-                                                          <ComponentWithOuia
-                                                            component={[Function]}
-                                                            componentProps={
-                                                              Object {
-                                                                "children": "Member",
-                                                                "className": "Chip-sc-1rzr8oo-0 dgUGLg",
-                                                                "component": "li",
-                                                                "isReadOnly": false,
-                                                                "onClick": [Function],
-                                                              }
-                                                            }
-                                                            consumerContext={null}
+                                                          <PFChip
+                                                            className="Chip-sc-1rzr8oo-0 iczEeI"
+                                                            component="li"
+                                                            isReadOnly={false}
+                                                            onClick={[Function]}
                                                           >
-                                                            <Chip
-                                                              className="Chip-sc-1rzr8oo-0 dgUGLg"
-                                                              closeBtnAriaLabel="close"
-                                                              component="li"
-                                                              isOverflowChip={false}
-                                                              isReadOnly={false}
-                                                              onClick={[Function]}
-                                                              ouiaContext={
+                                                            <ComponentWithOuia
+                                                              component={[Function]}
+                                                              componentProps={
                                                                 Object {
-                                                                  "isOuia": false,
-                                                                  "ouiaId": null,
+                                                                  "children": "Member",
+                                                                  "className": "Chip-sc-1rzr8oo-0 iczEeI",
+                                                                  "component": "li",
+                                                                  "isReadOnly": false,
+                                                                  "onClick": [Function],
                                                                 }
                                                               }
-                                                              tooltipPosition="top"
+                                                              consumerContext={null}
                                                             >
-                                                              <GenerateId
-                                                                prefix="pf-random-id-"
+                                                              <Chip
+                                                                className="Chip-sc-1rzr8oo-0 iczEeI"
+                                                                closeBtnAriaLabel="close"
+                                                                component="li"
+                                                                isOverflowChip={false}
+                                                                isReadOnly={false}
+                                                                onClick={[Function]}
+                                                                ouiaContext={
+                                                                  Object {
+                                                                    "isOuia": false,
+                                                                    "ouiaId": null,
+                                                                  }
+                                                                }
+                                                                tooltipPosition="top"
                                                               >
-                                                                <li
-                                                                  className="pf-c-chip Chip-sc-1rzr8oo-0 dgUGLg"
+                                                                <GenerateId
+                                                                  prefix="pf-random-id-"
                                                                 >
-                                                                  <span
-                                                                    className="pf-c-chip__text"
-                                                                    id="pf-random-id-0"
+                                                                  <li
+                                                                    className="pf-c-chip Chip-sc-1rzr8oo-0 iczEeI"
                                                                   >
-                                                                    Member
-                                                                  </span>
-                                                                  <ChipButton
-                                                                    aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
-                                                                    ariaLabel="close"
-                                                                    id="remove_pf-random-id-0"
-                                                                    onClick={[Function]}
-                                                                  >
-                                                                    <Component
-                                                                      aria-label="close"
+                                                                    <span
+                                                                      className="pf-c-chip__text"
+                                                                      id="pf-random-id-0"
+                                                                    >
+                                                                      Member
+                                                                    </span>
+                                                                    <ChipButton
                                                                       aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
-                                                                      className=""
+                                                                      ariaLabel="close"
                                                                       id="remove_pf-random-id-0"
                                                                       onClick={[Function]}
-                                                                      variant="plain"
                                                                     >
-                                                                      <ComponentWithOuia
-                                                                        component={[Function]}
-                                                                        componentProps={
-                                                                          Object {
-                                                                            "aria-label": "close",
-                                                                            "aria-labelledby": "remove_pf-random-id-0 pf-random-id-0",
-                                                                            "children": <TimesCircleIcon
-                                                                              aria-hidden="true"
-                                                                              color="currentColor"
-                                                                              noVerticalAlign={false}
-                                                                              size="sm"
-                                                                              title={null}
-                                                                            />,
-                                                                            "className": "",
-                                                                            "id": "remove_pf-random-id-0",
-                                                                            "onClick": [Function],
-                                                                            "variant": "plain",
-                                                                          }
-                                                                        }
-                                                                        consumerContext={
-                                                                          Object {
-                                                                            "isOuia": false,
-                                                                            "ouiaId": null,
-                                                                          }
-                                                                        }
+                                                                      <Component
+                                                                        aria-label="close"
+                                                                        aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
+                                                                        className=""
+                                                                        id="remove_pf-random-id-0"
+                                                                        onClick={[Function]}
+                                                                        variant="plain"
                                                                       >
-                                                                        <Button
-                                                                          aria-label="close"
-                                                                          aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
-                                                                          className=""
-                                                                          id="remove_pf-random-id-0"
-                                                                          onClick={[Function]}
-                                                                          ouiaContext={
+                                                                        <ComponentWithOuia
+                                                                          component={[Function]}
+                                                                          componentProps={
+                                                                            Object {
+                                                                              "aria-label": "close",
+                                                                              "aria-labelledby": "remove_pf-random-id-0 pf-random-id-0",
+                                                                              "children": <TimesCircleIcon
+                                                                                aria-hidden="true"
+                                                                                color="currentColor"
+                                                                                noVerticalAlign={false}
+                                                                                size="sm"
+                                                                                title={null}
+                                                                              />,
+                                                                              "className": "",
+                                                                              "id": "remove_pf-random-id-0",
+                                                                              "onClick": [Function],
+                                                                              "variant": "plain",
+                                                                            }
+                                                                          }
+                                                                          consumerContext={
                                                                             Object {
                                                                               "isOuia": false,
                                                                               "ouiaId": null,
                                                                             }
                                                                           }
-                                                                          variant="plain"
                                                                         >
-                                                                          <button
-                                                                            aria-disabled={null}
+                                                                          <Button
                                                                             aria-label="close"
                                                                             aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
-                                                                            className="pf-c-button pf-m-plain"
-                                                                            disabled={false}
+                                                                            className=""
                                                                             id="remove_pf-random-id-0"
                                                                             onClick={[Function]}
-                                                                            tabIndex={null}
-                                                                            type="button"
+                                                                            ouiaContext={
+                                                                              Object {
+                                                                                "isOuia": false,
+                                                                                "ouiaId": null,
+                                                                              }
+                                                                            }
+                                                                            variant="plain"
                                                                           >
-                                                                            <TimesCircleIcon
-                                                                              aria-hidden="true"
-                                                                              color="currentColor"
-                                                                              noVerticalAlign={false}
-                                                                              size="sm"
-                                                                              title={null}
+                                                                            <button
+                                                                              aria-disabled={null}
+                                                                              aria-label="close"
+                                                                              aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
+                                                                              className="pf-c-button pf-m-plain"
+                                                                              disabled={false}
+                                                                              id="remove_pf-random-id-0"
+                                                                              onClick={[Function]}
+                                                                              tabIndex={null}
+                                                                              type="button"
                                                                             >
-                                                                              <svg
+                                                                              <TimesCircleIcon
                                                                                 aria-hidden="true"
-                                                                                aria-labelledby={null}
-                                                                                fill="currentColor"
-                                                                                height="1em"
-                                                                                role="img"
-                                                                                style={
-                                                                                  Object {
-                                                                                    "verticalAlign": "-0.125em",
-                                                                                  }
-                                                                                }
-                                                                                viewBox="0 0 512 512"
-                                                                                width="1em"
+                                                                                color="currentColor"
+                                                                                noVerticalAlign={false}
+                                                                                size="sm"
+                                                                                title={null}
                                                                               >
-                                                                                <path
-                                                                                  d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
-                                                                                  transform=""
-                                                                                />
-                                                                              </svg>
-                                                                            </TimesCircleIcon>
-                                                                          </button>
-                                                                        </Button>
-                                                                      </ComponentWithOuia>
-                                                                    </Component>
-                                                                  </ChipButton>
-                                                                </li>
-                                                              </GenerateId>
-                                                            </Chip>
-                                                          </ComponentWithOuia>
-                                                        </PFChip>
-                                                      </StyledComponent>
-                                                    </Chip>
+                                                                                <svg
+                                                                                  aria-hidden="true"
+                                                                                  aria-labelledby={null}
+                                                                                  fill="currentColor"
+                                                                                  height="1em"
+                                                                                  role="img"
+                                                                                  style={
+                                                                                    Object {
+                                                                                      "verticalAlign": "-0.125em",
+                                                                                    }
+                                                                                  }
+                                                                                  viewBox="0 0 512 512"
+                                                                                  width="1em"
+                                                                                >
+                                                                                  <path
+                                                                                    d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
+                                                                                    transform=""
+                                                                                  />
+                                                                                </svg>
+                                                                              </TimesCircleIcon>
+                                                                            </button>
+                                                                          </Button>
+                                                                        </ComponentWithOuia>
+                                                                      </Component>
+                                                                    </ChipButton>
+                                                                  </li>
+                                                                </GenerateId>
+                                                              </Chip>
+                                                            </ComponentWithOuia>
+                                                          </PFChip>
+                                                        </StyledComponent>
+                                                      </Chip>
+                                                    </InnerChipGroup>
                                                   </ul>
                                                 </ChipGroup>
                                               </StyledComponent>
diff --git a/awx/ui_next/src/components/SelectedList/SelectedList.jsx b/awx/ui_next/src/components/SelectedList/SelectedList.jsx
index 661eeec382..8d7c716ef9 100644
--- a/awx/ui_next/src/components/SelectedList/SelectedList.jsx
+++ b/awx/ui_next/src/components/SelectedList/SelectedList.jsx
@@ -23,7 +23,6 @@ class SelectedList extends Component {
     const {
       label,
       selected,
-      showOverflowAfter,
       onRemove,
       displayKey,
       isReadOnly,
@@ -54,7 +53,7 @@ class SelectedList extends Component {
         <SplitLabelItem>{label}</SplitLabelItem>
         <VerticalSeparator />
         <SplitItem>
-          <ChipGroup showOverflowAfter={showOverflowAfter}>{chips}</ChipGroup>
+          <ChipGroup numChips={5}>{chips}</ChipGroup>
         </SplitItem>
       </Split>
     );
@@ -66,7 +65,6 @@ SelectedList.propTypes = {
   label: PropTypes.string,
   onRemove: PropTypes.func,
   selected: PropTypes.arrayOf(PropTypes.object).isRequired,
-  showOverflowAfter: PropTypes.number,
   isReadOnly: PropTypes.bool,
 };
 
@@ -74,7 +72,6 @@ SelectedList.defaultProps = {
   displayKey: 'name',
   label: 'Selected',
   onRemove: () => null,
-  showOverflowAfter: 5,
   isReadOnly: false,
 };
 
diff --git a/awx/ui_next/src/components/SelectedList/SelectedList.test.jsx b/awx/ui_next/src/components/SelectedList/SelectedList.test.jsx
index e8955e077d..10a0f271b6 100644
--- a/awx/ui_next/src/components/SelectedList/SelectedList.test.jsx
+++ b/awx/ui_next/src/components/SelectedList/SelectedList.test.jsx
@@ -19,7 +19,6 @@ describe('<SelectedList />', () => {
       <SelectedList
         label="Selectedeeee"
         selected={mockSelected}
-        showOverflowAfter={5}
         onRemove={() => {}}
       />
     );
@@ -27,16 +26,11 @@ describe('<SelectedList />', () => {
 
   test('showOverflow should set showOverflow on ChipGroup', () => {
     const wrapper = mount(
-      <SelectedList
-        label="Selected"
-        selected={[]}
-        showOverflowAfter={5}
-        onRemove={() => {}}
-      />
+      <SelectedList label="Selected" selected={[]} onRemove={() => {}} />
     );
     const chipGroup = wrapper.find(ChipGroup);
     expect(chipGroup).toHaveLength(1);
-    expect(chipGroup.prop('showOverflowAfter')).toEqual(5);
+    expect(chipGroup.prop('numChips')).toEqual(5);
   });
 
   test('Clicking remove on chip calls onRemove callback prop with correct params', () => {
@@ -51,7 +45,6 @@ describe('<SelectedList />', () => {
       <SelectedList
         label="Selected"
         selected={mockSelected}
-        showOverflowAfter={3}
         onRemove={onRemove}
       />
     );
diff --git a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
index e279658c1e..47205a763d 100644
--- a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
+++ b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
@@ -217,7 +217,7 @@ function JobDetail({ job, i18n, history }) {
             fullWidth
             label={i18n._(t`Credentials`)}
             value={
-              <ChipGroup showOverflowAfter={5}>
+              <ChipGroup numChips={5}>
                 {credentials.map(c => (
                   <CredentialChip key={c.id} credential={c} isReadOnly />
                 ))}
@@ -230,7 +230,7 @@ function JobDetail({ job, i18n, history }) {
             fullWidth
             label={i18n._(t`Labels`)}
             value={
-              <ChipGroup showOverflowAfter={5}>
+              <ChipGroup numChips={5}>
                 {labels.results.map(l => (
                   <Chip key={l.id} isReadOnly>
                     {l.name}
diff --git a/awx/ui_next/src/screens/Organization/OrganizationDetail/OrganizationDetail.jsx b/awx/ui_next/src/screens/Organization/OrganizationDetail/OrganizationDetail.jsx
index 42594d5da9..f66b95be69 100644
--- a/awx/ui_next/src/screens/Organization/OrganizationDetail/OrganizationDetail.jsx
+++ b/awx/ui_next/src/screens/Organization/OrganizationDetail/OrganizationDetail.jsx
@@ -99,7 +99,7 @@ class OrganizationDetail extends Component {
               fullWidth
               label={i18n._(t`Instance Groups`)}
               value={
-                <ChipGroup showOverflowAfter={5}>
+                <ChipGroup numChips={5}>
                   {instanceGroups.map(ig => (
                     <Chip key={ig.id} isReadOnly>
                       {ig.name}
diff --git a/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx b/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx
index 0b48128e9a..8910914179 100644
--- a/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx
+++ b/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx
@@ -273,7 +273,7 @@ class JobTemplateDetail extends Component {
                   fullWidth
                   label={i18n._(t`Credentials`)}
                   value={
-                    <ChipGroup showOverflowAfter={5}>
+                    <ChipGroup numChips={5}>
                       {summary_fields.credentials.map(c => (
                         <CredentialChip key={c.id} credential={c} isReadOnly />
                       ))}
@@ -286,7 +286,7 @@ class JobTemplateDetail extends Component {
                 fullWidth
                 label={i18n._(t`Labels`)}
                 value={
-                  <ChipGroup showOverflowAfter={5}>
+                  <ChipGroup numChips={5}>
                     {summary_fields.labels.results.map(l => (
                       <Chip key={l.id} isReadOnly>
                         {l.name}
@@ -301,7 +301,7 @@ class JobTemplateDetail extends Component {
                 fullWidth
                 label={i18n._(t`Instance Groups`)}
                 value={
-                  <ChipGroup showOverflowAfter={5}>
+                  <ChipGroup numChips={5}>
                     {instanceGroups.map(ig => (
                       <Chip key={ig.id} isReadOnly>
                         {ig.name}
@@ -316,7 +316,7 @@ class JobTemplateDetail extends Component {
                 fullWidth
                 label={i18n._(t`Job tags`)}
                 value={
-                  <ChipGroup showOverflowAfter={5}>
+                  <ChipGroup numChips={5}>
                     {job_tags.split(',').map(jobTag => (
                       <Chip key={jobTag} isReadOnly>
                         {jobTag}
@@ -331,7 +331,7 @@ class JobTemplateDetail extends Component {
                 fullWidth
                 label={i18n._(t`Skip tags`)}
                 value={
-                  <ChipGroup showOverflowAfter={5}>
+                  <ChipGroup numChips={5}>
                     {skip_tags.split(',').map(skipTag => (
                       <Chip key={skipTag} isReadOnly>
                         {skipTag}