diff --git a/packages/frontend/component/src/ui/notification/mobile/notification-center.tsx b/packages/frontend/component/src/ui/notification/mobile/notification-center.tsx
index ce3e619be2..924a389653 100644
--- a/packages/frontend/component/src/ui/notification/mobile/notification-center.tsx
+++ b/packages/frontend/component/src/ui/notification/mobile/notification-center.tsx
@@ -1,8 +1,12 @@
+import { useTheme } from 'next-themes';
 import { Toaster } from 'sonner';
 
 import { sonner } from './styles.css';
 
 export function MobileNotificationCenter() {
+  const theme = useTheme();
+  const resolvedTheme = theme.resolvedTheme as 'light' | 'dark';
+
   return (
     <Toaster
       className={sonner}
@@ -13,6 +17,7 @@ export function MobileNotificationCenter() {
         top: 'calc(env(safe-area-inset-top) + 16px)',
         pointerEvents: 'auto',
       }}
+      theme={resolvedTheme}
     />
   );
 }