diff --git a/frontend/src/components/BatchCard.vue b/frontend/src/components/BatchCard.vue
index ac619982..d002134e 100644
--- a/frontend/src/components/BatchCard.vue
+++ b/frontend/src/components/BatchCard.vue
@@ -6,24 +6,26 @@
 		<div class="text-lg leading-5 font-semibold mb-2 text-ink-gray-9">
 			{{ batch.title }}
 		</div>
-		<div
+		<Badge
 			v-if="batch.seat_count && batch.seats_left > 0"
-			class="text-xs bg-green-100 text-green-700 self-start px-2 py-0.5 rounded-md"
-		>
-			{{ batch.seats_left }}
-			<span v-if="batch.seats_left > 1">
-				{{ __('Seats Left') }}
-			</span>
-			<span v-else-if="batch.seats_left == 1">
-				{{ __('Seat Left') }}
-			</span>
-		</div>
-		<div
+			variant="subtle"
+			theme="green"
+			size="md"
+			class="self-start"
+			:label="
+				batch.seats_left +
+				' ' +
+				(batch.seats_left > 1 ? __('Seats Left') : __('Seat Left'))
+			"
+		/>
+		<Badge
 			v-else-if="batch.seat_count && batch.seats_left <= 0"
-			class="text-xs bg-red-100 text-red-700 self-start px-2 py-0.5 rounded-md"
-		>
-			{{ __('Sold Out') }}
-		</div>
+			variant="subtle"
+			theme="red"
+			size="md"
+			class="self-start"
+			:label="__('Sold Out')"
+		/>
 		<div class="short-introduction text-sm text-ink-gray-7">
 			{{ batch.description }}
 		</div>
@@ -70,6 +72,7 @@
 	</div>
 </template>
 <script setup>
+import { Badge } from 'frappe-ui'
 import { formatTime } from '@/utils'
 import { Clock, Globe } from 'lucide-vue-next'
 import DateRange from '@/components/Common/DateRange.vue'
diff --git a/frontend/src/components/BatchOverlay.vue b/frontend/src/components/BatchOverlay.vue
index 9324d6a9..8af1e293 100644
--- a/frontend/src/components/BatchOverlay.vue
+++ b/frontend/src/components/BatchOverlay.vue
@@ -1,28 +1,29 @@
 <template>
 	<div v-if="batch.data" class="border-2 rounded-md p-5 lg:w-72">
-		<div
+		<Badge
 			v-if="batch.data.seat_count && batch.data.seats_left > 0"
-			class="text-sm bg-green-100 text-green-700 px-2 py-1 rounded-md"
+			variant="subtle"
+			theme="green"
+			size="md"
 			:class="
 				batch.data.amount || batch.data.courses.length
 					? 'float-right'
 					: 'w-fit mb-4'
 			"
-		>
-			{{ batch.data.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>
-		</div>
-		<div
+			:label="
+				batch.data.seats_left +
+				' ' +
+				(batch.data.seats_left > 1 ? __('Seats Left') : __('Seat Left'))
+			"
+		/>
+		<Badge
 			v-else-if="batch.data.seat_count && batch.data.seats_left <= 0"
-			class="text-xs bg-red-100 text-red-700 float-right px-2 py-0.5 rounded-md"
-		>
-			{{ __('Sold Out') }}
-		</div>
+			variant="subtle"
+			theme="red"
+			size="md"
+			class="float-right"
+			:label="__('Sold Out')"
+		/>
 		<div
 			v-if="batch.data.amount"
 			class="text-lg font-semibold mb-3 text-ink-gray-9"
@@ -136,7 +137,7 @@
 </template>
 <script setup>
 import { inject, computed } from 'vue'
-import { Button, createResource, toast } from 'frappe-ui'
+import { Badge, Button, createResource, toast } from 'frappe-ui'
 import {
 	BookOpen,
 	Clock,