diff --git a/lightrag_webui/src/components/ApiKeyAlert.tsx b/lightrag_webui/src/components/ApiKeyAlert.tsx
index 07b3230e..bbbce1bb 100644
--- a/lightrag_webui/src/components/ApiKeyAlert.tsx
+++ b/lightrag_webui/src/components/ApiKeyAlert.tsx
@@ -5,8 +5,7 @@ import {
   AlertDialogContent,
   AlertDialogDescription,
   AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogOverlay
+  AlertDialogTitle
 } from '@/components/ui/AlertDialog'
 import Button from '@/components/ui/Button'
 import Input from '@/components/ui/Input'
@@ -51,7 +50,6 @@ const ApiKeyAlert = ({ open: opened, onOpenChange: setOpened }: ApiKeyAlertProps
 
   return (
     <AlertDialog open={opened} onOpenChange={setOpened}>
-      <AlertDialogOverlay className="bg-black/30" />
       <AlertDialogContent>
         <AlertDialogHeader>
           <AlertDialogTitle>{t('apiKeyAlert.title')}</AlertDialogTitle>
diff --git a/lightrag_webui/src/components/ui/AlertDialog.tsx b/lightrag_webui/src/components/ui/AlertDialog.tsx
index 072bdff7..e510fce4 100644
--- a/lightrag_webui/src/components/ui/AlertDialog.tsx
+++ b/lightrag_webui/src/components/ui/AlertDialog.tsx
@@ -16,7 +16,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 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 fixed inset-0 z-50 bg-black/50',
       className
     )}
     {...props}
@@ -30,6 +30,7 @@ const AlertDialogContent = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
 >(({ className, ...props }, ref) => (
   <AlertDialogPortal>
+    <AlertDialogOverlay />
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(