diff --git a/.gitignore b/.gitignore
index bfeee6fd98a66c9f88ccda202418879d01f1e60c..0a3b5a70bce3edcd91d1c44e8f517d5ccead832f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,6 +3,7 @@
 # dependencies
 /node_modules
 .idea
+.vscode
 # testing
 /coverage
 build
diff --git a/src/component/bootcamp-background/my-design/bootcamp/collaborator-tabs.js b/src/component/bootcamp-background/my-design/bootcamp/collaborator-tabs.js
index fa27501b5e5f99ccc18190b8695f7868daff75c8..476ebcab41dbbb44f3c97e962175ec17f79a8ad5 100755
--- a/src/component/bootcamp-background/my-design/bootcamp/collaborator-tabs.js
+++ b/src/component/bootcamp-background/my-design/bootcamp/collaborator-tabs.js
@@ -1,26 +1,40 @@
 import React, { Component } from 'react'
-import { Tabs, Checkbox, Row, Col } from 'antd'
+import { Tabs, Transfer } from 'antd'
 import collaboratorsList from '../../../../mock-data/collaborator-list'
+import '../../../../style/common.css'
 
 const TabPane = Tabs.TabPane
 
 export default class CollaboratorTabs extends Component {
-  render () {
+
+  state = {
+    targetKeys: []
+  }
+
+  filterOption = (inputValue, option) => {
+    return option.description.indexOf(inputValue) > -1;
+  }
+
+  handleChange = (targetKeys) => {
+    this.setState({ targetKeys });
+  }
+
+  render() {
     return (
-      <Tabs defaultActiveKey='1' type='card'>
+      <Tabs defaultActiveKey='0' type='card'>
         {
           collaboratorsList.map((collaborators, key) => {
             return (
               <TabPane tab={collaborators.name} key={key}>
-                <Checkbox.Group style={{ width: '100%' }}>
-                  <Row>
-                    {collaborators.data.map(collaborator => {
-                      return (
-                        <Col span={4}><Checkbox value={collaborator}>{collaborator}</Checkbox></Col>
-                      )
-                    })}
-                  </Row>
-                </Checkbox.Group>
+                <Transfer
+                  className={'align--center'}
+                  dataSource={collaborators.data}
+                  showSearch
+                  filterOption={this.filterOption}
+                  targetKeys={this.state.targetKeys}
+                  onChange={this.handleChange}
+                  render={item => item.name}
+                />
               </TabPane>
             )
           })}
diff --git a/src/mock-data/collaborator-list.js b/src/mock-data/collaborator-list.js
index d03ca338a6fa203a2006741eed8febd0341654da..6cd41430ab5b810ae7fdba44fc5a260b963866bb 100644
--- a/src/mock-data/collaborator-list.js
+++ b/src/mock-data/collaborator-list.js
@@ -1,10 +1,32 @@
 export default [
   {
     name: '主题一团队',
-    data: ['张三1', '李四1']
+    data: [
+      {
+        name: '张三1',
+        key: 1,
+        chosen: false
+      },
+      {
+        name: '李四1',
+        key: 2,
+        chosen: false
+      }
+    ]
   },
   {
     name: '主题二团队',
-    data: ['张三2', '李四2']
+    data: [
+      {
+        name: '张三2',
+        key: 3,
+        chosen: false
+      },
+      {
+        name: '李四2',
+        key: 4,
+        chosen: false
+      }
+    ]
   }
 ]
diff --git a/src/style/common.css b/src/style/common.css
index 1c941f9466df0b8d90af1c8cf126631a8e4f9f6c..58c00cb12c2cb8425e2d59ce1bdbcb209315e87c 100644
--- a/src/style/common.css
+++ b/src/style/common.css
@@ -1,5 +1,5 @@
 .margin--right {
-    margin-right: 6px;
+    margin-right: 8px;
 }
 
 .margin--bottom {
@@ -8,4 +8,8 @@
 
 .full--height {
     height: 100%;
+}
+
+.align--center {
+    text-align: center;
 }
\ No newline at end of file