diff --git a/erpnext/public/js/education/web-academy.js b/erpnext/public/js/education/web-academy.js
new file mode 100644
index 0000000..1bf325b
--- /dev/null
+++ b/erpnext/public/js/education/web-academy.js
@@ -0,0 +1,27 @@
+import Vue from 'vue/dist/vue.js';
+import VueRouter from 'vue-router/dist/vue-router.js'
+import AcademyRoot from "./web-academy/AcademyRoot.vue";
+import AcademyHome from "./web-academy/pages/AcademyHome.vue";
+import AcademyProgramPage from "./web-academy/pages/AcademyProgramPage.vue";
+import AcademyCoursePage from "./web-academy/pages/AcademyCoursePage.vue";
+
+Vue.use(VueRouter)
+
+const routes = [
+	{path: '', component: AcademyHome},
+	{path: '/Program/:code', component: AcademyProgramPage, props: true},
+	{path: '/Course', component: AcademyCoursePage},
+];
+
+const router = new VueRouter({
+	routes: routes,
+});
+
+frappe.ready(() => {
+	new Vue({
+		el: "#web-academy",
+		router: router,
+		template: "<academy-root/>",
+		components: { AcademyRoot }
+	});
+})
\ No newline at end of file
diff --git a/erpnext/public/js/education/web-academy/AcademyRoot.vue b/erpnext/public/js/education/web-academy/AcademyRoot.vue
new file mode 100644
index 0000000..e5edfb6
--- /dev/null
+++ b/erpnext/public/js/education/web-academy/AcademyRoot.vue
@@ -0,0 +1,10 @@
+<template>
+	<div id="academy-root">
+	<router-view></router-view>
+	</div>
+</template>
+<script>
+export default {
+    name: "AcademyRoot",
+};
+</script>
\ No newline at end of file
diff --git a/erpnext/public/js/education/web-academy/components/AcademyCardList.vue b/erpnext/public/js/education/web-academy/components/AcademyCardList.vue
new file mode 100644
index 0000000..16e1924
--- /dev/null
+++ b/erpnext/public/js/education/web-academy/components/AcademyCardList.vue
@@ -0,0 +1,31 @@
+<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/AcademyProgramCard.vue b/erpnext/public/js/education/web-academy/components/AcademyProgramCard.vue
new file mode 100644
index 0000000..3228421
--- /dev/null
+++ b/erpnext/public/js/education/web-academy/components/AcademyProgramCard.vue
@@ -0,0 +1,38 @@
+<template>
+    <div class='card-deck mt-5'>
+    <div class="card">
+        <img :src="program.hero_image" style='height: 150px'>
+        <div class='card-body'>
+            <router-link :to="'/Program/' + program.name">
+                <h5 class='card-title'>{{ program.name }}</h5>
+            </router-link>
+            <div v-html="program.description"></div>
+        </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' href="/enroll?course=user">Enroll Now</a>
+        </div>
+    </div>
+</div>
+</template>
+<script>
+export default {
+    props: ['title'],
+    name: "AcademyProgramCard",
+    data() {
+    	return {
+    		program: ''
+    	};
+    },
+    mounted() {
+    	frappe.call({
+            method: "erpnext.www.academy.get_program_details",
+            args: {
+                program_name: this.title
+            }
+        }).then(r => {
+    		this.program = r.message
+    	})
+    },
+};
+</script>
\ 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
new file mode 100644
index 0000000..0c1f5a6
--- /dev/null
+++ b/erpnext/public/js/education/web-academy/components/AcademyTopSection.vue
@@ -0,0 +1,34 @@
+<template>
+<section class='top-section'>
+	<div class='container'>
+		<div class='text-center'>
+			<!-- <img class="main-illustration" src='/assets/erpnext_com/img/erpnext_com_illustration.png'
+			style='width: 700px;'> -->
+		</div>
+		<h1 v-html="title"></h1>
+		<ul class="list-group">
+		</ul>
+		<p class='lead' v-html="description"></p>
+		<p class="mt-4">
+			<a class="btn btn-primary btn-lg" href="/enroll">Explore Courses</a>
+		</p>
+	</div>
+</section>
+</template>
+<script>
+export default {
+    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/AcademyCoursePage.vue b/erpnext/public/js/education/web-academy/pages/AcademyCoursePage.vue
new file mode 100644
index 0000000..c57076b
--- /dev/null
+++ b/erpnext/public/js/education/web-academy/pages/AcademyCoursePage.vue
@@ -0,0 +1,10 @@
+<template>
+<div>
+	Course Page
+</div>
+</template>
+<script>
+export default {
+    name: "AcademyCoursePage"
+};
+</script>
\ No newline at end of file
diff --git a/erpnext/public/js/education/web-academy/pages/AcademyHome.vue b/erpnext/public/js/education/web-academy/pages/AcademyHome.vue
new file mode 100644
index 0000000..0a57ef2
--- /dev/null
+++ b/erpnext/public/js/education/web-academy/pages/AcademyHome.vue
@@ -0,0 +1,17 @@
+<template>
+<div>
+	<AcademyTopSection/>
+	<AcademyCardList/>
+</div>
+</template>
+<script>
+import AcademyTopSection from "../components/AcademyTopSection.vue"
+import AcademyCardList from "../components/AcademyCardList.vue"
+
+export default {
+    name: "AcademyHome",
+    components: {
+		AcademyTopSection, AcademyCardList
+	}
+};
+</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
new file mode 100644
index 0000000..813e012
--- /dev/null
+++ b/erpnext/public/js/education/web-academy/pages/AcademyProgramPage.vue
@@ -0,0 +1,14 @@
+<template>
+<div>
+	Program Page {{ code }}
+</div>
+</template>
+<script>
+export default {
+	props: ['code'],
+    name: "AcademyProgramPage",
+    data() {
+   		return this.code
+    }
+};
+</script>
\ No newline at end of file