diff --git a/src/components/Container/FailedJobDetailsPage.vue b/src/components/Container/FailedJobDetailsPage.vue
deleted file mode 100644
index b985f070e..000000000
--- a/src/components/Container/FailedJobDetailsPage.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script>
-import Page from './Page.vue';
-import PkpTable from '@/components/Table/Table.vue';
-import TableCell from '@/components/Table/TableCell.vue';
-
-export default {
-	name: 'FailedJobDetailsPage',
-	components: {
-		PkpTable,
-		TableCell,
-	},
-	extends: Page,
-	data() {
-		return {
-			columns: [],
-			rows: [],
-			label: '',
-		};
-	},
-	methods: {
-		isValidJson(value) {
-			try {
-				JSON.parse(value);
-			} catch (e) {
-				return false;
-			}
-			return true;
-		},
-	},
-};
-</script>
-
-<style scoped>
-.app__contentPanel__overflow {
-	width: inherit !important;
-	overflow: auto !important;
-}
-</style>
diff --git a/src/components/Container/FailedJobsPage.vue b/src/components/Container/FailedJobsPage.vue
deleted file mode 100644
index 033b9978e..000000000
--- a/src/components/Container/FailedJobsPage.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<script>
-import JobsPage from './JobsPage.vue';
-import TableCell from '@/components/Table/TableCell.vue';
-import ButtonRow from '@/components/ButtonRow/ButtonRow.vue';
-
-export default {
-	name: 'FailedJobsPage',
-	components: {
-		TableCell,
-		ButtonRow,
-	},
-	extends: JobsPage,
-	data() {
-		return {
-			apiUrlRedispatchAll: null,
-		};
-	},
-	methods: {
-		removeJob(data) {
-			this.rows = this.rows.filter((row) => row.id !== data.id);
-			this.total = this.total - 1;
-		},
-		redispatch(data) {
-			$.ajax({
-				url: data._hrefs._redispatch,
-				type: 'POST',
-				headers: {
-					'X-Csrf-Token': pkp.currentUser.csrfToken,
-				},
-				error: this.ajaxErrorCallback,
-				success: (response) => {
-					pkp.eventBus.$emit('notify', response.message, 'success');
-					this.removeJob(data);
-				},
-			});
-		},
-		remove(data) {
-			$.ajax({
-				url: data._hrefs._delete,
-				type: 'POST',
-				headers: {
-					'X-Csrf-Token': pkp.currentUser.csrfToken,
-					'X-Http-Method-Override': 'DELETE',
-				},
-				error: this.ajaxErrorCallback,
-				success: (response) => {
-					pkp.eventBus.$emit('notify', response.message, 'success');
-					this.removeJob(data);
-				},
-			});
-		},
-		requeueAll() {
-			this.isLoadingItems = true;
-			$.ajax({
-				url: this.apiUrlRedispatchAll,
-				type: 'POST',
-				headers: {
-					'X-Csrf-Token': pkp.currentUser.csrfToken,
-				},
-				error: this.ajaxErrorCallback,
-				success: (response) => {
-					pkp.eventBus.$emit('notify', response.message, 'success');
-					this.loadList(1);
-				},
-			});
-		},
-	},
-};
-</script>
diff --git a/src/components/Container/Page.vue b/src/components/Container/Page.vue
index c15ecff97..fb925ebfd 100644
--- a/src/components/Container/Page.vue
+++ b/src/components/Container/Page.vue
@@ -4,6 +4,9 @@ import ModalManager from '@/components/Modal/ModalManager.vue';
 
 import PkpAnnouncer from '@/components/Announcer/Announcer.vue';
 import ReviewerSubmissionPage from '@/pages/reviewerSubmission/ReviewerSubmissionPage.vue';
