From fa94e5f96a353e34a179c93a850b89406b15b3bf Mon Sep 17 00:00:00 2001
From: raizasafeel <89463672+raizasafeel@users.noreply.github.com>
Date: Fri, 10 Apr 2026 14:58:00 +0530
Subject: [PATCH] refactor(pages): swap tailwindcss classes with ones with rtl
 support

---
 .../src/pages/AssignmentSubmissionList.vue     |  2 +-
 frontend/src/pages/Batches/BatchDetail.vue     |  2 +-
 frontend/src/pages/Batches/BatchOverview.vue   |  2 +-
 frontend/src/pages/Batches/Batches.vue         |  4 ++--
 .../Batches/components/AdminBatchDashboard.vue |  8 ++++----
 .../pages/Batches/components/Announcements.vue |  2 +-
 .../pages/Batches/components/Assessments.vue   |  2 +-
 .../src/pages/Batches/components/BatchCard.vue |  6 +++---
 .../pages/Batches/components/BatchCourses.vue  |  2 +-
 .../Batches/components/BatchDashboard.vue      |  4 ++--
 .../pages/Batches/components/BatchOverlay.vue  | 10 +++++-----
 .../components/BatchStudentProgress.vue        | 12 ++++++------
 .../src/pages/Batches/components/LiveClass.vue | 10 +++++-----
 .../pages/Batches/components/NewBatchModal.vue |  2 +-
 frontend/src/pages/Billing.vue                 |  4 ++--
 frontend/src/pages/CertifiedParticipants.vue   | 10 +++++-----
 frontend/src/pages/Courses/CourseDashboard.vue | 12 ++++++------
 frontend/src/pages/Courses/CourseDetail.vue    |  2 +-
 .../pages/Courses/CourseEnrollmentModal.vue    |  2 +-
 frontend/src/pages/Courses/CourseForm.vue      | 16 ++++++++--------
 frontend/src/pages/Courses/CourseOverview.vue  | 10 +++++-----
 frontend/src/pages/Courses/Courses.vue         |  4 ++--
 frontend/src/pages/Courses/NewCourseModal.vue  |  2 +-
 .../pages/Courses/StudentCourseProgress.vue    |  4 ++--
 frontend/src/pages/Home/AdminHome.vue          | 18 +++++++++---------
 frontend/src/pages/Home/Streak.vue             |  2 +-
 frontend/src/pages/Home/StudentHome.vue        | 12 ++++++------
 frontend/src/pages/JobApplications.vue         |  4 ++--
 frontend/src/pages/JobDetail.vue               |  6 +++---
 frontend/src/pages/JobForm.vue                 |  2 +-
 frontend/src/pages/Jobs.vue                    |  4 ++--
 frontend/src/pages/Lesson.vue                  | 16 ++++++++--------
 frontend/src/pages/Notifications.vue           | 18 +++++++++---------
 frontend/src/pages/PersonaForm.vue             |  4 ++--
 frontend/src/pages/Profile.vue                 | 10 +++++-----
 frontend/src/pages/ProfileAbout.vue            |  4 ++--
 frontend/src/pages/ProfileEvaluator.vue        |  4 ++--
 frontend/src/pages/ProfileRoles.vue            |  2 +-
 .../ProgrammingExerciseForm.vue                |  4 ++--
 .../ProgrammingExerciseSubmission.vue          |  6 +++---
 .../ProgrammingExerciseSubmissions.vue         |  4 ++--
 .../ProgrammingExercises.vue                   |  2 +-
 frontend/src/pages/Programs/ProgramDetail.vue  |  2 +-
 .../src/pages/Programs/ProgramEnrollment.vue   | 12 ++++++------
 frontend/src/pages/Programs/ProgramForm.vue    | 10 +++++-----
 .../pages/Programs/ProgramProgressSummary.vue  |  2 +-
 frontend/src/pages/Programs/Programs.vue       |  8 ++++----
 .../src/pages/Programs/StudentPrograms.vue     |  6 +++---
 frontend/src/pages/QuizForm.vue                |  4 ++--
 frontend/src/pages/QuizSubmission.vue          |  2 +-
 frontend/src/pages/QuizSubmissionList.vue      |  2 +-
 frontend/src/pages/Quizzes.vue                 |  4 ++--
 frontend/src/pages/Search/Search.vue           |  6 +++---
 53 files changed, 157 insertions(+), 157 deletions(-)

diff --git a/frontend/src/pages/AssignmentSubmissionList.vue b/frontend/src/pages/AssignmentSubmissionList.vue
index 8d6a17fb..77f7ccb2 100644
--- a/frontend/src/pages/AssignmentSubmissionList.vue
+++ b/frontend/src/pages/AssignmentSubmissionList.vue
@@ -26,7 +26,7 @@
 			rowKey="name"
 		>
 			<ListHeader
-				class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
+				class="mb-2 grid items-center gap-x-4 rounded bg-surface-gray-2 p-2"
 			>
 				<ListHeaderItem :item="item" v-for="item in submissionColumns" />
 			</ListHeader>
diff --git a/frontend/src/pages/Batches/BatchDetail.vue b/frontend/src/pages/Batches/BatchDetail.vue
index c90f80da..d21b78a2 100644
--- a/frontend/src/pages/Batches/BatchDetail.vue
+++ b/frontend/src/pages/Batches/BatchDetail.vue
@@ -4,7 +4,7 @@
 			class="sticky top-0 z-10 border-b flex items-center justify-between bg-surface-white px-3 py-2.5 sm:px-5"
 		>
 			<Breadcrumbs :items="breadcrumbs" />
-			<div v-if="tabIndex == 5 && isAdmin" class="flex items-center space-x-2">
+			<div v-if="tabIndex == 5 && isAdmin" class="flex items-center gap-x-2">
 				<Badge v-if="childRef?.isDirty" theme="orange">
 					{{ __('Not Saved') }}
 				</Badge>
diff --git a/frontend/src/pages/Batches/BatchOverview.vue b/frontend/src/pages/Batches/BatchOverview.vue
index 918ffe7a..b674bd59 100644
--- a/frontend/src/pages/Batches/BatchOverview.vue
+++ b/frontend/src/pages/Batches/BatchOverview.vue
@@ -10,7 +10,7 @@
 				</div>
 				<div class="flex avatar-group overlap">
 					<div
-						class="h-6 mr-1"
+						class="h-6 me-1"
 						:class="{
 							'avatar-group overlap': batch.data.instructors.length > 1,
 						}"
diff --git a/frontend/src/pages/Batches/Batches.vue b/frontend/src/pages/Batches/Batches.vue
index f46571a0..21dbfafe 100644
--- a/frontend/src/pages/Batches/Batches.vue
+++ b/frontend/src/pages/Batches/Batches.vue
@@ -34,7 +34,7 @@
 					<template #suffix>
 						<ChevronDown
 							:class="[
-								'w-4 h-4 stroke-1.5 ml-1 transform transition-transform',
+								'w-4 h-4 stroke-1.5 ms-1 transform transition-transform',
 								open ? 'rotate-180' : '',
 							]"
 						/>
@@ -51,7 +51,7 @@
 				{{ __('All Batches') }}
 			</div>
 			<div
-				class="flex flex-col space-y-3 lg:space-y-0 lg:flex-row lg:items-center lg:space-x-4"
+				class="flex flex-col space-y-3 lg:space-y-0 lg:flex-row lg:items-center lg:gap-x-4"
 			>
 				<TabButtons
 					v-if="user.data"
diff --git a/frontend/src/pages/Batches/components/AdminBatchDashboard.vue b/frontend/src/pages/Batches/components/AdminBatchDashboard.vue
index 629aae81..5b7ef7c1 100644
--- a/frontend/src/pages/Batches/components/AdminBatchDashboard.vue
+++ b/frontend/src/pages/Batches/components/AdminBatchDashboard.vue
@@ -26,11 +26,11 @@
 
 		<div class="grid grid-cols-1 lg:grid-cols-[3fr_2fr] gap-5 items-start">
 			<div class="border rounded-lg py-3 px-4 order-2 lg:order-1">
-				<div class="flex items-center justify-between space-x-2 mb-3">
+				<div class="flex items-center justify-between gap-x-2 mb-3">
 					<div class="text-lg text-ink-gray-9 font-semibold">
 						{{ __('Students') }}
 					</div>
-					<div class="flex items-center space-x-2">
+					<div class="flex items-center gap-x-2">
 						<FormControl
 							v-model="searchFilter"
 							:placeholder="__('Search by name')"
@@ -62,7 +62,7 @@
 						}"
 					>
 						<ListHeader
-							class="mb-2 grid items-center space-x-4 rounded bg-surface-white border-b rounded-none p-2"
+							class="mb-2 grid items-center gap-x-4 rounded bg-surface-white border-b rounded-none p-2"
 						>
 							<ListHeaderItem
 								:item="item"
@@ -91,7 +91,7 @@
 											<!-- <ProgressBar
 												v-else-if="column.key == 'progress'"
 												:progress="Math.ceil(row[column.key])"
-												class="!mx-0 !mr-4"
+												class="!mx-0 !me-4"
 											/> -->
 										</template>
 										<div v-if="column.key == 'creation'">
