diff --git a/backend/community/views.py b/backend/community/views.py
index 445f7b0..2d6ad09 100644
--- a/backend/community/views.py
+++ b/backend/community/views.py
@@ -284,7 +284,7 @@ class TopicViewSet(viewsets.ModelViewSet):
             return Response({'error': '请先登录'}, status=401)
         return super().create(request, *args, **kwargs)
 
-    @action(detail=True, methods=['post'], permission_classes=[permissions.IsAuthenticated])
+    @action(detail=True, methods=['post'], permission_classes=[permissions.AllowAny])
     def like(self, request, pk=None):
         obj = self.get_object()
         user = get_current_wechat_user(request)
@@ -326,7 +326,7 @@ class ReplyViewSet(viewsets.ModelViewSet):
             return Response({'error': '请先登录'}, status=401)
         return super().create(request, *args, **kwargs)
 
-    @action(detail=True, methods=['post'], permission_classes=[permissions.IsAuthenticated])
+    @action(detail=True, methods=['post'], permission_classes=[permissions.AllowAny])
     def like(self, request, pk=None):
         obj = self.get_object()
         user = get_current_wechat_user(request)
diff --git a/miniprogram/src/subpackages/forum/detail/detail.scss b/miniprogram/src/subpackages/forum/detail/detail.scss
index 84b3d31..4704c49 100644
--- a/miniprogram/src/subpackages/forum/detail/detail.scss
+++ b/miniprogram/src/subpackages/forum/detail/detail.scss
@@ -53,6 +53,31 @@
              margin-left: 2px;
           }
         }
+
+        .like-btn {
+          display: flex;
+          align-items: center;
+          margin-left: auto; /* Push to right or keep left */
+          padding: 6px 14px;
+          border-radius: 20px;
+          background-color: rgba(255, 255, 255, 0.08);
+          border: 1px solid rgba(255, 255, 255, 0.05);
+          transition: all 0.3s;
+
+          &.active {
+            background-color: rgba(255, 77, 79, 0.15);
+            border-color: rgba(255, 77, 79, 0.3);
+            
+            text { color: #ff4d4f !important; }
+          }
+
+          text {
+            color: #888;
+            font-size: 14px;
+            margin-left: 6px;
+            font-weight: 600;
+          }
+        }
       }
     }
 
@@ -248,6 +273,46 @@
                 margin-top: 14px;
             }
         }
+
+        .reply-actions {
+            display: flex;
+            align-items: center;
+            margin-top: 12px;
+
+            .reply-like-btn {
+                display: flex;
+                align-items: center;
+                margin-right: 16px;
+                padding: 4px 10px;
+                border-radius: 12px;
+                background-color: rgba(255, 255, 255, 0.03);
+                transition: all 0.3s;
+
+                &.active {
+                    background-color: rgba(255, 77, 79, 0.12);
+                    text { color: #ff4d4f !important; }
+                }
+
+                text {
+                    font-size: 12px;
+                    color: #888;
+                    margin-left: 4px;
+                    font-weight: 500;
+                }
+            }
+
+            .reply-to-btn {
+                margin-right: 16px;
+                padding: 4px 10px;
+                background: rgba(255,255,255,0.05);
+                border-radius: 12px;
+                
+                text {
+                    font-size: 12px;
+                    color: #aaa;
+                }
+            }
+        }
       }
     }
   }
diff --git a/miniprogram/src/subpackages/forum/detail/index.tsx b/miniprogram/src/subpackages/forum/detail/index.tsx
index 61514ae..85453dc 100644
--- a/miniprogram/src/subpackages/forum/detail/index.tsx
+++ b/miniprogram/src/subpackages/forum/detail/index.tsx
@@ -239,9 +239,9 @@ const ForumDetail = () => {
                         <AtIcon value='eye' size='14' color='#666' style={{marginRight: 4}} />
                         <Text>{topic.view_count}</Text>
                     </View>
-                    <View style={{display: 'flex', alignItems: 'center', marginLeft: 20, padding: 8, borderRadius: 12, backgroundColor: topic.is_liked ? '#fff0f0' : '#f5f5f5'}} onClick={handleLikeTopic}>
-                        <AtIcon value={topic.is_liked ? 'heart-2' : 'heart'} size='18' color={topic.is_liked ? '#ff4d4f' : '#666'} style={{marginRight: 4}} />
-                        <Text style={{color: topic.is_liked ? '#ff4d4f' : '#666', fontSize: 14}}>{topic.like_count || 0}</Text>
+                    <View className={`like-btn ${topic.is_liked ? 'active' : ''}`} onClick={handleLikeTopic}>
+                        <AtIcon value={topic.is_liked ? 'heart-2' : 'heart'} size='18' color={topic.is_liked ? '#ff4d4f' : '#888'} />
+                        <Text>{topic.like_count || 0}</Text>
                     </View>
 
                     {userInfo && topic.author === userInfo.id && (
@@ -283,15 +283,15 @@ const ForumDetail = () => {
                              </View>
                              <Text style={{fontSize: 10, color: '#666', marginTop: 2}}>#{idx + 1} • {new Date(reply.created_at).toLocaleDateString()}</Text>
                         </View>
-                        <View style={{display: 'flex', alignItems: 'center'}}>
-                            <View onClick={() => handleLikeReply(reply.id)} style={{marginRight: 15, display: 'flex', alignItems: 'center', padding: '4px 8px', borderRadius: 4, backgroundColor: reply.is_liked ? '#fff0f0' : 'transparent'}}>
-                                <AtIcon value={reply.is_liked ? 'heart-2' : 'heart'} size='16' color={reply.is_liked ? '#ff4d4f' : '#ccc'} />
-                                <Text style={{fontSize: 12, color: reply.is_liked ? '#ff4d4f' : '#999', marginLeft: 4}}>{reply.like_count || 0}</Text>
+                        <View className='reply-actions'>
+                            <View className={`reply-like-btn ${reply.is_liked ? 'active' : ''}`} onClick={() => handleLikeReply(reply.id)}>
+                                <AtIcon value={reply.is_liked ? 'heart-2' : 'heart'} size='14' color={reply.is_liked ? '#ff4d4f' : '#888'} />
+                                <Text>{reply.like_count || 0}</Text>
                             </View>
-                            <View onClick={() => handleReplyToUser(reply.author_info?.nickname)} style={{marginRight: 10, padding: '2px 6px', background: '#f0f0f0', borderRadius: 4}}>
-                                <Text style={{fontSize: 10, color: '#666'}}>回复</Text>
+                            <View className='reply-to-btn' onClick={() => handleReplyToUser(reply.author_info?.nickname)}>
+                                <Text>回复</Text>
                             </View>
-                            <AtIcon value='message' size='14' color='#444' />
+                            <AtIcon value='message' size='14' color='#666' />
                         </View>
                     </View>
                     <View className='reply-content'>