diff --git a/src/components/Auth/logo.svg b/src/components/Auth/logo.svg
index 38d62ff..57d89ee 100644
--- a/src/components/Auth/logo.svg
+++ b/src/components/Auth/logo.svg
@@ -9,10 +9,10 @@
 <path d="M54 27H28V53H54V27Z" fill="white"/>
 </mask>
 <g mask="url(#mask0_193_2)">
-<path d="M30.1665 43.7918C30.1666 40.271 32.3334 38.937 33.9583 38.3852C35.5831 37.8335 36.6667 37.8335 38.2915 36.2085C39.9163 34.5835 39.9168 31.3335 43.1666 30.2501C46.4163 29.1668 50.2575 30.7918 51.2914 34.5835C52.3253 38.3751 49.3961 43.2501 48.0419 44.8751C46.6877 46.5001 43.9784 49.2085 39.3747 49.7501C34.7711 50.2918 30.1664 47.3126 30.1665 43.7918Z" fill="#4A3B34" stroke="#FBF2E3" stroke-width="2" stroke-linejoin="round"/>
-<path d="M34.5 38.3986C38.2917 43.25 43.7083 38.3986 39.9167 33.5Z" fill="#4A3B34"/>
+<path d="M30.1665 43.7918C30.1666 40.271 32.3334 38.937 33.9583 38.3852C35.5831 37.8335 36.6667 37.8335 38.2915 36.2085C39.9163 34.5835 39.9168 31.3335 43.1666 30.2501C46.4163 29.1668 50.2575 30.7918 51.2914 34.5835C52.3253 38.3751 49.3961 43.2501 48.0419 44.8751C46.6877 46.5001 43.9784 49.2085 39.3747 49.7501C34.7711 50.2918 30.1664 47.3126 30.1665 43.7918Z" fill="#5F4437" stroke="#FBF2E3" stroke-width="2" stroke-linejoin="round"/>
+<path d="M34.5 38.3986C38.2917 43.25 43.7083 38.3986 39.9167 33.5Z" fill="#5F4437"/>
 <path d="M34.5 38.3986C38.2917 43.25 43.7083 38.3986 39.9167 33.5" stroke="#FBF2E3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M33.9585 38.3851C35.5833 37.8333 36.667 37.8333 38.2918 36.2083C39.9166 34.5833 39.917 31.3333 43.1668 30.25" fill="#4A3B34"/>
+<path d="M33.9585 38.3851C35.5833 37.8333 36.667 37.8333 38.2918 36.2083C39.9166 34.5833 39.917 31.3333 43.1668 30.25" fill="#5F4437"/>
 <path d="M33.9585 38.3851C35.5833 37.8333 36.667 37.8333 38.2918 36.2083C39.9166 34.5833 39.917 31.3333 43.1668 30.25" stroke="#FBF2E3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </g>
 </g>
