diff --git a/erpnext/public/js/education/web-academy.js b/erpnext/public/js/education/web-academy.js
index 3dfd0f2..e6b48ec 100644
--- a/erpnext/public/js/education/web-academy.js
+++ b/erpnext/public/js/education/web-academy.js
@@ -16,7 +16,7 @@
 ];
 
 var store = {
-	debug: false,
+	debug: true,
 	isLogin: false,
 	completedCourses: new Set(),
 	enrolledPrograms: new Set(),
diff --git a/erpnext/public/js/education/web-academy/components/AcademyCourseCard.vue b/erpnext/public/js/education/web-academy/components/AcademyCourseCard.vue
index 426b987..9c47473 100644
--- a/erpnext/public/js/education/web-academy/components/AcademyCourseCard.vue
+++ b/erpnext/public/js/education/web-academy/components/AcademyCourseCard.vue
@@ -12,7 +12,7 @@
                 </span>
             </div>
             <div v-if="$root.$data.isLogin" class='course-buttons text-center col-xs-4 col-sm-3 col-md-2'>
-                <AcademyCourseCardButton :course="course.name" :nextContent="nextContent" :nextContentType="nextContentType"/>
+                <AcademyCourseCardButton v-if="this.$root.$data.checkProgramEnrollment(this.$route.params.code)" :course="course.name" :nextContent="nextContent" :nextContentType="nextContentType"/>
             </div>
         </div>
     </div>
diff --git a/erpnext/public/js/education/web-academy/components/AcademyTopSectionButton.vue b/erpnext/public/js/education/web-academy/components/AcademyTopSectionButton.vue
index e1df97e..8cc3a7b 100644
--- a/erpnext/public/js/education/web-academy/components/AcademyTopSectionButton.vue
+++ b/erpnext/public/js/education/web-academy/components/AcademyTopSectionButton.vue
@@ -1,5 +1,5 @@
 <template>
-    <button v-if="isLoggedIn" class='btn btn-primary btn-lg' @click="$router.push(getUrl())">{{ buttonName }}</button>
+    <button v-if="isLoggedIn" class='btn btn-primary btn-lg' @click="primaryAction()">{{ buttonName }}</button>
 	<a v-else class='btn btn-primary btn-lg' href="/login#signup">{{ buttonName }}</a>
 </template>
 <script>
@@ -17,40 +17,54 @@
     },
     mounted() {
         if(this.isLoggedIn && this.$route.name == 'program'){
-            frappe.call({
-                method: "erpnext.www.academy.get_continue_data",
-                args: {
-                    program_name: this.$route.params.code
-                }
-            }).then( r => {
-                this.nextContent = r.message.content,
-                this.nextContentType = r.message.content_type,
-                this.nextCourse = r.message.course
-            })
+                frappe.call({
+                    method: "erpnext.www.academy.get_continue_data",
+                    args: {
+                        program_name: this.$route.params.code
+                    }
+                }).then( r => {
+                    this.nextContent = r.message.content,
+                    this.nextContentType = r.message.content_type,
+                    this.nextCourse = r.message.course
+                })
         }
 
         if(this.isLoggedIn){
-        	if(this.$route.name == 'home'){
-                this.buttonName = 'Explore Courses'
-        	}
-            else if(this.$route.name == 'program'){
-                this.buttonName = 'Start Course'
+            if(this.$root.$data.checkProgramEnrollment(this.$route.params.code)){
+            	if(this.$route.name == 'home'){
+                    this.buttonName = 'Explore Courses'
+            	}
+                else if(this.$route.name == 'program'){
+                    this.buttonName = 'Start Course'
+                }
+            }
+            else {
+                this.buttonName = 'Enroll Now'
             }
         }
         else{
             this.buttonName = 'Sign Up'
-        }
+            }
     },
     methods: {
-        getUrl() {
+        primaryAction() {
             if(this.$route.name == 'home'){
-                return ''
+                return
             }
-            else if(this.$route.name == 'program'){
-                this.link = this.$route.params.code + '/' + this.nextCourse + '/' + this.nextContentType + '/' + this.nextContent
-                return this.link
+            else if(this.$route.name == 'program' && this.$root.$data.checkProgramEnrollment(this.$route.params.code)){
+                this.$router.push({ name: 'content', params: { code: this.$route.params.code, course: this.nextCourse, type: this.nextContentType, content: this.nextContent}})
             }
-        }
+            else {
+                frappe.call({
+                method: "erpnext.www.academy.enroll_in_program",
+                args:{
+                    program_name: this.$route.params.code,
+                    student_email_id: frappe.session.user
+                }
+                })
+                this.$root.$data.updateEnrolledPrograms()
+            }
+        },
     }
 };
 </script>
\ No newline at end of file
diff --git a/erpnext/public/js/education/web-academy/pages/AcademyProgramPage.vue b/erpnext/public/js/education/web-academy/pages/AcademyProgramPage.vue
index ef45459..030c3ed 100644
--- a/erpnext/public/js/education/web-academy/pages/AcademyProgramPage.vue
+++ b/erpnext/public/js/education/web-academy/pages/AcademyProgramPage.vue
@@ -30,7 +30,6 @@
 		}
 	},
     beforeMount(){
-        console.log("Before Mount")
         if(this.$root.$data.isLogin) this.$root.$data.updateCompletedCourses()
     },
 	mounted() {