diff --git a/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue b/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue
index 6422b4ac8d889b526dad9fa0935f2eae4cdf1dd1..20ae0a7fc83e561229a21049d3d8cdd9a0acad1b 100644
--- a/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue
+++ b/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue
@@ -324,48 +324,38 @@ export default {
       failure.text
     }}</gl-alert>
     <div class="gl-mb-3">
-      <h3>{{ s__('PipelineCharts|CI/CD Analytics') }}</h3>
+      <h4>{{ s__('PipelineCharts|CI/CD Analytics') }}</h4>
     </div>
-    <h4 class="gl-my-4">{{ s__('PipelineCharts|Overall statistics') }}</h4>
-    <div class="row">
-      <div class="col-md-6">
-        <gl-skeleton-loader v-if="loading" :lines="5" />
-        <statistics-list v-else :counts="formattedCounts" />
-      </div>
-      <div v-if="!loading" class="col-md-6">
-        <strong>{{ __('Pipeline durations for the last 30 commits') }}</strong>
-        <gl-column-chart
-          :height="$options.chartContainerHeight"
-          :option="chartOptions"
-          :bars="timesChartTransformedData"
-          :y-axis-title="__('Minutes')"
-          :x-axis-title="__('Commit')"
-          x-axis-type="category"
-        />
-      </div>
-    </div>
-    <template v-if="!loading">
-      <hr />
-      <h4 class="gl-my-4">{{ __('Pipelines charts') }}</h4>
-      <ci-cd-analytics-charts
-        :charts="areaCharts"
-        :chart-options="$options.areaChartOptions"
-        :format-tooltip-text="formatTooltipText"
-      >
-        <template #tooltip-title>{{ tooltipTitle }}</template>
-        <template #tooltip-content>
-          <div
-            v-for="{ key, name, color, value } in tooltipContent"
-            :key="key"
-            class="gl-display-flex gl-justify-content-space-between"
-          >
-            <gl-chart-series-label class="gl-font-sm gl-mr-7" :color="color">
-              {{ name }}
-            </gl-chart-series-label>
-            <div class="gl-font-weight-bold">{{ value }}</div>
-          </div>
-        </template>
-      </ci-cd-analytics-charts>
-    </template>
+    <gl-skeleton-loader v-if="loading" :lines="5" />
+    <statistics-list v-else :counts="formattedCounts" />
+    <h4>{{ __('Pipelines charts') }}</h4>
+    <ci-cd-analytics-charts
+      :charts="areaCharts"
+      :chart-options="$options.areaChartOptions"
+      :format-tooltip-text="formatTooltipText"
+    >
+      <template #tooltip-title>{{ tooltipTitle }}</template>
+      <template #tooltip-content>
+        <div
+          v-for="{ key, name, color, value } in tooltipContent"
+          :key="key"
+          class="gl-display-flex gl-justify-content-space-between"
+        >
+          <gl-chart-series-label class="gl-font-sm gl-mr-7" :color="color">
+            {{ name }}
+          </gl-chart-series-label>
+          <div class="gl-font-weight-bold">{{ value }}</div>
+        </div>
+      </template>
+    </ci-cd-analytics-charts>
+    <h4 class="gl-mt-6">{{ __('Pipeline durations for the last 30 commits') }}</h4>
+    <gl-column-chart
+      :height="$options.chartContainerHeight"
+      :option="chartOptions"
+      :bars="timesChartTransformedData"
+      :y-axis-title="__('Minutes')"
+      :x-axis-title="__('Commit')"
+      x-axis-type="category"
+    />
   </div>
 </template>
diff --git a/app/assets/javascripts/projects/pipelines/charts/components/statistics_list.vue b/app/assets/javascripts/projects/pipelines/charts/components/statistics_list.vue
index f921b2dfdd63c477e025cec988dabb919d921b77..714e0ff8c1f8e3de50d66379ad308676ad52899c 100644
--- a/app/assets/javascripts/projects/pipelines/charts/components/statistics_list.vue
+++ b/app/assets/javascripts/projects/pipelines/charts/components/statistics_list.vue
@@ -1,13 +1,15 @@
 <script>
 import { GlLink } from '@gitlab/ui';
+import { GlSingleStat } from '@gitlab/ui/dist/charts';
 import { SUPPORTED_FORMATS, getFormatter } from '~/lib/utils/unit_format';
