diff --git a/src/pages/createUser/CreateUserPage.vue b/src/pages/createUser/CreateUserPage.vue
index fb002d7b7..0b4dada68 100644
--- a/src/pages/createUser/CreateUserPage.vue
+++ b/src/pages/createUser/CreateUserPage.vue
@@ -35,9 +35,6 @@
 									:update-autosave-form="store.updateAutosaveForm"
 								/>
 							</template>
-							<template v-if="section.type === 'table'">
-								<CreateUserInvitedRoles :section="section" />
-							</template>
 						</panel-section>
 					</template>
 					<template v-if="step.type === 'form' && step.sections.length === 0">
@@ -51,7 +48,7 @@
 						</panel-section>
 					</template>
 					<template v-if="step.type === 'review'">
-						<panel-section v-for="section in step.sections" :key="section.id">
+						<panel-section>
 							<notification
 								v-if="Object.keys(store.errors).length"
 								type="warning"
@@ -59,8 +56,8 @@
 								{{ t('invitation.wizard.errors') }}
 							</notification>
 							<CreateUserReview
-								:page-title="store.pageTitle"
-								:page-title-description="store.pageTitleDescription"
+								:review-steps="store.steps"
+								:open-step="store.openStep"
 							/>
 						</panel-section>
 					</template>
@@ -115,7 +112,6 @@ import CreateUserForms from './CreateUserForms.vue';
 import CreateUserAccount from './CreateUserAccount.vue';
 import CreateUserReview from './CreateUserReview.vue';
 import CreateUserVerifyOrcid from './CreateUserVerifyOrcid.vue';
