diff --git a/public/globals.js b/public/globals.js
index ff87fcc1f..6c06be909 100644
--- a/public/globals.js
+++ b/public/globals.js
@@ -100,6 +100,10 @@ window.pkp = {
 		STATUS_PUBLISHED: 3,
 		STATUS_DECLINED: 4,
 		STATUS_SCHEDULED: 5,
+		PUBLICATION_STATUS_QUEUED: 1,
+		PUBLICATION_STATUS_PUBLISHED: 3,
+		PUBLICATION_STATUS_DECLINED: 4,
+		PUBLICATION_STATUS_SCHEDULED: 5,
 		WORKFLOW_STAGE_ID_SUBMISSION: 1,
 		WORKFLOW_STAGE_ID_INTERNAL_REVIEW: 2,
 		WORKFLOW_STAGE_ID_EXTERNAL_REVIEW: 3,
diff --git a/src/components/Form/Form.vue b/src/components/Form/Form.vue
index 59302e6da..7e5d115d3 100644
--- a/src/components/Form/Form.vue
+++ b/src/components/Form/Form.vue
@@ -13,6 +13,7 @@
 			type="hidden"
 			:name="name"
 			:value="value"
+			@change="fieldChanged"
 		/>
 		<FormLocales
 			v-if="availableLocales.length > 1"
@@ -70,6 +71,7 @@
 				@show-locale="showLocale"
 				@cancel="cancel"
 				@set-errors="setErrors"
+				@set-field-required="setFieldRequired"
 			/>
 		</div>
 	</form>
@@ -160,6 +162,7 @@ export default {
 			currentPage: '',
 			isSaving: false,
 			lastSaveTimestamp: -1,
+			fieldRequiredStates: {}, // track field required states for dynamic fields
 		};
 	},
 	computed: {
@@ -384,7 +387,19 @@ export default {
 				) {
 					return;
 				}
+
+				// Check if field has custom required state
+				if (field.name in this.fieldRequiredStates) {
+					const isFieldRequired = this.fieldRequiredStates[field.name];
+					// check if Field is required by dynamic update and return if not
+					// otherwise continue with default checks
+					if (!isFieldRequired) {
+						return;
+					}
+				}
+
 				let missingValue = false;
+
 				// Only require the primary locale by default for multilingual fields
 				let value = field.isMultilingual
 					? field.value[this.primaryLocale]
@@ -490,18 +505,29 @@ export default {
 		 * @param {String} localeKey Optional locale key for multilingual props
 		 */
 		fieldChanged: function (name, prop, value, localeKey) {
-			const newFields = this.fields.map((field) => {
-				if (field.name === name) {
-					if (localeKey) {
-						field[prop][localeKey] = value;
-					} else {
-						field[prop] = value;
+			// Check if this is a hidden field or normal field
+			const isHiddenField = this.hiddenFields && name in this.hiddenFields;
+
+			if (isHiddenField) {
+				const newHiddenFields = {...this.hiddenFields};
+				newHiddenFields[name] = value;
+				this.$emit('set', this.id, {hiddenFields: newHiddenFields});
+			} else {
+				const newFields = this.fields.map((field) => {
+					if (field.name === name) {
+						if (localeKey) {
+							field[prop][localeKey] = value;
+						} else {
+							field[prop] = value;
+						}
 					}
-				}
-				return field;
-			});
-			this.$emit('set', this.id, {fields: newFields});
-			this.removeError(name, localeKey);
+					return field;
+				});
+				this.$emit('set', this.id, {fields: newFields});
+
+				// Remove any errors for this field
+				this.removeError(name, localeKey);
+			}
 		},
 
 		/**
@@ -631,6 +657,13 @@ export default {
 		setErrors: function (errors) {
 			this.$emit('set', this.id, {errors: errors});
 		},
+
+		/**
+		 * Set the required state for a specific field
+		 */
+		setFieldRequired(fieldName, isRequired) {
+			this.fieldRequiredStates[fieldName] = isRequired;
+		},
 	},
 };
 </script>
diff --git a/src/components/Form/FormGroup.vue b/src/components/Form/FormGroup.vue
index afe9b2a1e..4f46c1d39 100644
--- a/src/components/Form/FormGroup.vue
+++ b/src/components/Form/FormGroup.vue
@@ -45,6 +45,7 @@
 								:locales="availableLocales"
 								@change="fieldChanged"
 								@set-errors="setFieldErrors"
+								@set-field-required="setFieldRequired"
 							></component>
 						</div>
 					</div>
@@ -60,6 +61,7 @@
 						:locales="availableLocales"
 						@change="fieldChanged"
 						@set-errors="setFieldErrors"
+						@set-field-required="setFieldRequired"
 					></component>
 				</template>
 			</template>
@@ -88,8 +90,8 @@ import FieldRadioInput from './fields/FieldRadioInput.vue';
 import FieldRichTextarea from './fields/FieldRichTextarea.vue';
 import FieldRichText from './fields/FieldRichText.vue';
 import FieldSelect from './fields/FieldSelect.vue';
-import FieldSelectIssue from './fields/FieldSelectIssue.vue';
 import FieldSelectIssues from './fields/FieldSelectIssues.vue';
+import FieldIssueSelection from './fields/FieldIssueSelection.vue';
 import FieldSelectSubmissions from './fields/FieldSelectSubmissions.vue';
 import FieldSelectUsers from './fields/FieldSelectUsers.vue';
 import FieldShowEnsuringLink from './fields/FieldShowEnsuringLink.vue';
@@ -125,8 +127,8 @@ export default {
 		FieldRichTextarea,
 		FieldRichText,
 		FieldSelect,
-		FieldSelectIssue,
 		FieldSelectIssues,
+		FieldIssueSelection,
 		FieldSelectSubmissions,
 		FieldSelectUsers,
 		FieldShowEnsuringLink,
@@ -240,6 +242,13 @@ export default {
 			}
 			this.$emit('set-errors', {...newErrors});
 		},
+
+		/**
+		 * Forward field required events to the form page
+		 */
+		setFieldRequired: function (fieldName, isRequired) {
+			this.$emit('set-field-required', fieldName, isRequired);
+		},
 	},
 };
 </script>
diff --git a/src/components/Form/FormPage.vue b/src/components/Form/FormPage.vue
index 836b181e8..4930a3c5e 100644
--- a/src/components/Form/FormPage.vue
+++ b/src/components/Form/FormPage.vue
@@ -13,6 +13,7 @@
 			:form-id="formId"
 			@change="fieldChanged"
 			@set-errors="setErrors"
+			@set-field-required="setFieldRequired"
 		/>
 		<ButtonRow
 			v-if="hasFooter"
