diff --git a/web/app/components/base/user-avatar-list/index.tsx b/web/app/components/base/user-avatar-list/index.tsx
index e9325a985d..0a0a920f57 100644
--- a/web/app/components/base/user-avatar-list/index.tsx
+++ b/web/app/components/base/user-avatar-list/index.tsx
@@ -50,7 +50,7 @@ export const UserAvatarList: FC<UserAvatarListProps> = memo(({
               name={user.name}
               avatar={user.avatar_url || null}
               size={size}
-              className='ring-2 ring-white'
+              className='ring-2 ring-components-panel-bg'
               backgroundColor={userColor}
             />
           </div>
@@ -60,7 +60,7 @@ export const UserAvatarList: FC<UserAvatarListProps> = memo(({
       )}
       {shouldShowCount && remainingCount > 0 && (
         <div
-          className={'flex items-center justify-center rounded-full bg-components-panel-on-panel-item-bg text-[10px] leading-none text-text-secondary ring-2 ring-white'}
+          className={'flex items-center justify-center rounded-full bg-components-panel-on-panel-item-bg text-[10px] leading-none text-text-secondary ring-2 ring-components-panel-bg'}
           style={{
             zIndex: 0,
             width: size,
diff --git a/web/app/components/workflow/comment/comment-icon.tsx b/web/app/components/workflow/comment/comment-icon.tsx
index a9834d60a5..33237c1766 100644
--- a/web/app/components/workflow/comment/comment-icon.tsx
+++ b/web/app/components/workflow/comment/comment-icon.tsx
@@ -48,7 +48,7 @@ export const CommentIcon: FC<CommentIconProps> = memo(({ comment, onClick }) =>
         className={'relative h-10 overflow-hidden rounded-br-full rounded-tl-full rounded-tr-full'}
         style={{ width: dynamicWidth }}
       >
-        <div className="absolute inset-[6px] overflow-hidden rounded-br-full rounded-tl-full rounded-tr-full bg-white">
+        <div className="absolute inset-[6px] overflow-hidden rounded-br-full rounded-tl-full rounded-tr-full border border-components-panel-border bg-components-panel-bg">
           <div className="flex h-full w-full items-center justify-center px-1">
             <UserAvatarList
               users={comment.participants}
diff --git a/web/app/components/workflow/comment/cursor.tsx b/web/app/components/workflow/comment/cursor.tsx
index 194f1a72e6..aafd2a4fb9 100644
--- a/web/app/components/workflow/comment/cursor.tsx
+++ b/web/app/components/workflow/comment/cursor.tsx
@@ -23,7 +23,7 @@ export const CommentCursor: FC<CommentCursorProps> = memo(({ mousePosition }) =>
         transform: 'translate(-50%, -50%)',
       }}
     >
-      <Comment />
+      <Comment className="text-text-primary" />
     </div>
   )
 })
diff --git a/web/app/components/workflow/comment/mention-input.tsx b/web/app/components/workflow/comment/mention-input.tsx
index 48c957c479..3213942572 100644
--- a/web/app/components/workflow/comment/mention-input.tsx
+++ b/web/app/components/workflow/comment/mention-input.tsx
@@ -322,10 +322,10 @@ export const MentionInput: FC<MentionInputProps> = memo(({
         {!isEditing && (
           <div className="absolute bottom-0 right-1 z-20 flex items-end gap-1">
             <div
-              className="z-20 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-components-button-secondary-bg hover:bg-state-base-hover"
+              className="z-20 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg hover:bg-state-base-hover"
               onClick={handleMentionButtonClick}
             >
-              <RiAtLine className="h-4 w-4" />
+              <RiAtLine className="h-4 w-4 text-components-button-primary-text" />
             </div>
             <Button
               className='z-20 ml-2 w-8 px-0'
@@ -333,7 +333,7 @@ export const MentionInput: FC<MentionInputProps> = memo(({
               disabled={!value.trim() || disabled || loading}
               onClick={handleSubmit}
             >
-              <RiArrowUpLine className='h-4 w-4' />
+              <RiArrowUpLine className='h-4 w-4 text-components-button-primary-text' />
             </Button>
           </div>
         )}
@@ -341,10 +341,10 @@ export const MentionInput: FC<MentionInputProps> = memo(({
         {isEditing && (
           <div className="absolute bottom-0 left-1 right-1 z-20 flex items-end justify-between">
             <div
-              className="z-20 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-components-button-secondary-bg hover:bg-state-base-hover"
+              className="z-20 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg hover:bg-state-base-hover"
               onClick={handleMentionButtonClick}
             >
-              <RiAtLine className="h-4 w-4" />
+              <RiAtLine className="h-4 w-4 text-components-button-primary-text" />
             </div>
             <div className='flex items-center gap-2'>
               <Button variant='secondary' size='small' onClick={onCancel} disabled={loading}>
@@ -365,7 +365,7 @@ export const MentionInput: FC<MentionInputProps> = memo(({
 
       {showMentionDropdown && filteredMentionUsers.length > 0 && typeof document !== 'undefined' && createPortal(
         <div
-          className="fixed z-[9999] max-h-40 w-64 overflow-y-auto rounded-lg border border-components-panel-border bg-white shadow-lg"
+          className="fixed z-[9999] max-h-40 w-64 overflow-y-auto rounded-lg border border-components-panel-border bg-components-panel-bg shadow-lg"
           style={{
             left: dropdownPosition.x,
             top: dropdownPosition.y,
diff --git a/web/app/components/workflow/comment/thread.tsx b/web/app/components/workflow/comment/thread.tsx
index 67d11fd4d9..727bb60712 100644
--- a/web/app/components/workflow/comment/thread.tsx
+++ b/web/app/components/workflow/comment/thread.tsx
@@ -312,7 +312,7 @@ export const CommentThread: FC<CommentThreadProps> = memo(({
                               {t('workflow.comments.actions.editReply')}
                             </button>
                             <button
-                              className='text-negative flex w-full items-center justify-start px-3 py-2 text-left text-sm hover:bg-state-base-hover'
+                              className='text-negative flex w-full items-center justify-start px-3 py-2 text-left text-sm text-text-secondary hover:bg-state-base-hover'
                               onClick={() => {
                                 setActiveReplyMenuId(null)
                                 onReplyDelete?.(reply.id)
diff --git a/web/app/components/workflow/header/online-users.tsx b/web/app/components/workflow/header/online-users.tsx
index 6d4860e809..7923c95b64 100644
--- a/web/app/components/workflow/header/online-users.tsx
+++ b/web/app/components/workflow/header/online-users.tsx
@@ -83,7 +83,7 @@ const OnlineUsers = () => {
   }
 
   return (
-    <div className="flex items-center rounded-full bg-white px-1 py-1">
+    <div className="flex items-center rounded-full border border-components-panel-border bg-components-panel-bg px-1 py-1">
       <div className="flex items-center">
         <div className="flex items-center -space-x-2">
           {visibleUsers.map((user, index) => {
@@ -114,7 +114,7 @@ const OnlineUsers = () => {
                     name={user.username || 'User'}
                     avatar={getAvatarUrl(user)}
                     size={28}
-                    className="ring-2 ring-white"
+                    className="ring-2 ring-components-panel-bg"
                     backgroundColor={userColor}
                   />
                 </div>
@@ -138,7 +138,7 @@ const OnlineUsers = () => {
                       'flex h-7 w-7 items-center justify-center',
                       'cursor-pointer rounded-full bg-gray-300',
                       'text-xs font-medium text-gray-700',
-                      'ring-2 ring-white',
+                      'ring-2 ring-components-panel-bg',
                     )}
                   >
                     +{remainingCount}
diff --git a/web/app/components/workflow/operator/zoom-in-out.tsx b/web/app/components/workflow/operator/zoom-in-out.tsx
index 9bf6a02f7b..24035917a7 100644
--- a/web/app/components/workflow/operator/zoom-in-out.tsx
+++ b/web/app/components/workflow/operator/zoom-in-out.tsx
@@ -253,19 +253,19 @@ const ZoomInOut: FC<ZoomInOutProps> = ({
                       >
                         <div className='flex items-center space-x-2'>
                           {option.key === ZoomType.toggleUserComments && showUserComments && (
-                            <RiCheckLine className='h-4 w-4 text-text-primary' />
+                            <RiCheckLine className='h-4 w-4 text-text-accent' />
                           )}
                           {option.key === ZoomType.toggleUserComments && !showUserComments && (
                             <div className='h-4 w-4' />
                           )}
                           {option.key === ZoomType.toggleUserCursors && showUserCursors && (
-                            <RiCheckLine className='h-4 w-4 text-text-primary' />
+                            <RiCheckLine className='h-4 w-4 text-text-accent' />
                           )}
                           {option.key === ZoomType.toggleUserCursors && !showUserCursors && (
                             <div className='h-4 w-4' />
                           )}
                           {option.key === ZoomType.toggleMiniMap && showMiniMap && (
-                            <RiCheckLine className='h-4 w-4 text-text-primary' />
+                            <RiCheckLine className='h-4 w-4 text-text-accent' />
                           )}
                           {option.key === ZoomType.toggleMiniMap && !showMiniMap && (
                             <div className='h-4 w-4' />
diff --git a/web/app/components/workflow/panel/comments-panel/index.tsx b/web/app/components/workflow/panel/comments-panel/index.tsx
index 7cc396d545..cefdb78516 100644
--- a/web/app/components/workflow/panel/comments-panel/index.tsx
+++ b/web/app/components/workflow/panel/comments-panel/index.tsx
@@ -66,7 +66,7 @@ const CommentsPanel = () => {
         <div className='system-xl-semibold font-semibold leading-6 text-text-primary'>Comments</div>
         <div className='relative flex items-center gap-2'>
           <button
-            className='flex h-8 w-8 items-center justify-center rounded-md bg-white hover:bg-state-base-hover'
+            className='flex h-8 w-8 items-center justify-center rounded-md bg-components-panel-on-panel-item-bg hover:bg-state-base-hover'
             aria-label='Filter comments'
             onClick={() => setShowFilter(v => !v)}
           >
@@ -78,21 +78,21 @@ const CommentsPanel = () => {
                 className={cn('flex w-full items-center justify-between rounded-md px-2 py-2 text-left text-sm hover:bg-state-base-hover', filter === 'all' && 'bg-components-panel-on-panel-item-bg')}
                 onClick={() => handleFilterChange('all')}
               >
-                <span>All</span>
+                <span className='text-text-secondary'>All</span>
                 {filter === 'all' && <RiCheckLine className='h-4 w-4 text-text-secondary' />}
               </button>
               <button
                 className={cn('mt-1 flex w-full items-center justify-between rounded-md px-2 py-2 text-left text-sm hover:bg-state-base-hover', filter === 'unresolved' && 'bg-components-panel-on-panel-item-bg')}
                 onClick={() => handleFilterChange('unresolved')}
               >
-                <span>Unresolved</span>
+                <span className='text-text-secondary'>Unresolved</span>
                 {filter === 'unresolved' && <RiCheckLine className='h-4 w-4 text-text-secondary' />}
               </button>
               <button
                 className={cn('mt-1 flex w-full items-center justify-between rounded-md px-2 py-2 text-left text-sm hover:bg-state-base-hover', filter === 'mine' && 'bg-components-panel-on-panel-item-bg')}
                 onClick={() => handleFilterChange('mine')}
               >
-                <span>Only your threads</span>
+                <span className='text-text-secondary'>Only your threads</span>
                 {filter === 'mine' && <RiCheckLine className='h-4 w-4 text-text-secondary' />}
               </button>
             </div>