diff --git a/frontend/src/components/AboutDialog.vue b/frontend/src/components/AboutDialog.vue
index d306110c8..4171c5f56 100644
--- a/frontend/src/components/AboutDialog.vue
+++ b/frontend/src/components/AboutDialog.vue
@@ -13,7 +13,7 @@
             </div>
 
             <Tooltip :text="`${appVersion.commit_message} - ${appVersion.commit_date}`" side="top">
-              <span class="lucide-info size-3.5 text-ink-gray-8 ml-1" />
+              <span class="lucide-info size-3.5 text-ink-gray-8 ms-1" />
             </Tooltip>
           </div>
         </div>
@@ -27,8 +27,8 @@
           target="_blank"
           :href="link.url"
         >
-          <GithubLogo v-if="link.icon === 'github'" class="size-4 mr-2 text-ink-gray-7" />
-          <span v-else-if="link.icon" :class="[link.icon, 'size-4 mr-2 text-ink-gray-7']" />
+          <GithubLogo v-if="link.icon === 'github'" class="size-4 me-2 text-ink-gray-7" />
+          <span v-else-if="link.icon" :class="[link.icon, 'size-4 me-2 text-ink-gray-7']" />
           <span class="text-base text-ink-gray-8">
             {{ link.label }}
           </span>
diff --git a/frontend/src/components/Activity.vue b/frontend/src/components/Activity.vue
index f15517871..80d354b86 100644
--- a/frontend/src/components/Activity.vue
+++ b/frontend/src/components/Activity.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="relative flex items-center text-p-base text-ink-gray-5">
     <div
-      class="mr-3 grid h-7 w-7 shrink-0 place-items-center rounded-full bg-surface-gray-2 text-ink-gray-8"
+      class="me-3 grid h-7 w-7 shrink-0 place-items-center rounded-full bg-surface-gray-2 text-ink-gray-8"
     >
       <span class="lucide-lock h-4 w-4" v-if="activity.action === 'Discussion Closed'" />
       <span class="lucide-unlock h-4 w-4" v-else-if="activity.action === 'Discussion Reopened'" />
diff --git a/frontend/src/components/AppRail/CustomizeSidebarDialog.vue b/frontend/src/components/AppRail/CustomizeSidebarDialog.vue
index 3e2d177e7..4cb677257 100644
--- a/frontend/src/components/AppRail/CustomizeSidebarDialog.vue
+++ b/frontend/src/components/AppRail/CustomizeSidebarDialog.vue
@@ -28,7 +28,7 @@
                   :key="community.name"
                   data-sortable-section="shown"
                   :data-sortable-id="community.name"
-                  class="group relative flex min-h-8 w-full touch-none cursor-grab select-none items-center gap-2 rounded-4 px-1.5 py-0.5 text-left text-ink-gray-8 hover:bg-surface-gray-1"
+                  class="group relative flex min-h-8 w-full touch-none cursor-grab select-none items-center gap-2 rounded-4 px-1.5 py-0.5 text-start text-ink-gray-8 hover:bg-surface-gray-1"
                   :class="getCommunityRowClasses(community.name)"
                   :style="getItemStyle(community.name, 'shown')"
                   @pointerdown="startPointerDrag($event, community.name, 'shown')"
@@ -84,7 +84,7 @@
                 :key="community.name"
                 data-sortable-section="hidden"
                 :data-sortable-id="community.name"
-                class="group relative flex min-h-8 w-full touch-none cursor-grab select-none items-center gap-2 rounded-5 px-1.5 py-0.5 text-left text-ink-gray-8 hover:bg-surface-gray-1"
+                class="group relative flex min-h-8 w-full touch-none cursor-grab select-none items-center gap-2 rounded-5 px-1.5 py-0.5 text-start text-ink-gray-8 hover:bg-surface-gray-1"
                 :class="getCommunityRowClasses(community.name)"
                 :style="getItemStyle(community.name, 'hidden')"
                 @pointerdown="startPointerDrag($event, community.name, 'hidden')"
diff --git a/frontend/src/components/AppSidebar.vue b/frontend/src/components/AppSidebar.vue
index 9778d54c9..fae223af7 100644
--- a/frontend/src/components/AppSidebar.vue
+++ b/frontend/src/components/AppSidebar.vue
@@ -59,7 +59,7 @@
                     row hover/focus while the "…" menu fades in. The group is
                     SidebarItem's root (`group/sidebar-item`).
                   -->
-                <div class="relative mr-1 flex h-7 w-7 shrink-0 items-center justify-end">
+                <div class="relative me-1 flex h-7 w-7 shrink-0 items-center justify-end">
                   <span
                     v-if="getSpaceUnreadCount(space.name) > 0"
                     class="absolute right-1 text-xs text-ink-gray-5 transition-opacity group-hover/sidebar-item:opacity-0 group-focus-within/sidebar-item:opacity-0"
@@ -73,7 +73,7 @@
                         size="xs"
                         icon="lucide-more-horizontal text-ink-gray-5"
                         :label="`${space.title} options`"
-                        class="absolute right-0 -mr-0.5 opacity-0 group-hover/sidebar-item:opacity-100 group-focus-within/sidebar-item:opacity-100"
+                        class="absolute right-0 -me-0.5 opacity-0 group-hover/sidebar-item:opacity-100 group-focus-within/sidebar-item:opacity-100"
                         :class="open ? 'opacity-100' : ''"
                       />
                     </template>
diff --git a/frontend/src/components/AppSidebarLink.vue b/frontend/src/components/AppSidebarLink.vue
index 8ac776f40..5c1ed2287 100644
--- a/frontend/src/components/AppSidebarLink.vue
+++ b/frontend/src/components/AppSidebarLink.vue
@@ -11,7 +11,7 @@
         <slot name="prefix" />
       </span>
       <span class="text-sm"><slot /></span>
-      <div v-if="$slots.suffix" class="!ml-auto">
+      <div v-if="$slots.suffix" class="!ms-auto">
         <slot name="suffix" />
       </div>
     </div>
diff --git a/frontend/src/components/CommandPalette/CommandPalette.vue b/frontend/src/components/CommandPalette/CommandPalette.vue
index 6ea687f43..0f4178acb 100644
--- a/frontend/src/components/CommandPalette/CommandPalette.vue
+++ b/frontend/src/components/CommandPalette/CommandPalette.vue
@@ -6,14 +6,14 @@
       </Dialog.Title>
       <div class="relative">
         <div class="relative">
-          <div class="absolute inset-y-0 left-0 flex items-center pl-4.5">
+          <div class="absolute inset-y-0 left-0 flex items-center ps-4.5">
             <span class="lucide-search h-4 w-4 text-ink-gray-6" />
           </div>
           <input
             ref="inputRef"
             type="text"
             placeholder="Search"
-            class="w-full border-none bg-transparent py-3 pl-11.5 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-11.5 pe-4.5 text-base text-ink-gray-7 placeholder-ink-gray-4 focus:ring-0"
             @input="onInput"
             @keydown="onKeyDown"
             v-model="query"
@@ -85,22 +85,22 @@
             <KeyboardShortcut bg>
               <span class="lucide-arrow-up size-4" />
             </KeyboardShortcut>
-            <span class="ml-1">to navigate</span>
+            <span class="ms-1">to navigate</span>
           </div>
           <div class="flex items-center gap-1">
             <KeyboardShortcut bg>
               <span class="lucide-corner-down-left size-4" />
             </KeyboardShortcut>
