diff --git a/src/components/Form/FormGroup.vue b/src/components/Form/FormGroup.vue
index e2edb9c3b..b0a80ab65 100644
--- a/src/components/Form/FormGroup.vue
+++ b/src/components/Form/FormGroup.vue
@@ -75,8 +75,9 @@ 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 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';
@@ -110,8 +111,9 @@ export default {
 		FieldRichTextarea,
 		FieldRichText,
 		FieldSelect,
-		FieldSelectIssue,
+		// FieldSelectIssue,
 		FieldSelectIssues,
+		FieldIssueSelection,
 		FieldSelectSubmissions,
 		FieldSelectUsers,
 		FieldShowEnsuringLink,
diff --git a/src/components/Form/fields/FieldIssueSelection.vue b/src/components/Form/fields/FieldIssueSelection.vue
new file mode 100644
index 000000000..dcd5095e8
--- /dev/null
+++ b/src/components/Form/fields/FieldIssueSelection.vue
@@ -0,0 +1,400 @@
+<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="isRequired"
+						: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: false,
+	},
+	isPhpForm: {
+		type: Boolean,
+		default: false,
+	},
+});
+
+const emit = defineEmits(['change', 'set-errors', 'set']);
+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 () => {
+	// we 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;
+});
+
+const shouldFetchPublishedIssues = computed(() => {
+	const option = assignmentOptions.value.find(
+		(opt) => opt.value === selectedAssignmentType.value,
+	);
+	return option?.isPublished;
+});
+
+const isValid = computed(() => {
+	const option = assignmentOptions.value.find(
+		(opt) => opt.value === selectedAssignmentType.value,
+	);
+	return option?.isPublished === null || selectedIssueId.value;
+});
+
+const publicationStatus = computed(() => {
+	const option = assignmentOptions.value.find(
+		(opt) => opt.value === selectedAssignmentType.value,
+	);
+	return option?.status || null;
+});
+
+const validationErrors = computed(() => {
+	if (!isValid.value) {
+		return [t('publication.assignToIssue.validation.issueRequired')];
+	}
+	return [];
+});
+
+// Emit validation errors to the form system
+// FIXME : NOT propagating to top level from component
+watch(
+	validationErrors,
+	(errors) => {
+		if (errors.length > 0) {
+			emit('set-errors', props.name, errors);
+		} else {
+			emit('set-errors', props.name, []);
+		}
+	},
+	{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) {
+			// TODO: Remove this after testing
+			// console.log('PHP Form - Emitting issueId, updating hiddenFields:', {
+			// 	issueId: selectedIssueId.value, // User's issue selection
+			// 	assignmentType: selectedAssignmentType.value, // User's assignment type selection
+			// 	publicationStatus: publicationStatus.value, // Calculated status from user's selection
+			// });
+
+			emit('change', 'issueId', 'value', selectedIssueId.value);
+			emit('change', 'prePublishStatus', 'value', publicationStatus.value);
+		}
+	} else {
+		const value = {
+			assignmentType: selectedAssignmentType.value, // User's assignment type selection
+			issueId: selectedIssueId.value, // User's issue selection
+			publicationStatus: publicationStatus.value, // Calculated status from user's selection
+		};
+
+		// TODO: Remove this after testing
+		// console.log('Vue Form - FieldIssueSelection emitting:', {
+		// 	name: props.name,
+		// 	formId: props.formId,
+		// 	value: value,
+		// 	assignmentType: selectedAssignmentType.value, // User's selection
+		// 	selectedIssueId: selectedIssueId.value, // User's selection
+		// 	publicationStatus: publicationStatus.value, // Calculated status
+		// });
+
+		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();
+});
+
+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 &&
+		selectedIssueId.value &&
+		showIssueDropdown.value
+	) {
+		await fetchIssues();
+	}
+
+	// FIXME : remove this once the emit issue for hidden field is fixed
+	if (props.isPhpForm) {
+		$('input[name="prePublishStatus"]').hide();
+	}
+
+	emitValue();
+});
+</script>
+
+<style lang="less" scoped>
+.pkpFormGroup--issueSelection {
+	border: 1px solid #ddd;
+	border-radius: 2px;
+
+	.pkpFormGroup__heading {
+		border-bottom: 1px solid #ddd;
+		margin: -2rem 0rem 2rem 0rem;
+		padding: 1.5rem 0rem 2rem 0rem;
+		border-radius: 4px 4px 0 0;
+		float: none;
+		width: 100%;
+		padding-inline-end: 2rem;
+	}
+
+	.pkpFormGroup__fields {
+		float: none;
+		width: 100%;
+		padding-inline-start: 0;
+
+		> * + * {
+			margin-top: 1.5rem;
+		}
+	}
+
+	.pkpFormField__issueDropdown {
+		padding-top: 1rem;
+		margin-top: 1.5rem;
+	}
+}
+</style>
diff --git a/src/components/Form/fields/FieldSelectIssue.vue b/src/components/Form/fields/FieldSelectIssue.vue
index 9dffd4d5f..9f5b975ac 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">
@@ -167,7 +168,7 @@ export default {
 			const workflowStore = useWorkflowStore();
 
 			workflowStore.workflowAssignToIssue({}, (finishedData) => {
-				if (finishedData.data) {
+				if (finishedData?.data) {
 					this.currentValue = finishedData.data.issueId;
 				}
 			});
diff --git a/src/composables/useForm.js b/src/composables/useForm.js
index 161a8679e..c1681aff5 100644
--- a/src/composables/useForm.js
+++ b/src/composables/useForm.js
@@ -198,6 +198,10 @@ export function useForm(_form = {}, {customSubmit} = {}) {
 		}
 	}
 
+	function setHiddenValue(name, value) {
+		form.value.hiddenFields[name] = value;
+	}
+
 	/**
 	 * Clear a specific form field
 	 * @param {string} fieldName - The name of the field to clear
@@ -535,6 +539,7 @@ export function useForm(_form = {}, {customSubmit} = {}) {
 		set,
 		setValue,
 		setValues,
+		setHiddenValue,
 		getValue,
 		removeFieldValue,
 		isFieldValueArray,
@@ -552,6 +557,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..651e239d3 100644
--- a/src/composables/useLegacyGridUrl.test.js
+++ b/src/composables/useLegacyGridUrl.test.js
@@ -33,15 +33,15 @@ describe('useLegacyGridUrl', () => {
 		);
 	});
 
-	test('modals.publish.AssignToIssueHandler', () => {
-		const {url} = useLegacyGridUrl({
-			component: 'modals.publish.AssignToIssueHandler',
-			op: 'assign',
-			params: {submissionId: 13, publicationId: 14},
-		});
+	// 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',
-		);
-	});
+	// 	expect(url.value).toBe(
+	// 		'http://mock/index.php/publicknowledge/$$$call$$$/modals/publish/assign-to-issue/assign?submissionId=13&publicationId=14',
+	// 	);
+	// });
 });
diff --git a/src/pages/workflow/WorkflowPageOJS.vue b/src/pages/workflow/WorkflowPageOJS.vue
index 25df92228..d893435df 100644
--- a/src/pages/workflow/WorkflowPageOJS.vue
+++ b/src/pages/workflow/WorkflowPageOJS.vue
@@ -23,6 +23,7 @@ import WorkflowNotificationDisplay from './components/primary/WorkflowNotificati
 import WorkflowListingEmails from './components/primary/WorkflowListingEmails.vue';
 import WorkflowPaymentDropdown from './components/header/WorkflowPaymentDropdown.vue';
 import WorkflowPublicationForm from './components/publication/WorkflowPublicationForm.vue';
+import WorkflowPublicationFormIssue from './components/publication/WorkflowPublicationFormIssue.vue';
 import WorkflowPublicationJats from './components/publication/WorkflowPublicationJats.vue';
 import WorkflowPublicationVersionControl from './components/publication/WorkflowPublicationVersionControl.vue';
 import WorkflowChangeSubmissionLanguage from './components/publication/WorkflowChangeSubmissionLanguage.vue';
@@ -61,6 +62,7 @@ const Components = markRaw({
 	WorkflowPaymentDropdown,
 	WorkflowPrimaryBasicMetadata,
 	WorkflowPublicationForm,
+	WorkflowPublicationFormIssue,
 	WorkflowPublicationJats,
 	WorkflowPublicationVersionControl,
 	WorkflowChangeSubmissionLanguage,
diff --git a/src/pages/workflow/components/publication/WorkflowPublicationFormIssue.vue b/src/pages/workflow/components/publication/WorkflowPublicationFormIssue.vue
new file mode 100644
index 000000000..e336959db
--- /dev/null
+++ b/src/pages/workflow/components/publication/WorkflowPublicationFormIssue.vue
@@ -0,0 +1,53 @@
+<template>
+	<div v-if="displayNoFieldsEnabled" class="text-lg-normal">
+		{{ noFieldsMessage }}
+	</div>
+	<div v-else class="-m-5">
+		<PkpForm
+			v-if="form"
+			v-bind="form"
+			@set="set"
+			@success="triggerDataChange"
+		></PkpForm>
+	</div>
+</template>
+
+<script setup>
+import {computed, watch} from 'vue';
+import PkpForm from '@/components/Form/Form.vue';
+import {useFetch} from '@/composables/useFetch';
+import {useForm} from '@/composables/useForm';
+import {useUrl} from '@/composables/useUrl';
+import {useWorkflowPublicationFormIssue} from '../../composables/useWorkflowPublicationFormIssue';
+import {useDataChanged} from '@/composables/useDataChanged';
+
+const props = defineProps({
+	canEdit: {type: Boolean, required: true},
+	submission: {type: Object, required: true},
+	publication: {type: Object, required: true},
+});
+
+const relativeUrl = computed(() => {
+	return `submissions/${props.submission.id}/publications/${props.publication.id}/_components/issue`;
+});
+
+const {apiUrl: publicationFormUrl} = useUrl(relativeUrl);
+const {data: publicationForm, fetch: fetchForm} = useFetch(publicationFormUrl);
+
+watch(
+	relativeUrl,
+	() => {
+		fetchForm();
+	},
+	{immediate: true},
+);
+
+watch(publicationForm, (newPublicationForm) => {
+	newPublicationForm.canSubmit = props.canEdit;
+});
+
+const {set, form} = useForm(publicationForm);
+useWorkflowPublicationFormIssue(form);
+
+const {triggerDataChange} = useDataChanged();
+</script>
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..ec87e490b 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,27 +38,41 @@ 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,
-		);
-	}
+	/**
+	 * TODO: need this anymore ?
+	 * Legacy function to assign a publication to an issue.
+	 *
+	 * NOTE: This function is kept for backward compatibility.
+	 * For new implementations, consider using the combined version assignment
+	 * and issue assignment functionality in workflowAssignPublicationStage.
+	 *
+	 * @param {Object} params - Parameters object
+	 * @param {Object} params.submission - The submission object
+	 * @param {Object} params.selectedPublication - The selected publication
+	 * @param {Function} finishedCallback - Callback function to execute when finished
+	 */
+	// function workflowAssignToIssue(
+	// 	{submission, selectedPublication},
+	// 	finishedCallback,
+	// ) {
+	// 	console.log('Legacy workflowAssignToIssue called');
+	// 	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({
@@ -84,8 +99,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 +130,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 +145,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.STATUS_READY_TO_PUBLISH,
+					pkp.const.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 +170,85 @@ export function useWorkflowActions() {
 			);
 		}
 