@@ -234,6 +235,13 @@ export default {
 		setErrors: function (errors) {
 			this.$emit('set-errors', errors);
 		},
+
+		/**
+		 * Forward field required events to the form
+		 */
+		setFieldRequired: function (fieldName, isRequired) {
+			this.$emit('set-field-required', fieldName, isRequired);
+		},
 	},
 };
 </script>
diff --git a/src/components/Form/fields/FieldIssueSelection.vue b/src/components/Form/fields/FieldIssueSelection.vue
new file mode 100644
index 000000000..08c640ec9
--- /dev/null
+++ b/src/components/Form/fields/FieldIssueSelection.vue
@@ -0,0 +1,460 @@
+<template>
+	<div
+		:id="`${props.formId}-${props.name}`"
+		class="pkpFormField pkpFormField--issueSelection"
+	>
+		<fieldset class="pkpFormGroup pkpFormGroup--issueSelection">
+			<div class="pkpFormGroup__heading">
+				<FormGroupHeader
+					:label="
+						t('publication.assignToIssue.label') + (isRequired ? ' *' : '')
+					"
+					:description="
+						t('publication.assignToIssue.assignmentTypeDescription')
+					"
+				/>
+			</div>
+			<div class="pkpFormGroup__fields">
+				<FieldOptions
+					:name="props.name + '_assignment'"
+					:label="t('publication.assignToIssue.assignmentType')"
+					:is-required="false"
+					:value="finalAssignmentType"
+					:options="assignmentOptions"
+					type="radio"
+					:all-errors="{}"
+					:is-loading="isLoadingAssignmentOptions"
+					@change="onAssignmentChange"
+				/>
+
+				<div v-if="showIssueDropdown" class="pkpFormField__issueDropdown">
+					<FieldSelect
+						:name="props.name"
+						:label="t('issue.issue')"
+						:description="t('publication.assignToIssue.issueDescription')"
+						:is-required="isIssueSelectionRequired"
+						:value="selectedIssueId"
+						:options="availableIssues"
+						:all-errors="{}"
+						size="large"
+						@change="onIssueChange"
+					/>
+				</div>
+
+				<FieldError
+					v-if="(errors && errors.length) || validationErrors.length"
+					:id="describedByErrorId"
+					:messages="errors && errors.length ? errors : validationErrors"
+				/>
+			</div>
+		</fieldset>
+	</div>
+</template>
+
+<script setup>
+import {ref, computed, watch, onMounted} from 'vue';
+import {useLocalize} from '@/composables/useLocalize';
+import {useFetch} from '@/composables/useFetch';
+import {useUrl} from '@/composables/useUrl';
+import FieldError from '@/components/Form/FieldError.vue';
+import FieldOptions from '@/components/Form/fields/FieldOptions.vue';
+import FieldSelect from '@/components/Form/fields/FieldSelect.vue';
+import FormGroupHeader from '@/components/Form/FormGroupHeader.vue';
+
+const props = defineProps({
+	name: {
+		type: String,
+		required: true,
+	},
+	formId: {
+		type: String,
+		default: null,
+	},
+	errors: {
+		type: Array,
+		default: () => [],
+	},
+	assignmentType: {
+		type: Number,
+		default: null,
+	},
+	issueCount: {
+		type: Number,
+		default: 0,
+	},
+	publication: {
+		type: Object,
+		required: true,
+	},
+	isRequired: {
+		type: Boolean,
+		default: true,
+	},
+	isPhpForm: {
+		type: Boolean,
+		default: false,
+	},
+});
+
+const emit = defineEmits(['change', 'set-errors', 'set', 'set-field-required']);
+const {t} = useLocalize();
+
+const availableIssues = ref([]);
+const isLoadingIssues = ref(false);
+
+const selectedIssueId = ref(props.publication?.issueId || null);
+const selectedAssignmentType = ref(props.assignmentType || null);
+
+const fetchedAssignmentType = ref(null);
+const assignmentOptions = ref([]);
+const isLoadingAssignmentOptions = ref(false);
+
+// Computed final assignment type with fallback (only for initial/default values)
+const finalAssignmentType = computed(() => {
+	return (
+		selectedAssignmentType.value ||
+		fetchedAssignmentType.value ||
+		pkp.const.ISSUE_ASSIGNMENT_DEFAULT
+	);
+});
+
+const fetchAssignmentOptions = async () => {
+	if (isLoadingAssignmentOptions.value) {
+		return;
+	}
+
+	isLoadingAssignmentOptions.value = true;
+
+	try {
+		const {apiUrl} = useUrl('issues/assignmentOptions');
+		const {fetch, data} = useFetch(apiUrl);
+		await fetch();
+
+		if (data.value) {
+			const options = data.value.map((option) => ({
+				value: option.value,
+				label: option.label,
+				status: option.status,
+				isPublished: option.isPublished,
+			}));
+
+			// Only show assignment options if there are issues available
+			assignmentOptions.value = props.issueCount > 0 ? options : [options[0]];
+		}
+	} catch (error) {
+		console.error('Error fetching assignment options:', error);
+	} finally {
+		isLoadingAssignmentOptions.value = false;
+	}
+};
+
+const fetchAssignmentType = async () => {
+	// will not fetch if the assignment type is give for the publication
+	// for example, it's can be given from the PHP form
+	if (props.assignmentType !== null) {
+		return;
+	}
+
+	try {
+		const {apiUrl} = useUrl(
+			`submissions/${props.publication.submissionId}/publications/${props.publication.id}/issueAssignmentStatus`,
+		);
+		const {fetch, data} = useFetch(apiUrl);
+		await fetch();
+
+		if (data.value?.assignmentType) {
+			fetchedAssignmentType.value = data.value.assignmentType;
+			selectedAssignmentType.value = data.value.assignmentType;
+		}
+	} catch (error) {
+		console.error('Error fetching assignment type:', error);
+		selectedAssignmentType.value = pkp.const.ISSUE_ASSIGNMENT_DEFAULT; // Fallback to default
+	}
+};
+
+const showIssueDropdown = computed(() => {
+	// no dropdown if no assignment options available
+	if (assignmentOptions.value.length === 0) {
+		return false;
+	}
+
+	const option = assignmentOptions.value.find(
+		(opt) => opt.value === selectedAssignmentType.value,
+	);
+	return option?.isPublished !== null;
+});
+
+// dynamic isRequired based on selection and `props.isRequired`
+const isIssueSelectionRequired = computed(() => {
+	// we are only going to require issue selection if:
+	// 	1. The field is marked as required (from PHP or JS)
+	// 	2. AND the selected assignment type actually requires an issue (isPublished !== null)
+	const selectedOption = assignmentOptions.value.find(
+		(opt) => opt.value === selectedAssignmentType.value,
+	);
+
+	return props.isRequired && selectedOption?.isPublished !== null;
+});
+
+const shouldFetchPublishedIssues = computed(() => {
+	const option = assignmentOptions.value.find(
+		(opt) => opt.value === selectedAssignmentType.value,
+	);
+	return option?.isPublished;
+});
+
+const isValid = computed(() => {
+	// If no assignment type selected, not valid
+	if (!selectedAssignmentType.value) {
+		return false;
+	}
+
+	const option = assignmentOptions.value.find(
+		(opt) => opt.value === selectedAssignmentType.value,
+	);
+
+	// If assignment type doesn't require issue selection, always valid
+	if (option?.isPublished === null) {
+		return true;
+	}
+
+	// If assignment type requires issue selection, check if issue is selected
+	return selectedIssueId.value !== null;
+});
+
+const publicationStatus = computed(() => {
+	const option = assignmentOptions.value.find(
+		(opt) => opt.value === selectedAssignmentType.value,
+	);
+	return option?.status || null;
+});
+
+// validation error messages
+const validationErrors = computed(() => {
+	if (!isValid.value) {
+		// If assignment type requires issue but none selected
+		if (isIssueSelectionRequired.value && !selectedIssueId.value) {
+			return [t('publication.assignToIssue.validation.issueRequired')];
+		}
+	}
+	return [];
+});
+
+watch(
+	validationErrors,
+	(errors) => {
+		errors.length > 0
+			? emit('set-errors', props.name, errors) // emit errors
+			: emit('set-errors', props.name, []); // clear errors
+	},
+	{immediate: true},
+);
+
+// Watch for assignment type changes to update validation
+watch(
+	selectedAssignmentType,
+	() => {
+		// Trigger validation update when assignment type changes
+		// which ensures validationErrors computed property updates
+	},
+	{immediate: true},
+);
+
+const describedByErrorId = computed(() => {
+	return `${props.formId || 'form'}-${props.name}-error`;
+});
+
+const onAssignmentChange = (fieldName, propName, newValue) => {
+	selectedAssignmentType.value = newValue;
+	selectedIssueId.value = null;
+	availableIssues.value = [];
+
+	if (showIssueDropdown.value) {
+		fetchIssues();
+	}
+
+	emitValue();
+};
+
+const onIssueChange = (fieldName, propName, newValue) => {
+	selectedIssueId.value = newValue;
+	emitValue();
+};
+
+const emitValue = () => {
+	if (props.isPhpForm) {
+		if (assignmentOptions.value.length > 0) {
+			emit('change', props.name, 'value', selectedIssueId.value);
+			emit('change', 'status', 'value', publicationStatus.value);
+		}
+	} else {
+		const value = {
+			assignmentType: selectedAssignmentType.value,
+			issueId: selectedIssueId.value,
+			publicationStatus: publicationStatus.value,
+			isValid: isValid.value,
+		};
+
+		emit('change', props.name, 'value', value);
+	}
+};
+
+const fetchIssues = async () => {
+	if (shouldFetchPublishedIssues.value === null) {
+		return;
+	}
+
+	if (isLoadingIssues.value) {
+		return;
+	}
+
+	isLoadingIssues.value = true;
+
+	try {
+		const {apiUrl} = useUrl('issues');
+		const {fetch, data} = useFetch(apiUrl, {
+			params: {
+				isPublished: shouldFetchPublishedIssues.value,
+				count: 100,
+			},
+		});
+
+		await fetch();
+		const issues = data.value?.items || [];
+
+		availableIssues.value = formatIssuesForDropdown(issues);
+	} catch (error) {
+		console.error('Error fetching issues:', error);
+		availableIssues.value = [];
+	} finally {
+		isLoadingIssues.value = false;
+	}
+};
+
+const formatIssuesForDropdown = (issues) => {
+	return issues.map((issue) => ({
+		id: issue.id,
+		label: issue.identification,
+		value: issue.id,
+	}));
+};
+
+watch(selectedAssignmentType, (newType) => {
+	selectedIssueId.value = null;
+	availableIssues.value = [];
+
+	if (showIssueDropdown.value) {
+		fetchIssues();
+	}
+
+	// Small delay to ensure the dropdown visibility is updated
+	setTimeout(() => {
+		emitValue();
+	}, 100);
+});
+
+watch(selectedIssueId, () => {
+	emitValue();
+});
+
+// Watch for changes and emit required state
+watch(
+	[selectedAssignmentType, selectedIssueId],
+	() => {
+		// Determine if field is currently required
+		let isCurrentlyRequired = true; // Default to required
+
+		if (selectedAssignmentType.value) {
+			const selectedOption = assignmentOptions.value.find(
+				(opt) => opt.value === selectedAssignmentType.value,
+			);
+
+			// If assignment type doesn't require issue selection, not required
+			if (selectedOption?.isPublished === null) {
+				isCurrentlyRequired = false;
+			}
+		}
+
+		// Emit the current required state
+		emit('set-field-required', props.name, isCurrentlyRequired);
+
+		emitValue(); // emit the value change
+	},
+	{immediate: false}, // not run immediately since it's been handled in onMounted
+);
+
+// emit initial required state
+const emitInitialRequiredState = () => {
+	// Determine if field is currently required based on initial values
+	let isCurrentlyRequired = true; // Default to required
+
+	if (selectedAssignmentType.value) {
+		const selectedOption = assignmentOptions.value.find(
+			(opt) => opt.value === selectedAssignmentType.value,
+		);
+
+		// If assignment type doesn't require issue selection, not required
+		if (selectedOption?.isPublished === null) {
+			isCurrentlyRequired = false;
+		}
+	}
+
+	// Emit the initial required state
+	emit('set-field-required', props.name, isCurrentlyRequired);
+};
+
+onMounted(async () => {
+	selectedAssignmentType.value = props.assignmentType || null;
+
+	await Promise.all([fetchAssignmentOptions(), fetchAssignmentType()]);
+
+	// Need to set the selected issue id after the fetch of assignment type as
+	// the watcher of selected assignment type does update the `selectedIssueId`
+	selectedIssueId.value = props.publication?.issueId || null;
+
+	// already pre-existed assignment type that requires issue selection and an existing issue ID,
+	// fetch the issues so the dropdown is populated and the correct issue is pre-selected
+	if (selectedAssignmentType.value && showIssueDropdown.value) {
+		await fetchIssues();
+	}
+
+	emitValue();
+
+	emitInitialRequiredState();
+});
+</script>
+
+<style lang="less" scoped>
+.pkpFormGroup--issueSelection {
+	border: 1px solid #ddd;
+	border-radius: 2px;
+	padding-left: 0rem;
+	padding-right: 0rem;
+
+	.pkpFormGroup__heading {
+		border-bottom: 0.1rem solid #ddd;
+		margin: -2rem 0rem 2rem 0rem;
+		padding: 1.5rem 2rem 2rem 2rem;
+		float: none;
+		width: 100%;
+		padding-inline-end: 2rem;
+	}
+
+	.pkpFormGroup__fields {
+		float: none;
+		width: 100%;
+		padding-inline-start: 0;
+		padding-left: 2rem !important;
+		padding-right: 2rem !important;
+
+		> * + * {
+			margin-top: 1.5rem;
+		}
+	}
+
+	.pkpFormField__issueDropdown {
+		padding-top: 1rem;
+		margin-top: 1.5rem;
+	}
+}
+</style>
diff --git a/src/components/Form/fields/FieldSelectIssue.mdx b/src/components/Form/fields/FieldSelectIssue.mdx
deleted file mode 100644
index 435a37151..000000000
--- a/src/components/Form/fields/FieldSelectIssue.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
-import {
-	Primary,
-	Controls,
-	Stories,
-	Meta,
-	ArgTypes,
-} from '@storybook/addon-docs/blocks';
-
-import * as FieldSelectIssueStories from './FieldSelectIssue.stories.js';
-
-<Meta of={FieldSelectIssueStories} />
-
-# FieldSelectIssue
-
-## Usage
-
-A special component for selecting an issue. When a publication is scheduled or published, this field will no longer show the selection options and will instead show a message indicating the issue it was scheduled or published in.
-
-In the example above, the "Assign to Issue" button will not work. This depends on the old JavaScript framework within the application.
-
-<Primary />
-<Controls />
-<Stories />
diff --git a/src/components/Form/fields/FieldSelectIssue.stories.js b/src/components/Form/fields/FieldSelectIssue.stories.js
deleted file mode 100644
index e8c4c7f51..000000000
--- a/src/components/Form/fields/FieldSelectIssue.stories.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import FieldSelectIssue from './FieldSelectIssue.vue';
-import FieldBaseMock from '../mocks/field-base';
-import FieldSelectIssueMock from '../mocks/field-select-issue';
-
-export default {
-	title: 'Forms/FieldSelectIssue',
-	component: FieldSelectIssue,
-	render: (args) => ({
-		components: {FieldSelectIssue},
-		setup() {
-			function change(name, prop, newValue, localeKey) {
-				if (localeKey) {
-					args[prop][localeKey] = newValue;
-				} else {
-					args[prop] = newValue;
-				}
-			}
-
-			return {args, change};
-		},
-		template: `
-			<FieldSelectIssue v-bind="args" @change="change" />
-		`,
-	}),
-};
-
-export const Base = {
-	args: {...FieldBaseMock, ...FieldSelectIssueMock},
-};
-
-export const Published = {
-	args: {
-		...Base.args,
-		publicationStatus: 3, // PKPSubmission::STATUS_PUBLISHED
-		value: 3,
-	},
-};
-
-export const Scheduled = {
-	args: {
-		...Base.args,
-		publicationStatus: 5, // PKPSubmission::STATUS_SCHEDULED
-		value: 4,
-	},
-};
diff --git a/src/components/Form/fields/FieldSelectIssue.vue b/src/components/Form/fields/FieldSelectIssue.vue
index 9dffd4d5f..c206fb835 100644
--- a/src/components/Form/fields/FieldSelectIssue.vue
+++ b/src/components/Form/fields/FieldSelectIssue.vue
@@ -1,3 +1,4 @@
+<!-- TODO: need this anymore ? remove this after testing -->
 <template>
 	<div class="pkpFormField pkpFormField--select pkpFormField--selectIssue">
 		<div class="pkpFormField__heading">
