diff --git a/public/globals.js b/public/globals.js
index aeffbca39..6e5612b5f 100644
--- a/public/globals.js
+++ b/public/globals.js
@@ -190,6 +190,7 @@ window.pkp = {
 		'common.deselect': 'Deselect',
 		'common.details': 'Details',
 		'common.download': 'Download',
+		'common.dueDate': 'Due Date',
 		'common.edit': 'Edit',
 		'common.editItem': 'Edit {$name}',
 		'common.emailTemplates': 'Email Templates',
@@ -210,6 +211,7 @@ window.pkp = {
 		'common.lastActivity': 'Last activity recorded on {$date}.',
 		'common.loaded': 'Loaded',
 		'common.loading': 'Loading',
+		'common.me': 'Me',
 		'common.moreActions': 'More Actions',
 		'common.name': 'Name',
 		'common.navigation.user': 'User Navigation',
@@ -263,6 +265,9 @@ window.pkp = {
 		'common.viewWithName': 'View {$name}',
 		'common.yes': 'Yes',
 		'common.yesContinue': 'Yes, Continue',
+		'common.yetToBegin': 'Yet to begin',
+		'common.inProgress': 'In Progress',
+		'common.closed': 'Closed',
 		'context.context': 'Journal',
 		'contributor.listPanel.preview': 'Preview',
 		'contributor.listPanel.preview.abbreviated': 'Abbreviated',
@@ -374,6 +379,38 @@ window.pkp = {
 			'Confirm Delete of Incomplete Submissions',
 		'dashboard.submitRevisions': 'Submit revisions',
 		'dashboard.toBePublishedInIssue': 'To be published in issue {$issue}',
+		'discussion.title': 'Desk Review Tasks & Discussions',
+		'discussion.description':
+			'Use this space to start discussions, assign tasks to others, or create your personal task list to help you move this submission to the next stage.',
+		'discussion.form.templatesLabel': 'Templates to get you started!',
+		'discussion.form.description':
+			'Open for What? Open to What? Beyond Content',
+		'discussion.form.detailsDescription':
+			'Use this space to share essential information.',
+		'discussion.form.detailsNameDescription':
+			'Please enter the name for this task and discussion.',
+		'discussion.form.detailsParticipantsDescription':
+			'You have the option to assign participants or allocate it solely to yourself.',
+		'discussion.form.discussionDescription':
+			'You can start a discussion thread here by adding a message. This space is also available for providing a brief overview of the task, including any key details, goals, or specific instructions to help guide the assignees.',
+		'discussion.form.taskInfoLabel': 'Enter task information',
+		'discussion.form.taskInformation': 'Task Information',
+		'discussion.form.taskInfoDescription':
+			'Please enter the tasks details here to help manage this task effectively.',
+		'discussion.form.taskInfoAssigneesLabel':
+			'Responsible to complete this task',
+		'discussion.form.taskInfoAssigneesDescription':
+			'If there is a specific participant designated to complete this task, please assign it to them here.',
+		'discussion.form.taskInfoDueDateDescription':
+			'If there is a deadline for this task, you can indicate it here. The due date will be communicated and established for each participant assigned to this task.',
+		'discussion.form.createDontStartTask': 'Create Task (Do Not Start)',
+		'discussion.form.startTaskUponSaving': 'Begin Task Upon Saving',
+		'discussion.template.taskDescription':
+			'This task template auto-fills the task name, due date, description, and roles. After selecting the template, you can modify any details before saving the task.',
+		'discussion.template.discussionDescription':
+			'This discussion template pre-fills the name, participants, and starting message. You can adjust the details before starting.',
+		'discussion.messageFrom': 'Message from {$from}',
+		'discussion.addNewMessage': 'Add New Message',
 		'doi.manager.versions.countStatement': 'There are {$count} versions.',
 		'doi.manager.versions.modalTitle': 'DOIs for all versions',
 		'doi.manager.versions.view': 'View all',
@@ -790,6 +827,8 @@ window.pkp = {
 		'submission.citations': 'References',
 		'submission.contributors': 'List of Contributors',
 		'submission.copyediting': 'Copyediting',
+		'submission.discussion': 'Discussion',
+		'submission.task': 'Task',
 		'submission.files': 'Files',
 		'submission.files.downloadAll': 'Download All Files',
 		'submission.finalDraft': 'Draft Files',
@@ -851,12 +890,6 @@ window.pkp = {
 		'submission.wizard.submissionCancel': 'Cancel submission',
 		'submissions.declined': 'Declined',
 		'submissions.incomplete': 'Incomplete',
-		'tasks.discussions.title': 'Desk Review Tasks & Discussions',
-		'tasks.discussions.description':
-			'Use this space to start discussions, assign tasks to others, or create your personal task list to help you move this submission to the next stage.',
-		'tasks.discussions.form.title': 'Desk Review Discussions and Tasks',
-		'tasks.discussions.form.description':
-			'Open for What? Open to What? Beyond Content',
 		'user.affiliation': 'Affiliation',
 		'user.affiliations': 'Affiliations',
 		'user.affiliations.deleteModal.message':
diff --git a/src/components/Form/FormFieldLabel.vue b/src/components/Form/FormFieldLabel.vue
index 8db34a085..b226e70aa 100644
--- a/src/components/Form/FormFieldLabel.vue
+++ b/src/components/Form/FormFieldLabel.vue
@@ -1,5 +1,5 @@
 <template>
-	<label :for="controlId" class="pkpFormFieldLabel">
+	<label v-if="label" :for="controlId" class="pkpFormFieldLabel">
 		<template v-if="localeLabel">
 			<span class="aria-hidden">{{ localeLabel }}</span>
 			<span class="-screenReader">{{ multilingualLabel }}</span>
diff --git a/src/components/Form/FormGroup.vue b/src/components/Form/FormGroup.vue
index 862eeae99..1ef2e5312 100644
--- a/src/components/Form/FormGroup.vue
+++ b/src/components/Form/FormGroup.vue
@@ -1,12 +1,13 @@
 <template>
 	<fieldset class="pkpFormGroup -pkpClearfix" :class="spacingStyle">
-		<div v-if="label" class="pkpFormGroup__heading">
-			<legend class="pkpFormGroup__legend">{{ label }}</legend>
-			<div
-				v-if="description"
-				v-strip-unsafe-html="description"
-				class="pkpFormGroup__description semantic-defaults"
-			></div>
+		<div v-if="label || groupComponent" class="pkpFormGroup__heading">
+			<template v-if="groupComponent">
+				<component
+					:is="groupComponent.component"
+					v-bind="groupComponent.props"
+				></component>
+			</template>
+			<FormGroupHeader v-else :heading="label" :description="description" />
 		</div>
 		<div class="pkpFormGroup__fields">
 			<template v-for="field in fieldsInGroup">
@@ -24,7 +25,7 @@
 						>
 							<component
 								:is="field.component"
-								v-bind="field"
+								v-bind="{...field, ...field.componentProps}"
 								:all-errors="errors"
 								:locale-key="locale.key"
 								:form-id="formId"
@@ -39,7 +40,7 @@
 				<template v-else>
 					<component
 						:is="field.component"
-						v-bind="field"
+						v-bind="{...field, ...field.componentProps}"
 						:key="field.name"
 						:all-errors="errors"
 						:form-id="formId"
@@ -55,6 +56,7 @@
 </template>
 
 <script>
+import FormGroupHeader from './FormGroupHeader.vue';
 import FieldAffiliations from './fields/FieldAffiliations.vue';
 import FieldArchivingPn from './fields/FieldArchivingPn.vue';
 import FieldAutosuggestPreset from './fields/FieldAutosuggestPreset.vue';
@@ -89,6 +91,7 @@ import {shouldShowFieldWithinGroup} from './formHelpers';
 export default {
 	name: 'FormGroup',
 	components: {
+		FormGroupHeader,
 		FieldAffiliations,
 		FieldArchivingPn,
 		FieldAutosuggestPreset,
@@ -123,6 +126,7 @@ export default {
 		label: String,
 		description: String,
 		pageId: String,
+		groupComponent: Object,
 		fields: Array,
 		errors: Object,
 		formId: String,
diff --git a/src/components/Form/FormGroupHeader.vue b/src/components/Form/FormGroupHeader.vue
new file mode 100644
index 000000000..e44cdba72
--- /dev/null
+++ b/src/components/Form/FormGroupHeader.vue
@@ -0,0 +1,30 @@
+<template>
+	<component
+		:is="headingElement"
+		class="mb-2 inline-block text-2xl-bold font-bold"
+	>
+		{{ heading }}
+	</component>
+	<div
+		v-if="description"
+		v-strip-unsafe-html="description"
+		class="semantic-defaults text-lg-normal"
+	></div>
+</template>
+
+<script setup>
+defineProps({
+	heading: {
+		type: String,
+		default: () => '',
+	},
+	headingElement: {
+		type: String,
+		default: () => 'h3',
+	},
+	description: {
+		type: String,
+		default: () => '',
+	},
+});
+</script>
diff --git a/src/components/Form/fields/FieldOptions.vue b/src/components/Form/fields/FieldOptions.vue
index aefae3b5c..24c5f6642 100644
--- a/src/components/Form/fields/FieldOptions.vue
+++ b/src/components/Form/fields/FieldOptions.vue
@@ -82,10 +82,16 @@
 							:disabled="option.disabled"
 						/>
 					</template>
-					<span
-						v-strip-unsafe-html="option.label"
-						class="pkpFormField--options__optionLabel"
-					/>
+					<div class="flex flex-col">
+						<span
+							v-strip-unsafe-html="option.label"
+							class="pkpFormField--options__optionLabel"
+						/>
+						<span
+							v-strip-unsafe-html="option.subLabel"
+							class="pkpFormField--options__optionLabel"
+						/>
+					</div>
 					<Orderer
 						v-if="isOrderable"
 						:item-id="option.value"
diff --git a/src/components/FormDisplay/FieldOptionsDisplay.vue b/src/components/FormDisplay/FieldOptionsDisplay.vue
new file mode 100644
index 000000000..ad0ff4f19
--- /dev/null
+++ b/src/components/FormDisplay/FieldOptionsDisplay.vue
@@ -0,0 +1,39 @@
+<template>
+	<component :is="headingElement" class="text-lg mb-1 inline-block font-bold">
+		{{ field.label }}
+	</component>
+	<div class="flex flex-col gap-y-2">
+		<div
+			v-for="(option, i) of selectedValues"
+			:key="option.value"
+			class="flex flex-col text-lg-normal"
+		>
+			<span>
+				<template v-if="field.showNumberedList">{{ i + 1 }}.</template>
+				{{ option.label }}
+			</span>
+			<span v-if="option.subLabel">
+				{{ option.subLabel }}
+			</span>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import {computed} from 'vue';
+
+const props = defineProps({
+	field: {type: Object, required: true},
+	headingElement: {required: true, type: String},
+});
+
+const selectedValues = computed(() => {
+	if (!props.field?.value?.length) {
+		return '-';
+	}
+
+	return props.field.options.filter((option) =>
+		props.field.value.includes(option.value),
+	);
+});
+</script>
diff --git a/src/components/FormDisplay/FormDisplay.vue b/src/components/FormDisplay/FormDisplay.vue
index b79c01eb9..8ccabcb41 100644
--- a/src/components/FormDisplay/FormDisplay.vue
+++ b/src/components/FormDisplay/FormDisplay.vue
@@ -1,55 +1,88 @@
 <template>
 	<div>
-		<div v-if="hasMultilingualFields">
-			<div
-				v-for="locale in availableLocales"
-				:key="locale.key"
-				class="mt-8 first:mt-0"
-			>
-				<component :is="localeHeadingElement" class="xl-bold mb-3 text-heading">
-					{{ locale.label }}
-				</component>
-				<div class="flex flex-col gap-y-4">
-					<div v-for="field in fields" :key="field.name">
-						<component
-							:is="
-								FieldComponents[field.component] || `${field.component}-display`
-							"
-							:field="field"
-							:heading-element="fieldHeadingElement"
-							:display-locale="field.isMultilingual ? locale.key : ''"
-						></component>
+		<div v-for="group in groups" :key="group.id">
+			<fieldset class="flex border-b border-light border-opacity-50 p-8">
+				<div v-if="shouldDisplayGroupHeader" class="w-[30%] pe-6">
+					<FormGroupHeader
+						:heading="group.label"
+						:description="group.description"
+					/>
+				</div>
+				<div
+					class="flex flex-col gap-y-6 ps-6"
+					:class="shouldDisplayGroupHeader ? 'w-[70%]' : ''"
+				>
+					<div v-if="hasMultilingualFields" class="flex flex-col gap-y-6">
+						<div v-for="locale in availableLocales" :key="locale.key">
+							<component
+								:is="localeHeadingElement"
+								class="mb-1 text-2xl-bold text-heading"
+							>
+								{{ locale.label }}
+							</component>
+							<div class="flex flex-col gap-y-6">
+								<template
+									v-for="field in groupFields[group.id]"
+									:key="field.name"
+								>
+									<div v-if="shouldDisplayField(field)">
+										<component
+											:is="
+												FieldComponents[field.component] ||
+												field.component ||
+												`${field.component}-display`
+											"
+											:field="field"
+											:heading-element="fieldHeadingElement"
+											:display-locale="field.isMultilingual ? locale.key : ''"
+										></component>
+									</div>
+								</template>
+							</div>
+						</div>
 					</div>
+					<template
+						v-for="field in groupFields[group.id]"
+						v-else
+						:key="field.name"
+					>
+						<div v-if="shouldDisplayField(field)">
+							<component
+								:is="
+									FieldComponents[field.component] ||
+									field.component ||
+									`${field.component}-display`
+								"
+								:field="field"
+								v-bind="field.componentProps"
+								:heading-element="fieldHeadingElement"
+							></component>
+						</div>
+					</template>
 				</div>
-			</div>
-		</div>
-		<div
-			v-for="field in fields"
-			v-else
-			:key="field.name"
-			class="flex flex-col gap-y-10"
-		>
-			<component
-				:is="FieldComponents[field.component] || `${field.component}-display`"
-				:field="field"
-				:heading-element="fieldHeadingElement"
-			></component>
+			</fieldset>
 		</div>
 	</div>
 </template>
 
 <script setup>
 import {computed} from 'vue';
+import {shouldShowFieldWithinGroup} from '@/components/Form/formHelpers';
+
+import FormGroupHeader from '@/components/Form/FormGroupHeader.vue';
 import FieldTextDisplay from './FieldTextDisplay.vue';
 import FieldSelectDisplay from './FieldSelectDisplay.vue';
+import FieldOptionsDisplay from './FieldOptionsDisplay.vue';
 
 const FieldComponents = {
 	'field-text': FieldTextDisplay,
 	'field-select': FieldSelectDisplay,
+	'field-options': FieldOptionsDisplay,
 };
 
 const props = defineProps({
 	fields: {type: Array, required: true},
+	groups: {type: Array, default: () => [{id: 'default'}]},
 	supportedFormLocales: {type: Array, required: true, default: () => []},
 	localeHeadingElement: {required: false, default: 'h3', type: String},
 	fieldHeadingElement: {required: false, default: 'h4', type: String},
@@ -62,4 +95,33 @@ const availableLocales = computed(() => {
 const hasMultilingualFields = computed(() => {
 	return !!props.fields.find((field) => field.isMultilingual);
 });
+
+// if the group header should be displayed
+const shouldDisplayGroupHeader = computed(() => {
+	return props.groups.length > 1 && props.groups[0]?.label;
+});
+
+// get all the fields for each groups
+const groupFields = computed(() => {
+	const eachGroupFields = {};
+	props.fields.forEach((field) => {
+		eachGroupFields[field.groupId] = eachGroupFields[field.groupId] || [];
+		eachGroupFields[field.groupId].push(field);
+	});
+
+	return eachGroupFields;
+});
+
+// if the field should be displayed
+function shouldDisplayField(field) {
+	if (field.inputType === 'hidden') {
+		return false;
+	}
+
+	if (field.hideWhenReadOnly) {
+		return false;
+	}
+
+	return shouldShowFieldWithinGroup(field, props.fields);
+}
 </script>
diff --git a/src/components/FormDisplay/FormDisplayItemBasic.vue b/src/components/FormDisplay/FormDisplayItemBasic.vue
index b502be2cd..50c40ef5f 100644
--- a/src/components/FormDisplay/FormDisplayItemBasic.vue
+++ b/src/components/FormDisplay/FormDisplayItemBasic.vue
@@ -1,10 +1,10 @@
 <template>
-	<component :is="headingElement" class="text-base-normal text-secondary">
+	<component :is="headingElement" class="mb-1 inline-block text-xl-bold">
 		{{ heading }}
 	</component>
 	<div class="flex items-center">
-		<p v-if="!htmlValue" class="pt-1 text-lg-normal">{{ value }}</p>
-		<p v-else v-strip-unsafe-html="htmlValue" class="pt-1 text-lg-normal"></p>
+		<p v-if="!htmlValue" class="text-lg-normal">{{ value }}</p>
+		<p v-else v-strip-unsafe-html="htmlValue" class="text-lg-normal"></p>
 		<slot name="valueSuffix"></slot>
 	</div>
 </template>
diff --git a/src/composables/useDate.js b/src/composables/useDate.js
index fec7fffca..43c93d4db 100644
--- a/src/composables/useDate.js
+++ b/src/composables/useDate.js
@@ -4,6 +4,7 @@ import {
 	calculateDaysBetweenDates,
 	getDateCurrentLocale,
 	relativeStringTimeFromNow,
+	getRelativeTargetDate,
 } from '@/utils/dateUtils';
 
 /**
@@ -51,5 +52,14 @@ export function useDate() {
 		 * @returns {string} Relative time string
 		 */
 		relativeStringTimeFromNow,
+
+		/**
+		 * Calculate a target date by adding a duration to a start date.
+		 * @type {Function}
+		 * @param {string} duration - Duration in ISO format (e.g., "P1W")
+		 * @param {string} [startDate] - Optional start date in ISO format
+		 * @returns {string} Target date in ISO format (YYYY-MM-DD)
+		 */
+		getRelativeTargetDate,
 	};
 }
diff --git a/src/composables/useForm.js b/src/composables/useForm.js
index 00b6c20c6..f71717254 100644
--- a/src/composables/useForm.js
+++ b/src/composables/useForm.js
@@ -362,13 +362,18 @@ export function useForm(_form = {}, {customSubmit} = {}) {
 			previousButton,
 		});
 	}
-	function addGroup(groupId, {pageId, label, description} = {}) {
+
+	function addGroup(
+		groupId,
+		{pageId, label, description, groupComponent} = {},
+	) {
 		form.value.groups = form.value.groups || [];
 		form.value.groups.push({
 			id: groupId || 'default',
 			label,
 			description,
 			pageId: pageId || 'default',
+			groupComponent,
 		});
 	}
 
@@ -468,6 +473,89 @@ export function useForm(_form = {}, {customSubmit} = {}) {
 		);
 	}
 
+	/**
+	 * Adds or updates a FieldOption in the form.
+	 * @param {string} fieldName - The name of the field
+	 * @param {string} fieldType - The field type for the OptionField component, either "checkbox" or "radio"
+	 * @param {Object} fieldOptions - The input options (e.g., list of choices) and other shared/common properties for the field
+	 * @param {Object} [opts] - Optional settings.
+	 * @param {boolean} [opts.override] - If true and the field already exists, it will be fully overridden.
+	 */
+	function addFieldOptions(
+		fieldName,
+		fieldType,
+		{options, value = [], ...commonFields},
+		opts = {},
+	) {
+		addField(
+			fieldName,
+			{
+				component: 'field-options',
+				type: fieldType,
+				options,
+				value,
+				...commonFields,
+			},
+			opts,
+		);
+	}
+
+	/**
+	 * Adds or updates a rich textarea field in the form.
+	 *
+	 * @param {string} fieldName - The name (or key) of the field.
+	 * @param {Object} fieldOptions - Configuration options for the field.
+	 * @param {Object} [opts] - Optional settings.
+	 * @param {boolean} [opts.override] - If true and the field already exists, it will be fully overridden.
+	 */
+	function addFieldRichTextArea(
+		fieldName,
+		{
+			size,
+			toolbar = 'bold italic superscript subscript | link',
+			plugins = ['link'],
+			...commonFields
+		} = {},
+		opts,
+	) {
+		return addField(
+			fieldName,
+			{
+				component: 'field-rich-textarea',
+				size,
+				toolbar,
+				plugins,
+				...commonFields,
+			},
+			opts,
+		);
+	}
+
+	/**
+	 * Adds or updates a custom component field in the form.
+	 * This is useful for rendering custom field components.
+	 * @param {string} fieldName - The name (or key) of the field.
+	 * @param {Object} fieldOptions - Contains the custom component and its props.
+	 * @param {Object} [fieldOptions.component] - The Vue component to render.
+	 * @param {Object} [fieldOptions.props] - Additional props to pass to the component.
+	 * @param {Object} [opts] - Optional settings.
+	 * @param {boolean} [opts.override] - If true and the field already exists, it will be fully overridden.
+	 */
+	function addFieldComponent(fieldName, {component, ...props}, opts = {}) {
+		if (!component) {
+			return;
+		}
+
+		return addField(
+			fieldName,
+			{
+				component,
+				...props,
+			},
+			opts,
+		);
+	}
+
 	return {
 		set,
 		setValue,
@@ -491,6 +579,9 @@ export function useForm(_form = {}, {customSubmit} = {}) {
 		addGroup,
 		addFieldText,
 		addFieldSelect,
+		addFieldOptions,
+		addFieldRichTextArea,
+		addFieldComponent,
 		getField,
 	};
 }
diff --git a/src/managers/DiscussionManager/DiscussionManager.stories.js b/src/managers/DiscussionManager/DiscussionManager.stories.js
index fce9731c0..bdd3f9a15 100644
--- a/src/managers/DiscussionManager/DiscussionManager.stories.js
+++ b/src/managers/DiscussionManager/DiscussionManager.stories.js
@@ -1,29 +1,119 @@
+import {within, userEvent} from '@storybook/test';
+import {http, HttpResponse} from 'msw';
 import DiscussionManager from './DiscussionManager.vue';
-import {getSubmissionMock} from '@/mockFactories/submissionMock';
 import {DiscussionsDataMock} from '@/mockFactories/discussionMock';
+import {TemplatesDataMock} from '@/mockFactories/taskDiscussionTemplates';
+import {getSubmissionMock} from '@/mockFactories/submissionMock';
+import {getParticipantMock} from '@/mockFactories/participantMock';
+
 export default {
 	title: 'Managers/DiscussionManager',
 	component: DiscussionManager,
 };
 
-export const Default = {
-	render: (args) => ({
-		components: {DiscussionManager},
-		setup() {
-			return {args};
+const baseArgs = {
+	submission: getSubmissionMock({
+		stages: [
+			{
+				id: pkp.const.WORKFLOW_STAGE_ID_PRODUCTION,
+				currentUserAssignedRoles: [16, 1],
+			},
+		],
+	}),
+	submissionStageId: pkp.const.WORKFLOW_STAGE_ID_PRODUCTION,
+	discussions: DiscussionsDataMock,
+};
+
+const renderComponent = (args) => ({
+	components: {DiscussionManager},
+	setup() {
+		return {args};
+	},
+	template: `<DiscussionManager v-bind="args" />`,
+});
+
+const mswHandlers = [
+	http.get(
+		'https://mock/index.php/publicknowledge/api/v1/submissions/19/participants/5',
+		({request}) => {
+			const participants = [
+				getParticipantMock(),
+				getParticipantMock({
+					id: 4,
+					fullName: 'Andy Author',
+					userName: 'aauthor',
+					stageAssignments: [
+						{
+							stageAssignmentStageId: pkp.const.WORKFLOW_STAGE_ID_PRODUCTION,
+							stageAssignmentUserGroup: {
+								name: 'Author',
+								roleId: 65536,
+							},
+						},
+					],
+				}),
+				getParticipantMock({
+					id: 5,
+					fullName: 'Kaja Karina',
+					userName: 'kakarina',
+				}),
+			];
+			return HttpResponse.json(participants);
 		},
-		template: `
-            <DiscussionManager v-bind="args"/>`,
+	),
+	http.get('https://mock/index.php/publicknowledge/api/v1/templates', () => {
+		return HttpResponse.json(TemplatesDataMock);
 	}),
-	args: {
-		submission: getSubmissionMock({
-			stages: [
-				{
-					id: pkp.const.WORKFLOW_STAGE_ID_PRODUCTION,
-					currentUserAssignedRoles: [16, 1],
-				},
-			],
-		}),
-		discussions: DiscussionsDataMock,
+	http.get('https://mock/index.php/publicknowledge/api/v1/messages', () => {
+		return HttpResponse.json([
+			{
+				id: 1,
+				message: 'Test',
+				email: 'test@test.com',
+				createdAt: '2025-03-06 06:01:17',
+				discussionText: TemplatesDataMock[0]?.content,
+			},
+			{
+				id: 2,
+				message: 'Test 2',
+				email: 'test2@test.com',
+				createdAt: '2025-03-08 06:01:17',
+				discussionText: 'Lorem ipsum',
+			},
+		]);
+	}),
+];
+
+export const Default = {
+	render: renderComponent,
+	args: baseArgs,
+	parameters: {
+		msw: {
+			handlers: mswHandlers,
+		},
+	},
+	play: async ({canvasElement}) => {
+		// Assigns canvas to the component root element
+		const canvas = within(canvasElement);
+		const user = userEvent.setup();
+
+		await user.click(canvas.getByText('Plagiarism Check'));
+	},
+};
+
+export const AddForm = {
+	render: renderComponent,
+	args: baseArgs,
+	parameters: {
+		msw: {
+			handlers: mswHandlers,
+		},
+	},
+	play: async ({canvasElement}) => {
+		// Assigns canvas to the component root element
+		const canvas = within(canvasElement);
+		const user = userEvent.setup();
+
+		await user.click(canvas.getByText('Add'));
 	},
 };
diff --git a/src/managers/DiscussionManager/DiscussionManager.vue b/src/managers/DiscussionManager/DiscussionManager.vue
index ef422a770..692706319 100644
--- a/src/managers/DiscussionManager/DiscussionManager.vue
+++ b/src/managers/DiscussionManager/DiscussionManager.vue
@@ -3,12 +3,12 @@
 		<PkpTable>
 			<template #label>
 				<h3 class="">
-					{{ t('tasks.discussions.title') }}
+					{{ t('discussion.title') }}
 				</h3>
 			</template>
 			<template #description>
 				<p>
-					{{ t('tasks.discussions.description') }}
+					{{ t('discussion.description') }}
 				</p>
 			</template>
 			<template #top-controls>
@@ -101,6 +101,7 @@ const Components = {
 
 const props = defineProps({
 	submission: {type: Object, required: true},
+	submissionStageId: {type: Number, required: true},
 	discussions: {type: Array, required: true},
 });
 
diff --git a/src/managers/DiscussionManager/DiscussionManagerCellActions.vue b/src/managers/DiscussionManager/DiscussionManagerCellActions.vue
index ef2b2a26b..3d44c449d 100644
--- a/src/managers/DiscussionManager/DiscussionManagerCellActions.vue
+++ b/src/managers/DiscussionManager/DiscussionManagerCellActions.vue
@@ -5,7 +5,7 @@
 			:label="t('common.moreActions')"
 			button-variant="ellipsis"
 			:actions="itemActions"
-			@action="(actionName) => discussionManagerStore[actionName]({task})"
+			@action="(actionName) => discussionManagerStore[actionName]({workItem})"
 		></DropdownActions>
 	</TableCell>
 </template>
diff --git a/src/managers/DiscussionManager/DiscussionManagerCellName.vue b/src/managers/DiscussionManager/DiscussionManagerCellName.vue
index e7213f580..4c913cb0b 100644
--- a/src/managers/DiscussionManager/DiscussionManagerCellName.vue
+++ b/src/managers/DiscussionManager/DiscussionManagerCellName.vue
@@ -6,7 +6,10 @@
 				{{ workItemType.type }}
 			</span>
 			<div class="-ms-3">
-				<PkpButton :is-link="true">
+				<PkpButton
+					:is-link="true"
+					@click="() => discussionManagerStore.discussionView({workItem})"
+				>
 					{{ workItem.title.en }}
 				</PkpButton>
 			</div>
@@ -19,13 +22,15 @@
 import TableCell from '@/components/Table/TableCell.vue';
 import Icon from '@/components/Icon/Icon.vue';
 import PkpButton from '@/components/Button/Button.vue';
+import {useDiscussionManagerStore} from './discussionManagerStore';
+const discussionManagerStore = useDiscussionManagerStore();
 
 const props = defineProps({
 	workItem: {type: Object, required: true},
 });
 
 const workItemType =
-	props.workItem.mode === 'task'
+	props.workItem.type === 'Task'
 		? {type: 'Task', icon: 'FileText', owner: 'Task Owner'}
 		: {type: 'Discussion', icon: 'Comment', owner: 'Created by'};
 </script>
diff --git a/src/managers/DiscussionManager/DiscussionManagerCellStarted.vue b/src/managers/DiscussionManager/DiscussionManagerCellStarted.vue
index 17c12e1f8..6152bd841 100644
--- a/src/managers/DiscussionManager/DiscussionManagerCellStarted.vue
+++ b/src/managers/DiscussionManager/DiscussionManagerCellStarted.vue
@@ -1,7 +1,7 @@
 <template>
 	<TableCell>
 		<div class="flex items-center text-primary">
-			<Icon v-if="workItem.mode === 'task'" :icon="icon" class="h-5 w-5"></Icon>
+			<Icon v-if="workItem.type === 'Task'" :icon="icon" class="h-5 w-5"></Icon>
 		</div>
 	</TableCell>
 </template>
diff --git a/src/managers/DiscussionManager/DiscussionManagerForm.vue b/src/managers/DiscussionManager/DiscussionManagerForm.vue
index e4fa0ea0d..b13f5f03c 100644
--- a/src/managers/DiscussionManager/DiscussionManagerForm.vue
+++ b/src/managers/DiscussionManager/DiscussionManagerForm.vue
@@ -1,11 +1,11 @@
 <template>
 	<SideModalBody>
 		<template #title>
-			{{ t('tasks.discussions.form.title') }}
+			{{ hasContent ? localize(workItem.title) : t('discussion.title') }}
 		</template>
-		<template #description>
+		<template v-if="!hasContent" #description>
 			<span class="text-lg-medium">
-				{{ t('tasks.discussions.form.description') }}
+				{{ t('discussion.form.description') }}
 			</span>
 		</template>
 		<template #post-description>
@@ -13,25 +13,45 @@
 				{{ badgeProps.slot }}
 			</Badge>
 		</template>
+		<template v-if="isReadOnlyRef" #actions>
+			<PkpButton @click="editForm">{{ t('common.edit') }}</PkpButton>
+		</template>
 
 		<SideModalLayoutBasic>
-			<PkpForm v-bind="form" @cancel="onCloseFn" @set="set" />
+			<FormDisplay v-if="isReadOnlyRef" v-bind="form" />
+			<PkpForm v-else v-bind="form" @cancel="onClose" @set="set" />
 		</SideModalLayoutBasic>
 	</SideModalBody>
 </template>
 
 <script setup>
+import {ref, computed} from 'vue';
+import {t} from '@/utils/i18n';
+import {useDiscussionManagerForm} from './useDiscussionManagerForm';
 import SideModalBody from '@/components/Modal/SideModalBody.vue';
 import SideModalLayoutBasic from '@/components/Modal/SideModalLayoutBasic.vue';
 import Badge from '@/components/Badge/Badge.vue';
 import PkpForm from '@/components/Form/Form.vue';
-import {useDiscussionManagerForm} from './useDiscussionManagerForm';
+import FormDisplay from '@/components/FormDisplay/FormDisplay.vue';
+import PkpButton from '@/components/Button/Button.vue';
 
 const props = defineProps({
 	status: {
 		type: String,
 		default: () => 'New',
 	},
+	submission: {
+		type: Object,
+		required: true,
+	},
+	submissionStageId: {
+		type: Number,
+		required: true,
+	},
+	workItem: {
+		type: Object,
+		default: () => null,
+	},
 	onCloseFn: {
 		type: Function,
 		default: () => () => {},
@@ -40,11 +60,26 @@ const props = defineProps({
 		type: Function,
 		default: () => () => {},
 	},
+	isReadOnly: {
+		type: Boolean,
+		default: () => false,
+	},
 });
 
-const {form, set, badgeProps} = useDiscussionManagerForm(
-	props.status,
-	props.onCloseFn,
-	props.onSubmitFn,
-);
+const isReadOnlyRef = ref(props.isReadOnly);
+const hasContent = computed(() => !!props.workItem?.id);
+
+function editForm() {
+	isReadOnlyRef.value = false;
+}
+
+const onClose = function () {
+	if (props.isReadOnly) {
+		isReadOnlyRef.value = true;
+	} else {
+		props.onCloseFn();
+	}
+};
+
+const {form, set, badgeProps} = useDiscussionManagerForm(props, isReadOnlyRef);
 </script>
diff --git a/src/managers/DiscussionManager/DiscussionManagerTaskInfo.vue b/src/managers/DiscussionManager/DiscussionManagerTaskInfo.vue
new file mode 100644
index 000000000..88c56615c
--- /dev/null
+++ b/src/managers/DiscussionManager/DiscussionManagerTaskInfo.vue
@@ -0,0 +1,43 @@
+<template>
+	<div class="relative mb-4 mt-1">
+		<label class="flex-start flex cursor-pointer gap-2 text-lg-normal">
+			<input v-model="selectedValue" type="checkbox" name="taskInfoAdd" />
+			{{ t('discussion.form.taskInfoLabel') }}
+		</label>
+	</div>
+
+	<FormGroupHeader
+		v-if="selectedValue"
+		:heading="t('discussion.form.taskInformation')"
+		:description="t('discussion.form.taskInfoDescription')"
+	/>
+</template>
+
+<script setup>
+import {ref, watch} from 'vue';
+import {t} from '@/utils/i18n';
+import FormGroupHeader from '@/components/Form/FormGroupHeader.vue';
+
+const emit = defineEmits(['addTaskInfo']);
+const props = defineProps({
+	/** If the task information is checked */
+	isChecked: {
+		type: Boolean,
+		default: false,
+	},
+});
+const selectedValue = ref(props.isChecked);
+
+// emit the event to update the value of the checkbox
+watch(selectedValue, (val) => {
+	emit('addTaskInfo', val);
+});
+
+// update the selected value when the prop changes
+watch(
+	() => props.isChecked,
+	(val) => {
+		selectedValue.value = val;
+	},
+);
+</script>
diff --git a/src/managers/DiscussionManager/DiscussionManagerTemplates.vue b/src/managers/DiscussionManager/DiscussionManagerTemplates.vue
new file mode 100644
index 000000000..171c44fef
--- /dev/null
+++ b/src/managers/DiscussionManager/DiscussionManagerTemplates.vue
@@ -0,0 +1,68 @@
+<template>
+	<FormGroupHeader
+		:heading="t('common.details')"
+		:description="t('discussion.form.detailsDescription')"
+	/>
+
+	<div v-if="templates.length" class="mt-4 text-lg-bold">
+		{{ t('discussion.form.templatesLabel') }}
+	</div>
+	<Search
+		:search-label="t('common.findTemplate')"
+		class="mt-2"
+		:search-phrase="searchPhrase"
+		@search-phrase-changed="
+			(newSearchPhrase) => (searchPhrase = newSearchPhrase)
+		"
+	/>
+	<ul
+		class="mt-2 max-h-80 list-none overflow-y-auto p-0"
+		aria-live="true"
+		role="list"
+		:aria-label="t('search.searchResults')"
+	>
+		<li v-for="template in templates" :key="template.id">
+			<button
+				class="mt-2 w-full border border-light p-4 text-start hover:border-hover"
+				@click="
+					() => {
+						emit('selectTemplate', template);
+					}
+				"
+			>
+				<div class="text-lg-medium text-primary">
+					<span class="uppercase">
+						{{
+							template.type === 'Task'
+								? t('submission.task')
+								: t('submission.discussion')
+						}}
+					</span>
+					- {{ template.name }}
+				</div>
+				<div class="mt-1 text-base-normal text-secondary">
+					{{
+						template.type === 'Task'
+							? t('discussion.template.taskDescription')
+							: t('discussion.template.discussionDescription')
+					}}
+				</div>
+			</button>
+		</li>
+	</ul>
+</template>
+
+<script setup>
+import FormGroupHeader from '@/components/Form/FormGroupHeader.vue';
+import Search from '@/components/Search/Search.vue';
+import {t} from '@/utils/i18n';
+
+const emit = defineEmits(['selectTemplate']);
+
+defineProps({
+	templates: {
+		type: Array,
+		default: () => [],
+	},
+});
+</script>
diff --git a/src/managers/DiscussionManager/DiscussionMessages.vue b/src/managers/DiscussionManager/DiscussionMessages.vue
new file mode 100644
index 000000000..5b904e365
--- /dev/null
+++ b/src/managers/DiscussionManager/DiscussionMessages.vue
@@ -0,0 +1,67 @@
+<template>
+	<div class="flex flex-col gap-y-6">
+		<div
+			v-for="message in discussionMessagesStore.discussionMessages"
+			:key="message.id"
+		>
+			<div class="flex justify-between border border-light bg-tertiary p-3">
+				<span class="text-lg-bold">
+					{{ t('discussion.messageFrom', {from: message.email}) }}
+				</span>
+				<span class="text-lg-normal">
+					{{ formatShortDateTime(message.createdAt) }}
+				</span>
+			</div>
+			<div class="border border-t-0 border-light p-6">
+				<div
+					v-strip-unsafe-html="message.discussionText"
+					class="semantic-defaults"
+				></div>
+			</div>
+		</div>
+
+		<div>
+			<PkpButton
+				:is-active="toggleMessageForm"
+				:is-disabled="toggleMessageForm"
+				@click="addMessage"
+			>
+				{{ t('discussion.addNewMessage') }}
+			</PkpButton>
+		</div>
+		<div v-if="toggleMessageForm">
+			<FieldRichTextarea
+				v-bind="discussionMessagesStore.messageFieldOptions"
+			></FieldRichTextarea>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import {ref} from 'vue';
+import {t} from '@/utils/i18n';
+import {useDate} from '@/composables/useDate';
+import {useDiscussionMessagesStore} from './discussionMessagesStore';
+
+import PkpButton from '@/components/Button/Button.vue';
+import FieldRichTextarea from '@/components/Form/fields/FieldRichTextarea.vue';
+
+const {formatShortDateTime} = useDate();
+const toggleMessageForm = ref(false);
+const discussionMessagesStore = useDiscussionMessagesStore();
+
+defineProps({
+	submission: {
+		type: Object,
+		required: true,
+	},
+	discussion: {
+		type: Object,
+		required: true,
+	},
+});
+
+function addMessage() {
+	toggleMessageForm.value = true;
+}
+</script>
diff --git a/src/managers/DiscussionManager/discussionManagerStore.js b/src/managers/DiscussionManager/discussionManagerStore.js
index 16620e392..118a4e223 100644
--- a/src/managers/DiscussionManager/discussionManagerStore.js
+++ b/src/managers/DiscussionManager/discussionManagerStore.js
@@ -1,6 +1,7 @@
 import {defineComponentStore} from '@/utils/defineComponentStore';
 
 import {computed, toRefs} from 'vue';
+import {t} from '@/utils/i18n';
 import {useExtender} from '@/composables/useExtender';
 import {useDataChanged} from '@/composables/useDataChanged';
 import {useDiscussionManagerConfig} from './useDiscussionManagerConfig';
@@ -19,17 +20,17 @@ export const useDiscussionManagerStore = defineComponentStore(
 
 		const discussions = [
 			{
-				name: 'Yet To Begin',
+				name: t('common.yetToBegin'),
 				icon: 'New',
 				items: getDiscussionByStatus('Pending'),
 			},
 			{
-				name: 'In Progress',
+				name: t('common.inProgress'),
 				icon: 'InProgress',
 				items: getDiscussionByStatus('In Progress'),
 			},
 			{
-				name: 'Closed',
+				name: t('common.closed'),
 				icon: 'Complete',
 				items: getDiscussionByStatus('Closed'),
 			},
@@ -83,10 +84,22 @@ export const useDiscussionManagerStore = defineComponentStore(
 			triggerDataChange();
 		}
 
+		function discussionView({workItem}) {
+			discussionActions.discussionView(
+				{
+					workItem,
+					submission: props.submission,
+					submissionStageId: props.submissionStageId,
+				},
+				triggerDataChangeCallback,
+			);
+		}
+
 		function discussionAdd() {
 			discussionActions.discussionAdd(
 				{
 					submission: props.submission,
+					submissionStageId: props.submissionStageId,
 				},
 				triggerDataChangeCallback,
 			);
@@ -101,10 +114,12 @@ export const useDiscussionManagerStore = defineComponentStore(
 			);
 		}
 
-		function discussionEdit() {
+		function discussionEdit({workItem}) {
 			discussionActions.discussionEdit(
 				{
 					submission: props.submission,
+					submissionStageId: props.submissionStageId,
+					workItem,
 				},
 				triggerDataChangeCallback,
 			);
@@ -149,6 +164,7 @@ export const useDiscussionManagerStore = defineComponentStore(
 			bottomItems,
 
 			/** Actions */
+			discussionView,
 			discussionAdd,
 			discussionSearch,
 			discussionEdit,
diff --git a/src/managers/DiscussionManager/discussionMessagesStore.js b/src/managers/DiscussionManager/discussionMessagesStore.js
new file mode 100644
index 000000000..da2fc4064
--- /dev/null
+++ b/src/managers/DiscussionManager/discussionMessagesStore.js
@@ -0,0 +1,102 @@
+import {defineComponentStore} from '@/utils/defineComponentStore';
+
+import {computed, watch} from 'vue';
+
+import {t} from '@/utils/i18n';
+import {useFetch} from '@/composables/useFetch';
+import {useUrl} from '@/composables/useUrl';
+import {useDataChanged} from '@/composables/useDataChanged';
+import {useExtender} from '@/composables/useExtender';
+import {useModal} from '@/composables/useModal';
+
+import FileAttacherModal from '@/components/Composer/FileAttacherModal.vue';
+import FieldPreparedContentInsertModal from '@/components/Form/fields/FieldPreparedContentInsertModal.vue';
+
+import preparedContent from '../../mixins/preparedContent';
+
+export const useDiscussionMessagesStore = defineComponentStore(
+	'discussionMessages',
+	(props) => {
+		const extender = useExtender();
+		const messageFieldOptions = {
+			toolbar: 'bold italic underline bullist | pkpAttachFiles | pkpInsert',
+			plugins: ['lists'],
+			size: 'large',
+			init: initDiscussionText(),
+		};
+
+		const relativeUrl = computed(() => {
+			return `messages`;
+		});
+
+		const {apiUrl: messagesApiUrl} = useUrl(relativeUrl);
+
+		const {data: messages, fetch: fetchDiscussionMessages} =
+			useFetch(messagesApiUrl);
+
+		watch(relativeUrl, () => {
+			messages.value = null;
+			fetchDiscussionMessages();
+		});
+
+		fetchDiscussionMessages();
+
+		const {triggerDataChange} = useDataChanged(() => fetchDiscussionMessages());
+
+		function triggerDataChangeCallback() {
+			triggerDataChange();
+		}
+
+		const discussionMessages = computed(() => {
+			if (!messages.value) {
+				return [];
+			}
+
+			return messages.value;
+		});
+
+		function initDiscussionText() {
+			return {
+				setup: (editor) => {
+					editor.ui.registry.addButton('pkpAttachFiles', {
+						icon: 'upload',
+						text: t('common.attachFiles'),
+						onAction() {
+							const {openSideModal} = useModal();
+
+							openSideModal(FileAttacherModal, {
+								title: t('common.attachFiles'),
+								attachers: [],
+								onAddAttachments: [],
+							});
+						},
+					});
+
+					editor.ui.registry.addButton('pkpInsert', {
+						icon: 'plus',
+						text: t('common.insertContent'),
+						onAction() {
+							const {openSideModal} = useModal(FieldPreparedContentInsertModal);
+							openSideModal(FieldPreparedContentInsertModal, {
+								title: t('common.insertContent'),
+								insertLabel: t('common.insert'),
+								preparedContent,
+								preparedContentLabel: 'Label',
+								onInsert: () => {},
+							});
+						},
+					});
+				},
+			};
+		}
+
+		return {
+			discussionMessages,
+			triggerDataChangeCallback,
+			messageFieldOptions,
+
+			extender,
+			props,
+		};
+	},
+);
diff --git a/src/managers/DiscussionManager/useDiscussionManagerActions.js b/src/managers/DiscussionManager/useDiscussionManagerActions.js
index d4954352d..f3cfd025f 100644
--- a/src/managers/DiscussionManager/useDiscussionManagerActions.js
+++ b/src/managers/DiscussionManager/useDiscussionManagerActions.js
@@ -15,7 +15,10 @@ export const Actions = {
 export function useDiscussionManagerActions() {
 	const {t} = useLocalize();
 
-	function discussionAdd({workItem, submission}, finishedCallback) {
+	function discussionView(
+		{workItem, submission, submissionStageId},
+		finishedCallback,
+	) {
 		const {openSideModal, closeSideModal} = useModal();
 
 		function onCloseFn() {
@@ -23,6 +26,27 @@ export function useDiscussionManagerActions() {
 		}
 
 		openSideModal(DiscussionManagerForm, {
+			workItem,
+			submission,
+			submissionStageId,
+			onCloseFn,
+			isReadOnly: true,
+		});
+	}
+
+	function discussionAdd(
+		{workItem, submission, submissionStageId},
+		finishedCallback,
+	) {
+		const {openSideModal, closeSideModal} = useModal();
+
+		function onCloseFn() {
+			closeSideModal(DiscussionManagerForm);
+		}
+
+		openSideModal(DiscussionManagerForm, {
+			submission,
+			submissionStageId,
 			onCloseFn,
 			onSubmitFn: finishedCallback,
 		});
@@ -51,26 +75,23 @@ export function useDiscussionManagerActions() {
 		});
 	}
 
-	function discussionEdit({workItem, submission}, finishedCallback) {
-		const {openDialog} = useModal();
-		openDialog({
-			actions: [
-				{
-					label: t('common.ok'),
-					isWarnable: true,
-					callback: (close) => {
-						close();
-					},
-				},
-				{
-					label: t('common.cancel'),
-					callback: (close) => {
-						close();
-					},
-				},
-			],
-			title: 'Edit',
-			message: 'Placeholder',
+	function discussionEdit(
+		{workItem, submission, submissionStageId},
+		finishedCallback,
+	) {
+		const {openSideModal, closeSideModal} = useModal();
+
+		function onCloseFn() {
+			closeSideModal(DiscussionManagerForm);
+		}
+
+		openSideModal(DiscussionManagerForm, {
+			status: workItem.status,
+			submission,
+			submissionStageId,
+			workItem,
+			onCloseFn,
+			onSubmitFn: finishedCallback,
 		});
 	}
 
@@ -145,6 +166,7 @@ export function useDiscussionManagerActions() {
 	}
 
 	return {
+		discussionView,
 		discussionAdd,
 		discussionSearch,
 		discussionEdit,
diff --git a/src/managers/DiscussionManager/useDiscussionManagerForm.js b/src/managers/DiscussionManager/useDiscussionManagerForm.js
index 609c7f111..f369de35d 100644
--- a/src/managers/DiscussionManager/useDiscussionManagerForm.js
+++ b/src/managers/DiscussionManager/useDiscussionManagerForm.js
@@ -1,16 +1,115 @@
+import {computed, ref, watch} from 'vue';
 import {useForm} from '@/composables/useForm';
+import {useModal} from '@/composables/useModal';
+import {useDate} from '@/composables/useDate';
 import {useLocalize} from '@/composables/useLocalize';
+import {useCurrentUser} from '@/composables/useCurrentUser';
+import {useParticipantManagerStore} from '../ParticipantManager/participantManagerStore';
+import {useTasksAndDiscussionsStore} from '@/pages/tasksAndDiscussions/tasksAndDiscussionsStore';
+import {useDiscussionMessagesStore} from './discussionMessagesStore';
+import DiscussionMessages from './DiscussionMessages.vue';
+import DiscussionManagerTemplates from './DiscussionManagerTemplates.vue';
+import DiscussionManagerTaskInfo from './DiscussionManagerTaskInfo.vue';
 
-export function useDiscussionManagerForm(
+export function useDiscussionManagerForm({
 	status = 'New',
+	submission,
+	submissionStageId,
+	workItem,
 	closeDialog = () => {},
 	onSubmitFn = null,
-) {
-	const {t} = useLocalize();
+} = {}) {
+	const workItemStatus = workItem?.status || status;
+	const {t, localize} = useLocalize();
+	const participantManagerStore = useParticipantManagerStore({
+		submission,
+		submissionStageId,
+	});
+	const discussionMessagesStore = useDiscussionMessagesStore();
+
+	const currentUser = useCurrentUser();
+	const {getRelativeTargetDate} = useDate();
+	const isTask = ref(workItem?.type === 'Task');
+
+	const {
+		form,
+		initEmptyForm,
+		addPage,
+		addGroup,
+		set,
+		setValue,
+		addFieldText,
+		addFieldOptions,
+		addFieldRichTextArea,
+		addFieldSelect,
+		addFieldComponent,
+	} = useForm({}, {customSubmit: handleFormSubmission});
+
+	function getParticipantOptions(withSubLabel) {
+		return participantManagerStore.participantsList.map((participant) => {
+			let label = `${participant.fullName} (${participant.userName})`;
+
+			if (participant.userName === currentUser.getCurrentUserName()) {
+				label += ` (${t('common.me')})`;
+			}
+
+			return {
+				label,
+				subLabel: withSubLabel ? participant.roleName : undefined,
+				value: participant.id,
+			};
+		});
+	}
+
+	function addParticipantsField({override = false} = {}) {
+		addFieldOptions(
+			'detailsParticipants',
+			'checkbox',
+			{
+				groupId: 'details',
+				label: t('editor.submission.stageParticipants'),
+				description: t('discussion.form.detailsParticipantsDescription'),
+				name: 'detailsParticipants',
+				options: getParticipantOptions(true),
+				showNumberedList: true,
+				value: workItem?.participants || [],
+			},
+			{override},
+		);
+	}
+
+	function addAssigneesField({override = false} = {}) {
+		addFieldOptions(
+			'taskInfoParticipants',
+			'checkbox',
+			{
+				groupId: 'taskInformation',
+				label: t('discussion.form.taskInfoAssigneesLabel'),
+				description: t('discussion.form.taskInfoAssigneesDescription'),
+				name: 'taskInfoParticipants',
+				showWhen: ['taskInfoIsChecked', 'true'],
+				options: getParticipantOptions(),
+				value: workItem?.assignees,
+			},
+			{override},
+		);
+	}
+
+	// update the field-options when participantsList changes
+	watch(
+		() => participantManagerStore.participantsList,
+		(participantsList) => {
+			if (participantsList.length) {
+				addParticipantsField({override: true});
+				addAssigneesField({override: true});
+			}
+		},
+		{immediate: true},
+	);
 
 	function getBadgeProps() {
 		let badgeProps = {};
-		switch (status) {
+		switch (workItemStatus) {
 			case 'Pending':
 				badgeProps = {
 					slot: t('common.yetToBegin'),
@@ -50,6 +149,79 @@ export function useDiscussionManagerForm(
 		return badgeProps;
 	}
 
+	function getTemplates() {
+		const tasksAndDiscussionsStore = useTasksAndDiscussionsStore();
+		return computed(() => {
+			return tasksAndDiscussionsStore.templatesList;
+		});
+	}
+
+	function setValuesFromTemplate(template) {
+		isTask.value = template.type === 'Task';
+		setValue('detailsName', template.name);
+		setValue('discussionText', template.content);
+
+		const selectedParticipants =
+			participantManagerStore.participantsList
+				.filter((p) =>
+					template.taskDetails?.participantRoles?.includes(p.roleId),
+				)
+				.map((p) => p.id) || [];
+		setValue('detailsParticipants', selectedParticipants);
+
+		setValue('taskInfoIsChecked', isTask.value ? 'true' : 'false');
+
+		if (isTask.value) {
+			setValue('taskInfoParticipants', selectedParticipants);
+
+			if (template.taskDetails.dueDate) {
+				setValue(
+					'taskInfoDueDate',
+					getRelativeTargetDate(template.taskDetails.dueDate),
+				);
+			}
+		} else {
+			setValue('taskInfoDueDate', null);
+		}
+	}
+
+	function onSelectTemplate(template) {
+		if (!workItem?.id) {
+			return setValuesFromTemplate(template);
+		}
+
+		// Confirm overriding existing data with values from the selected template, if any data is already present
+		const {openDialog} = useModal();
+		openDialog({
+			name: 'selectTemplate',
+			title: 'Apply Template',
+			message: `Applying this template will replace data in related fields on the form. These changes won't be saved unless you choose to save. Continue?`,
+			actions: [
+				{
+					label: t('common.yes', {}),
+					isWarnable: true,
+					callback: async (close) => {
+						setValuesFromTemplate(template);
+						close();
+					},
+				},
+				{
+					label: t('common.no', {}),
+					callback: (close) => {
+						close();
+					},
+				},
+			],
+			close: () => {},
+			modalStyle: 'negative',
+		});
+	}
+
+	function onAddTaskInfo(checked) {
+		isTask.value = checked;
+		setValue('taskInfoIsChecked', checked ? 'true' : 'false');
+	}
+
 	async function handleFormSubmission(formData) {
 		// return result to Form component handler
 		return {
@@ -58,20 +230,108 @@ export function useDiscussionManagerForm(
 		};
 	}
 
-	const {form, initEmptyForm, addPage, addGroup, set} = useForm(
-		{},
-		{customSubmit: handleFormSubmission},
-	);
-
-	initEmptyForm('version', {
+	initEmptyForm('discussion', {
 		showErrorFooter: false,
-		spacingVariant: 'fullWidth',
 	});
+
 	addPage('default', {
 		submitButton: {label: t('common.save')},
 		cancelButton: {label: t('common.cancel')},
 	});
-	addGroup('default');
+
+	addGroup('details', {
+		label: t('common.details'),
+		description: t('discussion.form.detailsDescription'),
+		groupComponent: {
+			component: DiscussionManagerTemplates,
+			props: {
+				templates: getTemplates(),
+				onSelectTemplate,
+			},
+		},
+	});
+
+	addFieldText('detailsName', {
+		groupId: 'details',
+		label: t('common.name'),
+		description: t('discussion.form.detailsNameDescription'),
+		size: 'large',
+		value: localize(workItem?.title),
+		hideWhenReadOnly: true,
+	});
+
+	addParticipantsField({override: false});
+
+	addGroup('taskInformation', {
+		label: t('discussion.form.taskInformation'),
+		description: t('discussion.form.taskInfoDescription'),
+		groupComponent: {
+			component: DiscussionManagerTaskInfo,
+			props: {
+				isChecked: isTask,
+				onAddTaskInfo,
+			},
+		},
+	});
+
+	addFieldText('taskInfoIsChecked', {
+		groupId: 'taskInformation',
+		inputType: 'hidden',
+		value: isTask.value ? 'true' : 'false',
+	});
+
+	addFieldText('taskInfoDueDate', {
+		groupId: 'taskInformation',
+		label: t('common.dueDate'),
+		inputType: 'date',
+		description: t('discussion.form.taskInfoDueDateDescription'),
+		size: 'large',
+		showWhen: ['taskInfoIsChecked', 'true'],
+		value: isTask.value ? workItem?.dueDate : null,
+	});
+
+	addAssigneesField({override: false});
+
+	if (['Pending', 'New'].includes(status)) {
+		addFieldSelect('taskInfoShouldStart', {
+			groupId: 'taskInformation',
+			name: 'taskInfoShouldStart',
+			showWhen: ['taskInfoIsChecked', 'true'],
+			value: true,
+			hideWhenReadOnly: true,
+			options: [
+				{
+					label: t('discussion.form.startTaskUponSaving'),
+					value: true,
+				},
+				{
+					label: t('discussion.form.createDontStartTask'),
+					value: false,
+				},
+			],
+		});
+	}
+
+	addGroup('discussion', {
+		label: t('submission.discussion'),
+		description: t('discussion.form.discussionDescription'),
+	});
+
+	if (workItemStatus === 'New') {
+		addFieldRichTextArea('discussionText', {
+			groupId: 'discussion',
+			...discussionMessagesStore.messageFieldOptions,
+		});
+	} else {
+		addFieldComponent('messagesComponent', {
+			component: DiscussionMessages,
+			componentProps: {
+				submission,
+				discussion: workItem,
+			},
+			groupId: 'discussion',
+		});
+	}
 
 	const badgeProps = getBadgeProps(status);
 
diff --git a/src/managers/ParticipantManager/participantManagerStore.js b/src/managers/ParticipantManager/participantManagerStore.js
index 93d5e6895..29d155de0 100644
--- a/src/managers/ParticipantManager/participantManagerStore.js
+++ b/src/managers/ParticipantManager/participantManagerStore.js
@@ -49,6 +49,7 @@ export const useParticipantManagerStore = defineComponentStore(
 					list.push({
 						id: participant.id,
 						fullName: participant.fullName,
+						userName: participant.userName,
 						stageAssignmentId: stageAssignment.stageAssignmentId,
 						roleName: stageAssignment.stageAssignmentUserGroup.name,
 						roleId: stageAssignment.stageAssignmentUserGroup.roleId,
diff --git a/src/mockFactories/discussionMock.js b/src/mockFactories/discussionMock.js
index 42e337c5f..d6140c82d 100644
--- a/src/mockFactories/discussionMock.js
+++ b/src/mockFactories/discussionMock.js
@@ -11,9 +11,12 @@ const CommonDefaults = {
 	},
 	status: 'Pending',
 	dueDate: '2025-04-01',
-	mode: 'task',
+	type: 'Task',
 	started: false,
 	closed: false,
+	discussionText: 'Lorem ipsum',
+	participants: [3, 4],
+	assignees: [5],
 };
 
 export function getDiscussionsMock(overrides = {}) {
@@ -24,6 +27,7 @@ export function getDiscussionsMock(overrides = {}) {
 export const DiscussionsDataMock = [
 	{...CommonDefaults},
 	{
+		...CommonDefaults,
 		id: 2,
 		createdAt: '2025-03-06 06:01:17',
 		owner: 'kkarina',
@@ -37,11 +41,12 @@ export const DiscussionsDataMock = [
 		},
 		status: 'In Progress',
 		dueDate: '2025-04-01',
-		mode: 'task',
+		type: 'Task',
 		started: true,
 		closed: false,
 	},
 	{
+		...CommonDefaults,
 		id: 3,
 		createdAt: '2025-03-06 06:01:17',
 		owner: 'kstranack',
@@ -54,11 +59,12 @@ export const DiscussionsDataMock = [
 		},
 		status: 'In Progress',
 		dueDate: '2025-04-01',
-		mode: 'task',
+		type: 'Task',
 		started: true,
 		closed: false,
 	},
 	{
+		...CommonDefaults,
 		id: 4,
 		createdAt: '2025-03-06 06:01:17',
 		owner: 'aauthor',
@@ -69,10 +75,11 @@ export const DiscussionsDataMock = [
 		},
 		status: 'In Progress',
 		dueDate: '2025-04-01',
-		mode: 'discusssion',
+		type: 'Discussion',
 		closed: false,
 	},
 	{
+		...CommonDefaults,
 		id: 5,
 		createdAt: '2025-03-06 06:01:17',
 		owner: 'aauthor',
@@ -83,10 +90,11 @@ export const DiscussionsDataMock = [
 		},
 		status: 'In Progress',
 		dueDate: '2025-04-01',
-		mode: ' discusssion',
+		type: 'Discussion',
 		closed: false,
 	},
 	{
+		...CommonDefaults,
 		id: 6,
 		createdAt: '2025-03-06 06:01:17',
 		owner: 'ksimone',
@@ -97,11 +105,12 @@ export const DiscussionsDataMock = [
 		},
 		status: 'Closed',
 		dueDate: '2025-04-01',
-		mode: 'task',
+		type: 'Task',
 		started: true,
 		closed: true,
 	},
 	{
+		...CommonDefaults,
 		id: 7,
 		createdAt: '2025-03-06 06:01:17',
 		owner: 'kstranack',
@@ -112,7 +121,7 @@ export const DiscussionsDataMock = [
 		},
 		status: 'Closed',
 		dueDate: '2025-04-01',
-		mode: 'discussion',
+		type: 'Discussion',
 		closed: true,
 	},
 ];
diff --git a/src/mockFactories/taskDiscussionTemplates.js b/src/mockFactories/taskDiscussionTemplates.js
new file mode 100644
index 000000000..9552358a3
--- /dev/null
+++ b/src/mockFactories/taskDiscussionTemplates.js
@@ -0,0 +1,103 @@
+import {deepMerge} from './mockHelpers';
+
+const CommonDefaults = {
+	id: 1,
+	name: 'Plagiarism Check',
+	content: `
+        <p><strong>Task:</strong> <strong>Complete Prepublication Plagiarism and Originality Checklist</strong></p>
+
+        <p><strong>Description:</strong><br>
+        Review the submitted manuscript to ensure it meets F1000Research’s requirements for originality and passes prepublication plagiarism screening.</p>
+
+        <p><strong>Checklist:</strong></p>
+        <ul>
+        <li>Confirm the manuscript is <strong>original</strong> and not published or under consideration elsewhere (preprints allowed).</li>
+        <li>Submit the document to <strong>Similarity Check (iThenticate)</strong> via Crossref.</li>
+        <li>Review the similarity report:
+            <ul>
+            <li>Check for any signs of <strong>plagiarism</strong> or <strong>self-plagiarism</strong>.</li>
+            <li>Highlight flagged sections and suggest revisions as needed.</li>
+            </ul>
+        </li>
+        <li>Ensure the manuscript includes a clear <strong>statement of originality</strong>.</li>
+        <li>Verify other prepublication criteria:
+            <ul>
+            <li>Author affiliations are valid and verifiable (e.g., institutional email or profile).</li>
+            <li>The correct <strong>article type</strong> is selected and formatting aligns with guidelines.</li>
+            <li>Manuscript is written in <strong>clear, professional language</strong>.</li>
+            <li><strong>Methods section</strong> is sufficiently detailed for reproducibility.</li>
+            <li>All required <strong>ethical policies</strong> are addressed (e.g., conflicts of interest).</li>
+            <li>Includes a proper <strong>data availability statement</strong>.</li>
+            </ul>
+        </li>
+        </ul>
+
+        <p><strong>Notes:</strong><br>
+        F1000Research will not accept submissions that fail originality checks. Ensure all compliance issues are resolved before final submission.</p>
+
+    `,
+	type: 'Task',
+	taskDetails: {
+		participantRoles: [16, 1],
+		dueDate: 'P1W',
+	},
+};
+
+export function getTemplate(overrides = {}) {
+	const discussions = deepMerge({...CommonDefaults}, overrides);
+	return discussions;
+}
+
+export const TemplatesDataMock = [
+	{...CommonDefaults},
+	{
+		id: 2,
+		name: 'Authorship Criteria',
+		content: `
+            <p><strong>Discussion Topic:</strong> <strong>Authorship Criteria for Manuscript Submission</strong></p>
+
+            <p><strong>Context:</strong><br>
+            As we prepare to submit the manuscript titled <em>“Trends in Online Learning Post-Pandemic”</em>, it's important to ensure that all listed contributors meet the required authorship criteria.</p>
+
+            <p><strong>Discussion Points:</strong></p>
+            <ul>
+            <li>Have all listed authors made substantial contributions to the research (e.g., conception, methodology, analysis, or interpretation)?</li>
+            <li>Did each author participate in drafting or critically revising the manuscript?</li>
+            <li>Has every author reviewed and approved the final version?</li>
+            <li>Is everyone willing to take accountability for their part in the work?</li>
+            <li>Are there any contributors who should be acknowledged but not listed as authors?</li>
+            </ul>
+
+            <p><strong>Action:</strong><br>
+            Please share your thoughts by July 15. Any concerns about authorship should be raised before we finalize the submission.</p>
+        `,
+		type: 'Discussion',
+	},
+	{
+		id: 3,
+		name: 'Ethical Approval',
+		content: `
+            <p><strong>Task:</strong> <strong>Secure ethical approval for research study</strong></p>    
+
+            <p><strong>Description:</strong><br>
+            Obtain ethical approval for the upcoming research study titled <em>“Digital Habits of University Students in Remote Learning Environments.”</em> Approval is required before any data collection can begin.</p>
+
+            <p><strong>Steps to Complete:</strong></p>
+            <ul>
+            <li>Review institutional ethics policy and guidelines.</li>
+            <li>Complete the ethics application form with study details, methodology, consent process, and data protection measures.</li>
+            <li>Attach supporting documents (participant information sheet, consent form, survey instrument).</li>
+            <li>Submit the application to the university’s Research Ethics Board (REB).</li>
+            <li>Track the approval status and follow up if necessary.</li>
+            </ul>
+
+            <p><strong>Notes:</strong><br>
+            Ensure all documents are consistent and up to date. Reach out to the ethics coordinator if clarification is needed.</p>
+        `,
+		type: 'Task',
+		taskDetails: {
+			participantRoles: [65536],
+			dueDate: 'P3M',
+		},
+	},
+];
diff --git a/src/pages/tasksAndDiscussions/tasksAndDiscussionsStore.js b/src/pages/tasksAndDiscussions/tasksAndDiscussionsStore.js
new file mode 100644
index 000000000..d1bdf3882
--- /dev/null
+++ b/src/pages/tasksAndDiscussions/tasksAndDiscussionsStore.js
@@ -0,0 +1,53 @@
+import {defineComponentStore} from '@/utils/defineComponentStore';
+
+import {computed, watch} from 'vue';
+
+import {useFetch} from '@/composables/useFetch';
+import {useUrl} from '@/composables/useUrl';
+
+import {useDataChanged} from '@/composables/useDataChanged';
+import {useExtender} from '@/composables/useExtender';
+
+export const useTasksAndDiscussionsStore = defineComponentStore(
+	'tasksAndDiscussions',
+	(props) => {
+		const extender = useExtender();
+
+		const relativeUrl = computed(() => {
+			return `templates`;
+		});
+
+		const {apiUrl: templatesApiUrl} = useUrl(relativeUrl);
+
+		const {data: templates, fetch: fetchTemplates} = useFetch(templatesApiUrl);
+
+		watch(relativeUrl, () => {
+			templates.value = null;
+			fetchTemplates();
+		});
+
+		fetchTemplates();
+
+		const {triggerDataChange} = useDataChanged(() => fetchTemplates());
+
+		function triggerDataChangeCallback() {
+			triggerDataChange();
+		}
+
+		const templatesList = computed(() => {
+			if (!templates.value) {
+				return [];
+			}
+
+			return templates.value;
+		});
+
+		return {
+			templatesList,
+			triggerDataChangeCallback,
+
+			extender,
+			props,
+		};
+	},
+);
diff --git a/src/utils/dateUtils.js b/src/utils/dateUtils.js
index 16aa41129..084b19bbc 100644
--- a/src/utils/dateUtils.js
+++ b/src/utils/dateUtils.js
@@ -1,4 +1,4 @@
-import {DateTime} from 'luxon';
+import {DateTime, Duration} from 'luxon';
 import {phpToLuxonFormat} from './convertPhpDateTimeFormatToLuxon';
 
 /**
@@ -173,3 +173,37 @@ export function relativeStringTimeFromNow(timestamp) {
 		locale: getDateCurrentLocale(),
 	});
 }
+
+/**
+ * Calculates a target date by adding an ISO 8601 duration to a start date.
+ *
+ * If no duration is provided, returns the current date and time.
+ * If no start date is provided, uses the current date and time as the start.
+ *
+ * @param {string} duration - An ISO 8601 duration string (e.g., "P1W" for one week, "P3D" for three days).
+ * @param {string} [startDate] - Optional ISO 8601 date string to use as the starting point (e.g., "2025-07-12").
+ * @returns {string} The resulting target date as an ISO date string (e.g., "2025-07-19").
+ */
+export function getRelativeTargetDate(duration, startDate) {
+	const currentDate = DateTime.now().toISODate();
+	if (!duration) {
+		return currentDate;
+	}
+
+	const parsedDuration = Duration.fromISO(duration);
+	if (!parsedDuration.isValid) {
+		return currentDate;
+	}
+
+	let baseDate;
+	if (startDate) {
+		baseDate = DateTime.fromISO(startDate);
+		if (!baseDate.isValid) {
+			return currentDate;
+		}
+	} else {
+		baseDate = DateTime.now();
+	}
+
+	return baseDate.plus(parsedDuration).toISODate();
+}