diff --git a/components/common/CallbackModal.tsx b/components/common/CallbackModal.tsx
index 469e07a..49770a3 100644
--- a/components/common/CallbackModal.tsx
+++ b/components/common/CallbackModal.tsx
@@ -107,7 +107,6 @@ export default function CallbackModal({ onClose }: { onClose: () => void }) {
           <div className="mb-6">
             <CheckCircleOutlined className="text-white text-6xl mb-4" />
             <h1 className="text-white text-2xl font-bold mb-2">Payment Successful!</h1>
-            <p className="text-white/70 text-base">{`Order ID: ${paymentInfo?.orderId || 'N/A'}`}</p>
           </div>
 
           <div className="text-center text-white/70 mb-8 space-y-2">
@@ -139,7 +138,6 @@ export default function CallbackModal({ onClose }: { onClose: () => void }) {
         </div>
 
         <div className="text-center text-white/70 mb-8 space-y-2">
-          <p>Order ID: {paymentInfo?.orderId || 'N/A'}</p>
           <p>If the problem persists, please contact customer service</p>
         </div>
       </div>
diff --git a/components/pages/login.tsx b/components/pages/login.tsx
index 45fcf9e..2a3905a 100644
--- a/components/pages/login.tsx
+++ b/components/pages/login.tsx
@@ -2,7 +2,6 @@
 
 import { useState, useCallback, useEffect } from 'react';
 import './style/login.css';
-import VantaHaloBackground from '@/components/vanta-halo-background';
 import { useRouter, useSearchParams } from 'next/navigation';
 import React from 'react';
 import Link from 'next/link';
@@ -11,7 +10,6 @@ import { GradientText } from '@/components/ui/gradient-text';
 import { Eye, EyeOff } from 'lucide-react';
 
 export default function Login() {
-  const [isLoaded, setIsLoaded] = useState(false);
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [showPassword, setShowPassword] = useState(false);
@@ -25,23 +23,19 @@ export default function Login() {
   useEffect(() => {
     const registered = searchParams?.get('registered');
     if (registered === 'true') {
-      setSuccessMessage('注册成功！请使用您的新帐号登录。');
+      setSuccessMessage('Registration successful! Please login with your new account.');
     }
-    
+
     const error = searchParams?.get('error');
     if (error) {
       if (error === 'google_oauth') {
-        setFormError('Google登录失败，请重试。');
+        setFormError('Google login failed, please try again.');
       } else if (error === 'auth_failed') {
-        setFormError('身份验证失败，请重试。');
+        setFormError('Authentication failed, please try again.');
       }
     }
   }, [searchParams]);
 
-  const handleBackgroundLoaded = useCallback(() => {
-    setIsLoaded(true);
-  }, []);
-
   const handleGoogleSignIn = () => {
     signInWithGoogle();
   };
@@ -51,21 +45,21 @@ export default function Login() {
     setIsSubmitting(true);
     setFormError('');
     setSuccessMessage('');
-    
+
     try {
       await loginUser(email, password);
       // 登录成功后跳转到首页
       router.push('/');
     } catch (error: any) {
       console.error('Login failed:', error);
-      
+
       // 根据错误类型显示不同的错误消息
       if (error.message) {
         setFormError(error.message);
       } else if (error.msg) {
         setFormError(error.msg);
       } else {
-        setFormError('登录失败，请检查您的凭据后重试。');
+        setFormError('Login failed, please check your credentials and try again.');
       }
     } finally {
       setIsSubmitting(false);
@@ -73,11 +67,27 @@ export default function Login() {
   };
 
   return (
-    <div className="main-container login-page relative">
-      {/* logo Movie Flow */}
-      <div className='login-logo'>
+    <div className="min-h-screen relative overflow-hidden">
+      {/* 背景视频 */}
+      <video
+        autoPlay
+        loop
+        muted
+        playsInline
+        className="absolute inset-0 w-full h-full object-cover"
+        data-alt="background-video"
+      >
+        <source src="/assets/login.mp4" type="video/mp4" />
+        {/* 如果没有视频文件，显示渐变背景 */}
+      </video>
+
+      {/* 视频遮罩层 */}
+      <div className="absolute inset-0 bg-black/20 " data-alt="video-overlay"></div>
+
+      {/* Logo */}
+      <div className="absolute top-8 left-8 z-10" data-alt="logo-container">
         <span className="logo-heart">
-          <GradientText 
+          <GradientText
             text="MovieFlow"
             startPercentage={30}
             endPercentage={70}
@@ -89,41 +99,39 @@ export default function Login() {
         </span>
       </div>
 
-      <div className="left-panel">
-        <VantaHaloBackground onLoaded={handleBackgroundLoaded} />
-      </div>
-      <div className={`right-panel ${isLoaded ? 'fade-in' : 'invisible'}`}>
-        <div className="auth-container">
-          <div className="auth-header">
-            <h2>登录</h2>
-            <p>输入您的凭据以访问您的账户</p>
+      {/* 登录框 - 居中显示 */}
+      <div className="relative bottom-4 z-10 flex items-center justify-center min-h-screen p-4">
+        <div className="auth-container max-w-md w-full bg-black/40 backdrop-blur-lg border border-white/20 rounded-2xl p-8 shadow-2xl">
+          <div className="auth-header text-center mb-6">
+            <h2 className="text-2xl font-bold text-white mb-4">Login</h2>
+            <p className="text-gray-300">Enter your credentials to access your account</p>
           </div>
 
-          <form onSubmit={handleSubmit} className="">
+          <form onSubmit={handleSubmit}>
             {successMessage && (
               <div className="bg-green-500/20 text-green-300 p-3 mb-4 rounded-lg border border-green-500/20">
                 {successMessage}
               </div>
             )}
-            
-            <div className="mb-3">
-              <label className="form-label">用户名</label>
-              <input 
-                placeholder="请输入用户名" 
-                required 
-                className="form-control" 
-                type="text" 
+
+            <div className="mb-4">
+              <label className="form-label">Username</label>
+              <input
+                placeholder="Enter your username"
+                required
+                className="form-control"
+                type="text"
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
               />
             </div>
-            <div className="mb-3">
-              <label className="form-label">密码</label>
+            <div className="mb-4">
+              <label className="form-label">Password</label>
               <div className="relative">
-                <input 
-                  placeholder="请输入密码" 
-                  required 
-                  className="form-control pr-10" 
+                <input
+                  placeholder="Enter your password"
+                  required
+                  className="form-control pr-10"
                   type={showPassword ? "text" : "password"}
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
@@ -137,32 +145,32 @@ export default function Login() {
                   {!showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
                 </button>
               </div>
-              <div className="d-flex justify-content-end mt-1">
-                <a className="auth-link small" href="/forgot-password" data-discover="true">忘记密码？</a>
+              <div className="flex justify-end mt-2">
+                <a className="auth-link small" href="/forgot-password" data-discover="true">Forgot password?</a>
               </div>
             </div>
-            
+
             {formError && (
               <div className="bg-red-500/20 text-red-300 p-3 mb-4 rounded-lg border border-red-500/20">
                 {formError}
               </div>
             )}
-            
-            <button 
-              type="submit" 
+
+            <button
+              type="submit"
               className="w-full mt-4 btn btn-primary"
               disabled={isSubmitting}
             >
-              {isSubmitting ? '登录中...' : '登录'}
+              {isSubmitting ? 'Logging in...' : 'Login'}
             </button>
-            
+
             <div className="my-4 relative flex items-center">
               <div className="flex-grow border-t border-gray-500/30"></div>
-              <span className="flex-shrink mx-4 text-gray-400">或</span>
+              <span className="flex-shrink mx-4 text-gray-400">or</span>
               <div className="flex-grow border-t border-gray-500/30"></div>
             </div>
-            
-            <button 
+
+            <button
               type="button"
               onClick={handleGoogleSignIn}
               className="w-full flex items-center justify-center gap-2 py-3 border border-white/20 rounded-lg bg-black/30 hover:bg-black/50 backdrop-blur-sm transition-all"
@@ -170,10 +178,10 @@ export default function Login() {
               <img src="https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/google.svg" className="w-5 h-5" alt="Google" />
               <span>Continue with Google</span>
             </button>
-            
-            <div className="text-center mt-3">
+
+            <div className="text-center mt-4">
               <p style={{ color: "rgba(255, 255, 255, 0.6)" }}>
-                还没有账户？ <Link href="/signup" className="auth-link">注册</Link>
+                Don't have an account? <Link href="/signup" className="auth-link">Sign up</Link>
               </p>
             </div>
           </form>
@@ -181,4 +189,4 @@ export default function Login() {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/public/assets/home.mp4 b/public/assets/home.mp4
index 4845c00..1f22552 100644
Binary files a/public/assets/home.mp4 and b/public/assets/home.mp4 differ
diff --git a/public/assets/login.mp4 b/public/assets/login.mp4
new file mode 100644
index 0000000..4cca61b
Binary files /dev/null and b/public/assets/login.mp4 differ