diff --git a/erpnext/education/doctype/education_settings/education_settings.json b/erpnext/education/doctype/education_settings/education_settings.json
index dd5376f..83cc0b0 100644
--- a/erpnext/education/doctype/education_settings/education_settings.json
+++ b/erpnext/education/doctype/education_settings/education_settings.json
@@ -414,7 +414,7 @@
  "issingle": 1, 
  "istable": 0, 
  "max_attachments": 0, 
- "modified": "2018-10-25 18:55:25.257146", 
+ "modified": "2018-10-30 17:33:56.143330", 
  "modified_by": "Administrator", 
  "module": "Education", 
  "name": "Education Settings", 
@@ -458,6 +458,25 @@
    "share": 1, 
    "submit": 0, 
    "write": 1
+  }, 
+  {
+   "amend": 0, 
+   "cancel": 0, 
+   "create": 0, 
+   "delete": 0, 
+   "email": 1, 
+   "export": 0, 
+   "if_owner": 0, 
+   "import": 0, 
+   "permlevel": 0, 
+   "print": 1, 
+   "read": 1, 
+   "report": 0, 
+   "role": "Guest", 
+   "set_user_permissions": 0, 
+   "share": 1, 
+   "submit": 0, 
+   "write": 0
   }
  ], 
  "quick_entry": 1, 
diff --git a/erpnext/education/doctype/program/program.json b/erpnext/education/doctype/program/program.json
index 5dd3647..6339d6e 100644
--- a/erpnext/education/doctype/program/program.json
+++ b/erpnext/education/doctype/program/program.json
@@ -476,7 +476,7 @@
  "istable": 0, 
  "max_attachments": 0, 
  "menu_index": 0, 
- "modified": "2018-10-16 13:03:22.002322", 
+ "modified": "2018-10-30 17:30:55.381657", 
  "modified_by": "Administrator", 
  "module": "Education", 
  "name": "Program", 
@@ -501,6 +501,25 @@
    "share": 1, 
    "submit": 0, 
    "write": 1
+  }, 
+  {
+   "amend": 0, 
+   "cancel": 0, 
+   "create": 0, 
+   "delete": 0, 
+   "email": 1, 
+   "export": 1, 
+   "if_owner": 0, 
+   "import": 0, 
+   "permlevel": 0, 
+   "print": 1, 
+   "read": 1, 
+   "report": 1, 
+   "role": "Guest", 
+   "set_user_permissions": 0, 
+   "share": 1, 
+   "submit": 0, 
+   "write": 0
   }
  ], 
  "quick_entry": 0, 
diff --git a/erpnext/public/build.json b/erpnext/public/build.json
index c34eef2..824b9b8 100644
--- a/erpnext/public/build.json
+++ b/erpnext/public/build.json
@@ -54,5 +54,8 @@
         "stock/dashboard/item_dashboard.html",
         "stock/dashboard/item_dashboard_list.html",
         "stock/dashboard/item_dashboard.js"
+    ],
+    "js/web-academy.min.js": [
+        "public/js/education/web-academy.js"
     ]
 }
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
diff --git a/erpnext/www/academy.html b/erpnext/www/academy.html
new file mode 100644
index 0000000..cba1964
--- /dev/null
+++ b/erpnext/www/academy.html
@@ -0,0 +1,8 @@
+{% extends "frappe_theme/templates/web.html" %}
+
+{% block title %}{{ heading or "Academy"}}{% endblock %}
+
+{% block page_content %}
+<div id="web-academy"></div>
+<script type="text/javascript" src="/assets/js/web-academy.min.js"></script>
+{% endblock %}
\ No newline at end of file
diff --git a/erpnext/www/academy.py b/erpnext/www/academy.py
new file mode 100644
index 0000000..43ed259
--- /dev/null
+++ b/erpnext/www/academy.py
@@ -0,0 +1,27 @@
+from __future__ import unicode_literals
+import frappe
+import erpnext.education.utils as utils
+
+@frappe.whitelist()
+def get_portal_details():
+	settings = frappe.get_doc("Education Settings")
+	title = settings.portal_title
+	description = settings.description
+	return dict(title=title, description=description)
+
+@frappe.whitelist()
+def get_featured_programs():
+	featured_program_names = frappe.get_list("Program", filters={"is_published": True, "is_featured": True})
+	featured_list = [program["name"] for program in featured_program_names]
+	if featured_list:
+		return featured_list
+	else:
+		return None
+
+@frappe.whitelist()
+def get_program_details(program_name):
+	try:
+		program = frappe.get_doc('Program', program_name)
+		return program
+	except:
+		return None
diff --git a/erpnext/www/web-academy.html b/erpnext/www/web-academy.html
deleted file mode 100644
index 9fa5a25..0000000
--- a/erpnext/www/web-academy.html
+++ /dev/null
@@ -1,10 +0,0 @@
-{% extends "templates/web.html" %}
-
-{% block title %}{{ heading or "Web Academy"}}{% endblock %}
-
-{% block page_content %}
-
-<div id="web-academy"></div>
-<script type="text/javascript" src="/assets/js/frappe-web-academy.min.js"></script>
-
-{% endblock %}
\ No newline at end of file