diff --git a/erpnext/public/js/education/lms/components/ContentArticle.vue b/erpnext/public/js/education/lms/components/Article.vue
similarity index 79%
rename from erpnext/public/js/education/lms/components/ContentArticle.vue
rename to erpnext/public/js/education/lms/components/Article.vue
index b0fc0e6c5f5..7fc1173bc9c 100644
--- a/erpnext/public/js/education/lms/components/ContentArticle.vue
+++ b/erpnext/public/js/education/lms/components/Article.vue
@@ -1,8 +1,8 @@
 <template>
 <div>
-    <ContentTitle :title="contentData.title" :author="contentData.author" :publishDate="contentData.publish_date">
+    <Title :title="contentData.title" :author="contentData.author" :publishDate="contentData.publish_date">
         <slot></slot>
-    </ContentTitle>
+    </Title>
     <section class="article-content-section">
         <div class='container'>
             <div class="content" v-html="contentData.content"></div>
@@ -17,10 +17,10 @@
 </div>
 </template>
 <script>
-import ContentTitle from './ContentTitle.vue'
+import Title from './Title.vue'
 export default {
 	props: ['content', 'type'],
-	name: 'ContentArticle',
+	name: 'Article',
 	data() {
     	return {
     		contentData: ''
@@ -38,7 +38,7 @@ export default {
     	});
     },
     components: {
-        ContentTitle
+        Title
     }
 };
 </script>
diff --git a/erpnext/public/js/education/lms/components/AcademyList.vue b/erpnext/public/js/education/lms/components/CardList.vue
similarity index 94%
rename from erpnext/public/js/education/lms/components/AcademyList.vue
rename to erpnext/public/js/education/lms/components/CardList.vue
index 919a3a98ca3..0c03cf6265a 100644
--- a/erpnext/public/js/education/lms/components/AcademyList.vue
+++ b/erpnext/public/js/education/lms/components/CardList.vue
@@ -13,6 +13,6 @@
 <script>
 export default {
     props:['title', 'description'],
-    name: "AcademyList",
+    name: "CardList",
 };
 </script>
\ No newline at end of file
diff --git a/erpnext/public/js/education/lms/components/AcademyCourseCard.vue b/erpnext/public/js/education/lms/components/CourseCard.vue
similarity index 94%
rename from erpnext/public/js/education/lms/components/AcademyCourseCard.vue
rename to erpnext/public/js/education/lms/components/CourseCard.vue
index 405e7ba8f01..200659bf2b9 100644
--- a/erpnext/public/js/education/lms/components/AcademyCourseCard.vue
+++ b/erpnext/public/js/education/lms/components/CourseCard.vue
@@ -27,13 +27,13 @@
 
 <script>
 import AButton from './Button.vue';
