diff --git a/datacenter/app/datastores/documents/page.tsx b/datacenter/app/datastores/documents/page.tsx
index 41b1da7e3..1c1bcf0cc 100644
--- a/datacenter/app/datastores/documents/page.tsx
+++ b/datacenter/app/datastores/documents/page.tsx
@@ -21,6 +21,7 @@ import {
 } from '@/lib/mui'
 import moment from 'moment'
 import { InboxOutlined } from '@ant-design/icons'
+import CheckCircleOutlinedIcon from '@mui/icons-material/CheckCircleOutlined';
 import type { UploadProps } from 'antd'
 import { Upload, Pagination, Popover, message } from 'antd'
 import { fetchBaseURL } from '@/app/datastores/constants'
@@ -37,8 +38,8 @@ const Item = styled(Sheet)(({ theme }) => ({
   color: theme.vars.palette.text.secondary
 }))
 const stepsOfAddingDocument = [
-  '1.Choose a Datasource type',
-  '2.Setup the Datasource'
+  'Choose a Datasource type',
+  'Setup the Datasource'
 ]
 const documentTypeList = [
   {
@@ -352,7 +353,8 @@ const Documents = () => {
                     color: activeStep === index ? '#814DDE' : ''
                   }}
                 >
-                  {item}
+                  {index < activeStep ? <CheckCircleOutlinedIcon /> : `${index + 1}.`}
+                  {`${item}`}
                 </Item>
               ))}
             </Stack>
diff --git a/datacenter/app/datastores/page.tsx b/datacenter/app/datastores/page.tsx
index 37f4f598f..0bd657e21 100644
--- a/datacenter/app/datastores/page.tsx
+++ b/datacenter/app/datastores/page.tsx
@@ -3,6 +3,7 @@
 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 type { UploadProps } from 'antd'
 import { message, Upload, Popover } from 'antd'
 import {
@@ -36,9 +37,9 @@ const Item = styled(Sheet)(({ theme }) => ({
 }))
 
 const stepsOfAddingSpace = [
-  '1.Knowledge Space Config',
-  '2.Choose a Datasource type',
-  '3.Setup the Datasource'
+  'Knowledge Space Config',
+  'Choose a Datasource type',
+  'Setup the Datasource'
 ]
 const documentTypeList = [
   {
@@ -225,7 +226,8 @@ const Index = () => {
                     color: activeStep === index ? '#814DDE' : ''
                   }}
                 >
-                  {item}
+                  {index < activeStep ? <CheckCircleOutlinedIcon /> : `${index + 1}.`}
+                  {`${item}`}
                 </Item>
               ))}
             </Stack>