diff --git a/src/pages/FriendMoments/FriendMoments.css b/src/pages/FriendMoments/FriendMoments.css
index c95bdcf..a69d919 100644
--- a/src/pages/FriendMoments/FriendMoments.css
+++ b/src/pages/FriendMoments/FriendMoments.css
@@ -1,88 +1,171 @@
-/* .friend-moments {
-    background-color: #5F4437;
-    color: white;
-  }
-  .header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 10px;
-  }
-  .logo-and-name {
-    display: flex;
-    align-items: center;
-  }
-  .logo {
-    height: 30px;
-    margin-right: 10px;
-  }
-  .site-name {
-    font-size: 24px;
-  }
-  .user-and-message {
-    display: flex;
-    align-items: center;
-  }
-  .user-avatar {
-    height: 40px;
-    margin-right: 10px;
-  }
-  .message-center {
-    font-size: 16px;
-  }
-  .nav {
-    background-color: #dab8c2;
-    display: flex;
-    justify-content: center;
-  }
-  .nav-item {
-    color: white;
-    text-decoration: none;
-    padding: 10px 20px;
-  }
-  .active {
-    background-color: #996633;
-  }
-  .content {
-    padding: 20px;
-  }
-  .user-post {
-    border-bottom: 1px solid white;
-    margin-bottom: 20px;
-    padding-bottom: 20px;
-  }
-  .user-info {
-    display: flex;
-    align-items: center;
-    margin-bottom: 10px;
-  }
-  .user-avatar-small {
-    height: 30px;
-    margin-right: 10px;
-  }
-  .username {
-    font-size: 16px;
-  }
-  .post-content {
-    margin-bottom: 10px;
-  }
-  .post-actions {
-    display: flex;
-    align-items: center;
-    margin-bottom: 10px;
-  }
-  .like-icon,
-  .comment-icon {
-    margin-right: 5px;
-  }
-  .like-count,
-  .comment-count {
-    margin-left: 5px;
-  }
-  .post-image {
-    float: right;
-    width: 150px;
-    height: 150px;
-    background-color: #ddd;
-    margin-left: 10px;
-  } */
\ No newline at end of file
+.friend-moments-container {
+  margin: 0 auto;
+  background: linear-gradient(180deg, #5F4437, #823c3c);
+  padding-bottom: 40px;
+}
+
+.fm-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 2%;
+}
+
+
+.f-search-bar {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.search-input {
+  padding: 6px 8px;
+  font-size: 14px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.search-btn {
+  padding: 6px 12px;
+  font-size: 14px;
+  cursor: pointer;
+  background: #fff;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.feed-list .feed-item {
+  padding: 1% 1.5%;
+  margin: 1% 2%;
+  border-radius: 6px;
+  /*设置item之间的间隔*/
+  margin-bottom: 2%;
+  background-color: #e9ded2;
+}
+
+.feed-item h4 {
+  margin: 0 0 5px;
+}
+
+.feed-item p {
+  margin: 0 0 10px;
+  line-height: 1.4;
+}
+
+.feed-images {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 10px;
+}
+
+.feed-images img {
+  width: 100px;
+  height: 100px;
+  object-fit: cover;
+  border-radius: 4px;
+  border: 1px solid #ddd;
+}
+
+.feed-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 12px;
+  color: #666;
+}
+
+.delete-btn {
+  background: none;
+  border: none;
+  color: #f44;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+/* Modal 样式 */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal-dialog {
+  background: #e9ded2;
+  padding: 20px;
+  width: 35%;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+/* 标题 */
+.modal-dialog h3 {
+  margin: 0;
+  color : #4A3B34;
+}
+
+.modal-dialog input[type="text"],
+.modal-dialog textarea {
+  width: 97%;
+  padding: 8px;
+  font-size: 14px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.modal-dialog input[type="file"] {
+  width: 97%;
+  font-size: 14px;
+  border-radius: 4px;
+}
+
+.modal-dialog textarea {
+  resize: vertical;
+  min-height: 80px;
+}
+
+.cf-preview {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.cf-preview img {
+  width: 80px;
+  height: 80px;
+  object-fit: cover;
+  border-radius: 4px;
+  border: 1px solid #bbb;
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 10px;
+}
+
+.modal-actions .btn {
+  padding: 6px 12px;
+  font-size: 14px;
+  cursor: pointer;
+  border: none;
+  border-radius: 4px;
+}
+
+.modal-actions .btn.cancel {
+  background: #5F4437;
+}
+
+.modal-actions .btn.submit {
+  background: #BA929A;
+  color: #fff;
+}