diff --git a/erpnext/education/doctype/program/program.py b/erpnext/education/doctype/program/program.py
index 38bdb8129b0..dbeda40775f 100644
--- a/erpnext/education/doctype/program/program.py
+++ b/erpnext/education/doctype/program/program.py
@@ -9,6 +9,6 @@ from frappe.model.document import Document
 class Program(Document):
 
 	def get_course_list(self):
-		course_content_list = self.get_all_children()
-		course_list = [frappe.get_doc("Course", course_item.course) for course_item in course_content_list]
+		program_course_list = self.get_all_children()
+		course_list = [frappe.get_doc("Course", program_course.course) for program_course in program_course_list]
 		return course_list
\ No newline at end of file
diff --git a/erpnext/public/js/education/lms/components/CourseCard.vue b/erpnext/public/js/education/lms/components/CourseCard.vue
index ee4ad9571f2..b255a90cba8 100644
--- a/erpnext/public/js/education/lms/components/CourseCard.vue
+++ b/erpnext/public/js/education/lms/components/CourseCard.vue
@@ -5,24 +5,21 @@
             <div class="course-details col-xs-8 col-sm-9 col-md-10">
                 <h5 class="card-title">{{ course.course_name }}</h5>
                 <span class="course-list text-muted" id="getting-started">
-                    Course Content
+                    Topics
                     <ul class="mb-0 mt-1">
-                        <li v-for="content in course.course_content" :key="content.name">
-                            <router-link v-if="isLogin" tag="a" :class="'text-muted'" :to="{name: 'content', params:{program_name: program_name, course: course.name, type:content.content_type, content: content.content} }">
-                                <span style="padding-right: 0.4em"><i :class="iconClass(content.content_type)"></i></span>{{ content.content }}
-                            </router-link>
-                            <div v-else><span style="padding-right: 0.4em"><i :class="iconClass(content.content_type)"></i></span>{{ content.content }}</div>
+                        <li v-for="topic in course.course_topic" :key="topic.name">
+                            <div><span style="padding-right: 0.4em"></span>{{ topic.topic_name }}</div>
                         </li>
                     </ul>
                 </span>
             </div>
             <div class='course-buttons text-center col-xs-4 col-sm-3 col-md-2'>
-                <a-button v-if="isLogin"
-                    :type="buttonType"
+                <a-button
+                    :type="'primary'"
                     size="sm btn-block"
-                    :route="firstContentRoute"
+                    :route="courseRoute"
                 >
-                    {{ buttonName }}
+                    View Course
                 </a-button>
             </div>
         </div>
@@ -36,65 +33,12 @@ import AButton from './Button.vue';
 export default {
     props: ['course', 'program_name'],
     name: "CourseCard",
-    data() {
-        return {
-            courseMeta: {}
-        }
-    },
-    mounted() {
-        if(lms.store.checkLogin()) this.getCourseMeta().then(data => this.courseMeta = data)
-    },
     components: {
         AButton
     },
     computed: {
-        firstContentRoute() {
-            if(lms.store.checkLogin()){
-                return `${this.program_name}/${this.course.name}/${this.courseMeta.content_type}/${this.courseMeta.content}`
-            }
-            else {
-                return {}
-            }
-        },
-        buttonType() {
-            if(lms.store.checkProgramEnrollment(this.program_name)){
-                if (this.courseMeta.flag == "Start Course" ){
-                return "primary"
-                }
-                else if (this.courseMeta.flag == "Completed" ) {
-                    return "success"
-                }
-                else if (this.courseMeta.flag == "Continue" ) {
-                    return "info"
-                }
-            }
-            else {
-                return " hidden"
-            }
-        },
-        isLogin() {
-            return lms.store.checkProgramEnrollment(this.program_name)
-        },
-        buttonName() {
-            if(lms.store.checkLogin()){
-                return this.courseMeta.flag
-            }
-            else {
-                return "Enroll"
-            }
-        }
-    },
-    methods: {
-        iconClass(content_type) {
-            if(content_type == 'Video') return 'fa fa-play'
-            if(content_type == 'Article') return 'fa fa-file-text-o'
-            if(content_type == 'Quiz') return 'fa fa-question-circle-o'
-        },
-        getCourseMeta() {
-			return lms.call('get_course_meta', {
-                    course_name: this.course.name,
-                    program_name: this.program_name
-				})
+        courseRoute() {
+            return `${this.program_name}/${this.course.name}`
         },
     }
 };
@@ -106,11 +50,4 @@ export default {
             margin-top: 1em;
         }
     }
-    li {
-        list-style-type: none;
-        padding: 0;
-    }
-    .fa {
-        font-size: 0.8em;
-    }
 </style>
