diff --git a/Client/package-lock.json b/Client/package-lock.json
index febb13eb1..2bb7a3870 100644
--- a/Client/package-lock.json
+++ b/Client/package-lock.json
@@ -22,6 +22,7 @@
 				"axios": "^1.7.4",
 				"dayjs": "1.11.13",
 				"flag-icons": "7.3.2",
+				"html2pdf.js": "^0.10.2",
 				"i18next": "^24.2.2",
 				"immutability-helper": "^3.1.1",
 				"joi": "17.13.3",
@@ -2536,6 +2537,13 @@
 			"integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==",
 			"license": "MIT"
 		},
+		"node_modules/@types/raf": {
+			"version": "3.4.3",
+			"resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
+			"integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
+			"license": "MIT",
+			"optional": true
+		},
 		"node_modules/@types/react": {
 			"version": "18.3.18",
 			"resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.18.tgz",
@@ -2821,6 +2829,18 @@
 			"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
 			"license": "MIT"
 		},
+		"node_modules/atob": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+			"integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
+			"license": "(MIT OR Apache-2.0)",
+			"bin": {
+				"atob": "bin/atob.js"
+			},
+			"engines": {
+				"node": ">= 4.5.0"
+			}
+		},
 		"node_modules/available-typed-arrays": {
 			"version": "1.0.7",
 			"resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -2870,6 +2890,15 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/base64-arraybuffer": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+			"integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.6.0"
+			}
+		},
 		"node_modules/brace-expansion": {
 			"version": "1.1.11",
 			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -2913,6 +2942,18 @@
 				"node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
 			}
 		},
+		"node_modules/btoa": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
+			"integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==",
+			"license": "(MIT OR Apache-2.0)",
+			"bin": {
+				"btoa": "bin/btoa.js"
+			},
+			"engines": {
+				"node": ">= 0.4.0"
+			}
+		},
 		"node_modules/call-bind": {
 			"version": "1.0.8",
 			"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
@@ -3004,6 +3045,33 @@
 			],
 			"license": "CC-BY-4.0"
 		},
+		"node_modules/canvg": {
+			"version": "3.0.10",
+			"resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.10.tgz",
+			"integrity": "sha512-qwR2FRNO9NlzTeKIPIKpnTY6fqwuYSequ8Ru8c0YkYU7U0oW+hLUvWadLvAu1Rl72OMNiFhoLu4f8eUjQ7l/+Q==",
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"@babel/runtime": "^7.12.5",
+				"@types/raf": "^3.4.0",
+				"core-js": "^3.8.3",
+				"raf": "^3.4.1",
+				"regenerator-runtime": "^0.13.7",
+				"rgbcolor": "^1.0.1",
+				"stackblur-canvas": "^2.0.0",
+				"svg-pathdata": "^6.0.3"
+			},
+			"engines": {
+				"node": ">=10.0.0"
+			}
+		},
+		"node_modules/canvg/node_modules/regenerator-runtime": {
+			"version": "0.13.11",
+			"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+			"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+			"license": "MIT",
+			"optional": true
+		},
 		"node_modules/chalk": {
 			"version": "4.1.2",
 			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -3075,6 +3143,18 @@
 			"integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
 			"license": "MIT"
 		},
+		"node_modules/core-js": {
+			"version": "3.40.0",
+			"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.40.0.tgz",
+			"integrity": "sha512-7vsMc/Lty6AGnn7uFpYT56QesI5D2Y/UkgKounk87OP9Z2H9Z8kj6jzcSGAxFmUtDOS0ntK6lbQz+Nsa0Jj6mQ==",
+			"hasInstallScript": true,
+			"license": "MIT",
+			"optional": true,
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/core-js"
+			}
+		},
 		"node_modules/cosmiconfig": {
 			"version": "7.1.0",
 			"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
@@ -3114,6 +3194,15 @@
 				"tiny-invariant": "^1.0.6"
 			}
 		},
+		"node_modules/css-line-break": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+			"integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+			"license": "MIT",
+			"dependencies": {
+				"utrie": "^1.0.2"
+			}
+		},
 		"node_modules/csstype": {
 			"version": "3.1.3",
 			"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -3438,6 +3527,13 @@
 				"csstype": "^3.0.2"
 			}
 		},
