diff --git a/erpnext/public/js/education/web-academy/components/AcademyCardList.vue b/erpnext/public/js/education/web-academy/components/AcademyCardList.vue
deleted file mode 100644
index 16e19247270..00000000000
--- a/erpnext/public/js/education/web-academy/components/AcademyCardList.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-	<section class='section-padding section-bg'>
-	<div class='container'>
-		<h3 class='text-center'>Featured Programs</h3>
-		<p class='lead text-center'>Master Engineering</p>
-		<AcademyProgramCard v-for="program in featured_programs" v-bind:id="program" v-bind:title="program"/>
-		<div class='mt-4 text-center'>
-			<a class="btn btn-primary btn-lg" href="/program">View All</a>
-		</div>
-	</div>
-</section>
-</template>
-<script>
-import AcademyProgramCard from "../components/AcademyProgramCard.vue"
-export default {
-    name: "AcademyCardList",
-    data() {
-    	return {
-    		featured_programs: [],
-    	};
-    },
-    mounted() {
-    	frappe.call("erpnext.www.academy.get_featured_programs").then(r => {
-    		this.featured_programs = r.message
-    	})
-    },
-    components: {
-    	AcademyProgramCard
-    }
-};
-</script>
\ No newline at end of file
diff --git a/erpnext/public/js/education/web-academy/components/AcademyList.vue b/erpnext/public/js/education/web-academy/components/AcademyList.vue
new file mode 100644
index 00000000000..919a3a98ca3
--- /dev/null
+++ b/erpnext/public/js/education/web-academy/components/AcademyList.vue
@@ -0,0 +1,18 @@
+<template>
+	<section class='section-padding section-bg'>
+	<div class='container'>
+		<h3 class='text-center' v-html="title"></h3>
+		<p class='lead text-center' v-html="description"></p>
+		<slot></slot>
+		<div class='mt-4 text-center'>
+			<a class="btn btn-primary btn-lg" href="/program">View All</a>
+		</div>
+	</div>
+</section>
+</template>
+<script>
+export default {
+    props:['title', 'description'],
+    name: "AcademyList",
+};
+</script>
\ No newline at end of file
diff --git a/erpnext/public/js/education/web-academy/components/AcademyProgramCard.vue b/erpnext/public/js/education/web-academy/components/AcademyProgramCard.vue
index 32284210254..c03261fe3f5 100644
--- a/erpnext/public/js/education/web-academy/components/AcademyProgramCard.vue
+++ b/erpnext/public/js/education/web-academy/components/AcademyProgramCard.vue
@@ -1,10 +1,10 @@
 <template>
     <div class='card-deck mt-5'>
     <div class="card">
-        <img :src="program.hero_image" style='height: 150px'>
+        <img :src="program.hero_image" style='height: 150px; width: auto'>
         <div class='card-body'>
             <router-link :to="'/Program/' + program.name">
-                <h5 class='card-title'>{{ program.name }}</h5>
+                <h5 class='card-title'>{{ program.program_name }}</h5>
             </router-link>
             <div v-html="program.description"></div>
         </div>
@@ -17,7 +17,7 @@
 </template>
 <script>
 export default {
-    props: ['title'],
+    props: ['program_code'],
     name: "AcademyProgramCard",
     data() {
     	return {
@@ -28,11 +28,17 @@ export default {
     	frappe.call({
             method: "erpnext.www.academy.get_program_details",
             args: {
-                program_name: this.title
+                program_name: this.program_code
             }
         }).then(r => {
     		this.program = r.message
     	})
     },
 };
-</script>
\ No newline at end of file
+</script>
+
+<style lang="css" scoped>
+    a {
+    text-decoration: none;
+}
+</style>
\ No newline at end of file
diff --git a/erpnext/public/js/education/web-academy/components/AcademyTopSection.vue b/erpnext/public/js/education/web-academy/components/AcademyTopSection.vue
index 0c1f5a602de..93724c6d502 100644
--- a/erpnext/public/js/education/web-academy/components/AcademyTopSection.vue
+++ b/erpnext/public/js/education/web-academy/components/AcademyTopSection.vue
@@ -17,18 +17,7 @@
 </template>
 <script>
 export default {
+	props: ['title', 'description'],
     name: "AcademyTopSection",
-    data() {
-    	return {
-    		title: '',
-    		description: ''
-    	};
-    },
-    mounted() {
-    	frappe.call("erpnext.www.academy.get_portal_details").then(r => {
-    		this.title = r.message.title,
-    		this.description = r.message.description
-    	})
-    },
 };
 </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 813e012ae21..eac3eff56cd 100644
--- a/erpnext/public/js/education/web-academy/pages/AcademyProgramPage.vue
+++ b/erpnext/public/js/education/web-academy/pages/AcademyProgramPage.vue
@@ -1,14 +1,52 @@
 <template>
 <div>
-	Program Page {{ code }}
+	<AcademyTopSection v-bind:title="program.program_name" v-bind:description="program.description"/>
+	<AcademyList :title="'Courses'" :description="''">
+        <AcademyCourseCard v-for="course in course_list" :course="course" :key="course.name"/>
+    </AcademyList>
 </div>
 </template>
 <script>
+import AcademyTopSection from "../components/AcademyTopSection.vue"
+import AcademyList from "../components/AcademyList.vue"
+import AcademyCourseCard from "../components/AcademyCourseCard.vue"
+
 export default {
 	props: ['code'],
     name: "AcademyProgramPage",
-    data() {
-   		return this.code
-    }
+    components: {
+		AcademyTopSection,
+		AcademyList,
+		AcademyCourseCard
+	},
+	data() {
+		return {
+			program: '',
+			course_list: []
+		}
+	},
+	mounted() {
+		frappe.call({
+            method: "erpnext.www.academy.get_program_details",
+            args: {
+                program_name: this.code
+            }
+        }).then(r => {
+    		this.program = r.message
+    	});
+    	frappe.call({
+    		method: "erpnext.www.academy.get_courses",
+    		args: {
+    			program_name: this.code
+    		}
+    	}).then(r => {
+    		this.course_list = r.message
+    	})
+	},
+	watch: {
+   		'$route' (to, from) {
+      		// react to route changes...
+    	}
+	}
 };
 </script>
\ No newline at end of file