diff --git a/apps/test-app/public/parent-app.html b/apps/test-app/public/parent-app.html
new file mode 100644
index 00000000000..8e3d232e643
--- /dev/null
+++ b/apps/test-app/public/parent-app.html
@@ -0,0 +1,337 @@
+<!DOCTYPE html>
+<!--
+  Parent App Example — Condensed Layout Demo
+  ===========================================
+  Demonstrates a parent portal with its own header + left nav that iframes an
+  AppUI child app.  A "Full Screen" button hides the side nav and tells the
+  child to switch to CondensedLayout.  "Exit Full Screen" restores the side
+  nav and switches back to StandardLayout.
+
+  Usage (local dev):
+    Serve the test-app normally, then open:
+      http://localhost:3000/parent-app.html
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Parent App – Condensed Layout Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        height: 100%;
+        font-family: system-ui, -apple-system, sans-serif;
+        background: #1e1e1e;
+        color: #e0e0e0;
+      }
+
+      /* ================================================================== */
+      /* Normal layout: header + body (left nav + content area with iframe)  */
+      /* ================================================================== */
+      #app-shell {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+
+      /* ---------- Header ---------- */
+      #app-header {
+        display: flex;
+        align-items: center;
+        height: 48px;
+        padding: 0 16px;
+        background: #2b2b2b;
+        border-bottom: 1px solid #3a3a3a;
+        flex-shrink: 0;
+        gap: 16px;
+        z-index: 100;
+      }
+      #app-header .logo {
+        font-size: 15px;
+        font-weight: 700;
+        color: #4a90d9;
+        white-space: nowrap;
+      }
+      #app-header .header-center {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+      #app-header select {
+        background: #3a3a3a;
+        color: #e0e0e0;
+        border: 1px solid #555;
+        border-radius: 4px;
+        padding: 4px 8px;
+        font-size: 13px;
+        min-width: 180px;
+      }
+      #app-header .header-right {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+      .user-avatar {
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+        background: #4a90d9;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 12px;
+        font-weight: 600;
+        cursor: pointer;
+      }
+      .fullscreen-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        padding: 0;
+        background: transparent;
+        color: #a0a0a0;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+      }
+      .fullscreen-btn:hover {
+        background: #3a3a3a;
+        color: #fff;
+      }
+      .fullscreen-btn svg {
+        width: 18px;
+        height: 18px;
+        fill: currentColor;
+      }
+
+      /* ---------- Body (nav + main) ---------- */
+      #app-body {
+        display: flex;
+        flex: 1;
+        overflow: hidden;
+      }
+
+      /* ---------- Left nav ---------- */
+      #left-nav {
+        display: flex;
+        flex-direction: column;
+        width: 56px;
+        background: #252525;
+        border-right: 1px solid #3a3a3a;
+        padding: 8px 0;
+        align-items: center;
+        gap: 4px;
+        flex-shrink: 0;
+        z-index: 100;
+        transition: width 0.2s ease-out, opacity 0.2s ease-out,
+          padding 0.2s ease-out;
+        overflow: hidden;
+      }
+      .nav-item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 40px;
+        height: 40px;
+        border-radius: 6px;
+        cursor: pointer;
+        color: #a0a0a0;
+        transition: background 0.15s, color 0.15s;
+      }
+      .nav-item:hover {
+        background: #3a3a3a;
+        color: #fff;
+      }
+      .nav-item.active {
+        background: #4a90d9;
+        color: #fff;
+      }
+      .nav-item svg {
+        width: 20px;
+        height: 20px;
+        fill: currentColor;
+      }
+      .nav-spacer {
+        flex: 1;
+      }
+
+      /* ---------- Main content area ---------- */
+      #main-content {
+        flex: 1;
+        position: relative;
+        overflow: hidden;
+      }
+
+      /* ---------- iframe ---------- */
+      #child-frame {
+        width: 100%;
+        height: 100%;
+        border: none;
+      }
+
+      /* ================================================================== */
+      /* Condensed mode — hide the left nav                                  */
+      /* ================================================================== */
+      body.condensed #left-nav {
+        width: 0;
+        opacity: 0;
+        padding: 0;
+        border-right: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app-shell">
+      <!-- ============ HEADER ============ -->
+      <header id="app-header">
+        <div class="logo">iTwin Platform</div>
+        <div class="header-center">
+          <select id="project-select">
+            <option>Highway Bridge</option>
+            <option>Campus Building</option>
+            <option>Stadium Renovation</option>
+            <option>Rail Corridor</option>
+          </select>
+        </div>
+        <div class="header-right">
+          <button
+            class="fullscreen-btn"
+            id="toggle-fullscreen-btn"
+            title="Enter Full Screen"
+          >
+            <!-- Expand icon -->
+            <svg id="expand-icon" viewBox="0 0 16 16">
+              <path
+                d="M2 2h5v1.5H3.5V6H2V2zm7 0h5v4h-1.5V3.5H9V2zM2 10h1.5v2.5H6V14H2v-4zm10.5 2.5V10H14v4h-4v-1.5h2.5z"
+              />
+            </svg>
+            <!-- Collapse icon (hidden by default) -->
+            <svg id="collapse-icon" viewBox="0 0 16 16" style="display: none">
+              <path
+                d="M4 2v2.5H1.5V6H6V1.5H4.5V2H4zm8 0v.5H10V6h4.5V4.5H12V2h-.5zM4 14v-.5H1.5V12H6v4.5H4.5V14H4zm8 0v.5H10V10h4.5v1.5H12V14h.5z"
+              />
+            </svg>
+          </button>
+          <div class="user-avatar" id="user-btn" title="Jane Doe">JD</div>
+        </div>
+      </header>
+
+      <!-- ============ BODY ============ -->
+      <div id="app-body">
+        <!-- Left navigation -->
+        <nav id="left-nav">
+          <!-- Home -->
+          <div class="nav-item active" title="Home">
+            <svg viewBox="0 0 16 16">
+              <path
+                d="M8 1L1 7h2v7h4v-4h2v4h4V7h2L8 1zm0 1.7L13 7.6V13h-2V9H5v4H3V7.6L8 2.7z"
+              />
+            </svg>
+          </div>
+          <!-- Projects -->
+          <div class="nav-item" title="Projects">
+            <svg viewBox="0 0 16 16">
+              <path d="M1 2h5l2 2h7v10H1V2zm1 1v10h12V5H7.586L5.586 3H2z" />
+            </svg>
+          </div>
+          <!-- Models -->
+          <div class="nav-item" title="Models">
+            <svg viewBox="0 0 16 16">
+              <path
+                d="M8 1l7 4v6l-7 4-7-4V5l7-4zm0 1.2L2.5 5.5v5l5.5 3.2 5.5-3.2v-5L8 2.2z"
+              />
+            </svg>
+          </div>
+          <!-- Issues -->
+          <div class="nav-item" title="Issues">
+            <svg viewBox="0 0 16 16">
+              <path
+                d="M8 1a7 7 0 100 14A7 7 0 008 1zm0 1.2a5.8 5.8 0 110 11.6A5.8 5.8 0 018 2.2zM7.25 5h1.5v4h-1.5V5zm0 5h1.5v1.5h-1.5V10z"
+              />
+            </svg>
+          </div>
+          <!-- Analytics -->
+          <div class="nav-item" title="Analytics">
+            <svg viewBox="0 0 16 16">
+              <path
+                d="M2 13h12v1H2v-1zm1-5h2v4H3V8zm3-3h2v7H6V5zm3-2h2v9H9V3zm3 4h2v6h-2V7z"
+              />
+            </svg>
+          </div>
+          <div class="nav-spacer"></div>
+          <!-- Settings -->
+          <div class="nav-item" title="Settings">
+            <svg viewBox="0 0 16 16">
+              <path
+                d="M8 5.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5zM6.7 8a1.3 1.3 0 112.6 0 1.3 1.3 0 01-2.6 0zm.2-6.5l-.3 1.6a4.8 4.8 0 00-1.3.7L3.8 3 2.5 5.2l1.2 1.1a5 5 0 000 1.4l-1.2 1.1L3.8 11l1.5-.8c.4.3.8.5 1.3.7l.3 1.6h2.6l.3-1.6c.5-.2.9-.4 1.3-.7l1.5.8 1.3-2.2-1.2-1.1a5 5 0 000-1.4l1.2-1.1L11.5 3 10 3.8a4.8 4.8 0 00-1.3-.7L8.4 1.5H6.9z"
+              />
+            </svg>
+          </div>
+        </nav>
+
+        <!-- Main content with iframe -->
+        <div id="main-content">
+          <iframe
+            id="child-frame"
+            src="/blank?menu=0&frontstageId=content-overlay"
+          ></iframe>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      const iframe = document.getElementById("child-frame");
+      const toggleBtn = document.getElementById("toggle-fullscreen-btn");
+      const expandIcon = document.getElementById("expand-icon");
+      const collapseIcon = document.getElementById("collapse-icon");
+
+      let isCondensed = false;
+
+      toggleBtn.addEventListener("click", () => {
+        isCondensed = !isCondensed;
+
+        if (isCondensed) {
+          document.body.classList.add("condensed");
+          toggleBtn.title = "Exit Full Screen";
+          expandIcon.style.display = "none";
+          collapseIcon.style.display = "";
+        } else {
+          document.body.classList.remove("condensed");
+          toggleBtn.title = "Enter Full Screen";
+          expandIcon.style.display = "";
+          collapseIcon.style.display = "none";
+        }
+
+        // Tell the child iframe to switch layouts
+        iframe.contentWindow.postMessage(
+          { type: "appui-set-overlay-mode", enabled: isCondensed },
+          "*"
+        );
+      });
+
+      // Nav item active state
+      document.querySelectorAll(".nav-item").forEach((item) => {
+        item.addEventListener("click", () => {
+          document
+            .querySelectorAll(".nav-item")
+            .forEach((i) => i.classList.remove("active"));
+          item.classList.add("active");
+        });
+      });
+
+      // User button
+      document.getElementById("user-btn").addEventListener("click", () => {
+        alert("User menu – a real app would open a dropdown here.");
+      });
+    </script>
+  </body>
+</html>
diff --git a/apps/test-app/src/frontend/appui/frontstages/ContentOverlayFrontstage.tsx b/apps/test-app/src/frontend/appui/frontstages/ContentOverlayFrontstage.tsx
new file mode 100644
index 00000000000..e7a4714c8c8
--- /dev/null
+++ b/apps/test-app/src/frontend/appui/frontstages/ContentOverlayFrontstage.tsx
@@ -0,0 +1,439 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from "react";
+import {
+  BackstageAppButton,
+  BackstageItemUtilities,
+  BottomContentToolWidgetComposer,
+  BottomViewToolWidgetComposer,
+  CondensedLayout,
+  Frontstage,
+  FrontstageUtilities,
+  StagePanelLocation,
+  StagePanelSection,
+  StagePanelState,
+  StageUsage,
+  StandardContentLayouts,
+  StandardLayout,
+  StatusBarItemUtilities,
+  StatusBarSection,
+  ToolbarItemUtilities,
+  ToolbarOrientation,
+  ToolbarUsage,
+  UiItemsProvider,
+  Widget,
+  WidgetState,
+} from "@itwin/appui-react";
+import { MeasureDistanceTool, PrimitiveTool } from "@itwin/core-frontend";
+import {
+  SvgCursor,
+  SvgTextAlignCenter,
+  SvgTextAlignJustify,
+  SvgTextAlignLeft,
+  SvgTextAlignRight,
+  SvgFlag,
+  SvgInfo,
+  SvgNetwork,
+  SvgHome,
+  SvgCamera,
+  SvgZoomIn,
+  SvgZoomOut,
+} from "@itwin/itwinui-icons-react";
+import {
+  FloatingLayoutInfo,
+  LayoutControls,
+  LayoutInfo,
+  LogLifecycleWidget,
+  SampleTool,
+  ToolWithDynamicSettings,
+  ViewportContent,
+} from "@itwin/appui-test-providers";
+
+// ---------------------------------------------------------------------------
+// Pointer tool — a simple tool with no tool settings
+// ---------------------------------------------------------------------------
+
+class PointerTool extends PrimitiveTool {
+  public static override toolId = "content-overlay-PointerTool";
+  public static override iconSpec = "icon-cursor";
+
+  public override requireWriteableTarget(): boolean {
+    return false;
+  }
+  public override async onRestartTool(): Promise<void> {
+    return this.exitTool();
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Overlay mode hook — listens for postMessage from parent window
+// ---------------------------------------------------------------------------
+
+/**
+ * Listens for `{ type: "appui-set-overlay-mode", enabled }` messages from
+ * the parent window and returns the current enabled state.
+ * Starts disabled — the parent sends a message to activate overlay mode.
+ */
+function useOverlayMode(): boolean {
+  const [enabled, setEnabled] = React.useState(false);
+
+  React.useEffect(() => {
+    const handler = (event: MessageEvent) => {
+      if (!event.data || event.data.type !== "appui-set-overlay-mode") return;
+      setEnabled(!!event.data.enabled);
+    };
+    window.addEventListener("message", handler);
+    return () => window.removeEventListener("message", handler);
+  }, []);
+
+  return enabled;
+}
+
+// ---------------------------------------------------------------------------
+// Frontstage definition
+// ---------------------------------------------------------------------------
+
+export function createContentOverlayFrontstage(): Frontstage {
+  PointerTool.register("ContentOverlay");
+
+  const config = FrontstageUtilities.createStandardFrontstage({
+    id: createContentOverlayFrontstage.stageId,
+    contentGroupProps: {
+      id: "content-overlay-content-group",
+      layout: StandardContentLayouts.singleView,
+      contents: [
+        {
+          id: "primaryContent",
+          classId: "",
+          content: <ViewportContent />,
+        },
+      ],
+    },
+    cornerButton: (
+      <BackstageAppButton
+        key="content-overlay-backstage"
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        icon="icon-bentley-systems"
+      />
+    ),
+    defaultTool: MeasureDistanceTool.toolId,
+    usage: StageUsage.General,
+    leftPanelProps: {
+      resizable: true,
+      pinned: true,
+      defaultState: StagePanelState.Open,
+    },
+    rightPanelProps: {
+      resizable: true,
+      pinned: true,
+      defaultState: StagePanelState.Open,
+    },
+    bottomPanelProps: {
+      resizable: true,
+      pinned: true,
+      defaultState: StagePanelState.Open,
+    },
+  });
+
+  return {
+    ...config,
+    bottomContentManipulation: {
+      id: `${createContentOverlayFrontstage.stageId}-bottomContentManipulation`,
+      content: <BottomContentToolWidgetComposer />,
+    },
+    bottomViewNavigation: {
+      id: `${createContentOverlayFrontstage.stageId}-bottomViewNavigation`,
+      content: <BottomViewToolWidgetComposer />,
+    },
+    layout: <ContentOverlayLayout />,
+  };
+}
+createContentOverlayFrontstage.stageId = "content-overlay";
+
+/**
+ * Switches between `StandardLayout` and `CondensedLayout` based on
+ * parent postMessage.
+ */
+function ContentOverlayLayout() {
+  const overlayMode = useOverlayMode();
+
+  if (!overlayMode) {
+    return <StandardLayout />;
+  }
+
+  return <CondensedLayout />;
+}
+
+// ---------------------------------------------------------------------------
+// UiItemsProvider
+// ---------------------------------------------------------------------------
+
+export function createContentOverlayProvider(): UiItemsProvider {
+  return {
+    id: "content-overlay-provider",
+    getToolbarItems: () => [
+      ToolbarItemUtilities.createForTool(PointerTool, {
+        icon: <SvgCursor />,
+        layouts: {
+          standard: {
+            orientation: ToolbarOrientation.Horizontal,
+            usage: ToolbarUsage.ContentManipulation,
+          },
+        },
+      }),
+      ToolbarItemUtilities.createForTool(SampleTool, {
+        layouts: {
+          standard: {
+            orientation: ToolbarOrientation.Horizontal,
+            usage: ToolbarUsage.ContentManipulation,
+          },
+        },
+      }),
+      ToolbarItemUtilities.createForTool(ToolWithDynamicSettings, {
+        layouts: {
+          standard: {
+            orientation: ToolbarOrientation.Horizontal,
+            usage: ToolbarUsage.ContentManipulation,
+          },
+        },
+      }),
+      // Bottom content manipulation toolbar items
+      {
+        id: "bottom-home-tool",
+        itemPriority: 10,
+        icon: <SvgHome />,
+        label: "Home",
+        execute: () => {},
+        layouts: {
+          standard: {
+            orientation: ToolbarOrientation.Horizontal,
+            usage: ToolbarUsage.BottomContentManipulation,
+          },
+        },
+      },
+      {
+        id: "bottom-zoom-in-tool",
+        itemPriority: 20,
+        icon: <SvgZoomIn />,
+        label: "Zoom In",
+        execute: () => {},
+        layouts: {
+          standard: {
+            orientation: ToolbarOrientation.Vertical,
+            usage: ToolbarUsage.BottomContentManipulation,
+          },
+        },
+      },
+      {
+        id: "bottom-zoom-out-tool",
+        itemPriority: 30,
+        icon: <SvgZoomOut />,
+        label: "Zoom Out",
+        execute: () => {},
+        layouts: {
+          standard: {
+            orientation: ToolbarOrientation.Vertical,
+            usage: ToolbarUsage.BottomContentManipulation,
+          },
+        },
+      },
+      // Bottom view navigation toolbar item
+      {
+        id: "bottom-camera-tool",
+        itemPriority: 10,
+        icon: <SvgCamera />,
+        label: "Camera",
+        execute: () => {},
+        layouts: {
+          standard: {
+            orientation: ToolbarOrientation.Horizontal,
+            usage: ToolbarUsage.BottomViewNavigation,
+          },
+        },
+      },
+    ],
+    getWidgets: () => {
+      const leftStart = {
+        standard: {
+          location: StagePanelLocation.Left,
+          section: StagePanelSection.Start,
+        },
+      };
+      const leftEnd = {
+        standard: {
+          location: StagePanelLocation.Left,
+          section: StagePanelSection.End,
+        },
+      };
+      const rightStart = {
+        standard: {
+          location: StagePanelLocation.Right,
+          section: StagePanelSection.Start,
+        },
+      };
+      const rightEnd = {
+        standard: {
+          location: StagePanelLocation.Right,
+          section: StagePanelSection.End,
+        },
+      };
+      const bottomStart = {
+        standard: {
+          location: StagePanelLocation.Bottom,
+          section: StagePanelSection.Start,
+        },
+      };
+      const bottomEnd = {
+        standard: {
+          location: StagePanelLocation.Bottom,
+          section: StagePanelSection.End,
+        },
+      };
+
+      const widgets: Widget[] = [
+        // Left panel – start
+        {
+          id: "co-WL-A",
+          label: "WL-A",
+          icon: "icon-app-1",
+          canPopout: true,
+          defaultState: WidgetState.Open,
+          content: <LogLifecycleWidget id="co-WL-A" />,
+          canFloat: { hideWithUi: true },
+          allowedPanels: [StagePanelLocation.Left, StagePanelLocation.Right],
+          layouts: leftStart,
+        },
+        // Left panel – end
+        {
+          id: "co-WL-1",
+          label: "WL-1",
+          icon: "icon-smiley-happy",
+          canPopout: false,
+          content: <h2>Left WL-1</h2>,
+          layouts: leftEnd,
+        },
+        {
+          id: "co-WL-2",
+          label: "WL-2",
+          icon: "icon-smiley-sad",
+          defaultState: WidgetState.Open,
+          canPopout: true,
+          content: <h2>Left WL-2</h2>,
+          allowedPanels: [StagePanelLocation.Left],
+          layouts: leftEnd,
+        },
+        // Right panel – start
+        {
+          id: "co-WR-A",
+          label: "WR-A",
+          icon: <SvgTextAlignLeft />,
+          canPopout: true,
+          defaultState: WidgetState.Open,
+          content: <h2>Right WR-A</h2>,
+          allowedPanels: [StagePanelLocation.Left, StagePanelLocation.Right],
+          layouts: rightStart,
+        },
+        {
+          id: "co-WR-B",
+          label: "WR-B",
+          icon: <SvgTextAlignRight />,
+          canPopout: true,
+          defaultState: WidgetState.Hidden,
+          content: <h2>Right WR-B</h2>,
+          layouts: rightStart,
+        },
+        // Right panel – end
+        {
+          id: "co-WR-1",
+          label: "WR-1",
+          icon: <SvgTextAlignCenter />,
+          canPopout: false,
+          content: <h2>Right WR-1</h2>,
+          layouts: rightEnd,
+        },
+        {
+          id: "co-WR-2",
+          label: "WR-2",
+          icon: <SvgTextAlignJustify />,
+          defaultState: WidgetState.Open,
+          canPopout: true,
+          content: <h2>Right WR-2</h2>,
+          allowedPanels: [StagePanelLocation.Right],
+          layouts: rightEnd,
+        },
+        // Bottom panel – start
+        {
+          id: "co-floating-info",
+          label: "Floating Info",
+          canPopout: true,
+          defaultState: WidgetState.Open,
+          content: <FloatingLayoutInfo />,
+          allowedPanels: [StagePanelLocation.Top, StagePanelLocation.Bottom],
+          layouts: bottomStart,
+        },
+        {
+          id: "co-layout-info",
+          label: "Layout Info",
+          canPopout: true,
+          content: <LayoutInfo />,
+          allowedPanels: [StagePanelLocation.Bottom],
+          layouts: bottomStart,
+        },
+        // Bottom panel – end
+        {
+          id: "co-layout-controls",
+          label: "Layout Controls",
+          defaultState: WidgetState.Open,
+          content: <LayoutControls />,
+          layouts: bottomEnd,
+        },
+      ];
+      return widgets;
+    },
+    getBackstageItems: () => [
+      BackstageItemUtilities.createStageLauncher({
+        stageId: createContentOverlayFrontstage.stageId,
+        groupPriority: 200,
+        itemPriority: 10,
+        label: "Content Overlay",
+      }),
+    ],
+    getStatusBarItems: () => [
+      StatusBarItemUtilities.createCustomItem({
+        id: "co-status-coordinates",
+        section: StatusBarSection.Left,
+        itemPriority: 10,
+        content: (
+          <span style={{ display: "flex", alignItems: "center", gap: 4 }}>
+            <SvgFlag style={{ width: 16, height: 16 }} />
+            <span>X: 1204.5 Y: 832.1</span>
+          </span>
+        ),
+      }),
+      StatusBarItemUtilities.createCustomItem({
+        id: "co-status-units",
+        section: StatusBarSection.Left,
+        itemPriority: 20,
+        content: (
+          <span style={{ display: "flex", alignItems: "center", gap: 4 }}>
+            <SvgInfo style={{ width: 16, height: 16 }} />
+            <span>Meters</span>
+          </span>
+        ),
+      }),
+      StatusBarItemUtilities.createCustomItem({
+        id: "co-status-connection",
+        section: StatusBarSection.Left,
+        itemPriority: 30,
+        content: (
+          <span style={{ display: "flex", alignItems: "center", gap: 4 }}>
+            <SvgNetwork style={{ width: 16, height: 16 }} />
+            <span>Connected</span>
+          </span>
+        ),
+      }),
+    ],
+  };
+}
diff --git a/apps/test-app/src/frontend/registerFrontstages.tsx b/apps/test-app/src/frontend/registerFrontstages.tsx
index 210c0d176f1..12a0017ce45 100644
--- a/apps/test-app/src/frontend/registerFrontstages.tsx
+++ b/apps/test-app/src/frontend/registerFrontstages.tsx
@@ -55,6 +55,10 @@ import {
   createSpatialFrontstageProvider,
 } from "./appui/frontstages/SpatialFrontstage";
 import { createTestToolSettingsFrontstage } from "./appui/frontstages/TestToolSettingsFrontstage";
+import {
+  createContentOverlayFrontstage,
+  createContentOverlayProvider,
+} from "./appui/frontstages/ContentOverlayFrontstage";
 
 interface RegisterFrontstagesArgs {
   iModelConnection?: IModelConnection;
@@ -88,6 +92,7 @@ export function registerFrontstages({
     createPopoutWindowsFrontstage(),
     createITwinUIV2Frontstage(),
     createSpatialFrontstage(),
+    createContentOverlayFrontstage(),
   ];
   frontstages.forEach((frontstage) => {
     UiFramework.frontstages.addFrontstage(frontstage);
@@ -163,6 +168,9 @@ export function registerFrontstages({
   UiItemsManager.register(createSpatialFrontstageProvider(), {
     stageIds: [createSpatialFrontstage.stageId],
   });
+  UiItemsManager.register(createContentOverlayProvider(), {
+    stageIds: [createContentOverlayFrontstage.stageId],
+  });
 
   if (IpcApp.isValid) {
     UiFramework.frontstages.addFrontstage(createEditorFrontstage());
diff --git a/ui/appui-react/src/appui-react.ts b/ui/appui-react/src/appui-react.ts
index 0581df9b541..b9778c529b5 100644
--- a/ui/appui-react/src/appui-react.ts
+++ b/ui/appui-react/src/appui-react.ts
@@ -90,6 +90,10 @@ export {
   ConfigurableUiContent,
   StandardLayout,
 } from "./appui-react/configurableui/ConfigurableUiContent.js";
+export {
+  CondensedLayout,
+  CondensedLayoutProps,
+} from "./appui-react/configurableui/CondensedLayout.js";
 export {
   ConfigurableBase,
   ConfigurableCreateInfo,
@@ -808,6 +812,12 @@ export {
   BasicToolWidget,
   BasicToolWidgetProps,
 } from "./appui-react/widgets/BasicToolWidget.js";
+export { BottomContentToolWidgetComposer } from "./appui-react/widgets/BottomContentToolWidgetComposer.js";
+export {
+  BottomToolWidgetComposer,
+  BottomToolWidgetComposerProps,
+} from "./appui-react/widgets/BottomToolWidgetComposer.js";
+export { BottomViewToolWidgetComposer } from "./appui-react/widgets/BottomViewToolWidgetComposer.js";
 export {
   ContentToolWidgetComposer,
   ContentToolWidgetComposerProps,
diff --git a/ui/appui-react/src/appui-react/configurableui/CondensedLayout.tsx b/ui/appui-react/src/appui-react/configurableui/CondensedLayout.tsx
new file mode 100644
index 00000000000..4e26b526223
--- /dev/null
+++ b/ui/appui-react/src/appui-react/configurableui/CondensedLayout.tsx
@@ -0,0 +1,254 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module ConfigurableUi
+ */
+
+import * as React from "react";
+import type { StagePanelSection } from "../stagepanels/StagePanelSection.js";
+import type { StagePanelLocation } from "../stagepanels/StagePanelLocation.js";
+import { ConfigurableUiContext } from "./ConfigurableUiContent.js";
+import { WidgetPanelsFrontstage } from "../widget-panels/Frontstage.js";
+import { CursorInformation } from "../cursor/CursorInformation.js";
+import { CursorPopupMenu } from "../cursor/cursormenu/CursorMenu.js";
+import { CursorPopupRenderer } from "../cursor/cursorpopup/CursorPopupManager.js";
+import { ModalDialogRenderer } from "../dialog/ModalDialogManager.js";
+import { ModelessDialogRenderer } from "../dialog/ModelessDialogManager.js";
+import { ElementTooltip } from "../feedback/ElementTooltip.js";
+import { KeyboardShortcutMenu } from "../keyboardshortcut/KeyboardShortcutMenu.js";
+import { InputFieldMessage } from "../messages/InputField.js";
+import { PointerMessage } from "../messages/Pointer.js";
+import { PopupRenderer } from "../popup/PopupManager.js";
+import { ContentDialogRenderer } from "../dialog/ContentDialogManager.js";
+import { appUi, UiFramework } from "../UiFramework.js";
+import { InternalConfigurableUiManager } from "./InternalConfigurableUiManager.js";
+import { MessageRenderer } from "../messages/MessageRenderer.js";
+import {
+  TOOLBAR_OPACITY_DEFAULT,
+  WIDGET_OPACITY_DEFAULT,
+} from "../theme/ThemeId.js";
+import { useReduxFrameworkState } from "../uistate/useReduxFrameworkState.js";
+import { ChildWindowRenderer } from "../childwindow/ChildWindowRenderer.js";
+import { useActiveIModelConnection } from "../hooks/useActiveIModelConnection.js";
+import { EditorsRegistryProvider } from "@itwin/components-react";
+import {
+  IModelConnectionProvider,
+  QuantityEditorSpec,
+} from "@itwin/imodel-components-react";
+import { ThemeProvider } from "@itwin/itwinui-react";
+import { Point } from "@itwin/core-react/internal";
+import { WrapperContext } from "./ConfigurableUiContent.js";
+
+interface ToolSettingsLocation {
+  section: StagePanelSection;
+  location: StagePanelLocation;
+}
+
+/** Properties for [[CondensedLayout]].
+ * @alpha
+ */
+export interface CondensedLayoutProps {
+  /** Overrides widget specific actions displayed in the title bar area.
+   * @alpha
+   */
+  widgetActions?: React.ReactNode;
+  /** When enabled keeps the tool settings visible to the end user.
+   * @alpha
+   */
+  visibleToolSettings?: boolean;
+  /** Tool settings related configuration.
+   * @alpha
+   */
+  toolSettings?: {
+    /** The default location of the tool settings.
+     * @alpha
+     */
+    defaultLocation?: ToolSettingsLocation;
+  };
+  /** Content rendered in a reserved zone between the widget panels, overlaying the main content area.
+   * @alpha
+   */
+  contentOverlay?: React.ReactNode;
+}
+
+const defaultEditors = [QuantityEditorSpec];
+
+/**
+ * A condensed layout variant that eliminates wasted whitespace by rendering the status bar as
+ * floating pills at the bottom of the center area and tool settings as a collapsible overlay
+ * at the top center. The `contentOverlay` prop allows an iframe parent to reserve space at the
+ * top of the content area.
+ *
+ * Use this as the `layout` prop on a frontstage configuration:
+ * ```tsx
+ * const frontstage = {
+ *   ...config,
+ *   layout: <CondensedLayout />,
+ * };
+ * ```
+ * @alpha
+ */
+export function CondensedLayout(props: CondensedLayoutProps) {
+  const {
+    widgetActions,
+    visibleToolSettings = false,
+    toolSettings,
+    contentOverlay,
+  } = props;
+  const context = React.useContext(ConfigurableUiContext);
+  const {
+    appBackstage,
+    widgetOpacity,
+    toolbarOpacity,
+    idleTimeout,
+    intervalTimeout,
+  } = context;
+
+  const contentElementRef = React.useRef<HTMLElement>(null);
+  useWidgetOpacity(widgetOpacity);
+  useToolbarOpacity(toolbarOpacity);
+  const [mainElement, setMainElement] = React.useState<HTMLElement>();
+  const [portalContainer, setPortalContainer] = React.useState<HTMLElement>();
+  React.useEffect(() => {
+    UiFramework.keyboardShortcuts.setFocusToHome();
+  }, []);
+
+  React.useEffect(() => {
+    InternalConfigurableUiManager.activityTracker.initialize({
+      idleTimeout,
+      intervalTimeout,
+    });
+    return () => {
+      InternalConfigurableUiManager.activityTracker.terminate();
+    };
+  }, [idleTimeout, intervalTimeout]);
+  useVisibleToolSettings(visibleToolSettings);
+
+  return (
+    <ConfigurableUiContext.Provider
+      value={React.useMemo(
+        () => ({
+          ...context,
+          contentElementRef,
+          widgetActions,
+          toolSettings,
+          contentOverlay,
+          statusBarOverlay: true,
+        }),
+        [context, widgetActions, toolSettings, contentOverlay]
+      )}
+    >
+      <main
+        role="main"
+        id="uifw-configurableui-wrapper"
+        className={context.className}
+        style={context.style}
+        onMouseMove={(e) => {
+          const point = new Point(e.pageX, e.pageY);
+          CursorInformation.handleMouseMove(point, e.view.document);
+        }}
+        ref={(el) => setMainElement(el ?? undefined)}
+      >
+        <WrapperContext.Provider value={mainElement ?? document.body}>
+          <ThemeProvider
+            style={{ height: "100%" }}
+            portalContainer={portalContainer}
+          >
+            <IModelProvider>
+              <EditorsRegistryProvider editors={defaultEditors}>
+                {appBackstage}
+                <WidgetPanelsFrontstage />
+
+                <PointerMessage />
+                {/* eslint-disable-next-line @typescript-eslint/no-deprecated */}
+                <KeyboardShortcutMenu />
+                {/* eslint-disable-next-line @typescript-eslint/no-deprecated */}
+                <InputFieldMessage />
+                <CursorPopupMenu />
+                <CursorPopupRenderer />
+                <PopupRenderer />
+                <ElementTooltip />
+                <MessageRenderer />
+                <ChildWindowRenderer windowManager={appUi.windowManager} />
+                <div
+                  className="uifw-configurableui-portalContainer"
+                  ref={(instance) => setPortalContainer(instance ?? undefined)}
+                >
+                  <ContentDialogRenderer />
+                  <ModelessDialogRenderer />
+                  <ModalDialogRenderer />
+                </div>
+              </EditorsRegistryProvider>
+            </IModelProvider>
+          </ThemeProvider>
+        </WrapperContext.Provider>
+      </main>
+    </ConfigurableUiContext.Provider>
+  );
+}
+
+function IModelProvider({ children }: React.PropsWithChildren) {
+  const iModelConnection = useActiveIModelConnection();
+  if (!iModelConnection) return <>{children}</>;
+  return (
+    <IModelConnectionProvider iModelConnection={iModelConnection}>
+      {children}
+    </IModelConnectionProvider>
+  );
+}
+
+function useWidgetOpacity(widgetOpacity: number | undefined) {
+  const reduxWidgetOpacity = useReduxFrameworkState((state) => {
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    return state?.configurableUiState.widgetOpacity;
+  });
+  const opacity = widgetOpacity ?? reduxWidgetOpacity ?? WIDGET_OPACITY_DEFAULT;
+
+  React.useEffect(() => {
+    const currentWidgetOpacity =
+      document.documentElement.style.getPropertyValue("--buic-widget-opacity");
+    if (currentWidgetOpacity === opacity.toString()) return;
+    document.documentElement.style.setProperty(
+      "--buic-widget-opacity",
+      opacity.toString()
+    );
+    return () => {
+      document.documentElement.style.removeProperty("--buic-widget-opacity");
+    };
+  }, [opacity]);
+}
+
+function useToolbarOpacity(toolbarOpacity: number | undefined) {
+  const reduxToolbarOpacity = useReduxFrameworkState((state) => {
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    return state?.configurableUiState.toolbarOpacity;
+  });
+  const opacity =
+    toolbarOpacity ?? reduxToolbarOpacity ?? TOOLBAR_OPACITY_DEFAULT;
+  React.useEffect(() => {
+    const currentToolbarOpacity =
+      document.documentElement.style.getPropertyValue("--buic-toolbar-opacity");
+    if (currentToolbarOpacity === opacity.toString()) return;
+    document.documentElement.style.setProperty(
+      "--buic-toolbar-opacity",
+      opacity.toString()
+    );
+    return () => {
+      document.documentElement.style.removeProperty("--buic-toolbar-opacity");
+    };
+  }, [opacity]);
+}
+
+function useVisibleToolSettings(visibleToolSettings: boolean) {
+  React.useEffect(() => {
+    if (!visibleToolSettings) return;
+    return UiFramework.frontstages.onToolSettingsReloadEvent.addListener(() => {
+      const frontstage = UiFramework.frontstages.activeFrontstageDef;
+      const toolSettings = frontstage?.toolSettings;
+      if (!toolSettings) return;
+      toolSettings.show();
+    });
+  }, [visibleToolSettings]);
+}
diff --git a/ui/appui-react/src/appui-react/configurableui/ConfigurableUiContent.tsx b/ui/appui-react/src/appui-react/configurableui/ConfigurableUiContent.tsx
index 5029604b127..1fa636c0f20 100644
--- a/ui/appui-react/src/appui-react/configurableui/ConfigurableUiContent.tsx
+++ b/ui/appui-react/src/appui-react/configurableui/ConfigurableUiContent.tsx
@@ -53,6 +53,8 @@ export const ConfigurableUiContext = React.createContext<
     contentElementRef?: React.RefObject<HTMLElement | null>;
     widgetActions?: StandardLayoutProps["widgetActions"];
     toolSettings?: StandardLayoutProps["toolSettings"];
+    contentOverlay?: StandardLayoutProps["contentOverlay"];
+    statusBarOverlay?: StandardLayoutProps["statusBarOverlay"];
   }
 >({});
 
@@ -142,13 +144,32 @@ interface StandardLayoutProps {
      */
     defaultLocation?: ToolSettingsLocation;
   };
+  /** Content rendered in a reserved zone between the widget panels, overlaying the main content area.
+   * This area respects the widget panel boundaries, allowing a parent application to place its own components
+   * on top of the AppUI content while AppUI elements account for this space.
+   * @alpha
+   */
+  contentOverlay?: React.ReactNode;
+  /** When `true`, the status bar renders at the bottom of the center area between
+   * the widget panels (overlaying the viewport) instead of in its own full-width
+   * grid row. This gives the status bar items a similar appearance to `contentOverlay`
+   * but anchored at the bottom.
+   * @alpha
+   */
+  statusBarOverlay?: boolean;
 }
 
 /** The standard widget based layout used as a default layout for all frontstages.
  * @alpha
  */
 export function StandardLayout(props: StandardLayoutProps) {
-  const { widgetActions, visibleToolSettings = false, toolSettings } = props;
+  const {
+    widgetActions,
+    visibleToolSettings = false,
+    toolSettings,
+    contentOverlay,
+    statusBarOverlay,
+  } = props;
   const context = React.useContext(ConfigurableUiContext);
   const {
     appBackstage,
@@ -186,8 +207,10 @@ export function StandardLayout(props: StandardLayoutProps) {
           contentElementRef,
           widgetActions,
           toolSettings,
+          contentOverlay,
+          statusBarOverlay,
         }),
-        [context, widgetActions, toolSettings]
+        [context, widgetActions, toolSettings, contentOverlay, statusBarOverlay]
       )}
     >
       <main
diff --git a/ui/appui-react/src/appui-react/frontstage/FrontstageConfig.ts b/ui/appui-react/src/appui-react/frontstage/FrontstageConfig.ts
index 30bae1af019..40e16d0983a 100644
--- a/ui/appui-react/src/appui-react/frontstage/FrontstageConfig.ts
+++ b/ui/appui-react/src/appui-react/frontstage/FrontstageConfig.ts
@@ -50,6 +50,10 @@ export interface FrontstageConfig extends CommonProps {
   };
   /** The top-right corner that shows view navigation tools. */
   readonly viewNavigation?: WidgetConfig;
+  /** The bottom-left corner that shows tools typically used to query and modify content. */
+  readonly bottomContentManipulation?: WidgetConfig;
+  /** The bottom-right corner that shows view navigation tools. */
+  readonly bottomViewNavigation?: WidgetConfig;
   /** The status bar of the application. */
   readonly statusBar?: WidgetConfig;
 
diff --git a/ui/appui-react/src/appui-react/frontstage/FrontstageDef.tsx b/ui/appui-react/src/appui-react/frontstage/FrontstageDef.tsx
index 3e00e605d94..e59c6fc4d29 100644
--- a/ui/appui-react/src/appui-react/frontstage/FrontstageDef.tsx
+++ b/ui/appui-react/src/appui-react/frontstage/FrontstageDef.tsx
@@ -80,6 +80,8 @@ export class FrontstageDef {
   private _statusBar?: WidgetDef;
   private _contentManipulation?: WidgetDef;
   private _viewNavigation?: WidgetDef;
+  private _bottomContentManipulation?: WidgetDef;
+  private _bottomViewNavigation?: WidgetDef;
   private _topPanel?: StagePanelDef;
   private _leftPanel?: StagePanelDef;
   private _rightPanel?: StagePanelDef;
@@ -130,6 +132,12 @@ export class FrontstageDef {
   public get viewNavigation(): WidgetDef | undefined {
     return this._viewNavigation;
   }
+  public get bottomContentManipulation(): WidgetDef | undefined {
+    return this._bottomContentManipulation;
+  }
+  public get bottomViewNavigation(): WidgetDef | undefined {
+    return this._bottomViewNavigation;
+  }
 
   public get topPanel(): StagePanelDef | undefined {
     return this._topPanel;
@@ -600,6 +608,14 @@ export class FrontstageDef {
       config.viewNavigation,
       WidgetType.Navigation
     );
+    this._bottomContentManipulation = createWidgetDef(
+      config.bottomContentManipulation,
+      WidgetType.Tool
+    );
+    this._bottomViewNavigation = createWidgetDef(
+      config.bottomViewNavigation,
+      WidgetType.Navigation
+    );
     this._topPanel = createStagePanelDef(config, StagePanelLocation.Top);
     this._leftPanel = createStagePanelDef(config, StagePanelLocation.Left);
     this._rightPanel = createStagePanelDef(config, StagePanelLocation.Right);
diff --git a/ui/appui-react/src/appui-react/layout/StandardLayout.scss b/ui/appui-react/src/appui-react/layout/StandardLayout.scss
index 503f2dc56d3..c436c88d30b 100644
--- a/ui/appui-react/src/appui-react/layout/StandardLayout.scss
+++ b/ui/appui-react/src/appui-react/layout/StandardLayout.scss
@@ -33,10 +33,45 @@
       grid-area: ts;
     }
 
-    > .nz-centerContent {
+    > .nz-centerArea {
       grid-area: cc;
+      position: relative;
 
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
       pointer-events: none;
+
+      > .nz-contentOverlay {
+        flex-shrink: 0;
+        pointer-events: auto;
+      }
+
+      > .nz-toolSettingsOverlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        pointer-events: none;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        z-index: 1;
+
+        > * {
+          pointer-events: auto;
+        }
+      }
+
+      > .nz-centerContent {
+        flex: 1;
+        min-height: 0;
+      }
+
+      > .nz-statusBarOverlay {
+        flex-shrink: 0;
+        pointer-events: auto;
+      }
     }
 
     > .nz-statusBar {
@@ -84,3 +119,93 @@
     grid-area: bp;
   }
 }
+
+// Outside @layer so these overrides beat unlayered StatusBar/DockedBar styles.
+.nz-toolSettingsOverlay {
+  margin-top: var(--iui-size-s);
+
+  .uifw-overlay-toolSettings-container {
+    background-color: var(--iui-color-background);
+    border-radius: var(--iui-border-radius-1);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    padding: var(--iui-size-s);
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .uifw-overlay-toolSettings-collapseHandle {
+    display: flex;
+    justify-content: center;
+    cursor: pointer;
+
+    .uifw-overlay-toolSettings-grip {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 48px;
+      height: 16px;
+      background-color: var(--iui-color-background);
+      border: 1px solid var(--iui-color-border-foreground);
+      border-radius: 999px;
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      box-sizing: border-box;
+      opacity: 0.6;
+      transition: opacity 0.2s ease-out;
+
+      .uifw-overlay-toolSettings-grip-detail {
+        width: 70%;
+        border-top: 1px solid var(--iui-color-border-foreground);
+      }
+    }
+
+    &:hover .uifw-overlay-toolSettings-grip {
+      opacity: 1;
+    }
+  }
+
+  .uifw-overlay-toolSettings-expandButton {
+    background-color: var(--iui-color-background);
+    border-radius: var(--iui-border-radius-1);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    padding: var(--iui-size-3xs) var(--iui-size-2xs);
+
+    svg {
+      width: 14px;
+      height: 14px;
+    }
+  }
+}
+
+.nz-statusBarOverlay {
+  margin-bottom: var(--iui-size-m);
+
+  .uifw-dockedBar {
+    background-color: transparent;
+    border: none;
+  }
+
+  .uifw-statusBar-docked {
+    background-color: transparent;
+
+    .uifw-statusBar-item-container {
+      background-color: var(--iui-color-background);
+      border-radius: var(--iui-border-radius-1);
+      padding: var(--iui-size-m) var(--iui-size-xs);
+      margin-left: var(--iui-size-xs);
+    }
+  }
+
+  .uifw-statusBar-left,
+  .uifw-statusBar-center,
+  .uifw-statusBar-right {
+    gap: var(--iui-size-xs);
+  }
+
+  .uifw-statusBar-space-between {
+    padding: var(--iui-size-s) var(--iui-size-s) var(--iui-size-s)
+      calc(var(--iui-size-xl) + var(--iui-size-s));
+    gap: var(--iui-size-xs);
+  }
+}
diff --git a/ui/appui-react/src/appui-react/layout/StandardLayout.tsx b/ui/appui-react/src/appui-react/layout/StandardLayout.tsx
index 51baa813f73..3fcfc1e161f 100644
--- a/ui/appui-react/src/appui-react/layout/StandardLayout.tsx
+++ b/ui/appui-react/src/appui-react/layout/StandardLayout.tsx
@@ -25,6 +25,15 @@ interface StandardLayoutProps extends CommonProps {
   children?: React.ReactNode;
   /** Component that displays center content (i.e. toolbars). Content is always bound by widget panels. */
   centerContent?: React.ReactNode;
+  /** Content rendered in a reserved zone between the widget panels, overlaying the main content area.
+   * Occupies the same grid cell as center content but is rendered below toolbars and above the viewport.
+   */
+  contentOverlay?: React.ReactNode;
+  /** When `true`, the status bar renders at the bottom of the center area between
+   * the widget panels (overlaying the viewport) instead of in its own full-width
+   * grid row. This mirrors the `contentOverlay` placement but at the bottom.
+   */
+  statusBarOverlay?: boolean;
   toolSettings?: React.ReactNode;
   statusBar?: React.ReactNode;
   topPanel?: React.ReactNode;
@@ -51,13 +60,28 @@ export function StandardLayout(props: StandardLayoutProps) {
       >
         {props.children}
       </div>
-      <div className="nz-centerContent">{props.centerContent}</div>
+      <div className="nz-centerArea">
+        {props.statusBarOverlay && (
+          <div className="nz-toolSettingsOverlay">{props.toolSettings}</div>
+        )}
+        {props.contentOverlay && (
+          <div className="nz-contentOverlay">{props.contentOverlay}</div>
+        )}
+        <div className="nz-centerContent">{props.centerContent}</div>
+        {props.statusBarOverlay && (
+          <div className="nz-statusBarOverlay">{props.statusBar}</div>
+        )}
+      </div>
       <Panel side="left">{props.leftPanel}</Panel>
       <Panel side="right">{props.rightPanel}</Panel>
       <Panel side="top">{props.topPanel}</Panel>
       <Panel side="bottom">{props.bottomPanel}</Panel>
-      <div className="nz-toolSettings">{props.toolSettings}</div>
-      <div className="nz-statusBar">{props.statusBar}</div>
+      {!props.statusBarOverlay && (
+        <div className="nz-toolSettings">{props.toolSettings}</div>
+      )}
+      {!props.statusBarOverlay && (
+        <div className="nz-statusBar">{props.statusBar}</div>
+      )}
     </div>
   );
 }
diff --git a/ui/appui-react/src/appui-react/toolbar/ToolbarComposer.tsx b/ui/appui-react/src/appui-react/toolbar/ToolbarComposer.tsx
index 568b72ad53a..4aa3bd639cc 100644
--- a/ui/appui-react/src/appui-react/toolbar/ToolbarComposer.tsx
+++ b/ui/appui-react/src/appui-react/toolbar/ToolbarComposer.tsx
@@ -257,10 +257,20 @@ export function ToolbarComposer(props: ExtensibleToolbarProps) {
 
 function toExpandsTo(orientation: ToolbarOrientation, usage: ToolbarUsage) {
   if (orientation === ToolbarOrientation.Vertical) {
-    if (usage === ToolbarUsage.ViewNavigation) return Direction.Left;
+    if (
+      usage === ToolbarUsage.ViewNavigation ||
+      usage === ToolbarUsage.BottomViewNavigation
+    )
+      return Direction.Left;
     return Direction.Right;
   }
 
+  if (
+    usage === ToolbarUsage.BottomContentManipulation ||
+    usage === ToolbarUsage.BottomViewNavigation
+  )
+    return Direction.Top;
+
   return Direction.Bottom;
 }
 
@@ -270,7 +280,8 @@ function toPanelAlignment(
 ) {
   if (
     orientation === ToolbarOrientation.Horizontal &&
-    usage === ToolbarUsage.ViewNavigation
+    (usage === ToolbarUsage.ViewNavigation ||
+      usage === ToolbarUsage.BottomViewNavigation)
   )
     return ToolbarPanelAlignment.End;
 
diff --git a/ui/appui-react/src/appui-react/toolbar/ToolbarItem.ts b/ui/appui-react/src/appui-react/toolbar/ToolbarItem.ts
index 9d3859efa2d..598a3c1b6ca 100644
--- a/ui/appui-react/src/appui-react/toolbar/ToolbarItem.ts
+++ b/ui/appui-react/src/appui-react/toolbar/ToolbarItem.ts
@@ -22,6 +22,10 @@ export enum ToolbarUsage {
   ContentManipulation = 0,
   /** Manipulate view/camera - in AppUI this is in top right of content area. */
   ViewNavigation = 1,
+  /** Contains tools to create, update, and delete content - rendered in bottom left of content area. */
+  BottomContentManipulation = 2,
+  /** Manipulate view/camera - rendered in bottom right of content area. */
+  BottomViewNavigation = 3,
 }
 
 /** Used to specify the orientation of the toolbar.
diff --git a/ui/appui-react/src/appui-react/widget-panels/Frontstage.tsx b/ui/appui-react/src/appui-react/widget-panels/Frontstage.tsx
index 4811cb57ba1..8cd1463c485 100644
--- a/ui/appui-react/src/appui-react/widget-panels/Frontstage.tsx
+++ b/ui/appui-react/src/appui-react/widget-panels/Frontstage.tsx
@@ -74,6 +74,9 @@ function WidgetPanelsFrontstageComponent() {
   const activeModalFrontstageInfo = useActiveModalFrontstageInfo();
   const uiIsVisible = useUiVisibility();
   const previewFeatures = usePreviewFeatures();
+  const { contentOverlay, statusBarOverlay } = React.useContext(
+    ConfigurableUiContext
+  );
   useCursor();
 
   return (
@@ -90,6 +93,8 @@ function WidgetPanelsFrontstageComponent() {
                 <WidgetPanelExpanders />
               </>
             }
+            contentOverlay={contentOverlay}
+            statusBarOverlay={statusBarOverlay}
             toolSettings={<WidgetPanelsToolSettings />}
             statusBar={<WidgetPanelsStatusBar />}
             topPanel={<WidgetPanelProvider side="top" />}
diff --git a/ui/appui-react/src/appui-react/widget-panels/ToolSettings.tsx b/ui/appui-react/src/appui-react/widget-panels/ToolSettings.tsx
index c49723f718a..e4d277a0148 100644
--- a/ui/appui-react/src/appui-react/widget-panels/ToolSettings.tsx
+++ b/ui/appui-react/src/appui-react/widget-panels/ToolSettings.tsx
@@ -8,7 +8,8 @@
 
 import * as React from "react";
 import { IModelApp } from "@itwin/core-frontend";
-import { Text } from "@itwin/itwinui-react";
+import { IconButton, Text } from "@itwin/itwinui-react";
+import { SvgSettings } from "@itwin/itwinui-icons-react";
 import { UiFramework } from "../UiFramework.js";
 import { InternalFrontstageManager } from "../frontstage/InternalFrontstageManager.js";
 import { useLayout } from "../layout/base/LayoutStore.js";
@@ -23,6 +24,7 @@ import { useActiveFrontstageDef } from "../frontstage/FrontstageDef.js";
 import { LockProvider } from "../editors/LockProvider.js";
 import { ToolSettingsEditorsProvider } from "../preview/tool-settings-lock-button/useToolSettingsLockButton.js";
 import { ToolSettingsContext } from "../preview/tool-settings-key-press-commit/useToolSettingsKeyPressCommit.js";
+import { ConfigurableUiContext } from "../configurableui/ConfigurableUiContent.js";
 
 /** Defines a ToolSettings property entry.
  * @public
@@ -60,8 +62,14 @@ export function useShouldRenderDockedToolSettings() {
 
 /** @internal */
 export function WidgetPanelsToolSettings() {
-  if (!useShouldRenderDockedToolSettings()) return null;
-  return <ToolSettingsDockedContent />;
+  const { statusBarOverlay } = React.useContext(ConfigurableUiContext);
+  const shouldRenderDocked = useShouldRenderDockedToolSettings();
+  // In overlay mode, render tool settings vertically (like floating mode).
+  // Keys force React to unmount/remount cleanly when switching modes.
+  if (statusBarOverlay)
+    return <ToolSettingsOverlayContent key="overlay-content" />;
+  if (!shouldRenderDocked) return null;
+  return <ToolSettingsDockedContent key="docked-content" />;
 }
 
 /** @internal */
@@ -172,6 +180,76 @@ export function useToolSettingsNode(): React.ReactNode {
   return settings;
 }
 
+/** Tracks collapsed state per tool id for overlay tool settings. */
+const overlayCollapsedState = new Map<string, boolean>();
+
+/** Renders tool settings vertically in overlay mode (like floating/widget mode). */
+function ToolSettingsOverlayContent() {
+  const node = useToolSettingsNode();
+  const activeToolId = useActiveToolId();
+  const forceRefreshKey = useRefreshKey(node);
+
+  const toolKey = activeToolId ?? "unknown";
+  const [collapsed, setCollapsed] = React.useState(
+    () => overlayCollapsedState.get(toolKey) ?? false
+  );
+
+  // Sync collapsed state when active tool changes.
+  React.useEffect(() => {
+    setCollapsed(overlayCollapsedState.get(toolKey) ?? false);
+  }, [toolKey]);
+
+  const handleToggle = React.useCallback(() => {
+    setCollapsed((prev) => {
+      const next = !prev;
+      overlayCollapsedState.set(toolKey, next);
+      return next;
+    });
+  }, [toolKey]);
+
+  if (!node) return null;
+
+  const providerId =
+    InternalFrontstageManager.activeToolSettingsProvider?.uniqueId ?? "none";
+
+  if (collapsed) {
+    return (
+      <IconButton
+        className="uifw-overlay-toolSettings-expandButton"
+        styleType="default"
+        size="small"
+        onClick={handleToggle}
+        title="Show tool settings"
+      >
+        <SvgSettings />
+      </IconButton>
+    );
+  }
+
+  return (
+    <>
+      <div
+        data-toolsettings-provider={providerId}
+        className="uifw-overlay-toolSettings-container"
+        key={forceRefreshKey}
+      >
+        <ToolSettingsContext.Provider value={true}>
+          <ToolSettingsEditorsProvider>{node}</ToolSettingsEditorsProvider>
+        </ToolSettingsContext.Provider>
+      </div>
+      <div
+        className="uifw-overlay-toolSettings-collapseHandle"
+        onClick={handleToggle}
+        title="Hide tool settings"
+      >
+        <div className="uifw-overlay-toolSettings-grip">
+          <div className="uifw-overlay-toolSettings-grip-detail" />
+        </div>
+      </div>
+    </>
+  );
+}
+
 /** @internal */
 export function ToolSettingsContent() {
   const toolSettingsType = useLayout((state) => state.toolSettings?.type);
diff --git a/ui/appui-react/src/appui-react/widget-panels/Toolbars.scss b/ui/appui-react/src/appui-react/widget-panels/Toolbars.scss
index 13b80312987..37a3751924f 100644
--- a/ui/appui-react/src/appui-react/widget-panels/Toolbars.scss
+++ b/ui/appui-react/src/appui-react/widget-panels/Toolbars.scss
@@ -11,12 +11,59 @@
   ); // TODO: Change this to an AppUI global CSS variable.
   box-sizing: border-box;
   grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto 1fr auto;
 
   .nz-tools-widget {
     grid-column: 1;
+    grid-row: 1;
 
     &.nz-widget-navigationArea {
       grid-column: 2;
+      grid-row: 1;
+    }
+  }
+
+  .uifw-widgetPanels-bottomToolbars {
+    grid-column: 1 / -1;
+    grid-row: 3;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    pointer-events: none;
+
+    > * {
+      pointer-events: auto;
+    }
+  }
+
+  .uifw-bottom-toolArea {
+    display: grid;
+    grid-gap: 6px;
+    grid-template-areas:
+      "vtools ."
+      "vtools htools";
+    grid-template-columns: auto 1fr;
+    grid-template-rows: 1fr auto;
+    align-items: end;
+    justify-items: start;
+  }
+
+  .uifw-bottom-toolArea_vertical {
+    grid-area: vtools;
+    display: inline-flex;
+    flex-direction: column;
+  }
+
+  .uifw-bottom-toolArea_horizontal {
+    grid-area: htools;
+    min-width: 0;
+  }
+
+  .uifw-bottom-toolArea_right {
+    margin-left: auto;
+
+    .uifw-bottom-toolArea {
+      justify-items: end;
     }
   }
 }
diff --git a/ui/appui-react/src/appui-react/widget-panels/Toolbars.tsx b/ui/appui-react/src/appui-react/widget-panels/Toolbars.tsx
index 00cb40bf9b8..87dca3664e9 100644
--- a/ui/appui-react/src/appui-react/widget-panels/Toolbars.tsx
+++ b/ui/appui-react/src/appui-react/widget-panels/Toolbars.tsx
@@ -16,10 +16,20 @@ export function WidgetPanelsToolbars() {
   const frontstageDef = useActiveFrontstageDef();
   const tools = frontstageDef?.contentManipulation?.reactNode;
   const navigation = frontstageDef?.viewNavigation?.reactNode;
+  const bottomTools = frontstageDef?.bottomContentManipulation?.reactNode;
+  const bottomNavigation = frontstageDef?.bottomViewNavigation?.reactNode;
   return (
     <div className="uifw-widgetPanels-toolbars">
       {tools}
       <NavigationWidget>{navigation}</NavigationWidget>
+      {(bottomTools || bottomNavigation) && (
+        <div className="uifw-widgetPanels-bottomToolbars">
+          {bottomTools}
+          {bottomNavigation && (
+            <div className="uifw-bottom-toolArea_right">{bottomNavigation}</div>
+          )}
+        </div>
+      )}
     </div>
   );
 }
diff --git a/ui/appui-react/src/appui-react/widgets/BottomContentToolWidgetComposer.tsx b/ui/appui-react/src/appui-react/widgets/BottomContentToolWidgetComposer.tsx
new file mode 100644
index 00000000000..9e7c94d7d83
--- /dev/null
+++ b/ui/appui-react/src/appui-react/widgets/BottomContentToolWidgetComposer.tsx
@@ -0,0 +1,38 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Widget
+ */
+
+import * as React from "react";
+import { ToolbarComposer } from "../toolbar/ToolbarComposer.js";
+import { BottomToolWidgetComposer } from "./BottomToolWidgetComposer.js";
+import { ToolbarOrientation, ToolbarUsage } from "../toolbar/ToolbarItem.js";
+
+/**
+ * BottomContentToolWidgetComposer composes a bottom-left tool widget populated by UiItemsProviders
+ * using the `BottomContentManipulation` usage.
+ * @public
+ */
+export function BottomContentToolWidgetComposer() {
+  return (
+    <BottomToolWidgetComposer
+      horizontalToolbar={
+        <ToolbarComposer
+          items={[]}
+          usage={ToolbarUsage.BottomContentManipulation}
+          orientation={ToolbarOrientation.Horizontal}
+        />
+      }
+      verticalToolbar={
+        <ToolbarComposer
+          items={[]}
+          usage={ToolbarUsage.BottomContentManipulation}
+          orientation={ToolbarOrientation.Vertical}
+        />
+      }
+    />
+  );
+}
diff --git a/ui/appui-react/src/appui-react/widgets/BottomToolWidgetComposer.tsx b/ui/appui-react/src/appui-react/widgets/BottomToolWidgetComposer.tsx
new file mode 100644
index 00000000000..336d28c2a16
--- /dev/null
+++ b/ui/appui-react/src/appui-react/widgets/BottomToolWidgetComposer.tsx
@@ -0,0 +1,86 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Widget
+ */
+
+import {
+  useProximityToMouse,
+  WidgetElementSet,
+  WidgetOpacityContext,
+} from "@itwin/core-react/internal";
+import * as React from "react";
+import { UiFramework } from "../UiFramework.js";
+import { useUiVisibility } from "../hooks/useUiVisibility.js";
+
+/** Properties for [[BottomToolWidgetComposer]].
+ * @public
+ */
+export interface BottomToolWidgetComposerProps {
+  /** Optional Horizontal Toolbar */
+  horizontalToolbar?: React.ReactNode;
+  /** Optional Vertical Toolbar */
+  verticalToolbar?: React.ReactNode;
+}
+
+/**
+ * BottomToolWidgetComposer renders an L-shaped toolbar area at the bottom of the content area,
+ * with a vertical toolbar on the left and a horizontal toolbar along the bottom.
+ * @public
+ */
+export function BottomToolWidgetComposer(props: BottomToolWidgetComposerProps) {
+  const { horizontalToolbar, verticalToolbar } = props;
+  const [elementSet] = React.useState(new WidgetElementSet());
+  const proximityScale = useProximityToMouse(
+    elementSet,
+    UiFramework.visibility.snapWidgetOpacity
+  );
+  const uiIsVisible = useUiVisibility();
+
+  const addRef = React.useCallback<
+    React.ContextType<typeof WidgetOpacityContext>["addRef"]
+  >(
+    (ref) => {
+      elementSet.add(ref);
+    },
+    [elementSet]
+  );
+  const removeRef = React.useCallback<
+    React.ContextType<typeof WidgetOpacityContext>["removeRef"]
+  >(
+    (ref) => {
+      elementSet.delete(ref);
+    },
+    [elementSet]
+  );
+
+  return (
+    <WidgetOpacityContext.Provider
+      value={{
+        addRef,
+        removeRef,
+        proximityScale,
+      }}
+    >
+      <div
+        className="uifw-bottom-toolArea"
+        style={{
+          opacity: uiIsVisible ? 1 : 0,
+          transition: "opacity 0.4s ease-in-out",
+        }}
+        onMouseEnter={UiFramework.visibility.handleWidgetMouseEnter}
+      >
+        {verticalToolbar && (
+          <div className="uifw-bottom-toolArea_vertical">{verticalToolbar}</div>
+        )}
+        {horizontalToolbar && (
+          <div className="uifw-bottom-toolArea_horizontal">
+            {horizontalToolbar}
+          </div>
+        )}
+      </div>
+    </WidgetOpacityContext.Provider>
+  );
+}
diff --git a/ui/appui-react/src/appui-react/widgets/BottomViewToolWidgetComposer.tsx b/ui/appui-react/src/appui-react/widgets/BottomViewToolWidgetComposer.tsx
new file mode 100644
index 00000000000..5eff6346b66
--- /dev/null
+++ b/ui/appui-react/src/appui-react/widgets/BottomViewToolWidgetComposer.tsx
@@ -0,0 +1,38 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Widget
+ */
+
+import * as React from "react";
+import { ToolbarComposer } from "../toolbar/ToolbarComposer.js";
+import { BottomToolWidgetComposer } from "./BottomToolWidgetComposer.js";
+import { ToolbarOrientation, ToolbarUsage } from "../toolbar/ToolbarItem.js";
+
+/**
+ * BottomViewToolWidgetComposer composes a bottom-right navigation tool widget populated by
+ * UiItemsProviders using the `BottomViewNavigation` usage.
+ * @public
+ */
+export function BottomViewToolWidgetComposer() {
+  return (
+    <BottomToolWidgetComposer
+      horizontalToolbar={
+        <ToolbarComposer
+          items={[]}
+          usage={ToolbarUsage.BottomViewNavigation}
+          orientation={ToolbarOrientation.Horizontal}
+        />
+      }
+      verticalToolbar={
+        <ToolbarComposer
+          items={[]}
+          usage={ToolbarUsage.BottomViewNavigation}
+          orientation={ToolbarOrientation.Vertical}
+        />
+      }
+    />
+  );
+}
