diff --git a/datacenter/app/datastores/constants.tsx b/datacenter/app/datastores/constants.tsx
new file mode 100644
index 000000000..c5d7f8260
--- /dev/null
+++ b/datacenter/app/datastores/constants.tsx
@@ -0,0 +1 @@
+export const fetchBaseURL = 'http://30.183.154.125:5000';
diff --git a/datacenter/app/datastores/documents/chunklist/page.tsx b/datacenter/app/datastores/documents/chunklist/page.tsx
index e28a8f9f0..0a3db6383 100644
--- a/datacenter/app/datastores/documents/chunklist/page.tsx
+++ b/datacenter/app/datastores/documents/chunklist/page.tsx
@@ -2,11 +2,13 @@
 
 import { useSearchParams } from 'next/navigation'
 import React, { useState, useEffect } from 'react'
-import { Table, Stack } from '@/lib/mui'
+import { useColorScheme, Table, Stack } from '@/lib/mui'
 import { Popover, Pagination } from 'antd'
+import { fetchBaseURL } from '@/app/datastores/constants'
 const page_size = 20
 
 const ChunkList = () => {
+  const { mode } = useColorScheme()
   const spaceName = useSearchParams().get('spacename')
   const documentId = useSearchParams().get('documentid')
   const [total, setTotal] = useState<number>(0)
@@ -15,7 +17,7 @@ const ChunkList = () => {
   useEffect(() => {
     async function fetchChunks() {
       const res = await fetch(
-        `http://30.183.154.125:5000/knowledge/${spaceName}/chunk/list`,
+        `${fetchBaseURL}/knowledge/${spaceName}/chunk/list`,
         {
           method: 'POST',
           headers: {
@@ -41,7 +43,20 @@ const ChunkList = () => {
     <div className="p-4">
       {chunkList.length ? (
         <>
-          <Table color="info" variant="soft" size="lg">
+          <Table
+            color="info"
+            variant="soft"
+            size="lg"
+            sx={{
+              '& tbody tr: hover': {
+                backgroundColor:
+                  mode === 'light' ? 'rgb(246, 246, 246)' : 'rgb(33, 33, 40)'
+              },
+              '& tbody tr: hover a': {
+                textDecoration: 'underline'
+              }
+            }}
+          >
             <thead>
               <tr>
                 <th>Name</th>
@@ -78,9 +93,13 @@ const ChunkList = () => {
               ))}
             </tbody>
           </Table>
-          <Stack direction="row" justifyContent="flex-end" sx={{
-            marginTop: '20px'
-          }}>
+          <Stack
+            direction="row"
+            justifyContent="flex-end"
+            sx={{
+              marginTop: '20px'
+            }}
+          >
             <Pagination
               defaultPageSize={20}
               showSizeChanger={false}
@@ -88,7 +107,7 @@ const ChunkList = () => {
               total={total}
               onChange={async (page) => {
                 const res = await fetch(
-                  `http://30.183.154.125:5000/knowledge/${spaceName}/chunk/list`,
+                  `${fetchBaseURL}/knowledge/${spaceName}/chunk/list`,
                   {
                     method: 'POST',
                     headers: {
diff --git a/datacenter/app/datastores/documents/page.tsx b/datacenter/app/datastores/documents/page.tsx
index 63d001fb7..8e14b5d2c 100644
--- a/datacenter/app/datastores/documents/page.tsx
+++ b/datacenter/app/datastores/documents/page.tsx
@@ -3,6 +3,7 @@
 import { useRouter, useSearchParams } from 'next/navigation'
 import React, { useState, useEffect } from 'react'
 import {
+  useColorScheme,
   Button,
   Table,
   Sheet,
@@ -18,6 +19,7 @@ import moment from 'moment'
 import { InboxOutlined } from '@ant-design/icons'
 import type { UploadProps } from 'antd'
 import { Upload, Pagination, message } from 'antd'
+import { fetchBaseURL } from '@/app/datastores/constants'
 
 const { Dragger } = Upload
 const Item = styled(Sheet)(({ theme }) => ({
@@ -48,14 +50,16 @@ const documentTypeList = [
   {
     type: 'file',
     title: 'Document',
-    subTitle: 'Upload a document, document type can be PDF, CSV, Text, PowerPoint, Word, Markdown'
+    subTitle:
+      'Upload a document, document type can be PDF, CSV, Text, PowerPoint, Word, Markdown'
   }
 ]
-const page_size = 20;
+const page_size = 20
 
 const Documents = () => {
   const router = useRouter()
   const spaceName = useSearchParams().get('name')
+  const { mode } = useColorScheme()
   const [isAddDocumentModalShow, setIsAddDocumentModalShow] =
     useState<boolean>(false)
   const [activeStep, setActiveStep] = useState<number>(0)
@@ -85,7 +89,7 @@ const Documents = () => {
   useEffect(() => {
     async function fetchDocuments() {
       const res = await fetch(
-        `http://30.183.154.125:5000/knowledge/${spaceName}/document/list`,
+        `${fetchBaseURL}/knowledge/${spaceName}/document/list`,
         {
           method: 'POST',
           headers: {
@@ -123,7 +127,20 @@ const Documents = () => {
       </Sheet>
       {documents.length ? (
         <>
-          <Table color="info" variant="soft" size="lg">
+          <Table
+            color="info"
+            variant="soft"
+            size="lg"
+            sx={{
+              '& tbody tr: hover': {
+                backgroundColor:
+                  mode === 'light' ? 'rgb(246, 246, 246)' : 'rgb(33, 33, 40)'
+              },
+              '& tbody tr: hover a': {
+                textDecoration: 'underline'
+              }
+            }}
+          >
             <thead>
               <tr>
                 <th>Name</th>
@@ -138,11 +155,20 @@ const Documents = () => {
               {documents.map((row: any) => (
                 <tr key={row.id}>
                   <td>{row.doc_name}</td>
-                  <td><Chip variant='soft' color='neutral'>{row.doc_type}</Chip></td>
+                  <td>
+                    <Chip
+                      variant="soft"
+                      color="neutral"
+                      sx={{ fontWeight: 300 }}
+                    >
+                      {row.doc_type}
+                    </Chip>
+                  </td>
                   <td>{row.chunk_size} chunks</td>
                   <td>{moment(row.last_sync).format('YYYY-MM-DD HH:MM:SS')}</td>
                   <td>
                     <Chip
+                      sx={{ fontWeight: 300 }}
                       variant="soft"
                       color={(function () {
                         switch (row.status) {
@@ -168,7 +194,7 @@ const Documents = () => {
                           size="sm"
                           onClick={async () => {
                             const res = await fetch(
-                              `http://30.183.154.125:5000/knowledge/${spaceName}/document/sync`,
+                              `${fetchBaseURL}/knowledge/${spaceName}/document/sync`,
                               {
                                 method: 'POST',
                                 headers: {
@@ -207,9 +233,13 @@ const Documents = () => {
               ))}
             </tbody>
           </Table>
-          <Stack direction="row" justifyContent="flex-end" sx={{
-            marginTop: '20px'
-          }}>
+          <Stack
+            direction="row"
+            justifyContent="flex-end"
+            sx={{
+              marginTop: '20px'
+            }}
+          >
             <Pagination
               defaultPageSize={20}
               showSizeChanger={false}
@@ -217,7 +247,7 @@ const Documents = () => {
               total={total}
               onChange={async (page) => {
                 const res = await fetch(
-                  `http://30.183.154.125:5000/knowledge/${spaceName}/document/list`,
+                  `${fetchBaseURL}/knowledge/${spaceName}/document/list`,
                   {
                     method: 'POST',
                     headers: {
@@ -370,7 +400,7 @@ const Documents = () => {
                       return
                     }
                     const res = await fetch(
-                      `http://30.183.154.125:5000/knowledge/${spaceName}/document/add`,
+                      `${fetchBaseURL}/knowledge/${spaceName}/document/add`,
                       {
                         method: 'POST',
                         headers: {
@@ -388,7 +418,7 @@ const Documents = () => {
                       message.success('success')
                       setIsAddDocumentModalShow(false)
                       const res = await fetch(
-                        `http://30.183.154.125:5000/knowledge/${spaceName}/document/list`,
+                        `${fetchBaseURL}/knowledge/${spaceName}/document/list`,
                         {
                           method: 'POST',
                           headers: {
@@ -419,7 +449,7 @@ const Documents = () => {
                     formData.append('doc_file', originFileObj)
                     formData.append('doc_type', 'DOCUMENT')
                     const res = await fetch(
-                      `http://30.183.154.125:5000/knowledge/${spaceName}/document/upload`,
+                      `${fetchBaseURL}/knowledge/${spaceName}/document/upload`,
                       {
                         method: 'POST',
                         body: formData
@@ -430,7 +460,7 @@ const Documents = () => {
                       message.success('success')
                       setIsAddDocumentModalShow(false)
                       const res = await fetch(
-                        `http://30.183.154.125:5000/knowledge/${spaceName}/document/list`,
+                        `${fetchBaseURL}/knowledge/${spaceName}/document/list`,
                         {
                           method: 'POST',
                           headers: {
@@ -457,7 +487,7 @@ const Documents = () => {
                       return
                     }
                     const res = await fetch(
-                      `http://30.183.154.125:5000/knowledge/${spaceName}/document/add`,
+                      `${fetchBaseURL}/knowledge/${spaceName}/document/add`,
                       {
                         method: 'POST',
                         headers: {
@@ -476,7 +506,7 @@ const Documents = () => {
                       message.success('success')
                       setIsAddDocumentModalShow(false)
                       const res = await fetch(
-                        `http://30.183.154.125:5000/knowledge/${spaceName}/document/list`,
+                        `${fetchBaseURL}/knowledge/${spaceName}/document/list`,
                         {
                           method: 'POST',
                           headers: {
diff --git a/datacenter/app/datastores/page.tsx b/datacenter/app/datastores/page.tsx
index 6585ba546..e66c39a1f 100644
--- a/datacenter/app/datastores/page.tsx
+++ b/datacenter/app/datastores/page.tsx
@@ -6,6 +6,7 @@ import { InboxOutlined } from '@ant-design/icons'
 import type { UploadProps } from 'antd'
 import { message, Upload } from 'antd'
 import {
+  useColorScheme,
   Modal,
   Button,
   Table,
@@ -14,8 +15,10 @@ import {
   Box,
   Input,
   Textarea,
+  Chip,
   styled
 } from '@/lib/mui'
+import { fetchBaseURL } from '@/app/datastores/constants'
 
 const { Dragger } = Upload
 
@@ -49,12 +52,14 @@ const documentTypeList = [
   {
     type: 'file',
     title: 'Document',
-    subTitle: 'Upload a document, document type can be PDF, CSV, Text, PowerPoint, Word, Markdown'
+    subTitle:
+      'Upload a document, document type can be PDF, CSV, Text, PowerPoint, Word, Markdown'
   }
 ]
 
 const Index = () => {
   const router = useRouter()
+  const { mode } = useColorScheme()
   const [activeStep, setActiveStep] = useState<number>(0)
   const [documentType, setDocumentType] = useState<string>('')
   const [knowledgeSpaceList, setKnowledgeSpaceList] = useState<any>([])
@@ -82,16 +87,13 @@ const Index = () => {
   }
   useEffect(() => {
     async function fetchData() {
-      const res = await fetch(
-        'http://30.183.154.125:5000/knowledge/space/list',
-        {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json'
-          },
-          body: JSON.stringify({})
-        }
-      )
+      const res = await fetch(`${fetchBaseURL}/knowledge/space/list`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({})
+      })
       const data = await res.json()
       if (data.success) {
         setKnowledgeSpaceList(data.data)
@@ -125,7 +127,20 @@ const Index = () => {
       </Sheet>
       <div className="page-body p-4">
         {knowledgeSpaceList.length ? (
-          <Table color="info" variant="soft" size="lg">
+          <Table
+            color="info"
+            variant="soft"
+            size="lg"
+            sx={{
+              '& tbody tr: hover': {
+                backgroundColor:
+                  mode === 'light' ? 'rgb(246, 246, 246)' : 'rgb(33, 33, 40)'
+              },
+              '& tbody tr: hover a': {
+                textDecoration: 'underline'
+              }
+            }}
+          >
             <thead>
               <tr>
                 <th>Name</th>
@@ -139,6 +154,7 @@ const Index = () => {
                   <td>
                     {
                       <a
+                        style={{ fontWeight: 'bold' }}
                         href="javascript:;"
                         onClick={() =>
                           router.push(`/datastores/documents?name=${row.name}`)
@@ -148,8 +164,24 @@ const Index = () => {
                       </a>
                     }
                   </td>
-                  <td>{row.vector_type}</td>
-                  <td>{row.owner}</td>
+                  <td>
+                    <Chip
+                      variant="soft"
+                      color="neutral"
+                      sx={{ fontWeight: 300 }}
+                    >
+                      {row.vector_type}
+                    </Chip>
+                  </td>
+                  <td>
+                    <Chip
+                      variant="soft"
+                      color="neutral"
+                      sx={{ fontWeight: 300 }}
+                    >
+                      {row.owner}
+                    </Chip>
+                  </td>
                 </tr>
               ))}
             </tbody>
@@ -205,27 +237,24 @@ const Index = () => {
                     message.error('please input the name')
                     return
                   }
-                  const res = await fetch(
-                    'http://30.183.154.125:5000/knowledge/space/add',
-                    {
-                      method: 'POST',
-                      headers: {
-                        'Content-Type': 'application/json'
-                      },
-                      body: JSON.stringify({
-                        name: knowledgeSpaceName,
-                        vector_type: 'Chroma',
-                        owner: 'keting',
-                        desc: 'test1'
-                      })
-                    }
-                  )
+                  const res = await fetch(`${fetchBaseURL}/knowledge/space/add`, {
+                    method: 'POST',
+                    headers: {
+                      'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                      name: knowledgeSpaceName,
+                      vector_type: 'Chroma',
+                      owner: 'keting',
+                      desc: 'test1'
+                    })
+                  })
                   const data = await res.json()
                   if (data.success) {
                     message.success('success')
                     setActiveStep(1)
                     const res = await fetch(
-                      'http://30.183.154.125:5000/knowledge/space/list',
+                      `${fetchBaseURL}/knowledge/space/list`,
                       {
                         method: 'POST',
                         headers: {
@@ -342,7 +371,7 @@ const Index = () => {
                       return
                     }
                     const res = await fetch(
-                      `http://30.183.154.125:5000/knowledge/${knowledgeSpaceName}/document/add`,
+                      `${fetchBaseURL}/knowledge/${knowledgeSpaceName}/document/add`,
                       {
                         method: 'POST',
                         headers: {
@@ -372,7 +401,7 @@ const Index = () => {
                     formData.append('doc_file', originFileObj)
                     formData.append('doc_type', 'DOCUMENT')
                     const res = await fetch(
-                      `http://30.183.154.125:5000/knowledge/${knowledgeSpaceName}/document/upload`,
+                      `${fetchBaseURL}/knowledge/${knowledgeSpaceName}/document/upload`,
                       {
                         method: 'POST',
                         body: formData
@@ -391,7 +420,7 @@ const Index = () => {
                       return
                     }
                     const res = await fetch(
-                      `http://30.183.154.125:5000/knowledge/${knowledgeSpaceName}/document/add`,
+                      `${fetchBaseURL}/knowledge/${knowledgeSpaceName}/document/add`,
                       {
                         method: 'POST',
                         headers: {