diff --git a/packages/react-catalog-view-extension/package.json b/packages/react-catalog-view-extension/package.json
index 792ffc4e373..8f706d745c8 100644
--- a/packages/react-catalog-view-extension/package.json
+++ b/packages/react-catalog-view-extension/package.json
@@ -35,7 +35,7 @@
     "clean": "rimraf dist"
   },
   "dependencies": {
-    "@patternfly/patternfly": "4.10.20",
+    "@patternfly/patternfly": "4.10.21",
     "@patternfly/react-core": "^4.13.1",
     "@patternfly/react-styles": "^4.2.8",
     "classnames": "^2.2.5",
diff --git a/packages/react-charts/package.json b/packages/react-charts/package.json
index 1453ec6d808..3164497a5a5 100644
--- a/packages/react-charts/package.json
+++ b/packages/react-charts/package.json
@@ -29,7 +29,7 @@
   },
   "homepage": "https://github.com/patternfly/patternfly-react#readme",
   "dependencies": {
-    "@patternfly/patternfly": "4.10.20",
+    "@patternfly/patternfly": "4.10.21",
     "@patternfly/react-styles": "^4.2.8",
     "@patternfly/react-tokens": "^4.3.6",
     "hoist-non-react-statics": "^3.3.0",
diff --git a/packages/react-core/package.json b/packages/react-core/package.json
index c3c258f67fd..999aa614642 100644
--- a/packages/react-core/package.json
+++ b/packages/react-core/package.json
@@ -44,7 +44,7 @@
     "tslib": "^1.11.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.10.20",
+    "@patternfly/patternfly": "4.10.21",
     "@rollup/plugin-commonjs": "^11.0.2",
     "@rollup/plugin-node-resolve": "^7.1.1",
     "@rollup/plugin-replace": "^2.3.1",
diff --git a/packages/react-core/src/components/Page/PageHeader.tsx b/packages/react-core/src/components/Page/PageHeader.tsx
index de984b83152..827f1b648f4 100644
--- a/packages/react-core/src/components/Page/PageHeader.tsx
+++ b/packages/react-core/src/components/Page/PageHeader.tsx
@@ -8,17 +8,15 @@ import { PageContextConsumer } from './Page';
 export interface PageHeaderProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the page header */
   className?: string;
-  /** Component to render the logo/brand (e.g. <Brand />) */
+  /** Component to render the logo/brand, use <Brand /> */
   logo?: React.ReactNode;
   /** Additional props passed to the logo anchor container */
   logoProps?: object;
   /** Component to use to wrap the passed <logo> */
   logoComponent?: React.ReactNode;
-  /** Component to render the toolbar (e.g. <Toolbar />) */
-  toolbar?: React.ReactNode;
-  /** Component to render the avatar (e.g. <Avatar /> */
-  avatar?: React.ReactNode;
-  /** Component to render navigation within the header (e.g. <Nav /> */
+  /** Component to render the header tools, use <PageHeaderTools />  */
+  headerTools?: React.ReactNode;
+  /** Component to render navigation within the header, use <Nav /> */
   topNav?: React.ReactNode;
   /** True to show the nav toggle button (toggles side nav) */
   showNavToggle?: boolean;
@@ -42,8 +40,7 @@ export const PageHeader: React.FunctionComponent<PageHeaderProps> = ({
   logo = null as React.ReactNode,
   logoProps = null as object,
   logoComponent = 'a',
-  toolbar = null as React.ReactNode,
-  avatar = null as React.ReactNode,
+  headerTools = null as React.ReactNode,
   topNav = null as React.ReactNode,
   isNavOpen = true,
   role = undefined as string,
@@ -89,12 +86,7 @@ export const PageHeader: React.FunctionComponent<PageHeaderProps> = ({
             pf-c-context-selector
           </div> */}
             {topNav && <div className={css(styles.pageHeaderNav)}>{topNav}</div>}
-            {(toolbar || avatar) && (
-              <div className={css(styles.pageHeaderTools)}>
-                {toolbar}
-                {avatar}
-              </div>
-            )}
+            {headerTools}
           </header>
         );
       }}
diff --git a/packages/react-core/src/components/Page/PageHeaderTools.tsx b/packages/react-core/src/components/Page/PageHeaderTools.tsx
new file mode 100644
index 00000000000..ef94fb0cb02
--- /dev/null
+++ b/packages/react-core/src/components/Page/PageHeaderTools.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Page/page';
+import { css } from '@patternfly/react-styles';
+
+export interface PageHeaderToolsBreakpointMod {
+  /** The attribute to modify  */
+  modifier: 'hidden' | 'visible';
+  /** The breakpoint at which to apply the modifier */
+  breakpoint?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+}
+
+export interface PageHeaderToolsProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content rendered in page header tools */
+  children: React.ReactNode;
+  /** Additional classes added to the page header tools. */
+  className?: string;
+}
+
+export const PageHeaderTools: React.FunctionComponent<PageHeaderToolsProps> = ({
+  children,
+  className,
+  ...props
+}: PageHeaderToolsProps) => (
+  <div className={css(styles.pageHeaderTools, className)} {...props}>
+    {children}
+  </div>
+);
diff --git a/packages/react-core/src/components/Page/PageHeaderToolsGroup.tsx b/packages/react-core/src/components/Page/PageHeaderToolsGroup.tsx
new file mode 100644
index 00000000000..9f60e2e07b5
--- /dev/null
+++ b/packages/react-core/src/components/Page/PageHeaderToolsGroup.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Page/page';
+import { css } from '@patternfly/react-styles';
+import { PageHeaderToolsBreakpointMod } from './PageHeaderTools';
+import { formatBreakpointMods } from '../../helpers/util';
+
+export interface PageHeaderToolsGroupProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content rendered in the page header tools group */
+  children: React.ReactNode;
+  /** Additional classes added to the page header tools group. */
+  className?: string;
+  /** An array of breakpoint modifiers to control visibility, e.g. breakpointMods={[{ modifier: 'hidden' }, { modifier: 'visible', breakpoint: 'md' }]} */
+  breakpointMods?: PageHeaderToolsBreakpointMod[];
+}
+
+export const PageHeaderToolsGroup: React.FunctionComponent<PageHeaderToolsGroupProps> = ({
+  children,
+  className,
+  breakpointMods,
+  ...props
+}: PageHeaderToolsGroupProps) => (
+  <div
+    className={css(
+      styles.pageHeaderToolsGroup,
+      breakpointMods && formatBreakpointMods(breakpointMods, styles),
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+);
diff --git a/packages/react-core/src/components/Page/PageHeaderToolsItem.tsx b/packages/react-core/src/components/Page/PageHeaderToolsItem.tsx
new file mode 100644
index 00000000000..e6fdaff4e2e
--- /dev/null
+++ b/packages/react-core/src/components/Page/PageHeaderToolsItem.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Page/page';
+import { css } from '@patternfly/react-styles';
+import { PageHeaderToolsBreakpointMod } from './PageHeaderTools';
+import { formatBreakpointMods } from '../../helpers/util';
+
+export interface PageHeaderToolsItemProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content rendered in page header tools item. */
+  children: React.ReactNode;
+  /** Additional classes added to the page header tools item. */
+  className?: string;
+  /** An array of breakpoint modifiers to control visibility, e.g. breakpointMods={[{ modifier: 'hidden' }, { modifier: 'visible', breakpoint: 'md' }]} */
+  breakpointMods?: PageHeaderToolsBreakpointMod[];
+  /** True to make an icon button appear selected */
+  isSelected?: boolean;
+}
+
+export const PageHeaderToolsItem: React.FunctionComponent<PageHeaderToolsItemProps> = ({
+  children,
+  className,
+  breakpointMods,
+  isSelected
+}: PageHeaderToolsItemProps) => (
+  <div
+    className={css(
+      styles.pageHeaderToolsItem,
+      isSelected && styles.modifiers.selected,
+      breakpointMods && formatBreakpointMods(breakpointMods, styles),
+      className
+    )}
+  >
+    {children}
+  </div>
+);
diff --git a/packages/react-core/src/components/Page/__tests__/Generated/PageHeader.test.tsx b/packages/react-core/src/components/Page/__tests__/Generated/PageHeader.test.tsx
index 365dc7cea63..26839cf7071 100644
--- a/packages/react-core/src/components/Page/__tests__/Generated/PageHeader.test.tsx
+++ b/packages/react-core/src/components/Page/__tests__/Generated/PageHeader.test.tsx
@@ -14,8 +14,7 @@ it('PageHeader should match snapshot (auto-generated)', () => {
       logo={null}
       logoProps={null}
       logoComponent={'a'}
-      toolbar={null}
-      avatar={null}
+      headerTools={null}
       topNav={null}
       showNavToggle={false}
       isNavOpen={true}
diff --git a/packages/react-core/src/components/Page/__tests__/Generated/PageHeaderTools.test.tsx b/packages/react-core/src/components/Page/__tests__/Generated/PageHeaderTools.test.tsx
new file mode 100644
index 00000000000..e4b8867551b
--- /dev/null
+++ b/packages/react-core/src/components/Page/__tests__/Generated/PageHeaderTools.test.tsx
@@ -0,0 +1,13 @@
+/**
+ * This test was generated
+ */
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import { PageHeaderTools } from '../../PageHeaderTools';
+// any missing imports can usually be resolved by adding them here
+import {} from '../..';
+
+it('PageHeaderTools should match snapshot (auto-generated)', () => {
+  const view = shallow(<PageHeaderTools children={<div>ReactNode</div>} className={'string'} />);
+  expect(view).toMatchSnapshot();
+});
diff --git a/packages/react-core/src/components/Page/__tests__/Generated/PageHeaderToolsGroup.test.tsx b/packages/react-core/src/components/Page/__tests__/Generated/PageHeaderToolsGroup.test.tsx
new file mode 100644
index 00000000000..22af02bb57f
--- /dev/null
+++ b/packages/react-core/src/components/Page/__tests__/Generated/PageHeaderToolsGroup.test.tsx
@@ -0,0 +1,15 @@
+/**
+ * This test was generated
+ */
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import { PageHeaderToolsGroup } from '../../PageHeaderToolsGroup';
+// any missing imports can usually be resolved by adding them here
+import {} from '../..';
+
+it('PageHeaderToolsGroup should match snapshot (auto-generated)', () => {
+  const view = shallow(
+    <PageHeaderToolsGroup children={<div>ReactNode</div>} className={'string'} breakpointMods={[]} />
+  );
+  expect(view).toMatchSnapshot();
+});
diff --git a/packages/react-core/src/components/Page/__tests__/Generated/PageHeaderToolsItem.test.tsx b/packages/react-core/src/components/Page/__tests__/Generated/PageHeaderToolsItem.test.tsx
new file mode 100644
index 00000000000..c7600c70774
--- /dev/null
+++ b/packages/react-core/src/components/Page/__tests__/Generated/PageHeaderToolsItem.test.tsx
@@ -0,0 +1,15 @@
+/**
+ * This test was generated
+ */
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import { PageHeaderToolsItem } from '../../PageHeaderToolsItem';
+// any missing imports can usually be resolved by adding them here
+import {} from '../..';
+
+it('PageHeaderToolsItem should match snapshot (auto-generated)', () => {
+  const view = shallow(
+    <PageHeaderToolsItem children={<div>ReactNode</div>} className={'string'} breakpointMods={[]} isSelected={true} />
+  );
+  expect(view).toMatchSnapshot();
+});
diff --git a/packages/react-core/src/components/Page/__tests__/Generated/PageSection.test.tsx b/packages/react-core/src/components/Page/__tests__/Generated/PageSection.test.tsx
index 8732336127f..e983cf9861a 100644
--- a/packages/react-core/src/components/Page/__tests__/Generated/PageSection.test.tsx
+++ b/packages/react-core/src/components/Page/__tests__/Generated/PageSection.test.tsx
@@ -16,6 +16,7 @@ it('PageSection should match snapshot (auto-generated)', () => {
       type={'default'}
       isFilled={true}
       hasNoPadding={false}
+      breakpointMods={[]}
     />
   );
   expect(view).toMatchSnapshot();
diff --git a/packages/react-core/src/components/Page/__tests__/Generated/PageSidebar.test.tsx b/packages/react-core/src/components/Page/__tests__/Generated/PageSidebar.test.tsx
index 87237f4b91f..55bf90cee98 100644
--- a/packages/react-core/src/components/Page/__tests__/Generated/PageSidebar.test.tsx
+++ b/packages/react-core/src/components/Page/__tests__/Generated/PageSidebar.test.tsx
@@ -9,7 +9,7 @@ import {} from '../..';
 
 it('PageSidebar should match snapshot (auto-generated)', () => {
   const view = shallow(
-    <PageSidebar className={"''"} nav={<div>ReactNode</div>} isManagedSidebar={true} isNavOpen={true} theme={'light'} />
+    <PageSidebar className={"''"} nav={<div>ReactNode</div>} isManagedSidebar={true} isNavOpen={true} theme={'dark'} />
   );
   expect(view).toMatchSnapshot();
 });
diff --git a/packages/react-core/src/components/Page/__tests__/Generated/__snapshots__/PageHeaderTools.test.tsx.snap b/packages/react-core/src/components/Page/__tests__/Generated/__snapshots__/PageHeaderTools.test.tsx.snap
new file mode 100644
index 00000000000..be35f356532
--- /dev/null
+++ b/packages/react-core/src/components/Page/__tests__/Generated/__snapshots__/PageHeaderTools.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PageHeaderTools should match snapshot (auto-generated) 1`] = `
+<div
+  className="pf-c-page__header-tools string"
+>
+  <div>
+    ReactNode
+  </div>
+</div>
+`;
diff --git a/packages/react-core/src/components/Page/__tests__/Generated/__snapshots__/PageHeaderToolsGroup.test.tsx.snap b/packages/react-core/src/components/Page/__tests__/Generated/__snapshots__/PageHeaderToolsGroup.test.tsx.snap
new file mode 100644
index 00000000000..f176efea8ae
--- /dev/null
+++ b/packages/react-core/src/components/Page/__tests__/Generated/__snapshots__/PageHeaderToolsGroup.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PageHeaderToolsGroup should match snapshot (auto-generated) 1`] = `
+<div
+  className="pf-c-page__header-tools-group string"
+>
+  <div>
+    ReactNode
+  </div>
+</div>
+`;
diff --git a/packages/react-core/src/components/Page/__tests__/Generated/__snapshots__/PageHeaderToolsItem.test.tsx.snap b/packages/react-core/src/components/Page/__tests__/Generated/__snapshots__/PageHeaderToolsItem.test.tsx.snap
new file mode 100644
index 00000000000..5389fc6ce28
--- /dev/null
+++ b/packages/react-core/src/components/Page/__tests__/Generated/__snapshots__/PageHeaderToolsItem.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PageHeaderToolsItem should match snapshot (auto-generated) 1`] = `
+<div
+  className="pf-c-page__header-tools-item pf-m-selected string"
+>
+  <div>
+    ReactNode
+  </div>
+</div>
+`;
diff --git a/packages/react-core/src/components/Page/__tests__/Page.test.tsx b/packages/react-core/src/components/Page/__tests__/Page.test.tsx
index c4dcfd881f7..a801d50a312 100644
--- a/packages/react-core/src/components/Page/__tests__/Page.test.tsx
+++ b/packages/react-core/src/components/Page/__tests__/Page.test.tsx
@@ -14,7 +14,7 @@ const props = {
 };
 
 test('Check page vertical layout example against snapshot', () => {
-  const Header = <PageHeader logo="Logo" toolbar="Toolbar" avatar=" | Avatar" onNavToggle={() => undefined} />;
+  const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" onNavToggle={() => undefined} />;
   const Sidebar = <PageSidebar nav="Navigation" isNavOpen />;
   const view = mount(
     <Page {...props} header={Header} sidebar={Sidebar}>
@@ -28,7 +28,7 @@ test('Check page vertical layout example against snapshot', () => {
 });
 
 test('Check dark page against snapshot', () => {
-  const Header = <PageHeader logo="Logo" toolbar="Toolbar" avatar=" | Avatar" onNavToggle={() => undefined} />;
+  const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" onNavToggle={() => undefined} />;
   const Sidebar = <PageSidebar nav="Navigation" isNavOpen theme="dark" />;
   const view = mount(
     <Page {...props} header={Header} sidebar={Sidebar}>
@@ -42,7 +42,7 @@ test('Check dark page against snapshot', () => {
 });
 
 test('Check page horizontal layout example against snapshot', () => {
-  const Header = <PageHeader logo="Logo" toolbar="Toolbar" avatar=" | Avatar" topNav="Navigation" />;
+  const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
   const Sidebar = <PageSidebar isNavOpen />;
   const view = mount(
     <Page {...props} header={Header} sidebar={Sidebar}>
@@ -56,7 +56,7 @@ test('Check page horizontal layout example against snapshot', () => {
 });
 
 test('Check page to verify breadcrumb is created', () => {
-  const Header = <PageHeader logo="Logo" toolbar="Toolbar" avatar=" | Avatar" topNav="Navigation" />;
+  const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
   const Sidebar = <PageSidebar isNavOpen />;
   const PageBreadcrumb = () => (
     <Breadcrumb>
@@ -81,7 +81,7 @@ test('Check page to verify breadcrumb is created', () => {
 });
 
 test('Check page to verify skip to content points to main content region', () => {
-  const Header = <PageHeader logo="Logo" toolbar="Toolbar" avatar=" | Avatar" topNav="Navigation" />;
+  const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
   const Sidebar = <PageSidebar isNavOpen />;
   const PageBreadcrumb = (
     <Breadcrumb>
diff --git a/packages/react-core/src/components/Page/__tests__/PageHeader.test.tsx b/packages/react-core/src/components/Page/__tests__/PageHeader.test.tsx
index d05f3b965bb..ddd62e04842 100644
--- a/packages/react-core/src/components/Page/__tests__/PageHeader.test.tsx
+++ b/packages/react-core/src/components/Page/__tests__/PageHeader.test.tsx
@@ -5,7 +5,7 @@ import { PageHeader } from '../PageHeader';
 jest.mock('../Page');
 
 test('Check page vertical layout example against snapshot', () => {
-  const Header = <PageHeader logo="Logo" toolbar="Toolbar" avatar=" | Avatar" onNavToggle={() => undefined} />;
+  const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" onNavToggle={() => undefined} />;
   const view = mount(Header);
   expect(view).toMatchSnapshot();
 });
diff --git a/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap b/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap
index 36ccfb5cfbe..d8d9a3dda8a 100644
--- a/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap
+++ b/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap
@@ -8,10 +8,9 @@ exports[`Check dark page against snapshot 1`] = `
   defaultManagedSidebarIsOpen={true}
   header={
     <PageHeader
-      avatar=" | Avatar"
+      headerTools="PageHeaderTools | Avatar"
       logo="Logo"
       onNavToggle={[Function]}
-      toolbar="Toolbar"
     />
   }
   id="PageId"
@@ -33,10 +32,9 @@ exports[`Check dark page against snapshot 1`] = `
     id="PageId"
   >
     <PageHeader
-      avatar=" | Avatar"
+      headerTools="PageHeaderTools | Avatar"
       logo="Logo"
       onNavToggle={[Function]}
-      toolbar="Toolbar"
     >
       <header
         className="pf-c-page__header"
@@ -50,12 +48,7 @@ exports[`Check dark page against snapshot 1`] = `
             Logo
           </a>
         </div>
-        <div
-          className="pf-c-page__header-tools"
-        >
-          Toolbar
-           | Avatar
-        </div>
+        PageHeaderTools | Avatar
       </header>
     </PageHeader>
     <PageSidebar
@@ -128,9 +121,8 @@ exports[`Check page horizontal layout example against snapshot 1`] = `
   defaultManagedSidebarIsOpen={true}
   header={
     <PageHeader
-      avatar=" | Avatar"
+      headerTools="PageHeaderTools | Avatar"
       logo="Logo"
-      toolbar="Toolbar"
       topNav="Navigation"
     />
   }
@@ -151,9 +143,8 @@ exports[`Check page horizontal layout example against snapshot 1`] = `
     id="PageId"
   >
     <PageHeader
-      avatar=" | Avatar"
+      headerTools="PageHeaderTools | Avatar"
       logo="Logo"
-      toolbar="Toolbar"
       topNav="Navigation"
     >
       <header
@@ -173,12 +164,7 @@ exports[`Check page horizontal layout example against snapshot 1`] = `
         >
           Navigation
         </div>
-        <div
-          className="pf-c-page__header-tools"
-        >
-          Toolbar
-           | Avatar
-        </div>
+        PageHeaderTools | Avatar
       </header>
     </PageHeader>
     <PageSidebar
@@ -247,9 +233,8 @@ exports[`Check page to verify breadcrumb is created 1`] = `
   defaultManagedSidebarIsOpen={true}
   header={
     <PageHeader
-      avatar=" | Avatar"
+      headerTools="PageHeaderTools | Avatar"
       logo="Logo"
-      toolbar="Toolbar"
       topNav="Navigation"
     />
   }
@@ -270,9 +255,8 @@ exports[`Check page to verify breadcrumb is created 1`] = `
     id="PageId"
   >
     <PageHeader
-      avatar=" | Avatar"
+      headerTools="PageHeaderTools | Avatar"
       logo="Logo"
-      toolbar="Toolbar"
       topNav="Navigation"
     >
       <header
@@ -292,12 +276,7 @@ exports[`Check page to verify breadcrumb is created 1`] = `
         >
           Navigation
         </div>
-        <div
-          className="pf-c-page__header-tools"
-        >
-          Toolbar
-           | Avatar
-        </div>
+        PageHeaderTools | Avatar
       </header>
     </PageHeader>
     <PageSidebar
@@ -549,9 +528,8 @@ exports[`Check page to verify skip to content points to main content region 1`]
   defaultManagedSidebarIsOpen={true}
   header={
     <PageHeader
-      avatar=" | Avatar"
+      headerTools="PageHeaderTools | Avatar"
       logo="Logo"
-      toolbar="Toolbar"
       topNav="Navigation"
     />
   }
@@ -590,9 +568,8 @@ exports[`Check page to verify skip to content points to main content region 1`]
       </a>
     </SkipToContent>
     <PageHeader
-      avatar=" | Avatar"
+      headerTools="PageHeaderTools | Avatar"
       logo="Logo"
-      toolbar="Toolbar"
       topNav="Navigation"
     >
       <header
@@ -612,12 +589,7 @@ exports[`Check page to verify skip to content points to main content region 1`]
         >
           Navigation
         </div>
-        <div
-          className="pf-c-page__header-tools"
-        >
-          Toolbar
-           | Avatar
-        </div>
+        PageHeaderTools | Avatar
       </header>
     </PageHeader>
     <PageSidebar
@@ -845,10 +817,9 @@ exports[`Check page vertical layout example against snapshot 1`] = `
   defaultManagedSidebarIsOpen={true}
   header={
     <PageHeader
-      avatar=" | Avatar"
+      headerTools="PageHeaderTools | Avatar"
       logo="Logo"
       onNavToggle={[Function]}
-      toolbar="Toolbar"
     />
   }
   id="PageId"
@@ -869,10 +840,9 @@ exports[`Check page vertical layout example against snapshot 1`] = `
     id="PageId"
   >
     <PageHeader
-      avatar=" | Avatar"
+      headerTools="PageHeaderTools | Avatar"
       logo="Logo"
       onNavToggle={[Function]}
-      toolbar="Toolbar"
     >
       <header
         className="pf-c-page__header"
@@ -886,12 +856,7 @@ exports[`Check page vertical layout example against snapshot 1`] = `
             Logo
           </a>
         </div>
-        <div
-          className="pf-c-page__header-tools"
-        >
-          Toolbar
-           | Avatar
-        </div>
+        PageHeaderTools | Avatar
       </header>
     </PageHeader>
     <PageSidebar
diff --git a/packages/react-core/src/components/Page/__tests__/__snapshots__/PageHeader.test.tsx.snap b/packages/react-core/src/components/Page/__tests__/__snapshots__/PageHeader.test.tsx.snap
index 89c43bc8ae8..7405c40e6ae 100644
--- a/packages/react-core/src/components/Page/__tests__/__snapshots__/PageHeader.test.tsx.snap
+++ b/packages/react-core/src/components/Page/__tests__/__snapshots__/PageHeader.test.tsx.snap
@@ -2,10 +2,9 @@
 
 exports[`Check page vertical layout example against snapshot 1`] = `
 <PageHeader
-  avatar=" | Avatar"
+  headerTools="PageHeaderTools | Avatar"
   logo="Logo"
   onNavToggle={[Function]}
-  toolbar="Toolbar"
 >
   <header
     className="pf-c-page__header"
@@ -19,12 +18,7 @@ exports[`Check page vertical layout example against snapshot 1`] = `
         Logo
       </a>
     </div>
-    <div
-      className="pf-c-page__header-tools"
-    >
-      Toolbar
-       | Avatar
-    </div>
+    PageHeaderTools | Avatar
   </header>
 </PageHeader>
 `;
diff --git a/packages/react-core/src/components/Page/examples/Page.md b/packages/react-core/src/components/Page/examples/Page.md
index 0379de570ce..835bd3731fc 100644
--- a/packages/react-core/src/components/Page/examples/Page.md
+++ b/packages/react-core/src/components/Page/examples/Page.md
@@ -3,10 +3,10 @@ title: 'Page'
 section: components
 cssPrefix: 'pf-c-page'
 typescript: true
-propComponents: ['Page', 'PageHeader', 'PageSidebar', 'PageSection']
+propComponents: ['Page', 'PageHeader', 'PageHeaderTools', 'PageHeaderToolsGroup', 'PageHeaderToolsItem', 'PageSidebar', 'PageSection']
 ---
 
-import { Page, PageHeader, PageSidebar, PageSection, PageSectionVariants, PageSectionBreakpoints } from '@patternfly/react-core';
+import { Page, PageHeader, PageHeaderTools, PageSidebar, PageSection, PageSectionVariants, PageSectionBreakpoints } from '@patternfly/react-core';
 
 ## Examples
 
@@ -15,6 +15,7 @@ import React from 'react';
 import {
   Page,
   PageHeader,
+  PageHeaderTools,
   PageSidebar,
   PageSection,
   PageSectionVariants,
@@ -46,8 +47,7 @@ class VerticalPage extends React.Component {
       <PageHeader
         logo="Logo"
         logoProps={logoProps}
-        toolbar="Toolbar"
-        avatar=" | Avatar"
+        headerTools={<PageHeaderTools>header-tools</PageHeaderTools>}
         showNavToggle
         isNavOpen={isNavOpen}
         onNavToggle={this.onNavToggle}
@@ -68,7 +68,14 @@ class VerticalPage extends React.Component {
 
 ```js title=Horizontal-nav
 import React from 'react';
-import { Page, PageHeader, PageSidebar, PageSection, PageSectionVariants } from '@patternfly/react-core';
+import {
+  Page,
+  PageHeader,
+  PageHeaderTools,
+  PageSidebar,
+  PageSection,
+  PageSectionVariants
+} from '@patternfly/react-core';
 
 HorizontalPage = () => {
   const logoProps = {
@@ -77,7 +84,12 @@ HorizontalPage = () => {
     target: '_blank'
   };
   const Header = (
-    <PageHeader logo="Logo" logoProps={logoProps} toolbar="Toolbar" avatar=" | Avatar" topNav="Navigation" />
+    <PageHeader
+      logo="Logo"
+      logoProps={logoProps}
+      headerTools={<PageHeaderTools>header-tools</PageHeaderTools>}
+      topNav="Navigation"
+    />
   );
 
   return (
@@ -92,7 +104,14 @@ HorizontalPage = () => {
 
 ```js title=Main-Section-Padding
 import React from 'react';
-import { Page, PageHeader, PageSidebar, PageSection, PageSectionVariants } from '@patternfly/react-core';
+import {
+  Page,
+  PageHeader,
+  PageHeaderTools,
+  PageSidebar,
+  PageSection,
+  PageSectionVariants
+} from '@patternfly/react-core';
 
 class VerticalPage extends React.Component {
   constructor(props) {
@@ -119,8 +138,7 @@ class VerticalPage extends React.Component {
       <PageHeader
         logo="Logo"
         logoProps={logoProps}
-        toolbar="Toolbar"
-        avatar=" | Avatar"
+        headerTools={<PageHeaderTools>header-tools</PageHeaderTools>}
         showNavToggle
         isNavOpen={isNavOpen}
         onNavToggle={this.onNavToggle}
@@ -154,7 +172,14 @@ class VerticalPage extends React.Component {
 
 ```js title=With-or-without-fill
 import React from 'react';
-import { Page, PageHeader, PageSidebar, PageSection, PageSectionVariants } from '@patternfly/react-core';
+import {
+  Page,
+  PageHeader,
+  PageHeaderTools,
+  PageSidebar,
+  PageSection,
+  PageSectionVariants
+} from '@patternfly/react-core';
 
 class FillPage extends React.Component {
   constructor(props) {
@@ -181,8 +206,7 @@ class FillPage extends React.Component {
       <PageHeader
         logo="Logo"
         logoProps={logoProps}
-        toolbar="Toolbar"
-        avatar=" | Avatar"
+        headerTools={<PageHeaderTools>header-tools</PageHeaderTools>}
         showNavToggle
         isNavOpen={isNavOpen}
         onNavToggle={this.onNavToggle}
diff --git a/packages/react-core/src/components/Page/index.ts b/packages/react-core/src/components/Page/index.ts
index 6031ed5e584..ffe8df03bde 100644
--- a/packages/react-core/src/components/Page/index.ts
+++ b/packages/react-core/src/components/Page/index.ts
@@ -2,3 +2,6 @@ export * from './Page';
 export * from './PageHeader';
 export * from './PageSidebar';
 export * from './PageSection';
+export * from './PageHeaderTools';
+export * from './PageHeaderToolsGroup';
+export * from './PageHeaderToolsItem';
diff --git a/packages/react-core/src/demos/CardView/examples/CardView.md b/packages/react-core/src/demos/CardView/examples/CardView.md
index 09f3999c6f4..0f2e304c0f1 100644
--- a/packages/react-core/src/demos/CardView/examples/CardView.md
+++ b/packages/react-core/src/demos/CardView/examples/CardView.md
@@ -30,6 +30,7 @@ import {
   NavList,
   Page,
   PageHeader,
+  PageHeaderTools,
   PageSection,
   PageSectionVariants,
   PageSidebar,
@@ -42,8 +43,6 @@ import {
   ToolbarFilter,
   ToolbarContent
 } from '@patternfly/react-core';
-import accessibleStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
-import spacingStyles from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 import { css } from '@patternfly/react-styles';
 import { BellIcon, CogIcon, FilterIcon, TrashIcon } from '@patternfly/react-icons';
 import imgBrand from '@patternfly/react-core/src/demos/PageLayout/examples/imgBrand.svg';
@@ -91,6 +90,7 @@ import {
   NavList,
   Page,
   PageHeader,
+  PageHeaderTools,
   PageSection,
   PageSectionVariants,
   PageSidebar,
@@ -106,9 +106,6 @@ import {
   ToolbarFilter,
   ToolbarContent
 } from '@patternfly/react-core';
-// make sure you've installed @patternfly/patternfly
-import accessibleStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
-import spacingStyles from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 import { css } from '@patternfly/react-styles';
 import { BellIcon, CogIcon, FilterIcon, TrashIcon } from '@patternfly/react-icons';
 import imgBrand from '@patternfly/react-core/src/demos/PageLayout/examples/imgBrand.svg';
@@ -619,50 +616,14 @@ class CardViewBasic extends React.Component {
       <DropdownItem component="button">Separated Action</DropdownItem>
     ];
 
-    const PageToolbar = (
-      <Toolbar>
-        <ToolbarGroup className={css(accessibleStyles.screenReader, accessibleStyles.visibleOnLg)}>
-          <ToolbarItem>
-            <Button id="default-example-uid-01" aria-label="Notifications actions" variant={ButtonVariant.plain}>
-              <BellIcon />
-            </Button>
-          </ToolbarItem>
-          <ToolbarItem>
-            <Button id="default-example-uid-02" aria-label="Settings actions" variant={ButtonVariant.plain}>
-              <CogIcon />
-            </Button>
-          </ToolbarItem>
-        </ToolbarGroup>
-        <ToolbarGroup>
-          <ToolbarItem className={css(accessibleStyles.hiddenOnLg, spacingStyles.mr_0)}>
-            <Dropdown
-              isPlain
-              position="right"
-              onSelect={this.onKebabDropdownSelect}
-              toggle={<KebabToggle onToggle={this.onPageToolbarKebabDropdownToggle} />}
-              isOpen={isUpperToolbarKebabDropdownOpen}
-              dropdownItems={toolbarKebabDropdownItems}
-            />
-          </ToolbarItem>
-          <ToolbarItem className={css(accessibleStyles.screenReader, accessibleStyles.visibleOnMd)}>
-            <Dropdown
-              isPlain
-              position="right"
-              onSelect={this.onPageDropdownSelect}
-              isOpen={isUpperToolbarDropdownOpen}
-              toggle={<DropdownToggle onToggle={this.onPageDropdownToggle}>Kyle Baker</DropdownToggle>}
-              dropdownItems={userDropdownItems}
-            />
-          </ToolbarItem>
-        </ToolbarGroup>
-      </Toolbar>
-    );
-
     const Header = (
       <PageHeader
         logo={<Brand src={imgBrand} alt="Patternfly Logo" />}
-        toolbar={PageToolbar}
-        avatar={<Avatar src={imgAvatar} alt="Avatar image" />}
+        headerTools={
+          <PageHeaderTools>
+            <Avatar src={imgAvatar} alt="Avatar image" />
+          </PageHeaderTools>
+        }
         showNavToggle
       />
     );
diff --git a/packages/react-core/src/demos/PageLayout/examples/PageLayout.md b/packages/react-core/src/demos/PageLayout/examples/PageLayout.md
index 113533fdd85..cb16a910e0f 100644
--- a/packages/react-core/src/demos/PageLayout/examples/PageLayout.md
+++ b/packages/react-core/src/demos/PageLayout/examples/PageLayout.md
@@ -12,6 +12,7 @@ import {
   Card,
   CardBody,
   Dropdown,
+  DropdownGroup,
   DropdownToggle,
   DropdownItem,
   DropdownSeparator,
@@ -29,15 +30,12 @@ import {
   SkipToContent,
   TextContent,
   Text,
-  Toolbar,
-  ToolbarGroup,
-  ToolbarItem
+  PageHeaderTools,
+  PageHeaderToolsGroup,
+  PageHeaderToolsItem
 } from '@patternfly/react-core';
-// make sure you've installed @patternfly/patternfly
-import accessibleStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
-import spacingStyles from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 import { css } from '@patternfly/react-styles';
-import { BellIcon, CogIcon } from '@patternfly/react-icons';
+import { BellIcon, CogIcon, HelpIcon } from '@patternfly/react-icons';
 import imgBrand from './imgBrand.svg';
 import imgAvatar from './imgAvatar.svg';
 
@@ -61,9 +59,10 @@ import {
   BreadcrumbItem,
   Button,
   ButtonVariant,
-  Dropdown,
   Card,
   CardBody,
+  Dropdown,
+  DropdownGroup,
   DropdownToggle,
   DropdownItem,
   DropdownSeparator,
@@ -81,15 +80,12 @@ import {
   SkipToContent,
   TextContent,
   Text,
-  Toolbar,
-  ToolbarGroup,
-  ToolbarItem
+  PageHeaderTools,
+  PageHeaderToolsGroup,
+  PageHeaderToolsItem
 } from '@patternfly/react-core';
-// make sure you've installed @patternfly/patternfly
-import accessibleStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
-import spacingStyles from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 import { css } from '@patternfly/react-styles';
-import { BellIcon, CogIcon } from '@patternfly/react-icons';
+import { BellIcon, CogIcon, HelpIcon } from '@patternfly/react-icons';
 import imgBrand from './imgBrand.svg';
 import imgAvatar from './imgAvatar.svg';
 
@@ -158,39 +154,37 @@ class PageLayoutDefaultNav extends React.Component {
     );
     const kebabDropdownItems = [
       <DropdownItem>
-        <BellIcon /> Notifications
+        <CogIcon /> Settings
       </DropdownItem>,
       <DropdownItem>
-        <CogIcon /> Settings
+        <HelpIcon /> Help
       </DropdownItem>
     ];
     const userDropdownItems = [
-      <DropdownItem>Link</DropdownItem>,
-      <DropdownItem component="button">Action</DropdownItem>,
-      <DropdownItem isDisabled>Disabled link</DropdownItem>,
-      <DropdownItem isDisabled component="button">
-        Disabled action
-      </DropdownItem>,
-      <DropdownSeparator />,
-      <DropdownItem>Separated link</DropdownItem>,
-      <DropdownItem component="button">Separated action</DropdownItem>
+      <DropdownGroup key="group 2">
+        <DropdownItem key="group 2 profile">My profile</DropdownItem>
+        <DropdownItem key="group 2 user" component="button">
+          User management
+        </DropdownItem>
+        <DropdownItem key="group 2 logout">Logout</DropdownItem>
+      </DropdownGroup>
     ];
-    const PageToolbar = (
-      <Toolbar>
-        <ToolbarGroup className={css(accessibleStyles.screenReader, accessibleStyles.visibleOnLg)}>
-          <ToolbarItem>
-            <Button id="default-example-uid-01" aria-label="Notifications actions" variant={ButtonVariant.plain}>
-              <BellIcon />
-            </Button>
-          </ToolbarItem>
-          <ToolbarItem>
-            <Button id="default-example-uid-02" aria-label="Settings actions" variant={ButtonVariant.plain}>
+    const headerTools = (
+      <PageHeaderTools>
+        <PageHeaderToolsGroup breakpointMods={[{ modifier: 'hidden' }, { modifier: 'visible', breakpoint: 'lg' }]} /** the settings and help icon buttons are only visible on desktop sizes and replaced by a kebab dropdown for other sizes */>
+          <PageHeaderToolsItem>
+            <Button aria-label="Settings actions" variant={ButtonVariant.plain}>
               <CogIcon />
             </Button>
-          </ToolbarItem>
-        </ToolbarGroup>
-        <ToolbarGroup>
-          <ToolbarItem className={css(accessibleStyles.hiddenOnLg, spacingStyles.mr_0)}>
+          </PageHeaderToolsItem>
+          <PageHeaderToolsItem>
+            <Button aria-label="Help actions" variant={ButtonVariant.plain}>
+              <HelpIcon />
+            </Button>
+          </PageHeaderToolsItem>
+        </PageHeaderToolsGroup>
+        <PageHeaderToolsGroup>
+          <PageHeaderToolsItem breakpointMods={[{ modifier: 'hidden', breakpoint: 'lg' }]} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */>
             <Dropdown
               isPlain
               position="right"
@@ -199,26 +193,32 @@ class PageLayoutDefaultNav extends React.Component {
               isOpen={isKebabDropdownOpen}
               dropdownItems={kebabDropdownItems}
             />
-          </ToolbarItem>
-          <ToolbarItem className={css(accessibleStyles.screenReader, accessibleStyles.visibleOnMd)}>
+          </PageHeaderToolsItem>
+          <PageHeaderToolsItem breakpointMods={[{ modifier: 'hidden' }, { modifier: 'visible', breakpoint: 'md' }]} /** this user dropdown is hidden on mobile sizes */>
             <Dropdown
               isPlain
               position="right"
               onSelect={this.onDropdownSelect}
               isOpen={isDropdownOpen}
-              toggle={<DropdownToggle onToggle={this.onDropdownToggle}>Kyle Baker</DropdownToggle>}
+              toggle={
+                <DropdownToggle 
+                  onToggle={this.onDropdownToggle} 
+                >
+                  John Smith
+                </DropdownToggle>
+              }
               dropdownItems={userDropdownItems}
             />
-          </ToolbarItem>
-        </ToolbarGroup>
-      </Toolbar>
+          </PageHeaderToolsItem>
+        </PageHeaderToolsGroup>
+        <Avatar src={imgAvatar} alt="Avatar image" />
+      </PageHeaderTools>
     );
 
     const Header = (
       <PageHeader
         logo={<Brand src={imgBrand} alt="Patternfly Logo" />}
-        toolbar={PageToolbar}
-        avatar={<Avatar src={imgAvatar} alt="Avatar image" />}
+        headerTools={headerTools}
         showNavToggle
       />
     );
@@ -286,6 +286,7 @@ import {
   Card,
   CardBody,
   Dropdown,
+  DropdownGroup,
   DropdownToggle,
   DropdownItem,
   DropdownSeparator,
@@ -304,15 +305,12 @@ import {
   SkipToContent,
   TextContent,
   Text,
-  Toolbar,
-  ToolbarGroup,
-  ToolbarItem
+  PageHeaderTools,
+  PageHeaderToolsGroup,
+  PageHeaderToolsItem
 } from '@patternfly/react-core';
-// make sure you've installed @patternfly/patternfly
-import accessibleStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
-import spacingStyles from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 import { css } from '@patternfly/react-styles';
-import { BellIcon, CogIcon } from '@patternfly/react-icons';
+import { BellIcon, CogIcon, HelpIcon } from '@patternfly/react-icons';
 import imgBrand from './imgBrand.svg';
 import imgAvatar from './imgAvatar.svg';
 
@@ -405,39 +403,37 @@ class PageLayoutExpandableNav extends React.Component {
     );
     const kebabDropdownItems = [
       <DropdownItem>
-        <BellIcon /> Notifications
+        <CogIcon /> Settings
       </DropdownItem>,
       <DropdownItem>
-        <CogIcon /> Settings
+        <HelpIcon /> Help
       </DropdownItem>
     ];
     const userDropdownItems = [
-      <DropdownItem>Link</DropdownItem>,
-      <DropdownItem component="button">Action</DropdownItem>,
-      <DropdownItem isDisabled>Disabled link</DropdownItem>,
-      <DropdownItem isDisabled component="button">
-        Disabled action
-      </DropdownItem>,
-      <DropdownSeparator />,
-      <DropdownItem>Separated link</DropdownItem>,
-      <DropdownItem component="button">Separated action</DropdownItem>
+      <DropdownGroup key="group 2">
+        <DropdownItem key="group 2 profile">My profile</DropdownItem>
+        <DropdownItem key="group 2 user" component="button">
+          User management
+        </DropdownItem>
+        <DropdownItem key="group 2 logout">Logout</DropdownItem>
+      </DropdownGroup>
     ];
-    const PageToolbar = (
-      <Toolbar>
-        <ToolbarGroup className={css(accessibleStyles.screenReader, accessibleStyles.visibleOnLg)}>
-          <ToolbarItem>
-            <Button id="expanded-example-uid-01" aria-label="Notifications actions" variant={ButtonVariant.plain}>
-              <BellIcon />
-            </Button>
-          </ToolbarItem>
-          <ToolbarItem>
-            <Button id="expanded-example-uid-02" aria-label="Settings actions" variant={ButtonVariant.plain}>
+    const headerTools = (
+      <PageHeaderTools>
+        <PageHeaderToolsGroup breakpointMods={[{ modifier: 'hidden' }, { modifier: 'visible', breakpoint: 'lg' }]} /** the settings and help icon buttons are only visible on desktop sizes and replaced by a kebab dropdown for other sizes */>
+          <PageHeaderToolsItem>
+            <Button aria-label="Settings actions" variant={ButtonVariant.plain}>
               <CogIcon />
             </Button>
-          </ToolbarItem>
-        </ToolbarGroup>
-        <ToolbarGroup>
-          <ToolbarItem className={css(accessibleStyles.hiddenOnLg, spacingStyles.mr_0)}>
+          </PageHeaderToolsItem>
+          <PageHeaderToolsItem>
+            <Button aria-label="Help actions" variant={ButtonVariant.plain}>
+              <HelpIcon />
+            </Button>
+          </PageHeaderToolsItem>
+        </PageHeaderToolsGroup>
+        <PageHeaderToolsGroup>
+          <PageHeaderToolsItem breakpointMods={[{ modifier: 'hidden', breakpoint: 'lg' }]} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */>
             <Dropdown
               isPlain
               position="right"
@@ -446,26 +442,26 @@ class PageLayoutExpandableNav extends React.Component {
               isOpen={isKebabDropdownOpen}
               dropdownItems={kebabDropdownItems}
             />
-          </ToolbarItem>
-          <ToolbarItem className={css(accessibleStyles.screenReader, accessibleStyles.visibleOnMd)}>
+          </PageHeaderToolsItem>
+          <PageHeaderToolsItem breakpointMods={[{ modifier: 'hidden' }, { modifier: 'visible', breakpoint: 'md' }]} /** this user dropdown is hidden on mobile sizes */>
             <Dropdown
               isPlain
               position="right"
               onSelect={this.onDropdownSelect}
               isOpen={isDropdownOpen}
-              toggle={<DropdownToggle onToggle={this.onDropdownToggle}>Kyle Baker</DropdownToggle>}
+              toggle={<DropdownToggle onToggle={this.onDropdownToggle}>John Smith</DropdownToggle>}
               dropdownItems={userDropdownItems}
             />
-          </ToolbarItem>
-        </ToolbarGroup>
-      </Toolbar>
+          </PageHeaderToolsItem>
+        </PageHeaderToolsGroup>
+        <Avatar src={imgAvatar} alt="Avatar image" />
+      </PageHeaderTools>
     );
 
     const Header = (
       <PageHeader
         logo={<Brand src={imgBrand} alt="Patternfly Logo" />}
-        toolbar={PageToolbar}
-        avatar={<Avatar src={imgAvatar} alt="Avatar image" />}
+        headerTools={headerTools}
         showNavToggle
       />
     );
@@ -528,6 +524,7 @@ import {
   Button,
   ButtonVariant,
   Dropdown,
+  DropdownGroup,
   DropdownToggle,
   DropdownItem,
   DropdownSeparator,
@@ -543,15 +540,12 @@ import {
   SkipToContent,
   TextContent,
   Text,
-  Toolbar,
-  ToolbarGroup,
-  ToolbarItem
+  PageHeaderTools,
+  PageHeaderToolsGroup,
+  PageHeaderToolsItem
 } from '@patternfly/react-core';
-// make sure you've installed @patternfly/patternfly
-import accessibleStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
-import spacingStyles from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 import { css } from '@patternfly/react-styles';
-import { BellIcon, CogIcon } from '@patternfly/react-icons';
+import { BellIcon, CogIcon, HelpIcon } from '@patternfly/react-icons';
 import imgBrand from './imgBrand.svg';
 import imgAvatar from './imgAvatar.svg';
 
@@ -635,39 +629,37 @@ class PageLayoutGroupsNav extends React.Component {
     );
     const kebabDropdownItems = [
       <DropdownItem>
-        <BellIcon /> Notifications
+        <CogIcon /> Settings
       </DropdownItem>,
       <DropdownItem>
-        <CogIcon /> Settings
+        <HelpIcon /> Help
       </DropdownItem>
     ];
     const userDropdownItems = [
-      <DropdownItem>Link</DropdownItem>,
-      <DropdownItem component="button">Action</DropdownItem>,
-      <DropdownItem isDisabled>Disabled Link</DropdownItem>,
-      <DropdownItem isDisabled component="button">
-        Disabled Action
-      </DropdownItem>,
-      <DropdownSeparator />,
-      <DropdownItem>Separated Link</DropdownItem>,
-      <DropdownItem component="button">Separated Action</DropdownItem>
+      <DropdownGroup key="group 2">
+        <DropdownItem key="group 2 profile">My profile</DropdownItem>
+        <DropdownItem key="group 2 user" component="button">
+          User management
+        </DropdownItem>
+        <DropdownItem key="group 2 logout">Logout</DropdownItem>
+      </DropdownGroup>
     ];
-    const PageToolbar = (
-      <Toolbar>
-        <ToolbarGroup className={css(accessibleStyles.screenReader, accessibleStyles.visibleOnLg)}>
-          <ToolbarItem>
-            <Button id="groups-example-uid-01" aria-label="Notifications actions" variant={ButtonVariant.plain}>
-              <BellIcon />
-            </Button>
-          </ToolbarItem>
-          <ToolbarItem>
-            <Button id="groups-example-uid-02" aria-label="Setings actions" variant={ButtonVariant.plain}>
+    const headerTools = (
+      <PageHeaderTools>
+        <PageHeaderToolsGroup breakpointMods={[{ modifier: 'hidden' }, { modifier: 'visible', breakpoint: 'lg' }]} /** the settings and help icon buttons are only visible on desktop sizes and replaced by a kebab dropdown for other sizes */>
+          <PageHeaderToolsItem>
+            <Button aria-label="Settings actions" variant={ButtonVariant.plain}>
               <CogIcon />
             </Button>
-          </ToolbarItem>
-        </ToolbarGroup>
-        <ToolbarGroup>
-          <ToolbarItem className={css(accessibleStyles.hiddenOnLg, spacingStyles.mr_0)}>
+          </PageHeaderToolsItem>
+          <PageHeaderToolsItem>
+            <Button aria-label="Help actions" variant={ButtonVariant.plain}>
+              <HelpIcon />
+            </Button>
+          </PageHeaderToolsItem>
+        </PageHeaderToolsGroup>
+        <PageHeaderToolsGroup>
+          <PageHeaderToolsItem breakpointMods={[{ modifier: 'hidden', breakpoint: 'lg' }]} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */>
             <Dropdown
               isPlain
               position="right"
@@ -676,26 +668,26 @@ class PageLayoutGroupsNav extends React.Component {
               isOpen={isKebabDropdownOpen}
               dropdownItems={kebabDropdownItems}
             />
-          </ToolbarItem>
-          <ToolbarItem className={css(accessibleStyles.screenReader, accessibleStyles.visibleOnMd)}>
+          </PageHeaderToolsItem>
+          <PageHeaderToolsItem breakpointMods={[{ modifier: 'hidden' }, { modifier: 'visible', breakpoint: 'md' }]} /** this user dropdown is hidden on mobile sizes */>
             <Dropdown
               isPlain
               position="right"
               onSelect={this.onDropdownSelect}
               isOpen={isDropdownOpen}
-              toggle={<DropdownToggle onToggle={this.onDropdownToggle}>Kyle Baker</DropdownToggle>}
+              toggle={<DropdownToggle onToggle={this.onDropdownToggle}>John Smith</DropdownToggle>}
               dropdownItems={userDropdownItems}
             />
-          </ToolbarItem>
-        </ToolbarGroup>
-      </Toolbar>
+          </PageHeaderToolsItem>
+        </PageHeaderToolsGroup>
+        <Avatar src={imgAvatar} alt="Avatar image" />
+      </PageHeaderTools>
     );
 
     const Header = (
       <PageHeader
         logo={<Brand src={imgBrand} alt="Patternfly Logo" />}
-        toolbar={PageToolbar}
-        avatar={<Avatar src={imgAvatar} alt="Avatar image" />}
+        headerTools={headerTools}
         showNavToggle
       />
     );
@@ -744,6 +736,7 @@ import {
   Card,
   CardBody,
   Dropdown,
+  DropdownGroup,
   DropdownToggle,
   DropdownItem,
   DropdownSeparator,
@@ -760,15 +753,12 @@ import {
   SkipToContent,
   TextContent,
   Text,
-  Toolbar,
-  ToolbarGroup,
-  ToolbarItem
+  PageHeaderTools,
+  PageHeaderToolsGroup,
+  PageHeaderToolsItem
 } from '@patternfly/react-core';
-// make sure you've installed @patternfly/patternfly
-import accessibleStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
-import spacingStyles from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 import { css } from '@patternfly/react-styles';
-import { BellIcon, CogIcon } from '@patternfly/react-icons';
+import { BellIcon, CogIcon, HelpIcon } from '@patternfly/react-icons';
 import imgBrand from './imgBrand.svg';
 import imgAvatar from './imgAvatar.svg';
 
@@ -838,39 +828,37 @@ class PageLayoutHorizontalNav extends React.Component {
     );
     const kebabDropdownItems = [
       <DropdownItem>
-        <BellIcon /> Notifications
+        <CogIcon /> Settings
       </DropdownItem>,
       <DropdownItem>
-        <CogIcon /> Settings
+        <HelpIcon /> Help
       </DropdownItem>
     ];
     const userDropdownItems = [
-      <DropdownItem>Link</DropdownItem>,
-      <DropdownItem component="button">Action</DropdownItem>,
-      <DropdownItem isDisabled>Disabled Link</DropdownItem>,
-      <DropdownItem isDisabled component="button">
-        Disabled Action
-      </DropdownItem>,
-      <DropdownSeparator />,
-      <DropdownItem>Separated Link</DropdownItem>,
-      <DropdownItem component="button">Separated Action</DropdownItem>
+      <DropdownGroup key="group 2">
+        <DropdownItem key="group 2 profile">My profile</DropdownItem>
+        <DropdownItem key="group 2 user" component="button">
+          User management
+        </DropdownItem>
+        <DropdownItem key="group 2 logout">Logout</DropdownItem>
+      </DropdownGroup>
     ];
-    const PageToolbar = (
-      <Toolbar>
-        <ToolbarGroup className={css(accessibleStyles.screenReader, accessibleStyles.visibleOnLg)}>
-          <ToolbarItem>
-            <Button id="horizontal-example-uid-01" aria-label="Notifications actions" variant={ButtonVariant.plain}>
-              <BellIcon />
-            </Button>
-          </ToolbarItem>
-          <ToolbarItem>
-            <Button id="horizontal-example-uid-02" aria-label="Settings actions" variant={ButtonVariant.plain}>
+    const headerTools = (
+      <PageHeaderTools>
+        <PageHeaderToolsGroup breakpointMods={[{ modifier: 'hidden' }, { modifier: 'visible', breakpoint: 'lg' }]} /** the settings and help icon buttons are only visible on desktop sizes and replaced by a kebab dropdown for other sizes */>
+          <PageHeaderToolsItem>
+            <Button aria-label="Settings actions" variant={ButtonVariant.plain}>
               <CogIcon />
             </Button>
-          </ToolbarItem>
-        </ToolbarGroup>
-        <ToolbarGroup>
-          <ToolbarItem className={css(accessibleStyles.hiddenOnLg, spacingStyles.mr_0)}>
+          </PageHeaderToolsItem>
+          <PageHeaderToolsItem>
+            <Button aria-label="Help actions" variant={ButtonVariant.plain}>
+              <HelpIcon />
+            </Button>
+          </PageHeaderToolsItem>
+        </PageHeaderToolsGroup>
+        <PageHeaderToolsGroup>
+          <PageHeaderToolsItem breakpointMods={[{ modifier: 'hidden', breakpoint: 'lg' }]} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */>
             <Dropdown
               isPlain
               position="right"
@@ -879,26 +867,26 @@ class PageLayoutHorizontalNav extends React.Component {
               isOpen={isKebabDropdownOpen}
               dropdownItems={kebabDropdownItems}
             />
-          </ToolbarItem>
-          <ToolbarItem className={css(accessibleStyles.screenReader, accessibleStyles.visibleOnMd)}>
+          </PageHeaderToolsItem>
+          <PageHeaderToolsItem breakpointMods={[{ modifier: 'hidden' }, { modifier: 'visible', breakpoint: 'md' }]} /** this user dropdown is hidden on mobile sizes */>
             <Dropdown
               isPlain
               position="right"
               onSelect={this.onDropdownSelect}
               isOpen={isDropdownOpen}
-              toggle={<DropdownToggle onToggle={this.onDropdownToggle}>Kyle Baker</DropdownToggle>}
+              toggle={<DropdownToggle onToggle={this.onDropdownToggle}>John Smith</DropdownToggle>}
               dropdownItems={userDropdownItems}
             />
-          </ToolbarItem>
-        </ToolbarGroup>
-      </Toolbar>
+          </PageHeaderToolsItem>
+        </PageHeaderToolsGroup>
+        <Avatar src={imgAvatar} alt="Avatar image" />
+      </PageHeaderTools>
     );
 
     const Header = (
       <PageHeader
         logo={<Brand src={imgBrand} alt="Patternfly Logo" />}
-        toolbar={PageToolbar}
-        avatar={<Avatar src={imgAvatar} alt="Avatar image" />}
+        headerTools={headerTools}
         topNav={PageNav}
       />
     );
@@ -956,6 +944,7 @@ import {
   Card,
   CardBody,
   Dropdown,
+  DropdownGroup,
   DropdownToggle,
   DropdownItem,
   DropdownSeparator,
@@ -973,15 +962,12 @@ import {
   SkipToContent,
   TextContent,
   Text,
-  Toolbar,
-  ToolbarGroup,
-  ToolbarItem
+  PageHeaderTools,
+  PageHeaderToolsGroup,
+  PageHeaderToolsItem
 } from '@patternfly/react-core';
-// make sure you've installed @patternfly/patternfly
-import accessibleStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
-import spacingStyles from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 import { css } from '@patternfly/react-styles';
-import { BellIcon, CogIcon } from '@patternfly/react-icons';
+import { BellIcon, CogIcon, HelpIcon } from '@patternfly/react-icons';
 import imgBrand from './imgBrand.svg';
 import imgAvatar from './imgAvatar.svg';
 
@@ -1079,39 +1065,37 @@ class PageLayoutManualNav extends React.Component {
     );
     const kebabDropdownItems = [
       <DropdownItem>
-        <BellIcon /> Notifications
+        <CogIcon /> Settings
       </DropdownItem>,
       <DropdownItem>
-        <CogIcon /> Settings
+        <HelpIcon /> Help
       </DropdownItem>
     ];
     const userDropdownItems = [
-      <DropdownItem>Link</DropdownItem>,
-      <DropdownItem component="button">Action</DropdownItem>,
-      <DropdownItem isDisabled>Disabled Link</DropdownItem>,
-      <DropdownItem isDisabled component="button">
-        Disabled Action
-      </DropdownItem>,
-      <DropdownSeparator />,
-      <DropdownItem>Separated Link</DropdownItem>,
-      <DropdownItem component="button">Separated Action</DropdownItem>
+      <DropdownGroup key="group 2">
+        <DropdownItem key="group 2 profile">My profile</DropdownItem>
+        <DropdownItem key="group 2 user" component="button">
+          User management
+        </DropdownItem>
+        <DropdownItem key="group 2 logout">Logout</DropdownItem>
+      </DropdownGroup>
     ];
-    const PageToolbar = (
-      <Toolbar>
-        <ToolbarGroup className={css(accessibleStyles.screenReader, accessibleStyles.visibleOnLg)}>
-          <ToolbarItem>
-            <Button id="default-example-uid-01" aria-label="Notifications actions" variant={ButtonVariant.plain}>
-              <BellIcon />
-            </Button>
-          </ToolbarItem>
-          <ToolbarItem>
-            <Button id="default-example-uid-02" aria-label="Settings actions" variant={ButtonVariant.plain}>
+    const headerTools = (
+      <PageHeaderTools>
+        <PageHeaderToolsGroup breakpointMods={[{ modifier: 'hidden' }, { modifier: 'visible', breakpoint: 'lg' }]} /** the settings and help icon buttons are only visible on desktop sizes and replaced by a kebab dropdown for other sizes */>
+          <PageHeaderToolsItem>
+            <Button aria-label="Settings actions" variant={ButtonVariant.plain}>
               <CogIcon />
             </Button>
-          </ToolbarItem>
-        </ToolbarGroup>
-        <ToolbarGroup>
-          <ToolbarItem className={css(accessibleStyles.hiddenOnLg, spacingStyles.mr_0)}>
+          </PageHeaderToolsItem>
+          <PageHeaderToolsItem>
+            <Button aria-label="Help actions" variant={ButtonVariant.plain}>
+              <HelpIcon />
+            </Button>
+          </PageHeaderToolsItem>
+        </PageHeaderToolsGroup>
+        <PageHeaderToolsGroup>
+          <PageHeaderToolsItem breakpointMods={[{ modifier: 'hidden', breakpoint: 'lg' }]} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */>
             <Dropdown
               isPlain
               position="right"
@@ -1120,26 +1104,26 @@ class PageLayoutManualNav extends React.Component {
               isOpen={isKebabDropdownOpen}
               dropdownItems={kebabDropdownItems}
             />
-          </ToolbarItem>
-          <ToolbarItem className={css(accessibleStyles.screenReader, accessibleStyles.visibleOnMd)}>
+          </PageHeaderToolsItem>
+          <PageHeaderToolsItem breakpointMods={[{ modifier: 'hidden' }, { modifier: 'visible', breakpoint: 'md' }]} /** this user dropdown is hidden on mobile sizes */>
             <Dropdown
               isPlain
               position="right"
               onSelect={this.onDropdownSelect}
               isOpen={isDropdownOpen}
-              toggle={<DropdownToggle onToggle={this.onDropdownToggle}>Kyle Baker</DropdownToggle>}
+              toggle={<DropdownToggle onToggle={this.onDropdownToggle}>John Smith</DropdownToggle>}
               dropdownItems={userDropdownItems}
             />
-          </ToolbarItem>
-        </ToolbarGroup>
-      </Toolbar>
+          </PageHeaderToolsItem>
+        </PageHeaderToolsGroup>
+        <Avatar src={imgAvatar} alt="Avatar image" />
+      </PageHeaderTools>
     );
 
     const Header = (
       <PageHeader
         logo={<Brand src={imgBrand} alt="Patternfly Logo" />}
-        toolbar={PageToolbar}
-        avatar={<Avatar src={imgAvatar} alt="Avatar image" />}
+        headerTools={headerTools}
         showNavToggle
         onNavToggle={isMobileView ? this.onNavToggleMobile : this.onNavToggleDesktop}
         isNavOpen={isMobileView ? isNavOpenMobile : isNavOpenDesktop}
@@ -1197,6 +1181,7 @@ import {
   Card,
   CardBody,
   Dropdown,
+  DropdownGroup,
   DropdownToggle,
   DropdownItem,
   DropdownSeparator,
@@ -1214,15 +1199,12 @@ import {
   SkipToContent,
   TextContent,
   Text,
-  Toolbar,
-  ToolbarGroup,
-  ToolbarItem
+  PageHeaderTools,
+  PageHeaderToolsGroup,
+  PageHeaderToolsItem
 } from '@patternfly/react-core';
-// make sure you've installed @patternfly/patternfly
-import accessibleStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
-import spacingStyles from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 import { css } from '@patternfly/react-styles';
-import { BellIcon, CogIcon } from '@patternfly/react-icons';
+import { BellIcon, CogIcon, HelpIcon } from '@patternfly/react-icons';
 import imgBrand from './imgBrand.svg';
 import imgAvatar from './imgAvatar.svg';
 
@@ -1270,7 +1252,7 @@ class PageLayoutLightNav extends React.Component {
     const { isDropdownOpen, isKebabDropdownOpen, activeItem } = this.state;
 
     const PageNav = (
-      <Nav onSelect={this.onNavSelect} aria-label="Nav">
+      <Nav onSelect={this.onNavSelect} aria-label="Nav" theme="light">
         <NavList>
           <NavItem itemId={0} isActive={activeItem === 0}>
             System Panel
@@ -1292,39 +1274,37 @@ class PageLayoutLightNav extends React.Component {
     );
     const kebabDropdownItems = [
       <DropdownItem>
-        <BellIcon /> Notifications
+        <CogIcon /> Settings
       </DropdownItem>,
       <DropdownItem>
-        <CogIcon /> Settings
+        <HelpIcon /> Help
       </DropdownItem>
     ];
     const userDropdownItems = [
-      <DropdownItem>Link</DropdownItem>,
-      <DropdownItem component="button">Action</DropdownItem>,
-      <DropdownItem isDisabled>Disabled Link</DropdownItem>,
-      <DropdownItem isDisabled component="button">
-        Disabled Action
-      </DropdownItem>,
-      <DropdownSeparator />,
-      <DropdownItem>Separated Link</DropdownItem>,
-      <DropdownItem component="button">Separated Action</DropdownItem>
+      <DropdownGroup key="group 2">
+        <DropdownItem key="group 2 profile">My profile</DropdownItem>
+        <DropdownItem key="group 2 user" component="button">
+          User management
+        </DropdownItem>
+        <DropdownItem key="group 2 logout">Logout</DropdownItem>
+      </DropdownGroup>
     ];
-    const PageToolbar = (
-      <Toolbar>
-        <ToolbarGroup className={css(accessibleStyles.screenReader, accessibleStyles.visibleOnLg)}>
-          <ToolbarItem>
-            <Button id="simple-example-uid-01" aria-label="Notifications actions" variant={ButtonVariant.plain}>
-              <BellIcon />
-            </Button>
-          </ToolbarItem>
-          <ToolbarItem>
-            <Button id="simple-example-uid-02" aria-label="Settings actions" variant={ButtonVariant.plain}>
+    const headerTools = (
+      <PageHeaderTools>
+        <PageHeaderToolsGroup breakpointMods={[{ modifier: 'hidden' }, { modifier: 'visible', breakpoint: 'lg' }]} /** the settings and help icon buttons are only visible on desktop sizes and replaced by a kebab dropdown for other sizes */>
+          <PageHeaderToolsItem>
+            <Button aria-label="Settings actions" variant={ButtonVariant.plain}>
               <CogIcon />
             </Button>
-          </ToolbarItem>
-        </ToolbarGroup>
-        <ToolbarGroup>
-          <ToolbarItem className={css(accessibleStyles.hiddenOnLg, spacingStyles.mr_0)}>
+          </PageHeaderToolsItem>
+          <PageHeaderToolsItem>
+            <Button aria-label="Help actions" variant={ButtonVariant.plain}>
+              <HelpIcon />
+            </Button>
+          </PageHeaderToolsItem>
+        </PageHeaderToolsGroup>
+        <PageHeaderToolsGroup>
+          <PageHeaderToolsItem breakpointMods={[{ modifier: 'hidden', breakpoint: 'lg' }]} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */>
             <Dropdown
               isPlain
               position="right"
@@ -1333,29 +1313,29 @@ class PageLayoutLightNav extends React.Component {
               isOpen={isKebabDropdownOpen}
               dropdownItems={kebabDropdownItems}
             />
-          </ToolbarItem>
-          <ToolbarItem className={css(accessibleStyles.screenReader, accessibleStyles.visibleOnMd)}>
+          </PageHeaderToolsItem>
+          <PageHeaderToolsItem breakpointMods={[{ modifier: 'hidden' }, { modifier: 'visible', breakpoint: 'md' }]} /** this user dropdown is hidden on mobile sizes */>
             <Dropdown
               isPlain
               position="right"
               onSelect={this.onDropdownSelect}
               isOpen={isDropdownOpen}
-              toggle={<DropdownToggle onToggle={this.onDropdownToggle}>Kyle Baker</DropdownToggle>}
+              toggle={<DropdownToggle onToggle={this.onDropdownToggle}>John Smith</DropdownToggle>}
               dropdownItems={userDropdownItems}
             />
-          </ToolbarItem>
-        </ToolbarGroup>
-      </Toolbar>
+          </PageHeaderToolsItem>
+        </PageHeaderToolsGroup>
+        <Avatar src={imgAvatar} alt="Avatar image" />
+      </PageHeaderTools>
     );
     const Header = (
       <PageHeader
         logo={<Brand src={imgBrand} alt="Patternfly Logo" />}
-        toolbar={PageToolbar}
-        avatar={<Avatar src={imgAvatar} alt="Avatar image" />}
+        headerTools={headerTools}
         showNavToggle
       />
     );
-    const Sidebar = <PageSidebar nav={PageNav} />;
+    const Sidebar = <PageSidebar nav={PageNav} theme="light" />;
     const pageId = 'main-content-page-layout-simple-nav';
     const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to Content</SkipToContent>;
 
@@ -1393,4 +1373,4 @@ class PageLayoutLightNav extends React.Component {
     );
   }
 }
-```
+```
\ No newline at end of file
diff --git a/packages/react-core/src/helpers/util.ts b/packages/react-core/src/helpers/util.ts
index 2b9d5596fd2..d8468c1182a 100644
--- a/packages/react-core/src/helpers/util.ts
+++ b/packages/react-core/src/helpers/util.ts
@@ -4,6 +4,7 @@ import { ToolbarBreakpointMod } from '../components/Toolbar/ToolbarUtils';
 import { FlexBreakpointMod, FlexItemBreakpointMod } from '../layouts/Flex/FlexUtils';
 import { DataListActionBreakpointMod } from '../components/DataList/DataListActionBreakpoints';
 import { PageSectionBreakpointMod } from '../components/Page/PageSection';
+import { PageHeaderToolsBreakpointMod } from '../components/Page/PageHeaderTools';
 
 /**
  * @param {string} input - String to capitalize first letter
@@ -239,7 +240,7 @@ export function pluralize(i: number, singular: string, plural?: string) {
 
 /** This function is a helper for turning arrays of breakpointMod objects for data toolbar and flex into classes
  *
- * @param {(ToolbarBreakpointMod | FlexBreakpointMod | FlexItemBreakpointMod | PageSectionBreakpointMod | DataListActionBreakpointMod)[]} breakpointMods The modifiers object
+ * @param {(ToolbarBreakpointMod | FlexBreakpointMod | FlexItemBreakpointMod | PageSectionBreakpointMod | DataListActionBreakpointMod | PageHeaderToolsBreakpointMod)[]} breakpointMods The modifiers object
  * @param {any} styles The appropriate styles object for the component
  */
 export const formatBreakpointMods = (
@@ -248,7 +249,8 @@ export const formatBreakpointMods = (
     | FlexBreakpointMod
     | FlexItemBreakpointMod
     | PageSectionBreakpointMod
-    | DataListActionBreakpointMod)[],
+    | DataListActionBreakpointMod
+    | PageHeaderToolsBreakpointMod)[],
   styles: any
 ) =>
   breakpointMods
diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json
index 2a55698693f..842e3ea7758 100644
--- a/packages/react-docs/package.json
+++ b/packages/react-docs/package.json
@@ -25,7 +25,7 @@
   "dependencies": {
     "@mdx-js/mdx": "^1.1.5",
     "@mdx-js/react": "^1.1.5",
-    "@patternfly/patternfly": "4.10.20",
+    "@patternfly/patternfly": "4.10.21",
     "@patternfly/react-catalog-view-extension": "^4.2.35",
     "@patternfly/react-charts": "^6.2.11",
     "@patternfly/react-core": "^4.13.1",
diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json
index 5a690cc6656..baa1786e29b 100644
--- a/packages/react-icons/package.json
+++ b/packages/react-icons/package.json
@@ -32,7 +32,7 @@
     "@fortawesome/free-brands-svg-icons": "^5.7.2",
     "@fortawesome/free-regular-svg-icons": "^5.7.2",
     "@fortawesome/free-solid-svg-icons": "^5.7.2",
-    "@patternfly/patternfly": "4.10.20",
+    "@patternfly/patternfly": "4.10.21",
     "fs-extra": "^6.0.1",
     "glob": "^7.1.2",
     "rimraf": "^2.6.2",
diff --git a/packages/react-integration/cypress/integration/page.spec.ts b/packages/react-integration/cypress/integration/page.spec.ts
index 3c41dc4fa94..1fa548f5b57 100644
--- a/packages/react-integration/cypress/integration/page.spec.ts
+++ b/packages/react-integration/cypress/integration/page.spec.ts
@@ -21,7 +21,7 @@ describe('Page Demo Test', () => {
         .should('eq', "Logo that's a <div>");
       cy.get('.pf-c-page__header-tools')
         .invoke('text')
-        .should('contain', 'Toolbar | Avatar');
+        .should('contain', 'PageHeaderTools | Avatar');
       cy.get('.pf-c-page__main-section.pf-m-dark-100').should('exist');
       cy.get('.pf-c-page__main-section.pf-m-dark-200').should('exist');
       cy.get('.pf-c-page__main-section.pf-m-light').should('exist');
diff --git a/packages/react-integration/cypress/integration/pagemanagedsidebar.spec.ts b/packages/react-integration/cypress/integration/pagemanagedsidebar.spec.ts
index c7f19c6ef9c..73b4e08fcbf 100644
--- a/packages/react-integration/cypress/integration/pagemanagedsidebar.spec.ts
+++ b/packages/react-integration/cypress/integration/pagemanagedsidebar.spec.ts
@@ -19,7 +19,7 @@ describe('Page Managed Sidebar Demo Test', () => {
         .should('eq', "Logo that's a <div>");
       cy.get('.pf-c-page__header-tools')
         .invoke('text')
-        .should('contain', 'Toolbar | Avatar');
+        .should('contain', 'PageHeaderTools | Avatar');
       cy.get('.pf-c-page__main-section.pf-m-dark-100').should('exist');
       cy.get('.pf-c-page__main-section.pf-m-dark-200').should('exist');
       cy.get('.pf-c-page__main-section.pf-m-light').should('exist');
diff --git a/packages/react-integration/cypress/integration/pagemanagedsidebarclosed.spec.ts b/packages/react-integration/cypress/integration/pagemanagedsidebarclosed.spec.ts
index d80e30d3ec0..20a11b9da15 100644
--- a/packages/react-integration/cypress/integration/pagemanagedsidebarclosed.spec.ts
+++ b/packages/react-integration/cypress/integration/pagemanagedsidebarclosed.spec.ts
@@ -19,7 +19,7 @@ describe('Page Managed Sidebar Closed Demo Test', () => {
         .should('eq', "Logo that's a <div>");
       cy.get('.pf-c-page__header-tools')
         .invoke('text')
-        .should('contain', 'Toolbar | Avatar');
+        .should('contain', 'PageHeaderTools | Avatar');
       cy.get('.pf-c-page__main-section.pf-m-dark-100').should('exist');
       cy.get('.pf-c-page__main-section.pf-m-dark-200').should('exist');
       cy.get('.pf-c-page__main-section.pf-m-light').should('exist');
diff --git a/packages/react-integration/demo-app-ts/src/App.tsx b/packages/react-integration/demo-app-ts/src/App.tsx
index d84a0c7a203..a357a1e0938 100755
--- a/packages/react-integration/demo-app-ts/src/App.tsx
+++ b/packages/react-integration/demo-app-ts/src/App.tsx
@@ -9,7 +9,8 @@ import {
   PageSidebar,
   Avatar,
   Brand,
-  PageHeader
+  PageHeader,
+  PageHeaderTools
 } from '@patternfly/react-core';
 import imgBrand from './assets/images/imgBrand.svg';
 import imgAvatar from './assets/images/imgAvatar.svg';
@@ -71,14 +72,15 @@ class App extends React.Component<{}, AppState> {
     const { isNavOpen } = this.state;
 
     const AppToolbar = (
-      <div className="pf-c-page__header-tools">TODO: http://patternfly-v4.surge.sh/documentation/core/demos/page</div>
+      <PageHeaderTools>
+        <Avatar src={imgAvatar} alt="Avatar image" />
+      </PageHeaderTools>
     );
 
     const AppHeader = (
       <PageHeader
         logo={<Brand src={imgBrand} alt="Patternfly Logo" />}
-        toolbar={AppToolbar}
-        avatar={<Avatar src={imgAvatar} alt="Avatar image" />}
+        headerTools={AppToolbar}
         showNavToggle
         isNavOpen={isNavOpen}
         onNavToggle={() => this.setState({ isNavOpen: !isNavOpen })}
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageDemo.tsx
index 33dabb6867f..ecdefe54ee5 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageDemo.tsx
@@ -1,5 +1,13 @@
 import React from 'react';
-import { Page, PageHeader, PageSidebar, PageSection, PageSectionVariants, SkipToContent } from '@patternfly/react-core';
+import {
+  Page,
+  PageHeader,
+  PageHeaderTools,
+  PageSidebar,
+  PageSection,
+  PageSectionVariants,
+  SkipToContent
+} from '@patternfly/react-core';
 
 export class PageDemo extends React.Component {
   state = {
@@ -31,8 +39,7 @@ export class PageDemo extends React.Component {
         id="page-demo-header"
         logo="Logo that's a <div>"
         logoProps={logoProps}
-        toolbar="Toolbar"
-        avatar=" | Avatar"
+        headerTools={<PageHeaderTools>PageHeaderTools | Avatar</PageHeaderTools>}
         showNavToggle
         isNavOpen={isNavOpen}
         onNavToggle={this.onNavToggle}
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageManagedSidebarClosedDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageManagedSidebarClosedDemo.tsx
index cfa012b154a..2ce95e6fd8c 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageManagedSidebarClosedDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageManagedSidebarClosedDemo.tsx
@@ -1,5 +1,12 @@
 import React from 'react';
-import { Page, PageHeader, PageSidebar, PageSection, PageSectionVariants } from '@patternfly/react-core';
+import {
+  Page,
+  PageHeader,
+  PageHeaderTools,
+  PageSidebar,
+  PageSection,
+  PageSectionVariants
+} from '@patternfly/react-core';
 
 export class PageManagedSidebarClosedDemo extends React.Component {
   componentDidMount() {
@@ -17,8 +24,7 @@ export class PageManagedSidebarClosedDemo extends React.Component {
       <PageHeader
         logo="Logo that's a <div>"
         logoProps={logoProps}
-        toolbar="Toolbar"
-        avatar=" | Avatar"
+        headerTools={<PageHeaderTools>PageHeaderTools | Avatar</PageHeaderTools>}
         showNavToggle
         logoComponent={'div'}
       />
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageManagedSidebarDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageManagedSidebarDemo.tsx
index c6097cdf041..2c324a2a4c1 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageManagedSidebarDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageManagedSidebarDemo.tsx
@@ -1,5 +1,12 @@
 import React from 'react';
-import { Page, PageHeader, PageSidebar, PageSection, PageSectionVariants } from '@patternfly/react-core';
+import {
+  Page,
+  PageHeader,
+  PageHeaderTools,
+  PageSidebar,
+  PageSection,
+  PageSectionVariants
+} from '@patternfly/react-core';
 
 export class PageManagedSidebarDemo extends React.Component {
   componentDidMount() {
@@ -17,8 +24,7 @@ export class PageManagedSidebarDemo extends React.Component {
       <PageHeader
         logo="Logo that's a <div>"
         logoProps={logoProps}
-        toolbar="Toolbar"
-        avatar=" | Avatar"
+        headerTools={<PageHeaderTools>PageHeaderTools | Avatar</PageHeaderTools>}
         showNavToggle
         logoComponent={'div'}
       />
diff --git a/packages/react-styles/package.json b/packages/react-styles/package.json
index 95283c7ef9f..a4f3c4e78f2 100644
--- a/packages/react-styles/package.json
+++ b/packages/react-styles/package.json
@@ -19,7 +19,7 @@
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.10.20",
+    "@patternfly/patternfly": "4.10.21",
     "camel-case": "^3.0.0",
     "css": "^2.2.3",
     "fbjs-scripts": "^0.8.3",
diff --git a/packages/react-table/package.json b/packages/react-table/package.json
index 1f27d6c5e2e..ea7e42a683a 100644
--- a/packages/react-table/package.json
+++ b/packages/react-table/package.json
@@ -30,7 +30,7 @@
     "clean": "rimraf dist"
   },
   "dependencies": {
-    "@patternfly/patternfly": "4.10.20",
+    "@patternfly/patternfly": "4.10.21",
     "@patternfly/react-core": "^4.13.1",
     "@patternfly/react-icons": "^4.2.9",
     "@patternfly/react-styles": "^4.2.8",
diff --git a/packages/react-tokens/package.json b/packages/react-tokens/package.json
index efd51bdae0f..772d58d25a1 100644
--- a/packages/react-tokens/package.json
+++ b/packages/react-tokens/package.json
@@ -29,7 +29,7 @@
     "clean": "rimraf dist"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.10.20",
+    "@patternfly/patternfly": "4.10.21",
     "css": "^2.2.3",
     "fs-extra": "^6.0.1",
     "glob": "^7.1.2",