diff --git a/lms/public/css/style.css b/lms/public/css/style.css
index 61271c10..066a3e01 100644
--- a/lms/public/css/style.css
+++ b/lms/public/css/style.css
@@ -2,8 +2,27 @@
   --text-3-5xl: 24px;
   --text-3-8xl: 34px;
   --text-4xl: 36px;
+  --primary-color: var(--gray-900);
+  --accent-color: #0B9E92
 }
 
+.btn.btn-primary {
+	background-color: var(--primary-color);
+}
+
+.nav-link .course-list-count {
+	border-radius: var(--border-radius-md);
+	padding: 0 0.3rem;
+	font-size: var(--text-sm);
+	border: 1px solid var(--gray-600)
+}
+
+.nav-link.active .course-list-count {
+	border: 1px solid var(--primary-color)
+}
+
+
+
 body {
   background-color: #FFFFFF;
 }
@@ -799,7 +818,7 @@ input[type=checkbox] {
 }
 
 .progress-bar {
-  background-color: var(--primary-color);
+  background-color: var(--accent-color);
 }
 
 .progress-percent {
@@ -2040,4 +2059,5 @@ select {
 
 .answer-indicator.failure {
 	background-color: var(--red-50);
-}
\ No newline at end of file
+}
+
diff --git a/lms/www/courses/index.html b/lms/www/courses/index.html
index f3b19657..7447e883 100644
--- a/lms/www/courses/index.html
+++ b/lms/www/courses/index.html
@@ -49,20 +49,29 @@
             <ul class="nav lms-nav" id="courses-tab">
                 <li class="nav-item">
                     <a class="nav-link active" data-toggle="tab" href="#live">
-                        {{ _("Live") }} ({{ live_courses | length }})
+                        {{ _("Live") }}
+                        <span class="course-list-count">
+                            {{ live_courses | length }}
+                        </span>
                     </a>
                 </li>
 
                 <li class="nav-item">
                     <a class="nav-link" data-toggle="tab" href="#upcoming">
-                        {{ _("Upcoming") }} ({{ upcoming_courses | length }})
+                        {{ _("Upcoming") }}
+                        <span class="course-list-count">
+                            {{ upcoming_courses | length }}
+                        </span>
                     </a>
                 </li>
 
                 {% if frappe.session.user != "Guest" %}
                 <li class="nav-item">
                     <a class="nav-link" data-toggle="tab" href="#courses-enrolled">
-                        {{ _("Enrolled") }} ({{ enrolled_courses | length }})
+                        {{ _("Enrolled") }}
+                        <span class="course-list-count">
+                            {{ enrolled_courses | length }}
+                        </span>
                     </a>
                 </li>
                 {% endif %}
@@ -70,7 +79,10 @@
                 {% if show_creators_section %}
                 <li class="nav-item">
                     <a class="nav-link" data-toggle="tab" href="#courses-created">
-                        {{ _("Created") }} ({{ created_courses | length }})
+                        {{ _("Created") }}
+                        <span class="course-list-count">
+                            {{ created_courses | length }}
+                        </span>
                     </a>
                 </li>
                 {% endif %}
@@ -78,7 +90,10 @@
                 {% if show_review_section %}
                 <li class="nav-item">
                     <a class="nav-link" data-toggle="tab" href="#courses-under-review">
-                        {{ _("Under Review") }} ({{ review_courses | length }})
+                        {{ _("Under Review") }}
+                        <span class="course-list-count">
+                            {{ review_courses | length }}
+                        </span>
                     </a>
                 </li>
                 {% endif %}