diff --git a/CHANGELOG.md b/CHANGELOG.md
index f98b55b..518c192 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,37 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.1.5] - 2026-02-09
+
+### Added
+
+- Class-aware state foundations: `Classroom` model support, class utilities (`lib/classes.ts`), and class-focused storage/test coverage.
+- Shared `ClassSelector` component for class selection across students, generator, play, breakout rooms, and projects.
+- Unified quiz editor test coverage for form + import workflows (`components/quizzes/__tests__/quiz-editor-form.test.tsx`).
+- Shared select wrapper tests for popup alignment defaults (`components/ui/__tests__/select.test.tsx`).
+
+### Changed
+
+- Student workflow expanded to class-first management: create/select classes, import full class rosters, and manage students in the active class.
+- Generator, quiz play, breakout groups, and project lists now run with active-class scoping.
+- Quiz editing/import flow consolidated into `QuizEditorForm`; legacy `quiz-import-card` removed.
+- Quiz question list card behavior refined for better overflow/height handling.
+- Shared `SelectContent` now defaults to popper-style content-fit behavior and supports explicit trigger-aligned positioning via `alignItemWithTrigger={true}` where needed.
+- App version updated to `1.1.5` in `package.json`.
+- Sidebar version label now reads version dynamically from `package.json` via server layout prop wiring.
+- Dependency/version refresh from the `main..HEAD` baseline commits (including `package.json` and `bun.lock` updates from `e9d61c2`).
+
+### Tests
+
+- Expanded reducer/storage/type-guard coverage for class-aware persistence and migration paths.
+- Added class utility tests (`lib/__tests__/classes.test.ts`) and updated student/reducer expectations.
+- Added select alignment behavior tests in `components/ui/__tests__/select.test.tsx`.
+
+### Documentation
+
+- Updated README and project docs for class-scoped workflows and unified quiz editing/import.
+- Updated component docs to describe select popup auto-sizing defaults and trigger-alignment override.
+
 ## [1.1.4] - 2026-02-05
 
 ### Changed
