diff --git a/src/managers/FileManager/FileManager.vue b/src/managers/FileManager/FileManager.vue
index af56e74db..e41b73e07 100644
--- a/src/managers/FileManager/FileManager.vue
+++ b/src/managers/FileManager/FileManager.vue
@@ -12,7 +12,7 @@
 				</p>
 			</template>
 			<template #top-controls>
-				<div class="flex space-x-2">
+				<div class="flex gap-x-2">
 					<PkpButton
 						v-for="action in fileManagerStore.topActions"
 						:key="action.name"
diff --git a/src/managers/GalleyManager/GalleyManager.vue b/src/managers/GalleyManager/GalleyManager.vue
index e19c7251e..229f28a93 100644
--- a/src/managers/GalleyManager/GalleyManager.vue
+++ b/src/managers/GalleyManager/GalleyManager.vue
@@ -29,7 +29,7 @@
 			</TableRow>
 		</TableBody>
 		<template v-if="galleyManagerStore.bottomActions.length" #bottom-controls>
-			<div class="space-x-y flex">
+			<div class="flex gap-x-2">
 				<component
 					:is="Components[action.component] || action.component"
 					v-bind="action.props || {}"
diff --git a/src/managers/ReviewerManager/ReviewerManager.vue b/src/managers/ReviewerManager/ReviewerManager.vue
index cecfc1f8d..143d447e4 100644
--- a/src/managers/ReviewerManager/ReviewerManager.vue
+++ b/src/managers/ReviewerManager/ReviewerManager.vue
@@ -10,7 +10,7 @@
 				</h3>
 			</template>
 			<template #top-controls>
-				<div class="flex space-x-2">
+				<div class="flex gap-x-2">
 					<PkpButton
 						v-for="action in reviewerStore.topActions"
 						:key="action.name"
@@ -47,7 +47,7 @@
 						:redacted-for-authors="redactedForAuthors"
 					></ReviewerManagerCellStatus>
 					<TableCell>
-						<span class="flex items-center space-x-2">
+						<span class="flex items-center gap-x-2">
 							<Icon
 								v-for="icon in reviewerStore.getReviewMethodIcons(
 									reviewAssignment,
diff --git a/src/managers/UserInvitationManager/UserInvitationManager.vue b/src/managers/UserInvitationManager/UserInvitationManager.vue
index bf78843a3..6f3a073f3 100755
--- a/src/managers/UserInvitationManager/UserInvitationManager.vue
+++ b/src/managers/UserInvitationManager/UserInvitationManager.vue
@@ -8,7 +8,7 @@
 			</h3>
 		</template>
 		<template #top-controls>
-			<div class="flex space-x-2">
+			<div class="flex gap-x-2">
 				<PkpButton @click="store.createNewInvitation">
 					{{ t('invitation.inviteToRole.btn') }}
 				</PkpButton>
@@ -27,7 +27,7 @@
 		<TableBody>
 			<TableRow v-for="(invitation, index) in store.invitations" :key="index">
 				<TableCell>
-					<span class="space-x-1">
+					<span class="gap-x-1">
 						<span class="align-middle text-lg-normal">
 							{{
 								invitation.userId
diff --git a/src/pages/dashboard/components/DashboardTable/CellReviewAssignmentActivity/CellReviewAssignmentActivityAlert.vue b/src/pages/dashboard/components/DashboardTable/CellReviewAssignmentActivity/CellReviewAssignmentActivityAlert.vue
index 114776c5b..26c900d8a 100644
--- a/src/pages/dashboard/components/DashboardTable/CellReviewAssignmentActivity/CellReviewAssignmentActivityAlert.vue
+++ b/src/pages/dashboard/components/DashboardTable/CellReviewAssignmentActivity/CellReviewAssignmentActivityAlert.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="flex items-center space-x-2">
+	<div class="flex items-center gap-x-2">
 		<div v-if="alert">{{ alert }}</div>
 	</div>
 </template>
diff --git a/src/pages/dashboard/components/DashboardTable/CellSubmissionActivity/CellSubmissionActivityActionAlert.vue b/src/pages/dashboard/components/DashboardTable/CellSubmissionActivity/CellSubmissionActivityActionAlert.vue
index ed550fd73..66189e4c7 100644
--- a/src/pages/dashboard/components/DashboardTable/CellSubmissionActivity/CellSubmissionActivityActionAlert.vue
+++ b/src/pages/dashboard/components/DashboardTable/CellSubmissionActivity/CellSubmissionActivityActionAlert.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="flex items-center space-x-2">
+	<div class="flex items-center gap-x-2">
 		<div v-if="alert">{{ alert }}</div>
 		<PkpButton
 			v-if="actionName"
diff --git a/src/pages/dashboard/components/DashboardTable/CellSubmissionActivity/CellSubmissionActivityReviews.vue b/src/pages/dashboard/components/DashboardTable/CellSubmissionActivity/CellSubmissionActivityReviews.vue
index 55653a10a..62b268b27 100644
--- a/src/pages/dashboard/components/DashboardTable/CellSubmissionActivity/CellSubmissionActivityReviews.vue
+++ b/src/pages/dashboard/components/DashboardTable/CellSubmissionActivity/CellSubmissionActivityReviews.vue
@@ -1,6 +1,6 @@
 <template>
 	<div v-if="reviewAssignments.length">
-		<span class="space-x-1">
+		<span class="flex gap-x-1">
 			<CellSubmissionActivityReviewsItem
 				v-for="reviewAssignment in reviewAssignments"
 				:key="reviewAssignment.id"
diff --git a/src/pages/dashboard/components/ReviewActivityIndicatorPopover/ReviewActivityIndicatorPopover.vue b/src/pages/dashboard/components/ReviewActivityIndicatorPopover/ReviewActivityIndicatorPopover.vue
index ef98662df..c06466d2b 100644
--- a/src/pages/dashboard/components/ReviewActivityIndicatorPopover/ReviewActivityIndicatorPopover.vue
+++ b/src/pages/dashboard/components/ReviewActivityIndicatorPopover/ReviewActivityIndicatorPopover.vue
@@ -6,7 +6,7 @@
 	</div>
 	<div class="flex items-center justify-between">
 		<span class="text-lg-bold">{{ reviewerName }}</span>
-		<span class="space-x-2">
+		<span class="flex gap-x-2">
 			<Icon
 				v-for="icon in reviewMethodIcons"
 				:key="icon"