\ No newline at end of file
diff --git a/erpnext/public/js/education/lms/components/TopicCard.vue b/erpnext/public/js/education/lms/components/TopicCard.vue
new file mode 100644
index 00000000000..a4fc808226f
--- /dev/null
+++ b/erpnext/public/js/education/lms/components/TopicCard.vue
@@ -0,0 +1,118 @@
+
+<template>
+<div class="card mt-3" data-list="getting-started">
+    <div class='card-body'>
+        <div class="row">
+            <div class="course-details col-xs-8 col-sm-9 col-md-10">
+                <h5 class="card-title">{{ course.course_name }}</h5>
+                <span class="course-list text-muted" id="getting-started">
+                    Topics
+                    <ul class="mb-0 mt-1">
+                        <li v-for="topic in course.course_topic" :key="topic.name">
+                            <router-link v-if="isLogin" tag="a" :class="'text-muted'" :to="{name: 'course', params:{program_name: program_name, topic:topic.topic, course: course.name} }">
+                                <span style="padding-right: 0.4em"></span>{{ topic.topic_name }}
+                            </router-link>
+                            <div v-else><span style="padding-right: 0.4em"></span>{{ topic.topic_name }}</div>
+                        </li>
+                    </ul>
+                </span>
+            </div>
+            <div class='course-buttons text-center col-xs-4 col-sm-3 col-md-2'>
+                <a-button v-if="isLogin"
+                    :type="buttonType"
+                    size="sm btn-block"
+                    :route="firstContentRoute"
+                >
+                    {{ buttonName }}
+                </a-button>
+            </div>
+        </div>
+    </div>
+</div>
+</template>
+
+<script>
+import AButton from './Button.vue';
+
+export default {
+    props: ['course', 'program_name'],
+    name: "CourseCard",
+    data() {
+        return {
+            courseMeta: {}
+        }
+    },
+    mounted() {
+        if(lms.store.checkLogin()) this.getCourseMeta().then(data => this.courseMeta = data)
+    },
+    components: {
+        AButton
+    },
+    computed: {
+        firstContentRoute() {
+            if(lms.store.checkLogin()){
+                return `${this.program_name}/${this.course.name}/${this.courseMeta.content_type}/${this.courseMeta.content}`
+            }
+            else {
+                return {}
+            }
+        },
+        buttonType() {
+            if(lms.store.checkProgramEnrollment(this.program_name)){
+                if (this.courseMeta.flag == "Start Course" ){
+                return "primary"
+                }
+                else if (this.courseMeta.flag == "Completed" ) {
+                    return "success"
+                }
+                else if (this.courseMeta.flag == "Continue" ) {
+                    return "info"
+                }
+            }
+            else {
+                return " hidden"
+            }
+        },
+        isLogin() {
+            // return lms.store.checkProgramEnrollment(this.program_name)
+            return true
+        },
+        buttonName() {
+            if(lms.store.checkLogin()){
+                return this.courseMeta.flag
+            }
+            else {
+                return "Enroll"
+            }
+        }
+    },
+    methods: {
+        iconClass(content_type) {
+            if(content_type == 'Video') return 'fa fa-play'
+            if(content_type == 'Article') return 'fa fa-file-text-o'
+            if(content_type == 'Quiz') return 'fa fa-question-circle-o'
+        },
+        getCourseMeta() {
+			return lms.call('get_course_meta', {
+                    course_name: this.course.name,
+                    program_name: this.program_name
+				})
+        },
+    }
+};
+</script>
+
+<style scoped>
+    @media only screen and (max-width: 576px) {
+        .course-buttons {
+            margin-top: 1em;
+        }
+    }
+    li {
+        list-style-type: none;
+        padding: 0;
+
+    .fa {
+        font-size: 0.8em;
+    }
+</style>
\ No newline at end of file
diff --git a/erpnext/public/js/education/lms/lms.js b/erpnext/public/js/education/lms/lms.js
index 9e902a8bd54..5fb7b7d558a 100644
--- a/erpnext/public/js/education/lms/lms.js
+++ b/erpnext/public/js/education/lms/lms.js
@@ -24,7 +24,7 @@ frappe.ready(() => {
 		data: store,
 		methods: {
 			updateEnrolledPrograms() {
-				if(this.isLogin) {
+				if(this.checkLogin()) {
 					lms.call("get_program_enrollments").then(data => {
 						this.enrolledPrograms = data
 					});
@@ -32,7 +32,7 @@ frappe.ready(() => {
 				}
 			},
 			updateEnrolledCourses() {
-				if(this.isLogin) {
+				if(this.checkLogin()) {
 					lms.call("get_all_course_enrollments").then(data => {
 						this.enrolledCourses = data
 					})
@@ -40,15 +40,7 @@ frappe.ready(() => {
 				}
 			},
 			checkLogin() {
-				if(frappe.session.user === "Guest"){
-					if (lms.debug) console.log('No Session')
-					this.isLogin = false
-				}
-				else {
-					if (lms.debug) console.log('Current User: ', frappe.session.user)
-					this.isLogin = true
-				}
-				return this.isLogin
+				return frappe.is_user_logged_in()
 			},
 			updateState() {
 				this.checkLogin()
@@ -81,7 +73,7 @@ frappe.ready(() => {
 		template: "<lms-root/>",
 		components: { lmsRoot },
 		mounted() {
-			if(lms.store.isLogin) lms.store.updateState()
+			lms.store.updateState()
 		}
 	});
 	lms.view.$router.afterEach((to, from) => {
diff --git a/erpnext/public/js/education/lms/pages/CoursePage.vue b/erpnext/public/js/education/lms/pages/CoursePage.vue
new file mode 100644
index 00000000000..bc0ccf889b0
--- /dev/null
+++ b/erpnext/public/js/education/lms/pages/CoursePage.vue
@@ -0,0 +1,47 @@
+<template>
+<div>
+	<TopSection v-bind:title="program.program_name" v-bind:description="program.description">
+    </TopSection>
+	<CardList :title="'Courses'" :description="''" :sectionType="'section-padding section-bg'">
+        <CourseCard slot="card-list-slot" v-for="course in courseData" :course="course" :program_name="program_name" :key="course.name"/>
+    </CardList>
+</div>
+</template>
+<script>
+import TopSection from "../components/TopSection.vue"
+import CardList from "../components/CardList.vue"
+import CourseCard from "../components/CourseCard.vue"
+
+
+export default {
+	props: ['program_name'],
+    name: "CoursePage",
+    components: {
+		TopSection,
+		CardList,
+		CourseCard
+	},
+	data() {
+		return {
+			program: {},
+			courseData: [],
+		}
+	},
+	mounted() {
+		this.getProgramDetails().then(data => this.program = data);
+		this.getCourses().then(data => this.courseData = data);
+	},
+	methods: {
+		getProgramDetails() {
+			return lms.call('get_program_details', {
+				program_name: this.program_name
+			});
+		},
+		getCourses() {
+			return lms.call('get_courses', {
+				program_name: this.program_name
+			})
+		}
+	}
+};
+</script>
\ No newline at end of file
diff --git a/erpnext/public/js/education/lms/pages/ProgramPage.vue b/erpnext/public/js/education/lms/pages/ProgramPage.vue
index fd216ea17de..9d7148de93e 100644
--- a/erpnext/public/js/education/lms/pages/ProgramPage.vue
+++ b/erpnext/public/js/education/lms/pages/ProgramPage.vue
@@ -27,29 +27,11 @@ export default {
 			courseData: [],
 		}
 	},
-    beforeMount() {
-        // if(lms.store.isLogin) lms.store.updateCompletedCourses()
-    },
 	mounted() {
 		this.getProgramDetails().then(data => this.program = data);
 		this.getCourses().then(data => this.courseData = data);
-		// lms.on(`course-completed`, (course_name) => {
-		// 	const course = this.courseData.findIndex(c => c.name === course_name);
-		// 	this.courseData[course].completed = true;
-		// });
 	},
 	methods: {
-		// startCourse() {
-		// 	this.getContentForNextCourse()
-		// 		.then((data) => 
-		// 			this.$router.push(`/Program/${this.program_name}/${data.course}/${data.content_type}/${data.content}`)
-		// 		)
-		// },
-		// getContentForNextCourse() {
-		// 	return lms.call('get_continue_data', {
-		// 		program_name: this.program_name
-		// 	});
-		// },
 		getProgramDetails() {
 			return lms.call('get_program_details', {
 				program_name: this.program_name
diff --git a/erpnext/public/js/education/lms/routes.js b/erpnext/public/js/education/lms/routes.js
index b0ef17f4337..c1259c9a0c9 100644
--- a/erpnext/public/js/education/lms/routes.js
+++ b/erpnext/public/js/education/lms/routes.js
@@ -1,5 +1,6 @@
 import Home from "./pages/Home.vue";
 import ProgramPage from "./pages/ProgramPage.vue";
+import CoursePage from "./pages/CoursePage.vue";
 import ContentPage from "./pages/ContentPage.vue";
 import ListPage from "./pages/ListPage.vue";
 import ProfilePage from "./pages/ProfilePage.vue";
@@ -15,9 +16,15 @@ const routes = [{
 		component: ProgramPage,
 		props: true
 	},
+	{
+		name: 'course',
+		path: '/Program/:program_name/:course/',
+		component: CoursePage,
+		props: true,
+	},
 	{
 		name: 'content',
-		path: '/Program/:program_name/:course/:type/:content',
+		path: '/Program/:program_name/:course/:topic/:type/:content',
 		component: ContentPage,
 		props: true,
 		beforeEnter: (to, from, next) => {
diff --git a/erpnext/www/test_lms.py b/erpnext/www/test_lms.py
index e69de29bb2d..e63f4c913e0 100644
--- a/erpnext/www/test_lms.py
+++ b/erpnext/www/test_lms.py
@@ -0,0 +1,11 @@
+# -*- coding: utf-8 -*-
+# Copyright (c) 2018, Frappe Technologies and Contributors
+# See license.txt
+from __future__ import unicode_literals
+from erpnext.education.doctype.program.test_program import make_program_and_linked_courses
+
+import frappe
+import unittest
+
+class TestLms(unittest.TestCase):
+    pass
\ No newline at end of file