diff --git a/addons/rose/addon/components/rose/layout/global.stories.mdx b/addons/rose/addon/components/rose/layout/global.stories.mdx
index a56e928b9..9b8e34ea4 100644
--- a/addons/rose/addon/components/rose/layout/global.stories.mdx
+++ b/addons/rose/addon/components/rose/layout/global.stories.mdx
@@ -7,12 +7,12 @@ import { text, boolean, select } from '@storybook/addon-knobs';
 
 # Layout|Global
 
-A top-level layout/positioning component that allows three distinct sections to be configured: header, navigation, and body.
+A top-level layout/positioning component that allows two distinct sections to
+be configured: header and body.
 
 ```htmlbars
 <Rose::Layout::Global as |layout|>
   <layout.header />
-  <layout.sidebar />
   <layout.body />
 </Rose::Layout::Global>
 ```
@@ -22,7 +22,6 @@ A top-level layout/positioning component that allows three distinct sections to
     template: hbs`
     <Rose::Layout::Global as |layout|>
       <layout.header style="background: var(--brand-gray-5);">Header</layout.header>
-      <layout.sidebar style="background: var(--brand-gray-6);">Sidebar</layout.sidebar>
       <layout.body style="background: var(--brand-gray-7);">Body</layout.body>
     </Rose::Layout::Global>
     `,
diff --git a/addons/rose/addon/components/rose/layout/sidebar.js b/addons/rose/addon/components/rose/layout/sidebar.js
new file mode 100644
index 000000000..b58f2003a
--- /dev/null
+++ b/addons/rose/addon/components/rose/layout/sidebar.js
@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../../templates/components/rose/layout/sidebar';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});
diff --git a/addons/rose/addon/components/rose/layout/sidebar.stories.mdx b/addons/rose/addon/components/rose/layout/sidebar.stories.mdx
new file mode 100644
index 000000000..c24f82584
--- /dev/null
+++ b/addons/rose/addon/components/rose/layout/sidebar.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';
+import { text, boolean, select } from '@storybook/addon-knobs';
+
+<Meta title="Rose|Layout|Sidebar" component="SidebarLayout" />
+
+# Layout|Sidebar
+
+A top-level layout/positioning component that allows two distinct sections to
+be configured: sidebar and body.
+
+```htmlbars
+<Rose::Layout::Sidebar as |layout|>
+  <layout.sidebar>
+    sidebar content
+  </layout.sidebar>
+  <layout.body>
+    body content
+  </layout.body>
+</Rose::Layout::Sidebar>
+```
+
+<Preview>
+  <Story name="SidebarLayout">{{
+    template: hbs`
+      <Rose::Layout::Sidebar as |layout|>
+        <layout.sidebar style="background: var(--brand-gray-7);">Body</layout.sidebar>
+        <layout.body style="background: var(--brand-gray-5);">Sidebar</layout.body>
+      </Rose::Layout::Sidebar>
+    `,
+  }}</Story>
+</Preview>
diff --git a/addons/rose/addon/styles/rose/components/layout/_global.scss b/addons/rose/addon/styles/rose/components/layout/_global.scss
index 894f83410..d9b9b771a 100644
--- a/addons/rose/addon/styles/rose/components/layout/_global.scss
+++ b/addons/rose/addon/styles/rose/components/layout/_global.scss
@@ -1,39 +1,10 @@
-@use '../../variables/sizing';
-@use '../../variables/media';
-
 .rose-layout-global {
-  display: grid;
-  grid-template-areas:
-    'header header header header'
-    'navigation body body body';
-  // Define 16rem static grid column for navigation
-  grid-template-columns: (sizing.rems(m) * 16) auto 1fr;
-  grid-template-rows: auto 1fr;
-  height: 100vh;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
 
   .rose-layout-global-body {
-    grid-area: body;
-    padding: sizing.rems(l);
-  }
-
-  .rose-layout-global-header {
-    grid-area: header;
-  }
-
-  .rose-layout-global-sidebar {
-    grid-area: navigation;
-    border-right: sizing.rems(xxxxs) solid var(--ui-border-subtler-1);
-  }
-}
-
-@media (max-width: media.width(small)) {
-  .rose-layout-global {
-    grid-template-columns: 1fr;
-    grid-template-rows: 0.1fr auto 1fr;
-    grid-template-areas:
-      'header'
-      'navigation'
-      'body';
-    padding-bottom: 0;
+    flex: 1;
+    display: flex;
   }
 }
