diff --git a/appview/pages/pages.go b/appview/pages/pages.go
index 6f32e5a8..c46691b0 100644
--- a/appview/pages/pages.go
+++ b/appview/pages/pages.go
@@ -15,6 +15,7 @@ import (
 	"path/filepath"
 	"strings"
 	"sync"
+	"time"
 
 	"tangled.org/core/api/tangled"
 	"tangled.org/core/appview/commitverify"
@@ -1361,12 +1362,23 @@ type LogBlockParams struct {
 	Name      string
 	Command   string
 	Collapsed bool
+	StartTime time.Time
 }
 
 func (p *Pages) LogBlock(w io.Writer, params LogBlockParams) error {
 	return p.executePlain("repo/pipelines/fragments/logBlock", w, params)
 }
 
+type LogBlockEndParams struct {
+	Id        int
+	StartTime time.Time
+	EndTime   time.Time
+}
+
+func (p *Pages) LogBlockEnd(w io.Writer, params LogBlockEndParams) error {
+	return p.executePlain("repo/pipelines/fragments/logBlockEnd", w, params)
+}
+
 type LogLineParams struct {
 	Id      int
 	Content string
diff --git a/appview/pages/templates/fragments/workflow-timers.html b/appview/pages/templates/fragments/workflow-timers.html
new file mode 100644
index 00000000..0fdae0a9
--- /dev/null
+++ b/appview/pages/templates/fragments/workflow-timers.html
@@ -0,0 +1,36 @@
+{{ define "fragments/workflow-timers" }}
+  <script>
+    function formatElapsed(seconds) {
+      if (seconds < 1) return '0s';
+      if (seconds < 60) return `${seconds}s`;
+      const minutes = Math.floor(seconds / 60);
+      const secs = seconds % 60;
+      if (seconds < 3600) return `${minutes}m ${secs}s`;
+      const hours = Math.floor(seconds / 3600);
+      const mins = Math.floor((seconds % 3600) / 60);
+      return `${hours}h ${mins}m`;
+    }
+
+    function updateTimers() {
+      const now = Math.floor(Date.now() / 1000);
+
+      document.querySelectorAll('[data-timer]').forEach(el => {
+        const startTime = parseInt(el.dataset.start);
+        const endTime = el.dataset.end ? parseInt(el.dataset.end) : null;
+
+        if (endTime) {
+          // Step is complete, show final time
+          const elapsed = endTime - startTime;
+          el.textContent = formatElapsed(elapsed);
+        } else {
+          // Step is running, update live
+          const elapsed = now - startTime;
+          el.textContent = formatElapsed(elapsed);
+        }
+      });
+    }
+
+    setInterval(updateTimers, 1000);
+    updateTimers();
+  </script>
+{{ end }}
diff --git a/appview/pages/templates/repo/pipelines/fragments/logBlock.html b/appview/pages/templates/repo/pipelines/fragments/logBlock.html
index 3e1b56df..7e118bb5 100644
--- a/appview/pages/templates/repo/pipelines/fragments/logBlock.html
+++ b/appview/pages/templates/repo/pipelines/fragments/logBlock.html
@@ -2,14 +2,15 @@
 <div id="lines" hx-swap-oob="beforeend">
   <details id="step-{{ .Id }}" {{if not .Collapsed}}open{{end}} class="group pb-2 rounded-sm border border-gray-200 dark:border-gray-700">
     <summary class="sticky top-0 pt-2 px-2 group-open:pb-2 group-open:mb-2 list-none cursor-pointer group-open:border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 hover:text-gray-500 hover:dark:text-gray-400">
-      <div class="group-open:hidden flex items-center gap-1">
-        {{ i "chevron-right" "w-4 h-4" }} {{ .Name }}
-      </div>
-      <div class="hidden group-open:flex items-center gap-1">
-        {{ i "chevron-down" "w-4 h-4" }} {{ .Name }}
-      </div>
+      <div class="group-open:hidden flex items-center gap-1">{{ template "stepHeader" . }}</div>
+      <div class="hidden group-open:flex items-center gap-1">{{ template "stepHeader" . }}</div>
     </summary>
     <div class="font-mono whitespace-pre overflow-x-auto px-2"><div class="text-blue-600 dark:text-blue-300">{{ .Command }}</div><div id="step-body-{{ .Id }}"></div></div>
   </details>
 </div>
 {{ end }}
+
+{{ define "stepHeader" }}
+ {{ i "chevron-right" "w-4 h-4" }} {{ .Name }}
+ <span class="ml-auto text-sm text-gray-500 tabular-nums" data-timer="{{ .Id }}" data-start="{{ .StartTime.Unix }}"></span>
+{{ end }}
diff --git a/appview/pages/templates/repo/pipelines/fragments/logBlockEnd.html b/appview/pages/templates/repo/pipelines/fragments/logBlockEnd.html
new file mode 100644
index 00000000..d4cce5e3
--- /dev/null
+++ b/appview/pages/templates/repo/pipelines/fragments/logBlockEnd.html
@@ -0,0 +1,9 @@
+{{ define "repo/pipelines/fragments/logBlockEnd" }}
+  <span
+    class="ml-auto text-sm text-gray-500 tabular-nums"
+    data-timer="{{ .Id }}"
+    data-start="{{ .StartTime.Unix }}"
+    data-end="{{ .EndTime.Unix }}"
+    hx-swap-oob="outerHTML:[data-timer='{{ .Id }}']"></span>
+{{ end }}
+
diff --git a/appview/pages/templates/repo/pipelines/workflow.html b/appview/pages/templates/repo/pipelines/workflow.html
index d936360d..3cf562c4 100644
--- a/appview/pages/templates/repo/pipelines/workflow.html
+++ b/appview/pages/templates/repo/pipelines/workflow.html
@@ -15,6 +15,7 @@
     {{ block "logs" . }} {{ end }}
   </div>
 </section>
+{{ template "fragments/workflow-timers" }}
 {{ end }}
 
 {{ define "sidebar" }}
diff --git a/appview/pipelines/pipelines.go b/appview/pipelines/pipelines.go
index 963bd240..c1cfb429 100644
--- a/appview/pipelines/pipelines.go
+++ b/appview/pipelines/pipelines.go
@@ -236,7 +236,7 @@ func (p *Pipelines) Logs(w http.ResponseWriter, r *http.Request) {
 	// start a goroutine to read from spindle
 	go readLogs(spindleConn, evChan)
 
-	stepIdx := 0
+	stepStartTimes := make(map[int]time.Time)
 	var fragment bytes.Buffer
 	for {
 		select {
@@ -268,22 +268,34 @@ func (p *Pipelines) Logs(w http.ResponseWriter, r *http.Request) {
 
 			switch logLine.Kind {
 			case spindlemodel.LogKindControl:
-				// control messages create a new step block
-				stepIdx++
-				collapsed := false
-				if logLine.StepKind == spindlemodel.StepKindSystem {
-					collapsed = true
+				switch logLine.StepStatus {
+				case spindlemodel.StepStatusStart:
+					stepStartTimes[logLine.StepId] = logLine.Time
+					collapsed := false
+					if logLine.StepKind == spindlemodel.StepKindSystem {
+						collapsed = true
+					}
+					err = p.pages.LogBlock(&fragment, pages.LogBlockParams{
+						Id:        logLine.StepId,
+						Name:      logLine.Content,
+						Command:   logLine.StepCommand,
+						Collapsed: collapsed,
+						StartTime: logLine.Time,
+					})
+				case spindlemodel.StepStatusEnd:
+					startTime := stepStartTimes[logLine.StepId]
+					endTime := logLine.Time
+					err = p.pages.LogBlockEnd(&fragment, pages.LogBlockEndParams{
+						Id:        logLine.StepId,
+						StartTime: startTime,
+						EndTime:   endTime,
+					})
 				}
-				err = p.pages.LogBlock(&fragment, pages.LogBlockParams{
-					Id:        stepIdx,
-					Name:      logLine.Content,
-					Command:   logLine.StepCommand,
-					Collapsed: collapsed,
-				})
+
 			case spindlemodel.LogKindData:
 				// data messages simply insert new log lines into current step
 				err = p.pages.LogLine(&fragment, pages.LogLineParams{
-					Id:      stepIdx,
+					Id:      logLine.StepId,
 					Content: logLine.Content,
 				})
 			}