-import AcademyCourseCardButton from './AcademyCourseCardButton.vue'
+import CourseCardButton from './CourseCardButton.vue'
 
 export default {
     props: ['course', 'courseMeta', 'program_name'],
-    name: "AcademyCourseCard",
+    name: "CourseCard",
     components: {
-        AcademyCourseCardButton,
+        CourseCardButton,
         AButton
     },
     computed: {
diff --git a/erpnext/public/js/education/lms/components/AcademyCourseCardButton.vue b/erpnext/public/js/education/lms/components/CourseCardButton.vue
similarity index 95%
rename from erpnext/public/js/education/lms/components/AcademyCourseCardButton.vue
rename to erpnext/public/js/education/lms/components/CourseCardButton.vue
index 180acb2b5f0..6842de49286 100644
--- a/erpnext/public/js/education/lms/components/AcademyCourseCardButton.vue
+++ b/erpnext/public/js/education/lms/components/CourseCardButton.vue
@@ -4,7 +4,7 @@
 <script>
 export default {
     props: ['course', 'nextContent', 'nextContentType'],
-    name: "AcademyCourseCardButton",
+    name: "CourseCardButton",
     data() {
         return {
             buttonName: 'Start',
diff --git a/erpnext/public/js/education/lms/components/ContentNavigation.vue b/erpnext/public/js/education/lms/components/Navigation.vue
similarity index 98%
rename from erpnext/public/js/education/lms/components/ContentNavigation.vue
rename to erpnext/public/js/education/lms/components/Navigation.vue
index 7495717ec13..9a64177f86c 100644
--- a/erpnext/public/js/education/lms/components/ContentNavigation.vue
+++ b/erpnext/public/js/education/lms/components/Navigation.vue
@@ -9,7 +9,7 @@
 <script>
 export default {
 	props: ['nextContent', 'nextContentType'],
-	name: 'ContentNavigation',
+	name: 'Navigation',
 	methods: {
 		goNext() {
 			if(this.$route.params.type != "Quiz"){
diff --git a/erpnext/public/js/education/lms/components/AcademyProgramCard.vue b/erpnext/public/js/education/lms/components/ProgramCard.vue
similarity index 98%
rename from erpnext/public/js/education/lms/components/AcademyProgramCard.vue
rename to erpnext/public/js/education/lms/components/ProgramCard.vue
index c8a7278219b..23e7a963816 100644
--- a/erpnext/public/js/education/lms/components/AcademyProgramCard.vue
+++ b/erpnext/public/js/education/lms/components/ProgramCard.vue
@@ -28,7 +28,7 @@
 import AButton from './Button.vue';
 export default {
     props: ['program', 'enrolled'],
-    name: "AcademyProgramCard",
+    name: "ProgramCard",
     data() {
     	return {
             isLogin: lms.store.isLogin
diff --git a/erpnext/public/js/education/lms/components/ContentQuiz.vue b/erpnext/public/js/education/lms/components/Quiz.vue
similarity index 99%
rename from erpnext/public/js/education/lms/components/ContentQuiz.vue
rename to erpnext/public/js/education/lms/components/Quiz.vue
index dd32bf40d04..d3dc1c7b5d4 100644
--- a/erpnext/public/js/education/lms/components/ContentQuiz.vue
+++ b/erpnext/public/js/education/lms/components/Quiz.vue
@@ -42,7 +42,7 @@
 import QuizSingleChoice from "./Quiz/QuizSingleChoice.vue"
 export default {
 	props: ['content', 'type'],
-	name: 'ContentQuiz',
+	name: 'Quiz',
 	data() {
     	return {
     		quizData: '',
diff --git a/erpnext/public/js/education/lms/components/ContentTitle.vue b/erpnext/public/js/education/lms/components/Title.vue
similarity index 96%
rename from erpnext/public/js/education/lms/components/ContentTitle.vue
rename to erpnext/public/js/education/lms/components/Title.vue
index bfffec27e55..b9438566899 100644
--- a/erpnext/public/js/education/lms/components/ContentTitle.vue
+++ b/erpnext/public/js/education/lms/components/Title.vue
@@ -20,7 +20,7 @@
 <script>
 export default {
     props: ['title', 'publishDate', 'author'],
-    name: 'ContentTitle',
+    name: 'Title',
     data() {
         return {
 
diff --git a/erpnext/public/js/education/lms/components/AcademyTopSection.vue b/erpnext/public/js/education/lms/components/TopSection.vue
similarity index 93%
rename from erpnext/public/js/education/lms/components/AcademyTopSection.vue
rename to erpnext/public/js/education/lms/components/TopSection.vue
index abbce3a3ce6..03b5f9945a3 100644
--- a/erpnext/public/js/education/lms/components/AcademyTopSection.vue
+++ b/erpnext/public/js/education/lms/components/TopSection.vue
@@ -19,6 +19,6 @@
 
 export default {
 	props: ['title', 'description'],
-    name: "AcademyTopSection",
+    name: "TopSection",
 };
 </script>
\ No newline at end of file
diff --git a/erpnext/public/js/education/lms/components/AcademyTopSectionButton.vue b/erpnext/public/js/education/lms/components/TopSectionButton.vue
similarity index 98%
rename from erpnext/public/js/education/lms/components/AcademyTopSectionButton.vue
rename to erpnext/public/js/education/lms/components/TopSectionButton.vue
index 822b834d475..a9b227f5e03 100644
--- a/erpnext/public/js/education/lms/components/AcademyTopSectionButton.vue
+++ b/erpnext/public/js/education/lms/components/TopSectionButton.vue
@@ -4,7 +4,7 @@
 </template>
 <script>
 export default {
-    name: "AcademyTopSectionButton",
+    name: "TopSectionButton",
     data() {
         return {
             buttonName: '',
diff --git a/erpnext/public/js/education/lms/components/ContentVideo.vue b/erpnext/public/js/education/lms/components/Video.vue
similarity index 98%
rename from erpnext/public/js/education/lms/components/ContentVideo.vue
rename to erpnext/public/js/education/lms/components/Video.vue
index 95a6178f548..26d3bf698c6 100644
--- a/erpnext/public/js/education/lms/components/ContentVideo.vue
+++ b/erpnext/public/js/education/lms/components/Video.vue
@@ -39,7 +39,7 @@
 <script>
 export default {
 	props: ['content', 'type'],
-	name: 'ContentVideo',
+	name: 'Video',
 	data() {
     	return {
     		contentData: ''
diff --git a/erpnext/public/js/education/lms/pages/CoursePage.vue b/erpnext/public/js/education/lms/pages/CoursePage.vue
index 260aefccdad..477de4696b5 100644
--- a/erpnext/public/js/education/lms/pages/CoursePage.vue
+++ b/erpnext/public/js/education/lms/pages/CoursePage.vue
@@ -1,15 +1,15 @@
 <template>
 	<div>
 		<component v-bind:is="currentComponent" :content="content" :type="type">
-			<ContentNavigation :nextContent="nextContent" :nextContentType="nextContentType"/>
+			<Navigation :nextContent="nextContent" :nextContentType="nextContentType"/>
 		</component>
 	</div>
 </template>
 <script>
-import ContentArticle from "../components/ContentArticle.vue"
-import ContentQuiz from "../components/ContentQuiz.vue"
-import ContentVideo from "../components/ContentVideo.vue"
-import ContentNavigation from "../components/ContentNavigation.vue"
+import Article from "../components/Article.vue"
+import Quiz from "../components/Quiz.vue"
+import Video from "../components/Video.vue"
+import Navigation from "../components/Navigation.vue"
 
 export default {
 	props:['program_name', 'course', 'type', 'content'],
@@ -23,13 +23,13 @@ export default {
 	computed: {
 	  currentComponent: function() {
 	  	if(this.type === "Article") {
-	  		return 'ContentArticle'
+	  		return 'Article'
 	  	}
 	  	else if(this.type === "Quiz") {
-	  		return 'ContentQuiz'
+	  		return 'Quiz'
 	  	}
 	  	else if(this.type === "Video") {
-	  		return 'ContentVideo'
+	  		return 'Video'
 	  	}
 	  },
 	},
@@ -47,10 +47,10 @@ export default {
 	  	});
 	},
 	components: {
-		ContentArticle,
-		ContentVideo,
-		ContentQuiz,
-		ContentNavigation
+		Article,
+		Video,
+		Quiz,
+		Navigation
 	}
 };
 </script>
diff --git a/erpnext/public/js/education/lms/pages/Home.vue b/erpnext/public/js/education/lms/pages/Home.vue
index 0931a19fc25..f823d380e82 100644
--- a/erpnext/public/js/education/lms/pages/Home.vue
+++ b/erpnext/public/js/education/lms/pages/Home.vue
@@ -1,18 +1,18 @@
 <template>
 <div>
-	<AcademyTopSection :title="portal.title" :description="portal.description">
-        <AcademyTopSectionButton/>
-    </AcademyTopSection>
-	<AcademyList :title="'Featured Programs'" :description="'Master ERPNext'">
-        <AcademyProgramCard v-for="item in featuredPrograms" :key="item.program.name" :program="item.program" :enrolled="item.is_enrolled"/>
-    </AcademyList>
+	<TopSection :title="portal.title" :description="portal.description">
+        <TopSectionButton/>
+    </TopSection>
+	<CardList :title="'Featured Programs'" :description="'Master ERPNext'">
+        <ProgramCard v-for="item in featuredPrograms" :key="item.program.name" :program="item.program" :enrolled="item.is_enrolled"/>
+    </CardList>
 </div>
 </template>
 <script>
-import AcademyTopSection from "../components/AcademyTopSection.vue"
-import AcademyList from "../components/AcademyList.vue"
-import AcademyProgramCard from "../components/AcademyProgramCard.vue"
-import AcademyTopSectionButton from "../components/AcademyTopSectionButton.vue"
+import TopSection from "../components/TopSection.vue"
+import CardList from "../components/CardList.vue"
+import ProgramCard from "../components/ProgramCard.vue"
+import TopSectionButton from "../components/TopSectionButton.vue"
 
 export default {
     name: "Home",
@@ -24,10 +24,10 @@ export default {
     	}
     },
     components: {
-		AcademyTopSection,
-        AcademyList,
-        AcademyProgramCard,
-        AcademyTopSectionButton
+		TopSection,
+        CardList,
+        ProgramCard,
+        TopSectionButton
     },
     beforeMount() {
         // this.updateEnrolledPrograms().then(data => {
diff --git a/erpnext/public/js/education/lms/pages/ProgramPage.vue b/erpnext/public/js/education/lms/pages/ProgramPage.vue
index 9a6c29a9c92..c0d4f155721 100644
--- a/erpnext/public/js/education/lms/pages/ProgramPage.vue
+++ b/erpnext/public/js/education/lms/pages/ProgramPage.vue
@@ -1,19 +1,19 @@
 <template>
 <div>
-	<AcademyTopSection v-bind:title="program.program_name" v-bind:description="program.description">
+	<TopSection v-bind:title="program.program_name" v-bind:description="program.description">
 		<!-- <a-button @click="startCourse">Start Course</a-button>
 		<a-button @click="continueCourse">Continue Course</a-button> -->
-    </AcademyTopSection>
-	<AcademyList :title="'Courses'" :description="''">
-        <AcademyCourseCard v-for="course in course_data" :course="course.course" :program_name="program_name" :courseMeta="course.meta" :key="course.meta.flag"/>
-    </AcademyList>
+    </TopSection>
+	<CardList :title="'Courses'" :description="''">
+        <CourseCard v-for="course in course_data" :course="course.course" :program_name="program_name" :courseMeta="course.meta" :key="course.meta.flag"/>
+    </CardList>
 </div>
 </template>
 <script>
 import Button from '../components/Button.vue';
-import AcademyTopSection from "../components/AcademyTopSection.vue"
-import AcademyList from "../components/AcademyList.vue"
-import AcademyCourseCard from "../components/AcademyCourseCard.vue"
+import TopSection from "../components/TopSection.vue"
+import CardList from "../components/CardList.vue"
+import CourseCard from "../components/CourseCard.vue"
 
 
 export default {
@@ -21,9 +21,9 @@ export default {
     name: "ProgramPage",
     components: {
         AButton: Button,
-		AcademyTopSection,
-		AcademyList,
-		AcademyCourseCard
+		TopSection,
+		CardList,
+		CourseCard
 	},
 	data() {
 		return {