diff --git a/apps/web/src/app/layout/top-bar/top-bar.component.html b/apps/web/src/app/layout/top-bar/top-bar.component.html
index eb34269..b94ed41 100644
--- a/apps/web/src/app/layout/top-bar/top-bar.component.html
+++ b/apps/web/src/app/layout/top-bar/top-bar.component.html
@@ -4,7 +4,7 @@
     @if (character(); as character) {
       <div class="top-bar__identity">
         <span class="top-bar__name">{{ character.name }}</span>
-        <span class="top-bar__level">Stufe {{ character.level }}</span>
+        <span class="top-bar__level">Renown {{ character.renown }}</span>
       </div>
       <div class="top-bar__health" aria-label="Lebenspunkte">
         <span>{{ character.currentHp }} / {{ character.maxHp }}</span>
@@ -20,10 +20,6 @@
           <dt>Silber</dt>
           <dd>{{ character.silver }}</dd>
         </div>
-        <div class="top-bar__resource" data-top-bar-experience>
-          <dt>XP</dt>
-          <dd>{{ character.experience }}</dd>
-        </div>
       </dl>
     } @else {
       <span class="top-bar__loading">Charakterdaten werden geladen</span>
diff --git a/apps/web/src/app/layout/top-bar/top-bar.component.spec.ts b/apps/web/src/app/layout/top-bar/top-bar.component.spec.ts
new file mode 100644
index 0000000..a904e11
--- /dev/null
+++ b/apps/web/src/app/layout/top-bar/top-bar.component.spec.ts
@@ -0,0 +1,52 @@
+import { TestBed } from '@angular/core/testing';
+import type { CharacterResponse } from '../../core/api/game-api.models';
+import { TopBarComponent } from './top-bar.component';
+
+function characterFixture(overrides: Partial<CharacterResponse> = {}): CharacterResponse {
+  return {
+    id: 'character-1',
+    name: 'Aric Duskwalker',
+    renown: 3,
+    silver: 120,
+    currentHp: 80,
+    maxHp: 100,
+    attack: 10,
+    currentLocation: { id: 'location-1', key: 'aschenfelder', name: 'Aschenfelder' },
+    ...overrides,
+  };
+}
+
+async function render(character: CharacterResponse | null): Promise<HTMLElement> {
+  await TestBed.configureTestingModule({
+    imports: [TopBarComponent],
+  }).compileComponents();
+
+  const fixture = TestBed.createComponent(TopBarComponent);
+  fixture.componentRef.setInput('character', character);
+  fixture.detectChanges();
+
+  return fixture.nativeElement as HTMLElement;
+}
+
+describe('TopBarComponent', () => {
+  it('shows the character name, HP and silver', async () => {
+    const element = await render(characterFixture({ name: 'Aric Duskwalker', currentHp: 80, maxHp: 100, silver: 120 }));
+
+    expect(element.textContent).toContain('Aric Duskwalker');
+    expect(element.textContent).toContain('80 / 100');
+    expect(element.querySelector('[data-top-bar-silver]')?.textContent).toContain('120');
+  });
+
+  it('shows Renown instead of Level, and displays no XP value', async () => {
+    const element = await render(characterFixture({ renown: 3 }));
+
+    expect(element.textContent).toContain('Renown 3');
+    expect(element.querySelector('[data-top-bar-experience]')).toBeNull();
+  });
+
+  it('shows a loading message when no character is available yet', async () => {
+    const element = await render(null);
+
+    expect(element.textContent).toContain('Charakterdaten werden geladen');
+  });
+});