diff --git a/package.json b/package.json
index ba6ad52..22435f5 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "wouter": "^3.6.0"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "set PORT=3011 && react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
diff --git a/src/App.js b/src/App.js
index 922372c..43425fd 100644
--- a/src/App.js
+++ b/src/App.js
@@ -21,6 +21,7 @@
 // import UserDynamics from './pages/UserCenter/UserDynamics';
 import UserFriends from './pages/UserCenter/UserFriends';
 import UserCollect from './pages/UserCenter/UserCollect';
+import UserInvite from './pages/UserCenter/UserInvite';
 import SimpleUploader from './pages/PublishSeed/SimpleUploader';
 
 function RedirectToAuth() {
@@ -55,6 +56,7 @@
           {/* <Route path="/user/dynamics" component={UserDynamics} /> */}
           <Route path="/user/friends" component={UserFriends} />
           <Route path="/user/collections" component={UserCollect} />
+          <Route path="/user/invite" component={UserInvite} />
         </>
       </GroupProvider>
     </UserProvider>
diff --git a/src/pages/AuthPage/AuthPage.css b/src/pages/AuthPage/AuthPage.css
index 98e5532..6e8b965 100644
--- a/src/pages/AuthPage/AuthPage.css
+++ b/src/pages/AuthPage/AuthPage.css
@@ -1,109 +1,27 @@
-/* .auth-container {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  min-height: 100vh;
-  font-family: Arial, sans-serif;
-  background: #333;
-  padding: 0 2rem;
-}
-
-.auth-container img {
-  margin-left: 250px; 
-}
-
-.auth-form-section {
-  background: #E4D8C9;
-  padding: 2rem;
-  border-radius: 10px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-  width: 300px;
-  margin: 0 auto;
-  max-width: 400px;
-}
-
-.form-group {
-  margin-bottom: 1.2rem;
-  display: flex;
-  flex-direction: column;
-}
-
-label {
-  display: block;
-  font-size: 0.9rem;
-  margin-bottom: 0.5rem;
-  color: #4A3B34;
-}
-
-.form-input {
-  width: 100%;
-  padding: 0.8rem;
-  border: 1px solid #ddd;
-  border-radius: 5px;
-  font-size: 0.9rem;
-  box-sizing: border-box;
-}
-
-.auth-button {
-  padding: 0.8rem 8.4rem;
-  background: #BA929A;
-  color: #4A3B34;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  font-size: 0.9rem;
-  display: inline-block;
-}
-
-.verify-button {
-  padding: 0.5rem 1rem;
-  background: #BA929A;
-  color: #4A3B34;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  font-size: 0.8rem;
-  display: inline-block;
-}
-
-.link-button {
-  background: none;
-  border: none;
-  color: #4A3B34;
-  cursor: pointer;
-  font-size: 0.8rem;
-  padding: 0;
-}
-
-.forgot-password {
-  position: absolute;
-  right: 10px;
-  bottom: 5px;
-  font-size: 12px;
-  background: none;
-  border: none;
-  color: #4A3B34;
-  cursor: pointer;
-  text-decoration: underline;
-}
-
-.register-link, .login-link {
-  text-align: center;
-  font-size: 0.8rem;
-  margin-top: 1rem;
-} */
-
-
   .auth-container {
   display: flex;
   align-items: center;
-  justify-content: flex-end; /* 使卡片靠右 */
+  /* justify-content: flex-end; */
+  justify-content: space-between; 
   min-height: 100vh;
   font-family: Arial, sans-serif;
-  background: #333; 
+  background: #5F4437; 
   /* background: linear-gradient(180deg, #5F4437, #823c3c) */
   padding: 0 2rem; /* 添加左右内边距 */
 }
+
+  .logo-container {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 2rem;
+  }
+
+  .site-logo {
+    width: 300px; /* 设置固定宽度 */
+    height: auto; /* 高度自适应，保持比例 */
+  }
   
   .auth-card {
     width: 100%;
diff --git a/src/pages/AuthPage/AuthPage.jsx b/src/pages/AuthPage/AuthPage.jsx
index e7f8f52..fe1b42b 100644
--- a/src/pages/AuthPage/AuthPage.jsx
+++ b/src/pages/AuthPage/AuthPage.jsx
@@ -1,8 +1,7 @@
 import { useState } from "react";
 import { Link } from "wouter";
 import "./AuthPage.css";
-import CryptoJS from "crypto-js";
-
+import logo from '../../assets/logo.png'; 
 
 function AuthPage() {
   const [activeTab, setActiveTab] = useState("login");
@@ -29,17 +28,13 @@
     register: {},
   });
 
-  const hashPassword = (password) => {
-    return CryptoJS.SHA256(password).toString(CryptoJS.enc.Hex);
-  };
-
   // Handle login form submission
   const handleLogin = async (e) => {
   e.preventDefault();
 
   const newErrors = {};
   if (!loginData.username) {
-    newErrors.username = "请输入用户名或邮箱";
+    newErrors.username = "请输入用户名";
   }
   if (!loginData.password) {
     newErrors.password = "请输入密码";
@@ -109,8 +104,6 @@
     return;
   }
 
-  const hashedPassword = hashPassword(registerData.password);
-
   try {
     const response = await fetch("/echo/user/register", {
       method: 'POST',
@@ -120,8 +113,8 @@
       body: JSON.stringify({
         username: registerData.username,
         email: registerData.email,
-        password: hashedPassword,
-        role: "user", // 默认角色，可根据实际情况调整
+        password: registerData.password, // 原始密码
+        role: "user",
         inviteCode: registerData.inviteCode,
       }),
     });
@@ -144,6 +137,7 @@
 };
 
 
+
   // Update login form data
   const updateLoginData = (field, value) => {
     setLoginData({
@@ -162,6 +156,10 @@
 
   return (
     <div className="auth-container">
+      <div className="logo-container">
+        <img src={logo} alt="Logo" className="site-logo" />
+      </div>
+
       <div className="auth-card">
         <div className="auth-header">
           <div className={`auth-tab ${activeTab === "login" ? "active" : ""}`} onClick={() => setActiveTab("login")}>
@@ -178,13 +176,13 @@
             <form className="auth-form" onSubmit={handleLogin}>
               {errors.login.message && <div className="error-message">{errors.login.message}</div>}
               <div className="form-group">
-                <label htmlFor="login-username">用户名/邮箱</label>
+                <label htmlFor="login-username">用户名</label>
                 <input
                   type="text"
                   id="login-username"
                   value={loginData.username}
                   onChange={(e) => updateLoginData("username", e.target.value)}
-                  placeholder="请输入用户名或邮箱"
+                  placeholder="请输入用户名"
                   required
                 />
                 {errors.login.username && <div className="error-message">{errors.login.username}</div>}
@@ -205,13 +203,13 @@
 
               <div className="form-group-inline">
                 <div className="checkbox-container">
-                  <input
+                  {/* <input
                     type="checkbox"
                     id="remember-me"
                     checked={loginData.rememberMe}
                     onChange={(e) => updateLoginData("rememberMe", e.target.checked)}
-                  />
-                  <label htmlFor="remember-me">记住我</label>
+                  /> */}
+                  {/* <label htmlFor="remember-me">记住我</label> */}
                 </div>
                 <Link to="/forgot-password" className="forgot-password">
                   忘记密码?
diff --git a/src/pages/UserCenter/UserInvite.css b/src/pages/UserCenter/UserInvite.css
new file mode 100644
index 0000000..8250e0b
--- /dev/null
+++ b/src/pages/UserCenter/UserInvite.css
@@ -0,0 +1,36 @@
+.user-invite-container {
+  padding: 24px;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  max-width: 500px;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.invite-button {
+  padding: 10px 20px;
+  background-color: #4a90e2;
+  color: white;
+  font-size: 16px;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  margin-top: 12px;
+}
+
+.invite-button:disabled {
+  background-color: #cccccc;
+  cursor: not-allowed;
+}
+
+.invite-code {
+  margin-top: 20px;
+  font-size: 18px;
+  color: #333;
+}
+
+.invite-code span {
+  font-weight: bold;
+  color: #4a90e2;
+}
diff --git a/src/pages/UserCenter/UserInvite.jsx b/src/pages/UserCenter/UserInvite.jsx
new file mode 100644
index 0000000..aa6e559
--- /dev/null
+++ b/src/pages/UserCenter/UserInvite.jsx
@@ -0,0 +1,98 @@
+// import React, { useState } from 'react';
+// import './UserInvite.css';
+// import axios from 'axios';
+// import { useUser } from '../../context/UserContext'; // 根据实际路径调整
+
+// const UserInvite = () => {
+//   const { user } = useUser();
+//   const [inviteCode, setInviteCode] = useState('');
+//   const [loading, setLoading] = useState(false);
+
+//   const handleGenerateInvite = async () => {
+//     if (!user?.userId) {
+//       alert('未获取到用户信息，无法生成邀请码');
+//       return;
+//     }
+
+//     setLoading(true);
+//     try {
+//       const response = await axios.get('/echo/user/getInviteCode', {
+//         params: { user_id: user.userId },
+//       });
+//       setInviteCode(response.data.invite_code);
+//     } catch (error) {
+//       console.error('生成邀请码失败：', error);
+//       alert('生成邀请码失败，请稍后再试');
+//     }
+//     setLoading(false);
+//   };
+
+//   return (
+//     <div className="user-invite-container">
+//       <h2>邀请新用户</h2>
+//       <button className="invite-button" onClick={handleGenerateInvite} disabled={loading}>
+//         {loading ? '生成中...' : '生成邀请码'}
+//       </button>
+//       {inviteCode && (
+//         <div className="invite-code">
+//           邀请码：<span>{inviteCode}</span>
+//         </div>
+//       )}
+//     </div>
+//   );
+// };
+
+// export default UserInvite;
+
+import React, { useState } from 'react';
+import './UserInvite.css';
+import axios from 'axios';
+import { useUser } from '../../context/UserContext';
+
+const UserInvite = () => {
+  const { user } = useUser();
+  const [inviteCode, setInviteCode] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleGenerateInvite = async () => {
+    if (!user?.userId) {
+      alert('未获取到用户信息，无法生成邀请码');
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const response = await axios.post('/echo/user/getInviteCode', {
+        user_id: user.userId,
+      });
+
+      const data = response.data;
+
+      if (data.status === 'success') {
+        setInviteCode(data.invite_code);
+      } else {
+        alert(`生成失败：${data.message}`);
+      }
+    } catch (error) {
+      console.error('生成邀请码失败：', error);
+      alert('生成邀请码失败，请稍后再试');
+    }
+    setLoading(false);
+  };
+
+  return (
+    <div className="user-invite-container">
+      <h2>邀请新用户</h2>
+      <button className="invite-button" onClick={handleGenerateInvite} disabled={loading}>
+        {loading ? '生成中...' : '生成邀请码'}
+      </button>
+      {inviteCode && (
+        <div className="invite-code">
+          邀请码：<span>{inviteCode}</span>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default UserInvite;
diff --git a/src/pages/UserCenter/UserNav.jsx b/src/pages/UserCenter/UserNav.jsx
index cc343b1..64dd375 100644
--- a/src/pages/UserCenter/UserNav.jsx
+++ b/src/pages/UserCenter/UserNav.jsx
@@ -13,6 +13,7 @@
     { to: '/user/groups', label: '我的群组' },
     { to: '/user/collections', label: '我的收藏' },
     { to: '/user/newbie-tasks', label: '新手考核' },
+    { to: '/user/invite', label: '邀请新用户' },
   ];
 
   // 判断路径是否是当前活动页面
@@ -36,37 +37,3 @@
 };
 
 export default UserNav;
-
-// import React from 'react';
-// import './UserNav.css';
-
-// const UserNav = ({ activeKey, onSelect }) => {
-//   const navLinks = [
-//     { key: 'profile', label: '个人资料' },
-//     // { key: 'dynamics', label: '我的动态' },
-//     // { key: 'friends', label: '我的好友' },
-//     // { key: 'groups', label: '我的群组' },
-//     // { key: 'collections', label: '我的收藏' },
-//     { key: 'newbieTasks', label: '新手考核' },
-//   ];
-
-//   return (
-//     <div className="user-nav-container">
-//       <nav className="user-nav">
-//         {navLinks.map(({ key, label }) => (
-//           <div
-//             key={key}
-//             className={`user-nav-item ${activeKey === key ? 'active' : ''}`}
-//             onClick={() => onSelect(key)}
-//             style={{ cursor: 'pointer' }}
-//           >
-//             {label}
-//           </div>
-//         ))}
-//       </nav>
-//     </div>
-//   );
-// };
-
-// export default UserNav;
-