diff --git a/lms/public/css/style.css b/lms/public/css/style.css
index 07a261f7..2cc604ec 100644
--- a/lms/public/css/style.css
+++ b/lms/public/css/style.css
@@ -305,6 +305,7 @@ input[type=checkbox] {
   font-size: var(--text-3xl);
   line-height: 44px;
   color: var(--gray-900);
+  margin: 0.25rem 0;
 }
 
 .button {
@@ -567,7 +568,7 @@ input[type=checkbox] {
   font-size: var(--text-base);
   line-height: 20px;
   color: var(--gray-900);
-  padding: 1rem 0;
+  padding: 0;
 }
 
 .course-details-outline {
@@ -1166,10 +1167,6 @@ pre {
   margin: 0 1rem;
 }
 
-.course-head-container .progress {
-  margin-top: 1rem;
-}
-
 .course-overlay-card {
   background-color: white;
   border-radius: var(--border-radius-lg);
@@ -1265,14 +1262,14 @@ pre {
 }
 
 @media (max-width: 500px) {
-  .reviews-header {
-    flex-direction: column;
-    align-items: center;
-  }
+    .reviews-header {
+        flex-direction: column;
+        align-items: center;
+    }
 
-  .vertical-divider {
-    margin: 1rem 0;
-  }
+    .vertical-divider {
+        margin: 1rem;
+    }
 }
 
 .bold-heading {
@@ -1291,7 +1288,8 @@ pre {
 }
 
 .vertical-divider {
-  border: 1px solid var(--gray-300);
+    border: 1px solid var(--gray-300);
+    margin: 0 1rem;
 }
 
 .avg-rating-stars {
@@ -1432,3 +1430,8 @@ pre {
     float: right;
     font-size: var(--text-sm);
 }
+
+li {
+    line-height: 1.7;
+}
+
diff --git a/lms/www/courses/course.html b/lms/www/courses/course.html
index f67ebe93..1702fc5f 100644
--- a/lms/www/courses/course.html
+++ b/lms/www/courses/course.html
@@ -28,8 +28,8 @@
 
 {% macro CourseHomeHeader(course) %}
 <div class="course-head-container">
-  <div class="container pt-5 pb-5">
-    <div class="course-card-wide" style="">
+  <div class="container pt-10 pb-10">
+    <div class="course-card-wide">
       {{ BreadCrumb(course) }}
       {{ CourseCardWide(course) }}
     </div>
@@ -49,38 +49,41 @@
 
 {% macro CourseCardWide(course) %}
 <div class="">
-  <div class="d-flex align-items-center mt-2">
-    {% for tag in get_tags(course.name) %}
-    <div class="course-card-pills">{{ tag }}</div>
-    {% endfor %}
-  </div>
-  <div class="course-card-wide-title">
-    {{ course.title }}
-  </div>
-  <div class="">
-    {{ course.short_introduction }}
-  </div>
-
-  {% if membership %}
-  {% set progress = frappe.utils.cint(membership.progress) %}
-  <div class="progress" title="{{ progress }}% Completed">
-    <div class="progress-bar" role="progressbar" aria-valuenow="{{ progress }}"
-    aria-valuemin="0" aria-valuemax="100" style="width:{{ progress }}%">
+    <div class="d-flex align-items-center mt-10">
+        {% for tag in get_tags(course.name) %}
+        <div class="course-card-pills">{{ tag }}</div>
+        {% endfor %}
+    </div>
+    <div class="course-card-wide-title">
+        {{ course.title }}
+    </div>
+    <div class="">
+        {{ course.short_introduction }}
     </div>
-  </div>
-  {% endif %}
 
-  <div class="mt-6">
-    <div class="bold-heading">Instructors:</div>
-    {% for instructor in get_instructors(course.name) %}
-      <div class="mt-1">
-       {{ widgets.Avatar(member=instructor, avatar_class="avatar-small") }}
-        <a class="button-links" href="{{ get_profile_url(instructor.username) }}">
-          <span class="course-instructor"> {{ instructor.full_name }} </span>
-        </a>
-      </div>
-    {% endfor %}
-  </div>
+    <div class="mt-10">
+        <div class="bold-heading">Instructors:</div>
+        {% for instructor in get_instructors(course.name) %}
+        <div class="mt-1">
+        {{ widgets.Avatar(member=instructor, avatar_class="avatar-small") }}
+            <a class="button-links" href="{{ get_profile_url(instructor.username) }}">
+            <span class="course-instructor"> {{ instructor.full_name }} </span>
+            </a>
+        </div>
+        {% endfor %}
+    </div>
+
+    {% if membership %}
+    {% set progress = frappe.utils.cint(membership.progress) %}
+    <div class="mt-10">
+        <div class="progress-percent m-0">{{ progress }}% Completed</div>
+        <div class="progress" title="{{ progress }}% Completed">
+            <div class="progress-bar" role="progressbar" aria-valuenow="{{ progress }}"
+            aria-valuemin="0" aria-valuemax="100" style="width:{{ progress }}%">
+            </div>
+        </div>
+    </div>
+    {% endif %}
 
 </div>