diff --git a/src/FE/components/ChatMessage/ChatMessage.tsx b/src/FE/components/ChatMessage/ChatMessage.tsx
index 117802a4..52962134 100644
--- a/src/FE/components/ChatMessage/ChatMessage.tsx
+++ b/src/FE/components/ChatMessage/ChatMessage.tsx
@@ -41,7 +41,12 @@ export const ChatMessage: FC<Props> = memo(
   }) => {
     const hasMultipleSpan = selectedMessages.find((x) => x.length > 1);
     return (
-      <div className={cn('w-4/5 m-auto p-4', !hasMultipleSpan && 'w-3/5')}>
+      <div
+        className={cn(
+          'w-4/5 m-auto p-4',
+          !hasMultipleSpan && 'w-full md:w-3/5',
+        )}
+      >
         {selectedMessages.map((messages, index) => {
           return (
             <div
@@ -49,7 +54,7 @@ export const ChatMessage: FC<Props> = memo(
               className={cn(
                 messages.find((x) => x.role === ChatRole.User)
                   ? 'flex w-full justify-end'
-                  : 'grid grid-cols-[repeat(auto-fit,minmax(375px,1fr))] gap-4',
+                  : 'md:grid md:grid-cols-[repeat(auto-fit,minmax(375px,1fr))] gap-4',
               )}
             >
               {messages.map((message) => {
@@ -89,7 +94,7 @@ export const ChatMessage: FC<Props> = memo(
                         )}
                       >
                         {!hasMultipleSpan && (
-                          <div className="w-9 h-9">
+                          <div className="w-9 h-9 hidden md:block">
                             <IconRobot className="w-7 h-7 mr-1" />
                           </div>
                         )}
diff --git a/src/FE/components/ChatMessage/RegenerateAction.tsx b/src/FE/components/ChatMessage/RegenerateAction.tsx
new file mode 100644
index 00000000..aa836e47
--- /dev/null
+++ b/src/FE/components/ChatMessage/RegenerateAction.tsx
@@ -0,0 +1,42 @@
+import useTranslation from '@/hooks/useTranslation';
+
+import { IconRefresh } from '@/components/Icons';
+
+import Tips from '../Tips/Tips';
+import { Button } from '../ui/button';
+
+interface Props {
+  hidden?: boolean;
+  modelName?: string;
+  onRegenerate: () => any;
+}
+
+export const RegenerateAction = (props: Props) => {
+  const { t } = useTranslation();
+  const { hidden, onRegenerate } = props;
+
+  const Render = () => {
+    return (
+      <Tips
+        trigger={
+          <Button
+            variant="ghost"
+            className="p-1 m-0 h-7 w-7"
+            onClick={(e) => {
+              onRegenerate();
+              e.stopPropagation();
+            }}
+          >
+            <IconRefresh />
+          </Button>
+        }
+        side="bottom"
+        content={t('Regenerate')!}
+      />
+    );
+  };
+
+  return <>{!hidden && Render()}</>;
+};
+
+export default RegenerateAction;
diff --git a/src/FE/components/ChatMessage/ResponseMessageActions.tsx b/src/FE/components/ChatMessage/ResponseMessageActions.tsx
index 92b53889..f32b9b01 100644
--- a/src/FE/components/ChatMessage/ResponseMessageActions.tsx
+++ b/src/FE/components/ChatMessage/ResponseMessageActions.tsx
@@ -5,6 +5,7 @@ import ChangeModelAction from './ChangeModelAction';
 import CopyAction from './CopyAction';
 import GenerateInformationAction from './GenerateInformationAction';
 import PaginationAction from './PaginationAction';
+import RegenerateAction from './RegenerateAction';
 
 export interface ResponseMessage {
   id: string;
@@ -42,13 +43,7 @@ const ResponseMessageActions = (props: Props) => {
     onChangeMessage,
     onRegenerate,
   } = props;
-  const {
-    id: messageId,
-    siblingIds,
-    modelId,
-    modelName,
-    modelProviderId,
-  } = message;
+  const { id: messageId, siblingIds, modelId, modelName, parentId } = message;
   const currentMessageIndex = siblingIds.findIndex((x) => x === messageId);
 
   return (
@@ -68,11 +63,17 @@ const ResponseMessageActions = (props: Props) => {
           <div className="visible flex gap-0 items-center">
             <CopyAction text={message.content.text} />
             <GenerateInformationAction message={message} />
+            <RegenerateAction
+              hidden={readonly}
+              onRegenerate={() => {
+                onRegenerate && onRegenerate(parentId!, modelId);
+              }}
+            />
             <ChangeModelAction
               readonly={readonly}
               models={models}
               onChangeModel={(model) => {
-                onRegenerate && onRegenerate(message.parentId!, model.modelId);
+                onRegenerate && onRegenerate(parentId!, model.modelId);
               }}
               showRegenerate={models.length > 0}
               modelName={modelName!}
diff --git a/src/FE/pages/home/_components/Chat/ChatHeader.tsx b/src/FE/pages/home/_components/Chat/ChatHeader.tsx
index 6af10c03..a982c22a 100644
--- a/src/FE/pages/home/_components/Chat/ChatHeader.tsx
+++ b/src/FE/pages/home/_components/Chat/ChatHeader.tsx
@@ -76,11 +76,11 @@ const ChatHeader = () => {
   };
 
   const AddBtnRender = () => (
-    <div className="flex items-center rounded-md">
+    <div className="flex items-center rounded-md mx-1">
       {selectedChat.spans.length < MAX_SELECT_MODEL_COUNT && (
         <ChatModelDropdownMenu
           models={models}
-          className="text-base"
+          className="text-sm"
           content={
             <Tips
               trigger={
@@ -108,14 +108,14 @@ const ChatHeader = () => {
       <div className="flex justify-between items-center w-full">
         <div
           className={cn(
-            'flex justify-start ml-24 h-11 items-center overflow-auto',
+            'flex justify-start ml-24 h-12 items-center overflow-auto',
             showChatBar && 'ml-6',
           )}
         >
-          <div className="flex gap-y-1 flex-wrap h-11 items-center overflow-auto">
+          <div className="flex gap-2 flex-wrap h-10 items-center overflow-auto">
             {selectedChat.spans.map((span) => (
               <div
-                className="flex hover:bg-muted p-1 rounded-md"
+                className="flex bg-muted rounded-md"
                 key={'chat-header-' + span.spanId}
               >
                 <ChatModelDropdownMenu
@@ -123,7 +123,6 @@ const ChatHeader = () => {
                   models={models}
                   modelName={span.modelName}
                   className="text-sm"
-                  triggerClassName="hover:bg-transparent"
                   content={span?.modelName}
                   hideIcon={true}
                   onChangeModel={(model) => {
@@ -139,7 +138,7 @@ const ChatHeader = () => {
                           handleRemoveChatModel(span.spanId);
                         }}
                         variant="ghost"
-                        className="p-1 m-0 h-auto hover:bg-transparent"
+                        className="py-1 px-0 pr-1 m-0 h-auto hover:bg-transparent"
                       >
                         <IconX />
                       </Button>
diff --git a/src/FE/pages/home/_components/Chat/ChatModelInfo.tsx b/src/FE/pages/home/_components/Chat/ChatModelInfo.tsx
index 38de2da8..f42b219d 100644
--- a/src/FE/pages/home/_components/Chat/ChatModelInfo.tsx
+++ b/src/FE/pages/home/_components/Chat/ChatModelInfo.tsx
@@ -44,7 +44,7 @@ const ChatModelInfo = (props: { modelId: number; modelName: string }) => {
 
   return (
     <div className="flex flex-col">
-      <label className="mb-2 text-base text-left text-neutral-700 dark:text-neutral-400 font-semibold">
+      <label className="mb-2 text-left">
         {modelName}
       </label>
       <div className="flex items-center">
diff --git a/src/FE/pages/home/_components/Chat/ChatModelSetting.tsx b/src/FE/pages/home/_components/Chat/ChatModelSetting.tsx
index 954cb7b1..9b2cd2e1 100644
--- a/src/FE/pages/home/_components/Chat/ChatModelSetting.tsx
+++ b/src/FE/pages/home/_components/Chat/ChatModelSetting.tsx
@@ -80,7 +80,7 @@ const ChatModelSetting = () => {
             return (
               <div
                 key={'chat-model-' + span.spanId}
-                className="space-y-4 rounded-lg border border-neutral-200 p-4 dark:border-neutral-600"
+                className="space-y-4 rounded-lg p-4 border"
               >
                 <ChatModelInfo
                   modelId={span.modelId}
diff --git a/src/FE/pages/home/_components/Chatbar/Conversation.tsx b/src/FE/pages/home/_components/Chatbar/Conversation.tsx
index 4f89466e..baa68c1d 100644
--- a/src/FE/pages/home/_components/Chatbar/Conversation.tsx
+++ b/src/FE/pages/home/_components/Chatbar/Conversation.tsx
@@ -193,7 +193,7 @@ const ConversationComponent = ({ chat }: Props) => {
             >
               <IconDots className="hover:opacity-50" size={16} />
             </DropdownMenuTrigger>
-            <DropdownMenuContent className="w-42">
+            <DropdownMenuContent className="w-42 border-none">
               <DropdownMenuItem
                 className="flex justify-start gap-3"
                 onClick={handleOpenChangeTitleModal}