diff --git a/app/Http/Livewire/Frontend/Header.php b/app/Http/Livewire/Frontend/Header.php
index 46ac1298..85a73285 100644
--- a/app/Http/Livewire/Frontend/Header.php
+++ b/app/Http/Livewire/Frontend/Header.php
@@ -15,6 +15,8 @@ class Header extends Component
     public string $c = 'de';
     public string $l = 'de';
 
+    public $bgColor = 'bg-21gray';
+
     protected $queryString = ['l'];
 
     public function rules()
diff --git a/resources/views/livewire/book-case/heatmap.blade.php b/resources/views/livewire/book-case/heatmap.blade.php
index 07a5ac0d..44642128 100644
--- a/resources/views/livewire/book-case/heatmap.blade.php
+++ b/resources/views/livewire/book-case/heatmap.blade.php
@@ -1,5 +1,5 @@
-<div class="bg-21gray h-screen justify-between">
-    <livewire:frontend.header :country="$country"/>
+<div class="bg-black h-screen justify-between">
+    <livewire:frontend.header :country="$country" bgColor="bg-black"/>
     {{-- MAIN --}}
     <section class="w-full mb-12">
         <div class="max-w-screen-2xl mx-auto px-2 sm:px-10">
diff --git a/resources/views/livewire/frontend/header.blade.php b/resources/views/livewire/frontend/header.blade.php
index 9d6d30cc..ec28f7d6 100644
--- a/resources/views/livewire/frontend/header.blade.php
+++ b/resources/views/livewire/frontend/header.blade.php
@@ -2,7 +2,7 @@
     <section class="w-full">
         <div class="max-w-screen-2xl mx-auto px-2 sm:px-10">
             <div
-                class="relative sm:sticky sm:top-0 bg-21gray z-10 flex flex-col flex-wrap items-center justify-between py-7 mx-auto md:flex-row max-w-screen-2xl space-y-4">
+                class="relative sm:sticky sm:top-0 {{ $bgColor }} z-10 flex flex-col flex-wrap items-center justify-between py-7 mx-auto md:flex-row max-w-screen-2xl space-y-4">
                 <div>
                     <div class="relative flex flex-col md:flex-row">
                         <a href="{{ route('welcome', ['c' => $c, 'l' => $l]) }}"