diff --git a/frontend/src/components/Modals/EvaluationModal.vue b/frontend/src/components/Modals/EvaluationModal.vue
index 8d766a92..7491355a 100644
--- a/frontend/src/components/Modals/EvaluationModal.vue
+++ b/frontend/src/components/Modals/EvaluationModal.vue
@@ -42,10 +42,11 @@
 					<div class="grid grid-cols-2 gap-2">
 						<div v-for="slot in slots.data">
 							<div
-								class="text-base text-center border rounded-md bg-surface-gray-3 p-2 cursor-pointer"
+								class="text-base text-center border rounded-md text-ink-gray-8 bg-surface-gray-3 p-2 cursor-pointer"
 								@click="saveSlot(slot)"
 								:class="{
-									'border-gray-900': evaluation.start_time == slot.start_time,
+									'border-outline-gray-4':
+										evaluation.start_time == slot.start_time,
 								}"
 							>
 								{{ formatTime(slot.start_time) }} -
diff --git a/frontend/src/components/UpcomingEvaluations.vue b/frontend/src/components/UpcomingEvaluations.vue
index 7c978b67..93b4594e 100644
--- a/frontend/src/components/UpcomingEvaluations.vue
+++ b/frontend/src/components/UpcomingEvaluations.vue
@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<div class="flex items-center justify-between mb-4">
-			<div class="text-lg font-semibold">
+			<div class="text-lg text-ink-gray-9 font-semibold">
 				{{ __('Upcoming Evaluations') }}
 			</div>
 			<Button
@@ -17,9 +17,9 @@
 		<div v-if="upcoming_evals.data?.length">
 			<div class="grid grid-cols-3 gap-4">
 				<div v-for="evl in upcoming_evals.data">
-					<div class="border rounded-md p-3">
+					<div class="border text-ink-gray-7 rounded-md p-3">
 						<div class="flex justify-between mb-3">
-							<span class="font-semibold leading-5">
+							<span class="font-semibold text-ink-gray-9 leading-5">
 								{{ evl.course_title }}
 							</span>
 							<Menu
@@ -42,7 +42,7 @@
 									leave-to-class="transform scale-95 opacity-0"
 								>
 									<MenuItems
-										class="absolute mt-2 w-32 rounded-md bg-white shadow-lg p-1.5"
+										class="absolute mt-2 w-32 rounded-md bg-surface-white border p-1.5"
 									>
 										<MenuItem v-slot="{ active }">
 											<Button
@@ -82,12 +82,11 @@
 								{{ evl.evaluator_name }}
 							</span>
 						</div>
-						<div class="flex items-center justify-between space-x-2 mt-4">
-							<Button
-								v-if="evl.google_meet_link"
-								@click="openEvalCall(evl)"
-								class="w-full"
-							>
+						<div
+							v-if="evl.google_meet_link"
+							class="flex items-center justify-between space-x-2 mt-4"
+						>
+							<Button @click="openEvalCall(evl)" class="w-full">
 								<template #prefix>
 									<HeadsetIcon class="w-4 h-4 stroke-1.5" />
 								</template>
diff --git a/frontend/src/pages/JobDetail.vue b/frontend/src/pages/JobDetail.vue
index 8fe771fd..1712a785 100644
--- a/frontend/src/pages/JobDetail.vue
+++ b/frontend/src/pages/JobDetail.vue
@@ -67,86 +67,61 @@
 		</header>
 		<div v-if="job.data" class="max-w-3xl mx-auto pt-5">
 			<div class="p-4">
-				<div class="space-y-5 mb-10">
-					<div class="flex items-center">
+				<div class="space-y-5 mb-12">
+					<div class="flex">
 						<img
 							:src="job.data.company_logo"
 							class="size-10 rounded-lg object-contain cursor-pointer mr-4"
 							:alt="job.data.company_name"
 							@click="redirectToWebsite(job.data.company_website)"
 						/>
-						<div class="text-2xl text-ink-gray-9 font-semibold">
-							{{ job.data.job_title }}
+						<div class="">
+							<div class="text-2xl text-ink-gray-9 font-semibold mb-1">
+								{{ job.data.job_title }}
+							</div>
+							<div class="text-sm text-ink-gray-5 font-semibold">
+								{{ job.data.company_name }} - {{ job.data.location }},
+								{{ job.data.country }}
+							</div>
 						</div>
 					</div>