diff --git a/frontend/src/pages/Batches/components/Announcements.vue b/frontend/src/pages/Batches/components/Announcements.vue
index 7b0a65af..8155c459 100644
--- a/frontend/src/pages/Batches/components/Announcements.vue
+++ b/frontend/src/pages/Batches/components/Announcements.vue
@@ -9,7 +9,7 @@
 					<div class="flex items-center justify-between mb-2">
 						<div class="flex items-center">
 							<Avatar :label="comm.sender_full_name" size="lg" />
-							<div class="ml-2 text-ink-gray-7">
+							<div class="ms-2 text-ink-gray-7">
 								{{ comm.sender_full_name }}
 							</div>
 						</div>
diff --git a/frontend/src/pages/Batches/components/Assessments.vue b/frontend/src/pages/Batches/components/Assessments.vue
index 7e2c7200..01977da5 100644
--- a/frontend/src/pages/Batches/components/Assessments.vue
+++ b/frontend/src/pages/Batches/components/Assessments.vue
@@ -24,7 +24,7 @@
 				}"
 			>
 				<ListHeader
-					class="mb-2 grid items-center space-x-4 rounded-none rounded-t bg-surface-gray-2 p-2"
+					class="mb-2 grid items-center gap-x-4 rounded-none rounded-t bg-surface-gray-2 p-2"
 				>
 					<ListHeaderItem :item="item" v-for="item in getAssessmentColumns()">
 					</ListHeaderItem>
diff --git a/frontend/src/pages/Batches/components/BatchCard.vue b/frontend/src/pages/Batches/components/BatchCard.vue
index d002134e..e8f409d6 100644
--- a/frontend/src/pages/Batches/components/BatchCard.vue
+++ b/frontend/src/pages/Batches/components/BatchCard.vue
@@ -39,7 +39,7 @@
 				class="text-sm text-ink-gray-7"
 			/>
 			<div class="flex items-center text-sm text-ink-gray-7">
-				<Clock class="h-4 w-4 stroke-1.5 mr-2 text-ink-gray-7" />
+				<Clock class="h-4 w-4 stroke-1.5 me-2 text-ink-gray-7" />
 				<span>
 					{{ formatTime(batch.start_time) }} - {{ formatTime(batch.end_time) }}
 				</span>
@@ -48,7 +48,7 @@
 				v-if="batch.timezone"
 				class="flex items-center text-sm text-ink-gray-7"
 			>
-				<Globe class="h-4 w-4 stroke-1.5 mr-2 text-ink-gray-5" />
+				<Globe class="h-4 w-4 stroke-1.5 me-2 text-ink-gray-5" />
 				<span>
 					{{ batch.timezone }}
 				</span>
@@ -59,7 +59,7 @@
 			class="flex avatar-group overlap mt-4"
 		>
 			<div
-				class="h-6 mr-1"
+				class="h-6 me-1"
 				:class="{ 'avatar-group overlap': batch.instructors.length > 1 }"
 			>
 				<UserAvatar
diff --git a/frontend/src/pages/Batches/components/BatchCourses.vue b/frontend/src/pages/Batches/components/BatchCourses.vue
index 6f7917fe..2b62308a 100644
--- a/frontend/src/pages/Batches/components/BatchCourses.vue
+++ b/frontend/src/pages/Batches/components/BatchCourses.vue
@@ -27,7 +27,7 @@
 				}"
 			>
 				<ListHeader
-					class="mb-2 grid items-center space-x-4 rounded-none rounded-t bg-surface-gray-2 p-2"
+					class="mb-2 grid items-center gap-x-4 rounded-none rounded-t bg-surface-gray-2 p-2"
 				>
 					<ListHeaderItem :item="item" v-for="item in getCoursesColumns()">
 					</ListHeaderItem>
diff --git a/frontend/src/pages/Batches/components/BatchDashboard.vue b/frontend/src/pages/Batches/components/BatchDashboard.vue
index d88d6dbe..e49449e1 100644
--- a/frontend/src/pages/Batches/components/BatchDashboard.vue
+++ b/frontend/src/pages/Batches/components/BatchDashboard.vue
@@ -35,7 +35,7 @@
 							}"
 						>
 							<ListHeader
-								class="mb-2 grid items-center space-x-4 rounded-none rounded-t bg-surface-gray-2 p-2"
+								class="mb-2 grid items-center gap-x-4 rounded-none rounded-t bg-surface-gray-2 p-2"
 							>
 							</ListHeader>
 							<ListRows>
@@ -65,7 +65,7 @@
 					<Assessments :batch="batch.data.name" />
 				</div>
 			</div>
-			<div class="border-l h-[88vh] divide-y">
+			<div class="border-s h-[88vh] divide-y">
 				<div v-if="batch.data?.evaluation" class="p-4 mb-5">
 					<UpcomingEvaluations
 						:batch="batch.data.name"
diff --git a/frontend/src/pages/Batches/components/BatchOverlay.vue b/frontend/src/pages/Batches/components/BatchOverlay.vue
index e71b0b13..c2da4f03 100644
--- a/frontend/src/pages/Batches/components/BatchOverlay.vue
+++ b/frontend/src/pages/Batches/components/BatchOverlay.vue
@@ -14,7 +14,7 @@
 				size="md"
 				:class="
 					batch.data.amount || batch.data.courses.length
-						? 'float-right'
+						? 'float-end'
 						: 'w-fit mb-4'
 				"
 				:label="
@@ -28,7 +28,7 @@
 				variant="subtle"
 				theme="red"
 				size="md"
-				class="float-right"
+				class="float-end"
 				:label="__('Sold Out')"
 			/>
 			<div
@@ -41,7 +41,7 @@
 				v-if="batch.data.courses.length"
 				class="flex items-center mb-3 text-ink-gray-7"
 			>
-				<BookOpen class="h-4 w-4 stroke-1.5 mr-2" />
+				<BookOpen class="h-4 w-4 stroke-1.5 me-2" />
 				<span> {{ batch.data.courses.length }} {{ __('Courses') }} </span>
 			</div>
 			<DateRange
@@ -50,14 +50,14 @@
 				class="mb-3"
 			/>
 			<div class="flex items-center mb-3 text-ink-gray-7">
-				<Clock class="h-4 w-4 stroke-1.5 mr-2" />
+				<Clock class="h-4 w-4 stroke-1.5 me-2" />
 				<span>
 					{{ formatTime(batch.data.start_time) }} -
 					{{ formatTime(batch.data.end_time) }}
 				</span>
 			</div>
 			<div v-if="batch.data.timezone" class="flex items-center text-ink-gray-7">
-				<Globe class="h-4 w-4 stroke-1.5 mr-2" />
+				<Globe class="h-4 w-4 stroke-1.5 me-2" />
 				<span>
 					{{ batch.data.timezone }}
 				</span>
diff --git a/frontend/src/pages/Batches/components/BatchStudentProgress.vue b/frontend/src/pages/Batches/components/BatchStudentProgress.vue
index fb5a3d6a..c2c05889 100644
--- a/frontend/src/pages/Batches/components/BatchStudentProgress.vue
+++ b/frontend/src/pages/Batches/components/BatchStudentProgress.vue
@@ -7,10 +7,10 @@
 	>
 		<template #body>
 			<div v-if="studentDetails.data" class="p-5 space-y-10 text-sm">
-				<div class="flex items-center space-x-2">
+				<div class="flex items-center gap-x-2">
 					<Avatar :image="studentDetails.data.user_image" size="3xl" />
 					<div class="space-y-1">
-						<div class="flex items-center space-x-2">
+						<div class="flex items-center gap-x-2">
 							<div class="text-xl font-semibold text-ink-gray-9">
 								{{ studentDetails.data.full_name }}
 							</div>
@@ -46,7 +46,7 @@
 						}"
 					>
 						<ListHeader
-							class="mb-2 grid items-center space-x-4 rounded-none rounded-t bg-surface-gray-2 p-2"
+							class="mb-2 grid items-center gap-x-4 rounded-none rounded-t bg-surface-gray-2 p-2"
 						>
 						</ListHeader>
 						<ListRows v-for="row in studentDetails.data.assessments">
@@ -88,7 +88,7 @@
 						}"
 					>
 						<ListHeader
-							class="mb-2 grid items-center space-x-4 rounded-none rounded-t bg-surface-gray-2 p-2"
+							class="mb-2 grid items-center gap-x-4 rounded-none rounded-t bg-surface-gray-2 p-2"
 						>
 						</ListHeader>
 						<ListRows v-for="row in studentDetails.data.courses">
@@ -103,12 +103,12 @@
 											<ProgressBar
 												v-if="column.key == 'progress'"
 												:progress="Math.ceil(row[column.key])"
-												class="!mx-0 !mr-4 max-w-32"
+												class="!mx-0 !me-4 max-w-32"
 											/>
 										</template>
 										<div
 											v-if="column.key == 'progress'"
-											class="text-xs !ml-0 !mr-3 w-5"
+											class="text-xs !ms-0 !me-3 w-5"
 										>
 											{{ Math.ceil(row[column.key]) }}%
 										</div>
diff --git a/frontend/src/pages/Batches/components/LiveClass.vue b/frontend/src/pages/Batches/components/LiveClass.vue
index 466bb08d..f79d6950 100644
--- a/frontend/src/pages/Batches/components/LiveClass.vue
+++ b/frontend/src/pages/Batches/components/LiveClass.vue
@@ -2,7 +2,7 @@
 	<div class="p-5">
 		<div
 			v-if="isAdmin() && !hasProviderAccount()"
