Merge pull request #2310 from raizasafeel/feat/rtl

feat: rtl support
2026-04-19 22:52:29 +03:00 · 2026-04-14 13:00:51 +03:00
parent 88e86e6cfb aed4c6915d
commit 0838a9d325
125 changed files with 440 additions and 412 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="{{ boot.lang }}" dir="{{ boot.text_direction }}">
 	<head>
 		<meta charset="UTF-8" />
 		<link rel="icon" href="{{ favicon }}" />
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -31,7 +31,7 @@
    "dayjs": "1.11.10",
    "dompurify": "3.2.6",
    "feather-icons": "4.28.0",
-    "frappe-ui": "^0.1.264",
+    "frappe-ui": "^0.1.276",
    "highlight.js": "11.11.1",
    "lucide-vue-next": "0.383.0",
    "markdown-it": "14.0.0",
@@ -49,7 +49,7 @@
    "vuedraggable": "4.1.0"
  },
  "devDependencies": {
-     "@vitejs/plugin-vue": "5.0.3",
+    "@vitejs/plugin-vue": "5.0.3",
    "autoprefixer": "10.4.2",
    "postcss": "8.4.5",
    "tailwindcss": "^3.4.15",
--- a/frontend/src/components/Assignment.vue
+++ b/frontend/src/components/Assignment.vue
@@ -5,7 +5,7 @@
 		:class="{ 'border rounded-lg overflow-auto': !showTitle }"
 	>
 		<div
-			class="border-r p-5 overflow-y-auto h-[calc(100vh-3.2rem)]"
+			class="border-e p-5 overflow-y-auto h-[calc(100vh-3.2rem)]"
 			:class="{ 'h-full': !showTitle }"
 		>
 			<div v-if="showTitle" class="text-lg font-semibold mb-5 text-ink-gray-9">
@@ -31,7 +31,7 @@
 					<div class="font-semibold text-ink-gray-9">
 						{{ __('Submission') }}
 					</div>
-					<div class="flex items-center space-x-2">
+					<div class="flex items-center gap-x-2">
 						<Badge v-if="isDirty" theme="orange">
 							{{ __('Not Saved') }}
 						</Badge>
@@ -106,7 +106,7 @@
 								class="cursor-pointer !no-underline text-sm leading-5"
 							>
 								<div class="flex items-center">
-									<div class="border rounded-md p-2 mr-2">
+									<div class="border rounded-md p-2 me-2">
 										<FileText class="h-5 w-5 stroke-1.5" />
 									</div>
 									<span>
@@ -117,7 +117,7 @@
 							<X
 								v-if="canModifyAssignment"
 								@click="removeSubmission()"
-								class="bg-surface-gray-3 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
+								class="bg-surface-gray-3 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ms-4"
 							/>
 						</div>
 					</div>
--- a/frontend/src/components/AudioBlock.vue
+++ b/frontend/src/components/AudioBlock.vue
@@ -6,7 +6,7 @@
 		<audio @ended="handleAudioEnd" controlsList="nodownload" class="mb-4">
 			<source :src="encodeURI(file)" type="audio/mp3" />
 		</audio>
-		<div class="flex items-center space-x-2 shadow rounded-lg p-1 w-1/2">
+		<div class="flex items-center gap-x-2 shadow rounded-lg p-1 w-1/2">
 			<Button variant="ghost" @click="togglePlay">
 				<template #icon>
 					<Play v-if="!isPlaying" class="w-4 h-4 text-ink-gray-9" />
--- a/frontend/src/components/CommandPalette/CommandPalette.vue
+++ b/frontend/src/components/CommandPalette/CommandPalette.vue
@@ -2,13 +2,13 @@
 	<Dialog v-model="show" :options="{ size: '2xl' }">
 		<template #body>
 			<div class="text-base">
-				<div class="flex items-center space-x-2 pl-4.5 border-b">
+				<div class="flex items-center gap-x-2 ps-4.5 border-b">
 					<Search class="size-4 text-ink-gray-4" />
 					<input
 						ref="inputRef"
 						type="text"
 						placeholder="Search"
-						class="w-full border-none bg-transparent py-3 !pl-2 pr-4.5 text-base text-ink-gray-7 placeholder-ink-gray-4 focus:ring-0"
+						class="w-full border-none bg-transparent py-3 !ps-2 pe-4.5 text-base text-ink-gray-7 placeholder-ink-gray-4 focus:ring-0"
 						@input="onInput"
 						v-model="query"
 						autocomplete="off"
@@ -32,9 +32,9 @@
 				</div>

 				<div
-					class="flex items-center space-x-5 w-full border-t py-2 text-sm text-ink-gray-7 px-4.5"
+					class="flex items-center gap-x-5 w-full border-t py-2 text-sm text-ink-gray-7 px-4.5"
 				>
-					<div class="flex items-center space-x-2">
+					<div class="flex items-center gap-x-2">
 						<MoveUp
 							class="size-5 stroke-1.5 bg-surface-gray-2 p-1 rounded-sm"
 						/>
@@ -45,7 +45,7 @@
 							{{ __('to navigate') }}
 						</span>
 					</div>
-					<div class="flex items-center space-x-2">
+					<div class="flex items-center gap-x-2">
 						<CornerDownLeft
 							class="size-5 stroke-1.5 bg-surface-gray-2 p-1 rounded-sm"
 						/>
@@ -53,7 +53,7 @@
 							{{ __('to select') }}
 						</span>
 					</div>
-					<div class="flex items-center space-x-2">
+					<div class="flex items-center gap-x-2">
 						<span class="bg-surface-gray-2 p-1 rounded-sm"> esc </span>
 						<span>
 							{{ __('to close') }}
--- a/frontend/src/components/CommandPalette/CommandPaletteGroup.vue
+++ b/frontend/src/components/CommandPalette/CommandPaletteGroup.vue
@@ -10,7 +10,7 @@
 				:class="{ 'bg-surface-gray-2': item.isActive }"
 				@click="emit('navigateTo', item.route)"
 			>
-				<div class="flex items-center space-x-3">
+				<div class="flex items-center gap-x-3">
 					<component
 						v-if="item.icon"
 						:is="item.icon"
--- a/frontend/src/components/Common/DateRange.vue
+++ b/frontend/src/components/Common/DateRange.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="flex items-center text-ink-gray-7">
-		<Calendar class="h-4 w-4 stroke-1.5 mr-2" />
+		<Calendar class="h-4 w-4 stroke-1.5 me-2" />
 		<span>
 			{{ getFormattedDateRange(props.startDate, props.endDate) }}
 		</span>
--- a/frontend/src/components/ContactUsEmail.vue
+++ b/frontend/src/components/ContactUsEmail.vue
@@ -28,7 +28,7 @@
 			</div>
 		</template>
 		<template #actions="{ close }">
-			<div class="pb-5 float-right">
+			<div class="pb-5 float-end">
 				<Button variant="solid" @click="sendMail(close)">
 					{{ __('Send') }}
 				</Button>
--- a/frontend/src/components/Controls/Autocomplete.vue
+++ b/frontend/src/components/Controls/Autocomplete.vue
@@ -65,7 +65,7 @@
 									placeholder="Search"
 								/>
 								<button
-									class="absolute right-1.5 inline-flex h-7 w-7 items-center justify-center"
+									class="absolute end-1.5 inline-flex h-7 w-7 items-center justify-center"
 									@click="selectedValue = null"
 								>
 									<X class="h-4 w-4 stroke-1.5 text-ink-gray-7" />
--- a/frontend/src/components/Controls/ChildTable.vue
+++ b/frontend/src/components/Controls/ChildTable.vue
@@ -6,7 +6,7 @@
 		<div class="overflow-visible border border-outline-gray-modals rounded-md">
 			<div class="overflow-x-auto">
 				<div
-					class="grid items-center space-x-4 p-2 border-b border-outline-gray-modals"
+					class="grid items-center gap-x-4 p-2 border-b border-outline-gray-modals"
 					:style="{ gridTemplateColumns: getGridTemplateColumns() }"
 				>
 					<div
@@ -21,7 +21,7 @@
 				<div
 					v-for="(row, rowIndex) in rows"
 					:key="rowIndex"
-					class="grid items-center space-x-4 p-2"
+					class="grid items-center gap-x-4 p-2"
 					:style="{ gridTemplateColumns: getGridTemplateColumns() }"
 				>
 					<template v-for="key in Object.keys(row)" :key="key">
@@ -47,7 +47,7 @@
 						<div
 							v-if="menuOpenIndex === rowIndex"
 							ref="menuRef"
-							class="absolute right-0 w-32 z-50 bg-surface-modal border border-outline-gray-modals rounded-md shadow-sm"
+							class="absolute end-0 w-32 z-50 bg-surface-modal border border-outline-gray-modals rounded-md shadow-sm"
 							:class="
 								rowIndex == (rows?.length ?? 0) - 1
 									? 'bottom-full mb-1'
@@ -56,7 +56,7 @@
 						>
 							<button
 								@click="deleteRow(rowIndex)"
-								class="flex items-center space-x-2 w-full text-left px-3 py-2 text-sm text-ink-red-3"
+								class="flex items-center gap-x-2 w-full text-start px-3 py-2 text-sm text-ink-red-3"
 							>
 								<Trash2 class="size-4 stroke-1.5" />
 								<span>
--- a/frontend/src/components/Controls/IconPicker.vue
+++ b/frontend/src/components/Controls/IconPicker.vue
@@ -8,7 +8,7 @@
 				<template #target="{ togglePopover }">
 					<button
 						@click="openPopover(togglePopover)"
-						class="flex w-full items-center space-x-2 focus:outline-none bg-surface-gray-2 rounded h-7 py-1.5 px-2 hover:bg-surface-gray-3 focus:bg-surface-white border border-gray-100 hover:border-outline-gray-modals focus:border-outline-gray-4"
+						class="flex w-full items-center gap-x-2 focus:outline-none bg-surface-gray-2 rounded h-7 py-1.5 px-2 hover:bg-surface-gray-3 focus:bg-surface-white border border-gray-100 hover:border-outline-gray-modals focus:border-outline-gray-4"
 					>
 						<component
 							v-if="selectedIcon"
--- a/frontend/src/components/Controls/MultiSelect.vue
+++ b/frontend/src/components/Controls/MultiSelect.vue
@@ -14,7 +14,7 @@
 						v-for="value in values"
 						:key="value"
 						type="button"
-						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="removeValue(value)"
 					>
 						<span>{{ value }}</span>
--- a/frontend/src/components/Controls/Rating.vue
+++ b/frontend/src/components/Controls/Rating.vue
@@ -10,7 +10,7 @@
 				@mouseleave="hoveredRating = 0"
 			>
 				<Star
-					class="fill-gray-400 text-gray-50 stroke-1 mr-1 cursor-pointer"
+					class="fill-gray-400 text-gray-50 stroke-1 me-1 cursor-pointer"
 					:class="iconClasses(index)"
 					@click="markRating(index)"
 				/>
--- a/frontend/src/components/Controls/Uploader.vue
+++ b/frontend/src/components/Controls/Uploader.vue
@@ -19,7 +19,7 @@
 							class="size-5 stroke-1 text-ink-gray-7"
 						/>
 					</div>
-					<div class="ml-4">
+					<div class="ms-4">
 						<Button @click="openFileSelector" :loading="uploading">
 							{{ uploading ? `${__('Uploading')} ${progress}%` : __('Upload') }}
 						</Button>
@@ -46,7 +46,7 @@
 					<source :src="modelValue" />
 					{{ __('Your browser does not support the video tag.') }}
 				</video>
-				<div class="ml-4">
+				<div class="ms-4">
 					<Button @click="removeImage()">
 						{{ __('Remove') }}
 					</Button>
--- a/frontend/src/components/CourseCard.vue
+++ b/frontend/src/components/CourseCard.vue
@@ -18,7 +18,7 @@
 			<!-- <div class="flex items-center flex-wrap relative top-4 px-2 w-fit">
 				<div
 					v-if="course.featured"
-					class="flex items-center space-x-1 text-xs text-ink-amber-3 bg-surface-white border border-outline-amber-1 px-2 py-0.5 rounded-md mr-1 mb-1"
+					class="flex items-center gap-x-1 text-xs text-ink-amber-3 bg-surface-white border border-outline-amber-1 px-2 py-0.5 rounded-md me-1 mb-1"
 				>
 					<Star class="size-3 stroke-2" />
 					<span>
@@ -28,7 +28,7 @@
 				<div
 					v-if="course.tags"
 					v-for="tag in course.tags?.split(', ')"
-					class="text-xs border bg-surface-white text-ink-gray-9 px-2 py-0.5 rounded-md mb-1 mr-1"
+					class="text-xs border bg-surface-white text-ink-gray-9 px-2 py-0.5 rounded-md mb-1 me-1"
 				>
 					{{ tag }}
 				</div>
@@ -52,7 +52,7 @@
 				<div v-if="course.lessons">
 					<Tooltip :text="__('Lessons')">
 						<span class="flex items-center">
-							<BookOpen class="h-4 w-4 stroke-1.5 mr-1" />
+							<BookOpen class="h-4 w-4 stroke-1.5 me-1" />
 							{{ course.lessons }}
 						</span>
 					</Tooltip>
@@ -61,7 +61,7 @@
 				<div v-if="course.enrollments">
 					<Tooltip :text="__('Enrolled Students')">
 						<span class="flex items-center">
-							<Users class="h-4 w-4 stroke-1.5 mr-1" />
+							<Users class="h-4 w-4 stroke-1.5 me-1" />
 							{{ formatAmount(course.enrollments) }}
 						</span>
 					</Tooltip>
@@ -70,7 +70,7 @@
 				<div v-if="course.rating">
 					<Tooltip :text="__('Average Rating')">
 						<span class="flex items-center">
-							<Star class="h-4 w-4 stroke-1.5 mr-1" />
+							<Star class="h-4 w-4 stroke-1.5 me-1" />
 							{{ course.rating }}
 						</span>
 					</Tooltip>
@@ -105,7 +105,7 @@
 			<div class="flex items-center justify-between mt-auto">
 				<div class="flex avatar-group overlap">
 					<div
-						class="h-6 mr-1"
+						class="h-6 me-1"
 						:class="{ 'avatar-group overlap': course.instructors.length > 1 }"
 					>
 						<UserAvatar
@@ -116,7 +116,7 @@
 					<CourseInstructors :instructors="course.instructors" />
 				</div>

-				<div class="flex items-center space-x-2">
+				<div class="flex items-center gap-x-2">
 					<div v-if="course.paid_course" class="font-semibold">
 						{{ course.price }}
 					</div>
@@ -184,7 +184,7 @@ const gradientColor = computed(() => {
 }

 .avatar-group.overlap .avatar + .avatar {
-	margin-left: calc(-8px);
+	margin-inline-start: calc(-8px);
 }

 .short-introduction {
--- a/frontend/src/components/CourseCardOverlay.vue
+++ b/frontend/src/components/CourseCardOverlay.vue
@@ -96,14 +96,14 @@
 				</div>
 				<div class="flex items-center text-ink-gray-9">
 					<BookOpen class="h-4 w-4 stroke-1.5" />
-					<span class="ml-2">
+					<span class="ms-2">
 						{{ course.data.lessons }}
 						{{ course.data.lessons > 1 ? __('lessons') : __('lesson') }}
 					</span>
 				</div>
 				<div class="flex items-center text-ink-gray-9">
 					<Users class="h-4 w-4 stroke-1.5" />
-					<span class="ml-2">
+					<span class="ms-2">
 						{{ formatAmount(course.data.enrollments) }}
 						{{
 							course.data.enrollments > 1
@@ -117,7 +117,7 @@
 					class="flex items-center text-ink-gray-9"
 				>
 					<Star class="size-4 stroke-1.5 fill-yellow-500 text-transparent" />
-					<span class="ml-2">
+					<span class="ms-2">
 						{{ course.data.rating }} {{ __('average rating') }}
 					</span>
 				</div>
@@ -126,7 +126,7 @@
 					class="flex items-center font-semibold text-ink-gray-9"
 				>
 					<GraduationCap class="h-4 w-4 stroke-2" />
-					<span class="ml-2">
+					<span class="ms-2">
 						{{ __('Certificate of Completion') }}
 					</span>
 				</div>
@@ -135,7 +135,7 @@
 					class="flex items-center font-semibold text-ink-gray-9"
 				>
 					<GraduationCap class="h-4 w-4 stroke-2" />
-					<span class="ml-2">
+					<span class="ms-2">
 						{{ __('Paid Certificate after Evaluation') }}
 					</span>
 				</div>
--- a/frontend/src/components/CourseOutline.vue
+++ b/frontend/src/components/CourseOutline.vue
@@ -2,7 +2,7 @@
 	<div class="">
 		<div
 			v-if="title && (outline.data?.length || allowEdit)"
-			class="flex items-center justify-between space-x-2 mb-4 px-2"
+			class="flex items-center justify-between gap-x-2 mb-4 px-2"
 			:class="{
 				'sticky top-0 z-10 bg-surface-white border-b px-3 py-2.5 sm:px-5':
 					allowEdit,
@@ -46,20 +46,20 @@
 							>
 								<ChevronRight
 									:class="{
-										'rotate-90 transform duration-200': open,
-										'duration-200': !open,
+										'rotate-90': open,
+										'rtl:rotate-180': !open,
 										hidden: chapter.is_scorm_package,
 										open: index == 1,
 									}"
-									class="h-4 w-4 text-ink-gray-9 stroke-1"
+									class="h-4 w-4 text-ink-gray-9 stroke-1 transform duration-200"
 								/>
 								<div
-									class="text-base text-left text-ink-gray-9 font-medium leading-5 ml-2"
+									class="text-base text-start text-ink-gray-9 font-medium leading-5 ms-2"
 									@click="redirectToChapter(chapter)"
 								>
 									{{ chapter.title }}
 								</div>
-								<div class="flex ml-auto space-x-4">
+								<div class="flex ms-auto gap-x-4">
 									<Tooltip :text="__('Edit Chapter')" placement="bottom">
 										<FilePenLine
 											v-if="allowEdit"
@@ -94,7 +94,7 @@
 								>
 									<template #item="{ element: lesson }">
 										<div
-											class="outline-lesson pl-8 py-2 pr-4 text-ink-gray-9"
+											class="outline-lesson ps-8 py-2 pe-4 text-ink-gray-9"
 											:class="
 												isActiveLesson(lesson.number) ? 'bg-surface-gray-3' : ''
 											"
@@ -112,23 +112,23 @@
 												<div class="flex items-center text-sm leading-5 group">
 													<MonitorPlay
 														v-if="lesson.icon === 'icon-youtube'"
-														class="h-4 w-4 stroke-1 mr-2"
+														class="h-4 w-4 stroke-1 me-2"
 													/>
 													<HelpCircle
 														v-else-if="lesson.icon === 'icon-quiz'"
-														class="h-4 w-4 stroke-1 mr-2"
+														class="h-4 w-4 stroke-1 me-2"
 													/>
 													<NotebookPen
 														v-else-if="lesson.icon === 'icon-assignment'"
-														class="h-4 w-4 stroke-1 mr-2"
+														class="h-4 w-4 stroke-1 me-2"
 													/>
 													<SquareCode
 														v-else-if="lesson.icon === 'icon-code'"
-														class="h-4 w-4 stroke-1 mr-2"
+														class="h-4 w-4 stroke-1 me-2"
 													/>
 													<FileText
 														v-else-if="lesson.icon === 'icon-list'"
-														class="h-4 w-4 text-ink-gray-9 stroke-1 mr-2"
+														class="h-4 w-4 text-ink-gray-9 stroke-1 me-2"
 													/>
 													{{ lesson.title }}
 													<Trash2
@@ -136,18 +136,18 @@
 														@click.prevent="
 															trashLesson(lesson.name, chapter.name)
 														"
-														class="h-4 w-4 text-ink-red-3 ml-auto invisible group-hover:visible"
+														class="h-4 w-4 text-ink-red-3 ms-auto invisible group-hover:visible"
 													/>
 													<Check
 														v-if="lesson.is_complete"
-														class="h-4 w-4 text-green-700 ml-2"
+														class="h-4 w-4 text-green-700 ms-2"
 													/>
 												</div>
 											</router-link>
 										</div>
 									</template>
 								</Draggable>
-								<div v-if="allowEdit" class="flex mt-2 mb-4 pl-8">
+								<div v-if="allowEdit" class="flex mt-2 mb-4 ps-8">
 									<router-link
 										v-if="!chapter.is_scorm_package"
 										:to="{
--- a/frontend/src/components/CourseReviews.vue
+++ b/frontend/src/components/CourseReviews.vue
@@ -3,7 +3,7 @@
 		<Button
 			v-if="membership && !hasReviewed.data"
 			@click="openReviewModal()"
-			class="float-right"
+			class="float-end"
 		>
 			{{ __('Write a Review') }}
 		</Button>
@@ -28,14 +28,14 @@
 								params: { username: review.owner_details.username },
 							}"
 						>
-							<span class="text-lg font-medium mr-4 text-ink-gray-7">
+							<span class="text-lg font-medium me-4 text-ink-gray-7">
 								{{ review.owner_details.full_name }}
 							</span>
 						</router-link>
 						<span class="text-ink-gray-7">
 							{{ review.creation }}
 						</span>
-						<div class="flex mt-2 space-x-1">
+						<div class="flex mt-2 gap-x-1">
 							<Star
 								v-for="index in 5"
 								class="size-4 text-transparent rounded-sm"
--- a/frontend/src/components/DesktopLayout.vue
+++ b/frontend/src/components/DesktopLayout.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="flex h-screen w-screen">
-		<div class="h-full border-r bg-surface-menu-bar">
+		<div class="h-full border-e bg-surface-menu-bar">
 			<AppSidebar />
 		</div>
 		<div class="flex-1 flex flex-col h-full overflow-auto bg-surface-white">
--- a/frontend/src/components/DiscussionReplies.vue
+++ b/frontend/src/components/DiscussionReplies.vue
@@ -6,7 +6,7 @@
 					<ChevronLeft class="w-5 h-5 stroke-1.5 text-ink-gray-7" />
 				</template>
 			</Button>
-			<span class="text-lg font-semibold ml-2 text-ink-gray-9">
+			<span class="text-lg font-semibold ms-2 text-ink-gray-9">
 				{{ topic.title }}
 			</span>
 		</div>
@@ -18,11 +18,11 @@
 			>
 				<div class="flex items-center justify-between mb-2">
 					<div class="flex items-center text-ink-gray-5">
-						<UserAvatar :user="reply.user" class="mr-2" />
+						<UserAvatar :user="reply.user" class="me-2" />
 						<span>
 							{{ reply.user.full_name }}
 						</span>
-						<span class="text-sm ml-2">
+						<span class="text-sm ms-2">
 							{{ timeAgo(reply.creation) }}
 						</span>
 					</div>
--- a/frontend/src/components/Discussions.vue
+++ b/frontend/src/components/Discussions.vue
@@ -2,7 +2,7 @@
 	<div>
 		<Button
 			v-if="!singleThread && !readOnlyMode"
-			class="float-right"
+			class="float-end"
 			@click="openTopicModal()"
 		>
 			<template #prefix>
@@ -21,7 +21,7 @@
 				class="flex items-center cursor-pointer py-5 w-full"
 				:class="{ 'border-b': index + 1 != topics.data.length }"
 			>
-				<UserAvatar :user="topic.user" size="2xl" class="mr-4" />
+				<UserAvatar :user="topic.user" size="2xl" class="me-4" />
 				<div>
 					<div class="text-lg font-semibold mb-1 text-ink-gray-7">
 						{{ topic.title }}
@@ -30,7 +30,7 @@
 						<span>
 							{{ topic.user.full_name }}
 						</span>
-						<span class="text-sm ml-3">
+						<span class="text-sm ms-3">
 							{{ timeAgo(topic.creation) }}
 						</span>
 					</div>
@@ -51,7 +51,7 @@
 		v-else
 		class="flex flex-col items-center justify-center border-2 border-dashed mt-5 py-8 rounded-md"
 	>
-		<MessageSquareText class="w-7 h-7 text-ink-gray-4 stroke-1.5 mr-2" />
+		<MessageSquareText class="w-7 h-7 text-ink-gray-4 stroke-1.5 me-2" />
 		<div class="mt-2">
 			<div v-if="emptyStateTitle" class="font-medium mb-2">
 				{{ __(emptyStateTitle) }}
--- a/frontend/src/components/InstallPrompt.vue
+++ b/frontend/src/components/InstallPrompt.vue
@@ -34,7 +34,7 @@
 					<span class="inline-flex items-baseline">
 						<FeatherIcon
 							name="x"
-							class="ml-auto h-4 w-4 text-gray-700"
+							class="ms-auto h-4 w-4 text-gray-700"
 							@click="iosInstallMessage = false"
 						/>
 					</span>
--- a/frontend/src/components/JobCard.vue
+++ b/frontend/src/components/JobCard.vue
@@ -2,7 +2,7 @@
 	<div
 		class="flex flex-col border rounded-md p-3 h-full hover:border-outline-gray-3"
 	>
-		<div class="flex space-x-4 mb-4">
+		<div class="flex gap-x-4 mb-4">
 			<div class="flex flex-col space-y-2 flex-1 break-all">
 				<div class="text-lg font-semibold text-ink-gray-9">
 					{{ job.company_name }}
@@ -10,7 +10,7 @@
 				<span class="font-medium text-ink-gray-7 leading-5">
 					{{ job.job_title }}
 				</span>
-				<div class="flex items-center space-x-1 text-sm text-ink-gray-7">
+				<div class="flex items-center gap-x-1 text-sm text-ink-gray-7">
 					<MapPin class="size-3" />
 					<span>
 						{{ job.location }}{{ job.country ? `, ${job.country}` : '' }}
@@ -18,7 +18,7 @@
 				</div>
 				<div
 					v-if="job.applicants"
-					class="flex items-center space-x-1 text-sm text-ink-gray-7"
+					class="flex items-center gap-x-1 text-sm text-ink-gray-7"
 				>
 					<User class="size-3" />
 					<span>
@@ -29,7 +29,7 @@
 			</div>
 			<!-- <img :src="job.company_logo" alt="Company Logo" class="size-8  rounded-full object-contain  bg-white" /> -->
 		</div>
-		<div class="space-x-2 mt-auto">
+		<div class="flex gap-x-2 items-center mt-auto">
 			<Badge>
 				{{ job.type }}
 			</Badge>
--- a/frontend/src/components/LessonHelp.vue
+++ b/frontend/src/components/LessonHelp.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="space-y-5 text-ink-gray-9">
 		<div class="space-y-2">
-			<div class="flex items-center text-sm font-medium space-x-2">
+			<div class="flex items-center text-sm font-medium gap-x-2">
 				<span>
 					{{ __('What are Instructor Notes?') }}
 				</span>
@@ -17,7 +17,7 @@

 		<div class="space-y-2" v-for="(item, key) in contentMap" :key="key">
 			<div
-				class="flex items-center text-sm font-medium space-x-2 cursor-pointer"
+				class="flex items-center text-sm font-medium gap-x-2 cursor-pointer"
 				@click="openHelpDialog(key)"
 			>
 				<span>
--- a/frontend/src/components/MobileLayout.vue
+++ b/frontend/src/components/MobileLayout.vue
@@ -7,14 +7,14 @@
 		<div class="relative z-20">
 			<!-- Dropdown menu -->
 			<div
-				class="fixed bottom-16 right-2 w-[80%] rounded-md bg-surface-white text-base p-5 space-y-4 shadow-md"
+				class="fixed bottom-16 end-2 w-[80%] rounded-md bg-surface-white text-base p-5 space-y-4 shadow-md"
 				v-if="showMenu"
 				ref="menu"
 			>
 				<div
 					v-for="link in otherLinks"
 					:key="link.label"
-					class="flex items-center space-x-2 cursor-pointer"
+					class="flex items-center gap-x-2 cursor-pointer"
 					@click="handleClick(link)"
 				>
 					<component
@@ -28,7 +28,7 @@
 			<!-- Fixed menu -->
 			<div
 				v-if="sidebarSettings.data"
-				class="fixed bottom-0 left-0 w-full flex items-center justify-around border-t border-outline-gray-2 bg-surface-white standalone:pb-4 z-10"
+				class="fixed bottom-0 start-0 w-full flex items-center justify-around border-t border-outline-gray-2 bg-surface-white standalone:pb-4 z-10"
 			>
 				<button
 					v-for="tab in sidebarLinks"
--- a/frontend/src/components/Modals/AssignmentForm.vue
+++ b/frontend/src/components/Modals/AssignmentForm.vue
@@ -48,7 +48,7 @@
 					</div>
 				</div>

-				<div class="flex justify-end space-x-2 mt-5">
+				<div class="flex justify-end gap-x-2 mt-5">
 					<router-link
 						:to="{
 							name: 'AssignmentSubmissionList',
--- a/frontend/src/components/Modals/ChapterModal.vue
+++ b/frontend/src/components/Modals/ChapterModal.vue
@@ -51,7 +51,7 @@
 					</FileUploader>
 					<div v-else class="">
 						<div class="flex items-center">
-							<div class="border rounded-md p-2 mr-2">
+							<div class="border rounded-md p-2 me-2">
 								<FileText class="h-5 w-5 stroke-1.5 text-ink-gray-7" />
 							</div>
 							<div class="flex flex-col">
@@ -64,7 +64,7 @@
 							</div>
 							<X
 								@click="() => (chapter.scorm_package = null)"
-								class="bg-surface-gray-3 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
+								class="bg-surface-gray-3 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ms-4"
 							/>
 						</div>
 					</div>
--- a/frontend/src/components/Modals/EditCoverImage.vue
+++ b/frontend/src/components/Modals/EditCoverImage.vue
@@ -5,12 +5,12 @@
 		</template>
 		<template #body>
 			<div
-				class="absolute left-1/2 mt-3 w-96 max-w-lg -translate-x-1/2 transform rounded-lg bg-surface-white px-4 sm:px-0 lg:max-w-3xl"
+				class="absolute start-1/2 mt-3 w-96 max-w-lg -translate-x-1/2 transform rounded-lg bg-surface-white px-4 sm:px-0 lg:max-w-3xl"
 			>
 				<div
 					class="overflow-hidden rounded-lg p-3 shadow-2xl ring-1 ring-black ring-opacity-5"
 				>
-					<div class="flex items-center justify-center space-x-2">
+					<div class="flex items-center justify-center gap-x-2">
 						<TextInput
 							type="text"
 							placeholder="search by keyword"
--- a/frontend/src/components/Modals/EditProfile.vue
+++ b/frontend/src/components/Modals/EditProfile.vue
@@ -10,11 +10,11 @@
 				<div class="text-2xl font-semibold leading-6 text-ink-gray-9">
 					{{ __('Edit Profile') }}
 				</div>
-				<div class="space-x-2">
+				<div class="flex items-center gap-x-2">
 					<Badge v-if="isDirty" theme="orange">
 						{{ __('Not Saved') }}
 					</Badge>
-					<div class="pb-5 float-right">
+					<div class="pb-5 float-end">
 						<Button variant="solid" @click="saveProfile()">
 							{{ __('Save') }}
 						</Button>
--- a/frontend/src/components/Modals/EvaluationModal.vue
+++ b/frontend/src/components/Modals/EvaluationModal.vue
@@ -27,7 +27,7 @@
 					</div>
 					<div class="space-y-5">
 						<div v-for="row in slots.data" class="space-y-2">
-							<div class="flex items-center text-ink-gray-7 space-x-2">
+							<div class="flex items-center text-ink-gray-7 gap-x-2">
 								<Calendar class="size-3" />
 								<div class="text-ink-gray-9">
 									{{ dayjs(row.date).format('DD MMMM YYYY') }}
@@ -66,18 +66,12 @@
 	</Dialog>
 </template>
 <script setup>
-import {
-	call,
-	createResource,
-	dayjs,
-	Dialog,
-	FormControl,
-	toast,
-} from 'frappe-ui'
+import { call, createResource, Dialog, FormControl, toast } from 'frappe-ui'
 import { ref, watch, inject } from 'vue'
 import { Calendar } from 'lucide-vue-next'
 import { formatTime } from '@/utils/'

+const dayjs = inject('$dayjs')
 const user = inject('$user')
 const show = defineModel()
 const evaluations = defineModel('reloadEvals')
--- a/frontend/src/components/Modals/Event.vue
+++ b/frontend/src/components/Modals/Event.vue
@@ -14,7 +14,7 @@

 					<div class="flex flex-col space-y-4 text-sm text-ink-gray-8">
 						<Tooltip :text="__('Email ID')">
-							<div class="flex items-center space-x-2 w-fit">
+							<div class="flex items-center gap-x-2 w-fit">
 								<User class="h-4 w-4 stroke-1.5" />
 								<span>
 									{{ event.member }}
@@ -23,7 +23,7 @@
 						</Tooltip>
 						<Tooltip :text="__('Course')">
 							<div
-								class="flex space-x-2 w-fit cursor-pointer"
+								class="flex gap-x-2 w-fit cursor-pointer"
 								@click="openLink('course', event.course)"
 							>
 								<BookOpen class="h-4 w-4 stroke-1.5" />
@@ -34,7 +34,7 @@
 						</Tooltip>
 						<Tooltip v-if="event.batch_title" :text="__('Batch')">
 							<div
-								class="flex space-x-2 w-fit cursor-pointer"
+								class="flex gap-x-2 w-fit cursor-pointer"
 								@click="openLink('batch', event.batch_name)"
 							>
 								<Users class="h-4 w-4 stroke-1.5" />
@@ -44,7 +44,7 @@
 							</div>
 						</Tooltip>
 						<Tooltip :text="__('Date')">
-							<div class="flex items-center space-x-2 w-fit">
+							<div class="flex items-center gap-x-2 w-fit">
 								<Calendar class="h-4 w-4 stroke-1.5" />
 								<span>
 									{{ dayjs(event.date).format('DD MMM YYYY') }}
@@ -52,7 +52,7 @@
 							</div>
 						</Tooltip>
 						<Tooltip :text="__('Time')">
-							<div class="flex items-center space-x-2 w-fit">
+							<div class="flex items-center gap-x-2 w-fit">
 								<Clock class="h-4 w-4 stroke-1.5" />
 								<span>
 									{{ formatTime(event.start_time) }} -
@@ -61,7 +61,7 @@
 							</div>
 						</Tooltip>
 					</div>
-					<div class="flex items-center space-x-2 mt-auto">
+					<div class="flex items-center gap-x-2 mt-auto">
 						<Button
 							v-if="certificate.name"
 							@click="openCertificate(certificate)"
@@ -86,7 +86,7 @@
 						</Button>
 					</div>
 				</div>
-				<Tabs :tabs="tabs" as="div" v-model="tabIndex" class="border-l w-1/2">
+				<Tabs :tabs="tabs" as="div" v-model="tabIndex" class="border-s w-1/2">
 					<template #tab-panel="{ tab }">
 						<div
 							v-if="tab.label == 'Evaluation'"
--- a/frontend/src/components/Modals/JobApplicationModal.vue
+++ b/frontend/src/components/Modals/JobApplicationModal.vue
@@ -51,7 +51,7 @@
 					</FileUploader>
 				</div>
 				<div v-else class="flex items-center">
-					<div class="border rounded-md p-2 mr-2">
+					<div class="border rounded-md p-2 me-2">
 						<FileText class="h-5 w-5 stroke-1.5 text-ink-gray-7" />
 					</div>
 					<div class="flex flex-col">
--- a/frontend/src/components/Modals/LiveClassAttendance.vue
+++ b/frontend/src/components/Modals/LiveClassAttendance.vue
@@ -31,7 +31,7 @@
 					@click="redirectToProfile(participant.member_username)"
 					class="grid grid-cols-2 items-center w-full text-base w-fit py-2"
 				>
-					<div class="flex items-center space-x-2">
+					<div class="flex items-center gap-x-2">
 						<Avatar
 							:image="participant.member_image"
 							:label="participant.member_name"
@@ -47,7 +47,7 @@
 						</div>
 					</div>

-					<div class="grid grid-cols-3 gap-20 text-right">
+					<div class="grid grid-cols-3 gap-20 text-end">
 						<div>
 							{{ dayjs(participant.joined_at).format('HH:mm a') }}
 						</div>
--- a/frontend/src/components/Modals/Question.vue
+++ b/frontend/src/components/Modals/Question.vue
@@ -105,7 +105,7 @@
 						type="number"
 					/>
 				</div>
-				<div class="flex items-center justify-end space-x-2 mt-5">
+				<div class="flex items-center justify-end gap-x-2 mt-5">
 					<Button variant="solid" @click="submitQuestion()">
 						{{ __('Save') }}
 					</Button>
--- a/frontend/src/components/Modals/QuizInVideo.vue
+++ b/frontend/src/components/Modals/QuizInVideo.vue
@@ -44,14 +44,14 @@
 						}"
 					>
 						<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 columns">
 								<template #prefix="{ item }">
 									<component
 										v-if="item.icon"
 										:is="item.icon"
-										class="h-4 w-4 stroke-1.5 ml-4"
+										class="h-4 w-4 stroke-1.5 ms-4"
 									/>
 								</template>
 							</ListHeaderItem>
--- a/frontend/src/components/Modals/VideoStatistics.vue
+++ b/frontend/src/components/Modals/VideoStatistics.vue
@@ -18,7 +18,7 @@
 					<!-- <FormControl
 						v-model="searchText"
 						:placeholder="__('Search by Member')"
-						class="mt-2 mr-5 w-[25%]"
+						class="mt-2 me-5 w-[25%]"
 					/> -->
 				</div>
 				<div
@@ -50,7 +50,7 @@
 									}"
 								>
 									<div class="grid grid-cols-[70%,30%] items-center">
-										<div class="flex items-center space-x-2">
+										<div class="flex items-center gap-x-2">
 											<Avatar
 												:image="row.member_image"
 												:label="row.member_name"
--- a/frontend/src/components/NotPermitted.vue
+++ b/frontend/src/components/NotPermitted.vue
@@ -2,7 +2,7 @@
 	<div class="text-base border rounded-md w-1/3 mx-auto my-32">
 		<div class="border-b px-5 py-3 font-medium text-ink-gray-9">
 			<span
-				class="inline-flex items-center before:bg-surface-red-5 before:w-2 before:h-2 before:rounded-md before:mr-2"
+				class="inline-flex items-center before:bg-surface-red-5 before:w-2 before:h-2 before:rounded-md before:me-2"
 			></span>
 			{{ __(title) }}
 		</div>
--- a/frontend/src/components/Notes/InlineLessonMenu.vue
+++ b/frontend/src/components/Notes/InlineLessonMenu.vue
@@ -4,7 +4,7 @@
 		:style="{
 			display: top > 0 ? 'block' : 'none',
 			top: top + 'px',
-			left: left + 'px',
+			insetInlineStart: left + 'px',
 		}"
 	>
 		<div class="space-y-2 py-2">
