diff --git a/erpnext/public/js/education/academy/academy.js b/erpnext/public/js/education/academy/academy.js
index 08cfc37af4..961dc3926a 100644
--- a/erpnext/public/js/education/academy/academy.js
+++ b/erpnext/public/js/education/academy/academy.js
@@ -7,131 +7,110 @@ import './call';
 
 Vue.use(VueRouter)
 
-
-
-
-frappe.provide('academy')
-
-frappe.utils.make_event_emitter(academy);
-
-academy.store = {
-	debug: true,
+var store = {
 	isLogin: false,
 	completedCourses: new Set(),
 	enrolledPrograms: new Set(),
-	enrolledCourses: {},
-
-	addCompletedCourses (courseName){
-		if (this.debug) console.log('addCompletedCourses triggered with', courseName)
-		this.completedCourses.add(courseName)
-	},
-
-	checkCourseCompletion (courseName){
-		return this.completedCourses.has(courseName)
-	},
-
-	checkProgramEnrollment (programName){
-		return this.enrolledPrograms.has(programName)
-	},
-
-	checkCourseEnrollment (courseName){
-		course = new Set(Object.keys(enrolledCourses))
-		return course.has(courseName)
-	},
-
-	updateEnrolledPrograms (){
-		if (this.debug) console.log('Updating enrolledPrograms')
-		frappe.call({
-			method: "erpnext.www.academy.get_program_enrollments",
-			args:{
-				email: frappe.session.user
-			}
-		}).then( r => {
-			if(r.message){
-				for(var ii=0; ii < r.message.length; ii++){
-					this.enrolledPrograms.add(r.message[ii])
-				}
-			}
-		})
-		if (this.debug) console.log('Updated State', this.enrolledPrograms)
-	},
-
-	updateEnrolledCourses (){
-		if (this.debug) console.log('Updating enrolledCourses')
-		frappe.call({
-			method: "erpnext.www.academy.get_course_enrollments",
-			args:{
-				email: frappe.session.user
-			}
-		}).then( r => {
-			this.enrolledCourses = r.message
-		})
-		if (this.debug) console.log('Updated State', this.enrolledCourses)
-	},
-
-	updateCompletedCourses (){
-		if (this.debug) console.log('Updating States')
-		frappe.call({
-			method: "erpnext.www.academy.get_completed_courses",
-			args:{
-				email: frappe.session.user
-			}
-		}).then( r => {
-			if(r.message){
-				for(var ii=0; ii < r.message.length; ii++){
-					this.completedCourses.add(r.message[ii])
-				}
-			}
-		})
-		if (this.debug) console.log('Updated State', this.completedCourses)
-	},
-
-	checkLogin (){
-		if(frappe.session.user === "Guest"){
-			if (this.debug) console.log('No Session')
-			this.isLogin = false
-		}
-		else {
-			if (this.debug) console.log('Current User: ', frappe.session.user)
-			this.isLogin = true
-		}
-		return this.isLogin
-	},
-
-	updateState (){
-		this.updateCompletedCourses()
-		this.updateEnrolledPrograms()
-		this.updateEnrolledCourses()
-		this.checkLogin()
-	},
+	enrolledCourses: {}
 }
 
 frappe.ready(() => {
-	window.v = new Vue({
-		el: "#academy",
+	frappe.provide('academy')
+	// frappe.utils.make_event_emitter(academy);
+
+	academy.store = new Vue({
+		data: store,
+		methods: {
+			addCompletedCourses (courseName){
+				if (academy.debug) console.log('addCompletedCourses triggered with', courseName)
+				this.completedCourses.add(courseName)
+			},
+
+			checkCourseCompletion (courseName){
+				return this.completedCourses.has(courseName)
+			},
+
+			checkProgramEnrollment (programName){
+				return this.enrolledPrograms.has(programName)
+			},
+
+			checkCourseEnrollment (courseName){
+				course = new Set(Object.keys(enrolledCourses))
+				return course.has(courseName)
+			},
+
+			updateEnrolledPrograms (){
+				if (academy.debug) console.log('Updating enrolledPrograms')
+				academy.call("get_program_enrollments").then(data => {
+					data.forEach(element => {
+						this.enrolledPrograms.add(element)
+					})
+				});
+				if (academy.debug) console.log('Updated State', this.enrolledPrograms)
+			},
+
+			updateEnrolledCourses (){
+				if (academy.debug) console.log('Updating enrolledCourses')
+				frappe.call({
+					method: "erpnext.www.academy.get_course_enrollments",
+					args:{
+						email: frappe.session.user
+					}
+				}).then( r => {
+					this.enrolledCourses = r.message
+				})
+				if (academy.debug) console.log('Updated State', this.enrolledCourses)
+			},
+
+			updateCompletedCourses (){
+				if (academy.debug) console.log('Updating States')
+				frappe.call({
+					method: "erpnext.www.academy.get_completed_courses",
+					args:{
+						email: frappe.session.user
+					}
+				}).then( r => {
+					if(r.message){
+						for(var ii=0; ii < r.message.length; ii++){
+							this.completedCourses.add(r.message[ii])
+						}
+					}
+				})
+				if (academy.debug) console.log('Updated State', this.completedCourses)
+			},
+
+			checkLogin (){
+				if(frappe.session.user === "Guest"){
+					if (academy.debug) console.log('No Session')
+					this.isLogin = false
+				}
+				else {
+					if (academy.debug) console.log('Current User: ', frappe.session.user)
+					this.isLogin = true
+				}
+				return this.isLogin
+			},
+
+			updateState (){
+				this.updateCompletedCourses()
+				this.updateEnrolledPrograms()
+				this.updateEnrolledCourses()
+				this.checkLogin()
+			},
+		}
+	});
+
+	academy.view = new Vue({
+		el: "#academy-app",
 		router: new VueRouter({ routes }),
 		template: "<academy-root/>",
 		components: { AcademyRoot },
 		created: function() {
-			if(store.checkLogin()){
-				store.updateState()
-			}
-		}
-	});
-	academy.store = new Vue({
-		data: store,
-		methods: {
-			checkLogin (){
-				if(frappe.session.user === "Guest"){
-					if (this.debug) console.log('No Session')
-					this.isLogin = false
-				}
-				else {
-					if (this.debug) console.log('Current User: ', frappe.session.user)
-					this.isLogin = true
-				}
-				return this.isLogin
+			if(academy.store.checkLogin()){
+				academy.store.updateState()
 			}
 		}
 	});
+
+	academy.debug = true
 })
\ No newline at end of file
diff --git a/erpnext/public/js/education/academy/call.js b/erpnext/public/js/education/academy/call.js
index 108a6e1d36..64f914d69b 100644
--- a/erpnext/public/js/education/academy/call.js
+++ b/erpnext/public/js/education/academy/call.js
@@ -1,13 +1,15 @@
-frappe.provide('academy');
+frappe.ready(() => {
+    frappe.provide('academy');
 
-academy.call = (method, args) => {
-    const method_path = 'erpnext.www.academy.' + method;
-    return new Promise((resolve, reject) => {
-        return frappe.call({
-            method: method_path,
-            args,
-        })
-        .then(r => resolve(r.message))
-        .fail(reject)
-    });
-}
\ No newline at end of file
+    academy.call = (method, args) => {
+        const method_path = 'erpnext.www.academy.' + method;
+        return new Promise((resolve, reject) => {
+            return frappe.call({
+                method: method_path,
+                args,
+            })
+            .then(r => resolve(r.message))
+            .fail(reject)
+        });
+    }
+});
\ No newline at end of file
diff --git a/erpnext/public/js/education/academy/components/AcademyProgramCard.vue b/erpnext/public/js/education/academy/components/AcademyProgramCard.vue
index ef3ac0896b..bea2acf825 100644
--- a/erpnext/public/js/education/academy/components/AcademyProgramCard.vue
+++ b/erpnext/public/js/education/academy/components/AcademyProgramCard.vue
@@ -10,65 +10,61 @@
         </div>
         <div class='card-footer text-right'>
             <!-- <a class='video-btn btn btn-secondary btn-sm' data-toggle="modal" data-src=" insert jinja stuff here " data-target="#myModal">Watch Intro</a>&nbsp;&nbsp; -->
-            <a v-if="this.$root.$data.isLogin" class='btn btn-secondary btn-sm' @click="primaryAction()">{{ buttonName }}</a>
+            <a-button
+                    v-if="enrolled"
+                    type="primary"
+                    size="sm"
+                    :route="programPageRoute"
+                >
+                    {{ buttonName }}
+            </a-button>
+            <a v-else-if="isLogin" class='btn btn-secondary btn-sm' @click="enroll()">Enroll</a>
             <a v-else class='btn btn-secondary btn-sm' href="/login#signup">Sign Up</a>
         </div>
     </div>
 </div>
 </template>
 <script>
+import AButton from './Button.vue';
 export default {
-    props: ['program_code'],
+    props: ['program', 'enrolled'],
     name: "AcademyProgramCard",
     data() {
     	return {
-    		program: ''
+            isLogin: academy.store.isLogin
     	};
     },
-    mounted() {
-    	frappe.call({
-            method: "erpnext.www.academy.get_program_details",
-            args: {
-                program_name: this.program_code
-            }
-        }).then(r => {
-    		this.program = r.message
-    	})
+    created() {
     },
     methods: {
-        primaryAction(){
-            if(this.$root.$data.isLogin){
-                if(this.$root.$data.checkProgramEnrollment(this.program_code)){
-                    this.$router.push('/Program/' + program.name)
-                }
-                else {
-                    this.enroll()
-                }
-            }
-        },
         enroll() {
-            frappe.call({
-                method: "erpnext.www.academy.enroll_in_program",
-                args:{
-                    program_name: this.program_code,
-                    student_email_id: frappe.session.user
-                }
-            })
-            this.$root.$data.enrolledPrograms.add(this.program_code)
-            this.$root.$data.updateEnrolledPrograms()
+            academy.call('enroll_in_program', {
+                program_name: this.program.name,
+            }).then(
+                academy.store.enrolledPrograms.add(this.program.name),
+                academy.store.updateEnrolledPrograms(),
+                this.router.push('Program/' + this.program.name)
+            )
         }
     },
     computed: {
         buttonName() {
-            if(this.$root.$data.isLogin){
-                if(this.$root.$data.checkProgramEnrollment(this.program_code)){
+                if(this.enrolled){
                     return "Start Course"
                 }
                 else {
                     return "Enroll"
                 }
-            }
+        },
+        programPageRoute() {
+            return `Program/${this.program.name}`
+        },
+        isEnrolled() {
+            return academy.store.enrolledPrograms.has(this.program.name)
         }
+    },
+    components: {
+        AButton
     }
 };
 </script>
diff --git a/erpnext/public/js/education/academy/pages/AcademyHome.vue b/erpnext/public/js/education/academy/pages/AcademyHome.vue
index 630573a757..e59074567e 100644
--- a/erpnext/public/js/education/academy/pages/AcademyHome.vue
+++ b/erpnext/public/js/education/academy/pages/AcademyHome.vue
@@ -1,10 +1,10 @@
 <template>
 <div>
-	<AcademyTopSection :title="title" :description="description">
+	<AcademyTopSection :title="portal.title" :description="portal.description">
         <AcademyTopSectionButton/>
     </AcademyTopSection>
 	<AcademyList :title="'Featured Programs'" :description="'Master ERPNext'">
-        <AcademyProgramCard v-for="program in featured_programs" :key="program.name" :program_code="program"/>
+        <AcademyProgramCard v-for="item in featuredPrograms" :key="item.program.name" :program="item.program" :enrolled="item.is_enrolled"/>
     </AcademyList>
 </div>
 </template>
@@ -18,9 +18,9 @@ export default {
     name: "AcademyHome",
     data() {
     	return{
-    		title: '',
-    		description: '',
-            featured_programs: []
+    		portal: {},
+            featuredPrograms: [],
+            // enrolledPrograms: new Set()
     	}
     },
     components: {
@@ -28,15 +28,28 @@ export default {
         AcademyList,
         AcademyProgramCard,
         AcademyTopSectionButton
-	},
-	mounted() {
-    	frappe.call("erpnext.www.academy.get_portal_details").then(r => {
-    		this.title = r.message.title,
-    		this.description = r.message.description
-    	});
-        frappe.call("erpnext.www.academy.get_featured_programs").then(r => {
-            this.featured_programs = r.message
-        });
     },
+    beforeMount() {
+        // this.updateEnrolledPrograms().then(data => {
+        //     data.forEach(element => {
+        //         this.enrolledPrograms.add(element)
+        //     })
+        // });
+    },
+	mounted() {
+        this.getPortalDetails().then(data => this.portal = data);
+        this.getFeaturedPrograms().then(data => this.featuredPrograms = data);
+    },
+    methods: {
+        // updateEnrolledPrograms(){
+        //     return academy.call("get_program_enrollments")
+        // },
+        getPortalDetails() {
+            return academy.call("get_portal_details")
+        },
+        getFeaturedPrograms() {
+            return academy.call("get_featured_programs")
+        }
+    }
 };
 </script>
\ No newline at end of file
diff --git a/erpnext/public/js/education/academy/routes.js b/erpnext/public/js/education/academy/routes.js
index 51c280d72a..7896b1d94c 100644
--- a/erpnext/public/js/education/academy/routes.js
+++ b/erpnext/public/js/education/academy/routes.js
@@ -1,6 +1,6 @@
-import AcademyHome from "./academy/pages/AcademyHome.vue";
-import AcademyProgramPage from "./academy/pages/AcademyProgramPage.vue";
-import AcademyCoursePage from "./academy/pages/AcademyCoursePage.vue";
+import AcademyHome from "./pages/AcademyHome.vue";
+import AcademyProgramPage from "./pages/AcademyProgramPage.vue";
+import AcademyCoursePage from "./pages/AcademyCoursePage.vue";
 
 const routes = [
 	{name: 'home', path: '', component: AcademyHome},
diff --git a/erpnext/www/academy.html b/erpnext/www/academy.html
index 9d3cec8a51..f078b3695c 100644
--- a/erpnext/www/academy.html
+++ b/erpnext/www/academy.html
@@ -3,6 +3,6 @@
 {% block title %}{{ heading or "Academy"}}{% endblock %}
 
 {% block page_content %}
-<div id="academy"></div>
+<div id="academy-app"></div>
 <script type="text/javascript" src="/assets/js/academy.min.js"></script>
 {% endblock %}
\ No newline at end of file