-            <span class="ml-1">to select</span>
+            <span class="ms-1">to select</span>
           </div>
           <div class="flex items-center gap-1">
             <KeyboardShortcut bg>esc</KeyboardShortcut>
-            <span class="ml-1">to close</span>
+            <span class="ms-1">to close</span>
           </div>
         </div>
         <div class="flex items-center gap-1">
           <KeyboardShortcut bg ctrl>K</KeyboardShortcut>
-          <span class="ml-1">to open</span>
+          <span class="ms-1">to open</span>
         </div>
       </div>
     </div>
diff --git a/frontend/src/components/CommandPalette/Item.vue b/frontend/src/components/CommandPalette/Item.vue
index da419389e..11551be8d 100644
--- a/frontend/src/components/CommandPalette/Item.vue
+++ b/frontend/src/components/CommandPalette/Item.vue
@@ -4,21 +4,21 @@
   >
     <span
       v-if="typeof item.icon === 'string'"
-      :class="[item.icon, 'mr-3 h-4 w-4 shrink-0 text-ink-gray-6']"
+      :class="[item.icon, 'me-3 h-4 w-4 shrink-0 text-ink-gray-6']"
     />
     <component
       v-else-if="item.icon"
       :is="item.icon"
-      class="mr-3 h-4 w-4 shrink-0 text-ink-gray-6"
+      class="me-3 h-4 w-4 shrink-0 text-ink-gray-6"
     />
     <span
       class="min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap"
       v-html="item.title"
     />
-    <span v-if="item.modified" class="ml-auto shrink-0 whitespace-nowrap pl-2 text-ink-gray-5">
+    <span v-if="item.modified" class="ms-auto shrink-0 whitespace-nowrap ps-2 text-ink-gray-5">
       {{ dayjsLocal(item.modified).fromNow(true) }}
     </span>
-    <span v-else-if="item.suffix" class="ml-auto shrink-0 whitespace-nowrap pl-2 text-ink-gray-5">
+    <span v-else-if="item.suffix" class="ms-auto shrink-0 whitespace-nowrap ps-2 text-ink-gray-5">
       {{ item.suffix }}
     </span>
   </div>
diff --git a/frontend/src/components/CommandPalette/ItemProject.vue b/frontend/src/components/CommandPalette/ItemProject.vue
index e095e4f43..7b83482b2 100644
--- a/frontend/src/components/CommandPalette/ItemProject.vue
+++ b/frontend/src/components/CommandPalette/ItemProject.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex w-full min-w-0 items-center rounded-4 px-2 py-2 text-base" v-if="space">
-    <SpaceIcon :icon="space.icon" class="mr-3 size-4 shrink-0 text-ink-gray-6" />
+    <SpaceIcon :icon="space.icon" class="me-3 size-4 shrink-0 text-ink-gray-6" />
     <span
       v-if="community && !item.hideCommunity"
       class="inline-flex min-w-0 shrink font-medium text-ink-gray-5"
@@ -15,7 +15,7 @@
     <span class="min-w-0 flex-1 truncate font-medium text-ink-gray-7">
       {{ item.title }}&nbsp;
     </span>
-    <span class="lucide-lock ml-0.5 size-3 shrink-0 text-ink-gray-6" v-if="space.is_private" />
+    <span class="lucide-lock ms-0.5 size-3 shrink-0 text-ink-gray-6" v-if="space.is_private" />
   </div>
 </template>
 <script setup lang="ts">
diff --git a/frontend/src/components/Comment.vue b/frontend/src/components/Comment.vue
index c2ca5ed21..079221c59 100644
--- a/frontend/src/components/Comment.vue
+++ b/frontend/src/components/Comment.vue
@@ -15,7 +15,7 @@
       class="flex items-center bg-surface-base pb-2 pt-2 text-md text-ink-gray-8 sm:pt-14 sm:text-base"
       :class="{ 'sticky -top-px z-[1] sm:top-0': !isEditing }"
     >
-      <UserProfileLink class="mr-3" :user="author.name">
+      <UserProfileLink class="me-3" :user="author.name">
         <UserAvatarWithHover class="sm:hidden" size="xl" :user="author.name" />
         <UserAvatarWithHover class="hidden sm:inline-flex" size="lg" :user="author.name" />
       </UserProfileLink>
@@ -48,7 +48,7 @@
       </div>
       <Dropdown
         v-show="!isEditing"
-        class="ml-auto print:hidden"
+        class="ms-auto print:hidden"
         align="end"
         :button="{
           icon: 'lucide-more-horizontal',
diff --git a/frontend/src/components/CommentsArea.vue b/frontend/src/components/CommentsArea.vue
index 8867c160f..73e4bfb0e 100644
--- a/frontend/src/components/CommentsArea.vue
+++ b/frontend/src/components/CommentsArea.vue
@@ -95,11 +95,11 @@
           <div v-if="!showCommentBox" class="sm:-mx-3">
             <button
               type="button"
-              class="flex w-full items-center gap-3 text-left sm:gap-0 sm:rounded-6 sm:bg-surface-elevation-2 sm:px-2 sm:py-2 sm:text-base sm:text-ink-gray-5 sm:hover:bg-surface-elevation-3 sm:shadow-md"
+              class="flex w-full items-center gap-3 text-start sm:gap-0 sm:rounded-6 sm:bg-surface-elevation-2 sm:px-2 sm:py-2 sm:text-base sm:text-ink-gray-5 sm:hover:bg-surface-elevation-3 sm:shadow-md"
               @click="openCommentBox"
             >
               <UserAvatar class="sm:hidden" :user="$user().name" size="xl" />
-              <UserAvatar class="mr-3 hidden sm:inline-block" :user="$user().name" size="sm" />
+              <UserAvatar class="me-3 hidden sm:inline-block" :user="$user().name" size="sm" />
               <span
                 class="flex h-8 min-w-0 flex-1 items-center rounded-5 bg-surface-gray-2 px-3 text-md text-ink-gray-5 sm:hidden"
               >
@@ -110,7 +110,7 @@
           </div>
           <div
             v-else-if="composerMinimized"
-            class="flex cursor-pointer items-center gap-3 text-left focus:outline-none sm:-mx-3 sm:gap-0 sm:rounded-6 sm:bg-surface-elevation-2 sm:py-1 sm:pl-2 sm:pr-1 sm:text-base sm:text-ink-gray-5 sm:shadow-md sm:hover:bg-surface-elevation-3 sm:focus:bg-surface-elevation-3"
+            class="flex cursor-pointer items-center gap-3 text-start focus:outline-none sm:-mx-3 sm:gap-0 sm:rounded-6 sm:bg-surface-elevation-2 sm:py-1 sm:ps-2 sm:pe-1 sm:text-base sm:text-ink-gray-5 sm:shadow-md sm:hover:bg-surface-elevation-3 sm:focus:bg-surface-elevation-3"
             role="button"
             tabindex="0"
             @click="restoreComposer"
@@ -118,7 +118,7 @@
             @keydown.space.prevent="restoreComposer"
           >
             <UserAvatar class="sm:hidden" :user="$user().name" size="xl" />
-            <UserAvatar class="mr-3 hidden sm:inline-block" :user="$user().name" size="sm" />
+            <UserAvatar class="me-3 hidden sm:inline-block" :user="$user().name" size="sm" />
             <span
               class="flex h-8 min-w-0 flex-1 items-center truncate rounded-5 bg-surface-gray-2 px-3 text-md text-ink-gray-5 sm:h-auto sm:bg-transparent sm:px-0 sm:text-base sm:text-ink-gray-6"
             >
