diff --git a/__tests__/components/PaginatedDataList/PaginatedDataList.test.jsx b/__tests__/components/PaginatedDataList/PaginatedDataList.test.jsx
index 5efd111cb3..f19380c229 100644
--- a/__tests__/components/PaginatedDataList/PaginatedDataList.test.jsx
+++ b/__tests__/components/PaginatedDataList/PaginatedDataList.test.jsx
@@ -89,10 +89,35 @@ describe('<PaginatedDataList />', () => {
     );
 
     const pagination = wrapper.find('Pagination');
-    pagination.prop('onSetPage')(2, 5);
-    expect(history.location.search).toEqual('?item.page=2&item.page_size=5');
+    pagination.prop('onSetPage')(null, 2);
+    expect(history.location.search).toEqual('?item.page=2');
     wrapper.update();
-    pagination.prop('onSetPage')(1, 25);
-    expect(history.location.search).toEqual('?item.page=1&item.page_size=25');
+    pagination.prop('onSetPage')(null, 1);
+    expect(history.location.search).toEqual('?item.page=1');
+  });
+
+  test('should navigate to page when Pagination calls onPerPageSelect prop', () => {
+    const history = createMemoryHistory({
+      initialEntries: ['/organizations/1/teams'],
+    });
+    const wrapper = mountWithContexts(
+      <PaginatedDataList
+        items={mockData}
+        itemCount={7}
+        queryParams={{
+          page: 1,
+          page_size: 5,
+          order_by: 'name',
+        }}
+        qsConfig={qsConfig}
+      />, { context: { router: { history } } }
+    );
+
+    const pagination = wrapper.find('Pagination');
+    pagination.prop('onPerPageSelect')(null, 5);
+    expect(history.location.search).toEqual('?item.page_size=5');
+    wrapper.update();
+    pagination.prop('onPerPageSelect')(null, 25);
+    expect(history.location.search).toEqual('?item.page_size=25');
   });
 });
diff --git a/__tests__/components/Pagination.test.jsx b/__tests__/components/Pagination.test.jsx
deleted file mode 100644
index 4de96f9631..0000000000
--- a/__tests__/components/Pagination.test.jsx
+++ /dev/null
@@ -1,349 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import { I18nProvider } from '@lingui/react';
-import Pagination from '../../src/components/Pagination';
-
-describe('<Pagination />', () => {
-  let pagination;
-
-  afterEach(() => {
-    if (pagination) {
-      pagination.unmount();
-      pagination = null;
-    }
-  });
-
-  test('it triggers the expected callbacks on next and last', () => {
-    const next = 'button[aria-label="Next"]';
-    const last = 'button[aria-label="Last"]';
-
-    const onSetPage = jest.fn();
-
-    pagination = mount(
-      <I18nProvider>
-        <Pagination
-          count={21}
-          page={1}
-          pageCount={5}
-          page_size={5}
-          pageSizeOptions={[5, 10, 25, 50]}
-          onSetPage={onSetPage}
-        />
-      </I18nProvider>
-    );
-
-    pagination.find(next).simulate('click');
-
-    expect(onSetPage).toHaveBeenCalledTimes(1);
-    expect(onSetPage).toBeCalledWith(2, 5);
-
-    pagination.find(last).simulate('click');
-
-    expect(onSetPage).toHaveBeenCalledTimes(2);
-    expect(onSetPage).toBeCalledWith(5, 5);
-  });
-
-  test('it triggers the expected callback on previous and first', () => {
-    const previous = 'button[aria-label="Previous"]';
-    const first = 'button[aria-label="First"]';
-
-    const onSetPage = jest.fn();
-
-    pagination = mount(
-      <I18nProvider>
-        <Pagination
-          count={21}
-          page={5}
-          pageCount={5}
-          page_size={5}
-          pageSizeOptions={[5, 10, 25, 50]}
-          onSetPage={onSetPage}
-        />
-      </I18nProvider>
-    );
-
-    pagination.find(previous).simulate('click');
-
-    expect(onSetPage).toHaveBeenCalledTimes(1);
-    expect(onSetPage).toBeCalledWith(4, 5);
-
-    pagination.find(first).simulate('click');
-
-    expect(onSetPage).toHaveBeenCalledTimes(2);
-    expect(onSetPage).toBeCalledWith(1, 5);
-  });
-
-  test('previous button does not work on page 1', () => {
-    const previous = 'button[aria-label="First"]';
-    const onSetPage = jest.fn();
-
-    pagination = mount(
-      <I18nProvider>
-        <Pagination
-          count={21}
-          page={1}
-          pageCount={5}
-          page_size={5}
-          pageSizeOptions={[5, 10, 25, 50]}
-          onSetPage={onSetPage}
-        />
-      </I18nProvider>
-    );
-    pagination.find(previous).simulate('click');
-    expect(onSetPage).toHaveBeenCalledTimes(0);
-  });
-
-  test('changing pageSize works', () => {
-    const pageSizeDropdownToggleSelector = 'DropdownToggle DropdownToggle[className="togglePageSize"]';
-    const pageSizeDropdownItemsSelector = 'DropdownItem button';
-    const onSetPage = jest.fn();
-
-    pagination = mount(
-      <I18nProvider>
-        <Pagination
-          count={21}
-          page={1}
-          pageCount={5}
-          page_size={5}
-          pageSizeOptions={[5, 10, 25, 50]}
-          onSetPage={onSetPage}
-        />
-      </I18nProvider>
-    );
-    const pageSizeDropdownToggle = pagination.find(pageSizeDropdownToggleSelector);
-    expect(pageSizeDropdownToggle.length).toBe(1);
-    pageSizeDropdownToggle.at(0).simulate('click');
-
-    const pageSizeDropdownItems = pagination.find(pageSizeDropdownItemsSelector);
-    expect(pageSizeDropdownItems.length).toBe(3);
-    pageSizeDropdownItems.at(1).simulate('click');
-    expect(onSetPage).toBeCalledWith(1, 25);
-  });
-
-  test('itemCount displays correctly', () => {
-    const onSetPage = jest.fn();
-
-    pagination = mount(
-      <I18nProvider>
-        <Pagination
-          count={7}
-          page={1}
-          pageCount={2}
-          page_size={5}
-          pageSizeOptions={[5, 10, 25, 50]}
-          onSetPage={onSetPage}
-        />
-      </I18nProvider>
-    );
-    let itemCount = pagination.find('.awx-pagination__item-count');
-    expect(itemCount.text()).toEqual('Items 1 – 5 of 7');
-
-    pagination = mount(
-      <I18nProvider>
-        <Pagination
-          count={7}
-          page={2}
-          pageCount={2}
-          page_size={5}
-          pageSizeOptions={[5, 10, 25, 50]}
-          onSetPage={onSetPage}
-        />
-      </I18nProvider>
-    );
-    itemCount = pagination.find('.awx-pagination__item-count');
-    expect(itemCount.text()).toEqual('Items 6 – 7 of 7');
-  });
-
-  test('itemCount matching pageSize displays correctly', () => {
-    const onSetPage = jest.fn();
-
-    pagination = mount(
-      <I18nProvider>
-        <Pagination
-          count={5}
-          page={1}
-          pageCount={1}
-          page_size={5}
-          pageSizeOptions={[5, 10, 25, 50]}
-          onSetPage={onSetPage}
-        />
-      </I18nProvider>
-    );
-    const itemCount = pagination.find('.awx-pagination__item-count');
-    expect(itemCount.text()).toEqual('Items 1 – 5 of 5');
-  });
-
-  test('itemCount less than pageSize displays correctly', () => {
-    const onSetPage = jest.fn();
-
-    pagination = mount(
-      <I18nProvider>
-        <Pagination
-          count={3}
-          page={1}
-          pageCount={1}
-          page_size={5}
-          pageSizeOptions={[5, 10, 25, 50]}
-          onSetPage={onSetPage}
-        />
-      </I18nProvider>
-    );
-    const itemCount = pagination.find('.awx-pagination__item-count');
-    expect(itemCount.text()).toEqual('Items 1 – 3 of 3');
-  });
-
-  test('submitting a new page by typing in input works', () => {
-    const textInputSelector = '.awx-pagination__page-input.pf-c-form-control';
-    const submitFormSelector = '.awx-pagination__page-input-form';
-    const onSetPage = jest.fn();
-
-    pagination = mount(
-      <I18nProvider>
-        <Pagination
-          count={21}
-          page={1}
-          pageCount={5}
-          page_size={5}
-          pageSizeOptions={[5, 10, 25, 50]}
-          onSetPage={onSetPage}
-        />
-      </I18nProvider>
-    );
-    const paginationElem = pagination.find('Pagination');
-    expect(paginationElem.state().value).toBe(1);
-    const textInput = pagination.find(textInputSelector);
-    expect(textInput.length).toBe(1);
-    expect(textInput.at(0).prop('value')).toBe(1);
-    const input = pagination.find('TextInput');
-    expect(input.prop('value')).toBe(1);
-    input.prop('onChange')(2);
-    pagination.update();
-    const submitForm = pagination.find(submitFormSelector);
-    expect(submitForm.length).toBe(1);
-    submitForm.simulate('submit');
-    expect(pagination.find('TextInput').prop('value')).toBe(2);
-    // assert onPageChange was called
-    expect(paginationElem.state().value).toBe(2);
-  });
-
-  test('submitting a new page by typing in input does not work when invalid', () => {
-    const textInputSelector = '.awx-pagination__page-input.pf-c-form-control';
-    const submitFormSelector = '.awx-pagination__page-input-form';
-    const onSetPage = jest.fn();
-
-    pagination = mount(
-      <I18nProvider>
-        <Pagination
-          count={21}
-          page={1}
-          pageCount={5}
-          page_size={5}
-          pageSizeOptions={[5, 10, 25, 50]}
-          onSetPage={onSetPage}
-        />
-      </I18nProvider>
-    );
-    const paginationElem = pagination.find('Pagination');
-    expect(paginationElem.state().value).toBe(1);
-    const textInput = pagination.find(textInputSelector);
-    expect(textInput.length).toBe(1);
-    expect(textInput.at(0).prop('value')).toBe(1);
-    const input = pagination.find('TextInput');
-    expect(input.prop('value')).toBe(1);
-    input.prop('onChange')('!invalid');
-    pagination.update();
-    const submitForm = pagination.find(submitFormSelector);
-    expect(submitForm.length).toBe(1);
-    submitForm.simulate('submit');
-    expect(pagination.find('TextInput').prop('value')).toBe(1);
-    // assert onPageChange was not called
-    expect(paginationElem.state().value).toBe(1);
-  });
-
-  test('text input page change is not displayed when only 1 page', () => {
-    const onSetPage = jest.fn();
-    const pageNumber = 'input[aria-label="Page Number"]';
-    pagination = mount(
-      <I18nProvider>
-        <Pagination
-          count={4}
-          page={1}
-          pageCount={1}
-          page_size={5}
-          pageSizeOptions={[5, 10, 25, 50]}
-          onSetPage={onSetPage}
-        />
-      </I18nProvider>
-    );
-    let pageInput = pagination.find(pageNumber);
-    expect(pageInput.length).toBe(0);
-
-    pagination = mount(
-      <I18nProvider>
-        <Pagination
-          count={11}
-          page={1}
-          pageCount={3}
-          page_size={5}
-          pageSizeOptions={[5, 10, 25, 50]}
-          onSetPage={onSetPage}
-        />
-      </I18nProvider>
-    );
-    pageInput = pagination.find(pageNumber);
-    expect(pageInput.length).toBe(1);
-  });
-
-  test('make sure componentDidUpdate calls onPageChange', () => {
-    const onSetPage = jest.fn();
-
-    pagination = mount(
-      <I18nProvider>
-        <Pagination
-          count={7}
-          page={1}
-          pageCount={2}
-          page_size={5}
-          pageSizeOptions={[5, 10, 25, 50]}
-          onSetPage={onSetPage}
-        />
-      </I18nProvider>
-    );
-    const paginationElem = pagination.find('Pagination');
-    expect(paginationElem.state().value).toBe(1);
-    pagination.setProps({
-      children: (
-        <Pagination
-          count={7}
-          page={2}
-          pageCount={2}
-          page_size={5}
-          pageSizeOptions={[5, 10, 25, 50]}
-          onSetPage={onSetPage}
-        />
-      )
-    });
-    paginationElem.update();
-    expect(paginationElem.state().value).toBe(2);
-  });
-
-  test('when showPageSizeOptions is passed as false there should not be a dropdown in the DOM', () => {
-    const pageSizeDropdownSelector = '.awx-pagination__page-size-selection';
-    const onSetPage = jest.fn();
-
-    pagination = mount(
-      <I18nProvider>
-        <Pagination
-          count={21}
-          page={1}
-          pageCount={5}
-          page_size={5}
-          showPageSizeOptions={false}
-          onSetPage={onSetPage}
-        />
-      </I18nProvider>
-    );
-    const pageSizeDropdown = pagination.find(pageSizeDropdownSelector);
-    expect(pageSizeDropdown.length).toBe(0);
-  });
-});
diff --git a/__tests__/components/__snapshots__/NotificationListItem.test.jsx.snap b/__tests__/components/__snapshots__/NotificationListItem.test.jsx.snap
index 5be978fcf8..8f17dfe0c1 100644
--- a/__tests__/components/__snapshots__/NotificationListItem.test.jsx.snap
+++ b/__tests__/components/__snapshots__/NotificationListItem.test.jsx.snap
@@ -448,91 +448,6 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
               </NotificationListItem__DataListCell>
             </div>
           </DataListItemCells>