-import { s__, n__, formatNumber } from '~/locale';
+import { s__, formatNumber } from '~/locale';
 
 const defaultPrecision = 2;
 
 export default {
   components: {
     GlLink,
+    GlSingleStat,
   },
   inject: {
     failedPipelinesLink: {
@@ -19,6 +21,11 @@ export default {
       type: Object,
       required: true,
     },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     statistics() {
@@ -26,37 +33,50 @@ export default {
 
       return [
         {
-          title: s__('PipelineCharts|Total:'),
-          value: n__('1 pipeline', '%d pipelines', formatNumber(this.counts.total)),
+          label: s__('PipelineCharts|Total pipelines'),
+          identifier: 'total-pipelines',
+          value: formatNumber(this.counts.total),
         },
         {
-          title: s__('PipelineCharts|Successful:'),
-          value: n__('1 pipeline', '%d pipelines', formatNumber(this.counts.success)),
+          label: s__('PipelineCharts|Success ratio'),
+          identifier: 'success-ratio',
+          value: formatPercent(this.counts.successRatio, defaultPrecision),
         },
         {
-          title: s__('PipelineCharts|Failed:'),
-          value: n__('1 pipeline', '%d pipelines', formatNumber(this.counts.failed)),
-          link: this.failedPipelinesLink,
+          label: s__('PipelineCharts|Successful pipelines'),
+          identifier: 'successful-pipelines',
+          value: formatNumber(this.counts.success),
         },
         {
-          title: s__('PipelineCharts|Success ratio:'),
-          value: formatPercent(this.counts.successRatio, defaultPrecision),
+          label: s__('PipelineCharts|Failed pipelines'),
+          identifier: 'failed-pipelines',
+          value: formatNumber(this.counts.failed),
+          link: this.failedPipelinesLink,
         },
       ];
     },
   },
+  methods: {
+    shouldDisplayLink(statistic) {
+      return statistic.link && statistic.value !== 0;
+    },
+  },
 };
 </script>
 <template>
-  <ul>
-    <template v-for="({ title, value, link }, index) in statistics">
-      <li :key="index">
-        <span>{{ title }}</span>
-        <gl-link v-if="link" :href="link">
-          {{ value }}
-        </gl-link>
-        <strong v-else>{{ value }}</strong>
-      </li>
-    </template>
-  </ul>
+  <div class="gl-display-flex gl-flex-wrap gl-gap-6 gl-mb-6">
+    <div v-for="statistic in statistics" :key="statistic.label">
+      <gl-single-stat
+        :id="statistic.identifier"
+        :value="`${statistic.value}`"
+        :title="statistic.label"
+        :unit="statistic.unit || ''"
+        :should-animate="true"
+        use-delimiters
+      />
+      <gl-link v-if="shouldDisplayLink(statistic)" class="gl-p-2" :href="statistic.link">{{
+        s__('Pipeline|See details')
+      }}</gl-link>
+    </div>
+  </div>
 </template>
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 63c0e7aeabf985b699558ce9765e575b07359eb6..1228992607fc6eb7418deaff88de74aa9bedebed 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -1662,11 +1662,6 @@ msgid_plural "%{merge_requests} open merge requests"
 msgstr[0] ""
 msgstr[1] ""
 
-msgid "1 pipeline"
-msgid_plural "%d pipelines"
-msgstr[0] ""
-msgstr[1] ""
-
 msgid "1 role"
 msgid_plural "%d roles"
 msgstr[0] ""
@@ -36038,22 +36033,19 @@ msgstr ""
 msgid "PipelineCharts|CI/CD Analytics"
 msgstr ""
 
-msgid "PipelineCharts|Failed:"
+msgid "PipelineCharts|Failed pipelines"
 msgstr ""
 
-msgid "PipelineCharts|Overall statistics"
+msgid "PipelineCharts|Success ratio"
 msgstr ""
 
-msgid "PipelineCharts|Success ratio:"
-msgstr ""
-
-msgid "PipelineCharts|Successful:"
+msgid "PipelineCharts|Successful pipelines"
 msgstr ""
 
 msgid "PipelineCharts|There was an error parsing the data for the charts."
 msgstr ""
 
-msgid "PipelineCharts|Total:"
+msgid "PipelineCharts|Total pipelines"
 msgstr ""
 
 msgid "PipelineEditorFileTree|Configuration files added with the include keyword"
@@ -36842,6 +36834,9 @@ msgstr ""
 msgid "Pipeline|Running"
 msgstr ""
 
+msgid "Pipeline|See details"
+msgstr ""
+
 msgid "Pipeline|Skipped"
 msgstr ""
 
diff --git a/spec/features/projects/graph_spec.rb b/spec/features/projects/graph_spec.rb
index effe743ac81e270f199bd0716b25683548fbdeae..dbafd236b21ffa756266a94eecdc6239294b2149 100644
--- a/spec/features/projects/graph_spec.rb
+++ b/spec/features/projects/graph_spec.rb
@@ -95,7 +95,7 @@
     end
 
     it 'renders CI graphs' do
-      expect(page).to have_content 'Overall'
+      expect(page).to have_content 'CI/CD Analytics'
       expect(page).to have_content 'Last week'
       expect(page).to have_content 'Last month'
       expect(page).to have_content 'Last year'
diff --git a/spec/frontend/projects/pipelines/charts/components/__snapshots__/statistics_list_spec.js.snap b/spec/frontend/projects/pipelines/charts/components/__snapshots__/statistics_list_spec.js.snap
index a2877a9f17c78c261174e01b8ba6395377a2ff1e..c47579185e1a4069636022bb36e90919c89474c4 100644
--- a/spec/frontend/projects/pipelines/charts/components/__snapshots__/statistics_list_spec.js.snap
+++ b/spec/frontend/projects/pipelines/charts/components/__snapshots__/statistics_list_spec.js.snap
@@ -1,40 +1,66 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`StatisticsList displays the counts data with labels 1`] = `
-<ul>
-  <li>
-    <span>
-      Total:
-    </span>
-    <strong>
-      40,000 pipelines
-    </strong>
-  </li>
-  <li>
-    <span>
-      Successful:
-    </span>
-    <strong>
-      20,000 pipelines
-    </strong>
-  </li>
-  <li>
-    <span>
-      Failed:
-    </span>
+<div
+  class="gl-display-flex gl-flex-wrap gl-gap-6 gl-mb-6"
+>
+  <div>
+    <gl-single-stat-stub
+      animationdecimalplaces="0"
+      id="reference-0"
+      shouldanimate="true"
+      title="Total pipelines"
+      titleiconclass=""
+      unit=""
+      usedelimiters="true"
+      value="40,000"
+      variant="muted"
+    />
+  </div>
+  <div>
+    <gl-single-stat-stub
+      animationdecimalplaces="0"
+      id="reference-1"
+      shouldanimate="true"
+      title="Success ratio"
+      titleiconclass=""
+      unit=""
+      usedelimiters="true"
+      value="50.00%"
+      variant="muted"
+    />
+  </div>
+  <div>
+    <gl-single-stat-stub
+      animationdecimalplaces="0"
+      id="reference-2"
+      shouldanimate="true"
+      title="Successful pipelines"
+      titleiconclass=""
+      unit=""
+      usedelimiters="true"
+      value="20,000"
+      variant="muted"
+    />
+  </div>
+  <div>
+    <gl-single-stat-stub
+      animationdecimalplaces="0"
+      id="reference-3"
+      shouldanimate="true"
+      title="Failed pipelines"
+      titleiconclass=""
+      unit=""
+      usedelimiters="true"
+      value="20,000"
+      variant="muted"
+    />
     <gl-link-stub
+      class="gl-p-2"
       href="/flightjs/Flight/-/pipelines?page=1&scope=all&status=failed"
     >
-      20,000 pipelines
+      See details
     </gl-link-stub>
-  </li>
-  <li>
-    <span>
-      Success ratio:
-    </span>
-    <strong>
-      50.00%
-    </strong>
-  </li>
-</ul>
+  </div>
+</div>
 `;
diff --git a/spec/frontend/projects/pipelines/charts/components/statistics_list_spec.js b/spec/frontend/projects/pipelines/charts/components/statistics_list_spec.js
index 24dbc628ce693942452beaadbb3037a692fce444..02560fa3fa12b97478274d273dad1566c64a9d15 100644
--- a/spec/frontend/projects/pipelines/charts/components/statistics_list_spec.js
+++ b/spec/frontend/projects/pipelines/charts/components/statistics_list_spec.js
@@ -28,4 +28,18 @@ describe('StatisticsList', () => {
   it('displays failed pipelines link', () => {
     expect(findFailedPipelinesLink().attributes('href')).toBe(failedPipelinesLink);
   });
+
+  describe('with no failed piplines link', () => {
+    beforeEach(() => {
+      wrapper = shallowMount(Component, {
+        propsData: {
+          counts,
+        },
+      });
+    });
+
+    it('hides the failed pipelines link', () => {
+      expect(findFailedPipelinesLink().exists()).toBe(false);
+    });
+  });
 });