diff --git a/src/components/Checkbox/Checkbox.vue b/src/components/Checkbox/Checkbox.vue
index 7a8576f01..628c3aa03 100644
--- a/src/components/Checkbox/Checkbox.vue
+++ b/src/components/Checkbox/Checkbox.vue
@@ -1,6 +1,6 @@
 <template>
 	<label
-		class="flex select-none items-center text-base-normal"
+		class="text-base flex select-none items-center"
 		:class="{'w-5': !label}"
 	>
 		<input
diff --git a/src/components/Form/FormGroup.vue b/src/components/Form/FormGroup.vue
index 698a07404..58b22a158 100644
--- a/src/components/Form/FormGroup.vue
+++ b/src/components/Form/FormGroup.vue
@@ -154,6 +154,12 @@ export default {
 			validator: (val) => ['default', 'fullWidth'].includes(val),
 		},
 	},
+	emits: [
+		/** Emitted when a field prop changes. Payload: `(fieldName, propName, newValue, [localeKey])`. The `localeKey` will be null for fields that are not multilingual. This event is fired every time the `value` changes, so you should [debounce](https://www.npmjs.com/package/debounce) event callbacks that contain resource-intensive code. */
+		'change',
+		'set-errors',
+	],
+
 	computed: {
 		/**
 		 * All fields assigned to this group
diff --git a/src/components/Form/FormPage.vue b/src/components/Form/FormPage.vue
index 836b181e8..5a38155ad 100644
--- a/src/components/Form/FormPage.vue
+++ b/src/components/Form/FormPage.vue
@@ -118,6 +118,11 @@ export default {
 		},
 		spacingVariant: String,
 	},
+	emits: [
+		/** Emitted when a field prop changes. Payload: `(fieldName, propName, newValue, [localeKey])`. The `localeKey` will be null for fields that are not multilingual. This event is fired every time the `value` changes, so you should [debounce](https://www.npmjs.com/package/debounce) event callbacks that contain resource-intensive code. */
+		'change',
+		'set-errors',
+	],
 	data() {
 		return {
 			hasRecentSave: false,
@@ -152,7 +157,7 @@ export default {
 
 		footerSpacingStyle() {
 			if (this.spacingVariant === 'fullWidth') {
-				return '!px-0 !py-12';
+				return '!px-0';
 			}
 			return '';
 		},
diff --git a/src/components/Form/fields/FieldAuthors.vue b/src/components/Form/fields/FieldAuthors.vue
index 9a5ce6ff4..b4f084b59 100644
--- a/src/components/Form/fields/FieldAuthors.vue
+++ b/src/components/Form/fields/FieldAuthors.vue
@@ -24,40 +24,44 @@
 						<FieldText
 							:name="'givenName'"
 							:value="row.givenName"
+							:all-errors="{givenName: errors?.[index]?.givenName}"
 							@change="
 								(fieldName, _, fieldValue) => {
 									updateRow(index, fieldName, fieldValue);
 								}
 							"
-							:all-errors="{givenName: errors?.[index]?.givenName}"
 						/>
 					</TableCell>
 					<TableCell>
 						<FieldText
 							:name="'familyName'"
 							:value="row.familyName"
+							:all-errors="{familyName: errors?.[index]?.familyName}"
 							@change="
 								(fieldName, _, fieldValue) => {
 									updateRow(index, fieldName, fieldValue);
 								}
 							"
-							:all-errors="{familyName: errors?.[index]?.familyName}"
 						/>
 					</TableCell>
 					<TableCell>
 						<FieldText
 							:name="'orcid'"
 							:value="row.orcid"
+							:all-errors="{orcid: errors?.[index]?.orcid}"
 							@change="
 								(fieldName, _, fieldValue) => {
 									updateRow(index, fieldName, fieldValue);
 								}
 							"
-							:all-errors="{orcid: errors?.[index]?.orcid}"
 						/>
 					</TableCell>
 					<TableCell>
-						<PkpButton :is-link="true" @click="deleteRow(index)">
+						<PkpButton
+							:is-link="true"
+							:is-warnable="true"
+							@click="deleteRow(index)"
+						>
 							{{ t('common.delete', []) }}
 						</PkpButton>
 					</TableCell>
diff --git a/src/components/Form/fields/FieldTextarea.vue b/src/components/Form/fields/FieldTextarea.vue
index 9a6a640de..3a4867d05 100644
--- a/src/components/Form/fields/FieldTextarea.vue
+++ b/src/components/Form/fields/FieldTextarea.vue
@@ -85,7 +85,9 @@ export default {
 			type: String,
 			default: 'normal',
 			validator: function (value) {
-				return ['small', 'normal', 'large'].indexOf(value) !== -1;
+				return (
+					['small', 'small-height', 'normal', 'large'].indexOf(value) !== -1
+				);
 			},
 		},
 	},
@@ -118,6 +120,10 @@ export default {
 	height: 8em;
 }
 
+.pkpFormField--small-height .pkpFormField--textarea__input {
+	height: 10em;
+}
+
 .pkpFormField--large .pkpFormField--textarea__input {
 	height: 40em;
 }
diff --git a/src/composables/useForm.js b/src/composables/useForm.js
index 54f2c2c55..4fd3417d1 100644
--- a/src/composables/useForm.js
+++ b/src/composables/useForm.js
@@ -365,7 +365,15 @@ export function useForm(_form = {}, {customSubmit} = {}) {
 
 	function initEmptyForm(
 		formId,
-		{action, method, locales, showErrorFooter, spacingVariant} = {},
+		{
+			action,
+			method,
+			locales,
+			showErrorFooter,
+			spacingVariant,
+			onSuccess,
+			onSet,
+		} = {},
 	) {
 		if (!form.value) {
 			form.value = {};
@@ -379,6 +387,9 @@ export function useForm(_form = {}, {customSubmit} = {}) {
 		form.value.locales = locales;
 		form.value.showErrorFooter = showErrorFooter;
 		form.value.spacingVariant = spacingVariant || 'default';
+		form.value.onSuccess = onSuccess || undefined;
+		form.value.onSet = onSet || set;
+
 		setMethod(method || 'POST');
 		setAction(action || 'emit');
 		setLocales(locales);
@@ -592,6 +603,25 @@ export function useForm(_form = {}, {customSubmit} = {}) {
 		);
 	}
 
+	/**
+	 * Adds or updates a 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 addFieldHtml(fieldName, {...commonFields} = {}, opts) {
+		return addField(
+			fieldName,
+			{
+				component: 'field-html',
+				...commonFields,
+			},
+			opts,
+		);
+	}
+
 	/**
 	 * Adds or updates a FieldCheckbox in the form.
 	 * @param {string} fieldName - The name of the field
@@ -670,6 +700,7 @@ export function useForm(_form = {}, {customSubmit} = {}) {
 		addFieldTextArea,
 		addFieldCheckbox,
 		addFieldComponent,
+		addFieldHtml,
 		getField,
 	};
 }
diff --git a/src/managers/CitationManager/CitationManager.mdx b/src/managers/CitationManager/CitationManager.mdx
new file mode 100644
index 000000000..7738d3110
--- /dev/null
+++ b/src/managers/CitationManager/CitationManager.mdx
@@ -0,0 +1,33 @@
+import {
+	Primary,
+	Controls,
+	Stories,
+	Meta,
+	ArgTypes,
+} from '@storybook/addon-docs/blocks';
+import * as CitationManager from './CitationManager.stories.js';
+
+<Meta of={CitationManager} />
+
+# Citation manager
+
+Listing of Citations.
+
+## Props
+
+<ArgTypes />
+
+## Extension points for plugins
+
+For more details and examples on how to use them, check out [Plugins guide](..?path=/docs/guide-plugins--docs)
+
+The name of the Pinia store is `CitationManager`.
+
+- `getTopItems`: Add/Change items in the top right, where the `Upload / Select` button is.
+- `getItemActions`: Add/Change the list of actions that are displayed after clicking the 3 dots button.
+- `getColumns`: Add/Change the columns being displayed in the table.
+- ...
+
+<Primary />
+<Controls />
+<Stories />
diff --git a/src/managers/CitationManager/CitationManager.stories.js b/src/managers/CitationManager/CitationManager.stories.js
new file mode 100644
index 000000000..8977ee5bd
--- /dev/null
+++ b/src/managers/CitationManager/CitationManager.stories.js
@@ -0,0 +1,17 @@
+import CitationManager from './CitationManager.vue';
+
+export default {
+	title: 'Managers/CitationManager',
+	component: CitationManager,
+	render: (args) => ({
+		components: {CitationManager},
+		setup() {
+			return {args};
+		},
+		template: `<CitationManager v-bind="args"/>`,
+	}),
+};
+
+export const Base = {
+	args: {},
+};
diff --git a/src/managers/CitationManager/CitationManager.vue b/src/managers/CitationManager/CitationManager.vue
new file mode 100644
index 000000000..1ca8e54ec
--- /dev/null
+++ b/src/managers/CitationManager/CitationManager.vue
@@ -0,0 +1,108 @@
+<template>
+	<div>
+		<CitationManagerMetadataLookup />
+		<div class="pt-3">
+			<CitationManagerAddRawCitations />
+		</div>
+		<CitationManagerStatusProcessed
+			v-if="citationStore.citationsMetadataLookup"
+		/>
+		<div>
+			<PkpButton
+				:is-disabled="!citationStore.canEditPublication"
+				:is-link="true"
+				@click="citationStore.citationDeleteAllCitations"
+			>
+				{{ t('submission.citations.structured.deleteAllLink') }}
+			</PkpButton>
+		</div>
+		<PkpTable :aria-label="t('submission.citations.structured')">
+			<template #label>
+				<h3 class="text-4 font-semibold">
+					{{ t('submission.citations.structured') }}
+				</h3>
+				<span class="text-lg-normal">
+					{{ t('submission.citations.structured.descriptionTable') }}
+				</span>
+			</template>
+			<template #top-controls>
+				<div class="flex gap-x-2">
+					<component
+						:is="Components[action.component] || action.component"
+						v-bind="action.props || {}"
+						v-for="(action, i) in citationStore.topItems"
+						:key="i"
+					></component>
+				</div>
+			</template>
+			<TableHeader>
+				<TableColumn
+					v-for="(column, i) in citationStore.columns"
+					:key="i"
+					:class="i > 0 ? '!w-16 !text-center' : ''"
+				>
+					<span v-if="column.isHeaderComponent">
+						<component :is="Components[column.header] || column.header" />
+					</span>
+					<span v-else :class="column.headerSrOnly ? 'sr-only' : ''">
+						{{ column.header }}
+					</span>
+				</TableColumn>
+			</TableHeader>
+			<TableBody
+				:empty-text="t('submission.citations.structured.emptyCitations')"
+			>
+				<TableRow
+					v-for="citation in citationStore.citationsFiltered"
+					:key="citation.id"
+				>
+					<component
+						:is="Components[column.component] || column.component"
+						v-for="(column, index) in citationStore.columns"
+						:key="index"
+						v-bind="citation"
+						:citation="citation"
+					></component>
+				</TableRow>
+			</TableBody>
+		</PkpTable>
+	</div>
+</template>
+
+<script setup>
+import {useLocalize} from '@/composables/useLocalize';
+import PkpButton from '@/components/Button/Button.vue';
+import PkpTable from '@/components/Table/Table.vue';
+import TableColumn from '@/components/Table/TableColumn.vue';
+import TableHeader from '@/components/Table/TableHeader.vue';
+import TableBody from '@/components/Table/TableBody.vue';
+import TableRow from '@/components/Table/TableRow.vue';
+import CitationManagerCellCitation from '@/managers/CitationManager/CitationManagerCellCitation.vue';
+import CitationManagerCellToggle from '@/managers/CitationManager/CitationManagerCellToggle.vue';
+import CitationManagerToggleAll from '@/managers/CitationManager/CitationManagerToggleAll.vue';
+import CitationManagerCellActions from '@/managers/CitationManager/CitationManagerCellActions.vue';
+import CitationManagerSearchField from '@/managers/CitationManager/CitationManagerSearchField.vue';
+import CitationManagerStatusProcessed from '@/managers/CitationManager/CitationManagerStatusProcessed.vue';
+import CitationManagerAddRawCitations from '@/managers/CitationManager/CitationManagerAddRawCitations.vue';
+import CitationManagerMetadataLookup from '@/managers/CitationManager/CitationManagerMetadataLookup.vue';
+import {useCitationManagerStore} from './citationManagerStore.js';
+
+const {t} = useLocalize();
+
+const Components = {
+	CitationManagerCellCitation,
+	CitationManagerCellToggle,
+	CitationManagerToggleAll,
+	CitationManagerCellActions,
+	CitationManagerSearchField,
+};
+
+const props = defineProps({
+	submission: {type: Object, required: true},
+	publication: {type: Object, required: true},
+	canEdit: {type: Boolean, required: true},
+	componentForms: {type: Object, required: true},
+});
+
+const citationStore = useCitationManagerStore(props);
+</script>
diff --git a/src/managers/CitationManager/CitationManagerAddRawCitations.vue b/src/managers/CitationManager/CitationManagerAddRawCitations.vue
new file mode 100644
index 000000000..0b430f2eb
--- /dev/null
+++ b/src/managers/CitationManager/CitationManagerAddRawCitations.vue
@@ -0,0 +1,9 @@
+<template>
+	<PkpForm v-bind="citationStore.formAddRawCitations"></PkpForm>
+</template>
+
+<script setup>
+import {useCitationManagerStore} from './citationManagerStore.js';
+
+const citationStore = useCitationManagerStore();
+</script>
diff --git a/src/managers/CitationManager/CitationManagerCellActions.vue b/src/managers/CitationManager/CitationManagerCellActions.vue
new file mode 100644
index 000000000..247013a38
--- /dev/null
+++ b/src/managers/CitationManager/CitationManagerCellActions.vue
@@ -0,0 +1,33 @@
+<template>
+	<TableCell>
+		<DropdownActions
+			v-show="citationStore.canEditPublication"
+			button-variant="ellipsis"
+			:label="t('common.moreActions')"
+			:actions="citationStore.getItemActions({citation})"
+			@action="(actionName) => handleAction(actionName, citation)"
+		/>
+	</TableCell>
+</template>
+
+<script setup>
+import {computed} from 'vue';
+import {useLocalize} from '@/composables/useLocalize';
+import TableCell from '@/components/Table/TableCell.vue';
+import DropdownActions from '@/components/DropdownActions/DropdownActions.vue';
+import {useCitationManagerStore} from './citationManagerStore';
+
+const {t} = useLocalize();
+
+const props = defineProps({
+	citation: {type: Object, required: true},
+});
+
+const citation = computed(() => props.citation);
+
+const citationStore = useCitationManagerStore();
+
+function handleAction(actionName, citation) {
+	citationStore[actionName]({citation});
+}
+</script>
diff --git a/src/managers/CitationManager/CitationManagerCellCitation.vue b/src/managers/CitationManager/CitationManagerCellCitation.vue
new file mode 100644
index 000000000..90bfe2512
--- /dev/null
+++ b/src/managers/CitationManager/CitationManagerCellCitation.vue
@@ -0,0 +1,186 @@
+<template>
+	<TableCell :is-row-header="false">
+		<!-- citationsMetadataLookup enabled -->
+		<div v-if="citationStore.citationsMetadataLookup">
+			<!-- all -->
+			<div class="text-lg-normal">
+				<a
+					v-if="citation.doi"
+					:is-link="true"
+					:href="citationStore.doiPrefix + '/' + citation.doi"
+					target="_blank"
+				>
+					{{ citation.doi }}
+				</a>
+				<a
+					v-if="citation.url"
+					:is-link="true"
+					:href="citation.url"
+					target="_blank"
+				>
+					{{ citation.url }}
+				</a>
+				<a
+					v-if="citation.arxiv"
+					:is-link="true"
+					:href="citation.arxiv"
+					target="_blank"
+				>
+					{{ citation.arxiv }}
+				</a>
+				<a
+					v-if="citation.handle"
+					:is-link="true"
+					:href="citation.handle"
+					target="_blank"
+				>
+					{{ citation.handle }}
+				</a>
+				<span v-if="citation.urn">urn: {{ citation.urn }}</span>
+			</div>
+			<!-- is structured -->
+			<div v-if="citation.isStructured">
+				<div class="pt-2 text-secondary">{{ citation.title }}</div>
+				<div v-if="isExpanded">
+					<div class="py-2">
+						<ul class="text-base-normal">
+							<li
+								v-for="(author, authorIndex) in citation.authors"
+								:key="authorIndex"
+								class="inline-flex items-center"
+							>
+								<span class="me-2 inline-flex items-center">
+									<span>{{ author.familyName }} {{ author.givenName }}</span>
+									<a
+										v-if="author.orcid"
+										class="inline-flex items-center"
+										:href="author.orcid"
+										target="_blank"
+									>
+										<!-- Icon component, marked as decorative -->
+										<Icon icon="Orcid" class="mx-1 w-4" aria-hidden="true" />
+										<!-- Screen reader-only text with author context -->
+										<span class="sr-only">
+											{{
+												t('submission.citations.structured.label.authorOrcid', {
+													givenName: author.givenName,
+													familyName: author.familyName,
+												})
+											}}
+										</span>
+									</a>
+								</span>
+							</li>
+						</ul>
+					</div>
+					<div v-if="citation.sourceName" class="text-sm-normal text-secondary">
+						{{ citation.sourceName }}
+					</div>
+					<div class="py-2 text-sm-normal">
+						<dl class="flex gap-x-1">
+							<dt v-if="citation.date" class="inline text-secondary">
+								{{
+									t('semicolon', {
+										label: t('submission.citations.structured.label.date'),
+									})
+								}}
+							</dt>
+							<dd v-if="citation.date" class="inline">
+								{{ formatShortDate(citation.date) }}
+							</dd>
+							<dt v-if="citation.volume" class="ms-3 inline text-secondary">
+								{{
+									t('semicolon', {
+										label: t('submission.citations.structured.label.volume'),
+									})
+								}}
+							</dt>
+							<dd v-if="citation.volume" class="inline">
+								{{ citation.volume }}
+							</dd>
+							<dt v-if="citation.issue" class="ms-3 inline text-secondary">
+								{{
+									t('semicolon', {
+										label: t(
+											'submission.citations.structured.label.issueNumber',
+										),
+									})
+								}}
+							</dt>
+							<dd v-if="citation.issue" class="inline">{{ citation.issue }}</dd>
+							<dt
+								v-if="citation.firstPage && citation.lastPage"
+								class="ms-3 inline text-secondary"
+							>
+								{{
+									t('semicolon', {
+										label: t('submission.citations.structured.label.pages'),
+									})
+								}}
+							</dt>
+							<dd v-if="citation.firstPage && citation.lastPage" class="inline">
+								{{ citation.firstPage }} - {{ citation.lastPage }}
+							</dd>
+						</dl>
+					</div>
+					<div v-if="citation.isStructured" class="w-fit pt-1 text-xs-normal">
+						{{ citation.rawCitation }}
+					</div>
+				</div>
+				<div class="mt-2">
+					<a v-if="citation.wikidata" :href="citation.wikidata" target="_blank">
+						<Badge :color-variant="'primary'" :size-variant="'compact'">
+							{{ t('submission.citations.structured.label.wikidata') }}
+						</Badge>
+					</a>
+					<a v-if="citation.openAlex" :href="citation.openAlex" target="_blank">
+						<Badge :color-variant="'primary'" :size-variant="'compact'">
+							{{ t('submission.citations.structured.label.openAlex') }}
+						</Badge>
+					</a>
+				</div>
+			</div>
+			<!-- is not structured -->
+			<div v-else>
+				<div>{{ citation.rawCitation }}</div>
+				<div v-if="citation.isProcessed" class="mt-2">
+					<Badge :color-variant="'attention'" :size-variant="'compact'">
+						{{
+							t('submission.citations.structured.noStructuredInformationFound')
+						}}
+					</Badge>
+				</div>
+			</div>
+		</div>
+		<!-- citationsMetadataLookup disabled -->
+		<div v-else>
+			<div>{{ citation.rawCitation }}</div>
+		</div>
+	</TableCell>
+</template>
+
+<script setup>
+import {computed} from 'vue';
+import {useLocalize} from '@/composables/useLocalize';
+import Badge from '@/components/Badge/Badge.vue';
+import TableCell from '@/components/Table/TableCell.vue';
+import Icon from '@/components/Icon/Icon.vue';
+import {useCitationManagerStore} from './citationManagerStore';
+import {useDate} from '@/composables/useDate';
+
+const {t} = useLocalize();
+
+const {formatShortDate} = useDate();
+
+const props = defineProps({
+	citation: {type: Object, required: true},
+});
+
+const citation = computed(() => props.citation);
+
+const citationStore = useCitationManagerStore();
+
+const isExpanded = computed(() => {
+	return citationStore.expandedIds.includes(citation.value.id);
+});
+</script>
diff --git a/src/managers/CitationManager/CitationManagerCellToggle.vue b/src/managers/CitationManager/CitationManagerCellToggle.vue
new file mode 100644
index 000000000..09721acff
--- /dev/null
+++ b/src/managers/CitationManager/CitationManagerCellToggle.vue
@@ -0,0 +1,23 @@
+<template>
+	<TableCellTreeExpand
+		:is-displayed="
+			citationStore.citationsMetadataLookup && citation.isStructured
+		"
+		:is-expanded="citationStore.isExpanded(citation)"
+		@toggle="citationStore.toggleItemExpansion(citation)"
+	></TableCellTreeExpand>
+</template>
+
+<script setup>
+import {computed} from 'vue';
+import {useCitationManagerStore} from './citationManagerStore';
+import TableCellTreeExpand from '@/components/Table/TableCellTreeExpand.vue';
+
+const props = defineProps({
+	citation: {type: Object, required: true},
+});
+
+const citation = computed(() => props.citation);
+
+const citationStore = useCitationManagerStore();
+</script>
diff --git a/src/managers/CitationManager/CitationManagerMetadataLookup.vue b/src/managers/CitationManager/CitationManagerMetadataLookup.vue
new file mode 100644
index 000000000..0028f7d72
--- /dev/null
+++ b/src/managers/CitationManager/CitationManagerMetadataLookup.vue
@@ -0,0 +1,16 @@
+<template>
+	<div>
+		<PkpForm v-bind="citationStore.formEnableLookup"></PkpForm>
+	</div>
+</template>
+
+<script setup>
+import PkpForm from '@/components/Form/Form.vue';
+import {useCitationManagerStore} from './citationManagerStore.js';
+
+defineProps({
+	checked: {type: Boolean, required: true},
+});
+
+const citationStore = useCitationManagerStore();
+</script>
diff --git a/src/managers/CitationManager/CitationManagerSearchField.vue b/src/managers/CitationManager/CitationManagerSearchField.vue
new file mode 100644
index 000000000..eab1cb4b7
--- /dev/null
+++ b/src/managers/CitationManager/CitationManagerSearchField.vue
@@ -0,0 +1,16 @@
+<template>
+	<PkpSearch
+		:search-label="t('submission.citations.structured.search.placeholder')"
+		@search-phrase-changed="(...args) => citationStore.setSearchPhrase(...args)"
+	/>
+</template>
+
+<script setup>
+import {useLocalize} from '@/composables/useLocalize';
+import PkpSearch from '@/components/Search/Search.vue';
+import {useCitationManagerStore} from './citationManagerStore';
+
+const {t} = useLocalize();
+
+const citationStore = useCitationManagerStore();
+</script>
diff --git a/src/managers/CitationManager/CitationManagerStatusProcessed.vue b/src/managers/CitationManager/CitationManagerStatusProcessed.vue
new file mode 100644
index 000000000..9f1c57e57
--- /dev/null
+++ b/src/managers/CitationManager/CitationManagerStatusProcessed.vue
@@ -0,0 +1,48 @@
+<template>
+	<div v-if="total > 0">
+		<div class="flex items-center py-2">
+			<Icon
+				:icon="processed === total ? 'Complete' : 'InProgress'"
+				:class="'inline-block h-auto w-12 align-middle'"
+				:inline="true"
+			/>
+			<div class="align-middle">
+				<span class="font-semibold">
+					{{
+						processed === total
+							? t('submission.citations.structured.processed.title', {
+									total: total,
+								})
+							: t('submission.citations.structured.processing.title', {
+									processed: processed,
+									total: total,
+								})
+					}}
+				</span>
+				<br />
+				<p class="text-lg-normal">
+					{{
+						processed === total
+							? t('submission.citations.structured.processed.description')
+							: t('submission.citations.structured.processing.description')
+					}}
+				</p>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import {useLocalize} from '@/composables/useLocalize';
+import Icon from '@/components/Icon/Icon.vue';
+import {useCitationManagerStore} from './citationManagerStore.js';
+import {computed} from 'vue';
+
+const {t} = useLocalize();
+
+const citationStore = useCitationManagerStore();
+
+const total = computed(() => citationStore.totalCitations);
+
+const processed = computed(() => citationStore.processedCitations);
+</script>
diff --git a/src/managers/CitationManager/CitationManagerToggleAll.vue b/src/managers/CitationManager/CitationManagerToggleAll.vue
new file mode 100644
index 000000000..ae6370e27
--- /dev/null
+++ b/src/managers/CitationManager/CitationManagerToggleAll.vue
@@ -0,0 +1,24 @@
+<template>
+	<PkpButton
+		v-if="citationStore.citationsMetadataLookup"
+		:is-link="true"
+		@click="citationStore.toggleAllItemsExpansion"
+	>
+		{{
+			citationStore.allIdsExpanded
+				? t('submission.citations.structured.collapseAll')
+				: t('submission.citations.structured.expandAll')
+		}}
+	</PkpButton>
+	<span v-else>&nbsp;</span>
+</template>
+
+<script setup>
+import {useLocalize} from '@/composables/useLocalize';
+import PkpButton from '@/components/Button/Button.vue';
+import {useCitationManagerStore} from './citationManagerStore';
+
+const {t} = useLocalize();
+
+const citationStore = useCitationManagerStore();
+</script>
diff --git a/src/managers/CitationManager/citationManagerStore.js b/src/managers/CitationManager/citationManagerStore.js
new file mode 100644
index 000000000..869f4c848
--- /dev/null
+++ b/src/managers/CitationManager/citationManagerStore.js
@@ -0,0 +1,292 @@
+import {computed, onUnmounted, ref, toRefs} from 'vue';
+import {defineComponentStore} from '@/utils/defineComponentStore';
+import {useDataChanged} from '@/composables/useDataChanged';
+import {useExtender} from '@/composables/useExtender';
+import {useLocalize} from '@/composables/useLocalize';
+import {useUrl} from '@/composables/useUrl';
+import {useModal} from '@/composables/useModal';
+import {useFetch} from '@/composables/useFetch';
+import {useCitationManagerConfig} from './useCitationManagerConfig';
+import {useCitationManagerActions} from './useCitationManagerActions';
+import {useCitationManagerFormAddRawCitation} from './useCitationManagerFormAddRawCitation';
+import {useCitationManagerFormEnableLookup} from './useCitationManagerFormEnableLookup';
+
+export const useCitationManagerStore = defineComponentStore(
+	'citationManager',
+	(props) => {
+		const {openDialog} = useModal();
+		const {t} = useLocalize();
+		const extender = useExtender();
+		const {triggerDataChange} = useDataChanged();
+
+		function dataUpdateCallback() {
+			triggerDataChange();
+		}
+
+		const citationManagerConfig = extender.addFns(useCitationManagerConfig());
+		const columns = computed(() => citationManagerConfig.getColumns());
+		const topItems = computed(() => citationManagerConfig.getTopItems());
+
+		function getItemActions({citation}) {
+			return citationManagerConfig.getItemActions({
+				citation,
+				store,
+			});
+		}
+
+		const {
+			submission,
+			publication,
+			canEdit: canEditPublication,
+		} = toRefs(props);
+		const citations = computed(() => publication.value.citations ?? []);
+
+		/**
+		 * constants
+		 */
+		const doiPrefix = 'https://doi.org';
+		const apiPathCitations = 'citations';
+		const apiPathSubmissions = `submissions/${submission.value.id}/publications/${publication.value.id}/citations`;
+
+		/**
+		 * citations metadata lookup
+		 */
+
+		const citationsMetadataLookup = computed(
+			() => publication.value.citationsMetadataLookup,
+		);
+
+		const {form: formEnableLookup} = useCitationManagerFormEnableLookup({
+			citationsMetadataLookup,
+			onCitationMetadataLookupChange: async (newValue) => {
+				console.log('onCitationMetadataLookUPChange');
+				await citationsMetadataLookupChanged(newValue);
+			},
+		});
+
+		async function citationsMetadataLookupChanged(newValue) {
+			const {apiUrl} = useUrl(apiPathSubmissions);
+			const {fetch} = useFetch(`${apiUrl.value}/metadataLookup`, {
+				method: 'PUT',
+				body: {
+					citationsMetadataLookup: newValue,
+				},
+			});
+			await fetch();
+			dataUpdateCallback();
+		}
+
+		/**
+		 * add new raw citations
+		 */
+		const {form: formAddRawCitations} = useCitationManagerFormAddRawCitation({
+			apiPathSubmissions,
+			onSuccess: () => {
+				dataUpdateCallback();
+			},
+		});
+
+		/**
+		 * status processed citations
+		 */
+		const totalCitations = computed(() => citations.value?.length ?? 0);
+		const processedCitations = computed(
+			() =>
+				(citations.value || []).filter((c) => c?.isProcessed === true).length,
+		);
+
+		/**
+		 * Reload publication until all citations are processed
+		 */
+		const reloadIntervalId = setInterval(() => {
+			if (
+				citationsMetadataLookup.value &&
+				processedCitations.value < totalCitations.value
+			) {
+				// simple way to refresh publication
+				triggerDataChange();
+			}
+		}, 7000);
+
+		onUnmounted(() => {
+			clearInterval(reloadIntervalId);
+		});
+
+		/**
+		 * delete all citations
+		 */
+		function citationDeleteAllCitations() {
+			openDialog({
+				title: t('submission.citations.structured.deleteAllDialog.title'),
+				message: t('submission.citations.structured.deleteAllDialog.confirm'),
+				modalStyle: 'negative',
+				actions: [
+					{
+						label: t('common.ok'),
+						isWarnable: true,
+						callback: async (close) => {
+							const {apiUrl} = useUrl(apiPathSubmissions);
+							const {fetch} = useFetch(
+								`${apiUrl.value}/deleteCitationsByPublicationId`,
+								{method: 'DELETE'},
+							);
+							await fetch();
+							dataUpdateCallback();
+							close();
+						},
+					},
+					{
+						label: t('common.cancel'),
+						isSecondary: true,
+						callback: (close) => {
+							close();
+						},
+					},
+				],
+			});
+		}
+
+		/**
+		 * Toggle all / toggle status
+		 */
+		const allIdsExpanded = ref(false);
+		const expandedIds = ref([]);
+		function toggleItemExpansion(citation) {
+			if (!expandedIds.value.includes(citation.id)) {
+				expandedIds.value.push(citation.id);
+			} else {
+				expandedIds.value = expandedIds.value.filter(
+					(id) => id !== citation.id,
+				);
+			}
+		}
+		function toggleAllItemsExpansion() {
+			allIdsExpanded.value = !allIdsExpanded.value;
+			if (allIdsExpanded.value) {
+				citations.value.forEach((citation) => {
+					if (
+						allIdsExpanded.value &&
+						citation.isStructured &&
+						!expandedIds.value.includes(citation.id)
+					) {
+						expandedIds.value.push(citation.id);
+					}
+				});
+			} else {
+				expandedIds.value = [];
+			}
+		}
+		function isExpanded(citation) {
+			return expandedIds.value.includes(citation.id);
+		}
+
+		/**
+		 * Filtered citations and search phrase
+		 */
+		const searchPhrase = ref('');
+		const citationsFiltered = computed(() => {
+			const data = citations.value || [];
+			return searchPhrase.value
+				? filterArrayByPhrase(data, searchPhrase.value)
+				: data;
+		});
+		function setSearchPhrase(value) {
+			searchPhrase.value = value;
+		}
+		function containsSearchPhrase(obj, phrase) {
+			function deepSearch(value) {
+				if (value === null || value === undefined) return false;
+				if (typeof value === 'string') {
+					return value
+						.toLowerCase()
+						.includes(String(phrase ?? '').toLowerCase());
+				}
+				if (Array.isArray(value)) {
+					return value.some(deepSearch);
+				}
+				if (typeof value === 'object') {
+					return Object.values(value).some(deepSearch);
+				}
+				return false;
+			}
+			return deepSearch(obj);
+		}
+		function filterArrayByPhrase(data, phrase) {
+			return (Array.isArray(data) ? data : []).filter((item) =>
+				containsSearchPhrase(item, phrase),
+			);
+		}
+
+		/**
+		 * Actions
+		 */
+		const citationManagerActions = useCitationManagerActions();
+		function getActionArgs(additionalArgs = {}) {
+			return {
+				submission: props.submission,
+				publication: props.publication,
+				componentForms: props.componentForms,
+				...additionalArgs,
+			};
+		}
+		function citationEditCitation({citation}) {
+			citationManagerActions.citationEditCitation(
+				getActionArgs({citation}),
+				dataUpdateCallback,
+			);
+		}
+		function citationDeleteCitation({citation}) {
+			citationManagerActions.citationDeleteCitation(
+				getActionArgs({citation}),
+				dataUpdateCallback,
+			);
+		}
+		function citationReprocessCitation({citation}) {
+			citationManagerActions.citationReprocessCitation(
+				getActionArgs({citation}),
+				dataUpdateCallback,
+			);
+		}
+
+		const store = {
+			columns,
+			topItems,
+			getItemActions,
+
+			submission,
+			publication,
+			canEditPublication,
+
+			doiPrefix,
+			apiPathCitations,
+			apiPathSubmissions,
+
+			formEnableLookup,
+			citationsMetadataLookup,
+			citationsMetadataLookupChanged,
+
+			formAddRawCitations,
+
+			totalCitations,
+			processedCitations,
+
+			citationDeleteAllCitations,
+
+			allIdsExpanded,
+			expandedIds,
+			toggleItemExpansion,
+			toggleAllItemsExpansion,
+			isExpanded,
+
+			citationsFiltered,
+			searchPhrase,
+			setSearchPhrase,
+
+			citationEditCitation,
+			citationDeleteCitation,
+			citationReprocessCitation,
+		};
+
+		return store;
+	},
+);
diff --git a/src/managers/CitationManager/modals/CitationEditModal.mdx b/src/managers/CitationManager/modals/CitationEditModal.mdx
new file mode 100644
index 000000000..5adecd849
--- /dev/null
+++ b/src/managers/CitationManager/modals/CitationEditModal.mdx
@@ -0,0 +1,16 @@
+import {
+	Primary,
+	Controls,
+	Stories,
+	Meta,
+	ArgTypes,
+} from '@storybook/addon-docs/blocks';
+import * as CitationEditModalStories from './CitationEditModal.stories';
+
+<Meta of={CitationEditModalStories} />
+
+# Citation Edit Modal
+
+A vue modal containing a form for editing a citation.
+
+<ArgTypes/ >
diff --git a/src/managers/CitationManager/modals/CitationEditModal.stories.js b/src/managers/CitationManager/modals/CitationEditModal.stories.js
new file mode 100644
index 000000000..7d9020931
--- /dev/null
+++ b/src/managers/CitationManager/modals/CitationEditModal.stories.js
@@ -0,0 +1,46 @@
+import CitationEditModal from './CitationEditModal.vue';
+import PkpButton from '@/components/Button/Button.vue';
+import {useModal} from '@/composables/useModal';
+
+export default {
+	title: 'Managers/CitationManager/modals/CitationEditModal',
+	component: CitationEditModal,
+};
+
+export const Base = {
+	render: (args) => ({
+		components: {
+			CitationEditModal,
+			PkpButton,
+		},
+		setup() {
+			const {openSideModal} = useModal();
+
+			function openEditStructuredModal() {
+				openSideModal(CitationEditModal, args.modalProps);
+			}
+
+			function openEditRawModal() {
+				openSideModal(CitationEditModal, args.modalProps);
+			}
+			return {
+				openEditStructuredModal,
+				openEditRawModal,
+			};
+		},
+		template: `<PkpButton @click="openEditStructuredModal">Structured</PkpButton> <PkpButton @click="openEditRawModal">Raw</PkpButton>`,
+	}),
+	args: {
+		modalProps: {
+			title: 'Edit citation',
+			form: {},
+			citation: {},
+		},
+	},
+	play: async ({canvasElement}) => {},
+	decorators: [
+		() => ({
+			template: '<div style="height: 300px"><story/></div>',
+		}),
+	],
+};
diff --git a/src/managers/CitationManager/modals/CitationEditModal.vue b/src/managers/CitationManager/modals/CitationEditModal.vue
new file mode 100644
index 000000000..ab0ff0b90
--- /dev/null
+++ b/src/managers/CitationManager/modals/CitationEditModal.vue
@@ -0,0 +1,48 @@
+<template>
+	<SideModalBody>
+		<template #title>
+			<span>{{ title }}</span>
+		</template>
+		<div class="citation-edit-modal-container">
+			<div class="ml-8 mr-8 h-full bg-secondary">
+				<PkpForm
+					v-bind="form"
+					@set="(...args) => emit('set', ...args)"
+					@success="
+						(...args) => {
+							closeModal();
+							emit('success', ...args);
+						}
+					"
+				></PkpForm>
+			</div>
+		</div>
+	</SideModalBody>
+</template>
+
+<script setup>
+import {inject, defineEmits} from 'vue';
+import SideModalBody from '@/components/Modal/SideModalBody.vue';
+import PkpForm from '@/components/Form/Form.vue';
+
+const props = defineProps({
+	title: {type: String, required: true},
+	form: {type: Object, required: true},
+	citation: {type: Number, required: true},
+});
+
+const emit = defineEmits(['set', 'success']);
+
+const closeModal = inject('closeModal');
+</script>
+
+<style>
+.citation-edit-modal-container #citation_raw-rawCitation-control,
+.citation-edit-modal-container #citation_structured-rawCitation-control {
+	height: 5rem;
+}
+.citation-edit-modal-container fieldset {
+	padding-top: 0;
+	margin-top: 1.5rem;
+}
+</style>
diff --git a/src/managers/CitationManager/useCitationManagerActions.js b/src/managers/CitationManager/useCitationManagerActions.js
new file mode 100644
index 000000000..fef12d7bf
--- /dev/null
+++ b/src/managers/CitationManager/useCitationManagerActions.js
@@ -0,0 +1,117 @@
+import {useForm} from '@/composables/useForm';
+import CitationEditModal from '@/managers/CitationManager/modals/CitationEditModal.vue';
+import {useModal} from '@/composables/useModal';
+import {useLocalize} from '@/composables/useLocalize';
+import {useUrl} from '@/composables/useUrl';
+import {useFetch} from '@/composables/useFetch';
+
+export const Actions = {
+	CITATION_EDIT_CITATION: 'citationEditCitation',
+	CITATION_DELETE_CITATION: 'citationDeleteCitation',
+	CITATION_REPROCESS_CITATION: 'citationReprocessCitation',
+};
+
+export function useCitationManagerActions() {
+	const {openDialog, openSideModal} = useModal();
+	const {t} = useLocalize();
+
+	function citationEditCitation(
+		{publication, componentForms, citation},
+		finishedCallback,
+	) {
+		if (!citation.authors) {
+			citation.authors = [];
+		}
+		let formName = 'citationRawEditForm';
+		if (publication.citationsMetadataLookup) {
+			formName = 'citationStructuredEditForm';
+		}
+
+		const {apiUrl} = useUrl(`citations`);
+
+		const {form, set, setValues, setAction} = useForm(componentForms[formName]);
+		setValues(citation);
+		setAction(`${apiUrl.value}/${citation.id}`);
+		openSideModal(CitationEditModal, {
+			title: t('submission.citations.structured.editModal.title'),
+			form: form,
+			onSet: set,
+			citation: citation,
+			onSuccess: () => {
+				finishedCallback();
+			},
+		});
+	}
+
+	function citationDeleteCitation(
+		{publication, componentForms, citation},
+		finishedCallback,
+	) {
+		openDialog({
+			title: t('common.delete'),
+			message: t('common.confirmDelete'),
+			modalStyle: 'negative',
+			actions: [
+				{
+					label: t('common.ok'),
+					isWarnable: true,
+					callback: async (close) => {
+						const {apiUrl} = useUrl(`citations`);
+						const {fetch} = useFetch(`${apiUrl.value}/${citation.id}`, {
+							method: 'DELETE',
+						});
+						await fetch();
+						finishedCallback();
+						close();
+					},
+				},
+				{
+					label: t('common.cancel'),
+					isSecondary: true,
+					callback: (close) => {
+						close();
+					},
+				},
+			],
+		});
+	}
+
+	function citationReprocessCitation({citation}, finishedCallback) {
+		openDialog({
+			title: t('submission.citations.structured.reprocessDialog.title'),
+			message: '',
+			actions: [
+				{
+					label: t('common.ok'),
+					isPrimary: true,
+					callback: async (close) => {
+						const {apiUrl} = useUrl(`citations`);
+						const {fetch} = useFetch(
+							`${apiUrl.value}/${citation.id}/reprocessCitation`,
+							{
+								method: 'POST',
+								body: {},
+							},
+						);
+						await fetch();
+						finishedCallback();
+						close();
+					},
+				},
+				{
+					label: t('common.cancel'),
+					isSecondary: true,
+					callback: (close) => {
+						close();
+					},
+				},
+			],
+		});
+	}
+
+	return {
+		citationEditCitation,
+		citationDeleteCitation,
+		citationReprocessCitation,
+	};
+}
diff --git a/src/managers/CitationManager/useCitationManagerConfig.js b/src/managers/CitationManager/useCitationManagerConfig.js
new file mode 100644
index 000000000..d0eab21b4
--- /dev/null
+++ b/src/managers/CitationManager/useCitationManagerConfig.js
@@ -0,0 +1,80 @@
+import {useLocalize} from '@/composables/useLocalize';
+import {Actions} from './useCitationManagerActions';
+
+export function useCitationManagerConfig() {
+	const {t} = useLocalize();
+
+	function getColumns() {
+		const columns = [];
+
+		columns.push({
+			header: t('submission.citations.structured'),
+			component: 'CitationManagerCellCitation',
+			props: {},
+		});
+
+		columns.push({
+			header: 'CitationManagerToggleAll',
+			component: 'CitationManagerCellToggle',
+			props: {},
+			isHeaderComponent: true,
+		});
+
+		columns.push({
+			header: '',
+			component: 'CitationManagerCellActions',
+			props: {},
+		});
+
+		return columns;
+	}
+
+	function getTopItems() {
+		const items = [];
+
+		items.push({
+			component: 'CitationManagerSearchField',
+			props: {
+				label: t('submission.citations.structured.expandAll'),
+				action: '',
+			},
+		});
+
+		return items;
+	}
+
+	function getItemActions({citation, store}) {
+		const actions = [];
+
+		actions.push({
+			label: t('common.edit'),
+			name: Actions.CITATION_EDIT_CITATION,
+			icon: 'Edit',
+		});
+
+		actions.push({
+			label: t('common.delete'),
+			name: Actions.CITATION_DELETE_CITATION,
+			icon: 'Cancel',
+			isWarnable: true,
+		});
+
+		if (store.citationsMetadataLookup.value) {
+			if (!citation.isStructured) {
+				actions.push({
+					label: t('admin.citation.reprocess'),
+					name: Actions.CITATION_REPROCESS_CITATION,
+					icon: 'Add',
+				});
+			}
+		}
+
+		return actions;
+	}
+
+	return {
+		getColumns,
+		getTopItems,
+		getItemActions,
+	};
+}
diff --git a/src/managers/CitationManager/useCitationManagerFormAddRawCitation.js b/src/managers/CitationManager/useCitationManagerFormAddRawCitation.js
new file mode 100644
index 000000000..8558ae500
--- /dev/null
+++ b/src/managers/CitationManager/useCitationManagerFormAddRawCitation.js
@@ -0,0 +1,40 @@
+import {useForm} from '@/composables/useForm';
+import {useUrl} from '@/composables/useUrl';
+import {useLocalize} from '@/composables/useLocalize';
+
+export function useCitationManagerFormAddRawCitation({
+	apiPathSubmissions,
+	onSuccess,
+}) {
+	const {t} = useLocalize();
+	const {apiUrl: actionUrl} = useUrl(
+		`${apiPathSubmissions}/importAdditionalCitations`,
+	);
+
+	const {form, initEmptyForm, setValue, addPage, addGroup, addFieldTextArea} =
+		useForm({});
+
+	initEmptyForm('addCitations', {
+		action: actionUrl.value,
+		spacingVariant: 'fullWidth',
+		onSuccess: () => {
+			setValue('rawCitations', '');
+			onSuccess();
+		},
+	});
+
+	addPage('default', {
+		submitButton: {label: t('common.add')},
+	});
+
+	addGroup('default');
+
+	addFieldTextArea('rawCitations', {
+		label: t('submission.citations'),
+		description: t('submission.citations.structured.description'),
+		size: 'small-height',
+		isRequired: true,
+	});
+
+	return {form};
+}
diff --git a/src/managers/CitationManager/useCitationManagerFormEnableLookup.js b/src/managers/CitationManager/useCitationManagerFormEnableLookup.js
new file mode 100644
index 000000000..569af47a4
--- /dev/null
+++ b/src/managers/CitationManager/useCitationManagerFormEnableLookup.js
@@ -0,0 +1,95 @@
+import {useForm} from '@/composables/useForm';
+import {useLocalize} from '@/composables/useLocalize';
+import {watch} from 'vue';
+import {useModal} from '@/composables/useModal';
+
+export function useCitationManagerFormEnableLookup({
+	citationsMetadataLookup,
+	onCitationMetadataLookupChange,
+} = {}) {
+	const {t} = useLocalize();
+
+	const {
+		form,
+		setValue,
+		initEmptyForm,
+		addFieldOptions,
+		addPage,
+		addGroup,
+		getField,
+	} = useForm({});
+
+	initEmptyForm('enableLookup', {
+		action: 'emit',
+		spacingVariant: 'fullWidth',
+	});
+
+	addPage('default', {
+		submitButton: null,
+	});
+
+	addGroup('default');
+
+	addFieldOptions('metadataLookup', 'checkbox', {
+		label: t('submission.citations.structured'),
+		description: t(
+			'submission.citations.structured.citationsMetadataLookup.description',
+		),
+		value: citationsMetadataLookup.value,
+		options: [
+			{
+				label: t(
+					'submission.citations.structured.enableCitationsMetadataLookup',
+				),
+				value: true,
+			},
+		],
+	});
+
+	watch(citationsMetadataLookup, (newValue) => {
+		setValue('metadataLookup', newValue);
+	});
+
+	watch(
+		() => getField('metadataLookup')?.value,
+		(newValue) => {
+			// skip when the value is being rollback in cancel
+			if (newValue === citationsMetadataLookup.value) {
+				return;
+			}
+
+			const {openDialog} = useModal();
+			openDialog({
+				title: citationsMetadataLookup.value
+					? t('submission.citations.structured.disableModal.title')
+					: t('submission.citations.structured.enableModal.title'),
+				message: citationsMetadataLookup.value
+					? t('submission.citations.structured.disableModal.confirm')
+					: t('submission.citations.structured.enableModal.confirm'),
+				actions: [
+					{
+						label: t('common.ok'),
+						isPrimary: true,
+						callback: async (close) => {
+							await onCitationMetadataLookupChange(
+								!citationsMetadataLookup.value,
+							);
+							close();
+						},
+					},
+					{
+						label: t('common.cancel'),
+						isWarnable: true,
+						callback: (close) => {
+							setValue('metadataLookup', citationsMetadataLookup.value);
+							close();
+						},
+					},
+				],
+				close: () => {},
+			});
+		},
+	);
+
+	return {form};
+}
diff --git a/src/pages/dashboard/DashboardPage.vue b/src/pages/dashboard/DashboardPage.vue
index c2edd18a5..11aec913a 100644
--- a/src/pages/dashboard/DashboardPage.vue
+++ b/src/pages/dashboard/DashboardPage.vue
@@ -98,6 +98,11 @@ const props = defineProps({
 		type: Number,
 		required: true,
 	},
+	/** Context setting, whether the citations metadata lookup is enabled per default for a publication */
+	contextCitationsMetadataLookup: {
+		type: Boolean,
+		required: true,
+	},
 	/** Filters form config  */
 	filtersForm: {
 		type: Object,
diff --git a/src/pages/workflow/WorkflowPageOJS.vue b/src/pages/workflow/WorkflowPageOJS.vue
index 25df92228..1c7120fbc 100644
--- a/src/pages/workflow/WorkflowPageOJS.vue
+++ b/src/pages/workflow/WorkflowPageOJS.vue
@@ -12,6 +12,7 @@ import FileManager from '@/managers/FileManager/FileManager.vue';
 import ReviewerManager from '@/managers/ReviewerManager/ReviewerManager.vue';
 import DiscussionManagerLegacy from '@/managers/DiscussionManagerLegacy/DiscussionManagerLegacy.vue';
 import ContributorManager from '@/managers/ContributorManager/ContributorManager.vue';
+import CitationManager from '@/managers/CitationManager/CitationManager.vue';
 import ParticipantManager from '@/managers/ParticipantManager/ParticipantManager.vue';
 import ReviewerSuggestionManager from '@/managers/ReviewerSuggestionManager/ReviewerSuggestionManager.vue';
 import DiscussionManager from '@/managers/DiscussionManager/DiscussionManager.vue';
@@ -49,6 +50,7 @@ const Components = markRaw({
 	ReviewerManager,
 	DiscussionManagerLegacy,
 	ContributorManager,
+	CitationManager,
 	ParticipantManager,
 	ReviewerSuggestionManager,
 	DiscussionManager,
diff --git a/src/pages/workflow/WorkflowPageOMP.vue b/src/pages/workflow/WorkflowPageOMP.vue
index e81cddd8f..cacb60653 100644
--- a/src/pages/workflow/WorkflowPageOMP.vue
+++ b/src/pages/workflow/WorkflowPageOMP.vue
@@ -13,6 +13,7 @@ import {useWorkflowNavigationConfigOMP as useWorkflowNavigationConfig} from './c
 import FileManager from '@/managers/FileManager/FileManager.vue';
 import ReviewerManager from '@/managers/ReviewerManager/ReviewerManager.vue';
 import DiscussionManagerLegacy from '@/managers/DiscussionManagerLegacy/DiscussionManagerLegacy.vue';
+import CitationManager from '@/managers/CitationManager/CitationManager.vue';
 import ContributorManager from '@/managers/ContributorManager/ContributorManager.vue';
 import ParticipantManager from '@/managers/ParticipantManager/ParticipantManager.vue';
 import ReviewerSuggestionManager from '@/managers/ReviewerSuggestionManager/ReviewerSuggestionManager.vue';
@@ -49,6 +50,7 @@ const Components = markRaw({
 	FileManager,
 	ReviewerManager,
 	DiscussionManagerLegacy,
+	CitationManager,
 	ContributorManager,
 	ParticipantManager,
 	ReviewerSuggestionManager,
diff --git a/src/pages/workflow/WorkflowPageOPS.vue b/src/pages/workflow/WorkflowPageOPS.vue
index 729af182d..dcd9d49f4 100644
--- a/src/pages/workflow/WorkflowPageOPS.vue
+++ b/src/pages/workflow/WorkflowPageOPS.vue
@@ -14,6 +14,7 @@ import {useWorkflowNavigationConfigOPS as useWorkflowNavigationConfig} from './c
 import FileManager from '@/managers/FileManager/FileManager.vue';
 import ReviewerManager from '@/managers/ReviewerManager/ReviewerManager.vue';
 import DiscussionManagerLegacy from '@/managers/DiscussionManagerLegacy/DiscussionManagerLegacy.vue';
+import CitationManager from '@/managers/CitationManager/CitationManager.vue';
 import ContributorManager from '@/managers/ContributorManager/ContributorManager.vue';
 import ParticipantManager from '@/managers/ParticipantManager/ParticipantManager.vue';
 import GalleyManager from '@/managers/GalleyManager/GalleyManager.vue';
@@ -43,6 +44,7 @@ const Components = markRaw({
 	FileManager,
 	ReviewerManager,
 	DiscussionManagerLegacy,
+	CitationManager,
 	ContributorManager,
 	ParticipantManager,
 	GalleyManager,
diff --git a/src/pages/workflow/composables/useWorkflowConfig/workflowConfigAuthorOJS.js b/src/pages/workflow/composables/useWorkflowConfig/workflowConfigAuthorOJS.js
index f23a7b90e..05d2c6049 100644
--- a/src/pages/workflow/composables/useWorkflowConfig/workflowConfigAuthorOJS.js
+++ b/src/pages/workflow/composables/useWorkflowConfig/workflowConfigAuthorOJS.js
@@ -396,14 +396,18 @@ export const PublicationConfig = {
 			pageInitConfig,
 			permissions,
 		}) => {
+			selectedPublication.citationsMetadataLookup =
+				selectedPublication.citationsMetadataLookup ??
+				pageInitConfig.contextCitationsMetadataLookup ??
+				false;
 			return [
 				{
-					component: 'WorkflowPublicationForm',
+					component: 'CitationManager',
 					props: {
-						formName: 'reference',
-						submission,
+						submission: submission,
 						publication: selectedPublication,
 						canEdit: permissions.canEditPublication,
+						componentForms: pageInitConfig.componentForms,
 					},
 				},
 			];
diff --git a/src/pages/workflow/composables/useWorkflowConfig/workflowConfigEditorialOJS.js b/src/pages/workflow/composables/useWorkflowConfig/workflowConfigEditorialOJS.js
index ecbe24d0a..a8f7d118d 100644
--- a/src/pages/workflow/composables/useWorkflowConfig/workflowConfigEditorialOJS.js
+++ b/src/pages/workflow/composables/useWorkflowConfig/workflowConfigEditorialOJS.js
@@ -942,14 +942,18 @@ export const PublicationConfig = {
 			pageInitConfig,
 			permissions,
 		}) => {
+			selectedPublication.citationsMetadataLookup =
+				selectedPublication.citationsMetadataLookup ??
+				pageInitConfig.contextCitationsMetadataLookup ??
+				false;
 			return [
 				{
-					component: 'WorkflowPublicationForm',
+					component: 'CitationManager',
 					props: {
-						formName: 'reference',
-						submission,
+						submission: submission,
 						publication: selectedPublication,
 						canEdit: permissions.canEditPublication,
+						componentForms: pageInitConfig.componentForms,
 					},
 				},
 			];