diff --git a/templates/repo/contributors.tmpl b/templates/repo/contributors.tmpl
index 71b706331..de00e7961 100755
--- a/templates/repo/contributors.tmpl
+++ b/templates/repo/contributors.tmpl
@@ -1,49 +1,9 @@
 {{template "base/head" .}}
-<style>
-
-</style>
 <div class="repository watchers">
 	{{template "repo/header" .}}
-	<div class="ui container">
+	<div class="ui container" id="Contributors">
+		
 		
-		<div class="row git-user-content">
-			<h3 class="ui header">
-				<div class="ui breadcrumb">
-					<a class="section" href="{{.RepoLink}}{{if (ne .BranchName .Repository.DefaultBranch)}}/src/{{.BranchNameSubURL | EscapePound}}{{end}}">{{.i18n.Tr "repo.code"}}</a>
-					<div class="divider"> / </div>
-					<div class="active section" href="{{.RepoLink}}/releases">{{.i18n.Tr "home.contributors"}} ({{len .ContributorInfo}})</div>
-				</div>
-				
-			</h3>
-			<div class="ui horizontal relaxed list">
-				{{range .ContributorInfo}}
-					<div class="item user-list-item" data-username="" >
-						{{if .UserInfo}}
-						<a href="{{AppSubUrl}}/{{.UserInfo.Name}}"><img class="ui avatar s16 image js-popover-card" src="{{.UserInfo.RelAvatarLink}}"></a>
-						{{else if .Email}}
-						<a href="mailto:{{.Email}}"><img class="ui avatar s16 image js-popover-card" avatar="{{.Email}}"></a>
-						{{end}}
-
-						<div class="content">
-							<div class="header" >
-								{{if .UserInfo}}
-								<a href="{{AppSubUrl}}/{{.UserInfo.Name}}">{{.UserInfo.Name}}</a>
-								{{else if .Email}}
-								<a href="mailto:{{.Email}}">{{.Email}}</a>
-								{{end}}
-							</div>
-							<span class="commit-btn">Commits: {{.CommitCnt}}</span>
-						</div>
-
-					</div>
-
-				{{end}}
-
-			</div>
-
-			{{template "base/paginate" .}}
-
-		</div>
 	</div>
 </div>
 {{template "base/footer" .}}
diff --git a/web_src/js/components/Contributors.vue b/web_src/js/components/Contributors.vue
new file mode 100644
index 000000000..2446e0bed
--- /dev/null
+++ b/web_src/js/components/Contributors.vue
@@ -0,0 +1,109 @@
+<template>
+    <div class="ui container">
+        <div class="row git-user-content">
+                <h3 class="ui header">
+                    <div class="ui breadcrumb">
+                        <a class="section" href="/">代码</a>
+                        <div class="divider"> / </div>
+                        <div class="active section" >贡献者({{totalNum}})</div>
+                    </div>
+                </h3>
+                <div class="ui horizontal relaxed list">
+                        <div class="item user-list-item" v-for="(contributor,i) in contributors_list_page" >
+                            <a v-if="contributor.user_name" :href="AppSubUrl +'/'+ contributor.user_name"><img class="ui avatar s16 image js-popover-card" :src="contributor.rel_avatar_link"></a>
+                            <a v-else :href="'mailto:' + contributor.email "><img class="ui avatar s16 image js-popover-card" :avatar="contributor.email"></a>
+                            <div class="content">
+                                <div class="header" >
+                                    <a v-if="contributor.user_name" :href="AppSubUrl +'/'+ contributor.user_name">{{contributor.user_name}}</a>
+                                    <a v-else :href="'mailto:' + contributor.email ">{{contributor.email}}</a>       
+                                </div>
+                                <span class="commit-btn">Commits: {{contributor.commit_cnt}}</span>
+                            </div>
+                        </div>
+                </div>
+        </div>
+        
+        <div class="ui container" style="margin-top:50px;text-align:center">
+                <el-pagination
+                    background
+                    @current-change="handleCurrentChange"
+                    :current-page="currentPage"
+                    :page-size="pageSize"
+                    layout="total, prev, pager, next"
+                    :total="totalNum">
+                </el-pagination>
+        </div>
+    </div>
+</template>
+
+<script>
+
+const {AppSubUrl, StaticUrlPrefix, csrf} = window.config;
+
+export default {
+  
+  data() {
+    return {
+        url:'',
+        contributors_list:[],
+        contributors_list_page:[],
+        currentPage:1,
+        pageSize:50,
+        totalNum:0,
+        AppSubUrl:AppSubUrl
+    };
+  },
+methods: {
+
+    getContributorsList(){
+        this.$axios.get(this.url+'/contributors/list').then((res)=>{
+            this.contributors_list = res.data.contributor_info
+            this.totalNum = this.contributors_list.length
+            this.contributors_list_page = this.contributors_list.slice(0,this.pageSize)
+        })
+    },
+    handleCurrentChange(val){
+        this.contributors_list_page = this.contributors_list.slice((val-1)*this.pageSize,val*this.pageSize)
+    },
+       
+},
+computed:{
+   
+},
+watch: {
+
+},
+created(){
+    this.url=document.head.querySelector("[property~='og:url'][content]").content
+    this.getContributorsList()
+    
+},
+
+updated(){
+    if(document.querySelectorAll('img[avatar]').length!==0){
+        window.LetterAvatar.transform()
+    }
+}
+};
+</script>
+
+<style scoped>
+/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
+  background-color: #5bb973;
+  color: #FFF;
+}
+/deep/ .el-pagination.is-background .el-pager li.active {
+  color: #fff;
+  cursor: default;
+}
+/deep/ .el-pagination.is-background .el-pager li:hover {
+  color: #5bb973;
+}
+/deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
+  color: #5bb973;
+}
+/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
+  background-color: #5bb973;
+  color: #FFF;
+}
+</style>
diff --git a/web_src/js/index.js b/web_src/js/index.js
index a117ee73d..560683b7e 100755
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -37,6 +37,7 @@ import ObsUploader from './components/ObsUploader.vue';
 import EditAboutInfo from './components/EditAboutInfo.vue';
 import Images from './components/Images.vue'
 import EditTopics from './components/EditTopics.vue'
+import Contributors from './components/Contributors.vue'
 
 Vue.use(ElementUI);
 Vue.prototype.$axios = axios;
@@ -2969,6 +2970,7 @@ $(document).ready(async () => {
   initObsUploader();
   initVueEditAbout();
   initVueEditTopic();
+  initVueContributors();
   initVueImages();
   initTeamSettings();
   initCtrlEnterSubmit();
@@ -3682,6 +3684,21 @@ function initVueEditTopic() {
       render:h=>h(EditTopics)
     })
 }
+
+function initVueContributors() {
+  const el = document.getElementById('Contributors');
+  
+  if (!el) {
+    return;
+  }
+
+  new Vue({
+    el:'#Contributors',
+    render:h=>h(Contributors)
+  })
+}
+
+
 function initVueImages() {
   const el = document.getElementById('images');
   console.log("el",el)