diff --git a/apps/client/src/app/components/header/header.component.html b/apps/client/src/app/components/header/header.component.html
index 8a611d935..276cb30f8 100644
--- a/apps/client/src/app/components/header/header.component.html
+++ b/apps/client/src/app/components/header/header.component.html
@@ -17,7 +17,7 @@
         <a
           class="d-none d-sm-block"
           i18n
-          mat-flat-button
+          mat-button
           [ngClass]="{
             'font-weight-bold':
               currentRoute === 'home' || currentRoute === 'zen',
@@ -32,7 +32,7 @@
         <a
           class="d-none d-sm-block"
           i18n
-          mat-flat-button
+          mat-button
           [ngClass]="{
             'font-weight-bold': currentRoute === 'portfolio',
             'text-decoration-underline': currentRoute === 'portfolio'
@@ -45,7 +45,7 @@
         <a
           class="d-none d-sm-block"
           i18n
-          mat-flat-button
+          mat-button
           [ngClass]="{
             'font-weight-bold': currentRoute === 'accounts',
             'text-decoration-underline': currentRoute === 'accounts'
@@ -59,7 +59,7 @@
           <a
             class="d-none d-sm-block"
             i18n
-            mat-flat-button
+            mat-button
             [ngClass]="{
               'font-weight-bold': currentRoute === 'admin',
               'text-decoration-underline': currentRoute === 'admin'
@@ -73,7 +73,7 @@
         <a
           class="d-none d-sm-block"
           i18n
-          mat-flat-button
+          mat-button
           [ngClass]="{
             'font-weight-bold': currentRoute === routeResources,
             'text-decoration-underline': currentRoute === routeResources
@@ -88,7 +88,7 @@
         <li class="list-inline-item">
           <a
             class="d-none d-sm-block"
-            mat-flat-button
+            mat-button
             [ngClass]="{
               'font-weight-bold': currentRoute === routePricing,
               'text-decoration-underline': currentRoute === routePricing
@@ -108,7 +108,7 @@
         <a
           class="d-none d-sm-block"
           i18n
-          mat-flat-button
+          mat-button
           [ngClass]="{
             'font-weight-bold': currentRoute === routeAbout,
             'text-decoration-underline': currentRoute === routeAbout
@@ -158,7 +158,7 @@
       <li class="list-inline-item">
         <button
           class="no-min-width px-1"
-          mat-flat-button
+          mat-button
           [matMenuTriggerFor]="accountMenu"
           (menuClosed)="onMenuClosed()"
           (menuOpened)="onMenuOpened()"
@@ -342,7 +342,7 @@
         <a
           class="d-none d-sm-block"
           i18n
-          mat-flat-button
+          mat-button
           [ngClass]="{
             'font-weight-bold': currentRoute === routeFeatures,
             'text-decoration-underline': currentRoute === routeFeatures
@@ -355,7 +355,7 @@
         <a
           class="d-none d-sm-block"
           i18n
-          mat-flat-button
+          mat-button
           [ngClass]="{
             'font-weight-bold': currentRoute === routeAbout,
             'text-decoration-underline': currentRoute === routeAbout
@@ -368,7 +368,7 @@
         <li class="list-inline-item">
           <a
             class="d-sm-block"
-            mat-flat-button
+            mat-button
             [ngClass]="{
               'font-weight-bold': currentRoute === routePricing,
               'text-decoration-underline': currentRoute === routePricing
@@ -389,7 +389,7 @@
           <a
             class="d-none d-sm-block"
             i18n
-            mat-flat-button
+            mat-button
             [ngClass]="{
               'font-weight-bold': currentRoute === routeMarkets,
               'text-decoration-underline': currentRoute === routeMarkets
@@ -403,12 +403,12 @@
         <a
           class="d-none d-sm-block no-min-width p-1"
           href="https://github.com/ghostfolio/ghostfolio"
-          mat-flat-button
+          mat-button
           ><ion-icon name="logo-github"></ion-icon
         ></a>
       </li>
       <li class="list-inline-item">
-        <button class="d-sm-block" mat-flat-button (click)="openLoginDialog()">
+        <button class="d-sm-block" mat-button (click)="openLoginDialog()">
           <ng-container i18n>Sign in</ng-container>
         </button>
       </li>
diff --git a/apps/client/src/app/components/header/header.component.scss b/apps/client/src/app/components/header/header.component.scss
index d73bf1a8a..3527413f2 100644
--- a/apps/client/src/app/components/header/header.component.scss
+++ b/apps/client/src/app/components/header/header.component.scss
@@ -20,6 +20,7 @@
     }
 
     .mdc-button {
+      color: var(--mdc-text-button-label-text-color);
       height: 100%;
 
       &:not(.mat-primary) {
diff --git a/apps/client/src/styles/theme.scss b/apps/client/src/styles/theme.scss
index dc9ca3460..23ab5bcae 100644
--- a/apps/client/src/styles/theme.scss
+++ b/apps/client/src/styles/theme.scss
@@ -157,6 +157,8 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
   );
 
   @include mat.all-component-themes($gf-theme-default);
+
+  --mdc-outlined-card-container-color: unset;
 }
 
 .theme-dark {
@@ -175,6 +177,8 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
   );
 
   @include mat.all-component-themes($gf-theme-dark);
+
+  --mdc-outlined-card-container-color: unset;
 }
 
 :root {