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 b0fc0e6..7fc1173 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 @@
     	});
     },
     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 919a3a9..0c03cf6 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 93%
rename from erpnext/public/js/education/lms/components/AcademyCourseCard.vue
rename to erpnext/public/js/education/lms/components/CourseCard.vue
index 405e7ba..200659b 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 180acb2..6842de4 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 7495717..9a64177 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 c8a7278..23e7a96 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 98%
rename from erpnext/public/js/education/lms/components/ContentQuiz.vue
rename to erpnext/public/js/education/lms/components/Quiz.vue
index dd32bf4..d3dc1c7 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 bfffec2..b943856 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 abbce3a..03b5f99 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 822b834..a9b227f 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 95a6178..26d3bf6 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 260aefc..477de46 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 @@
 	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 @@
 	  	});
 	},
 	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 0931a19..f823d38 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 @@
     	}
     },
     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 9a6c29a..c0d4f15 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 @@
     name: "ProgramPage",
     components: {
         AButton: Button,
-		AcademyTopSection,
-		AcademyList,
-		AcademyCourseCard
+		TopSection,
+		CardList,
+		CourseCard
 	},
 	data() {
 		return {