diff --git a/packages/demo-app-ts/src/App.tsx b/packages/demo-app-ts/src/App.tsx
index 7ccf218..ab37386 100755
--- a/packages/demo-app-ts/src/App.tsx
+++ b/packages/demo-app-ts/src/App.tsx
@@ -1,28 +1,33 @@
 import React from 'react';
 import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
 import {
-	Page,
-	Nav,
-	NavList,
-	NavItem,
-	PageSection,
-	PageSidebar,
-	Avatar,
-	Brand,
-	Radio,
-	NavExpandable,
-  PageSidebarBody
+  Page,
+  Nav,
+  NavList,
+  NavItem,
+  PageSection,
+  PageSidebar,
+  Avatar,
+  Brand,
+  Radio,
+  Masthead,
+  MastheadMain,
+  MastheadToggle,
+  MastheadBrand,
+  NavExpandable,
+  PageSidebarBody,
+  MastheadContent,
+  PageToggleButton,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem
 } from '@patternfly/react-core';
-import {
-	PageHeader,
-	PageHeaderTools,
-	PageHeaderToolsItem,
-	PageHeaderToolsGroup
-} from '@patternfly/react-core/deprecated';
 import imgBrand from './assets/images/imgBrand.svg';
 import imgAvatar from './assets/images/imgAvatar.svg';
 import Demos from './Demos';
 import './App.css';
