diff --git a/packages/react-core/package.json b/packages/react-core/package.json
index 7ba5ede47f9..b74ff8f84f3 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.86",
+    "@patternfly/patternfly": "6.5.0-prerelease.88",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.3"
diff --git a/packages/react-core/src/components/Compass/Compass.tsx b/packages/react-core/src/components/Compass/Compass.tsx
index c152a015cc8..9018c1a2528 100644
--- a/packages/react-core/src/components/Compass/Compass.tsx
+++ b/packages/react-core/src/components/Compass/Compass.tsx
@@ -1,10 +1,6 @@
 import { Drawer, DrawerContent, DrawerContentBody, 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;
@@ -40,10 +36,6 @@ export interface CompassProps extends React.HTMLProps<HTMLDivElement> {
   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> = ({
@@ -63,26 +55,12 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
   isFooterExpanded = true,
   drawerContent,
   drawerProps,
-  backgroundSrcLight,
-  backgroundSrcDark,
   ...props
 }: CompassProps) => {
   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, dock !== undefined && styles.modifiers.docked, className)}
-      {...props}
-      style={{ ...props.style, ...backgroundImageStyles }}
-    >
+    <div className={css(styles.compassContainer)}>
       {dock && masthead}
       {dock && (
         <div
@@ -131,17 +109,19 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
     </div>
   );
 
-  if (hasDrawer) {
-    return (
-      <Drawer isPill {...drawerProps}>
-        <DrawerContent panelContent={drawerContent}>
-          <DrawerContentBody>{compassContent}</DrawerContentBody>
-        </DrawerContent>
-      </Drawer>
-    );
-  }
-
-  return compassContent;
+  return (
+    <div className={css(styles.compass, dock && styles.modifiers.docked, className)} {...props}>
+      {hasDrawer ? (
+        <Drawer isPill {...drawerProps}>
+          <DrawerContent panelContent={drawerContent}>
+            <DrawerContentBody>{compassContent}</DrawerContentBody>
+          </DrawerContent>
+        </Drawer>
+      ) : (
+        compassContent
+      )}
+    </div>
+  );
 };
 
 Compass.displayName = 'Compass';
diff --git a/packages/react-core/src/components/Compass/CompassMainHeader.tsx b/packages/react-core/src/components/Compass/CompassMainHeader.tsx
index 2351ca4bfa2..9d3389a8c92 100644
--- a/packages/react-core/src/components/Compass/CompassMainHeader.tsx
+++ b/packages/react-core/src/components/Compass/CompassMainHeader.tsx
@@ -21,7 +21,7 @@ export interface CompassMainHeaderProps extends Omit<React.HTMLProps<HTMLDivElem
   /** Additional props passed to the Panel that wraps the main header content when using the title or toolbar props. When using the
    * children prop, you should pass your own Panel.
    */
-  compassPanelProps?: Omit<PanelProps, 'children'>;
+  panelProps?: Omit<PanelProps, 'children'>;
 }
 
 export const CompassMainHeader: React.FunctionComponent<CompassMainHeaderProps> = ({
@@ -29,12 +29,12 @@ export const CompassMainHeader: React.FunctionComponent<CompassMainHeaderProps>
   title,
   toolbar,
   children,
-  compassPanelProps,
+  panelProps,
   ...props
 }: CompassMainHeaderProps) => {
   const _content =
     title !== undefined || toolbar !== undefined ? (
-      <Panel {...compassPanelProps}>
+      <Panel {...panelProps}>
         <PanelMain>
           <PanelMainBody>
             <CompassMainHeaderContent>
diff --git a/packages/react-core/src/components/Compass/__tests__/Compass.test.tsx b/packages/react-core/src/components/Compass/__tests__/Compass.test.tsx
index 91973224496..52f60bfec79 100644
--- a/packages/react-core/src/components/Compass/__tests__/Compass.test.tsx
+++ b/packages/react-core/src/components/Compass/__tests__/Compass.test.tsx
@@ -99,27 +99,6 @@ test('Renders with drawer when drawerContent is provided', () => {
   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');
diff --git a/packages/react-core/src/components/Compass/__tests__/CompassMainHeader.test.tsx b/packages/react-core/src/components/Compass/__tests__/CompassMainHeader.test.tsx
index 0133f5eaa04..ef2b630edac 100644
--- a/packages/react-core/src/components/Compass/__tests__/CompassMainHeader.test.tsx
+++ b/packages/react-core/src/components/Compass/__tests__/CompassMainHeader.test.tsx
@@ -100,19 +100,15 @@ test('Does not render Panel when children are passed', () => {
   expect(content).not.toHaveClass(panelStyles.panel);
 });
 
-test('Passes props to Panel when title and compassPanelProps is passed', () => {
-  render(
-    <CompassMainHeader data-testid="test-id" compassPanelProps={{ className: 'panel-class' }} title="Title text" />
-  );
+test('Passes props to Panel when title and panelProps is passed', () => {
+  render(<CompassMainHeader data-testid="test-id" panelProps={{ className: 'panel-class' }} title="Title text" />);
 
   const panel = screen.getByTestId('test-id').firstChild;
   expect(panel).toHaveClass('panel-class');
 });
 
-test('Passes props to Panel when toolbar and compassPanelProps is passed', () => {
-  render(
-    <CompassMainHeader data-testid="test-id" compassPanelProps={{ className: 'panel-class' }} toolbar="Toolbar text" />
-  );
+test('Passes props to Panel when toolbar and panelProps is passed', () => {
+  render(<CompassMainHeader data-testid="test-id" panelProps={{ className: 'panel-class' }} toolbar="Toolbar text" />);
 
   const panel = screen.getByTestId('test-id').firstChild;
   expect(panel).toHaveClass('panel-class');
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
index a4d1e225ed6..ceaae419241 100644
--- 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
@@ -6,38 +6,42 @@ exports[`Matches the snapshot with basic layout 1`] = `
     class="pf-v6-c-compass"
   >
     <div
-      class="pf-v6-c-compass__header pf-m-expanded"
+      class="pf-v6-c-compass__container"
     >
-      <div>
-        Header
+      <div
+        class="pf-v6-c-compass__header pf-m-expanded"
+      >
+        <div>
+          Header
+        </div>
       </div>
-    </div>
-    <div
-      class="pf-v6-c-compass__sidebar pf-m-start pf-m-expanded"
-    >
-      <div>
-        Sidebar start
+      <div
+        class="pf-v6-c-compass__sidebar pf-m-start pf-m-expanded"
+      >
+        <div>
+          Sidebar start
+        </div>
       </div>
-    </div>
-    <div
-      class="pf-v6-c-compass__main"
-    >
-      <div>
-        Main content
+      <div
+        class="pf-v6-c-compass__main"
+      >
+        <div>
+          Main content
+        </div>
       </div>
-    </div>
-    <div
-      class="pf-v6-c-compass__sidebar pf-m-end pf-m-expanded"
-    >
-      <div>
-        Sidebar end
+      <div
+        class="pf-v6-c-compass__sidebar pf-m-end pf-m-expanded"
+      >
+        <div>
+          Sidebar end
+        </div>
       </div>
-    </div>
-    <div
-      class="pf-v6-c-compass__footer pf-m-expanded"
-    >
-      <div>
-        Footer
+      <div
+        class="pf-v6-c-compass__footer pf-m-expanded"
+      >
+        <div>
+          Footer
+        </div>
       </div>
     </div>
   </div>
@@ -47,60 +51,64 @@ exports[`Matches the snapshot with basic layout 1`] = `
 exports[`Matches the snapshot with drawer 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-drawer pf-m-expanded pf-m-pill"
+    class="pf-v6-c-compass"
   >
     <div
-      class="pf-v6-c-drawer__main"
+      class="pf-v6-c-drawer pf-m-expanded pf-m-pill"
     >
       <div
-        class="pf-v6-c-drawer__content"
+        class="pf-v6-c-drawer__main"
       >
         <div
-          class="pf-v6-c-drawer__body"
+          class="pf-v6-c-drawer__content"
         >
           <div
-            class="pf-v6-c-compass"
+            class="pf-v6-c-drawer__body"
           >
             <div
-              class="pf-v6-c-compass__header pf-m-expanded"
+              class="pf-v6-c-compass__container"
             >
-              <div>
-                Header
+              <div
+                class="pf-v6-c-compass__header pf-m-expanded"
+              >
+                <div>
+                  Header
+                </div>
               </div>
-            </div>
-            <div
-              class="pf-v6-c-compass__sidebar pf-m-start pf-m-expanded"
-            >
-              <div>
-                Sidebar start
+              <div
+                class="pf-v6-c-compass__sidebar pf-m-start pf-m-expanded"
+              >
+                <div>
+                  Sidebar start
+                </div>
               </div>
-            </div>
-            <div
-              class="pf-v6-c-compass__main"
-            >
-              <div>
-                Main content
+              <div
+                class="pf-v6-c-compass__main"
+              >
+                <div>
+                  Main content
+                </div>
               </div>
-            </div>
-            <div
-              class="pf-v6-c-compass__sidebar pf-m-end pf-m-expanded"
-            >
-              <div>
-                Sidebar end
+              <div
+                class="pf-v6-c-compass__sidebar pf-m-end pf-m-expanded"
+              >
+                <div>
+                  Sidebar end
+                </div>
               </div>
-            </div>
-            <div
-              class="pf-v6-c-compass__footer pf-m-expanded"
-            >
-              <div>
-                Footer
+              <div
+                class="pf-v6-c-compass__footer pf-m-expanded"
+              >
+                <div>
+                  Footer
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-      <div>
-        Drawer content
+        <div>
+          Drawer content
+        </div>
       </div>
     </div>
   </div>
diff --git a/packages/react-core/src/components/Compass/examples/Compass.md b/packages/react-core/src/components/Compass/examples/Compass.md
index 9664ee51c6f..c10254b59f7 100644
--- a/packages/react-core/src/components/Compass/examples/Compass.md
+++ b/packages/react-core/src/components/Compass/examples/Compass.md
@@ -35,7 +35,7 @@ In a basic Compass layout, content can be passed to the following props to popul
 - `sidebarEnd`: Content rendered at the horizontal end of the page (by default, the right side).
 - `footer`: Content rendered at the bottom of the page.
 
-To customize the background image of the `<Compass>` and `<CompassHero>` components, you can use their respective `backgroundSrcLight` and `backgroundSrcDark` props. You can also add and customize a color gradient background for the `<CompassHero>` component by using the `gradientLight` and `gradientDark` props.
+The background image of `<Compass>` is set at a global level alongside the theme. You can customize the background image of the `<Hero>` inside `<CompassHero>` by using its `backgroundSrcLight` and `backgroundSrcDark` props, or you may set a gradient using the `gradientLight` and `gradientDark` props.
 
 ```ts isBeta file="CompassBasic.tsx"
 
diff --git a/packages/react-core/src/demos/Compass/examples/CompassDemo.tsx b/packages/react-core/src/demos/Compass/examples/CompassDemo.tsx
index 60acc9ab2c6..243fd93aae5 100644
--- a/packages/react-core/src/demos/Compass/examples/CompassDemo.tsx
+++ b/packages/react-core/src/demos/Compass/examples/CompassDemo.tsx
@@ -40,7 +40,7 @@ export const CompassBasic: React.FunctionComponent = () => {
 
   const navContent = (
     <>
-      <Panel isPill>
+      <Panel isPill isGlass>
         <PanelMain>
           <PanelMainBody>
             <CompassNavContent>
@@ -70,7 +70,7 @@ export const CompassBasic: React.FunctionComponent = () => {
           </PanelMainBody>
         </PanelMain>
       </Panel>
-      <Panel isPill>
+      <Panel isPill isGlass>
         <PanelMain>
           <PanelMainBody style={{ padding: 0 }}>
             <TabContent id="subtabs" ref={subTabsRef}>
@@ -105,7 +105,7 @@ export const CompassBasic: React.FunctionComponent = () => {
   );
 
   const sidebarContent = (
-    <Panel isPill>
+    <Panel isPill isGlass>
       <PanelMain>
         <PanelMainBody>
           <ActionList isIconList isVertical>
@@ -153,9 +153,9 @@ export const CompassBasic: React.FunctionComponent = () => {
           Hero
         </Hero>
       </CompassHero>
-      <CompassMainHeader title={<Title headingLevel="h1">Content title</Title>} />
+      <CompassMainHeader title={<Title headingLevel="h1">Content title</Title>} panelProps={{ isGlass: true }} />
       <CompassContent>
-        <Panel>
+        <Panel isScrollable isAutoHeight isGlass>
           <PanelMain>
             <PanelMainBody>Content</PanelMainBody>
           </PanelMain>
@@ -166,7 +166,7 @@ export const CompassBasic: React.FunctionComponent = () => {
   const sidebarEndContent = sidebarContent;
   const footerContent = (
     <CompassMessageBar>
-      <Panel isPill>
+      <Panel isPill isGlass>
         <PanelMain>
           <PanelMainBody style={{ padding: 0 }}>Message bar</PanelMainBody>
         </PanelMain>
diff --git a/packages/react-core/src/demos/Compass/examples/CompassDockDemo.tsx b/packages/react-core/src/demos/Compass/examples/CompassDockDemo.tsx
index 59f09ddbcf1..5a5a83080e3 100644
--- a/packages/react-core/src/demos/Compass/examples/CompassDockDemo.tsx
+++ b/packages/react-core/src/demos/Compass/examples/CompassDockDemo.tsx
@@ -377,9 +377,9 @@ export const CompassDockDemo: React.FunctionComponent = () => {
 
   const mainContent = (
     <>
-      <CompassMainHeader title={<Title headingLevel="h1">Content title</Title>} />
+      <CompassMainHeader title={<Title headingLevel="h1">Content title</Title>} panelProps={{ isGlass: true }} />
       <CompassContent>
-        <Panel>
+        <Panel isScrollable isAutoHeight isGlass>
           <PanelMain>
             <PanelMainBody>Content</PanelMainBody>
           </PanelMain>
diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json
index 61523616c20..3f98b2c0f83 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.86",
+    "@patternfly/patternfly": "6.5.0-prerelease.88",
     "@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 0d4985d8ea0..7f492dc71cd 100644
--- a/packages/react-icons/package.json
+++ b/packages/react-icons/package.json
@@ -35,7 +35,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.86",
+    "@patternfly/patternfly": "6.5.0-prerelease.88",
     "@rhds/icons": "^2.2.0",
     "fs-extra": "^11.3.3",
     "tslib": "^2.8.1"
diff --git a/packages/react-styles/package.json b/packages/react-styles/package.json
index 63233a14707..7f58b2eba42 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.86",
+    "@patternfly/patternfly": "6.5.0-prerelease.88",
     "change-case": "^5.4.4",
     "fs-extra": "^11.3.3"
   },
diff --git a/packages/react-tokens/package.json b/packages/react-tokens/package.json
index 61846180d31..cd6b048c5e4 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.86",
+    "@patternfly/patternfly": "6.5.0-prerelease.88",
     "fs-extra": "^11.3.3"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index e31735021fa..91953ab794b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5070,10 +5070,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@patternfly/patternfly@npm:6.5.0-prerelease.86":
-  version: 6.5.0-prerelease.86
-  resolution: "@patternfly/patternfly@npm:6.5.0-prerelease.86"
-  checksum: 10c0/6c5301913e8bc7a308c8c2857169cb9b5287f633b6c84b40ac5cc29488b9b8080f38099768624234809d55934c98ef9667f6fc10cad54d151e8986b9d3340424
+"@patternfly/patternfly@npm:6.5.0-prerelease.88":
+  version: 6.5.0-prerelease.88
+  resolution: "@patternfly/patternfly@npm:6.5.0-prerelease.88"
+  checksum: 10c0/b4a4b65d048ec4ca6d9e445d24e2e4b309af0de4ed62fbfce7399d851a79947450fd923a9cf0e5702750fa535d1631b108fc45fe54090b6b1452b653e21402c6
   languageName: node
   linkType: hard
 
@@ -5171,7 +5171,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@patternfly/react-core@workspace:packages/react-core"
   dependencies:
-    "@patternfly/patternfly": "npm:6.5.0-prerelease.86"
+    "@patternfly/patternfly": "npm:6.5.0-prerelease.88"
     "@patternfly/react-icons": "workspace:^"
     "@patternfly/react-styles": "workspace:^"
     "@patternfly/react-tokens": "workspace:^"
@@ -5192,7 +5192,7 @@ __metadata:
   resolution: "@patternfly/react-docs@workspace:packages/react-docs"
   dependencies:
     "@patternfly/documentation-framework": "npm:^6.36.8"
-    "@patternfly/patternfly": "npm:6.5.0-prerelease.86"
+    "@patternfly/patternfly": "npm:6.5.0-prerelease.88"
     "@patternfly/patternfly-a11y": "npm:5.1.0"
     "@patternfly/react-charts": "workspace:^"
     "@patternfly/react-code-editor": "workspace:^"
@@ -5232,7 +5232,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.86"
+    "@patternfly/patternfly": "npm:6.5.0-prerelease.88"
     "@rhds/icons": "npm:^2.2.0"
     fs-extra: "npm:^11.3.3"
     tslib: "npm:^2.8.1"
@@ -5319,7 +5319,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@patternfly/react-styles@workspace:packages/react-styles"
   dependencies:
-    "@patternfly/patternfly": "npm:6.5.0-prerelease.86"
+    "@patternfly/patternfly": "npm:6.5.0-prerelease.88"
     change-case: "npm:^5.4.4"
     fs-extra: "npm:^11.3.3"
   languageName: unknown
@@ -5361,7 +5361,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.86"
+    "@patternfly/patternfly": "npm:6.5.0-prerelease.88"
     fs-extra: "npm:^11.3.3"
   languageName: unknown
   linkType: soft