@@ -75,7 +76,7 @@ export default {
 			type: String,
 			required: true,
 		},
-		/** One of the `PKPSubmission::STATUS_` constants. When set to `PKPSubmission::STATUS_QUEUED` or `PKPSubmission::STATUS_PUBLISHED` the issue selection will be hidden. */
+		/** One of the `PKPPublication::STATUS_` constants. When set to `PKPPublication::STATUS_QUEUED` or `PKPPublication::STATUS_PUBLISHED` the issue selection will be hidden. */
 		publicationStatus: {
 			type: Number,
 			required: true,
@@ -112,7 +113,7 @@ export default {
 		 */
 		button() {
 			let button = null;
-			if (this.publicationStatus !== pkp.const.STATUS_PUBLISHED) {
+			if (this.publicationStatus !== pkp.const.PUBLICATION_STATUS_PUBLISHED) {
 				button = {
 					label: this.value ? this.changeIssueLabel : this.assignLabel,
 				};
@@ -128,9 +129,11 @@ export default {
 		 */
 		notice() {
 			let notice = '';
-			if (this.publicationStatus === pkp.const.STATUS_PUBLISHED) {
+			if (this.publicationStatus === pkp.const.PUBLICATION_STATUS_PUBLISHED) {
 				notice = this.publishedNoticeBase;
-			} else if (this.publicationStatus === pkp.const.STATUS_SCHEDULED) {
+			} else if (
+				this.publicationStatus === pkp.const.PUBLICATION_STATUS_SCHEDULED
+			) {
 				notice = this.scheduledNoticeBase;
 			} else if (this.value) {
 				notice = this.assignedNoticeBase;
@@ -167,7 +170,7 @@ export default {
 			const workflowStore = useWorkflowStore();
 
 			workflowStore.workflowAssignToIssue({}, (finishedData) => {
-				if (finishedData.data) {
+				if (finishedData?.data) {
 					this.currentValue = finishedData.data.issueId;
 				}
 			});
diff --git a/src/components/Form/mocks/field-select-issue.js b/src/components/Form/mocks/field-select-issue.js
deleted file mode 100644
index bac809934..000000000
--- a/src/components/Form/mocks/field-select-issue.js
+++ /dev/null
@@ -1,51 +0,0 @@
-export default {
-	name: 'issueId',
-	component: 'field-select-issue',
-	label: 'Issue',
-	publicationStatus: 1, // PKPSubmission::STATUS_QUEUED
-	options: [
-		{
-			value: '',
-			label: '',
-		},
-		{
-			value: '',
-			label: '--- Future Issues ---',
-		},
-		{
-			value: 5,
-			label: 'Vol 2 No 1 2019',
-		},
-		{
-			value: 4,
-			label: 'Vol 1 No 4 2018',
-		},
-		{
-			value: '',
-			label: '--- Back Issues ---',
-		},
-		{
-			value: 3,
-			label: 'Vol 1 No 3 2019',
-		},
-		{
-			value: 2,
-			label: 'Vol 1 No 2 2019',
-		},
-		{
-			value: 1,
-			label: 'Vol 1 No 1 2019',
-		},
-	],
-	value: '',
-	assignLabel: 'Assign to Issue',
-	assignedNoticeBase:
-		'This has been assigned to <a href="{$issueUrl}">{$issueName}</a> but it has not been scheduled for publication.',
-	changeIssueLabel: 'Change Issue',
-	publishedNoticeBase:
-		'Published in <a href="http://example.com/issue/__issueId__">{$issueName}</a>.',
-	scheduledNoticeBase:
-		'Scheduled for publication in <a href="http://example.com/issue/__issueId__">{$issueName}</a>.',
-	unscheduledNotice: 'This has not been scheduled for publication in an issue.',
-	unscheduleLabel: 'Unschedule',
-};
diff --git a/src/composables/useForm.js b/src/composables/useForm.js
index 50e9be85f..76e2d1312 100644
--- a/src/composables/useForm.js
+++ b/src/composables/useForm.js
@@ -601,6 +601,7 @@ export function useForm(_form = {}, {customSubmit} = {}) {
 		initEmptyForm,
 		addPage,
 		addGroup,
+		addField,
 		addFieldText,
 		addFieldSelect,
 		addFieldOptions,
diff --git a/src/composables/useLegacyGridUrl.test.js b/src/composables/useLegacyGridUrl.test.js
index 5b347c05e..858db9911 100644
--- a/src/composables/useLegacyGridUrl.test.js
+++ b/src/composables/useLegacyGridUrl.test.js
@@ -32,16 +32,4 @@ describe('useLegacyGridUrl', () => {
 			'http://mock/index.php/publicknowledge/$$$call$$$/grid/users/reviewer/reviewer-grid/read-review?submissionId=13&reviewAssignmentId=19&stageId=3',
 		);
 	});
-
-	test('modals.publish.AssignToIssueHandler', () => {
-		const {url} = useLegacyGridUrl({
-			component: 'modals.publish.AssignToIssueHandler',
-			op: 'assign',
-			params: {submissionId: 13, publicationId: 14},
-		});
-
-		expect(url.value).toBe(
-			'http://mock/index.php/publicknowledge/$$$call$$$/modals/publish/assign-to-issue/assign?submissionId=13&publicationId=14',
-		);
-	});
 });
diff --git a/src/managers/GalleyManager/useGalleyManagerConfig.js b/src/managers/GalleyManager/useGalleyManagerConfig.js
index c2f4d7af1..2fa36404d 100644
--- a/src/managers/GalleyManager/useGalleyManagerConfig.js
+++ b/src/managers/GalleyManager/useGalleyManagerConfig.js
@@ -85,7 +85,7 @@ export function useGalleyManagerConfig() {
 		const permittedActions = GalleyManagerConfiguration.actions
 			.filter((action) => {
 				if (
-					publication.value.status === pkp.const.STATUS_PUBLISHED &&
+					publication.value.status === pkp.const.PUBLICATION_STATUS_PUBLISHED &&
 					GalleyManagerConfiguration.actionsRequiresUnpublishedState.includes(
 						action,
 					)
@@ -141,12 +141,14 @@ export function useGalleyManagerConfig() {
 
 		if (config.permittedActions.includes(Actions.GALLEY_EDIT)) {
 			const label =
-				publication.status === pkp.const.STATUS_PUBLISHED
+				publication.status === pkp.const.PUBLICATION_STATUS_PUBLISHED
 					? t('common.view')
 					: t('common.edit');
 
 			const icon =
-				publication.status === pkp.const.STATUS_PUBLISHED ? 'View' : 'Edit';
+				publication.status === pkp.const.PUBLICATION_STATUS_PUBLISHED
+					? 'View'
+					: 'Edit';
 
 			actions.push({
 				label,
diff --git a/src/pages/workflow/components/publication/WorkflowPublicationVersionControl.vue b/src/pages/workflow/components/publication/WorkflowPublicationVersionControl.vue
index 4fbbf7eed..9012c19e1 100644
--- a/src/pages/workflow/components/publication/WorkflowPublicationVersionControl.vue
+++ b/src/pages/workflow/components/publication/WorkflowPublicationVersionControl.vue
@@ -31,19 +31,19 @@ const selectedPublication = computed(() =>
 const statusProps = computed(() => {
 	const publication = selectedPublication.value;
 	if (
-		publication.status === pkp.const.STATUS_QUEUED &&
+		publication.status === pkp.const.PUBLICATION_STATUS_QUEUED &&
 		publication.id === props.submission.currentPublicationId
 	) {
 		return {
 			label: t('publication.status.unscheduled'),
 			color: 'bg-stage-declined',
 		};
-	} else if (publication.status === pkp.const.STATUS_SCHEDULED) {
+	} else if (publication.status === pkp.const.PUBLICATION_STATUS_SCHEDULED) {
 		return {
 			label: t('publication.status.scheduled'),
 			color: 'bg-stage-scheduled-for-publishing',
 		};
-	} else if (publication.status === pkp.const.STATUS_PUBLISHED) {
+	} else if (publication.status === pkp.const.PUBLICATION_STATUS_PUBLISHED) {
 		return {
 			label: t('publication.status.published'),
 			color: 'bg-stage-published',
diff --git a/src/pages/workflow/components/publication/WorkflowVersionSideModal.vue b/src/pages/workflow/components/publication/WorkflowVersionSideModal.vue
index c68780c46..a3d51758c 100644
--- a/src/pages/workflow/components/publication/WorkflowVersionSideModal.vue
+++ b/src/pages/workflow/components/publication/WorkflowVersionSideModal.vue
@@ -1,11 +1,11 @@
 <template>
 	<SideModalBody>
 		<template #title>
-			{{ t('publication.scheduledForPublication.versionStage.label') }}
+			{{ t('publication.scheduledForPublication.reviewDetails.label') }}
 		</template>
 		<template #description>
 			<span class="text-lg-medium">
-				{{ t('publication.scheduledForPublication.versionStage.description') }}
+				{{ t('publication.scheduledForPublication.reviewDetails.description') }}
 			</span>
 		</template>
 		<SideModalLayoutBasic>
@@ -29,11 +29,16 @@ const props = defineProps({
 		type: Function,
 		default: () => () => {},
 	},
+	issueCount: {
+		type: Number,
+		default: 0,
+	},
 });
 
 const {form, set} = useWorkflowVersionForm(
 	'publish',
 	props.onCloseFn,
 	props.onSubmitFn,
+	props.issueCount,
 );
 </script>
diff --git a/src/pages/workflow/composables/useWorkflowActions.js b/src/pages/workflow/composables/useWorkflowActions.js
index 839ebdda3..87c4a32aa 100644
--- a/src/pages/workflow/composables/useWorkflowActions.js
+++ b/src/pages/workflow/composables/useWorkflowActions.js
@@ -4,6 +4,7 @@ import {useLocalize} from '@/composables/useLocalize';
 import {useUrl} from '@/composables/useUrl';
 import {useFetch} from '@/composables/useFetch';
 import {useLegacyGridUrl} from '@/composables/useLegacyGridUrl';
+import {useApp} from '@/composables/useApp';
 
 import WorkflowModalChangeSubmissionLanguage from '@/pages/workflow/modals/WorkflowChangeSubmissionLanguageModal.vue';
 import WorkflowVersionDialogBody from '@/pages/workflow/components/publication/WorkflowVersionDialogBody.vue';
@@ -37,28 +38,6 @@ export function useWorkflowActions() {
 		redirectToPage();
 	}
 
-	function workflowAssignToIssue(
-		{submission, selectedPublication},
-		finishedCallback,
-	) {
-		const {openLegacyModal} = useLegacyGridUrl({
-			component: 'modals.publish.AssignToIssueHandler',
-			op: 'assign',
-			params: {
-				submissionId: submission.id,
-				publicationId: selectedPublication.id,
-			},
-		});
-
-		openLegacyModal(
-			{
-				title: t('publication.selectIssue'),
-				closeOnFormSuccessId: pkp.const.FORM_ASSIGN_TO_ISSUE,
-			},
-			finishedCallback,
-		);
-	}
-
 	function workflowViewActivityLog({submission}, finishedCallback) {
 		const {openLegacyModal} = useLegacyGridUrl({
 			component: 'informationCenter.SubmissionInformationCenterHandler',
@@ -84,8 +63,29 @@ export function useWorkflowActions() {
 		);
 	}
 
+	/**
+	 * Open a modal to assign publication stage and optionally assign to an issue.
+	 *
+	 * This function combines version assignment with issue assignment in a single modal.
+	 * The modal will show:
+	 * - Version stage selection (required for unassigned versions)
+	 * - Version significance selection (major/minor)
+	 * - Issue assignment options (only if issues exist in the journal)
+	 *
+	 * Issue assignment options include:
+	 * - No issue assignment (publish immediately)
+	 * - Assign to future issue and publish immediately
+	 * - Assign to future issue and schedule only
+	 * - Assign to current/back issue (publish immediately)
+	 *
+	 * @param {Object} params - Parameters object
+	 * @param {Object} params.selectedPublication - The selected publication
+	 * @param {Object} params.submission - The submission object
+	 * @param {Object} params.pageInitConfig - Page initialization config containing issue count
+	 * @param {Function} finishedCallback - Callback function to execute when finished
+	 */
 	function workflowAssignPublicationStage(
-		{selectedPublication, submission},
+		{selectedPublication, submission, pageInitConfig},
 		finishedCallback,
 	) {
 		const {openSideModal, closeSideModal} = useModal();
@@ -94,9 +94,14 @@ export function useWorkflowActions() {
 			closeSideModal(WorkflowVersionSideModal);
 		}
 
+		// Get issue count from pageInitConfig if available
+		// This determines whether to show issue assignment options
+		const issueCount = pageInitConfig?.publicationSettings?.countIssues || 0;
+
 		openSideModal(WorkflowVersionSideModal, {
 			onCloseFn,
 			onSubmitFn: finishedCallback,
+			issueCount,
 		});
 	}
 
@@ -104,10 +109,23 @@ export function useWorkflowActions() {
 		{pageInitConfig, selectedPublication, submission},
 		finishedCallback,
 	) {
-		// if version is unassigned, we need to assign it to a publication stage first
-		if (!selectedPublication.versionStage) {
+		const {isOJS} = useApp();
+
+		// if version is unassigned
+		// or OJS specific the publication status not to
+		// STATUS_READY_TO_PUBLISH or STATUS_READY_TO_SCHEDULE,
+		// we need to assign the publication stage and status (for issue or issueless context)
+		const requirePublicationStage = isOJS()
+			? !selectedPublication.versionStage ||
+				![
+					pkp.const.PUBLICATION_STATUS_READY_TO_PUBLISH,
+					pkp.const.PUBLICATION_STATUS_READY_TO_SCHEDULE,
+				].includes(selectedPublication.status)
+			: !selectedPublication.versionStage;
+
+		if (requirePublicationStage) {
 			return workflowAssignPublicationStage(
-				{selectedPublication, submission},
+				{selectedPublication, submission, pageInitConfig},
 				(publicationData) =>
 					workflowAssignToIssueAndScheduleForPublication(
 						{pageInitConfig, selectedPublication: publicationData, submission},
@@ -116,72 +134,10 @@ export function useWorkflowActions() {
 			);
 		}
 
-		// if there are no issues, we can schedule the publication immediately
-		if (pageInitConfig.publicationSettings.countIssues === 0) {
-			workflowScheduleForPublication(
-				{submission, selectedPublication},
-				finishedCallback,
-			);
-
-			return;
-		}
-
-		// If the publication is marked as published,
-		// and not assigned to an issue, or assigned to an issue that is not published (e.g. future issue),
-		// we can publish the publication immediately as issueless or continuous publication
-		if (
-			selectedPublication.published &&
-			(selectedPublication.issueId === null ||
-				!pageInitConfig.publicationSettings.issuePublishedStatus[
-					selectedPublication.issueId
-				])
-		) {
-			workflowScheduleForPublication(
-				{submission, selectedPublication},
-				finishedCallback,
-			);
-			return;
-		}
-
-		if (selectedPublication.issueId === null || selectedPublication.published) {
-			const {url} = useLegacyGridUrl({
-				component: 'modals.publish.AssignToIssueHandler',
-				op: 'assign',
-				params: {
-					submissionId: submission.id,
-					publicationId: selectedPublication.id,
-				},
-			});
-			const {openSideModal} = useModal();
-
-			openSideModal(
-				'LegacyAjax',
-				{
-					legacyOptions: {
-						title: t('publication.selectIssue'),
-						url,
-						closeOnFormSuccessId: pkp.const.FORM_ASSIGN_TO_ISSUE,
-					},
-				},
-				{
-					onClose: async ({formId, data}) => {
-						if (data?.issueId || data?.published) {
-							workflowScheduleForPublication(
-								{submission, selectedPublication},
-								finishedCallback,
-							);
-						} else {
-							finishedCallback();
-						}
-					},
-				},
-			);
-		} else {
-			workflowScheduleForPublication(
-				{submission, selectedPublication},
-				finishedCallback,
-			);
-		}
+		workflowScheduleForPublication(
+			{submission, selectedPublication},
+			finishedCallback,
+		);
 	}
 
 	function workflowScheduleForPublication(
@@ -346,7 +302,6 @@ export function useWorkflowActions() {
 
 	return {
 		workflowViewPublishedSubmission,
-		workflowAssignToIssue,
 		workflowViewActivityLog,
 		workflowViewLibrary,
 		workflowAssignToIssueAndScheduleForPublication,
diff --git a/src/pages/workflow/composables/useWorkflowConfig/workflowConfigAuthorOJS.js b/src/pages/workflow/composables/useWorkflowConfig/workflowConfigAuthorOJS.js
index 203b78498..b059a3767 100644
--- a/src/pages/workflow/composables/useWorkflowConfig/workflowConfigAuthorOJS.js
+++ b/src/pages/workflow/composables/useWorkflowConfig/workflowConfigAuthorOJS.js
@@ -274,7 +274,9 @@ export const PublicationConfig = {
 			selectedPublication,
 		}) => {
 			const items = [];
-			if (selectedPublication.status === pkp.const.STATUS_PUBLISHED) {
+			if (
+				selectedPublication.status === pkp.const.PUBLICATION_STATUS_PUBLISHED
+			) {
 				items.push({
 					component: 'WorkflowPublicationEditDisabled',
 					props: {},
diff --git a/src/pages/workflow/composables/useWorkflowConfig/workflowConfigEditorialOJS.js b/src/pages/workflow/composables/useWorkflowConfig/workflowConfigEditorialOJS.js
index 7de5afac9..7328dbed6 100644
--- a/src/pages/workflow/composables/useWorkflowConfig/workflowConfigEditorialOJS.js
+++ b/src/pages/workflow/composables/useWorkflowConfig/workflowConfigEditorialOJS.js
@@ -716,7 +716,9 @@ export const PublicationConfig = {
 			selectedPublication,
 		}) => {
 			const items = [];
-			if (selectedPublication.status === pkp.const.STATUS_PUBLISHED) {
+			if (
+				selectedPublication.status === pkp.const.PUBLICATION_STATUS_PUBLISHED
+			) {
 				items.push({
 					component: 'WorkflowPublicationEditDisabled',
 					props: {},
@@ -768,7 +770,13 @@ export const PublicationConfig = {
 			if (!permissions.canPublish) {
 				return [];
 			}
-			if (selectedPublication.status === pkp.const.STATUS_QUEUED) {
+			if (
+				selectedPublication.status === pkp.const.PUBLICATION_STATUS_QUEUED ||
+				selectedPublication.status ===
+					pkp.const.PUBLICATION_STATUS_READY_TO_PUBLISH ||
+				selectedPublication.status ===
+					pkp.const.PUBLICATION_STATUS_READY_TO_SCHEDULE
+			) {
 				if (
 					hasSubmissionPassedStage(
 						submission,
@@ -799,7 +807,9 @@ export const PublicationConfig = {
 							WorkflowActions.WORKFLOW_ASSIGN_TO_ISSUE_AND_SCHEDULE_FOR_PUBLICATION,
 					},
 				});
-			} else if (selectedPublication.status === pkp.const.STATUS_SCHEDULED) {
+			} else if (
+				selectedPublication.status === pkp.const.PUBLICATION_STATUS_SCHEDULED
+			) {
 				items.push({
 					component: 'WorkflowActionButton',
 					props: {
@@ -817,7 +827,9 @@ export const PublicationConfig = {
 						action: WorkflowActions.WORKFLOW_UNSCHEDULE_PUBLICATION,
 					},
 				});
-			} else if (selectedPublication.status === pkp.const.STATUS_PUBLISHED) {
+			} else if (
+				selectedPublication.status === pkp.const.PUBLICATION_STATUS_PUBLISHED
+			) {
 				items.push({
 					component: 'WorkflowActionButton',
 					props: {
diff --git a/src/pages/workflow/composables/useWorkflowConfig/workflowConfigEditorialOMP.js b/src/pages/workflow/composables/useWorkflowConfig/workflowConfigEditorialOMP.js
index 7760173cf..cc8160d1c 100644
--- a/src/pages/workflow/composables/useWorkflowConfig/workflowConfigEditorialOMP.js
+++ b/src/pages/workflow/composables/useWorkflowConfig/workflowConfigEditorialOMP.js
@@ -479,7 +479,7 @@ export const PublicationConfig = {
 			if (!permissions.canPublish) {
 				return [];
 			}
-			if (selectedPublication.status === pkp.const.STATUS_QUEUED) {
+			if (selectedPublication.status === pkp.const.PUBLICATION_STATUS_QUEUED) {
 				if (
 					hasSubmissionPassedStage(
 						submission,
@@ -506,7 +506,9 @@ export const PublicationConfig = {
 						action: WorkflowActions.WORKFLOW_SCHEDULE_FOR_PUBLICATION,
 					},
 				});
-			} else if (selectedPublication.status === pkp.const.STATUS_SCHEDULED) {
+			} else if (
+				selectedPublication.status === pkp.const.PUBLICATION_STATUS_SCHEDULED
+			) {
 				items.push({
 					component: 'WorkflowActionButton',
 					props: {
@@ -524,7 +526,9 @@ export const PublicationConfig = {
 						action: WorkflowActions.WORKFLOW_UNSCHEDULE_PUBLICATION,
 					},
 				});
-			} else if (selectedPublication.status === pkp.const.STATUS_PUBLISHED) {
+			} else if (
+				selectedPublication.status === pkp.const.PUBLICATION_STATUS_PUBLISHED
+			) {
 				items.push({
 					component: 'WorkflowActionButton',
 					props: {
diff --git a/src/pages/workflow/composables/useWorkflowConfig/workflowConfigEditorialOPS.js b/src/pages/workflow/composables/useWorkflowConfig/workflowConfigEditorialOPS.js
index 72c693249..7f502a80d 100644
--- a/src/pages/workflow/composables/useWorkflowConfig/workflowConfigEditorialOPS.js
+++ b/src/pages/workflow/composables/useWorkflowConfig/workflowConfigEditorialOPS.js
@@ -220,7 +220,7 @@ export const PublicationConfig = {
 			if (!permissions.canPublish) {
 				return [];
 			}
-			if (selectedPublication.status === pkp.const.STATUS_QUEUED) {
+			if (selectedPublication.status === pkp.const.PUBLICATION_STATUS_QUEUED) {
 				if (
 					hasSubmissionPassedStage(
 						submission,
@@ -247,7 +247,9 @@ export const PublicationConfig = {
 						action: WorkflowActions.WORKFLOW_SCHEDULE_FOR_PUBLICATION,
 					},
 				});
-			} else if (selectedPublication.status === pkp.const.STATUS_SCHEDULED) {
+			} else if (
+				selectedPublication.status === pkp.const.PUBLICATION_STATUS_SCHEDULED
+			) {
 				items.push({
 					component: 'WorkflowActionButton',
 					props: {
@@ -265,7 +267,9 @@ export const PublicationConfig = {
 						action: WorkflowActions.WORKFLOW_UNSCHEDULE_PUBLICATION,
 					},
 				});
-			} else if (selectedPublication.status === pkp.const.STATUS_PUBLISHED) {
+			} else if (
+				selectedPublication.status === pkp.const.PUBLICATION_STATUS_PUBLISHED
+			) {
 				items.push({
 					component: 'WorkflowActionButton',
 					props: {
diff --git a/src/pages/workflow/composables/useWorkflowPermissions.js b/src/pages/workflow/composables/useWorkflowPermissions.js
index 221ebf2e3..04a5194c7 100644
--- a/src/pages/workflow/composables/useWorkflowPermissions.js
+++ b/src/pages/workflow/composables/useWorkflowPermissions.js
@@ -52,7 +52,8 @@ export function useWorkflowPermissions({submission, selectedPublication}) {
 
 		if (
 			selectedPublication.value &&
-			selectedPublication.value?.status === pkp.const.STATUS_PUBLISHED
+			selectedPublication.value?.status ===
+				pkp.const.PUBLICATION_STATUS_PUBLISHED
 		) {
 			canEditPublication = false;
 		}
diff --git a/src/pages/workflow/composables/useWorkflowVersionForm.js b/src/pages/workflow/composables/useWorkflowVersionForm.js
index a017385df..0254cddbc 100644
--- a/src/pages/workflow/composables/useWorkflowVersionForm.js
+++ b/src/pages/workflow/composables/useWorkflowVersionForm.js
@@ -5,6 +5,7 @@ import {useFetch} from '@/composables/useFetch';
 import {useLocalize} from '@/composables/useLocalize';
 import {useSubmission} from '@/composables/useSubmission';
 import {useWorkflowStore} from '@/pages/workflow/workflowStore';
+import {useApp} from '@/composables/useApp';
 
 const VERSION_MODE = {
 	CREATE: 'createNewVersion', // the "Create New Version" action in the publication workflow menu
@@ -48,12 +49,14 @@ export function useWorkflowVersionForm(
 	versionMode = 'createNewVersion',
 	closeDialog = () => {},
 	onSubmitFn = null,
+	issueCount = 0,
 ) {
 	const store = useWorkflowStore();
 	const {t} = useLocalize();
 	const {getLatestPublication} = useSubmission();
 	let publications = [];
 	let latestPublication = null;
+	const {isOJS} = useApp();
 
 	// Determine the mode based on the versionMode parameter
 	// versionMode can be one of 'createNewVersion', 'sendToTextEditor', or 'publish'
@@ -92,9 +95,45 @@ export function useWorkflowVersionForm(
 		});
 
 		const {apiUrl: versionUrl} = useUrl(
-			`submissions/${store.submission.id}/publications/${publicationId}/version`,
+			isOJS() && modeState.isPublishMode
+				? `submissions/${store.submission.id}/publications/${publicationId}`
+				: `submissions/${store.submission.id}/publications/${publicationId}/version`,
 		);
 
+		// Prepare request body with version data
+		const requestBody = {
+			versionStage: formData.versionStage,
+			versionIsMinor: formData.versionIsMinor,
+		};
+
+		if (isOJS() && modeState.isPublishMode) {
+			// if the issue count is 0, e.g. issueless context,
+			// we can safely set the issueId to null and status to STATUS_READY_TO_PUBLISH
+			if (issueCount === 0) {
+				requestBody.issueId = null;
+				requestBody.status = pkp.const.PUBLICATION_STATUS_READY_TO_PUBLISH;
+			}
+			// Add issue assignment data if in publish mode and issue assignment is provided
+			else {
+				const issueData = formData.issueId;
+
+				// cehck if the issue selection is valid
+				if (!issueData || !issueData.isValid) {
+					return {
+						data: null,
+						validationError: {
+							issueId: [
+								t('publication.assignToIssue.validation.issueRequired'),
+							],
+						},
+					};
+				}
+
+				requestBody.issueId = issueData.issueId;
+				requestBody.status = issueData.publicationStatus;
+			}
+		}
+
 		const {
 			fetch,
 			data: publicationData,
@@ -102,10 +141,7 @@ export function useWorkflowVersionForm(
 			isSuccess,
 		} = useFetch(versionUrl, {
 			method: shouldCreateNewVersion ? 'POST' : 'PUT',
-			body: {
-				versionStage: formData.versionStage,
-				versionIsMinor: formData.versionIsMinor,
-			},
+			body: requestBody,
 			expectValidationError: true,
 		});
 
@@ -138,6 +174,7 @@ export function useWorkflowVersionForm(
 	const {
 		form,
 		initEmptyForm,
+		addField,
 		addFieldSelect,
 		addPage,
 		addGroup,
@@ -162,6 +199,15 @@ export function useWorkflowVersionForm(
 	}
 
 	function getVersionIsMinorField({allowMinorVersion, currentValue}) {
+		const versionMinorValue =
+			modeState.isPublishMode && store.selectedPublication?.versionStage
+				? store.selectedPublication.versionMinor
+					? 'true'
+					: 'false'
+				: currentValue === 'true' && !allowMinorVersion
+					? 'false'
+					: currentValue;
+
 		return {
 			label: t('publication.revisionSignificance.label'),
 			description: t('publication.revisionSignificance.description'),
@@ -175,8 +221,7 @@ export function useWorkflowVersionForm(
 			],
 			size: 'large',
 			isRequired: modeState.isPublishMode,
-			value:
-				currentValue === 'true' && !allowMinorVersion ? 'false' : currentValue,
+			value: versionMinorValue,
 			showWhen: modeState.isTextEditorMode
 				? ['sendToVersion', getUnassignedVersions()]
 				: undefined,
@@ -227,10 +272,12 @@ export function useWorkflowVersionForm(
 		showErrorFooter: false,
 		spacingVariant: 'fullWidth',
 	});
+
 	addPage('default', {
 		submitButton: {label: t('common.confirm')},
 		cancelButton: {label: t('common.cancel')},
 	});
+
 	addGroup('default');
 
 	onMounted(() => {
@@ -266,6 +313,7 @@ export function useWorkflowVersionForm(
 			description: t('publication.versionStage.description'),
 			options: store.versionStageOptions,
 			size: 'large',
+			value: store.selectedPublication?.versionStage || null,
 			isRequired: modeState.isPublishMode,
 			showWhen: modeState.isTextEditorMode
 				? ['sendToVersion', getUnassignedVersions()]
@@ -282,10 +330,33 @@ export function useWorkflowVersionForm(
 			}),
 		);
 
+		// Issue assignment fields only visible when
+		// for OJS
+		// it's in publish mode
+		// have issues
+		if (modeState.isPublishMode && issueCount > 0 && isOJS()) {
+			addField('issueId', {
+				component: 'FieldIssueSelection',
+				issueCount: issueCount,
+				publication: store.selectedPublication,
+				isRequired: true,
+			});
+		}
+
 		setValue(
 			'versionSource',
 			modeState.isCreateMode ? latestPublication?.id : null,
 		);
+
+		// at initial setup, will set the version information(major/minor) only when
+		// at the publish mode
+		// and already have a verison stage assigned
+		if (modeState.isPublishMode && store.selectedPublication?.versionStage) {
+			setValue(
+				'versionIsMinor',
+				store.selectedPublication?.versionMinor ? 'true' : 'false',
+			);
+		}
 	});
 
 	watch(