diff --git a/addons/rose/addon/styles/rose/components/nav/_breadcrumbs.scss b/addons/rose/addon/styles/rose/components/nav/_breadcrumbs.scss
index c07156279..e7ac5572e 100644
--- a/addons/rose/addon/styles/rose/components/nav/_breadcrumbs.scss
+++ b/addons/rose/addon/styles/rose/components/nav/_breadcrumbs.scss
@@ -11,6 +11,7 @@
     color: var(--color);
     text-decoration: none;
     cursor: pointer;
+    display: inline-flex;
 
     &:hover {
       --color: var(--action);
diff --git a/ui/core/app/controllers/.gitkeep b/ui/core/app/controllers/.gitkeep
deleted file mode 100644
index e69de29bb..000000000
diff --git a/ui/core/tests/acceptance/host-catalogs-test.js b/ui/core/tests/acceptance/host-catalogs-test.js
index acdacafa7..e07e85046 100644
--- a/ui/core/tests/acceptance/host-catalogs-test.js
+++ b/ui/core/tests/acceptance/host-catalogs-test.js
@@ -1,5 +1,5 @@
 import { module, test } from 'qunit';
-import { visit, currentURL, click, fillIn, find } from '@ember/test-helpers';
+import { visit, currentURL, click, fillIn, find, findAll } from '@ember/test-helpers';
 import { setupApplicationTest } from 'ember-qunit';
 import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
 import a11yAudit from 'ember-a11y-testing/test-support/audit';
@@ -10,12 +10,29 @@ module('Acceptance | host catalogs', function(hooks) {
   setupMirage(hooks);
 
   test('visiting host catalogs', async function (assert) {
-    assert.expect(1);
+    assert.expect(5);
     this.server.createList('project', 1);
     this.server.createList('host-catalog', 1);
     await visit('/orgs/1/projects/1/host-catalogs');
     await a11yAudit();
     assert.equal(currentURL(), '/orgs/1/projects/1/host-catalogs');
+
+    assert.equal(findAll('.rose-layout-page-breadcrumbs a').length, 3);
+    assert.equal(
+      findAll('.rose-layout-page-breadcrumbs a')[0].textContent.trim(),
+      'Projects',
+      'Displays project breadcrumb'
+    );
+    assert.equal(
+      findAll('.rose-layout-page-breadcrumbs a')[1].textContent.trim(),
+      this.server.db.projects[0].name,
+      'Displays project name breadcrumb'
+    );
+    assert.equal(
+      findAll('.rose-layout-page-breadcrumbs a')[2].textContent.trim(),
+      'Host Catalogs',
+      'Displays hostcatalog breadcrumb'
+    );
   });
 
   test('can navigate to host catalog form', async function(assert) {
diff --git a/ui/core/tests/acceptance/projects-test.js b/ui/core/tests/acceptance/projects-test.js
index 612da5ffb..832ce0529 100644
--- a/ui/core/tests/acceptance/projects-test.js
+++ b/ui/core/tests/acceptance/projects-test.js
@@ -10,11 +10,16 @@ module('Acceptance | projects', function (hooks) {
   setupMirage(hooks);
 
   test('visiting projects', async function (assert) {
-    assert.expect(1);
+    assert.expect(2);
     this.server.createList('project', 1);
     await visit('/orgs/1/projects');
     await a11yAudit();
     assert.equal(currentURL(), '/orgs/1/projects');
+    assert.equal(
+      find('.rose-layout-page-breadcrumbs').textContent.trim(),
+      'Projects',
+      'Displays breadcrumbs'
+    );
   });
 
   test('saving a new project with invalid fields displays error messages', async function (assert) {
diff --git a/ui/core/tests/integration/components/bread-crumbs-test.js b/ui/core/tests/integration/components/bread-crumbs-test.js
index 47ba10bba..7ecb5ac86 100644
--- a/ui/core/tests/integration/components/bread-crumbs-test.js
+++ b/ui/core/tests/integration/components/bread-crumbs-test.js
@@ -1,13 +1,42 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-//import { render } from '@ember/test-helpers';
-//import { hbs } from 'ember-cli-htmlbars';
+import { render, find, findAll } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
 
 module('Integration | Component | bread-crumbs', function(hooks) {
   setupRenderingTest(hooks);
 
-  // TODO:  need bread crumbs tests
   test('it renders', async function(assert) {
-    assert.ok(true);
+    this.set('breadCrumbs', [{label: 'Level 1'}]);
+
+    await render(hbs`<BreadCrumbs @breadCrumbs={{this.breadCrumbs}} />`);
+    assert.equal(find('.rose-nav-breadcrumbs').textContent.trim(), 'Level 1');
+  });
+
+  test('it renders with model', async function(assert) {
+    this.set('breadCrumbs', [{
+      label: 'Level 2',
+      path: 'orgs.org.projects.project',
+      model: {project_id: 'project'}}
+    ]);
+
+    await render(hbs`<BreadCrumbs @breadCrumbs={{this.breadCrumbs}} />`);
+    assert.equal(find('.rose-nav-breadcrumbs').textContent.trim(), 'Level 2');
+  });
+
+  test('it renders multiple breadCrumbs', async function(assert) {
+    this.set('breadCrumbs', [{
+      label: 'Level 1'
+    },{
+      label: 'Level 2'
+    }, {
+      label: 'Level 3'
+    }]);
+
+    await render(hbs`<BreadCrumbs @breadCrumbs={{this.breadCrumbs}} />`);
+    assert.equal(findAll('a').length, 3);
+    assert.equal(findAll('a')[0].textContent.trim(), 'Level 1');
+    assert.equal(findAll('a')[1].textContent.trim(), 'Level 2');
+    assert.equal(findAll('a')[2].textContent.trim(), 'Level 3');
   });
 });