@@ -14,7 +14,7 @@
 			<div class="">
 				<div
 					v-for="color in colors"
-					class="flex items-center space-x-2 px-3 py-2 cursor-pointer hover:bg-surface-gray-2"
+					class="flex items-center gap-x-2 px-3 py-2 cursor-pointer hover:bg-surface-gray-2"
 					@click="saveHighLight(color)"
 				>
 					<span
@@ -32,7 +32,7 @@
 		<div class="border-t">
 			<div
 				@click="addToNotes()"
-				class="flex items-center space-x-2 hover:bg-surface-gray-2 cursor-pointer rounded-b-md py-2 px-3"
+				class="flex items-center gap-x-2 hover:bg-surface-gray-2 cursor-pointer rounded-b-md py-2 px-3"
 			>
 				<NotepadText class="size-3 stroke-1.5" />
 				<span>
@@ -42,7 +42,7 @@
 			<div
 				v-if="highlightExists()"
 				@click="deleteHighlight"
-				class="flex items-center space-x-2 hover:bg-surface-gray-2 cursor-pointer rounded-b-md py-2 px-3"
+				class="flex items-center gap-x-2 hover:bg-surface-gray-2 cursor-pointer rounded-b-md py-2 px-3"
 			>
 				<Trash2 class="size-3 stroke-1.5" />
 				<span>
