diff --git a/package.json b/package.json
index 6959b9fb05..ee91a6b7ad 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,7 @@
   },
   "devDependencies": {
     "@octokit/rest": "^19.0.7",
-    "@patternfly/patternfly": "^6.5.0-prerelease.33",
+    "@patternfly/patternfly": "^6.5.0-prerelease.37",
     "@patternfly/react-code-editor": "^6.5.0-prerelease.26",
     "@patternfly/react-core": "^6.5.0-prerelease.24",
     "@patternfly/react-table": "^6.5.0-prerelease.24",
diff --git a/packages/documentation-framework/components/themeSelector/themeSelector.js b/packages/documentation-framework/components/themeSelector/themeSelector.js
index c28ae4995d..1d86e86152 100644
--- a/packages/documentation-framework/components/themeSelector/themeSelector.js
+++ b/packages/documentation-framework/components/themeSelector/themeSelector.js
@@ -2,8 +2,6 @@ import React, { useState } from 'react';
 import {
   Select,
   SelectGroup,
-  SelectList,
-  SelectOption,
   MenuToggle,
   MenuSearch,
   MenuSearchInput,
@@ -11,12 +9,8 @@ import {
   ToggleGroupItem,
   Icon,
   Divider,
-  Spinner,
-  Label,
-  Popover,
-  Button
+  Spinner
 } from '@patternfly/react-core';
-import { HelpIcon, ExternalLinkAltIcon } from '@patternfly/react-icons';
 import { useTheme, THEME_TYPES } from '../../hooks/useTheme';
 
 const SunIcon = (
@@ -50,6 +44,14 @@ const DesktopIcon = (
   </svg>
 );
 
+const ThemeVariantGroupLabel = () => {
+  return (
+    <div className="pf-v6-c-menu__group-title" id="theme-selector-variant-title">
+      Theme
+    </div>
+  );
+};
+
 const ColorSchemeGroupLabel = () => {
   return (
     <div className="pf-v6-c-menu__group-title" id="theme-selector-color-scheme-title">
@@ -58,60 +60,34 @@ const ColorSchemeGroupLabel = () => {
   );
 };
 
-const HighContrastGroupLabel = () => {
-  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-
+const ContrastModeGroupLabel = () => {
   return (
-    <div className="pf-v6-c-menu__group-title">
-      High contrast{' '}
-      <Popover
-        onClick={(e) => e.stopPropagation()}
-        headerContent={'Under development'}
-        headerComponent="h1"
-        bodyContent={
-          'We are still working to add high contrast support across all PatternFly components and extensions. This beta allows you to preview our progress.'
-        }
-        footerContent={
-          <Button
-            icon={<ExternalLinkAltIcon />}
-            component="a"
-            isInline
-            variant="link"
-            href="/design-foundations/theming"
-            target="_blank"
-          >
-            Learn more
-          </Button>
-        }
-        aria-label="More info about high contrast"
-        appendTo={() => document.body}
-      >
-        <Button variant="plain" hasNoPadding icon={<HelpIcon />} aria-label="High contrast help" />
-      </Popover>{' '}
-      &nbsp;
-      <Label color="blue" isCompact>
-        Beta
-      </Label>
+    <div className="pf-v6-c-menu__group-title" id="theme-selector-contrast-title">
+      Contrast mode
     </div>
   );
 };
 
 export const ThemeSelector = ({ id }) => {
+  const { mode: themeVariant, setMode: setThemeVariant, modes: themeVariantModes } = useTheme(THEME_TYPES.THEME_VARIANT);
   const { mode: themeMode, setMode: setThemeMode, modes: colorModes } = useTheme(THEME_TYPES.COLOR);
   const {
-    mode: highContrastMode,
-    setMode: setHighContrastMode,
-    modes: highContrastModes
-  } = useTheme(THEME_TYPES.HIGH_CONTRAST);
+    mode: contrastMode,
+    setMode: setContrastMode,
+    modes: contrastModes
+  } = useTheme(THEME_TYPES.CONTRAST);
   const [isThemeSelectOpen, setIsThemeSelectOpen] = useState(false);
 
-  const handleThemeChange = (_event, selectedMode) => {
-    setThemeMode(selectedMode);
-    setIsThemeSelectOpen(false);
+  const handleThemeVariantChange = (evt) => {
+    setThemeVariant(evt.currentTarget.id);
   };
 
-  const handleHighContrastThemeSelection = (evt) => {
-    setHighContrastMode(evt.currentTarget.id);
+  const handleThemeChange = (evt) => {
+    setThemeMode(evt.currentTarget.id);
+  };
+
+  const handleContrastModeChange = (evt) => {
+    setContrastMode(evt.currentTarget.id);
   };
 
   const getThemeDisplayText = (mode) => {
@@ -126,6 +102,9 @@ export const ThemeSelector = ({ id }) => {
   };
 
   const getThemeIcon = (mode) => {
+    if (!colorModes) {
+      return <Spinner size="sm" />;
+    }
     switch (mode) {
       case colorModes.LIGHT:
         return SunIcon;
@@ -134,7 +113,7 @@ export const ThemeSelector = ({ id }) => {
       case colorModes.SYSTEM:
         return DesktopIcon;
       default:
-        return <Spinner size="sm" />;
+        return DesktopIcon; // Default to system icon
     }
   };
 
@@ -142,8 +121,6 @@ export const ThemeSelector = ({ id }) => {
     <Select
       id={id}
       isOpen={isThemeSelectOpen}
-      selected={themeMode}
-      onSelect={handleThemeChange}
       onOpenChange={(isOpen) => setIsThemeSelectOpen(isOpen)}
       toggle={(toggleRef) => (
         <MenuToggle
@@ -162,50 +139,86 @@ export const ThemeSelector = ({ id }) => {
         preventOverflow: true
       }}
     >
+      <SelectGroup label={ThemeVariantGroupLabel}>
+        <MenuSearch>
+          <MenuSearchInput>
+            <ToggleGroup aria-labelledby="theme-selector-variant-title">
+              <ToggleGroupItem
+                text="Default"
+                buttonId={themeVariantModes.DEFAULT}
+                isSelected={themeVariant === themeVariantModes.DEFAULT}
+                onChange={handleThemeVariantChange}
+              />
+              <ToggleGroupItem
+                text="Unified"
+                buttonId={themeVariantModes.UNIFIED}
+                isSelected={themeVariant === themeVariantModes.UNIFIED}
+                onChange={handleThemeVariantChange}
+              />
+            </ToggleGroup>
+          </MenuSearchInput>
+        </MenuSearch>
+      </SelectGroup>
+      <Divider />
       <SelectGroup label={ColorSchemeGroupLabel}>
-        <SelectList aria-labelledby="theme-selector-color-scheme-title">
-          <SelectOption value={colorModes.SYSTEM} icon={DesktopIcon} description="Follow system preference">
-            System
-          </SelectOption>
-          <SelectOption value={colorModes.LIGHT} icon={SunIcon} description="Always use light mode">
-            Light
-          </SelectOption>
-          <SelectOption value={colorModes.DARK} icon={MoonIcon} description="Always use dark mode">
-            Dark
-          </SelectOption>
-        </SelectList>
+        <MenuSearch>
+          <MenuSearchInput>
+            <ToggleGroup aria-labelledby="theme-selector-color-scheme-title">
+              <ToggleGroupItem
+                text="System"
+                buttonId={colorModes.SYSTEM}
+                isSelected={themeMode === colorModes.SYSTEM}
+                onChange={handleThemeChange}
+              />
+              <ToggleGroupItem
+                text="Light"
+                buttonId={colorModes.LIGHT}
+                isSelected={themeMode === colorModes.LIGHT}
+                onChange={handleThemeChange}
+              />
+              <ToggleGroupItem
+                text="Dark"
+                buttonId={colorModes.DARK}
+                isSelected={themeMode === colorModes.DARK}
+                onChange={handleThemeChange}
+              />
+            </ToggleGroup>
+          </MenuSearchInput>
+        </MenuSearch>
+      </SelectGroup>
+      <Divider />
+      <SelectGroup label={ContrastModeGroupLabel}>
+        <MenuSearch>
+          <MenuSearchInput>
+            <ToggleGroup aria-labelledby="theme-selector-contrast-title">
+              <ToggleGroupItem
+                text="System"
+                buttonId={contrastModes.SYSTEM}
+                isSelected={contrastMode === contrastModes.SYSTEM}
+                onChange={handleContrastModeChange}
+              />
+              <ToggleGroupItem
+                text="Default"
+                buttonId={contrastModes.DEFAULT}
+                isSelected={contrastMode === contrastModes.DEFAULT}
+                onChange={handleContrastModeChange}
+              />
+              <ToggleGroupItem
+                text="High contrast"
+                buttonId={contrastModes.HIGH_CONTRAST}
+                isSelected={contrastMode === contrastModes.HIGH_CONTRAST}
+                onChange={handleContrastModeChange}
+              />
+              <ToggleGroupItem
+                text="Glass"
+                buttonId={contrastModes.GLASS}
+                isSelected={contrastMode === contrastModes.GLASS}
+                onChange={handleContrastModeChange}
+              />
+            </ToggleGroup>
+          </MenuSearchInput>
+        </MenuSearch>
       </SelectGroup>
-      {process.env.hasHighContrastSwitcher && (
-        <>
-          <Divider />
-          <SelectGroup label={HighContrastGroupLabel}>
-            <MenuSearch>
-              <MenuSearchInput>
-                <ToggleGroup aria-label="High contrast theme switcher">
-                  <ToggleGroupItem
-                    text="System"
-                    buttonId={highContrastModes.SYSTEM}
-                    isSelected={highContrastMode === highContrastModes.SYSTEM}
-                    onChange={handleHighContrastThemeSelection}
-                  />
-                  <ToggleGroupItem
-                    text="On"
-                    buttonId={highContrastModes.ON}
-                    isSelected={highContrastMode === highContrastModes.ON}
-                    onChange={handleHighContrastThemeSelection}
-                  />
-                  <ToggleGroupItem
-                    text="Off"
-                    buttonId={highContrastModes.OFF}
-                    isSelected={highContrastMode === highContrastModes.OFF}
-                    onChange={handleHighContrastThemeSelection}
-                  />
-                </ToggleGroup>
-              </MenuSearchInput>
-            </MenuSearch>
-          </SelectGroup>
-        </>
-      )}
     </Select>
   );
 };
diff --git a/packages/documentation-framework/hooks/useTheme.js b/packages/documentation-framework/hooks/useTheme.js
index afd7c0ae68..03eb9f72f3 100644
--- a/packages/documentation-framework/hooks/useTheme.js
+++ b/packages/documentation-framework/hooks/useTheme.js
@@ -6,15 +6,22 @@ const COLOR_MODES = {
   DARK: 'dark'
 };
 
-const HIGH_CONTRAST_MODES = {
-  SYSTEM: 'high-contrast-system',
-  ON: 'high-contrast-on',
-  OFF: 'high-contrast-off'
+const CONTRAST_MODES = {
+  SYSTEM: 'contrast-system',
+  DEFAULT: 'contrast-default',
+  HIGH_CONTRAST: 'contrast-high',
+  GLASS: 'contrast-glass'
+};
+
+const THEME_VARIANT_MODES = {
+  DEFAULT: 'theme-default',
+  UNIFIED: 'theme-unified'
 };
 
 export const THEME_TYPES = {
   COLOR: 'color',
-  HIGH_CONTRAST: 'high-contrast'
+  CONTRAST: 'contrast',
+  THEME_VARIANT: 'theme-variant'
 };
 
 class ThemeManager {
@@ -61,37 +68,105 @@ class ThemeManager {
     return this.defaultMode;
   }
 
-  addClass() {
+  getHtmlElement() {
     if (!this.isBrowser) {
-      return;
+      return null;
+    }
+    return document.querySelector('html');
+  }
+
+  addClass() {
+    const htmlElement = this.getHtmlElement();
+    if (htmlElement && !htmlElement.classList.contains(this.cssClass)) {
+      htmlElement.classList.add(this.cssClass);
     }
-    document.querySelector('html').classList.add(this.cssClass);
   }
 
   removeClass() {
+    const htmlElement = this.getHtmlElement();
+    if (htmlElement && htmlElement.classList.contains(this.cssClass)) {
+      htmlElement.classList.remove(this.cssClass);
+    }
+  }
+
+  updateClass() {
     if (!this.isBrowser) {
       return;
     }
-    document.querySelector('html').classList.remove(this.cssClass);
+
+    // ALWAYS read from localStorage to ensure we have the correct mode for THIS theme
+    const storedMode = this.getStoredValue();
+
+    // Validate that the stored mode is valid for this theme
+    const validModes = Object.values(this.modes);
+    if (!validModes.includes(storedMode)) {
+      console.error(`[${this.storageKey}] Invalid stored mode "${storedMode}". Valid modes:`, validModes);
+      return;
+    }
+
+    const shouldHaveClass = storedMode === this.modes.SYSTEM
+      ? this.resolve() === this.classEnabledMode
+      : storedMode === this.classEnabledMode;
+
+    if (shouldHaveClass) {
+      this.addClass();
+    } else {
+      this.removeClass();
+    }
   }
+}
 
-  updateClass(mode) {
+class ContrastThemeManager extends ThemeManager {
+  constructor({ storageKey, modes, defaultMode, mediaQueryString }) {
+    super({
+      storageKey,
+      modes,
+      defaultMode,
+      cssClass: 'pf-v6-theme-high-contrast',
+      classEnabledMode: modes.HIGH_CONTRAST,
+      mediaQueryString
+    });
+    this.glassClass = 'pf-v6-theme-glass';
+  }
+
+  updateClass() {
     if (!this.isBrowser) {
       return;
     }
 
-    if (mode === this.modes.SYSTEM) {
-      if (this.resolve() === this.classEnabledMode) {
-        this.addClass();
-      } else {
-        this.removeClass();
-      }
-    } else {
-      if (mode === this.classEnabledMode) {
-        this.addClass();
-      } else {
-        this.removeClass();
-      }
+    const htmlElement = this.getHtmlElement();
+    if (!htmlElement) {
+      return;
+    }
+
+    // ALWAYS read from localStorage to ensure we have the correct mode for THIS theme
+    const storedMode = this.getStoredValue();
+
+    // Determine which class should be applied based on stored mode
+    let shouldHaveHighContrast = false;
+    let shouldHaveGlass = false;
+
+    if (storedMode === this.modes.SYSTEM) {
+      shouldHaveHighContrast = window.matchMedia(this.mediaQueryString).matches;
+    } else if (storedMode === this.modes.HIGH_CONTRAST) {
+      shouldHaveHighContrast = true;
+    } else if (storedMode === this.modes.GLASS) {
+      shouldHaveGlass = true;
+    }
+    // DEFAULT mode: both false
+
+    // Apply high contrast class
+    if (shouldHaveHighContrast && !htmlElement.classList.contains(this.cssClass)) {
+      htmlElement.classList.add(this.cssClass);
+    } else if (!shouldHaveHighContrast && htmlElement.classList.contains(this.cssClass)) {
+      htmlElement.classList.remove(this.cssClass);
+    }
+
+    // Apply glass class
+    if (shouldHaveGlass && !htmlElement.classList.contains(this.glassClass)) {
+      htmlElement.classList.add(this.glassClass);
+    } else if (!shouldHaveGlass && htmlElement.classList.contains(this.glassClass)) {
+      htmlElement.classList.remove(this.glassClass);
     }
   }
 }
@@ -111,26 +186,34 @@ const colorThemeManager = new ThemeManager({
   mediaQueryString: '(prefers-color-scheme: dark)'
 });
 
-const highContrastThemeManager = new ThemeManager({
-  storageKey: 'high-contrast-preference',
-  modes: HIGH_CONTRAST_MODES,
-  defaultMode: HIGH_CONTRAST_MODES.SYSTEM,
-  cssClass: 'pf-v6-theme-high-contrast',
-  classEnabledMode: HIGH_CONTRAST_MODES.ON,
+const themeVariantManager = new ThemeManager({
+  storageKey: 'theme-variant-preference',
+  modes: THEME_VARIANT_MODES,
+  defaultMode: THEME_VARIANT_MODES.DEFAULT,
+  cssClass: 'pf-v6-theme-unified',
+  classEnabledMode: THEME_VARIANT_MODES.UNIFIED,
+  mediaQueryString: '(prefers-color-scheme: dark)' // Not used for variant, but required
+});
+
+const contrastThemeManager = new ContrastThemeManager({
+  storageKey: 'contrast-preference',
+  modes: CONTRAST_MODES,
+  defaultMode: CONTRAST_MODES.SYSTEM,
   mediaQueryString: '(prefers-contrast: more)'
 });
 
 registerThemeManager(THEME_TYPES.COLOR, colorThemeManager);
-registerThemeManager(THEME_TYPES.HIGH_CONTRAST, highContrastThemeManager);
+registerThemeManager(THEME_TYPES.THEME_VARIANT, themeVariantManager);
+registerThemeManager(THEME_TYPES.CONTRAST, contrastThemeManager);
 
 /**
  * Unified theme hook that accepts a theme type parameter
- * @param {string} themeType - The type of theme to manage (THEME_TYPES.COLOR, THEME_TYPES.HIGH_CONTRAST, instantiate and register new themes above as needed)
+ * @param {string} themeType - The type of theme to manage (THEME_TYPES.COLOR, THEME_TYPES.CONTRAST, THEME_TYPES.THEME_VARIANT)
  * @returns {Object} Theme state and controls specific to the theme type
  */
 export const useTheme = (themeType) => {
   if (!themeType) {
-    throw new Error('useTheme requires a theme type parameter. Use THEME_TYPES.COLOR or THEME_TYPES.HIGH_CONTRAST');
+    throw new Error('useTheme requires a theme type parameter. Use THEME_TYPES.COLOR, THEME_TYPES.CONTRAST, or THEME_TYPES.THEME_VARIANT');
   }
 
   const theme = themeRegistry.get(themeType);
@@ -143,16 +226,34 @@ export const useTheme = (themeType) => {
   const [resolvedTheme, setResolvedTheme] = useState(theme.resolve());
 
   useEffect(() => {
+    // Verify mode is valid for this theme
+    const validModes = Object.values(theme.modes);
+    if (!validModes.includes(mode)) {
+      console.error(`Invalid mode "${mode}" for theme ${theme.storageKey}. Valid modes:`, validModes);
+      return;
+    }
+
     theme.setStoredValue(mode);
-    theme.updateClass(mode);
-  }, [theme, mode, resolvedTheme]);
+    theme.updateClass();
+  }, [theme, mode]);
 
-  const handlePreferenceChange = () => {
-    setResolvedTheme(theme.resolve());
-  };
-  const mediaQuery = theme.getMediaQuery();
+  useEffect(() => {
+    // Only update class when system preference changes AND mode is SYSTEM
+    if (mode === theme.modes.SYSTEM) {
+      theme.updateClass();
+    }
+  }, [theme, mode, resolvedTheme]);
 
   useEffect(() => {
+    const handlePreferenceChange = () => {
+      setResolvedTheme(theme.resolve());
+    };
+
+    const mediaQuery = theme.getMediaQuery();
+
+    if (!mediaQuery) {
+      return;
+    }
     if (mediaQuery.addEventListener) {
       mediaQuery.addEventListener('change', handlePreferenceChange);
       return () => {
@@ -164,7 +265,7 @@ export const useTheme = (themeType) => {
         mediaQuery.removeListener(handlePreferenceChange);
       };
     }
-  }, [mediaQuery]);
+  }, []);
 
   return {
     mode,
diff --git a/packages/documentation-framework/versions.json b/packages/documentation-framework/versions.json
index bf3da485b6..64e1d05e8c 100644
--- a/packages/documentation-framework/versions.json
+++ b/packages/documentation-framework/versions.json
@@ -12,7 +12,7 @@
         "@patternfly/react-component-groups": "6.4.0-prerelease.12",
         "@patternfly/react-core": "6.5.0-prerelease.24",
         "@patternfly/react-drag-drop": "6.5.0-prerelease.24",
-        "@patternfly/react-icons": "6.5.0-prerelease.11",
+        "@patternfly/react-icons": "6.5.0-prerelease.12",
         "@patternfly/react-log-viewer": "6.3.0",
         "@patternfly/react-styles": "6.5.0-prerelease.9",
         "@patternfly/react-table": "6.5.0-prerelease.24",
diff --git a/packages/documentation-site/package.json b/packages/documentation-site/package.json
index ac00f38f7b..4d4d83c9e1 100644
--- a/packages/documentation-site/package.json
+++ b/packages/documentation-site/package.json
@@ -28,7 +28,7 @@
     "@patternfly/react-console": "6.1.0",
     "@patternfly/react-data-view": "6.4.0-prerelease.8",
     "@patternfly/react-docs": "7.5.0-prerelease.26",
-    "@patternfly/react-icons": "6.5.0-prerelease.11",
+    "@patternfly/react-icons": "6.5.0-prerelease.12",
     "@patternfly/react-log-viewer": "6.3.0",
     "@patternfly/react-topology": "6.5.0-prerelease.3",
     "@patternfly/react-user-feedback": "6.2.0",
diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/Animations.md b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/Animations.md
index a6e293384a..e448c194ed 100644
--- a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/Animations.md
+++ b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/Animations.md
@@ -6,40 +6,48 @@ source: demo
 
 import { Fragment, useRef, useState, useEffect, useCallback } from 'react';
 
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import PowerOffIcon from '@patternfly/react-icons/dist/esm/icons/power-off-icon';
-import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
 import MultiContentCard from "@patternfly/react-component-groups/dist/dynamic/MultiContentCard";
-import { ArrowRightIcon, LockIcon, PortIcon, CubeIcon, AutomationIcon, ExclamationCircleIcon, CheckCircleIcon, ExclamationTriangleIcon, HamburgerIcon, TimesIcon} from '@patternfly/react-icons';
 import UnpluggedIcon from '@patternfly/react-icons/dist/esm/icons/unplugged-icon';
 import l_gallery_GridTemplateColumns_min from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
 import {applicationsData} from './examples/ResourceTableData.jsx';
 import SkeletonTable from "@patternfly/react-component-groups/dist/dynamic/SkeletonTable";
 import t_global_text_color_subtle from '@patternfly/react-tokens/dist/esm/t_global_text_color_subtle';
 import { AnimationsOverview } from './AnimationsOverview';
-import { AnimationsNotificationsDrawer } from './AnimationsNotificationsDrawer';
 import { AnimationsHeaderToolbar } from './AnimationsHeaderToolbar';
 import { AnimationsStartTourModal } from './AnimationsStartTourModal';
 import { AnimationsEndTourModal } from './AnimationsEndTourModal';
 import { AnimationsCreateDatabaseForm } from './AnimationsCreateDatabaseForm';
 import { GuidedTourProvider, useGuidedTour } from './GuidedTourContext';
 import BoltIcon from '@patternfly/react-icons/dist/esm/icons/bolt-icon';
-import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
+import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent, TableText } from '@patternfly/react-table';
 import PendingIcon from '@patternfly/react-icons/dist/esm/icons/pending-icon';
 import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import InfoIcon from '@patternfly/react-icons/dist/esm/icons/info-icon';
-import ResourcesFullIcon from '@patternfly/react-icons/dist/esm/icons/resources-full-icon';
 import openshiftLogo from './Summit-collage-deploying-openshift-product-icon-RH.png'
 import emptyStateLogo from './Summit-collage-hybrid-cloud-dark-RH.png'
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-icon';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-icon';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-icon';
+import ResourcesFullIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-resources-full-icon';
+import PortIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-port-icon';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-icon';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-search-icon';
+import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-arrow-right-icon';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-close-icon';
 
 
+import './examples/glass.css';
+
+import { CodeEditor, Language } from '@patternfly/react-code-editor';
+import { rows, columns } from '@patternfly/react-table/dist/esm/demos/sampleData';
+
 ## Demo
 Our components can now use motion to provide clear visual feedback to users, improving engagement and usability. To see our new animations in motion, take this interactive tour, which guides you through a UI that includes animated alerts, icons, expansion, and more.
 
diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsCreateDatabaseForm.tsx b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsCreateDatabaseForm.tsx
index 88516ebe01..9835194814 100644
--- a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsCreateDatabaseForm.tsx
+++ b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsCreateDatabaseForm.tsx
@@ -14,7 +14,6 @@ import {
   Popover,
   ActionGroup
 } from '@patternfly/react-core';
-import { useGuidedTour } from './GuidedTourContext';
 
 interface Props {
   onClose: () => void;
@@ -29,7 +28,6 @@ export const AnimationsCreateDatabaseForm: FunctionComponent<Props> = ({ onClose
   // Submit state variables
   const [isSuccess, setIsSuccess] = useState(false);
   const [actionCompleted, setActionCompleted] = useState(false);
-  const { renderTourStepElement } = useGuidedTour();
 
   const labelHelpRef = useRef(null);
 
@@ -90,8 +88,7 @@ export const AnimationsCreateDatabaseForm: FunctionComponent<Props> = ({ onClose
     setIsEmailValid('default');
   };
 
-  return renderTourStepElement(
-    'validationErrors',
+  return (
     <Form isWidthLimited id="create-database-form">
       {actionCompleted && isSuccess ? (
         <FormAlert>
diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsHeaderToolbar.tsx b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsHeaderToolbar.tsx
index ff81d3d9ad..5856d5ff69 100644
--- a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsHeaderToolbar.tsx
+++ b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsHeaderToolbar.tsx
@@ -13,31 +13,27 @@ import {
   ToolbarGroup,
   ToolbarContent
 } from '@patternfly/react-core';
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
-import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import { NotificationType } from './types';
-import { useGuidedTour } from './GuidedTourContext';
 
 interface Props {
   notifications: NotificationType[];
   isDrawerExpanded: boolean;
   setIsDrawerExpanded: (newVal: boolean) => void;
-  onStartGuidedTour: () => void;
-  onEndGuidedTour: () => void;
+  setShowWizardModal: (newVal: boolean) => void;
+  showWizardModal: boolean;
 }
 
 export const AnimationsHeaderToolbar: FunctionComponent<Props> = ({
   notifications,
   isDrawerExpanded,
   setIsDrawerExpanded,
-  onStartGuidedTour,
-  onEndGuidedTour
+  setShowWizardModal,
+  showWizardModal
 }) => {
-  const [isActionsMenuOpen, setIsActionsMenuOpen] = useState<boolean>(false);
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const [shouldNotifyNewNotification, setShouldNotifyNewNotification] = useState(false);
-  const { renderTourStepElement, tourStep } = useGuidedTour();
   const previousUnreadCountRef = useRef<number>(notifications.filter((n) => !n.isRead).length);
 
   const unreadNotificationCount = notifications.filter((n) => !n.isRead).length;
@@ -60,91 +56,56 @@ export const AnimationsHeaderToolbar: FunctionComponent<Props> = ({
   return (
     <Toolbar>
       <ToolbarContent>
-        <ToolbarGroup align={{ default: 'alignEnd' }}>
+        <ToolbarGroup align={{ default: 'alignEnd' }} alignItems='center'>
           <ToolbarGroup variant="action-group-plain">
             <ToolbarItem visibility={{ default: 'visible' }} selected={isDrawerExpanded}>
-              {renderTourStepElement(
-                'notificationBadge',
-                <NotificationBadge
-                  id="notification-badge"
-                  variant={unreadNotificationCount === 0 ? 'read' : 'unread'}
-                  onClick={() => setIsDrawerExpanded(!isDrawerExpanded)}
-                  aria-label="Notifications"
-                  isExpanded={isDrawerExpanded}
-                  count={unreadNotificationCount}
-                  shouldNotify={shouldNotifyNewNotification}
-                />
-              )}
+              <NotificationBadge
+                id="notification-badge"
+                variant={unreadNotificationCount === 0 ? 'read' : 'unread'}
+                onClick={() => setIsDrawerExpanded(!isDrawerExpanded)}
+                aria-label="Notifications"
+                isExpanded={isDrawerExpanded}
+                count={unreadNotificationCount}
+                shouldNotify={shouldNotifyNewNotification}
+              />
             </ToolbarItem>
-            <ToolbarGroup variant="action-group-plain">
-              <ToolbarItem>
-                {renderTourStepElement(
-                  'settingsButton',
-                  <Button
-                    id="settings-button"
-                    aria-label="Settings actions"
-                    className="pf-m-settings"
-                    variant={ButtonVariant.plain}
-                    icon={<CogIcon />}
-                  />
-                )}
-              </ToolbarItem>
-              <ToolbarItem>
-                <Dropdown
-                  onSelect={() => setIsActionsMenuOpen(false)}
-                  isOpen={isActionsMenuOpen}
-                  id="help-dropdown"
-                  onOpenChange={setIsActionsMenuOpen}
-                  popperProps={{ position: 'right' }}
-                  toggle={(toggleRef: RefObject<any>) => (
-                    <MenuToggle
-                      ref={toggleRef}
-                      id="help-menu-toggle"
-                      aria-label="help actions"
-                      variant="plain"
-                      onClick={() => setIsActionsMenuOpen(!isActionsMenuOpen)}
-                      isExpanded={isActionsMenuOpen}
-                      icon={<QuestionCircleIcon />}
-                    />
-                  )}
-                >
-                  <DropdownList>
-                    <DropdownItem onClick={() => (tourStep ? onEndGuidedTour() : onStartGuidedTour())}>
-                      {tourStep ? 'End guided tour' : 'Guided tour'}
-                    </DropdownItem>
-                  </DropdownList>
-                </Dropdown>
-              </ToolbarItem>
-            </ToolbarGroup>
-          </ToolbarGroup>
-          <ToolbarGroup>
-            <ToolbarItem
-              visibility={{ default: 'hidden', md: 'visible' }} /** this user dropdown is hidden on mobile sizes */
-            >
-              <Dropdown
-                isOpen={isDropdownOpen}
-                onSelect={() => setIsDropdownOpen(false)}
-                onOpenChange={setIsDropdownOpen}
-                popperProps={{ position: 'right' }}
-                toggle={(toggleRef: RefObject<any>) => (
-                  <MenuToggle
-                    ref={toggleRef}
-                    isExpanded={isDropdownOpen}
-                    onClick={() => setIsDropdownOpen((prev) => !prev)}
-                    icon={<Avatar src={imgAvatar} alt="" size="sm" />}
-                  >
-                    Username
-                  </MenuToggle>
-                )}
-              >
-                <DropdownList>
-                  <DropdownItem key="group 2 profile">My profile</DropdownItem>
-                  <DropdownItem key="group 2 user">User management</DropdownItem>
-                  <DropdownItem key="group 2 logout">Logout</DropdownItem>
-                </DropdownList>
-              </Dropdown>
+            <ToolbarItem>
+              <Button
+                id="settings-button"
+                aria-label="Settings actions"
+                className="pf-m-settings"
+                variant={ButtonVariant.plain}
+                icon={<CogIcon />}
+              />
+            </ToolbarItem>
+            <ToolbarItem>
+              <Button variant="control" onClick={() => setShowWizardModal(!showWizardModal)}>Show wizard modal</Button>
             </ToolbarItem>
           </ToolbarGroup>
+          <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>
+            <Dropdown
+              isOpen={isDropdownOpen}
+              onSelect={() => setIsDropdownOpen(false)}
+              onOpenChange={setIsDropdownOpen}
+              popperProps={{ position: 'right' }}
+              toggle={(toggleRef: RefObject<any>) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  isExpanded={isDropdownOpen}
+                  onClick={() => setIsDropdownOpen((prev) => !prev)}
+                  icon={<Avatar src={imgAvatar} alt="" size="sm" />}
+                >
+                  Username
+                </MenuToggle>
+              )}
+            >
+              <DropdownList>
+                <DropdownItem key="group 2 profile">My profile</DropdownItem>
+                <DropdownItem key="group 2 user">User management</DropdownItem>
+                <DropdownItem key="group 2 logout">Logout</DropdownItem>
+              </DropdownList>
+            </Dropdown>
+          </ToolbarItem>
         </ToolbarGroup>
       </ToolbarContent>
     </Toolbar>
diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsNotificationsDrawer.tsx b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsNotificationsDrawer.tsx
deleted file mode 100644
index 1a19b0fde7..0000000000
--- a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsNotificationsDrawer.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-import { useRef, useState, FunctionComponent, RefObject } from 'react';
-import {
-  Button,
-  Divider,
-  Dropdown,
-  DropdownItem,
-  DropdownList,
-  EmptyState,
-  EmptyStateActions,
-  EmptyStateBody,
-  EmptyStateFooter,
-  EmptyStateVariant,
-  MenuToggle,
-  NotificationDrawer,
-  NotificationDrawerBody,
-  NotificationDrawerHeader,
-  NotificationDrawerList,
-  NotificationDrawerListItem,
-  NotificationDrawerListItemBody,
-  NotificationDrawerListItemHeader
-} from '@patternfly/react-core';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import { NotificationType } from './types';
-
-interface ItemProps {
-  notification: NotificationType;
-  onRead: () => void;
-}
-const NotificationListItem: FunctionComponent<ItemProps> = ({ notification, onRead }) => {
-  const [isActionsMenuOpen, setIsActionsMenuOpen] = useState<boolean>(false);
-
-  return (
-    <NotificationDrawerListItem
-      key={notification.id}
-      variant={notification.variant}
-      onClick={onRead}
-      isRead={notification.isRead}
-    >
-      <NotificationDrawerListItemHeader
-        variant={notification.variant}
-        title={notification.title}
-        srTitle={notification.title}
-      >
-        <Dropdown
-          onSelect={() => setIsActionsMenuOpen(false)}
-          isOpen={isActionsMenuOpen}
-          id={notification.id}
-          onOpenChange={setIsActionsMenuOpen}
-          popperProps={{ position: 'right' }}
-          toggle={(toggleRef: RefObject<any>) => (
-            <MenuToggle
-              ref={toggleRef}
-              id={`toggle-${notification.id}`}
-              aria-label="Notification drawer actions"
-              variant="plain"
-              onClick={() => setIsActionsMenuOpen((prev) => !prev)}
-              isExpanded={isActionsMenuOpen}
-              icon={<EllipsisVIcon />}
-            />
-          )}
-        >
-          <DropdownList>
-            <DropdownItem
-              key="link"
-              to="#"
-              // Prevent default onClick behavior for demo purposes
-              onClick={(ev: any) => ev.preventDefault()}
-            >
-              Link
-            </DropdownItem>
-            <DropdownItem key="action">Action</DropdownItem>
-            <Divider component="li" key="separator" />
-            <DropdownItem key="disabled link" isDisabled>
-              Disabled Link
-            </DropdownItem>
-          </DropdownList>
-        </Dropdown>
-      </NotificationDrawerListItemHeader>
-      <NotificationDrawerListItemBody timestamp="Just now">{notification.message}</NotificationDrawerListItemBody>
-    </NotificationDrawerListItem>
-  );
-};
-
-interface Props {
-  notifications: NotificationType[];
-  updateNotifications: (updatedNotifications: NotificationType[]) => void;
-  onClose: () => void;
-}
-
-export const AnimationsNotificationsDrawer: FunctionComponent<Props> = ({
-  notifications,
-  updateNotifications,
-  onClose
-}) => {
-  const [isActionsMenuOpen, setIsActionsMenuOpen] = useState<boolean>(false);
-  const drawerRef = useRef<HTMLElement | null>(null);
-
-  const unreadNotificationCount = notifications.filter((n) => !n.isRead).length;
-
-  const markAllRead = () => {
-    updateNotifications(notifications.map((n) => ({ ...n, isRead: true })));
-  };
-
-  return (
-    <NotificationDrawer ref={drawerRef}>
-      <NotificationDrawerHeader count={unreadNotificationCount} onClose={onClose}>
-        <Dropdown
-          onSelect={() => setIsActionsMenuOpen(false)}
-          isOpen={isActionsMenuOpen}
-          id="notification-0"
-          onOpenChange={(isOpen: boolean) => !isOpen && setIsActionsMenuOpen(false)}
-          popperProps={{ position: 'right' }}
-          toggle={(toggleRef: RefObject<any>) => (
-            <MenuToggle
-              ref={toggleRef}
-              id="toggle-id-0"
-              aria-label="Notification drawer actions"
-              variant="plain"
-              onClick={() => setIsActionsMenuOpen((prev) => !prev)}
-              isExpanded={isActionsMenuOpen}
-              icon={<EllipsisVIcon />}
-            />
-          )}
-        >
-          <DropdownList>
-            <DropdownItem key="markAllRead" onClick={markAllRead}>
-              Mark all read
-            </DropdownItem>
-            <DropdownItem key="clearAll" onClick={() => updateNotifications([])}>
-              Clear all
-            </DropdownItem>
-            <DropdownItem key="settings">Settings</DropdownItem>
-          </DropdownList>
-        </Dropdown>
-      </NotificationDrawerHeader>
-      <NotificationDrawerBody>
-        {notifications.length && (
-          <NotificationDrawerList>
-            {notifications.map((notification) => (
-              <NotificationListItem
-                key={notification.id}
-                notification={notification}
-                onRead={() => {
-                  updateNotifications(
-                    notifications.reduce((acc, next) => {
-                      if (next.id === notification.id) {
-                        acc.push({ ...next, isRead: true });
-                      } else {
-                        acc.push(next);
-                      }
-                      return acc;
-                    }, [])
-                  );
-                }}
-              />
-            ))}
-          </NotificationDrawerList>
-        )}
-        {!notifications.length && (
-          <EmptyState headingLevel="h2" titleText="No alerts found" icon={SearchIcon} variant={EmptyStateVariant.full}>
-            <EmptyStateBody>
-              There are currently no alerts. There may be silenced critical alerts however.
-            </EmptyStateBody>
-            <EmptyStateFooter>
-              <EmptyStateActions>
-                <Button variant="link">Action</Button>
-              </EmptyStateActions>
-            </EmptyStateFooter>
-          </EmptyState>
-        )}
-      </NotificationDrawerBody>
-    </NotificationDrawer>
-  );
-};
diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsOverview.tsx b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsOverview.tsx
index 1466176058..cb3a4aaca5 100644
--- a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsOverview.tsx
+++ b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsOverview.tsx
@@ -18,8 +18,8 @@ import {
   PageSection,
   Title
 } from '@patternfly/react-core';
-import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-arrow-right-icon';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-close-icon';
 import MultiContentCard from '@patternfly/react-component-groups/dist/dynamic/MultiContentCard';
 import AnimationsOverviewClusterInventory from './AnimationsOverviewClusterInventory';
 import AnimationsOverviewNetworkActivity from './AnimationsOverviewNetworkActivity';
diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsOverviewCardStatus.tsx b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsOverviewCardStatus.tsx
index b6b2ad95f0..4b26cea53d 100644
--- a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsOverviewCardStatus.tsx
+++ b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsOverviewCardStatus.tsx
@@ -1,7 +1,7 @@
 import { FunctionComponent } from 'react';
 import { Card, CardHeader, CardBody, Flex, FlexItem, Icon, Title, Grid, GridItem } from '@patternfly/react-core';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-icon';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-icon';
 
 const AnimationsOverviewCardStatus: FunctionComponent = () => (
   <Card>
diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsOverviewClusterInventory.tsx b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsOverviewClusterInventory.tsx
index e860be8da4..0dc1874b34 100644
--- a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsOverviewClusterInventory.tsx
+++ b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsOverviewClusterInventory.tsx
@@ -15,11 +15,11 @@ import {
   Icon
 } from '@patternfly/react-core';
 
-import ListIcon from '@patternfly/react-icons/dist/esm/icons/list-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
+import ListIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-list-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-icon';
+import CubesIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cubes-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
+import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-arrow-right-icon';
 
 export const ClusterInventoryCard: React.FunctionComponent = () => {
   const [isKebabOpen, setIsKebabOpen] = useState(false);
diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsOverviewEventsCard.tsx b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsOverviewEventsCard.tsx
index 1e99e258fa..6a8624ebd6 100644
--- a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsOverviewEventsCard.tsx
+++ b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsOverviewEventsCard.tsx
@@ -21,8 +21,8 @@ import {
   Timestamp,
   Title
 } from '@patternfly/react-core';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-icon';
 
 const AnimationsOverviewEventsCard: FunctionComponent = () => {
   const [isOpen, setIsOpen] = useState(false);
diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsOverviewMemoryUtilization.tsx b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsOverviewMemoryUtilization.tsx
index ed9da0988b..95b02b31b0 100644
--- a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsOverviewMemoryUtilization.tsx
+++ b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsOverviewMemoryUtilization.tsx
@@ -14,9 +14,9 @@ import {
   FlexItem
 } from '@patternfly/react-core';
 import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts/dist/esm/victory/components';
-import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import TachometerAltIcon from '@patternfly/react-icons/dist/esm/icons/tachometer-alt-icon';
+import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-arrow-right-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-icon';
+import TachometerAltIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-speedometer-icon';
 
 export const MemoryUtilizationCard: React.FunctionComponent = () => {
   const [isKebabOpen, setIsKebabOpen] = useState(false);
@@ -100,7 +100,7 @@ export const MemoryUtilizationCard: React.FunctionComponent = () => {
               />
             </ChartDonutThreshold>
           </FlexItem>
-          <FlexItem>
+          {/* <FlexItem>
             <ChartDonutThreshold
               ariaDesc="Mock memory utilization"
               ariaTitle="Mock memory utilization chart"
@@ -127,7 +127,7 @@ export const MemoryUtilizationCard: React.FunctionComponent = () => {
                 thresholds={[{ value: 60 }, { value: 90 }]}
               />
             </ChartDonutThreshold>
-          </FlexItem>
+          </FlexItem> */}
         </Flex>
       </CardBody>
       <CardFooter>
diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsOverviewNetworkActivity.tsx b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsOverviewNetworkActivity.tsx
index 29c5f4ad61..507cd24b11 100644
--- a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsOverviewNetworkActivity.tsx
+++ b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsOverviewNetworkActivity.tsx
@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import { Card, CardHeader, CardTitle, CardBody, Dropdown, DropdownList, DropdownItem, MenuToggle, Flex } from '@patternfly/react-core';
 
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import NetworkIcon from '@patternfly/react-icons/dist/esm/icons/network-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-icon';
+import NetworkIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-network-icon';
 
 import {
   Chart,
diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsOverviewStorage.tsx b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsOverviewStorage.tsx
index 3a59414257..0bfb18749b 100644
--- a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsOverviewStorage.tsx
+++ b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsOverviewStorage.tsx
@@ -14,9 +14,9 @@ import {
   FlexItem
 } from '@patternfly/react-core';
 import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts/dist/esm/victory/components';
-import StorageDomainIcon from '@patternfly/react-icons/dist/esm/icons/storage-domain-icon';
-import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import StorageDomainIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-storage-domain-icon';
+import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-arrow-right-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-icon';
 
 export const StorageCard: React.FunctionComponent = () => {
   const [isKebabOpen, setIsKebabOpen] = useState(false);
diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/examples/Animations.tsx b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/examples/Animations.tsx
index e86497d17b..e813022d82 100644
--- a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/examples/Animations.tsx
+++ b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/examples/Animations.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect, FunctionComponent, FormEvent, useCallback } from 'react';
+import React, { useRef, useState, useEffect, FunctionComponent, FormEvent, Fragment } from 'react';
 import {
   AlertGroup,
   Alert,
@@ -12,12 +12,10 @@ import {
   CardHeader,
   CardTitle,
   ContentVariants,
-  debounce,
   EmptyState,
   EmptyStateActions,
   EmptyStateBody,
   EmptyStateFooter,
-  getResizeObserver,
   Label,
   Masthead,
   MastheadMain,
@@ -44,32 +42,102 @@ import {
   Flex,
   ProgressStepper,
   ProgressStep,
-  Spinner
+  Spinner,
+  Modal,
+  Wizard,
+  WizardHeader,
+  WizardStep,
+  ToolbarContent,
+  ToolbarItem,
+  Toolbar,
+  DrawerContent,
+  DrawerContentBody,
+  Drawer,
+  DrawerActions,
+  DrawerCloseButton,
+  DrawerHead,
+  DrawerPanelBody,
+  DrawerPanelContent,
+  DrawerPanelDescription,
+  ModalVariant,
+  NotificationDrawer,
+  NotificationDrawerBody,
+  NotificationDrawerHeader,
+  NotificationDrawerList,
+  NotificationDrawerListItem,
+  NotificationDrawerListItemBody,
+  NotificationDrawerListItemHeader,
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionToggle,
+  Checkbox,
+  Gallery,
+  GalleryItem,
+  Pagination,
+  PaginationVariant,
+  Breadcrumb,
+  BreadcrumbItem,
+  PageBreadcrumb,
+  PageGroup
 } from '@patternfly/react-core';
-import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
+import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent, TableText } from '@patternfly/react-table';
+import { rows, columns } from '@patternfly/react-table/dist/esm/demos/sampleData';
 import SkeletonTable from '@patternfly/react-component-groups/dist/dynamic/SkeletonTable';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
-import ResourcesFullIcon from '@patternfly/react-icons/dist/esm/icons/resources-full-icon';
-import PortIcon from '@patternfly/react-icons/dist/esm/icons/port-icon';
+
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-icon';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-icon';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-icon';
+import ResourcesFullIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-resources-full-icon';
+import PortIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-port-icon';
+
 // @ts-ignore
-import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.PF-HorizontalLogo-Color.svg';
+// import pfLogo from '@patternfly/patternfly-react/packages/react-core/src/components/assets/PF-HorizontalLogo-Color.svg';
+
+const PfLogo: React.FunctionComponent = () => (
+  <svg height="40px" viewBox="0 0 679 158" aria-hidden>
+    <title>PatternFly</title>
+    <defs>
+      <linearGradient x1="68%" y1="0%" x2="32%" y2="100%" id="pf-logo-gradient">
+        <stop stopColor="#2B9AF3" offset="0%" />
+        <stop stopColor="#73BCF7" stopOpacity={0.5} offset="100%" />
+      </linearGradient>
+    </defs>
+    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g transform="translate(206.000000, 45.750000)" fill="var(--pf-t--global--text--color--regular)" fillRule="nonzero">
+        <path d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z" />
+        <path d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z" />
+        <path d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z" />
+        <path d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z" />
+        <path d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z" />
+        <path d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z" />
+        <path d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z" />
+        <polygon points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25" />
+        <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
+        <path d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z" />
+      </g>
+      <g transform="translate(0.000000, 0.000000)">
+        <path d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 Z" fill="var(--pf-t--color--blue--50)" />
+        <path d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 Z" fill="url(#pf-logo-gradient)" />
+        <path d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 Z" fill="url(#pf-logo-gradient)" transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90) translate(-77.282609, -46.369565)" />
+      </g>
+    </g>
+  </svg>
+);
+
 // @ts-ignore
 import openshiftLogo from '../Summit-collage-deploying-openshift-product-icon-RH.png';
 // @ts-ignore
 import emptyStateLogo from '../Summit-collage-hybrid-cloud-dark-RH.png';
-import { Application, GuidedTourStep, NotificationType } from '../types';
+import { Application, NotificationType } from '../types';
 import { AnimationsOverview } from '../AnimationsOverview';
-import { AnimationsNotificationsDrawer } from '../AnimationsNotificationsDrawer';
 import { AnimationsCreateDatabaseForm } from '../AnimationsCreateDatabaseForm';
-import { GuidedTourProvider, useGuidedTour } from '../GuidedTourContext';
 import { AnimationsHeaderToolbar } from '../AnimationsHeaderToolbar';
-import { AnimationsStartTourModal } from '../AnimationsStartTourModal';
-import { AnimationsEndTourModal } from '../AnimationsEndTourModal';
 import { applicationsData } from './ResourceTableData';
 
+import { CodeEditor, Language } from '@patternfly/react-code-editor';
+
 // Simple component to wrap the empty state logo
 const EmptyStateLogoIcon: React.FunctionComponent = () => (
   <img src={emptyStateLogo} alt="Empty state" style={{ width: '200px', height: '200px' }} />
@@ -79,140 +147,324 @@ const mainContainerPageId = 'main-content-page-layout-default-nav';
 const expandableColumns = ['Applications', 'Server', 'Branch', 'Status'];
 const initialExpandedServerNames = ['Cost Management']; // Default to expanded
 
-export const GuidedTourSteps: GuidedTourStep[] = [
-  {
-    stepId: 'toastNotifications',
-    header: <div>Alerts</div>,
-    content: '===== This content is customized ======'
-  },
-  {
-    stepId: 'settingsButton',
-    position: 'bottom-end',
-    header: <div>Buttons: Settings</div>,
-    content: '===== This content is customized ======',
-    spotlightSelector: '#settings-button',
-    deskTopOnly: true
-  },
-  {
-    stepId: 'settingsButton',
-    position: 'bottom-end',
-    header: <div>Buttons: Settings</div>,
-    content: '===== This content is customized ======',
-    spotlightSelector: '#settings-button',
-    mobileOnly: true
-  },
-  {
-    stepId: 'navToggle',
-    header: <div>Buttons: Hamburger menu</div>,
-    content: '===== This content is customized ======',
-    spotlightSelector: '#nav-toggle'
-  },
-  {
-    stepId: 'notificationBadge',
-    header: <div>Buttons: Notification badge</div>,
-    content: '===== This content is customized ======',
-    spotlightSelector: '#notification-badge'
-  },
-  {
-    stepId: 'tabs',
-    header: <div>Tabs</div>,
-    position: 'top-start',
-    content: (
-      <Content component="p">
-        Click between the different tabs and watch how the active tab indicator smoothly slides to your selection,
-        providing clear feedback on your location.
-      </Content>
-    ),
-    spotlightSelector: '#tabs',
-    popoverWidth: '501px',
-    mobilePopoverWidth: '275px'
-  },
-  {
-    stepId: 'skeletonLoader',
-    header: <div>Skeleton loader</div>,
-    position: 'top',
-    content: (
-      <>
-        <Content component="p">
-          Watch how the loading indicators animate to inform the user that there is processing going on behind the
-          scenes.
-        </Content>
-      </>
-    ),
-    spotlightSelector: '#skeleton-table'
-  },
-  {
-    deskTopOnly: true,
-    stepId: 'expandableComponents',
-    header: <div>Expandable components</div>,
-    position: 'top-start',
-    content: (
-      <>
-        <Content component="p">Click to expand this hidden content section.</Content>
-        <Content component="p">
-          Notice how the hidden information smoothly fades and slides into place. Click again to collapse it and see the
-          reverse animation.
-        </Content>
-        <Content>Reduced-motion users will only see the fade, not the sliding motion.</Content>
-      </>
-    ),
-    spotlightSelector: '#expand-toggle-1',
-    popoverWidth: '460px'
-  },
-  {
-    mobileOnly: true,
-    stepId: 'expandableComponentsMobile',
-    header: <div>Expandable components</div>,
-    position: 'top-end',
-    content: (
-      <>
-        <Content component="p">Click to expand this hidden content section.</Content>
-        <Content component="p">
-          Notice how the hidden information smoothly fades and slides into place. Click again to collapse it and see the
-          reverse animation.
-        </Content>
-        <Content>Reduced-motion users will only see the fade, not the sliding motion.</Content>
-      </>
-    ),
-    spotlightSelector: '#expand-toggle0'
-  },
-  {
-    stepId: 'validationErrors',
-    header: <div>Validation errors</div>,
-    content: (
-      <>
-        <Content component="p">
-          Click <strong>Submit</strong> while fields are empty to trigger an error. Watch the input fields jiggle from
-          side to side, drawing your attention to issues that need fixing.
-        </Content>
-        <Content component="p">Reduced-motion users will only see the fade, not the jiggle.</Content>
-      </>
-    ),
-    popoverWidth: '550px',
-    mobilePopoverWidth: '275px',
-    spotlightSelector: '#create-database-submit',
-    spotlightResizeSelector: '#create-database-form'
-  },
-  {
-    stepId: 'progressStepper',
-    header: <div>In process indicator</div>,
-    content: (
-      <>
-        <Content component="p">Watch as a process starts for step 2.</Content>
-        <Content component="p">
-          When a task is running, the in-process icon now spins in place, providing clear and continuous feedback that
-          the system is working.
-        </Content>
-      </>
-    ),
-    spotlightSelector: '#progress-stepper-1'
-  }
-];
+export const AccordionSingleExpandBehavior: React.FunctionComponent = ({ children }) => {
+  const [expanded, setExpanded] = useState(undefined);
+
+  const onToggle = (id: string) => {
+    if (id === expanded) {
+      setExpanded(undefined);
+    } else {
+      setExpanded(id);
+    }
+  };
+
+  return (
+    <Accordion asDefinitionList={false}>
+      <AccordionItem isExpanded={expanded === 'ex-toggle1'}>
+        <AccordionToggle
+          onClick={() => {
+            onToggle('ex-toggle1');
+          }}
+          id="ex-toggle1"
+        >
+          Item one
+        </AccordionToggle>
+        <AccordionContent id="ex-expand1">
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+            dolore magna aliqua.
+          </p>
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem isExpanded={expanded === 'ex-toggle2'}>
+        <AccordionToggle
+          onClick={() => {
+            onToggle('ex-toggle2');
+          }}
+          id="ex-toggle2"
+        >
+          Item two
+        </AccordionToggle>
+        <AccordionContent id="ex-expand2">
+          <p>
+            Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
+            ultrices, faucibus erat id, maximus nunc.
+          </p>
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem isExpanded={expanded === 'ex-toggle3'}>
+        <AccordionToggle
+          onClick={() => {
+            onToggle('ex-toggle3');
+          }}
+          id="ex-toggle3"
+        >
+          Item three
+        </AccordionToggle>
+        <AccordionContent id="ex-expand3">
+          <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem isExpanded={expanded === 'ex-toggle4'}>
+        <AccordionToggle
+          onClick={() => {
+            onToggle('ex-toggle4');
+          }}
+          id="ex-toggle4"
+        >
+          Item four
+        </AccordionToggle>
+        <AccordionContent id="ex-expand4">
+          <p>
+            Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
+            sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
+            cubilia Curae; Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis
+            tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
+            ridiculus mus. Mauris et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero
+            convallis convallis. Aliquam erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis
+            dapibus nulla. Integer sed tincidunt lectus, sit amet auctor eros.
+          </p>
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem isExpanded={expanded === 'ex-toggle5'}>
+        <AccordionToggle
+          onClick={() => {
+            onToggle('ex-toggle5');
+          }}
+          id="ex-toggle5"
+        >
+          Item five
+        </AccordionToggle>
+        <AccordionContent id="ex-expand5">
+          <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
+        </AccordionContent>
+      </AccordionItem>
+      {children && (<AccordionItem isExpanded={expanded === 'ex-toggle6'}>
+        <AccordionToggle
+          onClick={() => {
+            onToggle('ex-toggle6');
+          }}
+          id="ex-toggle6"
+        >
+          Nested accordion
+        </AccordionToggle>
+        <AccordionContent id="ex-expand6">
+          {children}
+        </AccordionContent>
+      </AccordionItem>)}
+    </Accordion>
+  );
+};
+
+export const CodeEditorBasic: React.FunctionComponent = () => {
+  const [isDarkTheme, setIsDarkTheme] = useState(false);
+  const [isLineNumbersVisible, setIsLineNumbersVisible] = useState(true);
+  const [isReadOnly, setIsReadOnly] = useState(false);
+  const [isMinimapVisible, setIsMinimapVisible] = useState(false);
+
+  const toggleDarkTheme = (checked) => {
+    setIsDarkTheme(checked);
+  };
+
+  const toggleLineNumbers = (checked) => {
+    setIsLineNumbersVisible(checked);
+  };
+  const toggleReadOnly = (checked) => {
+    setIsReadOnly(checked);
+  };
+  const toggleMinimap = (checked) => {
+    setIsMinimapVisible(checked);
+  };
+
+  const onEditorDidMount = (editor, monaco) => {
+    editor.layout();
+    editor.focus();
+    monaco.editor.getModels()[0].updateOptions({ tabSize: 5 });
+  };
+
+  const onChange = (value) => {
+    // eslint-disable-next-line no-console
+    console.log(value);
+  };
+
+  return (
+    <>
+      <Checkbox
+        label="Dark theme"
+        isChecked={isDarkTheme}
+        onChange={(_event, checked) => toggleDarkTheme(checked)}
+        aria-label="dark theme checkbox"
+        id="toggle-theme"
+        name="toggle-theme"
+      />
+      <Checkbox
+        label="Line numbers"
+        isChecked={isLineNumbersVisible}
+        onChange={(_event, checked) => toggleLineNumbers(checked)}
+        aria-label="line numbers checkbox"
+        id="toggle-line-numbers"
+        name="toggle-line-numbers"
+      />
+      <Checkbox
+        label="Read only"
+        isChecked={isReadOnly}
+        onChange={(_event, checked) => toggleReadOnly(checked)}
+        aria-label="read only checkbox"
+        id="toggle-read-only"
+        name="toggle-read-only"
+      />
+      <Checkbox
+        label="Minimap"
+        isChecked={isMinimapVisible}
+        onChange={(_event, checked) => toggleMinimap(checked)}
+        aria-label="display minimap checkbox"
+        id="toggle-minimap"
+        name="toggle-minimap"
+      />
+      <CodeEditor
+        isDarkTheme={isDarkTheme}
+        isLineNumbersVisible={isLineNumbersVisible}
+        isReadOnly={isReadOnly}
+        isMinimapVisible={isMinimapVisible}
+        isLanguageLabelVisible
+        code="Some example content"
+        onChange={onChange}
+        language={Language.javascript}
+        onEditorDidMount={onEditorDidMount}
+        height="400px"
+      />
+    </>
+  );
+};
+
+export const PaginationSticky: React.FunctionComponent = () => {
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(100);
+  const [isTopSticky, setIsTopSticky] = useState(false);
+  const itemCount = 523;
+
+  const onToggleSticky = () => {
+    setIsTopSticky((prev) => !prev);
+  };
+
+  const onSetPage = (_event, newPage) => {
+    setPage(newPage);
+  };
+
+  const onPerPageSelect = (
+    _event,
+    newPerPage,
+    newPage
+  ) => {
+    setPerPage(newPerPage);
+    setPage(newPage);
+  };
+
+  const buildCards = () => {
+    const numberOfCards = (page - 1) * perPage + perPage - 1 >= itemCount ? itemCount - (page - 1) * perPage : perPage;
+
+    return Array.from({ length: numberOfCards }).map((_value, index) => (
+      <GalleryItem key={index}>
+        <Card>
+          <CardBody>This is a card</CardBody>
+        </Card>
+      </GalleryItem>
+    ));
+  };
+
+  return isTopSticky ? (
+    <Fragment>
+      <Pagination
+        itemCount={itemCount}
+        perPage={perPage}
+        page={page}
+        onSetPage={onSetPage}
+        widgetId="pagination-options-menu-top"
+        onPerPageSelect={onPerPageSelect}
+        isSticky
+      >
+        <button onClick={onToggleSticky}>Toggle to bottom position</button>
+      </Pagination>
+      <Gallery hasGutter>{buildCards()}</Gallery>
+    </Fragment>
+  ) : (
+    <Fragment>
+      <Gallery hasGutter>{buildCards()}</Gallery>
+      <Pagination
+        itemCount={itemCount}
+        perPage={perPage}
+        page={page}
+        onSetPage={onSetPage}
+        widgetId="pagination-options-menu-top"
+        onPerPageSelect={onPerPageSelect}
+        isSticky
+        variant={PaginationVariant.bottom}
+      >
+        <button onClick={onToggleSticky}>Toggle to top position</button>
+      </Pagination>
+    </Fragment>
+  );
+};
+
+export const TableStickyHeader: React.FunctionComponent = () => {
+  const renderLabel = (labelText: string) => {
+    switch (labelText) {
+      case 'Running':
+        return <Label color="green">{labelText}</Label>;
+      case 'Stopped':
+        return <Label color="orange">{labelText}</Label>;
+      case 'Needs Maintenance':
+        return <Label color="blue">{labelText}</Label>;
+      case 'Down':
+        return <Label color="red">{labelText}</Label>;
+    }
+  };
+
+  return (
+    <Table aria-label="Sticky Header Table Demo" isStickyHeader>
+      <Thead>
+        <Tr>
+          <Th width={15}>{columns[0]}</Th>
+          <Th width={10}>{columns[1]}</Th>
+          <Th width={10}>{columns[2]}</Th>
+          <Th width={10}>{columns[3]}</Th>
+          <Th width={10}>{columns[4]}</Th>
+          <Th width={15}>{columns[5]}</Th>
+          <Th width={15}>{columns[6]}</Th>
+          <Th width={10}>{columns[7]}</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        {rows.map((row) => (
+          <Tr key={row.name}>
+            <Td dataLabel={columns[0]}>{row.name}</Td>
+            <Td dataLabel={columns[1]}>{row.threads}</Td>
+            <Td dataLabel={columns[2]}>{row.applications}</Td>
+            <Td dataLabel={columns[3]}>{row.workspaces}</Td>
+            <Td dataLabel={columns[4]}>{renderLabel(row.status)}</Td>
+            <Td dataLabel={columns[5]}>{row.location}</Td>
+            <Td dataLabel={columns[6]}>{row.lastModified}</Td>
+            <Td dataLabel={columns[7]}>
+              <a href="#">
+                <TableText wrapModifier="truncate">{row.url} </TableText>
+              </a>
+            </Td>
+          </Tr>
+        ))}
+      </Tbody>
+    </Table>
+  );
+};
+
 
 const AnimationsPage: FunctionComponent = () => {
-  const drawerRef = useRef<HTMLElement | null>(null);
+  const drawerRef = useRef(null);
   const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);
-  const [notifications, setNotifications] = useState<NotificationType[]>([
+  const [notifications, setNotifications] = useState([
     {
       id: 'notification-1',
       title: 'Unread info notification title',
@@ -237,7 +489,7 @@ const AnimationsPage: FunctionComponent = () => {
     },
     {
       id: 'notification-3',
-      title: 'Read warning notification title',
+      title: 'Read warning notification title1!!!',
       message: 'This is a warning notification description.',
       variant: AlertVariant.warning,
       timeout: 3000,
@@ -258,28 +510,15 @@ const AnimationsPage: FunctionComponent = () => {
   ]);
   const [selectedTab, setSelectedTab] = useState(0);
   const [showForm, setShowForm] = useState(false);
-  const [showStartTourModal, setShowStartTourModal] = useState(true);
-  const [showEndTourModal, setShowEndTourModal] = useState(false);
-  const [activeItem, setActiveItem] = useState<number | string>(0);
-  const { onStart, onFinish, renderTourStepElement, setCustomStepContent, tourStep, isFinished } = useGuidedTour();
-  const [windowWidth, setWindowWidth] = useState<number>(1200);
-  const unObserver = useRef(null);
-
-  const isMobile = windowWidth < 500;
+  const [showWizardModal, setShowWizardModal] = useState(false);
+  const [activeItem, setActiveItem] = useState('dashboard');
 
   // HERE
-  const [openKebabIndex, setOpenKebabIndex] = useState<number>(-1);
+  const [openKebabIndex, setOpenKebabIndex] = useState(-1);
 
-  interface Activity {
-    id: number;
-    name: string;
-    project: string;
-    // Each step is represented by its variant
-    progress: ('success' | 'info' | 'pending' | 'warning' | 'danger' | 'default')[];
-  }
 
   // Data for the table rows
-  const activityData: Activity[] = [
+  const activityData = [
     { id: 1, name: 'my-pod-name', project: 'project-test', progress: ['success', 'success', 'success'] },
     { id: 2, name: 'my-pod-name', project: 'project-test', progress: ['success', 'pending', 'default'] },
     { id: 3, name: 'my-pod-name', project: 'project-test', progress: ['success', 'success', 'danger'] },
@@ -293,7 +532,7 @@ const AnimationsPage: FunctionComponent = () => {
   ];
 
   // A function to create a kebab toggle for a specific row index
-  const kebabToggle = (index: number) => (toggleRef: React.Ref<any>) => (
+  const kebabToggle = (index) => (toggleRef) => (
     <MenuToggle
       ref={toggleRef}
       variant="plain"
@@ -363,34 +602,17 @@ const AnimationsPage: FunctionComponent = () => {
                   </Button>
                 </Td>
                 <Td>
-                  {rowIndex === 1 ? (
-                    renderTourStepElement(
-                      'progressStepper',
-                      <ProgressStepper isCompact id={`progress-stepper-${rowIndex}`}>
-                        {activity.progress.map((stepVariant, stepIndex) => (
-                          <ProgressStep
-                            id={`${rowIndex}-${stepVariant}-${stepIndex}`}
-                            key={stepIndex}
-                            variant={stepVariant}
-                            icon={iconMap[stepVariant]}
-                            aria-label={`Step ${stepIndex + 1} is ${stepVariant}`}
-                          />
-                        ))}
-                      </ProgressStepper>
-                    )
-                  ) : (
-                    <ProgressStepper isCompact>
-                      {activity.progress.map((stepVariant, stepIndex) => (
-                        <ProgressStep
-                          id={`progress-step-${rowIndex}-${stepVariant}-${stepIndex}`}
-                          key={stepIndex}
-                          variant={stepVariant}
-                          icon={iconMap[stepVariant]}
-                          aria-label={`Step ${stepIndex + 1} is ${stepVariant}`}
-                        />
-                      ))}
-                    </ProgressStepper>
-                  )}
+                  <ProgressStepper isCompact id={`progress-stepper-${rowIndex}`}>
+                    {activity.progress.map((stepVariant, stepIndex) => (
+                      <ProgressStep
+                        id={`${rowIndex}-${stepVariant}-${stepIndex}`}
+                        key={stepIndex}
+                        variant={stepVariant}
+                        icon={iconMap[stepVariant]}
+                        aria-label={`Step ${stepIndex + 1} is ${stepVariant}`}
+                      />
+                    ))}
+                  </ProgressStepper>
                 </Td>
                 <Td isActionCell>
                   <Dropdown
@@ -411,146 +633,6 @@ const AnimationsPage: FunctionComponent = () => {
     </Card>
   );
 
-  const addNotification = useCallback((showToast = true) => {
-    setNotifications((prev) => [
-      {
-        id: `new-notification-${prev.length + 1}`,
-        title: 'Animated notification',
-        message: 'A system alert has been triggered. Please review the alert details.',
-        variant: AlertVariant.danger,
-        timeout: 3000,
-        timeoutAnimation: 3000,
-        isNew: showToast,
-        isRead: false
-      },
-      ...prev
-    ]);
-  }, []);
-
-  useEffect(() => {
-    if (tourStep?.stepId === 'toastNotifications') {
-      setCustomStepContent(
-        <>
-          <Content component="p">
-            Click <strong>Add alert</strong>. In a moment, a new toast alert will appear.
-          </Content>
-          <Content component="p">
-            <Button variant="link" isInline onClick={() => addNotification(true)}>
-              Add alert
-            </Button>
-          </Content>
-          <Content component="p">
-            Notice how it slides smoothly into view to draw your eye to critical information, and then slides out just
-            as smoothly once it expires.
-          </Content>
-        </>
-      );
-    }
-    if (tourStep?.stepId === 'settingsButton') {
-      setCustomStepContent(
-        <>
-          {!isMobile ? (
-            <Content component="p">
-              Hover over the settings button. The cog icon rotates to show that it’s interactive.
-            </Content>
-          ) : null}
-          <Content component="p">
-            {isMobile ?
-              'Click the settings button to see the cog icon rotate, as well as our new button ripple effect.' :
-              `Click it to see the new ripple effect we've added to all buttons.`
-            }
-          </Content>
-        </>
-      );
-    }
-    if (tourStep?.stepId === 'navToggle') {
-      setCustomStepContent(
-        <>
-          {!isMobile ? (
-            <Content component="p">
-              Hover over the hamburger menu to see an arrow indicator appear.
-            </Content>
-          ) : null}
-          <Content component="p">
-            {`Click the ${isMobile ? 'hamburger menu button' : 'button'} and watch the arrow's direction change as the menu opens and closes,
-            always showing you what will happen next.`}
-          </Content>
-        </>
-      );
-    }
-    if (tourStep?.stepId === 'notificationBadge') {
-      setCustomStepContent(
-        <>
-          <Content component="p">
-            Click <strong>Add notification</strong>. Watch for a new notification to arrive.
-          </Content>
-          <Content component="p">
-            <Button variant="link" isInline onClick={() => addNotification(false)}>
-              Add notification
-            </Button>
-          </Content>
-          <Content component="p">
-            The bell icon "rings" with a subtle rotation to quickly catch your attention as a message comes in.
-          </Content>
-        </>
-      );
-    }
-    if (tourStep?.stepId === 'expandableComponents' || tourStep?.stepId === 'skeletonLoader') {
-      setSelectedTab(1);
-    }
-    if (tourStep?.stepId === 'validationErrors') {
-      setSelectedTab(2);
-      setShowForm(true);
-    }
-    if (tourStep?.stepId === 'progressStepper') {
-      setSelectedTab(0);
-      setTimeout(() => {
-        const element = document.getElementById('progress-stepper-1');
-        if (element) {
-          element.scrollIntoView({
-            behavior: 'smooth', // Smooth scrolling animation
-            block: 'center', // Align element to the center of the viewport
-            inline: 'nearest' // Horizontal alignment (optional)
-          });
-        }
-      }, 100);
-    }
-  }, [tourStep?.stepId, setCustomStepContent, addNotification, isMobile]);
-
-  useEffect(() => {
-    setShowEndTourModal(isFinished);
-  }, [isFinished]);
-
-  const measureRef = (ref: HTMLDivElement) => {
-    // Remove any previous observer
-    if (unObserver.current) {
-      unObserver.current();
-    }
-
-    if (!ref) {
-      return;
-    }
-
-    const handleResize = () => setWindowWidth(ref.clientWidth);
-
-    // Set size on initialization
-    handleResize();
-
-    const debounceResize = debounce(handleResize, 100);
-
-    // Update graph size on resize events
-    unObserver.current = getResizeObserver(ref, debounceResize);
-  };
-
-  useEffect(
-    () => () => {
-      if (unObserver.current) {
-        unObserver.current();
-      }
-    },
-    []
-  );
-
   const onNavSelect = (
     _event: FormEvent<HTMLInputElement>,
     selectedItem: {
@@ -573,41 +655,34 @@ const AnimationsPage: FunctionComponent = () => {
     firstTabbableItem?.focus();
   };
 
-  const closeStartTourModal = (startTour = false) => {
-    setShowStartTourModal(false);
-    if (startTour) {
-      onStart();
-    } else {
-      setNotifications((prev) => [
-        {
-          id: `new-notification-${prev.length + 1}`,
-          title: 'Explore animations',
-          message: 'When you’re ready to take a tour of PatternFly’s exciting, new animations, refresh this page.',
-          variant: AlertVariant.info,
-          timeout: 8000,
-          timeoutAnimation: 8000,
-          isNew: true,
-          isRead: false
-        },
-        ...prev
-      ]);
-    }
+  const [isUnreadMap, setIsUnreadMap] = useState(() => {
+    const map = {};
+    notifications.forEach((n) => {
+      map[n.id] = !n.isRead;
+    });
+    return map;
+  });
+
+  const onNotificationClick = (id: string) => {
+    setIsUnreadMap({ ...isUnreadMap, [id]: false });
+  };
+
+  const getNumberUnread = () => {
+    return Object.values(isUnreadMap).reduce((count, value) => count + (value ? 1 : 0), 0);
   };
 
+
   return (
     <Page
       masthead={
         <Masthead>
           <MastheadMain>
             <MastheadToggle>
-              {renderTourStepElement(
-                'navToggle',
-                <PageToggleButton variant="plain" aria-label="Global navigation" isHamburgerButton isExpanded />
-              )}
+              <PageToggleButton variant="plain" aria-label="Global navigation" isHamburgerButton isExpanded />
             </MastheadToggle>
             <MastheadBrand>
               <MastheadLogo>
-                <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+                <PfLogo />
               </MastheadLogo>
             </MastheadBrand>
           </MastheadMain>
@@ -616,8 +691,8 @@ const AnimationsPage: FunctionComponent = () => {
               notifications={notifications}
               isDrawerExpanded={isDrawerExpanded}
               setIsDrawerExpanded={setIsDrawerExpanded}
-              onStartGuidedTour={() => setShowStartTourModal(true)}
-              onEndGuidedTour={() => onFinish()}
+              setShowWizardModal={setShowWizardModal}
+              showWizardModal={showWizardModal}
             />
           </MastheadContent>
         </Masthead>
@@ -636,6 +711,51 @@ const AnimationsPage: FunctionComponent = () => {
                 >
                   Dashboard
                 </NavItem>
+                <NavItem
+                  preventDefault
+                  id="navItem1"
+                  to="#navItem1"
+                  itemId="navItem1"
+                  isActive={activeItem === 'navItem1'}
+                >
+                  Nav Item 1
+                </NavItem>
+                <NavItem
+                  preventDefault
+                  id="navItem2"
+                  to="#navItem2"
+                  itemId="navItem2"
+                  isActive={activeItem === 'navItem2'}
+                >
+                  Nav Item 2
+                </NavItem>
+                <NavItem
+                  preventDefault
+                  id="navItem3"
+                  to="#navItem3"
+                  itemId="navItem3"
+                  isActive={activeItem === 'navItem3'}
+                >
+                  Nav Item 3
+                </NavItem>
+                <NavItem
+                  preventDefault
+                  id="navItem4"
+                  to="#navItem4"
+                  itemId="navItem4"
+                  isActive={activeItem === 'navItem4'}
+                >
+                  Nav Item 4
+                </NavItem>
+                <NavItem
+                  preventDefault
+                  id="navItem5"
+                  to="#navItem5"
+                  itemId="navItem5"
+                  isActive={activeItem === 'navItem5'}
+                >
+                  Nav Item 5
+                </NavItem>
               </NavList>
             </Nav>
           </PageSidebarBody>
@@ -643,11 +763,69 @@ const AnimationsPage: FunctionComponent = () => {
       }
       isManagedSidebar
       notificationDrawer={
-        <AnimationsNotificationsDrawer
-          notifications={notifications}
-          updateNotifications={setNotifications}
-          onClose={() => setIsDrawerExpanded(false)}
-        />
+        <NotificationDrawer>
+          <NotificationDrawerHeader count={getNumberUnread()} onClose={() => setIsDrawerExpanded(false)} />
+          <NotificationDrawerBody>
+            <NotificationDrawerList>
+              <NotificationDrawerListItem
+                variant="info"
+                onClick={() => onNotificationClick('notification-1')}
+                isRead={!isUnreadMap['notification-1']}
+              >
+                <NotificationDrawerListItemHeader
+                  variant="info"
+                  title="Unread info notification title"
+                  srTitle="Info notification:"
+                />
+                <NotificationDrawerListItemBody timestamp="5 minutes ago">
+                  This is an info notification description.
+                </NotificationDrawerListItemBody>
+              </NotificationDrawerListItem>
+              <NotificationDrawerListItem
+                variant="danger"
+                onClick={() => onNotificationClick('notification-2')}
+                isRead={!isUnreadMap['notification-2']}
+              >
+                <NotificationDrawerListItemHeader
+                  variant="danger"
+                  title="Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines."
+                  srTitle="Danger notification:"
+                />
+                <NotificationDrawerListItemBody timestamp="10 minutes ago">
+                  This is a danger notification description. This is a long description to show how the title will wrap if it is long and wraps to multiple lines.
+                </NotificationDrawerListItemBody>
+              </NotificationDrawerListItem>
+              <NotificationDrawerListItem
+                variant="warning"
+                onClick={() => onNotificationClick('notification-3')}
+                isRead={!isUnreadMap['notification-3']}
+              >
+                <NotificationDrawerListItemHeader
+                  variant="warning"
+                  title="Read warning notification title"
+                  srTitle="Warning notification:"
+                />
+                <NotificationDrawerListItemBody timestamp="20 minutes ago">
+                  This is a warning notification description.
+                </NotificationDrawerListItemBody>
+              </NotificationDrawerListItem>
+              <NotificationDrawerListItem
+                variant="success"
+                onClick={() => onNotificationClick('notification-4')}
+                isRead={!isUnreadMap['notification-4']}
+              >
+                <NotificationDrawerListItemHeader
+                  variant="success"
+                  title="Read success notification title"
+                  srTitle="Success notification:"
+                />
+                <NotificationDrawerListItemBody timestamp="30 minutes ago">
+                  This is a success notification description.
+                </NotificationDrawerListItemBody>
+              </NotificationDrawerListItem>
+            </NotificationDrawerList>
+          </NotificationDrawerBody>
+        </NotificationDrawer>
       }
       onNotificationDrawerExpand={(event) => focusDrawer(event)}
       isNotificationDrawerExpanded={isDrawerExpanded}
@@ -668,20 +846,7 @@ const AnimationsPage: FunctionComponent = () => {
       }
       mainContainerId={mainContainerPageId}
     >
-      <div ref={measureRef} style={{ width: '100%' }} />
       <PageSection aria-labelledby="main-title">
-        {renderTourStepElement(
-          'toastNotifications',
-          <div
-            style={{
-              width: 10,
-              height: 10,
-              position: 'absolute',
-              right: isMobile ? windowWidth / 2 : 300,
-              top: isMobile ? 130 : 110
-            }}
-          />
-        )}
         {notifications
           .filter((n) => n.isNew)
           .map((alert) => (
@@ -703,7 +868,7 @@ const AnimationsPage: FunctionComponent = () => {
                     }, [])
                   );
                 }}
-                actionClose={<AlertActionCloseButton title={alert.title} onClose={() => {}} />}
+                actionClose={<AlertActionCloseButton title={alert.title} onClose={() => { }} />}
               >
                 {alert.message}
               </Alert>
@@ -711,19 +876,19 @@ const AnimationsPage: FunctionComponent = () => {
           ))}
         <Content component={ContentVariants.h1}>Dashboard</Content>
         <Content className="pf-v6-u-mb-md">Everything you need to know about your application</Content>
-        {renderTourStepElement(
-          'tabs',
-          <Tabs
-            id="tabs"
-            activeKey={selectedTab}
-            onSelect={(_e, key) => setSelectedTab(Number(key))}
-            aria-label="Primary tabs"
-          >
-            <Tab eventKey={0} title={<TabTitleText>Overview</TabTitleText>} tabContentId="overview" />
-            <Tab eventKey={1} title={<TabTitleText>Resources</TabTitleText>} tabContentId="resources" />
-            <Tab eventKey={2} title={<TabTitleText>Database</TabTitleText>} tabContentId="database" />
-          </Tabs>
-        )}
+        <Tabs
+          id="tabs"
+          activeKey={selectedTab}
+          onSelect={(_e, key) => setSelectedTab(Number(key))}
+          aria-label="Primary tabs"
+        >
+          <Tab eventKey={0} title={<TabTitleText>Overview</TabTitleText>} tabContentId="overview" />
+          <Tab eventKey={1} title={<TabTitleText>Resources</TabTitleText>} tabContentId="resources" />
+          <Tab eventKey={2} title={<TabTitleText>Database</TabTitleText>} tabContentId="database" />
+          <Tab eventKey={3} title={<TabTitleText>Other components</TabTitleText>} tabContentId="other-components" />
+          <Tab eventKey={4} title={<TabTitleText>Pagination</TabTitleText>} tabContentId="pagination" />
+          <Tab eventKey={5} title={<TabTitleText>Sticky header table</TabTitleText>} tabContentId="table" />
+        </Tabs>
       </PageSection>
       {selectedTab === 0 && (
         <AnimationsOverview recentActivityCard={recentActivityCard} openshiftLogo={openshiftLogo} />
@@ -753,8 +918,74 @@ const AnimationsPage: FunctionComponent = () => {
           )}
         </PageSection>
       )}
-      {showStartTourModal ? <AnimationsStartTourModal onClose={closeStartTourModal} /> : null}
-      {showEndTourModal ? <AnimationsEndTourModal /> : null}
+      {selectedTab === 3 && (
+        <>
+          <PageSection>
+            <AccordionSingleExpandBehavior>
+              <AccordionSingleExpandBehavior />
+            </AccordionSingleExpandBehavior>
+            <CodeEditorBasic />
+          </PageSection>
+        </>
+      )}
+      {selectedTab === 4 && (
+        <>
+          <PageGroup stickyOnBreakpoint={{ default: 'top' }}>
+            <PageBreadcrumb>
+              <Breadcrumb>
+                <BreadcrumbItem>Section home</BreadcrumbItem>
+                <BreadcrumbItem to="#">Section title</BreadcrumbItem>
+                <BreadcrumbItem to="#">Section title</BreadcrumbItem>
+                <BreadcrumbItem to="#" isActive>
+                  Section landing
+                </BreadcrumbItem>
+              </Breadcrumb>
+            </PageBreadcrumb>
+            <PageSection isWidthLimited aria-labelledby="main-title">
+              <Content>
+                <h1 id="main-title">Main title</h1>
+                <p>This is a full page demo.</p>
+              </Content>
+            </PageSection>{' '}
+          </PageGroup>
+          <PageSection>
+            <PaginationSticky />
+          </PageSection>
+        </>
+      )}
+      {selectedTab === 5 && (
+        <PageSection>
+          <TableStickyHeader />
+        </PageSection>
+      )}
+      <Modal
+        isOpen={showWizardModal}
+        variant={ModalVariant.medium}
+      >
+        <Wizard
+          height={400}
+          title="Header wizard"
+          onClose={() => setShowWizardModal(false)}
+          header={
+            <WizardHeader
+              title="You're a wizard, Harry"
+              description="To be clear, all those not named Harry are not wizards."
+              closeButtonAriaLabel="Close header"
+              onClose={() => setShowWizardModal(false)}
+            />
+          }
+        >
+          <WizardStep name="Step 1" id="header-first-step">
+            Step 1 content
+          </WizardStep>
+          <WizardStep name="Step 2" id="header-second-step">
+            Step 2 content
+          </WizardStep>
+          <WizardStep name="Review" id="header-review-step" footer={{ nextButtonText: 'Finish' }}>
+            Review step content
+          </WizardStep>
+        </Wizard>
+      </Modal>
     </Page>
   );
 };
@@ -765,7 +996,6 @@ const AnimationsResourcesTable: FunctionComponent = () => {
   const [collapseAllAriaLabel, setCollapseAllAriaLabel] = useState('Expand all');
   const [expandedAppNames, setExpandedAppNames] = useState(initialExpandedServerNames);
   const [loading, setLoading] = useState(true);
-  const { tourStep, renderTourStepElement } = useGuidedTour();
 
   useEffect(() => {
     const timer = setTimeout(() => setLoading(false), 2000);
@@ -775,7 +1005,7 @@ const AnimationsResourcesTable: FunctionComponent = () => {
         clearTimeout(timer);
       }
     };
-  }, [loading, tourStep?.stepId]);
+  }, [loading]);
 
   useEffect(() => {
     const allExpanded = expandedAppNames.length === applicationsData.length;
@@ -794,103 +1024,102 @@ const AnimationsResourcesTable: FunctionComponent = () => {
     setExpandedAppNames(isOpen ? applicationsData.map((app) => app.name) : []);
   };
 
+  const [showDrawer, setShowDrawer] = useState(false);
+
+  const panelContent = (
+    <DrawerPanelContent>
+      <DrawerHead>
+        <span>
+          Drawer panel header
+        </span>
+        <DrawerActions>
+          <DrawerCloseButton onClick={() => setShowDrawer(false)} />
+        </DrawerActions>
+      </DrawerHead>
+      <DrawerPanelDescription>Drawer panel description</DrawerPanelDescription>
+      <DrawerPanelBody>Drawer panel body</DrawerPanelBody>
+    </DrawerPanelContent>
+  );
+
+  const drawerContent = (<Table id="resources-table" aria-label="Collapsible table" isExpandable hasAnimations>
+    <Thead>
+      <Tr>
+        <Th
+          expand={{
+            areAllExpanded: !areAllExpanded,
+            collapseAllAriaLabel,
+            onToggle: onCollapseAll
+          }}
+          aria-label="Row expansion"
+          name="expand"
+        />
+        {expandableColumns.map((column) => (
+          <Th key={column} name={column}>
+            {column}
+          </Th>
+        ))}
+      </Tr>
+    </Thead>
+
+    {applicationsData.map((app, idx) => (
+      <Tbody key={app.name} isExpanded={isAppExpanded(app)}>
+        <Tr>
+          <Td
+            expand={
+              app.details
+                ? {
+                  rowIndex: idx,
+                  isExpanded: isAppExpanded(app),
+                  onToggle: () => setAppExpanded(app, !isAppExpanded(app))
+                }
+                : undefined
+            }
+          />
+          <Td>{app.name}</Td>
+          <Td>{app.header}</Td>
+          <Td>{app.branch}</Td>
+          <Td>
+            {app.status === 'Running' && <Label status="success">Running</Label>}
+            {app.status === 'Degraded' && <Label status="warning">Degraded</Label>}
+            {app.status === 'Stopped' && <Label status="danger">Stopped</Label>}
+            {app.status !== 'Running' && app.status !== 'Degraded' && app.status !== 'Stopped' && app.status}
+          </Td>
+        </Tr>
+        <Tr isExpanded={isAppExpanded(app)}>
+          <Td />
+          <Td colSpan={expandableColumns.length}>
+            <ExpandableRowContent>{app.details}</ExpandableRowContent>
+          </Td>
+        </Tr>
+      </Tbody>
+    ))}
+  </Table>)
+
   return (
-    <Card component="div">
-      {loading || tourStep?.stepId === 'skeletonLoader' ? (
-        <>
-          {renderTourStepElement(
-            'skeletonLoader',
-            <SkeletonTable
-              id="skeleton-table"
-              columns={[
-                { cell: '', props: { name: 'expand', 'aria-label': 'expand' } },
-                ...expandableColumns.map((col) => ({ cell: col, props: { name: col, 'aria-label': col } }))
-              ]}
-              rows={8}
-            />
-          )}
-        </>
+    <>
+      <Toolbar>
+        <ToolbarContent>
+          <ToolbarItem><Button variant="primary" onClick={() => setShowDrawer(!showDrawer)}>Show drawer</Button></ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+      {loading ? (
+        <SkeletonTable
+          id="skeleton-table"
+          columns={[
+            { cell: '', props: { name: 'expand', 'aria-label': 'expand' } },
+            ...expandableColumns.map((col) => ({ cell: col, props: { name: col, 'aria-label': col } }))
+          ]}
+          rows={8}
+        />
       ) : (
-        renderTourStepElement(
-          'expandableComponents',
-          <Table id="resources-table" aria-label="Collapsible table" isExpandable hasAnimations>
-            <Thead>
-              <Tr>
-                <Th
-                  expand={{
-                    areAllExpanded: !areAllExpanded,
-                    collapseAllAriaLabel,
-                    onToggle: onCollapseAll
-                  }}
-                  aria-label="Row expansion"
-                  name="expand"
-                />
-                {expandableColumns.map((column) => (
-                  <Th key={column} name={column}>
-                    {column}
-                  </Th>
-                ))}
-              </Tr>
-            </Thead>
-
-            {applicationsData.map((app, idx) => (
-              <Tbody key={app.name} isExpanded={isAppExpanded(app)}>
-                <Tr>
-                  {idx === 0 ? (
-                    renderTourStepElement(
-                      'expandableComponentsMobile',
-                      <Td
-                        expand={
-                          app.details
-                            ? {
-                                rowIndex: idx,
-                                isExpanded: isAppExpanded(app),
-                                onToggle: () => setAppExpanded(app, !isAppExpanded(app))
-                              }
-                            : undefined
-                        }
-                      />
-                    )
-                  ) : (
-                    <Td
-                      expand={
-                        app.details
-                          ? {
-                              rowIndex: idx,
-                              isExpanded: isAppExpanded(app),
-                              onToggle: () => setAppExpanded(app, !isAppExpanded(app))
-                            }
-                          : undefined
-                      }
-                    />
-                  )}
-                  <Td>{app.name}</Td>
-                  <Td>{app.header}</Td>
-                  <Td>{app.branch}</Td>
-                  <Td>
-                    {app.status === 'Running' && <Label status="success">Running</Label>}
-                    {app.status === 'Degraded' && <Label status="warning">Degraded</Label>}
-                    {app.status === 'Stopped' && <Label status="danger">Stopped</Label>}
-                    {app.status !== 'Running' && app.status !== 'Degraded' && app.status !== 'Stopped' && app.status}
-                  </Td>
-                </Tr>
-                <Tr isExpanded={isAppExpanded(app)}>
-                  <Td />
-                  <Td colSpan={expandableColumns.length}>
-                    <ExpandableRowContent>{app.details}</ExpandableRowContent>
-                  </Td>
-                </Tr>
-              </Tbody>
-            ))}
-          </Table>
-        )
+        <Drawer isExpanded={showDrawer}>
+          <DrawerContent panelContent={panelContent}>
+            <DrawerContentBody>{drawerContent}</DrawerContentBody>
+          </DrawerContent>
+        </Drawer>
       )}
-    </Card>
+    </>
   );
 };
 
-export const Animations: FunctionComponent = () => (
-  <GuidedTourProvider steps={GuidedTourSteps}>
-    <AnimationsPage />
-  </GuidedTourProvider>
-);
+export const Animations: FunctionComponent = () => <AnimationsPage />;
diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/examples/glass.css b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/examples/glass.css
new file mode 100644
index 0000000000..dc483b4427
--- /dev/null
+++ b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/examples/glass.css
@@ -0,0 +1,226 @@
+body {
+  background: var(--bg, url('../../../../../../images/glass2-light.png')) no-repeat center center / cover;
+}
+
+:root:where(.pf-v6-theme-glass.pf-v6-theme-dark) {
+  --bg: url('../../../../../../images/glass2-dark.png');
+}
+
+:root {
+  --pf-t--global--background--color--glass--sticky--default: var(--pf-t--global--background--color--100);
+}
+
+:root:where(.pf-v6-theme-dark) {
+  --pf-t--global--background--color--glass--sticky--default: var(--pf-t--global--dark--background--color--200);
+}
+
+:root:where(.pf-v6-theme-glass) {
+  /* --pf-t--global--background--color--glass--primary--default: blue; */
+  --pf-t--global--background--color--glass--floating--default: var(--pf-t--global--background--color--floating--default);
+  /* --pf-t--global--background--color--glass--sticky--default: var(--pf-t--global--background--color--200); */
+  /* --pf-t--global--background--color--glass--primary: blue; */
+  /* --pf-t--global--background--color--glass--floating: blue; */
+  /* --pf-t--global--background--opacity--glass--primary: 70%; */
+  /* --pf-t--global--background--opacity--glass--floating: 10%; */
+  /* --pf-t--global--background--filter--glass--blur--primary: blur(0px); */
+  /* --pf-t--global--background--filter--glass--blur--floating: blur(0px); */
+}
+
+:root:where(.pf-v6-theme-glass.pf-v6-theme-dark) {
+  /* --pf-t--global--background--color--glass--primary--default: blue; */
+  /* --pf-t--global--background--color--glass--floating--default: red; */
+  /* --pf-t--global--background--color--glass--sticky--default: var(--pf-t--global--dark--background--color--200); */
+  /* --pf-t--global--background--color--glass--primary: green; */
+  /* --pf-t--global--background--color--glass--floating: green; */
+  /* --pf-t--global--background--opacity--glass--primary: 30%; */
+  /* --pf-t--global--background--opacity--glass--floating: 10%; */
+  /* --pf-t--global--background--filter--glass--blur--primary: blur(0px); */
+  /* --pf-t--global--background--filter--glass--blur--floating: blur(0px); */
+}
+
+:root:where(.pf-v6-theme-glass) {
+  .pf-m-glass
+  {
+    background-color: var(--pf-t--global--background--color--glass--primary--default) !important;
+    backdrop-filter: var(--pf-t--global--background--filter--glass--blur--primary) !important;
+    border: var(--pf-t--global--border--width--box--default) solid var(--pf-t--global--border--color--alt) !important;
+  }
+
+  .pf-m-glass-floating
+  {
+    background-color: var(--pf-t--global--background--color--glass--floating--default) !important;
+    backdrop-filter: var(--pf-t--global--background--filter--glass--blur--floating) !important;
+    border: var(--pf-t--global--border--width--box--default) solid var(--pf-t--global--border--color--alt) !important;
+  }
+
+  .pf-m-plain
+  {
+    background-color: transparent !important;
+    border: none !important;
+  }
+
+  /* glass components */
+  .pf-v6-c-page__main-container::before,
+  /* .pf-v6-c-nav__link.pf-m-current, */
+  /* .pf-v6-c-nav, */
+  /* .pf-v6-c-page__sidebar, */
+  .pf-v6-c-masthead,
+  .pf-v6-c-page__sidebar-body
+  /* .pf-v6-c-page__main-section, */
+  {
+    background-color: var(--pf-t--global--background--color--glass--primary--default) !important;
+    backdrop-filter: var(--pf-t--global--background--filter--glass--blur--primary) !important;
+    border: var(--pf-t--global--border--width--box--default) solid var(--pf-t--global--border--color--alt) !important;
+    border-radius: var(--pf-t--global--border--radius--medium) !important;
+    overflow: hidden !important;
+    box-shadow: var(--pf-t--global--box-shadow--sm) !important;
+  }
+
+  .pf-v6-c-nav__link.pf-m-current {
+    background-color: var(--pf-t--global--background--color--action--plain--clicked) !important;
+  }
+
+  .pf-v6-c-page__main-container {
+    position: relative;
+  }
+  .pf-v6-c-page__main-container::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+  }
+
+  /* floating class components */
+  .pf-v6-c-drawer__panel,
+  .pf-v6-c-popover__content,
+  .pf-v6-c-popover__arrow,
+  .pf-v6-c-modal-box,
+  .pf-v6-c-menu {
+    background-color: var(--pf-t--global--background--color--glass--floating--default) !important;
+    backdrop-filter: var(--pf-t--global--background--filter--glass--blur--floating) !important;
+  }
+
+  /* plain components */
+  .pf-v6-c-page,
+  /* .pf-v6-c-masthead, */
+  .pf-v6-c-page__sidebar,
+  .pf-v6-c-page__main-section,
+  .pf-v6-c-page__main-breadcrumb,
+  .pf-v6-c-notification-drawer,
+  .pf-v6-c-notification-drawer__header,
+  .pf-v6-c-data-list__item,
+  .pf-v6-c-table,
+  .pf-v6-c-nav,
+  .pf-v6-c-accordion,
+  .pf-v6-c-accordion__item::before,
+  .pf-v6-c-accordion__expandable-content,
+  .pf-v6-c-wizard__outer-wrap,
+  .pf-v6-c-wizard__footer,
+  .pf-v6-c-table__expandable-row-content,
+  .pf-v6-c-page__main-container
+  {
+    background-color: transparent !important;
+    border: none !important;
+  }
+
+  /* no background */
+  .pf-v6-c-wizard__nav,
+  .pf-v6-c-wizard__header
+  {
+    background: transparent !important;
+  }
+
+  .pf-v6-c-masthead {
+    border-radius: 0 !important;
+    margin-bottom: var(--pf-t--global--spacer--gutter--default);
+  }
+
+  .pf-v6-c-page__sidebar-body {
+    margin: 0  var(--pf-t--global--spacer--gutter--default) 0 var(--pf-t--global--spacer--inset--page-chrome);
+  }
+
+  /* .pf-v6-c-card:not(.pf-m-plain) {
+    background-color: var(--pf-t--global--background--color--glass--primary--default) !important;
+    backdrop-filter: var(--pf-t--global--background--filter--glass--blur--primary) !important;
+  } */
+  .pf-v6-c-accordion__toggle:is(:hover, :focus, .pf-m-expanded) {
+    --pf-v6-c-accordion__toggle--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
+    --pf-v6-c-accordion__toggle--BorderWidth: var(--pf-v6-c-accordion__toggle--hover--BorderWidth);
+  }
+}
+
+/* page sections/gropus sticky */
+.pf-m-sticky-top {
+  container-type: scroll-state;
+  position: sticky;
+  top: 0px;
+
+  > *[class*="pf-v6-c-page__main"] {
+    @container scroll-state(stuck: top) {
+      background: var(--pf-t--global--background--color--glass--sticky--default) !important;
+    }
+  }
+  > *[class*="pf-v6-c-page__main"]:last-child {
+    @container scroll-state(stuck: top) {
+      box-shadow: var(--pf-t--global--box-shadow--md--bottom) !important;
+    }
+  }
+
+}
+
+.pf-v6-c-page__main-group.pf-m-sticky-top {
+  box-shadow: none !important;
+}
+
+[class*="pf-v6-c-page__main"] {
+  transition: background-color var(--pf-t--global--motion--duration--fade--short);
+}
+
+.pf-v6-c-table__thead {
+  position: sticky;
+  top: var(--pf-t--global--spacer--sm);
+  z-index: var(--pf-t--global--z-index--xs);
+  background: transparent !important;
+}
+
+.pf-v6-c-table__thead::before {
+  transition: all var(--pf-t--global--motion--duration--fade--short);
+}
+
+.pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead::before, .pf-v6-c-table .pf-v6-c-table__thead.pf-m-nested-column-header {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: var(--pf-v6-c-table--m-sticky-header--ZIndex);
+  background: transparent;
+  border-radius: var(--pf-t--global--border--radius--medium);
+  /* overflow: hidden; */
+  border: 0 !important;
+}
+
+
+.pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead::before, .pf-v6-c-table .pf-v6-c-table__thead.pf-m-nested-column-header::before {
+  position: absolute;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+  /* z-index: var(--pf-v6-c-table--m-sticky-header--border--ZIndex); */
+  pointer-events: none;
+  content: "";
+  border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
+  z-index: -1;
+}
+
+.pf-v6-c-table__thead {
+  background: transparent !important;
+  container-type: scroll-state;
+  position: sticky;
+  top: var(--pf-t--global--spacer--sm) !important;
+
+  &::before {
+    @container scroll-state(stuck: top) {
+      background: var(--pf-t--global--background--color--glass--sticky--default) !important;
+      box-shadow: var(--pf-t--global--box-shadow--md);
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/documentation-site/patternfly-docs/custom-org.css b/packages/documentation-site/patternfly-docs/custom-org.css
new file mode 100644
index 0000000000..b0ec8090c7
--- /dev/null
+++ b/packages/documentation-site/patternfly-docs/custom-org.css
@@ -0,0 +1 @@
+/* custom global org styles */
diff --git a/packages/documentation-site/patternfly-docs/images/compass--wallpaper-dark.png b/packages/documentation-site/patternfly-docs/images/compass--wallpaper-dark.png
new file mode 100644
index 0000000000..14109c3f2c
Binary files /dev/null and b/packages/documentation-site/patternfly-docs/images/compass--wallpaper-dark.png differ
diff --git a/packages/documentation-site/patternfly-docs/images/compass--wallpaper-light.png b/packages/documentation-site/patternfly-docs/images/compass--wallpaper-light.png
new file mode 100644
index 0000000000..9a76b0f646
Binary files /dev/null and b/packages/documentation-site/patternfly-docs/images/compass--wallpaper-light.png differ
diff --git a/packages/documentation-site/patternfly-docs/images/glass1-dark.png b/packages/documentation-site/patternfly-docs/images/glass1-dark.png
new file mode 100644
index 0000000000..da14c2d2b0
Binary files /dev/null and b/packages/documentation-site/patternfly-docs/images/glass1-dark.png differ
diff --git a/packages/documentation-site/patternfly-docs/images/glass1-light.png b/packages/documentation-site/patternfly-docs/images/glass1-light.png
new file mode 100644
index 0000000000..27dcc73d95
Binary files /dev/null and b/packages/documentation-site/patternfly-docs/images/glass1-light.png differ
diff --git a/packages/documentation-site/patternfly-docs/images/glass2-dark.png b/packages/documentation-site/patternfly-docs/images/glass2-dark.png
new file mode 100644
index 0000000000..cdbec18efc
Binary files /dev/null and b/packages/documentation-site/patternfly-docs/images/glass2-dark.png differ
diff --git a/packages/documentation-site/patternfly-docs/images/glass2-light.png b/packages/documentation-site/patternfly-docs/images/glass2-light.png
new file mode 100644
index 0000000000..c0aa11db3f
Binary files /dev/null and b/packages/documentation-site/patternfly-docs/images/glass2-light.png differ
diff --git a/packages/documentation-site/patternfly-docs/patternfly-docs.css.js b/packages/documentation-site/patternfly-docs/patternfly-docs.css.js
index 0e58f3b13a..41ac2eb043 100644
--- a/packages/documentation-site/patternfly-docs/patternfly-docs.css.js
+++ b/packages/documentation-site/patternfly-docs/patternfly-docs.css.js
@@ -4,6 +4,7 @@ import '@patternfly/react-styles/src/css/layouts/Toolbar/toolbar.css';
 
 // Patternfly
 import '@patternfly/patternfly/patternfly.css';
+import './content/foundations-and-styles/styles/motion/Animations/examples/glass.css';
 // Patternfly utilities
 import '@patternfly/patternfly/patternfly-addons.css';
 // Global theme CSS
diff --git a/yarn.lock b/yarn.lock
index b6a51aa877..7b2d5c108e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4871,7 +4871,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@patternfly/patternfly@npm:6.5.0-prerelease.33, @patternfly/patternfly@npm:^6.5.0-prerelease.33":
+"@patternfly/patternfly@npm:6.5.0-prerelease.33":
   version: 6.5.0-prerelease.33
   resolution: "@patternfly/patternfly@npm:6.5.0-prerelease.33"
   checksum: 10c0/d3714f12545a4784dd26abc4e60e979ba40b1a551027c6df1888a6839fa4fdc078c2370f049a326fb5fbd330075107ac36fb393bf40fa4b9fdbe4b4f8777ad81
@@ -4885,6 +4885,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@patternfly/patternfly@npm:^6.5.0-prerelease.37":
+  version: 6.5.0-prerelease.37
+  resolution: "@patternfly/patternfly@npm:6.5.0-prerelease.37"
+  checksum: 10c0/73907ee81c42ba5257636d6a29034b68143305e8fba02cccb3308ed767d2c510ffd5c0e78082cc2f29cf29c0bda37ea80befd614cd62a2d08abd7a1d11ce0ddd
+  languageName: node
+  linkType: hard
+
 "@patternfly/quickstarts@npm:6.4.0, @patternfly/quickstarts@npm:^6.0.0":
   version: 6.4.0
   resolution: "@patternfly/quickstarts@npm:6.4.0"
@@ -5143,13 +5150,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@patternfly/react-icons@npm:6.5.0-prerelease.11, @patternfly/react-icons@npm:^6.5.0-prerelease.11":
-  version: 6.5.0-prerelease.11
-  resolution: "@patternfly/react-icons@npm:6.5.0-prerelease.11"
+"@patternfly/react-icons@npm:6.5.0-prerelease.12":
+  version: 6.5.0-prerelease.12
+  resolution: "@patternfly/react-icons@npm:6.5.0-prerelease.12"
   peerDependencies:
     react: ^17 || ^18 || ^19
     react-dom: ^17 || ^18 || ^19
-  checksum: 10c0/d0d91d9e011747dde34a0d3521cd92d58ff29281f6fb1e442c72cf0ea1ca8b3a69e270497e0644ffa499601484394bc9fdf12b070f8568114a7fcfed0428a8c8
+  checksum: 10c0/c636f014b5274eb2aa1752270036105991ab56a011c85ffcdeae7dd2481ce1f25cc57039d20d6d368d5df9170fc51a040c546f1929c8cc5ebc631b4111e5f005
   languageName: node
   linkType: hard
 
@@ -5173,6 +5180,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@patternfly/react-icons@npm:^6.5.0-prerelease.11":
+  version: 6.5.0-prerelease.13
+  resolution: "@patternfly/react-icons@npm:6.5.0-prerelease.13"
+  peerDependencies:
+    react: ^17 || ^18 || ^19
+    react-dom: ^17 || ^18 || ^19
+  checksum: 10c0/518809f6d0deedb8079fbbaa3e503ccdfdfdd076bab6f3ad94575eb09d10b283ddbe921de0a58079580431d0a638e68878648873fc02a9be517b4fec4c06290b
+  languageName: node
+  linkType: hard
+
 "@patternfly/react-log-viewer@npm:6.3.0":
   version: 6.3.0
   resolution: "@patternfly/react-log-viewer@npm:6.3.0"
@@ -18934,7 +18951,7 @@ __metadata:
   resolution: "patternfly-org-workspace@workspace:."
   dependencies:
     "@octokit/rest": "npm:^19.0.7"
-    "@patternfly/patternfly": "npm:^6.5.0-prerelease.33"
+    "@patternfly/patternfly": "npm:^6.5.0-prerelease.37"
     "@patternfly/react-code-editor": "npm:^6.5.0-prerelease.26"
     "@patternfly/react-core": "npm:^6.5.0-prerelease.24"
     "@patternfly/react-table": "npm:^6.5.0-prerelease.24"
@@ -18962,7 +18979,7 @@ __metadata:
     "@patternfly/react-console": "npm:6.1.0"
     "@patternfly/react-data-view": "npm:6.4.0-prerelease.8"
     "@patternfly/react-docs": "npm:7.5.0-prerelease.26"
-    "@patternfly/react-icons": "npm:6.5.0-prerelease.11"
+    "@patternfly/react-icons": "npm:6.5.0-prerelease.12"
     "@patternfly/react-log-viewer": "npm:6.3.0"
     "@patternfly/react-topology": "npm:6.5.0-prerelease.3"
     "@patternfly/react-user-feedback": "npm:6.2.0"