diff --git a/datacenter/app/datastores/documents/page.tsx b/datacenter/app/datastores/documents/page.tsx
index 668313c99..23ee57bf3 100644
--- a/datacenter/app/datastores/documents/page.tsx
+++ b/datacenter/app/datastores/documents/page.tsx
@@ -2,14 +2,60 @@
 
 import { useRouter, useSearchParams } from 'next/navigation'
 import React, { useState, useEffect } from 'react'
-import { Button, Table } from '@/lib/mui'
+import {
+  Button,
+  Table,
+  Sheet,
+  Modal,
+  Box,
+  Stack,
+  Input,
+  styled
+} from '@/lib/mui'
 import moment from 'moment'
 import { message } from 'antd'
 
+const stepsOfAddingDocument = [
+  'Choose a Datasource type',
+  'Setup the Datasource'
+]
+const documentTypeList = [
+  {
+    type: 'text',
+    title: 'Text',
+    subTitle: 'Paste some text'
+  },
+  {
+    type: 'webPage',
+    title: 'Web Page',
+    subTitle: 'Crawl text from a web page'
+  },
+  {
+    type: 'file',
+    title: 'File',
+    subTitle: 'It can be: PDF, CSV, JSON, Text, PowerPoint, Word, Excel'
+  }
+]
+const Item = styled(Sheet)(({ theme }) => ({
+  width: '50%',
+  backgroundColor:
+    theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff',
+  ...theme.typography.body2,
+  padding: theme.spacing(1),
+  textAlign: 'center',
+  borderRadius: 4,
+  color: theme.vars.palette.text.secondary
+}))
+
 const Documents = () => {
   const router = useRouter()
   const spaceName = useSearchParams().get('name')
+  const [isAddDocumentModalShow, setIsAddDocumentModalShow] =
+    useState<boolean>(false)
+  const [activeStep, setActiveStep] = useState<number>(0)
   const [documents, setDocuments] = useState<any>([])
+  const [webPageUrl, setWebPageUrl] = useState<string>('')
+  const [documentName, setDocumentName] = useState<string>('')
   useEffect(() => {
     async function fetchDocuments() {
       const res = await fetch(
@@ -31,6 +77,19 @@ const Documents = () => {
   }, [])
   return (
     <div className="p-4">
+      <Sheet
+        sx={{
+          display: 'flex',
+          flexDirection: 'row-reverse'
+        }}
+      >
+        <Button
+          variant="outlined"
+          onClick={() => setIsAddDocumentModalShow(true)}
+        >
+          + Add Datasource
+        </Button>
+      </Sheet>
       <Table sx={{ '& thead th:nth-child(1)': { width: '40%' } }}>
         <thead>
           <tr>
@@ -70,9 +129,9 @@ const Documents = () => {
                         )
                         const data = await res.json()
                         if (data.success) {
-                          message.success('success');
+                          message.success('success')
                         } else {
-                          message.error(data.err_msg || 'failed');
+                          message.error(data.err_msg || 'failed')
                         }
                       }}
                     >
@@ -95,6 +154,137 @@ const Documents = () => {
           ))}
         </tbody>
       </Table>
+      <Modal
+        sx={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          'z-index': 1000
+        }}
+        open={isAddDocumentModalShow}
+        onClose={() => setIsAddDocumentModalShow(false)}
+      >
+        <Sheet
+          variant="outlined"
+          sx={{
+            width: 800,
+            borderRadius: 'md',
+            p: 3,
+            boxShadow: 'lg'
+          }}
+        >
+          <Box sx={{ width: '100%' }}>
+            <Stack spacing={2} direction="row">
+              {stepsOfAddingDocument.map((item: any, index: number) => (
+                <Item
+                  key={item}
+                  sx={{ fontWeight: activeStep === index ? 'bold' : '' }}
+                >
+                  {item}
+                </Item>
+              ))}
+            </Stack>
+          </Box>
+          {activeStep === 0 ? (
+            <>
+              <Box sx={{ margin: '30px auto' }}>
+                {documentTypeList.map((item: any) => (
+                  <Sheet
+                    key={item.type}
+                    sx={{
+                      boxSizing: 'border-box',
+                      height: '80px',
+                      padding: '12px',
+                      display: 'flex',
+                      flexDirection: 'column',
+                      justifyContent: 'space-between',
+                      border: '1px solid gray',
+                      borderRadius: '6px',
+                      marginBottom: '20px',
+                      cursor: 'pointer'
+                    }}
+                    onClick={() => {
+                      if (item.type === 'webPage') {
+                        setActiveStep(1)
+                      }
+                    }}
+                  >
+                    <Sheet sx={{ fontSize: '20px', fontWeight: 'bold' }}>
+                      {item.title}
+                    </Sheet>
+                    <Sheet>{item.subTitle}</Sheet>
+                  </Sheet>
+                ))}
+              </Box>
+            </>
+          ) : (
+            <>
+              <Box sx={{ margin: '30px auto' }}>
+                Name:
+                <Input
+                  placeholder="Please input the name"
+                  onChange={(e: any) => setDocumentName(e.target.value)}
+                  sx={{ marginBottom: '20px' }}
+                />
+                Web Page URL:
+                <Input
+                  placeholder="Please input the Web Page URL"
+                  onChange={(e: any) => setWebPageUrl(e.target.value)}
+                />
+              </Box>
+              <Button
+                onClick={async () => {
+                  if (documentName === '') {
+                    message.error('Please input the name')
+                    return
+                  }
+                  if (webPageUrl === '') {
+                    message.error('Please input the Web Page URL')
+                    return
+                  }
+                  const res = await fetch(
+                    `http://localhost:8000/knowledge/${spaceName}/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()
+                  if (data.success) {
+                    message.success('success')
+                    setIsAddDocumentModalShow(false)
+                    const res = await fetch(
+                      `http://localhost:8000/knowledge/${spaceName}/document/list`,
+                      {
+                        method: 'POST',
+                        headers: {
+                          'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({})
+                      }
+                    )
+                    const data = await res.json()
+                    if (data.success) {
+                      setDocuments(data.data)
+                    }
+                  } else {
+                    message.error(data.err_msg || 'failed')
+                  }
+                }}
+              >
+                Finish
+              </Button>
+            </>
+          )}
+        </Sheet>
+      </Modal>
     </div>
   )
 }
