diff --git a/web/app/components/header/account-setting/sandbox-provider-page/config-modal.tsx b/web/app/components/header/account-setting/sandbox-provider-page/config-modal.tsx
index f2d6bce29c..b35338a9a3 100644
--- a/web/app/components/header/account-setting/sandbox-provider-page/config-modal.tsx
+++ b/web/app/components/header/account-setting/sandbox-provider-page/config-modal.tsx
@@ -154,7 +154,7 @@ function ConfigModal({ provider, onClose }: ConfigModalProps) {
 
   return (
     <Dialog open onOpenChange={open => !open && onClose()}>
-      <DialogContent className="w-[480px]">
+      <DialogContent backdropProps={{ forceRender: true }} className="w-[480px]">
         <DialogCloseButton />
 
         {/* Header */}
diff --git a/web/app/components/header/account-setting/sandbox-provider-page/switch-modal.tsx b/web/app/components/header/account-setting/sandbox-provider-page/switch-modal.tsx
index 2117ce27db..673a16faff 100644
--- a/web/app/components/header/account-setting/sandbox-provider-page/switch-modal.tsx
+++ b/web/app/components/header/account-setting/sandbox-provider-page/switch-modal.tsx
@@ -39,7 +39,7 @@ const SwitchModal = ({
 
   return (
     <Dialog open onOpenChange={open => !open && onClose()}>
-      <DialogContent className="w-[480px]">
+      <DialogContent backdropProps={{ forceRender: true }} className="w-[480px]">
         <DialogCloseButton />
         <DialogTitle className="text-text-primary title-2xl-semi-bold">
           {t('sandboxProvider.switchModal.title', { ns: 'common' })}