diff --git a/app/pages/classroom.vue b/app/pages/classroom.vue
index 5284b96..6d088fd 100644
--- a/app/pages/classroom.vue
+++ b/app/pages/classroom.vue
@@ -156,66 +156,76 @@
     <main v-if="panel==='hub'" class="container" role="main">
       <div class="hub-head">
         <h2 class="h2">Training Mission Hub</h2>
-        <div class="muted">Start with the ICAO alphabet & numbers, then basics, ground, and more.</div>
+        <div class="muted">Master radio communications from basics to emergencies.</div>
       </div>
 
-      <div class="tiles">
-        <div
-            v-for="m in modules"
-            :key="m.id"
-            class="tile"
-            :class="tileClass(m.id)"
-            @click="isModuleUnlocked(m.id) && handleModulePrimary(m.id)"
-        >
-          <div class="tile-media"
-               :style="{ backgroundImage: `url(${m.art})` }">
-            <span v-if="isFreshModule(m.id)" class="tile-badge">
-              <v-icon size="16">mdi-star</v-icon>
-              New briefing
-            </span>
-          </div>
-          <div class="tile-body">
-            <div class="tile-top">
-              <div class="tile-title">
-                <v-icon size="18">mdi-flag-checkered</v-icon>
-                {{ m.title }}
-              </div>
-
-            </div>
-            <div class="muted small">{{ m.subtitle }}</div>
+      <div v-for="track in tracks" :key="track.id" class="track-section">
+        <div class="track-header">
+          <h3 class="track-title">{{ track.title }}</h3>
+          <div class="track-subtitle muted">{{ track.subtitle }}</div>
+          <div class="track-progress">
             <div class="line">
-              <div class="line-fill" :style="{ width: pct(m.id)+'%' }"></div>
-            </div>
-            <div class="tile-progress-meta">
-              <span>{{ doneCount(m.id) }}/{{ m.lessons.length }} lessons</span>
-              <span>{{ moduleHasProgress(m.id) ? avgScore(m.id) + '%' : '—' }} avg</span>
-            </div>
-            <div class="tile-actions">
-              <button
-                  class="btn primary"
-                  :disabled="!isModuleUnlocked(m.id)"
-                  @click="handleModulePrimary(m.id)"
-              >
-                <v-icon size="18">{{ modulePrimaryIcon(m.id) }}</v-icon>
-                {{ modulePrimaryLabel(m.id) }}
-              </button>
-
+              <div class="line-fill" :style="{ width: trackPct(track.id) + '%' }"></div>
             </div>
           </div>
-          <div v-if="!isModuleUnlocked(m.id)" class="tile-overlay">
-            <div class="tile-overlay-inner">
-              <v-icon size="26">mdi-lock-alert</v-icon>
-              <div class="tile-overlay-text">
-                <div class="tile-overlay-title">Clearance pending</div>
-                <div class="tile-overlay-sub">
-                  Complete earlier missions to
-                  <button
-                      type="button"
-                      class="tile-overlay-link"
-                      @click.stop.prevent="attemptUnlockModule(m.id)"
-                  >unlock
-                  </button>
-                  this briefing.
+        </div>
+
+        <div class="tiles">
+          <div
+              v-for="m in track.modules"
+              :key="m.id"
+              class="tile"
+              :class="tileClass(m.id)"
+              @click="isModuleUnlocked(m.id) && handleModulePrimary(m.id)"
+          >
+            <div class="tile-media"
+                 :style="{ backgroundImage: `url(${m.art})` }">
+              <span v-if="isFreshModule(m.id)" class="tile-badge">
+                <v-icon size="16">mdi-star</v-icon>
+                New briefing
+              </span>
+            </div>
+            <div class="tile-body">
+              <div class="tile-top">
+                <div class="tile-title">
+                  <v-icon size="18">mdi-flag-checkered</v-icon>
+                  {{ m.title }}
+                </div>
+              </div>
+              <div class="muted small">{{ m.subtitle }}</div>
+              <div class="line">
+                <div class="line-fill" :style="{ width: pct(m.id)+'%' }"></div>
+              </div>
+              <div class="tile-progress-meta">
+                <span>{{ doneCount(m.id) }}/{{ m.lessons.length }} lessons</span>
+                <span>{{ moduleHasProgress(m.id) ? avgScore(m.id) + '%' : '—' }} avg</span>
+              </div>
+              <div class="tile-actions">
+                <button
+                    class="btn primary"
+                    :disabled="!isModuleUnlocked(m.id)"
+                    @click="handleModulePrimary(m.id)"
+                >
+                  <v-icon size="18">{{ modulePrimaryIcon(m.id) }}</v-icon>
+                  {{ modulePrimaryLabel(m.id) }}
+                </button>
+              </div>
+            </div>
+            <div v-if="!isModuleUnlocked(m.id)" class="tile-overlay">
+              <div class="tile-overlay-inner">
+                <v-icon size="26">mdi-lock-alert</v-icon>
+                <div class="tile-overlay-text">
+                  <div class="tile-overlay-title">Clearance pending</div>
+                  <div class="tile-overlay-sub">
+                    Complete earlier missions to
+                    <button
+                        type="button"
+                        class="tile-overlay-link"
+                        @click.stop.prevent="attemptUnlockModule(m.id)"
+                    >unlock
+                    </button>
+                    this briefing.
+                  </div>
                 </div>
               </div>
             </div>