diff --git a/frontend/src/components/CommentsList.vue b/frontend/src/components/CommentsList.vue
index 26bf20473..7b6c6f79b 100644
--- a/frontend/src/components/CommentsList.vue
+++ b/frontend/src/components/CommentsList.vue
@@ -55,12 +55,12 @@
         :class="!showCommentBox ? 'cursor-pointer' : ''"
         @click="openCommentBoxFromRow"
       >
-        <div class="mr-3 hidden h-8 items-center sm:flex">
+        <div class="me-3 hidden h-8 items-center sm:flex">
           <UserAvatar :user="$user().name" size="md" />
         </div>
         <div class="relative w-full" v-show="!showCommentBox">
           <button
-            class="flex w-full items-center rounded-5 border px-2 py-2 text-left text-base text-ink-gray-5 hover:border-outline-gray-3"
+            class="flex w-full items-center rounded-5 border px-2 py-2 text-start text-base text-ink-gray-5 hover:border-outline-gray-3"
             @click.stop="openCommentBox"
           >
             Add a comment
@@ -74,7 +74,7 @@
         >
           <div class="mb-4 flex items-center sm:hidden">
             <UserAvatar :user="$user().name" size="sm" />
-            <span class="ml-2 text-base-medium text-ink-gray-8">
+            <span class="ms-2 text-base-medium text-ink-gray-8">
               {{ $user().full_name }}
             </span>
           </div>
diff --git a/frontend/src/components/CoverImage.vue b/frontend/src/components/CoverImage.vue
index 4ba94ff90..800b25913 100644
--- a/frontend/src/components/CoverImage.vue
+++ b/frontend/src/components/CoverImage.vue
@@ -21,7 +21,7 @@
           <div class="rounded-5 py-1 text-xl text-ink-base">Drag image up or down</div>
           <div class="pointer-events-auto" data-cover-control @pointerdown.stop>
             <Button class="mt-2" @click="savePosition">Save position</Button>
-            <Button class="ml-2 mt-2" @click="cancelReposition">Cancel</Button>
+            <Button class="ms-2 mt-2" @click="cancelReposition">Cancel</Button>
           </div>
         </div>
       </div>
diff --git a/frontend/src/components/DevUserSwitcher.vue b/frontend/src/components/DevUserSwitcher.vue
index 565240556..4a981d1b1 100644
--- a/frontend/src/components/DevUserSwitcher.vue
+++ b/frontend/src/components/DevUserSwitcher.vue
@@ -5,7 +5,7 @@
     <PopoverTrigger as-child>
       <button
         type="button"
-        class="fixed bottom-20 left-3 z-[200] flex items-center gap-2 rounded-full border border-outline-gray-2 bg-surface-elevation-2 py-1 pl-1 pr-2.5 shadow-lg transition-opacity hover:opacity-100 sm:bottom-3 sm:left-16"
+        class="fixed bottom-20 left-3 z-[200] flex items-center gap-2 rounded-full border border-outline-gray-2 bg-surface-elevation-2 py-1 ps-1 pe-2.5 shadow-lg transition-opacity hover:opacity-100 sm:bottom-3 sm:left-16"
         :class="isOpen ? 'opacity-100' : 'opacity-60'"
         title="Dev only — switch user"
       >
@@ -44,7 +44,7 @@
               v-for="user in filteredUsers"
               :key="user.name"
               type="button"
-              class="flex w-full items-center gap-2.5 rounded-4 px-2 py-1.5 text-left hover:bg-surface-gray-2 disabled:opacity-60"
+              class="flex w-full items-center gap-2.5 rounded-4 px-2 py-1.5 text-start hover:bg-surface-gray-2 disabled:opacity-60"
               :disabled="Boolean(switchingTo)"
               @click="switchTo(user.name)"
             >
diff --git a/frontend/src/components/DiscussionRow.vue b/frontend/src/components/DiscussionRow.vue
index 5bae3e33b..3a71be5df 100644
--- a/frontend/src/components/DiscussionRow.vue
+++ b/frontend/src/components/DiscussionRow.vue
@@ -22,13 +22,13 @@
             <div class="flex items-center min-w-0">
               <div class="text-ink-gray-5">
                 <Tooltip v-if="discussion.closed_at" text="Closed">
-                  <span class="lucide-lock size-4 p-[1px] mr-1" />
+                  <span class="lucide-lock size-4 p-[1px] me-1" />
                 </Tooltip>
                 <Tooltip v-else-if="discussion.last_post_type == 'GP Comment'" text="Comment">
-                  <span class="lucide-reply size-4 mr-1" />
+                  <span class="lucide-reply size-4 me-1" />
                 </Tooltip>
                 <Tooltip v-else-if="discussion.last_post_type == 'GP Poll'" text="Poll">
-                  <span class="lucide-align-left size-4 p-[1px] mr-1" />
+                  <span class="lucide-align-left size-4 p-[1px] me-1" />
                 </Tooltip>
               </div>
               <div>
@@ -39,7 +39,7 @@
                   &nbsp;in {{ discussion.project_title }}
                   <span
                     v-if="isSpacePrivate(discussion.project)"
-                    class="lucide-lock h-3 w-3 text-ink-gray-6 ml-0.5"
+                    class="lucide-lock h-3 w-3 text-ink-gray-6 ms-0.5"
                   /> </span
                 >:&nbsp;
               </div>
@@ -54,7 +54,7 @@
     <ListCell class="justify-end">
       <div>
         <Tooltip :text="dayjsLocal(discussion.last_post_at).format('D MMM YYYY [at] h:mm A')">
-          <div class="shrink-0 whitespace-nowrap text-sm text-ink-gray-5 text-right">
+          <div class="shrink-0 whitespace-nowrap text-sm text-ink-gray-5 text-end">
             {{ relativeTimestamp(discussion.last_post_at || discussion.creation) }}
           </div>
         </Tooltip>
diff --git a/frontend/src/components/DiscussionView.vue b/frontend/src/components/DiscussionView.vue
index a524893eb..2f381987d 100644
--- a/frontend/src/components/DiscussionView.vue
+++ b/frontend/src/components/DiscussionView.vue
@@ -17,16 +17,16 @@
         <div
           class="sticky -top-px z-[1] flex w-full items-center bg-surface-base pb-2 pt-2 sm:top-0 sm:pt-14"
         >
-          <Avatar size="xl" label="A" class="mr-3 shrink-0 animate-pulse sm:hidden">
+          <Avatar size="xl" label="A" class="me-3 shrink-0 animate-pulse sm:hidden">
             <div></div>
           </Avatar>
-          <Avatar size="lg" label="A" class="mr-3 hidden shrink-0 animate-pulse sm:inline-flex">
+          <Avatar size="lg" label="A" class="me-3 hidden shrink-0 animate-pulse sm:inline-flex">
             <div></div>
           </Avatar>
           <div class="flex flex-col md:block">
             <div class="text-base-medium bg-surface-gray-2 animate-pulse w-20 h-4"></div>
           </div>
-          <div class="ml-auto flex space-x-2">
+          <div class="ms-auto flex space-x-2">
             <Button>
               <template #icon>
                 <div class="animate-pulse w-20 h-8"></div>
