diff --git a/ee/app/assets/javascripts/usage_quotas/pipelines/components/app.vue b/ee/app/assets/javascripts/usage_quotas/pipelines/components/app.vue
index d158deb2b68ea257093125685bd6f54b99cc5d55..a52ae9f3c679600044c90f7c13f79443f87d9e97 100644
--- a/ee/app/assets/javascripts/usage_quotas/pipelines/components/app.vue
+++ b/ee/app/assets/javascripts/usage_quotas/pipelines/components/app.vue
@@ -23,10 +23,11 @@ import {
 } from '../constants';
 import ProjectList from './project_list.vue';
 import UsageOverview from './usage_overview.vue';
+import MinutesUsageCharts from './minutes_usage_charts.vue';
 
 export default {
   name: 'PipelineUsageApp',
-  components: { GlAlert, GlButton, GlLoadingIcon, ProjectList, UsageOverview },
+  components: { GlAlert, GlButton, GlLoadingIcon, ProjectList, UsageOverview, MinutesUsageCharts },
   inject: [
     'pageSize',
     'namespacePath',
@@ -49,7 +50,7 @@ export default {
     return {
       error: '',
       namespace: null,
-      ciMinutesUsages: null,
+      ciMinutesUsages: [],
     };
   },
   apollo: {
@@ -169,6 +170,10 @@ export default {
 <template>
   <div>
     <section>
+      <div>
+        <gl-loading-icon v-if="isLoading" class="gl-mt-5" size="md" />
+        <minutes-usage-charts v-else :ci-minutes-usages="ciMinutesUsages" />
+      </div>
       <div v-if="shouldShowBuyAdditionalMinutes" class="gl-display-flex gl-justify-content-end">
         <gl-button
           :href="buyAdditionalMinutesPath"
diff --git a/ee/app/assets/javascripts/usage_quotas/pipelines/components/minutes_usage_charts.vue b/ee/app/assets/javascripts/usage_quotas/pipelines/components/minutes_usage_charts.vue
new file mode 100644
index 0000000000000000000000000000000000000000..66e9c216f04ffb6421f97a3853c47530ce2545ff
--- /dev/null
+++ b/ee/app/assets/javascripts/usage_quotas/pipelines/components/minutes_usage_charts.vue
@@ -0,0 +1,29 @@
+<script>
+import MinutesUsageMonthChart from 'ee/ci_minutes_usage/components/minutes_usage_month_chart.vue';
+import MinutesUsageProjectChart from 'ee/ci_minutes_usage/components/minutes_usage_project_chart.vue';
+
+export default {
+  name: 'MinutesUsageCharts',
+  components: { MinutesUsageMonthChart, MinutesUsageProjectChart },
+  inject: ['ciMinutesDisplayMinutesAvailableData'],
+  props: {
+    ciMinutesUsages: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
+  computed: {
+    borderStyles() {
+      return 'gl-border-b-solid gl-border-gray-200 gl-border-b-1';
+    },
+  },
+};
+</script>
+
+<template>
+  <div :class="borderStyles" class="gl-my-7">
+    <minutes-usage-month-chart :class="borderStyles" :ci-minutes-usage="ciMinutesUsages" />
+    <minutes-usage-project-chart :minutes-usage-data="ciMinutesUsages" />
+  </div>
+</template>