diff --git a/app/components/auth/LoginDialog.tsx b/app/components/auth/LoginDialog.tsx
index ccd8f66..abb5731 100644
--- a/app/components/auth/LoginDialog.tsx
+++ b/app/components/auth/LoginDialog.tsx
@@ -1,5 +1,4 @@
-import { useState } from 'react';
-import { Dialog, DialogTitle, DialogDescription } from '~/components/ui/Dialog';
+import { Dialog, DialogTitle, DialogDescription, DialogRoot } from '~/components/ui/Dialog';
 import { Login } from '~/components/auth/Login';
 
 interface LoginDialogProps {
@@ -9,15 +8,13 @@ interface LoginDialogProps {
 
 export function LoginDialog({ isOpen, onClose }: LoginDialogProps) {
   return (
-    <Dialog onClose={onClose}>
-      {isOpen && (
-        <>
-          <DialogTitle>登录</DialogTitle>
-          <DialogDescription>
-            <Login />
-          </DialogDescription>
-        </>
-      )}
-    </Dialog>
+    <DialogRoot open={isOpen}>
+      <Dialog onBackdrop={onClose} onClose={onClose}>
+        <DialogTitle>登录</DialogTitle>
+        <DialogDescription>
+          <Login />
+        </DialogDescription>
+      </Dialog>
+    </DialogRoot>
   );
 }
diff --git a/app/components/auth/RegisterDialog.tsx b/app/components/auth/RegisterDialog.tsx
index bdae2f4..c1e7f4d 100644
--- a/app/components/auth/RegisterDialog.tsx
+++ b/app/components/auth/RegisterDialog.tsx
@@ -1,5 +1,4 @@
-import { useState } from 'react';
-import { Dialog, DialogTitle, DialogDescription } from '~/components/ui/Dialog';
+import { Dialog, DialogTitle, DialogDescription, DialogRoot } from '~/components/ui/Dialog';
 import { Register } from '~/components/auth/Register';
 
 interface RegisterDialogProps {
@@ -9,15 +8,13 @@ interface RegisterDialogProps {
 
 export function RegisterDialog({ isOpen, onClose }: RegisterDialogProps) {
   return (
-    <Dialog onClose={onClose}>
-      {isOpen && (
-        <>
-          <DialogTitle>注册</DialogTitle>
-          <DialogDescription>
-            <Register />
-          </DialogDescription>
-        </>
-      )}
-    </Dialog>
+    <DialogRoot open={isOpen}>
+      <Dialog onBackdrop={onClose} onClose={onClose}>
+        <DialogTitle>注册</DialogTitle>
+        <DialogDescription>
+          <Register />
+        </DialogDescription>
+      </Dialog>
+    </DialogRoot>
   );
 }