diff --git a/addons/rose/addon/components/rose/toolbar/index.hbs b/addons/rose/addon/components/rose/toolbar/index.hbs
index 5f9a6388a..15977f7c9 100644
--- a/addons/rose/addon/components/rose/toolbar/index.hbs
+++ b/addons/rose/addon/components/rose/toolbar/index.hbs
@@ -1,6 +1,6 @@
 <div ...attributes class="rose-toolbar">
   {{yield (hash
-    search=(component "rose/anonymous")
-    filter=(component "rose/anonymous" class="rose-toolbar-search")
+    search=(component "rose/anonymous" class="rose-toolbar-search")
+    filter=(component "rose/anonymous" class="rose-toolbar-filter")
   )}}
 </div>
\ No newline at end of file
diff --git a/addons/rose/addon/styles/rose/components/toolbar/_index.scss b/addons/rose/addon/styles/rose/components/toolbar/_index.scss
index ea4521d0f..c72d1654c 100644
--- a/addons/rose/addon/styles/rose/components/toolbar/_index.scss
+++ b/addons/rose/addon/styles/rose/components/toolbar/_index.scss
@@ -1,10 +1 @@
-.rose-toolbar {
-  background-color: #fbfbfc;
-  display: flex;
-  .rose-form {
-    display: flex;
-  }
-  .rose-dropdown {
-    margin-left: auto;
-  }
-}
+@import 'toolbar';
diff --git a/addons/rose/addon/styles/rose/components/toolbar/_toolbar.scss b/addons/rose/addon/styles/rose/components/toolbar/_toolbar.scss
index e69de29bb..9d1c18372 100644
--- a/addons/rose/addon/styles/rose/components/toolbar/_toolbar.scss
+++ b/addons/rose/addon/styles/rose/components/toolbar/_toolbar.scss
@@ -0,0 +1,10 @@
+.rose-toolbar {
+  background-color: var(--ui-gray-subtler-6);
+  display: flex;
+  .rose-form {
+    display: flex;
+  }
+  .rose-dropdown {
+    margin-left: auto;
+  }
+}
diff --git a/addons/rose/tests/integration/components/rose/toolbar-test.js b/addons/rose/tests/integration/components/rose/toolbar-test.js
index dbdd09da2..5fd567fba 100644
--- a/addons/rose/tests/integration/components/rose/toolbar-test.js
+++ b/addons/rose/tests/integration/components/rose/toolbar-test.js
@@ -12,10 +12,22 @@ module('Integration | Component | rose/toolbar', function (hooks) {
     assert.ok(find('.rose-toolbar'));
   });
 
+  test('it renders with attributes', async function (assert) {
+    await render(hbs`<Rose::Toolbar id="toolbar"/>`);
+    assert.ok(find('#toolbar'));
+  });
+
   test('it renders with filter', async function (assert) {
     await render(hbs`<Rose::Toolbar as |toolbar| >
       <toolbar.filter />
     </Rose::Toolbar>`);
+    assert.ok(find('.rose-toolbar-filter'));
+  });
+
+  test('it renders with search', async function (assert) {
+    await render(hbs`<Rose::Toolbar as |toolbar| >
+      <toolbar.search />
+    </Rose::Toolbar>`);
     assert.ok(find('.rose-toolbar-search'));
   });
 });