-			class="flex lg:items-center space-x-2 mb-5 bg-surface-amber-1 px-3 py-2 rounded-lg text-ink-amber-3"
+			class="flex lg:items-center gap-x-2 mb-5 bg-surface-amber-1 px-3 py-2 rounded-lg text-ink-amber-3"
 		>
 			<AlertCircle class="size-7 md:size-4 stroke-1.5" />
 			<span class="leading-5">
@@ -50,13 +50,13 @@
 					{{ cls.description }}
 				</div>
 				<div class="mt-auto space-y-3">
-					<div class="flex items-center space-x-2">
+					<div class="flex items-center gap-x-2">
 						<Calendar class="w-4 h-4 stroke-1.5" />
 						<span>
 							{{ dayjs(cls.date).format('DD MMMM YYYY') }}
 						</span>
 					</div>
-					<div class="flex items-center space-x-2">
+					<div class="flex items-center gap-x-2">
 						<Clock class="w-4 h-4 stroke-1.5" />
 						<span>
 							{{ dayjs(getClassStart(cls)).format('hh:mm A') }} -
@@ -65,7 +65,7 @@
 					</div>
 					<div
 						v-if="canAccessClass(cls) && cls.join_url"
-						class="flex items-center space-x-2 text-ink-gray-9 mt-auto"
+						class="flex items-center gap-x-2 text-ink-gray-9 mt-auto"
 					>
 						<a
 							v-if="user.data?.is_moderator || user.data?.is_evaluator"
@@ -91,7 +91,7 @@
 						:text="__('This class has ended')"
 						placement="right"
 					>
-						<div class="flex items-center space-x-2 text-ink-amber-3 w-fit">
+						<div class="flex items-center gap-x-2 text-ink-amber-3 w-fit">
 							<Info class="w-4 h-4 stroke-1.5" />
 							<span>
 								{{ __('Ended') }}
diff --git a/frontend/src/pages/Batches/components/NewBatchModal.vue b/frontend/src/pages/Batches/components/NewBatchModal.vue
index d5ee9e24..3b00fe5a 100644
--- a/frontend/src/pages/Batches/components/NewBatchModal.vue
+++ b/frontend/src/pages/Batches/components/NewBatchModal.vue
@@ -102,7 +102,7 @@
 			</div>
 		</template>
 		<template #actions="{ close }">
-			<div class="text-right">
+			<div class="text-end">
 				<Button variant="solid" @click="saveBatch(close)">
 					{{ __('Save') }}
 				</Button>
diff --git a/frontend/src/pages/Billing.vue b/frontend/src/pages/Billing.vue
index c8fe6b72..77c7cbd4 100644
--- a/frontend/src/pages/Billing.vue
+++ b/frontend/src/pages/Billing.vue
@@ -63,7 +63,7 @@
 						<span class="text-ink-gray-5 uppercase text-xs">
 							{{ __('Enter a Coupon Code') }}:
 						</span>
-						<div class="flex items-center space-x-2">
+						<div class="flex items-center gap-x-2">
 							<FormControl
 								v-model="appliedCoupon"
 								:disabled="orderSummary.data.discount_amount > 0"
@@ -103,7 +103,7 @@
 					</p>
 				</div>
 
-				<div class="flex-1 lg:mr-10">
+				<div class="flex-1 lg:me-10">
 					<div class="mb-5">
 						<div class="text-lg font-semibold text-ink-gray-9">
 							{{ __('Address') }}
diff --git a/frontend/src/pages/CertifiedParticipants.vue b/frontend/src/pages/CertifiedParticipants.vue
index 7d62303f..f461cda5 100644
--- a/frontend/src/pages/CertifiedParticipants.vue
+++ b/frontend/src/pages/CertifiedParticipants.vue
@@ -18,9 +18,9 @@
 				{{ memberCount }} {{ __('Certified Members') }}
 			</div>
 			<div
-				class="flex flex-col md:flex-row md:items-center space-y-4 md:space-y-0 md:space-x-4"
+				class="flex flex-col md:flex-row md:items-center space-y-4 md:space-y-0 md:gap-x-4"
 			>
-				<div class="flex items-center space-x-4">
+				<div class="flex items-center gap-x-4">
 					<FormControl
 						v-model="nameFilter"
 						:placeholder="__('Search by Name')"
@@ -40,7 +40,7 @@
 						/>
 					</div>
 				</div>
-				<div class="flex items-center space-x-4">
+				<div class="flex items-center gap-x-4">
 					<Switch
 						size="sm"
 						v-model="openToWork"
@@ -68,7 +68,7 @@
 				>
 					<div class="rounded-md hover:bg-surface-gray-2 px-3">
 						<div
-							class="flex items-center w-full space-x-3 py-2"
+							class="flex items-center w-full gap-x-3 py-2"
 							:class="{
 								'border-b': index < participants.data.length - 1,
 							}"
@@ -88,7 +88,7 @@
 									</div>
 								</div>
 								<div
-									class="flex items-center space-x-3 md:space-x-24 text-sm md:text-base mt-1.5"
+									class="flex items-center gap-x-3 md:gap-x-24 text-sm md:text-base mt-1.5"
 								>
 									<div class="text-ink-gray-5">
 										{{ participant.certificate_count }}
diff --git a/frontend/src/pages/Courses/CourseDashboard.vue b/frontend/src/pages/Courses/CourseDashboard.vue
index a989768e..c40321f8 100644
--- a/frontend/src/pages/Courses/CourseDashboard.vue
+++ b/frontend/src/pages/Courses/CourseDashboard.vue
@@ -25,7 +25,7 @@
 					<div class="text-lg text-ink-gray-9 font-semibold">
 						{{ __('Students') }}
 					</div>
-					<div class="flex items-center space-x-2">
+					<div class="flex items-center gap-x-2">
 						<FormControl
 							v-model="searchFilter"
 							:placeholder="__('Search by name')"
@@ -53,7 +53,7 @@
 						}"
 					>
 						<ListHeader
-							class="mb-2 grid items-center space-x-4 rounded bg-surface-white border-b rounded-none p-2"
+							class="mb-2 grid items-center gap-x-4 rounded bg-surface-white border-b rounded-none p-2"
 						>
 							<ListHeaderItem
 								:item="item"
@@ -91,7 +91,7 @@
 											<ProgressBar
 												v-else-if="column.key == 'progress'"
 												:progress="Math.ceil(row[column.key])"
-												class="!mx-0 !mr-4"
+												class="!mx-0 !me-4"
 											/>
 										</template>
 										<div v-if="column.key == 'creation'">
@@ -153,12 +153,12 @@
 									}"
 								></div>
 								<Tooltip :text="row.name.split('(')[1].replace(')', '')">
-									<div class="ml-2">
+									<div class="ms-2">
 										{{ row.name.split('(')[0] }}
 									</div>
 								</Tooltip>
 								<Tooltip :text="row.value">
-									<div class="ml-auto">
+									<div class="ms-auto">
 										{{
 											Math.round((row.value / course.data?.enrollments) * 100)
 										}}%
@@ -221,7 +221,7 @@
 							class="flex justify-between text-sm py-2 my-1 text-ink-gray-9"
 						>
 							<div class="">
-								<span class="mr-3 text-xs">
+								<span class="me-3 text-xs">
 									{{ progress.chapter_idx }}.{{ progress.idx }}
 								</span>
 								<span>
diff --git a/frontend/src/pages/Courses/CourseDetail.vue b/frontend/src/pages/Courses/CourseDetail.vue
index 4e17c1ea..bfa615ec 100644
--- a/frontend/src/pages/Courses/CourseDetail.vue
+++ b/frontend/src/pages/Courses/CourseDetail.vue
@@ -4,7 +4,7 @@
 			class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
 		>
 			<Breadcrumbs class="h-7" :items="breadcrumbs" />
-			<div v-if="tabIndex == 2" class="flex items-center space-x-2">
+			<div v-if="tabIndex == 2" class="flex items-center gap-x-2">
 				<Badge v-if="childRef?.isDirty" theme="orange">
 					{{ __('Not Saved') }}
 				</Badge>
diff --git a/frontend/src/pages/Courses/CourseEnrollmentModal.vue b/frontend/src/pages/Courses/CourseEnrollmentModal.vue
index 958cafa9..b8f24aea 100644
--- a/frontend/src/pages/Courses/CourseEnrollmentModal.vue
+++ b/frontend/src/pages/Courses/CourseEnrollmentModal.vue
@@ -42,7 +42,7 @@
 			</div>
 		</template>
 		<template #actions="{ close }">
-			<div class="text-right">
+			<div class="text-end">
 				<Button variant="solid" @click="enrollStudent(close)">
 					{{ __('Enroll') }}
 				</Button>
diff --git a/frontend/src/pages/Courses/CourseForm.vue b/frontend/src/pages/Courses/CourseForm.vue
index 35bea904..1892e085 100644
--- a/frontend/src/pages/Courses/CourseForm.vue
+++ b/frontend/src/pages/Courses/CourseForm.vue
@@ -1,12 +1,12 @@
 <template>
