diff --git a/ui/litellm-dashboard/src/contexts/AntdGlobalProvider.tsx b/ui/litellm-dashboard/src/contexts/AntdGlobalProvider.tsx
index c5adbff86b2..5b5c1036fa9 100644
--- a/ui/litellm-dashboard/src/contexts/AntdGlobalProvider.tsx
+++ b/ui/litellm-dashboard/src/contexts/AntdGlobalProvider.tsx
@@ -1,29 +1,24 @@
 "use client";
 
 import React, { useEffect, useRef } from "react";
-import { App } from "antd";
+import { notification } from "antd";
 import { setNotificationInstance } from "@/components/molecules/notifications_manager";
 
-// Inner component to use the hook
-const AntdAppInit = () => {
-  const { notification } = App.useApp();
+export default function AntdGlobalProvider({ children }: { children: React.ReactNode }) {
+  const [api, contextHolder] = notification.useNotification();
   const initialized = useRef(false);
 
   useEffect(() => {
     if (!initialized.current) {
-      setNotificationInstance(notification);
+      setNotificationInstance(api);
       initialized.current = true;
     }
-  }, [notification]);
+  }, [api]);
 
-  return null;
-};
-
-export default function AntdGlobalProvider({ children }: { children: React.ReactNode }) {
   return (
-    <App>
-      <AntdAppInit />
+    <>
+      {contextHolder}
       {children}
-    </App>
+    </>
   );
 }