diff --git a/addons/rose/addon/styles/rose/components/layout/_index.scss b/addons/rose/addon/styles/rose/components/layout/_index.scss
index 1ed6d8338..5afb56808 100644
--- a/addons/rose/addon/styles/rose/components/layout/_index.scss
+++ b/addons/rose/addon/styles/rose/components/layout/_index.scss
@@ -1,3 +1,13 @@
+@use '../../variables/sizing';
+
 @import 'global';
+@import 'sidebar';
 @import 'page';
 @import 'centered';
+
+// TODO:  this is prescriptive and can be removed if it becomes a problem,
+// but used here reflects the fact that the "main" element, of which there
+// can only be one per page, generally has padding in Structure layouts.
+main {
+  padding: sizing.rems(l);
+}
diff --git a/addons/rose/addon/styles/rose/components/layout/_sidebar.scss b/addons/rose/addon/styles/rose/components/layout/_sidebar.scss
new file mode 100644
index 000000000..e5cc54668
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/layout/_sidebar.scss
@@ -0,0 +1,27 @@
+@use '../../variables/sizing';
+@use '../../variables/media';
+
+.rose-layout-sidebar {
+  --sidebar-width: #{sizing.rems(m) * 16};
+  display: flex;
+  flex-grow: 1;
+
+  .rose-layout-sidebar-body {
+    flex: 1;
+  }
+
+  .rose-layout-sidebar-sidebar {
+    width: var(--sidebar-width);
+    border-right: sizing.rems(xxxxs) solid var(--ui-border-subtler-1);
+  }
+}
+
+@media (max-width: media.width(small)) {
+  .rose-layout-sidebar {
+    flex-direction: column;
+
+    .rose-layout-sidebar-sidebar {
+      width: auto;
+    }
+  }
+}
diff --git a/addons/rose/addon/templates/components/rose/layout/global.hbs b/addons/rose/addon/templates/components/rose/layout/global.hbs
index 5f516ec80..bfa2c8e75 100644
--- a/addons/rose/addon/templates/components/rose/layout/global.hbs
+++ b/addons/rose/addon/templates/components/rose/layout/global.hbs
@@ -1,7 +1,6 @@
-<div ...attributes class="rose-layout-global">
+<section ...attributes class="rose-layout-global">
   {{yield (hash
     header=(component "rose/anonymous" tagName="header" class="rose-layout-global-header")
-    sidebar=(component "rose/anonymous" tagName="aside" class="rose-layout-global-sidebar")
-    body=(component "rose/anonymous" tagName="main" class="rose-layout-global-body")
+    body=(component "rose/anonymous" class="rose-layout-global-body")
   )}}
-</div>
+</section>
diff --git a/addons/rose/addon/templates/components/rose/layout/sidebar.hbs b/addons/rose/addon/templates/components/rose/layout/sidebar.hbs
new file mode 100644
index 000000000..6bfb342e4
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/layout/sidebar.hbs
@@ -0,0 +1,6 @@
+<div ...attributes class="rose-layout-sidebar">
+  {{yield (hash
+    body=(component "rose/anonymous" class="rose-layout-sidebar-body")
+    sidebar=(component "rose/anonymous" tagName="aside" class="rose-layout-sidebar-sidebar")
+  )}}
+</div>
diff --git a/addons/rose/app/components/rose/layout/sidebar.js b/addons/rose/app/components/rose/layout/sidebar.js
new file mode 100644
index 000000000..f078ea1c6
--- /dev/null
+++ b/addons/rose/app/components/rose/layout/sidebar.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/layout/sidebar';
\ No newline at end of file
diff --git a/addons/rose/tests/dummy/app/templates/playground.hbs b/addons/rose/tests/dummy/app/templates/playground.hbs
index 8f7d026b4..cf74a1e48 100644
--- a/addons/rose/tests/dummy/app/templates/playground.hbs
+++ b/addons/rose/tests/dummy/app/templates/playground.hbs
@@ -30,274 +30,24 @@
     </Rose::Header>
   </layout.header>
 
