diff --git a/frontend/src/components/Assignment.vue b/frontend/src/components/Assignment.vue
index 8740b9cd..b0be62e5 100644
--- 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>
diff --git a/frontend/src/components/AudioBlock.vue b/frontend/src/components/AudioBlock.vue
index 6291d019..66502ffc 100644
--- 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" />
diff --git a/frontend/src/components/CommandPalette/CommandPalette.vue b/frontend/src/components/CommandPalette/CommandPalette.vue
index a32cbb00..616317e7 100644
--- 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') }}
diff --git a/frontend/src/components/CommandPalette/CommandPaletteGroup.vue b/frontend/src/components/CommandPalette/CommandPaletteGroup.vue
index 715b53ea..a9173444 100644
--- 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"
diff --git a/frontend/src/components/Common/DateRange.vue b/frontend/src/components/Common/DateRange.vue
index 28abdc7e..4d82cc02 100644
--- 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>
diff --git a/frontend/src/components/ContactUsEmail.vue b/frontend/src/components/ContactUsEmail.vue
index 422ba847..39988255 100644
--- 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>
diff --git a/frontend/src/components/Controls/Autocomplete.vue b/frontend/src/components/Controls/Autocomplete.vue
index 37c47805..8efb48c0 100644
--- 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" />
diff --git a/frontend/src/components/Controls/ChildTable.vue b/frontend/src/components/Controls/ChildTable.vue
index 55e9fd4d..f34821e7 100644
--- 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>
diff --git a/frontend/src/components/Controls/IconPicker.vue b/frontend/src/components/Controls/IconPicker.vue
index d6791990..03b39045 100644
--- 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"
diff --git a/frontend/src/components/Controls/MultiSelect.vue b/frontend/src/components/Controls/MultiSelect.vue
index 6fd9dcde..4a088e67 100644
--- 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>
diff --git a/frontend/src/components/Controls/Rating.vue b/frontend/src/components/Controls/Rating.vue
index c69946fe..3d008f6d 100644
--- 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)"
 				/>
diff --git a/frontend/src/components/Controls/Uploader.vue b/frontend/src/components/Controls/Uploader.vue
index 9762b81c..1e138e6c 100644
--- 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>
diff --git a/frontend/src/components/CourseCard.vue b/frontend/src/components/CourseCard.vue
index 0e63c036..7544aafb 100644
--- 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>
diff --git a/frontend/src/components/CourseCardOverlay.vue b/frontend/src/components/CourseCardOverlay.vue
index faa7d889..309d1783 100644
--- 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>
diff --git a/frontend/src/components/CourseOutline.vue b/frontend/src/components/CourseOutline.vue
index 68de0c7f..c8f577ad 100644
--- 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,
@@ -54,12 +54,12 @@
 									class="h-4 w-4 text-ink-gray-9 stroke-1"
 								/>
 								<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="{
