diff --git a/web/ui/mantine-ui/src/App.tsx b/web/ui/mantine-ui/src/App.tsx
index 2a55d85d2..60376ae92 100644
--- a/web/ui/mantine-ui/src/App.tsx
+++ b/web/ui/mantine-ui/src/App.tsx
@@ -56,13 +56,13 @@ import FlagsPage from "./pages/FlagsPage";
 import ConfigPage from "./pages/ConfigPage";
 import AgentPage from "./pages/AgentPage";
 import { Suspense, useContext } from "react";
-import ErrorBoundary from "./ErrorBoundary";
-import { ThemeSelector } from "./ThemeSelector";
+import ErrorBoundary from "./components/ErrorBoundary";
+import { ThemeSelector } from "./components/ThemeSelector";
 import { SettingsContext } from "./settings";
 import { Notifications } from "@mantine/notifications";
 import { useAppDispatch } from "./state/hooks";
 import { updateSettings } from "./state/settingsSlice";
-import SettingsMenu from "./SettingsMenu";
+import SettingsMenu from "./components/SettingsMenu";
 
 const queryClient = new QueryClient();
 
diff --git a/web/ui/mantine-ui/src/api/responseTypes/config.ts b/web/ui/mantine-ui/src/api/responseTypes/config.ts
index f9a72f3b6..4f509f9e0 100644
--- a/web/ui/mantine-ui/src/api/responseTypes/config.ts
+++ b/web/ui/mantine-ui/src/api/responseTypes/config.ts
@@ -1,3 +1,5 @@
+// Result type for /api/v1/status/config endpoint.
+// See: https://prometheus.io/docs/prometheus/latest/querying/api/#config
 export default interface ConfigResult {
   yaml: string;
 }
diff --git a/web/ui/mantine-ui/src/api/responseTypes/labelValues.ts b/web/ui/mantine-ui/src/api/responseTypes/labelValues.ts
index 5b2885194..3c69b79b5 100644
--- a/web/ui/mantine-ui/src/api/responseTypes/labelValues.ts
+++ b/web/ui/mantine-ui/src/api/responseTypes/labelValues.ts
@@ -1 +1,3 @@
+// Result type for /api/v1/label/<label_name>/values endpoint.
+// See: https://prometheus.io/docs/prometheus/latest/querying/api/#querying-label-values
 export type LabelValuesResult = string[];