-	<div class="pl-5">
+	<div class="ps-5">
 		<div class="grid grid-cols-1 md:grid-cols-[70%,30%]">
 			<div
 				v-if="courseResource.doc"
 				class="lg:max-h-[88vh] lg:overflow-y-auto px-1"
 			>
 				<div class="my-5">
-					<div class="pr-5 md:pr-10 pb-5 mb-5 space-y-5 border-b">
+					<div class="pe-5 md:pe-10 pb-5 mb-5 space-y-5 border-b">
 						<div class="text-lg font-semibold mb-4 text-ink-gray-9">
 							{{ __('Details') }}
 						</div>
@@ -55,7 +55,7 @@
 									<button
 										v-for="tag in parsedTags"
 										:key="tag"
-										class="inline-flex items-center gap-1 bg-surface-white border border-outline-gray-2 text-ink-gray-7 pl-2 pr-1.5 py-0.5 rounded text-base leading-5"
+										class="inline-flex items-center gap-1 bg-surface-white border border-outline-gray-2 text-ink-gray-7 ps-2 pe-1.5 py-0.5 rounded text-base leading-5"
 										@click.stop="removeTag(tag)"
 									>
 										<span>{{ tag }}</span>
@@ -99,7 +99,7 @@
 						</div>
 					</div>
 
-					<div class="pr-5 md:pr-10 pb-5 mb-5 space-y-5 border-b">
+					<div class="pe-5 md:pe-10 pb-5 mb-5 space-y-5 border-b">
 						<div class="text-lg font-semibold text-ink-gray-9">
 							{{ __('Publishing Settings') }}
 						</div>
@@ -153,7 +153,7 @@
 						</div>
 					</div>
 
-					<div class="pr-5 md:pr-10 pb-5 mb-5 space-y-5 border-b">
+					<div class="pe-5 md:pe-10 pb-5 mb-5 space-y-5 border-b">
 						<div class="text-lg font-semibold text-ink-gray-9">
 							{{ __('About the Course') }}
 						</div>
@@ -217,7 +217,7 @@
 						/>
 					</div>
 
-					<div class="pr-5 md:pr-10 pb-5 space-y-5 border-b">
+					<div class="pe-5 md:pe-10 pb-5 space-y-5 border-b">
 						<div class="text-lg font-semibold mt-5 text-ink-gray-9">
 							{{ __('Pricing and Certification') }}
 						</div>
@@ -294,7 +294,7 @@
 						</div>
 					</div>
 
-					<div class="pr-5 md:pr-10 pb-5 space-y-5">
+					<div class="pe-5 md:pe-10 pb-5 space-y-5">
 						<div class="text-lg font-semibold mt-5 text-ink-gray-9">
 							{{ __('Meta Tags') }}
 						</div>
@@ -318,7 +318,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="min-h-0 border-l">
+			<div class="min-h-0 border-s">
 				<CourseOutline
 					v-if="courseResource.doc"
 					:courseName="courseResource.doc.name"
diff --git a/frontend/src/pages/Courses/CourseOverview.vue b/frontend/src/pages/Courses/CourseOverview.vue
index a2a987ad..f5e7d4be 100644
--- a/frontend/src/pages/Courses/CourseOverview.vue
+++ b/frontend/src/pages/Courses/CourseOverview.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="p-5">
-		<div class="flex justify-between w-full space-x-5">
+		<div class="flex justify-between w-full gap-x-5">
 			<div class="md:w-2/3">
 				<div class="text-3xl font-semibold text-ink-gray-9">
 					{{ course.data.title }}
@@ -15,7 +15,7 @@
 						class="flex items-center"
 					>
 						<Star class="size-4 text-transparent fill-yellow-500" />
-						<span class="ml-1 text-ink-gray-7">
+						<span class="ms-1 text-ink-gray-7">
 							{{ course.data.rating }}
 						</span>
 					</Tooltip>
@@ -28,14 +28,14 @@
 						class="flex items-center"
 					>
 						<Users class="h-4 w-4 text-ink-gray-7" />
-						<span class="ml-1">
+						<span class="ms-1">
 							{{ course.data.enrollment_count_formatted }}
 						</span>
 					</Tooltip>
 					<span v-if="course.data.enrollment_count" class="mx-3">&middot;</span>
 					<div class="flex items-center">
 						<span
-							class="h-6 mr-1"
+							class="h-6 me-1"
 							:class="{
 								'avatar-group overlap': course.data.instructors.length > 1,
 							}"
@@ -52,7 +52,7 @@
 					<Badge
 						theme="gray"
 						size="lg"
-						class="mr-2 text-ink-gray-9"
+						class="me-2 text-ink-gray-9"
 						v-for="tag in course.data.tags.split(', ')"
 					>
 						{{ tag }}
diff --git a/frontend/src/pages/Courses/Courses.vue b/frontend/src/pages/Courses/Courses.vue
index 18d72c48..1ba36d75 100644
--- a/frontend/src/pages/Courses/Courses.vue
+++ b/frontend/src/pages/Courses/Courses.vue
@@ -37,7 +37,7 @@
 					<template #suffix>
 						<ChevronDown
 							:class="[
-								'w-4 h-4 stroke-1.5 ml-1 transform transition-transform',
+								'w-4 h-4 stroke-1.5 ms-1 transform transition-transform',
 								open ? 'rotate-180' : '',
 							]"
 						/>
@@ -54,7 +54,7 @@
 				{{ __('All Courses') }}
 			</div>
 			<div
-				class="flex flex-col space-y-3 lg:space-y-0 lg:flex-row lg:items-center lg:space-x-4"
+				class="flex flex-col space-y-3 lg:space-y-0 lg:flex-row lg:items-center lg:gap-x-4"
 			>
 				<TabButtons :buttons="courseTabs" v-model="currentTab" class="w-fit" />
 
diff --git a/frontend/src/pages/Courses/NewCourseModal.vue b/frontend/src/pages/Courses/NewCourseModal.vue
index 49336076..258d971f 100644
--- a/frontend/src/pages/Courses/NewCourseModal.vue
+++ b/frontend/src/pages/Courses/NewCourseModal.vue
@@ -64,7 +64,7 @@
 			</div>
 		</template>
 		<template #actions="{ close }">
-			<div class="text-right">
+			<div class="text-end">
 				<Button variant="solid" @click="saveCourse(close)">
 					{{ __('Save') }}
 				</Button>
diff --git a/frontend/src/pages/Courses/StudentCourseProgress.vue b/frontend/src/pages/Courses/StudentCourseProgress.vue
index 3a159fa0..53a8bcde 100644
--- a/frontend/src/pages/Courses/StudentCourseProgress.vue
+++ b/frontend/src/pages/Courses/StudentCourseProgress.vue
@@ -9,7 +9,7 @@
 		<template #body-content>
 			<div class="text-base text-ink-gray-9 max-h-[70vh] overflow-y-auto">
 				<div class="flex justify-between mb-5 px-2">
-					<div class="flex items-center space-x-2">
+					<div class="flex items-center gap-x-2">
 						<Avatar
 							:image="student?.member_image"
 							:label="student?.member_name"
@@ -50,7 +50,7 @@
 							class="flex justify-between text-sm py-2 my-1"
 						>
 							<div class="">
-								<span class="mr-3 text-xs">
+								<span class="me-3 text-xs">
 									{{ progress.chapter_idx }}.{{ progress.idx }}
 								</span>
 								<span>
diff --git a/frontend/src/pages/Home/AdminHome.vue b/frontend/src/pages/Home/AdminHome.vue
index 64bee64b..db2f60ef 100644
--- a/frontend/src/pages/Home/AdminHome.vue
+++ b/frontend/src/pages/Home/AdminHome.vue
@@ -17,19 +17,19 @@
 						<div class="text-ink-gray-7">
 							<div class="flex items-center mb-3">
 								<Calendar class="w-4 h-4 stroke-1.5" />
-								<span class="ml-2">
+								<span class="ms-2">
 									{{ dayjs(evaluation.date).format('DD MMMM YYYY') }}
 								</span>
 							</div>
 							<div class="flex items-center mb-3">
 								<Clock class="w-4 h-4 stroke-1.5" />
-								<span class="ml-2">
+								<span class="ms-2">
 									{{ formatTime(evaluation.start_time) }}
 								</span>
 							</div>
 							<div class="flex items-center">
 								<GraduationCap class="w-4 h-4 stroke-1.5" />
-								<span class="ml-2">
+								<span class="ms-2">
 									{{ evaluation.member_name }}
 								</span>
 							</div>
@@ -53,13 +53,13 @@
 							{{ cls.description }}
 						</div>
 						<div class="mt-auto space-y-3 text-ink-gray-7">
-							<div class="flex items-center space-x-2">
+							<div class="flex items-center gap-x-2">
 								<Calendar class="w-4 h-4 stroke-1.5" />
 								<span>
 									{{ dayjs(cls.date).format('DD MMMM YYYY') }}
 								</span>
 							</div>
-							<div class="flex items-center space-x-2">
+							<div class="flex items-center gap-x-2">
 								<Clock class="w-4 h-4 stroke-1.5" />
 								<span>
 									{{ formatTime(cls.time) }} -
@@ -68,7 +68,7 @@
 							</div>
 							<div
 								v-if="canAccessClass(cls)"
