diff --git a/erpnext/public/js/education/lms/components/CardList.vue b/erpnext/public/js/education/lms/components/CardList.vue
index 21a23dfa7ae..298627f757e 100644
--- a/erpnext/public/js/education/lms/components/CardList.vue
+++ b/erpnext/public/js/education/lms/components/CardList.vue
@@ -1,12 +1,12 @@
 <template>
 	<section class="featured-products-section" :class='sectionType'>
 	<h5 class='featured-heading' v-html="title"></h5>
-	<div class="featured-products">
+	<div class="featured-products row">
 		<!-- <p class='lead text-center' v-html="description"></p> -->
 		<slot name="card-list-slot"></slot>
-		<div class='mt-4 text-center'>
-			<slot name="list-bottom"></slot>
-		</div>
+	</div>
+	<div class='mt-4 text-center'>
+		<slot name="list-bottom"></slot>
 	</div>
 </section>
 </template>
diff --git a/erpnext/public/js/education/lms/components/CourseCard.vue b/erpnext/public/js/education/lms/components/CourseCard.vue
index 90c0c7b6673..1242a5cd560 100644
--- a/erpnext/public/js/education/lms/components/CourseCard.vue
+++ b/erpnext/public/js/education/lms/components/CourseCard.vue
@@ -1,8 +1,11 @@
 <template>
-<div class="card mt-3" data-list="getting-started">
-    <div class='card-body'>
-        <div class="row">
-            <div class="course-details col-xs-8 col-sm-9 col-md-10">
+    <div class="mt-3 col-md-4 col-sm-12">
+        <div class="card h-100">
+            <div class="card-hero-img" v-if="course.hero_image" v-bind:style="{ 'background-image': 'url(' + image + ')' }"></div>
+            <div v-else class="card-image-wrapper">
+                <div class="image-body">{{ course.course_name }}</div>
+            </div>
+            <div class='card-body'>
                 <h5 class="card-title">{{ course.course_name }}</h5>
                 <span class="course-list text-muted" id="getting-started">
                     Topics
@@ -13,18 +16,19 @@
                     </ul>
                 </span>
             </div>
-            <div class='course-buttons text-center col-xs-4 col-sm-3 col-md-2'>
-                <a-button
-                    :type="buttonType"
-                    size="sm btn-block"
-                    :route="courseRoute"
-                >
-                    {{ buttonName }}
-                </a-button>
+            <div class='text-right p-3'>
+                <div class='course-buttons text-center'>
+                    <a-button
+                        :type="buttonType"
+                        size="sm btn-block"
+                        :route="courseRoute"
+                    >
+                        {{ buttonName }}
+                    </a-button>
+                </div>
             </div>
         </div>
     </div>
-</div>
 </template>
 
 <script>
@@ -88,9 +92,31 @@ export default {
 </script>
 
 <style scoped>
-    @media only screen and (max-width: 576px) {
-        .course-buttons {
-            margin-top: 1em;
-        }
+    .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
diff --git a/erpnext/public/js/education/lms/components/ProgramCard.vue b/erpnext/public/js/education/lms/components/ProgramCard.vue
index bc75469ad2e..76623aae69c 100644
--- a/erpnext/public/js/education/lms/components/ProgramCard.vue
+++ b/erpnext/public/js/education/lms/components/ProgramCard.vue
@@ -1,13 +1,16 @@
 <template>
-<div class='mt-3'>
-    <div class="card">
-        <div class="card-hero-img" v-if="program.hero_image" v-bind:style="{ 'background-image': 'url(' + image + ')' }"></div>
-        <div class='card-body'>
-            <router-link :to="'/Program/' + program.name">
+<div class='mt-3 col-md-4 col-sm-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 class="image-body">{{ program.program_name }}</div>
+            </div>
+            <div class='card-body'>
                 <h5 class='card-title'>{{ program.program_name }}</h5>
-            </router-link>
-            <div v-html="program.description"></div>
-        </div>
+                <div>{{ program.description.substring(0,200) }}...</div>
+            </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>
             <a-button v-if="enrolled" type="dark" size="sm" :route="programPageRoute">
@@ -79,6 +82,25 @@ export default {
 
     div.card-hero-img {
         height: 220px;
-        background-position: center
+        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/TopicCard.vue b/erpnext/public/js/education/lms/components/TopicCard.vue
index 3018c027abc..609fcd60098 100644
--- a/erpnext/public/js/education/lms/components/TopicCard.vue
+++ b/erpnext/public/js/education/lms/components/TopicCard.vue
@@ -1,9 +1,12 @@
 
 <template>
-<div class="card mt-3" data-list="getting-started">
-    <div class='card-body'>
-        <div class="row">
-            <div class="course-details col-xs-8 col-sm-9 col-md-10">
+    <div class="mt-3 col-md-4 col-sm-12">
+        <div class="card h-100">
+            <div class="card-hero-img" v-if="topic.hero_image" v-bind:style="{ 'background-image': 'url(' + image + ')' }"></div>
+            <div v-else class="card-image-wrapper">
+                <div class="image-body">{{ topic.topic_name }}</div>
+            </div>
+            <div class='card-body'>
                 <h5 class="card-title">{{ topic.topic_name }}</h5>
                 <span class="course-list text-muted" id="getting-started">
                     Content
@@ -17,18 +20,19 @@
                     </ul>
                 </span>
             </div>
-            <div class='course-buttons text-center col-xs-4 col-sm-3 col-md-2'>
-                <a-button v-if="isLogin"
-                    :type="buttonType"
-                    size="sm btn-block"
-                    :route="firstContentRoute"
-                >
-                    {{ buttonName }}
-                </a-button>
+            <div v-if="isLogin" class='text-right p-3'>
+                <div class='course-buttons text-center'>
+                    <a-button
+                        :type="buttonType"
+                        size="sm btn-block"
+                        :route="firstContentRoute"
+                    >
+                        {{ buttonName }}
+                    </a-button>
+                </div>
             </div>
         </div>
     </div>
-</div>
 </template>
 
 <script>
@@ -103,17 +107,31 @@ export default {
 </script>
 
 <style scoped>
-    @media only screen and (max-width: 576px) {
-        .course-buttons {
-            margin-top: 1em;
-        }
-    }
-    li {
-        list-style-type: none;
-        padding: 0;
+    .course-buttons {
+        margin-bottom: 1em;
     }
 
-    .fa {
-        font-size: 0.8em;
+    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/pages/ProgramPage.vue b/erpnext/public/js/education/lms/pages/ProgramPage.vue
index 9d7148de93e..b3c315982a1 100644
--- a/erpnext/public/js/education/lms/pages/ProgramPage.vue
+++ b/erpnext/public/js/education/lms/pages/ProgramPage.vue
@@ -2,7 +2,7 @@
 <div>
 	<TopSection v-bind:title="program.program_name" v-bind:description="program.description">
     </TopSection>
-	<CardList :title="'Courses'" :description="''" :sectionType="'section-padding section-bg'">
+	<CardList :title="'Courses'" :description="''" :sectionType="'section-padding'">
         <CourseCard slot="card-list-slot" v-for="course in courseData" :course="course" :program_name="program_name" :key="course.name"/>
     </CardList>
 </div>