--- a/frontend/src/components/NumberChartGraph.vue
+++ b/frontend/src/components/NumberChartGraph.vue
@@ -3,7 +3,7 @@
 		<div class="text-ink-gray-5">
 			{{ __(title) }}
 		</div>
-		<div class="flex items-center space-x-2">
+		<div class="flex items-center gap-x-2">
 			<slot name="prefix" />
 			<div class="font-semibold text-ink-gray-9 text-2xl">
 				{{ value }}
--- a/frontend/src/components/Quiz.vue
+++ b/frontend/src/components/Quiz.vue
@@ -69,7 +69,7 @@
 			</ol>
 		</div>

-		<div v-if="quiz.data.duration" class="flex flex-col space-x-1 my-4 px-2">
+		<div v-if="quiz.data.duration" class="flex flex-col gap-x-1 my-4 px-2">
 			<div class="mb-2">
 				<span class="text-ink-gray-9"> {{ __('Time') }}: </span>
 				<span class="font-semibold text-ink-gray-9">
@@ -84,7 +84,7 @@
 				<div class="font-semibold text-lg text-ink-gray-9">
 					{{ quiz.data.title }}
 				</div>
-				<div class="flex items-center justify-center space-x-2 mt-4">
+				<div class="flex items-center justify-center gap-x-2 mt-4">
 					<Button
 						v-if="
 							!quiz.data.max_attempts ||
