diff --git a/packages/react-core/package.json b/packages/react-core/package.json
index bbbbc75e27c..08d930f8990 100644
--- a/packages/react-core/package.json
+++ b/packages/react-core/package.json
@@ -55,7 +55,7 @@
     "tslib": "^2.6.2"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.201",
+    "@patternfly/patternfly": "6.0.0-alpha.203",
     "case-anything": "^2.1.13",
     "css": "^3.0.0",
     "fs-extra": "^11.2.0"
diff --git a/packages/react-core/src/components/Masthead/MastheadBrand.tsx b/packages/react-core/src/components/Masthead/MastheadBrand.tsx
index 454fabd635b..e255a473298 100644
--- a/packages/react-core/src/components/Masthead/MastheadBrand.tsx
+++ b/packages/react-core/src/components/Masthead/MastheadBrand.tsx
@@ -2,34 +2,20 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Masthead/masthead';
 import { css } from '@patternfly/react-styles';
 
-export interface MastheadBrandProps
-  extends React.DetailedHTMLProps<React.HTMLProps<HTMLAnchorElement>, HTMLAnchorElement> {
+export interface MastheadBrandProps extends React.DetailedHTMLProps<React.HTMLProps<HTMLDivElement>, HTMLDivElement> {
   /** Content rendered inside of the masthead brand. */
   children?: React.ReactNode;
   /** Additional classes added to the masthead brand. */
   className?: string;
-  /** Component type of the masthead brand. */
-  component?: React.ElementType<any> | React.ComponentType<any>;
 }
 
 export const MastheadBrand: React.FunctionComponent<MastheadBrandProps> = ({
   children,
   className,
-  component,
   ...props
-}: MastheadBrandProps) => {
-  let Component = component as any;
-  if (!component) {
-    if (props?.href !== undefined) {
-      Component = 'a';
-    } else {
-      Component = 'span';
-    }
-  }
-  return (
-    <Component className={css(styles.mastheadBrand, className)} {...(Component === 'a' && { tabIndex: 0 })} {...props}>
-      {children}
-    </Component>
-  );
-};
+}: MastheadBrandProps) => (
+  <div className={css(styles.mastheadBrand, className)} {...props}>
+    {children}
+  </div>
+);
 MastheadBrand.displayName = 'MastheadBrand';