+		"node_modules/dompurify": {
+			"version": "2.5.8",
+			"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.5.8.tgz",
+			"integrity": "sha512-o1vSNgrmYMQObbSSvF/1brBYEQPHhV1+gsmrusO7/GXtp1T9rCS8cXFqVxK/9crT1jA6Ccv+5MTSjBNqr7Sovw==",
+			"license": "(MPL-2.0 OR Apache-2.0)",
+			"optional": true
+		},
 		"node_modules/dot-case": {
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
@@ -3662,6 +3758,12 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/es6-promise": {
+			"version": "4.2.8",
+			"resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
+			"integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==",
+			"license": "MIT"
+		},
 		"node_modules/esbuild": {
 			"version": "0.21.5",
 			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
@@ -4026,6 +4128,12 @@
 				"reusify": "^1.0.4"
 			}
 		},
+		"node_modules/fflate": {
+			"version": "0.8.2",
+			"resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+			"integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+			"license": "MIT"
+		},
 		"node_modules/file-entry-cache": {
 			"version": "6.0.1",
 			"resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -4503,6 +4611,30 @@
 				"void-elements": "3.1.0"
 			}
 		},
+		"node_modules/html2canvas": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+			"integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+			"license": "MIT",
+			"dependencies": {
+				"css-line-break": "^2.1.0",
+				"text-segmentation": "^1.0.3"
+			},
+			"engines": {
+				"node": ">=8.0.0"
+			}
+		},
+		"node_modules/html2pdf.js": {
+			"version": "0.10.2",
+			"resolved": "https://registry.npmjs.org/html2pdf.js/-/html2pdf.js-0.10.2.tgz",
+			"integrity": "sha512-WyHVeMb18Bp7vYTmBv1GVsThH//K7SRfHdSdhHPkl4JvyQarNQXnailkYn0QUbRRmnN5rdbbmSIGEsPZtzPy2Q==",
+			"license": "MIT",
+			"dependencies": {
+				"es6-promise": "^4.2.5",
+				"html2canvas": "^1.0.0",
+				"jspdf": "^2.3.1"
+			}
+		},
 		"node_modules/i18next": {
 			"version": "24.2.2",
 			"resolved": "https://registry.npmjs.org/i18next/-/i18next-24.2.2.tgz",
@@ -5152,6 +5284,24 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/jspdf": {
+			"version": "2.5.2",
+			"resolved": "https://registry.npmjs.org/jspdf/-/jspdf-2.5.2.tgz",
+			"integrity": "sha512-myeX9c+p7znDWPk0eTrujCzNjT+CXdXyk7YmJq5nD5V7uLLKmSXnlQ/Jn/kuo3X09Op70Apm0rQSnFWyGK8uEQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/runtime": "^7.23.2",
+				"atob": "^2.1.2",
+				"btoa": "^1.2.1",
+				"fflate": "^0.8.1"
+			},
+			"optionalDependencies": {
+				"canvg": "^3.0.6",
+				"core-js": "^3.6.0",
+				"dompurify": "^2.5.4",
+				"html2canvas": "^1.0.0-rc.5"
+			}
+		},
 		"node_modules/jsx-ast-utils": {
 			"version": "3.3.5",
 			"resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
@@ -5702,6 +5852,13 @@
 				"pbf": "bin/pbf"
 			}
 		},
+		"node_modules/performance-now": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+			"integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+			"license": "MIT",
+			"optional": true
+		},
 		"node_modules/picocolors": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -5856,6 +6013,16 @@
 			"integrity": "sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g==",
 			"license": "ISC"
 		},
+		"node_modules/raf": {
+			"version": "3.4.1",
+			"resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+			"integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"performance-now": "^2.1.0"
+			}
+		},
 		"node_modules/raf-schd": {
 			"version": "4.0.3",
 			"resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz",
@@ -6215,6 +6382,16 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/rgbcolor": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+			"integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+			"license": "MIT OR SEE LICENSE IN FEEL-FREE.md",
+			"optional": true,
+			"engines": {
+				"node": ">= 0.8.15"
+			}
+		},
 		"node_modules/rimraf": {
 			"version": "3.0.2",
 			"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -6522,6 +6699,16 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/stackblur-canvas": {
+			"version": "2.7.0",
+			"resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
+			"integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
+			"license": "MIT",
+			"optional": true,
+			"engines": {
+				"node": ">=0.1.14"
+			}
+		},
 		"node_modules/string.prototype.matchall": {
 			"version": "4.0.12",
 			"resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz",
@@ -6692,6 +6879,25 @@
 			"integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==",
 			"license": "MIT"
 		},
+		"node_modules/svg-pathdata": {
+			"version": "6.0.3",
+			"resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+			"integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+			"license": "MIT",
+			"optional": true,
+			"engines": {
+				"node": ">=12.0.0"
+			}
+		},
+		"node_modules/text-segmentation": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+			"integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+			"license": "MIT",
+			"dependencies": {
+				"utrie": "^1.0.2"
+			}
+		},
 		"node_modules/text-table": {
 			"version": "0.2.0",
 			"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -6889,6 +7095,15 @@
 				"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
 			}
 		},