diff --git a/src/components/Header.css b/src/components/Header.css
index 859cff9..f322e13 100644
--- a/src/components/Header.css
+++ b/src/components/Header.css
@@ -73,14 +73,14 @@
 
 /* 鼠标悬停时 */
 .nav-item:hover {
-  background-color: #5c270c; /* 背景色变深 */
+  background-color: #5F4437; /* 背景色变深 */
   color: #FBF2E3; /* 字体颜色与背景形成对比 */
   transform: scale(1.05); /* 微微放大，增加互动感 */
 }
 
 /* 选中状态 */
 .nav-item.active {
-  background-color: #5c270c; /* 活动状态时的背景色 */
+  background-color: #5F4437; /* 活动状态时的背景色 */
   color: #FBF2E3; /* 活动状态时的字体颜色 */
   font-weight: bold;
   border-radius: 16px; /* 更圆的圆角效果 */
diff --git a/src/logo.svg b/src/logo.svg
index 38d62ff..57d89ee 100644
--- a/src/logo.svg
+++ b/src/logo.svg
@@ -9,10 +9,10 @@
 <path d="M54 27H28V53H54V27Z" fill="white"/>
 </mask>
 <g mask="url(#mask0_193_2)">
-<path d="M30.1665 43.7918C30.1666 40.271 32.3334 38.937 33.9583 38.3852C35.5831 37.8335 36.6667 37.8335 38.2915 36.2085C39.9163 34.5835 39.9168 31.3335 43.1666 30.2501C46.4163 29.1668 50.2575 30.7918 51.2914 34.5835C52.3253 38.3751 49.3961 43.2501 48.0419 44.8751C46.6877 46.5001 43.9784 49.2085 39.3747 49.7501C34.7711 50.2918 30.1664 47.3126 30.1665 43.7918Z" fill="#4A3B34" stroke="#FBF2E3" stroke-width="2" stroke-linejoin="round"/>
-<path d="M34.5 38.3986C38.2917 43.25 43.7083 38.3986 39.9167 33.5Z" fill="#4A3B34"/>
+<path d="M30.1665 43.7918C30.1666 40.271 32.3334 38.937 33.9583 38.3852C35.5831 37.8335 36.6667 37.8335 38.2915 36.2085C39.9163 34.5835 39.9168 31.3335 43.1666 30.2501C46.4163 29.1668 50.2575 30.7918 51.2914 34.5835C52.3253 38.3751 49.3961 43.2501 48.0419 44.8751C46.6877 46.5001 43.9784 49.2085 39.3747 49.7501C34.7711 50.2918 30.1664 47.3126 30.1665 43.7918Z" fill="#5F4437" stroke="#FBF2E3" stroke-width="2" stroke-linejoin="round"/>
+<path d="M34.5 38.3986C38.2917 43.25 43.7083 38.3986 39.9167 33.5Z" fill="#5F4437"/>
 <path d="M34.5 38.3986C38.2917 43.25 43.7083 38.3986 39.9167 33.5" stroke="#FBF2E3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M33.9585 38.3851C35.5833 37.8333 36.667 37.8333 38.2918 36.2083C39.9166 34.5833 39.917 31.3333 43.1668 30.25" fill="#4A3B34"/>
+<path d="M33.9585 38.3851C35.5833 37.8333 36.667 37.8333 38.2918 36.2083C39.9166 34.5833 39.917 31.3333 43.1668 30.25" fill="#5F4437"/>
 <path d="M33.9585 38.3851C35.5833 37.8333 36.667 37.8333 38.2918 36.2083C39.9166 34.5833 39.917 31.3333 43.1668 30.25" stroke="#FBF2E3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </g>
 </g>
diff --git a/src/pages/Forum/posts-detail/PostDetailPage.css b/src/pages/Forum/posts-detail/PostDetailPage.css
index c47601e..65584af 100644
--- a/src/pages/Forum/posts-detail/PostDetailPage.css
+++ b/src/pages/Forum/posts-detail/PostDetailPage.css
@@ -12,6 +12,9 @@
     max-width: 960px;
     margin: 0 auto;
     padding: 24px 32px;
+    /* 卡片居中 */
+    margin: 0 auto;
+    margin-top: 40px;
   }
   
   .post-detail h1 {
@@ -47,7 +50,7 @@
     display: flex;
     gap: 16px;
     margin-bottom: 24px;
-    margin-left: 710px;
+    justify-content: flex-end; /*靠右对齐*/
   }
   
   .icon-btn {
@@ -154,6 +157,7 @@
   }
   
   .comment-options button {
+    justify-content: flex-end; /*靠右对齐*/
     padding: 6px 14px;
     background-color: #BA929A;
     color: #fff;
@@ -161,7 +165,6 @@
     border-radius: 6px;
     font-size: 14px;
     cursor: pointer;
-    transition: background-color 0.2s ease;
   }
   
   .comment-options button:hover {
diff --git a/src/pages/Forum/posts-detail/PostDetailPage.jsx b/src/pages/Forum/posts-detail/PostDetailPage.jsx
index a272fb8..01e1648 100644
--- a/src/pages/Forum/posts-detail/PostDetailPage.jsx
+++ b/src/pages/Forum/posts-detail/PostDetailPage.jsx
@@ -4,6 +4,7 @@
 import { getPostDetail, getPostComments, likePost, unlikePost, addCommentToPost, collectPost } from './api'; // 引入你的 API 函数
 import './PostDetailPage.css';
 import { useUser } from '../../../context/UserContext'; // 注意路径
+import Header from '../../../components/Header';
 
 const PostDetailPage = () => {
   const { postId } = useParams(); // 获取帖子ID
@@ -149,6 +150,7 @@
 
   return (
     <div className="post-detail-page">
+      <Header />
       {loading ? (
         <p>加载中...</p>
       ) : errorMsg ? (
diff --git a/src/pages/Forum/posts-main/ForumPage.css b/src/pages/Forum/posts-main/ForumPage.css
index aa0a5c3..db3a654 100644
--- a/src/pages/Forum/posts-main/ForumPage.css
+++ b/src/pages/Forum/posts-main/ForumPage.css
@@ -1,6 +1,6 @@
 .forum-page {
     color: #fff;
-    background-color: #4A3B34;
+    background-color: #5F4437;
     min-height: 100vh;
     font-family: Arial, sans-serif;
   }
@@ -17,7 +17,7 @@
   
   .post-card {
     text-decoration: none;  /* 移除链接的下划线 */
-    background-color: #4A3B34;
+    background-color: #5F4437;
     padding: 15px;
     border-radius: 10px;
     position: relative;
diff --git a/src/pages/Forum/posts-main/ForumPage.jsx b/src/pages/Forum/posts-main/ForumPage.jsx
index bf2aa63..577d336 100644
--- a/src/pages/Forum/posts-main/ForumPage.jsx
+++ b/src/pages/Forum/posts-main/ForumPage.jsx
@@ -18,8 +18,7 @@
       <Header />
       <div className="toolbar">
         <CreatePostButton />
-        <SearchBar onSearch={handleSearch} />
-        
+        <SearchBar onSearch={handleSearch} />     
       </div>
       <PostList search={searchQuery} />
     </div>
diff --git a/src/pages/Forum/posts-main/components/PostList.css b/src/pages/Forum/posts-main/components/PostList.css
index 59533ff..ee4d951 100644
--- a/src/pages/Forum/posts-main/components/PostList.css
+++ b/src/pages/Forum/posts-main/components/PostList.css
@@ -5,6 +5,9 @@
     padding: 30px;
   }
   
+.post-actions {
+  justify-content: flex-end; /*靠右对齐*/
+}
   .post-card {
     background-color: #e9ded2;
     border: 1px solid #000000;
diff --git a/src/pages/FriendMoments/FriendMoments.css b/src/pages/FriendMoments/FriendMoments.css
index 89c84c7..c95bdcf 100644
--- a/src/pages/FriendMoments/FriendMoments.css
+++ b/src/pages/FriendMoments/FriendMoments.css
@@ -1,5 +1,5 @@
 /* .friend-moments {
-    background-color: #5c3f31;
+    background-color: #5F4437;
     color: white;
   }
   .header {
diff --git a/src/pages/InterestGroup/InterestGroup.css b/src/pages/InterestGroup/InterestGroup.css
index a52ba5f..1de6510 100644
--- a/src/pages/InterestGroup/InterestGroup.css
+++ b/src/pages/InterestGroup/InterestGroup.css
@@ -1,158 +1,207 @@
 /* 设置整个兴趣小组页面的背景色和布局 */
 .interest-group-container {
-    background-color: #f8f1f1; /* 粉色背景 */
+  background-color: #5F4437; 
+  width: 100%;
+  height: 2000px;
+}
+
+/* 页面标题样式 */
+h1 {
+  text-align: center;
+  color: #5F4437; /* 深棕色 */
+  font-size: 2rem;
+  margin-bottom: 30px;
+}
+
+/* 筛选、搜索和排序容器样式 */
+.filter-search-sort-container {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+/* 筛选部分样式 */
+.filter, .sort {
+  margin-bottom: 0;
+  /* 文字在左边，下拉框在右边 */
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 5px;
+}
+
+.search input {
+  padding: 10px;
+  width: 200px;
+  margin-left: 100px;
+  border-radius: 6px;
+  border: 1px solid #e0c4a1; /* 浅棕色 */
+  background-color: #fff5f5; /* 浅粉色 */
+  color: #5F4437;
+  font-size: 1rem;
+}
+
+.filter select,
+.sort select {
+  padding: 10px;
+  width: 200px;
+  border-radius: 6px;
+  border: 1px solid #e0c4a1; /* 浅棕色 */
+  background-color: #fff5f5; /* 浅粉色 */
+  color: #5F4437;
+  font-size: 1rem;
+}
+
+/* 激活时的输入框样式 */
+.filter select:focus,
+.search input:focus,
+.sort select:focus {
+  border-color: #b38867; /* 较深的棕色 */
+  outline: none;
+}
+
+.group-list {
+  margin-top: 5%;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px; /* 控制 item 之间的间距 */
+  justify-content: flex-start; /* 让不足三项时左对齐 */
+}
+
+.group-item {
+  flex: 0 0 calc(33.333% - 20px); /* 每个占1/3减去间距 */
+  box-sizing: border-box;
+  border: 1px solid #e0c4a1;
+  border-radius: 8px;
+  overflow: hidden;
+  background-color: #fff;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease-in-out;
+  padding: 15px;
+}
+
+
+.group-item:hover {
+  transform: translateY(-5px); /* 鼠标悬停时小组项上升效果 */
+}
+
+.group-content {
+  display: flex;
+  gap: 15px;
+}
+
+.group-info-right {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start; 
+  justify-content: flex-start; 
+}
+
+/* 小组描述样式 */
+.group-description {
+  color: #333;
+  font-size: 1rem;
+  line-height: 1.4;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+/* 小组标签样式 */
+.group-tags {
+  display: flex;
+  gap: 10px;
+}
+
+.tag {
+  background-color: #f0f0f0;
+  color: #5F4437;
+  padding: 5px 10px;
+  border-radius: 4px;
+  font-size: 0.9rem;
+}
+
+/* 分页按钮 */
+.pagination {
+  text-align: center;
+  margin-top: 30px;
+}
+
+button {
+  padding: 10px 20px;
+  margin: 0 10px;
+  background-color: #5F4437; /* 深棕色 */
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 1rem;
+  transition: background-color 0.3s ease;
+}
+
+button:disabled {
+  background-color: #d6d6d6;
+  cursor: not-allowed;
+}
+
+button:hover {
+  background-color: #b38867; /* 深棕色的 hover 效果 */
+}
+
+/* 错误信息的样式 */
+.error {
+  color: #ff6f61; /* 红色 */
+  text-align: center;
+  margin-top: 20px;
+}
+
+/* 加载中的提示 */
+.loading {
+  color: #5F4437;
+  text-align: center;
+  margin-top: 20px;
+  font-size: 1.2rem;
+}
+
+/* 响应式设计: 确保在小屏幕下布局能适应 */
+@media (max-width: 768px) {
+ .group-item {
+    width: 48%;
+  }
+
+ .filter-search-sort-container {
+    flex-direction: column;
+  }
+
+ .filter select,
+ .search input,
+ .sort select {
     width: 100%;
-  }
-  
-  /* 页面标题样式 */
-  h1 {
-    text-align: center;
-    color: #5c3f31; /* 深棕色 */
-    font-size: 2rem;
-    margin-bottom: 30px;
-  }
-  
-  /* 筛选部分样式 */
-  .filter, .search, .sort {
-    margin-bottom: 20px;
-    text-align: center;
-  }
-  
-  .filter select,
-  .search input,
-  .sort select {
-    padding: 10px;
-    width: 200px;
-    border-radius: 6px;
-    border: 1px solid #e0c4a1; /* 浅棕色 */
-    background-color: #fff5f5; /* 浅粉色 */
-    color: #5c3f31;
-    font-size: 1rem;
-  }
-  
-  /* 激活时的输入框样式 */
-  .filter select:focus,
-  .search input:focus,
-  .sort select:focus {
-    border-color: #b38867; /* 较深的棕色 */
-    outline: none;
-  }
-  
-  /* 小组列表样式 */
-  .group-list {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 20px;
-    justify-content: space-between;
-  }
-  
-  /* 每个小组的容器 */
-  .group-item {
-    width: 30%;
-    border: 1px solid #e0c4a1; /* 浅棕色边框 */
-    border-radius: 8px;
-    overflow: hidden;
-    background-color: #fff;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    transition: transform 0.3s ease-in-out;
-  }
-  
-  .group-item:hover {
-    transform: translateY(-5px); /* 鼠标悬停时小组项上升效果 */
-  }
-  
-  /* 小组封面图样式 */
-  .group-cover {
-    width: 100%;
-    height: 180px;
-    object-fit: cover;
-    transition: opacity 0.3s ease;
-  }
-  
-  /* 小组信息区域 */
-  .group-info {
-    padding: 15px;
-    background-color: #f8f1f1; /* 浅粉色背景 */
-  }
-  
-  .group-info h2 {
-    font-size: 1.2em;
-    color: #5c3f31;
     margin-bottom: 10px;
   }
-  
-  /* 小组描述部分 */
-  .group-info p {
-    font-size: 1rem;
-    color: #5c3f31;
+}
+
+@media (max-width: 480px) {
+ .group-item {
+    width: 100%;
   }
-  
-  /* 分页按钮 */
-  .pagination {
-    text-align: center;
-    margin-top: 30px;
+
+ .filter select,
+ .search input,
+ .sort select {
+    width: 100%;
+    font-size: 0.9rem;
   }
-  
-  button {
-    padding: 10px 20px;
-    margin: 0 10px;
-    background-color: #5c3f31; /* 深棕色 */
-    color: white;
-    border: none;
-    border-radius: 6px;
-    cursor: pointer;
-    font-size: 1rem;
-    transition: background-color 0.3s ease;
-  }
-  
-  button:disabled {
-    background-color: #d6d6d6;
-    cursor: not-allowed;
-  }
-  
-  button:hover {
-    background-color: #b38867; /* 深棕色的 hover 效果 */
-  }
-  
-  /* 错误信息的样式 */
-  .error {
-    color: #ff6f61; /* 红色 */
-    text-align: center;
-    margin-top: 20px;
-  }
-  
-  /* 加载中的提示 */
-  .loading {
-    color: #5c3f31;
-    text-align: center;
-    margin-top: 20px;
-    font-size: 1.2rem;
-  }
-  
-  /* 响应式设计: 确保在小屏幕下布局能适应 */
-  @media (max-width: 768px) {
-    .group-item {
-      width: 48%;
-    }
-  
-    .filter select,
-    .search input,
-    .sort select {
-      width: 100%;
-      margin-bottom: 10px;
-    }
-  }
-  
-  @media (max-width: 480px) {
-    .group-item {
-      width: 100%;
-    }
-  
-    .filter select,
-    .search input,
-    .sort select {
-      width: 100%;
-      font-size: 0.9rem;
-    }
-  }
-  
\ No newline at end of file
+}
+
+.interest-group-card {
+  background-color: #e9ded2;
+  border-radius: 16px;
+  max-width: 70%;
+  max-height: 100%;
+  /* 卡片居中 */
+  margin: 0 auto;
+  margin-top: 40px;
+  /* padding: 24px 32px; */
+  padding: 3% 3%
+}    
\ No newline at end of file
diff --git a/src/pages/InterestGroup/InterestGroup.jsx b/src/pages/InterestGroup/InterestGroup.jsx
index 8a8d67b..eb9ed41 100644
--- a/src/pages/InterestGroup/InterestGroup.jsx
+++ b/src/pages/InterestGroup/InterestGroup.jsx
@@ -97,97 +97,128 @@
     }
   };
 
+  const handleSearch = () => {
+    // 触发搜索逻辑，通过修改 name 状态重新请求数据
+    setPage(1);
+  };
+
   return (
     <div className="interest-group-container">
       {/* Header 组件放在页面最上方 */}
       <Header />
+      <div className="interest-group-card">
+        {/* <h1>兴趣小组列表</h1> */}
+        {/* 水平排列的筛选、搜索和排序容器 */}
+        <div className="filter-search-sort-container">
+          {/* 分类筛选 */}
+          <div className="filter">
+            <label>分类：</label>
+            <select onChange={handleCategoryChange} value={category} style={{ width: '150px' }}>
+              <option value="">全部</option>
+              <option value="影视">影视</option>
+              <option value="游戏">游戏</option>
+              <option value="学习">学习</option>
+              <option value="体育">体育</option>
+              <option value="其他">其他</option>
+            </select>
+          </div>
 
-      <h1>兴趣小组列表</h1>
-      {/* 分类筛选 */}
-      <div className="filter">
-        <label>分类：</label>
-        <select onChange={handleCategoryChange} value={category}>
-          <option value="">全部</option>
-          <option value="影视">影视</option>
-          <option value="游戏">游戏</option>
-          <option value="学习">学习</option>
-          <option value="体育">体育</option>
-          <option value="其他">其他</option>
-        </select>
-      </div>
+          {/* 排序 */}
+          <div className="sort">
+            <label>排序：</label>
+            <select onChange={handleSortChange} value={sortBy} style={{ width: '150px' }}>
+              <option value="member_count">按成员数排序</option>
+              <option value="name">按名称排序</option>
+              <option value="category">按分类排序</option>
+            </select>
+          </div>
 
-      {/* 搜索框 */}
-      <div className="search">
-        <label>搜索：</label>
-        <input
-          type="text"
-          value={name}
-          onChange={handleSearchChange}
-          placeholder="输入小组名称搜索"
-        />
-      </div>
-
-      {/* 排序 */}
-      <div className="sort">
-        <label>排序：</label>
-        <select onChange={handleSortChange} value={sortBy}>
-          <option value="member_count">按成员数排序</option>
-          <option value="name">按名称排序</option>
-          <option value="category">按分类排序</option>
-        </select>
-      </div>
-
-      {/* 加载中提示 */}
-      {loading && <p>加载中...</p>}
-
-      {/* 错误提示 */}
-      {error && <p className="error">{error}</p>}
-
-      {/* 小组列表 */}
-      {!loading && !error && (
-        <div className="group-list">
-          {groups.map((group) => (
-            <div className="group-item" key={group.group_id}>
-              <img
-                src={group.cover_image}
-                alt={group.name}
-                className="group-cover"
-              />
-              <div className="group-info">
-                <h2>{group.name}</h2>
-                <p>{group.description}</p>
-                <p>成员数：{group.member_count}</p>
-                <p>分类：{group.category}</p>
-                {/* 加入小组按钮 */}
-                <button
-                  onClick={() => handleJoinGroup(group.group_id)}
-                  disabled={joinStatus[group.group_id] === '加入成功'}
-                >
-                  {joinStatus[group.group_id] === '加入成功' ? '已加入' : '加入小组'}
-                </button>
-                {/* 显示加入状态 */}
-                {joinStatus[group.group_id] && <p>{joinStatus[group.group_id]}</p>}
-              </div>
-            </div>
-          ))}
+          {/* 搜索框 */}
+          <div className="search">
+            <input
+              type="text"
+              value={name}
+              onChange={handleSearchChange}
+              placeholder="输入小组名称搜索"
+            />
+            <button onClick={handleSearch} style={{ backgroundColor: '#BA929A', color: 'white' , padding: '5px 10px'}}>搜索</button>
+          </div>
         </div>
-      )}
 
-      {/* 分页 */}
-      <div className="pagination">
-        <button onClick={() => handlePageChange(page - 1)} disabled={page <= 1}>
-          上一页
-        </button>
-        <span>第 {page} 页 / 共 {totalPages} 页</span>
-        <button
-          onClick={() => handlePageChange(page + 1)}
-          disabled={page >= totalPages}
-        >
-          下一页
-        </button>
+        {/* 加载中提示 */}
+        {loading && <p>加载中...</p>}
+
+        {/* 错误提示 */}
+        {error && <p className="error">{error}</p>}
+
+        {/* 小组列表 */}
+        {!loading && !error && (
+          <div className="group-list">
+            {groups.map((group) => (
+              <div className="group-item" key={group.group_id}>
+                <div className="group-content">
+                  <img
+                    style={{ width: '40%', height: '40%'}}
+                    src={group.cover_image}
+                    alt={group.name}
+                    className="group-cover"
+                  />
+                  <div
+                    className="group-info-right"
+                    style={{
+                      display: 'flex',
+                      flexDirection: 'column',
+                      alignItems: 'flex-start',
+                      gap: '4px', // 控制元素之间的垂直间距
+                    }}
+                  >
+                    <h3 style={{ margin: 0 }}>{group.name}</h3>
+                    <p style={{ color: '#BA929A', margin: 0 }}>{group.member_count}人加入了小组</p>
+                    <button
+                      onClick={() => handleJoinGroup(group.group_id)}
+                      disabled={joinStatus[group.group_id] === '加入成功'}
+                      style={{
+                        background: 'none',
+                        color: '#007bff',
+                        padding: 0,
+                        marginTop: '4px',
+                        /*左对齐*/
+                        textAlign: 'left',
+                        marginLeft: '0',
+                        cursor: joinStatus[group.group_id] === '加入成功' ? 'default' : 'pointer',
+                      }}
+                    >
+                      {joinStatus[group.group_id] === '加入成功' ? '已加入' : '+加入小组'}
+                    </button>
+                  </div>
+
+                </div>
+                <div className="group-description">
+                  <p>{group.description}</p>
+                </div>
+                <p>分类：{group.category}</p>
+        
+              </div>
+            ))}
+          </div>
+        )}    
+
+        {/* 分页 */}
+        <div className="pagination">
+          <button onClick={() => handlePageChange(page - 1)} disabled={page <= 1}>
+            上一页
+          </button>
+          <span>第 {page} 页 / 共 {totalPages} 页</span>
+          <button
+            onClick={() => handlePageChange(page + 1)}
+            disabled={page >= totalPages}
+          >
+            下一页
+          </button>
+        </div>
       </div>
     </div>
   );
 };
 
-export default InterestGroup;
+export default InterestGroup;
\ No newline at end of file
diff --git a/src/pages/PublishSeed/PublishSeed.css b/src/pages/PublishSeed/PublishSeed.css
index 61b1405..5f83d89 100644
--- a/src/pages/PublishSeed/PublishSeed.css
+++ b/src/pages/PublishSeed/PublishSeed.css
@@ -1,145 +1,81 @@
+.pub-card {
+  /* background-color: #e9ded2;
+  border-radius: 16px;
+  margin-top: 10%;
+  margin-left: 10%;
+  margin-right: 10%;
+  padding: 5% 10%; */
+  background-color: #e9ded2;
+  border-radius: 16px;
+  max-width: 70%;
+  max-height: 100%;
+  /* 卡片居中 */
+  margin: 0 auto;
+  margin-top: 40px;
+  /* padding: 24px 32px; */
+  padding: 3% 3%
+}  
+
+.pub-categoty select {
+  padding: 1%;
+  width: 20%;
+  border-radius: 6px;
+  border: 1px solid #e0c4a1; /* 浅棕色 */
+  background-color: #fff5f5; /* 浅粉色 */
+  color: #5F4437;
+  font-size: 1rem;
+  margin-bottom: 2%;
+}
+
+.title-tag input {
+  padding: 1%;
+  width: 100%;
+  border-radius: 6px;
+  border: 1px solid #e0c4a1; 
+  background-color: #fff5f5;
+  color: #5F4437;
+  font-size: 1rem;
+  margin-bottom: 2%;
+}
+.discription textarea {
+  padding: 1%;
+  width: 100%;
+  border-radius: 6px;
+  border: 1px solid #e0c4a1; 
+  background-color: #fff5f5;
+  color: #5F4437;
+  font-size: 1rem;
+  margin-bottom: 2%;
+}
+.seed-file input {
+  /* padding: 1%; */
+  width: 100%;
+  /* border-radius: 6px; */
+  /* border: 1px solid #e0c4a1;  */
+  /* background-color: #fff5f5; */
+  color: #5F4437;
+  font-size: 1rem;
+  margin-bottom: 2%;
+}
+
+.cover-image input {
+  padding: 1%;
+  width: 100%;
+  border-radius: 6px;
+  border: 1px solid #e0c4a1; 
+  background-color: #fff5f5;
+  color: #5F4437;
+  font-size: 1rem;
+  margin-bottom: 2%;
+}
+
 .publish-seed-container {
-    background-color: #5c3f31;
-    color: white;
-    padding: 20px;
-    border-radius: 12px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-  }
-  
-  h2 {
-    text-align: center;
-    font-size: 1.8rem;
-    margin-bottom: 20px;
-    color: #fff;
-  }
-  
-  .message {
-    text-align: center;
-    margin-bottom: 20px;
-    color: #ff6f61;
-    font-weight: bold;
-  }
-  
-  .form-group {
-    margin-bottom: 20px;
-  }
-  
-  label {
-    font-size: 1rem;
-    margin-bottom: 8px;
-    display: block;
-  }
-  
-  input[type="text"],
-  textarea,
-  select,
-  input[type="url"],
-  input[type="file"] {
-    width: 100%;
-    padding: 8px 12px;
-    border-radius: 6px;
-    border: 1px solid #ddd;
-    background-color: #f9f9f9;
-    color: #333;
-    font-size: 1rem;
-  }
-  
-  textarea {
-    height: 100px;
-    resize: none;
-  }
-  
-  input[type="file"] {
-    padding: 6px;
-  }
-  
-  input[type="url"] {
-    padding: 8px 12px;
-  }
-  
-  input[type="text"]:focus,
-  textarea:focus,
-  select:focus,
-  input[type="url"]:focus,
-  input[type="file"]:focus {
-    outline: none;
-    border-color: #b38867;
-  }
-  
-  button[type="submit"] {
-    padding: 12px 20px;
-    border: none;
-    background-color: #007bff;
-    color: white;
-    font-size: 1rem;
-    border-radius: 6px;
-    cursor: pointer;
-    width: 100%;
-    transition: background-color 0.2s ease;
-  }
-  
-  button[type="submit"]:disabled {
-    background-color: #d6d6d6;
-    cursor: not-allowed;
-  }
-  
-  button[type="submit"]:hover {
-    background-color: #0056b3;
-  }
-  
-  input[type="text"],
-  input[type="url"],
-  select {
-    margin-bottom: 10px;
-  }
-  
-  input[type="file"] {
-    margin-bottom: 10px;
-  }
-  
-  .publish-seed-container .form-group:last-child {
-    margin-bottom: 0;
-  }
-  
-  .publish-seed-container .form-group label {
-    color: #ddd;
-    font-size: 1rem;
-  }
-  
-  .publish-seed-container .form-group input,
-  .publish-seed-container .form-group select,
-  .publish-seed-container .form-group textarea {
-    background-color: #4e3b30;
-    color: white;
-  }
-  
-  .publish-seed-container .form-group input:focus,
-  .publish-seed-container .form-group select:focus,
-  .publish-seed-container .form-group textarea:focus {
-    border-color: #b38867;
-    outline: none;
-  }
-  
-  input[type="file"] {
-    border: none;
-    background-color: #4e3b30;
-  }
-  
-  input[type="file"]:focus {
-    outline: none;
-  }
-  
-  .form-group button {
-    background-color: #5c3f31;
-    color: #fff;
-    padding: 12px;
-    font-size: 1rem;
-    border-radius: 8px;
-    cursor: pointer;
-    width: 100%;
-  }
-  
-  .form-group button:hover {
-    background-color: #b38867;
-  }
-  
\ No newline at end of file
+  background-color: #5F4437;
+  color: white;
+  border-radius: 12px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.upload-button {
+  width: 100%;
+}
\ No newline at end of file
diff --git a/src/pages/PublishSeed/PublishSeed.jsx b/src/pages/PublishSeed/PublishSeed.jsx
index 7ead11d..c61440f 100644
--- a/src/pages/PublishSeed/PublishSeed.jsx
+++ b/src/pages/PublishSeed/PublishSeed.jsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import axios from 'axios';
 import Header from '../../components/Header'; // 导入 Header 组件
+import './PublishSeed.css'
 
 const API_BASE = process.env.REACT_APP_API_BASE;
 
@@ -58,9 +59,10 @@
   return (
     <div className="publish-seed-container">
       <Header /> {/* 在这里插入导航栏 */}
+      <div className="pub-card">
       {message && <div className="message">{message}</div>}
       <form onSubmit={handleSubmit} encType="multipart/form-data">
-        <div className="form-group">
+        <div className="title-tag">
           <label>标题</label>
           <input
             type="text"
@@ -70,7 +72,7 @@
           />
         </div>
 
-        <div className="form-group">
+        <div className="discription">
           <label>描述</label>
           <textarea
             value={description}
@@ -79,7 +81,7 @@
           />
         </div>
 
-        <div className="form-group">
+        <div className="title-tag">
           <label>标签 (逗号分隔)</label>
           <input
             type="text"
@@ -90,7 +92,7 @@
           />
         </div>
 
-        <div className="form-group">
+        <div className="pub-categoty">
           <label>分类</label>
           <select
             value={category}
@@ -103,7 +105,7 @@
           </select>
         </div>
 
-        <div className="form-group">
+        <div className="seed-file">
           <label>种子文件</label>
           <input
             type="file"
@@ -120,15 +122,24 @@
             onChange={(e) => setImageUrl(e.target.value)}
             placeholder="例如：http://example.com/images/cover.jpg"
             required
+            style={{ padding: '1%',
+              width: '100%',
+              borderRadius: '6px',
+              border: '1px solid #e0c4a1',
+              backgroundColor: '#fff5f5',
+              color: '#5F4437',
+              fontSize: '1rem',
+              marginBottom: '2%'}}
           />
         </div>
 
-        <div className="form-group">
+        <div className="upload-button">
           <button type="submit" disabled={isLoading}>
             {isLoading ? '正在上传...' : '上传种子'}
           </button>
         </div>
       </form>
+      </div>
     </div>
   );
 };
diff --git a/src/pages/SeedList/SeedDetail/SeedDetail.css b/src/pages/SeedList/SeedDetail/SeedDetail.css
index ce4d70e..242fd83 100644
--- a/src/pages/SeedList/SeedDetail/SeedDetail.css
+++ b/src/pages/SeedList/SeedDetail/SeedDetail.css
@@ -1,30 +1,123 @@
-.seed-detail-container {
-    padding: 20px;
-  }
-  
-  .seed-header {
-    display: flex;
-  }
-  
-  .cover-image {
-    width: 200px;
-    height: auto;
-    margin-right: 20px;
-    border-radius: 8px;
-  }
-  
-  .seed-basic-info p, .seed-media-info p {
-    margin: 6px 0;
-  }
-  
-  .uploader-info {
-    margin-top: 30px;
-    border-top: 1px solid #ccc;
-    padding-top: 10px;
-  }
-  
-  .uploader-info .avatar {
-    width: 60px;
-    border-radius: 50%;
-  }
+.seed-detail-page {
+  background-color: #4b322b;
+  min-height: 100vh;
+  padding: 32px 0;
+  font-family: 'Helvetica Neue', sans-serif;
+  color: #333;
+}
+
+.seed-detail {
+  background-color: #e9ded2;
+  border-radius: 16px;
+  max-width: 960px;
+  margin: 0 auto;
+  margin-top: 40px;
+  padding: 24px 32px;
+}
+
+.seed-detail h1 {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 16px;
+  color: #4b322b;
+}
+
+.seed-header-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.seed-info {
+  flex: 1;
+}
+
+.seed-basic-info p,
+.seed-media-info p {
+  font-size: 16px;
+  margin: 6px 0;
+}
+
+.cover-image {
+  width: 200px;
+  height: auto;
+  margin-left: 20px;
+  border-radius: 8px;
+}
+
+.comment-options {
+  margin-top: 8px;
+  display: flex;
+  justify-content: flex-end; /* 将 space-between 改为 flex-end */
+}
+
+.action-buttons {
+  justify-content: flex-end; /*靠右对齐*/
+  display: flex;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+.btn {
+  justify-content: flex-end; /*靠右对齐*/
+  padding: 6px 14px;
+  background-color: #BA929A;
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.btn:hover {
+  background-color: #6d4e37;
+}
+
+.comments-section {
+  margin-top: 20px;
+}
+
+.comments-section h3 {
+  margin-bottom: 10px;
+  font-size: 20px;
+  color: #4b322b;
+}
+
+.comments-list {
+  border-top: 1px solid #ccc;
+  padding-top: 10px;
+}
+
+.comment {
+  border-bottom: 1px solid #ccc;
+  padding: 10px 0;
+}
+
+.comment-user {
+  font-weight: bold;
+  margin-bottom: 5px;
+}
+
+.comment-content {
+  margin: 0;
+}
+
+.add-comment-form {
+  margin-top: 10px;
+}
+
+.add-comment-form textarea {
+  width: 100%;
+  padding: 10px;
+  resize: vertical;
+  min-height: 80px;
+  border: 1px solid #bbb;
+  border-radius: 6px;
+  margin-bottom: 10px;
+}
+
+.error-text {
+  color: #f00;
+  text-align: center;
+}
   
\ No newline at end of file
diff --git a/src/pages/SeedList/SeedDetail/SeedDetail.jsx b/src/pages/SeedList/SeedDetail/SeedDetail.jsx
index 464da3d..b99fcc5 100644
--- a/src/pages/SeedList/SeedDetail/SeedDetail.jsx
+++ b/src/pages/SeedList/SeedDetail/SeedDetail.jsx
@@ -7,83 +7,161 @@
 const API_BASE = process.env.REACT_APP_API_BASE;
 
 const SeedDetail = () => {
-  const { seed_id } = useParams();
-  const [seed, setSeed] = useState(null);
-  const [error, setError] = useState(null);
+    const { seed_id } = useParams();
+    const [seed, setSeed] = useState(null);
+    const [error, setError] = useState(null);
+    const [comments, setComments] = useState([]);
+    const [newComment, setNewComment] = useState('');
 
-  useEffect(() => {
-    axios
-      .get(`${API_BASE}/echo/seeds/${seed_id}`)
-      .then((res) => {
-        if (res.data.status === 'success') {
-          setSeed(res.data.seed);
-        } else {
-          setError('未能获取种子信息');
+    useEffect(() => {
+        axios
+           .get(`${API_BASE}/echo/seeds/${seed_id}`)
+           .then((res) => {
+                if (res.data.status === 'success') {
+                    setSeed(res.data.seed);
+                } else {
+                    setError('未能获取种子信息');
+                }
+            })
+           .catch(() => {
+                setError('获取种子详情失败');
+            });
+
+        // 模拟获取评论数据，实际需要调用 API
+        axios.get(`${API_BASE}/echo/seeds/${seed_id}/comments`)
+           .then((res) => {
+                if (res.data.status === 'success') {
+                    setComments(res.data.comments);
+                }
+            })
+           .catch(() => {
+                console.log('获取评论失败');
+            });
+    }, [seed_id]);
+
+    const handleDownload = async () => {
+        if (seed) {
+            const peer_id = 'echo-' + Math.random().toString(36).substring(2, 10);
+            const ip = '127.0.0.1';
+            const port = 6881;
+            const uploaded = 0;
+            const downloaded = 0;
+            const left = 0;
+
+            try {
+                const response = await axios.get(`${API_BASE}/echo/seeds/${seed.seed_id}/download`, {
+                    params: { peer_id, ip, port, uploaded, downloaded, left },
+                    responseType: 'blob'
+                });
+
+                const blob = new Blob([response.data], { type: 'application/x-bittorrent' });
+                const downloadUrl = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = downloadUrl;
+                a.download = `${seed.seed_id}.torrent`;
+                a.click();
+                URL.revokeObjectURL(downloadUrl);
+            } catch (error) {
+                console.error('下载失败:', error);
+                alert('下载失败，请稍后再试。');
+            }
         }
-      })
-      .catch(() => {
-        setError('获取种子详情失败');
-      });
-  }, [seed_id]);
+    };
 
-  if (error) {
+    const handleCollect = () => {
+        // 这里可以添加收藏逻辑，调用相应 API
+        alert('已收藏');
+    };
+
+    const handleAddComment = () => {
+        if (newComment.trim()) {
+            // 这里可以添加评论逻辑，调用相应 API
+            setComments([...comments, { content: newComment, user: '用户' }]);
+            setNewComment('');
+        }
+    };
+
+    if (error) {
+        return (
+            <div className="seed-detail-page">
+                <Header />
+                <div className="seed-detail">
+                    <p className="error-text">{error}</p>
+                </div>
+            </div>
+        );
+    }
+
+    if (!seed) {
+        return (
+            <div className="seed-detail-page">
+                <Header />
+                <div className="seed-detail">
+                    <p>加载中...</p>
+                </div>
+            </div>
+        );
+    }
+
     return (
-      <div>
-        <Header />
-        <div className="seed-detail-container">
-          <p className="error">{error}</p>
+        <div className="seed-detail-page">
+            <Header />
+            <div className="seed-detail">
+                <h1>{seed.title}</h1>
+                <div className="seed-header-container">
+                    <div className="seed-info">
+                        <div className="seed-basic-info">
+                            <p><strong>分类：</strong>{seed.category}</p>
+                            <p><strong>发布时间：</strong>{new Date(seed.upload_time).toLocaleString()}</p>
+                            <p><strong>标签：</strong>{seed.tags.join(' / ')}</p>
+                            <p><strong>简介：</strong>{seed.description}</p>
+                            <p><strong>大小：</strong>{seed.size} GB</p>
+                            <p><strong>分辨率：</strong>{seed.resolution}</p>
+                            <p><strong>片长：</strong>{seed.duration}</p>
+                            <p><strong>地区：</strong>{seed.region}</p>
+                            <p><strong>下载次数：</strong>{seed.downloads}</p>
+                        </div>
+                        {(seed.category === '电影' || seed.category === '电视剧') && (
+                            <div className="seed-media-info">
+                                <p><strong>导演：</strong>{seed.director}</p>
+                                <p><strong>编剧：</strong>{seed.writer}</p>
+                                <p><strong>主演：</strong>{seed.actors.join(' / ')}</p>
+                            </div>
+                        )}
+                    </div>
+                    <img src={seed.cover_url} alt={seed.title} className="cover-image" />
+                </div>
+                <div className="action-buttons">
+                    <button className="btn" onClick={handleDownload}>下载</button>
+                    <button className="btn" onClick={handleCollect}>收藏</button>             
+                </div>
+                <hr className="divider" />
+                {/* 评论部分 */}
+                <h3>评论区</h3>
+                <div className="comments-section">
+                    <div className="comments-list">
+                        {comments.map((comment, index) => (
+                            <div key={index} className="comment">
+                                <p className="comment-user">{comment.user}</p>
+                                <p className="comment-content">{comment.content}</p>
+                            </div>
+                        ))}
+                    </div>
+                    <div className="add-comment-form">
+                        <textarea
+                            placeholder="输入你的评论..."
+                            value={newComment}
+                            onChange={(e) => setNewComment(e.target.value)}
+                        />
+                        <div className="comment-options">
+                        <button className="btn" onClick={handleAddComment}>发布评论</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
     );
-  }
-
-  if (!seed) {
-    return (
-      <div>
-        <Header />
-        <div className="seed-detail-container">
-          <p>加载中...</p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div>
-      <Header />
-      <div className="seed-detail-container">
-        <div className="seed-header">
-          <img src={seed.cover_url} alt={seed.title} className="cover-image" />
-          <div className="seed-basic-info">
-            <h1>{seed.title}</h1>
-            <p><strong>分类：</strong>{seed.category}</p>
-            <p><strong>标签：</strong>{seed.tags.join(' / ')}</p>
-            <p><strong>简介：</strong>{seed.description}</p>
-            <p><strong>大小：</strong>{seed.size} GB</p>
-            <p><strong>分辨率：</strong>{seed.resolution}</p>
-            <p><strong>片长：</strong>{seed.duration}</p>
-            <p><strong>地区：</strong>{seed.region}</p>
-            <p><strong>发布时间：</strong>{new Date(seed.upload_time).toLocaleString()}</p>
-            <p><strong>下载次数：</strong>{seed.downloads}</p>
-          </div>
-        </div>
-
-        {(seed.category === '电影' || seed.category === '电视剧') && (
-          <div className="seed-media-info">
-            <p><strong>导演：</strong>{seed.director}</p>
-            <p><strong>编剧：</strong>{seed.writer}</p>
-            <p><strong>主演：</strong>{seed.actors.join(' / ')}</p>
-          </div>
-        )}
-
-        <div className="uploader-info">
-          <h3>发种人</h3>
-          <img src={seed.user.avatar_url} alt={seed.user.username} className="avatar" />
-          <p>{seed.user.username}</p>
-        </div>
-      </div>
-    </div>
-  );
 };
 
 export default SeedDetail;
+    
\ No newline at end of file
diff --git a/src/pages/SeedList/SeedList.css b/src/pages/SeedList/SeedList.css
index 94c70aa..724411c 100644
--- a/src/pages/SeedList/SeedList.css
+++ b/src/pages/SeedList/SeedList.css
@@ -1,6 +1,6 @@
       
        .main-page {
-        background-color: #5c3f31;
+        background-color: #5F4437;
         color: white;
       }
       
@@ -10,7 +10,7 @@
         justify-content: center;
         gap: 16px;
         padding: 10px 20px;
-        background-color: #5c3f31;
+        background-color: #5F4437;
       }
       
       .search-input {
@@ -28,7 +28,7 @@
       
       /* 标签过滤 */
       .tag-filters {
-        background-color: #5c3f31;
+        background-color: #5F4437;
         display: flex;
         justify-content: center;
         flex-wrap: wrap;
@@ -72,7 +72,7 @@
       /* 卡片展示 */
       .seed-list-content {
         padding: 20px;
-        background-color: #5c3f31;
+        background-color: #5F4437;
       }
       
       .seed-list-card {
@@ -233,7 +233,7 @@
         margin-bottom: 12px;
       }
       .friend-moments {
-        background-color: #5c3f31;
+        background-color: #5F4437;
         color: white;
       }
           
\ No newline at end of file
diff --git a/src/pages/UserCenter/UserNav/UserNav.css b/src/pages/UserCenter/UserNav/UserNav.css
index 783fcdc..0c7ed6f 100644
--- a/src/pages/UserCenter/UserNav/UserNav.css
+++ b/src/pages/UserCenter/UserNav/UserNav.css
@@ -1,43 +1,46 @@
 /* 竖直导航栏的容器 */
 .user-nav-container {
-    width: 250px;
-    background-color: #f4f4f4;
-    padding-top: 20px;
-    border-right: 1px solid #ccc;
-    height: 100%; /* 让容器填充整个父容器高度 */
-    display: flex;
-    flex-direction: column;
-    align-items: stretch; /* 确保所有导航项都拉伸 */
-  }
-  
-  /* 导航栏样式 */
-  .user-nav {
-    display: flex;
-    flex-direction: column;
-    padding: 0;
-    margin: 0;
-    flex-grow: 1; /* 使导航栏占据剩余空间 */
-  }
-  
-  /* 每一项导航链接 */
-  .user-nav-item {
-    padding: 15px 20px;
-    text-align: left;
-    text-decoration: none;
-    color: #333;
-    font-size: 16px;
-    border-bottom: 1px solid #e0e0e0;
-    transition: background-color 0.3s ease;
-  }
-  
-  /* 鼠标悬浮时的背景颜色 */
-  .user-nav-item:hover {
-    background-color: #ddd;
-  }
-  
-  /* 激活项的样式 */
-  .user-nav-item.active {
-    background-color: #3b8cff;
-    color: white;
-  }
-  
\ No newline at end of file
+  margin-right: -5%;
+  margin-left: 5%;
+  width: 150px; /* 增加容器宽度 */
+  background-color: #5F4437;
+  padding-top: 20px;
+  height: 100%; /* 让容器填充整个父容器高度 */
+  display: flex;
+  flex-direction: column;
+  align-items: stretch; /* 确保所有导航项都拉伸 */
+}
+
+/* 导航栏样式 */
+.user-nav {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+  flex-grow: 1; /* 使导航栏占据剩余空间 */
+}
+
+/* 每一项导航链接 */
+.user-nav-item {
+  /* padding: 35px 20px; */
+  border-radius: 16px; /* 圆角边框 */
+  padding: 25% 10%;
+  text-decoration: none;
+  color: #ddd;
+  font-size: 16px;
+  /* 删除 border-bottom 属性以移除分隔线 */
+  transition: background-color 0.3s ease;
+  /*文字居中显示*/
+  text-align: center;
+}
+
+/* 鼠标悬浮时的背景颜色 */
+.user-nav-item:hover {
+  background-color: #5a1414;
+}
+
+/* 激活项的样式 */
+.user-nav-item.active {
+  background-color: #BA929A;
+  color: white;
+}    
\ No newline at end of file
diff --git a/src/pages/UserCenter/UserProfile.css b/src/pages/UserCenter/UserProfile.css
index d4d9476..988c1c8 100644
--- a/src/pages/UserCenter/UserProfile.css
+++ b/src/pages/UserCenter/UserProfile.css
@@ -1,13 +1,20 @@
 .user-center {
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 20px;
+  max-width: 100%;
+  padding: 3%;
   font-family: Arial, sans-serif;
+  display: flex;
+  gap: 10%;
+  background-color: #5F4437;
+}
+
+
+.right-content {
+  flex: 3;
 }
 
 .profile-header {
+  margin-top: -20%;
   text-align: center;
-  margin-bottom: 20px;
 }
 
 .avatar {
@@ -23,6 +30,7 @@
 }
 
 .profile-details {
+  margin-top: 20%;
   font-size: 1.2em;
 }
 
@@ -37,4 +45,14 @@
 .error {
   color: red;
   text-align: center;
-}
+}  
+
+.common-card {
+  background-color: #e9ded2;
+  border-radius: 16px;
+  margin: 0 auto;
+  margin-top: 40px;
+  padding: 10% 20%;
+  margin-left: 5%;
+  margin-right: 5%;
+}  
\ No newline at end of file
diff --git a/src/pages/UserCenter/UserProfile.jsx b/src/pages/UserCenter/UserProfile.jsx
index ff9aeff..78701f1 100644
--- a/src/pages/UserCenter/UserProfile.jsx
+++ b/src/pages/UserCenter/UserProfile.jsx
@@ -2,6 +2,7 @@
 import axios from 'axios';
 import './UserProfile.css';
 import UserNav from './UserNav/UserNav'; // 导入 UserNav 组件
+import Header from '../../components/Header';
 
 
 const API_BASE = process.env.REACT_APP_API_BASE;
@@ -47,36 +48,43 @@
   }
 
   return (
+    <div className="user-profile-container">
+      <Header /> {/* 引入 Header 组件 */}
     <div className="user-center">
-        <div className="user-nav-container">
+      <div className="user-nav-container">
         <UserNav /> {/* 引入导航栏 */}
       </div>
-      <div className="profile-header">
-        <img
-          src={userProfile.avatar_url}
-          alt={userProfile.nickname}
-          className="avatar"
-        />
-        <h1>{userProfile.nickname}</h1>
-      </div>
+      <div className="common-card">
+      <div className="right-content">
+        <div className="profile-header">
+          <img
+            src={userProfile.avatar_url}
+            alt={userProfile.nickname}
+            className="avatar"
+          />
+          <h1>{userProfile.nickname}</h1>
+        </div>
 
-      <div className="profile-details">
-        <h2>个人资料</h2>
-        <p><strong>邮箱：</strong>{userProfile.email}</p>
-        <p><strong>性别：</strong>{userProfile.gender}</p>
-        <p><strong>个人简介：</strong>{userProfile.bio}</p>
-        <p><strong>兴趣：</strong>{userProfile.interests.join(', ')}</p>
-        <p><strong>等级：</strong>{userProfile.level}</p>
-        <p><strong>经验：</strong>{userProfile.experience}</p>
-        <p><strong>上传量：</strong>{userProfile.upload_amount}</p>
-        <p><strong>下载量：</strong>{userProfile.download_amount}</p>
-        <p><strong>分享率：</strong>{(userProfile.share_rate * 100).toFixed(2)}%</p>
-        <p><strong>VIP：</strong>{userProfile.is_vip ? '是' : '否'}</p>
-        {userProfile.is_vip && <p><strong>VIP等级：</strong>{userProfile.vip_type}</p>}
-        <p><strong>加入时间：</strong>{new Date(userProfile.joined_date).toLocaleDateString()}</p>
+        <div className="profile-details">
+          {/* <h2>个人资料</h2> */}
+          <p><strong>邮箱：</strong>{userProfile.email}</p>
+          <p><strong>性别：</strong>{userProfile.gender}</p>
+          <p><strong>个人简介：</strong>{userProfile.bio}</p>
+          <p><strong>兴趣：</strong>{userProfile.interests.join(', ')}</p>
+          <p><strong>等级：</strong>{userProfile.level}</p>
+          <p><strong>经验：</strong>{userProfile.experience}</p>
+          <p><strong>上传量：</strong>{userProfile.upload_amount}</p>
+          <p><strong>下载量：</strong>{userProfile.download_amount}</p>
+          <p><strong>分享率：</strong>{(userProfile.share_rate * 100).toFixed(2)}%</p>
+          <p><strong>VIP：</strong>{userProfile.is_vip ? '是' : '否'}</p>
+          {userProfile.is_vip && <p><strong>VIP等级：</strong>{userProfile.vip_type}</p>}
+          <p><strong>加入时间：</strong>{new Date(userProfile.joined_date).toLocaleDateString()}</p>
+        </div>
+      </div>
+      </div>
       </div>
     </div>
   );
 };
 
-export default UserProfile;
+export default UserProfile;