diff --git a/src/assets/styles/tailwind.css b/src/assets/styles/tailwind.css
index 3ef3521..b16ad97 100644
--- a/src/assets/styles/tailwind.css
+++ b/src/assets/styles/tailwind.css
@@ -42,12 +42,12 @@
 }
 
 #header.scroll > div:first-child {
-  @apply bg-white md:bg-white/90 md:backdrop-blur-md;
+  @apply bg-page md:bg-white/90 md:backdrop-blur-md;
   box-shadow: 0 0.375rem 1.5rem 0 rgb(140 152 164 / 13%);
 }
 .dark #header.scroll > div:first-child,
 #header.scroll.dark > div:first-child {
-  @apply bg-white md:bg-[#030621e6] border-b border-gray-500/20;
+  @apply bg-page md:bg-[#030621e6] border-b border-gray-500/20;
   box-shadow: none;
 }
 /* #header.scroll > div:last-child {
diff --git a/src/components/widgets/Header.astro b/src/components/widgets/Header.astro
index 9988db8..65cc803 100644
--- a/src/components/widgets/Header.astro
+++ b/src/components/widgets/Header.astro
@@ -53,7 +53,7 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`
 <header
   class:list={[
     { sticky: isSticky, relative: !isSticky, dark: isDark },
-    "top-0 z-40 flex-none mx-auto w-full border-b border-gray-50/0 transition-[opacity] ease-in-out",
+    "top-0 z-40 flex-none mx-auto w-full border-b border-gray-50/0 transition-[opacity] ease-in-out bg-page",
   ]}
   {...id ? { id } : {}}
 >