diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index ee8b4880029a9..ab2b1955f55e2 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -40,9 +40,10 @@ async function deleteArtifact(name: string) {
   <!-- make the view container full width to make users easier to read logs -->
   <div class="ui fluid container">
     <div class="action-view-header">
+      <a class="action-view-back" :href="run.workflowLink"><SvgIcon name="octicon-arrow-left"/> {{ run.workflowID.replace(/\.(yml|yaml)$/i, '') }}</a>
       <div class="action-info-summary">
         <div class="action-info-summary-title">
-          <ActionRunStatus :locale-status="locale.status[run.status]" :status="run.status" :size="20"/>
+          <ActionRunStatus :locale-status="locale.status[run.status]" :status="run.status" :size="22"/>
           <!-- eslint-disable-next-line vue/no-v-html -->
           <h2 class="action-info-summary-title-text" v-html="run.titleHTML"/>
         </div>
@@ -74,7 +75,7 @@ async function deleteArtifact(name: string) {
         </div>
       </div>
       <div class="action-commit-summary">
-        <span><a class="muted" :href="run.workflowLink"><b>{{ run.workflowID }}</b></a>:</span>
+        <span><a class="muted" :href="`${run.link}/workflow`"><b>{{ run.workflowID }}</b></a>:</span>
         <template v-if="run.isSchedule">
           {{ locale.scheduled }}
         </template>
@@ -180,7 +181,17 @@ async function deleteArtifact(name: string) {
 /* action view header */
 
 .action-view-header {
-  margin-top: 8px;
+  display: flex;
+  flex-direction: column;
+  margin-top: -7px;
+}
+
+.action-view-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 14px;
+  color: var(--color-text-light-1);
 }
 
 .action-info-summary {
@@ -213,8 +224,9 @@ async function deleteArtifact(name: string) {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
+  line-height: normal;
   gap: 5px;
-  margin-left: 28px;
+  margin-left: 30px;
 }
 
 @media (max-width: 767.98px) {
diff --git a/web_src/js/svg.ts b/web_src/js/svg.ts
index 60c1c763d6540..288c0481878da 100644
--- a/web_src/js/svg.ts
+++ b/web_src/js/svg.ts
@@ -7,6 +7,7 @@ import giteaEmptyCheckbox from '../../public/assets/img/svg/gitea-empty-checkbox
 import giteaExclamation from '../../public/assets/img/svg/gitea-exclamation.svg';
 import giteaRunning from '../../public/assets/img/svg/gitea-running.svg';
 import octiconArchive from '../../public/assets/img/svg/octicon-archive.svg';
+import octiconArrowLeft from '../../public/assets/img/svg/octicon-arrow-left.svg';
 import octiconArrowSwitch from '../../public/assets/img/svg/octicon-arrow-switch.svg';
 import octiconBlocked from '../../public/assets/img/svg/octicon-blocked.svg';
 import octiconBold from '../../public/assets/img/svg/octicon-bold.svg';
@@ -91,6 +92,7 @@ const svgs = {
   'gitea-exclamation': giteaExclamation,
   'gitea-running': giteaRunning,
   'octicon-archive': octiconArchive,
+  'octicon-arrow-left': octiconArrowLeft,
   'octicon-arrow-switch': octiconArrowSwitch,
   'octicon-blocked': octiconBlocked,
   'octicon-bold': octiconBold,