diff --git a/src/components/About.tsx b/src/components/About.tsx
index 2756cdcb3e..396a356758 100644
--- a/src/components/About.tsx
+++ b/src/components/About.tsx
@@ -1,18 +1,15 @@
 import { useEffect, useState } from "react";
-import Header from "./Header";
-import NavBar from "./NavBar";
-import Footer from "./Footer";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router";
 import axios from "axios";
 import i18n from "../i18n/i18n";
 import DOMPurify from "dompurify";
+import MainPage from "./shared/MainPage";
 
 const About = () => {
 	const { t } = useTranslation();
 	const location = useLocation();
 
-	const [displayNavigation, setNavigation] = useState(false);
 	const [aboutContent, setAboutContent] = useState<string>("");
 
 	useEffect(() => {
@@ -35,34 +32,29 @@ const About = () => {
 						setAboutContent(t("ABOUT.NOCONTENT").toString());
 					});
 			});
-           // eslint-disable-next-line react-hooks/exhaustive-deps
+	// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [location.pathname]); // Listen to changes in pathname
 
+
 	return (
-		<span>
-			<Header />
-			<NavBar
-				displayNavigation={displayNavigation}
-				setNavigation={setNavigation}
-				links={[
-					{
-						path: "/about/imprint",
-						accessRole: "ROLE_UI_USERS_VIEW",
-						text: "ABOUT.IMPRINT",
-					},
-					{
-						path: "/about/privacy",
-						accessRole: "ROLE_UI_GROUPS_VIEW",
-						text: "ABOUT.PRIVACY",
-					},
-				]}
-			>
-			</NavBar>
+		<MainPage
+			navBarLinks={[
+				{
+					path: "/about/imprint",
+					accessRole: "ROLE_UI_USERS_VIEW",
+					text: "ABOUT.IMPRINT",
+				},
+				{
+					path: "/about/privacy",
+					accessRole: "ROLE_UI_GROUPS_VIEW",
+					text: "ABOUT.PRIVACY",
+				},
+			]}
+		>
 			<div className="about">
 				<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(aboutContent) }} ></div>
 			</div>
-			<Footer />
-		</span>
+		</MainPage>
 	);
 };
 
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index c8ed1a177b..4d04761a44 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -14,7 +14,13 @@ import { ParseKeys } from "i18next";
 /**
  * Component that renders the nav bar
  */
