diff --git a/src/frontend/components/PkpAccordion/PkpAccordion.vue b/src/frontend/components/PkpAccordion/PkpAccordion.vue
index 7d15fcbad..db50b5fd5 100644
--- a/src/frontend/components/PkpAccordion/PkpAccordion.vue
+++ b/src/frontend/components/PkpAccordion/PkpAccordion.vue
@@ -63,7 +63,7 @@ const accordionClass = computed(() => ['pkpAccordion']);
 	width: 100%;
 	padding: var(--pkp-spacing-2) var(--pkp-spacing-3);
 	background-color: var(--pkp-background-color-tertiary);
-	color: var(--pkp-text-color-secondary);
+	color: var(--pkp-text-color-heading);
 	font: var(--pkp-font-base-bold);
 	border: none;
 	cursor: pointer;
diff --git a/src/frontend/components/PkpButton/PkpButton.vue b/src/frontend/components/PkpButton/PkpButton.vue
index f0d58f61c..eafd119ba 100644
--- a/src/frontend/components/PkpButton/PkpButton.vue
+++ b/src/frontend/components/PkpButton/PkpButton.vue
@@ -13,12 +13,15 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
+	/** Use when this button represents an action such as delete, go back, revert or cancel. */
+	isWarnable: Boolean,
 });
 
 const buttonClass = computed(() => {
 	return [
 		'pkpButton',
 		props.isSecondary ? 'pkpButton--secondary' : 'pkpButton--primary',
+		props.isWarnable ? 'pkpButton--warnable' : '',
 	];
 });
 </script>
