diff --git a/Client/src/Features/InfrastructureMonitors/infrastructureMonitorsSlice.js b/Client/src/Features/InfrastructureMonitors/infrastructureMonitorsSlice.js
index 7e0739cbd..f0282b28b 100644
--- a/Client/src/Features/InfrastructureMonitors/infrastructureMonitorsSlice.js
+++ b/Client/src/Features/InfrastructureMonitors/infrastructureMonitorsSlice.js
@@ -88,6 +88,7 @@ export const getInfrastructureMonitorsByTeamId = createAsyncThunk(
 				teamId: user.teamId,
 				types: ["hardware"],
 				limit: 1,
+				rowsPerPage: 0,
 			});
 			return res.data;
 		} catch (error) {
diff --git a/Client/src/Pages/Infrastructure/index.jsx b/Client/src/Pages/Infrastructure/index.jsx
index 2d45fdb74..09e1c4559 100644
--- a/Client/src/Pages/Infrastructure/index.jsx
+++ b/Client/src/Pages/Infrastructure/index.jsx
@@ -1,3 +1,12 @@
+import { useCallback, useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { /* useDispatch, */ useSelector } from "react-redux";
+import { useTheme } from "@emotion/react";
+import useUtils from "../Monitors/utils";
+import { jwtDecode } from "jwt-decode";
+import Greeting from "../../Utils/greeting";
+import GearIcon from "../../Assets/icons/settings-bold.svg?react";
+import CPUChipIcon from "../../Assets/icons/cpu-chip.svg?react";
 import {
 	Box,
 	Button,
@@ -10,23 +19,14 @@ import {
 	TableContainer,
 	TableHead,
 	TableRow,
-	// TablePagination,
-	// Typography,
 } from "@mui/material";
-import { useEffect } from "react";
-import { useNavigate } from "react-router-dom";
-import { useDispatch, useSelector } from "react-redux";
-import { useTheme } from "@emotion/react";
-import Greeting from "../../Utils/greeting";
-import GearIcon from "../../Assets/icons/settings-bold.svg?react";
-import CPUChipIcon from "../../Assets/icons/cpu-chip.svg?react";
 import Breadcrumbs from "../../Components/Breadcrumbs";
 import { StatusLabel } from "../../Components/Label";
 import { Heading } from "../../Components/Heading";
 import { Gauge } from "../../Components/Charts/Gauge";
-import { getInfrastructureMonitorsByTeamId } from "../../Features/InfrastructureMonitors/infrastructureMonitorsSlice";
-import useUtils from "../Monitors/utils";
 import { Pagination } from "./components/TablePagination";
+// import { getInfrastructureMonitorsByTeamId } from "../../Features/InfrastructureMonitors/infrastructureMonitorsSlice";
+import { networkService } from "../../Utils/NetworkService.js";
 
 // const ROWS = Array.from(Array(20).keys()).map(() => mockedData);
 
@@ -73,17 +73,54 @@ Analyze existing BasicTable
 
 function Infrastructure(/* {isAdmin} */) {
 	const theme = useTheme();
-	const { determineState } = useUtils();
-	const navigate = useNavigate();
-	const dispatch = useDispatch();
-	const { authToken } = useSelector((state) => state.auth);
-	const { isLoading, monitorsSummary, msg, success, ...rest } = useSelector(
-		(state) => state.infrastructureMonitors
-	);
 
-	const { monitorCounts = {}, monitors = [] } = monitorsSummary;
-	const { total: totalMonitors = 0 } = monitorCounts;
-	console.log({ monitors });
+	const navigate = useNavigate();
+	const navigateToCreate = () => navigate("/infrastructure/create");
+
+	const [page, setPage] = useState(0);
+	/* TODO refactor this, so it is not aware of the MUI implementation. First argument only exists because of MUI. This should require onlu the new page. Adapting for MUI should happen inside of table pagination component */
+	const handleChangePage = (_, newPage) => {
+		setPage(newPage);
+	};
+
+	const [rowsPerPage, setRowsPerPage] = useState(5);
+	const handleChangeRowsPerPage = (event) => {
+		setRowsPerPage(parseInt(event.target.value));
+		setPage(0);
+	};
+	const [monitorState, setMonitorState] = useState({ monitors: [], total: 0 });
+
+	const { authToken } = useSelector((state) => state.auth);
+	const user = jwtDecode(authToken);
+
+	const fetchMonitors = useCallback(async () => {
+		try {
+			const response = await networkService.getMonitorsByTeamId({
+				authToken,
+				teamId: user.teamId,
+				limit: 1,
+				types: ["hardware"],
+				status: null,
+				checkOrder: "desc",
+				normalize: true,
+				page: page,
+				rowsPerPage: rowsPerPage,
+			});
+			setMonitorState({
+				monitors: response?.data?.data?.monitors ?? [],
+				total: response?.data?.data?.monitorCount ?? 0,
+			});
+		} catch (error) {
+			console.error(error);
+		}
+	}, [page, rowsPerPage, authToken]);
+
+	useEffect(() => {
+		fetchMonitors();
+	}, [page, rowsPerPage]);
+
+	const { determineState } = useUtils();
+	const { monitors, total: totalMonitors } = monitorState;
 	const monitorsAsRows = monitors.map((monitor) => ({
 		ip: monitor.name,
 		status: determineState(monitor),
@@ -93,11 +130,6 @@ function Infrastructure(/* {isAdmin} */) {
 		disk: 70 /* How to retrieve that?  */,
 	}));
 
-	useEffect(() => {
-		dispatch(getInfrastructureMonitorsByTeamId(authToken));
-	}, [authToken]);
-	// console.log({ isLoading, monitorsSummary, msg, success, rest });
-
 	return (
 		<Stack
 			component="main"
@@ -120,9 +152,7 @@ function Infrastructure(/* {isAdmin} */) {
 				<Button
 					variant="contained"
 					color="primary"
-					onClick={() => {
-						navigate("/infrastructure/create");
-					}}
+					onClick={navigateToCreate}
 					sx={{ fontWeight: 500 }}
 				>
 					Create infrastructure monitor
@@ -254,14 +284,13 @@ function Infrastructure(/* {isAdmin} */) {
 						</TableBody>
 					</Table>
 				</TableContainer>
-				{/* 
-				  TODO continue creating pagination component. It should change the current page, which will trigger refetch? 
-				
-				*/}
-				{/* <Pagination
-					// monitorCount={totalMonitors}
-					page={0}
-				/> */}
+				<Pagination
+					monitorCount={totalMonitors}
+					page={page}
+					rowsPerPage={rowsPerPage}
+					handleChangePage={handleChangePage}
+					handleChangeRowsPerPage={handleChangeRowsPerPage}
+				/>
 			</Stack>
 		</Stack>
 	);
diff --git a/Client/src/Pages/Monitors/Home/MonitorTable/index.jsx b/Client/src/Pages/Monitors/Home/MonitorTable/index.jsx
index bb3f5a65a..5370496bb 100644
--- a/Client/src/Pages/Monitors/Home/MonitorTable/index.jsx
+++ b/Client/src/Pages/Monitors/Home/MonitorTable/index.jsx
@@ -115,16 +115,6 @@ const MonitorTable = ({ isAdmin, filter, setIsSearching, isSearching }) => {
 		prevFilter.current = filter;
 	}, [filter, fetchPage]);
 
-	/**
-	 * Helper function to calculate the range of displayed rows.
-	 * @returns {string}
-	 */
-	// const getRange = () => {
-	// 	let start = page * rowsPerPage + 1;
-	// 	let end = Math.min(page * rowsPerPage + rowsPerPage, monitorCount);
-	// 	return `${start} - ${end}`;
-	// };
-
 	const handleSort = async (field) => {
 		let order = "";
 		if (sort.field !== field) {
@@ -317,11 +307,11 @@ const MonitorTable = ({ isAdmin, filter, setIsSearching, isSearching }) => {
 				</Table>
 			</TableContainer>
 			<Pagination
+				monitorCount={monitorCount}
 				page={page}
 				rowsPerPage={rowsPerPage}
 				handleChangePage={handleChangePage}
 				handleChangeRowsPerPage={handleChangeRowsPerPage}
-				monitorCount={monitorCount}
 			/>
 		</Box>
 	);