UI: Components rendered based on student progress
diff --git a/erpnext/public/js/education/web-academy/components/AcademyProgramCard.vue b/erpnext/public/js/education/web-academy/components/AcademyProgramCard.vue
index 9b33a98..9932079 100644
--- a/erpnext/public/js/education/web-academy/components/AcademyProgramCard.vue
+++ b/erpnext/public/js/education/web-academy/components/AcademyProgramCard.vue
@@ -10,7 +10,8 @@
         </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 class='btn btn-secondary btn-sm' @click="enroll()">Enroll Now</a>
+            <a v-if="this.$root.$data.checkProgramEnrollment(program_code)" class='btn btn-secondary btn-sm' @click="$router.push('/Program/' + program.name)">Start Course</a>
+            <a v-else class='btn btn-secondary btn-sm' @click="enroll()">Enroll Now</a>
         </div>
     </div>
 </div>
@@ -37,10 +38,9 @@
     methods: {
         enroll() {
             frappe.call({
-                method: "erpnext.www.academy.enroll",
+                method: "erpnext.www.academy.enroll_in_program",
                 args:{
-                    type: "Program",
-                    name: this.program_code,
+                    program_name: this.program_code,
                     student_email_id: frappe.session.user
                 }
             })
diff --git a/erpnext/public/js/education/web-academy/pages/AcademyProgramPage.vue b/erpnext/public/js/education/web-academy/pages/AcademyProgramPage.vue
index 560aee5..c5a1751 100644
--- a/erpnext/public/js/education/web-academy/pages/AcademyProgramPage.vue
+++ b/erpnext/public/js/education/web-academy/pages/AcademyProgramPage.vue
@@ -30,6 +30,7 @@
 		}
 	},
 	mounted() {
+        this.$root.$data.updateCompletedCourses()
 		frappe.call({
             method: "erpnext.www.academy.get_program_details",
             args: {