diff --git a/frontend/src/components/CourseReviews.vue b/frontend/src/components/CourseReviews.vue
index 4ebb5c5a..bb29c241 100644
--- 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"
diff --git a/frontend/src/components/DesktopLayout.vue b/frontend/src/components/DesktopLayout.vue
index caef6920..0325034c 100644
--- 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">
diff --git a/frontend/src/components/DiscussionReplies.vue b/frontend/src/components/DiscussionReplies.vue
index 6911a107..398c3145 100644
--- 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>
diff --git a/frontend/src/components/Discussions.vue b/frontend/src/components/Discussions.vue
index 16a0cbaf..1fa6c22e 100644
--- 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) }}
diff --git a/frontend/src/components/InstallPrompt.vue b/frontend/src/components/InstallPrompt.vue
index ab913feb..0790ba43 100644
--- 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>
diff --git a/frontend/src/components/JobCard.vue b/frontend/src/components/JobCard.vue
index a910df41..f725ecf5 100644
--- 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>
diff --git a/frontend/src/components/LessonHelp.vue b/frontend/src/components/LessonHelp.vue
index 80832ed1..c42a191b 100644
--- 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>
diff --git a/frontend/src/components/MobileLayout.vue b/frontend/src/components/MobileLayout.vue
index 8aa5a5dc..ca4dbccc 100644
--- 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"
diff --git a/frontend/src/components/Modals/AssignmentForm.vue b/frontend/src/components/Modals/AssignmentForm.vue
index 01bd32ad..424e21f9 100644
--- 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',
diff --git a/frontend/src/components/Modals/ChapterModal.vue b/frontend/src/components/Modals/ChapterModal.vue
index 4fdc870e..178d8958 100644
--- 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>
diff --git a/frontend/src/components/Modals/EditCoverImage.vue b/frontend/src/components/Modals/EditCoverImage.vue
index c51b7b2f..0028d7c7 100644
--- 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"
diff --git a/frontend/src/components/Modals/EditProfile.vue b/frontend/src/components/Modals/EditProfile.vue
index d38ad699..99e87776 100644
--- 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>
diff --git a/frontend/src/components/Modals/EvaluationModal.vue b/frontend/src/components/Modals/EvaluationModal.vue
index afb1916d..86bdd8db 100644
--- 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') }}
diff --git a/frontend/src/components/Modals/Event.vue b/frontend/src/components/Modals/Event.vue
index c5577bb5..067b9179 100644
--- 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'"
diff --git a/frontend/src/components/Modals/JobApplicationModal.vue b/frontend/src/components/Modals/JobApplicationModal.vue
index b5124596..432af5c0 100644
--- 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">
diff --git a/frontend/src/components/Modals/LiveClassAttendance.vue b/frontend/src/components/Modals/LiveClassAttendance.vue
index 90d9fb26..61041b8c 100644
--- 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>
diff --git a/frontend/src/components/Modals/Question.vue b/frontend/src/components/Modals/Question.vue
index 581995e2..3759a9d7 100644
--- 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>
diff --git a/frontend/src/components/Modals/QuizInVideo.vue b/frontend/src/components/Modals/QuizInVideo.vue
index af003e29..eed28fc8 100644
--- 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>
diff --git a/frontend/src/components/Modals/VideoStatistics.vue b/frontend/src/components/Modals/VideoStatistics.vue
index 19929634..5475b1b8 100644
--- 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"
diff --git a/frontend/src/components/NotPermitted.vue b/frontend/src/components/NotPermitted.vue
index 4640dc60..dfa4300a 100644
--- 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>
diff --git a/frontend/src/components/Notes/InlineLessonMenu.vue b/frontend/src/components/Notes/InlineLessonMenu.vue
index 9c0c6a4c..d95b2b8d 100644
--- a/frontend/src/components/Notes/InlineLessonMenu.vue
+++ b/frontend/src/components/Notes/InlineLessonMenu.vue
@@ -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>
diff --git a/frontend/src/components/NumberChartGraph.vue b/frontend/src/components/NumberChartGraph.vue
index 67fdd508..6d49c97b 100644
--- 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 }}
diff --git a/frontend/src/components/Quiz.vue b/frontend/src/components/Quiz.vue
index 84e17442..5267fc32 100644
--- 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">
+		<div v-if="quiz.data.duration" class="flex flex-col gap-x-1 my-4">
 			<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>
@@ -230,7 +230,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)"
@@ -306,7 +306,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)"
@@ -342,7 +342,7 @@
 					)
 				}}
 			</div>
-			<div class="space-x-2">
+			<div class="flex gap-x-2">
 				<Button
 					@click="resetQuiz()"
 					class="mt-2"
