diff --git a/app/composables/useStudentClasses.ts b/app/composables/useStudentClasses.ts
new file mode 100644
index 0000000..ef8961e
--- /dev/null
+++ b/app/composables/useStudentClasses.ts
@@ -0,0 +1,111 @@
+import { useCurrentStudent } from './useCurrentStudent'
+
+export type ClassForm = {
+  id: number
+  order: number
+  startDate: string
+  endDate: string | null
+  published: boolean
+  formGroup: number
+  title: string
+  completed: boolean
+}
+
+export type ClassFormGroup = {
+  id: number
+  startDate: string
+  endDate: string | null
+  forms: ClassForm[]
+}
+
+export type StudentClass = {
+  id: string
+  joinToken: string
+  name: string
+  isFriendsOfMLK: boolean
+  activeFormGroups: ClassFormGroup[]
+  ticketCount: number
+}
+
+const MLK_CLASS_NAME = 'Friends of MLK'
+
+export const useStudentClasses = () => {
+  const { student } = useCurrentStudent()
+
+  const classes = useState<StudentClass[]>('studentClasses', () => [])
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+
+  /**
+   * Fetch all classes for the active student, sorted alphabetically
+   * with Friends of MLK always pinned to the bottom.
+   */
+  const loadClasses = async () => {
+    if (!student.value?.id) {
+      classes.value = []
+      return
+    }
+
+    loading.value = true
+    error.value = null
+
+    try {
+      const raw = await $fetch<StudentClass[]>('/api/reader/classes', {
+        query: { studentId: student.value.id },
+      })
+
+      classes.value = [...raw].sort((a, b) => {
+        if (a.isFriendsOfMLK) return 1
+        if (b.isFriendsOfMLK) return -1
+        return a.name.localeCompare(b.name)
+      })
+    } catch (e: any) {
+      console.error('Failed to load student classes:', e)
+      error.value = e?.statusMessage ?? 'Failed to load classes'
+      classes.value = []
+    } finally {
+      loading.value = false
+    }
+  }
+
+  /** Grand total of raffle tickets across all classes */
+  const totalTickets = computed(() =>
+    classes.value.reduce((sum, cls) => sum + cls.ticketCount, 0)
+  )
+
+  /** Total active forms across all classes */
+  const totalActiveForms = computed(() =>
+    classes.value.reduce(
+      (sum, cls) =>
+        sum + cls.activeFormGroups.reduce((s2, fg) => s2 + fg.forms.length, 0),
+      0
+    )
+  )
+
+  /**
+   * Mark a form as completed locally so the UI updates instantly without
+   * waiting for a full reload.
+   */
+  const markFormCompleted = (formId: number) => {
+    for (const cls of classes.value) {
+      for (const fg of cls.activeFormGroups) {
+        const form = fg.forms.find((f) => f.id === formId)
+        if (form && !form.completed) {
+          form.completed = true
+          cls.ticketCount++
+          return
+        }
+      }
+    }
+  }
+
+  return {
+    classes,
+    loading,
+    error,
+    loadClasses,
+    totalTickets,
+    totalActiveForms,
+    markFormCompleted,
+  }
+}
diff --git a/app/pages/reader/forms.vue b/app/pages/reader/forms.vue
index 5a7f48c..b519fae 100644
--- a/app/pages/reader/forms.vue
+++ b/app/pages/reader/forms.vue
@@ -2,88 +2,41 @@
 definePageMeta({ ssr: false })
 
 const { student, settings, updateExp, restoreStudent } = useCurrentStudent()
-const { FormGroup, loadActiveFormGroup } = useCurrentFormGroup()
-const { tickets, completedFormIds, logFormSubmission, logSubmissionResponse, loadProgress } = useCurrentStudentProgress()
+const { classes, loading, loadClasses, totalTickets, markFormCompleted } = useStudentClasses()
+const { logFormSubmission, logSubmissionResponse } = useCurrentStudentProgress()
 
+// ── Initialise ──────────────────────────────────────────────────────────────
 const dataLoaded = ref(false)
 
 onMounted(async () => {
-  if (!student.value) {
-    await restoreStudent()
-  }
-  if (!student.value) {
-    await navigateTo('/reader/profile')
-    return
-  }
-  await loadActiveFormGroup()
-  await loadProgress()
+  if (!student.value) await restoreStudent()
+  if (!student.value) { await navigateTo('/reader/profile'); return }
+  await loadClasses()
   dataLoaded.value = true
 })
 
-const stats = computed(() => ({
-  xp: student.value ? student.value.exp : 0,
-  tickets: tickets.value? tickets.value : 0,
-}))
-
-const themeClass = computed(() => {
-  const d = settings.value.dyslexiaFont ? 'dyslexia-font' : ''
-  return `reader-app ${d}`.trim()
-})
-
-const currentFormComponentsWithVideo = computed(() => {
-  if (!activeForm.value?.id) return []
-  return FormGroup.value.formComponents[activeForm.value.id] || []
-})
+// ── Per-class form-component cache ───────────────────────────────────────────
+const formComponents = ref<Record<number, any[]>>({})
 