@@ -179,7 +179,7 @@
 								</div>
 							</div>
 							<span
-								class="ml-2 text-ink-gray-9"
+								class="ms-2 text-ink-gray-9"
 								v-html="questionDetails.data[`option_${index}`]"
 							>
 							</span>
@@ -202,12 +202,12 @@
 						<div v-if="showAnswers.length">
 							<Badge v-if="showAnswers[0]" :label="__('Correct')" theme="green">
 								<template #prefix>
-									<CheckCircle class="w-4 h-4 text-ink-green-2 mr-1" />
+									<CheckCircle class="w-4 h-4 text-ink-green-2 me-1" />
 								</template>
 							</Badge>
 							<Badge v-else theme="red" :label="__('Incorrect')">
 								<template #prefix>
-									<XCircle class="w-4 h-4 text-ink-red-3 mr-1" />
+									<XCircle class="w-4 h-4 text-ink-red-3 me-1" />
 								</template>
 							</Badge>
 						</div>
@@ -231,7 +231,7 @@
 						/>
 						<div
 							v-if="!quiz.data.show_answers"
-							class="flex items-center space-x-2"
+							class="flex items-center gap-x-2"
 						>
 							<Button
 								@click="switchQuestion(activeQuestion - 1)"
@@ -279,7 +279,7 @@
 								!showAnswers.length &&
 								questionDetails.data.type != 'Open Ended'
 							"
