diff --git a/cypress/support/commands.js b/cypress/support/commands.js
index a7296ca5..ed5c7968 100644
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@@ -40,15 +40,6 @@ Cypress.Commands.add("login", (email, password) => {
 	});
 });
 
-Cypress.Commands.add("get_logged_user", () => {
-	cy.request({
-		url: "/api/method/frappe.auth.get_logged_user",
-	}).then((resp) => {
-		alert(resp);
-		return resp.message;
-	});
-});
-
 Cypress.Commands.add("button", (text) => {
 	return cy.get(`button:contains("${text}")`);
 });
diff --git a/frontend/src/components/BatchOverlay.vue b/frontend/src/components/BatchOverlay.vue
index c0a73115..91c0ac88 100644
--- a/frontend/src/components/BatchOverlay.vue
+++ b/frontend/src/components/BatchOverlay.vue
@@ -5,9 +5,8 @@
 			theme="green"
 			class="self-start mb-2 float-right"
 		>
-			{{ seats_left }}
-			<span v-if="batch.data.seats_left > 1">{{ __('Seats Left') }}</span>
-			<span v-else-if="batch.data.seats_left == 1">{{ __('Seat Left') }}</span>
+			{{ seats_left }} <span v-if="seats_left > 1">{{ __('Seats Left') }}</span
+			><span v-else-if="seats_left == 1">{{ __('Seat Left') }}</span>
 		</Badge>
 		<Badge
 			v-else-if="batch.data.seat_count && seats_left <= 0"
diff --git a/frontend/src/components/CourseCard.vue b/frontend/src/components/CourseCard.vue
index 443420cb..d52dda74 100644
--- a/frontend/src/components/CourseCard.vue
+++ b/frontend/src/components/CourseCard.vue
@@ -80,15 +80,12 @@
 			<div class="short-introduction">
 				{{ course.short_introduction }}
 			</div>
-			<div
+
+			<ProgressBar
 				v-if="user && course.membership"
-				class="w-full bg-gray-200 rounded-full h-1 mb-2"
-			>
-				<div
-					class="bg-gray-900 h-1 rounded-full"
-					:style="{ width: Math.ceil(course.membership.progress) + '%' }"
-				></div>
-			</div>
+				:progress="course.membership.progress"
+			/>
+
 			<div v-if="user && course.membership" class="text-sm mb-4">
 				{{ Math.ceil(course.membership.progress) }}% completed
 			</div>
@@ -120,6 +117,7 @@ import UserAvatar from '@/components/UserAvatar.vue'
 import { sessionStore } from '@/stores/session'
 import { Badge, Tooltip } from 'frappe-ui'
 import CourseInstructors from '@/components/CourseInstructors.vue'
+import ProgressBar from '@/components/ProgressBar.vue'
 
 const { user } = sessionStore()
 
diff --git a/frontend/src/components/ProgressBar.vue b/frontend/src/components/ProgressBar.vue
new file mode 100644
index 00000000..f1fb1fde
--- /dev/null
+++ b/frontend/src/components/ProgressBar.vue
@@ -0,0 +1,24 @@
+<template>
+	<div class="w-full bg-gray-200 rounded-full h-1 my-2">
+		<div
+			class="bg-gray-900 h-1 rounded-full"
+			:style="{ width: progressBarWidth }"
+		></div>
+	</div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+	progress: {
+		type: Number,
+		default: 0,
+	},
+})
+
+const progressBarWidth = computed(() => {
+	const formattedPercentage = Math.min(Math.ceil(props.progress), 100)
+	return `${formattedPercentage}%`
+})
+</script>
diff --git a/frontend/src/pages/Lesson.vue b/frontend/src/pages/Lesson.vue
index 471d3b2a..1039c3bb 100644
--- a/frontend/src/pages/Lesson.vue
+++ b/frontend/src/pages/Lesson.vue
@@ -162,17 +162,11 @@
 					<div v-if="user && lesson.data.membership" class="text-sm mt-3">
 						{{ Math.ceil(lesson.data.membership.progress) }}% completed
 					</div>
-					<div
+
+					<ProgressBar
 						v-if="user && lesson.data.membership"
-						class="w-full bg-gray-200 rounded-full h-1 my-2"
-					>
-						<div
-							class="bg-gray-900 h-1 rounded-full"
-							:style="{
-								width: Math.ceil(lesson.data.membership.progress) + '%',
-							}"
-						></div>
-					</div>
+						:progress="lesson.data.membership.progress"
+					/>
 				</div>
 				<CourseOutline
 					:courseName="courseName"
@@ -195,6 +189,7 @@ import { getEditorTools } from '../utils'
 import EditorJS from '@editorjs/editorjs'
 import LessonContent from '@/components/LessonContent.vue'
 import CourseInstructors from '@/components/CourseInstructors.vue'
+import ProgressBar from '@/components/ProgressBar.vue'
 
 const user = inject('$user')
 const route = useRoute()