diff --git a/frontend/src/components/BatchStudents.vue b/frontend/src/components/BatchStudents.vue
index 269a053e..5ee0570d 100644
--- a/frontend/src/components/BatchStudents.vue
+++ b/frontend/src/components/BatchStudents.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="">
-		<div class="w-full flex items-center justify-between border-b pb-4">
+		<div class="w-full flex items-center justify-between pb-4">
 			<div class="font-medium text-gray-600">
 				{{ __('Statistics') }}
 			</div>
@@ -63,13 +63,13 @@
 				class="flex items-center justify-center text-sm text-gray-700 space-x-4"
 			>
 				<div class="flex items-center space-x-2">
-					<div class="w-3 h-3" style="background-color: #0289f7"></div>
+					<div class="w-3 h-3" style="background-color: #0f736b"></div>
 					<div>
 						{{ __('Courses') }}
 					</div>
 				</div>
 				<div class="flex items-center space-x-2">
-					<div class="w-3 h-3" style="background-color: #e03636"></div>
+					<div class="w-3 h-3" style="background-color: #0070cc"></div>
 					<div>
 						{{ __('Assessments') }}
 					</div>
@@ -329,14 +329,14 @@ const getChartData = () => {
 }
 
 const getChartOptions = (categories) => {
-	const courseColor = '#0289F7'
-	const assessmentColor = '#E03636'
+	const courseColor = '#0F736B'
+	const assessmentColor = '#0070CC'
 	const maxY = Math.ceil(students.data?.length / 10) * 10
 
 	return {
 		chart: {
 			type: 'bar',
-			height: 350,
+			height: 50,
 			toolbar: {
 				show: false,
 			},
@@ -345,16 +345,13 @@ const getChartOptions = (categories) => {
 			bar: {
 				distributed: true,
 				borderRadius: 0,
-				horizontal: false,
-				columnWidth: '30%',
+				horizontal: true,
+				barHeight: '30%',
 			},
 		},
 		colors: Object.values(categories).map((item) =>
 			item.type === 'course' ? courseColor : assessmentColor
 		),
-		legends: {
-			show: false,
-		},
 		xaxis: {
 			categories: Object.values(categories).map((item) => item.label),
 			labels: {
@@ -363,7 +360,7 @@ const getChartOptions = (categories) => {
 				},
 				rotate: 0,
 				formatter: function (value) {
-					return value.length > 22 ? `${value.substring(0, 22)}...` : value // Trim long labels
+					return value.length > 20 ? `${value.substring(0, 20)}...` : value // Trim long labels
 				},
 			},
 		},
diff --git a/frontend/src/components/CourseCardOverlay.vue b/frontend/src/components/CourseCardOverlay.vue
index b5a3b150..0b28783d 100644
--- a/frontend/src/components/CourseCardOverlay.vue
+++ b/frontend/src/components/CourseCardOverlay.vue
@@ -87,25 +87,29 @@
 					</span>
 				</Button>
 			</router-link>
-			<div class="mt-8 mb-4 font-medium">
-				{{ __('This course has:') }}
-			</div>
-			<div class="flex items-center mb-3">
-				<BookOpen class="h-5 w-5 stroke-1.5 text-gray-600" />
-				<span class="ml-2">
-					{{ course.data.lessons }} {{ __('Lessons') }}
-				</span>
-			</div>
-			<div class="flex items-center mb-3">
-				<Users class="h-5 w-5 stroke-1.5 text-gray-600" />
-				<span class="ml-2">
-					{{ formatAmount(course.data.enrollments) }}
-					{{ __('Enrolled Students') }}
-				</span>
-			</div>
-			<div class="flex items-center">
-				<Star class="h-5 w-5 stroke-1.5 fill-orange-500 text-gray-50" />
-				<span class="ml-2"> {{ course.data.rating }} {{ __('Rating') }} </span>
+			<div class="space-y-4">
+				<div class="mt-8 font-medium">
+					{{ __('This course has:') }}
+				</div>
+				<div class="flex items-center">
+					<BookOpen class="h-4 w-4 stroke-1.5 text-gray-600" />
+					<span class="ml-2">
+						{{ course.data.lessons }} {{ __('Lessons') }}
+					</span>
+				</div>
+				<div class="flex items-center">
+					<Users class="h-4 w-4 stroke-1.5 text-gray-600" />
+					<span class="ml-2">
+						{{ formatAmount(course.data.enrollments) }}
+						{{ __('Enrolled Students') }}
+					</span>
+				</div>
+				<div v-if="parseInt(course.data.rating) > 0" class="flex items-center">
+					<Star class="h-4 w-4 stroke-1.5 fill-orange-500 text-gray-50" />
+					<span class="ml-2">
+						{{ course.data.rating }} {{ __('Rating') }}
+					</span>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/frontend/src/pages/CourseDetail.vue b/frontend/src/pages/CourseDetail.vue
index 286964ad..a174de55 100644
--- a/frontend/src/pages/CourseDetail.vue
+++ b/frontend/src/pages/CourseDetail.vue
@@ -16,7 +16,7 @@
 					</div>
 					<div class="flex items-center">
 						<Tooltip
-							v-if="course.data.rating"
+							v-if="parseInt(course.data.rating) > 0"
 							:text="__('Average Rating')"
 							class="flex items-center"
 						>
@@ -25,7 +25,9 @@
 								{{ course.data.rating }}
 							</span>
 						</Tooltip>
-						<span v-if="course.data.rating" class="mx-3">&middot;</span>
+						<span v-if="parseInt(course.data.rating) > 0" class="mx-3"
+							>&middot;</span
+						>
 						<Tooltip
 							v-if="course.data.enrollment_count"
 							:text="__('Enrolled Students')"
diff --git a/lms/lms/utils.py b/lms/lms/utils.py
index 7541c921..68234f53 100644
--- a/lms/lms/utils.py
+++ b/lms/lms/utils.py
@@ -1487,11 +1487,18 @@ def get_batch_students(batch):
 
 		detail.courses_completed = courses_completed
 		detail.assessments_completed = assessments_completed
-		detail.progress = (
-			(courses_completed + assessments_completed)
-			/ (len(batch_courses) + len(assessments))
-			* 100
-		)
+		if len(batch_courses) + len(assessments):
+			detail.progress = flt(
+				(
+					(courses_completed + assessments_completed)
+					/ (len(batch_courses) + len(assessments))
+					* 100
+				),
+				2,
+			)
+		else:
+			detail.progress = 0
+
 		students.append(detail)
 
 	return students