@@ -37,8 +37,8 @@
         <div class="flex items-start justify-between space-x-1">
           <h1 class="flex items-center text-4xl-semibold animate-pulse">
             <span class="bg-surface-gray-3 h-5.5 w-32"> </span>
-            <span class="bg-surface-gray-3 h-5.5 w-20 ml-2"> </span>
-            <span class="bg-surface-gray-3 h-5.5 w-40 ml-2"> </span>
+            <span class="bg-surface-gray-3 h-5.5 w-20 ms-2"> </span>
+            <span class="bg-surface-gray-3 h-5.5 w-40 ms-2"> </span>
           </h1>
         </div>
       </div>
@@ -56,7 +56,7 @@
             class="flex w-full items-center bg-surface-base pb-2 pt-2"
             :class="editingPost ? 'sm:pt-0' : 'sticky -top-px z-[1] sm:top-0 sm:pt-14'"
           >
-            <UserProfileLink class="mr-3" :user="discussion.doc.owner">
+            <UserProfileLink class="me-3" :user="discussion.doc.owner">
               <UserAvatarWithHover class="sm:hidden" size="xl" :user="discussion.doc.owner" />
               <UserAvatarWithHover
                 class="hidden sm:inline-flex"
@@ -81,10 +81,10 @@
                 </time>
               </Tooltip>
             </div>
-            <div class="ml-auto flex space-x-2 print:hidden">
+            <div class="ms-auto flex space-x-2 print:hidden">
               <Dropdown
                 v-if="!readOnlyMode"
-                class="ml-auto"
+                class="ms-auto"
                 align="end"
                 :button="{
                   icon: 'lucide-more-horizontal',
@@ -99,7 +99,7 @@
             <div class="flex items-start justify-between space-x-1">
               <h1 v-if="!editingPost" class="flex items-center text-4xl-semibold" ref="postTitleEl">
                 <Tooltip v-if="discussion.doc.closed_at" text="This discussion is closed">
-                  <span class="lucide-lock mr-2 h-4 w-4 text-ink-gray-6" />
+                  <span class="lucide-lock me-2 h-4 w-4 text-ink-gray-6" />
                 </Tooltip>
                 <span class="text-ink-gray-8">
                   {{ discussion.doc.title }}
@@ -241,7 +241,7 @@
           <template #actions>
             <div class="flex">
               <Button
-                class="ml-auto"
+                class="ms-auto"
                 variant="solid"
                 :loading="discussion.pinDiscussion.loading"
                 @click="
diff --git a/frontend/src/components/ImagePreview.vue b/frontend/src/components/ImagePreview.vue
index 1f38a9078..433a840f2 100644
--- a/frontend/src/components/ImagePreview.vue
+++ b/frontend/src/components/ImagePreview.vue
@@ -4,7 +4,7 @@
       v-if="show"
       class="fixed inset-0 z-20 bg-black-overlay-200 dark:backdrop-filter dark:backdrop-blur-[1px]"
     >
-      <div class="absolute right-0 p-4 text-right">
+      <div class="absolute right-0 p-4 text-end">
         <Button icon="lucide-x" @click="$emit('update:show', false)"> </Button>
       </div>
       <div
diff --git a/frontend/src/components/LastPostReminder.vue b/frontend/src/components/LastPostReminder.vue
index 079c5f1cc..ef0295dbc 100644
--- a/frontend/src/components/LastPostReminder.vue
+++ b/frontend/src/components/LastPostReminder.vue
@@ -3,17 +3,17 @@
     <div class="border flex rounded-5 p-3 border-outline-gray-2 dark:bg-gray-900">
       <div class="flex-1">
         <div class="flex items-center">
-          <span class="lucide-alert-triangle size-4 shrink-0 mr-2.5 text-ink-gray-8" />
+          <span class="lucide-alert-triangle size-4 shrink-0 me-2.5 text-ink-gray-8" />
           <h2 class="text-p-base-medium text-ink-gray-8">You haven't posted in a while</h2>
         </div>
-        <div class="ml-6.5">
+        <div class="ms-6.5">
           <p class="text-ink-gray-6 text-p-base">
             It's been {{ daysSinceLastPost }} days since your last post. Share your thoughts or
             updates to keep the conversation going.
           </p>
         </div>
       </div>
-      <div class="ml-auto">
+      <div class="ms-auto">
         <Button icon="lucide-x" variant="ghost" @click="dismiss" />
       </div>
     </div>
diff --git a/frontend/src/components/ListRowSkeleton.vue b/frontend/src/components/ListRowSkeleton.vue
index c325c4752..129527c52 100644
--- a/frontend/src/components/ListRowSkeleton.vue
+++ b/frontend/src/components/ListRowSkeleton.vue
@@ -8,17 +8,17 @@
       <div class="flex items-center space-x-3">
         <div class="size-10 shrink-0 animate-pulse rounded-full bg-surface-gray-3" />
       </div>
-      <div class="mx-3 min-w-0 flex-1 sm:ml-4 sm:mr-4">
+      <div class="mx-3 min-w-0 flex-1 sm:ms-4 sm:me-4">
         <div class="h-4 w-4/5 max-w-80 animate-pulse rounded-4 bg-surface-gray-3" />
         <div class="mt-2 h-3.5 w-full max-w-[24rem] animate-pulse rounded-4 bg-surface-gray-2" />
       </div>
-      <div class="ml-auto flex shrink-0 flex-col items-end">
+      <div class="ms-auto flex shrink-0 flex-col items-end">
         <div class="h-3 w-10 animate-pulse rounded-4 bg-surface-gray-2" />
         <div class="mt-2 h-4 w-6 animate-pulse rounded-full bg-surface-gray-2" />
       </div>
     </div>
-    <div class="pl-1" v-if="showSeparator">
-      <div class="ml-16 mr-4 h-px border-t border-outline-gray-1 sm:mr-3" />
+    <div class="ps-1" v-if="showSeparator">
+      <div class="ms-16 me-4 h-px border-t border-outline-gray-1 sm:me-3" />
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/MobileListRow.vue b/frontend/src/components/MobileListRow.vue
index 91a3a95bb..aaa830bb9 100644
--- a/frontend/src/components/MobileListRow.vue
+++ b/frontend/src/components/MobileListRow.vue
@@ -1,7 +1,7 @@
 <template>
   <button
     type="button"
-    class="block w-full text-left transition active:bg-surface-gray-2"
+    class="block w-full text-start transition active:bg-surface-gray-2"
     :class="active ? 'bg-surface-gray-2' : ''"
   >
     <!--
@@ -10,10 +10,10 @@
       container leaves the rows top-aligned instead of vertically centered.
     -->
     <span class="flex w-full items-stretch" :class="rowHeightClass">
-      <span class="flex shrink-0 items-center py-2.5 pl-4 pr-3">
+      <span class="flex shrink-0 items-center py-2.5 ps-4 pe-3">
         <slot name="icon" />
       </span>
-      <span class="relative flex min-w-0 flex-1 items-center gap-3 py-2.5 pr-4">
+      <span class="relative flex min-w-0 flex-1 items-center gap-3 py-2.5 pe-4">
         <span
           v-if="border"
           class="pointer-events-none absolute left-0 right-4 top-0 border-t"
diff --git a/frontend/src/components/MobileMoreMenu.vue b/frontend/src/components/MobileMoreMenu.vue
index 027891eb7..93621178a 100644
--- a/frontend/src/components/MobileMoreMenu.vue
+++ b/frontend/src/components/MobileMoreMenu.vue
@@ -25,7 +25,7 @@
 
     <div class="mt-8 space-y-6">
       <section v-for="group in itemGroups" :key="group.label">
