diff --git a/app/config/locale/en-US.json b/app/config/locale/en-US.json
index 804aceaa..2a2e10d3 100644
--- a/app/config/locale/en-US.json
+++ b/app/config/locale/en-US.json
@@ -413,6 +413,7 @@
   "link": {
     "nGQLHref": "https://docs.nebula-graph.io/3.0.0/3.ngql-guide/1.nGQL-overview/1.overview/",
     "mannualHref": "https://docs.nebula-graph.io/3.0.0/nebula-studio/about-studio/st-ug-what-is-graph-studio/",
-    "startStudioHref": "https://docs.nebula-graph.io/3.0.0/nebula-studio/quick-start/st-ug-plan-schema/"
+    "startStudioHref": "https://docs.nebula-graph.io/3.0.0/nebula-studio/quick-start/st-ug-plan-schema/",
+    "versionLogHref": "https://docs.nebula-graph.io/3.0.0/nebula-studio/about-studio/st-ug-release-note/"
   }
 }
diff --git a/app/config/locale/zh-CN.json b/app/config/locale/zh-CN.json
index c635426c..aef52601 100644
--- a/app/config/locale/zh-CN.json
+++ b/app/config/locale/zh-CN.json
@@ -409,6 +409,7 @@
   "link": {
     "nGQLHref": "https://docs.nebula-graph.com.cn/3.0.0/3.ngql-guide/1.nGQL-overview/1.overview/",
     "mannualHref": "https://docs.nebula-graph.com.cn/3.0.0/nebula-studio/about-studio/st-ug-what-is-graph-studio/",
-    "startStudioHref": "https://docs.nebula-graph.com.cn/3.0.0/nebula-studio/quick-start/st-ug-plan-schema/"
+    "startStudioHref": "https://docs.nebula-graph.com.cn/3.0.0/nebula-studio/quick-start/st-ug-plan-schema/",
+    "versionLogHref": "https://docs.nebula-graph.com.cn/3.0.0/nebula-studio/about-studio/st-ug-release-note/"
   }
 }
