diff --git a/src/App.vue b/src/App.vue
index 23c6885..04b83e2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -41,8 +41,6 @@ body {
   color: var(--smoky_dark);
   display: flex;
   flex-direction: column;
-  width: 100vw;
-  height: 100vh;
 }
 
 .app-container {
diff --git a/src/components/Leaves.vue b/src/components/Leaves.vue
deleted file mode 100644
index ebc2ee6..0000000
--- a/src/components/Leaves.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-  <div class="leaves">
-    <div class="leaf design-leaf"></div>
-    <div class="leaf planing-leaf"></div>
-    <div class="leaf testing-leaf"></div>
-    <div class="leaf backend-leaf"></div>
-    <div class="leaf frontend-leaf"></div>
-    <div class="leaf devops-leaf"></div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Leaves',
-  props: {
-    design: Boolean,
-    planing: Boolean,
-    testing: Boolean,
-    backend: Boolean,
-    frontend: Boolean,
-    devops: Boolean,
-  },
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-.leaf {
-  float: left;
-  width: 15px;
-  height: 28px;
-  margin-right: 8px;
-  border-radius: 15px 0 15px 0;
-  background-color: #bbb;
-}
-</style>
diff --git a/src/components/Leaves/Leave.vue b/src/components/Leaves/Leave.vue
new file mode 100644
index 0000000..faf3bd5
--- /dev/null
+++ b/src/components/Leaves/Leave.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="leaf" v-bind:class="team"></div>
+</template>
+
+<script>
+export default {
+  props: ['team'],
+};
+</script>
+
+<style scoped>
+.leaf {
+  float: left;
+  width: 15px;
+  height: 28px;
+  margin-right: 8px;
+  border-radius: 15px 0 15px 0;
+  background-color: #bbb;
+}
+
+.frontend {
+  background-color: rgb(26, 103, 92);
+}
+.backend {
+  background-color: rgb(40, 107, 179);
+}
+.devops {
+  background-color: rgb(145, 15, 25);
+}
+.design {
+  background-color: rgb(229, 0, 25);
+}
+.planning {
+  background-color: rgb(248, 129, 10);
+}
+.functional_testing {
+  background-color: rgb(247, 171, 0);
+}
+</style>
diff --git a/src/components/Leaves/Leaves.vue b/src/components/Leaves/Leaves.vue
new file mode 100644
index 0000000..1227409
--- /dev/null
+++ b/src/components/Leaves/Leaves.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="leaves">
+    <Leave v-for="team in teamNames" v-bind:key="teamNames.indexOf(team)" :team="team"></Leave>
+  </div>
+</template>
+
+<script>
+import Leave from './Leave.vue';
+
+export default {
+  name: 'Leaves',
+  components: {
+    Leave,
+  },
+  computed: {
+    teamNames() {
+      return this.teams.map(team => {
+        if (team === 0) return 'planning';
+        if (team === 1) return 'design';
+        if (team === 2) return 'frontend';
+        if (team === 3) return 'backend';
+        if (team === 4) return 'devops';
+        return 'functional_testing';
+      });
+    },
+  },
+  props: ['teams'],
+};
+</script>
diff --git a/src/router.js b/src/router.js
index a92f415..1c5a83b 100644
--- a/src/router.js
+++ b/src/router.js
@@ -3,7 +3,7 @@ import Router from 'vue-router';
 import History from './views/History.vue';
 import FAQPage from './views/FAQPage/index.vue';
 import Videos from './views/Videos.vue';
-import Contributors from './views/Contributors.vue';
+import Contributors from './views/ContributorsPage/Contributors.vue';
 
 Vue.use(Router);
 
diff --git a/src/views/Contributors.vue b/src/views/Contributors.vue
deleted file mode 100644
index a12d53d..0000000
--- a/src/views/Contributors.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <div class="page">
-    Contributors page
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'contributors',
-  components: {},
-};
-</script>
diff --git a/src/views/ContributorsPage/Contributor.vue b/src/views/ContributorsPage/Contributor.vue
new file mode 100644
index 0000000..68235bd
--- /dev/null
+++ b/src/views/ContributorsPage/Contributor.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="contributor">
+    <img v-bind:src="data.attributes.image" class="profile" />
+    <span>{{ data.attributes.name }}</span>
+    <Leaves :teams="data.attributes.teamIds" />
+    <br />
+    <p>
+      <a v-bind:href="`https://github.com/${data.attributes.username}`">
+        <i class="fa fa-github-square"></i>
+        <span>{{ data.attributes.username }}</span>
+      </a>
+    </p>
+    <hr />
+  </div>
+</template>
+
+<script>
+import Leaves from '../../components/Leaves/Leaves.vue';
+
+export default {
+  name: 'Contributor',
+  components: {
+    Leaves,
+  },
+  props: ['data'],
+};
+</script>
+
+<style scoped>
+@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
+@import url('../../assets/main.css');
+
+.profile {
+  width: var(--width_height);
+  height: var(--width_height);
+  border-radius: 50%;
+}
+
+a {
+  color: black;
+  text-decoration: none;
+}
+</style>
diff --git a/src/views/ContributorsPage/ContributorList.vue b/src/views/ContributorsPage/ContributorList.vue
new file mode 100644
index 0000000..075cd1b
--- /dev/null
+++ b/src/views/ContributorsPage/ContributorList.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="contributors">
+    <div class="contributor" v-for="contributor in contributors" :key="contributor.id">
+      <Contributor :data="contributor" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Contributor from './Contributor.vue';
+
+export default {
+  name: 'ContributorList',
+  data() {
+    return {
+      contributors: [],
+    };
+  },
+  created() {
+    return (
+      fetch('https://api-dev.codinggarden.community/contributors')
+        .then(res => res.json())
+        // eslint-disable-next-line
+        .then(json => (this.contributors = json))
+    );
+  },
+  components: {
+    Contributor,
+  },
+};
+</script>
+
+<style scoped></style>
diff --git a/src/views/ContributorsPage/Contributors.vue b/src/views/ContributorsPage/Contributors.vue
new file mode 100644
index 0000000..58cfeeb
--- /dev/null
+++ b/src/views/ContributorsPage/Contributors.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    Contributors page
+    <ContributorsList />
+  </div>
+</template>
+
+<script>
+import ContributorsList from './ContributorList.vue';
+
+export default {
+  name: 'contributors',
+  components: {
+    ContributorsList,
+  },
+};
+</script>