diff --git a/packages/react-core/src/components/Button/Button.tsx b/packages/react-core/src/components/Button/Button.tsx
index 86b40f66826..7a4ec1d3daf 100644
--- a/packages/react-core/src/components/Button/Button.tsx
+++ b/packages/react-core/src/components/Button/Button.tsx
@@ -6,7 +6,7 @@ import { useOUIAProps, OUIAProps } from '../../helpers/OUIA/ouia';
 import { Badge } from '../Badge';
 import StarIcon from '@patternfly/react-icons/dist/esm/icons/star-icon';
 import OutlinedStarIcon from '@patternfly/react-icons/dist/esm/icons/outlined-star-icon';
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
 import { hamburgerIcon } from './hamburgerIcon';
 
 export enum ButtonVariant {
@@ -109,6 +109,10 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   hamburgerVariant?: 'expand' | 'collapse';
   /** @beta Flag indicating the button is a circle button. Intended for buttons that only contain an icon.. */
   isCircle?: boolean;
+  /** @beta Flag indicating the button is a dock variant button. For use in docked navigation. */
+  isDock?: boolean;
+  /** @beta Flag indicating the dock button should display text. Only applies when isDock is true. */
+  isTextExpanded?: boolean;
   /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Adds count number to button */
@@ -134,6 +138,8 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
   isHamburger,
   hamburgerVariant,
   isCircle,
+  isDock = false,
+  isTextExpanded = false,
   spinnerAriaValueText,
   spinnerAriaLabelledBy,
   spinnerAriaLabel,
@@ -215,7 +221,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
     }
 
     if (isSettings) {
-      iconContent = <CogIcon />;
+      iconContent = <RhUiSettingsFillIcon />;
     }
     if (isHamburger) {
       iconContent = hamburgerIcon;
@@ -265,6 +271,8 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
         size === ButtonSize.sm && styles.modifiers.small,
         size === ButtonSize.lg && styles.modifiers.displayLg,
         isCircle && styles.modifiers.circle,
+        isDock && styles.modifiers.dock,
+        isTextExpanded && styles.modifiers.textExpanded,
         className
       )}
       disabled={isButtonElement ? isDisabled : null}
diff --git a/packages/react-core/src/components/Button/__tests__/Button.test.tsx b/packages/react-core/src/components/Button/__tests__/Button.test.tsx
index 2c6ec2bf4a6..d4425f53840 100644
--- a/packages/react-core/src/components/Button/__tests__/Button.test.tsx
+++ b/packages/react-core/src/components/Button/__tests__/Button.test.tsx
@@ -555,6 +555,28 @@ describe('Favorite button', () => {
   });
 });
 
