diff --git a/frontend/src/components/BatchCard.vue b/frontend/src/components/BatchCard.vue
index 51941d53..2849f497 100644
--- a/frontend/src/components/BatchCard.vue
+++ b/frontend/src/components/BatchCard.vue
@@ -3,7 +3,7 @@
 		class="flex flex-col shadow hover:bg-gray-100 rounded-md p-4 h-full"
 		style="min-height: 150px"
 	>
-		<div class="text-xl font-semibold mb-2">
+		<div class="text-lg leading-5 font-semibold mb-2">
 			{{ batch.title }}
 		</div>
 		<Badge
@@ -22,18 +22,17 @@
 		>
 			{{ __('Sold Out') }}
 		</Badge>
-		<div class="short-introduction">
+		<div class="short-introduction text-sm text-gray-700">
 			{{ batch.description }}
 		</div>
+		<div v-if="batch.amount" class="font-semibold mb-4">
+			{{ batch.price }}
+		</div>
 		<div class="flex flex-col space-y-2 mt-auto">
-			<div v-if="batch.amount" class="font-semibold text-lg">
-				{{ batch.price }}
-			</div>
-
 			<DateRange
 				:startDate="batch.start_date"
 				:endDate="batch.end_date"
-				class="text-sm text-gray-700 mb-3"
+				class="text-sm text-gray-700"
 			/>
 			<div class="flex items-center text-sm text-gray-700">
 				<Clock class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
@@ -50,18 +49,21 @@
 					{{ batch.timezone }}
 				</span>
 			</div>
-			<div v-if="batch.instructors?.length" class="flex avatar-group overlap">
-				<div
-					class="h-6 mr-1"
-					:class="{ 'avatar-group overlap': batch.instructors.length > 1 }"
-				>
-					<UserAvatar
-						v-for="instructor in batch.instructors"
-						:user="instructor"
-					/>
-				</div>
-				<CourseInstructors :instructors="batch.instructors" />
+		</div>
+		<div
+			v-if="batch.instructors?.length"
+			class="flex avatar-group overlap mt-4"
+		>
+			<div
+				class="h-6 mr-1"
+				:class="{ 'avatar-group overlap': batch.instructors.length > 1 }"
+			>
+				<UserAvatar
+					v-for="instructor in batch.instructors"
+					:user="instructor"
+				/>
 			</div>
+			<CourseInstructors :instructors="batch.instructors" />
 		</div>
 	</div>
 </template>
@@ -88,7 +90,7 @@ const props = defineProps({
 	text-overflow: ellipsis;
 	width: 100%;
 	overflow: hidden;
-	margin: 0.25rem 0 1.25rem;
+	margin: 0.25rem 0 1rem;
 	line-height: 1.5;
 }
 
diff --git a/frontend/src/components/CourseCard.vue b/frontend/src/components/CourseCard.vue
index 5dd1e3c6..b5e84e3c 100644
--- a/frontend/src/components/CourseCard.vue
+++ b/frontend/src/components/CourseCard.vue
@@ -72,7 +72,7 @@
 				{{ course.title }}
 			</div>
 
-			<div class="short-introduction">
+			<div class="short-introduction text-gray-700 text-sm">
 				{{ course.short_introduction }}
 			</div>
 
diff --git a/frontend/src/pages/JobDetail.vue b/frontend/src/pages/JobDetail.vue
index 60689a41..f8483e80 100644
--- a/frontend/src/pages/JobDetail.vue
+++ b/frontend/src/pages/JobDetail.vue
@@ -50,9 +50,9 @@
 				</Button>
 			</div>
 		</header>
-		<div v-if="job.data" class="w-3/4 mx-auto">
+		<div v-if="job.data" class="max-w-3xl mx-auto">
 			<div class="p-4">
-				<div class="flex mb-4">
+				<div class="flex mb-10">
 					<img
 						:src="job.data.company_logo"
 						class="w-16 h-16 rounded-lg object-contain mr-4"
@@ -62,40 +62,36 @@
 						<div class="text-2xl font-semibold mb-4">
 							{{ job.data.job_title }}
 						</div>
-						<div class="grid grid-cols-3 gap-8">
-							<div class="grid grid-cols-1 gap-2">
-								<div class="flex items-center space-x-2">
-									<Building2 class="h-4 w-4 stroke-1.5" />
-									<span>{{ job.data.company_name }}</span>
-								</div>
-								<div class="flex items-center space-x-2">
-									<MapPin class="h-4 w-4 stroke-1.5" />
-									<span>{{ job.data.location }}</span>
-								</div>
+						<div
+							class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-10 gap-y-2 md:gap-y-4"
+						>
+							<div class="flex items-center space-x-2">
+								<Building2 class="h-4 w-4 stroke-1.5" />
+								<span>{{ job.data.company_name }}</span>
 							</div>
-							<div class="grid grid-cols-1 gap-2">
-								<div class="flex items-center space-x-2">
-									<ClipboardType class="h-4 w-4 stroke-1.5" />
-									<span>{{ job.data.type }}</span>
-								</div>
-								<div class="flex items-center space-x-2">
-									<CalendarDays class="h-4 w-4 stroke-1.5" />
-									<span>{{
-										dayjs(job.data.creation).format('DD MMM YYYY')
-									}}</span>
-								</div>
+							<div class="flex items-center space-x-2">
+								<MapPin class="h-4 w-4 stroke-1.5" />
+								<span>{{ job.data.location }}</span>
 							</div>
-							<div class="grid grid-cols-1 h-fit">
-								<div
-									v-if="applicationCount.data"
-									class="flex items-center space-x-2"
+							<div class="flex items-center space-x-2">
+								<ClipboardType class="h-4 w-4 stroke-1.5" />
+								<span>{{ job.data.type }}</span>
+							</div>
+							<div class="flex items-center space-x-2">
+								<CalendarDays class="h-4 w-4 stroke-1.5" />
+								<span>
+									{{ dayjs(job.data.creation).format('DD MMM YYYY') }}
+								</span>
+							</div>
+							<div
+								v-if="applicationCount.data"
+								class="flex items-center space-x-2"
+							>
+								<SquareUserRound class="h-4 w-4 stroke-1.5" />
+								<span
+									>{{ applicationCount.data }}
+									{{ __('applications received') }}</span
 								>
-									<SquareUserRound class="h-4 w-4 stroke-1.5" />
-									<span
-										>{{ applicationCount.data }}
-										{{ __('applications received') }}</span
-									>
-								</div>
 							</div>
 						</div>
 					</div>
diff --git a/lms/hooks.py b/lms/hooks.py
index c89387e2..5347a372 100644
--- a/lms/hooks.py
+++ b/lms/hooks.py
@@ -176,7 +176,10 @@ update_website_context = [
 ]
 
 jinja = {
-	"methods": ["lms.lms.utils.get_signup_optin_checks"],
+	"methods": [
+		"lms.lms.utils.get_signup_optin_checks",
+		"lms.lms.utils.get_tags",
+	],
 	"filters": [],
 }
 ## Specify the additional tabs to be included in the user profile page.