diff --git a/erpnext/public/js/education/web-academy/components/AcademyTopSection.vue b/erpnext/public/js/education/web-academy/components/AcademyTopSection.vue
index 7bd1b35e41d..8ef11133d82 100644
--- a/erpnext/public/js/education/web-academy/components/AcademyTopSection.vue
+++ b/erpnext/public/js/education/web-academy/components/AcademyTopSection.vue
@@ -10,7 +10,7 @@
 		</ul>
 		<p class='lead' v-html="description"></p>
 		<p class="mt-4">
-			<a class="btn btn-primary btn-lg" href="/enroll">Explore Courses</a>
+			<AcademyTopSectionButton/>
 		</p>
 	</div>
 </section>
@@ -18,7 +18,10 @@
 <script>
 import AcademyTopSectionButton from "./AcademyTopSectionButton.vue"
 export default {
-	props: ['title', 'description', 'buttonName'],
+	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 2af1eaf117d..35579896d1d 100644
--- a/erpnext/public/js/education/web-academy/components/AcademyTopSectionButton.vue
+++ b/erpnext/public/js/education/web-academy/components/AcademyTopSectionButton.vue
@@ -1,5 +1,6 @@
 <template>
-	<button class='btn btn-primary btn-lg' @click="$router.push()">{{ buttonName }}</button>
+    <button v-if="isLoggedIn" class='btn btn-primary btn-lg' @click="getUrl()">{{ buttonName }}</button>
+	<a v-else class='btn btn-primary btn-lg' href="/login#signup">{{ buttonName }}</a>
 </template>
 <script>
 export default {
@@ -7,24 +8,30 @@ export default {
     data() {
         return {
             buttonName: '',
-            url: {}
+            isLoggedIn: this.$root.$data.checkLogin()
         }
     },
     mounted() {
-    	if(this.$route.name == 'home'){
-    		this.buttonName = 'Explore Courses'
-            this.url = {}
-    	}
-        else if(this.$route.name == 'program'){
-            this.buttonName = 'Start Course'
-            this.url = {
-                name: 'content',
-                params: {
-                    code: this.$route.params.code,
-                    course: this.$route.params.course,
-                    type: this.nextContentType,
-
-                }
+        if(this.$root.$data.checkLogin()){
+        	if(this.$route.name == 'home'){
+                this.buttonName = 'Explore Courses'
+        	}
+            else if(this.$route.name == 'program'){
+                this.buttonName = 'Start Course'
+            }
+        }
+        else{
+            this.buttonName = 'Sign Up'
+        }
+    },
+    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
             }
         }
     }