-								class="flex items-center space-x-2 text-ink-gray-9 mt-auto"
+								class="flex items-center gap-x-2 text-ink-gray-9 mt-auto"
 							>
 								<a
 									v-if="user.data?.is_moderator || user.data?.is_evaluator"
@@ -94,7 +94,7 @@
 								:text="__('This class has ended')"
 								placement="right"
 							>
-								<div class="flex items-center space-x-2 text-ink-amber-3 w-fit">
+								<div class="flex items-center gap-x-2 text-ink-amber-3 w-fit">
 									<Info class="w-4 h-4 stroke-1.5" />
 									<span>
 										{{ __('Ended') }}
@@ -117,7 +117,7 @@
 						name: 'Courses',
 					}"
 				>
-					<span class="flex items-center space-x-1 text-ink-gray-5 text-xs">
+					<span class="flex items-center gap-x-1 text-ink-gray-5 text-xs">
 						<span>
 							{{ __('See all') }}
 						</span>
@@ -145,7 +145,7 @@
 						name: 'Batches',
 					}"
 				>
-					<span class="flex items-center space-x-1 text-ink-gray-5 text-xs">
+					<span class="flex items-center gap-x-1 text-ink-gray-5 text-xs">
 						<span>
 							{{ __('See all') }}
 						</span>
diff --git a/frontend/src/pages/Home/Streak.vue b/frontend/src/pages/Home/Streak.vue
index 0011d8ee..fd30e8c4 100644
--- a/frontend/src/pages/Home/Streak.vue
+++ b/frontend/src/pages/Home/Streak.vue
@@ -29,7 +29,7 @@
 				<div
 					class="grid grid-cols-2 bg-surface-gray-1 px-2.5 py-2 rounded-md mt-8"
 				>
-					<div class="space-y-1 border-r border-outline-gray-2 mr-4">
+					<div class="space-y-1 border-e border-outline-gray-2 me-4">
 						<div class="text-ink-gray-6">
 							{{ __('Current Streak') }}
 						</div>
diff --git a/frontend/src/pages/Home/StudentHome.vue b/frontend/src/pages/Home/StudentHome.vue
index 9c02893c..a394b630 100644
--- a/frontend/src/pages/Home/StudentHome.vue
+++ b/frontend/src/pages/Home/StudentHome.vue
@@ -18,13 +18,13 @@
 							{{ cls.description }}
 						</div>
 						<div class="mt-auto space-y-4 text-ink-gray-7">
-							<div class="flex items-center space-x-2">
+							<div class="flex items-center gap-x-2">
 								<Calendar class="w-4 h-4 stroke-1.5" />
 								<span>
 									{{ dayjs(cls.date).format('DD MMMM YYYY') }}
 								</span>
 							</div>
-							<div class="flex items-center space-x-2">
+							<div class="flex items-center gap-x-2">
 								<Clock class="w-4 h-4 stroke-1.5" />
 								<span>
 									{{ formatTime(cls.time) }} -
@@ -33,7 +33,7 @@
 							</div>
 							<div
 								v-if="canAccessClass(cls)"
-								class="flex items-center space-x-2 text-ink-gray-9 mt-auto"
+								class="flex items-center gap-x-2 text-ink-gray-9 mt-auto"
 							>
 								<a
 									v-if="user.data?.is_moderator || user.data?.is_evaluator"
@@ -59,7 +59,7 @@
 								:text="__('This class has ended')"
 								placement="right"
 							>
-								<div class="flex items-center space-x-2 text-ink-amber-3 w-fit">
+								<div class="flex items-center gap-x-2 text-ink-amber-3 w-fit">
 									<Info class="w-4 h-4 stroke-1.5" />
 									<span>
 										{{ __('Ended') }}
@@ -86,7 +86,7 @@
 						name: 'Courses',
 					}"
 				>
-					<span class="flex items-center space-x-1 text-ink-gray-5 text-xs">
+					<span class="flex items-center gap-x-1 text-ink-gray-5 text-xs">
 						<span>
 							{{ __('See all') }}
 						</span>
@@ -118,7 +118,7 @@
 						name: 'Batches',
 					}"
 				>
-					<span class="flex items-center space-x-1 text-ink-gray-5 text-xs">
+					<span class="flex items-center gap-x-1 text-ink-gray-5 text-xs">
 						<span>
 							{{ __('See all') }}
 						</span>
diff --git a/frontend/src/pages/JobApplications.vue b/frontend/src/pages/JobApplications.vue
index acd34eb3..0d489d13 100644
--- a/frontend/src/pages/JobApplications.vue
+++ b/frontend/src/pages/JobApplications.vue
@@ -34,7 +34,7 @@
 					}"
 				>
 					<ListHeader
-						class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
+						class="mb-2 grid items-center gap-x-4 rounded bg-surface-gray-2 p-2"
 					>
 						<ListHeaderItem
 							:item="item"
@@ -60,7 +60,7 @@
 							<ListRowItem :item="item">
 								<div
 									v-if="column.key === 'full_name'"
-									class="flex items-center space-x-3"
+									class="flex items-center gap-x-3"
 								>
 									<Avatar
 										size="sm"
diff --git a/frontend/src/pages/JobDetail.vue b/frontend/src/pages/JobDetail.vue
index 5735f890..78989328 100644
--- a/frontend/src/pages/JobDetail.vue
+++ b/frontend/src/pages/JobDetail.vue
@@ -18,7 +18,7 @@
 			/>
 			<div
 				v-if="user.data?.name && !readOnlyMode"
-				class="flex items-center space-x-2"
+				class="flex items-center gap-x-2"
 			>
 				<router-link
 					v-if="canManageJob && applicationCount.data > 0"
@@ -82,7 +82,7 @@
 					<div class="flex">
 						<img
 							:src="job.data.company_logo"
-							class="size-10 rounded-lg object-contain cursor-pointer mr-4"
+							class="size-10 rounded-lg object-contain cursor-pointer me-4"
 							:alt="job.data.company_name"
 							@click="redirectToWebsite(job.data.company_website)"
 						/>
@@ -97,7 +97,7 @@
 						</div>
 					</div>
 
-					<div class="space-x-2">
+					<div class="flex items-center gap-x-2">
 						<Badge size="lg">
 							<template #prefix>
 								<CalendarDays class="size-3 stroke-2 text-ink-gray-7" />
diff --git a/frontend/src/pages/JobForm.vue b/frontend/src/pages/JobForm.vue
index 5524223b..fbd63398 100644
--- a/frontend/src/pages/JobForm.vue
+++ b/frontend/src/pages/JobForm.vue
@@ -4,7 +4,7 @@
 			class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
 		>
 			<Breadcrumbs :items="breadcrumbs" />
-			<div class="space-x-2">
+			<div class="flex items-center gap-x-2">
 				<Badge v-if="isDirty" theme="orange">
 					{{ __('Not Saved') }}
 				</Badge>
diff --git a/frontend/src/pages/Jobs.vue b/frontend/src/pages/Jobs.vue
index d068d257..a2d38c5a 100644
--- a/frontend/src/pages/Jobs.vue
+++ b/frontend/src/pages/Jobs.vue
@@ -44,7 +44,7 @@
 				</div>
 
 				<div
-					class="flex flex-col md:flex-row md:items-center md:space-x-4 space-y-4 md:space-y-0"
+					class="flex flex-col md:flex-row md:items-center md:gap-x-4 space-y-4 md:space-y-0"
 				>
 					<TabButtons
 						v-if="tabs.length > 1"
@@ -53,7 +53,7 @@
 						class="hidden lg:block"
 						@change="updateJobs"
 					/>
-					<div class="flex items-center space-x-4">
+					<div class="flex items-center gap-x-4">
 						<FormControl
 							type="text"
 							:placeholder="__('Search')"
diff --git a/frontend/src/pages/Lesson.vue b/frontend/src/pages/Lesson.vue
index 0f2d8b8a..96b9db9b 100644
--- a/frontend/src/pages/Lesson.vue
+++ b/frontend/src/pages/Lesson.vue
@@ -4,7 +4,7 @@
 			class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
 		>
 			<Breadcrumbs class="h-7" :items="breadcrumbs" />
-			<div class="flex items-center space-x-2">
+			<div class="flex items-center gap-x-2">
 				<Tooltip v-if="canGoZen()" :text="__('Zen Mode')">
 					<Button @click="goFullScreen()">
 						<template #icon>
@@ -66,9 +66,9 @@
 			</div>
 		</header>
 		<div class="grid md:grid-cols-[70%,30%] h-[94vh]">
-			<div v-if="lesson.data.no_preview" class="border-r">
+			<div v-if="lesson.data.no_preview" class="border-e">
 				<div class="shadow rounded-md w-3/4 mt-10 mx-auto text-center p-4">
-					<div class="flex items-center justify-center mt-4 space-x-2">
+					<div class="flex items-center justify-center mt-4 gap-x-2">
 						<LockKeyholeIcon class="size-4 stroke-2 text-ink-gray-5" />
 						<div class="text-lg font-semibold text-ink-gray-7">
 							{{ __('This lesson is locked') }}
@@ -113,7 +113,7 @@
 				}"
 			>
 				<div