-					<div>
-						<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-4">
-								<Building2 class="size-4 stroke-1.5 text-ink-gray-7" />
-								<div class="flex flex-col space-y-1 text-ink-gray-7">
-									<span class="text-xs text-ink-gray-5 font-medium uppercase">
-										{{ __('Organisation') }}
-									</span>
-									<span class="text-sm font-semibold">
-										{{ job.data.company_name }}
-									</span>
-								</div>
-							</div>
-							<div class="flex items-center space-x-4">
-								<MapPin class="size-4 stroke-1.5 text-ink-gray-7" />
-								<div class="flex flex-col space-y-1 text-ink-gray-7">
-									<span class="text-xs text-ink-gray-5 font-medium uppercase">
-										{{ __('Location') }}
-									</span>
-									<span class="text-sm font-semibold">
-										{{ job.data.location }}, {{ job.data.country }}
-									</span>
-								</div>
-							</div>
-							<div class="flex items-center space-x-4">
-								<ClipboardType class="size-4 stroke-1.5 text-ink-gray-7" />
-								<div class="flex flex-col space-y-1 text-ink-gray-7">
-									<span class="text-xs text-ink-gray-5 font-medium uppercase">
-										{{ __('Category') }}
-									</span>
-									<span class="text-sm font-semibold">
-										{{ job.data.type }}
-									</span>
-								</div>
-							</div>
-							<div class="flex items-center space-x-4">
-								<CalendarDays class="size-4 stroke-1.5 text-ink-gray-7" />
-								<div class="flex flex-col space-y-1 text-ink-gray-7">
-									<span class="text-xs text-ink-gray-5 font-medium uppercase">
-										{{ __('Posted on') }}
-									</span>
-									<span class="text-sm font-semibold">
-										{{ dayjs(job.data.creation).format('DD MMM YYYY') }}
-									</span>
-								</div>
-							</div>
-							<div
-								v-if="applicationCount.data"
-								class="flex items-center space-x-4"
-							>
-								<SquareUserRound class="size-4 stroke-1.5 text-ink-gray-7" />
-								<div class="flex flex-col space-y-1 text-ink-gray-7">
-									<span class="text-xs text-ink-gray-5 font-medium uppercase">
-										{{ __('Applications Received') }}
-									</span>
-									<span class="text-sm font-semibold">
-										{{ applicationCount.data }}
-									</span>
-								</div>
-							</div>
-						</div>
+
+					<div class="space-x-5">
+						<Badge size="lg">
+							<template #prefix>
+								<CalendarDays class="size-3 stroke-2 text-ink-gray-7" />
+							</template>
+							{{ dayjs(job.data.creation).fromNow() }}
+						</Badge>
+						<Badge size="lg">
+							<template #prefix>
+								<SquareUserRound class="size-3 stroke-2 text-ink-gray-7" />
+							</template>
+							{{ applicationCount.data }}
+							{{
+								applicationCount.data == 1 ? __('applicant') : __('applicants')
+							}}
+						</Badge>
+						<Badge size="lg">
+							<template #prefix>
+								<ClipboardType class="size-3 stroke-2 text-ink-gray-7" />
+							</template>
+							{{ job.data.type }}
+						</Badge>
 					</div>
 				</div>
+
+				<div class="flex items-center justify-between">
+					<div class="bg-surface-gray-2 h-px m-1 w-1/2"></div>
+					<div>
+						<FileText class="size-3 stroke-1 text-ink-gray-5" />
+					</div>
+					<div class="bg-surface-gray-2 h-px m-1 w-1/2"></div>
+				</div>
+
 				<p
 					v-html="job.data.description"
-					class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal mt-6"
+					class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal mt-12"
 				></p>
 			</div>
 			<JobApplicationModal
@@ -169,15 +144,14 @@ import { inject, ref } from 'vue'
 import { sessionStore } from '../stores/session'
 import JobApplicationModal from '@/components/Modals/JobApplicationModal.vue'
 import {
-	MapPin,
 	Check,
 	SendHorizonal,
 	Pencil,
-	Building2,
 	CalendarDays,
-	ClipboardType,
 	SquareUserRound,
 	SquareArrowOutUpRight,
+	FileText,
+	ClipboardType,
 } from 'lucide-vue-next'
 
 const user = inject('$user')
