diff --git a/frontend/pages/projects/_id/metrics/index.vue b/frontend/pages/projects/_id/metrics/index.vue
index 901d7a2c..e6f71fe2 100644
--- a/frontend/pages/projects/_id/metrics/index.vue
+++ b/frontend/pages/projects/_id/metrics/index.vue
@@ -4,29 +4,37 @@
       <member-progress />
     </v-col>
     <v-col v-if="!!project.hasCategory" cols="12">
-      <category-distribution />
+      <label-distribution
+        title="Category Distribution"
+        :distribution="categoryDistribution"
+        :labels="categoryTypes"
+      />
     </v-col>
     <v-col v-if="!!project.hasSpan" cols="12">
-      <span-distribution />
+      <label-distribution
+        title="Span Distribution"
+        :distribution="spanDistribution"
+        :labels="spanTypes"
+      />
     </v-col>
     <v-col v-if="!!project.useRelation" cols="12">
-      <relation-distribution />
+      <label-distribution
+        title="Relation Distribution"
+        :distribution="relationDistribution"
+        :labels="relationTypes"
+      />
     </v-col>
   </v-row>
 </template>
 
 <script>
-import CategoryDistribution from '~/components/metrics/CategoryDistribution'
-import RelationDistribution from '~/components/metrics/RelationDistribution'
-import SpanDistribution from '~/components/metrics/SpanDistribution'
+import LabelDistribution from '~/components/metrics/LabelDistribution'
 import MemberProgress from '~/components/metrics/MemberProgress'
 
 export default {
   components: {
-    CategoryDistribution,
-    RelationDistribution,
-    SpanDistribution,
-    MemberProgress
+    LabelDistribution,
+    MemberProgress,
   },
   
   layout: 'project',
@@ -38,11 +46,35 @@ export default {
   data() {
     return {
       project: {},
+      categoryTypes: [],
+      categoryDistribution: {},
+      relationTypes: [],
+      relationDistribution: {},
+      spanTypes: [],
+      spanDistribution: {},
+    }
+  },
+
+  computed: {
+    projectId() {
+      return this.$route.params.id
     }
   },
 
   async created() {
-    this.project = await this.$services.project.findById(this.$route.params.id)
+    this.project = await this.$services.project.findById(this.projectId)
+    if (this.project.hasCategory) {
+      this.categoryTypes = await this.$services.categoryType.list(this.projectId)
+      this.categoryDistribution = await this.$services.metrics.fetchCategoryDistribution(this.projectId)
+    }
+    if (this.project.hasSpan) {
+      this.spanTypes = await this.$services.spanType.list(this.projectId)
+      this.spanDistribution = await this.$services.metrics.fetchSpanDistribution(this.projectId)
+    }
+    if (this.project.useRelation) {
+      this.relationTypes = await this.$services.relationType.list(this.projectId)
+      this.relationDistribution = await this.$services.metrics.fetchRelationDistribution(this.projectId)
+    }
   }
 }
 </script>