diff --git a/src/components/Container/Page.vue b/src/components/Container/Page.vue
index 911e7bd29..7344b9b8d 100644
--- a/src/components/Container/Page.vue
+++ b/src/components/Container/Page.vue
@@ -11,6 +11,7 @@ import FailedJobDetailsPage from '@/pages/jobs/FailedJobDetailsPage.vue';
 import CounterReportsPage from '@/pages/counter/CounterReportsPage.vue';
 import UserInvitationPage from '@/pages/userInvitation/UserInvitationPage.vue';
 import AcceptInvitationPage from '@/pages/acceptInvitation/AcceptInvitationPage.vue';
+import UserCommentsPage from '@/pages/userComments/userCommentsPage.vue';
 
 export default {
 	name: 'Page',
@@ -25,6 +26,7 @@ export default {
 		DashboardPage,
 		UserInvitationPage,
 		AcceptInvitationPage,
+		UserCommentsPage,
 	},
 	extends: Container,
 	data() {
diff --git a/src/components/Icon/Icon.vue b/src/components/Icon/Icon.vue
index e6dbf8897..55b043f92 100644
--- a/src/components/Icon/Icon.vue
+++ b/src/components/Icon/Icon.vue
@@ -122,6 +122,7 @@ import UsefulTipsPrimary from './icons/UsefulTipsPrimary.vue';
 import User from './icons/User.vue';
 import View from './icons/View.vue';
 import Workflow from './icons/Workflow.vue';
+import Content from './icons/Content.vue';
 
 const svgIcons = {
 	Add,
@@ -240,6 +241,7 @@ const svgIcons = {
 	View,
 	Workflow,
 	OrcidUnauthenticated,
+	Content,
 };
 
 const props = defineProps({
diff --git a/src/components/Icon/icons/Content.vue b/src/components/Icon/icons/Content.vue
new file mode 100644
index 000000000..7dd7e9ba3
--- /dev/null
+++ b/src/components/Icon/icons/Content.vue
@@ -0,0 +1,16 @@
+<template>
+	<svg
+		width="18"
+		height="18"
+		viewBox="0 0 18 18"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			d="M10.029 2.467H16.9042M10.029 4.5295H16.9042M10.029 6.592H16.9042M10.029 11.4048H16.9042M10.029 13.4672H16.9042M10.029 15.5297H16.9042M7.96874 16.219C7.96874 16.4013 7.89638 16.5761 7.76757 16.705C7.63875 16.834 7.46401 16.9066 7.28174 16.9067H1.78124C1.59897 16.9066 1.42423 16.834 1.29541 16.705C1.16659 16.5761 1.09424 16.4013 1.09424 16.219V10.7192C1.09424 10.537 1.16659 10.3622 1.29541 10.2332C1.42423 10.1042 1.59897 10.0317 1.78124 10.0315H7.28249C7.46476 10.0317 7.6395 10.1042 7.76832 10.2332C7.89713 10.3622 7.96949 10.537 7.96949 10.7192L7.96874 16.219ZM7.96874 7.28125C7.96874 7.46352 7.89638 7.63834 7.76757 7.7673C7.63875 7.89625 7.46401 7.9688 7.28174 7.969H1.78124C1.59897 7.9688 1.42423 7.89625 1.29541 7.7673C1.16659 7.63834 1.09424 7.46352 1.09424 7.28125V1.7815C1.09424 1.59923 1.16659 1.42441 1.29541 1.29545C1.42423 1.1665 1.59897 1.09395 1.78124 1.09375H7.28249C7.46476 1.09395 7.6395 1.1665 7.76832 1.29545C7.89713 1.42441 7.96949 1.59923 7.96949 1.7815L7.96874 7.28125Z"
+			stroke="#006798"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+	</svg>
+</template>
diff --git a/src/components/Table/Table.vue b/src/components/Table/Table.vue
index 97262426d..aa1815a6b 100644
--- a/src/components/Table/Table.vue
+++ b/src/components/Table/Table.vue
@@ -145,8 +145,8 @@ provide('tableContext', tableContext);
 <style lang="less">
 @import '../../styles/_import';
 
-/** 
-Keeping subset of table styling to support urn plugin, which inserts table via FieldHtml 
+/**
+Keeping subset of table styling to support urn plugin, which inserts table via FieldHtml
 Better solution in future would be to implement custom Field, which would use our table component directly.
 */
 
diff --git a/src/components/Tabs/Tabs.vue b/src/components/Tabs/Tabs.vue
index c48dd8f60..f0868c091 100644
--- a/src/components/Tabs/Tabs.vue
+++ b/src/components/Tabs/Tabs.vue
@@ -69,6 +69,16 @@ export default {
 				return false;
 			},
 		},
+		/**
+		 * Passing a string value will enable `controlled mode`.
+		 * In this mode, the `activeTab` is used by the parent component to control which tab is active.
+		 *
+		 * When `null`, the component will manage the active tab internally.
+		 */
+		activeTab: {
+			type: [String, null],
+			default: null,
+		},
 	},
 	data() {
 		return {
@@ -83,7 +93,11 @@ export default {
 		 * @param {String} tabId
 		 */
 		setCurrentTab(tabId) {
-			this.currentTab = tabId;
+			if (this.activeTab === null) {
+				this.currentTab = tabId;
+			} else {
+				this.$emit('update:activeTab', tabId);
+			}
 			this.$nextTick(() => {
 				$(this.$refs['button' + tabId]).focus();
 				this.updateUrl();
@@ -155,6 +169,14 @@ export default {
 		currentTab(newVal, oldVal) {
 			this.tabs.forEach((tab) => tab.isActive(tab.id === newVal));
 		},
+		/**
+		 * In controlled mode, when the `activeTab` prop changes, update the current tab.
+		 */
+		activeTab(newVal) {
+			if (newVal !== null) {
+				this.currentTab = newVal;
+			}
+		},
 	},
 	provide() {
 		return {
@@ -176,7 +198,11 @@ export default {
 		/**
 		 * Set the tab to view when loaded
 		 */
-		this.currentTab = this.defaultTab || this.tabs[0].id;
+		const initialTab =
+			this.activeTab !== null
+				? this.activeTab
+				: this.defaultTab || this.tabs[0]?.id || '';
+		this.currentTab = initialTab;
 
 		/**
 		 * Listen for global 'open-tab' events and open the correct tab when called
diff --git a/src/pages/dashboard/dashboardPageStore.js b/src/pages/dashboard/dashboardPageStore.js
index ae79d986f..bcbe11975 100644
--- a/src/pages/dashboard/dashboardPageStore.js
+++ b/src/pages/dashboard/dashboardPageStore.js
@@ -186,7 +186,7 @@ export const useDashboardPageStore = defineComponentStore(
 			});
 		});
 
-		// Teoretically initFiltersFormFromQueryParams could be called only on the page load.
+		// Theoretically initFiltersFormFromQueryParams could be called only on the page load.
 		// Motivation to use watch here is to keep using the url as source of the truth, to
 		// catch bugs early, without testing all possible filters being loaded just from the url.
 		watch(
diff --git a/src/pages/userComments/UserCommentDetailModal.vue b/src/pages/userComments/UserCommentDetailModal.vue
new file mode 100644
index 000000000..a05910251
--- /dev/null
+++ b/src/pages/userComments/UserCommentDetailModal.vue
@@ -0,0 +1,143 @@
+<template>
+	<SideModalBody>
+		<template #pre-title>
+			<span>{{ comment.id }}.</span>
+			<span>{{ comment.publication.authorsStringShort }}</span>
+			<span>;</span>
+			<span>{{ comment.publication.fullTitle }}</span>
+		</template>
+		<template #title>
+			{{ t('manager.userComment.viewDetailsCommentBy') }}
+		</template>
+
+		<template #description>
+			{{ comment.userName }}
+		</template>
+
+		<div class="min-w-fit p-4">
+			<div class="w-full bg-secondary">
+				<div class="border-y border-e border-s border-light">
+					<div class="flex h-full">
+						<div class="flex-grow border-e border-light p-5">
+							<Panel>
+								<PanelSection>
+									<template #header>
+										<span class="font-bold text-heading">
+											{{ t('manager.userComment.commentPreview') }}
+										</span>
+									</template>
+								</PanelSection>
+
+								<PanelSection>
+									<div>
+										<span class="text-sm-light text-secondary">
+											{{ formatShortDateTime(comment.createdAt) }}
+										</span>
+
+										<div
+											v-strip-unsafe-html="comment.commentText"
+											class="mt-3 text-lg-normal"
+										></div>
+										<div class="mt-4">
+											<div class="text-base-normal font-bold leading-5">
+												{{ comment.userName }}
+											</div>
+											<div
+												v-if="comment.userOrcidDisplayValue"
+												class="mb-1 flex items-center"
+											>
+												<Icon
+													:icon="
+														comment.isUserOrcidAuthenticated
+															? 'Orcid'
+															: 'OrcidUnauthenticated'
+													"
+												/>
+												<a
+													class="text-sm-light text-secondary"
+													target="_blank"
+													:href="comment.userOrcidDisplayValue"
+												>
+													{{ comment.userOrcidDisplayValue }}
+												</a>
+											</div>
+
+											<div
+												v-if="comment.userAffiliation"
+												class="text-base-normal"
+											>
+												{{ comment.userAffiliation }}
+											</div>
+										</div>
+									</div>
+								</PanelSection>
+							</Panel>
+							<div class="mt-6">
+								<UserCommentReportsTable
+									:items="userCommentStore.currentCommentReports"
+								/>
+							</div>
+						</div>
+						<div class="w-96 border-s border-light">
+							<div class="border-b border-light p-8">
+								<div class="text-lg-normal">
+									<span v-if="comment.isApproved">
+										{{
+											t('manager.userComment.approved.note', {
+												approvedBy: comment.approvedByUserName,
+												approvedAt: formatShortDate(comment.approvedAt),
+											})
+										}}
+									</span>
+									<span v-else>
+										{{ t('manager.userComment.approval.warning') }}
+									</span>
+								</div>
+							</div>
+							<div class="flex flex-col items-start space-y-4 p-4">
+								<PkpButton
+									:is-primary="!comment.isApproved"
+									:is-disabled="comment.isApproved"
+									@click="userCommentStore.commentToggleApproval(true)"
+								>
+									{{ t('manager.userComment.approveComment') }}
+								</PkpButton>
+								<PkpButton
+									:is-warnable="true"
+									@click="userCommentStore.commentDelete(comment)"
+								>
+									{{ t('manager.userComment.deleteComment') }}
+								</PkpButton>
+
+								<PkpButton
+									:is-disabled="!comment.isApproved"
+									@click="userCommentStore.commentToggleApproval(false)"
+								>
+									{{ t('manager.userComment.hideComment') }}
+								</PkpButton>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</SideModalBody>
+</template>
+
+<script setup>
+import SideModalBody from '@/components/Modal/SideModalBody.vue';
+import Panel from '@/components/Panel/Panel.vue';
+import PanelSection from '@/components/Panel/PanelSection.vue';
+import PkpButton from '@/components/Button/Button.vue';
+import Icon from '@/components/Icon/Icon.vue';
+import {useUserCommentStore} from '@/pages/userComments/userCommentStore';
+import {useLocalize} from '@/composables/useLocalize';
+import {useDate} from '@/composables/useDate';
+import UserCommentReportsTable from '@/pages/userComments/UserCommentReportsTable.vue';
+
+const {formatShortDate, formatShortDateTime} = useDate();
+const {t} = useLocalize();
+
+const userCommentStore = useUserCommentStore();
+const comment = userCommentStore.currentComment;
+</script>
diff --git a/src/pages/userComments/UserCommentReportDetailModal.vue b/src/pages/userComments/UserCommentReportDetailModal.vue
new file mode 100644
index 000000000..a4d105356
--- /dev/null
+++ b/src/pages/userComments/UserCommentReportDetailModal.vue
@@ -0,0 +1,107 @@
+<template>
+	<SideModalBody>
+		<template #title>
+			{{ t('manager.userComment.viewReportDetailsBy') }}
+		</template>
+
+		<template #description>
+			{{ report.userName }}
+		</template>
+
+		<div class="min-w-fit p-4">
+			<div class="w-full bg-secondary">
+				<div class="border-y border-e border-s border-light">
+					<div class="flex h-full">
+						<div class="flex-grow border-e border-light p-5">
+							<Panel>
+								<PanelSection>
+									<template #header>
+										<span class="font-bold text-heading">
+											{{ t('manager.userComment.reportPreview') }}
+										</span>
+									</template>
+								</PanelSection>
+
+								<PanelSection>
+									<div>
+										<span class="text-sm-light text-secondary">
+											{{ formatShortDateTime(report.createdAt) }}
+										</span>
+
+										<div
+											v-strip-unsafe-html="report.note"
+											class="mt-3 text-lg-normal"
+										></div>
+										<div class="mt-4">
+											<div class="text-base-normal font-bold leading-5">
+												{{ report.userName }}
+											</div>
+											<div
+												v-if="report.userOrcidDisplayValue"
+												class="mb-1 flex items-center"
+											>
+												<Icon
+													:icon="
+														report.isUserOrcidAuthenticated
+															? 'Orcid'
+															: 'OrcidUnauthenticated'
+													"
+												/>
+												<a
+													class="text-sm-light text-secondary"
+													target="_blank"
+													:href="report.userOrcidDisplayValue"
+												>
+													{{ report.userOrcidDisplayValue }}
+												</a>
+											</div>
+
+											<div
+												v-if="report.userAffiliation"
+												class="text-base-normal"
+											>
+												{{ report.userAffiliation }}
+											</div>
+										</div>
+									</div>
+								</PanelSection>
+							</Panel>
+						</div>
+						<div class="w-96 border-s border-light">
+							<div class="flex flex-col items-start space-y-4 p-4">
+								<PkpButton
+									:is-warnable="true"
+									@click="userCommentStore.reportDelete(report)"
+								>
+									{{ t('manager.userComment.deleteReport') }}
+								</PkpButton>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</SideModalBody>
+</template>
+
+<script setup>
+import SideModalBody from '@/components/Modal/SideModalBody.vue';
+import {useDate} from '@/composables/useDate';
+import PanelSection from '@/components/Panel/PanelSection.vue';
+import Icon from '@/components/Icon/Icon.vue';
+import Panel from '@/components/Panel/Panel.vue';
+import PkpButton from '@/components/Button/Button.vue';
+import {useUserCommentStore} from '@/pages/userComments/userCommentStore';
+
+const {formatShortDateTime} = useDate();
+
+defineProps({
+	/** The report to display information about */
+	report: {
+		type: Object,
+		required: true,
+	},
+});
+
+const userCommentStore = useUserCommentStore();
+</script>
diff --git a/src/pages/userComments/UserCommentReportsTable.vue b/src/pages/userComments/UserCommentReportsTable.vue
new file mode 100644
index 000000000..eff78ae2a
--- /dev/null
+++ b/src/pages/userComments/UserCommentReportsTable.vue
@@ -0,0 +1,76 @@
+<template>
+	<PkpTable>
+		<template #label>
+			{{ t('manager.userComment.reports') }}
+		</template>
+		<template #description>
+			<span>
+				{{ t('manager.userComment.report.description') }}
+			</span>
+		</template>
+		<TableHeader>
+			<TableColumn
+				v-for="(column, i) in userCommentStore.reportsTableColumns"
+				:key="i"
+			>
+				<span :class="column.headerSrOnly ? 'sr-only' : ''">
+					{{ column.header }}
+				</span>
+			</TableColumn>
+		</TableHeader>
+		<TableBody :empty-text="t('manager.userComment.report.noReports')">
+			<TableRow v-for="(report, i) in items" :key="i">
+				<TableCell>{{ report.userName }}</TableCell>
+				<TableCell class="max-w-[25em] truncate">
+					{{ report.note }}
+				</TableCell>
+				<TableCell>
+					{{ formatShortDate(report.createdAt) }}
+				</TableCell>
+				<TableCell>
+					<DropdownActions
+						:label="t('common.moreActions')"
+						button-variant="ellipsis"
+						:actions="userCommentStore.getReportItemActions(report)"
+						@action="(actionName) => userCommentStore[actionName](report)"
+					/>
+				</TableCell>
+			</TableRow>
+		</TableBody>
+	</PkpTable>
+	<TablePagination
+		v-if="userCommentStore.currentCommentReportsPagination.pageCount > 1"
+		:pagination="userCommentStore.currentCommentReportsPagination"
+		@set-page="(...args) => userCommentStore.setCurrentReportsPage(...args)"
+	></TablePagination>
+</template>
+
+<script setup>
+import TableColumn from '@/components/Table/TableColumn.vue';
+import PkpTable from '@/components/Table/Table.vue';
+import DropdownActions from '@/components/DropdownActions/DropdownActions.vue';
+import TablePagination from '@/components/Table/TablePagination.vue';
+import TableRow from '@/components/Table/TableRow.vue';
+import TableBody from '@/components/Table/TableBody.vue';
+import TableCell from '@/components/Table/TableCell.vue';
+import TableHeader from '@/components/Table/TableHeader.vue';
+import {useUserCommentStore} from '@/pages/userComments/userCommentStore';
+
+import {useLocalize} from '@/composables/useLocalize';
+import {useDate} from '@/composables/useDate';
+
+const {t} = useLocalize();
+const {formatShortDate} = useDate();
+
+defineProps({
+	/**
+	 * Array of user comment reports to display.
+	 */
+	items: {
+		type: Array,
+		required: true,
+	},
+});
+
+const userCommentStore = useUserCommentStore();
+</script>
diff --git a/src/pages/userComments/UserCommentsTable.vue b/src/pages/userComments/UserCommentsTable.vue
new file mode 100644
index 000000000..1f31a7071
--- /dev/null
+++ b/src/pages/userComments/UserCommentsTable.vue
@@ -0,0 +1,82 @@
+<template>
+	<div>
+		<Spinner v-if="userCommentStore.isCommentsLoading" size-variant="big" />
+		<PkpTable>
+			<TableHeader>
+				<TableColumn
+					v-for="(column, i) in userCommentStore.commentsTableColumns"
+					:key="i"
+				>
+					<span :class="column.headerSrOnly ? 'sr-only' : ''">
+						{{ column.header }}
+					</span>
+				</TableColumn>
+			</TableHeader>
+
+			<TableBody>
+				<TableRow v-for="(comment, index) in items" :key="index">
+					<TableCell class="max-w-[25em]">
+						<div class="truncate">
+							<span class="mr-1">{{ comment.id }}.</span>
+							<span class="font-bold">
+								{{ comment.publication.authorsStringShort }}
+							</span>
+							<span>;</span>
+							<span>{{ comment.publication.fullTitle }}</span>
+						</div>
+					</TableCell>
+					<TableCell class="max-w-[25em]">
+						<div
+							v-strip-unsafe-html="comment.commentText"
+							class="truncate"
+						></div>
+					</TableCell>
+					<TableCell>
+						{{ comment.userName }}
+					</TableCell>
+					<TableCell>
+						{{ userCommentStore.getCommentStatusText(comment) }}
+					</TableCell>
+					<TableCell>
+						<DropdownActions
+							:label="t('common.moreActions')"
+							button-variant="ellipsis"
+							:actions="userCommentStore.getCommentItemActions(comment)"
+							@action="(actionName) => userCommentStore[actionName](comment)"
+						/>
+					</TableCell>
+				</TableRow>
+			</TableBody>
+		</PkpTable>
+		<TablePagination
+			v-if="userCommentStore.commentsPagination.pageCount > 1"
+			:pagination="userCommentStore.commentsPagination"
+			@set-page="(...args) => userCommentStore.setCurrentCommentsPage(...args)"
+		></TablePagination>
+	</div>
+</template>
+
+<script setup>
+import TableColumn from '@/components/Table/TableColumn.vue';
+import Spinner from '@/components/Spinner/Spinner.vue';
+import PkpTable from '@/components/Table/Table.vue';
+import DropdownActions from '@/components/DropdownActions/DropdownActions.vue';
+import TablePagination from '@/components/Table/TablePagination.vue';
+import TableRow from '@/components/Table/TableRow.vue';
+import TableBody from '@/components/Table/TableBody.vue';
+import TableCell from '@/components/Table/TableCell.vue';
+import TableHeader from '@/components/Table/TableHeader.vue';
+import {useUserCommentStore} from '@/pages/userComments/userCommentStore';
+
+const userCommentStore = useUserCommentStore();
+
+defineProps({
+	/**
+	 * Array of comments to display in the table.
+	 */
+	items: {
+		type: Array,
+		required: true,
+	},
+});
+</script>
diff --git a/src/pages/userComments/userCommentStore.js b/src/pages/userComments/userCommentStore.js
new file mode 100644
index 000000000..1680bf78e
--- /dev/null
+++ b/src/pages/userComments/userCommentStore.js
@@ -0,0 +1,488 @@
+import {defineComponentStore} from '@/utils/defineComponentStore';
+import {computed, ref, watch} from 'vue';
+import {useModal} from '@/composables/useModal';
+import {useUrl} from '@/composables/useUrl';
+import {useFetch} from '@/composables/useFetch';
+import {useFetchPaginated} from '@/composables/useFetchPaginated';
+import {useLocalize} from '@/composables/useLocalize';
+import UserCommentDetailModal from '@/pages/userComments/UserCommentDetailModal.vue';
+import UserCommentReportDetailModal from '@/pages/userComments/UserCommentReportDetailModal.vue';
+
+const {t} = useLocalize();
+
+const Actions = {
+	COMMENT_VIEW: 'commentView',
+	COMMENT_DELETE: 'commentDelete',
+	REPORT_DELETE: 'reportDelete',
+	REPORT_VIEW: 'reportView',
+};
+
+const CommentStatusMap = {
+	approved: t('manager.userComment.approved'),
+	needsApproval: t('manager.userComment.hiddenOrNeedsApproval'),
+	reported: t('manager.userComment.reported'),
+	all: t('manager.userComment.all'),
+};
+
+export const useUserCommentStore = defineComponentStore(
+	'userCommentStore',
+	(props) => {
+		const activeTab = ref('all');
+		const itemsPerPage = props.itemsPerPage;
+		const currentCommentReportsPage = ref(1);
+		const currentCommentsPage = ref(1);
+		const currentComment = ref({});
+		const {apiUrl} = useUrl('comments');
+
+		// Used to track the last paginated page visited for comments of given status.
+		const trackedCommentPaginationPageHistory = ref({});
+
+		const commentsTableColumns = computed(() => {
+			return [
+				{
+					header: t('submission.submission'),
+				},
+				{
+					header: t('manager.userComment.comment'),
+					headerSrOnly: false,
+				},
+				{
+					header: t('common.user'),
+					headerSrOnly: false,
+				},
+				{
+					header: t('common.status'),
+					headerSrOnly: false,
+				},
+				{
+					header: t('grid.columns.actions'),
+					headerSrOnly: true,
+				},
+			];
+		});
+
+		const reportsTableColumns = computed(() => {
+			return [
+				{
+					header: t('manager.userComment.reportedBy'),
+					headerSrOnly: false,
+				},
+				{
+					header: t('manager.userComment.report.reason'),
+					headerSrOnly: false,
+				},
+				{
+					header: t('manager.userComment.dateReported'),
+					headerSrOnly: false,
+				},
+				{
+					header: t('grid.columns.actions'),
+					headerSrOnly: true,
+				},
+			];
+		});
+
+		const commentsUrl = computed(() => {
+			let queryParams = '';
+
+			if (activeTab.value === 'approved') {
+				queryParams += `?isApproved=${true}`;
+			} else if (activeTab.value === 'needsApproval') {
+				queryParams += `?isApproved=${false}`;
+			} else if (activeTab.value === 'reported') {
+				queryParams += `?isReported=${true}`;
+			}
+
+			return apiUrl.value + queryParams;
+		});
+
+		const reportsUrl = computed(() => {
+			return currentComment.value?.id
+				? `${apiUrl.value}/${currentComment.value.id}/reports`
+				: '';
+		});
+
+		const {
+			items: comments,
+			pagination: commentsPagination,
+			isLoading: isCommentsLoading,
+			fetch: _fetchComments,
+		} = useFetchPaginated(commentsUrl, {
+			currentPage: currentCommentsPage,
+			pageSize: itemsPerPage,
+		});
+
+		const {
+			items: currentCommentReports,
+			pagination: currentCommentReportsPagination,
+			fetch: _fetchCommentReports,
+		} = useFetchPaginated(reportsUrl, {
+			currentPage: currentCommentReportsPage,
+			pageSize: itemsPerPage,
+		});
+
+		watch(
+			[commentsUrl, currentCommentsPage],
+			async () => await fetchComments(),
+			{
+				immediate: true,
+			},
+		);
+
+		watch(
+			[currentCommentReportsPage, reportsUrl],
+			async () => await fetchCommentReports(),
+		);
+
+		/**
+		 * Delete a comment report.
+		 * @param {object} report - The report to delete.
+		 */
+		async function reportDelete(report) {
+			const {openDialog, closeSideModal, isSideModalOpened} = useModal();
+
+			openDialog({
+				title: t('manager.userComment.deleteReport'),
+				message: t('manager.userComment.deleteReport.confirm'),
+				actions: [
+					{
+						label: t('common.delete'),
+						isWarnable: true,
+						callback: async (close) => {
+							const {isSuccess, fetch: deleteReport} = useFetch(
+								`${apiUrl.value}/${report.userCommentId}/reports/${report.id}`,
+								{
+									method: 'DELETE',
+								},
+							);
+
+							await deleteReport();
+
+							if (isSuccess.value) {
+								pkp.eventBus.$emit(
+									'notify',
+									t('manager.userComment.deleteReport.success'),
+									'success',
+								);
+
+								if (isSideModalOpened(UserCommentReportDetailModal)) {
+									closeSideModal(UserCommentReportDetailModal);
+								} else {
+									await fetchCommentReports();
+								}
+							}
+
+							close();
+						},
+					},
+					{
+						label: t('common.cancel'),
+						callback: (close) => close(),
+					},
+				],
+			});
+		}
+
+		/**
+		 * Toggle the approval status of a comment.
+		 * @param {boolean} isApproved - Whether the comment is approved or not.
+		 * @param {object} comment - The comment to toggle approval for.
+		 */
+		async function commentToggleApproval(isApproved) {
+			// Don't proceed if the current comment is already in the desired approval state.
+			if (currentComment.value.isApproved === isApproved) {
+				return;
+			}
+
+			const form = new FormData();
+			form.set('approved', isApproved);
+
+			const {isSuccess, fetch} = useFetch(
+				`${apiUrl.value}/${currentComment.value.id}/setApproval`,
+				{
+					method: 'PUT',
+					body: form,
+				},
+			);
+
+			await fetch();
+
+			if (isSuccess.value) {
+				pkp.eventBus.$emit(
+					'notify',
+					t('manager.userComment.commentUpdated'),
+					'success',
+				);
+
+				const {closeSideModal} = useModal();
+				closeSideModal(UserCommentDetailModal);
+			}
+		}
+
+		/**
+		 * Fetches the comments.
+		 */
+		async function fetchComments() {
+			await _fetchComments();
+		}
+
+		/**
+		 * Fetches the reports for comment currently selected for detailed view.
+		 */
+		async function fetchCommentReports() {
+			if (reportsUrl.value && currentComment.value?.isReported) {
+				await _fetchCommentReports();
+			}
+		}
+
+		/**
+		 * Get the actions available for a comment.
+		 * @param {object} comment - The comment to get actions for.
+		 * @returns {[{label: string, icon: string, name: string, isWarnable?: boolean}]}
+		 */
+		function getCommentItemActions(comment) {
+			const actions = [
+				{
+					label: t('manager.userComment.viewComment'),
+					icon: 'View',
+					name: Actions.COMMENT_VIEW,
+				},
+				{
+					label: t('manager.userComment.deleteComment'),
+					icon: 'Cancel',
+					name: Actions.COMMENT_DELETE,
+					isWarnable: true,
+				},
+			];
+
+			return actions;
+		}
+
+		/**
+		 * Get the actions available for a report.
+		 * @param {object} report - The report to get actions for.
+		 * @returns {[{label: string, icon: string, name: string, isWarnable?: boolean}]}
+		 */
+		function getReportItemActions(report) {
+			return [
+				{
+					label: t('manager.userComment.viewReport'),
+					icon: 'View',
+					name: Actions.REPORT_VIEW,
+				},
+				{
+					label: t('manager.userComment.deleteReport'),
+					icon: 'Cancel',
+					name: Actions.REPORT_DELETE,
+					isWarnable: true,
+				},
+			];
+		}
+
+		/**
+		 * Set the current page for the comment reports table.
+		 * @param {number} _currentPage - The page number to set as current.
+		 */
+		function setCurrentReportsPage(_currentPage) {
+			currentCommentReportsPage.value = _currentPage;
+		}
+
+		/**
+		 * Set the current page for the comments table.
+		 * @param {number} _currentPage - The page number to set as current.
+		 */
+		function setCurrentCommentsPage(_currentPage) {
+			currentCommentsPage.value = _currentPage;
+		}
+
+		/**
+		 * Set the current comment to be displayed in the UserCommentDetail modal.
+		 * @param {object} comment - The comment to set as current.
+		 */
+		function setCurrentComment(comment) {
+			currentComment.value = comment;
+		}
+
+		/**
+		 * Open the comment detail modal for a specific comment.
+		 * @param {object} comment - The comment to open in detail view.
+		 */
+		function commentView(comment) {
+			setCurrentComment(comment);
+			const {openSideModal} = useModal();
+
+			openSideModal(
+				UserCommentDetailModal,
+				{},
+				{
+					onClose: async () => {
+						await fetchComments();
+					},
+				},
+			);
+		}
+
+		/**
+		 * Handle the change of the tab selection for comment status.
+		 * @param {string} tabId - The selected tab ID.
+		 */
+		function onTabUpdate(tabId) {
+			// Track the current page for each comment table.
+			// This is useful when the user is switching between tables for different comments(approved, reported, needs approval).
+			// Instead of always starting from page 1 of the paginated table, we start from the last visited page for that comment table, defaulting to page 1 if there is no previous history.
+			const pageToStartFrom =
+				trackedCommentPaginationPageHistory.value[tabId] ?? 1;
+
+			trackedCommentPaginationPageHistory.value[activeTab.value] =
+				currentCommentsPage.value;
+			activeTab.value = tabId;
+
+			setCurrentCommentsPage(pageToStartFrom);
+		}
+
+		/**
+		 * Delete a comment.
+		 * @param {object} comment - The comment to delete.
+		 */
+		function commentDelete(comment) {
+			const {openDialog, closeSideModal, isSideModalOpened} = useModal();
+			openDialog({
+				title: t('manager.userComment.deleteComment'),
+				message: t('manager.userComment.deleteComment.confirm'),
+				actions: [
+					{
+						label: t('common.delete'),
+						isWarnable: true,
+						callback: async (close) => {
+							const {isSuccess, fetch} = useFetch(
+								`${apiUrl.value}/${comment.id}`,
+								{
+									method: 'DELETE',
+								},
+							);
+
+							await fetch();
+
+							if (isSuccess.value) {
+								pkp.eventBus.$emit(
+									'notify',
+									t('manager.userComment.deleteComment.success'),
+									'success',
+								);
+
+								/**
+								 * Comments can be deleted from the actions options in comments list or from the comment detail modal.
+								 * If the comment was deleted from the modal, then we don't need to call `fetchComments`, as closure of the modal triggers refresh of the comments list.
+								 */
+								if (isSideModalOpened(UserCommentDetailModal)) {
+									closeSideModal(UserCommentDetailModal);
+								} else {
+									await fetchComments();
+								}
+							}
+
+							close();
+						},
+					},
+					{
+						label: t('common.cancel'),
+						callback: (close) => close(),
+					},
+				],
+			});
+		}
+
+		/**
+		 * Get the options for comment types(approved, needs approval, reported), to select from to view comments
+		 */
+		const commentTabOptions = computed(() => {
+			return [
+				{
+					label: CommentStatusMap['all'],
+					id: 'all',
+				},
+				{
+					label: CommentStatusMap['approved'],
+					id: 'approved',
+				},
+				{
+					label: CommentStatusMap['needsApproval'],
+					id: 'needsApproval',
+				},
+				{
+					label: CommentStatusMap['reported'],
+					id: 'reported',
+				},
+			];
+		});
+
+		/**
+		 * Open the report detail modal for a specific report.
+		 * @param {object} report - The report to open in detail view.
+		 */
+		function reportView(report) {
+			const {openSideModal} = useModal();
+			openSideModal(
+				UserCommentReportDetailModal,
+				{
+					report,
+				},
+				{
+					onClose: async () => await fetchCommentReports(),
+				},
+			);
+		}
+
+		/**
+		 * Get the status text for a comment.
+		 * @param comment - The comment to get the status text for.
+		 * @returns {string}
+		 */
+		function getCommentStatusText(comment) {
+			let status = [];
+
+			// If user is viewing all comments then show all statuses that the comment has.
+			if (activeTab.value === 'all') {
+				if (comment.isApproved) {
+					status.push(t('manager.userComment.approved'));
+				} else {
+					status.push(t('manager.userComment.hiddenOrNeedsApproval'));
+				}
+				if (comment.isReported) {
+					status.push(t('manager.userComment.reported'));
+				}
+
+				status = status.join(', ');
+			} else {
+				status = CommentStatusMap[activeTab.value];
+			}
+
+			return status;
+		}
+
+		return {
+			reportDelete,
+			commentToggleApproval,
+			getCommentItemActions,
+			setCurrentCommentsPage,
+			commentDelete,
+			getReportItemActions,
+			setCurrentReportsPage,
+			reportView,
+			getCommentStatusText,
+			onTabUpdate,
+			commentView,
+			itemsPerPage,
+			commentsTableColumns,
+			comments,
+			currentComment,
+			commentsPagination,
+			currentCommentReports,
+			currentCommentReportsPagination,
+			reportsTableColumns,
+			commentTabOptions,
+			isCommentsLoading,
+			activeTab,
+		};
+	},
+);
diff --git a/src/pages/userComments/userCommentsPage.vue b/src/pages/userComments/userCommentsPage.vue
new file mode 100644
index 000000000..eddb5326a
--- /dev/null
+++ b/src/pages/userComments/userCommentsPage.vue
@@ -0,0 +1,39 @@
+<template>
+	<div>
+		<Tabs
+			:track-history="true"
+			:active-tab="userCommentStore.activeTab"
+			:label="t('manager.userComment.userComments')"
+			@update:active-tab="(tabId) => userCommentStore.onTabUpdate(tabId)"
+		>
+			<Tab
+				v-for="(tab, index) in userCommentStore.commentTabOptions"
+				:id="tab.id"
+				:key="index"
+				:label="tab.label"
+			>
+				<UserCommentsTable :items="userCommentStore.comments" />
+			</Tab>
+		</Tabs>
+	</div>
+</template>
+<script setup>
+import {useLocalize} from '@/composables/useLocalize';
+import {useUserCommentStore} from '@/pages/userComments/userCommentStore';
+import Tabs from '@/components/Tabs/Tabs.vue';
+import Tab from '@/components/Tabs/Tab.vue';
+import UserCommentsTable from '@/pages/userComments/UserCommentsTable.vue';
+
+const props = defineProps({
+	/**
+	 * Number of items to fetch and display per page in pagination.
+	 */
+	itemsPerPage: {
+		type: Number,
+		required: true,
+	},
+});
+
+const userCommentStore = useUserCommentStore(props);
+const {t} = useLocalize();
+</script>