diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index 123ce93..4cb99ae 100644
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -1,13 +1,11 @@
-@use '@angular/material' as mat;
-
-.header{
+.header {
   position: sticky;
   top: 0;
   margin: 0;
   padding: 0.5rem 1rem;
   z-index: 100;
   height: fit-content;
-  background-color: var(--mat-sys-primary-fixed);
+  background-color: var(--mat-sys-primary-container);
 
   nav {
     display: flex;
@@ -19,15 +17,17 @@
     gap: 0.25rem;
   }
 
-  a, button {
-    color: var(--mat-sys-on-primary-fixed-variant);
+  a,
+  button {
+    color: var(--mat-sys-primary);
 
-    &:hover, &.active {
-      background-color: color-mix(in srgb, var(--mat-sys-primary) 50%, transparent)
+    &:hover,
+    &.active {
+      background-color: var(--mat-sys-primary-overlay)
     }
   }
 
   &__login {
     min-width: fit-content;
   }
-}
\ No newline at end of file
+}
diff --git a/src/styles.scss b/src/styles.scss
index adce072..6cdd52a 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -3,15 +3,14 @@
 html {
   color-scheme: light dark;
 
-  @include mat.theme((
-          color: mat.$azure-palette,
-          typography: Roboto,
-          density: 0
-  ));
+  @include mat.theme((color: mat.$azure-palette,
+      typography: Roboto,
+      density: 0));
+  --mat-sys-primary-overlay: color-mix(in srgb, var(--mat-sys-primary) 10%, transparent);
 }
 
-
-html, body {
+html,
+body {
   height: 100%;
 }