@@ -252,3 +226,12 @@ usePageMeta(() => {
 	}
 })
 </script>
+<style>
+p {
+	margin-bottom: 0.5rem !important;
+	line-height: 1.5;
+}
+p span {
+	line-height: 1.5;
+}
+</style>
diff --git a/frontend/src/pages/Statistics.vue b/frontend/src/pages/Statistics.vue
index 55dfee3d..74949515 100644
--- a/frontend/src/pages/Statistics.vue
+++ b/frontend/src/pages/Statistics.vue
@@ -7,35 +7,45 @@
 		</header>
 		<div v-if="chartDetails.data" class="p-5">
 			<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
-				<NumberChart
-					class="border rounded-md"
-					:config="{ title: 'Courses', value: chartDetails.data.courses }"
-				/>
-				<NumberChart
-					class="border rounded-md"
-					:config="{ title: 'Signups', value: chartDetails.data.users }"
-				/>
-				<NumberChart
-					class="border rounded-md"
-					:config="{
-						title: 'Enrollments',
-						value: chartDetails.data.enrollments,
-					}"
-				/>
-				<NumberChart
-					class="border rounded-md"
-					:config="{
-						title: 'Completions',
-						value: chartDetails.data.completions,
-					}"
-				/>
-				<NumberChart
-					class="border rounded-md"
-					:config="{
-						title: 'Certifications',
-						value: chartDetails.data.certifications,
-					}"
-				/>
+				<Tooltip :text="__('Published Courses')">
+					<NumberChart
+						class="border rounded-md"
+						:config="{ title: 'Courses', value: chartDetails.data.courses }"
+					/>
+				</Tooltip>
+				<Tooltip :text="__('Active Members')">
+					<NumberChart
+						class="border rounded-md"
+						:config="{ title: 'Signups', value: chartDetails.data.users }"
+					/>
+				</Tooltip>
+				<Tooltip :text="__('Course Enrollments')">
+					<NumberChart
+						class="border rounded-md"
+						:config="{
+							title: 'Enrollments',
+							value: chartDetails.data.enrollments,
+						}"
+					/>
+				</Tooltip>
+				<Tooltip :text="__('Course Completions')">
+					<NumberChart
+						class="border rounded-md"
+						:config="{
+							title: 'Completions',
+							value: chartDetails.data.completions,
+						}"
+					/>
+				</Tooltip>
+				<Tooltip :text="__('Certified Members')">
+					<NumberChart
+						class="border rounded-md"
+						:config="{
+							title: 'Certifications',
+							value: chartDetails.data.certifications,
+						}"
+					/>
+				</Tooltip>
 			</div>
 			<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-4">
 				<div class="border rounded-md min-h-72">
@@ -129,6 +139,7 @@ import {
 	createResource,
 	DonutChart,
 	NumberChart,
+	Tooltip,
 	usePageMeta,
 } from 'frappe-ui'
 import { computed } from 'vue'
diff --git a/lms/lms/utils.py b/lms/lms/utils.py
index 29f8dae4..c9916b2f 100644
--- a/lms/lms/utils.py
+++ b/lms/lms/utils.py
@@ -772,14 +772,17 @@ def get_chart_data(
 		from_date = add_months(getdate(), -1)
 	if not to_date:
 		to_date = getdate()
-	chart = frappe.get_doc("Dashboard Chart", chart_name)
-	filters = [([chart.document_type, "docstatus", "<", 2, False])]
-	doctype = chart.document_type
-	datefield = chart.based_on
-	value_field = chart.value_based_on or "1"
+
 	from_date = get_datetime(from_date).strftime("%Y-%m-%d")
 	to_date = get_datetime(to_date)
 
+	chart = frappe.get_doc("Dashboard Chart", chart_name)
+	doctype = chart.document_type
+	datefield = chart.based_on
+	value_field = chart.value_based_on or "1"
+
+	filters = [([chart.document_type, "docstatus", "<", 2, False])]
+	filters = filters + json.loads(chart.filters_json)
 	filters.append([doctype, datefield, ">=", from_date, False])
 	filters.append([doctype, datefield, "<=", to_date, False])