diff --git a/pkg/model/deployment.go b/pkg/model/deployment.go
index 4ecef40233..d3f2b7a973 100644
--- a/pkg/model/deployment.go
+++ b/pkg/model/deployment.go
@@ -22,6 +22,8 @@ import (
 
 const (
 	MetadataKeyDeploymentNotification = "DeploymentNotification"
+	// MetadataKeyStageDisplay is the key of the metadata to be displayed on the deployment detail UI.
+	MetadataKeyStageDisplay = "pipecd/stage-display-metadata"
 )
 
 var notCompletedDeploymentStatuses = []DeploymentStatus{
diff --git a/web/src/components/deployments-detail-page/pipeline/index.tsx b/web/src/components/deployments-detail-page/pipeline/index.tsx
index a840552f8a..cb2c3552b0 100644
--- a/web/src/components/deployments-detail-page/pipeline/index.tsx
+++ b/web/src/components/deployments-detail-page/pipeline/index.tsx
@@ -11,6 +11,7 @@ import { FC, memo, useCallback, useEffect, useState } from "react";
 import {
   METADATA_APPROVED_BY,
   METADATA_SKIPPED_BY,
+  METADATA_STAGE_DISPLAY_KEY,
 } from "~/constants/metadata-keys";
 import { useAppDispatch, useAppSelector } from "~/hooks/redux";
 import { ActiveStage, updateActiveStage } from "~/modules/active-stage";
@@ -95,28 +96,40 @@ export interface PipelineProps {
   deploymentId: string;
 }
 
+// deprecated. Use findDisplayMetadataText for pipedv1.
 const findApprover = (
   metadata: Array<[string, string]>
 ): string | undefined => {
   const res = metadata.find(([key]) => key === METADATA_APPROVED_BY);
 
   if (res) {
-    return res[1];
+    return `Approved by: ${res[1]}`;
   }
 
   return undefined;
 };
 
+// deprecated. Use findDisplayMetadataText for pipedv1.
 const findSkipper = (metadata: Array<[string, string]>): string | undefined => {
   const res = metadata.find(([key]) => key === METADATA_SKIPPED_BY);
 
   if (res) {
-    return res[1];
+    return `Skipped by: ${res[1]}`;
   }
 
   return undefined;
 };
 
+const findDisplayMetadataText = (
+  metadata: Array<[string, string]>
+): string | undefined => {
+  const res = metadata.find(([key]) => key === METADATA_STAGE_DISPLAY_KEY);
+  if (res) {
+    return res[1];
+  }
+  return undefined;
+};
+
 export const Pipeline: FC<PipelineProps> = memo(function Pipeline({
   deploymentId,
 }) {
@@ -205,6 +218,10 @@ export const Pipeline: FC<PipelineProps> = memo(function Pipeline({
               key={`pipeline-${columnIndex}`}
             >
               {stageColumn.map((stage, stageIndex) => {
+                const displayMetadataText = findDisplayMetadataText(
+                  stage.metadataMap
+                );
+                // TODO: remove approver and skipper. they should be included in findDisplayMetadataText for compatibility.
                 const approver = findApprover(stage.metadataMap);
                 const skipper = findSkipper(stage.metadataMap);
                 const isActive = activeStage
@@ -215,6 +232,7 @@ export const Pipeline: FC<PipelineProps> = memo(function Pipeline({
                 const showLine = columnIndex > 0;
                 const showStraightLine = showLine && stageIndex === 0;
                 const showCurvedLine = showLine && stageIndex > 0;
+                // TODO: remove approver. use displayMetadataText instead.
                 const isCurvedLineExtend =
                   showCurvedLine && (Boolean(approver) || isPrevStageLarge);
 
@@ -274,9 +292,11 @@ export const Pipeline: FC<PipelineProps> = memo(function Pipeline({
                         metadata={stage.metadataMap}
                         onClick={handleOnClickStage}
                         active={isActive}
-                        approver={approver}
-                        skipper={skipper}
                         isDeploymentRunning={isRunning}
+                        // TODO: use only displayMetadataText
+                        displayMetadataText={
+                          displayMetadataText || approver || skipper
+                        }
                       />
                     )}
                   </Box>
diff --git a/web/src/components/deployments-detail-page/pipeline/pipeline-stage/index.tsx b/web/src/components/deployments-detail-page/pipeline/pipeline-stage/index.tsx
index 509829e2b4..b183c15327 100644
--- a/web/src/components/deployments-detail-page/pipeline/pipeline-stage/index.tsx
+++ b/web/src/components/deployments-detail-page/pipeline/pipeline-stage/index.tsx
@@ -9,12 +9,12 @@ export interface PipelineStageProps {
   status: StageStatus;
   active: boolean;
   isDeploymentRunning: boolean;
-  approver?: string;
-  skipper?: string;
   metadata: [string, string][];
+  displayMetadataText?: string;
   onClick: (stageId: string, stageName: string) => void;
 }
 
+// TODO: Use METADATA_STAGE_DISPLAY_KEY instead for all fields in pipedv1.
 const TRAFFIC_PERCENTAGE_META_KEY = {
   PRIMARY: "primary-percentage",
   CANARY: "canary-percentage",
@@ -68,10 +68,9 @@ export const PipelineStage: FC<PipelineStageProps> = memo(
     status,
     onClick,
     active,
-    approver,
-    skipper,
     metadata,
     isDeploymentRunning,
+    displayMetadataText,
   }) {
     const disabled =
       isDeploymentRunning === false &&
@@ -139,7 +138,7 @@ export const PipelineStage: FC<PipelineStageProps> = memo(
             </Box>
           </Typography>
         </Box>
-        {approver !== undefined ? (
+        {displayMetadataText && (
           <Box
             sx={{
               color: "text.secondary",
@@ -150,22 +149,10 @@ export const PipelineStage: FC<PipelineStageProps> = memo(
             <Typography
               variant="body2"
               color="inherit"
-            >{`Approved by ${approver}`}</Typography>
+            >{`${displayMetadataText}`}</Typography>
           </Box>
-        ) : skipper !== undefined ? (
-          <Box
-            sx={{
-              color: "text.secondary",
-              marginLeft: 4,
-              textAlign: "left",
-            }}
-          >
-            <Typography
-              variant="body2"
-              color="inherit"
-            >{`Skipped by ${skipper}`}</Typography>
-          </Box>
-        ) : null}
+        )}
+        {/* TODO: remove trafficPercentage and use only displayMetadataText */}
         {trafficPercentage && (
           <Box
             sx={{
diff --git a/web/src/constants/metadata-keys.ts b/web/src/constants/metadata-keys.ts
index 2022d00035..6b62787d1a 100644
--- a/web/src/constants/metadata-keys.ts
+++ b/web/src/constants/metadata-keys.ts
@@ -1,2 +1,5 @@
+// deprecated. use METADATA_STAGE_DISPLAY_KEY in pipedv1.
 export const METADATA_APPROVED_BY = "ApprovedBy";
 export const METADATA_SKIPPED_BY = "SkippedBy";
+
+export const METADATA_STAGE_DISPLAY_KEY = "pipecd/stage-display-metadata";