diff --git a/public/images/components/Header.jsx b/public/images/components/Header.jsx
index e5e4d15..4b0bb75 100644
--- a/public/images/components/Header.jsx
+++ b/public/images/components/Header.jsx
@@ -64,7 +64,7 @@ function MobileNavigation() {
       />
       <PopoverPanel
         transition
-        className="absolute inset-x-0 top-full mt-4 flex origin-top flex-col rounded-lg bg-bg-sand  p-4 text-lg tracking-tight text-nav-dark shadow-xl ring-1 ring-slate-900/5 data-[closed]:scale-95 data-[closed]:opacity-0 data-[enter]:duration-150 data-[leave]:duration-100 data-[enter]:ease-out data-[leave]:ease-in"
+        className="absolute inset-x-0 top-full mt-4 flex origin-top flex-col rounded-lg bg-transparent  p-4 text-lg tracking-tight text-nav-dark shadow-xl ring-1 ring-slate-900/5 data-[closed]:scale-95 data-[closed]:opacity-0 data-[enter]:duration-150 data-[leave]:duration-100 data-[enter]:ease-out data-[leave]:ease-in"
       >
         <MobileNavLink href="/">HOME</MobileNavLink>
         <MobileNavLink href="/story">STORY</MobileNavLink>
@@ -80,7 +80,7 @@ function MobileNavigation() {
 
 export function Header() {
   return (
-    <header className="fixed top-0 left-0 right-0 z-50 bg-bg-sand backdrop-blur-sm py-4">
+    <header className="fixed top-0 left-0 right-0 z-50 bg-transparent backdrop-blur-sm py-4">
       <Container>
         <nav className="relative z-50 flex justify-between">
           <div className="flex items-center md:gap-x-12">