diff --git a/.gitignore b/.gitignore
index 91cb9c662..d87d478a5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,4 +2,5 @@
 target
 openisle.iml
 node_modules
-dist
\ No newline at end of file
+dist
+open-isle.env
\ No newline at end of file
diff --git a/pom.xml b/backend/pom.xml
similarity index 100%
rename from pom.xml
rename to backend/pom.xml
diff --git a/src/main/java/com/openisle/OpenIsleApplication.java b/backend/src/main/java/com/openisle/OpenIsleApplication.java
similarity index 100%
rename from src/main/java/com/openisle/OpenIsleApplication.java
rename to backend/src/main/java/com/openisle/OpenIsleApplication.java
diff --git a/src/main/java/com/openisle/config/ActivityInitializer.java b/backend/src/main/java/com/openisle/config/ActivityInitializer.java
similarity index 100%
rename from src/main/java/com/openisle/config/ActivityInitializer.java
rename to backend/src/main/java/com/openisle/config/ActivityInitializer.java
diff --git a/src/main/java/com/openisle/config/AsyncConfig.java b/backend/src/main/java/com/openisle/config/AsyncConfig.java
similarity index 100%
rename from src/main/java/com/openisle/config/AsyncConfig.java
rename to backend/src/main/java/com/openisle/config/AsyncConfig.java
diff --git a/src/main/java/com/openisle/config/CustomAccessDeniedHandler.java b/backend/src/main/java/com/openisle/config/CustomAccessDeniedHandler.java
similarity index 100%
rename from src/main/java/com/openisle/config/CustomAccessDeniedHandler.java
rename to backend/src/main/java/com/openisle/config/CustomAccessDeniedHandler.java
diff --git a/src/main/java/com/openisle/config/SecurityConfig.java b/backend/src/main/java/com/openisle/config/SecurityConfig.java
similarity index 99%
rename from src/main/java/com/openisle/config/SecurityConfig.java
rename to backend/src/main/java/com/openisle/config/SecurityConfig.java
index 1341ecab7..0f8f1bf75 100644
--- a/src/main/java/com/openisle/config/SecurityConfig.java
+++ b/backend/src/main/java/com/openisle/config/SecurityConfig.java
@@ -79,6 +79,8 @@ public class SecurityConfig {
                 "http://localhost",
                 "http://30.211.97.254:8080",
                 "http://30.211.97.254",
+                "http://192.168.7.70",
+                "http://192.168.7.70:8080",
                 websiteUrl,
                 websiteUrl.replace("://www.", "://")
         ));
diff --git a/src/main/java/com/openisle/controller/ActivityController.java b/backend/src/main/java/com/openisle/controller/ActivityController.java
similarity index 100%
rename from src/main/java/com/openisle/controller/ActivityController.java
rename to backend/src/main/java/com/openisle/controller/ActivityController.java
diff --git a/src/main/java/com/openisle/controller/AdminConfigController.java b/backend/src/main/java/com/openisle/controller/AdminConfigController.java
similarity index 100%
rename from src/main/java/com/openisle/controller/AdminConfigController.java
rename to backend/src/main/java/com/openisle/controller/AdminConfigController.java
diff --git a/src/main/java/com/openisle/controller/AdminController.java b/backend/src/main/java/com/openisle/controller/AdminController.java
similarity index 100%
rename from src/main/java/com/openisle/controller/AdminController.java
rename to backend/src/main/java/com/openisle/controller/AdminController.java
diff --git a/src/main/java/com/openisle/controller/AdminPostController.java b/backend/src/main/java/com/openisle/controller/AdminPostController.java
similarity index 100%
rename from src/main/java/com/openisle/controller/AdminPostController.java
rename to backend/src/main/java/com/openisle/controller/AdminPostController.java
diff --git a/src/main/java/com/openisle/controller/AdminTagController.java b/backend/src/main/java/com/openisle/controller/AdminTagController.java
similarity index 100%
rename from src/main/java/com/openisle/controller/AdminTagController.java
rename to backend/src/main/java/com/openisle/controller/AdminTagController.java
diff --git a/src/main/java/com/openisle/controller/AdminUserController.java b/backend/src/main/java/com/openisle/controller/AdminUserController.java
similarity index 100%
rename from src/main/java/com/openisle/controller/AdminUserController.java
rename to backend/src/main/java/com/openisle/controller/AdminUserController.java
diff --git a/src/main/java/com/openisle/controller/AiController.java b/backend/src/main/java/com/openisle/controller/AiController.java
similarity index 100%
rename from src/main/java/com/openisle/controller/AiController.java
rename to backend/src/main/java/com/openisle/controller/AiController.java
diff --git a/src/main/java/com/openisle/controller/AuthController.java b/backend/src/main/java/com/openisle/controller/AuthController.java
similarity index 100%
rename from src/main/java/com/openisle/controller/AuthController.java
rename to backend/src/main/java/com/openisle/controller/AuthController.java
diff --git a/src/main/java/com/openisle/controller/CategoryController.java b/backend/src/main/java/com/openisle/controller/CategoryController.java
similarity index 100%
rename from src/main/java/com/openisle/controller/CategoryController.java
rename to backend/src/main/java/com/openisle/controller/CategoryController.java
diff --git a/src/main/java/com/openisle/controller/CommentController.java b/backend/src/main/java/com/openisle/controller/CommentController.java
similarity index 79%
rename from src/main/java/com/openisle/controller/CommentController.java
rename to backend/src/main/java/com/openisle/controller/CommentController.java
index b6dccfdfd..2de863617 100644
--- a/src/main/java/com/openisle/controller/CommentController.java
+++ b/backend/src/main/java/com/openisle/controller/CommentController.java
@@ -4,6 +4,7 @@ import com.openisle.model.Comment;
 import com.openisle.service.CommentService;
 import com.openisle.service.CaptchaService;
 import com.openisle.service.LevelService;
+import com.openisle.service.ReactionService;
 import com.openisle.model.CommentSort;
 import lombok.Data;
 import lombok.RequiredArgsConstructor;
@@ -23,6 +24,7 @@ public class CommentController {
     private final CommentService commentService;
     private final LevelService levelService;
     private final CaptchaService captchaService;
+    private final ReactionService reactionService;
 
     @Value("${app.captcha.enabled:false}")
     private boolean captchaEnabled;
@@ -70,6 +72,10 @@ public class CommentController {
                 .map(this::toDtoWithReplies)
                 .collect(Collectors.toList());
         dto.setReplies(replies);
+        List<ReactionDto> reactions = reactionService.getReactionsForComment(comment.getId()).stream()
+                .map(this::toReactionDto)
+                .collect(Collectors.toList());
+        dto.setReactions(reactions);
         return dto;
     }
 
@@ -109,6 +115,7 @@ public class CommentController {
         private LocalDateTime createdAt;
         private AuthorDto author;
         private List<CommentDto> replies;
+        private List<ReactionDto> reactions;
         private int reward;
     }
 
@@ -118,4 +125,29 @@ public class CommentController {
         private String username;
         private String avatar;
     }
+
+    private ReactionDto toReactionDto(com.openisle.model.Reaction reaction) {
+        ReactionDto dto = new ReactionDto();
+        dto.setId(reaction.getId());
+        dto.setType(reaction.getType());
+        dto.setUser(reaction.getUser().getUsername());
+        if (reaction.getPost() != null) {
+            dto.setPostId(reaction.getPost().getId());
+        }
+        if (reaction.getComment() != null) {
+            dto.setCommentId(reaction.getComment().getId());
+        }
+        dto.setReward(0);
+        return dto;
+    }
+
+    @Data
+    private static class ReactionDto {
+        private Long id;
+        private com.openisle.model.ReactionType type;
+        private String user;
+        private Long postId;
+        private Long commentId;
+        private int reward;
+    }
 }
diff --git a/src/main/java/com/openisle/controller/ConfigController.java b/backend/src/main/java/com/openisle/controller/ConfigController.java
similarity index 100%
rename from src/main/java/com/openisle/controller/ConfigController.java
rename to backend/src/main/java/com/openisle/controller/ConfigController.java
diff --git a/src/main/java/com/openisle/controller/DraftController.java b/backend/src/main/java/com/openisle/controller/DraftController.java
similarity index 100%
rename from src/main/java/com/openisle/controller/DraftController.java
rename to backend/src/main/java/com/openisle/controller/DraftController.java
diff --git a/src/main/java/com/openisle/controller/GlobalExceptionHandler.java b/backend/src/main/java/com/openisle/controller/GlobalExceptionHandler.java
similarity index 100%
rename from src/main/java/com/openisle/controller/GlobalExceptionHandler.java
rename to backend/src/main/java/com/openisle/controller/GlobalExceptionHandler.java
diff --git a/src/main/java/com/openisle/controller/HelloController.java b/backend/src/main/java/com/openisle/controller/HelloController.java
similarity index 100%
rename from src/main/java/com/openisle/controller/HelloController.java
rename to backend/src/main/java/com/openisle/controller/HelloController.java
diff --git a/src/main/java/com/openisle/controller/NotificationController.java b/backend/src/main/java/com/openisle/controller/NotificationController.java
similarity index 100%
rename from src/main/java/com/openisle/controller/NotificationController.java
rename to backend/src/main/java/com/openisle/controller/NotificationController.java
diff --git a/src/main/java/com/openisle/controller/PostController.java b/backend/src/main/java/com/openisle/controller/PostController.java
similarity index 100%
rename from src/main/java/com/openisle/controller/PostController.java
rename to backend/src/main/java/com/openisle/controller/PostController.java
diff --git a/src/main/java/com/openisle/controller/PushSubscriptionController.java b/backend/src/main/java/com/openisle/controller/PushSubscriptionController.java
similarity index 100%
rename from src/main/java/com/openisle/controller/PushSubscriptionController.java
rename to backend/src/main/java/com/openisle/controller/PushSubscriptionController.java
diff --git a/src/main/java/com/openisle/controller/ReactionController.java b/backend/src/main/java/com/openisle/controller/ReactionController.java
similarity index 98%
rename from src/main/java/com/openisle/controller/ReactionController.java
rename to backend/src/main/java/com/openisle/controller/ReactionController.java
index c762486ab..062fe313a 100644
--- a/src/main/java/com/openisle/controller/ReactionController.java
+++ b/backend/src/main/java/com/openisle/controller/ReactionController.java
@@ -4,6 +4,7 @@ import com.openisle.model.Reaction;
 import com.openisle.model.ReactionType;
 import com.openisle.service.ReactionService;
 import com.openisle.service.LevelService;
+import jakarta.transaction.Transactional;
 import lombok.Data;
 import lombok.RequiredArgsConstructor;
 import org.springframework.http.ResponseEntity;
