diff --git a/addons/rose/addon/components/rose/layout/page-header.stories.mdx b/addons/rose/addon/components/rose/layout/page-header.stories.mdx
deleted file mode 100644
index 218fa75c1..000000000
--- a/addons/rose/addon/components/rose/layout/page-header.stories.mdx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
-import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-
-<Meta title="Rose|Layout" component="PageHeader" />
-
-# Layout|Page Header
-
-A page layout/positioning component that configures a two column grid with defined areas: title and utilities
-
-```htmlbars
-<Rose::Layout::PageHeader />
-```
-
-<Preview>
-  <Story name="Page Header">{{
-    template: hbs`
-    <Rose::Layout::PageHeader>
-      <div style="grid-area: title; background: var(--brand-gray-7)">Grid area: title</div>
-      <div style="grid-area: utilities; background: var(--brand-gray-5)">Grid area: utilities</div>
-    </Rose::Layout::PageHeader>
-    `,
-  }}</Story>
-</Preview>
diff --git a/addons/rose/addon/components/rose/layout/page-header.js b/addons/rose/addon/components/rose/layout/page.js
similarity index 93%
rename from addons/rose/addon/components/rose/layout/page-header.js
rename to addons/rose/addon/components/rose/layout/page.js
index e7ed1d390..10190bcba 100644
--- a/addons/rose/addon/components/rose/layout/page-header.js
+++ b/addons/rose/addon/components/rose/layout/page.js
@@ -1,5 +1,5 @@
 import Component from '@ember/component';
