diff --git a/src/pages/Forum/posts-main/ForumPage.css b/src/pages/Forum/posts-main/ForumPage.css
index 5fd64a2..4eb280f 100644
--- a/src/pages/Forum/posts-main/ForumPage.css
+++ b/src/pages/Forum/posts-main/ForumPage.css
@@ -1,8 +1,8 @@
 .forum-page {
-    color: #fff;
+    color: #453228;
     /* background-color: #5F4437; */
     /* background: linear-gradient(180deg, #5F4437, #9c737b); */
-    background: #333;
+    background: #f8f3ef;
     /* background-color: #5F4437; */
     min-height: 100vh;
     font-family: Arial, sans-serif;
@@ -37,20 +37,13 @@
     align-items: center;
   }
   
-  .avatar {
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    margin-right: 10px;
-  }
-  
   .nickname {
     font-weight: bold;
   }
   
-  .cover-image {
-    max-height: 80px;
-    max-width: 120px;
+  .cover {
+    max-height: 320px;
+    max-width: 320px;
     object-fit: cover;
     border-radius: 6px;
   }
diff --git a/src/pages/Forum/posts-main/components/CreatePostButton.css b/src/pages/Forum/posts-main/components/CreatePostButton.css
index 225ddde..c5cc906 100644
--- a/src/pages/Forum/posts-main/components/CreatePostButton.css
+++ b/src/pages/Forum/posts-main/components/CreatePostButton.css
@@ -1,13 +1,18 @@
 .create-post {
   display: flex;
   justify-content: center;
-  margin: 20px 0;
+  margin-top: 3%;
+  margin-bottom: -1%;
 }
 
 .create-btn {
-  background-color: #BA929A;
-  color: white;
-  padding: 10px 20px;
+  /* background-color: #BA929A;
+  color: white; */
+  /* background-color: #e9ded2; */
+  /* 使用浅色背景，符合整体风格 */
+  background: none;
+  color: #5F4437;
+  padding: 7px 15px;
   border-radius: 8px;
   border: none;
   cursor: pointer;
@@ -18,7 +23,24 @@
 }
 
 .create-btn:hover {
-  background-color: #a17b83;
+  background-color: #e9ded2;
+}
+
+.view-btn {
+  background: none;
+  color: #0f5e51;
+  padding: 7px 15px;
+  border-radius: 8px;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  transition: background-color 0.3s ease;
+}
+
+.view-btn:hover {
+  background-color: #e9ded2;
 }
 
 /* Modal 样式 */
diff --git a/src/pages/Forum/posts-main/components/PostList.css b/src/pages/Forum/posts-main/components/PostList.css
index ee4d951..f6d6c2a 100644
--- a/src/pages/Forum/posts-main/components/PostList.css
+++ b/src/pages/Forum/posts-main/components/PostList.css
@@ -5,13 +5,68 @@
     padding: 30px;
   }
   