-import CreateUserInvitedRoles from './CreateUserInvitedRoles.vue';
 
 const props = defineProps({
 	/** steps for invite user */
@@ -141,6 +137,18 @@ const props = defineProps({
 		type: String,
 		required: true,
 	},
+	csrfToken: {
+		type: String,
+		required: true,
+	},
+	invitationId: {
+		type: Number,
+		required: true,
+	},
+	invitationKey: {
+		type: String,
+		required: true,
+	},
 });
 console.log(props);
 const {t} = useTranslation();
diff --git a/src/pages/createUser/CreateUserPageStore.js b/src/pages/createUser/CreateUserPageStore.js
index 591b159b7..6e988b1b7 100644
--- a/src/pages/createUser/CreateUserPageStore.js
+++ b/src/pages/createUser/CreateUserPageStore.js
@@ -1,7 +1,7 @@
 import {useTranslation} from '@/composables/useTranslation';
 
 import {defineComponentStore} from '@/utils/defineComponentStore';
-// import {useFetch} from '@/composables/useFetch';
+import {useFetch} from '@/composables/useFetch';
 import {computed, onMounted, ref, watch} from 'vue';
 //let pageInitConfig = null;
 
@@ -31,12 +31,14 @@ export const useCreateUserPageStore = defineComponentStore(
 		const errors = ref({});
 		const startedSteps = ref([]);
 		const isModalOpened = ref(false);
+		const reviewSteps = ref([]);
 
 		const usernameField = ref({
 			label: t('user.username'),
 			name: 'username',
 			size: 'large',
 			value: '',
+			allErrors: {},
 		});
 		const passwordField = ref({
 			label: t('user.password'),
@@ -44,6 +46,7 @@ export const useCreateUserPageStore = defineComponentStore(
 			size: 'large',
 			value: '',
 			inputType: 'password',
+			allErrors: {},
 		});
 		const password = ref('');
 		const username = ref('');
@@ -99,7 +102,7 @@ export const useCreateUserPageStore = defineComponentStore(
 			if (!currentStep.value) {
 				return '';
 			}
-			return currentStep.value.reviewName.replace(
+			return currentStep.value.stepName.replace(
 				'{$step}',
 				'STEP ' + (1 + currentStepIndex.value),
 			);
@@ -132,7 +135,7 @@ export const useCreateUserPageStore = defineComponentStore(
 
 			// Trigger validation on the review step
 			if (newVal === steps.value.length - 1) {
-				validate();
+				validateOnServer(steps.value[currentStepIndex.value].id);
 			}
 		});
 
@@ -141,6 +144,7 @@ export const useCreateUserPageStore = defineComponentStore(
 		 */
 		watch(errors, async (newVal, oldVal) => {
 			const keys = Object.keys(newVal);
+			console.log(errors, newVal);
 			steps.value.forEach((step, stepIndex) => {
 				step.sections.forEach((section, sectionIndex) => {
 					if (section.type === 'form') {
@@ -150,6 +154,9 @@ export const useCreateUserPageStore = defineComponentStore(
 									...steps.value[stepIndex].sections[sectionIndex].form.errors,
 									...{[field.name]: newVal[field.name]},
 								};
+								console.log(
+									steps.value[stepIndex].sections[sectionIndex].form.errors,
+								);
 							}
 						});
 					}
@@ -168,9 +175,13 @@ export const useCreateUserPageStore = defineComponentStore(
 
 		function passwordChange(fieldName, propName, newValue, localeKey) {
 			password.value = newValue;
+			passwordField.value.value = newValue;
+			passwordField.value.allErrors = {};
 		}
 		function usernameChange(fieldName, propName, newValue, localeKey) {
 			username.value = newValue;
+			usernameField.value.value = newValue;
+			usernameField.value.allErrors = {};
 		}
 		/**
 		 * Add a step change to the browser history so the
@@ -189,6 +200,9 @@ export const useCreateUserPageStore = defineComponentStore(
 			if (isOnLastStep.value) {
 				submit();
 			} else {
+				if (!validateOnClient(steps.value[currentStepIndex.value].id)) {
+					return;
+				}
 				openStep(steps.value[1 + currentStepIndex.value].id);
 			}
 		}
@@ -203,9 +217,6 @@ export const useCreateUserPageStore = defineComponentStore(
 			if (!newStep) {
 				return;
 			}
-			if (stepId === 'userInvitedEmail') {
-				errors.value = {};
-			}
 			currentStepId.value = stepId;
 		}
 
@@ -225,7 +236,83 @@ export const useCreateUserPageStore = defineComponentStore(
 		 * Always wait for autosaves to complete before
 		 * trying to validate
 		 */
-		function validate() {}
+		function validateOnClient(stepId) {
+			let isValidate = true;
+			usernameField.value.allErrors = {};
+			passwordField.value.allErrors = {};
+			if (stepId === 'userCreate') {
+				if (username.value === '') {
+					usernameField.value.allErrors.username = ['this field is required'];
+					isValidate = false;
+				}
+				if (password.value === '') {
+					passwordField.value.allErrors.password = ['this field is required'];
+					isValidate = false;
+				}
+			}
+
+			return isValidate;
+		}
+		/**
+		 * Validate the user details
+		 *
+		 * Always wait for autosaves to complete before
+		 * trying to validate
+		 */
+		async function validateOnServer(stepId) {
+			let isValidate = true;
+			const body = {
+				username: username.value,
+				password: password.value,
+				invitationId: pageInitConfig.invitationId,
+				invitationKey: pageInitConfig.invitationKey,
+				_validateOnly: true,
+			};
+			steps.value.forEach((step) => {
+				step.sections.forEach((section) => {
+					if (section.type === 'form' || section.length > 0) {
+						section.form.fields.forEach((field) => {
+							body[field.name] = field.value;
+						});
+					}
+				});
+			});
+			const {
+				data: res,
+				validationError,
+				fetch,
+			} = useFetch(pageInitConfig.createAccountApiUrl, {
+				expectValidationError: true,
+				method: 'POST',
+				body: body,
+			});
+			await fetch();
+			if (validationError.value) {
+				isValidate = false;
+				errors.value = validationError.value;
+				steps.value.forEach((step) => {
+					if (step.id !== 'userCreate') {
+						return;
+					}
+					step['review'][0] = {
+						username: username,
+						password: password,
+						errors: {
+							['username']: errors.value.username
+								? errors.value.username
+								: null,
+							['password']: errors.value.password
+								? errors.value.password
+								: null,
+						},
+					};
+				});
+				console.log(steps.value);
+			} else if (res.value && !validationError.value) {
+				console.log(res.value);
+			}
+			return isValidate;
+		}
 
 		/**
 		 * Update an autosave form
@@ -256,6 +343,7 @@ export const useCreateUserPageStore = defineComponentStore(
 		 * @param {Object} data
 		 */
 		function updateForm(formId, data) {
+			console.log(formId, data);
 			steps.value.forEach((step, stepIndex) => {
 				step.sections.forEach((section, sectionIndex) => {
 					if (section.type !== 'form' || section.form.id !== formId) {
@@ -265,15 +353,6 @@ export const useCreateUserPageStore = defineComponentStore(
 						...steps.value[stepIndex].sections[sectionIndex].form,
 						...data,
 					};
-					steps.value[stepIndex].sections[sectionIndex].form.fields.forEach(
-						(field) => {
-							if (data[field.name] instanceof Object) {
-								field.value = data[field.name][pageInitConfig.primaryLocale];
-							} else {
-								field.value = data[field.name];
-							}
-						},
-					);
 				});
 			});
 		}
@@ -327,6 +406,7 @@ export const useCreateUserPageStore = defineComponentStore(
 			steps,
 			pageTitleDescription,
 			errors,
+			reviewSteps,
 
 			//form feilds
 			passwordField,
diff --git a/src/pages/createUser/CreateUserReview.vue b/src/pages/createUser/CreateUserReview.vue
index 44e8cc35e..a90581dc6 100644
--- a/src/pages/createUser/CreateUserReview.vue
+++ b/src/pages/createUser/CreateUserReview.vue
@@ -1,30 +1,208 @@
 <template>
-	<h1 ref="wrapper" class="app__pageHeading">
-		{{ pageTitle }}
-	</h1>
-	<p>
-		{{ pageTitleDescription }}
-	</p>
-	<!-- <ListPanel v-bind="args">
-		<template #header>
-			<PkpHeader>
-				<h2>List Panel with Actions</h2>
-				<template #actions>
-					<PkpButton @click="openModal">Add Item</PkpButton>
-					<PkpButton :is-warnable="true" @click="openModal">
-						Reset Defaults
-					</PkpButton>
-				</template>
-			</PkpHeader>
-		</template>
-	</ListPanel> -->
+	<div v-for="review in reviewSteps" :key="review.id">
+		<div
+			v-if="review.id === 'userCreate'"
+			class="submissionWizard__reviewPanel"
+		>
+			<template v-if="review.id === 'userCreate'">
+				<div class="submissionWizard__reviewPanel__header">
+					<h3>
+						{{ review.reviewName }}
+					</h3>
+					<pkp-button
+						class="submissionWizard__reviewPanel__edit"
+						@click="openStep(review.id)"
+					>
+						edit
+					</pkp-button>
+				</div>
+				<div
+					v-for="(reviews, index) in review.review"
+					:key="index"
+					class="submissionWizard__reviewPanel__item"
+				>
+					<template v-if="reviews.errors.username">
+						<notification
+							v-for="(error, i) in reviews.errors.username"
+							:key="i"
+							type="warning"
+						>
+							<icon icon="exclamation-triangle"></icon>
+							{{ error }}
+						</notification>
+					</template>
+					<h4 class="submissionWizard__reviewPanel__item__header">Username</h4>
+					<div class="submissionWizard__reviewPanel__item__value">
+						{{ reviews.username }}
+					</div>
+					<template v-if="reviews.errors.password">
+						<notification
+							v-for="(error, i) in reviews.errors.password"
+							:key="i"
+							type="warning"
+						>
+							<icon icon="exclamation-triangle"></icon>
+							{{ error }}
+						</notification>
+					</template>
+					<h4 class="submissionWizard__reviewPanel__item__header">Password</h4>
+					<div class="submissionWizard__reviewPanel__item__value">
+						{{ reviews.password }}
+					</div>
+				</div>
+			</template>
+		</div>
+		<div
+			v-if="review.id === 'userDetails'"
+			class="submissionWizard__reviewPanel"
+		>
+			<template v-if="review.id === 'userDetails'">
+				<div class="submissionWizard__reviewPanel__header">
+					<h3>
+						{{ review.reviewName }}
+					</h3>
+					<pkp-button
+						class="submissionWizard__reviewPanel__edit"
+						@click="openStep(review.id)"
+					>
+						edit
+					</pkp-button>
+				</div>
+				<div v-for="(section, index) in review.sections" :key="index">
+					<div
+						v-if="section.id === 'userCreateDetailsForm'"
+						class="submissionWizard__reviewPanel__item"
+					>
+						<template v-if="section.form.errors.email">
+							<notification
+								v-for="(error, i) in section.form.errors.email"
+								:key="i"
+								type="warning"
+							>
+								<icon icon="exclamation-triangle"></icon>
+								{{ error }}
+							</notification>
+						</template>
+						<h4 class="submissionWizard__reviewPanel__item__header">Email</h4>
+						<div class="submissionWizard__reviewPanel__item__value">
+							<template v-for="field in section.form.fields" :key="field.name">
+								{{
+									field.name === 'email'
+										? field.value
+											? field.value
+											: t('common.noneProvided')
+										: ''
+								}}
+							</template>
+						</div>
+						<h4 class="submissionWizard__reviewPanel__item__header">
+							ORCID iD
+						</h4>
+						<div class="submissionWizard__reviewPanel__item__value">
+							<template v-for="field in section.form.fields" :key="field.name">
+								{{ field.name === 'orcid' ? field.value : '' }}
+							</template>
+						</div>
+						<template v-if="section.form.errors.givenName">
+							<notification
+								v-for="(error, i) in section.form.errors.givenName"
+								:key="i"
+								type="warning"
+							>
+								<icon icon="exclamation-triangle"></icon>
+								{{ error }}
+							</notification>
+						</template>
+						<h4 class="submissionWizard__reviewPanel__item__header">
+							Given Name
+						</h4>
+						<div class="submissionWizard__reviewPanel__item__value">
+							<template v-for="field in section.form.fields" :key="field.name">
+								{{
+									field.name === 'givenName'
+										? field.value
+											? field.value
+											: t('common.noneProvided')
+										: ''
+								}}
+							</template>
+						</div>
+						<template v-if="section.form.errors.familyName">
+							<notification
+								v-for="(error, i) in section.form.errors.familyName"
+								:key="i"
+								type="warning"
+							>
+								<icon icon="exclamation-triangle"></icon>
+								{{ error }}
+							</notification>
+						</template>
+						<h4 class="submissionWizard__reviewPanel__item__header">
+							Family Name
+						</h4>
+						<div class="submissionWizard__reviewPanel__item__value">
+							<template v-for="field in section.form.fields" :key="field.name">
+								{{
+									field.name === 'familyName'
+										? field.value
+											? field.value
+											: t('common.noneProvided')
+										: ''
+								}}
+							</template>
+						</div>
+						<h4 class="submissionWizard__reviewPanel__item__header">
+							Affiliation
+						</h4>
+						<div class="submissionWizard__reviewPanel__item__value">
+							<template v-for="field in section.form.fields" :key="field.name">
+								{{
+									field.name === 'affiliation'
+										? field.value
+											? field.value
+											: t('common.noneProvided')
+										: ''
+								}}
+							</template>
+						</div>
+						<h4 class="submissionWizard__reviewPanel__item__header">
+							Country of Affiliation
+						</h4>
+						<div class="submissionWizard__reviewPanel__item__value">
+							<template v-for="field in section.form.fields" :key="field.name">
+								{{
+									field.name === 'country'
+										? field.value
+											? field.value
+											: t('common.noneProvided')
+										: ''
+								}}
+							</template>
+						</div>
+					</div>
+					<div class="submissionWizard__reviewPanel__item">
+						<div
+							v-if="section.id === 'userCreateRoles'"
+							class="submissionWizard__reviewPanel__item"
+						>
+							<CreateUserInvitedRoles :section="section" />
+						</div>
+					</div>
+				</div>
+			</template>
+		</div>
+	</div>
 </template>
 
 <script setup>
 import {defineProps} from 'vue';
+import CreateUserInvitedRoles from './CreateUserInvitedRoles.vue';
+import {useTranslation} from '@/composables/useTranslation';
 
-defineProps({
-	pageTitle: {type: String, required: true},
-	pageTitleDescription: {type: String, required: true},
+const props = defineProps({
+	reviewSteps: {type: Array, required: true},
+	openStep: {type: Function, required: true},
 });
+const {t} = useTranslation();
+console.log(props);
 </script>