diff --git a/src/pages/UserInfo/UserInfo.css b/src/pages/UserInfo/UserInfo.css
new file mode 100644
index 0000000..476cc86
--- /dev/null
+++ b/src/pages/UserInfo/UserInfo.css
@@ -0,0 +1,61 @@
+/* src/pages/UserInfo.css */
+.user-info-container {
+  display: flex;
+  justify-content: center;
+  padding: 40px 20px;
+  background-color: #f8f1e9; /* 米色背景 */
+  min-height: 100vh;
+}
+
+.user-card {
+  background-color: #fff0f5; /* 淡粉背景 */
+  border-radius: 16px;
+  padding: 30px;
+  max-width: 500px;
+  width: 100%;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  font-family: 'Segoe UI', sans-serif;
+}
+
+.avatar {
+  width: 120px;
+  height: 120px;
+  object-fit: cover;
+  border-radius: 50%;
+  border: 4px solid #d2b48c; /* 浅棕色边框 */
+  margin-bottom: 20px;
+}
+
+.nickname {
+  font-size: 24px;
+  font-weight: bold;
+  color: #8b4513; /* 深棕色 */
+  margin-bottom: 8px;
+}
+
+.bio {
+  color: #a0522d; /* 棕红色 */
+  font-style: italic;
+  margin-bottom: 20px;
+}
+
+.details {
+  text-align: left;
+  font-size: 16px;
+  line-height: 1.8;
+  color: #5c4033;
+}
+
+.error {
+  color: red;
+  text-align: center;
+  margin-top: 40px;
+}
+
+.loading {
+  text-align: center;
+  font-size: 18px;
+  margin-top: 40px;
+  color: #8b4513;
+}
diff --git a/src/pages/UserInfo/UserInfo.jsx b/src/pages/UserInfo/UserInfo.jsx
index a50e81b..80aab84 100644
--- a/src/pages/UserInfo/UserInfo.jsx
+++ b/src/pages/UserInfo/UserInfo.jsx
@@ -1,9 +1,86 @@
-// src/pages/UserInfo.js
+// // src/pages/UserInfo.js
+// import React, { useEffect, useState } from 'react';
+// import axios from 'axios';
+// import { useLocation } from 'wouter';
+
+// const DEFAULT_AVATAR_URL = '/default-avatar.png'; // 替换为你的默认头像地址
+
+// const UserInfo = () => {
+//   const [location] = useLocation();
+//   const userId = location.split('/').pop();
+//   const [userInfo, setUserInfo] = useState(null);
+//   const [error, setError] = useState(null);
+
+//   useEffect(() => {
+//     const fetchUserInfo = async () => {
+//       try {
+//         setError(null);
+//         const { data: raw } = await axios.get(`/echo/user/${userId}/getProfile`);
+
+//         if (!raw) {
+//           setError('用户数据为空');
+//           setUserInfo(null);
+//           return;
+//         }
+
+//         const profile = {
+//           avatarUrl: raw.avatarUrl
+//             ? `${process.env.REACT_APP_AVATAR_BASE_URL}${raw.avatarUrl}`
+//             : DEFAULT_AVATAR_URL,
+//           nickname: raw.username || '未知用户',
+//           email: raw.email || '未填写',
+//           gender: raw.gender || '保密',
+//           bio: raw.description || '无',
+//           interests: raw.hobbies ? raw.hobbies.split(',') : [],
+//           level: raw.level || '未知',
+//           experience: raw.experience ?? 0,
+//           uploadAmount: raw.uploadCount ?? 0,
+//           downloadAmount: raw.downloadCount ?? 0,
+//           shareRate: raw.shareRate ?? 0,
+//           joinedDate: raw.registrationTime,
+//         };
+
+//         setUserInfo(profile);
+//       } catch (err) {
+//         setError(err.response?.status === 404 ? '用户不存在' : '请求失败，请稍后再试');
+//         setUserInfo(null);
+//       }
+//     };
+
+//     fetchUserInfo();
+//   }, [userId]);
+
+//   if (error) return <p>{error}</p>;
+//   if (!userInfo) return <p>加载中...</p>;
+
+//   return (
+//     <div className="user-profile">
+//       <img src={userInfo.avatarUrl} alt="头像" />
+//       <h2>{userInfo.nickname}</h2>
+//       <p>邮箱：{userInfo.email}</p>
+//       <p>性别：{userInfo.gender}</p>
+//       <p>简介：{userInfo.bio}</p>
+//       <p>兴趣爱好：{userInfo.interests.join('、')}</p>
+//       <p>等级：{userInfo.level}</p>
+//       <p>经验值：{userInfo.experience}</p>
+//       <p>上传量：{userInfo.uploadAmount}</p>
+//       <p>下载量：{userInfo.downloadAmount}</p>
+//       <p>分享率：{userInfo.shareRate}</p>
+//       <p>注册时间：{userInfo.joinedDate}</p>
+//     </div>
+//   );
+// };
+
+// export default UserInfo;
+
+
+// src/pages/UserInfo.jsx
 import React, { useEffect, useState } from 'react';
 import axios from 'axios';
 import { useLocation } from 'wouter';