-							class="ml-auto"
+							class="ms-auto"
 							@click="checkAnswer()"
 						>
 							<span>
@@ -291,7 +291,7 @@
 								activeQuestion != questions.length && quiz.data.show_answers
 							"
 							@click="nextQuestion()"
-							class="ml-auto"
+							class="ms-auto"
 						>
 							<span>
 								{{ __('Next') }}
@@ -301,7 +301,7 @@
 							variant="solid"
 							v-else
 							@click="handleSubmitClick()"
-							class="ml-auto"
+							class="ms-auto"
 						>
 							<span>
 								{{ __('Submit') }}
@@ -314,7 +314,7 @@
 				<div class="font-semibold">
 					{{ __('Questions marked for review') }}
 				</div>
-				<div class="flex items-center space-x-2 mt-2">
+				<div class="flex items-center gap-x-2 mt-2">
 					<div
 						v-for="index in reviewQuestions"
 						@click="switchQuestion(index)"
@@ -350,7 +350,7 @@
 					)
 				}}
 			</div>
-			<div class="space-x-2">
+			<div class="flex gap-x-2">
 				<Button
 					@click="resetQuiz()"
 					class="mt-2"
--- a/frontend/src/components/Settings/BadgeAssignments.vue
+++ b/frontend/src/components/Settings/BadgeAssignments.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="text-base">
-		<div class="flex items-center justify-between space-x-2 mb-5">
-			<div class="flex items-center space-x-2">
+		<div class="flex items-center justify-between gap-x-2 mb-5">
+			<div class="flex items-center gap-x-2">
 				<ChevronLeft
 					class="size-5 stroke-1.5 text-ink-gray-5 cursor-pointer"
 					@click="
@@ -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" v-for="item in columns">
 						<template #prefix="{ item }">
--- a/frontend/src/components/Settings/BadgeForm.vue
+++ b/frontend/src/components/Settings/BadgeForm.vue
@@ -70,7 +70,7 @@
 			</div>
 		</template>
 		<template #actions="{ close }">
-			<div class="pb-5 float-right">
+			<div class="pb-5 float-end">
 				<Button variant="solid" @click="saveBadge(close)">
 					{{ __('Save') }}
 				</Button>
--- a/frontend/src/components/Settings/Badges.vue
+++ b/frontend/src/components/Settings/Badges.vue
@@ -32,7 +32,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 columns" :key="item.key">
 						<template #prefix="{ item }">
--- a/frontend/src/components/Settings/BrandSettings.vue
+++ b/frontend/src/components/Settings/BrandSettings.vue
@@ -10,7 +10,7 @@
 						{{ __(description) }}
 					</div>
 				</div>
-				<div class="space-x-2">
+				<div class="flex items-center gap-x-2">
 					<Badge
 						v-if="isDirty"
 						:label="__('Not Saved')"
--- a/frontend/src/components/Settings/Categories.vue
+++ b/frontend/src/components/Settings/Categories.vue
@@ -9,9 +9,9 @@
 					{{ __(description) }}
 				</div>
 			</div>
-			<div class="flex items-center space-x-5">
+			<div class="flex items-center gap-x-5">
 				<div
-					class="flex items-center space-x-1 text-ink-amber-3 border border-outline-amber-1 bg-surface-amber-1 rounded-lg px-2 py-1"
+					class="flex items-center gap-x-1 text-ink-amber-3 border border-outline-amber-1 bg-surface-amber-1 rounded-lg px-2 py-1"
 					v-if="saving"
 				>
 					<LoadingIndicator class="size-2" />
@@ -29,10 +29,7 @@
 			</div>
 		</div>

-		<div
-			v-if="showForm"
-			class="flex items-center justify-between my-4 space-x-2"
-		>
+		<div v-if="showForm" class="flex items-center justify-between my-4 gap-x-2">
 			<FormControl
 				ref="categoryInput"
 				v-model="category"
--- a/frontend/src/components/Settings/Coupons/CouponDetails.vue
+++ b/frontend/src/components/Settings/Coupons/CouponDetails.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="flex flex-col text-base h-full">
-		<div class="flex items-center space-x-2 mb-8 -ml-1.5">
+		<div class="flex items-center gap-x-2 mb-8 -ms-1.5">
 			<ChevronLeft
 				class="size-5 stroke-1.5 text-ink-gray-7 cursor-pointer"
 				@click="emit('updateStep', 'list')"
@@ -74,7 +74,7 @@
 				<CouponItems ref="couponItems" :data="data" :coupons="coupons" />
 			</div>
 		</div>
