diff --git a/datacenter/app/datastores/page.tsx b/datacenter/app/datastores/page.tsx
index b42accfc2..0874707d5 100644
--- a/datacenter/app/datastores/page.tsx
+++ b/datacenter/app/datastores/page.tsx
@@ -4,10 +4,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 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 { message, Upload } from 'antd'
 import {
   useColorScheme,
   Modal,
@@ -23,6 +22,7 @@ import {
   Typography,
   styled
 } from '@/lib/mui'
+import { sendSpaceGetRequest, sendSpacePostRequest, sendSpaceUploadPostRequest } from '@/utils/request';
 
 const { Dragger } = Upload
 
@@ -92,17 +92,7 @@ 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 data = await res.json()
+      const data = await sendSpacePostRequest('/knowledge/space/list')
       if (data.success) {
         setKnowledgeSpaceList(data.data)
       }
@@ -115,7 +105,7 @@ const Index = () => {
         width: '100%',
         height: '100%',
       }}
-      className='bg-[#EEF0F5] dark:bg-[#212121]'
+      className='bg-[#F1F2F5] dark:bg-[#212121]'
     >
       <Box className="page-body p-4" sx={{
         '&': {
@@ -140,6 +130,8 @@ const Index = () => {
         >
           <Box
             sx={{
+              display: 'flex',
+              alignContent: 'start',
               boxSizing: "content-box",
               width: '390px',
               height: '79px',
@@ -152,13 +144,32 @@ const Index = () => {
               flexShrink: 0,
               flexGrow: 0,
               cursor: 'pointer',
+              borderRadius: '16px',
               '&: hover': {
                 boxShadow: '0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);'
               }
             }}
             onClick={() => setIsAddKnowledgeSpaceModalShow(true)}
-            className='bg-[#E0E4ED] dark:bg-[#484848]'
-          ><AddBoxOutlinedIcon sx={{ marginRight: '10px', fontSize: '30px' }} />Space</Box>
+            className='bg-[#E9EBEE] dark:bg-[#484848]'
+          >
+            <Box
+              sx={{
+                width: '32px',
+                height: '32px',
+                lineHeight: '28px',
+                border: '1px solid gray',
+                textAlign: 'center',
+                borderRadius: '5px',
+                marginRight: '5px',
+                fontWeight: '300'
+              }}
+            >+</Box>
+            <Box
+              sx={{
+                fontSize: '16px',
+              }}
+            >space</Box>
+          </Box>
           {knowledgeSpaceList.map((item: any, index: number) => (
             <Box
               key={index}
@@ -166,10 +177,11 @@ const Index = () => {
                 padding: '30px 20px 40px',
                 marginRight: '30px',
                 marginBottom: '30px',
-                borderTop: '3px solid rgb(82, 196, 26)',
+                borderTop: '4px solid rgb(84, 164, 248)',
                 flexShrink: 0,
                 flexGrow: 0,
                 cursor: 'pointer',
+                borderRadius: '10px',
                 '&: hover': {
                   boxShadow: '0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);'
                 }
@@ -184,7 +196,7 @@ const Index = () => {
                 marginBottom: '10px',
                 fontWeight: 'bold',
                 color: 'black'
-              }}><ContentPasteSearchOutlinedIcon sx={{ marginRight: '5px' }}/>{item.name}</Box>
+              }}><ContentPasteSearchOutlinedIcon sx={{ marginRight: '5px', color: '#2AA3FF' }}/>{item.name}</Box>
               <Box
                 sx={{
                   display: 'flex',
@@ -200,7 +212,7 @@ const Index = () => {
                 >
                   <Box
                     sx={{
-                      color: 'black'
+                      color: '#2AA3FF'
                     }}
                   >{item.vector_type}</Box>
                   <Box sx={{ fontSize: '12px', color: 'black' }}>Vector</Box>
@@ -214,7 +226,7 @@ const Index = () => {
                 >
                   <Box
                     sx={{
-                      color: 'black'
+                      color: '#2AA3FF'
                     }}
                   >{item.owner}</Box>
                   <Box sx={{ fontSize: '12px', color: 'black' }}>Owner</Box>
@@ -228,7 +240,7 @@ const Index = () => {
                 >
                   <Box
                     sx={{
-                      color: 'black'
+                      color: '#2AA3FF'
                     }}
                   >{item.docs || 0}</Box>
                   <Box sx={{ fontSize: '12px', color: 'black' }}>Docs</Box>
@@ -294,36 +306,19 @@ const Index = () => {
                     message.error('please input the name')
                     return
                   }
-                  const res = await fetch(
-                    `${process.env.API_BASE_URL}/knowledge/space/add`,
+                  const data = await sendSpacePostRequest(
+                    `/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(
-                      `${process.env.API_BASE_URL}/knowledge/space/list`,
-                      {
-                        method: 'POST',
-                        headers: {
-                          'Content-Type': 'application/json'
-                        },
-                        body: JSON.stringify({})
-                      }
-                    )
-                    const data = await res.json()
+                    const data = await sendSpacePostRequest('/knowledge/space/list')
                     if (data.success) {
                       setKnowledgeSpaceList(data.data)
                     }
@@ -460,37 +455,18 @@ const Index = () => {
                         message.error('Please input the Web Page URL')
                         return
                       }
-                      const res = await fetch(
-                        `${process.env.API_BASE_URL}/knowledge/${knowledgeSpaceName}/document/add`,
-                        {
-                          method: 'POST',
-                          headers: {
-                            'Content-Type': 'application/json'
-                          },
-                          body: JSON.stringify({
-                            doc_name: documentName,
-                            content: webPageUrl,
-                            doc_type: 'URL'
-                          })
-                        }
-                      )
-                      const data = await res.json()
+                      const data = await sendSpacePostRequest(`/knowledge/${knowledgeSpaceName}/document/add`, {
+                        doc_name: documentName,
+                        content: webPageUrl,
+                        doc_type: 'URL'
+                      })
                       if (data.success) {
                         message.success('success')
                         setIsAddKnowledgeSpaceModalShow(false)
                         synchChecked &&
-                          fetch(
-                            `${process.env.API_BASE_URL}/knowledge/${knowledgeSpaceName}/document/sync`,
-                            {
-                              method: 'POST',
-                              headers: {
-                                'Content-Type': 'application/json'
-                              },
-                              body: JSON.stringify({
-                                doc_ids: [data.data]
-                              })
-                            }
-                          )
+                          sendSpacePostRequest(`/knowledge/${knowledgeSpaceName}/document/sync`, {
+                            doc_ids: [data.data]
+                          })
                       } else {
                         message.error(data.err_msg || 'failed')
                       }
@@ -503,30 +479,15 @@ const Index = () => {
                       formData.append('doc_name', documentName)
                       formData.append('doc_file', originFileObj)
                       formData.append('doc_type', 'DOCUMENT')
-                      const res = await fetch(
-                        `${process.env.API_BASE_URL}/knowledge/${knowledgeSpaceName}/document/upload`,
-                        {
-                          method: 'POST',
-                          body: formData
-                        }
-                      )
-                      const data = await res.json()
+
+                      const data = await sendSpaceUploadPostRequest(`/knowledge/${knowledgeSpaceName}/document/upload`, formData);
                       if (data.success) {
                         message.success('success')
                         setIsAddKnowledgeSpaceModalShow(false)
                         synchChecked &&
-                          fetch(
-                            `${process.env.API_BASE_URL}/knowledge/${knowledgeSpaceName}/document/sync`,
-                            {
-                              method: 'POST',
-                              headers: {
-                                'Content-Type': 'application/json'
-                              },
-                              body: JSON.stringify({
-                                doc_ids: [data.data]
-                              })
-                            }
-                          )
+                          sendSpacePostRequest(`/knowledge/${knowledgeSpaceName}/document/sync`, {
+                            doc_ids: [data.data]
+                          });
                       } else {
                         message.error(data.err_msg || 'failed')
                       }
@@ -535,38 +496,19 @@ const Index = () => {
                         message.error('Please input the text')
                         return
                       }
-                      const res = await fetch(
-                        `${process.env.API_BASE_URL}/knowledge/${knowledgeSpaceName}/document/add`,
-                        {
-                          method: 'POST',
-                          headers: {
-                            'Content-Type': 'application/json'
-                          },
-                          body: JSON.stringify({
-                            doc_name: documentName,
+                      const data = await sendSpacePostRequest(`/knowledge/${knowledgeSpaceName}/document/add`, {
+                        doc_name: documentName,
                             source: textSource,
                             content: text,
                             doc_type: 'TEXT'
-                          })
-                        }
-                      )
-                      const data = await res.json()
+                      })
                       if (data.success) {
                         message.success('success')
                         setIsAddKnowledgeSpaceModalShow(false)
                         synchChecked &&
-                          fetch(
-                            `${process.env.API_BASE_URL}/knowledge/${knowledgeSpaceName}/document/sync`,
-                            {
-                              method: 'POST',
-                              headers: {
-                                'Content-Type': 'application/json'
-                              },
-                              body: JSON.stringify({
-                                doc_ids: [data.data]
-                              })
-                            }
-                          )
+                          sendSpacePostRequest(`/knowledge/${knowledgeSpaceName}/document/sync`, {
+                            doc_ids: [data.data]
+                          })
                       } else {
                         message.error(data.err_msg || 'failed')
                       }
diff --git a/datacenter/utils/request.ts b/datacenter/utils/request.ts
index a8a6fa1c2..2a5551d97 100644
--- a/datacenter/utils/request.ts
+++ b/datacenter/utils/request.ts
@@ -38,6 +38,24 @@ export const sendGetRequest = (url: string, qs?: { [key: string]: any }) => {
   });
 }
 
+export const sendSpaceGetRequest = (url: string, qs?: { [key: string]: any }) => {
+	if (qs) {
+    const str = Object.keys(qs)
+      .filter(k => qs[k] !== undefined && qs[k] !== '')
+      .map(k => `${k}=${qs[k]}`)
+      .join('&');
+    if (str) {
+      url += `?${str}`;
+    }
+  }
+	return axios.get(url, {
+    headers: DEFAULT_HEADERS
+  }).then(res => res).catch(err => {
+    message.error(err);
+    Promise.reject(err);
+  });
+}
+
 export const sendPostRequest = (url: string, body?: any) => {
   const reqBody = sanitizeBody(body);
   return axios.post("/api" + url, {
@@ -47,4 +65,24 @@ export const sendPostRequest = (url: string, body?: any) => {
     message.error(err);
     Promise.reject(err);
   });
+}
+
+export const sendSpacePostRequest = (url: string, body?: any) => {
+  const reqBody = sanitizeBody(body);
+  return axios.post(url, {
+    body: reqBody,
+    headers: DEFAULT_HEADERS
+  }).then(res => res).catch(err => {
+    message.error(err);
+    Promise.reject(err);
+  });
+}
+
+export const sendSpaceUploadPostRequest = (url: string, body?: any) => {
+  return axios.post(url, {
+    body: body,
+  }).then(res => res).catch(err => {
+    message.error(err);
+    Promise.reject(err);
+  });
 }
\ No newline at end of file