-type CreateType = {
+export type NavBarLink = {
+	path: string
+	accessRole: string
+	text: ParseKeys
+}
+
+export type CreateType = {
 	accessRole: string
 	onShowModal?: () => Promise<void>
 	onHideModal?: () => void
@@ -37,11 +43,7 @@ const NavBar = ({
 	navAriaLabel?: ParseKeys
 	displayNavigation: boolean
 	setNavigation: React.Dispatch<React.SetStateAction<boolean>>
-	links: {
-		path: string
-		accessRole: string
-		text: ParseKeys
-	}[]
+	links: NavBarLink[]
 	create?: CreateType
 }) => {
 	const { t } = useTranslation();
diff --git a/src/components/configuration/Themes.tsx b/src/components/configuration/Themes.tsx
index 18653008e7..e9dfc07176 100644
--- a/src/components/configuration/Themes.tsx
+++ b/src/components/configuration/Themes.tsx
@@ -1,101 +1,34 @@
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import TableFilters from "../shared/TableFilters";
-import Table from "../shared/Table";
-import { fetchFilters } from "../../slices/tableFilterSlice";
 import { themesTemplateMap } from "../../configs/tableConfigs/themesTableMap";
 import { getTotalThemes } from "../../selectors/themeSelectors";
 import { loadThemesIntoTable } from "../../thunks/tableThunks";
-import Notifications from "../shared/Notifications";
-import Header from "../Header";
-import NavBar from "../NavBar";
-import MainView from "../MainView";
-import Footer from "../Footer";
-import { useAppDispatch, useAppSelector } from "../../store";
 import { fetchThemes } from "../../slices/themeSlice";
-import { resetTableProperties } from "../../slices/tableSlice";
+import TablePage from "../shared/TablePage";
 
 /**
  * This component renders the table view of events
  */
 const Themes = () => {
-	const { t } = useTranslation();
-	const dispatch = useAppDispatch();
-
-	const [displayNavigation, setNavigation] = useState(false);
-
-	const themes = useAppSelector(state => getTotalThemes(state));
-
-	useEffect(() => {
-		// State variable for interrupting the load function
-		let allowLoadIntoTable = true;
-
-		// Clear table of previous data
-		dispatch(resetTableProperties());
-
-		dispatch(fetchFilters("themes"));
-
-		// Load themes on mount
-		const loadThemes = async () => {
-			// Fetching themes from server
-			await dispatch(fetchThemes());
-
-			// Load users into table
-			if (allowLoadIntoTable) {
-				dispatch(loadThemesIntoTable());
-			}
-		};
-		loadThemes();
-
-		// Fetch themes every minute
-		const fetchThemesInterval = setInterval(loadThemes, 5000);
-
-		return () => {
-			allowLoadIntoTable = false;
-			clearInterval(fetchThemesInterval);
-		};
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
-
 	return (
-		<>
-			<Header />
-			<NavBar
-				displayNavigation={displayNavigation}
-				setNavigation={setNavigation}
-				links={[
-					{
-						path: "/configuration/themes",
-						accessRole: "ROLE_UI_THEMES_VIEW",
-						text: "CONFIGURATION.NAVIGATION.THEMES",
-					},
-				]}
-				create={{
-					accessRole: "ROLE_UI_THEMES_CREATE",
-					text: "CONFIGURATION.ACTIONS.ADD_THEME",
-					resource: "themes",
-				}}
-			/>
-
-			<MainView open={displayNavigation}>
-				{/* Include notifications component */}
-				<Notifications context={"other"}/>
-
-				<div className="controls-container">
-					{/* Include filters component */}
-					<TableFilters
-						loadResource={fetchThemes}
-						loadResourceIntoTable={loadThemesIntoTable}
-						resource={"themes"}
-					/>
-					<h1>{t("CONFIGURATION.THEMES.TABLE.CAPTION")}</h1>
-					<h4>{t("TABLE_SUMMARY", { numberOfRows: themes })}</h4>
-				</div>
-				{/* Include table component */}
-				<Table templateMap={themesTemplateMap} />
-			</MainView>
-			<Footer />
-		</>
+		<TablePage
+			resource={"themes"}
+			fetchResource={fetchThemes}
+			loadResourceIntoTable={loadThemesIntoTable}
+			getTotalResources={getTotalThemes}
+			navBarLinks={[
+				{
+					path: "/configuration/themes",
+					accessRole: "ROLE_UI_THEMES_VIEW",
+					text: "CONFIGURATION.NAVIGATION.THEMES",
+				},
+			]}
+			navBarCreate={{
+				accessRole: "ROLE_UI_THEMES_CREATE",
+				text: "CONFIGURATION.ACTIONS.ADD_THEME",
+				resource: "themes",
+			}}
+			caption={"CONFIGURATION.THEMES.TABLE.CAPTION"}
+			templateMap={themesTemplateMap}
+		/>
 	);
 };
 
diff --git a/src/components/events/Events.tsx b/src/components/events/Events.tsx
index 023932f811..740365f60e 100644
--- a/src/components/events/Events.tsx
+++ b/src/components/events/Events.tsx
@@ -1,10 +1,7 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router";
-import TableFilters from "../shared/TableFilters";
 import Stats from "../shared/Stats";
-import Table from "../shared/Table";
-import Notifications from "../shared/Notifications";
 import DeleteEventsModal from "./partials/modals/DeleteEventsModal";
 import StartTaskModal from "./partials/modals/StartTaskModal";
 import EditScheduledEventsModal from "./partials/modals/EditScheduledEventsModal";
@@ -13,16 +10,11 @@ import { eventsTemplateMap } from "../../configs/tableConfigs/eventsTableMap";
 import {
 	loadEventsIntoTable,
 } from "../../thunks/tableThunks";
-import { fetchFilters } from "../../slices/tableFilterSlice";
 import {
 	getTotalEvents,
 	isFetchingAssetUploadOptions as getIsFetchingAssetUploadOptions,
 	isShowActions,
 } from "../../selectors/eventSelectors";
-import Header from "../Header";
-import NavBar from "../NavBar";
-import MainView from "../MainView";
-import Footer from "../Footer";
 import { getUserInformation } from "../../selectors/userInfoSelectors";
 import { hasAccess } from "../../utils/utils";
 import { availableHotkeys } from "../../configs/hotkeysConfig";
@@ -38,7 +30,7 @@ import { showModal } from "../../selectors/eventDetailsSelectors";
 import { eventsLinks } from "./partials/EventsNavigation";
 import { Modal, ModalHandle } from "../shared/modals/Modal";
 import TableActionDropdown from "../shared/TableActionDropdown";
-import { resetTableProperties } from "../../slices/tableSlice";
+import TablePage from "../shared/TablePage";
 
 /**
  * This component renders the table view of events
@@ -49,7 +41,6 @@ const Events = () => {
 
 	const displayEventDetailsModal = useAppSelector(state => showModal(state));
 
-	const [displayNavigation, setNavigation] = useState(false);
 	const newEventModalRef = useRef<ModalHandle>(null);
 	const startTaskModalRef = useRef<ModalHandle>(null);
 	const deleteModalRef = useRef<ModalHandle>(null);
@@ -58,43 +49,13 @@ const Events = () => {
 
 	const user = useAppSelector(state => getUserInformation(state));
 	const showActions = useAppSelector(state => isShowActions(state));
-	const events = useAppSelector(state => getTotalEvents(state));
 	const isFetchingAssetUploadOptions = useAppSelector(state => getIsFetchingAssetUploadOptions(state));
 
 	const location = useLocation();
 
 	useEffect(() => {
-		// State variable for interrupting the load function
-		let allowLoadIntoTable = true;
-
-		// Clear redux of previous table data
-		dispatch(resetTableProperties());
-
-		dispatch(fetchFilters("events"));
-
 		// disable actions button
 		dispatch(setShowActions(false));
-
-		// Load events on mount
-		const loadEvents = async () => {
-			// Fetching events from server
-			await dispatch(fetchEvents());
-
-			// Load events into table
-			if (allowLoadIntoTable) {
-				dispatch(loadEventsIntoTable());
-			}
-		};
-		// call the function
-		loadEvents();
-
-		// Fetch events every five seconds
-		const fetchEventsInterval = setInterval(() => loadEvents(), 5000);
-
-		return () => {
-			allowLoadIntoTable = false;
-			clearInterval(fetchEventsInterval);
-		};
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [location.hash]);
 
@@ -107,33 +68,15 @@ const Events = () => {
 		newEventModalRef.current?.open();
 	};
 
-	const hideDeleteModal = () => {
-		deleteModalRef.current?.close?.();
-	};
-
-	const hideStartTaskModal = () => {
-		startTaskModalRef.current?.close?.();
-	};
-
-	const hideEditScheduledEventsModal = () => {
-		editScheduledEventsModalRef.current?.close?.();
-	};
-
-	const hideEditMetadataEventsModal = () => {
-		editMetadataEventsModalRef.current?.close?.();
-	};
-
 	return (
 		<>
-			<Header />
-			<NavBar
-				displayNavigation={displayNavigation}
-				setNavigation={setNavigation}
-				navAriaLabel={"EVENTS.EVENTS.NAVIGATION.LABEL"}
-				links={
-					eventsLinks
-				}
-				create={{
+			<TablePage
+				resource={"events"}
+				fetchResource={fetchEvents}
+				loadResourceIntoTable={loadEventsIntoTable}
+				getTotalResources={getTotalEvents}
+				navBarLinks={eventsLinks}
+				navBarCreate={{
 					accessRole: "ROLE_UI_EVENTS_CREATE",
 					onShowModal: onNewEventModal,
 					text: "EVENTS.EVENTS.ADD_EVENT",
@@ -142,100 +85,80 @@ const Events = () => {
 					hotkeySequence: availableHotkeys.general.NEW_EVENT.sequence,
 					hotkeyDescription: availableHotkeys.general.NEW_EVENT.description,
 				}}
+				navBarChildren={
+					hasAccess("ROLE_UI_EVENTS_COUNTERS_VIEW", user) && (
+						<div className="stats-container">
+							<Stats />
+						</div>
+					)
+				}
+				caption={"EVENTS.EVENTS.TABLE.CAPTION"}
+				templateMap={eventsTemplateMap}
 			>
-				{/* Display bulk actions modal if one is chosen from dropdown */}
-				<Modal
-					header={t("BULK_ACTIONS.DELETE.EVENTS.CAPTION")}
-					classId="delete-events-status-modal"
-					ref={deleteModalRef}
-				>
-					<DeleteEventsModal close={hideDeleteModal} />
-				</Modal>
-
-				<Modal
-					header={t("BULK_ACTIONS.SCHEDULE_TASK.CAPTION")}
-					classId=""
-					ref={startTaskModalRef}
-				>
-					<StartTaskModal close={hideStartTaskModal} />
-				</Modal>
-
-				<Modal
-					header={t("BULK_ACTIONS.EDIT_EVENTS.CAPTION")}
-					classId=""
-					ref={editScheduledEventsModalRef}
-				>
-					<EditScheduledEventsModal close={hideEditScheduledEventsModal} />
-				</Modal>
-
-				<Modal
-					header={t("BULK_ACTIONS.EDIT_EVENTS_METADATA.CAPTION")}
-					classId=""
-					ref={editMetadataEventsModalRef}
-				>
-					<EditMetadataEventsModal close={hideEditMetadataEventsModal} />
-				</Modal>
-
-				{/* Include status bar component*/}
-				{hasAccess("ROLE_UI_EVENTS_COUNTERS_VIEW", user) && (
-					<div className="stats-container">
-						<Stats />
-					</div>
-				)}
-			</NavBar>
+				<TableActionDropdown
+					actions={[
+						{
+							accessRole: ["ROLE_UI_EVENTS_DELETE"],
+							handleOnClick: () => deleteModalRef.current?.open(),
+							text: "BULK_ACTIONS.DELETE.EVENTS.CAPTION",
+						},
+						{
+							accessRole: ["ROLE_UI_TASKS_CREATE"],
+							handleOnClick: () => startTaskModalRef.current?.open(),
+							text: "BULK_ACTIONS.SCHEDULE_TASK.CAPTION",
+						},
+						{
+							accessRole: ["ROLE_UI_EVENTS_DETAILS_SCHEDULING_EDIT", "ROLE_UI_EVENTS_DETAILS_METADATA_EDIT"],
+							handleOnClick: () => editScheduledEventsModalRef.current?.open(),
+							text: "BULK_ACTIONS.EDIT_EVENTS.CAPTION",
+						},
+						{
+							accessRole: ["ROLE_UI_EVENTS_DETAILS_METADATA_EDIT"],
+							handleOnClick: () => editMetadataEventsModalRef.current?.open(),
+							text: "BULK_ACTIONS.EDIT_EVENTS_METADATA.CAPTION",
+						},
+					]}
+					disabled={!showActions}
+				/>
+			</TablePage>
+
+			{/* NavBar Modals */}
+			<Modal
+				header={t("BULK_ACTIONS.DELETE.EVENTS.CAPTION")}
+				classId="delete-events-status-modal"
+				ref={deleteModalRef}
+			>
+				<DeleteEventsModal close={() => deleteModalRef.current?.close?.()} />
+			</Modal>
 
-			<MainView open={displayNavigation}>
-				{/* Include notifications component */}
-				<Notifications context={"other"}/>
+			<Modal
+				header={t("BULK_ACTIONS.SCHEDULE_TASK.CAPTION")}
+				classId=""
+				ref={startTaskModalRef}
+			>
+				<StartTaskModal close={() => startTaskModalRef.current?.close?.()} />
+			</Modal>
 
-				<div className="controls-container">
-					<div className="filters-container">
-						<TableActionDropdown
-							actions={[
-								{
-									accessRole: ["ROLE_UI_EVENTS_DELETE"],
-									handleOnClick: () => deleteModalRef.current?.open(),
-									text: "BULK_ACTIONS.DELETE.EVENTS.CAPTION",
-								},
-								{
-									accessRole: ["ROLE_UI_TASKS_CREATE"],
-									handleOnClick: () => startTaskModalRef.current?.open(),
-									text: "BULK_ACTIONS.SCHEDULE_TASK.CAPTION",
-								},
-								{
-									accessRole: ["ROLE_UI_EVENTS_DETAILS_SCHEDULING_EDIT", "ROLE_UI_EVENTS_DETAILS_METADATA_EDIT"],
-									handleOnClick: () => editScheduledEventsModalRef.current?.open(),
-									text: "BULK_ACTIONS.EDIT_EVENTS.CAPTION",
-								},
-								{
-									accessRole: ["ROLE_UI_EVENTS_DETAILS_METADATA_EDIT"],
-									handleOnClick: () => editMetadataEventsModalRef.current?.open(),
-									text: "BULK_ACTIONS.EDIT_EVENTS_METADATA.CAPTION",
-								},
-							]}
-							disabled={!showActions}
-						/>
-						{/* Include filters component*/}
-						<TableFilters
-							loadResource={fetchEvents}
-							loadResourceIntoTable={loadEventsIntoTable}
-							resource={"events"}
-						/>
-					</div>
-					<h1>{t("EVENTS.EVENTS.TABLE.CAPTION")}</h1>
-					<h4>{t("TABLE_SUMMARY", { numberOfRows: events })}</h4>
-				</div>
+			<Modal
+				header={t("BULK_ACTIONS.EDIT_EVENTS.CAPTION")}
+				classId=""
+				ref={editScheduledEventsModalRef}
+			>
+				<EditScheduledEventsModal close={() => editScheduledEventsModalRef.current?.close?.()} />
+			</Modal>
 
-				{/* Include table modal*/}
-				{displayEventDetailsModal &&
-					<EventDetailsModal />
-				}
+			<Modal
+				header={t("BULK_ACTIONS.EDIT_EVENTS_METADATA.CAPTION")}
+				classId=""
+				ref={editMetadataEventsModalRef}
+			>
+				<EditMetadataEventsModal close={() => editMetadataEventsModalRef.current?.close?.()} />
+			</Modal>
 
-				{/* Include table component*/}
-				{/* <Table templateMap={eventsTemplateMap} resourceType="events" /> */}
-				<Table templateMap={eventsTemplateMap} />
-			</MainView>
-			<Footer />
+			{/* Include table modal */}
+			{displayEventDetailsModal &&
+				<EventDetailsModal />
+			}
 		</>
 	);
 };
diff --git a/src/components/events/Series.tsx b/src/components/events/Series.tsx
index 7f58c53e44..aeeace885f 100644
--- a/src/components/events/Series.tsx
+++ b/src/components/events/Series.tsx
@@ -1,20 +1,12 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router";
-import TableFilters from "../shared/TableFilters";
-import Table from "../shared/Table";
-import Notifications from "../shared/Notifications";
 import DeleteSeriesModal from "./partials/modals/DeleteSeriesModal";
 import { seriesTemplateMap } from "../../configs/tableConfigs/seriesTableMap";
 import {
 	loadSeriesIntoTable,
 } from "../../thunks/tableThunks";
-import { fetchFilters } from "../../slices/tableFilterSlice";
 import { getTotalSeries, isShowActions } from "../../selectors/seriesSeletctor";
-import Header from "../Header";
-import NavBar from "../NavBar";
-import MainView from "../MainView";
-import Footer from "../Footer";
 import { useAppDispatch, useAppSelector } from "../../store";
 import {
 	fetchSeries,
@@ -27,7 +19,7 @@ import { eventsLinks } from "./partials/EventsNavigation";
 import { Modal, ModalHandle } from "../shared/modals/Modal";
 import { availableHotkeys } from "../../configs/hotkeysConfig";
 import TableActionDropdown from "../shared/TableActionDropdown";
-import { resetTableProperties } from "../../slices/tableSlice";
+import TablePage from "../shared/TablePage";
 
 /**
  * This component renders the table view of series
@@ -35,47 +27,18 @@ import { resetTableProperties } from "../../slices/tableSlice";
 const Series = () => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
-	const [displayNavigation, setNavigation] = useState(false);
 	const newSeriesModalRef = useRef<ModalHandle>(null);
 	const deleteModalRef = useRef<ModalHandle>(null);
 
 	const location = useLocation();
 
-	const series = useAppSelector(state => getTotalSeries(state));
+	// const series = useAppSelector(state => getTotalSeries(state));
 	const showActions = useAppSelector(state => isShowActions(state));
 
 	useEffect(() => {
-		// State variable for interrupting the load function
-		let allowLoadIntoTable = true;
-
-		// Clear table of previous data
-		dispatch(resetTableProperties());
-
-		dispatch(fetchFilters("series"));
-
 		// disable actions button
 		dispatch(showActionsSeries(false));
-
-		// Load events on mount
-		const loadSeries = async () => {
-			// fetching series from server
-			await dispatch(fetchSeries());
-
-			// load series into table
-			if (allowLoadIntoTable) {
-				dispatch(loadSeriesIntoTable());
-			}
-		};
-		loadSeries();
-
-		// Fetch series every minute
-		const fetchSeriesInterval = setInterval(() => loadSeries(), 5000);
-
-		return () => {
-			allowLoadIntoTable = false;
-			clearInterval(fetchSeriesInterval);
-		};
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+	// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [location.hash]);
 
 	const onNewSeriesModal = async () => {
@@ -88,68 +51,45 @@ const Series = () => {
 		newSeriesModalRef.current?.open();
 	};
 
-	const hideDeleteModal = () => {
-		deleteModalRef.current?.close?.();
-	};
-
 	return (
 		<>
-			<Header />
-			<NavBar
-				displayNavigation={displayNavigation}
-				setNavigation={setNavigation}
-				navAriaLabel={"EVENTS.EVENTS.NAVIGATION.LABEL"}
-				links={
-					eventsLinks
-				}
-				create={{
-					accessRole: "ROLE_UI_SERIES_CREATE",
-					onShowModal: onNewSeriesModal,
-					text: "EVENTS.EVENTS.ADD_SERIES",
-					resource: "series",
-					hotkeySequence: availableHotkeys.general.NEW_SERIES.sequence,
-					hotkeyDescription: availableHotkeys.general.NEW_SERIES.description,
-				}}
+			<TablePage
+				resource={"series"}
+				fetchResource={fetchSeries}
+				loadResourceIntoTable={loadSeriesIntoTable}
+				getTotalResources={getTotalSeries}
+				navBarLinks={eventsLinks}
+				navBarCreate={{
+						accessRole: "ROLE_UI_SERIES_CREATE",
+						onShowModal: onNewSeriesModal,
+						text: "EVENTS.EVENTS.ADD_SERIES",
+						resource: "series",
+						hotkeySequence: availableHotkeys.general.NEW_SERIES.sequence,
+						hotkeyDescription: availableHotkeys.general.NEW_SERIES.description,
+					}}
+				caption={"EVENTS.SERIES.TABLE.CAPTION"}
+				templateMap={seriesTemplateMap}
 			>
-				<Modal
-					header={t("BULK_ACTIONS.DELETE.SERIES.CAPTION")}
-					classId="delete-series-status-modal"
-					ref={deleteModalRef}
-				>
-					<DeleteSeriesModal close={hideDeleteModal} />
-				</Modal>
-			</NavBar>
-
-			<MainView open={displayNavigation}>
-				{/* Include notifications component */}
-				<Notifications context={"other"}/>
-
-				<div className="controls-container">
-					<div className="filters-container">
-						<TableActionDropdown
-							actions={[
-								{
-									accessRole: ["ROLE_UI_SERIES_DELETE"],
-									handleOnClick: () => deleteModalRef.current?.open(),
-									text: "BULK_ACTIONS.DELETE.SERIES.CAPTION",
-								},
-							]}
-							disabled={!showActions}
-						/>
-						{/* Include filters component */}
-						<TableFilters
-							loadResource={fetchSeries}
-							loadResourceIntoTable={loadSeriesIntoTable}
-							resource={"series"}
-						/>
-					</div>
-					<h1>{t("EVENTS.SERIES.TABLE.CAPTION")}</h1>
-					{/* Include table view */}
-					<h4>{t("TABLE_SUMMARY", { numberOfRows: series })}</h4>
-				</div>
-				<Table templateMap={seriesTemplateMap} />
-			</MainView>
-			<Footer />
+				<TableActionDropdown
+					actions={[
+						{
+							accessRole: ["ROLE_UI_SERIES_DELETE"],
+							handleOnClick: () => deleteModalRef.current?.open(),
+							text: "BULK_ACTIONS.DELETE.SERIES.CAPTION",
+						},
+					]}
+					disabled={!showActions}
+				/>
+			</TablePage>
+
+			{/* NavBar Modals */}
+			<Modal
+				header={t("BULK_ACTIONS.DELETE.SERIES.CAPTION")}
+				classId="delete-series-status-modal"
+				ref={deleteModalRef}
+			>
+				<DeleteSeriesModal close={() => deleteModalRef.current?.close?.()} />
+			</Modal>
 		</>
 	);
 };