diff --git a/web/ui/mantine-ui/src/api/responseTypes/query.ts b/web/ui/mantine-ui/src/api/responseTypes/query.ts
index d393f318d..6fcf09f1b 100644
--- a/web/ui/mantine-ui/src/api/responseTypes/query.ts
+++ b/web/ui/mantine-ui/src/api/responseTypes/query.ts
@@ -23,6 +23,8 @@ export interface RangeSamples {
 export type SampleValue = [number, string];
 export type SampleHistogram = [number, Histogram];
 
+// Result type for /api/v1/query endpoint.
+// See: https://prometheus.io/docs/prometheus/latest/querying/api/#instant-queries
 export type InstantQueryResult =
   | {
       resultType: "vector";
diff --git a/web/ui/mantine-ui/src/api/responseTypes/rules.ts b/web/ui/mantine-ui/src/api/responseTypes/rules.ts
index 5866000af..4cc7e30f5 100644
--- a/web/ui/mantine-ui/src/api/responseTypes/rules.ts
+++ b/web/ui/mantine-ui/src/api/responseTypes/rules.ts
@@ -50,10 +50,14 @@ type AlertingRuleGroup = Omit<RuleGroup, "rules"> & {
   rules: AlertingRule[];
 };
 
-export interface RulesMap {
+// Result type for /api/v1/alerts endpoint.
+// See: https://prometheus.io/docs/prometheus/latest/querying/api/#alerts
+export interface RulesResult {
   groups: RuleGroup[];
 }
 
-export interface AlertingRulesMap {
+// Same as RulesResult above, but can be used when the caller ensures via a
+// "type=alert" query parameter that all rules are alerting rules.
+export interface AlertingRulesResult {
   groups: AlertingRuleGroup[];
 }
diff --git a/web/ui/mantine-ui/src/api/responseTypes/scrapePools.ts b/web/ui/mantine-ui/src/api/responseTypes/scrapePools.ts
index aca8b55af..793ad7157 100644
--- a/web/ui/mantine-ui/src/api/responseTypes/scrapePools.ts
+++ b/web/ui/mantine-ui/src/api/responseTypes/scrapePools.ts
@@ -1 +1,2 @@
+// Result type for /api/v1/scrape_pools endpoint.
 export type ScrapePoolsResult = { scrapePools: string[] };
diff --git a/web/ui/mantine-ui/src/api/responseTypes/targets.ts b/web/ui/mantine-ui/src/api/responseTypes/targets.ts
index ea34aa132..cc0e891f0 100644
--- a/web/ui/mantine-ui/src/api/responseTypes/targets.ts
+++ b/web/ui/mantine-ui/src/api/responseTypes/targets.ts
@@ -20,6 +20,8 @@ export interface DroppedTarget {
   discoveredLabels: Labels;
 }
 
+// Result type for /api/v1/targets endpoint.
+// See: https://prometheus.io/docs/prometheus/latest/querying/api/#targets
 export type TargetsResult = {
   activeTargets: Target[];
   droppedTargets: DroppedTarget[];
diff --git a/web/ui/mantine-ui/src/api/responseTypes/tsdbStatus.ts b/web/ui/mantine-ui/src/api/responseTypes/tsdbStatus.ts
index 98b93177c..255249757 100644
--- a/web/ui/mantine-ui/src/api/responseTypes/tsdbStatus.ts
+++ b/web/ui/mantine-ui/src/api/responseTypes/tsdbStatus.ts
@@ -11,7 +11,9 @@ interface HeadStats {
   maxTime: number;
 }
 
-export interface TSDBMap {
+// Result type for /api/v1/status/tsdb endpoint.
+// See: https://prometheus.io/docs/prometheus/latest/querying/api/#tsdb-stats
+export interface TSDBStatusResult {
   headStats: HeadStats;
   seriesCountByMetricName: Stats[];
   labelValueCountByLabelName: Stats[];
diff --git a/web/ui/mantine-ui/src/CustomInfiniteScroll.tsx b/web/ui/mantine-ui/src/components/CustomInfiniteScroll.tsx
similarity index 100%
rename from web/ui/mantine-ui/src/CustomInfiniteScroll.tsx
rename to web/ui/mantine-ui/src/components/CustomInfiniteScroll.tsx
diff --git a/web/ui/mantine-ui/src/EndpointLink.tsx b/web/ui/mantine-ui/src/components/EndpointLink.tsx
similarity index 100%
rename from web/ui/mantine-ui/src/EndpointLink.tsx
rename to web/ui/mantine-ui/src/components/EndpointLink.tsx
diff --git a/web/ui/mantine-ui/src/ErrorBoundary.tsx b/web/ui/mantine-ui/src/components/ErrorBoundary.tsx
similarity index 100%
rename from web/ui/mantine-ui/src/ErrorBoundary.tsx
rename to web/ui/mantine-ui/src/components/ErrorBoundary.tsx
diff --git a/web/ui/mantine-ui/src/LabelBadges.tsx b/web/ui/mantine-ui/src/components/LabelBadges.tsx
similarity index 88%
rename from web/ui/mantine-ui/src/LabelBadges.tsx
rename to web/ui/mantine-ui/src/components/LabelBadges.tsx
index c4a7b54c7..008cf9eee 100644
--- a/web/ui/mantine-ui/src/LabelBadges.tsx
+++ b/web/ui/mantine-ui/src/components/LabelBadges.tsx
@@ -1,7 +1,7 @@
 import { Badge, BadgeVariant, Group, MantineColor } from "@mantine/core";
 import { FC } from "react";
-import { escapeString } from "./lib/escapeString";
-import badgeClasses from "./Badge.module.css";
+import { escapeString } from "../lib/escapeString";
+import badgeClasses from "../Badge.module.css";
 
 export interface LabelBadgesProps {
   labels: Record<string, string>;
diff --git a/web/ui/mantine-ui/src/codebox.module.css b/web/ui/mantine-ui/src/components/RuleDefinition.module.css
similarity index 100%
rename from web/ui/mantine-ui/src/codebox.module.css
rename to web/ui/mantine-ui/src/components/RuleDefinition.module.css
diff --git a/web/ui/mantine-ui/src/RuleDefinition.tsx b/web/ui/mantine-ui/src/components/RuleDefinition.tsx
similarity index 92%
rename from web/ui/mantine-ui/src/RuleDefinition.tsx
rename to web/ui/mantine-ui/src/components/RuleDefinition.tsx
index 6b9a3793e..dfc5c5d33 100644
--- a/web/ui/mantine-ui/src/RuleDefinition.tsx
+++ b/web/ui/mantine-ui/src/components/RuleDefinition.tsx
@@ -1,9 +1,9 @@
 import { Badge, Box, Card, Group, useComputedColorScheme } from "@mantine/core";
 import { IconClockPause, IconClockPlay } from "@tabler/icons-react";
 import { FC } from "react";
-import { formatPrometheusDuration } from "./lib/formatTime";
-import codeboxClasses from "./codebox.module.css";
-import { Rule } from "./api/responseTypes/rules";
+import { formatPrometheusDuration } from "../lib/formatTime";
+import codeboxClasses from "./RuleDefinition.module.css";
+import { Rule } from "../api/responseTypes/rules";
 import CodeMirror, { EditorView } from "@uiw/react-codemirror";
 import { syntaxHighlighting } from "@codemirror/language";
 import {
@@ -11,7 +11,7 @@ import {
   darkPromqlHighlighter,
   lightTheme,
   promqlHighlighter,
-} from "./codemirror/theme";
+} from "../codemirror/theme";
 import { PromQLExtension } from "@prometheus-io/codemirror-promql";
 import { LabelBadges } from "./LabelBadges";
 
diff --git a/web/ui/mantine-ui/src/SettingsMenu.tsx b/web/ui/mantine-ui/src/components/SettingsMenu.tsx
similarity index 96%
rename from web/ui/mantine-ui/src/SettingsMenu.tsx
rename to web/ui/mantine-ui/src/components/SettingsMenu.tsx
index 5546b820a..45f91b391 100644
--- a/web/ui/mantine-ui/src/SettingsMenu.tsx
+++ b/web/ui/mantine-ui/src/components/SettingsMenu.tsx
@@ -1,8 +1,8 @@
 import { Popover, ActionIcon, Fieldset, Checkbox, Stack } from "@mantine/core";
 import { IconSettings } from "@tabler/icons-react";
 import { FC } from "react";
-import { useAppDispatch, useAppSelector } from "./state/hooks";
-import { updateSettings } from "./state/settingsSlice";
+import { useAppDispatch, useAppSelector } from "../state/hooks";
+import { updateSettings } from "../state/settingsSlice";
 
 const SettingsMenu: FC = () => {
   const {
diff --git a/web/ui/mantine-ui/src/StateMultiSelect.tsx b/web/ui/mantine-ui/src/components/StateMultiSelect.tsx
similarity index 100%
rename from web/ui/mantine-ui/src/StateMultiSelect.tsx
rename to web/ui/mantine-ui/src/components/StateMultiSelect.tsx
diff --git a/web/ui/mantine-ui/src/ThemeSelector.tsx b/web/ui/mantine-ui/src/components/ThemeSelector.tsx
similarity index 100%
rename from web/ui/mantine-ui/src/ThemeSelector.tsx
rename to web/ui/mantine-ui/src/components/ThemeSelector.tsx
diff --git a/web/ui/mantine-ui/src/lib/escapeString.ts b/web/ui/mantine-ui/src/lib/escapeString.ts
index 05bc1ba2e..5fc1955de 100644
--- a/web/ui/mantine-ui/src/lib/escapeString.ts
+++ b/web/ui/mantine-ui/src/lib/escapeString.ts
@@ -1,3 +1,4 @@
+// Used for escaping escape sequences and double quotes in double-quoted strings.
 export const escapeString = (str: string) => {
   return str.replace(/([\\"])/g, "\\$1");
 };
diff --git a/web/ui/mantine-ui/src/lib/formatTime.ts b/web/ui/mantine-ui/src/lib/formatTime.ts
index c1bff433f..c92b564f4 100644
--- a/web/ui/mantine-ui/src/lib/formatTime.ts
+++ b/web/ui/mantine-ui/src/lib/formatTime.ts
@@ -4,6 +4,7 @@ dayjs.extend(duration);
 import utc from "dayjs/plugin/utc";
 dayjs.extend(utc);
 
+// Parse Prometheus-specific duration strings such as "5m" or "1d2h3m4s" into milliseconds.
 export const parsePrometheusDuration = (durationStr: string): number | null => {
   if (durationStr === "") {
     return null;
@@ -44,6 +45,7 @@ export const parsePrometheusDuration = (durationStr: string): number | null => {
   return dur;
 };
 
+// Format a duration in milliseconds into a Prometheus duration string like "1d2h3m4s".
 export const formatPrometheusDuration = (d: number): string => {
   let ms = d;
   let r = "";
diff --git a/web/ui/mantine-ui/src/pages/AlertsPage.tsx b/web/ui/mantine-ui/src/pages/AlertsPage.tsx
index 5ad857697..414779aad 100644
--- a/web/ui/mantine-ui/src/pages/AlertsPage.tsx
+++ b/web/ui/mantine-ui/src/pages/AlertsPage.tsx
@@ -12,19 +12,19 @@ import {
   Alert,
 } from "@mantine/core";
 import { useSuspenseAPIQuery } from "../api/api";
-import { AlertingRulesMap } from "../api/responseTypes/rules";
+import { AlertingRulesResult } from "../api/responseTypes/rules";
 import badgeClasses from "../Badge.module.css";
-import RuleDefinition from "../RuleDefinition";
+import RuleDefinition from "../components/RuleDefinition";
 import { humanizeDurationRelative, now } from "../lib/formatTime";
 import { Fragment } from "react";
-import { StateMultiSelect } from "../StateMultiSelect";
+import { StateMultiSelect } from "../components/StateMultiSelect";
 import { useAppDispatch, useAppSelector } from "../state/hooks";
 import { IconInfoCircle, IconSearch } from "@tabler/icons-react";
-import { LabelBadges } from "../LabelBadges";
+import { LabelBadges } from "../components/LabelBadges";
 import { updateAlertFilters } from "../state/alertsPageSlice";
 
 export default function AlertsPage() {
-  const { data } = useSuspenseAPIQuery<AlertingRulesMap>({
+  const { data } = useSuspenseAPIQuery<AlertingRulesResult>({
     path: `/rules`,
     params: {
       type: "alert",
diff --git a/web/ui/mantine-ui/src/pages/RulesPage.tsx b/web/ui/mantine-ui/src/pages/RulesPage.tsx
index fcf1a6553..d1baf87af 100644
--- a/web/ui/mantine-ui/src/pages/RulesPage.tsx
+++ b/web/ui/mantine-ui/src/pages/RulesPage.tsx
@@ -24,9 +24,9 @@ import {
   IconRepeat,
 } from "@tabler/icons-react";
 import { useSuspenseAPIQuery } from "../api/api";
-import { RulesMap } from "../api/responseTypes/rules";
+import { RulesResult } from "../api/responseTypes/rules";
 import badgeClasses from "../Badge.module.css";
-import RuleDefinition from "../RuleDefinition";
+import RuleDefinition from "../components/RuleDefinition";
 
 const healthBadgeClass = (state: string) => {
   switch (state) {
@@ -42,7 +42,7 @@ const healthBadgeClass = (state: string) => {
 };
 
 export default function RulesPage() {
-  const { data } = useSuspenseAPIQuery<RulesMap>({ path: `/rules` });
+  const { data } = useSuspenseAPIQuery<RulesResult>({ path: `/rules` });
 
   return (
     <Stack mt="xs">
diff --git a/web/ui/mantine-ui/src/pages/TSDBStatusPage.tsx b/web/ui/mantine-ui/src/pages/TSDBStatusPage.tsx
index 5948e2721..e315ea99b 100644
--- a/web/ui/mantine-ui/src/pages/TSDBStatusPage.tsx
+++ b/web/ui/mantine-ui/src/pages/TSDBStatusPage.tsx
@@ -1,6 +1,6 @@
 import { Stack, Card, Group, Table, Text } from "@mantine/core";
 import { useSuspenseAPIQuery } from "../api/api";
-import { TSDBMap } from "../api/responseTypes/tsdbStatus";
+import { TSDBStatusResult } from "../api/responseTypes/tsdbStatus";
 import { useAppSelector } from "../state/hooks";
 import { formatTimestamp } from "../lib/formatTime";
 
@@ -15,7 +15,7 @@ export default function TSDBStatusPage() {
         seriesCountByLabelValuePair,
       },
     },
-  } = useSuspenseAPIQuery<TSDBMap>({ path: `/status/tsdb` });
+  } = useSuspenseAPIQuery<TSDBStatusResult>({ path: `/status/tsdb` });
 
   const useLocalTime = useAppSelector((state) => state.settings.useLocalTime);
 
diff --git a/web/ui/mantine-ui/src/pages/TargetsPage.tsx b/web/ui/mantine-ui/src/pages/TargetsPage.tsx
index a02020422..a93b594df 100644
--- a/web/ui/mantine-ui/src/pages/TargetsPage.tsx
+++ b/web/ui/mantine-ui/src/pages/TargetsPage.tsx
@@ -18,7 +18,7 @@ import {
   IconLayoutNavbarExpand,
   IconSearch,
 } from "@tabler/icons-react";
-import { StateMultiSelect } from "../StateMultiSelect";
+import { StateMultiSelect } from "../components/StateMultiSelect";
 import { useSuspenseAPIQuery } from "../api/api";
 import { ScrapePoolsResult } from "../api/responseTypes/scrapePools";
 import { Target, TargetsResult } from "../api/responseTypes/targets";
@@ -29,14 +29,14 @@ import {
   humanizeDuration,
   now,
 } from "../lib/formatTime";
-import { LabelBadges } from "../LabelBadges";
+import { LabelBadges } from "../components/LabelBadges";
 import { useAppDispatch, useAppSelector } from "../state/hooks";
 import {
   setCollapsedPools,
   updateTargetFilters,
 } from "../state/targetsPageSlice";
-import EndpointLink from "../EndpointLink";
-import CustomInfiniteScroll from "../CustomInfiniteScroll";
+import EndpointLink from "../components/EndpointLink";
+import CustomInfiniteScroll from "../components/CustomInfiniteScroll";
 
 type ScrapePool = {
   targets: Target[];
diff --git a/web/ui/mantine-ui/src/state/hooks.ts b/web/ui/mantine-ui/src/state/hooks.ts
index 04a59b244..e7661469c 100644
--- a/web/ui/mantine-ui/src/state/hooks.ts
+++ b/web/ui/mantine-ui/src/state/hooks.ts
@@ -1,6 +1,6 @@
 import { useDispatch, useSelector } from "react-redux";
 import type { RootState, AppDispatch } from "./store";
 
-// Use throughout your app instead of plain `useDispatch` and `useSelector`
+// Use these typed hooks throughout the app instead of plain `useDispatch` and `useSelector`
 export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
 export const useAppSelector = useSelector.withTypes<RootState>();