\ No newline at end of file
diff --git a/app/config/rules.ts b/app/config/rules.ts
index 06b3f2d1..aa10fabb 100644
--- a/app/config/rules.ts
+++ b/app/config/rules.ts
@@ -1,4 +1,4 @@
-import { NAME_REGEX, POSITIVE_INTEGER_REGEX } from '@app/utils/constant';
+import { POSITIVE_INTEGER_REGEX } from '@app/utils/constant';
 
 export const hostRulesFn = intl => [
   {
@@ -37,10 +37,6 @@ export const nameRulesFn = intl => [
     required: true,
     message: intl.get('formRules.nameRequired'),
   },
-  {
-    pattern: NAME_REGEX,
-    message: intl.get('formRules.nameValidate'),
-  },
 ];
 
 export const numberRulesFn = intl => [
diff --git a/app/config/service.ts b/app/config/service.ts
index d6e6ccb1..efb50873 100644
--- a/app/config/service.ts
+++ b/app/config/service.ts
@@ -24,7 +24,6 @@ const deteleFile = params => {
   return _delete(`/api/files/${filename}`)();
 };
 const getFiles = get('/api/files');
-const getAppInfo = get('/api/app');
 const uploadFiles = (params?, config?) =>
   put('/api/files')(params, {
     ...config,
@@ -46,6 +45,5 @@ export default {
   getTaskDir,
   deteleFile,
   getFiles,
-  getAppInfo,
   uploadFiles,
 };
diff --git a/app/pages/MainPage/routes.tsx b/app/pages/MainPage/routes.tsx
index 69a719ba..c84e70d2 100644
--- a/app/pages/MainPage/routes.tsx
+++ b/app/pages/MainPage/routes.tsx
@@ -26,7 +26,7 @@ export const RoutesList = [
     exact: true,
   },
   {
-    path: '/schema/:space/:type?/:action?/:module?',
+    path: '/schema/:type?/:action?/:module?',
     component: SchemaConfig,
   },
   {
diff --git a/app/pages/Schema/SchemaConfig/Create/CommonCreate/PropertiesForm.tsx b/app/pages/Schema/SchemaConfig/Create/CommonCreate/PropertiesForm.tsx
index f5909942..9d978b33 100644
--- a/app/pages/Schema/SchemaConfig/Create/CommonCreate/PropertiesForm.tsx
+++ b/app/pages/Schema/SchemaConfig/Create/CommonCreate/PropertiesForm.tsx
@@ -9,6 +9,7 @@ import { DATA_TYPE, EXPLAIN_DATA_TYPE } from '@app/utils/constant';
 
 const Option = Select.Option;
 import './index.less';
+import { cloneDeep } from 'lodash';
 
 
 const itemLayout = {
@@ -18,14 +19,16 @@ const itemLayout = {
 };
 
 interface IProps {
-  formRef: FormInstance
+  formRef: FormInstance;
+  onUpdate: () => void;
 }
 
 const PropertiesForm = (props: IProps) => {
-  const { formRef } = props;
+  const { formRef, onUpdate } = props;
   const handleClearProperties = e => {
     if(!e.target.checked) {
       formRef.resetFields(['properties', []]);
+      setTimeout(onUpdate, 300);
     }
   };
   const handlePropertyAdd = callback => {
@@ -60,6 +63,13 @@ const PropertiesForm = (props: IProps) => {
     }
     callback(rowIndex);
   };
+
+  const handleResetValue = (index) => {
+    const properties = formRef.getFieldValue('properties');
+    const _properties = [...properties];
+    _properties[index].value = '';
+    formRef.setFieldsValue({ 'properties': _properties });
+  };
   return (
     <Form.Item noStyle={true}>
       <div className="form-item">
@@ -121,7 +131,7 @@ const PropertiesForm = (props: IProps) => {
                                       message: intl.get('formRules.dataTypeRequired'),
                                     },
                                   ]}>
-                                  <Select className="select-type" showSearch={true} dropdownMatchSelectWidth={false}>
+                                  <Select className="select-type" showSearch={true} onChange={() => handleResetValue(index)} dropdownMatchSelectWidth={false}>
                                     {DATA_TYPE.map(item => {
                                       return (
                                         <Option value={item.value} key={item.value}>
diff --git a/app/pages/Schema/SchemaConfig/Create/CommonCreate/TTLForm.tsx b/app/pages/Schema/SchemaConfig/Create/CommonCreate/TTLForm.tsx
index 784cc215..fb944ca3 100644
--- a/app/pages/Schema/SchemaConfig/Create/CommonCreate/TTLForm.tsx
+++ b/app/pages/Schema/SchemaConfig/Create/CommonCreate/TTLForm.tsx
@@ -17,15 +17,17 @@ const innerItemLayout = {
 };
 
 interface IProps {
-  formRef: FormInstance
+  formRef: FormInstance;
+  onUpdate: () => void;
 }
 
 const formRef = ((props: IProps) => {
-  const { formRef } = props;
+  const { formRef, onUpdate } = props;
   const handleClearTtl = e => {
     if(!e.target.checked) {
       formRef.resetFields(['ttl_col', '']);
       formRef.resetFields(['ttl_duration', '']);
+      setTimeout(onUpdate, 300);
     }
   };
   return (
diff --git a/app/pages/Schema/SchemaConfig/Create/CommonCreate/index.tsx b/app/pages/Schema/SchemaConfig/Create/CommonCreate/index.tsx
index a20fe109..5efa77f7 100644
--- a/app/pages/Schema/SchemaConfig/Create/CommonCreate/index.tsx
+++ b/app/pages/Schema/SchemaConfig/Create/CommonCreate/index.tsx
@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import intl from 'react-intl-universal';
 import { observer } from 'mobx-react-lite';
 import { nameRulesFn } from '@app/config/rules';
-import { useHistory, useParams } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import { uniqBy } from 'lodash';
 import GQLCodeMirror from '@app/components/GQLCodeMirror';
 import { getTagOrEdgeCreateGQL } from '@app/utils/gql';
@@ -28,7 +28,6 @@ interface IProps {
 const ConfigCreate = (props: IProps) => {
   const { createType } = props;
   const history = useHistory();
-  const { space } = useParams() as {space :string };
   const [loading, setLoading] = useState(false);
   const { schema: { createTagOrEdge } } = useStore();
   const [gql, setGql] = useState('');
@@ -62,7 +61,10 @@ const ConfigCreate = (props: IProps) => {
     setLoading(false);
     if (res.code === 0) {
       message.success(intl.get('schema.createSuccess'));
-      history.push(`/schema/${space}/${createType}/edit/${name}`);
+      history.push({
+        pathname: `/schema/${createType}/edit`,
+        state: { [createType]: name },
+      });
     }
   };
   return (
@@ -86,14 +88,14 @@ const ConfigCreate = (props: IProps) => {
             </Form.Item>
           </Col>
         </Row>
-        <PropertiesForm formRef={basicForm} />
-        <TTLForm formRef={basicForm} />
+        <PropertiesForm formRef={basicForm} onUpdate={updateGql} />
+        <TTLForm formRef={basicForm} onUpdate={updateGql} />
         <Form.Item noStyle={true}>
           <GQLCodeMirror currentGQL={gql} />
         </Form.Item>
         <Form.Item noStyle={true}>
           <div className="studio-form-footer">
-            <Button onClick={() => history.push(`/schema/${space}/${createType}/list`)}>{intl.get('common.cancel')}</Button>
+            <Button onClick={() => history.push(`/schema/${createType}/list`)}>{intl.get('common.cancel')}</Button>
             <Button type="primary" loading={loading} htmlType="submit">{intl.get('common.create')}</Button>
           </div>
         </Form.Item>
diff --git a/app/pages/Schema/SchemaConfig/Create/IndexCreate/FieldSelectModal.tsx b/app/pages/Schema/SchemaConfig/Create/IndexCreate/FieldSelectModal.tsx
index 5d69574b..f2463bed 100644
--- a/app/pages/Schema/SchemaConfig/Create/IndexCreate/FieldSelectModal.tsx
+++ b/app/pages/Schema/SchemaConfig/Create/IndexCreate/FieldSelectModal.tsx
@@ -4,6 +4,7 @@ import intl from 'react-intl-universal';
 import { observer } from 'mobx-react-lite';
 import { IField } from '@app/interfaces/schema';
 import { POSITIVE_INTEGER_REGEX } from '@app/utils/constant';
+import { handleKeyword } from '@app/utils/function';
 import Instruction from '@app/components/Instruction';
 const Option = Select.Option;
 
@@ -29,8 +30,8 @@ const FieldSelectModal = (props: IProps) => {
     }
     const newField =
       selectedField?.Type === 'string'
-        ? selectedField.Field + `(${indexLength})`
-        : selectedField!.Field;
+        ? handleKeyword(selectedField.Field) + `(${indexLength})`
+        : handleKeyword(selectedField!.Field);
     onAddField(newField);
     handleClose();
   };
diff --git a/app/pages/Schema/SchemaConfig/Create/IndexCreate/index.tsx b/app/pages/Schema/SchemaConfig/Create/IndexCreate/index.tsx
index 93767a37..485a15d0 100644
--- a/app/pages/Schema/SchemaConfig/Create/IndexCreate/index.tsx
+++ b/app/pages/Schema/SchemaConfig/Create/IndexCreate/index.tsx
@@ -3,14 +3,14 @@ import React, { useEffect, useState } from 'react';
 import intl from 'react-intl-universal';
 import { observer } from 'mobx-react-lite';
 import { nameRulesFn } from '@app/config/rules';
-import { useHistory, useParams } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import GQLCodeMirror from '@app/components/GQLCodeMirror';
 import { getIndexCreateGQL } from '@app/utils/gql';
 import { useStore } from '@app/stores';
 import { IField, IndexType } from '@app/interfaces/schema';
 import Icon from '@app/components/Icon';
 import { trackPageView } from '@app/utils/stat';
-
+import { handleKeyword } from '@app/utils/function';
 import FieldSelectModal from './FieldSelectModal';
 import DraggableTags from './DraggableTags';
 const Option = Select.Option;
@@ -29,7 +29,6 @@ const formItemLayout = {
 
 const IndexCreate = () => {
   const history = useHistory();
-  const { space } = useParams() as {space :string };
   const [loading, setLoading] = useState(false);
   const { schema: { createIndex, getTags, getEdges, getTagOrEdgeInfo } } = useStore();
   const [gql, setGql] = useState('');
@@ -61,7 +60,7 @@ const IndexCreate = () => {
     setLoading(false);
     if (res.code === 0) {
       message.success(intl.get('schema.createSuccess'));
-      history.push(`/schema/${space}/index/list/${type}`);
+      history.push(`/schema/index/list/${type}`);
     }
   };
 
@@ -195,7 +194,7 @@ const IndexCreate = () => {
             {({ getFieldValue }) => {
               const fields = getFieldValue('fields') || [];
               const filterList = fieldList.filter(
-                item => !fields.some(field => field.startsWith(item.Field)),
+                item => !fields.some(field => field.startsWith(handleKeyword(item.Field))),
               );
               return <>
                 <DraggableTags
@@ -220,7 +219,7 @@ const IndexCreate = () => {
         </Form.Item>
         <Form.Item noStyle={true}>
           <div className="studio-form-footer">
-            <Button onClick={() => history.push(`/schema/${space}/index/list`)}>{intl.get('common.cancel')}</Button>
+            <Button onClick={() => history.push(`/schema/index/list`)}>{intl.get('common.cancel')}</Button>
             <Button type="primary" loading={loading} htmlType="submit">{intl.get('common.create')}</Button>
           </div>
         </Form.Item>
diff --git a/app/pages/Schema/SchemaConfig/Edit/CommonEdit/PropertiesForm.tsx b/app/pages/Schema/SchemaConfig/Edit/CommonEdit/PropertiesForm.tsx
index 7526f746..6ab662c6 100644
--- a/app/pages/Schema/SchemaConfig/Edit/CommonEdit/PropertiesForm.tsx
+++ b/app/pages/Schema/SchemaConfig/Edit/CommonEdit/PropertiesForm.tsx
@@ -140,6 +140,10 @@ const PropertiesForm = (props: IProps) => {
       },
     });
   };
+
+  const handleResetValue = () => {
+    form.setFieldsValue({ value: '' });
+  };
   return (
     <Form 
       form={form} 
@@ -174,7 +178,7 @@ const PropertiesForm = (props: IProps) => {
           </Form.Item>
           {list.map((item, index) => {
             return editRow === index 
-              ? <EditRow key={index} data={editField} onEditCancel={handleEditCancel} /> 
+              ? <EditRow key={index} data={editField} onUpdateType={handleResetValue} onEditCancel={handleEditCancel} /> 
               : <DisplayRow
                 key={index}
                 data={item}
diff --git a/app/pages/Schema/SchemaConfig/Edit/CommonEdit/PropertiesRow.tsx b/app/pages/Schema/SchemaConfig/Edit/CommonEdit/PropertiesRow.tsx
index d080b265..a4ccedbd 100644
--- a/app/pages/Schema/SchemaConfig/Edit/CommonEdit/PropertiesRow.tsx
+++ b/app/pages/Schema/SchemaConfig/Edit/CommonEdit/PropertiesRow.tsx
@@ -21,6 +21,7 @@ interface IProps {
 interface IEditProps {
   data: IEditProperty | null;
   onEditCancel: () => void;
+  onUpdateType: () => void;
 }
 
 export const DisplayRow = (props: IProps) => {
@@ -69,7 +70,7 @@ export const DisplayRow = (props: IProps) => {
 };
 
 export const EditRow = (props: IEditProps) => {
-  const { data, onEditCancel } = props;
+  const { data, onEditCancel, onUpdateType } = props;
   if(!data) {
     return null;
   }
@@ -99,7 +100,7 @@ export const EditRow = (props: IEditProps) => {
                     message: intl.get('formRules.dataTypeRequired'),
                   },
                 ]}>
-                <Select className="select-type" showSearch={true} dropdownMatchSelectWidth={false}>
+                <Select className="select-type" showSearch={true} onChange={onUpdateType} dropdownMatchSelectWidth={false}>
                   {DATA_TYPE.map(item => {
                     return (
                       <Option value={item.value} key={item.value}>
diff --git a/app/pages/Schema/SchemaConfig/Edit/CommonEdit/index.tsx b/app/pages/Schema/SchemaConfig/Edit/CommonEdit/index.tsx
index 67dc20ce..4fd7c0d0 100644
--- a/app/pages/Schema/SchemaConfig/Edit/CommonEdit/index.tsx
+++ b/app/pages/Schema/SchemaConfig/Edit/CommonEdit/index.tsx
@@ -1,8 +1,8 @@
-import { Button, Col, Form, Input, Row, message } from 'antd';
+import { Button, Col, Form, Input, Row, Spin, message } from 'antd';
 import React, { useEffect, useState } from 'react';
 import intl from 'react-intl-universal';
 import { observer } from 'mobx-react-lite';
-import { useParams } from 'react-router-dom';
+import { useHistory, useLocation } from 'react-router-dom';
 import PropertiesForm from './PropertiesForm';
 import TTLForm from './TTLForm';
 import './index.less';
@@ -42,10 +42,13 @@ interface IProps {
 }
 const ConfigEdit = (props: IProps) => {
   const { editType } = props;
-  const { name: editName } = useParams() as {name: string };
+  const { state } = useLocation();
+  const history = useHistory();
+  const [editName, setEditName] = useState('');
   const [editKey, setEditKey] = useState<string | null>(null);
   const { schema: { getTagOrEdgeDetail, getTagOrEdgeInfo, alterField, getIndexTree } } = useStore();
   const [tempComment, setTempComment] = useState('');
+  const [loading, setLoading] = useState(false);
   const [data, setData] = useState<IData>({
     name: '',
     comment: '',
@@ -62,21 +65,28 @@ const ConfigEdit = (props: IProps) => {
     getDetails();
   }, []);
   const getDetails = async() => {
-    const { code, data } = await getTagOrEdgeDetail(editType, editName);
+    const _editName = state[editType];
+    if(!_editName) {
+      history.push(`/schema/${editType}/list`);
+    }
+    setEditName(_editName);
+    setLoading(true);
+    const { code, data } = await getTagOrEdgeDetail(editType, _editName);
     const { code: propCode, data: propData } = await getTagOrEdgeInfo(
       editType,
-      editName,
+      _editName,
     );
+    setLoading(false);
     if (code === 0) {
       const key = editType === 'tag' ? 'Create Tag' : 'Create Edge';
       const info = data.tables[0][key];
       const fieldInfo = propCode === 0 ? propData.tables : [];
-      handleData(info, fieldInfo);
+      handleData(_editName, info, fieldInfo);
     }
   };
 
-  const handleData = (data: string, fieldInfo: IPropertyItem[]) => {
-    const reg = /CREATE (?:TAG|EDGE)\s`\w+`\s\((.*)\)\s+(ttl_duration = \d+),\s+(ttl_col = "\w*")(, comment = ".*")?/gm;
+  const handleData = (name: string, data: string, fieldInfo: IPropertyItem[]) => {
+    const reg = /CREATE (?:TAG|EDGE)\s`.+`\s\((.*)\)\s+(ttl_duration = \d+),\s+(ttl_col = ".*?")(, comment = ".*")?/gm;
     const str = data.replace(/[\r\n]/g, ' ');
     const infoList = reg.exec(str) || [];
     const properties: IProperty[] = fieldInfo.map(i => ({
@@ -98,7 +108,7 @@ const ConfigEdit = (props: IProps) => {
     setPropertiesRequired(propertiesRequired);
     setTtlRequired(ttlRequired);
     setData({
-      name: editName,
+      name,
       comment,
       properties,
       ttlConfig: {
@@ -114,7 +124,9 @@ const ConfigEdit = (props: IProps) => {
   };
 
   const handleAlter = async(config: IAlterForm) => {
+    setLoading(true);
     const res = await alterField(config);
+    setLoading(false);
     if (res.code === 0) {
       message.success(intl.get('common.updateSuccess'));
       await getDetails();
@@ -122,7 +134,8 @@ const ConfigEdit = (props: IProps) => {
     }
   };
   const handleCommentUpdate = async() => {
-    handleAlter({
+    setLoading(true);
+    await handleAlter({
       type: editType,
       name: editName,
       action: 'COMMENT',
@@ -130,82 +143,87 @@ const ConfigEdit = (props: IProps) => {
         comment: tempComment,
       },
     });
+    setLoading(false);
   };
 
   const checkIndex = async() => {
+    setLoading(true);
     const res = (await getIndexTree(editType)) || [];
+    setLoading(false);
     const hasIndex = res.some(i => i.name === editName);
     return hasIndex;
   };
   return (
     <div className="config-edit-group">
-      <Form
-        className="basic-config" 
-        layout="vertical" 
-        {...formItemLayout}>
-        <Form.Item noStyle={true} shouldUpdate={true}>
-          <Row className="form-item">
-            <Col span={12}>
-              <Form.Item label={intl.get('common.name')}>
-                {editName}
-              </Form.Item>
-            </Col>
-            <Col span={12}>
-              <Form.Item label={intl.get('common.comment')}>
-                {editKey !== 'comment' ? (
-                  <>
-                    <span>{data.comment}</span>
-                    <Button
-                      disabled={editKey !== null}
-                      type="link"
-                      onClick={handleCommentEditStart}
-                    >
-                      {intl.get('common.edit')}
-                    </Button>
-                  </>
-                ) : (
-                  <>
-                    <Input
-                      className="input-comment"
-                      defaultValue={data.comment}
-                      onChange={e => setTempComment(e.target.value)}
-                    />
-                    <Button
-                      type="link"
-                      onClick={handleCommentUpdate}
-                    >
-                      {intl.get('common.ok')}
-                    </Button>
-                    <Button
-                      type="link"
-                      onClick={() => setEditKey(null)}
-                    >
-                      {intl.get('common.cancel')}
-                    </Button>
-                  </>
-                )}
-                
-              </Form.Item>
-            </Col>
-          </Row>
-        </Form.Item>
-      </Form>
-      <PropertiesForm
-        editType={editType}
-        editDisabled={editKey !== null}
-        onBeforeEdit={(index) => setEditKey(index !== null ? `properties[${index}]` : null)}
-        initialRequired={propertiesRequired}
-        onEdit={handleAlter} 
-        data={data} />
-      <TTLForm 
-        editType={editType}
-        editDisabled={editKey !== null}
-        initialRequired={ttlRequired} 
-        data={data}
-        onEdit={handleAlter}
-        checkIndex={checkIndex} 
-        onBeforeEdit={(type?: null) => setEditKey(type === null ? null : 'ttl')}
-      />
+      <Spin delay={400} spinning={loading}>
+        <Form
+          className="basic-config" 
+          layout="vertical" 
+          {...formItemLayout}>
+          <Form.Item noStyle={true} shouldUpdate={true}>
+            <Row className="form-item">
+              <Col span={12}>
+                <Form.Item label={intl.get('common.name')}>
+                  {editName}
+                </Form.Item>
+              </Col>
+              <Col span={12}>
+                <Form.Item label={intl.get('common.comment')}>
+                  {editKey !== 'comment' ? (
+                    <>
+                      <span>{data.comment}</span>
+                      <Button
+                        disabled={editKey !== null}
+                        type="link"
+                        onClick={handleCommentEditStart}
+                      >
+                        {intl.get('common.edit')}
+                      </Button>
+                    </>
+                  ) : (
+                    <>
+                      <Input
+                        className="input-comment"
+                        defaultValue={data.comment}
+                        onChange={e => setTempComment(e.target.value)}
+                      />
+                      <Button
+                        type="link"
+                        onClick={handleCommentUpdate}
+                      >
+                        {intl.get('common.ok')}
+                      </Button>
+                      <Button
+                        type="link"
+                        onClick={() => setEditKey(null)}
+                      >
+                        {intl.get('common.cancel')}
+                      </Button>
+                    </>
+                  )}
+                  
+                </Form.Item>
+              </Col>
+            </Row>
+          </Form.Item>
+        </Form>
+        <PropertiesForm
+          editType={editType}
+          editDisabled={editKey !== null}
+          onBeforeEdit={(index) => setEditKey(index !== null ? `properties[${index}]` : null)}
+          initialRequired={propertiesRequired}
+          onEdit={handleAlter} 
+          data={data} />
+        <TTLForm 
+          editType={editType}
+          editDisabled={editKey !== null}
+          initialRequired={ttlRequired} 
+          data={data}
+          onEdit={handleAlter}
+          checkIndex={checkIndex} 
+          onBeforeEdit={(type?: null) => setEditKey(type === null ? null : 'ttl')}
+        />
+      </Spin>
     </div>
   );
 };
diff --git a/app/pages/Schema/SchemaConfig/List/CommonLayout/index.tsx b/app/pages/Schema/SchemaConfig/List/CommonLayout/index.tsx
index 26db9009..4b279915 100644
--- a/app/pages/Schema/SchemaConfig/List/CommonLayout/index.tsx
+++ b/app/pages/Schema/SchemaConfig/List/CommonLayout/index.tsx
@@ -1,7 +1,7 @@
 import { Button, Table } from 'antd';
 import React, { useState } from 'react';
 import intl from 'react-intl-universal';
-import { Link, useParams } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { observer } from 'mobx-react-lite';
 import Search from '../Search';
 import Icon from '@app/components/Icon';
@@ -18,7 +18,6 @@ interface IProps {
 }
 const CommonLayout = (props: IProps) => {
   const { onSearch, data, columns, loading, renderExpandInfo, children, type } = props;
-  const { space } = useParams() as { space :string, module?: string };
   const [expandKeys, setExpandKeys] = useState<any[]>([]);
   const handleRowClick = row => {
     const { name: key } = row;
@@ -30,7 +29,7 @@ const CommonLayout = (props: IProps) => {
       <div className="header">
         <Button type="primary" className="studio-add-btn">
           <Link
-            to={`/schema/${space}/${type}/create`}
+            to={`/schema/${type}/create`}
             data-track-category="navigation"
             data-track-action={`view_${type}_create`}
             data-track-label={`from_${type}_list`}
diff --git a/app/pages/Schema/SchemaConfig/List/Edge/index.tsx b/app/pages/Schema/SchemaConfig/List/Edge/index.tsx
index 0de06296..e0b58eeb 100644
--- a/app/pages/Schema/SchemaConfig/List/Edge/index.tsx
+++ b/app/pages/Schema/SchemaConfig/List/Edge/index.tsx
@@ -1,7 +1,7 @@
 import { Button, Popconfirm, Table, message } from 'antd';
 import React, { useEffect, useMemo, useState } from 'react';
 import intl from 'react-intl-universal';
-import { Link, useParams } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import Icon from '@app/components/Icon';
 import { observer } from 'mobx-react-lite';
 import { useStore } from '@app/stores';
@@ -45,8 +45,7 @@ function renderEdgeInfo(edge: IEdge) {
 }
 
 const EdgeList = () => {
-  const { space } = useParams() as { space :string };
-  const { schema: { edgeList, deleteEdge, getEdgeList } } = useStore();
+  const { schema: { edgeList, deleteEdge, getEdgeList, currentSpace } } = useStore();
   const [searchVal, setSearchVal] = useState('');
   const [loading, setLoading] = useState(false);
   const [data, setData] = useState<any[]>([]);
@@ -84,7 +83,10 @@ const EdgeList = () => {
             <div className="operation">
               <Button className="primary-btn">
                 <Link
-                  to={`/schema/${space}/edge/edit/${edge.name}`}
+                  to={{
+                    pathname: '/schema/edge/edit',
+                    state: { edge: edge.name },
+                  }}
                   data-track-category="navigation"
                   data-track-action="view_edge_edit"
                   data-track-label="from_edge_list"
@@ -112,7 +114,7 @@ const EdgeList = () => {
   ], [edgeList, Cookie.get('lang')]);
   useEffect(() => {
     getData();
-  }, [space]);
+  }, [currentSpace]);
   useEffect(() => {
     setData(sortByFieldAndFilter({
       field: 'name',
diff --git a/app/pages/Schema/SchemaConfig/List/Index/index.tsx b/app/pages/Schema/SchemaConfig/List/Index/index.tsx
index 18e8c349..cbf8110e 100644
--- a/app/pages/Schema/SchemaConfig/List/Index/index.tsx
+++ b/app/pages/Schema/SchemaConfig/List/Index/index.tsx
@@ -39,8 +39,8 @@ function renderIndexInfo(index: IIndexList) {
 }
 
 const IndexList = () => {
-  const { space, module } = useParams() as {space :string, module: string};
-  const { schema: { indexList, deleteIndex, getIndexList, rebuildIndex, getRebuildIndexes } } = useStore();
+  const { module } = useParams() as { module: string };
+  const { schema: { indexList, deleteIndex, getIndexList, rebuildIndex, getRebuildIndexes, currentSpace } } = useStore();
   const [searchVal, setSearchVal] = useState('');
   const [loading, setLoading] = useState(false);
   const [data, setData] = useState<any[]>([]);
@@ -142,7 +142,7 @@ const IndexList = () => {
     rebuildTimer.current && clearTimeout(rebuildTimer.current);
     setIndexType(e.target.value);
     setRebuildList([]);
-    history.replace(`/schema/${space}/index/list/${e.target.value}`);
+    history.replace(`/schema/index/list/${e.target.value}`);
   };
   useEffect(() => {
     rebuildTimer.current && clearTimeout(rebuildTimer.current);
@@ -151,7 +151,7 @@ const IndexList = () => {
     return () => {
       rebuildTimer.current && clearTimeout(rebuildTimer.current);
     };
-  }, [module, space]);
+  }, [module, currentSpace]);
   useEffect(() => {
     setData(sortByFieldAndFilter({
       field: 'name',
diff --git a/app/pages/Schema/SchemaConfig/List/SpaceStats/index.tsx b/app/pages/Schema/SchemaConfig/List/SpaceStats/index.tsx
index 013d3580..f2c7b4ae 100644
--- a/app/pages/Schema/SchemaConfig/List/SpaceStats/index.tsx
+++ b/app/pages/Schema/SchemaConfig/List/SpaceStats/index.tsx
@@ -2,7 +2,6 @@ import { Button, Table, message } from 'antd';
 import dayjs from 'dayjs';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import intl from 'react-intl-universal';
-import { useParams } from 'react-router-dom';
 import { observer } from 'mobx-react-lite';
 import { useStore } from '@app/stores';
 import { IJobStatus } from '@app/interfaces/schema';
@@ -13,8 +12,7 @@ import './index.less';
 
 const SpaceStats = () => {
   const timer = useRef<NodeJS.Timeout | null>(null);
-  const { schema: { getJobStatus, submitStats, getStats } } = useStore();
-  const { space } = useParams() as { space :string };
+  const { schema: { getJobStatus, submitStats, getStats, currentSpace } } = useStore();
   const [data, setData] = useState([]);
   const [updateTime, setUpdateTime] = useState('');
   const [jobId, setJobId] = useState<any>(null);
@@ -40,7 +38,7 @@ const SpaceStats = () => {
     return () => {
       timer.current && clearTimeout(timer.current);
     };
-  }, [space]);
+  }, [currentSpace]);
 
   const initData = () => {
     setJobId(null);
diff --git a/app/pages/Schema/SchemaConfig/List/Tag/index.tsx b/app/pages/Schema/SchemaConfig/List/Tag/index.tsx
index 613f5d59..34edfd23 100644
--- a/app/pages/Schema/SchemaConfig/List/Tag/index.tsx
+++ b/app/pages/Schema/SchemaConfig/List/Tag/index.tsx
@@ -1,7 +1,7 @@
 import { Button, Popconfirm, Table, message } from 'antd';
 import React, { useEffect, useMemo, useState } from 'react';
 import intl from 'react-intl-universal';
-import { Link, useParams } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import Icon from '@app/components/Icon';
 import { observer } from 'mobx-react-lite';
 import { useStore } from '@app/stores';
@@ -45,8 +45,7 @@ function renderTagInfo(tag: ITag) {
 }
 
 const TagList = () => {
-  const { space } = useParams() as {space :string};
-  const { schema: { tagList, deleteTag, getTagList } } = useStore();
+  const { schema: { tagList, deleteTag, getTagList, currentSpace } } = useStore();
   const [searchVal, setSearchVal] = useState('');
   const [loading, setLoading] = useState(false);
   const [data, setData] = useState<any[]>([]);
@@ -87,7 +86,10 @@ const TagList = () => {
           <div className="operation">
             <Button className="primary-btn">
               <Link
-                to={`/schema/${space}/tag/edit/${tag.name}`}
+                to={{
+                  pathname: '/schema/tag/edit',
+                  state: { tag: tag.name },
+                }}
                 data-track-category="navigation"
                 data-track-action="view_tag_edit"
                 data-track-label="from_tag_list"
@@ -115,7 +117,7 @@ const TagList = () => {
 
   useEffect(() => {
     getData();
-  }, [space]);
+  }, [currentSpace]);
   useEffect(() => {
     setData(sortByFieldAndFilter({
       field: 'name',
diff --git a/app/pages/Schema/SchemaConfig/index.tsx b/app/pages/Schema/SchemaConfig/index.tsx
index ce96bc93..4164edca 100644
--- a/app/pages/Schema/SchemaConfig/index.tsx
+++ b/app/pages/Schema/SchemaConfig/index.tsx
@@ -20,9 +20,9 @@ const Option = Select.Option;
 const SchemaConfig = () => {
   const history = useHistory();
   const [tab, setTab] = useState('tag');
-  const { space, type, action } = useParams() as {space :string, type: string, action: string };
+  const { type, action } = useParams() as { type: string, action: string };
   const { schema } = useStore();
-  const { spaces, getSpaces, switchSpace } = schema;
+  const { spaces, getSpaces, switchSpace, currentSpace } = schema;
   const routes = useMemo(() => {
     if(action === 'list') {
       return [
@@ -32,7 +32,7 @@ const SchemaConfig = () => {
         },
         {
           path: '#',
-          breadcrumbName: space,
+          breadcrumbName: currentSpace,
         },
       ];
     } else {
@@ -42,8 +42,8 @@ const SchemaConfig = () => {
           breadcrumbName: intl.get('schema.spaceList'),
         },
         {
-          path: `/schema/${space}/${type}/list`,
-          breadcrumbName: intl.get('schema.configTypeList', { space, type: intl.get(`common.${type}`) }),
+          path: `/schema/${type}/list`,
+          breadcrumbName: intl.get('schema.configTypeList', { space: currentSpace, type: intl.get(`common.${type}`) }),
         },
         {
           path: '#',
@@ -53,7 +53,7 @@ const SchemaConfig = () => {
         },
       ];
     }
-  }, [space, action, Cookie.get('lang')]);
+  }, [currentSpace, action, Cookie.get('lang')]);
   useEffect(() => {
     setTab(type);
     if(spaces.length === 0) {
@@ -61,28 +61,28 @@ const SchemaConfig = () => {
     }
   }, []);
   useEffect(() => {
-    trackPageView(space ? `/schema/config/${type}/list` : `/schema`);
-  }, [space, type]);
+    trackPageView(currentSpace ? `/schema/config/${type}/list` : `/schema`);
+  }, [currentSpace, type]);
 
   const handleUpdateSpace = (value: string) => {
     switchSpace(value);
-    history.push(`/schema/${value}/${type}/list`);
+    history.push(`/schema/${type}/list`);
   };
   const handleTabChange = e => {
     setTab(e.target.value);
-    history.push(`/schema/${space}/${e.target.value}/list`);
+    history.push(`/schema/${e.target.value}/list`);
   };
   return (
     <div className="nebula-schema-page">
       <Breadcrumb routes={routes} extraNode={<div className="space-select">
         <span className="label">{intl.get('common.currentSpace')}</span>
-        {action !== 'edit' ? <Select value={space} onChange={value => handleUpdateSpace(value)}>
+        {action !== 'edit' ? <Select value={currentSpace} onChange={value => handleUpdateSpace(value)}>
           {spaces.map(space => (
             <Option value={space} key={space}>
               {space}
             </Option>
           ))}
-        </Select> : <span>{space}</span>}
+        </Select> : <span>{currentSpace}</span>}
       </div>} />
       <div className="list-container center-layout">
         {action === 'list' && <div className="studio-tab-header">
@@ -100,48 +100,48 @@ const SchemaConfig = () => {
         </div>}
         <>
           <Route
-            path={`/schema/:space/tag/list`}
+            path={`/schema/tag/list`}
             exact={true}
             component={TagList}
           />
           <Route
-            path="/schema/:space/edge/list"
+            path="/schema/edge/list"
             exact={true}
             component={EdgeList}
           />
           <Route
-            path="/schema/:space/index/list/:module?"
+            path="/schema/index/list/:module?"
             exact={true}
             component={IndexList}
           />
           <Route
-            path="/schema/:space/statistic/list"
+            path="/schema/statistic/list"
             exact={true}
             component={SpaceStats}
           />
           <Route
-            path={`/schema/:space/tag/create`}
+            path={`/schema/tag/create`}
             exact={true}
             render={() => <CommonCreate createType="tag" />}
           />
           <Route
-            path={`/schema/:space/edge/create`}
+            path={`/schema/edge/create`}
             exact={true}
             render={() => <CommonCreate createType="edge" />}
           />
           <Route
-            path={`/schema/:space/tag/edit/:name?`}
+            path={`/schema/tag/edit`}
             exact={true}
             render={() => <CommonEdit editType="tag" />}
           />
           <Route
-            path={`/schema/:space/edge/edit/:name?`}
+            path={`/schema/edge/edit`}
             exact={true}
             render={() => <CommonEdit editType="edge" />}
           />
           
           <Route
-            path={`/schema/:space/index/create`}
+            path={`/schema/index/create`}
             exact={true}
             component={IndexCreate}
           />
diff --git a/app/pages/Schema/index.tsx b/app/pages/Schema/index.tsx
index 1bd59a35..39ea4181 100644
--- a/app/pages/Schema/index.tsx
+++ b/app/pages/Schema/index.tsx
@@ -35,7 +35,7 @@ const Schema = () => {
   const handleSwitchSpace = async(space: string) => {
     const err = await switchSpace(space);
     if (!err) {
-      history.push(`/schema/${space}/tag/list`);
+      history.push(`/schema/tag/list`);
     } else if (err && err.toLowerCase().includes('spacenotfound')) {
       message.warning(intl.get('schema.useSpaceErrTip'));
     }
diff --git a/app/stores/global.ts b/app/stores/global.ts
index bb8b565a..1d526a71 100644
--- a/app/stores/global.ts
+++ b/app/stores/global.ts
@@ -1,6 +1,7 @@
 import { action, makeObservable, observable } from 'mobx';
 import cookies from 'js-cookie';
 import { message } from 'antd';
+import { Base64 } from 'js-base64';
 import intl from 'react-intl-universal';
 import service from '@app/config/service';
 import { BrowserHistory } from 'history';
@@ -59,14 +60,15 @@ export class GlobalStore {
       {
         address,
         port: +port,
-        username,
-        password,
       },
       {
         trackEventConfig: {
           category: 'user',
           action: 'sign_in',
         },
+        headers: {
+          Authorization: `Bearer ${Base64.encode(`${username}:${password}`)}`,
+        },
       },
     )) as any;
     if (code === 0) {
diff --git a/app/stores/schema.ts b/app/stores/schema.ts
index 22bed531..93b9138d 100644
--- a/app/stores/schema.ts
+++ b/app/stores/schema.ts
@@ -67,7 +67,7 @@ export class SchemaStore {
   switchSpace = async(space: string) => {
     const { code, message } = (await service.execNGQL({
       // HACK: Processing keyword
-      gql: 'use' + '`' + space + '`;',
+      gql: `use ${handleKeyword(space)};`,
     })) as any;
 
     if (code === 0) {
@@ -374,7 +374,7 @@ export class SchemaStore {
   }
 
   getTagOrEdgeInfo = async(type: ISchemaType, name: string) => {
-    const gql = `desc ${type} ` + '`' + name + '`;';
+    const gql = `desc ${type}  ${handleKeyword(name)}`;
     const { code, data } = (await service.execNGQL({
       gql,
     })) as any;
diff --git a/app/utils/constant.ts b/app/utils/constant.ts
index 0c65e14d..3680e711 100644
--- a/app/utils/constant.ts
+++ b/app/utils/constant.ts
@@ -209,5 +209,4 @@ export const EXPLAIN_DATA_TYPE = [
   'duration',
 ];
 
-export const NAME_REGEX = /^[a-zA-Z][a-zA-Z0-9_]*$/;
 export const POSITIVE_INTEGER_REGEX = /^[1-9]\d*$/g;
diff --git a/app/utils/fetch.ts b/app/utils/fetch.ts
index b6b2b54b..f2263e23 100644
--- a/app/utils/fetch.ts
+++ b/app/utils/fetch.ts
@@ -1,6 +1,6 @@
-import service from '#app/config/service';
-import { handleVidStringName } from '#app/utils/function';
-import { getExploreGQLWithIndex } from '#app/utils/gql';
+import service from '@app/config/service';
+import { handleKeyword, handleVidStringName } from '@app/utils/function';
+import { getExploreGQLWithIndex } from '@app/utils/gql';
 
 interface IMatchVertex {
   vid?: string;
@@ -14,7 +14,7 @@ export async function fetchEdgeProps(payload: {
   edgeFields?: any;
 }) {
   const { idRoutes, edgeFields, type } = payload;
-  const edgeType = '`' + type + '`';
+  const edgeType = handleKeyword(type);
   let gql = `fetch prop on ${edgeType} ${idRoutes.join(', ')}`;
   if (edgeFields) {
     gql += ` yield ${edgeType}._src, ${edgeType}._dst `;
diff --git a/app/utils/function.ts b/app/utils/function.ts
index 45f0d848..f96646b0 100644
--- a/app/utils/function.ts
+++ b/app/utils/function.ts
@@ -1,12 +1,13 @@
 import { BigNumber } from 'bignumber.js';
 import _ from 'lodash';
 
-import { keyWords } from '@app/config/nebulaQL';
-
 export const handleKeyword = (name: string) => {
-  return keyWords.includes(name.toLowerCase()) ? `\`${name}\`` : name;
+  return `\`${handleEscape(name)}\``;
 };
 
+export const handleEscape = (name: string) =>
+  name.replaceAll(/\\/gm, '\\\\').replaceAll('`', '\\`');
+
 export const handleVidStringName = (name: string, spaceVidType?: string) => {
   if (spaceVidType && spaceVidType === 'INT64') {
     return convertBigNumberToString(name);
diff --git a/app/utils/gql.ts b/app/utils/gql.ts
index 8b93021e..e2b8dc44 100644
--- a/app/utils/gql.ts
+++ b/app/utils/gql.ts
@@ -1,4 +1,4 @@
-import { handleKeyword, handleVidStringName } from '@app/utils/function';
+import { handleEscape, handleKeyword, handleVidStringName } from '@app/utils/function';
 import { IAlterForm, IProperty, ISchemaType, IndexType } from '@app/interfaces/schema';
 
 export const getExploreMatchGQL = (params: {
@@ -55,7 +55,7 @@ export const getExploreGQLWithIndex = (params: {
   quantityLimit: number | null;
 }) => {
   const { tag, filters, quantityLimit } = params;
-  const tagName = '`' + tag + '`';
+  const tagName = handleKeyword(tag);
   const wheres = filters
     .filter(
       filter =>
@@ -154,7 +154,7 @@ export const getTagOrEdgeCreateGQL = (params: {
     : '';
   const ttlStr = ttl_col
     ? `TTL_DURATION = ${ttl_duration ||
-        ''}, TTL_COL = "${ttl_col || ''}"`
+        ''}, TTL_COL = "${handleEscape(ttl_col)}"`
     : '';
   const gql = `CREATE ${type} ${handleKeyword(name)} ${
     propertiesStr.length > 0 ? `(${propertiesStr})` : '()'
@@ -169,10 +169,12 @@ export const getAlterGQL = (params: IAlterForm) => {
   const { type, name, action, config } = params;
   if (action === 'TTL' && config.ttl) {
     const { ttl } = config;
-    content = `TTL_DURATION = ${ttl.duration || 0}, TTL_COL = "${ttl.col}"`;
-  } else if (action === 'COMMENT' && config.comment) {
+    content = `TTL_DURATION = ${ttl.duration || 0}, TTL_COL = "${
+      ttl.col ? handleEscape(ttl.col) : ''
+    }"`;
+  } else if (action === 'COMMENT') {
     content = `COMMENT="${config.comment}"`;
-  } else if (action !== 'TTL' && action !== 'COMMENT' && config.fields) {
+  } else if (config.fields) {
     const date = config.fields
       .map(item => {
         const { name, type, value, fixedLength, allowNull, comment } = item;
@@ -225,7 +227,7 @@ export const getIndexCreateGQL = (params: {
     ? `on ${handleKeyword(associate)}(${fields?.join(', ')})`
     : '';
   const gql = `CREATE ${type.toUpperCase()} INDEX ${handleKeyword(name)} ${combine} ${
-    comment ? `COMMENT = "${comment}"` : ''
+    comment ? `COMMENT "${comment}"` : ''
   }`;
   return gql;
 };
diff --git a/app/utils/import.ts b/app/utils/import.ts
index 30e1ffb4..fa1add48 100644
--- a/app/utils/import.ts
+++ b/app/utils/import.ts
@@ -2,7 +2,7 @@ import { message } from 'antd';
 import _ from 'lodash';
 import intl from 'react-intl-universal';
 
-import { handleVidStringName } from './function';
+import { handleEscape, handleKeyword, handleVidStringName } from './function';
 
 export function configToJson(payload) {
   const {
@@ -36,7 +36,7 @@ export function configToJson(payload) {
       retry: 3,
       concurrency: 10,
       channelBufferSize: 128,
-      space,
+      space: handleEscape(space),
       connection: {
         user: username,
         password,
@@ -83,7 +83,7 @@ export function edgeDataToJSON(
             break;
           }
           const _prop = {
-            name: prop.name,
+            name: handleEscape(prop.name),
             type: prop.type,
             index: indexJudge(prop.mapping, prop.name),
           };
@@ -103,7 +103,7 @@ export function edgeDataToJSON(
       schema: {
         type: 'edge',
         edge: {
-          name: edge.type,
+          name: handleEscape(edge.type),
           srcVID: edge.srcVID,
           dstVID: edge.dstVID,
           rank: edge.rank,
@@ -132,13 +132,13 @@ export function vertexDataToJSON(
             return null;
           }
           return {
-            name: prop.name,
+            name: handleEscape(prop.name),
             type: prop.type,
             index: indexJudge(prop.mapping, prop.name),
           };
         });
       const _tag = {
-        name: tag.name,
+        name: handleEscape(tag.name),
         props: props.filter(prop => prop),
       };
       return _tag;
@@ -219,7 +219,7 @@ export function getGQLByConfig(payload) {
           }
           if (prop.mapping !== null) {
             // HACK: Processing keyword
-            tagField.push(`\`${prop.name}\``);
+            tagField.push(handleKeyword(prop.name));
             const value =
               prop.type === 'string'
                 ? `"${columns[prop.mapping]}"`
@@ -228,7 +228,7 @@ export function getGQLByConfig(payload) {
           }
         });
         NGQL.push(
-          `${'INSERT VERTEX ' + '`'}${tag.name}\`` +
+          `INSERT VERTEX ${handleKeyword(tag.name)}` +
             `(${tagField}) VALUES ${handleVidStringName(
               columns[vertexConfig.idMapping],
               spaceVidType,
@@ -258,7 +258,7 @@ export function getGQLByConfig(payload) {
           prop.mapping !== null
         ) {
           // HACK: Processing keyword
-          edgeField.push(`\`${prop.name}\``);
+          edgeField.push(handleKeyword(prop.name));
           const value =
             prop.type === 'string'
               ? `"${columns[prop.mapping]}"`
@@ -271,7 +271,7 @@ export function getGQLByConfig(payload) {
           ? ''
           : `@${columns[edgeConfig.props[2].mapping]}`;
       NGQL.push(
-        `${'INSERT EDGE ' + '`'}${edgeConfig.type}\`` +
+        `INSERT EDGE ${handleKeyword(edgeConfig.type)}` +
           `(${edgeField.join(',')}) VALUES ${handleVidStringName(
             columns[edgeConfig.props[0].mapping],
             spaceVidType,
diff --git a/package-lock.json b/package-lock.json
index 363f9e7b..de3aaae9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "nebula-graph-studio",
-  "version": "3.2.1",
+  "version": "3.3.0-beta",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -6587,6 +6587,11 @@
         }
       }
     },
+    "js-base64": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmmirror.com/js-base64/-/js-base64-3.7.2.tgz",
+      "integrity": "sha512-NnRs6dsyqUXejqk/yv2aiXlAvOs56sLkX6nUdeaNezI5LFFLlsZjOThmwnrcwh5ZZRwZlCMnVAY3CvhIhoVEKQ=="
+    },
     "js-cookie": {
       "version": "2.2.1",
       "resolved": "https://registry.npmmirror.com/js-cookie/-/js-cookie-2.2.1.tgz",
diff --git a/package.json b/package.json
index c86bc6bb..ec201004 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nebula-graph-studio",
-  "version": "3.2.1",
+  "version": "3.3.0-beta",
   "description": "nebula-graph-studio",
   "private": true,
   "scripts": {
@@ -25,6 +25,7 @@
     "file-saver": "^2.0.5",
     "history": "^5.1.0",
     "http-proxy-middleware": "^0.20.0",
+    "js-base64": "^3.7.2",
     "js-cookie": "^2.2.1",
     "json-bigint": "^1.0.0",
     "json2csv": "^5.0.6",
diff --git a/server/pkg/webserver/base/types.go b/server/pkg/webserver/base/types.go
index c6daa797..27b906ad 100644
--- a/server/pkg/webserver/base/types.go
+++ b/server/pkg/webserver/base/types.go
@@ -3,6 +3,7 @@ package base
 type StatusCode int
 
 const (
-	Error   StatusCode = -1
-	Success StatusCode = 0
+	Error              StatusCode = -1
+	Success            StatusCode = 0
+	AuthorizationError StatusCode = 401
 )
diff --git a/server/pkg/webserver/controller/gateway.go b/server/pkg/webserver/controller/gateway.go
index 01c31d83..18037042 100644
--- a/server/pkg/webserver/controller/gateway.go
+++ b/server/pkg/webserver/controller/gateway.go
@@ -1,6 +1,7 @@
 package controller
 
 import (
+	"encoding/base64"
 	"fmt"
 	"strings"
 
@@ -30,10 +31,8 @@ type gqlData struct {
 	data    map[string]interface{}
 }
 type connectDBParams struct {
-	Address  string `json:"address"`
-	Port     int    `json:"port"`
-	Username string `json:"username"`
-	Password string `json:"password"`
+	Address string `json:"address"`
+	Port    int    `json:"port"`
 }
 
 type disConnectDBParams struct {
@@ -124,8 +123,27 @@ func ExecNGQL(ctx iris.Context) base.Result {
 }
 
 func ConnectDB(ctx iris.Context) base.Result {
+	token := ctx.GetHeader("Authorization")
+	tokenSlice := strings.Split(token, " ")
+	if len(tokenSlice) != 2 {
+		return base.Response{
+			Code:    base.AuthorizationError,
+			Message: "Not get token",
+		}
+	}
+
+	decode, err := base64.StdEncoding.DecodeString(tokenSlice[1])
+	if err != nil {
+		return base.Response{
+			Code:    base.AuthorizationError,
+			Message: err.Error(),
+		}
+	}
+	account := strings.Split(string(decode), ":")
+	username, password := account[0], account[1]
+
 	params := new(connectDBParams)
-	err := ctx.ReadJSON(params)
+	err = ctx.ReadJSON(params)
 	if err != nil {
 		zap.L().Warn("connectDBParams get fail", zap.Error(err))
 		return base.Response{
@@ -133,7 +151,7 @@ func ConnectDB(ctx iris.Context) base.Result {
 			Message: err.Error(),
 		}
 	}
-	clientInfo, err := dao.Connect(params.Address, params.Port, params.Username, params.Password)
+	clientInfo, err := dao.Connect(params.Address, params.Port, username, password)
 	if err != nil {
 		return nil
 	}