diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index 600f8d608636b..781a9a605e2c7 100644
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@@ -880,6 +880,7 @@ visibility.private = Private
 visibility.private_tooltip = Visible only to organization members
 
 [repo]
+user_committed_date = %s committed %s
 new_repo_helper = A repository contains all project files, including revision history.  Already have it elsewhere? <a href="%s">Migrate repository.</a>
 owner = Owner
 owner_helper = Some organizations may not show up in the dropdown due to a maximum repository count limit.
diff --git a/templates/repo/commits_list.tmpl b/templates/repo/commits_list.tmpl
index 36333c554079c..0a17549d27c54 100644
--- a/templates/repo/commits_list.tmpl
+++ b/templates/repo/commits_list.tmpl
@@ -1,87 +1,74 @@
-<div class="ui attached table segment commit-table">
-		<table class="ui very basic striped table unstackable fixed" id="commits-table">
-			<thead>
-				<tr>
-					<th class="three wide">{{.locale.Tr "repo.commits.author"}}</th>
-					<th class="two wide sha">SHA1</th>
-					<th class="nine wide message">{{.locale.Tr "repo.commits.message"}}</th>
-					<th class="two wide right aligned">{{.locale.Tr "repo.commits.date"}}</th>
-				</tr>
-			</thead>
-			<tbody class="commit-list">
-				{{$commitRepoLink := $.RepoLink}}{{if $.CommitRepoLink}}{{$commitRepoLink = $.CommitRepoLink}}{{end}}
-				{{range .Commits}}
-					<tr>
-						<td class="author">
-							{{$userName := .Author.Name}}
-							{{if .User}}
-								{{if .User.FullName}}
-									{{$userName = .User.FullName}}
-								{{end}}
-								{{avatar $.Context .User 28 "gt-mr-2"}}<a href="{{.User.HomeLink}}">{{$userName}}</a>
+<div class="ui attached table segment commits-list">
+	{{$commitRepoLink := $.RepoLink}}{{if $.CommitRepoLink}}{{$commitRepoLink = $.CommitRepoLink}}{{end}}
+	{{range .Commits}}
+		<div class="commits-list-row gt-df gt-ac gt-px-4 gt-py-2">
+			<div class="commits-list-left gt-df gt-fc gt-f1">
+				<div class="commits-list-top-row">
+					<span class="message-wrapper">
+					{{if $.PageIsWiki}}
+						<span class="commit-summary {{if gt .ParentCount 1}} grey text{{end}}" title="{{.Summary}}">{{.Summary | RenderEmoji $.Context}}</span>
+					{{else}}
+						{{$commitLink:= printf "%s/commit/%s" $commitRepoLink (PathEscape .ID.String)}}
+						<span class="commit-summary {{if gt .ParentCount 1}} grey text{{end}}" title="{{.Summary}}">{{RenderCommitMessageLinkSubject $.Context .Message $commitRepoLink $commitLink $.Repository.ComposeMetas}}</span>
+					{{end}}
+					</span>
+					{{if IsMultilineCommitMessage .Message}}
+						<button class="ui button ellipsis-button" aria-expanded="false">...</button>
+					{{end}}
+					{{template "repo/commit_statuses" dict "Status" .Status "Statuses" .Statuses "root" $}}
+					{{if IsMultilineCommitMessage .Message}}
+						<pre class="commit-body gt-hidden">{{RenderCommitBody $.Context .Message $commitRepoLink $.Repository.ComposeMetas}}</pre>
+					{{end}}
+				</div>
+				<div class="commits-list-bottom-row gt-df gt-ac gt-fw gt-my-1">
+					{{if .User}}
+						{{avatar $.Context .User 16 "gt-mr-2"}}
+					{{else}}
+						{{avatarByEmail $.Context .Author.Email .Author.Name 16 "gt-mr-2"}}
+					{{end}}
+					<div class="gt-dib">
+						{{$.locale.Tr "repo.user_committed_date"
+							(printf "<a href='%s'>%s</a>" (.User.HomeLink | Escape) (.Author.Name | Escape))
+							(TimeSince .Committer.When $.locale) | Safe}}
+					</div>
+				</div>
+			</div>
+			<div class="commits-list-right gt-df gt-ac">
+				<div class="sha gt-df">
+					<button class="ui button copy-commit-sha gt-df gt-ac" data-clipboard-text="{{.ID}}">{{svg "octicon-copy" 14}}</button>
+					{{$class := "ui sha label"}}
+					{{if .Signature}}
+						{{$class = (printf "%s%s" $class " isSigned")}}
+						{{if .Verification.Verified}}
+							{{if eq .Verification.TrustStatus "trusted"}}
+								{{$class = (printf "%s%s" $class " isVerified")}}
+							{{else if eq .Verification.TrustStatus "untrusted"}}
+								{{$class = (printf "%s%s" $class " isVerifiedUntrusted")}}
 							{{else}}
