diff --git a/erpnext/public/js/education/web-academy/components/AcademyCourseCardButton.vue b/erpnext/public/js/education/web-academy/components/AcademyCourseCardButton.vue
index a6e6f56bd00..10e52e4ccf9 100644
--- a/erpnext/public/js/education/web-academy/components/AcademyCourseCardButton.vue
+++ b/erpnext/public/js/education/web-academy/components/AcademyCourseCardButton.vue
@@ -13,7 +13,6 @@ export default {
     },
     mounted() {
     	if(this.$root.$data.checkCourseCompletion(this.course)){
-    		console.log('Completed', this.course)
     		this.buttonName = 'Completed'
     		this.className = 'btn-success'
     	}
diff --git a/erpnext/public/js/education/web-academy/components/AcademyTopSection.vue b/erpnext/public/js/education/web-academy/components/AcademyTopSection.vue
index 8ef11133d82..abbce3a3ce6 100644
--- a/erpnext/public/js/education/web-academy/components/AcademyTopSection.vue
+++ b/erpnext/public/js/education/web-academy/components/AcademyTopSection.vue
@@ -10,18 +10,15 @@
 		</ul>
 		<p class='lead' v-html="description"></p>
 		<p class="mt-4">
-			<AcademyTopSectionButton/>
+			<slot></slot>
 		</p>
 	</div>
 </section>
 </template>
 <script>
-import AcademyTopSectionButton from "./AcademyTopSectionButton.vue"
+
 export default {
 	props: ['title', 'description'],
     name: "AcademyTopSection",
-    components: {
-    	AcademyTopSectionButton
-    }
 };
 </script>
\ No newline at end of file
diff --git a/erpnext/public/js/education/web-academy/components/AcademyTopSectionButton.vue b/erpnext/public/js/education/web-academy/components/AcademyTopSectionButton.vue
index 35579896d1d..e1df97e79e3 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="getUrl()">{{ buttonName }}</button>
+    <button v-if="isLoggedIn" class='btn btn-primary btn-lg' @click="$router.push(getUrl())">{{ buttonName }}</button>
 	<a v-else class='btn btn-primary btn-lg' href="/login#signup">{{ buttonName }}</a>
 </template>
 <script>
@@ -8,11 +8,28 @@ export default {
     data() {
         return {
             buttonName: '',
-            isLoggedIn: this.$root.$data.checkLogin()
+            isLoggedIn: this.$root.$data.checkLogin(),
+            nextContent: '',
+            nextContentType: '',
+            nextCourse: '',
+            link: '',
         }
     },
     mounted() {
-        if(this.$root.$data.checkLogin()){
+        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
+            })
+        }
+
+        if(this.isLoggedIn){
         	if(this.$route.name == 'home'){
                 this.buttonName = 'Explore Courses'
         	}
@@ -26,12 +43,12 @@ export default {
     },
     methods: {
         getUrl() {
-            console.log('method getUrl() called')
             if(this.$route.name == 'home'){
                 return ''
             }
             else if(this.$route.name == 'program'){
-                return 'Program/' + this.$route.params.code + this.$route.params.course
+                this.link = this.$route.params.code + '/' + this.nextCourse + '/' + this.nextContentType + '/' + this.nextContent
+                return this.link
             }
         }
     }
diff --git a/erpnext/public/js/education/web-academy/pages/AcademyHome.vue b/erpnext/public/js/education/web-academy/pages/AcademyHome.vue
index b2a1ff1d2a7..630573a7578 100644
--- a/erpnext/public/js/education/web-academy/pages/AcademyHome.vue
+++ b/erpnext/public/js/education/web-academy/pages/AcademyHome.vue
@@ -1,6 +1,8 @@
 <template>
 <div>
-	<AcademyTopSection :title="title" :description="description"/>
+	<AcademyTopSection :title="title" :description="description">
+        <AcademyTopSectionButton/>
+    </AcademyTopSection>
 	<AcademyList :title="'Featured Programs'" :description="'Master ERPNext'">
         <AcademyProgramCard v-for="program in featured_programs" :key="program.name" :program_code="program"/>
     </AcademyList>
@@ -10,6 +12,7 @@
 import AcademyTopSection from "../components/AcademyTopSection.vue"
 import AcademyList from "../components/AcademyList.vue"
 import AcademyProgramCard from "../components/AcademyProgramCard.vue"
+import AcademyTopSectionButton from "../components/AcademyTopSectionButton.vue"
 
 export default {
     name: "AcademyHome",
@@ -21,7 +24,10 @@ export default {
     	}
     },
     components: {
-		AcademyTopSection, AcademyList, AcademyProgramCard
+		AcademyTopSection,
+        AcademyList,
+        AcademyProgramCard,
+        AcademyTopSectionButton
 	},
 	mounted() {
     	frappe.call("erpnext.www.academy.get_portal_details").then(r => {
diff --git a/erpnext/public/js/education/web-academy/pages/AcademyProgramPage.vue b/erpnext/public/js/education/web-academy/pages/AcademyProgramPage.vue
index 04136cb451d..560aee51429 100644
--- a/erpnext/public/js/education/web-academy/pages/AcademyProgramPage.vue
+++ b/erpnext/public/js/education/web-academy/pages/AcademyProgramPage.vue
@@ -1,6 +1,8 @@
 <template>
 <div>
-	<AcademyTopSection v-bind:title="program.program_name" v-bind:description="program.description"/>
+	<AcademyTopSection v-bind:title="program.program_name" v-bind:description="program.description">
+        <AcademyTopSectionButton/>
+    </AcademyTopSection>
 	<AcademyList :title="'Courses'" :description="''">
         <AcademyCourseCard v-for="course in course_list" :course="course" :key="course.name"/>
     </AcademyList>
@@ -10,6 +12,7 @@
 import AcademyTopSection from "../components/AcademyTopSection.vue"
 import AcademyList from "../components/AcademyList.vue"
 import AcademyCourseCard from "../components/AcademyCourseCard.vue"
+import AcademyTopSectionButton from "../components/AcademyTopSectionButton.vue"
 
 export default {
 	props: ['code'],
@@ -17,7 +20,8 @@ export default {
     components: {
 		AcademyTopSection,
 		AcademyList,
-		AcademyCourseCard
+		AcademyCourseCard,
+        AcademyTopSectionButton
 	},
 	data() {
 		return {