diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx
index a40275e9481..916be574367 100644
--- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx
+++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx
@@ -16,6 +16,7 @@ import {
   DrawerContentBody,
   DrawerHead,
   DrawerPanelContent,
+  DrawerSection,
   Dropdown,
   DropdownItem,
   DropdownList,
@@ -618,14 +619,19 @@ export const PrimaryDetailCardView: React.FunctionComponent = () => {
           <p>This is a demo that showcases Patternfly cards.</p>
         </Content>
       </PageSection>
-      <PageSection isFilled padding={{ md: 'padding' }} aria-label="Card filtering toolbar">
-        <Toolbar id="card-view-data-toolbar-group-types" clearAllFilters={onDelete}>
-          <ToolbarContent>{toolbarItems}</ToolbarContent>
-        </Toolbar>
-        <Divider component="div" />
-      </PageSection>
       <PageSection isFilled padding={{ default: 'noPadding' }} aria-label="Card content area">
-        <Drawer isExpanded={isDrawerExpanded} className={'pf-m-inline-on-2xl'}>
+        <Drawer isExpanded={isDrawerExpanded} isInline>
+          <DrawerSection>
+            <Toolbar
+              id="card-view-data-toolbar-group-types"
+              clearAllFilters={onDelete}
+              inset={{ default: 'insetLg' }}
+              style={{ paddingBlockStart: 'var(--pf-t--global--spacer--md)' }}
+            >
+              <ToolbarContent alignItems="center">{toolbarItems}</ToolbarContent>
+            </Toolbar>
+            <Divider component="div" />
+          </DrawerSection>
           <DrawerContent panelContent={panelContent}>
             <DrawerContentBody hasPadding>{drawerContent}</DrawerContentBody>
           </DrawerContent>
diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx
index 825f5841fd8..00aa9c1d466 100644
--- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx
+++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useState } from 'react';
+import { useState } from 'react';
 import {
   Button,
   ButtonVariant,
@@ -23,8 +23,10 @@ import {
   DrawerHead,
   DrawerPanelBody,
   DrawerPanelContent,
+  DrawerSection,
   Flex,
   FlexItem,
+  Icon,
   InputGroup,
   InputGroupItem,
   PageSection,
@@ -99,8 +101,8 @@ export const PrimaryDetailContentPadding: React.FunctionComponent = () => {
     setSelectedDataListItemId('');
   };
 
-  const toggleGroupItems = (
-    <Flex alignItems={{ default: 'alignItemsCenter' }}>
+  const ToolbarItems = (
+    <ToolbarToggleGroup toggleIcon={<RhUiFilterFillIcon />} breakpoint="xl" alignItems="center">
       <ToolbarItem>
         <InputGroup>
           <InputGroupItem isFill>
@@ -122,7 +124,7 @@ export const PrimaryDetailContentPadding: React.FunctionComponent = () => {
           </InputGroupItem>
         </InputGroup>
       </ToolbarItem>
-      <ToolbarGroup variant="filter-group">
+      <ToolbarGroup variant="filter-group" alignItems="center">
         <ToolbarItem>
           <Select
             aria-label="Status select"
@@ -172,12 +174,6 @@ export const PrimaryDetailContentPadding: React.FunctionComponent = () => {
           </Select>
         </ToolbarItem>
       </ToolbarGroup>
-    </Flex>
-  );
-
-  const ToolbarItems = (
-    <ToolbarToggleGroup toggleIcon={<RhUiFilterFillIcon />} breakpoint="xl">
-      {toggleGroupItems}
     </ToolbarToggleGroup>
   );
 
@@ -212,211 +208,224 @@ export const PrimaryDetailContentPadding: React.FunctionComponent = () => {
   );
 
   const drawerContent = (
-    <Fragment>
-      <Toolbar id="content-padding-data-toolbar">
-        <ToolbarContent>{ToolbarItems}</ToolbarContent>
-      </Toolbar>
-      <DataList
-        aria-label="data list"
-        selectedDataListItemId={selectedDataListItemId}
-        onSelectDataListItem={onSelectDataListItem}
-      >
-        <DataListItem id="content-padding-item1">
-          <DataListItemRow>
-            <DataListItemCells
-              dataListCells={[
-                <DataListCell key="primary-content">
-                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+    <DataList
+      aria-label="data list"
+      selectedDataListItemId={selectedDataListItemId}
+      onSelectDataListItem={onSelectDataListItem}
+    >
+      <DataListItem id="content-padding-item1">
+        <DataListItemRow>
+          <DataListItemCells
+            dataListCells={[
+              <DataListCell key="primary-content">
+                <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+                  <FlexItem>
+                    <p>patternfly</p>
+                    <small>
+                      Working repo for PatternFly 5 <a>https://pf5.patternfly.org/</a>
+                    </small>
+                  </FlexItem>
+                  <Flex spaceItems={{ default: 'spaceItemsMd' }}>
+                    <FlexItem>
+                      <RhUiBranchFillIcon /> 10
+                    </FlexItem>
+                    <FlexItem>
+                      <RhUiCodeIcon /> 4
+                    </FlexItem>
                     <FlexItem>
-                      <p>patternfly</p>
-                      <small>
-                        Working repo for PatternFly 5 <a>https://pf5.patternfly.org/</a>
-                      </small>
+                      <CubeIcon /> 5
                     </FlexItem>
-                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>
-                      <FlexItem>
-                        <RhUiBranchFillIcon /> 10
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiCodeIcon /> 4
-                      </FlexItem>
-                      <FlexItem>
-                        <CubeIcon /> 5
-                      </FlexItem>
-                      <FlexItem>Updated 2 days ago</FlexItem>
-                    </Flex>
+                    <FlexItem>Updated 2 days ago</FlexItem>
                   </Flex>
-                </DataListCell>,
-                <DataListAction
-                  key="actions"
-                  aria-labelledby="content-padding-item1 content-padding-action1"
-                  id="content-padding-action1"
-                  aria-label="Actions"
-                >
-                  <Stack>
-                    <StackItem>
-                      <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                    </StackItem>
-                    <StackItem>
-                      <Button variant={ButtonVariant.link}>Link Button</Button>
-                    </StackItem>
-                  </Stack>
-                </DataListAction>
-              ]}
-            />
-          </DataListItemRow>
-        </DataListItem>
-        <DataListItem id="content-padding-item2">
-          <DataListItemRow>
-            <DataListItemCells
-              dataListCells={[
-                <DataListCell key="primary-content">
-                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+                </Flex>
+              </DataListCell>,
+              <DataListAction
+                key="actions"
+                aria-labelledby="content-padding-item1 content-padding-action1"
+                id="content-padding-action1"
+                aria-label="Actions"
+              >
+                <Stack>
+                  <StackItem>
+                    <Button variant={ButtonVariant.secondary}>Secondary</Button>
+                  </StackItem>
+                  <StackItem>
+                    <Button variant={ButtonVariant.link}>Link Button</Button>
+                  </StackItem>
+                </Stack>
+              </DataListAction>
+            ]}
+          />
+        </DataListItemRow>
+      </DataListItem>
+      <DataListItem id="content-padding-item2">
+        <DataListItemRow>
+          <DataListItemCells
+            dataListCells={[
+              <DataListCell key="primary-content">
+                <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+                  <FlexItem>
+                    <p>patternfly-elements</p>
+                    <small>PatternFly elements</small>
+                  </FlexItem>
+                  <Flex spaceItems={{ default: 'spaceItemsMd' }}>
+                    <FlexItem>
+                      <RhUiBranchFillIcon /> 10
+                    </FlexItem>
+                    <FlexItem>
+                      <RhUiCodeIcon /> 4
+                    </FlexItem>
+                    <FlexItem>
+                      <CubeIcon /> 5
+                    </FlexItem>
+                    <FlexItem>
+                      <Icon status="success">
+                        <RhUiCheckCircleFillIcon />
+                      </Icon>{' '}
+                      7
+                    </FlexItem>
+                    <FlexItem>
+                      <Icon status="warning">
+                        <RhUiWarningFillIcon />
+                      </Icon>{' '}
+                      5
+                    </FlexItem>
                     <FlexItem>
-                      <p>patternfly-elements</p>
-                      <small>PatternFly elements</small>
+                      <Icon status="danger">
+                        <RhUiCloseCircleFillIcon />
+                      </Icon>{' '}
+                      5
                     </FlexItem>
-                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>
-                      <FlexItem>
-                        <RhUiBranchFillIcon /> 10
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiCodeIcon /> 4
-                      </FlexItem>
-                      <FlexItem>
-                        <CubeIcon /> 5
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiCheckCircleFillIcon /> 7
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiWarningFillIcon /> 5
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiCloseCircleFillIcon /> 5
-                      </FlexItem>
-                      <FlexItem>Updated 2 days ago</FlexItem>
-                    </Flex>
+                    <FlexItem>Updated 2 days ago</FlexItem>
                   </Flex>
-                </DataListCell>,
-                <DataListAction
-                  key="actions"
-                  aria-labelledby="content-padding-item2 content-padding-action2"
-                  id="content-padding-action2"
-                  aria-label="Actions"
-                >
-                  <Stack>
-                    <StackItem>
-                      <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                    </StackItem>
-                    <StackItem>
-                      <Button variant={ButtonVariant.link}>Link Button</Button>
-                    </StackItem>
-                  </Stack>
-                </DataListAction>
-              ]}
-            />
-          </DataListItemRow>
-        </DataListItem>
-        <DataListItem id="content-padding-item3">
-          <DataListItemRow>
-            <DataListItemCells
-              dataListCells={[
-                <DataListCell key="primary-content">
-                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+                </Flex>
+              </DataListCell>,
+              <DataListAction
+                key="actions"
+                aria-labelledby="content-padding-item2 content-padding-action2"
+                id="content-padding-action2"
+                aria-label="Actions"
+              >
+                <Stack>
+                  <StackItem>
+                    <Button variant={ButtonVariant.secondary}>Secondary</Button>
+                  </StackItem>
+                  <StackItem>
+                    <Button variant={ButtonVariant.link}>Link Button</Button>
+                  </StackItem>
+                </Stack>
+              </DataListAction>
+            ]}
+          />
+        </DataListItemRow>
+      </DataListItem>
+      <DataListItem id="content-padding-item3">
+        <DataListItemRow>
+          <DataListItemCells
+            dataListCells={[
+              <DataListCell key="primary-content">
+                <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+                  <FlexItem>
+                    <p>patternfly</p>
+                    <small>
+                      Working repo for PatternFly 5 <a>https://pf5.patternfly.org/</a>
+                    </small>
+                  </FlexItem>
+                  <Flex spaceItems={{ default: 'spaceItemsMd' }}>
+                    <FlexItem>
+                      <RhUiBranchFillIcon /> 10
+                    </FlexItem>
+                    <FlexItem>
+                      <RhUiCodeIcon /> 4
+                    </FlexItem>
                     <FlexItem>
-                      <p>patternfly</p>
-                      <small>
-                        Working repo for PatternFly 5 <a>https://pf5.patternfly.org/</a>
-                      </small>
+                      <CubeIcon /> 5
                     </FlexItem>
-                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>
-                      <FlexItem>
-                        <RhUiBranchFillIcon /> 10
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiCodeIcon /> 4
-                      </FlexItem>
-                      <FlexItem>
-                        <CubeIcon /> 5
-                      </FlexItem>
-                      <FlexItem>Updated 2 days ago</FlexItem>
-                    </Flex>
+                    <FlexItem>Updated 2 days ago</FlexItem>
                   </Flex>
-                </DataListCell>,
-                <DataListAction
-                  key="actions"
-                  aria-labelledby="content-padding-item3 content-padding-action3"
-                  id="content-padding-action3"
-                  aria-label="Actions"
-                >
-                  <Stack>
-                    <StackItem>
-                      <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                    </StackItem>
-                    <StackItem>
-                      <Button variant={ButtonVariant.link}>Link Button</Button>
-                    </StackItem>
-                  </Stack>
-                </DataListAction>
-              ]}
-            />
-          </DataListItemRow>
-        </DataListItem>
-        <DataListItem id="content-padding-item4">
-          <DataListItemRow>
-            <DataListItemCells
-              dataListCells={[
-                <DataListCell key="primary-content">
-                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+                </Flex>
+              </DataListCell>,
+              <DataListAction
+                key="actions"
+                aria-labelledby="content-padding-item3 content-padding-action3"
+                id="content-padding-action3"
+                aria-label="Actions"
+              >
+                <Stack>
+                  <StackItem>
+                    <Button variant={ButtonVariant.secondary}>Secondary</Button>
+                  </StackItem>
+                  <StackItem>
+                    <Button variant={ButtonVariant.link}>Link Button</Button>
+                  </StackItem>
+                </Stack>
+              </DataListAction>
+            ]}
+          />
+        </DataListItemRow>
+      </DataListItem>
+      <DataListItem id="content-padding-item4">
+        <DataListItemRow>
+          <DataListItemCells
+            dataListCells={[
+              <DataListCell key="primary-content">
+                <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+                  <FlexItem>
+                    <p>patternfly-elements</p>
+                    <small>PatternFly elements</small>
+                  </FlexItem>
+                  <Flex spaceItems={{ default: 'spaceItemsMd' }}>
+                    <FlexItem>
+                      <RhUiBranchFillIcon /> 10
+                    </FlexItem>
                     <FlexItem>
-                      <p>patternfly-elements</p>
-                      <small>PatternFly elements</small>
+                      <RhUiCodeIcon /> 4
                     </FlexItem>
-                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>
-                      <FlexItem>
-                        <RhUiBranchFillIcon /> 10
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiCodeIcon /> 4
-                      </FlexItem>
-                      <FlexItem>
-                        <CubeIcon /> 5
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiCheckCircleFillIcon /> 7
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiWarningFillIcon /> 5
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiCloseCircleFillIcon /> 5
-                      </FlexItem>
-                      <FlexItem>Updated 2 days ago</FlexItem>
-                    </Flex>
+                    <FlexItem>
+                      <CubeIcon /> 5
+                    </FlexItem>
+                    <FlexItem>
+                      <Icon status="success">
+                        <RhUiCheckCircleFillIcon />
+                      </Icon>{' '}
+                      7
+                    </FlexItem>
+                    <FlexItem>
+                      <Icon status="warning">
+                        <RhUiWarningFillIcon />
+                      </Icon>{' '}
+                      5
+                    </FlexItem>
+                    <FlexItem>
+                      <Icon status="danger">
+                        <RhUiCloseCircleFillIcon />
+                      </Icon>{' '}
+                      5
+                    </FlexItem>
+                    <FlexItem>Updated 2 days ago</FlexItem>
                   </Flex>
-                </DataListCell>,
-                <DataListAction
-                  key="actions"
-                  aria-labelledby="content-padding-item4 content-padding-action4"
-                  id="content-padding-action4"
-                  aria-label="Actions"
-                >
-                  <Stack>
-                    <StackItem>
-                      <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                    </StackItem>
-                    <StackItem>
-                      <Button variant={ButtonVariant.link}>Link Button</Button>
-                    </StackItem>
-                  </Stack>
-                </DataListAction>
-              ]}
-            />
-          </DataListItemRow>
-        </DataListItem>
-      </DataList>
-    </Fragment>
+                </Flex>
+              </DataListCell>,
+              <DataListAction
+                key="actions"
+                aria-labelledby="content-padding-item4 content-padding-action4"
+                id="content-padding-action4"
+                aria-label="Actions"
+              >
+                <Stack>
+                  <StackItem>
+                    <Button variant={ButtonVariant.secondary}>Secondary</Button>
+                  </StackItem>
+                  <StackItem>
+                    <Button variant={ButtonVariant.link}>Link Button</Button>
+                  </StackItem>
+                </Stack>
+              </DataListAction>
+            ]}
+          />
+        </DataListItemRow>
+      </DataListItem>
+    </DataList>
   );
 
   return (
@@ -433,6 +442,16 @@ export const PrimaryDetailContentPadding: React.FunctionComponent = () => {
       <Divider component="div" />
       <PageSection padding={{ default: 'noPadding' }} aria-label="Drawer content section">
         <Drawer isExpanded={isDrawerExpanded}>
+          <DrawerSection>
+            <Toolbar
+              id="content-padding-data-toolbar"
+              inset={{ default: 'insetLg' }}
+              style={{ paddingBlockStart: 'var(--pf-t--global--spacer--md)' }}
+            >
+              <ToolbarContent alignItems="center">{ToolbarItems}</ToolbarContent>
+            </Toolbar>
+            <Divider component="div" />
+          </DrawerSection>
           <DrawerContent panelContent={panelContent}>
             <DrawerContentBody hasPadding>{drawerContent}</DrawerContentBody>
           </DrawerContent>
diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx
index f578d16d15d..e86594f6ce9 100644
--- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx
+++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useState } from 'react';
+import { useState } from 'react';
 import {
   Card,
   Content,
@@ -19,6 +19,7 @@ import {
   DrawerHead,
   DrawerPanelBody,
   DrawerPanelContent,
+  DrawerSection,
   Dropdown,
   DropdownItem,
   DropdownList,
@@ -88,95 +89,72 @@ export const PrimaryDetailDataListInCard: React.FunctionComponent = () => {
   );
 
   const drawerContent = (
-    <Fragment>
-      <Toolbar id="data-list-data-toolbar">
-        <ToolbarContent>
-          <ToolbarItem>
-            <Dropdown
-              onSelect={onDropdownSelect}
-              isOpen={isDropdownOpen}
-              onOpenChange={(isOpen) => setIsDropdownOpen(isOpen)}
-              toggle={(toggleRef) => (
-                <MenuToggle ref={toggleRef} isExpanded={isDropdownOpen} onClick={onDropdownToggle}>
-                  Dropdown
-                </MenuToggle>
-              )}
-            >
-              <DropdownList>
-                <DropdownItem key="option1">Option 1</DropdownItem>
-                <DropdownItem key="option2">Option 2</DropdownItem>
-              </DropdownList>
-            </Dropdown>
-          </ToolbarItem>
-        </ToolbarContent>
-      </Toolbar>
-      <DataList
-        aria-label="selectable data list example"
-        selectedDataListItemId={selectedDataListItemId}
-        onSelectDataListItem={onSelectDataListItem}
-      >
-        <DataListItem aria-label="data-list-item1-in-card" id="data-list-item1">
-          <DataListItemRow>
-            <DataListItemCells
-              dataListCells={[
-                <DataListCell key="node 1">
-                  <div>Node 1</div>
-                  <a href="#">siemur/test-space</a>
-                </DataListCell>
-              ]}
-            />
-          </DataListItemRow>
-        </DataListItem>
-        <DataListItem aria-label="data-list-item2-in-card" id="data-list-item2">
-          <DataListItemRow>
-            <DataListItemCells
-              dataListCells={[
-                <DataListCell key="node 2">
-                  <div>Node 2</div>
-                  <a href="#">siemur/test-space</a>
-                </DataListCell>
-              ]}
-            />
-          </DataListItemRow>
-        </DataListItem>
-        <DataListItem aria-label="data-list-item3-in-card" id="data-list-item3">
-          <DataListItemRow>
-            <DataListItemCells
-              dataListCells={[
-                <DataListCell key="node 3">
-                  <div>Node 3</div>
-                  <a href="#">siemur/test-space</a>
-                </DataListCell>
-              ]}
-            />
-          </DataListItemRow>
-        </DataListItem>
-        <DataListItem aria-label="data-list-item4-in-card" id="data-list-item4">
-          <DataListItemRow>
-            <DataListItemCells
-              dataListCells={[
-                <DataListCell key="node 4">
-                  <div>Node 4</div>
-                  <a href="#">siemur/test-space</a>
-                </DataListCell>
-              ]}
-            />
-          </DataListItemRow>
-        </DataListItem>
-        <DataListItem aria-label="data-list-item5-in-card" id="data-list-item5">
-          <DataListItemRow>
-            <DataListItemCells
-              dataListCells={[
-                <DataListCell key="node 5">
-                  <div>Node 5</div>
-                  <a href="#">siemur/test-space</a>
-                </DataListCell>
-              ]}
-            />
-          </DataListItemRow>
-        </DataListItem>
-      </DataList>
-    </Fragment>
+    <DataList
+      aria-label="selectable data list example"
+      selectedDataListItemId={selectedDataListItemId}
+      onSelectDataListItem={onSelectDataListItem}
+    >
+      <DataListItem aria-label="data-list-item1-in-card" id="data-list-item1">
+        <DataListItemRow>
+          <DataListItemCells
+            dataListCells={[
+              <DataListCell key="node 1">
+                <div>Node 1</div>
+                <a href="#">siemur/test-space</a>
+              </DataListCell>
+            ]}
+          />
+        </DataListItemRow>
+      </DataListItem>
+      <DataListItem aria-label="data-list-item2-in-card" id="data-list-item2">
+        <DataListItemRow>
+          <DataListItemCells
+            dataListCells={[
+              <DataListCell key="node 2">
+                <div>Node 2</div>
+                <a href="#">siemur/test-space</a>
+              </DataListCell>
+            ]}
+          />
+        </DataListItemRow>
+      </DataListItem>
+      <DataListItem aria-label="data-list-item3-in-card" id="data-list-item3">
+        <DataListItemRow>
+          <DataListItemCells
+            dataListCells={[
+              <DataListCell key="node 3">
+                <div>Node 3</div>
+                <a href="#">siemur/test-space</a>
+              </DataListCell>
+            ]}
+          />
+        </DataListItemRow>
+      </DataListItem>
+      <DataListItem aria-label="data-list-item4-in-card" id="data-list-item4">
+        <DataListItemRow>
+          <DataListItemCells
+            dataListCells={[
+              <DataListCell key="node 4">
+                <div>Node 4</div>
+                <a href="#">siemur/test-space</a>
+              </DataListCell>
+            ]}
+          />
+        </DataListItemRow>
+      </DataListItem>
+      <DataListItem aria-label="data-list-item5-in-card" id="data-list-item5">
+        <DataListItemRow>
+          <DataListItemCells
+            dataListCells={[
+              <DataListCell key="node 5">
+                <div>Node 5</div>
+                <a href="#">siemur/test-space</a>
+              </DataListCell>
+            ]}
+          />
+        </DataListItemRow>
+      </DataListItem>
+    </DataList>
   );
 
   return (
@@ -193,7 +171,35 @@ export const PrimaryDetailDataListInCard: React.FunctionComponent = () => {
       <Divider component="div" />
       <PageSection aria-label="Card with drawer content">
         <Card>
-          <Drawer isStatic isExpanded={isExpanded}>
+          <Drawer isInline isExpanded={isExpanded}>
+            <DrawerSection>
+              <Toolbar
+                id="data-list-data-toolbar"
+                inset={{ default: 'insetMd' }}
+                style={{ paddingBlockStart: 'var(--pf-t--global--spacer--md)' }}
+              >
+                <ToolbarContent alignItems="center">
+                  <ToolbarItem>
+                    <Dropdown
+                      onSelect={onDropdownSelect}
+                      isOpen={isDropdownOpen}
+                      onOpenChange={(isOpen) => setIsDropdownOpen(isOpen)}
+                      toggle={(toggleRef) => (
+                        <MenuToggle ref={toggleRef} isExpanded={isDropdownOpen} onClick={onDropdownToggle}>
+                          Dropdown
+                        </MenuToggle>
+                      )}
+                    >
+                      <DropdownList>
+                        <DropdownItem key="option1">Option 1</DropdownItem>
+                        <DropdownItem key="option2">Option 2</DropdownItem>
+                      </DropdownList>
+                    </Dropdown>
+                  </ToolbarItem>
+                </ToolbarContent>
+              </Toolbar>
+              <Divider component="div" />
+            </DrawerSection>
             <DrawerContent panelContent={panelContent}>
               <DrawerContentBody>{drawerContent}</DrawerContentBody>
             </DrawerContent>
diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx
index f16e350b27f..7054661f506 100644
--- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx
+++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useState } from 'react';
+import { useState } from 'react';
 import {
   Button,
   ButtonVariant,
@@ -23,8 +23,10 @@ import {
   DrawerHead,
   DrawerPanelBody,
   DrawerPanelContent,
+  DrawerSection,
   Flex,
   FlexItem,
+  Icon,
   InputGroup,
   InputGroupItem,
   PageSection,
@@ -99,8 +101,8 @@ export const PrimaryDetailFullPage: React.FunctionComponent = () => {
     setSelectedDataListItemId('');
   };
 
-  const toggleGroupItems = (
-    <Flex alignItems={{ default: 'alignItemsCenter' }}>
+  const ToolbarItems = (
+    <ToolbarToggleGroup toggleIcon={<RhUiFilterFillIcon />} breakpoint="xl" alignItems="center">
       <ToolbarItem>
         <InputGroup>
           <InputGroupItem isFill>
@@ -122,7 +124,7 @@ export const PrimaryDetailFullPage: React.FunctionComponent = () => {
           </InputGroupItem>
         </InputGroup>
       </ToolbarItem>
-      <ToolbarGroup variant="filter-group">
+      <ToolbarGroup variant="filter-group" alignItems="center">
         <ToolbarItem>
           <Select
             aria-label="Status select"
@@ -172,12 +174,6 @@ export const PrimaryDetailFullPage: React.FunctionComponent = () => {
           </Select>
         </ToolbarItem>
       </ToolbarGroup>
-    </Flex>
-  );
-
-  const ToolbarItems = (
-    <ToolbarToggleGroup toggleIcon={<RhUiFilterFillIcon />} breakpoint="xl">
-      {toggleGroupItems}
     </ToolbarToggleGroup>
   );
 
@@ -212,211 +208,224 @@ export const PrimaryDetailFullPage: React.FunctionComponent = () => {
   );
 
   const drawerContent = (
-    <Fragment>
-      <Toolbar id="full-page-data-toolbar">
-        <ToolbarContent>{ToolbarItems}</ToolbarContent>
-      </Toolbar>
-      <DataList
-        aria-label="data list"
-        selectedDataListItemId={selectedDataListItemId}
-        onSelectDataListItem={onSelectDataListItem}
-      >
-        <DataListItem id="full-page-item1">
-          <DataListItemRow>
-            <DataListItemCells
-              dataListCells={[
-                <DataListCell key="primary-content">
-                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+    <DataList
+      aria-label="data list"
+      selectedDataListItemId={selectedDataListItemId}
+      onSelectDataListItem={onSelectDataListItem}
+    >
+      <DataListItem id="full-page-item1">
+        <DataListItemRow>
+          <DataListItemCells
+            dataListCells={[
+              <DataListCell key="primary-content">
+                <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+                  <FlexItem>
+                    <p>patternfly</p>
+                    <small>
+                      Working repo for PatternFly 5 <a>https://pf5.patternfly.org/</a>
+                    </small>
+                  </FlexItem>
+                  <Flex spaceItems={{ default: 'spaceItemsMd' }}>
+                    <FlexItem>
+                      <RhUiBranchFillIcon /> 10
+                    </FlexItem>
+                    <FlexItem>
+                      <RhUiCodeIcon /> 4
+                    </FlexItem>
                     <FlexItem>
-                      <p>patternfly</p>
-                      <small>
-                        Working repo for PatternFly 5 <a>https://pf5.patternfly.org/</a>
-                      </small>
+                      <CubeIcon /> 5
                     </FlexItem>
-                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>
-                      <FlexItem>
-                        <RhUiBranchFillIcon /> 10
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiCodeIcon /> 4
-                      </FlexItem>
-                      <FlexItem>
-                        <CubeIcon /> 5
-                      </FlexItem>
-                      <FlexItem>Updated 2 days ago</FlexItem>
-                    </Flex>
+                    <FlexItem>Updated 2 days ago</FlexItem>
                   </Flex>
-                </DataListCell>,
-                <DataListAction
-                  key="actions"
-                  aria-labelledby="full-page-item1 full-page-action1"
-                  id="full-page-action1"
-                  aria-label="Actions"
-                >
-                  <Stack>
-                    <StackItem>
-                      <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                    </StackItem>
-                    <StackItem>
-                      <Button variant={ButtonVariant.link}>Link Button</Button>
-                    </StackItem>
-                  </Stack>
-                </DataListAction>
-              ]}
-            />
-          </DataListItemRow>
-        </DataListItem>
-        <DataListItem id="full-page-item2">
-          <DataListItemRow>
-            <DataListItemCells
-              dataListCells={[
-                <DataListCell key="primary-content">
-                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+                </Flex>
+              </DataListCell>,
+              <DataListAction
+                key="actions"
+                aria-labelledby="full-page-item1 full-page-action1"
+                id="full-page-action1"
+                aria-label="Actions"
+              >
+                <Stack>
+                  <StackItem>
+                    <Button variant={ButtonVariant.secondary}>Secondary</Button>
+                  </StackItem>
+                  <StackItem>
+                    <Button variant={ButtonVariant.link}>Link Button</Button>
+                  </StackItem>
+                </Stack>
+              </DataListAction>
+            ]}
+          />
+        </DataListItemRow>
+      </DataListItem>
+      <DataListItem id="full-page-item2">
+        <DataListItemRow>
+          <DataListItemCells
+            dataListCells={[
+              <DataListCell key="primary-content">
+                <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+                  <FlexItem>
+                    <p>patternfly-elements</p>
+                    <small>PatternFly elements</small>
+                  </FlexItem>
+                  <Flex spaceItems={{ default: 'spaceItemsMd' }}>
+                    <FlexItem>
+                      <RhUiBranchFillIcon /> 10
+                    </FlexItem>
+                    <FlexItem>
+                      <RhUiCodeIcon /> 4
+                    </FlexItem>
+                    <FlexItem>
+                      <CubeIcon /> 5
+                    </FlexItem>
+                    <FlexItem>
+                      <Icon status="success">
+                        <RhUiCheckCircleFillIcon />
+                      </Icon>{' '}
+                      7
+                    </FlexItem>
+                    <FlexItem>
+                      <Icon status="warning">
+                        <RhUiWarningFillIcon />
+                      </Icon>{' '}
+                      5
+                    </FlexItem>
                     <FlexItem>
-                      <p>patternfly-elements</p>
-                      <small>PatternFly elements</small>
+                      <Icon status="danger">
+                        <RhUiCloseCircleFillIcon />
+                      </Icon>{' '}
+                      5
                     </FlexItem>
-                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>
-                      <FlexItem>
-                        <RhUiBranchFillIcon /> 10
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiCodeIcon /> 4
-                      </FlexItem>
-                      <FlexItem>
-                        <CubeIcon /> 5
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiCheckCircleFillIcon /> 7
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiWarningFillIcon /> 5
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiCloseCircleFillIcon /> 5
-                      </FlexItem>
-                      <FlexItem>Updated 2 days ago</FlexItem>
-                    </Flex>
+                    <FlexItem>Updated 2 days ago</FlexItem>
                   </Flex>
-                </DataListCell>,
-                <DataListAction
-                  key="actions"
-                  aria-labelledby="full-page-item2 full-page-action2"
-                  id="full-page-action2"
-                  aria-label="Actions"
-                >
-                  <Stack>
-                    <StackItem>
-                      <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                    </StackItem>
-                    <StackItem>
-                      <Button variant={ButtonVariant.link}>Link Button</Button>
-                    </StackItem>
-                  </Stack>
-                </DataListAction>
-              ]}
-            />
-          </DataListItemRow>
-        </DataListItem>
-        <DataListItem id="full-page-item3">
-          <DataListItemRow>
-            <DataListItemCells
-              dataListCells={[
-                <DataListCell key="primary-content">
-                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+                </Flex>
+              </DataListCell>,
+              <DataListAction
+                key="actions"
+                aria-labelledby="full-page-item2 full-page-action2"
+                id="full-page-action2"
+                aria-label="Actions"
+              >
+                <Stack>
+                  <StackItem>
+                    <Button variant={ButtonVariant.secondary}>Secondary</Button>
+                  </StackItem>
+                  <StackItem>
+                    <Button variant={ButtonVariant.link}>Link Button</Button>
+                  </StackItem>
+                </Stack>
+              </DataListAction>
+            ]}
+          />
+        </DataListItemRow>
+      </DataListItem>
+      <DataListItem id="full-page-item3">
+        <DataListItemRow>
+          <DataListItemCells
+            dataListCells={[
+              <DataListCell key="primary-content">
+                <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+                  <FlexItem>
+                    <p>patternfly</p>
+                    <small>
+                      Working repo for PatternFly 5 <a>https://pf5.patternfly.org/</a>
+                    </small>
+                  </FlexItem>
+                  <Flex spaceItems={{ default: 'spaceItemsMd' }}>
+                    <FlexItem>
+                      <RhUiBranchFillIcon /> 10
+                    </FlexItem>
+                    <FlexItem>
+                      <RhUiCodeIcon /> 4
+                    </FlexItem>
                     <FlexItem>
-                      <p>patternfly</p>
-                      <small>
-                        Working repo for PatternFly 5 <a>https://pf5.patternfly.org/</a>
-                      </small>
+                      <CubeIcon /> 5
                     </FlexItem>
-                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>
-                      <FlexItem>
-                        <RhUiBranchFillIcon /> 10
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiCodeIcon /> 4
-                      </FlexItem>
-                      <FlexItem>
-                        <CubeIcon /> 5
-                      </FlexItem>
-                      <FlexItem>Updated 2 days ago</FlexItem>
-                    </Flex>
+                    <FlexItem>Updated 2 days ago</FlexItem>
                   </Flex>
-                </DataListCell>,
-                <DataListAction
-                  key="actions"
-                  aria-labelledby="full-page-item3 full-page-action3"
-                  id="full-page-action3"
-                  aria-label="Actions"
-                >
-                  <Stack>
-                    <StackItem>
-                      <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                    </StackItem>
-                    <StackItem>
-                      <Button variant={ButtonVariant.link}>Link Button</Button>
-                    </StackItem>
-                  </Stack>
-                </DataListAction>
-              ]}
-            />
-          </DataListItemRow>
-        </DataListItem>
-        <DataListItem id="full-page-item4">
-          <DataListItemRow>
-            <DataListItemCells
-              dataListCells={[
-                <DataListCell key="primary-content">
-                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+                </Flex>
+              </DataListCell>,
+              <DataListAction
+                key="actions"
+                aria-labelledby="full-page-item3 full-page-action3"
+                id="full-page-action3"
+                aria-label="Actions"
+              >
+                <Stack>
+                  <StackItem>
+                    <Button variant={ButtonVariant.secondary}>Secondary</Button>
+                  </StackItem>
+                  <StackItem>
+                    <Button variant={ButtonVariant.link}>Link Button</Button>
+                  </StackItem>
+                </Stack>
+              </DataListAction>
+            ]}
+          />
+        </DataListItemRow>
+      </DataListItem>
+      <DataListItem id="full-page-item4">
+        <DataListItemRow>
+          <DataListItemCells
+            dataListCells={[
+              <DataListCell key="primary-content">
+                <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+                  <FlexItem>
+                    <p>patternfly-elements</p>
+                    <small>PatternFly elements</small>
+                  </FlexItem>
+                  <Flex spaceItems={{ default: 'spaceItemsMd' }}>
+                    <FlexItem>
+                      <RhUiBranchFillIcon /> 10
+                    </FlexItem>
                     <FlexItem>
-                      <p>patternfly-elements</p>
-                      <small>PatternFly elements</small>
+                      <RhUiCodeIcon /> 4
                     </FlexItem>
-                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>
-                      <FlexItem>
-                        <RhUiBranchFillIcon /> 10
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiCodeIcon /> 4
-                      </FlexItem>
-                      <FlexItem>
-                        <CubeIcon /> 5
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiCheckCircleFillIcon /> 7
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiWarningFillIcon /> 5
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiCloseCircleFillIcon /> 5
-                      </FlexItem>
-                      <FlexItem>Updated 2 days ago</FlexItem>
-                    </Flex>
+                    <FlexItem>
+                      <CubeIcon /> 5
+                    </FlexItem>
+                    <FlexItem>
+                      <Icon status="success">
+                        <RhUiCheckCircleFillIcon />
+                      </Icon>{' '}
+                      7
+                    </FlexItem>
+                    <FlexItem>
+                      <Icon status="warning">
+                        <RhUiWarningFillIcon />
+                      </Icon>{' '}
+                      5
+                    </FlexItem>
+                    <FlexItem>
+                      <Icon status="danger">
+                        <RhUiCloseCircleFillIcon />
+                      </Icon>{' '}
+                      5
+                    </FlexItem>
+                    <FlexItem>Updated 2 days ago</FlexItem>
                   </Flex>
-                </DataListCell>,
-                <DataListAction
-                  key="actions"
-                  aria-labelledby="full-page-item4 full-page-action4"
-                  id="full-page-action4"
-                  aria-label="Actions"
-                >
-                  <Stack>
-                    <StackItem>
-                      <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                    </StackItem>
-                    <StackItem>
-                      <Button variant={ButtonVariant.link}>Link Button</Button>
-                    </StackItem>
-                  </Stack>
-                </DataListAction>
-              ]}
-            />
-          </DataListItemRow>
-        </DataListItem>
-      </DataList>
-    </Fragment>
+                </Flex>
+              </DataListCell>,
+              <DataListAction
+                key="actions"
+                aria-labelledby="full-page-item4 full-page-action4"
+                id="full-page-action4"
+                aria-label="Actions"
+              >
+                <Stack>
+                  <StackItem>
+                    <Button variant={ButtonVariant.secondary}>Secondary</Button>
+                  </StackItem>
+                  <StackItem>
+                    <Button variant={ButtonVariant.link}>Link Button</Button>
+                  </StackItem>
+                </Stack>
+              </DataListAction>
+            ]}
+          />
+        </DataListItemRow>
+      </DataListItem>
+    </DataList>
   );
 
   return (
@@ -433,6 +442,16 @@ export const PrimaryDetailFullPage: React.FunctionComponent = () => {
       <Divider component="div" />
       <PageSection padding={{ default: 'noPadding' }} aria-label="Card with drawer content">
         <Drawer isExpanded={isDrawerExpanded}>
+          <DrawerSection>
+            <Toolbar
+              id="full-page-data-toolbar"
+              inset={{ default: 'insetLg' }}
+              style={{ paddingBlockStart: 'var(--pf-t--global--spacer--md)' }}
+            >
+              <ToolbarContent alignItems="center">{ToolbarItems}</ToolbarContent>
+            </Toolbar>
+            <Divider component="div" />
+          </DrawerSection>
           <DrawerContent panelContent={panelContent}>
             <DrawerContentBody>{drawerContent}</DrawerContentBody>
           </DrawerContent>
diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx
index 3a27fe17568..354a0c519ed 100644
--- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx
+++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useState } from 'react';
+import { useState } from 'react';
 import {
   Button,
   ButtonVariant,
@@ -23,8 +23,10 @@ import {
   DrawerHead,
   DrawerPanelBody,
   DrawerPanelContent,
+  DrawerSection,
   Flex,
   FlexItem,
+  Icon,
   InputGroup,
   InputGroupItem,
   PageSection,
@@ -98,8 +100,8 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => {
     setSelectedDataListItemId('');
   };
 
-  const toggleGroupItems = (
-    <Flex alignItems={{ default: 'alignItemsCenter' }}>
+  const ToolbarItems = (
+    <ToolbarToggleGroup toggleIcon={<RhUiFilterFillIcon />} breakpoint="xl" alignItems="center">
       <ToolbarItem>
         <InputGroup>
           <InputGroupItem isFill>
@@ -121,7 +123,7 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => {
           </InputGroupItem>
         </InputGroup>
       </ToolbarItem>
-      <ToolbarGroup variant="filter-group">
+      <ToolbarGroup variant="filter-group" alignItems="center">
         <ToolbarItem>
           <Select
             aria-label="Status select"
@@ -171,12 +173,6 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => {
           </Select>
         </ToolbarItem>
       </ToolbarGroup>
-    </Flex>
-  );
-
-  const ToolbarItems = (
-    <ToolbarToggleGroup toggleIcon={<RhUiFilterFillIcon />} breakpoint="xl">
-      {toggleGroupItems}
     </ToolbarToggleGroup>
   );
 
@@ -211,211 +207,224 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => {
   );
 
   const drawerContent = (
-    <Fragment>
-      <Toolbar id="inline-modifier-data-toolbar">
-        <ToolbarContent>{ToolbarItems}</ToolbarContent>
-      </Toolbar>
-      <DataList
-        aria-label="data list"
-        selectedDataListItemId={selectedDataListItemId}
-        onSelectDataListItem={onSelectDataListItem}
-      >
-        <DataListItem id="inline-modifier-item1">
-          <DataListItemRow>
-            <DataListItemCells
-              dataListCells={[
-                <DataListCell key="primary-content">
-                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+    <DataList
+      aria-label="data list"
+      selectedDataListItemId={selectedDataListItemId}
+      onSelectDataListItem={onSelectDataListItem}
+    >
+      <DataListItem id="inline-modifier-item1">
+        <DataListItemRow>
+          <DataListItemCells
+            dataListCells={[
+              <DataListCell key="primary-content">
+                <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+                  <FlexItem>
+                    <p>patternfly</p>
+                    <small>
+                      Working repo for PatternFly 5 <a>https://pf5.patternfly.org/</a>
+                    </small>
+                  </FlexItem>
+                  <Flex spaceItems={{ default: 'spaceItemsMd' }}>
+                    <FlexItem>
+                      <RhUiBranchFillIcon /> 10
+                    </FlexItem>
+                    <FlexItem>
+                      <RhUiCodeIcon /> 4
+                    </FlexItem>
                     <FlexItem>
-                      <p>patternfly</p>
-                      <small>
-                        Working repo for PatternFly 5 <a>https://pf5.patternfly.org/</a>
-                      </small>
+                      <CubeIcon /> 5
                     </FlexItem>
-                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>
-                      <FlexItem>
-                        <RhUiBranchFillIcon /> 10
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiCodeIcon /> 4
-                      </FlexItem>
-                      <FlexItem>
-                        <CubeIcon /> 5
-                      </FlexItem>
-                      <FlexItem>Updated 2 days ago</FlexItem>
-                    </Flex>
+                    <FlexItem>Updated 2 days ago</FlexItem>
                   </Flex>
-                </DataListCell>,
-                <DataListAction
-                  key="actions"
-                  aria-labelledby="inline-modifier-item1 inline-modifier-action1"
-                  id="inline-modifier-action1"
-                  aria-label="Actions"
-                >
-                  <Stack>
-                    <StackItem>
-                      <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                    </StackItem>
-                    <StackItem>
-                      <Button variant={ButtonVariant.link}>Link Button</Button>
-                    </StackItem>
-                  </Stack>
-                </DataListAction>
-              ]}
-            />
-          </DataListItemRow>
-        </DataListItem>
-        <DataListItem id="inline-modifier-item2">
-          <DataListItemRow>
-            <DataListItemCells
-              dataListCells={[
-                <DataListCell key="primary-content">
-                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+                </Flex>
+              </DataListCell>,
+              <DataListAction
+                key="actions"
+                aria-labelledby="inline-modifier-item1 inline-modifier-action1"
+                id="inline-modifier-action1"
+                aria-label="Actions"
+              >
+                <Stack>
+                  <StackItem>
+                    <Button variant={ButtonVariant.secondary}>Secondary</Button>
+                  </StackItem>
+                  <StackItem>
+                    <Button variant={ButtonVariant.link}>Link Button</Button>
+                  </StackItem>
+                </Stack>
+              </DataListAction>
+            ]}
+          />
+        </DataListItemRow>
+      </DataListItem>
+      <DataListItem id="inline-modifier-item2">
+        <DataListItemRow>
+          <DataListItemCells
+            dataListCells={[
+              <DataListCell key="primary-content">
+                <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+                  <FlexItem>
+                    <p>patternfly-elements</p>
+                    <small>PatternFly elements</small>
+                  </FlexItem>
+                  <Flex spaceItems={{ default: 'spaceItemsMd' }}>
+                    <FlexItem>
+                      <RhUiBranchFillIcon /> 10
+                    </FlexItem>
+                    <FlexItem>
+                      <RhUiCodeIcon /> 4
+                    </FlexItem>
+                    <FlexItem>
+                      <CubeIcon /> 5
+                    </FlexItem>
+                    <FlexItem>
+                      <Icon status="success">
+                        <RhUiCheckCircleFillIcon />
+                      </Icon>{' '}
+                      7
+                    </FlexItem>
+                    <FlexItem>
+                      <Icon status="warning">
+                        <RhUiWarningFillIcon />
+                      </Icon>{' '}
+                      5
+                    </FlexItem>
                     <FlexItem>
-                      <p>patternfly-elements</p>
-                      <small>PatternFly elements</small>
+                      <Icon status="danger">
+                        <RhUiCloseCircleFillIcon />
+                      </Icon>{' '}
+                      5
                     </FlexItem>
-                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>
-                      <FlexItem>
-                        <RhUiBranchFillIcon /> 10
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiCodeIcon /> 4
-                      </FlexItem>
-                      <FlexItem>
-                        <CubeIcon /> 5
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiCheckCircleFillIcon /> 7
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiWarningFillIcon /> 5
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiCloseCircleFillIcon /> 5
-                      </FlexItem>
-                      <FlexItem>Updated 2 days ago</FlexItem>
-                    </Flex>
+                    <FlexItem>Updated 2 days ago</FlexItem>
                   </Flex>
-                </DataListCell>,
-                <DataListAction
-                  key="actions"
-                  aria-labelledby="inline-modifier-item2 inline-modifier-action2"
-                  id="inline-modifier-action2"
-                  aria-label="Actions"
-                >
-                  <Stack>
-                    <StackItem>
-                      <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                    </StackItem>
-                    <StackItem>
-                      <Button variant={ButtonVariant.link}>Link Button</Button>
-                    </StackItem>
-                  </Stack>
-                </DataListAction>
-              ]}
-            />
-          </DataListItemRow>
-        </DataListItem>
-        <DataListItem id="inline-modifier-item3">
-          <DataListItemRow>
-            <DataListItemCells
-              dataListCells={[
-                <DataListCell key="primary-content">
-                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+                </Flex>
+              </DataListCell>,
+              <DataListAction
+                key="actions"
+                aria-labelledby="inline-modifier-item2 inline-modifier-action2"
+                id="inline-modifier-action2"
+                aria-label="Actions"
+              >
+                <Stack>
+                  <StackItem>
+                    <Button variant={ButtonVariant.secondary}>Secondary</Button>
+                  </StackItem>
+                  <StackItem>
+                    <Button variant={ButtonVariant.link}>Link Button</Button>
+                  </StackItem>
+                </Stack>
+              </DataListAction>
+            ]}
+          />
+        </DataListItemRow>
+      </DataListItem>
+      <DataListItem id="inline-modifier-item3">
+        <DataListItemRow>
+          <DataListItemCells
+            dataListCells={[
+              <DataListCell key="primary-content">
+                <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+                  <FlexItem>
+                    <p>patternfly</p>
+                    <small>
+                      Working repo for PatternFly 5 <a>https://pf5.patternfly.org/</a>
+                    </small>
+                  </FlexItem>
+                  <Flex spaceItems={{ default: 'spaceItemsMd' }}>
+                    <FlexItem>
+                      <RhUiBranchFillIcon /> 10
+                    </FlexItem>
+                    <FlexItem>
+                      <RhUiCodeIcon /> 4
+                    </FlexItem>
                     <FlexItem>
-                      <p>patternfly</p>
-                      <small>
-                        Working repo for PatternFly 5 <a>https://pf5.patternfly.org/</a>
-                      </small>
+                      <CubeIcon /> 5
                     </FlexItem>
-                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>
-                      <FlexItem>
-                        <RhUiBranchFillIcon /> 10
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiCodeIcon /> 4
-                      </FlexItem>
-                      <FlexItem>
-                        <CubeIcon /> 5
-                      </FlexItem>
-                      <FlexItem>Updated 2 days ago</FlexItem>
-                    </Flex>
+                    <FlexItem>Updated 2 days ago</FlexItem>
                   </Flex>
-                </DataListCell>,
-                <DataListAction
-                  key="actions"
-                  aria-labelledby="inline-modifier-item3 inline-modifier-action3"
-                  id="inline-modifier-action3"
-                  aria-label="Actions"
-                >
-                  <Stack>
-                    <StackItem>
-                      <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                    </StackItem>
-                    <StackItem>
-                      <Button variant={ButtonVariant.link}>Link Button</Button>
-                    </StackItem>
-                  </Stack>
-                </DataListAction>
-              ]}
-            />
-          </DataListItemRow>
-        </DataListItem>
-        <DataListItem id="inline-modifier-item4">
-          <DataListItemRow>
-            <DataListItemCells
-              dataListCells={[
-                <DataListCell key="primary-content">
-                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+                </Flex>
+              </DataListCell>,
+              <DataListAction
+                key="actions"
+                aria-labelledby="inline-modifier-item3 inline-modifier-action3"
+                id="inline-modifier-action3"
+                aria-label="Actions"
+              >
+                <Stack>
+                  <StackItem>
+                    <Button variant={ButtonVariant.secondary}>Secondary</Button>
+                  </StackItem>
+                  <StackItem>
+                    <Button variant={ButtonVariant.link}>Link Button</Button>
+                  </StackItem>
+                </Stack>
+              </DataListAction>
+            ]}
+          />
+        </DataListItemRow>
+      </DataListItem>
+      <DataListItem id="inline-modifier-item4">
+        <DataListItemRow>
+          <DataListItemCells
+            dataListCells={[
+              <DataListCell key="primary-content">
+                <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
+                  <FlexItem>
+                    <p>patternfly-elements</p>
+                    <small>PatternFly elements</small>
+                  </FlexItem>
+                  <Flex spaceItems={{ default: 'spaceItemsMd' }}>
+                    <FlexItem>
+                      <RhUiBranchFillIcon /> 10
+                    </FlexItem>
                     <FlexItem>
-                      <p>patternfly-elements</p>
-                      <small>PatternFly elements</small>
+                      <RhUiCodeIcon /> 4
                     </FlexItem>
-                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>
-                      <FlexItem>
-                        <RhUiBranchFillIcon /> 10
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiCodeIcon /> 4
-                      </FlexItem>
-                      <FlexItem>
-                        <CubeIcon /> 5
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiCheckCircleFillIcon /> 7
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiWarningFillIcon /> 5
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiCloseCircleFillIcon /> 5
-                      </FlexItem>
-                      <FlexItem>Updated 2 days ago</FlexItem>
-                    </Flex>
+                    <FlexItem>
+                      <CubeIcon /> 5
+                    </FlexItem>
+                    <FlexItem>
+                      <Icon status="success">
+                        <RhUiCheckCircleFillIcon />
+                      </Icon>{' '}
+                      7
+                    </FlexItem>
+                    <FlexItem>
+                      <Icon status="warning">
+                        <RhUiWarningFillIcon />
+                      </Icon>{' '}
+                      5
+                    </FlexItem>
+                    <FlexItem>
+                      <Icon status="danger">
+                        <RhUiCloseCircleFillIcon />
+                      </Icon>{' '}
+                      5
+                    </FlexItem>
+                    <FlexItem>Updated 2 days ago</FlexItem>
                   </Flex>
-                </DataListCell>,
-                <DataListAction
-                  key="actions"
-                  aria-labelledby="inline-modifier-item4 inline-modifier-action4"
-                  id="inline-modifier-action4"
-                  aria-label="Actions"
-                >
-                  <Stack>
-                    <StackItem>
-                      <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                    </StackItem>
-                    <StackItem>
-                      <Button variant={ButtonVariant.link}>Link Button</Button>
-                    </StackItem>
-                  </Stack>
-                </DataListAction>
-              ]}
-            />
-          </DataListItemRow>
-        </DataListItem>
-      </DataList>
-    </Fragment>
+                </Flex>
+              </DataListCell>,
+              <DataListAction
+                key="actions"
+                aria-labelledby="inline-modifier-item4 inline-modifier-action4"
+                id="inline-modifier-action4"
+                aria-label="Actions"
+              >
+                <Stack>
+                  <StackItem>
+                    <Button variant={ButtonVariant.secondary}>Secondary</Button>
+                  </StackItem>
+                  <StackItem>
+                    <Button variant={ButtonVariant.link}>Link Button</Button>
+                  </StackItem>
+                </Stack>
+              </DataListAction>
+            ]}
+          />
+        </DataListItemRow>
+      </DataListItem>
+    </DataList>
   );
 
   return (
@@ -432,6 +441,16 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => {
       <Divider component="div" />
       <PageSection padding={{ default: 'noPadding' }} aria-label="Card with drawer content">
         <Drawer isExpanded={isDrawerExpanded} isInline>
+          <DrawerSection>
+            <Toolbar
+              id="inline-modifier-data-toolbar"
+              inset={{ default: 'insetLg' }}
+              style={{ paddingBlockStart: 'var(--pf-t--global--spacer--md)' }}
+            >
+              <ToolbarContent alignItems="center">{ToolbarItems}</ToolbarContent>
+            </Toolbar>
+            <Divider component="div" />
+          </DrawerSection>
           <DrawerContent panelContent={panelContent}>
             <DrawerContentBody>{drawerContent}</DrawerContentBody>
           </DrawerContent>
diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx
index 941944d8372..877e633486d 100644
--- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx
+++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx
@@ -102,7 +102,7 @@ export const PrimaryDetailSimpleListInCard: React.FunctionComponent = () => {
       <Divider component="div" />
       <PageSection aria-label="Card with drawer content">
         <Card>
-          <Drawer isStatic isExpanded={isExpanded}>
+          <Drawer isInline isExpanded={isExpanded}>
             <DrawerContent panelContent={panelContent}>
               <DrawerContentBody>{drawerContent}</DrawerContentBody>
             </DrawerContent>