+		workflowScheduleForPublication(
+			{submission, selectedPublication},
+			finishedCallback,
+		);
+
+		// TODO : Rest of the codes are dead code, need cleanup
+
 		// if there are no issues, we can schedule the publication immediately
-		if (pageInitConfig.publicationSettings.countIssues === 0) {
-			workflowScheduleForPublication(
-				{submission, selectedPublication},
-				finishedCallback,
-			);
+		// if (pageInitConfig.publicationSettings.countIssues === 0) {
+		// 	workflowScheduleForPublication(
+		// 		{submission, selectedPublication},
+		// 		finishedCallback,
+		// 	);
 
-			return;
-		}
+		// 	return;
+		// }
 
-		// If the publication is marked as published,
+		// If the publication is marked as ready to publish,
 		// 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,
-			);
-		}
+		// if (
+		// 	selectedPublication.status === pkp.const.STATUS_READY_TO_PUBLISH &&
+		// 	(selectedPublication.issueId === null ||
+		// 		!pageInitConfig.publicationSettings.issuePublishedStatus[
+		// 			selectedPublication.issueId
+		// 		])
+		// ) {
+		// 	workflowScheduleForPublication(
+		// 		{submission, selectedPublication},
+		// 		finishedCallback,
+		// 	);
+		// 	return;
+		// }
+
+		// if (
+		// 	selectedPublication.issueId === null ||
+		// 	selectedPublication.status === pkp.const.STATUS_READY_TO_PUBLISH
+		// ) {
+		// 	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?.status === pkp.const.STATUS_READY_TO_PUBLISH
+		// 				) {
+		// 					workflowScheduleForPublication(
+		// 						{submission, selectedPublication},
+		// 						finishedCallback,
+		// 					);
+		// 				} else {
+		// 					finishedCallback();
+		// 				}
+		// 			},
+		// 		},
+		// 	);
+		// } else {
+		// 	workflowScheduleForPublication(
+		// 		{submission, selectedPublication},
+		// 		finishedCallback,
+		// 	);
+		// }
 	}
 
 	function workflowScheduleForPublication(
@@ -346,7 +413,7 @@ export function useWorkflowActions() {
 
 	return {
 		workflowViewPublishedSubmission,
-		workflowAssignToIssue,
+		// workflowAssignToIssue,
 		workflowViewActivityLog,
 		workflowViewLibrary,
 		workflowAssignToIssueAndScheduleForPublication,
diff --git a/src/pages/workflow/composables/useWorkflowConfig/workflowConfigEditorialOJS.js b/src/pages/workflow/composables/useWorkflowConfig/workflowConfigEditorialOJS.js
index 7de5afac9..69fcf8384 100644
--- a/src/pages/workflow/composables/useWorkflowConfig/workflowConfigEditorialOJS.js
+++ b/src/pages/workflow/composables/useWorkflowConfig/workflowConfigEditorialOJS.js
@@ -768,7 +768,11 @@ export const PublicationConfig = {
 			if (!permissions.canPublish) {
 				return [];
 			}
-			if (selectedPublication.status === pkp.const.STATUS_QUEUED) {
+			if (
+				selectedPublication.status === pkp.const.STATUS_QUEUED ||
+				selectedPublication.status === pkp.const.STATUS_READY_TO_PUBLISH ||
+				selectedPublication.status === pkp.const.STATUS_READY_TO_SCHEDULE
+			) {
 				if (
 					hasSubmissionPassedStage(
 						submission,
@@ -992,9 +996,8 @@ export const PublicationConfig = {
 		}) => {
 			return [
 				{
-					component: 'WorkflowPublicationForm',
+					component: 'WorkflowPublicationFormIssue',
 					props: {
-						formName: 'issue',
 						submission,
 						publication: selectedPublication,
 						canEdit: permissions.canEditPublication,
diff --git a/src/pages/workflow/composables/useWorkflowPublicationFormIssue.js b/src/pages/workflow/composables/useWorkflowPublicationFormIssue.js
new file mode 100644
index 000000000..33e162ee2
--- /dev/null
+++ b/src/pages/workflow/composables/useWorkflowPublicationFormIssue.js
@@ -0,0 +1,123 @@
+import {useForm} from '@/composables/useForm';
+import {useFetch} from '@/composables/useFetch';
+import {useUrl} from '@/composables/useUrl';
+import {watch, computed} from 'vue';
+export function useWorkflowPublicationFormIssue(form) {
+	const {setHiddenValue, getField, getValue, setValue} = useForm(form);
+
+	/**
+	 * Assignments & prepublication status
+	 */
+	const {apiUrl: assignmentsUrl} = useUrl('issues/assignmentOptions');
+	const {fetch: fetchAssignments, data: assignments} = useFetch(assignmentsUrl);
+	fetchAssignments();
+
+	// Calculate list of assignment options
+	const assignmentOptions = computed(() => {
+		if (!form.value || !assignments.value) {
+			return [];
+		}
+		return assignments.value.map((assignment) => ({
+			label: assignment.label,
+			value: assignment.value,
+		}));
+	});
+
+	// Calculate which assignments should be displaying issue field
+	const showWhenAssignmentIds = computed(() => {
+		if (!form.value || !assignments.value) {
+			return [];
+		}
+
+		return assignments.value
+			.filter((assignment) => assignment.isPublished !== null)
+			.map((assignment) => assignment.value);
+	});
+
+	// Currently selected assignemnt option
+	const currentAssignmentOption = computed(() => {
+		if (form.value && assignments.value && getField('assignment')?.value) {
+			const option = assignments.value.find(
+				(assignment) => assignment.value === getField('assignment')?.value,
+			);
+			return option;
+		}
+		return null;
+	});
+
+	// Apply assignmentOptions to the form when changes
+	watch(assignmentOptions, (newAssignmentOptions) => {
+		const assignmentField = getField('assignment');
+
+		assignmentField.options = newAssignmentOptions;
+
+		const optionsWhichShowsIssues = newAssignmentOptions
+			.filter((option) => option.isPublished !== null)
+			.map((option) => option.value);
+		const issueIdField = getField('issueId');
+		issueIdField.showWhen = ['assignment', optionsWhichShowsIssues];
+	});
+
+	// Update prePublishStatus
+	watch(currentAssignmentOption, (newAssignmentOption) => {
+		setHiddenValue('prePublishStatus', newAssignmentOption.status);
+	});
+
+	/** Issues */
+	const {apiUrl: issuesUrl} = useUrl('issues');
+	const issuesQuery = computed(() => ({
+		isPublished: currentAssignmentOption.value.isPublished,
+		count: 100,
+	}));
+	const {fetch: fetchIssues, data: issues} = useFetch(issuesUrl, {
+		query: issuesQuery,
+	});
+
+	// fetch issues when the option changes, and isPublished is not null
+	watch(currentAssignmentOption, (newCurrentAssignmentOption) => {
+		if (newCurrentAssignmentOption) {
+			if (newCurrentAssignmentOption.isPublished !== null) {
+				fetchIssues({clearData: true});
+			}
+		}
+	});
+
+	// list of issue options
+	const issueOptions = computed(() => {
+		if (
+			form.value &&
+			issues.value &&
+			currentAssignmentOption.value?.isPublished !== null
+		) {
+			return issues.value.items.map((issue) => ({
+				id: issue.id,
+				label: issue.identification,
+				value: issue.id,
+			}));
+		}
+
+		return [];
+	});
+
+	// applying issue options
+	watch(issueOptions, (newIssueOptions) => {
+		const issueIdField = getField('issueId');
+
+		issueIdField.options = newIssueOptions;
+
+		// update value if its not within options
+		if (
+			newIssueOptions.length &&
+			!newIssueOptions.find((issue) => getValue('issueId') === issue.value)
+		) {
+			setValue('issueId', newIssueOptions[0].value);
+		}
+	});
+
+	// applying showWhen
+	watch(showWhenAssignmentIds, (newShowWhenAssignmentIds) => {
+		const issueIdField = getField('issueId');
+
+		issueIdField.showWhen = ['assignment', newShowWhenAssignmentIds];
+	});
+}
diff --git a/src/pages/workflow/composables/useWorkflowVersionForm.js b/src/pages/workflow/composables/useWorkflowVersionForm.js
index a017385df..41ffcbdf4 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'
@@ -95,6 +98,29 @@ export function useWorkflowVersionForm(
 			`submissions/${store.submission.id}/publications/${publicationId}/version`,
 		);
 
+		// Prepare request body with version data
+		const requestBody = {
+			versionStage: formData.versionStage,
+			versionIsMinor: formData.versionIsMinor,
+		};
+
+		if (isOJS()) {
+			// if the issue count is 0, e.g. issueless context,
+			// we can safely set the issueId and status to null and
+			// STATUS_READY_TO_PUBLISH
+			if (issueCount === 0) {
+				requestBody.issueId = null;
+				requestBody.prePublishStatus = pkp.const.STATUS_READY_TO_PUBLISH;
+			}
+			// Add issue assignment data if in publish mode and issue assignment is provided
+			else if (modeState.isPublishMode && formData.issueAssignment) {
+				const issueData = formData.issueAssignment;
+
+				requestBody.issueId = issueData.issueId;
+				requestBody.prePublishStatus = issueData.publicationStatus;
+			}
+		}
+
 		const {
 			fetch,
 			data: publicationData,
@@ -102,10 +128,7 @@ export function useWorkflowVersionForm(
 			isSuccess,
 		} = useFetch(versionUrl, {
 			method: shouldCreateNewVersion ? 'POST' : 'PUT',
-			body: {
-				versionStage: formData.versionStage,
-				versionIsMinor: formData.versionIsMinor,
-			},
+			body: requestBody,
 			expectValidationError: true,
 		});
 
@@ -138,6 +161,7 @@ export function useWorkflowVersionForm(
 	const {
 		form,
 		initEmptyForm,
+		addField,
 		addFieldSelect,
 		addPage,
 		addGroup,
@@ -227,11 +251,21 @@ export function useWorkflowVersionForm(
 		showErrorFooter: false,
 		spacingVariant: 'fullWidth',
 	});
+
 	addPage('default', {
 		submitButton: {label: t('common.confirm')},
 		cancelButton: {label: t('common.cancel')},
 	});
-	addGroup('default');
+
+	addGroup(
+		'default',
+		// FIXME: adding group breaking the page layout
+		// {
+		// 	pageId: 'default',
+		// 	label: t('publication.scheduledForPublication.versionStage.label'),
+		// 	description: t('publication.scheduledForPublication.versionStage.description'),
+		// }
+	);
 
 	onMounted(() => {
 		latestPublication = getLatestPublication(store.submission);
@@ -243,6 +277,7 @@ export function useWorkflowVersionForm(
 				label: t('publication.sendToTextEditor.label'),
 				options: buildPublicationOptions({withCreateOption: true}),
 				size: 'large',
+				// groupId: 'default', // FIXME: adding group breaking the page layout
 				isRequired: modeState.isTextEditorMode,
 				showWhen: !modeState.isTextEditorMode ? [] : undefined,
 			});
@@ -254,6 +289,7 @@ export function useWorkflowVersionForm(
 			description: t('publication.versionSource.create.description'),
 			options: buildPublicationOptions(),
 			size: 'large',
+			// groupId: 'default', // FIXME: adding group breaking the page layout
 			showWhen: !modeState.isCreateMode
 				? ['sendToVersion', 'create']
 				: undefined,
@@ -266,6 +302,8 @@ export function useWorkflowVersionForm(
 			description: t('publication.versionStage.description'),
 			options: store.versionStageOptions,
 			size: 'large',
+			value: store.selectedPublication?.versionStage || null,
+			// groupId: 'default', // FIXME: adding group breaking the page layout
 			isRequired: modeState.isPublishMode,
 			showWhen: modeState.isTextEditorMode
 				? ['sendToVersion', getUnassignedVersions()]
@@ -282,6 +320,18 @@ 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('issueAssignment', {
+				component: 'FieldIssueSelection',
+				issueCount: issueCount,
+				publication: store.selectedPublication,
+			});
+		}
+
 		setValue(
 			'versionSource',
 			modeState.isCreateMode ? latestPublication?.id : null,