+describe('Dock variant', () => {
+  test(`Renders with class ${styles.modifiers.dock} when isDock = true`, () => {
+    render(<Button isDock>Dock Button</Button>);
+    expect(screen.getByRole('button')).toHaveClass(styles.modifiers.dock);
+  });
+
+  test(`Does not render with class ${styles.modifiers.dock} when isDock is not passed`, () => {
+    render(<Button>Button</Button>);
+    expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.dock);
+  });
+
+  test(`Renders with class ${styles.modifiers.textExpanded} when isTextExpanded = true`, () => {
+    render(<Button isTextExpanded>Text Expanded Button</Button>);
+    expect(screen.getByRole('button')).toHaveClass(styles.modifiers.textExpanded);
+  });
+
+  test(`Does not render with class ${styles.modifiers.textExpanded} when isTextExpanded is not passed`, () => {
+    render(<Button>Button</Button>);
+    expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.textExpanded);
+  });
+});
+
 test(`Renders basic button`, () => {
   const { asFragment } = render(<Button aria-label="basic button">Basic Button</Button>);
   expect(asFragment()).toMatchSnapshot();
diff --git a/packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap b/packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap
index d9ce0770e4a..4385859a719 100644
--- a/packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`Renders basic button 1`] = `
   <button
     aria-label="basic button"
     class="pf-v6-c-button pf-m-primary"
-    data-ouia-component-id="OUIA-Generated-Button-primary-:r30:"
+    data-ouia-component-id="OUIA-Generated-Button-primary-:r34:"
     data-ouia-component-type="PF6/Button"
     data-ouia-safe="true"
     type="button"
diff --git a/packages/react-core/src/components/Masthead/MastheadLogo.tsx b/packages/react-core/src/components/Masthead/MastheadLogo.tsx
index 0f9f8391e35..49e1f43d715 100644
--- a/packages/react-core/src/components/Masthead/MastheadLogo.tsx
+++ b/packages/react-core/src/components/Masthead/MastheadLogo.tsx
@@ -11,12 +11,15 @@ export interface MastheadLogoProps extends React.DetailedHTMLProps<
   className?: string;
   /** Component type of the masthead logo. */
   component?: React.ElementType<any> | React.ComponentType<any>;
+  /** @beta Flag indicating the logo is a compact variant. Used in docked layouts. */
+  isCompact?: boolean;
 }
 
 export const MastheadLogo: React.FunctionComponent<MastheadLogoProps> = ({
   children,
   className,
   component,
+  isCompact = false,
   ...props
 }: MastheadLogoProps) => {
   let Component = component as any;
@@ -28,7 +31,11 @@ export const MastheadLogo: React.FunctionComponent<MastheadLogoProps> = ({
     }
   }
   return (
-    <Component className={css(styles.mastheadLogo, className)} {...(Component === 'a' && { tabIndex: 0 })} {...props}>
+    <Component
+      className={css(styles.mastheadLogo, isCompact && styles.modifiers.compact, className)}
+      {...(Component === 'a' && { tabIndex: 0 })}
+      {...props}
+    >
       {children}
     </Component>
   );
diff --git a/packages/react-core/src/components/Masthead/__tests__/Masthead.test.tsx b/packages/react-core/src/components/Masthead/__tests__/Masthead.test.tsx
index 982ae08d932..ed5f9ac3294 100644
--- a/packages/react-core/src/components/Masthead/__tests__/Masthead.test.tsx
+++ b/packages/react-core/src/components/Masthead/__tests__/Masthead.test.tsx
@@ -127,6 +127,29 @@ describe('MastheadLogo', () => {
 
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test(`Renders with ${styles.modifiers.compact} class when isCompact is true`, () => {
+    render(
+      <MastheadLogo isCompact data-testid="compact-logo">
+        test
+      </MastheadLogo>
+    );
+    expect(screen.getByTestId('compact-logo')).toHaveClass(styles.modifiers.compact);
+  });
+
+  test(`Does not render with ${styles.modifiers.compact} class when isCompact is false`, () => {
+    render(
+      <MastheadLogo isCompact={false} data-testid="logo">
+        test
+      </MastheadLogo>
+    );
+    expect(screen.getByTestId('logo')).not.toHaveClass(styles.modifiers.compact);
+  });
+
+  test(`Does not render with ${styles.modifiers.compact} class when isCompact is not passed`, () => {
+    render(<MastheadLogo data-testid="logo">test</MastheadLogo>);
+    expect(screen.getByTestId('logo')).not.toHaveClass(styles.modifiers.compact);
+  });
 });
 
 describe('MastheadContent', () => {
diff --git a/packages/react-core/src/components/MenuToggle/MenuToggle.tsx b/packages/react-core/src/components/MenuToggle/MenuToggle.tsx
index 565b478a928..4cdf5b4d609 100644
--- a/packages/react-core/src/components/MenuToggle/MenuToggle.tsx
+++ b/packages/react-core/src/components/MenuToggle/MenuToggle.tsx
@@ -51,6 +51,10 @@ export interface MenuToggleProps
   isCircle?: boolean;
   /** Flag indicating whether the toggle is a settings toggle. This will override the icon property */
   isSettings?: boolean;
+  /** @beta Flag indicating the toggle is a dock variant. For use in docked navigation. */
+  isDock?: boolean;
+  /** @beta Flag indicating the dock toggle should display text. Only applies when isDock is true. */
+  isTextExpanded?: boolean;
   /** Elements to display before the toggle button. When included, renders the menu toggle as a split button. */
   splitButtonItems?: React.ReactNode[];
   /** Variant styles of the menu toggle */
@@ -85,6 +89,8 @@ class MenuToggleBase extends Component<MenuToggleProps> {
     isFullHeight: false,
     isPlaceholder: false,
     isCircle: false,
+    isDock: false,
+    isTextExpanded: false,
     size: 'default',
     ouiaSafe: true
   };
@@ -102,6 +108,8 @@ class MenuToggleBase extends Component<MenuToggleProps> {
       isPlaceholder,
       isCircle,
       isSettings,
+      isDock,
+      isTextExpanded,
       splitButtonItems,
       variant,
       status,
@@ -185,6 +193,8 @@ class MenuToggleBase extends Component<MenuToggleProps> {
             isDisabled && styles.modifiers.disabled,
             isPlaceholder && styles.modifiers.placeholder,
             isSettings && styles.modifiers.settings,
+            isDock && styles.modifiers.dock,
+            isTextExpanded && styles.modifiers.textExpanded,
             size === MenuToggleSize.sm && styles.modifiers.small,
             className
           );
diff --git a/packages/react-core/src/components/MenuToggle/__tests__/MenuToggle.test.tsx b/packages/react-core/src/components/MenuToggle/__tests__/MenuToggle.test.tsx
index 2adbeda6b5e..357aaa1f5b5 100644
--- a/packages/react-core/src/components/MenuToggle/__tests__/MenuToggle.test.tsx
+++ b/packages/react-core/src/components/MenuToggle/__tests__/MenuToggle.test.tsx
@@ -138,3 +138,23 @@ test('Does not render custom icon when icon prop and isSettings are passed', ()
   );
   expect(screen.queryByText('Custom icon')).not.toBeInTheDocument();
 });
+
+test(`Renders with class ${styles.modifiers.dock} when isDock is passed`, () => {
+  render(<MenuToggle isDock>Dock Toggle</MenuToggle>);
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.dock);
+});
+
+test(`Does not render with class ${styles.modifiers.dock} when isDock is not passed`, () => {
+  render(<MenuToggle>Toggle</MenuToggle>);
+  expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.dock);
+});
+
+test(`Renders with class ${styles.modifiers.textExpanded} when isTextExpanded is passed`, () => {
+  render(<MenuToggle isTextExpanded>Text Expanded Toggle</MenuToggle>);
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.textExpanded);
+});
+
+test(`Does not render with class ${styles.modifiers.textExpanded} when isTextExpanded is not passed`, () => {
+  render(<MenuToggle>Toggle</MenuToggle>);
+  expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.textExpanded);
+});
diff --git a/packages/react-core/src/components/Nav/Nav.tsx b/packages/react-core/src/components/Nav/Nav.tsx
index 8a908a90584..28e32bf25b7 100644
--- a/packages/react-core/src/components/Nav/Nav.tsx
+++ b/packages/react-core/src/components/Nav/Nav.tsx
@@ -39,6 +39,8 @@ export interface NavProps
   'aria-label'?: string;
   /** The nav variant to use. Docked is in beta. */
   variant?: 'default' | 'horizontal' | 'horizontal-subnav' | 'docked';
+  /** @beta Flag indicating the docked nav should display text. Only applies when variant is docked. */
+  isTextExpanded?: boolean;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
@@ -119,6 +121,7 @@ class Nav extends Component<NavProps, { isScrollable: boolean; flyoutRef: React.
       ouiaId,
       ouiaSafe,
       variant,
+      isTextExpanded = false,
       ...props
     } = this.props;
     const isHorizontal = ['horizontal', 'horizontal-subnav'].includes(variant);
@@ -156,6 +159,7 @@ class Nav extends Component<NavProps, { isScrollable: boolean; flyoutRef: React.
                 isHorizontal && styles.modifiers.horizontal,
                 variant === 'docked' && styles.modifiers.docked,
                 variant === 'horizontal-subnav' && styles.modifiers.subnav,
+                isTextExpanded && styles.modifiers.textExpanded,
                 this.state.isScrollable && styles.modifiers.scrollable,
                 className
               )}
diff --git a/packages/react-core/src/components/Nav/__tests__/Nav.test.tsx b/packages/react-core/src/components/Nav/__tests__/Nav.test.tsx
index 81bd5b3f57f..b16c9fba8fc 100644
--- a/packages/react-core/src/components/Nav/__tests__/Nav.test.tsx
+++ b/packages/react-core/src/components/Nav/__tests__/Nav.test.tsx
@@ -274,4 +274,34 @@ describe('Nav', () => {
     );
     expect(screen.getByTestId('docked-nav')).toHaveClass(styles.modifiers.docked);
   });
+
+  test(`Renders with ${styles.modifiers.textExpanded} class when isTextExpanded is true`, () => {
+    renderNav(
+      <Nav isTextExpanded data-testid="text-expanded-nav">
+        <NavList>
+          {props.items.map((item) => (
+            <NavItem to={item.to} key={item.to}>
+              {item.label}
+            </NavItem>
+          ))}
+        </NavList>
+      </Nav>
+    );
+    expect(screen.getByTestId('text-expanded-nav')).toHaveClass(styles.modifiers.textExpanded);
+  });
+
+  test(`Does not render with ${styles.modifiers.textExpanded} class when isTextExpanded is not passed`, () => {
+    renderNav(
+      <Nav data-testid="nav">
+        <NavList>
+          {props.items.map((item) => (
+            <NavItem to={item.to} key={item.to}>
+              {item.label}
+            </NavItem>
+          ))}
+        </NavList>
+      </Nav>
+    );
+    expect(screen.getByTestId('nav')).not.toHaveClass(styles.modifiers.textExpanded);
+  });
 });
diff --git a/packages/react-core/src/components/Page/Page.tsx b/packages/react-core/src/components/Page/Page.tsx
index c0b02c4caec..82ea7c91c58 100644
--- a/packages/react-core/src/components/Page/Page.tsx
+++ b/packages/react-core/src/components/Page/Page.tsx
@@ -22,8 +22,14 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   className?: string;
   /** @beta Indicates the layout variant */
   variant?: 'default' | 'docked';
-  /** Masthead component (e.g. <Masthead />) */
+  /** @beta Flag indicating the dock nav is expanded on mobile. Only applies when variant is dock. */
+  isDockExpanded?: boolean;
+  /** @beta Flag indicating the dock nav should display text. Only applies when variant is dock. */
+  isDockTextExpanded?: boolean;
+  /** The horizontal masthead content (e.g. <Masthead />). When using the dock variant, this content will only render at mobile viewports. */
   masthead?: React.ReactNode;
+  /** @beta Content to render in the vertical dock when variant of dock is used. At mobile viewports, this content will be replaced with the content passed to masthead. */
+  dockContent?: React.ReactNode;
   /** Sidebar component for a side nav, recommended to be a PageSidebar. If set to null, the page grid layout
    * will render without a sidebar.
    */
@@ -232,7 +238,10 @@ class Page extends Component<PageProps, PageState> {
       className,
       children,
       variant,
+      isDockExpanded = false,
+      isDockTextExpanded = false,
       masthead,
+      dockContent,
       sidebar,
       notificationDrawer,
       isNotificationDrawerExpanded,
@@ -349,9 +358,18 @@ class Page extends Component<PageProps, PageState> {
         >
           {skipToContent}
           {variant === 'docked' ? (
-            <div className={css(styles.pageDock)}>
-              <div className={css(styles.pageDockMain)}>{masthead}</div>
-            </div>
+            <>
+              {masthead}
+              <div
+                className={css(
+                  styles.pageDock,
+                  isDockExpanded && styles.modifiers.expanded,
+                  isDockTextExpanded && styles.modifiers.textExpanded
+                )}
+              >
+                <div className={css(styles.pageDockMain)}>{dockContent}</div>
+              </div>
+            </>
           ) : (
             masthead
           )}
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 d1258ac18f2..f18832bdde4 100644
--- a/packages/react-core/src/components/Page/__tests__/Page.test.tsx
+++ b/packages/react-core/src/components/Page/__tests__/Page.test.tsx
@@ -389,6 +389,26 @@ describe('Page', () => {
 
     expect(screen.getByRole('main').parentElement).not.toHaveClass(styles.modifiers.noFill);
   });
+});
+
+describe('Page dock variant', () => {
+  test(`Does not render with dock classes when variant is default`, () => {
+    render(<Page {...props} variant="default" data-testid="page"></Page>);
+
+    const page = screen.getByTestId('page');
+    expect(page).not.toHaveClass(styles.modifiers.dock);
+    expect(page.querySelector(`.${styles.pageDock}`)).not.toBeInTheDocument();
+    expect(page.querySelector(`.${styles.pageDockMain}`)).not.toBeInTheDocument();
+  });
+
+  test(`Does not render with dock classes when variant is not passed`, () => {
+    render(<Page data-testid="page"></Page>);
+
+    const page = screen.getByTestId('page');
+    expect(page).not.toHaveClass(styles.modifiers.dock);
+    expect(page.querySelector(`.${styles.pageDock}`)).not.toBeInTheDocument();
+    expect(page.querySelector(`.${styles.pageDockMain}`)).not.toBeInTheDocument();
+  });
 
   test(`Renders with ${styles.modifiers.dock} class when variant is docked`, () => {
     render(<Page {...props} variant="docked" data-testid="page"></Page>);
@@ -396,21 +416,75 @@ describe('Page', () => {
     expect(screen.getByTestId('page')).toHaveClass(styles.modifiers.dock);
   });
 
-  test(`Does not render with ${styles.modifiers.dock} class when variant is default`, () => {
-    render(<Page {...props} variant="default" data-testid="page"></Page>);
+  test('Renders dock content when dockContent and variant="docked" is passed', () => {
+    render(<Page variant="docked" dockContent={<>Dock content</>} masthead={<>Masthead</>} data-testid="page"></Page>);
 
-    expect(screen.getByTestId('page')).not.toHaveClass(styles.modifiers.dock);
+    expect(screen.getByText('Dock content')).toBeInTheDocument();
   });
 
-  test(`Does not render with ${styles.modifiers.dock} class when variant is not passed`, () => {
-    render(<Page data-testid="page"></Page>);
-    expect(screen.getByTestId('page')).not.toHaveClass(styles.modifiers.dock);
+  test('Renders masthead content when masthead and variant="docked" is passed', () => {
+    render(
+      <Page variant="docked" dockContent={<>Dock content</>} masthead={<>Masthead content</>} data-testid="page"></Page>
+    );
+
+    expect(screen.getByText('Masthead content')).toBeInTheDocument();
+  });
+
+  test(`Renders with ${styles.pageDock} wrapper when variant is docked`, () => {
+    render(<Page variant="docked" dockContent={<>Dock content</>} masthead={<>Masthead</>} data-testid="page"></Page>);
+
+    const pageDock = screen.getByText('Dock content').closest(`.${styles.pageDock}`);
+    expect(pageDock).toBeInTheDocument();
+  });
+
+  test(`Does not render with ${styles.modifiers.expanded} by default when variant is docked`, () => {
+    render(<Page variant="docked" dockContent={<>Dock content</>} masthead={<>Masthead</>} data-testid="page"></Page>);
+
+    const pageDock = screen.getByText('Dock content').closest(`.${styles.pageDock}`);
+    expect(pageDock).not.toHaveClass(styles.modifiers.expanded);
+  });
+
+  test(`Does not render with ${styles.modifiers.textExpanded} by default when variant is docked`, () => {
+    render(<Page variant="docked" dockContent={<>Dock content</>} masthead={<>Masthead</>} data-testid="page"></Page>);
+
+    const pageDock = screen.getByText('Dock content').closest(`.${styles.pageDock}`);
+    expect(pageDock).not.toHaveClass(styles.modifiers.textExpanded);
+  });
+
+  test(`Renders with ${styles.modifiers.expanded} when isDockExpanded is true and variant is docked`, () => {
+    render(
+      <Page
+        variant="docked"
+        isDockExpanded
+        dockContent={<>Dock content</>}
+        masthead={<>Masthead</>}
+        data-testid="page"
+      ></Page>
+    );
+
+    const pageDock = screen.getByText('Dock content').closest(`.${styles.pageDock}`);
+    expect(pageDock).toHaveClass(styles.modifiers.expanded);
+  });
+
+  test(`Renders with ${styles.modifiers.textExpanded} when isDockTextExpanded is true and variant is docked`, () => {
+    render(
+      <Page
+        variant="docked"
+        isDockTextExpanded
+        dockContent={<>Dock content</>}
+        masthead={<>Masthead</>}
+        data-testid="page"
+      ></Page>
+    );
+
+    const pageDock = screen.getByText('Dock content').closest(`.${styles.pageDock}`);
+    expect(pageDock).toHaveClass(styles.modifiers.textExpanded);
   });
 
   test(`Renders with ${styles.pageDockMain} wrapper when variant is docked`, () => {
-    render(<Page variant="docked" masthead={<>Masthead</>} data-testid="page"></Page>);
+    render(<Page variant="docked" dockContent={<>Dock content</>} masthead={<>Masthead</>} data-testid="page"></Page>);
 
-    const pageDockMain = screen.getByText('Masthead').closest(`.${styles.pageDockMain}`);
+    const pageDockMain = screen.getByText('Dock content').closest(`.${styles.pageDockMain}`);
     expect(pageDockMain).toBeInTheDocument();
   });
 });
diff --git a/packages/react-core/src/demos/Page.md b/packages/react-core/src/demos/Page.md
index 202cd65d792..b4acc662417 100644
--- a/packages/react-core/src/demos/Page.md
+++ b/packages/react-core/src/demos/Page.md
@@ -18,6 +18,8 @@ import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
 import pfIconLogo from '@patternfly/react-core/src/demos/assets/PF-IconLogo-color.svg';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
 
 - All examples set the `isManagedSidebar` prop on the Page component to have the sidebar automatically close for smaller screen widths. You can also manually control this behavior by not adding the `isManagedSidebar` prop and instead:
   1. Add an onNavToggle callback to PageHeader
diff --git a/packages/react-core/src/demos/examples/Page/PageDockedNav.tsx b/packages/react-core/src/demos/examples/Page/PageDockedNav.tsx
index 962c2210af3..3f68cae39d9 100644
--- a/packages/react-core/src/demos/examples/Page/PageDockedNav.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageDockedNav.tsx
@@ -1,18 +1,13 @@
 import { useRef, useState } from 'react';
 import {
-  Avatar,
   Brand,
   Breadcrumb,
   BreadcrumbItem,
   Button,
-  ButtonVariant,
   Card,
   CardBody,
   Content,
   Divider,
-  Dropdown,
-  DropdownItem,
-  DropdownList,
   Gallery,
   GalleryItem,
   Masthead,
@@ -20,12 +15,14 @@ import {
   MastheadLogo,
   MastheadContent,
   MastheadBrand,
+  MastheadToggle,
   MenuToggle,
   Nav,
   NavItem,
   NavList,
   Page,
   PageSection,
+  PageToggleButton,
   SkipToContent,
   Toolbar,
   ToolbarContent,
@@ -38,7 +35,8 @@ import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
 import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
-import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
+import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import pfIconLogo from '@patternfly/react-core/src/demos/assets/PF-IconLogo-color.svg';
 
 interface NavOnSelectProps {
@@ -48,20 +46,109 @@ interface NavOnSelectProps {
 }
 
 export const PageDockedNav: React.FunctionComponent = () => {
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const [activeItem, setActiveItem] = useState(1);
+  const [isDockExpanded, setIsDockExpanded] = useState(false);
+  const [isDockTextExpanded, setIsDockTextExpanded] = useState(false);
 
   const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, selectedItem: NavOnSelectProps) => {
     typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
   };
 
-  const onDropdownToggle = () => {
-    setIsDropdownOpen((prevIsOpen) => !prevIsOpen);
-  };
+  const mobileTextLogo = (
+    <svg height="37px" viewBox="0 0 679 158">
+      <title>PatternFly</title>
+      <defs>
+        <linearGradient x1="68%" y1="2.25860997e-13%" x2="32%" y2="100%" id="linearGradient-">
+          <stop stopColor="#2B9AF3" offset="0%"></stop>
+          <stop stopColor="#73BCF7" stopOpacity="0.502212631" offset="100%"></stop>
+        </linearGradient>
+      </defs>
+      <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <g
+          transform="translate(206.000000, 45.750000)"
+          fill="var(--pf-t--global--text--color--regular)"
+          fillRule="nonzero"
+        >
+          <path d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"></path>
+          <path d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"></path>
+          <path d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"></path>
+          <path d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"></path>
+          <path d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"></path>
+          <path d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"></path>
+          <path d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"></path>
+          <polygon points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"></polygon>
+          <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"></polygon>
+          <path d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"></path>
+        </g>
+        <g transform="translate(0.000000, 0.000000)">
+          <path
+            d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
+            fill="#0066CC"
+          ></path>
+          <path
+            d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
+            fill="url(#linearGradient-)"
+          ></path>
+          <path
+            d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
+            fill="url(#linearGradient-)"
+            transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
+          ></path>
+        </g>
+      </g>
+    </svg>
+  );
 
-  const onDropdownSelect = () => {
-    setIsDropdownOpen(false);
-  };
+  const dockTextLogo = (
+    <svg height="37px" viewBox="0 0 679 158">
+      <title>PatternFly</title>
+      <defs>
+        <linearGradient
+          x1="68%"
+          y1="2.25860997e-13%"
+          x2="32%"
+          y2="100%"
+          id="linearGradient-nav-docked-expanded-example-masthead"
+        >
+          <stop stopColor="#2B9AF3" offset="0%"></stop>
+          <stop stopColor="#73BCF7" stopOpacity="0.502212631" offset="100%"></stop>
+        </linearGradient>
+      </defs>
+      <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <g
+          transform="translate(206.000000, 45.750000)"
+          fill="var(--pf-t--global--text--color--regular)"
+          fillRule="nonzero"
+        >
+          <path d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"></path>
+          <path d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"></path>
+          <path d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"></path>
+          <path d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"></path>
+          <path d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"></path>
+          <path d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"></path>
+          <path d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"></path>
+          <polygon points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"></polygon>
+          <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"></polygon>
+          <path d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"></path>
+        </g>
+        <g transform="translate(0.000000, 0.000000)">
+          <path
+            d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
+            fill="#0066CC"
+          ></path>
+          <path
+            d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
+            fill="url(#linearGradient-nav-docked-expanded-example-masthead)"
+          ></path>
+          <path
+            d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
+            fill="url(#linearGradient-nav-docked-expanded-example-masthead)"
+            transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
+          ></path>
+        </g>
+      </g>
+    </svg>
+  );
 
   const dashboardBreadcrumb = (
     <Breadcrumb>
@@ -74,142 +161,254 @@ export const PageDockedNav: React.FunctionComponent = () => {
     </Breadcrumb>
   );
 
-  const userDropdownItems = [
-    <>
-      <DropdownItem key="group 2 profile">My profile</DropdownItem>
-      <DropdownItem key="group 2 user">User management</DropdownItem>
-      <DropdownItem key="group 2 logout">Logout</DropdownItem>
-    </>
-  ];
-
   const navItem1Ref = useRef<HTMLAnchorElement>(null);
   const navItem2Ref = useRef<HTMLAnchorElement>(null);
   const navItem3Ref = useRef<HTMLAnchorElement>(null);
   const navItem4Ref = useRef<HTMLAnchorElement>(null);
+  const appsRef = useRef<HTMLButtonElement>(null);
   const settingsRef = useRef<HTMLButtonElement>(null);
   const helpRef = useRef<HTMLButtonElement>(null);
-  const userMenuRef = useRef<HTMLButtonElement>(null);
+  const mobileToggleRef = useRef<HTMLButtonElement>(null);
+  const dockedToggleRef = useRef<HTMLButtonElement>(null);
+
+  const onToggleDock = () => {
+    const willBeExpanded = !isDockExpanded;
+    setIsDockExpanded(willBeExpanded);
+    setIsDockTextExpanded(!isDockTextExpanded);
 
-  const masthead = (
-    <Masthead id="icon-router-link" variant="docked">
+    // Shift focus between mobile and docked toggle buttons
+    setTimeout(() => {
+      if (willBeExpanded) {
+        // Opening: focus the docked toggle button
+        dockedToggleRef.current?.focus();
+      } else {
+        // Closing: focus the mobile toggle button
+        mobileToggleRef.current?.focus();
+      }
+    }, 200);
+  };
+
+  // Mobile masthead - shown on mobile viewports only, hidden on desktop
+  const mobileMasthead = (
+    <Masthead display={{ default: 'inline' }} id="mobile-masthead">
       <MastheadMain>
+        <MastheadToggle>
+          <PageToggleButton
+            innerRef={mobileToggleRef}
+            variant="plain"
+            aria-label="Global navigation"
+            isSidebarOpen={isDockExpanded}
+            onSidebarToggle={onToggleDock}
+            isHamburgerButton
+          />
+        </MastheadToggle>
         <MastheadBrand>
           <MastheadLogo component={(props) => <a {...props} href="#" />}>
+            {mobileTextLogo}
+            {/* <Brand src={pfHorizontalLogo} alt="PatternFly" heights={{ default: '36px' }} className="show-light" /> */}
+            {/* <Brand src={pfHorizontalLogoReverse} alt="PatternFly" heights={{ default: '36px' }} className="show-dark" /> */}
+          </MastheadLogo>
+        </MastheadBrand>
+      </MastheadMain>
+      <MastheadContent>
+        <Toolbar isStatic id="mobile-toolbar">
+          <ToolbarContent>
+            <ToolbarItem align={{ default: 'alignEnd' }}>
+              <Button variant="plain" icon={<SearchIcon />} aria-label="Search" />
+            </ToolbarItem>
+          </ToolbarContent>
+        </Toolbar>
+      </MastheadContent>
+    </Masthead>
+  );
+
+  // Docked masthead - vertical navigation sidebar
+  const dockedMasthead = (
+    <Masthead display={{ default: undefined }} id="docked-masthead" variant="docked">
+      <MastheadMain>
+        <MastheadToggle>
+          <Button
+            ref={dockedToggleRef}
+            variant="plain"
+            isHamburger
+            onClick={onToggleDock}
+            aria-label="Global navigation"
+            isExpanded={isDockTextExpanded}
+          />
+        </MastheadToggle>
+        <MastheadBrand>
+          <MastheadLogo component={(props) => <a {...props} href="#" />} isCompact>
             <Brand src={pfIconLogo} alt="PatternFly" heights={{ default: '37px' }} />
           </MastheadLogo>
+          <MastheadLogo component={(props) => <a {...props} href="#" />}>
+            {dockTextLogo}
+            {/* <Brand src={pfHorizontalLogo} alt="PatternFly" heights={{ default: '37px' }} className="show-light" />
+            <Brand src={pfHorizontalLogoReverse} alt="PatternFly" heights={{ default: '37px' }} className="show-dark" /> */}
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <Divider />
       <MastheadContent>
-        <Toolbar id="toolbar" isVertical>
+        <Toolbar isVertical>
           <ToolbarContent>
             <ToolbarItem>
-              <Nav onSelect={onNavSelect} variant="docked" aria-label="Icon global" ouiaId="IconNav">
+              <Nav onSelect={onNavSelect} variant="docked" isTextExpanded={isDockTextExpanded} aria-label="Global">
                 <NavList>
                   <NavItem
                     preventDefault
-                    id="nav-icon-link1"
-                    to="#nav-icon-link1"
+                    id="nav-link1"
+                    to="#nav-link1"
                     itemId={0}
                     isActive={activeItem === 0}
                     icon={<CubeIcon />}
                     anchorRef={navItem1Ref}
-                    aria-label="Link 1"
-                  />
+                    aria-label="System panel"
+                  >
+                    System panel
+                  </NavItem>
                   <NavItem
                     preventDefault
-                    id="nav-icon-link2"
-                    to="#nav-icon-link2"
+                    id="nav-link2"
+                    to="#nav-link2"
                     itemId={1}
                     isActive={activeItem === 1}
                     icon={<FolderIcon />}
                     anchorRef={navItem2Ref}
-                    aria-label="Link 2"
-                  />
+                    aria-label="Policy"
+                  >
+                    Policy
+                  </NavItem>
                   <NavItem
                     preventDefault
-                    id="nav-icon-link3"
-                    to="#nav-icon-link3"
+                    id="nav-link3"
+                    to="#nav-link3"
                     itemId={2}
                     isActive={activeItem === 2}
                     icon={<CloudIcon />}
                     anchorRef={navItem3Ref}
-                    aria-label="Link 3"
-                  />
+                    aria-label="Authentication"
+                  >
+                    Authentication
+                  </NavItem>
                   <NavItem
                     preventDefault
-                    id="nav-icon-link4"
-                    to="#nav-icon-link4"
+                    id="nav-link4"
+                    to="#nav-link4"
                     itemId={3}
                     isActive={activeItem === 3}
                     icon={<CodeIcon />}
                     anchorRef={navItem4Ref}
-                    aria-label="Link 4"
-                  />
+                    aria-label="Network services"
+                  >
+                    Network services
+                  </NavItem>
                 </NavList>
               </Nav>
-              <Tooltip aria="none" aria-live="off" triggerRef={navItem1Ref} content="Link 1"></Tooltip>
-              <Tooltip aria="none" aria-live="off" triggerRef={navItem2Ref} content="Link 2"></Tooltip>
-              <Tooltip aria="none" aria-live="off" triggerRef={navItem3Ref} content="Link 3"></Tooltip>
-              <Tooltip aria="none" aria-live="off" triggerRef={navItem4Ref} content="Link 4"></Tooltip>
+              {!isDockTextExpanded && (
+                <>
+                  <Tooltip aria="none" aria-live="off" triggerRef={navItem1Ref} content="System panel"></Tooltip>
+                  <Tooltip aria="none" aria-live="off" triggerRef={navItem2Ref} content="Policy"></Tooltip>
+                  <Tooltip aria="none" aria-live="off" triggerRef={navItem3Ref} content="Authentication"></Tooltip>
+                  <Tooltip aria="none" aria-live="off" triggerRef={navItem4Ref} content="Network services"></Tooltip>
+                </>
+              )}
             </ToolbarItem>
             <ToolbarGroup
               variant="action-group-plain"
               align={{ default: 'alignEnd' }}
               gap={{ default: 'gapNone', md: 'gapMd' }}
             >
-              <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
-                <ToolbarItem>
+              <ToolbarItem>
+                {isDockTextExpanded ? (
+                  <MenuToggle
+                    ref={appsRef}
+                    variant="plain"
+                    icon={<ThIcon />}
+                    isDock
+                    isTextExpanded={isDockTextExpanded}
+                    aria-label="Applications"
+                  >
+                    Applications
+                  </MenuToggle>
+                ) : (
+                  <Tooltip aria="none" aria-live="off" triggerRef={appsRef} content="Applications">
+                    <MenuToggle
+                      ref={appsRef}
+                      variant="plain"
+                      icon={<ThIcon />}
+                      isDock
+                      isTextExpanded={isDockTextExpanded}
+                      aria-label="Applications"
+                    >
+                      Applications
+                    </MenuToggle>
+                  </Tooltip>
+                )}
+              </ToolbarItem>
+              <ToolbarItem>
+                {isDockTextExpanded ? (
+                  <Button
+                    ref={settingsRef}
+                    aria-label="Settings"
+                    isSettings
+                    variant="plain"
+                    isDock
+                    isTextExpanded={isDockTextExpanded}
+                  >
+                    Settings
+                  </Button>
+                ) : (
                   <Tooltip aria="none" aria-live="off" triggerRef={settingsRef} content="Settings">
-                    <Button ref={settingsRef} aria-label="Settings" isSettings variant="plain" />
+                    <Button
+                      ref={settingsRef}
+                      aria-label="Settings"
+                      isSettings
+                      variant="plain"
+                      isDock
+                      isTextExpanded={isDockTextExpanded}
+                    >
+                      Settings
+                    </Button>
                   </Tooltip>
-                </ToolbarItem>
-                <ToolbarItem>
+                )}
+              </ToolbarItem>
+              <ToolbarItem>
+                {isDockTextExpanded ? (
+                  <MenuToggle
+                    ref={helpRef}
+                    variant="plain"
+                    icon={<QuestionCircleIcon />}
+                    isDock
+                    isTextExpanded={isDockTextExpanded}
+                    aria-label="Help"
+                  >
+                    Help
+                  </MenuToggle>
+                ) : (
                   <Tooltip aria="none" aria-live="off" triggerRef={helpRef} content="Help">
-                    <Button
+                    <MenuToggle
                       ref={helpRef}
-                      aria-label="Help"
-                      variant={ButtonVariant.plain}
+                      variant="plain"
                       icon={<QuestionCircleIcon />}
-                    />
+                      isDock
+                      isTextExpanded={isDockTextExpanded}
+                      aria-label="Help"
+                    >
+                      Help
+                    </MenuToggle>
                   </Tooltip>
-                </ToolbarItem>
-              </ToolbarGroup>
+                )}
+              </ToolbarItem>
             </ToolbarGroup>
-            <ToolbarItem>
-              <Dropdown
-                isOpen={isDropdownOpen}
-                onSelect={onDropdownSelect}
-                shouldFocusToggleOnSelect
-                onOpenChange={(isOpen: boolean) => setIsDropdownOpen(isOpen)}
-                toggle={{
-                  toggleNode: (
-                    <Tooltip content="User menu" aria="none" aria-live="off" triggerRef={userMenuRef}>
-                      <MenuToggle
-                        ref={userMenuRef}
-                        onClick={onDropdownToggle}
-                        isExpanded={isDropdownOpen}
-                        icon={<Avatar src={imgAvatar} alt="" size="sm" />}
-                        variant="plain"
-                        aria-label="User menu"
-                      />
-                    </Tooltip>
-                  ),
-                  toggleRef: userMenuRef
-                }}
-              >
-                <DropdownList>{userDropdownItems}</DropdownList>
-              </Dropdown>
-            </ToolbarItem>
           </ToolbarContent>
         </Toolbar>
       </MastheadContent>
     </Masthead>
   );
 
-  const mainContainerId = 'main-content-page-layout-tertiary-nav';
+  const mainContainerId = 'main-content-page-layout-docked-nav';
 
-  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
+  const handleClick = (event: React.MouseEvent) => {
     event.preventDefault();
 
     const mainContentElement = document.getElementById(mainContainerId);
@@ -225,35 +424,40 @@ export const PageDockedNav: React.FunctionComponent = () => {
   );
 
   return (
-    <Page
-      variant="docked"
-      masthead={masthead}
-      skipToContent={pageSkipToContent}
-      breadcrumb={dashboardBreadcrumb}
-      mainContainerId={mainContainerId}
-      isHorizontalSubnavWidthLimited
-      isBreadcrumbWidthLimited
-      isBreadcrumbGrouped
-      additionalGroupedContent={
-        <PageSection aria-labelledby="main-title">
-          <Content>
-            <h1 id="main-title">Main title</h1>
-            <p>This is a full page demo.</p>
-          </Content>
+    <>
+      <Page
+        variant="docked"
+        isDockExpanded={isDockExpanded}
+        isDockTextExpanded={isDockTextExpanded}
+        masthead={mobileMasthead}
+        dockedMasthead={dockedMasthead}
+        skipToContent={pageSkipToContent}
+        breadcrumb={dashboardBreadcrumb}
+        mainContainerId={mainContainerId}
+        isHorizontalSubnavWidthLimited
+        isBreadcrumbWidthLimited
+        isBreadcrumbGrouped
+        additionalGroupedContent={
+          <PageSection aria-labelledby="main-title">
+            <Content>
+              <h1 id="main-title">Main title</h1>
+              <p>This is a full page demo.</p>
+            </Content>
+          </PageSection>
+        }
+      >
+        <PageSection aria-label="Card gallery">
+          <Gallery hasGutter>
+            {Array.from({ length: 10 }).map((_value, index) => (
+              <GalleryItem key={index}>
+                <Card>
+                  <CardBody>This is a card</CardBody>
+                </Card>
+              </GalleryItem>
+            ))}
+          </Gallery>
         </PageSection>
-      }
-    >
-      <PageSection aria-label="Card gallery">
-        <Gallery hasGutter>
-          {Array.from({ length: 10 }).map((_value, index) => (
-            <GalleryItem key={index}>
-              <Card>
-                <CardBody>This is a card</CardBody>
-              </Card>
-            </GalleryItem>
-          ))}
-        </Gallery>
-      </PageSection>
-    </Page>
+      </Page>
+    </>
   );
 };