diff --git a/addons/rose/addon/components/rose/toolbar/index.hbs b/addons/rose/addon/components/rose/toolbar/index.hbs
new file mode 100644
index 000000000..084353050
--- /dev/null
+++ b/addons/rose/addon/components/rose/toolbar/index.hbs
@@ -0,0 +1,3 @@
+<div ...attributes class="rose-toolbar">
+ {{yield}}
+</div>
\ No newline at end of file
diff --git a/addons/rose/addon/components/rose/toolbar/index.stories.mdx b/addons/rose/addon/components/rose/toolbar/index.stories.mdx
new file mode 100644
index 000000000..dd9dbb015
--- /dev/null
+++ b/addons/rose/addon/components/rose/toolbar/index.stories.mdx
@@ -0,0 +1,24 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+
+<Meta title="Rose|Toolbar" component="Toolbar" />
+
+# Toolbar
+
+renders a toolbar 
+
+```htmlbars
+<Rose::Toolbar as |toolbar|>
+</Rose::Toolbar>
+```
+
+<Preview>
+  <Story name="Toolbar">{{
+    template: hbs`
+    <Rose::Toolbar as |toolbar|>
+    toolbar
+     </Rose::Toolbar>
+    `,
+  }}</Story>
+</Preview>
diff --git a/addons/rose/addon/styles/rose/components/_index.scss b/addons/rose/addon/styles/rose/components/_index.scss
index dd936e77a..f8161a2c6 100644
--- a/addons/rose/addon/styles/rose/components/_index.scss
+++ b/addons/rose/addon/styles/rose/components/_index.scss
@@ -18,3 +18,4 @@
 @import 'message';
 @import 'link-button';
 @import 'badge';
+@import 'toolbar';
diff --git a/addons/rose/addon/styles/rose/components/toolbar/_index.scss b/addons/rose/addon/styles/rose/components/toolbar/_index.scss
new file mode 100644
index 000000000..c72d1654c
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/toolbar/_index.scss
@@ -0,0 +1 @@
+@import 'toolbar';
diff --git a/addons/rose/addon/styles/rose/components/toolbar/_toolbar.scss b/addons/rose/addon/styles/rose/components/toolbar/_toolbar.scss
new file mode 100644
index 000000000..cf6bd1491
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/toolbar/_toolbar.scss
@@ -0,0 +1,13 @@
+@use '../../variables/sizing';
+@use '../../variables/media';
+
+$xxs: sizing.rems(xxs); // 4
+$xxxxs: sizing.rems(xxxxs); // 1
+
+.rose-toolbar {
+  background-color: var(--ui-gray-subtler-6);
+
+  .rose-form {
+    padding: $xxs + $xxxxs;
+  }
+}
diff --git a/addons/rose/app/components/rose/toolbar.js b/addons/rose/app/components/rose/toolbar.js
new file mode 100644
index 000000000..bfd066fe9
--- /dev/null
+++ b/addons/rose/app/components/rose/toolbar.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/toolbar';
diff --git a/addons/rose/tests/integration/components/rose/toolbar-test.js b/addons/rose/tests/integration/components/rose/toolbar-test.js
new file mode 100644
index 000000000..9c91e6c7a
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/toolbar-test.js
@@ -0,0 +1,20 @@
+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/toolbar', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    assert.expect(1);
+    await render(hbs`<Rose::Toolbar />`);
+    assert.ok(find('.rose-toolbar'));
+  });
+
+  test('it renders with attributes', async function (assert) {
+    assert.expect(1);
+    await render(hbs`<Rose::Toolbar id="toolbar"/>`);
+    assert.ok(find('#toolbar'));
+  });
+});