-          <NotificationListItem__Switch
-            aria-label="Toggle notification failure"
-            id="notification-9000-error-toggle"
-            isChecked={false}
-            isDisabled={false}
-            key=".1"
-            label="Failure"
-            onChange={[Function]}
-            rowid="items-list-item-9000"
-          >
-            <StyledComponent
-              aria-label="Toggle notification failure"
-              forwardedComponent={
-                Object {
-                  "$$typeof": Symbol(react.forward_ref),
-                  "attrs": Array [],
-                  "componentStyle": ComponentStyle {
-                    "componentId": "NotificationListItem__Switch-j7c411-1",
-                    "isStatic": true,
-                    "lastClassName": "ceuHGn",
-                    "rules": Array [
-                      "display:flex;flex-wrap:no-wrap;",
-                    ],
-                  },
-                  "displayName": "NotificationListItem__Switch",
-                  "foldedComponentIds": Array [],
-                  "render": [Function],
-                  "styledComponentId": "NotificationListItem__Switch-j7c411-1",
-                  "target": [Function],
-                  "toString": [Function],
-                  "warnTooManyClasses": [Function],
-                  "withComponent": [Function],
-                }
-              }
-              forwardedRef={null}
-              id="notification-9000-error-toggle"
-              isChecked={false}
-              isDisabled={false}
-              label="Failure"
-              onChange={[Function]}
-              rowid="items-list-item-9000"
-            >
-              <Switch
-                aria-label="Toggle notification failure"
-                className="NotificationListItem__Switch-j7c411-1 ceuHGn"
-                id="notification-9000-error-toggle"
-                isChecked={false}
-                isDisabled={false}
-                label="Failure"
-                onChange={[Function]}
-                rowid="items-list-item-9000"
-              >
-                <label
-                  className="pf-c-switch NotificationListItem__Switch-j7c411-1 ceuHGn"
-                  htmlFor="notification-9000-error-toggle"
-                >
-                  <input
-                    aria-label="Toggle notification failure"
-                    checked={false}
-                    className="pf-c-switch__input"
-                    disabled={false}
-                    id="notification-9000-error-toggle"
-                    onChange={[Function]}
-                    rowid="items-list-item-9000"
-                    type="checkbox"
-                  />
-                  <span
-                    className="pf-c-switch__toggle"
-                  />
-                  <span
-                    aria-hidden="true"
-                    className="pf-c-switch__label pf-m-on"
-                  >
-                    Failure
-                  </span>
-                  <span
-                    aria-hidden="true"
-                    className="pf-c-switch__label pf-m-off"
-                  >
-                    Failure
-                  </span>
-                </label>
-              </Switch>
-            </StyledComponent>
-          </NotificationListItem__Switch>
         </div>
       </DataListItemRow>
     </li>
diff --git a/__tests__/pages/Organizations/screens/Organization/__snapshots__/OrganizationNotifications.test.jsx.snap b/__tests__/pages/Organizations/screens/Organization/__snapshots__/OrganizationNotifications.test.jsx.snap
index 093b1885d8..912c791a0a 100644
--- a/__tests__/pages/Organizations/screens/Organization/__snapshots__/OrganizationNotifications.test.jsx.snap
+++ b/__tests__/pages/Organizations/screens/Organization/__snapshots__/OrganizationNotifications.test.jsx.snap
@@ -217,7 +217,6 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                               }
                             }
                             onSelectAll={null}
