diff --git a/src/components/common/ReactionComment.tsx b/src/components/common/ReactionComment.tsx
new file mode 100644
index 00000000..634257ee
--- /dev/null
+++ b/src/components/common/ReactionComment.tsx
@@ -0,0 +1,69 @@
+"use client"
+
+import { Tooltip } from "~/components/ui/Tooltip"
+import { useTranslation } from "~/lib/i18n/client"
+import { calculateElementTop, cn } from "~/lib/utils"
+import { useCheckComment, useGetComments } from "~/queries/page"
+
+import { Button } from "../ui/Button"
+
+export const ReactionComment: React.FC<{
+  characterId?: number
+  noteId?: number
+}> = ({ characterId, noteId }) => {
+  const { t } = useTranslation("common")
+
+  const comments = useGetComments({
+    characterId: characterId,
+    noteId: noteId,
+  })
+
+  const isCommented = useCheckComment({
+    noteCharacterId: characterId,
+    noteId: noteId,
+  })
+
+  const comment = () => {
+    const targetElement = document.querySelector("#comments") as HTMLElement
+    window.scrollTo({
+      top: calculateElementTop(targetElement) - 20,
+      behavior: "smooth",
+    })
+  }
+
+  return (
+    <>
+      <div className={cn("xlog-reactions-comment flex items-center sm:mb-0")}>
+        <Button
+          variant="comment"
+          variantColor="light"
+          className={cn(
+            "flex items-center",
+            {
+              active: isCommented.data?.count,
+            },
+            "!h-auto flex-col",
+          )}
+          isAutoWidth={true}
+          onClick={comment}
+        >
+          {(() => {
+            const inner = (
+              <i
+                className={cn("icon-[mingcute--comment-fill]", "text-[33px]")}
+              />
+            )
+            return (
+              <Tooltip label={t("Comments")} placement="right">
+                {inner}
+              </Tooltip>
+            )
+          })()}
+          <span className={cn("leading-snug")}>
+            {comments.data?.pages?.[0]?.count}
+          </span>
+        </Button>
+      </div>
+    </>
+  )
+}
diff --git a/src/components/common/ReactionLike.tsx b/src/components/common/ReactionLike.tsx
index db47bef1..b90d4c98 100644
--- a/src/components/common/ReactionLike.tsx
+++ b/src/components/common/ReactionLike.tsx
@@ -115,6 +115,7 @@ export const ReactionLike: React.FC<{
       <div className={cn("xlog-reactions-like flex items-center sm:mb-0")}>
         <Button
           variant="like"
+          variantColor={vertical ? "light" : undefined}
           className={cn(
             "flex items-center",
             {
@@ -129,7 +130,7 @@ export const ReactionLike: React.FC<{
         >
           {(() => {
             const inner = (
-              <span
+              <i
                 className={cn(
                   "icon-[mingcute--thumb-up-2-fill]",
                   size === "sm"
@@ -137,12 +138,12 @@ export const ReactionLike: React.FC<{
                     : vertical
                     ? "text-[33px]"
                     : "text-[38px]",
-                  vertical ? "" : "mr-1",
+                  !vertical && "mr-1",
                 )}
-              ></span>
+              ></i>
             )
             return size !== "sm" ? (
-              <Tooltip label={t("Like")} placement="top">
+              <Tooltip label={t("Like")} placement={vertical ? "right" : "top"}>
                 {inner}
               </Tooltip>
             ) : (
diff --git a/src/components/common/ReactionMint.tsx b/src/components/common/ReactionMint.tsx
index 44a80dd4..22e4dea6 100644
--- a/src/components/common/ReactionMint.tsx
+++ b/src/components/common/ReactionMint.tsx
@@ -6,7 +6,6 @@ import { useEffect, useMemo, useRef, useState } from "react"
 import { useAccountState } from "@crossbell/connect-kit"
 
 import { CharacterList } from "~/components/common/CharacterList"
-import { MintIcon } from "~/components/icons/MintIcon"
 import { Modal } from "~/components/ui/Modal"
 import { Tooltip } from "~/components/ui/Tooltip"
 import { UniLink } from "~/components/ui/UniLink"
@@ -105,6 +104,7 @@ export const ReactionMint: React.FC<{
       <div className="xlog-reactions-mint flex items-center">
         <Button
           variant="collect"
+          variantColor={vertical ? "light" : undefined}
           className={cn(
             "flex items-center",
             {
@@ -119,18 +119,22 @@ export const ReactionMint: React.FC<{
         >
           {(() => {
             const inner = (
-              <MintIcon
+              <i
                 className={cn(
+                  "icon-[mingcute--magic-1-fill]",
                   size === "sm"
-                    ? "w-3 h-3"
+                    ? "text-base"
                     : vertical
-                    ? "w-[33px] h-[33px] p-[2px]"
-                    : "w-[38px] h-[38px] p-[3px]",
+                    ? "text-[33px]"
+                    : "text-[38px]",
                 )}
-              />
+              ></i>
             )
             return size !== "sm" ? (
-              <Tooltip label={t("Mint to an NFT")} placement="top">
+              <Tooltip
+                label={t("Mint to an NFT")}
+                placement={vertical ? "right" : "top"}
+              >
                 {inner}
               </Tooltip>
             ) : (
diff --git a/src/components/common/ReactionTip.tsx b/src/components/common/ReactionTip.tsx
index 6e2b54d3..fe32c998 100644
--- a/src/components/common/ReactionTip.tsx
+++ b/src/components/common/ReactionTip.tsx
@@ -66,6 +66,7 @@ export const ReactionTip: React.FC<{
       <div className="xlog-reactions-tip flex items-center">
         <Button
           variant="tip"
+          variantColor={vertical ? "light" : undefined}
           className={cn(
             "flex items-center",
             {
@@ -87,7 +88,7 @@ export const ReactionTip: React.FC<{
               />
             )
             return (
-              <Tooltip label={t("Tip")} placement="top">
+              <Tooltip label={t("Tip")} placement={vertical ? "right" : "top"}>
                 {inner}
               </Tooltip>
             )
diff --git a/src/components/site/PostActions.tsx b/src/components/site/PostActions.tsx
index 3bdfb7d8..d391b0ee 100644
--- a/src/components/site/PostActions.tsx
+++ b/src/components/site/PostActions.tsx
@@ -1,11 +1,10 @@
 import React, { useEffect, useRef, useState } from "react"
 
+import { ReactionComment } from "~/components/common/ReactionComment"
 import { ReactionLike } from "~/components/common/ReactionLike"
 import { ReactionMint } from "~/components/common/ReactionMint"
 import { ReactionTip } from "~/components/common/ReactionTip"
 import { ExpandedCharacter, ExpandedNote } from "~/lib/types"
-import { calculateElementTop } from "~/lib/utils"
-import { useGetComments } from "~/queries/page"
 
 export const PostActions: React.FC<{
   page?: ExpandedNote
@@ -25,11 +24,6 @@ export const PostActions: React.FC<{
     }
   }, [containerRef])
 
-  const comments = useGetComments({
-    characterId: page?.characterId,
-    noteId: page?.noteId,
-  })
-
   return (
     <div
       className="xlog-post-actions absolute right-full pr-14 h-full top-0"
@@ -56,23 +50,10 @@ export const PostActions: React.FC<{
           page={page}
           vertical={true}
         />
-        <div
-          className="cursor-pointer text-gray-500 flex flex-col items-center leading-snug"
-          onClick={() => {
-            const targetElement = document.querySelector(
-              "#comments",
-            ) as HTMLElement
-            window.scrollTo({
-              top: calculateElementTop(targetElement) - 20,
-              behavior: "smooth",
-            })
-          }}
-        >
-          <i className="icon-[mingcute--comment-fill] text-[33px]" />
-          <span className="text-gray-500">
-            {comments.data?.pages?.[0]?.count}
-          </span>
-        </div>
+        <ReactionComment
+          characterId={page?.characterId}
+          noteId={page?.noteId}
+        />
       </div>
     </div>
   )
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
index f3ac97cf..1d9fd566 100644
--- a/src/components/ui/Button.tsx
+++ b/src/components/ui/Button.tsx
@@ -19,8 +19,15 @@ export type Variant =
   | "crossbell"
   | "outline"
   | "tip"
+  | "comment"
 
-export type VariantColor = "green" | "red" | "gray" | "gradient" | "black"
+export type VariantColor =
+  | "green"
+  | "red"
+  | "gray"
+  | "gradient"
+  | "black"
+  | "light"
 
 type ButtonProps = {
   isLoading?: boolean
diff --git a/src/css/tailwind.css b/src/css/tailwind.css
index 8fbce19d..bf022e19 100644
--- a/src/css/tailwind.css
+++ b/src/css/tailwind.css
@@ -168,43 +168,52 @@ a {
   @apply fill-black;
 }
 
-.button.is-like {
+.button.is-like,
+.button.is-collect,
+.button.is-tip,
+.button.is-comment {
   @apply shadow-none p-0;
-  @apply text-gray-500 fill-gray-500;
+  @apply text-gray-500;
 }
+.button.is-like.is-light,
+.button.is-collect.is-light,
+.button.is-tip.is-light,
+.button.is-comment.is-light {
+  @apply text-gray-400;
+}
+.button.is-like.is-light.is-loading:before,
+.button.is-collect.is-light.is-loading:before,
+.button.is-tip.is-light.is-loading:before,
+.button.is-comment.is-light.is-loading:before {
+  margin-right: 0;
+}
+
 .button.is-like:hover {
   color: #f91880;
-  fill: #f91880;
 }
 .button.is-like.active {
   color: #f91880;
-  fill: #f91880;
 }
 
-.button.is-collect {
-  @apply shadow-none p-0;
-  @apply text-gray-500 fill-gray-500;
-}
 .button.is-collect:hover {
   color: #ffcf55;
-  fill: #ffcf55;
 }
 .button.is-collect.active {
   color: #ffcf55;
-  fill: #ffcf55;
 }
 
-.button.is-tip {
-  @apply shadow-none p-0;
-  @apply text-gray-500 fill-gray-500;
-}
 .button.is-tip:hover {
   color: #ef4444;
-  fill: #ef4444;
 }
 .button.is-tip.active {
   color: #ef4444;
-  fill: #ef4444;
+}
+
+.button.is-comment:hover {
+  @apply text-green-500;
+}
+.button.is-comment.active {
+  @apply text-green-500;
 }
 
 .button.is-crossbell {
diff --git a/src/models/page.model.ts b/src/models/page.model.ts
index bef7d981..ffa81d72 100644
--- a/src/models/page.model.ts
+++ b/src/models/page.model.ts
@@ -571,6 +571,23 @@ export async function checkMint({
   })
 }
 
+export async function checkComment({
+  characterId,
+  noteCharacterId,
+  noteId,
+}: {
+  characterId: number
+  noteCharacterId: number
+  noteId: number
+}) {
+  return indexer.note.getMany({
+    characterId: characterId,
+    toCharacterId: noteCharacterId,
+    toNoteId: noteId,
+    limit: 0,
+  })
+}
+
 export async function getComments({
   characterId,
   noteId,
diff --git a/src/queries/page.ts b/src/queries/page.ts
index 994e5f89..17b21c9e 100644
--- a/src/queries/page.ts
+++ b/src/queries/page.ts
@@ -177,6 +177,31 @@ export const useCheckMint = ({
   })
 }
 
+export const useCheckComment = ({
+  noteCharacterId,
+  noteId,
+}: {
+  noteCharacterId?: number
+  noteId?: number
+}) => {
+  const account = useAccountState((s) => s.computed.account)
+
+  return useQuery(
+    ["checkMint", noteCharacterId, noteId, account?.characterId],
+    async () => {
+      if (!noteCharacterId || !noteId || !account?.characterId) {
+        return { count: 0, list: [] }
+      }
+
+      return pageModel.checkComment({
+        characterId: account?.characterId,
+        noteCharacterId: noteCharacterId,
+        noteId: noteId,
+      })
+    },
+  )
+}
+
 export function useCreateOrUpdatePage() {
   const newbieToken = useAccountState((s) => s.email?.token)
   const unidata = useUnidata()