-        <div class="mb-2 pl-[18px] text-lg-medium text-ink-gray-5">
+        <div class="mb-2 ps-[18px] text-lg-medium text-ink-gray-5">
           {{ group.label }}
         </div>
         <nav class="overflow-hidden rounded-7 bg-surface-base">
@@ -33,7 +33,7 @@
             v-for="(item, index) in group.items"
             :key="item.label"
             type="button"
-            class="block w-full text-left transition active:bg-surface-gray-2"
+            class="block w-full text-start transition active:bg-surface-gray-2"
             @click="onItemClick(item)"
           >
             <!--
@@ -46,7 +46,7 @@
               <span class="flex w-14 shrink-0 items-center justify-center py-3">
                 <span :class="[item.icon, 'size-5 text-ink-gray-8']" aria-hidden="true" />
               </span>
-              <span class="relative flex min-w-0 flex-1 items-center gap-3 py-3 pr-4">
+              <span class="relative flex min-w-0 flex-1 items-center gap-3 py-3 pe-4">
                 <span
                   v-if="index > 0"
                   class="pointer-events-none absolute left-0 right-4 top-0 border-t"
diff --git a/frontend/src/components/NewTaskDialog/NewTaskDialog.vue b/frontend/src/components/NewTaskDialog/NewTaskDialog.vue
index f1aca14bb..66ff07c42 100644
--- a/frontend/src/components/NewTaskDialog/NewTaskDialog.vue
+++ b/frontend/src/components/NewTaskDialog/NewTaskDialog.vue
@@ -45,7 +45,7 @@
     <template #actions>
       <Button class="w-full relative" variant="solid" @click="onCreateClick">
         Create
-        <div class="absolute right-0 top-0 h-7 pr-2 flex items-center justify-center">
+        <div class="absolute right-0 top-0 h-7 pe-2 flex items-center justify-center">
           <KeyboardShortcut ctrl> Enter </KeyboardShortcut>
         </div>
       </Button>
diff --git a/frontend/src/components/Poll.vue b/frontend/src/components/Poll.vue
index ed201b350..34ab2934a 100644
--- a/frontend/src/components/Poll.vue
+++ b/frontend/src/components/Poll.vue
@@ -12,7 +12,7 @@
     <div
       class="sticky -top-px z-[1] -mx-2 flex items-center bg-surface-base px-2 pb-2 pt-2 text-base text-ink-gray-8 sm:top-0 sm:pt-14"
     >
-      <UserProfileLink class="mr-3" :user="owner.name">
+      <UserProfileLink class="me-3" :user="owner.name">
         <UserAvatarWithHover :user="owner.name" size="lg" />
       </UserProfileLink>
       <div class="md:flex md:items-center">
@@ -28,7 +28,7 @@
           </Tooltip>
         </div>
       </div>
-      <div class="ml-auto flex items-center space-x-2">
+      <div class="ms-auto flex items-center space-x-2">
         <Button
           v-if="!isStopped && !readOnlyMode && canDeletePoll"
           variant="ghost"
@@ -126,7 +126,7 @@
             <div class="text-base text-ink-gray-5">
               {{ option.votes }} {{ option.votes === 1 ? 'vote' : 'votes' }}
             </div>
-            <div class="ml-1 text-base text-ink-gray-5">({{ option.percentage }}%)</div>
+            <div class="ms-1 text-base text-ink-gray-5">({{ option.percentage }}%)</div>
           </div>
           <div class="space-y-2">
             <div class="flex" v-for="voter in option.voters" :key="voter.name">
diff --git a/frontend/src/components/ProfileBento/ProfileBentoCard.vue b/frontend/src/components/ProfileBento/ProfileBentoCard.vue
index 8e67a845f..f0fd78d41 100644
--- a/frontend/src/components/ProfileBento/ProfileBentoCard.vue
+++ b/frontend/src/components/ProfileBento/ProfileBentoCard.vue
@@ -4,7 +4,7 @@
        swallows every space typed into an inline editor inside the card. -->
   <article
     ref="cardElement"
-    class="group relative block w-full min-w-0 overflow-hidden rounded-7 text-left outline-none transition focus:outline-none focus-visible:outline-none"
+    class="group relative block w-full min-w-0 overflow-hidden rounded-7 text-start outline-none transition focus:outline-none focus-visible:outline-none"
     :class="[flow ? '' : 'h-full', cardChromeClass, cardShellClass, dragClass]"
     :style="rootStyle"
     :data-profile-card-id="card.id"
diff --git a/frontend/src/components/ReactionsDesktop.vue b/frontend/src/components/ReactionsDesktop.vue
index fa44ac0a0..c383ba130 100644
--- a/frontend/src/components/ReactionsDesktop.vue
+++ b/frontend/src/components/ReactionsDesktop.vue
@@ -51,7 +51,7 @@
           ]"
           @click="toggleReaction(emoji)"
         >
-          <img v-if="isImageEmoji(emoji)" :src="emoji" alt="" class="mr-1 size-4 object-contain" />
+          <img v-if="isImageEmoji(emoji)" :src="emoji" alt="" class="me-1 size-4 object-contain" />
           <template v-else>{{ emoji }}&nbsp;</template>
           {{ reactions.count }}
         </button>
diff --git a/frontend/src/components/ReactionsMobile.vue b/frontend/src/components/ReactionsMobile.vue
index 6ed6e617c..c9ad318a4 100644
--- a/frontend/src/components/ReactionsMobile.vue
+++ b/frontend/src/components/ReactionsMobile.vue
@@ -26,7 +26,7 @@
           :whileHover="{ scale: 1.03 }"
           :whilePress="{ scale: 1.1 }"
         >
-          <img v-if="isImageEmoji(emoji)" :src="emoji" alt="" class="mr-1 size-4 object-contain" />
+          <img v-if="isImageEmoji(emoji)" :src="emoji" alt="" class="me-1 size-4 object-contain" />
           <template v-else>{{ emoji }}&nbsp;</template>
           {{ reactions.count }}
         </Motion>
@@ -74,7 +74,7 @@
             :exit="{ opacity: 0, y: 0 }"
             :transition="{ type: 'spring', stiffness: 320, damping: 26 }"
           >
-            <div class="mr-2 flex w-14 items-center justify-center gap-1 text-center">
+            <div class="me-2 flex w-14 items-center justify-center gap-1 text-center">
               <img v-if="isImageEmoji(emoji)" :src="emoji" alt="" class="size-6 object-contain" />
               <span v-else class="text-4xl font-[emoji]"> {{ emoji }}</span>
               <span class="text-p-xl text-ink-gray-4"> ({{ reactions.count }}) </span>
diff --git a/frontend/src/components/RevisionsDialog.vue b/frontend/src/components/RevisionsDialog.vue
index 39640f15a..b0e1223fa 100644
--- a/frontend/src/components/RevisionsDialog.vue
+++ b/frontend/src/components/RevisionsDialog.vue
@@ -6,7 +6,7 @@
           <button
             v-for="(revision, index) in orderedRevisions"
             :key="`${revision.creation}-${index}`"
