diff --git a/src/components/ListPanel/reviewerSuggestions/ReviewerSuggestionsListPanel.vue b/src/components/ListPanel/reviewerSuggestions/ReviewerSuggestionsListPanel.vue
index de56537e8..5c8b3dd29 100644
--- a/src/components/ListPanel/reviewerSuggestions/ReviewerSuggestionsListPanel.vue
+++ b/src/components/ListPanel/reviewerSuggestions/ReviewerSuggestionsListPanel.vue
@@ -162,7 +162,7 @@ export default {
 
 				const newReviewerSuggestions = [...this.submission.reviewerSuggestions];
 				newReviewerSuggestions.push(reviewerSuggestion);
-				console.log(newReviewerSuggestions);
+
 				this.$emit('updated:reviewerSuggestions', newReviewerSuggestions);
 			} else {
 				const newReviewerSuggestions = this.submission.reviewerSuggestions.map(
diff --git a/src/components/ListPanel/users/SelectReviewerListPanel.vue b/src/components/ListPanel/users/SelectReviewerListPanel.vue
index 190d4e2dc..4d7fab2ee 100644
--- a/src/components/ListPanel/users/SelectReviewerListPanel.vue
+++ b/src/components/ListPanel/users/SelectReviewerListPanel.vue
@@ -3,13 +3,13 @@
 		<slot>
 			<ListPanel
 				v-if="suggestions.length > 0"
-				class="listPanel--selectReviewer"
+				class="listPanel--selectReviewer reviewer-sugestions-list"
 				:items="suggestions"
 			>
 				<template #header>
 					<PkpHeader>
 						<h2>
-							{{ title }}
+							{{ suggestionTitle ?? title }}
 						</h2>
 						<Spinner v-if="isLoading" />
 					</PkpHeader>
@@ -349,6 +349,11 @@ export default {
 			type: String,
 			required: true,
 		},
+		/** The list panel title of reviewer suggestion list */
+		suggestionTitle: {
+			type: String,
+			required: false,
+		},
 		/** An array of reviewer suggestion if there are any */
 		suggestions: {
 			type: Array,
@@ -454,3 +459,11 @@ export default {
 	},
 };
 </script>
+
+<style lang="less">
+@import '../../../styles/_import';
+
+.reviewer-sugestions-list {
+	margin-bottom: 4rem;
+}
+</style>
diff --git a/src/components/ListPanel/users/SelectReviewerSuggestionListItem.vue b/src/components/ListPanel/users/SelectReviewerSuggestionListItem.vue
index 704bdcbc2..e3a2353e8 100644
--- a/src/components/ListPanel/users/SelectReviewerSuggestionListItem.vue
+++ b/src/components/ListPanel/users/SelectReviewerSuggestionListItem.vue
@@ -5,16 +5,14 @@
 				<div class="listPanel__itemTitle">
 					<!-- TODO: check why localize(fullName) causing error -->
 					{{ fullName }}
-					<Badge class="listPanel__item--reviewer__active">
-						{{ affiliation }}
-					</Badge>
 				</div>
 
 				<div class="listPanel__itemSubtitle">
 					<div class="listPanel__item--reviewer__affiliation">
-						<!-- TODO: how to show without v-html -->
-						{{ suggestionReason }}
+						{{ affiliation }}
 					</div>
+					<!-- TODO: check alternative of v-html as v-strip-unsafe-html not working -->
+					<div v-strip-unsafe-html="suggestionReason"></div>
 				</div>
 			</div>
 
@@ -31,7 +29,6 @@
 </template>
 
 <script>
-import Badge from '@/components/Badge/Badge.vue';
 import PkpButton from '@/components/Button/Button.vue';
 import ajaxError from '@/mixins/ajaxError';
 import dialog from '@/mixins/dialog.js';
@@ -40,7 +37,6 @@ import {useLocalize} from '@/composables/useLocalize';
 
 export default {
 	components: {
-		Badge,
 		PkpButton,
 	},
 	mixins: [ajaxError, dialog],
@@ -107,9 +103,6 @@ export default {
 		select() {
 			const {t} = useLocalize();
 
-			// this.$emit('select', this.item);
-			// pkp.eventBus.$emit('selected:reviewerSuggestion', this.item);
-
 			const {openLegacyModal} = useLegacyGridUrl({
 				component: 'grid.users.reviewer.ReviewerGridHandler',
 				op: 'showReviewerForm',
@@ -130,32 +123,3 @@ export default {
 	},
 };
 </script>
-
-<style lang="less">
-@import '../../../styles/_import';
-
-.listPanel__item--reviewer__active {
-	margin-inline-end: 0.25rem;
-	font-weight: @normal;
-}
-
-// Reviewer locked or already assigned
-.listPanel__item--reviewer__notice {
-	font-size: @font-tiny;
-}
-
-// Make the button look like a link
-.listPanel__item--reviewer__noticeAction {
-	border: none;
-	padding: 0;
-	background: transparent;
-	color: @primary;
-	text-decoration: underline;
-	cursor: pointer;
-
-	&:hover,
-	&:focus {
-		color: @primary-lift;
-	}
-}
-</style>
diff --git a/src/managers/ReviewerSuggestionManager/ReviewerSuggestionManager.vue b/src/managers/ReviewerSuggestionManager/ReviewerSuggestionManager.vue
index ae5a106af..1ad2d1584 100644
--- a/src/managers/ReviewerSuggestionManager/ReviewerSuggestionManager.vue
+++ b/src/managers/ReviewerSuggestionManager/ReviewerSuggestionManager.vue
@@ -24,8 +24,13 @@
 								{{ reviewerSuggestion.fullName }}
 							</div>
 							<div class="text-sm-normal text-secondary">
-								{{ reviewerSuggestion.suggestionReason }}
+								{{ reviewerSuggestion.affiliation }}
 							</div>
+							<!-- TODO: check alternative of v-html as v-strip-unsafe-html not working -->
+							<div
+								v-strip-unsafe-html="reviewerSuggestion.suggestionReason"
+								class="text-sm-normal text-secondary"
+							></div>
 						</div>
 					</div>
 					<div>