diff --git a/.gitignore b/.gitignore
index b3994cb..8c13ab1 100755
--- a/.gitignore
+++ b/.gitignore
@@ -28,6 +28,7 @@
 
 /tmp
 /data/docSidebar/*
+/data/team.yml
 !.gitkeep
 /content/docs/*
 !_index.md
diff --git a/content/team/_index.md b/content/team/_index.md
index 42ca8cc..5a1e59f 100644
--- a/content/team/_index.md
+++ b/content/team/_index.md
@@ -66,25 +66,10 @@
 | Zhusheng Xu       | aderm       |                                                  |
 
 
-## Contributors
 
-SkyWalking have hundreds of contributors, you could find them in our repositories' contribution list.
+{{< contributors >}}
 
-- [SkyWalking main repository](https://github.com/apache/skywalking/graphs/contributors)
-- [SkyWalking Nginx LUA](https://github.com/apache/skywalking-nginx-lua/graphs/contributors)
-- [SkyWalking RocketBot UI](https://github.com/apache/skywalking-rocketbot-ui/graphs/contributors)
-- [SkyWalking data collect protocol](https://github.com/apache/skywalking-data-collect-protocol/graphs/contributors)
-- [SkyWalking query protocol](https://github.com/apache/skywalking-query-protocol/graphs/contributors)
-- [SkyWalking website](https://github.com/apache/skywalking-website/graphs/contributors)
-- [SkyWalking docker](https://github.com/apache/skywalking-docker/graphs/contributors)
-- [SkyWalking kubernetes](https://github.com/apache/skywalking-kubernetes/graphs/contributors)
-- [SkyWalking K8s Operator - SkyWalking Cloud on Kubernetes](https://github.com/apache/skywalking-swck/graphs/contributors)
-- [SkyWalking Python Agent](https://github.com/apache/skywalking-python/graphs/contributors)
-- [SkyWalking CLI](https://github.com/apache/skywalking-cli/graphs/contributors)
-- [SkyWalking Client JS](https://github.com/apache/skywalking-client-js/graphs/contributors)
-- [SkyWalking satellite](https://github.com/apache/skywalking-satellite/graphs/contributors)
-- [SkyWalking agent test tool](https://github.com/apache/skywalking-agent-test-tool/graphs/contributors)
-- [SkyWalking NodeJS Agent](https://github.com/apache/skywalking-nodejs/graphs/contributors)
+
 
 Archived
 
diff --git a/layouts/shortcodes/contributors.html b/layouts/shortcodes/contributors.html
new file mode 100644
index 0000000..65c3e66
--- /dev/null
+++ b/layouts/shortcodes/contributors.html
@@ -0,0 +1,79 @@
+<div class="team-wrapper pb-4">
+    <h2>
+        Contributors
+        <span class="total">{{.Site.Data.team.totalCount }}</span>
+    </h2>
+    <p>SkyWalking have hundreds of contributors, you could find them in our repositories' contribution list.
+    </p>
+    <div id="contributors-wrapper">
+        {{ range .Site.Data.team.projects }}
+
+        {{if eq .type "Ecosystem"}}
+        <p class="pt-3 mb-2">Ecosystem Projects </p>
+        {{end}}
+
+        <div>
+            {{range $index, $element := .list}}
+            {{$name := .name }}
+            {{$id := replace .name " " "" }}
+            {{$id := replace $id "." "" }}
+
+            <div class="card" data-repo="{{.repo}}">
+                <div class="card-header" id="{{$id}}">
+                    <div class='{{ cond (eq $name "SkyWalking") "" "collapsed"}}' type="span" data-toggle="collapse" data-target="#{{$id}}{{$index}}" aria-expanded="false"
+                         aria-controls="{{$id}}{{$index}}">
+                        <i class="fa  fa-angle-down "></i>
+
+                        <a class="name"
+                           href="https://github.com/{{.user}}/{{.repo}}/graphs/contributors">
+                            {{if eq $name "SkyWalking"}}
+                            SkyWalking main repository
+                            {{else}}
+                            {{.name}}
+                            {{end}}
+                        </a>
+                        <span class="total">{{len .contributors}}</span>
+
+                    </div>
+                </div>
+
+                <div id="{{$id}}{{$index}}" class='collapse {{ cond (eq $name "SkyWalking") "show" "" }}'
+                     aria-labelledby="{{$id}}"
+                     data-parent="#contributors-wrapper">
+                    <div class="card-body limit">
+                        <ul class="list-style-none d-flex flex-wrap mb-n2">
+                            {{range $index, $element := .contributors}}
+                                {{if .login}}
+                                <li class="mb-2 mr-2" data-src="{{.avatar_url}}?s=64&v=4">
+                                    <a href="{{.html_url}}" target="_blank">
+                                        <i class="fab fa-github"></i>
+                                        {{.login }}
+                                    </a>
+                                </li>
+                                {{end}}
+
+                            {{end}}
+
+                            {{if eq $name "SkyWalking"}}
+                            <li class="more d-block">
+                            {{else}}
+                            <li class="more">
+                            {{end}}
+                                <i class="fa fa-angle-up fa-angle-down "></i>
+                            </li>
+
+
+                        </ul>
+                    </div>
+                </div>
+            </div>
+
+            {{end}}
+        </div>
+        {{end}}
+    </div>
+
+
+</div>
+
+
diff --git a/package.json b/package.json
index 50c84a2..4a51c99 100644
--- a/package.json
+++ b/package.json
@@ -5,8 +5,9 @@
   "main": "none.js",
   "scripts": {
     "build": "npm install && hugo",
-    "build-with-docs": "npm install && npm run docs && hugo",
+    "build-with-docs": "npm install && npm run docs && npm run team && hugo",
     "docs": "node ./docs.js",
+    "team": "node ./scripts/team.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
diff --git a/scripts/team.js b/scripts/team.js
new file mode 100644
index 0000000..0c66308
--- /dev/null
+++ b/scripts/team.js
@@ -0,0 +1,87 @@
+const process = require("process");
+const path = require("path");
+const YAML = require('yamljs');
+const axios = require('axios');
+const fs = require("fs");
+const {promises} = fs;
+const docsFile = path.join(__dirname, '../data/docs.yml')
+const teamFile = path.join(__dirname, '../data/team.yml')
+
+class GenerateTeamYaml {
+  constructor(docsFile, teamFile) {
+    this.docsFile = docsFile;
+    this.teamFile = teamFile;
+  }
+
+  nativeObject = []
+  ids = {}
+
+  async init() {
+    try{
+      this.nativeObject = await this.loadYaml(docsFile);
+      await this.getAllRepoContributors()
+      await this.writeFile()
+    }catch (err){
+      console.log(err);
+      process.exit(1)
+    }
+  }
+
+  async getAllRepoContributors() {
+    const promiseList = [];
+    for (const k of this.nativeObject) {
+      for (const item of k.list) {
+        const {user, repo} = item
+        const list = []
+        promiseList.push(this.getRepoContributors({user, repo, list, item}))
+
+      }
+
+    }
+    await Promise.all(promiseList)
+
+  }
+
+  async writeFile() {
+    const data = {
+      totalCount: Object.keys(this.ids).length,
+      projects: this.nativeObject
+    }
+    const yamlString = YAML.stringify(data);
+    await promises.writeFile(this.teamFile, yamlString, 'utf8');
+    console.log('team.yml success!');
+  }
+
+  getUniqueId(list) {
+    list.forEach(item => {
+      const {id, email,} = item;
+      const key = id || email
+      if (!this.ids[key]) {
+        this.ids[key] = key
+      }
+    })
+  }
+
+  async loadYaml() {
+    const data = await new Promise((resolve) => {
+      YAML.load(this.docsFile, (result) => {
+        resolve(result)
+      });
+    })
+    return data
+  }
+
+  async getRepoContributors({user, repo, page = 1, per_page = 100, list = [], item}) {
+    const {data} = await axios.get(`https://api.github.com/repos/${user}/${repo}/contributors?page=${page}&per_page=${per_page}&anon=true`)
+    list.push(...data)
+    this.getUniqueId(data)
+    if (data.length === per_page) {
+      page++;
+      await this.getRepoContributors({user, repo, page, per_page, list, item})
+    } else {
+      item.contributors = list;
+    }
+  }
+}
+
+new GenerateTeamYaml(docsFile, teamFile).init()
diff --git a/themes/docsy/assets/scss/_custom_team.scss b/themes/docsy/assets/scss/_custom_team.scss
new file mode 100644
index 0000000..1808d54
--- /dev/null
+++ b/themes/docsy/assets/scss/_custom_team.scss
@@ -0,0 +1,111 @@
+.team-wrapper {
+  #contributors-wrapper {
+    ul, li {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    li {
+      position: relative;
+      border: 1px solid #eaecef;
+      border-radius: 4px;
+      padding: 4px 7px;
+      box-shadow: #f8f9fa 0px 1px 2px 0px;
+
+      a {
+        color: #2c3e50;
+      }
+    }
+
+    .card {
+      border: none;
+
+
+      &:nth-of-type(1) {
+        border-top: none;
+      }
+
+      .card-header {
+        background-color: transparent;
+        cursor: pointer;
+        padding-top: 0;
+        padding-bottom: 0;
+        border: none;
+
+        &:hover {
+          background-color: #f6f8fa;
+        }
+
+        .name {
+          line-height: 40px;
+        }
+        .fa{
+          color: #6a94d1;
+        }
+        .collapsed{
+          .fa{
+            transform: rotate(-90deg);
+          }
+        }
+      }
+
+      .card-body {
+        position: relative;
+        box-sizing: content-box;
+
+        &.limit {
+          max-height: 450px;
+          overflow-y: hidden;
+        }
+
+        .d-block {
+          display: block;
+        }
+      }
+    }
+
+
+    .more {
+      display: none;
+      color: #999;
+      background: #f6f8fa;
+      padding: 6px 14px;
+      text-align: center;
+      font-size: 14px;
+      cursor: pointer;
+      position: absolute;
+      border-radius: 4px;
+      box-shadow: #f8f9fa 0px 3px 2px 0px;
+      right: 0px;
+      bottom: 16px;
+
+      .fa {
+        transform: rotate(180deg);
+      }
+    }
+
+
+  }
+
+  .total {
+    display: inline-block;
+    border-radius: 12px;
+    background-color: #edf1f6;
+    font-weight: normal;
+    font-size: 13px;
+    line-height: 14px;
+    padding: 5px 6px;
+    position: relative;
+    top: -6px;
+    color: #666;
+    min-width: 26px;
+    text-align: center;
+  }
+
+  @media (max-width: 450px) {
+    li {
+      overflow-x: initial;
+    }
+  }
+}
\ No newline at end of file
diff --git a/themes/docsy/assets/scss/_styles_project.scss b/themes/docsy/assets/scss/_styles_project.scss
index f3b13dc..0d8f0f4 100644
--- a/themes/docsy/assets/scss/_styles_project.scss
+++ b/themes/docsy/assets/scss/_styles_project.scss
@@ -12,6 +12,7 @@
 @import "custom_tags.scss";
 @import "custom_project_doc.scss";
 @import "sidebar-menu";
+@import "custom_team";
 
 //common
 html, body {
diff --git a/themes/docsy/layouts/partials/script-team.html b/themes/docsy/layouts/partials/script-team.html
new file mode 100644
index 0000000..a9c99e0
--- /dev/null
+++ b/themes/docsy/layouts/partials/script-team.html
@@ -0,0 +1,19 @@
+<script>
+  $(function (){
+
+    $('.card-header').on('click', function () {
+      var cardBody = $(this).next().find('.card-body')
+      setTimeout(function () {
+        if (cardBody.height() >= 450) {
+          cardBody.find('.more').fadeIn()
+        }
+      }, 1000)
+    })
+
+    $('.more').on('click', function () {
+      var cardBody = $(this).parents('.card-body')
+      cardBody.toggleClass('limit')
+      $(this).find('.fa').toggleClass('fa-angle-up')
+    })
+  })
+</script>
\ No newline at end of file
diff --git a/themes/docsy/layouts/team/baseof.html b/themes/docsy/layouts/team/baseof.html
index abb059d..fe07f53 100644
--- a/themes/docsy/layouts/team/baseof.html
+++ b/themes/docsy/layouts/team/baseof.html
@@ -19,5 +19,6 @@
     {{ partial "lightbox.html" . }}
     {{ partial "sidebar-skywalking.html" . }}
     {{ partial "scripts.html" . }}
+    {{ partial "script-team.html" . }}
   </body>
 </html>