diff --git a/datacenter/app/datastores/constants.tsx b/datacenter/app/datastores/constants.tsx
index 427f053b4..ffacee373 100644
--- a/datacenter/app/datastores/constants.tsx
+++ b/datacenter/app/datastores/constants.tsx
@@ -1 +1 @@
-export const fetchBaseURL = 'http://30.183.153.109:5000';
+export const fetchBaseURL = 'http://30.183.154.76:5000';
diff --git a/datacenter/app/datastores/documents/chunklist/page.tsx b/datacenter/app/datastores/documents/chunklist/page.tsx
index 0a3db6383..c0a0b3538 100644
--- a/datacenter/app/datastores/documents/chunklist/page.tsx
+++ b/datacenter/app/datastores/documents/chunklist/page.tsx
@@ -44,8 +44,8 @@ const ChunkList = () => {
       {chunkList.length ? (
         <>
           <Table
-            color="info"
-            variant="soft"
+            color="primary"
+            variant="plain"
             size="lg"
             sx={{
               '& tbody tr: hover': {
diff --git a/datacenter/app/datastores/documents/page.tsx b/datacenter/app/datastores/documents/page.tsx
index 8e14b5d2c..02f2126d6 100644
--- a/datacenter/app/datastores/documents/page.tsx
+++ b/datacenter/app/datastores/documents/page.tsx
@@ -18,7 +18,7 @@ import {
 import moment from 'moment'
 import { InboxOutlined } from '@ant-design/icons'
 import type { UploadProps } from 'antd'
-import { Upload, Pagination, message } from 'antd'
+import { Upload, Pagination, Popover, message } from 'antd'
 import { fetchBaseURL } from '@/app/datastores/constants'
 
 const { Dragger } = Upload
@@ -33,8 +33,8 @@ const Item = styled(Sheet)(({ theme }) => ({
   color: theme.vars.palette.text.secondary
 }))
 const stepsOfAddingDocument = [
-  'Choose a Datasource type',
-  'Setup the Datasource'
+  '1.Choose a Datasource type',
+  '2.Setup the Datasource'
 ]
 const documentTypeList = [
   {
@@ -121,6 +121,7 @@ const Documents = () => {
         <Button
           variant="outlined"
           onClick={() => setIsAddDocumentModalShow(true)}
+          sx={{ marginBottom: '20px' }}
         >
           + Add Datasource
         </Button>
@@ -128,8 +129,8 @@ const Documents = () => {
       {documents.length ? (
         <>
           <Table
-            color="info"
-            variant="soft"
+            color="primary"
+            variant="plain"
             size="lg"
             sx={{
               '& tbody tr: hover': {
@@ -148,6 +149,7 @@ const Documents = () => {
                 <th>Size</th>
                 <th>Last Synch</th>
                 <th>Status</th>
+                <th>Result</th>
                 <th>Operation</th>
               </tr>
             </thead>
@@ -156,11 +158,7 @@ const Documents = () => {
                 <tr key={row.id}>
                   <td>{row.doc_name}</td>
                   <td>
-                    <Chip
-                      variant="soft"
-                      color="neutral"
-                      sx={{ fontWeight: 300 }}
-                    >
+                    <Chip variant="solid" color="neutral" sx={{ opacity: 0.5 }}>
                       {row.doc_type}
                     </Chip>
                   </td>
@@ -168,8 +166,8 @@ const Documents = () => {
                   <td>{moment(row.last_sync).format('YYYY-MM-DD HH:MM:SS')}</td>
                   <td>
                     <Chip
-                      sx={{ fontWeight: 300 }}
-                      variant="soft"
+                      sx={{ opacity: 0.5 }}
+                      variant="solid"
                       color={(function () {
                         switch (row.status) {
                           case 'TODO':
@@ -186,12 +184,46 @@ const Documents = () => {
                       {row.status}
                     </Chip>
                   </td>
+                  <td>
+                    {(function () {
+                      if (row.status === 'TODO' || row.status === 'RUNNING') {
+                        return ''
+                      } else if (row.status === 'FINISHED') {
+                        return (
+                          <Popover content={row.result} trigger="hover">
+                            <Chip
+                              variant="solid"
+                              color="success"
+                              sx={{ opacity: 0.5 }}
+                            >
+                              SUCCESS
+                            </Chip>
+                          </Popover>
+                        )
+                      } else {
+                        return (
+                          <Popover content={row.result} trigger="hover">
+                            <Chip
+                              variant="solid"
+                              color="danger"
+                              sx={{ opacity: 0.5 }}
+                            >
+                              FAILED
+                            </Chip>
+                          </Popover>
+                        )
+                      }
+                    })()}
+                  </td>
                   <td>
                     {
                       <>
                         <Button
                           variant="outlined"
                           size="sm"
+                          sx={{
+                            marginRight: '20px'
+                          }}
                           onClick={async () => {
                             const res = await fetch(
                               `${fetchBaseURL}/knowledge/${spaceName}/document/sync`,
@@ -297,7 +329,10 @@ const Documents = () => {
               {stepsOfAddingDocument.map((item: any, index: number) => (
                 <Item
                   key={item}
-                  sx={{ fontWeight: activeStep === index ? 'bold' : '' }}
+                  sx={{
+                    fontWeight: activeStep === index ? 'bold' : '',
+                    color: activeStep === index ? '#814DDE' : ''
+                  }}
                 >
                   {item}
                 </Item>
@@ -389,6 +424,7 @@ const Documents = () => {
                 )}
               </Box>
               <Button
+                variant="outlined"
                 onClick={async () => {
                   if (documentName === '') {
                     message.error('Please input the name')
diff --git a/datacenter/app/datastores/page.tsx b/datacenter/app/datastores/page.tsx
index e66c39a1f..bdefb3af1 100644
--- a/datacenter/app/datastores/page.tsx
+++ b/datacenter/app/datastores/page.tsx
@@ -4,7 +4,7 @@ import { useRouter } from 'next/navigation'
 import React, { useState, useEffect } from 'react'
 import { InboxOutlined } from '@ant-design/icons'
 import type { UploadProps } from 'antd'
-import { message, Upload } from 'antd'
+import { message, Upload, Popover } from 'antd'
 import {
   useColorScheme,
   Modal,
@@ -34,9 +34,9 @@ const Item = styled(Sheet)(({ theme }) => ({
 }))
 
 const stepsOfAddingSpace = [
-  'Knowledge Space Configuration',
-  'Choose a Datasource type',
-  'Setup the Datasource'
+  '1.Knowledge Space Config',
+  '2.Choose a Datasource type',
+  '3.Setup the Datasource'
 ]
 const documentTypeList = [
   {
@@ -128,8 +128,8 @@ const Index = () => {
       <div className="page-body p-4">
         {knowledgeSpaceList.length ? (
           <Table
-            color="info"
-            variant="soft"
+            color="primary"
+            variant="plain"
             size="lg"
             sx={{
               '& tbody tr: hover': {
@@ -146,6 +146,7 @@ const Index = () => {
                 <th>Name</th>
                 <th>Vector</th>
                 <th>Owner</th>
+                <th>Description</th>
               </tr>
             </thead>
             <tbody>
@@ -165,23 +166,22 @@ const Index = () => {
                     }
                   </td>
                   <td>
-                    <Chip
-                      variant="soft"
-                      color="neutral"
-                      sx={{ fontWeight: 300 }}
-                    >
+                    <Chip variant="solid" color="neutral" sx={{ opacity: 0.5 }}>
                       {row.vector_type}
                     </Chip>
                   </td>
                   <td>
-                    <Chip
-                      variant="soft"
-                      color="neutral"
-                      sx={{ fontWeight: 300 }}
-                    >
+                    <Chip variant="solid" color="neutral" sx={{ opacity: 0.5 }}>
                       {row.owner}
                     </Chip>
                   </td>
+                  <td>
+                    <Popover content={row.desc} trigger="hover">
+                      {row.desc.length > 10
+                        ? `${row.desc.slice(0, 10)}...`
+                        : row.desc}
+                    </Popover>
+                  </td>
                 </tr>
               ))}
             </tbody>
@@ -214,7 +214,7 @@ const Index = () => {
               {stepsOfAddingSpace.map((item: any, index: number) => (
                 <Item
                   key={item}
-                  sx={{ fontWeight: activeStep === index ? 'bold' : '' }}
+                  sx={{ fontWeight: activeStep === index ? 'bold' : '', color: activeStep === index ? '#814DDE' : '' }}
                 >
                   {item}
                 </Item>
@@ -237,18 +237,21 @@ const Index = () => {
                     message.error('please input the name')
                     return
                   }
-                  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 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')
@@ -360,6 +363,7 @@ const Index = () => {
                 )}
               </Box>
               <Button
+                variant='outlined'
                 onClick={async () => {
                   if (documentName === '') {
                     message.error('Please input the name')
diff --git a/datacenter/app/globals.css b/datacenter/app/globals.css
index 153cf633c..93095ccd9 100644
--- a/datacenter/app/globals.css
+++ b/datacenter/app/globals.css
@@ -12,28 +12,6 @@ body {
   background-color: var(--joy-palette-background-body);
 }
 
-table {
-  border-collapse: collapse;
-  width: 100%;
-}
-
-th, td {
-  border: 1px solid #ddd;
-  text-align: left;
-  padding: 8px;
-}
-
-th {
-  background-color: #f2f2f2;
-}
-
-tr:nth-child(even) {
-  background-color: #f2f2f2;
-}
-tr:hover {
-  background-color: #ddd;
-}
-
 body .ant-btn-primary {
   background-color: #1677ff;
 }