-            class="w-full rounded-5 px-3 py-2 text-left last:border-b-0 transition-colors focus:outline-none focus-visible:ring focus-visible:ring-outline-gray-2"
+            class="w-full rounded-5 px-3 py-2 text-start last:border-b-0 transition-colors focus:outline-none focus-visible:ring focus-visible:ring-outline-gray-2"
             role="option"
             :aria-selected="index === currentRevisionIndex"
             :aria-label="`Revision from ${dayjsLocal(revision.creation).format('LLL')}`"
@@ -27,7 +27,7 @@
       </div>
       <div class="min-w-0">
         <div class="mb-2 flex items-center text-base" v-if="currentRevision && currentAuthor">
-          <UserProfileLink class="mr-3" :user="currentAuthor.name">
+          <UserProfileLink class="me-3" :user="currentAuthor.name">
             <UserAvatar :user="currentAuthor.name" />
           </UserProfileLink>
           <div class="space-y-0.5">
@@ -84,7 +84,7 @@
 
       <div ref="previewRef" class="flex-1 overflow-y-auto px-4 pb-6">
         <div class="mb-3 flex items-center text-sm" v-if="currentRevision && currentAuthor">
-          <UserProfileLink class="mr-3" :user="currentAuthor.name">
+          <UserProfileLink class="me-3" :user="currentAuthor.name">
             <UserAvatar :user="currentAuthor.name" />
           </UserProfileLink>
           <div class="space-y-0.5">
diff --git a/frontend/src/components/RichQuoteExtension/QuoteBacklinksPopover.vue b/frontend/src/components/RichQuoteExtension/QuoteBacklinksPopover.vue
index e945333db..5854dd7f5 100644
--- a/frontend/src/components/RichQuoteExtension/QuoteBacklinksPopover.vue
+++ b/frontend/src/components/RichQuoteExtension/QuoteBacklinksPopover.vue
@@ -14,12 +14,12 @@
         <button
           v-for="item in store.popover.items"
           :key="item.quotingCommentId + item.creation"
-          class="flex w-full items-center gap-2 rounded-4 px-2 py-1.5 text-left hover:bg-surface-gray-2 focus:outline-none focus-visible:ring focus-visible:ring-outline-gray-3"
+          class="flex w-full items-center gap-2 rounded-4 px-2 py-1.5 text-start hover:bg-surface-gray-2 focus:outline-none focus-visible:ring focus-visible:ring-outline-gray-3"
           @click="select(item)"
         >
           <UserAvatar size="sm" :user="item.author" />
           <span class="text-base text-ink-gray-8">{{ fullName(item.author) }}</span>
-          <span class="ml-auto pl-3 text-sm text-ink-gray-5">
+          <span class="ms-auto ps-3 text-sm text-ink-gray-5">
             {{ dayjsLocal(item.creation).fromNow() }}
           </span>
         </button>
diff --git a/frontend/src/components/Settings/MembersSettings.vue b/frontend/src/components/Settings/MembersSettings.vue
index 9d8242316..155f4d1f0 100644
--- a/frontend/src/components/Settings/MembersSettings.vue
+++ b/frontend/src/components/Settings/MembersSettings.vue
@@ -22,7 +22,7 @@
 
       <button
         v-if="pendingInvites.data?.length"
-        class="mt-2 flex w-full items-center justify-between gap-3 rounded-4 bg-surface-gray-2 px-3 py-2 text-left transition-colors hover:bg-surface-gray-3"
+        class="mt-2 flex w-full items-center justify-between gap-3 rounded-4 bg-surface-gray-2 px-3 py-2 text-start transition-colors hover:bg-surface-gray-3"
         @click="showInviteDialog = true"
       >
         <span class="flex items-center gap-2 text-base text-ink-gray-7">
@@ -66,7 +66,7 @@
         <ListRow>
           <ListCell>
             <UserAvatar :user="user.name" size="xl" />
-            <div class="ml-3 min-w-0">
+            <div class="ms-3 min-w-0">
               <div class="truncate text-base text-ink-gray-8">
                 {{ user.full_name }}
               </div>
diff --git a/frontend/src/components/SpaceAccessDialog.vue b/frontend/src/components/SpaceAccessDialog.vue
index fd20bdad2..f45bec92d 100644
--- a/frontend/src/components/SpaceAccessDialog.vue
+++ b/frontend/src/components/SpaceAccessDialog.vue
@@ -39,7 +39,7 @@
               </template>
             </Combobox>
             <Button
-              class="ml-auto w-13 shrink-0"
+              class="ms-auto w-13 shrink-0"
               @click="addMember"
               :loading="spaces.runDocMethod.isLoading(space.name, 'add_member')"
             >
@@ -84,7 +84,7 @@
               @keydown.enter="invite"
             />
             <Button
-              class="ml-auto w-13 shrink-0"
+              class="ms-auto w-13 shrink-0"
               @click="invite"
               :loading="spaces.runDocMethod.isLoading(space.name, 'invite_guest')"
             >
@@ -103,7 +103,7 @@
                   {{ user.pending ? 'Pending invitation' : useUser(user.user).email }}
                 </div>
               </div>
-              <div v-if="canInvite" class="ml-auto flex">
+              <div v-if="canInvite" class="ms-auto flex">
                 <Tooltip :text="user.pending ? 'Delete invite' : 'Remove guest'">
                   <Button
                     :label="user.pending ? 'Delete invite' : 'Remove guest'"
diff --git a/frontend/src/components/SpaceBreadcrumbs.vue b/frontend/src/components/SpaceBreadcrumbs.vue
index bb9a01b12..65bc2982f 100644
--- a/frontend/src/components/SpaceBreadcrumbs.vue
+++ b/frontend/src/components/SpaceBreadcrumbs.vue
@@ -1,10 +1,10 @@
 <template>
   <Breadcrumbs class="space-breadcrumbs" :items="breadcrumbItems">
     <template #prefix="{ item }">
-      <component :is="item.prefix" v-if="item.prefix" class="mr-1.5 size-5 text-ink-gray-6" />
+      <component :is="item.prefix" v-if="item.prefix" class="me-1.5 size-5 text-ink-gray-6" />
     </template>
     <template #suffix="{ item }">
-      <span v-if="item.suffix" :class="[item.suffix, 'ml-1.5 size-3.5 text-ink-gray-6']" />
+      <span v-if="item.suffix" :class="[item.suffix, 'ms-1.5 size-3.5 text-ink-gray-6']" />
     </template>
   </Breadcrumbs>
 </template>
diff --git a/frontend/src/components/TaskDetail.vue b/frontend/src/components/TaskDetail.vue
index 17f1e2efc..157d839f9 100644
--- a/frontend/src/components/TaskDetail.vue
+++ b/frontend/src/components/TaskDetail.vue
@@ -10,7 +10,7 @@
           <input
             type="text"
             placeholder="Title"
-            class="-ml-0.5 w-full rounded-1 border-none p-0.5 text-4xl-semibold bg-surface-base text-ink-gray-8 focus:outline-none focus:ring-2 focus:ring-outline-gray-3"
+            class="-ms-0.5 w-full rounded-1 border-none p-0.5 text-4xl-semibold bg-surface-base text-ink-gray-8 focus:outline-none focus:ring-2 focus:ring-outline-gray-3"
             :readonly="!canEditTask"
             @blur="
               canEditTask
@@ -36,7 +36,7 @@
         </div>
         <TaskDescriptionEditor
           ref="description"
