diff --git a/web/src/components/message-item/group-button.tsx b/web/src/components/message-item/group-button.tsx
index 2437f42ba..aad19cb40 100644
--- a/web/src/components/message-item/group-button.tsx
+++ b/web/src/components/message-item/group-button.tsx
@@ -14,8 +14,8 @@ import { Radio, Tooltip } from 'antd';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import FeedbackDialog from '../feedback-dialog';
+import { PromptDialog } from '../prompt-dialog';
 import { useRemoveMessage, useSendFeedback, useSpeech } from './hooks';
-import PromptModal from './prompt-modal';
 
 interface IProps {
   messageId: string;
@@ -87,11 +87,11 @@ export const AssistantGroupButton = ({
         ></FeedbackDialog>
       )}
       {promptVisible && (
-        <PromptModal
+        <PromptDialog
           visible={promptVisible}
           hideModal={hidePromptModal}
           prompt={prompt}
-        ></PromptModal>
+        ></PromptDialog>
       )}
     </>
   );
diff --git a/web/src/components/message-item/prompt-modal.tsx b/web/src/components/message-item/prompt-modal.tsx
deleted file mode 100644
index f5222e59b..000000000
--- a/web/src/components/message-item/prompt-modal.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { IModalProps } from '@/interfaces/common';
-import { IFeedbackRequestBody } from '@/interfaces/request/chat';
-import { Modal, Space } from 'antd';
-import HightLightMarkdown from '../highlight-markdown';
-import SvgIcon from '../svg-icon';
-
-const PromptModal = ({
-  visible,
-  hideModal,
-  prompt,
-}: IModalProps<IFeedbackRequestBody> & { prompt?: string }) => {
-  return (
-    <Modal
-      title={
-        <Space>
-          <SvgIcon name={`prompt`} width={18}></SvgIcon>
-          Prompt
-        </Space>
-      }
-      width={'80%'}
-      open={visible}
-      onCancel={hideModal}
-      footer={null}
-    >
-      <HightLightMarkdown>{prompt}</HightLightMarkdown>
-    </Modal>
-  );
-};
-
-export default PromptModal;
diff --git a/web/src/components/next-message-item/group-button.tsx b/web/src/components/next-message-item/group-button.tsx
index fcf4edcb4..1719511de 100644
--- a/web/src/components/next-message-item/group-button.tsx
+++ b/web/src/components/next-message-item/group-button.tsx
@@ -18,9 +18,9 @@ import { Download, NotebookText } from 'lucide-react';
 import { useCallback, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import FeedbackDialog from '../feedback-dialog';
+import { PromptDialog } from '../prompt-dialog';
 import { ToggleGroup, ToggleGroupItem } from '../ui/toggle-group';
 import { useRemoveMessage, useSendFeedback, useSpeech } from './hooks';
-import PromptModal from './prompt-modal';
 
 interface IProps {
   messageId: string;
@@ -137,11 +137,11 @@ export const AssistantGroupButton = ({
         ></FeedbackDialog>
       )}
       {promptVisible && (
-        <PromptModal
+        <PromptDialog
           visible={promptVisible}
           hideModal={hidePromptModal}
           prompt={prompt}
-        ></PromptModal>
+        ></PromptDialog>
       )}
     </>
   );
diff --git a/web/src/components/next-message-item/prompt-modal.tsx b/web/src/components/next-message-item/prompt-modal.tsx
deleted file mode 100644
index f5222e59b..000000000
--- a/web/src/components/next-message-item/prompt-modal.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { IModalProps } from '@/interfaces/common';
-import { IFeedbackRequestBody } from '@/interfaces/request/chat';
-import { Modal, Space } from 'antd';
-import HightLightMarkdown from '../highlight-markdown';
-import SvgIcon from '../svg-icon';
-
-const PromptModal = ({
-  visible,
-  hideModal,
-  prompt,
-}: IModalProps<IFeedbackRequestBody> & { prompt?: string }) => {
-  return (
-    <Modal
-      title={
-        <Space>
-          <SvgIcon name={`prompt`} width={18}></SvgIcon>
-          Prompt
-        </Space>
-      }
-      width={'80%'}
-      open={visible}
-      onCancel={hideModal}
-      footer={null}
-    >
-      <HightLightMarkdown>{prompt}</HightLightMarkdown>
-    </Modal>
-  );
-};
-
-export default PromptModal;
diff --git a/web/src/components/prompt-dialog.tsx b/web/src/components/prompt-dialog.tsx
new file mode 100644
index 000000000..65dc61a94
--- /dev/null
+++ b/web/src/components/prompt-dialog.tsx
@@ -0,0 +1,33 @@
+import { IModalProps } from '@/interfaces/common';
+import { IFeedbackRequestBody } from '@/interfaces/request/chat';
+import HightLightMarkdown from './highlight-markdown';
+import SvgIcon from './svg-icon';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from './ui/dialog';
+
+type PromptDialogProps = IModalProps<IFeedbackRequestBody> & {
+  prompt?: string;
+};
+
+export function PromptDialog({
+  visible,
+  hideModal,
+  prompt,
+}: PromptDialogProps) {
+  return (
+    <Dialog open={visible} onOpenChange={hideModal}>
+      <DialogContent className="max-w-[80vw]">
+        <DialogHeader>
+          <DialogTitle>
+            <div className="space-x-2">
+              <SvgIcon name={`prompt`} width={18}></SvgIcon>
+              <span> Prompt</span>
+            </div>
+          </DialogTitle>
+        </DialogHeader>
+        <section className="max-h-[80vh] overflow-auto">
+          <HightLightMarkdown>{prompt}</HightLightMarkdown>
+        </section>
+      </DialogContent>
+    </Dialog>
+  );
+}