diff --git a/README.md b/README.md
index 1eb9fc2..ad6cfe1 100644
--- a/README.md
+++ b/README.md
@@ -36,16 +36,18 @@ Open [http://localhost:3000](http://localhost:3000) and use the dashboard to nav
 | Route             | Description                                          |
 | ----------------- | ---------------------------------------------------- |
 | `/`               | Dashboard with links to all features                 |
-| `/students`       | Add, import, edit, and manage student roster         |
-| `/generator`      | Draw random students with no-repeat logic            |
+| `/students`       | Manage classes and class-scoped student rosters      |
+| `/generator`      | Draw random students with no-repeat logic per class  |
 | `/quizzes`        | Build and edit quiz question sets                    |
-| `/play`           | Run live quiz sessions with question/student pairing |
-| `/breakout-rooms` | Generate random student groups                       |
-| `/projects`       | Create and manage project lists                      |
+| `/play`           | Run live quiz sessions scoped to selected class      |
+| `/breakout-rooms` | Generate random student groups per class             |
+| `/projects`       | Create and manage project lists per class            |
 
 ### Usage Examples
 
-- **Add students**: Go to `/students`, type names (comma-separated for bulk) or import a `.txt` file.
+- **Import full classes**: Go to `/students` and import `.txt` with `Class Name: Student A, Student B` lines, or `.json` with `{ className, students }` objects.
+- **Quick-add students**: In `/students`, use the student input or student `.txt` import to add names to the currently selected class.
+- **Class-aware tools**: `/generator`, `/breakout-rooms`, `/projects`, and `/play` all use the active class selected in the class dropdown.
 - **Random draw**: Go to `/generator` and click "Draw" to select a random active student (no repeats until reset).
 - **Quiz play**: In `/play`, select a quiz, then draw question/student pairs and click to reveal answers.
 - **Timer**: Use the **timer in the header** (on every page): set time, start countdown; alerts at 10min, 5min, 1min, and 0 (with optional sound).
@@ -73,6 +75,7 @@ teacherbuddy/
 │   ├── navigation/        # Sidebar navigation
 │   ├── dashboard/         # Dashboard cards (server component)
 │   ├── students/          # Student management
+│   ├── classes/           # Class selector
 │   ├── quizzes/           # Quiz builder
 │   ├── play/              # Quiz play + timer card
 │   ├── breakout/          # Breakout groups
diff --git a/app/breakout-rooms/page.tsx b/app/breakout-rooms/page.tsx
index 2b2ac2f..c317ad4 100644
--- a/app/breakout-rooms/page.tsx
+++ b/app/breakout-rooms/page.tsx
@@ -14,7 +14,7 @@ export const metadata: Metadata = {
  */
 export default function Page() {
   return (
-    <div className="flex flex-col gap-4">
+    <div className="max-w-6xl mx-auto">
       <BreakoutGroupsCard />
     </div>
   );
diff --git a/app/generator/page.tsx b/app/generator/page.tsx
index 0263e42..b2bbe4c 100644
--- a/app/generator/page.tsx
+++ b/app/generator/page.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { Metadata } from 'next';
 
 import GeneratorCard from '@/components/generator/generator-card';
@@ -15,7 +17,7 @@ export const metadata: Metadata = {
  */
 export default function Page() {
   return (
-    <div className="flex flex-col gap-4">
+    <div className="max-w-6xl mx-auto">
       <GeneratorCard skeleton={<GeneratorCardSkeleton />} />
     </div>
   );
diff --git a/app/layout.tsx b/app/layout.tsx
index 40f8491..28c4285 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,8 +1,10 @@
 import type { Metadata } from 'next';
 
 import { Geist, Geist_Mono } from 'next/font/google';
+import { cookies } from 'next/headers';
 
 import './globals.css';
+import packageJson from '@/package.json';
 
 import AppShell from '@/components/app-shell';
 import Footer from '@/components/footer';
@@ -57,11 +59,20 @@ export const metadata: Metadata = {
  * Renders the shared HTML shell and providers for all application routes.
  * Wrap page content in this layout so theme, state, sidebar, and footer stay consistent.
  */
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  const appVersion = packageJson.version;
+  const cookieStore = await cookies();
+  const sidebarCookieValue =
+    cookieStore.get('teacherbuddy_sidebar_state')?.value ??
+    cookieStore.get('sidebar_state')?.value ??
+    cookieStore.get('teacherbuddy:sidebar_state')?.value;
+  const defaultSidebarOpen =
+    sidebarCookieValue === undefined ? true : sidebarCookieValue === 'true';
+
   return (
     <html lang="en_GB" suppressHydrationWarning>
       <head>
@@ -91,7 +102,12 @@ export default function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
         <ThemeProvider attribute="class" defaultTheme="dark">
           <AppStoreProvider>
-            <AppShell footer={<Footer />}>{children}</AppShell>
+            <AppShell
+              appVersion={appVersion}
+              defaultSidebarOpen={defaultSidebarOpen}
+              footer={<Footer />}>
+              {children}
+            </AppShell>
             <PrivacyNotice />
             <Toaster closeButton position="bottom-center" />
           </AppStoreProvider>
diff --git a/app/play/page.tsx b/app/play/page.tsx
index d146b70..b28287a 100644
--- a/app/play/page.tsx
+++ b/app/play/page.tsx
@@ -14,7 +14,7 @@ export const metadata: Metadata = {
  */
 export default function Page() {
   return (
-    <div className="flex flex-col gap-4">
+    <div className="max-w-6xl mx-auto">
       <QuizPlayCard skeleton={<QuizPlayCardSkeleton />} />
     </div>
   );
diff --git a/app/projects/page.tsx b/app/projects/page.tsx
index fb6ee3e..b278730 100644
--- a/app/projects/page.tsx
+++ b/app/projects/page.tsx
@@ -15,8 +15,8 @@ export const metadata: Metadata = {
 export default function Page() {
   return (
     <div className="flex flex-col gap-4">
-      <ProjectListBuilder />
       <ProjectListView />
+      <ProjectListBuilder />
     </div>
   );
 }
diff --git a/app/quizzes/page.tsx b/app/quizzes/page.tsx
index 43197d2..7c9fa91 100644
--- a/app/quizzes/page.tsx
+++ b/app/quizzes/page.tsx
@@ -13,9 +13,5 @@ export const metadata: Metadata = {
  * Provides the editor workflow with a skeleton shown before hydration.
  */
 export default function Page() {
-  return (
-    <div className="flex flex-col gap-4">
-      <QuizEditor skeleton={<QuizEditorSkeleton />} />
-    </div>
-  );
+  return <QuizEditor skeleton={<QuizEditorSkeleton />} />;
 }
diff --git a/app/students/page.tsx b/app/students/page.tsx
index ac08413..72eb599 100644
--- a/app/students/page.tsx
+++ b/app/students/page.tsx
@@ -17,7 +17,7 @@ export const metadata: Metadata = {
  */
 export default function Page() {
   return (
-    <div className="flex flex-col gap-4">
+    <div className="flex flex-col gap-4 lg:grid lg:grid-cols-2 lg:items-start">
       <StudentForm skeleton={<StudentFormSkeleton />} />
       <StudentTable skeleton={<StudentTableSkeleton />} />
     </div>
diff --git a/bun.lock b/bun.lock
index dfe1b22..3a868b9 100644
--- a/bun.lock
+++ b/bun.lock
@@ -13,31 +13,31 @@
         "next-themes": "^0.4.6",
         "react": "19.2.3",
         "react-dom": "19.2.3",
-        "shadcn": "^3.8.2",
+        "shadcn": "^3.8.4",
         "sonner": "^2.0.7",
         "tailwind-merge": "^3.4.0",
         "tw-animate-css": "^1.4.0",
       },
       "devDependencies": {
-        "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
-        "@tailwindcss/postcss": "^4",
+        "@ianvs/prettier-plugin-sort-imports": "^4.7.1",
+        "@tailwindcss/postcss": "^4.1.18",
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.3.2",
         "@testing-library/user-event": "^14.6.1",
-        "@types/node": "^20",
-        "@types/react": "^19",
-        "@types/react-dom": "^19",
+        "@types/node": "^20.19.33",
+        "@types/react": "^19.2.13",
+        "@types/react-dom": "^19.2.3",
         "@vitejs/plugin-react": "^5.1.3",
         "@vitest/coverage-v8": "^4.0.18",
         "@vitest/ui": "^4.0.18",
         "babel-plugin-react-compiler": "1.0.0",
-        "eslint": "^9",
+        "eslint": "^9.39.2",
         "eslint-config-next": "16.1.6",
         "jsdom": "^28.0.0",
         "prettier": "^3.8.1",
         "prettier-plugin-tailwindcss": "^0.7.2",
-        "tailwindcss": "^4",
-        "typescript": "^5",
+        "tailwindcss": "^4.1.18",
+        "typescript": "^5.9.3",
         "vitest": "^4.0.18",
       },
     },
@@ -241,7 +241,7 @@
 
     "@humanwhocodes/retry": ["@humanwhocodes/retry@0.4.3", "", {}, "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ=="],
 
-    "@ianvs/prettier-plugin-sort-imports": ["@ianvs/prettier-plugin-sort-imports@4.7.0", "", { "dependencies": { "@babel/generator": "^7.26.2", "@babel/parser": "^7.26.2", "@babel/traverse": "^7.25.9", "@babel/types": "^7.26.0", "semver": "^7.5.2" }, "peerDependencies": { "@prettier/plugin-oxc": "^0.0.4", "@vue/compiler-sfc": "2.7.x || 3.x", "content-tag": "^4.0.0", "prettier": "2 || 3 || ^4.0.0-0", "prettier-plugin-ember-template-tag": "^2.1.0" }, "optionalPeers": ["@prettier/plugin-oxc", "@vue/compiler-sfc", "content-tag", "prettier-plugin-ember-template-tag"] }, "sha512-soa2bPUJAFruLL4z/CnMfSEKGznm5ebz29fIa9PxYtu8HHyLKNE1NXAs6dylfw1jn/ilEIfO2oLLN6uAafb7DA=="],
+    "@ianvs/prettier-plugin-sort-imports": ["@ianvs/prettier-plugin-sort-imports@4.7.1", "", { "dependencies": { "@babel/generator": "^7.26.2", "@babel/parser": "^7.26.2", "@babel/traverse": "^7.25.9", "@babel/types": "^7.26.0", "semver": "^7.5.2" }, "peerDependencies": { "@prettier/plugin-oxc": "^0.0.4 || ^0.1.0", "@vue/compiler-sfc": "2.7.x || 3.x", "content-tag": "^4.0.0", "prettier": "2 || 3 || ^4.0.0-0", "prettier-plugin-ember-template-tag": "^2.1.0" }, "optionalPeers": ["@prettier/plugin-oxc", "@vue/compiler-sfc", "content-tag", "prettier-plugin-ember-template-tag"] }, "sha512-jmTNYGlg95tlsoG3JLCcuC4BrFELJtLirLAkQW/71lXSyOhVt/Xj7xWbbGcuVbNq1gwWgSyMrPjJc9Z30hynVw=="],
 
     "@img/colour": ["@img/colour@1.0.0", "", {}, "sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw=="],
 
@@ -317,7 +317,7 @@
 
     "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
 
-    "@modelcontextprotocol/sdk": ["@modelcontextprotocol/sdk@1.25.3", "", { "dependencies": { "@hono/node-server": "^1.19.9", "ajv": "^8.17.1", "ajv-formats": "^3.0.1", "content-type": "^1.0.5", "cors": "^2.8.5", "cross-spawn": "^7.0.5", "eventsource": "^3.0.2", "eventsource-parser": "^3.0.0", "express": "^5.0.1", "express-rate-limit": "^7.5.0", "jose": "^6.1.1", "json-schema-typed": "^8.0.2", "pkce-challenge": "^5.0.0", "raw-body": "^3.0.0", "zod": "^3.25 || ^4.0", "zod-to-json-schema": "^3.25.0" }, "peerDependencies": { "@cfworker/json-schema": "^4.1.1" }, "optionalPeers": ["@cfworker/json-schema"] }, "sha512-vsAMBMERybvYgKbg/l4L1rhS7VXV1c0CtyJg72vwxONVX0l4ZfKVAnZEWTQixJGTzKnELjQ59e4NbdFDALRiAQ=="],
+    "@modelcontextprotocol/sdk": ["@modelcontextprotocol/sdk@1.26.0", "", { "dependencies": { "@hono/node-server": "^1.19.9", "ajv": "^8.17.1", "ajv-formats": "^3.0.1", "content-type": "^1.0.5", "cors": "^2.8.5", "cross-spawn": "^7.0.5", "eventsource": "^3.0.2", "eventsource-parser": "^3.0.0", "express": "^5.2.1", "express-rate-limit": "^8.2.1", "hono": "^4.11.4", "jose": "^6.1.3", "json-schema-typed": "^8.0.2", "pkce-challenge": "^5.0.0", "raw-body": "^3.0.0", "zod": "^3.25 || ^4.0", "zod-to-json-schema": "^3.25.1" }, "peerDependencies": { "@cfworker/json-schema": "^4.1.1" }, "optionalPeers": ["@cfworker/json-schema"] }, "sha512-Y5RmPncpiDtTXDbLKswIJzTqu2hyBKxTNsgKqKclDbhIgg1wgtf1fRuvxgTnRfcnxtvvgbIEcqUOzZrJ6iSReg=="],
 
     "@mswjs/interceptors": ["@mswjs/interceptors@0.40.0", "", { "dependencies": { "@open-draft/deferred-promise": "^2.2.0", "@open-draft/logger": "^0.3.0", "@open-draft/until": "^2.0.0", "is-node-process": "^1.2.0", "outvariant": "^1.4.3", "strict-event-emitter": "^0.5.1" } }, "sha512-EFd6cVbHsgLa6wa4RljGj6Wk75qoHxUSyc5asLyyPSyuhIcdS2Q3Phw6ImS1q+CkALthJRShiYfKANcQMuMqsQ=="],
 
@@ -489,9 +489,9 @@
 
     "@types/json5": ["@types/json5@0.0.29", "", {}, "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="],
 
-    "@types/node": ["@types/node@20.19.31", "", { "dependencies": { "undici-types": "~6.21.0" } }, "sha512-5jsi0wpncvTD33Sh1UCgacK37FFwDn+EG7wCmEvs62fCvBL+n8/76cAYDok21NF6+jaVWIqKwCZyX7Vbu8eB3A=="],
+    "@types/node": ["@types/node@20.19.33", "", { "dependencies": { "undici-types": "~6.21.0" } }, "sha512-Rs1bVAIdBs5gbTIKza/tgpMuG1k3U/UMJLWecIMxNdJFDMzcM5LOiLVRYh3PilWEYDIeUDv7bpiHPLPsbydGcw=="],
 
-    "@types/react": ["@types/react@19.2.10", "", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-WPigyYuGhgZ/cTPRXB2EwUw+XvsRA3GqHlsP4qteqrnnjDrApbS7MxcGr/hke5iUoeB7E/gQtrs9I37zAJ0Vjw=="],
+    "@types/react": ["@types/react@19.2.13", "", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-KkiJeU6VbYbUOp5ITMIc7kBfqlYkKA5KhEHVrGMmUUMt7NeaZg65ojdPk+FtNrBAOXNVM5QM72jnADjM+XVRAQ=="],
 
     "@types/react-dom": ["@types/react-dom@19.2.3", "", { "peerDependencies": { "@types/react": "^19.2.0" } }, "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ=="],
 
@@ -855,7 +855,7 @@
 
     "express": ["express@5.2.1", "", { "dependencies": { "accepts": "^2.0.0", "body-parser": "^2.2.1", "content-disposition": "^1.0.0", "content-type": "^1.0.5", "cookie": "^0.7.1", "cookie-signature": "^1.2.1", "debug": "^4.4.0", "depd": "^2.0.0", "encodeurl": "^2.0.0", "escape-html": "^1.0.3", "etag": "^1.8.1", "finalhandler": "^2.1.0", "fresh": "^2.0.0", "http-errors": "^2.0.0", "merge-descriptors": "^2.0.0", "mime-types": "^3.0.0", "on-finished": "^2.4.1", "once": "^1.4.0", "parseurl": "^1.3.3", "proxy-addr": "^2.0.7", "qs": "^6.14.0", "range-parser": "^1.2.1", "router": "^2.2.0", "send": "^1.1.0", "serve-static": "^2.2.0", "statuses": "^2.0.1", "type-is": "^2.0.1", "vary": "^1.1.2" } }, "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw=="],
 
-    "express-rate-limit": ["express-rate-limit@7.5.1", "", { "peerDependencies": { "express": ">= 4.11" } }, "sha512-7iN8iPMDzOMHPUYllBEsQdWVB6fPDMPqwjBaFrgr4Jgr/+okjvzAy+UHlYYL/Vs0OsOrMkwS6PJDkFlJwoxUnw=="],
+    "express-rate-limit": ["express-rate-limit@8.2.1", "", { "dependencies": { "ip-address": "10.0.1" }, "peerDependencies": { "express": ">= 4.11" } }, "sha512-PCZEIEIxqwhzw4KF0n7QF4QqruVTcF73O5kFKUnGOyjbCCgizBBiFaYpd/fnBLUMPw/BWw9OsiN7GgrNYr7j6g=="],
 
     "fast-deep-equal": ["fast-deep-equal@3.1.3", "", {}, "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="],
 
@@ -991,6 +991,8 @@
 
     "internal-slot": ["internal-slot@1.1.0", "", { "dependencies": { "es-errors": "^1.3.0", "hasown": "^2.0.2", "side-channel": "^1.1.0" } }, "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw=="],
 
+    "ip-address": ["ip-address@10.0.1", "", {}, "sha512-NWv9YLW4PoW2B7xtzaS3NCot75m6nK7Icdv0o3lfMceJVRfSoQwqD4wEH5rLwoKJwUiZ/rfpiVBhnaF0FK4HoA=="],
+
     "ipaddr.js": ["ipaddr.js@1.9.1", "", {}, "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g=="],
 
     "is-array-buffer": ["is-array-buffer@3.0.5", "", { "dependencies": { "call-bind": "^1.0.8", "call-bound": "^1.0.3", "get-intrinsic": "^1.2.6" } }, "sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A=="],
@@ -1399,7 +1401,7 @@
 
     "setprototypeof": ["setprototypeof@1.2.0", "", {}, "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="],
 
-    "shadcn": ["shadcn@3.8.2", "", { "dependencies": { "@antfu/ni": "^25.0.0", "@babel/core": "^7.28.0", "@babel/parser": "^7.28.0", "@babel/plugin-transform-typescript": "^7.28.0", "@babel/preset-typescript": "^7.27.1", "@dotenvx/dotenvx": "^1.48.4", "@modelcontextprotocol/sdk": "^1.17.2", "@types/validate-npm-package-name": "^4.0.2", "browserslist": "^4.26.2", "commander": "^14.0.0", "cosmiconfig": "^9.0.0", "dedent": "^1.6.0", "deepmerge": "^4.3.1", "diff": "^8.0.2", "execa": "^9.6.0", "fast-glob": "^3.3.3", "fs-extra": "^11.3.1", "fuzzysort": "^3.1.0", "https-proxy-agent": "^7.0.6", "kleur": "^4.1.5", "msw": "^2.10.4", "node-fetch": "^3.3.2", "open": "^11.0.0", "ora": "^8.2.0", "postcss": "^8.5.6", "postcss-selector-parser": "^7.1.0", "prompts": "^2.4.2", "recast": "^0.23.11", "stringify-object": "^5.0.0", "ts-morph": "^26.0.0", "tsconfig-paths": "^4.2.0", "validate-npm-package-name": "^7.0.1", "zod": "^3.24.1", "zod-to-json-schema": "^3.24.6" }, "bin": { "shadcn": "dist/index.js" } }, "sha512-4iqRkfmDmChg4lC7qBImi0KWrCKJbb0rNSs8QuocHmKAlX9U3s0ZcYUbth+2sv1ueferzfjD2hswCOm9Ng4ceA=="],
+    "shadcn": ["shadcn@3.8.4", "", { "dependencies": { "@antfu/ni": "^25.0.0", "@babel/core": "^7.28.0", "@babel/parser": "^7.28.0", "@babel/plugin-transform-typescript": "^7.28.0", "@babel/preset-typescript": "^7.27.1", "@dotenvx/dotenvx": "^1.48.4", "@modelcontextprotocol/sdk": "^1.26.0", "@types/validate-npm-package-name": "^4.0.2", "browserslist": "^4.26.2", "commander": "^14.0.0", "cosmiconfig": "^9.0.0", "dedent": "^1.6.0", "deepmerge": "^4.3.1", "diff": "^8.0.2", "execa": "^9.6.0", "fast-glob": "^3.3.3", "fs-extra": "^11.3.1", "fuzzysort": "^3.1.0", "https-proxy-agent": "^7.0.6", "kleur": "^4.1.5", "msw": "^2.10.4", "node-fetch": "^3.3.2", "open": "^11.0.0", "ora": "^8.2.0", "postcss": "^8.5.6", "postcss-selector-parser": "^7.1.0", "prompts": "^2.4.2", "recast": "^0.23.11", "stringify-object": "^5.0.0", "tailwind-merge": "^3.0.1", "ts-morph": "^26.0.0", "tsconfig-paths": "^4.2.0", "validate-npm-package-name": "^7.0.1", "zod": "^3.24.1", "zod-to-json-schema": "^3.24.6" }, "bin": { "shadcn": "dist/index.js" } }, "sha512-pSad/m1+PGzB0aLsRBV0EkyGg9al1nJqYUuucg6d8v8xZspPZ5/ehGNEp5M4b1KQYqdO5/gGPbkhVbgmXqG9Pw=="],
 
     "sharp": ["sharp@0.34.5", "", { "dependencies": { "@img/colour": "^1.0.0", "detect-libc": "^2.1.2", "semver": "^7.7.3" }, "optionalDependencies": { "@img/sharp-darwin-arm64": "0.34.5", "@img/sharp-darwin-x64": "0.34.5", "@img/sharp-libvips-darwin-arm64": "1.2.4", "@img/sharp-libvips-darwin-x64": "1.2.4", "@img/sharp-libvips-linux-arm": "1.2.4", "@img/sharp-libvips-linux-arm64": "1.2.4", "@img/sharp-libvips-linux-ppc64": "1.2.4", "@img/sharp-libvips-linux-riscv64": "1.2.4", "@img/sharp-libvips-linux-s390x": "1.2.4", "@img/sharp-libvips-linux-x64": "1.2.4", "@img/sharp-libvips-linuxmusl-arm64": "1.2.4", "@img/sharp-libvips-linuxmusl-x64": "1.2.4", "@img/sharp-linux-arm": "0.34.5", "@img/sharp-linux-arm64": "0.34.5", "@img/sharp-linux-ppc64": "0.34.5", "@img/sharp-linux-riscv64": "0.34.5", "@img/sharp-linux-s390x": "0.34.5", "@img/sharp-linux-x64": "0.34.5", "@img/sharp-linuxmusl-arm64": "0.34.5", "@img/sharp-linuxmusl-x64": "0.34.5", "@img/sharp-wasm32": "0.34.5", "@img/sharp-win32-arm64": "0.34.5", "@img/sharp-win32-ia32": "0.34.5", "@img/sharp-win32-x64": "0.34.5" } }, "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg=="],
 
diff --git a/components/app-shell.tsx b/components/app-shell.tsx
index acda6d1..088bc76 100644
--- a/components/app-shell.tsx
+++ b/components/app-shell.tsx
@@ -30,11 +30,17 @@ import Header from './header';
 /**
  * Global app shell that renders the sidebar, header, and page content.
  * Styled to match the design-6 command center aesthetic with phase-colored navigation.
+ * Provide `appVersion` from server layout so the sidebar version stays in sync with package metadata.
+ * Provide `defaultSidebarOpen` from server cookie state so refreshes preserve sidebar preference.
  */
 export default function AppShell({
+  appVersion,
+  defaultSidebarOpen,
   children,
   footer,
 }: {
+  appVersion: string;
+  defaultSidebarOpen: boolean;
   children: React.ReactNode;
   footer?: React.ReactNode;
 }) {
@@ -46,7 +52,7 @@ export default function AppShell({
   };
 
   return (
-    <SidebarProvider>
+    <SidebarProvider defaultOpen={defaultSidebarOpen}>
       <Sidebar variant="inset" collapsible="icon">
         <SidebarHeader>
           <SidebarMenu>
@@ -86,7 +92,7 @@ export default function AppShell({
           <div className="flex items-center justify-between gap-2 px-2 text-sm text-muted-foreground group-data-[collapsible=icon]:justify-center">
             <span className="flex items-center gap-1.5 group-data-[collapsible=icon]:text-xs">
               <SparklesIcon className="size-3 text-primary group-data-[collapsible=icon]:hidden" />
-              v1.1.4
+              v{appVersion}
             </span>
             <span className="text-xs font-semibold uppercase tracking-[0.15em] text-primary/60 group-data-[collapsible=icon]:hidden">
               Classroom
@@ -100,7 +106,7 @@ export default function AppShell({
           meta={meta}
           info={{ currentPath: pathname, pages: PAGE_INFOS }}
         />
-        <main className="flex-1 px-4 py-6 md:px-6 lg:px-8 container mx-auto max-w-6xl h-dvh">
+        <main className="flex-1 px-4 py-6 md:px-6 lg:px-8 container mx-auto h-dvh">
           {children}
         </main>
         {footer ?? null}
diff --git a/components/breakout/breakout-groups-card.tsx b/components/breakout/breakout-groups-card.tsx
index df90140..9714877 100644
--- a/components/breakout/breakout-groups-card.tsx
+++ b/components/breakout/breakout-groups-card.tsx
@@ -1,210 +1,212 @@
-'use client';
+'use client'
 
-import type { Student } from '@/lib/models';
+import type { Student } from '@/lib/models'
 
-import { formatStudentName } from '@/lib/students';
+import { formatStudentName } from '@/lib/students'
 
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react'
 
-import { CheckIcon, CopyIcon } from 'lucide-react';
-import { toast } from 'sonner';
+import { CheckIcon, CopyIcon } from 'lucide-react'
+import { toast } from 'sonner'
 
-import GeneratorCardSkeleton from '@/components/loading/generator-card-skeleton';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
+import ClassSelector from '@/components/classes/class-selector'
+import GeneratorCardSkeleton from '@/components/loading/generator-card-skeleton'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { useAppStore } from '@/context/app-store';
-import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';
-import { useTheme } from '@/hooks/use-theme';
+} from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { useAppStore } from '@/context/app-store'
+import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
+import { useTheme } from '@/hooks/use-theme'
 
-const DEFAULT_GROUP_SIZE = 3;
+const DEFAULT_GROUP_SIZE = 3
 
 /**
- * Renders breakout room generation controls and the resulting student groups.
- * Uses active students from app state and supports copying full or per-group output.
+ * Renders breakout room generation controls and the resulting class-scoped student groups.
  */
 export default function BreakoutGroupsCard() {
-  const { theme } = useTheme();
-  const { state, actions } = useAppStore();
-  const [groupSizeOverride, setGroupSizeOverride] = useState<number | null>(
-    null,
-  );
+  const { theme } = useTheme()
+  const { state, actions } = useAppStore()
+  const [groupSizeOverride, setGroupSizeOverride] = useState<number | null>(null)
   const {
     copy: copyAll,
     isCopied: isAllCopied,
     reset: resetAllCopy,
-  } = useCopyToClipboard();
-  const { copy: copyGroup, reset: resetGroupCopy } = useCopyToClipboard();
-  const [copiedGroupIndex, setCopiedGroupIndex] = useState<number | null>(null);
-  const copyGroupTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  } = useCopyToClipboard()
+  const { copy: copyGroup, reset: resetGroupCopy } = useCopyToClipboard()
+  const [copiedGroupIndex, setCopiedGroupIndex] = useState<number | null>(null)
+  const copyGroupTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const activeClassId = state.persisted.activeClassId
 
   useEffect(() => {
     return () => {
       if (copyGroupTimeoutRef.current !== null) {
-        clearTimeout(copyGroupTimeoutRef.current);
+        clearTimeout(copyGroupTimeoutRef.current)
       }
-    };
-  }, []);
+    }
+  }, [])
 
   const activeStudents = useMemo(
     () =>
-      state.persisted.students.filter((student) => student.status === 'active'),
-    [state.persisted.students],
-  );
+      state.persisted.students.filter(
+        (student) => student.classId === activeClassId && student.status === 'active'
+      ),
+    [activeClassId, state.persisted.students]
+  )
+
+  const persistedGroups = activeClassId
+    ? state.persisted.breakoutGroupsByClass[activeClassId] ?? null
+    : null
 
-  const persistedGroups = state.persisted.breakoutGroups;
   const groupSizeToUse =
-    groupSizeOverride ?? persistedGroups?.groupSize ?? DEFAULT_GROUP_SIZE;
-  const canGenerateGroups = activeStudents.length > 0 && groupSizeToUse > 0;
+    groupSizeOverride ?? persistedGroups?.groupSize ?? DEFAULT_GROUP_SIZE
+  const canGenerateGroups = !!activeClassId && activeStudents.length > 0 && groupSizeToUse > 0
 
   const studentById = useMemo(() => {
-    return new Map(
-      state.persisted.students.map((student) => [student.id, student]),
-    );
-  }, [state.persisted.students]);
+    return new Map(activeStudents.map((student) => [student.id, student]))
+  }, [activeStudents])
 
   const groups = useMemo((): Student[][] => {
-    if (!persistedGroups) return [];
+    if (!persistedGroups) return []
     return persistedGroups.groupIds
-      .map(
-        (group: string[]) =>
-          group
-            .map((id: string) => studentById.get(id))
-            .filter(Boolean) as Student[],
+      .map((group) =>
+        group
+          .map((id) => studentById.get(id))
+          .filter(Boolean) as Student[]
       )
-      .filter((group: Student[]) => group.length > 0);
-  }, [persistedGroups, studentById]);
+      .filter((group) => group.length > 0)
+  }, [persistedGroups, studentById])
 
   const groupSummary = useMemo(() => {
     return groups
-      .map((group: Student[], index: number) => {
-        const names = group
-          .map((student: Student) => formatStudentName(student.name))
-          .join(', ');
-        return `Group ${index + 1}: ${names}`;
+      .map((group, index) => {
+        const names = group.map((student) => formatStudentName(student.name)).join(', ')
+        return `Group ${index + 1}: ${names}`
       })
-      .join('\n');
-  }, [groups]);
+      .join('\n')
+  }, [groups])
 
+  /**
+   * Randomizes students and chunks them into equally-sized groups.
+   */
   const buildGroups = (students: Student[], size: number) => {
-    const shuffled = [...students];
+    const shuffled = [...students]
     for (let index = shuffled.length - 1; index > 0; index -= 1) {
-      const swapIndex = Math.floor(Math.random() * (index + 1));
-      [shuffled[index], shuffled[swapIndex]] = [
-        shuffled[swapIndex],
-        shuffled[index],
-      ];
+      const swapIndex = Math.floor(Math.random() * (index + 1))
+      ;[shuffled[index], shuffled[swapIndex]] = [shuffled[swapIndex], shuffled[index]]
     }
-    const nextGroups: Student[][] = [];
+    const nextGroups: Student[][] = []
     for (let index = 0; index < shuffled.length; index += size) {
-      nextGroups.push(shuffled.slice(index, index + size));
+      nextGroups.push(shuffled.slice(index, index + size))
     }
-    return nextGroups;
-  };
+    return nextGroups
+  }
 
   if (!state.ui.isHydrated) {
-    return <GeneratorCardSkeleton />;
+    return <GeneratorCardSkeleton />
   }
 
   return (
-    <Card className="relative overflow-hidden rounded-xl border-border/50 shadow-md py-6 xl:py-8 lg:gap-6 xl:gap-8">
+    <Card className='relative overflow-hidden rounded-xl border-border/50 shadow-md py-6 xl:py-8 lg:gap-6 xl:gap-8'>
       <div
-        className="absolute left-0 top-0 h-full w-1 rounded-l-xl"
+        className='absolute left-0 top-0 h-full w-1 rounded-l-xl'
         style={{ backgroundColor: 'var(--chart-4)', opacity: 0.6 }}
       />
-      <CardHeader className="flex flex-row items-start justify-between gap-2 px-6 xl:px-8">
-        <div className="flex flex-col gap-1">
-          <CardTitle className="text-xl font-bold tracking-tight">Breakout Rooms</CardTitle>
-          <CardDescription className="text-base/relaxed">
-            Shuffle active students into randomized breakout groups.
-          </CardDescription>
+      <CardHeader className='flex flex-col gap-3 px-6 xl:px-8'>
+        <div className='flex flex-row items-start justify-between gap-2'>
+          <div className='flex flex-col gap-1'>
+            <CardTitle className='text-xl font-bold tracking-tight'>Breakout Rooms</CardTitle>
+            <CardDescription className='text-base/relaxed'>
+              Shuffle active students into randomized breakout groups.
+            </CardDescription>
+          </div>
+          <Badge
+            variant='outline'
+            className='rounded-full px-2 py-0.5 text-xs font-medium shrink-0'
+            style={{
+              backgroundColor: 'color-mix(in oklch, var(--chart-4) 10%, transparent)',
+              color: 'var(--chart-4)',
+            }}>
+            {activeStudents.length} students
+          </Badge>
         </div>
-        <Badge
-          variant="outline"
-          className="rounded-full px-2 py-0.5 text-xs font-medium shrink-0"
-          style={{
-            backgroundColor: 'color-mix(in oklch, var(--chart-4) 10%, transparent)',
-            color: 'var(--chart-4)',
-          }}>
-          {activeStudents.length} students
-        </Badge>
+        <ClassSelector compact />
       </CardHeader>
-      <CardContent className="flex flex-col gap-4 px-6 xl:px-8 lg:gap-5 xl:gap-6 text-base/relaxed text-muted-foreground">
-        <div className="flex flex-col gap-3 sm:flex-row sm:items-end">
-          <label className="flex flex-1 flex-col gap-1 text-sm font-medium text-foreground lg:text-base">
+      <CardContent className='flex flex-col gap-4 px-6 xl:px-8 lg:gap-5 xl:gap-6 text-base/relaxed text-muted-foreground'>
+        <div className='flex flex-col gap-3 sm:flex-row sm:items-end'>
+          <label className='flex flex-1 flex-col gap-1 text-sm font-medium text-foreground lg:text-base'>
             Group size
             <Input
-              type="number"
+              type='number'
               min={1}
-              inputMode="numeric"
+              inputMode='numeric'
               value={groupSizeToUse}
               onChange={(event) => {
-                const nextValue = Number(event.target.value);
+                const nextValue = Number(event.target.value)
                 if (!Number.isNaN(nextValue)) {
-                  setGroupSizeOverride(nextValue);
+                  setGroupSizeOverride(nextValue)
                 }
               }}
-              className="text-base/relaxed h-9 placeholder:text-muted-foreground/70 placeholder:text-base/relaxed"
+              className='text-base/relaxed h-9 placeholder:text-muted-foreground/70 placeholder:text-base/relaxed'
             />
           </label>
           <Button
-            className="h-9 font-semibold text-base sm:min-w-32"
+            className='h-9 font-semibold text-base sm:min-w-32'
             disabled={!canGenerateGroups}
             onClick={() => {
-              const size = Math.max(groupSizeToUse, 1);
-              const nextGroups = buildGroups(activeStudents, size);
+              if (!activeClassId) return
+              const size = Math.max(groupSizeToUse, 1)
+              const nextGroups = buildGroups(activeStudents, size)
               actions.setBreakoutGroups({
+                classId: activeClassId,
                 groupSize: size,
-                groupIds: nextGroups.map((group) =>
-                  group.map((student) => student.id),
-                ),
+                groupIds: nextGroups.map((group) => group.map((student) => student.id)),
                 createdAt: Date.now(),
-              });
-              setGroupSizeOverride(null);
-              resetAllCopy();
-              resetGroupCopy();
+              })
+              setGroupSizeOverride(null)
+              resetAllCopy()
+              resetGroupCopy()
               if (copyGroupTimeoutRef.current !== null) {
-                clearTimeout(copyGroupTimeoutRef.current);
-                copyGroupTimeoutRef.current = null;
+                clearTimeout(copyGroupTimeoutRef.current)
+                copyGroupTimeoutRef.current = null
               }
-              setCopiedGroupIndex(null);
+              setCopiedGroupIndex(null)
             }}>
             Generate Groups
           </Button>
           <Button
-            variant="secondary"
-            className="h-9 font-semibold text-base sm:min-w-32"
+            variant='secondary'
+            className='h-9 font-semibold text-base sm:min-w-32'
             disabled={!groups.length}
             onClick={async () => {
-              const ok = await copyAll(groupSummary);
-              if (!ok) toast.error('Failed to copy to clipboard.');
+              const ok = await copyAll(groupSummary)
+              if (!ok) toast.error('Failed to copy to clipboard.')
             }}>
             {isAllCopied ? 'Copied!' : 'Copy Groups'}
           </Button>
         </div>
         {groups.length ? (
-          <div className="flex flex-wrap gap-4 items-center">
-            {groups.map((group: Student[], index: number) => (
+          <div className='flex flex-wrap gap-4 items-center'>
+            {groups.map((group, index) => (
               <div
                 key={`group-${index}`}
-                className="flex flex-col rounded-md border border-border/60 px-3 py-2 w-full sm:w-fit flex-wrap
-                ">
-                <div className="flex items-center justify-between gap-2">
-                  <p className="text-sm/relaxed font-medium uppercase tracking-[0.2em] text-muted-foreground">
+                className='flex flex-col rounded-md border border-border/60 px-3 py-2 w-full sm:w-fit flex-wrap'>
+                <div className='flex items-center justify-between gap-2'>
+                  <p className='text-sm/relaxed font-medium uppercase tracking-[0.2em] text-muted-foreground'>
                     Group {index + 1}
                   </p>
                   <Button
                     disabled={copiedGroupIndex === index}
-                    type="button"
-                    variant="ghost"
-                    size="icon-sm"
+                    type='button'
+                    variant='ghost'
+                    size='icon-sm'
                     aria-label={
                       copiedGroupIndex === index
                         ? `Copied group ${index + 1}`
@@ -212,23 +214,21 @@ export default function BreakoutGroupsCard() {
                     }
                     onClick={async () => {
                       const names = group
-                        .map((student: Student) =>
-                          formatStudentName(student.name),
-                        )
-                        .join(', ');
-                      const ok = await copyGroup(names);
+                        .map((student) => formatStudentName(student.name))
+                        .join(', ')
+                      const ok = await copyGroup(names)
                       if (!ok) {
-                        toast.error('Failed to copy to clipboard.');
-                        return;
+                        toast.error('Failed to copy to clipboard.')
+                        return
                       }
-                      setCopiedGroupIndex(index);
+                      setCopiedGroupIndex(index)
                       if (copyGroupTimeoutRef.current !== null) {
-                        clearTimeout(copyGroupTimeoutRef.current);
+                        clearTimeout(copyGroupTimeoutRef.current)
                       }
                       copyGroupTimeoutRef.current = setTimeout(() => {
-                        setCopiedGroupIndex(null);
-                        copyGroupTimeoutRef.current = null;
-                      }, 2000);
+                        setCopiedGroupIndex(null)
+                        copyGroupTimeoutRef.current = null
+                      }, 2000)
                     }}>
                     {copiedGroupIndex === index ? (
                       <CheckIcon
@@ -241,21 +241,23 @@ export default function BreakoutGroupsCard() {
                     )}
                   </Button>
                 </div>
-                <p className="text-lg/relaxed text-foreground">
-                  {group
-                    .map((student: Student) => formatStudentName(student.name))
-                    .join(', ')}
+                <p className='text-lg/relaxed text-foreground'>
+                  {group.map((student) => formatStudentName(student.name)).join(', ')}
                 </p>
               </div>
             ))}
           </div>
         ) : (
-          <div className="rounded-lg border border-dashed border-border/60 bg-background/60 px-4 py-6 text-center min-h-[100px] flex flex-col justify-center">
-            <p className="text-sm text-muted-foreground lg:text-base">
+          <div className='rounded-lg border border-dashed border-border/60 bg-background/60 px-4 py-6 text-center min-h-[100px] flex flex-col justify-center'>
+            <p className='text-sm text-muted-foreground lg:text-base'>
               Generate groups to see the breakout room list.
             </p>
-            {!activeStudents.length ? (
-              <p className="mt-2 text-xs text-muted-foreground lg:text-sm">
+            {!activeClassId ? (
+              <p className='mt-2 text-xs text-muted-foreground lg:text-sm'>
+                Add and select a class to begin.
+              </p>
+            ) : !activeStudents.length ? (
+              <p className='mt-2 text-xs text-muted-foreground lg:text-sm'>
                 Add or re-enable students to begin.
               </p>
             ) : null}
@@ -263,5 +265,5 @@ export default function BreakoutGroupsCard() {
         )}
       </CardContent>
     </Card>
-  );
+  )
 }
diff --git a/components/classes/class-selector.tsx b/components/classes/class-selector.tsx
new file mode 100644
index 0000000..bfac027
--- /dev/null
+++ b/components/classes/class-selector.tsx
@@ -0,0 +1,69 @@
+'use client'
+
+import { useMemo } from 'react'
+
+import Link from 'next/link'
+
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { useAppStore } from '@/context/app-store'
+
+/**
+ * Renders a class selector bound to the shared active class in app state.
+ * Use on student-dependent pages so all tools scope to the selected class.
+ */
+export default function ClassSelector({
+  label = 'Class',
+  compact = false,
+}: {
+  label?: string
+  compact?: boolean
+}) {
+  const { state, actions } = useAppStore()
+
+  const classes = useMemo(
+    () => [...state.persisted.classes].sort((a, b) => a.name.localeCompare(b.name)),
+    [state.persisted.classes]
+  )
+  const selectedClass =
+    classes.find((entry) => entry.id === state.persisted.activeClassId) ?? classes[0] ?? null
+
+  if (!state.ui.isHydrated) {
+    return null
+  }
+
+  if (!classes.length) {
+    return (
+      <div className='text-sm text-muted-foreground'>
+        No classes yet. Add one on{' '}
+        <Link href='/students' className='text-primary hover:text-primary/80'>
+          Students
+        </Link>
+        .
+      </div>
+    )
+  }
+
+  return (
+    <div className={compact ? 'w-full sm:w-56' : 'w-full sm:w-72'}>
+      <p className='mb-1 text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground'>
+        {label}
+      </p>
+      <Select
+        value={selectedClass?.id ?? ''}
+        onValueChange={(value) => actions.selectActiveClass(value)}>
+        <SelectTrigger className='h-9 text-base/relaxed'>
+          <SelectValue placeholder='Select class'>
+            {selectedClass?.name ?? 'Select class'}
+          </SelectValue>
+        </SelectTrigger>
+        <SelectContent>
+          {classes.map((entry) => (
+            <SelectItem key={entry.id} value={entry.id} className='text-base/relaxed'>
+              {entry.name}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  )
+}
diff --git a/components/generator/generator-card.tsx b/components/generator/generator-card.tsx
index 59254f2..2f848a0 100644
--- a/components/generator/generator-card.tsx
+++ b/components/generator/generator-card.tsx
@@ -1,111 +1,120 @@
-'use client';
+'use client'
 
-import { formatStudentName } from '@/lib/students';
+import { formatStudentName } from '@/lib/students'
 
-import { useMemo } from 'react';
+import { useMemo } from 'react'
 
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
+import ClassSelector from '@/components/classes/class-selector'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from '@/components/ui/card';
-import { useAppStore } from '@/context/app-store';
+} from '@/components/ui/card'
+import { useAppStore } from '@/context/app-store'
 
 /**
- * Generator card: shows server-rendered skeleton until hydrated, then the card.
- * Skeleton is passed from the page (RSC) so it runs as a server component.
+ * Generator card scoped to the selected class. Shows server-rendered skeleton until hydrated.
  */
 export default function GeneratorCard({
   skeleton,
 }: {
-  skeleton: React.ReactNode;
+  skeleton: React.ReactNode
 }) {
-  const { state, actions } = useAppStore();
+  const { state, actions } = useAppStore()
+  const activeClassId = state.persisted.activeClassId
 
   const activeStudents = useMemo(
     () =>
-      state.persisted.students.filter((student) => student.status === 'active'),
-    [state.persisted.students],
-  );
+      state.persisted.students.filter(
+        (student) => student.classId === activeClassId && student.status === 'active'
+      ),
+    [activeClassId, state.persisted.students]
+  )
 
   const remainingStudents = useMemo(
     () =>
       activeStudents.filter(
-        (student) =>
-          !state.domain.generator.usedStudentIds.includes(student.id),
+        (student) => !state.domain.generator.usedStudentIds.includes(student.id)
       ),
-    [activeStudents, state.domain.generator.usedStudentIds],
-  );
+    [activeStudents, state.domain.generator.usedStudentIds]
+  )
 
   const currentStudent = state.domain.generator.currentStudentId
     ? state.persisted.students.find(
-        (student) => student.id === state.domain.generator.currentStudentId,
+        (student) => student.id === state.domain.generator.currentStudentId
       )
-    : null;
+    : null
 
-  const canGenerate = remainingStudents.length > 0;
+  const canGenerate = !!activeClassId && remainingStudents.length > 0
 
   if (!state.ui.isHydrated) {
-    return <>{skeleton}</>;
+    return <>{skeleton}</>
   }
 
   return (
-    <Card className="relative overflow-hidden rounded-xl border-border/50 shadow-md py-6 xl:py-8 lg:gap-6 xl:gap-8">
+    <Card className='relative overflow-hidden rounded-xl border-border/50 shadow-md py-6 xl:py-8 lg:gap-6 xl:gap-8'>
       <div
-        className="absolute left-0 top-0 h-full w-1 rounded-l-xl"
+        className='absolute left-0 top-0 h-full w-1 rounded-l-xl'
         style={{ backgroundColor: 'var(--chart-2)', opacity: 0.6 }}
       />
-      <CardHeader className="flex flex-row items-start justify-between gap-2 px-6 xl:px-8">
-        <div className="flex flex-col gap-1">
-          <CardTitle className="text-xl font-bold tracking-tight">Random Student Pick</CardTitle>
-          <CardDescription className="text-base/relaxed">
-            Generate a random student without repeats until you reset.
-          </CardDescription>
+      <CardHeader className='flex flex-col gap-3 px-6 xl:px-8'>
+        <div className='flex flex-row items-start justify-between gap-2'>
+          <div className='flex flex-col gap-1'>
+            <CardTitle className='text-xl font-bold tracking-tight'>Random Student Pick</CardTitle>
+            <CardDescription className='text-base/relaxed'>
+              Generate a random student without repeats until you reset.
+            </CardDescription>
+          </div>
+          <Badge
+            variant='outline'
+            className='rounded-full px-2 py-0.5 text-xs font-medium shrink-0'
+            style={{
+              backgroundColor: 'color-mix(in oklch, var(--chart-2) 10%, transparent)',
+              color: 'var(--chart-2)',
+            }}>
+            {remainingStudents.length} remaining
+          </Badge>
         </div>
-        <Badge
-          variant="outline"
-          className="rounded-full px-2 py-0.5 text-xs font-medium shrink-0"
-          style={{
-            backgroundColor: 'color-mix(in oklch, var(--chart-2) 10%, transparent)',
-            color: 'var(--chart-2)',
-          }}>
-          {remainingStudents.length} remaining
-        </Badge>
+        <ClassSelector compact />
       </CardHeader>
-      <CardContent className="flex flex-col gap-4 px-6 xl:px-8 lg:gap-5 xl:gap-6 text-base/relaxed text-muted-foreground">
-        <div className="rounded-lg border border-dashed border-border/60 bg-background/60 px-4 py-6 text-center h-[160px] flex flex-col justify-center">
-          <p className="text-sm font-semibold uppercase tracking-[0.2em] text-muted-foreground lg:text-base">
+      <CardContent className='flex flex-col gap-4 px-6 xl:px-8 lg:gap-5 xl:gap-6 text-base/relaxed text-muted-foreground'>
+        <div className='rounded-lg border border-dashed border-border/60 bg-background/60 px-4 py-6 text-center h-[160px] flex flex-col justify-center'>
+          <p className='text-sm font-semibold uppercase tracking-[0.2em] text-muted-foreground lg:text-base'>
             Selected Student
           </p>
-          <p className="mt-3 text-xl font-semibold sm:text-2xl lg:text-3xl line-clamp-3">
+          <p className='mt-3 text-xl font-semibold sm:text-2xl lg:text-3xl line-clamp-3'>
             {currentStudent ? formatStudentName(currentStudent.name) : '—'}
           </p>
-          {!activeStudents.length ? (
-            <p className="mt-2 text-sm text-muted-foreground lg:text-base">
+          {!activeClassId ? (
+            <p className='mt-2 text-sm text-muted-foreground lg:text-base'>
+              Add and select a class to begin.
+            </p>
+          ) : !activeStudents.length ? (
+            <p className='mt-2 text-sm text-muted-foreground lg:text-base'>
               Add or re-enable students to begin.
             </p>
           ) : null}
         </div>
-        <div className="flex flex-col gap-2 sm:flex-row">
+        <div className='flex flex-col gap-2 sm:flex-row'>
           <Button
             onClick={actions.drawStudent}
             disabled={!canGenerate}
-            className="h-9 font-semibold text-base sm:min-w-32">
+            className='h-9 font-semibold text-base sm:min-w-32'>
             Generate Student
           </Button>
           <Button
-            variant="secondary"
+            variant='secondary'
             onClick={actions.resetGenerator}
             disabled={!state.domain.generator.usedStudentIds.length}
-            className="h-9 font-semibold text-base sm:min-w-32">
+            className='h-9 font-semibold text-base sm:min-w-32'>
             Reset Generator
           </Button>
         </div>
       </CardContent>
     </Card>
-  );
+  )
 }
diff --git a/components/loading/quiz-editor-skeleton.tsx b/components/loading/quiz-editor-skeleton.tsx
index bbe54d7..d27f3e2 100644
--- a/components/loading/quiz-editor-skeleton.tsx
+++ b/components/loading/quiz-editor-skeleton.tsx
@@ -1,22 +1,32 @@
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Skeleton } from "@/components/ui/skeleton"
 
-function PlaceholderCard({ titleWidth }: { titleWidth: string }) {
+/**
+ * Renders one placeholder card matching the merged quiz builder form card.
+ */
+function BuilderPlaceholderCard() {
   return (
     <Card className="relative overflow-hidden rounded-xl border-border/50 lg:py-6 xl:py-8 lg:gap-6 xl:gap-8">
       <div className="absolute left-0 top-0 h-full w-1 rounded-l-xl" style={{ backgroundColor: 'var(--chart-3)', opacity: 0.6 }} />
       <CardHeader className="lg:px-6 xl:px-8">
         <CardTitle className="lg:text-lg">
-          <Skeleton className={`h-4 ${titleWidth}`} />
+          <Skeleton className="h-4 w-32" />
         </CardTitle>
         <CardDescription className="lg:text-base/relaxed">
-          <Skeleton className="h-3 w-56" />
+          <Skeleton className="h-3 w-72" />
         </CardDescription>
       </CardHeader>
       <CardContent className="flex flex-col gap-3 lg:px-6 xl:px-8 lg:text-base/relaxed">
         <Skeleton className="h-7 w-full" />
         <Skeleton className="h-7 w-full" />
+        <Skeleton className="h-7 w-5/12" />
+        <Skeleton className="h-2.5 w-16" />
+        <Skeleton className="h-7 w-full" />
+        <Skeleton className="h-14 w-full" />
+        <Skeleton className="h-7 w-6/12" />
+        <Skeleton className="h-2.5 w-14" />
         <Skeleton className="h-7 w-full" />
+        <Skeleton className="h-16 w-full" />
       </CardContent>
     </Card>
   )
@@ -28,12 +38,8 @@ function PlaceholderCard({ titleWidth }: { titleWidth: string }) {
  */
 export default function QuizEditorSkeleton() {
   return (
-    <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)]">
-      <div className="flex flex-col gap-4">
-        <PlaceholderCard titleWidth="w-28" />
-        <PlaceholderCard titleWidth="w-32" />
-        <PlaceholderCard titleWidth="w-40" />
-      </div>
+    <div className="grid items-start gap-4 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
+      <BuilderPlaceholderCard />
       <Card className="relative overflow-hidden rounded-xl border-border/50 lg:py-6 xl:py-8 lg:gap-6 xl:gap-8">
         <div className="absolute left-0 top-0 h-full w-1 rounded-l-xl" style={{ backgroundColor: 'var(--chart-3)', opacity: 0.6 }} />
         <CardHeader className="lg:px-6 xl:px-8">
@@ -45,7 +51,7 @@ export default function QuizEditorSkeleton() {
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-3 lg:px-6 xl:px-8 lg:text-base/relaxed">
-          {Array.from({ length: 5 }).map((_, index) => (
+          {Array.from({ length: 7 }).map((_, index) => (
             <Skeleton key={index} className="h-5 w-full" />
           ))}
         </CardContent>
diff --git a/components/play/quiz-play-card.tsx b/components/play/quiz-play-card.tsx
index 1f64346..6268aff 100644
--- a/components/play/quiz-play-card.tsx
+++ b/components/play/quiz-play-card.tsx
@@ -4,6 +4,7 @@ import { formatStudentName } from '@/lib/students';
 
 import { useMemo } from 'react';
 
+import ClassSelector from '@/components/classes/class-selector';
 import QuizSelector from '@/components/quizzes/quiz-selector';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -27,14 +28,17 @@ export default function QuizPlayCard({
   skeleton: React.ReactNode;
 }) {
   const { state, actions } = useAppStore();
+  const activeClassId = state.persisted.activeClassId;
 
   const selectedQuizId = state.domain.quizPlay.selectedQuizId;
   const quiz = selectedQuizId ? state.persisted.quizzes[selectedQuizId] : null;
 
   const activeStudents = useMemo(
     () =>
-      state.persisted.students.filter((student) => student.status === 'active'),
-    [state.persisted.students],
+      state.persisted.students.filter(
+        (student) => student.classId === activeClassId && student.status === 'active',
+      ),
+    [activeClassId, state.persisted.students],
   );
 
   const availableQuestionIds = useMemo(() => {
@@ -59,7 +63,9 @@ export default function QuizPlayCard({
     (question) => question.id === state.domain.quizPlay.currentQuestionId,
   );
   const currentStudent = state.persisted.students.find(
-    (student) => student.id === state.domain.quizPlay.currentStudentId,
+    (student) =>
+      student.id === state.domain.quizPlay.currentStudentId &&
+      student.classId === activeClassId,
   );
 
   const canDraw =
@@ -82,6 +88,7 @@ export default function QuizPlayCard({
         </CardDescription>
       </CardHeader>
       <CardContent className="flex flex-col gap-4 px-6 xl:px-8 lg:gap-5 xl:gap-6 text-base/relaxed text-muted-foreground">
+        <ClassSelector compact />
         <QuizSelector
           label="Select quiz"
           value={selectedQuizId}
@@ -131,25 +138,25 @@ export default function QuizPlayCard({
         </div>
       </CardContent>
       <CardFooter className="px-6 xl:px-8">
-        <div className="flex flex-col gap-2 sm:flex-row">
+        <div className="flex w-full flex-col gap-2 sm:flex-row">
           <Button
             onClick={actions.drawQuizPair}
             disabled={!canDraw}
-            className="h-9 font-semibold text-base sm:min-w-32">
+            className="h-9 w-full font-semibold text-base sm:min-w-32 sm:w-auto">
             Draw Student + Question
           </Button>
           <Button
             variant="secondary"
             onClick={actions.revealAnswer}
             disabled={!currentQuestion || state.domain.quizPlay.answerRevealed}
-            className="h-9 font-semibold text-base sm:min-w-32">
+            className="h-9 w-full font-semibold text-base sm:min-w-32 sm:w-auto">
             Reveal Answer
           </Button>
           <Button
             variant="ghost"
             onClick={actions.resetQuizPlay}
             disabled={!selectedQuizId}
-            className="h-9 font-semibold text-base sm:min-w-32">
+            className="h-9 w-full font-semibold text-base sm:min-w-32 sm:w-auto">
             Reset Round
           </Button>
         </div>
diff --git a/components/projects/project-list-builder.tsx b/components/projects/project-list-builder.tsx
index d8b5165..fdfa835 100644
--- a/components/projects/project-list-builder.tsx
+++ b/components/projects/project-list-builder.tsx
@@ -9,6 +9,7 @@ import Link from 'next/link';
 import { UsersIcon } from 'lucide-react';
 import { toast } from 'sonner';
 
+import ClassSelector from '@/components/classes/class-selector';
 import { Badge } from '@/components/ui/badge';
 import { Button, buttonVariants } from '@/components/ui/button';
 import {
@@ -56,6 +57,7 @@ type GroupMode = 'none' | 'grouped';
  */
 export default function ProjectListBuilder() {
   const { state, actions } = useAppStore();
+  const activeClassId = state.persisted.activeClassId;
   const isMobile = useIsMobile();
   const [selectedIds, setSelectedIds] = useState<string[]>([]);
   const [name, setName] = useState('');
@@ -70,10 +72,12 @@ export default function ProjectListBuilder() {
 
   const students = useMemo(
     () =>
-      [...state.persisted.students].sort((a, b) =>
+      [...state.persisted.students]
+        .filter((student) => student.classId === activeClassId)
+        .sort((a, b) =>
         a.name.localeCompare(b.name),
-      ),
-    [state.persisted.students],
+        ),
+    [activeClassId, state.persisted.students],
   );
 
   const visibleStudents = useMemo(
@@ -104,6 +108,12 @@ export default function ProjectListBuilder() {
   };
 
   const handleCreateList = () => {
+    if (!activeClassId) {
+      const message = 'Create and select a class before building a project list.';
+      setError(message);
+      toast.error(message);
+      return;
+    }
     const trimmedName = name.trim();
     const trimmedType = projectType.trim();
     if (!trimmedName || !trimmedType) {
@@ -182,6 +192,7 @@ export default function ProjectListBuilder() {
           Choose students from your roster and save them as a project-ready list
           or group set.
         </CardDescription>
+        <ClassSelector compact />
       </CardHeader>
       <CardContent className="flex flex-col gap-4 px-6 xl:px-8 lg:gap-5 xl:gap-6 text-base/relaxed text-muted-foreground">
         <div className="grid gap-4 md:grid-cols-[minmax(0,1fr)_minmax(0,1.1fr)]">
@@ -492,7 +503,7 @@ export default function ProjectListBuilder() {
           <Button
             type="button"
             onClick={handleCreateList}
-            className="h-9 font-semibold text-base">
+            className="h-9 w-full font-semibold text-base sm:w-auto">
             Save Project List
           </Button>
         </div>
diff --git a/components/projects/project-list-view.tsx b/components/projects/project-list-view.tsx
index 99b88be..026b5a8 100644
--- a/components/projects/project-list-view.tsx
+++ b/components/projects/project-list-view.tsx
@@ -9,6 +9,7 @@ import { useTheme } from 'next-themes';
 
 import { UsersIcon } from 'lucide-react';
 
+import ClassSelector from '@/components/classes/class-selector';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -57,6 +58,7 @@ import { useIsMobile } from '@/hooks/use-mobile';
 export default function ProjectListView() {
   const { theme } = useTheme();
   const { state, actions } = useAppStore();
+  const activeClassId = state.persisted.activeClassId;
   const isMobile = useIsMobile();
   const [editingListId, setEditingListId] = useState<string | null>(null);
   const [addStudentSheetOpen, setAddStudentSheetOpen] = useState(false);
@@ -75,6 +77,10 @@ export default function ProjectListView() {
       ),
     [state.persisted.projectLists],
   );
+  const visibleProjectLists = useMemo(
+    () => projectLists.filter((list) => list.classId === activeClassId),
+    [activeClassId, projectLists],
+  );
 
   const studentMap = useMemo(() => {
     return new Map(
@@ -186,7 +192,7 @@ export default function ProjectListView() {
     return null;
   }
 
-  if (!projectLists.length) {
+  if (!visibleProjectLists.length) {
     return (
       <Card className="relative overflow-hidden rounded-xl border-border/50 shadow-md py-6 xl:py-8 lg:gap-6 xl:gap-8">
         <div
@@ -195,6 +201,7 @@ export default function ProjectListView() {
         />
         <CardHeader className="px-6 xl:px-8">
           <CardTitle className="text-xl font-bold tracking-tight">Saved project lists</CardTitle>
+          <ClassSelector compact />
         </CardHeader>
         <CardContent className="px-6 xl:px-8 text-base/relaxed text-muted-foreground">
           <p className="text-sm">Your saved project lists will appear here.</p>
@@ -205,7 +212,8 @@ export default function ProjectListView() {
 
   return (
     <div className="flex flex-col gap-4">
-      {projectLists.map((list) => {
+      <ClassSelector />
+      {visibleProjectLists.map((list) => {
         const createdAt = new Date(list.createdAt).toLocaleDateString();
         const isEditing = editingListId === list.id;
         const isGroupedList = list.groups.length > 0;
diff --git a/components/quizzes/__tests__/quiz-editor-form.test.tsx b/components/quizzes/__tests__/quiz-editor-form.test.tsx
new file mode 100644
index 0000000..2902e24
--- /dev/null
+++ b/components/quizzes/__tests__/quiz-editor-form.test.tsx
@@ -0,0 +1,150 @@
+import userEvent from '@testing-library/user-event';
+import { screen, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { toast } from 'sonner';
+
+import { renderWithProvider } from '@/__tests__/test-utils';
+import QuizEditorForm from '@/components/quizzes/quiz-editor-form';
+
+vi.mock('sonner', () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
+describe('QuizEditorForm', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    vi.clearAllMocks();
+  });
+
+  /**
+   * Renders the quiz editor form with a fresh quiz draft.
+   *
+   * @returns Testing-library utilities and mounted form content.
+   */
+  const renderForm = () =>
+    renderWithProvider(<QuizEditorForm quiz={null} quizId={null} />);
+
+  it('renders a unified builder card with question and import controls', () => {
+    const { container } = renderForm();
+
+    expect(screen.getByText('Quiz Builder')).toBeInTheDocument();
+    expect(screen.getByLabelText(/quiz title/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/quiz description/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/add question/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/import quiz from json/i)).toBeInTheDocument();
+    expect(container.querySelector('.overflow-y-auto')).not.toBeInTheDocument();
+  });
+
+  it('imports a valid json file into the current draft', async () => {
+    const user = userEvent.setup();
+    const { container } = renderForm();
+
+    const fileInput = screen.getByLabelText(/import quiz from json/i);
+    const file = new File(
+      [
+        JSON.stringify({
+          title: 'Math Quiz',
+          description: 'optional',
+          questions: [
+            { prompt: 'What is 2 + 2?', answer: '4' },
+            { prompt: 'What is 3 + 3?', answer: '6' },
+          ],
+        }),
+      ],
+      'quiz.json',
+      { type: 'application/json' },
+    );
+
+    await user.upload(fileInput, file);
+
+    await waitFor(() => {
+      expect(screen.getByDisplayValue('Math Quiz')).toBeInTheDocument();
+      expect(screen.getByDisplayValue('optional')).toBeInTheDocument();
+      expect(
+        screen.getByText(
+          'Loaded 2 questions into the draft. Click "Save Quiz" to keep it.',
+        ),
+      ).toBeInTheDocument();
+      expect(screen.getAllByText('What is 2 + 2?').length).toBeGreaterThan(0);
+      expect(container.querySelector('.overflow-y-auto')).toBeInTheDocument();
+    });
+  });
+
+  it('shows an error for invalid json files', async () => {
+    const user = userEvent.setup();
+    renderForm();
+
+    const fileInput = screen.getByLabelText(/import quiz from json/i);
+    const file = new File(['{invalid json'], 'broken.json', {
+      type: 'application/json',
+    });
+
+    await user.upload(fileInput, file);
+
+    await waitFor(() => {
+      expect(
+        screen.getByText('Invalid JSON file. Please check the format and try again.'),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('shows a schema error for missing required json fields', async () => {
+    const user = userEvent.setup();
+    renderForm();
+
+    const fileInput = screen.getByLabelText(/import quiz from json/i);
+    const file = new File([JSON.stringify({ title: 'Missing questions' })], 'invalid-schema.json', {
+      type: 'application/json',
+    });
+
+    await user.upload(fileInput, file);
+
+    await waitFor(() => {
+      expect(
+        screen.getByText(
+          'Import must match quiz objects with title and questions[{prompt,answer}].',
+        ),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('imports multiple quizzes from a json array', async () => {
+    const user = userEvent.setup();
+    renderForm();
+
+    const fileInput = screen.getByLabelText(/import quiz from json/i);
+    const file = new File(
+      [
+        JSON.stringify([
+          {
+            title: 'Quiz A',
+            description: 'Set A',
+            questions: [{ prompt: '1+1?', answer: '2' }],
+          },
+          {
+            title: 'Quiz B',
+            description: 'Set B',
+            questions: [{ prompt: '2+2?', answer: '4' }],
+          },
+        ]),
+      ],
+      'bulk.json',
+      { type: 'application/json' },
+    );
+
+    await user.upload(fileInput, file);
+
+    await waitFor(() => {
+      expect(
+        vi.mocked(toast.success).mock.calls.some(
+          ([message]) =>
+            message ===
+            'Saved 2 quizzes from file. The last imported quiz is selected.',
+        ),
+      ).toBe(true);
+    });
+  });
+});
diff --git a/components/quizzes/quiz-editor-form.tsx b/components/quizzes/quiz-editor-form.tsx
index 4cb7055..d659a04 100644
--- a/components/quizzes/quiz-editor-form.tsx
+++ b/components/quizzes/quiz-editor-form.tsx
@@ -2,7 +2,7 @@
 
 import type { Question, Quiz } from '@/lib/models';
 
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 
 import { PencilIcon, PlusIcon, Trash2Icon } from 'lucide-react';
 import { toast } from 'sonner';
@@ -33,43 +33,213 @@ import {
   FieldDescription,
   FieldError,
   FieldLabel,
+  FieldSeparator,
 } from '@/components/ui/field';
 import { Input } from '@/components/ui/input';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
 import { Textarea } from '@/components/ui/textarea';
 import { useAppStore } from '@/context/app-store';
 
 type QuizEditorFormProps = {
   quiz: Quiz | null;
   quizId: string | null;
-  importCard: React.ReactNode;
+};
+
+type JsonPrimitive = boolean | null | number | string;
+type JsonValue = JsonArray | JsonObject | JsonPrimitive;
+type JsonArray = JsonValue[];
+type JsonObject = { [key: string]: JsonValue };
+type ImportedQuestionDraft = {
+  prompt: string;
+  answer: string;
+};
+type ImportedQuizDraft = {
+  title: string;
+  description?: string;
+  questions: ImportedQuestionDraft[];
+};
+type QuizImportResult =
+  | { status: 'success'; drafts: ImportedQuizDraft[] }
+  | { status: 'invalid-json' }
+  | { status: 'invalid-schema' };
+type InputChangeEvent = Parameters<
+  NonNullable<React.ComponentProps<'input'>['onChange']>
+>[0];
+
+/**
+ * Checks whether a JSON value is a plain object.
+ *
+ * @param value - Parsed JSON value to inspect.
+ * @returns `true` when the value can be safely accessed by object keys.
+ */
+const isJsonObject = (value: JsonValue): value is JsonObject =>
+  typeof value === 'object' && value !== null && !Array.isArray(value);
+
+/**
+ * Safely reads a string field from a JSON object.
+ *
+ * @param object - Parsed JSON object.
+ * @param key - Field name to read.
+ * @returns A string when the field exists and is a string, otherwise `null`.
+ */
+const getJsonStringField = (object: JsonObject, key: string): string | null => {
+  const value = object[key];
+  return typeof value === 'string' ? value : null;
+};
+
+/**
+ * Extracts valid prompt/answer pairs from a JSON value.
+ *
+ * @param value - Raw `questions` value from parsed JSON.
+ * @returns Question drafts with trimmed prompt/answer values.
+ */
+const parseImportedQuestions = (value: JsonValue): ImportedQuestionDraft[] => {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+
+  const parsedQuestions: ImportedQuestionDraft[] = [];
+  for (const questionValue of value) {
+    if (!isJsonObject(questionValue)) continue;
+    const promptValue = getJsonStringField(questionValue, 'prompt');
+    const answerValue = getJsonStringField(questionValue, 'answer');
+    const prompt = promptValue?.trim() ?? '';
+    const answer = answerValue?.trim() ?? '';
+    if (!prompt || !answer) continue;
+    parsedQuestions.push({ prompt, answer });
+  }
+
+  return parsedQuestions;
+};
+
+/**
+ * Parses one quiz object from JSON into a normalized draft.
+ *
+ * @param value - Raw JSON value expected to match one quiz payload.
+ * @returns A normalized draft when valid, otherwise `null`.
+ */
+const parseImportedQuizDraft = (value: JsonValue): ImportedQuizDraft | null => {
+  if (!isJsonObject(value)) {
+    return null;
+  }
+
+  const rawTitle = getJsonStringField(value, 'title');
+  const descriptionValue = value.description;
+  if (descriptionValue !== undefined && typeof descriptionValue !== 'string') {
+    return null;
+  }
+  const questionsValue = value.questions;
+  if (!rawTitle || !questionsValue) {
+    return null;
+  }
+
+  const title = rawTitle.trim();
+  const description =
+    typeof descriptionValue === 'string' ? descriptionValue.trim() : '';
+  if (!title) {
+    return null;
+  }
+
+  const questions = parseImportedQuestions(questionsValue);
+  if (!questions.length) {
+    return null;
+  }
+
+  return {
+    title,
+    ...(description ? { description } : {}),
+    questions,
+  };
+};
+
+/**
+ * Validates raw import text against the quiz import schema.
+ *
+ * Expected shapes:
+ * 1) `{ "title": string, "description"?: string, "questions": [{ "prompt": string, "answer": string }] }`
+ * 2) An array of the same quiz object shape for bulk import.
+ *
+ * @param payload - UTF-8 text read from the uploaded JSON file.
+ * @returns A discriminated result describing success or validation failure.
+ */
+const parseQuizImportPayload = (payload: string): QuizImportResult => {
+  let parsed: JsonValue;
+  try {
+    parsed = JSON.parse(payload) as JsonValue;
+  } catch {
+    return { status: 'invalid-json' };
+  }
+
+  if (Array.isArray(parsed)) {
+    if (!parsed.length) {
+      return { status: 'invalid-schema' };
+    }
+    const drafts: ImportedQuizDraft[] = [];
+    for (const entry of parsed) {
+      const parsedDraft = parseImportedQuizDraft(entry);
+      if (!parsedDraft) {
+        return { status: 'invalid-schema' };
+      }
+      drafts.push(parsedDraft);
+    }
+    return { status: 'success', drafts };
+  }
+
+  const parsedDraft = parseImportedQuizDraft(parsed);
+  if (!parsedDraft) {
+    return { status: 'invalid-schema' };
+  }
+  return { status: 'success', drafts: [parsedDraft] };
+};
+
+/**
+ * Reads a selected file as UTF-8 text.
+ * Uses `File.text()` when available and falls back to `FileReader` for
+ * environments that do not implement the modern file API.
+ *
+ * @param file - Browser file object selected from the import control.
+ * @returns Promise resolving to the file contents as text.
+ */
+const readFileAsText = (file: File): Promise<string> => {
+  if (typeof file.text === 'function') {
+    return file.text();
+  }
+
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = reader.result;
+      if (typeof result === 'string') {
+        resolve(result);
+        return;
+      }
+      reject(new Error('Unable to read file contents.'));
+    };
+    reader.onerror = () => reject(new Error('Unable to read file contents.'));
+    reader.readAsText(file);
+  });
 };
 
 /**
  * Renders quiz editing controls for quiz metadata and question management.
  * Accepts an optional existing quiz and emits store actions for create/update/delete flows.
  */
-export default function QuizEditorForm({
-  quiz,
-  quizId,
-  importCard,
-}: QuizEditorFormProps) {
+export default function QuizEditorForm({ quiz, quizId }: QuizEditorFormProps) {
   const { state, actions } = useAppStore();
+  const builderCardRef = useRef<HTMLDivElement | null>(null);
 
   // Form state - initialized from props, reset via key pattern in parent
   const [title, setTitle] = useState(quiz?.title ?? '');
+  const [description, setDescription] = useState(quiz?.description ?? '');
   const [questions, setQuestions] = useState<Question[]>(quiz?.questions ?? []);
   const [prompt, setPrompt] = useState('');
   const [answer, setAnswer] = useState('');
   const [quizError, setQuizError] = useState<string | null>(null);
   const [questionError, setQuestionError] = useState<string | null>(null);
+  const [importError, setImportError] = useState<string | null>(null);
+  const [importNotice, setImportNotice] = useState<string | null>(null);
+  const [builderCardHeight, setBuilderCardHeight] = useState<number | null>(
+    null,
+  );
   const [editingQuestionId, setEditingQuestionId] = useState<string | null>(
     null,
   );
@@ -80,6 +250,41 @@ export default function QuizEditorForm({
     [questions, editingQuestionId],
   );
 
+  /**
+   * Tracks builder card height so the questions card can scroll instead of
+   * growing taller than the builder panel.
+   */
+  useEffect(() => {
+    const element = builderCardRef.current;
+    if (!element) {
+      return;
+    }
+
+    const measureHeight = () => {
+      const nextHeight = Math.round(element.getBoundingClientRect().height);
+      setBuilderCardHeight(nextHeight);
+    };
+
+    measureHeight();
+    const rafId = window.requestAnimationFrame(measureHeight);
+
+    if (typeof ResizeObserver !== 'undefined') {
+      const observer = new ResizeObserver(measureHeight);
+      observer.observe(element);
+      return () => {
+        window.cancelAnimationFrame(rafId);
+        observer.disconnect();
+      };
+    }
+
+    window.addEventListener('resize', measureHeight);
+
+    return () => {
+      window.cancelAnimationFrame(rafId);
+      window.removeEventListener('resize', measureHeight);
+    };
+  }, []);
+
   /**
    * Validates quiz metadata, saves changes, and confirms with a toast.
    */
@@ -95,10 +300,10 @@ export default function QuizEditorForm({
     }
 
     if (quizId) {
-      actions.updateQuiz(quizId, trimmed, questions);
+      actions.updateQuiz(quizId, trimmed, questions, description);
       toast.success('Quiz updated.');
     } else {
-      actions.createQuiz(trimmed, questions);
+      actions.createQuiz(trimmed, questions, description);
       toast.success('Quiz created.');
     }
     setQuizError(null);
@@ -139,9 +344,8 @@ export default function QuizEditorForm({
     setAnswer('');
     setEditingQuestionId(null);
     setQuestionError(null);
-    toast.success(
-      editingQuestionId ? 'Question updated.' : 'Question added.',
-    );
+    setImportNotice(null);
+    toast.success(editingQuestionId ? 'Question updated.' : 'Question added.');
   };
 
   /**
@@ -201,176 +405,304 @@ export default function QuizEditorForm({
     toast.success('Quiz deleted.');
   };
 
+  /**
+   * Imports a quiz JSON file into the current draft title and question list.
+   *
+   * @param event - File input change event carrying the selected `.json` file.
+   * @returns A promise that resolves after file validation and draft updates.
+   */
+  const handleQuizFileImport = async (event: InputChangeEvent) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    try {
+      const payload = await readFileAsText(file);
+      const result = parseQuizImportPayload(payload);
+      if (result.status === 'invalid-json') {
+        const message =
+          'Invalid JSON file. Please check the format and try again.';
+        setImportError(message);
+        setImportNotice(null);
+        toast.error(message);
+        return;
+      }
+      if (result.status === 'invalid-schema') {
+        const message =
+          'Import must match quiz objects with title and questions[{prompt,answer}].';
+        setImportError(message);
+        setImportNotice(null);
+        toast.error(message);
+        return;
+      }
+      if (result.drafts.length > 1) {
+        for (const draft of result.drafts) {
+          const nextQuestions: Question[] = draft.questions.map((question) => ({
+            id: crypto.randomUUID(),
+            prompt: question.prompt,
+            answer: question.answer,
+          }));
+          actions.createQuiz(draft.title, nextQuestions, draft.description);
+        }
+        const message = `Saved ${result.drafts.length} quizzes from file. The last imported quiz is selected.`;
+        setImportError(null);
+        setImportNotice(message);
+        toast.success(message);
+        return;
+      }
+
+      const singleDraft = result.drafts[0];
+      const importedQuestions: Question[] = singleDraft.questions.map(
+        (question) => ({
+          id: crypto.randomUUID(),
+          prompt: question.prompt,
+          answer: question.answer,
+        }),
+      );
+
+      setTitle(singleDraft.title);
+      setDescription(singleDraft.description ?? '');
+      setQuestions(importedQuestions);
+      setPrompt('');
+      setAnswer('');
+      setQuizError(null);
+      setQuestionError(null);
+      setEditingQuestionId(null);
+      setImportError(null);
+      const draftMessage = `Loaded ${importedQuestions.length} question${importedQuestions.length === 1 ? '' : 's'} into the draft. Click "Save Quiz" to keep it.`;
+      setImportNotice(draftMessage);
+      toast.success('Loaded quiz into draft. Not saved yet.');
+    } catch (error) {
+      console.error('Failed to import quiz file', error);
+      const message = 'Could not read the file. Please try again.';
+      setImportError(message);
+      setImportNotice(null);
+      toast.error(message);
+    } finally {
+      event.target.value = '';
+    }
+  };
+
   return (
     <>
-      <div className="flex flex-col gap-4">
-        <Card className="relative overflow-hidden rounded-xl border-border/50 shadow-md py-6 xl:py-8 lg:gap-6 xl:gap-8">
-          <div
-            className="absolute left-0 top-0 h-full w-1 rounded-l-xl"
-            style={{ backgroundColor: 'var(--chart-3)', opacity: 0.6 }}
+      <div ref={builderCardRef} className="min-w-0 w-full">
+      <Card className="relative h-full min-w-0 w-full overflow-hidden rounded-xl border-border/50 py-6 shadow-md lg:gap-6 xl:gap-8 xl:py-8">
+        <div
+          className="absolute left-0 top-0 h-full w-1 rounded-l-xl"
+          style={{ backgroundColor: 'var(--chart-3)', opacity: 0.6 }}
+        />
+        <CardHeader className="px-6 xl:px-8">
+          <CardTitle className="text-xl font-bold tracking-tight">
+            Quiz Builder
+          </CardTitle>
+          <CardDescription className="text-base/relaxed">
+            Select a saved quiz, build new questions, or import JSON into the
+            current draft.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-col gap-4 px-6 text-base/relaxed text-muted-foreground lg:gap-5 xl:gap-6 xl:px-8">
+          <QuizSelector
+            label="Saved quizzes"
+            value={quizId}
+            onChange={actions.selectQuizForEditor}
+            quizzes={state.persisted.quizIndex}
           />
-          <CardHeader className="px-6 xl:px-8">
-            <CardTitle className="text-xl font-bold tracking-tight">Quiz Details</CardTitle>
-            <CardDescription className="text-base/relaxed">
-              Select an existing quiz or start a new one.
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="flex flex-col gap-4 px-6 xl:px-8 lg:gap-5 xl:gap-6 text-base/relaxed text-muted-foreground">
-            <QuizSelector
-              label="Saved quizzes"
-              value={quizId}
-              onChange={actions.selectQuizForEditor}
-              quizzes={state.persisted.quizIndex}
-            />
-            <Field>
-              <FieldLabel htmlFor="quiz-title" className="text-lg/relaxed">
-                Quiz title
-              </FieldLabel>
-              <FieldContent>
-                <Input
-                  id="quiz-title"
-                  value={title}
-                  onChange={(event) => setTitle(event.target.value)}
-                  className="text-base/relaxed h-9 placeholder:text-muted-foreground/70 placeholder:text-base/relaxed"
-                  placeholder="e.g. Geography Review"
-                />
-                <FieldDescription className="text-base/relaxed text-muted-foreground/70">
-                  Titles are display-only and can be edited later.
-                </FieldDescription>
-              </FieldContent>
-            </Field>
-            {quizError ? <FieldError>{quizError}</FieldError> : null}
-            <div className="flex flex-col gap-2 sm:flex-row">
-              <Button
-                onClick={handleSaveQuiz}
-                className="h-9 font-semibold text-base sm:min-w-32">
-                Save Quiz
-              </Button>
+          <Field>
+            <FieldLabel htmlFor="quiz-title" className="text-lg/relaxed">
+              Quiz title
+            </FieldLabel>
+            <FieldContent>
+              <Input
+                id="quiz-title"
+                value={title}
+                onChange={(event) => setTitle(event.target.value)}
+                className="h-9 text-base/relaxed placeholder:text-base/relaxed placeholder:text-muted-foreground/70"
+                placeholder="e.g. Geography Review"
+              />
+              <FieldDescription className="text-base/relaxed text-muted-foreground/70">
+                Titles are display-only and can be edited later.
+              </FieldDescription>
+            </FieldContent>
+          </Field>
+          <Field>
+            <FieldLabel htmlFor="quiz-description" className="text-lg/relaxed">
+              Quiz description (optional)
+            </FieldLabel>
+            <FieldContent>
+              <Textarea
+                id="quiz-description"
+                value={description}
+                onChange={(event) => setDescription(event.target.value)}
+                placeholder="Short context for this quiz"
+                className="text-base/relaxed placeholder:text-base/relaxed placeholder:text-muted-foreground/70"
+              />
+            </FieldContent>
+          </Field>
+          {quizError ? <FieldError>{quizError}</FieldError> : null}
+          <div className="flex flex-col gap-2 sm:flex-row">
+            <Button
+              onClick={handleSaveQuiz}
+              className="h-9 font-semibold text-base sm:min-w-32">
+              Save Quiz
+            </Button>
+            <Button
+              variant="secondary"
+              onClick={handleNewQuiz}
+              className="h-9 font-semibold text-base sm:min-w-32">
+              New Quiz
+            </Button>
+          </div>
+          {quizId ? (
+            <AlertDialog>
+              <AlertDialogTrigger
+                render={
+                  <Button
+                    variant="destructive"
+                    className="h-9 w-full text-base font-semibold active:font-normal md:w-6/12 lg:w-8/12 xl:w-6/12 2xl:w-5/12"
+                  />
+                }>
+                Delete Quiz
+              </AlertDialogTrigger>
+              <AlertDialogContent>
+                <AlertDialogHeader>
+                  <AlertDialogTitle>Delete this quiz?</AlertDialogTitle>
+                  <AlertDialogDescription>
+                    This will remove the quiz and its questions from local
+                    storage.
+                  </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                  <AlertDialogCancel>Cancel</AlertDialogCancel>
+                  <AlertDialogAction onClick={handleDeleteQuiz}>
+                    Delete
+                  </AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
+          ) : null}
+
+          <FieldSeparator>Questions</FieldSeparator>
+
+          <Field>
+            <FieldLabel className="text-lg/relaxed" htmlFor="question-prompt">
+              {editingQuestion ? 'Edit question' : 'Add question'}
+            </FieldLabel>
+            <FieldContent>
+              <Input
+                id="question-prompt"
+                value={prompt}
+                onChange={(event) => setPrompt(event.target.value)}
+                placeholder="What is the capital of France?"
+                className="h-9 text-base/relaxed placeholder:text-base/relaxed placeholder:text-muted-foreground/70"
+              />
+            </FieldContent>
+          </Field>
+          <Field>
+            <FieldLabel className="text-lg/relaxed" htmlFor="question-answer">
+              Answer
+            </FieldLabel>
+            <FieldContent>
+              <Textarea
+                id="question-answer"
+                value={answer}
+                onChange={(event) => setAnswer(event.target.value)}
+                placeholder="Paris"
+                className="text-base/relaxed placeholder:text-base/relaxed placeholder:text-muted-foreground/70"
+              />
+              <FieldDescription className="text-base/relaxed text-muted-foreground/70">
+                Add prompts and answers before saving the quiz.
+              </FieldDescription>
+            </FieldContent>
+          </Field>
+          {questionError ? <FieldError>{questionError}</FieldError> : null}
+          <div className="flex flex-col gap-2 sm:flex-row">
+            <Button
+              onClick={handleAddOrUpdateQuestion}
+              className="h-9 font-semibold text-base sm:min-w-32">
+              <PlusIcon className="size-3.5" />
+              {editingQuestion ? 'Update Question' : 'Add Question'}
+            </Button>
+            {editingQuestion ? (
               <Button
                 variant="secondary"
-                onClick={handleNewQuiz}
+                onClick={handleCancelEdit}
                 className="h-9 font-semibold text-base sm:min-w-32">
-                New Quiz
+                Cancel Edit
               </Button>
-            </div>
-            {quizId ? (
-              <AlertDialog>
-                <AlertDialogTrigger
-                  render={
-                    <Button
-                      variant="destructive"
-                      className="w-full h-9 font-semibold active:font-normal md:w-6/12 lg:w-8/12 xl:w-6/12 2xl:w-5/12 text-base"
-                    />
-                  }>
-                  Delete Quiz
-                </AlertDialogTrigger>
-                <AlertDialogContent>
-                  <AlertDialogHeader>
-                    <AlertDialogTitle>Delete this quiz?</AlertDialogTitle>
-                    <AlertDialogDescription>
-                      This will remove the quiz and its questions from local
-                      storage.
-                    </AlertDialogDescription>
-                  </AlertDialogHeader>
-                  <AlertDialogFooter>
-                    <AlertDialogCancel>Cancel</AlertDialogCancel>
-                    <AlertDialogAction onClick={handleDeleteQuiz}>
-                      Delete
-                    </AlertDialogAction>
-                  </AlertDialogFooter>
-                </AlertDialogContent>
-              </AlertDialog>
             ) : null}
-          </CardContent>
-        </Card>
+          </div>
 
-        <Card className="relative overflow-hidden rounded-xl border-border/50 shadow-md py-6 xl:py-8 lg:gap-6 xl:gap-8">
-          <div
-            className="absolute left-0 top-0 h-full w-1 rounded-l-xl"
-            style={{ backgroundColor: 'var(--chart-3)', opacity: 0.6 }}
-          />
-          <CardHeader className="px-6 xl:px-8">
-            <CardTitle className="text-xl font-bold tracking-tight">
-              {editingQuestion ? 'Edit Question' : 'Add Question'}
-            </CardTitle>
-            <CardDescription className="text-base/relaxed">
-              Add prompts and answers before saving the quiz.
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="flex flex-col gap-4 px-6 xl:px-8 lg:gap-5 xl:gap-6 text-base/relaxed text-muted-foreground">
-            <Field>
-              <FieldLabel className="text-lg/relaxed" htmlFor="question-prompt">
-                Question
-              </FieldLabel>
-              <FieldContent>
-                <Input
-                  id="question-prompt"
-                  value={prompt}
-                  onChange={(event) => setPrompt(event.target.value)}
-                  placeholder="What is the capital of France?"
-                  className="text-base/relaxed h-9 placeholder:text-muted-foreground/70 placeholder:text-base/relaxed"
-                />
-              </FieldContent>
-            </Field>
-            <Field>
-              <FieldLabel className="text-lg/relaxed" htmlFor="question-answer">
-                Answer
-              </FieldLabel>
-              <FieldContent>
-                <Textarea
-                  id="question-answer"
-                  value={answer}
-                  onChange={(event) => setAnswer(event.target.value)}
-                  placeholder="Paris"
-                  className="text-base/relaxed placeholder:text-muted-foreground/70 placeholder:text-base/relaxed"
-                />
-              </FieldContent>
-            </Field>
-            {questionError ? <FieldError>{questionError}</FieldError> : null}
-            <div className="flex flex-col gap-2 sm:flex-row">
-              <Button
-                onClick={handleAddOrUpdateQuestion}
-                className="h-9 font-semibold text-base sm:min-w-32">
-                <PlusIcon className="size-3.5" />
-                {editingQuestion ? 'Update Question' : 'Add Question'}
-              </Button>
-              {editingQuestion ? (
-                <Button
-                  variant="secondary"
-                  onClick={handleCancelEdit}
-                  className="h-9 font-semibold text-base sm:min-w-32">
-                  Cancel Edit
-                </Button>
-              ) : null}
-            </div>
-          </CardContent>
-        </Card>
+          <FieldSeparator>Import</FieldSeparator>
 
-        {importCard}
+          <Field>
+            <FieldLabel htmlFor="quiz-import-file" className="text-lg/relaxed">
+              Import quiz from JSON
+            </FieldLabel>
+            <FieldContent className="gap-2">
+              <Input
+                id="quiz-import-file"
+                type="file"
+                accept=".json,application/json"
+                onChange={handleQuizFileImport}
+                className="h-10 max-w-full text-base/relaxed file:my-1 file:mr-5 file:cursor-pointer file:rounded-md file:border-accent/50 file:bg-accent/10 file:px-5 file:text-base/relaxed file:text-muted-foreground/70"
+              />
+              <FieldDescription className="text-base/relaxed text-muted-foreground/70">
+                Import one quiz object or an array of quiz objects. Each quiz
+                needs <code>title</code>, optional <code>description</code>, and{' '}
+                <code>questions</code> with <code>prompt</code> and{' '}
+                <code>answer</code>. Single quiz files load into your draft
+                (not saved until you click Save Quiz). Arrays save quizzes right
+                away.
+              </FieldDescription>
+              <pre className="overflow-x-auto rounded-md border border-border/60 bg-background/40 p-3 text-sm/relaxed text-foreground">
+                {`{
+  "title": "Math Quiz",
+  "description": "Optional",
+  "questions": [
+    { "prompt": "What is 2 + 2?", "answer": "4" }
+  ]
+}`}
+              </pre>
+              {importError ? <FieldError>{importError}</FieldError> : null}
+              {importNotice ? (
+                <p className="text-base/relaxed text-muted-foreground">
+                  {importNotice}
+                </p>
+              ) : null}
+            </FieldContent>
+          </Field>
+        </CardContent>
+      </Card>
       </div>
 
-      <Card className="relative overflow-hidden rounded-xl border-border/50 shadow-md py-6 xl:py-8 lg:gap-6 xl:gap-8">
+      <Card
+        className="relative flex min-h-0 min-w-0 w-full flex-col overflow-hidden rounded-xl border-border/50 py-6 shadow-md lg:gap-6 xl:gap-8 xl:py-8"
+        style={
+          builderCardHeight
+            ? { maxHeight: `${builderCardHeight}px` }
+            : undefined
+        }>
         <div
           className="absolute left-0 top-0 h-full w-1 rounded-l-xl"
           style={{ backgroundColor: 'var(--chart-3)', opacity: 0.6 }}
         />
         <CardHeader className="px-6 xl:px-8">
-          <CardTitle className="text-xl font-bold tracking-tight">Questions</CardTitle>
+          <CardTitle className="text-xl font-bold tracking-tight">
+            Questions
+          </CardTitle>
           <CardDescription className="text-base/relaxed">
             {questions.length
               ? `${questions.length} question${questions.length === 1 ? '' : 's'}`
               : 'Add questions to build your quiz.'}
           </CardDescription>
         </CardHeader>
-        <CardContent className="px-6 xl:px-8 text-base/relaxed text-muted-foreground">
+        <CardContent className="flex min-h-0 flex-1 flex-col px-6 text-base/relaxed text-muted-foreground xl:px-8">
           {questions.length ? (
-            <>
-              {/* Mobile question cards */}
-              <div className="flex flex-col gap-3 md:hidden">
+            <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain pr-1 shadow-inner">
+              <div className="flex flex-col gap-2">
                 {questions.map((question) => (
                   <div
                     key={question.id}
-                    className="rounded-lg border border-border/60 bg-background/40 p-4">
+                    className="rounded-lg border border-border/60 bg-background/40 p-3">
                     <div className="flex items-start justify-between gap-2">
                       <p className="text-base/relaxed font-medium text-foreground line-clamp-2 flex-1">
                         {question.prompt}
@@ -394,56 +726,13 @@ export default function QuizEditorForm({
                         </Button>
                       </div>
                     </div>
-                    <p className="mt-1 text-sm/relaxed text-muted-foreground line-clamp-3">
+                    <p className="mt-1 text-sm/relaxed text-muted-foreground line-clamp-2">
                       {question.answer}
                     </p>
                   </div>
                 ))}
               </div>
-
-              {/* Desktop table */}
-              <Table className="hidden md:table">
-                <TableHeader>
-                  <TableRow>
-                    <TableHead className="text-base/relaxed">Prompt</TableHead>
-                    <TableHead className="text-base/relaxed">Answer</TableHead>
-                    <TableHead className="text-right text-base/relaxed">
-                      Actions
-                    </TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {questions.map((question) => (
-                    <TableRow key={question.id}>
-                      <TableCell className="whitespace-normal text-base/relaxed">
-                        {question.prompt}
-                      </TableCell>
-                      <TableCell className="whitespace-normal text-base/relaxed">
-                        {question.answer}
-                      </TableCell>
-                      <TableCell>
-                        <div className="flex items-center justify-end gap-2">
-                          <Button
-                            variant="ghost"
-                            size="icon-sm"
-                            onClick={() => handleEditQuestion(question.id)}>
-                            <PencilIcon className="size-3.5" />
-                            <span className="sr-only">Edit</span>
-                          </Button>
-                          <Button
-                            variant="ghost"
-                            size="icon-sm"
-                            onClick={() => handleRemoveQuestion(question.id)}>
-                            <Trash2Icon className="size-3.5 text-destructive" />
-                            <span className="sr-only">Remove</span>
-                          </Button>
-                        </div>
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </>
+            </div>
           ) : (
             <p className="text-base text-muted-foreground">
               No questions yet. Add your first question to get started.
diff --git a/components/quizzes/quiz-editor.tsx b/components/quizzes/quiz-editor.tsx
index cc8ea24..8035cfd 100644
--- a/components/quizzes/quiz-editor.tsx
+++ b/components/quizzes/quiz-editor.tsx
@@ -2,7 +2,6 @@
 
 import { useAppStore } from '@/context/app-store';
 import QuizEditorForm from '@/components/quizzes/quiz-editor-form';
-import QuizImportCard from '@/components/quizzes/quiz-import-card';
 
 /**
  * Quiz editor wrapper: shows server-rendered skeleton until hydrated, then the editor.
@@ -22,13 +21,12 @@ export default function QuizEditor({
   }
 
   return (
-    <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)]">
+    <div className="grid grid-cols-1 items-start gap-4 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
       {/* Key pattern: reset all form state when quiz changes */}
       <QuizEditorForm
         key={activeQuizId ?? "new"}
         quiz={activeQuiz}
         quizId={activeQuizId}
-        importCard={<QuizImportCard />}
       />
     </div>
   )
diff --git a/components/quizzes/quiz-import-card.tsx b/components/quizzes/quiz-import-card.tsx
deleted file mode 100644
index 32b439c..0000000
--- a/components/quizzes/quiz-import-card.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
-'use client';
-
-import type { Question } from '@/lib/models';
-
-import { useState } from 'react';
-
-import { toast } from 'sonner';
-
-import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import {
-  Field,
-  FieldContent,
-  FieldDescription,
-  FieldError,
-  FieldLabel,
-} from '@/components/ui/field';
-import { Textarea } from '@/components/ui/textarea';
-import { useAppStore } from '@/context/app-store';
-
-/**
- * Renders JSON import controls for creating one or more quizzes in bulk.
- * Expects quiz payloads with `title` and `questions[]` containing `prompt` and `answer`.
- */
-export default function QuizImportCard() {
-  const { actions } = useAppStore();
-  const [importPayload, setImportPayload] = useState('');
-  const [importError, setImportError] = useState<string | null>(null);
-  const [importNotice, setImportNotice] = useState<string | null>(null);
-
-  /**
-   * Parses JSON input, creates quizzes, and summarizes the import result.
-   */
-  const handleImportQuiz = () => {
-    if (!importPayload.trim()) {
-      toast.error('Paste a JSON quiz payload to import.');
-      setImportError('Paste a JSON quiz payload to import.');
-      setImportNotice(null);
-      return;
-    }
-
-    try {
-      const parsed = JSON.parse(importPayload);
-      const inputs = Array.isArray(parsed) ? parsed : [parsed];
-      const drafts = inputs
-        .map((entry) => {
-          if (!entry || typeof entry !== 'object') return null;
-          const titleValue = (entry as { title?: unknown }).title;
-          const title = typeof titleValue === 'string' ? titleValue.trim() : '';
-          const questionsValue = (entry as { questions?: unknown }).questions;
-          if (!title || !Array.isArray(questionsValue)) return null;
-
-          const questions = questionsValue
-            .map((question) => {
-              if (!question || typeof question !== 'object') return null;
-              const promptValue = (question as { prompt?: unknown }).prompt;
-              const answerValue = (question as { answer?: unknown }).answer;
-              const promptText =
-                typeof promptValue === 'string' ? promptValue.trim() : '';
-              const answerText =
-                typeof answerValue === 'string' ? answerValue.trim() : '';
-              if (!promptText || !answerText) return null;
-              return {
-                id: crypto.randomUUID(),
-                prompt: promptText,
-                answer: answerText,
-              };
-            })
-            .filter(Boolean) as Question[];
-
-          if (!questions.length) return null;
-          return {
-            title,
-            questions,
-          };
-        })
-        .filter(Boolean) as Array<{ title: string; questions: Question[] }>;
-
-      if (!drafts.length) {
-        const message = 'No valid quiz data found in that JSON.';
-        setImportError(message);
-        setImportNotice(null);
-        toast.error(message);
-        return;
-      }
-
-      drafts.forEach((draft) =>
-        actions.createQuiz(draft.title, draft.questions),
-      );
-      setImportNotice(
-        `Imported ${drafts.length} quiz${drafts.length === 1 ? '' : 'zes'}.`,
-      );
-      toast.success(
-        `Imported ${drafts.length} quiz${drafts.length === 1 ? '' : 'zes'}.`,
-      );
-      setImportError(null);
-      setImportPayload('');
-    } catch {
-      const message = 'Invalid JSON. Please check the format and try again.';
-      setImportError(message);
-      setImportNotice(null);
-      toast.error(message);
-    }
-  };
-
-  return (
-    <Card className="relative overflow-hidden rounded-xl border-border/50 shadow-md py-6 xl:py-8 lg:gap-6 xl:gap-8">
-      <div
-        className="absolute left-0 top-0 h-full w-1 rounded-l-xl"
-        style={{ backgroundColor: 'var(--chart-3)', opacity: 0.6 }}
-      />
-      <CardHeader className="px-6 xl:px-8">
-        <CardTitle className="text-xl font-bold tracking-tight">Import Quiz JSON</CardTitle>
-        <CardDescription className="text-base/relaxed">
-          Paste a JSON object or array that matches the quiz format.
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="flex flex-col gap-4 px-6 xl:px-8 lg:gap-5 xl:gap-6 text-base/relaxed text-muted-foreground">
-        <Field>
-          <FieldLabel className="text-lg/relaxed" htmlFor="quiz-import">
-            Quiz JSON
-          </FieldLabel>
-          <FieldContent>
-            <Textarea
-              id="quiz-import"
-              value={importPayload}
-              onChange={(event) => {
-                setImportPayload(event.target.value);
-                if (importError) setImportError(null);
-              }}
-              placeholder='{"title":"Algebra","questions":[{"prompt":"2+2?","answer":"4"}]}'
-              className="text-base/relaxed placeholder:text-muted-foreground/70 placeholder:text-base/relaxed"
-            />
-            <FieldDescription className="text-base/relaxed text-muted-foreground/70">
-              Required fields: <code>title</code> and <code>questions</code>{' '}
-              with <code>prompt</code> and <code>answer</code>.
-            </FieldDescription>
-            {importError ? <FieldError>{importError}</FieldError> : null}
-            {importNotice ? (
-              <p className="text-sm text-muted-foreground">{importNotice}</p>
-            ) : null}
-          </FieldContent>
-        </Field>
-        <Button
-          onClick={handleImportQuiz}
-          className="w-full h-9 font-semibold active:font-normal md:w-6/12 lg:w-8/12 xl:w-6/12 2xl:w-5/12 text-base">
-          Import Quiz
-        </Button>
-      </CardContent>
-    </Card>
-  );
-}
diff --git a/components/students/__tests__/student-form.test.tsx b/components/students/__tests__/student-form.test.tsx
index 9fe01e0..6573180 100644
--- a/components/students/__tests__/student-form.test.tsx
+++ b/components/students/__tests__/student-form.test.tsx
@@ -145,9 +145,11 @@ describe("StudentForm", () => {
     )
 
     await waitFor(() => {
-      expect(screen.getByLabelText(/import from/i)).toBeInTheDocument()
+      expect(screen.getByLabelText(/import students from/i)).toBeInTheDocument()
     })
 
-    expect(screen.getByText(/upload a .txt file/i)).toBeInTheDocument()
+    expect(
+      screen.getByLabelText(/import students from \.txt/i)
+    ).toBeInTheDocument()
   })
 })
diff --git a/components/students/student-form.tsx b/components/students/student-form.tsx
index b2ad29b..4bc3c4f 100644
--- a/components/students/student-form.tsx
+++ b/components/students/student-form.tsx
@@ -1,19 +1,32 @@
-'use client';
+'use client'
 
-import { normalizeStudentName, studentNameKey } from '@/lib/students';
+import { parseClassImportJson, parseClassImportText, parseClassNamesFromText } from '@/lib/classes'
+import { normalizeStudentName, studentNameKey } from '@/lib/students'
 
-import { useState } from 'react';
+import { useMemo, useState } from 'react'
 
-import { toast } from 'sonner';
+import { toast } from 'sonner'
 
-import { Button } from '@/components/ui/button';
+import ClassSelector from '@/components/classes/class-selector'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@/components/ui/alert-dialog'
+import { Button } from '@/components/ui/button'
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from '@/components/ui/card';
+} from '@/components/ui/card'
 import {
   Field,
   FieldContent,
@@ -21,199 +34,508 @@ import {
   FieldError,
   FieldLabel,
   FieldSeparator,
-} from '@/components/ui/field';
-import { Input } from '@/components/ui/input';
-import { useAppStore } from '@/context/app-store';
+} from '@/components/ui/field'
+import { Input } from '@/components/ui/input'
+import { useAppStore } from '@/context/app-store'
 
 /** Event type for form submit; avoids deprecated React.FormEvent. */
 type FormSubmitEvent = Parameters<
   NonNullable<React.ComponentProps<'form'>['onSubmit']>
->[0];
+>[0]
 /** Event type for input change; avoids deprecated React.ChangeEvent. */
 type InputChangeEvent = Parameters<
   NonNullable<React.ComponentProps<'input'>['onChange']>
->[0];
+>[0]
 
 /**
- * Add/import students form. Shows server-rendered skeleton until hydrated.
- * Skeleton is passed from the page (RSC) so it runs as a server component.
+ * Add/import classes and students form. Shows server-rendered skeleton until hydrated.
+ * Class imports support text and JSON, while student imports target the selected class.
  */
 export default function StudentForm({
   skeleton,
 }: {
-  skeleton: React.ReactNode;
+  skeleton: React.ReactNode
 }) {
-  const { state, actions } = useAppStore();
-  const [name, setName] = useState('');
-  const [error, setError] = useState<string | null>(null);
-  const [importError, setImportError] = useState<string | null>(null);
-  const [importNotice, setImportNotice] = useState<string | null>(null);
+  const { state, actions } = useAppStore()
+
+  const [classNameInput, setClassNameInput] = useState('')
+  const [classError, setClassError] = useState<string | null>(null)
+  const [classImportError, setClassImportError] = useState<string | null>(null)
+  const [classImportNotice, setClassImportNotice] = useState<string | null>(null)
+
+  const [studentNameInput, setStudentNameInput] = useState('')
+  const [studentError, setStudentError] = useState<string | null>(null)
+  const [studentImportError, setStudentImportError] = useState<string | null>(null)
+  const [studentImportNotice, setStudentImportNotice] = useState<string | null>(null)
+
+  const activeClassId = state.persisted.activeClassId
+  const activeClass = state.persisted.classes.find((entry) => entry.id === activeClassId) ?? null
+
+  const studentsInActiveClass = useMemo(
+    () => state.persisted.students.filter((student) => student.classId === activeClassId),
+    [activeClassId, state.persisted.students]
+  )
 
   /**
-   * Parses a raw comma-separated list, adds unique students, and returns a count.
-   * Uses persisted students to de-dupe against existing roster entries.
-   *
-   * @param raw - Comma-separated student names to add.
-   * @returns The number of new students added to state.
+   * Adds normalized class names while preventing duplicate class titles.
+   * Accepts comma/newline-delimited text and returns the number of classes created.
    */
-  const addNames = (raw: string) => {
+  const addClassNames = (raw: string) => {
+    const existing = new Set(
+      state.persisted.classes.map((entry) => entry.name.trim().toLocaleLowerCase())
+    )
+
+    const names = parseClassNamesFromText(raw)
+    const uniqueNames: string[] = []
+
+    for (const name of names) {
+      const key = name.toLocaleLowerCase()
+      if (existing.has(key)) continue
+      existing.add(key)
+      uniqueNames.push(name)
+    }
+
+    for (const name of uniqueNames) {
+      actions.addClass(name)
+    }
+
+    return uniqueNames.length
+  }
+
+  /**
+   * Adds normalized student names into the currently selected class.
+   * Returns how many new students were created.
+   */
+  const addStudentsToActiveClass = (raw: string) => {
+    if (!activeClassId) {
+      setStudentError('Create and select a class first.')
+      return 0
+    }
+
     const existingKeys = new Set(
-      state.persisted.students.map((student) => studentNameKey(student.name)),
-    );
+      studentsInActiveClass.map((student) => studentNameKey(student.name))
+    )
     const names = raw
       .split(',')
       .map((entry) => normalizeStudentName(entry))
-      .filter(Boolean);
+      .filter(Boolean)
 
-    const uniqueNames: string[] = [];
+    const uniqueNames: string[] = []
     for (const entry of names) {
-      const key = studentNameKey(entry);
-      if (existingKeys.has(key)) continue;
-      existingKeys.add(key);
-      uniqueNames.push(entry);
+      const key = studentNameKey(entry)
+      if (existingKeys.has(key)) continue
+      existingKeys.add(key)
+      uniqueNames.push(entry)
     }
 
-    if (!uniqueNames.length) {
-      return 0;
+    for (const entry of uniqueNames) {
+      actions.addStudent(entry)
     }
 
-    for (const entry of uniqueNames) {
-      actions.addStudent(entry);
+    return uniqueNames.length
+  }
+
+  /**
+   * Handles manual class creation from input text.
+   */
+  const handleClassSubmit = (event: FormSubmitEvent) => {
+    event.preventDefault()
+    const added = addClassNames(classNameInput)
+    if (!added) {
+      setClassError('Enter at least one new class name.')
+      toast.error('Enter at least one new class name.')
+      return
     }
 
-    return uniqueNames.length;
-  };
+    setClassNameInput('')
+    setClassError(null)
+    setClassImportError(null)
+    setClassImportNotice(`Added ${added} class${added === 1 ? '' : 'es'}.`)
+    toast.success(`Added ${added} class${added === 1 ? '' : 'es'}.`)
+  }
+
+  /**
+   * Deletes a class and all students assigned to it.
+   */
+  const handleDeleteClass = (classId: string, className: string) => {
+    actions.deleteClass(classId)
+    toast.success(`Deleted class ${className}.`)
+  }
+
+  /**
+   * Deletes every class and all class-scoped student/group/project data.
+   */
+  const handleDeleteAllClasses = () => {
+    actions.clearClasses()
+    toast.success('Deleted all classes.')
+  }
+
+  /**
+   * Builds a concise import summary including skipped records when present.
+   */
+  const buildClassImportSummary = (
+    classCount: number,
+    studentCount: number,
+    skippedClasses: number,
+    skippedStudents: number
+  ) => {
+    const summary = `Imported ${classCount} class${classCount === 1 ? '' : 'es'} and ${studentCount} student${studentCount === 1 ? '' : 's'}.`
+    const skippedBits = [
+      skippedClasses ? `${skippedClasses} invalid class line${skippedClasses === 1 ? '' : 's'} skipped` : null,
+      skippedStudents
+        ? `${skippedStudents} invalid or duplicate student${skippedStudents === 1 ? '' : 's'} skipped`
+        : null,
+    ].filter((entry): entry is string => entry !== null)
+
+    if (!skippedBits.length) {
+      return summary
+    }
+    return `${summary} ${skippedBits.join('; ')}.`
+  }
 
   /**
-   * Handles manual student entry submission and triggers a toast on success.
-   *
-   * @param event - Form submit event from the student name form.
+   * Imports class data from .txt or .json files.
    */
-  const handleSubmit = (event: FormSubmitEvent) => {
-    event.preventDefault();
-    const addedCount = addNames(name);
+  const handleClassFileImport = async (event: InputChangeEvent) => {
+    const file = event.target.files?.[0]
+    if (!file) return
+
+    try {
+      const text = await file.text()
+      const isJsonFile =
+        file.name.toLocaleLowerCase().endsWith('.json') ||
+        file.type.toLocaleLowerCase().includes('json')
+
+      const parsed = isJsonFile ? parseClassImportJson(text) : parseClassImportText(text)
+      if (!parsed.ok) {
+        setClassImportError(parsed.error)
+        setClassImportNotice(null)
+        toast.error(parsed.error)
+        return
+      }
+
+      actions.importClassRecords(parsed.classes)
+      const studentCount = parsed.classes.reduce(
+        (count, classRecord) => count + classRecord.students.length,
+        0
+      )
+      const summary = buildClassImportSummary(
+        parsed.classes.length,
+        studentCount,
+        parsed.skippedClasses,
+        parsed.skippedStudents
+      )
+      setClassImportError(null)
+      setClassImportNotice(
+        `${summary} Matching class names overwrite that class roster with imported students.`
+      )
+      toast.success(summary)
+    } catch (error) {
+      console.error('Failed to import classes', error)
+      const message = 'Could not read the class file. Please try again.'
+      setClassImportError(message)
+      setClassImportNotice(null)
+      toast.error(message)
+    } finally {
+      event.target.value = ''
+    }
+  }
+
+  /**
+   * Handles manual student entry submission for the selected class.
+   */
+  const handleStudentSubmit = (event: FormSubmitEvent) => {
+    event.preventDefault()
+    const addedCount = addStudentsToActiveClass(studentNameInput)
     if (!addedCount) {
-      toast.error('Enter at least one new student name.');
-      setError('Enter at least one new student name.');
-      return;
+      toast.error('Enter at least one new student name.')
+      setStudentError('Enter at least one new student name.')
+      return
     }
-    setName('');
-    setError(null);
-    setImportNotice(null);
-    toast.success(`Added ${addedCount} student${addedCount === 1 ? '' : 's'}.`);
-  };
+
+    setStudentNameInput('')
+    setStudentError(null)
+    setStudentImportNotice(null)
+    toast.success(`Added ${addedCount} student${addedCount === 1 ? '' : 's'}.`)
+  }
 
   /**
-   * Reads a .txt upload, imports students, and confirms the result with a toast.
-   *
-   * @param event - File input change event containing the uploaded file.
-   * @returns A promise that resolves after the file is processed.
+   * Imports students from text into the selected class.
    */
-  const handleFileImport = async (event: InputChangeEvent) => {
-    const file = event.target.files?.[0];
-    if (!file) return;
+  const handleStudentFileImport = async (event: InputChangeEvent) => {
+    const file = event.target.files?.[0]
+    if (!file) return
 
     try {
-      const text = await file.text();
-      const addedCount = addNames(text);
+      const text = await file.text()
+      const addedCount = addStudentsToActiveClass(text)
       if (!addedCount) {
-        toast.error('No new students were found in that file.');
-        setImportError('No new students were found in that file.');
-        setImportNotice(null);
+        const message = 'No new students were found in that file.'
+        setStudentImportError(message)
+        setStudentImportNotice(null)
+        toast.error(message)
       } else {
-        setImportError(null);
-        setImportNotice(
-          `Imported ${addedCount} student${addedCount === 1 ? '' : 's'}.`,
-        );
-        toast.success(
-          `Imported ${addedCount} student${addedCount === 1 ? '' : 's'}.`,
-        );
+        setStudentImportError(null)
+        setStudentImportNotice(
+          `Imported ${addedCount} student${addedCount === 1 ? '' : 's'} into ${activeClass?.name ?? 'the selected class'}.`
+        )
+        toast.success(`Imported ${addedCount} student${addedCount === 1 ? '' : 's'}.`)
       }
     } catch (error) {
-      console.error('Failed to import students', error);
-      const message = 'Could not read the file. Please try again.';
-      setImportError(message);
-      setImportNotice(null);
-      toast.error(message);
+      console.error('Failed to import students', error)
+      const message = 'Could not read the student file. Please try again.'
+      setStudentImportError(message)
+      setStudentImportNotice(null)
+      toast.error(message)
     } finally {
-      event.target.value = '';
+      event.target.value = ''
     }
-  };
+  }
 
   if (!state.ui.isHydrated) {
-    return <>{skeleton}</>;
+    return <>{skeleton}</>
   }
 
   return (
-    <Card className="relative overflow-hidden rounded-xl border-border/50 shadow-md py-6 xl:py-8 lg:gap-6 xl:gap-8">
+    <Card
+      data-students-form-card
+      className='relative overflow-hidden rounded-xl border-border/50 shadow-md py-6 xl:py-8 lg:gap-6 xl:gap-8'>
       <div
-        className="absolute left-0 top-0 h-full w-1 rounded-l-xl"
+        className='absolute left-0 top-0 h-full w-1 rounded-l-xl'
         style={{ backgroundColor: 'var(--chart-1)', opacity: 0.6 }}
       />
-      <CardHeader className="px-6 xl:px-8">
-        <CardTitle className="text-xl font-bold tracking-tight">Add Students</CardTitle>
-        <CardDescription className="text-base/relaxed">
-          Add students manually or paste a comma-separated list. You can also
-          import a comma-separated .txt file below.
+      <CardHeader className='px-6 xl:px-8'>
+        <CardTitle className='text-xl font-bold tracking-tight'>Classes and Students</CardTitle>
+        <CardDescription className='text-base/relaxed'>
+          Create classes first, then add or import students into the selected class.
         </CardDescription>
       </CardHeader>
-      <CardContent className="px-6 xl:px-8 gap-5 xl:gap-6 text-base/relaxed flex flex-col">
-        <form onSubmit={handleSubmit} className="">
-          <Field className="flex-1">
-            <FieldLabel htmlFor="student-name" className="text-lg/relaxed">
+      <CardContent className='px-6 xl:px-8 gap-5 xl:gap-6 text-base/relaxed flex flex-col'>
+        <Field>
+          <FieldLabel className='text-lg/relaxed'>Active class</FieldLabel>
+          <FieldContent className='gap-3'>
+            <div className='flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between'>
+              <ClassSelector compact />
+              <div className='flex flex-wrap gap-2 lg:justify-end'>
+                <AlertDialog>
+                  <AlertDialogTrigger
+                    render={
+                      <Button
+                        type='button'
+                        variant='destructive'
+                        size='sm'
+                        disabled={!activeClass}>
+                        Delete Class
+                      </Button>
+                    }>
+                    Delete Class
+                  </AlertDialogTrigger>
+                  <AlertDialogContent>
+                    <AlertDialogHeader>
+                      <AlertDialogTitle>Delete {activeClass?.name ?? 'this class'}?</AlertDialogTitle>
+                      <AlertDialogDescription>
+                        This removes the class and all students, breakout groups, and project lists tied to it.
+                      </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                      <AlertDialogCancel>Cancel</AlertDialogCancel>
+                      <AlertDialogAction
+                        onClick={() => {
+                          if (!activeClass) return
+                          handleDeleteClass(activeClass.id, activeClass.name)
+                        }}>
+                        Delete Class
+                      </AlertDialogAction>
+                    </AlertDialogFooter>
+                  </AlertDialogContent>
+                </AlertDialog>
+                <AlertDialog>
+                  <AlertDialogTrigger
+                    render={
+                      <Button
+                        type='button'
+                        variant='destructive'
+                        size='sm'
+                        disabled={!state.persisted.classes.length}>
+                        Delete All Classes
+                      </Button>
+                    }>
+                    Delete All Classes
+                  </AlertDialogTrigger>
+                  <AlertDialogContent>
+                    <AlertDialogHeader>
+                      <AlertDialogTitle>Delete every class?</AlertDialogTitle>
+                      <AlertDialogDescription>
+                        This clears all classes and their students, breakout groups, and project lists.
+                      </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                      <AlertDialogCancel>Cancel</AlertDialogCancel>
+                      <AlertDialogAction onClick={handleDeleteAllClasses}>
+                        Delete All Classes
+                      </AlertDialogAction>
+                    </AlertDialogFooter>
+                  </AlertDialogContent>
+                </AlertDialog>
+              </div>
+            </div>
+            {activeClass ? (
+              <p className='text-base/relaxed text-muted-foreground'>
+                {activeClass.name} · {studentsInActiveClass.length} student
+                {studentsInActiveClass.length === 1 ? '' : 's'}
+              </p>
+            ) : (
+              <p className='text-base/relaxed text-muted-foreground'>
+                No class selected yet. Add a class below.
+              </p>
+            )}
+          </FieldContent>
+        </Field>
+
+        <form onSubmit={handleClassSubmit}>
+          <Field>
+            <FieldLabel htmlFor='class-name' className='text-lg/relaxed'>
+              Add class
+            </FieldLabel>
+            <FieldContent className='gap-2'>
+              <div className='flex flex-col md:flex-row gap-4'>
+                <Input
+                  id='class-name'
+                  value={classNameInput}
+                  onChange={(event) => {
+                    setClassNameInput(event.target.value)
+                    if (classError) setClassError(null)
+                  }}
+                  placeholder='e.g. Math 101, Science 2B'
+                  className='text-base/relaxed h-9 placeholder:text-muted-foreground/70 placeholder:text-base/relaxed'
+                />
+                <Button type='submit' className='h-9 font-semibold text-base'>
+                  Add Class
+                </Button>
+              </div>
+              <FieldDescription className='text-base/relaxed text-muted-foreground/70'>
+                Separate multiple class names with commas.
+              </FieldDescription>
+              {classError ? <FieldError>{classError}</FieldError> : null}
+            </FieldContent>
+          </Field>
+        </form>
+
+        <FieldSeparator>Import classes</FieldSeparator>
+        <Field>
+          <FieldLabel htmlFor='class-import' className='text-lg/relaxed'>
+            Import full classes (.txt or .json)
+          </FieldLabel>
+          <FieldContent className='gap-2'>
+            <Input
+              id='class-import'
+              type='file'
+              accept='.txt,.json,text/plain,application/json'
+              onChange={handleClassFileImport}
+              className='text-base/relaxed h-10 max-w-full file:text-base/relaxed file:text-muted-foreground/70 file:mr-5 file:px-5 file:bg-accent/10 file:border-accent/50 file:rounded-md file:cursor-pointer file:my-1'
+            />
+            <FieldDescription className='text-base/relaxed text-muted-foreground/70'>
+              This import includes everything for each class: class name + student roster.
+            </FieldDescription>
+            <FieldDescription className='text-base/relaxed text-muted-foreground/70'>
+              If a class name already exists, its roster is replaced by the imported students.
+            </FieldDescription>
+            <FieldDescription className='text-base/relaxed text-muted-foreground/70'>
+              `.txt` format: one class per line, using `Class Name: Student One, Student Two`.
+            </FieldDescription>
+            <pre className='rounded-md border border-border/60 bg-muted/20 p-3 text-xs text-muted-foreground whitespace-pre-wrap'>
+{`Math 101: Alex Johnson, Sam Lee, Priya Patel
+Science 2B: Omar Khan, Lina Cho
+History: Noah Rivera, Ava Johnson`}
+            </pre>
+            <FieldDescription className='text-base/relaxed text-muted-foreground/70'>
+              `.json` format supports one class object or an array of class objects.
+            </FieldDescription>
+            <pre className='rounded-md border border-border/60 bg-muted/20 p-3 text-xs text-muted-foreground whitespace-pre-wrap'>
+{`{
+  "classId": "optional-class-id",
+  "className": "Math 101",
+  "students": [
+    "Alex Johnson",
+    { "name": "Sam Lee", "id": "optional-student-id" }
+  ]
+}`}
+            </pre>
+            <FieldDescription className='text-base/relaxed text-muted-foreground/70'>
+              For multiple classes, wrap class objects in an array.
+            </FieldDescription>
+            {classImportError ? <FieldError>{classImportError}</FieldError> : null}
+            {classImportNotice ? (
+              <p className='text-base/relaxed text-muted-foreground'>{classImportNotice}</p>
+            ) : null}
+          </FieldContent>
+        </Field>
+
+        <FieldSeparator>Students</FieldSeparator>
+
+        <form onSubmit={handleStudentSubmit}>
+          <Field className='flex-1'>
+            <FieldLabel htmlFor='student-name' className='text-lg/relaxed'>
               Student name
             </FieldLabel>
-            <FieldContent className="gap-2">
-              <div className="flex flex-col md:flex-row gap-4">
+            <FieldContent className='gap-2'>
+              <div className='flex flex-col md:flex-row gap-4'>
                 <Input
-                  id="student-name"
-                  value={name}
+                  id='student-name'
+                  value={studentNameInput}
                   onChange={(event) => {
-                    setName(event.target.value);
-                    if (error) setError(null);
+                    setStudentNameInput(event.target.value)
+                    if (studentError) setStudentError(null)
                   }}
-                  placeholder="e.g. Alex Johnson, Sam Lee, Priya Patel"
-                  aria-label="Student name"
-                  className="text-base/relaxed h-9 placeholder:text-muted-foreground/70 placeholder:text-base/relaxed"
+                  placeholder='e.g. Alex Johnson, Sam Lee, Priya Patel'
+                  aria-label='Student name'
+                  disabled={!activeClassId}
+                  className='text-base/relaxed h-9 placeholder:text-muted-foreground/70 placeholder:text-base/relaxed'
                 />
                 <Button
-                  type="submit"
-                  className="h-9 font-semibold active:font-normal  text-base">
+                  type='submit'
+                  disabled={!activeClassId}
+                  className='h-9 font-semibold text-base'>
                   Add Student
                 </Button>
               </div>
-              <FieldDescription className="text-base/relaxed text-muted-foreground/70">
-                Separate multiple names with commas. Names are case-insensitive.
+              <FieldDescription className='text-base/relaxed text-muted-foreground/70'>
+                Students are added to the selected class.
               </FieldDescription>
-              {error ? <FieldError>{error}</FieldError> : null}
+              {studentError ? <FieldError>{studentError}</FieldError> : null}
             </FieldContent>
           </Field>
         </form>
-        <FieldSeparator>Import</FieldSeparator>
+
         <Field>
-          <FieldLabel htmlFor="student-import" className="text-lg/relaxed">
-            Import from .txt
+          <FieldLabel htmlFor='student-import' className='text-lg/relaxed'>
+            Import students from .txt
           </FieldLabel>
-          <FieldContent className="gap-2">
+          <FieldContent className='gap-2'>
             <Input
-              id="student-import"
-              type="file"
-              accept=".txt,text/plain"
-              onChange={handleFileImport}
-              className="text-base/relaxed h-10 max-w-full file:text-base/relaxed file:text-muted-foreground/70 file:mr-5 file:px-5 file:bg-accent/10 file:border-accent/50 file:rounded-md file:cursor-pointer file:my-1"
+              id='student-import'
+              type='file'
+              accept='.txt,text/plain'
+              onChange={handleStudentFileImport}
+              disabled={!activeClassId}
+              className='text-base/relaxed h-10 max-w-full file:text-base/relaxed file:text-muted-foreground/70 file:mr-5 file:px-5 file:bg-accent/10 file:border-accent/50 file:rounded-md file:cursor-pointer file:my-1'
             />
-            <FieldDescription className="text-base/relaxed text-muted-foreground/70">
-              Upload a .txt file with comma-separated names.
+            <FieldDescription className='text-base/relaxed text-muted-foreground/70'>
+              This import adds students only to the currently selected class.
             </FieldDescription>
-            {importError ? <FieldError>{importError}</FieldError> : null}
-            {importNotice ? (
-              <p className="text-base/relaxed text-muted-foreground">
-                {importNotice}
-              </p>
+            <FieldDescription className='text-base/relaxed text-muted-foreground/70'>
+              `.txt` format: comma-separated student names for the selected class.
+            </FieldDescription>
+            <pre className='rounded-md border border-border/60 bg-muted/20 p-3 text-xs text-muted-foreground whitespace-pre-wrap'>
+{`Alex Johnson, Sam Lee, Priya Patel`}
+            </pre>
+            {studentImportError ? <FieldError>{studentImportError}</FieldError> : null}
+            {studentImportNotice ? (
+              <p className='text-base/relaxed text-muted-foreground'>{studentImportNotice}</p>
             ) : null}
           </FieldContent>
         </Field>
       </CardContent>
     </Card>
-  );
+  )
 }
diff --git a/components/students/student-table.tsx b/components/students/student-table.tsx
index 0c0f6f8..fef4a02 100644
--- a/components/students/student-table.tsx
+++ b/components/students/student-table.tsx
@@ -7,8 +7,9 @@ import {
 } from '@/lib/students';
 import { cn } from '@/lib/utils';
 
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
+import { PencilIcon, Trash2Icon } from 'lucide-react';
 import { toast } from 'sonner';
 
 import {
@@ -39,20 +40,17 @@ import {
   FieldLabel,
 } from '@/components/ui/field';
 import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
 import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
 import { useAppStore } from '@/context/app-store';
 
 /**
- * Student roster table. Shows server-rendered skeleton until hydrated.
- * Skeleton is passed from the page (RSC) so it runs as a server component.
+ * Student roster cards for the selected class. Shows server-rendered skeleton until hydrated.
  */
 export default function StudentTable({
   skeleton,
@@ -62,14 +60,20 @@ export default function StudentTable({
   const { state, actions } = useAppStore();
   const [editingStudentId, setEditingStudentId] = useState<string | null>(null);
   const [editName, setEditName] = useState('');
+  const [editClassId, setEditClassId] = useState<string | null>(null);
   const [editError, setEditError] = useState<string | null>(null);
+  const [linkedCardHeight, setLinkedCardHeight] = useState<number | null>(null);
+
+  const activeClassId = state.persisted.activeClassId;
+  const activeClass =
+    state.persisted.classes.find((entry) => entry.id === activeClassId) ?? null;
 
   const students = useMemo(
     () =>
-      [...state.persisted.students].sort((a, b) =>
-        a.name.localeCompare(b.name),
-      ),
-    [state.persisted.students],
+      [...state.persisted.students]
+        .filter((student) => student.classId === activeClassId)
+        .sort((a, b) => a.name.localeCompare(b.name)),
+    [activeClassId, state.persisted.students],
   );
 
   const activeCount = students.filter(
@@ -81,11 +85,59 @@ export default function StudentTable({
         (student) => student.id === editingStudentId,
       ) ?? null)
     : null;
+  const selectedEditClass = editClassId
+    ? (state.persisted.classes.find((entry) => entry.id === editClassId) ?? null)
+    : null;
+
+  /**
+   * Keeps the student list card height aligned to the form card on desktop widths.
+   * This prevents long rosters from stretching the outer card; the list scrolls instead.
+   */
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const desktopQuery = window.matchMedia('(min-width: 1024px)');
+    let resizeObserver: ResizeObserver | null = null;
+
+    const syncHeight = () => {
+      if (!desktopQuery.matches) {
+        setLinkedCardHeight(null);
+        return;
+      }
+
+      const formCard = document.querySelector<HTMLElement>(
+        '[data-students-form-card]',
+      );
+      if (!formCard) return;
+      const nextHeight = Math.round(formCard.getBoundingClientRect().height);
+      setLinkedCardHeight((currentHeight) =>
+        currentHeight === nextHeight ? currentHeight : nextHeight,
+      );
+    };
+
+    syncHeight();
+
+    const formCard = document.querySelector<HTMLElement>(
+      '[data-students-form-card]',
+    );
+    if (formCard) {
+      resizeObserver = new ResizeObserver(() => syncHeight());
+      resizeObserver.observe(formCard);
+    }
+
+    const handleViewportChange = () => syncHeight();
+    desktopQuery.addEventListener('change', handleViewportChange);
+    window.addEventListener('resize', handleViewportChange);
+
+    return () => {
+      resizeObserver?.disconnect();
+      desktopQuery.removeEventListener('change', handleViewportChange);
+      window.removeEventListener('resize', handleViewportChange);
+    };
+  }, []);
 
   /**
-   * Opens the edit dialog for a student and seeds the form inputs.
-   *
-   * @param studentId - Identifier of the student to edit.
+   * Opens the edit dialog for a student and seeds the form state.
    */
   const handleOpenEdit = (studentId: string) => {
     const student = state.persisted.students.find(
@@ -94,6 +146,7 @@ export default function StudentTable({
     if (!student) return;
     setEditingStudentId(student.id);
     setEditName(student.name);
+    setEditClassId(student.classId);
     setEditError(null);
   };
 
@@ -103,39 +156,43 @@ export default function StudentTable({
   const handleCloseEdit = () => {
     setEditingStudentId(null);
     setEditName('');
+    setEditClassId(null);
     setEditError(null);
   };
 
   /**
-   * Validates the edited name, updates the student, and confirms success.
+   * Validates the edited student fields and persists updates.
    */
   const handleSaveEdit = () => {
     const normalized = normalizeStudentName(editName);
-    if (!normalized) {
-      setEditError('Enter a student name to continue.');
+    const targetClassId = editClassId ?? editingStudent?.classId ?? null;
+
+    if (!normalized || !targetClassId) {
+      setEditError('Enter a student name and class to continue.');
       return;
     }
+
     const nextKey = studentNameKey(normalized);
     const hasDuplicate = state.persisted.students.some(
       (student) =>
         student.id !== editingStudentId &&
+        student.classId === targetClassId &&
         studentNameKey(student.name) === nextKey,
     );
     if (hasDuplicate) {
-      setEditError('That student already exists. Try a different name.');
+      setEditError('That student already exists in this class.');
       return;
     }
+
     if (editingStudentId) {
-      actions.updateStudent(editingStudentId, normalized);
+      actions.updateStudent(editingStudentId, normalized, targetClassId);
       toast.success('Student updated.');
     }
     handleCloseEdit();
   };
 
   /**
-   * Toggles a student's active/excluded status and surfaces a toast update.
-   *
-   * @param studentId - Identifier of the student to toggle.
+   * Toggles a student's active/excluded status.
    */
   const handleToggleExcluded = (studentId: string) => {
     const student = state.persisted.students.find(
@@ -152,8 +209,6 @@ export default function StudentTable({
 
   /**
    * Deletes a student and shows a confirmation toast.
-   *
-   * @param studentId - Identifier of the student to delete.
    */
   const handleDeleteStudent = (studentId: string) => {
     const student = state.persisted.students.find(
@@ -166,11 +221,11 @@ export default function StudentTable({
   };
 
   /**
-   * Clears the roster and confirms the destructive action.
+   * Clears all students from the selected class.
    */
   const handleClearStudents = () => {
     actions.clearStudents();
-    toast.success('All students deleted.');
+    toast.success('Selected class roster deleted.');
   };
 
   if (!state.ui.isHydrated) {
@@ -178,7 +233,10 @@ export default function StudentTable({
   }
 
   return (
-    <Card className="relative overflow-hidden rounded-xl border-border/50 shadow-md py-6 xl:py-8 lg:gap-6 xl:gap-8">
+    <Card
+      data-students-list-card
+      style={linkedCardHeight ? { height: `${linkedCardHeight}px` } : undefined}
+      className="relative overflow-hidden rounded-xl border-border/50 shadow-md py-6 xl:py-8 lg:gap-6 xl:gap-8 lg:min-h-0">
       <div
         className="absolute left-0 top-0 h-full w-1 rounded-l-xl"
         style={{ backgroundColor: 'var(--chart-1)', opacity: 0.6 }}
@@ -186,13 +244,15 @@ export default function StudentTable({
       <CardHeader className="px-6 xl:px-8">
         <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
           <div className="flex flex-col gap-1">
-            <CardTitle className="text-xl font-bold tracking-tight">Student List</CardTitle>
+            <CardTitle className="text-xl font-bold tracking-tight">
+              Student List
+            </CardTitle>
             <CardDescription className="text-base/relaxed">
-              {students.length
-                ? `${activeCount} active · ${
-                    students.length - activeCount
-                  } excluded`
-                : 'Your roster will appear here once students are added.'}
+              {!activeClass
+                ? 'Select or create a class to view its roster.'
+                : students.length
+                  ? `${activeClass.name}: ${activeCount} active · ${students.length - activeCount} excluded`
+                  : `${activeClass.name}: no students yet.`}
             </CardDescription>
           </div>
           {students.length ? (
@@ -203,27 +263,29 @@ export default function StudentTable({
               </AlertDialogTrigger>
               <AlertDialogContent>
                 <AlertDialogHeader>
-                  <AlertDialogTitle>Delete all students?</AlertDialogTitle>
+                  <AlertDialogTitle>
+                    Delete all students in this class?
+                  </AlertDialogTitle>
                   <AlertDialogDescription>
-                    This will permanently remove every student from the roster.
+                    This permanently removes every student from{' '}
+                    {activeClass?.name ?? 'the selected class'}.
                   </AlertDialogDescription>
                 </AlertDialogHeader>
-                  <AlertDialogFooter>
-                    <AlertDialogCancel>Cancel</AlertDialogCancel>
-                    <AlertDialogAction onClick={handleClearStudents}>
-                      Delete All
-                    </AlertDialogAction>
-                  </AlertDialogFooter>
+                <AlertDialogFooter>
+                  <AlertDialogCancel>Cancel</AlertDialogCancel>
+                  <AlertDialogAction onClick={handleClearStudents}>
+                    Delete All
+                  </AlertDialogAction>
+                </AlertDialogFooter>
               </AlertDialogContent>
             </AlertDialog>
           ) : null}
         </div>
       </CardHeader>
-      <CardContent className="px-6 xl:px-8 gap-5 xl:gap-6 text-base/relaxed flex flex-col">
+      <CardContent className="px-6 xl:px-8 gap-5 xl:gap-6 text-base/relaxed flex flex-col lg:min-h-0">
         {students.length ? (
-          <>
-            {/* Mobile card list */}
-            <div className="flex flex-col gap-3 md:hidden">
+          <div className="flex-1 min-h-0 overflow-y-auto overscroll-contain rounded-md border border-border/50 bg-background/20 p-2 pr-1 shadow-[inset_0_2px_10px_rgba(0,0,0,0.08)] dark:shadow-[inset_0_2px_10px_rgba(0,0,0,0.35)]">
+            <div className="grid gap-3">
               {students.map((student) => {
                 const isExcluded = student.status === 'excluded';
                 return (
@@ -250,8 +312,8 @@ export default function StudentTable({
                         {isExcluded ? 'Excluded' : 'Active'}
                       </Badge>
                     </div>
-                    <div className="mt-3 flex items-center gap-2 border-t border-border/40 pt-3">
-                      <label className="flex items-center gap-2 mr-auto min-h-[44px]">
+                    <div className="mt-3 flex flex-wrap items-center gap-2 border-t border-border/40 pt-3">
+                      <label className="mr-auto flex min-h-[44px] items-center gap-2">
                         <Checkbox
                           checked={isExcluded}
                           onCheckedChange={() =>
@@ -266,21 +328,25 @@ export default function StudentTable({
                       </label>
                       <Button
                         variant="ghost"
-                        size="sm"
+                        size="icon-sm"
                         onClick={() => handleOpenEdit(student.id)}
-                        className="text-sm/relaxed min-h-[44px] min-w-[44px]">
-                        Edit
+                        aria-label={`Edit ${formatStudentName(student.name)}`}
+                        className="min-h-[44px] min-w-[44px]">
+                        <PencilIcon className="size-4" />
+                        <span className="sr-only">Edit</span>
                       </Button>
                       <AlertDialog>
                         <AlertDialogTrigger
                           render={
                             <Button
-                              variant="destructive"
-                              size="sm"
-                              className="text-sm/relaxed min-h-[44px] min-w-[44px]"
+                              variant="ghost"
+                              size="icon-sm"
+                              aria-label={`Delete ${formatStudentName(student.name)}`}
+                              className="min-h-[44px] min-w-[44px]"
                             />
                           }>
-                          Delete
+                          <Trash2Icon className="size-4 text-destructive" />
+                          <span className="sr-only">Delete</span>
                         </AlertDialogTrigger>
                         <AlertDialogContent>
                           <AlertDialogHeader>
@@ -288,16 +354,14 @@ export default function StudentTable({
                               Delete {student.name}?
                             </AlertDialogTitle>
                             <AlertDialogDescription>
-                              This removes the student from the roster and
-                              generator history.
+                              This removes the student from this class roster
+                              and generator history.
                             </AlertDialogDescription>
                           </AlertDialogHeader>
                           <AlertDialogFooter>
                             <AlertDialogCancel>Cancel</AlertDialogCancel>
                             <AlertDialogAction
-                              onClick={() =>
-                                handleDeleteStudent(student.id)
-                              }>
+                              onClick={() => handleDeleteStudent(student.id)}>
                               Delete
                             </AlertDialogAction>
                           </AlertDialogFooter>
@@ -308,114 +372,12 @@ export default function StudentTable({
                 );
               })}
             </div>
-
-            {/* Desktop table */}
-            <Table className="hidden md:table">
-              <TableHeader>
-                <TableRow>
-                  <TableHead className="text-lg/relaxed px-2">
-                    Student
-                  </TableHead>
-                  <TableHead className="text-lg/relaxed px-2">
-                    Status
-                  </TableHead>
-                  <TableHead className="text-lg/relaxed text-right px-2">
-                    Actions
-                  </TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {students.map((student) => {
-                  const isExcluded = student.status === 'excluded';
-                  return (
-                    <TableRow key={student.id}>
-                      <TableCell className="px-2">
-                        <div className="flex flex-col">
-                          <span className="font-medium text-lg/relaxed">
-                            {formatStudentName(student.name)}
-                          </span>
-                          <span className="text-base/relaxed text-muted-foreground/70">
-                            Added{' '}
-                            {new Date(student.createdAt).toLocaleDateString()}
-                          </span>
-                        </div>
-                      </TableCell>
-                      <TableCell className="px-2">
-                        <Badge
-                          className={cn(
-                            'p-2.5 text-base/relaxed shadow-sm',
-                            isExcluded
-                              ? 'bg-destructive/10 text-destructive border-destructive/50'
-                              : 'bg-ctp-latte-green/10 text-ctp-latte-green border-ctp-latte-green/50',
-                          )}>
-                          {isExcluded ? 'Excluded' : 'Active'}
-                        </Badge>
-                      </TableCell>
-                      <TableCell className="px-2">
-                        <div className="flex items-center justify-end gap-3">
-                          <div className="flex items-center gap-2">
-                            <Label className="text-base/relaxed">
-                              Absent
-                            </Label>
-                            <Checkbox
-                              checked={isExcluded}
-                              onCheckedChange={() =>
-                                handleToggleExcluded(student.id)
-                              }
-                              aria-label={`Mark ${student.name} as absent`}
-                              className="touch-hitbox cursor-pointer border-accent/25"
-                            />
-                          </div>
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={() => handleOpenEdit(student.id)}
-                            className="text-base/relaxed">
-                            Edit
-                          </Button>
-                          <AlertDialog>
-                            <AlertDialogTrigger
-                              render={
-                                <Button
-                                  variant="destructive"
-                                  size="sm"
-                                  className="text-base/relaxed"
-                                />
-                              }>
-                              Delete
-                            </AlertDialogTrigger>
-                            <AlertDialogContent>
-                              <AlertDialogHeader>
-                                <AlertDialogTitle>
-                                  Delete {student.name}?
-                                </AlertDialogTitle>
-                                <AlertDialogDescription>
-                                  This removes the student from the roster and
-                                  generator history.
-                                </AlertDialogDescription>
-                              </AlertDialogHeader>
-                              <AlertDialogFooter>
-                                <AlertDialogCancel>Cancel</AlertDialogCancel>
-                                <AlertDialogAction
-                                  onClick={() =>
-                                    handleDeleteStudent(student.id)
-                                  }>
-                                  Delete
-                                </AlertDialogAction>
-                              </AlertDialogFooter>
-                            </AlertDialogContent>
-                          </AlertDialog>
-                        </div>
-                      </TableCell>
-                    </TableRow>
-                  );
-                })}
-              </TableBody>
-            </Table>
-          </>
+          </div>
         ) : (
           <p className="text-base text-muted-foreground">
-            Add students to start building your roster.
+            {activeClass
+              ? 'Add students to start building this class roster.'
+              : 'Create a class to start.'}
           </p>
         )}
       </CardContent>
@@ -428,7 +390,7 @@ export default function StudentTable({
           <AlertDialogHeader>
             <AlertDialogTitle>Edit student</AlertDialogTitle>
             <AlertDialogDescription>
-              Update the student name. Generator history is preserved.
+              Update the student name or move them to another class.
             </AlertDialogDescription>
           </AlertDialogHeader>
           <Field>
@@ -443,6 +405,30 @@ export default function StudentTable({
                 }}
                 placeholder="e.g. Alex Johnson"
               />
+            </FieldContent>
+          </Field>
+          <Field>
+            <FieldLabel htmlFor="edit-student-class">Class</FieldLabel>
+            <FieldContent>
+              <Select
+                value={editClassId ?? ''}
+                onValueChange={(value) => {
+                  setEditClassId(value);
+                  if (editError) setEditError(null);
+                }}>
+                <SelectTrigger id="edit-student-class">
+                  <SelectValue placeholder="Select class">
+                    {selectedEditClass?.name ?? 'Select class'}
+                  </SelectValue>
+                </SelectTrigger>
+                <SelectContent>
+                  {state.persisted.classes.map((entry) => (
+                    <SelectItem key={entry.id} value={entry.id}>
+                      {entry.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
               {editError ? <FieldError>{editError}</FieldError> : null}
             </FieldContent>
           </Field>
diff --git a/components/ui/__tests__/select.test.tsx b/components/ui/__tests__/select.test.tsx
new file mode 100644
index 0000000..96799ec
--- /dev/null
+++ b/components/ui/__tests__/select.test.tsx
@@ -0,0 +1,59 @@
+import { render, waitFor } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+
+/**
+ * Renders an open select so popup-level behavior can be asserted in tests.
+ *
+ * @param alignItemWithTrigger Optional popup alignment override.
+ * @returns Promise resolving to the rendered popup element.
+ */
+async function renderOpenSelect(
+  alignItemWithTrigger?: boolean,
+): Promise<HTMLElement> {
+  render(
+    <Select defaultOpen defaultValue="class-a">
+      <SelectTrigger aria-label="Class select">
+        <SelectValue placeholder="Select class" />
+      </SelectTrigger>
+      <SelectContent
+        {...(alignItemWithTrigger === undefined
+          ? {}
+          : { alignItemWithTrigger })}>
+        <SelectItem value="class-a">Class A</SelectItem>
+        <SelectItem value="class-b">Class B</SelectItem>
+      </SelectContent>
+    </Select>,
+  );
+
+  let popup: HTMLElement | null = null;
+  await waitFor(() => {
+    popup = document.querySelector<HTMLElement>('[data-slot="select-content"]');
+    expect(popup).not.toBeNull();
+  });
+
+  if (!popup) {
+    throw new Error('Select popup did not render');
+  }
+
+  return popup;
+}
+
+describe('SelectContent', () => {
+  it('defaults to popper-style popup behavior', async () => {
+    const popup = await renderOpenSelect();
+    expect(popup).toHaveAttribute('data-align-trigger', 'false');
+  });
+
+  it('supports explicit trigger-aligned popup behavior', async () => {
+    const popup = await renderOpenSelect(true);
+    expect(popup).toHaveAttribute('data-align-trigger', 'true');
+  });
+});
diff --git a/components/ui/select.tsx b/components/ui/select.tsx
index 66c97ec..e2f7cbf 100644
--- a/components/ui/select.tsx
+++ b/components/ui/select.tsx
@@ -57,6 +57,13 @@ function SelectTrigger({
   )
 }
 
+/**
+ * Renders the positioned select popup and option list.
+ * By default, the popup uses popper-style positioning so menu height tracks
+ * content naturally while still respecting the shared max-height cap.
+ * Callers can opt into trigger-aligned positioning with
+ * `alignItemWithTrigger={true}` when needed.
+ */
 function SelectContent({
   className,
   children,
@@ -64,7 +71,7 @@ function SelectContent({
   sideOffset = 4,
   align = "center",
   alignOffset = 0,
-  alignItemWithTrigger = true,
+  alignItemWithTrigger = false,
   ...props
 }: SelectPrimitive.Popup.Props &
   Pick<
@@ -87,9 +94,9 @@ function SelectContent({
           className={cn("bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 relative isolate z-50 h-fit max-h-[min(18rem,var(--available-height))] w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none", className )}
           {...props}
         >
-          <SelectScrollUpButton />
+          {alignItemWithTrigger ? <SelectScrollUpButton /> : null}
           <SelectPrimitive.List>{children}</SelectPrimitive.List>
-          <SelectScrollDownButton />
+          {alignItemWithTrigger ? <SelectScrollDownButton /> : null}
         </SelectPrimitive.Popup>
       </SelectPrimitive.Positioner>
     </SelectPrimitive.Portal>
diff --git a/components/ui/sidebar.tsx b/components/ui/sidebar.tsx
index 9608b1f..28dd347 100644
--- a/components/ui/sidebar.tsx
+++ b/components/ui/sidebar.tsx
@@ -29,7 +29,9 @@ import {
 } from '@/components/ui/tooltip';
 import { useIsMobile } from '@/hooks/use-mobile';
 
-const SIDEBAR_COOKIE_NAME = 'sidebar_state';
+const SIDEBAR_COOKIE_NAME = 'teacherbuddy_sidebar_state';
+const SIDEBAR_LEGACY_COOKIE_NAME = 'sidebar_state';
+const SIDEBAR_LEGACY_COOKIE_NAME_COLON = 'teacherbuddy:sidebar_state';
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 const SIDEBAR_WIDTH = '16rem';
 const SIDEBAR_WIDTH_MOBILE = '18rem';
@@ -39,7 +41,9 @@ const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
 type SidebarContextProps = {
   state: 'expanded' | 'collapsed';
   open: boolean;
-  setOpen: (open: boolean) => void;
+  setOpen: (
+    open: boolean | ((open: boolean) => boolean),
+  ) => void;
   openMobile: boolean;
   setOpenMobile: (open: boolean) => void;
   isMobile: boolean;
@@ -57,6 +61,17 @@ function useSidebar() {
   return context;
 }
 
+/**
+ * Resolves the next sidebar open state from either a boolean or updater callback.
+ * Use this helper to keep `setOpen` behavior consistent with React state setters.
+ */
+function resolveSidebarOpenState(
+  value: boolean | ((value: boolean) => boolean),
+  current: boolean,
+) {
+  return typeof value === 'function' ? value(current) : value;
+}
+
 function SidebarProvider({
   defaultOpen = true,
   open: openProp,
@@ -77,9 +92,15 @@ function SidebarProvider({
   // We use openProp and setOpenProp for control from outside the component.
   const [_open, _setOpen] = React.useState(defaultOpen);
   const open = openProp ?? _open;
+  const openRef = React.useRef(open);
+
+  React.useEffect(() => {
+    openRef.current = open;
+  }, [open]);
+
   const setOpen = React.useCallback(
     (value: boolean | ((value: boolean) => boolean)) => {
-      const openState = typeof value === 'function' ? value(open) : value;
+      const openState = resolveSidebarOpenState(value, openRef.current);
       if (setOpenProp) {
         setOpenProp(openState);
       } else {
@@ -87,9 +108,12 @@ function SidebarProvider({
       }
 
       // This sets the cookie to keep the sidebar state.
-      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}; samesite=lax`;
+      // Remove deprecated cookie key to avoid stale state confusion.
+      document.cookie = `${SIDEBAR_LEGACY_COOKIE_NAME}=; path=/; max-age=0; samesite=lax`;
+      document.cookie = `${SIDEBAR_LEGACY_COOKIE_NAME_COLON}=; path=/; max-age=0; samesite=lax`;
     },
-    [setOpenProp, open],
+    [setOpenProp],
   );
 
   // Helper to toggle the sidebar.
diff --git a/context/__tests__/app-reducer.test.ts b/context/__tests__/app-reducer.test.ts
index 05d7c7c..12f5e7a 100644
--- a/context/__tests__/app-reducer.test.ts
+++ b/context/__tests__/app-reducer.test.ts
@@ -22,6 +22,53 @@ describe("appReducer", () => {
     vi.clearAllMocks()
   })
 
+  describe("Class actions", () => {
+    it("CLEAR_CLASSES removes classes and class-scoped records", async () => {
+      const { result } = renderAppStore()
+
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 10))
+      })
+
+      act(() => {
+        result.current.actions.addStudent("John Doe")
+      })
+
+      const studentId = result.current.state.persisted.students[0]?.id
+      if (!studentId) {
+        throw new Error("Expected a student to exist after addStudent")
+      }
+
+      act(() => {
+        result.current.actions.createProjectList("Group Work", "Team", "desc", [studentId], [[studentId]])
+      })
+
+      const activeClassId = result.current.state.persisted.activeClassId
+      if (!activeClassId) {
+        throw new Error("Expected active class to exist in hydrated state")
+      }
+
+      act(() => {
+        result.current.actions.setBreakoutGroups({
+          classId: activeClassId,
+          groupSize: 2,
+          groupIds: [[studentId]],
+          createdAt: Date.now(),
+        })
+      })
+
+      act(() => {
+        result.current.actions.clearClasses()
+      })
+
+      expect(result.current.state.persisted.classes).toEqual([])
+      expect(result.current.state.persisted.activeClassId).toBeNull()
+      expect(result.current.state.persisted.students).toEqual([])
+      expect(result.current.state.persisted.projectLists).toEqual([])
+      expect(result.current.state.persisted.breakoutGroupsByClass).toEqual({})
+    })
+  })
+
   describe("Student actions", () => {
     it("ADD_STUDENT adds new student", async () => {
       const { result } = renderAppStore()
@@ -117,7 +164,7 @@ describe("appReducer", () => {
       const studentId = result.current.state.persisted.students[0].id
 
       act(() => {
-        result.current.actions.updateStudent(studentId, "Jane Doe")
+        result.current.actions.updateStudent(studentId, "Jane Doe", null)
       })
 
       expect(result.current.state.persisted.students[0].name).toBe("Jane Doe")
@@ -138,7 +185,7 @@ describe("appReducer", () => {
       const johnId = result.current.state.persisted.students[0].id
 
       act(() => {
-        result.current.actions.updateStudent(johnId, "Jane Smith")
+        result.current.actions.updateStudent(johnId, "Jane Smith", null)
       })
 
       // Name should not have changed
@@ -265,6 +312,23 @@ describe("appReducer", () => {
       expect(result.current.state.ui.quizEditor.activeQuizId).toBe(quizId)
     })
 
+    it("CREATE_QUIZ stores optional description", async () => {
+      const { result } = renderAppStore()
+
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 10))
+      })
+
+      act(() => {
+        result.current.actions.createQuiz("Math Quiz", [], "Chapter 3 review")
+      })
+
+      const quizId = result.current.state.persisted.quizIndex[0].id
+      expect(result.current.state.persisted.quizzes[quizId].description).toBe(
+        "Chapter 3 review"
+      )
+    })
+
     it("UPDATE_QUIZ updates existing quiz", async () => {
       const { result } = renderAppStore()
 
@@ -288,6 +352,26 @@ describe("appReducer", () => {
       expect(result.current.state.persisted.quizzes[quizId].questions).toHaveLength(1)
     })
 
+    it("UPDATE_QUIZ clears description when empty", async () => {
+      const { result } = renderAppStore()
+
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 10))
+      })
+
+      act(() => {
+        result.current.actions.createQuiz("Math Quiz", [], "Has description")
+      })
+
+      const quizId = result.current.state.persisted.quizIndex[0].id
+
+      act(() => {
+        result.current.actions.updateQuiz(quizId, "Math Quiz", [], "   ")
+      })
+
+      expect(result.current.state.persisted.quizzes[quizId].description).toBeUndefined()
+    })
+
     it("UPDATE_QUIZ does nothing for non-existent quiz", async () => {
       const { result } = renderAppStore()
 
@@ -679,6 +763,7 @@ describe("appReducer", () => {
       })
 
       const groups = {
+        classId: result.current.state.persisted.activeClassId ?? "class-1",
         groupSize: 3,
         groupIds: [["id1", "id2", "id3"]],
         createdAt: Date.now(),
@@ -688,7 +773,9 @@ describe("appReducer", () => {
         result.current.actions.setBreakoutGroups(groups)
       })
 
-      expect(result.current.state.persisted.breakoutGroups).toEqual(groups)
+      expect(
+        result.current.state.persisted.breakoutGroupsByClass[groups.classId]
+      ).toEqual(groups)
     })
 
     it("CLEAR_BREAKOUT_GROUPS removes groups", async () => {
@@ -700,6 +787,7 @@ describe("appReducer", () => {
 
       act(() => {
         result.current.actions.setBreakoutGroups({
+          classId: result.current.state.persisted.activeClassId ?? "class-1",
           groupSize: 2,
           groupIds: [["id1"]],
           createdAt: Date.now(),
@@ -710,7 +798,12 @@ describe("appReducer", () => {
         result.current.actions.clearBreakoutGroups()
       })
 
-      expect(result.current.state.persisted.breakoutGroups).toBeNull()
+      const activeClassId = result.current.state.persisted.activeClassId
+      if (!activeClassId) {
+        expect(result.current.state.persisted.breakoutGroupsByClass).toEqual({})
+      } else {
+        expect(result.current.state.persisted.breakoutGroupsByClass[activeClassId]).toBeUndefined()
+      }
     })
 
     it("CREATE_PROJECT_LIST creates list", async () => {
diff --git a/context/app-store.tsx b/context/app-store.tsx
index 6e79e7a..f9e8d27 100644
--- a/context/app-store.tsx
+++ b/context/app-store.tsx
@@ -4,6 +4,7 @@ import * as React from "react"
 
 import type {
   BreakoutGroups,
+  Classroom,
   ProjectList,
   Question,
   Quiz,
@@ -13,19 +14,24 @@ import type {
 import {
   loadPersistedState,
   persistAllQuizzes,
-  saveBreakoutGroups,
+  saveActiveClassId,
+  saveBreakoutGroupsByClass,
+  saveClasses,
   saveProjectLists,
   saveQuizIndex,
   saveStudents,
 } from "@/lib/storage"
+import { normalizeClassName, type ImportedClassRecord } from "@/lib/classes"
 import { normalizeStudentName, studentNameKey } from "@/lib/students"
 
 export type PersistedState = {
+  classes: Classroom[]
+  activeClassId: string | null
   students: Student[]
   quizIndex: QuizIndexEntry[]
   quizzes: Record<string, Quiz>
   projectLists: ProjectList[]
-  breakoutGroups: BreakoutGroups | null
+  breakoutGroupsByClass: Record<string, BreakoutGroups>
 }
 
 export type GeneratorState = {
@@ -61,11 +67,13 @@ export type AppState = {
 
 const initialState: AppState = {
   persisted: {
+    classes: [],
+    activeClassId: null,
     students: [],
     quizIndex: [],
     quizzes: {},
     projectLists: [],
-    breakoutGroups: null,
+    breakoutGroupsByClass: {},
   },
   domain: {
     generator: {
@@ -92,11 +100,19 @@ const initialState: AppState = {
 
 type AppAction =
   | { type: "HYDRATE_PERSISTED"; payload: PersistedState }
+  | { type: "ADD_CLASS"; payload: { id: string; name: string } }
+  | { type: "SELECT_ACTIVE_CLASS"; payload: { id: string | null } }
+  | { type: "DELETE_CLASS"; payload: { id: string } }
+  | { type: "CLEAR_CLASSES" }
+  | { type: "IMPORT_CLASS_RECORDS"; payload: { classes: ImportedClassRecord[] } }
   | { type: "ADD_STUDENT"; payload: { id: string; name: string } }
   | { type: "TOGGLE_STUDENT_EXCLUDED"; payload: { id: string } }
   | { type: "DELETE_STUDENT"; payload: { id: string } }
   | { type: "CLEAR_STUDENTS" }
-  | { type: "UPDATE_STUDENT"; payload: { id: string; name: string } }
+  | {
+      type: "UPDATE_STUDENT"
+      payload: { id: string; name: string; classId: string | null }
+    }
   | {
       type: "CREATE_PROJECT_LIST"
       payload: {
@@ -126,11 +142,21 @@ type AppAction =
   | { type: "DRAW_STUDENT" }
   | {
       type: "CREATE_QUIZ"
-      payload: { id: string; title: string; questions: Question[] }
+      payload: {
+        id: string
+        title: string
+        description?: string
+        questions: Question[]
+      }
     }
   | {
       type: "UPDATE_QUIZ"
-      payload: { id: string; title: string; questions: Question[] }
+      payload: {
+        id: string
+        title: string
+        description?: string
+        questions: Question[]
+      }
     }
   | { type: "DELETE_QUIZ"; payload: { id: string } }
   | { type: "SELECT_QUIZ_FOR_EDITOR"; payload: { id: string | null } }
@@ -140,14 +166,41 @@ type AppAction =
   | { type: "REVEAL_ANSWER" }
   | { type: "RESET_QUIZ_PLAY" }
 
+/**
+ * Returns students that belong to the provided class.
+ * Used to scope roster-driven tools to the active class.
+ */
+const getStudentsForClass = (students: Student[], classId: string | null) => {
+  if (!classId) return []
+  return students.filter((student) => student.classId === classId)
+}
+
+/**
+ * Resolves a valid active class ID from available classes.
+ * Falls back to the first class or null when no classes exist.
+ */
+const resolveActiveClassId = (
+  classes: Classroom[],
+  activeClassId: string | null
+): string | null => {
+  if (!classes.length) return null
+  if (activeClassId && classes.some((entry) => entry.id === activeClassId)) {
+    return activeClassId
+  }
+  return classes[0].id
+}
+
 const getStudentIdSet = (students: Student[]) =>
   new Set(students.map((student) => student.id))
 
-const pruneGeneratorState = (generator: GeneratorState, students: Student[]) => {
-  const studentIds = getStudentIdSet(students)
-  const usedStudentIds = generator.usedStudentIds.filter((id) =>
-    studentIds.has(id)
-  )
+const pruneGeneratorState = (
+  generator: GeneratorState,
+  students: Student[],
+  activeClassId: string | null
+) => {
+  const classStudents = getStudentsForClass(students, activeClassId)
+  const studentIds = getStudentIdSet(classStudents)
+  const usedStudentIds = generator.usedStudentIds.filter((id) => studentIds.has(id))
   const currentStudentId =
     generator.currentStudentId && studentIds.has(generator.currentStudentId)
       ? generator.currentStudentId
@@ -161,12 +214,12 @@ const pruneGeneratorState = (generator: GeneratorState, students: Student[]) =>
 const pruneQuizPlayState = (
   quizPlay: QuizPlayState,
   students: Student[],
-  quizzes: Record<string, Quiz>
+  quizzes: Record<string, Quiz>,
+  activeClassId: string | null
 ) => {
-  const studentIds = getStudentIdSet(students)
-  const selectedQuiz = quizPlay.selectedQuizId
-    ? quizzes[quizPlay.selectedQuizId]
-    : null
+  const classStudents = getStudentsForClass(students, activeClassId)
+  const studentIds = getStudentIdSet(classStudents)
+  const selectedQuiz = quizPlay.selectedQuizId ? quizzes[quizPlay.selectedQuizId] : null
 
   if (!selectedQuiz) {
     return {
@@ -180,12 +233,8 @@ const pruneQuizPlayState = (
   }
 
   const questionIds = new Set(selectedQuiz.questions.map((question) => question.id))
-  const usedQuestionIds = quizPlay.usedQuestionIds.filter((id) =>
-    questionIds.has(id)
-  )
-  const usedStudentIds = quizPlay.usedStudentIds.filter((id) =>
-    studentIds.has(id)
-  )
+  const usedQuestionIds = quizPlay.usedQuestionIds.filter((id) => questionIds.has(id))
+  const usedStudentIds = quizPlay.usedStudentIds.filter((id) => studentIds.has(id))
   const currentQuestionId =
     quizPlay.currentQuestionId && questionIds.has(quizPlay.currentQuestionId)
       ? quizPlay.currentQuestionId
@@ -209,15 +258,27 @@ const pruneQuizPlayState = (
 const pruneDomainState = (
   domain: AppState["domain"],
   students: Student[],
-  quizzes: Record<string, Quiz>
+  quizzes: Record<string, Quiz>,
+  activeClassId: string | null
 ) => ({
-  generator: pruneGeneratorState(domain.generator, students),
-  quizPlay: pruneQuizPlayState(domain.quizPlay, students, quizzes),
+  generator: pruneGeneratorState(domain.generator, students, activeClassId),
+  quizPlay: pruneQuizPlayState(domain.quizPlay, students, quizzes, activeClassId),
 })
 
 const getSortedQuizIndex = (index: QuizIndexEntry[]) =>
   [...index].sort((a, b) => b.createdAt - a.createdAt)
 
+/**
+ * Trims optional description input and drops empty values.
+ *
+ * @param description - Raw description text from quiz actions.
+ * @returns Normalized non-empty description or `undefined`.
+ */
+const normalizeOptionalDescription = (description?: string) => {
+  const normalized = description?.trim()
+  return normalized ? normalized : undefined
+}
+
 const toggleStudentStatus = (status: Student["status"]): Student["status"] =>
   status === "active" ? "excluded" : "active"
 
@@ -225,22 +286,220 @@ function appReducer(state: AppState, action: AppAction): AppState {
   switch (action.type) {
     case "HYDRATE_PERSISTED": {
       const persisted = action.payload
+      const activeClassId = resolveActiveClassId(
+        persisted.classes,
+        persisted.activeClassId
+      )
       return {
         ...state,
-        persisted,
-        domain: pruneDomainState(state.domain, persisted.students, persisted.quizzes),
+        persisted: {
+          ...persisted,
+          activeClassId,
+        },
+        domain: pruneDomainState(
+          state.domain,
+          persisted.students,
+          persisted.quizzes,
+          activeClassId
+        ),
         ui: {
           ...state.ui,
           isHydrated: true,
         },
       }
     }
+    case "ADD_CLASS": {
+      const normalized = normalizeClassName(action.payload.name)
+      if (!normalized) return state
+
+      const exists = state.persisted.classes.some(
+        (entry) => normalizeClassName(entry.name).toLocaleLowerCase() === normalized.toLocaleLowerCase()
+      )
+      if (exists) return state
+
+      const classes = [
+        ...state.persisted.classes,
+        {
+          id: action.payload.id,
+          name: normalized,
+          createdAt: Date.now(),
+        },
+      ]
+      const activeClassId = state.persisted.activeClassId ?? action.payload.id
+
+      return {
+        ...state,
+        persisted: {
+          ...state.persisted,
+          classes,
+          activeClassId,
+        },
+      }
+    }
+    case "SELECT_ACTIVE_CLASS": {
+      const activeClassId = resolveActiveClassId(
+        state.persisted.classes,
+        action.payload.id
+      )
+      return {
+        ...state,
+        persisted: {
+          ...state.persisted,
+          activeClassId,
+        },
+        domain: pruneDomainState(
+          state.domain,
+          state.persisted.students,
+          state.persisted.quizzes,
+          activeClassId
+        ),
+      }
+    }
+    case "DELETE_CLASS": {
+      const classes = state.persisted.classes.filter(
+        (entry) => entry.id !== action.payload.id
+      )
+      const activeClassId = resolveActiveClassId(
+        classes,
+        state.persisted.activeClassId === action.payload.id
+          ? null
+          : state.persisted.activeClassId
+      )
+
+      const students = state.persisted.students.filter(
+        (student) => student.classId !== action.payload.id
+      )
+      const projectLists = state.persisted.projectLists.filter(
+        (list) => list.classId !== action.payload.id
+      )
+
+      const breakoutGroupsByClass = { ...state.persisted.breakoutGroupsByClass }
+      delete breakoutGroupsByClass[action.payload.id]
+
+      return {
+        ...state,
+        persisted: {
+          ...state.persisted,
+          classes,
+          activeClassId,
+          students,
+          projectLists,
+          breakoutGroupsByClass,
+        },
+        domain: pruneDomainState(state.domain, students, state.persisted.quizzes, activeClassId),
+      }
+    }
+    case "CLEAR_CLASSES": {
+      return {
+        ...state,
+        persisted: {
+          ...state.persisted,
+          classes: [],
+          activeClassId: null,
+          students: [],
+          projectLists: [],
+          breakoutGroupsByClass: {},
+        },
+        domain: pruneDomainState(state.domain, [], state.persisted.quizzes, null),
+      }
+    }
+    case "IMPORT_CLASS_RECORDS": {
+      let classes = [...state.persisted.classes]
+      let students = [...state.persisted.students]
+
+      const classNameToId = new Map(
+        classes.map((entry) => [normalizeClassName(entry.name).toLocaleLowerCase(), entry.id])
+      )
+
+      const classIdSet = new Set(classes.map((entry) => entry.id))
+      const studentIdSet = new Set(students.map((student) => student.id))
+
+      for (const classRecord of action.payload.classes) {
+        const normalizedClassName = normalizeClassName(classRecord.className)
+        if (!normalizedClassName) continue
+
+        const classKey = normalizedClassName.toLocaleLowerCase()
+        let classId = classNameToId.get(classKey) ?? null
+
+        if (!classId) {
+          const hintedId =
+            classRecord.idHint && !classIdSet.has(classRecord.idHint)
+              ? classRecord.idHint
+              : null
+          classId = hintedId ?? crypto.randomUUID()
+          classIdSet.add(classId)
+          classNameToId.set(classKey, classId)
+          classes = [
+            ...classes,
+            {
+              id: classId,
+              name: normalizedClassName,
+              createdAt: Date.now(),
+            },
+          ]
+        }
+
+        const dedupeByName = new Set<string>()
+        const importedStudents: Student[] = []
+
+        for (const studentRecord of classRecord.students) {
+          const normalizedStudentName = normalizeStudentName(studentRecord.name)
+          if (!normalizedStudentName) continue
+
+          const studentKey = studentNameKey(normalizedStudentName)
+          if (dedupeByName.has(studentKey)) continue
+          dedupeByName.add(studentKey)
+
+          const hintedStudentId =
+            studentRecord.idHint && !studentIdSet.has(studentRecord.idHint)
+              ? studentRecord.idHint
+              : null
+          const studentId = hintedStudentId ?? crypto.randomUUID()
+          studentIdSet.add(studentId)
+
+          importedStudents.push({
+            id: studentId,
+            name: normalizedStudentName,
+            status: "active",
+            classId,
+            createdAt: Date.now(),
+          })
+        }
+
+        students = [
+          ...students.filter((student) => student.classId !== classId),
+          ...importedStudents,
+        ]
+      }
+
+      const activeClassId = resolveActiveClassId(
+        classes,
+        state.persisted.activeClassId
+      )
+
+      return {
+        ...state,
+        persisted: {
+          ...state.persisted,
+          classes,
+          students,
+          activeClassId,
+        },
+        domain: pruneDomainState(state.domain, students, state.persisted.quizzes, activeClassId),
+      }
+    }
     case "ADD_STUDENT": {
+      const activeClassId = state.persisted.activeClassId
+      if (!activeClassId) return state
+
       const normalized = normalizeStudentName(action.payload.name)
       if (!normalized) return state
+
       const nextKey = studentNameKey(normalized)
       const alreadyExists = state.persisted.students.some(
-        (student) => studentNameKey(student.name) === nextKey
+        (student) =>
+          student.classId === activeClassId &&
+          studentNameKey(student.name) === nextKey
       )
       if (alreadyExists) return state
 
@@ -248,6 +507,7 @@ function appReducer(state: AppState, action: AppAction): AppState {
         id: action.payload.id,
         name: normalized,
         status: "active",
+        classId: activeClassId,
         createdAt: Date.now(),
       }
       const students = [...state.persisted.students, nextStudent]
@@ -257,7 +517,12 @@ function appReducer(state: AppState, action: AppAction): AppState {
           ...state.persisted,
           students,
         },
-        domain: pruneDomainState(state.domain, students, state.persisted.quizzes),
+        domain: pruneDomainState(
+          state.domain,
+          students,
+          state.persisted.quizzes,
+          activeClassId
+        ),
       }
     }
     case "TOGGLE_STUDENT_EXCLUDED": {
@@ -275,7 +540,12 @@ function appReducer(state: AppState, action: AppAction): AppState {
           ...state.persisted,
           students,
         },
-        domain: pruneDomainState(state.domain, students, state.persisted.quizzes),
+        domain: pruneDomainState(
+          state.domain,
+          students,
+          state.persisted.quizzes,
+          state.persisted.activeClassId
+        ),
       }
     }
     case "DELETE_STUDENT": {
@@ -288,44 +558,92 @@ function appReducer(state: AppState, action: AppAction): AppState {
           ...state.persisted,
           students,
         },
-        domain: pruneDomainState(state.domain, students, state.persisted.quizzes),
+        domain: pruneDomainState(
+          state.domain,
+          students,
+          state.persisted.quizzes,
+          state.persisted.activeClassId
+        ),
       }
     }
     case "UPDATE_STUDENT": {
-      const normalized = normalizeStudentName(action.payload.name)
-      if (!normalized) return state
-      const nextKey = studentNameKey(normalized)
+      const existingStudent = state.persisted.students.find(
+        (student) => student.id === action.payload.id
+      )
+      if (!existingStudent) return state
+
+      const normalizedName = normalizeStudentName(action.payload.name)
+      if (!normalizedName) return state
+
+      const nextClassId =
+        action.payload.classId &&
+        state.persisted.classes.some((entry) => entry.id === action.payload.classId)
+          ? action.payload.classId
+          : existingStudent.classId
+
+      const nextKey = studentNameKey(normalizedName)
       const hasDuplicate = state.persisted.students.some(
         (student) =>
           student.id !== action.payload.id &&
+          student.classId === nextClassId &&
           studentNameKey(student.name) === nextKey
       )
       if (hasDuplicate) return state
 
       const students = state.persisted.students.map((student) =>
-        student.id === action.payload.id ? { ...student, name: normalized } : student
+        student.id === action.payload.id
+          ? { ...student, name: normalizedName, classId: nextClassId }
+          : student
       )
+
       return {
         ...state,
         persisted: {
           ...state.persisted,
           students,
         },
-        domain: pruneDomainState(state.domain, students, state.persisted.quizzes),
+        domain: pruneDomainState(
+          state.domain,
+          students,
+          state.persisted.quizzes,
+          state.persisted.activeClassId
+        ),
       }
     }
     case "CLEAR_STUDENTS": {
-      const students: Student[] = []
+      const activeClassId = state.persisted.activeClassId
+      if (!activeClassId) return state
+
+      const students = state.persisted.students.filter(
+        (student) => student.classId !== activeClassId
+      )
+
+      const projectLists = state.persisted.projectLists.filter(
+        (list) => list.classId !== activeClassId
+      )
+
+      const breakoutGroupsByClass = { ...state.persisted.breakoutGroupsByClass }
+      delete breakoutGroupsByClass[activeClassId]
+
       return {
         ...state,
         persisted: {
           ...state.persisted,
           students,
+          projectLists,
+          breakoutGroupsByClass,
         },
-        domain: pruneDomainState(state.domain, students, state.persisted.quizzes),
+        domain: pruneDomainState(
+          state.domain,
+          students,
+          state.persisted.quizzes,
+          activeClassId
+        ),
       }
     }
     case "CREATE_PROJECT_LIST": {
+      const classId = state.persisted.activeClassId
+      if (!classId) return state
       const name = action.payload.name.trim()
       const projectType = action.payload.projectType.trim()
       if (!name || !projectType) return state
@@ -333,6 +651,7 @@ function appReducer(state: AppState, action: AppAction): AppState {
       if (!studentIds.length) return state
       const projectList: ProjectList = {
         id: action.payload.id,
+        classId,
         name,
         projectType,
         description: action.payload.description.trim(),
@@ -349,6 +668,10 @@ function appReducer(state: AppState, action: AppAction): AppState {
       }
     }
     case "UPDATE_PROJECT_LIST": {
+      const existing = state.persisted.projectLists.find(
+        (list) => list.id === action.payload.id
+      )
+      if (!existing) return state
       const name = action.payload.name.trim()
       const projectType = action.payload.projectType.trim()
       if (!name || !projectType) return state
@@ -358,6 +681,7 @@ function appReducer(state: AppState, action: AppAction): AppState {
         list.id === action.payload.id
           ? {
               ...list,
+              classId: existing.classId,
               name,
               projectType,
               description: action.payload.description.trim(),
@@ -379,7 +703,10 @@ function appReducer(state: AppState, action: AppAction): AppState {
         ...state,
         persisted: {
           ...state.persisted,
-          breakoutGroups: action.payload,
+          breakoutGroupsByClass: {
+            ...state.persisted.breakoutGroupsByClass,
+            [action.payload.classId]: action.payload,
+          },
         },
       }
     }
@@ -396,11 +723,15 @@ function appReducer(state: AppState, action: AppAction): AppState {
       }
     }
     case "CLEAR_BREAKOUT_GROUPS": {
+      const activeClassId = state.persisted.activeClassId
+      if (!activeClassId) return state
+      const breakoutGroupsByClass = { ...state.persisted.breakoutGroupsByClass }
+      delete breakoutGroupsByClass[activeClassId]
       return {
         ...state,
         persisted: {
           ...state.persisted,
-          breakoutGroups: null,
+          breakoutGroupsByClass,
         },
       }
     }
@@ -417,20 +748,19 @@ function appReducer(state: AppState, action: AppAction): AppState {
       }
     }
     case "DRAW_STUDENT": {
-      const availableStudentIds = state.persisted.students
+      const activeClassId = state.persisted.activeClassId
+      const availableStudentIds = getStudentsForClass(
+        state.persisted.students,
+        activeClassId
+      )
         .filter((student) => student.status === "active")
-        .filter(
-          (student) =>
-            !state.domain.generator.usedStudentIds.includes(student.id)
-        )
+        .filter((student) => !state.domain.generator.usedStudentIds.includes(student.id))
         .map((student) => student.id)
 
       if (!availableStudentIds.length) return state
 
       const nextStudentId =
-        availableStudentIds[
-          Math.floor(Math.random() * availableStudentIds.length)
-        ]
+        availableStudentIds[Math.floor(Math.random() * availableStudentIds.length)]
 
       return {
         ...state,
@@ -438,10 +768,7 @@ function appReducer(state: AppState, action: AppAction): AppState {
           ...state.domain,
           generator: {
             currentStudentId: nextStudentId,
-            usedStudentIds: [
-              ...state.domain.generator.usedStudentIds,
-              nextStudentId,
-            ],
+            usedStudentIds: [...state.domain.generator.usedStudentIds, nextStudentId],
           },
         },
       }
@@ -449,10 +776,12 @@ function appReducer(state: AppState, action: AppAction): AppState {
     case "CREATE_QUIZ": {
       const title = action.payload.title.trim()
       if (!title) return state
+      const description = normalizeOptionalDescription(action.payload.description)
       const timestamp = Date.now()
       const quiz: Quiz = {
         id: action.payload.id,
         title,
+        ...(description ? { description } : {}),
         questions: action.payload.questions,
         createdAt: timestamp,
         updatedAt: timestamp,
@@ -462,10 +791,7 @@ function appReducer(state: AppState, action: AppAction): AppState {
         title: quiz.title,
         createdAt: quiz.createdAt,
       }
-      const quizIndex = getSortedQuizIndex([
-        ...state.persisted.quizIndex,
-        quizIndexEntry,
-      ])
+      const quizIndex = getSortedQuizIndex([...state.persisted.quizIndex, quizIndexEntry])
       const quizzes = {
         ...state.persisted.quizzes,
         [quiz.id]: quiz,
@@ -477,7 +803,12 @@ function appReducer(state: AppState, action: AppAction): AppState {
           quizIndex,
           quizzes,
         },
-        domain: pruneDomainState(state.domain, state.persisted.students, quizzes),
+        domain: pruneDomainState(
+          state.domain,
+          state.persisted.students,
+          quizzes,
+          state.persisted.activeClassId
+        ),
         ui: {
           ...state.ui,
           quizEditor: {
@@ -493,12 +824,18 @@ function appReducer(state: AppState, action: AppAction): AppState {
       if (!existing) return state
       const title = action.payload.title.trim()
       if (!title) return state
+      const description = normalizeOptionalDescription(action.payload.description)
       const updated: Quiz = {
         ...existing,
         title,
         questions: action.payload.questions,
         updatedAt: Date.now(),
       }
+      if (description) {
+        updated.description = description
+      } else {
+        delete updated.description
+      }
       const quizzes = {
         ...state.persisted.quizzes,
         [updated.id]: updated,
@@ -515,7 +852,12 @@ function appReducer(state: AppState, action: AppAction): AppState {
           quizIndex,
           quizzes,
         },
-        domain: pruneDomainState(state.domain, state.persisted.students, quizzes),
+        domain: pruneDomainState(
+          state.domain,
+          state.persisted.students,
+          quizzes,
+          state.persisted.activeClassId
+        ),
       }
     }
     case "DELETE_QUIZ": {
@@ -537,7 +879,12 @@ function appReducer(state: AppState, action: AppAction): AppState {
           quizIndex,
           quizzes,
         },
-        domain: pruneDomainState(state.domain, state.persisted.students, quizzes),
+        domain: pruneDomainState(
+          state.domain,
+          state.persisted.students,
+          quizzes,
+          state.persisted.activeClassId
+        ),
         ui: {
           ...state.ui,
           quizEditor: {
@@ -606,7 +953,11 @@ function appReducer(state: AppState, action: AppAction): AppState {
       const availableQuestionIds = quiz.questions
         .filter((question) => !state.domain.quizPlay.usedQuestionIds.includes(question.id))
         .map((question) => question.id)
-      const availableStudentIds = state.persisted.students
+
+      const availableStudentIds = getStudentsForClass(
+        state.persisted.students,
+        state.persisted.activeClassId
+      )
         .filter((student) => student.status === "active")
         .filter((student) => !state.domain.quizPlay.usedStudentIds.includes(student.id))
         .map((student) => student.id)
@@ -614,13 +965,9 @@ function appReducer(state: AppState, action: AppAction): AppState {
       if (!availableQuestionIds.length || !availableStudentIds.length) return state
 
       const nextQuestionId =
-        availableQuestionIds[
-          Math.floor(Math.random() * availableQuestionIds.length)
-        ]
+        availableQuestionIds[Math.floor(Math.random() * availableQuestionIds.length)]
       const nextStudentId =
-        availableStudentIds[
-          Math.floor(Math.random() * availableStudentIds.length)
-        ]
+        availableStudentIds[Math.floor(Math.random() * availableStudentIds.length)]
 
       return {
         ...state,
@@ -674,11 +1021,16 @@ function appReducer(state: AppState, action: AppAction): AppState {
 const AppStoreContext = React.createContext<{
   state: AppState
   actions: {
+    addClass: (name: string) => void
+    selectActiveClass: (id: string | null) => void
+    deleteClass: (id: string) => void
+    clearClasses: () => void
+    importClassRecords: (classes: ImportedClassRecord[]) => void
     addStudent: (name: string) => void
     toggleStudentExcluded: (id: string) => void
     deleteStudent: (id: string) => void
     clearStudents: () => void
-    updateStudent: (id: string, name: string) => void
+    updateStudent: (id: string, name: string, classId: string | null) => void
     createProjectList: (
       name: string,
       projectType: string,
@@ -699,8 +1051,17 @@ const AppStoreContext = React.createContext<{
     clearBreakoutGroups: () => void
     resetGenerator: () => void
     drawStudent: () => void
-    createQuiz: (title: string, questions: Question[]) => void
-    updateQuiz: (id: string, title: string, questions: Question[]) => void
+    createQuiz: (
+      title: string,
+      questions: Question[],
+      description?: string
+    ) => void
+    updateQuiz: (
+      id: string,
+      title: string,
+      questions: Question[],
+      description?: string
+    ) => void
     deleteQuiz: (id: string) => void
     selectQuizForEditor: (id: string | null) => void
     setEditingQuestion: (id: string | null) => void
@@ -713,7 +1074,7 @@ const AppStoreContext = React.createContext<{
 
 /**
  * Provides global TeacherBuddy state and actions to all child components.
- * Mount once near the app root so hooks can access persisted/domain state.
+ * Mount once near the app root so hooks can access persisted and class-scoped state.
  */
 export function AppStoreProvider({ children }: { children: React.ReactNode }) {
   const [state, dispatch] = React.useReducer(appReducer, initialState)
@@ -725,15 +1086,28 @@ export function AppStoreProvider({ children }: { children: React.ReactNode }) {
 
   React.useEffect(() => {
     if (!state.ui.isHydrated) return
+    saveClasses(state.persisted.classes)
+    saveActiveClassId(state.persisted.activeClassId)
     saveStudents(state.persisted.students)
     saveQuizIndex(state.persisted.quizIndex)
     persistAllQuizzes(state.persisted.quizIndex, state.persisted.quizzes)
     saveProjectLists(state.persisted.projectLists)
-    saveBreakoutGroups(state.persisted.breakoutGroups)
+    saveBreakoutGroupsByClass(state.persisted.breakoutGroupsByClass)
   }, [state.persisted, state.ui.isHydrated])
 
   const actions = React.useMemo(
     () => ({
+      addClass: (name: string) =>
+        dispatch({
+          type: "ADD_CLASS",
+          payload: { id: crypto.randomUUID(), name },
+        }),
+      selectActiveClass: (id: string | null) =>
+        dispatch({ type: "SELECT_ACTIVE_CLASS", payload: { id } }),
+      deleteClass: (id: string) => dispatch({ type: "DELETE_CLASS", payload: { id } }),
+      clearClasses: () => dispatch({ type: "CLEAR_CLASSES" }),
+      importClassRecords: (classes: ImportedClassRecord[]) =>
+        dispatch({ type: "IMPORT_CLASS_RECORDS", payload: { classes } }),
       addStudent: (name: string) =>
         dispatch({
           type: "ADD_STUDENT",
@@ -741,11 +1115,10 @@ export function AppStoreProvider({ children }: { children: React.ReactNode }) {
         }),
       toggleStudentExcluded: (id: string) =>
         dispatch({ type: "TOGGLE_STUDENT_EXCLUDED", payload: { id } }),
-      deleteStudent: (id: string) =>
-        dispatch({ type: "DELETE_STUDENT", payload: { id } }),
+      deleteStudent: (id: string) => dispatch({ type: "DELETE_STUDENT", payload: { id } }),
       clearStudents: () => dispatch({ type: "CLEAR_STUDENTS" }),
-      updateStudent: (id: string, name: string) =>
-        dispatch({ type: "UPDATE_STUDENT", payload: { id, name } }),
+      updateStudent: (id: string, name: string, classId: string | null) =>
+        dispatch({ type: "UPDATE_STUDENT", payload: { id, name, classId } }),
       createProjectList: (
         name: string,
         projectType: string,
@@ -790,18 +1163,26 @@ export function AppStoreProvider({ children }: { children: React.ReactNode }) {
       clearBreakoutGroups: () => dispatch({ type: "CLEAR_BREAKOUT_GROUPS" }),
       resetGenerator: () => dispatch({ type: "RESET_GENERATOR" }),
       drawStudent: () => dispatch({ type: "DRAW_STUDENT" }),
-      createQuiz: (title: string, questions: Question[]) =>
+      createQuiz: (
+        title: string,
+        questions: Question[],
+        description?: string
+      ) =>
         dispatch({
           type: "CREATE_QUIZ",
-          payload: { id: crypto.randomUUID(), title, questions },
+          payload: { id: crypto.randomUUID(), title, questions, description },
         }),
-      updateQuiz: (id: string, title: string, questions: Question[]) =>
+      updateQuiz: (
+        id: string,
+        title: string,
+        questions: Question[],
+        description?: string
+      ) =>
         dispatch({
           type: "UPDATE_QUIZ",
-          payload: { id, title, questions },
+          payload: { id, title, questions, description },
         }),
-      deleteQuiz: (id: string) =>
-        dispatch({ type: "DELETE_QUIZ", payload: { id } }),
+      deleteQuiz: (id: string) => dispatch({ type: "DELETE_QUIZ", payload: { id } }),
       selectQuizForEditor: (id: string | null) =>
         dispatch({ type: "SELECT_QUIZ_FOR_EDITOR", payload: { id } }),
       setEditingQuestion: (id: string | null) =>
@@ -815,11 +1196,7 @@ export function AppStoreProvider({ children }: { children: React.ReactNode }) {
     []
   )
 
-  return (
-    <AppStoreContext.Provider value={{ state, actions }}>
-      {children}
-    </AppStoreContext.Provider>
-  )
+  return <AppStoreContext.Provider value={{ state, actions }}>{children}</AppStoreContext.Provider>
 }
 
 /**
diff --git a/documentation/project-docs/components.md b/documentation/project-docs/components.md
index 28e125c..578c3d0 100644
--- a/documentation/project-docs/components.md
+++ b/documentation/project-docs/components.md
@@ -24,10 +24,16 @@ Reference for React components. All feature components are client components unl
 
 | Component              | File                                    | Description                                                |
 | ---------------------- | --------------------------------------- | ---------------------------------------------------------- |
-| `StudentForm`          | `components/students/student-form.tsx`  | Add and import students (comma-separated or file).         |
-| `StudentTable`         | `components/students/student-table.tsx` | Edit, exclude, delete students.                            |
+| `StudentForm`          | `components/students/student-form.tsx`  | Manage classes, import full class files (`.txt`/`.json`), add/import students to active class. |
+| `StudentTable`         | `components/students/student-table.tsx` | Mobile-style roster cards on all breakpoints: edit, exclude, delete students. |
 | `StudentNameGenerator` | `components/student-name-generator.tsx` | Standalone name generator utility (root of `components/`). |
 
+## Classes
+
+| Component       | File                                  | Description                                                        |
+| --------------- | ------------------------------------- | ------------------------------------------------------------------ |
+| `ClassSelector` | `components/classes/class-selector.tsx` | Shared class dropdown used across students, generator, play, breakout, and projects. |
+
 ## Generator
 
 | Component       | File                                      | Description                                           |
@@ -38,10 +44,9 @@ Reference for React components. All feature components are client components unl
 
 | Component        | File                                      | Description                             |
 | ---------------- | ----------------------------------------- | --------------------------------------- |
-| `QuizEditor`     | `components/quizzes/quiz-editor.tsx`      | Wrapper for create/edit/import quizzes. |
-| `QuizEditorForm` | `components/quizzes/quiz-editor-form.tsx` | Quiz title and questions form.          |
+| `QuizEditor`     | `components/quizzes/quiz-editor.tsx`      | Wrapper for create/edit quiz workflows. |
+| `QuizEditorForm` | `components/quizzes/quiz-editor-form.tsx` | Unified quiz details, optional description, question editing, and JSON file import (single or bulk quiz payloads). Questions render as card rows across all breakpoints with overflow scrolling capped to builder card height. |
 | `QuizSelector`   | `components/quizzes/quiz-selector.tsx`    | Shared quiz picker (dropdown).          |
-| `QuizImportCard` | `components/quizzes/quiz-import-card.tsx` | Import quiz from file.                  |
 
 ## Play
 
@@ -94,7 +99,7 @@ Base components in `components/ui/` use Tailwind and (where noted) Base UI / sha
 | `Button`                                         | CVA variants; use `button-variants.ts` for server-safe variants. |
 | `Card`, `CardHeader`, etc.                       | Layout primitives.                                               |
 | `Input`, `Textarea`                              | Form inputs.                                                     |
-| `Select`, `Label`, `Field`                       | Form field wrappers.                                             |
+| `Select`, `Label`, `Field`                       | Form field wrappers. `SelectContent` defaults to popper-style content-fit behavior; pass `alignItemWithTrigger={true}` for trigger-aligned positioning. |
 | `Dialog`, `DialogContent`, `DialogTrigger`, etc. | Modal dialogs (used by PageInfoDialog, etc.).                    |
 | `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent` | Tabbed content.                                                  |
 | `AlertDialog`                                    | Confirmation dialogs.                                            |
@@ -119,6 +124,7 @@ import { buttonVariants } from '@/components/ui/button-variants';
 Component tests:
 
 - `StudentForm` – `components/students/__tests__/student-form.test.tsx`
+- `Select` – `components/ui/__tests__/select.test.tsx`
 - `QuizSelector` – `components/quizzes/__tests__/quiz-selector.test.tsx`
 - `PageInfoDialog` – `components/utility/__tests__/page-info-dialog.test.tsx`
 
diff --git a/documentation/project-docs/routes.md b/documentation/project-docs/routes.md
index ba52527..b788526 100644
--- a/documentation/project-docs/routes.md
+++ b/documentation/project-docs/routes.md
@@ -13,12 +13,12 @@
 | Route             | File                          | Description                                    |
 | ----------------- | ----------------------------- | ---------------------------------------------- |
 | `/`               | `app/page.tsx`                | Dashboard with feature cards (server-rendered) |
-| `/students`       | `app/students/page.tsx`       | Student management: add, import, edit, exclude |
-| `/generator`      | `app/generator/page.tsx`      | Random student generator with no-repeat logic  |
+| `/students`       | `app/students/page.tsx`       | Class + roster management: full class import, student add/edit/exclude |
+| `/generator`      | `app/generator/page.tsx`      | Random student generator with class-scoped no-repeat logic |
 | `/quizzes`        | `app/quizzes/page.tsx`        | Quiz builder: create, edit, import questions   |
-| `/play`           | `app/play/page.tsx`           | Quiz play mode with question/student pairing   |
-| `/breakout-rooms` | `app/breakout-rooms/page.tsx` | Random group generator                         |
-| `/projects`       | `app/projects/page.tsx`       | Project lists management                       |
+| `/play`           | `app/play/page.tsx`           | Quiz play mode with class-scoped question/student pairing |
+| `/breakout-rooms` | `app/breakout-rooms/page.tsx` | Class-scoped random group generator            |
+| `/projects`       | `app/projects/page.tsx`       | Class-scoped project list management           |
 
 ## Route Metadata
 
diff --git a/documentation/project-docs/state-and-storage.md b/documentation/project-docs/state-and-storage.md
index dad072e..32510e8 100644
--- a/documentation/project-docs/state-and-storage.md
+++ b/documentation/project-docs/state-and-storage.md
@@ -9,15 +9,17 @@ The primary state lives in `context/app-store.tsx` and is accessed through `useA
 ```typescript
 AppState {
   persisted: {
+    classes: Classroom[]
+    activeClassId: string | null
     students: Student[]
     quizIndex: QuizIndexEntry[]
     quizzes: Record<string, Quiz>
     projectLists: ProjectList[]
-    breakoutGroups: BreakoutGroups | null
+    breakoutGroupsByClass: Record<string, BreakoutGroups>
   }
   domain: {
-    generator: GeneratorState      // Random draw state
-    quizPlay: QuizPlayState        // Quiz play session state
+    generator: GeneratorState      // Random draw state (class scoped)
+    quizPlay: QuizPlayState        // Quiz play session state (class scoped)
   }
   ui: {
     quizEditor: { activeQuizId, editingQuestionId }
@@ -30,58 +32,63 @@ AppState {
 
 | Category | Persisted | Description |
 |----------|-----------|-------------|
-| `persisted` | Yes | Students, quizzes, project lists, breakout groups |
+| `persisted` | Yes | Classes, students, quizzes, project lists, breakout groups |
 | `domain` | No | Ephemeral session state (generator, quiz play) |
-| `ui` | No | Editor selection, hydration flag |
+| `ui` | No | Editor selection and hydration flag |
 
 ## Reducer Actions
 
+### Class Actions
+
+| Action | Effect |
+|--------|--------|
+| `ADD_CLASS` | Add a class (dedupe by normalized class name) |
+| `SELECT_ACTIVE_CLASS` | Switch active class and prune class-scoped domain state |
+| `DELETE_CLASS` | Remove one class and all class-scoped data |
+| `CLEAR_CLASSES` | Remove all classes and all class-scoped data |
+| `IMPORT_CLASS_RECORDS` | Import class + student records from `.txt`/`.json` payloads |
+
 ### Student Actions
 
 | Action | Effect |
 |--------|--------|
-| `ADD_STUDENT` | Add new student (rejects duplicates) |
-| `UPDATE_STUDENT` | Update student name |
-| `DELETE_STUDENT` | Remove student |
+| `ADD_STUDENT` | Add student to active class (reject duplicates inside class) |
+| `UPDATE_STUDENT` | Update student name and/or class assignment |
+| `DELETE_STUDENT` | Remove one student |
 | `TOGGLE_STUDENT_EXCLUDED` | Toggle active/excluded status |
-| `CLEAR_STUDENTS` | Remove all students |
+| `CLEAR_STUDENTS` | Remove all students in active class |
 
 ### Quiz Actions
 
 | Action | Effect |
 |--------|--------|
-| `CREATE_QUIZ` | Create new quiz, set as active |
+| `CREATE_QUIZ` | Create new quiz and set as active in editor |
 | `UPDATE_QUIZ` | Update quiz title and questions |
 | `DELETE_QUIZ` | Remove quiz |
 | `SELECT_QUIZ_FOR_EDITOR` | Set active quiz in editor |
-| `SET_EDITING_QUESTION` | Set question being edited |
+| `SET_EDITING_QUESTION` | Set question currently being edited |
 
 ### Quiz Play Actions
 
 | Action | Effect |
 |--------|--------|
 | `SELECT_QUIZ_FOR_PLAY` | Load quiz for play session |
-| `DRAW_QUIZ_PAIR` | Draw random question + student |
+| `DRAW_QUIZ_PAIR` | Draw random question + active student from active class |
 | `REVEAL_ANSWER` | Show answer for current question |
-| `RESET_QUIZ_PLAY` | Clear session, keep quiz selected |
-
-### Generator Actions
+| `RESET_QUIZ_PLAY` | Clear session while keeping selected quiz |
 
-| Action | Effect |
-|--------|--------|
-| `DRAW_STUDENT` | Draw random active student (no repeat) |
-| `RESET_GENERATOR` | Clear used students list |
-
-### Other Actions
+### Generator and Group Actions
 
 | Action | Effect |
 |--------|--------|
-| `SET_BREAKOUT_GROUPS` | Save breakout group configuration |
-| `CLEAR_BREAKOUT_GROUPS` | Remove breakout groups |
-| `CREATE_PROJECT_LIST` | Create new project list |
-| `UPDATE_PROJECT_LIST` | Update project list |
-| `DELETE_PROJECT_LIST` | Remove project list |
-| `HYDRATE_PERSISTED` | Load state from localStorage |
+| `DRAW_STUDENT` | Draw random active student from active class (no repeats) |
+| `RESET_GENERATOR` | Clear used student history |
+| `SET_BREAKOUT_GROUPS` | Save breakout groups for class |
+| `CLEAR_BREAKOUT_GROUPS` | Remove breakout groups for active class |
+| `CREATE_PROJECT_LIST` | Create project list tied to active class |
+| `UPDATE_PROJECT_LIST` | Update a project list |
+| `DELETE_PROJECT_LIST` | Remove a project list |
+| `HYDRATE_PERSISTED` | Load persisted state from localStorage |
 
 ## Persistence
 
@@ -91,53 +98,62 @@ All keys are prefixed with `teacherbuddy:`:
 
 | Key | Data |
 |-----|------|
-| `teacherbuddy:students` | Student array |
+| `teacherbuddy:classes` | Class list |
+| `teacherbuddy:active-class` | Active class ID |
+| `teacherbuddy:students` | Student array (class-aware) |
 | `teacherbuddy:quiz-index` | Quiz metadata array |
-| `teacherbuddy:quiz:<id>` | Individual quiz data |
-| `teacherbuddy:project-lists` | Project lists array |
-| `teacherbuddy:breakout-groups` | Breakout configuration |
+| `teacherbuddy:quiz:<id>` | Individual quiz payload |
+| `teacherbuddy:project-lists` | Project list array |
+| `teacherbuddy:breakout-groups` | Breakout groups keyed by class ID |
 | `teacherbuddy:timer` | Timer persistence state |
 
 ### Persistence Flow
 
-1. **Load**: On mount, `loadPersistedState()` reads all keys and validates with type guards
-2. **Hydrate**: `HYDRATE_PERSISTED` action updates state, sets `isHydrated: true`
-3. **Save**: After hydration, state changes trigger writes via `useEffect`
+1. **Load**: `loadPersistedState()` reads localStorage and validates/migrates legacy formats.
+2. **Hydrate**: `HYDRATE_PERSISTED` updates app state and sets `isHydrated: true`.
+3. **Save**: A post-hydration `useEffect` writes class, student, quiz, project, and breakout updates.
 
 ### Data Validation
 
 `lib/type-guards.ts` provides runtime validation:
 
 ```typescript
-isStudent(value)           // Validates Student shape
-isQuiz(value)              // Validates Quiz shape
-isQuestion(value)          // Validates Question shape
-isBreakoutGroups(value)    // Validates BreakoutGroups shape
-isProjectList(value)       // Validates ProjectList shape
-isPersistedTimerState(value) // Validates timer state
+isClassroom(value)
+isStudent(value)
+isQuiz(value)
+isQuestion(value)
+isBreakoutGroups(value)
+isProjectList(value)
+isPersistedTimerState(value)
 ```
 
-Invalid data is filtered out during load to prevent crashes from corrupted localStorage.
+Invalid payloads are filtered out during load to prevent crashes from corrupt storage.
 
 ### Legacy Migration
 
-`loadStudents()` handles legacy format migration:
-- Old format: `["Name1", "Name2"]` (string array)
-- New format: `[{ id, name, status, createdAt }]` (Student objects)
+`lib/storage.ts` keeps backward compatibility by migrating older payloads:
+
+- Legacy student string arrays -> class-aware `Student[]`
+- Legacy student objects without `classId` -> assigned to fallback class
+- Legacy project lists and breakout payloads -> class-aware structures
 
 ## Timer Persistence
 
-The timer (`hooks/use-timer.ts`) has separate persistence:
+Timer persistence (`hooks/use-timer.ts`) is separate from app store persistence:
 
 | Field | Purpose |
 |-------|---------|
-| `configuredTotalSeconds` | Original timer duration |
-| `remainingSeconds` | Time remaining |
-| `isRunning` | Whether timer was running |
-| `savedAt` | Timestamp for elapsed time calculation |
+| `configuredTotalSeconds` | Configured timer duration |
+| `remainingSeconds` | Time left |
+| `isRunning` | Running state |
+| `savedAt` | Timestamp used to compute elapsed time |
 
-On restore, elapsed time since `savedAt` is subtracted if the timer was running.
+On restore, elapsed time since `savedAt` is subtracted when `isRunning` is true.
 
 ## Testing State
 
-The app reducer is thoroughly tested in `context/__tests__/app-reducer.test.ts` with 39 tests covering all actions. Tests use `renderHook` with the `AppStoreProvider` wrapper to test state transitions.
+Reducer and storage behavior are covered in:
+
+- `context/__tests__/app-reducer.test.ts`
+- `lib/__tests__/storage.test.ts`
+- `lib/__tests__/type-guards.test.ts`
diff --git a/lib/__tests__/classes.test.ts b/lib/__tests__/classes.test.ts
new file mode 100644
index 0000000..b61a6d7
--- /dev/null
+++ b/lib/__tests__/classes.test.ts
@@ -0,0 +1,108 @@
+import { describe, expect, it } from "vitest"
+
+import {
+  classNameKey,
+  normalizeClassName,
+  parseClassImportJson,
+  parseClassImportText,
+  parseClassNamesFromText,
+} from "@/lib/classes"
+
+describe("normalizeClassName", () => {
+  it("trims and collapses spaces", () => {
+    expect(normalizeClassName("  Math   101  ")).toBe("Math 101")
+  })
+})
+
+describe("classNameKey", () => {
+  it("returns a lowercase normalized key", () => {
+    expect(classNameKey("  Math   101  ")).toBe("math 101")
+  })
+})
+
+describe("parseClassNamesFromText", () => {
+  it("supports comma and newline separators", () => {
+    expect(parseClassNamesFromText("Math 101,Science\nHistory")).toEqual([
+      "Math 101",
+      "Science",
+      "History",
+    ])
+  })
+})
+
+describe("parseClassImportJson", () => {
+  it("accepts a single class object", () => {
+    const result = parseClassImportJson(
+      JSON.stringify({
+        classId: "class-1",
+        className: "Math 101",
+        students: ["Alex", { name: "Sam", id: "sam-1" }],
+      })
+    )
+
+    expect(result.ok).toBe(true)
+    if (!result.ok) return
+    expect(result.classes).toHaveLength(1)
+    expect(result.classes[0].students).toHaveLength(2)
+  })
+
+  it("accepts an array of classes", () => {
+    const result = parseClassImportJson(
+      JSON.stringify([
+        { className: "Math", students: ["Alex"] },
+        { className: "Science", students: ["Sam"] },
+      ])
+    )
+
+    expect(result.ok).toBe(true)
+    if (!result.ok) return
+    expect(result.classes).toHaveLength(2)
+  })
+
+  it("skips classes with no valid students", () => {
+    const result = parseClassImportJson(
+      JSON.stringify({
+        className: "Math",
+        students: ["", "   "],
+      })
+    )
+
+    expect(result.ok).toBe(false)
+  })
+
+  it("returns a failure for invalid json", () => {
+    const result = parseClassImportJson("{")
+    expect(result.ok).toBe(false)
+  })
+})
+
+describe("parseClassImportText", () => {
+  it("parses one class per line with students", () => {
+    const result = parseClassImportText(
+      "Math 101: Alex Johnson, Sam Lee\nScience 2B: Priya Patel, Omar Khan"
+    )
+    expect(result.ok).toBe(true)
+    if (!result.ok) return
+    expect(result.classes).toHaveLength(2)
+    expect(result.classes[0].className).toBe("Math 101")
+    expect(result.classes[0].students.map((entry) => entry.name)).toEqual([
+      "Alex Johnson",
+      "Sam Lee",
+    ])
+  })
+
+  it("fails when format is invalid", () => {
+    const result = parseClassImportText("Math 101")
+    expect(result.ok).toBe(false)
+  })
+
+  it("skips invalid lines and keeps valid class lines", () => {
+    const result = parseClassImportText(
+      "Math 101: Alex, Sam\ninvalid-line\nScience: Priya"
+    )
+    expect(result.ok).toBe(true)
+    if (!result.ok) return
+    expect(result.classes).toHaveLength(2)
+    expect(result.skippedClasses).toBe(1)
+  })
+})
diff --git a/lib/__tests__/storage.test.ts b/lib/__tests__/storage.test.ts
index 13437f1..10f2245 100644
--- a/lib/__tests__/storage.test.ts
+++ b/lib/__tests__/storage.test.ts
@@ -1,500 +1,170 @@
-import { beforeEach, describe, expect, it, vi } from "vitest"
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import type { BreakoutGroups, Quiz, QuizIndexEntry, Student } from "@/lib/models"
-import type { PersistedTimerState } from "@/lib/storage"
+import type { BreakoutGroups, Classroom, Quiz, QuizIndexEntry, Student } from '@/lib/models'
+import type { PersistedTimerState } from '@/lib/storage'
 import {
   clearTimer,
-  loadBreakoutGroups,
+  loadActiveClassId,
+  loadBreakoutGroupsByClass,
+  loadClasses,
   loadPersistedState,
   loadQuiz,
   loadQuizIndex,
   loadStudents,
   loadTimer,
   removeQuiz,
-  saveBreakoutGroups,
+  saveActiveClassId,
+  saveBreakoutGroupsByClass,
+  saveClasses,
   saveQuiz,
   saveQuizIndex,
   saveStudents,
   saveTimer,
-} from "@/lib/storage"
+} from '@/lib/storage'
 
-describe("loadStudents", () => {
+describe('storage', () => {
   beforeEach(() => {
     localStorage.clear()
     vi.clearAllMocks()
   })
 
-  it("returns empty array when no data", () => {
-    expect(loadStudents()).toEqual([])
-  })
-
-  it("returns empty array for invalid JSON", () => {
-    localStorage.setItem("teacherbuddy:students", "not valid json")
-    expect(loadStudents()).toEqual([])
-  })
-
-  it("returns empty array for non-array data", () => {
-    localStorage.setItem("teacherbuddy:students", '{"not": "an array"}')
-    expect(loadStudents()).toEqual([])
-  })
-
-  it("filters out invalid student objects", () => {
-    const mixedData = [
-      { id: "1", name: "Valid", status: "active", createdAt: 1000 },
-      { id: "2", name: "Missing Status", createdAt: 1000 },
-      { invalid: "object" },
-      null,
-      "string",
+  it('loads and saves classes', () => {
+    const classes: Classroom[] = [
+      { id: 'class-1', name: 'Math', createdAt: 1000 },
+      { id: 'class-2', name: 'Science', createdAt: 2000 },
     ]
-    localStorage.setItem("teacherbuddy:students", JSON.stringify(mixedData))
 
-    const result = loadStudents()
-    expect(result).toHaveLength(1)
-    expect(result[0].name).toBe("Valid")
+    saveClasses(classes)
+    expect(loadClasses()).toEqual(classes)
   })
 
-  it("migrates legacy string array format", () => {
-    const legacyData = ["John Doe", "Jane Smith"]
-    localStorage.setItem("teacherbuddy:students", JSON.stringify(legacyData))
+  it('loads and saves active class id', () => {
+    saveActiveClassId('class-1')
+    expect(loadActiveClassId()).toBe('class-1')
 
-    const result = loadStudents()
-    expect(result).toHaveLength(2)
-    expect(result[0].name).toBe("John Doe")
-    expect(result[0].status).toBe("active")
-    expect(result[0].id).toBeDefined()
-    expect(result[0].createdAt).toBeDefined()
-    expect(result[1].name).toBe("Jane Smith")
+    saveActiveClassId(null)
+    expect(loadActiveClassId()).toBeNull()
   })
 
-  it("returns valid students from storage", () => {
-    const students: Student[] = [
-      { id: "1", name: "John Doe", status: "active", createdAt: 1000 },
-      { id: "2", name: "Jane Smith", status: "excluded", createdAt: 2000 },
-    ]
-    localStorage.setItem("teacherbuddy:students", JSON.stringify(students))
+  it('migrates legacy string student arrays when class id is provided', () => {
+    localStorage.setItem('teacherbuddy:students', JSON.stringify(['Alex', 'Sam']))
 
-    const result = loadStudents()
-    expect(result).toEqual(students)
-  })
-})
+    const students = loadStudents('class-1')
 
-describe("saveStudents", () => {
-  beforeEach(() => {
-    localStorage.clear()
-    vi.clearAllMocks()
+    expect(students).toHaveLength(2)
+    expect(students[0].classId).toBe('class-1')
   })
 
-  it("saves students to localStorage", () => {
+  it('saves and loads class-aware students', () => {
     const students: Student[] = [
-      { id: "1", name: "John Doe", status: "active", createdAt: 1000 },
+      {
+        id: 's1',
+        classId: 'class-1',
+        name: 'Alex',
+        status: 'active',
+        createdAt: 1000,
+      },
     ]
 
     saveStudents(students)
-
-    expect(localStorage.setItem).toHaveBeenCalledWith(
-      "teacherbuddy:students",
-      JSON.stringify(students)
-    )
-  })
-
-  it("handles empty array", () => {
-    saveStudents([])
-
-    expect(localStorage.setItem).toHaveBeenCalledWith(
-      "teacherbuddy:students",
-      "[]"
-    )
-  })
-})
-
-describe("loadQuizIndex", () => {
-  beforeEach(() => {
-    localStorage.clear()
-    vi.clearAllMocks()
-  })
-
-  it("returns empty array when no data", () => {
-    expect(loadQuizIndex()).toEqual([])
+    expect(loadStudents()).toEqual(students)
   })
 
-  it("returns empty array for invalid JSON", () => {
-    localStorage.setItem("teacherbuddy:quiz-index", "not valid json")
-    expect(loadQuizIndex()).toEqual([])
-  })
-
-  it("returns empty array for non-array data", () => {
-    localStorage.setItem("teacherbuddy:quiz-index", '{"not": "an array"}')
-    expect(loadQuizIndex()).toEqual([])
-  })
-
-  it("filters out invalid entries", () => {
-    const mixedData = [
-      { id: "1", title: "Valid Quiz", createdAt: 1000 },
-      { id: "2", title: "Missing createdAt" },
-      { invalid: "entry" },
-    ]
-    localStorage.setItem("teacherbuddy:quiz-index", JSON.stringify(mixedData))
-
-    const result = loadQuizIndex()
-    expect(result).toHaveLength(1)
-    expect(result[0].title).toBe("Valid Quiz")
-  })
-
-  it("returns valid quiz index entries", () => {
-    const entries: QuizIndexEntry[] = [
-      { id: "1", title: "Quiz 1", createdAt: 1000 },
-      { id: "2", title: "Quiz 2", createdAt: 2000 },
-    ]
-    localStorage.setItem("teacherbuddy:quiz-index", JSON.stringify(entries))
-
-    expect(loadQuizIndex()).toEqual(entries)
-  })
-})
-
-describe("saveQuizIndex", () => {
-  beforeEach(() => {
-    localStorage.clear()
-    vi.clearAllMocks()
-  })
-
-  it("saves quiz index to localStorage", () => {
-    const entries: QuizIndexEntry[] = [
-      { id: "1", title: "Quiz 1", createdAt: 1000 },
-    ]
-
-    saveQuizIndex(entries)
-
-    expect(localStorage.setItem).toHaveBeenCalledWith(
-      "teacherbuddy:quiz-index",
-      JSON.stringify(entries)
-    )
-  })
-})
-
-describe("loadQuiz", () => {
-  beforeEach(() => {
-    localStorage.clear()
-    vi.clearAllMocks()
-  })
-
-  it("returns null when no data", () => {
-    expect(loadQuiz("nonexistent")).toBeNull()
-  })
-
-  it("returns null for invalid JSON", () => {
-    localStorage.setItem("teacherbuddy:quiz:test", "not valid json")
-    expect(loadQuiz("test")).toBeNull()
-  })
-
-  it("returns null for invalid quiz", () => {
-    const invalidQuiz = { id: "1", title: "Missing fields" }
-    localStorage.setItem("teacherbuddy:quiz:1", JSON.stringify(invalidQuiz))
-
-    expect(loadQuiz("1")).toBeNull()
-  })
-
-  it("returns valid quiz from storage", () => {
-    const quiz: Quiz = {
-      id: "1",
-      title: "Math Quiz",
-      questions: [{ id: "q1", prompt: "2+2?", answer: "4" }],
-      createdAt: 1000,
-      updatedAt: 2000,
+  it('saves and loads breakout groups keyed by class', () => {
+    const groups: Record<string, BreakoutGroups> = {
+      'class-1': {
+        classId: 'class-1',
+        groupSize: 2,
+        groupIds: [['s1', 's2']],
+        createdAt: 1000,
+      },
     }
-    localStorage.setItem("teacherbuddy:quiz:1", JSON.stringify(quiz))
 
-    expect(loadQuiz("1")).toEqual(quiz)
-  })
-})
+    saveBreakoutGroupsByClass(groups)
+    expect(loadBreakoutGroupsByClass()).toEqual(groups)
 
-describe("saveQuiz", () => {
-  beforeEach(() => {
-    localStorage.clear()
-    vi.clearAllMocks()
+    saveBreakoutGroupsByClass({})
+    expect(loadBreakoutGroupsByClass()).toEqual({})
   })
 
-  it("saves quiz with correct key", () => {
+  it('loads quiz index and quiz payloads', () => {
+    const quizIndex: QuizIndexEntry[] = [{ id: 'q1', title: 'Quiz 1', createdAt: 1000 }]
     const quiz: Quiz = {
-      id: "test-quiz",
-      title: "Test Quiz",
+      id: 'q1',
+      title: 'Quiz 1',
       questions: [],
       createdAt: 1000,
-      updatedAt: 2000,
+      updatedAt: 1000,
     }
 
+    saveQuizIndex(quizIndex)
     saveQuiz(quiz)
 
-    expect(localStorage.setItem).toHaveBeenCalledWith(
-      "teacherbuddy:quiz:test-quiz",
-      JSON.stringify(quiz)
-    )
-  })
-})
-
-describe("removeQuiz", () => {
-  beforeEach(() => {
-    localStorage.clear()
-    vi.clearAllMocks()
-  })
-
-  it("removes quiz from storage", () => {
-    removeQuiz("test-quiz")
-
-    expect(localStorage.removeItem).toHaveBeenCalledWith(
-      "teacherbuddy:quiz:test-quiz"
-    )
-  })
-})
-
-describe("loadBreakoutGroups", () => {
-  beforeEach(() => {
-    localStorage.clear()
-    vi.clearAllMocks()
-  })
-
-  it("returns null when no data", () => {
-    expect(loadBreakoutGroups()).toBeNull()
-  })
-
-  it("returns null for invalid JSON", () => {
-    localStorage.setItem("teacherbuddy:breakout-groups", "not valid json")
-    expect(loadBreakoutGroups()).toBeNull()
-  })
-
-  it("returns null for invalid breakout groups", () => {
-    const invalid = { groupSize: 2 } // missing groupIds and createdAt
-    localStorage.setItem("teacherbuddy:breakout-groups", JSON.stringify(invalid))
+    expect(loadQuizIndex()).toEqual(quizIndex)
+    expect(loadQuiz('q1')).toEqual(quiz)
 
-    expect(loadBreakoutGroups()).toBeNull()
+    removeQuiz('q1')
+    expect(loadQuiz('q1')).toBeNull()
   })
 
-  it("validates groupIds structure", () => {
-    const invalidGroupIds = {
-      groupSize: 2,
-      groupIds: "not an array",
-      createdAt: 1000,
-    }
-    localStorage.setItem(
-      "teacherbuddy:breakout-groups",
-      JSON.stringify(invalidGroupIds)
-    )
-
-    expect(loadBreakoutGroups()).toBeNull()
-  })
-
-  it("returns valid breakout groups", () => {
-    const groups: BreakoutGroups = {
-      groupSize: 3,
-      groupIds: [
-        ["id1", "id2", "id3"],
-        ["id4", "id5"],
-      ],
-      createdAt: 1000,
-    }
-    localStorage.setItem("teacherbuddy:breakout-groups", JSON.stringify(groups))
-
-    expect(loadBreakoutGroups()).toEqual(groups)
-  })
-})
-
-describe("saveBreakoutGroups", () => {
-  beforeEach(() => {
-    localStorage.clear()
-    vi.clearAllMocks()
-  })
-
-  it("saves breakout groups to localStorage", () => {
-    const groups: BreakoutGroups = {
-      groupSize: 3,
-      groupIds: [["id1", "id2", "id3"]],
-      createdAt: 1000,
-    }
-
-    saveBreakoutGroups(groups)
-
-    expect(localStorage.setItem).toHaveBeenCalledWith(
-      "teacherbuddy:breakout-groups",
-      JSON.stringify(groups)
-    )
-  })
-
-  it("removes breakout groups when null", () => {
-    saveBreakoutGroups(null)
-
-    expect(localStorage.removeItem).toHaveBeenCalledWith(
-      "teacherbuddy:breakout-groups"
-    )
-  })
-})
-
-describe("loadTimer", () => {
-  beforeEach(() => {
-    localStorage.clear()
-    vi.clearAllMocks()
-  })
-
-  it("returns null when no data", () => {
-    expect(loadTimer()).toBeNull()
-  })
-
-  it("returns null for invalid JSON", () => {
-    localStorage.setItem("teacherbuddy:timer", "not valid json")
-    expect(loadTimer()).toBeNull()
-  })
-
-  it("returns null for invalid timer state", () => {
-    const invalid = { configuredTotalSeconds: 300 } // missing other fields
-    localStorage.setItem("teacherbuddy:timer", JSON.stringify(invalid))
-
-    expect(loadTimer()).toBeNull()
-  })
-
-  it("returns null when remainingSeconds <= 0", () => {
-    const expiredTimer: PersistedTimerState = {
-      configuredTotalSeconds: 300,
-      remainingSeconds: 0,
-      isRunning: false,
-      savedAt: Date.now(),
-    }
-    localStorage.setItem("teacherbuddy:timer", JSON.stringify(expiredTimer))
-
-    expect(loadTimer()).toBeNull()
-  })
-
-  it("returns null when remainingSeconds is negative", () => {
-    const negativeTimer: PersistedTimerState = {
-      configuredTotalSeconds: 300,
-      remainingSeconds: -10,
-      isRunning: false,
-      savedAt: Date.now(),
-    }
-    localStorage.setItem("teacherbuddy:timer", JSON.stringify(negativeTimer))
-
-    expect(loadTimer()).toBeNull()
-  })
-
-  it("returns valid timer state", () => {
-    const timerState: PersistedTimerState = {
-      configuredTotalSeconds: 300,
-      remainingSeconds: 150,
-      isRunning: true,
-      savedAt: 1000,
-    }
-    localStorage.setItem("teacherbuddy:timer", JSON.stringify(timerState))
-
-    expect(loadTimer()).toEqual(timerState)
-  })
-})
-
-describe("saveTimer", () => {
-  beforeEach(() => {
-    localStorage.clear()
-    vi.clearAllMocks()
-  })
-
-  it("saves timer state correctly", () => {
-    const timerState: PersistedTimerState = {
-      configuredTotalSeconds: 300,
-      remainingSeconds: 150,
-      isRunning: true,
-      savedAt: 1000,
-    }
-
-    saveTimer(timerState)
-
-    expect(localStorage.setItem).toHaveBeenCalledWith(
-      "teacherbuddy:timer",
-      JSON.stringify(timerState)
-    )
-  })
-})
-
-describe("clearTimer", () => {
-  beforeEach(() => {
-    localStorage.clear()
-    vi.clearAllMocks()
-  })
-
-  it("clears timer from storage", () => {
-    clearTimer()
-
-    expect(localStorage.removeItem).toHaveBeenCalledWith("teacherbuddy:timer")
-  })
-})
-
-describe("loadPersistedState", () => {
-  beforeEach(() => {
-    localStorage.clear()
-    vi.clearAllMocks()
-  })
-
-  it("loads all persisted data", () => {
+  it('loads persisted state with class-aware structures', () => {
+    const classes: Classroom[] = [{ id: 'class-1', name: 'Math', createdAt: 1000 }]
     const students: Student[] = [
-      { id: "s1", name: "John", status: "active", createdAt: 1000 },
-    ]
-    const quizIndex: QuizIndexEntry[] = [
-      { id: "q1", title: "Quiz 1", createdAt: 1000 },
+      {
+        id: 's1',
+        classId: 'class-1',
+        name: 'Alex',
+        status: 'active',
+        createdAt: 1000,
+      },
     ]
+    const quizIndex: QuizIndexEntry[] = [{ id: 'q1', title: 'Quiz 1', createdAt: 1000 }]
     const quiz: Quiz = {
-      id: "q1",
-      title: "Quiz 1",
+      id: 'q1',
+      title: 'Quiz 1',
       questions: [],
       createdAt: 1000,
       updatedAt: 1000,
     }
-    const breakoutGroups: BreakoutGroups = {
-      groupSize: 2,
-      groupIds: [["s1"]],
-      createdAt: 1000,
-    }
 
-    localStorage.setItem("teacherbuddy:students", JSON.stringify(students))
-    localStorage.setItem("teacherbuddy:quiz-index", JSON.stringify(quizIndex))
-    localStorage.setItem("teacherbuddy:quiz:q1", JSON.stringify(quiz))
+    localStorage.setItem('teacherbuddy:classes', JSON.stringify(classes))
+    localStorage.setItem('teacherbuddy:active-class', JSON.stringify('class-1'))
+    localStorage.setItem('teacherbuddy:students', JSON.stringify(students))
+    localStorage.setItem('teacherbuddy:quiz-index', JSON.stringify(quizIndex))
+    localStorage.setItem('teacherbuddy:quiz:q1', JSON.stringify(quiz))
     localStorage.setItem(
-      "teacherbuddy:breakout-groups",
-      JSON.stringify(breakoutGroups)
+      'teacherbuddy:breakout-groups',
+      JSON.stringify({
+        'class-1': {
+          classId: 'class-1',
+          groupSize: 2,
+          groupIds: [['s1']],
+          createdAt: 1000,
+        },
+      })
     )
 
     const result = loadPersistedState()
 
+    expect(result.classes).toEqual(classes)
+    expect(result.activeClassId).toBe('class-1')
     expect(result.students).toEqual(students)
-    expect(result.quizIndex).toEqual(quizIndex)
     expect(result.quizzes).toEqual({ q1: quiz })
-    expect(result.breakoutGroups).toEqual(breakoutGroups)
+    expect(result.breakoutGroupsByClass['class-1']).toBeDefined()
   })
 
-  it("cleans orphaned quiz index entries", () => {
-    const quizIndex: QuizIndexEntry[] = [
-      { id: "exists", title: "Exists", createdAt: 1000 },
-      { id: "orphaned", title: "Orphaned", createdAt: 2000 },
-    ]
-    const quiz: Quiz = {
-      id: "exists",
-      title: "Exists",
-      questions: [],
-      createdAt: 1000,
-      updatedAt: 1000,
+  it('loads and validates timer state', () => {
+    const timer: PersistedTimerState = {
+      configuredTotalSeconds: 300,
+      remainingSeconds: 100,
+      isRunning: true,
+      savedAt: 1000,
     }
 
-    localStorage.setItem("teacherbuddy:quiz-index", JSON.stringify(quizIndex))
-    localStorage.setItem("teacherbuddy:quiz:exists", JSON.stringify(quiz))
-    // Note: "orphaned" quiz is NOT in storage
-
-    const result = loadPersistedState()
+    saveTimer(timer)
+    expect(loadTimer()).toEqual(timer)
 
-    expect(result.quizIndex).toHaveLength(1)
-    expect(result.quizIndex[0].id).toBe("exists")
-    expect(Object.keys(result.quizzes)).toEqual(["exists"])
-  })
-
-  it("returns empty structures when nothing stored", () => {
-    const result = loadPersistedState()
-
-    expect(result.students).toEqual([])
-    expect(result.quizIndex).toEqual([])
-    expect(result.quizzes).toEqual({})
-    expect(result.breakoutGroups).toBeNull()
-    expect(result.projectLists).toEqual([])
+    clearTimer()
+    expect(loadTimer()).toBeNull()
   })
 })
diff --git a/lib/__tests__/type-guards.test.ts b/lib/__tests__/type-guards.test.ts
index b641fcb..b152a75 100644
--- a/lib/__tests__/type-guards.test.ts
+++ b/lib/__tests__/type-guards.test.ts
@@ -1,754 +1,123 @@
-import { describe, expect, it } from "vitest"
+import { describe, expect, it } from 'vitest'
 
 import {
   isBreakoutGroups,
+  isClassroom,
   isPersistedTimerState,
   isProjectList,
   isQuestion,
   isQuiz,
   isQuizIndexEntry,
   isStudent,
-} from "@/lib/type-guards"
-
-describe("isStudent", () => {
-  it("returns true for valid student object", () => {
-    const validStudent = {
-      id: "123",
-      name: "John Doe",
-      status: "active",
-      createdAt: Date.now(),
-    }
-    expect(isStudent(validStudent)).toBe(true)
-  })
-
-  it("returns true for excluded status", () => {
-    const excludedStudent = {
-      id: "123",
-      name: "John Doe",
-      status: "excluded",
-      createdAt: Date.now(),
-    }
-    expect(isStudent(excludedStudent)).toBe(true)
-  })
-
-  it("returns false for null", () => {
-    expect(isStudent(null)).toBe(false)
-  })
-
-  it("returns false for undefined", () => {
-    expect(isStudent(undefined)).toBe(false)
-  })
-
-  it("returns false for missing id", () => {
-    const missingId = {
-      name: "John Doe",
-      status: "active",
-      createdAt: Date.now(),
-    }
-    expect(isStudent(missingId)).toBe(false)
-  })
-
-  it("returns false for missing name", () => {
-    const missingName = {
-      id: "123",
-      status: "active",
-      createdAt: Date.now(),
-    }
-    expect(isStudent(missingName)).toBe(false)
-  })
-
-  it("returns false for missing status", () => {
-    const missingStatus = {
-      id: "123",
-      name: "John Doe",
-      createdAt: Date.now(),
-    }
-    expect(isStudent(missingStatus)).toBe(false)
-  })
-
-  it("returns false for missing createdAt", () => {
-    const missingCreatedAt = {
-      id: "123",
-      name: "John Doe",
-      status: "active",
-    }
-    expect(isStudent(missingCreatedAt)).toBe(false)
-  })
-
-  it("returns false for wrong id type", () => {
-    const wrongIdType = {
-      id: 123,
-      name: "John Doe",
-      status: "active",
-      createdAt: Date.now(),
-    }
-    expect(isStudent(wrongIdType)).toBe(false)
-  })
-
-  it("returns false for wrong name type", () => {
-    const wrongNameType = {
-      id: "123",
-      name: 456,
-      status: "active",
-      createdAt: Date.now(),
-    }
-    expect(isStudent(wrongNameType)).toBe(false)
-  })
-
-  it("returns false for wrong status type", () => {
-    const wrongStatusType = {
-      id: "123",
-      name: "John Doe",
-      status: 1,
-      createdAt: Date.now(),
-    }
-    expect(isStudent(wrongStatusType)).toBe(false)
-  })
-
-  it("returns false for invalid status value", () => {
-    const invalidStatus = {
-      id: "123",
-      name: "John Doe",
-      status: "pending",
-      createdAt: Date.now(),
-    }
-    expect(isStudent(invalidStatus)).toBe(false)
-  })
-
-  it("returns false for wrong createdAt type", () => {
-    const wrongCreatedAtType = {
-      id: "123",
-      name: "John Doe",
-      status: "active",
-      createdAt: "2024-01-01",
-    }
-    expect(isStudent(wrongCreatedAtType)).toBe(false)
-  })
-
-  it("returns false for primitive types", () => {
-    expect(isStudent("string")).toBe(false)
-    expect(isStudent(123)).toBe(false)
-    expect(isStudent(true)).toBe(false)
-  })
-
-  it("returns false for array", () => {
-    expect(isStudent([])).toBe(false)
-  })
-})
-
-describe("isQuestion", () => {
-  it("returns true for valid question object", () => {
-    const validQuestion = {
-      id: "q1",
-      prompt: "What is 2+2?",
-      answer: "4",
-    }
-    expect(isQuestion(validQuestion)).toBe(true)
-  })
-
-  it("returns false for null", () => {
-    expect(isQuestion(null)).toBe(false)
-  })
-
-  it("returns false for undefined", () => {
-    expect(isQuestion(undefined)).toBe(false)
-  })
-
-  it("returns false for missing id", () => {
-    const missingId = {
-      prompt: "What is 2+2?",
-      answer: "4",
-    }
-    expect(isQuestion(missingId)).toBe(false)
-  })
-
-  it("returns false for missing prompt", () => {
-    const missingPrompt = {
-      id: "q1",
-      answer: "4",
-    }
-    expect(isQuestion(missingPrompt)).toBe(false)
-  })
-
-  it("returns false for missing answer", () => {
-    const missingAnswer = {
-      id: "q1",
-      prompt: "What is 2+2?",
-    }
-    expect(isQuestion(missingAnswer)).toBe(false)
-  })
-
-  it("returns false for wrong id type", () => {
-    const wrongIdType = {
-      id: 1,
-      prompt: "What is 2+2?",
-      answer: "4",
-    }
-    expect(isQuestion(wrongIdType)).toBe(false)
-  })
-
-  it("returns false for wrong prompt type", () => {
-    const wrongPromptType = {
-      id: "q1",
-      prompt: 123,
-      answer: "4",
-    }
-    expect(isQuestion(wrongPromptType)).toBe(false)
-  })
-
-  it("returns false for wrong answer type", () => {
-    const wrongAnswerType = {
-      id: "q1",
-      prompt: "What is 2+2?",
-      answer: 4,
-    }
-    expect(isQuestion(wrongAnswerType)).toBe(false)
-  })
-})
-
-describe("isQuizIndexEntry", () => {
-  it("returns true for valid quiz index entry", () => {
-    const validEntry = {
-      id: "quiz1",
-      title: "Math Quiz",
-      createdAt: Date.now(),
-    }
-    expect(isQuizIndexEntry(validEntry)).toBe(true)
-  })
-
-  it("returns false for null", () => {
-    expect(isQuizIndexEntry(null)).toBe(false)
-  })
-
-  it("returns false for undefined", () => {
-    expect(isQuizIndexEntry(undefined)).toBe(false)
-  })
-
-  it("returns false for missing id", () => {
-    const missingId = {
-      title: "Math Quiz",
-      createdAt: Date.now(),
-    }
-    expect(isQuizIndexEntry(missingId)).toBe(false)
-  })
-
-  it("returns false for missing title", () => {
-    const missingTitle = {
-      id: "quiz1",
-      createdAt: Date.now(),
-    }
-    expect(isQuizIndexEntry(missingTitle)).toBe(false)
-  })
-
-  it("returns false for missing createdAt", () => {
-    const missingCreatedAt = {
-      id: "quiz1",
-      title: "Math Quiz",
-    }
-    expect(isQuizIndexEntry(missingCreatedAt)).toBe(false)
-  })
-
-  it("returns false for wrong id type", () => {
-    const wrongIdType = {
-      id: 123,
-      title: "Math Quiz",
-      createdAt: Date.now(),
-    }
-    expect(isQuizIndexEntry(wrongIdType)).toBe(false)
-  })
-
-  it("returns false for wrong title type", () => {
-    const wrongTitleType = {
-      id: "quiz1",
-      title: 456,
-      createdAt: Date.now(),
-    }
-    expect(isQuizIndexEntry(wrongTitleType)).toBe(false)
-  })
-
-  it("returns false for wrong createdAt type", () => {
-    const wrongCreatedAtType = {
-      id: "quiz1",
-      title: "Math Quiz",
-      createdAt: "2024-01-01",
-    }
-    expect(isQuizIndexEntry(wrongCreatedAtType)).toBe(false)
-  })
-})
-
-describe("isQuiz", () => {
-  it("returns true for valid quiz object", () => {
-    const validQuiz = {
-      id: "quiz1",
-      title: "Math Quiz",
-      questions: [],
-      createdAt: Date.now(),
-      updatedAt: Date.now(),
-    }
-    expect(isQuiz(validQuiz)).toBe(true)
-  })
-
-  it("returns true for quiz with questions", () => {
-    const quizWithQuestions = {
-      id: "quiz1",
-      title: "Math Quiz",
-      questions: [{ id: "q1", prompt: "2+2?", answer: "4" }],
-      createdAt: Date.now(),
-      updatedAt: Date.now(),
-    }
-    expect(isQuiz(quizWithQuestions)).toBe(true)
-  })
-
-  it("returns false for null", () => {
-    expect(isQuiz(null)).toBe(false)
-  })
-
-  it("returns false for undefined", () => {
-    expect(isQuiz(undefined)).toBe(false)
-  })
-
-  it("returns false for missing id", () => {
-    const missingId = {
-      title: "Math Quiz",
-      questions: [],
-      createdAt: Date.now(),
-      updatedAt: Date.now(),
-    }
-    expect(isQuiz(missingId)).toBe(false)
-  })
-
-  it("returns false for missing title", () => {
-    const missingTitle = {
-      id: "quiz1",
-      questions: [],
-      createdAt: Date.now(),
-      updatedAt: Date.now(),
-    }
-    expect(isQuiz(missingTitle)).toBe(false)
-  })
-
-  it("returns false for missing questions", () => {
-    const missingQuestions = {
-      id: "quiz1",
-      title: "Math Quiz",
-      createdAt: Date.now(),
-      updatedAt: Date.now(),
-    }
-    expect(isQuiz(missingQuestions)).toBe(false)
-  })
-
-  it("returns false for missing createdAt", () => {
-    const missingCreatedAt = {
-      id: "quiz1",
-      title: "Math Quiz",
-      questions: [],
-      updatedAt: Date.now(),
-    }
-    expect(isQuiz(missingCreatedAt)).toBe(false)
-  })
-
-  it("returns false for missing updatedAt", () => {
-    const missingUpdatedAt = {
-      id: "quiz1",
-      title: "Math Quiz",
-      questions: [],
-      createdAt: Date.now(),
-    }
-    expect(isQuiz(missingUpdatedAt)).toBe(false)
-  })
-
-  it("returns false for questions not being array", () => {
-    const questionsNotArray = {
-      id: "quiz1",
-      title: "Math Quiz",
-      questions: {},
-      createdAt: Date.now(),
-      updatedAt: Date.now(),
-    }
-    expect(isQuiz(questionsNotArray)).toBe(false)
-  })
-
-  it("returns false for wrong id type", () => {
-    const wrongIdType = {
-      id: 123,
-      title: "Math Quiz",
-      questions: [],
-      createdAt: Date.now(),
-      updatedAt: Date.now(),
-    }
-    expect(isQuiz(wrongIdType)).toBe(false)
-  })
-
-  it("returns false for wrong title type", () => {
-    const wrongTitleType = {
-      id: "quiz1",
-      title: 456,
-      questions: [],
-      createdAt: Date.now(),
-      updatedAt: Date.now(),
-    }
-    expect(isQuiz(wrongTitleType)).toBe(false)
-  })
-})
-
-describe("isBreakoutGroups", () => {
-  it("returns true for valid breakout groups", () => {
-    const validGroups = {
-      groupSize: 3,
-      groupIds: [
-        ["id1", "id2", "id3"],
-        ["id4", "id5", "id6"],
-      ],
-      createdAt: Date.now(),
-    }
-    expect(isBreakoutGroups(validGroups)).toBe(true)
-  })
-
-  it("returns true for empty groupIds array", () => {
-    const emptyGroupIds = {
-      groupSize: 2,
-      groupIds: [],
-      createdAt: Date.now(),
-    }
-    expect(isBreakoutGroups(emptyGroupIds)).toBe(true)
-  })
-
-  it("returns true for groupIds with empty arrays", () => {
-    const groupIdsWithEmpty = {
-      groupSize: 2,
-      groupIds: [[], []],
-      createdAt: Date.now(),
-    }
-    expect(isBreakoutGroups(groupIdsWithEmpty)).toBe(true)
-  })
-
-  it("returns false for null", () => {
-    expect(isBreakoutGroups(null)).toBe(false)
-  })
-
-  it("returns false for undefined", () => {
-    expect(isBreakoutGroups(undefined)).toBe(false)
-  })
-
-  it("returns false for missing groupSize", () => {
-    const missingGroupSize = {
-      groupIds: [["id1", "id2"]],
-      createdAt: Date.now(),
-    }
-    expect(isBreakoutGroups(missingGroupSize)).toBe(false)
-  })
-
-  it("returns false for missing groupIds", () => {
-    const missingGroupIds = {
-      groupSize: 2,
-      createdAt: Date.now(),
-    }
-    expect(isBreakoutGroups(missingGroupIds)).toBe(false)
-  })
-
-  it("returns false for missing createdAt", () => {
-    const missingCreatedAt = {
-      groupSize: 2,
-      groupIds: [["id1", "id2"]],
-    }
-    expect(isBreakoutGroups(missingCreatedAt)).toBe(false)
-  })
-
-  it("returns false for wrong groupSize type", () => {
-    const wrongGroupSizeType = {
-      groupSize: "2",
-      groupIds: [["id1", "id2"]],
-      createdAt: Date.now(),
-    }
-    expect(isBreakoutGroups(wrongGroupSizeType)).toBe(false)
-  })
-
-  it("returns false for groupIds not being array", () => {
-    const groupIdsNotArray = {
-      groupSize: 2,
-      groupIds: {},
-      createdAt: Date.now(),
-    }
-    expect(isBreakoutGroups(groupIdsNotArray)).toBe(false)
-  })
-
-  it("returns false for groupIds containing non-arrays", () => {
-    const groupIdsContainingNonArrays = {
-      groupSize: 2,
-      groupIds: ["id1", "id2"],
-      createdAt: Date.now(),
-    }
-    expect(isBreakoutGroups(groupIdsContainingNonArrays)).toBe(false)
-  })
-
-  it("returns false for group containing non-string ids", () => {
-    const groupWithNonStringIds = {
-      groupSize: 2,
-      groupIds: [[1, 2, 3]],
-      createdAt: Date.now(),
-    }
-    expect(isBreakoutGroups(groupWithNonStringIds)).toBe(false)
-  })
-
-  it("returns false for wrong createdAt type", () => {
-    const wrongCreatedAtType = {
-      groupSize: 2,
-      groupIds: [["id1", "id2"]],
-      createdAt: "2024-01-01",
-    }
-    expect(isBreakoutGroups(wrongCreatedAtType)).toBe(false)
-  })
-})
-
-describe("isProjectList", () => {
-  it("returns true for valid project list", () => {
-    const validProjectList = {
-      id: "pl1",
-      name: "Project Alpha",
-      projectType: "group",
-      studentIds: ["s1", "s2"],
-      groups: [["s1"], ["s2"]],
-    }
-    expect(isProjectList(validProjectList)).toBe(true)
-  })
-
-  it("returns true for empty studentIds and groups", () => {
-    const emptyArrays = {
-      id: "pl1",
-      name: "Project Alpha",
-      projectType: "individual",
-      studentIds: [],
-      groups: [],
-    }
-    expect(isProjectList(emptyArrays)).toBe(true)
-  })
-
-  it("returns false for null", () => {
-    expect(isProjectList(null)).toBe(false)
-  })
-
-  it("returns false for undefined", () => {
-    expect(isProjectList(undefined)).toBe(false)
-  })
-
-  it("returns false for missing id", () => {
-    const missingId = {
-      name: "Project Alpha",
-      projectType: "group",
-      studentIds: ["s1"],
-      groups: [],
-    }
-    expect(isProjectList(missingId)).toBe(false)
-  })
-
-  it("returns false for missing name", () => {
-    const missingName = {
-      id: "pl1",
-      projectType: "group",
-      studentIds: ["s1"],
-      groups: [],
-    }
-    expect(isProjectList(missingName)).toBe(false)
-  })
-
-  it("returns false for missing projectType", () => {
-    const missingProjectType = {
-      id: "pl1",
-      name: "Project Alpha",
-      studentIds: ["s1"],
-      groups: [],
-    }
-    expect(isProjectList(missingProjectType)).toBe(false)
-  })
-
-  it("returns false for missing studentIds", () => {
-    const missingStudentIds = {
-      id: "pl1",
-      name: "Project Alpha",
-      projectType: "group",
-      groups: [],
-    }
-    expect(isProjectList(missingStudentIds)).toBe(false)
-  })
-
-  it("returns false for missing groups", () => {
-    const missingGroups = {
-      id: "pl1",
-      name: "Project Alpha",
-      projectType: "group",
-      studentIds: ["s1"],
-    }
-    expect(isProjectList(missingGroups)).toBe(false)
-  })
-
-  it("returns false for studentIds not being array", () => {
-    const studentIdsNotArray = {
-      id: "pl1",
-      name: "Project Alpha",
-      projectType: "group",
-      studentIds: {},
-      groups: [],
-    }
-    expect(isProjectList(studentIdsNotArray)).toBe(false)
-  })
-
-  it("returns false for groups not being array", () => {
-    const groupsNotArray = {
-      id: "pl1",
-      name: "Project Alpha",
-      projectType: "group",
-      studentIds: ["s1"],
-      groups: {},
-    }
-    expect(isProjectList(groupsNotArray)).toBe(false)
-  })
-
-  it("returns false for wrong id type", () => {
-    const wrongIdType = {
-      id: 123,
-      name: "Project Alpha",
-      projectType: "group",
-      studentIds: [],
-      groups: [],
-    }
-    expect(isProjectList(wrongIdType)).toBe(false)
-  })
-
-  it("returns false for wrong name type", () => {
-    const wrongNameType = {
-      id: "pl1",
-      name: 456,
-      projectType: "group",
-      studentIds: [],
-      groups: [],
-    }
-    expect(isProjectList(wrongNameType)).toBe(false)
-  })
-
-  it("returns false for wrong projectType type", () => {
-    const wrongProjectTypeType = {
-      id: "pl1",
-      name: "Project Alpha",
-      projectType: 789,
-      studentIds: [],
-      groups: [],
-    }
-    expect(isProjectList(wrongProjectTypeType)).toBe(false)
-  })
-})
-
-describe("isPersistedTimerState", () => {
-  it("returns true for valid persisted timer state", () => {
-    const validState = {
-      configuredTotalSeconds: 300,
-      remainingSeconds: 150,
-      isRunning: true,
-      savedAt: Date.now(),
-    }
-    expect(isPersistedTimerState(validState)).toBe(true)
-  })
-
-  it("returns true for timer not running", () => {
-    const notRunningState = {
-      configuredTotalSeconds: 300,
-      remainingSeconds: 150,
-      isRunning: false,
-      savedAt: Date.now(),
-    }
-    expect(isPersistedTimerState(notRunningState)).toBe(true)
-  })
-
-  it("returns true for zero remaining seconds", () => {
-    const zeroRemaining = {
-      configuredTotalSeconds: 300,
-      remainingSeconds: 0,
-      isRunning: false,
-      savedAt: Date.now(),
-    }
-    expect(isPersistedTimerState(zeroRemaining)).toBe(true)
-  })
-
-  it("returns false for null", () => {
-    expect(isPersistedTimerState(null)).toBe(false)
-  })
-
-  it("returns false for undefined", () => {
-    expect(isPersistedTimerState(undefined)).toBe(false)
-  })
-
-  it("returns false for missing configuredTotalSeconds", () => {
-    const missingConfiguredTotalSeconds = {
-      remainingSeconds: 150,
-      isRunning: true,
-      savedAt: Date.now(),
-    }
-    expect(isPersistedTimerState(missingConfiguredTotalSeconds)).toBe(false)
-  })
-
-  it("returns false for missing remainingSeconds", () => {
-    const missingRemainingSeconds = {
-      configuredTotalSeconds: 300,
-      isRunning: true,
-      savedAt: Date.now(),
-    }
-    expect(isPersistedTimerState(missingRemainingSeconds)).toBe(false)
-  })
-
-  it("returns false for missing isRunning", () => {
-    const missingIsRunning = {
-      configuredTotalSeconds: 300,
-      remainingSeconds: 150,
-      savedAt: Date.now(),
-    }
-    expect(isPersistedTimerState(missingIsRunning)).toBe(false)
-  })
-
-  it("returns false for missing savedAt", () => {
-    const missingSavedAt = {
-      configuredTotalSeconds: 300,
-      remainingSeconds: 150,
-      isRunning: true,
-    }
-    expect(isPersistedTimerState(missingSavedAt)).toBe(false)
-  })
-
-  it("returns false for wrong configuredTotalSeconds type", () => {
-    const wrongConfiguredTotalSecondsType = {
-      configuredTotalSeconds: "300",
-      remainingSeconds: 150,
-      isRunning: true,
-      savedAt: Date.now(),
-    }
-    expect(isPersistedTimerState(wrongConfiguredTotalSecondsType)).toBe(false)
-  })
-
-  it("returns false for wrong remainingSeconds type", () => {
-    const wrongRemainingSecondsType = {
-      configuredTotalSeconds: 300,
-      remainingSeconds: "150",
-      isRunning: true,
-      savedAt: Date.now(),
-    }
-    expect(isPersistedTimerState(wrongRemainingSecondsType)).toBe(false)
-  })
-
-  it("returns false for wrong isRunning type", () => {
-    const wrongIsRunningType = {
-      configuredTotalSeconds: 300,
-      remainingSeconds: 150,
-      isRunning: 1,
-      savedAt: Date.now(),
-    }
-    expect(isPersistedTimerState(wrongIsRunningType)).toBe(false)
-  })
-
-  it("returns false for wrong savedAt type", () => {
-    const wrongSavedAtType = {
-      configuredTotalSeconds: 300,
-      remainingSeconds: 150,
-      isRunning: true,
-      savedAt: "2024-01-01",
-    }
-    expect(isPersistedTimerState(wrongSavedAtType)).toBe(false)
+} from '@/lib/type-guards'
+
+describe('type guards', () => {
+  it('validates student with classId', () => {
+    expect(
+      isStudent({
+        id: 's1',
+        classId: 'class-1',
+        name: 'Alex',
+        status: 'active',
+        createdAt: 1000,
+      })
+    ).toBe(true)
+
+    expect(
+      isStudent({
+        id: 's1',
+        name: 'Alex',
+        status: 'active',
+        createdAt: 1000,
+      })
+    ).toBe(false)
+  })
+
+  it('validates classroom records', () => {
+    expect(isClassroom({ id: 'class-1', name: 'Math', createdAt: 1000 })).toBe(true)
+    expect(isClassroom({ id: 'class-1', name: 'Math' })).toBe(false)
+  })
+
+  it('validates quiz index entries', () => {
+    expect(isQuizIndexEntry({ id: 'q1', title: 'Quiz', createdAt: 1000 })).toBe(true)
+    expect(isQuizIndexEntry({ id: 'q1', title: 'Quiz' })).toBe(false)
+  })
+
+  it('validates questions', () => {
+    expect(isQuestion({ id: 'q1', prompt: '2+2?', answer: '4' })).toBe(true)
+    expect(isQuestion({ id: 'q1', prompt: '2+2?' })).toBe(false)
+  })
+
+  it('validates quizzes', () => {
+    expect(
+      isQuiz({
+        id: 'q1',
+        title: 'Quiz',
+        questions: [],
+        createdAt: 1000,
+        updatedAt: 1000,
+      })
+    ).toBe(true)
+    expect(isQuiz({ id: 'q1', title: 'Quiz' })).toBe(false)
+  })
+
+  it('validates breakout groups with classId', () => {
+    expect(
+      isBreakoutGroups({
+        classId: 'class-1',
+        groupSize: 2,
+        groupIds: [['s1', 's2']],
+        createdAt: 1000,
+      })
+    ).toBe(true)
+
+    expect(
+      isBreakoutGroups({
+        groupSize: 2,
+        groupIds: [['s1', 's2']],
+        createdAt: 1000,
+      })
+    ).toBe(false)
+  })
+
+  it('validates project lists with classId', () => {
+    expect(
+      isProjectList({
+        id: 'p1',
+        classId: 'class-1',
+        name: 'Poster',
+        projectType: 'group',
+        studentIds: ['s1'],
+        groups: [['s1']],
+      })
+    ).toBe(true)
+
+    expect(
+      isProjectList({
+        id: 'p1',
+        name: 'Poster',
+        projectType: 'group',
+        studentIds: ['s1'],
+        groups: [['s1']],
+      })
+    ).toBe(false)
+  })
+
+  it('validates persisted timer state', () => {
+    expect(
+      isPersistedTimerState({
+        configuredTotalSeconds: 300,
+        remainingSeconds: 100,
+        isRunning: false,
+        savedAt: 1000,
+      })
+    ).toBe(true)
+
+    expect(
+      isPersistedTimerState({
+        configuredTotalSeconds: 300,
+        remainingSeconds: 100,
+      })
+    ).toBe(false)
   })
 })
diff --git a/lib/classes.ts b/lib/classes.ts
new file mode 100644
index 0000000..39e4761
--- /dev/null
+++ b/lib/classes.ts
@@ -0,0 +1,253 @@
+import { normalizeStudentName } from "@/lib/students"
+
+export type ImportedStudentRecord = {
+  idHint: string | null
+  name: string
+}
+
+export type ImportedClassRecord = {
+  idHint: string | null
+  className: string
+  students: ImportedStudentRecord[]
+}
+
+export type ClassImportParseSuccess = {
+  ok: true
+  classes: ImportedClassRecord[]
+  skippedClasses: number
+  skippedStudents: number
+}
+
+export type ClassImportParseFailure = {
+  ok: false
+  error: string
+}
+
+export type ClassImportParseResult =
+  | ClassImportParseSuccess
+  | ClassImportParseFailure
+
+/**
+ * Normalizes class names by collapsing inner whitespace and trimming ends.
+ * Use this before storing or comparing class names.
+ */
+export function normalizeClassName(name: string) {
+  return name.replace(/\s+/g, " ").trim()
+}
+
+/**
+ * Produces a stable, case-insensitive key for class name deduplication.
+ * Accepts raw user input and returns a normalized lowercase key.
+ */
+export function classNameKey(name: string) {
+  return normalizeClassName(name).toLocaleLowerCase()
+}
+
+/**
+ * Parses class names from comma/newline-delimited text content.
+ * Returns deduplicated class names in insertion order.
+ */
+export function parseClassNamesFromText(raw: string) {
+  const names = raw
+    .split(/[\n,]/)
+    .map((entry) => normalizeClassName(entry))
+    .filter(Boolean)
+  return Array.from(new Set(names))
+}
+
+/**
+ * Parses full class records from text lines.
+ * Expected format per line: `Class Name: Student One, Student Two`.
+ */
+export function parseClassImportText(raw: string): ClassImportParseResult {
+  const lines = raw
+    .split(/\r?\n/)
+    .map((line) => line.trim())
+    .filter(Boolean)
+
+  if (!lines.length) {
+    return {
+      ok: false,
+      error: "The text file is empty.",
+    }
+  }
+
+  const classes: ImportedClassRecord[] = []
+  let skippedClasses = 0
+  let skippedStudents = 0
+
+  for (const line of lines) {
+    const separatorIndex = line.indexOf(":")
+    if (separatorIndex < 0) {
+      skippedClasses += 1
+      continue
+    }
+
+    const className = normalizeClassName(line.slice(0, separatorIndex))
+    if (!className) {
+      skippedClasses += 1
+      continue
+    }
+
+    const studentsRaw = line.slice(separatorIndex + 1)
+    const students = studentsRaw
+      .split(",")
+      .map((entry) => normalizeStudentName(entry))
+      .filter(Boolean)
+      .map((name) => ({ idHint: null, name }))
+
+    if (!students.length) {
+      skippedClasses += 1
+      continue
+    }
+
+    const uniqueStudents: ImportedStudentRecord[] = []
+    const keys = new Set<string>()
+    for (const student of students) {
+      const key = student.name.toLocaleLowerCase()
+      if (keys.has(key)) continue
+      keys.add(key)
+      uniqueStudents.push(student)
+    }
+    skippedStudents += students.length - uniqueStudents.length
+
+    classes.push({
+      idHint: null,
+      className,
+      students: uniqueStudents,
+    })
+  }
+
+  if (!classes.length) {
+    return {
+      ok: false,
+      error:
+        "No valid classes were found. Use one line per class: Class Name: Student One, Student Two",
+    }
+  }
+
+  return {
+    ok: true,
+    classes,
+    skippedClasses,
+    skippedStudents,
+  }
+}
+
+type JsonClassInput = {
+  classId?: string
+  className?: string
+  students?: Array<string | { id?: string; name?: string }>
+}
+
+/**
+ * Parses class import JSON supporting one class object or an array of classes.
+ * Accepts student entries as strings or `{ name, id? }` objects.
+ */
+export function parseClassImportJson(raw: string): ClassImportParseResult {
+  let parsed: JsonClassInput | JsonClassInput[]
+  try {
+    parsed = JSON.parse(raw) as JsonClassInput | JsonClassInput[]
+  } catch {
+    return {
+      ok: false,
+      error: "Invalid JSON format. Check the file and try again.",
+    }
+  }
+
+  const payload = Array.isArray(parsed) ? parsed : [parsed]
+  if (!payload.length) {
+    return {
+      ok: false,
+      error: "The JSON file is empty.",
+    }
+  }
+
+  const classes: ImportedClassRecord[] = []
+  let skippedClasses = 0
+  let skippedStudents = 0
+
+  for (const entry of payload) {
+    if (!entry || typeof entry !== "object") {
+      skippedClasses += 1
+      continue
+    }
+
+    const candidate = entry as JsonClassInput
+    const className = normalizeClassName(candidate.className ?? "")
+    if (!className || !Array.isArray(candidate.students)) {
+      skippedClasses += 1
+      continue
+    }
+
+    const students: ImportedStudentRecord[] = []
+    const studentKeys = new Set<string>()
+    for (const studentEntry of candidate.students) {
+      if (typeof studentEntry === "string") {
+        const normalized = normalizeStudentName(studentEntry)
+        if (!normalized) {
+          skippedStudents += 1
+          continue
+        }
+        const key = normalized.toLocaleLowerCase()
+        if (studentKeys.has(key)) {
+          skippedStudents += 1
+          continue
+        }
+        studentKeys.add(key)
+        students.push({ idHint: null, name: normalized })
+        continue
+      }
+
+      if (!studentEntry || typeof studentEntry !== "object") {
+        skippedStudents += 1
+        continue
+      }
+
+      const normalized = normalizeStudentName(studentEntry.name ?? "")
+      if (!normalized) {
+        skippedStudents += 1
+        continue
+      }
+      const idHint =
+        typeof studentEntry.id === "string" && studentEntry.id.trim()
+          ? studentEntry.id
+          : null
+      const key = normalized.toLocaleLowerCase()
+      if (studentKeys.has(key)) {
+        skippedStudents += 1
+        continue
+      }
+      studentKeys.add(key)
+      students.push({ idHint, name: normalized })
+    }
+
+    if (!students.length) {
+      skippedClasses += 1
+      continue
+    }
+
+    classes.push({
+      idHint:
+        typeof candidate.classId === "string" && candidate.classId.trim()
+          ? candidate.classId
+          : null,
+      className,
+      students,
+    })
+  }
+
+  if (!classes.length) {
+    return {
+      ok: false,
+      error: "No valid classes were found in this JSON file.",
+    }
+  }
+
+  return {
+    ok: true,
+    classes,
+    skippedClasses,
+    skippedStudents,
+  }
+}
diff --git a/lib/models.ts b/lib/models.ts
index 2b9de2f..c3e0e25 100644
--- a/lib/models.ts
+++ b/lib/models.ts
@@ -1,10 +1,17 @@
 export type StudentStatus = "active" | "excluded"
 
+export type Classroom = {
+  id: string
+  name: string
+  createdAt: number
+}
+
 export type Student = {
   id: string
   name: string
   status: StudentStatus
   createdAt: number
+  classId: string
 }
 
 export type Question = {
@@ -16,6 +23,7 @@ export type Question = {
 export type Quiz = {
   id: string
   title: string
+  description?: string
   questions: Question[]
   createdAt: number
   updatedAt: number
@@ -29,6 +37,7 @@ export type QuizIndexEntry = {
 
 export type ProjectList = {
   id: string
+  classId: string
   name: string
   projectType: string
   description: string
@@ -38,6 +47,7 @@ export type ProjectList = {
 }
 
 export type BreakoutGroups = {
+  classId: string
   groupSize: number
   groupIds: string[][]
   createdAt: number
diff --git a/lib/page-info.tsx b/lib/page-info.tsx
index dde99ca..6a99a02 100644
--- a/lib/page-info.tsx
+++ b/lib/page-info.tsx
@@ -60,33 +60,37 @@ export const PAGE_INFOS: PageInfo[] = [
     help: {
       purpose: (
         <>
-          This is where your class list lives. Add names, mark who is absent
-          today, and keep things tidy. Every other tool in the app pulls from
-          this list, so it is worth keeping it up to date.
+          This is where your classes and rosters live. Create classes, import
+          full class files, add students, and mark who is absent today. Every
+          other tool uses the class you pick here.
         </>
       ),
       howTo: [
         <>
-          <strong>Add students</strong> one at a time by typing a name, or paste
-          in a bunch of names at once separated by commas.
+          <strong>Choose your setup style</strong>: add class names manually, or
+          import a full class file that includes both class name and students.
         </>,
         <>
-          <strong>Fix a name?</strong> Just tap the edit button next to it and
-          correct the spelling.
+          <strong>Importing full classes?</strong> Use `.txt` lines like
+          `Class Name: Student A, Student B` or a `.json` class object. If the
+          class name already exists, that class roster is replaced with the
+          imported students.
         </>,
         <>
-          <strong>Student absent today?</strong> Toggle them to absent so they
-          will not show up in the random generator or group maker.
+          <strong>Use the class dropdown</strong> to switch between rosters.
+          Student imports from `.txt` add names only to the class you currently
+          selected.
         </>,
         <>
-          <strong>Student left the class?</strong> Delete them to keep the
-          roster clean.
+          <strong>Need to clean up?</strong> Edit, delete, mark absent, or
+          remove the selected class or all classes from the controls beside the
+          class selector.
         </>,
       ],
       outcome: (
         <>
-          A clean, current class list that keeps all your other tools accurate
-          and ready to go.
+          Clear, class-by-class rosters that keep generator picks, breakout
+          groups, quiz play, and project lists accurate.
         </>
       ),
     },
@@ -102,6 +106,10 @@ export const PAGE_INFOS: PageInfo[] = [
         </>
       ),
       howTo: [
+        <>
+          <strong>Select a class first</strong> so the draw uses the right
+          roster for this lesson.
+        </>,
         <>
           <strong>Tap &quot;Draw&quot;</strong> to pick a random student. Their name pops
           up big and clear.
@@ -134,6 +142,10 @@ export const PAGE_INFOS: PageInfo[] = [
         </>
       ),
       howTo: [
+        <>
+          <strong>Pick your class</strong> from the dropdown first so groups are
+          built from the right roster.
+        </>,
         <>
           <strong>Pick how many groups</strong> or how many students per group —
           whichever is easier for your activity.
@@ -164,23 +176,26 @@ export const PAGE_INFOS: PageInfo[] = [
     help: {
       purpose: (
         <>
-          Build your quiz questions here before class so you are not making
-          things up on the fly. Add questions, write answers, and organize
-          everything at your own pace.
+          Build and organize quiz sets before class so your live review runs
+          smoothly. Write questions by hand, add optional quiz notes, and keep
+          everything ready to reuse.
         </>
       ),
       howTo: [
         <>
-          <strong>Create a new quiz</strong> and give it a name that helps you
-          find it later (like &quot;Ch. 5 Vocab&quot; or &quot;Friday Review&quot;).
+          <strong>Create a new quiz</strong> and give it a clear name (like
+          &quot;Ch. 5 Vocab&quot; or &quot;Friday Review&quot;). Add an optional description if you
+          want quick context later.
         </>,
         <>
-          <strong>Add questions one by one</strong> — type the question and the
-          answer you are looking for.
+          <strong>Add questions one by one</strong> with a prompt and answer.
+          Questions show up in an easy-to-scan card list where you can edit or
+          remove them fast.
         </>,
         <>
-          <strong>Need to import a bunch?</strong> Paste questions from a
-          spreadsheet or document to save time.
+          <strong>Need to import a bunch?</strong> Upload a JSON file. One quiz
+          object loads into your draft (then tap Save Quiz to keep it). An
+          array of quiz objects saves multiple quizzes right away.
         </>,
         <>
           <strong>Ready to use it live?</strong> Head over to Quiz Play to run
@@ -189,8 +204,8 @@ export const PAGE_INFOS: PageInfo[] = [
       ],
       outcome: (
         <>
-          Polished quiz sets you can reuse across classes and semesters —
-          no more scrambling for questions.
+          Polished quiz sets you can run immediately, reuse next term, and
+          update in seconds when your lesson plan changes.
         </>
       ),
     },
@@ -206,6 +221,10 @@ export const PAGE_INFOS: PageInfo[] = [
         </>
       ),
       howTo: [
+        <>
+          <strong>Select your class first</strong> so quiz draws use the right
+          students for that period.
+        </>,
         <>
           <strong>Pick a quiz</strong> from the dropdown — these are the ones
           you built in Quiz Builder.
@@ -241,6 +260,10 @@ export const PAGE_INFOS: PageInfo[] = [
         </>
       ),
       howTo: [
+        <>
+          <strong>Pick your class first</strong> so this project list stays tied
+          to the right roster.
+        </>,
         <>
           <strong>Name your project</strong> and pick a type so you can tell
           your lists apart (like &quot;Science Fair&quot; or &quot;Book Club Groups&quot;).
diff --git a/lib/storage.ts b/lib/storage.ts
index e45771a..69730a2 100644
--- a/lib/storage.ts
+++ b/lib/storage.ts
@@ -1,5 +1,6 @@
 import type {
   BreakoutGroups,
+  Classroom,
   ProjectList,
   Quiz,
   QuizIndexEntry,
@@ -7,6 +8,7 @@ import type {
 } from "@/lib/models"
 import {
   isBreakoutGroups,
+  isClassroom,
   isPersistedTimerState,
   isProjectList,
   isQuiz,
@@ -14,6 +16,8 @@ import {
   isStudent,
 } from "@/lib/type-guards"
 
+const CLASSES_KEY = "teacherbuddy:classes"
+const ACTIVE_CLASS_KEY = "teacherbuddy:active-class"
 const STUDENTS_KEY = "teacherbuddy:students"
 const QUIZ_INDEX_KEY = "teacherbuddy:quiz-index"
 const PROJECT_LISTS_KEY = "teacherbuddy:project-lists"
@@ -22,6 +26,8 @@ const TIMER_KEY = "teacherbuddy:timer"
 const TIMER_FAVORITES_KEY = "teacherbuddy:timer-favorites"
 const PRIVACY_NOTICE_ACK_KEY = "teacherbuddy:privacy-notice-acknowledged"
 
+const DEFAULT_CLASS_NAME = "Class 1"
+
 const quizKey = (id: string) => `teacherbuddy:quiz:${id}`
 
 export type PersistedTimerState = {
@@ -31,6 +37,20 @@ export type PersistedTimerState = {
   savedAt: number
 }
 
+export type LoadedPersistedState = {
+  classes: Classroom[]
+  activeClassId: string | null
+  students: Student[]
+  quizIndex: QuizIndexEntry[]
+  projectLists: ProjectList[]
+  breakoutGroupsByClass: Record<string, BreakoutGroups>
+  quizzes: Record<string, Quiz>
+}
+
+type JsonPrimitive = string | number | boolean | null
+type JsonValue = JsonPrimitive | JsonObject | JsonValue[]
+type JsonObject = { [key: string]: JsonValue }
+
 function safeParse<T>(raw: string | null, fallback: T): T {
   if (!raw) return fallback
   try {
@@ -41,24 +61,259 @@ function safeParse<T>(raw: string | null, fallback: T): T {
   }
 }
 
+function isJsonObject(value: JsonValue): value is JsonObject {
+  return !!value && typeof value === "object" && !Array.isArray(value)
+}
+
+function isLegacyStudentObject(value: JsonValue): boolean {
+  if (!isJsonObject(value)) return false
+  const status = value.status
+  return (
+    typeof value.id === "string" &&
+    typeof value.name === "string" &&
+    (status === "active" || status === "excluded") &&
+    typeof value.createdAt === "number" &&
+    typeof value.classId !== "string"
+  )
+}
+
+function isLegacyProjectListObject(value: JsonValue): boolean {
+  if (!isJsonObject(value)) return false
+  return (
+    typeof value.id === "string" &&
+    typeof value.name === "string" &&
+    typeof value.projectType === "string" &&
+    Array.isArray(value.studentIds) &&
+    Array.isArray(value.groups) &&
+    typeof value.classId !== "string"
+  )
+}
+
+function isLegacyBreakoutObject(value: JsonValue | null): boolean {
+  if (!value || !isJsonObject(value)) return false
+  return (
+    typeof value.groupSize === "number" &&
+    Array.isArray(value.groupIds) &&
+    typeof value.createdAt === "number" &&
+    typeof value.classId !== "string"
+  )
+}
+
+function createDefaultClass(): Classroom {
+  return {
+    id: crypto.randomUUID(),
+    name: DEFAULT_CLASS_NAME,
+    createdAt: Date.now(),
+  }
+}
+
+function parseStudents(
+  raw: JsonValue[],
+  fallbackClassId: string | null
+): Student[] {
+  const students: Student[] = []
+
+  for (const entry of raw) {
+    if (typeof entry === "string") {
+      if (!fallbackClassId) continue
+      students.push({
+        id: crypto.randomUUID(),
+        name: entry,
+        status: "active",
+        createdAt: Date.now(),
+        classId: fallbackClassId,
+      })
+      continue
+    }
+
+    if (isStudent(entry)) {
+      students.push(entry)
+      continue
+    }
+
+    if (!fallbackClassId || !isLegacyStudentObject(entry)) {
+      continue
+    }
+    const legacy = entry as JsonObject
+
+    students.push({
+      id: legacy.id as string,
+      name: legacy.name as string,
+      status: legacy.status as Student["status"],
+      createdAt: legacy.createdAt as number,
+      classId: fallbackClassId,
+    })
+  }
+
+  return students
+}
+
+function parseProjectLists(
+  raw: JsonValue[],
+  fallbackClassId: string | null
+): ProjectList[] {
+  const projectLists: ProjectList[] = []
+
+  for (const entry of raw) {
+    if (isProjectList(entry)) {
+      const record = entry as ProjectList & { description?: string }
+      projectLists.push({
+        ...record,
+        description: record.description ?? "",
+        createdAt:
+          typeof record.createdAt === "number" ? record.createdAt : Date.now(),
+      })
+      continue
+    }
+
+    if (!fallbackClassId || !isLegacyProjectListObject(entry)) {
+      continue
+    }
+    const legacy = entry as JsonObject
+
+    const groups = (legacy.groups as JsonValue[])
+      .filter((group) => Array.isArray(group))
+      .map((group) =>
+        (group as JsonValue[])
+          .filter((id) => typeof id === "string")
+          .map((id) => id as string)
+      )
+
+    const studentIds = (legacy.studentIds as JsonValue[])
+      .filter((id) => typeof id === "string")
+      .map((id) => id as string)
+
+    projectLists.push({
+      id: legacy.id as string,
+      classId: fallbackClassId,
+      name: legacy.name as string,
+      projectType: legacy.projectType as string,
+      description:
+        typeof legacy.description === "string" ? (legacy.description as string) : "",
+      studentIds,
+      groups,
+      createdAt:
+        typeof legacy.createdAt === "number" ? (legacy.createdAt as number) : Date.now(),
+    })
+  }
+
+  return projectLists
+}
+
+function parseBreakoutGroupsByClass(
+  raw: JsonValue | null,
+  fallbackClassId: string | null
+): Record<string, BreakoutGroups> {
+  if (!raw) return {}
+
+  if (isBreakoutGroups(raw)) {
+    return { [raw.classId]: raw }
+  }
+
+  if (isLegacyBreakoutObject(raw) && fallbackClassId) {
+    const legacy = raw as JsonObject
+    return {
+      [fallbackClassId]: {
+        classId: fallbackClassId,
+        groupSize: legacy.groupSize as number,
+        groupIds: (legacy.groupIds as JsonValue[])
+          .filter((group) => Array.isArray(group))
+          .map((group) =>
+            (group as JsonValue[])
+              .filter((id) => typeof id === "string")
+              .map((id) => id as string)
+          ),
+        createdAt: legacy.createdAt as number,
+      },
+    }
+  }
+
+  if (!isJsonObject(raw)) return {}
+
+  const groupsByClass: Record<string, BreakoutGroups> = {}
+  for (const [classId, value] of Object.entries(raw)) {
+    if (!classId || !isBreakoutGroups(value)) continue
+    groupsByClass[classId] = value
+  }
+
+  return groupsByClass
+}
+
+function ensureClassesForStudents(
+  classes: Classroom[],
+  students: Student[]
+): Classroom[] {
+  const knownIds = new Set(classes.map((entry) => entry.id))
+  const nextClasses = [...classes]
+
+  for (const student of students) {
+    if (knownIds.has(student.classId)) continue
+    knownIds.add(student.classId)
+    nextClasses.push({
+      id: student.classId,
+      name: `Class ${nextClasses.length + 1}`,
+      createdAt: Date.now(),
+    })
+  }
+
+  return nextClasses
+}
+
 /**
- * Loads students from local storage and normalizes legacy string-array data.
- * Returns an empty array when unavailable, invalid, or running on the server.
+ * Loads class definitions from local storage.
+ * Filters invalid entries and returns an empty array on failure.
  */
-export function loadStudents(): Student[] {
+export function loadClasses(): Classroom[] {
   if (typeof window === "undefined") return []
-  const parsed = safeParse<unknown>(localStorage.getItem(STUDENTS_KEY), [])
+  const parsed = safeParse<JsonValue[]>(localStorage.getItem(CLASSES_KEY), [])
   if (!Array.isArray(parsed)) return []
-  // Handle legacy format (array of strings)
-  if (parsed.length && parsed.every((entry) => typeof entry === "string")) {
-    return (parsed as string[]).map((name) => ({
-      id: crypto.randomUUID(),
-      name,
-      status: "active",
-      createdAt: Date.now(),
-    }))
+  return parsed.filter((entry) => isClassroom(entry))
+}
+
+/**
+ * Persists class records to local storage.
+ * Accepts normalized class objects from app state.
+ */
+export function saveClasses(classes: Classroom[]) {
+  if (typeof window === "undefined") return
+  localStorage.setItem(CLASSES_KEY, JSON.stringify(classes))
+}
+
+/**
+ * Loads the active class ID from local storage.
+ * Returns null when missing or invalid.
+ */
+export function loadActiveClassId(): string | null {
+  if (typeof window === "undefined") return null
+  const parsed = safeParse<JsonValue | null>(
+    localStorage.getItem(ACTIVE_CLASS_KEY),
+    null
+  )
+  return typeof parsed === "string" ? parsed : null
+}
+
+/**
+ * Persists the active class ID to local storage.
+ * Clears the key when null.
+ */
+export function saveActiveClassId(activeClassId: string | null) {
+  if (typeof window === "undefined") return
+  if (!activeClassId) {
+    localStorage.removeItem(ACTIVE_CLASS_KEY)
+    return
   }
-  return parsed.filter(isStudent)
+  localStorage.setItem(ACTIVE_CLASS_KEY, JSON.stringify(activeClassId))
+}
+
+/**
+ * Loads students from local storage and normalizes legacy payload formats.
+ * Returns an empty array when unavailable, invalid, or running on the server.
+ */
+export function loadStudents(defaultClassId: string | null = null): Student[] {
+  if (typeof window === "undefined") return []
+  const parsed = safeParse<JsonValue[]>(localStorage.getItem(STUDENTS_KEY), [])
+  if (!Array.isArray(parsed)) return []
+  return parseStudents(parsed, defaultClassId)
 }
 
 /**
@@ -76,30 +331,20 @@ export function saveStudents(students: Student[]) {
  */
 export function loadQuizIndex(): QuizIndexEntry[] {
   if (typeof window === "undefined") return []
-  const parsed = safeParse<unknown>(localStorage.getItem(QUIZ_INDEX_KEY), [])
+  const parsed = safeParse<JsonValue[]>(localStorage.getItem(QUIZ_INDEX_KEY), [])
   if (!Array.isArray(parsed)) return []
-  return parsed.filter(isQuizIndexEntry)
+  return parsed.filter((entry) => isQuizIndexEntry(entry))
 }
 
 /**
  * Loads saved project lists from local storage with backward-compatible defaults.
  * Ensures each list contains description and createdAt values.
  */
-export function loadProjectLists(): ProjectList[] {
+export function loadProjectLists(defaultClassId: string | null = null): ProjectList[] {
   if (typeof window === "undefined") return []
-  const parsed = safeParse<unknown>(localStorage.getItem(PROJECT_LISTS_KEY), [])
+  const parsed = safeParse<JsonValue[]>(localStorage.getItem(PROJECT_LISTS_KEY), [])
   if (!Array.isArray(parsed)) return []
-  return parsed
-    .filter(isProjectList)
-    .map((entry) => {
-      const e = entry as Record<string, unknown>
-      return {
-        ...entry,
-        description: entry.description ?? "",
-        createdAt:
-          typeof e.createdAt === "number" ? e.createdAt : Date.now(),
-      }
-    })
+  return parseProjectLists(parsed, defaultClassId)
 }
 
 /**
@@ -112,27 +357,33 @@ export function saveProjectLists(lists: ProjectList[]) {
 }
 
 /**
- * Loads persisted breakout group assignments from local storage.
- * Returns `null` when data is missing or invalid.
+ * Loads persisted breakout group assignments for all classes from local storage.
+ * Migrates legacy single-breakout payloads when needed.
  */
-export function loadBreakoutGroups(): BreakoutGroups | null {
-  if (typeof window === "undefined") return null
-  const parsed = safeParse<unknown>(localStorage.getItem(BREAKOUT_GROUPS_KEY), null)
-  if (!isBreakoutGroups(parsed)) return null
-  return parsed
+export function loadBreakoutGroupsByClass(
+  defaultClassId: string | null = null
+): Record<string, BreakoutGroups> {
+  if (typeof window === "undefined") return {}
+  const parsed = safeParse<JsonValue | null>(
+    localStorage.getItem(BREAKOUT_GROUPS_KEY),
+    null
+  )
+  return parseBreakoutGroupsByClass(parsed, defaultClassId)
 }
 
 /**
- * Persists breakout group assignments, or clears them when `null`.
- * Used by breakout workflow to retain the latest generated groups.
+ * Persists breakout group assignments keyed by class ID.
+ * Clears storage when the provided map is empty.
  */
-export function saveBreakoutGroups(groups: BreakoutGroups | null) {
+export function saveBreakoutGroupsByClass(
+  groupsByClass: Record<string, BreakoutGroups>
+) {
   if (typeof window === "undefined") return
-  if (!groups) {
+  if (!Object.keys(groupsByClass).length) {
     localStorage.removeItem(BREAKOUT_GROUPS_KEY)
     return
   }
-  localStorage.setItem(BREAKOUT_GROUPS_KEY, JSON.stringify(groups))
+  localStorage.setItem(BREAKOUT_GROUPS_KEY, JSON.stringify(groupsByClass))
 }
 
 /**
@@ -150,7 +401,7 @@ export function saveQuizIndex(index: QuizIndexEntry[]) {
  */
 export function loadQuiz(id: string): Quiz | null {
   if (typeof window === "undefined") return null
-  const parsed = safeParse<unknown>(localStorage.getItem(quizKey(id)), null)
+  const parsed = safeParse<JsonValue | null>(localStorage.getItem(quizKey(id)), null)
   if (!isQuiz(parsed)) return null
   return parsed
 }
@@ -175,19 +426,57 @@ export function removeQuiz(id: string) {
 
 /**
  * Loads all persisted application data and removes broken quiz references.
- * Returns students, quiz index, quiz map, project lists, and breakout groups.
+ * Migrates legacy storage payloads into class-aware structures.
  */
-export function loadPersistedState(): {
-  students: Student[]
-  quizIndex: QuizIndexEntry[]
-  projectLists: ProjectList[]
-  breakoutGroups: BreakoutGroups | null
-  quizzes: Record<string, Quiz>
-} {
-  const students = loadStudents()
+export function loadPersistedState(): LoadedPersistedState {
+  const rawStudents = safeParse<JsonValue[]>(
+    typeof window === "undefined" ? null : localStorage.getItem(STUDENTS_KEY),
+    []
+  )
+  const rawProjectLists = safeParse<JsonValue[]>(
+    typeof window === "undefined"
+      ? null
+      : localStorage.getItem(PROJECT_LISTS_KEY),
+    []
+  )
+  const rawBreakout = safeParse<JsonValue | null>(
+    typeof window === "undefined"
+      ? null
+      : localStorage.getItem(BREAKOUT_GROUPS_KEY),
+    null
+  )
+
+  let classes = loadClasses()
+  if (!classes.length) {
+    classes = [createDefaultClass()]
+  }
+
+  const fallbackClassId = classes[0]?.id ?? null
+  const students = parseStudents(rawStudents, fallbackClassId)
+  classes = ensureClassesForStudents(classes, students)
+
+  const projectLists = parseProjectLists(rawProjectLists, fallbackClassId).filter((list) =>
+    classes.some((entry) => entry.id === list.classId)
+  )
+
+  const breakoutGroupsByClass = parseBreakoutGroupsByClass(
+    rawBreakout,
+    fallbackClassId
+  )
+
+  const cleanedBreakoutGroupsByClass: Record<string, BreakoutGroups> = {}
+  for (const [classId, groups] of Object.entries(breakoutGroupsByClass)) {
+    if (!classes.some((entry) => entry.id === classId)) continue
+    cleanedBreakoutGroupsByClass[classId] = groups
+  }
+
+  const rawActiveClassId = loadActiveClassId()
+  const activeClassId =
+    rawActiveClassId && classes.some((entry) => entry.id === rawActiveClassId)
+      ? rawActiveClassId
+      : (classes[0]?.id ?? null)
+
   const quizIndex = loadQuizIndex()
-  const projectLists = loadProjectLists()
-  const breakoutGroups = loadBreakoutGroups()
   const quizzes: Record<string, Quiz> = {}
   const cleanedIndex: QuizIndexEntry[] = []
 
@@ -200,10 +489,12 @@ export function loadPersistedState(): {
   }
 
   return {
+    classes,
+    activeClassId,
     students,
     quizIndex: cleanedIndex,
     projectLists,
-    breakoutGroups,
+    breakoutGroupsByClass: cleanedBreakoutGroupsByClass,
     quizzes,
   }
 }
@@ -236,7 +527,7 @@ export function persistAllQuizzes(
  */
 export function loadTimer(): PersistedTimerState | null {
   if (typeof window === "undefined") return null
-  const parsed = safeParse<unknown>(localStorage.getItem(TIMER_KEY), null)
+  const parsed = safeParse<JsonValue | null>(localStorage.getItem(TIMER_KEY), null)
   if (!isPersistedTimerState(parsed)) return null
   if (parsed.remainingSeconds <= 0) return null
   return parsed
@@ -284,7 +575,7 @@ export function setPrivacyNoticeAcknowledged(): void {
  */
 export function loadTimerFavorites(): number[] {
   if (typeof window === "undefined") return [60, 300, 900]
-  const parsed = safeParse<unknown>(
+  const parsed = safeParse<JsonValue | null>(
     localStorage.getItem(TIMER_FAVORITES_KEY),
     null
   )
diff --git a/lib/type-guards.ts b/lib/type-guards.ts
index cb88be3..4225615 100644
--- a/lib/type-guards.ts
+++ b/lib/type-guards.ts
@@ -1,5 +1,6 @@
 import type {
   BreakoutGroups,
+  Classroom,
   ProjectList,
   Question,
   Quiz,
@@ -20,6 +21,21 @@ export function isStudent(value: unknown): value is Student {
     typeof obj.name === "string" &&
     typeof obj.status === "string" &&
     (obj.status === "active" || obj.status === "excluded") &&
+    typeof obj.createdAt === "number" &&
+    typeof obj.classId === "string"
+  )
+}
+
+/**
+ * Checks whether a value matches a persisted `Classroom` record.
+ * Validates class id, name, and creation timestamp.
+ */
+export function isClassroom(value: unknown): value is Classroom {
+  if (!value || typeof value !== "object") return false
+  const obj = value as Record<string, unknown>
+  return (
+    typeof obj.id === "string" &&
+    typeof obj.name === "string" &&
     typeof obj.createdAt === "number"
   )
 }
@@ -62,6 +78,7 @@ export function isQuiz(value: unknown): value is Quiz {
   return (
     typeof obj.id === "string" &&
     typeof obj.title === "string" &&
+    (obj.description === undefined || typeof obj.description === "string") &&
     Array.isArray(obj.questions) &&
     typeof obj.createdAt === "number" &&
     typeof obj.updatedAt === "number"
@@ -76,6 +93,7 @@ export function isBreakoutGroups(value: unknown): value is BreakoutGroups {
   if (!value || typeof value !== "object") return false
   const obj = value as Record<string, unknown>
   if (
+    typeof obj.classId !== "string" ||
     typeof obj.groupSize !== "number" ||
     !Array.isArray(obj.groupIds) ||
     typeof obj.createdAt !== "number"
@@ -97,6 +115,7 @@ export function isProjectList(value: unknown): value is ProjectList {
   const obj = value as Record<string, unknown>
   return (
     typeof obj.id === "string" &&
+    typeof obj.classId === "string" &&
     typeof obj.name === "string" &&
     typeof obj.projectType === "string" &&
     Array.isArray(obj.studentIds) &&
diff --git a/package.json b/package.json
index 3c418a5..353a84a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "teacherbuddy",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "private": true,
   "packageManager": "bun@1.3.4",
   "scripts": {
@@ -23,31 +23,31 @@
     "next-themes": "^0.4.6",
     "react": "19.2.3",
     "react-dom": "19.2.3",
-    "shadcn": "^3.8.2",
+    "shadcn": "^3.8.4",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
     "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
-    "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
-    "@tailwindcss/postcss": "^4",
+    "@ianvs/prettier-plugin-sort-imports": "^4.7.1",
+    "@tailwindcss/postcss": "^4.1.18",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
+    "@types/node": "^20.19.33",
+    "@types/react": "^19.2.13",
+    "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.3",
     "@vitest/coverage-v8": "^4.0.18",
     "@vitest/ui": "^4.0.18",
     "babel-plugin-react-compiler": "1.0.0",
-    "eslint": "^9",
+    "eslint": "^9.39.2",
     "eslint-config-next": "16.1.6",
     "jsdom": "^28.0.0",
     "prettier": "^3.8.1",
     "prettier-plugin-tailwindcss": "^0.7.2",
-    "tailwindcss": "^4",
-    "typescript": "^5",
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.9.3",
     "vitest": "^4.0.18"
   },
   "ignoreScripts": [
diff --git a/quiz.json b/quiz.json
new file mode 100644
index 0000000..af09d0c
--- /dev/null
+++ b/quiz.json
@@ -0,0 +1,162 @@
+[
+  {
+    "id": "quiz-math-basics",
+    "title": "Math Basics",
+    "questions": [
+      { "id": "q1", "prompt": "What is 7 × 8?", "answer": "56" },
+      { "id": "q2", "prompt": "What is the square root of 144?", "answer": "12" },
+      { "id": "q3", "prompt": "What is 15% of 200?", "answer": "30" },
+      { "id": "q4", "prompt": "Solve: 2x + 5 = 15", "answer": "x = 5" },
+      { "id": "q5", "prompt": "What is the area of a circle with radius 3? (use π ≈ 3.14)", "answer": "28.26" }
+    ],
+    "createdAt": 1707451200000,
+    "updatedAt": 1707451200000
+  },
+  {
+    "id": "quiz-world-capitals",
+    "title": "World Capitals",
+    "questions": [
+      { "id": "q1", "prompt": "What is the capital of Japan?", "answer": "Tokyo" },
+      { "id": "q2", "prompt": "What is the capital of Australia?", "answer": "Canberra" },
+      { "id": "q3", "prompt": "What is the capital of Brazil?", "answer": "Brasília" },
+      { "id": "q4", "prompt": "What is the capital of Egypt?", "answer": "Cairo" },
+      { "id": "q5", "prompt": "What is the capital of Norway?", "answer": "Oslo" }
+    ],
+    "createdAt": 1707537600000,
+    "updatedAt": 1707537600000
+  },
+  {
+    "id": "quiz-science-101",
+    "title": "Science 101",
+    "questions": [
+      { "id": "q1", "prompt": "What is the chemical symbol for gold?", "answer": "Au" },
+      { "id": "q2", "prompt": "How many planets are in our solar system?", "answer": "8" },
+      { "id": "q3", "prompt": "What is the powerhouse of the cell?", "answer": "Mitochondria" },
+      { "id": "q4", "prompt": "What is the boiling point of water in Celsius?", "answer": "100" },
+      { "id": "q5", "prompt": "What force keeps us on the ground?", "answer": "Gravity" }
+    ],
+    "createdAt": 1707624000000,
+    "updatedAt": 1707624000000
+  },
+  {
+    "id": "quiz-mega-100",
+    "title": "Mega Quiz (100 Questions)",
+    "questions": [
+      { "id": "m1", "prompt": "Question 1: What is 1 + 1?", "answer": "2" },
+      { "id": "m2", "prompt": "Question 2: What is 2 + 2?", "answer": "4" },
+      { "id": "m3", "prompt": "Question 3: What is 3 + 3?", "answer": "6" },
+      { "id": "m4", "prompt": "Question 4: What is 4 + 4?", "answer": "8" },
+      { "id": "m5", "prompt": "Question 5: What is 5 + 5?", "answer": "10" },
+      { "id": "m6", "prompt": "Question 6: What is 6 + 6?", "answer": "12" },
+      { "id": "m7", "prompt": "Question 7: What is 7 + 7?", "answer": "14" },
+      { "id": "m8", "prompt": "Question 8: What is 8 + 8?", "answer": "16" },
+      { "id": "m9", "prompt": "Question 9: What is 9 + 9?", "answer": "18" },
+      { "id": "m10", "prompt": "Question 10: What is 10 + 10?", "answer": "20" },
+      { "id": "m11", "prompt": "Question 11: What is 11 × 1?", "answer": "11" },
+      { "id": "m12", "prompt": "Question 12: What is 12 × 1?", "answer": "12" },
+      { "id": "m13", "prompt": "Question 13: What is 13 − 3?", "answer": "10" },
+      { "id": "m14", "prompt": "Question 14: What is 14 ÷ 2?", "answer": "7" },
+      { "id": "m15", "prompt": "Question 15: What is 15 ÷ 3?", "answer": "5" },
+      { "id": "m16", "prompt": "Question 16: What is 16 ÷ 4?", "answer": "4" },
+      { "id": "m17", "prompt": "Question 17: What is 17 − 7?", "answer": "10" },
+      { "id": "m18", "prompt": "Question 18: What is 18 ÷ 6?", "answer": "3" },
+      { "id": "m19", "prompt": "Question 19: What is 19 − 9?", "answer": "10" },
+      { "id": "m20", "prompt": "Question 20: What is 20 ÷ 5?", "answer": "4" },
+      { "id": "m21", "prompt": "Question 21: What is 3 × 7?", "answer": "21" },
+      { "id": "m22", "prompt": "Question 22: What is 2 × 11?", "answer": "22" },
+      { "id": "m23", "prompt": "Question 23: What is 23 − 13?", "answer": "10" },
+      { "id": "m24", "prompt": "Question 24: What is 4 × 6?", "answer": "24" },
+      { "id": "m25", "prompt": "Question 25: What is 5 × 5?", "answer": "25" },
+      { "id": "m26", "prompt": "Question 26: What is 26 ÷ 2?", "answer": "13" },
+      { "id": "m27", "prompt": "Question 27: What is 3 × 9?", "answer": "27" },
+      { "id": "m28", "prompt": "Question 28: What is 4 × 7?", "answer": "28" },
+      { "id": "m29", "prompt": "Question 29: What is 29 − 19?", "answer": "10" },
+      { "id": "m30", "prompt": "Question 30: What is 5 × 6?", "answer": "30" },
+      { "id": "m31", "prompt": "Question 31: What is 31 − 21?", "answer": "10" },
+      { "id": "m32", "prompt": "Question 32: What is 4 × 8?", "answer": "32" },
+      { "id": "m33", "prompt": "Question 33: What is 3 × 11?", "answer": "33" },
+      { "id": "m34", "prompt": "Question 34: What is 34 − 24?", "answer": "10" },
+      { "id": "m35", "prompt": "Question 35: What is 5 × 7?", "answer": "35" },
+      { "id": "m36", "prompt": "Question 36: What is 6 × 6?", "answer": "36" },
+      { "id": "m37", "prompt": "Question 37: What is 37 − 27?", "answer": "10" },
+      { "id": "m38", "prompt": "Question 38: What is 2 × 19?", "answer": "38" },
+      { "id": "m39", "prompt": "Question 39: What is 3 × 13?", "answer": "39" },
+      { "id": "m40", "prompt": "Question 40: What is 5 × 8?", "answer": "40" },
+      { "id": "m41", "prompt": "Question 41: What is 41 − 31?", "answer": "10" },
+      { "id": "m42", "prompt": "Question 42: What is 6 × 7?", "answer": "42" },
+      { "id": "m43", "prompt": "Question 43: What is 43 − 33?", "answer": "10" },
+      { "id": "m44", "prompt": "Question 44: What is 4 × 11?", "answer": "44" },
+      { "id": "m45", "prompt": "Question 45: What is 5 × 9?", "answer": "45" },
+      { "id": "m46", "prompt": "Question 46: What is 46 − 36?", "answer": "10" },
+      { "id": "m47", "prompt": "Question 47: What is 47 − 37?", "answer": "10" },
+      { "id": "m48", "prompt": "Question 48: What is 6 × 8?", "answer": "48" },
+      { "id": "m49", "prompt": "Question 49: What is 7 × 7?", "answer": "49" },
+      { "id": "m50", "prompt": "Question 50: What is 5 × 10?", "answer": "50" },
+      { "id": "m51", "prompt": "Question 51: What is 51 − 41?", "answer": "10" },
+      { "id": "m52", "prompt": "Question 52: What is 4 × 13?", "answer": "52" },
+      { "id": "m53", "prompt": "Question 53: What is 53 − 43?", "answer": "10" },
+      { "id": "m54", "prompt": "Question 54: What is 6 × 9?", "answer": "54" },
+      { "id": "m55", "prompt": "Question 55: What is 5 × 11?", "answer": "55" },
+      { "id": "m56", "prompt": "Question 56: What is 7 × 8?", "answer": "56" },
+      { "id": "m57", "prompt": "Question 57: What is 57 − 47?", "answer": "10" },
+      { "id": "m58", "prompt": "Question 58: What is 2 × 29?", "answer": "58" },
+      { "id": "m59", "prompt": "Question 59: What is 59 − 49?", "answer": "10" },
+      { "id": "m60", "prompt": "Question 60: What is 6 × 10?", "answer": "60" },
+      { "id": "m61", "prompt": "Question 61: What is 61 − 51?", "answer": "10" },
+      { "id": "m62", "prompt": "Question 62: What is 2 × 31?", "answer": "62" },
+      { "id": "m63", "prompt": "Question 63: What is 7 × 9?", "answer": "63" },
+      { "id": "m64", "prompt": "Question 64: What is 8 × 8?", "answer": "64" },
+      { "id": "m65", "prompt": "Question 65: What is 5 × 13?", "answer": "65" },
+      { "id": "m66", "prompt": "Question 66: What is 6 × 11?", "answer": "66" },
+      { "id": "m67", "prompt": "Question 67: What is 67 − 57?", "answer": "10" },
+      { "id": "m68", "prompt": "Question 68: What is 4 × 17?", "answer": "68" },
+      { "id": "m69", "prompt": "Question 69: What is 3 × 23?", "answer": "69" },
+      { "id": "m70", "prompt": "Question 70: What is 7 × 10?", "answer": "70" },
+      { "id": "m71", "prompt": "Question 71: What is 71 − 61?", "answer": "10" },
+      { "id": "m72", "prompt": "Question 72: What is 8 × 9?", "answer": "72" },
+      { "id": "m73", "prompt": "Question 73: What is 73 − 63?", "answer": "10" },
+      { "id": "m74", "prompt": "Question 74: What is 2 × 37?", "answer": "74" },
+      { "id": "m75", "prompt": "Question 75: What is 5 × 15?", "answer": "75" },
+      { "id": "m76", "prompt": "Question 76: What is 4 × 19?", "answer": "76" },
+      { "id": "m77", "prompt": "Question 77: What is 7 × 11?", "answer": "77" },
+      { "id": "m78", "prompt": "Question 78: What is 6 × 13?", "answer": "78" },
+      { "id": "m79", "prompt": "Question 79: What is 79 − 69?", "answer": "10" },
+      { "id": "m80", "prompt": "Question 80: What is 8 × 10?", "answer": "80" },
+      { "id": "m81", "prompt": "Question 81: What is 9 × 9?", "answer": "81" },
+      { "id": "m82", "prompt": "Question 82: What is 82 − 72?", "answer": "10" },
+      { "id": "m83", "prompt": "Question 83: What is 83 − 73?", "answer": "10" },
+      { "id": "m84", "prompt": "Question 84: What is 7 × 12?", "answer": "84" },
+      { "id": "m85", "prompt": "Question 85: What is 5 × 17?", "answer": "85" },
+      { "id": "m86", "prompt": "Question 86: What is 86 − 76?", "answer": "10" },
+      { "id": "m87", "prompt": "Question 87: What is 3 × 29?", "answer": "87" },
+      { "id": "m88", "prompt": "Question 88: What is 8 × 11?", "answer": "88" },
+      { "id": "m89", "prompt": "Question 89: What is 89 − 79?", "answer": "10" },
+      { "id": "m90", "prompt": "Question 90: What is 9 × 10?", "answer": "90" },
+      { "id": "m91", "prompt": "Question 91: What is 7 × 13?", "answer": "91" },
+      { "id": "m92", "prompt": "Question 92: What is 4 × 23?", "answer": "92" },
+      { "id": "m93", "prompt": "Question 93: What is 3 × 31?", "answer": "93" },
+      { "id": "m94", "prompt": "Question 94: What is 2 × 47?", "answer": "94" },
+      { "id": "m95", "prompt": "Question 95: What is 5 × 19?", "answer": "95" },
+      { "id": "m96", "prompt": "Question 96: What is 8 × 12?", "answer": "96" },
+      { "id": "m97", "prompt": "Question 97: What is 97 − 87?", "answer": "10" },
+      { "id": "m98", "prompt": "Question 98: What is 7 × 14?", "answer": "98" },
+      { "id": "m99", "prompt": "Question 99: What is 9 × 11?", "answer": "99" },
+      { "id": "m100", "prompt": "Question 100: What is 10 × 10?", "answer": "100" }
+    ],
+    "createdAt": 1707710400000,
+    "updatedAt": 1707710400000
+  },
+  {
+    "id": "quiz-vocabulary",
+    "title": "Vocabulary Quick Quiz",
+    "questions": [
+      { "id": "q1", "prompt": "What does 'benevolent' mean?", "answer": "Kind and generous" },
+      { "id": "q2", "prompt": "What is a synonym for 'enormous'?", "answer": "Huge or massive" },
+      { "id": "q3", "prompt": "What does 'ephemeral' mean?", "answer": "Short-lived or fleeting" },
+      { "id": "q4", "prompt": "What is the opposite of 'ancient'?", "answer": "Modern or new" },
+      { "id": "q5", "prompt": "What does 'meticulous' mean?", "answer": "Very careful and precise" }
+    ],
+    "createdAt": 1707796800000,
+    "updatedAt": 1707796800000
+  }
+]