-          editor-class="prose-v3 max-w-none focus-within:ring-2 focus-within:ring-outline-gray-3 rounded-1 p-0.5 -ml-0.5 min-h-[4rem]"
+          editor-class="prose-v3 max-w-none focus-within:ring-2 focus-within:ring-outline-gray-3 rounded-1 p-0.5 -ms-0.5 min-h-[4rem]"
           placeholder="Description"
           :content="task.doc.description"
           :editable="canEditTask"
diff --git a/frontend/src/components/TaskList.vue b/frontend/src/components/TaskList.vue
index 58e432ed5..e953c234a 100644
--- a/frontend/src/components/TaskList.vue
+++ b/frontend/src/components/TaskList.vue
@@ -9,8 +9,8 @@
         <span class="font-medium text-ink-gray-8">
           {{ group.title }}
         </span>
-        <span class="ml-2 text-sm text-ink-gray-5">{{ group.tasks.length }}</span>
-        <span class="ml-auto hidden text-sm text-ink-gray-5 group-hover:inline">
+        <span class="ms-2 text-sm text-ink-gray-5">{{ group.tasks.length }}</span>
+        <span class="ms-auto hidden text-sm text-ink-gray-5 group-hover:inline">
           {{ isOpen[group.title] ? 'Collapse' : 'Expand' }}
         </span>
       </button>
@@ -60,13 +60,13 @@
                   </Dropdown>
                 </Tooltip>
                 <div
-                  class="ml-2.5 overflow-hidden text-ellipsis whitespace-nowrap text-base-medium leading-4 text-ink-gray-8"
+                  class="ms-2.5 overflow-hidden text-ellipsis whitespace-nowrap text-base-medium leading-4 text-ink-gray-8"
                 >
                   {{ d.title }}
                 </div>
               </div>
 
-              <div class="ml-6.5 mt-1.5 flex items-center">
+              <div class="ms-6.5 mt-1.5 flex items-center">
                 <div class="text-base text-ink-gray-5">#{{ d.name }}</div>
                 <div
                   v-if="$route.name != 'ProjectOverview' && d.project"
@@ -88,7 +88,7 @@
                   <div class="px-2 leading-none text-ink-gray-5">&middot;</div>
                   <div class="flex items-center">
                     <span class="lucide-calendar h-3 w-3 text-ink-gray-5" />
-                    <span class="ml-2 whitespace-nowrap text-base text-ink-gray-5">
+                    <span class="ms-2 whitespace-nowrap text-base text-ink-gray-5">
                       {{ dayjsLocal(d.due_date).format('D MMM') }}</span
                     >
                   </div>
@@ -104,7 +104,7 @@
                         'bg-surface-gray-8': d.priority === 'Low',
                       }"
                     ></div>
-                    <span class="ml-2 text-base text-ink-gray-5">
+                    <span class="ms-2 text-base text-ink-gray-5">
                       {{ d.priority }}
                     </span>
                   </div>
diff --git a/frontend/src/components/UnsplashPicker/UnsplashPicker.vue b/frontend/src/components/UnsplashPicker/UnsplashPicker.vue
index 1ae78b709..f188f5b70 100644
--- a/frontend/src/components/UnsplashPicker/UnsplashPicker.vue
+++ b/frontend/src/components/UnsplashPicker/UnsplashPicker.vue
@@ -68,7 +68,7 @@
         <!-- `h-full` on the root, not a cap: the viewport reka gives
              `overflow-y: scroll` is itself `h-full`, which resolves to auto
              inside a box that only has a max-height, and then nothing scrolls. -->
-        <ScrollArea v-else class="h-full" viewport-class="pr-3">
+        <ScrollArea v-else class="h-full" viewport-class="pe-3">
           <!-- Columns rather than a grid: photos keep their own proportions and
                stack with no dead space, which is the only way a wall of mixed
                portrait and landscape shots packs tightly.
diff --git a/frontend/src/pages/Configure/SpaceRow.vue b/frontend/src/pages/Configure/SpaceRow.vue
index 92802b7ca..c1d8dd0e7 100644
--- a/frontend/src/pages/Configure/SpaceRow.vue
+++ b/frontend/src/pages/Configure/SpaceRow.vue
@@ -23,7 +23,7 @@
           <input
             v-model="title"
             aria-label="Space title"
-            class="h-7 min-w-0 flex-1 rounded-4 border border-transparent bg-transparent py-0 pl-1 pr-2 text-base text-ink-gray-8 outline-none ring-0 transition-colors hover:border-outline-gray-2 focus:border-outline-gray-3 focus:ring-0 disabled:cursor-not-allowed disabled:text-ink-gray-6 disabled:hover:border-transparent"
+            class="h-7 min-w-0 flex-1 rounded-4 border border-transparent bg-transparent py-0 ps-1 pe-2 text-base text-ink-gray-8 outline-none ring-0 transition-colors hover:border-outline-gray-2 focus:border-outline-gray-3 focus:ring-0 disabled:cursor-not-allowed disabled:text-ink-gray-6 disabled:hover:border-transparent"
             :disabled="!canEditSpace"
             @blur="saveTitle"
             @keydown.enter.prevent="saveTitle"
diff --git a/frontend/src/pages/Discussions.vue b/frontend/src/pages/Discussions.vue
index 558bd5892..e28f7191f 100644
--- a/frontend/src/pages/Discussions.vue
+++ b/frontend/src/pages/Discussions.vue
@@ -43,7 +43,7 @@
         <template #suffix="{ button }">
           <span
             v-if="feedUnreadCount(String(button.value)) > 0"
-            class="ml-1 text-xs text-ink-gray-5"
+            class="ms-1 text-xs text-ink-gray-5"
           >
             {{ feedUnreadCount(String(button.value)) }}
           </span>
diff --git a/frontend/src/pages/Drafts.vue b/frontend/src/pages/Drafts.vue
index 93f95a5a6..38fa0f926 100644
--- a/frontend/src/pages/Drafts.vue
+++ b/frontend/src/pages/Drafts.vue
@@ -116,7 +116,7 @@
                       <span>{{ draft.space_title }}</span>
                       <span
                         v-if="draft.is_private"
-                        class="lucide-lock h-3 w-3 text-ink-gray-6 ml-0.5"
+                        class="lucide-lock h-3 w-3 text-ink-gray-6 ms-0.5"
                       />
                       <span>:&nbsp;</span>
                     </div>
@@ -129,7 +129,7 @@
             </ListCell>
             <ListCell class="justify-end">
               <Tooltip :text="dayjsLocal(draft.modified).format('D MMM YYYY [at] h:mm A')">
-                <div class="shrink-0 whitespace-nowrap text-sm text-ink-gray-5 text-right">
+                <div class="shrink-0 whitespace-nowrap text-sm text-ink-gray-5 text-end">
                   {{ relativeTimestamp(draft.modified) }}
                 </div>
               </Tooltip>
diff --git a/frontend/src/pages/MobileHome.vue b/frontend/src/pages/MobileHome.vue
index 51571ab46..c94dcc56a 100644
--- a/frontend/src/pages/MobileHome.vue
+++ b/frontend/src/pages/MobileHome.vue
@@ -1,7 +1,7 @@
 <template>
   <PageHeaderMobile title="Communities">
     <template #prefix>
-      <GameplanLogo class="ml-1 size-7 rounded-[7px]" />
+      <GameplanLogo class="ms-1 size-7 rounded-[7px]" />
     </template>
     <template #suffix>
       <Button
