diff --git a/web/src/assets/locales/en.json b/web/src/assets/locales/en.json
index abdc6a09c..cc983c5c6 100644
--- a/web/src/assets/locales/en.json
+++ b/web/src/assets/locales/en.json
@@ -262,7 +262,7 @@
       "warnings": "Warnings",
       "show_errors": "Show errors",
       "we_got_some_errors": "Oh no, an error occurred!",
-      "duration": "Pipeline duration",
+      "duration": "Pipeline duration: {duration}",
       "created": "Created: {created}",
       "debug": {
         "title": "Debug",
diff --git a/web/src/components/repo/pipeline/PipelineItem.vue b/web/src/components/repo/pipeline/PipelineItem.vue
index 2f4014118..6e1f96ef0 100644
--- a/web/src/components/repo/pipeline/PipelineItem.vue
+++ b/web/src/components/repo/pipeline/PipelineItem.vue
@@ -57,7 +57,7 @@
           <span class="truncate">{{ pipeline.commit.slice(0, 10) }}</span>
         </div>
 
-        <div class="flex min-w-0 items-center space-x-2" :title="$t('repo.pipeline.duration')">
+        <div class="flex min-w-0 items-center space-x-2" :title="durationElapsed > 0 ? $t('repo.pipeline.duration', { duration: durationAsNumber(durationElapsed) }) : ''">
           <Icon name="duration" />
           <span class="truncate">{{ duration }}</span>
         </div>
@@ -80,6 +80,7 @@ import ListItem from '~/components/atomic/ListItem.vue';
 import { pipelineStatusColors } from '~/components/repo/pipeline/pipeline-status';
 import PipelineRunningIcon from '~/components/repo/pipeline/PipelineRunningIcon.vue';
 import PipelineStatusIcon from '~/components/repo/pipeline/PipelineStatusIcon.vue';
+import { useDate } from '~/compositions/useDate';
 import usePipeline from '~/compositions/usePipeline';
 import type { Pipeline } from '~/lib/api/types';
 
@@ -88,9 +89,10 @@ const props = defineProps<{
 }>();
 
 const { t } = useI18n();
+const { durationAsNumber } = useDate()
 
 const pipeline = toRef(props, 'pipeline');
-const { since, duration, message, shortMessage, prettyRef, created } = usePipeline(pipeline);
+const { since, duration, durationElapsed, message, shortMessage, prettyRef, created } = usePipeline(pipeline);
 
 const pipelineEventTitle = computed(() => {
   switch (pipeline.value.event) {
diff --git a/web/src/compositions/usePipeline.ts b/web/src/compositions/usePipeline.ts
index 27a158c71..ba34c3a15 100644
--- a/web/src/compositions/usePipeline.ts
+++ b/web/src/compositions/usePipeline.ts
@@ -115,5 +115,5 @@ export default (pipeline: Ref<Pipeline | undefined>) => {
     return toLocaleString(new Date(start * 1000));
   });
 
-  return { since, duration, message, shortMessage, prTitle, prTitleWithDescription, prettyRef, created };
+  return { since, duration, durationElapsed, message, shortMessage, prTitle, prTitleWithDescription, prettyRef, created };
 };
diff --git a/web/src/views/repo/pipeline/PipelineWrapper.vue b/web/src/views/repo/pipeline/PipelineWrapper.vue
index feb25bb3b..30709d71a 100644
--- a/web/src/views/repo/pipeline/PipelineWrapper.vue
+++ b/web/src/views/repo/pipeline/PipelineWrapper.vue
@@ -66,7 +66,7 @@
           <Icon name="since" />
           <span>{{ since }}</span>
         </div>
-        <div class="flex shrink-0 items-center gap-2" :title="$t('repo.pipeline.duration')">
+        <div class="flex shrink-0 items-center gap-2" :title="durationElapsed > 0 ? $t('repo.pipeline.duration', { duration: durationAsNumber(durationElapsed) }) : ''">
           <Icon name="duration" />
           <span>{{ duration }}</span>
         </div>
@@ -115,6 +115,7 @@ import Tab from '~/components/layout/scaffold/Tab.vue';
 import PipelineStatusIcon from '~/components/repo/pipeline/PipelineStatusIcon.vue';
 import useApiClient from '~/compositions/useApiClient';
 import { useAsyncAction } from '~/compositions/useAsyncAction';
+import { useDate } from '~/compositions/useDate';
 import { useFavicon } from '~/compositions/useFavicon';
 import { provide, requiredInject } from '~/compositions/useInjectProvide';
 import useNotifications from '~/compositions/useNotifications';
@@ -136,6 +137,7 @@ const favicon = useFavicon();
 const i18n = useI18n();
 
 const pipelineStore = usePipelineStore();
+const { durationAsNumber } = useDate()
 const pipelineId = toRef(props, 'pipelineId');
 const _repoId = toRef(props, 'repoId');
 const repositoryId = computed(() => Number.parseInt(_repoId.value, 10));
@@ -143,7 +145,7 @@ const repo = requiredInject('repo');
 const repoPermissions = requiredInject('repo-permissions');
 
 const pipeline = pipelineStore.getPipeline(repositoryId, pipelineId);
-const { since, duration, created, message, shortMessage } = usePipeline(pipeline);
+const { since, duration, durationElapsed, created, message, shortMessage } = usePipeline(pipeline);
 provide('pipeline', pipeline as Ref<Pipeline>); // can't be undefined because of v-if in template
 
 const pipelineConfigs = ref<PipelineConfig[]>();