diff --git a/web/app/components/apps/app-card.tsx b/web/app/components/apps/app-card.tsx
index f51db503d3..1cc504d746 100644
--- a/web/app/components/apps/app-card.tsx
+++ b/web/app/components/apps/app-card.tsx
@@ -5,7 +5,6 @@ import type { HtmlContentProps } from '@/app/components/base/popover'
 import type { Tag } from '@/app/components/base/tag-management/constant'
 import type { CreateAppModalProps } from '@/app/components/explore/create-app-modal'
 import type { EnvironmentVariable } from '@/app/components/workflow/types'
-import type { WorkflowOnlineUser } from '@/models/app'
 import type { App } from '@/types/app'
 import { RiBuildingLine, RiGlobalLine, RiLockLine, RiMoreFill, RiVerifiedBadgeLine } from '@remixicon/react'
 import * as React from 'react'
@@ -27,7 +26,6 @@ import {
   AlertDialogDescription,
   AlertDialogTitle,
 } from '@/app/components/base/ui/alert-dialog'
-import { UserAvatarList } from '@/app/components/base/user-avatar-list'
 import { toast } from '@/app/components/base/ui/toast'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useAppContext } from '@/context/app-context'
@@ -68,10 +66,9 @@ const AccessControl = dynamic(() => import('@/app/components/app/app-access-cont
 type AppCardProps = {
   app: App
   onRefresh?: () => void
-  onlineUsers?: WorkflowOnlineUser[]
 }
 
-const AppCard = ({ app, onRefresh, onlineUsers = [] }: AppCardProps) => {
+const AppCard = ({ app, onRefresh }: AppCardProps) => {
   const { t } = useTranslation()
   const deleteAppNameInputId = useId()
   const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
@@ -363,19 +360,6 @@ const AppCard = ({ app, onRefresh, onlineUsers = [] }: AppCardProps) => {
     return `${t('segment.editedAt', { ns: 'datasetDocuments' })} ${timeText}`
   }, [app.updated_at, app.created_at, t])
 
-  const onlineUserAvatars = useMemo(() => {
-    if (!onlineUsers.length)
-      return []
-
-    return onlineUsers
-      .map(user => ({
-        id: user.user_id || user.sid || '',
-        name: user.username || 'User',
-        avatar_url: user.avatar || undefined,
-      }))
-      .filter(user => !!user.id)
-  }, [onlineUsers])
-
   return (
     <>
       <div
@@ -428,11 +412,6 @@ const AppCard = ({ app, onRefresh, onlineUsers = [] }: AppCardProps) => {
               </Tooltip>
             )}
           </div>
-          <div>
-            {onlineUserAvatars.length > 0 && (
-              <UserAvatarList users={onlineUserAvatars} maxVisible={3} size={20} />
-            )}
-          </div>
         </div>
         <div className="title-wrapper h-[90px] px-[14px] text-xs leading-normal text-text-tertiary">
           <div
diff --git a/web/app/components/base/user-avatar-list/index.tsx b/web/app/components/base/user-avatar-list/index.tsx
index f16ef3b7ff..96ad5a6464 100644
--- a/web/app/components/base/user-avatar-list/index.tsx
+++ b/web/app/components/base/user-avatar-list/index.tsx
@@ -1,6 +1,7 @@
 import type { FC } from 'react'
+import type { AvatarSize } from '@/app/components/base/ui/avatar'
 import { memo } from 'react'
-import Avatar from '@/app/components/base/avatar'
+import Avatar from '@/app/components/base/ui/avatar'
 import { getUserColor } from '@/app/components/workflow/collaboration/utils/user-color'
 import { useAppContext } from '@/context/app-context'
 
@@ -13,15 +14,26 @@ type User = {
 type UserAvatarListProps = {
   users: User[]
   maxVisible?: number
-  size?: number
+  size?: AvatarSize
   className?: string
   showCount?: boolean
 }
 
+const avatarSizeToPx: Record<AvatarSize, number> = {
+  'xxs': 16,
+  'xs': 20,
+  'sm': 24,
+  'md': 32,
+  'lg': 36,
+  'xl': 40,
+  '2xl': 48,
+  '3xl': 64,
+}
+
 export const UserAvatarList: FC<UserAvatarListProps> = memo(({
   users,
   maxVisible = 3,
-  size = 24,
+  size = 'sm',
   className = '',
   showCount = true,
 }) => {
@@ -64,8 +76,8 @@ export const UserAvatarList: FC<UserAvatarListProps> = memo(({
           className="flex items-center justify-center rounded-full bg-gray-500 text-[10px] leading-none text-white ring-2 ring-components-panel-bg"
           style={{
             zIndex: 0,
-            width: size,
-            height: size,
+            width: avatarSizeToPx[size],
+            height: avatarSizeToPx[size],
           }}
         >
           +
diff --git a/web/app/components/workflow/comment/comment-icon.tsx b/web/app/components/workflow/comment/comment-icon.tsx
index c1663007cd..77e31cc20e 100644
--- a/web/app/components/workflow/comment/comment-icon.tsx
+++ b/web/app/components/workflow/comment/comment-icon.tsx
@@ -221,7 +221,7 @@ export const CommentIcon: FC<CommentIconProps> = memo(({ comment, onClick, isAct
                 <UserAvatarList
                   users={participants}
                   maxVisible={3}
-                  size={24}
+                  size="sm"
                 />
               </div>
             </div>
diff --git a/web/app/components/workflow/comment/comment-input.spec.tsx b/web/app/components/workflow/comment/comment-input.spec.tsx
index c0cd4e6c9b..a51a7fef67 100644
--- a/web/app/components/workflow/comment/comment-input.spec.tsx
+++ b/web/app/components/workflow/comment/comment-input.spec.tsx
@@ -35,7 +35,7 @@ vi.mock('@/context/app-context', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/avatar', () => ({
+vi.mock('@/app/components/base/ui/avatar', () => ({
   default: ({ name }: { name: string }) => <div data-testid="avatar">{name}</div>,
 }))
 
diff --git a/web/app/components/workflow/comment/comment-input.tsx b/web/app/components/workflow/comment/comment-input.tsx
index d5c199c696..fd7043bd28 100644
--- a/web/app/components/workflow/comment/comment-input.tsx
+++ b/web/app/components/workflow/comment/comment-input.tsx
@@ -1,7 +1,7 @@
 import type { FC, PointerEvent as ReactPointerEvent } from 'react'
 import { memo, useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Avatar from '@/app/components/base/avatar'
+import Avatar from '@/app/components/base/ui/avatar'
 import { useAppContext } from '@/context/app-context'
 import { cn } from '@/utils/classnames'
 import { MentionInput } from './mention-input'
@@ -153,7 +153,7 @@ export const CommentInput: FC<CommentInputProps> = memo(({
               <Avatar
                 avatar={userProfile.avatar_url}
                 name={userProfile.name}
-                size={24}
+                size="sm"
                 className="block size-full rounded-full"
               />
             </div>
diff --git a/web/app/components/workflow/comment/comment-preview.tsx b/web/app/components/workflow/comment/comment-preview.tsx
index 37c5167a33..5985ed848b 100644
--- a/web/app/components/workflow/comment/comment-preview.tsx
+++ b/web/app/components/workflow/comment/comment-preview.tsx
@@ -38,7 +38,7 @@ const CommentPreview: FC<CommentPreviewProps> = ({ comment, onClick }) => {
         <UserAvatarList
           users={participants}
           maxVisible={3}
-          size={24}
+          size="sm"
         />
       </div>
 
diff --git a/web/app/components/workflow/comment/mention-input.tsx b/web/app/components/workflow/comment/mention-input.tsx
index 8924deb331..c845535b30 100644
--- a/web/app/components/workflow/comment/mention-input.tsx
+++ b/web/app/components/workflow/comment/mention-input.tsx
@@ -17,9 +17,9 @@ import {
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import Textarea from 'react-textarea-autosize'
-import Avatar from '@/app/components/base/avatar'
 import Button from '@/app/components/base/button'
 import EnterKey from '@/app/components/base/icons/src/public/common/EnterKey'
+import Avatar from '@/app/components/base/ui/avatar'
 import { useParams } from '@/next/navigation'
 import { fetchMentionableUsers } from '@/service/workflow-comment'
 import { cn } from '@/utils/classnames'
@@ -636,7 +636,7 @@ const MentionInputInner = forwardRef<HTMLTextAreaElement, MentionInputProps>(({
               <Avatar
                 avatar={user.avatar_url || null}
                 name={user.name}
-                size={24}
+                size="sm"
                 className="shrink-0"
               />
               <div className="min-w-0 flex-1">
diff --git a/web/app/components/workflow/comment/thread.tsx b/web/app/components/workflow/comment/thread.tsx
index 28be015425..020f7ac57c 100644
--- a/web/app/components/workflow/comment/thread.tsx
+++ b/web/app/components/workflow/comment/thread.tsx
@@ -6,9 +6,9 @@ import { RiArrowDownSLine, RiArrowUpSLine, RiCheckboxCircleFill, RiCheckboxCircl
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useReactFlow, useViewport } from 'reactflow'
-import Avatar from '@/app/components/base/avatar'
 import Divider from '@/app/components/base/divider'
 import InlineDeleteConfirm from '@/app/components/base/inline-delete-confirm'
+import Avatar from '@/app/components/base/ui/avatar'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -127,7 +127,7 @@ const ThreadMessage: FC<{
         <Avatar
           name={authorName}
           avatar={avatarUrl || null}
-          size={24}
+          size="sm"
           className={cn('h-8 w-8 rounded-full')}
           backgroundColor={userColor}
         />
@@ -558,7 +558,7 @@ export const CommentThread: FC<CommentThreadProps> = memo(({
                               <Avatar
                                 name={reply.created_by_account?.name || t('comments.fallback.user', { ns: 'workflow' })}
                                 avatar={reply.created_by_account?.avatar_url || null}
-                                size={24}
+                                size="sm"
                                 className="h-8 w-8 rounded-full"
                               />
                             </div>
@@ -607,7 +607,7 @@ export const CommentThread: FC<CommentThreadProps> = memo(({
               <Avatar
                 avatar={userProfile?.avatar_url || null}
                 name={userProfile?.name || t('you', { ns: 'common' })}
-                size={24}
+                size="sm"
                 className="h-8 w-8"
               />
               <div className="flex-1 rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur p-[2px] shadow-sm">
diff --git a/web/app/components/workflow/header/online-users.tsx b/web/app/components/workflow/header/online-users.tsx
index 87b460c5c0..ba1b8731db 100644
--- a/web/app/components/workflow/header/online-users.tsx
+++ b/web/app/components/workflow/header/online-users.tsx
@@ -3,7 +3,7 @@ import type { OnlineUser } from '../collaboration/types/collaboration'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import { useEffect, useState } from 'react'
 import { useReactFlow } from 'reactflow'
-import Avatar from '@/app/components/base/avatar'
+import Avatar from '@/app/components/base/ui/avatar'
 import {
   Popover,
   PopoverContent,
@@ -134,7 +134,7 @@ const OnlineUsers = () => {
                     <Avatar
                       name={user.username || 'User'}
                       avatar={getAvatarUrl(user)}
-                      size={24}
+                      size="sm"
                       className="ring-1 ring-components-panel-bg"
                       backgroundColor={userColor}
                     />
@@ -204,7 +204,7 @@ const OnlineUsers = () => {
                         <Avatar
                           name={user.username || 'User'}
                           avatar={getAvatarUrl(user)}
-                          size={24}
+                          size="sm"
                           backgroundColor={userColor}
                         />
                       </div>
diff --git a/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx b/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
index 1d7aa132d6..08bc9de29a 100644
--- a/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
@@ -509,7 +509,7 @@ const BasePanel: FC<BasePanelProps> = ({
                 <UserAvatarList
                   users={viewingUsers}
                   maxVisible={3}
-                  size={24}
+                  size="sm"
                 />
               </div>
             )}
diff --git a/web/app/components/workflow/nodes/_base/node.tsx b/web/app/components/workflow/nodes/_base/node.tsx
index 529a0359ae..0239aebc77 100644
--- a/web/app/components/workflow/nodes/_base/node.tsx
+++ b/web/app/components/workflow/nodes/_base/node.tsx
@@ -279,7 +279,7 @@ const BaseNode: FC<BaseNodeProps> = ({
                 <UserAvatarList
                   users={viewingUsers}
                   maxVisible={3}
-                  size={24}
+                  size="sm"
                 />
               </div>
             )}
diff --git a/web/app/components/workflow/panel/comments-panel/index.tsx b/web/app/components/workflow/panel/comments-panel/index.tsx
index 7099a75dff..6b1c1efe43 100644
--- a/web/app/components/workflow/panel/comments-panel/index.tsx
+++ b/web/app/components/workflow/panel/comments-panel/index.tsx
@@ -150,7 +150,7 @@ const CommentsPanel = () => {
                   <UserAvatarList
                     users={c.participants}
                     maxVisible={3}
-                    size={24}
+                    size="sm"
                   />
                   <div className="ml-2 flex items-center">
                     {c.resolved