diff --git a/src/lib/Header.svelte b/src/lib/Header.svelte
index 8165a74..78b6759 100644
--- a/src/lib/Header.svelte
+++ b/src/lib/Header.svelte
@@ -34,7 +34,7 @@
         align-items: center;
         column-gap: $space;
         padding: #{$space * 0.5};
-        background: var(--md-sys-color-surface-container);
+        background: var(--md-sys-color-surface-container-high);
         min-height: 5svh;
 
         grid-template: {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 2bd3eca..3eef38c 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -21,8 +21,8 @@
     }
 
     :global(body) {
-        background: var(--md-sys-color-background);
-        color: var(--md-sys-color-on-background);
+        background: var(--md-sys-color-surface-container);
+        color: var(--md-sys-color-on-surface);
     }
 
     :global(a) {