diff --git a/client/src/Hooks/useStatusPageForm.ts b/client/src/Hooks/useStatusPageForm.ts
index 40fff6fda..a079095cc 100644
--- a/client/src/Hooks/useStatusPageForm.ts
+++ b/client/src/Hooks/useStatusPageForm.ts
@@ -28,7 +28,7 @@ export const useStatusPageForm = ({
 			url: data?.url || generateDefaultUrl(),
 			timezone: data?.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone,
 			color: data?.color || "#4169E1",
-			monitors: monitors?.map((m) => m.id) || [],
+			monitors: data?.monitors || [],
 			isPublished: data?.isPublished ?? false,
 			showCharts: data?.showCharts ?? true,
 			showUptimePercentage: data?.showUptimePercentage ?? true,
diff --git a/server/src/controllers/statusPageController.ts b/server/src/controllers/statusPageController.ts
index 3271e39a1..f9cca161e 100644
--- a/server/src/controllers/statusPageController.ts
+++ b/server/src/controllers/statusPageController.ts
@@ -82,7 +82,15 @@ class StatusPageController {
 			const showURL = settings.showURL;
 
 			const monitors = await this.monitorsRepository.findByIds(statusPage.monitors);
-			const normalizedMonitors = monitors.map((monitor) => {
+			// Sort monitors according to the order in statusPage.monitors
+			const monitorOrder = new Map(statusPage.monitors.map((id, index) => [id, index]));
+			const sortedMonitors = [...monitors].sort((a, b) => {
+				const orderA = monitorOrder.get(a.id) ?? Number.MAX_SAFE_INTEGER;
+				const orderB = monitorOrder.get(b.id) ?? Number.MAX_SAFE_INTEGER;
+				return orderA - orderB;
+			});
+
+			const normalizedMonitors = sortedMonitors.map((monitor) => {
 				const normalizedChecks = NormalizeData(monitor.recentChecks, 10, 100);
 				if (!showURL) {
 					const { url, port, secret, notifications, ...rest } = monitor;