diff --git a/components/AppHeader.vue b/components/AppHeader.vue
index b9cdfa830..b4442dd4a 100644
--- a/components/AppHeader.vue
+++ b/components/AppHeader.vue
@@ -62,7 +62,7 @@ css({
     '.overlay': {
       position: 'absolute',
       top: 'calc(var(--header-padding) + var(--logo-height) + {space.2})',
-      backgroundColor: '{alpine.backdrop.backgroundColor.light}',
+      backgroundColor: '{alpine.backdrop.backgroundColor}',
       border: '1px solid {color.gray.200}',
       borderRadius: '{radii.md}',
       padding: '{space.6}',
@@ -93,8 +93,7 @@ css({
         display: 'none'
       },
       '@dark': {
-        backgroundColor: '{alpine.backdrop.backgroundColor.dark}',
-        border: '1px solid {color.gray.800}',
+        borderColor: '{color.gray.800}',
       }
     },
     '.logo': {
diff --git a/tokens.config.ts b/tokens.config.ts
index 96a27a639..925319f74 100644
--- a/tokens.config.ts
+++ b/tokens.config.ts
@@ -11,7 +11,7 @@ export default defineTheme({
     },
     backdrop: {
       backgroundColor: {
-        light: '#f4f4f5b3', // TODO: rgba({color.gray.100}, 0.7)
+        initial: '#f4f4f5b3', // TODO: rgba({color.gray.100}, 0.7)
         dark: '#18181bb3' // TODO: rgba({color.gray.900}, 0.7)
       }
     },