diff --git a/datacenter/app/datastores/page.tsx b/datacenter/app/datastores/page.tsx
index fec9eae40..06f96cdbd 100644
--- a/datacenter/app/datastores/page.tsx
+++ b/datacenter/app/datastores/page.tsx
@@ -75,15 +75,21 @@ const Index = () => {
   }, [])
   return (
     <>
-      <div className="page-header p-4">
-        <div className="page-header-title">Knowledge Spaces</div>
+      <Sheet sx={{
+        display: "flex",
+        justifyContent: "space-between"
+      }} className="p-4">
+        <Sheet sx={{
+          fontSize: '30px',
+          fontWeight: 'bold'
+        }}>Knowledge Spaces</Sheet>
         <Button
           onClick={() => setIsAddKnowledgeSpaceModalShow(true)}
           variant="outlined"
         >
           + New Knowledge Space
         </Button>
-      </div>
+      </Sheet>
       <div className="page-body p-4">
         <Table sx={{ '& thead th:nth-child(1)': { width: '40%' } }}>
           <thead>
@@ -116,7 +122,6 @@ const Index = () => {
         </Table>
       </div>
       <Modal
-        title="Add Knowledge Space"
         sx={{
           display: 'flex',
           justifyContent: 'center',
@@ -288,24 +293,6 @@ const Index = () => {
           )}
         </Sheet>
       </Modal>
-      <style jsx>{`
-        .page-header {
-          display: flex;
-          justify-content: space-between;
-          .page-header-title {
-            font-size: 30px;
-            font-weight: bold;
-          }
-        }
-        .datasource-type-wrap {
-          height: 100px;
-          line-height: 100px;
-          border: 1px solid black;
-          border-radius: 20px;
-          margin-bottom: 20px;
-          cursor: pointer;
-        }
-      `}</style>
     </>
   )
 }