-                            paginationStyling={null}
                             qsConfig={
                               Object {
                                 "defaultParams": Object {
@@ -281,6 +280,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                 ]
                               }
                               isAllSelected={false}
+                              noLeftMargin={false}
                               onSearch={[Function]}
                               onSelectAll={null}
                               onSort={[Function]}
@@ -2075,91 +2075,6 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                   </NotificationListItem__DataListCell>
                                                 </div>
                                               </DataListItemCells>
-                                              <NotificationListItem__Switch
-                                                aria-label="Toggle notification failure"
-                                                id="notification-1-error-toggle"
-                                                isChecked={false}
-                                                isDisabled={false}
-                                                key=".1"
-                                                label="Failure"
-                                                onChange={[Function]}
-                                                rowid="items-list-item-1"
-                                              >
-                                                <StyledComponent
-                                                  aria-label="Toggle notification failure"
-                                                  forwardedComponent={
-                                                    Object {
-                                                      "$$typeof": Symbol(react.forward_ref),
-                                                      "attrs": Array [],
-                                                      "componentStyle": ComponentStyle {
-                                                        "componentId": "NotificationListItem__Switch-j7c411-1",
-                                                        "isStatic": true,
-                                                        "lastClassName": "ceuHGn",
-                                                        "rules": Array [
-                                                          "display:flex;flex-wrap:no-wrap;",
-                                                        ],
-                                                      },
-                                                      "displayName": "NotificationListItem__Switch",
-                                                      "foldedComponentIds": Array [],
-                                                      "render": [Function],
-                                                      "styledComponentId": "NotificationListItem__Switch-j7c411-1",
-                                                      "target": [Function],
-                                                      "toString": [Function],
-                                                      "warnTooManyClasses": [Function],
-                                                      "withComponent": [Function],
-                                                    }
-                                                  }
-                                                  forwardedRef={null}
-                                                  id="notification-1-error-toggle"
-                                                  isChecked={false}
-                                                  isDisabled={false}
-                                                  label="Failure"
-                                                  onChange={[Function]}
-                                                  rowid="items-list-item-1"
-                                                >
-                                                  <Switch
-                                                    aria-label="Toggle notification failure"
-                                                    className="NotificationListItem__Switch-j7c411-1 ceuHGn"
-                                                    id="notification-1-error-toggle"
-                                                    isChecked={false}
-                                                    isDisabled={false}
-                                                    label="Failure"
-                                                    onChange={[Function]}
-                                                    rowid="items-list-item-1"
-                                                  >
-                                                    <label
-                                                      className="pf-c-switch NotificationListItem__Switch-j7c411-1 ceuHGn"
-                                                      htmlFor="notification-1-error-toggle"
-                                                    >
-                                                      <input
-                                                        aria-label="Toggle notification failure"
-                                                        checked={false}
-                                                        className="pf-c-switch__input"
-                                                        disabled={false}
-                                                        id="notification-1-error-toggle"
-                                                        onChange={[Function]}
-                                                        rowid="items-list-item-1"
-                                                        type="checkbox"
-                                                      />
-                                                      <span
-                                                        className="pf-c-switch__toggle"
-                                                      />
-                                                      <span
-                                                        aria-hidden="true"
-                                                        className="pf-c-switch__label pf-m-on"
-                                                      >
-                                                        Failure
-                                                      </span>
-                                                      <span
-                                                        aria-hidden="true"
-                                                        className="pf-c-switch__label pf-m-off"
-                                                      >
-                                                        Failure
-                                                      </span>
-                                                    </label>
-                                                  </Switch>
-                                                </StyledComponent>
-                                              </NotificationListItem__Switch>
                                             </div>
                                           </DataListItemRow>
                                         </li>
@@ -2635,91 +2550,6 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                   </NotificationListItem__DataListCell>
                                                 </div>
                                               </DataListItemCells>
-                                              <NotificationListItem__Switch
-                                                aria-label="Toggle notification failure"
-                                                id="notification-2-error-toggle"
-                                                isChecked={true}
-                                                isDisabled={false}
-                                                key=".1"
-                                                label="Failure"
-                                                onChange={[Function]}
-                                                rowid="items-list-item-2"
-                                              >
-                                                <StyledComponent
-                                                  aria-label="Toggle notification failure"
-                                                  forwardedComponent={
-                                                    Object {
-                                                      "$$typeof": Symbol(react.forward_ref),
-                                                      "attrs": Array [],
-                                                      "componentStyle": ComponentStyle {
-                                                        "componentId": "NotificationListItem__Switch-j7c411-1",
-                                                        "isStatic": true,
-                                                        "lastClassName": "ceuHGn",
-                                                        "rules": Array [
-                                                          "display:flex;flex-wrap:no-wrap;",
-                                                        ],
-                                                      },
-                                                      "displayName": "NotificationListItem__Switch",
-                                                      "foldedComponentIds": Array [],
-                                                      "render": [Function],
-                                                      "styledComponentId": "NotificationListItem__Switch-j7c411-1",
-                                                      "target": [Function],
-                                                      "toString": [Function],
-                                                      "warnTooManyClasses": [Function],
-                                                      "withComponent": [Function],
-                                                    }
-                                                  }
-                                                  forwardedRef={null}
-                                                  id="notification-2-error-toggle"
-                                                  isChecked={true}
-                                                  isDisabled={false}
-                                                  label="Failure"
-                                                  onChange={[Function]}
-                                                  rowid="items-list-item-2"
-                                                >
-                                                  <Switch
-                                                    aria-label="Toggle notification failure"
-                                                    className="NotificationListItem__Switch-j7c411-1 ceuHGn"
-                                                    id="notification-2-error-toggle"
-                                                    isChecked={true}
-                                                    isDisabled={false}
-                                                    label="Failure"
-                                                    onChange={[Function]}
-                                                    rowid="items-list-item-2"
-                                                  >
-                                                    <label
-                                                      className="pf-c-switch NotificationListItem__Switch-j7c411-1 ceuHGn"
-                                                      htmlFor="notification-2-error-toggle"
-                                                    >
-                                                      <input
-                                                        aria-label="Toggle notification failure"
-                                                        checked={true}
-                                                        className="pf-c-switch__input"
-                                                        disabled={false}
-                                                        id="notification-2-error-toggle"
-                                                        onChange={[Function]}
-                                                        rowid="items-list-item-2"
-                                                        type="checkbox"
-                                                      />
-                                                      <span
-                                                        className="pf-c-switch__toggle"
-                                                      />
-                                                      <span
-                                                        aria-hidden="true"
-                                                        className="pf-c-switch__label pf-m-on"
-                                                      >
-                                                        Failure
-                                                      </span>
-                                                      <span
-                                                        aria-hidden="true"
-                                                        className="pf-c-switch__label pf-m-off"
-                                                      >
-                                                        Failure
-                                                      </span>
-                                                    </label>
-                                                  </Switch>
-                                                </StyledComponent>
-                                              </NotificationListItem__Switch>
                                             </div>
                                           </DataListItemRow>
                                         </li>
@@ -2729,213 +2559,527 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                 </WithI18n>
                               </ul>
                             </DataList>
-                            <WithI18n
-                              count={2}
+                            <_default
+                              itemCount={2}
+                              onPerPageSelect={[Function]}
                               onSetPage={[Function]}
                               page={1}
-                              pageCount={1}
-                              page_size={5}
+                              perPage={5}
+                              perPageOptions={
+                                Array [
+                                  Object {
+                                    "title": "5",
+                                    "value": 5,
+                                  },
+                                  Object {
+                                    "title": "10",
+                                    "value": 10,
+                                  },
+                                  Object {
+                                    "title": "20",
+                                    "value": 20,
+                                  },
+                                  Object {
+                                    "title": "50",
+                                    "value": 50,
+                                  },
+                                ]
+                              }
+                              variant="bottom"
                             >
                               <I18n
                                 update={true}
                                 withHash={true}
                               >
-                                <Pagination
-                                  count={2}
-                                  i18n={"/i18n/"}
+                                <Pagination__AWXPagination
+                                  dropDirection="up"
+                                  itemCount={2}
+                                  onPerPageSelect={[Function]}
                                   onSetPage={[Function]}
                                   page={1}
-                                  pageCount={1}
-                                  pageSizeOptions={
+                                  perPage={5}
+                                  perPageOptions={
                                     Array [
-                                      5,
-                                      10,
-                                      25,
-                                      50,
+                                      Object {
+                                        "title": "5",
+                                        "value": 5,
+                                      },
+                                      Object {
+                                        "title": "10",
+                                        "value": 10,
+                                      },
+                                      Object {
+                                        "title": "20",
+                                        "value": 20,
+                                      },
+                                      Object {
+                                        "title": "50",
+                                        "value": 50,
+                                      },
                                     ]
                                   }
-                                  page_size={5}
-                                  showPageSizeOptions={true}
+                                  titles={
+                                    Object {
+                                      "currPage": "Current page",
+                                      "items": "items",
+                                      "itemsPerPage": "Items per page",
+                                      "optionsToggle": "Select",
+                                      "pages": "pages",
+                                      "paginationTitle": "Pagination",
+                                      "perPageSuffix": "per page",
+                                      "toFirstPage": "Go to first page",
+                                      "toLastPage": "Go to last page",
+                                      "toNextPage": "Go to next page",
+                                      "toPreviousPage": "Go to previous page",
+                                    }
+                                  }
+                                  variant="bottom"
                                 >
-                                  <div
-                                    className="awx-pagination"
+                                  <StyledComponent
+                                    dropDirection="up"
+                                    forwardedComponent={
+                                      Object {
+                                        "$$typeof": Symbol(react.forward_ref),
+                                        "attrs": Array [],
+                                        "componentStyle": ComponentStyle {
+                                          "componentId": "Pagination__AWXPagination-c2dclb-0",
+                                          "isStatic": false,
+                                          "lastClassName": "dXBcqV",
+                                          "rules": Array [
+                                            [Function],
+                                          ],
+                                        },
+                                        "displayName": "Pagination__AWXPagination",
+                                        "foldedComponentIds": Array [],
+                                        "render": [Function],
+                                        "styledComponentId": "Pagination__AWXPagination-c2dclb-0",
+                                        "target": [Function],
+                                        "toString": [Function],
+                                        "warnTooManyClasses": [Function],
+                                        "withComponent": [Function],
+                                      }
+                                    }
+                                    forwardedRef={null}
+                                    itemCount={2}
+                                    onPerPageSelect={[Function]}
+                                    onSetPage={[Function]}
+                                    page={1}
+                                    perPage={5}
+                                    perPageOptions={
+                                      Array [
+                                        Object {
+                                          "title": "5",
+                                          "value": 5,
+                                        },
+                                        Object {
+                                          "title": "10",
+                                          "value": 10,
+                                        },
+                                        Object {
+                                          "title": "20",
+                                          "value": 20,
+                                        },
+                                        Object {
+                                          "title": "50",
+                                          "value": 50,
+                                        },
+                                      ]
+                                    }
+                                    titles={
+                                      Object {
+                                        "currPage": "Current page",
+                                        "items": "items",
+                                        "itemsPerPage": "Items per page",
+                                        "optionsToggle": "Select",
+                                        "pages": "pages",
+                                        "paginationTitle": "Pagination",
+                                        "perPageSuffix": "per page",
+                                        "toFirstPage": "Go to first page",
+                                        "toLastPage": "Go to last page",
+                                        "toNextPage": "Go to next page",
+                                        "toPreviousPage": "Go to previous page",
+                                      }
+                                    }
+                                    variant="bottom"
                                   >
-                                    <div
-                                      className="awx-pagination__page-size-selection"
+                                    <Pagination
+                                      className="Pagination__AWXPagination-c2dclb-0 dXBcqV"
+                                      dropDirection="up"
+                                      itemCount={2}
+                                      onFirstClick={[Function]}
+                                      onLastClick={[Function]}
+                                      onNextClick={[Function]}
+                                      onPageInput={[Function]}
+                                      onPerPageSelect={[Function]}
+                                      onPreviousClick={[Function]}
+                                      onSetPage={[Function]}
+                                      page={1}
+                                      perPage={5}
+                                      perPageOptions={
+                                        Array [
+                                          Object {
+                                            "title": "5",
+                                            "value": 5,
+                                          },
+                                          Object {
+                                            "title": "10",
+                                            "value": 10,
+                                          },
+                                          Object {
+                                            "title": "20",
+                                            "value": 20,
+                                          },
+                                          Object {
+                                            "title": "50",
+                                            "value": 50,
+                                          },
+                                        ]
+                                      }
+                                      titles={
+                                        Object {
+                                          "currPage": "Current page",
+                                          "items": "items",
+                                          "itemsPerPage": "Items per page",
+                                          "optionsToggle": "Select",
+                                          "pages": "pages",
+                                          "paginationTitle": "Pagination",
+                                          "perPageSuffix": "per page",
+                                          "toFirstPage": "Go to first page",
+                                          "toLastPage": "Go to last page",
+                                          "toNextPage": "Go to next page",
+                                          "toPreviousPage": "Go to previous page",
+                                        }
+                                      }
+                                      toggleTemplate={[Function]}
+                                      variant="bottom"
+                                      widgetId="pagination-options-menu"
                                     >
-                                      Items Per Page
-                                      <Dropdown
-                                        className=""
-                                        direction="up"
-                                        dropdownItems={
-                                          Array [
-                                            <Item
-                                              className=""
-                                              component="button"
-                                              href="#"
-                                              isDisabled={false}
-                                              isHovered={false}
-                                            >
-                                              50
-                                            </Item>,
-                                            <Item
-                                              className=""
-                                              component="button"
-                                              href="#"
-                                              isDisabled={false}
-                                              isHovered={false}
-                                            >
-                                              25
-                                            </Item>,
-                                            <Item
-                                              className=""
-                                              component="button"
-                                              href="#"
-                                              isDisabled={false}
-                                              isHovered={false}
-                                            >
-                                              10
-                                            </Item>,
-                                          ]
-                                        }
-                                        isOpen={false}
-                                        isPlain={false}
-                                        onSelect={[Function]}
-                                        onToggle={[Function]}
-                                        position="left"
-                                        toggle={
-                                          <DropdownToggle
-                                            className="togglePageSize"
-                                            iconComponent={[Function]}
-                                            id=""
-                                            isActive={false}
-                                            isFocused={false}
-                                            isHovered={false}
-                                            isOpen={false}
-                                            isPlain={false}
-                                            onToggle={[Function]}
-                                            parentRef={null}
-                                          >
-                                            5
-                                          </DropdownToggle>
-                                        }
+                                      <div
+                                        className="pf-c-pagination pf-m-footer Pagination__AWXPagination-c2dclb-0 dXBcqV"
                                       >
-                                        <div
-                                          className="pf-c-dropdown pf-m-top"
-                                          onToggle={[Function]}
+                                        <OptionsMenu
+                                          dropDirection="up"
+                                          firstIndex={1}
+                                          itemCount={2}
+                                          itemsPerPageTitle="Items per page"
+                                          itemsTitle="items"
+                                          lastIndex={2}
+                                          onPerPageSelect={[Function]}
+                                          optionsToggle="Select"
+                                          perPage={5}
+                                          perPageOptions={
+                                            Array [
+                                              Object {
+                                                "title": "5",
+                                                "value": 5,
+                                              },
+                                              Object {
+                                                "title": "10",
+                                                "value": 10,
+                                              },
+                                              Object {
+                                                "title": "20",
+                                                "value": 20,
+                                              },
+                                              Object {
+                                                "title": "50",
+                                                "value": 50,
+                                              },
+                                            ]
+                                          }
+                                          perPageSuffix="per page"
+                                          toggleTemplate={[Function]}
+                                          widgetId="pagination-options-menu"
                                         >
-                                          <DropdownToggle
-                                            ariaHasPopup={true}
-                                            className="togglePageSize"
-                                            iconComponent={[Function]}
-                                            id="pf-toggle-id-1"
-                                            isActive={false}
-                                            isFocused={false}
-                                            isHovered={false}
-                                            isOpen={false}
-                                            isPlain={false}
-                                            key=".0"
-                                            onEnter={[Function]}
-                                            onToggle={[Function]}
-                                            parentRef={
-                                              <div
-                                                class="pf-c-dropdown pf-m-top"
-                                              >
-                                                <button
-                                                  aria-expanded="false"
-                                                  aria-haspopup="true"
-                                                  class="pf-c-dropdown__toggle togglePageSize"
-                                                  id="pf-toggle-id-1"
-                                                  type="button"
-                                                >
-                                                  <span
-                                                    class="pf-c-dropdown__toggle-text"
+                                          <div
+                                            className="pf-c-options-menu"
+                                          >
+                                            <span
+                                              hidden={true}
+                                              id="pagination-options-menu-label"
+                                            >
+                                              Items per page
+                                              :
+                                            </span>
+                                            <Dropdown
+                                              className=""
+                                              direction="up"
+                                              dropdownItems={
+                                                Array [
+                                                  <Item
+                                                    className="pf-c-options-menu__menu-item pf-m-selected"
+                                                    component="button"
+                                                    data-action="per-page-5"
+                                                    href="#"
+                                                    isDisabled={false}
+                                                    isHovered={false}
+                                                    onClick={[Function]}
                                                   >
                                                     5
-                                                  </span>
-                                                  <svg
-                                                    aria-hidden="true"
-                                                    class="pf-c-dropdown__toggle-icon"
-                                                    fill="currentColor"
-                                                    height="1em"
-                                                    role="img"
-                                                    style="vertical-align: -0.125em;"
-                                                    viewBox="0 0 320 512"
-                                                    width="1em"
-                                                  >
-                                                    <path
-                                                      d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                                                      transform=""
-                                                    />
-                                                  </svg>
-                                                </button>
-                                              </div>
-                                            }
-                                          >
-                                            <DropdownToggle
-                                              ariaHasPopup={true}
-                                              className="togglePageSize"
-                                              id="pf-toggle-id-1"
-                                              isActive={false}
-                                              isDisabled={false}
-                                              isFocused={false}
-                                              isHovered={false}
-                                              isOpen={false}
-                                              isPlain={false}
-                                              onEnter={[Function]}
-                                              onToggle={[Function]}
-                                              parentRef={
-                                                <div
-                                                  class="pf-c-dropdown pf-m-top"
-                                                >
-                                                  <button
-                                                    aria-expanded="false"
-                                                    aria-haspopup="true"
-                                                    class="pf-c-dropdown__toggle togglePageSize"
-                                                    id="pf-toggle-id-1"
-                                                    type="button"
-                                                  >
                                                     <span
-                                                      class="pf-c-dropdown__toggle-text"
+                                                      className="pf-c-pagination__menu-text"
                                                     >
-                                                      5
+                                                       per page
                                                     </span>
-                                                    <svg
-                                                      aria-hidden="true"
-                                                      class="pf-c-dropdown__toggle-icon"
-                                                      fill="currentColor"
-                                                      height="1em"
-                                                      role="img"
-                                                      style="vertical-align: -0.125em;"
-                                                      viewBox="0 0 320 512"
-                                                      width="1em"
+                                                    <i
+                                                      className="pf-c-options-menu__menu-item-icon"
                                                     >
-                                                      <path
-                                                        d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                                                        transform=""
+                                                      <CheckIcon
+                                                        color="currentColor"
+                                                        size="sm"
+                                                        title={null}
                                                       />
-                                                    </svg>
-                                                  </button>
-                                                </div>
+                                                    </i>
+                                                  </Item>,
+                                                  <Item
+                                                    className="pf-c-options-menu__menu-item"
+                                                    component="button"
+                                                    data-action="per-page-10"
+                                                    href="#"
+                                                    isDisabled={false}
+                                                    isHovered={false}
+                                                    onClick={[Function]}
+                                                  >
+                                                    10
+                                                    <span
+                                                      className="pf-c-pagination__menu-text"
+                                                    >
+                                                       per page
+                                                    </span>
+                                                  </Item>,
+                                                  <Item
+                                                    className="pf-c-options-menu__menu-item"
+                                                    component="button"
+                                                    data-action="per-page-20"
+                                                    href="#"
+                                                    isDisabled={false}
+                                                    isHovered={false}
+                                                    onClick={[Function]}
+                                                  >
+                                                    20
+                                                    <span
+                                                      className="pf-c-pagination__menu-text"
+                                                    >
+                                                       per page
+                                                    </span>
+                                                  </Item>,
+                                                  <Item
+                                                    className="pf-c-options-menu__menu-item"
+                                                    component="button"
+                                                    data-action="per-page-50"
+                                                    href="#"
+                                                    isDisabled={false}
+                                                    isHovered={false}
+                                                    onClick={[Function]}
+                                                  >
+                                                    50
+                                                    <span
+                                                      className="pf-c-pagination__menu-text"
+                                                    >
+                                                       per page
+                                                    </span>
+                                                  </Item>,
+                                                ]
+                                              }
+                                              isOpen={false}
+                                              isPlain={true}
+                                              onSelect={[Function]}
+                                              position="left"
+                                              toggle={
+                                                <OptionsToggle
+                                                  firstIndex={1}
+                                                  isOpen={false}
+                                                  itemCount={2}
+                                                  itemsTitle="items"
+                                                  lastIndex={2}
+                                                  onToggle={[Function]}
+                                                  optionsToggle="Select"
+                                                  toggleTemplate={[Function]}
+                                                  widgetId="pagination-options-menu"
+                                                />
                                               }
+                                            >
+                                              <div
+                                                className="pf-c-dropdown pf-m-top"
+                                              >
+                                                <OptionsToggle
+                                                  ariaHasPopup={true}
+                                                  firstIndex={1}
+                                                  id="pf-toggle-id-1"
+                                                  isOpen={false}
+                                                  isPlain={true}
+                                                  itemCount={2}
+                                                  itemsTitle="items"
+                                                  key=".0"
+                                                  lastIndex={2}
+                                                  onEnter={[Function]}
+                                                  onToggle={[Function]}
+                                                  optionsToggle="Select"
+                                                  parentRef={
+                                                    <div
+                                                      class="pf-c-dropdown pf-m-top"
+                                                    >
+                                                      <div
+                                                        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+                                                      >
+                                                        <span
+                                                          class="pf-c-options-menu__toggle-text"
+                                                        >
+                                                          <strong>
+                                                            1
+                                                             - 
+                                                            2
+                                                          </strong>
+                                                           of 
+                                                          <strong>
+                                                            2
+                                                          </strong>
+                                                           
+                                                          items
+                                                        </span>
+                                                        <button
+                                                          aria-expanded="false"
+                                                          aria-haspopup="listbox"
+                                                          aria-label="Select"
+                                                          aria-labelledby="pagination-options-menu-toggle pagination-options-menu-label"
+                                                          class="pf-c-options-menu__toggle-button"
+                                                          id="pagination-options-menu-toggle"
+                                                          type="button"
+                                                        >
+                                                          <svg
+                                                            aria-hidden="true"
+                                                            fill="currentColor"
+                                                            height="1em"
+                                                            role="img"
+                                                            style="vertical-align: -0.125em;"
+                                                            viewBox="0 0 320 512"
+                                                            width="1em"
+                                                          >
+                                                            <path
+                                                              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                                                              transform=""
+                                                            />
+                                                          </svg>
+                                                        </button>
+                                                      </div>
+                                                    </div>
+                                                  }
+                                                  toggleTemplate={[Function]}
+                                                  widgetId="pagination-options-menu"
+                                                >
+                                                  <div
+                                                    className="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+                                                  >
+                                                    <span
+                                                      className="pf-c-options-menu__toggle-text"
+                                                    >
+                                                      <ToggleTamplate
+                                                        firstIndex={1}
+                                                        itemCount={2}
+                                                        itemsTitle="items"
+                                                        lastIndex={2}
+                                                      >
+                                                        <strong>
+                                                          1
+                                                           - 
+                                                          2
+                                                        </strong>
+                                                         of 
+                                                        <strong>
+                                                          2
+                                                        </strong>
+                                                         
+                                                        items
+                                                      </ToggleTamplate>
+                                                    </span>
+                                                    <button
+                                                      aria-expanded={false}
+                                                      aria-haspopup="listbox"
+                                                      aria-label="Select"
+                                                      aria-labelledby="pagination-options-menu-toggle pagination-options-menu-label"
+                                                      className="pf-c-options-menu__toggle-button"
+                                                      id="pagination-options-menu-toggle"
+                                                      onClick={[Function]}
+                                                      type="button"
+                                                    >
+                                                      <CaretDownIcon
+                                                        color="currentColor"
+                                                        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 320 512"
+                                                          width="1em"
+                                                        >
+                                                          <path
+                                                            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                                                            transform=""
+                                                          />
+                                                        </svg>
+                                                      </CaretDownIcon>
+                                                    </button>
+                                                  </div>
+                                                </OptionsToggle>
+                                              </div>
+                                            </Dropdown>
+                                          </div>
+                                        </OptionsMenu>
+                                        <Navigation
+                                          currPage="Current page"
+                                          lastPage={1}
+                                          onFirstClick={[Function]}
+                                          onLastClick={[Function]}
+                                          onNextClick={[Function]}
+                                          onPageInput={[Function]}
+                                          onPreviousClick={[Function]}
+                                          onSetPage={[Function]}
+                                          page={1}
+                                          pagesTitle="pages"
+                                          paginationTitle="Pagination"
+                                          toFirstPage="Go to first page"
+                                          toLastPage="Go to last page"
+                                          toNextPage="Go to next page"
+                                          toPreviousPage="Go to previous page"
+                                        >
+                                          <nav
+                                            aria-label="Pagination"
+                                            className="pf-c-pagination__nav"
+                                          >
+                                            <Button
+                                              aria-label="Go to first page"
+                                              className=""
+                                              component="button"
+                                              data-action="first"
+                                              isActive={false}
+                                              isBlock={false}
+                                              isDisabled={true}
+                                              isFocus={false}
+                                              isHover={false}
+                                              onClick={[Function]}
+                                              type="button"
+                                              variant="plain"
                                             >
                                               <button
-                                                aria-expanded={false}
-                                                aria-haspopup={true}
-                                                className="pf-c-dropdown__toggle togglePageSize"
-                                                disabled={false}
-                                                id="pf-toggle-id-1"
+                                                aria-disabled={null}
+                                                aria-label="Go to first page"
+                                                className="pf-c-button pf-m-plain pf-m-disabled"
+                                                data-action="first"
+                                                disabled={true}
                                                 onClick={[Function]}
-                                                onKeyDown={[Function]}
+                                                tabIndex={null}
                                                 type="button"
                                               >
-                                                <span
-                                                  className="pf-c-dropdown__toggle-text"
-                                                >
-                                                  5
-                                                </span>
-                                                <CaretDownIcon
-                                                  className="pf-c-dropdown__toggle-icon"
+                                                <AngleDoubleLeftIcon
                                                   color="currentColor"
                                                   size="sm"
                                                   title={null}
@@ -2943,7 +3087,6 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                   <svg
                                                     aria-hidden={true}
                                                     aria-labelledby={null}
-                                                    className="pf-c-dropdown__toggle-icon"
                                                     fill="currentColor"
                                                     height="1em"
                                                     role="img"
@@ -2952,34 +3095,199 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                         "verticalAlign": "-0.125em",
                                                       }
                                                     }
-                                                    viewBox="0 0 320 512"
+                                                    viewBox="0 0 448 512"
                                                     width="1em"
                                                   >
                                                     <path
-                                                      d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                                                      d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
                                                       transform=""
                                                     />
                                                   </svg>
-                                                </CaretDownIcon>
+                                                </AngleDoubleLeftIcon>
                                               </button>
-                                            </DropdownToggle>
-                                          </DropdownToggle>
-                                        </div>
-                                      </Dropdown>
-                                    </div>
-                                    <div
-                                      className="awx-pagination__counts"
-                                    >
-                                      <div
-                                        className="awx-pagination__item-count"
-                                      >
-                                        Items {itemMin} – {itemMax} of {count}
+                                            </Button>
+                                            <Button
+                                              aria-label="Go to previous page"
+                                              className=""
+                                              component="button"
+                                              data-action="previous"
+                                              isActive={false}
+                                              isBlock={false}
+                                              isDisabled={true}
+                                              isFocus={false}
+                                              isHover={false}
+                                              onClick={[Function]}
+                                              type="button"
+                                              variant="plain"
+                                            >
+                                              <button
+                                                aria-disabled={null}
+                                                aria-label="Go to previous page"
+                                                className="pf-c-button pf-m-plain pf-m-disabled"
+                                                data-action="previous"
+                                                disabled={true}
+                                                onClick={[Function]}
+                                                tabIndex={null}
+                                                type="button"
+                                              >
+                                                <AngleLeftIcon
+                                                  color="currentColor"
+                                                  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 256 512"
+                                                    width="1em"
+                                                  >
+                                                    <path
+                                                      d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+                                                      transform=""
+                                                    />
+                                                  </svg>
+                                                </AngleLeftIcon>
+                                              </button>
+                                            </Button>
+                                            <div
+                                              className="pf-c-pagination__nav-page-select"
+                                            >
+                                              <input
+                                                aria-label="Current page"
+                                                className="pf-c-form-control"
+                                                max={1}
+                                                min="1"
+                                                onChange={[Function]}
+                                                type="number"
+                                                value={1}
+                                              />
+                                              <span
+                                                aria-hidden="true"
+                                              >
+                                                of 
+                                                1
+                                                 
+                                                pages
+                                              </span>
+                                            </div>
+                                            <Button
+                                              aria-label="Go to next page"
+                                              className=""
+                                              component="button"
+                                              data-action="next"
+                                              isActive={false}
+                                              isBlock={false}
+                                              isDisabled={true}
+                                              isFocus={false}
+                                              isHover={false}
+                                              onClick={[Function]}
+                                              type="button"
+                                              variant="plain"
+                                            >
+                                              <button
+                                                aria-disabled={null}
+                                                aria-label="Go to next page"
+                                                className="pf-c-button pf-m-plain pf-m-disabled"
+                                                data-action="next"
+                                                disabled={true}
+                                                onClick={[Function]}
+                                                tabIndex={null}
+                                                type="button"
+                                              >
+                                                <AngleRightIcon
+                                                  color="currentColor"
+                                                  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 256 512"
+                                                    width="1em"
+                                                  >
+                                                    <path
+                                                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                                                      transform=""
+                                                    />
+                                                  </svg>
+                                                </AngleRightIcon>
+                                              </button>
+                                            </Button>
+                                            <Button
+                                              aria-label="Go to last page"
+                                              className=""
+                                              component="button"
+                                              data-action="last"
+                                              isActive={false}
+                                              isBlock={false}
+                                              isDisabled={true}
+                                              isFocus={false}
+                                              isHover={false}
+                                              onClick={[Function]}
+                                              type="button"
+                                              variant="plain"
+                                            >
+                                              <button
+                                                aria-disabled={null}
+                                                aria-label="Go to last page"
+                                                className="pf-c-button pf-m-plain pf-m-disabled"
+                                                data-action="last"
+                                                disabled={true}
+                                                onClick={[Function]}
+                                                tabIndex={null}
+                                                type="button"
+                                              >
+                                                <AngleDoubleRightIcon
+                                                  color="currentColor"
+                                                  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 448 512"
+                                                    width="1em"
+                                                  >
+                                                    <path
+                                                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
+                                                      transform=""
+                                                    />
+                                                  </svg>
+                                                </AngleDoubleRightIcon>
+                                              </button>
+                                            </Button>
+                                          </nav>
+                                        </Navigation>
                                       </div>
-                                    </div>
-                                  </div>
-                                </Pagination>
+                                    </Pagination>
+                                  </StyledComponent>
+                                </Pagination__AWXPagination>
                               </I18n>
-                            </WithI18n>
+                            </_default>
                           </PaginatedDataList>
                         </Route>
                       </withRouter(PaginatedDataList)>
diff --git a/src/components/AddRole/SelectResourceStep.jsx b/src/components/AddRole/SelectResourceStep.jsx
index 01e10a2394..4f2668edce 100644
--- a/src/components/AddRole/SelectResourceStep.jsx
+++ b/src/components/AddRole/SelectResourceStep.jsx
@@ -8,14 +8,6 @@ import CheckboxListItem from '../ListItem';
 import SelectedList from '../SelectedList';
 import { getQSConfig, parseNamespacedQueryString } from '../../util/qs';
 
-const paginationStyling = {
-  paddingLeft: '0',
-  justifyContent: 'flex-end',
-  borderRight: '1px solid #ebebeb',
-  borderBottom: '1px solid #ebebeb',
-  borderTop: '0'
-};
-
 class SelectResourceStep extends React.Component {
   constructor (props) {
     super(props);
@@ -124,7 +116,6 @@ class SelectResourceStep extends React.Component {
               )}
               alignToolbarLeft
               showPageSizeOptions={false}
-              paginationStyling={paginationStyling}
             />
           </Fragment>
         )}
