diff --git a/src/renderer/src/assets/styles/index.scss b/src/renderer/src/assets/styles/index.scss
index b4576cde9d..02b631dbaf 100644
--- a/src/renderer/src/assets/styles/index.scss
+++ b/src/renderer/src/assets/styles/index.scss
@@ -63,7 +63,7 @@
   --chat-background: #111111;
   --chat-background-user: #28b561;
   --chat-background-assistant: #2c2c2c;
-  --chat-text-user: var(--color-text);
+  --chat-text-user: var(--color-black);
 
   --list-item-border-radius: 16px;
 }
@@ -246,7 +246,7 @@ body,
       color: var(--chat-text-user) !important;
     }
     .message-action-button:hover {
-      background-color: var(--color-text-3);
+      background-color: var(--color-white-soft);
     }
   }
   .group-message-wrapper {
diff --git a/src/renderer/src/pages/home/Messages/MessageHeader.tsx b/src/renderer/src/pages/home/Messages/MessageHeader.tsx
index 385b7bbaa5..f1b037c412 100644
--- a/src/renderer/src/pages/home/Messages/MessageHeader.tsx
+++ b/src/renderer/src/pages/home/Messages/MessageHeader.tsx
@@ -89,7 +89,9 @@ const MessageHeader: FC<Props> = memo(({ assistant, model, message }) => {
           />
         )}
         <UserWrap>
-          <UserName>{username}</UserName>
+          <UserName isBubbleStyle={isBubbleStyle} theme={theme}>
+            {username}
+          </UserName>
           <MessageTime>{dayjs(message.createdAt).format('MM/DD HH:mm')}</MessageTime>
         </UserWrap>
       </AvatarWrapper>
@@ -119,9 +121,10 @@ const UserWrap = styled.div`
   justify-content: space-between;
 `
 
-const UserName = styled.div`
+const UserName = styled.div<{ isBubbleStyle?: boolean; theme?: string }>`
   font-size: 14px;
   font-weight: 600;
+  color: ${(props) => (props.isBubbleStyle && props.theme === 'dark' ? 'white' : 'var(--color-text)')};
 `
 
 const MessageTime = styled.div`