diff --git a/CHANGELOG.md b/CHANGELOG.md
index a1f47d98..30cc670b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,9 @@
 ## vNext
 - ...
 
+## v0.2.0
+- Added UI to show EDP banner on homepage.
+
 ## v0.1.0
 - Adapted for Cere Network.
 - Added API to add and get EDP info.
diff --git a/api/postman/Cerestats.postman_collection.json b/api/postman/Cerestats.postman_collection.json
index 7d68f58f..0b06cf74 100644
--- a/api/postman/Cerestats.postman_collection.json
+++ b/api/postman/Cerestats.postman_collection.json
@@ -1,12 +1,12 @@
 {
 	"info": {
-		"_postman_id": "b5772ee7-2479-4ffb-b10e-9f95134778b0",
+		"_postman_id": "a62d02bb-78f2-4c7f-9bad-0caa9dad730e",
 		"name": "Cerestats",
 		"schema": "https://schema.getpostman.com/json/collection/v2.1.0/collection.json"
 	},
 	"item": [
 		{
-			"name": "Add value",
+			"name": "Add/Update Banner data",
 			"request": {
 				"method": "POST",
 				"header": [
@@ -18,7 +18,7 @@
 				],
 				"body": {
 					"mode": "raw",
-					"raw": "{\n    \"key\" : \"test1\",\n    \"value\": {\n        \"graduates-number\": \"10\"\n    }\n}",
+					"raw": "{\n    \"key\" : \"banner\",\n    \"value\": {\n        \"show\": true,\n        \"feedbackPercentage\": 90,\n        \"onClickLink\": \"http://cere.network\",\n        \"cereBootcampGraduatesNumber\": 67,\n        \"tokensRewarded\": 95000\n    }\n}",
 					"options": {
 						"raw": {
 							"language": "json"
@@ -44,7 +44,7 @@
 			"response": []
 		},
 		{
-			"name": "Get data",
+			"name": "Get Banner data",
 			"request": {
 				"method": "GET",
 				"header": [
@@ -55,7 +55,7 @@
 					}
 				],
 				"url": {
-					"raw": "https://api.stats.cere.network/api/v1/edp",
+					"raw": "https://api.stats.cere.network/api/v1/edp/banner",
 					"protocol": "https",
 					"host": [
 						"api",
@@ -66,7 +66,8 @@
 					"path": [
 						"api",
 						"v1",
-						"edp"
+						"edp",
+						"banner"
 					]
 				}
 			},
diff --git a/frontend/components/EDPBanner.vue b/frontend/components/EDPBanner.vue
new file mode 100644
index 00000000..8a77be99
--- /dev/null
+++ b/frontend/components/EDPBanner.vue
@@ -0,0 +1,205 @@
+<template>
+  <div>
+    <div v-if="loading" class="text-center py-4">
+      <Loading />
+    </div>
+    <div v-else>
+      <div v-if="showBanner" class="banner row">
+        <a :href="edpLink" target="_blank" rel="noopener noreferrer">
+          <div class="flex row banner">
+            <div class="flex child left column">
+              <div class="cere-logo">
+                <img
+                  src="../static/img/cere_logo_edp.png"
+                  alt="Cere Logo"
+                  class="img"
+                  height="60px"
+                />
+              </div>
+            </div>
+            <div class="flex child middle column">
+              <div class="content">
+                <div class="rectangle first">
+                  <span>Total tokens rewarded to EDP community members</span>
+                  <span class="value">{{ formatNumber }} CERE tokens</span>
+                </div>
+                <div class="rectangle second">
+                  <span>
+                    Number of EDP community members who finished Cere Bootcamp
+                  </span>
+                  <span class="value">{{ graduates }}</span>
+                </div>
+                <div class="rectangle third">
+                  <span>
+                    Percentage of the EDP community members think the Cere
+                    Bootcamp is 'interesting'
+                  </span>
+                  <span class="value"> {{ feedback }}%</span>
+                </div>
+              </div>
+            </div>
+            <div class="flex child right column">
+              <div class="button">
+                Click to find out more about Extended Developers Program (EDP)
+                community
+              </div>
+            </div>
+          </div>
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { gql } from 'graphql-tag'
+import { formatBalance } from '@polkadot/util'
+import Loading from '@/components/Loading.vue'
+
+export default {
+  components: {
+    Loading,
+  },
+  data() {
+    return {
+      loading: true,
+      graduates: 0,
+      tokenRewarded: 0,
+      feedback: 0,
+      showBanner: true,
+      edpLink: '',
+      formatBalance,
+    }
+  },
+  computed: {
+    formatNumber() {
+      const formatter = Intl.NumberFormat('en', { notation: 'compact' })
+      return formatter.format(this.tokenRewarded)
+    },
+  },
+  apollo: {
+    $subscribe: {
+      banner: {
+        query: gql`
+          subscription edp {
+            edp(where: { key: { _eq: "banner" } }) {
+              value
+            }
+          }
+        `,
+        result({ data }) {
+          if (data.edp.length === 0) {
+            this.loading = false
+            this.showBanner = false
+          } else {
+            this.metrics = data.edp[0].value
+            this.showBanner = data.edp[0].value.show
+            this.tokenRewarded = data.edp[0].value.tokensRewarded
+            this.graduates = data.edp[0].value.cereBootcampGraduatesNumber
+            this.feedback = data.edp[0].value.feedbackPercentage
+            this.edpLink = data.edp[0].value.onClickLink
+            this.loading = false
+          }
+        },
+      },
+    },
+  },
+}
+</script>
+
+<style>
+.banner {
+  background-image: url('../static/img/edp_banner_bg.png');
+  height: 200px;
+  margin-top: -5px;
+  margin-bottom: 30px;
+  border-radius: 10px;
+  display: none;
+  margin-right: -1px;
+  margin-left: -1px;
+}
+
+.child.left {
+  width: 8%;
+  display: flex;
+}
+
+.child.middle {
+  width: 67%;
+  display: flex;
+  justify-content: flex-start;
+}
+
+.child.right {
+  width: 25%;
+  display: flex;
+}
+
+.flex {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.rectangle {
+  height: 30px;
+  background: linear-gradient(90deg, #c9529e 0%, #a04799 33.85%, #5e4186 100%);
+  box-shadow: 0 0 4px 4px rgba(121, 119, 119, 0.25);
+  border-radius: 90px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 0 0;
+  align-items: center;
+  color: white;
+}
+
+.value {
+  margin-left: 80px;
+}
+
+.banner span {
+  padding: 0 10px;
+}
+
+.rectangle.first {
+  width: 80%;
+}
+
+.rectangle.second {
+  width: 85%;
+  margin: 25px 0;
+}
+
+.content {
+  padding: 0 15px;
+  align-content: flex-start;
+  width: 100%;
+}
+
+.button {
+  width: 100%;
+  text-align: center;
+  padding: 10px 10px;
+  justify-content: flex-start;
+  margin-right: 25px;
+}
+
+a {
+  text-decoration: none !important;
+  width: 100% !important;
+}
+
+@media (min-width: 992px) {
+  .banner {
+    display: flex;
+    font-size: 0.6rem;
+  }
+}
+
+@media (min-width: 1200px) {
+  .banner {
+    font-size: 0.8rem;
+  }
+}
+</style>
diff --git a/frontend/components/Footer.vue b/frontend/components/Footer.vue
index 7693590f..dfca9765 100644
--- a/frontend/components/Footer.vue
+++ b/frontend/components/Footer.vue
@@ -2,14 +2,21 @@
   <div id="footer" class="container-fluid footer mt-2">
     <footer class="text-muted">
       <div class="container">
-        <div class="d-flex align-items-center justify-content-center mt-2 pt-1">
-          <div>
-            <a href="https://cere.network/">
-              <img src="/img/cere-logo.png" class="cere-logo" />
-            </a>
-          </div>
-          <a href="https://cere.network/" style="text-decoration: none">
-            <div class="cere-title">Cere Network</div>
+        <div class="mt-2 pt-1">
+          <a
+            href="https://cere.network/"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="flex"
+          >
+            <span>
+              <img
+                src="/img/cere-logo.png"
+                alt="Cere Network"
+                class="cere-logo"
+              />
+            </span>
+            <span class="cere-title"> Cere Network </span>
           </a>
         </div>
         <div class="row pt-2">
@@ -51,7 +58,7 @@
             class="col-xs-12 col-sm-12 col-md-4 mt-sm-2 text-center text-white"
             data-testid="footer-polkadot"
           >
-            <h3 class="mb-1" style="font-size: 16px">Cerestats</h3>
+            <h3 class="mb-1" style="font-size: 16px">Explore</h3>
             <hr />
             <ul class="list-unstyled text-center">
               <li>
@@ -107,4 +114,11 @@ export default {}
 .grant-badge {
   max-width: 150px;
 }
+
+.flex {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: columns;
+}
 </style>
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 94bdcbf9..bc6bec4c 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -3,6 +3,7 @@
     <section>
       <b-container class="main py-5 dashboard">
         <Chain />
+        <EDPBanner />
         <Search />
         <div class="row">
           <div class="col-md-6 mb-4">
@@ -67,6 +68,7 @@ import LastExtrinsics from '@/components/LastExtrinsics.vue'
 import LastEvents from '@/components/LastEvents.vue'
 import Chain from '@/components/Chain.vue'
 import Search from '@/components/Search.vue'
+import EDPBanner from '@/components/EDPBanner.vue'
 // import Top10Rich from '@/components/Top10Rich.vue'
 import { network } from '@/frontend.config.js'
 
@@ -78,6 +80,7 @@ export default {
     LastEvents,
     Chain,
     Search,
+    EDPBanner,
     // Top10Rich,
   },
   data: () => {
diff --git a/frontend/static/img/cere_logo_edp.png b/frontend/static/img/cere_logo_edp.png
new file mode 100644
index 00000000..15ee5e40
Binary files /dev/null and b/frontend/static/img/cere_logo_edp.png differ
diff --git a/frontend/static/img/edp_banner_bg.png b/frontend/static/img/edp_banner_bg.png
new file mode 100644
index 00000000..cf676f81
Binary files /dev/null and b/frontend/static/img/edp_banner_bg.png differ
diff --git a/package.json b/package.json
index 7d4f04e5..c161f179 100644
--- a/package.json
+++ b/package.json
@@ -1,26 +1,27 @@
 {
   "private": true,
-  "name": "polkastats-ng",
-  "description": "PolkaStats Next Gen mono repo",
+  "name": "cerestats",
+  "version": "0.2.0",
+  "description": "Cerestats mono repo",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/Colm3na/polkastats-ng.git"
+    "url": "git+https://github.com/Cerebellum-Network/cerestats"
   },
   "keywords": [
     "blockchain",
+    "cere",
     "kusama",
     "polkadot",
     "substrate",
     "PoS",
     "validator"
   ],
-  "author": "Mario Pino Uceda",
+  "author": "Cere Team",
   "license": "Apache-2.0",
   "bugs": {
-    "url": "https://github.com/Colm3na/polkastats-ng/issues"
+    "url": "https://github.com/Cerebellum-Network/cerestats/issues"
   },
-  "homepage": "https://github.com/Colm3na/polkastats-ng#readme",
+  "homepage": "https://github.com/Cerebellum-Network/cerestats#readme",
   "workspaces": ["frontend", "backend", "api"],
   "scripts": {}
  }
- 
\ No newline at end of file