diff --git a/ui/desktop/app/components/card/index.hbs b/ui/desktop/app/components/card/index.hbs
new file mode 100644
index 000000000..1000ab795
--- /dev/null
+++ b/ui/desktop/app/components/card/index.hbs
@@ -0,0 +1,15 @@
+<section class='credentials-card'>
+  {{yield
+    (hash
+      header=(component
+        'rose/anonymous' tagName='header' class='credentials-card-header'
+      )
+      body=(component
+        'rose/anonymous' tagName='div' class='credentials-card-body'
+      )
+      footer=(component
+        'rose/anonymous' tagName='footer' class='credentials-card-footer'
+      )
+    )
+  }}
+</section>
\ No newline at end of file
diff --git a/ui/desktop/tests/integration/components/card-test.js b/ui/desktop/tests/integration/components/card-test.js
new file mode 100644
index 000000000..a48efd669
--- /dev/null
+++ b/ui/desktop/tests/integration/components/card-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 'ember-cli-htmlbars';
+
+module('Integration | Component | card', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Card />`);
+    assert.ok(find('.credentials-card'));
+  });
+
+  test('it renders with content', async function (assert) {
+    await render(hbs`
+      <Card as |card|>
+        <card.header></card.header>
+        <card.body></card.body>
+        <card.footer></card.footer>
+      </Card>
+    `);
+
+    assert.ok(find('.credentials-card'));
+    assert.ok(find('.credentials-card-header'));
+    assert.ok(find('.credentials-card-body'));
+    assert.ok(find('.credentials-card-footer'));
+  });
+});