diff --git a/web/src/components/next-message-item/reference-document-list.tsx b/web/src/components/next-message-item/reference-document-list.tsx
index cf1cff06f8..48e8b72f50 100644
--- a/web/src/components/next-message-item/reference-document-list.tsx
+++ b/web/src/components/next-message-item/reference-document-list.tsx
@@ -43,6 +43,7 @@ export function ReferenceDocumentList({ list }: { list: Docagg[] }) {
           documentId={selectedDocument.doc_id}
           chunk={{
             document_name: selectedDocument.doc_name,
+            document_url: selectedDocument.url,
           }}
         ></PdfDrawer>
       )}
diff --git a/web/src/interfaces/database/dataset.ts b/web/src/interfaces/database/dataset.ts
index 4eae9de8b5..75925b1f21 100644
--- a/web/src/interfaces/database/dataset.ts
+++ b/web/src/interfaces/database/dataset.ts
@@ -167,6 +167,7 @@ export interface IChunk {
   doc_id: string;
   doc_name: string;
   doc_type_kwd?: ChunkDocType;
+  document_url?: string;
   image_id: string;
   important_kwd?: string[];
   question_kwd?: string[]; // keywords
diff --git a/web/src/pages/next-search/document-preview-modal/index.tsx b/web/src/pages/next-search/document-preview-modal/index.tsx
index 93645337c9..70d24b697c 100644
--- a/web/src/pages/next-search/document-preview-modal/index.tsx
+++ b/web/src/pages/next-search/document-preview-modal/index.tsx
@@ -9,12 +9,17 @@ import { IModalProps } from '@/interfaces/common';
 import { IReferenceChunk } from '@/interfaces/database/chat';
 import { IChunk } from '@/interfaces/database/dataset';
 import { cn } from '@/lib/utils';
-import { useEffect, useState } from 'react';
 
 interface IProps extends IModalProps<any> {
   documentId: string;
-  chunk: IChunk &
-    IReferenceChunk & { docnm_kwd: string; document_name: string };
+  chunk: {
+    docnm_kwd?: string;
+    document_name?: string;
+    positions?: number[][];
+    content_with_weight?: string;
+    content?: string | null;
+    [key: string]: any;
+  };
 }
 function getFileExtensionRegex(filename: string): string {
   const match = filename.match(/\.([^.]+)$/);
@@ -27,27 +32,32 @@ const PdfDrawer = ({
   chunk,
 }: IProps) => {
   const getDocumentUrl = useGetDocumentUrl(documentId);
-  const { highlights, setWidthAndHeight } = useGetChunkHighlights(chunk);
+  const { highlights, setWidthAndHeight } = useGetChunkHighlights(
+    chunk as IChunk | IReferenceChunk,
+  );
   // const ref = useRef<(highlight: IHighlight) => void>(() => {});
   // const [loaded, setLoaded] = useState(false);
-  const url = getDocumentUrl();
-
-  const [fileType, setFileType] = useState('');
-
-  useEffect(() => {
-    if (chunk.docnm_kwd || chunk.document_name) {
-      const type = getFileExtensionRegex(
-        chunk.docnm_kwd || chunk.document_name,
-      );
-      setFileType(type);
-    }
-  }, [chunk.docnm_kwd, chunk.document_name]);
+  const documentName = chunk.docnm_kwd || chunk.document_name;
+  const fileType = documentName ? getFileExtensionRegex(documentName) : '';
+  const isWebPage = !fileType && !!chunk.document_url;
+  const url = isWebPage ? (chunk.document_url as string) : getDocumentUrl();
   return (
     <Modal
       title={
         <div className="flex items-center gap-2">
-          <FileIcon name={chunk.docnm_kwd || chunk.document_name}></FileIcon>
-          {chunk.docnm_kwd || chunk.document_name}
+          <FileIcon name={documentName as string}></FileIcon>
+          {isWebPage ? (
+            <a
+              href={url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-text-sub-title-invert underline"
+            >
+              {documentName}
+            </a>
+          ) : (
+            documentName
+          )}
         </div>
       }
       onCancel={hideModal}