+		"node_modules/utrie": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+			"integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+			"license": "MIT",
+			"dependencies": {
+				"base64-arraybuffer": "^1.0.2"
+			}
+		},
 		"node_modules/victory-vendor": {
 			"version": "36.9.2",
 			"resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
diff --git a/Client/package.json b/Client/package.json
index 7ecc398c0..a658f95a5 100644
--- a/Client/package.json
+++ b/Client/package.json
@@ -25,6 +25,7 @@
 		"axios": "^1.7.4",
 		"dayjs": "1.11.13",
 		"flag-icons": "7.3.2",
+		"html2pdf.js": "^0.10.2",
 		"i18next": "^24.2.2",
 		"immutability-helper": "^3.1.1",
 		"joi": "17.13.3",
diff --git a/Client/src/Components/MonitorStatusHeader/ReportDownloadButton/index.jsx b/Client/src/Components/MonitorStatusHeader/ReportDownloadButton/index.jsx
new file mode 100644
index 000000000..721172c15
--- /dev/null
+++ b/Client/src/Components/MonitorStatusHeader/ReportDownloadButton/index.jsx
@@ -0,0 +1,79 @@
+    import { useState } from "react";
+    import { Box, Button } from "@mui/material";
+    import { useTheme } from "@mui/material/styles";
+    import { useSelector } from "react-redux";
+    import FileDownloadIcon from "@mui/icons-material/FileDownload";
+    import Select from "../../Inputs/Select";
+    import { downloadReport } from "../../../Utils/Report/downloadReport";
+    import PropTypes from "prop-types";
+    import { networkService } from "../../../Utils/NetworkService";
+
+    const options = [
+        { _id: "html", name: "HTML Report" },
+        { _id: "pdf", name: "Pdf Report" },
+    ];
+
+    const ReportDownloadButton = ({ monitorId, certificateExpiry, dateRange }) => {
+        const [downloadFormat, setDownloadFormat] = useState(options[1]._id);
+        const theme = useTheme();
+        const { authToken } = useSelector((state) => state.auth);
+
+        const handleDownload = async () => {
+            try {
+                const monitor = await networkService.getStatsByMonitorId({
+                    authToken: authToken,
+                    monitorId: monitorId,
+                    dateRange: dateRange,
+                    normalize: true,
+                });
+                await downloadReport({
+                    monitorData: monitor?.data?.data,
+                    downloadFormat,
+                    certificateExpiry,
+                });
+            } finally {
+                setDownloadFormat(options[1]._id);
+            }
+        };
+
+        return (
+            <Box
+                alignSelf="flex-end"
+                display="flex"
+                alignItems="center"
+            >
+                <Select
+                    id="report-format-select"
+                    value={downloadFormat}
+                    onChange={(e) => setDownloadFormat(e.target.value)}
+                    items={options}
+                />
+                <Button
+                    variant="contained"
+                    color="secondary"
+                    onClick={handleDownload}
+                    disabled={!downloadFormat}
+                    sx={{
+                        px: theme.spacing(5),
+                        "& svg": {
+                            mr: theme.spacing(3),
+                            "& path": {
+                                /* Should always be contrastText for the button color */
+                                stroke: theme.palette.secondary.contrastText,
+                            },
+                        },
+                    }}
+                >
+                    <FileDownloadIcon />
+                </Button>
+            </Box>
+        );
+    };
+
+    ReportDownloadButton.propTypes = {
+        monitorId: PropTypes.string.isRequired,
+        certificateExpiry: PropTypes.string,
+        dateRange: PropTypes.string.isRequired,
+    };
+
+    export default ReportDownloadButton;
diff --git a/Client/src/Components/MonitorStatusHeader/index.jsx b/Client/src/Components/MonitorStatusHeader/index.jsx
index cbbba52b2..1d07c6521 100644
--- a/Client/src/Components/MonitorStatusHeader/index.jsx
+++ b/Client/src/Components/MonitorStatusHeader/index.jsx
@@ -5,10 +5,11 @@ import { useTheme } from "@emotion/react";
 import useUtils from "../../Pages/Uptime/Monitors/Hooks/useUtils";
 import { formatDurationRounded } from "../../Utils/timeUtils";
 import ConfigButton from "./ConfigButton";
+import ReportDownloadButton from "./ReportDownloadButton";
 import SkeletonLayout from "./skeleton";
 import PropTypes from "prop-types";
 
-const MonitorStatusHeader = ({ path, shouldRender = true, isAdmin, monitor }) => {
+const MonitorStatusHeader = ({children, path, shouldRender = true, isAdmin, monitor}) => {
 	const theme = useTheme();
 	const { statusColor, statusMsg, determineState } = useUtils();
 	if (!shouldRender) {
@@ -37,16 +38,24 @@ const MonitorStatusHeader = ({ path, shouldRender = true, isAdmin, monitor }) =>
 					</Typography>
 				</Stack>
 			</Stack>
+			<Stack
+				direction="row"
+				alignItems="center"
+				gap={theme.spacing(2)}
+			>
 			<ConfigButton
 				path={path}
 				shouldRender={isAdmin}
 				monitorId={monitor?._id}
 			/>
+			{children && children}
+			</Stack>
 		</Stack>
 	);
 };
 
 MonitorStatusHeader.propTypes = {
+	children: PropTypes.node,
 	path: PropTypes.string.isRequired,
 	shouldRender: PropTypes.bool,
 	isAdmin: PropTypes.bool,
diff --git a/Client/src/Pages/Uptime/Details/index.jsx b/Client/src/Pages/Uptime/Details/index.jsx
index 3063ba27a..97e9ba842 100644
--- a/Client/src/Pages/Uptime/Details/index.jsx
+++ b/Client/src/Pages/Uptime/Details/index.jsx
@@ -19,6 +19,7 @@ import { useIsAdmin } from "../../../Hooks/useIsAdmin";
 import useMonitorFetch from "./Hooks/useMonitorFetch";
 import useCertificateFetch from "./Hooks/useCertificateFetch";
 import useChecksFetch from "./Hooks/useChecksFetch";
+import ReportDownloadButton from "../../../Components/MonitorStatusHeader/ReportDownloadButton";
 
 // Constants
 const BREADCRUMBS = [
@@ -68,7 +69,6 @@ const UptimeDetails = () => {
 		page,
 		rowsPerPage,
 	});
-
 	// Handlers
 	const handlePageChange = (_, newPage) => {
 		setPage(newPage);
@@ -119,7 +119,13 @@ const UptimeDetails = () => {
 				isAdmin={isAdmin}
 				shouldRender={!monitorIsLoading}
 				monitor={monitor}
-			/>
+			>
+				{isAdmin && <ReportDownloadButton
+					monitorId={monitorId}
+					certificateExpiry={certificateExpiry}
+					dateRange={dateRange}
+				/>}
+			</MonitorStatusHeader>
 			<UptimeStatusBoxes
 				shouldRender={!monitorIsLoading}
 				monitor={monitor}
diff --git a/Client/src/Utils/Report/downloadReport.jsx b/Client/src/Utils/Report/downloadReport.jsx
new file mode 100644
index 000000000..bdcb7f575
--- /dev/null
+++ b/Client/src/Utils/Report/downloadReport.jsx
@@ -0,0 +1,62 @@
+import { createRoot } from "react-dom/client";
+import { ProductReport } from "./report";
+import html2pdf from "html2pdf.js";
+
+export const downloadReport = ({ monitorData, downloadFormat, certificateExpiry }) => {
+	// Create a detached div to render the report
+	const tempDiv = document.createElement("div"); // Create a promise to handle the rendering and download
+	return new Promise((resolve) => {
+		// Use ReactDOM to render the report into the detached div
+		const reportRoot = createRoot(tempDiv);
+		reportRoot.render(
+			<ProductReport
+				monitorData={monitorData}
+				certificateExpiry={certificateExpiry}
+			/>
+		); 
+		
+		//setTimeout to allow the rendering to complete from React rendering and browser engine DOM updates. 
+		setTimeout(() => {
+			try {
+				// Create the HTML content from the detached div
+				const htmlContent = `
+					<!DOCTYPE html>
+					<html lang="en">
+					<head>
+					<meta charset="UTF-8">
+					<meta name="viewport" content="width=device-width, initial-scale=1.0">
+					<title>Product Report</title>
+					</head>
+					<body>
+					${tempDiv.innerHTML}
+					</body>
+					</html>`;
+				if (downloadFormat === "html") {
+					// Create and trigger HTML download
+					const blob = new Blob([htmlContent], { type: "text/html" });
+					const url = URL.createObjectURL(blob);
+					const a = document.createElement("a");
+					a.href = url;
+					a.download = `${monitorData.name}-monitor-report-${new Date().toISOString().split("T")[0]}.html`;
+					// Programmatically trigger download
+					a.style.display = "none"; // prevent page jump
+					document.body.appendChild(a); // required for firefox to work properly
+					a.click(); // Cleanup
+					document.body.removeChild(a);
+					URL.revokeObjectURL(url);
+				} else if (downloadFormat === "pdf") {
+					// Create and trigger PDF download
+					html2pdf()
+						.from(htmlContent)
+						.save(
+							`${monitorData.name}-monitor-report-${new Date().toISOString().split("T")[0]}.pdf`
+						);
+				}
+			} finally {
+				// Always cleanup
+				reportRoot.unmount();
+				resolve();
+			}
+		}, 0);
+	});
+};
diff --git a/Client/src/Utils/Report/report.jsx b/Client/src/Utils/Report/report.jsx
new file mode 100644
index 000000000..0cddd7314
--- /dev/null
+++ b/Client/src/Utils/Report/report.jsx
@@ -0,0 +1,123 @@
+import "./reportStyles.css";
+import { formatDurationRounded, formatDateWithWeekday } from "../timeUtils";
+import { calculateDowntimeCount, calculatePingStats, calculateActiveRanges} from "./reportUtils";
+import PropTypes from 'prop-types';
+
+
+
+export const ProductReport = ({ monitorData, certificateExpiry }) => {
+	const pingStats = calculatePingStats(monitorData.checks);
+
+	const activeRanges = calculateActiveRanges(monitorData.checks);
+
+	return (
+		<div className="product-report">
+			<div id="report-content">
+				<h1>{monitorData.name} - monitoring report</h1>
+				<p>Report generated on {new Date().toLocaleString()}</p>
+				<hr />
+				<div>
+					<div>
+						<h2>Basic information</h2>
+						<div>
+							<p>
+								<span className="info-title">Site url:</span> {monitorData.url}
+							</p>
+							<p>
+								<span className="info-title">Date added:</span>{" "}
+								{formatDateWithWeekday(monitorData.createdAt)}
+							</p>
+							<p>
+								<span className="info-title">Certificate expiration:</span>{" "}
+								{certificateExpiry}
+							</p>
+						</div>
+					</div>
+					<hr />
+					<div>
+						<h2>Availability statistics</h2>
+						<div>
+							<p>
+								<span className="info-title">Downtime count:</span>{" "}
+								{calculateDowntimeCount(monitorData.checks)}{" "}
+							</p>
+							<p>
+								<span className="info-title">Uptime percentage:</span>{" "}
+								{Math.round(monitorData.periodUptime)} %
+							</p>
+							<p>
+								<span className="info-title">Last checked:</span>{" "}
+								{formatDateWithWeekday(monitorData.updatedAt)}
+							</p>
+						</div>
+					</div>
+					<hr />
+					<div>
+						<h2>Performance metrics</h2>
+						<div>
+							<p>
+								<span className="info-title">Minimum ping:</span>{" "}
+								{pingStats.min > 2000
+									? (pingStats.min / 1000).toFixed(2) + "s"
+									: pingStats.min + "ms"}
+							</p>
+							<p>
+								<span className="info-title">Maximum ping:</span>{" "}
+								{pingStats.max > 2000
+									? (pingStats.max / 1000).toFixed(2) + "s"
+									: pingStats.max + "ms"}
+							</p>
+							<p>
+								<span className="info-title">Average ping:</span>{" "}
+								{Math.round(monitorData.periodAvgResponseTime)}ms
+							</p>
+						</div>
+					</div>
+					<hr />
+					<div>
+						<h2>Monitoring details</h2>
+						<div>
+							<p>
+								<span className="info-title">Total incidents:</span>{" "}
+								{monitorData.periodIncidents}
+							</p>
+							<p>
+								<span className="info-title">Total checks:</span>{" "}
+								{monitorData.periodTotalChecks}
+							</p>
+							<p>
+								<span className="info-title">Check interval:</span>{" "}
+								{formatDurationRounded(monitorData.interval)}
+							</p>
+						</div>
+					</div>
+					<hr />
+					<div>
+						<h2>Activity times</h2>
+						<div>
+							<p>
+								<span className="info-title">Active time:</span>{" "}
+								{monitorData.isActive
+									? formatDurationRounded(monitorData.uptimeDuration)
+									: "0 sec"}
+							</p>
+							<p>
+								<span className="info-title">Maximum active time:</span>{" "}
+								{formatDurationRounded(activeRanges.max)}
+							</p>
+							<p>
+								<span className="info-title">Minimum active time:</span>{" "}
+								{formatDurationRounded(activeRanges.min)}
+							</p>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+ProductReport.propTypes = {
+	monitorData: PropTypes.object.isRequired,
+	certificateExpiry: PropTypes.string.isRequired,
+};
diff --git a/Client/src/Utils/Report/reportStyles.css b/Client/src/Utils/Report/reportStyles.css
new file mode 100644
index 000000000..a261e220b
--- /dev/null
+++ b/Client/src/Utils/Report/reportStyles.css
@@ -0,0 +1,20 @@
+.product-report{
+    display: flex;
+    padding: 1rem;
+    color: rgb(36, 36, 36);
+    padding: 25px;
+}
+
+.report-content{
+
+}
+
+.info-title {
+    font-weight:600;
+}
+
+hr{
+    border: 0; 
+    border-top: 1px solid #ddd;
+    width: 700px;
+}
\ No newline at end of file
diff --git a/Client/src/Utils/Report/reportUtils.js b/Client/src/Utils/Report/reportUtils.js
new file mode 100644
index 000000000..0aac8a732
--- /dev/null
+++ b/Client/src/Utils/Report/reportUtils.js
@@ -0,0 +1,71 @@
+export const calculateDowntimeCount = (checks) => {
+    if (!checks || checks.length < 2) return 0;
+
+    let downtimeCount = 0;
+    for (let i = 0; i < checks.length - 1; i++) {
+        const currentCheck = checks[i];
+        const nextCheck = checks[i + 1];
+
+        if (currentCheck.status === true && nextCheck.status === false) {
+            downtimeCount++;
+        }
+    }
+    return downtimeCount;
+};
+
+export const calculatePingStats = (checks) => {
+    if (!checks || checks.length === 0) return { min: 0, max: 0 };
+
+    let min = Number.MAX_SAFE_INTEGER;
+    let max = 0;
+
+    checks.forEach((check) => {
+        if (check.originalResponseTime) {
+            min = Math.min(min, check.originalResponseTime);
+            max = Math.max(max, check.originalResponseTime);
+        }
+    });
+
+    return {
+        min: min === Number.MAX_SAFE_INTEGER ? 0 : min,
+        max: max,
+    };
+};
+
+export const calculateActiveRanges = (checks) => {
+    if (!checks || checks.length < 2) return { min: 0, max: 0 };
+
+    const durations = [];
+    let startTime = null;
+
+    for (let i = checks.length - 1; i >= 0; i--) {
+        const check = checks[i];
+
+        if (check.status && !startTime) {
+            startTime = new Date(check.createdAt);
+        }
+
+        if (!check.status && startTime) {
+            const endTime = new Date(check.createdAt);
+            const duration = endTime - startTime;
+            if (duration > 0) {
+                durations.push(duration);
+            }
+            startTime = null;
+        }
+    }
+
+    // Handle case where site is currently up
+    if (startTime && checks[0].status) {
+        const now = new Date();
+        const duration = now - startTime;
+        durations.push(duration);
+    }
+
+    return durations.length
+        ? {
+                min: Math.min(...durations),
+                max: Math.max(...durations),
+            }
+        : { min: 0, max: 0 };
+};
\ No newline at end of file
diff --git a/Client/src/Utils/timeUtils.js b/Client/src/Utils/timeUtils.js
index 2fd6c6654..e1702b9b0 100644
--- a/Client/src/Utils/timeUtils.js
+++ b/Client/src/Utils/timeUtils.js
@@ -111,6 +111,19 @@ export const formatDate = (date, customOptions) => {
 		.replace(/\b(AM|PM)\b/g, (match) => match.toLowerCase());
 };
 
+export const formatDateWithWeekday = (date) => {
+	const options = {
+				weekday: "short",
+				year: "numeric",
+				month: "long",
+				day: "numeric",
+				hour: "numeric",
+				minute: "numeric",
+				hour12: true,
+			};
+			return new Intl.DateTimeFormat("en-US", options).format(new Date(date));
+}
+
 export const formatDateWithTz = (timestamp, format, timezone) => {
 	const formattedDate = dayjs(timestamp).tz(timezone).format(format);
 	return formattedDate;