diff --git a/web/src/components/comment-item.vue b/web/src/components/comment-item.vue
index 677dbeea..4d0834c0 100644
--- a/web/src/components/comment-item.vue
+++ b/web/src/components/comment-item.vue
@@ -25,12 +25,6 @@
                 <div class="opt-wrap">
                     <span class="timestamp">
                         {{  comment.ip_loc}}
-                        <!-- {{
-                            comment.ip_loc
-                                ? comment.ip_loc + ' · '
-                                : comment.ip_loc
-                        }}
-                        {{ formatPrettyTime(comment.created_on, store.state.collapsedLeft) }} -->
                     </span>
 
                     <n-popconfirm
@@ -104,7 +98,6 @@
 import { ref, computed } from 'vue';
 import { useStore } from 'vuex';
 import { useRouter } from 'vue-router';
-import { formatPrettyTime } from '@/utils/formatTime';
 import { parsePostTag } from '@/utils/content';
 import { Trash } from '@vicons/tabler';
 import { deleteComment } from '@/api/post';
diff --git a/web/src/components/compose-reply.vue b/web/src/components/compose-reply.vue
index 317e41e6..3360dcb1 100644
--- a/web/src/components/compose-reply.vue
+++ b/web/src/components/compose-reply.vue
@@ -5,22 +5,41 @@
                 {{ formatPrettyTime(timestamp, store.state.collapsedLeft) }}
             </span>
             <div
+                v-if="!store.state.userLogined"
+                class="action-item"
+            >
+                <n-icon size="medium">
+                    <thumb-up-outlined/>
+                </n-icon>
+                <span class="upvote-count">{{ thumbsUpCount }}</span>
+            </div>
+            <div
+                v-if="store.state.userLogined"
                 class="action-item hover"
-                @click.stop=""
+                @click.stop="handleThumbsUp"
+            >
+                <n-icon size="medium">
+                    <thumb-up-outlined v-if="!hasThumbsUp" />
+                    <thumb-up-twotone v-if="hasThumbsUp" color="#18a058" />
+                </n-icon>
+                <span class="upvote-count">{{ thumbsUpCount }}</span>
+            </div>
+            <div
+                v-if="!store.state.userLogined"
+                class="action-item"
             >
                 <n-icon size="medium">
-                    <thumb-up-outlined v-if="!hasUpvote" />
-                    <thumb-up-twotone v-if="hasUpvote" color="#18a058" />
+                    <thumb-down-outlined />
                 </n-icon>
-                <span class="upvote-count">1000</span>
             </div>
             <div
+                v-if="store.state.userLogined"
                 class="action-item hover"
-                @click.stop=""
+                @click.stop="handleThumbsDown"
             >
                 <n-icon size="medium">
-                    <thumb-down-outlined v-if="!hasDownvote" />
-                    <thumb-down-twotone v-if="hasDownvote" color="#18a058" />
+                    <thumb-down-outlined v-if="!hasThumbsDown" />
+                    <thumb-down-twotone v-if="hasThumbsDown" color="#18a058" />
                 </n-icon>
             </div>
             <span class="show" v-if="store.state.userLogined && !showReply" @click="switchReply(true)">
@@ -73,8 +92,10 @@ import {
     ThumbDownOutlined,
 } from '@vicons/material';
 