diff --git a/src/components/Lookup/Lookup.jsx b/src/components/Lookup/Lookup.jsx
index 4b147e552b..64f59367a0 100644
--- a/src/components/Lookup/Lookup.jsx
+++ b/src/components/Lookup/Lookup.jsx
@@ -18,14 +18,6 @@ import CheckboxListItem from '../ListItem';
 import SelectedList from '../SelectedList';
 import { getQSConfig, parseNamespacedQueryString } from '../../util/qs';
 
-const paginationStyling = {
-  paddingLeft: '0',
-  justifyContent: 'flex-end',
-  borderRight: '1px solid #ebebeb',
-  borderBottom: '1px solid #ebebeb',
-  borderTop: '0'
-};
-
 class Lookup extends React.Component {
   constructor (props) {
     super(props);
@@ -186,7 +178,6 @@ class Lookup extends React.Component {
             )}
             alignToolbarLeft
             showPageSizeOptions={false}
-            paginationStyling={paginationStyling}
           />
           {lookupSelectedItems.length > 0 && (
             <SelectedList
diff --git a/src/components/PaginatedDataList/PaginatedDataList.jsx b/src/components/PaginatedDataList/PaginatedDataList.jsx
index 267b0caad8..16e6d4e901 100644
--- a/src/components/PaginatedDataList/PaginatedDataList.jsx
+++ b/src/components/PaginatedDataList/PaginatedDataList.jsx
@@ -47,6 +47,7 @@ class PaginatedDataList extends React.Component {
     };
 
     this.handleSetPage = this.handleSetPage.bind(this);
+    this.handleSetPageSize = this.handleSetPageSize.bind(this);
     this.handleSort = this.handleSort.bind(this);
   }
 
@@ -65,11 +66,12 @@ class PaginatedDataList extends React.Component {
     return [queryParams.order_by, 'ascending'];
   }
 
-  handleSetPage (pageNumber, pageSize) {
-    this.pushHistoryState({
-      page: pageNumber,
-      page_size: pageSize,
-    });
+  handleSetPage (event, pageNumber) {
+    this.pushHistoryState({ page: pageNumber });
+  }
+
+  handleSetPageSize (event, pageSize) {
+    this.pushHistoryState({ page_size: pageSize });
   }
 
   handleSort (sortedColumnKey, sortOrder) {
@@ -106,7 +108,6 @@ class PaginatedDataList extends React.Component {
       onSelectAll,
       alignToolbarLeft,
       showPageSizeOptions,
-      paginationStyling,
       location,
       i18n
     } = this.props;
@@ -118,74 +119,9 @@ class PaginatedDataList extends React.Component {
       <Fragment>
         {error && (
           <Fragment>
-            {error && (
-              <Fragment>
-                <div>{error.message}</div>
-                {error.response && (
-                  <div>{error.response.data.detail}</div>
-                )}
-              </Fragment> // TODO: replace with proper error handling
-            )}
-            {items.length === 0 ? (
-              <EmptyState>
-                <EmptyStateIcon icon={CubesIcon} />
-                <Title size="lg">
-                  {i18n._(t`No ${ucFirst(itemNamePlural || pluralize(itemName))} Found`)}
-                </Title>
-                <EmptyStateBody>
-                  {i18n._(t`Please add ${getArticle(itemName)} ${itemName} to populate this list`)}
-                </EmptyStateBody>
-              </EmptyState>
-            ) : (
-              <Fragment>
-                <DataListToolbar
-                  sortedColumnKey={orderBy}
-                  sortOrder={sortOrder}
-                  columns={columns}
-                  onSearch={() => { }}
-                  onSort={this.handleSort}
-                  showSelectAll={showSelectAll}
-                  isAllSelected={isAllSelected}
-                  onSelectAll={onSelectAll}
-                  additionalControls={additionalControls}
-                  noLeftMargin={alignToolbarLeft}
-                />
-                <DataList aria-label={i18n._(t`${ucFirst(pluralize(itemName))} List`)}>
-                  {items.map(item => (renderItem ? renderItem(item) : (
-                    <DataListItem
-                      aria-labelledby={`items-list-item-${item.id}`}
-                      key={item.id}
-                    >
-                      <DataListItemRow>
-                        <DataListItemCells dataListCells={[
-                          <DataListCell key="team-name">
-                            <TextContent style={detailWrapperStyle}>
-                              <Link to={{ pathname: item.url }}>
-                                <Text
-                                  id={`items-list-item-${item.id}`}
-                                  style={detailLabelStyle}
-                                >
-                                  {item.name}
-                                </Text>
-                              </Link>
-                            </TextContent>
-                          </DataListCell>
-                        ]}
-                        />
-                      </DataListItemRow>
-                    </DataListItem>
-                  )))}
-                </DataList>
-                <Pagination
-                  count={itemCount}
-                  page={queryParams.page || 1}
-                  pageCount={this.getPageCount()}
-                  page_size={queryParams.page_size}
-                  onSetPage={this.handleSetPage}
-                  showPageSizeOptions={showPageSizeOptions}
-                  style={paginationStyling}
-                />
-              </Fragment>
+            <div>{error.message}</div>
+            {error.response && (
+              <div>{error.response.data.detail}</div>
             )}
           </Fragment> // TODO: replace with proper error handling
         )}
@@ -211,6 +147,7 @@ class PaginatedDataList extends React.Component {
               isAllSelected={isAllSelected}
               onSelectAll={onSelectAll}
               additionalControls={additionalControls}
+              noLeftMargin={alignToolbarLeft}
             />
             <DataList aria-label={i18n._(t`${ucFirst(pluralize(itemName))} List`)}>
               {items.map(item => (renderItem ? renderItem(item) : (
@@ -239,11 +176,18 @@ class PaginatedDataList extends React.Component {
               )))}
             </DataList>
             <Pagination
-              count={itemCount}
-              page={queryParams.page}
-              pageCount={this.getPageCount()}
-              page_size={queryParams.page_size}
+              variant="bottom"
+              itemCount={itemCount}
+              page={queryParams.page || 1}
+              perPage={queryParams.page_size}
+              perPageOptions={showPageSizeOptions ? [
+                { title: '5', value: 5 },
+                { title: '10', value: 10 },
+                { title: '20', value: 20 },
+                { title: '50', value: 50 }
+              ] : []}
               onSetPage={this.handleSetPage}
+              onPerPageSelect={this.handleSetPageSize}
             />
           </Fragment>
         )}
@@ -276,7 +220,6 @@ PaginatedDataList.propTypes = {
   onSelectAll: PropTypes.func,
   alignToolbarLeft: PropTypes.bool,
   showPageSizeOptions: PropTypes.bool,
-  paginationStyling: PropTypes.shape(),
 };
 
 PaginatedDataList.defaultProps = {
@@ -290,7 +233,6 @@ PaginatedDataList.defaultProps = {
   onSelectAll: null,
   alignToolbarLeft: false,
   showPageSizeOptions: true,
-  paginationStyling: null,
 };
 
 export { PaginatedDataList as _PaginatedDataList };
diff --git a/src/components/Pagination/Pagination.jsx b/src/components/Pagination/Pagination.jsx
index 9058648177..926b9d73be 100644
--- a/src/components/Pagination/Pagination.jsx
+++ b/src/components/Pagination/Pagination.jsx
@@ -1,245 +1,37 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { withI18n } from '@lingui/react';
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { Pagination as PFPagination, DropdownDirection } from '@patternfly/react-core';
+import { I18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import {
-  Button,
-  Dropdown,
-  DropdownDirection,
-  DropdownItem,
-  DropdownToggle,
-  TextInput
-} from '@patternfly/react-core';
 
-class Pagination extends Component {
-  constructor (props) {
-    super(props);
+const AWXPagination = styled(PFPagination)`
+  ${props => (props.perPageOptions && !props.perPageOptions.length && css`
+    .pf-c-options-menu__toggle-button {
+        display: none;
+      }
+  `)}
+`;
 
-    const { page } = props;
-    this.state = { value: page, isOpen: false };
-
-    this.onPageChange = this.onPageChange.bind(this);
-    this.onSubmit = this.onSubmit.bind(this);
-    this.onFirst = this.onFirst.bind(this);
-    this.onPrevious = this.onPrevious.bind(this);
-    this.onNext = this.onNext.bind(this);
-    this.onLast = this.onLast.bind(this);
-    this.onTogglePageSize = this.onTogglePageSize.bind(this);
-    this.onSelectPageSize = this.onSelectPageSize.bind(this);
-  }
-
-  componentDidUpdate (prevProps) {
-    const { page } = this.props;
-
-    if (prevProps.page !== page) {
-      this.onPageChange(page);
-    }
-  }
-
-  onPageChange (value) {
-    this.setState({ value });
-  }
-
-  onSubmit (event) {
-    const { onSetPage, page, pageCount, page_size } = this.props;
-    const { value } = this.state;
-
-    event.preventDefault();
-
-    // eslint-disable-next-line no-bitwise
-    const isPositiveInteger = value >>> 0 === parseFloat(value) && parseInt(value, 10) > 0;
-    const isValid = isPositiveInteger && parseInt(value, 10) <= pageCount;
-
-    if (isValid) {
-      onSetPage(value, page_size);
-    } else {
-      this.setState({ value: page });
-    }
-  }
-
-  onFirst () {
-    const { onSetPage, page_size } = this.props;
-
-    onSetPage(1, page_size);
-  }
-
-  onPrevious () {
-    const { onSetPage, page, page_size } = this.props;
-    const previousPage = page - 1;
-
-    onSetPage(previousPage, page_size);
-  }
-
-  onNext () {
-    const { onSetPage, page, page_size } = this.props;
-    const nextPage = page + 1;
-
-    onSetPage(nextPage, page_size);
-  }
-
-  onLast () {
-    const { onSetPage, pageCount, page_size } = this.props;
-
-    onSetPage(pageCount, page_size);
-  }
-
-  onTogglePageSize (isOpen) {
-    this.setState({ isOpen });
-  }
-
-  onSelectPageSize ({ target }) {
-    const { onSetPage } = this.props;
-    const page = 1;
-    const page_size = parseInt(target.innerText || target.textContent, 10);
-
-    this.setState({ isOpen: false });
-
-    onSetPage(page, page_size);
-  }
-
-  render () {
-    const { up } = DropdownDirection;
-    const {
-      count,
-      page,
-      pageCount,
-      page_size,
-      pageSizeOptions,
-      showPageSizeOptions,
-      style,
-      i18n
-    } = this.props;
-    const { value, isOpen } = this.state;
-    let opts = [];
-    if (pageSizeOptions) {
-      opts = pageSizeOptions.slice().reverse().filter(o => o !== page_size);
-    }
-    const isOnFirst = page === 1;
-    const isOnLast = page === pageCount;
-
-    let itemCount;
-    if (!isOnLast || count === page_size) {
-      itemCount = page_size;
-    } else {
-      itemCount = count % page_size;
-    }
-    const itemMin = ((page - 1) * page_size) + 1;
-    const itemMax = itemMin + itemCount - 1;
-
-    const dropdownItems = opts.map(option => (
-      <DropdownItem
-        key={option}
-        component="button"
-      >
-        {option}
-      </DropdownItem>
-    ));
-
-    return (
-      <div className="awx-pagination" style={style}>
-        {showPageSizeOptions && (
-          <div className="awx-pagination__page-size-selection">
-            {i18n._(t`Items Per Page`)}
-            <Dropdown
-              onToggle={this.onTogglePageSize}
-              onSelect={this.onSelectPageSize}
-              direction={up}
-              isOpen={isOpen}
-              toggle={(
-                <DropdownToggle
-                  className="togglePageSize"
-                  onToggle={this.onTogglePageSize}
-                >
-                  {page_size}
-                </DropdownToggle>
-              )}
-              dropdownItems={dropdownItems}
-            />
-          </div>
-        )}
-        <div className="awx-pagination__counts">
-          <div className="awx-pagination__item-count">
-            {i18n._(t`Items ${itemMin} – ${itemMax} of ${count}`)}
-          </div>
-          {pageCount !== 1 && (
-            <div className="awx-pagination__page-count">
-              <div className="pf-c-input-group pf-m-previous">
-                <Button
-                  className="awx-pagination__page-button"
-                  variant="tertiary"
-                  aria-label={i18n._(t`First`)}
-                  isDisabled={isOnFirst}
-                  onClick={this.onFirst}
-                >
-                  <i className="fas fa-angle-double-left" />
-                </Button>
-                <Button
-                  className="awx-pagination__page-button"
-                  variant="tertiary"
-                  aria-label={i18n._(t`Previous`)}
-                  isDisabled={isOnFirst}
-                  onClick={this.onPrevious}
-                >
-                  <i className="fas fa-angle-left" />
-                </Button>
-              </div>
-              <form
-                className="awx-pagination__page-input-form"
-                onSubmit={this.onSubmit}
-              >
-                {i18n._(t`Page `)}
-                <TextInput
-                  className="awx-pagination__page-input"
-                  aria-label={i18n._(t`Page Number`)}
-                  value={value}
-                  type="text"
-                  onChange={this.onPageChange}
-                />
-                {i18n._(t` of ${pageCount}`)}
-              </form>
-              <div className="pf-c-input-group">
-                <Button
-                  className="awx-pagination__page-button"
-                  variant="tertiary"
-                  aria-label={i18n._(t`Next`)}
-                  isDisabled={isOnLast}
-                  onClick={this.onNext}
-                >
-                  <i className="fas fa-angle-right" />
-                </Button>
-                <Button
-                  className="awx-pagination__page-button"
-                  variant="tertiary"
-                  aria-label={i18n._(t`Last`)}
-                  isDisabled={isOnLast}
-                  onClick={this.onLast}
-                >
-                  <i className="fas fa-angle-double-right" />
-                </Button>
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-    );
-  }
-}
-
-Pagination.propTypes = {
-  count: PropTypes.number,
-  onSetPage: PropTypes.func.isRequired,
-  page: PropTypes.number.isRequired,
-  pageCount: PropTypes.number,
-  pageSizeOptions: PropTypes.arrayOf(PropTypes.number),
-  page_size: PropTypes.number.isRequired,
-  showPageSizeOptions: PropTypes.bool
-};
-
-Pagination.defaultProps = {
-  count: null,
-  pageCount: null,
-  pageSizeOptions: [5, 10, 25, 50],
-  showPageSizeOptions: true
-};
-
-export default withI18n()(Pagination);
+export default (props) => (
+  <I18n>
+    {({ i18n }) => (
+      <AWXPagination
+        titles={{
+          items: i18n._(t`items`),
+          pages: i18n._(t`pages`),
+          itemsPerPage: i18n._(t`Items per page`),
+          perPageSuffix: i18n._(t`per page`),
+          toFirstPage: i18n._(t`Go to first page`),
+          toPreviousPage: i18n._(t`Go to previous page`),
+          toLastPage: i18n._(t`Go to last page`),
+          toNextPage: i18n._(t`Go to next page`),
+          optionsToggle: i18n._(t`Select`),
+          currPage: i18n._(t`Current page`),
+          paginationTitle: i18n._(t`Pagination`)
+        }}
+        dropDirection={DropdownDirection.up}
+        {...props}
+      />
+    )}
+  </I18n>
+);
diff --git a/src/components/Pagination/styles.scss b/src/components/Pagination/styles.scss
deleted file mode 100644
index e238b25266..0000000000
--- a/src/components/Pagination/styles.scss
+++ /dev/null
@@ -1,88 +0,0 @@
-.awx-pagination {
-  --awx-pagination--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
-  --awx-pagination--BorderColor: #dbdbdb;
-  --awx-pagination--disabled-BackgroundColor: #f2f2f2;
-  --awx-pagination--disabled-Color: #C2C2CA;
-
-  border-top: 1px solid var(--awx-pagination--BorderColor);
-  border-bottom: 1px solid var(--awx-pagination--BorderColor);
-  background-color: var(--awx-pagination--BackgroundColor);
-  height: 55px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 20px;
-  font-size: 14px;
-  font-weight: bold;
-
-  --pf-global--target-size--MinHeight: 30px;
-  --pf-global--target-size--MinWidth: 30px;
-  --pf-global--FontSize--md: 14px;
-
-  .awx-pagination__page-size-selection .pf-c-dropdown__toggle {
-    font-weight: bold;
-    margin-left: 10px;
-  }
-
-  .awx-pagination__counts {
-    display: flex;
-    align-items: center;
-    margin-right: -20px;
-  }
-
-  .awx-pagination__item-count {
-    margin-right: 20px;
-  }
-
-  .awx-pagination__page-count {
-    margin-left: -10px;
-    display: flex;
-    align-items: center;
-  }
-
-  .awx-pagination__page-input-form {
-    display: flex;
-    align-items: center;
-    margin: 0 10px;
-    white-space: nowrap;
-  }
-
-  .awx-pagination__page-input {
-    width: 35px;
-    margin: 0 10px;
-    font-weight: bold;
-  }
-
-  .awx-pagination__page-button {
-    width: 55px;
-    height: 55px;
-  }
-
-  .pf-c-input-group .awx-pagination__page-button,
-  .pf-c-input-group .awx-pagination__page-button:after {
-    border: 0;
-    border-radius: 0;
-  }
-
-  .pf-c-input-group .pf-c-button {
-    border-left: 1px solid var(--awx-pagination--BorderColor);
-  }
-  
-  .pf-c-input-group {
-    height: 56px;
-  }
-
-  .pf-c-input-group.pf-m-previous {
-    border-right: 1px solid var(--awx-pagination--BorderColor);
-  }
-
-  .pf-c-input-group .pf-c-button.pf-m-disabled {
-    border: 1px solid var(--awx-pagination--BorderColor);
-    background-color: var(--awx-pagination--disabled-BackgroundColor);
-    color: var(--awx-pagination--disabled-Color);
-  }
-
-  .pf-c-input-group.pf-m-previous .pf-c-button.pf-m-disabled {
-    border-right: 0;
-  }
-}
diff --git a/src/index.jsx b/src/index.jsx
index 4b961c6405..bf063d9b22 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -12,7 +12,6 @@ import { t } from '@lingui/macro';
 
 import '@patternfly/react-core/dist/styles/base.css';
 import './app.scss';
-import './components/Pagination/styles.scss';
 import './components/SelectedList/styles.scss';
 import './components/AddRole/styles.scss';