+import { BarsIcon } from '@patternfly/react-icons';
 
 interface AppState {
   activeItem: number | string;
@@ -32,18 +37,15 @@ interface AppState {
 
 class App extends React.Component<{}, AppState> {
   state: AppState = {
-    activeItem: Demos.reduce((active, demo) =>
-      active ||
-        (demo.isDefault ?
-          demo.id :
-          demo.demos?.find(subDemo => subDemo.isDefault)?.id
-        ),
-      ''),
+    activeItem: Demos.reduce(
+      (active, demo) => active || (demo.isDefault ? demo.id : demo.demos?.find((subDemo) => subDemo.isDefault)?.id),
+      ''
+    ),
     isNavOpen: true,
     isDarkTheme: false
   };
 
-  private onNavSelect = (_event:any, selectedItem: { itemId: number | string; groupId: number | string }) => {
+  private onNavSelect = (_event: any, selectedItem: { itemId: number | string; groupId: number | string }) => {
     this.setState({ activeItem: selectedItem.itemId });
   };
 
@@ -60,13 +62,10 @@ class App extends React.Component<{}, AppState> {
   };
 
   private getPages = () => {
-    const defaultDemo = Demos.reduce((active, demo) =>
-        active ||
-        (demo.isDefault ?
-            demo :
-            demo.demos?.find(subDemo => subDemo.isDefault)
-        ),
-      undefined)
+    const defaultDemo = Demos.reduce(
+      (active, demo) => active || (demo.isDefault ? demo : demo.demos?.find((subDemo) => subDemo.isDefault)),
+      undefined
+    );
     return (
       <Switch>
         {Demos.reduce((acc, demo) => {
@@ -82,14 +81,14 @@ class App extends React.Component<{}, AppState> {
                   )}
                   key={demo.id}
                 />
-              )
-            })
+              );
+            });
           } else {
             acc.push(
               <Route
                 path={`/${demo.id}-nav-link`}
                 render={() => (
-                  <PageSection style={{zIndex: 2}} id={`/${demo.id}-page-section`}>
+                  <PageSection style={{ zIndex: 2 }} id={`/${demo.id}-page-section`}>
                     {React.createElement(demo.componentType)}
                   </PageSection>
                 )}
@@ -120,41 +119,51 @@ class App extends React.Component<{}, AppState> {
     const { isNavOpen, activeItem, isDarkTheme } = this.state;
 
     const AppToolbar = (
-      <PageHeaderTools>
-        <PageHeaderToolsGroup>
-          <PageHeaderToolsItem style={{ marginRight: '10px' }}>
-            <Radio
-              id="light-theme"
-              aria-label="Light theme"
-              label={`Light theme`}
-              name="light-theme"
-              isChecked={!isDarkTheme}
-              onChange={(_event: any, checked: boolean) => checked && this.onThemeSelect(false)}
-            />
-          </PageHeaderToolsItem>
-          <PageHeaderToolsItem>
-            <Radio
-              id="dark-theme"
-              label="Dark theme"
-              aria-label="Dark theme"
-              name="dark-theme"
-              isChecked={isDarkTheme}
-              onChange={(_event: any, checked: boolean) => checked && this.onThemeSelect(true)}
-            />
-          </PageHeaderToolsItem>
-        </PageHeaderToolsGroup>
-        <Avatar src={imgAvatar} alt="Avatar image" />
-      </PageHeaderTools>
+      <Toolbar id="toolbar" isFullHeight isStatic>
+        <ToolbarContent>
+          <ToolbarGroup align={{ default: 'alignRight' }}>
+            <ToolbarItem style={{ marginRight: '10px' }}>
+              <Radio
+                id="light-theme"
+                aria-label="Light theme"
+                label={`Light theme`}
+                name="light-theme"
+                isChecked={!isDarkTheme}
+                onChange={(_event: any, checked: boolean) => checked && this.onThemeSelect(false)}
+              />
+            </ToolbarItem>
+            <ToolbarItem>
+              <Radio
+                id="dark-theme"
+                label="Dark theme"
+                aria-label="Dark theme"
+                name="dark-theme"
+                isChecked={isDarkTheme}
+                onChange={(_event: any, checked: boolean) => checked && this.onThemeSelect(true)}
+              />
+            </ToolbarItem>
+          </ToolbarGroup>
+          <ToolbarItem>
+            <Avatar src={imgAvatar} alt="Avatar image" />
+          </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
     );
 
     const AppHeader = (
-      <PageHeader logoComponent="a"
-        logo={<Brand src={imgBrand} alt="Patternfly Logo" />}
-        headerTools={AppToolbar}
-        showNavToggle
-        isNavOpen={isNavOpen}
-        onNavToggle={() => this.setState({ isNavOpen: !isNavOpen })}
-      />
+      <Masthead>
+        <MastheadToggle>
+          <PageToggleButton variant="plain" aria-label="Global navigation">
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
+        <MastheadMain>
+          <MastheadBrand>
+            <Brand src={imgBrand} alt="PatternFly" heights={{ default: '36px' }} />
+          </MastheadBrand>
+        </MastheadMain>
+        <MastheadContent>{AppToolbar}</MastheadContent>
+      </Masthead>
     );
 
     const nav = (
@@ -172,7 +181,7 @@ class App extends React.Component<{}, AppState> {
                     </NavItem>
                   ))}
                 </NavExpandable>
-              )
+              );
             }
             return (
               <NavItem itemId={demo.id} isActive={activeItem === demo.id} key={demo.id}>
@@ -194,12 +203,7 @@ class App extends React.Component<{}, AppState> {
 
     return (
       <Router>
-        <Page
-          header={AppHeader}
-          sidebar={AppSidebar}
-          isManagedSidebar
-          mainContainerId={this.pageId}
-        >
+        <Page header={AppHeader} sidebar={AppSidebar} isManagedSidebar mainContainerId={this.pageId}>
           {this.getPages()}
         </Page>
       </Router>
diff --git a/packages/module/patternfly-docs/content/examples/TopologyLayouts.md b/packages/module/patternfly-docs/content/examples/TopologyLayouts.md
index 909fcf3..5149fae 100644
--- a/packages/module/patternfly-docs/content/examples/TopologyLayouts.md
+++ b/packages/module/patternfly-docs/content/examples/TopologyLayouts.md
@@ -36,51 +36,56 @@ import {
 } from '@patternfly/react-topology';
 import { ToolbarItem } from '@patternfly/react-core';
 import {
-	Dropdown as DropdownDeprecated,
-	DropdownItem as DropdownItemDeprecated,
-	DropdownPosition as DropdownPositionDeprecated,
-	DropdownToggle as DropdownToggleDeprecated,
-  Select,
-	SelectOption,
-	SelectVariant
-} from '@patternfly/react-core/deprecated';
+ Dropdown,
+ DropdownItem,
+ DropdownList,
+} from '@patternfly/react-core';
 import Icon1 from '@patternfly/react-icons/dist/esm/icons/regions-icon';
 import Icon2 from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';
 
 import './topology-example.css';
 
 ### Layouts
+
 Layouts will help to position the nodes on the graph in some manner as defined by the chosen layout. There are many algorithms
 for positioning nodes based on many factors (side of nodes, distance between nodes, edges, etc). Patternfy react-topology provides
 some layouts that you can choose to customize your topology graph with:
 
-##### Force:
+##### Force
+
 This layout is built on top of the d3-force layout provided by [d3/d3-force](https://github.com/d3/d3-force).
 
-##### Dagre:
+##### Dagre
+
 This layout is built on top of the dagrejs dagre layout provided by [dagrejs/dagre](https://github.com/dagrejs/dagre).
 
-##### Cola:
+##### Cola
+
 This layout is built on top of the WebCola layout provided by [tgdwyer/WebCola](://github.com/tgdwyer/WebCola). This layout uses `force simulation`
 by default, but can be turned off by setting the options `layoutOnDrag` flag to false.
 
-##### ColaGroups:
+##### ColaGroups
+
 This layout uses the Cola layout recursively on each group such that the group's children locations are set before setting the group's location
 relative to other groups/nodes at its level.
 
-##### Grid:
+##### Grid
+
 This is a basic grid layout. It orders the nodes in a grid making the grid as `square` as possible.
 Grid layout works well to distribute nodes without taking into consideration edges
 
-##### Concentric:
+##### Concentric
+
 Concentric layouts have better results focused on high connectivity. It places the nodes in a circular pattern.
 
-##### BreadthFirst:
+##### BreadthFirst
+
 This layout uses a breadth first algorithm to place the nodes. A BreadthFirst layout may help in these cases, providing
 a natural "levels" approach that can be combined with other algorithms to help users to identify the dependencies between elements.
 
 Note: this first version currently doesn't manage the overflow of a row
 
 ### Examples
+
 ```ts file='./TopologyLayoutsDemo.tsx'
 ```
diff --git a/packages/module/patternfly-docs/content/examples/TopologyLayoutsDemo.tsx b/packages/module/patternfly-docs/content/examples/TopologyLayoutsDemo.tsx
index cec67cd..ed3ca9a 100644
--- a/packages/module/patternfly-docs/content/examples/TopologyLayoutsDemo.tsx
+++ b/packages/module/patternfly-docs/content/examples/TopologyLayoutsDemo.tsx
@@ -1,15 +1,14 @@
 import * as React from 'react';
 import {
-	Split,
-	SplitItem,
-	ToolbarItem
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  MenuToggle,
+  MenuToggleElement,
+  Split,
+  SplitItem,
+  ToolbarItem
 } from '@patternfly/react-core';
-import {
-	Dropdown as DropdownDeprecated,
-	DropdownItem as DropdownItemDeprecated,
-	DropdownPosition as DropdownPositionDeprecated,
-	DropdownToggle as DropdownToggleDeprecated
-} from '@patternfly/react-core/deprecated';
 // eslint-disable-next-line patternfly-react/import-tokens-icons
 import { RegionsIcon as Icon1, FolderOpenIcon as Icon2 } from '@patternfly/react-icons';
 import {
@@ -263,57 +262,61 @@ export const LayoutsDemo: React.FC = () => {
         <label className="pf-v5-u-display-inline-block pf-v5-u-mr-md pf-v5-u-mt-sm">Layout</label>
       </SplitItem>
       <SplitItem>
-        <DropdownDeprecated
-          position={DropdownPositionDeprecated.right}
-          toggle={<DropdownToggleDeprecated onToggle={() => setLayoutDropdownOpen(!layoutDropdownOpen)}>{layout}</DropdownToggleDeprecated>}
+        <Dropdown
+          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+            <MenuToggle ref={toggleRef} onClick={() => setLayoutDropdownOpen(!layoutDropdownOpen)}>
+              {layout}
+            </MenuToggle>
+          )}
           isOpen={layoutDropdownOpen}
-          dropdownItems={[
-            <DropdownItemDeprecated
+        >
+          <DropdownList>
+            <DropdownItem
               key={1}
               onClick={() => {
                 updateLayout('Force');
               }}
             >
               Force
-            </DropdownItemDeprecated>,
-            <DropdownItemDeprecated
+            </DropdownItem>
+            <DropdownItem
               key={2}
               onClick={() => {
                 updateLayout('Dagre');
               }}
             >
               Dagre
-            </DropdownItemDeprecated>,
-            <DropdownItemDeprecated
+            </DropdownItem>
+            <DropdownItem
               key={3}
               onClick={() => {
                 updateLayout('Cola');
               }}
             >
               Cola
-            </DropdownItemDeprecated>,
-            <DropdownItemDeprecated
+            </DropdownItem>
+            <DropdownItem
               key={8}
               onClick={() => {
                 updateLayout('ColaGroups');
               }}
             >
               ColaGroups
-            </DropdownItemDeprecated>,
-            <DropdownItemDeprecated key={4} onClick={() => updateLayout('ColaNoForce')}>
+            </DropdownItem>
+            <DropdownItem key={4} onClick={() => updateLayout('ColaNoForce')}>
               ColaNoForce
-            </DropdownItemDeprecated>,
-            <DropdownItemDeprecated key={5} onClick={() => updateLayout('Grid')}>
+            </DropdownItem>
+            <DropdownItem key={5} onClick={() => updateLayout('Grid')}>
               Grid
-            </DropdownItemDeprecated>,
-            <DropdownItemDeprecated key={6} onClick={() => updateLayout('Concentric')}>
+            </DropdownItem>
+            <DropdownItem key={6} onClick={() => updateLayout('Concentric')}>
               Concentric
-            </DropdownItemDeprecated>,
-            <DropdownItemDeprecated key={7} onClick={() => updateLayout('BreadthFirst')}>
+            </DropdownItem>
+            <DropdownItem key={7} onClick={() => updateLayout('BreadthFirst')}>
               BreadthFirst
-            </DropdownItemDeprecated>
-          ]}
-        />
+            </DropdownItem>
+          </DropdownList>
+        </Dropdown>
       </SplitItem>
     </Split>
   );
diff --git a/packages/module/patternfly-docs/content/examples/TopologyToolbar.md b/packages/module/patternfly-docs/content/examples/TopologyToolbar.md
index f9ac7ab..3bb8715 100644
--- a/packages/module/patternfly-docs/content/examples/TopologyToolbar.md
+++ b/packages/module/patternfly-docs/content/examples/TopologyToolbar.md
@@ -27,12 +27,13 @@ import {
   VisualizationProvider,
   VisualizationSurface
 } from '@patternfly/react-topology';
-import { ToolbarItem } from '@patternfly/react-core';
 import {
-	Select as SelectDeprecated,
-	SelectOption as SelectOptionDeprecated,
-	SelectVariant as SelectVariantDeprecated
-} from '@patternfly/react-core/deprecated';
+  MenuToggle,
+  Select,
+  SelectList,
+  SelectOption,
+  ToolbarItem
+} from '@patternfly/react-core';
 import Icon1 from '@patternfly/react-icons/dist/esm/icons/regions-icon';
 import Icon2 from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';
 
diff --git a/packages/module/patternfly-docs/content/examples/TopologyToolbarDemo.tsx b/packages/module/patternfly-docs/content/examples/TopologyToolbarDemo.tsx
index 4aa27fa..41947d2 100644
--- a/packages/module/patternfly-docs/content/examples/TopologyToolbarDemo.tsx
+++ b/packages/module/patternfly-docs/content/examples/TopologyToolbarDemo.tsx
@@ -1,13 +1,12 @@
 import * as React from 'react';
 import {
-	ToolbarItem
+  MenuToggle,
+  MenuToggleElement,
+  Select,
+  SelectList,
+  SelectOption,
+  ToolbarItem
 } from '@patternfly/react-core';
-import {
-	Select as SelectDeprecated,
-	SelectOption as SelectOptionDeprecated,
-	SelectVariant as SelectVariantDeprecated
-} from '@patternfly/react-core/deprecated';
-// eslint-disable-next-line patternfly-react/import-tokens-icons
 import { RegionsIcon as Icon1, FolderOpenIcon as Icon2 } from '@patternfly/react-icons';
 import {
   ColaLayout,
@@ -187,7 +186,7 @@ interface CustomNodeProps {
 const CustomNode: React.FC<CustomNodeProps> = observer(({ element }) => {
   const data = element.getData();
   const Icon = data.isAlternate ? Icon2 : Icon1;
-  const badgeColors = BadgeColors.find(badgeColor => badgeColor.name === data.badge);
+  const badgeColors = BadgeColors.find((badgeColor) => badgeColor.name === data.badge);
   const { viewOptions } = element.getController().getState<ControllerState>();
 
   return (
@@ -267,39 +266,50 @@ export const ToolbarDemo: React.FC = () => {
 
   const contextToolbar = (
     <ToolbarItem>
-      <SelectDeprecated
-        variant={SelectVariantDeprecated.checkbox}
-        customContent={
-          <div>
-            <SelectOptionDeprecated
-              value="Labels"
-              isChecked={viewOptions.showLabels}
-              onClick={() => setViewOptions(prev => ({ ...prev, showLabels: !prev.showLabels }))}
-            />
-            <SelectOptionDeprecated
-              value="Badges"
-              isDisabled={!viewOptions.showLabels}
-              isChecked={viewOptions.showBadges}
-              onClick={() => setViewOptions(prev => ({ ...prev, showBadges: !prev.showBadges }))}
-            />
-            <SelectOptionDeprecated
-              value="Status background"
-              isChecked={viewOptions.showStatusBackground}
-              onClick={() => setViewOptions(prev => ({ ...prev, showStatusBackground: !prev.showStatusBackground }))}
-            />
-            <SelectOptionDeprecated
-              value="Status decorators"
-              isChecked={viewOptions.showDecorators}
-              onClick={() => setViewOptions(prev => ({ ...prev, showDecorators: !prev.showDecorators }))}
-            />
-          </div>
-        }
-        onToggle={() => setViewOptionsOpen(prev => !prev)}
-        onSelect={() => {}}
-        isCheckboxSelectionBadgeHidden
+      <Select
         isOpen={viewOptionsOpen}
-        placeholderText="Node options"
-      />
+        toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+          <MenuToggle ref={toggleRef} onClick={() => setViewOptionsOpen((prev) => !prev)}>
+            Node Options
+          </MenuToggle>
+        )}
+      >
+        <SelectList>
+          <SelectOption
+            value="Labels"
+            hasCheckbox
+            isSelected={viewOptions.showLabels}
+            onClick={() => setViewOptions((prev) => ({ ...prev, showLabels: !prev.showLabels }))}
+          >
+            Labels
+          </SelectOption>
+          <SelectOption
+            value="Badges"
+            hasCheckbox
+            isDisabled={!viewOptions.showLabels}
+            isSelected={viewOptions.showBadges}
+            onClick={() => setViewOptions((prev) => ({ ...prev, showBadges: !prev.showBadges }))}
+          >
+            Badges
+          </SelectOption>
+          <SelectOption
+            value="Status background"
+            hasCheckbox
+            isSelected={viewOptions.showStatusBackground}
+            onClick={() => setViewOptions((prev) => ({ ...prev, showStatusBackground: !prev.showStatusBackground }))}
+          >
+            Status background
+          </SelectOption>
+          <SelectOption
+            value="Status decorators"
+            hasCheckbox
+            isSelected={viewOptions.showDecorators}
+            onClick={() => setViewOptions((prev) => ({ ...prev, showDecorators: !prev.showDecorators }))}
+          >
+            Status decorators
+          </SelectOption>
+        </SelectList>
+      </Select>
     </ToolbarItem>
   );