@@ -73,4 +76,17 @@ const buttonClass = computed(() => {
 	border-color: var(--pkp-text-color-disabled);
 	color: var(--pkp-text-color-disabled);
 }
+
+.pkpButton--warnable {
+	color: var(--pkp-color-negative);
+	border-color: var(--pkp-border-color-light);
+	background-color: var(--pkp-background-color-secondary);
+}
+
+.pkpButton--warnable:disabled {
+	color: var(--pkp-text-color-disabled);
+}
+.pkpButton--warnable:hover {
+	background-color: var(--pkp-background-color-secondary);
+}
 </style>
diff --git a/src/frontend/components/PkpIcon/PkpIcon.vue b/src/frontend/components/PkpIcon/PkpIcon.vue
index de46669b5..7b15a3bfa 100644
--- a/src/frontend/components/PkpIcon/PkpIcon.vue
+++ b/src/frontend/components/PkpIcon/PkpIcon.vue
@@ -2,10 +2,19 @@
 import {computed} from 'vue';
 import Cancel from './icons/Cancel.vue';
 import MoreOptions from './icons/MoreOptions.vue';
-
+import Error from './icons/Error.vue';
+import Help from './icons/Help.vue';
+import User from './icons/User.vue';
+import Orcid from '@/frontend/components/PkpIcon/icons/Orcid.vue';
+import OrcidUnauthenticated from '@/frontend/components/PkpIcon/icons/OrcidUnauthenticated.vue';
 const svgIcons = {
 	Cancel,
 	MoreOptions,
+	Error,
+	Help,
+	User,
+	Orcid,
+	OrcidUnauthenticated,
 };
 
 const props = defineProps({
diff --git a/src/frontend/components/PkpIcon/icons/Error.vue b/src/frontend/components/PkpIcon/icons/Error.vue
new file mode 100644
index 000000000..9c74baf94
--- /dev/null
+++ b/src/frontend/components/PkpIcon/icons/Error.vue
@@ -0,0 +1,8 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M12.8849 3.4905C12.5389 2.8365 11.4629 2.8365 11.1169 3.4905L2.11694 20.4905C2.03592 20.6429 1.99575 20.8136 2.00036 20.9861C2.00496 21.1586 2.05417 21.327 2.14319 21.4749C2.23221 21.6227 2.35801 21.7449 2.50833 21.8297C2.65865 21.9145 2.82837 21.9588 3.00094 21.9585H21.0009C21.1734 21.9589 21.343 21.9145 21.4932 21.8298C21.6434 21.7451 21.7691 21.6229 21.8581 21.4752C21.947 21.3274 21.9961 21.1591 22.0007 20.9867C22.0052 20.8144 21.965 20.6437 21.8839 20.4915L12.8849 3.4905ZM13.0009 18.9585H11.0009V16.9585H13.0009V18.9585ZM11.0009 14.9585V9.9585H13.0009L13.0019 14.9585H11.0009Z"
+			fill="currentColor"
+		/>
+	</svg>
+</template>
diff --git a/src/frontend/components/PkpIcon/icons/Help.vue b/src/frontend/components/PkpIcon/icons/Help.vue
new file mode 100644
index 000000000..707dad45e
--- /dev/null
+++ b/src/frontend/components/PkpIcon/icons/Help.vue
@@ -0,0 +1,27 @@
+<template>
+	<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<g clip-path="url(#clip0_3415_5808)">
+			<rect
+				x="1.5"
+				y="1.5"
+				width="15"
+				height="15"
+				rx="7.5"
+				stroke="currentColor"
+			/>
+			<path
+				d="M10.1556 6.49536C10.8447 6.49536 11.4033 5.93675 11.4033 5.24768C11.4033 4.5586 10.8447 4 10.1556 4C9.46656 4 8.90796 4.5586 8.90796 5.24768C8.90796 5.93675 9.46656 6.49536 10.1556 6.49536Z"
+				fill="currentColor"
+			/>
+			<path
+				d="M11.4315 11.5578C11.397 11.5346 11.3583 11.5185 11.3175 11.5105C11.2767 11.5025 11.2348 11.5027 11.1941 11.5111C11.1534 11.5196 11.1148 11.536 11.0806 11.5596C11.0464 11.5831 11.0172 11.6133 10.9948 11.6482C10.6932 12.0948 10.3239 12.4915 9.89995 12.8242C9.79702 12.9021 9.41335 13.1985 9.25116 13.1361C9.13887 13.1018 9.20437 12.8803 9.2262 12.7867L9.39152 12.297C9.46014 12.0974 10.6548 8.55399 10.7858 8.14849C10.9792 7.55585 10.895 6.97256 10.0122 7.11292C9.77206 7.13787 7.33597 7.45291 7.2923 7.45603C7.25134 7.45869 7.2113 7.4694 7.17448 7.48753C7.13765 7.50567 7.10476 7.53088 7.07768 7.56173C7.0506 7.59257 7.02986 7.62845 7.01664 7.66732C7.00343 7.70618 6.998 7.74726 7.00066 7.78823C7.00332 7.82919 7.01403 7.86922 7.03216 7.90605C7.0503 7.94287 7.07551 7.97577 7.10635 8.00285C7.1372 8.02993 7.17308 8.05067 7.21194 8.06389C7.25081 8.0771 7.29189 8.08253 7.33285 8.07987C7.33285 8.07987 8.26861 7.95822 8.37154 7.94886C8.42427 7.94372 8.47736 7.95394 8.5244 7.97829C8.57145 8.00264 8.61044 8.04009 8.63668 8.08611C8.69319 8.26082 8.68545 8.44998 8.61484 8.61949C8.53374 8.93141 7.25175 12.5434 7.2112 12.7524C7.16771 12.9273 7.17979 13.1114 7.24575 13.2791C7.31171 13.4468 7.42829 13.5898 7.57927 13.6882C7.86265 13.8771 8.20007 13.968 8.53998 13.9471C8.87048 13.943 9.19734 13.8775 9.50381 13.7537C10.2805 13.4418 11.0915 12.6121 11.5188 11.9601C11.5556 11.8939 11.567 11.8165 11.551 11.7425C11.5349 11.6685 11.4924 11.6028 11.4315 11.5578Z"
+				fill="currentColor"
+			/>
+		</g>
+		<defs>
+			<clipPath id="clip0_3415_5808">
+				<rect width="18" height="18" fill="white" />
+			</clipPath>
+		</defs>
+	</svg>
+</template>
diff --git a/src/frontend/components/PkpIcon/icons/Orcid.vue b/src/frontend/components/PkpIcon/icons/Orcid.vue
new file mode 100644
index 000000000..01fe1647c
--- /dev/null
+++ b/src/frontend/components/PkpIcon/icons/Orcid.vue
@@ -0,0 +1,19 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<g clip-path="url(#clip0_11_315)">
+			<path
+				d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z"
+				fill="#A6CE39"
+			/>
+			<path
+				d="M8.10938 17.4375H6.65625V7.40625H8.10938V17.4375ZM10.2188 7.40625H14.1094C17.8125 7.40625 19.4531 10.0781 19.4531 12.4219C19.4531 15 17.4375 17.4375 14.1094 17.4375H10.1719L10.2188 7.40625ZM11.6719 16.1719H13.9688C17.25 16.1719 18 13.6875 18 12.4688C18 10.4531 16.7344 8.76562 13.9219 8.76562H11.7188L11.6719 16.1719ZM8.34375 5.34375C8.34375 5.85938 7.92188 6.28125 7.40625 6.28125C6.89062 6.28125 6.46875 5.85938 6.46875 5.34375C6.46875 5.09511 6.56752 4.85665 6.74334 4.68084C6.91915 4.50502 7.15761 4.40625 7.40625 4.40625C7.92188 4.40625 8.34375 4.82812 8.34375 5.34375Z"
+				fill="white"
+			/>
+		</g>
+		<defs>
+			<clipPath id="clip0_11_315">
+				<rect width="24" height="24" fill="white" />
+			</clipPath>
+		</defs>
+	</svg>
+</template>
diff --git a/src/frontend/components/PkpIcon/icons/OrcidUnauthenticated.vue b/src/frontend/components/PkpIcon/icons/OrcidUnauthenticated.vue
new file mode 100644
index 000000000..8bfb03fd6
--- /dev/null
+++ b/src/frontend/components/PkpIcon/icons/OrcidUnauthenticated.vue
@@ -0,0 +1,27 @@
+<template>
+	<svg
+		viewBox="0 0 32 32"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		class="mr-2 inline-block w-6 align-middle"
+	>
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M29.474 16c0 7.442-6.032 13.474-13.474 13.474S2.526 23.442 2.526 16 8.558 2.526 16 2.526 29.474 8.558 29.474 16Z"
+			fill="#fff"
+		/>
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M32 16c0 8.837-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0s16 7.163 16 16ZM16 29.474c7.442 0 13.474-6.032 13.474-13.474S23.442 2.526 16 2.526 2.526 8.558 2.526 16 8.558 29.474 16 29.474Z"
+			fill="#7FAA26"
+		/>
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M18.22 10.973h-4.547v11.6h4.569c3.8 0 6.133-2.82 6.133-5.8 0-1.365-.469-2.815-1.478-3.925-1.013-1.115-2.557-1.875-4.676-1.875Zm-.177 9.732h-2.347v-7.864h2.264c1.521 0 2.603.46 3.304 1.167.703.709 1.046 1.688 1.046 2.765 0 .654-.2 1.641-.83 2.46-.621.808-1.677 1.473-3.437 1.473Zm-.083-8.073c3.13 0 4.558 1.898 4.558 4.141 0-2.243-1.429-4.141-4.558-4.141h-2.472 2.472Zm6.205 4.017.001.124c0 2.869-2.242 5.591-5.924 5.591h-4.36V11.182v11.182h4.36c3.682 0 5.924-2.722 5.924-5.591l-.001-.124ZM9.5 11.005v11.588h2.024V11.005H9.5Zm1.815.208v11.172-11.172H9.71h1.606ZM10.512 10.15c.7 0 1.262-.575 1.262-1.263 0-.687-.561-1.262-1.262-1.262-.7 0-1.262.563-1.262 1.262 0 .688.561 1.262 1.262 1.262Zm.614-.408a1.044 1.044 0 0 0 0 0Z"
+			fill="#7FAA26"
+		/>
+	</svg>
+</template>
diff --git a/src/frontend/components/PkpIcon/icons/User.vue b/src/frontend/components/PkpIcon/icons/User.vue
new file mode 100644
index 000000000..41180c75d
--- /dev/null
+++ b/src/frontend/components/PkpIcon/icons/User.vue
@@ -0,0 +1,10 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M5 21C5 17.134 8.13401 14 12 14C15.866 14 19 17.134 19 21M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+	</svg>
+</template>
diff --git a/src/frontend/components/PkpModal/PkpDialog.vue b/src/frontend/components/PkpModal/PkpDialog.vue
index 19bf0dab6..4bac55330 100644
--- a/src/frontend/components/PkpModal/PkpDialog.vue
+++ b/src/frontend/components/PkpModal/PkpDialog.vue
@@ -67,6 +67,9 @@ import {
 	DialogTitle,
 } from 'reka-ui';
 import PkpIcon from '@/frontend/components/PkpIcon/PkpIcon.vue';
+import {usePkpLocalize} from '@/frontend/composables/usePkpLocalize';
+
+const {t} = usePkpLocalize();
 
 const props = defineProps({
 	/** Used only internally, don't pass this prop via openDialog */
diff --git a/src/frontend/components/PkpModal/PkpModalBody.vue b/src/frontend/components/PkpModal/PkpModalBody.vue
index 71fe0edb4..abcc87235 100644
--- a/src/frontend/components/PkpModal/PkpModalBody.vue
+++ b/src/frontend/components/PkpModal/PkpModalBody.vue
@@ -41,7 +41,7 @@
 						<div class="pkpModalBody__closeWrapper">
 							<DialogClose
 								ref="closeModalButton"
-								type="button"
+								as="button"
 								class="pkpModalBody__close"
 							>
 								<span class="pkpModalBody__srOnly">
@@ -78,8 +78,8 @@ import PkpIcon from '@/frontend/components/PkpIcon/PkpIcon.vue';
 import {focusFirstHeading} from '@/components/Modal/modalHelpers';
 
 const containerId = useId();
-import {useLocalize} from '@/composables/useLocalize';
-const {t} = useLocalize();
+import {usePkpLocalize} from '@/frontend/composables/usePkpLocalize';
+const {t} = usePkpLocalize();
 const closeModal = inject('closeModal');
 const closeModalButton = inject('closeModalButton');
 /* Initial focus */
@@ -230,6 +230,7 @@ function handleAutoFocus(event) {
 	position: relative;
 	outline: none;
 	background-color: var(--pkp-background-color-secondary);
+	cursor: pointer;
 }
 
 .pkpModalBody__close:hover {
diff --git a/src/frontend/components/PkpTextarea/PkpTextarea.vue b/src/frontend/components/PkpTextarea/PkpTextarea.vue
index 11a1889e5..8667f0e9e 100644
--- a/src/frontend/components/PkpTextarea/PkpTextarea.vue
+++ b/src/frontend/components/PkpTextarea/PkpTextarea.vue
@@ -1,6 +1,10 @@
 <template>
 	<div class="pkpTextarea">
-		<Label class="pkpTextarea__label" :for="textareaId">
+		<Label
+			class="pkpTextarea__label"
+			:class="{'-screenReader': isLabelSrOnly}"
+			:for="textareaId"
+		>
 			{{ props.label }}
 		</Label>
 		<textarea
@@ -35,6 +39,11 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
+	// Whether the label should be visually hidden but still accessible to screen readers
+	isLabelSrOnly: {
+		type: Boolean,
+		default: false,
+	},
 });
 
 defineEmits(['update:modelValue']);
diff --git a/src/frontend/components/PkpUserComment/PkpScrollToComments.vue b/src/frontend/components/PkpUserComment/PkpScrollToComments.vue
new file mode 100644
index 000000000..24aacc084
--- /dev/null
+++ b/src/frontend/components/PkpUserComment/PkpScrollToComments.vue
@@ -0,0 +1,70 @@
+<template>
+	<div>
+		<a
+			id="scrollToComments"
+			style="cursor: pointer"
+			@click.prevent="scrollToComments"
+		>
+			{{ t('userComment.allComments', {commentCount: allCommentsCount}) }}
+		</a>
+		<div style="margin-top: 1.5rem">
+			<a
+				v-if="!currentUser"
+				class="pkpScrollToComments__login"
+				:href="loginUrl"
+			>
+				{{ t('userComment.login') }}
+			</a>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import {usePkpLocalize} from '@/frontend/composables/usePkpLocalize';
+
+const {t} = usePkpLocalize();
+const currentUser = pkp.currentUser;
+
+defineProps({
+	/** The total number of approved comments across all publication versions */
+	allCommentsCount: {
+		type: Number,
+		required: true,
+	},
+	/** The URL to the login page */
+	loginUrl: {
+		type: String,
+		required: true,
+	},
+});
+
+const scrollToComments = () => {
+	// Element with ID 'pkpUserCommentsContainer' is defined in the pkpUserComment component.
+	const commentsContainer = document.getElementById('pkpUserCommentsContainer');
+	if (commentsContainer) {
+		commentsContainer.scrollIntoView({behavior: 'smooth'});
+	}
+};
+</script>
+
+<style>
+.pkpScrollToComments__login {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	padding: var(--pkp-spacing-2) var(--pkp-spacing-4);
+	font: var(--pkp-font-base-bold);
+	border-radius: var(--pkp-radius);
+	cursor: pointer;
+	border: 1px solid var(--pkp-color-transparent);
+	gap: var(--pkp-spacing-2);
+	background-color: var(--pkp-color-primary);
+	color: var(--pkp-text-color-on-dark);
+	text-decoration: none;
+}
+
+.pkpScrollToComments__login:hover {
+	background-color: var(--pkp-color-hover);
+	color: var(--pkp-text-color-on-dark);
+}
+</style>
diff --git a/src/frontend/components/PkpUserComment/PkpUserComment.vue b/src/frontend/components/PkpUserComment/PkpUserComment.vue
new file mode 100644
index 000000000..77558fbe7
--- /dev/null
+++ b/src/frontend/components/PkpUserComment/PkpUserComment.vue
@@ -0,0 +1,95 @@
+<template>
+	<div id="pkpUserCommentsContainer">
+		<h3>{{ t('userComment.commentOnThisPublication') }}</h3>
+
+		<template v-for="id in publicationIds" :key="id">
+			<PkpAccordion
+				:title="getVersionTitle(id)"
+				:default-open="id === latestPublicationId"
+			>
+				<PkpButton
+					v-if="!currentUser && id === latestPublicationId"
+					class="pkpUserComments__loginButton"
+					@click="login"
+				>
+					{{ t('userComment.login') }}
+				</PkpButton>
+
+				<PkpUserCommentsList
+					:publication-id="id"
+					:items-per-page="itemsPerPage"
+					:is-latest-publication="id === latestPublicationId"
+					:total-publication-comments="commentsCountPerPublication[id]"
+				/>
+			</PkpAccordion>
+		</template>
+	</div>
+</template>
+
+<script setup>
+import PkpUserCommentsList from '@/frontend/components/PkpUserComment/PkpUserCommentsList.vue';
+import PkpAccordion from '@/frontend/components/PkpAccordion/PkpAccordion.vue';
+import PkpButton from '@/frontend/components/PkpButton/PkpButton.vue';
+import {usePkpLocalize} from '@/frontend/composables/usePkpLocalize';
+
+const {t} = usePkpLocalize();
+const props = defineProps({
+	/** The ID of the latest publication associated with the published item(article, book, etc.)*/
+	latestPublicationId: {
+		type: Number,
+		required: true,
+	},
+	/** An array of published publication IDs associated with the published item(article, book, etc.) */
+	publicationIds: {
+		type: Array,
+		required: false,
+		default: () => [],
+	},
+	/** Number of comments get when fetching comments */
+	itemsPerPage: {
+		type: Number,
+		required: true,
+	},
+	/**
+	 * URL to redirect the user to login page
+	 */
+	loginUrl: {
+		type: String,
+		required: true,
+	},
+	/**
+	 * An object where keys are publication IDs and values are the number of approved comments for that publication
+	 */
+	commentsCountPerPublication: {
+		type: Object,
+		required: true,
+	},
+});
+const currentUser = pkp.currentUser;
+
+/**
+ * Returns the title for the accordion based on the publication ID and the number of comments.
+ * @param {number} id - The publication ID.
+ * @returns {string} The title for the accordion.
+ */
+function getVersionTitle(id) {
+	return t('userComment.versionWithCount', {
+		version: id,
+		versionCommentsCount: props.commentsCountPerPublication[id] || 0,
+	});
+}
+
+/**
+ * Redirects the user to the login page.
+ */
+function login() {
+	window.location = props.loginUrl;
+}
+</script>
+
+<style>
+.pkpUserComments__loginButton {
+	margin-top: 0.5rem;
+	margin-bottom: 1rem;
+}
+</style>
diff --git a/src/frontend/components/PkpUserComment/PkpUserCommentReportModal.vue b/src/frontend/components/PkpUserComment/PkpUserCommentReportModal.vue
new file mode 100644
index 000000000..789c3815b
--- /dev/null
+++ b/src/frontend/components/PkpUserComment/PkpUserCommentReportModal.vue
@@ -0,0 +1,108 @@
+<template>
+	<PkpModalBody>
+		<template #title>
+			{{ title }}
+		</template>
+		<PkpModalLayoutBasic>
+			<span class="pkpUserCommentReportModal____commentAuthor">
+				{{
+					`
+					${
+						comment.userAffiliation
+							? t('userComment.reportCommentByUserWithAffiliation', {
+									userName: comment.userName,
+									affiliation: comment.userAffiliation,
+								})
+							: t('userComment.reportCommentBy', {
+									userName: comment.userName,
+								})
+					}`
+				}}
+			</span>
+
+			<p
+				v-strip-unsafe-html="comment.commentText.trim()"
+				class="pkpUserCommentReportModal____commentText"
+			></p>
+
+			<strong class="pkpUserCommentReportModal____reportReason">
+				{{ t('userComment.report.reason') }}
+			</strong>
+
+			<PkpTextarea
+				:model-value="reportText"
+				@update:model-value="updateReportText"
+			></PkpTextarea>
+
+			<div class="pkpUserCommentReportModal____actions">
+				<PkpButton :is-warnable="true" @click="onCancel">
+					{{ t('common.cancel') }}
+				</PkpButton>
+				<PkpButton @click="onSubmit(comment, reportText)">
+					{{ t('userComment.report') }}
+				</PkpButton>
+			</div>
+		</PkpModalLayoutBasic>
+	</PkpModalBody>
+</template>
+<script setup>
+import PkpModalBody from '@/frontend/components/PkpModal/PkpModalBody.vue';
+import PkpModalLayoutBasic from '@/frontend/components/PkpModal/PkpModalLayoutBasic.vue';
+import PkpTextarea from '@/frontend/components/PkpTextarea/PkpTextarea.vue';
+import {defineProps, ref} from 'vue';
+import PkpButton from '@/frontend/components/PkpButton/PkpButton.vue';
+import {usePkpLocalize} from '@/frontend/composables/usePkpLocalize';
+const {t} = usePkpLocalize();
+
+const reportText = ref('');
+defineProps({
+	/** The title of the modal */
+	title: {
+		type: String,
+		required: true,
+	},
+	/** The comment to be reported */
+	comment: {
+		type: Object,
+		required: true,
+	},
+	/** Function to be called when the report reason is submitted */
+	onSubmit: {
+		type: Function,
+		required: true,
+	},
+	/** Function to be called when the modal is cancelled */
+	onCancel: {
+		type: Function,
+		required: true,
+	},
+});
+
+function updateReportText(value) {
+	reportText.value = value;
+}
+</script>
+
+<style>
+.pkpUserCommentReportModal____actions {
+	display: flex;
+	justify-content: flex-end;
+	gap: 0.5rem;
+	margin-top: 1rem;
+}
+
+.pkpUserCommentReportModal____commentAuthor {
+	font-size: var(--pkp-text-base-light);
+	color: var(--pkp-text-color-secondary);
+}
+
+.pkpUserCommentReportModal____commentText {
+	font-weight: var(--pkp-text-base-light--font-weight);
+	font-size: var(--pkp-text-lg-normal);
+	color: var(--pkp-text-color-default);
+}
+
+.pkpUserCommentReportModal____reportReason {
+	color: var(--pkp-text-color-heading);
+}
+</style>
diff --git a/src/frontend/components/PkpUserComment/PkpUserCommentsList.vue b/src/frontend/components/PkpUserComment/PkpUserCommentsList.vue
new file mode 100644
index 000000000..f2d686186
--- /dev/null
+++ b/src/frontend/components/PkpUserComment/PkpUserCommentsList.vue
@@ -0,0 +1,466 @@
+<template>
+	<div>
+		<div
+			v-if="!isLatestPublication"
+			class="pkpUserCommentsList__commentNotAllowed"
+		>
+			<PkpIcon class="pkpUserCommentsList__errorIcon" icon="Error" />
+			<span>{{ t('userComment.discussionClosed') }}</span>
+		</div>
+
+		<div v-if="isLatestPublication && !!currentUser">
+			<PkpTextarea
+				:placeholder="t('userComment.addYourComment')"
+				:label="t('userComment.addYourComment')"
+				:is-label-sr-only="true"
+				:model-value="commentText"
+				@update:model-value="updateCommentText"
+			/>
+
+			<PkpButton
+				class="pkpUserCommentsList__submitButton"
+				:is-secondary="true"
+				:disabled="!commentText.trim()"
+				@click="commentAdd"
+			>
+				{{ t('form.submit') }}
+			</PkpButton>
+		</div>
+		<template v-if="comments.length">
+			<ul class="pkpUserCommentsList__items">
+				<li
+					v-for="comment in comments"
+					:key="comment.id"
+					class="pkpUserCommentsList__item"
+				>
+					<div class="pkpUserCommentsList__item--content">
+						<div
+							v-if="
+								currentUser &&
+								comment.userId === currentUser.id &&
+								!comment.isApproved
+							"
+							class="pkpUserCommentsList__item--approvalNotice"
+						>
+							<PkpIcon
+								icon="Help"
+								class="pkpUserCommentsList__item--helpIcon"
+							></PkpIcon>
+							{{ t('userComment.awaitingApprovalNotice') }}
+						</div>
+
+						<div class="pkpUserCommentsList__item--actions">
+							<p class="pkpUserCommentsList__item--timestamp">
+								{{ formatShortDateTime(comment.createdAt) }}
+							</p>
+							<PkpDropdownActions
+								v-if="!!currentUser"
+								:items="getCommentActions(comment)"
+								@select="
+									(actionName) => commentActionMethods[actionName](comment)
+								"
+							></PkpDropdownActions>
+						</div>
+
+						<div
+							v-strip-unsafe-html="comment.commentText.trim()"
+							class="pkpUserCommentsList__item--commentText"
+						></div>
+
+						<div class="pkpUserCommentsList__item--author">
+							<div class="pkpUserCommentsList__item--authorInfo">
+								<span class="pkpUserCommentsList__item--authorName">
+									{{ comment.userName }}
+								</span>
+
+								<a
+									v-if="comment.userOrcidDisplayValue"
+									:href="comment.userOrcidDisplayValue"
+									target="_blank"
+									class="pkpUserCommentsList__item--orcid"
+								>
+									<span class="pkpUserCommentsList__item--orcidContainer">
+										<PkpIcon
+											:icon="
+												comment.isUserOrcidAuthenticated
+													? 'Orcid'
+													: 'OrcidUnauthenticated'
+											"
+											class="pkpUserCommentsList__item--orcidIcon"
+											style="height: 1rem; width: 1rem"
+										/>
+										{{ comment.userOrcidDisplayValue }}
+									</span>
+								</a>
+								<span
+									v-if="comment.userAffiliation"
+									class="pkpUserCommentsList__item--affiliation"
+								>
+									{{ comment.userAffiliation }}
+								</span>
+							</div>
+						</div>
+					</div>
+				</li>
+			</ul>
+
+			<div class="pkpUserCommentsList__showMore">
+				<PkpButton v-if="hasMoreComments" @click="() => loadComments()">
+					{{ t('userComment.showMore', {count: showMoreCommentsCount}) }}
+				</PkpButton>
+			</div>
+		</template>
+	</div>
+</template>
+
+<script setup>
+import {computed, onMounted, ref} from 'vue';
+import PkpButton from '@/frontend/components/PkpButton/PkpButton.vue';
+import PkpIcon from '@/frontend/components/PkpIcon/PkpIcon.vue';
+import PkpTextarea from '@/frontend/components/PkpTextarea/PkpTextarea.vue';
+import PkpDropdownActions from '@/frontend/components/PkpDropdownActions/PkpDropdownActions.vue';
+import PkpUserCommentReportModal from '@/frontend/components/PkpUserComment/PkpUserCommentReportModal.vue';
+import {usePkpModal} from '@/frontend/composables/usePkpModal';
+import {usePkpFetch} from '@/frontend/composables/usePkpFetch';
+import {useUrl} from '@/frontend/composables/usePkpUrl';
+import {usePkpDate} from '@/frontend/composables/usePkpDate';
+import {usePkpLocalize} from '@/frontend/composables/usePkpLocalize';
+import {useFetchPaginated} from '@/composables/useFetchPaginated';
+
+const {t} = usePkpLocalize();
+const {openModal, closeModal} = usePkpModal();
+
+const {formatShortDateTime} = usePkpDate();
+const currentUser = pkp.currentUser;
+
+const props = defineProps({
+	/** The ID of the publication version for which comments are being displayed */
+	publicationId: {
+		type: Number,
+		required: true,
+	},
+	/** Indicates if the publication is the latest version */
+	isLatestPublication: {
+		type: Boolean,
+		default: false,
+		required: true,
+	},
+	/** Number of comments to fetch per page */
+	itemsPerPage: {
+		type: Number,
+		required: true,
+	},
+	/** Total number of approved comments for this publication version*/
+	totalPublicationComments: {
+		type: Number,
+		required: true,
+		default: 0,
+	},
+});
+
+let comments = ref([]);
+const showMoreCommentsCount = ref(0);
+const currentPage = ref(0);
+const pageCount = ref(0);
+const commentText = ref('');
+
+const hasMoreComments = computed(() => pageCount.value > currentPage.value);
+
+/*
+ * Methods for handling comment actions
+ */
+const commentActionMethods = {
+	commentReport,
+	commentDelete,
+};
+
+/**
+ * Deletes a comment.
+ * @param comment - The comment to be deleted.
+ */
+function commentDelete(comment) {
+	if (!currentUser || currentUser.id !== comment.userId) {
+		throw new Error('Only the comment author can delete the comment');
+	}
+
+	const {openDialog, openDialogNetworkError} = usePkpModal();
+
+	openDialog({
+		title: t('userComment.deleteComment'),
+		message: t('userComment.deleteCommentConfirmation', {
+			comment: comment.commentText,
+		}),
+		actions: [
+			{
+				label: t('common.delete'),
+				isWarnable: true,
+				callback: async (close) => {
+					const {apiUrl} = useUrl(`comments/${comment.id}`);
+					const {fetch: deleteComment, isSuccess} = usePkpFetch(apiUrl, {
+						method: 'DELETE',
+					});
+					await deleteComment();
+					if (isSuccess.value) {
+						// Remove the comment from the list
+						comments.value = comments.value.filter((c) => c.id !== comment.id);
+					} else {
+						openDialogNetworkError();
+					}
+
+					close();
+				},
+			},
+			{
+				label: t('common.cancel'),
+				callback: (close) => close(),
+			},
+		],
+	});
+}
+
+/**
+ * Updates the comment text.
+ * @param value
+ */
+function updateCommentText(value) {
+	commentText.value = value;
+}
+
+/**
+ * Returns the actions available for a comment.
+ * @param comment
+ * @returns {Array<{label: string, name: string, disabled?: boolean}>} - An array of available actions */
+function getCommentActions(comment) {
+	const actions = [];
+
+	if (currentUser && currentUser.id !== comment.userId) {
+		actions.push({
+			label: t('userComment.report'),
+			name: 'commentReport',
+		});
+	}
+
+	if (currentUser && currentUser.id === comment.userId) {
+		actions.push({
+			label: t('userComment.deleteComment'),
+			name: 'commentDelete',
+		});
+	}
+
+	return actions;
+}
+
+/**
+ * Reports a comment.
+ * @param comment - The comment to be reported.
+ */
+function commentReport(comment) {
+	openModal(PkpUserCommentReportModal, {
+		title: t('userComment.reportComment'),
+		comment,
+		onSubmit: performCommentReport,
+		onCancel: () => closeModal(PkpUserCommentReportModal),
+	});
+}
+
+/**
+ * Creates a new comment for the publication.
+ */
+async function commentAdd() {
+	if (!props.isLatestPublication || !currentUser || !commentText.value.trim()) {
+		return;
+	}
+
+	const {openDialogNetworkError} = usePkpModal();
+	const {apiUrl} = useUrl('comments');
+
+	const {fetch: submitComment, isSuccess} = usePkpFetch(apiUrl, {
+		method: 'POST',
+		body: {
+			publicationId: props.publicationId,
+			commentText: commentText.value,
+		},
+	});
+
+	await submitComment();
+
+	if (isSuccess.value) {
+		commentText.value = '';
+		await loadComments(true);
+	} else {
+		openDialogNetworkError();
+	}
+}
+
+/**
+ * Performs the comment report action.
+ * @param comment - The comment to be reported.
+ * @param reportText - The text of the report.
+ */
+async function performCommentReport(comment, reportText) {
+	if (!currentUser || !reportText.trim()) {
+		return;
+	}
+
+	const commentId = comment.id;
+	const {apiUrl} = useUrl(`comments/${commentId}/reports`);
+	const {openDialogNetworkError} = usePkpModal();
+
+	const {fetch: postReport, isSuccess} = usePkpFetch(apiUrl, {
+		method: 'POST',
+		body: {
+			note: reportText,
+		},
+	});
+
+	await postReport();
+
+	if (!isSuccess.value) {
+		openDialogNetworkError();
+	} else {
+		comments.value.forEach((comment) => {
+			if (comment.id === commentId) {
+				comment.isReported = true;
+			}
+		});
+	}
+	closeModal(PkpUserCommentReportModal);
+}
+
+/**
+ * Loads more comments for publication.
+ * @param refresh - Whether to refresh the comments list or append to it. When true, this will refresh the list with the first page of comments.
+ */
+async function loadComments(refresh = false) {
+	const {apiUrl} = useUrl(
+		`comments/public?publicationIds=${props.publicationId}`,
+	);
+
+	currentPage.value = refresh ? 1 : currentPage.value + 1;
+	const {items, pagination, fetch} = useFetchPaginated(apiUrl, {
+		currentPage,
+		pageSize: props.itemsPerPage,
+	});
+
+	await fetch();
+
+	comments.value = refresh ? items.value : [...comments.value, ...items.value];
+
+	pageCount.value = pagination.value.pageCount;
+
+	showMoreCommentsCount.value =
+		props.totalPublicationComments -
+		comments.value.filter((c) => c.isApproved).length;
+}
+
+onMounted(() => loadComments());
+</script>
+
+<style>
+.pkpUserCommentsList__item {
+	list-style-type: none;
+	margin-top: 2rem;
+}
+
+.pkpUserCommentsList__item--content {
+	background-color: var(--pkp-background-color-tertiary);
+	border-radius: 15px;
+	padding-bottom: 1rem;
+}
+
+.pkpUserCommentsList__item--commentText {
+	color: var(--pkp-text-color-default);
+	font-size: 0.85rem;
+	padding-left: 2rem;
+	padding-right: 2rem;
+}
+
+.pkpUserCommentsList__item--timestamp {
+	font-size: 0.75rem;
+	color: var(--pkp-text-color-secondary);
+}
+
+.pkpUserCommentsList__item--author {
+	margin-top: 1.75rem;
+	margin-bottom: 2rem;
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+	padding-left: 2rem;
+	padding-right: 2rem;
+}
+
+.pkpUserCommentsList__item--authorName {
+	font-size: var(--pkp-text-base-bold);
+	font-weight: var(--pkp-text-base-bold--font-weight);
+	margin-bottom: 0.25rem;
+}
+
+.pkpUserCommentsList__item--authorInfo {
+	display: flex;
+	flex-direction: column;
+	line-height: 1.25rem;
+}
+
+.pkpUserCommentsList__item--orcid {
+	color: var(--pkp-text-color-secondary);
+}
+
+.pkpUserCommentsList__item--orcid,
+.pkpUserCommentsList__item--affiliation {
+	font-size: var(--pkp-text-sm-light);
+}
+
+.pkpUserCommentsList__item--helpIcon,
+.pkpUserCommentsList__errorIcon {
+	width: 1.25rem;
+	height: 1.25rem;
+}
+
+.pkpUserCommentsList__item--approvalNotice {
+	color: var(--pkp-color-primary);
+	display: flex;
+	gap: 0.5rem;
+	margin-top: 1rem;
+	align-items: center;
+	padding-left: 2rem;
+	padding-right: 2rem;
+	padding-top: 1rem;
+	font-size: var(--pkp-text-sm-light);
+}
+
+.pkpUserCommentsList__commentNotAllowed {
+	background-color: #f9e1e173;
+	padding: 1.5rem;
+	border-radius: 0.65rem;
+	display: flex;
+	gap: 0.5rem;
+	align-items: center;
+}
+
+.pkpUserCommentsList__items {
+	padding: 0;
+	margin: 0;
+}
+
+.pkpUserCommentsList__item--actions {
+	display: flex;
+	justify-content: space-between;
+	padding-left: 2rem;
+	padding-right: 2rem;
+}
+
+.pkpUserCommentsList__showMore {
+	margin-top: 2rem;
+}
+
+.pkpUserCommentsList__submitButton {
+	margin-top: 1.5rem;
+}
+
+.pkpUserCommentsList__item--orcidContainer {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.1rem;
+}
+</style>
diff --git a/src/frontend/composables/load_frontend.js b/src/frontend/composables/load_frontend.js
index 90593df18..f06106fbe 100644
--- a/src/frontend/composables/load_frontend.js
+++ b/src/frontend/composables/load_frontend.js
@@ -19,7 +19,6 @@ import * as useApp from '@/composables/useApp.js';
 import * as useUrl from '@/composables/useUrl.js';
 import * as usePkpFetch from '@/frontend/composables/usePkpFetch.js';
 import * as usePkpModal from '@/frontend/composables/usePkpModal.js';
-
 // Directives
 import {stripUnsafeHtml} from '@/directives/stripUnsafeHtml';
 
diff --git a/src/frontend/composables/usePkpDate.js b/src/frontend/composables/usePkpDate.js
new file mode 100644
index 000000000..c95c359f6
--- /dev/null
+++ b/src/frontend/composables/usePkpDate.js
@@ -0,0 +1,17 @@
+import {formatShortDateTime} from '@/utils/dateUtils';
+
+/**
+ * Provides date formatting and calculation functions
+ * @returns {Object} Object containing date utility functions
+ */
+export function usePkpDate() {
+	return {
+		/**
+		 * Format a date with time in a short format according to user locale
+		 * @type {Function}
+		 * @param {Date|string} date - The date to format
+		 * @returns {string} Formatted date and time string
+		 */
+		formatShortDateTime,
+	};
+}
diff --git a/src/frontend/composables/usePkpLocalize.js b/src/frontend/composables/usePkpLocalize.js
new file mode 100644
index 000000000..03bd63536
--- /dev/null
+++ b/src/frontend/composables/usePkpLocalize.js
@@ -0,0 +1,43 @@
+import {t, localize} from '@/utils/i18n.js';
+
+/**
+ * Returns the translation key unchanged (helper for cases where you need the key itself)
+ * @param {string} translationKey - Translation key
+ * @returns {string} The unchanged translation key
+ */
+function tk(translationKey) {
+	return translationKey;
+}
+
+/**
+ * Provides internationalization functions for translating content
+ */
+export function usePkpLocalize() {
+	return {
+		/**
+		 * Translate a string using the translation keys
+		 * @type {Function}
+		 * @param {string} key - Translation key
+		 * @param {Object} [params] - Optional parameters for variable replacement
+		 * @returns {string} Translated string
+		 */
+		t,
+
+		/**
+		 * Returns a translation key unchanged
+		 * @type {Function}
+		 * @param {string} translationKey - Translation key
+		 * @returns {string} The unchanged translation key
+		 */
+		tk,
+
+		/**
+		 * Get localized content from a multilingual object
+		 * @type {Function}
+		 * @param {Object} multilingualObject - Object with locale keys
+		 * @param {string} [locale] - Specific locale to use
+		 * @returns {string} Localized content
+		 */
+		localize,
+	};
+}
diff --git a/src/frontend/styles/style.css b/src/frontend/styles/style.css
new file mode 100644
index 000000000..50218ab3f
--- /dev/null
+++ b/src/frontend/styles/style.css
@@ -0,0 +1,31 @@
+.-screenReader {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+}
+
+.-screenReader:focus {
+    background-color: #fff;
+    border-radius: 3px;
+    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
+    -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
+    clip: auto !important;
+    color: #000;
+    display: block;
+    font-size: var(--pkp-text-base-size);
+    height: auto;
+    line-height: normal;
+    padding: 1rem;
+    position: absolute;
+    left: 0.5rem;
+    top: 0.5rem;
+    text-decoration: none;
+    width: auto;
+    z-index: 100000;
+}