diff --git a/templates/repo/commits_list.tmpl b/templates/repo/commits_list.tmpl
index 2c0a93f2ba..250e60f888 100644
--- a/templates/repo/commits_list.tmpl
+++ b/templates/repo/commits_list.tmpl
@@ -76,27 +76,60 @@
 						{{else}}
 							<td class="text right aligned">{{DateUtils.TimeSince .Author.When}}</td>
 						{{end}}
-						<td class="text right aligned tw-py-0">
-							<button class="btn interact-bg tw-p-2" data-tooltip-content="{{ctx.Locale.Tr "copy_hash"}}" data-clipboard-text="{{.ID}}">{{svg "octicon-copy"}}</button>
-							{{if not $.PageIsWiki}}
-							{{if $.FileName}}
-							<a
-								class="btn interact-bg tw-p-2"
-								data-tooltip-content="{{ctx.Locale.Tr "repo.commits.view_single_diff"}}"
-								href="{{printf "%s/commit/%s?files=%s" $commitRepoLink (PathEscape .ID.String) (PathEscapeSegments $.FileName)}}">
-								{{svg "octicon-file-diff"}}
-							</a>
-							{{end}}
-							<a
-								class="btn interact-bg tw-p-2"
-								data-tooltip-content="{{ctx.Locale.Tr "repo.commits.view_path"}}"
-								href="{{if $.FileName}}{{printf "%s/src/commit/%s/%s" $commitRepoLink (PathEscape .ID.String) (PathEscapeSegments $.FileName)}}{{else}}{{printf "%s/src/commit/%s" $commitRepoLink (PathEscape .ID.String)}}{{end}}">
-								{{svg "octicon-file-code"}}
-							</a>
-							{{end}}
-						</td>
-					</tr>
+					{{end}}
+					{{$commitShaLink := ""}}
+					{{if $.PageIsWiki}}
+						{{$commitShaLink = (printf "%s/wiki/commit/%s" $commitRepoLink (PathEscape .ID.String))}}
+					{{else if $.PageIsPullCommits}}
+						{{$commitShaLink = (printf "%s/pulls/%d/commits/%s" $commitRepoLink $.Issue.Index (PathEscape .ID.String))}}
+					{{else if $.Reponame}}
+						{{$commitShaLink = (printf "%s/commit/%s" $commitRepoLink (PathEscape .ID.String))}}
+					{{end}}
+					<a {{if $commitShaLink}}href="{{$commitShaLink}}"{{end}} class="{{$class}}">
+						<span class="shortsha">{{ShortSha .ID.String}}</span>
+						{{if .Signature}}{{template "repo/shabox_badge" dict "root" $ "verification" .Verification}}{{end}}
+					</a>
+				</div>
+				<div class="tw-flex tw-items-center tw-min-w-60 tw-max-w-60 tw-truncate">
+					{{$userName := .Author.Name}}
+					<!-- username is not clickable and can't redirected to profile page, bcz of the DB absense, ig -->
+					{{if .User}}
+						{{if and .User.FullName DefaultShowFullName}}
+							{{$userName = .User.FullName}}
+						{{end}}
+						{{ctx.AvatarUtils.Avatar .User 28 "tw-mr-2"}}<a class="muted author-wrapper" href="{{.User.HomeLink}}">{{$userName}}</a>
+					{{else}}
+						{{ctx.AvatarUtils.AvatarByEmail .Author.Email .Author.Name 28 "tw-mr-2"}}
+						<span class="author-wrapper">{{$userName}}</span>
+					{{end}}
+				</div>
+			</div>
+
+			<div class="tw-min-w-0 tw-max-w-full tw-overflow-hidden tw-text-left tw-truncate">
+				{{$commitLink:= printf "%s/commit/%s" $commitRepoLink (PathEscape .ID.String)}}
+				<div class="tw-flex">{{RenderCommitMessageLinkSubject $.Context .Message $commitLink ($.Repository.ComposeMetas ctx)}}</div>
+				{{if IsMultilineCommitMessage .Message}}
+					<button class="ui button js-toggle-commit-body ellipsis-button" aria-expanded="false">...</button>
+					<pre class="commit-body tw-hidden">{{RenderCommitBody $.Context .Message ($.Repository.ComposeMetas ctx)}}</pre>
 				{{end}}
-			</tbody>
-		</table>
-	</div>
+				{{template "repo/commit_statuses" dict "Status" .Status "Statuses" .Statuses}}
+			</div>
+
+			<div class="tw-text-sm tw-text-gray-500 tw-text-right tw-min-w-32">
+				{{if .Committer}}{{DateUtils.TimeSince .Committer.When}}{{else}}{{DateUtils.TimeSince .Author.When}}{{end}}
+			</div>
+
+			<!-- fixed overflowing by placing them at the end of col -->
+			<div class="tw-flex tw-gap-2 tw-min-w-28 tw-justify-end">
+				<button class="btn interact-bg tw-p-2" data-tooltip-content="{{ctx.Locale.Tr "copy_hash"}}" data-clipboard-text="{{.ID}}">{{svg "octicon-copy"}}</button>
+				{{if not $.PageIsWiki}}
+					{{if $.FileName}}
+						<a class="btn interact-bg tw-p-2" href="{{printf "%s/commit/%s?files=%s" $commitRepoLink (PathEscape .ID.String) (PathEscapeSegments $.FileName)}}">{{svg "octicon-file-diff"}}</a>
+					{{end}}
+					<a class="btn interact-bg tw-p-2" href="{{if $.FileName}}{{printf "%s/src/commit/%s/%s" $commitRepoLink (PathEscape .ID.String) (PathEscapeSegments $.FileName)}}{{else}}{{printf "%s/src/commit/%s" $commitRepoLink (PathEscape .ID.String)}}{{end}}">{{svg "octicon-file-code"}}</a>
+				{{end}}
+			</div>
+		</div>
+	{{end}}
+	</div></div> <!-- Final group close -->
+</div>