diff --git a/packages/react-core/package.json b/packages/react-core/package.json
index 4b83bf814f9..1c38728488f 100644
--- a/packages/react-core/package.json
+++ b/packages/react-core/package.json
@@ -54,7 +54,7 @@
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.5.0-prerelease.9",
+    "@patternfly/patternfly": "6.5.0-prerelease.11",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.0"
diff --git a/packages/react-core/src/components/Compass/Compass.tsx b/packages/react-core/src/components/Compass/Compass.tsx
new file mode 100644
index 00000000000..864db7d3b45
--- /dev/null
+++ b/packages/react-core/src/components/Compass/Compass.tsx
@@ -0,0 +1,107 @@
+import { Drawer, DrawerContent, DrawerProps } from '../Drawer';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+
+import compassBackgroundImageLight from '@patternfly/react-tokens/dist/esm/c_compass_BackgroundImage_light';
+import compassBackgroundImageDark from '@patternfly/react-tokens/dist/esm/c_compass_BackgroundImage_dark';
+
+export interface CompassProps extends React.HTMLProps<HTMLDivElement> {
+  /** Additional classes added to the compass. */
+  className?: string;
+  /** Content placed at the top of the layout */
+  header?: React.ReactNode;
+  /** Flag indicating if the header is expanded */
+  isHeaderExpanded?: boolean;
+  /** Content placed at the horizontal start of the layout, before the main content */
+  sidebarStart?: React.ReactNode;
+  /** Flag indicating if the start sidebar is expanded */
+  isSidebarStartExpanded?: boolean;
+  /** Content placed at the center of the layout */
+  main?: React.ReactNode;
+  /** Content placed at the horizontal end of the layout, after the main content */
+  sidebarEnd?: React.ReactNode;
+  /** Flag indicating if the end sidebar is expanded */
+  isSidebarEndExpanded?: boolean;
+  /** Content placed at the bottom of the layout */
+  footer?: React.ReactNode;
+  /** Flag indicating if the footer is expanded */
+  isFooterExpanded?: boolean;
+  /** Content rendered in an optional drawer wrapping the layout */
+  drawerContent?: React.ReactNode;
+  /** Additional props passed to the drawer */
+  drawerProps?: DrawerProps;
+  /** Light theme background image path of the compass */
+  backgroundSrcLight?: string;
+  /** Dark theme background image path of the compass */
+  backgroundSrcDark?: string;
+}
+
+export const Compass: React.FunctionComponent<CompassProps> = ({
+  className,
+  header,
+  isHeaderExpanded = true,
+  sidebarStart,
+  isSidebarStartExpanded = true,
+  main,
+  sidebarEnd,
+  isSidebarEndExpanded = true,
+  footer,
+  isFooterExpanded = true,
+  drawerContent,
+  drawerProps,
+  backgroundSrcLight,
+  backgroundSrcDark,
+  ...props
+}) => {
+  const hasDrawer = drawerContent !== undefined;
+
+  const backgroundImageStyles: { [key: string]: string } = {};
+  if (backgroundSrcLight) {
+    backgroundImageStyles[compassBackgroundImageLight.name] = `url(${backgroundSrcLight})`;
+  }
+  if (backgroundSrcDark) {
+    backgroundImageStyles[compassBackgroundImageDark.name] = `url(${backgroundSrcDark})`;
+  }
+
+  const compassContent = (
+    <div className={css(styles.compass, className)} {...props} style={{ ...props.style, ...backgroundImageStyles }}>
+      <div
+        className={css(styles.compassHeader, isHeaderExpanded && 'pf-m-expanded')}
+        {...(!isHeaderExpanded && { inert: 'true' })}
+      >
+        {header}
+      </div>
+      <div
+        className={css(styles.compassSidebar, styles.modifiers.start, isSidebarStartExpanded && 'pf-m-expanded')}
+        {...(!isSidebarStartExpanded && { inert: 'true' })}
+      >
+        {sidebarStart}
+      </div>
+      <div className={css(styles.compassMain)}>{main}</div>
+      <div
+        className={css(styles.compassSidebar, styles.modifiers.end, isSidebarEndExpanded && 'pf-m-expanded')}
+        {...(!isSidebarEndExpanded && { inert: 'true' })}
+      >
+        {sidebarEnd}
+      </div>
+      <div
+        className={css(styles.compassFooter, isFooterExpanded && 'pf-m-expanded')}
+        {...(!isFooterExpanded && { inert: 'true' })}
+      >
+        {footer}
+      </div>
+    </div>
+  );
+
+  if (hasDrawer) {
+    return (
+      <Drawer {...drawerProps}>
+        <DrawerContent panelContent={drawerContent}>{compassContent}</DrawerContent>
+      </Drawer>
+    );
+  }
+
+  return compassContent;
+};
+
+Compass.displayName = 'Compass';
diff --git a/packages/react-core/src/components/Compass/CompassContent.tsx b/packages/react-core/src/components/Compass/CompassContent.tsx
new file mode 100644
index 00000000000..09b3dc1cb19
--- /dev/null
+++ b/packages/react-core/src/components/Compass/CompassContent.tsx
@@ -0,0 +1,42 @@
+import { Drawer, DrawerContent, DrawerProps } from '../Drawer';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+
+interface CompassContentProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content of the main compass area. Typically one or more CompassPanel components. */
+  children: React.ReactNode;
+  /** Additional classes added to the CompassContent */
+  className?: string;
+  /** Content rendered in an optional drawer wrapping the CompassContent */
+  drawerContent?: React.ReactNode;
+  /** Additional props passed to the drawer */
+  drawerProps?: DrawerProps;
+}
+
+export const CompassContent: React.FunctionComponent<CompassContentProps> = ({
+  children,
+  className,
+  drawerProps,
+  drawerContent,
+  ...props
+}) => {
+  const hasDrawer = drawerContent !== undefined;
+
+  const compassContent = (
+    <div className={css(styles.compassContent, className)} {...props}>
+      {children}
+    </div>
+  );
+
+  if (hasDrawer) {
+    return (
+      <Drawer {...drawerProps}>
+        <DrawerContent panelContent={drawerContent}>{compassContent}</DrawerContent>
+      </Drawer>
+    );
+  }
+
+  return compassContent;
+};
+
+CompassContent.displayName = 'CompassContent';
diff --git a/packages/react-core/src/components/Compass/CompassHeader.tsx b/packages/react-core/src/components/Compass/CompassHeader.tsx
new file mode 100644
index 00000000000..c249c1d8858
--- /dev/null
+++ b/packages/react-core/src/components/Compass/CompassHeader.tsx
@@ -0,0 +1,21 @@
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+
+interface CompassHeaderProps {
+  /** Content of the logo area */
+  logo?: React.ReactNode;
+  /** Content of the navigation area */
+  nav?: React.ReactNode;
+  /** Content of the profile area */
+  profile?: React.ReactNode;
+}
+
+export const CompassHeader: React.FunctionComponent<CompassHeaderProps> = ({ logo, nav, profile }) => (
+  <>
+    <div className={css(`${styles.compass}__logo`)}>{logo}</div>
+    <div className={css(styles.compassNav)}>{nav}</div>
+    <div className={css(styles.compassProfile)}>{profile}</div>
+  </>
+);
+
+CompassHeader.displayName = 'CompassHeader';
diff --git a/packages/react-core/src/components/Compass/CompassHero.tsx b/packages/react-core/src/components/Compass/CompassHero.tsx
new file mode 100644
index 00000000000..0987c25277e
--- /dev/null
+++ b/packages/react-core/src/components/Compass/CompassHero.tsx
@@ -0,0 +1,87 @@
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+
+import compassHeroBackgroundImageLight from '@patternfly/react-tokens/dist/esm/c_compass__hero_BackgroundImage_light';
+import compassHeroBackgroundImageDark from '@patternfly/react-tokens/dist/esm/c_compass__hero_BackgroundImage_dark';
+import compassHeroGradientStop1Light from '@patternfly/react-tokens/dist/esm/c_compass__hero_gradient_stop_1_light';
+import compassHeroGradientStop2Light from '@patternfly/react-tokens/dist/esm/c_compass__hero_gradient_stop_2_light';
+import compassHeroGradientStop3Light from '@patternfly/react-tokens/dist/esm/c_compass__hero_gradient_stop_3_light';
+import compassHeroGradientStop1Dark from '@patternfly/react-tokens/dist/esm/c_compass__hero_gradient_stop_1_dark';
+import compassHeroGradientStop2Dark from '@patternfly/react-tokens/dist/esm/c_compass__hero_gradient_stop_2_dark';
+import compassHeroGradientStop3Dark from '@patternfly/react-tokens/dist/esm/c_compass__hero_gradient_stop_3_dark';
+
+interface CompassHeroProps extends Omit<React.HTMLProps<HTMLDivElement>, 'content'> {
+  /** Content of the hero */
+  children?: React.ReactNode;
+  /** Additional classes added to the hero */
+  className?: string;
+  /** Light theme background image path of the hero */
+  backgroundSrcLight?: string;
+  /** Dark theme background image path of the hero */
+  backgroundSrcDark?: string;
+  /** Light theme gradient of the hero */
+  gradientLight?: {
+    stop1?: string;
+    stop2?: string;
+    stop3?: string;
+  };
+  /** Dark theme gradient of the hero */
+  gradientDark?: {
+    stop1?: string;
+    stop2?: string;
+    stop3?: string;
+  };
+}
+
+export const CompassHero: React.FunctionComponent<CompassHeroProps> = ({
+  className,
+  children,
+  backgroundSrcLight,
+  backgroundSrcDark,
+  gradientLight,
+  gradientDark,
+  ...props
+}) => {
+  const backgroundImageStyles: { [key: string]: string } = {};
+  if (backgroundSrcLight) {
+    backgroundImageStyles[compassHeroBackgroundImageLight.name] = `url(${backgroundSrcLight})`;
+  }
+  if (backgroundSrcDark) {
+    backgroundImageStyles[compassHeroBackgroundImageDark.name] = `url(${backgroundSrcDark})`;
+  }
+
+  if (gradientLight) {
+    if (gradientLight.stop1) {
+      backgroundImageStyles[compassHeroGradientStop1Light.name] = gradientLight.stop1;
+    }
+    if (gradientLight.stop2) {
+      backgroundImageStyles[compassHeroGradientStop2Light.name] = gradientLight.stop2;
+    }
+    if (gradientLight.stop3) {
+      backgroundImageStyles[compassHeroGradientStop3Light.name] = gradientLight.stop3;
+    }
+  }
+  if (gradientDark) {
+    if (gradientDark.stop1) {
+      backgroundImageStyles[compassHeroGradientStop1Dark.name] = gradientDark.stop1;
+    }
+    if (gradientDark.stop2) {
+      backgroundImageStyles[compassHeroGradientStop2Dark.name] = gradientDark.stop2;
+    }
+    if (gradientDark.stop3) {
+      backgroundImageStyles[compassHeroGradientStop3Dark.name] = gradientDark.stop3;
+    }
+  }
+
+  return (
+    <div
+      className={css(styles.compassPanel, styles.compassHero, className)}
+      style={{ ...props.style, ...backgroundImageStyles }}
+      {...props}
+    >
+      <div className={css(styles.compassHeroBody)}>{children}</div>
+    </div>
+  );
+};
+
+CompassHero.displayName = 'CompassHero';
diff --git a/packages/react-core/src/components/Compass/CompassMainHeader.tsx b/packages/react-core/src/components/Compass/CompassMainHeader.tsx
new file mode 100644
index 00000000000..409f7b2e454
--- /dev/null
+++ b/packages/react-core/src/components/Compass/CompassMainHeader.tsx
@@ -0,0 +1,43 @@
+import { Flex, FlexItem } from '../../layouts/Flex';
+import { CompassPanel } from './CompassPanel';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+
+interface CompassMainHeaderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'title'> {
+  /** Additional classes added to the main header */
+  className?: string;
+  /** Styled title. If title or toolbar is provided, the children will be ignored. */
+  title?: React.ReactNode;
+  /** Styled toolbar. If title or toolbar is provided, the children will be ignored. */
+  toolbar?: React.ReactNode;
+  /** Custom main header content. To opt into a default styling, use the title and toolbar props instead. */
+  children?: React.ReactNode;
+}
+
+export const CompassMainHeader: React.FunctionComponent<CompassMainHeaderProps> = ({
+  className,
+  title,
+  toolbar,
+  children,
+  ...props
+}) => {
+  const _content =
+    title !== undefined || toolbar !== undefined ? (
+      <CompassPanel>
+        <Flex alignItems={{ default: 'alignItemsCenter' }}>
+          <FlexItem grow={{ default: 'grow' }}>{title}</FlexItem>
+          {toolbar && <FlexItem>{toolbar}</FlexItem>}
+        </Flex>
+      </CompassPanel>
+    ) : (
+      children
+    );
+
+  return (
+    <div className={css(`${styles.compass}__main-header`, className)} {...props}>
+      {_content}
+    </div>
+  );
+};
+
+CompassMainHeader.displayName = 'CompassMainHeader';
diff --git a/packages/react-core/src/components/Compass/CompassMessageBar.tsx b/packages/react-core/src/components/Compass/CompassMessageBar.tsx
new file mode 100644
index 00000000000..4e9a737aa37
--- /dev/null
+++ b/packages/react-core/src/components/Compass/CompassMessageBar.tsx
@@ -0,0 +1,21 @@
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+
+interface CompassMessageBarProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content of the message bar. Typically a @patternfly/chatbot MessageBar component. */
+  children?: React.ReactNode;
+  /** Additional classes added to the message bar */
+  className?: string;
+}
+
+export const CompassMessageBar: React.FunctionComponent<CompassMessageBarProps> = ({
+  children,
+  className,
+  ...props
+}) => (
+  <div className={css(styles.compassMessageBar, className)} {...props}>
+    {children}
+  </div>
+);
+
+CompassMessageBar.displayName = 'CompassMessageBar';
diff --git a/packages/react-core/src/components/Compass/CompassPanel.tsx b/packages/react-core/src/components/Compass/CompassPanel.tsx
new file mode 100644
index 00000000000..6b8096a51e6
--- /dev/null
+++ b/packages/react-core/src/components/Compass/CompassPanel.tsx
@@ -0,0 +1,51 @@
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+
+interface CompassPanelProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content of the panel. */
+  children: React.ReactNode;
+  /** Additional classes added to the panel. */
+  className?: string;
+  /** Indicates the panel should have a pill border radius */
+  isPill?: boolean;
+  /** Indicates the panel should expand to fill the available height */
+  isFullHeight?: boolean;
+  /** Indicates the panel should scroll its overflow */
+  isScrollable?: boolean;
+  /** Indicates the panel should have no border */
+  hasNoBorder?: boolean;
+  /** Indicates the panel should have no padding */
+  hasNoPadding?: boolean;
+  /** Indicates the panel should have a "thinking" animation */
+  isThinking?: boolean;
+}
+
+export const CompassPanel: React.FunctionComponent<CompassPanelProps> = ({
+  children,
+  className,
+  isPill,
+  hasNoBorder,
+  hasNoPadding,
+  isThinking,
+  isFullHeight,
+  isScrollable,
+  ...props
+}) => (
+  <div
+    className={css(
+      styles.compassPanel,
+      isPill && styles.modifiers.pill,
+      hasNoBorder && styles.modifiers.noBorder,
+      hasNoPadding && styles.modifiers.noPadding,
+      isThinking && 'pf-v6-m-thinking',
+      isFullHeight && styles.modifiers.fullHeight,
+      isScrollable && styles.modifiers.scrollable,
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+CompassPanel.displayName = 'CompassPanel';
diff --git a/packages/react-core/src/components/Compass/__tests__/Compass.test.tsx b/packages/react-core/src/components/Compass/__tests__/Compass.test.tsx
new file mode 100644
index 00000000000..932dcb61233
--- /dev/null
+++ b/packages/react-core/src/components/Compass/__tests__/Compass.test.tsx
@@ -0,0 +1,172 @@
+import { render, screen } from '@testing-library/react';
+import { Compass } from '../Compass';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="test-compass">
+      <Compass />
+    </div>
+  );
+  expect(screen.getByTestId('test-compass').firstChild).toBeVisible();
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<Compass className="custom-class" data-testid="compass" />);
+  expect(screen.getByTestId('compass')).toHaveClass('custom-class');
+});
+
+test('Renders with default compass class', () => {
+  render(<Compass data-testid="compass" />);
+  expect(screen.getByTestId('compass')).toHaveClass(styles.compass);
+});
+
+test('Renders header content when provided', () => {
+  render(<Compass header={<div>Header content</div>} />);
+  expect(screen.getByText('Header content')).toBeVisible();
+});
+
+test('Renders sidebar start content when provided', () => {
+  render(<Compass sidebarStart={<div>Sidebar start</div>} />);
+  expect(screen.getByText('Sidebar start')).toBeVisible();
+});
+
+test('Renders main content when provided', () => {
+  render(<Compass main={<div>Main content</div>} />);
+  expect(screen.getByText('Main content')).toBeVisible();
+});
+
+test('Renders sidebar end content when provided', () => {
+  render(<Compass sidebarEnd={<div>Sidebar end</div>} />);
+  expect(screen.getByText('Sidebar end')).toBeVisible();
+});
+
+test('Renders footer content when provided', () => {
+  render(<Compass footer={<div>Footer content</div>} />);
+  expect(screen.getByText('Footer content')).toBeVisible();
+});
+
+test('Renders header with expanded class when isHeaderExpanded is true', () => {
+  render(<Compass header={<div>Header</div>} isHeaderExpanded />);
+  expect(screen.getByText('Header').parentElement).toHaveClass('pf-m-expanded');
+});
+
+test('Renders header without expanded class and with inert when isHeaderExpanded is false', () => {
+  render(<Compass header={<div>Header</div>} isHeaderExpanded={false} />);
+  const headerElement = screen.getByText('Header').parentElement;
+  expect(headerElement).not.toHaveClass('pf-m-expanded');
+  expect(headerElement).toHaveAttribute('inert');
+});
+
+test('Renders sidebar start with expanded class when isSidebarStartExpanded is true', () => {
+  render(<Compass sidebarStart={<div>Sidebar start</div>} isSidebarStartExpanded />);
+  expect(screen.getByText('Sidebar start').parentElement).toHaveClass('pf-m-expanded');
+});
+
+test('Renders sidebar start without expanded class and with inert when isSidebarStartExpanded is false', () => {
+  render(<Compass sidebarStart={<div>Sidebar start</div>} isSidebarStartExpanded={false} />);
+  const sidebarElement = screen.getByText('Sidebar start').parentElement;
+  expect(sidebarElement).not.toHaveClass('pf-m-expanded');
+  expect(sidebarElement).toHaveAttribute('inert');
+});
+
+test('Renders sidebar end with expanded class when isSidebarEndExpanded is true', () => {
+  render(<Compass sidebarEnd={<div>Sidebar end</div>} isSidebarEndExpanded />);
+  expect(screen.getByText('Sidebar end').parentElement).toHaveClass('pf-m-expanded');
+});
+
+test('Renders sidebar end without expanded class and with inert when isSidebarEndExpanded is false', () => {
+  render(<Compass sidebarEnd={<div>Sidebar end</div>} isSidebarEndExpanded={false} />);
+  const sidebarElement = screen.getByText('Sidebar end').parentElement;
+  expect(sidebarElement).not.toHaveClass('pf-m-expanded');
+  expect(sidebarElement).toHaveAttribute('inert');
+});
+
+test('Renders footer with expanded class when isFooterExpanded is true', () => {
+  render(<Compass footer={<div>Footer</div>} isFooterExpanded />);
+  expect(screen.getByText('Footer').parentElement).toHaveClass('pf-m-expanded');
+});
+
+test('Renders footer without expanded class and with inert when isFooterExpanded is false', () => {
+  render(<Compass footer={<div>Footer</div>} isFooterExpanded={false} />);
+  const footerElement = screen.getByText('Footer').parentElement;
+  expect(footerElement).not.toHaveClass('pf-m-expanded');
+  expect(footerElement).toHaveAttribute('inert');
+});
+
+test('Renders with drawer when drawerContent is provided', () => {
+  render(<Compass drawerContent={<div>Drawer content</div>} />);
+  expect(screen.getByText('Drawer content')).toBeVisible();
+});
+
+test('Renders with light background image when backgroundSrcLight is provided', () => {
+  const backgroundSrc = 'light-bg.jpg';
+  render(<Compass backgroundSrcLight={backgroundSrc} data-testid="compass" />);
+  expect(screen.getByTestId('compass')).toHaveStyle(`--pf-v6-c-compass--BackgroundImage--light: url(${backgroundSrc})`);
+});
+
+test('Renders with dark background image when backgroundSrcDark is provided', () => {
+  const backgroundSrc = 'dark-bg.jpg';
+  render(<Compass backgroundSrcDark={backgroundSrc} data-testid="compass" />);
+  expect(screen.getByTestId('compass')).toHaveStyle(`--pf-v6-c-compass--BackgroundImage--dark: url(${backgroundSrc})`);
+});
+
+test('Renders with both light and dark background images when both are provided', () => {
+  const lightSrc = 'light-bg.jpg';
+  const darkSrc = 'dark-bg.jpg';
+  render(<Compass backgroundSrcLight={lightSrc} backgroundSrcDark={darkSrc} data-testid="compass" />);
+  const compassElement = screen.getByTestId('compass');
+  expect(compassElement).toHaveStyle(`--pf-v6-c-compass--BackgroundImage--light: url(${lightSrc})`);
+  expect(compassElement).toHaveStyle(`--pf-v6-c-compass--BackgroundImage--dark: url(${darkSrc})`);
+});
+
+test('Renders with additional props spread to the component', () => {
+  render(<Compass aria-label="Test label" data-testid="compass" />);
+  expect(screen.getByTestId('compass')).toHaveAccessibleName('Test label');
+});
+
+test('Renders with default expansion states', () => {
+  render(
+    <Compass
+      header={<div>Header</div>}
+      sidebarStart={<div>Sidebar start</div>}
+      sidebarEnd={<div>Sidebar end</div>}
+      footer={<div>Footer</div>}
+    >
+      Test
+    </Compass>
+  );
+
+  expect(screen.getByText('Header').parentElement).toHaveClass('pf-m-expanded');
+  expect(screen.getByText('Sidebar start').parentElement).toHaveClass('pf-m-expanded');
+  expect(screen.getByText('Sidebar end').parentElement).toHaveClass('pf-m-expanded');
+  expect(screen.getByText('Footer').parentElement).toHaveClass('pf-m-expanded');
+});
+
+test('Matches the snapshot with basic layout', () => {
+  const { asFragment } = render(
+    <Compass
+      header={<div>Header</div>}
+      sidebarStart={<div>Sidebar start</div>}
+      main={<div>Main content</div>}
+      sidebarEnd={<div>Sidebar end</div>}
+      footer={<div>Footer</div>}
+    />
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Matches the snapshot with drawer', () => {
+  const { asFragment } = render(
+    <Compass
+      drawerContent={<div>Drawer content</div>}
+      drawerProps={{ isExpanded: true }}
+      header={<div>Header</div>}
+      sidebarStart={<div>Sidebar start</div>}
+      main={<div>Main content</div>}
+      sidebarEnd={<div>Sidebar end</div>}
+      footer={<div>Footer</div>}
+    />
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
diff --git a/packages/react-core/src/components/Compass/__tests__/CompassContent.test.tsx b/packages/react-core/src/components/Compass/__tests__/CompassContent.test.tsx
new file mode 100644
index 00000000000..1b3cf2eeb0f
--- /dev/null
+++ b/packages/react-core/src/components/Compass/__tests__/CompassContent.test.tsx
@@ -0,0 +1,46 @@
+import { render, screen } from '@testing-library/react';
+import { CompassContent } from '../CompassContent';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders with children', () => {
+  render(<CompassContent>Test content</CompassContent>);
+  expect(screen.getByText('Test content')).toBeVisible();
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<CompassContent className="custom-class">Test</CompassContent>);
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test(`Renders with default ${styles.compassContent} class`, () => {
+  render(<CompassContent>Test</CompassContent>);
+  expect(screen.getByText('Test')).toHaveClass(styles.compassContent);
+});
+
+test('Renders with drawer when drawerContent is provided', () => {
+  render(<CompassContent drawerContent={<div>Drawer content</div>}>Test</CompassContent>);
+  expect(screen.getByText('Drawer content')).toBeVisible();
+});
+
+test('Renders with additional props spread to the component', () => {
+  render(<CompassContent aria-label="Test label">Test</CompassContent>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot without drawer', () => {
+  const { asFragment } = render(
+    <CompassContent>
+      <div>Test content</div>
+    </CompassContent>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Matches the snapshot with drawer', () => {
+  const { asFragment } = render(
+    <CompassContent drawerContent={<div>Drawer content</div>} drawerProps={{ isExpanded: true }}>
+      <div>Test content</div>
+    </CompassContent>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
diff --git a/packages/react-core/src/components/Compass/__tests__/CompassHeader.test.tsx b/packages/react-core/src/components/Compass/__tests__/CompassHeader.test.tsx
new file mode 100644
index 00000000000..750f275671d
--- /dev/null
+++ b/packages/react-core/src/components/Compass/__tests__/CompassHeader.test.tsx
@@ -0,0 +1,56 @@
+import { render, screen } from '@testing-library/react';
+import { CompassHeader } from '../CompassHeader';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="test-header">
+      <CompassHeader />
+    </div>
+  );
+  expect(screen.getByTestId('test-header').firstChild).toBeVisible();
+});
+
+test('Renders logo content when provided', () => {
+  render(<CompassHeader logo={<div>Logo content</div>} />);
+  expect(screen.getByText('Logo content')).toBeVisible();
+});
+
+test('Renders nav content when provided', () => {
+  render(<CompassHeader nav={<div>Nav content</div>} />);
+  expect(screen.getByText('Nav content')).toBeVisible();
+});
+
+test('Renders profile content when provided', () => {
+  render(<CompassHeader profile={<div>Profile content</div>} />);
+  expect(screen.getByText('Profile content')).toBeVisible();
+});
+
+test('Renders all content when all props are provided', () => {
+  render(<CompassHeader logo={<div>Logo</div>} nav={<div>Nav</div>} profile={<div>Profile</div>} />);
+  expect(screen.getByText('Logo')).toBeVisible();
+  expect(screen.getByText('Nav')).toBeVisible();
+  expect(screen.getByText('Profile')).toBeVisible();
+});
+
+test(`Renders logo with ${styles.compass}__logo class`, () => {
+  render(<CompassHeader logo={<div>Logo</div>} />);
+  expect(screen.getByText('Logo').parentElement).toHaveClass(`${styles.compass}__logo`);
+});
+
+test(`Renders nav with ${styles.compassNav} class`, () => {
+  render(<CompassHeader nav={<div>Nav</div>} />);
+  expect(screen.getByText('Nav').parentElement).toHaveClass(styles.compassNav);
+});
+
+test(`Renders profile with ${styles.compassProfile} class`, () => {
+  render(<CompassHeader profile={<div>Profile</div>} />);
+  expect(screen.getByText('Profile').parentElement).toHaveClass(styles.compassProfile);
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(
+    <CompassHeader logo={<div>Logo</div>} nav={<div>Nav</div>} profile={<div>Profile</div>} />
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
diff --git a/packages/react-core/src/components/Compass/__tests__/CompassHero.test.tsx b/packages/react-core/src/components/Compass/__tests__/CompassHero.test.tsx
new file mode 100644
index 00000000000..f68ed214b79
--- /dev/null
+++ b/packages/react-core/src/components/Compass/__tests__/CompassHero.test.tsx
@@ -0,0 +1,150 @@
+import { render, screen } from '@testing-library/react';
+import { CompassHero } from '../CompassHero';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="test-hero">
+      <CompassHero />
+    </div>
+  );
+  expect(screen.getByTestId('test-hero').firstChild).toBeVisible();
+});
+
+test('Renders with children', () => {
+  render(<CompassHero>Test content</CompassHero>);
+  expect(screen.getByText('Test content')).toBeVisible();
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<CompassHero className="custom-class">Test</CompassHero>);
+  expect(screen.getByText('Test').parentElement).toHaveClass('custom-class');
+});
+
+test(`Renders with default ${styles.compassPanel} and ${styles.compassHero} classes on the hero and ${styles.compassHeroBody} class on the hero body`, () => {
+  render(<CompassHero>Test</CompassHero>);
+  const heroBodyElement = screen.getByText('Test');
+  expect(heroBodyElement).toHaveClass(styles.compassHeroBody);
+
+  const heroElement = heroBodyElement.parentElement;
+  expect(heroElement).toHaveClass(styles.compassPanel);
+  expect(heroElement).toHaveClass(styles.compassHero);
+});
+
+test('Renders with light background image style when backgroundSrcLight is provided', () => {
+  const backgroundSrc = 'light-bg.jpg';
+  render(<CompassHero backgroundSrcLight={backgroundSrc}>Test</CompassHero>);
+  expect(screen.getByText('Test').parentElement).toHaveStyle(
+    `--pf-v6-c-compass__hero--BackgroundImage--light: url(${backgroundSrc})`
+  );
+});
+
+test('Renders with dark background image style when backgroundSrcDark is provided', () => {
+  const backgroundSrc = 'dark-bg.jpg';
+  render(<CompassHero backgroundSrcDark={backgroundSrc}>Test</CompassHero>);
+  expect(screen.getByText('Test').parentElement).toHaveStyle(
+    `--pf-v6-c-compass__hero--BackgroundImage--dark: url(${backgroundSrc})`
+  );
+});
+
+test('Renders with both light and dark background image styles when both are provided', () => {
+  const lightSrc = 'light-bg.jpg';
+  const darkSrc = 'dark-bg.jpg';
+  render(
+    <CompassHero backgroundSrcLight={lightSrc} backgroundSrcDark={darkSrc}>
+      Test
+    </CompassHero>
+  );
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--BackgroundImage--light: url(${lightSrc})`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--BackgroundImage--dark: url(${darkSrc})`);
+});
+
+test('Renders with light gradient styles when gradientLight is provided', () => {
+  const gradient = {
+    stop1: '#ff0000',
+    stop2: '#00ff00',
+    stop3: '#0000ff'
+  };
+  render(<CompassHero gradientLight={gradient}>Test</CompassHero>);
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-1--light: ${gradient.stop1}`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-2--light: ${gradient.stop2}`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-3--light: ${gradient.stop3}`);
+});
+
+test('Renders with dark gradient styles when gradientDark is provided', () => {
+  const gradient = {
+    stop1: '#ff0000',
+    stop2: '#00ff00',
+    stop3: '#0000ff'
+  };
+  render(<CompassHero gradientDark={gradient}>Test</CompassHero>);
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-1--dark: ${gradient.stop1}`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-2--dark: ${gradient.stop2}`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-3--dark: ${gradient.stop3}`);
+});
+
+test('Renders with both light and dark gradient styles when both are provided', () => {
+  const lightGradient = {
+    stop1: '#ff0000',
+    stop2: '#00ff00',
+    stop3: '#0000ff'
+  };
+  const darkGradient = {
+    stop1: '#000000',
+    stop2: '#ffffff',
+    stop3: '#808080'
+  };
+  render(
+    <CompassHero gradientLight={lightGradient} gradientDark={darkGradient}>
+      Test
+    </CompassHero>
+  );
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-1--light: ${lightGradient.stop1}`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-1--dark: ${darkGradient.stop1}`);
+});
+
+test('Renders with both background images and gradient styles when both are provided', () => {
+  const lightSrc = 'light-bg.jpg';
+  const darkSrc = 'dark-bg.jpg';
+  const lightGradient = { stop1: '#ff0000' };
+  const darkGradient = { stop1: '#000000' };
+
+  render(
+    <CompassHero
+      backgroundSrcLight={lightSrc}
+      backgroundSrcDark={darkSrc}
+      gradientLight={lightGradient}
+      gradientDark={darkGradient}
+    >
+      Test
+    </CompassHero>
+  );
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--BackgroundImage--light: url(${lightSrc})`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--BackgroundImage--dark: url(${darkSrc})`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-1--light: ${lightGradient.stop1}`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-1--dark: ${darkGradient.stop1}`);
+});
+
+test('Renders with additional props spread to the component', () => {
+  render(<CompassHero aria-label="Test label">Test</CompassHero>);
+  expect(screen.getByText('Test').parentElement).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(
+    <CompassHero
+      backgroundSrcLight="light.jpg"
+      backgroundSrcDark="dark.jpg"
+      gradientLight={{ stop1: '#ff0000', stop2: '#00ff00', stop3: '#0000ff' }}
+      gradientDark={{ stop1: '#000000', stop2: '#ffffff', stop3: '#808080' }}
+    >
+      <div>Hero content</div>
+    </CompassHero>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
diff --git a/packages/react-core/src/components/Compass/__tests__/CompassMainHeader.test.tsx b/packages/react-core/src/components/Compass/__tests__/CompassMainHeader.test.tsx
new file mode 100644
index 00000000000..ef13deb96ef
--- /dev/null
+++ b/packages/react-core/src/components/Compass/__tests__/CompassMainHeader.test.tsx
@@ -0,0 +1,90 @@
+import { render, screen } from '@testing-library/react';
+import { CompassMainHeader } from '../CompassMainHeader';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="test-main-header">
+      <CompassMainHeader />
+    </div>
+  );
+  expect(screen.getByTestId('test-main-header').firstChild).toBeVisible();
+});
+
+test('Renders with children', () => {
+  render(<CompassMainHeader>Custom content</CompassMainHeader>);
+  expect(screen.getByText('Custom content')).toBeVisible();
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<CompassMainHeader className="custom-class">Test</CompassMainHeader>);
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test(`Renders with default ${styles.compass}__main-header class`, () => {
+  render(<CompassMainHeader>Test</CompassMainHeader>);
+  expect(screen.getByText('Test')).toHaveClass(`${styles.compass}__main-header`);
+});
+
+test('Renders title when provided', () => {
+  render(<CompassMainHeader title={<div>Title content</div>}>Test</CompassMainHeader>);
+  expect(screen.getByText('Title content')).toBeVisible();
+});
+
+test('Renders toolbar when provided', () => {
+  render(<CompassMainHeader toolbar={<div>Toolbar content</div>}>Test</CompassMainHeader>);
+  expect(screen.getByText('Toolbar content')).toBeVisible();
+});
+
+test('Renders both title and toolbar when provided', () => {
+  render(
+    <CompassMainHeader title={<div>Title</div>} toolbar={<div>Toolbar</div>}>
+      Test
+    </CompassMainHeader>
+  );
+  expect(screen.getByText('Title')).toBeVisible();
+  expect(screen.getByText('Toolbar')).toBeVisible();
+});
+
+test('Ignores children when title is provided', () => {
+  render(<CompassMainHeader title={<div>Title</div>}>Ignored children</CompassMainHeader>);
+  expect(screen.getByText('Title')).toBeVisible();
+  expect(screen.queryByText('Ignored children')).not.toBeInTheDocument();
+});
+
+test('Ignores children when toolbar is provided', () => {
+  render(<CompassMainHeader toolbar={<div>Toolbar</div>}>Ignored children</CompassMainHeader>);
+  expect(screen.getByText('Toolbar')).toBeVisible();
+  expect(screen.queryByText('Ignored children')).not.toBeInTheDocument();
+});
+
+test('Ignores children when both title and toolbar are provided', () => {
+  render(
+    <CompassMainHeader title={<div>Title</div>} toolbar={<div>Toolbar</div>}>
+      Ignored children
+    </CompassMainHeader>
+  );
+  expect(screen.getByText('Title')).toBeVisible();
+  expect(screen.getByText('Toolbar')).toBeVisible();
+  expect(screen.queryByText('Ignored children')).not.toBeInTheDocument();
+});
+
+test('Renders children when neither title nor toolbar are provided', () => {
+  render(<CompassMainHeader>Custom children content</CompassMainHeader>);
+  expect(screen.getByText('Custom children content')).toBeVisible();
+});
+
+test('Renders with additional props spread to the component', () => {
+  render(<CompassMainHeader aria-label="Test label">Test</CompassMainHeader>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot with both title and toolbar', () => {
+  const { asFragment } = render(<CompassMainHeader title={<div>Title</div>} toolbar={<div>Toolbar</div>} />);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Matches the snapshot with children', () => {
+  const { asFragment } = render(<CompassMainHeader>Custom children content</CompassMainHeader>);
+  expect(asFragment()).toMatchSnapshot();
+});
diff --git a/packages/react-core/src/components/Compass/__tests__/CompassMessageBar.test.tsx b/packages/react-core/src/components/Compass/__tests__/CompassMessageBar.test.tsx
new file mode 100644
index 00000000000..f6f7546e72c
--- /dev/null
+++ b/packages/react-core/src/components/Compass/__tests__/CompassMessageBar.test.tsx
@@ -0,0 +1,41 @@
+import { render, screen } from '@testing-library/react';
+import { CompassMessageBar } from '../CompassMessageBar';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="test-message-bar">
+      <CompassMessageBar />
+    </div>
+  );
+  expect(screen.getByTestId('test-message-bar').firstChild).toBeVisible();
+});
+
+test('Renders with children', () => {
+  render(<CompassMessageBar>Test content</CompassMessageBar>);
+  expect(screen.getByText('Test content')).toBeVisible();
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<CompassMessageBar className="custom-class">Test</CompassMessageBar>);
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test(`Renders with default ${styles.compassMessageBar} class`, () => {
+  render(<CompassMessageBar>Test</CompassMessageBar>);
+  expect(screen.getByText('Test')).toHaveClass(styles.compassMessageBar);
+});
+
+test('Renders with additional props spread to the component', () => {
+  render(<CompassMessageBar aria-label="Test label">Test</CompassMessageBar>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(
+    <CompassMessageBar>
+      <div>Message bar content</div>
+    </CompassMessageBar>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
diff --git a/packages/react-core/src/components/Compass/__tests__/CompassPanel.test.tsx b/packages/react-core/src/components/Compass/__tests__/CompassPanel.test.tsx
new file mode 100644
index 00000000000..64a66961d61
--- /dev/null
+++ b/packages/react-core/src/components/Compass/__tests__/CompassPanel.test.tsx
@@ -0,0 +1,86 @@
+import { render, screen } from '@testing-library/react';
+import { CompassPanel } from '../CompassPanel';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders with children', () => {
+  render(<CompassPanel>Test content</CompassPanel>);
+  expect(screen.getByText('Test content')).toBeVisible();
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<CompassPanel className="custom-class">Test</CompassPanel>);
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test(`Renders with default ${styles.compassPanel} class`, () => {
+  render(<CompassPanel>Test</CompassPanel>);
+  expect(screen.getByText('Test')).toHaveClass(styles.compassPanel);
+});
+
+test(`Renders with ${styles.modifiers.pill} when isPill is true`, () => {
+  render(<CompassPanel isPill>Test</CompassPanel>);
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.pill);
+});
+
+test(`Renders with ${styles.modifiers.noBorder} when hasNoBorder is true`, () => {
+  render(<CompassPanel hasNoBorder>Test</CompassPanel>);
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.noBorder);
+});
+
+test(`Renders with ${styles.modifiers.noPadding} when hasNoPadding is true`, () => {
+  render(<CompassPanel hasNoPadding>Test</CompassPanel>);
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.noPadding);
+});
+
+test('Renders with pf-v6-m-thinking when isThinking is true', () => {
+  render(<CompassPanel isThinking>Test</CompassPanel>);
+  expect(screen.getByText('Test')).toHaveClass('pf-v6-m-thinking');
+});
+
+test(`Renders with ${styles.modifiers.fullHeight} when isFullHeight is true`, () => {
+  render(<CompassPanel isFullHeight>Test</CompassPanel>);
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.fullHeight);
+});
+
+test(`Renders with ${styles.modifiers.scrollable} when isScrollable is true`, () => {
+  render(<CompassPanel isScrollable>Test</CompassPanel>);
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.scrollable);
+});
+
+test('Renders with multiple modifier classes when multiple props are true', () => {
+  render(
+    <CompassPanel isPill hasNoBorder hasNoPadding isThinking isFullHeight isScrollable>
+      Test
+    </CompassPanel>
+  );
+  const panelElement = screen.getByText('Test');
+  expect(panelElement).toHaveClass(styles.modifiers.pill);
+  expect(panelElement).toHaveClass(styles.modifiers.noBorder);
+  expect(panelElement).toHaveClass(styles.modifiers.noPadding);
+  expect(panelElement).toHaveClass('pf-v6-m-thinking');
+  expect(panelElement).toHaveClass(styles.modifiers.fullHeight);
+  expect(panelElement).toHaveClass(styles.modifiers.scrollable);
+});
+
+test('Renders with additional props spread to the component', () => {
+  render(<CompassPanel aria-label="Test label">Test</CompassPanel>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot with all modifiers', () => {
+  const { asFragment } = render(
+    <CompassPanel isPill hasNoBorder hasNoPadding isThinking isFullHeight isScrollable>
+      <div>Panel with all modifiers</div>
+    </CompassPanel>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Matches the snapshot with no modifiers', () => {
+  const { asFragment } = render(
+    <CompassPanel>
+      <div>Basic panel</div>
+    </CompassPanel>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
diff --git a/packages/react-core/src/components/Compass/__tests__/__snapshots__/Compass.test.tsx.snap b/packages/react-core/src/components/Compass/__tests__/__snapshots__/Compass.test.tsx.snap
new file mode 100644
index 00000000000..5efef8172f5
--- /dev/null
+++ b/packages/react-core/src/components/Compass/__tests__/__snapshots__/Compass.test.tsx.snap
@@ -0,0 +1,104 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot with basic layout 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass"
+  >
+    <div
+      class="pf-v6-c-compass__header pf-m-expanded"
+    >
+      <div>
+        Header
+      </div>
+    </div>
+    <div
+      class="pf-v6-c-compass__sidebar pf-m-start pf-m-expanded"
+    >
+      <div>
+        Sidebar start
+      </div>
+    </div>
+    <div
+      class="pf-v6-c-compass__main"
+    >
+      <div>
+        Main content
+      </div>
+    </div>
+    <div
+      class="pf-v6-c-compass__sidebar pf-m-end pf-m-expanded"
+    >
+      <div>
+        Sidebar end
+      </div>
+    </div>
+    <div
+      class="pf-v6-c-compass__footer pf-m-expanded"
+    >
+      <div>
+        Footer
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Matches the snapshot with drawer 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-drawer pf-m-expanded"
+  >
+    <div
+      class="pf-v6-c-drawer__main"
+    >
+      <div
+        class="pf-v6-c-drawer__content"
+      >
+        <div
+          class="pf-v6-c-compass"
+        >
+          <div
+            class="pf-v6-c-compass__header pf-m-expanded"
+          >
+            <div>
+              Header
+            </div>
+          </div>
+          <div
+            class="pf-v6-c-compass__sidebar pf-m-start pf-m-expanded"
+          >
+            <div>
+              Sidebar start
+            </div>
+          </div>
+          <div
+            class="pf-v6-c-compass__main"
+          >
+            <div>
+              Main content
+            </div>
+          </div>
+          <div
+            class="pf-v6-c-compass__sidebar pf-m-end pf-m-expanded"
+          >
+            <div>
+              Sidebar end
+            </div>
+          </div>
+          <div
+            class="pf-v6-c-compass__footer pf-m-expanded"
+          >
+            <div>
+              Footer
+            </div>
+          </div>
+        </div>
+      </div>
+      <div>
+        Drawer content
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
diff --git a/packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassContent.test.tsx.snap b/packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassContent.test.tsx.snap
new file mode 100644
index 00000000000..ba18b59bb71
--- /dev/null
+++ b/packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassContent.test.tsx.snap
@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot with drawer 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-drawer pf-m-expanded"
+  >
+    <div
+      class="pf-v6-c-drawer__main"
+    >
+      <div
+        class="pf-v6-c-drawer__content"
+      >
+        <div
+          class="pf-v6-c-compass__content"
+        >
+          <div>
+            Test content
+          </div>
+        </div>
+      </div>
+      <div>
+        Drawer content
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Matches the snapshot without drawer 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__content"
+  >
+    <div>
+      Test content
+    </div>
+  </div>
+</DocumentFragment>
+`;
diff --git a/packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassHeader.test.tsx.snap b/packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassHeader.test.tsx.snap
new file mode 100644
index 00000000000..f3e52b6d77d
--- /dev/null
+++ b/packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassHeader.test.tsx.snap
@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__logo"
+  >
+    <div>
+      Logo
+    </div>
+  </div>
+  <div
+    class="pf-v6-c-compass__nav"
+  >
+    <div>
+      Nav
+    </div>
+  </div>
+  <div
+    class="pf-v6-c-compass__profile"
+  >
+    <div>
+      Profile
+    </div>
+  </div>
+</DocumentFragment>
+`;
diff --git a/packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassHero.test.tsx.snap b/packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassHero.test.tsx.snap
new file mode 100644
index 00000000000..f130da9f4dc
--- /dev/null
+++ b/packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassHero.test.tsx.snap
@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__panel pf-v6-c-compass__hero"
+    style="--pf-v6-c-compass__hero--BackgroundImage--light: url(light.jpg); --pf-v6-c-compass__hero--BackgroundImage--dark: url(dark.jpg); --pf-v6-c-compass__hero--gradient--stop-1--light: #ff0000; --pf-v6-c-compass__hero--gradient--stop-2--light: #00ff00; --pf-v6-c-compass__hero--gradient--stop-3--light: #0000ff; --pf-v6-c-compass__hero--gradient--stop-1--dark: #000000; --pf-v6-c-compass__hero--gradient--stop-2--dark: #ffffff; --pf-v6-c-compass__hero--gradient--stop-3--dark: #808080;"
+  >
+    <div
+      class="pf-v6-c-compass__hero-body"
+    >
+      <div>
+        Hero content
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
diff --git a/packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassMainHeader.test.tsx.snap b/packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassMainHeader.test.tsx.snap
new file mode 100644
index 00000000000..a64dcc96592
--- /dev/null
+++ b/packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassMainHeader.test.tsx.snap
@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot with both title and toolbar 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__main-header"
+  >
+    <div
+      class="pf-v6-c-compass__panel"
+    >
+      <div
+        class="pf-v6-l-flex pf-m-align-items-center"
+      >
+        <div
+          class="pf-m-grow"
+        >
+          <div>
+            Title
+          </div>
+        </div>
+        <div
+          class=""
+        >
+          <div>
+            Toolbar
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Matches the snapshot with children 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__main-header"
+  >
+    Custom children content
+  </div>
+</DocumentFragment>
+`;
diff --git a/packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassMessageBar.test.tsx.snap b/packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassMessageBar.test.tsx.snap
new file mode 100644
index 00000000000..edde4c73946
--- /dev/null
+++ b/packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassMessageBar.test.tsx.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__message-bar"
+  >
+    <div>
+      Message bar content
+    </div>
+  </div>
+</DocumentFragment>
+`;
diff --git a/packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassPanel.test.tsx.snap b/packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassPanel.test.tsx.snap
new file mode 100644
index 00000000000..d9557da1c91
--- /dev/null
+++ b/packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassPanel.test.tsx.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot with all modifiers 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__panel pf-m-pill pf-m-no-border pf-m-no-padding pf-v6-m-thinking pf-m-full-height pf-m-scrollable"
+  >
+    <div>
+      Panel with all modifiers
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Matches the snapshot with no modifiers 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__panel"
+  >
+    <div>
+      Basic panel
+    </div>
+  </div>
+</DocumentFragment>
+`;
diff --git a/packages/react-core/src/components/Compass/examples/Compass.md b/packages/react-core/src/components/Compass/examples/Compass.md
new file mode 100644
index 00000000000..60433d031ad
--- /dev/null
+++ b/packages/react-core/src/components/Compass/examples/Compass.md
@@ -0,0 +1,38 @@
+---
+id: Compass
+cssPrefix: pf-v6-c-compass
+section: components
+beta: true
+propComponents: ['Compass', 'CompassHeader', 'CompassContent', 'CompassHero', 'CompassMainHeader', 'CompassPanel']
+---
+
+import './compass.css';
+import { useRef, useState } from 'react';
+import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
+import OutlinedPlusSquare from '@patternfly/react-icons/dist/esm/icons/outlined-plus-square-icon';
+import OutlinedCopy from '@patternfly/react-icons/dist/esm/icons/outlined-copy-icon';
+import OutlinedQuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon';
+
+## Examples
+
+### Basic
+
+In a basic compass layout, content can be passed to the following props to populate areas of the page:
+
+- `header`: content rendered in the top of the page. This will typically be a `CompassHeader` component to break the header into 3 areas consisting of a logo or brand, middle navigation, and profile.
+- `sidebarStart`: content rendered in the left side or start side of the page
+- `main`: content rendered in the center of the page. This will typically consist of a `CompassMainHeader` or `CompassHero`, along with a `CompassContent` filled with one or more `CompassPanel` components.
+- `sidebarEnd`: content rendered in the right side or end side of the page
+- `footer`: content rendered in the bottom of the page
+
+The background image of the `Compass` and `CompassHero` may be customized by using their respective `backgroundSrcLight` and `backgroundSrcDark` props. The `CompassHero` also allows customization of a color gradient across its container by using the `gradientLight` and `gradientDark` props.
+
+```ts file="CompassBasic.tsx"
+
+```
+
+### Demo
+
+```ts isFullscreen file="CompassDemo.tsx"
+
+```
diff --git a/packages/react-core/src/components/Compass/examples/CompassBasic.tsx b/packages/react-core/src/components/Compass/examples/CompassBasic.tsx
new file mode 100644
index 00000000000..f43c55b79bb
--- /dev/null
+++ b/packages/react-core/src/components/Compass/examples/CompassBasic.tsx
@@ -0,0 +1,33 @@
+import { Compass, CompassHeader, CompassHero, CompassContent, CompassMainHeader } from '@patternfly/react-core';
+import './compass.css';
+
+export const CompassBasic: React.FunctionComponent = () => {
+  const headerContent = <CompassHeader logo={<div>Logo</div>} nav={<div>Nav</div>} profile={<div>Profile</div>} />;
+  const sidebarStartContent = <div>Sidebar start</div>;
+  // TODO: simplify mainContent to only a div string
+  const mainContent = (
+    <>
+      <CompassHero>
+        <div>Hero</div>
+      </CompassHero>
+      <CompassContent>
+        <CompassMainHeader>
+          <div>Content title</div>
+        </CompassMainHeader>
+        <div>Content</div>
+      </CompassContent>
+    </>
+  );
+  const sidebarEndContent = <div>Sidebar end</div>;
+  const footerContent = <div>Footer</div>;
+
+  return (
+    <Compass
+      header={headerContent}
+      sidebarStart={sidebarStartContent}
+      main={mainContent}
+      sidebarEnd={sidebarEndContent}
+      footer={footerContent}
+    />
+  );
+};
diff --git a/packages/react-core/src/components/Compass/examples/CompassDemo.tsx b/packages/react-core/src/components/Compass/examples/CompassDemo.tsx
new file mode 100644
index 00000000000..f3b631aa2b4
--- /dev/null
+++ b/packages/react-core/src/components/Compass/examples/CompassDemo.tsx
@@ -0,0 +1,151 @@
+import { useRef, useState } from 'react';
+import {
+  Compass,
+  CompassHeader,
+  CompassHero,
+  CompassContent,
+  CompassMainHeader,
+  CompassPanel,
+  CompassMessageBar,
+  Tabs,
+  TabsComponent,
+  Tab,
+  TabContent,
+  TabTitleText,
+  ActionList,
+  ActionListGroup,
+  ActionListItem,
+  Button,
+  Title,
+  Tooltip
+} from '@patternfly/react-core';
+import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
+import OutlinedPlusSquare from '@patternfly/react-icons/dist/esm/icons/outlined-plus-square-icon';
+import OutlinedCopy from '@patternfly/react-icons/dist/esm/icons/outlined-copy-icon';
+import OutlinedQuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon';
+
+export const CompassBasic: React.FunctionComponent = () => {
+  const [activeTab, setActiveTab] = useState<number>(0);
+  const [activeSubtab, setActiveSubtab] = useState<number>(0);
+  const subTabsRef = useRef<HTMLDivElement>(null);
+
+  const navContent = (
+    <>
+      <CompassPanel isPill hasNoPadding>
+        <Tabs
+          activeKey={activeTab}
+          isNav
+          onSelect={(_event, tabIndex) => setActiveTab(tabIndex as number)}
+          component={TabsComponent.nav}
+          aria-label="Compass navigation tabs"
+          inset={{ default: 'insetXl' }}
+        >
+          <Tab
+            tabContentId="subtabs"
+            tabContentRef={subTabsRef}
+            eventKey={0}
+            title={<TabTitleText>Tab 1</TabTitleText>}
+            aria-label="Compass tab with subtabs"
+          />
+          <Tab eventKey={1} title={<TabTitleText>Tab 2</TabTitleText>} />
+          <Tab eventKey={2} title={<TabTitleText>Tab 3</TabTitleText>} />
+          <Tab eventKey={3} title={<TabTitleText>Disabled Tab 4</TabTitleText>} isDisabled />
+        </Tabs>
+      </CompassPanel>
+      <CompassPanel isPill hasNoPadding>
+        <TabContent id="subtabs" ref={subTabsRef}>
+          <Tabs
+            activeKey={activeSubtab}
+            isSubtab
+            isNav
+            onSelect={(_event, tabIndex) => setActiveSubtab(tabIndex as number)}
+            aria-label="Compass navigation subtabs"
+            inset={{ default: 'insetXl' }}
+          >
+            <Tab
+              tabContentId="subtab-1"
+              eventKey={0}
+              title={
+                <TabTitleText>
+                  <div id="subtab-1">Subtab 1</div>
+                </TabTitleText>
+              }
+            />
+            <Tab eventKey={1} title={<TabTitleText>Subtab 2</TabTitleText>} />
+            <Tab eventKey={2} title={<TabTitleText>Disabled Subtab 3</TabTitleText>} isDisabled />
+          </Tabs>
+        </TabContent>
+      </CompassPanel>
+    </>
+  );
+
+  const sidebarContent = (
+    <CompassPanel isPill>
+      <ActionList isIconList className="pf-m-vertical" /* isVertical */>
+        <ActionListGroup>
+          <ActionListItem>
+            <Tooltip content="Play">
+              <Button variant="plain" icon={<PlayIcon />} aria-label="Play" />
+            </Tooltip>
+          </ActionListItem>
+          <ActionListItem>
+            <Tooltip content="Add">
+              <Button variant="plain" icon={<OutlinedPlusSquare />} aria-label="Add" />
+            </Tooltip>
+          </ActionListItem>
+        </ActionListGroup>
+        <ActionListItem>
+          <Tooltip content="Copy">
+            <Button variant="plain" icon={<OutlinedCopy />} aria-label="Copy" />
+          </Tooltip>
+        </ActionListItem>
+        <ActionListGroup>
+          <ActionListItem>
+            <Tooltip content="Help">
+              <Button variant="plain" icon={<OutlinedQuestionCircleIcon />} aria-label="Help" />
+            </Tooltip>
+          </ActionListItem>
+          <ActionListItem>
+            <Tooltip content="Second copy">
+              <Button variant="plain" icon={<OutlinedCopy />} aria-label="Copy2" />
+            </Tooltip>
+          </ActionListItem>
+        </ActionListGroup>
+      </ActionList>
+    </CompassPanel>
+  );
+
+  const headerContent = <CompassHeader logo={<div>logo</div>} nav={navContent} profile={<div>Profile</div>} />;
+  const sidebarStartContent = sidebarContent;
+  const mainContent = (
+    <>
+      <CompassHero gradientDark={{ stop1: '#000', stop2: '#1b0d33', stop3: '#3d2785' }}>
+        <div>Hero</div>
+      </CompassHero>
+      <CompassMainHeader title={<Title headingLevel="h1">Content title</Title>} />
+      <CompassContent>
+        <CompassPanel>Content</CompassPanel>
+      </CompassContent>
+    </>
+  );
+  const sidebarEndContent = sidebarContent;
+  const footerContent = (
+    <CompassMessageBar>
+      <CompassPanel isPill hasNoPadding>
+        Message bar
+      </CompassPanel>
+    </CompassMessageBar>
+  );
+
+  return (
+    <Compass
+      header={headerContent}
+      sidebarStart={sidebarStartContent}
+      main={mainContent}
+      sidebarEnd={sidebarEndContent}
+      footer={footerContent}
+      backgroundSrcDark="/assets/images/pf-background.svg"
+      backgroundSrcLight="/assets/images/pf-background.svg"
+    />
+  );
+};
diff --git a/packages/react-core/src/components/Compass/examples/compass.css b/packages/react-core/src/components/Compass/examples/compass.css
new file mode 100644
index 00000000000..46c3b19746b
--- /dev/null
+++ b/packages/react-core/src/components/Compass/examples/compass.css
@@ -0,0 +1,11 @@
+#ws-react-c-compass-basic [class*="pf-v6-c-compass"] {
+  position: relative;
+}
+
+#ws-react-c-compass-basic [class*="pf-v6-c-compass"]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border: var(--pf-t--global--border--width--regular) dashed var(--pf-t--global--border--color--default);
+  pointer-events: none;
+}
\ No newline at end of file
diff --git a/packages/react-core/src/components/Compass/index.ts b/packages/react-core/src/components/Compass/index.ts
new file mode 100644
index 00000000000..c27bc7678f1
--- /dev/null
+++ b/packages/react-core/src/components/Compass/index.ts
@@ -0,0 +1,7 @@
+export * from './Compass';
+export * from './CompassContent';
+export * from './CompassHeader';
+export * from './CompassHero';
+export * from './CompassMainHeader';
+export * from './CompassMessageBar';
+export * from './CompassPanel';
diff --git a/packages/react-core/src/components/Tabs/Tabs.tsx b/packages/react-core/src/components/Tabs/Tabs.tsx
index 1009d511801..5f4575ecfc5 100644
--- a/packages/react-core/src/components/Tabs/Tabs.tsx
+++ b/packages/react-core/src/components/Tabs/Tabs.tsx
@@ -69,6 +69,8 @@ export interface TabsProps
   isFilled?: boolean;
   /** Enables subtab tab styling */
   isSubtab?: boolean;
+  /** @beta Enables horizontal nav tab styling */
+  isNav?: boolean;
   /** Enables box styling to the tab component */
   isBox?: boolean;
   /** Enables vertical tab styling */
@@ -196,6 +198,7 @@ class Tabs extends Component<TabsProps, TabsState> {
     onSelect: () => undefined as any,
     isFilled: false,
     isSubtab: false,
+    isNav: false,
     isVertical: false,
     isBox: false,
     hasNoBorderBottom: false,
@@ -475,6 +478,7 @@ class Tabs extends Component<TabsProps, TabsState> {
       isAddButtonDisabled,
       isFilled,
       isSubtab,
+      isNav,
       isVertical,
       isBox,
       hasNoBorderBottom,
@@ -561,6 +565,7 @@ class Tabs extends Component<TabsProps, TabsState> {
             styles.modifiers.animateCurrent,
             isFilled && styles.modifiers.fill,
             isSubtab && styles.modifiers.subtab,
+            isNav && styles.modifiers.nav,
             isVertical && styles.modifiers.vertical,
             isVertical && expandable && formatBreakpointMods(expandable, styles),
             isVertical && expandable && isExpandedLocal && styles.modifiers.expanded,
diff --git a/packages/react-core/src/components/index.ts b/packages/react-core/src/components/index.ts
index 5c9f602ca73..75ee15d8669 100644
--- a/packages/react-core/src/components/index.ts
+++ b/packages/react-core/src/components/index.ts
@@ -17,6 +17,7 @@ export * from './Card';
 export * from './Checkbox';
 export * from './ClipboardCopy';
 export * from './CodeBlock';
+export * from './Compass';
 export * from './Content';
 export * from './DataList';
 export * from './DatePicker';
diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json
index f8294c3bf7d..6c3eeb442ba 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.5.0-prerelease.9",
+    "@patternfly/patternfly": "6.5.0-prerelease.11",
     "@patternfly/react-charts": "workspace:^",
     "@patternfly/react-code-editor": "workspace:^",
     "@patternfly/react-core": "workspace:^",
@@ -37,7 +37,7 @@
     "victory": "^37.3.6"
   },
   "devDependencies": {
-    "@patternfly/documentation-framework": "^6.22.8",
+    "@patternfly/documentation-framework": "^6.28.9",
     "@patternfly/patternfly-a11y": "5.1.0"
   },
   "keywords": [
diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json
index d1b39fc827b..e3ca87c143b 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.5.0-prerelease.9",
+    "@patternfly/patternfly": "6.5.0-prerelease.11",
     "fs-extra": "^11.3.0",
     "tslib": "^2.8.1"
   },
diff --git a/packages/react-styles/package.json b/packages/react-styles/package.json
index 0034ed828e3..6c6eec52bae 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.5.0-prerelease.9",
+    "@patternfly/patternfly": "6.5.0-prerelease.11",
     "change-case": "^5.4.4",
     "fs-extra": "^11.3.0"
   },
diff --git a/packages/react-tokens/package.json b/packages/react-tokens/package.json
index 7d6fe39310f..12b5b1420da 100644
--- a/packages/react-tokens/package.json
+++ b/packages/react-tokens/package.json
@@ -30,7 +30,7 @@
   },
   "devDependencies": {
     "@adobe/css-tools": "^4.4.4",
-    "@patternfly/patternfly": "6.5.0-prerelease.9",
+    "@patternfly/patternfly": "6.5.0-prerelease.11",
     "fs-extra": "^11.3.0"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 021ef07ed8b..71912cdbafa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4394,7 +4394,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@patternfly/ast-helpers@npm:^1.4.0-alpha.278":
+"@patternfly/ast-helpers@npm:^1.4.0-alpha.303":
   version: 1.26.2
   resolution: "@patternfly/ast-helpers@npm:1.26.2"
   dependencies:
@@ -4407,15 +4407,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@patternfly/documentation-framework@npm:^6.22.8":
-  version: 6.22.8
-  resolution: "@patternfly/documentation-framework@npm:6.22.8"
+"@patternfly/documentation-framework@npm:^6.28.9":
+  version: 6.28.9
+  resolution: "@patternfly/documentation-framework@npm:6.28.9"
   dependencies:
     "@babel/core": "npm:^7.28.3"
     "@babel/preset-env": "npm:7.27.1"
     "@babel/preset-react": "npm:^7.24.1"
     "@mdx-js/util": "npm:1.6.16"
-    "@patternfly/ast-helpers": "npm:^1.4.0-alpha.278"
+    "@patternfly/ast-helpers": "npm:^1.4.0-alpha.303"
     "@reach/router": "npm:@gatsbyjs/reach-router@1.3.9"
     autoprefixer: "npm:10.4.19"
     babel-loader: "npm:^9.1.3"
@@ -4457,7 +4457,6 @@ __metadata:
     remark-mdxjs: "npm:2.0.0-next.8"
     remark-parse: "npm:8.0.3"
     remark-squeeze-paragraphs: "npm:4.0.0"
-    responsive-loader: "npm:3.1.2"
     sharp: "npm:0.33.0"
     style-to-object: "npm:0.3.0"
     to-vfile: "npm:6.1.0"
@@ -4474,15 +4473,15 @@ __metadata:
     webpack-dev-server: "npm:5.2.2"
     webpack-merge: "npm:5.8.0"
   peerDependencies:
-    "@patternfly/patternfly": ^6.3.0
-    "@patternfly/react-code-editor": ^6.3.0
-    "@patternfly/react-core": ^6.3.0
-    "@patternfly/react-table": ^6.3.0
+    "@patternfly/patternfly": ^6.4.0
+    "@patternfly/react-code-editor": ^6.4.0
+    "@patternfly/react-core": ^6.4.0
+    "@patternfly/react-table": ^6.4.0
     react: ^17.0.0 || ^18.0.0
     react-dom: ^17.0.0 || ^18.0.0
   bin:
     pf-docs-framework: scripts/cli/cli.js
-  checksum: 10c0/af56a534e0d4cf2599eb741167efad4a84762ae2e20d0e72c9c1765c22037a1c12201f1b2f02a7c326940bad0e62c5fdbf6c630c3a236a40d25b664722773095
+  checksum: 10c0/ef78c9b08b4d00d762122b7ca13ca1d711bb50fd4b3cc3e64112cae7c6a8a869fc8d69cda9401d3f34bf16c733bd1f3a9a8d587cc297787065fbd625a4694ba4
   languageName: node
   linkType: hard
 
@@ -4517,10 +4516,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@patternfly/patternfly@npm:6.5.0-prerelease.9":
-  version: 6.5.0-prerelease.9
-  resolution: "@patternfly/patternfly@npm:6.5.0-prerelease.9"
-  checksum: 10c0/f3ab8f6b9a94409bffb57a9d56a823a0c4bd639c284620c33ccb7302ffddeff6d4b54bac7314da4f10cfd330177236b5504a85ce743a997d02c2bf992e8f52c3
+"@patternfly/patternfly@npm:6.5.0-prerelease.11":
+  version: 6.5.0-prerelease.11
+  resolution: "@patternfly/patternfly@npm:6.5.0-prerelease.11"
+  checksum: 10c0/2a65b577ea6ec57c1065856e7606333697948e6db53fca84e19df6ce130894f9a9feea479eff1a14525645961206d41a1bef8414e5ccbbbb85591a67b778d0e2
   languageName: node
   linkType: hard
 
@@ -4618,7 +4617,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@patternfly/react-core@workspace:packages/react-core"
   dependencies:
-    "@patternfly/patternfly": "npm:6.5.0-prerelease.9"
+    "@patternfly/patternfly": "npm:6.5.0-prerelease.11"
     "@patternfly/react-icons": "workspace:^"
     "@patternfly/react-styles": "workspace:^"
     "@patternfly/react-tokens": "workspace:^"
@@ -4638,8 +4637,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@patternfly/react-docs@workspace:packages/react-docs"
   dependencies:
-    "@patternfly/documentation-framework": "npm:^6.22.8"
-    "@patternfly/patternfly": "npm:6.5.0-prerelease.9"
+    "@patternfly/documentation-framework": "npm:^6.28.9"
+    "@patternfly/patternfly": "npm:6.5.0-prerelease.11"
     "@patternfly/patternfly-a11y": "npm:5.1.0"
     "@patternfly/react-charts": "workspace:^"
     "@patternfly/react-code-editor": "workspace:^"
@@ -4679,7 +4678,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.5.0-prerelease.9"
+    "@patternfly/patternfly": "npm:6.5.0-prerelease.11"
     fs-extra: "npm:^11.3.0"
     tslib: "npm:^2.8.1"
   peerDependencies:
@@ -4764,7 +4763,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@patternfly/react-styles@workspace:packages/react-styles"
   dependencies:
-    "@patternfly/patternfly": "npm:6.5.0-prerelease.9"
+    "@patternfly/patternfly": "npm:6.5.0-prerelease.11"
     change-case: "npm:^5.4.4"
     fs-extra: "npm:^11.3.0"
   languageName: unknown
@@ -4806,7 +4805,7 @@ __metadata:
   resolution: "@patternfly/react-tokens@workspace:packages/react-tokens"
   dependencies:
     "@adobe/css-tools": "npm:^4.4.4"
-    "@patternfly/patternfly": "npm:6.5.0-prerelease.9"
+    "@patternfly/patternfly": "npm:6.5.0-prerelease.11"
     fs-extra: "npm:^11.3.0"
   languageName: unknown
   linkType: soft
@@ -5993,15 +5992,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:^18.11.9":
-  version: 18.19.34
-  resolution: "@types/node@npm:18.19.34"
-  dependencies:
-    undici-types: "npm:~5.26.4"
-  checksum: 10c0/e985f50684def801801069e236165ee511f9195fc04ad4a2af7642d86aeaeaf7bfe34c147f894a48618a5c71c15b388ca91341a244792149543a712e38351988
-  languageName: node
-  linkType: hard
-
 "@types/node@npm:^22.16.5":
   version: 22.16.5
   resolution: "@types/node@npm:22.16.5"
@@ -11930,17 +11920,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"find-cache-dir@npm:^3.3.2":
-  version: 3.3.2
-  resolution: "find-cache-dir@npm:3.3.2"
-  dependencies:
-    commondir: "npm:^1.0.1"
-    make-dir: "npm:^3.0.2"
-    pkg-dir: "npm:^4.1.0"
-  checksum: 10c0/92747cda42bff47a0266b06014610981cfbb71f55d60f2c8216bc3108c83d9745507fb0b14ecf6ab71112bed29cd6fb1a137ee7436179ea36e11287e3159e587
-  languageName: node
-  linkType: hard
-
 "find-cache-dir@npm:^4.0.0":
   version: 4.0.0
   resolution: "find-cache-dir@npm:4.0.0"
@@ -15737,7 +15716,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"json5@npm:^2.1.2, json5@npm:^2.2.1, json5@npm:^2.2.2, json5@npm:^2.2.3":
+"json5@npm:^2.1.2, json5@npm:^2.2.2, json5@npm:^2.2.3":
   version: 2.2.3
   resolution: "json5@npm:2.2.3"
   bin:
@@ -16195,13 +16174,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loader-utils@npm:^3.2.1":
-  version: 3.3.1
-  resolution: "loader-utils@npm:3.3.1"
-  checksum: 10c0/f2af4eb185ac5bf7e56e1337b666f90744e9f443861ac521b48f093fb9e8347f191c8960b4388a3365147d218913bc23421234e7788db69f385bacfefa0b4758
-  languageName: node
-  linkType: hard
-
 "locate-path@npm:^2.0.0":
   version: 2.0.0
   resolution: "locate-path@npm:2.0.0"
@@ -16471,15 +16443,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"make-dir@npm:^3.0.2, make-dir@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "make-dir@npm:3.1.0"
-  dependencies:
-    semver: "npm:^6.0.0"
-  checksum: 10c0/56aaafefc49c2dfef02c5c95f9b196c4eb6988040cf2c712185c7fe5c99b4091591a7fc4d4eafaaefa70ff763a26f6ab8c3ff60b9e75ea19876f49b18667ecaa
-  languageName: node
-  linkType: hard
-
 "make-error@npm:^1.1.1":
   version: 1.3.6
   resolution: "make-error@npm:1.3.6"
@@ -18819,7 +18782,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pkg-dir@npm:^4.1.0, pkg-dir@npm:^4.2.0":
+"pkg-dir@npm:^4.2.0":
   version: 4.2.0
   resolution: "pkg-dir@npm:4.2.0"
   dependencies:
@@ -20249,27 +20212,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"responsive-loader@npm:3.1.2":
-  version: 3.1.2
-  resolution: "responsive-loader@npm:3.1.2"
-  dependencies:
-    "@types/node": "npm:^18.11.9"
-    find-cache-dir: "npm:^3.3.2"
-    json5: "npm:^2.2.1"
-    loader-utils: "npm:^3.2.1"
-    make-dir: "npm:^3.1.0"
-    schema-utils: "npm:^4.0.0"
-  peerDependencies:
-    webpack: ^5.73.0
-  peerDependenciesMeta:
-    jimp:
-      optional: true
-    sharp:
-      optional: true
-  checksum: 10c0/c93b200bb51fe2968ee8092b4817db55dd55f2306d1d75fa66aa6cd2dbddf9c7f394528f9182acbc3a37489fed9b5d743b51a5275c88d31fb665195cf0f5adaf
-  languageName: node
-  linkType: hard
-
 "restore-cursor@npm:^2.0.0":
   version: 2.0.0
   resolution: "restore-cursor@npm:2.0.0"
@@ -20857,7 +20799,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:^6.0.0, semver@npm:^6.3.0, semver@npm:^6.3.1":
+"semver@npm:^6.3.0, semver@npm:^6.3.1":
   version: 6.3.1
   resolution: "semver@npm:6.3.1"
   bin: