diff --git a/erpnext/public/js/education/lms/components/CourseCard.vue b/erpnext/public/js/education/lms/components/CourseCard.vue
index da700eb82b..223654f27e 100644
--- a/erpnext/public/js/education/lms/components/CourseCard.vue
+++ b/erpnext/public/js/education/lms/components/CourseCard.vue
@@ -9,18 +9,21 @@
                 <h5 class="card-title">{{ course.course_name }}</h5>
                 <span class="course-list text-muted" id="getting-started">
                     Topics
-                    <ul class="mb-0 mt-1">
+                    <ul class="mb-0 mt-1" style="padding-left: 1.5em;">
                         <li v-for="topic in course.topics" :key="topic.name">
-                            <div><span style="padding-right: 0.4em"></span>{{ topic.topic_name }}</div>
+                            <div>{{ topic.topic_name }}</div>
                         </li>
                     </ul>
                 </span>
             </div>
-            <div class='text-right p-3'>
-                <div class='course-buttons text-center'>
+            <div class='p-3' style="display: flex; justify-content: space-between;">
+                <div>
+                    <span v-if="complete"><i class="mr-2 text-success fa fa-check-circle" aria-hidden="true"></i>Course Complete</span>
+                </div>
+                <div class='text-right'>
                     <a-button
-                        :type="buttonType"
-                        size="sm btn-block"
+                        :type="'primary'"
+                        size="sm"
                         :route="courseRoute"
                     >
                         {{ buttonName }}