-								{{avatarByEmail $.Context .Author.Email .Author.Name 28 "gt-mr-2"}}
-								{{$userName}}
+								{{$class = (printf "%s%s" $class " isVerifiedUnmatched")}}
 							{{end}}
-						</td>
-						<td class="sha gt-df">
-							<button class="ui button copy-commit-sha gt-df gt-ac" data-clipboard-text="{{.ID}}">{{svg "octicon-copy" 14}}</button>
-							{{$class := "ui sha label"}}
-							{{if .Signature}}
-								{{$class = (printf "%s%s" $class " isSigned")}}
-								{{if .Verification.Verified}}
-									{{if eq .Verification.TrustStatus "trusted"}}
-										{{$class = (printf "%s%s" $class " isVerified")}}
-									{{else if eq .Verification.TrustStatus "untrusted"}}
-										{{$class = (printf "%s%s" $class " isVerifiedUntrusted")}}
-									{{else}}
-										{{$class = (printf "%s%s" $class " isVerifiedUnmatched")}}
-									{{end}}
-								{{else if .Verification.Warning}}
-									{{$class = (printf "%s%s" $class " isWarning")}}
-								{{end}}
-							{{end}}
-							{{if $.PageIsWiki}}
-								<a href="{{$commitRepoLink}}/wiki/commit/{{.ID}}" rel="nofollow" class="{{$class}}">
-							{{else if $.Reponame}}
-								<a href="{{$commitRepoLink}}/commit/{{.ID}}" rel="nofollow" class="{{$class}}">
-							{{else}}
-								<span class="{{$class}}">
-							{{end}}
-								<span class="shortsha">{{ShortSha .ID.String}}</span>
-								{{if .Signature}}
-									{{template "repo/shabox_badge" dict "root" $ "verification" .Verification}}
-								{{end}}
-							{{if $.Reponame}}
-								</a>
-							{{else}}
-								</span>
-							{{end}}
-						</td>
-						<td class="message">
-							<span class="message-wrapper">
-							{{if $.PageIsWiki}}
-								<span class="commit-summary {{if gt .ParentCount 1}} grey text{{end}}" title="{{.Summary}}">{{.Summary | RenderEmoji $.Context}}</span>
-							{{else}}
-								{{$commitLink:= printf "%s/commit/%s" $commitRepoLink (PathEscape .ID.String)}}
-								<span class="commit-summary {{if gt .ParentCount 1}} grey text{{end}}" title="{{.Summary}}">{{RenderCommitMessageLinkSubject $.Context .Message $commitRepoLink $commitLink $.Repository.ComposeMetas}}</span>
-							{{end}}
-							</span>
-							{{if IsMultilineCommitMessage .Message}}
-							<button class="ui button ellipsis-button" aria-expanded="false">...</button>
-							{{end}}
-							{{template "repo/commit_statuses" dict "Status" .Status "Statuses" .Statuses "root" $}}
-							{{if IsMultilineCommitMessage .Message}}
-							<pre class="commit-body gt-hidden">{{RenderCommitBody $.Context .Message $commitRepoLink $.Repository.ComposeMetas}}</pre>
-							{{end}}
-						</td>
-						{{if .Committer}}
-							<td class="text right aligned">{{TimeSince .Committer.When $.locale}}</td>
-						{{else}}
-							<td class="text right aligned">{{TimeSince .Author.When $.locale}}</td>
+						{{else if .Verification.Warning}}
+							{{$class = (printf "%s%s" $class " isWarning")}}
+						{{end}}
+					{{end}}
+					{{if $.PageIsWiki}}
+						<a href="{{$commitRepoLink}}/wiki/commit/{{.ID}}" rel="nofollow" class="{{$class}}">
+					{{else if $.Reponame}}
+						<a href="{{$commitRepoLink}}/commit/{{.ID}}" rel="nofollow" class="{{$class}}">
+					{{else}}
+						<span class="{{$class}}">
+					{{end}}
+						<span class="shortsha">{{ShortSha .ID.String}}</span>
+						{{if .Signature}}
+							{{template "repo/shabox_badge" dict "root" $ "verification" .Verification}}
 						{{end}}
