diff --git a/web/app/components/workflow/comment/thread.tsx b/web/app/components/workflow/comment/thread.tsx
index 9094e554c6..5444198663 100644
--- a/web/app/components/workflow/comment/thread.tsx
+++ b/web/app/components/workflow/comment/thread.tsx
@@ -322,15 +322,16 @@ export const CommentThread: FC<CommentThreadProps> = memo(({
           ref={messageListRef}
           className='relative mt-2 flex-1 overflow-y-auto px-4 pb-4'
         >
-          <ThreadMessage
-            authorId={comment.created_by_account?.id || ''}
-            authorName={comment.created_by_account?.name || t('workflow.comments.fallback.user')}
-            avatarUrl={comment.created_by_account?.avatar_url || null}
-            createdAt={comment.created_at}
-            content={comment.content}
-            mentionedNames={mentionsByTarget.get('root')}
-            className='pl-1'
-          />
+          <div className='rounded-lg py-2 pl-1 transition-colors hover:bg-components-panel-on-panel-item-bg-hover'>
+            <ThreadMessage
+              authorId={comment.created_by_account?.id || ''}
+              authorName={comment.created_by_account?.name || t('workflow.comments.fallback.user')}
+              avatarUrl={comment.created_by_account?.avatar_url || null}
+              createdAt={comment.created_at}
+              content={comment.content}
+              mentionedNames={mentionsByTarget.get('root')}
+            />
+          </div>
           {replies.length > 0 && (
             <div className='mt-2 space-y-3 pt-3'>
               {replies.map((reply) => {