diff --git a/erpnext/public/js/education/web-academy/components/ContentArticle.vue b/erpnext/public/js/education/web-academy/components/ContentArticle.vue
new file mode 100644
index 00000000000..c50058c5eb1
--- /dev/null
+++ b/erpnext/public/js/education/web-academy/components/ContentArticle.vue
@@ -0,0 +1,53 @@
+<template>
+<div>
+    <section class='article-top-section video-section-bg'>
+        <div class='container'>
+            <div class="row">
+                <div class="col-md-8">
+                    <h2>{{ content_data.title }}</h2>
+                    <span class="text-muted">
+                        Published on {{ content_data.publish_date }}, by {{ content_data.author }}
+                    </span>
+                </div>
+                <div class="col-md-4 text-right">
+                	<slot></slot>
+                </div>
+            </div>
+            <hr>
+        </div>
+    </section>
+    <section class="article-content-section">
+        <div class='container'>
+            <div class="content" v-html="content_data.content"></div>
+            <div class="text-right">
+            </div>
+            <div class="mt-3 text-right">
+                <a class="text-muted" href="/report"><i class="octicon octicon-issue-opened" title="Report"></i> Report a
+                    Mistake</a>
+            </div>
+        </div>
+    </section>
+</div>
+</template>
+<script>
+export default {
+	props: ['content', 'type'],
+	name: 'ContentArticle',
+	data() {
+    	return {
+    		content_data: ''
+    	}
+    },
+    mounted() {
+    	frappe.call({
+    		method: "erpnext.www.academy.get_content",
+    		args: {
+    			content_name: this.content,
+    			content_type: this.type
+    		}
+    	}).then(r => {
+    			this.content_data = r.message
+    	});
+    }
+};
+</script>
diff --git a/erpnext/public/js/education/web-academy/components/ContentNavigation.vue b/erpnext/public/js/education/web-academy/components/ContentNavigation.vue
new file mode 100644
index 00000000000..cb9cd8b9d51
--- /dev/null
+++ b/erpnext/public/js/education/web-academy/components/ContentNavigation.vue
@@ -0,0 +1,21 @@
+<template>
+	<div class="nav-buttons">
+		<button class='btn btn-outline-secondary' @click="$router.go(-1)">Previous</button>
+		<button class='btn btn-primary' @click="$router.push({ name: 'content', params: { course: $route.params.course, type:nextContentType, content:nextContent }})">Next</button>
+	</div>
+</template>
+
+<script>
+export default {
+	props: ['nextContent', 'nextContentType'],
+	name: 'ContentNavigation',
+};
+</script>
+
+<style lang="css" scoped>
+	.nav-buttons {
+		position: absolute;
+  		bottom: 0;
+  		right: 0;
+	}
+</style>
diff --git a/erpnext/public/js/education/web-academy/components/ContentQuiz.vue b/erpnext/public/js/education/web-academy/components/ContentQuiz.vue
new file mode 100644
index 00000000000..a334799f281
--- /dev/null
+++ b/erpnext/public/js/education/web-academy/components/ContentQuiz.vue
@@ -0,0 +1,21 @@
+<template>
+	<div>
+		Quiz
+	</div>
+</template>
+
+<script>
+export default {
+
+  name: 'ContentQuiz',
+
+  data() {
+    return {
+
+    };
+  },
+};
+</script>
+
+<style lang="css" scoped>
+</style>
diff --git a/erpnext/public/js/education/web-academy/components/ContentVideo.vue b/erpnext/public/js/education/web-academy/components/ContentVideo.vue
new file mode 100644
index 00000000000..4fd0b773d15
--- /dev/null
+++ b/erpnext/public/js/education/web-academy/components/ContentVideo.vue
@@ -0,0 +1,21 @@
+<template>
+	<div>
+		Video
+	</div>
+</template>
+
+<script>
+export default {
+
+  name: 'ContentVideo',
+
+  data() {
+    return {
+
+    };
+  },
+};
+</script>
+
+<style lang="css" scoped>
+</style>