-					</tr>
-				{{end}}
-			</tbody>
-		</table>
-	</div>
+					{{if $.Reponame}}
+						</a>
+					{{else}}
+						</span>
+					{{end}}
+				</div>
+			</div>
+		</div>
+	{{end}}
+</div>
diff --git a/web_src/css/repository.css b/web_src/css/repository.css
index 32ff51c920e08..95ffc4700b1d6 100644
--- a/web_src/css/repository.css
+++ b/web_src/css/repository.css
@@ -1338,50 +1338,17 @@
   padding: 5px 10px;
 }
 
-.repository #commits-table thead th:first-of-type {
-  padding-left: 15px;
-}
-
-.repository #commits-table thead .sha {
-  width: 200px;
-}
-
-.repository #commits-table thead .shatd {
-  text-align: center;
-}
-
-.repository #commits-table td.sha .sha.label {
-  margin: 0;
-}
-
-.repository #commits-table td.message {
-  text-overflow: unset;
-}
-
-.repository #commits-table.ui.basic.striped.table tbody tr:nth-child(2n) {
-  background-color: rgba(0, 0, 0, 0.02) !important;
-}
-
-.repository #commits-table td.sha .sha.label,
-.repository #repo-files-table .sha.label,
-.repository #rev-list .sha.label,
-.repository .timeline-item.commits-list .singular-commit .sha.label {
+.sha.label {
   border: 1px solid var(--color-light-border);
 }
 
-.repository #commits-table td.sha .sha.label .ui.signature.avatar,
-.repository #repo-files-table .sha.label .ui.signature.avatar,
-.repository #rev-list .sha.label .ui.signature.avatar,
-.repository .timeline-item.commits-list .singular-commit .sha.label .ui.signature.avatar {
+.sha.label .ui.signature.avatar {
   height: 16px;
   margin-bottom: 0;
   width: 16px;
 }
 
-.repository #commits-table td.sha .sha.label .detail.icon,
-.repository #repo-files-table .sha.label .detail.icon,
-.repository #rev-list .sha.label .detail.icon,
-.repository .timeline-item.commits-list .singular-commit .sha.label .detail.icon {
+.sha.label .detail.icon {
   background: var(--color-light);
   margin: -6px -10px -4px 0;
   padding: 5px 4px 5px 6px;
@@ -1393,149 +1360,92 @@
   border-bottom-left-radius: 0;
 }
 
-.repository #commits-table td.sha .sha.label .detail.icon img,
-.repository #repo-files-table .sha.label .detail.icon img,
-.repository #rev-list .sha.label .detail.icon img,
-.repository .timeline-item.commits-list .singular-commit .sha.label .detail.icon img {
+.sha.label .detail.icon img {
   margin-right: 0;
 }
 
-.repository #commits-table td.sha .sha.label .detail.icon .svg,
-.repository #repo-files-table .sha.label .detail.icon .svg,
-.repository #rev-list .sha.label .detail.icon .svg,
-.repository .timeline-item.commits-list .singular-commit .sha.label .detail.icon .svg {
+.sha.label .detail.icon .svg {
   margin: 0 0.25em 0 0;
 }
 
-.repository #commits-table td.sha .sha.label .detail.icon > div,
-.repository #repo-files-table .sha.label .detail.icon > div,
-.repository #rev-list .sha.label .detail.icon > div,
-.repository .timeline-item.commits-list .singular-commit .sha.label .detail.icon > div {
+.sha.label .detail.icon > div {
   display: flex;
   align-items: center;
 }
 
-.repository #commits-table td.sha .sha.label.isSigned.isWarning,
-.repository #repo-files-table .sha.label.isSigned.isWarning,
-.repository #rev-list .sha.label.isSigned.isWarning,
-.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isWarning {
+.sha.label.isSigned.isWarning {
   border: 1px solid var(--color-red-badge);
   background: var(--color-red-badge-bg);
 }
 
-.repository #commits-table td.sha .sha.label.isSigned.isWarning .shortsha,
-.repository #repo-files-table .sha.label.isSigned.isWarning .shortsha,
-.repository #rev-list .sha.label.isSigned.isWarning .shortsha,
-.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isWarning .shortsha {
+.sha.label.isSigned.isWarning .shortsha {
   display: inline-block;
   padding-top: 1px;
 }
 
-.repository #commits-table td.sha .sha.label.isSigned.isWarning .detail.icon,
-.repository #repo-files-table .sha.label.isSigned.isWarning .detail.icon,
-.repository #rev-list .sha.label.isSigned.isWarning .detail.icon,
-.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isWarning .detail.icon {
+.sha.label.isSigned.isWarning .detail.icon {
   border-left: 1px solid var(--color-red-badge);
   color: var(--color-red-badge);
 }
 
-.repository #commits-table td.sha .sha.label.isSigned.isWarning:hover,
-.repository #repo-files-table .sha.label.isSigned.isWarning:hover,
-.repository #rev-list .sha.label.isSigned.isWarning:hover,
-.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isWarning:hover {
+.sha.label.isSigned.isWarning:hover {
   background: var(--color-red-badge-hover-bg) !important;
 }
 
-.repository #commits-table td.sha .sha.label.isSigned.isVerified,
-.repository #repo-files-table .sha.label.isSigned.isVerified,
-.repository #rev-list .sha.label.isSigned.isVerified,
-.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerified {
+.sha.label.isSigned.isVerified {
   border: 1px solid var(--color-green-badge);
   background: var(--color-green-badge-bg);
 }
 
-.repository #commits-table td.sha .sha.label.isSigned.isVerified .shortsha,
-.repository #repo-files-table .sha.label.isSigned.isVerified .shortsha,
-.repository #rev-list .sha.label.isSigned.isVerified .shortsha,
-.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerified .shortsha {
+.sha.label.isSigned.isVerified .shortsha {
   display: inline-block;
   padding-top: 1px;
 }
 
-.repository #commits-table td.sha .sha.label.isSigned.isVerified .detail.icon,
-.repository #repo-files-table .sha.label.isSigned.isVerified .detail.icon,
-.repository #rev-list .sha.label.isSigned.isVerified .detail.icon,
-.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerified .detail.icon {
+.sha.label.isSigned.isVerified .detail.icon {
   border-left: 1px solid var(--color-green-badge);
   color: var(--color-green-badge);
 }
 
-.repository #commits-table td.sha .sha.label.isSigned.isVerified:hover,
-.repository #repo-files-table .sha.label.isSigned.isVerified:hover,
-.repository #rev-list .sha.label.isSigned.isVerified:hover,
-.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerified:hover {
+.sha.label.isSigned.isVerified:hover {
   background: var(--color-green-badge-hover-bg) !important;
 }
 
-.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUntrusted,
-.repository #repo-files-table .sha.label.isSigned.isVerifiedUntrusted,
-.repository #rev-list .sha.label.isSigned.isVerifiedUntrusted,
-.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUntrusted {
+.sha.label.isSigned.isVerifiedUntrusted {
   border: 1px solid var(--color-yellow-badge);
   background: var(--color-yellow-badge-bg);
 }
 
-.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUntrusted .shortsha,
-.repository #repo-files-table .sha.label.isSigned.isVerifiedUntrusted .shortsha,
-.repository #rev-list .sha.label.isSigned.isVerifiedUntrusted .shortsha,
-.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUntrusted .shortsha {
+.sha.label.isSigned.isVerifiedUntrusted .shortsha {
   display: inline-block;
   padding-top: 1px;
 }
 
-.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUntrusted .detail.icon,
-.repository #repo-files-table .sha.label.isSigned.isVerifiedUntrusted .detail.icon,
-.repository #rev-list .sha.label.isSigned.isVerifiedUntrusted .detail.icon,
-.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUntrusted .detail.icon {
+.sha.label.isSigned.isVerifiedUntrusted .detail.icon {
   border-left: 1px solid var(--color-yellow-badge);
   color: var(--color-yellow-badge);
 }
 
-.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUntrusted:hover,
-.repository #repo-files-table .sha.label.isSigned.isVerifiedUntrusted:hover,
-.repository #rev-list .sha.label.isSigned.isVerifiedUntrusted:hover,
-.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUntrusted:hover {
+.sha.label.isSigned.isVerifiedUntrusted:hover {
   background: var(--color-yellow-badge-hover-bg) !important;
 }
 
-.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUnmatched,
-.repository #repo-files-table .sha.label.isSigned.isVerifiedUnmatched,
-.repository #rev-list .sha.label.isSigned.isVerifiedUnmatched,
-.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUnmatched {
+.sha.label.isSigned.isVerifiedUnmatched {
   border: 1px solid var(--color-orange-badge);
   background: var(--color-orange-badge-bg);
 }
 
-.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUnmatched .shortsha,
-.repository #repo-files-table .sha.label.isSigned.isVerifiedUnmatched .shortsha,
-.repository #rev-list .sha.label.isSigned.isVerifiedUnmatched .shortsha,
-.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUnmatched .shortsha {
+.sha.label.isSigned.isVerifiedUnmatched .shortsha {
   display: inline-block;
   padding-top: 1px;
 }
 
-.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUnmatched .detail.icon,
-.repository #repo-files-table .sha.label.isSigned.isVerifiedUnmatched .detail.icon,
-.repository #rev-list .sha.label.isSigned.isVerifiedUnmatched .detail.icon,
-.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUnmatched .detail.icon {
+.sha.label.isSigned.isVerifiedUnmatched .detail.icon {
   border-left: 1px solid var(--color-orange-badge);
   color: var(--color-orange-badge);
 }
 
-.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUnmatched:hover,
-.repository #repo-files-table .sha.label.isSigned.isVerifiedUnmatched:hover,
-.repository #rev-list .sha.label.isSigned.isVerifiedUnmatched:hover,
-.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUnmatched:hover {
+.sha.label.isSigned.isVerifiedUnmatched:hover {
   background: var(--color-orange-badge-hover-bg) !important;
 }
 
@@ -3353,27 +3263,6 @@ td.blob-excerpt {
     order: 2;
     margin-left: 0.25rem;
   }
-  .commit-table {
-    overflow-x: auto;
-  }
-  .commit-table td.sha,
-  .commit-table th.sha {
-    display: none !important;
-  }
-  .commit-table .commit-list span.message-wrapper {
-    max-width: none;
-  }
-  .commit-table .commit-list tr td:last-child {
-    display: block;
-    width: max-content;
-  }
-  .commit-table .commit-list td.author {
-    display: block;
-    width: calc(100% + 0.5rem);
-  }
-  .commit-table .commit-list .copy-commit-sha {
-    display: none !important;
-  }
   .comment-header {
     flex-wrap: wrap;
   }
@@ -3385,6 +3274,15 @@ td.blob-excerpt {
   }
 }
 
+.commits-list-top-row {
+  font-size: 15px;
+}
+
+.commits-list-bottom-row {
+  font-size: 13px;
+  color: var(--color-text-light-2);
+}
+
 .branch-dropdown-button {
   max-width: 340px;
   vertical-align: bottom !important;