diff --git a/templates/repo/graph/commits.tmpl b/templates/repo/graph/commits.tmpl
index 3901b125a3f0..108aa0aa04a5 100644
--- a/templates/repo/graph/commits.tmpl
+++ b/templates/repo/graph/commits.tmpl
@@ -28,40 +28,40 @@
 							{{- end -}}
 						</a>
 					</span>
-					{{range $commit.Refs}}
-						{{$refGroup := .RefGroup}}
-						{{if eq $refGroup "pull"}}
-							{{if $.HidePRRefs}}
-								{{if (containGeneric $.SelectedBranches .Name) }}
+					<span class="message df ac mr-2">{{RenderCommitMessage $commit.Subject $.RepoLink $.Repository.ComposeMetas}}</span>
+					<span class="tags df ac">
+						{{range $commit.Refs}}
+							{{$refGroup := .RefGroup}}
+							{{if eq $refGroup "pull"}}
+								{{if $.HidePRRefs}}
+									{{if (containGeneric $.SelectedBranches .Name) }}
+										<a class="ui labelled icon button basic tiny" href="{{$.RepoLink}}/pulls/{{.ShortName|PathEscape}}">
+											{{svg "octicon-git-pull-request" 16 "mr-2"}}#{{.ShortName}}
+										</a>
+									{{end}}
+								{{else}}
 									<a class="ui labelled icon button basic tiny" href="{{$.RepoLink}}/pulls/{{.ShortName|PathEscape}}">
 										{{svg "octicon-git-pull-request" 16 "mr-2"}}#{{.ShortName}}
 									</a>
 								{{end}}
-							{{else}}
-								<a class="ui labelled icon button basic tiny" href="{{$.RepoLink}}/pulls/{{.ShortName|PathEscape}}">
-									{{svg "octicon-git-pull-request" 16 "mr-2"}}#{{.ShortName}}
+							{{else if eq $refGroup "tags"}}
+								<a class="ui labelled icon button basic tiny" href="{{$.RepoLink}}/src/tag/{{.ShortName|PathEscape}}">
+									{{svg "octicon-tag" 16 "mr-2"}}{{.ShortName}}
+								</a>
+							{{else if eq $refGroup "remotes"}}
+								<a class="ui labelled icon button basic tiny" href="{{$.RepoLink}}/src/commit/{{$commit.Rev}}">
+									{{svg "octicon-cross-reference" 16 "mr-2"}}{{.ShortName}}
+								</a>
+							{{else if eq $refGroup "heads"}}
+								<a class="ui labelled icon button basic tiny" href="{{$.RepoLink}}/src/branch/{{.ShortName|PathEscape}}">
+									{{svg "octicon-git-branch" 16 "mr-2"}}{{.ShortName}}
 								</a>
+							{{else}}
+								<!-- Unknown ref type {{.Name}} -->
 							{{end}}
-						{{else if eq $refGroup "tags"}}
-							<a class="ui labelled icon button basic tiny" href="{{$.RepoLink}}/src/tag/{{.ShortName|PathEscape}}">
-								{{svg "octicon-tag" 16 "mr-2"}}{{.ShortName}}
-							</a>
-						{{else if eq $refGroup "remotes"}}
-							<a class="ui labelled icon button basic tiny" href="{{$.RepoLink}}/src/commit/{{$commit.Rev}}">
-								{{svg "octicon-cross-reference" 16 "mr-2"}}{{.ShortName}}
-							</a>
-						{{else if eq $refGroup "heads"}}
-							<a class="ui labelled icon button basic tiny" href="{{$.RepoLink}}/src/branch/{{.ShortName|PathEscape}}">
-								{{svg "octicon-git-branch" 16 "mr-2"}}{{.ShortName}}
-							</a>
-						{{else}}
-							<!-- Unknown ref type {{.Name}} -->
 						{{end}}
-					{{end}}
-					—
-					<span>{{RenderCommitMessage $commit.Subject $.RepoLink $.Repository.ComposeMetas}}</span>
-					—
-					<span class="author">
+					</span>
+					<span class="author df ac mr-2">
 						{{$userName := $commit.Commit.Author.Name}}
 						{{if $commit.User}}
 							{{if $commit.User.FullName}}
@@ -72,7 +72,7 @@
 							<img class="ui avatar image" src="{{AvatarLink $commit.Commit.Author.Email}}" alt=""/>{{$userName}}
 						{{end}}
 					</span>
-					<span class="time">{{$commit.Date}}</span>
+					<span class="time df ac">{{$commit.Date}}</span>
 				{{ end }}
 			</li>
 		{{ end }}
diff --git a/web_src/less/features/gitgraph.less b/web_src/less/features/gitgraph.less
index 9c1f026e5ff7..b2d0167ad268 100644
--- a/web_src/less/features/gitgraph.less
+++ b/web_src/less/features/gitgraph.less
@@ -64,6 +64,8 @@
     height: 24px;
     line-height: 24px;
     white-space: nowrap;
+    display: flex;
+    align-items: center;
 
     .node-relation {
       font-family: "Bitstream Vera Sans Mono", "Courier", monospace;
@@ -78,10 +80,6 @@
       font-size: 80%;
     }
 
-    a {
-      color: #000000;
-    }
-
     a:hover {
       text-decoration: underline;
     }
@@ -106,23 +104,15 @@
 
   #rev-list {
     margin: 0;
-    padding: 0 5px;
-    min-width: 95%;
-
-    li.highlight,
-    li.hover {
-      background-color: rgba(0, 0, 0, .05);
-    }
+    padding: 0;
+    width: 100%;
 
     li.highlight.hover {
-      background-color: rgba(0, 0, 0, .1);
+      background-color: rgba(0, 0, 0, .05);
     }
 
-    li a.button {
-      padding-top: 2px;
-      padding-bottom: 2px;
-      vertical-align: top;
-      margin-top: 2px;
+    .tags a.button {
+      padding: 2px 4px;
     }
 
     .sha.label {
diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index 4a7c524bc9e5..14c8f63489c9 100644
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -1782,22 +1782,6 @@ a.ui.labels .label:hover {
   background-color: #a27558;
 }
 
-#git-graph-container li a.sha {
-  color: #dbdbdb;
-}
-
-#git-graph-container li a {
-  color: #c79575;
-}
-
-#git-graph-container li.highlight a.ui.labelled {
-  border: 1px solid #999999;
-}
-
-#git-graph-container li .author {
-  color: #c79575;
-}
-
 .ui.header .sub.header {
   color: #9e9e9e;
 }
@@ -2142,6 +2126,10 @@ img[src$="/img/matrix.svg"] {
   filter: invert(80%);
 }
 
+#git-graph-container li .time {
+  color: #6a737d;
+}
+
 #git-graph-container.monochrome #rel-container .flow-group {
   stroke: dimgrey;
   fill: dimgrey;
@@ -2166,11 +2154,6 @@ img[src$="/img/matrix.svg"] {
   }
 }
 
-#git-graph-container #rev-list li.highlight,
-#git-graph-container #rev-list li.hover {
-  background-color: rgba(255, 255, 255, .05);
-}
-
 #git-graph-container #rev-list li.highlight.hover {
   background-color: rgba(255, 255, 255, .1);
 }