diff --git a/src/main/java/com/openisle/controller/SearchController.java b/backend/src/main/java/com/openisle/controller/SearchController.java
similarity index 100%
rename from src/main/java/com/openisle/controller/SearchController.java
rename to backend/src/main/java/com/openisle/controller/SearchController.java
diff --git a/src/main/java/com/openisle/controller/SitemapController.java b/backend/src/main/java/com/openisle/controller/SitemapController.java
similarity index 100%
rename from src/main/java/com/openisle/controller/SitemapController.java
rename to backend/src/main/java/com/openisle/controller/SitemapController.java
diff --git a/src/main/java/com/openisle/controller/StatController.java b/backend/src/main/java/com/openisle/controller/StatController.java
similarity index 100%
rename from src/main/java/com/openisle/controller/StatController.java
rename to backend/src/main/java/com/openisle/controller/StatController.java
diff --git a/src/main/java/com/openisle/controller/SubscriptionController.java b/backend/src/main/java/com/openisle/controller/SubscriptionController.java
similarity index 100%
rename from src/main/java/com/openisle/controller/SubscriptionController.java
rename to backend/src/main/java/com/openisle/controller/SubscriptionController.java
diff --git a/src/main/java/com/openisle/controller/TagController.java b/backend/src/main/java/com/openisle/controller/TagController.java
similarity index 100%
rename from src/main/java/com/openisle/controller/TagController.java
rename to backend/src/main/java/com/openisle/controller/TagController.java
diff --git a/src/main/java/com/openisle/controller/UploadController.java b/backend/src/main/java/com/openisle/controller/UploadController.java
similarity index 100%
rename from src/main/java/com/openisle/controller/UploadController.java
rename to backend/src/main/java/com/openisle/controller/UploadController.java
diff --git a/src/main/java/com/openisle/controller/UserController.java b/backend/src/main/java/com/openisle/controller/UserController.java
similarity index 100%
rename from src/main/java/com/openisle/controller/UserController.java
rename to backend/src/main/java/com/openisle/controller/UserController.java
diff --git a/src/main/java/com/openisle/exception/FieldException.java b/backend/src/main/java/com/openisle/exception/FieldException.java
similarity index 100%
rename from src/main/java/com/openisle/exception/FieldException.java
rename to backend/src/main/java/com/openisle/exception/FieldException.java
diff --git a/src/main/java/com/openisle/exception/NotFoundException.java b/backend/src/main/java/com/openisle/exception/NotFoundException.java
similarity index 100%
rename from src/main/java/com/openisle/exception/NotFoundException.java
rename to backend/src/main/java/com/openisle/exception/NotFoundException.java
diff --git a/src/main/java/com/openisle/exception/RateLimitException.java b/backend/src/main/java/com/openisle/exception/RateLimitException.java
similarity index 100%
rename from src/main/java/com/openisle/exception/RateLimitException.java
rename to backend/src/main/java/com/openisle/exception/RateLimitException.java
diff --git a/src/main/java/com/openisle/model/Activity.java b/backend/src/main/java/com/openisle/model/Activity.java
similarity index 100%
rename from src/main/java/com/openisle/model/Activity.java
rename to backend/src/main/java/com/openisle/model/Activity.java
diff --git a/src/main/java/com/openisle/model/ActivityType.java b/backend/src/main/java/com/openisle/model/ActivityType.java
similarity index 100%
rename from src/main/java/com/openisle/model/ActivityType.java
rename to backend/src/main/java/com/openisle/model/ActivityType.java
diff --git a/src/main/java/com/openisle/model/AiFormatUsage.java b/backend/src/main/java/com/openisle/model/AiFormatUsage.java
similarity index 100%
rename from src/main/java/com/openisle/model/AiFormatUsage.java
rename to backend/src/main/java/com/openisle/model/AiFormatUsage.java
diff --git a/src/main/java/com/openisle/model/Category.java b/backend/src/main/java/com/openisle/model/Category.java
similarity index 100%
rename from src/main/java/com/openisle/model/Category.java
rename to backend/src/main/java/com/openisle/model/Category.java
diff --git a/src/main/java/com/openisle/model/Comment.java b/backend/src/main/java/com/openisle/model/Comment.java
similarity index 100%
rename from src/main/java/com/openisle/model/Comment.java
rename to backend/src/main/java/com/openisle/model/Comment.java
diff --git a/src/main/java/com/openisle/model/CommentSort.java b/backend/src/main/java/com/openisle/model/CommentSort.java
similarity index 100%
rename from src/main/java/com/openisle/model/CommentSort.java
rename to backend/src/main/java/com/openisle/model/CommentSort.java
diff --git a/src/main/java/com/openisle/model/CommentSubscription.java b/backend/src/main/java/com/openisle/model/CommentSubscription.java
similarity index 100%
rename from src/main/java/com/openisle/model/CommentSubscription.java
rename to backend/src/main/java/com/openisle/model/CommentSubscription.java
diff --git a/src/main/java/com/openisle/model/Draft.java b/backend/src/main/java/com/openisle/model/Draft.java
similarity index 100%
rename from src/main/java/com/openisle/model/Draft.java
rename to backend/src/main/java/com/openisle/model/Draft.java
diff --git a/src/main/java/com/openisle/model/ExperienceLog.java b/backend/src/main/java/com/openisle/model/ExperienceLog.java
similarity index 100%
rename from src/main/java/com/openisle/model/ExperienceLog.java
rename to backend/src/main/java/com/openisle/model/ExperienceLog.java
diff --git a/src/main/java/com/openisle/model/Image.java b/backend/src/main/java/com/openisle/model/Image.java
similarity index 100%
rename from src/main/java/com/openisle/model/Image.java
rename to backend/src/main/java/com/openisle/model/Image.java
diff --git a/src/main/java/com/openisle/model/Notification.java b/backend/src/main/java/com/openisle/model/Notification.java
similarity index 100%
rename from src/main/java/com/openisle/model/Notification.java
rename to backend/src/main/java/com/openisle/model/Notification.java
diff --git a/src/main/java/com/openisle/model/NotificationType.java b/backend/src/main/java/com/openisle/model/NotificationType.java
similarity index 100%
rename from src/main/java/com/openisle/model/NotificationType.java
rename to backend/src/main/java/com/openisle/model/NotificationType.java
diff --git a/src/main/java/com/openisle/model/PasswordStrength.java b/backend/src/main/java/com/openisle/model/PasswordStrength.java
similarity index 100%
rename from src/main/java/com/openisle/model/PasswordStrength.java
rename to backend/src/main/java/com/openisle/model/PasswordStrength.java
diff --git a/src/main/java/com/openisle/model/Post.java b/backend/src/main/java/com/openisle/model/Post.java
similarity index 100%
rename from src/main/java/com/openisle/model/Post.java
rename to backend/src/main/java/com/openisle/model/Post.java
diff --git a/src/main/java/com/openisle/model/PostRead.java b/backend/src/main/java/com/openisle/model/PostRead.java
similarity index 100%
rename from src/main/java/com/openisle/model/PostRead.java
rename to backend/src/main/java/com/openisle/model/PostRead.java
diff --git a/src/main/java/com/openisle/model/PostStatus.java b/backend/src/main/java/com/openisle/model/PostStatus.java
similarity index 100%
rename from src/main/java/com/openisle/model/PostStatus.java
rename to backend/src/main/java/com/openisle/model/PostStatus.java
diff --git a/src/main/java/com/openisle/model/PostSubscription.java b/backend/src/main/java/com/openisle/model/PostSubscription.java
similarity index 100%
rename from src/main/java/com/openisle/model/PostSubscription.java
rename to backend/src/main/java/com/openisle/model/PostSubscription.java
diff --git a/src/main/java/com/openisle/model/PublishMode.java b/backend/src/main/java/com/openisle/model/PublishMode.java
similarity index 100%
rename from src/main/java/com/openisle/model/PublishMode.java
rename to backend/src/main/java/com/openisle/model/PublishMode.java
diff --git a/src/main/java/com/openisle/model/PushSubscription.java b/backend/src/main/java/com/openisle/model/PushSubscription.java
similarity index 100%
rename from src/main/java/com/openisle/model/PushSubscription.java
rename to backend/src/main/java/com/openisle/model/PushSubscription.java
diff --git a/src/main/java/com/openisle/model/Reaction.java b/backend/src/main/java/com/openisle/model/Reaction.java
similarity index 100%
rename from src/main/java/com/openisle/model/Reaction.java
rename to backend/src/main/java/com/openisle/model/Reaction.java
diff --git a/src/main/java/com/openisle/model/ReactionType.java b/backend/src/main/java/com/openisle/model/ReactionType.java
similarity index 68%
rename from src/main/java/com/openisle/model/ReactionType.java
rename to backend/src/main/java/com/openisle/model/ReactionType.java
index 34ab2c1af..b7811a499 100644
--- a/src/main/java/com/openisle/model/ReactionType.java
+++ b/backend/src/main/java/com/openisle/model/ReactionType.java
@@ -15,5 +15,16 @@ public enum ReactionType {
     MIND_BLOWN,
     POOP,
     CLOWN,
-    SKULL
+    SKULL,
+    FIRE,
+    EYES,
+    FROWN,
+    HOT,
+    EAGLE,
+    SPIDER,
+    BAT,
+    CHINA,
+    USA,
+    JAPAN,
+    KOREA
 }
diff --git a/src/main/java/com/openisle/model/RegisterMode.java b/backend/src/main/java/com/openisle/model/RegisterMode.java
similarity index 100%
rename from src/main/java/com/openisle/model/RegisterMode.java
rename to backend/src/main/java/com/openisle/model/RegisterMode.java
diff --git a/src/main/java/com/openisle/model/Role.java b/backend/src/main/java/com/openisle/model/Role.java
similarity index 100%
rename from src/main/java/com/openisle/model/Role.java
rename to backend/src/main/java/com/openisle/model/Role.java
diff --git a/src/main/java/com/openisle/model/Tag.java b/backend/src/main/java/com/openisle/model/Tag.java
similarity index 100%
rename from src/main/java/com/openisle/model/Tag.java
rename to backend/src/main/java/com/openisle/model/Tag.java
diff --git a/src/main/java/com/openisle/model/User.java b/backend/src/main/java/com/openisle/model/User.java
similarity index 100%
rename from src/main/java/com/openisle/model/User.java
rename to backend/src/main/java/com/openisle/model/User.java
diff --git a/src/main/java/com/openisle/model/UserSubscription.java b/backend/src/main/java/com/openisle/model/UserSubscription.java
similarity index 100%
rename from src/main/java/com/openisle/model/UserSubscription.java
rename to backend/src/main/java/com/openisle/model/UserSubscription.java
diff --git a/src/main/java/com/openisle/model/UserVisit.java b/backend/src/main/java/com/openisle/model/UserVisit.java
similarity index 100%
rename from src/main/java/com/openisle/model/UserVisit.java
rename to backend/src/main/java/com/openisle/model/UserVisit.java
diff --git a/src/main/java/com/openisle/repository/ActivityRepository.java b/backend/src/main/java/com/openisle/repository/ActivityRepository.java
similarity index 100%
rename from src/main/java/com/openisle/repository/ActivityRepository.java
rename to backend/src/main/java/com/openisle/repository/ActivityRepository.java
diff --git a/src/main/java/com/openisle/repository/AiFormatUsageRepository.java b/backend/src/main/java/com/openisle/repository/AiFormatUsageRepository.java
similarity index 100%
rename from src/main/java/com/openisle/repository/AiFormatUsageRepository.java
rename to backend/src/main/java/com/openisle/repository/AiFormatUsageRepository.java
diff --git a/src/main/java/com/openisle/repository/CategoryRepository.java b/backend/src/main/java/com/openisle/repository/CategoryRepository.java
similarity index 100%
rename from src/main/java/com/openisle/repository/CategoryRepository.java
rename to backend/src/main/java/com/openisle/repository/CategoryRepository.java
diff --git a/src/main/java/com/openisle/repository/CommentRepository.java b/backend/src/main/java/com/openisle/repository/CommentRepository.java
similarity index 100%
rename from src/main/java/com/openisle/repository/CommentRepository.java
rename to backend/src/main/java/com/openisle/repository/CommentRepository.java
diff --git a/src/main/java/com/openisle/repository/CommentSubscriptionRepository.java b/backend/src/main/java/com/openisle/repository/CommentSubscriptionRepository.java
similarity index 100%
rename from src/main/java/com/openisle/repository/CommentSubscriptionRepository.java
rename to backend/src/main/java/com/openisle/repository/CommentSubscriptionRepository.java
diff --git a/src/main/java/com/openisle/repository/DraftRepository.java b/backend/src/main/java/com/openisle/repository/DraftRepository.java
similarity index 100%
rename from src/main/java/com/openisle/repository/DraftRepository.java
rename to backend/src/main/java/com/openisle/repository/DraftRepository.java
diff --git a/src/main/java/com/openisle/repository/ExperienceLogRepository.java b/backend/src/main/java/com/openisle/repository/ExperienceLogRepository.java
similarity index 100%
rename from src/main/java/com/openisle/repository/ExperienceLogRepository.java
rename to backend/src/main/java/com/openisle/repository/ExperienceLogRepository.java
diff --git a/src/main/java/com/openisle/repository/ImageRepository.java b/backend/src/main/java/com/openisle/repository/ImageRepository.java
similarity index 100%
rename from src/main/java/com/openisle/repository/ImageRepository.java
rename to backend/src/main/java/com/openisle/repository/ImageRepository.java
diff --git a/src/main/java/com/openisle/repository/NotificationRepository.java b/backend/src/main/java/com/openisle/repository/NotificationRepository.java
similarity index 89%
rename from src/main/java/com/openisle/repository/NotificationRepository.java
rename to backend/src/main/java/com/openisle/repository/NotificationRepository.java
index f0d538c49..0cbec0d60 100644
--- a/src/main/java/com/openisle/repository/NotificationRepository.java
+++ b/backend/src/main/java/com/openisle/repository/NotificationRepository.java
@@ -18,4 +18,6 @@ public interface NotificationRepository extends JpaRepository<Notification, Long
     List<Notification> findByComment(Comment comment);
 
     void deleteByTypeAndFromUser(NotificationType type, User fromUser);
+
+    void deleteByTypeAndFromUserAndPost(NotificationType type, User fromUser, Post post);
 }
diff --git a/src/main/java/com/openisle/repository/PostReadRepository.java b/backend/src/main/java/com/openisle/repository/PostReadRepository.java
similarity index 100%
rename from src/main/java/com/openisle/repository/PostReadRepository.java
rename to backend/src/main/java/com/openisle/repository/PostReadRepository.java
diff --git a/src/main/java/com/openisle/repository/PostRepository.java b/backend/src/main/java/com/openisle/repository/PostRepository.java
similarity index 100%
rename from src/main/java/com/openisle/repository/PostRepository.java
rename to backend/src/main/java/com/openisle/repository/PostRepository.java
diff --git a/src/main/java/com/openisle/repository/PostSubscriptionRepository.java b/backend/src/main/java/com/openisle/repository/PostSubscriptionRepository.java
similarity index 100%
rename from src/main/java/com/openisle/repository/PostSubscriptionRepository.java
rename to backend/src/main/java/com/openisle/repository/PostSubscriptionRepository.java
diff --git a/src/main/java/com/openisle/repository/PushSubscriptionRepository.java b/backend/src/main/java/com/openisle/repository/PushSubscriptionRepository.java
similarity index 100%
rename from src/main/java/com/openisle/repository/PushSubscriptionRepository.java
rename to backend/src/main/java/com/openisle/repository/PushSubscriptionRepository.java
diff --git a/src/main/java/com/openisle/repository/ReactionRepository.java b/backend/src/main/java/com/openisle/repository/ReactionRepository.java
similarity index 72%
rename from src/main/java/com/openisle/repository/ReactionRepository.java
rename to backend/src/main/java/com/openisle/repository/ReactionRepository.java
index 047742120..e66c1f568 100644
--- a/src/main/java/com/openisle/repository/ReactionRepository.java
+++ b/backend/src/main/java/com/openisle/repository/ReactionRepository.java
@@ -30,9 +30,27 @@ public interface ReactionRepository extends JpaRepository<Reaction, Long> {
     @Query("SELECT COUNT(r) FROM Reaction r WHERE r.user.username = :username AND r.createdAt >= :start")
     long countByUserAfter(@Param("username") String username, @Param("start") java.time.LocalDateTime start);
 
-    @Query("SELECT COUNT(r) FROM Reaction r WHERE r.type = com.openisle.model.ReactionType.LIKE AND ((r.post IS NOT NULL AND r.post.author.username = :username) OR (r.comment IS NOT NULL AND r.comment.author.username = :username))")
+    @Query("""
+            SELECT COUNT(DISTINCT r.id)
+            FROM Reaction r
+            LEFT JOIN r.post    p
+            LEFT JOIN p.author  pa
+            LEFT JOIN r.comment c
+            LEFT JOIN c.author  ca
+            WHERE r.type = com.openisle.model.ReactionType.LIKE
+              AND (
+                   (r.post    IS NOT NULL AND pa.username = :username)
+                OR (r.comment IS NOT NULL AND ca.username = :username)
+              )
+            """)
     long countLikesReceived(@Param("username") String username);
 
-    @Query("SELECT COUNT(r) FROM Reaction r WHERE (r.post IS NOT NULL AND r.post.author.username = :username) OR (r.comment IS NOT NULL AND r.comment.author.username = :username)")
+    @Query("""
+            SELECT COUNT(r) FROM Reaction r
+            LEFT JOIN r.post p
+            LEFT JOIN r.comment c
+            WHERE (p IS NOT NULL AND p.author.username = :username) OR
+                  (c IS NOT NULL AND c.author.username = :username)
+            """)
     long countReceived(@Param("username") String username);
 }
