diff --git a/web/src/components/integration/component/DataForm.js b/web/src/components/integration/component/DataForm.js
new file mode 100644
index 000000000..bff3596b9
--- /dev/null
+++ b/web/src/components/integration/component/DataForm.js
@@ -0,0 +1,147 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Form, Select, Input, Button } from 'antd';
+
+const FormItem = Form.Item;
+const Option = Select.Option;
+const formMap = {
+  git: [
+    {
+      label: 'URL',
+      key: 'url',
+    },
+    {
+      label: 'Token',
+      key: 'Token',
+    },
+  ],
+  imagesregistry: [
+    {
+      label: intl.get('integration.dataform.registryaddress'),
+      key: 'registryAddress',
+    },
+    {
+      label: intl.get('integration.dataform.username'),
+      key: 'username',
+    },
+    {
+      label: intl.get('integration.dataform.pwd'),
+      key: 'pwd',
+    },
+  ],
+};
+
+class DataForm extends React.Component {
+  static propTypes = {
+    form: PropTypes.object,
+    onSubmit: PropTypes.func,
+    onCancel: PropTypes.func,
+  };
+  state = {
+    inputList: [],
+  };
+
+  componentDidMount() {
+    this.resetForm();
+  }
+
+  componentWillUnmount() {
+    this.resetForm();
+  }
+
+  resetForm = () => {
+    const { resetFields } = this.props.form;
+    this.setState({ inputList: [] });
+    resetFields();
+  };
+
+  handleSubmit = e => {
+    const { onSubmit } = this.props;
+    e.preventDefault();
+    this.props.form.validateFields((err, values) => {
+      if (!err) {
+        // TODO post request
+        this.resetForm();
+        onSubmit();
+      }
+    });
+  };
+
+  handleCancle = () => {
+    const { onCancel } = this.props;
+    this.resetForm();
+    onCancel();
+  };
+
+  handleSelectChange = value => {
+    this.setState({
+      inputList: formMap[value],
+    });
+  };
+
+  renderFormInputs = () => {
+    const { inputList } = this.state;
+    const { getFieldDecorator } = this.props.form;
+    return (
+      inputList.length > 0 &&
+      inputList.map((v, i) => (
+        <FormItem
+          key={i}
+          label={v.label}
+          labelCol={{ span: 5 }}
+          wrapperCol={{ span: 12 }}
+        >
+          {getFieldDecorator(v.key)(<Input autoComplete="off" />)}
+        </FormItem>
+      ))
+    );
+  };
+
+  render() {
+    const { getFieldDecorator } = this.props.form;
+    const { inputList } = this.state;
+    return (
+      <Form onSubmit={this.handleSubmit}>
+        <FormItem
+          label={intl.get('integration.type')}
+          labelCol={{ span: 5 }}
+          wrapperCol={{ span: 12 }}
+        >
+          {getFieldDecorator('type', {
+            rules: [
+              {
+                required: true,
+                message: intl.get('integration.dataform.datasourcetype'),
+              },
+            ],
+          })(
+            <Select
+              placeholder={intl.get('integration.dataform.datasourcetype')}
+              onChange={this.handleSelectChange}
+            >
+              <Option value="git">git</Option>
+              <Option value="imagesregistry">
+                {intl.get('integration.dataform.imagesregistry')}
+              </Option>
+            </Select>
+          )}
+        </FormItem>
+        {this.renderFormInputs()}
+        <Form.Item wrapperCol={{ span: 8, offset: 10 }}>
+          <Button style={{ marginRight: '10px' }} onClick={this.handleCancle}>
+            {intl.get('integration.dataform.cancel')}
+          </Button>
+          <Button
+            disabled={inputList.length <= 0}
+            type="primary"
+            htmlType="submit"
+          >
+            {intl.get('integration.dataform.confirm')}
+          </Button>
+        </Form.Item>
+      </Form>
+    );
+  }
+}
+
+export default Form.create()(DataForm);
diff --git a/web/src/components/integration/component/List.js b/web/src/components/integration/component/List.js
new file mode 100644
index 000000000..221b62b6c
--- /dev/null
+++ b/web/src/components/integration/component/List.js
@@ -0,0 +1,78 @@
+import React from 'react';
+import { Table, Button, Modal } from 'antd';
+import { inject, observer } from 'mobx-react';
+import IntegrationForm from './DataForm';
+import PropTypes from 'prop-types';
+
+@inject('integration')
+@observer
+class List extends React.Component {
+  static propTypes = {
+    integration: PropTypes.object,
+  };
+  state = { visible: false };
+  componentDidMount() {
+    this.props.integration.getIntegrationList();
+  }
+  addDataSource = () => {
+    this.setState({
+      visible: true,
+    });
+  };
+  handleOk = e => {
+    this.setState({
+      visible: false,
+    });
+  };
+
+  handleCancel = e => {
+    this.setState({
+      visible: false,
+    });
+  };
+  render() {
+    const { integration } = this.props;
+    const columns = [
+      {
+        title: intl.get('name'),
+        dataIndex: 'name',
+        key: 'name',
+      },
+      {
+        title: intl.get('integration.type'),
+        dataIndex: 'type',
+        key: 'type',
+      },
+      {
+        title: intl.get('integration.creationTime'),
+        dataIndex: 'time',
+        key: 'time',
+      },
+    ];
+    return (
+      <div>
+        <div className="head-bar">
+          <h2>{intl.get('integration.datasource')}</h2>
+          <Button type="primary" onClick={this.addDataSource}>
+            {intl.get('operation.add')}
+          </Button>
+        </div>
+        <Table columns={columns} dataSource={integration.integrationList} />
+        <Modal
+          ref="modal"
+          title={intl.get('integration.adddatasource')}
+          visible={this.state.visible}
+          footer={null}
+          onCancel={this.handleCancel}
+        >
+          <IntegrationForm
+            onSubmit={this.handleOk}
+            onCancel={this.handleCancel}
+          />
+        </Modal>
+      </div>
+    );
+  }
+}
+
+export default List;
diff --git a/web/src/components/integration/index.js b/web/src/components/integration/index.js
new file mode 100644
index 000000000..ccbe35a92
--- /dev/null
+++ b/web/src/components/integration/index.js
@@ -0,0 +1,2 @@
+import Integration from './component/List';
+export default Integration;
diff --git a/web/src/layout/index.js b/web/src/layout/index.js
index f7095d437..4a848ce95 100644
--- a/web/src/layout/index.js
+++ b/web/src/layout/index.js
@@ -80,6 +80,12 @@ class CoreLayout extends Component {
                   <span>{intl.get('sideNav.workflow')}</span>
                 </NavLink>
               </Menu.Item>
+              <Menu.Item key="integration">
+                <NavLink to="/integration" activeClassName="active">
+                  <Icon type="sliders" />
+                  <span>{intl.get('sideNav.integration')}</span>
+                </NavLink>
+              </Menu.Item>
               {/* TODO: manage and setting */}
               {/* <SubMenu
                 key="manage"
diff --git a/web/src/locale/en-US.json b/web/src/locale/en-US.json
index 36a599626..31585c2aa 100644
--- a/web/src/locale/en-US.json
+++ b/web/src/locale/en-US.json
@@ -15,18 +15,27 @@
     "project": "Project",
     "resource": "Resource",
     "template": "Template",
-    "workflow": "Workflow"
+    "workflow": "Workflow",
+    "integration": "Integration Center"
   },
   "workflow": {
     "recentVersion": "Recent version",
-    "creator": "Creator"
+    "creator": "Creator",
+    "creationTime": "Creation time"
   },
-  "project": {
-    "workflowCount": "Workflow count",
-    "createProject": "Create Project",
-    "authentication": "Authentication",
-    "formTip": {
-      "projectNameRequired": "Please input the name of project"
+  "integration": {
+    "type": "Type",
+    "integrationTime": "Integration time",
+    "datasource": "Data source",
+    "adddatasource": "Add new data source",
+    "dataform": {
+      "dockerregistry": "Docker registry",
+      "registryaddress": "Registry Address",
+      "confirm": "Confirm",
+      "cancel": "Cancel",
+      "username": "Username",
+      "pwd": "password",
+      "datasourcetype": "Please select a resource type"
     }
   }
 }
diff --git a/web/src/locale/zh-CN.json b/web/src/locale/zh-CN.json
index 8f66d70a4..67b11714c 100644
--- a/web/src/locale/zh-CN.json
+++ b/web/src/locale/zh-CN.json
@@ -15,18 +15,27 @@
     "project": "项目",
     "resource": "资源",
     "template": "模板",
-    "workflow": "工作流"
+    "workflow": "流水线",
+    "integration": "集成中心"
   },
   "workflow": {
     "recentVersion": "最近版本",
-    "creator": "创建者"
+    "creator": "创建者",
+    "creationTime": "创建时间"
   },
-  "project": {
-    "workflowCount": "工作流数量",
-    "createProject": "新增项目",
-    "authentication": "认证",
-    "formTip": {
-      "projectNameRequired": "请输入项目名称"
+  "integration": {
+    "type": "类型",
+    "creationTime": "创建时间",
+    "datasource": "数据源",
+    "adddatasource": "新增数据源",
+    "dataform": {
+      "dockerregistry": "镜像仓库",
+      "registryaddress": "仓库地址",
+      "confirm": "确定",
+      "cancel": "取消",
+      "username": "用户吗",
+      "pwd": "密码",
+      "datasourcetype": "请选择资源类型"
     }
   }
 }
diff --git a/web/src/routes/index.js b/web/src/routes/index.js
index 9b3c4e715..24a38e203 100644
--- a/web/src/routes/index.js
+++ b/web/src/routes/index.js
@@ -4,6 +4,7 @@ import Workflow from '../components/workflow';
 import Template from '../components/template';
 import Resource from '../components/resource';
 import Overview from '../components/overview';
+import Integration from '../components/integration';
 
 import React from 'react';
 
@@ -14,6 +15,7 @@ const Routes = () => (
     <Route path="/resource" component={Resource} />
     <Route path="/template" component={Template} />
     <Route path="/workflow" component={Workflow} />
+    <Route path="/integration" component={Integration} />
     <Redirect to="/" />
   </Switch>
 );
diff --git a/web/src/store/index.js b/web/src/store/index.js
index f91b4aca4..d47054dc6 100644
--- a/web/src/store/index.js
+++ b/web/src/store/index.js
@@ -1,6 +1,8 @@
 import workflow from './workflow';
+import integration from './integration';
 
 const stores = {
   workflow,
+  integration,
 };
 export default stores;
diff --git a/web/src/store/integration.js b/web/src/store/integration.js
new file mode 100644
index 000000000..dfc9cfa0f
--- /dev/null
+++ b/web/src/store/integration.js
@@ -0,0 +1,20 @@
+import { observable, useStrict, action } from 'mobx';
+
+useStrict(true);
+
+class Integration {
+  @observable integrationList = [];
+  @action.bound
+  getIntegrationList(workflowId) {
+    this.integrationList = [
+      {
+        name: 'svn-2',
+        type: 'svn-1',
+        time: '2018-12-21',
+      },
+    ];
+    return;
+  }
+}
+
+export default new Integration();