-  <layout.sidebar>
-    <Rose::Nav::Sidebar @title="Title" as |nav|>
-      <nav.link @route="index">Item Name</nav.link>
-      <nav.link @route="about">Item Name</nav.link>
-      <nav.link @route="about">Item Name</nav.link>
-      <nav.link @route="about">Item Name</nav.link>
-    </Rose::Nav::Sidebar>
-  </layout.sidebar>
-
   <layout.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
+    <Rose::Layout::Sidebar as |layout|>
+    
+      <layout.sidebar>
+        <Rose::Nav::Sidebar @title="Title" as |nav|>
+          <nav.link @route="index">Item Name</nav.link>
+          <nav.link @route="about">Item Name</nav.link>
+          <nav.link @route="about">Item Name</nav.link>
+          <nav.link @route="about">Item Name</nav.link>
+        </Rose::Nav::Sidebar>
+      </layout.sidebar>
 
-    <Rose::Dropdown @text="Choose One&hellip;" as |dropdown|>
-      <dropdown.link @route="index">Menu item</dropdown.link>
-      <dropdown.link @route="about">Menu item</dropdown.link>
-      <dropdown.button>Button menu item</dropdown.button>
-    </Rose::Dropdown>
+      <layout.body @tagName="main">
+        Body content
+      </layout.body>
 
-    <Rose::Notification
-      @style="error"
-      @heading="Error"
-      @dismiss={{this.actionHandler}}
-      @dismissText="Dismiss"
-    >
-    An error occurred.
-    </Rose::Notification>
+    </Rose::Layout::Sidebar>
 
