diff --git a/datacenter/app/datastores/documents/chunklist/page.tsx b/datacenter/app/datastores/documents/chunklist/page.tsx
index f25a42edd..1333eb007 100644
--- a/datacenter/app/datastores/documents/chunklist/page.tsx
+++ b/datacenter/app/datastores/documents/chunklist/page.tsx
@@ -4,18 +4,18 @@ import { useSearchParams } from 'next/navigation'
 import React, { useState, useEffect } from 'react'
 import { Table, Stack } from '@/lib/mui'
 import { Popover, Pagination } from 'antd'
-const page_size = 20;
+const page_size = 20
 
 const ChunkList = () => {
   const spaceName = useSearchParams().get('spacename')
   const documentId = useSearchParams().get('documentid')
-  const [total, setTotal] = useState<number>(0);
-  const [current, setCurrent] = useState<number>(0);
+  const [total, setTotal] = useState<number>(0)
+  const [current, setCurrent] = useState<number>(0)
   const [chunkList, setChunkList] = useState<any>([])
   useEffect(() => {
     async function fetchChunks() {
       const res = await fetch(
-        `http://localhost:8000/knowledge/${spaceName}/chunk/list`,
+        `http://30.183.154.125:5000/knowledge/${spaceName}/chunk/list`,
         {
           method: 'POST',
           headers: {
@@ -31,75 +31,86 @@ const ChunkList = () => {
       const data = await res.json()
       if (data.success) {
         setChunkList(data.data.data)
-        setTotal(data.data.total);
-        setCurrent(data.data.page);
+        setTotal(data.data.total)
+        setCurrent(data.data.page)
       }
     }
     fetchChunks()
   }, [])
   return (
     <div className="p-4">
-      <Table color="neutral" stripe="odd" variant="outlined">
-        <thead>
-          <tr>
-            <th>Name</th>
-            <th>Content</th>
-            <th>Meta Data</th>
-          </tr>
-        </thead>
-        <tbody>
-          {chunkList.map((row: any) => (
-            <tr key={row.id}>
-              <td>{row.doc_name}</td>
-              <td>
-                {
-                  <Popover content={row.content} trigger="hover">
-                    {row.content.length > 10
-                      ? `${row.content.slice(0, 10)}...`
-                      : row.content}
-                  </Popover>
+      {chunkList.length ? (
+        <>
+          <Table color="neutral" stripe="odd" variant="outlined">
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th>Content</th>
+                <th>Meta Data</th>
+              </tr>
+            </thead>
+            <tbody>
+              {chunkList.map((row: any) => (
+                <tr key={row.id}>
+                  <td>{row.doc_name}</td>
+                  <td>
+                    {
+                      <Popover content={row.content} trigger="hover">
+                        {row.content.length > 10
+                          ? `${row.content.slice(0, 10)}...`
+                          : row.content}
+                      </Popover>
+                    }
+                  </td>
+                  <td>
+                    {
+                      <Popover
+                        content={JSON.stringify(row.meta_info || '{}', null, 2)}
+                        trigger="hover"
+                      >
+                        {row.meta_info.length > 10
+                          ? `${row.meta_info.slice(0, 10)}...`
+                          : row.meta_info}
+                      </Popover>
+                    }
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </Table>
+          <Stack direction="row" justifyContent="flex-end">
+            <Pagination
+              current={current}
+              total={total}
+              onChange={async (page) => {
+                const res = await fetch(
+                  `http://30.183.154.125:5000/knowledge/${spaceName}/chunk/list`,
+                  {
+                    method: 'POST',
+                    headers: {
+                      'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                      document_id: documentId,
+                      page,
+                      page_size
+                    })
+                  }
+                )
+                const data = await res.json()
+                if (data.success) {
+                  setChunkList(data.data.data)
+                  setTotal(data.data.total)
+                  setCurrent(data.data.page)
                 }
-              </td>
-              <td>
-                {
-                  <Popover
-                    content={JSON.stringify(row.meta_info || '{}', null, 2)}
-                    trigger="hover"
-                  >
-                    {row.meta_info.length > 10
-                      ? `${row.meta_info.slice(0, 10)}...`
-                      : row.meta_info}
-                  </Popover>
-                }
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </Table>
-      <Stack direction="row" justifyContent="flex-end">
-        <Pagination current={current} total={total} onChange={async page => {
-          const res = await fetch(
-            `http://localhost:8000/knowledge/${spaceName}/chunk/list`,
-            {
-              method: 'POST',
-              headers: {
-                'Content-Type': 'application/json'
-              },
-              body: JSON.stringify({
-                document_id: documentId,
-                page,
-                page_size
-              })
-            }
-          )
-          const data = await res.json()
-          if (data.success) {
-            setChunkList(data.data.data)
-            setTotal(data.data.total);
-            setCurrent(data.data.page);
-          }
-        }} hideOnSinglePage />
-      </Stack>
+              }}
+              hideOnSinglePage
+            />
+          </Stack>
+        </>
+      ) : (
+        <></>
+      )}
     </div>
   )
 }
diff --git a/datacenter/app/datastores/documents/page.tsx b/datacenter/app/datastores/documents/page.tsx
index e5c8575dd..713b20cc3 100644
--- a/datacenter/app/datastores/documents/page.tsx
+++ b/datacenter/app/datastores/documents/page.tsx
@@ -17,7 +17,7 @@ import {
 import moment from 'moment'
 import { InboxOutlined } from '@ant-design/icons'
 import type { UploadProps } from 'antd'
-import { Upload, message } from 'antd'
+import { Upload, Pagination, message } from 'antd'
 
 const { Dragger } = Upload
 const Item = styled(Sheet)(({ theme }) => ({
@@ -51,6 +51,7 @@ const documentTypeList = [
     subTitle: 'It can be: PDF, CSV, JSON, Text, PowerPoint, Word, Excel'
   }
 ]
+const page_size = 20;
 
 const Documents = () => {
   const router = useRouter()
@@ -62,9 +63,11 @@ const Documents = () => {
   const [documents, setDocuments] = useState<any>([])
   const [webPageUrl, setWebPageUrl] = useState<string>('')
   const [documentName, setDocumentName] = useState<any>('')
-  const [textSource, setTextSource] = useState<string>('');
-  const [text, setText] = useState<string>('');
+  const [textSource, setTextSource] = useState<string>('')
+  const [text, setText] = useState<string>('')
   const [originFileObj, setOriginFileObj] = useState<any>(null)
+  const [total, setTotal] = useState<number>(0)
+  const [current, setCurrent] = useState<number>(0)
   const props: UploadProps = {
     name: 'file',
     multiple: false,
@@ -82,18 +85,23 @@ const Documents = () => {
   useEffect(() => {
     async function fetchDocuments() {
       const res = await fetch(
-        `http://localhost:8000/knowledge/${spaceName}/document/list`,
+        `http://30.183.154.125:5000/knowledge/${spaceName}/document/list`,
         {
           method: 'POST',
           headers: {
             'Content-Type': 'application/json'
           },
-          body: JSON.stringify({})
+          body: JSON.stringify({
+            page: 1,
+            page_size
+          })
         }
       )
       const data = await res.json()
       if (data.success) {
-        setDocuments(data.data)
+        setDocuments(data.data.data)
+        setTotal(data.data.total)
+        setCurrent(data.data.page)
       }
     }
     fetchDocuments()
@@ -113,89 +121,123 @@ const Documents = () => {
           + Add Datasource
         </Button>
       </Sheet>
-      <Table color="neutral" stripe="odd" variant="outlined">
-        <thead>
-          <tr>
-            <th>Name</th>
-            <th>Type</th>
-            <th>Size</th>
-            <th>Last Synch</th>
-            <th>Status</th>
-            <th>Operation</th>
-          </tr>
-        </thead>
-        <tbody>
-          {documents.map((row: any) => (
-            <tr key={row.id}>
-              <td>{row.doc_name}</td>
-              <td>{row.doc_type}</td>
-              <td>{row.chunk_size}</td>
-              <td>{moment(row.last_sync).format('YYYY-MM-DD HH:MM:SS')}</td>
-              <td>
-                <Chip
-                  color={(function () {
-                    switch (row.status) {
-                      case 'TODO':
-                        return 'neutral'
-                      case 'RUNNING':
-                        return 'primary'
-                      case 'FINISHED':
-                        return 'success'
-                      case 'FAILED':
-                        return 'danger'
-                    }
-                  })()}
-                >
-                  {row.status}
-                </Chip>
-              </td>
-              <td>
-                {
-                  <>
-                    <Button
-                      variant="outlined"
-                      size="sm"
-                      onClick={async () => {
-                        const res = await fetch(
-                          `http://localhost:8000/knowledge/${spaceName}/document/sync`,
-                          {
-                            method: 'POST',
-                            headers: {
-                              'Content-Type': 'application/json'
-                            },
-                            body: JSON.stringify({
-                              doc_ids: [row.id]
-                            })
-                          }
-                        )
-                        const data = await res.json()
-                        if (data.success) {
-                          message.success('success')
-                        } else {
-                          message.error(data.err_msg || 'failed')
+      {documents.length ? (
+        <>
+          <Table color="neutral" stripe="odd" variant="outlined">
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th>Type</th>
+                <th>Size</th>
+                <th>Last Synch</th>
+                <th>Status</th>
+                <th>Operation</th>
+              </tr>
+            </thead>
+            <tbody>
+              {documents.map((row: any) => (
+                <tr key={row.id}>
+                  <td>{row.doc_name}</td>
+                  <td>{row.doc_type}</td>
+                  <td>{row.chunk_size}</td>
+                  <td>{moment(row.last_sync).format('YYYY-MM-DD HH:MM:SS')}</td>
+                  <td>
+                    <Chip
+                      color={(function () {
+                        switch (row.status) {
+                          case 'TODO':
+                            return 'neutral'
+                          case 'RUNNING':
+                            return 'primary'
+                          case 'FINISHED':
+                            return 'success'
+                          case 'FAILED':
+                            return 'danger'
                         }
-                      }}
+                      })()}
                     >
-                      Synch
-                    </Button>
-                    <Button
-                      variant="outlined"
-                      size="sm"
-                      onClick={() => {
-                        router.push(
-                          `/datastores/documents/chunklist?spacename=${spaceName}&documentid=${row.id}`
-                        )
-                      }}
-                    >
-                      Detail of Chunks
-                    </Button>
-                  </>
+                      {row.status}
+                    </Chip>
+                  </td>
+                  <td>
+                    {
+                      <>
+                        <Button
+                          variant="outlined"
+                          size="sm"
+                          onClick={async () => {
+                            const res = await fetch(
+                              `http://30.183.154.125:5000/knowledge/${spaceName}/document/sync`,
+                              {
+                                method: 'POST',
+                                headers: {
+                                  'Content-Type': 'application/json'
+                                },
+                                body: JSON.stringify({
+                                  doc_ids: [row.id]
+                                })
+                              }
+                            )
+                            const data = await res.json()
+                            if (data.success) {
+                              message.success('success')
+                            } else {
+                              message.error(data.err_msg || 'failed')
+                            }
+                          }}
+                        >
+                          Synch
+                        </Button>
+                        <Button
+                          variant="outlined"
+                          size="sm"
+                          onClick={() => {
+                            router.push(
+                              `/datastores/documents/chunklist?spacename=${spaceName}&documentid=${row.id}`
+                            )
+                          }}
+                        >
+                          Detail of Chunks
+                        </Button>
+                      </>
+                    }
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </Table>
+          <Stack direction="row" justifyContent="flex-end">
+            <Pagination
+              current={current}
+              total={total}
+              onChange={async (page) => {
+                const res = await fetch(
+                  `http://30.183.154.125:5000/knowledge/${spaceName}/document/list`,
+                  {
+                    method: 'POST',
+                    headers: {
+                      'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                      page,
+                      page_size
+                    })
+                  }
+                )
+                const data = await res.json()
+                if (data.success) {
+                  setDocuments(data.data.data)
+                  setTotal(data.data.total)
+                  setCurrent(data.data.page)
                 }
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </Table>
+              }}
+              hideOnSinglePage
+            />
+          </Stack>
+        </>
+      ) : (
+        <></>
+      )}
       <Modal
         sx={{
           display: 'flex',
@@ -323,7 +365,7 @@ const Documents = () => {
                       return
                     }
                     const res = await fetch(
-                      `http://localhost:8000/knowledge/${spaceName}/document/add`,
+                      `http://30.183.154.125:5000/knowledge/${spaceName}/document/add`,
                       {
                         method: 'POST',
                         headers: {
@@ -341,18 +383,23 @@ const Documents = () => {
                       message.success('success')
                       setIsAddDocumentModalShow(false)
                       const res = await fetch(
-                        `http://localhost:8000/knowledge/${spaceName}/document/list`,
+                        `http://30.183.154.125:5000/knowledge/${spaceName}/document/list`,
                         {
                           method: 'POST',
                           headers: {
                             'Content-Type': 'application/json'
                           },
-                          body: JSON.stringify({})
+                          body: JSON.stringify({
+                            page: current,
+                            page_size
+                          })
                         }
                       )
                       const data = await res.json()
                       if (data.success) {
                         setDocuments(data.data)
+                        setTotal(data.data.total)
+                        setCurrent(data.data.page)
                       }
                     } else {
                       message.error(data.err_msg || 'failed')
@@ -362,12 +409,12 @@ const Documents = () => {
                       message.error('Please select a file')
                       return
                     }
-                    const formData = new FormData();
-                    formData.append('doc_name', documentName);
-                    formData.append('doc_file', originFileObj);
-                    formData.append('doc_type', 'DOCUMENT');
+                    const formData = new FormData()
+                    formData.append('doc_name', documentName)
+                    formData.append('doc_file', originFileObj)
+                    formData.append('doc_type', 'DOCUMENT')
                     const res = await fetch(
-                      `http://localhost:8000/knowledge/${spaceName}/document/upload`,
+                      `http://30.183.154.125:5000/knowledge/${spaceName}/document/upload`,
                       {
                         method: 'POST',
                         body: formData
@@ -378,18 +425,23 @@ const Documents = () => {
                       message.success('success')
                       setIsAddDocumentModalShow(false)
                       const res = await fetch(
-                        `http://localhost:8000/knowledge/${spaceName}/document/list`,
+                        `http://30.183.154.125:5000/knowledge/${spaceName}/document/list`,
                         {
                           method: 'POST',
                           headers: {
                             'Content-Type': 'application/json'
                           },
-                          body: JSON.stringify({})
+                          body: JSON.stringify({
+                            page: current,
+                            page_size
+                          })
                         }
                       )
                       const data = await res.json()
                       if (data.success) {
                         setDocuments(data.data)
+                        setTotal(data.data.total)
+                        setCurrent(data.data.page)
                       }
                     } else {
                       message.error(data.err_msg || 'failed')
@@ -400,7 +452,7 @@ const Documents = () => {
                       return
                     }
                     const res = await fetch(
-                      `http://localhost:8000/knowledge/${spaceName}/document/add`,
+                      `http://30.183.154.125:5000/knowledge/${spaceName}/document/add`,
                       {
                         method: 'POST',
                         headers: {
@@ -419,18 +471,23 @@ const Documents = () => {
                       message.success('success')
                       setIsAddDocumentModalShow(false)
                       const res = await fetch(
-                        `http://localhost:8000/knowledge/${spaceName}/document/list`,
+                        `http://30.183.154.125:5000/knowledge/${spaceName}/document/list`,
                         {
                           method: 'POST',
                           headers: {
                             'Content-Type': 'application/json'
                           },
-                          body: JSON.stringify({})
+                          body: JSON.stringify({
+                            page: current,
+                            page_size
+                          })
                         }
                       )
                       const data = await res.json()
                       if (data.success) {
                         setDocuments(data.data)
+                        setTotal(data.data.total)
+                        setCurrent(data.data.page)
                       }
                     } else {
                       message.error(data.err_msg || 'failed')
diff --git a/datacenter/app/datastores/page.tsx b/datacenter/app/datastores/page.tsx
index f99e138f8..d64a1156a 100644
--- a/datacenter/app/datastores/page.tsx
+++ b/datacenter/app/datastores/page.tsx
@@ -63,8 +63,8 @@ const Index = () => {
   const [knowledgeSpaceName, setKnowledgeSpaceName] = useState<string>('')
   const [webPageUrl, setWebPageUrl] = useState<string>('')
   const [documentName, setDocumentName] = useState<any>('')
-  const [textSource, setTextSource] = useState<string>('');
-  const [text, setText] = useState<string>('');
+  const [textSource, setTextSource] = useState<string>('')
+  const [text, setText] = useState<string>('')
   const [originFileObj, setOriginFileObj] = useState<any>(null)
   const props: UploadProps = {
     name: 'file',
@@ -82,13 +82,16 @@ const Index = () => {
   }
   useEffect(() => {
     async function fetchData() {
-      const res = await fetch('http://localhost:8000/knowledge/space/list', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({})
-      })
+      const res = await fetch(
+        'http://30.183.154.125:5000/knowledge/space/list',
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({})
+        }
+      )
       const data = await res.json()
       if (data.success) {
         setKnowledgeSpaceList(data.data)
@@ -121,35 +124,39 @@ const Index = () => {
         </Button>
       </Sheet>
       <div className="page-body p-4">
-        <Table color="neutral" stripe="odd" variant="outlined">
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th>Provider</th>
-              <th>Owner</th>
-            </tr>
-          </thead>
-          <tbody>
-            {knowledgeSpaceList.map((row: any) => (
-              <tr key={row.id}>
-                <td>
-                  {
-                    <a
-                      href="javascript:;"
-                      onClick={() =>
-                        router.push(`/datastores/documents?name=${row.name}`)
-                      }
-                    >
-                      {row.name}
-                    </a>
-                  }
-                </td>
-                <td>{row.vector_type}</td>
-                <td>{row.owner}</td>
+        {knowledgeSpaceList.length ? (
+          <Table color="neutral" stripe="odd" variant="outlined">
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th>Provider</th>
+                <th>Owner</th>
               </tr>
-            ))}
-          </tbody>
-        </Table>
+            </thead>
+            <tbody>
+              {knowledgeSpaceList.map((row: any) => (
+                <tr key={row.id}>
+                  <td>
+                    {
+                      <a
+                        href="javascript:;"
+                        onClick={() =>
+                          router.push(`/datastores/documents?name=${row.name}`)
+                        }
+                      >
+                        {row.name}
+                      </a>
+                    }
+                  </td>
+                  <td>{row.vector_type}</td>
+                  <td>{row.owner}</td>
+                </tr>
+              ))}
+            </tbody>
+          </Table>
+        ) : (
+          <></>
+        )}
       </div>
       <Modal
         sx={{
@@ -199,7 +206,7 @@ const Index = () => {
                     return
                   }
                   const res = await fetch(
-                    'http://localhost:8000/knowledge/space/add',
+                    'http://30.183.154.125:5000/knowledge/space/add',
                     {
                       method: 'POST',
                       headers: {
@@ -218,7 +225,7 @@ const Index = () => {
                     message.success('success')
                     setActiveStep(1)
                     const res = await fetch(
-                      'http://localhost:8000/knowledge/space/list',
+                      'http://30.183.154.125:5000/knowledge/space/list',
                       {
                         method: 'POST',
                         headers: {
@@ -335,7 +342,7 @@ const Index = () => {
                       return
                     }
                     const res = await fetch(
-                      `http://localhost:8000/knowledge/${knowledgeSpaceName}/document/add`,
+                      `http://30.183.154.125:5000/knowledge/${knowledgeSpaceName}/document/add`,
                       {
                         method: 'POST',
                         headers: {
@@ -360,12 +367,12 @@ const Index = () => {
                       message.error('Please select a file')
                       return
                     }
-                    const formData = new FormData();
-                    formData.append('doc_name', documentName);
-                    formData.append('doc_file', originFileObj);
-                    formData.append('doc_type', 'DOCUMENT');
+                    const formData = new FormData()
+                    formData.append('doc_name', documentName)
+                    formData.append('doc_file', originFileObj)
+                    formData.append('doc_type', 'DOCUMENT')
                     const res = await fetch(
-                      `http://localhost:8000/knowledge/${knowledgeSpaceName}/document/upload`,
+                      `http://30.183.154.125:5000/knowledge/${knowledgeSpaceName}/document/upload`,
                       {
                         method: 'POST',
                         body: formData
@@ -384,7 +391,7 @@ const Index = () => {
                       return
                     }
                     const res = await fetch(
-                      `http://localhost:8000/knowledge/${knowledgeSpaceName}/document/add`,
+                      `http://30.183.154.125:5000/knowledge/${knowledgeSpaceName}/document/add`,
                       {
                         method: 'POST',
                         headers: {