+import JobsPage from '@/pages/jobs/JobsPage.vue';
+import FailedJobsPage from '@/pages/jobs/FailedJobsPage.vue';
+import FailedJobDetailsPage from '@/pages/jobs/FailedJobDetailsPage.vue';
 
 export default {
 	name: 'Page',
@@ -11,6 +14,9 @@ export default {
 		PkpAnnouncer,
 		ModalManager,
 		ReviewerSubmissionPage,
+		JobsPage,
+		FailedJobsPage,
+		FailedJobDetailsPage,
 	},
 	extends: Container,
 	data() {
diff --git a/src/components/Container/StatsPage.stories.js b/src/components/Container/StatsPage.stories.js
index 996ab494e..50434e30a 100644
--- a/src/components/Container/StatsPage.stories.js
+++ b/src/components/Container/StatsPage.stories.js
@@ -1,8 +1,8 @@
 import StatsPage from './StatsPage.vue';
 import StatsEditorialPage from '@/components/Container/StatsEditorialPage.vue';
 import StatsPublicationsPage from '@/components/Container/StatsPublicationsPage.vue';
-import ArticleStatsMock from '@/components/Table/mocks/articleStats.js';
-import ArticleStatsColumnsMock from '@/components/Table/mocks/articleStatsColumns.js';
+import ArticleStatsMock from '@/components/TableNext/mocks/articleStats.js';
+import ArticleStatsColumnsMock from '@/components/TableNext/mocks/articleStatsColumns.js';
 import debounce from 'debounce';
 
 export default {
@@ -116,27 +116,26 @@ const EditorialStatsPageWithDataAndTemplate = {
 					<PkpTable
 						class="pkpTable--editorialStats"
 						labelled-by="editorialActivityTabelLabel"
-						:columns="tableColumns"
-						:rows="tableRows"
 					>
-						<template #default="{row, rowIndex}">
-							<TableCell
-								v-for="(column, columnIndex) in tableColumns"
-								:key="column.name"
-								:column="column"
-								:row="row"
-								:tabindex="!rowIndex && !columnIndex ? 0 : -1"
-							>
-								<template #default v-if="column.name === 'name'">
+						<TableHeader>
+							<TableColumn v-for="(column, columnIndex) in tableColumns" :key="column.name" :id="column.name">
+								{{column.label}}
+							</TableColumn>
+						</TableHeader>
+						<TableBody>
+							<TableRow v-for="(row, index) in tableRows" :key="index">
+								<TableCell>
 									{{ row.name }}
 									<Tooltip
 										v-if="row.description"
 										:label="'Description for ' + row.name"
 										:tooltip="row.description"
 									></Tooltip>
-								</template>
-							</TableCell>
-						</template>
+								</TableCell>
+								<TableCell>{{ row.dateRange }}</TableCell>
+								<TableCell>{{ row.total }}</TableCell>
+							</TableRow>
+						</TableBody>
 					</PkpTable>
 				</div>
 			</div>
@@ -540,21 +539,35 @@ const PublicationStatsPageWithDataAndTemplate = {
 					</PkpHeader>
 					<PkpTable
 						labelled-by="articleDetailTableLabel"
-						:class="tableClasses"
-						:columns="tableColumns"
-						:rows="items"
-						:order-by="orderBy"
-						:order-direction="orderDirection"
-						@order-by="setOrderBy"
+						@sort="setOrderBy"
 					>
-						<template #thead-title>
-							<Search
-								class="pkpStats__titleSearch"
-								:search-phrase="searchPhrase"
-								search-label="Search by title, author and ID"
-								@search-phrase-changed="setSearchPhrase"
-							/>
-						</template>
+						<TableHeader>
+							<TableColumn v-for="column in tableColumns" :key="column.name" :id="column.name">
+								<template v-if="column.name === 'title'">
+									{{ column.label }}
+									<Search
+										class="pkpStats__titleSearch"
+										:search-phrase="searchPhrase"
+										search-label="Search by title, author and ID"
+										@search-phrase-changed="setSearchPhrase"
+									/>
+								</template>
+								<template v-else>
+									{{ column.label }}
+								</template>
+							</TableColumn>
+						</TableHeader>
+						<TableBody>
+							<TableRow v-for="(row) in items" :key="row.key">
+								<TableCell>{{ row.object.fullTitle.en }}</TableCell>
+								<TableCell>{{ row.abstractViews }}</TableCell>
+								<TableCell>{{ row.galleyViews }}</TableCell>
+								<TableCell>{{ row.pdfViews }}</TableCell>
+								<TableCell>{{ row.htmlViews }}</TableCell>
+								<TableCell>{{ row.otherViews }}</TableCell>
+								<TableCell>{{ row.total }}</TableCell>
+							</TableRow>
+						</TableBody>
 					</PkpTable>
 					<div v-if="!items.length" class="pkpStats__noRecords">
 						<template v-if="isLoadingItems">
diff --git a/src/components/Container/StatsPage.vue b/src/components/Container/StatsPage.vue
index ca3c32068..f20c15c0c 100644
--- a/src/components/Container/StatsPage.vue
+++ b/src/components/Container/StatsPage.vue
@@ -4,8 +4,12 @@ import DateRange from '@/components/DateRange/DateRange.vue';
 import PkpFilter from '@/components/Filter/Filter.vue';
 import Pagination from '@/components/Pagination/Pagination.vue';
 import PkpHeader from '@/components/Header/Header.vue';
-import PkpTable from '@/components/Table/Table.vue';
-import TableCell from '@/components/Table/TableCell.vue';
+import PkpTable from '@/components/TableNext/Table.vue';
+import TableCell from '@/components/TableNext/TableCell.vue';
+import TableColumn from '@/components/TableNext/TableColumn.vue';
+import TableHeader from '@/components/TableNext/TableHeader.vue';
+import TableBody from '@/components/TableNext/TableBody.vue';
+import TableRow from '@/components/TableNext/TableRow.vue';
 import ajaxError from '@/mixins/ajaxError';
 
 export default {
@@ -17,6 +21,10 @@ export default {
 		PkpHeader,
 		PkpTable,
 		TableCell,
+		TableColumn,
+		TableHeader,
+		TableBody,
+		TableRow,
 	},
 	extends: Page,
 	mixins: [ajaxError],
@@ -57,19 +65,6 @@ export default {
 			}
 			return classes;
 		},
-
-		/**
-		 * Add classes to the table when it is loading
-		 *
-		 * @return Array
-		 */
-		tableClasses() {
-			let classes = [];
-			if (this.isLoadingItems) {
-				classes.push('-isLoading');
-			}
-			return classes;
-		},
 	},
 	watch: {
 		activeFilters(newVal, oldVal) {
diff --git a/src/components/Container/StatsPublicationsPage.vue b/src/components/Container/StatsPublicationsPage.vue
index 4f9218fe3..994e71219 100644
--- a/src/components/Container/StatsPublicationsPage.vue
+++ b/src/components/Container/StatsPublicationsPage.vue
@@ -488,11 +488,12 @@ export default {
 		 * Set the orderBy and orderDirection values
 		 *
 		 * @param string orderBy What param to order by
-		 * @param boolean orderDirection true = DESC, false = ASC
 		 */
-		setOrderBy(orderBy, orderDirection) {
+		setOrderBy(orderBy) {
 			this.orderBy = orderBy;
-			this.orderDirection = orderDirection;
+
+			// Toggle the boolean value of orderDirection
+			this.orderDirection = !this.orderDirection;
 		},
 
 		/**
diff --git a/src/components/ListPanel/doi/DoiItemVersionModal.vue b/src/components/ListPanel/doi/DoiItemVersionModal.vue
index b92e9438e..58a29abdc 100644
--- a/src/components/ListPanel/doi/DoiItemVersionModal.vue
+++ b/src/components/ListPanel/doi/DoiItemVersionModal.vue
@@ -10,42 +10,50 @@
 				class="doiListItem__versionContainer"
 			>
 				<a
+					:id="versionHeaderId"
 					:href="version.urlPublished"
 					target="_blank"
 					rel="noopener noreferrer"
 				>
 					{{ getVersionHeader(version) }}
 				</a>
-				<PkpTable
-					:columns="doiListColumns"
-					:rows="
-						item.doiObjects.filter(
-							(doiObject) => doiObject.versionNumber === version.versionNumber,
-						)
-					"
-				>
-					<template #default="{row}">
-						<TableCell :column="doiListColumns[0]" :row="row">
-							<label
-								:for="row.uid"
-								v-bind:class="{labelDisabled: row.disabled}"
-							>
-								{{ row.displayType }}
-							</label>
-						</TableCell>
-						<TableCell :column="doiListColumns[1]" :row="row">
-							<input
-								:id="row.uid"
-								v-model="
-									mutableDois.find((doi) => doi.uid === row.uid).identifier
-								"
-								class="pkpFormField__input pkpFormField--text__input"
-								type="text"
-								:readonly="!(isEditingDois && !isSaving)"
-								:disabled="isEditingDois && row.disabled"
-							/>
-						</TableCell>
-					</template>
+				<PkpTable :labelled-by="versionHeaderId">
+					<TableHeader>
+						<TableColumn
+							v-for="column in doiListColumns"
+							:id="column.name"
+							:key="column.name"
+						>
+							{{ column.label }}
+						</TableColumn>
+					</TableHeader>
+					<TableBody>
+						<TableRow
+							v-for="row in item.doiObjects.filter(
+								(doiObject) =>
+									doiObject.versionNumber === version.versionNumber,
+							)"
+							:key="row.column"
+						>
+							<TableCell>
+								<label :for="row.uid" :class="{labelDisabled: row.disabled}">
+									{{ row.displayType }}
+								</label>
+							</TableCell>
+							<TableCell>
+								<input
+									:id="row.uid"
+									v-model="
+										mutableDois.find((doi) => doi.uid === row.uid).identifier
+									"
+									class="pkpFormField__input pkpFormField--text__input"
+									type="text"
+									:readonly="!(isEditingDois && !isSaving)"
+									:disabled="isEditingDois && row.disabled"
+								/>
+							</TableCell>
+						</TableRow>
+					</TableBody>
 				</PkpTable>
 				<span v-if="item.hasDisabled">
 					{{ item.hasDisabledMsg }}
@@ -73,11 +81,16 @@
 <script setup>
 import SideModalBody from '@/components/Modal/SideModalBody.vue';
 import SideModalLayoutBasic from '@/components/Modal/SideModalLayoutBasic.vue';
-import PkpTable from '@/components/Table/Table.vue';
-import TableCell from '@/components/Table/TableCell.vue';
+import PkpTable from '@/components/TableNext/Table.vue';
+import TableCell from '@/components/TableNext/TableCell.vue';
+import TableColumn from '@/components/TableNext/TableColumn.vue';
+import TableHeader from '@/components/TableNext/TableHeader.vue';
+import TableBody from '@/components/TableNext/TableBody.vue';
+import TableRow from '@/components/TableNext/TableRow.vue';
 import Spinner from '@/components/Spinner/Spinner.vue';
 import PkpButton from '@/components/Button/Button.vue';
 
+import {useId} from '@/composables/useId.js';
 import {useLocalize} from '@/composables/useLocalize';
 defineProps({
 	isSaving: {type: Boolean, required: false, default: false},
@@ -88,6 +101,8 @@ defineProps({
 	mutableDois: {type: Array, required: true},
 });
 const {t} = useLocalize();
+const {generateId} = useId();
+const versionHeaderId = generateId();
 
 const emit = defineEmits(['saveDois', 'editDois']);
 /**
diff --git a/src/components/ListPanel/doi/DoiListItem.vue b/src/components/ListPanel/doi/DoiListItem.vue
index dcc4e8aca..4ea00b61f 100644
--- a/src/components/ListPanel/doi/DoiListItem.vue
+++ b/src/components/ListPanel/doi/DoiListItem.vue
@@ -67,26 +67,37 @@
 			v-if="isExpanded"
 			class="listPanel__itemExpanded listPanel__itemExpanded--doi"
 		>
-			<PkpTable :columns="doiListColumns" :rows="currentVersionDoiObjects">
-				<template #default="{row}">
-					<TableCell :column="doiListColumns[0]" :row="row">
-						<label :for="row.uid" :class="{labelDisabled: row.disabled}">
-							{{ row.displayType }}
-						</label>
-					</TableCell>
-					<TableCell :column="doiListColumns[1]" :row="row">
-						<input
-							:id="row.uid"
-							v-model="
-								mutableDois.find((doi) => doi.uid === row.uid).identifier
-							"
-							class="pkpFormField__input pkpFormField--text__input"
-							type="text"
-							:readonly="!(isEditingDois && !isSaving)"
-							:disabled="isEditingDois && row.disabled"
-						/>
-					</TableCell>
-				</template>
+			<PkpTable>
+				<TableHeader>
+					<TableColumn
+						v-for="column in doiListColumns"
+						:id="column.name"
+						:key="column.name"
+					>
+						{{ column.label }}
+					</TableColumn>
+				</TableHeader>
+				<TableBody>
+					<TableRow v-for="row in currentVersionDoiObjects" :key="row.column">
+						<TableCell>
+							<label :for="row.uid" :class="{labelDisabled: row.disabled}">
+								{{ row.displayType }}
+							</label>
+						</TableCell>
+						<TableCell>
+							<input
+								:id="row.uid"
+								v-model="
+									mutableDois.find((doi) => doi.uid === row.uid).identifier
+								"
+								class="pkpFormField__input pkpFormField--text__input"
+								type="text"
+								:readonly="!(isEditingDois && !isSaving)"
+								:disabled="isEditingDois && row.disabled"
+							/>
+						</TableCell>
+					</TableRow>
+				</TableBody>
 			</PkpTable>
 			<span v-if="item.hasDisabled">
 				{{ item.hasDisabledMsg }}
@@ -186,8 +197,12 @@ import Spinner from '@/components/Spinner/Spinner.vue';
 import PkpButton from '@/components/Button/Button.vue';
 
 import Expander from '@/components/Expander/Expander.vue';
-import PkpTable from '@/components/Table/Table.vue';
-import TableCell from '@/components/Table/TableCell.vue';
+import PkpTable from '@/components/TableNext/Table.vue';
+import TableCell from '@/components/TableNext/TableCell.vue';
+import TableColumn from '@/components/TableNext/TableColumn.vue';
+import TableHeader from '@/components/TableNext/TableHeader.vue';
+import TableBody from '@/components/TableNext/TableBody.vue';
+import TableRow from '@/components/TableNext/TableRow.vue';
 import DoiItemViewErrorDialogBody from './DoiItemViewErrorDialogBody.vue';
 import DoiItemViewRegisteredMessageDialogBody from './DoiItemViewRegisteredMessageDialogBody.vue';
 import DoiItemVersionModal from './DoiItemVersionModal.vue';
@@ -202,6 +217,10 @@ export default {
 		Expander,
 		PkpTable,
 		TableCell,
+		TableColumn,
+		TableHeader,
+		TableBody,
+		TableRow,
 	},
 	props: {
 		apiUrl: {
diff --git a/src/components/TableNext/Table.stories.js b/src/components/TableNext/Table.stories.js
index 218972440..8c470aa16 100644
--- a/src/components/TableNext/Table.stories.js
+++ b/src/components/TableNext/Table.stories.js
@@ -11,7 +11,7 @@ import TablePagination from './TablePagination.vue';
 import ButtonRow from '@/components/ButtonRow/ButtonRow.vue';
 import {http, HttpResponse} from 'msw';
 
-import articleStats from '@/components/Table/mocks/articleStats.js';
+import articleStats from '@/components/TableNext/mocks/articleStats.js';
 import {useSorting} from '@/composables/useSorting';
 
 import {useFetchPaginated} from '@/composables/useFetchPaginated';
@@ -220,3 +220,65 @@ export const WithPagination = {
 
 	args: {},
 };
+
+export const WithTitleAndDescription = {
+	render: (args) => ({
+		components: {
+			PkpTable,
+			TableHeader,
+			TableBody,
+			TableRow,
+			TableColumn,
+			TableCell,
+			PkpButton,
+		},
+		setup() {
+			const rows = articleStats.slice(0, 10);
+
+			return {args, rows};
+		},
+		template: `
+			<PkpTable>
+				<template #label>
+					View Failed Jobs
+				</template>
+				<template #description>
+					There's a total of <strong>7</strong> failed job(s).
+				</template>
+				<template #top-controls>
+					<PkpButton>Requeue All Failed Jobs</PkpButton>
+				</template>
+				<TableHeader>
+					<TableColumn>ID</TableColumn>
+					<TableColumn>Title</TableColumn>
+					<TableColumn>Views</TableColumn>
+					<TableColumn>Downloads</TableColumn>
+					<TableColumn>Total</TableColumn>
+					<TableColumn>Action</TableColumn>
+				</TableHeader>
+				<TableBody>
+					<TableRow v-for="row in rows" :key="row.object.id">
+						<TableCell>{{ row.object.id }}</TableCell>
+						<TableCell :is-row-header="true">
+							{{ row.object.fullTitle.en }}
+						</TableCell>
+						<TableCell>{{ row.views }}</TableCell>
+						<TableCell>{{ row.downloads }}</TableCell>
+						<TableCell>
+							<button @click="open(row)">{{ row.total }}</button>
+						</TableCell>
+						<TableCell>
+							<PkpButton size-variant="compact" >View</PkpButton>
+						</TableCell>
+
+					</TableRow>
+				</TableBody>
+				<template #bottom-controls>
+					<PkpButton :is-link="true">Download All Files</PkpButton>
+				</template>
+			</PkpTable>
+		`,
+	}),
+
+	args: {},
+};
diff --git a/src/components/TableNext/Table.vue b/src/components/TableNext/Table.vue
index 0f3e2f110..e36913982 100644
--- a/src/components/TableNext/Table.vue
+++ b/src/components/TableNext/Table.vue
@@ -1,14 +1,37 @@
 <template>
+	<div
+		v-if="slots.label || slots.description || slots['top-controls']"
+		class="flex justify-between bg-default p-4"
+	>
+		<div v-if="slots.label || slots.description">
+			<span v-if="slots.label" :id="labelId" class="text-xl-bold">
+				<slot name="label" />
+			</span>
+			<div v-if="slots.description" :id="descriptionId">
+				<slot name="description" />
+			</div>
+		</div>
+		<div v-if="slots['top-controls']">
+			<slot name="top-controls" />
+		</div>
+	</div>
 	<table
-		class="w-full max-w-full border-separate border-spacing-0"
-		:aria-label="ariaLabel"
+		class="pkpTable w-full max-w-full border-separate border-spacing-0"
+		:aria-labelledby="labelledBy ?? (slots.label ? labelId : null)"
+		:aria-describedby="
+			describedBy ?? (slots.description ? descriptionId : null)
+		"
 	>
 		<slot />
 	</table>
+	<div v-if="slots['bottom-controls']" class="flex justify-between py-4">
+		<slot name="bottom-controls" />
+	</div>
 </template>
 
 <script setup>
-import {provide, toRefs, defineEmits, ref} from 'vue';
+import {provide, toRefs, defineEmits, ref, useSlots} from 'vue';
+import {useId} from '@/composables/useId.js';
 
 const emit = defineEmits([
 	/**
@@ -23,7 +46,11 @@ function onSort(columnId) {
 
 const props = defineProps({
 	/** Table description for screen reader users */
-	ariaLabel: {type: String, required: true},
+	ariaLabel: {type: String, default: null},
+	/** This value will be used as the `aria-labelledby` attribute for the table if there's no slot/template "label" provided. */
+	labelledBy: {type: String, default: null},
+	/** This value will be used as the `aria-describedby` attribute for the table if there's no slot/template "description" provided. */
+	describedBy: {type: String, default: null},
 	/**
 	 * {column: String, direction: String}, use useSorting composable to control sortDescriptor
 	 */
@@ -40,5 +67,11 @@ const tableContext = {
 	columnsCount,
 };
 
+const slots = useSlots();
+
+const {generateId} = useId();
+const labelId = slots.label ? generateId() : null;
+const descriptionId = slots.description ? generateId() : null;
+
 provide('tableContext', tableContext);
 </script>
diff --git a/src/components/TableNext/TableBody.vue b/src/components/TableNext/TableBody.vue
index 2ed431757..aa96fad31 100644
--- a/src/components/TableNext/TableBody.vue
+++ b/src/components/TableNext/TableBody.vue
@@ -1,12 +1,13 @@
 <template>
 	<tbody class="">
 		<slot></slot>
-		<tr v-if="noContent" class="">
+		<tr v-if="noContent">
 			<td
 				:colspan="tableContext.columnsCount.value"
-				class="border-x border-b border-light p-4 text-center text-base-normal"
+				class="border-x border-b border-light p-5 text-base-normal"
 			>
-				{{ emptyText }}
+				<slot v-if="slots['no-content']" name="no-content" />
+				<span v-else>{{ emptyText }}</span>
 			</td>
 		</tr>
 	</tbody>
diff --git a/src/components/TableNext/mocks/articleStats.js b/src/components/TableNext/mocks/articleStats.js
new file mode 100644
index 000000000..1815c5e19
--- /dev/null
+++ b/src/components/TableNext/mocks/articleStats.js
@@ -0,0 +1,893 @@
+function getRandomTitle(str) {
+	let title = str
+		.split(' ')
+		.sort((a, b) => (Math.random() > 0.5 ? -1 : 1))
+		.join(' ');
+	const trimLength = Math.floor(Math.random() * 20);
+	title = title.charAt(0).toUpperCase() + title.slice(1);
+	return title.substr(0, title.length - trimLength);
+}
+
+const baseTitle =
+	'tortor ultrices dolor diam dignissim ante nulla et morbi imperdiet';
+const sectionIds = [1, 2, 3];
+const baseStat = {
+	total: 0,
+	views: 0,
+	downloads: 0,
+	object: {
+		id: 1,
+		fullTitle: {
+			en: getRandomTitle(baseTitle),
+		},
+		sectionId: 1,
+		authorString: 'Carlo Corino',
+		urlPublished: '/example/1',
+	},
+};
+
+let stats = [];
+for (let i = 1; i < 61; i++) {
+	let stat = {
+		...baseStat,
+		object: {
+			...baseStat.object,
+			id: i,
+			fullTitle: {
+				en: getRandomTitle(baseTitle),
+			},
+			sectionId: sectionIds[Math.floor(Math.random() * sectionIds.length)],
+		},
+		views: Math.floor(Math.random() * 10000) + 1,
+		downloads: Math.floor(Math.random() * 1000) + 1,
+	};
+
+	stat.total = stat.views + stat.downloads;
+
+	stats.push(stat);
+}
+
+// use fixed stats to stabilize visual comparisons
+stats = [
+	{
+		total: 8564,
+		views: 7945,
+		downloads: 619,
+		object: {
+			id: 1,
+			fullTitle: {
+				en: 'Nulla et ultrices tortor imperdiet ante diam dignissim',
+			},
+			sectionId: 3,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 1170,
+		views: 560,
+		downloads: 610,
+		object: {
+			id: 2,
+			fullTitle: {
+				en: 'Ante dignissim imperdiet diam dolor ultrices et null',
+			},
+			sectionId: 1,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 9607,
+		views: 9392,
+		downloads: 215,
+		object: {
+			id: 3,
+			fullTitle: {
+				en: 'Nulla imperdiet ultrices et dignissim tortor morbi d',
+			},
+			sectionId: 3,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 3453,
+		views: 2732,
+		downloads: 721,
+		object: {
+			id: 4,
+			fullTitle: {
+				en: 'Et morbi nulla dignissim tortor ante diam dolor u',
+			},
+			sectionId: 1,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 2541,
+		views: 1782,
+		downloads: 759,
+		object: {
+			id: 5,
+			fullTitle: {
+				en: 'Nulla dignissim tortor ante et ultrices morbi dolor diam ',
+			},
+			sectionId: 1,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 5116,
+		views: 4512,
+		downloads: 604,
+		object: {
+			id: 6,
+			fullTitle: {
+				en: 'Ultrices nulla tortor morbi ante dignissim dolo',
+			},
+			sectionId: 2,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 7468,
+		views: 6697,
+		downloads: 771,
+		object: {
+			id: 7,
+			fullTitle: {
+				en: 'Nulla ante dignissim diam imperdiet morbi dolor ultrices tortor e',
+			},
+			sectionId: 2,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 3678,
+		views: 3450,
+		downloads: 228,
+		object: {
+			id: 8,
+			fullTitle: {
+				en: 'Morbi ante tortor imperdiet ultrices nulla dignissim dolor et dia',
+			},
+			sectionId: 1,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 1421,
+		views: 937,
+		downloads: 484,
+		object: {
+			id: 9,
+			fullTitle: {
+				en: 'Nulla tortor ultrices diam imperdiet et dignissim morbi dolor ',
+			},
+			sectionId: 2,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 7490,
+		views: 6772,
+		downloads: 718,
+		object: {
+			id: 10,
+			fullTitle: {
+				en: 'Diam dolor imperdiet dignissim morbi et tortor ultrices nulla ante',
+			},
+			sectionId: 1,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 2440,
+		views: 1904,
+		downloads: 536,
+		object: {
+			id: 11,
+			fullTitle: {
+				en: 'Tortor nulla diam imperdiet dolor ante et ultrices mor',
+			},
+			sectionId: 3,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 3924,
+		views: 3714,
+		downloads: 210,
+		object: {
+			id: 12,
+			fullTitle: {
+				en: 'Dignissim diam ante morbi dolor ultrices nulla imperdiet et ',
+			},
+			sectionId: 1,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 2425,
+		views: 2329,
+		downloads: 96,
+		object: {
+			id: 13,
+			fullTitle: {
+				en: 'Nulla imperdiet et dolor ultrices diam dignissim tortor ant',
+			},
+			sectionId: 2,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 10104,
+		views: 9617,
+		downloads: 487,
+		object: {
+			id: 14,
+			fullTitle: {
+				en: 'Dignissim ante diam tortor imperdiet ultrices nulla',
+			},
+			sectionId: 1,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 1205,
+		views: 1053,
+		downloads: 152,
+		object: {
+			id: 15,
+			fullTitle: {
+				en: 'Diam dolor et nulla ultrices ante morbi imperdiet digni',
+			},
+			sectionId: 3,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 1389,
+		views: 1345,
+		downloads: 44,
+		object: {
+			id: 16,
+			fullTitle: {
+				en: 'Ante dolor et imperdiet diam dignissim tortor ultr',
+			},
+			sectionId: 1,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 5861,
+		views: 5300,
+		downloads: 561,
+		object: {
+			id: 17,
+			fullTitle: {
+				en: 'Nulla tortor dolor et dignissim diam ultrices ante morbi i',
+			},
+			sectionId: 1,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 2914,
+		views: 2125,
+		downloads: 789,
+		object: {
+			id: 18,
+			fullTitle: {
+				en: 'Diam nulla tortor ante dolor et ultrices morbi imperdiet dig',
+			},
+			sectionId: 2,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 5439,
+		views: 4950,
+		downloads: 489,
+		object: {
+			id: 19,
+			fullTitle: {
+				en: 'Tortor nulla ultrices dolor ante dignissim morbi diam imperdiet',
+			},
+			sectionId: 3,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 6822,
+		views: 6723,
+		downloads: 99,
+		object: {
+			id: 20,
+			fullTitle: {
+				en: 'Ultrices nulla et dolor ante dignissim morbi tortor imp',
+			},
+			sectionId: 1,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 2535,
+		views: 2262,
+		downloads: 273,
+		object: {
+			id: 21,
+			fullTitle: {
+				en: 'Tortor morbi nulla ante ultrices diam dolor et imperdiet',
+			},
+			sectionId: 2,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 3319,
+		views: 2988,
+		downloads: 331,
+		object: {
+			id: 22,
+			fullTitle: {
+				en: 'Diam ante dolor dignissim nulla morbi et imperdiet ultrices tort',
+			},
+			sectionId: 1,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 891,
+		views: 475,
+		downloads: 416,
+		object: {
+			id: 23,
+			fullTitle: {
+				en: 'Tortor et morbi ante diam ultrices dolor dignissim imperdiet ',
+			},
+			sectionId: 2,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 5976,
+		views: 5882,
+		downloads: 94,
+		object: {
+			id: 24,
+			fullTitle: {
+				en: 'Et nulla imperdiet ante tortor morbi diam ultrices digniss',
+			},
+			sectionId: 2,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 9086,
+		views: 9076,
+		downloads: 10,
+		object: {
+			id: 25,
+			fullTitle: {
+				en: 'Diam imperdiet ante nulla morbi tortor dignissim et ultrices d',
+			},
+			sectionId: 3,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 5547,
+		views: 4979,
+		downloads: 568,
+		object: {
+			id: 26,
+			fullTitle: {
+				en: 'Morbi ultrices dolor tortor dignissim ante et imperdiet d',
+			},
+			sectionId: 3,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 3019,
+		views: 2223,
+		downloads: 796,
+		object: {
+			id: 27,
+			fullTitle: {
+				en: 'Diam dolor ultrices tortor dignissim ante et nulla morbi imperdi',
+			},
+			sectionId: 2,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 3078,
+		views: 2595,
+		downloads: 483,
+		object: {
+			id: 28,
+			fullTitle: {
+				en: 'Ante nulla diam dolor morbi ultrices dignissim tortor et i',
+			},
+			sectionId: 3,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 7242,
+		views: 6650,
+		downloads: 592,
+		object: {
+			id: 29,
+			fullTitle: {
+				en: 'Nulla dignissim tortor ultrices et ante diam do',
+			},
+			sectionId: 3,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 10052,
+		views: 9717,
+		downloads: 335,
+		object: {
+			id: 30,
+			fullTitle: {
+				en: 'Tortor ultrices nulla ante dolor dignissim et morbi imperdiet d',
+			},
+			sectionId: 3,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 6362,
+		views: 5870,
+		downloads: 492,
+		object: {
+			id: 31,
+			fullTitle: {
+				en: 'Tortor ultrices morbi ante imperdiet et dolor n',
+			},
+			sectionId: 1,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 6481,
+		views: 5833,
+		downloads: 648,
+		object: {
+			id: 32,
+			fullTitle: {
+				en: 'Tortor ante morbi ultrices dolor diam et imperdiet nulla digni',
+			},
+			sectionId: 3,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 1250,
+		views: 537,
+		downloads: 713,
+		object: {
+			id: 33,
+			fullTitle: {
+				en: 'Ante imperdiet diam dignissim dolor et ultrices tortor nulla mo',
+			},
+			sectionId: 1,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 2149,
+		views: 1463,
+		downloads: 686,
+		object: {
+			id: 34,
+			fullTitle: {
+				en: 'Ante diam dolor nulla ultrices dignissim et tortor imperdiet morbi',
+			},
+			sectionId: 2,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 2067,
+		views: 1855,
+		downloads: 212,
+		object: {
+			id: 35,
+			fullTitle: {
+				en: 'Tortor imperdiet morbi ultrices dignissim diam ',
+			},
+			sectionId: 3,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 9446,
+		views: 8582,
+		downloads: 864,
+		object: {
+			id: 36,
+			fullTitle: {
+				en: 'Tortor ultrices dolor dignissim morbi diam nulla et',
+			},
+			sectionId: 1,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 4692,
+		views: 4453,
+		downloads: 239,
+		object: {
+			id: 37,
+			fullTitle: {
+				en: 'Diam tortor imperdiet ante et ultrices dignissim morbi ',
+			},
+			sectionId: 3,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 4901,
+		views: 4775,
+		downloads: 126,
+		object: {
+			id: 38,
+			fullTitle: {
+				en: 'Dolor ante nulla ultrices et diam tortor morbi dignissim imp',
+			},
+			sectionId: 1,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 4945,
+		views: 4803,
+		downloads: 142,
+		object: {
+			id: 39,
+			fullTitle: {
+				en: 'Nulla ultrices morbi et dignissim tortor imperdiet dolor ante ',
+			},
+			sectionId: 3,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 5948,
+		views: 5088,
+		downloads: 860,
+		object: {
+			id: 40,
+			fullTitle: {
+				en: 'Ultrices dolor morbi diam ante tortor imperdiet nulla et dignis',
+			},
+			sectionId: 2,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 5239,
+		views: 4731,
+		downloads: 508,
+		object: {
+			id: 41,
+			fullTitle: {
+				en: 'Dignissim nulla imperdiet dolor morbi ante diam ultr',
+			},
+			sectionId: 3,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 6611,
+		views: 6304,
+		downloads: 307,
+		object: {
+			id: 42,
+			fullTitle: {
+				en: 'Diam nulla dolor imperdiet tortor ante ultrices et morbi dignissi',
+			},
+			sectionId: 2,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 6626,
+		views: 5827,
+		downloads: 799,
+		object: {
+			id: 43,
+			fullTitle: {
+				en: 'Ante et dignissim imperdiet tortor morbi ultrices diam ',
+			},
+			sectionId: 1,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 8275,
+		views: 7685,
+		downloads: 590,
+		object: {
+			id: 44,
+			fullTitle: {
+				en: 'Dignissim et diam nulla dolor morbi ultrices imperdiet ante t',
+			},
+			sectionId: 3,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 6467,
+		views: 5609,
+		downloads: 858,
+		object: {
+			id: 45,
+			fullTitle: {
+				en: 'Tortor ultrices et nulla dignissim morbi imperdiet diam a',
+			},
+			sectionId: 1,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 680,
+		views: 349,
+		downloads: 331,
+		object: {
+			id: 46,
+			fullTitle: {
+				en: 'Dolor ante nulla dignissim morbi et diam imperdiet ',
+			},
+			sectionId: 3,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 10596,
+		views: 9906,
+		downloads: 690,
+		object: {
+			id: 47,
+			fullTitle: {
+				en: 'Nulla diam dolor ultrices tortor imperdiet et digniss',
+			},
+			sectionId: 1,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 4319,
+		views: 4233,
+		downloads: 86,
+		object: {
+			id: 48,
+			fullTitle: {
+				en: 'Et ultrices ante diam morbi tortor nulla digniss',
+			},
+			sectionId: 1,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 5177,
+		views: 4344,
+		downloads: 833,
+		object: {
+			id: 49,
+			fullTitle: {
+				en: 'Imperdiet dignissim morbi nulla diam dolor ultrices ante et',
+			},
+			sectionId: 3,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 3156,
+		views: 2966,
+		downloads: 190,
+		object: {
+			id: 50,
+			fullTitle: {
+				en: 'Ultrices ante morbi nulla dolor tortor diam imperdiet',
+			},
+			sectionId: 3,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 2808,
+		views: 2117,
+		downloads: 691,
+		object: {
+			id: 51,
+			fullTitle: {
+				en: 'Nulla tortor ante et ultrices imperdiet diam dolor dignis',
+			},
+			sectionId: 2,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 2327,
+		views: 1581,
+		downloads: 746,
+		object: {
+			id: 52,
+			fullTitle: {
+				en: 'Dolor et ultrices diam dignissim tortor nulla ante imperdiet morb',
+			},
+			sectionId: 1,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 711,
+		views: 310,
+		downloads: 401,
+		object: {
+			id: 53,
+			fullTitle: {
+				en: 'Nulla morbi ante tortor imperdiet et ultrices dignissim dolor ',
+			},
+			sectionId: 2,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 5100,
+		views: 5015,
+		downloads: 85,
+		object: {
+			id: 54,
+			fullTitle: {
+				en: 'Diam et ultrices ante morbi dignissim tortor dolor imperdiet ',
+			},
+			sectionId: 1,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 6647,
+		views: 6104,
+		downloads: 543,
+		object: {
+			id: 55,
+			fullTitle: {
+				en: 'Et diam tortor imperdiet morbi dolor dignissim ante nulla ultr',
+			},
+			sectionId: 1,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 9420,
+		views: 9240,
+		downloads: 180,
+		object: {
+			id: 56,
+			fullTitle: {
+				en: 'Tortor ultrices imperdiet dolor nulla dignissim morbi d',
+			},
+			sectionId: 3,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 3323,
+		views: 2562,
+		downloads: 761,
+		object: {
+			id: 57,
+			fullTitle: {
+				en: 'Et tortor nulla imperdiet morbi ultrices dolor diam dig',
+			},
+			sectionId: 3,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 1466,
+		views: 569,
+		downloads: 897,
+		object: {
+			id: 58,
+			fullTitle: {
+				en: 'Morbi dolor ultrices diam et imperdiet ante tortor dignissim',
+			},
+			sectionId: 1,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 3115,
+		views: 2861,
+		downloads: 254,
+		object: {
+			id: 59,
+			fullTitle: {
+				en: 'Tortor ultrices morbi imperdiet dolor diam nulla et ',
+			},
+			sectionId: 1,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+	{
+		total: 3050,
+		views: 2500,
+		downloads: 550,
+		object: {
+			id: 60,
+			fullTitle: {
+				en: 'Ante nulla et tortor morbi ultrices dolor diam imperdiet digniss',
+			},
+			sectionId: 1,
+			authorString: 'Carlo Corino',
+			urlPublished: '/example/1',
+		},
+	},
+];
+export default stats;
diff --git a/src/components/TableNext/mocks/articleStatsColumns.js b/src/components/TableNext/mocks/articleStatsColumns.js
new file mode 100644
index 000000000..6f1186f3f
--- /dev/null
+++ b/src/components/TableNext/mocks/articleStatsColumns.js
@@ -0,0 +1,54 @@
+export default [
+	{
+		name: 'id',
+		label: 'ID',
+		value(row) {
+			return row.object.id;
+		},
+	},
+	{
+		name: 'title',
+		label: 'Title',
+		isRowHeader: true,
+		value(row) {
+			return row.object.fullTitle.en;
+		},
+	},
+	{
+		name: 'author',
+		label: 'Contributors',
+		value(row) {
+			return row.object.authorString;
+		},
+	},
+	{
+		name: 'abstractViews',
+		label: 'Abstract Views',
+		value: 'abstractViews',
+	},
+	{
+		name: 'galleyViews',
+		label: 'Galley Views',
+		value: 'galleyViews',
+	},
+	{
+		name: 'pdf',
+		label: 'PDF',
+		value: 'pdf',
+	},
+	{
+		name: 'html',
+		label: 'HTML',
+		value: 'html',
+	},
+	{
+		name: 'other',
+		label: 'Other',
+		value: 'other',
+	},
+	{
+		name: 'total',
+		label: 'Total',
+		value: 'total',
+	},
+];
diff --git a/src/pages/jobs/FailedJobDetailsPage.vue b/src/pages/jobs/FailedJobDetailsPage.vue
new file mode 100644
index 000000000..4936225f7
--- /dev/null
+++ b/src/pages/jobs/FailedJobDetailsPage.vue
@@ -0,0 +1,61 @@
+<template>
+	<PkpTable>
+		<template v-if="label" #label>
+			<span v-html="label"></span>
+		</template>
+		<TableHeader>
+			<TableColumn
+				v-for="column in columns"
+				:id="column.name"
+				:key="column.name"
+			>
+				{{ column.label }}
+			</TableColumn>
+		</TableHeader>
+		<TableBody>
+			<TableRow v-for="row in rows" :key="row.key">
+				<TableCell>{{ row.attribute }}</TableCell>
+				<TableCell>
+					<span>
+						<pre>{{ row.value }}</pre>
+					</span>
+				</TableCell>
+			</TableRow>
+		</TableBody>
+	</PkpTable>
+</template>
+
+<script>
+import PkpTable from '@/components/TableNext/Table.vue';
+import TableCell from '@/components/TableNext/TableCell.vue';
+import TableColumn from '@/components/TableNext/TableColumn.vue';
+import TableHeader from '@/components/TableNext/TableHeader.vue';
+import TableBody from '@/components/TableNext/TableBody.vue';
+import TableRow from '@/components/TableNext/TableRow.vue';
+
+export default {
+	name: 'FailedJobDetailsPage',
+	components: {
+		PkpTable,
+		TableCell,
+		TableColumn,
+		TableHeader,
+		TableBody,
+		TableRow,
+	},
+	props: {
+		label: {
+			type: String,
+			default: '',
+		},
+		columns: {
+			type: Array,
+			default: () => [],
+		},
+		rows: {
+			type: Array,
+			default: () => [],
+		},
+	},
+};
+</script>
diff --git a/src/pages/jobs/FailedJobsPage.vue b/src/pages/jobs/FailedJobsPage.vue
new file mode 100644
index 000000000..8dc06805b
--- /dev/null
+++ b/src/pages/jobs/FailedJobsPage.vue
@@ -0,0 +1,135 @@
+<template>
+	<PkpTable>
+		<template v-if="label" #label>
+			<span v-html="label"></span>
+		</template>
+		<template v-if="description" #description>
+			<span v-html="description"></span>
+		</template>
+		<template v-if="total > 0" #top-controls>
+			<Spinner v-if="isLoadingItems"></Spinner>
+			<PkpButton @click="requeueAll">
+				{{ t('admin.jobs.failed.action.redispatch.all') }}
+			</PkpButton>
+		</template>
+		<TableHeader>
+			<TableColumn
+				v-for="column in columns"
+				:id="column.name"
+				:key="column.name"
+			>
+				{{ column.label }}
+			</TableColumn>
+		</TableHeader>
+		<TableBody>
+			<TableRow v-for="row in rows" :key="row.key">
+				<TableCell>{{ row.id }}</TableCell>
+				<TableCell>{{ row.displayName }}</TableCell>
+				<TableCell>{{ row.queue }}</TableCell>
+				<TableCell>{{ row.connection }}</TableCell>
+				<TableCell>{{ row.failed_at }}</TableCell>
+				<TableCell>
+					<ButtonRow>
+						<PkpButton @click="redispatch(row)">
+							{{ t('admin.jobs.failed.action.redispatch') }}
+						</PkpButton>
+						<PkpButton is-warnable @click="remove(row)">
+							{{ t('common.delete') }}
+						</PkpButton>
+						<PkpButton element="a" is-link :href="row._hrefs._details">
+							{{ t('common.details') }}
+						</PkpButton>
+					</ButtonRow>
+				</TableCell>
+			</TableRow>
+		</TableBody>
+	</PkpTable>
+
+	<Pagination
+		v-if="lastPage > 1"
+		:current-page="currentPage"
+		:last-page="lastPage"
+		:is-loading="isLoadingItems"
+		@set-page="handlePagination"
+	/>
+</template>
+<script>
+import JobsPageBase from './JobsPageBase.vue';
+import PkpTable from '@/components/TableNext/Table.vue';
+import TableHeader from '@/components/TableNext/TableHeader.vue';
+import TableColumn from '@/components/TableNext/TableColumn.vue';
+import TableBody from '@/components/TableNext/TableBody.vue';
+import TableRow from '@/components/TableNext/TableRow.vue';
+import TableCell from '@/components/TableNext/TableCell.vue';
+import Pagination from '@/components/Pagination/Pagination.vue';
+import ButtonRow from '@/components/ButtonRow/ButtonRow.vue';
+import Spinner from '@/components/Spinner/Spinner.vue';
+import PkpButton from '@/components/Button/Button.vue';
+
+export default {
+	name: 'FailedJobsPage',
+	components: {
+		PkpTable,
+		TableHeader,
+		TableColumn,
+		TableBody,
+		TableRow,
+		TableCell,
+		Pagination,
+		ButtonRow,
+		Spinner,
+		PkpButton,
+	},
+	extends: JobsPageBase,
+	methods: {
+		removeJob(data) {
+			this.rows = this.rows.filter((row) => row.id !== data.id);
+			this.total = this.total - 1;
+		},
+		redispatch(data) {
+			$.ajax({
+				url: data._hrefs._redispatch,
+				type: 'POST',
+				headers: {
+					'X-Csrf-Token': pkp.currentUser.csrfToken,
+				},
+				error: this.ajaxErrorCallback,
+				success: (response) => {
+					pkp.eventBus.$emit('notify', response.message, 'success');
+					this.removeJob(data);
+				},
+			});
+		},
+		remove(data) {
+			$.ajax({
+				url: data._hrefs._delete,
+				type: 'POST',
+				headers: {
+					'X-Csrf-Token': pkp.currentUser.csrfToken,
+					'X-Http-Method-Override': 'DELETE',
+				},
+				error: this.ajaxErrorCallback,
+				success: (response) => {
+					pkp.eventBus.$emit('notify', response.message, 'success');
+					this.removeJob(data);
+				},
+			});
+		},
+		requeueAll() {
+			this.isLoadingItems = true;
+			$.ajax({
+				url: this.apiUrlRedispatchAll,
+				type: 'POST',
+				headers: {
+					'X-Csrf-Token': pkp.currentUser.csrfToken,
+				},
+				error: this.ajaxErrorCallback,
+				success: (response) => {
+					pkp.eventBus.$emit('notify', response.message, 'success');
+					this.loadList(1);
+				},
+			});
+		},
+	},
+};
+</script>
diff --git a/src/pages/jobs/JobsPage.vue b/src/pages/jobs/JobsPage.vue
new file mode 100644
index 000000000..442006a50
--- /dev/null
+++ b/src/pages/jobs/JobsPage.vue
@@ -0,0 +1,61 @@
+<template>
+	<PkpTable>
+		<template v-if="label" #label>
+			<span v-html="label"></span>
+		</template>
+		<template v-if="description" #description>
+			<span v-html="description"></span>
+		</template>
+		<TableHeader>
+			<TableColumn
+				v-for="column in columns"
+				:id="column.name"
+				:key="column.name"
+			>
+				{{ column.label }}
+			</TableColumn>
+		</TableHeader>
+		<TableBody>
+			<TableRow v-for="row in rows" :key="row.key">
+				<TableCell>{{ row.id }}</TableCell>
+				<TableCell>{{ row.displayName }}</TableCell>
+				<TableCell>{{ row.queue }}</TableCell>
+				<TableCell>{{ row.attempts }}</TableCell>
+				<TableCell>{{ row.created_at }}</TableCell>
+			</TableRow>
+		</TableBody>
+	</PkpTable>
+
+	<Pagination
+		v-if="lastPage > 1"
+		:current-page="currentPage"
+		:last-page="lastPage"
+		:is-loading="isLoadingItems"
+		@set-page="handlePagination"
+	/>
+</template>
+
+<script>
+import JobsPageBase from './JobsPageBase.vue';
+import PkpTable from '@/components/TableNext/Table.vue';
+import TableHeader from '@/components/TableNext/TableHeader.vue';
+import TableColumn from '@/components/TableNext/TableColumn.vue';
+import TableBody from '@/components/TableNext/TableBody.vue';
+import TableRow from '@/components/TableNext/TableRow.vue';
+import TableCell from '@/components/TableNext/TableCell.vue';
+import Pagination from '@/components/Pagination/Pagination.vue';
+
+export default {
+	name: 'JobsPage',
+	components: {
+		PkpTable,
+		TableHeader,
+		TableColumn,
+		TableBody,
+		TableRow,
+		TableCell,
+		Pagination,
+	},
+	extends: JobsPageBase,
+};
+</script>
diff --git a/src/components/Container/JobsPage.vue b/src/pages/jobs/JobsPageBase.vue
similarity index 75%
rename from src/components/Container/JobsPage.vue
rename to src/pages/jobs/JobsPageBase.vue
index 6a7bbb975..4f0d12077 100644
--- a/src/components/Container/JobsPage.vue
+++ b/src/pages/jobs/JobsPageBase.vue
@@ -1,28 +1,38 @@
 <script>
-import Page from './Page.vue';
-import Pagination from '@/components/Pagination/Pagination.vue';
-import PkpTable from '@/components/Table/Table.vue';
 import ajaxError from '@/mixins/ajaxError';
 
 export default {
-	name: 'JobsPage',
-	components: {
-		PkpTable,
-		Pagination,
-	},
-	extends: Page,
+	name: 'JobsPageBase',
 	mixins: [ajaxError],
+	props: {
+		label: {
+			type: String,
+			default: '',
+		},
+		i18nDescription: {
+			type: String,
+			default: '',
+		},
+		columns: {
+			type: Array,
+			default: () => [],
+		},
+		apiUrl: {
+			type: String,
+			default: null,
+		},
+		apiUrlRedispatchAll: {
+			type: String,
+			default: null,
+		},
+	},
 	data() {
 		return {
-			i18nDescription: '',
-			columns: [],
 			rows: [],
-			label: '',
 			total: 0,
 			currentPage: 1,
 			lastPage: 1,
 			isLoadingItems: false,
-			apiUrl: null,
 		};
 	},
 	computed: {