diff --git a/web/src/components/document-preview/pdf-preview.tsx b/web/src/components/document-preview/pdf-preview.tsx
index 5fc9377c5..babcd37ef 100644
--- a/web/src/components/document-preview/pdf-preview.tsx
+++ b/web/src/components/document-preview/pdf-preview.tsx
@@ -8,12 +8,12 @@ import {
   Popup,
 } from 'react-pdf-highlighter';
 
-import { useCatchDocumentError } from '@/components/pdf-previewer/hooks';
 import { Spin } from '@/components/ui/spin';
 // import FileError from '@/pages/document-viewer/file-error';
 import { Authorization } from '@/constants/authorization';
 import FileError from '@/pages/document-viewer/file-error';
 import { getAuthorization } from '@/utils/authorization-util';
+import { useCatchDocumentError } from '../pdf-previewer/hooks';
 import styles from './index.module.less';
 type PdfLoaderProps = React.ComponentProps<typeof PdfLoader> & {
   httpHeaders?: Record<string, string>;
@@ -149,3 +149,4 @@ const PdfPreview = ({
 };
 
 export default memo(PdfPreview);
+export { PdfPreview };
diff --git a/web/src/components/pdf-drawer/index.tsx b/web/src/components/pdf-drawer/index.tsx
index 4b6caeca9..2d54da7f4 100644
--- a/web/src/components/pdf-drawer/index.tsx
+++ b/web/src/components/pdf-drawer/index.tsx
@@ -1,8 +1,12 @@
+import {
+  useGetChunkHighlights,
+  useGetDocumentUrl,
+} from '@/hooks/use-document-request';
 import { IModalProps } from '@/interfaces/common';
 import { IReferenceChunk } from '@/interfaces/database/chat';
 import { IChunk } from '@/interfaces/database/knowledge';
 import { cn } from '@/lib/utils';
-import DocumentPreviewer from '../pdf-previewer';
+import PdfPreview from '../document-preview/pdf-preview';
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from '../ui/sheet';
 
 interface IProps extends IModalProps<any> {
@@ -13,13 +17,15 @@ interface IProps extends IModalProps<any> {
 }
 
 export const PdfSheet = ({
-  visible = false,
   hideModal,
   documentId,
   chunk,
   width = '50vw',
   height,
 }: IProps) => {
+  const getDocumentUrl = useGetDocumentUrl(documentId);
+  const url = getDocumentUrl(documentId);
+  const { highlights, setWidthAndHeight } = useGetChunkHighlights(chunk);
   return (
     <Sheet open onOpenChange={hideModal}>
       <SheetContent
@@ -32,11 +38,14 @@ export const PdfSheet = ({
         <SheetHeader>
           <SheetTitle>Document Previewer</SheetTitle>
         </SheetHeader>
-        <DocumentPreviewer
-          documentId={documentId}
-          chunk={chunk}
-          visible={visible}
-        ></DocumentPreviewer>
+        {url && documentId && (
+          <PdfPreview
+            className={'p-0 !h-[calc(100vh-80px)] w-full'}
+            highlights={highlights}
+            setWidthAndHeight={setWidthAndHeight}
+            url={url}
+          ></PdfPreview>
+        )}
       </SheetContent>
     </Sheet>
   );
diff --git a/web/src/components/pdf-previewer/hooks.ts b/web/src/components/pdf-previewer/hooks.ts
index 0774a9d9a..164877c3a 100644
--- a/web/src/components/pdf-previewer/hooks.ts
+++ b/web/src/components/pdf-previewer/hooks.ts
@@ -1,15 +1,22 @@
+import { Authorization } from '@/constants/authorization';
+import { getAuthorization } from '@/utils/authorization-util';
 import axios from 'axios';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
 export const useCatchDocumentError = (url: string) => {
+  const httpHeaders = useMemo(() => {
+    return {
+      [Authorization]: getAuthorization(),
+    };
+  }, []);
   const [error, setError] = useState<string>('');
 
   const fetchDocument = useCallback(async () => {
-    const { data } = await axios.get(url);
+    const { data } = await axios.get(url, { headers: httpHeaders });
     if (data.code !== 0) {
       setError(data?.message);
     }
-  }, [url]);
+  }, [url, httpHeaders]);
   useEffect(() => {
     fetchDocument();
   }, [fetchDocument]);
diff --git a/web/src/hooks/use-document-request.ts b/web/src/hooks/use-document-request.ts
index 9075e50b1..6232569be 100644
--- a/web/src/hooks/use-document-request.ts
+++ b/web/src/hooks/use-document-request.ts
@@ -469,8 +469,8 @@ export const useGetDocumentUrl = (documentId?: string) => {
   const getDocumentUrl = useCallback(
     (id?: string) => {
       return auth
-        ? `${ExternalApi}/v1/documents/${documentId || id}`
-        : `${api_host}/document/get/${documentId || id}`;
+        ? `${ExternalApi}/v1/documents/${id || documentId}`
+        : `${api_host}/document/get/${id || documentId}`;
     },
     [documentId, auth],
   );
diff --git a/web/src/routes.tsx b/web/src/routes.tsx
index 198b95f49..300382dd2 100644
--- a/web/src/routes.tsx
+++ b/web/src/routes.tsx
@@ -22,11 +22,11 @@ export enum Routes {
   MemoryMessage = '/memory-message',
   MemorySetting = '/memory-setting',
   AgentList = '/agent-list',
-  Searches = '/next-searches',
-  Search = '/next-search',
-  SearchShare = '/next-search/share',
-  Chats = '/next-chats',
-  Chat = '/next-chat',
+  Searches = '/searches',
+  Search = '/search',
+  SearchShare = '/search/share',
+  Chats = '/chats',
+  Chat = '/chat',
   Files = '/files',
   ProfileSetting = '/profile-setting',
   Profile = '/profile',
diff --git a/web/vite.config.ts b/web/vite.config.ts
index 833aebcb9..350417692 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -70,7 +70,14 @@ export default defineConfig(({ mode, command }) => {
           changeOrigin: true,
           ws: true,
         },
-        '^/(api|v1)': {
+
+        '/api': {
+          target: 'http://127.0.0.1:9380/',
+          changeOrigin: true,
+          ws: true,
+        },
+
+        '/v1': {
           target: 'http://127.0.0.1:9380/',
           changeOrigin: true,
           ws: true,