@@ -1318,7 +1328,7 @@ import {useApi} from '~/composables/useApi'
 import {useAuthStore} from '~/stores/auth'
 import {createDefaultLearnConfig} from '~~/shared/learn/config'
 import type {LearnConfig, LearnProgress, LearnState} from '~~/shared/learn/config'
-import {learnModules, seedFullFlightScenario} from '~~/shared/data/learnModules'
+import {learnModules, learnTracks, seedFullFlightScenario} from '~~/shared/data/learnModules'
 import {
   createBaseScenario,
   digitsToWords,
@@ -1327,7 +1337,7 @@ import {
   altitudeToWords,
   minutesToWords
 } from '~~/shared/learn/scenario'
-import type {BlankWidth, Frequency, Lesson, LessonField, ModuleDef, Scenario} from '~~/shared/learn/types'
+import type {BlankWidth, Frequency, Lesson, LessonField, ModuleDef, Scenario, TrackDef} from '~~/shared/learn/types'
 import {loadPizzicatoLite} from '~~/shared/utils/pizzicatoLite'
 import type {PizzicatoLite} from '~~/shared/utils/pizzicatoLite'
 import {createNoiseGenerators, getReadabilityProfile} from '~~/shared/utils/radioEffects'
@@ -1422,7 +1432,8 @@ function tightenedThreshold(length: number, base: number): number {
   return Math.max(base, 0.97)
 }
 
-const modules = shallowRef<ModuleDef[]>(learnModules)
+const tracks = shallowRef<TrackDef[]>(learnTracks)
+const modules = computed<ModuleDef[]>(() => tracks.value.flatMap(t => t.modules))
 
 type LessonSearchHit = {
   module: ModuleDef
@@ -3766,6 +3777,15 @@ function pct(modId: string) {
   return Math.round((doneCount(modId) / module.lessons.length) * 100)
 }
 
+function trackPct(trackId: string): number {
+  const track = tracks.value.find(t => t.id === trackId)
+  if (!track) return 0
+  const total = track.modules.reduce((sum, m) => sum + m.lessons.length, 0)
+  if (total === 0) return 0
+  const done = track.modules.reduce((sum, m) => sum + doneCount(m.id), 0)
+  return Math.round((done / total) * 100)
+}
+
 function moduleNumber(modId: string): number {
   const index = modules.value.findIndex(module => module.id === modId)
   return index >= 0 ? index + 1 : 0
@@ -5330,6 +5350,35 @@ onMounted(() => {
   margin: 6px 0 10px
 }
 
+.track-section {
+  margin-bottom: 2.5rem;
+}
+
+.track-header {
+  margin-bottom: 1rem;
+}
+
+.track-title {
+  font-size: 1.15rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: var(--text-primary, #e0e0e0);
+}
+
+.track-subtitle {
+  font-size: 0.85rem;
+  margin-top: 0.15rem;
+}
+
+.track-progress {
+  margin-top: 0.5rem;
+  max-width: 300px;
+}
+
+.track-progress .line {
+  height: 3px;
+}
+
 .tiles {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));