diff --git a/src/renderer/src/pages/home/Messages/MessageMenubar.tsx b/src/renderer/src/pages/home/Messages/MessageMenubar.tsx
index 09f6f0b441..163aca0565 100644
--- a/src/renderer/src/pages/home/Messages/MessageMenubar.tsx
+++ b/src/renderer/src/pages/home/Messages/MessageMenubar.tsx
@@ -524,8 +524,9 @@ const MessageMenubar: FC<Props> = (props) => {
   const softHoverBg = isBubbleStyle && !isLastMessage
   const isUserBubbleStyleMessage = isBubbleStyle && isUserMessage
   const bubbleAlignment: 'flex-start' | 'flex-end' = isAssistantMessage ? 'flex-start' : 'flex-end'
+  const messageTokensAlignment: 'left' | 'right' = isBubbleStyle ? 'right' : 'left'
 
-  const tokensElement = <MessageTokens message={message} />
+  const tokensElement = <MessageTokens message={message} align={messageTokensAlignment} />
 
   const buttonContext: MessageMenubarButtonContext = {
     assistant,
@@ -563,7 +564,6 @@ const MessageMenubar: FC<Props> = (props) => {
   if (isBubbleStyle) {
     return (
       <BubbleMenubarWrapper $align={bubbleAlignment}>
-        {tokensElement}
         <MenusBar
           className={classNames({
             menubar: true,
@@ -583,6 +583,7 @@ const MessageMenubar: FC<Props> = (props) => {
             return <Fragment key={buttonId}>{element}</Fragment>
           })}
         </MenusBar>
+        <BubbleTokens>{tokensElement}</BubbleTokens>
       </BubbleMenubarWrapper>
     )
   }
@@ -611,12 +612,21 @@ const MessageMenubar: FC<Props> = (props) => {
 
 const BubbleMenubarWrapper = styled.div<{ $align: 'flex-start' | 'flex-end' }>`
   display: flex;
-  flex-direction: column;
-  align-items: ${(props) => props.$align};
-  gap: 4px;
+  flex-direction: row;
+  align-items: center;
+  justify-content: ${(props) => props.$align};
+  gap: 8px;
   width: 100%;
 `
 
+const BubbleTokens = styled.div`
+  margin-left: auto;
+  flex: 0 0 auto;
+  min-width: 0;
+  display: flex;
+  justify-content: flex-end;
+`
+
 const MenusBar = styled.div`
   display: flex;
   flex-direction: row;
diff --git a/src/renderer/src/pages/home/Messages/MessageTokens.tsx b/src/renderer/src/pages/home/Messages/MessageTokens.tsx
index 6f44575cb9..ede83c2dbf 100644
--- a/src/renderer/src/pages/home/Messages/MessageTokens.tsx
+++ b/src/renderer/src/pages/home/Messages/MessageTokens.tsx
@@ -7,9 +7,10 @@ import styled from 'styled-components'
 
 interface MessageTokensProps {
   message: Message
+  align?: 'left' | 'right'
 }
 
-const MessageTokens: React.FC<MessageTokensProps> = ({ message }) => {
+const MessageTokens: React.FC<MessageTokensProps> = ({ message, align = 'left' }) => {
   // const { generating } = useRuntime()
   const locateMessage = () => {
     EventEmitter.emit(EVENT_NAMES.LOCATE_MESSAGE + ':' + message.id, false)
@@ -55,7 +56,7 @@ const MessageTokens: React.FC<MessageTokensProps> = ({ message }) => {
 
   if (message.role === 'user') {
     return (
-      <MessageMetadata className="message-tokens" onClick={locateMessage}>
+      <MessageMetadata className="message-tokens" onClick={locateMessage} $align={align}>
         {`Tokens: ${message?.usage?.total_tokens}`}
       </MessageMetadata>
     )
@@ -85,7 +86,7 @@ const MessageTokens: React.FC<MessageTokensProps> = ({ message }) => {
     )
 
     return (
-      <MessageMetadata className="message-tokens" onClick={locateMessage}>
+      <MessageMetadata className="message-tokens" onClick={locateMessage} $align={align}>
         {hasMetrics ? (
           <Popover content={metrixs} placement="top" trigger="hover" styles={{ root: { fontSize: 11 } }}>
             {tokensInfo}
@@ -100,15 +101,17 @@ const MessageTokens: React.FC<MessageTokensProps> = ({ message }) => {
   return null
 }
 
-const MessageMetadata = styled.div`
+const MessageMetadata = styled.div<{ $align: 'left' | 'right' }>`
   font-size: 10px;
   color: var(--color-text-3);
   user-select: text;
   cursor: pointer;
   display: flex;
-  justify-content: flex-end;
-  width: 100%;
-  align-self: stretch;
+  flex: 0 1 auto;
+  min-width: 0;
+  justify-content: ${(props) => (props.$align === 'right' ? 'flex-end' : 'flex-start')};
+  margin-left: ${(props) => (props.$align === 'right' ? 'auto' : '0')};
+  margin-right: ${(props) => (props.$align === 'left' ? 'auto' : '0')};
 
   .tokens span {
     padding: 0 2px;