diff --git a/ui/scss/component/_header.scss b/ui/scss/component/_header.scss
index 55281f844..f72dc1722 100644
--- a/ui/scss/component/_header.scss
+++ b/ui/scss/component/_header.scss
@@ -314,7 +314,7 @@
   background-color: var(--color-header-button);
   border-radius: 1.5rem;
   margin-right: var(--spacing-s);
-  color: var(--color-brand-contrast);
+  color: var(--color-header-button-text);
   &:hover {
     .icon {
       stroke: var(--color-primary);
diff --git a/ui/scss/themes/dark.scss b/ui/scss/themes/dark.scss
index f989ee00c..7b6c1f347 100644
--- a/ui/scss/themes/dark.scss
+++ b/ui/scss/themes/dark.scss
@@ -39,6 +39,7 @@
   --color-header-button-active: var(--color-gray-6);
   --color-header-button-base: 45, 45, 45;
   --color-header-button: rgba(var(--color-header-button-base), 0.7);
+  --color-header-button-text: var(--color-white);
   --color-header-background-base: 17, 17, 17;
   --color-header-background: rgba(var(--color-header-background-base), 0.9);
   --color-header-background-transparent: rgba(7, 3, 3, 0.95);
diff --git a/ui/scss/themes/light.scss b/ui/scss/themes/light.scss
index f67ff8f73..398b338d5 100644
--- a/ui/scss/themes/light.scss
+++ b/ui/scss/themes/light.scss
@@ -44,6 +44,7 @@
 
   // Header
   --color-header-button: var(--color-button-alt-bg);
+  --color-header-button-text: var(--color-black);
   --color-header-background: #ffffff;
 
   // Button