-    <h2>Icon</h2>
-    <Rose::Icon @name="alert-circle-fill" />
-    <Rose::Icon @name="alert-circle-fill" @size="medium" />
-    <Rose::Icon @name="alert-circle-fill" @size="small" />
-
-    <h2>Button</h2>
-    <Rose::Button @style="primary">Primary</Rose::Button>
-    <br>
-    <Rose::Button @style="primary" @disabled={{true}}>Primary</Rose::Button>
-    <br>
-
-    <Rose::Button @style="secondary">Secondary</Rose::Button>
-    <br>
-    <Rose::Button @style="secondary" @disabled={{true}}>Secondary</Rose::Button>
-    <br>
-
-    <h2>Form</h2>
-    <Rose::Form
-      @onSubmit={{this.actionHandler}}
-      @cancel={{this.actionHandler}}
-      @disabled={{false}}
-      as |form|
-    >
-
-      <h3>Inputs</h3>
-      <form.input
-        @label="Label"
-        @value="Read only"
-        readonly={{true}}
-        />
-      <form.input
-        @label="Label"
-        @helperText="Helper text"
-        @value="Text"
-        />
-      <form.input
-        @label="Label"
-        @helperText="Helper text"
-        @value="Text"
-        @error={{true}}
-        />
-      <form.input
-        @label="Label"
-        @helperText="Helper text"
-        @value="Text"
-        disabled={{true}}
-        />
-
-      <h3>Textareas</h3>
-      <form.textarea
-        @label="Label"
-        @value="Read only"
-        readonly={{true}}
-        />
-      <form.textarea
-        @label="Label"
-        @helperText="Helper text"
-        @value="Text"
-        />
-      <form.textarea
-        @label="Label"
-        @helperText="Helper text"
-        @value="Text"
-        @error={{true}}
-        />
-      <form.textarea
-        @label="Label"
-        @helperText="Helper text"
-        @value="Text"
-        disabled={{true}}
-        />
-
-      <h3>Selects</h3>
-      <form.select
-        @label="Label"
-        @helperText="Helper text"
-        @onChange={{fn this.actionHandler}}
-        as |field|
-      >
-        <field.field as |select|>
-          <select.option>Choose an option</select.option>
-          <select.option @value="value-1">Value 1</select.option>
-          <select.option @value="value-2">Value 2</select.option>
-          <select.option @value="value-3">Value 3</select.option>
-        </field.field>
-      </form.select>
-      <form.select
-
-        @label="Label"
-        @helperText="Helper text"
-        @onChange={{fn this.actionHandler}}
-        as |field|
-      >
-        <field.field as |select|>
-          <select.option>Choose an option</select.option>
-        </field.field>
-      </form.select>
-
-
-      <h3>Radio Group</h3>
-      <form.radioGroup @name="color" @selectedValue={{this.color}} as |radioGroup|>
-        <radioGroup.radio
-          @label="Red"
-          @value="red"
-        />
-        <radioGroup.radio
-          @label="Green"
-          @value="green"
-        />
-        <radioGroup.radio
-          @label="Blue"
-          @value="blue"
-          @disabled={{true}}
-        />
-      </form.radioGroup>
-
-      <h3>Checkboxes</h3>
-      <form.checkbox
-        @label="Label"
-        />
-      <form.checkbox
-        @error={{true}}
-        @label="Error"
-        />
-      <form.checkbox
-        @checked={{true}}
-        @label="Checked"
-        />
-      <form.checkbox
-        @label="Disabled"
-        disabled={{true}}
-        />
-      <form.checkbox
-        @checked={{true}}
-        @label="Disabled + Checked"
-        disabled={{true}}
-        />
-
-      <form.actions
-        @submitText="Save"
-        @cancelText="Cancel" />
-    </Rose::Form>
-
-    <Rose::Card::Link @title="I'm a card" />
-    <Rose::Card::Link @title="I'm a card" @description="I'm a description" />
-    <Rose::Card::Link @title="I'm a card" @description="I'm a description" @subtitle="I'm a subtitle"/>
-
-    <Rose::Table as |table|>
-      <table.header as |header|>
-        <header.row as |row|>
-          <row.cell>Address</row.cell>
-          <row.cell>Host Set</row.cell>
-          <row.cell>Name</row.cell>
-          <row.cell>Description</row.cell>
-        </header.row>
-      </table.header>
-      <table.body as |body|>
-        <body.row as |row|>
-          <row.cell>1.1.1.1</row.cell>
-          <row.cell>host-set-1, host-set-2</row.cell>
-          <row.cell>optional name</row.cell>
-          <row.cell>description</row.cell>
-        </body.row>
-      </table.body>
-      <table.footer as |footer|>
-        <footer.row as |row|>
-          <row.cell>Footer</row.cell>
-        </footer.row>
-      </table.footer>
-    </Rose::Table>
-
-    <Rose::Nav::Breadcrumbs as |breadcrumbs|>
-      <breadcrumbs.link @route="about">Level 1</breadcrumbs.link>
-      <breadcrumbs.link @route="index">Level 2</breadcrumbs.link>
-      <breadcrumbs.link @route="about">Level 3</breadcrumbs.link>
-      <breadcrumbs.link @route="about">Level 4</breadcrumbs.link>
-      <breadcrumbs.link @route="about">Level 5</breadcrumbs.link>
-    </Rose::Nav::Breadcrumbs>
-
-    <Rose::Message @title="You are not authorized" @subtitle="Error 403" @icon="disabled" as |message|>
-      <message.description>
-        You must be granted permissions to view this data.
-        Ask your administrator if you think you should have access.
-      </message.description>
-      <message.link @route="index">
-        <Rose::Icon @name="chevron-left" />
-        Go back
-      </message.link>
-      <message.link @route="index">Need help?</message.link>
-    </Rose::Message>
-
-    <Rose::Message @title="Page Not Found" @subtitle="Error 404" @icon="help-circle-outline" as |message|>
-      <message.description>
-        Sorry, we couldn't find the page you were looking for. You can go back or to one of the links below.
-      </message.description>
-      <message.link @route="index">
-        <Rose::Icon @name="chevron-left" />
-        Go back
-      </message.link>
-      <message.link @route="index">Need help?</message.link>
-    </Rose::Message>
-
-    <Rose::Message @title="Something went wrong" @subtitle="Error 500" @icon="alert-circle-outline" as |message|>
-      <message.description>
-        We ran into a problem and could not continue. You can ask your administrator or try again later.
-      </message.description>
-      <message.link @route="index">
-        <Rose::Icon @name="refresh-default" />
-        Try Again
-      </message.link>
-      <message.link @route="index">Need help?</message.link>
-    </Rose::Message>
-
-    <Rose::Message @title="No logs received yet" as |message|>
-      <message.description>
-        Your logs will appear here when we start receiving them. If your server is currently outputting logs, check your configuration.
-      </message.description>
-    </Rose::Message>
-
-    <Rose::Message @title="Welcome to Namespaces" as |message|>
-      <message.description>
-        Namespaces allow you to create distinct areas with their own separate policies, mounts, tokens, and identity entities.
-      </message.description>
-      <message.link @route="index">Add a namespace</message.link>
-    </Rose::Message>
-
-    <Rose::Layout::Centered>
-      <Rose::Message @title="Welcome to Namespaces" as |message|>
-        <message.description>
-          Namespaces allow you to create distinct areas with their own separate policies, mounts, tokens, and identity entities.
-        </message.description>
-        <message.link @route="index">Add a namespace</message.link>
-      </Rose::Message>
-    </Rose::Layout::Centered>
   </layout.body>
 </Rose::Layout::Global>
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 0b262991e..2e6b91039 100644
--- a/addons/rose/tests/integration/components/rose/layout/global-test.js
+++ b/addons/rose/tests/integration/components/rose/layout/global-test.js
@@ -8,7 +8,7 @@ module('Integration | Component | rose/layout/global', function (hooks) {
 
   test('it renders', async function (assert) {
     await render(hbs`<Rose::Layout::Global />`);
-    assert.ok(find('div'));
+    assert.ok(find('section'));
     assert.ok(find('.rose-layout-global'));
   });
 
@@ -17,13 +17,6 @@ module('Integration | Component | rose/layout/global', function (hooks) {
     assert.ok(find('#global'));
   });
 
-  test('it renders with content', async function (assert) {
-    await render(hbs`<Rose::Layout::Global as |layout|>
-      <button id="content" />
-    </Rose::Layout::Global>`);
-    assert.ok(find('#content'));
-  });
-
   test('it renders with header', async function (assert) {
     await render(hbs`<Rose::Layout::Global as |layout|>
       <layout.header />
@@ -31,17 +24,10 @@ module('Integration | Component | rose/layout/global', function (hooks) {
     assert.ok(find('.rose-layout-global-header'));
   });
 
-  test('it renders with main', async function (assert) {
+  test('it renders with body', async function (assert) {
     await render(hbs`<Rose::Layout::Global as |layout|>
       <layout.body />
     </Rose::Layout::Global>`);
     assert.ok(find('.rose-layout-global-body'));
   });
-
-  test('it renders with sidebar', async function (assert) {
-    await render(hbs`<Rose::Layout::Global as |layout|>
-      <layout.sidebar />
-    </Rose::Layout::Global>`);
-    assert.ok(find('.rose-layout-global-sidebar'));
-  });
 });
diff --git a/addons/rose/tests/integration/components/rose/layout/sidebar-test.js b/addons/rose/tests/integration/components/rose/layout/sidebar-test.js
new file mode 100644
index 000000000..727710ca1
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/layout/sidebar-test.js
@@ -0,0 +1,21 @@
+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/sidebar', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    assert.expect(3);
+    await render(hbs`
+      <Rose::Layout::Sidebar as |layout|>
+        <layout.sidebar />
+        <layout.body />
+      </Rose::Layout::Sidebar>
+    `);
+    assert.ok(find('.rose-layout-sidebar'));
+    assert.ok(find('.rose-layout-sidebar-body'));
+    assert.ok(find('aside.rose-layout-sidebar-sidebar'));
+  });
+});
diff --git a/ui/core/app/templates/application.hbs b/ui/core/app/templates/application.hbs
index 7181b7f54..e8db43d45 100644
--- a/ui/core/app/templates/application.hbs
+++ b/ui/core/app/templates/application.hbs
@@ -25,9 +25,16 @@
     </Rose::Header>
   </layout.header>
 
-  <layout.sidebar>{{outlet "sidebar"}}</layout.sidebar>
-
-  <layout.body>{{outlet}}</layout.body>
+  <layout.body>
+    <Rose::Layout::Sidebar as |sidebarLayout|>
+      <sidebarLayout.sidebar>
+        {{outlet "sidebar"}}
+      </sidebarLayout.sidebar>
+      <sidebarLayout.body @tagName="main">
+        {{outlet}}
+      </sidebarLayout.body>
+    </Rose::Layout::Sidebar>
+  </layout.body>
 
 </Rose::Layout::Global>