diff --git a/src/main/java/com/openisle/repository/TagRepository.java b/backend/src/main/java/com/openisle/repository/TagRepository.java
similarity index 100%
rename from src/main/java/com/openisle/repository/TagRepository.java
rename to backend/src/main/java/com/openisle/repository/TagRepository.java
diff --git a/src/main/java/com/openisle/repository/UserRepository.java b/backend/src/main/java/com/openisle/repository/UserRepository.java
similarity index 100%
rename from src/main/java/com/openisle/repository/UserRepository.java
rename to backend/src/main/java/com/openisle/repository/UserRepository.java
diff --git a/src/main/java/com/openisle/repository/UserSubscriptionRepository.java b/backend/src/main/java/com/openisle/repository/UserSubscriptionRepository.java
similarity index 100%
rename from src/main/java/com/openisle/repository/UserSubscriptionRepository.java
rename to backend/src/main/java/com/openisle/repository/UserSubscriptionRepository.java
diff --git a/src/main/java/com/openisle/repository/UserVisitRepository.java b/backend/src/main/java/com/openisle/repository/UserVisitRepository.java
similarity index 100%
rename from src/main/java/com/openisle/repository/UserVisitRepository.java
rename to backend/src/main/java/com/openisle/repository/UserVisitRepository.java
diff --git a/src/main/java/com/openisle/service/ActivityService.java b/backend/src/main/java/com/openisle/service/ActivityService.java
similarity index 100%
rename from src/main/java/com/openisle/service/ActivityService.java
rename to backend/src/main/java/com/openisle/service/ActivityService.java
diff --git a/src/main/java/com/openisle/service/AiUsageService.java b/backend/src/main/java/com/openisle/service/AiUsageService.java
similarity index 100%
rename from src/main/java/com/openisle/service/AiUsageService.java
rename to backend/src/main/java/com/openisle/service/AiUsageService.java
diff --git a/src/main/java/com/openisle/service/AvatarGenerator.java b/backend/src/main/java/com/openisle/service/AvatarGenerator.java
similarity index 100%
rename from src/main/java/com/openisle/service/AvatarGenerator.java
rename to backend/src/main/java/com/openisle/service/AvatarGenerator.java
diff --git a/src/main/java/com/openisle/service/CaptchaService.java b/backend/src/main/java/com/openisle/service/CaptchaService.java
similarity index 100%
rename from src/main/java/com/openisle/service/CaptchaService.java
rename to backend/src/main/java/com/openisle/service/CaptchaService.java
diff --git a/src/main/java/com/openisle/service/CategoryService.java b/backend/src/main/java/com/openisle/service/CategoryService.java
similarity index 100%
rename from src/main/java/com/openisle/service/CategoryService.java
rename to backend/src/main/java/com/openisle/service/CategoryService.java
diff --git a/src/main/java/com/openisle/service/CommentService.java b/backend/src/main/java/com/openisle/service/CommentService.java
similarity index 98%
rename from src/main/java/com/openisle/service/CommentService.java
rename to backend/src/main/java/com/openisle/service/CommentService.java
index ce74c7d75..70eb764f6 100644
--- a/src/main/java/com/openisle/service/CommentService.java
+++ b/backend/src/main/java/com/openisle/service/CommentService.java
@@ -21,6 +21,7 @@ import org.springframework.stereotype.Service;
 import java.util.List;
 import org.springframework.data.domain.PageRequest;
 import org.springframework.data.domain.Pageable;
+import org.springframework.transaction.annotation.Transactional;
 
 @Service
 @RequiredArgsConstructor