-.post-actions {
-  justify-content: flex-end; /*靠右对齐*/
+.dianzan-shoucang {
+   /*靠左对齐*/
+   display: flex;
+   justify-content: flex-start;
+   align-items: center;
+   margin-left: -30px;
 }
-  .post-card {
-    background-color: #e9ded2;
-    border: 1px solid #000000;
-    padding: 16px;
-    border-radius: 8px;
-  }
-  
\ No newline at end of file
+.post-card {
+  background-color: #e9ded2;
+  padding: 16px;
+  border-radius: 8px;
+  /* 移除固定高度 */
+  /* height: 230px; */
+  /* 添加阴影效果增强视觉层次感 */
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  /* 添加过渡效果使交互更流畅 */
+  transition: transform 0.2s ease;
+}
+
+/* 鼠标悬停效果 */
+.post-card:hover {
+  transform: translateY(-2px);
+}
+  
+/* 新增：内容包装器，使用flex布局 */
+.post-content-wrapper {
+  display: flex;
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+/* 新增：左侧内容区域 */
+.post-content-left {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* 新增：右侧内容区域 */
+.post-content-right {
+  flex: 0 0 30%; 
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* 调整封面图片样式 */
+.cover {
+  /* max-width: 100%;
+  max-height: 200px; */
+  width: 50%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 8px;
+}
+
+.custom-link {
+  color: #2196F3; /* 浅蓝色 */
+  text-decoration: none; /* 去除下划线 */
+}
+
+.custom-link:hover {
+  text-decoration: underline; /* 鼠标悬停时显示下划线 */
+}
diff --git a/src/pages/Forum/posts-main/components/PostList.jsx b/src/pages/Forum/posts-main/components/PostList.jsx
index d5ff736..cf0a424 100644
--- a/src/pages/Forum/posts-main/components/PostList.jsx
+++ b/src/pages/Forum/posts-main/components/PostList.jsx
@@ -159,45 +159,55 @@
 
               return (
                 <div key={post.postNo} className="post-card" style={{ backgroundColor: '#e9ded2' }}>
+                  {/* 用户信息 */}
                   <div className="user-info">
                     <Link href={`/information/${post.user_id}`}>
                       <img
-                        className="avatar"
+                        style={{ width: '80px', height: '80px', borderRadius: '50%', cursor: 'pointer', border: '4px solid #d2b48c' }}
                         src={post.avatarUrl}
                         alt="头像"
-                        style={{ cursor: 'pointer' }}
                       />
                     </Link>
-                    <span className="nickname" style={{ color: '#755e50' }}>{post.username}</span>
+                    <span className="nickname" style={{ color: '#755e50', marginLeft: '10px', fontSize: '20px' }}>{post.username}</span>
                   </div>
 
-                  {coverImage && <img className="cover-image" src={coverImage} alt="封面" />}
-
-                  <h3 style={{ color: '#000000' }}>{post.title || '无标题'}</h3>
-                  <div className="post-meta">
-                    <span>发布时间：{timeText}</span>
-                    <div className="post-actions">
-                      <button className="icon-btn" onClick={() => toggleLike(post.postNo, post.liked,user.userId
-)}>
-                        <GoodTwo theme="outline" size="24" fill={post.liked ? '#f00' : '#fff'} />
-                        <span>{post.likeCount}</span>
-                      </button>
-                      <button className="icon-btn" onClick={() => toggleCollect(post.postNo, post.collected, user.userId
-)}>
-                        <Star theme="outline" size="24" fill={post.collected ? '#ffd700' : '#fff'} />
-                        <span>{post.collectCount}</span>
-                      </button>
-
-                      {canDelete && (
-                        <button className="icon-btn" onClick={() => handleDeletePost(post.postNo, user.userId
-)}>
-                          <Delete theme="outline" size="24" fill="#333" />
+                  {/* 内容区 - 使用flex布局 */}
+                  <div className="post-content-wrapper">
+                    {/* 左侧内容：标题和元信息 */}
+                    <div className="post-content-left">
+                      <h3 style={{ color: '#000000' }}>{post.title || '无标题'}</h3>
+                      <div className="post-meta">
+                        <span>发布时间：{timeText}</span>
+                      </div>
+                      
+                      {/* 点赞和收藏按钮 - 移至内容下方 */}
+                      <div className="dianzan-shoucang">
+                        <button className="icon-btn" onClick={() => toggleLike(post.postNo, post.liked, user.userId)}>
+                          <GoodTwo theme="outline" size="24" fill={post.liked ? '#f00' : '#fff'} />
+                          <span>{post.likeCount}</span>
                         </button>
-                      )}
+                        <button className="icon-btn" onClick={() => toggleCollect(post.postNo, post.collected, user.userId)}>
+                          <Star theme="outline" size="24" fill={post.collected ? '#ffd700' : '#fff'} />
+                          <span>{post.collectCount}</span>
+                        </button>
+
+                        {canDelete && (
+                          <button className="icon-btn" onClick={() => handleDeletePost(post.postNo, post.user_id)}>
+                            <Delete theme="outline" size="24" fill="#333" />
+                          </button>
+                        )}
+                      </div>
+                      
+                      {/* 查看详情按钮 */}
+                      <div>
+                        <Link href={`/forum/post/${post.postNo}`} className="custom-link">查看详情</Link>
+                      </div>
                     </div>
-                  </div>
-                  <div className="detail-button-wrapper">
-                    <Link href={`/forum/post/${post.postNo}`} className="detail-button">查看详情</Link>
+
+                    {/* 右侧内容：封面图片 */}
+                    <div className="post-content-right">
+                      {coverImage && <img className="cover" src={coverImage} alt="封面" />}
+                    </div>
                   </div>
                 </div>
               );
@@ -213,5 +223,4 @@
   );
 };
 
-export default PostList;
-
+export default PostList;