diff --git a/app/components/topbar-account-panel/component.js b/app/components/topbar-account-panel/component.js
new file mode 100644
index 0000000..2a5c942
--- /dev/null
+++ b/app/components/topbar-account-panel/component.js
@@ -0,0 +1,10 @@
+import Component from '@ember/component';
+import { inject as service } from '@ember/service';
+
+export default Component.extend({
+
+  tagName: '',
+
+  kredits: service(),
+
+});
diff --git a/app/components/topbar-account-panel/template.hbs b/app/components/topbar-account-panel/template.hbs
new file mode 100644
index 0000000..b65983a
--- /dev/null
+++ b/app/components/topbar-account-panel/template.hbs
@@ -0,0 +1,12 @@
+<section id="user-account">
+  {{#if kredits.hasAccounts }}
+    {{#if kredits.currentUser}}
+      {{kredits.currentUser.name}}
+      {{#if kredits.currentUserIsCore}}
+        <span class="core-flag">(core)</span>
+      {{/if}}
+    {{/if}}
+  {{else}}
+    Anonymous
+  {{/if}}
+</section>
\ No newline at end of file
diff --git a/app/templates/application.hbs b/app/templates/application.hbs
index d82b972..11b8e12 100644
--- a/app/templates/application.hbs
+++ b/app/templates/application.hbs
@@ -1,16 +1,6 @@
 <header id="topbar">
   <h1>{{link-to "Kosmos Kredits" "dashboard"}}</h1>
-
-  <section id="user-account">
-    {{#if kredits.hasAccounts }}
-      {{#if kredits.currentUser}}
-        {{kredits.currentUser.name}}
-        {{#if kredits.currentUserIsCore}}(core){{/if}}
-      {{/if}}
-    {{else}}
-      Anonymous
-    {{/if}}
-  </section>
+  {{topbar-account-panel}}
 </header>
 
 {{outlet}}
diff --git a/tests/integration/components/topbar-account-panel/component-test.js b/tests/integration/components/topbar-account-panel/component-test.js
new file mode 100644
index 0000000..b6054ab
--- /dev/null
+++ b/tests/integration/components/topbar-account-panel/component-test.js
@@ -0,0 +1,39 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | topbar-account-panel', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('unknown user without wallet (or no permission to get wallet/account info)', async function(assert) {
+    await render(hbs`<TopbarAccountPanel />`);
+
+    assert.equal(this.element.textContent.trim(), 'Anonymous');
+  });
+
+  test('unknown user with Ethereum wallet', async function(assert) {
+    let service = this.owner.lookup('service:kredits');
+    service.set('currentUserAccounts', [{ foo: 'bar' }]);
+    await render(hbs`<TopbarAccountPanel />`);
+
+    assert.equal(this.element.textContent.trim(), 'Anonymous');
+  });
+
+  test('known contributor', async function(assert) {
+    let service = this.owner.lookup('service:kredits');
+    service.set('currentUserAccounts', [{ foo: 'bar' }]);
+    service.set('currentUser', {
+      name: 'Dorian Nakamoto',
+      isCore: false
+    });
+    await render(hbs`<TopbarAccountPanel />`);
+
+    assert.equal(this.element.textContent.trim(), 'Dorian Nakamoto');
+
+    service.set('currentUser.isCore', true);
+    await render(hbs`<TopbarAccountPanel />`);
+
+    assert.equal(this.element.querySelectorAll('span.core-flag').length, 1);
+  });
+});