diff --git a/webapp-next/src/components/day-detail/DayDetail.tsx b/webapp-next/src/components/day-detail/DayDetail.tsx
index 568cf4b..68662cd 100644
--- a/webapp-next/src/components/day-detail/DayDetail.tsx
+++ b/webapp-next/src/components/day-detail/DayDetail.tsx
@@ -207,6 +207,7 @@ export const DayDetail = React.forwardRef<DayDetailHandle, DayDetailProps>(
           "rounded-t-2xl pt-3 pb-[calc(24px+env(safe-area-inset-bottom,0px))] max-h-[70vh] bg-[var(--surface)]",
           className
         )}
+        overlayClassName="backdrop-blur-md"
         showCloseButton={false}
         onCloseAnimationEnd={handleClose}
       >
diff --git a/webapp-next/src/components/ui/sheet.tsx b/webapp-next/src/components/ui/sheet.tsx
index 350eb61..cece655 100644
--- a/webapp-next/src/components/ui/sheet.tsx
+++ b/webapp-next/src/components/ui/sheet.tsx
@@ -53,12 +53,15 @@ function SheetContent({
   showCloseButton = true,
   onCloseAnimationEnd,
   onAnimationEnd,
+  overlayClassName,
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Content> & {
   side?: "top" | "right" | "bottom" | "left"
   showCloseButton?: boolean
   /** When provided, content and overlay stay mounted until close animation ends (forceMount). */
   onCloseAnimationEnd?: () => void
+  /** Optional class name applied to the overlay (e.g. backdrop-blur-md). */
+  overlayClassName?: string
 }) {
   const useForceMount = Boolean(onCloseAnimationEnd)
 
@@ -74,7 +77,10 @@ function SheetContent({
 
   return (
     <SheetPortal>
-      <SheetOverlay forceMount={useForceMount ? true : undefined} />
+      <SheetOverlay
+        forceMount={useForceMount ? true : undefined}
+        className={overlayClassName}
+      />
       <SheetPrimitive.Content
         data-slot="sheet-content"
         forceMount={useForceMount ? true : undefined}