diff --git a/src/components/SiteHeader.vue b/src/components/SiteHeader.vue
index 83afe58..4498007 100644
--- a/src/components/SiteHeader.vue
+++ b/src/components/SiteHeader.vue
@@ -163,7 +163,10 @@ watch(() => route.path, closeMobile)
               <span class="block h-0.5 w-6 bg-foreground"></span>
             </button>
           </SheetTrigger>
-          <SheetContent side="right" class="w-full overflow-y-auto sm:max-w-sm">
+          <SheetContent
+            side="right"
+            class="w-full overflow-y-auto border-white/10 bg-background/65 backdrop-blur-xl backdrop-saturate-150 sm:max-w-sm"
+          >
             <SheetHeader>
               <SheetTitle class="font-display uppercase tracking-wider">
                 {{ t('nav.menu') }}
diff --git a/src/components/ui/sheet/SheetContent.vue b/src/components/ui/sheet/SheetContent.vue
index 502879c..59e668c 100644
--- a/src/components/ui/sheet/SheetContent.vue
+++ b/src/components/ui/sheet/SheetContent.vue
@@ -35,7 +35,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 <template>
   <DialogPortal>
     <DialogOverlay
-      class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      class="fixed inset-0 z-50 bg-black/30 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
     />
     <DialogContent
       :class="cn(sheetVariants({ side }), props.class)"