diff --git a/routers/web/repo/contributors.go b/routers/web/repo/contributors.go
index bcfef7580a6a3..b432ba0b6c198 100644
--- a/routers/web/repo/contributors.go
+++ b/routers/web/repo/contributors.go
@@ -23,9 +23,11 @@ func Contributors(ctx *context.Context) {
 	ctx.Data["PageIsActivity"] = true
 	ctx.Data["PageIsContributors"] = true
 
-	ctx.PageData["contributionType"] = "commits"
-
-	ctx.PageData["repoLink"] = ctx.Repo.RepoLink
+	ctx.PageData["repoContributorsData"] = map[string]any{
+		"contributionType":  "commits",
+		"repoLink":          ctx.Repo.RepoLink,
+		"repoDefaultBranch": ctx.Repo.RefName,
+	}
 
 	ctx.HTML(http.StatusOK, tplContributors)
 }
diff --git a/web_src/js/components/RepoContributors.vue b/web_src/js/components/RepoContributors.vue
index 84fdcae1f61da..79c3fc91eb729 100644
--- a/web_src/js/components/RepoContributors.vue
+++ b/web_src/js/components/RepoContributors.vue
@@ -1,5 +1,6 @@
 <script>
 import {SvgIcon} from '../svg.js';
+import dayjs from 'dayjs';
 import {
   Chart,
   Title,
@@ -65,13 +66,15 @@ export default {
     errorText: '',
     totalStats: {},
     sortedContributors: {},
-    repoLink: pageData.repoLink || [],
-    type: pageData.contributionType,
+    repoLink: pageData.repoContributorsData.repoLink || [],
+    repoBranch: pageData.repoContributorsData.repoDefaultBranch || [],
+    type: pageData.repoContributorsData.contributionType,
     contributorsStats: [],
     xAxisStart: null,
     xAxisEnd: null,
     xAxisMin: null,
     xAxisMax: null,
+    searchQuery: '',
   }),
   mounted() {
     this.fetchGraphData();
@@ -88,6 +91,9 @@ export default {
   methods: {
     sortContributors() {
       const contributors = this.filterContributorWeeksByDateRange();
+      const min = dayjs(this.xAxisMin).format('YYYY-MM-DD');
+      const max = dayjs(this.xAxisMax).format('YYYY-MM-DD');
+      this.searchQuery = `${this.repoLink}/commits/branch/${this.repoBranch}/search?q=after:${min}, before:${max}, author:`;
       const criteria = `total_${this.type}`;
       this.sortedContributors = Object.values(contributors)
         .filter((contributor) => contributor[criteria] !== 0)
@@ -162,7 +168,7 @@ export default {
         // for details.
         user.max_contribution_type += 1;
 
-        filteredData[key] = {...user, weeks: filteredWeeks};
+        filteredData[key] = {...user, weeks: filteredWeeks, email: key};
       }
 
       return filteredData;
@@ -384,7 +390,7 @@ export default {
               {{ contributor.name }}
             </h4>
             <p class="gt-font-12 gt-df gt-gap-2">
-              <strong v-if="contributor.total_commits">{{ contributor.total_commits.toLocaleString() }} {{ locale.contributionType.commits }}</strong>
+              <strong v-if="contributor.total_commits"><a :href="searchQuery + contributor.email">{{ contributor.total_commits.toLocaleString() }} {{ locale.contributionType.commits }}</a></strong>
               <strong v-if="contributor.total_additions" class="text green">{{ contributor.total_additions.toLocaleString() }}++ </strong>
               <strong v-if="contributor.total_deletions" class="text red">
                 {{ contributor.total_deletions.toLocaleString() }}--</strong>