diff --git a/packages/documentation-framework/components/example/example.css b/packages/documentation-framework/components/example/example.css
index 0e646106f2..0efc01c062 100644
--- a/packages/documentation-framework/components/example/example.css
+++ b/packages/documentation-framework/components/example/example.css
@@ -72,12 +72,39 @@
 
 .ws-full-page-utils {
   position: fixed;
-  inset-inline-start: 0;
   inset-block-end: 0;
-  padding: var(--pf-t--global--spacer--lg);
+  padding: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--lg) var(--pf-t--global--spacer--lg);
   z-index: var(--pf-t--global--z-index--2xl);
 }
 
+.ws-full-page-utils.pf-m-top-right {
+  top: 0;
+  right: 0;
+  bottom: auto;
+  left: auto;
+}
+
+.ws-full-page-utils.pf-m-bottom-right {
+  top: auto;
+  right: 0;
+  bottom: 0;
+  left: auto;
+}
+
+.ws-full-page-utils.pf-m-bottom-left {
+  top: auto;
+  right: auto;
+  bottom: 0;
+  left: 0;
+}
+
+.ws-full-page-utils.pf-m-top-left {
+  top: 0;
+  right: auto;
+  bottom: auto;
+  left: 0;
+}
+
 .ws-full-page-utils::before {
   position: absolute;
   inset: 0;
@@ -86,3 +113,7 @@
   opacity: 0.8;
   box-shadow: var(--pf-t--global--box-shadow--sm);
 }
+
+.ws-full-page-utils .pf-v6-c-button.pf-m-no-padding.pf-m-clicked {
+  --pf-v6-c-button__icon--Color: var(--pf-t--global--text--color--regular);
+}
diff --git a/packages/documentation-framework/components/example/example.js b/packages/documentation-framework/components/example/example.js
index faea37a6d4..981ed15f2d 100644
--- a/packages/documentation-framework/components/example/example.js
+++ b/packages/documentation-framework/components/example/example.js
@@ -34,6 +34,15 @@ import missingThumbnail from './missing-thumbnail.jpg';
 import { RtlContext } from '../../layouts';
 import { ThemeSelector } from '../themeSelector/themeSelector';
 
+import RhUiArrowCircleDownRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-arrow-circle-down-right-icon';
+import RhUiArrowCircleDownLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-arrow-circle-down-left-icon';
+import RhUiArrowCircleUpRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-arrow-circle-up-right-icon';
+import RhUiArrowCircleUpLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-arrow-circle-up-left-icon';
+import RhUiArrowCircleDownRightFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-arrow-circle-down-right-fill-icon';
+import RhUiArrowCircleDownLeftFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-arrow-circle-down-left-fill-icon';
+import RhUiArrowCircleUpRightFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-arrow-circle-up-right-fill-icon';
+import RhUiArrowCircleUpLeftFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-arrow-circle-up-left-fill-icon';
+
 const errorComponent = (err) => <pre>{err.toString()}</pre>;
 
 class ErrorBoundary extends React.Component {
@@ -137,6 +146,7 @@ export const Example = ({
   }
 
   const [editorCode, setEditorCode] = React.useState(code);
+  const [fullPageUtilsPosition, setFullPageUtilsPosition] = React.useState('pf-m-bottom-right');
   const loc = useLocation();
   const isRTL = useContext(RtlContext);
   const scope = {
@@ -193,9 +203,47 @@ export const Example = ({
         {(hasThemeSwitcher || hasRTLSwitcher) && (
           <Flex
             direction={{ default: 'column' }}
-            gap={{ default: 'gapMd' }}
-            className="ws-full-page-utils pf-v6-m-dir-ltr"
+            gap={{ default: 'gapSm' }}
+            className={css('ws-full-page-utils', 'pf-v6-m-dir-ltr', fullPageUtilsPosition)}
           >
+            <Flex justifyContent={{ default: 'justifyContentCenter' }} gap={{ default: 'gapXs' }}>
+            <Button
+                variant="plain"
+                size="sm"
+                hasNoPadding
+                isClicked={fullPageUtilsPosition === 'pf-m-top-left'}
+                onClick={() => setFullPageUtilsPosition('pf-m-top-left')}
+                aria-label="Position utilities top left"
+                icon={fullPageUtilsPosition === 'pf-m-top-left' ? <RhUiArrowCircleUpLeftFillIcon /> : <RhUiArrowCircleUpLeftIcon />}
+              />
+              <Button
+                variant="plain"
+                size="sm"
+                hasNoPadding
+                isClicked={fullPageUtilsPosition === 'pf-m-bottom-left'}
+                onClick={() => setFullPageUtilsPosition('pf-m-bottom-left')}
+                aria-label="Position utilities bottom left"
+                icon={fullPageUtilsPosition === 'pf-m-bottom-left' ? <RhUiArrowCircleDownLeftFillIcon /> : <RhUiArrowCircleDownLeftIcon />}
+              />
+              <Button
+                variant="plain"
+                size="sm"
+                hasNoPadding
+                isClicked={fullPageUtilsPosition === 'pf-m-bottom-right'}
+                onClick={() => setFullPageUtilsPosition('pf-m-bottom-right')}
+                aria-label="Position utilities bottom right"
+                icon={fullPageUtilsPosition === 'pf-m-bottom-right' ? <RhUiArrowCircleDownRightFillIcon /> : <RhUiArrowCircleDownRightIcon />}
+              />
+              <Button
+                variant="plain"
+                size="sm"
+                hasNoPadding
+                isClicked={fullPageUtilsPosition === 'pf-m-top-right'}
+                onClick={() => setFullPageUtilsPosition('pf-m-top-right')}
+                aria-label="Position utilities top right"
+                icon={fullPageUtilsPosition === 'pf-m-top-right' ? <RhUiArrowCircleUpRightFillIcon /> : <RhUiArrowCircleUpRightIcon />}
+              />
+            </Flex>
             {hasThemeSwitcher && <ThemeSelector id="ws-example-theme-select" />}
             {hasRTLSwitcher && (
               <Switch
diff --git a/packages/documentation-framework/package.json b/packages/documentation-framework/package.json
index ea2c98497f..23e5a2462c 100644
--- a/packages/documentation-framework/package.json
+++ b/packages/documentation-framework/package.json
@@ -69,6 +69,7 @@
     "@patternfly/patternfly": "^6.5.0-prerelease.33",
     "@patternfly/react-code-editor": "^6.5.0-prerelease.26",
     "@patternfly/react-core": "^6.5.0-prerelease.24",
+    "@patternfly/react-icons": "^6.5.0-prerelease.11",
     "@patternfly/react-table": "^6.5.0-prerelease.24",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
diff --git a/packages/documentation-site/package.json b/packages/documentation-site/package.json
index 2dee485ae5..51a1b4ea4c 100644
--- a/packages/documentation-site/package.json
+++ b/packages/documentation-site/package.json
@@ -28,6 +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-log-viewer": "6.3.0",
     "@patternfly/react-topology": "6.5.0-prerelease.3",
     "@patternfly/react-user-feedback": "6.2.0",
diff --git a/yarn.lock b/yarn.lock
index 3f220fe317..dd6b38ddf6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4743,6 +4743,7 @@ __metadata:
     "@patternfly/patternfly": ^6.5.0-prerelease.33
     "@patternfly/react-code-editor": ^6.5.0-prerelease.26
     "@patternfly/react-core": ^6.5.0-prerelease.24
+    "@patternfly/react-icons": ^6.5.0-prerelease.11
     "@patternfly/react-table": ^6.5.0-prerelease.24
     react: ^17.0.0 || ^18.0.0
     react-dom: ^17.0.0 || ^18.0.0
@@ -5093,6 +5094,16 @@ __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"
+  peerDependencies:
+    react: ^17 || ^18 || ^19
+    react-dom: ^17 || ^18 || ^19
+  checksum: 10c0/d0d91d9e011747dde34a0d3521cd92d58ff29281f6fb1e442c72cf0ea1ca8b3a69e270497e0644ffa499601484394bc9fdf12b070f8568114a7fcfed0428a8c8
+  languageName: node
+  linkType: hard
+
 "@patternfly/react-icons@npm:^6.0.0, @patternfly/react-icons@npm:^6.0.0-prerelease.7, @patternfly/react-icons@npm:^6.3.1":
   version: 6.3.1
   resolution: "@patternfly/react-icons@npm:6.3.1"
@@ -5113,16 +5124,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@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"
-  peerDependencies:
-    react: ^17 || ^18 || ^19
-    react-dom: ^17 || ^18 || ^19
-  checksum: 10c0/d0d91d9e011747dde34a0d3521cd92d58ff29281f6fb1e442c72cf0ea1ca8b3a69e270497e0644ffa499601484394bc9fdf12b070f8568114a7fcfed0428a8c8
-  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"
@@ -18549,6 +18550,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-log-viewer": "npm:6.3.0"
     "@patternfly/react-topology": "npm:6.5.0-prerelease.3"
     "@patternfly/react-user-feedback": "npm:6.2.0"