-const hasUpvote = ref(false)
-const hasDownvote = ref(true)
+const hasThumbsUp = ref(false)
+const hasThumbsDown = ref(false)
+const thumbsUpCount = ref(0)
+
 const props = withDefaults(defineProps<{
     timestamp: number,
     commentId: number,
@@ -95,6 +116,27 @@ const inputInstRef = ref<InputInst>();
 const showReply = ref(false);
 const replyContent = ref('');
 const submitting = ref(false);
+
+const handleThumbsUp = () => {
+    // TODO
+    hasThumbsUp.value = !hasThumbsUp.value
+    if (hasThumbsUp.value) {
+        thumbsUpCount.value++
+        hasThumbsDown.value = false
+    } else {
+        thumbsUpCount.value--
+    }
+};
+const handleThumbsDown = () => {
+    // TODO
+    hasThumbsDown.value = !hasThumbsDown.value
+    if (hasThumbsDown.value) {
+        if (hasThumbsUp.value) {
+            thumbsUpCount.value--
+            hasThumbsUp.value = false
+        }
+    }
+};
 const switchReply = (status: boolean) => {
     showReply.value = status;
 
diff --git a/web/src/components/reply-item.vue b/web/src/components/reply-item.vue
index 92662e36..8795edd6 100644
--- a/web/src/components/reply-item.vue
+++ b/web/src/components/reply-item.vue
@@ -28,12 +28,6 @@
             </div>
             <div class="timestamp">
                 {{ props.reply.ip_loc }}
-                <!-- {{
-                    props.reply.ip_loc
-                        ? props.reply.ip_loc + ' · '
-                        : props.reply.ip_loc
-                }} -->
-                <!-- {{ formatPrettyTime(props.reply.created_on, store.state.collapsedLeft) }} -->
                 <n-popconfirm
                     v-if="
                         store.state.userInfo.is_admin ||
@@ -64,25 +58,45 @@
                     {{ formatPrettyTime(props.reply.created_on, store.state.collapsedLeft) }}
                 </span>
                 <div
-                class="action-item hover"
-                @click.stop=""
+                    v-if="!store.state.userLogined"
+                    class="action-item"
+                    @click.stop=""
+                >
+                    <n-icon size="medium">
+                        <thumb-up-outlined/>
+                    </n-icon>
+                    <span class="upvote-count">{{ thumbsUpCount }}</span>
+                </div>
+                <div
+                    v-if="store.state.userLogined"
+                    class="action-item hover"
+                    @click.stop="handleThumbsUp"
+                >
+                    <n-icon size="medium">
+                        <thumb-up-outlined v-if="!hasThumbsUp" />
+                        <thumb-up-twotone v-if="hasThumbsUp" color="#18a058" />
+                    </n-icon>
+                    <span class="upvote-count">{{ thumbsUpCount }}</span>
+            </div>
+            <div
+                v-if="!store.state.userLogined"
+                class="action-item"
             >
                 <n-icon size="medium">
-                    <thumb-up-outlined v-if="!hasUpvote" />
-                    <thumb-up-twotone v-if="hasUpvote" color="#18a058" />
+                    <thumb-down-outlined />
                 </n-icon>
-                <span class="upvote-count">100</span>
             </div>
             <div
+                v-if="store.state.userLogined"
                 class="action-item hover"
-                @click.stop=""
+                @click.stop="handleThumbsDown"
             >
                 <n-icon size="medium">
-                    <thumb-down-outlined v-if="!hasDownvote" />
-                    <thumb-down-twotone v-if="hasDownvote" color="#18a058" />
+                    <thumb-down-outlined v-if="!hasThumbsDown" />
+                    <thumb-down-twotone v-if="hasThumbsDown" color="#18a058" />
                 </n-icon>
             </div>
-                <span  v-if="store.state.userLogined" class="show" @click="focusReply"> 回复 </span>
+            <span  v-if="store.state.userLogined" class="show" @click="focusReply"> 回复 </span>
             </div>
         </div>
     </div>
@@ -101,8 +115,9 @@ import {
     ThumbDownOutlined,
 } from '@vicons/material';
 
-const hasUpvote = ref(true)
-const hasDownvote = ref(false)
+const hasThumbsUp = ref(false)
+const hasThumbsDown = ref(false)
+const thumbsUpCount = ref(0)
 
 const props = withDefaults(defineProps<{
     reply: Item.ReplyProps,
@@ -113,6 +128,26 @@ const emit = defineEmits<{
     (e: 'reload'): void
 }>();
 
+const handleThumbsUp = () => {
+    // TODO
+    hasThumbsUp.value = !hasThumbsUp.value
+    if (hasThumbsUp.value) {
+        thumbsUpCount.value++
+        hasThumbsDown.value = false
+    } else {
+        thumbsUpCount.value--
+    }
+};
+const handleThumbsDown = () => {
+    // TODO
+    hasThumbsDown.value = !hasThumbsDown.value
+    if (hasThumbsDown.value) {
+        if (hasThumbsUp.value) {
+            thumbsUpCount.value--
+            hasThumbsUp.value = false
+        }
+    }
+};
 const focusReply = () => {
     emit('focusReply', props.reply);
 };
@@ -159,8 +194,6 @@ const execDelAction = () => {
         .timestamp {
             opacity: 0.75;
             text-align: right;
-            display: flex;
-            align-items: center;
             max-width: 50%;
             overflow: hidden;
             text-overflow: ellipsis;