-		<div class="mt-auto space-x-2 ml-auto">
+		<div class="mt-auto flex gap-x-2 items-center ms-auto">
 			<Button variant="solid" @click="saveCoupon()">
 				{{ __('Save') }}
 			</Button>
--- a/frontend/src/components/Settings/Coupons/CouponItems.vue
+++ b/frontend/src/components/Settings/Coupons/CouponItems.vue
@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<div class="relative overflow-x-auto border rounded-md">
-			<table class="w-full text-sm text-left text-ink-gray-5">
+			<table class="w-full text-sm text-start text-ink-gray-5">
 				<thead class="text-xs text-ink-gray-7 uppercase bg-surface-gray-2">
 					<tr>
 						<td scope="col" class="px-6 py-2">
--- a/frontend/src/components/Settings/Coupons/CouponList.vue
+++ b/frontend/src/components/Settings/Coupons/CouponList.vue
@@ -31,7 +31,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"
 				>
 				</ListHeader>
 				<ListRows>
--- a/frontend/src/components/Settings/EmailTemplates.vue
+++ b/frontend/src/components/Settings/EmailTemplates.vue
@@ -9,7 +9,7 @@
 					{{ __(description) }}
 				</div> -->
 			</div>
-			<div class="flex items-center space-x-5">
+			<div class="flex items-center gap-x-5">
 				<Button @click="openTemplateForm('new')">
 					<template #prefix>
 						<Plus class="h-3 w-3 stroke-1.5" />
@@ -31,14 +31,14 @@
 				}"
 			>
 				<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 columns">
 						<template #prefix="{ item }">
 							<component
 								v-if="item.icon"
 								:is="item.icon"
-								class="h-4 w-4 stroke-1.5 ml-4"
+								class="h-4 w-4 stroke-1.5 ms-4"
 							/>
 						</template>
 					</ListHeaderItem>
--- a/frontend/src/components/Settings/Evaluators.vue
+++ b/frontend/src/components/Settings/Evaluators.vue
@@ -9,7 +9,7 @@
 					{{ __(description) }}
 				</div>
 			</div>
-			<div class="flex item-center space-x-2">
+			<div class="flex item-center gap-x-2">
 				<Dropdown
 					placement="right"
 					side="bottom"
@@ -39,7 +39,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' : '',
 									]"
 								/>
@@ -72,7 +72,7 @@
 					>
 						<div class="flex items-center justify-between group py-3">
 							<div
-								class="flex items-center space-x-3"
+								class="flex items-center gap-x-3"
 								@click="openProfile(evaluator.username)"
 							>
 								<Avatar
--- a/frontend/src/components/Settings/GoogleMeetSettings.vue
+++ b/frontend/src/components/Settings/GoogleMeetSettings.vue
@@ -9,7 +9,7 @@
 					{{ __(description) }}
 				</div>
 			</div>
-			<div class="flex items-center space-x-5">
+			<div class="flex items-center gap-x-5">
 				<Button @click="openForm('new')">
 					<template #prefix>
 						<Plus class="h-3 w-3 stroke-1.5" />
@@ -31,7 +31,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 columns">
 						<template #prefix="{ item }">
--- a/frontend/src/components/Settings/Members.vue
+++ b/frontend/src/components/Settings/Members.vue
@@ -9,7 +9,7 @@
 					{{ __(description) }}
 				</div>
 			</div>
-			<div class="flex item-center space-x-2">
+			<div class="flex item-center gap-x-2">
 				<Button @click="showNewMember = true">
 					<template #prefix>
 						<Plus class="size-4 stroke-1.5" />
@@ -39,7 +39,7 @@
 					>
 						<div
 							@click="openProfile(member.username)"
-							class="flex items-center space-x-3 col-span-2"
+							class="flex items-center gap-x-3 col-span-2"
 						>
 							<Avatar
 								:image="member.user_image"
@@ -58,7 +58,7 @@
 							</div>
 						</div>
 						<div
-							class="flex items-center text-ink-gray-9 space-x-1 bg-surface-gray-2 px-2 py-1.5 rounded-md"
+							class="flex items-center text-ink-gray-9 gap-x-1 bg-surface-gray-2 px-2 py-1.5 rounded-md"
 							v-if="member.role && member.role !== 'LMS Student'"
 						>
 							<Shield class="size-4 stroke-1.5" />
--- a/frontend/src/components/Settings/PaymentGatewayDetails.vue
+++ b/frontend/src/components/Settings/PaymentGatewayDetails.vue
@@ -36,7 +36,7 @@
 			</div>
 		</template>
 		<template #actions="{ close }">
-			<div class="pb-5 float-right">
+			<div class="pb-5 float-end">
 				<Button variant="solid" @click="saveSettings(close)">
 					{{ __('Save') }}
 				</Button>
--- a/frontend/src/components/Settings/PaymentGateways.vue
+++ b/frontend/src/components/Settings/PaymentGateways.vue
@@ -30,7 +30,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 columns">
 						<template #prefix="{ item }">
--- a/frontend/src/components/Settings/SettingDetails.vue
+++ b/frontend/src/components/Settings/SettingDetails.vue
@@ -10,7 +10,7 @@
 						{{ __(description) }}
 					</div>
 				</div>
-				<div class="space-x-2">
+				<div class="flex items-center gap-x-2">
 					<Badge
 						v-if="data.isDirty"
 						:label="__('Not Saved')"
--- a/frontend/src/components/Settings/SettingFields.vue
+++ b/frontend/src/components/Settings/SettingFields.vue
@@ -6,7 +6,7 @@
 			</div>
 			<div
 				:class="{
-					'flex justify-between space-x-8 w-full': section.columns.length > 1,
+					'flex justify-between gap-x-8 w-full': section.columns.length > 1,
 				}"
 			>
 				<div
@@ -64,7 +64,7 @@
 								</template>
 							</FileUploader>
 							<div v-else>
-								<div class="flex items-center text-sm space-x-2">
+								<div class="flex items-center text-sm gap-x-2">
 									<div
 										class="flex items-center justify-center rounded border border-outline-gray-modals bg-surface-gray-2"
 										:class="field.size == 'lg' ? 'px-5 py-5' : 'px-20 py-8'"
@@ -91,7 +91,7 @@
 									</div>
 									<X
 										@click="data[field.name] = null"
-										class="border text-ink-gray-7 border-outline-gray-modals rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
+										class="border text-ink-gray-7 border-outline-gray-modals rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ms-4"
 									/>
 								</div>
 							</div>
--- a/frontend/src/components/Settings/Transactions/TransactionDetails.vue
+++ b/frontend/src/components/Settings/Transactions/TransactionDetails.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="flex flex-col h-full text-base">
-		<div class="flex items-center justify-between mb-10 -ml-1.5">
-			<div class="flex items-center space-x-2">
+		<div class="flex items-center justify-between mb-10 -ms-1.5">
+			<div class="flex items-center gap-x-2">
 				<ChevronLeft
 					class="size-5 stroke-1.5 text-ink-gray-7 cursor-pointer"
 					@click="emit('updateStep', 'list')"
@@ -10,7 +10,7 @@
 					{{ __('Transaction Details') }}
 				</div>
 			</div>
-			<div class="space-x-2">
+			<div class="flex items-center gap-x-2">
 				<Button
 					v-if="
 						transactionData?.payment_for_document_type &&
--- a/frontend/src/components/Settings/Transactions/TransactionList.vue
+++ b/frontend/src/components/Settings/Transactions/TransactionList.vue
@@ -17,7 +17,7 @@
 			</Button>
 		</div>

-		<div class="flex items-center space-x-5 mb-4">
+		<div class="flex items-center gap-x-5 mb-4">
 			<FormControl
 				v-model="billingName"
 				:placeholder="__('Filter by Billing Name')"
@@ -53,7 +53,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 columns">
 						<template #prefix="{ item }">
--- a/frontend/src/components/Settings/ZoomSettings.vue
+++ b/frontend/src/components/Settings/ZoomSettings.vue
@@ -9,7 +9,7 @@
 					{{ __(description || '') }}
 				</div>
 			</div>
-			<div class="flex items-center space-x-5">
+			<div class="flex items-center gap-x-5">
 				<Button @click="openForm('new')">
 					<template #prefix>
 						<Plus class="h-3 w-3 stroke-1.5" />
@@ -31,7 +31,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 columns">
 						<template #prefix="{ item }">
--- a/frontend/src/components/Sidebar/AppSidebar.vue
+++ b/frontend/src/components/Sidebar/AppSidebar.vue
@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="flex h-full flex-col justify-between transition-all duration-300 ease-in-out border-r bg-surface-menu-bar overflow-x-hidden"
+		class="flex h-full flex-col justify-between transition-all duration-300 ease-in-out border-e bg-surface-menu-bar overflow-x-hidden"
 		:class="sidebarStore.isSidebarCollapsed ? 'w-14' : 'w-56'"
 	>
 		<div
@@ -31,8 +31,8 @@
 				class="mt-4"
 			>
 				<div
-					class="flex items-center justify-between pr-2 cursor-pointer"
-					:class="sidebarStore.isSidebarCollapsed ? 'pl-3' : 'pl-4'"
+					class="flex items-center justify-between pe-2 cursor-pointer"
+					:class="sidebarStore.isSidebarCollapsed ? 'ps-3' : 'ps-4'"
 					@click="toggleWebPages"
 				>
 					<div
@@ -42,10 +42,13 @@
 						<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
 							<ChevronRight
 								class="h-4 w-4 stroke-1.5 text-ink-gray-9 transition-all duration-300 ease-in-out"
