diff --git a/app/assets/javascripts/ide/components/jobs/stage.vue b/app/assets/javascripts/ide/components/jobs/stage.vue
index 938385f0b814502c022c638113f2f5c99774ef72..796ca1349c53a028924dcd414f3dcdf4d92118de 100644
--- a/app/assets/javascripts/ide/components/jobs/stage.vue
+++ b/app/assets/javascripts/ide/components/jobs/stage.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlLoadingIcon, GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { GlLoadingIcon, GlIcon, GlTooltipDirective, GlBadge } from '@gitlab/ui';
 import CiIcon from '../../../vue_shared/components/ci_icon.vue';
 import Item from './item.vue';
 
@@ -9,6 +9,7 @@ export default {
   },
   components: {
     GlIcon,
+    GlBadge,
     CiIcon,
     Item,
     GlLoadingIcon,
@@ -74,7 +75,7 @@ export default {
         {{ stage.name }}
       </strong>
       <div v-if="!stage.isLoading || stage.jobs.length" class="gl-mr-3 gl-ml-2">
-        <span class="badge badge-pill"> {{ jobsCount }} </span>
+        <gl-badge>{{ jobsCount }}</gl-badge>
       </div>
       <gl-icon :name="collapseIcon" class="ide-stage-collapse-icon" />
     </div>
diff --git a/spec/frontend/ide/components/jobs/__snapshots__/stage_spec.js.snap b/spec/frontend/ide/components/jobs/__snapshots__/stage_spec.js.snap
index faa70982fac944d79811d2745d39b2d6785701f8..d1cf9f2e248e11cc07a1e26f84347873d1dc4fbc 100644
--- a/spec/frontend/ide/components/jobs/__snapshots__/stage_spec.js.snap
+++ b/spec/frontend/ide/components/jobs/__snapshots__/stage_spec.js.snap
@@ -25,11 +25,12 @@ exports[`IDE pipeline stage renders stage details & icon 1`] = `
     <div
       class="gl-mr-3 gl-ml-2"
     >
-      <span
-        class="badge badge-pill"
+      <gl-badge-stub
+        size="md"
+        variant="muted"
       >
-         4 
-      </span>
+        4
+      </gl-badge-stub>
     </div>
      
     <gl-icon-stub