diff --git a/src/pages/Login/Login.tsx b/src/pages/Login/Login.tsx
index e69de29..90f04ca 100644
--- a/src/pages/Login/Login.tsx
+++ b/src/pages/Login/Login.tsx
@@ -0,0 +1,255 @@
+import { useState, useEffect } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { Icon } from '@iconify/react';
+import { motion } from 'framer-motion';
+import authService from '../../services/authService';
+import './Login.css';
+
+interface LoginProps {
+    mode?: 'login' | 'register';
+}
+
+export default function Login({ mode = 'login' }: LoginProps) {
+    const navigate = useNavigate();
+    const location = useLocation();
+    const [isLogin, setIsLogin] = useState(mode === 'login');
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState('');
+
+    // Shared form data or separate? Let's use shared for email/password continuity
+    const [formData, setFormData] = useState({
+        username: '',
+        email: '',
+        password: '',
+    });
+
+    // Redirect if authenticated
+    useEffect(() => {
+        if (authService.isAuthenticated()) {
+            const from = (location.state as { from?: { pathname: string } })?.from?.pathname || '/home';
+            navigate(from, { replace: true });
+        }
+    }, [navigate, location]);
+
+    // Sync prop mode
+    useEffect(() => {
+        setIsLogin(mode === 'login');
+    }, [mode]);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setFormData({ ...formData, [e.target.name]: e.target.value });
+        setError('');
+    };
+
+    const handleRegister = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setLoading(true);
+        setError('');
+        try {
+            await authService.register({
+                email: formData.email,
+                password: formData.password,
+                username: formData.username,
+            });
+            navigate('/home');
+        } catch (err: unknown) {
+            const errorMessage = err instanceof Error ? err.message : '注册失败，请重试';
+            setError(errorMessage);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleLogin = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setLoading(true);
+        setError('');
+        try {
+            await authService.login({
+                email: formData.email,
+                password: formData.password,
+            });
+            navigate('/home');
+        } catch (err: unknown) {
+            const errorMessage = err instanceof Error ? err.message : '登录失败，请重试';
+            setError(errorMessage);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const Particles = () => {
+        return (
+            <div className="particles-container" style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none', zIndex: 0 }}>
+                {[...Array(15)].map((_, i) => (
+                    <motion.div
+                        key={i}
+                        initial={{
+                            x: Math.random() * window.innerWidth,
+                            y: Math.random() * window.innerHeight,
+                            opacity: Math.random() * 0.5 + 0.1,
+                        }}
+                        animate={{
+                            y: [null, Math.random() * window.innerHeight],
+                            x: [null, Math.random() * window.innerWidth],
+                        }}
+                        transition={{
+                            duration: Math.random() * 20 + 20,
+                            repeat: Infinity,
+                            repeatType: "reverse",
+                            ease: "linear",
+                        }}
+                        style={{
+                            position: 'absolute',
+                            width: Math.random() * 4 + 2 + 'px',
+                            height: Math.random() * 4 + 2 + 'px',
+                            borderRadius: '50%',
+                            backgroundColor: i % 2 === 0 ? '#6366f1' : '#ec4899',
+                            filter: 'blur(1px)',
+                        }}
+                    />
+                ))}
+            </div>
+        );
+    };
+
+    return (
+        <div className="login-page">
+            <Particles />
+
+            <div className={`container ${!isLogin ? 'right-panel-active' : ''}`} id="container">
+                {/* Sign Up Form */}
+                <div className="form-container sign-up-container">
+                    <form onSubmit={handleRegister}>
+                        <h1>创建账户</h1>
+                        <div className="social-container">
+                            <a href={authService.getGitHubLoginUrl()} title="Github Login">
+                                <Icon icon="mdi:github" width="20" />
+                            </a>
+                            <a href={authService.getGiteeLoginUrl()} title="Gitee Login">
+                                <Icon icon="simple-icons:gitee" width="20" />
+                            </a>
+                        </div>
+                        <span>或使用邮箱注册</span>
+
+                        <div className="login-field">
+                            <input
+                                type="text"
+                                name="username"
+                                className="login-input"
+                                placeholder="用户名"
+                                value={formData.username}
+                                onChange={handleChange}
+                                required={!isLogin}
+                            />
+                        </div>
+                        <div className="login-field">
+                            <input
+                                type="email"
+                                name="email"
+                                className="login-input"
+                                placeholder="邮箱"
+                                value={formData.email}
+                                onChange={handleChange}
+                                required
+                            />
+                        </div>
+                        <div className="login-field">
+                            <input
+                                type="password"
+                                name="password"
+                                className="login-input"
+                                placeholder="密码"
+                                value={formData.password}
+                                onChange={handleChange}
+                                required
+                                minLength={8}
+                            />
+                        </div>
+
+                        {error && !isLogin && <p style={{ color: 'red', margin: '5px 0' }}>{error}</p>}
+
+                        <button className="login-button" disabled={loading}>
+                            {loading ? <Icon icon="line-md:loading-twotone-loop" /> : '注册'}
+                        </button>
+
+                        <div className="mobile-toggle">
+                            <span onClick={() => setIsLogin(true)}>已有账户？去登录</span>
+                        </div>
+                    </form>
+                </div>
+
+                {/* Sign In Form */}
+                <div className="form-container sign-in-container">
+                    <form onSubmit={handleLogin}>
+                        <h1>欢迎回来</h1>
+                        <div className="social-container">
+                            <a href={authService.getGitHubLoginUrl()} title="Github Login">
+                                <Icon icon="mdi:github" width="20" />
+                            </a>
+                            <a href={authService.getGiteeLoginUrl()} title="Gitee Login">
+                                <Icon icon="simple-icons:gitee" width="20" />
+                            </a>
+                        </div>
+                        <span>或使用账户登录</span>
+
+                        <div className="login-field">
+                            <input
+                                type="email"
+                                name="email"
+                                className="login-input"
+                                placeholder="邮箱"
+                                value={formData.email}
+                                onChange={handleChange}
+                                required
+                            />
+                        </div>
+                        <div className="login-field">
+                            <input
+                                type="password"
+                                name="password"
+                                className="login-input"
+                                placeholder="密码"
+                                value={formData.password}
+                                onChange={handleChange}
+                                required
+                            />
+                        </div>
+
+                        <p style={{ margin: '10px 0', fontSize: '12px', cursor: 'pointer' }}>忘记密码?</p>
+
+                        {error && isLogin && <p style={{ color: 'red', margin: '5px 0' }}>{error}</p>}
+
+                        <button className="login-button" disabled={loading}>
+                            {loading ? <Icon icon="line-md:loading-twotone-loop" /> : '登录'}
+                        </button>
+
+                        <div className="mobile-toggle">
+                            <span onClick={() => setIsLogin(false)}>还没有账户？去注册</span>
+                        </div>
+                    </form>
+                </div>
+
+                {/* Overlay Container */}
+                <div className="overlay-container">
+                    <div className="overlay">
+                        <div className="overlay-panel overlay-left">
+                            <h1>欢迎回来!</h1>
+                            <p>为了保持与我们的联系，请登录您的个人信息</p>
+                            <button className="ghost" onClick={() => setIsLogin(true)}>
+                                去登录
+                            </button>
+                        </div>
+                        <div className="overlay-panel overlay-right">
+                            <h1>你好，朋友!</h1>
+                            <p>输入您的个人详细信息并开始与我们一起管理旅程</p>
+                            <button className="ghost" onClick={() => setIsLogin(false)}>
+                                去注册
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}