diff --git a/src/components/notifications/NotificationCenter.tsx b/src/components/notifications/NotificationCenter.tsx
index d278c247..68e57724 100644
--- a/src/components/notifications/NotificationCenter.tsx
+++ b/src/components/notifications/NotificationCenter.tsx
@@ -1,7 +1,14 @@
-import { Inbox } from '@novu/react';
+import { lazy, Suspense } from 'react';
 import { useNovuNotifications } from '@/hooks/useNovuNotifications';
 import { useNovuTheme } from '@/hooks/useNovuTheme';
 import { useNavigate } from 'react-router-dom';
+import { Bell } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+// Lazy load Novu Inbox to prevent React instance conflicts
+const Inbox = lazy(() => 
+  import('@novu/react').then(module => ({ default: module.Inbox }))
+);
 
 export function NotificationCenter() {
   const { applicationIdentifier, subscriberId, isEnabled } = useNovuNotifications();
@@ -20,11 +27,19 @@ export function NotificationCenter() {
   };
 
   return (
-    <Inbox
-      applicationIdentifier={applicationIdentifier}
-      subscriberId={subscriberId}
-      appearance={appearance}
-      onNotificationClick={handleNotificationClick}
-    />
+    <Suspense 
+      fallback={
+        <Button variant="ghost" size="icon" className="h-9 w-9" disabled>
+          <Bell className="h-5 w-5" />
+        </Button>
+      }
+    >
+      <Inbox
+        applicationIdentifier={applicationIdentifier}
+        subscriberId={subscriberId}
+        appearance={appearance}
+        onNotificationClick={handleNotificationClick}
+      />
+    </Suspense>
   );
 }