-					class="border-r pt-5 pb-10 h-full"
+					class="border-e pt-5 pb-10 h-full"
 					:class="{
 						'w-full md:w-3/5 mx-auto border-none !pt-10': zenModeEnabled,
 					}"
@@ -129,7 +129,7 @@
 
 								<div
 									v-if="zenModeEnabled"
-									class="relative flex items-center space-x-2 text-sm mt-1 text-ink-gray-7 group w-fit mt-2"
+									class="relative flex items-center gap-x-2 text-sm mt-1 text-ink-gray-7 group w-fit mt-2"
 								>
 									<span>
 										{{ lesson.data.chapter_title }} -
@@ -137,7 +137,7 @@
 									</span>
 									<Info class="size-3" />
 									<div
-										class="hidden group-hover:block rounded bg-gray-900 px-2 py-1 text-xs text-white shadow-xl absolute left-0 top-full mt-2"
+										class="hidden group-hover:block rounded bg-gray-900 px-2 py-1 text-xs text-white shadow-xl absolute start-0 top-full mt-2"
 									>
 										{{ Math.ceil(lesson.data.membership.progress) }}%
 										{{ __('completed') }}
@@ -147,7 +147,7 @@
 
 							<div
 								v-if="zenModeEnabled"
-								class="flex items-center space-x-2 mt-2 md:mt-0"
+								class="flex items-center gap-x-2 mt-2 md:mt-0"
 							>
 								<Button @click="showDiscussionsInZenMode()">
 									<template #icon>
@@ -204,7 +204,7 @@
 
 						<div v-if="!zenModeEnabled" class="flex items-center mt-4 md:mt-2">
 							<span
-								class="h-6 mr-1"
+								class="h-6 me-1"
 								:class="{
 									'avatar-group overlap': lesson.data.instructors?.length > 1,
 								}"
diff --git a/frontend/src/pages/Notifications.vue b/frontend/src/pages/Notifications.vue
index c36ca2ad..6de8b130 100644
--- a/frontend/src/pages/Notifications.vue
+++ b/frontend/src/pages/Notifications.vue
@@ -3,7 +3,7 @@
 		class="sticky top-0 z-10 flex flex-col md:flex-row md:items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
 	>
 		<Breadcrumbs :items="breadcrumbs" />
-		<div class="flex items-center space-x-2">
+		<div class="flex items-center gap-x-2">
 			<Button
 				@click="markAllAsRead.submit"
 				:loading="markAllAsRead.loading"
@@ -23,7 +23,7 @@
 			v-if="notifications?.length"
 			v-for="log in notifications"
 			:key="log.name"
-			class="flex space-x-2 px-2 py-4"
+			class="flex gap-x-2 px-2 py-4"
 			:class="{
 				'cursor-pointer': log.link,
 				'items-center': !showDetails(log) && !isMentionOrComment(log),
@@ -40,7 +40,7 @@
 					<div class="flex items-center">
 						<div class="text-ink-gray-9" v-html="log.subject"></div>
 					</div>
-					<div class="flex items-center space-x-2">
+					<div class="flex items-center gap-x-2">
 						<div class="text-sm text-ink-gray-5">
 							{{ dayjs(log.creation).fromNow() }}
 						</div>
@@ -62,7 +62,7 @@
 				></div>
 				<div
 					v-else-if="showDetails(log)"
-					class="flex items-stretch border border-outline-gray-2 space-x-2 rounded-md"
+					class="flex items-stretch border border-outline-gray-2 gap-x-2 rounded-md"
 				>
 					<iframe
 						v-if="
@@ -70,7 +70,7 @@
 							log.document_details.video_link
 						"
 						:src="`https://www.youtube.com/embed/${log.document_details.video_link}`"
-						class="rounded-l-md w-72"
+						class="rounded-s-md w-72"
 					/>
 					<video
 						v-else-if="
@@ -78,7 +78,7 @@
 							log.document_details.video_link
 						"
 						:src="log.document_details.video_link"
-						class="rounded-l-md w-72"
+						class="rounded-s-md w-72"
 					/>
 					<div class="p-3">
 						<div
@@ -98,7 +98,7 @@
 						</div>
 						<div
 							v-if="log.document_details.start_date"
-							class="flex items-center space-x-2 text-sm mt-5"
+							class="flex items-center gap-x-2 text-sm mt-5"
 						>
 							<Calendar class="size-3 stroke-1.5" />
 							<span>
@@ -109,7 +109,7 @@
 						</div>
 						<div
 							v-if="log.document_details.start_time"
-							class="flex items-center space-x-2 text-sm mt-2"
+							class="flex items-center gap-x-2 text-sm mt-2"
 						>
 							<Clock class="size-3 stroke-1.5" />
 							<span>
@@ -123,7 +123,7 @@
 						>
 							<div
 								v-for="instructor in log.document_details.instructors"
-								class="flex items-center space-x-2"
+								class="flex items-center gap-x-2"
 							>
 								<Avatar
 									:size="'sm'"
diff --git a/frontend/src/pages/PersonaForm.vue b/frontend/src/pages/PersonaForm.vue
index 015db21b..b6401bce 100644
--- a/frontend/src/pages/PersonaForm.vue
+++ b/frontend/src/pages/PersonaForm.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="flex h-screen overflow-hidden sm:bg-gray-50">
 		<div class="relative h-full z-10 mx-auto sm:w-max pt-40">
-			<div class="mx-auto flex items-center justify-center space-x-2">
+			<div class="mx-auto flex items-center justify-center gap-x-2">
 				<LMSLogo class="size-7" />
 				<span
 					class="select-none text-xl font-semibold tracking-tight text-gray-900"
@@ -45,7 +45,7 @@
 				</div>
 			</div>
 			<div
-				class="text-center absolute bottom-0 right-0 left-0 mx-auto cursor-pointer text-sm pb-4"
+				class="text-center absolute bottom-0 end-0 start-0 mx-auto cursor-pointer text-sm pb-4"
 				@click="skipPersonaForm()"
 			>
 				{{ __('Skip') }}
diff --git a/frontend/src/pages/Profile.vue b/frontend/src/pages/Profile.vue
index 303f6853..8a6003e2 100644
--- a/frontend/src/pages/Profile.vue
+++ b/frontend/src/pages/Profile.vue
@@ -26,7 +26,7 @@
 				class="h-[130px] w-full"
 			></div>
 			<div
-				class="absolute bottom-[30%] md:bottom-0 left-[50%] mb-4 flex -translate-x-1/2 space-x-2 opacity-0 transition-opacity focus-within:opacity-100 group-hover:opacity-100"
+				class="absolute bottom-[30%] md:bottom-0 start-[50%] mb-4 flex -translate-x-1/2 gap-x-2 opacity-0 transition-opacity focus-within:opacity-100 group-hover:opacity-100"
 				v-if="isSessionUser()"
 			>
 				<EditCoverImage
@@ -72,7 +72,7 @@
 							placement="right"
 						>
 							<div
-								class="absolute bottom-3 right-1 p-0.5 bg-surface-white rounded-full"
+								class="absolute bottom-3 end-1 p-0.5 bg-surface-white rounded-full"
 							>
 								<div
 									class="rounded-full w-fit"
@@ -88,14 +88,14 @@
 						</Tooltip>
 					</div>
 				</div>
-				<div class="ml-6 mt-5">
+				<div class="ms-6 mt-5">
 					<h2 class="text-3xl font-semibold text-ink-gray-9">
 						{{ profile.data.full_name }}
 					</h2>
 					<div class="text-base text-ink-gray-7 mt-1">
 						{{ profile.data.headline }}
 					</div>
-					<div class="flex items-center space-x-4 mt-2">
+					<div class="flex items-center gap-x-4 mt-2">
 						<Twitter
 							v-if="profile.data.twitter"
 							class="size-4 text-ink-gray-5 cursor-pointer"
@@ -115,7 +115,7 @@
 				</div>
 				<Button
 					v-if="isSessionUser() && !readOnlyMode"
-					class="mt-3 sm:mt-0 md:ml-auto"
+					class="mt-3 sm:mt-0 md:ms-auto"
 					@click="editProfile()"
 				>
 					<template #prefix>
diff --git a/frontend/src/pages/ProfileAbout.vue b/frontend/src/pages/ProfileAbout.vue
index 5206e1a3..a1791489 100644
--- a/frontend/src/pages/ProfileAbout.vue
+++ b/frontend/src/pages/ProfileAbout.vue
@@ -45,7 +45,7 @@
 							/>
 							<div
 								v-if="badge.count > 1"
-								class="flex items-end bg-surface-gray-2 p-2 text-xs font-semibold rounded-full absolute right-0 bottom-0"
+								class="flex items-end bg-surface-gray-2 p-2 text-xs font-semibold rounded-full absolute end-0 bottom-0"
 							>
 								<span>
 									<X class="w-3 h-3" />
@@ -83,7 +83,7 @@
 									<span class="text-xs text-ink-gray-7 font-medium mb-1">
 										{{ __('Share on') }}:
 									</span>
-									<div class="flex items-center space-x-2">
+									<div class="flex items-center gap-x-2">
 										<Button
 											variant="outline"
 											size="sm"
