diff --git a/src/components/Portal/Stats/StatsAlert.vue b/src/components/Portal/Stats/StatsAlert.vue
new file mode 100644
index 00000000..a6dc668e
--- /dev/null
+++ b/src/components/Portal/Stats/StatsAlert.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="stats_alert" :class="`stats_alert--${severity}`" role="status">
+    <img class="stats_alert__icon" :src="iconSrc" alt="" width="20" height="20" />
+    <div class="stats_alert__body">
+      <slot>{{ text }}</slot>
+    </div>
+  </div>
+</template>
+
+<script>
+/**
+ * Light MUI-ish alert for Stats empty / unavailable / note states.
+ * Tinted background + icon + short text; uses overlay / toast tokens.
+ *
+ * @module StatsAlert
+ */
+import infoIcon from "@/assets/img/general/portal/info.svg";
+import warnIcon from "@/assets/img/general/toast/connection-warn.svg";
+import errorIcon from "@/assets/img/general/toast/connection-error.svg";
+
+const ICONS = {
+  info: infoIcon,
+  warning: warnIcon,
+  error: errorIcon,
+};
+
+export default {
+  name: "StatsAlert",
+  props: {
+    /** Visual tone: info | warning | error */
+    severity: {
+      type: String,
+      default: "info",
+      validator: (v) => ["info", "warning", "error"].includes(v),
+    },
+    /** Plain text when no slot content is provided */
+    text: {
+      type: String,
+      default: "",
+    },
+  },
+  computed: {
+    iconSrc() {
+      return ICONS[this.severity] || ICONS.info;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.stats_alert {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: flex-start;
+  gap: 10px;
+  width: 100%;
+  box-sizing: border-box;
+  padding: calc(var(--padding-overlay-input) * 0.75) var(--padding-overlay-input);
+  border-radius: var(--radius-overlay-input);
+  font-size: 0.95em;
+  line-height: 1.35;
+  color: var(--color-on-overlay-input);
+  background: var(--color-overlay-input);
+}
+.stats_alert__icon {
+  flex: 0 0 auto;
+  width: 20px;
+  height: 20px;
+  margin-top: 1px;
+  object-fit: contain;
+  filter: var(--filter-icon);
+}
+.stats_alert--warning .stats_alert__icon,
+.stats_alert--error .stats_alert__icon {
+  /* toast icons are already colored discs; don't invert them */
+  filter: none;
+}
+.stats_alert__body {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.stats_alert--info {
+  background: var(--color-overlay-link-hover);
+  color: var(--color-text);
+}
+.stats_alert--warning {
+  background: var(--toast-bg);
+  color: var(--toast-text);
+}
+.stats_alert--error {
+  background: var(--color-overlay-link-remove-hover);
+  color: var(--color-on-overlay-link-remove-hover);
+}
+.stats_alert :deep(a) {
+  color: inherit;
+  text-decoration: underline;
+}
+</style>
diff --git a/src/components/Portal/Stats/StatsProgressDots.vue b/src/components/Portal/Stats/StatsProgressDots.vue
new file mode 100644
index 00000000..bd3039dc
--- /dev/null
+++ b/src/components/Portal/Stats/StatsProgressDots.vue
@@ -0,0 +1,86 @@
+<template>
+  <div class="progress_display" v-if="total > 1">
+    <span
+      class="progress_display__dot_container"
+      v-for="i in total"
+      :key="i"
+      @click="$emit('open', i - 1)"
+    >
+      <span
+        class="progress_display__dot"
+        :class="{ dot_active: i == current, dot_finished: i < current }"
+      ></span>
+    </span>
+  </div>
+</template>
+
+<script>
+/**
+ * Survey-style progress dots for Stats modals.
+ * Markup/classes/tokens match Modal.vue (`progress_display` / `__dot` / `dot_*`).
+ *
+ * @module StatsProgressDots
+ */
+export default {
+  name: "StatsProgressDots",
+  props: {
+    /** 1-based current page index (same as Modal progress.current) */
+    current: {
+      type: Number,
+      required: true,
+    },
+    /** Total page count */
+    total: {
+      type: Number,
+      required: true,
+    },
+  },
+  emits: ["open"],
+};
+</script>
+
+<style scoped>
+.progress_display {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: center;
+  margin-left: 0;
+  user-select: none;
+  height: var(--size-modal-progress, auto);
+}
+.progress_display span {
+  display: block;
+}
+.progress_display__dot_container {
+  padding: var(--margin-modal-progress-dot);
+  cursor: pointer;
+}
+.progress_display__dot {
+  width: var(--size-modal-progress-dot);
+  height: var(--size-modal-progress-dot);
+  border-radius: 50%;
+  background-color: var(--color-modal-progress-dot);
+}
+.progress_display__dot.dot_active {
+  background-color: var(--color-modal-progress-dot-active);
+}
+.progress_display__dot.dot_finished {
+  transform: scale(0.75);
+  opacity: 0.6;
+}
+</style>
+
+<!-- Unscoped: beat global .bottom_actions > * button chrome (same layout as Modal.vue). -->
+<style>
+.bottom_actions > .progress_display {
+  padding: 0;
+  height: auto;
+  min-height: var(--height-overlay-action);
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  cursor: default;
+  font-size: inherit;
+}
+</style>
diff --git a/src/views/Portal/StatsModal.vue b/src/views/Portal/StatsModal.vue
index 945530d3..1515b5ee 100644
--- a/src/views/Portal/StatsModal.vue
+++ b/src/views/Portal/StatsModal.vue
@@ -1,56 +1,68 @@
 <template>
   <main class="entercode">
     <header class="modal_header">
-      <h2 class="header_style modal_header_title">View Statistics</h2>
+      <h2 class="header_style modal_header_title">{{ pageTitle }}</h2>
     </header>
     <div class="overlay_contents" ref="contents">
-      <div class="overlay_contents_text">
-        Your daily workload and check-ins are shown below. Days without a survey still appear when
-        task counts are available.
-      </div>
-      <br />
-      <StatsFilterBar
-        :filters="filters"
-        :active="active"
-        :is-ready="is_ready"
-        :toolbar="toolbar"
-        @update:active="active = $event"
-        @update:toolbar="toolbar = $event"
-      />
-      <StatsChartCard
-        :rows="surveys"
-        :graphs="graphs"
-        :toolbar="toolbar"
-        :is-ready="is_ready"
-      />
-      <br />
-      <div class="overlay_contents_text">
-        We appreciate your contributions towards our research. If you have any questions, please
-        <router-link to="/contact">contact us</router-link>!
-      </div>
+      <!-- Intro -->
+      <template v-if="page === 0">
+        <div class="overlay_contents_text">Your recent task counts and check-ins.</div>
+        <br />
+        <StatsAlert severity="info">
+          Days without a survey still show when task counts are available.
+        </StatsAlert>
+      </template>
+
+      <!-- Chart -->
+      <template v-else-if="page === 1">
+        <StatsFilterBar
+          :filters="filters"
+          :active="active"
+          :is-ready="is_ready"
+          :toolbar="toolbar"
+          @update:active="active = $event"
+          @update:toolbar="toolbar = $event"
+        />
+        <StatsAlert v-if="load_error" severity="error" text="Couldn't load your stats. Try again later." />
+        <StatsAlert
+          v-else-if="is_ready && !surveys.length"
+          severity="warning"
+          text="No stats to show yet."
+        />
+        <StatsChartCard
+          v-else
+          :rows="surveys"
+          :graphs="graphs"
+          :toolbar="toolbar"
+          :is-ready="is_ready"
+        />
+      </template>
+
+      <!-- Contact -->
+      <template v-else>
+        <StatsAlert severity="info">
+          Questions?
+          <router-link to="/contact">Contact us</router-link>.
+        </StatsAlert>
+      </template>
     </div>
     <div class="bottom_actions">
-      <button
-        class="close_action click_escape"
-        @click="
-          $router.push({
-            name: 'settings',
-            query: $route.query,
-          })
-        "
-      >
-        Back
-      </button>
+      <button class="close_action click_escape" @click="onBack">Back</button>
+      <StatsProgressDots :current="page + 1" :total="pageCount" @open="goTo" />
       <div class="flex_spacer"></div>
-      <button class="continue_action click_ctrlenter" @click="$emit('close')">Close</button>
+      <button class="continue_action click_ctrlenter" @click="onContinue">
+        {{ page < pageCount - 1 ? "Next" : "Close" }}
+      </button>
     </div>
   </main>
 </template>
 
 <script>
 import { ErrorToast, WarningToast } from "@svonk/util";
+import StatsAlert from "@/components/Portal/Stats/StatsAlert.vue";
 import StatsChartCard from "@/components/Portal/Stats/StatsChartCard.vue";
 import StatsFilterBar from "@/components/Portal/Stats/StatsFilterBar.vue";
+import StatsProgressDots from "@/components/Portal/Stats/StatsProgressDots.vue";
 import {
   PERSONAL_STAT_FILTERS,
   buildGraphs,
@@ -60,13 +72,16 @@ import {
 
 export default {
   name: "StatsModal",
-  components: { StatsChartCard, StatsFilterBar },
+  components: { StatsAlert, StatsChartCard, StatsFilterBar, StatsProgressDots },
   emits: ["close"],
   data() {
     return {
+      page: 0,
+      pageCount: 3,
       is_ready: false,
       can_update: true,
       toolbar: false,
+      load_error: false,
       min_delay: 1000 * 15,
       surveys: [],
       active: ["mood", "stress", "upcoming"],
@@ -79,8 +94,34 @@ export default {
     graphs() {
       return buildGraphs(this.surveys, this.filters, this.active);
     },
+    pageTitle() {
+      if (this.page === 0) return "View Statistics";
+      if (this.page === 1) return "Your stats";
+      return "Help";
+    },
   },
   methods: {
+    goTo(index) {
+      if (index < 0 || index >= this.pageCount) return;
+      this.page = index;
+    },
+    onBack() {
+      if (this.page > 0) {
+        this.page -= 1;
+        return;
+      }
+      this.$router.push({
+        name: "settings",
+        query: this.$route.query,
+      });
+    },
+    onContinue() {
+      if (this.page < this.pageCount - 1) {
+        this.page += 1;
+        return;
+      }
+      this.$emit("close");
+    },
     try_update() {
       if (this.can_update) {
         this.update(true);
@@ -91,6 +132,7 @@ export default {
       }
     },
     process(data) {
+      this.load_error = false;
       this.surveys = sortStatRows((data || []).filter((survey) => !survey.error));
       try {
         this.surveys.forEach((survey, index) => {
@@ -105,19 +147,20 @@ export default {
     update(force = false) {
       this.is_ready = false;
       this.can_update = false;
+      this.load_error = false;
       this.last_update = Date.now();
       this.surveys = [];
       this.$store
         .get_stats(undefined, force)
         .then((data) => {
           this.process(data);
-          // set a timeout to allow the user to update again
           setTimeout(() => {
             this.can_update = true;
           }, this.min_delay);
         })
         .catch((err) => {
           new ErrorToast("Failed to get statistics", err, 5000);
+          this.load_error = true;
           this.is_ready = true;
           this.can_update = true;
         });
@@ -128,3 +171,9 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.overlay_contents > .stats_alert {
+  margin-bottom: calc(var(--padding-overlay-input) / 2);
+}
+</style>
diff --git a/src/views/Portal/TeacherStatsModal.vue b/src/views/Portal/TeacherStatsModal.vue
index 65ae9d0b..df75096e 100644
--- a/src/views/Portal/TeacherStatsModal.vue
+++ b/src/views/Portal/TeacherStatsModal.vue
@@ -1,69 +1,80 @@
 <template>
   <main class="entercode">
     <header class="modal_header">
-      <h2 class="header_style modal_header_title">Stats</h2>
+      <h2 class="header_style modal_header_title">{{ pageTitle }}</h2>
     </header>
     <div class="overlay_contents">
-      <div class="overlay_contents_text">
-        Class workload trends for classes you manage. Figures are aggregates only — individual
-        check-in notes are not shown.
-      </div>
-      <br />
-      <StatsFilterBar
-        :filters="filters"
-        :active="active"
-        :is-ready="is_ready"
-        :toolbar="toolbar"
-        @update:active="active = $event"
-        @update:toolbar="toolbar = $event"
-      />
-      <template v-if="unavailable">
-        <div class="overlay_contents_text">
-          Class stats aren't available yet. This view waits on the server Stats API.
-        </div>
-        <StatsChartCard :rows="[]" :graphs="[]" :toolbar="toolbar" :is-ready="is_ready" />
+      <!-- Intro -->
+      <template v-if="page === 0">
+        <div class="overlay_contents_text">Aggregates for classes you manage.</div>
+        <br />
+        <StatsAlert severity="info">
+          Class totals only. Individual check-in notes are not shown.
+        </StatsAlert>
       </template>
-      <template v-else-if="!is_ready">
-        <StatsChartCard :rows="[]" :graphs="[]" :toolbar="toolbar" :is-ready="false" />
+
+      <!-- Status / empty / error (single chart slot when no class pages) -->
+      <template v-else-if="statusPage">
+        <StatsFilterBar
+          :filters="filters"
+          :active="active"
+          :is-ready="is_ready"
+          :toolbar="toolbar"
+          @update:active="active = $event"
+          @update:toolbar="toolbar = $event"
+        />
+        <StatsAlert v-if="load_error" severity="error" text="Couldn't load class stats. Try again later." />
+        <StatsAlert v-else-if="unavailable" severity="warning" text="Class stats aren't ready yet." />
+        <StatsAlert
+          v-else-if="is_ready && !visibleClasses.length"
+          severity="warning"
+          text="No classes you manage have aggregate stats yet."
+        />
+        <StatsChartCard
+          v-else-if="!is_ready"
+          :rows="[]"
+          :graphs="[]"
+          :toolbar="toolbar"
+          :is-ready="false"
+        />
       </template>
-      <template v-else-if="!visibleClasses.length">
-        <div class="overlay_contents_text">
-          No classes you manage have aggregate stats yet.
+
+      <!-- One page per class -->
+      <template v-else-if="currentClass">
+        <div class="stats_class_heading">
+          <ClassNameChip :class-obj="localClassFor(currentClass.classId)" />
         </div>
-        <StatsChartCard :rows="[]" :graphs="[]" :toolbar="toolbar" :is-ready="true" />
+        <StatsFilterBar
+          :filters="filters"
+          :active="active"
+          :is-ready="is_ready"
+          :toolbar="toolbar"
+          @update:active="active = $event"
+          @update:toolbar="toolbar = $event"
+        />
+        <StatsChartCard
+          :rows="currentClass.list"
+          :graphs="graphsFor(currentClass.list)"
+          :toolbar="toolbar"
+          :is-ready="is_ready"
+        />
       </template>
-      <template v-else>
-        <template v-for="(cls, i) in visibleClasses" :key="cls.classId">
-          <br v-if="i > 0" />
-          <div class="overlay_contents_text">{{ classLabel(cls) }}</div>
-          <StatsChartCard
-            :rows="cls.list"
-            :graphs="graphsFor(cls.list)"
-            :toolbar="toolbar"
-            :is-ready="is_ready"
-          />
-        </template>
+
+      <!-- Contact (last page when classes exist) -->
+      <template v-else-if="page === pageCount - 1 && visibleClasses.length">
+        <StatsAlert severity="info">
+          Questions?
+          <router-link to="/contact">Contact us</router-link>.
+        </StatsAlert>
       </template>
-      <br />
-      <div class="overlay_contents_text">
-        If you have any questions, please
-        <router-link to="/contact">contact us</router-link>.
-      </div>
     </div>
     <div class="bottom_actions">
-      <button
-        class="close_action click_escape"
-        @click="
-          $router.push({
-            name: 'settings',
-            query: $route.query,
-          })
-        "
-      >
-        Back
-      </button>
+      <button class="close_action click_escape" @click="onBack">Back</button>
+      <StatsProgressDots :current="page + 1" :total="pageCount" @open="goTo" />
       <div class="flex_spacer"></div>
-      <button class="continue_action click_ctrlenter" @click="$emit('close')">Close</button>
+      <button class="continue_action click_ctrlenter" @click="onContinue">
+        {{ page < pageCount - 1 ? "Next" : "Close" }}
+      </button>
     </div>
   </main>
 </template>
@@ -74,22 +85,35 @@
  * Data: per manageable class via GET /api/v1/me/teacher-stats?classId=&from=&to= (mvtt-server#29).
  * Gated by is_teacher on the route; store already filters can_manage_class.
  *
+ * Survey-like pages: intro, then one page per class (chip + filters + chart), then contact.
+ *
  * @module TeacherStatsModal
  */
 import { ErrorToast } from "@svonk/util";
+import ClassNameChip from "@/components/Portal/ClassNameChip.vue";
+import StatsAlert from "@/components/Portal/Stats/StatsAlert.vue";
 import StatsChartCard from "@/components/Portal/Stats/StatsChartCard.vue";
 import StatsFilterBar from "@/components/Portal/Stats/StatsFilterBar.vue";
+import StatsProgressDots from "@/components/Portal/Stats/StatsProgressDots.vue";
 import { TEACHER_STAT_FILTERS, buildGraphs, sortStatRows } from "@/components/Portal/Stats/statSeries";
 
 export default {
   name: "TeacherStatsModal",
-  components: { StatsChartCard, StatsFilterBar },
+  components: {
+    ClassNameChip,
+    StatsAlert,
+    StatsChartCard,
+    StatsFilterBar,
+    StatsProgressDots,
+  },
   emits: ["close"],
   data() {
     return {
+      page: 0,
       is_ready: false,
       toolbar: false,
       unavailable: false,
+      load_error: false,
       classes: [],
       // Teacher endpoint is Work aggregates only (#29)
       active: ["upcoming"],
@@ -107,16 +131,75 @@ export default {
         (cls) => this.localClassFor(cls.classId) && (cls.list || []).length > 0
       );
     },
+    /**
+     * Pages: intro (0) + class pages + contact when classes exist;
+     * otherwise intro + single status page.
+     */
+    pageCount() {
+      const n = this.visibleClasses.length;
+      if (n > 0) return 1 + n + 1; // intro + classes + contact
+      return 2; // intro + status
+    },
+    statusPage() {
+      return this.page === 1 && !this.visibleClasses.length;
+    },
+    classPageIndex() {
+      // page 1..n map to visibleClasses[0..n-1]
+      if (!this.visibleClasses.length) return -1;
+      const idx = this.page - 1;
+      if (idx < 0 || idx >= this.visibleClasses.length) return -1;
+      return idx;
+    },
+    currentClass() {
+      const idx = this.classPageIndex;
+      return idx >= 0 ? this.visibleClasses[idx] : null;
+    },
+    pageTitle() {
+      if (this.page === this.pageCount - 1 && this.visibleClasses.length) return "Help";
+      return "Stats";
+    },
+  },
+  watch: {
+    pageCount(next) {
+      if (this.page >= next) this.page = Math.max(0, next - 1);
+    },
   },
   methods: {
+    goTo(index) {
+      if (index < 0 || index >= this.pageCount) return;
+      this.page = index;
+    },
+    onBack() {
+      if (this.page > 0) {
+        this.page -= 1;
+        return;
+      }
+      this.$router.push({
+        name: "settings",
+        query: this.$route.query,
+      });
+    },
+    onContinue() {
+      if (this.page < this.pageCount - 1) {
+        this.page += 1;
+        return;
+      }
+      this.$emit("close");
+    },
     classMatches(class_obj, classId) {
       if (!class_obj || !classId) return false;
       if (class_obj._class_id === classId) return true;
       if (class_obj.id === classId || class_obj.ref === classId) return true;
-      if (typeof class_obj.id === "string" && (class_obj.id.endsWith("/" + classId) || class_obj.id.endsWith("~" + classId))) {
+      if (
+        typeof class_obj.id === "string" &&
+        (class_obj.id.endsWith("/" + classId) || class_obj.id.endsWith("~" + classId))
+      ) {
         return true;
       }
-      if (typeof class_obj.ref === "string" && (class_obj.ref.endsWith("/" + classId) || class_obj.ref === classId)) {
+      if (
+        typeof class_obj.ref === "string" &&
+        (class_obj.ref.endsWith("/" + classId) || class_obj.ref === classId)
+      ) {
         return true;
       }
       return false;
@@ -132,6 +215,7 @@ export default {
       return buildGraphs(list || [], this.filters, this.active);
     },
     process(payload) {
+      this.load_error = false;
       this.unavailable = !!payload?.unavailable;
       this.classes = (payload?.classes || []).map((cls) => ({
         ...cls,
@@ -144,6 +228,7 @@ export default {
       this.is_ready = false;
       this.classes = [];
       this.unavailable = false;
+      this.load_error = false;
       this.$store
         .fetch_teacher_stats()
         .then((data) => {
@@ -151,6 +236,7 @@ export default {
         })
         .catch((err) => {
           new ErrorToast("Failed to get class statistics", err, 5000);
+          this.load_error = true;
           this.is_ready = true;
         });
     },
@@ -160,3 +246,12 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.stats_class_heading {
+  margin-bottom: calc(var(--padding-overlay-input) / 2);
+}
+.overlay_contents > .stats_alert {
+  margin-bottom: calc(var(--padding-overlay-input) / 2);
+}
+</style>