diff --git a/src/views/app/detail-panel/preview/parts/message-contact-list.tsx b/src/views/app/detail-panel/preview/parts/message-contact-list.tsx
index 07641485e..023733446 100644
--- a/src/views/app/detail-panel/preview/parts/message-contact-list.tsx
+++ b/src/views/app/detail-panel/preview/parts/message-contact-list.tsx
@@ -187,7 +187,8 @@ const MessageContactList: FC<{
 								folderId,
 								folderName: messageFolder.name
 							})}
-							type={textReadValues.badge}
+							backgroundColor={(textReadValues.badge === 'unread' && 'primary') || 'gray2'}
+							color={(textReadValues.badge === 'unread' && 'gray6') || 'gray0'}
 						/>
 					</Padding>
 				)}
diff --git a/src/views/app/folder-panel/conversations/conversation-list-item.tsx b/src/views/app/folder-panel/conversations/conversation-list-item.tsx
index 8e818cffd..e8c593d61 100644
--- a/src/views/app/folder-panel/conversations/conversation-list-item.tsx
+++ b/src/views/app/folder-panel/conversations/conversation-list-item.tsx
@@ -463,7 +463,8 @@ export const ConversationListItem: FC<ConversationListItemProps> = memo(
 										<Badge
 											data-testid={`conversation-messages-count-${item.id}`}
 											value={getmsgToDisplayCount()}
-											type={textReadValues.badge}
+											backgroundColor={(textReadValues.badge === 'unread' && 'primary') || 'gray2'}
+											color={(textReadValues.badge === 'unread' && 'gray6') || 'gray0'}
 										/>
 									</Padding>
 								</Row>
diff --git a/src/views/app/folder-panel/messages/message-list-item.tsx b/src/views/app/folder-panel/messages/message-list-item.tsx
index 845364cc6..deb2c01e0 100644
--- a/src/views/app/folder-panel/messages/message-list-item.tsx
+++ b/src/views/app/folder-panel/messages/message-list-item.tsx
@@ -354,7 +354,8 @@ export const MessageListItem: FC<MessageListItemProps> = memo(function MessageLi
 											folderId: firstChildFolderId,
 											folderName: messageFolder?.name ?? ''
 										})}
-										type={textReadValues.badge}
+										backgroundColor={(textReadValues.badge === 'unread' && 'primary') || 'gray2'}
+										color={(textReadValues.badge === 'unread' && 'gray6') || 'gray0'}
 									/>
 								</Padding>
 							)}