diff --git a/frontend/src/pages/Notifications.vue b/frontend/src/pages/Notifications.vue
index 6a0e6dc9e..e5b0ca522 100644
--- a/frontend/src/pages/Notifications.vue
+++ b/frontend/src/pages/Notifications.vue
@@ -99,7 +99,7 @@
                  which can read slightly out of order here — an honest timestamp out of order
                  beats a wrong one in order. -->
             <time
-              class="block shrink-0 whitespace-nowrap text-right text-sm text-ink-gray-5"
+              class="block shrink-0 whitespace-nowrap text-end text-sm text-ink-gray-5"
               :datetime="notification.creation"
             >
               <span class="sm:hidden">{{ shortTimestamp(notification.creation) }}</span>
@@ -108,7 +108,7 @@
               </span>
             </time>
             <div
-              class="mt-1.5 hidden whitespace-nowrap text-right text-sm text-ink-gray-5 sm:block"
+              class="mt-1.5 hidden whitespace-nowrap text-end text-sm text-ink-gray-5 sm:block"
               v-if="notificationLocation(notification)"
             >
               {{ notificationLocation(notification) }}
diff --git a/frontend/src/pages/Onboarding.vue b/frontend/src/pages/Onboarding.vue
index e1d05e4de..c1eb38719 100644
--- a/frontend/src/pages/Onboarding.vue
+++ b/frontend/src/pages/Onboarding.vue
@@ -65,14 +65,14 @@
           <span class="lucide-chevron-down size-4 shrink-0 text-ink-gray-5" />
         </div>
         <div class="px-2 pt-0.5">
-          <div class="flex h-7 items-center pl-2 text-base text-ink-gray-5">Spaces</div>
+          <div class="flex h-7 items-center ps-2 text-base text-ink-gray-5">Spaces</div>
           <div class="mt-0.5">
             <div
-              class="flex h-7 items-center rounded-4 bg-surface-elevation-3 pl-2 text-ink-gray-8 shadow-sm"
+              class="flex h-7 items-center rounded-4 bg-surface-elevation-3 ps-2 text-ink-gray-8 shadow-sm"
             >
               <SpaceIcon v-if="space.icon" :icon="space.icon" class="size-4 shrink-0" />
               <span v-else class="lucide-hash size-4 shrink-0 text-ink-gray-5" />
-              <span class="ml-2 flex-1 truncate text-sm">{{ previewSpaceTitle }}</span>
+              <span class="ms-2 flex-1 truncate text-sm">{{ previewSpaceTitle }}</span>
             </div>
           </div>
         </div>
diff --git a/frontend/src/pages/Page.vue b/frontend/src/pages/Page.vue
index a022a3bc6..9c219407b 100644
--- a/frontend/src/pages/Page.vue
+++ b/frontend/src/pages/Page.vue
@@ -49,7 +49,7 @@
           },
         ]"
       />
-      <div class="ml-2 shrink-0" v-if="page.doc && canEditPage">
+      <div class="ms-2 shrink-0" v-if="page.doc && canEditPage">
         <DropdownMoreOptions align="end" :options="pageActions" />
       </div>
     </PageHeader>
diff --git a/frontend/src/pages/PageGrid.vue b/frontend/src/pages/PageGrid.vue
index 1a145f72f..822549b8d 100644
--- a/frontend/src/pages/PageGrid.vue
+++ b/frontend/src/pages/PageGrid.vue
@@ -49,7 +49,7 @@
                 <div>{{ space?.title }}</div>
               </div>
             </div>
-            <div v-if="!readOnly" class="shrink-0 ml-1 invisible group-hover:visible">
+            <div v-if="!readOnly" class="shrink-0 ms-1 invisible group-hover:visible">
               <Dropdown
                 :button="{
                   icon: 'lucide-more-horizontal',
diff --git a/frontend/src/pages/PersonProfile.vue b/frontend/src/pages/PersonProfile.vue
index 9354b05a2..3edbc6225 100644
--- a/frontend/src/pages/PersonProfile.vue
+++ b/frontend/src/pages/PersonProfile.vue
@@ -13,7 +13,7 @@
             icon="lucide-edit"
             label="Edit profile"
             tooltip="Edit profile"
-            class="ml-1 shrink-0"
+            class="ms-1 shrink-0"
             @click.stop.prevent="showSettingsDialog('Profile')"
           />
         </template>
diff --git a/frontend/src/pages/Search.vue b/frontend/src/pages/Search.vue
index 7f7d7f5d4..13ca020f5 100644
--- a/frontend/src/pages/Search.vue
+++ b/frontend/src/pages/Search.vue
@@ -78,7 +78,7 @@
                     </div>
                     <template #suffix>
                       <span
-                        class="lucide-chevron-down ml-2 h-4 w-4 transition-transform"
+                        class="lucide-chevron-down ms-2 h-4 w-4 transition-transform"
                         :class="{ 'rotate-180': open }"
                       />
                     </template>
@@ -194,7 +194,7 @@
                 </p>
                 <p v-if="searchResponse.summary.corrected_query" class="text-ink-gray-6">
                   <span class="text-ink-gray-5">Searched for:</span>
-                  <span class="ml-1 font-medium text-primary">
+                  <span class="ms-1 font-medium text-primary">
                     {{ searchResponse.summary.corrected_query }}
                   </span>
                 </p>
@@ -252,7 +252,7 @@
                     <span class="px-1 leading-none text-sm text-ink-gray-5">
                       &middot; {{ item.doctype.replace('GP ', '') }}
                     </span>
-                    <div class="ml-auto text-sm text-ink-gray-5">
+                    <div class="ms-auto text-sm text-ink-gray-5">
                       {{ dayjs.unix(item.modified).format('lll') }}
                     </div>
                   </div>
diff --git a/frontend/src/pages/SpacePages.vue b/frontend/src/pages/SpacePages.vue
index fc7f11d51..b49c0493b 100644
--- a/frontend/src/pages/SpacePages.vue
+++ b/frontend/src/pages/SpacePages.vue
@@ -27,7 +27,7 @@
         <template #default>
           <Button>
             <template #prefix>
-              <span class="lucide-arrow-down-up mr-1.5 h-4 w-4 leading-none" />
+              <span class="lucide-arrow-down-up me-1.5 h-4 w-4 leading-none" />
             </template>
             {{
               orderBy === 'title asc'
diff --git a/frontend/src/pages/Teams.vue b/frontend/src/pages/Teams.vue
index d0972778a..435f0526c 100644
--- a/frontend/src/pages/Teams.vue
+++ b/frontend/src/pages/Teams.vue
@@ -9,10 +9,10 @@
       <Links :links="activeCommunities" class="flex items-center py-3 font-medium text-ink-gray-8">
         <template v-slot="{ link: team }">
           <div class="flex w-full items-center">
-            <CommunityImage :community="team" class="mr-2 size-6 shrink-0 bg-surface-gray-1" />
+            <CommunityImage :community="team" class="me-2 size-6 shrink-0 bg-surface-gray-1" />
             <span class="text-xl-medium">{{ team.title }}</span>
-            <span v-if="team.is_private" class="lucide-lock ml-2 h-3 w-3" />
-            <span class="lucide-chevron-right ml-auto h-5 w-5 text-ink-gray-5" />
+            <span v-if="team.is_private" class="lucide-lock ms-2 h-3 w-3" />
+            <span class="lucide-chevron-right ms-auto h-5 w-5 text-ink-gray-5" />
           </div>
         </template>
       </Links>