diff --git a/erpnext/public/js/education/lms/components/ProfileInfo.vue b/erpnext/public/js/education/lms/components/ProfileInfo.vue
index 3cc3c745c11..c58eb0bd249 100644
--- a/erpnext/public/js/education/lms/components/ProfileInfo.vue
+++ b/erpnext/public/js/education/lms/components/ProfileInfo.vue
@@ -1,6 +1,6 @@
 <template>
 <section>
-		<div>
+		<div class="py-5">
 			<div class="row">
 				<div class="col-sm-3 text-center">
 					<span class="sidebar-standard-image" title="Lorem Ipsum">
@@ -72,18 +72,20 @@ export default {
 };
 </script>
 <style scoped>
-	.edit-button{
-		position:absolute;
-		top:0;
-		right:0;
+	.edit-button {
+		position: absolute;
+		top: 0;
+		right: 0;
 	}
+
 	.standard-image {
 		font-size: 72px;
 		border-radius: 6px;
 	}
+
 	ul {
-        list-style-type: none;
-        padding: 0;
+		list-style-type: none;
+		padding: 0;
 		margin: 0
-    }
+	}
 </style>
\ No newline at end of file
diff --git a/erpnext/public/js/education/lms/components/ProgressCard.vue b/erpnext/public/js/education/lms/components/ProgressCard.vue
index f6a70b7442f..214c09fdf58 100644
--- a/erpnext/public/js/education/lms/components/ProgressCard.vue
+++ b/erpnext/public/js/education/lms/components/ProgressCard.vue
@@ -11,8 +11,8 @@
                     Courses
                     <ul class="mb-0 mt-1">
                         <li v-for="item in programData.progress" :key="item.name">
-                            <span v-if="item.is_complete"><i class="text-success fa fa-check-circle" aria-hidden="true"></i></span> 
-                            <span v-else><i class="text-secondary fa fa-circle-o" aria-hidden="true"></i></span> 
+                            <span v-if="item.is_complete"><i class="text-success fa fa-check-circle" aria-hidden="true"></i></span>
+                            <span v-else><i class="text-secondary fa fa-circle-o" aria-hidden="true"></i></span>
                             {{ item.course_name }}
                         </li>
                     </ul>
@@ -82,11 +82,13 @@ export default {
 };
 </script>
 <style scoped>
-    a {
-        text-decoration: none;
-    }
     li {
         list-style-type: none;
         padding: 0;
     }
+
+	a {
+		text-decoration: none;
+		color: black;
+	}
 </style>
diff --git a/erpnext/public/js/education/lms/pages/ProfilePage.vue b/erpnext/public/js/education/lms/pages/ProfilePage.vue
index f7399b97786..06b6a79cb3a 100644
--- a/erpnext/public/js/education/lms/pages/ProfilePage.vue
+++ b/erpnext/public/js/education/lms/pages/ProfilePage.vue
@@ -7,7 +7,7 @@
 	<CardList :title="'Quiz Attempts'" :description="''" :sectionType="'section-padding section'">
         <ScoreCard slot="card-list-slot" v-for="program in enrolledPrograms" :program="program" :key="program"/>
     </CardList>
-	
+
 </div>
 </template>
 <script>
@@ -24,9 +24,9 @@ export default {
         AButton: Button,
 		TopSection,
 		CardList,
-		ProfileInfo,		
+		ProfileInfo,
 		ProgressCard,
-		ScoreCard		
+		ScoreCard
 	},
 	data() {
 		return {