-function embedURL(rawUrl: string) {
-  const match = rawUrl.match(/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/i)
-  if (match && match[1]) {
-    return `https://www.youtube.com/embed/${match[1]}`
+async function ensureComponents(formId: number) {
+  if (formComponents.value[formId]) return
+  try {
+    const comps = await $fetch<any[]>('/api/formComponent', { query: { form: formId } })
+    formComponents.value[formId] = Array.isArray(comps) ? comps : []
+  } catch {
+    formComponents.value[formId] = []
   }
-  return rawUrl
 }
 
-const firstVideoComponent = computed(() => {
-  return currentFormComponentsWithVideo.value.find(c => (c as any).questionType === 'video') as any || null
-})
-
-const firstVideoUrl = computed(() => {
-  const vc = firstVideoComponent.value
-  if (!vc) return null
-  const rawUrl = vc.questionOptions?.url || null
-  return rawUrl ? embedURL(rawUrl) : null
-})
-
-const firstVideoContext = computed(() => {
-  const vc = firstVideoComponent.value
-  if (!vc) return ''
-  return vc.questionText || ''
-})
-
-const firstVideoContextEs = computed(() => {
-  const vc = firstVideoComponent.value
-  if (!vc) return ''
-  return vc.questionOptions?.textEs || ''
-})
-
-const currentFormComponents = computed(() => {
-  const components = currentFormComponentsWithVideo.value
-  
-  // Find the first video component (the reading resource)
-  const firstVideoIndex = components.findIndex(c => c.questionType === 'video')
-  let filteredComponents = [...components]
-  
-  // Always remove the first video component so it doesn't appear in the form flow itself, only pre-form stage
-  if (firstVideoIndex !== -1) {
-    filteredComponents.splice(firstVideoIndex, 1)
-  }
+// ── Stats ────────────────────────────────────────────────────────────────────
+const stats = computed(() => ({ xp: student.value?.exp ?? 0, tickets: totalTickets.value }))
 
-  return filteredComponents
+const themeClass = computed(() => {
+  const d = settings.value.dyslexiaFont ? 'dyslexia-font' : ''
+  return `reader-app ${d}`.trim()
 })
 
-const currentComponent = computed(() => currentFormComponents.value[currentComponentID.value])
-
-// Click badge animations
+// ── Badge click animations ────────────────────────────────────────────────────
 const xpClicked     = ref(false)
 const ticketClicked = ref(false)
 const burstCoins    = ref<{id:number;tx:number;ty:number}[]>([])
@@ -102,68 +55,81 @@ function triggerTicketClick() {
   setTimeout(() => { ticketClicked.value = false; flyTickets.value = [] }, 1000)
 }
 
-// Flow state
+// ── Collapsed state for each class section ────────────────────────────────────
+const collapsedClasses = ref<Record<string, boolean>>({})
+function toggleClass(classId: string) {
+  collapsedClasses.value[classId] = !collapsedClasses.value[classId]
+}
+
+// ── Active form flow ──────────────────────────────────────────────────────────
 const activeForm         = ref<any>(null)
-const preFormStep        = ref<string|null>(null)   // 'ask' | 'has-book' | 'no-book' | null
+const activeClassId      = ref<string | null>(null)
+const preFormStep        = ref<string|null>(null)   // 'ask' | 'no-book' | null
 const hasOwnBook         = ref(false)
-const currentComponentID        = ref(0)
+const currentComponentID = ref(0)
 const answers            = ref<Record<number,string>>({})
 const feedbackVisible    = ref<Record<number,boolean>>({})
 
+const currentFormComponents = computed(() => {
+  if (!activeForm.value?.id) return []
+  const all = formComponents.value[activeForm.value.id] || []
+  const firstVideoIdx = all.findIndex((c: any) => c.questionType === 'video')
+  const filtered = [...all]
+  if (firstVideoIdx !== -1) filtered.splice(firstVideoIdx, 1)
+  return filtered
+})
+
+const currentComponent = computed(() => currentFormComponents.value[currentComponentID.value])
+
+const firstVideoComponent = computed(() => {
+  if (!activeForm.value?.id) return null
+  const all = formComponents.value[activeForm.value.id] || []
+  return all.find((c: any) => c.questionType === 'video') || null
+})
+
+const firstVideoUrl = computed(() => {
+  const vc = firstVideoComponent.value
+  if (!vc) return null
+  const raw = vc.questionOptions?.url || null
+  return raw ? embedURL(raw) : null
+})
+const firstVideoContext = computed(() => firstVideoComponent.value?.questionText || '')
+const firstVideoContextEs = computed(() => firstVideoComponent.value?.questionOptions?.textEs || '')
+
+function embedURL(rawUrl: string) {
+  const match = rawUrl.match(/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/i)
+  return match?.[1] ? `https://www.youtube.com/embed/${match[1]}` : rawUrl
+}
+
 const isCurrentComponentCorrect = computed(() => {
   const q = currentComponent.value
   if (!q || !answers.value[q.id]) return true
   if (q.questionType !== 'mcq') return true
   const options = q.questionOptions as any
-  if (!options || !options.choices) return true
-  const choiceIndex = Number(answers.value[q.id])
-  const choice = options.choices[choiceIndex]
+  if (!options?.choices) return true
+  const choice = options.choices[Number(answers.value[q.id])]
   return choice ? choice.correct : false
 })
-
 const correctAnswerText = computed(() => {
   const q = currentComponent.value
   if (!q || q.questionType !== 'mcq') return ''
   const options = q.questionOptions as any
-  if (!options || !options.choices) return ''
-  const correctChoice = options.choices.find((c: any) => c.correct)
-  return correctChoice ? correctChoice.text : ''
-})
-
-const feedbackReferenceText = computed(() => {
-  const q = currentComponent.value
-  if (!q) return ''
-  const options = q.questionOptions as any
-  return options?.reference || ''
+  return options?.choices?.find((c: any) => c.correct)?.text ?? ''
 })
+const feedbackReferenceText   = computed(() => (currentComponent.value?.questionOptions as any)?.reference   || '')
+const feedbackReferenceTextEs = computed(() => (currentComponent.value?.questionOptions as any)?.referenceEs || '')
 
-const feedbackReferenceTextEs = computed(() => {
-  const q = currentComponent.value
-  if (!q) return ''
-  const options = q.questionOptions as any
-  return options?.referenceEs || ''
-})
-
-// Raffle reward
-const showRaffleReward   = ref(false)
-const ticketDropped      = ref(false)
-const ticketOverBox      = ref(false)
-const ticketStyle        = ref<Record<string,string>>({})
-let touchStartY = 0
-
-function startChallenge(form: any) {
+async function startChallenge(form: any, classId: string) {
+  await ensureComponents(form.id)
   activeForm.value      = form
+  activeClassId.value   = classId
   preFormStep.value     = 'ask'
-  currentComponentID.value     = 0
+  currentComponentID.value = 0
   feedbackVisible.value = {}
-  //load answers
   answers.value         = {}
 }
 
-function preFormSkipToForm() {
-  hasOwnBook.value  = false
-  preFormStep.value = null
-}
+function preFormSkipToForm() { hasOwnBook.value = false; preFormStep.value = null }
 
 function checkAnswer() {
   const q = currentFormComponents.value[currentComponentID.value]
@@ -172,22 +138,22 @@ function checkAnswer() {
 
 function nextStep() {
   const qs = currentFormComponents.value
-  if (currentComponentID.value < qs.length - 1) {
-    currentComponentID.value++
-  } else {
-    submitChallenge()
-  }
+  if (currentComponentID.value < qs.length - 1) { currentComponentID.value++ }
+  else { submitChallenge() }
 }
 
+// ── Raffle reward ─────────────────────────────────────────────────────────────
+const showRaffleReward = ref(false)
+const ticketDropped    = ref(false)
+const ticketOverBox    = ref(false)
+const ticketStyle      = ref<Record<string,string>>({})
+let touchStartY = 0
+
 async function submitChallenge() {
   const formId = activeForm.value.id
-  
-  // Persist completion and XP
-  const submission  = await logFormSubmission(formId)
+  await logFormSubmission(formId)
   await updateExp(100)
-
-  // grab newly posted submission ID
-  const submissionID = Number(submission?.id)
+  markFormCompleted(formId)
 
   showRaffleReward.value = true
   ticketDropped.value    = false
@@ -195,7 +161,8 @@ async function submitChallenge() {
   ticketStyle.value      = {}
   setTimeout(() => {
     activeForm.value      = null
-    currentComponentID.value     = 0
+    activeClassId.value   = null
+    currentComponentID.value = 0
     feedbackVisible.value = {}
     answers.value         = {}
   }, 500)
@@ -218,9 +185,9 @@ function onTicketTouchMove(e: TouchEvent) {
 function onTicketTouchEnd() { ticketOverBox.value ? onTicketDrop() : (ticketStyle.value = {}) }
 
 function getBadgeClass(type: string) {
-  if (type === 'text')    return 'bg-blue-100 text-blue-700 border-2 border-blue-200'
-  if (type === 'mcq')     return 'bg-yellow-100 text-yellow-700 border-2 border-yellow-200'
-  if (type === 'video')   return 'bg-pink-100 text-pink-600 border-2 border-pink-200'
+  if (type === 'text')  return 'bg-blue-100 text-blue-700 border-2 border-blue-200'
+  if (type === 'mcq')   return 'bg-yellow-100 text-yellow-700 border-2 border-yellow-200'
+  if (type === 'video') return 'bg-pink-100 text-pink-600 border-2 border-pink-200'
   return 'bg-gray-100 text-gray-500 border-2 border-gray-200'
 }
 </script>
@@ -243,7 +210,7 @@ function getBadgeClass(type: string) {
              style="border-color:rgba(245,158,11,0.3)"
              :class="(xpClicked || ticketClicked) ? 'scale-90 transition-transform duration-100' : 'transition-transform duration-100'"
              @click="triggerXpClick">
-             <span class="text-lg" :class="xpClicked ? 'animate-star-spin' : ''">🪙</span>
+          <span class="text-lg" :class="xpClicked ? 'animate-star-spin' : ''">🪙</span>
           <span class="font-heading font-bold text-amber-600">{{ stats.xp }}</span>
           <span class="text-gray-300">|</span>
           <span class="text-lg" :class="ticketClicked ? 'animate-ticket-wobble' : ''" @click.stop="triggerTicketClick">🎟️</span>
@@ -251,16 +218,12 @@ function getBadgeClass(type: string) {
           <span v-for="c in burstCoins" :key="c.id" class="absolute text-sm animate-coin-burst"
                 :style="`--tx:${c.tx}px;--ty:${c.ty}px;left:50%;top:50%;`">🪙</span>
           <Transition name="box-pop">
-            <span 
-              v-if="ticketClicked"
-              class="absolute -bottom-15 left-1/2 -translate-x-1/2 text-2xl animate-box-shake pointer-events-none">
-              📦
-            </span>
+            <span v-if="ticketClicked" class="absolute -bottom-15 left-1/2 -translate-x-1/2 text-2xl animate-box-shake pointer-events-none">📦</span>
           </Transition>
           <span v-for="id in flyTickets" :key="id" class="absolute text-lg animate-ticket-fly pointer-events-none"
                 style="left:50%;top:50%;transform:translateX(-50%) translateY(-50%)">🎟️</span>
         </div>
-        <!-- Settings / Home -->
+        <!-- Settings -->
         <NuxtLink to="/reader/settings"
           class="w-14 h-14 bg-white/90 backdrop-blur-md rounded-xl flex items-center justify-center text-2xl border-2 border-white shadow-xl hover:scale-110 active:scale-95 transition-all"
           style="text-decoration:none">⚙️</NuxtLink>
@@ -269,60 +232,124 @@ function getBadgeClass(type: string) {
 
     <!-- ── MAIN ── -->
     <main class="max-w-4xl mx-auto min-h-[60vh]">
-      <!-- Loading state -->
-      <div v-if="!dataLoaded" class="flex flex-col items-center justify-center min-h-[40vh] gap-4">
+      <!-- Loading -->
+      <div v-if="!dataLoaded || loading" class="flex flex-col items-center justify-center min-h-[40vh] gap-4">
         <div class="text-6xl animate-bounce">📝</div>
         <p class="font-heading text-xl font-bold text-gray-400">Loading forms...</p>
       </div>
 
       <section v-else class="space-y-6">
-
         <div class="mb-2">
-          <h2 class="font-heading text-4xl font-bold mb-4" style="color:var(--brand-dark)">Daily Forms 📝</h2>
+          <h2 class="font-heading text-4xl font-bold mb-1" style="color:var(--brand-dark)">Daily Forms 📝</h2>
+          <p class="text-gray-500 font-medium text-sm">Your reading challenges, organized by class.</p>
         </div>
 
-        <!-- ── FORMS LIST ── -->
-        <div v-if="!activeForm" class="grid gap-3">
-          <div
-            v-for="form in FormGroup.forms" :key="form.id"
-            @click="!completedFormIds.includes(form.id) && startChallenge(form)"
-            class="premium-card p-5 flex items-center justify-between group transition-all"
-            :class="[
-              completedFormIds.includes(form.id) ? 'cursor-default' : 'cursor-pointer hover:scale-[1.01]',
-              completedFormIds.includes(form.id) ? '' : (new Date(form.startDate) < new Date() ? 'hover:!border-amber-400' : '')
-            ]"
-            :style="completedFormIds.includes(form.id)
-              ? 'border-color:rgba(45,212,191,0.4); background:rgba(45,212,191,0.05)'
-              : (new Date(form.startDate) < new Date() ? 'border-color:#fcd34d; background:rgba(251,191,36,0.05)' : '')"
-          >
-            <div class="flex items-center gap-5">
-              <div
-                class="w-14 h-14 rounded-xl flex flex-col items-center justify-center font-heading font-bold transition text-sm"
-                :style="completedFormIds.includes(form.id)
-                  ? 'background:var(--brand-mint); color:white'
-                  : (new Date(form.startDate) < new Date())
-                    ? 'background:#f59e0b; color:white'
-                    : 'background:rgba(224,96,77,0.1); color:var(--brand-indigo)'"
-              >
-                <span class="text-[9px] uppercase leading-none">{{ new Date(form.startDate).toLocaleDateString('en-US', {weekday:'short'}) }}</span>
-                <span class="text-lg font-black leading-tight">{{ new Date(form.startDate).getDate() }}</span>
+        <!-- ── CLASSES LIST ── -->
+        <div v-if="!activeForm" class="space-y-5">
+          <!-- Empty state: no classes at all -->
+          <div v-if="classes.length === 0" class="premium-card p-10 text-center space-y-3">
+            <div class="text-6xl">🏫</div>
+            <h3 class="font-heading text-2xl font-bold" style="color:var(--brand-dark)">No Classes Yet</h3>
+            <p class="text-gray-500 font-medium">You haven't been added to any classes yet. Check back later!</p>
+          </div>
+
+          <!-- Per-class section -->
+          <div v-for="cls in classes" :key="cls.id" class="class-section">
+            <!-- Class header bar -->
+            <button
+              class="class-header w-full flex items-center justify-between px-5 py-4 rounded-2xl transition-all duration-200 group"
+              :class="cls.isFriendsOfMLK ? 'class-header--mlk' : 'class-header--normal'"
+              @click="toggleClass(cls.id)"
+            >
+              <div class="flex items-center gap-3 min-w-0">
+                <!-- Chevron -->
+                <svg
+                  class="w-5 h-5 shrink-0 transition-transform duration-200"
+                  :class="collapsedClasses[cls.id] ? '' : 'rotate-90'"
+                  fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"
+                >
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
+                </svg>
+                <!-- Class name -->
+                <span class="font-heading font-bold text-xl truncate" :class="cls.isFriendsOfMLK ? 'text-white' : ''">
+                  {{ cls.name }}
+                </span>
               </div>
-              <div>
-                <h4 class="font-heading text-lg font-bold" style="color:var(--brand-dark)">{{ form.title }}</h4>
-                <div class="flex items-center gap-2 mt-0.5">
-                  <p class="text-xs font-bold text-gray-400">
-                    {{ new Date(form.startDate).toLocaleDateString('en-US', {weekday:'long'}) }} • 
-                    {{ (FormGroup.formComponents[form.id] || []).length }} Steps
-                  </p>
-                  <span v-if="completedFormIds.includes(form.id)" class="text-xs font-black px-2 py-0.5 rounded-full" style="color:var(--brand-mint); background:rgba(45,212,191,0.15)">✓ Done</span>
+              <!-- Ticket count (right-justified) -->
+              <div class="flex items-center gap-1.5 shrink-0 ml-4">
+                <span class="text-lg">🎟️</span>
+                <span
+                  class="font-heading font-black text-xl tabular-nums"
+                  :class="cls.isFriendsOfMLK ? 'text-white' : ''"
+                  style="color: inherit"
+                >{{ cls.ticketCount }}</span>
+                <span
+                  class="text-xs font-bold opacity-70 hidden sm:block"
+                  :class="cls.isFriendsOfMLK ? 'text-white' : 'text-gray-500'"
+                >tickets</span>
+              </div>
+            </button>
+
+            <!-- Forms for this class -->
+            <Transition name="class-expand">
+              <div v-if="!collapsedClasses[cls.id]" class="mt-2 space-y-2 pl-1 pr-1">
+
+                <!-- No active form groups -->
+                <div
+                  v-if="cls.activeFormGroups.length === 0 || cls.activeFormGroups.every(fg => fg.forms.length === 0)"
+                  class="premium-card px-5 py-4 flex items-center gap-3"
+                  style="background:rgba(245,158,11,0.04); border-color:rgba(245,158,11,0.15);"
+                >
+                  <span class="text-xl">📭</span>
+                  <p class="text-sm font-medium text-gray-400">No active forms right now. Check back later!</p>
                 </div>
+
+                <!-- Form cards -->
+                <template v-for="fg in cls.activeFormGroups" :key="fg.id">
+                  <div
+                    v-for="form in fg.forms" :key="form.id"
+                    @click="!form.completed && startChallenge(form, cls.id)"
+                    class="premium-card p-5 flex items-center justify-between group transition-all"
+                    :class="[
+                      form.completed ? 'cursor-default' : 'cursor-pointer hover:scale-[1.01]',
+                      form.completed ? '' : (new Date(form.startDate) < new Date() ? 'hover:!border-amber-400' : '')
+                    ]"
+                    :style="form.completed
+                      ? 'border-color:rgba(45,212,191,0.4); background:rgba(45,212,191,0.05)'
+                      : (new Date(form.startDate) < new Date() ? 'border-color:#fcd34d; background:rgba(251,191,36,0.05)' : '')"
+                  >
+                    <div class="flex items-center gap-5">
+                      <!-- Day badge -->
+                      <div
+                        class="w-14 h-14 rounded-xl flex flex-col items-center justify-center font-heading font-bold transition text-sm"
+                        :style="form.completed
+                          ? 'background:var(--brand-mint); color:white'
+                          : (new Date(form.startDate) < new Date())
+                            ? 'background:#f59e0b; color:white'
+                            : 'background:rgba(224,96,77,0.1); color:var(--brand-indigo)'"
+                      >
+                        <span class="text-[9px] uppercase leading-none">{{ new Date(form.startDate).toLocaleDateString('en-US', {weekday:'short'}) }}</span>
+                        <span class="text-lg font-black leading-tight">{{ new Date(form.startDate).getDate() }}</span>
+                      </div>
+                      <div>
+                        <h4 class="font-heading text-lg font-bold" style="color:var(--brand-dark)">{{ form.title }}</h4>
+                        <div class="flex items-center gap-2 mt-0.5">
+                          <p class="text-xs font-bold text-gray-400">
+                            {{ new Date(form.startDate).toLocaleDateString('en-US', {weekday:'long'}) }}
+                          </p>
+                          <span v-if="form.completed" class="text-xs font-black px-2 py-0.5 rounded-full" style="color:var(--brand-mint); background:rgba(45,212,191,0.15)">✓ Done</span>
+                        </div>
+                      </div>
+                    </div>
+                    <div v-if="!form.completed">
+                      <button class="btn-fun text-white px-5 py-2 rounded-xl font-bold text-sm"
+                              :style="(new Date(form.startDate) < new Date()) ? 'background:#f59e0b' : 'background:var(--brand-indigo)'">Start 🚀</button>
+                    </div>
+                    <div v-else><span class="text-2xl">✅</span></div>
+                  </div>
+                </template>
               </div>
-            </div>
-            <div v-if="!completedFormIds.includes(form.id)">
-              <button class="btn-fun text-white px-5 py-2 rounded-xl font-bold text-sm"
-                      :style="(new Date(form.startDate) < new Date()) ? 'background:#f59e0b' : 'background:var(--brand-indigo)'">Start 🚀</button>
-            </div>
-            <div v-else><span class="text-2xl">✅</span></div>
+            </Transition>
           </div>
         </div>
 
@@ -344,7 +371,6 @@ function getBadgeClass(type: string) {
           </div>
         </div>
 
-
         <!-- ── PRE-FORM: No book (watch video) ── -->
         <div v-else-if="activeForm && preFormStep === 'no-book'" class="space-y-4">
           <div class="premium-card p-5 bg-white/60 text-center space-y-3">
@@ -352,12 +378,7 @@ function getBadgeClass(type: string) {
             <p class="text-gray-500 font-medium text-sm">Use this provided resource, then we'll do the form.</p>
             <div v-if="firstVideoContext" class="p-5 rounded-2xl bg-amber-50 border border-amber-100 space-y-2 text-left max-w-2xl mx-auto">
               <p class="text-xl font-heading font-bold leading-snug" style="color:var(--brand-dark)"><span v-html="firstVideoContext"></span></p>
-              <p
-                v-if="settings.language === 'es' && firstVideoContextEs"
-                class="text-base italic text-gray-500 leading-snug border-t border-amber-200 pt-2"
-              >
-                <span v-html="firstVideoContextEs"></span>
-              </p>
+              <p v-if="settings.language === 'es' && firstVideoContextEs" class="text-base italic text-gray-500 leading-snug border-t border-amber-200 pt-2"><span v-html="firstVideoContextEs"></span></p>
             </div>
             <div class="max-w-2xl mx-auto aspect-video w-full rounded-2xl overflow-hidden shadow-lg border-4 border-white">
               <iframe v-if="firstVideoUrl" class="w-full h-full" :src="firstVideoUrl" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
@@ -402,11 +423,8 @@ function getBadgeClass(type: string) {
                   <!-- Context block -->
                   <div v-if="currentComponent.questionType === 'context'" class="p-5 rounded-2xl bg-amber-50 border border-amber-100 space-y-2">
                     <p class="text-xl font-heading font-bold leading-snug" style="color:var(--brand-dark)"><span v-html="currentComponent.questionText"></span></p>
-                    <!-- Spanish translation shown below English when language is set to Spanish -->
-                    <p
-                      v-if="settings.language === 'es' && (currentComponent.questionOptions as any)?.textEs"
-                      class="text-base italic text-gray-500 leading-snug border-t border-amber-200 pt-2"
-                    >
+                    <p v-if="settings.language === 'es' && (currentComponent.questionOptions as any)?.textEs"
+                       class="text-base italic text-gray-500 leading-snug border-t border-amber-200 pt-2">
                       <span v-html="(currentComponent.questionOptions as any).textEs"></span>
                     </p>
                   </div>
@@ -415,10 +433,8 @@ function getBadgeClass(type: string) {
                   <div v-else-if="currentComponent.questionType === 'video'" class="space-y-3">
                     <div v-if="currentComponent.questionText" class="p-5 rounded-2xl bg-amber-50 border border-amber-100 space-y-2">
                       <p class="text-xl font-heading font-bold leading-snug" style="color:var(--brand-dark)"><span v-html="currentComponent.questionText"></span></p>
-                      <p
-                        v-if="settings.language === 'es' && (currentComponent.questionOptions as any)?.textEs"
-                        class="text-base italic text-gray-500 leading-snug border-t border-amber-200 pt-2"
-                      >
+                      <p v-if="settings.language === 'es' && (currentComponent.questionOptions as any)?.textEs"
+                         class="text-base italic text-gray-500 leading-snug border-t border-amber-200 pt-2">
                         <span v-html="(currentComponent.questionOptions as any).textEs"></span>
                       </p>
                     </div>
@@ -430,11 +446,8 @@ function getBadgeClass(type: string) {
                   <!-- Text / MCQ question -->
                   <div v-else class="space-y-1">
                     <h4 class="text-xl font-heading font-bold" style="color:var(--brand-dark)">&quot;<span v-html="currentComponent.questionText"></span>&quot;</h4>
-                    <!-- Spanish translation shown below English when language is set to Spanish -->
-                    <p
-                      v-if="settings.language === 'es' && (currentComponent.questionOptions as any)?.textEs"
-                      class="text-base italic text-gray-500"
-                    >
+                    <p v-if="settings.language === 'es' && (currentComponent.questionOptions as any)?.textEs"
+                       class="text-base italic text-gray-500">
                       &quot;<span v-html="(currentComponent.questionOptions as any).textEs"></span>&quot;
                     </p>
                   </div>
@@ -477,10 +490,10 @@ function getBadgeClass(type: string) {
 
                     <!-- Feedback -->
                     <div v-else class="p-6 rounded-[2rem] animate-pop-bounce border-2"
-                         :style="isCurrentComponentCorrect 
-                           ? 'background:rgba(45,212,191,0.1); border-color:rgba(45,212,191,0.3)' 
+                         :style="isCurrentComponentCorrect
+                           ? 'background:rgba(45,212,191,0.1); border-color:rgba(45,212,191,0.3)'
                            : 'background:rgba(245,158,11,0.1); border-color:rgba(245,158,11,0.3)'">
-                      <div class="font-black mb-2 uppercase tracking-widest flex items-center gap-2" 
+                      <div class="font-black mb-2 uppercase tracking-widest flex items-center gap-2"
                            :style="isCurrentComponentCorrect ? 'color:var(--brand-mint)' : 'color:var(--brand-gold)'">
                         {{ isCurrentComponentCorrect ? '✨ Great job!' : '💡 Great Try!' }}
                       </div>
@@ -489,12 +502,8 @@ function getBadgeClass(type: string) {
                           <p class="italic"><span v-html="feedbackReferenceText"></span></p>
                           <p v-if="settings.language === 'es' && feedbackReferenceTextEs" class="italic text-gray-500"><span v-html="feedbackReferenceTextEs"></span></p>
                         </template>
-                        <p v-else-if="isCurrentComponentCorrect">
-                          Keep going! You're doing awesome!
-                        </p>
-                        <p v-if="!isCurrentComponentCorrect">
-                          The correct answer was: <span class="font-bold" v-html="correctAnswerText"></span> You'll get it next time!
-                        </p>
+                        <p v-else-if="isCurrentComponentCorrect">Keep going! You're doing awesome!</p>
+                        <p v-if="!isCurrentComponentCorrect">The correct answer was: <span class="font-bold" v-html="correctAnswerText"></span> You'll get it next time!</p>
                       </div>
                     </div>
                   </div>
@@ -505,14 +514,12 @@ function getBadgeClass(type: string) {
                       class="text-gray-400 font-bold hover:text-gray-700 transition text-lg">← Back</button>
                     <div v-else />
                     <div class="flex-grow" />
-                    <!-- Context / Video: always show Continue -->
                     <button
                       v-if="['context','video'].includes(currentComponent.questionType)"
                       @click="nextStep"
                       class="btn-fun text-white px-10 py-3 rounded-2xl font-bold text-lg shadow-lg"
                       style="background:var(--brand-dark)"
                     >{{ currentComponentID < currentFormComponents.length - 1 ? 'Continue ➡️' : 'Finish Challenge! 🎉' }}</button>
-                    <!-- Text/MCQ after answered -->
                     <button
                       v-else-if="feedbackVisible[currentComponent.id]"
                       @click="nextStep"
diff --git a/app/pages/reader/index.vue b/app/pages/reader/index.vue
index 3b76a1a..7d607a3 100644
--- a/app/pages/reader/index.vue
+++ b/app/pages/reader/index.vue
@@ -1,40 +1,35 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { authClient } from '~/utils/auth-client'
-import type { Student, Announcement} from '~~/prisma/generated/client'
-
 definePageMeta({ ssr: false })
 
-// Retrieve the active student.
-const { student, settings: settings, restoreStudent } = useCurrentStudent()
-const { totalFormsInGroup: totalForms, loadActiveFormGroup} = useCurrentFormGroup()
-const { tickets: tickets, loadProgress} = useCurrentStudentProgress()
-await loadActiveFormGroup()
-await loadProgress()
-const checkingStudent = ref(true)
+// ── Student + data loading ────────────────────────────────────────────────────
+const { student, settings, restoreStudent } = useCurrentStudent()
+const { classes, totalTickets, loadClasses } = useStudentClasses()
 
-onMounted(async () => {
-  if (!student.value) {
-    await restoreStudent()
-  }
+const dataLoaded    = ref(false)
+const announcements = ref<any[]>([])
 
-  if (!student.value) {
-    await navigateTo('/reader/profile')
-    return
-  }
-
-  checkingStudent.value = false
+onMounted(async () => {
+  if (!student.value) await restoreStudent()
+  if (!student.value) { await navigateTo('/reader/profile'); return }
+
+  // Load data in parallel — same pattern as forms.vue
+  const [anns] = await Promise.all([
+    $fetch<any[]>('/api/announcement', {
+      query: { active: 'true', studentId: student.value.id },
+    }).catch(() => []),
+    loadClasses(),
+  ])
+  announcements.value = Array.isArray(anns) ? anns : []
+  dataLoaded.value = true
 })
 
-
-// ── Theme class ──
+// ── Theme class ──────────────────────────────────────────────────────────────
 const themeClass = computed(() => {
-  const t = 'light'
   const d = settings.value.dyslexiaFont ? 'dyslexia-font' : ''
-  return `reader-app ${t} ${d}`.trim()
+  return `reader-app light ${d}`.trim()
 })
 
-// ── Click-triggered badge animations ──
+// ── Badge click animations ────────────────────────────────────────────────────
 const xpClicked     = ref(false)
 const ticketClicked = ref(false)
 const burstCoins    = ref<{id:number; tx:number; ty:number}[]>([])
@@ -49,19 +44,14 @@ function triggerXpClick() {
   ]
   setTimeout(() => { xpClicked.value = false; burstCoins.value = [] }, 800)
 }
-
 function triggerTicketClick() {
   ticketClicked.value = true
   flyTickets.value = [Date.now()]
   setTimeout(() => { ticketClicked.value = false; flyTickets.value = [] }, 1000)
 }
 
-//TODO 3
-//Announcement fetch all currently-active announcements
-const { data: announcements } = await useFetch<any[] | null>('/api/announcement?active=true')
-
-//parseContent of announcement
-function parseContent (raw: any): { icon: string; title: string; body: string } {
+// ── Announcements helpers ─────────────────────────────────────────────────────
+function parseContent(raw: any): { icon: string; title: string; body: string } {
   if (raw && typeof raw === 'object') return raw as { icon: string; title: string; body: string }
   if (typeof raw === 'string') {
     try { return JSON.parse(raw) as { icon: string; title: string; body: string } }
@@ -70,26 +60,69 @@ function parseContent (raw: any): { icon: string; title: string; body: string }
   return { icon: '📢', title: '', body: '' }
 }
 
-//fmtDate - converts ISO string to a short, human-readable date e.g. "Apr 12, 2026"
-function fmtDate (iso: string | null) {
+function fmtDate(iso: string | null) {
   if (!iso) return null
   return new Date(iso).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
 }
 
-//mostRecent - the newest active announcement sorted by postDate descending
-const mostRecent = computed(() => {
-  if (!announcements.value?.length) return null
+// ── Per-class announcement partitioning (mirrors forms.vue) ─────────────────
+const collapsedAnnouncementClasses = ref<Record<string, boolean>>({})
+function toggleAnnouncementClass(classId: string) {
+  collapsedAnnouncementClasses.value[classId] = !collapsedAnnouncementClasses.value[classId]
+}
+
+const announcementsByClass = computed(() =>
+  classes.value.map(cls => ({
+    ...cls,
+    classAnnouncements: [...announcements.value]
+      .filter(ann => ann.class === cls.id)
+      .sort((a, b) => new Date(b.postDate).getTime() - new Date(a.postDate).getTime()),
+  }))
+)
+
+// Banner: strictly the most recent announcement across all enrolled classes
+const bannerAnnouncement = computed(() => {
+  if (!announcements.value.length) return null
   return [...announcements.value].sort(
     (a, b) => new Date(b.postDate).getTime() - new Date(a.postDate).getTime()
   )[0]
 })
 
-//Controls the "View All Announcements"
 const showAllAnnouncements = ref(false)
 
-const completionMessage = computed(() => {
-  return ['', 'Nice!', 'Good Job!', 'Great Job!', 'Wow!', 'Awesome!', 'Amazing!'][tickets.value] ?? 'Spectacular!'
-})
+// ── Join a Class modal ────────────────────────────────────────────────────────
+const showJoinModal = ref(false)
+const joinToken     = ref('')
+const joinLoading   = ref(false)
+const joinError     = ref('')
+const joinSuccess   = ref('')
+
+function openJoinModal() {
+  joinToken.value   = ''
+  joinError.value   = ''
+  joinSuccess.value = ''
+  showJoinModal.value = true
+}
+
+async function submitJoin() {
+  if (!student.value?.id || !joinToken.value.trim()) return
+  joinLoading.value = true
+  joinError.value   = ''
+  joinSuccess.value = ''
+  try {
+    const result = await $fetch<{ name: string }>('/api/reader/join-class', {
+      method: 'POST',
+      body: { studentId: student.value.id, joinToken: joinToken.value.trim() },
+    })
+    joinSuccess.value = `You joined "${result.name}"! 🎉`
+    joinToken.value = ''
+    await refreshNuxtData()
+  } catch (e: any) {
+    joinError.value = e?.data?.statusMessage ?? e?.statusMessage ?? 'Class not found. Check the code and try again.'
+  } finally {
+    joinLoading.value = false
+  }
+}
 </script>
 
 <template>
@@ -106,6 +139,19 @@ const completionMessage = computed(() => {
           </span>
           <span class="text-[10px] font-bold uppercase tracking-widest" style="color: var(--brand-mint)">Reading Buddy</span>
         </div>
+
+        <!-- Join a Class button -->
+        <button
+          id="join-class-btn"
+          @click="openJoinModal"
+          class="ml-2 flex items-center gap-1.5 px-3 py-1.5 rounded-xl font-bold text-xs uppercase tracking-wider transition-all hover:scale-105 active:scale-95 shadow-md border-2"
+          style="background:rgba(255,255,255,0.85); backdrop-filter:blur(12px); border-color:rgba(224,96,77,0.3); color:var(--brand-indigo);"
+        >
+          <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
+          </svg>
+          Join Class
+        </button>
       </div>
 
       <!-- XP + Tickets badge + settings -->
@@ -121,7 +167,7 @@ const completionMessage = computed(() => {
           <span class="font-heading font-bold text-amber-600">{{ Number(student?.exp) }}</span>
           <span class="text-gray-300">|</span>
           <span class="text-lg" :class="ticketClicked ? 'animate-ticket-wobble' : ''" @click.stop="triggerTicketClick">🎟️</span>
-          <span class="font-heading font-bold" style="color:var(--brand-mint)">{{ tickets }}</span>
+          <span class="font-heading font-bold" style="color:var(--brand-mint)">{{ totalTickets }}</span>
           <span v-for="c in burstCoins" :key="c.id" class="absolute text-sm animate-coin-burst"
                 :style="`--tx:${c.tx}px;--ty:${c.ty}px;left:50%;top:50%;`">🪙</span>
           <Transition name="box-pop">
@@ -148,7 +194,14 @@ const completionMessage = computed(() => {
 
     <!-- ── MAIN CONTENT ── -->
     <main class="max-w-4xl mx-auto min-h-[60vh]">
-      <section class="h-full flex flex-col justify-between gap-4 pb-4">
+
+      <!-- Loading -->
+      <div v-if="!dataLoaded" class="flex flex-col items-center justify-center min-h-[40vh] gap-4">
+        <div class="text-6xl animate-bounce">📢</div>
+        <p class="font-heading text-xl font-bold text-gray-400">Loading...</p>
+      </div>
+
+      <section v-else class="h-full flex flex-col justify-between gap-4 pb-4">
 
         <!-- Welcome heading -->
         <div class="text-center py-4">
@@ -156,29 +209,26 @@ const completionMessage = computed(() => {
           <p class="text-lg text-gray-500 font-medium">Ready for today's reading adventure?</p>
         </div>
 
-        <!-- ANNOUNCEMENTS -->
+        <!-- ANNOUNCEMENTS BANNER -->
         <div
-          v-if="mostRecent"
-          class="premium-card px-4 py-3"
+          v-if="bannerAnnouncement"
+          class="premium-card px-4 py-3 cursor-pointer hover:scale-[1.01] transition-all"
           style="background: rgba(245,158,11,0.06); border-color: rgba(245,158,11,0.25);"
+          @click="showAllAnnouncements = true"
         >
           <div class="flex items-center gap-3">
-            <span class="text-lg shrink-0">{{ parseContent(mostRecent.content).icon }}</span>
+            <span class="text-lg shrink-0">{{ parseContent(bannerAnnouncement.content).icon }}</span>
             <div class="flex-grow overflow-hidden">
               <p class="text-sm font-bold truncate" style="color: var(--brand-dark)">
                 <span class="px-2 py-0.5 rounded-full text-[10px] font-black uppercase mr-2 text-gray-900" style="background: var(--brand-gold)">New</span>
-                {{ parseContent(mostRecent.content).title }}
+                {{ parseContent(bannerAnnouncement.content).title }}
               </p>
-              <p class="text-xs text-gray-400 mt-0.5 truncate"><span v-html="parseContent(mostRecent.content).body"></span></p>
+              <p class="text-xs text-gray-400 mt-0.5 truncate"><span v-html="parseContent(bannerAnnouncement.content).body"></span></p>
             </div>
-            <!-- "View All" button always visible when there's at least one announcement -->
             <button
-              @click="showAllAnnouncements = true"
               class="shrink-0 text-[11px] font-bold uppercase tracking-wider px-3 py-1 rounded-full transition-all"
               style="background: rgba(245,158,11,0.18); color: var(--brand-dark); border: 1px solid rgba(245,158,11,0.3);"
-            >
-              View All ›
-            </button>
+            >View All ›</button>
           </div>
         </div>
 
@@ -192,7 +242,7 @@ const completionMessage = computed(() => {
           <p class="text-sm font-medium text-gray-400">No announcements right now. Check back later!</p>
         </div>
 
-        <!-- Daily Form CTA TODO 2-->
+        <!-- Daily Form CTA -->
         <NuxtLink
           to="/reader/forms"
           class="w-full rounded-3xl p-6 text-white text-left group cursor-pointer hover:scale-[1.02] active:scale-[0.98] transition-all duration-200 shadow-lg block"
@@ -202,10 +252,7 @@ const completionMessage = computed(() => {
             <div>
               <p class="text-sm font-bold uppercase tracking-widest opacity-80 mb-1">Today's Challenge</p>
               <h3 class="font-heading text-3xl font-black">Start Your Daily Form 📝</h3>
-              <p class="text-base opacity-80 mt-1 font-medium">
-                {{ tickets }} out of {{ totalForms }} completed this week.
-                {{ completionMessage }}
-              </p>
+              <p class="text-base opacity-80 mt-1 font-medium">Keep up the great work!</p>
             </div>
             <span class="text-5xl group-hover:translate-x-2 transition-transform duration-300">➜</span>
           </div>
@@ -213,6 +260,7 @@ const completionMessage = computed(() => {
       </section>
     </main>
 
+
     <!-- ── LEFT / RIGHT ARROWS ── -->
     <!-- Left: Store -->
     <NuxtLink
@@ -239,20 +287,19 @@ const completionMessage = computed(() => {
     </NuxtLink>
 
 
-    <!-- ALL ANNOUNCEMENTS -->
+    <!-- ── ANNOUNCEMENTS MODAL ── -->
     <Transition name="modal-fade">
       <div v-if="showAllAnnouncements" class="fixed inset-0 z-[150] flex items-center justify-center p-4">
         <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" @click="showAllAnnouncements = false" />
 
-        <!-- Dialog box -->
+        <!-- Dialog -->
         <div class="relative w-full max-w-lg bg-white rounded-3xl shadow-2xl flex flex-col max-h-[85vh]">
           <!-- Header -->
           <div class="px-6 pt-6 pb-4 flex items-center justify-between shrink-0 border-b border-gray-100">
             <div>
               <h2 class="font-heading text-2xl font-bold" style="color: var(--brand-dark)">📢 Announcements</h2>
-              <p class="text-xs text-gray-400 mt-0.5">{{ announcements?.length ?? 0 }} active</p>
+              <p class="text-xs text-gray-400 mt-0.5">{{ announcements.length }} active across all classes</p>
             </div>
-            <!-- ✕ close button -->
             <button
               @click="showAllAnnouncements = false"
               class="w-9 h-9 rounded-full flex items-center justify-center text-gray-400 hover:text-gray-700 hover:bg-gray-100 transition"
@@ -260,35 +307,153 @@ const completionMessage = computed(() => {
             >✕</button>
           </div>
 
-          <!-- Scrollable announcement cards — sorted newest first -->
-          <div class="overflow-y-auto px-6 py-5 space-y-4">
-            <div
-              v-for="ann in [...(announcements ?? [])].sort((a,b) => new Date(b.postDate).getTime() - new Date(a.postDate).getTime())"
-              :key="ann.id"
-              class="bg-gray-50 border border-gray-100 rounded-2xl p-4 flex gap-4 items-start"
-            >
-              <!-- Icon -->
-              <div class="p-3 bg-indigo-50 rounded-xl text-3xl shrink-0 border border-indigo-100 shadow-sm flex items-center justify-center min-w-[56px] min-h-[56px]">
-                {{ parseContent(ann.content).icon }}
-              </div>
-              <!-- Body -->
-              <div class="flex-grow">
-                <div class="flex flex-col gap-0.5 mb-2">
-                  <h4 class="text-base font-bold text-gray-800">{{ parseContent(ann.content).title }}</h4>
-                  <span class="text-[10px] font-bold uppercase tracking-wider text-gray-400">
-                    {{ fmtDate(ann.postDate) }}{{ ann.expiryDate ? ' → ' + fmtDate(ann.expiryDate) : ' (Ongoing)' }}
-                  </span>
+          <!-- Per-class sections inside the modal -->
+          <div class="overflow-y-auto px-6 py-5 space-y-5">
+
+            <!-- No classes -->
+            <div v-if="announcementsByClass.length === 0" class="text-center py-10 text-gray-400">
+              <p class="font-medium text-sm">No classes found.</p>
+            </div>
+
+            <div v-for="cls in announcementsByClass" :key="cls.id">
+              <!-- Class header -->
+              <button
+                class="class-header w-full flex items-center justify-between px-4 py-3 rounded-2xl transition-all duration-200 mb-2"
+                :class="cls.isFriendsOfMLK ? 'class-header--mlk' : 'class-header--normal'"
+                @click="toggleAnnouncementClass(cls.id)"
+              >
+                <div class="flex items-center gap-2 min-w-0">
+                  <svg
+                    class="w-4 h-4 shrink-0 transition-transform duration-200"
+                    :class="collapsedAnnouncementClasses[cls.id] ? '' : 'rotate-90'"
+                    fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"
+                  >
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
+                  </svg>
+                  <span class="font-heading font-bold text-base truncate" :class="cls.isFriendsOfMLK ? 'text-white' : ''">{{ cls.name }}</span>
                 </div>
-                <p class="text-sm text-gray-500 font-medium leading-relaxed"><span v-html="parseContent(ann.content).body"></span></p>
-              </div>
+                <span class="font-heading font-black text-base tabular-nums" :class="cls.isFriendsOfMLK ? 'text-white' : ''">
+                  📢 {{ cls.classAnnouncements.length }}
+                </span>
+              </button>
+
+              <!-- Announcements for this class -->
+              <Transition name="class-expand">
+                <div v-if="!collapsedAnnouncementClasses[cls.id]" class="space-y-2">
+                  <!-- Empty -->
+                  <div
+                    v-if="cls.classAnnouncements.length === 0"
+                    class="px-4 py-3 rounded-2xl flex items-center gap-3"
+                    style="background:rgba(245,158,11,0.04); border:1px solid rgba(245,158,11,0.15);"
+                  >
+                    <span>📭</span>
+                    <p class="text-sm text-gray-400">No announcements for this class right now.</p>
+                  </div>
+
+                  <!-- Cards -->
+                  <div
+                    v-for="ann in cls.classAnnouncements"
+                    :key="ann.id"
+                    class="bg-gray-50 border border-gray-100 rounded-2xl p-4 flex gap-4 items-start"
+                  >
+                    <div class="p-3 rounded-xl text-2xl shrink-0 border flex items-center justify-center min-w-[48px] min-h-[48px]"
+                         style="background:rgba(245,158,11,0.12); border-color:rgba(245,158,11,0.2)">
+                      {{ parseContent(ann.content).icon }}
+                    </div>
+                    <div class="flex-grow min-w-0">
+                      <div class="flex items-start justify-between gap-2 mb-1">
+                        <h4 class="text-sm font-bold text-gray-800">{{ parseContent(ann.content).title }}</h4>
+                        <span class="text-[10px] font-bold uppercase tracking-wider text-gray-400 shrink-0">
+                          {{ fmtDate(ann.postDate) }}{{ ann.expiryDate ? ' → ' + fmtDate(ann.expiryDate) : ' (Ongoing)' }}
+                        </span>
+                      </div>
+                      <p v-if="parseContent(ann.content).body" class="text-sm text-gray-500 font-medium leading-relaxed">
+                        <span v-html="parseContent(ann.content).body"></span>
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </Transition>
             </div>
           </div>
         </div>
       </div>
     </Transition>
+    <Transition name="modal-fade">
+      <div v-if="showJoinModal" class="fixed inset-0 z-[150] flex items-center justify-center p-4">
+        <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" @click="showJoinModal = false" />
+
+        <div class="relative w-full max-w-md bg-white rounded-3xl shadow-2xl flex flex-col overflow-hidden">
+          <!-- Header -->
+          <div class="px-6 pt-6 pb-4 flex items-center justify-between shrink-0 border-b border-gray-100">
+            <div>
+              <h2 class="font-heading text-2xl font-bold" style="color: var(--brand-dark)">🏫 Join a Class</h2>
+              <p class="text-xs text-gray-400 mt-0.5">Enter the class code your reading coach gave you!</p>
+            </div>
+            <button
+              @click="showJoinModal = false"
+              class="w-9 h-9 rounded-full flex items-center justify-center text-gray-400 hover:text-gray-700 hover:bg-gray-100 transition"
+              aria-label="Close"
+            >✕</button>
+          </div>
+
+          <!-- Body -->
+          <div class="px-6 py-6 space-y-4">
+            <!-- Success state -->
+            <div v-if="joinSuccess" class="p-4 rounded-2xl text-center space-y-3" style="background:rgba(45,212,191,0.1); border:2px solid rgba(45,212,191,0.3)">
+              <div class="text-4xl">🎉</div>
+              <p class="font-heading font-bold text-lg" style="color:var(--brand-dark)">{{ joinSuccess }}</p>
+              <p class="text-sm text-gray-500">Head over to Forms to see your new class!</p>
+              <button
+                @click="showJoinModal = false"
+                class="btn-fun text-white px-8 py-2 rounded-xl font-bold text-sm shadow"
+                style="background:var(--brand-mint)"
+              >Done ✓</button>
+            </div>
+
+            <!-- Input form -->
+            <template v-else>
+              <div class="space-y-2">
+                <label class="block text-sm font-bold text-gray-600" for="join-token-input">Class Code</label>
+                <input
+                  id="join-token-input"
+                  v-model="joinToken"
+                  type="text"
+                  placeholder="Paste or type the code here…"
+                  class="w-full px-4 py-3 rounded-2xl border-2 font-bold text-gray-700 outline-none transition-all text-sm"
+                  style="border-color: rgba(224,96,77,0.25);"
+                  :style="joinError ? 'border-color: rgba(239,68,68,0.5); background:rgba(239,68,68,0.04)' : ''"
+                  @focus="(e) => (e.target as HTMLInputElement).style.borderColor = 'var(--brand-indigo)'"
+                  @blur="(e) => (e.target as HTMLInputElement).style.borderColor = joinError ? 'rgba(239,68,68,0.5)' : 'rgba(224,96,77,0.25)'"
+                  @keydown.enter="submitJoin"
+                />
+                <!-- Error message -->
+                <p v-if="joinError" class="text-xs font-bold text-red-500 px-1">⚠️ {{ joinError }}</p>
+              </div>
+
+              <div class="flex gap-3 pt-1">
+                <button
+                  @click="showJoinModal = false"
+                  class="flex-1 py-3 rounded-2xl font-bold text-sm text-gray-500 border-2 border-gray-200 hover:bg-gray-50 transition"
+                >Cancel</button>
+                <button
+                  @click="submitJoin"
+                  :disabled="!joinToken.trim() || joinLoading"
+                  class="flex-1 btn-fun text-white py-3 rounded-2xl font-bold text-sm shadow-lg disabled:opacity-50"
+                  style="background:var(--brand-indigo)"
+                >
+                  {{ joinLoading ? 'Joining…' : 'Join Class 🚀' }}
+                </button>
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+    </Transition>
   </div>
 </template>
 
+
 <style>
 @import './reader.css';
 </style>
diff --git a/app/pages/reader/reader.css b/app/pages/reader/reader.css
index 0716c9a..e35262b 100644
--- a/app/pages/reader/reader.css
+++ b/app/pages/reader/reader.css
@@ -284,3 +284,36 @@
 /* ── Question step fade ── */
 .step-fade-enter-active, .step-fade-leave-active { transition: opacity 0.25s ease; }
 .step-fade-enter-from,  .step-fade-leave-to     { opacity: 0; }
+
+/* ── Class header backgrounds ── */
+.class-header {
+  cursor: pointer;
+  user-select: none;
+}
+.class-header--normal {
+  background: rgba(255, 255, 255, 0.75);
+  backdrop-filter: blur(16px);
+  border: 2px solid rgba(255, 255, 255, 0.5);
+  box-shadow: 0 4px 16px rgba(79, 70, 229, 0.08);
+  color: #0f172a;
+}
+.class-header--normal:hover {
+  border-color: var(--brand-indigo);
+  box-shadow: 0 6px 20px rgba(224, 96, 77, 0.15);
+}
+.class-header--mlk {
+  background: linear-gradient(135deg, #E0604D 0%, #c94a38 100%);
+  border: 2px solid rgba(255,255,255,0.2);
+  box-shadow: 0 4px 20px rgba(224, 96, 77, 0.35);
+  color: white;
+}
+.class-header--mlk:hover {
+  box-shadow: 0 8px 28px rgba(224, 96, 77, 0.45);
+  transform: translateY(-1px);
+}
+
+/* ── Class expand transition ── */
+.class-expand-enter-active { transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1); }
+.class-expand-leave-active { transition: all 0.18s ease-in; }
+.class-expand-enter-from,
+.class-expand-leave-to { opacity: 0; transform: translateY(-8px); }
diff --git a/prisma/seed.ts b/prisma/seed.ts
index a8795b1..e04e5c5 100644
--- a/prisma/seed.ts
+++ b/prisma/seed.ts
@@ -77,7 +77,6 @@ async function main() {
       email: seededEmails[2],
       emailVerified: true,
       role: 'admin',
-      admin: true,
       accounts: {
         create: {
           id: 'seed_account_6',
diff --git a/server/api/admin/classes.get.ts b/server/api/admin/classes.get.ts
index 49df647..ee2eae9 100644
--- a/server/api/admin/classes.get.ts
+++ b/server/api/admin/classes.get.ts
@@ -1,10 +1,13 @@
 import { prisma } from '../../utils/prisma'
 import { requireCoach } from '../../utils/require-session'
+import { getMlkClass } from '../../utils/mlk-class'
 
 export default defineEventHandler(async (event) => {
   const session = await requireCoach(event)
+  const isAdmin = session.user.role === 'admin'
 
-  return await prisma.class.findMany({
+  // Fetch classes the user coaches (or all classes for admin)
+  const coachedClasses = await prisma.class.findMany({
     where: {
       Coach: {
         some: {
@@ -20,4 +23,23 @@ export default defineEventHandler(async (event) => {
       name: true,
     },
   })
+
+  // Admins additionally always see the Friends of MLK class so they can
+  // manage its form groups through the coach panel.
+  if (isAdmin) {
+    const mlkClass = await getMlkClass()
+
+    const alreadyIncluded = coachedClasses.some((c) => c.joinToken === mlkClass.joinToken)
+
+    if (!alreadyIncluded) {
+      // Non-FoMLK classes alphabetically first, then FoMLK at the end
+      return [
+        ...coachedClasses.filter((c) => c.joinToken !== mlkClass.joinToken),
+        { joinToken: mlkClass.joinToken, name: mlkClass.name },
+      ]
+    }
+  }
+
+  return coachedClasses
 })
+
diff --git a/server/api/announcement/index.ts b/server/api/announcement/index.ts
index 762596a..907cdfa 100644
--- a/server/api/announcement/index.ts
+++ b/server/api/announcement/index.ts
@@ -3,29 +3,57 @@ import { getQuery, createError } from 'h3'
 import { requireClassAccess, requireSession } from '../../utils/require-session'
 import { announcementCreateSchema } from '../../utils/schemas'
 
-// GET /api/announcement?active=true to get only active announcements
+// GET /api/announcement?active=true&studentId=<id>  — returns only announcements
+// for the classes the given student belongs to (class-specific visibility).
+// GET /api/announcement?active=true&classId=<token>  — coach view, scoped to one class.
 export default defineEventHandler(async (event) => {
   const method = event.node.req.method
   const query = getQuery(event)
   const now = new Date()
-  const classToken = typeof query.classId === 'string' ? query.classId : null
+  const classToken  = typeof query.classId   === 'string' ? query.classId   : null
+  const rawStudentId = typeof query.studentId === 'string' ? Number(query.studentId) : null
 
   if (method === 'GET') {
-    let classId: string | null = null
+    const activeWhere = query.active === 'true'
+      ? {
+          postDate: { lte: now },
+          OR: [{ expiryDate: null }, { expiryDate: { gte: now } }],
+        }
+      : {}
+
+    // ── Student-scoped: filter to only classes the student belongs to ──────────
+    if (rawStudentId && !Number.isNaN(rawStudentId)) {
+      const session = await requireSession(event)
+
+      // Security: ensure the student belongs to the calling user
+      const student = await prisma.student.findFirst({
+        where: { id: rawStudentId, parentUserId: session.user.id },
+        select: { id: true, Classes: { select: { id: true } } },
+      })
+
+      if (!student) {
+        throw createError({ statusCode: 403, statusMessage: 'Forbidden' })
+      }
+
+      const classIds = student.Classes.map((c) => c.id)
+
+      return await prisma.announcement.findMany({
+        where: {
+          ...activeWhere,
+          class: { in: classIds },
+        },
+        orderBy: { postDate: 'desc' },
+      })
+    }
 
+    // ── Coach-scoped: single class via join token ──────────────────────────────
+    let classId: string | null = null
     if (classToken) {
       classId = (await requireClassAccess(event, classToken)).classId
     } else {
       await requireSession(event)
     }
 
-    const activeWhere = query.active === 'true'
-      ? {
-          postDate: { lte: now },
-          OR: [{ expiryDate: null }, { expiryDate: { gte: now } }],
-        }
-      : {}
-    
     return await prisma.announcement.findMany({
       where: {
         ...activeWhere,
@@ -43,7 +71,7 @@ export default defineEventHandler(async (event) => {
       throw createError({ statusCode: 400, statusMessage: 'classId is required' })
     }
 
-    const { classId, coachId } = await requireClassAccess(event, requestedClassId)
+    const { classId, coachId, session } = await requireClassAccess(event, requestedClassId)
     const body = announcementCreateSchema.safeParse(rawBody)
     
     if (!body.success) {
@@ -53,12 +81,27 @@ export default defineEventHandler(async (event) => {
       })
     }
 
+    // When the caller is an admin, requireClassAccess returns the sentinel 'admin'
+    // instead of a real Coach.id. Resolve the actual Coach record for this user
+    // so the FK constraint on Announcement.author is satisfied.
+    let resolvedCoachId = coachId
+    if (coachId === 'admin') {
+      const coach = await prisma.coach.findFirst({
+        where: { userId: session.user.id },
+        select: { id: true },
+      })
+      if (!coach) {
+        throw createError({ statusCode: 403, statusMessage: 'Admin user has no Coach profile' })
+      }
+      resolvedCoachId = coach.id
+    }
+
     return await prisma.announcement.create({
       data: {
         content: body.data.content,
         postDate: body.data.postDate,
         expiryDate: body.data.expiryDate ?? null,
-        author: coachId,
+        author: resolvedCoachId,
         class: classId,
       },
     })
diff --git a/server/api/reader/classes.get.ts b/server/api/reader/classes.get.ts
new file mode 100644
index 0000000..82a76f4
--- /dev/null
+++ b/server/api/reader/classes.get.ts
@@ -0,0 +1,137 @@
+import { prisma } from '../../utils/prisma'
+import { requireSession } from '../../utils/require-session'
+import { getMlkClass, MLK_CLASS_ID } from '../../utils/mlk-class'
+
+/**
+ * GET /api/reader/classes?studentId=<number>
+ *
+ * Returns all classes the given student belongs to, each with:
+ *  - Active form groups (forms that are published and whose group is currently active)
+ *  - Per-class ticket count (# of forms the student has submitted in active groups)
+ *
+ * The Friends of MLK class is always included (auto-enrolled) and is
+ * flagged with `isFriendsOfMLK: true`.
+ *
+ * Auth: logged-in session; student must belong to the calling user.
+ */
+export default defineEventHandler(async (event) => {
+  const session = await requireSession(event)
+  const query = getQuery(event)
+  const studentId = typeof query.studentId === 'string' ? Number(query.studentId) : NaN
+
+  if (!studentId || Number.isNaN(studentId)) {
+    throw createError({ statusCode: 400, statusMessage: 'studentId is required' })
+  }
+
+  // Verify the student belongs to the session user
+  const student = await prisma.student.findFirst({
+    where: { id: studentId, parentUserId: session.user.id },
+    select: { id: true },
+  })
+
+  if (!student) {
+    throw createError({ statusCode: 403, statusMessage: 'Forbidden' })
+  }
+
+  // Ensure the MLK class exists and this student is enrolled
+  const mlkClass = await getMlkClass()
+
+  // Enroll silently if not already a member (idempotent)
+  await prisma.class.update({
+    where: { id: mlkClass.id },
+    data: { Students: { connect: { id: studentId } } },
+  })
+
+  const now = new Date()
+
+  // Fetch all classes for this student with their active form groups and forms
+  const classes = await prisma.class.findMany({
+    where: {
+      Students: { some: { id: studentId } },
+    },
+    select: {
+      id: true,
+      joinToken: true,
+      name: true,
+      FormGroups: {
+        where: {
+          startDate: { lte: now },
+          OR: [{ endDate: null }, { endDate: { gte: now } }],
+        },
+        select: {
+          id: true,
+          startDate: true,
+          endDate: true,
+          Forms: {
+            where: { published: true },
+            orderBy: [{ order: 'asc' }, { id: 'asc' }],
+            select: {
+              id: true,
+              order: true,
+              startDate: true,
+              endDate: true,
+              published: true,
+              formGroup: true,
+              title: true,
+            },
+          },
+        },
+      },
+    },
+    orderBy: { name: 'asc' },
+  })
+
+  if (classes.length === 0) {
+    return []
+  }
+
+  // Collect all form IDs across all active groups for this student so we can
+  // check completions in a single query
+  const allFormIds = classes.flatMap((cls) =>
+    cls.FormGroups.flatMap((fg) => fg.Forms.map((f) => f.id))
+  )
+
+  // Fetch all submissions by this student for the relevant forms
+  const submissions = allFormIds.length > 0
+    ? await prisma.formSubmission.findMany({
+        where: { student: studentId, form: { in: allFormIds } },
+        select: { form: true },
+      })
+    : []
+
+  const submittedFormIds = new Set(submissions.map((s) => s.form))
+
+  // Build the response
+  return classes.map((cls) => {
+    const isFriendsOfMLK = cls.id === MLK_CLASS_ID
+
+    const activeFormGroups = cls.FormGroups.map((fg) => ({
+      id: fg.id,
+      startDate: fg.startDate.toISOString(),
+      endDate: fg.endDate ? fg.endDate.toISOString() : null,
+      forms: fg.Forms.map((f) => ({
+        id: f.id,
+        order: f.order,
+        startDate: f.startDate.toISOString(),
+        endDate: f.endDate ? f.endDate.toISOString() : null,
+        published: f.published,
+        formGroup: f.formGroup,
+        title: f.title,
+        completed: submittedFormIds.has(f.id),
+      })),
+    }))
+
+    const ticketCount = activeFormGroups
+      .flatMap((fg) => fg.forms)
+      .filter((f) => f.completed).length
+
+    return {
+      id: cls.id,
+      joinToken: cls.joinToken,
+      name: cls.name,
+      isFriendsOfMLK,
+      activeFormGroups,
+      ticketCount,
+    }
+  })
+})
diff --git a/server/api/reader/join-class.post.ts b/server/api/reader/join-class.post.ts
new file mode 100644
index 0000000..953920f
--- /dev/null
+++ b/server/api/reader/join-class.post.ts
@@ -0,0 +1,55 @@
+import { prisma } from '../../utils/prisma'
+import { requireSession } from '../../utils/require-session'
+
+/**
+ * POST /api/reader/join-class
+ * Body: { studentId: number, joinToken: string }
+ *
+ * Enrolls the given student (who must belong to the calling user) into the
+ * class identified by `joinToken`. Idempotent — safe to call if already enrolled.
+ */
+export default defineEventHandler(async (event) => {
+  const session = await requireSession(event)
+  const body = await readBody(event)
+
+  const studentId = typeof body?.studentId === 'number' ? body.studentId : NaN
+  const joinToken  = typeof body?.joinToken  === 'string' ? body.joinToken.trim()  : ''
+
+  if (!studentId || Number.isNaN(studentId)) {
+    throw createError({ statusCode: 400, statusMessage: 'studentId is required' })
+  }
+
+  if (!joinToken) {
+    throw createError({ statusCode: 400, statusMessage: 'joinToken is required' })
+  }
+
+  // Verify the student belongs to the session user
+  const student = await prisma.student.findFirst({
+    where: { id: studentId, parentUserId: session.user.id },
+    select: { id: true },
+  })
+
+  if (!student) {
+    throw createError({ statusCode: 403, statusMessage: 'Forbidden' })
+  }
+
+  // Find the class by joinToken
+  const classroom = await prisma.class.findUnique({
+    where: { joinToken },
+    select: { id: true, name: true, joinToken: true },
+  })
+
+  if (!classroom) {
+    throw createError({ statusCode: 404, statusMessage: 'Class not found. Check the join code and try again.' })
+  }
+
+  // Enroll (connect is idempotent in Prisma)
+  await prisma.class.update({
+    where: { id: classroom.id },
+    data: {
+      Students: { connect: { id: studentId } },
+    },
+  })
+
+  return { id: classroom.id, name: classroom.name, joinToken: classroom.joinToken }
+})
diff --git a/server/api/student/index.post.ts b/server/api/student/index.post.ts
index daa3013..87b5888 100644
--- a/server/api/student/index.post.ts
+++ b/server/api/student/index.post.ts
@@ -1,6 +1,7 @@
 import { prisma } from '../../utils/prisma'
 import { studentCreateSchema } from '../../utils/schemas'
 import { requireSession } from '../../utils/require-session'
+import { enrollInMlkClass } from '../../utils/mlk-class'
 
 export default defineEventHandler(async (event) => {
   const session = await requireSession(event)
@@ -13,11 +14,17 @@ export default defineEventHandler(async (event) => {
     })
   }
 
-  return await prisma.student.create({
+  const newStudent = await prisma.student.create({
     data: {
       name: body.data.name,
       parentUserId: session.user.id,
       settings: { dyslexiaFont: false, language: 'en', fontSize: 1 },
     },
   })
+
+  // Automatically enroll every new student in the Friends of MLK class
+  // so they always see the admin-managed forms regardless of other class memberships.
+  await enrollInMlkClass(newStudent.id)
+
+  return newStudent
 })
diff --git a/server/utils/mlk-class.ts b/server/utils/mlk-class.ts
new file mode 100644
index 0000000..c906707
--- /dev/null
+++ b/server/utils/mlk-class.ts
@@ -0,0 +1,35 @@
+import { prisma } from './prisma'
+
+// Hard-coded Friends of MLK class ID — every new student is enrolled here automatically.
+export const MLK_CLASS_ID = 'c8f15743-c8e8-406a-9528-c9ae3b9afab7'
+const MLK_CLASS_NAME = 'Friends of MLK'
+
+/**
+ * Returns the canonical "Friends of MLK" class, creating it with the hard-coded
+ * ID if it doesn't yet exist in this environment (e.g. fresh local dev DB).
+ */
+export async function getMlkClass(): Promise<{ id: string; joinToken: string; name: string }> {
+  const mlkClass = await prisma.class.upsert({
+    where: { id: MLK_CLASS_ID },
+    update: {},
+    create: { id: MLK_CLASS_ID, name: MLK_CLASS_NAME },
+    select: { id: true, joinToken: true, name: true },
+  })
+  return mlkClass
+}
+
+/**
+ * Enroll a student in the Friends of MLK class if they are not already
+ * a member. Safe to call multiple times.
+ */
+export async function enrollInMlkClass(studentId: number): Promise<void> {
+  await prisma.class.update({
+    where: { id: MLK_CLASS_ID },
+    data: {
+      Students: {
+        connect: { id: studentId },
+      },
+    },
+  })
+}
+
diff --git a/server/utils/require-session.ts b/server/utils/require-session.ts
index 2430a05..e873c5f 100644
--- a/server/utils/require-session.ts
+++ b/server/utils/require-session.ts
@@ -43,6 +43,25 @@ export async function requireCoach(event: H3Event) {
 }
 export async function requireClassAccess(event: H3Event, classToken: string) {
   const session = await requireCoach(event)
+  const isAdmin = session.user.role === 'admin'
+
+  if (isAdmin) {
+    // Admins have full access to every class, including coach-less ones (e.g. Friends of MLK)
+    const classroom = await prisma.class.findFirst({
+      where: { joinToken: classToken },
+      select: { id: true },
+    })
+
+    if (!classroom) {
+      throw createError({
+        statusCode: 404,
+        statusMessage: 'Class not found',
+      })
+    }
+
+    // Return a sentinel coachId so callers that destructure it don't break
+    return { session, classId: classroom.id, coachId: 'admin' as const }
+  }
 
   const classroom = await prisma.class.findFirst({
     where: {