diff --git a/frontend/src/components/home/AppHeader.vue b/frontend/src/components/home/AppHeader.vue
index 8ebb8ce32..f030d6db6 100644
--- a/frontend/src/components/home/AppHeader.vue
+++ b/frontend/src/components/home/AppHeader.vue
@@ -157,7 +157,7 @@ $user-dropdown-width-mobile: 5rem;
 
 	position: fixed;
 	top: 0;
-	left: 0;
+	inset-inline-start: 0;
 	right: 0;
 
 	display: flex;
@@ -252,7 +252,7 @@ $user-dropdown-width-mobile: 5rem;
 }
 
 .navbar-end {
-	margin-left: 0;
+	margin-left: 0; // overrides bulma core styles
 	margin-inline-start: auto;
 	flex: 0 0 auto;
 	display: flex;
diff --git a/frontend/src/components/home/ContentAuth.vue b/frontend/src/components/home/ContentAuth.vue
index b590e0b5e..57f935ffc 100644
--- a/frontend/src/components/home/ContentAuth.vue
+++ b/frontend/src/components/home/ContentAuth.vue
@@ -138,7 +138,7 @@ projectStore.loadAllProjects()
 	
 	[dir="rtl"] & {
 		right: auto;
-		left: 0.5rem;
+		inset-inline-start: 0.5rem;
 	}
 	width: 3rem;
 	height: 3rem;
@@ -208,7 +208,7 @@ projectStore.loadAllProjects()
 	position: fixed;
 	top: 0;
 	bottom: 0;
-	left: 0;
+	inset-inline-start: 0;
 	right: 0;
 	height: 100vh;
 	width: 100vw;
@@ -231,7 +231,7 @@ projectStore.loadAllProjects()
 	
 	[dir="rtl"] & {
 		right: auto;
-		left: 1rem;
+		inset-inline-start: 1rem;
 	}
 
 	color: var(--grey-500);
diff --git a/frontend/src/components/home/MenuButton.vue b/frontend/src/components/home/MenuButton.vue
index 1fdc3e2a4..dfc991581 100644
--- a/frontend/src/components/home/MenuButton.vue
+++ b/frontend/src/components/home/MenuButton.vue
@@ -38,7 +38,7 @@ $size: $lineWidth + 1rem;
 		position: absolute;
 		height: 3px;
 		width: $lineWidth;
-		left: 50%;
+		inset-inline-start: 50%;
 		transform: $transformX;
 		background-color: var(--grey-400);
 		border-radius: 2px;
diff --git a/frontend/src/components/home/Navigation.vue b/frontend/src/components/home/Navigation.vue
index 0a411fa8c..ebf0690b3 100644
--- a/frontend/src/components/home/Navigation.vue
+++ b/frontend/src/components/home/Navigation.vue
@@ -158,13 +158,13 @@ const savedFilterProjects = computed(() => projectStore.savedFilterProjects)
 	position: fixed;
 	top: $navbar-height;
 	bottom: 0;
-	left: 0;
+	inset-inline-start: 0;
 	transform: translateX(-100%);
 	width: $navbar-width;
 	overflow-y: auto;
 
 	[dir="rtl"] & {
-		left: auto;
+		inset-inline-start: auto;
 		right: 0;
 		transform: translateX(100%);
 	}
diff --git a/frontend/src/components/input/Reactions.vue b/frontend/src/components/input/Reactions.vue
index 6cd651bb3..877da4266 100644
--- a/frontend/src/components/input/Reactions.vue
+++ b/frontend/src/components/input/Reactions.vue
@@ -111,7 +111,7 @@ function toggleEmojiPicker() {
 		const left = rect.left - container.left + rect.width
 
 		emojiPickerPosition.value = {
-			left: left === 0 ? undefined : left,
+			'inset-inline-start': left === 0 ? undefined : left,
 		}
 	}
 
@@ -163,7 +163,7 @@ async function toggleReaction(value: string) {
 				v-if="showEmojiPicker"
 				ref="emojiPickerRef"
 				class="emoji-picker"
-				:style="{left: emojiPickerPosition?.left + 'px'}"
+				:style="{'inset-inline-start': emojiPickerPosition?.left + 'px'}"
 				data-source="/emojis.json"
 				:is-dark="isDark"
 				@emojiClick="detail => addReaction(detail.unicode)"
diff --git a/frontend/src/components/input/editor/TipTap.vue b/frontend/src/components/input/editor/TipTap.vue
index 3038ba669..2d0bfac89 100644
--- a/frontend/src/components/input/editor/TipTap.vue
+++ b/frontend/src/components/input/editor/TipTap.vue
@@ -927,7 +927,7 @@ watch(
 			z-index: 2;
 			position: absolute;
 			content: '';
-			left: 0;
+			inset-inline-start: 0;
 			right: 0;
 			top: 0;
 			bottom: 0;
diff --git a/frontend/src/components/misc/Dropdown.vue b/frontend/src/components/misc/Dropdown.vue
index 8a6705a8d..a744e74d1 100644
--- a/frontend/src/components/misc/Dropdown.vue
+++ b/frontend/src/components/misc/Dropdown.vue
@@ -98,7 +98,7 @@ onClickOutside(dropdown, (e) => {
 	top: 100%;
 	z-index: 20;
 	display: block;
-	left: auto;
+	inset-inline-start: auto;
 	right: 0;
 }
 
diff --git a/frontend/src/components/misc/Loading.vue b/frontend/src/components/misc/Loading.vue
index 4ae900a8b..c96b35d46 100644
--- a/frontend/src/components/misc/Loading.vue
+++ b/frontend/src/components/misc/Loading.vue
@@ -34,7 +34,7 @@ withDefaults(defineProps<{
 			width: 3rem;
 			height: 3rem;
 			top: calc(50% - 1.5rem);
-			left: calc(50% - 1.5rem);
+			inset-inline-start: calc(50% - 1.5rem);
 			border-width: 3px;
 		}
 	}
diff --git a/frontend/src/components/misc/Modal.vue b/frontend/src/components/misc/Modal.vue
index 92b0a44e9..e717bcb08 100644
--- a/frontend/src/components/misc/Modal.vue
+++ b/frontend/src/components/misc/Modal.vue
@@ -131,7 +131,7 @@ $modal-width: 1024px;
 	position: fixed;
 	z-index: 4000;
 	top: 0;
-	left: 0;
+	inset-inline-start: 0;
 	width: 100%;
 	height: 100%;
 	background-color: rgba(0, 0, 0, .8);
@@ -153,7 +153,7 @@ $modal-width: 1024px;
 	text-align: center;
 	position: absolute;
 	top: 50%;
-	left: 50%;
+	inset-inline-start: 50%;
 	transform: translate(-50%, -50%);
 
 	@media screen and (max-width: $tablet) {
diff --git a/frontend/src/components/misc/NoAuthWrapper.vue b/frontend/src/components/misc/NoAuthWrapper.vue
index db7a684b8..eb986f3e6 100644
--- a/frontend/src/components/misc/NoAuthWrapper.vue
+++ b/frontend/src/components/misc/NoAuthWrapper.vue
@@ -118,7 +118,7 @@ useTitle(() => title.value)
 			content: '';
 			position: absolute;
 			top: 0;
-			left: 0;
+			inset-inline-start: 0;
 			right: 0;
 			bottom: 0;
 			background-color: rgba(0, 0, 0, .2);
diff --git a/frontend/src/components/misc/Ready.vue b/frontend/src/components/misc/Ready.vue
index a1c845160..918ee8bd3 100644
--- a/frontend/src/components/misc/Ready.vue
+++ b/frontend/src/components/misc/Ready.vue
@@ -82,7 +82,7 @@ const baseStore = useBaseStore()
 	flex-direction: column;
 	position: fixed;
 	top: 0;
-	left: 0;
+	inset-inline-start: 0;
 	bottom: 0;
 	right: 0;
 	background: var(--grey-100);
diff --git a/frontend/src/components/project/partials/ProjectCard.vue b/frontend/src/components/project/partials/ProjectCard.vue
index a010dc311..407a1b93a 100644
--- a/frontend/src/components/project/partials/ProjectCard.vue
+++ b/frontend/src/components/project/partials/ProjectCard.vue
@@ -118,7 +118,7 @@ const textOnlyDescription = computed(() => {
 	top: 0;
 	right: 0;
 	bottom: 0;
-	left: 0;
+	inset-inline-start: 0;
 }
 
 .is-archived {
diff --git a/frontend/src/components/project/views/ProjectKanban.vue b/frontend/src/components/project/views/ProjectKanban.vue
index 9ba259f19..fed8dcad8 100644
--- a/frontend/src/components/project/views/ProjectKanban.vue
+++ b/frontend/src/components/project/views/ProjectKanban.vue
@@ -843,7 +843,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 			top: 0.25rem;
 			right: 0.5rem;
 			bottom: 0.25rem;
-			left: 0.5rem;
+			inset-inline-start: 0.5rem;
 			border: 3px dashed var(--grey-300);
 			border-radius: $radius;
 		}
diff --git a/frontend/src/components/tasks/partials/AssigneeList.vue b/frontend/src/components/tasks/partials/AssigneeList.vue
index d3ed5d253..26a4943e4 100644
--- a/frontend/src/components/tasks/partials/AssigneeList.vue
+++ b/frontend/src/components/tasks/partials/AssigneeList.vue
@@ -80,7 +80,7 @@ defineEmits<{
 .remove-assignee {
 	position: absolute;
 	top: 4px;
-	left: 2px;
+	inset-inline-start: 2px;
 	color: var(--danger);
 	background: var(--white);
 	padding: 0 4px;
diff --git a/frontend/src/components/tasks/partials/Attachments.vue b/frontend/src/components/tasks/partials/Attachments.vue
index e6aa4743c..7a1cfa63f 100644
--- a/frontend/src/components/tasks/partials/Attachments.vue
+++ b/frontend/src/components/tasks/partials/Attachments.vue
@@ -353,7 +353,7 @@ async function setCoverImage(attachment: IAttachment | null) {
 	position: fixed;
 	background: hsla(var(--grey-100-hsl), 0.8);
 	top: 0;
-	left: 0;
+	inset-inline-start: 0;
 	bottom: 0;
 	right: 0;
 	z-index: 4001; // modal z-index is 4000
@@ -367,7 +367,7 @@ async function setCoverImage(attachment: IAttachment | null) {
 .drop-hint {
 	position: absolute;
 	bottom: 0;
-	left: 0;
+	inset-inline-start: 0;
 	right: 0;
 
 	.icon {
diff --git a/frontend/src/components/tasks/partials/DeferTask.vue b/frontend/src/components/tasks/partials/DeferTask.vue
index f8680c242..ad2e228aa 100644
--- a/frontend/src/components/tasks/partials/DeferTask.vue
+++ b/frontend/src/components/tasks/partials/DeferTask.vue
@@ -139,7 +139,7 @@ $defer-task-max-width: 350px + 100px;
 	max-width: $defer-task-max-width;
 
 	@media screen and (max-width: ($defer-task-max-width)) {
-		left: .5rem;
+		inset-inline-start: .5rem;
 		right: .5rem;
 		max-width: 100%;
 		width: calc(100vw - 1rem - 2rem);
diff --git a/frontend/src/components/tasks/partials/KanbanCard.vue b/frontend/src/components/tasks/partials/KanbanCard.vue
index 3081d452f..3426c9beb 100644
--- a/frontend/src/components/tasks/partials/KanbanCard.vue
+++ b/frontend/src/components/tasks/partials/KanbanCard.vue
@@ -231,7 +231,7 @@ $task-background: var(--white);
 		width: 1.5rem;
 		height: 1.5rem;
 		top: calc(50% - .75rem);
-		left: calc(50% - .75rem);
+		inset-inline-start: calc(50% - .75rem);
 		border-width: 2px;
 	}
 
diff --git a/frontend/src/components/tasks/partials/SingleTaskInProject.vue b/frontend/src/components/tasks/partials/SingleTaskInProject.vue
index 45646c53a..af9cb697e 100644
--- a/frontend/src/components/tasks/partials/SingleTaskInProject.vue
+++ b/frontend/src/components/tasks/partials/SingleTaskInProject.vue
@@ -541,7 +541,7 @@ defineExpose({
 
 	&.loader-container.is-loading:after {
 		top: calc(50% - 1rem);
-		left: calc(50% - 1rem);
+		inset-inline-start: calc(50% - 1rem);
 		width: 2rem;
 		height: 2rem;
 		border-left-color: var(--grey-300);
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index fce6ea9a0..2775f775c 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -31,7 +31,10 @@ const router = createRouter({
 		}
 
 		// Otherwise just scroll to the top
-		return {left: 0, top: 0}
+		return {
+			'inset-inline-start': 0,
+			top: 0,
+		}
 	},
 	routes: [
 		{
diff --git a/frontend/src/styles/theme/loading.scss b/frontend/src/styles/theme/loading.scss
index 5389bbf0a..9f01acce6 100644
--- a/frontend/src/styles/theme/loading.scss
+++ b/frontend/src/styles/theme/loading.scss
@@ -8,7 +8,7 @@
     @include loader;
     position: absolute;
     top: calc(50% - 2.5rem);
-    left: calc(50% - 2.5rem);
+    inset-inline-start: calc(50% - 2.5rem);
     width: 5rem;
     height: 5rem;
     border-width: 0.25rem;
@@ -19,7 +19,7 @@
       width: 1.5rem;
       height: 1.5rem;
       top: calc(50% - .75rem);
-      left: calc(50% - .75rem);
+      inset-inline-start: calc(50% - .75rem);
       border-width: 2px;
     }
   }