diff --git a/datacenter/app/chat/page.tsx b/datacenter/app/chat/page.tsx
index de94b13a9..529b56efa 100644
--- a/datacenter/app/chat/page.tsx
+++ b/datacenter/app/chat/page.tsx
@@ -5,6 +5,7 @@ import useAgentChat from '@/hooks/useAgentChat';
 import ChatBoxComp from '@/components/chatBoxTemp';
 import { useDialogueContext } from '@/app/context/dialogue';
 import { useSearchParams } from 'next/navigation';
+
 const AgentPage = () => {
 	const searchParams = useSearchParams();
 	const { refreshDialogList } = useDialogueContext();
@@ -20,7 +21,7 @@ const AgentPage = () => {
 
 	const { data: paramsList } = useRequest(async () => await sendPostRequest(`/v1/chat/mode/params/list?chat_mode=${scene}`), {
 		ready: !!scene,
-		refreshDeps: [scene]
+		refreshDeps: [id, scene]
 	});
 
 	const { history, handleChatSubmit } = useAgentChat({
diff --git a/datacenter/app/datastores/page.tsx b/datacenter/app/datastores/page.tsx
index 05033bca5..d6f2e5469 100644
--- a/datacenter/app/datastores/page.tsx
+++ b/datacenter/app/datastores/page.tsx
@@ -3,7 +3,9 @@
 import { useRouter } from 'next/navigation'
 import React, { useState, useEffect } from 'react'
 import { InboxOutlined } from '@ant-design/icons'
-import CheckCircleOutlinedIcon from '@mui/icons-material/CheckCircleOutlined';
+import CheckCircleOutlinedIcon from '@mui/icons-material/CheckCircleOutlined'
+import AddBoxOutlinedIcon from '@mui/icons-material/AddBoxOutlined';
+import ContentPasteSearchOutlinedIcon from '@mui/icons-material/ContentPasteSearchOutlined';
 import type { UploadProps } from 'antd'
 import { message, Upload, Popover } from 'antd'
 import {
@@ -90,13 +92,16 @@ const Index = () => {
   }
   useEffect(() => {
     async function fetchData() {
-      const res = await fetch(`${process.env.API_BASE_URL}/knowledge/space/list`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({})
-      })
+      const res = await fetch(
+        `${process.env.API_BASE_URL}/knowledge/space/list`,
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({})
+        }
+      )
       const data = await res.json()
       if (data.success) {
         setKnowledgeSpaceList(data.data)
@@ -105,97 +110,135 @@ const Index = () => {
     fetchData()
   }, [])
   return (
-    <>
-      <Sheet
-        sx={{
-          display: 'flex',
-          justifyContent: 'space-between'
-        }}
-        className="p-4"
-      >
-        <Sheet
+    <Box
+      sx={{
+        width: '100%',
+        height: '100%',
+        backgroundColor: mode === 'light' ? 'rgb(238, 240, 245)' : 'rgb(33, 33, 33)'
+      }}
+    >
+      <Box className="page-body p-4" sx={{
+        '&': {
+          height: '90%',
+          overflow: 'auto',
+        },
+        '&::-webkit-scrollbar': {
+          display: 'none'
+        }
+      }}>
+        <Stack
+          direction="row"
+          justifyContent="space-between"
+          alignItems="center"
+          flexWrap="wrap"
           sx={{
-            fontSize: '30px',
-            fontWeight: 'bold'
+            '& i': {
+              width: '430px',
+              marginRight: '30px'
+            }
           }}
         >
-          Knowledge Spaces
-        </Sheet>
-        <Button
-          onClick={() => setIsAddKnowledgeSpaceModalShow(true)}
-          variant="outlined"
-        >
-          + New Knowledge Space
-        </Button>
-      </Sheet>
-      <div className="page-body p-4">
-        {knowledgeSpaceList.length ? (
-          <Table
-            color="primary"
-            variant="plain"
-            size="lg"
+          <Box
             sx={{
-              '& tbody tr: hover': {
-                backgroundColor:
-                  mode === 'light' ? 'rgb(246, 246, 246)' : 'rgb(33, 33, 40)'
-              },
-              '& tbody tr: hover a': {
-                textDecoration: 'underline'
-              },
-              '& tbody tr a': {
-                color: 'rgb(13, 96, 217)'
+              boxSizing: "content-box",
+              width: '390px',
+              height: '79px',
+              padding: '33px 20px 40px',
+              marginRight: '30px',
+              marginBottom: '30px',
+              fontSize: '18px',
+              fontWeight: 'bold',
+              color: 'black',
+              backgroundColor: mode === 'light' ? 'rgb(224, 228, 237)' : 'rgb(72, 72, 72)',
+              flexShrink: 0,
+              flexGrow: 0,
+              cursor: 'pointer',
+              '&: hover': {
+                boxShadow: '0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);'
               }
             }}
-          >
-            <thead>
-              <tr>
-                <th>Name</th>
-                <th>Vector</th>
-                <th>Owner</th>
-                <th>Description</th>
-              </tr>
-            </thead>
-            <tbody>
-              {knowledgeSpaceList.map((row: any) => (
-                <tr key={row.id}>
-                  <td>
-                    {
-                      <a
-                        style={{ fontWeight: 'bold' }}
-                        href="javascript:;"
-                        onClick={() =>
-                          router.push(`/datastores/documents?name=${row.name}`)
-                        }
-                      >
-                        {row.name}
-                      </a>
-                    }
-                  </td>
-                  <td>
-                    <Chip variant="solid" color="neutral" sx={{ opacity: 0.5 }}>
-                      {row.vector_type}
-                    </Chip>
-                  </td>
-                  <td>
-                    <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>
-          </Table>
-        ) : (
-          <></>
-        )}
-      </div>
+            onClick={() => setIsAddKnowledgeSpaceModalShow(true)}
+          ><AddBoxOutlinedIcon sx={{ marginRight: '10px', fontSize: '30px' }} />Space</Box>
+          {knowledgeSpaceList.map((item: any, index: number) => (
+            <Box
+              key={index}
+              sx={{
+                padding: '30px 20px 40px',
+                marginRight: '30px',
+                marginBottom: '30px',
+                backgroundColor: mode === 'light' ? 'rgb(255, 255, 255)' : 'rgb(72, 72, 72)',
+                borderTop: '3px solid rgb(82, 196, 26)',
+                flexShrink: 0,
+                flexGrow: 0,
+                cursor: 'pointer',
+                '&: hover': {
+                  boxShadow: '0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);'
+                }
+              }}
+              onClick={() => {
+                router.push(`/datastores/documents?name=${item.name}`);
+              }}
+            >
+              <Box sx={{
+                fontSize: '18px',
+                marginBottom: '10px',
+                fontWeight: 'bold',
+                color: 'black'
+              }}><ContentPasteSearchOutlinedIcon sx={{ marginRight: '5px' }}/>{item.name}</Box>
+              <Box
+                sx={{
+                  display: 'flex',
+                  justifyContent: 'flex-start',
+                }}
+              >
+                <Box
+                  sx={{
+                    width: '130px',
+                    flexGrow: 0,
+                    flexShrink: 0
+                  }}
+                >
+                  <Box
+                    sx={{
+                      color: 'black'
+                    }}
+                  >{item.vector_type}</Box>
+                  <Box sx={{ fontSize: '12px', color: 'black' }}>Vector</Box>
+                </Box>
+                <Box
+                  sx={{
+                    width: '130px',
+                    flexGrow: 0,
+                    flexShrink: 0
+                  }}
+                >
+                  <Box
+                    sx={{
+                      color: 'black'
+                    }}
+                  >{item.owner}</Box>
+                  <Box sx={{ fontSize: '12px', color: 'black' }}>Owner</Box>
+                </Box>
+                <Box
+                  sx={{
+                    width: '130px',
+                    flexGrow: 0,
+                    flexShrink: 0
+                  }}
+                >
+                  <Box
+                    sx={{
+                      color: 'black'
+                    }}
+                  >{item.docs || 0}</Box>
+                  <Box sx={{ fontSize: '12px', color: 'black' }}>Docs</Box>
+                </Box>
+              </Box>
+            </Box>
+          ))}
+          <i></i><i></i><i></i><i></i><i></i>
+        </Stack>
+      </Box>
       <Modal
         sx={{
           display: 'flex',
@@ -225,7 +268,11 @@ const Index = () => {
                     color: activeStep === index ? '#814DDE' : ''
                   }}
                 >
-                  {index < activeStep ? <CheckCircleOutlinedIcon /> : `${index + 1}.`}
+                  {index < activeStep ? (
+                    <CheckCircleOutlinedIcon />
+                  ) : (
+                    `${index + 1}.`
+                  )}
                   {`${item}`}
                 </Item>
               ))}
@@ -533,7 +580,7 @@ const Index = () => {
           )}
         </Sheet>
       </Modal>
-    </>
+    </Box>
   )
 }
 
diff --git a/datacenter/app/page.tsx b/datacenter/app/page.tsx
index b23ebde43..f66af26c4 100644
--- a/datacenter/app/page.tsx
+++ b/datacenter/app/page.tsx
@@ -61,6 +61,9 @@ export default function Home() {
                   size="md"
                   variant="solid"
                   className='text-base rounded-none	'
+                  style={{
+                    boxShadow: '0px 8px 10px 0px rgb(31 31 31 / 50%)'
+                  }}
                   onClick={async () => {
                     const res = await sendPostRequest('/v1/chat/dialogue/new', {
                       chat_mode: scene['chat_scene']
diff --git a/datacenter/components/leftSider.tsx b/datacenter/components/leftSider.tsx
index 489f79cf6..b2b552463 100644
--- a/datacenter/components/leftSider.tsx
+++ b/datacenter/components/leftSider.tsx
@@ -130,7 +130,7 @@ const LeftSider =  () => {
 													<ListItemContent>
 														<Link href={`/chat?id=${each.conv_uid}&scene=${each?.chat_mode}`} className="flex items-center justify-between">
 															<Typography fontSize={14} noWrap={true}>
-																<SmsOutlinedIcon className='mr-2' />
+																<SmsOutlinedIcon style={{ marginRight: '0.5rem' }} />
 																{each?.user_name || each?.user_input || 'undefined'}
 															</Typography>
 															<IconButton
diff --git a/datacenter/defaultTheme.ts b/datacenter/defaultTheme.ts
index dd0c10778..89143c7d1 100644
--- a/datacenter/defaultTheme.ts
+++ b/datacenter/defaultTheme.ts
@@ -8,7 +8,7 @@ export const joyTheme = extendTheme({
         mode: 'dark',
         primary: {
           ...colors.grey,
-          solidBg: '#dfdfdf91',
+          solidBg: '#9a9a9a91',
           solidColor: '#4e4e4e',
           solidHoverBg: '#d5d5d5',
           outlinedColor: '#4e4e59'
@@ -36,7 +36,9 @@ export const joyTheme = extendTheme({
           ...colors.grey,
           softBg: '#353539',
           softHoverBg: '#35353978',
-          softDisabledBg: '#353539'
+          softDisabledBg: '#353539',
+          solidBg: '#434356',
+          solidHoverBg: '#5a5a72',
         },
         neutral: {
           plainColor: '#D8D8DF',