diff --git a/frontend/src/pages/ProfileEvaluator.vue b/frontend/src/pages/ProfileEvaluator.vue
index 78ef4db7..08b8842c 100644
--- a/frontend/src/pages/ProfileEvaluator.vue
+++ b/frontend/src/pages/ProfileEvaluator.vue
@@ -6,7 +6,7 @@
 
 		<div
 			v-if="readOnlyMode"
-			class="flex items-center space-x-2 text-sm text-ink-gray-7 bg-surface-gray-1 px-3 py-2 rounded-md w-full text-center"
+			class="flex items-center gap-x-2 text-sm text-ink-gray-7 bg-surface-gray-1 px-3 py-2 rounded-md w-full text-center"
 		>
 			<CircleAlert class="size-4 stroke-1.5" />
 			<span>
@@ -139,7 +139,7 @@
 					v-if="evaluator.data?.calendar && evaluator.data?.is_authorized"
 					class="flex items-center bg-surface-green-2 text-green-900 text-sm p-1 rounded-md mb-4 w-fit"
 				>
-					<Check class="h-4 w-4 stroke-1.5 mr-2" />
+					<Check class="h-4 w-4 stroke-1.5 me-2" />
 					{{ __('Your calendar is set.') }}
 				</div>
 				<Button @click="() => authorizeCalendar.submit()">
diff --git a/frontend/src/pages/ProfileRoles.vue b/frontend/src/pages/ProfileRoles.vue
index 6c923c02..fff56e71 100644
--- a/frontend/src/pages/ProfileRoles.vue
+++ b/frontend/src/pages/ProfileRoles.vue
@@ -5,7 +5,7 @@
 		</h2>
 		<div
 			v-if="readOnlyMode"
-			class="flex items-center space-x-2 text-sm text-ink-gray-7 bg-surface-gray-1 px-3 py-2 rounded-md w-full text-center"
+			class="flex items-center gap-x-2 text-sm text-ink-gray-7 bg-surface-gray-1 px-3 py-2 rounded-md w-full text-center"
 		>
 			<CircleAlert class="size-4 stroke-1.5" />
 			<span>
diff --git a/frontend/src/pages/ProgrammingExercises/ProgrammingExerciseForm.vue b/frontend/src/pages/ProgrammingExercises/ProgrammingExerciseForm.vue
index 89036fe7..c7d41e3e 100644
--- a/frontend/src/pages/ProgrammingExercises/ProgrammingExerciseForm.vue
+++ b/frontend/src/pages/ProgrammingExercises/ProgrammingExerciseForm.vue
@@ -1,7 +1,7 @@
 <template>
 	<Dialog v-model="show" :options="{ size: '4xl' }">
 		<template #body-title>