-								:class="{ 'rotate-90': !sidebarStore.isWebpagesCollapsed }"
+								:class="{
+									'rotate-90': sidebarStore.isWebpagesCollapsed,
+									'rtl:rotate-180': !sidebarStore.isWebpagesCollapsed,
+								}"
 							/>
 						</span>
-						<span class="ml-2">
+						<span class="ms-2">
 							{{ __('More') }}
 						</span>
 					</div>
@@ -159,12 +162,8 @@
 				"
 			>
 				<div
-					class="flex items-center flex-1"
-					:class="
-						sidebarStore.isSidebarCollapsed
-							? 'flex-col space-y-3'
-							: 'flex-row space-x-3'
-					"
+					class="flex items-center flex-1 gap-3"
+					:class="sidebarStore.isSidebarCollapsed ? 'flex-col' : 'flex-row'"
 				>
 					<Tooltip v-if="readOnlyMode && sidebarStore.isSidebarCollapsed">
 						<CircleAlert
@@ -216,8 +215,11 @@
 				>
 					<CollapseSidebar
 						class="size-4 text-ink-gray-7 duration-300 stroke-1.5 ease-in-out cursor-pointer"
-						:class="{
-							'[transform:rotateY(180deg)]': sidebarStore.isSidebarCollapsed,
+						:style="{
+							transform:
+								isRtl !== sidebarStore.isSidebarCollapsed
+									? 'rotateY(180deg)'
+									: '',
 						}"
 						@click="toggleSidebar()"
 					/>
@@ -323,6 +325,7 @@ const router = useRouter()
 let onboardingDetails
 let isOnboardingStepsCompleted = false
 const readOnlyMode = window.read_only_mode