-import layout from '../../../templates/components/rose/layout/page-header';
+import layout from '../../../templates/components/rose/layout/page';
 
 export default Component.extend({
   layout,
diff --git a/addons/rose/addon/components/rose/layout/page.stories.mdx b/addons/rose/addon/components/rose/layout/page.stories.mdx
new file mode 100644
index 000000000..5206d551b
--- /dev/null
+++ b/addons/rose/addon/components/rose/layout/page.stories.mdx
@@ -0,0 +1,33 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+
+<Meta title="Rose|Layout|Page" component="Page" />
+
+# Layout|Page
+
+A page layout/positioning component that allows five distinct sections to be configured: breadcrumbs, header, actions, navigation, and body.
+
+```htmlbars
+<Rose::Layout::Page as |page|>
+  <page.breadcrumbs />
+  <page.header />
+  <page.actions />
+  <page.navigation />
+  <page.body />
+</Rose::Layout::Page>
+```
+
+<Preview>
+  <Story name="Page">{{
+    template: hbs`
+    <Rose::Layout::Page as |page|>
+      <page.breadcrumbs style="background: var(--brand-gray-4);">Breadcrumbs</page.breadcrumbs>
+      <page.header style="background: var(--brand-gray-5);">Header</page.header>
+      <page.actions style="background: var(--brand-gray-8);">Actions</page.actions>
+      <page.navigation style="background: var(--brand-gray-6);">Navigation</page.navigation>
+      <page.body style="background: var(--brand-gray-7);">Body</page.body>
+    </Rose::Layout::Page>
+    `,
+  }}</Story>
+</Preview>
diff --git a/addons/rose/addon/components/rose/layout/page/actions.js b/addons/rose/addon/components/rose/layout/page/actions.js
new file mode 100644
index 000000000..e5bd07bb7
--- /dev/null
+++ b/addons/rose/addon/components/rose/layout/page/actions.js
@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../../../templates/components/rose/layout/page/actions';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});
diff --git a/addons/rose/addon/components/rose/layout/page/body.js b/addons/rose/addon/components/rose/layout/page/body.js
new file mode 100644
index 000000000..82c9b9b76
--- /dev/null
+++ b/addons/rose/addon/components/rose/layout/page/body.js
@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../../../templates/components/rose/layout/page/body';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});
diff --git a/addons/rose/addon/components/rose/layout/page/breadcrumbs.js b/addons/rose/addon/components/rose/layout/page/breadcrumbs.js
new file mode 100644
index 000000000..21cb71c9f
--- /dev/null
+++ b/addons/rose/addon/components/rose/layout/page/breadcrumbs.js
@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../../../templates/components/rose/layout/page/breadcrumbs';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});
diff --git a/addons/rose/addon/components/rose/layout/page/header.js b/addons/rose/addon/components/rose/layout/page/header.js
new file mode 100644
index 000000000..45f4c6861
--- /dev/null
+++ b/addons/rose/addon/components/rose/layout/page/header.js
@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../../../templates/components/rose/layout/page/header';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});
diff --git a/addons/rose/addon/components/rose/layout/page/navigation.js b/addons/rose/addon/components/rose/layout/page/navigation.js
new file mode 100644
index 000000000..7356be5e0
--- /dev/null
+++ b/addons/rose/addon/components/rose/layout/page/navigation.js
@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../../../templates/components/rose/layout/page/navigation';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});
diff --git a/addons/rose/addon/components/rose/page-header/title.stories.mdx b/addons/rose/addon/components/rose/page-header/title.stories.mdx
index 050c77192..4955afe26 100644
--- a/addons/rose/addon/components/rose/page-header/title.stories.mdx
+++ b/addons/rose/addon/components/rose/page-header/title.stories.mdx
@@ -10,33 +10,29 @@ import { text, select } from '@storybook/addon-knobs';
 A header title component with ability to configure dropdown using `Rose::Header::Dropdown`. To be used with `Rose::Layout::PageHeader`.
 
 ```html
-<Rose::Layout::PageHeader style="border: 1px solid var(--brand-gray-5);">
-  <Rose::PageHeader::Title as |title| >
-    <title.dropdown
-      @text="Page Header Title"
-      @icon="user-square-fill" as |dropdown|
-    >
-      <dropdown.link @route="index">Menu item</dropdown.link>
-      <dropdown.button>Button menu item</dropdown.button>
-    </title.dropdown>
-  </Rose::PageHeader::Title>
-</Rose::Layout::PageHeader>
+<Rose::PageHeader::Title as |title| >
+  <title.dropdown
+    @text="Page Header Title"
+    @icon="user-square-fill" as |dropdown|
+  >
+    <dropdown.link @route="index">Menu item</dropdown.link>
+    <dropdown.button>Button menu item</dropdown.button>
+  </title.dropdown>
+</Rose::PageHeader::Title>
 ```
 
 <Preview>
   <Story name="Title">{{
     template: hbs`
-    <Rose::Layout::PageHeader style="border: 1px solid var(--brand-gray-5);">
-      <Rose::PageHeader::Title as |title| >
-        <title.dropdown
-          @text={{pageTitle}}
-          @icon={{dropdownIcon}} as |dropdown|
-        >
-          <dropdown.link @route="index">Menu item</dropdown.link>
-          <dropdown.button>Button menu item</dropdown.button>
-        </title.dropdown>
-      </Rose::PageHeader::Title>
-    </Rose::Layout::PageHeader>
+    <Rose::PageHeader::Title as |title| >
+      <title.dropdown
+        @text={{pageTitle}}
+        @icon={{dropdownIcon}} as |dropdown|
+      >
+        <dropdown.link @route="index">Menu item</dropdown.link>
+        <dropdown.button>Button menu item</dropdown.button>
+      </title.dropdown>
+    </Rose::PageHeader::Title>
     `,
     context: {
       pageTitle: text('pageTitle', 'Page Section Title'),
diff --git a/addons/rose/addon/components/rose/page-header/utilities.stories.mdx b/addons/rose/addon/components/rose/page-header/utilities.stories.mdx
index e1077084e..c752ae8a8 100644
--- a/addons/rose/addon/components/rose/page-header/utilities.stories.mdx
+++ b/addons/rose/addon/components/rose/page-header/utilities.stories.mdx
@@ -9,23 +9,19 @@ import { action } from '@storybook/addon-actions';
 An component comprised of `Rose::Button` as actions. To be used with `Rose::Layout::PageHeader`.
 
 ```html
-<Rose::Layout::PageHeader style="border: 1px solid var(--brand-gray-5);">
-  <Rose::PageHeader::Utilities as |utilities|>
-    <utilities.action @style="secondary">Secondary</utilities.action>
-    <utilities.action @style="primary">Primary</utilities.action>
-  </Rose::PageHeader::Utilities>
-</Rose::Layout::PageHeader>
+<Rose::PageHeader::Utilities as |utilities|>
+  <utilities.action @style="secondary">Secondary</utilities.action>
+  <utilities.action @style="primary">Primary</utilities.action>
+</Rose::PageHeader::Utilities>
 ```
 
 <Preview>
   <Story name="Utilities">{{
     template: hbs`
-    <Rose::Layout::PageHeader style="border: 1px solid var(--brand-gray-5);">
-      <Rose::PageHeader::Utilities as |utilities|>
-        <utilities.action @style="secondary">Secondary</utilities.action>
-        <utilities.action @style="primary">Primary</utilities.action>
-      </Rose::PageHeader::Utilities>
-    </Rose::Layout::PageHeader>
+    <Rose::PageHeader::Utilities as |utilities|>
+      <utilities.action @style="secondary">Secondary</utilities.action>
+      <utilities.action @style="primary">Primary</utilities.action>
+    </Rose::PageHeader::Utilities>
     `,
   }}</Story>
 </Preview>
diff --git a/addons/rose/addon/styles/rose/components/layout/_index.scss b/addons/rose/addon/styles/rose/components/layout/_index.scss
index 8ec7ba2ab..02f7021b2 100644
--- a/addons/rose/addon/styles/rose/components/layout/_index.scss
+++ b/addons/rose/addon/styles/rose/components/layout/_index.scss
@@ -1,2 +1,2 @@
 @import 'global';
-@import 'page-header';
+@import 'page';
diff --git a/addons/rose/addon/styles/rose/components/layout/_page-header.scss b/addons/rose/addon/styles/rose/components/layout/_page-header.scss
deleted file mode 100644
index ccd539138..000000000
--- a/addons/rose/addon/styles/rose/components/layout/_page-header.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@use '../../variables/media';
-
-.rose-layout-page-header {
-  display: grid;
-  grid-template-areas: 'title title utilities';
-  grid-template-columns: 1fr auto;
-  grid-template-rows: auto 1fr;
-
-  .rose-page-header-utilities {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    flex-wrap: wrap;
-  }
-}
-
-@media (max-width: media.width(small)) {
-  .rose-layout-page-header {
-    grid-template-columns: 1fr;
-    grid-template-areas:
-      'title'
-      'utilities';
-  }
-}
diff --git a/addons/rose/addon/styles/rose/components/layout/page/_actions.scss b/addons/rose/addon/styles/rose/components/layout/page/_actions.scss
new file mode 100644
index 000000000..68ec334a4
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/layout/page/_actions.scss
@@ -0,0 +1,3 @@
+.rose-layout-page-actions {
+  grid-area: actions;
+}
diff --git a/addons/rose/addon/styles/rose/components/layout/page/_body.scss b/addons/rose/addon/styles/rose/components/layout/page/_body.scss
new file mode 100644
index 000000000..cec760276
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/layout/page/_body.scss
@@ -0,0 +1,3 @@
+.rose-layout-page-body {
+  grid-area: body;
+}
diff --git a/addons/rose/addon/styles/rose/components/layout/page/_breadcrumbs.scss b/addons/rose/addon/styles/rose/components/layout/page/_breadcrumbs.scss
new file mode 100644
index 000000000..638549ff5
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/layout/page/_breadcrumbs.scss
@@ -0,0 +1,3 @@
+.rose-layout-page-breadcrumbs {
+  grid-area: breadcrumbs;
+}
diff --git a/addons/rose/addon/styles/rose/components/layout/page/_header.scss b/addons/rose/addon/styles/rose/components/layout/page/_header.scss
new file mode 100644
index 000000000..d5d3af830
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/layout/page/_header.scss
@@ -0,0 +1,3 @@
+.rose-layout-page-header {
+  grid-area: header;
+}
diff --git a/addons/rose/addon/styles/rose/components/layout/page/_index.scss b/addons/rose/addon/styles/rose/components/layout/page/_index.scss
new file mode 100644
index 000000000..31f47115c
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/layout/page/_index.scss
@@ -0,0 +1,31 @@
+@use '../../../variables/sizing';
+@use '../../../variables/media';
+
+@import 'breadcrumbs';
+@import 'header';
+@import 'actions';
+@import 'navigation';
+@import 'body';
+
+.rose-layout-page {
+  display: grid;
+  grid-template-areas:
+    'breadcrumbs breadcrumbs breadcrumbs'
+    'header header actions'
+    'navigation navigation navigation'
+    'body body body';
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: auto 1fr;
+}
+
+@media (max-width: media.width(small)) {
+  .rose-layout-page {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      'breadcrumbs'
+      'header'
+      'actions'
+      'navigation'
+      'body';
+  }
+}
diff --git a/addons/rose/addon/styles/rose/components/layout/page/_navigation.scss b/addons/rose/addon/styles/rose/components/layout/page/_navigation.scss
new file mode 100644
index 000000000..5d35caaa7
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/layout/page/_navigation.scss
@@ -0,0 +1,3 @@
+.rose-layout-page-navigation {
+  grid-area: navigation;
+}
diff --git a/addons/rose/addon/templates/components/rose/layout/page.hbs b/addons/rose/addon/templates/components/rose/layout/page.hbs
new file mode 100644
index 000000000..9afad989b
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/layout/page.hbs
@@ -0,0 +1,9 @@
+<div ...attributes class="rose-layout-page">
+  {{yield (hash
+    breadcrumbs=(component 'rose/layout/page/breadcrumbs')
+    header=(component 'rose/layout/page/header')
+    actions=(component 'rose/layout/page/actions')
+    navigation=(component 'rose/layout/page/navigation')
+    body=(component 'rose/layout/page/body')
+  )}}
+</div>
diff --git a/addons/rose/addon/templates/components/rose/layout/page/actions.hbs b/addons/rose/addon/templates/components/rose/layout/page/actions.hbs
new file mode 100644
index 000000000..8bfabd185
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/layout/page/actions.hbs
@@ -0,0 +1,3 @@
+<div ...attributes class="rose-layout-page-actions">
+  {{yield}}
+</div>
diff --git a/addons/rose/addon/templates/components/rose/layout/page/body.hbs b/addons/rose/addon/templates/components/rose/layout/page/body.hbs
new file mode 100644
index 000000000..1a2bc0831
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/layout/page/body.hbs
@@ -0,0 +1,3 @@
+<div ...attributes class="rose-layout-page-body">
+  {{yield}}
+</div>
diff --git a/addons/rose/addon/templates/components/rose/layout/page/breadcrumbs.hbs b/addons/rose/addon/templates/components/rose/layout/page/breadcrumbs.hbs
new file mode 100644
index 000000000..585c9d630
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/layout/page/breadcrumbs.hbs
@@ -0,0 +1,3 @@
+<div ...attributes class="rose-layout-page-breadcrumbs">
+  {{yield}}
+</div>
diff --git a/addons/rose/addon/templates/components/rose/layout/page-header.hbs b/addons/rose/addon/templates/components/rose/layout/page/header.hbs
similarity index 100%
rename from addons/rose/addon/templates/components/rose/layout/page-header.hbs
rename to addons/rose/addon/templates/components/rose/layout/page/header.hbs
diff --git a/addons/rose/addon/templates/components/rose/layout/page/navigation.hbs b/addons/rose/addon/templates/components/rose/layout/page/navigation.hbs
new file mode 100644
index 000000000..3e4789951
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/layout/page/navigation.hbs
@@ -0,0 +1,3 @@
+<div ...attributes class="rose-layout-page-navigation">
+  {{yield}}
+</div>
diff --git a/addons/rose/addon/templates/components/rose/layout/page/unit/mixins/component-auto-id-test.js b/addons/rose/addon/templates/components/rose/layout/page/unit/mixins/component-auto-id-test.js
new file mode 100644
index 000000000..a047b3e7b
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/layout/page/unit/mixins/component-auto-id-test.js
@@ -0,0 +1,11 @@
+import EmberObject from '@ember/object';
+import ComponentAutoIdMixin from 'rose/mixins/component-auto-id';
+import { module, test } from 'qunit';
+
+module('Unit | Mixin | component-auto-id', function () {
+  test('it generates an ID and assigns it to the object', function (assert) {
+    let ComponentAutoIdObject = EmberObject.extend(ComponentAutoIdMixin);
+    let subject = ComponentAutoIdObject.create();
+    assert.ok(subject.id);
+  });
+});
diff --git a/addons/rose/app/components/rose/layout/global.js b/addons/rose/app/components/rose/layout/global.js
index d55398ff9..615c7de96 100644
--- a/addons/rose/app/components/rose/layout/global.js
+++ b/addons/rose/app/components/rose/layout/global.js
@@ -1 +1 @@
-export { default } from 'rose/components/rose/layout/global';
\ No newline at end of file
+export { default } from 'rose/components/rose/layout/global';
diff --git a/addons/rose/app/components/rose/layout/global/body.js b/addons/rose/app/components/rose/layout/global/body.js
index 3f6780e17..37088d7d0 100644
--- a/addons/rose/app/components/rose/layout/global/body.js
+++ b/addons/rose/app/components/rose/layout/global/body.js
@@ -1 +1 @@
-export { default } from 'rose/components/rose/layout/global/body';
\ No newline at end of file
+export { default } from 'rose/components/rose/layout/global/body';
diff --git a/addons/rose/app/components/rose/layout/global/header.js b/addons/rose/app/components/rose/layout/global/header.js
index 6d737401b..d529afa35 100644
--- a/addons/rose/app/components/rose/layout/global/header.js
+++ b/addons/rose/app/components/rose/layout/global/header.js
@@ -1 +1 @@
-export { default } from 'rose/components/rose/layout/global/header';
\ No newline at end of file
+export { default } from 'rose/components/rose/layout/global/header';
diff --git a/addons/rose/app/components/rose/layout/global/navigation.js b/addons/rose/app/components/rose/layout/global/navigation.js
index fa056e99e..e83c8266e 100644
--- a/addons/rose/app/components/rose/layout/global/navigation.js
+++ b/addons/rose/app/components/rose/layout/global/navigation.js
@@ -1 +1 @@
-export { default } from 'rose/components/rose/layout/global/navigation';
\ No newline at end of file
+export { default } from 'rose/components/rose/layout/global/navigation';
diff --git a/addons/rose/app/components/rose/layout/page-header.js b/addons/rose/app/components/rose/layout/page-header.js
deleted file mode 100644
index 5235f3c7b..000000000
--- a/addons/rose/app/components/rose/layout/page-header.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'rose/components/rose/layout/page-header';
diff --git a/addons/rose/app/components/rose/layout/page.js b/addons/rose/app/components/rose/layout/page.js
new file mode 100644
index 000000000..a88273d71
--- /dev/null
+++ b/addons/rose/app/components/rose/layout/page.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/layout/page';
diff --git a/addons/rose/app/components/rose/layout/page/actions.js b/addons/rose/app/components/rose/layout/page/actions.js
new file mode 100644
index 000000000..42d264833
--- /dev/null
+++ b/addons/rose/app/components/rose/layout/page/actions.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/layout/page/actions';
diff --git a/addons/rose/app/components/rose/layout/page/body.js b/addons/rose/app/components/rose/layout/page/body.js
new file mode 100644
index 000000000..261441729
--- /dev/null
+++ b/addons/rose/app/components/rose/layout/page/body.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/layout/page/body';
diff --git a/addons/rose/app/components/rose/layout/page/breadcrumbs.js b/addons/rose/app/components/rose/layout/page/breadcrumbs.js
new file mode 100644
index 000000000..0c3161584
--- /dev/null
+++ b/addons/rose/app/components/rose/layout/page/breadcrumbs.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/layout/page/breadcrumbs';
diff --git a/addons/rose/app/components/rose/layout/page/header.js b/addons/rose/app/components/rose/layout/page/header.js
new file mode 100644
index 000000000..77437dd12
--- /dev/null
+++ b/addons/rose/app/components/rose/layout/page/header.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/layout/page/header';
diff --git a/addons/rose/app/components/rose/layout/page/navigation.js b/addons/rose/app/components/rose/layout/page/navigation.js
new file mode 100644
index 000000000..0defdaa90
--- /dev/null
+++ b/addons/rose/app/components/rose/layout/page/navigation.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/layout/page/navigation';
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index 841d80122..576a37395 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -40,6 +40,13 @@
   </global.navigation>
 
   <global.body>
+    <Rose::Layout::Page as |page|>
+      <page.breadcrumbs>Breadcrumbs</page.breadcrumbs>
+      <page.header>Header</page.header>
+      <page.navigation>Navigation</page.navigation>
+      <page.actions>Actions</page.actions>
+      <page.body>Body</page.body>
+    </Rose::Layout::Page>
 
     Dummy app index template
 
diff --git a/addons/rose/tests/integration/components/rose/layout/global-test.js b/addons/rose/tests/integration/components/rose/layout/global-test.js
index 7bff3a3b6..2adf17077 100644
--- a/addons/rose/tests/integration/components/rose/layout/global-test.js
+++ b/addons/rose/tests/integration/components/rose/layout/global-test.js
@@ -3,7 +3,7 @@ import { setupRenderingTest } from 'ember-qunit';
 import { render, find } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 
-module('Integration | Component | rose/layout/global', function(hooks) {
+module('Integration | Component | rose/layout/global', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function (assert) {
diff --git a/addons/rose/tests/integration/components/rose/layout/global/body-test.js b/addons/rose/tests/integration/components/rose/layout/global/body-test.js
index 9cdf1224d..45664a58b 100644
--- a/addons/rose/tests/integration/components/rose/layout/global/body-test.js
+++ b/addons/rose/tests/integration/components/rose/layout/global/body-test.js
@@ -3,7 +3,7 @@ import { setupRenderingTest } from 'ember-qunit';
 import { render, find } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 
-module('Integration | Component | rose/layout/global/body', function(hooks) {
+module('Integration | Component | rose/layout/global/body', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function (assert) {
diff --git a/addons/rose/tests/integration/components/rose/layout/global/header-test.js b/addons/rose/tests/integration/components/rose/layout/global/header-test.js
index 61dee1311..d532af4d2 100644
--- a/addons/rose/tests/integration/components/rose/layout/global/header-test.js
+++ b/addons/rose/tests/integration/components/rose/layout/global/header-test.js
@@ -3,7 +3,7 @@ import { setupRenderingTest } from 'ember-qunit';
 import { render, find } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 
-module('Integration | Component | rose/layout/global/header', function(hooks) {
+module('Integration | Component | rose/layout/global/header', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function (assert) {
diff --git a/addons/rose/tests/integration/components/rose/layout/global/navigation-test.js b/addons/rose/tests/integration/components/rose/layout/global/navigation-test.js
index 087a66392..386523209 100644
--- a/addons/rose/tests/integration/components/rose/layout/global/navigation-test.js
+++ b/addons/rose/tests/integration/components/rose/layout/global/navigation-test.js
@@ -3,7 +3,9 @@ import { setupRenderingTest } from 'ember-qunit';
 import { render, find } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 
-module('Integration | Component | rose/layout/global/navigation', function(hooks) {
+module('Integration | Component | rose/layout/global/navigation', function (
+  hooks
+) {
   setupRenderingTest(hooks);
 
   test('it renders', async function (assert) {
diff --git a/addons/rose/tests/integration/components/rose/layout/page-header-test.js b/addons/rose/tests/integration/components/rose/layout/page-header-test.js
deleted file mode 100644
index 723df72c1..000000000
--- a/addons/rose/tests/integration/components/rose/layout/page-header-test.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render, find } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
-
-module('Integration | Component | rose/layout/page-header', function (hooks) {
-  setupRenderingTest(hooks);
-
-  test('it renders', async function (assert) {
-    await render(hbs`<Rose::Layout::PageHeader />`);
-    assert.ok(find('.rose-layout-page-header'));
-  });
-
-  test('it renders with html attributes', async function (assert) {
-    await render(hbs`<Rose::Layout::PageHeader id="page-header"/>`);
-    assert.ok(find('#page-header'));
-  });
-
-  test('it renders with content', async function (assert) {
-    await render(
-      hbs`<Rose::Layout::PageHeader>Page header content</Rose::Layout::PageHeader>`
-    );
-    assert.equal(
-      find('.rose-layout-page-header').textContent.trim(),
-      'Page header content'
-    );
-  });
-});
diff --git a/addons/rose/tests/integration/components/rose/layout/page-test.js b/addons/rose/tests/integration/components/rose/layout/page-test.js
new file mode 100644
index 000000000..ea6e1e972
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/layout/page-test.js
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/layout/page', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Layout::Page />`);
+    assert.ok(find('div'));
+    assert.ok(find('.rose-layout-page'));
+  });
+
+  test('it renders with attributes', async function (assert) {
+    await render(hbs`<Rose::Layout::Page id="page"/>`);
+    assert.ok(find('#page'));
+  });
+
+  test('it renders with content', async function (assert) {
+    await render(hbs`<Rose::Layout::Page>
+      <button id="content" />
+    </Rose::Layout::Page>`);
+    assert.ok(find('#content'));
+  });
+});
diff --git a/addons/rose/tests/integration/components/rose/layout/page/actions-test.js b/addons/rose/tests/integration/components/rose/layout/page/actions-test.js
new file mode 100644
index 000000000..7e922866b
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/layout/page/actions-test.js
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/layout/page/actions', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Layout::Page::Actions />`);
+    assert.ok(find('div'));
+    assert.ok(find('.rose-layout-page-actions'));
+  });
+
+  test('it renders with attributes', async function (assert) {
+    await render(hbs`<Rose::Layout::Page::Actions id="actions"/>`);
+    assert.ok(find('#actions'));
+  });
+
+  test('it renders with content', async function (assert) {
+    await render(hbs`<Rose::Layout::Page::Actions>
+      <button id="content" />
+    </Rose::Layout::Page::Actions>`);
+    assert.ok(find('#content'));
+  });
+});
diff --git a/addons/rose/tests/integration/components/rose/layout/page/body-test.js b/addons/rose/tests/integration/components/rose/layout/page/body-test.js
new file mode 100644
index 000000000..7fc5d39ef
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/layout/page/body-test.js
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/layout/page/body', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Layout::Page::Body />`);
+    assert.ok(find('div'));
+    assert.ok(find('.rose-layout-page-body'));
+  });
+
+  test('it renders with attributes', async function (assert) {
+    await render(hbs`<Rose::Layout::Page::Body id="body"/>`);
+    assert.ok(find('#body'));
+  });
+
+  test('it renders with content', async function (assert) {
+    await render(hbs`<Rose::Layout::Page::Body>
+      <button id="content" />
+    </Rose::Layout::Page::Body>`);
+    assert.ok(find('#content'));
+  });
+});
diff --git a/addons/rose/tests/integration/components/rose/layout/page/breadcrumbs-test.js b/addons/rose/tests/integration/components/rose/layout/page/breadcrumbs-test.js
new file mode 100644
index 000000000..0d783fdf1
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/layout/page/breadcrumbs-test.js
@@ -0,0 +1,28 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/layout/page/breadcrumbs', function (
+  hooks
+) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Layout::Page::Breadcrumbs />`);
+    assert.ok(find('div'));
+    assert.ok(find('.rose-layout-page-breadcrumbs'));
+  });
+
+  test('it renders with attributes', async function (assert) {
+    await render(hbs`<Rose::Layout::Page::Breadcrumbs id="breadcrumbs"/>`);
+    assert.ok(find('#breadcrumbs'));
+  });
+
+  test('it renders with content', async function (assert) {
+    await render(hbs`<Rose::Layout::Page::Breadcrumbs>
+      <button id="content" />
+    </Rose::Layout::Page::Breadcrumbs>`);
+    assert.ok(find('#content'));
+  });
+});
diff --git a/addons/rose/tests/integration/components/rose/layout/page/header-test.js b/addons/rose/tests/integration/components/rose/layout/page/header-test.js
new file mode 100644
index 000000000..9a3610adb
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/layout/page/header-test.js
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/layout/page/header', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Layout::Page::Header />`);
+    assert.ok(find('div'));
+    assert.ok(find('.rose-layout-page-header'));
+  });
+
+  test('it renders with attributes', async function (assert) {
+    await render(hbs`<Rose::Layout::Page::Header id="header"/>`);
+    assert.ok(find('#header'));
+  });
+
+  test('it renders with content', async function (assert) {
+    await render(hbs`<Rose::Layout::Page::Header>
+      <button id="content" />
+    </Rose::Layout::Page::Header>`);
+    assert.ok(find('#content'));
+  });
+});
diff --git a/addons/rose/tests/integration/components/rose/layout/page/navigation-test.js b/addons/rose/tests/integration/components/rose/layout/page/navigation-test.js
new file mode 100644
index 000000000..44348230d
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/layout/page/navigation-test.js
@@ -0,0 +1,28 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/layout/page/navigation', function (
+  hooks
+) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Layout::Page::Navigation />`);
+    assert.ok(find('div'));
+    assert.ok(find('.rose-layout-page-navigation'));
+  });
+
+  test('it renders with attributes', async function (assert) {
+    await render(hbs`<Rose::Layout::Page::Navigation id="navigation"/>`);
+    assert.ok(find('#navigation'));
+  });
+
+  test('it renders with content', async function (assert) {
+    await render(hbs`<Rose::Layout::Page::Navigation>
+      <button id="content" />
+    </Rose::Layout::Page::Navigation>`);
+    assert.ok(find('#content'));
+  });
+});
diff --git a/ui/core/app/templates/orgs/org/projects/index.hbs b/ui/core/app/templates/orgs/org/projects/index.hbs
index ed4914049..71afa4e53 100644
--- a/ui/core/app/templates/orgs/org/projects/index.hbs
+++ b/ui/core/app/templates/orgs/org/projects/index.hbs
@@ -1,6 +1,9 @@
-<div class="projects-overview">
-  <Rose::Layout::PageHeader>
+<Rose::Layout::Page class="projects-overview" as |page|>
+  <page.header>
     <Rose::PageHeader::Title @text={{t "resources.projects"}} />
+  </page.header>
+
+  <page.actions>
     <Rose::PageHeader::Utilities as |utility|>
       <utility.action
         @style="primary"
@@ -10,18 +13,20 @@
         {{t 'titles.new'}}
       </utility.action>
     </Rose::PageHeader::Utilities>
-  </Rose::Layout::PageHeader>
+  </page.actions>
 
-  <ul class="projects">
-    {{#each @model as |project|}}
-      <li class="project">
-        <Rose::Card::Link @title={{project.name}}
-          @subtitle={{project.id}}
-          @description={{project.description}}
-          @route="orgs.org.projects.project"
-          @model={{project}}
-        />
-      </li>
-    {{/each}}
-  </ul>
-</div>
+  <page.body>
+    <ul class="projects">
+      {{#each @model as |project|}}
+        <li class="project">
+          <Rose::Card::Link @title={{project.name}}
+            @subtitle={{project.id}}
+            @description={{project.description}}
+            @route="orgs.org.projects.project"
+            @model={{project}}
+          />
+        </li>
+      {{/each}}
+    </ul>
+  </page.body>
+</Rose::Layout::Page>
diff --git a/ui/core/app/templates/orgs/org/projects/new.hbs b/ui/core/app/templates/orgs/org/projects/new.hbs
index 90011f7d0..d67735607 100644
--- a/ui/core/app/templates/orgs/org/projects/new.hbs
+++ b/ui/core/app/templates/orgs/org/projects/new.hbs
@@ -1,20 +1,22 @@
-{{title (t "titles.new")}}
+<Rose::Layout::Page class="project-new" as |page|>
+  <page.breadcrumbs>
+    <div class="breadcrumbs">
+      <LinkTo @route='orgs.org.projects'>{{t "resources.projects"}}</LinkTo>
+      >
+      <LinkTo @route='orgs.org.projects.new'>{{t "titles.new"}}</LinkTo>
+    </div>
+  </page.breadcrumbs>
 
-<div class="project-new">
-  <div class="breadcrumbs">
-    <LinkTo @route='orgs.org.projects'>{{t "resources.projects"}}</LinkTo>
-    >
-    <LinkTo @route='orgs.org.projects.new'>{{t "titles.new"}}</LinkTo>
-  </div>
-
-  <Rose::Layout::PageHeader>
+  <page.header>
     <Rose::PageHeader::Title @text={{t "titles.new"}} />
-  </Rose::Layout::PageHeader>
+  </page.header>
 
-  <Form::Project
-    @model={{@model}}
-    @submit={{route-action "save" @model}}
-    @cancel={{route-action "cancel" @model}}
-    class="project-new-form"
-  />
-</div>
+  <page.body>
+    <Form::Project
+      @model={{@model}}
+      @submit={{route-action "save" @model}}
+      @cancel={{route-action "cancel" @model}}
+      class="project-new-form"
+    />
+  </page.body>
+</Rose::Layout::Page>
diff --git a/ui/core/app/templates/orgs/org/projects/project.hbs b/ui/core/app/templates/orgs/org/projects/project.hbs
index 7cdf10d87..1bb6c363f 100644
--- a/ui/core/app/templates/orgs/org/projects/project.hbs
+++ b/ui/core/app/templates/orgs/org/projects/project.hbs
@@ -1,37 +1,41 @@
-{{title @model.name}}
+<Rose::Layout::Page class="project-overview" as |page|>
+  <page.breadcrumbs>
+    <div class="breadcrumbs">
+      <LinkTo @route='orgs.org.projects'>{{t "resources.projects"}}</LinkTo>
+      >
+      <LinkTo @route='orgs.org.projects.project'>{{@model.name}}</LinkTo>
+    </div>
+  </page.breadcrumbs>
 
-<div class="project-overview">
-  <div class="breadcrumbs">
-    <LinkTo @route='orgs.org.projects'>{{t "resources.projects"}}</LinkTo>
-    >
-    <LinkTo @route='orgs.org.projects.project'>{{@model.name}}</LinkTo>
-  </div>
-
-  <Rose::Layout::PageHeader>
+  <page.header>
     <Rose::PageHeader::Title @text={{t "resources.project.settings"}} />
-  </Rose::Layout::PageHeader>
+  </page.header>
 
-  <Rose::Nav::Tabs as |nav|>
-    <nav.link @route='orgs.org.projects.project'>
-      {{t "nav.overview"}}
-    </nav.link>
-    <nav.link @route='index'>
-      {{t 'dev.item-name'}}
-    </nav.link>
-  </Rose::Nav::Tabs>
+  <page.navigation>
+    <Rose::Nav::Tabs as |nav|>
+      <nav.link @route='orgs.org.projects.project'>
+        {{t "nav.overview"}}
+      </nav.link>
+      <nav.link @route='index'>
+        {{t 'dev.item-name'}}
+      </nav.link>
+    </Rose::Nav::Tabs>
+  </page.navigation>
 
-  <Form::Project
-    @model={{@model}}
-    @submit={{route-action "save" @model}}
-    @cancel={{route-action "cancel" @model}}
-    class="project-new-form"
-  />
+  <page.body>
+    <Form::Project
+      @model={{@model}}
+      @submit={{route-action "save" @model}}
+      @cancel={{route-action "cancel" @model}}
+      class="project-new-form"
+    />
 
-  <Rose::Button
-    @style="warning"
-    @disabled={{@model.canSave}}
-    {{on "click" (route-action "delete" @model)}}
-  >
-    {{t 'actions.delete'}}
-  </Rose::Button>
-</div>
+    <Rose::Button
+      @style="warning"
+      @disabled={{@model.canSave}}
+      {{on "click" (route-action "delete" @model)}}
+    >
+      {{t 'actions.delete'}}
+    </Rose::Button>
+  </page.body>
+</Rose::Layout::Page>