diff --git a/erpnext/public/js/education/lms/components/Breadcrumb.vue b/erpnext/public/js/education/lms/components/Breadcrumb.vue
new file mode 100644
index 00000000000..f816c3cebe1
--- /dev/null
+++ b/erpnext/public/js/education/lms/components/Breadcrumb.vue
@@ -0,0 +1,49 @@
+<template>
+	<div>
+		<span v-for="(route, index) in routeData">
+			<a href="route.route">{{ route.label }}</a><span> / </span>
+		</span>
+	</div>
+</template>
+<script type="text/javascript">
+	export default {
+		name: "Breadcrumb",
+		data() {
+			return {
+				routeName: this.$route.name,
+				routeParams: this.$route.params,
+				routeData: [{
+					label: "All Programs",
+					route: "/List/Program"
+				}]
+			}
+		},
+		mounted() {
+			this.buildBreadcrumb()
+		},
+		methods: {
+			buildBreadcrumb() {
+				if(this.routeName == 'program') {
+					return
+				}
+				if(this.routeName == 'course') {
+					let routeObject = {
+						label: this.routeParams.program_name,
+						route: `/Program/${this.routeParams.program_name}`
+					}
+					this.routeData.push(routeObject)
+				}
+				if(this.routeName == 'content') {
+					this.routeData.push({
+						label: this.routeParams.program_name,
+						route: `/Program/${this.routeParams.program_name}`
+					})
+					this.routeData.push({
+						label: this.routeParams.course_name,
+						route: `/Program/${this.routeParams.program_name}/${this.routeParams.course_name}`
+					})
+				}
+			}
+		}
+	};
+</script>
\ No newline at end of file
diff --git a/erpnext/public/js/education/lms/components/ProgramCard.vue b/erpnext/public/js/education/lms/components/ProgramCard.vue
index 76623aae69c..0ecb9c0eab3 100644
--- a/erpnext/public/js/education/lms/components/ProgramCard.vue
+++ b/erpnext/public/js/education/lms/components/ProgramCard.vue
@@ -12,11 +12,11 @@
             </div>
         </router-link>
         <div class='text-right p-3'>
-            <button v-if="program.intro_video" class='btn btn-secondary btn-sm text-white' data-toggle="modal" data-target="#videoModal">Watch Intro</button>
+            <button v-if="program.intro_video" class='btn btn-light btn-sm' data-toggle="modal" data-target="#videoModal">Watch Intro</button>
             <a-button v-if="enrolled" type="dark" size="sm" :route="programPageRoute">
                 {{ buttonName }}
             </a-button>
-            <a v-else-if="isLogin" class='btn btn-secondary btn-sm' @click="enroll()">{{ enrollButton }}</a>
+            <button v-else-if="isLogin" class='btn btn-dark btn-sm' @click="enroll()">{{ enrollButton }}</button>
             <a v-else class='btn btn-secondary btn-sm' href="/login#signup">Sign Up</a>
         </div>
         <VideoModal v-if="program.intro_video" :title="program.program_name" :video="program.intro_video"/>
diff --git a/erpnext/public/js/education/lms/components/Video.vue b/erpnext/public/js/education/lms/components/Video.vue
index cc8293b925b..2d791bd29eb 100644
--- a/erpnext/public/js/education/lms/components/Video.vue
+++ b/erpnext/public/js/education/lms/components/Video.vue
@@ -1,6 +1,6 @@
 <template>
 <div>
-    <section class='video-top-section video-section-bg'>
+    <section class='mt-2'>
     <div>
         <youtube-player :url="contentData.url"/>
         <div class="mt-3 row">
@@ -61,4 +61,4 @@ export default {
         }
     }
 };
-</script>
+</script>
\ No newline at end of file
diff --git a/erpnext/public/js/education/lms/pages/ContentPage.vue b/erpnext/public/js/education/lms/pages/ContentPage.vue
index 224ee03a4ad..542e9371120 100644
--- a/erpnext/public/js/education/lms/pages/ContentPage.vue
+++ b/erpnext/public/js/education/lms/pages/ContentPage.vue
@@ -1,5 +1,6 @@
 <template>
 	<div>
+		<breadcrumb/>
 		<component v-bind:is="currentComponent" :content="content" :type="type">
 			<ContentNavigation :nextContent="nextContent" :nextContentType="nextContentType"/>
 		</component>
@@ -10,6 +11,7 @@ import Article from "../components/Article.vue"
 import Quiz from "../components/Quiz.vue"
 import Video from "../components/Video.vue"
 import ContentNavigation from "../components/ContentNavigation.vue"
+import Breadcrumb from "../components/Breadcrumb.vue"
 
 export default {
 	props:['program_name', 'course_name', 'topic', 'type', 'content'],
@@ -54,7 +56,8 @@ export default {
 		Article,
 		Video,
 		Quiz,
-		ContentNavigation
+		ContentNavigation,
+		Breadcrumb
 	}
 };
 </script>
diff --git a/erpnext/public/js/education/lms/pages/CoursePage.vue b/erpnext/public/js/education/lms/pages/CoursePage.vue
index eb64ec5add8..9aaf8a9858d 100644
--- a/erpnext/public/js/education/lms/pages/CoursePage.vue
+++ b/erpnext/public/js/education/lms/pages/CoursePage.vue
@@ -1,5 +1,6 @@
 <template>
 <div>
+	<breadcrumb></breadcrumb>
 	<TopSection v-bind:title="course.course_name" v-bind:description="course.description">
     </TopSection>
 	<CardList :title="'Topics'" :description="''" :sectionType="'section-padding section-bg'">
@@ -11,7 +12,7 @@
 import TopSection from "../components/TopSection.vue"
 import CardList from "../components/CardList.vue"
 import TopicCard from "../components/TopicCard.vue"
-
+import Breadcrumb from "../components/Breadcrumb.vue"
 
 export default {
 	props: ['program_name','course_name'],
@@ -19,7 +20,8 @@ export default {
     components: {
 		TopSection,
 		CardList,
-		TopicCard
+		TopicCard,
+		Breadcrumb
 	},
 	data() {
 		return {
diff --git a/erpnext/public/js/education/lms/pages/ProgramPage.vue b/erpnext/public/js/education/lms/pages/ProgramPage.vue
index b3c315982a1..3f3a0f70688 100644
--- a/erpnext/public/js/education/lms/pages/ProgramPage.vue
+++ b/erpnext/public/js/education/lms/pages/ProgramPage.vue
@@ -1,5 +1,6 @@
 <template>
 <div>
+	<breadcrumb></breadcrumb>
 	<TopSection v-bind:title="program.program_name" v-bind:description="program.description">
     </TopSection>
 	<CardList :title="'Courses'" :description="''" :sectionType="'section-padding'">
@@ -11,7 +12,7 @@
 import TopSection from "../components/TopSection.vue"
 import CardList from "../components/CardList.vue"
 import CourseCard from "../components/CourseCard.vue"
-
+import Breadcrumb from "../components/Breadcrumb.vue"
 
 export default {
 	props: ['program_name'],
@@ -19,7 +20,8 @@ export default {
     components: {
 		TopSection,
 		CardList,
-		CourseCard
+		CourseCard,
+		Breadcrumb
 	},
 	data() {
 		return {