+import './UserInfo.css';
 
-const DEFAULT_AVATAR_URL = '/default-avatar.png'; // 替换为你的默认头像地址
+const DEFAULT_AVATAR_URL = '/default-avatar.png';
 
 const UserInfo = () => {
   const [location] = useLocation();
@@ -16,10 +93,8 @@
       try {
         setError(null);
         const { data: raw } = await axios.get(`/echo/user/${userId}/getProfile`);
-
         if (!raw) {
           setError('用户数据为空');
-          setUserInfo(null);
           return;
         }
 
@@ -43,30 +118,33 @@
         setUserInfo(profile);
       } catch (err) {
         setError(err.response?.status === 404 ? '用户不存在' : '请求失败，请稍后再试');
-        setUserInfo(null);
       }
     };
 
     fetchUserInfo();
   }, [userId]);
 
-  if (error) return <p>{error}</p>;
-  if (!userInfo) return <p>加载中...</p>;
+  if (error) return <p className="error">{error}</p>;
+  if (!userInfo) return <p className="loading">加载中...</p>;
 
   return (
-    <div className="user-profile">
-      <img src={userInfo.avatarUrl} alt="头像" />
-      <h2>{userInfo.nickname}</h2>
-      <p>邮箱：{userInfo.email}</p>
-      <p>性别：{userInfo.gender}</p>
-      <p>简介：{userInfo.bio}</p>
-      <p>兴趣爱好：{userInfo.interests.join('、')}</p>
-      <p>等级：{userInfo.level}</p>
-      <p>经验值：{userInfo.experience}</p>
-      <p>上传量：{userInfo.uploadAmount}</p>
-      <p>下载量：{userInfo.downloadAmount}</p>
-      <p>分享率：{userInfo.shareRate}</p>
-      <p>注册时间：{userInfo.joinedDate}</p>
+    <div className="user-info-container">
+      <div className="user-card">
+        <img className="avatar" src={userInfo.avatarUrl} alt="用户头像" />
+        <h2 className="nickname">{userInfo.nickname}</h2>
+        <p className="bio">{userInfo.bio}</p>
+        <div className="details">
+          <p><strong>邮箱：</strong>{userInfo.email}</p>
+          <p><strong>性别：</strong>{userInfo.gender}</p>
+          <p><strong>兴趣爱好：</strong>{userInfo.interests.join('、')}</p>
+          <p><strong>等级：</strong>{userInfo.level}</p>
+          <p><strong>经验值：</strong>{userInfo.experience}</p>
+          <p><strong>上传量：</strong>{userInfo.uploadAmount}</p>
+          <p><strong>下载量：</strong>{userInfo.downloadAmount}</p>
+          <p><strong>分享率：</strong>{userInfo.shareRate}</p>
+          <p><strong>注册时间：</strong>{userInfo.joinedDate}</p>
+        </div>
+      </div>
     </div>
   );
 };