diff --git a/myteamwallet_frontend_modern/src/app/app.html b/myteamwallet_frontend_modern/src/app/app.html
index 67e7bd4..c157873 100644
--- a/myteamwallet_frontend_modern/src/app/app.html
+++ b/myteamwallet_frontend_modern/src/app/app.html
@@ -1 +1,2 @@
+<app-env-banner />
 <router-outlet />
diff --git a/myteamwallet_frontend_modern/src/app/app.spec.ts b/myteamwallet_frontend_modern/src/app/app.spec.ts
index 6400cbd..ab9aa98 100644
--- a/myteamwallet_frontend_modern/src/app/app.spec.ts
+++ b/myteamwallet_frontend_modern/src/app/app.spec.ts
@@ -1,76 +1,44 @@
-import { signal } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { provideRouter } from '@angular/router';
-import { of } from 'rxjs';
 import { App } from './app';
-import { AuthApi } from './core/auth/auth-api';
-import { AuthStore } from './core/auth/auth-store';
+import { environment } from '../environments/environment';
 
 describe('App', () => {
-  const token = signal<string | null>(null);
-  const updateUser = vi.fn();
-  const meResponse = signal<Record<string, unknown>>({
-    id: 1,
-    email: 'a@b.de',
-    firstName: 'Alex',
-    lastName: 'Muster',
-  });
-  const me = vi.fn(() => of(meResponse()));
-  const setSession = vi.fn();
+  const originalProduction = environment.production;
 
-  beforeEach(async () => {
-    token.set(null);
-    meResponse.set({ id: 1, email: 'a@b.de', firstName: 'Alex', lastName: 'Muster' });
-    updateUser.mockClear();
-    setSession.mockClear();
-    me.mockClear();
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  afterEach(() => {
+    environment.production = originalProduction;
+  });
+
+  it('sets --env-banner-height to 0px and renders no banner in production', async () => {
+    environment.production = true;
     await TestBed.configureTestingModule({
       imports: [App],
-      providers: [
-        provideRouter([]),
-        { provide: AuthStore, useValue: { token, updateUser, setSession } },
-        { provide: AuthApi, useValue: { me } },
-      ],
+      providers: [provideHttpClient(), provideHttpClientTesting(), provideRouter([])],
     }).compileComponents();
-  });
-
-  it('should create the app', () => {
     const fixture = TestBed.createComponent(App);
-    expect(fixture.componentInstance).toBeTruthy();
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.style.getPropertyValue('--env-banner-height')).toBe('0px');
+    expect(fixture.nativeElement.querySelector('.env-banner')).toBeNull();
   });
 
-  it('validates and refreshes a restored session on startup', () => {
-    token.set('stored-token');
+  it('sets --env-banner-height to 28px and renders the banner outside production', async () => {
+    environment.production = false;
+    await TestBed.configureTestingModule({
+      imports: [App],
+      providers: [provideHttpClient(), provideHttpClientTesting(), provideRouter([])],
+    }).compileComponents();
+    const fixture = TestBed.createComponent(App);
+    fixture.detectChanges();
 
-    TestBed.createComponent(App);
-
-    expect(me).toHaveBeenCalled();
-    expect(updateUser).toHaveBeenCalledWith({
-      id: 1,
-      email: 'a@b.de',
-      firstName: 'Alex',
-      lastName: 'Muster',
-    });
-  });
-
-  it('replaces an expired stored token when me returns a refreshed token', () => {
-    token.set('expired-token');
-    meResponse.set({
-      id: 1,
-      email: 'a@b.de',
-      firstName: 'Alex',
-      lastName: 'Muster',
-      token: 'refreshed-token',
-    });
-
-    TestBed.createComponent(App);
-
-    expect(setSession).toHaveBeenCalledWith('refreshed-token', {
-      id: 1,
-      email: 'a@b.de',
-      firstName: 'Alex',
-      lastName: 'Muster',
-    });
-    expect(updateUser).not.toHaveBeenCalled();
+    expect(fixture.nativeElement.style.getPropertyValue('--env-banner-height')).toBe('28px');
+    expect(fixture.nativeElement.querySelector('.env-banner')).not.toBeNull();
   });
 });
diff --git a/myteamwallet_frontend_modern/src/app/app.ts b/myteamwallet_frontend_modern/src/app/app.ts
index 3a24188..c5cd8a6 100644
--- a/myteamwallet_frontend_modern/src/app/app.ts
+++ b/myteamwallet_frontend_modern/src/app/app.ts
@@ -2,16 +2,22 @@ import { Component, inject } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { AuthApi } from './core/auth/auth-api';
 import { AuthStore } from './core/auth/auth-store';
+import { environment } from '../environments/environment';
+import { ENV_BANNER_HEIGHT_PX, EnvBanner } from './shared/env-banner/env-banner';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, EnvBanner],
   templateUrl: './app.html',
   styleUrl: './app.scss',
+  host: {
+    '[style.--env-banner-height]': 'bannerHeight',
+  },
 })
 export class App {
   private readonly authApi = inject(AuthApi);
   private readonly authStore = inject(AuthStore);
+  protected readonly bannerHeight = `${environment.production ? 0 : ENV_BANNER_HEIGHT_PX}px`;
 
   constructor() {
     if (this.authStore.token()) {