diff --git a/src/views/login/login.module.css b/src/views/login/login.module.css
index dca1df4..a7fc6f4 100644
--- a/src/views/login/login.module.css
+++ b/src/views/login/login.module.css
@@ -74,6 +74,18 @@
     max-width: 300px;
 }
 
+.sendCode {
+    padding:5px;
+    border-radius: 5px;
+    border: none;
+    font-size: 8px;
+    background-color: #ff7300; /* Blue */
+    color: white;
+    cursor: pointer;
+    width: 60px;
+    max-width: 300px;
+}
+
 .form .register:hover {
     background-color: #0056b3; /* Darker blue */
 }
@@ -90,4 +102,20 @@
     text-decoration: underline;
     align-content: flex-end;
     color: #007BFF; /* Blue */
+}
+
+.back {
+    background: none;
+    border: none;
+    text-decoration: underline;
+    cursor: pointer;
+    margin-top: 8px;
+    font-size: 16px;
+    padding: 0;
+    transition: color 0.2s;
+}
+
+.back:hover {
+    color: #0056b3;
+    text-decoration: underline;
 }
\ No newline at end of file
diff --git a/src/views/login/login.tsx b/src/views/login/login.tsx
index 562f178..fef6e32 100644
--- a/src/views/login/login.tsx
+++ b/src/views/login/login.tsx
@@ -1,37 +1,46 @@
-import React, { useEffect } from 'react';
+import React, { useState } from 'react';
 import { useApi } from '@/hooks/request';
 import request from '@/utils/request';
-import { postUserLogin} from '@/api/auth';
+import { postUserLogin } from '@/api/auth';
 import { useAppDispatch } from '@/hooks/store';
-import { RootState } from '@/store';
 import style from './login.module.css';
-import { useState } from 'react';
-import { useSelector } from 'react-redux';
 import { useNavigate } from 'react-router';
 import logo from '&/assets/logo.png';
 import { getUserInfo } from '@/api/user';
 import debounce from 'lodash/debounce';
