diff --git a/app-config.yaml b/app-config.yaml
index dd72051189..2eed4762ce 100644
--- a/app-config.yaml
+++ b/app-config.yaml
@@ -255,6 +255,12 @@ catalog:
     # Backstage example entities
     - type: file
       target: ../catalog-model/examples/all.yaml
+
+    - type: file
+      target: ./test-template.yaml
+      rules:
+        - allow: [Template]
+
     # Backstage example groups and users
     - type: file
       target: ../catalog-model/examples/acme-corp.yaml
diff --git a/packages/backend/src/plugins/scaffolder.ts b/packages/backend/src/plugins/scaffolder.ts
index d079b64c28..b6275e9883 100644
--- a/packages/backend/src/plugins/scaffolder.ts
+++ b/packages/backend/src/plugins/scaffolder.ts
@@ -15,7 +15,12 @@
  */
 
 import { CatalogClient } from '@backstage/catalog-client';
-import { createRouter } from '@backstage/plugin-scaffolder-backend';
+import { ScmIntegrations } from '@backstage/integration';
+import {
+  createRouter,
+  createTemplateAction,
+  createBuiltinActions,
+} from '@backstage/plugin-scaffolder-backend';
 import { Router } from 'express';
 import type { PluginEnvironment } from '../types';
 
@@ -26,6 +31,26 @@ export default async function createPlugin(
     discoveryApi: env.discovery,
   });
 
+  const defaultActions = createBuiltinActions({
+    catalogClient,
+    reader: env.reader,
+    config: env.config,
+    integrations: ScmIntegrations.fromConfig(env.config),
+  });
+
+  const delayAction = createTemplateAction({
+    id: 'mock:delay',
+    async handler(ctx) {
+      const interval = setInterval(
+        () => ctx.logger.info('Writing something', new Date().toISOString()),
+        1000,
+      );
+
+      await new Promise(resolve => setTimeout(resolve, 5000));
+      clearTimeout(interval);
+    },
+  });
+
   return await createRouter({
     logger: env.logger,
     config: env.config,
@@ -34,5 +59,6 @@ export default async function createPlugin(
     reader: env.reader,
     identity: env.identity,
     scheduler: env.scheduler,
+    actions: [...defaultActions, delayAction],
   });
 }
diff --git a/packages/backend/test-template.yaml b/packages/backend/test-template.yaml
new file mode 100644
index 0000000000..13a002e0b9
--- /dev/null
+++ b/packages/backend/test-template.yaml
@@ -0,0 +1,37 @@
+apiVersion: scaffolder.backstage.io/v1beta3
+# https://backstage.io/docs/features/software-catalog/descriptor-format#kind-template
+kind: Template
+metadata:
+  name: example-delay-tempalte
+  title: Delay template
+  description: An example template for the scaffolder that creates a simple Node.js service
+spec:
+  type: service
+
+  parameters: []
+
+  steps:
+    - id: delay1
+      name: Delay 1
+      action: mock:delay
+
+    - id: delay2
+      name: Delay 2
+      action: mock:delay
+
+    - id: delay3
+      name: Delay 3
+      action: mock:delay
+
+    - id: delay4
+      name: Delay 4
+      action: mock:delay
+
+    - id: delay5
+      if: true
+      name: Delay 5
+      action: mock:delay
+
+    - id: delay6
+      name: Delay 6
+      action: mock:delay
diff --git a/packages/create-app/templates/default-app/app-config.local.yaml b/packages/create-app/templates/default-app/app-config.local.yaml
index 976293b546..6b4dcd0327 100644
--- a/packages/create-app/templates/default-app/app-config.local.yaml
+++ b/packages/create-app/templates/default-app/app-config.local.yaml
@@ -1 +1,5 @@
 # Backstage override configuration for your local development environment
+catalog:
+  locations:
+    - type: file
+      target: ./test-template.yaml
diff --git a/plugins/scaffolder/src/next/TaskPage/TaskPage.tsx b/plugins/scaffolder/src/next/TaskPage/TaskPage.tsx
index f259231e4d..f9a84d2355 100644
--- a/plugins/scaffolder/src/next/TaskPage/TaskPage.tsx
+++ b/plugins/scaffolder/src/next/TaskPage/TaskPage.tsx
@@ -52,7 +52,9 @@ export const TaskPage = () => {
       />
       <Content>
         <Paper style={{ position: 'relative', overflow: 'hidden' }}>
-          <LinearProgress variant="indeterminate" value={100} />
+          {!taskStream.completed && (
+            <LinearProgress variant="indeterminate" value={100} />
+          )}
           <Box padding={2}>
             <TaskSteps steps={steps} activeStep={activeStep} />
           </Box>
diff --git a/plugins/scaffolder/src/next/TaskPage/TaskSteps/TaskSteps.tsx b/plugins/scaffolder/src/next/TaskPage/TaskSteps/TaskSteps.tsx
index fb24a8a832..4095872465 100644
--- a/plugins/scaffolder/src/next/TaskPage/TaskSteps/TaskSteps.tsx
+++ b/plugins/scaffolder/src/next/TaskPage/TaskSteps/TaskSteps.tsx
@@ -19,9 +19,11 @@ import {
   Step as MuiStep,
   StepButton as MuiStepButton,
   StepLabel as MuiStepLabel,
+  StepIconProps,
 } from '@material-ui/core';
 import { TaskStep } from '@backstage/plugin-scaffolder-common';
 import { Step } from '../../../components/hooks/useEventStream';
+import RemoveCircleOutlineIcon from '@material-ui/icons/RemoveCircleOutline';
 
 interface StepperProps {
   steps: (TaskStep & Step)[];
@@ -41,17 +43,20 @@ export const TaskSteps = (props: StepperProps) => {
         const isFailed = step.status === 'failed';
         const isActive = step.status === 'processing';
         const isSkipped = step.status === 'skipped';
+        const stepIconProps: Partial<StepIconProps> = {
+          completed: isCompleted,
+          error: isFailed,
+          active: isActive,
+        };
+
+        if (isSkipped) {
+          stepIconProps.icon = <RemoveCircleOutlineIcon />;
+        }
 
         return (
           <MuiStep key={index}>
             <MuiStepButton>
-              <MuiStepLabel
-                StepIconProps={{
-                  completed: isCompleted,
-                  error: isFailed,
-                  active: isActive,
-                }}
-              >
+              <MuiStepLabel StepIconProps={stepIconProps}>
                 {step.name}
               </MuiStepLabel>
             </MuiStepButton>