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..82cd96838 100644
--- a/datacenter/app/datastores/documents/page.tsx
+++ b/datacenter/app/datastores/documents/page.tsx
@@ -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': {
@@ -157,9 +158,9 @@ const Documents = () => {
                   <td>{row.doc_name}</td>
                   <td>
                     <Chip
-                      variant="soft"
+                      variant="solid"
                       color="neutral"
-                      sx={{ fontWeight: 300 }}
+                      sx={{ opacity: .5 }}
                     >
                       {row.doc_type}
                     </Chip>
@@ -168,8 +169,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: .5 }}
+                      variant="solid"
                       color={(function () {
                         switch (row.status) {
                           case 'TODO':
@@ -192,6 +193,9 @@ const Documents = () => {
                         <Button
                           variant="outlined"
                           size="sm"
+                          sx={{
+                            marginRight: '20px'
+                          }}
                           onClick={async () => {
                             const res = await fetch(
                               `${fetchBaseURL}/knowledge/${spaceName}/document/sync`,
@@ -297,7 +301,7 @@ 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 +393,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;
 }