diff --git a/community/lms/widgets/CourseCard.html b/community/lms/widgets/CourseCard.html
index d1bc96f8..3934316f 100644
--- a/community/lms/widgets/CourseCard.html
+++ b/community/lms/widgets/CourseCard.html
@@ -2,8 +2,8 @@
 {% set progress = course.get_course_progress() %}
 <div class="common-card-style course-card">
 
-  <div class="course-image {% if not course.image %}default-image{% endif %}" {% if course.image %}
-    style="background-image: url( {{ course.image }} );" {% endif %}>
+  <div class="course-image {% if not course.image %}default-image{% endif %}"
+    {% if course.image %} style="background-image: url( {{ course.image }} );" {% endif %}>
     <div class="course-tags">
       {% for tag in course.get_tags() %}
       <div class="course-card-pills">{{ tag }}</div>
@@ -21,102 +21,105 @@
     {% endif %}
   </div>
 
-<div class="course-card-content">
-  <div class="course-card-meta muted-text">
-    {% if course.get_chapters() | length %}
-    <span>
-      {{ course.get_chapters() | length }} Chapters
-    </span>
-    {% endif %}
-    {% if course.get_chapters() | length and course.get_upcoming_batches() | length %}
-    <span class="font-weight-bold ml-3 mr-3"> . </span>
-    {% endif %}
-    {% if course.get_upcoming_batches() | length %}
-    <span class="">
-      {{ course.get_upcoming_batches() | length }} Open Batches
-    </span>
-    {% endif %}
-  </div>
-  <div class="course-card-title">{{ course.title }}</div>
-  <div {% if not read_only %} class="mb-4" {% endif %}>
-    <span class="zindex">
-      {{ widgets.Avatar(member=course.get_instructor(), avatar_class="avatar-small") }}
-      <a class="button-links" href="{{ get_profile_url(course.get_instructor().username) }}">
-        <span class="course-instructor">
-          {{ course.get_instructor().full_name }}
-        </span>
-      </a>
-    </span>
-    <span class="course-student-count">
-      {% if course.get_students() | length %}
-      <span class="mr-4">
-        <img class="icon-background" src="/assets/community/icons/user.svg" />
-        {{ course.get_students() | length }}
-      </span> {% endif %}
-      {% set avg_rating = course.get_average_rating() %}
-      {% if avg_rating %}
-      <span class="">
-        <img class="icon-background" src="/assets/community/icons/rating.svg" />
-        {{ avg_rating }}
+  <div class="course-card-content">
+    <div class="course-card-meta muted-text">
+      {% if course.get_chapters() | length %}
+      <span>
+        {{ course.get_chapters() | length }} Chapters
       </span>
       {% endif %}
