diff --git a/templates/repo/actions/runs_list.tmpl b/templates/repo/actions/runs_list.tmpl
index a28b9d7137..709bfaaced 100644
--- a/templates/repo/actions/runs_list.tmpl
+++ b/templates/repo/actions/runs_list.tmpl
@@ -1,8 +1,8 @@
 <div class="issue list">
 	{{range .Runs}}
 		<li class="item gt-df gt-py-3 gt-ab">
-			<div class="issue-item-left gt-df">
-				{{template "repo/actions/status" .Status}}
+			<div class="issue-item-left gt-df gt-mr-2">
+				{{template "repo/actions/status" (dict "status" .Status.String)}}
 			</div>
 			<div class="issue-item-main action-item-main gt-f1 gt-fc gt-df gt-mr-3">
 				<div class="issue-item-top-row">
diff --git a/templates/repo/actions/status.tmpl b/templates/repo/actions/status.tmpl
index fd8a683bda..794f7811ee 100644
--- a/templates/repo/actions/status.tmpl
+++ b/templates/repo/actions/status.tmpl
@@ -1,12 +1,26 @@
-{{if .IsWaiting}}
-	<i class="commit-status circle icon gray"></i>
-{{end}}
-{{if .IsRunning}}
-	<i class="commit-status circle icon yellow"></i>
-{{end}}
-{{if .IsSuccess}}
-	<i class="commit-status check icon green"></i>
-{{end}}
-{{if .IsFailure}}
-	<i class="commit-status warning icon red"></i>
+<!-- This template should be kept the same as web_src/js/components/ActionRunStatus.vue
+	Please also update the vue file above if this template is modified.
+-->
+{{- $size := 16 -}}
+{{- if .size -}}
+{{- $size = .size -}}
+{{- end -}}
+
+{{- $className := "" -}}
+{{- if .className -}}
+{{- $className = .className -}}
+{{- end -}}
+
+{{if eq .status "success"}}
+	{{svg "octicon-check-circle-fill" $size (printf "text green %s" $className)}}
+{{else if eq .status "skipped"}}
+	{{svg "octicon-skip" $size (printf "text grey %s" $className)}}
+{{else if eq .status "waiting"}}
+	{{svg "octicon-clock" $size (printf "text yellow %s" $className)}}
+{{else if eq .status "blocked"}}
+	{{svg "octicon-blocked" $size (printf "text yellow %s" $className)}}
+{{else if eq .status "running"}}
+	{{svg "octicon-meter" $size (printf "text yellow job-status-rotate %s" $className)}}
+{{else}}
+	{{svg "octicon-x-circle-fill" $size (printf "text red %s" $className)}}
 {{end}}
diff --git a/web_src/js/components/ActionRunStatus.vue b/web_src/js/components/ActionRunStatus.vue
index b72dfb1aa6..8a96eb5f01 100644
--- a/web_src/js/components/ActionRunStatus.vue
+++ b/web_src/js/components/ActionRunStatus.vue
@@ -1,10 +1,13 @@
+<!-- This vue should be kept the same as templates/repo/actions/status.tmpl
+    Please also update the template file above if this vue is modified.
+-->
 <template>
-  <SvgIcon name="octicon-check-circle-fill" class="ui text green" :size="size" :class-name="className" v-if="status === 'success'"/>
-  <SvgIcon name="octicon-skip" class="ui text grey" :size="size" :class-name="className" v-else-if="status === 'skipped'"/>
-  <SvgIcon name="octicon-clock" class="ui text yellow" :size="size" :class-name="className" v-else-if="status === 'waiting'"/>
-  <SvgIcon name="octicon-blocked" class="ui text yellow" :size="size" :class-name="className" v-else-if="status === 'blocked'"/>
-  <SvgIcon name="octicon-meter" class="ui text yellow" :size="size" :class-name="'job-status-rotate ' + className" v-else-if="status === 'running'"/>
-  <SvgIcon name="octicon-x-circle-fill" class="ui text red" :size="size" v-else/>
+  <SvgIcon name="octicon-check-circle-fill" class="text green" :size="size" :class-name="className" v-if="status === 'success'"/>
+  <SvgIcon name="octicon-skip" class="text grey" :size="size" :class-name="className" v-else-if="status === 'skipped'"/>
+  <SvgIcon name="octicon-clock" class="text yellow" :size="size" :class-name="className" v-else-if="status === 'waiting'"/>
+  <SvgIcon name="octicon-blocked" class="text yellow" :size="size" :class-name="className" v-else-if="status === 'blocked'"/>
+  <SvgIcon name="octicon-meter" class="text yellow" :size="size" :class-name="'job-status-rotate ' + className" v-else-if="status === 'running'"/>
+  <SvgIcon name="octicon-x-circle-fill" class="text red" :size="size" v-else/>
 </template>
 
 <script>