+const isRtl = document.documentElement.dir === 'rtl'
 const iconProps = {
 	strokeWidth: 1.5,
 	width: 16,
--- a/frontend/src/components/Sidebar/SidebarLink.vue
+++ b/frontend/src/components/Sidebar/SidebarLink.vue
@@ -25,18 +25,18 @@
 				class="flex-shrink-0 text-sm duration-300 ease-in-out"
 				:class="
 					isCollapsed
-						? 'ml-0 w-0 overflow-hidden opacity-0'
-						: 'ml-2 w-auto opacity-100'
+						? 'ms-0 w-0 overflow-hidden opacity-0'
+						: 'ms-2 w-auto opacity-100'
 				"
 			>
 				{{ __(link.label) }}
 			</span>
 			<span
 				v-if="link.count && !isCollapsed"
-				class="!ml-auto block text-xs text-ink-gray-5"
+				class="!ms-auto block text-xs text-ink-gray-5"
 				:class="
 					isCollapsed && link.count > 9
-						? 'absolute top-[2px] right-0 bg-surface-white'
+						? 'absolute top-[2px] end-0 bg-surface-white'
 						: ''
 				"
 			>
@@ -44,7 +44,7 @@
 			</span>
 			<div
 				v-if="showControls && !isCollapsed"
-				class="flex items-center space-x-2 !ml-auto block text-xs text-ink-gray-5 group-hover:visible invisible"
+				class="flex items-center gap-x-2 !ms-auto block text-xs text-ink-gray-5 group-hover:visible invisible"
 			>
 				<component
 					:is="icons['Edit']"
--- a/frontend/src/components/Sidebar/UserDropdown.vue
+++ b/frontend/src/components/Sidebar/UserDropdown.vue
@@ -19,11 +19,11 @@
 					/>
 					<LMSLogo v-else class="w-8 h-8 rounded flex-shrink-0" />
 					<div
-						class="flex flex-1 flex-col text-left duration-300 ease-in-out"
+						class="flex flex-1 flex-col text-start duration-300 ease-in-out"
 						:class="
 							isCollapsed
-								? 'opacity-0 ml-0 w-0 overflow-hidden'
-								: 'opacity-100 ml-2 w-auto'
+								? 'opacity-0 ms-0 w-0 overflow-hidden'
+								: 'opacity-100 ms-2 w-auto'
 						"
 					>
 						<div class="text-base font-medium text-ink-gray-9 leading-none">
@@ -47,8 +47,8 @@
 						class="duration-300 ease-in-out"
 						:class="
 							isCollapsed
-								? 'opacity-0 ml-0 w-0 overflow-hidden'
-								: 'opacity-100 ml-2 w-auto'
+								? 'opacity-0 ms-0 w-0 overflow-hidden'
+								: 'opacity-100 ms-2 w-auto'
 						"
 					>
 						<ChevronDown class="h-4 w-4 text-ink-gray-7" />
--- a/frontend/src/components/Tags.vue
+++ b/frontend/src/components/Tags.vue
@@ -7,11 +7,11 @@
 			{{ tags }}
 			<div
 				v-for="tag in tags?.split(', ')"
-				class="flex items-center bg-surface-gray-2 p-2 rounded-md mr-2"
+				class="flex items-center bg-surface-gray-2 p-2 rounded-md me-2"
 			>
 				{{ tag }}
 				<X
-					class="stroke-1.5 w-3 h-3 ml-2 cursor-pointer"
+					class="stroke-1.5 w-3 h-3 ms-2 cursor-pointer"
 					@click="removeTag(tag)"
 				/>
 			</div>
--- a/frontend/src/components/UnsplashImageBrowser.vue
+++ b/frontend/src/components/UnsplashImageBrowser.vue
@@ -5,12 +5,12 @@
 		</template>
 		<template #body>
 			<div
-				class="absolute left-1/2 mt-3 max-w-sm -translate-x-1/2 transform rounded-lg bg-surface-white px-4 sm:px-0 lg:max-w-3xl"
+				class="absolute start-1/2 mt-3 max-w-sm -translate-x-1/2 transform rounded-lg bg-surface-white px-4 sm:px-0 lg:max-w-3xl"
 			>
 				<div
 					class="overflow-hidden rounded-lg p-3 shadow-2xl ring-1 ring-black ring-opacity-5"
 				>
-					<div class="flex items-center space-x-2">
+					<div class="flex items-center gap-x-2">
 						<div class="flex-1">
 							<TextInput
 								type="text"
--- a/frontend/src/components/UpcomingEvaluations.vue
+++ b/frontend/src/components/UpcomingEvaluations.vue
@@ -66,25 +66,25 @@
 						</div>
 						<div class="flex items-center mb-2">
 							<Calendar class="w-4 h-4 stroke-1.5" />
-							<span class="ml-2">
+							<span class="ms-2">
 								{{ dayjs(evl.date).format('DD MMMM YYYY') }}
 							</span>
 						</div>
 						<div class="flex items-center mb-2">
 							<Clock class="w-4 h-4 stroke-1.5" />
-							<span class="ml-2">
+							<span class="ms-2">
 								{{ formatTime(evl.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">
 								{{ evl.evaluator_name }}
 							</span>
 						</div>
 						<div
 							v-if="evl.google_meet_link"
-							class="flex items-center justify-between space-x-2 mt-4"
+							class="flex items-center justify-between gap-x-2 mt-4"
 						>
 							<Button @click="openEvalCall(evl)" class="w-full">
 								<template #prefix>
--- a/frontend/src/components/VideoBlock.vue
+++ b/frontend/src/components/VideoBlock.vue
@@ -8,7 +8,7 @@
 				)
 			}}

-			<div v-for="(quiz, index) in quizzes" class="pl-3 mt-1">
+			<div v-for="(quiz, index) in quizzes" class="ps-3 mt-1">
 				<span>
 					{{ index + 1 }}. <span class="font-semibold"> {{ quiz.quiz }} </span>
 				</span>
@@ -36,7 +36,7 @@
 				@click="playVideo"
 			>
 				<div
-					class="rounded-full p-4 pl-4.5"
+					class="rounded-full p-4 ps-4.5"
 					style="
 						background: radial-gradient(
 							circle,
@@ -49,7 +49,7 @@
 				</div>
 			</div>
 			<div
-				class="flex items-center space-x-2 py-2 px-1 text-ink-white bg-gradient-to-b from-transparent to-black/75 absolute bottom-0 left-0 right-0 mx-auto rounded-md"
+				class="flex items-center gap-x-2 py-2 px-1 text-ink-white bg-gradient-to-b from-transparent to-black/75 absolute bottom-0 start-0 end-0 mx-auto rounded-md"
 				:class="{
 					'invisible group-hover:visible': playing,
 				}"
@@ -76,7 +76,7 @@
 						class="duration-slider h-1"
 					/>
 					<!-- QUIZ MARKERS -->
-					<div class="absolute top-0 left-0 w-full h-full pointer-events-none">
+					<div class="absolute top-0 start-0 w-full h-full pointer-events-none">
 						<div
 							v-for="(quiz, index) in quizzes"
 							:key="index"
@@ -336,7 +336,7 @@ const toggleFullscreen = () => {
 const getQuizMarkerStyle = (time) => {
 	const percentage = ((time - 5) / Math.ceil(duration.value)) * 100
 	return {
-		left: `${percentage}%`,
+		insetInlineStart: `${percentage}%`,
 	}
 }

--- 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>
--- a/frontend/src/pages/Assignments.vue
+++ b/frontend/src/pages/Assignments.vue
@@ -109,11 +109,11 @@
 		<div v-else class="h-[53vh]">
 			<EmptyState type="Assignments" />
 		</div>
-		<div class="flex items-center justify-end space-x-3 pt-3 border-t px-5">
+		<div class="flex items-center justify-end gap-x-3 pt-3 border-t px-5">
 			<Button v-if="assignments.hasNextPage" @click="assignments.next()">
 				{{ __('Load More') }}
 			</Button>
-			<div v-if="assignments.hasNextPage" class="h-8 border-l"></div>
+			<div v-if="assignments.hasNextPage" class="h-8 border-s"></div>
 			<div class="text-ink-gray-5">
 				{{ assignments.data?.length }} {{ __('of') }}
 				{{ totalAssignments.data }}
--- 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>
--- a/frontend/src/pages/Batches/BatchForm.vue
+++ b/frontend/src/pages/Batches/BatchForm.vue
@@ -275,7 +275,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="border-l min-w-0">
+			<div class="border-s min-w-0">
 				<div class="border-b p-4">
 					<BatchCourses :batch="batch" />
 				</div>
--- 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,
 						}"
--- 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"
--- 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'">
@@ -174,7 +174,6 @@ import {
 	AxisChart,
 	createResource,
 	createListResource,
-	dayjs,
 	FormControl,
 	ListView,
 	ListHeader,
@@ -185,7 +184,8 @@ import {
 	Avatar,
 	Button,
 } from 'frappe-ui'
-import { computed, ref, watch } from 'vue'
+import { computed, inject, ref, watch } from 'vue'
+import type dayjsType from 'dayjs'
 import { formatAmount } from '@/utils'
 import { Plus } from 'lucide-vue-next'
 import BatchFeedback from '@/pages/Batches/components/BatchFeedback.vue'
@@ -193,6 +193,7 @@ import BatchStudentProgress from '@/pages/Batches/components/BatchStudentProgres
 import NumberChartGraph from '@/components/NumberChartGraph.vue'
 import StudentModal from '@/components/Modals/StudentModal.vue'

+const dayjs = inject<typeof dayjsType>('$dayjs')!
 const searchFilter = ref<string | null>(null)
 const showEnrollmentModal = ref<boolean>(false)
 const showProgressModal = ref<boolean>(false)
--- 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>
--- 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>
--- a/frontend/src/pages/Batches/components/BatchCard.vue
+++ b/frontend/src/pages/Batches/components/BatchCard.vue
@@ -39,8 +39,8 @@
 				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" />
-				<span>
+				<Clock class="h-4 w-4 stroke-1.5 me-2 text-ink-gray-7" />
+				<span dir="ltr">
 					{{ formatTime(batch.start_time) }} - {{ formatTime(batch.end_time) }}
 				</span>
 			</div>
@@ -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
@@ -108,6 +108,6 @@ const props = defineProps({
 }

 .avatar-group.overlap .avatar + .avatar {
-	margin-left: calc(-8px);
+	margin-inline-start: calc(-8px);
 }
 </style>
--- 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>
--- 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"
--- 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" />
-				<span>
+				<Clock class="h-4 w-4 stroke-1.5 me-2" />
+				<span dir="ltr">
 					{{ 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>
--- 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>
--- 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') }}
--- 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>
--- 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') }}
--- 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">
 					<FormControl
 						v-model="openToWork"
 						:label="__('Open to Work')"
@@ -71,7 +71,7 @@
 						})
 					"
 				>
-					<div class="flex space-x-4">
+					<div class="flex items-center gap-x-4">
 						<UserAvatar :user="participant" size="2xl" />
 						<div class="flex flex-col">
 							<div class="font-semibold line-clamp-1">
@@ -86,8 +86,8 @@
 						</div>
 					</div>
 					<div class="mt-auto space-y-2 text-ink-gray-7">
-						<div class="flex items-center space-x-1">
-							<GraduationCap class="h-4 w-4 stroke-1.5 mr-1" />
+						<div class="flex items-center gap-x-1">
+							<GraduationCap class="h-4 w-4 stroke-1.5 me-1" />
 							<span>
 								{{ participant.certificate_count }}
 								{{
@@ -97,8 +97,8 @@
 								}}
 							</span>
 						</div>
-						<div class="flex items-center space-x-1">
-							<Calendar class="h-4 w-4 stroke-1.5 mr-1" />
+						<div class="flex items-center gap-x-1">
+							<Calendar class="h-4 w-4 stroke-1.5 me-1" />
 							<span>{{
 								dayjs(participant.issue_date).format('DD MMM YYYY')
 							}}</span>
@@ -110,11 +110,11 @@
 		<div v-else class="h-[40vh] lg:h-[53vh] px-5">
 			<EmptyState type="Certified Members" />
 		</div>
-		<div class="flex items-center justify-end space-x-3 border-t pt-3 px-5">
+		<div class="flex items-center justify-end gap-x-3 border-t pt-3 px-5">
 			<Button v-if="participants.hasNextPage" @click="participants.next()">
 				{{ __('Load More') }}
 			</Button>
-			<div v-if="participants.hasNextPage" class="h-8 border-l"></div>
+			<div v-if="participants.hasNextPage" class="h-8 border-s"></div>
 			<div class="text-ink-gray-5">
 				{{ participants.data?.length }} {{ __('of') }}
 				{{ memberCount }}
--- 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>
@@ -264,7 +264,6 @@ import {
 	Button,
 	createListResource,
 	createResource,
-	dayjs,
 	Dropdown,
 	ECharts,
 	FormControl,
@@ -277,7 +276,8 @@ import {
 	Select,
 	Tooltip,
 } from 'frappe-ui'
-import { computed, ref, watch } from 'vue'
+import { computed, inject, ref, watch } from 'vue'
+import type dayjsType from 'dayjs'
 import { Plus, Star } from 'lucide-vue-next'
 import { formatAmount } from '@/utils'
 import colors from '@/utils/frappe-ui-colors.json'
@@ -290,6 +290,7 @@ const props = defineProps<{
 	course: any
 }>()

+const dayjs = inject<typeof dayjsType>('$dayjs')!
 const showEnrollmentModal = ref(false)
 const searchFilter = ref<string | null>(null)
 const showProgressModal = ref(false)
--- 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 && isAdmin" class="flex items-center space-x-2">
+			<div v-if="tabIndex == 2 && isAdmin" class="flex items-center gap-x-2">
 				<Badge v-if="childRef?.isDirty" theme="orange">
 					{{ __('Not Saved') }}
 				</Badge>
--- 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>
--- 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"
--- a/frontend/src/pages/Courses/CourseImportModal.vue
+++ b/frontend/src/pages/Courses/CourseImportModal.vue
@@ -59,7 +59,7 @@
 					class="h-[120px] flex items-center justify-center bg-surface-gray-1 border border-dashed border-outline-gray-3 rounded-md"
 				>
 					<div
-						class="w-fit bg-surface-white border rounded-md p-2 flex items-center justify-between items-center space-x-4 mx-5"
+						class="w-fit bg-surface-white border rounded-md p-2 flex items-center justify-between gap-x-4 mx-5"
 					>
 						<div class="space-y-2">
 							<div class="font-medium leading-5 text-ink-gray-9">
--- 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 }}
--- a/frontend/src/pages/Courses/Courses.vue
+++ b/frontend/src/pages/Courses/Courses.vue
@@ -19,7 +19,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' : '',
 							]"
 						/>
@@ -36,7 +36,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" />

--- 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>
--- 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>
--- 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,11 +117,11 @@
 						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>
-						<MoveRight class="size-3 stroke-1.5" />
+						<MoveRight class="size-3 stroke-1.5 rtl:rotate-180" />
 					</span>
 				</router-link>
 			</div>
@@ -145,11 +145,11 @@
 						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>
-						<MoveRight class="size-3 stroke-1.5" />
+						<MoveRight class="size-3 stroke-1.5 rtl:rotate-180" />
 					</span>
 				</router-link>
 			</div>
--- 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>
--- 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,11 +86,11 @@
 						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>
-						<MoveRight class="size-3 stroke-1.5" />
+						<MoveRight class="size-3 stroke-1.5 rtl:rotate-180" />
 					</span>
 				</router-link>
 			</div>
@@ -118,11 +118,11 @@
 						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>
-						<MoveRight class="size-3 stroke-1.5" />
+						<MoveRight class="size-3 stroke-1.5 rtl:rotate-180" />
 					</span>
 				</router-link>
 			</div>
--- a/frontend/src/pages/JobApplications.vue
+++ b/frontend/src/pages/JobApplications.vue
@@ -70,7 +70,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"
@@ -100,11 +100,11 @@
 						</ListRow>
 					</ListRows>
 				</ListView>
-				<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="applications.hasNextPage" @click="applications.next()">
 						{{ __('Load More') }}
 					</Button>
-					<div v-if="applications.hasNextPage" class="h-8 border-l"></div>
+					<div v-if="applications.hasNextPage" class="h-8 border-s"></div>
 					<div class="text-ink-gray-5">
 						{{ applications.data?.length }} {{ __('of') }}
 						{{ totalApplications.data }}
--- 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" />
--- 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>
@@ -54,7 +54,7 @@
 						/>
 					</div>
 				</div>
-				<div class="border-l h-[93vh]">
+				<div class="border-s h-[93vh]">
 					<div v-if="jobName != 'new'" class="p-5 space-y-5 border-b">
 						<FormControl
 							v-model="job.status"
--- 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')"
@@ -116,11 +116,11 @@
 			<div v-else class="h-[32vh] lg:h-[50vh] px-5">
 				<EmptyState type="Job Openings" />
 			</div>
-			<div class="flex items-center justify-end space-x-3 border-t pt-3 px-5">
+			<div class="flex items-center justify-end gap-x-3 border-t pt-3 px-5">
 				<Button v-if="jobs.hasNextPage" @click="jobs.next()">
 					{{ __('Load More') }}
 				</Button>
-				<div v-if="jobs.hasNextPage" class="h-8 border-l"></div>
+				<div v-if="jobs.hasNextPage" class="h-8 border-s"></div>
 				<div class="text-ink-gray-5">
 					{{ jobs.data?.length }} {{ __('of') }}
 					{{ jobCount.data }}
--- a/Show More
+++ b/Show More