-			<div class="flex items-center space-x-2">
+			<div class="flex items-center gap-x-2">
 				<div class="text-xl font-semibold text-ink-gray-9">
 					{{
 						props.exerciseID === 'new'
@@ -58,7 +58,7 @@
 			</div>
 		</template>
 		<template #actions="{ close }">
-			<div class="flex justify-end space-x-2 group">
+			<div class="flex justify-end gap-x-2 group">
 				<Button
 					v-if="exerciseID != 'new'"
 					@click="deleteExercise(close)"
diff --git a/frontend/src/pages/ProgrammingExercises/ProgrammingExerciseSubmission.vue b/frontend/src/pages/ProgrammingExercises/ProgrammingExerciseSubmission.vue
index 03951d1e..1e391393 100644
--- a/frontend/src/pages/ProgrammingExercises/ProgrammingExerciseSubmission.vue
+++ b/frontend/src/pages/ProgrammingExercises/ProgrammingExerciseSubmission.vue
@@ -20,7 +20,7 @@
 		</Button>
 	</div>
 	<div class="grid grid-cols-2 h-[calc(100vh_-_3rem)]">
-		<div class="border-r py-5 px-8 h-full">
+		<div class="border-e py-5 px-8 h-full">
 			<div class="font-semibold mb-2 text-ink-gray-9">
 				{{ __('Problem Statement') }}
 			</div>
@@ -34,7 +34,7 @@
 				<div class="font-semibold text-ink-gray-9">
 					{{ exercise.doc?.language }}
 				</div>
-				<div class="space-x-2">
+				<div class="flex items-center gap-x-2">
 					<Badge
 						v-if="submission.doc?.status"
 						:theme="submission.doc.status == 'Passed' ? 'green' : 'red'"
@@ -96,7 +96,7 @@
 								{{ __('Test {0}').format(index + 1) }} -
 							</span>
 							<span
-								class="font-semibold ml-2 mr-1"
+								class="font-semibold ms-2 me-1"
 								:class="
 									testCase.status === 'Passed'
 										? 'text-ink-green-3'
diff --git a/frontend/src/pages/ProgrammingExercises/ProgrammingExerciseSubmissions.vue b/frontend/src/pages/ProgrammingExercises/ProgrammingExerciseSubmissions.vue
index 7fe61785..8001811e 100644
--- a/frontend/src/pages/ProgrammingExercises/ProgrammingExerciseSubmissions.vue
+++ b/frontend/src/pages/ProgrammingExercises/ProgrammingExerciseSubmissions.vue
@@ -5,7 +5,7 @@
 		<Breadcrumbs :items="breadcrumbs" />
 	</header>
 	<div class="p-6">
-		<div class="flex items-center justify-between space-x-32 mb-5">
+		<div class="flex items-center justify-between gap-x-32 mb-5">
 			<div class="text-lg font-semibold text-ink-gray-9">
 				{{
 					submissions.data?.length
@@ -54,7 +54,7 @@
 			}"
 		>
 			<ListHeader
-				class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
+				class="mb-2 grid items-center gap-x-4 rounded bg-surface-gray-2 p-2"
 			>
 				<ListHeaderItem
 					:item="item"
diff --git a/frontend/src/pages/ProgrammingExercises/ProgrammingExercises.vue b/frontend/src/pages/ProgrammingExercises/ProgrammingExercises.vue
index a6090dc9..748f4333 100644
--- a/frontend/src/pages/ProgrammingExercises/ProgrammingExercises.vue
+++ b/frontend/src/pages/ProgrammingExercises/ProgrammingExercises.vue
@@ -3,7 +3,7 @@
 		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" />
-		<div class="space-x-2">
+		<div class="flex gap-2">
 			<router-link
 				v-if="exercises.data?.length"
 				:to="{
diff --git a/frontend/src/pages/Programs/ProgramDetail.vue b/frontend/src/pages/Programs/ProgramDetail.vue
index 281f02f3..c39a644c 100644
--- a/frontend/src/pages/Programs/ProgramDetail.vue
+++ b/frontend/src/pages/Programs/ProgramDetail.vue
@@ -5,7 +5,7 @@
 		<Breadcrumbs :items="breadcrumbs" />
 	</header>
 	<div v-if="program.data" class="pt-5 px-5 pb-10 mx-auto">
-		<div class="flex items-center space-x-2 mb-5">
+		<div class="flex items-center gap-x-2 mb-5">
 			<div class="text-lg font-semibold text-ink-gray-9">
 				{{ program.data.name }}
 			</div>
diff --git a/frontend/src/pages/Programs/ProgramEnrollment.vue b/frontend/src/pages/Programs/ProgramEnrollment.vue
index 0e6beceb..050e51fc 100644
--- a/frontend/src/pages/Programs/ProgramEnrollment.vue
+++ b/frontend/src/pages/Programs/ProgramEnrollment.vue
@@ -57,24 +57,24 @@
                             </div> -->
 
 							<div
-								class="flex items-center space-x-5 text-sm text-ink-gray-5 mb-8"
+								class="flex items-center gap-x-5 text-sm text-ink-gray-5 mb-8"
 							>
 								<Tooltip :text="__('Lessons')">
-									<span class="flex items-center space-x-1">
+									<span class="flex items-center gap-x-1">
 										<BookOpen class="size-3 stroke-1.5" />
 										<span> {{ course.lessons }} {{ __('lessons') }} </span>
 									</span>
 								</Tooltip>
 
 								<Tooltip :text="__('Enrolled Students')">
-									<span class="flex items-center space-x-1">
+									<span class="flex items-center gap-x-1">
 										<User class="size-3 stroke-1.5" />
 										<span> {{ course.enrollments }} {{ __('students') }} </span>
 									</span>
 								</Tooltip>
 
 								<!-- <Tooltip v-if="course.rating" :text="__('Average Rating')">
-                                    <span class="flex items-center space-x-1">
+                                    <span class="flex items-center gap-x-1">
                                         <Star class="size-3 stroke-1.5" />
                                         <span>
                                             {{ course.rating }} {{ __("rating") }}
@@ -83,7 +83,7 @@
                                 </Tooltip> -->
 							</div>
 
-							<div class="flex items-center space-x-1 mt-auto">
+							<div class="flex items-center gap-x-1 mt-auto">
 								<UserAvatar :user="course.instructors[0]" />
 								<span class="text-ink-gray-9">
 									{{ course.instructors[0].full_name }}
@@ -95,7 +95,7 @@
 			</div>
 		</template>
 		<template #actions="{ close }">
-			<div class="flex justify-end space-x-2 group">
+			<div class="flex justify-end gap-x-2 group">
 				<Button variant="solid" @click="enrollInProgram(close)">
 					{{ __('Confirm Enrollment') }}
 				</Button>
diff --git a/frontend/src/pages/Programs/ProgramForm.vue b/frontend/src/pages/Programs/ProgramForm.vue
index df09678e..5b080921 100644
--- a/frontend/src/pages/Programs/ProgramForm.vue
+++ b/frontend/src/pages/Programs/ProgramForm.vue
@@ -6,7 +6,7 @@
 		}"
 	>
 		<template #body-title>
-			<div class="flex items-center justify-between space-x-2 text-base w-full">
+			<div class="flex items-center justify-between gap-x-2 text-base w-full">
 				<div class="text-xl font-semibold text-ink-gray-9">
 					{{
 						programName === 'new' ? __('Create Program') : __('Edit Program')
@@ -69,7 +69,7 @@
 						:rowKey="programName === 'new' ? 'course' : 'name'"
 					>
 						<ListHeader
-							class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
+							class="mb-2 grid items-center gap-x-4 rounded bg-surface-gray-2 p-2"
 						>
 							<ListHeaderItem :item="item" v-for="item in courseColumns" />
 						</ListHeader>
@@ -110,7 +110,7 @@
 							{{ __('Members') }}
 						</div>
 
-						<div class="space-x-2">
+						<div class="flex gap-x-2">
 							<Button
 								v-if="programMembers.data.length > 0"
 								@click="
@@ -143,7 +143,7 @@
 						:rowKey="programName === 'new' ? 'member' : 'name'"
 					>
 						<ListHeader
-							class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
+							class="mb-2 grid items-center gap-x-4 rounded bg-surface-gray-2 p-2"
 						>
 							<ListHeaderItem :item="item" v-for="item in memberColumns" />
 						</ListHeader>
@@ -217,7 +217,7 @@
 			/>
 		</template>
 		<template #actions="{ close }">
-			<div class="flex justify-end space-x-2">
+			<div class="flex justify-end gap-x-2">
 				<Button
 					v-if="programName != 'new'"
 					@click="deleteProgram(close)"
diff --git a/frontend/src/pages/Programs/ProgramProgressSummary.vue b/frontend/src/pages/Programs/ProgramProgressSummary.vue
index b9606bcc..1b968e32 100644
--- a/frontend/src/pages/Programs/ProgramProgressSummary.vue
+++ b/frontend/src/pages/Programs/ProgramProgressSummary.vue
@@ -8,7 +8,7 @@
 	>
 		<template #body-content>
 			<div class="text-base">
-				<div class="flex items-center justify-between space-x-4 mb-4">
+				<div class="flex items-center justify-between gap-x-4 mb-4">
 					<NumberChart
 						class="border rounded-md w-full"
 						:config="{
diff --git a/frontend/src/pages/Programs/Programs.vue b/frontend/src/pages/Programs/Programs.vue
index c7b3095e..975347fc 100644
--- a/frontend/src/pages/Programs/Programs.vue
+++ b/frontend/src/pages/Programs/Programs.vue
@@ -28,15 +28,15 @@
 				<div class="text-lg font-semibold text-ink-gray-9">
 					{{ program.name }}
 				</div>
-				<div class="flex items-center space-x-1 text-ink-gray-7">
-					<BookOpen class="h-4 w-4 stroke-1.5 mr-1" />
+				<div class="flex items-center gap-x-2 text-ink-gray-7">
+					<BookOpen class="h-4 w-4 stroke-1.5" />
 					<span>
 						{{ program.course_count }}
 						{{ program.course_count == 1 ? __('Course') : __('Courses') }}
 					</span>
 				</div>
-				<div class="flex items-center space-x-1 text-ink-gray-7">
-					<User class="h-4 w-4 stroke-1.5 mr-1" />
+				<div class="flex items-center gap-x-2 text-ink-gray-7">
+					<User class="h-4 w-4 stroke-1.5" />
 					<span>
 						{{ program.member_count || 0 }}
 						{{ program.member_count == 1 ? __('member') : __('members') }}
diff --git a/frontend/src/pages/Programs/StudentPrograms.vue b/frontend/src/pages/Programs/StudentPrograms.vue
index dfdfaae8..e1b7dd99 100644
--- a/frontend/src/pages/Programs/StudentPrograms.vue
+++ b/frontend/src/pages/Programs/StudentPrograms.vue
@@ -21,15 +21,15 @@
 							{{ program.name }}
 						</div>
 
-						<div class="flex items-center space-x-5 text-sm text-ink-gray-7">
-							<div class="flex items-center space-x-1">
+						<div class="flex items-center gap-x-5 text-sm text-ink-gray-7">
+							<div class="flex items-center gap-x-1">
 								<BookOpen class="size-3 stroke-1.5" />
 								<span>
 									{{ program.course_count }}
 									{{ program.course_count == 1 ? __('course') : __('courses') }}
 								</span>
 							</div>
-							<div class="flex items-center space-x-1">
+							<div class="flex items-center gap-x-1">
 								<User class="size-4 stroke-1.5" />
 								<span>
 									{{ program.member_count || 0 }}
diff --git a/frontend/src/pages/QuizForm.vue b/frontend/src/pages/QuizForm.vue
index 52833eff..09f30f77 100644
--- a/frontend/src/pages/QuizForm.vue
+++ b/frontend/src/pages/QuizForm.vue
@@ -3,7 +3,7 @@
 		class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
 	>
 		<Breadcrumbs :items="breadcrumbs" />
-		<div v-if="!readOnlyMode" class="flex items-center space-x-2">
+		<div v-if="!readOnlyMode" class="flex items-center gap-x-2">
 			<Badge v-if="quizDetails.isDirty" theme="orange">
 				{{ __('Not Saved') }}
 			</Badge>
@@ -155,7 +155,7 @@
 				}"
 			>
 				<ListHeader
-					class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
+					class="mb-2 grid items-center gap-x-4 rounded bg-surface-gray-2 p-2"
 				>
 					<ListHeaderItem :item="item" v-for="item in questionColumns" />
 				</ListHeader>
diff --git a/frontend/src/pages/QuizSubmission.vue b/frontend/src/pages/QuizSubmission.vue
index e217648a..27faa92e 100644
--- a/frontend/src/pages/QuizSubmission.vue
+++ b/frontend/src/pages/QuizSubmission.vue
@@ -3,7 +3,7 @@
 		class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
 	>
 		<Breadcrumbs v-if="submissionDetails.doc" :items="breadcrumbs" />
-		<div class="space-x-2">
+		<div class="flex gap-2 items-center">
 			<Badge
 				v-if="submissionDetails.isDirty"
 				:label="__('Not Saved')"
diff --git a/frontend/src/pages/QuizSubmissionList.vue b/frontend/src/pages/QuizSubmissionList.vue
index edfe9858..bf798551 100644
--- a/frontend/src/pages/QuizSubmissionList.vue
+++ b/frontend/src/pages/QuizSubmissionList.vue
@@ -15,7 +15,7 @@
 			:options="{ showTooltip: false, selectable: false }"
 		>
 			<ListHeader
-				class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
+				class="mb-2 grid items-center gap-x-4 rounded bg-surface-gray-2 p-2"
 			>
 				<ListHeaderItem :item="item" v-for="item in quizColumns">
 				</ListHeaderItem>
diff --git a/frontend/src/pages/Quizzes.vue b/frontend/src/pages/Quizzes.vue
index 899bd9fa..6d2953f5 100644
--- a/frontend/src/pages/Quizzes.vue
+++ b/frontend/src/pages/Quizzes.vue
@@ -86,11 +86,11 @@
 			</ListSelectBanner>
 		</ListView>
 		<EmptyState v-else type="Quizzes" />
-		<div class="flex items-center justify-end space-x-3 mt-3">
+		<div class="flex items-center justify-end gap-x-3 mt-3">
 			<Button v-if="quizzes.hasNextPage" @click="quizzes.next()">
 				{{ __('Load More') }}
 			</Button>
-			<div v-if="quizzes.hasNextPage" class="h-8 border-l"></div>
+			<div v-if="quizzes.hasNextPage" class="h-8 border-s"></div>
 			<div class="text-ink-gray-5">
 				{{ quizzes.data?.length }} {{ __('of') }} {{ totalQuizzes.data }}
 			</div>
diff --git a/frontend/src/pages/Search/Search.vue b/frontend/src/pages/Search/Search.vue
index d14760d4..14bd0606 100644
--- a/frontend/src/pages/Search/Search.vue
+++ b/frontend/src/pages/Search/Search.vue
@@ -56,7 +56,7 @@
 					class="rounded-md cursor-pointer hover:bg-surface-gray-2 px-2"
 				>
 					<div
-						class="flex space-x-2 py-3"
+						class="flex gap-x-2 py-3"
 						:class="{
 							'border-b': index !== searchResults.length - 1,
 						}"
@@ -74,7 +74,7 @@
 									class="font-medium text-ink-gray-9"
 									v-html="result.title"
 								></div>
-								<div class="text-sm text-ink-gray-5 ml-2">
+								<div class="text-sm text-ink-gray-5 ms-2">
 									{{ getDocTypeTitle(result.doctype) }}
 								</div>
 								<div
@@ -84,7 +84,7 @@
 										result.creation ||
 										result.modified
 									"
-									class="ml-auto text-sm text-ink-gray-5"
+									class="ms-auto text-sm text-ink-gray-5"
 								>
 									{{
 										dayjs(