diff --git a/src/components/recordings/Recordings.tsx b/src/components/recordings/Recordings.tsx
index c5d07de5c7..d95e70c27d 100644
--- a/src/components/recordings/Recordings.tsx
+++ b/src/components/recordings/Recordings.tsx
@@ -1,93 +1,30 @@
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import TableFilters from "../shared/TableFilters";
-import Table from "../shared/Table";
-import Notifications from "../shared/Notifications";
 import { recordingsTemplateMap } from "../../configs/tableConfigs/recordingsTableMap";
 import { getTotalRecordings } from "../../selectors/recordingSelectors";
 import { loadRecordingsIntoTable } from "../../thunks/tableThunks";
-import { fetchFilters } from "../../slices/tableFilterSlice";
-import Header from "../Header";
-import NavBar from "../NavBar";
-import MainView from "../MainView";
-import Footer from "../Footer";
-import { useAppDispatch, useAppSelector } from "../../store";
 import { fetchRecordings } from "../../slices/recordingSlice";
 import { AsyncThunk } from "@reduxjs/toolkit";
-import { resetTableProperties } from "../../slices/tableSlice";
+import TablePage from "../shared/TablePage";
 
 /**
  * This component renders the table view of recordings
  */
 const Recordings = () => {
-	const { t } = useTranslation();
-	const dispatch = useAppDispatch();
-	const [displayNavigation, setNavigation] = useState(false);
-
-	const recordings = useAppSelector(state => getTotalRecordings(state));
-
-	useEffect(() => {
-		// State variable for interrupting the load function
-		let allowLoadIntoTable = true;
-
-		// Clear table of previous data
-		dispatch(resetTableProperties());
-
-		dispatch(fetchFilters("recordings"));
-
-		// Load recordings on mount
-		const loadRecordings = async () => {
-			// Fetching recordings from server
-			await dispatch(fetchRecordings(undefined));
-
-			// Load recordings into table
-			if (allowLoadIntoTable) {
-				dispatch(loadRecordingsIntoTable());
-			}
-		};
-		loadRecordings();
-
-		return () => {
-			allowLoadIntoTable = false;
-		};
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
-
 	return (
-		<>
-			<Header />
-			<NavBar
-				displayNavigation={displayNavigation}
-				setNavigation={setNavigation}
-				links={[
-					{
-						path: "/recordings/recordings",
-						accessRole: "ROLE_UI_LOCATIONS_VIEW",
-						text: "RECORDINGS.NAVIGATION.LOCATIONS",
-					},
-				]}
-			/>
-
-			<MainView open={displayNavigation}>
-				{/* Include notifications component */}
-				<Notifications context={"other"}/>
-
-				<div className="controls-container">
-					{/* Include filters component */}
-					<TableFilters
-						loadResource={fetchRecordings as AsyncThunk<any, void, any>}
-						loadResourceIntoTable={loadRecordingsIntoTable}
-						resource={"recordings"}
-					/>
-
-					<h1>{t("RECORDINGS.RECORDINGS.TABLE.CAPTION")}</h1>
-					<h4>{t("TABLE_SUMMARY", { numberOfRows: recordings })}</h4>
-				</div>
-				{/* Include table component */}
-				<Table templateMap={recordingsTemplateMap} />
-			</MainView>
-			<Footer />
-		</>
+		<TablePage
+			resource={"recordings"}
+			fetchResource={fetchRecordings as AsyncThunk<any, void, any>}
+			loadResourceIntoTable={loadRecordingsIntoTable}
+			getTotalResources={getTotalRecordings}
+			navBarLinks={[
+				{
+					path: "/recordings/recordings",
+					accessRole: "ROLE_UI_LOCATIONS_VIEW",
+					text: "RECORDINGS.NAVIGATION.LOCATIONS",
+				},
+			]}
+			caption={"RECORDINGS.RECORDINGS.TABLE.CAPTION"}
+			templateMap={recordingsTemplateMap}
+		/>
 	);
 };
 
diff --git a/src/components/shared/MainPage.tsx b/src/components/shared/MainPage.tsx
new file mode 100644
index 0000000000..a7d55c282f
--- /dev/null
+++ b/src/components/shared/MainPage.tsx
@@ -0,0 +1,43 @@
+import { ReactNode, useState } from "react";
+import Header from "../Header";
+import NavBar, { CreateType, NavBarLink } from "../NavBar";
+import MainView from "../MainView";
+import Footer from "../Footer";
+
+/**
+ * This component renders a generic page with a table
+ */
+const MainPage = ({
+	navBarLinks,
+	navBarCreate,
+	navBarChildren,
+	children,
+}: {
+	navBarLinks: NavBarLink[]
+	navBarCreate?: CreateType
+	navBarChildren?: ReactNode
+	children?: ReactNode
+}) => {
+	const [displayNavigation, setNavigation] = useState(false);
+
+	return (
+		<>
+			<Header />
+			<NavBar
+				displayNavigation={displayNavigation}
+				setNavigation={setNavigation}
+				links={navBarLinks}
+				create={navBarCreate}
+			>
+				{navBarChildren}
+			</NavBar>
+
+			<MainView open={displayNavigation}>
+				{children}
+			</MainView>
+			<Footer />
+		</>
+	);
+};
+
+export default MainPage;
diff --git a/src/components/shared/Table.tsx b/src/components/shared/Table.tsx
index 5cd0043d64..aa6b91908d 100644
--- a/src/components/shared/Table.tsx
+++ b/src/components/shared/Table.tsx
@@ -42,7 +42,7 @@ import { ParseKeys } from "i18next";
 
 const containerPageSize = React.createRef<HTMLDivElement>();
 
-type TemplateMap = {
+export type TemplateMap = {
 	[key: string]: ({ row }: { row: any }) => JSX.Element | JSX.Element[]
 }
 
diff --git a/src/components/shared/TablePage.tsx b/src/components/shared/TablePage.tsx
new file mode 100644
index 0000000000..98469db819
--- /dev/null
+++ b/src/components/shared/TablePage.tsx
@@ -0,0 +1,108 @@
+import { ReactNode, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import TableFilters from "../shared/TableFilters";
+import Table, { TemplateMap } from "../shared/Table";
+import Notifications from "../shared/Notifications";
+import { fetchFilters } from "../../slices/tableFilterSlice";
+import { CreateType, NavBarLink } from "../NavBar";
+import { AppThunk, RootState, useAppDispatch, useAppSelector } from "../../store";
+import { resetTableProperties, Resource } from "../../slices/tableSlice";
+import { AsyncThunk } from "@reduxjs/toolkit";
+import { ParseKeys } from "i18next";
+import { useLocation } from "react-router";
+import MainPage from "./MainPage";
+
+/**
+ * This component renders a generic page with a table
+ */
+const TablePage = ({
+	resource,
+	fetchResource,
+	loadResourceIntoTable,
+	getTotalResources,
+	navBarLinks,
+	navBarCreate,
+	caption,
+	templateMap,
+	navBarChildren,
+	children,
+}: {
+	resource: Resource
+	fetchResource: AsyncThunk<any, void, any>,
+	loadResourceIntoTable: () => AppThunk,
+	getTotalResources: (state: RootState) => number,
+	navBarLinks: NavBarLink[]
+	navBarCreate?: CreateType
+	navBarChildren?: ReactNode
+	caption: ParseKeys
+	templateMap: TemplateMap
+	children?: ReactNode
+}) => {
+	const { t } = useTranslation();
+	const dispatch = useAppDispatch();
+
+	const location = useLocation();
+
+	const numberOfRows = useAppSelector(state => getTotalResources(state));
+
+	useEffect(() => {
+		// State variable for interrupting the load function
+		let allowLoadIntoTable = true;
+
+		// Clear table of previous data
+		dispatch(resetTableProperties());
+
+		dispatch(fetchFilters(resource));
+
+		// Load resource on mount
+		const loadResource = async () => {
+			// Fetching resources from server
+			await dispatch(fetchResource());
+
+			// Load resources into table
+			if (allowLoadIntoTable) {
+				dispatch(loadResourceIntoTable());
+			}
+		};
+		loadResource();
+
+		// Fetch resources every minute
+		const fetchResourceInterval = setInterval(loadResource, 5000);
+
+		return () => {
+			allowLoadIntoTable = false;
+			clearInterval(fetchResourceInterval);
+		};
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [location.hash]);
+
+	return (
+		<MainPage
+			navBarLinks={navBarLinks}
+			navBarCreate={navBarCreate}
+			navBarChildren={navBarChildren}
+		>
+				{/* Include notifications component */}
+				<Notifications context={"other"}/>
+
+				<div className="controls-container">
+					<div className="filters-container">
+						{children}
+
+						{/* Include filters component */}
+						<TableFilters
+							loadResource={fetchResource}
+							loadResourceIntoTable={loadResourceIntoTable}
+							resource={resource}
+						/>
+					</div>
+					<h1>{t(caption)}</h1>
+					<h4>{t("TABLE_SUMMARY", { numberOfRows })}</h4>
+				</div>
+				{/* Include table component */}
+				<Table templateMap={templateMap} />
+		</MainPage>
+	);
+};
+
+export default TablePage;
diff --git a/src/components/statistics/Statistics.tsx b/src/components/statistics/Statistics.tsx
index 77252a4eb8..0426bd8b59 100644
--- a/src/components/statistics/Statistics.tsx
+++ b/src/components/statistics/Statistics.tsx
@@ -1,9 +1,5 @@
-import React, { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import Header from "../Header";
-import NavBar from "../NavBar";
-import MainView from "../MainView";
-import Footer from "../Footer";
 import TimeSeriesStatistics from "../shared/TimeSeriesStatistics";
 import {
 	getStatistics,
@@ -23,13 +19,12 @@ import {
 import { createChartOptions } from "../../utils/statisticsUtils";
 import { NotificationComponent } from "../shared/Notifications";
 import { ParseKeys } from "i18next";
+import MainPage from "../shared/MainPage";
 
-const Statistics: React.FC = () => {
+const Statistics = () => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
 
-	const [displayNavigation, setNavigation] = useState(false);
-
 	const organizationId = useAppSelector(state => getOrgId(state));
 	const statistics = useAppSelector(state => getStatistics(state));
 	const hasStatistics = useAppSelector(state => getHasStatistics(state));
@@ -61,89 +56,80 @@ const Statistics: React.FC = () => {
 	};
 
 	return (
-		<span>
-			<Header />
-			<NavBar
-					displayNavigation={displayNavigation}
-					setNavigation={setNavigation}
-					links={[
-						{
-							path: "/statistics/organization",
-							accessRole: "ROLE_UI_STATISTICS_ORGANIZATION_VIEW",
-							text: "STATISTICS.NAVIGATION.ORGANIZATION",
-						},
-					]}
-			/>
-
-			{/* main view of this page, displays statistics */}
-			<MainView open={displayNavigation}>
-				<div className="obj statistics">
-					{/* heading */}
-					<div className="controls-container">
-						<h1>
-							{" "}
-							{t("STATISTICS.NAVIGATION.ORGANIZATION") /* Organisation */}{" "}
-						</h1>
-					</div>
+		<MainPage
+			navBarLinks={[
+				{
+					path: "/statistics/organization",
+					accessRole: "ROLE_UI_STATISTICS_ORGANIZATION_VIEW",
+					text: "STATISTICS.NAVIGATION.ORGANIZATION",
+				},
+			]}
+		>
+			<div className="obj statistics">
+				{/* heading */}
+				<div className="controls-container">
+					<h1>
+						{" "}
+						{t("STATISTICS.NAVIGATION.ORGANIZATION") /* Organisation */}{" "}
+					</h1>
+				</div>
 
-					{!isLoadingStatistics &&
-						(hasError || !hasStatistics ? (
-							/* error message */
-							<div className="obj">
-								<NotificationComponent
-									notification={{
-										type: "error",
-										message: "STATISTICS.NOT_AVAILABLE",
-										id: 0,
-									}}
-								/>
-							</div>
-						) : (
-							/* iterates over the different available statistics */
-							statistics.map((stat, key) => (
-								<div className="obj" key={key}>
-									{/* title of statistic */}
-									<header className="no-expand">{t(stat.title as ParseKeys)}</header>
+				{!isLoadingStatistics &&
+					(hasError || !hasStatistics ? (
+						/* error message */
+						<div className="obj">
+							<NotificationComponent
+								notification={{
+									type: "error",
+									message: "STATISTICS.NOT_AVAILABLE",
+									id: 0,
+								}}
+							/>
+						</div>
+					) : (
+						/* iterates over the different available statistics */
+						statistics.map((stat, key) => (
+							<div className="obj" key={key}>
+								{/* title of statistic */}
+								<header className="no-expand">{t(stat.title as ParseKeys)}</header>
 
-									{stat.providerType === "timeSeries" ? (
-										/* visualization of statistic for time series data */
-										<div className="obj-container">
-											<TimeSeriesStatistics
-												resourceId={organizationId}
-												statTitle={t(stat.title as ParseKeys)}
-												providerId={stat.providerId}
-												fromDate={stat.from}
-												toDate={stat.to}
-												timeMode={stat.timeMode}
-												dataResolution={stat.dataResolution}
-												statDescription={stat.description}
-												onChange={fetchStatisticsPageStatisticsValueUpdate}
-												exportUrl={stat.csvUrl}
-												exportFileName={statisticsCsvFileName}
-												totalValue={stat.totalValue}
-												sourceData={stat.values}
-												chartLabels={stat.labels}
-												chartOptions={createChartOptions(stat.timeMode, stat.dataResolution)}
-											/>
-										</div>
-									) : (
-										/* unsupported type message */
-										<NotificationComponent
-											notification={{
-												type: "error",
-												message: "STATISTICS.UNSUPPORTED_TYPE",
-												id: 0,
-											}}
+								{stat.providerType === "timeSeries" ? (
+									/* visualization of statistic for time series data */
+									<div className="obj-container">
+										<TimeSeriesStatistics
+											resourceId={organizationId}
+											statTitle={t(stat.title as ParseKeys)}
+											providerId={stat.providerId}
+											fromDate={stat.from}
+											toDate={stat.to}
+											timeMode={stat.timeMode}
+											dataResolution={stat.dataResolution}
+											statDescription={stat.description}
+											onChange={fetchStatisticsPageStatisticsValueUpdate}
+											exportUrl={stat.csvUrl}
+											exportFileName={statisticsCsvFileName}
+											totalValue={stat.totalValue}
+											sourceData={stat.values}
+											chartLabels={stat.labels}
+											chartOptions={createChartOptions(stat.timeMode, stat.dataResolution)}
 										/>
-									)}
-								</div>
-							))
-						))}
-				</div>
-			</MainView>
-			<Footer />
-		</span>
-    );
+									</div>
+								) : (
+									/* unsupported type message */
+									<NotificationComponent
+										notification={{
+											type: "error",
+											message: "STATISTICS.UNSUPPORTED_TYPE",
+											id: 0,
+										}}
+									/>
+								)}
+							</div>
+						))
+					))}
+			</div>
+		</MainPage>
+	);
 };
 
 export default Statistics;
diff --git a/src/components/systems/Jobs.tsx b/src/components/systems/Jobs.tsx
index 5f1a8b860e..f39016ee22 100644
--- a/src/components/systems/Jobs.tsx
+++ b/src/components/systems/Jobs.tsx
@@ -1,92 +1,26 @@
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import TableFilters from "../shared/TableFilters";
-import Table from "../shared/Table";
-import Notifications from "../shared/Notifications";
 import { jobsTemplateMap } from "../../configs/tableConfigs/jobsTableConfig";
 import { getTotalJobs } from "../../selectors/jobSelectors";
-import { fetchFilters } from "../../slices/tableFilterSlice";
 import {
 	loadJobsIntoTable,
 } from "../../thunks/tableThunks";
-import Header from "../Header";
-import NavBar from "../NavBar";
-import MainView from "../MainView";
-import Footer from "../Footer";
-import { useAppDispatch, useAppSelector } from "../../store";
 import { fetchJobs } from "../../slices/jobSlice";
 import { systemsLinks } from "./partials/SystemsNavigation";
-import { resetTableProperties } from "../../slices/tableSlice";
+import TablePage from "../shared/TablePage";
 
 /**
  * This component renders the table view of jobs
  */
 const Jobs = () => {
-	const { t } = useTranslation();
-	const dispatch = useAppDispatch();
-	const [displayNavigation, setNavigation] = useState(false);
-
-	const jobs = useAppSelector(state => getTotalJobs(state));
-
-	useEffect(() => {
-		// State variable for interrupting the load function
-		let allowLoadIntoTable = true;
-
-		// Clear table of previous data
-		dispatch(resetTableProperties());
-
-		dispatch(fetchFilters("jobs"));
-
-		// Load jobs on mount
-		const loadJobs = async () => {
-			// Fetching jobs from server
-			await dispatch(fetchJobs());
-
-			// Load jobs into table
-			if (allowLoadIntoTable) {
-				dispatch(loadJobsIntoTable());
-			}
-		};
-		loadJobs();
-
-		// Fetch jobs every minute
-		const fetchJobInterval = setInterval(() => loadJobs(), 5000);
-
-		return () => {
-			allowLoadIntoTable = false;
-			clearInterval(fetchJobInterval);
-		};
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
-
 	return (
-		<>
-			<Header />
-			<NavBar
-				displayNavigation={displayNavigation}
-				setNavigation={setNavigation}
-				links={systemsLinks}
-			/>
-
-			<MainView open={displayNavigation}>
-				{/* Include notifications component */}
-				<Notifications context={"other"}/>
-
-				<div className="controls-container">
-					{/* Include filters component */}
-					<TableFilters
-						loadResource={fetchJobs}
-						loadResourceIntoTable={loadJobsIntoTable}
-						resource={"jobs"}
-					/>
-					<h1>{t("SYSTEMS.JOBS.TABLE.CAPTION")}</h1>
-					<h4>{t("TABLE_SUMMARY", { numberOfRows: jobs })}</h4>
-				</div>
-				{/* Include table component */}
-				<Table templateMap={jobsTemplateMap} />
-			</MainView>
-			<Footer />
-		</>
+		<TablePage
+			resource={"jobs"}
+			fetchResource={fetchJobs}
+			loadResourceIntoTable={loadJobsIntoTable}
+			getTotalResources={getTotalJobs}
+			navBarLinks={systemsLinks}
+			caption={"SYSTEMS.JOBS.TABLE.CAPTION"}
+			templateMap={jobsTemplateMap}
+		/>
 	);
 };
 
diff --git a/src/components/systems/Servers.tsx b/src/components/systems/Servers.tsx
index 26ca702d51..ad236feb17 100644
--- a/src/components/systems/Servers.tsx
+++ b/src/components/systems/Servers.tsx
@@ -1,92 +1,26 @@
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import TableFilters from "../shared/TableFilters";
-import Table from "../shared/Table";
-import Notifications from "../shared/Notifications";
 import { serversTemplateMap } from "../../configs/tableConfigs/serversTableMap";
 import { getTotalServers } from "../../selectors/serverSelectors";
-import { fetchFilters } from "../../slices/tableFilterSlice";
 import {
 	loadServersIntoTable,
 } from "../../thunks/tableThunks";
-import Header from "../Header";
-import NavBar from "../NavBar";
-import MainView from "../MainView";
-import Footer from "../Footer";
-import { useAppDispatch, useAppSelector } from "../../store";
 import { fetchServers } from "../../slices/serverSlice";
 import { systemsLinks } from "./partials/SystemsNavigation";
-import { resetTableProperties } from "../../slices/tableSlice";
+import TablePage from "../shared/TablePage";
 
 /**
  * This component renders the table view of servers
  */
 const Servers = () => {
-	const { t } = useTranslation();
-	const dispatch = useAppDispatch();
-	const [displayNavigation, setNavigation] = useState(false);
-
-	const servers = useAppSelector(state => getTotalServers(state));
-
-	useEffect(() => {
-		// State variable for interrupting the load function
-		let allowLoadIntoTable = true;
-
-		// Clear table of previous data
-		dispatch(resetTableProperties());
-
-		dispatch(fetchFilters("servers"));
-
-		// Load servers on mount
-		const loadServers = async () => {
-			// Fetching servers from server
-			await dispatch(fetchServers());
-
-			// Load servers into table
-			if (allowLoadIntoTable) {
-				dispatch(loadServersIntoTable());
-			}
-		};
-		loadServers();
-
-		// Fetch servers every minute
-		const fetchServersInterval = setInterval(() => loadServers(), 5000);
-
-		return () => {
-			allowLoadIntoTable = false;
-			clearInterval(fetchServersInterval);
-		};
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
-
 	return (
-		<>
-			<Header />
-			<NavBar
-				displayNavigation={displayNavigation}
-				setNavigation={setNavigation}
-				links={systemsLinks}
-			/>
-
-			<MainView open={displayNavigation}>
-				{/* Include notifications component */}
-				<Notifications context={"other"}/>
-
-				<div className="controls-container">
-					{/* Include filters component */}
-					<TableFilters
-						loadResource={fetchServers}
-						loadResourceIntoTable={loadServersIntoTable}
-						resource={"servers"}
-					/>
-					<h1>{t("SYSTEMS.SERVERS.TABLE.CAPTION")}</h1>
-					<h4>{t("TABLE_SUMMARY", { numberOfRows: servers })}</h4>
-				</div>
-				{/* Include table component */}
-				<Table templateMap={serversTemplateMap} />
-			</MainView>
-			<Footer />
-		</>
+		<TablePage
+			resource={"servers"}
+			fetchResource={fetchServers}
+			loadResourceIntoTable={loadServersIntoTable}
+			getTotalResources={getTotalServers}
+			navBarLinks={systemsLinks}
+			caption={"SYSTEMS.SERVERS.TABLE.CAPTION"}
+			templateMap={serversTemplateMap}
+		/>
 	);
 };
 
diff --git a/src/components/systems/Services.tsx b/src/components/systems/Services.tsx
index f0cd0321e8..1ef9037667 100644
--- a/src/components/systems/Services.tsx
+++ b/src/components/systems/Services.tsx
@@ -1,92 +1,26 @@
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import TableFilters from "../shared/TableFilters";
-import Table from "../shared/Table";
-import Notifications from "../shared/Notifications";
 import { servicesTemplateMap } from "../../configs/tableConfigs/servicesTableMap";
-import { fetchFilters } from "../../slices/tableFilterSlice";
 import {
 	loadServicesIntoTable,
 } from "../../thunks/tableThunks";
 import { getTotalServices } from "../../selectors/serviceSelector";
-import Header from "../Header";
-import NavBar from "../NavBar";
-import MainView from "../MainView";
-import Footer from "../Footer";
-import { useAppDispatch, useAppSelector } from "../../store";
 import { fetchServices } from "../../slices/serviceSlice";
 import { systemsLinks } from "./partials/SystemsNavigation";
-import { resetTableProperties } from "../../slices/tableSlice";
+import TablePage from "../shared/TablePage";
 
 /**
  * This component renders the table view of services
  */
 const Services = () => {
-	const { t } = useTranslation();
-	const dispatch = useAppDispatch();
-	const [displayNavigation, setNavigation] = useState(false);
-
-	const services = useAppSelector(state => getTotalServices(state));
-
-	useEffect(() => {
-		// State variable for interrupting the load function
-		let allowLoadIntoTable = true;
-
-		// Clear table of previous data
-		dispatch(resetTableProperties());
-
-		dispatch(fetchFilters("services"));
-
-		// Load services on mount
-		const loadServices = async () => {
-			// Fetching services from server
-			await dispatch(fetchServices());
-
-			// Load services into table
-			if (allowLoadIntoTable) {
-				dispatch(loadServicesIntoTable());
-			}
-		};
-		loadServices();
-
-		// Fetch services every minute
-		const fetchServicesInterval = setInterval(() => loadServices(), 5000);
-
-		return () => {
-			allowLoadIntoTable = false;
-			clearInterval(fetchServicesInterval);
-		};
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
-
 	return (
-		<>
-			<Header />
-			<NavBar
-				displayNavigation={displayNavigation}
-				setNavigation={setNavigation}
-				links={systemsLinks}
-			/>
-
-			<MainView open={displayNavigation}>
-				{/* Include notifications component */}
-				<Notifications context={"other"}/>
-
-				<div className="controls-container">
-					{/* Include filters component */}
-					<TableFilters
-						loadResource={fetchServices}
-						loadResourceIntoTable={loadServicesIntoTable}
-						resource={"services"}
-					/>
-					<h1>{t("SYSTEMS.SERVICES.TABLE.CAPTION")}</h1>
-					<h4>{t("TABLE_SUMMARY", { numberOfRows: services })}</h4>
-				</div>
-				{/* Include table component */}
-				<Table templateMap={servicesTemplateMap} />
-			</MainView>
-			<Footer />
-		</>
+		<TablePage
+			resource={"services"}
+			fetchResource={fetchServices}
+			loadResourceIntoTable={loadServicesIntoTable}
+			getTotalResources={getTotalServices}
+			navBarLinks={systemsLinks}
+			caption={"SYSTEMS.SERVICES.TABLE.CAPTION"}
+			templateMap={servicesTemplateMap}
+		/>
 	);
 };
 
diff --git a/src/components/users/Acls.tsx b/src/components/users/Acls.tsx
index 17069bb670..d61c40c19b 100644
--- a/src/components/users/Acls.tsx
+++ b/src/components/users/Acls.tsx
@@ -1,97 +1,31 @@
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import TableFilters from "../shared/TableFilters";
-import Table from "../shared/Table";
-import Notifications from "../shared/Notifications";
 import { aclsTemplateMap } from "../../configs/tableConfigs/aclsTableMap";
-import { fetchFilters } from "../../slices/tableFilterSlice";
 import {
 	loadAclsIntoTable,
 } from "../../thunks/tableThunks";
 import { getTotalAcls } from "../../selectors/aclSelectors";
-import Header from "../Header";
-import NavBar from "../NavBar";
-import MainView from "../MainView";
-import Footer from "../Footer";
-import { useAppDispatch, useAppSelector } from "../../store";
 import { fetchAcls } from "../../slices/aclSlice";
 import { usersLinks } from "./partials/UsersNavigation";
-import { resetTableProperties } from "../../slices/tableSlice";
+import TablePage from "../shared/TablePage";
 
 /**
  * This component renders the table view of acls
  */
 const Acls = () => {
-	const { t } = useTranslation();
-	const [displayNavigation, setNavigation] = useState(false);
-
-	const dispatch = useAppDispatch();
-	const acls = useAppSelector(state => getTotalAcls(state));
-
-	useEffect(() => {
-		// State variable for interrupting the load function
-		let allowLoadIntoTable = true;
-
-		// Clear table of previous data
-		dispatch(resetTableProperties());
-
-		dispatch(fetchFilters("acls"));
-
-		// Load acls on mount
-		const loadAcls = async () => {
-			// Fetching acls from server
-			await dispatch(fetchAcls());
-
-			// Load acls into table
-			if (allowLoadIntoTable) {
-				dispatch(loadAclsIntoTable());
-			}
-		};
-		loadAcls();
-
-		// Fetch Acls every minute
-		const fetchAclInterval = setInterval(loadAcls, 5000);
-
-		return () => {
-			allowLoadIntoTable = false;
-			clearInterval(fetchAclInterval);
-		};
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
-
 	return (
-		<>
-			<Header />
-			<NavBar
-				displayNavigation={displayNavigation}
-				setNavigation={setNavigation}
-				links={usersLinks}
-				create={{
-					accessRole: "ROLE_UI_ACLS_CREATE",
-					text: "USERS.ACTIONS.ADD_ACL",
-					resource: "acl",
-				}}
-			/>
-
-			<MainView open={displayNavigation}>
-				{/* Include notifications component */}
-				<Notifications context={"other"}/>
-
-				<div className="controls-container">
-					{/* Include filters component */}
-					<TableFilters
-						loadResource={fetchAcls}
-						loadResourceIntoTable={loadAclsIntoTable}
-						resource={"acls"}
-					/>
-					<h1>{t("USERS.ACLS.TABLE.CAPTION")}</h1>
-					<h4>{t("TABLE_SUMMARY", { numberOfRows: acls })}</h4>
-				</div>
-				{/* Include table component */}
-				<Table templateMap={aclsTemplateMap} />
-			</MainView>
-			<Footer />
-		</>
+		<TablePage
+			resource={"acls"}
+			fetchResource={fetchAcls}
+			loadResourceIntoTable={loadAclsIntoTable}
+			getTotalResources={getTotalAcls}
+			navBarLinks={usersLinks}
+			navBarCreate={{
+				accessRole: "ROLE_UI_ACLS_CREATE",
+				text: "USERS.ACTIONS.ADD_ACL",
+				resource: "acl",
+			}}
+			caption={"USERS.ACLS.TABLE.CAPTION"}
+			templateMap={aclsTemplateMap}
+		/>
 	);
 };
 
diff --git a/src/components/users/Groups.tsx b/src/components/users/Groups.tsx
index 296111e893..b6da632ae5 100644
--- a/src/components/users/Groups.tsx
+++ b/src/components/users/Groups.tsx
@@ -1,97 +1,31 @@
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import TableFilters from "../shared/TableFilters";
-import Table from "../shared/Table";
-import Notifications from "../shared/Notifications";
 import { getTotalGroups } from "../../selectors/groupSelectors";
 import { groupsTemplateMap } from "../../configs/tableConfigs/groupsTableMap";
-import { fetchFilters } from "../../slices/tableFilterSlice";
 import {
 	loadGroupsIntoTable,
 } from "../../thunks/tableThunks";
-import Header from "../Header";
-import NavBar from "../NavBar";
-import MainView from "../MainView";
-import Footer from "../Footer";
-import { useAppDispatch, useAppSelector } from "../../store";
 import { fetchGroups } from "../../slices/groupSlice";
 import { usersLinks } from "./partials/UsersNavigation";
-import { resetTableProperties } from "../../slices/tableSlice";
+import TablePage from "../shared/TablePage";
 
 /**
  * This component renders the table view of groups
  */
 const Groups = () => {
-	const { t } = useTranslation();
-	const dispatch = useAppDispatch();
-	const [displayNavigation, setNavigation] = useState(false);
-
-	const groups = useAppSelector(state => getTotalGroups(state));
-
-	useEffect(() => {
-		// State variable for interrupting the load function
-		let allowLoadIntoTable = true;
-
-		// Clear table of previous data
-		dispatch(resetTableProperties());
-
-		dispatch(fetchFilters("groups"));
-
-		// Load groups on mount
-		 const loadGroups = async () => {
-			// Fetching groups from server
-			await dispatch(fetchGroups());
-
-			// Load groups into table
-			if (allowLoadIntoTable) {
-				dispatch(loadGroupsIntoTable());
-			}
-		};
-		loadGroups();
-
-		// Fetch groups every minute
-		const fetchGroupsInterval = setInterval(loadGroups, 5000);
-
-		return () => {
-			allowLoadIntoTable = false;
-			clearInterval(fetchGroupsInterval);
-		};
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
-
 	return (
-		<>
-			<Header />
-			<NavBar
-				displayNavigation={displayNavigation}
-				setNavigation={setNavigation}
-				links={usersLinks}
-				create={{
-					accessRole: "ROLE_UI_GROUPS_CREATE",
-					text: "USERS.ACTIONS.ADD_GROUP",
-					resource: "group",
-				}}
-			/>
-
-			<MainView open={displayNavigation}>
-				{/* Include notifications component */}
-				<Notifications context={"other"}/>
-
-				<div className="controls-container">
-					{/* Include filters component */}
-					<TableFilters
-						loadResource={fetchGroups}
-						loadResourceIntoTable={loadGroupsIntoTable}
-						resource={"groups"}
-					/>
-					<h1>{t("USERS.GROUPS.TABLE.CAPTION")}</h1>
-					<h4>{t("TABLE_SUMMARY", { numberOfRows: groups })}</h4>
-				</div>
-				{/* Include table component */}
-				<Table templateMap={groupsTemplateMap} />
-			</MainView>
-			<Footer />
-		</>
+		<TablePage
+			resource={"groups"}
+			fetchResource={fetchGroups}
+			loadResourceIntoTable={loadGroupsIntoTable}
+			getTotalResources={getTotalGroups}
+			navBarLinks={usersLinks}
+			navBarCreate={{
+				accessRole: "ROLE_UI_GROUPS_CREATE",
+				text: "USERS.ACTIONS.ADD_GROUP",
+				resource: "group",
+			}}
+			caption={"USERS.GROUPS.TABLE.CAPTION"}
+			templateMap={groupsTemplateMap}
+		/>
 	);
 };
 
diff --git a/src/components/users/Users.tsx b/src/components/users/Users.tsx
index eb91f845bb..8a10ebb150 100644
--- a/src/components/users/Users.tsx
+++ b/src/components/users/Users.tsx
@@ -1,97 +1,31 @@
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import TableFilters from "../shared/TableFilters";
-import Table from "../shared/Table";
-import Notifications from "../shared/Notifications";
 import { usersTemplateMap } from "../../configs/tableConfigs/usersTableMap";
 import { getTotalUsers } from "../../selectors/userSelectors";
 import {
 	loadUsersIntoTable,
 } from "../../thunks/tableThunks";
-import { fetchFilters } from "../../slices/tableFilterSlice";
-import Header from "../Header";
-import NavBar from "../NavBar";
-import MainView from "../MainView";
-import Footer from "../Footer";
-import { useAppDispatch, useAppSelector } from "../../store";
 import { fetchUsers } from "../../slices/userSlice";
 import { usersLinks } from "./partials/UsersNavigation";
-import { resetTableProperties } from "../../slices/tableSlice";
+import TablePage from "../shared/TablePage";
 
 /**
  * This component renders the table view of users
  */
 const Users = () => {
-	const { t } = useTranslation();
-	const dispatch = useAppDispatch();
-	const [displayNavigation, setNavigation] = useState(false);
-
-	const users = useAppSelector(state => getTotalUsers(state));
-
-	useEffect(() => {
-		// State variable for interrupting the load function
-		let allowLoadIntoTable = true;
-
-		// Clear table of previous data
-		dispatch(resetTableProperties());
-
-		dispatch(fetchFilters("users"));
-
-		// Load users on mount
-		const loadUsers = async () => {
-			// Fetching users from server
-			await dispatch(fetchUsers());
-
-			// Load users into table
-			if (allowLoadIntoTable) {
-				dispatch(loadUsersIntoTable());
-			}
-		};
-		loadUsers();
-
-		// Fetch users every minute
-		const fetchUsersInterval = setInterval(loadUsers, 5000);
-
-		return () => {
-			allowLoadIntoTable = false;
-			clearInterval(fetchUsersInterval);
-		};
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
-
 	return (
-		<>
-			<Header />
-			<NavBar
-				displayNavigation={displayNavigation}
-				setNavigation={setNavigation}
-				links={usersLinks}
-				create={{
-					accessRole: "ROLE_UI_USERS_CREATE",
-					text: "USERS.ACTIONS.ADD_USER",
-					resource: "user",
-				}}
-			/>
-
-			<MainView open={displayNavigation}>
-				{/* Include notifications component */}
-				<Notifications context={"other"}/>
-
-				<div className="controls-container">
-					{/* Include filters component */}
-					<TableFilters
-						loadResource={fetchUsers}
-						loadResourceIntoTable={loadUsersIntoTable}
-						resource={"users"}
-					/>
-					<h1>{t("USERS.USERS.TABLE.CAPTION")}</h1>
-					<h4>{t("TABLE_SUMMARY", { numberOfRows: users })}</h4>
-				</div>
-				{/* Include table component */}
-				<Table templateMap={usersTemplateMap} />
-			</MainView>
-			<Footer />
-		</>
+		<TablePage
+			resource={"users"}
+			fetchResource={fetchUsers}
+			loadResourceIntoTable={loadUsersIntoTable}
+			getTotalResources={getTotalUsers}
+			navBarLinks={usersLinks}
+			navBarCreate={{
+				accessRole: "ROLE_UI_USERS_CREATE",
+				text: "USERS.ACTIONS.ADD_USER",
+				resource: "user",
+			}}
+			caption={"USERS.USERS.TABLE.CAPTION"}
+			templateMap={usersTemplateMap}
+		/>
 	);
 };