diff --git a/migrations/20260412120000_add_page_monitor_groups.ts b/migrations/20260412120000_add_page_monitor_groups.ts
new file mode 100644
index 000000000..1288e9404
--- /dev/null
+++ b/migrations/20260412120000_add_page_monitor_groups.ts
@@ -0,0 +1,87 @@
+import type { Knex } from "knex";
+
+export async function up(knex: Knex): Promise<void> {
+  if (!(await knex.schema.hasTable("pages_monitor_groups"))) {
+    await knex.schema.createTable("pages_monitor_groups", (table) => {
+      table.increments("id").primary();
+      table.integer("page_id").unsigned().notNullable();
+      table.string("name", 255).notNullable();
+      table.text("description").nullable();
+      table.boolean("default_expanded").notNullable().defaultTo(false);
+      table.boolean("adopt_child_status").notNullable().defaultTo(false);
+      table.integer("position").notNullable().defaultTo(0);
+      table.timestamp("created_at").defaultTo(knex.fn.now());
+      table.timestamp("updated_at").defaultTo(knex.fn.now());
+
+      table.foreign("page_id").references("id").inTable("pages").onDelete("CASCADE");
+      table.index(["page_id"], "idx_pages_monitor_groups_page_id");
+      table.index(["page_id", "position"], "idx_pages_monitor_groups_page_id_position");
+    });
+  }
+
+  if (
+    (await knex.schema.hasTable("pages_monitor_groups")) &&
+    !(await knex.schema.hasColumn("pages_monitor_groups", "description"))
+  ) {
+    await knex.schema.alterTable("pages_monitor_groups", (table) => {
+      table.text("description").nullable();
+    });
+  }
+
+  if (
+    (await knex.schema.hasTable("pages_monitor_groups")) &&
+    !(await knex.schema.hasColumn("pages_monitor_groups", "default_expanded"))
+  ) {
+    await knex.schema.alterTable("pages_monitor_groups", (table) => {
+      table.boolean("default_expanded").notNullable().defaultTo(false);
+    });
+  }
+
+  if ((await knex.schema.hasTable("pages_monitors")) && !(await knex.schema.hasColumn("pages_monitors", "page_monitor_group_id"))) {
+    await knex.schema.alterTable("pages_monitors", (table) => {
+      table.integer("page_monitor_group_id").unsigned().nullable();
+      table
+        .foreign("page_monitor_group_id")
+        .references("id")
+        .inTable("pages_monitor_groups")
+        .onDelete("SET NULL");
+      table.index(["page_monitor_group_id"], "idx_pages_monitors_group_id");
+    });
+  }
+}
+
+export async function down(knex: Knex): Promise<void> {
+  if ((await knex.schema.hasTable("pages_monitors")) && (await knex.schema.hasColumn("pages_monitors", "page_monitor_group_id"))) {
+    try {
+      await knex.schema.alterTable("pages_monitors", (table) => {
+        table.dropIndex(["page_monitor_group_id"], "idx_pages_monitors_group_id");
+      });
+    } catch {}
+
+    try {
+      await knex.schema.alterTable("pages_monitors", (table) => {
+        table.dropForeign(["page_monitor_group_id"]);
+      });
+    } catch {}
+
+    await knex.schema.alterTable("pages_monitors", (table) => {
+      table.dropColumn("page_monitor_group_id");
+    });
+  }
+
+  if (await knex.schema.hasTable("pages_monitor_groups")) {
+    try {
+      await knex.schema.alterTable("pages_monitor_groups", (table) => {
+        table.dropIndex(["page_id", "position"], "idx_pages_monitor_groups_page_id_position");
+      });
+    } catch {}
+
+    try {
+      await knex.schema.alterTable("pages_monitor_groups", (table) => {
+        table.dropIndex(["page_id"], "idx_pages_monitor_groups_page_id");
+      });
+    } catch {}
+  }
+
+  await knex.schema.dropTableIfExists("pages_monitor_groups");
+}
diff --git a/src/lib/allPerms.ts b/src/lib/allPerms.ts
index a95186644..3ac52c152 100644
--- a/src/lib/allPerms.ts
+++ b/src/lib/allPerms.ts
@@ -14,7 +14,7 @@
  * maintenances.write → createMaintenance, updateMaintenance, deleteMaintenance, createMaintenanceEvent, updateMaintenanceEvent, deleteMaintenanceEvent, addMonitorToMaintenance, removeMonitorFromMaintenance, updateMaintenanceMonitorImpact
  *
  * pages.read         → getPages
- * pages.write        → createPage, updatePage, deletePage, addMonitorToPage, removeMonitorFromPage, reorderPageMonitors
+ * pages.write        → createPage, updatePage, deletePage, addMonitorToPage, removeMonitorFromPage, reorderPageMonitors, createPageMonitorGroup, updatePageMonitorGroup, deletePageMonitorGroup, movePageMonitorToGroup, reorderPageTopLevelItems, reorderPageGroupMonitors, replacePageMonitorStructure
  *
  * triggers.read      → getTriggers
  * triggers.write     → createUpdateTrigger, updateMonitorTriggers, deleteTrigger, testTrigger