diff --git a/frontend/src/components/Settings/BadgeAssignments.vue b/frontend/src/components/Settings/BadgeAssignments.vue
index 663d5214..eada0eae 100644
--- 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 }">
diff --git a/frontend/src/components/Settings/BadgeForm.vue b/frontend/src/components/Settings/BadgeForm.vue
index 0d693e89..779bc026 100644
--- 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>
diff --git a/frontend/src/components/Settings/Badges.vue b/frontend/src/components/Settings/Badges.vue
index 4d9e09b0..6d6c0e3b 100644
--- 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 }">
diff --git a/frontend/src/components/Settings/BrandSettings.vue b/frontend/src/components/Settings/BrandSettings.vue
index dc28b0e4..87e44690 100644
--- 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')"
diff --git a/frontend/src/components/Settings/Categories.vue b/frontend/src/components/Settings/Categories.vue
index bcf66677..bbe4392d 100644
--- 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"
diff --git a/frontend/src/components/Settings/Coupons/CouponDetails.vue b/frontend/src/components/Settings/Coupons/CouponDetails.vue
index 83d82764..14df55bf 100644
--- 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>
diff --git a/frontend/src/components/Settings/Coupons/CouponItems.vue b/frontend/src/components/Settings/Coupons/CouponItems.vue
index 967ae390..9c928ddf 100644
--- 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">
diff --git a/frontend/src/components/Settings/Coupons/CouponList.vue b/frontend/src/components/Settings/Coupons/CouponList.vue
index ec32d500..2e7bf5ae 100644
--- 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>
diff --git a/frontend/src/components/Settings/EmailTemplates.vue b/frontend/src/components/Settings/EmailTemplates.vue
index 3ec0023d..82312c27 100644
--- 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>
diff --git a/frontend/src/components/Settings/Evaluators.vue b/frontend/src/components/Settings/Evaluators.vue
index 8e4ded97..f6954d4e 100644
--- 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
diff --git a/frontend/src/components/Settings/GoogleMeetSettings.vue b/frontend/src/components/Settings/GoogleMeetSettings.vue
index 2ab59ada..dce671f9 100644
--- 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 }">
diff --git a/frontend/src/components/Settings/Members.vue b/frontend/src/components/Settings/Members.vue
index 8d84fb12..e366ffa7 100644
--- 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" />
diff --git a/frontend/src/components/Settings/PaymentGatewayDetails.vue b/frontend/src/components/Settings/PaymentGatewayDetails.vue
index b6d5cb0d..8ae16e42 100644
--- 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>
diff --git a/frontend/src/components/Settings/PaymentGateways.vue b/frontend/src/components/Settings/PaymentGateways.vue
index 9e09d384..a17e3da8 100644
--- 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 }">
diff --git a/frontend/src/components/Settings/SettingDetails.vue b/frontend/src/components/Settings/SettingDetails.vue
index d5d83d59..3166582e 100644
--- 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="gap-x-2">
 					<Badge
 						v-if="data.isDirty"
 						:label="__('Not Saved')"
diff --git a/frontend/src/components/Settings/SettingFields.vue b/frontend/src/components/Settings/SettingFields.vue
index 11a9a3f3..3e6c13f0 100644
--- 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>
diff --git a/frontend/src/components/Settings/Transactions/TransactionDetails.vue b/frontend/src/components/Settings/Transactions/TransactionDetails.vue
index d7166f29..9297e64c 100644
--- 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 &&
diff --git a/frontend/src/components/Settings/Transactions/TransactionList.vue b/frontend/src/components/Settings/Transactions/TransactionList.vue
index f53f87a0..f41fc8da 100644
--- 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')"
@@ -55,7 +55,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 }">
diff --git a/frontend/src/components/Settings/ZoomSettings.vue b/frontend/src/components/Settings/ZoomSettings.vue
index 9c4c2d8d..cb9dfb16 100644
--- 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 }">
diff --git a/frontend/src/components/Sidebar/AppSidebar.vue b/frontend/src/components/Sidebar/AppSidebar.vue
index 37d8fba8..9d0e6f4f 100644
--- 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"
+		class="flex h-full flex-col justify-between transition-all duration-300 ease-in-out border-e bg-surface-menu-bar"
 		: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
@@ -45,7 +45,7 @@
 								:class="{ 'rotate-90': !sidebarStore.isWebpagesCollapsed }"
 							/>
 						</span>
-						<span class="ml-2">
+						<span class="ms-2">
 							{{ __('More') }}
 						</span>
 					</div>
@@ -159,12 +159,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
diff --git a/frontend/src/components/Sidebar/SidebarLink.vue b/frontend/src/components/Sidebar/SidebarLink.vue
index adb29aa0..c552ab74 100644
--- 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']"
diff --git a/frontend/src/components/Sidebar/UserDropdown.vue b/frontend/src/components/Sidebar/UserDropdown.vue
index 54e821d4..560d7481 100644
--- 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" />
diff --git a/frontend/src/components/Tags.vue b/frontend/src/components/Tags.vue
index c48d60bd..85033b57 100644
--- 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>
diff --git a/frontend/src/components/UnsplashImageBrowser.vue b/frontend/src/components/UnsplashImageBrowser.vue
index f76e2f99..1375b58d 100644
--- 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"
diff --git a/frontend/src/components/UpcomingEvaluations.vue b/frontend/src/components/UpcomingEvaluations.vue
index 973340b6..51e1a55e 100644
--- 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>
diff --git a/frontend/src/components/VideoBlock.vue b/frontend/src/components/VideoBlock.vue
index 59d3dbf4..50eb6cd9 100644
--- 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"