diff --git a/apps/app/components/issues/comment/comment-reaction.tsx b/apps/app/components/issues/comment/comment-reaction.tsx
index d701fa943e..0f77df025c 100644
--- a/apps/app/components/issues/comment/comment-reaction.tsx
+++ b/apps/app/components/issues/comment/comment-reaction.tsx
@@ -70,8 +70,16 @@ export const CommentReaction: React.FC<Props> = (props) => {
                   : "bg-custom-background-80"
               }`}
             >
-              <span>{groupedReactions?.[reaction].length} </span>
               <span>{renderEmoji(reaction)}</span>
+              <span
+                className={
+                  commentReactions?.some((r) => r.actor === user?.id && r.reaction === reaction)
+                    ? "text-custom-primary-100"
+                    : ""
+                }
+              >
+                {groupedReactions?.[reaction].length}{" "}
+              </span>
             </button>
           )
       )}
diff --git a/apps/app/components/issues/issue-reaction.tsx b/apps/app/components/issues/issue-reaction.tsx
index d183685fec..9277954a48 100644
--- a/apps/app/components/issues/issue-reaction.tsx
+++ b/apps/app/components/issues/issue-reaction.tsx
@@ -60,8 +60,16 @@ export const IssueReaction: React.FC<Props> = (props) => {
                   : "bg-custom-background-80"
               }`}
             >
-              <span>{groupedReactions?.[reaction].length} </span>
               <span>{renderEmoji(reaction)}</span>
+              <span
+                className={
+                  reactions?.some((r) => r.actor === user?.id && r.reaction === reaction)
+                    ? "text-custom-primary-100"
+                    : ""
+                }
+              >
+                {groupedReactions?.[reaction].length}{" "}
+              </span>
             </button>
           )
       )}
diff --git a/apps/app/hooks/use-comment-reaction.tsx b/apps/app/hooks/use-comment-reaction.tsx
index d52c65d09f..16469f66a4 100644
--- a/apps/app/hooks/use-comment-reaction.tsx
+++ b/apps/app/hooks/use-comment-reaction.tsx
@@ -52,7 +52,8 @@ const useCommentReaction = (
       workspaceSlug.toString(),
       projectId.toString(),
       commendId.toString(),
-      { reaction }
+      { reaction },
+      user.user
     );
 
     mutateCommentReactions((prev) => [...(prev || []), data]);
@@ -76,7 +77,8 @@ const useCommentReaction = (
       workspaceSlug.toString(),
       projectId.toString(),
       commendId.toString(),
-      reaction
+      reaction,
+      user.user
     );
 
     mutateCommentReactions();
diff --git a/apps/app/hooks/use-issue-reaction.tsx b/apps/app/hooks/use-issue-reaction.tsx
index 42a0dacdef..89c65c5ed3 100644
--- a/apps/app/hooks/use-issue-reaction.tsx
+++ b/apps/app/hooks/use-issue-reaction.tsx
@@ -52,7 +52,8 @@ const useIssueReaction = (
       workspaceSlug.toString(),
       projectId.toString(),
       issueId.toString(),
-      { reaction }
+      { reaction },
+      user.user
     );
 
     mutateReaction((prev) => [...(prev || []), data]);
@@ -77,7 +78,8 @@ const useIssueReaction = (
       workspaceSlug.toString(),
       projectId.toString(),
       issueId.toString(),
-      reaction
+      reaction,
+      user.user
     );
 
     mutateReaction();