diff --git a/packages/react-core/src/components/Masthead/MastheadLogo.tsx b/packages/react-core/src/components/Masthead/MastheadLogo.tsx
new file mode 100644
index 00000000000..dcefa93f871
--- /dev/null
+++ b/packages/react-core/src/components/Masthead/MastheadLogo.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Masthead/masthead';
+import { css } from '@patternfly/react-styles';
+
+export interface MastheadLogoProps
+  extends React.DetailedHTMLProps<React.HTMLProps<HTMLAnchorElement>, HTMLAnchorElement> {
+  /** Content rendered inside of the masthead logo. */
+  children?: React.ReactNode;
+  /** Additional classes added to the masthead logo. */
+  className?: string;
+  /** Component type of the masthead logo. */
+  component?: React.ElementType<any> | React.ComponentType<any>;
+}
+
+export const MastheadLogo: React.FunctionComponent<MastheadLogoProps> = ({
+  children,
+  className,
+  component,
+  ...props
+}: MastheadLogoProps) => {
+  let Component = component as any;
+  if (!component) {
+    if (props?.href !== undefined) {
+      Component = 'a';
+    } else {
+      Component = 'span';
+    }
+  }
+  return (
+    <Component className={css(styles.mastheadLogo, className)} {...(Component === 'a' && { tabIndex: 0 })} {...props}>
+      {children}
+    </Component>
+  );
+};
+MastheadLogo.displayName = 'MastheadLogo';
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 df7b7cc1a35..b1e72a72b4c 100644
--- a/packages/react-core/src/components/Masthead/__tests__/Masthead.test.tsx
+++ b/packages/react-core/src/components/Masthead/__tests__/Masthead.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import { Masthead, MastheadBrand, MastheadContent, MastheadMain, MastheadToggle } from '../index';
+import { Masthead, MastheadMain, MastheadLogo, MastheadContent, MastheadBrand, MastheadToggle } from '../index';
 
 describe('Masthead', () => {
   test('verify basic', () => {
@@ -12,9 +12,11 @@ describe('Masthead', () => {
   test('verify full structure', () => {
     const { asFragment } = render(
       <Masthead>
-        <MastheadToggle>Toggle</MastheadToggle>
         <MastheadMain>
-          <MastheadBrand>Logo</MastheadBrand>
+          <MastheadToggle>Toggle</MastheadToggle>
+          <MastheadBrand>
+            <MastheadLogo>Logo</MastheadLogo>
+          </MastheadBrand>
         </MastheadMain>
         <MastheadContent>
           <span>Content</span>
@@ -72,33 +74,33 @@ describe('Masthead', () => {
   });
 });
 
-describe('MastheadBrand', () => {
+describe('MastheadLogo', () => {
   test('verify basic', () => {
-    const { asFragment } = render(<MastheadBrand>test</MastheadBrand>);
+    const { asFragment } = render(<MastheadLogo>test</MastheadLogo>);
 
     expect(asFragment()).toMatchSnapshot();
   });
 
   test('verify custom class', () => {
-    const { asFragment } = render(<MastheadBrand className="custom-css">test</MastheadBrand>);
+    const { asFragment } = render(<MastheadLogo className="custom-css">test</MastheadLogo>);
 
     expect(asFragment()).toMatchSnapshot();
   });
 
   test('verify default component', () => {
-    const { asFragment } = render(<MastheadBrand>test</MastheadBrand>);
+    const { asFragment } = render(<MastheadLogo>test</MastheadLogo>);
 
     expect(asFragment()).toMatchSnapshot();
   });
 
   test('verify custom component', () => {
-    const { asFragment } = render(<MastheadBrand component="div">test</MastheadBrand>);
+    const { asFragment } = render(<MastheadLogo component="div">test</MastheadLogo>);
 
     expect(asFragment()).toMatchSnapshot();
   });
 
   test('verify anchor component with href', () => {
-    const { asFragment } = render(<MastheadBrand href="#">test</MastheadBrand>);
+    const { asFragment } = render(<MastheadLogo href="#">test</MastheadLogo>);
 
     expect(asFragment()).toMatchSnapshot();
   });
@@ -118,15 +120,15 @@ describe('MastheadContent', () => {
   });
 });
 
-describe('MastheadMain', () => {
+describe('MastheadBrand', () => {
   test('verify basic', () => {
-    const { asFragment } = render(<MastheadMain>test</MastheadMain>);
+    const { asFragment } = render(<MastheadBrand>test</MastheadBrand>);
 
     expect(asFragment()).toMatchSnapshot();
   });
 
   test('verify custom class', () => {
-    const { asFragment } = render(<MastheadMain className="custom-css">test</MastheadMain>);
+    const { asFragment } = render(<MastheadBrand className="custom-css">test</MastheadBrand>);
 
     expect(asFragment()).toMatchSnapshot();
   });
diff --git a/packages/react-core/src/components/Masthead/__tests__/__snapshots__/Masthead.test.tsx.snap b/packages/react-core/src/components/Masthead/__tests__/__snapshots__/Masthead.test.tsx.snap
index 073d55f0251..54f81f5c1c7 100644
--- a/packages/react-core/src/components/Masthead/__tests__/__snapshots__/Masthead.test.tsx.snap
+++ b/packages/react-core/src/components/Masthead/__tests__/__snapshots__/Masthead.test.tsx.snap
@@ -25,19 +25,23 @@ exports[`Masthead verify full structure 1`] = `
   <header
     class="pf-v6-c-masthead pf-m-display-inline-on-md"
   >
-    <span
-      class="pf-v6-c-masthead__toggle"
-    >
-      Toggle
-    </span>
     <div
       class="pf-v6-c-masthead__main"
     >
       <span
-        class="pf-v6-c-masthead__brand"
+        class="pf-v6-c-masthead__toggle"
       >
-        Logo
+        Toggle
       </span>
+      <div
+        class="pf-v6-c-masthead__brand"
+      >
+        <span
+          class="pf-v6-c-masthead__logo"
+        >
+          Logo
+        </span>
+      </div>
     </div>
     <div
       class="pf-v6-c-masthead__content"
@@ -150,95 +154,95 @@ exports[`Masthead verify stack display breakpoints 1`] = `
 </DocumentFragment>
 `;
 
-exports[`MastheadBrand verify anchor component with href 1`] = `
+exports[`MastheadBrand verify basic 1`] = `
 <DocumentFragment>
-  <a
+  <div
     class="pf-v6-c-masthead__brand"
-    href="#"
-    tabindex="0"
   >
     test
-  </a>
+  </div>
 </DocumentFragment>
 `;
 
-exports[`MastheadBrand verify basic 1`] = `
+exports[`MastheadBrand verify custom class 1`] = `
 <DocumentFragment>
-  <span
-    class="pf-v6-c-masthead__brand"
+  <div
+    class="pf-v6-c-masthead__brand custom-css"
   >
     test
-  </span>
+  </div>
 </DocumentFragment>
 `;
 
-exports[`MastheadBrand verify custom class 1`] = `
+exports[`MastheadContent verify basic 1`] = `
 <DocumentFragment>
-  <span
-    class="pf-v6-c-masthead__brand custom-css"
+  <div
+    class="pf-v6-c-masthead__content"
   >
     test
-  </span>
+  </div>
 </DocumentFragment>
 `;
 
-exports[`MastheadBrand verify custom component 1`] = `
+exports[`MastheadContent verify custom class 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-masthead__brand"
+    class="pf-v6-c-masthead__content custom-css"
   >
     test
   </div>
 </DocumentFragment>
 `;
 
-exports[`MastheadBrand verify default component 1`] = `
+exports[`MastheadLogo verify anchor component with href 1`] = `
 <DocumentFragment>
-  <span
-    class="pf-v6-c-masthead__brand"
+  <a
+    class="pf-v6-c-masthead__logo"
+    href="#"
+    tabindex="0"
   >
     test
-  </span>
+  </a>
 </DocumentFragment>
 `;
 
-exports[`MastheadContent verify basic 1`] = `
+exports[`MastheadLogo verify basic 1`] = `
 <DocumentFragment>
-  <div
-    class="pf-v6-c-masthead__content"
+  <span
+    class="pf-v6-c-masthead__logo"
   >
     test
-  </div>
+  </span>
 </DocumentFragment>
 `;
 
-exports[`MastheadContent verify custom class 1`] = `
+exports[`MastheadLogo verify custom class 1`] = `
 <DocumentFragment>
-  <div
-    class="pf-v6-c-masthead__content custom-css"
+  <span
+    class="pf-v6-c-masthead__logo custom-css"
   >
     test
-  </div>
+  </span>
 </DocumentFragment>
 `;
 
-exports[`MastheadMain verify basic 1`] = `
+exports[`MastheadLogo verify custom component 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-masthead__main"
+    class="pf-v6-c-masthead__logo"
   >
     test
   </div>
 </DocumentFragment>
 `;
 
-exports[`MastheadMain verify custom class 1`] = `
+exports[`MastheadLogo verify default component 1`] = `
 <DocumentFragment>
-  <div
-    class="pf-v6-c-masthead__main custom-css"
+  <span
+    class="pf-v6-c-masthead__logo"
   >
     test
-  </div>
+  </span>
 </DocumentFragment>
 `;
 
diff --git a/packages/react-core/src/components/Masthead/examples/Masthead.md b/packages/react-core/src/components/Masthead/examples/Masthead.md
index edf3945c7a5..b629c9a87bd 100644
--- a/packages/react-core/src/components/Masthead/examples/Masthead.md
+++ b/packages/react-core/src/components/Masthead/examples/Masthead.md
@@ -2,16 +2,16 @@
 id: Masthead
 section: components
 cssPrefix: pf-v5-c-masthead
-propComponents: ['Masthead', 'MastheadToggle', 'MastheadMain', 'MastheadBrand', 'MastheadContent']
+propComponents: ['Masthead', 'MastheadToggle', 'MastheadMain', 'MastheadBrand', MastheadLogo, 'MastheadContent']
 ---
 
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import { Link } from '@reach/router';
 import pfIcon from '../../assets/PF-HorizontalLogo-Color.svg';
 
-`Masthead` should contain the following components to maintain proper layout and formatting: `MastheadToggle`, `MastheadMain`, and `MastheadContent`.
+To maintain proper layout and formatting, a `<Masthead>` should contain both a `<MastheadMain>` and `<MastheadContent>` component.
 
-`MastheadMain` represents the smaller area taken up by a logo, and will typically contain a `MastheadBrand`. `MastheadContent` represents the main portion of the masthead area and will typically contain a `Toolbar` or other menu-like content such as `Dropdown`.
+ Mastheads contain the `<MastheadMain>` that wraps a `<PageToggleButton>` and `<MastheadBrand>`. The `<MastheadBrand>` wraps `<MastheadLogo>`. The masthead also contains  the page's header toolbar within `<MastheadContent>`.
 
 ## Examples
 
diff --git a/packages/react-core/src/components/Masthead/examples/MastheadBasic.tsx b/packages/react-core/src/components/Masthead/examples/MastheadBasic.tsx
index e858e55e28d..d9259f14fdc 100644
--- a/packages/react-core/src/components/Masthead/examples/MastheadBasic.tsx
+++ b/packages/react-core/src/components/Masthead/examples/MastheadBasic.tsx
@@ -1,14 +1,24 @@
 import React from 'react';
-import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
+import {
+  Masthead,
+  MastheadMain,
+  MastheadToggle,
+  MastheadBrand,
+  MastheadLogo,
+  MastheadContent,
+  Button
+} from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
 export const MastheadBasic: React.FunctionComponent = () => (
   <Masthead id="basic-example">
-    <MastheadToggle>
-      <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
-    </MastheadToggle>
     <MastheadMain>
-      <MastheadBrand component="a">Logo</MastheadBrand>
+      <MastheadToggle>
+        <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
+      </MastheadToggle>
+      <MastheadBrand>
+        <MastheadLogo component="a">Logo</MastheadLogo>
+      </MastheadBrand>
     </MastheadMain>
     <MastheadContent>
       <span>Content</span>
diff --git a/packages/react-core/src/components/Masthead/examples/MastheadBasicMixedContent.tsx b/packages/react-core/src/components/Masthead/examples/MastheadBasicMixedContent.tsx
index 26cd66672c7..8e40a2fc6cb 100644
--- a/packages/react-core/src/components/Masthead/examples/MastheadBasicMixedContent.tsx
+++ b/packages/react-core/src/components/Masthead/examples/MastheadBasicMixedContent.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import {
   Masthead,
-  MastheadToggle,
   MastheadMain,
+  MastheadToggle,
   MastheadBrand,
+  MastheadLogo,
   MastheadContent,
   Button,
   Flex,
@@ -13,11 +14,13 @@ import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
 export const MastheadBasicMixedContent: React.FunctionComponent = () => (
   <Masthead id="basic-mixed">
-    <MastheadToggle>
-      <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
-    </MastheadToggle>
     <MastheadMain>
-      <MastheadBrand component="a">Logo</MastheadBrand>
+      <MastheadToggle>
+        <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
+      </MastheadToggle>
+      <MastheadBrand>
+        <MastheadLogo component="a">Logo</MastheadLogo>
+      </MastheadBrand>
     </MastheadMain>
     <MastheadContent>
       <Flex>
diff --git a/packages/react-core/src/components/Masthead/examples/MastheadDisplayInline.tsx b/packages/react-core/src/components/Masthead/examples/MastheadDisplayInline.tsx
index 7181246de8a..52578b2ee24 100644
--- a/packages/react-core/src/components/Masthead/examples/MastheadDisplayInline.tsx
+++ b/packages/react-core/src/components/Masthead/examples/MastheadDisplayInline.tsx
@@ -1,14 +1,24 @@
 import React from 'react';
-import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
+import {
+  Masthead,
+  MastheadMain,
+  MastheadToggle,
+  MastheadBrand,
+  MastheadLogo,
+  MastheadContent,
+  Button
+} from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
 export const MastheadDisplayInline: React.FunctionComponent = () => (
   <Masthead id="inline-masthead" display={{ default: 'inline' }}>
-    <MastheadToggle>
-      <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
-    </MastheadToggle>
     <MastheadMain>
-      <MastheadBrand component="a">Logo</MastheadBrand>
+      <MastheadToggle>
+        <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
+      </MastheadToggle>
+      <MastheadBrand>
+        <MastheadLogo component="a">Logo</MastheadLogo>
+      </MastheadBrand>
     </MastheadMain>
     <MastheadContent>
       <span>Content</span>
diff --git a/packages/react-core/src/components/Masthead/examples/MastheadDisplayStack.tsx b/packages/react-core/src/components/Masthead/examples/MastheadDisplayStack.tsx
index e0d16bcc4a7..e1979de2d60 100644
--- a/packages/react-core/src/components/Masthead/examples/MastheadDisplayStack.tsx
+++ b/packages/react-core/src/components/Masthead/examples/MastheadDisplayStack.tsx
@@ -1,14 +1,24 @@
 import React from 'react';
-import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
+import {
+  Masthead,
+  MastheadMain,
+  MastheadToggle,
+  MastheadBrand,
+  MastheadLogo,
+  MastheadContent,
+  Button
+} from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
 export const MastheadDisplayStack: React.FunctionComponent = () => (
   <Masthead id="stack-masthead" display={{ default: 'stack' }}>
-    <MastheadToggle>
-      <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
-    </MastheadToggle>
     <MastheadMain>
-      <MastheadBrand component="a">Logo</MastheadBrand>
+      <MastheadToggle>
+        <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
+      </MastheadToggle>
+      <MastheadBrand>
+        <MastheadLogo component="a">Logo</MastheadLogo>
+      </MastheadBrand>
     </MastheadMain>
     <MastheadContent>
       <span>Content</span>
diff --git a/packages/react-core/src/components/Masthead/examples/MastheadDisplayStackInlineResponsive.tsx b/packages/react-core/src/components/Masthead/examples/MastheadDisplayStackInlineResponsive.tsx
index afa7e77813d..8914fbf3e7f 100644
--- a/packages/react-core/src/components/Masthead/examples/MastheadDisplayStackInlineResponsive.tsx
+++ b/packages/react-core/src/components/Masthead/examples/MastheadDisplayStackInlineResponsive.tsx
@@ -1,14 +1,24 @@
 import React from 'react';
-import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
+import {
+  Masthead,
+  MastheadMain,
+  MastheadToggle,
+  MastheadBrand,
+  MastheadLogo,
+  MastheadContent,
+  Button
+} from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
 export const MastheadDisplayStackInlineResponsive: React.FunctionComponent = () => (
   <Masthead id="stack-inline-masthead" display={{ default: 'inline', lg: 'stack', '2xl': 'inline' }}>
-    <MastheadToggle>
-      <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
-    </MastheadToggle>
     <MastheadMain>
-      <MastheadBrand component="a">Logo</MastheadBrand>
+      <MastheadToggle>
+        <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
+      </MastheadToggle>
+      <MastheadBrand>
+        <MastheadLogo component="a">Logo</MastheadLogo>
+      </MastheadBrand>
     </MastheadMain>
     <MastheadContent>
       <span>Content</span>
diff --git a/packages/react-core/src/components/Masthead/examples/MastheadIconRouterLink.tsx b/packages/react-core/src/components/Masthead/examples/MastheadIconRouterLink.tsx
index 8d6d3fbea2b..b497b4305e7 100644
--- a/packages/react-core/src/components/Masthead/examples/MastheadIconRouterLink.tsx
+++ b/packages/react-core/src/components/Masthead/examples/MastheadIconRouterLink.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import {
   Masthead,
-  MastheadToggle,
   MastheadMain,
+  MastheadToggle,
   MastheadBrand,
+  MastheadLogo,
   MastheadContent,
   Button,
   Brand
@@ -14,12 +15,14 @@ import pfIcon from '../../assets/PF-HorizontalLogo-Color.svg';
 
 export const MastheadIconRouterLink: React.FunctionComponent = () => (
   <Masthead id="icon-router-link">
-    <MastheadToggle>
-      <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
-    </MastheadToggle>
     <MastheadMain>
-      <MastheadBrand component={(props) => <Link {...props} to="#" />}>
-        <Brand src={pfIcon} alt="PatternFly" heights={{ default: '36px' }} />
+      <MastheadToggle>
+        <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
+      </MastheadToggle>
+      <MastheadBrand>
+        <MastheadLogo component={(props) => <Link {...props} to="#" />}>
+          <Brand src={pfIcon} alt="PatternFly" heights={{ default: '36px' }} />
+        </MastheadLogo>
       </MastheadBrand>
     </MastheadMain>
     <MastheadContent>
diff --git a/packages/react-core/src/components/Masthead/examples/MastheadInsets.tsx b/packages/react-core/src/components/Masthead/examples/MastheadInsets.tsx
index 92e99e4ae09..375f600c74d 100644
--- a/packages/react-core/src/components/Masthead/examples/MastheadInsets.tsx
+++ b/packages/react-core/src/components/Masthead/examples/MastheadInsets.tsx
@@ -1,14 +1,24 @@
 import React from 'react';
-import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
+import {
+  Masthead,
+  MastheadMain,
+  MastheadToggle,
+  MastheadBrand,
+  MastheadLogo,
+  MastheadContent,
+  Button
+} from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
 export const MastheadInsets: React.FunctionComponent = () => (
   <Masthead id="inset-masthead" inset={{ default: 'insetSm' }}>
-    <MastheadToggle>
-      <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
-    </MastheadToggle>
     <MastheadMain>
-      <MastheadBrand component="a">Logo</MastheadBrand>
+      <MastheadToggle>
+        <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
+      </MastheadToggle>
+      <MastheadBrand>
+        <MastheadLogo component="a">Logo</MastheadLogo>
+      </MastheadBrand>
     </MastheadMain>
     <MastheadContent>
       <span>Content</span>
diff --git a/packages/react-core/src/components/Masthead/index.ts b/packages/react-core/src/components/Masthead/index.ts
index d58c9417517..81ddd7685a7 100644
--- a/packages/react-core/src/components/Masthead/index.ts
+++ b/packages/react-core/src/components/Masthead/index.ts
@@ -1,5 +1,6 @@
 export * from './Masthead';
 export * from './MastheadBrand';
 export * from './MastheadContent';
+export * from './MastheadLogo';
 export * from './MastheadMain';
 export * from './MastheadToggle';
diff --git a/packages/react-core/src/components/Page/examples/Page.md b/packages/react-core/src/components/Page/examples/Page.md
index aeb2059a92f..1ab3953cd31 100644
--- a/packages/react-core/src/components/Page/examples/Page.md
+++ b/packages/react-core/src/components/Page/examples/Page.md
@@ -16,7 +16,10 @@ import c_page_section_m_limit_width_MaxWidth from '@patternfly/react-tokens/dist
 A page will typically contain the following components:
 
 - A `<Page>` with a `masthead` prop that often contains a [masthead](/components/masthead) component
-  - Mastheads contain the `<PageToggleButton>`, a `<MastheadMain>` that contains a `<MastheadBrand>`, and the page's header toolbar within `<MastheadContent>`.
+
+The `<MastheadMain>` component includes the smaller area that typically contains the `<MastheadToggle>` and a `<MastheadLogo>`. `<MastheadContent>` represents the main portion of the masthead, and will typically contain a `<Toolbar>` or other menu-like components, like a `<Dropdown>`.
+
+  - Mastheads contain a `<MastheadMain>` component, which includes the `<MastheadToggle>`, a `<MastheadLogo>`,  and the page's toolbar (via `<MastheadContent>`.) The `<MastheadToggle>` component contains a `<PageToggleButton>`, and the `<MastheadLogo>` component contains a `<MastheadBrand>`. 
 - 1 or more `<PageSidebarBody>` components inside `<PageSidebar>` for vertical navigation or other sidebar content
 - 1 or more `<PageSection>` components
 
diff --git a/packages/react-core/src/components/Page/examples/PageCenteredSection.tsx b/packages/react-core/src/components/Page/examples/PageCenteredSection.tsx
index 99d8b8f1018..10d136138b7 100644
--- a/packages/react-core/src/components/Page/examples/PageCenteredSection.tsx
+++ b/packages/react-core/src/components/Page/examples/PageCenteredSection.tsx
@@ -2,9 +2,10 @@ import React from 'react';
 import {
   Page,
   Masthead,
-  MastheadToggle,
   MastheadMain,
+  MastheadToggle,
   MastheadBrand,
+  MastheadLogo,
   MastheadContent,
   PageSidebar,
   PageSidebarBody,
@@ -37,20 +38,22 @@ export const PageCenteredSection: React.FunctionComponent = () => {
 
   const masthead = (
     <Masthead>
-      <MastheadToggle>
-        <PageToggleButton
-          variant="plain"
-          aria-label="Global navigation"
-          isSidebarOpen={isSidebarOpen}
-          onSidebarToggle={onSidebarToggle}
-          id="centered-nav-toggle"
-        >
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
       <MastheadMain>
-        <MastheadBrand href="https://patternfly.org" target="_blank">
-          Logo
+        <MastheadToggle>
+          <PageToggleButton
+            variant="plain"
+            aria-label="Global navigation"
+            isSidebarOpen={isSidebarOpen}
+            onSidebarToggle={onSidebarToggle}
+            id="centered-nav-toggle"
+          >
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
+        <MastheadBrand>
+          <MastheadLogo href="https://patternfly.org" target="_blank">
+            Logo
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>{headerToolbar}</MastheadContent>
diff --git a/packages/react-core/src/components/Page/examples/PageGroupSection.tsx b/packages/react-core/src/components/Page/examples/PageGroupSection.tsx
index 8bba7b76509..419b8e161aa 100644
--- a/packages/react-core/src/components/Page/examples/PageGroupSection.tsx
+++ b/packages/react-core/src/components/Page/examples/PageGroupSection.tsx
@@ -2,9 +2,10 @@ import React from 'react';
 import {
   Page,
   Masthead,
-  MastheadToggle,
   MastheadMain,
+  MastheadToggle,
   MastheadBrand,
+  MastheadLogo,
   MastheadContent,
   PageSidebar,
   PageSidebarBody,
@@ -40,20 +41,22 @@ export const PageGroupSection: React.FunctionComponent = () => {
 
   const masthead = (
     <Masthead>
-      <MastheadToggle>
-        <PageToggleButton
-          variant="plain"
-          aria-label="Global navigation"
-          isSidebarOpen={isSidebarOpen}
-          onSidebarToggle={onSidebarToggle}
-          id="group-section-nav-toggle"
-        >
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
       <MastheadMain>
-        <MastheadBrand href="https://patternfly.org" target="_blank">
-          Logo
+        <MastheadToggle>
+          <PageToggleButton
+            variant="plain"
+            aria-label="Global navigation"
+            isSidebarOpen={isSidebarOpen}
+            onSidebarToggle={onSidebarToggle}
+            id="group-section-nav-toggle"
+          >
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
+        <MastheadBrand>
+          <MastheadLogo href="https://patternfly.org" target="_blank">
+            Logo
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>{headerToolbar}</MastheadContent>
diff --git a/packages/react-core/src/components/Page/examples/PageHorizontalNav.tsx b/packages/react-core/src/components/Page/examples/PageHorizontalNav.tsx
index 27deb42f7c7..42a6b56899d 100644
--- a/packages/react-core/src/components/Page/examples/PageHorizontalNav.tsx
+++ b/packages/react-core/src/components/Page/examples/PageHorizontalNav.tsx
@@ -4,6 +4,7 @@ import {
   Masthead,
   MastheadMain,
   MastheadBrand,
+  MastheadLogo,
   MastheadContent,
   PageSection,
   Toolbar,
@@ -24,8 +25,10 @@ export const PageHorizontalNav: React.FunctionComponent = () => {
   const masthead = (
     <Masthead inset={{ default: 'insetXs' }}>
       <MastheadMain>
-        <MastheadBrand href="https://patternfly.org" target="_blank">
-          Logo
+        <MastheadBrand>
+          <MastheadLogo href="https://patternfly.org" target="_blank">
+            Logo
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>{headerToolbar}</MastheadContent>
diff --git a/packages/react-core/src/components/Page/examples/PageMainSectionPadding.tsx b/packages/react-core/src/components/Page/examples/PageMainSectionPadding.tsx
index a014421391c..863ea9d3f9f 100644
--- a/packages/react-core/src/components/Page/examples/PageMainSectionPadding.tsx
+++ b/packages/react-core/src/components/Page/examples/PageMainSectionPadding.tsx
@@ -2,9 +2,10 @@ import React from 'react';
 import {
   Page,
   Masthead,
-  MastheadToggle,
   MastheadMain,
+  MastheadToggle,
   MastheadBrand,
+  MastheadLogo,
   MastheadContent,
   PageSidebar,
   PageSidebarBody,
@@ -33,20 +34,22 @@ export const PageMainSectionPadding: React.FunctionComponent = () => {
 
   const masthead = (
     <Masthead>
-      <MastheadToggle>
-        <PageToggleButton
-          variant="plain"
-          aria-label="Global navigation"
-          isSidebarOpen={isSidebarOpen}
-          onSidebarToggle={onSidebarToggle}
-          id="main-padding-nav-toggle"
-        >
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
       <MastheadMain>
-        <MastheadBrand href="https://patternfly.org" target="_blank">
-          Logo
+        <MastheadToggle>
+          <PageToggleButton
+            variant="plain"
+            aria-label="Global navigation"
+            isSidebarOpen={isSidebarOpen}
+            onSidebarToggle={onSidebarToggle}
+            id="main-padding-nav-toggle"
+          >
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
+        <MastheadBrand>
+          <MastheadLogo href="https://patternfly.org" target="_blank">
+            Logo
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>{headerToolbar}</MastheadContent>
diff --git a/packages/react-core/src/components/Page/examples/PageMainSectionVariations.tsx b/packages/react-core/src/components/Page/examples/PageMainSectionVariations.tsx
index 56b640ada72..377ba7b5f6d 100644
--- a/packages/react-core/src/components/Page/examples/PageMainSectionVariations.tsx
+++ b/packages/react-core/src/components/Page/examples/PageMainSectionVariations.tsx
@@ -2,9 +2,10 @@ import React from 'react';
 import {
   Page,
   Masthead,
-  MastheadToggle,
   MastheadMain,
+  MastheadToggle,
   MastheadBrand,
+  MastheadLogo,
   MastheadContent,
   PageSidebar,
   PageSidebarBody,
@@ -33,20 +34,22 @@ export const PageMainSectionPadding: React.FunctionComponent = () => {
 
   const header = (
     <Masthead>
-      <MastheadToggle>
-        <PageToggleButton
-          variant="plain"
-          aria-label="Global navigation"
-          isSidebarOpen={isSidebarOpen}
-          onSidebarToggle={onSidebarToggle}
-          id="main-variations-nav-toggle"
-        >
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
       <MastheadMain>
-        <MastheadBrand href="https://patternfly.org" target="_blank">
-          Logo
+        <MastheadToggle>
+          <PageToggleButton
+            variant="plain"
+            aria-label="Global navigation"
+            isSidebarOpen={isSidebarOpen}
+            onSidebarToggle={onSidebarToggle}
+            id="main-variations-nav-toggle"
+          >
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
+        <MastheadBrand>
+          <MastheadLogo href="https://patternfly.org" target="_blank">
+            Logo
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>{headerToolbar}</MastheadContent>
diff --git a/packages/react-core/src/components/Page/examples/PageMultipleSidebarBody.tsx b/packages/react-core/src/components/Page/examples/PageMultipleSidebarBody.tsx
index 51ef4c10105..0aa8fb5c4c3 100644
--- a/packages/react-core/src/components/Page/examples/PageMultipleSidebarBody.tsx
+++ b/packages/react-core/src/components/Page/examples/PageMultipleSidebarBody.tsx
@@ -2,9 +2,10 @@ import React from 'react';
 import {
   Page,
   Masthead,
-  MastheadToggle,
   MastheadMain,
+  MastheadToggle,
   MastheadBrand,
+  MastheadLogo,
   MastheadContent,
   PageSidebar,
   PageSidebarBody,
@@ -33,20 +34,22 @@ export const PageMultipleSidebarBody: React.FunctionComponent = () => {
 
   const masthead = (
     <Masthead>
-      <MastheadToggle>
-        <PageToggleButton
-          variant="plain"
-          aria-label="Global navigation"
-          isSidebarOpen={isSidebarOpen}
-          onSidebarToggle={onSidebarToggle}
-          id="multiple-sidebar-body-nav-toggle"
-        >
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
       <MastheadMain>
-        <MastheadBrand href="https://patternfly.org" target="_blank">
-          Logo
+        <MastheadToggle>
+          <PageToggleButton
+            variant="plain"
+            aria-label="Global navigation"
+            isSidebarOpen={isSidebarOpen}
+            onSidebarToggle={onSidebarToggle}
+            id="multiple-sidebar-body-nav-toggle"
+          >
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
+        <MastheadBrand>
+          <MastheadLogo href="https://patternfly.org" target="_blank">
+            Logo
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>{headerToolbar}</MastheadContent>
diff --git a/packages/react-core/src/components/Page/examples/PageUncontrolledNav.tsx b/packages/react-core/src/components/Page/examples/PageUncontrolledNav.tsx
index 0547fada1c6..c67d85f3799 100644
--- a/packages/react-core/src/components/Page/examples/PageUncontrolledNav.tsx
+++ b/packages/react-core/src/components/Page/examples/PageUncontrolledNav.tsx
@@ -2,9 +2,10 @@ import React from 'react';
 import {
   Page,
   Masthead,
-  MastheadToggle,
   MastheadMain,
+  MastheadToggle,
   MastheadBrand,
+  MastheadLogo,
   MastheadContent,
   PageSidebar,
   PageSidebarBody,
@@ -27,14 +28,16 @@ export const PageUncontrolledNav: React.FunctionComponent = () => {
 
   const masthead = (
     <Masthead>
-      <MastheadToggle>
-        <PageToggleButton variant="plain" aria-label="Global navigation" id="uncontrolled-nav-toggle">
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
       <MastheadMain>
-        <MastheadBrand href="https://patternfly.org" target="_blank">
-          Logo
+        <MastheadToggle>
+          <PageToggleButton variant="plain" aria-label="Global navigation" id="uncontrolled-nav-toggle">
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
+        <MastheadBrand>
+          <MastheadLogo href="https://patternfly.org" target="_blank">
+            Logo
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>{headerToolbar}</MastheadContent>
diff --git a/packages/react-core/src/components/Page/examples/PageVerticalNav.tsx b/packages/react-core/src/components/Page/examples/PageVerticalNav.tsx
index 1d023602b96..57a22536664 100644
--- a/packages/react-core/src/components/Page/examples/PageVerticalNav.tsx
+++ b/packages/react-core/src/components/Page/examples/PageVerticalNav.tsx
@@ -2,9 +2,10 @@ import React from 'react';
 import {
   Page,
   Masthead,
-  MastheadToggle,
   MastheadMain,
+  MastheadToggle,
   MastheadBrand,
+  MastheadLogo,
   MastheadContent,
   PageSidebar,
   PageSidebarBody,
@@ -33,20 +34,22 @@ export const PageVerticalNav: React.FunctionComponent = () => {
 
   const masthead = (
     <Masthead>
-      <MastheadToggle>
-        <PageToggleButton
-          variant="plain"
-          aria-label="Global navigation"
-          isSidebarOpen={isSidebarOpen}
-          onSidebarToggle={onSidebarToggle}
-          id="vertical-nav-toggle"
-        >
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
       <MastheadMain>
-        <MastheadBrand href="https://patternfly.org" target="_blank">
-          Logo
+        <MastheadToggle>
+          <PageToggleButton
+            variant="plain"
+            aria-label="Global navigation"
+            isSidebarOpen={isSidebarOpen}
+            onSidebarToggle={onSidebarToggle}
+            id="vertical-nav-toggle"
+          >
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
+        <MastheadBrand>
+          <MastheadLogo href="https://patternfly.org" target="_blank">
+            Logo
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>{headerToolbar}</MastheadContent>
diff --git a/packages/react-core/src/components/Page/examples/PageWithOrWithoutFill.tsx b/packages/react-core/src/components/Page/examples/PageWithOrWithoutFill.tsx
index 9893532c0a0..94eb74ced61 100644
--- a/packages/react-core/src/components/Page/examples/PageWithOrWithoutFill.tsx
+++ b/packages/react-core/src/components/Page/examples/PageWithOrWithoutFill.tsx
@@ -2,9 +2,10 @@ import React from 'react';
 import {
   Page,
   Masthead,
-  MastheadToggle,
   MastheadMain,
+  MastheadToggle,
   MastheadBrand,
+  MastheadLogo,
   MastheadContent,
   PageSidebar,
   PageSidebarBody,
@@ -33,20 +34,22 @@ export const PageWithOrWithoutFill: React.FunctionComponent = () => {
 
   const masthead = (
     <Masthead>
-      <MastheadToggle>
-        <PageToggleButton
-          variant="plain"
-          aria-label="Global navigation"
-          isSidebarOpen={isSidebarOpen}
-          onSidebarToggle={onSidebarToggle}
-          id="fill-nav-toggle"
-        >
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
       <MastheadMain>
-        <MastheadBrand href="https://patternfly.org" target="_blank">
-          Logo
+        <MastheadToggle>
+          <PageToggleButton
+            variant="plain"
+            aria-label="Global navigation"
+            isSidebarOpen={isSidebarOpen}
+            onSidebarToggle={onSidebarToggle}
+            id="fill-nav-toggle"
+          >
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
+        <MastheadBrand>
+          <MastheadLogo href="https://patternfly.org" target="_blank">
+            Logo
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>{headerToolbar}</MastheadContent>
diff --git a/packages/react-core/src/demos/DashboardHeader.tsx b/packages/react-core/src/demos/DashboardHeader.tsx
index 921b257d1b2..ca4300db23d 100644
--- a/packages/react-core/src/demos/DashboardHeader.tsx
+++ b/packages/react-core/src/demos/DashboardHeader.tsx
@@ -10,9 +10,10 @@ import {
   DropdownItem,
   DropdownList,
   Masthead,
-  MastheadToggle,
   MastheadMain,
+  MastheadToggle,
   MastheadBrand,
+  MastheadLogo,
   MastheadContent,
   MenuToggle,
   Toolbar,
@@ -85,14 +86,16 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
 
   return (
     <Masthead>
-      <MastheadToggle>
-        <PageToggleButton variant="plain" aria-label="Global navigation">
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
       <MastheadMain>
+        <MastheadToggle>
+          <PageToggleButton variant="plain" aria-label="Global navigation">
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
         <MastheadBrand>
-          <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+          <MastheadLogo>
+            <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>
diff --git a/packages/react-core/src/demos/Masthead.md b/packages/react-core/src/demos/Masthead.md
index f4eac187f19..17059f97b8a 100644
--- a/packages/react-core/src/demos/Masthead.md
+++ b/packages/react-core/src/demos/Masthead.md
@@ -4,10 +4,12 @@ section: components
 ---
 
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import pfIcon from './assets/pf-logo-small.svg';
 import pfLogo from './assets/PF-HorizontalLogo-Color.svg';
diff --git a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx
index 3489b984ef9..47e55873f50 100644
--- a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx
+++ b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx
@@ -36,9 +36,10 @@ import {
   PageToggleButton,
   Masthead,
   MastheadMain,
+  MastheadBrand,
   MastheadToggle,
   MastheadContent,
-  MastheadBrand,
+  MastheadLogo,
   Toolbar,
   ToolbarItem,
   ToolbarGroup,
@@ -259,14 +260,16 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
 
   const masthead = (
     <Masthead>
-      <MastheadToggle>
-        <PageToggleButton variant="plain" aria-label="Global navigation">
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
       <MastheadMain>
+        <MastheadToggle>
+          <PageToggleButton variant="plain" aria-label="Global navigation">
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
         <MastheadBrand>
-          <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+          <MastheadLogo>
+            <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>{headerToolbar}</MastheadContent>
diff --git a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx
index c4b20f7f415..593b2d044dd 100644
--- a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx
+++ b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx
@@ -38,9 +38,10 @@ import {
   PageToggleButton,
   Masthead,
   MastheadMain,
+  MastheadBrand,
   MastheadToggle,
   MastheadContent,
-  MastheadBrand,
+  MastheadLogo,
   Toolbar,
   ToolbarItem,
   ToolbarGroup,
@@ -309,14 +310,16 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
 
   const masthead = (
     <Masthead>
-      <MastheadToggle>
-        <PageToggleButton variant="plain" aria-label="Global navigation">
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
       <MastheadMain>
+        <MastheadToggle>
+          <PageToggleButton variant="plain" aria-label="Global navigation">
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
         <MastheadBrand>
-          <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+          <MastheadLogo>
+            <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>{headerToolbar}</MastheadContent>
diff --git a/packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx b/packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx
index 5cf53cb3a26..31943ece836 100644
--- a/packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx
+++ b/packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx
@@ -17,9 +17,10 @@ import {
   Icon,
   Label,
   Masthead,
-  MastheadBrand,
-  MastheadContent,
   MastheadMain,
+  MastheadLogo,
+  MastheadContent,
+  MastheadBrand,
   MastheadToggle,
   MenuToggle,
   Nav,
@@ -323,15 +324,17 @@ export const PaginatedTableAction = () => {
 
   const masthead = (
     <Masthead>
-      <MastheadToggle>
-        <PageToggleButton variant="plain" aria-label={translation.mastheadToggleAriaLabel}>
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
       <MastheadMain>
-        <MastheadBrand dir="ltr">
-          <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
-          {translation.brandLanguage && <span className="brand-language">{translation.brandLanguage}</span>}
+        <MastheadToggle>
+          <PageToggleButton variant="plain" aria-label={translation.mastheadToggleAriaLabel}>
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
+        <MastheadBrand>
+          <MastheadLogo dir="ltr">
+            <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+            {translation.brandLanguage && <span className="brand-language">{translation.brandLanguage}</span>}
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>
diff --git a/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx b/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx
index e56ee7f700f..94b8851b95f 100644
--- a/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx
+++ b/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx
@@ -17,9 +17,10 @@ import {
   Icon,
   Label,
   Masthead,
-  MastheadBrand,
-  MastheadContent,
   MastheadMain,
+  MastheadLogo,
+  MastheadContent,
+  MastheadBrand,
   MastheadToggle,
   MenuToggle,
   Nav,
@@ -347,15 +348,17 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
 
   const masthead = (
     <Masthead>
-      <MastheadToggle>
-        <PageToggleButton variant="plain" aria-label={translation.mastheadToggleAriaLabel}>
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
       <MastheadMain>
-        <MastheadBrand dir="ltr">
-          <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
-          {translation.brandLanguage && <span className="brand-language">{translation.brandLanguage}</span>}
+        <MastheadToggle>
+          <PageToggleButton variant="plain" aria-label={translation.mastheadToggleAriaLabel}>
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
+        <MastheadBrand>
+          <MastheadLogo dir="ltr">
+            <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+            {translation.brandLanguage && <span className="brand-language">{translation.brandLanguage}</span>}
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>
diff --git a/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx b/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx
index 2095aee5257..73c453ed9bd 100644
--- a/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx
+++ b/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx
@@ -16,9 +16,10 @@ import {
   Gallery,
   GalleryItem,
   Masthead,
-  MastheadBrand,
-  MastheadContent,
   MastheadMain,
+  MastheadLogo,
+  MastheadContent,
+  MastheadBrand,
   MenuToggle,
   MenuToggleElement,
   Nav,
@@ -273,7 +274,9 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
     <Masthead>
       <MastheadMain>
         <MastheadBrand>
-          <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+          <MastheadLogo>
+            <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>{headerToolbar}</MastheadContent>
diff --git a/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx b/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
index fff4b1f5132..d4f4e848d60 100644
--- a/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
+++ b/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
@@ -17,9 +17,10 @@ import {
   Gallery,
   GalleryItem,
   Masthead,
-  MastheadBrand,
-  MastheadContent,
   MastheadMain,
+  MastheadLogo,
+  MastheadContent,
+  MastheadBrand,
   MastheadToggle,
   Menu,
   MenuContent,
@@ -472,14 +473,16 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
 
   const masthead = (
     <Masthead>
-      <MastheadToggle>
-        <PageToggleButton variant="plain" aria-label="Global navigation">
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
       <MastheadMain>
+        <MastheadToggle>
+          <PageToggleButton variant="plain" aria-label="Global navigation">
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
         <MastheadBrand>
-          <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+          <MastheadLogo>
+            <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>{headerToolbar}</MastheadContent>
diff --git a/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx b/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx
index d9257524389..e90506784dc 100644
--- a/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx
@@ -10,9 +10,10 @@ import {
   DropdownItem,
   DropdownList,
   Masthead,
-  MastheadBrand,
-  MastheadContent,
   MastheadMain,
+  MastheadLogo,
+  MastheadContent,
+  MastheadBrand,
   MastheadToggle,
   Menu,
   MenuContent,
@@ -217,18 +218,20 @@ export const NavFlyout: React.FunctionComponent = () => {
 
   const masthead = (
     <Masthead>
-      <MastheadToggle>
-        <PageToggleButton
-          onSidebarToggle={isMobileView ? onSidebarToggleMobile : onSidebarToggleDesktop}
-          variant="plain"
-          aria-label="Global navigation"
-        >
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
       <MastheadMain>
+        <MastheadToggle>
+          <PageToggleButton
+            onSidebarToggle={isMobileView ? onSidebarToggleMobile : onSidebarToggleDesktop}
+            variant="plain"
+            aria-label="Global navigation"
+          >
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
         <MastheadBrand>
-          <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+          <MastheadLogo>
+            <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>{headerToolbar}</MastheadContent>
diff --git a/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx b/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx
index 3d0b3aba2dd..c5f1cf6deea 100644
--- a/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx
@@ -17,6 +17,7 @@ import {
   Masthead,
   MastheadMain,
   MastheadBrand,
+  MastheadLogo,
   MastheadContent,
   MenuToggle,
   Nav,
@@ -196,7 +197,9 @@ export const NavHorizontal: React.FunctionComponent = () => {
     <Masthead>
       <MastheadMain>
         <MastheadBrand>
-          <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+          <MastheadLogo>
+            <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>{headerToolbar}</MastheadContent>
diff --git a/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx b/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx
index e2a044cbcac..91419ea7f72 100644
--- a/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx
@@ -16,9 +16,10 @@ import {
   GalleryItem,
   MenuToggle,
   Masthead,
-  MastheadBrand,
-  MastheadContent,
   MastheadMain,
+  MastheadLogo,
+  MastheadContent,
+  MastheadBrand,
   MastheadToggle,
   Nav,
   NavItem,
@@ -243,14 +244,16 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
   );
   const masthead = (
     <Masthead>
-      <MastheadToggle>
-        <PageToggleButton variant="plain" aria-label="Global navigation">
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
       <MastheadMain>
+        <MastheadToggle>
+          <PageToggleButton variant="plain" aria-label="Global navigation">
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
         <MastheadBrand>
-          <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+          <MastheadLogo>
+            <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>{headerToolbar}</MastheadContent>
diff --git a/packages/react-core/src/demos/examples/Nav/NavManual.tsx b/packages/react-core/src/demos/examples/Nav/NavManual.tsx
index f671ff32089..7cd7b9e5a0a 100644
--- a/packages/react-core/src/demos/examples/Nav/NavManual.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavManual.tsx
@@ -15,9 +15,10 @@ import {
   Gallery,
   GalleryItem,
   Masthead,
-  MastheadBrand,
-  MastheadContent,
   MastheadMain,
+  MastheadLogo,
+  MastheadContent,
+  MastheadBrand,
   MastheadToggle,
   MenuToggle,
   Nav,
@@ -210,18 +211,20 @@ export const NavManual: React.FunctionComponent = () => {
   );
   const masthead = (
     <Masthead>
-      <MastheadToggle>
-        <PageToggleButton
-          onSidebarToggle={isMobileView ? onSidebarToggleMobile : onSidebarToggleDesktop}
-          variant="plain"
-          aria-label="Global navigation"
-        >
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
       <MastheadMain>
+        <MastheadToggle>
+          <PageToggleButton
+            onSidebarToggle={isMobileView ? onSidebarToggleMobile : onSidebarToggleDesktop}
+            variant="plain"
+            aria-label="Global navigation"
+          >
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
         <MastheadBrand>
-          <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+          <MastheadLogo>
+            <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>{headerToolbar}</MastheadContent>
diff --git a/packages/react-core/src/demos/examples/Page/PageContextSelector.tsx b/packages/react-core/src/demos/examples/Page/PageContextSelector.tsx
index 8d9a8b62dea..db115d51de3 100644
--- a/packages/react-core/src/demos/examples/Page/PageContextSelector.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageContextSelector.tsx
@@ -16,9 +16,10 @@ import {
   Gallery,
   GalleryItem,
   Masthead,
-  MastheadBrand,
-  MastheadContent,
   MastheadMain,
+  MastheadLogo,
+  MastheadContent,
+  MastheadBrand,
   MastheadToggle,
   MenuToggle,
   MenuToggleElement,
@@ -224,14 +225,16 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
 
   const masthead = (
     <Masthead>
-      <MastheadToggle>
-        <PageToggleButton variant="plain" aria-label="Global navigation">
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
       <MastheadMain>
+        <MastheadToggle>
+          <PageToggleButton variant="plain" aria-label="Global navigation">
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
         <MastheadBrand>
-          <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+          <MastheadLogo>
+            <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>{headerToolbar}</MastheadContent>
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
index 0ea01aa908e..ab0168989a3 100644
--- a/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
@@ -17,9 +17,10 @@ import {
   Gallery,
   GalleryItem,
   Masthead,
-  MastheadBrand,
-  MastheadContent,
   MastheadMain,
+  MastheadLogo,
+  MastheadContent,
+  MastheadBrand,
   MastheadToggle,
   MenuToggle,
   MenuToggleElement,
@@ -207,14 +208,16 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
 
   const masthead = (
     <Masthead>
-      <MastheadToggle>
-        <PageToggleButton variant="plain" aria-label="Global navigation">
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
       <MastheadMain>
+        <MastheadToggle>
+          <PageToggleButton variant="plain" aria-label="Global navigation">
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
         <MastheadBrand>
-          <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+          <MastheadLogo>
+            <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>{headerToolbar}</MastheadContent>
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
index c3a48c031c8..3a81228cbe9 100644
--- a/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
@@ -17,9 +17,10 @@ import {
   Gallery,
   GalleryItem,
   Masthead,
-  MastheadBrand,
-  MastheadContent,
   MastheadMain,
+  MastheadLogo,
+  MastheadContent,
+  MastheadBrand,
   MastheadToggle,
   MenuToggle,
   MenuToggleElement,
@@ -207,14 +208,16 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
 
   const masthead = (
     <Masthead>
-      <MastheadToggle>
-        <PageToggleButton variant="plain" aria-label="Global navigation">
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
       <MastheadMain>
+        <MastheadToggle>
+          <PageToggleButton variant="plain" aria-label="Global navigation">
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
         <MastheadBrand>
-          <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+          <MastheadLogo>
+            <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>{headerToolbar}</MastheadContent>
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
index d217f1b7f92..a9cc0f993e8 100644
--- a/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
@@ -17,9 +17,10 @@ import {
   Gallery,
   GalleryItem,
   Masthead,
-  MastheadBrand,
-  MastheadContent,
   MastheadMain,
+  MastheadLogo,
+  MastheadContent,
+  MastheadBrand,
   MastheadToggle,
   MenuToggle,
   MenuToggleElement,
@@ -199,14 +200,16 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
 
   const masthead = (
     <Masthead>
-      <MastheadToggle>
-        <PageToggleButton variant="plain" aria-label="Global navigation">
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
       <MastheadMain>
+        <MastheadToggle>
+          <PageToggleButton variant="plain" aria-label="Global navigation">
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
         <MastheadBrand>
-          <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+          <MastheadLogo>
+            <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>{headerToolbar}</MastheadContent>
diff --git a/packages/react-core/src/demos/examples/Wizard/InPageWithDrawer.tsx b/packages/react-core/src/demos/examples/Wizard/InPageWithDrawer.tsx
index 8802409c7cc..878766edb76 100644
--- a/packages/react-core/src/demos/examples/Wizard/InPageWithDrawer.tsx
+++ b/packages/react-core/src/demos/examples/Wizard/InPageWithDrawer.tsx
@@ -23,10 +23,11 @@ import {
   PageSidebarBody,
   SkipToContent,
   Masthead,
-  PageToggleButton,
-  MastheadToggle,
   MastheadMain,
+  MastheadToggle,
   MastheadBrand,
+  MastheadLogo,
+  PageToggleButton,
   Wizard,
   WizardStep
 } from '@patternfly/react-core';
@@ -81,14 +82,16 @@ export const WizardFullPageWithDrawerDemo: React.FunctionComponent = () => {
 
   const masthead = (
     <Masthead id="basic">
-      <MastheadToggle>
-        <PageToggleButton variant="plain" aria-label="Global navigation">
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
       <MastheadMain>
+        <MastheadToggle>
+          <PageToggleButton variant="plain" aria-label="Global navigation">
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
         <MastheadBrand>
-          <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+          <MastheadLogo>
+            <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
     </Masthead>
diff --git a/packages/react-core/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx b/packages/react-core/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx
index b5e13dfa326..a690bab0f8a 100644
--- a/packages/react-core/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx
+++ b/packages/react-core/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx
@@ -23,10 +23,11 @@ import {
   PageSidebarBody,
   SkipToContent,
   Masthead,
-  PageToggleButton,
-  MastheadToggle,
   MastheadMain,
+  MastheadToggle,
   MastheadBrand,
+  MastheadLogo,
+  PageToggleButton,
   Wizard,
   WizardStep
 } from '@patternfly/react-core';
@@ -81,14 +82,16 @@ export const WizardFullPageWithDrawerInfoStepDemo: React.FunctionComponent = ()
 
   const masthead = (
     <Masthead id="basic">
-      <MastheadToggle>
-        <PageToggleButton variant="plain" aria-label="Global navigation">
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
       <MastheadMain>
+        <MastheadToggle>
+          <PageToggleButton variant="plain" aria-label="Global navigation">
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
         <MastheadBrand>
-          <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+          <MastheadLogo>
+            <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
     </Masthead>
diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json
index 2ac3c043e42..23e25f6b7d5 100644
--- a/packages/react-docs/package.json
+++ b/packages/react-docs/package.json
@@ -23,7 +23,7 @@
     "test:a11y": "patternfly-a11y --config patternfly-a11y.config"
   },
   "dependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.201",
+    "@patternfly/patternfly": "6.0.0-alpha.203",
     "@patternfly/react-charts": "workspace:^",
     "@patternfly/react-code-editor": "workspace:^",
     "@patternfly/react-core": "workspace:^",
diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json
index 45ff29adae6..ed5554d06c7 100644
--- a/packages/react-icons/package.json
+++ b/packages/react-icons/package.json
@@ -33,7 +33,7 @@
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-regular-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@patternfly/patternfly": "6.0.0-alpha.201",
+    "@patternfly/patternfly": "6.0.0-alpha.203",
     "fs-extra": "^11.2.0",
     "tslib": "^2.6.2"
   },
diff --git a/packages/react-integration/demo-app-ts/src/App.tsx b/packages/react-integration/demo-app-ts/src/App.tsx
index 29af20603cd..1ea75b47018 100755
--- a/packages/react-integration/demo-app-ts/src/App.tsx
+++ b/packages/react-integration/demo-app-ts/src/App.tsx
@@ -4,6 +4,7 @@ import {
   Avatar,
   Brand,
   Masthead,
+  MastheadLogo,
   MastheadBrand,
   MastheadContent,
   MastheadMain,
@@ -129,14 +130,16 @@ class App extends React.Component<{}, AppState> {
 
     const AppMasthead = (
       <Masthead>
-        <MastheadToggle>
-          <PageToggleButton onSidebarToggle={this.onNavToggle} variant="plain" aria-label="Global navigation">
-            <BarsIcon />
-          </PageToggleButton>
-        </MastheadToggle>
         <MastheadMain>
+          <MastheadToggle>
+            <PageToggleButton onSidebarToggle={this.onNavToggle} variant="plain" aria-label="Global navigation">
+              <BarsIcon />
+            </PageToggleButton>
+          </MastheadToggle>
           <MastheadBrand>
-            <Brand src={imgBrand} alt="PatternFly" heights={{ default: '36px' }} />
+            <MastheadLogo>
+              <Brand src={imgBrand} alt="PatternFly" heights={{ default: '36px' }} />
+            </MastheadLogo>
           </MastheadBrand>
         </MastheadMain>
         <MastheadContent>{AppToolbar}</MastheadContent>
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/MastheadDemo/MastheadDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/MastheadDemo/MastheadDemo.tsx
index 9e4267e136e..7d98c08630b 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/MastheadDemo/MastheadDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/MastheadDemo/MastheadDemo.tsx
@@ -4,6 +4,7 @@ import {
   MastheadToggle,
   MastheadMain,
   MastheadBrand,
+  MastheadLogo,
   MastheadContent,
   Button,
   Toolbar,
@@ -114,14 +115,16 @@ export class MastheadDemo extends Component<MastheadProps> {
 
     return (
       <Masthead id="basic">
-        <MastheadToggle>
-          <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
-            <BarsIcon />
-          </Button>
-        </MastheadToggle>
         <MastheadMain>
+          <MastheadToggle>
+            <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
+              <BarsIcon />
+            </Button>
+          </MastheadToggle>
           <MastheadBrand>
-            <img src={imgBrand} alt="Patternfly logo" />
+            <MastheadLogo>
+              <img src={imgBrand} alt="Patternfly logo" />
+            </MastheadLogo>
           </MastheadBrand>
         </MastheadMain>
         <MastheadContent>
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 94d0b330ddb..a8ef56f3122 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
@@ -7,10 +7,11 @@ import {
   PageToggleButton,
   SkipToContent,
   Masthead,
+  MastheadBrand,
   MastheadToggle,
   MastheadMain,
   MastheadContent,
-  MastheadBrand,
+  MastheadLogo,
   Toolbar,
   ToolbarContent,
   ToolbarItem
@@ -72,13 +73,15 @@ export class PageDemo extends Component {
 
     const masthead = (
       <Masthead>
-        <MastheadToggle>
-          <PageToggleButton variant="plain" aria-label="Global navigation">
-            <BarsIcon />
-          </PageToggleButton>
-        </MastheadToggle>
         <MastheadMain>
-          <MastheadBrand component="div">Logo that's a div</MastheadBrand>
+          <MastheadToggle>
+            <PageToggleButton variant="plain" aria-label="Global navigation">
+              <BarsIcon />
+            </PageToggleButton>
+          </MastheadToggle>
+          <MastheadBrand>
+            <MastheadLogo component="div">Logo that's a div</MastheadLogo>
+          </MastheadBrand>
         </MastheadMain>
         <MastheadContent>{headerToolbar}</MastheadContent>
       </Masthead>
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 469113cc396..e034b60dc13 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
@@ -4,6 +4,7 @@ import {
   Masthead,
   MastheadToggle,
   MastheadMain,
+  MastheadLogo,
   MastheadBrand,
   MastheadContent,
   PageSidebar,
@@ -27,13 +28,15 @@ export const PageManagedSidebarClosedDemo: React.FunctionComponent = () => {
 
   const masthead = (
     <Masthead>
-      <MastheadToggle>
-        <PageToggleButton variant="plain" aria-label="Global navigation" id="uncontrolled-nav-toggle">
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
       <MastheadMain>
-        <MastheadBrand component="div">Logo that's a div</MastheadBrand>
+        <MastheadToggle>
+          <PageToggleButton variant="plain" aria-label="Global navigation" id="uncontrolled-nav-toggle">
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
+        <MastheadBrand>
+          <MastheadLogo component="div">Logo that's a div</MastheadLogo>
+        </MastheadBrand>
       </MastheadMain>
       <MastheadContent>{headerToolbar}</MastheadContent>
     </Masthead>
diff --git a/packages/react-styles/package.json b/packages/react-styles/package.json
index d8a49a30aff..e227e23979f 100644
--- a/packages/react-styles/package.json
+++ b/packages/react-styles/package.json
@@ -19,7 +19,7 @@
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.201",
+    "@patternfly/patternfly": "6.0.0-alpha.203",
     "change-case": "^5.4.4",
     "fs-extra": "^11.2.0"
   },
diff --git a/packages/react-table/src/demos/DashboardHeader.tsx b/packages/react-table/src/demos/DashboardHeader.tsx
index c876be6d344..fd0611194cf 100644
--- a/packages/react-table/src/demos/DashboardHeader.tsx
+++ b/packages/react-table/src/demos/DashboardHeader.tsx
@@ -10,9 +10,10 @@ import {
   DropdownItem,
   DropdownList,
   Masthead,
-  MastheadToggle,
   MastheadMain,
+  MastheadToggle,
   MastheadBrand,
+  MastheadLogo,
   MastheadContent,
   MenuToggle,
   Toolbar,
@@ -85,14 +86,16 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
 
   return (
     <Masthead>
-      <MastheadToggle>
-        <PageToggleButton variant="plain" aria-label="Global navigation">
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
       <MastheadMain>
+        <MastheadToggle>
+          <PageToggleButton variant="plain" aria-label="Global navigation">
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
         <MastheadBrand>
-          <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+          <MastheadLogo>
+            <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>
diff --git a/packages/react-table/src/demos/Table.md b/packages/react-table/src/demos/Table.md
index 345dd507c98..2ba18a2a546 100644
--- a/packages/react-table/src/demos/Table.md
+++ b/packages/react-table/src/demos/Table.md
@@ -15,7 +15,7 @@ ToolbarItem,
 SearchInput,
 Masthead,
 MastheadToggle,
-MastheadMain,
+MastheadBrand,
 MastheadContent,
 SkipToContent,
 Breadcrumb,
@@ -31,7 +31,7 @@ Dropdown,
 DropdownGroup,
 DropdownItem,
 DropdownList,
-MastheadBrand,
+MastheadLogo,
 MenuToggle,
 ToolbarGroup,
 PageToggleButton,
diff --git a/packages/react-tokens/package.json b/packages/react-tokens/package.json
index 08d859af42b..34b54572609 100644
--- a/packages/react-tokens/package.json
+++ b/packages/react-tokens/package.json
@@ -29,7 +29,7 @@
     "clean": "rimraf dist"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.201",
+    "@patternfly/patternfly": "6.0.0-alpha.203",
     "css": "^3.0.0",
     "fs-extra": "^11.2.0"
   }
diff --git a/yarn.lock b/yarn.lock
index fc9d3968c46..f85ff570436 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3131,10 +3131,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@patternfly/patternfly@npm:6.0.0-alpha.201":
-  version: 6.0.0-alpha.201
-  resolution: "@patternfly/patternfly@npm:6.0.0-alpha.201"
-  checksum: 10c0/a5963ec9db9fefc03ea20b03f95084a42fca8c5a3bbdddd5f7f2445c5baa8e6b69dc552765ae1171fbc6f1125c3cc20eccf0370a8bea36540206abadb725fbce
+"@patternfly/patternfly@npm:6.0.0-alpha.203":
+  version: 6.0.0-alpha.203
+  resolution: "@patternfly/patternfly@npm:6.0.0-alpha.203"
+  checksum: 10c0/ce60d78f0571a96546f9fd8ee6f5f56ecd506715639994ad368e25ac177845b6fb9cd73651167397794495b0820adb90670d205677ea6c35eda36d60459429f6
   languageName: node
   linkType: hard
 
@@ -3193,7 +3193,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@patternfly/react-core@workspace:packages/react-core"
   dependencies:
-    "@patternfly/patternfly": "npm:6.0.0-alpha.201"
+    "@patternfly/patternfly": "npm:6.0.0-alpha.203"
     "@patternfly/react-icons": "workspace:^"
     "@patternfly/react-styles": "workspace:^"
     "@patternfly/react-tokens": "workspace:^"
@@ -3214,7 +3214,7 @@ __metadata:
   resolution: "@patternfly/react-docs@workspace:packages/react-docs"
   dependencies:
     "@patternfly/documentation-framework": "npm:^6.0.0-alpha.66"
-    "@patternfly/patternfly": "npm:6.0.0-alpha.201"
+    "@patternfly/patternfly": "npm:6.0.0-alpha.203"
     "@patternfly/patternfly-a11y": "npm:4.3.1"
     "@patternfly/react-charts": "workspace:^"
     "@patternfly/react-code-editor": "workspace:^"
@@ -3252,7 +3252,7 @@ __metadata:
     "@fortawesome/free-brands-svg-icons": "npm:^5.15.4"
     "@fortawesome/free-regular-svg-icons": "npm:^5.15.4"
     "@fortawesome/free-solid-svg-icons": "npm:^5.15.4"
-    "@patternfly/patternfly": "npm:6.0.0-alpha.201"
+    "@patternfly/patternfly": "npm:6.0.0-alpha.203"
     fs-extra: "npm:^11.2.0"
     tslib: "npm:^2.6.2"
   peerDependencies:
@@ -3330,7 +3330,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@patternfly/react-styles@workspace:packages/react-styles"
   dependencies:
-    "@patternfly/patternfly": "npm:6.0.0-alpha.201"
+    "@patternfly/patternfly": "npm:6.0.0-alpha.203"
     change-case: "npm:^5.4.4"
     fs-extra: "npm:^11.2.0"
   languageName: unknown
@@ -3371,7 +3371,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@patternfly/react-tokens@workspace:packages/react-tokens"
   dependencies:
-    "@patternfly/patternfly": "npm:6.0.0-alpha.201"
+    "@patternfly/patternfly": "npm:6.0.0-alpha.203"
     css: "npm:^3.0.0"
     fs-extra: "npm:^11.2.0"
   languageName: unknown