diff --git a/packages/react-core/src/components/Compass/Compass.tsx b/packages/react-core/src/components/Compass/Compass.tsx
index 619d034d4ac..f48d401d8e6 100644
--- a/packages/react-core/src/components/Compass/Compass.tsx
+++ b/packages/react-core/src/components/Compass/Compass.tsx
@@ -68,7 +68,7 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
 
   const compassContent = (
     <div
-      className={css(styles.compass, dock !== undefined && styles.modifiers.dock, className)}
+      className={css(styles.compass, dock !== undefined && styles.modifiers.docked, className)}
       {...props}
       style={{ ...props.style, ...backgroundImageStyles }}
     >
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 3ef5b23583c..175b1effe0f 100644
--- a/packages/react-core/src/components/Compass/__tests__/Compass.test.tsx
+++ b/packages/react-core/src/components/Compass/__tests__/Compass.test.tsx
@@ -171,12 +171,12 @@ test('Matches the snapshot with drawer', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test(`Renders with ${styles.modifiers.dock} class when dock is passed`, () => {
+test(`Renders with ${styles.modifiers.docked} class when dock is passed`, () => {
   render(<Compass dock={<div>Dock content</div>} data-testid="compass" />);
-  expect(screen.getByTestId('compass')).toHaveClass(styles.modifiers.dock);
+  expect(screen.getByTestId('compass')).toHaveClass(styles.modifiers.docked);
 });
 
-test(`Does not render with ${styles.modifiers.dock} class when dock is not passed`, () => {
+test(`Does not render with ${styles.modifiers.docked} class when dock is not passed`, () => {
   render(<Compass data-testid="compass" />);
-  expect(screen.getByTestId('compass')).not.toHaveClass(styles.modifiers.dock);
+  expect(screen.getByTestId('compass')).not.toHaveClass(styles.modifiers.docked);
 });
diff --git a/packages/react-core/src/components/Page/Page.tsx b/packages/react-core/src/components/Page/Page.tsx
index c0b02c4caec..839271aae33 100644
--- a/packages/react-core/src/components/Page/Page.tsx
+++ b/packages/react-core/src/components/Page/Page.tsx
@@ -339,7 +339,7 @@ class Page extends Component<PageProps, PageState> {
           {...rest}
           className={css(
             styles.page,
-            variant === 'docked' && styles.modifiers.dock,
+            variant === 'docked' && styles.modifiers.docked,
             width !== null && height !== null && 'pf-m-resize-observer',
             width !== null && `pf-m-breakpoint-${getBreakpoint(width)}`,
             height !== null && `pf-m-height-breakpoint-${getVerticalBreakpoint(height)}`,
diff --git a/packages/react-core/src/components/Page/__tests__/Page.test.tsx b/packages/react-core/src/components/Page/__tests__/Page.test.tsx
index d1258ac18f2..67a973098ea 100644
--- a/packages/react-core/src/components/Page/__tests__/Page.test.tsx
+++ b/packages/react-core/src/components/Page/__tests__/Page.test.tsx
@@ -390,21 +390,21 @@ describe('Page', () => {
     expect(screen.getByRole('main').parentElement).not.toHaveClass(styles.modifiers.noFill);
   });
 
-  test(`Renders with ${styles.modifiers.dock} class when variant is docked`, () => {
+  test(`Renders with ${styles.modifiers.docked} class when variant is docked`, () => {
     render(<Page {...props} variant="docked" data-testid="page"></Page>);
 
-    expect(screen.getByTestId('page')).toHaveClass(styles.modifiers.dock);
+    expect(screen.getByTestId('page')).toHaveClass(styles.modifiers.docked);
   });
 
-  test(`Does not render with ${styles.modifiers.dock} class when variant is default`, () => {
+  test(`Does not render with ${styles.modifiers.docked} class when variant is default`, () => {
     render(<Page {...props} variant="default" data-testid="page"></Page>);
 
-    expect(screen.getByTestId('page')).not.toHaveClass(styles.modifiers.dock);
+    expect(screen.getByTestId('page')).not.toHaveClass(styles.modifiers.docked);
   });
 
-  test(`Does not render with ${styles.modifiers.dock} class when variant is not passed`, () => {
+  test(`Does not render with ${styles.modifiers.docked} class when variant is not passed`, () => {
     render(<Page data-testid="page"></Page>);
-    expect(screen.getByTestId('page')).not.toHaveClass(styles.modifiers.dock);
+    expect(screen.getByTestId('page')).not.toHaveClass(styles.modifiers.docked);
   });
 
   test(`Renders with ${styles.pageDockMain} wrapper when variant is docked`, () => {