diff --git a/web/src/components/auth/LoginForm.js b/web/src/components/auth/LoginForm.js
index 9b67a806..988be4a2 100644
--- a/web/src/components/auth/LoginForm.js
+++ b/web/src/components/auth/LoginForm.js
@@ -501,8 +501,11 @@ const LoginForm = () => {
   };
 
   return (
-    <div className="bg-gray-100 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 mt-[64px]">
-      <div className="w-full max-w-sm">
+    <div className="relative overflow-hidden bg-gray-100 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+      {/* 背景模糊晕染球 */}
+      <div className="blur-ball blur-ball-indigo" style={{ top: '-80px', right: '-80px', transform: 'none' }} />
+      <div className="blur-ball blur-ball-teal" style={{ top: '50%', left: '-120px' }} />
+      <div className="w-full max-w-sm mt-[64px]">
         {showEmailLogin || !(status.github_oauth || status.oidc_enabled || status.wechat_login || status.linuxdo_oauth || status.telegram_oauth)
           ? renderEmailLoginForm()
           : renderOAuthOptions()}
diff --git a/web/src/components/auth/PasswordResetConfirm.js b/web/src/components/auth/PasswordResetConfirm.js
index 85edd89e..e7809298 100644
--- a/web/src/components/auth/PasswordResetConfirm.js
+++ b/web/src/components/auth/PasswordResetConfirm.js
@@ -78,8 +78,11 @@ const PasswordResetConfirm = () => {
   }
 
   return (
-    <div className="bg-gray-100 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 mt-[64px]">
-      <div className="w-full max-w-sm">
+    <div className="relative overflow-hidden bg-gray-100 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+      {/* 背景模糊晕染球 */}
+      <div className="blur-ball blur-ball-indigo" style={{ top: '-80px', right: '-80px', transform: 'none' }} />
+      <div className="blur-ball blur-ball-teal" style={{ top: '50%', left: '-120px' }} />
+      <div className="w-full max-w-sm mt-[64px]">
         <div className="flex flex-col items-center">
           <div className="w-full max-w-md">
             <div className="flex items-center justify-center mb-6 gap-2">
diff --git a/web/src/components/auth/PasswordResetForm.js b/web/src/components/auth/PasswordResetForm.js
index 734d24fd..9a782117 100644
--- a/web/src/components/auth/PasswordResetForm.js
+++ b/web/src/components/auth/PasswordResetForm.js
@@ -78,8 +78,11 @@ const PasswordResetForm = () => {
   }
 
   return (
-    <div className="bg-gray-100 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 mt-[64px]">
-      <div className="w-full max-w-sm">
+    <div className="relative overflow-hidden bg-gray-100 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+      {/* 背景模糊晕染球 */}
+      <div className="blur-ball blur-ball-indigo" style={{ top: '-80px', right: '-80px', transform: 'none' }} />
+      <div className="blur-ball blur-ball-teal" style={{ top: '50%', left: '-120px' }} />
+      <div className="w-full max-w-sm mt-[64px]">
         <div className="flex flex-col items-center">
           <div className="w-full max-w-md">
             <div className="flex items-center justify-center mb-6 gap-2">
diff --git a/web/src/components/auth/RegisterForm.js b/web/src/components/auth/RegisterForm.js
index d1e041ce..00cc98fc 100644
--- a/web/src/components/auth/RegisterForm.js
+++ b/web/src/components/auth/RegisterForm.js
@@ -542,8 +542,11 @@ const RegisterForm = () => {
   };
 
   return (
-    <div className="bg-gray-100 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 mt-[64px]">
-      <div className="w-full max-w-sm">
+    <div className="relative overflow-hidden bg-gray-100 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+      {/* 背景模糊晕染球 */}
+      <div className="blur-ball blur-ball-indigo" style={{ top: '-80px', right: '-80px', transform: 'none' }} />
+      <div className="blur-ball blur-ball-teal" style={{ top: '50%', left: '-120px' }} />
+      <div className="w-full max-w-sm mt-[64px]">
         {showEmailRegister || !(status.github_oauth || status.oidc_enabled || status.wechat_login || status.linuxdo_oauth || status.telegram_oauth)
           ? renderEmailRegisterForm()
           : renderOAuthOptions()}
diff --git a/web/src/pages/Home/index.js b/web/src/pages/Home/index.js
index 52d6bb9a..c91e19f7 100644
--- a/web/src/pages/Home/index.js
+++ b/web/src/pages/Home/index.js
@@ -104,7 +104,7 @@ const Home = () => {
         <div className="w-full overflow-x-hidden">
           {/* Banner 部分 */}
           <div className="w-full border-b border-semi-color-border min-h-[500px] md:min-h-[600px] lg:min-h-[700px] relative overflow-x-hidden">
-            {/* 背景模糊晕染球*/}
+            {/* 背景模糊晕染球 */}
             <div className="blur-ball blur-ball-indigo" />
             <div className="blur-ball blur-ball-teal" />
             <div className="flex items-center justify-center h-full px-4 py-20 md:py-24 lg:py-32 mt-10">