@@ -42,30 +45,27 @@ export default {
     },
     data() {
         return {
-            courseMeta: {},
+            courseDetails: {},
         }
     },
     mounted() {
-        if(lms.store.checkLogin()) this.getCourseMeta().then(data => this.courseMeta = data)
+        if(lms.store.checkLogin()) this.getCourseDetails().then(data => this.courseDetails = data)
     },
     computed: {
         courseRoute() {
             return `${this.program_name}/${this.course.name}`
         },
-        buttonType() {
+        complete() {
             if(lms.store.checkProgramEnrollment(this.program_name)){
-                if (this.courseMeta.flag == "Start Course" ){
-                return "primary"
+                if (this.courseDetails.flag === "Completed" ) {
+                    return true
                 }
-                else if (this.courseMeta.flag == "Completed" ) {
-                    return "success"
-                }
-                else if (this.courseMeta.flag == "Continue" ) {
-                    return "info"
+                else {
+                    return false
                 }
             }
             else {
-                return "info"
+                return false
             }
         },
         isLogin() {
@@ -73,7 +73,7 @@ export default {
         },
         buttonName() {
             if(lms.store.checkProgramEnrollment(this.program_name)){
-                return this.courseMeta.flag
+                return "Start Course"
             }
             else {
                 return "Explore"
@@ -81,7 +81,7 @@ export default {
         }
     },
     methods: {
-        getCourseMeta() {
+        getCourseDetails() {
 			return lms.call('get_student_course_details', {
                     course_name: this.course.name,
                     program_name: this.program_name
@@ -89,34 +89,4 @@ export default {
         },
     }
 };
-</script>
-
-<style scoped>
-    .course-buttons {
-        margin-bottom: 1em;
-    }
-
-    div.card-hero-img {
-        height: 220px;
-        background-size: cover;
-        background-repeat: no-repeat;
-        background-position: center;
-        background-color: rgb(250, 251, 252);
-    }
-
-    .card-image-wrapper {
-        display: flex;
-        overflow: hidden;
-        height: 220px;
-        background-color: rgb(250, 251, 252);
-    }
-
-    .image-body {
-        align-self: center;
-        color: #d1d8dd;
-        font-size: 24px;
-        font-weight: 600;
-        line-height: 1;
-        padding: 20px;
-    }
-</style>
\ No newline at end of file
+</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 0ecb9c0eab..26d3882721 100644
--- a/erpnext/public/js/education/lms/components/ProgramCard.vue
+++ b/erpnext/public/js/education/lms/components/ProgramCard.vue
@@ -3,12 +3,12 @@
     <div class="card h-100">
         <router-link :to="'/Program/' + program.name">
             <div class="card-hero-img" v-if="program.hero_image" v-bind:style="{ 'background-image': 'url(' + image + ')' }"></div>
-            <div v-else class="card-image-wrapper">
+            <div v-else class="card-image-wrapper text-center">
                 <div class="image-body">{{ program.program_name }}</div>
             </div>
             <div class='card-body'>
                 <h5 class='card-title'>{{ program.program_name }}</h5>
-                <div>{{ program.description.substring(0,200) }}...</div>
+                <div class="text-muted">{{ program.description.substring(0,200) }}...</div>
             </div>
         </router-link>
         <div class='text-right p-3'>
@@ -79,28 +79,4 @@ export default {
     a.btn-secondary {
         color: white !important;
     }
-
-    div.card-hero-img {
-        height: 220px;
-        background-size: cover;
-        background-repeat: no-repeat;
-        background-position: center;
-        background-color: rgb(250, 251, 252);
-    }
-
-    .card-image-wrapper {
-        display: flex;
-        overflow: hidden;
-        height: 220px;
-        background-color: rgb(250, 251, 252);
-    }
-
-    .image-body {
-        align-self: center;
-        color: #d1d8dd;
-        font-size: 24px;
-        font-weight: 600;
-        line-height: 1;
-        padding: 20px;
-    }
 </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 214c09fdf5..77fb6ef5c1 100644
--- a/erpnext/public/js/education/lms/components/ProgressCard.vue
+++ b/erpnext/public/js/education/lms/components/ProgressCard.vue
@@ -1,15 +1,13 @@
 <template>
-    <div class='card-deck mt-3'>
-    <div class="card">
-        <div class='card-body'>
-            <div class="row">
-            <div class="course-details col-xs-7 col-sm-8 col-md-9">
+    <div class='mt-3 col-md-4 col-sm-12'>
+        <div class="card h-100">
+            <div class='card-body'>
                 <router-link :to="'/Program/' + programData.name">
                     <h5 class='card-title'>{{ programData.program }}</h5>
                 </router-link>
                 <span class="course-list text-muted" id="getting-started">
                     Courses
-                    <ul class="mb-0 mt-1">
+                    <ul class="mb-0 mt-1 list-unstyled" style="padding-left: 1.5em;">
                         <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>
@@ -18,19 +16,20 @@
                     </ul>
                 </span>
             </div>
-            <div class='course-buttons text-center col-xs-5 col-sm-4 col-md-3'>
-                <a-button
-                    :type="buttonType"
-                    size="sm btn-block"
-                    :route="programRoute"
-                >
-                    {{ buttonName }}
-                </a-button>
+            <div class='p-3' style="display: flex; justify-content: space-between;">
+                <div></div>
+                <div class='text-right'>
+                    <a-button
+                        :type="buttonType"
+                        size="sm btn-block"
+                        :route="programRoute"
+                    >
+                        {{ buttonName }}
+                    </a-button>
+                </div>
             </div>
         </div>
-        </div>
     </div>
-</div>
 </template>
 <script>
 import AButton from './Button.vue';
@@ -82,10 +81,6 @@ export default {
 };
 </script>
 <style scoped>
-    li {
-        list-style-type: none;
-        padding: 0;
-    }
 
 	a {
 		text-decoration: none;
diff --git a/erpnext/public/js/education/lms/components/ScoreCard.vue b/erpnext/public/js/education/lms/components/ScoreCard.vue
index cbb6a048d4..679cf4e8fe 100644
--- a/erpnext/public/js/education/lms/components/ScoreCard.vue
+++ b/erpnext/public/js/education/lms/components/ScoreCard.vue
@@ -1,28 +1,29 @@
 <template>
-    <div v-if="quizData" class='card-deck mt-3'>
-        <div class="card">
+    <div v-if="quizData" class='mt-3 col-md-4 col-sm-12'>
+        <div class="card h-100">
             <div class='card-body'>
-                <div class="row">
-                    <div class="course-details col-xs-7 col-sm-8 col-md-9">
-                        <div class="course-details">
-                            <h5 class='card-title'>{{ quizData.program }}</h5>
-                            <div v-for="attempt in quizData.quiz_attempt" :key="attempt.content" class="course-list" id="getting-started">
-                                <div><b>{{ attempt.content }}</b>
-                                <span v-if="attempt.is_complete">- {{ attempt.score }} - {{attempt.result }}</span>
-                                <span v-else>- Unattempted</span>
-                                </div>
-                            </div>
-                        </div>
+                <h5 class='card-title'>{{ quizData.program }}</h5>
+                <div v-for="attempt in quizData.quiz_attempt" :key="attempt.content" class="course-list" id="getting-started">
+                    <div>
+                        {{ attempt.content }}
+                        <ul v-if="attempt.is_complete">
+                            <li><span class="text-muted">Score: </span>{{ attempt.score }}</li>
+                            <li><span class="text-muted">Status: </span>{{attempt.result }}</li>
+                        </ul>
+                        <span v-else>- Unattempted</span>
                     </div>
-                    <div class='course-buttons text-center col-xs-5 col-sm-4 col-md-3'>
-                        <a-button
+                </div>
+            </div>
+            <div class='p-3' style="display: flex; justify-content: space-between;">
+                <div></div>
+                <div class='text-right'>
+                    <a-button
                             :type="'primary'"
                             size="sm btn-block"
                             :route="programRoute"
                         >
                             Go To Program
                         </a-button>
-                    </div>
                 </div>
             </div>
         </div>
diff --git a/erpnext/public/js/education/lms/components/TopicCard.vue b/erpnext/public/js/education/lms/components/TopicCard.vue
index 18574fb595..3e930df07b 100644
--- a/erpnext/public/js/education/lms/components/TopicCard.vue
+++ b/erpnext/public/js/education/lms/components/TopicCard.vue
@@ -10,25 +10,28 @@
                 <h5 class="card-title">{{ topic.topic_name }}</h5>
                 <span class="course-list text-muted" id="getting-started">
                     Content
-                    <ul class="mb-0 mt-1">
+                    <ul class="mb-0 mt-1" style="padding-left: 1.5em;">
                         <li v-for="content in topic.topic_content" :key="content.name">
                             <router-link v-if="isLogin" tag="a" :class="'text-muted'" :to="{name: 'content', params:{program_name: program_name, topic:topic.name, course_name: course_name, type:content.content_type, content: content.content} }">
-                                <span style="padding-right: 0.4em"></span>{{ content.content }}
+                                {{ content.content }}
                             </router-link>
                             <div v-else><span style="padding-right: 0.4em"></span>{{ content.content }}</div>
                         </li>
                     </ul>
                 </span>
             </div>
-            <div v-if="isLogin" class='text-right p-3'>
-                <div class='course-buttons text-center'>
+            <div v-if="isLogin" class='p-3' style="display: flex; justify-content: space-between;">
+                <div>
+                    <span v-if="complete"><i class="mr-2 text-success fa fa-check-circle" aria-hidden="true"></i>Course Complete</span>
+                </div>
+                <div class='text-right'>
                     <a-button
-                        :type="buttonType"
-                        size="sm btn-block"
-                        :route="firstContentRoute"
-                    >
-                        {{ buttonName }}
-                    </a-button>
+                    :type="'primary'"
+                    size="sm"
+                    :route="firstContentRoute"
+                >
+                    {{ buttonName }}
+                </a-button>
                 </div>
             </div>
         </div>
@@ -43,11 +46,11 @@ export default {
     name: "TopicCard",
     data() {
         return {
-            topicMeta: {}
+            topicDetails: {}
         }
     },
     mounted() {
-        if(lms.store.checkLogin()) this.getTopicMeta().then(data => this.topicMeta = data)
+        if(lms.store.checkLogin()) this.gettopicDetails().then(data => this.topicDetails = data)
     },
     components: {
         AButton
@@ -55,26 +58,23 @@ export default {
     computed: {
         firstContentRoute() {
             if(lms.store.checkLogin()){
-                return `/Program/${this.program_name}/${this.course_name}/${this.topic.name}/${this.topicMeta.content_type}/${this.topicMeta.content}`
+                return `/Program/${this.program_name}/${this.course_name}/${this.topic.name}/${this.topicDetails.content_type}/${this.topicDetails.content}`
             }
             else {
                 return {}
             }
         },
-        buttonType() {
+        complete() {
             if(lms.store.checkProgramEnrollment(this.program_name)){
-                if (this.topicMeta.flag == "Start Topic" ){
-                return "primary"
+                if (this.topicDetails.flag === "Completed" ) {
+                    return true
                 }
-                else if (this.topicMeta.flag == "Completed" ) {
-                    return "success"
-                }
-                else if (this.topicMeta.flag == "Continue" ) {
-                    return "info"
+                else {
+                    return false
                 }
             }
             else {
-                return "info"
+                return false
             }
         },
         isLogin() {
@@ -83,7 +83,12 @@ export default {
         },
         buttonName() {
             if(lms.store.checkProgramEnrollment(this.program_name)){
-                return this.topicMeta.flag
+                if (this.topicDetails.flag == 'Continue'){
+                    return 'Continue'
+                }
+                else {
+                    return 'Start Topic'
+                }
             }
             else {
                 return "Explore"
@@ -96,7 +101,7 @@ export default {
             if(content_type == 'Article') return 'fa fa-file-text-o'
             if(content_type == 'Quiz') return 'fa fa-question-circle-o'
         },
-        getTopicMeta() {
+        gettopicDetails() {
 			return lms.call('get_student_topic_details', {
                     topic_name: this.topic.name,
                     course_name: this.course_name,
@@ -104,34 +109,4 @@ export default {
         },
     }
 };
-</script>
-
-<style scoped>
-    .course-buttons {
-        margin-bottom: 1em;
-    }
-
-    div.card-hero-img {
-        height: 220px;
-        background-size: cover;
-        background-repeat: no-repeat;
-        background-position: center;
-        background-color: rgb(250, 251, 252);
-    }
-
-    .card-image-wrapper {
-        display: flex;
-        overflow: hidden;
-        height: 220px;
-        background-color: rgb(250, 251, 252);
-    }
-
-    .image-body {
-        align-self: center;
-        color: #d1d8dd;
-        font-size: 24px;
-        font-weight: 600;
-        line-height: 1;
-        padding: 20px;
-    }
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file