-import {message} from 'antd';
-
+import { message } from 'antd';
 
 const Login: React.FC = () => {
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
-    const dispatch = useAppDispatch();
-    const { refresh: postUserLoginRefresh } = useApi(() => request.post(postUserLogin, {email, password}), false);
-    const { refresh: getUserInfoRefresh } = useApi(() => request.get(getUserInfo), false);
-    const [messageApi, contextHolder] = message.useMessage();
+    const [showRegister, setShowRegister] = useState(false);
+    const [inviteCode, setInviteCode] = useState('');
+    const [registerEmail, setRegisterEmail] = useState('');
+    const [registerPassword, setRegisterPassword] = useState('');
+    const [emailCode, setEmailCode] = useState('');
+    const [codeBtnDisabled, setCodeBtnDisabled] = useState(false);
+    const [codeBtnText, setCodeBtnText] = useState('发送验证码');
+    const [codeTimer, setCodeTimer] = useState<NodeJS.Timeout | null>(null);
 
+    const dispatch = useAppDispatch();
+    const [messageApi, contextHolder] = message.useMessage();
+    const { refresh: postUserLoginRefresh } = useApi(
+        () => request.post(postUserLogin, { email, password}), false);
+    const { refresh: getUserInfoRefresh } = useApi(
+        () => request.get(getUserInfo), false);
     const nav = useNavigate();
-    const showErrorMessage = async (message: string) => {
-        messageApi.error(message);
+    const showErrorMessage = async (msg: string) => {
+        messageApi.error(msg);
     };
+
+    // 登录逻辑
     const handleLogin = debounce(async () => {
         try {
-            const res = await postUserLoginRefresh();
-            console.log(res);
-            if (res == null || (res as any).error) {
-                throw new Error('登录失败');
+            const res =await postUserLoginRefresh({email, password});
+            console.log("res", res);
+            if (res==null ||(res as any).error) {
+                alert('Login failed. Please check your credentials.');
+                return;
             }
             dispatch({ type: "user/login", payload: res });
 
@@ -42,23 +51,133 @@
             dispatch({ type: "user/getUserInfo", payload: userInfo });
             nav('/');
         } catch (error) {
-            // 将错误信息传递给一个异步函数
             showErrorMessage('登录失败，请检查您的用户名和密码');
         }
     }, 1000) as () => void;
 
+    // 发送验证码逻辑
+    const handleSendCode = async () => {
+        if (!registerEmail) {
+            showErrorMessage('请填写邮箱');
+            return;
+        }
+        setCodeBtnDisabled(true);
+        let seconds = 60;
+        setCodeBtnText(`已发送(${seconds}s)`);
+        const timer = setInterval(() => {
+            seconds -= 1;
+            setCodeBtnText(`已发送(${seconds}s)`);
+            if (seconds <= 0) {
+                clearInterval(timer);
+                setCodeBtnDisabled(false);
+                setCodeBtnText('发送验证码');
+            }
+        }, 1000);
+        setCodeTimer(timer);
+        // TODO: 调用发送验证码接口
+        message.success('验证码已发送');
+    };
+
+    // 切换回登录
+    const handleBackToLogin = () => {
+        setShowRegister(false);
+        setInviteCode('');
+        setRegisterEmail('');
+        setRegisterPassword('');
+        setEmailCode('');
+        if (codeTimer) clearInterval(codeTimer);
+        setCodeBtnDisabled(false);
+        setCodeBtnText('发送验证码');
+    };
+
+    // 注册逻辑（仅前端校验，实际应调用注册接口）
+    const handleRegister = async () => {
+        if (!inviteCode || !registerEmail || !registerPassword || !emailCode) {
+            showErrorMessage('请填写完整信息');
+            return;
+        }
+        // TODO: 调用注册接口
+        message.success('注册成功，请登录');
+        handleBackToLogin();
+    };
+
     const handleLogoClick = () => {
         nav('/');
-    }
+    };
+
     return (
         <div className={style.form}>
             {contextHolder}
-            <img className={style.logo} src={logo} alt="logo" onClick={handleLogoClick}></img>
-            <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} className={style.email} placeholder="Enter your email" />
-            <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} className={style.password} placeholder="Enter your password" />
-            <button className={style.submit} onClick={() => handleLogin()}>登录</button>
-            <button className={style.register}>注册</button>
-            <button className={style.forget}> 忘记密码</button>
+            <img className={style.logo} src={logo} alt="logo" onClick={handleLogoClick} />
+            {!showRegister ? (
+                <>
+                    <input
+                        type="email"
+                        value={email}
+                        onChange={(e) => setEmail(e.target.value)}
+                        className={style.email}
+                        placeholder="Enter your email"
+                    />
+                    <input
+                        type="password"
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                        className={style.password}
+                        placeholder="Enter your password"
+                    />
+                    <button className={style.submit} onClick={() => handleLogin()}>登录</button>
+                    <button className={style.register} onClick={() => setShowRegister(true)}>注册</button>
+                    <button className={style.forget}>忘记密码</button>
+                </>
+            ) : (
+                <>
+                    <input
+                        type="text"
+                        value={inviteCode}
+                        onChange={(e) => setInviteCode(e.target.value)}
+                        className={style.invite}
+                        placeholder="邀请码"
+                    />
+                    <input
+                        type="email"
+                        value={registerEmail}
+                        onChange={(e) => setRegisterEmail(e.target.value)}
+                        className={style.email}
+                        placeholder="邮箱"
+                    />
+                    <input
+                        type="password"
+                        value={registerPassword}
+                        onChange={(e) => setRegisterPassword(e.target.value)}
+                        className={style.password}
+                        placeholder="密码"
+                    />
+                    <div style={{ display: 'flex',width:'80%', alignItems: 'center', gap: 8, padding:'10px' }}>
+                        <input
+                            type="text"
+                            value={emailCode}
+                            onChange={(e) => setEmailCode(e.target.value)}
+                            className={style.code}
+                            placeholder="邮箱验证码"
+                            style={{ flex: 1 }}
+                        />
+                        <button
+                            className={style.sendCode}
+                            onClick={handleSendCode}
+                            disabled={codeBtnDisabled}
+                            style={{
+                                background: codeBtnDisabled ? '#ccc' : undefined,
+                                color: codeBtnDisabled ? '#888' : undefined,
+                                cursor: codeBtnDisabled ? 'not-allowed' : 'pointer'
+                            }}
+                        >
+                            {codeBtnText}
+                        </button>
+                    </div>
+                    <button className={style.submit} onClick={handleRegister}>注册</button>
+                    <button className={style.back} onClick={handleBackToLogin}>返回登录</button>
+                </>
+            )}
         </div>
     );
 };