-    </span>
+      {% if course.get_chapters() | length and course.get_upcoming_batches() | length %}
+      <span class="font-weight-bold ml-3 mr-3"> . </span>
+      {% endif %}
+      {% if course.get_upcoming_batches() | length %}
+      <span class="">
+        {{ course.get_upcoming_batches() | length }} Open Batches
+      </span>
+      {% endif %}
+    </div>
+    <div class="course-card-title">{{ course.title }}</div>
+    <div {% if not read_only %} class="mb-4" {% endif %}>
+      <span class="zindex">
+        {{ widgets.Avatar(member=course.get_instructor(), avatar_class="avatar-small") }}
+        <a class="button-links" href="{{ get_profile_url(course.get_instructor().username) }}">
+          <span class="course-instructor">
+            {{ course.get_instructor().full_name }}
+          </span>
+        </a>
+      </span>
+      <span class="course-student-count">
+        {% if course.get_students() | length %}
+        <span class="mr-4">
+          <img class="icon-background" src="/assets/community/icons/user.svg" />
+          {{ course.get_students() | length }}
+        </span> {% endif %}
+        {% set avg_rating = course.get_average_rating() %}
+        {% if avg_rating %}
+        <span class="">
+          <img class="icon-background" src="/assets/community/icons/rating.svg" />
+          {{ avg_rating }}
+        </span>
+        {% endif %}
+      </span>
+    </div>
+
+    {% if not read_only %}
+
+    {% set lesson_index = course.get_lesson_index(membership.current_lesson) if membership and
+    membership.current_lesson else '1.1' %}
+    {% set query_parameter = "?batch=" + membership.batch if membership and
+    membership.batch else "" %}
+    {% set certificate = course.is_certified() %}
+
+    {% if certificate %}
+    <div class="view-course-link is-default">
+      Get Certificate <img class="ml-3" src="/assets/community/icons/black-arrow.svg" />
+    </div>
+    <a class="stretched-link" href="/courses/{{ course.name }}/{{ certificate }}"></a>
+
+    {% elif course.enable_certification and progress == 100 %}
+    <div class="view-course-link is-default" id="certification" data-course="{{ course.name }}">
+      Get Certificate <img class="ml-3" src="/assets/community/icons/black-arrow.svg" />
+    </div>
+
+    {% elif progress == 100 %}
+    <div class="view-course-link is-default">
+      Course Completed <img class="ml-3" src="/assets/community/icons/black-arrow.svg" />
+    </div>
+    <a class="stretched-link" href="/courses/{{ course.name }}"></a>
+
+    {% elif course.upcoming %}
+    <div class="view-course-link is-secondary border">
+      Upcoming Course <img class="ml-3" src="/assets/community/icons/black-arrow.svg" />
+    </div>
+    <a class="stretched-link" href="/courses/{{ course.name }}"></a>
+
+    {% elif membership %}
+    <div class="view-course-link is-primary">
+      Continue Course <img class="ml-3" src="/assets/community/icons/white-arrow.svg" />
+    </div>
+    <a class="stretched-link" href="{{ course.get_learn_url(lesson_index) }}{{ query_parameter }}"></a>
+
+    {% else %}
+    <div class="view-course-link is-default">
+      View Course <img class="ml-3" src="/assets/community/icons/black-arrow.svg" />
+    </div>
+    <a class="stretched-link" href="/courses/{{ course.name }}"></a>
+
+    {% endif %}
+    {% endif %}
   </div>
-
-  {% if not read_only %}
-
-  {% set lesson_index = course.get_lesson_index(membership.current_lesson) if membership and
-  membership.current_lesson else '1.1' %}
-  {% set query_parameter = "?batch=" + membership.batch if membership and
-  membership.batch else "" %}
-  {% set certificate = course.is_certified() %}
-
-  {% if certificate %}
-  <div class="view-course-link is-default">
-    Get Certificate <img class="ml-3" src="/assets/community/icons/black-arrow.svg" />
-  </div>
-  <a class="stretched-link" href="/courses/{{ course.name }}/{{ certificate }}"></a>
-
-  {% elif course.enable_certification and progress == 100 %}
-  <div class="view-course-link is-default" id="certification" data-course="{{ course.name }}">
-    Get Certificate <img class="ml-3" src="/assets/community/icons/black-arrow.svg" />
-  </div>
-
-  {% elif progress == 100 %}
-  <div class="view-course-link is-default">
-    Course Completed <img class="ml-3" src="/assets/community/icons/black-arrow.svg" />
-  </div>
-  <a class="stretched-link" href="/courses/{{ course.name }}"></a>
-
-  {% elif course.upcoming %}
-  <div class="view-course-link is-secondary border">
-    Upcoming Course <img class="ml-3" src="/assets/community/icons/black-arrow.svg" />
-  </div>
-  <a class="stretched-link" href="/courses/{{ course.name }}"></a>
-
-  {% elif membership %}
-  <div class="view-course-link is-primary">
-    Continue Course <img class="ml-3" src="/assets/community/icons/white-arrow.svg" />
-  </div>
-  <a class="stretched-link" href="{{ course.get_learn_url(lesson_index) }}{{ query_parameter }}"></a>
-
-  {% else %}
-  <div class="view-course-link is-default">
-    View Course <img class="ml-3" src="/assets/community/icons/black-arrow.svg" />
-  </div>
-  <a class="stretched-link" href="/courses/{{ course.name }}"></a>
-
-  {% endif %}
-  {% endif %}
-</div>
 </div>
+
 <script>
   frappe.ready(() => {
     trim_course_titles();
+
     $("#certification").unbind().click((e) => {
       create_certificate(e);
     });
   })
+
   var trim_course_titles = () => {
     $(".course-card-title").each((i, element) => {
       var title = $(element).text();
@@ -125,6 +128,7 @@
       $(element).text(title.substring(0, length) + suffix);
     });
   }
+
   var create_certificate = (e) => {
     e.preventDefault();
     course = $(e.currentTarget).attr("data-course");