diff --git a/frontend/src/components/BatchCard.vue b/frontend/src/components/BatchCard.vue
index 47005473..e8dd78c7 100644
--- a/frontend/src/components/BatchCard.vue
+++ b/frontend/src/components/BatchCard.vue
@@ -27,7 +27,7 @@
 		<div class="short-introduction text-sm text-ink-gray-7">
 			{{ batch.description }}
 		</div>
-		<div v-if="batch.amount" class="font-semibold mb-4">
+		<div v-if="batch.amount" class="font-semibold text-ink-gray-9 mb-4">
 			{{ batch.price }}
 		</div>
 		<div class="flex flex-col space-y-2 mt-auto">
diff --git a/frontend/src/components/BatchOverlay.vue b/frontend/src/components/BatchOverlay.vue
index 2bd8c67b..095a434c 100644
--- a/frontend/src/components/BatchOverlay.vue
+++ b/frontend/src/components/BatchOverlay.vue
@@ -1,20 +1,17 @@
 <template>
 	<div v-if="batch.data" class="border-2 rounded-md p-5 lg:w-72">
-		<Badge
-			v-if="batch.data.seat_count && seats_left > 0"
-			theme="green"
-			class="self-start mb-2 float-right"
-		>
-			{{ 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"
-			theme="red"
-			class="self-start mb-2 float-right"
-		>
+		<div v-if="batch.data.seat_count && seats_left > 0" class="text-xs bg-green-200 text-green-800 float-right px-2 py-0.5 rounded-md">
+			{{ seats_left }}
+			<span v-if="seats_left > 1">
+				{{ __('Seats Left') }}
+			</span>
+			<span v-else-if="seats_left == 1">
+				{{ __('Seat Left') }}
+			</span>
+		</div>
+		<div v-else-if="batch.data.seat_count && seats_left <= 0" class="text-xs bg-red-200 text-red-900 float-right px-2 py-0.5 rounded-md">
 			{{ __('Sold Out') }}
-		</Badge>
+		</div>
 		<div
 			v-if="batch.data.amount"
 			class="text-lg font-semibold mb-3 text-ink-gray-9"
diff --git a/frontend/src/components/CourseCard.vue b/frontend/src/components/CourseCard.vue
index bda06421..a65437d2 100644
--- a/frontend/src/components/CourseCard.vue
+++ b/frontend/src/components/CourseCard.vue
@@ -79,7 +79,7 @@
 				:progress="course.membership.progress"
 			/>
 
-			<div v-if="user && course.membership" class="text-sm mt-2 mb-4">
+			<div v-if="user && course.membership" class="text-sm text-ink-gray-7 mt-2 mb-4">
 				{{ Math.ceil(course.membership.progress) }}% completed
 			</div>
 
diff --git a/frontend/src/components/CourseCardOverlay.vue b/frontend/src/components/CourseCardOverlay.vue
index 5b2ebf09..b5c84811 100644
--- a/frontend/src/components/CourseCardOverlay.vue
+++ b/frontend/src/components/CourseCardOverlay.vue
@@ -88,16 +88,16 @@
 				</Button>
 			</router-link>
 			<div class="space-y-4">
-				<div class="mt-8 font-medium text-ink-gray-7">
+				<div class="mt-8 font-medium text-ink-gray-9">
 					{{ __('This course has:') }}
 				</div>
-				<div class="flex items-center text-ink-gray-7">
+				<div class="flex items-center text-ink-gray-9">
 					<BookOpen class="h-4 w-4 stroke-1.5" />
 					<span class="ml-2">
 						{{ course.data.lessons }} {{ __('Lessons') }}
 					</span>
 				</div>
-				<div class="flex items-center text-ink-gray-7">
+				<div class="flex items-center text-ink-gray-9">
 					<Users class="h-4 w-4 stroke-1.5" />
 					<span class="ml-2">
 						{{ formatAmount(course.data.enrollments) }}
@@ -106,7 +106,7 @@
 				</div>
 				<div
 					v-if="parseInt(course.data.rating) > 0"
-					class="flex items-center text-ink-gray-7"
+					class="flex items-center text-ink-gray-9"
 				>
 					<Star class="h-4 w-4 stroke-1.5 fill-orange-500 text-gray-50" />
 					<span class="ml-2">
diff --git a/frontend/src/components/CourseOutline.vue b/frontend/src/components/CourseOutline.vue
index 9417c8b6..42f6f0ef 100644
--- a/frontend/src/components/CourseOutline.vue
+++ b/frontend/src/components/CourseOutline.vue
@@ -36,7 +36,7 @@
 						class="h-4 w-4 text-ink-gray-9 stroke-1"
 					/>
 					<div
-						class="text-base text-left text-ink-gray-7 font-medium leading-5 ml-2"
+						class="text-base text-left text-ink-gray-9 font-medium leading-5 ml-2"
 						@click="redirectToChapter(chapter)"
 					>
 						{{ chapter.title }}
diff --git a/frontend/src/components/Quiz.vue b/frontend/src/components/Quiz.vue
index 0ed1fc84..b925cb7f 100644
--- a/frontend/src/components/Quiz.vue
+++ b/frontend/src/components/Quiz.vue
@@ -1,7 +1,7 @@
 <template>
 	<div v-if="quiz.data">
 		<div
-			class="bg-surface-blue-2 space-y-1 py-2 px-2 mb-4 rounded-md text-sm text-blue-800"
+			class="bg-surface-blue-2 space-y-1 py-2 px-2 mb-4 rounded-md text-sm text-ink-blue-800"
 		>
 			<div class="leading-5">
 				{{
diff --git a/frontend/src/pages/CertifiedParticipants.vue b/frontend/src/pages/CertifiedParticipants.vue
index f5b4b518..930a20cf 100644
--- a/frontend/src/pages/CertifiedParticipants.vue
+++ b/frontend/src/pages/CertifiedParticipants.vue
@@ -3,12 +3,20 @@
 		class="sticky flex items-center justify-between top-0 z-10 border-b bg-surface-white px-3 py-2.5 sm:px-5"
 	>
 		<Breadcrumbs :items="breadcrumbs" />
+		<router-link :to="{ name: 'Batches' }">
+			<Button>
+				<template #prefix>
+					<GraduationCap class="h-4 w-4 stroke-1.5" />
+				</template>
+				{{ __('Get Certified') }}
+			</Button>
+		</router-link>
 	</header>
 	<div class="p-5 lg:w-3/4 mx-auto">
 		<div
 			class="flex flex-col lg:flex-row lg:items-center space-y-4 lg:space-y-0 justify-between mb-5"
 		>
-			<div class="text-lg font-semibold">
+			<div class="text-lg text-ink-gray-9 font-semibold">
 				{{ __('All Certified Participants') }}
 			</div>
 			<div class="grid grid-cols-2 gap-2">
@@ -97,7 +105,7 @@ import {
 } from 'frappe-ui'
 import { computed, onMounted, ref } from 'vue'
 import { updateDocumentTitle } from '@/utils'
-import { BookOpen } from 'lucide-vue-next'
+import { BookOpen, GraduationCap } from 'lucide-vue-next'
 
 const currentCategory = ref('')
 const filters = ref({})
diff --git a/frontend/src/pages/CourseDetail.vue b/frontend/src/pages/CourseDetail.vue
index 73ce0f34..fa8fa1da 100644
--- a/frontend/src/pages/CourseDetail.vue
+++ b/frontend/src/pages/CourseDetail.vue
@@ -60,7 +60,7 @@
 						<Badge
 							theme="gray"
 							size="lg"
-							class="mr-2"
+							class="mr-2 text-ink-gray-9"
 							v-for="tag in course.data.tags"
 						>
 							{{ tag }}
diff --git a/frontend/src/pages/JobDetail.vue b/frontend/src/pages/JobDetail.vue
index 610837bc..d844f336 100644
--- a/frontend/src/pages/JobDetail.vue
+++ b/frontend/src/pages/JobDetail.vue
@@ -67,10 +67,8 @@
 						<div
 							class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-10 gap-y-5 md:gap-y-5"
 						>
-							<div class="flex items-center space-x-2">
-								<span class="p-4 bg-surface-green-1 rounded-full">
-									<Building2 class="h-4 w-4 text-ink-green-2" />
-								</span>
+							<div class="flex items-center space-x-4">
+								<Building2 class="h-4 w-4 text-ink-green-2" />
 								<div class="flex flex-col space-y-2 text-ink-gray-7">
 									<span class="text-xs text-ink-gray-5 font-medium uppercase">
 										{{ __('Organisation') }}
@@ -80,10 +78,8 @@
 									</span>
 								</div>
 							</div>
-							<div class="flex items-center space-x-2">
-								<span class="p-4 bg-surface-red-1 rounded-full">
-									<MapPin class="h-4 w-4 text-ink-red-3" />
-								</span>
+							<div class="flex items-center space-x-4">
+								<MapPin class="size-4 text-ink-red-3" />
 								<div class="flex flex-col space-y-2 text-ink-gray-7">
 									<span class="text-xs font-medium uppercase">
 										{{ __('Location') }}
@@ -93,10 +89,8 @@
 									</span>
 								</div>
 							</div>
-							<div class="flex items-center space-x-2">
-								<span class="p-4 bg-yellow-50 rounded-full">
-									<ClipboardType class="h-4 w-4 text-yellow-500" />
-								</span>
+							<div class="flex items-center space-x-4">
+								<ClipboardType class="h-4 w-4 text-yellow-500" />
 								<div class="flex flex-col space-y-2 text-ink-gray-7">
 									<span class="text-xs font-medium uppercase">
 										{{ __('Category') }}
@@ -106,10 +100,8 @@
 									</span>
 								</div>
 							</div>
-							<div class="flex items-center space-x-2">
-								<span class="p-4 bg-surface-blue-1 rounded-full">
-									<CalendarDays class="h-4 w-4 text-ink-blue-2" />
-								</span>
+							<div class="flex items-center space-x-4">
+								<CalendarDays class="h-4 w-4 text-ink-blue-2" />
 								<div class="flex flex-col space-y-2 text-ink-gray-7">
 									<span class="text-xs font-medium uppercase">
 										{{ __('Posted on') }}
@@ -121,11 +113,9 @@
 							</div>
 							<div
 								v-if="applicationCount.data"
-								class="flex items-center space-x-2"
+								class="flex items-center space-x-4"
 							>
-								<span class="p-4 bg-purple-50 rounded-full">
-									<SquareUserRound class="h-4 w-4 text-purple-500" />
-								</span>
+								<SquareUserRound class="h-4 w-4 text-purple-500" />
 								<div class="flex flex-col space-y-2 text-ink-gray-7">
 									<span class="text-xs font-medium uppercase">
 										{{ __('Applications Received') }}