diff --git a/public/globals.js b/public/globals.js
index 8f6e1d2d0..d3259c4a4 100644
--- a/public/globals.js
+++ b/public/globals.js
@@ -527,13 +527,36 @@ window.pkp = {
 		'submissions.incomplete': 'Incomplete',
 		todo: '##todo##',
 		'user.email': 'Email',
+		'user.emailAddress': 'Email Address',
 		'user.orcid': 'ORCID iD',
 		'user.username': 'Username',
+		'user.password': 'Password',
+		'user.givenName': 'Given Name',
+		'user.familyName': 'Family Name',
+		'user.affiliation': 'Affiliation',
+		'user.country': 'Country',
 		'validator.required': 'This field is required.',
 		'invitation.notification.closeBtn':'View all users',
-		'user.password': 'Password',
 		'invitation.orcid.acceptInvitation.message':'Not verified. You can verify your ORCID iD from your profile section in OJS',
-
+		'userInvitation.emailField.description':'e.g. aeinstein@example.com',
+		'userInvitation.usernameField.description':'e.g. mickeymouse',
+		'userInvitation.orcidField.description':'e.g. 0000-0000-0000-0000',
+		'userInvitation.roleTable.role':'Role',
+		'userInvitation.roleTable.startDate':'Start Date',
+		'userInvitation.roleTable.endDate':'End Date',
+		'userInvitation.roleTable.journalMasthead':'Journal Masthead',
+		'userInvitation.modal.title':'Invitation Sent',
+		'userInvitation.modal.message':'{$email} has been invited to new role in OJS.You can be updated about users on the User and Roles page, your ojs notification and/ or your email',
+		'userInvitation.modal.button':'View All Users',
+		'acceptInvitation.usernameField.description':'It should be 10 characters long and could be a combination of uppercase letters, lowercase letters or numbers',
+		'acceptInvitation.passwordField.description':'It should be 12 characters long and should be a combination of uppercase letters, lowercase letters, numbers and symbols',
+		'acceptInvitation.review.userDetails':'User Details',
+		'acceptInvitation.review.accountDetails':'Account Details',
+		'acceptInvitation.verifyOrcid':'verify ORCID iD',
+		'acceptInvitation.skipVerifyOrcid':'Skip ORCID verification',
+		'acceptInvitation.modal.title':"You've been assigned a new role in OJS",
+		'acceptInvitation.modal.message':'Congratulations on your new role in OJS! You might now have access to new options. If you need assistance navigating the system, please click on the “Help” buttons throughout the interface for guidance',
+		'acceptInvitation.modal.button':'View All Submissions',
 	},
 
 	tinyMCE: {
diff --git a/src/pages/acceptInvitation/AcceptInvitationPage.vue b/src/pages/acceptInvitation/AcceptInvitationPage.vue
index 1b15d7749..47e98c9d7 100644
--- a/src/pages/acceptInvitation/AcceptInvitationPage.vue
+++ b/src/pages/acceptInvitation/AcceptInvitationPage.vue
@@ -1,12 +1,12 @@
 <template>
-	<div class="userInvitation">
+	<div class="acceptInvitation">
 		<AcceptInvitationHeader
 			:page-title="store.pageTitle"
 			:page-title-description="store.pageTitleDescription"
 		/>
 		<Steps
 			v-if="store.steps.length"
-			class="userInvitation__steps"
+			class="acceptInvitation__steps"
 			:current="store.currentStep.id"
 			:started-steps="store.startedSteps"
 			:label="t('invitation.wizard.completeSteps')"
@@ -24,7 +24,7 @@
 				<Panel class="decision__stepPanel">
 					<PanelSection class="decision__stepHeader">
 						<h2>{{ store.stepTitle }}</h2>
-						<p class="error">{{ store.errors.error }}</p>
+						<p class="text-red font-bold">{{ store.errors.error }}</p>
 						<p>{{ step.description }}</p>
 					</PanelSection>
 					<PanelSection v-for="section in step.sections" :key="section.id">
@@ -45,7 +45,7 @@
 				</Panel>
 			</Step>
 		</Steps>
-		<ButtonRow class="panel panel--wide userInvitationForm__footer">
+		<ButtonRow class="panel panel--wide acceptInvitationForm__footer">
 			<PkpButton @click="store.cancel">Cancel</PkpButton>
 			<PkpButton v-if="!store.isOnFirstStep" @click="store.previousStep">
 				Previous
@@ -123,7 +123,7 @@ const acceptInvitationComponents = {
 <style lang="less">
 @import '../../styles/_import';
 
-.userInvitation .app__pageHeading {
+.acceptInvitation .app__pageHeading {
 	display: flex;
 	margin: 2rem 0 0.25rem;
 
@@ -132,21 +132,21 @@ const acceptInvitationComponents = {
 	}
 }
 
-.userInvitation .pkpSteps__buttonWrapper {
+.acceptInvitation .pkpSteps__buttonWrapper {
 	border: @bg-border-light;
 	border-bottom: 0;
 	border-top-left-radius: @radius;
 	border-top-right-radius: @radius;
 }
 
-.userInvitation__submissionDetails,
-.userInvitation__submissionConfiguration {
+.acceptInvitation__submissionDetails,
+.acceptInvitation__submissionConfiguration {
 	font-size: @font-sml;
 	line-height: @line-sml;
 }
 
 // Override the form locale switcher styles
-.userInvitation__stepForm .pkpFormLocales {
+.acceptInvitation__stepForm .pkpFormLocales {
 	border: none;
 	margin-top: -1rem;
 	margin-bottom: 1rem;
@@ -159,12 +159,12 @@ const acceptInvitationComponents = {
 
 // Hide the form footer for each form, since
 // buttons and errors are handled separately
-.userInvitation__stepForm .pkpFormPage__footer {
+.acceptInvitation__stepForm .pkpFormPage__footer {
 	display: none;
 }
 
 // buttons and errors are handled separately
-.userInvitationForm__footer {
+.acceptInvitationForm__footer {
 	padding: 2rem;
 	display: flex;
 	justify-content: flex-end;
@@ -175,8 +175,17 @@ const acceptInvitationComponents = {
 		margin-inline-start: 0.5rem;
 	}
 }
-.error {
-	color: red;
-	font-weight: bold;
+.acceptInvitation__stepHeader {
+	h2 {
+		margin: 0;
+		font-size: @font-large;
+		line-height: @line-large;
+	}
+
+	p {
+		margin: 0.5rem 0 0;
+		font-size: @font-sml;
+		line-height: @line-sml-tight;
+	}
 }
 </style>
diff --git a/src/pages/acceptInvitation/AcceptInvitationPageStore.js b/src/pages/acceptInvitation/AcceptInvitationPageStore.js
index 6b315d130..95eb95d51 100644
--- a/src/pages/acceptInvitation/AcceptInvitationPageStore.js
+++ b/src/pages/acceptInvitation/AcceptInvitationPageStore.js
@@ -1,4 +1,5 @@
 import {defineComponentStore} from '@/utils/defineComponentStore';
+import {useTranslation} from '@/composables/useTranslation';
 import {useFetch} from '@/composables/useFetch';
 import {computed, onMounted, ref, watch} from 'vue';
 import {useUrl} from '@/composables/useUrl';
@@ -8,6 +9,7 @@ export const useAcceptInvitationPageStore = defineComponentStore(
 	'userInvitationPage',
 	(pageInitConfig) => {
 		const {openDialog} = useModal();
+		const {t} = useTranslation();
 
 		/** Accept invitation payload, initial value*/
 		const acceptinvitationPayload = ref({});
@@ -108,6 +110,10 @@ export const useAcceptInvitationPageStore = defineComponentStore(
 			return currentStepIndex.value === steps.value.length - 1;
 		});
 
+		const formSteps = computed(() => {
+			return steps.value.filter((step) => step.type === 'form');
+		});
+
 		/**
 		 * Add a step change to the browser history so the
 		 * user can use the browser's back button
@@ -312,10 +318,11 @@ export const useAcceptInvitationPageStore = defineComponentStore(
 				await fetch();
 				if (data.value) {
 					openDialog({
-						title: 'You have been added as a Section Editor in OJS',
+						title: t('acceptInvitation.modal.title'),
+						message: t('acceptInvitation.modal.message'),
 						actions: [
 							{
-								label: 'Ok',
+								label: t('acceptInvitation.modal.button'),
 								callback: (close) => {
 									close();
 								},
@@ -348,6 +355,7 @@ export const useAcceptInvitationPageStore = defineComponentStore(
 			pageTitleDescription,
 			errors,
 			stepButtonTitle,
+			formSteps,
 
 			//methods
 			nextStep,
diff --git a/src/pages/acceptInvitation/AcceptInvitationReview.vue b/src/pages/acceptInvitation/AcceptInvitationReview.vue
index 00dbe3190..f83c0c759 100644
--- a/src/pages/acceptInvitation/AcceptInvitationReview.vue
+++ b/src/pages/acceptInvitation/AcceptInvitationReview.vue
@@ -1,82 +1,67 @@
 <template>
 	<div>
-		<div v-if="store.userId === null" class="acceptInvitation__reviewPanel">
-			<div class="acceptInvitation__reviewPanel__header">
-				<h3>Account Details</h3>
+		<div v-if="store.userId === null" class="border border-solid border-[#ddd]">
+			<div class="flex items-center px-2 py-4">
+				<h3>{{ t('acceptInvitation.review.accountDetails') }}</h3>
 			</div>
-			<div class="acceptInvitation__reviewPanel__item">
-				<h4 class="acceptInvitation__reviewPanel__item__header">Username</h4>
-				<div class="acceptInvitation__reviewPanel__item__value">
-					{{ store.acceptinvitationPayload.username }}
-				</div>
-				<h4 class="acceptInvitation__reviewPanel__item__header">Password</h4>
-				<div class="acceptInvitation__reviewPanel__item__value">
-					{{ store.acceptinvitationPayload.password }}
-				</div>
+			<div class="p-4">
+				<FormDisplayItemBasic
+					heading-element="h4"
+					:heading="t('user.username')"
+					:value="store.acceptinvitationPayload.username"
+				></FormDisplayItemBasic>
+				<FormDisplayItemBasic
+					heading-element="h4"
+					:heading="t('user.password')"
+					:value="store.acceptinvitationPayload.password"
+				></FormDisplayItemBasic>
 			</div>
 		</div>
-		<div class="acceptInvitation__reviewPanel">
-			<div class="acceptInvitation__reviewPanel__header">
-				<h3>User Details</h3>
+		<div class="border-b border-l border-r border-solid border-[#ddd]">
+			<div class="flex items-center px-2 py-4">
+				<h3>{{ t('acceptInvitation.review.userDetails') }}</h3>
 				<PkpButton
 					v-if="store.userId === null"
-					class="acceptInvitation__reviewPanel__edit"
+					class="ms-auto"
 					@click="store.openStep('userDetails')"
 				>
-					edit
+					{{ t('common.edit') }}
 				</PkpButton>
 			</div>
-			<div class="acceptInvitation__reviewPanel__item">
-				<template v-if="store.userId === null">
-					<h4 class="acceptInvitation__reviewPanel__item__header">Email</h4>
-					<div class="acceptInvitation__reviewPanel__item__value">
-						{{ store.email }}
-					</div>
-				</template>
-				<h4 class="acceptInvitation__reviewPanel__item__header">ORCID ID</h4>
-				<div class="acceptInvitation__reviewPanel__item__value">
-					{{
+			<div class="p-4">
+				<FormDisplayItemBasic
+					heading-element="h4"
+					:heading="t('user.email')"
+					:value="store.email"
+				></FormDisplayItemBasic>
+				<FormDisplayItemBasic
+					heading-element="h4"
+					:heading="t('user.orcid')"
+					:value="
 						store.acceptinvitationPayload.orcid
 							? store.acceptinvitationPayload.orcid
 							: t('invitation.orcid.acceptInvitation.message')
-					}}
-					<Icon
-						v-if="store.acceptinvitationPayload.orcid"
-						icon="orcid"
-						:inline="true"
-					/>
+					"
+				></FormDisplayItemBasic>
+				<Icon
+					v-if="store.acceptinvitationPayload.orcid"
+					icon="orcid"
+					:inline="true"
+				/>
+				<div v-for="step in store.formSteps" :key="step.id">
+					<template v-if="step.id === 'userDetails'">
+						<div v-for="section in step.sections" :key="section.id">
+							<FormDisplay v-bind="section.props.form"></FormDisplay>
+						</div>
+					</template>
 				</div>
-				<template v-if="store.userId === null">
-					<h4 class="acceptInvitation__reviewPanel__item__header">
-						Given Name
-					</h4>
-					<div class="acceptInvitation__reviewPanel__item__value">
-						{{ store.acceptinvitationPayload.givenName }}
-					</div>
-					<h4 class="acceptInvitation__reviewPanel__item__header">
-						Family Name
-					</h4>
-					<div class="acceptInvitation__reviewPanel__item__value">
-						{{ store.acceptinvitationPayload.familyName }}
-					</div>
-					<h4 class="acceptInvitation__reviewPanel__item__header">
-						Affiliation
-					</h4>
-					<div class="acceptInvitation__reviewPanel__item__value">
-						{{ store.acceptinvitationPayload.affiliation }}
-					</div>
-					<h4 class="acceptInvitation__reviewPanel__item__header">Country</h4>
-					<div class="acceptInvitation__reviewPanel__item__value">
-						{{ store.acceptinvitationPayload.country }}
-					</div>
-				</template>
 			</div>
 		</div>
-		<div class="acceptInvitation__reviewPanel">
-			<div class="acceptInvitation__reviewPanel__header">
+		<div class="border-b border-l border-r border-solid border-[#ddd]">
+			<div class="flex items-center px-2 py-4">
 				<h3>Roles</h3>
 			</div>
-			<div class="acceptInvitation__reviewPanel__item">
+			<div class="p-4">
 				<AcceptInvitationUserRoles
 					:rows="store.acceptinvitationPayload.userGroupsToAdd"
 				/>
@@ -87,45 +72,15 @@
 
 <script setup>
 import {defineProps} from 'vue';
+import {useTranslation} from '@/composables/useTranslation';
 import AcceptInvitationUserRoles from './AcceptInvitationUserRoles.vue';
 import {useAcceptInvitationPageStore} from './AcceptInvitationPageStore';
 import Icon from '@/components/Icon/Icon.vue';
 import PkpButton from '@/components/Button/Button.vue';
+import FormDisplay from '@/components/FormDisplay/FormDisplay.vue';
+import FormDisplayItemBasic from '@/components/FormDisplay/FormDisplayItemBasic.vue';
 
 defineProps({});
 const store = useAcceptInvitationPageStore();
+const {t} = useTranslation();
 </script>
-<style>
-.acceptInvitation__reviewPanel__item {
-	padding: 1rem;
-
-	&:last-child {
-		border-bottom: none;
-	}
-
-	.pkpNotification {
-		margin-bottom: 0.5rem;
-	}
-}
-.acceptInvitation__reviewPanel {
-	border: 1px solid #ddd;
-}
-.acceptInvitation__reviewPanel__header {
-	display: flex;
-	align-items: center;
-	padding: 0.5rem 1rem;
-}
-.acceptInvitation__reviewPanel__item__header {
-	margin: 0;
-	font-size: 0.875rem;
-	line-height: 1.5rem;
-}
-.acceptInvitation__reviewPanel__item__value {
-	margin-bottom: 1rem;
-	font-size: 0.875rem;
-	line-height: 1.5rem;
-}
-.acceptInvitation__reviewPanel__edit {
-	margin-inline-start: auto;
-}
-</style>
diff --git a/src/pages/acceptInvitation/AcceptInvitationUserAccountDetails.vue b/src/pages/acceptInvitation/AcceptInvitationUserAccountDetails.vue
index 72124e85d..7ce0ee394 100644
--- a/src/pages/acceptInvitation/AcceptInvitationUserAccountDetails.vue
+++ b/src/pages/acceptInvitation/AcceptInvitationUserAccountDetails.vue
@@ -1,31 +1,35 @@
 <template>
-	<div>
-		<div class="userInvitation__reviewPanel__item">
-			<h4 class="userInvitation__reviewPanel__item__header">Email Address</h4>
-			<div class="userInvitation__reviewPanel__item__value">
-				{{ store.email }}
-			</div>
+	<div class="py-1">
+		<h4 class="text-sm m-0 leading-6">{{ t('user.emailAddress') }}</h4>
+		<div class="text-sm mb-4 leading-6">
+			{{ store.email }}
 		</div>
 	</div>
-	<br />
-	<FieldText
-		:label="t('user.username')"
-		:value="fields.username"
-		name="username"
-		size="large"
-		:all-errors="sectionErrors"
-		@change="updateField"
-	/>
-	<br />
-	<FieldText
-		:label="t('user.password')"
-		:value="fields.password"
-		name="password"
-		input-type="password"
-		size="large"
-		:all-errors="sectionErrors"
-		@change="updateField"
-	/>
+	<div class="my-4">
+		<FieldText
+			:label="t('user.username')"
+			:value="fields.username"
+			:description="t('acceptInvitation.usernameField.description')"
+			name="username"
+			size="large"
+			:all-errors="sectionErrors"
+			@change="updateField"
+		/>
+	</div>
+
+	<div class="my-4">
+		<FieldText
+			:label="t('user.password')"
+			:value="fields.password"
+			:description="t('acceptInvitation.passwordField.description')"
+			name="password"
+			input-type="password"
+			size="large"
+			:all-errors="sectionErrors"
+			@change="updateField"
+		/>
+	</div>
+
 	<div>
 		<FieldShowEnsuringLink
 			primary-locale="en"
@@ -74,21 +78,6 @@ const sectionErrors = computed(() => {
 });
 </script>
 <style lang="less">
-.userInvitation__reviewPanel__item {
-	&:last-child {
-		border-bottom: none;
-	}
-}
-.userInvitation__reviewPanel__item__header {
-	margin: 0;
-	font-size: 0.875rem;
-	line-height: 1.5rem;
-}
-.userInvitation__reviewPanel__item__value {
-	margin-bottom: 1rem;
-	font-size: 0.875rem;
-	line-height: 1.5rem;
-}
 div fieldset {
 	border: none !important;
 }
diff --git a/src/pages/acceptInvitation/AcceptInvitationUserDetailsForms.vue b/src/pages/acceptInvitation/AcceptInvitationUserDetailsForms.vue
index c2d065df3..4b4f0b6ff 100644
--- a/src/pages/acceptInvitation/AcceptInvitationUserDetailsForms.vue
+++ b/src/pages/acceptInvitation/AcceptInvitationUserDetailsForms.vue
@@ -1,16 +1,16 @@
 <template>
 	<div>
-		<div class="userInvitation__reviewPanel__item">
-			<h4 class="userInvitation__reviewPanel__item__header">Email Address</h4>
-			<div class="userInvitation__reviewPanel__item__value">
+		<div class="p-1">
+			<h4 class="text-sm m-0 leading-6">{{ t('user.emailAddress') }}</h4>
+			<div class="text-sm mb-4 leading-6">
 				{{ store.email }}
 			</div>
 		</div>
 	</div>
 	<div>
-		<div class="userInvitation__reviewPanel__item">
-			<h4 class="userInvitation__reviewPanel__item__header">ORCID iD</h4>
-			<div class="userInvitation__reviewPanel__item__value">
+		<div class="p-1">
+			<h4 class="text-sm m-0 leading-6">{{ t('user.orcid') }}</h4>
+			<div class="text-sm mb-4 leading-6">
 				{{
 					store.acceptinvitationPayload.orcid
 						? store.acceptinvitationPayload.orcid
@@ -26,7 +26,7 @@
 	</div>
 	<PkpForm
 		v-bind="userForm"
-		class="userInvitation__stepForm"
+		class="acceptInvitation__stepForm"
 		@set="updateUserDetailsForm"
 	></PkpForm>
 </template>
@@ -73,3 +73,8 @@ const sectionErrors = computed(() => {
 
 connectWithErrors(sectionErrors);
 </script>
+<style>
+.acceptInvitation__stepForm .pkpFormField--select__input {
+	width: 100% !important;
+}
+</style>
diff --git a/src/pages/acceptInvitation/AcceptInvitationUserRoles.vue b/src/pages/acceptInvitation/AcceptInvitationUserRoles.vue
index 22d5fc594..caec48665 100644
--- a/src/pages/acceptInvitation/AcceptInvitationUserRoles.vue
+++ b/src/pages/acceptInvitation/AcceptInvitationUserRoles.vue
@@ -1,10 +1,12 @@
 <template>
 	<PkpTable aria-label="Example for basic table">
 		<TableHeader>
-			<TableColumn>Title</TableColumn>
-			<TableColumn>Start Date</TableColumn>
-			<TableColumn>End Date</TableColumn>
-			<TableColumn>Journal Masthead</TableColumn>
+			<TableColumn>{{ t('userInvitation.roleTable.role') }}</TableColumn>
+			<TableColumn>{{ t('userInvitation.roleTable.startDate') }}</TableColumn>
+			<TableColumn>{{ t('userInvitation.roleTable.endDate') }}</TableColumn>
+			<TableColumn>
+				{{ t('userInvitation.roleTable.journalMasthead') }}
+			</TableColumn>
 		</TableHeader>
 		<TableBody>
 			<TableRow v-for="(row, index) in rows" :key="index">
@@ -26,6 +28,7 @@
 </template>
 
 <script setup>
+import {useTranslation} from '@/composables/useTranslation';
 import PkpTable from '@/components/TableNext/Table.vue';
 import TableCell from '@/components/TableNext/TableCell.vue';
 import TableHeader from '@/components/TableNext/TableHeader.vue';
@@ -37,4 +40,5 @@ import {defineProps} from 'vue';
 defineProps({
 	rows: {type: Array, required: true},
 });
+const {t} = useTranslation();
 </script>
diff --git a/src/pages/acceptInvitation/AcceptInvitationVerifyOrcid.vue b/src/pages/acceptInvitation/AcceptInvitationVerifyOrcid.vue
index fff56efcb..b446f5431 100644
--- a/src/pages/acceptInvitation/AcceptInvitationVerifyOrcid.vue
+++ b/src/pages/acceptInvitation/AcceptInvitationVerifyOrcid.vue
@@ -1,16 +1,25 @@
 <template>
-	<PkpButton @click="verifyOrcid">verify ORCID iD</PkpButton>
-	<br />
-	<PkpButton @click="skipOrcid">Skip ORCID verification</PkpButton>
+	<div class="m-4">
+		<PkpButton @click="verifyOrcid">
+			{{ t('acceptInvitation.verifyOrcid') }}
+		</PkpButton>
+	</div>
+	<div class="m-4">
+		<PkpButton @click="skipOrcid">
+			{{ t('acceptInvitation.skipVerifyOrcid') }}
+		</PkpButton>
+	</div>
 </template>
 
 <script setup>
 import PkpButton from '@/components/Button/Button.vue';
 import {defineProps} from 'vue';
+import {useTranslation} from '@/composables/useTranslation';
 import {useAcceptInvitationPageStore} from './AcceptInvitationPageStore';
 
 defineProps({});
 const store = useAcceptInvitationPageStore();
+const {t} = useTranslation();
 
 /**
  * Go to the next step
diff --git a/src/pages/acceptInvitation/mocks/pageInitConfig.js b/src/pages/acceptInvitation/mocks/pageInitConfig.js
index e5ebb13e7..a13397033 100644
--- a/src/pages/acceptInvitation/mocks/pageInitConfig.js
+++ b/src/pages/acceptInvitation/mocks/pageInitConfig.js
@@ -1,3 +1,175 @@
+const countries = [
+	{
+		value: '',
+		label: 'Select a country',
+		disabled: true,
+	},
+	{
+		value: 'AF',
+		label: 'Afghanistan',
+	},
+	{
+		value: 'AL',
+		label: 'Albania',
+	},
+	{
+		value: 'DZ',
+		label: 'Algeria',
+	},
+	{
+		value: 'AS',
+		label: 'American Samoa',
+	},
+	{
+		value: 'AD',
+		label: 'Andorra',
+	},
+	{
+		value: 'AO',
+		label: 'Angola',
+	},
+	{
+		value: 'AI',
+		label: 'Anguilla',
+	},
+	{
+		value: 'AQ',
+		label: 'Antarctica',
+	},
+	{
+		value: 'AG',
+		label: 'Antigua and Barbuda',
+	},
+	{
+		value: 'AR',
+		label: 'Argentina',
+	},
+	{
+		value: 'AM',
+		label: 'Armenia',
+	},
+	{
+		value: 'AW',
+		label: 'Aruba',
+	},
+	{
+		value: 'AU',
+		label: 'Australia',
+	},
+	{
+		value: 'AT',
+		label: 'Austria',
+	},
+	{
+		value: 'AZ',
+		label: 'Azerbaijan',
+	},
+	{
+		value: 'BS',
+		label: 'Bahamas',
+	},
+	{
+		value: 'BH',
+		label: 'Bahrain',
+	},
+	{
+		value: 'BD',
+		label: 'Bangladesh',
+	},
+	{
+		value: 'BB',
+		label: 'Barbados',
+	},
+	{
+		value: 'BY',
+		label: 'Belarus',
+	},
+	{
+		value: 'BE',
+		label: 'Belgium',
+	},
+	{
+		value: 'BZ',
+		label: 'Belize',
+	},
+	{
+		value: 'BJ',
+		label: 'Benin',
+	},
+	{
+		value: 'BM',
+		label: 'Bermuda',
+	},
+	{
+		value: 'BT',
+		label: 'Bhutan',
+	},
+	{
+		value: 'BO',
+		label: 'Bolivia, Plurinational State of',
+	},
+	{
+		value: 'BQ',
+		label: 'Bonaire, Sint Eustatius and Saba',
+	},
+	{
+		value: 'BA',
+		label: 'Bosnia and Herzegovina',
+	},
+	{
+		value: 'BW',
+		label: 'Botswana',
+	},
+	{
+		value: 'BV',
+		label: 'Bouvet Island',
+	},
+	{
+		value: 'BR',
+		label: 'Brazil',
+	},
+	{
+		value: 'IO',
+		label: 'British Indian Ocean Territory',
+	},
+	{
+		value: 'BN',
+		label: 'Brunei Darussalam',
+	},
+	{
+		value: 'BG',
+		label: 'Bulgaria',
+	},
+	{
+		value: 'BF',
+		label: 'Burkina Faso',
+	},
+	{
+		value: 'BI',
+		label: 'Burundi',
+	},
+	{
+		value: 'CV',
+		label: 'Cabo Verde',
+	},
+	{
+		value: 'KH',
+		label: 'Cambodia',
+	},
+	{
+		value: 'CM',
+		label: 'Cameroon',
+	},
+	{
+		value: 'CA',
+		label: 'Canada',
+	},
+	{
+		value: '...',
+		label: '...',
+	},
+];
+
 export default {
 	primaryLocale: 'en',
 	pageTitle: 'Invite user to take a role',
@@ -12,7 +184,8 @@ export default {
 			reviewName: '',
 			stepName: '{$step} - Verify ORCID iD',
 			type: 'popup',
-			description: 'Please verify orcid iD',
+			description:
+				'You can choose to verify your ORCID iD or skip it. If you choose to skip it now, You can verify your ORCID iD from your profile section in OJS later.',
 			stepButtonName: 'Save And Continue',
 			sections: [
 				{
@@ -71,6 +244,8 @@ export default {
 									groupId: 'default',
 									isRequired: true,
 									isMultilingual: false,
+									description:
+										'Also known as a forename or the first name, it is tha part of a personal name that identifies a preson',
 									value: null,
 									inputType: 'text',
 									optIntoEdit: false,
@@ -85,6 +260,8 @@ export default {
 									groupId: 'default',
 									isRequired: true,
 									isMultilingual: false,
+									description:
+										"A surname, family name, or last name is the mostly  hereditary portion of one's personal name that indicates one's family",
 									value: null,
 									inputType: 'text',
 									optIntoEdit: false,
@@ -99,6 +276,7 @@ export default {
 									groupId: 'default',
 									isRequired: true,
 									isMultilingual: false,
+									description: 'This is the institute you are affiliated with',
 									value: null,
 									inputType: 'text',
 									optIntoEdit: false,
@@ -108,15 +286,18 @@ export default {
 								},
 								{
 									name: 'country',
-									component: 'field-text',
+									component: 'field-select',
 									label: 'County of affiliation',
 									groupId: 'default',
 									isRequired: true,
 									isMultilingual: false,
+									description:
+										'This is a country in which the institute you are affiliated with is situated',
 									value: null,
 									inputType: 'text',
 									optIntoEdit: false,
 									optIntoEditLabel: '',
+									options: countries,
 									size: 'large',
 									prefix: '',
 								},
diff --git a/src/pages/userInvitation/UserInvitationDetailsFormStep.vue b/src/pages/userInvitation/UserInvitationDetailsFormStep.vue
index a99e89203..038ce9e24 100644
--- a/src/pages/userInvitation/UserInvitationDetailsFormStep.vue
+++ b/src/pages/userInvitation/UserInvitationDetailsFormStep.vue
@@ -7,13 +7,13 @@
 		></PkpForm>
 	</div>
 	<div v-if="store.invitationPayload.userId !== null">
-		<div class="userInvitation__reviewPanel__item">
-			<h4 class="userInvitation__reviewPanel__item__header">Email Address</h4>
-			<div class="userInvitation__reviewPanel__item__value">
+		<div class="p-1">
+			<h4 class="text-sm m-0 leading-6">{{ t('user.emailAddress') }}</h4>
+			<div class="text-sm mb-4 leading-6">
 				{{ store.invitationPayload.email }}
 			</div>
-			<h4 class="userInvitation__reviewPanel__item__header">ORCID iD</h4>
-			<div class="userInvitation__reviewPanel__item__value">
+			<h4 class="text-sm m-0 leading-6">{{ t('user.orcid') }}</h4>
+			<div class="text-sm mb-4 leading-6">
 				{{
 					store.invitationPayload.orcid
 						? store.invitationPayload.orcid
@@ -25,16 +25,16 @@
 					:inline="true"
 				/>
 			</div>
-			<h4 class="userInvitation__reviewPanel__item__header">Given Name</h4>
-			<div class="userInvitation__reviewPanel__item__value">
+			<h4 class="text-sm m-0 leading-6">{{ t('user.givenName') }}</h4>
+			<div class="text-sm mb-4 leading-6">
 				{{ store.invitationPayload.givenName }}
 			</div>
-			<h4 class="userInvitation__reviewPanel__item__header">Family Name</h4>
-			<div class="userInvitation__reviewPanel__item__value">
+			<h4 class="text-sm m-0 leading-6">{{ t('user.familyName') }}</h4>
+			<div class="text-sm mb-4 leading-6">
 				{{ store.invitationPayload.familyName }}
 			</div>
-			<h4 class="userInvitation__reviewPanel__item__header">Affiliation</h4>
-			<div class="userInvitation__reviewPanel__item__value">
+			<h4 class="text-sm m-0 leading-6">{{ t('user.affiliation') }}</h4>
+			<div class="text-sm mb-4 leading-6">
 				{{ store.invitationPayload.affiliation }}
 			</div>
 		</div>
@@ -92,24 +92,7 @@ const sectionErrors = computed(() => {
 connectWithErrors(sectionErrors);
 </script>
 <style lang="less">
-select {
-	width: 13rem !important;
-}
-.userInvitation__reviewPanel__item {
-	&:last-child {
-		border-bottom: none;
-	}
-}
-
-.userInvitation__reviewPanel__item__header {
-	margin: 0;
-	font-size: 0.875rem;
-	line-height: 1.5rem;
-}
-
-.userInvitation__reviewPanel__item__value {
-	margin-bottom: 1rem;
-	font-size: 0.875rem;
-	line-height: 1.5rem;
+.userInvitation__stepForm .pkpFormField--select__input {
+	width: 100% !important;
 }
 </style>
diff --git a/src/pages/userInvitation/UserInvitationPage.vue b/src/pages/userInvitation/UserInvitationPage.vue
index 25ef81924..afe9d092a 100644
--- a/src/pages/userInvitation/UserInvitationPage.vue
+++ b/src/pages/userInvitation/UserInvitationPage.vue
@@ -23,11 +23,11 @@
 			>
 				<Panel
 					v-if="store.currentStep.id === step.id"
-					class="decision__stepPanel"
+					class="rounded-none border-t-0"
 				>
-					<PanelSection class="decision__stepHeader">
+					<PanelSection class="userInvitation__stepHeader">
 						<h2>{{ store.stepTitle }}</h2>
-						<p class="error">{{ store.errors.error }}</p>
+						<p class="text-red font-bold">{{ store.errors.error }}</p>
 						<p>{{ step.description }}</p>
 					</PanelSection>
 					<PanelSection v-for="section in step.sections" :key="section.id">
@@ -116,10 +116,6 @@ const userInvitationComponents = {
 	}
 }
 
-.submissionWizard__steps {
-	margin-top: 2rem;
-}
-
 .userInvitation .pkpSteps__buttonWrapper {
 	border: @bg-border-light;
 	border-bottom: 0;
@@ -127,12 +123,6 @@ const userInvitationComponents = {
 	border-top-right-radius: @radius;
 }
 
-.userInvitation__submissionDetails,
-.userInvitation__submissionConfiguration {
-	font-size: @font-sml;
-	line-height: @line-sml;
-}
-
 // Override the form locale switcher styles
 .userInvitation__stepForm .pkpFormLocales {
 	border: none;
@@ -163,15 +153,17 @@ const userInvitationComponents = {
 		margin-inline-start: 0.5rem;
 	}
 }
+.userInvitation__stepHeader {
+	h2 {
+		margin: 0;
+		font-size: @font-large;
+		line-height: @line-large;
+	}
 
-.error {
-	color: red;
-	font-weight: bold;
-}
-.userInvitationModal__body {
-	padding: 0.5rem 0.75rem;
-}
-.userInvitationModal__body_success {
-	box-shadow: inset 0.25rem 0 #00b24e;
+	p {
+		margin: 0.5rem 0 0;
+		font-size: @font-sml;
+		line-height: @line-sml-tight;
+	}
 }
 </style>
diff --git a/src/pages/userInvitation/UserInvitationPageStore.js b/src/pages/userInvitation/UserInvitationPageStore.js
index 862f37bef..637ad2f60 100644
--- a/src/pages/userInvitation/UserInvitationPageStore.js
+++ b/src/pages/userInvitation/UserInvitationPageStore.js
@@ -1,4 +1,5 @@
 import {defineComponentStore} from '@/utils/defineComponentStore';
+import {useTranslation} from '@/composables/useTranslation';
 import {useFetch} from '@/composables/useFetch';
 import {useUrl} from '@/composables/useUrl';
 import {computed, onMounted, ref, watch} from 'vue';
@@ -7,6 +8,7 @@ export const useUserInvitationPageStore = defineComponentStore(
 	'userInvitationPage',
 	(pageInitConfig) => {
 		const {openDialog} = useModal();
+		const {t} = useTranslation();
 
 		/**
 		 * Invitation payload, initial value
@@ -249,10 +251,13 @@ export const useUserInvitationPageStore = defineComponentStore(
 				await fetch();
 				if (data.value) {
 					openDialog({
-						title: 'Invitation sent',
+						title: t('userInvitation.modal.title'),
+						message: t('userInvitation.modal.message', {
+							email: invitationPayload.value.email,
+						}),
 						actions: [
 							{
-								label: 'Ok',
+								label: t('userInvitation.modal.button'),
 								callback: (close) => {
 									close();
 								},
diff --git a/src/pages/userInvitation/UserInvitationSearchFormStep.vue b/src/pages/userInvitation/UserInvitationSearchFormStep.vue
index 403a3f99c..bd0970d92 100644
--- a/src/pages/userInvitation/UserInvitationSearchFormStep.vue
+++ b/src/pages/userInvitation/UserInvitationSearchFormStep.vue
@@ -1,31 +1,42 @@
 <template>
-	<FieldText
-		:label="t('user.email')"
-		:value="fields.email"
-		name="email"
-		size="large"
-		@change="updateField"
-	/>
-	<br />
-	<p>or</p>
-	<br />
-	<FieldText
-		:label="t('user.username')"
-		:value="fields.username"
-		name="username"
-		size="large"
-		@change="updateField"
-	/>
-	<br />
-	<p>or</p>
-	<br />
-	<FieldText
-		:label="t('user.orcid')"
-		:value="fields.orcid"
-		name="orcid"
-		size="large"
-		@change="updateField"
-	/>
+	<div class="my-4">
+		<FieldText
+			:label="t('user.email')"
+			:value="fields.email"
+			:description="t('userInvitation.emailField.description')"
+			name="email"
+			size="large"
+			@change="updateField"
+		/>
+	</div>
+
+	<div class="my-4">
+		<p>or</p>
+	</div>
+	<div class="my-4">
+		<FieldText
+			:label="t('user.username')"
+			:value="fields.username"
+			:description="t('userInvitation.usernameField.description')"
+			name="username"
+			size="large"
+			@change="updateField"
+		/>
+	</div>
+
+	<div class="my-4">
+		<p>or</p>
+	</div>
+	<div class="my-4">
+		<FieldText
+			:label="t('user.orcid')"
+			:value="fields.orcid"
+			:description="t('userInvitation.orcidField.description')"
+			name="orcid"
+			size="large"
+			@change="updateField"
+		/>
+	</div>
 </template>
 
 <script setup>
diff --git a/src/pages/userInvitation/UserInvitationUserGroupsTable.vue b/src/pages/userInvitation/UserInvitationUserGroupsTable.vue
index 15b8b9563..30a4253b3 100644
--- a/src/pages/userInvitation/UserInvitationUserGroupsTable.vue
+++ b/src/pages/userInvitation/UserInvitationUserGroupsTable.vue
@@ -1,10 +1,12 @@
 <template>
 	<PkpTable aria-label="Example for basic table">
 		<TableHeader>
-			<TableColumn>Title</TableColumn>
-			<TableColumn>Start Date</TableColumn>
-			<TableColumn>End Date</TableColumn>
-			<TableColumn>Journal Masthead</TableColumn>
+			<TableColumn>{{ t('userInvitation.roleTable.role') }}</TableColumn>
+			<TableColumn>{{ t('userInvitation.roleTable.startDate') }}</TableColumn>
+			<TableColumn>{{ t('userInvitation.roleTable.endDate') }}</TableColumn>
+			<TableColumn>
+				{{ t('userInvitation.roleTable.journalMasthead') }}
+			</TableColumn>
 			<TableColumn></TableColumn>
 		</TableHeader>
 		<TableBody>
@@ -170,7 +172,7 @@ const userGroupErrors = computed(() => {
 });
 </script>
 <style>
-select {
+td select {
 	width: 13rem !important;
 }
 </style>
diff --git a/src/pages/userInvitation/mocks/pageInitConfig.js b/src/pages/userInvitation/mocks/pageInitConfig.js
index a3b8bb940..2e1ae37e1 100644
--- a/src/pages/userInvitation/mocks/pageInitConfig.js
+++ b/src/pages/userInvitation/mocks/pageInitConfig.js
@@ -194,6 +194,7 @@ export default {
 									groupId: 'default',
 									isRequired: true,
 									isMultilingual: false,
+									description: 'e.g. aeinstein@example.com',
 									value: 'null',
 									inputType: 'text',
 									optIntoEdit: false,
@@ -222,6 +223,8 @@ export default {
 									groupId: 'default',
 									isRequired: false,
 									isMultilingual: false,
+									description:
+										'If you know the given name of the user, you can enter the information. However, this information can be changed by the user',
 									value: null,
 									inputType: 'text',
 									optIntoEdit: false,
@@ -236,6 +239,8 @@ export default {
 									groupId: 'default',
 									isRequired: false,
 									isMultilingual: false,
+									description:
+										'If you know the family name of the user, you can enter the information. However, this information can be changed by the user',
 									value: null,
 									inputType: 'text',
 									optIntoEdit: false,