@@ -162,6 +162,13 @@ export const ACTION_PERMISSION_MAP: Record<string, string | null> = {
   addMonitorToPage: "pages.write",
   removeMonitorFromPage: "pages.write",
   reorderPageMonitors: "pages.write",
+  createPageMonitorGroup: "pages.write",
+  updatePageMonitorGroup: "pages.write",
+  deletePageMonitorGroup: "pages.write",
+  movePageMonitorToGroup: "pages.write",
+  reorderPageTopLevelItems: "pages.write",
+  reorderPageGroupMonitors: "pages.write",
+  replacePageMonitorStructure: "pages.write",
 
   // Triggers
   getTriggers: "triggers.read",
diff --git a/src/lib/components/GroupDayDetail.svelte b/src/lib/components/GroupDayDetail.svelte
new file mode 100644
index 000000000..a24fbdbf5
--- /dev/null
+++ b/src/lib/components/GroupDayDetail.svelte
@@ -0,0 +1,221 @@
+<script lang="ts">
+  import { t } from "$lib/stores/i18n";
+  import * as Dialog from "$lib/components/ui/dialog/index.js";
+  import { Skeleton } from "$lib/components/ui/skeleton/index.js";
+  import LoaderBoxes from "$lib/components/loaderbox.svelte";
+  import * as Tabs from "$lib/components/ui/tabs/index.js";
+  import { page } from "$app/state";
+  import IncidentItem from "$lib/components/IncidentItem.svelte";
+  import MaintenanceItem from "$lib/components/MaintenanceItem.svelte";
+  import MinuteGrid from "$lib/components/MinuteGrid.svelte";
+  import clientResolver from "$lib/client/resolver.js";
+  import { resolve } from "$app/paths";
+  import type { IncidentForMonitorListWithComments, MaintenanceEventsMonitorList } from "$lib/server/types/db";
+  import { formatDate } from "$lib/stores/datetime";
+  import trackEvent from "$lib/beacon";
+
+  interface DayDetailData {
+    minutes: Array<{
+      timestamp: number;
+      status: string;
+    }>;
+    uptime: string;
+  }
+
+  interface Props {
+    open: boolean;
+    groupName: string;
+    monitorTags: string[];
+    selectedDay: {
+      timestamp: number;
+      status: string;
+    } | null;
+  }
+
+  let { open = $bindable(), groupName, monitorTags, selectedDay }: Props = $props();
+
+  let activeView = $state<"status" | "incidents" | "maintenances">("status");
+
+  let requestBody = $derived.by(() => {
+    if (!open || !selectedDay) return null;
+
+    return {
+      tags: monitorTags,
+      startOfDayTodayAtTz: selectedDay.timestamp,
+      nowAtTz: Math.min(selectedDay.timestamp + 86400 - 60, page.data.nowAtTz),
+    };
+  });
+
+  async function fetchJson<T>(path: string, body: Record<string, unknown>): Promise<T> {
+    const response = await fetch(clientResolver(resolve, path), {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body),
+    });
+
+    if (!response.ok) {
+      throw new Error(`Request failed for ${path}`);
+    }
+
+    return response.json() as Promise<T>;
+  }
+
+  let dayDetailPromise = $derived(
+    requestBody ? fetchJson<DayDetailData>("/dashboard-apis/group-day-status", requestBody) : null,
+  );
+  let dayIncidentsPromise = $derived(
+    requestBody
+      ? fetchJson<{ incidents: IncidentForMonitorListWithComments[] }>("/dashboard-apis/group-day-incidents", requestBody)
+      : null,
+  );
+  let dayMaintenancesPromise = $derived(
+    requestBody
+      ? fetchJson<{ maintenances: MaintenanceEventsMonitorList[] }>("/dashboard-apis/group-day-maintenances", requestBody)
+      : null,
+  );
+
+  function handleTabChange(view: string) {
+    activeView = view as "status" | "incidents" | "maintenances";
+    if (open) {
+      trackEvent("group_day_tab_changed", { view: activeView, groupName });
+    }
+  }
+</script>
+
+<Dialog.Root bind:open>
+  <Dialog.Overlay class="backdrop-blur-[2px]" />
+  <Dialog.Content class="max-h-[90vh] overflow-y-auto rounded-3xl p-4 sm:max-w-[46.5rem] sm:p-6">
+    <Dialog.Header>
+      <Dialog.Title class="flex items-center gap-2 text-base sm:text-lg">
+        <span class="truncate">
+          {selectedDay ? $formatDate(new Date(selectedDay.timestamp * 1000), page.data.dateAndTimeFormat.dateOnly) : ""}
+        </span>
+      </Dialog.Title>
+      <Dialog.Description class="text-xs sm:text-sm">
+        {$t("Minute-by-minute status data for this day")}
+        {#if groupName}
+          <span class="text-foreground/80"> · {groupName}</span>
+        {/if}
+      </Dialog.Description>
+    </Dialog.Header>
+
+    <Tabs.Root value={activeView} onValueChange={handleTabChange} class="bg-background ktabs w-full overflow-hidden rounded-3xl border">
+      <Tabs.List
+        class="scrollbar-hidden h-auto w-full justify-start gap-1 overflow-x-auto rounded-none px-2 py-2 sm:justify-end"
+      >
+        <Tabs.Trigger value="status" class="shrink-0 rounded-3xl px-2 py-1.5 text-xs sm:px-3 sm:py-2 sm:text-sm">
+          {$t("Status")}
+        </Tabs.Trigger>
+        <Tabs.Trigger value="incidents" class="shrink-0 rounded-3xl px-2 py-1.5 text-xs sm:px-3 sm:py-2 sm:text-sm">
+          {$t("Incidents")}
+        </Tabs.Trigger>
+        <Tabs.Trigger
+          value="maintenances"
+          class="shrink-0 rounded-3xl px-2 py-1.5 text-xs sm:px-3 sm:py-2 sm:text-sm"
+        >
+          {$t("Maintenances")}
+        </Tabs.Trigger>
+      </Tabs.List>
+
+      <Tabs.Content value="status" class="p-2 sm:p-4">
+        {#if dayDetailPromise}
+          {#await dayDetailPromise}
+            <div class="space-y-4 py-4">
+              <div class="flex items-center justify-between">
+                <Skeleton class="h-6 w-32" />
+                <Skeleton class="h-6 w-24" />
+              </div>
+              <div class="flex flex-wrap">
+                <LoaderBoxes />
+              </div>
+            </div>
+          {:then dayDetailData}
+            <MinuteGrid minutes={dayDetailData.minutes} uptime={dayDetailData.uptime} />
+          {:catch}
+            <div class="py-8 text-center">
+              <p class="text-muted-foreground">{$t("Failed to load status data for this day")}</p>
+            </div>
+          {/await}
+        {:else}
+          <div class="py-8 text-center">
+            <p class="text-muted-foreground">{$t("Failed to load status data for this day")}</p>
+          </div>
+        {/if}
+      </Tabs.Content>
+
+      <Tabs.Content value="incidents" class="p-2 sm:p-4">
+        {#if dayIncidentsPromise}
+          {#await dayIncidentsPromise}
+            <div class="space-y-4 py-4">
+              <div class="flex items-center justify-between">
+                <Skeleton class="h-6 w-32" />
+                <Skeleton class="h-6 w-24" />
+              </div>
+              <Skeleton class="h-64 w-full" />
+            </div>
+          {:then result}
+            {#if result.incidents.length > 0}
+              <div class="space-y-4">
+                <div class="scrollbar-hidden flex max-h-100 flex-col gap-4 overflow-y-auto">
+                  {#each result.incidents as incident (incident.id)}
+                    <div class="border-b pb-5 last:border-b-0">
+                      <IncidentItem {incident} hideMonitors={false} showComments={false} showSummary={false} />
+                    </div>
+                  {/each}
+                </div>
+              </div>
+            {:else}
+              <div class="py-8 text-center">
+                <p class="text-muted-foreground">{$t("No incidents for this day")}</p>
+              </div>
+            {/if}
+          {:catch}
+            <div class="py-8 text-center">
+              <p class="text-muted-foreground">{$t("No incidents for this day")}</p>
+            </div>
+          {/await}
+        {:else}
+          <div class="py-8 text-center">
+            <p class="text-muted-foreground">{$t("No incidents for this day")}</p>
+          </div>
+        {/if}
+      </Tabs.Content>
+
+      <Tabs.Content value="maintenances" class="p-2 sm:p-4">
+        {#if dayMaintenancesPromise}
+          {#await dayMaintenancesPromise}
+            <div class="space-y-4 py-4">
+              <div class="flex items-center justify-between">
+                <Skeleton class="h-6 w-32" />
+                <Skeleton class="h-6 w-24" />
+              </div>
+              <Skeleton class="h-64 w-full" />
+            </div>
+          {:then result}
+            {#if result.maintenances.length > 0}
+              <div class="scrollbar-hidden flex max-h-100 flex-col gap-4 space-y-4 overflow-y-auto">
+                {#each result.maintenances as maintenance (maintenance.id)}
+                  <div class="border-b pb-5 last:border-b-0">
+                    <MaintenanceItem {maintenance} hideMonitors={false} />
+                  </div>
+                {/each}
+              </div>
+            {:else}
+              <div class="py-8 text-center">
+                <p class="text-muted-foreground">{$t("No maintenances for this day")}</p>
+              </div>
+            {/if}
+          {:catch}
+            <div class="py-8 text-center">
+              <p class="text-muted-foreground">{$t("No maintenances for this day")}</p>
+            </div>
+          {/await}
+        {:else}
+          <div class="py-8 text-center">
+            <p class="text-muted-foreground">{$t("No maintenances for this day")}</p>
+          </div>
+        {/if}
+      </Tabs.Content>
+    </Tabs.Root>
+  </Dialog.Content>
+</Dialog.Root>
diff --git a/src/lib/components/GroupMonitorInlineExpansion.svelte b/src/lib/components/GroupMonitorInlineExpansion.svelte
new file mode 100644
index 000000000..14512a97b
--- /dev/null
+++ b/src/lib/components/GroupMonitorInlineExpansion.svelte
@@ -0,0 +1,135 @@
+<script lang="ts">
+  import { browser } from "$app/environment";
+  import type { Snippet } from "svelte";
+  import ChevronDown from "@lucide/svelte/icons/chevron-down";
+  import { buttonVariants } from "$lib/components/ui/button/index.js";
+  import { requestMonitorBar } from "$lib/client/monitor-bar-client";
+  import type { MonitorBarResponse } from "$lib/server/api-server/monitor-bar/get";
+  import MonitorBar from "$lib/components/MonitorBar.svelte";
+  import { t } from "$lib/stores/i18n";
+
+  interface Props {
+    tags: string[];
+    days: number;
+    endOfDayTodayAtTz: number;
+    children: Snippet;
+    prefetchedDataByTag?: Partial<Record<string, MonitorBarResponse>>;
+    prefetchedErrorByTag?: Record<string, string>;
+    groupChildTagsByTag?: Record<string, string[]>;
+    compact?: boolean;
+    initiallyOpen?: boolean;
+  }
+
+  let {
+    tags,
+    days,
+    endOfDayTodayAtTz,
+    children,
+    prefetchedDataByTag = {},
+    prefetchedErrorByTag = {},
+    groupChildTagsByTag = {},
+    compact = false,
+    initiallyOpen = false,
+  }: Props = $props();
+
+  let expanded = $state(false);
+
+  $effect(() => {
+    expanded = initiallyOpen;
+  });
+
+  let monitorBarPromiseByTag = $derived.by(() => {
+    if (!browser || !expanded || tags.length === 0) {
+      return {} as Partial<Record<string, Promise<MonitorBarResponse>>>;
+    }
+
+    return Object.fromEntries(
+      tags
+        .filter((tag) => !prefetchedDataByTag[tag] && !prefetchedErrorByTag[tag])
+        .map((tag) => [tag, requestMonitorBar(tag, days, endOfDayTodayAtTz)]),
+    ) as Partial<Record<string, Promise<MonitorBarResponse>>>;
+  });
+</script>
+
+<div class="w-full">
+  <button
+    type="button"
+    class={buttonVariants({
+      variant: "ghost",
+      size: "sm",
+      class: "bg-secondary hover:bg-secondary/80 flex w-full items-center justify-between rounded-btn text-xs",
+    })}
+    onclick={() => (expanded = !expanded)}
+    aria-expanded={expanded}
+  >
+    <span class="flex min-w-0 items-center gap-2 text-left">
+      {@render children()}
+    </span>
+    <ChevronDown class={`size-3 shrink-0 transition-transform ${expanded ? "rotate-180" : ""}`} />
+  </button>
+
+  {#if expanded}
+    <div class="bg-muted/20 mt-3 overflow-hidden rounded-2xl border">
+      {#if tags.length === 0}
+        <div class="text-muted-foreground p-4 text-sm">{$t("No monitors available.")}</div>
+      {:else}
+        {#each tags as tag, index (tag)}
+          <div class={`px-3 py-3 ${index < tags.length - 1 ? "border-b" : ""}`}>
+            {#if prefetchedDataByTag[tag] || prefetchedErrorByTag[tag]}
+              <MonitorBar
+                {tag}
+                prefetchedData={prefetchedDataByTag[tag]}
+                prefetchedError={prefetchedErrorByTag[tag]}
+                groupChildTags={groupChildTagsByTag[tag] || []}
+                groupChildTagsByTag={groupChildTagsByTag}
+                days={days}
+                {endOfDayTodayAtTz}
+                {compact}
+              />
+            {:else if monitorBarPromiseByTag[tag]}
+              {#await monitorBarPromiseByTag[tag]}
+                <MonitorBar
+                  {tag}
+                  groupChildTags={groupChildTagsByTag[tag] || []}
+                  groupChildTagsByTag={groupChildTagsByTag}
+                  days={days}
+                  {endOfDayTodayAtTz}
+                  {compact}
+                />
+              {:then monitorBarData}
+                <MonitorBar
+                  {tag}
+                  prefetchedData={monitorBarData}
+                  groupChildTags={groupChildTagsByTag[tag] || []}
+                  groupChildTagsByTag={groupChildTagsByTag}
+                  days={days}
+                  {endOfDayTodayAtTz}
+                  {compact}
+                />
+              {:catch err}
+                <MonitorBar
+                  {tag}
+                  prefetchedError={err instanceof Error ? err.message : "Unknown error"}
+                  groupChildTags={groupChildTagsByTag[tag] || []}
+                  groupChildTagsByTag={groupChildTagsByTag}
+                  days={days}
+                  {endOfDayTodayAtTz}
+                  {compact}
+                />
+              {/await}
+            {:else}
+              <MonitorBar
+                {tag}
+                groupChildTags={groupChildTagsByTag[tag] || []}
+                groupChildTagsByTag={groupChildTagsByTag}
+                days={days}
+                {endOfDayTodayAtTz}
+                {compact}
+              />
+            {/if}
+          </div>
+        {/each}
+      {/if}
+    </div>
+  {/if}
+</div>
diff --git a/src/lib/components/MonitorBar.svelte b/src/lib/components/MonitorBar.svelte
index 332bd2809..0e87cbec7 100644
--- a/src/lib/components/MonitorBar.svelte
+++ b/src/lib/components/MonitorBar.svelte
@@ -9,7 +9,7 @@
   import clientResolver from "$lib/client/resolver.js";
   import { formatDate } from "$lib/stores/datetime";
   import { GetInitials } from "$lib/clientTools.js";
-  import GroupMonitorPopover from "./GroupMonitorPopover.svelte";
+  import GroupMonitorInlineExpansion from "./GroupMonitorInlineExpansion.svelte";
   import { t } from "$lib/stores/i18n";
   import { page } from "$app/state";
 
@@ -18,6 +18,7 @@
     prefetchedData?: MonitorBarResponse;
     prefetchedError?: string;
     groupChildTags?: string[];
+    groupChildTagsByTag?: Record<string, string[]>;
     days?: number;
     endOfDayTodayAtTz?: number;
     compact?: boolean;
@@ -29,6 +30,7 @@
     prefetchedData,
     prefetchedError,
     groupChildTags = [],
+    groupChildTagsByTag = {},
     days,
     endOfDayTodayAtTz,
     compact = false,
@@ -147,13 +149,15 @@
     {/if}
     {#if showGroupPopover}
       <div class="mt-2 flex justify-center gap-2 px-4">
-        <GroupMonitorPopover
+        <GroupMonitorInlineExpansion
           tags={groupChildTags}
           days={days as number}
           endOfDayTodayAtTz={endOfDayTodayAtTz as number}
+          {groupChildTagsByTag}
+          {compact}
         >
           {$t("Included Monitors (%count)", { count: String(groupChildTags.length) })}
-        </GroupMonitorPopover>
+        </GroupMonitorInlineExpansion>
       </div>
     {/if}
   {/if}
diff --git a/src/lib/components/MonitorOverview.svelte b/src/lib/components/MonitorOverview.svelte
index c6ee111f5..d2c82259c 100644
--- a/src/lib/components/MonitorOverview.svelte
+++ b/src/lib/components/MonitorOverview.svelte
@@ -16,7 +16,7 @@
   import { requestMonitorBar, clearMonitorBarCache } from "$lib/client/monitor-bar-client";
   import * as Popover from "$lib/components/ui/popover/index.js";
   import * as ToggleGroup from "$lib/components/ui/toggle-group/index.js";
-  import GroupMonitorPopover from "$lib/components/GroupMonitorPopover.svelte";
+  import GroupMonitorInlineExpansion from "$lib/components/GroupMonitorInlineExpansion.svelte";
   import { page } from "$app/state";
 
   interface Props {
@@ -24,9 +24,10 @@
     class?: string;
     maxDays?: number;
     groupTags?: string[];
+    groupChildTagsByTag?: Record<string, string[]>;
   }
 
-  let { monitorTag, class: className = "", maxDays = 90, groupTags = [] }: Props = $props();
+  let { monitorTag, class: className = "", maxDays = 90, groupTags = [], groupChildTagsByTag = {} }: Props = $props();
 
   // State
   let loading = $state(true);
@@ -215,13 +216,18 @@
           </p>
         </div>
       </div>
-      <!-- Add group GroupMonitorPopover here -->
+      <!-- Inline expansion for technical GROUP monitor members -->
       {#if groupTags.length > 0}
         <div class="flex justify-center">
-          <GroupMonitorPopover tags={groupTags} days={selectedDays} {endOfDayTodayAtTz}>
+          <GroupMonitorInlineExpansion
+            tags={groupTags}
+            days={selectedDays}
+            {endOfDayTodayAtTz}
+            {groupChildTagsByTag}
+          >
             {$t("Included Monitors (%count)", { count: String(groupTags.length) })}
             <ArrowUp class="size-3" />
-          </GroupMonitorPopover>
+          </GroupMonitorInlineExpansion>
         </div>
       {/if}
 
diff --git a/src/lib/components/PageMonitorGroupSection.svelte b/src/lib/components/PageMonitorGroupSection.svelte
new file mode 100644
index 000000000..6a8084de2
--- /dev/null
+++ b/src/lib/components/PageMonitorGroupSection.svelte
@@ -0,0 +1,174 @@
+<script lang="ts">
+  import ChevronDown from "@lucide/svelte/icons/chevron-down";
+  import ICONS from "$lib/icons";
+  import type { StatusType } from "$lib/global-constants";
+  import type { MonitorBarResponse } from "$lib/server/api-server/monitor-bar/get";
+  import MonitorBar from "$lib/components/MonitorBar.svelte";
+  import StatusBarCalendar from "$lib/components/StatusBarCalendar.svelte";
+  import { aggregateGroupUptimeData } from "$lib/components/page-monitor-group-section";
+  import { t } from "$lib/stores/i18n";
+
+  interface GroupMonitorItem {
+    monitor_tag: string;
+    position: number;
+  }
+
+  interface PageMonitorGroupItem {
+    id: number;
+    name: string;
+    description: string | null;
+    default_expanded: boolean;
+    adopt_child_status: boolean;
+    position: number;
+    monitors: GroupMonitorItem[];
+  }
+
+  interface Props {
+    group: PageMonitorGroupItem;
+    days: number;
+    endOfDayTodayAtTz: number;
+    prefetchedDataByTag?: Record<string, MonitorBarResponse>;
+    prefetchedErrorByTag?: Record<string, string>;
+    latestStatusByTag?: Record<string, StatusType>;
+    groupChildTagsByTag?: Record<string, string[]>;
+    compact?: boolean;
+    grid?: boolean;
+  }
+
+  let {
+    group,
+    days,
+    endOfDayTodayAtTz,
+    prefetchedDataByTag = {},
+    prefetchedErrorByTag = {},
+    latestStatusByTag = {},
+    groupChildTagsByTag = {},
+    compact = false,
+    grid = false,
+  }: Props = $props();
+
+  let expandedByGroupId = $state<Record<number, boolean>>({});
+
+  const STATUS_ICON = {
+    UP: ICONS.UP,
+    DOWN: ICONS.DOWN,
+    DEGRADED: ICONS.DEGRADED,
+    MAINTENANCE: ICONS.MAINTENANCE,
+    NO_DATA: ICONS.MAINTENANCE,
+  } as const;
+
+  const STATUS_STROKE = {
+    UP: "stroke-up",
+    DOWN: "stroke-down",
+    DEGRADED: "stroke-degraded",
+    MAINTENANCE: "stroke-maintenance",
+    NO_DATA: "stroke-muted-foreground",
+  } as const;
+
+  function resolveMonitorStatus(tag: string): StatusType {
+    return prefetchedDataByTag[tag]?.currentStatus || latestStatusByTag[tag] || "NO_DATA";
+  }
+
+  function getAdoptedStatus(tags: string[]): StatusType {
+    const statuses = tags.map(resolveMonitorStatus);
+
+    if (statuses.length === 0 || statuses.every((status) => status === "NO_DATA")) {
+      return "NO_DATA";
+    }
+
+    if (statuses.every((status) => status === "DOWN")) return "DOWN";
+    if (statuses.includes("DOWN")) return "DEGRADED";
+    if (statuses.includes("DEGRADED")) return "DEGRADED";
+    if (statuses.includes("MAINTENANCE")) return "MAINTENANCE";
+    if (statuses.includes("UP")) return "UP";
+
+    return "NO_DATA";
+  }
+
+  let adoptedStatus = $derived(getAdoptedStatus(group.monitors.map((monitor) => monitor.monitor_tag)));
+  let adoptedStatusIcon = $derived(STATUS_ICON[adoptedStatus]);
+  let expanded = $derived(expandedByGroupId[group.id] ?? group.default_expanded);
+  let prefetchedMonitorBars = $derived(
+    group.monitors
+      .map((monitor) => prefetchedDataByTag[monitor.monitor_tag])
+      .filter((monitorBar): monitorBar is MonitorBarResponse => Boolean(monitorBar)),
+  );
+  let aggregatedUptimeData = $derived(aggregateGroupUptimeData(prefetchedMonitorBars));
+
+  function toggleExpanded() {
+    expandedByGroupId[group.id] = !expanded;
+  }
+</script>
+
+<div class={`bg-background ${grid ? "" : ""}`}>
+  <button
+    type="button"
+    class="hover:bg-muted/50 grid w-full grid-cols-[minmax(0,1fr)_auto] items-start gap-x-4 gap-y-3 px-4 py-4 text-left transition-colors"
+    onclick={toggleExpanded}
+    aria-expanded={expanded}
+  >
+    <div class="min-w-0 space-y-2">
+      <div class="flex min-w-0 items-center gap-3">
+        <p class="truncate text-sm font-semibold sm:text-base">{group.name}</p>
+        <span class="text-muted-foreground shrink-0 text-xs">{group.monitors.length}</span>
+      </div>
+      {#if group.description}
+        <p class="text-muted-foreground line-clamp-2 text-xs sm:text-sm">{group.description}</p>
+      {/if}
+      <div class="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs">
+        {#if group.adopt_child_status}
+          {@const StatusIcon = adoptedStatusIcon}
+          <span class="inline-flex items-center gap-1 font-medium tracking-[0.02em]">
+            <StatusIcon class={`size-3.5 ${STATUS_STROKE[adoptedStatus]}`} />
+            {$t(adoptedStatus)}
+          </span>
+        {/if}
+        <span class="text-muted-foreground/90">{expanded ? $t("Hide monitors") : $t("Show monitors")}</span>
+      </div>
+    </div>
+    <div class="flex items-center justify-end self-center">
+      <ChevronDown
+        class={`text-muted-foreground size-4 shrink-0 transition-transform ${expanded ? "rotate-180" : ""}`}
+      />
+    </div>
+
+    {#if aggregatedUptimeData.length > 0}
+      <div class="col-span-2">
+        <div class="rounded-xl">
+          <StatusBarCalendar
+            data={aggregatedUptimeData}
+            monitorTag={`group-${group.id}`}
+            barHeight={24}
+            radius={8}
+            detailKind="group"
+            detailTitle={group.name}
+            detailMonitorTags={group.monitors.map((monitor) => monitor.monitor_tag)}
+          />
+        </div>
+      </div>
+    {/if}
+  </button>
+
+  {#if expanded}
+    <div class="bg-muted/20 border-t">
+      {#if group.monitors.length === 0}
+        <div class="text-muted-foreground px-3 py-4 text-sm">{$t("No monitors available.")}</div>
+      {:else}
+        {#each group.monitors as monitor, index (monitor.monitor_tag)}
+          <div class={`px-3 py-3 ${index < group.monitors.length - 1 ? "border-b" : ""}`}>
+            <MonitorBar
+              tag={monitor.monitor_tag}
+              prefetchedData={prefetchedDataByTag[monitor.monitor_tag]}
+              prefetchedError={prefetchedErrorByTag[monitor.monitor_tag]}
+              days={days}
+              {endOfDayTodayAtTz}
+              groupChildTags={groupChildTagsByTag[monitor.monitor_tag] || []}
+              {groupChildTagsByTag}
+              {compact}
+            />
+          </div>
+        {/each}
+      {/if}
+    </div>
+  {/if}
+</div>
diff --git a/src/lib/components/PageMonitorTree.svelte b/src/lib/components/PageMonitorTree.svelte
new file mode 100644
index 000000000..b4a843e2a
--- /dev/null
+++ b/src/lib/components/PageMonitorTree.svelte
@@ -0,0 +1,129 @@
+<script lang="ts">
+  import type { StatusType } from "$lib/global-constants";
+  import type { MonitorBarResponse } from "$lib/server/api-server/monitor-bar/get";
+  import MonitorBar from "$lib/components/MonitorBar.svelte";
+  import PageMonitorGroupSection from "$lib/components/PageMonitorGroupSection.svelte";
+
+  type ViewType = "compact-list" | "default-list" | "default-grid" | "compact-grid" | undefined;
+
+  type PageMonitorItem =
+    | { kind: "monitor"; monitor_tag: string; position: number }
+      | {
+          kind: "group";
+          id: number;
+          name: string;
+          description: string | null;
+          default_expanded: boolean;
+          adopt_child_status: boolean;
+          position: number;
+          monitors: Array<{ monitor_tag: string; position: number }>;
+        };
+
+  interface Props {
+    items: PageMonitorItem[];
+    prefetchedDataByTag?: Record<string, MonitorBarResponse>;
+    prefetchedErrorByTag?: Record<string, string>;
+    groupChildTagsByTag?: Record<string, string[]>;
+    latestStatusByTag?: Record<string, StatusType>;
+    days: number;
+    endOfDayTodayAtTz: number;
+    viewType?: ViewType;
+  }
+
+  let {
+    items,
+    prefetchedDataByTag = {},
+    prefetchedErrorByTag = {},
+    groupChildTagsByTag = {},
+    latestStatusByTag = {},
+    days,
+    endOfDayTodayAtTz,
+    viewType,
+  }: Props = $props();
+
+  let isCompact = $derived(viewType === "compact-list" || viewType === "compact-grid");
+
+  function getGridItemSpanClass(index: number, total: number, type: ViewType, kind: PageMonitorItem["kind"]): string {
+    if (kind === "group") {
+      return type === "compact-grid" ? "sm:col-span-4 lg:col-span-6" : "md:col-span-4 lg:col-span-4";
+    }
+
+    if (type === "default-grid") {
+      const mdLastRowCount = total % 2 || 2;
+      const mdLastRowStart = total - mdLastRowCount;
+      const isInMdLastRow = index >= mdLastRowStart;
+      const mdSpan = isInMdLastRow && mdLastRowCount === 1 ? "md:col-span-4" : "md:col-span-2";
+
+      const lgLastRowCount = total % 2 || 2;
+      const lgLastRowStart = total - lgLastRowCount;
+      const isInLgLastRow = index >= lgLastRowStart;
+      const lgSpan = isInLgLastRow && lgLastRowCount === 1 ? "lg:col-span-4" : "lg:col-span-2";
+
+      return `${mdSpan} ${lgSpan}`;
+    }
+
+    const smLastRowCount = total % 2 || 2;
+    const smLastRowStart = total - smLastRowCount;
+    const isInSmLastRow = index >= smLastRowStart;
+    const smSpan = isInSmLastRow && smLastRowCount === 1 ? "sm:col-span-4" : "sm:col-span-2";
+
+    const lgLastRowCount = total % 3 || 3;
+    const lgLastRowStart = total - lgLastRowCount;
+    const isInLgLastRow = index >= lgLastRowStart;
+    const lgSpan = isInLgLastRow
+      ? lgLastRowCount === 1
+        ? "lg:col-span-6"
+        : lgLastRowCount === 2
+          ? "lg:col-span-3"
+          : "lg:col-span-2"
+      : "lg:col-span-2";
+
+    return `${smSpan} ${lgSpan}`;
+  }
+
+  function getGridContainerClass(type: ViewType): string {
+    if (type === "compact-grid") return "bg-border gap-px sm:grid-cols-4 lg:grid-cols-6";
+    if (type === "default-grid") return "bg-border gap-px md:grid-cols-4 lg:grid-cols-4";
+    return "";
+  }
+</script>
+
+<div class="overflow-hidden rounded-3xl border">
+  <div class={`grid grid-cols-1 ${getGridContainerClass(viewType)}`}>
+    {#each items as item, index (`${item.kind}-${item.kind === "monitor" ? item.monitor_tag : item.id}`)}
+      <div
+        class="{viewType === 'compact-grid' || viewType === 'default-grid'
+          ? `${getGridItemSpanClass(index, items.length, viewType, item.kind)} bg-background`
+          : index < items.length - 1
+            ? 'border-b'
+            : ''} px-2 py-2 sm:px-0"
+      >
+        {#if item.kind === "monitor"}
+          <MonitorBar
+            tag={item.monitor_tag}
+            prefetchedData={prefetchedDataByTag[item.monitor_tag]}
+            prefetchedError={prefetchedErrorByTag[item.monitor_tag]}
+            days={days}
+            {endOfDayTodayAtTz}
+            groupChildTags={groupChildTagsByTag[item.monitor_tag] || []}
+            {groupChildTagsByTag}
+            compact={isCompact}
+            grid={viewType === "compact-grid" || viewType === "default-grid"}
+          />
+        {:else}
+          <PageMonitorGroupSection
+            group={item}
+            prefetchedDataByTag={prefetchedDataByTag}
+            prefetchedErrorByTag={prefetchedErrorByTag}
+            latestStatusByTag={latestStatusByTag}
+            {groupChildTagsByTag}
+            days={days}
+            {endOfDayTodayAtTz}
+            compact={isCompact}
+            grid={viewType === "compact-grid" || viewType === "default-grid"}
+          />
+        {/if}
+      </div>
+    {/each}
+  </div>
+</div>
diff --git a/src/lib/components/StatusBarCalendar.svelte b/src/lib/components/StatusBarCalendar.svelte
index b6fca57a8..a8cd1ad5f 100644
--- a/src/lib/components/StatusBarCalendar.svelte
+++ b/src/lib/components/StatusBarCalendar.svelte
@@ -4,6 +4,7 @@
   import { page } from "$app/state";
   import { GetStatusSummary, ParseLatency } from "$lib/clientTools";
   import MonitorDayDetail from "$lib/components/MonitorDayDetail.svelte";
+  import GroupDayDetail from "$lib/components/GroupDayDetail.svelte";
   import type { TimestampStatusCount } from "$lib/server/types/db";
   import { t } from "$lib/stores/i18n";
   import { formatDate } from "$lib/stores/datetime";
@@ -16,9 +17,22 @@
     radius?: number;
     class?: string;
     disableClick?: boolean;
+    detailKind?: "monitor" | "group";
+    detailTitle?: string;
+    detailMonitorTags?: string[];
   }
 
-  let { data, monitorTag, barHeight = 40, radius = 8, class: className = "", disableClick = false }: Props = $props();
+  let {
+    data,
+    monitorTag,
+    barHeight = 40,
+    radius = 8,
+    class: className = "",
+    disableClick = false,
+    detailKind = "monitor",
+    detailTitle = "",
+    detailMonitorTags = [],
+  }: Props = $props();
 
   // Canvas state
   let canvas = $state<HTMLCanvasElement | null>(null);
@@ -359,7 +373,7 @@
     <canvas
       bind:this={canvas}
       style="width: 100%; height: {barHeight + 8}px;"
-      class="cursor-pointer"
+      class={disableClick ? "" : "cursor-pointer"}
       onmousemove={handleMouseMove}
       onmouseleave={handleMouseLeave}
       onclick={handleBarClick}
@@ -376,7 +390,7 @@
       <span class={getStatusColor(hoveredBar.data)}>{$t(GetStatusSummary(hoveredBar.data))}</span>
       <span class="text-muted-foreground">@</span>
       {$formatDate(hoveredBar.data.ts, page.data.dateAndTimeFormat.dateOnly)}
-      {#if hoveredBar.data.avgLatency > 0}
+      {#if detailKind !== "group" && hoveredBar.data.avgLatency > 0}
         <span class="text-muted-foreground ml-1">|</span>
         <span class="ml-1">{ParseLatency(hoveredBar.data.avgLatency)}</span>
       {/if}
@@ -385,7 +399,11 @@
 </div>
 
 <!-- Day Detail Dialog -->
-<MonitorDayDetail bind:open={dialogOpen} {monitorTag} {selectedDay} />
+{#if detailKind === "group"}
+  <GroupDayDetail bind:open={dialogOpen} groupName={detailTitle} monitorTags={detailMonitorTags} {selectedDay} />
+{:else}
+  <MonitorDayDetail bind:open={dialogOpen} {monitorTag} {selectedDay} />
+{/if}
 
 <style>
   canvas {
diff --git a/src/lib/components/page-monitor-group-section.ts b/src/lib/components/page-monitor-group-section.ts
new file mode 100644
index 000000000..f75cfe134
--- /dev/null
+++ b/src/lib/components/page-monitor-group-section.ts
@@ -0,0 +1,60 @@
+import type { MonitorBarResponse } from "$lib/server/api-server/monitor-bar/get";
+import type { TimestampStatusCount } from "$lib/server/types/db";
+
+interface MutableAggregatedStatus extends TimestampStatusCount {
+  latencyCount: number;
+  latencySum: number;
+}
+
+function createEmptyAggregatedStatus(ts: number): MutableAggregatedStatus {
+  return {
+    ts,
+    countOfUp: 0,
+    countOfDown: 0,
+    countOfDegraded: 0,
+    countOfMaintenance: 0,
+    avgLatency: 0,
+    maxLatency: 0,
+    minLatency: 0,
+    latencyCount: 0,
+    latencySum: 0,
+  };
+}
+
+export function aggregateGroupUptimeData(monitorBars: MonitorBarResponse[]): TimestampStatusCount[] {
+  const aggregatedByTimestamp = new Map<number, MutableAggregatedStatus>();
+
+  for (const monitorBar of monitorBars) {
+    for (const day of monitorBar.uptimeData) {
+      const aggregated = aggregatedByTimestamp.get(day.ts) ?? createEmptyAggregatedStatus(day.ts);
+
+      aggregated.countOfUp += day.countOfUp;
+      aggregated.countOfDown += day.countOfDown;
+      aggregated.countOfDegraded += day.countOfDegraded;
+      aggregated.countOfMaintenance += day.countOfMaintenance;
+
+      if (day.avgLatency > 0) {
+        aggregated.latencySum += day.avgLatency;
+        aggregated.latencyCount += 1;
+      }
+
+      if (day.maxLatency > 0) {
+        aggregated.maxLatency = Math.max(aggregated.maxLatency, day.maxLatency);
+      }
+
+      if (day.minLatency > 0) {
+        aggregated.minLatency =
+          aggregated.minLatency === 0 ? day.minLatency : Math.min(aggregated.minLatency, day.minLatency);
+      }
+
+      aggregatedByTimestamp.set(day.ts, aggregated);
+    }
+  }
+
+  return Array.from(aggregatedByTimestamp.values())
+    .sort((left, right) => left.ts - right.ts)
+    .map(({ latencyCount, latencySum, ...day }) => ({
+      ...day,
+      avgLatency: latencyCount > 0 ? Math.round(latencySum / latencyCount) : 0,
+    }));
+}
diff --git a/src/lib/locales/cs.json b/src/lib/locales/cs.json
index 36f6c8fcd..8cbb95f28 100644
--- a/src/lib/locales/cs.json
+++ b/src/lib/locales/cs.json
@@ -90,6 +90,8 @@
     "No maintenances for this day": "Pro tento den není naplánovaná žádná údržba",
     "No monitors affected": "Žádné zasažené monitory",
     "No monitors available.": "Žádné dostupné monitory",
+    "Show monitors": "Show monitors",
+    "Hide monitors": "Hide monitors",
     "No ongoing maintenances": "Žádná probíhající údržba",
     "No past maintenances": "Žádná minulá údržba",
     "No Status Available": "Stav není k dispozici",
diff --git a/src/lib/locales/de.json b/src/lib/locales/de.json
index 1c956c74d..b114eeb89 100644
--- a/src/lib/locales/de.json
+++ b/src/lib/locales/de.json
@@ -78,6 +78,8 @@
     "No maintenances for this day": "An diesem Tag finden keine Wartungsarbeiten statt",
     "No monitors affected": "Keine Monitore betroffen",
     "No monitors available.": "Keine Monitore verfügbar.",
+    "Show monitors": "Monitore anzeigen",
+    "Hide monitors": "Monitore ausblenden",
     "No ongoing maintenances": "Keine laufenden Wartungsarbeiten",
     "No past maintenances": "Keine früheren Wartungsarbeiten",
     "No Status Available": "Kein Status verfügbar",
diff --git a/src/lib/locales/dk.json b/src/lib/locales/dk.json
index 66baa50c2..5c87c9f00 100644
--- a/src/lib/locales/dk.json
+++ b/src/lib/locales/dk.json
@@ -78,6 +78,8 @@
     "No maintenances for this day": "Ingen vedligeholdelse denne dag",
     "No monitors affected": "Ingen skærme påvirket",
     "No monitors available.": "Ingen monitorer tilgængelige.",
+    "Show monitors": "Show monitors",
+    "Hide monitors": "Hide monitors",
     "No ongoing maintenances": "Ingen løbende vedligeholdelse",
     "No past maintenances": "Ingen tidligere vedligeholdelse",
     "No Status Available": "Ingen status tilgængelig",
diff --git a/src/lib/locales/en.json b/src/lib/locales/en.json
index 994b13c4b..66cdec43c 100644
--- a/src/lib/locales/en.json
+++ b/src/lib/locales/en.json
@@ -78,6 +78,8 @@
     "No maintenances for this day": "No maintenances for this day",
     "No monitors affected": "No monitors affected",
     "No monitors available.": "No monitors available.",
+    "Show monitors": "Show monitors",
+    "Hide monitors": "Hide monitors",
     "No ongoing maintenances": "No ongoing maintenances",
     "No past maintenances": "No past maintenances",
     "No Status Available": "No Status Available",
diff --git a/src/lib/locales/es.json b/src/lib/locales/es.json
index 6ce37c462..4d460cc5b 100644
--- a/src/lib/locales/es.json
+++ b/src/lib/locales/es.json
@@ -78,6 +78,8 @@
     "No maintenances for this day": "No hay mantenimientos para este día.",
     "No monitors affected": "Ningún monitor afectado",
     "No monitors available.": "No hay monitores disponibles.",
+    "Show monitors": "Show monitors",
+    "Hide monitors": "Hide monitors",
     "No ongoing maintenances": "Sin mantenimientos continuos",
     "No past maintenances": "Sin mantenimientos pasados",
     "No Status Available": "Estado no disponible",
diff --git a/src/lib/locales/fa.json b/src/lib/locales/fa.json
index a51d5e8b0..3289c2566 100644
--- a/src/lib/locales/fa.json
+++ b/src/lib/locales/fa.json
@@ -78,6 +78,8 @@
     "No maintenances for this day": "بدون تعمیر و نگهداری برای این روز",
     "No monitors affected": "هیچ مانیتوری تحت تأثیر قرار نگرفت",
     "No monitors available.": "هیچ مانیتوری در دسترس نیست.",
+    "Show monitors": "Show monitors",
+    "Hide monitors": "Hide monitors",
     "No ongoing maintenances": "بدون تعمیر و نگهداری مداوم",
     "No past maintenances": "بدون تعمیر و نگهداری قبلی",
     "No Status Available": "وضعیتی در دسترس نیست",
diff --git a/src/lib/locales/fr.json b/src/lib/locales/fr.json
index 6f00fa0a6..bb174e35a 100644
--- a/src/lib/locales/fr.json
+++ b/src/lib/locales/fr.json
@@ -78,6 +78,8 @@
     "No maintenances for this day": "Aucune maintenance pour cette journée",
     "No monitors affected": "Aucun moniteur affecté",
     "No monitors available.": "Aucun moniteur disponible.",
+    "Show monitors": "Show monitors",
+    "Hide monitors": "Hide monitors",
     "No ongoing maintenances": "Aucune maintenance en cours",
     "No past maintenances": "Aucune maintenance passée",
     "No Status Available": "Aucun statut disponible",
diff --git a/src/lib/locales/hi.json b/src/lib/locales/hi.json
index c31e46330..96b5b26d4 100644
--- a/src/lib/locales/hi.json
+++ b/src/lib/locales/hi.json
@@ -78,6 +78,8 @@
     "No maintenances for this day": "इस दिन के लिए कोई रखरखाव नहीं",
     "No monitors affected": "कोई मॉनिटर प्रभावित नहीं",
     "No monitors available.": "कोई मॉनिटर उपलब्ध नहीं है।",
+    "Show monitors": "Show monitors",
+    "Hide monitors": "Hide monitors",
     "No ongoing maintenances": "कोई चल रहा रखरखाव नहीं",
     "No past maintenances": "कोई बीता हुआ रखरखाव नहीं",
     "No Status Available": "स्थिति उपलब्ध नहीं है",
diff --git a/src/lib/locales/it.json b/src/lib/locales/it.json
index 22e761c1a..e61a01e8f 100644
--- a/src/lib/locales/it.json
+++ b/src/lib/locales/it.json
@@ -78,6 +78,8 @@
     "No maintenances for this day": "Nessuna manutenzione per oggi",
     "No monitors affected": "Nessun monitor interessato",
     "No monitors available.": "Nessun monitor disponibile.",
+    "Show monitors": "Show monitors",
+    "Hide monitors": "Hide monitors",
     "No ongoing maintenances": "Nessuna manutenzione continua",
     "No past maintenances": "Nessuna manutenzione passata",
     "No Status Available": "Nessuno stato disponibile",
diff --git a/src/lib/locales/ja.json b/src/lib/locales/ja.json
index 4fad30792..98265314b 100644
--- a/src/lib/locales/ja.json
+++ b/src/lib/locales/ja.json
@@ -78,6 +78,8 @@
     "No maintenances for this day": "この日はメンテナンスはありません",
     "No monitors affected": "影響を受けるモニターはありません",
     "No monitors available.": "利用可能なモニターはありません。",
+    "Show monitors": "Show monitors",
+    "Hide monitors": "Hide monitors",
     "No ongoing maintenances": "継続的なメンテナンスはありません",
     "No past maintenances": "過去のメンテナンスはありません",
     "No Status Available": "ステータス情報はありません",
diff --git a/src/lib/locales/ko.json b/src/lib/locales/ko.json
index c4c931612..7d551d2db 100644
--- a/src/lib/locales/ko.json
+++ b/src/lib/locales/ko.json
@@ -78,6 +78,8 @@
     "No maintenances for this day": "이날은 유지보수가 없습니다",
     "No monitors affected": "영향을 받는 모니터 없음",
     "No monitors available.": "사용 가능한 모니터가 없습니다.",
+    "Show monitors": "Show monitors",
+    "Hide monitors": "Hide monitors",
     "No ongoing maintenances": "지속적인 유지 관리가 필요하지 않습니다.",
     "No past maintenances": "과거 유지보수 없음",
     "No Status Available": "사용 가능한 상태 정보 없음",
diff --git a/src/lib/locales/nb-NO.json b/src/lib/locales/nb-NO.json
index d9fb8d06d..142666d64 100644
--- a/src/lib/locales/nb-NO.json
+++ b/src/lib/locales/nb-NO.json
@@ -78,6 +78,8 @@
     "No maintenances for this day": "Ingen vedlikehold denne dagen",
     "No monitors affected": "Ingen monitorer er berørt",
     "No monitors available.": "Ingen monitorer tilgjengelige.",
+    "Show monitors": "Show monitors",
+    "Hide monitors": "Hide monitors",
     "No ongoing maintenances": "Ingen løpende vedlikehold",
     "No past maintenances": "Ingen tidligere vedlikehold",
     "No Status Available": "Ingen status tilgjengelig",
diff --git a/src/lib/locales/nl.json b/src/lib/locales/nl.json
index a03ae7d21..fad513a5f 100644
--- a/src/lib/locales/nl.json
+++ b/src/lib/locales/nl.json
@@ -78,6 +78,8 @@
     "No maintenances for this day": "Geen onderhoud voor deze dag",
     "No monitors affected": "Er zijn geen monitoren getroffen",
     "No monitors available.": "Geen monitoren beschikbaar.",
+    "Show monitors": "Show monitors",
+    "Hide monitors": "Hide monitors",
     "No ongoing maintenances": "Geen doorlopend onderhoud",
     "No past maintenances": "Geen onderhoudsbeurten uit het verleden",
     "No Status Available": "Geen status beschikbaar",
diff --git a/src/lib/locales/pl.json b/src/lib/locales/pl.json
index 224493179..2a78ad86a 100644
--- a/src/lib/locales/pl.json
+++ b/src/lib/locales/pl.json
@@ -78,6 +78,8 @@
     "No maintenances for this day": "Brak konserwacji na ten dzień",
     "No monitors affected": "Nie dotyczy to żadnych monitorów",
     "No monitors available.": "Brak dostępnych monitorów.",
+    "Show monitors": "Show monitors",
+    "Hide monitors": "Hide monitors",
     "No ongoing maintenances": "Brak bieżących konserwacji",
     "No past maintenances": "Brak wcześniejszych konserwacji",
     "No Status Available": "Brak dostępnego statusu",
diff --git a/src/lib/locales/pt-BR.json b/src/lib/locales/pt-BR.json
index b20f3db77..54212514c 100644
--- a/src/lib/locales/pt-BR.json
+++ b/src/lib/locales/pt-BR.json
@@ -78,6 +78,8 @@
     "No maintenances for this day": "Sem manutenções para este dia",
     "No monitors affected": "Nenhum monitor afetado",
     "No monitors available.": "Não há monitores disponíveis.",
+    "Show monitors": "Show monitors",
+    "Hide monitors": "Hide monitors",
     "No ongoing maintenances": "Sem manutenções contínuas",
     "No past maintenances": "Sem manutenções anteriores",
     "No Status Available": "Nenhum status disponível",
diff --git a/src/lib/locales/ru.json b/src/lib/locales/ru.json
index 52b47e5a0..2ee5237cf 100644
--- a/src/lib/locales/ru.json
+++ b/src/lib/locales/ru.json
@@ -79,6 +79,8 @@
     "No maintenances for this day": "Нет обслуживания за этот день",
     "No monitors affected": "Мониторы не затронуты",
     "No monitors available.": "Нет доступных мониторов.",
+    "Show monitors": "Show monitors",
+    "Hide monitors": "Hide monitors",
     "No ongoing maintenances": "Нет текущих обслуживаний",
     "No past maintenances": "Нет прошедших обслуживаний",
     "No Status Available": "Статус недоступен",
diff --git a/src/lib/locales/sk.json b/src/lib/locales/sk.json
index c9948e19e..19d2e2671 100644
--- a/src/lib/locales/sk.json
+++ b/src/lib/locales/sk.json
@@ -90,6 +90,8 @@
     "No maintenances for this day": "Pre tento deň nie je naplánovaná žiadna údržba",
     "No monitors affected": "Žiadne ovplyvnené monitory",
     "No monitors available.": "Žiadne dostupné monitory",
+    "Show monitors": "Show monitors",
+    "Hide monitors": "Hide monitors",
     "No ongoing maintenances": "Žiadna prebiehajúca údržba",
     "No past maintenances": "Žiadna minulá údržba",
     "No Status Available": "Stav nie je k dispozícii",
diff --git a/src/lib/locales/tr.json b/src/lib/locales/tr.json
index 461644d98..c922e2634 100644
--- a/src/lib/locales/tr.json
+++ b/src/lib/locales/tr.json
@@ -78,6 +78,8 @@
     "No maintenances for this day": "Bu gün için bakım yok",
     "No monitors affected": "Hiçbir monitör etkilenmedi",
     "No monitors available.": "Kullanılabilir monitör yok.",
+    "Show monitors": "Show monitors",
+    "Hide monitors": "Hide monitors",
     "No ongoing maintenances": "Devam eden bakım yok",
     "No past maintenances": "Geçmiş bakım yok",
     "No Status Available": "Durum bilgisi yok",
diff --git a/src/lib/locales/uk.json b/src/lib/locales/uk.json
index 1a847ab2d..faa34c90d 100644
--- a/src/lib/locales/uk.json
+++ b/src/lib/locales/uk.json
@@ -79,6 +79,8 @@
     "No maintenances for this day": "Немає обслуговування за цей день",
     "No monitors affected": "Жоден монітор не зачеплений",
     "No monitors available.": "Немає доступних моніторів",
+    "Show monitors": "Show monitors",
+    "Hide monitors": "Hide monitors",
     "No ongoing maintenances": "Немає поточного обслуговування",
     "No past maintenances": "Немає минулого обслуговування",
     "No Status Available": "Статус недоступний",
@@ -135,4 +137,4 @@
     "Verifying": "Перевірка",
     "We sent a 6-digit code to": "Ми надіслали 6-значний код на"
   }
-}
\ No newline at end of file
+}
diff --git a/src/lib/locales/vi.json b/src/lib/locales/vi.json
index 103ddb170..29c058b7a 100644
--- a/src/lib/locales/vi.json
+++ b/src/lib/locales/vi.json
@@ -78,6 +78,8 @@
     "No maintenances for this day": "Không bảo trì trong ngày này",
     "No monitors affected": "Không có màn hình nào bị ảnh hưởng",
     "No monitors available.": "Không có trình giám sát nào khả dụng.",
+    "Show monitors": "Show monitors",
+    "Hide monitors": "Hide monitors",
     "No ongoing maintenances": "Không có bảo trì liên tục",
     "No past maintenances": "Không có bảo trì trước đây",
     "No Status Available": "Không có trạng thái khả dụng",
diff --git a/src/lib/locales/zh-CN.json b/src/lib/locales/zh-CN.json
index 94f03e306..c6d4b924a 100644
--- a/src/lib/locales/zh-CN.json
+++ b/src/lib/locales/zh-CN.json
@@ -78,6 +78,8 @@
     "No maintenances for this day": "今日无维护",
     "No monitors affected": "没有显示器受到影响",
     "No monitors available.": "没有可用的监控项。",
+    "Show monitors": "Show monitors",
+    "Hide monitors": "Hide monitors",
     "No ongoing maintenances": "无需持续维护",
     "No past maintenances": "过去没有维护过",
     "No Status Available": "无可用状态",
diff --git a/src/lib/locales/zh-TW.json b/src/lib/locales/zh-TW.json
index d23f30d3d..b4a34765f 100644
--- a/src/lib/locales/zh-TW.json
+++ b/src/lib/locales/zh-TW.json
@@ -75,6 +75,8 @@
     "No maintenances for this day": "當日無維護作業",
     "No monitors affected": "沒有受影響的監控項目",
     "No monitors available.": "沒有可用的監控項目。",
+    "Show monitors": "Show monitors",
+    "Hide monitors": "Hide monitors",
     "No ongoing maintenances": "沒有進行中的維護作業",
     "No past maintenances": "沒有過去的維護作業",
     "No Status Available": "無可用狀態",
diff --git a/src/lib/server/api-server/group-day-incidents/post.ts b/src/lib/server/api-server/group-day-incidents/post.ts
new file mode 100644
index 000000000..cbb33ec84
--- /dev/null
+++ b/src/lib/server/api-server/group-day-incidents/post.ts
@@ -0,0 +1,40 @@
+import { json, error } from "@sveltejs/kit";
+import type { APIServerRequest } from "$lib/server/types/api-server";
+import { BeginningOfDay, GetMinuteStartNowTimestampUTC, GetMinuteStartTimestampUTC } from "$lib/server/tool";
+import { GetMonitorsParsed } from "../../controllers/monitorsController";
+import db from "$lib/server/db/db";
+import { mergeGroupIncidents } from "$lib/server/group-day-detail";
+
+interface GroupDayDetailRequest {
+  tags: string[];
+}
+
+export default async function post(req: APIServerRequest): Promise<Response> {
+  const body = req.body as GroupDayDetailRequest;
+
+  if (!Array.isArray(body.tags) || body.tags.length === 0) {
+    return error(400, { message: "tags is required" });
+  }
+
+  const startOfDayTodayAtTz = req.body.startOfDayTodayAtTz
+    ? parseInt(req.body.startOfDayTodayAtTz || "0", 10)
+    : BeginningOfDay();
+
+  const nowAtTz =
+    GetMinuteStartTimestampUTC(
+      req.body.nowAtTz ? parseInt(req.body.nowAtTz || "0", 10) : GetMinuteStartNowTimestampUTC(),
+    ) + 60;
+
+  const monitors = await GetMonitorsParsed({ tags: body.tags, is_hidden: "NO" });
+  if (!monitors || monitors.length === 0) {
+    return error(404, { message: "Monitors not found" });
+  }
+
+  const incidents = await Promise.all(
+    monitors.map((monitor) => db.getIncidentsForEventsByDateRangeMonitor(startOfDayTodayAtTz, nowAtTz, monitor.tag)),
+  );
+
+  return json({
+    incidents: mergeGroupIncidents(incidents),
+  });
+}
diff --git a/src/lib/server/api-server/group-day-maintenances/post.ts b/src/lib/server/api-server/group-day-maintenances/post.ts
new file mode 100644
index 000000000..2419b1cf7
--- /dev/null
+++ b/src/lib/server/api-server/group-day-maintenances/post.ts
@@ -0,0 +1,40 @@
+import { json, error } from "@sveltejs/kit";
+import type { APIServerRequest } from "$lib/server/types/api-server";
+import { BeginningOfDay, GetMinuteStartNowTimestampUTC, GetMinuteStartTimestampUTC } from "$lib/server/tool";
+import { GetMonitorsParsed } from "../../controllers/monitorsController";
+import db from "$lib/server/db/db";
+import { mergeGroupMaintenances } from "$lib/server/group-day-detail";
+
+interface GroupDayDetailRequest {
+  tags: string[];
+}
+
+export default async function post(req: APIServerRequest): Promise<Response> {
+  const body = req.body as GroupDayDetailRequest;
+
+  if (!Array.isArray(body.tags) || body.tags.length === 0) {
+    return error(400, { message: "tags is required" });
+  }
+
+  const startOfDayTodayAtTz = req.body.startOfDayTodayAtTz
+    ? parseInt(req.body.startOfDayTodayAtTz || "0", 10)
+    : BeginningOfDay();
+
+  const nowAtTz =
+    GetMinuteStartTimestampUTC(
+      req.body.nowAtTz ? parseInt(req.body.nowAtTz || "0", 10) : GetMinuteStartNowTimestampUTC(),
+    ) + 60;
+
+  const monitors = await GetMonitorsParsed({ tags: body.tags, is_hidden: "NO" });
+  if (!monitors || monitors.length === 0) {
+    return error(404, { message: "Monitors not found" });
+  }
+
+  const maintenances = await Promise.all(
+    monitors.map((monitor) => db.getMaintenanceEventsForEventsByDateRangeMonitor(startOfDayTodayAtTz, nowAtTz, monitor.tag)),
+  );
+
+  return json({
+    maintenances: mergeGroupMaintenances(maintenances),
+  });
+}
diff --git a/src/lib/server/api-server/group-day-status/post.ts b/src/lib/server/api-server/group-day-status/post.ts
new file mode 100644
index 000000000..2c168a848
--- /dev/null
+++ b/src/lib/server/api-server/group-day-status/post.ts
@@ -0,0 +1,38 @@
+import { json, error } from "@sveltejs/kit";
+import type { APIServerRequest } from "$lib/server/types/api-server";
+import db from "$lib/server/db/db";
+import { BeginningOfDay, GetMinuteStartNowTimestampUTC, GetMinuteStartTimestampUTC } from "$lib/server/tool";
+import { GetMonitorsParsed } from "../../controllers/monitorsController";
+import { buildGroupDayStatusDetail } from "$lib/server/group-day-detail";
+
+interface GroupDayDetailRequest {
+  tags: string[];
+}
+
+export default async function post(req: APIServerRequest): Promise<Response> {
+  const body = req.body as GroupDayDetailRequest;
+
+  if (!Array.isArray(body.tags) || body.tags.length === 0) {
+    return error(400, { message: "tags is required" });
+  }
+
+  const startOfDayTodayAtTz = req.body.startOfDayTodayAtTz
+    ? parseInt(req.body.startOfDayTodayAtTz || "0", 10)
+    : BeginningOfDay();
+
+  const nowAtTz =
+    GetMinuteStartTimestampUTC(
+      req.body.nowAtTz ? parseInt(req.body.nowAtTz || "0", 10) : GetMinuteStartNowTimestampUTC(),
+    ) + 60;
+
+  const monitors = await GetMonitorsParsed({ tags: body.tags, is_hidden: "NO" });
+  if (!monitors || monitors.length === 0) {
+    return error(404, { message: "Monitors not found" });
+  }
+
+  const monitoringData = await Promise.all(
+    monitors.map(async (monitor) => [monitor.tag, await db.getMonitoringData(monitor.tag, startOfDayTodayAtTz, nowAtTz)] as const),
+  );
+
+  return json(buildGroupDayStatusDetail(Object.fromEntries(monitoringData), startOfDayTodayAtTz, nowAtTz));
+}
diff --git a/src/lib/server/controllers/dashboardController.ts b/src/lib/server/controllers/dashboardController.ts
index cdea16afe..6ede28d82 100644
--- a/src/lib/server/controllers/dashboardController.ts
+++ b/src/lib/server/controllers/dashboardController.ts
@@ -1,6 +1,7 @@
 import db from "../db/db.js";
 import { GetMinuteStartNowTimestampUTC, BeginningOfMinute, BeginningOfDay } from "../tool.js";
-import { GetPageByPathWithMonitors, GetLatestMonitoringDataAllActive } from "./controller.js";
+import { GetLatestMonitoringDataAllActive } from "./controller.js";
+import { GetPageByPathWithMonitorStructure, type PageMonitorGroupWithMonitors } from "./pagesController.js";
 import { GetMonitorsParsed } from "./monitorsController.js";
 import { GetStatusSummary, GetStatusBgColor } from "../../clientTools";
 
@@ -16,6 +17,7 @@ import type {
 } from "../types/db.js";
 import type { GroupMonitorTypeData } from "../types/monitor.js";
 import GC from "../../global-constants.js";
+import type { StatusType } from "../../global-constants.js";
 import type { LayoutServerData } from "./layoutController.js";
 
 // Default page settings
@@ -162,6 +164,20 @@ export interface PageDashboardData {
   upcomingMaintenances: MaintenanceEventsMonitorList[];
   monitorTags: string[];
   monitorGroupMembersByTag: Record<string, string[]>;
+  latestStatusByTag: Record<string, StatusType>;
+  pageMonitorItems: Array<
+    | { kind: "monitor"; monitor_tag: string; position: number }
+      | {
+          kind: "group";
+          id: number;
+          name: string;
+          description: string | null;
+          default_expanded: boolean;
+          adopt_child_status: boolean;
+          position: number;
+          monitors: Array<{ monitor_tag: string; position: number }>;
+        }
+  >;
   pageDetails: PageRecordTyped;
   socialPagePreviewImage?: string;
   metaPageTitle?: string;
@@ -309,13 +325,18 @@ export const GetPageDashboardData = async (
   pagePath: string,
   layoutData: LayoutServerData,
 ): Promise<PageDashboardData | null> => {
-  // Fetch page by path with monitors
-  const pageData = await GetPageByPathWithMonitors(pagePath);
+  const pageData = await GetPageByPathWithMonitorStructure(pagePath, {
+    excludeHidden: true,
+    includeEmptyGroups: false,
+  });
   if (!pageData) {
     return null;
   }
 
-  const { page: pageDetails, monitors: pageMonitors } = pageData;
+  const {
+    page: pageDetails,
+    structure: { all_monitors: pageMonitors, monitors: topLevelMonitors, monitor_groups: pageMonitorGroups },
+  } = pageData;
   const monitorTags = pageMonitors.map((pm) => pm.monitor_tag);
 
   // Parse page settings with defaults
@@ -370,6 +391,8 @@ export const GetPageDashboardData = async (
       upcomingMaintenances: [],
       monitorTags,
       monitorGroupMembersByTag: {},
+      latestStatusByTag: {},
+      pageMonitorItems: [],
       pageDetails: pageDetailsTyped,
       socialPagePreviewImage,
       metaPageTitle,
@@ -398,6 +421,9 @@ export const GetPageDashboardData = async (
 
   const pageStatus = BuildPageStatus(latestData, nowTs);
   const monitorGroupMembersByTag: Record<string, string[]> = {};
+  const latestStatusByTag: Record<string, StatusType> = Object.fromEntries(
+    latestData.map((item) => [item.monitor_tag, (item.status as StatusType) || GC.NO_DATA]),
+  );
 
   for (const monitor of parsedMonitors) {
     if (monitor.monitor_type !== "GROUP") continue;
@@ -408,6 +434,27 @@ export const GetPageDashboardData = async (
     monitorGroupMembersByTag[monitor.tag] = groupData.monitors.map((member) => member.tag);
   }
 
+  const pageMonitorItems = [
+    ...topLevelMonitors.map((monitor) => ({
+      kind: "monitor" as const,
+      monitor_tag: monitor.monitor_tag,
+      position: monitor.position,
+    })),
+    ...pageMonitorGroups.map((group: PageMonitorGroupWithMonitors) => ({
+      kind: "group" as const,
+      id: group.id,
+      name: group.name,
+      description: group.description,
+      default_expanded: group.default_expanded,
+      adopt_child_status: group.adopt_child_status,
+      position: group.position,
+      monitors: group.monitors.map((monitor) => ({
+        monitor_tag: monitor.monitor_tag,
+        position: monitor.position,
+      })),
+    })),
+  ].sort((a, b) => a.position - b.position);
+
   return {
     pageStatus,
     ongoingIncidents,
@@ -415,6 +462,8 @@ export const GetPageDashboardData = async (
     upcomingMaintenances,
     monitorTags,
     monitorGroupMembersByTag,
+    latestStatusByTag,
+    pageMonitorItems,
     pageDetails: pageDetailsTyped,
     socialPagePreviewImage,
     metaPageTitle,
diff --git a/src/lib/server/controllers/pagesController.ts b/src/lib/server/controllers/pagesController.ts
index 9a004cb4e..2e03b7da1 100644
--- a/src/lib/server/controllers/pagesController.ts
+++ b/src/lib/server/controllers/pagesController.ts
@@ -1,25 +1,115 @@
 import db from "../db/db.js";
-import type { PageRecord, PageRecordInsert, PageMonitorRecord, PageMonitorRecordInsert } from "../types/db.js";
+import type {
+  PageMonitorGroupRecord,
+  PageMonitorRecord,
+  PageRecord,
+  PageRecordInsert,
+} from "../types/db.js";
+
+export interface PageMonitorGroupWithMonitors extends PageMonitorGroupRecord {
+  monitors: PageMonitorRecord[];
+}
+
+export interface PageMonitorStructure {
+  monitors: PageMonitorRecord[];
+  monitor_groups: PageMonitorGroupWithMonitors[];
+  all_monitors: PageMonitorRecord[];
+}
+
+export interface PageMonitorStructureMonitorInput {
+  monitor_tag: string;
+  position?: number;
+}
+
+export interface PageMonitorStructureGroupInput {
+  id?: number;
+  name: string;
+  description?: string | null;
+  default_expanded?: boolean;
+  adopt_child_status?: boolean;
+  position?: number;
+  monitors?: PageMonitorStructureMonitorInput[];
+}
+
+async function ensurePageExists(page_id: number): Promise<PageRecord> {
+  const page = await db.getPageById(page_id);
+  if (!page) {
+    throw new Error(`Page with id ${page_id} not found`);
+  }
+
+  return page;
+}
+
+async function ensureGroupExists(page_id: number, group_id: number): Promise<PageMonitorGroupRecord> {
+  const group = await db.getPageMonitorGroupById(group_id);
+  if (!group || group.page_id !== page_id) {
+    throw new Error(`Page monitor group "${group_id}" not found on this page`);
+  }
+
+  return group;
+}
+
+async function getNextTopLevelPosition(page_id: number): Promise<number> {
+  const [groups, monitors] = await Promise.all([db.getPageMonitorGroups(page_id), db.getPageMonitors(page_id)]);
+  const topLevelMonitorPositions = monitors.filter((monitor) => monitor.page_monitor_group_id === null).map((monitor) => monitor.position);
+  const groupPositions = groups.map((group) => group.position);
+
+  return Math.max(-1, ...topLevelMonitorPositions, ...groupPositions) + 1;
+}
+
+export async function GetPageMonitorStructure(
+  page_id: number,
+  options: { excludeHidden?: boolean; includeEmptyGroups?: boolean } = {},
+): Promise<PageMonitorStructure> {
+  const { excludeHidden = false, includeEmptyGroups = true } = options;
+  const [groups, allMonitors] = await Promise.all([
+    db.getPageMonitorGroups(page_id),
+    excludeHidden ? db.getPageMonitorsExcludeHidden(page_id) : db.getPageMonitors(page_id),
+  ]);
+
+  const monitorsByGroup = new Map<number, PageMonitorRecord[]>();
+  const topLevelMonitors: PageMonitorRecord[] = [];
+
+  for (const monitor of allMonitors) {
+    if (monitor.page_monitor_group_id === null) {
+      topLevelMonitors.push(monitor);
+      continue;
+    }
+
+    if (!monitorsByGroup.has(monitor.page_monitor_group_id)) {
+      monitorsByGroup.set(monitor.page_monitor_group_id, []);
+    }
+
+    monitorsByGroup.get(monitor.page_monitor_group_id)!.push(monitor);
+  }
+
+  const structuredGroups = groups
+    .map<PageMonitorGroupWithMonitors>((group) => ({
+      ...group,
+      monitors: (monitorsByGroup.get(group.id) || []).sort((a, b) => a.position - b.position),
+    }))
+    .filter((group) => includeEmptyGroups || group.monitors.length > 0);
+
+  return {
+    monitors: topLevelMonitors.sort((a, b) => a.position - b.position),
+    monitor_groups: structuredGroups,
+    all_monitors: allMonitors,
+  };
+}
 
 // ============ Page CRUD Operations ============
 
-/**
- * Create a new page
- */
 export async function CreatePage(data: PageRecordInsert): Promise<PageRecord> {
-  // Validate required fields
   if (data.page_path === undefined || data.page_path === null || !data.page_title || !data.page_header) {
     throw new Error("page_path, page_title, and page_header are required");
   }
 
-  // Make page_path URL-friendly: lowercase, replace spaces with hyphens, remove special chars (including leading slashes)
   data.page_path = data.page_path
     .toLowerCase()
     .trim()
     .replace(/\s+/g, "-")
     .replace(/[^a-z0-9_-]/g, "");
 
-  // Check if page with this path already exists
   const existingPage = await db.getPageByPath(data.page_path);
   if (existingPage) {
     throw new Error(`Page with path "${data.page_path}" already exists`);
@@ -28,38 +118,24 @@ export async function CreatePage(data: PageRecordInsert): Promise<PageRecord> {
   return await db.createPage(data);
 }
 
-/**
- * Get page by path
- */
 export async function GetPageByPath(page_path: string): Promise<PageRecord | undefined> {
   return await db.getPageByPath(page_path);
 }
 
-/**
- * Get page by ID
- */
 export async function GetPageById(id: number): Promise<PageRecord | undefined> {
   return await db.getPageById(id);
 }
 
-/**
- * Get all pages
- */
 export async function GetAllPages(): Promise<PageRecord[]> {
   return await db.getAllPages();
 }
 
-/**
- * Update page by ID
- */
 export async function UpdatePage(id: number, data: Partial<PageRecordInsert>): Promise<PageRecord> {
-  // Check if page exists
   const existingPage = await db.getPageById(id);
   if (!existingPage) {
     throw new Error(`Page with id ${id} not found`);
   }
 
-  // If updating page_path, make it URL-friendly
   if (data.page_path !== undefined) {
     data.page_path = data.page_path
       .toLowerCase()
@@ -68,7 +144,6 @@ export async function UpdatePage(id: number, data: Partial<PageRecordInsert>): P
       .replace(/[^a-z0-9_-]/g, "");
   }
 
-  // If updating page_path, check if it conflicts with another page
   if (data.page_path !== undefined && data.page_path !== existingPage.page_path) {
     const conflictingPage = await db.getPageByPath(data.page_path);
     if (conflictingPage) {
@@ -80,17 +155,12 @@ export async function UpdatePage(id: number, data: Partial<PageRecordInsert>): P
   return (await db.getPageById(id))!;
 }
 
-/**
- * Delete page by ID
- */
 export async function DeletePage(id: number): Promise<void> {
-  // Check if page exists
   const existingPage = await db.getPageById(id);
   if (!existingPage) {
     throw new Error(`Page with id ${id} not found`);
   }
 
-  // Prevent deleting the home page (empty path)
   if (existingPage.page_path === "") {
     throw new Error("Cannot delete the home page");
   }
@@ -98,52 +168,124 @@ export async function DeletePage(id: number): Promise<void> {
   await db.deletePage(id);
 }
 
+// ============ Page Monitor Group Operations ============
+
+export async function CreatePageMonitorGroup(
+  page_id: number,
+  name: string,
+  default_expanded: boolean = false,
+  adopt_child_status: boolean = false,
+  description: string | null = null,
+  position?: number,
+): Promise<PageMonitorGroupRecord> {
+  await ensurePageExists(page_id);
+
+  const normalizedDescription = typeof description === "string" ? description.trim() || null : null;
+  const finalPosition = typeof position === "number" ? position : await getNextTopLevelPosition(page_id);
+  return await db.createPageMonitorGroup({
+    page_id,
+    name,
+    description: normalizedDescription,
+    default_expanded,
+    adopt_child_status,
+    position: finalPosition,
+  });
+}
+
+export async function UpdatePageMonitorGroup(
+  page_id: number,
+  group_id: number,
+  data: { name?: string; description?: string | null; default_expanded?: boolean; adopt_child_status?: boolean },
+): Promise<PageMonitorGroupRecord> {
+  await ensurePageExists(page_id);
+  await ensureGroupExists(page_id, group_id);
+
+  await db.updatePageMonitorGroup(group_id, {
+    ...data,
+    description: typeof data.description === "string" ? data.description.trim() || null : data.description,
+  });
+  return (await db.getPageMonitorGroupById(group_id))!;
+}
+
+export async function DeletePageMonitorGroup(page_id: number, group_id: number): Promise<void> {
+  await ensurePageExists(page_id);
+  await ensureGroupExists(page_id, group_id);
+  await db.deletePageMonitorGroupAndPromoteChildren(page_id, group_id);
+}
+
+export async function GetPageMonitorGroups(page_id: number): Promise<PageMonitorGroupRecord[]> {
+  await ensurePageExists(page_id);
+  return await db.getPageMonitorGroups(page_id);
+}
+
+export async function ReorderPageTopLevelItems(
+  page_id: number,
+  items: Array<{ kind: "monitor" | "group"; id: string | number }>,
+): Promise<void> {
+  await ensurePageExists(page_id);
+
+  const monitorPositions = items
+    .filter((item): item is { kind: "monitor"; id: string } => item.kind === "monitor")
+    .map((item, index) => ({
+      monitor_tag: item.id,
+      position: index,
+    }));
+
+  const groupPositions = items
+    .filter((item): item is { kind: "group"; id: number } => item.kind === "group")
+    .map((item, index) => ({
+      id: item.id,
+      position: index,
+    }));
+
+  await Promise.all([
+    db.updatePageMonitorPositions(page_id, monitorPositions),
+    db.updatePageMonitorGroupPositions(page_id, groupPositions),
+  ]);
+}
+
 // ============ Page Monitor Operations ============
 
-/**
- * Add monitor to a page
- */
 export async function AddMonitorToPage(
   page_id: number,
   monitor_tag: string,
   monitor_settings_json?: string | null,
   position?: number,
+  page_monitor_group_id?: number | null,
 ): Promise<void> {
-  // Check if page exists
-  const page = await db.getPageById(page_id);
-  if (!page) {
-    throw new Error(`Page with id ${page_id} not found`);
-  }
+  await ensurePageExists(page_id);
 
-  // Check if monitor already exists on page
   const exists = await db.monitorExistsOnPage(page_id, monitor_tag);
   if (exists) {
     throw new Error(`Monitor "${monitor_tag}" already exists on this page`);
   }
 
-  // If no position specified, append at end
+  if (page_monitor_group_id !== undefined && page_monitor_group_id !== null) {
+    await ensureGroupExists(page_id, page_monitor_group_id);
+  }
+
   let finalPosition = position;
   if (finalPosition === undefined) {
-    const existing = await db.getPageMonitors(page_id);
-    finalPosition = existing.length > 0 ? Math.max(...existing.map((m) => m.position)) + 1 : 0;
+    if (page_monitor_group_id === undefined || page_monitor_group_id === null) {
+      finalPosition = await getNextTopLevelPosition(page_id);
+    } else {
+      const existing = await db.getPageMonitors(page_id);
+      const groupChildren = existing.filter((monitor) => monitor.page_monitor_group_id === page_monitor_group_id);
+      finalPosition = groupChildren.length > 0 ? Math.max(...groupChildren.map((monitor) => monitor.position)) + 1 : 0;
+    }
   }
 
   await db.addMonitorToPage({
     page_id,
     monitor_tag,
+    page_monitor_group_id: page_monitor_group_id ?? null,
     monitor_settings_json: monitor_settings_json || null,
     position: finalPosition,
   });
 }
 
-/**
- * Reorder monitors on a page
- */
 export async function ReorderPageMonitors(page_id: number, monitor_tags: string[]): Promise<void> {
-  const page = await db.getPageById(page_id);
-  if (!page) {
-    throw new Error(`Page with id ${page_id} not found`);
-  }
+  await ensurePageExists(page_id);
 
   const monitorPositions = monitor_tags.map((tag, index) => ({
     monitor_tag: tag,
@@ -153,44 +295,167 @@ export async function ReorderPageMonitors(page_id: number, monitor_tags: string[
   await db.updatePageMonitorPositions(page_id, monitorPositions);
 }
 
-/**
- * Remove monitor from a page
- */
-export async function RemoveMonitorFromPage(page_id: number, monitor_tag: string): Promise<void> {
-  // Check if page exists
-  const page = await db.getPageById(page_id);
-  if (!page) {
-    throw new Error(`Page with id ${page_id} not found`);
+export async function ReorderPageGroupMonitors(page_id: number, group_id: number, monitor_tags: string[]): Promise<void> {
+  await ensurePageExists(page_id);
+  await ensureGroupExists(page_id, group_id);
+
+  const monitorPositions = monitor_tags.map((tag, index) => ({
+    monitor_tag: tag,
+    position: index,
+  }));
+
+  await db.updatePageMonitorPositions(page_id, monitorPositions);
+}
+
+export async function MovePageMonitorToGroup(
+  page_id: number,
+  monitor_tag: string,
+  group_id: number | null,
+  position?: number,
+): Promise<void> {
+  await ensurePageExists(page_id);
+
+  const exists = await db.monitorExistsOnPage(page_id, monitor_tag);
+  if (!exists) {
+    throw new Error(`Monitor "${monitor_tag}" not found on this page`);
   }
 
+  if (group_id !== null) {
+    await ensureGroupExists(page_id, group_id);
+  }
+
+  await db.movePageMonitorToGroup(page_id, monitor_tag, group_id, position);
+}
+
+export async function ReplacePageMonitorStructure(
+  page_id: number,
+  data: {
+    monitors?: PageMonitorStructureMonitorInput[];
+    monitor_groups?: PageMonitorStructureGroupInput[];
+  },
+): Promise<PageMonitorStructure> {
+  await ensurePageExists(page_id);
+
+  const topLevelMonitors = data.monitors || [];
+  const monitorGroups = data.monitor_groups || [];
+  const existingGroups = await db.getPageMonitorGroups(page_id);
+  const existingGroupById = new Map(existingGroups.map((group) => [group.id, group]));
+  const retainedGroupIds = new Set<number>();
+
+  await db.deletePageMonitorsByPageId(page_id);
+
+  for (const group of monitorGroups) {
+    if (typeof group.id === "number" && existingGroupById.has(group.id)) {
+      retainedGroupIds.add(group.id);
+    }
+  }
+
+  for (const group of existingGroups) {
+    if (!retainedGroupIds.has(group.id)) {
+      await db.deletePageMonitorGroup(group.id);
+    }
+  }
+
+  const topLevelItems = [
+    ...topLevelMonitors.map((monitor, index) => ({
+      kind: "monitor" as const,
+      monitor,
+      order: typeof monitor.position === "number" ? monitor.position : index,
+    })),
+    ...monitorGroups.map((group, index) => ({
+      kind: "group" as const,
+      group,
+      order: typeof group.position === "number" ? group.position : topLevelMonitors.length + index,
+    })),
+  ].sort((a, b) => a.order - b.order);
+
+  const actualGroupIds = new Map<number, number>();
+
+  for (let index = 0; index < topLevelItems.length; index++) {
+    const item = topLevelItems[index];
+
+    if (item.kind === "group") {
+      const name = item.group.name.trim();
+      const description =
+        typeof item.group.description === "string" ? item.group.description.trim() || null : null;
+      if (!name) {
+        throw new Error("Group name is required");
+      }
+
+      if (typeof item.group.id === "number" && existingGroupById.has(item.group.id)) {
+        await db.updatePageMonitorGroup(item.group.id, {
+          name,
+          description,
+          default_expanded: item.group.default_expanded ?? false,
+          adopt_child_status: item.group.adopt_child_status ?? false,
+          position: index,
+        });
+        actualGroupIds.set(item.group.id, item.group.id);
+      } else {
+        const createdGroup = await db.createPageMonitorGroup({
+          page_id,
+          name,
+          description,
+          default_expanded: item.group.default_expanded ?? false,
+          adopt_child_status: item.group.adopt_child_status ?? false,
+          position: index,
+        });
+        if (typeof item.group.id === "number") {
+          actualGroupIds.set(item.group.id, createdGroup.id);
+        }
+        actualGroupIds.set(createdGroup.id, createdGroup.id);
+        item.group.id = createdGroup.id;
+      }
+    }
+  }
+
+  for (let index = 0; index < topLevelItems.length; index++) {
+    const item = topLevelItems[index];
+    if (item.kind !== "monitor") continue;
+
+    await AddMonitorToPage(page_id, item.monitor.monitor_tag, null, index, null);
+  }
+
+  for (const group of monitorGroups) {
+    const actualGroupId =
+      typeof group.id === "number" ? actualGroupIds.get(group.id) || group.id : undefined;
+    if (!actualGroupId) continue;
+
+    const childMonitors = (group.monitors || []).map((monitor, index) => ({
+      ...monitor,
+      position: typeof monitor.position === "number" ? monitor.position : index,
+    }));
+
+    childMonitors.sort((a, b) => (a.position ?? 0) - (b.position ?? 0));
+
+    for (let index = 0; index < childMonitors.length; index++) {
+      await AddMonitorToPage(page_id, childMonitors[index].monitor_tag, null, index, actualGroupId);
+    }
+  }
+
+  return await GetPageMonitorStructure(page_id);
+}
+
+export async function RemoveMonitorFromPage(page_id: number, monitor_tag: string): Promise<void> {
+  await ensurePageExists(page_id);
+
   const deleted = await db.removeMonitorFromPage(page_id, monitor_tag);
   if (deleted === 0) {
     throw new Error(`Monitor "${monitor_tag}" not found on this page`);
   }
 }
 
-/**
- * Get all monitors for a page
- */
 export async function GetPageMonitors(page_id: number): Promise<PageMonitorRecord[]> {
   return await db.getPageMonitors(page_id);
 }
 
-/**
- * Update monitor settings on a page
- */
 export async function UpdatePageMonitorSettings(
   page_id: number,
   monitor_tag: string,
   monitor_settings_json: string | null,
 ): Promise<void> {
-  // Check if page exists
-  const page = await db.getPageById(page_id);
-  if (!page) {
-    throw new Error(`Page with id ${page_id} not found`);
-  }
+  await ensurePageExists(page_id);
 
-  // Check if monitor exists on page
   const exists = await db.monitorExistsOnPage(page_id, monitor_tag);
   if (!exists) {
     throw new Error(`Monitor "${monitor_tag}" not found on this page`);
@@ -199,9 +464,8 @@ export async function UpdatePageMonitorSettings(
   await db.updatePageMonitorSettings(page_id, monitor_tag, monitor_settings_json);
 }
 
-/**
- * Get page with its monitors
- */
+// ============ Convenience Helpers ============
+
 export async function GetPageWithMonitors(
   page_id: number,
 ): Promise<{ page: PageRecord; monitors: PageMonitorRecord[] } | undefined> {
@@ -214,9 +478,6 @@ export async function GetPageWithMonitors(
   return { page, monitors };
 }
 
-/**
- * Get page by path with its monitors (excluding hidden monitors)
- */
 export async function GetPageByPathWithMonitors(
   page_path: string,
 ): Promise<{ page: PageRecord; monitors: PageMonitorRecord[] } | undefined> {
@@ -228,3 +489,29 @@ export async function GetPageByPathWithMonitors(
   const monitors = await db.getPageMonitorsExcludeHidden(page.id);
   return { page, monitors };
 }
+
+export async function GetPageWithMonitorStructure(
+  page_id: number,
+  options: { excludeHidden?: boolean; includeEmptyGroups?: boolean } = {},
+): Promise<{ page: PageRecord; structure: PageMonitorStructure } | undefined> {
+  const page = await db.getPageById(page_id);
+  if (!page) {
+    return undefined;
+  }
+
+  const structure = await GetPageMonitorStructure(page_id, options);
+  return { page, structure };
+}
+
+export async function GetPageByPathWithMonitorStructure(
+  page_path: string,
+  options: { excludeHidden?: boolean; includeEmptyGroups?: boolean } = {},
+): Promise<{ page: PageRecord; structure: PageMonitorStructure } | undefined> {
+  const page = await db.getPageByPath(page_path);
+  if (!page) {
+    return undefined;
+  }
+
+  const structure = await GetPageMonitorStructure(page.id, options);
+  return { page, structure };
+}
diff --git a/src/lib/server/db/dbimpl.ts b/src/lib/server/db/dbimpl.ts
index b7621a196..048ed7321 100644
--- a/src/lib/server/db/dbimpl.ts
+++ b/src/lib/server/db/dbimpl.ts
@@ -220,6 +220,13 @@ class DbImpl {
   getAllPages!: PagesRepository["getAllPages"];
   updatePage!: PagesRepository["updatePage"];
   deletePage!: PagesRepository["deletePage"];
+  createPageMonitorGroup!: PagesRepository["createPageMonitorGroup"];
+  getPageMonitorGroupById!: PagesRepository["getPageMonitorGroupById"];
+  getPageMonitorGroups!: PagesRepository["getPageMonitorGroups"];
+  updatePageMonitorGroup!: PagesRepository["updatePageMonitorGroup"];
+  deletePageMonitorGroup!: PagesRepository["deletePageMonitorGroup"];
+  updatePageMonitorGroupPositions!: PagesRepository["updatePageMonitorGroupPositions"];
+  deletePageMonitorGroupAndPromoteChildren!: PagesRepository["deletePageMonitorGroupAndPromoteChildren"];
 
   // ============ Page Monitors ============
   addMonitorToPage!: PagesRepository["addMonitorToPage"];
@@ -231,6 +238,7 @@ class DbImpl {
   monitorExistsOnPage!: PagesRepository["monitorExistsOnPage"];
   deletePageMonitorsByTag!: PagesRepository["deletePageMonitorsByTag"];
   deletePageMonitorsByPageId!: PagesRepository["deletePageMonitorsByPageId"];
+  movePageMonitorToGroup!: PagesRepository["movePageMonitorToGroup"];
   updatePageMonitorPositions!: PagesRepository["updatePageMonitorPositions"];
 
   // ============ Maintenances ============
@@ -590,6 +598,13 @@ class DbImpl {
     this.getAllPages = this.pages.getAllPages.bind(this.pages);
     this.updatePage = this.pages.updatePage.bind(this.pages);
     this.deletePage = this.pages.deletePage.bind(this.pages);
+    this.createPageMonitorGroup = this.pages.createPageMonitorGroup.bind(this.pages);
+    this.getPageMonitorGroupById = this.pages.getPageMonitorGroupById.bind(this.pages);
+    this.getPageMonitorGroups = this.pages.getPageMonitorGroups.bind(this.pages);
+    this.updatePageMonitorGroup = this.pages.updatePageMonitorGroup.bind(this.pages);
+    this.deletePageMonitorGroup = this.pages.deletePageMonitorGroup.bind(this.pages);
+    this.updatePageMonitorGroupPositions = this.pages.updatePageMonitorGroupPositions.bind(this.pages);
+    this.deletePageMonitorGroupAndPromoteChildren = this.pages.deletePageMonitorGroupAndPromoteChildren.bind(this.pages);
     this.addMonitorToPage = this.pages.addMonitorToPage.bind(this.pages);
     this.removeMonitorFromPage = this.pages.removeMonitorFromPage.bind(this.pages);
     this.getPageMonitors = this.pages.getPageMonitors.bind(this.pages);
@@ -599,6 +614,7 @@ class DbImpl {
     this.monitorExistsOnPage = this.pages.monitorExistsOnPage.bind(this.pages);
     this.deletePageMonitorsByTag = this.pages.deletePageMonitorsByTag.bind(this.pages);
     this.deletePageMonitorsByPageId = this.pages.deletePageMonitorsByPageId.bind(this.pages);
+    this.movePageMonitorToGroup = this.pages.movePageMonitorToGroup.bind(this.pages);
     this.updatePageMonitorPositions = this.pages.updatePageMonitorPositions.bind(this.pages);
   }
 
diff --git a/src/lib/server/db/repositories/pages.ts b/src/lib/server/db/repositories/pages.ts
index c4267fb16..916ed5707 100644
--- a/src/lib/server/db/repositories/pages.ts
+++ b/src/lib/server/db/repositories/pages.ts
@@ -1,6 +1,13 @@
 import { BaseRepository } from "./base.js";
 import { GetDbType } from "../../tool.js";
-import type { PageRecord, PageRecordInsert, PageMonitorRecord, PageMonitorRecordInsert } from "../../types/db.js";
+import type {
+  PageRecord,
+  PageRecordInsert,
+  PageMonitorGroupRecord,
+  PageMonitorGroupRecordInsert,
+  PageMonitorRecord,
+  PageMonitorRecordInsert,
+} from "../../types/db.js";
 
 /**
  * Repository for pages and page monitors operations
@@ -58,12 +65,139 @@ export class PagesRepository extends BaseRepository {
     return await this.knex("pages").where("id", id).del();
   }
 
+  // ============ Page Monitor Groups ============
+
+  async createPageMonitorGroup(data: PageMonitorGroupRecordInsert): Promise<PageMonitorGroupRecord> {
+    const dbType = GetDbType();
+    const insertData = {
+      page_id: data.page_id,
+      name: data.name,
+      description: data.description ?? null,
+      default_expanded: data.default_expanded ?? false,
+      adopt_child_status: data.adopt_child_status ?? false,
+      position: data.position ?? 0,
+      created_at: this.knex.fn.now(),
+      updated_at: this.knex.fn.now(),
+    };
+
+    if (dbType === "postgresql") {
+      const result = await this.knex("pages_monitor_groups").insert(insertData).returning("*");
+      const group = Array.isArray(result) ? result[0] : result;
+      return group;
+    }
+
+    const result = await this.knex("pages_monitor_groups").insert(insertData);
+    const insertedId = result[0];
+    const id = typeof insertedId === "object" ? (insertedId as { id: number }).id : insertedId;
+    return (await this.getPageMonitorGroupById(id))!;
+  }
+
+  async getPageMonitorGroupById(id: number): Promise<PageMonitorGroupRecord | undefined> {
+    return await this.knex("pages_monitor_groups").where("id", id).first();
+  }
+
+  async getPageMonitorGroups(page_id: number): Promise<PageMonitorGroupRecord[]> {
+    return await this.knex("pages_monitor_groups").where("page_id", page_id).orderBy("position", "asc");
+  }
+
+  async updatePageMonitorGroup(
+    id: number,
+    data: Partial<Omit<PageMonitorGroupRecordInsert, "page_id">>,
+  ): Promise<number> {
+    return await this.knex("pages_monitor_groups")
+      .where("id", id)
+      .update({
+        ...data,
+        updated_at: this.knex.fn.now(),
+      });
+  }
+
+  async deletePageMonitorGroup(id: number): Promise<number> {
+    return await this.knex("pages_monitor_groups").where("id", id).del();
+  }
+
+  async updatePageMonitorGroupPositions(
+    page_id: number,
+    groupPositions: { id: number; position: number }[],
+  ): Promise<void> {
+    await this.knex.transaction(async (trx) => {
+      for (const gp of groupPositions) {
+        await trx("pages_monitor_groups")
+          .where({ page_id, id: gp.id })
+          .update({ position: gp.position, updated_at: trx.fn.now() });
+      }
+    });
+  }
+
+  async deletePageMonitorGroupAndPromoteChildren(page_id: number, group_id: number): Promise<void> {
+    await this.knex.transaction(async (trx) => {
+      const group = await trx("pages_monitor_groups").where({ page_id, id: group_id }).first();
+      if (!group) return;
+
+      const groupPosition = group.position;
+      const childMonitors = await trx("pages_monitors")
+        .where({ page_id, page_monitor_group_id: group_id })
+        .orderBy("position", "asc");
+
+      const delta = childMonitors.length - 1;
+
+      for (let index = 0; index < childMonitors.length; index++) {
+        await trx("pages_monitors")
+          .where({ page_id, monitor_tag: childMonitors[index].monitor_tag })
+          .update({
+            page_monitor_group_id: null,
+            position: groupPosition + index,
+            updated_at: trx.fn.now(),
+          });
+      }
+
+      if (delta !== 0) {
+        await trx("pages_monitors")
+          .where("page_id", page_id)
+          .whereNull("page_monitor_group_id")
+          .andWhere("position", ">", groupPosition)
+          .update({
+            position: trx.raw("?? + ?", ["position", delta]),
+            updated_at: trx.fn.now(),
+          });
+
+        await trx("pages_monitor_groups")
+          .where("page_id", page_id)
+          .andWhere("position", ">", groupPosition)
+          .update({
+            position: trx.raw("?? + ?", ["position", delta]),
+            updated_at: trx.fn.now(),
+          });
+      } else {
+        await trx("pages_monitors")
+          .where("page_id", page_id)
+          .whereNull("page_monitor_group_id")
+          .andWhere("position", ">", groupPosition)
+          .update({
+            position: trx.raw("?? - 1", ["position"]),
+            updated_at: trx.fn.now(),
+          });
+
+        await trx("pages_monitor_groups")
+          .where("page_id", page_id)
+          .andWhere("position", ">", groupPosition)
+          .update({
+            position: trx.raw("?? - 1", ["position"]),
+            updated_at: trx.fn.now(),
+          });
+      }
+
+      await trx("pages_monitor_groups").where({ page_id, id: group_id }).del();
+    });
+  }
+
   // ============ Pages Monitors ============
 
   async addMonitorToPage(data: PageMonitorRecordInsert): Promise<void> {
     await this.knex("pages_monitors").insert({
       page_id: data.page_id,
       monitor_tag: data.monitor_tag,
+      page_monitor_group_id: data.page_monitor_group_id ?? null,
       monitor_settings_json: data.monitor_settings_json,
       position: data.position ?? 0,
       created_at: this.knex.fn.now(),
@@ -117,6 +251,110 @@ export class PagesRepository extends BaseRepository {
     return await this.knex("pages_monitors").where({ page_id }).del();
   }
 
+  async movePageMonitorToGroup(
+    page_id: number,
+    monitor_tag: string,
+    page_monitor_group_id: number | null,
+    position?: number,
+  ): Promise<void> {
+    await this.knex.transaction(async (trx) => {
+      const existing = await trx("pages_monitors").where({ page_id, monitor_tag }).first();
+      if (!existing) return;
+
+      const sourceGroupId = existing.page_monitor_group_id as number | null;
+      const sourcePosition = existing.position as number;
+
+      if (sourceGroupId === page_monitor_group_id) {
+        return;
+      }
+
+      if (sourceGroupId === null) {
+        await trx("pages_monitors")
+          .where("page_id", page_id)
+          .whereNull("page_monitor_group_id")
+          .andWhere("position", ">", sourcePosition)
+          .update({
+            position: trx.raw("?? - 1", ["position"]),
+            updated_at: trx.fn.now(),
+          });
+
+        await trx("pages_monitor_groups")
+          .where("page_id", page_id)
+          .andWhere("position", ">", sourcePosition)
+          .update({
+            position: trx.raw("?? - 1", ["position"]),
+            updated_at: trx.fn.now(),
+          });
+      } else {
+        await trx("pages_monitors")
+          .where({ page_id, page_monitor_group_id: sourceGroupId })
+          .andWhere("position", ">", sourcePosition)
+          .update({
+            position: trx.raw("?? - 1", ["position"]),
+            updated_at: trx.fn.now(),
+          });
+      }
+
+      let nextPosition = position;
+      if (page_monitor_group_id === null) {
+        if (typeof nextPosition !== "number") {
+          const maxTopLevelMonitor = await trx("pages_monitors")
+            .where("page_id", page_id)
+            .whereNull("page_monitor_group_id")
+            .max<{ max_position: number | null }>("position as max_position")
+            .first();
+          const maxGroup = await trx("pages_monitor_groups")
+            .where("page_id", page_id)
+            .max<{ max_position: number | null }>("position as max_position")
+            .first();
+
+          nextPosition = Math.max(maxTopLevelMonitor?.max_position ?? -1, maxGroup?.max_position ?? -1) + 1;
+        } else {
+          await trx("pages_monitors")
+            .where("page_id", page_id)
+            .whereNull("page_monitor_group_id")
+            .andWhere("position", ">=", nextPosition)
+            .update({
+              position: trx.raw("?? + 1", ["position"]),
+              updated_at: trx.fn.now(),
+            });
+
+          await trx("pages_monitor_groups")
+            .where("page_id", page_id)
+            .andWhere("position", ">=", nextPosition)
+            .update({
+              position: trx.raw("?? + 1", ["position"]),
+              updated_at: trx.fn.now(),
+            });
+        }
+      } else {
+        if (typeof nextPosition !== "number") {
+          const maxGroupPosition = await trx("pages_monitors")
+            .where({ page_id, page_monitor_group_id })
+            .max<{ max_position: number | null }>("position as max_position")
+            .first();
+          nextPosition = (maxGroupPosition?.max_position ?? -1) + 1;
+        } else {
+          await trx("pages_monitors")
+            .where({ page_id, page_monitor_group_id })
+            .andWhere("position", ">=", nextPosition)
+            .update({
+              position: trx.raw("?? + 1", ["position"]),
+              updated_at: trx.fn.now(),
+            });
+        }
+      }
+
+      await trx("pages_monitors")
+        .where({ page_id, monitor_tag })
+        .update({
+          page_monitor_group_id,
+          position: nextPosition,
+          updated_at: trx.fn.now(),
+        });
+    });
+  }
+
   async updatePageMonitorPositions(
     page_id: number,
     monitorPositions: { monitor_tag: string; position: number }[],
diff --git a/src/lib/server/group-day-detail.ts b/src/lib/server/group-day-detail.ts
new file mode 100644
index 000000000..e4b512e90
--- /dev/null
+++ b/src/lib/server/group-day-detail.ts
@@ -0,0 +1,128 @@
+import GC from "$lib/global-constants";
+import { UptimeCalculator } from "$lib/server/tool";
+import type {
+  IncidentForMonitorListWithComments,
+  MaintenanceEventsMonitorList,
+  MonitoringData,
+  TimestampStatusCount,
+} from "$lib/server/types/db";
+
+type GroupMinuteMonitoringData = Pick<MonitoringData, "timestamp" | "status" | "latency">;
+
+export function aggregateGroupStatus(statuses: string[]): string {
+  if (statuses.length === 0 || statuses.every((status) => status === GC.NO_DATA)) {
+    return GC.NO_DATA;
+  }
+
+  if (statuses.every((status) => status === GC.DOWN)) return GC.DOWN;
+  if (statuses.includes(GC.DOWN)) return GC.DEGRADED;
+  if (statuses.includes(GC.DEGRADED)) return GC.DEGRADED;
+  if (statuses.includes(GC.MAINTENANCE)) return GC.MAINTENANCE;
+  if (statuses.includes(GC.UP)) return GC.UP;
+
+  return GC.NO_DATA;
+}
+
+export function buildGroupDayStatusDetail(
+  monitoringDataByTag: Record<string, GroupMinuteMonitoringData[]>,
+  startOfDayTodayAtTz: number,
+  nowAtTz: number,
+): {
+  minutes: Array<{ timestamp: number; status: string }>;
+  uptime: string;
+} {
+  const minuteData: Array<{ timestamp: number; status: string }> = [];
+  const counts: TimestampStatusCount = {
+    ts: nowAtTz - 60,
+    countOfUp: 0,
+    countOfDown: 0,
+    countOfDegraded: 0,
+    countOfMaintenance: 0,
+    avgLatency: 0,
+    maxLatency: 0,
+    minLatency: 0,
+  };
+
+  const statusMapsByTag = Object.fromEntries(
+    Object.entries(monitoringDataByTag).map(([tag, rows]) => [tag, new Map(rows.map((row) => [row.timestamp, row.status || GC.NO_DATA]))]),
+  );
+  const tags = Object.keys(statusMapsByTag);
+
+  for (let timestamp = startOfDayTodayAtTz; timestamp < nowAtTz; timestamp += 60) {
+    const statuses = tags.map((tag) => statusMapsByTag[tag].get(timestamp) || GC.NO_DATA);
+    const status = aggregateGroupStatus(statuses);
+
+    minuteData.push({ timestamp, status });
+
+    if (status === GC.UP) counts.countOfUp++;
+    else if (status === GC.DOWN) counts.countOfDown++;
+    else if (status === GC.DEGRADED) counts.countOfDegraded++;
+    else if (status === GC.MAINTENANCE) counts.countOfMaintenance++;
+  }
+
+  return {
+    minutes: minuteData,
+    uptime: UptimeCalculator([counts]).uptime,
+  };
+}
+
+export function mergeGroupIncidents(
+  incidentLists: IncidentForMonitorListWithComments[][],
+): IncidentForMonitorListWithComments[] {
+  const incidentsById = new Map<number, IncidentForMonitorListWithComments>();
+
+  for (const incidents of incidentLists) {
+    for (const incident of incidents) {
+      const existing = incidentsById.get(incident.id);
+      if (!existing) {
+        incidentsById.set(incident.id, {
+          ...incident,
+          monitors: [...incident.monitors],
+          comments: [...incident.comments],
+        });
+        continue;
+      }
+
+      const monitorsByTag = new Map(existing.monitors.map((monitor) => [monitor.monitor_tag, monitor]));
+      for (const monitor of incident.monitors) {
+        monitorsByTag.set(monitor.monitor_tag, monitor);
+      }
+      existing.monitors = Array.from(monitorsByTag.values());
+
+      const commentsById = new Map(existing.comments.map((comment) => [comment.id, comment]));
+      for (const comment of incident.comments) {
+        commentsById.set(comment.id, comment);
+      }
+      existing.comments = Array.from(commentsById.values()).sort((left, right) => right.id - left.id);
+    }
+  }
+
+  return Array.from(incidentsById.values()).sort((left, right) => right.start_date_time - left.start_date_time);
+}
+
+export function mergeGroupMaintenances(
+  maintenanceLists: MaintenanceEventsMonitorList[][],
+): MaintenanceEventsMonitorList[] {
+  const maintenancesById = new Map<number, MaintenanceEventsMonitorList>();
+
+  for (const maintenances of maintenanceLists) {
+    for (const maintenance of maintenances) {
+      const existing = maintenancesById.get(maintenance.id);
+      if (!existing) {
+        maintenancesById.set(maintenance.id, {
+          ...maintenance,
+          monitors: [...maintenance.monitors],
+        });
+        continue;
+      }
+
+      const monitorsByTag = new Map(existing.monitors.map((monitor) => [monitor.monitor_tag, monitor]));
+      for (const monitor of maintenance.monitors) {
+        monitorsByTag.set(monitor.monitor_tag, monitor);
+      }
+      existing.monitors = Array.from(monitorsByTag.values());
+    }
+  }
+
+  return Array.from(maintenancesById.values()).sort((left, right) => right.start_date_time - left.start_date_time);
+}
diff --git a/src/lib/server/pagesApi.ts b/src/lib/server/pagesApi.ts
new file mode 100644
index 000000000..c443f201d
--- /dev/null
+++ b/src/lib/server/pagesApi.ts
@@ -0,0 +1,195 @@
+import db from "$lib/server/db/db";
+import {
+  GetPageMonitorStructure,
+  type PageMonitorStructureGroupInput,
+  type PageMonitorStructureMonitorInput,
+} from "$lib/server/controllers/pagesController.js";
+import type {
+  PageMonitorGroupRequest,
+  PageMonitorRequest,
+  PageResponse,
+  PageSettings,
+} from "$lib/types/api";
+import type { PageRecord } from "$lib/server/types/db";
+
+function formatDateToISO(date: Date | string): string {
+  if (date instanceof Date) {
+    return date.toISOString();
+  }
+
+  const parsed = new Date(date.replace(" ", "T") + "Z");
+  return parsed.toISOString();
+}
+
+export function getDefaultApiPageSettings(): PageSettings {
+  return {
+    incidents: {
+      enabled: true,
+      ongoing: { show: true },
+      resolved: { show: true, max_count: 5, days_in_past: 7 },
+    },
+    include_maintenances: {
+      enabled: true,
+      ongoing: {
+        show: true,
+        past: { show: true, max_count: 5, days_in_past: 7 },
+        upcoming: { show: true, max_count: 5, days_in_future: 30 },
+      },
+    },
+  };
+}
+
+export function mergeApiPageSettings(defaults: PageSettings, partial?: Partial<PageSettings>): PageSettings {
+  if (!partial) {
+    return defaults;
+  }
+
+  return {
+    incidents: {
+      enabled: partial.incidents?.enabled ?? defaults.incidents.enabled,
+      ongoing: {
+        show: partial.incidents?.ongoing?.show ?? defaults.incidents.ongoing.show,
+      },
+      resolved: {
+        show: partial.incidents?.resolved?.show ?? defaults.incidents.resolved.show,
+        max_count: partial.incidents?.resolved?.max_count ?? defaults.incidents.resolved.max_count,
+        days_in_past: partial.incidents?.resolved?.days_in_past ?? defaults.incidents.resolved.days_in_past,
+      },
+    },
+    include_maintenances: {
+      enabled: partial.include_maintenances?.enabled ?? defaults.include_maintenances.enabled,
+      ongoing: {
+        show: partial.include_maintenances?.ongoing?.show ?? defaults.include_maintenances.ongoing.show,
+        past: {
+          show: partial.include_maintenances?.ongoing?.past?.show ?? defaults.include_maintenances.ongoing.past.show,
+          max_count:
+            partial.include_maintenances?.ongoing?.past?.max_count ??
+            defaults.include_maintenances.ongoing.past.max_count,
+          days_in_past:
+            partial.include_maintenances?.ongoing?.past?.days_in_past ??
+            defaults.include_maintenances.ongoing.past.days_in_past,
+        },
+        upcoming: {
+          show:
+            partial.include_maintenances?.ongoing?.upcoming?.show ??
+            defaults.include_maintenances.ongoing.upcoming.show,
+          max_count:
+            partial.include_maintenances?.ongoing?.upcoming?.max_count ??
+            defaults.include_maintenances.ongoing.upcoming.max_count,
+          days_in_future:
+            partial.include_maintenances?.ongoing?.upcoming?.days_in_future ??
+            defaults.include_maintenances.ongoing.upcoming.days_in_future,
+        },
+      },
+    },
+  };
+}
+
+export function normalizePageMonitorRequest(
+  input: PageMonitorRequest,
+  fallbackPosition: number,
+): PageMonitorStructureMonitorInput {
+  if (typeof input === "string") {
+    return {
+      monitor_tag: input,
+      position: fallbackPosition,
+    };
+  }
+
+  if (!input || typeof input.monitor_tag !== "string" || input.monitor_tag.trim().length === 0) {
+    throw new Error("Each monitor must include a non-empty monitor_tag");
+  }
+
+  return {
+    monitor_tag: input.monitor_tag,
+    position: typeof input.position === "number" ? input.position : fallbackPosition,
+  };
+}
+
+export function normalizePageMonitorGroupRequest(
+  input: PageMonitorGroupRequest,
+  fallbackPosition: number,
+): PageMonitorStructureGroupInput {
+  if (!input || typeof input.name !== "string" || input.name.trim().length === 0) {
+    throw new Error("Each monitor group must include a non-empty name");
+  }
+
+  return {
+    id: typeof input.id === "number" ? input.id : undefined,
+    name: input.name.trim(),
+    description: typeof input.description === "string" ? input.description.trim() || null : null,
+    default_expanded: input.default_expanded ?? false,
+    adopt_child_status: input.adopt_child_status ?? false,
+    position: typeof input.position === "number" ? input.position : fallbackPosition,
+    monitors: (input.monitors || []).map((monitor, index) => normalizePageMonitorRequest(monitor, index)),
+  };
+}
+
+export async function validatePageMonitorStructureInput(data: {
+  monitors?: PageMonitorStructureMonitorInput[];
+  monitor_groups?: PageMonitorStructureGroupInput[];
+}): Promise<void> {
+  const seenMonitorTags = new Set<string>();
+  const monitorTags = [
+    ...(data.monitors || []).map((monitor) => monitor.monitor_tag),
+    ...(data.monitor_groups || []).flatMap((group) => (group.monitors || []).map((monitor) => monitor.monitor_tag)),
+  ];
+
+  for (const monitorTag of monitorTags) {
+    if (seenMonitorTags.has(monitorTag)) {
+      throw new Error(`Monitor with tag '${monitorTag}' is duplicated in the page structure`);
+    }
+
+    seenMonitorTags.add(monitorTag);
+
+    const monitor = await db.getMonitorByTag(monitorTag);
+    if (!monitor) {
+      throw new Error(`Monitor with tag '${monitorTag}' does not exist`);
+    }
+  }
+}
+
+export async function formatApiPageResponse(page: PageRecord): Promise<PageResponse> {
+  let pageSettings: PageSettings = getDefaultApiPageSettings();
+
+  if (page.page_settings_json) {
+    try {
+      const parsed = JSON.parse(page.page_settings_json);
+      pageSettings = mergeApiPageSettings(getDefaultApiPageSettings(), parsed);
+    } catch {
+      pageSettings = getDefaultApiPageSettings();
+    }
+  }
+
+  const structure = await GetPageMonitorStructure(page.id);
+
+  return {
+    id: page.id,
+    page_path: page.page_path,
+    page_title: page.page_title,
+    page_header: page.page_header,
+    page_subheader: page.page_subheader,
+    page_logo: page.page_logo,
+    page_settings: pageSettings,
+    monitors: structure.monitors.map((monitor) => ({
+      monitor_tag: monitor.monitor_tag,
+      group_id: null,
+      position: monitor.position,
+    })),
+    monitor_groups: structure.monitor_groups.map((group) => ({
+      id: group.id,
+      name: group.name,
+      description: group.description,
+      default_expanded: group.default_expanded,
+      adopt_child_status: group.adopt_child_status,
+      position: group.position,
+      monitors: group.monitors.map((monitor) => ({
+        monitor_tag: monitor.monitor_tag,
+        group_id: group.id,
+        position: monitor.position,
+      })),
+    })),
+    created_at: formatDateToISO(page.created_at),
+    updated_at: formatDateToISO(page.updated_at),
+  };
+}
diff --git a/src/lib/server/types/db.ts b/src/lib/server/types/db.ts
index f13ea9aef..918143054 100644
--- a/src/lib/server/types/db.ts
+++ b/src/lib/server/types/db.ts
@@ -486,10 +486,37 @@ export interface PageRecordTyped {
   updated_at: Date;
 }
 
+// ============ pages_monitor_groups table ============
+export interface PageMonitorGroupRecord {
+  id: number;
+  page_id: number;
+  name: string;
+  description: string | null;
+  default_expanded: boolean;
+  adopt_child_status: boolean;
+  position: number;
+  created_at: Date;
+  updated_at: Date;
+}
+
+export interface PageMonitorGroupRecordInsert {
+  page_id: number;
+  name: string;
+  description?: string | null;
+  default_expanded?: boolean;
+  adopt_child_status?: boolean;
+  position?: number;
+}
+
+export interface PageMonitorGroupRecordTyped extends PageMonitorGroupRecord {
+  monitors: PageMonitorRecordTyped[];
+}
+
 // ============ pages_monitors table ============
 export interface PageMonitorRecord {
   page_id: number;
   monitor_tag: string;
+  page_monitor_group_id: number | null;
   monitor_settings_json: string | null;
   position: number;
   created_at: Date;
@@ -499,6 +526,7 @@ export interface PageMonitorRecord {
 export interface PageMonitorRecordInsert {
   page_id: number;
   monitor_tag: string;
+  page_monitor_group_id?: number | null;
   monitor_settings_json?: string | null;
   position?: number;
 }
@@ -506,6 +534,7 @@ export interface PageMonitorRecordInsert {
 export interface PageMonitorRecordTyped {
   page_id: number;
   monitor_tag: string;
+  page_monitor_group_id: number | null;
   monitor_settings: Record<string, unknown> | null;
   position: number;
   created_at: Date;
diff --git a/src/lib/types/api.ts b/src/lib/types/api.ts
index 49c5325cc..e9f05d063 100644
--- a/src/lib/types/api.ts
+++ b/src/lib/types/api.ts
@@ -443,6 +443,30 @@ export interface PageSettings {
 
 export interface PageMonitorResponse {
   monitor_tag: string;
+  group_id: number | null;
+  position: number;
+}
+
+export interface PageMonitorGroupResponse {
+  id: number;
+  name: string;
+  description: string | null;
+  default_expanded: boolean;
+  adopt_child_status: boolean;
+  position: number;
+  monitors: PageMonitorResponse[];
+}
+
+export type PageMonitorRequest = string | { monitor_tag: string; position?: number; group_id?: number | null };
+
+export interface PageMonitorGroupRequest {
+  id?: number;
+  name: string;
+  description?: string | null;
+  default_expanded?: boolean;
+  adopt_child_status?: boolean;
+  position?: number;
+  monitors?: PageMonitorRequest[];
 }
 
 export interface PageResponse {
@@ -454,6 +478,7 @@ export interface PageResponse {
   page_logo: string | null;
   page_settings: PageSettings;
   monitors: PageMonitorResponse[];
+  monitor_groups: PageMonitorGroupResponse[];
   created_at: string;
   updated_at: string;
 }
@@ -473,7 +498,8 @@ export interface CreatePageRequest {
   page_subheader?: string | null;
   page_logo?: string | null;
   page_settings?: Partial<PageSettings>;
-  monitors?: string[];
+  monitors?: PageMonitorRequest[];
+  monitor_groups?: PageMonitorGroupRequest[];
 }
 
 export interface CreatePageResponse {
@@ -487,7 +513,8 @@ export interface UpdatePageRequest {
   page_subheader?: string | null;
   page_logo?: string | null;
   page_settings?: Partial<PageSettings>;
-  monitors?: string[];
+  monitors?: PageMonitorRequest[];
+  monitor_groups?: PageMonitorGroupRequest[];
 }
 
 export interface UpdatePageResponse {
diff --git a/src/routes/(api)/api/v4/pages/+server.ts b/src/routes/(api)/api/v4/pages/+server.ts
index a2f56b8c4..c52eddb81 100644
--- a/src/routes/(api)/api/v4/pages/+server.ts
+++ b/src/routes/(api)/api/v4/pages/+server.ts
@@ -1,120 +1,27 @@
 import { json, type RequestHandler } from "@sveltejs/kit";
 import db from "$lib/server/db/db";
+import {
+  CreatePage,
+  ReplacePageMonitorStructure,
+} from "$lib/server/controllers/pagesController.js";
+import {
+  formatApiPageResponse,
+  getDefaultApiPageSettings,
+  mergeApiPageSettings,
+  normalizePageMonitorGroupRequest,
+  normalizePageMonitorRequest,
+  validatePageMonitorStructureInput,
+} from "$lib/server/pagesApi.js";
 import type {
-  GetPagesListResponse,
-  PageResponse,
-  PageSettings,
+  BadRequestResponse,
   CreatePageRequest,
   CreatePageResponse,
-  BadRequestResponse,
+  GetPagesListResponse,
 } from "$lib/types/api";
-import type { PageRecord } from "$lib/server/types/db";
-
-function formatDateToISO(date: Date | string): string {
-  if (date instanceof Date) {
-    return date.toISOString();
-  }
-  // Handle string dates (e.g., from SQLite: "2026-01-27 16:07:19")
-  const parsed = new Date(date.replace(" ", "T") + "Z");
-  return parsed.toISOString();
-}
-
-function getDefaultPageSettings(): PageSettings {
-  return {
-    incidents: {
-      enabled: true,
-      ongoing: { show: true },
-      resolved: { show: true, max_count: 5, days_in_past: 7 },
-    },
-    include_maintenances: {
-      enabled: true,
-      ongoing: {
-        show: true,
-        past: { show: true, max_count: 5, days_in_past: 7 },
-        upcoming: { show: true, max_count: 5, days_in_future: 30 },
-      },
-    },
-  };
-}
-
-function mergePageSettings(defaults: PageSettings, partial?: Partial<PageSettings>): PageSettings {
-  if (!partial) {
-    return defaults;
-  }
-
-  return {
-    incidents: {
-      enabled: partial.incidents?.enabled ?? defaults.incidents.enabled,
-      ongoing: {
-        show: partial.incidents?.ongoing?.show ?? defaults.incidents.ongoing.show,
-      },
-      resolved: {
-        show: partial.incidents?.resolved?.show ?? defaults.incidents.resolved.show,
-        max_count: partial.incidents?.resolved?.max_count ?? defaults.incidents.resolved.max_count,
-        days_in_past: partial.incidents?.resolved?.days_in_past ?? defaults.incidents.resolved.days_in_past,
-      },
-    },
-    include_maintenances: {
-      enabled: partial.include_maintenances?.enabled ?? defaults.include_maintenances.enabled,
-      ongoing: {
-        show: partial.include_maintenances?.ongoing?.show ?? defaults.include_maintenances.ongoing.show,
-        past: {
-          show: partial.include_maintenances?.ongoing?.past?.show ?? defaults.include_maintenances.ongoing.past.show,
-          max_count:
-            partial.include_maintenances?.ongoing?.past?.max_count ??
-            defaults.include_maintenances.ongoing.past.max_count,
-          days_in_past:
-            partial.include_maintenances?.ongoing?.past?.days_in_past ??
-            defaults.include_maintenances.ongoing.past.days_in_past,
-        },
-        upcoming: {
-          show:
-            partial.include_maintenances?.ongoing?.upcoming?.show ??
-            defaults.include_maintenances.ongoing.upcoming.show,
-          max_count:
-            partial.include_maintenances?.ongoing?.upcoming?.max_count ??
-            defaults.include_maintenances.ongoing.upcoming.max_count,
-          days_in_future:
-            partial.include_maintenances?.ongoing?.upcoming?.days_in_future ??
-            defaults.include_maintenances.ongoing.upcoming.days_in_future,
-        },
-      },
-    },
-  };
-}
-
-async function formatPageResponse(page: PageRecord): Promise<PageResponse> {
-  let pageSettings: PageSettings = getDefaultPageSettings();
-
-  if (page.page_settings_json) {
-    try {
-      const parsed = JSON.parse(page.page_settings_json);
-      pageSettings = mergePageSettings(getDefaultPageSettings(), parsed);
-    } catch {
-      // Use defaults on parse error
-    }
-  }
-
-  const pageMonitors = await db.getPageMonitors(page.id);
-
-  return {
-    id: page.id,
-    page_path: page.page_path,
-    page_title: page.page_title,
-    page_header: page.page_header,
-    page_subheader: page.page_subheader,
-    page_logo: page.page_logo,
-    page_settings: pageSettings,
-    monitors: pageMonitors.map((pm) => ({ monitor_tag: pm.monitor_tag, position: pm.position })),
-    created_at: formatDateToISO(page.created_at),
-    updated_at: formatDateToISO(page.updated_at),
-  };
-}
 
 export const GET: RequestHandler = async () => {
   const rawPages = await db.getAllPages();
-
-  const pages: PageResponse[] = await Promise.all(rawPages.map(formatPageResponse));
+  const pages = await Promise.all(rawPages.map(formatApiPageResponse));
 
   const response: GetPagesListResponse = {
     pages,
@@ -138,18 +45,18 @@ export const POST: RequestHandler = async ({ request }) => {
     return json(errorResponse, { status: 400 });
   }
 
-  // Validate required fields
   if (!body.page_path || typeof body.page_path !== "string") {
-    const errorResponse: BadRequestResponse = {
-      error: {
-        code: "BAD_REQUEST",
-        message: "page_path is required and must be a string",
-      },
-    };
-    return json(errorResponse, { status: 400 });
+    return json(
+      {
+        error: {
+          code: "BAD_REQUEST",
+          message: "page_path is required and must be a string",
+        },
+      } satisfies BadRequestResponse,
+      { status: 400 },
+    );
   }
 
-  // Make page_path URL-friendly: lowercase, replace spaces with hyphens, remove special chars
   const sanitizedPagePath = body.page_path
     .toLowerCase()
     .trim()
@@ -157,82 +64,85 @@ export const POST: RequestHandler = async ({ request }) => {
     .replace(/[^a-z0-9_-]/g, "");
 
   if (!body.page_title || typeof body.page_title !== "string" || body.page_title.trim().length === 0) {
-    const errorResponse: BadRequestResponse = {
-      error: {
-        code: "BAD_REQUEST",
-        message: "page_title is required and must be a non-empty string",
-      },
-    };
-    return json(errorResponse, { status: 400 });
+    return json(
+      {
+        error: {
+          code: "BAD_REQUEST",
+          message: "page_title is required and must be a non-empty string",
+        },
+      } satisfies BadRequestResponse,
+      { status: 400 },
+    );
   }
 
   if (!body.page_header || typeof body.page_header !== "string" || body.page_header.trim().length === 0) {
-    const errorResponse: BadRequestResponse = {
-      error: {
-        code: "BAD_REQUEST",
-        message: "page_header is required and must be a non-empty string",
-      },
-    };
-    return json(errorResponse, { status: 400 });
+    return json(
+      {
+        error: {
+          code: "BAD_REQUEST",
+          message: "page_header is required and must be a non-empty string",
+        },
+      } satisfies BadRequestResponse,
+      { status: 400 },
+    );
   }
 
-  // Check if page with this path already exists
   const existingPage = await db.getPageByPath(sanitizedPagePath);
   if (existingPage) {
-    const errorResponse: BadRequestResponse = {
-      error: {
-        code: "BAD_REQUEST",
-        message: `Page with path '${sanitizedPagePath}' already exists`,
-      },
-    };
-    return json(errorResponse, { status: 400 });
+    return json(
+      {
+        error: {
+          code: "BAD_REQUEST",
+          message: `Page with path '${sanitizedPagePath}' already exists`,
+        },
+      } satisfies BadRequestResponse,
+      { status: 400 },
+    );
   }
 
-  // Validate monitors if provided
-  if (body.monitors && Array.isArray(body.monitors)) {
-    for (const monitorTag of body.monitors) {
-      const monitor = await db.getMonitorByTag(monitorTag);
-      if (!monitor) {
-        const errorResponse: BadRequestResponse = {
-          error: {
-            code: "BAD_REQUEST",
-            message: `Monitor with tag '${monitorTag}' does not exist`,
-          },
-        };
-        return json(errorResponse, { status: 400 });
-      }
-    }
+  const normalizedMonitors = (body.monitors || []).map((monitor, index) => normalizePageMonitorRequest(monitor, index));
+  const normalizedMonitorGroups = (body.monitor_groups || []).map((group, index) =>
+    normalizePageMonitorGroupRequest(group, normalizedMonitors.length + index),
+  );
+
+  try {
+    await validatePageMonitorStructureInput({
+      monitors: normalizedMonitors,
+      monitor_groups: normalizedMonitorGroups,
+    });
+  } catch (error) {
+    return json(
+      {
+        error: {
+          code: "BAD_REQUEST",
+          message: error instanceof Error ? error.message : "Invalid page monitor structure",
+        },
+      } satisfies BadRequestResponse,
+      { status: 400 },
+    );
   }
 
-  // Prepare page settings
-  const pageSettings = mergePageSettings(getDefaultPageSettings(), body.page_settings);
+  const pageSettings = mergeApiPageSettings(getDefaultApiPageSettings(), body.page_settings);
 
-  // Create the page
-  const pageData = {
+  const createdPage = await CreatePage({
     page_path: sanitizedPagePath,
     page_title: body.page_title.trim(),
     page_header: body.page_header.trim(),
     page_subheader: body.page_subheader ?? null,
     page_logo: body.page_logo ?? null,
     page_settings_json: JSON.stringify(pageSettings),
-  };
+  });
 
-  const createdPage = await db.createPage(pageData);
-
-  // Add monitors to the page
-  if (body.monitors && Array.isArray(body.monitors)) {
-    for (let i = 0; i < body.monitors.length; i++) {
-      await db.addMonitorToPage({
-        page_id: createdPage.id,
-        monitor_tag: body.monitors[i],
-        monitor_settings_json: null,
-        position: i,
-      });
-    }
+  if (normalizedMonitors.length > 0 || normalizedMonitorGroups.length > 0) {
+    await ReplacePageMonitorStructure(createdPage.id, {
+      monitors: normalizedMonitors,
+      monitor_groups: normalizedMonitorGroups,
+    });
   }
 
+  const freshPage = await db.getPageById(createdPage.id);
   const response: CreatePageResponse = {
-    page: await formatPageResponse(createdPage),
+    page: await formatApiPageResponse(freshPage || createdPage),
   };
 
   return json(response, { status: 201 });
diff --git a/src/routes/(api)/api/v4/pages/[page_path]/+server.ts b/src/routes/(api)/api/v4/pages/[page_path]/+server.ts
index 7bac48d9b..781050023 100644
--- a/src/routes/(api)/api/v4/pages/[page_path]/+server.ts
+++ b/src/routes/(api)/api/v4/pages/[page_path]/+server.ts
@@ -1,133 +1,40 @@
 import { json, type RequestHandler } from "@sveltejs/kit";
 import db from "$lib/server/db/db";
+import { UpdatePage, ReplacePageMonitorStructure } from "$lib/server/controllers/pagesController.js";
+import {
+  formatApiPageResponse,
+  getDefaultApiPageSettings,
+  mergeApiPageSettings,
+  normalizePageMonitorGroupRequest,
+  normalizePageMonitorRequest,
+  validatePageMonitorStructureInput,
+} from "$lib/server/pagesApi.js";
 import type {
+  BadRequestResponse,
+  DeletePageResponse,
   GetPageResponse,
-  PageResponse,
-  PageSettings,
+  NotFoundResponse,
   UpdatePageRequest,
   UpdatePageResponse,
-  DeletePageResponse,
-  BadRequestResponse,
-  NotFoundResponse,
 } from "$lib/types/api";
-import type { PageRecord } from "$lib/server/types/db";
-
-function formatDateToISO(date: Date | string): string {
-  if (date instanceof Date) {
-    return date.toISOString();
-  }
-  // Handle string dates (e.g., from SQLite: "2026-01-27 16:07:19")
-  const parsed = new Date(date.replace(" ", "T") + "Z");
-  return parsed.toISOString();
-}
-
-function getDefaultPageSettings(): PageSettings {
-  return {
-    incidents: {
-      enabled: true,
-      ongoing: { show: true },
-      resolved: { show: true, max_count: 5, days_in_past: 7 },
-    },
-    include_maintenances: {
-      enabled: true,
-      ongoing: {
-        show: true,
-        past: { show: true, max_count: 5, days_in_past: 7 },
-        upcoming: { show: true, max_count: 5, days_in_future: 30 },
-      },
-    },
-  };
-}
-
-function mergePageSettings(defaults: PageSettings, partial?: Partial<PageSettings>): PageSettings {
-  if (!partial) {
-    return defaults;
-  }
-
-  return {
-    incidents: {
-      enabled: partial.incidents?.enabled ?? defaults.incidents.enabled,
-      ongoing: {
-        show: partial.incidents?.ongoing?.show ?? defaults.incidents.ongoing.show,
-      },
-      resolved: {
-        show: partial.incidents?.resolved?.show ?? defaults.incidents.resolved.show,
-        max_count: partial.incidents?.resolved?.max_count ?? defaults.incidents.resolved.max_count,
-        days_in_past: partial.incidents?.resolved?.days_in_past ?? defaults.incidents.resolved.days_in_past,
-      },
-    },
-    include_maintenances: {
-      enabled: partial.include_maintenances?.enabled ?? defaults.include_maintenances.enabled,
-      ongoing: {
-        show: partial.include_maintenances?.ongoing?.show ?? defaults.include_maintenances.ongoing.show,
-        past: {
-          show: partial.include_maintenances?.ongoing?.past?.show ?? defaults.include_maintenances.ongoing.past.show,
-          max_count:
-            partial.include_maintenances?.ongoing?.past?.max_count ??
-            defaults.include_maintenances.ongoing.past.max_count,
-          days_in_past:
-            partial.include_maintenances?.ongoing?.past?.days_in_past ??
-            defaults.include_maintenances.ongoing.past.days_in_past,
-        },
-        upcoming: {
-          show:
-            partial.include_maintenances?.ongoing?.upcoming?.show ??
-            defaults.include_maintenances.ongoing.upcoming.show,
-          max_count:
-            partial.include_maintenances?.ongoing?.upcoming?.max_count ??
-            defaults.include_maintenances.ongoing.upcoming.max_count,
-          days_in_future:
-            partial.include_maintenances?.ongoing?.upcoming?.days_in_future ??
-            defaults.include_maintenances.ongoing.upcoming.days_in_future,
-        },
-      },
-    },
-  };
-}
-
-async function formatPageResponse(page: PageRecord): Promise<PageResponse> {
-  let pageSettings: PageSettings = getDefaultPageSettings();
-
-  if (page.page_settings_json) {
-    try {
-      const parsed = JSON.parse(page.page_settings_json);
-      pageSettings = mergePageSettings(getDefaultPageSettings(), parsed);
-    } catch {
-      // Use defaults on parse error
-    }
-  }
-
-  const pageMonitors = await db.getPageMonitors(page.id);
-
-  return {
-    id: page.id,
-    page_path: page.page_path,
-    page_title: page.page_title,
-    page_header: page.page_header,
-    page_subheader: page.page_subheader,
-    page_logo: page.page_logo,
-    page_settings: pageSettings,
-    monitors: pageMonitors.map((pm) => ({ monitor_tag: pm.monitor_tag, position: pm.position })),
-    created_at: formatDateToISO(page.created_at),
-    updated_at: formatDateToISO(page.updated_at),
-  };
-}
 
 export const GET: RequestHandler = async ({ locals }) => {
   const page = locals.page;
 
   if (!page) {
-    const errorResponse: NotFoundResponse = {
-      error: {
-        code: "NOT_FOUND",
-        message: "Page not found",
-      },
-    };
-    return json(errorResponse, { status: 404 });
+    return json(
+      {
+        error: {
+          code: "NOT_FOUND",
+          message: "Page not found",
+        },
+      } satisfies NotFoundResponse,
+      { status: 404 },
+    );
   }
 
   const response: GetPageResponse = {
-    page: await formatPageResponse(page),
+    page: await formatApiPageResponse(page),
   };
 
   return json(response);
@@ -137,13 +44,15 @@ export const PATCH: RequestHandler = async ({ locals, request }) => {
   const page = locals.page;
 
   if (!page) {
-    const errorResponse: NotFoundResponse = {
-      error: {
-        code: "NOT_FOUND",
-        message: "Page not found",
-      },
-    };
-    return json(errorResponse, { status: 404 });
+    return json(
+      {
+        error: {
+          code: "NOT_FOUND",
+          message: "Page not found",
+        },
+      } satisfies NotFoundResponse,
+      { status: 404 },
+    );
   }
 
   let body: UpdatePageRequest;
@@ -151,97 +60,110 @@ export const PATCH: RequestHandler = async ({ locals, request }) => {
   try {
     body = await request.json();
   } catch {
-    const errorResponse: BadRequestResponse = {
-      error: {
-        code: "BAD_REQUEST",
-        message: "Invalid JSON body",
-      },
-    };
-    return json(errorResponse, { status: 400 });
+    return json(
+      {
+        error: {
+          code: "BAD_REQUEST",
+          message: "Invalid JSON body",
+        },
+      } satisfies BadRequestResponse,
+      { status: 400 },
+    );
   }
 
-  // Validate page_path if provided
   if (body.page_path !== undefined) {
     if (typeof body.page_path !== "string") {
-      const errorResponse: BadRequestResponse = {
-        error: {
-          code: "BAD_REQUEST",
-          message: "page_path must be a string",
-        },
-      };
-      return json(errorResponse, { status: 400 });
+      return json(
+        {
+          error: {
+            code: "BAD_REQUEST",
+            message: "page_path must be a string",
+          },
+        } satisfies BadRequestResponse,
+        { status: 400 },
+      );
     }
 
-    // Make page_path URL-friendly: lowercase, replace spaces with hyphens, remove special chars
     const sanitizedPagePath = body.page_path
       .toLowerCase()
       .trim()
       .replace(/\s+/g, "-")
       .replace(/[^a-z0-9_-]/g, "");
 
-    // Check if page_path is being changed and conflicts with existing page
     if (sanitizedPagePath !== page.page_path) {
       const existingPage = await db.getPageByPath(sanitizedPagePath);
       if (existingPage) {
-        const errorResponse: BadRequestResponse = {
-          error: {
-            code: "BAD_REQUEST",
-            message: `Page with path '${sanitizedPagePath}' already exists`,
-          },
-        };
-        return json(errorResponse, { status: 400 });
+        return json(
+          {
+            error: {
+              code: "BAD_REQUEST",
+              message: `Page with path '${sanitizedPagePath}' already exists`,
+            },
+          } satisfies BadRequestResponse,
+          { status: 400 },
+        );
       }
     }
 
-    // Store sanitized path for later use
     body.page_path = sanitizedPagePath;
   }
 
-  // Validate page_title if provided
-  if (body.page_title !== undefined) {
-    if (typeof body.page_title !== "string" || body.page_title.trim().length === 0) {
-      const errorResponse: BadRequestResponse = {
+  if (body.page_title !== undefined && (typeof body.page_title !== "string" || body.page_title.trim().length === 0)) {
+    return json(
+      {
         error: {
           code: "BAD_REQUEST",
           message: "page_title must be a non-empty string",
         },
-      };
-      return json(errorResponse, { status: 400 });
-    }
+      } satisfies BadRequestResponse,
+      { status: 400 },
+    );
   }
 
-  // Validate page_header if provided
-  if (body.page_header !== undefined) {
-    if (typeof body.page_header !== "string" || body.page_header.trim().length === 0) {
-      const errorResponse: BadRequestResponse = {
+  if (
+    body.page_header !== undefined &&
+    (typeof body.page_header !== "string" || body.page_header.trim().length === 0)
+  ) {
+    return json(
+      {
         error: {
           code: "BAD_REQUEST",
           message: "page_header must be a non-empty string",
         },
-      };
-      return json(errorResponse, { status: 400 });
-    }
+      } satisfies BadRequestResponse,
+      { status: 400 },
+    );
   }
 
-  // Validate monitors if provided
-  if (body.monitors !== undefined && Array.isArray(body.monitors)) {
-    for (const monitorTag of body.monitors) {
-      const monitor = await db.getMonitorByTag(monitorTag);
-      if (!monitor) {
-        const errorResponse: BadRequestResponse = {
+  const normalizedMonitors =
+    body.monitors !== undefined ? body.monitors.map((monitor, index) => normalizePageMonitorRequest(monitor, index)) : [];
+  const normalizedMonitorGroups =
+    body.monitor_groups !== undefined
+      ? body.monitor_groups.map((group, index) =>
+          normalizePageMonitorGroupRequest(group, normalizedMonitors.length + index),
+        )
+      : [];
+
+  if (body.monitors !== undefined || body.monitor_groups !== undefined) {
+    try {
+      await validatePageMonitorStructureInput({
+        monitors: normalizedMonitors,
+        monitor_groups: normalizedMonitorGroups,
+      });
+    } catch (error) {
+      return json(
+        {
           error: {
             code: "BAD_REQUEST",
-            message: `Monitor with tag '${monitorTag}' does not exist`,
+            message: error instanceof Error ? error.message : "Invalid page monitor structure",
           },
-        };
-        return json(errorResponse, { status: 400 });
-      }
+        } satisfies BadRequestResponse,
+        { status: 400 },
+      );
     }
   }
 
-  // Build update data
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const updateData: Record<string, any> = {};
+  const updateData: Record<string, unknown> = {};
 
   if (body.page_path !== undefined) {
     updateData.page_path = body.page_path;
@@ -263,59 +185,48 @@ export const PATCH: RequestHandler = async ({ locals, request }) => {
     updateData.page_logo = body.page_logo;
   }
 
-  // Handle page_settings merge
   if (body.page_settings !== undefined) {
-    let currentSettings: PageSettings = getDefaultPageSettings();
+    let currentSettings = getDefaultApiPageSettings();
 
     if (page.page_settings_json) {
       try {
         const parsed = JSON.parse(page.page_settings_json);
-        currentSettings = mergePageSettings(getDefaultPageSettings(), parsed);
+        currentSettings = mergeApiPageSettings(getDefaultApiPageSettings(), parsed);
       } catch {
-        // Use defaults on parse error
+        currentSettings = getDefaultApiPageSettings();
       }
     }
 
-    const mergedSettings = mergePageSettings(currentSettings, body.page_settings);
+    const mergedSettings = mergeApiPageSettings(currentSettings, body.page_settings);
     updateData.page_settings_json = JSON.stringify(mergedSettings);
   }
 
-  // Update page if there are changes
   if (Object.keys(updateData).length > 0) {
-    await db.updatePage(page.id, updateData);
+    await UpdatePage(page.id, updateData);
   }
 
-  // Handle monitors update - replace all monitors
-  if (body.monitors !== undefined && Array.isArray(body.monitors)) {
-    // Delete all existing page monitors
-    await db.deletePageMonitorsByPageId(page.id);
-
-    // Add new monitors
-    for (let i = 0; i < body.monitors.length; i++) {
-      await db.addMonitorToPage({
-        page_id: page.id,
-        monitor_tag: body.monitors[i],
-        monitor_settings_json: null,
-        position: i,
-      });
-    }
+  if (body.monitors !== undefined || body.monitor_groups !== undefined) {
+    await ReplacePageMonitorStructure(page.id, {
+      monitors: normalizedMonitors,
+      monitor_groups: normalizedMonitorGroups,
+    });
   }
 
-  // Fetch updated page
   const updatedPage = await db.getPageById(page.id);
-
   if (!updatedPage) {
-    const errorResponse: NotFoundResponse = {
-      error: {
-        code: "NOT_FOUND",
-        message: "Page not found after update",
-      },
-    };
-    return json(errorResponse, { status: 404 });
+    return json(
+      {
+        error: {
+          code: "NOT_FOUND",
+          message: "Page not found after update",
+        },
+      } satisfies NotFoundResponse,
+      { status: 404 },
+    );
   }
 
   const response: UpdatePageResponse = {
-    page: await formatPageResponse(updatedPage),
+    page: await formatApiPageResponse(updatedPage),
   };
 
   return json(response);
@@ -325,19 +236,24 @@ export const DELETE: RequestHandler = async ({ locals }) => {
   const page = locals.page;
 
   if (!page) {
-    const errorResponse: NotFoundResponse = {
-      error: {
-        code: "NOT_FOUND",
-        message: "Page not found",
-      },
-    };
-    return json(errorResponse, { status: 404 });
+    return json(
+      {
+        error: {
+          code: "NOT_FOUND",
+          message: "Page not found",
+        },
+      } satisfies NotFoundResponse,
+      { status: 404 },
+    );
   }
 
-  // Delete all page monitors first
   await db.deletePageMonitorsByPageId(page.id);
 
-  // Delete the page
+  const groups = await db.getPageMonitorGroups(page.id);
+  for (const group of groups) {
+    await db.deletePageMonitorGroup(group.id);
+  }
+
   await db.deletePage(page.id);
 
   const response: DeletePageResponse = {
diff --git a/src/routes/(kener)/+page.svelte b/src/routes/(kener)/+page.svelte
index ea45b08a2..44f672b33 100644
--- a/src/routes/(kener)/+page.svelte
+++ b/src/routes/(kener)/+page.svelte
@@ -2,7 +2,7 @@
   import { browser } from "$app/environment";
   import * as Item from "$lib/components/ui/item/index.js";
   import EventsCard from "$lib/components/EventsCard.svelte";
-  import MonitorBar from "$lib/components/MonitorBar.svelte";
+  import PageMonitorTree from "$lib/components/PageMonitorTree.svelte";
   import ThemePlus from "$lib/components/ThemePlus.svelte";
   import IncidentItem from "$lib/components/IncidentItem.svelte";
   import MaintenanceItem from "$lib/components/MaintenanceItem.svelte";
@@ -30,47 +30,6 @@
   let viewType = $derived<"compact-list" | "default-list" | "default-grid" | "compact-grid" | undefined>(
     pageSettings?.monitor_layout_style
   );
-  let isCompact = $derived(viewType === "compact-list" || viewType === "compact-grid");
-
-  function getGridItemSpanClass(index: number, total: number, type: typeof viewType): string {
-    if (type === "default-grid") {
-      const mdLastRowCount = total % 2 || 2;
-      const mdLastRowStart = total - mdLastRowCount;
-      const isInMdLastRow = index >= mdLastRowStart;
-      const mdSpan = isInMdLastRow && mdLastRowCount === 1 ? "md:col-span-4" : "md:col-span-2";
-
-      const lgLastRowCount = total % 2 || 2;
-      const lgLastRowStart = total - lgLastRowCount;
-      const isInLgLastRow = index >= lgLastRowStart;
-      const lgSpan = isInLgLastRow && lgLastRowCount === 1 ? "lg:col-span-4" : "lg:col-span-2";
-
-      return `${mdSpan} ${lgSpan}`;
-    }
-
-    const smLastRowCount = total % 2 || 2;
-    const smLastRowStart = total - smLastRowCount;
-    const isInSmLastRow = index >= smLastRowStart;
-    const smSpan = isInSmLastRow && smLastRowCount === 1 ? "sm:col-span-4" : "sm:col-span-2";
-
-    const lgLastRowCount = total % 3 || 3;
-    const lgLastRowStart = total - lgLastRowCount;
-    const isInLgLastRow = index >= lgLastRowStart;
-    const lgSpan = isInLgLastRow
-      ? lgLastRowCount === 1
-        ? "lg:col-span-6"
-        : lgLastRowCount === 2
-          ? "lg:col-span-3"
-          : "lg:col-span-2"
-      : "lg:col-span-2";
-
-    return `${smSpan} ${lgSpan}`;
-  }
-
-  function getGridContainerClass(type: typeof viewType): string {
-    if (type === "compact-grid") return "bg-border gap-px sm:grid-cols-4 lg:grid-cols-6";
-    if (type === "default-grid") return "bg-border gap-px md:grid-cols-4 lg:grid-cols-4";
-    return "";
-  }
 
   $effect(() => {
     const tags = data.monitorTags || [];
@@ -198,29 +157,15 @@
         {/each}
       </div>
     {/if}
-    <div class="overflow-hidden rounded-3xl border">
-      <div class={`grid grid-cols-1 ${getGridContainerClass(viewType)}`}>
-        {#each data.monitorTags as tag, i (tag)}
-          <div
-            class="{viewType === 'compact-grid' || viewType === 'default-grid'
-              ? `${getGridItemSpanClass(i, data.monitorTags.length, viewType)} bg-background`
-              : i < data.monitorTags.length - 1
-                ? 'border-b'
-                : ''} px-2 py-2 sm:px-0"
-          >
-            <MonitorBar
-              {tag}
-              prefetchedData={monitorBarDataByTag[tag]}
-              prefetchedError={monitorBarErrorByTag[tag]}
-              days={barCount}
-              {endOfDayTodayAtTz}
-              groupChildTags={data.monitorGroupMembersByTag?.[tag] || []}
-              compact={isCompact}
-              grid={viewType === "compact-grid" || viewType === "default-grid"}
-            />
-          </div>
-        {/each}
-      </div>
-    </div>
+    <PageMonitorTree
+      items={data.pageMonitorItems}
+      prefetchedDataByTag={monitorBarDataByTag}
+      prefetchedErrorByTag={monitorBarErrorByTag}
+      groupChildTagsByTag={data.monitorGroupMembersByTag}
+      latestStatusByTag={data.latestStatusByTag}
+      days={barCount}
+      {endOfDayTodayAtTz}
+      {viewType}
+    />
   {/if}
 </div>
diff --git a/src/routes/(kener)/[page_path]/+page.svelte b/src/routes/(kener)/[page_path]/+page.svelte
index ea45b08a2..44f672b33 100644
--- a/src/routes/(kener)/[page_path]/+page.svelte
+++ b/src/routes/(kener)/[page_path]/+page.svelte
@@ -2,7 +2,7 @@
   import { browser } from "$app/environment";
   import * as Item from "$lib/components/ui/item/index.js";
   import EventsCard from "$lib/components/EventsCard.svelte";
-  import MonitorBar from "$lib/components/MonitorBar.svelte";
+  import PageMonitorTree from "$lib/components/PageMonitorTree.svelte";
   import ThemePlus from "$lib/components/ThemePlus.svelte";
   import IncidentItem from "$lib/components/IncidentItem.svelte";
   import MaintenanceItem from "$lib/components/MaintenanceItem.svelte";
@@ -30,47 +30,6 @@
   let viewType = $derived<"compact-list" | "default-list" | "default-grid" | "compact-grid" | undefined>(
     pageSettings?.monitor_layout_style
   );
-  let isCompact = $derived(viewType === "compact-list" || viewType === "compact-grid");
-
-  function getGridItemSpanClass(index: number, total: number, type: typeof viewType): string {
-    if (type === "default-grid") {
-      const mdLastRowCount = total % 2 || 2;
-      const mdLastRowStart = total - mdLastRowCount;
-      const isInMdLastRow = index >= mdLastRowStart;
-      const mdSpan = isInMdLastRow && mdLastRowCount === 1 ? "md:col-span-4" : "md:col-span-2";
-
-      const lgLastRowCount = total % 2 || 2;
-      const lgLastRowStart = total - lgLastRowCount;
-      const isInLgLastRow = index >= lgLastRowStart;
-      const lgSpan = isInLgLastRow && lgLastRowCount === 1 ? "lg:col-span-4" : "lg:col-span-2";
-
-      return `${mdSpan} ${lgSpan}`;
-    }
-
-    const smLastRowCount = total % 2 || 2;
-    const smLastRowStart = total - smLastRowCount;
-    const isInSmLastRow = index >= smLastRowStart;
-    const smSpan = isInSmLastRow && smLastRowCount === 1 ? "sm:col-span-4" : "sm:col-span-2";
-
-    const lgLastRowCount = total % 3 || 3;
-    const lgLastRowStart = total - lgLastRowCount;
-    const isInLgLastRow = index >= lgLastRowStart;
-    const lgSpan = isInLgLastRow
-      ? lgLastRowCount === 1
-        ? "lg:col-span-6"
-        : lgLastRowCount === 2
-          ? "lg:col-span-3"
-          : "lg:col-span-2"
-      : "lg:col-span-2";
-
-    return `${smSpan} ${lgSpan}`;
-  }
-
-  function getGridContainerClass(type: typeof viewType): string {
-    if (type === "compact-grid") return "bg-border gap-px sm:grid-cols-4 lg:grid-cols-6";
-    if (type === "default-grid") return "bg-border gap-px md:grid-cols-4 lg:grid-cols-4";
-    return "";
-  }
 
   $effect(() => {
     const tags = data.monitorTags || [];
@@ -198,29 +157,15 @@
         {/each}
       </div>
     {/if}
-    <div class="overflow-hidden rounded-3xl border">
-      <div class={`grid grid-cols-1 ${getGridContainerClass(viewType)}`}>
-        {#each data.monitorTags as tag, i (tag)}
-          <div
-            class="{viewType === 'compact-grid' || viewType === 'default-grid'
-              ? `${getGridItemSpanClass(i, data.monitorTags.length, viewType)} bg-background`
-              : i < data.monitorTags.length - 1
-                ? 'border-b'
-                : ''} px-2 py-2 sm:px-0"
-          >
-            <MonitorBar
-              {tag}
-              prefetchedData={monitorBarDataByTag[tag]}
-              prefetchedError={monitorBarErrorByTag[tag]}
-              days={barCount}
-              {endOfDayTodayAtTz}
-              groupChildTags={data.monitorGroupMembersByTag?.[tag] || []}
-              compact={isCompact}
-              grid={viewType === "compact-grid" || viewType === "default-grid"}
-            />
-          </div>
-        {/each}
-      </div>
-    </div>
+    <PageMonitorTree
+      items={data.pageMonitorItems}
+      prefetchedDataByTag={monitorBarDataByTag}
+      prefetchedErrorByTag={monitorBarErrorByTag}
+      groupChildTagsByTag={data.monitorGroupMembersByTag}
+      latestStatusByTag={data.latestStatusByTag}
+      days={barCount}
+      {endOfDayTodayAtTz}
+      {viewType}
+    />
   {/if}
 </div>
diff --git a/src/routes/(kener)/monitors/[monitor_tag]/+page.svelte b/src/routes/(kener)/monitors/[monitor_tag]/+page.svelte
index ef5e467f4..8fdb521ea 100644
--- a/src/routes/(kener)/monitors/[monitor_tag]/+page.svelte
+++ b/src/routes/(kener)/monitors/[monitor_tag]/+page.svelte
@@ -158,6 +158,7 @@
     monitorTag={data.monitorTag}
     maxDays={data.maxDays}
     groupTags={data.extendedTags || []}
+    groupChildTagsByTag={data.monitorGroupMembersByTag || {}}
     class="mb-4"
   />
 </div>
diff --git a/src/routes/(manage)/manage/api/+server.ts b/src/routes/(manage)/manage/api/+server.ts
index 410e2d51e..a380c4b22 100644
--- a/src/routes/(manage)/manage/api/+server.ts
+++ b/src/routes/(manage)/manage/api/+server.ts
@@ -60,9 +60,17 @@ import {
   UpdatePage,
   DeletePage,
   AddMonitorToPage,
+  CreatePageMonitorGroup,
+  DeletePageMonitorGroup,
+  GetPageMonitorStructure,
   RemoveMonitorFromPage,
+  MovePageMonitorToGroup,
+  ReorderPageGroupMonitors,
   GetPageMonitors,
+  ReorderPageTopLevelItems,
   ReorderPageMonitors,
+  UpdatePageMonitorGroup,
+  ReplacePageMonitorStructure,
 } from "$lib/server/controllers/pagesController.js";
 import {
   CreateMaintenance,
@@ -387,11 +395,14 @@ export async function POST({ request, cookies }) {
       resp = await db.deleteImage(data.id);
     } else if (action == "getPages") {
       const pages = await GetAllPages();
-      // Fetch monitors for each page
       const pagesWithMonitors = await Promise.all(
         pages.map(async (page) => {
-          const monitors = await GetPageMonitors(page.id);
-          return { ...page, monitors };
+          const structure = await GetPageMonitorStructure(page.id);
+          return {
+            ...page,
+            monitors: structure.monitors,
+            monitor_groups: structure.monitor_groups,
+          };
         }),
       );
       resp = pagesWithMonitors;
@@ -406,12 +417,44 @@ export async function POST({ request, cookies }) {
     } else if (action == "addMonitorToPage") {
       await AddMonitorToPage(data.page_id, data.monitor_tag);
       resp = { success: true };
+    } else if (action == "createPageMonitorGroup") {
+      resp = await CreatePageMonitorGroup(
+        data.page_id,
+        data.name,
+        data.default_expanded ?? false,
+        data.adopt_child_status ?? false,
+        data.description ?? null,
+      );
+    } else if (action == "updatePageMonitorGroup") {
+      resp = await UpdatePageMonitorGroup(data.page_id, data.group_id, {
+        name: data.name,
+        description: data.description,
+        default_expanded: data.default_expanded,
+        adopt_child_status: data.adopt_child_status,
+      });
+    } else if (action == "deletePageMonitorGroup") {
+      await DeletePageMonitorGroup(data.page_id, data.group_id);
+      resp = { success: true };
     } else if (action == "removeMonitorFromPage") {
       await RemoveMonitorFromPage(data.page_id, data.monitor_tag);
       resp = { success: true };
+    } else if (action == "movePageMonitorToGroup") {
+      await MovePageMonitorToGroup(data.page_id, data.monitor_tag, data.group_id ?? null, data.position);
+      resp = { success: true };
+    } else if (action == "reorderPageTopLevelItems") {
+      await ReorderPageTopLevelItems(data.page_id, data.items);
+      resp = { success: true };
+    } else if (action == "reorderPageGroupMonitors") {
+      await ReorderPageGroupMonitors(data.page_id, data.group_id, data.monitor_tags);
+      resp = { success: true };
     } else if (action == "reorderPageMonitors") {
       await ReorderPageMonitors(data.page_id, data.monitor_tags);
       resp = { success: true };
+    } else if (action == "replacePageMonitorStructure") {
+      resp = await ReplacePageMonitorStructure(data.page_id, {
+        monitors: data.monitors,
+        monitor_groups: data.monitor_groups,
+      });
     }
     // ============ Maintenance Actions ============
     else if (action == "getMaintenances") {
diff --git a/src/routes/(manage)/manage/app/monitors/[tag]/+page.svelte b/src/routes/(manage)/manage/app/monitors/[tag]/+page.svelte
index 10ccac1c2..43c8701b6 100644
--- a/src/routes/(manage)/manage/app/monitors/[tag]/+page.svelte
+++ b/src/routes/(manage)/manage/app/monitors/[tag]/+page.svelte
@@ -58,6 +58,7 @@
     page_path: string;
     page_title: string;
     monitors?: { monitor_tag: string }[];
+    monitor_groups?: Array<{ id: number; monitors: Array<{ monitor_tag: string }> }>;
   }
   let allPages = $state<PageWithMonitors[]>([]);
 
@@ -82,7 +83,13 @@
   let typeData = $state<Record<string, unknown>>({});
 
   // Get pages this monitor is on
-  const monitorPages = $derived(allPages.filter((p) => p.monitors?.some((m) => m.monitor_tag === monitor.tag)));
+  const monitorPages = $derived(
+    allPages.filter(
+      (p) =>
+        p.monitors?.some((m) => m.monitor_tag === monitor.tag) ||
+        p.monitor_groups?.some((group) => group.monitors.some((m) => m.monitor_tag === monitor.tag)),
+    ),
+  );
 
   async function fetchMonitor() {
     if (isNew) {
diff --git a/src/routes/(manage)/manage/app/monitors/[tag]/components/PageVisibilityCard.svelte b/src/routes/(manage)/manage/app/monitors/[tag]/components/PageVisibilityCard.svelte
index 4fa2c4f9d..d5398e8e5 100644
--- a/src/routes/(manage)/manage/app/monitors/[tag]/components/PageVisibilityCard.svelte
+++ b/src/routes/(manage)/manage/app/monitors/[tag]/components/PageVisibilityCard.svelte
@@ -12,6 +12,7 @@
     page_path: string;
     page_title: string;
     monitors?: { monitor_tag: string }[];
+    monitor_groups?: Array<{ id: number; monitors: Array<{ monitor_tag: string }> }>;
   }
 
   interface Props {
@@ -27,7 +28,11 @@
   // Check if monitor is on a specific page
   function isMonitorOnPage(pageId: number): boolean {
     const page = allPages.find((p) => p.id === pageId);
-    return page?.monitors?.some((m) => m.monitor_tag === monitorTag) ?? false;
+    return (
+      page?.monitors?.some((m) => m.monitor_tag === monitorTag) ||
+      page?.monitor_groups?.some((group) => group.monitors.some((monitor) => monitor.monitor_tag === monitorTag)) ||
+      false
+    );
   }
 
   // Toggle monitor on a page
diff --git a/src/routes/(manage)/manage/app/pages/+page.svelte b/src/routes/(manage)/manage/app/pages/+page.svelte
index bc264e6a8..60a2a07e7 100644
--- a/src/routes/(manage)/manage/app/pages/+page.svelte
+++ b/src/routes/(manage)/manage/app/pages/+page.svelte
@@ -14,7 +14,8 @@
   import clientResolver from "$lib/client/resolver.js";
 
   interface PageWithMonitors extends PageRecord {
-    monitors?: { monitor_tag: string }[];
+    monitors?: Array<{ monitor_tag: string }>;
+    monitor_groups?: Array<{ id: number; monitors: Array<{ monitor_tag: string }> }>;
   }
 
   let pages = $state<PageWithMonitors[]>([]);
@@ -46,6 +47,10 @@
   onMount(() => {
     fetchPages();
   });
+
+  function getMonitorCount(page: PageWithMonitors): number {
+    return (page.monitors?.length || 0) + (page.monitor_groups || []).reduce((sum, group) => sum + group.monitors.length, 0);
+  }
 </script>
 
 <div class="flex w-full flex-col gap-4 p-4">
@@ -116,8 +121,9 @@
                 </Button>
               </Table.Cell>
               <Table.Cell>
-                {#if page.monitors && page.monitors.length > 0}
-                  <Badge variant="secondary">{page.monitors.length} monitor{page.monitors.length > 1 ? "s" : ""}</Badge>
+                {@const monitorCount = getMonitorCount(page)}
+                {#if monitorCount > 0}
+                  <Badge variant="secondary">{monitorCount} monitor{monitorCount > 1 ? "s" : ""}</Badge>
                 {:else}
                   <Badge variant="outline" class="text-muted-foreground">No monitors</Badge>
                 {/if}
diff --git a/src/routes/(manage)/manage/app/pages/[page_id]/+page.svelte b/src/routes/(manage)/manage/app/pages/[page_id]/+page.svelte
index 4a249a891..045f8d6ef 100644
--- a/src/routes/(manage)/manage/app/pages/[page_id]/+page.svelte
+++ b/src/routes/(manage)/manage/app/pages/[page_id]/+page.svelte
@@ -13,10 +13,7 @@
   import { toast } from "svelte-sonner";
   import Loader from "@lucide/svelte/icons/loader";
   import SaveIcon from "@lucide/svelte/icons/save";
-  import PlusIcon from "@lucide/svelte/icons/plus";
   import XIcon from "@lucide/svelte/icons/x";
-  import ArrowUpIcon from "@lucide/svelte/icons/arrow-up";
-  import ArrowDownIcon from "@lucide/svelte/icons/arrow-down";
   import UploadIcon from "@lucide/svelte/icons/upload";
   import ImageIcon from "@lucide/svelte/icons/image";
   import TrashIcon from "@lucide/svelte/icons/trash";
@@ -29,6 +26,7 @@
   import { resolve } from "$app/paths";
   import clientResolver from "$lib/client/resolver.js";
   import GC from "$lib/global-constants.js";
+  import PageMonitorsEditor from "./components/PageMonitorsEditor.svelte";
 
   // Default page settings
   const defaultPageSettings: PageSettingsType = {
@@ -40,7 +38,16 @@
   };
 
   interface PageWithMonitors extends PageRecord {
-    monitors?: { monitor_tag: string }[];
+    monitors?: Array<{ monitor_tag: string; position: number; page_monitor_group_id: number | null }>;
+    monitor_groups?: Array<{
+      id: number;
+      name: string;
+      description: string | null;
+      default_expanded: boolean;
+      adopt_child_status: boolean;
+      position: number;
+      monitors: Array<{ monitor_tag: string; position: number }>;
+    }>;
   }
 
   // Get page ID from URL params
@@ -50,7 +57,6 @@
   // State
   let loading = $state(true);
   let saving = $state(false);
-  let savingMonitors = $state(false);
   let uploadingLogo = $state(false);
   let uploadingSocialPreview = $state(false);
 
@@ -67,13 +73,6 @@
     page_logo: ""
   });
 
-  // Monitor selection
-  let selectedMonitorTag = $state("");
-  let selectedMonitors = $state<string[]>([]);
-  let addingMonitor = $state(false);
-  let removingMonitor = $state<string | null>(null);
-  let reordering = $state(false);
-
   // Delete state
   let deleteConfirmText = $state("");
   let deleting = $state(false);
@@ -122,7 +121,6 @@
           page_subheader: foundPage.page_subheader || "",
           page_logo: foundPage.page_logo || ""
         };
-        selectedMonitors = foundPage.monitors?.map((m: { monitor_tag: string }) => m.monitor_tag) || [];
         // Load page settings with defaults
         if (foundPage.page_settings_json) {
           try {
@@ -215,38 +213,6 @@
     }
   }
 
-  async function addMonitorToPage() {
-    if (!currentPage || !selectedMonitorTag) return;
-
-    addingMonitor = true;
-    try {
-      const response = await fetch(clientResolver(resolve, "/manage/api"), {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          action: "addMonitorToPage",
-          data: {
-            page_id: currentPage.id,
-            monitor_tag: selectedMonitorTag
-          }
-        })
-      });
-
-      const result = await response.json();
-      if (result.error) {
-        toast.error(result.error);
-      } else {
-        toast.success("Monitor added to page");
-        selectedMonitors = [...selectedMonitors, selectedMonitorTag];
-        selectedMonitorTag = "";
-      }
-    } catch (e) {
-      toast.error("Failed to add monitor");
-    } finally {
-      addingMonitor = false;
-    }
-  }
-
   async function deletePage() {
     if (!currentPage || !canDelete) return;
 
@@ -275,73 +241,6 @@
     }
   }
 
-  async function removeMonitorFromPage(monitorTag: string) {
-    if (!currentPage) return;
-
-    removingMonitor = monitorTag;
-    try {
-      const response = await fetch(clientResolver(resolve, "/manage/api"), {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          action: "removeMonitorFromPage",
-          data: {
-            page_id: currentPage.id,
-            monitor_tag: monitorTag
-          }
-        })
-      });
-
-      const result = await response.json();
-      if (result.error) {
-        toast.error(result.error);
-      } else {
-        toast.success("Monitor removed from page");
-        selectedMonitors = selectedMonitors.filter((t) => t !== monitorTag);
-      }
-    } catch (e) {
-      toast.error("Failed to remove monitor");
-    } finally {
-      removingMonitor = null;
-    }
-  }
-
-  // Get available monitors (not already on the current page)
-  const availableMonitors = $derived(monitors.filter((m) => !selectedMonitors.includes(m.tag)));
-
-  async function moveMonitor(index: number, direction: "up" | "down") {
-    const newIndex = direction === "up" ? index - 1 : index + 1;
-    if (newIndex < 0 || newIndex >= selectedMonitors.length) return;
-
-    const updated = [...selectedMonitors];
-    [updated[index], updated[newIndex]] = [updated[newIndex], updated[index]];
-    selectedMonitors = updated;
-
-    if (!currentPage) return;
-    reordering = true;
-    try {
-      const response = await fetch(clientResolver(resolve, "/manage/api"), {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          action: "reorderPageMonitors",
-          data: {
-            page_id: currentPage.id,
-            monitor_tags: selectedMonitors
-          }
-        })
-      });
-      const result = await response.json();
-      if (result.error) {
-        toast.error(result.error);
-      }
-    } catch (e) {
-      toast.error("Failed to reorder monitors");
-    } finally {
-      reordering = false;
-    }
-  }
-
   // Image upload functions
   async function handleLogoUpload(event: Event): Promise<void> {
     const input = event.target as HTMLInputElement;
@@ -677,94 +576,12 @@
 
     <!-- Monitors Card (only shown for existing pages) -->
     {#if !isNew && currentPage}
-      <Card.Root>
-        <Card.Header>
-          <Card.Title>Page Monitors</Card.Title>
-          <Card.Description>Select which monitors to display on this page</Card.Description>
-        </Card.Header>
-        <Card.Content class="space-y-4">
-          <!-- Add Monitor -->
-          <div class="flex gap-2">
-            <Select.Root type="single" bind:value={selectedMonitorTag}>
-              <Select.Trigger class="flex-1">
-                {#if selectedMonitorTag}
-                  {monitors.find((m) => m.tag === selectedMonitorTag)?.name || selectedMonitorTag}
-                {:else}
-                  Select a monitor to add
-                {/if}
-              </Select.Trigger>
-              <Select.Content>
-                {#each availableMonitors as monitor (monitor.tag)}
-                  <Select.Item value={monitor.tag}>{monitor.name} ({monitor.tag})</Select.Item>
-                {/each}
-                {#if availableMonitors.length === 0}
-                  <div class="text-muted-foreground px-2 py-1 text-sm">No available monitors</div>
-                {/if}
-              </Select.Content>
-            </Select.Root>
-            <Button onclick={addMonitorToPage} disabled={addingMonitor || !selectedMonitorTag}>
-              {#if addingMonitor}
-                <Loader class="h-4 w-4 animate-spin" />
-              {:else}
-                <PlusIcon class="h-4 w-4" />
-                Add
-              {/if}
-            </Button>
-          </div>
-
-          <!-- Current Monitors -->
-          <div class="space-y-2">
-            <Label>Current Monitors</Label>
-            {#if selectedMonitors.length > 0}
-              <div class="space-y-2">
-                {#each selectedMonitors as monitorTag, i (monitorTag)}
-                  {@const monitor = monitors.find((m) => m.tag === monitorTag)}
-                  <div class="bg-muted flex items-center justify-between rounded-lg p-3">
-                    <div>
-                      <p class="font-medium">{monitor?.name || monitorTag}</p>
-                      <p class="text-muted-foreground text-xs">{monitorTag}</p>
-                    </div>
-                    <div class="flex items-center gap-1">
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        onclick={() => moveMonitor(i, "up")}
-                        disabled={i === 0 || reordering}
-                      >
-                        <ArrowUpIcon class="h-4 w-4" />
-                      </Button>
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        onclick={() => moveMonitor(i, "down")}
-                        disabled={i === selectedMonitors.length - 1 || reordering}
-                      >
-                        <ArrowDownIcon class="h-4 w-4" />
-                      </Button>
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        onclick={() => removeMonitorFromPage(monitorTag)}
-                        disabled={removingMonitor === monitorTag}
-                      >
-                        {#if removingMonitor === monitorTag}
-                          <Loader class="h-4 w-4 animate-spin" />
-                        {:else}
-                          <XIcon class="h-4 w-4" />
-                        {/if}
-                      </Button>
-                    </div>
-                  </div>
-                {/each}
-              </div>
-            {:else}
-              <div class="text-muted-foreground bg-muted rounded-lg p-4 text-center text-sm">
-                No monitors added to this page yet
-              </div>
-            {/if}
-          </div>
-        </Card.Content>
-      </Card.Root>
+      <PageMonitorsEditor
+        pageId={currentPage.id}
+        {monitors}
+        initialMonitors={currentPage.monitors || []}
+        initialMonitorGroups={currentPage.monitor_groups || []}
+      />
 
       <!-- Page Settings Card -->
       <Card.Root>
diff --git a/src/routes/(manage)/manage/app/pages/[page_id]/components/PageMonitorsEditor.svelte b/src/routes/(manage)/manage/app/pages/[page_id]/components/PageMonitorsEditor.svelte
new file mode 100644
index 000000000..d214acda3
--- /dev/null
+++ b/src/routes/(manage)/manage/app/pages/[page_id]/components/PageMonitorsEditor.svelte
@@ -0,0 +1,674 @@
+<script lang="ts">
+  import * as Card from "$lib/components/ui/card/index.js";
+  import * as Dialog from "$lib/components/ui/dialog/index.js";
+  import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
+  import * as Select from "$lib/components/ui/select/index.js";
+  import { Button } from "$lib/components/ui/button/index.js";
+  import { Input } from "$lib/components/ui/input/index.js";
+  import { Label } from "$lib/components/ui/label/index.js";
+  import { Switch } from "$lib/components/ui/switch/index.js";
+  import { Textarea } from "$lib/components/ui/textarea/index.js";
+  import { toast } from "svelte-sonner";
+  import Loader from "@lucide/svelte/icons/loader";
+  import PlusIcon from "@lucide/svelte/icons/plus";
+  import XIcon from "@lucide/svelte/icons/x";
+  import ArrowUpIcon from "@lucide/svelte/icons/arrow-up";
+  import ArrowDownIcon from "@lucide/svelte/icons/arrow-down";
+  import SettingsIcon from "@lucide/svelte/icons/settings";
+  import ArrowRightLeftIcon from "@lucide/svelte/icons/arrow-right-left";
+  import type { MonitorRecord } from "$lib/server/types/db.js";
+  import { resolve } from "$app/paths";
+  import clientResolver from "$lib/client/resolver.js";
+
+  interface PageMonitorRow {
+    monitor_tag: string;
+    position: number;
+    page_monitor_group_id: number | null;
+  }
+
+  interface PageMonitorGroupRow {
+    id: number;
+    name: string;
+    description?: string | null;
+    default_expanded: boolean;
+    adopt_child_status: boolean;
+    position: number;
+    monitors: Array<{ monitor_tag: string; position: number }>;
+  }
+
+  type TopLevelItem = { kind: "monitor"; monitor_tag: string } | { kind: "group"; id: number };
+  type GroupPayload = {
+    id: number | undefined;
+    name: string;
+    description?: string | null;
+    default_expanded: boolean;
+    adopt_child_status: boolean;
+    position: number;
+    monitors: Array<{ monitor_tag: string; position: number }>;
+  };
+
+  interface Props {
+    pageId: number;
+    monitors: MonitorRecord[];
+    initialMonitors?: PageMonitorRow[];
+    initialMonitorGroups?: PageMonitorGroupRow[];
+  }
+
+  let { pageId, monitors, initialMonitors = [], initialMonitorGroups = [] }: Props = $props();
+
+  let topLevelOrder = $state<TopLevelItem[]>([]);
+  let pageMonitorGroups = $state<PageMonitorGroupRow[]>([]);
+  let selectedMonitorTag = $state("");
+  let savingStructure = $state(false);
+  let groupDialogOpen = $state(false);
+  let editingGroupId = $state<number | null>(null);
+  let groupForm = $state({
+    name: "",
+    description: "",
+    default_expanded: false,
+    adopt_child_status: false,
+  });
+  let nextTempGroupId = -1;
+  let initializedPageId = $state<number | null>(null);
+
+  function applyInitialStructure(monitorsInput: PageMonitorRow[], groupsInput: PageMonitorGroupRow[]) {
+    pageMonitorGroups = groupsInput.map((group) => ({
+      ...group,
+      monitors: [...group.monitors].sort((a, b) => a.position - b.position),
+    }));
+
+    const topLevelMonitors = monitorsInput
+      .filter((monitor) => monitor.page_monitor_group_id === null)
+      .sort((a, b) => a.position - b.position)
+      .map<TopLevelItem>((monitor) => ({
+        kind: "monitor",
+        monitor_tag: monitor.monitor_tag,
+      }));
+
+    const topLevelGroups = pageMonitorGroups
+      .sort((a, b) => a.position - b.position)
+      .map<TopLevelItem>((group) => ({
+        kind: "group",
+        id: group.id,
+      }));
+
+    topLevelOrder = [...topLevelMonitors, ...topLevelGroups].sort((a, b) => {
+      const aPosition =
+        a.kind === "monitor"
+          ? monitorsInput.find((monitor) => monitor.monitor_tag === a.monitor_tag)?.position ?? 0
+          : pageMonitorGroups.find((group) => group.id === a.id)?.position ?? 0;
+      const bPosition =
+        b.kind === "monitor"
+          ? monitorsInput.find((monitor) => monitor.monitor_tag === b.monitor_tag)?.position ?? 0
+          : pageMonitorGroups.find((group) => group.id === b.id)?.position ?? 0;
+      return aPosition - bPosition;
+    });
+
+    const minGroupId = pageMonitorGroups.reduce((minValue, group) => Math.min(minValue, group.id), 0);
+    nextTempGroupId = Math.min(-1, minGroupId - 1);
+  }
+
+  $effect(() => {
+    if (pageId !== initializedPageId) {
+      applyInitialStructure(initialMonitors, initialMonitorGroups);
+      initializedPageId = pageId;
+    }
+  });
+
+  let assignedMonitorTags = $derived.by(() => {
+    const tags = new Set<string>();
+    for (const item of topLevelOrder) {
+      if (item.kind === "monitor") {
+        tags.add(item.monitor_tag);
+      }
+    }
+
+    for (const group of pageMonitorGroups) {
+      for (const monitor of group.monitors) {
+        tags.add(monitor.monitor_tag);
+      }
+    }
+
+    return tags;
+  });
+
+  let availableMonitors = $derived(monitors.filter((monitor) => !assignedMonitorTags.has(monitor.tag)));
+
+  function getMonitorName(monitorTag: string): string {
+    return monitors.find((monitor) => monitor.tag === monitorTag)?.name || monitorTag;
+  }
+
+  function getGroupById(groupId: number): PageMonitorGroupRow | undefined {
+    return pageMonitorGroups.find((group) => group.id === groupId);
+  }
+
+  function buildStructurePayload(order: TopLevelItem[], groups: PageMonitorGroupRow[]) {
+    const monitorsPayload = order
+      .map((item, index) =>
+        item.kind === "monitor"
+          ? {
+              monitor_tag: item.monitor_tag,
+              position: index,
+            }
+          : null,
+      )
+      .filter((item): item is { monitor_tag: string; position: number } => item !== null);
+
+    const groupsPayload = order
+      .map((item, index) => {
+        if (item.kind !== "group") return null;
+        const group = groups.find((candidate) => candidate.id === item.id);
+        if (!group) return null;
+
+        const payload: GroupPayload = {
+          id: group.id > 0 ? group.id : undefined,
+          name: group.name,
+          description: group.description || null,
+          default_expanded: group.default_expanded,
+          adopt_child_status: group.adopt_child_status,
+          position: index,
+          monitors: group.monitors.map((monitor, monitorIndex) => ({
+            monitor_tag: monitor.monitor_tag,
+            position: monitorIndex,
+          })),
+        };
+
+        return payload;
+      })
+      .filter((item): item is GroupPayload => item !== null);
+
+    return {
+      monitors: monitorsPayload,
+      monitor_groups: groupsPayload,
+    };
+  }
+
+  async function persistStructure(nextOrder: TopLevelItem[], nextGroups: PageMonitorGroupRow[]) {
+    savingStructure = true;
+    try {
+      const response = await fetch(clientResolver(resolve, "/manage/api"), {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          action: "replacePageMonitorStructure",
+          data: {
+            page_id: pageId,
+            ...buildStructurePayload(nextOrder, nextGroups),
+          },
+        }),
+      });
+
+      const result = await response.json();
+      if (result.error) {
+        toast.error(result.error);
+        return false;
+      }
+
+      applyInitialStructure(result.monitors || [], result.monitor_groups || []);
+      return true;
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Failed to save page monitor structure");
+      return false;
+    } finally {
+      savingStructure = false;
+    }
+  }
+
+  async function addMonitorToPage() {
+    if (!selectedMonitorTag) return;
+
+    const nextOrder = [...topLevelOrder, { kind: "monitor" as const, monitor_tag: selectedMonitorTag }];
+    const success = await persistStructure(nextOrder, pageMonitorGroups);
+    if (success) {
+      selectedMonitorTag = "";
+    }
+  }
+
+  function openCreateGroupDialog() {
+    editingGroupId = null;
+    groupForm = {
+      name: "",
+      description: "",
+      default_expanded: false,
+      adopt_child_status: false,
+    };
+    groupDialogOpen = true;
+  }
+
+  function openEditGroupDialog(groupId: number) {
+    const group = getGroupById(groupId);
+    if (!group) return;
+
+    editingGroupId = groupId;
+    groupForm = {
+      name: group.name,
+      description: group.description || "",
+      default_expanded: group.default_expanded,
+      adopt_child_status: group.adopt_child_status,
+    };
+    groupDialogOpen = true;
+  }
+
+  async function saveGroupDialog() {
+    const groupName = groupForm.name.trim();
+    const groupDescription = groupForm.description.trim() || null;
+    if (!groupName) {
+      toast.error("Group name is required");
+      return;
+    }
+
+    let nextOrder = [...topLevelOrder];
+    let nextGroups = pageMonitorGroups.map((group) => ({
+      ...group,
+      monitors: [...group.monitors],
+    }));
+
+    if (editingGroupId === null) {
+      const tempId = nextTempGroupId--;
+      nextGroups = [
+        ...nextGroups,
+        {
+          id: tempId,
+          name: groupName,
+          description: groupDescription,
+          default_expanded: groupForm.default_expanded,
+          adopt_child_status: groupForm.adopt_child_status,
+          position: nextOrder.length,
+          monitors: [],
+        },
+      ];
+      nextOrder = [...nextOrder, { kind: "group", id: tempId }];
+    } else {
+      nextGroups = nextGroups.map((group) =>
+        group.id === editingGroupId
+          ? {
+              ...group,
+              name: groupName,
+              description: groupDescription,
+              default_expanded: groupForm.default_expanded,
+              adopt_child_status: groupForm.adopt_child_status,
+            }
+          : group,
+      );
+    }
+
+    const success = await persistStructure(nextOrder, nextGroups);
+    if (success) {
+      groupDialogOpen = false;
+    }
+  }
+
+  async function moveTopLevelItem(index: number, direction: "up" | "down") {
+    const newIndex = direction === "up" ? index - 1 : index + 1;
+    if (newIndex < 0 || newIndex >= topLevelOrder.length) return;
+
+    const nextOrder = [...topLevelOrder];
+    [nextOrder[index], nextOrder[newIndex]] = [nextOrder[newIndex], nextOrder[index]];
+    await persistStructure(nextOrder, pageMonitorGroups);
+  }
+
+  async function moveGroupMonitor(groupId: number, index: number, direction: "up" | "down") {
+    const group = getGroupById(groupId);
+    if (!group) return;
+
+    const newIndex = direction === "up" ? index - 1 : index + 1;
+    if (newIndex < 0 || newIndex >= group.monitors.length) return;
+
+    const nextGroups = pageMonitorGroups.map((candidate) => {
+      if (candidate.id !== groupId) return { ...candidate, monitors: [...candidate.monitors] };
+
+      const nextMonitors = [...candidate.monitors];
+      [nextMonitors[index], nextMonitors[newIndex]] = [nextMonitors[newIndex], nextMonitors[index]];
+      return {
+        ...candidate,
+        monitors: nextMonitors,
+      };
+    });
+
+    await persistStructure(topLevelOrder, nextGroups);
+  }
+
+  async function removeMonitorFromPage(monitorTag: string, groupId: number | null) {
+    const nextOrder =
+      groupId === null ? topLevelOrder.filter((item) => !(item.kind === "monitor" && item.monitor_tag === monitorTag)) : [...topLevelOrder];
+    const nextGroups =
+      groupId === null
+        ? pageMonitorGroups.map((group) => ({ ...group, monitors: [...group.monitors] }))
+        : pageMonitorGroups.map((group) =>
+            group.id === groupId
+              ? {
+                  ...group,
+                  monitors: group.monitors.filter((monitor) => monitor.monitor_tag !== monitorTag),
+                }
+              : { ...group, monitors: [...group.monitors] },
+          );
+
+    await persistStructure(nextOrder, nextGroups);
+  }
+
+  async function deleteGroup(groupId: number) {
+    const groupIndex = topLevelOrder.findIndex((item) => item.kind === "group" && item.id === groupId);
+    const group = getGroupById(groupId);
+    if (groupIndex < 0 || !group) return;
+
+    const promotedChildren = group.monitors.map<TopLevelItem>((monitor) => ({
+      kind: "monitor",
+      monitor_tag: monitor.monitor_tag,
+    }));
+
+    const nextOrder = [
+      ...topLevelOrder.slice(0, groupIndex),
+      ...promotedChildren,
+      ...topLevelOrder.slice(groupIndex + 1),
+    ];
+    const nextGroups = pageMonitorGroups
+      .filter((candidate) => candidate.id !== groupId)
+      .map((candidate) => ({ ...candidate, monitors: [...candidate.monitors] }));
+
+    await persistStructure(nextOrder, nextGroups);
+  }
+
+  async function moveMonitorToDestination(
+    monitorTag: string,
+    sourceGroupId: number | null,
+    destinationGroupId: number | null,
+  ) {
+    if (sourceGroupId === destinationGroupId) return;
+
+    const nextOrder = topLevelOrder.filter(
+      (item) => !(sourceGroupId === null && item.kind === "monitor" && item.monitor_tag === monitorTag),
+    );
+    let nextGroups = pageMonitorGroups.map((group) => ({
+      ...group,
+      monitors:
+        group.id === sourceGroupId
+          ? group.monitors.filter((monitor) => monitor.monitor_tag !== monitorTag)
+          : [...group.monitors],
+    }));
+
+    if (destinationGroupId === null) {
+      nextOrder.push({ kind: "monitor", monitor_tag: monitorTag });
+    } else {
+      nextGroups = nextGroups.map((group) =>
+        group.id === destinationGroupId
+          ? {
+              ...group,
+              monitors: [...group.monitors, { monitor_tag: monitorTag, position: group.monitors.length }],
+            }
+          : group,
+      );
+    }
+
+    await persistStructure(nextOrder, nextGroups);
+  }
+</script>
+
+<Card.Root>
+  <Card.Header>
+    <Card.Title>Page Monitors</Card.Title>
+    <Card.Description>Select which monitors and groups to display on this page</Card.Description>
+  </Card.Header>
+  <Card.Content class="space-y-4">
+    <div class="flex flex-wrap gap-2">
+      <Select.Root type="single" bind:value={selectedMonitorTag}>
+        <Select.Trigger class="min-w-[18rem] flex-1">
+          {#if selectedMonitorTag}
+            {getMonitorName(selectedMonitorTag)} ({selectedMonitorTag})
+          {:else}
+            Select a monitor to add
+          {/if}
+        </Select.Trigger>
+        <Select.Content>
+          {#each availableMonitors as monitor (monitor.tag)}
+            <Select.Item value={monitor.tag}>{monitor.name} ({monitor.tag})</Select.Item>
+          {/each}
+          {#if availableMonitors.length === 0}
+            <div class="text-muted-foreground px-2 py-1 text-sm">No available monitors</div>
+          {/if}
+        </Select.Content>
+      </Select.Root>
+      <Button onclick={addMonitorToPage} disabled={savingStructure || !selectedMonitorTag}>
+        {#if savingStructure}
+          <Loader class="h-4 w-4 animate-spin" />
+        {:else}
+          <PlusIcon class="h-4 w-4" />
+          Add Monitor
+        {/if}
+      </Button>
+      <Button variant="outline" onclick={openCreateGroupDialog} disabled={savingStructure}>
+        <PlusIcon class="h-4 w-4" />
+        Add Group
+      </Button>
+    </div>
+
+    <div class="space-y-2">
+      <Label>Current Page Structure</Label>
+      {#if topLevelOrder.length > 0}
+        <div class="space-y-2">
+          {#each topLevelOrder as item, index (`${item.kind}-${item.kind === 'monitor' ? item.monitor_tag : item.id}`)}
+            {#if item.kind === "monitor"}
+              <div class="bg-muted flex items-center justify-between rounded-lg p-3">
+                <div>
+                  <p class="font-medium">{getMonitorName(item.monitor_tag)}</p>
+                  <p class="text-muted-foreground text-xs">{item.monitor_tag}</p>
+                </div>
+                <div class="flex items-center gap-1">
+                  <DropdownMenu.Root>
+                    <DropdownMenu.Trigger class="cursor-pointer">
+                      {#snippet child({ props })}
+                        <Button {...props} variant="ghost" size="sm" disabled={savingStructure}>
+                          <ArrowRightLeftIcon class="h-4 w-4" />
+                        </Button>
+                      {/snippet}
+                    </DropdownMenu.Trigger>
+                    <DropdownMenu.Content align="end">
+                      {#if pageMonitorGroups.length === 0}
+                        <DropdownMenu.Item disabled>No groups available</DropdownMenu.Item>
+                      {/if}
+                      {#each pageMonitorGroups as group (group.id)}
+                        <DropdownMenu.Item onclick={() => moveMonitorToDestination(item.monitor_tag, null, group.id)}>
+                          Move to {group.name}
+                        </DropdownMenu.Item>
+                      {/each}
+                    </DropdownMenu.Content>
+                  </DropdownMenu.Root>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onclick={() => moveTopLevelItem(index, "up")}
+                    disabled={index === 0 || savingStructure}
+                  >
+                    <ArrowUpIcon class="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onclick={() => moveTopLevelItem(index, "down")}
+                    disabled={index === topLevelOrder.length - 1 || savingStructure}
+                  >
+                    <ArrowDownIcon class="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onclick={() => removeMonitorFromPage(item.monitor_tag, null)}
+                    disabled={savingStructure}
+                  >
+                    <XIcon class="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+            {:else}
+              {@const group = getGroupById(item.id)}
+              {#if group}
+                <div class="overflow-hidden rounded-lg border">
+                  <div class="bg-muted/50 flex items-center justify-between p-3">
+                    <div>
+                      <p class="font-medium">{group.name}</p>
+                      {#if group.description}
+                        <p class="text-muted-foreground mt-1 line-clamp-2 text-xs">{group.description}</p>
+                      {/if}
+                      <p class="text-muted-foreground text-xs">
+                        {group.monitors.length} monitor{group.monitors.length === 1 ? "" : "s"}
+                        {group.default_expanded ? " • Expanded by default" : ""}
+                        {group.adopt_child_status ? " • Adopts child status" : ""}
+                      </p>
+                    </div>
+                    <div class="flex items-center gap-1">
+                      <Button variant="ghost" size="sm" onclick={() => openEditGroupDialog(group.id)} disabled={savingStructure}>
+                        <SettingsIcon class="h-4 w-4" />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onclick={() => moveTopLevelItem(index, "up")}
+                        disabled={index === 0 || savingStructure}
+                      >
+                        <ArrowUpIcon class="h-4 w-4" />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onclick={() => moveTopLevelItem(index, "down")}
+                        disabled={index === topLevelOrder.length - 1 || savingStructure}
+                      >
+                        <ArrowDownIcon class="h-4 w-4" />
+                      </Button>
+                      <Button variant="ghost" size="sm" onclick={() => deleteGroup(group.id)} disabled={savingStructure}>
+                        <XIcon class="h-4 w-4" />
+                      </Button>
+                    </div>
+                  </div>
+
+                  <div class="space-y-2 border-t p-3">
+                    {#if group.monitors.length > 0}
+                      {#each group.monitors as monitor, groupIndex (monitor.monitor_tag)}
+                        <div class="bg-background flex items-center justify-between rounded-md border p-3">
+                          <div>
+                            <p class="font-medium">{getMonitorName(monitor.monitor_tag)}</p>
+                            <p class="text-muted-foreground text-xs">{monitor.monitor_tag}</p>
+                          </div>
+                          <div class="flex items-center gap-1">
+                            <DropdownMenu.Root>
+                              <DropdownMenu.Trigger class="cursor-pointer">
+                                {#snippet child({ props })}
+                                  <Button {...props} variant="ghost" size="sm" disabled={savingStructure}>
+                                    <ArrowRightLeftIcon class="h-4 w-4" />
+                                  </Button>
+                                {/snippet}
+                              </DropdownMenu.Trigger>
+                              <DropdownMenu.Content align="end">
+                                <DropdownMenu.Item
+                                  onclick={() => moveMonitorToDestination(monitor.monitor_tag, group.id, null)}
+                                >
+                                  Move to top level
+                                </DropdownMenu.Item>
+                                {#each pageMonitorGroups.filter((candidate) => candidate.id !== group.id) as destination (destination.id)}
+                                  <DropdownMenu.Item
+                                    onclick={() => moveMonitorToDestination(monitor.monitor_tag, group.id, destination.id)}
+                                  >
+                                    Move to {destination.name}
+                                  </DropdownMenu.Item>
+                                {/each}
+                              </DropdownMenu.Content>
+                            </DropdownMenu.Root>
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              onclick={() => moveGroupMonitor(group.id, groupIndex, "up")}
+                              disabled={groupIndex === 0 || savingStructure}
+                            >
+                              <ArrowUpIcon class="h-4 w-4" />
+                            </Button>
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              onclick={() => moveGroupMonitor(group.id, groupIndex, "down")}
+                              disabled={groupIndex === group.monitors.length - 1 || savingStructure}
+                            >
+                              <ArrowDownIcon class="h-4 w-4" />
+                            </Button>
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              onclick={() => removeMonitorFromPage(monitor.monitor_tag, group.id)}
+                              disabled={savingStructure}
+                            >
+                              <XIcon class="h-4 w-4" />
+                            </Button>
+                          </div>
+                        </div>
+                      {/each}
+                    {:else}
+                      <div class="text-muted-foreground rounded-md border border-dashed px-3 py-4 text-sm">
+                        No monitors in this group yet
+                      </div>
+                    {/if}
+                  </div>
+                </div>
+              {/if}
+            {/if}
+          {/each}
+        </div>
+      {:else}
+        <div class="text-muted-foreground bg-muted rounded-lg p-4 text-center text-sm">
+          No monitors or groups added to this page yet
+        </div>
+      {/if}
+    </div>
+  </Card.Content>
+</Card.Root>
+
+<Dialog.Root bind:open={groupDialogOpen}>
+  <Dialog.Content class="sm:max-w-md">
+    <Dialog.Header>
+      <Dialog.Title>{editingGroupId === null ? "Create Group" : "Edit Group"}</Dialog.Title>
+      <Dialog.Description>Configure how this page group appears on the public status page.</Dialog.Description>
+    </Dialog.Header>
+
+    <div class="space-y-4 py-2">
+      <div class="space-y-2">
+        <Label for="page-group-name">Group name</Label>
+        <Input id="page-group-name" bind:value={groupForm.name} placeholder="Infrastructure" />
+      </div>
+
+      <div class="space-y-2">
+        <Label for="page-group-description">Description</Label>
+        <Textarea
+          id="page-group-description"
+          bind:value={groupForm.description}
+          placeholder="What belongs in this group?"
+          rows={3}
+        />
+      </div>
+
+      <div class="flex items-center justify-between rounded-lg border px-3 py-3">
+        <div class="space-y-1">
+          <Label for="page-group-default-expanded">Expanded by default</Label>
+          <p class="text-muted-foreground text-xs">Show this group expanded when the status page first loads.</p>
+        </div>
+        <Switch id="page-group-default-expanded" bind:checked={groupForm.default_expanded} />
+      </div>
+
+      <div class="flex items-center justify-between rounded-lg border px-3 py-3">
+        <div class="space-y-1">
+          <Label for="page-group-adopt-status">Adopt child status</Label>
+          <p class="text-muted-foreground text-xs">Show the worst status of the monitors inside this group.</p>
+        </div>
+        <Switch id="page-group-adopt-status" bind:checked={groupForm.adopt_child_status} />
+      </div>
+    </div>
+
+    <Dialog.Footer>
+      <Button variant="outline" onclick={() => (groupDialogOpen = false)} disabled={savingStructure}>Cancel</Button>
+      <Button onclick={saveGroupDialog} disabled={savingStructure || groupForm.name.trim().length === 0}>
+        {#if savingStructure}
+          <Loader class="h-4 w-4 animate-spin" />
+          Saving...
+        {:else}
+          Save Group
+        {/if}
+      </Button>
+    </Dialog.Footer>
+  </Dialog.Content>
+</Dialog.Root>
diff --git a/static/api-references/v4.json b/static/api-references/v4.json
index 6f6eb16c3..8c54c4fcc 100644
--- a/static/api-references/v4.json
+++ b/static/api-references/v4.json
@@ -2077,10 +2077,128 @@
         },
         "additionalProperties": false
       },
+      "PageMonitor": {
+        "type": "object",
+        "required": ["monitor_tag", "group_id", "position"],
+        "properties": {
+          "monitor_tag": {
+            "type": "string"
+          },
+          "group_id": {
+            "type": "integer",
+            "nullable": true
+          },
+          "position": {
+            "type": "integer"
+          }
+        },
+        "additionalProperties": false
+      },
+      "PageMonitorRequest": {
+        "oneOf": [
+          {
+            "type": "string"
+          },
+          {
+            "type": "object",
+            "required": ["monitor_tag"],
+            "properties": {
+              "monitor_tag": {
+                "type": "string"
+              },
+              "position": {
+                "type": "integer"
+              },
+              "group_id": {
+                "type": "integer",
+                "nullable": true
+              }
+            },
+            "additionalProperties": false
+          }
+        ]
+      },
+      "PageMonitorGroup": {
+        "type": "object",
+        "required": ["id", "name", "description", "default_expanded", "adopt_child_status", "position", "monitors"],
+        "properties": {
+          "id": {
+            "type": "integer"
+          },
+          "name": {
+            "type": "string"
+          },
+          "description": {
+            "type": "string",
+            "nullable": true
+          },
+          "default_expanded": {
+            "type": "boolean"
+          },
+          "adopt_child_status": {
+            "type": "boolean"
+          },
+          "position": {
+            "type": "integer"
+          },
+          "monitors": {
+            "type": "array",
+            "items": {
+              "$ref": "#/components/schemas/PageMonitor"
+            }
+          }
+        },
+        "additionalProperties": false
+      },
+      "PageMonitorGroupRequest": {
+        "type": "object",
+        "required": ["name"],
+        "properties": {
+          "id": {
+            "type": "integer"
+          },
+          "name": {
+            "type": "string"
+          },
+          "description": {
+            "type": "string",
+            "nullable": true
+          },
+          "default_expanded": {
+            "type": "boolean"
+          },
+          "adopt_child_status": {
+            "type": "boolean"
+          },
+          "position": {
+            "type": "integer"
+          },
+          "monitors": {
+            "type": "array",
+            "items": {
+              "$ref": "#/components/schemas/PageMonitorRequest"
+            }
+          }
+        },
+        "additionalProperties": false
+      },
       "Page": {
         "type": "object",
-        "required": ["page_path", "page_title", "page_header"],
+        "required": [
+          "id",
+          "page_path",
+          "page_title",
+          "page_header",
+          "page_settings",
+          "monitors",
+          "monitor_groups",
+          "created_at",
+          "updated_at"
+        ],
         "properties": {
+          "id": {
+            "type": "integer"
+          },
           "page_path": {
             "type": "string"
           },
@@ -2091,10 +2209,12 @@
             "type": "string"
           },
           "page_subheader": {
-            "type": "string"
+            "type": "string",
+            "nullable": true
           },
           "page_logo": {
-            "type": "string"
+            "type": "string",
+            "nullable": true
           },
           "page_settings": {
             "type": "object",
@@ -2103,11 +2223,25 @@
           "monitors": {
             "type": "array",
             "items": {
-              "$ref": "#/components/schemas/Monitor"
+              "$ref": "#/components/schemas/PageMonitor"
             }
+          },
+          "monitor_groups": {
+            "type": "array",
+            "items": {
+              "$ref": "#/components/schemas/PageMonitorGroup"
+            }
+          },
+          "created_at": {
+            "type": "string",
+            "format": "date-time"
+          },
+          "updated_at": {
+            "type": "string",
+            "format": "date-time"
           }
         },
-        "additionalProperties": true
+        "additionalProperties": false
       },
       "CreatePageRequest": {
         "type": "object",
@@ -2138,7 +2272,13 @@
           "monitors": {
             "type": "array",
             "items": {
-              "type": "string"
+              "$ref": "#/components/schemas/PageMonitorRequest"
+            }
+          },
+          "monitor_groups": {
+            "type": "array",
+            "items": {
+              "$ref": "#/components/schemas/PageMonitorGroupRequest"
             }
           }
         },
@@ -2169,7 +2309,13 @@
           "monitors": {
             "type": "array",
             "items": {
-              "type": "string"
+              "$ref": "#/components/schemas/PageMonitorRequest"
+            }
+          },
+          "monitor_groups": {
+            "type": "array",
+            "items": {
+              "$ref": "#/components/schemas/PageMonitorGroupRequest"
             }
           }
         },