@@ -35,6 +36,7 @@ public class CommentService {
     private final NotificationRepository notificationRepository;
     private final ImageUploader imageUploader;
 
+    @Transactional
     public Comment addComment(String username, Long postId, String content) {
         long recent = commentRepository.countByAuthorAfter(username,
                 java.time.LocalDateTime.now().minusMinutes(1));
@@ -68,6 +70,7 @@ public class CommentService {
         return comment;
     }
 
+    @Transactional
     public Comment addReply(String username, Long parentId, String content) {
         long recent = commentRepository.countByAuthorAfter(username,
                 java.time.LocalDateTime.now().minusMinutes(1));
@@ -152,7 +155,7 @@ public class CommentService {
         return commentRepository.findLastCommentTime(post);
     }
 
-    @org.springframework.transaction.annotation.Transactional
+    @Transactional
     public void deleteComment(String username, Long id) {
         User user = userRepository.findByUsername(username)
                 .orElseThrow(() -> new com.openisle.exception.NotFoundException("User not found"));
@@ -164,7 +167,7 @@ public class CommentService {
         deleteCommentCascade(comment);
     }
 
-    @org.springframework.transaction.annotation.Transactional
+    @Transactional
     public void deleteCommentCascade(Comment comment) {
         List<Comment> replies = commentRepository.findByParentOrderByCreatedAtAsc(comment);
         for (Comment c : replies) {
diff --git a/src/main/java/com/openisle/service/CosImageUploader.java b/backend/src/main/java/com/openisle/service/CosImageUploader.java
similarity index 100%
rename from src/main/java/com/openisle/service/CosImageUploader.java
rename to backend/src/main/java/com/openisle/service/CosImageUploader.java
diff --git a/src/main/java/com/openisle/service/DiscordAuthService.java b/backend/src/main/java/com/openisle/service/DiscordAuthService.java
similarity index 100%
rename from src/main/java/com/openisle/service/DiscordAuthService.java
rename to backend/src/main/java/com/openisle/service/DiscordAuthService.java
diff --git a/src/main/java/com/openisle/service/DraftService.java b/backend/src/main/java/com/openisle/service/DraftService.java
similarity index 100%
rename from src/main/java/com/openisle/service/DraftService.java
rename to backend/src/main/java/com/openisle/service/DraftService.java
diff --git a/src/main/java/com/openisle/service/EmailSender.java b/backend/src/main/java/com/openisle/service/EmailSender.java
similarity index 100%
rename from src/main/java/com/openisle/service/EmailSender.java
rename to backend/src/main/java/com/openisle/service/EmailSender.java
diff --git a/src/main/java/com/openisle/service/GithubAuthService.java b/backend/src/main/java/com/openisle/service/GithubAuthService.java
similarity index 100%
rename from src/main/java/com/openisle/service/GithubAuthService.java
rename to backend/src/main/java/com/openisle/service/GithubAuthService.java
diff --git a/src/main/java/com/openisle/service/GoogleAuthService.java b/backend/src/main/java/com/openisle/service/GoogleAuthService.java
similarity index 100%
rename from src/main/java/com/openisle/service/GoogleAuthService.java
rename to backend/src/main/java/com/openisle/service/GoogleAuthService.java
diff --git a/src/main/java/com/openisle/service/ImageUploader.java b/backend/src/main/java/com/openisle/service/ImageUploader.java
similarity index 100%
rename from src/main/java/com/openisle/service/ImageUploader.java
rename to backend/src/main/java/com/openisle/service/ImageUploader.java
diff --git a/src/main/java/com/openisle/service/JwtService.java b/backend/src/main/java/com/openisle/service/JwtService.java
similarity index 100%
rename from src/main/java/com/openisle/service/JwtService.java
rename to backend/src/main/java/com/openisle/service/JwtService.java
diff --git a/src/main/java/com/openisle/service/LevelService.java b/backend/src/main/java/com/openisle/service/LevelService.java
similarity index 100%
rename from src/main/java/com/openisle/service/LevelService.java
rename to backend/src/main/java/com/openisle/service/LevelService.java
diff --git a/src/main/java/com/openisle/service/NotificationService.java b/backend/src/main/java/com/openisle/service/NotificationService.java
similarity index 84%
rename from src/main/java/com/openisle/service/NotificationService.java
rename to backend/src/main/java/com/openisle/service/NotificationService.java
index 561b59b28..ebd2d89fd 100644
--- a/src/main/java/com/openisle/service/NotificationService.java
+++ b/backend/src/main/java/com/openisle/service/NotificationService.java
@@ -9,6 +9,8 @@ import com.openisle.service.EmailSender;
 import org.springframework.beans.factory.annotation.Value;
 import org.springframework.stereotype.Service;
 import com.fasterxml.jackson.databind.ObjectMapper;
+import org.springframework.transaction.annotation.Transactional;
+
 import java.util.Map;
 
 import java.util.regex.Pattern;
@@ -76,23 +78,23 @@ public class NotificationService {
                 emailSender.sendEmail(user.getEmail(), "您有新的回复", pushContent + ", 点击以查看: " + url);
                 sendCustomPush(user, pushContent, url);
             } else if (type == NotificationType.REACTION && comment != null) {
-                long count = reactionRepository.countReceived(comment.getAuthor().getUsername());
-                if (count % 5 == 0) {
-                    String url = websiteUrl + "/messages";
-                    sendCustomPush(comment.getAuthor(), "你有新的互动", url);
-                    if (comment.getAuthor().getEmail() != null) {
-                        emailSender.sendEmail(comment.getAuthor().getEmail(), "你有新的互动", "你有新的互动, 点击以查看: " + url);
-                    }
-                }
+//                long count = reactionRepository.countReceived(comment.getAuthor().getUsername());
+//                if (count % 5 == 0) {
+//                    String url = websiteUrl + "/messages";
+//                    sendCustomPush(comment.getAuthor(), "你有新的互动", url);
+//                    if (comment.getAuthor().getEmail() != null) {
+//                        emailSender.sendEmail(comment.getAuthor().getEmail(), "你有新的互动", "你有新的互动, 点击以查看: " + url);
+//                    }
+//                }
             } else if (type == NotificationType.REACTION && post != null) {
-                long count = reactionRepository.countReceived(post.getAuthor().getUsername());
-                if (count % 5 == 0) {
-                    String url = websiteUrl + "/messages";
-                    sendCustomPush(post.getAuthor(), "你有新的互动", url);
-                    if (post.getAuthor().getEmail() != null) {
-                        emailSender.sendEmail(post.getAuthor().getEmail(), "你有新的互动", "你有新的互动, 点击以查看: " + url);
-                    }
-                }
+//                long count = reactionRepository.countReceived(post.getAuthor().getUsername());
+//                if (count % 5 == 0) {
+//                    String url = websiteUrl + "/messages";
+//                    sendCustomPush(post.getAuthor(), "你有新的互动", url);
+//                    if (post.getAuthor().getEmail() != null) {
+//                        emailSender.sendEmail(post.getAuthor().getEmail(), "你有新的互动", "你有新的互动, 点击以查看: " + url);
+//                    }
+//                }
             }
         });
 
diff --git a/src/main/java/com/openisle/service/OpenAiService.java b/backend/src/main/java/com/openisle/service/OpenAiService.java
similarity index 100%
rename from src/main/java/com/openisle/service/OpenAiService.java
rename to backend/src/main/java/com/openisle/service/OpenAiService.java
diff --git a/src/main/java/com/openisle/service/PasswordValidator.java b/backend/src/main/java/com/openisle/service/PasswordValidator.java
similarity index 100%
rename from src/main/java/com/openisle/service/PasswordValidator.java
rename to backend/src/main/java/com/openisle/service/PasswordValidator.java
diff --git a/src/main/java/com/openisle/service/PostReadService.java b/backend/src/main/java/com/openisle/service/PostReadService.java
similarity index 100%
rename from src/main/java/com/openisle/service/PostReadService.java
rename to backend/src/main/java/com/openisle/service/PostReadService.java
diff --git a/src/main/java/com/openisle/service/PostService.java b/backend/src/main/java/com/openisle/service/PostService.java
similarity index 99%
rename from src/main/java/com/openisle/service/PostService.java
rename to backend/src/main/java/com/openisle/service/PostService.java
index 2e124f3f4..c3293c4c9 100644
--- a/src/main/java/com/openisle/service/PostService.java
+++ b/backend/src/main/java/com/openisle/service/PostService.java
@@ -26,6 +26,7 @@ import java.util.List;
 import org.springframework.data.domain.PageRequest;
 import org.springframework.data.domain.Pageable;
 import org.springframework.data.domain.Sort;
+import org.springframework.transaction.annotation.Transactional;
 
 @Service
 public class PostService {
@@ -143,6 +144,7 @@ public class PostService {
         return post;
     }
 
+    @Transactional
     public Post viewPost(Long id, String viewer) {
         Post post = postRepository.findById(id)
                 .orElseThrow(() -> new com.openisle.exception.NotFoundException("Post not found"));
@@ -164,9 +166,8 @@ public class PostService {
         if (viewer != null && !viewer.equals(post.getAuthor().getUsername())) {
             User viewerUser = userRepository.findByUsername(viewer).orElse(null);
             if (viewerUser != null) {
+                notificationRepository.deleteByTypeAndFromUserAndPost(NotificationType.POST_VIEWED, viewerUser, post);
                 notificationService.createNotification(post.getAuthor(), NotificationType.POST_VIEWED, post, null, null, viewerUser, null, null);
-            } else {
-                notificationService.createNotification(post.getAuthor(), NotificationType.POST_VIEWED, post, null, null, null, null, null);
             }
         }
         return post;
diff --git a/src/main/java/com/openisle/service/PushNotificationService.java b/backend/src/main/java/com/openisle/service/PushNotificationService.java
similarity index 100%
rename from src/main/java/com/openisle/service/PushNotificationService.java
rename to backend/src/main/java/com/openisle/service/PushNotificationService.java
diff --git a/src/main/java/com/openisle/service/PushSubscriptionService.java b/backend/src/main/java/com/openisle/service/PushSubscriptionService.java
similarity index 100%
rename from src/main/java/com/openisle/service/PushSubscriptionService.java
rename to backend/src/main/java/com/openisle/service/PushSubscriptionService.java
diff --git a/src/main/java/com/openisle/service/ReactionService.java b/backend/src/main/java/com/openisle/service/ReactionService.java
similarity index 97%
rename from src/main/java/com/openisle/service/ReactionService.java
rename to backend/src/main/java/com/openisle/service/ReactionService.java
index 393de62b3..b6cda46f5 100644
--- a/src/main/java/com/openisle/service/ReactionService.java
+++ b/backend/src/main/java/com/openisle/service/ReactionService.java
@@ -15,6 +15,7 @@ import com.openisle.service.EmailSender;
 import lombok.RequiredArgsConstructor;
 import org.springframework.beans.factory.annotation.Value;
 import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
 
 @Service
 @RequiredArgsConstructor
@@ -29,6 +30,7 @@ public class ReactionService {
     @Value("${app.website-url}")
     private String websiteUrl;
 
+    @Transactional
     public Reaction reactToPost(String username, Long postId, ReactionType type) {
         User user = userRepository.findByUsername(username)
                 .orElseThrow(() -> new com.openisle.exception.NotFoundException("User not found"));
@@ -51,6 +53,7 @@ public class ReactionService {
         return reaction;
     }
 
+    @Transactional
     public Reaction reactToComment(String username, Long commentId, ReactionType type) {
         User user = userRepository.findByUsername(username)
                 .orElseThrow(() -> new com.openisle.exception.NotFoundException("User not found"));
diff --git a/src/main/java/com/openisle/service/RecaptchaService.java b/backend/src/main/java/com/openisle/service/RecaptchaService.java
similarity index 100%
rename from src/main/java/com/openisle/service/RecaptchaService.java
rename to backend/src/main/java/com/openisle/service/RecaptchaService.java
diff --git a/src/main/java/com/openisle/service/RegisterModeService.java b/backend/src/main/java/com/openisle/service/RegisterModeService.java
similarity index 100%
rename from src/main/java/com/openisle/service/RegisterModeService.java
rename to backend/src/main/java/com/openisle/service/RegisterModeService.java
diff --git a/src/main/java/com/openisle/service/ResendEmailSender.java b/backend/src/main/java/com/openisle/service/ResendEmailSender.java
similarity index 100%
rename from src/main/java/com/openisle/service/ResendEmailSender.java
rename to backend/src/main/java/com/openisle/service/ResendEmailSender.java
diff --git a/src/main/java/com/openisle/service/SearchService.java b/backend/src/main/java/com/openisle/service/SearchService.java
similarity index 100%
rename from src/main/java/com/openisle/service/SearchService.java
rename to backend/src/main/java/com/openisle/service/SearchService.java
diff --git a/src/main/java/com/openisle/service/SubscriptionService.java b/backend/src/main/java/com/openisle/service/SubscriptionService.java
similarity index 100%
rename from src/main/java/com/openisle/service/SubscriptionService.java
rename to backend/src/main/java/com/openisle/service/SubscriptionService.java
diff --git a/src/main/java/com/openisle/service/TagService.java b/backend/src/main/java/com/openisle/service/TagService.java
similarity index 100%
rename from src/main/java/com/openisle/service/TagService.java
rename to backend/src/main/java/com/openisle/service/TagService.java
diff --git a/src/main/java/com/openisle/service/TagValidator.java b/backend/src/main/java/com/openisle/service/TagValidator.java
similarity index 100%
rename from src/main/java/com/openisle/service/TagValidator.java
rename to backend/src/main/java/com/openisle/service/TagValidator.java
diff --git a/src/main/java/com/openisle/service/TwitterAuthService.java b/backend/src/main/java/com/openisle/service/TwitterAuthService.java
similarity index 100%
rename from src/main/java/com/openisle/service/TwitterAuthService.java
rename to backend/src/main/java/com/openisle/service/TwitterAuthService.java
diff --git a/src/main/java/com/openisle/service/UserService.java b/backend/src/main/java/com/openisle/service/UserService.java
similarity index 100%
rename from src/main/java/com/openisle/service/UserService.java
rename to backend/src/main/java/com/openisle/service/UserService.java
diff --git a/src/main/java/com/openisle/service/UserVisitService.java b/backend/src/main/java/com/openisle/service/UserVisitService.java
similarity index 100%
rename from src/main/java/com/openisle/service/UserVisitService.java
rename to backend/src/main/java/com/openisle/service/UserVisitService.java
diff --git a/src/main/java/com/openisle/service/UsernameValidator.java b/backend/src/main/java/com/openisle/service/UsernameValidator.java
similarity index 100%
rename from src/main/java/com/openisle/service/UsernameValidator.java
rename to backend/src/main/java/com/openisle/service/UsernameValidator.java
diff --git a/src/main/resources/application.properties b/backend/src/main/resources/application.properties
similarity index 100%
rename from src/main/resources/application.properties
rename to backend/src/main/resources/application.properties
diff --git a/src/test/java/com/openisle/controller/AdminControllerTest.java b/backend/src/test/java/com/openisle/controller/AdminControllerTest.java
similarity index 100%
rename from src/test/java/com/openisle/controller/AdminControllerTest.java
rename to backend/src/test/java/com/openisle/controller/AdminControllerTest.java
diff --git a/src/test/java/com/openisle/controller/AuthControllerTest.java b/backend/src/test/java/com/openisle/controller/AuthControllerTest.java
similarity index 100%
rename from src/test/java/com/openisle/controller/AuthControllerTest.java
rename to backend/src/test/java/com/openisle/controller/AuthControllerTest.java
diff --git a/src/test/java/com/openisle/controller/CategoryControllerTest.java b/backend/src/test/java/com/openisle/controller/CategoryControllerTest.java
similarity index 100%
rename from src/test/java/com/openisle/controller/CategoryControllerTest.java
rename to backend/src/test/java/com/openisle/controller/CategoryControllerTest.java
diff --git a/src/test/java/com/openisle/controller/CommentControllerTest.java b/backend/src/test/java/com/openisle/controller/CommentControllerTest.java
similarity index 94%
rename from src/test/java/com/openisle/controller/CommentControllerTest.java
rename to backend/src/test/java/com/openisle/controller/CommentControllerTest.java
index 8eeabbef9..eb9cfde2a 100644
--- a/src/test/java/com/openisle/controller/CommentControllerTest.java
+++ b/backend/src/test/java/com/openisle/controller/CommentControllerTest.java
@@ -6,6 +6,7 @@ import com.openisle.model.User;
 import com.openisle.service.CommentService;
 import com.openisle.service.CaptchaService;
 import com.openisle.service.LevelService;
+import com.openisle.service.ReactionService;
 import org.junit.jupiter.api.Test;
 import org.mockito.Mockito;
 import org.springframework.beans.factory.annotation.Autowired;
@@ -37,6 +38,8 @@ class CommentControllerTest {
     private CaptchaService captchaService;
     @MockBean
     private LevelService levelService;
+    @MockBean
+    private ReactionService reactionService;
 
     private Comment createComment(Long id, String content, String authorName) {
         User user = new User();
@@ -56,6 +59,7 @@ class CommentControllerTest {
         Mockito.when(commentService.addComment(eq("bob"), eq(1L), eq("hi"))).thenReturn(comment);
         Mockito.when(commentService.getCommentsForPost(eq(1L), any())).thenReturn(List.of(comment));
         Mockito.when(commentService.getReplies(1L)).thenReturn(List.of());
+        Mockito.when(reactionService.getReactionsForComment(1L)).thenReturn(List.of());
 
         mockMvc.perform(post("/api/posts/1/comments")
                         .contentType("application/json")
diff --git a/src/test/java/com/openisle/controller/HelloControllerTest.java b/backend/src/test/java/com/openisle/controller/HelloControllerTest.java
similarity index 100%
rename from src/test/java/com/openisle/controller/HelloControllerTest.java
rename to backend/src/test/java/com/openisle/controller/HelloControllerTest.java
diff --git a/src/test/java/com/openisle/controller/NotificationControllerTest.java b/backend/src/test/java/com/openisle/controller/NotificationControllerTest.java
similarity index 100%
rename from src/test/java/com/openisle/controller/NotificationControllerTest.java
rename to backend/src/test/java/com/openisle/controller/NotificationControllerTest.java
diff --git a/src/test/java/com/openisle/controller/PostControllerTest.java b/backend/src/test/java/com/openisle/controller/PostControllerTest.java
similarity index 100%
rename from src/test/java/com/openisle/controller/PostControllerTest.java
rename to backend/src/test/java/com/openisle/controller/PostControllerTest.java
diff --git a/src/test/java/com/openisle/controller/PushSubscriptionControllerTest.java b/backend/src/test/java/com/openisle/controller/PushSubscriptionControllerTest.java
similarity index 100%
rename from src/test/java/com/openisle/controller/PushSubscriptionControllerTest.java
rename to backend/src/test/java/com/openisle/controller/PushSubscriptionControllerTest.java
diff --git a/src/test/java/com/openisle/controller/ReactionControllerTest.java b/backend/src/test/java/com/openisle/controller/ReactionControllerTest.java
similarity index 100%
rename from src/test/java/com/openisle/controller/ReactionControllerTest.java
rename to backend/src/test/java/com/openisle/controller/ReactionControllerTest.java
diff --git a/src/test/java/com/openisle/controller/SearchControllerTest.java b/backend/src/test/java/com/openisle/controller/SearchControllerTest.java
similarity index 100%
rename from src/test/java/com/openisle/controller/SearchControllerTest.java
rename to backend/src/test/java/com/openisle/controller/SearchControllerTest.java
diff --git a/src/test/java/com/openisle/controller/StatControllerTest.java b/backend/src/test/java/com/openisle/controller/StatControllerTest.java
similarity index 100%
rename from src/test/java/com/openisle/controller/StatControllerTest.java
rename to backend/src/test/java/com/openisle/controller/StatControllerTest.java
diff --git a/src/test/java/com/openisle/controller/TagControllerTest.java b/backend/src/test/java/com/openisle/controller/TagControllerTest.java
similarity index 100%
rename from src/test/java/com/openisle/controller/TagControllerTest.java
rename to backend/src/test/java/com/openisle/controller/TagControllerTest.java
diff --git a/src/test/java/com/openisle/controller/UserControllerTest.java b/backend/src/test/java/com/openisle/controller/UserControllerTest.java
similarity index 100%
rename from src/test/java/com/openisle/controller/UserControllerTest.java
rename to backend/src/test/java/com/openisle/controller/UserControllerTest.java
diff --git a/src/test/java/com/openisle/integration/ComplexFlowIntegrationTest.java b/backend/src/test/java/com/openisle/integration/ComplexFlowIntegrationTest.java
similarity index 100%
rename from src/test/java/com/openisle/integration/ComplexFlowIntegrationTest.java
rename to backend/src/test/java/com/openisle/integration/ComplexFlowIntegrationTest.java
diff --git a/src/test/java/com/openisle/integration/PublishModeIntegrationTest.java b/backend/src/test/java/com/openisle/integration/PublishModeIntegrationTest.java
similarity index 100%
rename from src/test/java/com/openisle/integration/PublishModeIntegrationTest.java
rename to backend/src/test/java/com/openisle/integration/PublishModeIntegrationTest.java
diff --git a/src/test/java/com/openisle/integration/SearchIntegrationTest.java b/backend/src/test/java/com/openisle/integration/SearchIntegrationTest.java
similarity index 100%
rename from src/test/java/com/openisle/integration/SearchIntegrationTest.java
rename to backend/src/test/java/com/openisle/integration/SearchIntegrationTest.java
diff --git a/src/test/java/com/openisle/service/CommentServiceTest.java b/backend/src/test/java/com/openisle/service/CommentServiceTest.java
similarity index 100%
rename from src/test/java/com/openisle/service/CommentServiceTest.java
rename to backend/src/test/java/com/openisle/service/CommentServiceTest.java
diff --git a/src/test/java/com/openisle/service/CosImageUploaderTest.java b/backend/src/test/java/com/openisle/service/CosImageUploaderTest.java
similarity index 100%
rename from src/test/java/com/openisle/service/CosImageUploaderTest.java
rename to backend/src/test/java/com/openisle/service/CosImageUploaderTest.java
diff --git a/src/test/java/com/openisle/service/NotificationServiceTest.java b/backend/src/test/java/com/openisle/service/NotificationServiceTest.java
similarity index 86%
rename from src/test/java/com/openisle/service/NotificationServiceTest.java
rename to backend/src/test/java/com/openisle/service/NotificationServiceTest.java
index 59d43d5e4..c4ca007a1 100644
--- a/src/test/java/com/openisle/service/NotificationServiceTest.java
+++ b/backend/src/test/java/com/openisle/service/NotificationServiceTest.java
@@ -168,4 +168,27 @@ class NotificationServiceTest {
         verify(email).sendEmail("a@a.com", "有人回复了你", "https://ex.com/posts/1#comment-2");
         verify(push).sendNotification(eq(user), contains("/posts/1#comment-2"));
     }
+
+    @Test
+    void postViewedNotificationDeletesOldOnes() {
+        NotificationRepository nRepo = mock(NotificationRepository.class);
+        UserRepository uRepo = mock(UserRepository.class);
+        ReactionRepository rRepo = mock(ReactionRepository.class);
+        EmailSender email = mock(EmailSender.class);
+        PushNotificationService push = mock(PushNotificationService.class);
+        Executor executor = Runnable::run;
+        NotificationService service = new NotificationService(nRepo, uRepo, email, push, rRepo, executor);
+        org.springframework.test.util.ReflectionTestUtils.setField(service, "websiteUrl", "https://ex.com");
+
+        User owner = new User();
+        User viewer = new User();
+        Post post = new Post();
+
+        when(nRepo.save(any(Notification.class))).thenAnswer(i -> i.getArgument(0));
+
+        service.createNotification(owner, NotificationType.POST_VIEWED, post, null, null, viewer, null, null);
+
+        verify(nRepo).deleteByTypeAndFromUserAndPost(NotificationType.POST_VIEWED, viewer, post);
+        verify(nRepo).save(any(Notification.class));
+    }
 }
diff --git a/src/test/java/com/openisle/service/PasswordValidatorTest.java b/backend/src/test/java/com/openisle/service/PasswordValidatorTest.java
similarity index 100%
rename from src/test/java/com/openisle/service/PasswordValidatorTest.java
rename to backend/src/test/java/com/openisle/service/PasswordValidatorTest.java
diff --git a/src/test/java/com/openisle/service/PostServiceTest.java b/backend/src/test/java/com/openisle/service/PostServiceTest.java
similarity index 100%
rename from src/test/java/com/openisle/service/PostServiceTest.java
rename to backend/src/test/java/com/openisle/service/PostServiceTest.java
diff --git a/src/test/java/com/openisle/service/ReactionServiceTest.java b/backend/src/test/java/com/openisle/service/ReactionServiceTest.java
similarity index 100%
rename from src/test/java/com/openisle/service/ReactionServiceTest.java
rename to backend/src/test/java/com/openisle/service/ReactionServiceTest.java
diff --git a/src/test/java/com/openisle/service/SearchServiceTest.java b/backend/src/test/java/com/openisle/service/SearchServiceTest.java
similarity index 100%
rename from src/test/java/com/openisle/service/SearchServiceTest.java
rename to backend/src/test/java/com/openisle/service/SearchServiceTest.java
diff --git a/src/test/java/com/openisle/service/UsernameValidatorTest.java b/backend/src/test/java/com/openisle/service/UsernameValidatorTest.java
similarity index 100%
rename from src/test/java/com/openisle/service/UsernameValidatorTest.java
rename to backend/src/test/java/com/openisle/service/UsernameValidatorTest.java
diff --git a/src/test/resources/application.properties b/backend/src/test/resources/application.properties
similarity index 100%
rename from src/test/resources/application.properties
rename to backend/src/test/resources/application.properties
diff --git a/open-isle-cli/babel.config.js b/frontend/babel.config.js
similarity index 100%
rename from open-isle-cli/babel.config.js
rename to frontend/babel.config.js
diff --git a/open-isle-cli/jsconfig.json b/frontend/jsconfig.json
similarity index 100%
rename from open-isle-cli/jsconfig.json
rename to frontend/jsconfig.json
diff --git a/open-isle-cli/package-lock.json b/frontend/package-lock.json
similarity index 100%
rename from open-isle-cli/package-lock.json
rename to frontend/package-lock.json
diff --git a/open-isle-cli/package.json b/frontend/package.json
similarity index 100%
rename from open-isle-cli/package.json
rename to frontend/package.json
diff --git a/open-isle-cli/public/about/about.md b/frontend/public/about/about.md
similarity index 100%
rename from open-isle-cli/public/about/about.md
rename to frontend/public/about/about.md
diff --git a/open-isle-cli/public/about/agreement.md b/frontend/public/about/agreement.md
similarity index 100%
rename from open-isle-cli/public/about/agreement.md
rename to frontend/public/about/agreement.md
diff --git a/open-isle-cli/public/about/guideline.md b/frontend/public/about/guideline.md
similarity index 100%
rename from open-isle-cli/public/about/guideline.md
rename to frontend/public/about/guideline.md
diff --git a/open-isle-cli/public/about/privacy.md b/frontend/public/about/privacy.md
similarity index 100%
rename from open-isle-cli/public/about/privacy.md
rename to frontend/public/about/privacy.md
diff --git a/open-isle-cli/public/favicon.ico b/frontend/public/favicon.ico
similarity index 100%
rename from open-isle-cli/public/favicon.ico
rename to frontend/public/favicon.ico
diff --git a/open-isle-cli/public/googlea6f18c4a543fb356.html b/frontend/public/googlea6f18c4a543fb356.html
similarity index 100%
rename from open-isle-cli/public/googlea6f18c4a543fb356.html
rename to frontend/public/googlea6f18c4a543fb356.html
diff --git a/frontend/public/icon-120.png b/frontend/public/icon-120.png
new file mode 100644
index 000000000..67392b878
Binary files /dev/null and b/frontend/public/icon-120.png differ
diff --git a/frontend/public/icon-152.png b/frontend/public/icon-152.png
new file mode 100644
index 000000000..bf6bae839
Binary files /dev/null and b/frontend/public/icon-152.png differ
diff --git a/frontend/public/icon-180.png b/frontend/public/icon-180.png
new file mode 100644
index 000000000..07b316714
Binary files /dev/null and b/frontend/public/icon-180.png differ
diff --git a/frontend/public/icon-192.png b/frontend/public/icon-192.png
new file mode 100644
index 000000000..9da61afd4
Binary files /dev/null and b/frontend/public/icon-192.png differ
diff --git a/frontend/public/icon-512.png b/frontend/public/icon-512.png
new file mode 100644
index 000000000..af16336e2
Binary files /dev/null and b/frontend/public/icon-512.png differ
diff --git a/open-isle-cli/public/index.html b/frontend/public/index.html
similarity index 76%
rename from open-isle-cli/public/index.html
rename to frontend/public/index.html
index de8ad157a..dfdea33bc 100644
--- a/open-isle-cli/public/index.html
+++ b/frontend/public/index.html
@@ -14,6 +14,14 @@
   <meta name="description"
         content="OpenIsle 是一个开放的技术与交流社区，致力于为开发者、技术爱好者和创作者们提供一个自由、友好、包容的讨论与协作环境。" />
   <script src="https://accounts.google.com/gsi/client" async defer></script>
+
+  <!-- iOS Safari 图标 -->
+  <link rel="apple-touch-icon" sizes="180x180" href="/icon-180.png">
+  <link rel="apple-touch-icon" sizes="152x152" href="/icon-152.png">
+  <link rel="apple-touch-icon" sizes="120x120" href="/icon-120.png">
+
+  <!-- PWA manifest -->
+  <link rel="manifest" href="/manifest.json">
 </head>
 
 <body>
diff --git a/frontend/public/manifest.json b/frontend/public/manifest.json
new file mode 100644
index 000000000..5bc639a6d
--- /dev/null
+++ b/frontend/public/manifest.json
@@ -0,0 +1,18 @@
+{
+  "name": "OpenIsle",
+  "short_name": "OpenIsle",
+  "start_url": "/",
+  "display": "standalone",
+  "icons": [
+    {
+      "src": "/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}
diff --git a/open-isle-cli/public/notifications-sw.js b/frontend/public/notifications-sw.js
similarity index 100%
rename from open-isle-cli/public/notifications-sw.js
rename to frontend/public/notifications-sw.js
diff --git a/open-isle-cli/public/robots.txt b/frontend/public/robots.txt
similarity index 100%
rename from open-isle-cli/public/robots.txt
rename to frontend/public/robots.txt
diff --git a/open-isle-cli/src/App.vue b/frontend/src/App.vue
similarity index 68%
rename from open-isle-cli/src/App.vue
rename to frontend/src/App.vue
index c78759ac9..b3634be7a 100644
--- a/open-isle-cli/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,23 +1,14 @@
 <template>
   <div id="app">
     <div class="header-container">
-      <HeaderComponent
-        @toggle-menu="menuVisible = !menuVisible"
-        :show-menu-btn="!hideMenu"
-      />
+      <HeaderComponent @toggle-menu="menuVisible = !menuVisible" :show-menu-btn="!hideMenu" />
     </div>
 
     <div class="main-container">
       <div class="menu-container">
-        <MenuComponent
-          :visible="!hideMenu && menuVisible"
-          @item-click="menuVisible = false"
-        />
+        <MenuComponent :visible="!hideMenu && menuVisible" @item-click="menuVisible = false" />
       </div>
-      <div
-        class="content"
-        :class="{ 'menu-open': menuVisible && !hideMenu }"
-      >
+      <div class="content" :class="{ 'menu-open': menuVisible && !hideMenu }">
         <router-view />
       </div>
     </div>
@@ -40,7 +31,17 @@ export default {
   },
   computed: {
     hideMenu() {
-      return ['/login', '/signup', '/404', '/signup-reason', '/github-callback', '/twitter-callback', '/discord-callback', '/forgot-password'].includes(this.$route.path)
+      return [
+        '/login',
+        '/signup', 
+        '/404',
+        '/signup-reason',
+        '/github-callback',
+        '/twitter-callback',
+        '/discord-callback',
+        '/forgot-password',
+        '/google-callback'
+      ].includes(this.$route.path)
     }
   },
   async mounted() {
@@ -59,8 +60,7 @@ export default {
   z-index: 1000;
 }
 
-.menu-container {
-}
+.menu-container {}
 
 .content {
   flex: 1;
@@ -80,6 +80,7 @@ export default {
 }
 
 @media (max-width: 768px) {
+
   .content,
   .content.menu-open {
     max-width: 100% !important;
diff --git a/open-isle-cli/src/assets/global.css b/frontend/src/assets/global.css
similarity index 100%
rename from open-isle-cli/src/assets/global.css
rename to frontend/src/assets/global.css
diff --git a/open-isle-cli/src/assets/icons/discord.svg b/frontend/src/assets/icons/discord.svg
similarity index 100%
rename from open-isle-cli/src/assets/icons/discord.svg
rename to frontend/src/assets/icons/discord.svg
diff --git a/open-isle-cli/src/assets/icons/github.svg b/frontend/src/assets/icons/github.svg
similarity index 100%
rename from open-isle-cli/src/assets/icons/github.svg
rename to frontend/src/assets/icons/github.svg
diff --git a/open-isle-cli/src/assets/icons/google.svg b/frontend/src/assets/icons/google.svg
similarity index 100%
rename from open-isle-cli/src/assets/icons/google.svg
rename to frontend/src/assets/icons/google.svg
diff --git a/open-isle-cli/src/assets/icons/twitter.svg b/frontend/src/assets/icons/twitter.svg
similarity index 100%
rename from open-isle-cli/src/assets/icons/twitter.svg
rename to frontend/src/assets/icons/twitter.svg
diff --git a/open-isle-cli/src/assets/toast.css b/frontend/src/assets/toast.css
similarity index 100%
rename from open-isle-cli/src/assets/toast.css
rename to frontend/src/assets/toast.css
diff --git a/open-isle-cli/src/components/ActivityPopup.vue b/frontend/src/components/ActivityPopup.vue
similarity index 100%
rename from open-isle-cli/src/components/ActivityPopup.vue
rename to frontend/src/components/ActivityPopup.vue
diff --git a/open-isle-cli/src/components/ArticleCategory.vue b/frontend/src/components/ArticleCategory.vue
similarity index 100%
rename from open-isle-cli/src/components/ArticleCategory.vue
rename to frontend/src/components/ArticleCategory.vue
diff --git a/open-isle-cli/src/components/ArticleTags.vue b/frontend/src/components/ArticleTags.vue
similarity index 100%
rename from open-isle-cli/src/components/ArticleTags.vue
rename to frontend/src/components/ArticleTags.vue
diff --git a/open-isle-cli/src/components/BaseInput.vue b/frontend/src/components/BaseInput.vue
similarity index 100%
rename from open-isle-cli/src/components/BaseInput.vue
rename to frontend/src/components/BaseInput.vue
diff --git a/open-isle-cli/src/components/BasePlaceholder.vue b/frontend/src/components/BasePlaceholder.vue
similarity index 100%
rename from open-isle-cli/src/components/BasePlaceholder.vue
rename to frontend/src/components/BasePlaceholder.vue
diff --git a/open-isle-cli/src/components/BasePopup.vue b/frontend/src/components/BasePopup.vue
similarity index 100%
rename from open-isle-cli/src/components/BasePopup.vue
rename to frontend/src/components/BasePopup.vue
diff --git a/open-isle-cli/src/components/BaseTimeline.vue b/frontend/src/components/BaseTimeline.vue
similarity index 100%
rename from open-isle-cli/src/components/BaseTimeline.vue
rename to frontend/src/components/BaseTimeline.vue
diff --git a/frontend/src/components/CallbackPage.vue b/frontend/src/components/CallbackPage.vue
new file mode 100644
index 000000000..003d12a62
--- /dev/null
+++ b/frontend/src/components/CallbackPage.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="callback-page">
+    <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
+    <div class="callback-page-text">Magic is happening...</div>
+  </div>
+</template>
+
+<script>
+import { hatch } from 'ldrs'
+
+hatch.register()
+
+export default {
+  name: 'CallbackPage'
+}
+</script>
+
+<style scoped>
+.callback-page {
+  background-color: var(--background-color);
+  height: calc(100vh - var(--header-height));
+  padding-top: var(--header-height);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.callback-page-text {
+  margin-top: 25px;
+  font-size: 16px;
+  color: var(--primary-color);
+  font-weight: bold;
+}
+</style>
diff --git a/open-isle-cli/src/components/CategorySelect.vue b/frontend/src/components/CategorySelect.vue
similarity index 100%
rename from open-isle-cli/src/components/CategorySelect.vue
rename to frontend/src/components/CategorySelect.vue
diff --git a/open-isle-cli/src/components/CommentEditor.vue b/frontend/src/components/CommentEditor.vue
similarity index 95%
rename from open-isle-cli/src/components/CommentEditor.vue
rename to frontend/src/components/CommentEditor.vue
index 46ab085f7..db42bf4ee 100644
--- a/open-isle-cli/src/components/CommentEditor.vue
+++ b/frontend/src/components/CommentEditor.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { ref, onMounted, computed, watch } from 'vue'
+import { ref, onMounted, computed, watch, onUnmounted } from 'vue'
 import { themeState } from '../utils/theme'
 import {
   createVditor,
@@ -26,6 +26,7 @@ import {
   getPreviewTheme as getPreviewThemeUtil
 } from '../utils/vditor'
 import LoginOverlay from './LoginOverlay.vue'
+import { clearVditorStorage } from '../utils/clearVditorStorage'
 
 export default {
   name: 'CommentEditor',
@@ -90,6 +91,10 @@ export default {
       // applyTheme()
     })
 
+    onUnmounted(() => {
+      clearVditorStorage()
+    })
+
     watch(
       () => props.loading,
       val => {
diff --git a/open-isle-cli/src/components/CommentItem.vue b/frontend/src/components/CommentItem.vue
similarity index 80%
rename from open-isle-cli/src/components/CommentItem.vue
rename to frontend/src/components/CommentItem.vue
index 724fb5038..7322b8bcd 100644
--- a/open-isle-cli/src/components/CommentItem.vue
+++ b/frontend/src/components/CommentItem.vue
@@ -10,7 +10,11 @@
     <div class="info-content">
       <div class="common-info-content-header">
         <div class="info-content-header-left">
-          <div class="user-name">{{ comment.userName }}</div>
+          <span class="user-name">{{ comment.userName }}</span>
+          <span v-if="level >= 2">
+            <i class="fas fa-reply reply-icon"></i>
+            <span class="user-name reply-user-name">{{ comment.parentUserName }}</span>
+          </span>
           <div class="post-time">{{ comment.time }}</div>
         </div>
         <div class="info-content-header-right">
@@ -33,33 +37,23 @@
         </ReactionsGroup>
       </div>
       <div class="comment-editor-wrapper">
-        <CommentEditor v-if="showEditor" @submit="submitReply" :loading="isWaitingForReply" :disabled="!loggedIn" :show-login-overlay="!loggedIn" />
+        <CommentEditor v-if="showEditor" @submit="submitReply" :loading="isWaitingForReply" :disabled="!loggedIn"
+          :show-login-overlay="!loggedIn" />
       </div>
-      <div v-if="comment.reply && comment.reply.length" class="reply-toggle" @click="toggleReplies">
+      <div v-if="replyCount && level < 2" class="reply-toggle" @click="toggleReplies">
         <i v-if="showReplies" class="fas fa-chevron-up reply-toggle-icon"></i>
         <i v-else class="fas fa-chevron-down reply-toggle-icon"></i>
-        {{ comment.reply.length }}条回复
+        {{ replyCount }}条回复
       </div>
-      <div v-if="showReplies" class="reply-list">
-        <BaseTimeline :items="comment.reply">
+      <div v-if="showReplies && level < 2" class="reply-list">
+        <BaseTimeline :items="replyList">
           <template #item="{ item }">
             <CommentItem :key="item.id" :comment="item" :level="level + 1" :default-show-replies="item.openReplies" />
           </template>
         </BaseTimeline>
-        <!-- <CommentItem
-          v-for="r in comment.reply"
-          :key="r.id"
-          :comment="r"
-          :level="level + 1"
-          :default-show-replies="r.openReplies"
-        /> -->
       </div>
-      <vue-easy-lightbox
-        :visible="lightboxVisible"
-        :imgs="lightboxImgs"
-        :index="lightboxIndex"
-        @hide="lightboxVisible = false"
-      />
+      <vue-easy-lightbox :visible="lightboxVisible" :imgs="lightboxImgs" :index="lightboxIndex"
+        @hide="lightboxVisible = false" />
     </div>
   </div>
 </template>
@@ -97,11 +91,11 @@ const CommentItem = {
   },
   setup(props, { emit }) {
     const router = useRouter()
-    const showReplies = ref(props.defaultShowReplies)
+    const showReplies = ref(props.level === 0 ? true : props.defaultShowReplies)
     watch(
       () => props.defaultShowReplies,
       (val) => {
-        showReplies.value = val
+        showReplies.value = props.level === 0 ? true : val
       }
     )
     const showEditor = ref(false)
@@ -110,12 +104,35 @@ const CommentItem = {
     const lightboxIndex = ref(0)
     const lightboxImgs = ref([])
     const loggedIn = computed(() => authState.loggedIn)
+    const countReplies = (list) => list.reduce((sum, r) => sum + 1 + countReplies(r.reply || []), 0)
+    const replyCount = computed(() => countReplies(props.comment.reply || []))
     const toggleReplies = () => {
       showReplies.value = !showReplies.value
     }
     const toggleEditor = () => {
       showEditor.value = !showEditor.value
     }
+
+    // 合并所有子回复为一个扁平数组
+    const flattenReplies = (list) => {
+      let result = []
+      for (const r of list) {
+        result.push(r)
+        if (r.reply && r.reply.length > 0) {
+          result = result.concat(flattenReplies(r.reply))
+        }
+      }
+      return result
+    }
+
+    const replyList = computed(() => {
+      if (props.level < 1) {
+        return props.comment.reply
+      }
+
+      return flattenReplies(props.comment.reply || [])
+    })
+
     const isAuthor = computed(() => authState.username === props.comment.userName)
     const isAdmin = computed(() => authState.role === 'ADMIN')
     const commentMenuItems = computed(() =>
@@ -206,7 +223,7 @@ const CommentItem = {
         lightboxVisible.value = true
       }
     }
-    return { showReplies, toggleReplies, showEditor, toggleEditor, submitReply, copyCommentLink, renderMarkdown, isWaitingForReply, commentMenuItems, deleteComment, lightboxVisible, lightboxIndex, lightboxImgs, handleContentClick, loggedIn }
+    return { showReplies, toggleReplies, showEditor, toggleEditor, submitReply, copyCommentLink, renderMarkdown, isWaitingForReply, commentMenuItems, deleteComment, lightboxVisible, lightboxIndex, lightboxImgs, handleContentClick, loggedIn, replyCount, replyList }
   }
 }
 
@@ -247,6 +264,15 @@ export default CommentItem
   justify-content: space-between;
 }
 
+.reply-icon {
+  margin-right: 10px;
+  margin-left: 10px;
+  opacity: 0.5;
+}
+
+.reply-user-name {
+  opacity: 0.3;
+}
 
 @keyframes highlight {
   from {
@@ -257,4 +283,11 @@ export default CommentItem
     background-color: transparent;
   }
 }
+
+@media (max-width: 768px) {
+  .reply-icon {
+    margin-right: 3px;
+    margin-left: 3px;
+  }
+}
 </style>
diff --git a/open-isle-cli/src/components/Dropdown.vue b/frontend/src/components/Dropdown.vue
similarity index 100%
rename from open-isle-cli/src/components/Dropdown.vue
rename to frontend/src/components/Dropdown.vue
diff --git a/open-isle-cli/src/components/DropdownMenu.vue b/frontend/src/components/DropdownMenu.vue
similarity index 100%
rename from open-isle-cli/src/components/DropdownMenu.vue
rename to frontend/src/components/DropdownMenu.vue
diff --git a/open-isle-cli/src/components/GlobalPopups.vue b/frontend/src/components/GlobalPopups.vue
similarity index 100%
rename from open-isle-cli/src/components/GlobalPopups.vue
rename to frontend/src/components/GlobalPopups.vue
diff --git a/open-isle-cli/src/components/HeaderComponent.vue b/frontend/src/components/HeaderComponent.vue
similarity index 99%
rename from open-isle-cli/src/components/HeaderComponent.vue
rename to frontend/src/components/HeaderComponent.vue
index 169c1690a..cf6813fec 100644
--- a/open-isle-cli/src/components/HeaderComponent.vue
+++ b/frontend/src/components/HeaderComponent.vue
@@ -270,6 +270,7 @@ export default {
   height: 32px;
   border-radius: 50%;
   background-color: lightgray;
+  object-fit: cover;
 }
 
 .dropdown-icon {
diff --git a/open-isle-cli/src/components/LevelProgress.vue b/frontend/src/components/LevelProgress.vue
similarity index 100%
rename from open-isle-cli/src/components/LevelProgress.vue
rename to frontend/src/components/LevelProgress.vue
diff --git a/open-isle-cli/src/components/LoginOverlay.vue b/frontend/src/components/LoginOverlay.vue
similarity index 100%
rename from open-isle-cli/src/components/LoginOverlay.vue
rename to frontend/src/components/LoginOverlay.vue
diff --git a/open-isle-cli/src/components/MenuComponent.vue b/frontend/src/components/MenuComponent.vue
similarity index 99%
rename from open-isle-cli/src/components/MenuComponent.vue
rename to frontend/src/components/MenuComponent.vue
index fd3ca8af7..0df7da8cf 100644
--- a/open-isle-cli/src/components/MenuComponent.vue
+++ b/frontend/src/components/MenuComponent.vue
@@ -270,7 +270,7 @@ export default {
 .menu {
   width: 200px;
   background-color: var(--menu-background-color);
-  height: calc(100vh - 10px);
+  height: calc(100vh - 20px - var(--header-height));
   border-right: 1px solid var(--menu-border-color);
   display: flex;
   flex-direction: column;
diff --git a/open-isle-cli/src/components/MilkTeaActivityComponent.vue b/frontend/src/components/MilkTeaActivityComponent.vue
similarity index 98%
rename from open-isle-cli/src/components/MilkTeaActivityComponent.vue
rename to frontend/src/components/MilkTeaActivityComponent.vue
index a27a9b431..b9231fcc4 100644
--- a/open-isle-cli/src/components/MilkTeaActivityComponent.vue
+++ b/frontend/src/components/MilkTeaActivityComponent.vue
@@ -43,8 +43,8 @@
 </template>
 
 <script>
-import ProgressBar from '../components/ProgressBar.vue'
-import LevelProgress from '../components/LevelProgress.vue'
+import ProgressBar from './ProgressBar.vue'
+import LevelProgress from './LevelProgress.vue'
 import BaseInput from './BaseInput.vue'
 import BasePopup from './BasePopup.vue'
 import { API_BASE_URL, toast } from '../main'
diff --git a/open-isle-cli/src/components/NotificationContainer.vue b/frontend/src/components/NotificationContainer.vue
similarity index 100%
rename from open-isle-cli/src/components/NotificationContainer.vue
rename to frontend/src/components/NotificationContainer.vue
diff --git a/open-isle-cli/src/components/PostEditor.vue b/frontend/src/components/PostEditor.vue
similarity index 93%
rename from open-isle-cli/src/components/PostEditor.vue
rename to frontend/src/components/PostEditor.vue
index fbb433853..645f5ff4e 100644
--- a/open-isle-cli/src/components/PostEditor.vue
+++ b/frontend/src/components/PostEditor.vue
@@ -8,13 +8,14 @@
 </template>
 
 <script>
-import { ref, onMounted, watch } from 'vue'
+import { ref, onMounted, watch, onUnmounted } from 'vue'
 import { themeState } from '../utils/theme'
 import {
   createVditor,
   getEditorTheme as getEditorThemeUtil,
   getPreviewTheme as getPreviewThemeUtil
 } from '../utils/vditor'
+import { clearVditorStorage } from '../utils/clearVditorStorage'
 import { hatch } from 'ldrs'
 hatch.register()
 
@@ -106,6 +107,10 @@ export default {
       // applyTheme()
     })
 
+    onUnmounted(() => {
+      clearVditorStorage()
+    })
+
     return {}
   }
 }
diff --git a/open-isle-cli/src/components/ProgressBar.vue b/frontend/src/components/ProgressBar.vue
similarity index 100%
rename from open-isle-cli/src/components/ProgressBar.vue
rename to frontend/src/components/ProgressBar.vue
diff --git a/open-isle-cli/src/components/ReactionsGroup.vue b/frontend/src/components/ReactionsGroup.vue
similarity index 78%
rename from open-isle-cli/src/components/ReactionsGroup.vue
rename to frontend/src/components/ReactionsGroup.vue
index a35c0c2b9..be996796d 100644
--- a/open-isle-cli/src/components/ReactionsGroup.vue
+++ b/frontend/src/components/ReactionsGroup.vue
@@ -66,7 +66,18 @@ const iconMap = {
   MIND_BLOWN: '🤯',
   POOP: '💩',
   CLOWN: '🤡',
-  SKULL: '☠️'
+  SKULL: '☠️',
+  FIRE: '🔥',
+  EYES: '👀',
+  FROWN: '☹️',
+  HOT: '🥵',
+  EAGLE: '🦅',
+  SPIDER: '🕷️',
+  BAT: '🦇',
+  CHINA: '🇨🇳',
+  USA: '🇺🇸',
+  JAPAN: '🇯🇵',
+  KOREA: '🇰🇷'
 }
 
 export default {
@@ -128,10 +139,23 @@ export default {
         toast.error('请先登录')
         return
       }
+      const url = props.contentType === 'post'
+        ? `${API_BASE_URL}/api/posts/${props.contentId}/reactions`
+        : `${API_BASE_URL}/api/comments/${props.contentId}/reactions`
+
+      // optimistic update
+      const existingIdx = reactions.value.findIndex(r => r.type === type && r.user === authState.username)
+      let tempReaction = null
+      let removedReaction = null
+      if (existingIdx > -1) {
+        removedReaction = reactions.value.splice(existingIdx, 1)[0]
+      } else {
+        tempReaction = { type, user: authState.username }
+        reactions.value.push(tempReaction)
+      }
+      emit('update:modelValue', reactions.value)
+
       try {
-        const url = props.contentType === 'post'
-          ? `${API_BASE_URL}/api/posts/${props.contentId}/reactions`
-          : `${API_BASE_URL}/api/comments/${props.contentId}/reactions`
         const res = await fetch(url, {
           method: 'POST',
           headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
@@ -139,20 +163,40 @@ export default {
         })
         if (res.ok) {
           if (res.status === 204) {
-            const idx = reactions.value.findIndex(r => r.type === type && r.user === authState.username)
-            if (idx > -1) reactions.value.splice(idx, 1)
+            // removal already reflected
           } else {
             const data = await res.json()
-            reactions.value.push(data)
+            const idx = tempReaction ? reactions.value.indexOf(tempReaction) : -1
+            if (idx > -1) {
+              reactions.value.splice(idx, 1, data)
+            } else if (removedReaction) {
+              // server added back reaction even though we removed? restore data
+              reactions.value.push(data)
+            }
             if (data.reward && data.reward > 0) {
               toast.success(`获得 ${data.reward} 经验值`)
             }
           }
           emit('update:modelValue', reactions.value)
         } else {
+          // revert optimistic update on failure
+          if (tempReaction) {
+            const idx = reactions.value.indexOf(tempReaction)
+            if (idx > -1) reactions.value.splice(idx, 1)
+          } else if (removedReaction) {
+            reactions.value.push(removedReaction)
+          }
+          emit('update:modelValue', reactions.value)
           toast.error('操作失败')
         }
       } catch (e) {
+        if (tempReaction) {
+          const idx = reactions.value.indexOf(tempReaction)
+          if (idx > -1) reactions.value.splice(idx, 1)
+        } else if (removedReaction) {
+          reactions.value.push(removedReaction)
+        }
+        emit('update:modelValue', reactions.value)
         toast.error('操作失败')
       }
     }
diff --git a/open-isle-cli/src/components/SearchDropdown.vue b/frontend/src/components/SearchDropdown.vue
similarity index 100%
rename from open-isle-cli/src/components/SearchDropdown.vue
rename to frontend/src/components/SearchDropdown.vue
diff --git a/open-isle-cli/src/components/TagSelect.vue b/frontend/src/components/TagSelect.vue
similarity index 100%
rename from open-isle-cli/src/components/TagSelect.vue
rename to frontend/src/components/TagSelect.vue
diff --git a/open-isle-cli/src/components/UserList.vue b/frontend/src/components/UserList.vue
similarity index 100%
rename from open-isle-cli/src/components/UserList.vue
rename to frontend/src/components/UserList.vue
diff --git a/open-isle-cli/src/constants.js b/frontend/src/constants.js
similarity index 100%
rename from open-isle-cli/src/constants.js
rename to frontend/src/constants.js
diff --git a/open-isle-cli/src/main.js b/frontend/src/main.js
similarity index 92%
rename from open-isle-cli/src/main.js
rename to frontend/src/main.js
index 3642b4dac..e2461d2ac 100644
--- a/open-isle-cli/src/main.js
+++ b/frontend/src/main.js
@@ -9,8 +9,9 @@ import './assets/toast.css'
 // If you prefer Bootstrap style, replace with theme-bootstrap.css instead.
 import { useToast } from 'vue-toastification'
 import { checkToken, clearToken, isLogin } from './utils/auth'
-import { initTheme } from './utils/theme'
 import { loginWithGoogle } from './utils/google'
+import { initTheme } from './utils/theme'
+import { clearVditorStorage } from './utils/clearVditorStorage'
 
 // Configurable API domain and port
 // export const API_DOMAIN = 'http://127.0.0.1'
@@ -28,6 +29,7 @@ export const TWITTER_CLIENT_ID = 'ZTRTU05KSk9KTTJrTTdrVC1tc1E6MTpjaQ'
 export const toast = useToast()
 
 initTheme()
+clearVditorStorage()
 
 const app = createApp(App)
 app.use(router)
@@ -49,9 +51,10 @@ checkToken().then(valid => {
     clearToken()
   }
 
+  // 引导用户优先采用Google Login登录
   if (!isLogin()) {
     setTimeout(() => {
       loginWithGoogle()
     }, 3000)
   }
-})
+})
\ No newline at end of file
diff --git a/open-isle-cli/src/router/index.js b/frontend/src/router/index.js
similarity index 94%
rename from open-isle-cli/src/router/index.js
rename to frontend/src/router/index.js
index 6215fe757..3822c93a6 100644
--- a/open-isle-cli/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -16,6 +16,7 @@ import NotFoundPageView from '../views/NotFoundPageView.vue'
 import GithubCallbackPageView from '../views/GithubCallbackPageView.vue'
 import DiscordCallbackPageView from '../views/DiscordCallbackPageView.vue'
 import TwitterCallbackPageView from '../views/TwitterCallbackPageView.vue'
+import GoogleCallbackPageView from '../views/GoogleCallbackPageView.vue'
 import ForgotPasswordPageView from '../views/ForgotPasswordPageView.vue'
 
 const routes = [
@@ -104,6 +105,11 @@ const routes = [
     name: 'twitter-callback',
     component: TwitterCallbackPageView
   },
+  {
+    path: '/google-callback',
+    name: 'google-callback',
+    component: GoogleCallbackPageView
+  },
   {
     path: '/404',
     name: 'not-found',
diff --git a/open-isle-cli/src/utils/auth.js b/frontend/src/utils/auth.js
similarity index 100%
rename from open-isle-cli/src/utils/auth.js
rename to frontend/src/utils/auth.js
diff --git a/frontend/src/utils/clearVditorStorage.js b/frontend/src/utils/clearVditorStorage.js
new file mode 100644
index 000000000..41c42f9e3
--- /dev/null
+++ b/frontend/src/utils/clearVditorStorage.js
@@ -0,0 +1,7 @@
+export function clearVditorStorage() {
+  Object.keys(localStorage).forEach(key => {
+    if (key.startsWith('vditoreditor-') || key === 'vditor') {
+      localStorage.removeItem(key)
+    }
+  })
+}
diff --git a/open-isle-cli/src/utils/discord.js b/frontend/src/utils/discord.js
similarity index 100%
rename from open-isle-cli/src/utils/discord.js
rename to frontend/src/utils/discord.js
diff --git a/open-isle-cli/src/utils/github.js b/frontend/src/utils/github.js
similarity index 100%
rename from open-isle-cli/src/utils/github.js
rename to frontend/src/utils/github.js
diff --git a/open-isle-cli/src/utils/google.js b/frontend/src/utils/google.js
similarity index 75%
rename from open-isle-cli/src/utils/google.js
rename to frontend/src/utils/google.js
index 533d6c808..61ae67ccb 100644
--- a/open-isle-cli/src/utils/google.js
+++ b/frontend/src/utils/google.js
@@ -1,6 +1,7 @@
 import { API_BASE_URL, GOOGLE_CLIENT_ID, toast } from '../main'
 import { setToken, loadCurrentUser } from './auth'
 import { registerPush } from './push'
+import { WEBSITE_BASE_URL } from '../constants'
 
 export async function googleGetIdToken() {
   return new Promise((resolve, reject) => {
@@ -18,6 +19,17 @@ export async function googleGetIdToken() {
   })
 }
 
+export function googleAuthorize() {
+  if (!GOOGLE_CLIENT_ID) {
+    toast.error('Google 登录不可用, 请检查网络设置与VPN')
+    return
+  }
+  const redirectUri = `${WEBSITE_BASE_URL}/google-callback`
+  const nonce = Math.random().toString(36).substring(2)
+  const url = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${GOOGLE_CLIENT_ID}&redirect_uri=${encodeURIComponent(redirectUri)}&response_type=id_token&scope=openid%20email%20profile&nonce=${nonce}`
+  window.location.href = url
+}
+
 export async function googleAuthWithToken(idToken, redirect_success, redirect_not_approved) {
   try {
     const res = await fetch(`${API_BASE_URL}/api/auth/google`, {
@@ -36,7 +48,7 @@ export async function googleAuthWithToken(idToken, redirect_success, redirect_no
       toast.info('当前为注册审核模式，请填写注册理由')
       if (redirect_not_approved) redirect_not_approved(data.token)
     } else if (data.reason_code === 'IS_APPROVING') {
-      toast.info('您的注册理由正在审批中')      
+      toast.info('您的注册理由正在审批中')
       if (redirect_success) redirect_success()
     }
   } catch (e) {
diff --git a/open-isle-cli/src/utils/level.js b/frontend/src/utils/level.js
similarity index 100%
rename from open-isle-cli/src/utils/level.js
rename to frontend/src/utils/level.js
diff --git a/open-isle-cli/src/utils/markdown.js b/frontend/src/utils/markdown.js
similarity index 100%
rename from open-isle-cli/src/utils/markdown.js
rename to frontend/src/utils/markdown.js
diff --git a/open-isle-cli/src/utils/notification.js b/frontend/src/utils/notification.js
similarity index 100%
rename from open-isle-cli/src/utils/notification.js
rename to frontend/src/utils/notification.js
diff --git a/open-isle-cli/src/utils/push.js b/frontend/src/utils/push.js
similarity index 100%
rename from open-isle-cli/src/utils/push.js
rename to frontend/src/utils/push.js
diff --git a/open-isle-cli/src/utils/screen.js b/frontend/src/utils/screen.js
similarity index 100%
rename from open-isle-cli/src/utils/screen.js
rename to frontend/src/utils/screen.js
diff --git a/open-isle-cli/src/utils/theme.js b/frontend/src/utils/theme.js
similarity index 100%
rename from open-isle-cli/src/utils/theme.js
rename to frontend/src/utils/theme.js
diff --git a/open-isle-cli/src/utils/time.js b/frontend/src/utils/time.js
similarity index 100%
rename from open-isle-cli/src/utils/time.js
rename to frontend/src/utils/time.js
diff --git a/open-isle-cli/src/utils/twitter.js b/frontend/src/utils/twitter.js
similarity index 100%
rename from open-isle-cli/src/utils/twitter.js
rename to frontend/src/utils/twitter.js
diff --git a/open-isle-cli/src/utils/user.js b/frontend/src/utils/user.js
similarity index 100%
rename from open-isle-cli/src/utils/user.js
rename to frontend/src/utils/user.js
diff --git a/open-isle-cli/src/utils/vditor.js b/frontend/src/utils/vditor.js
similarity index 100%
rename from open-isle-cli/src/utils/vditor.js
rename to frontend/src/utils/vditor.js
diff --git a/open-isle-cli/src/views/AboutPageView.vue b/frontend/src/views/AboutPageView.vue
similarity index 100%
rename from open-isle-cli/src/views/AboutPageView.vue
rename to frontend/src/views/AboutPageView.vue
diff --git a/open-isle-cli/src/views/ActivityListPageView.vue b/frontend/src/views/ActivityListPageView.vue
similarity index 100%
rename from open-isle-cli/src/views/ActivityListPageView.vue
rename to frontend/src/views/ActivityListPageView.vue
diff --git a/frontend/src/views/DiscordCallbackPageView.vue b/frontend/src/views/DiscordCallbackPageView.vue
new file mode 100644
index 000000000..27316b431
--- /dev/null
+++ b/frontend/src/views/DiscordCallbackPageView.vue
@@ -0,0 +1,26 @@
+<template>
+  <CallbackPage />
+</template>
+
+<script>
+import CallbackPage from '../components/CallbackPage.vue'
+import { discordExchange } from '../utils/discord'
+
+export default {
+  name: 'DiscordCallbackPageView',
+  components: { CallbackPage },
+  async mounted() {
+    const url = new URL(window.location.href)
+    const code = url.searchParams.get('code')
+    const state = url.searchParams.get('state')
+    const result = await discordExchange(code, state, '')
+
+    if (result.needReason) {
+      this.$router.push('/signup-reason?token=' + result.token)
+    } else {
+      this.$router.push('/')
+    }
+  }
+}
+</script>
+
diff --git a/open-isle-cli/src/views/EditPostPageView.vue b/frontend/src/views/EditPostPageView.vue
similarity index 100%
rename from open-isle-cli/src/views/EditPostPageView.vue
rename to frontend/src/views/EditPostPageView.vue
diff --git a/open-isle-cli/src/views/ForgotPasswordPageView.vue b/frontend/src/views/ForgotPasswordPageView.vue
similarity index 100%
rename from open-isle-cli/src/views/ForgotPasswordPageView.vue
rename to frontend/src/views/ForgotPasswordPageView.vue
diff --git a/frontend/src/views/GithubCallbackPageView.vue b/frontend/src/views/GithubCallbackPageView.vue
new file mode 100644
index 000000000..873bb6ba0
--- /dev/null
+++ b/frontend/src/views/GithubCallbackPageView.vue
@@ -0,0 +1,26 @@
+<template>
+  <CallbackPage />
+</template>
+
+<script>
+import CallbackPage from '../components/CallbackPage.vue'
+import { githubExchange } from '../utils/github'
+
+export default {
+  name: 'GithubCallbackPageView',
+  components: { CallbackPage },
+  async mounted() {
+    const url = new URL(window.location.href)
+    const code = url.searchParams.get('code')
+    const state = url.searchParams.get('state')
+    const result = await githubExchange(code, state, '')
+
+    if (result.needReason) {
+      this.$router.push('/signup-reason?token=' + result.token)
+    } else {
+      this.$router.push('/')
+    }
+  }
+}
+</script>
+
diff --git a/frontend/src/views/GoogleCallbackPageView.vue b/frontend/src/views/GoogleCallbackPageView.vue
new file mode 100644
index 000000000..2a5efef19
--- /dev/null
+++ b/frontend/src/views/GoogleCallbackPageView.vue
@@ -0,0 +1,27 @@
+<template>
+  <CallbackPage />
+</template>
+
+<script>
+import CallbackPage from '../components/CallbackPage.vue'
+import { googleAuthWithToken } from '../utils/google'
+
+export default {
+  name: 'GoogleCallbackPageView',
+  components: { CallbackPage },
+  async mounted() {
+    const hash = new URLSearchParams(window.location.hash.substring(1))
+    const idToken = hash.get('id_token')
+    if (idToken) {
+      await googleAuthWithToken(idToken, () => {
+        this.$router.push('/')
+      }, token => {
+        this.$router.push('/signup-reason?token=' + token)
+      })
+    } else {
+      this.$router.push('/login')
+    }
+  }
+}
+</script>
+
diff --git a/open-isle-cli/src/views/HomePageView.vue b/frontend/src/views/HomePageView.vue
similarity index 98%
rename from open-isle-cli/src/views/HomePageView.vue
rename to frontend/src/views/HomePageView.vue
index dbd6fd7f5..8fea56c14 100644
--- a/open-isle-cli/src/views/HomePageView.vue
+++ b/frontend/src/views/HomePageView.vue
@@ -165,6 +165,9 @@ export default {
     const pageSize = 10
     const allLoaded = ref(false)
 
+    const countComments = (list) =>
+      list.reduce((sum, c) => sum + 1 + countComments(c.replies || []), 0)
+
     const loadOptions = async () => {
       if (selectedCategory.value && !isNaN(selectedCategory.value)) {
         try {
@@ -254,7 +257,7 @@ export default {
             category: p.category,
             tags: p.tags || [],
             members: (p.participants || []).map(m => ({ id: m.id, avatar: m.avatar })),
-            comments: (p.comments || []).length,
+            comments: countComments(p.comments || []),
             views: p.views,
             time: TimeManager.format(p.createdAt),
             pinned: !!p.pinnedAt
@@ -291,7 +294,7 @@ export default {
             category: p.category,
             tags: p.tags || [],
             members: (p.participants || []).map(m => ({ id: m.id, avatar: m.avatar })),
-            comments: (p.comments || []).length,
+            comments: countComments(p.comments || []),
             views: p.views,
             time: TimeManager.format(p.createdAt),
             pinned: !!p.pinnedAt
@@ -328,7 +331,7 @@ export default {
             category: p.category,
             tags: p.tags || [],
             members: (p.participants || []).map(m => ({ id: m.id, avatar: m.avatar })),
-            comments: (p.comments || []).length,
+            comments: countComments(p.comments || []),
             views: p.views,
             time: TimeManager.format(p.lastReplyAt || p.createdAt),
             pinned: !!p.pinnedAt
@@ -483,6 +486,7 @@ export default {
   flex-direction: column;
   align-items: center;
   width: 100%;
+  padding-bottom: 100px;
 }
 
 .article-header-container {
@@ -715,6 +719,7 @@ export default {
   .article-item-description {
     margin-top: 2px;
     font-size: 10px;
+    max-width: 100%;
   }
 
   .main-info-text {
diff --git a/open-isle-cli/src/views/LoginPageView.vue b/frontend/src/views/LoginPageView.vue
similarity index 97%
rename from open-isle-cli/src/views/LoginPageView.vue
rename to frontend/src/views/LoginPageView.vue
index cba93fb48..4a33fb508 100644
--- a/open-isle-cli/src/views/LoginPageView.vue
+++ b/frontend/src/views/LoginPageView.vue
@@ -31,7 +31,7 @@
     </div>
 
     <div class="other-login-page-content">
-      <div class="login-page-button" @click="loginWithGoogle">
+      <div class="login-page-button" @click="googleAuthorize">
         <img class="login-page-button-icon" src="../assets/icons/google.svg" alt="Google Logo" />
         <div class="login-page-button-text">Google 登录</div>
       </div>
@@ -54,7 +54,7 @@
 <script>
 import { API_BASE_URL, toast } from '../main'
 import { setToken, loadCurrentUser } from '../utils/auth'
-import { loginWithGoogle } from '../utils/google'
+import { googleAuthorize } from '../utils/google'
 import { githubAuthorize } from '../utils/github'
 import { discordAuthorize } from '../utils/discord'
 import { twitterAuthorize } from '../utils/twitter'
@@ -64,8 +64,8 @@ export default {
   name: 'LoginPageView',
   components: { BaseInput },
   setup() {
-    return { loginWithGoogle }
-  }, 
+    return { googleAuthorize }
+  },
   data() {
     return {
       username: '',
diff --git a/open-isle-cli/src/views/MessagePageView.vue b/frontend/src/views/MessagePageView.vue
similarity index 96%
rename from open-isle-cli/src/views/MessagePageView.vue
rename to frontend/src/views/MessagePageView.vue
index ae0d64d1f..75c5a357c 100644
--- a/open-isle-cli/src/views/MessagePageView.vue
+++ b/frontend/src/views/MessagePageView.vue
@@ -118,15 +118,18 @@
               <template v-else-if="item.type === 'USER_ACTIVITY' && item.parentComment">
                 <NotificationContainer :item="item" :markRead="markRead">
                   你关注的
-                  <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/users/${item.comment.author.id}`">
+                  <router-link class="notif-content-text" @click="markRead(item.id)"
+                    :to="`/users/${item.comment.author.id}`">
                     {{ item.comment.author.username }}
                   </router-link>
                   在 对评论
-                  <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/posts/${item.post.id}#comment-${item.parentComment.id}`">
+                  <router-link class="notif-content-text" @click="markRead(item.id)"
+                    :to="`/posts/${item.post.id}#comment-${item.parentComment.id}`">
                     {{ stripMarkdownLength(item.parentComment.content, 100) }}
                   </router-link>
                   回复了
-                  <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/posts/${item.post.id}#comment-${item.comment.id}`">
+                  <router-link class="notif-content-text" @click="markRead(item.id)"
+                    :to="`/posts/${item.post.id}#comment-${item.comment.id}`">
                     {{ stripMarkdownLength(item.comment.content, 100) }}
                   </router-link>
                 </NotificationContainer>
@@ -134,15 +137,17 @@
               <template v-else-if="item.type === 'USER_ACTIVITY'">
                 <NotificationContainer :item="item" :markRead="markRead">
                   你关注的
-                  <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/users/${item.comment.author.id}`">
+                  <router-link class="notif-content-text" @click="markRead(item.id)"
+                    :to="`/users/${item.comment.author.id}`">
                     {{ item.comment.author.username }}
                   </router-link>
                   在文章
                   <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/posts/${item.post.id}`">
-                      {{ stripMarkdownLength(item.post.title, 100) }}
+                    {{ stripMarkdownLength(item.post.title, 100) }}
                   </router-link>
                   下面评论了
-                  <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/posts/${item.post.id}#comment-${item.comment.id}`">
+                  <router-link class="notif-content-text" @click="markRead(item.id)"
+                    :to="`/posts/${item.post.id}#comment-${item.comment.id}`">
                     {{ stripMarkdownLength(item.comment.content, 100) }}
                   </router-link>
                 </NotificationContainer>
@@ -153,7 +158,8 @@
                     {{ item.fromUser.username }}
                   </router-link>
                   在评论中提到了你：
-                  <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/posts/${item.post.id}#comment-${item.comment.id}`">
+                  <router-link class="notif-content-text" @click="markRead(item.id)"
+                    :to="`/posts/${item.post.id}#comment-${item.comment.id}`">
                     {{ stripMarkdownLength(item.comment.content, 100) }}
                   </router-link>
                 </NotificationContainer>
@@ -333,7 +339,11 @@ export default {
           if (n.type !== 'REGISTER_REQUEST') n.read = true
         })
         await fetchUnreadCount()
-        toast.success('已读所有消息（注册请求除外）')
+        if (authState.role === 'ADMIN') {
+          toast.success('已读所有消息（注册请求除外）')
+        } else {
+          toast.success('已读所有消息')
+        }
       }
     }
 
@@ -366,7 +376,18 @@ export default {
       MIND_BLOWN: '🤯',
       POOP: '💩',
       CLOWN: '🤡',
-      SKULL: '☠️'
+      SKULL: '☠️',
+      FIRE: '🔥',
+      EYES: '👀',
+      FROWN: '☹️',
+      HOT: '🥵',
+      EAGLE: '🦅',
+      SPIDER: '🕷️',
+      BAT: '🦇',
+      CHINA: '🇨🇳',
+      USA: '🇺🇸',
+      JAPAN: '🇯🇵',
+      KOREA: '🇰🇷'
     }
 
     const fetchNotifications = async () => {
@@ -692,6 +713,7 @@ export default {
   font-weight: bold;
   color: var(--primary-color) !important;
   text-decoration: none !important;
+  word-break: break-all;
 }
 
 .optional-buttons {
@@ -752,5 +774,9 @@ export default {
   .has_read_button {
     display: none;
   }
+
+  .message-page {
+    overflow-x: hidden;
+  }
 }
 </style>
diff --git a/open-isle-cli/src/views/NewPostPageView.vue b/frontend/src/views/NewPostPageView.vue
similarity index 100%
rename from open-isle-cli/src/views/NewPostPageView.vue
rename to frontend/src/views/NewPostPageView.vue
diff --git a/open-isle-cli/src/views/NotFoundPageView.vue b/frontend/src/views/NotFoundPageView.vue
similarity index 100%
rename from open-isle-cli/src/views/NotFoundPageView.vue
rename to frontend/src/views/NotFoundPageView.vue
diff --git a/open-isle-cli/src/views/PostPageView.vue b/frontend/src/views/PostPageView.vue
similarity index 96%
rename from open-isle-cli/src/views/PostPageView.vue
rename to frontend/src/views/PostPageView.vue
index 470d2f698..89d6967ce 100644
--- a/open-isle-cli/src/views/PostPageView.vue
+++ b/frontend/src/views/PostPageView.vue
@@ -89,7 +89,7 @@
     <div class="post-page-scroller-container">
       <div class="scroller">
         <div v-if="isWaitingFetchingPost" class="scroller-time">loading...</div>
-        <div v-else class="scroller-time">{{ postTime }}</div>
+        <div v-else class="scroller-time">{{ scrollerTopTime }}</div>
         <div class="scroller-middle">
           <input type="range" class="scroller-range" :max="totalPosts" :min="1" v-model.number="currentIndex"
             @input="onSliderInput" />
@@ -216,17 +216,18 @@ export default {
       }
     }
 
-    const mapComment = c => ({
+    const mapComment = (c, parentUserName = '', level = 0) => ({
       id: c.id,
       userName: c.author.username,
       time: TimeManager.format(c.createdAt),
       avatar: c.author.avatar,
       text: c.content,
       reactions: c.reactions || [],
-      reply: (c.replies || []).map(mapComment),
-      openReplies: false,
+      reply: (c.replies || []).map(r => mapComment(r, c.author.username, level + 1)),
+      openReplies: level === 0,
       src: c.author.avatar,
-      iconClick: () => router.push(`/users/${c.author.id}`)
+      iconClick: () => router.push(`/users/${c.author.id}`),
+      parentUserName: parentUserName
     })
 
     const getTopRelativeTo = (el, container) => {
@@ -323,6 +324,12 @@ export default {
     const lastReplyTime = computed(() =>
       comments.value.length ? comments.value[comments.value.length - 1].time : postTime.value
     )
+    const firstReplyTime = computed(() =>
+      comments.value.length ? comments.value[0].time : postTime.value
+    )
+    const scrollerTopTime = computed(() =>
+      commentSort.value === 'OLDEST' ? postTime.value : firstReplyTime.value
+    )
 
     watch(
       () => comments.value.length,
@@ -351,8 +358,10 @@ export default {
       }
     }
 
-    const onSliderInput = () => {
-      const target = postItems.value[currentIndex.value - 1]
+    const onSliderInput = (e) => {
+      const index = Number(e.target.value)
+      currentIndex.value = index
+      const target = postItems.value[index - 1]
       if (target && mainContainer.value) {
         const top = getTopRelativeTo(target, mainContainer.value)
         mainContainer.value.scrollTo({ top, behavior: 'instant' })
@@ -537,6 +546,7 @@ export default {
         if (res.ok) {
           const data = await res.json()
           comments.value = data.map(mapComment)
+          isFetchingComments.value = false
           await nextTick()
           gatherPostItems()
         }
@@ -584,6 +594,7 @@ export default {
       tags,
       comments,
       postTime,
+      scrollerTopTime,
       lastReplyTime,
       postItems,
       mainContainer,
diff --git a/open-isle-cli/src/views/ProfileView.vue b/frontend/src/views/ProfileView.vue
similarity index 100%
rename from open-isle-cli/src/views/ProfileView.vue
rename to frontend/src/views/ProfileView.vue
diff --git a/open-isle-cli/src/views/SettingsPageView.vue b/frontend/src/views/SettingsPageView.vue
similarity index 100%
rename from open-isle-cli/src/views/SettingsPageView.vue
rename to frontend/src/views/SettingsPageView.vue
diff --git a/open-isle-cli/src/views/SignupPageView.vue b/frontend/src/views/SignupPageView.vue
similarity index 98%
rename from open-isle-cli/src/views/SignupPageView.vue
rename to frontend/src/views/SignupPageView.vue
index 9a5f0e0d2..eea683ebd 100644
--- a/open-isle-cli/src/views/SignupPageView.vue
+++ b/frontend/src/views/SignupPageView.vue
@@ -67,7 +67,7 @@
     </div>
 
     <div class="other-signup-page-content">
-      <div class="signup-page-button" @click="loginWithGoogle">
+      <div class="signup-page-button" @click="googleAuthorize">
         <img class="signup-page-button-icon" src="../assets/icons/google.svg" alt="Google Logo" />
         <div class="signup-page-button-text">Google 注册</div>
       </div>
@@ -89,7 +89,7 @@
 
 <script>
 import { API_BASE_URL, toast } from '../main'
-import { loginWithGoogle } from '../utils/google'
+import { googleAuthorize } from '../utils/google'
 import { githubAuthorize } from '../utils/github'
 import { discordAuthorize } from '../utils/discord'
 import { twitterAuthorize } from '../utils/twitter'
@@ -98,7 +98,7 @@ export default {
   name: 'SignupPageView',
   components: { BaseInput },
   setup() {
-    return { loginWithGoogle }
+    return { googleAuthorize }
   },
   data() {
     return {
diff --git a/open-isle-cli/src/views/SignupReasonPageView.vue b/frontend/src/views/SignupReasonPageView.vue
similarity index 100%
rename from open-isle-cli/src/views/SignupReasonPageView.vue
rename to frontend/src/views/SignupReasonPageView.vue
diff --git a/open-isle-cli/src/views/SiteStatsPageView.vue b/frontend/src/views/SiteStatsPageView.vue
similarity index 100%
rename from open-isle-cli/src/views/SiteStatsPageView.vue
rename to frontend/src/views/SiteStatsPageView.vue
diff --git a/frontend/src/views/TwitterCallbackPageView.vue b/frontend/src/views/TwitterCallbackPageView.vue
new file mode 100644
index 000000000..940d49d53
--- /dev/null
+++ b/frontend/src/views/TwitterCallbackPageView.vue
@@ -0,0 +1,26 @@
+<template>
+  <CallbackPage />
+</template>
+
+<script>
+import CallbackPage from '../components/CallbackPage.vue'
+import { twitterExchange } from '../utils/twitter'
+
+export default {
+  name: 'TwitterCallbackPageView',
+  components: { CallbackPage },
+  async mounted() {
+    const url = new URL(window.location.href)
+    const code = url.searchParams.get('code')
+    const state = url.searchParams.get('state')
+    const result = await twitterExchange(code, state, '')
+
+    if (result.needReason) {
+      this.$router.push('/signup-reason?token=' + result.token)
+    } else {
+      this.$router.push('/')
+    }
+  }
+}
+</script>
+
diff --git a/open-isle-cli/vue.config.js b/frontend/vue.config.js
similarity index 100%
rename from open-isle-cli/vue.config.js
rename to frontend/vue.config.js
diff --git a/open-isle-cli/src/views/DiscordCallbackPageView.vue b/open-isle-cli/src/views/DiscordCallbackPageView.vue
deleted file mode 100644
index 3472ac2e7..000000000
--- a/open-isle-cli/src/views/DiscordCallbackPageView.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-  <div class="discord-callback-page">
-    <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
-    <div class="discord-callback-page-text">Magic is happening...</div>
-  </div>
-</template>
-
-<script>
-import { discordExchange } from '../utils/discord'
-import { hatch } from 'ldrs'
-
-hatch.register()
-
-export default {
-  name: 'DiscordCallbackPageView',
-  async mounted() {
-    const url = new URL(window.location.href)
-    const code = url.searchParams.get('code')
-    const state = url.searchParams.get('state')
-    const result = await discordExchange(code, state, '')
-
-    if (result.needReason) {
-      this.$router.push('/signup-reason?token=' + result.token)
-    } else {
-      this.$router.push('/')
-    }
-  }
-}
-</script>
-
-<style scoped>
-.discord-callback-page {
-  background-color: var(--background-color);
-  height: calc(100vh - var(--header-height));
-  padding-top: var(--header-height);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.discord-callback-page-text {
-  margin-top: 25px;
-  font-size: 16px;
-  color: var(--primary-color);
-  font-weight: bold;
-}
-</style>
diff --git a/open-isle-cli/src/views/GithubCallbackPageView.vue b/open-isle-cli/src/views/GithubCallbackPageView.vue
deleted file mode 100644
index 5348df375..000000000
--- a/open-isle-cli/src/views/GithubCallbackPageView.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-  <div class="github-callback-page">
-    <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
-    <div class="github-callback-page-text">Magic is happening...</div>
-  </div>
-</template>
-
-<script>
-import { githubExchange } from '../utils/github'
-import { hatch } from 'ldrs'
-hatch.register()
-
-
-export default {
-  name: 'GithubCallbackPageView',
-  async mounted() {
-    const url = new URL(window.location.href)
-    const code = url.searchParams.get('code')
-    const state = url.searchParams.get('state')
-    const result = await githubExchange(code, state, '')
-
-    if (result.needReason) {
-      this.$router.push('/signup-reason?token=' + result.token)
-    } else {
-      this.$router.push('/')
-    }
-  }
-}
-</script>
-
-<style scoped>
-.github-callback-page {
-  background-color: var(--background-color);
-  height: calc(100vh - var(--header-height));
-  padding-top: var(--header-height);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.github-callback-page-text {
-  margin-top: 25px;
-  font-size: 16px;
-  color: var(--primary-color);
-  font-weight: bold;
-}
-</style>
diff --git a/open-isle-cli/src/views/TwitterCallbackPageView.vue b/open-isle-cli/src/views/TwitterCallbackPageView.vue
deleted file mode 100644
index b5890edbb..000000000
--- a/open-isle-cli/src/views/TwitterCallbackPageView.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-  <div class="twitter-callback-page">
-    <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
-    <div class="twitter-callback-page-text">Magic is happening...</div>
-  </div>
-</template>
-
-<script>
-import { twitterExchange } from '../utils/twitter'
-import { hatch } from 'ldrs'
-hatch.register()
-
-export default {
-  name: 'TwitterCallbackPageView',
-  async mounted() {
-    const url = new URL(window.location.href)
-    const code = url.searchParams.get('code')
-    const state = url.searchParams.get('state')
-    const result = await twitterExchange(code, state, '')
-
-    if (result.needReason) {
-      this.$router.push('/signup-reason?token=' + result.token)
-    } else {
-      this.$router.push('/')
-    }
-  }
-}
-</script>
-
-<style scoped>
-.twitter-callback-page {
-  background-color: var(--background-color);
-  height: calc(100vh - var(--header-height));
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding-top: var(--header-height);
-}
-
-.twitter-callback-page-text {
-  margin-top: 25px;
-  font-size: 16px;
-  color: var(--primary-color);
-  font-weight: bold;
-}
-</style>
diff --git a/package-lock.json b/package-lock.json
deleted file mode 100644
index 5165375a5..000000000
--- a/package-lock.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "OpenIsle",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "dependencies": {
-        "ldrs": "^1.1.7"
-      }
-    },
-    "node_modules/ldrs": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/ldrs/-/ldrs-1.1.7.tgz",
-      "integrity": "sha512-rZnfveeY1SeS3F3ifUVd9AVGTFHmQ0qzp5fuszAirnrVkjqJBLrm99vtr/Mxbby4XgadUYv+DsFqyk2p4FV40Q==",
-      "license": "MIT"
-    }
-  }
-}
diff --git a/package.json b/package.json
deleted file mode 100644
index c79ceca0e..000000000
--- a/package.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "dependencies": {
-    "ldrs": "^1.1.7"
-  }
-}