diff --git a/CHANGELOG.md b/CHANGELOG.md
index a9cb0da..f98b55b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,10 +7,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.1.4] - 2026-02-05
+
 ### Changed
 
 - Rethought Data Security
 
+### Documentation
+
+- Version bumped to 1.1.4 in `package.json` and sidebar (AppShell).
+- Root layout: documented PrivacyNotice, Toaster (sonner), metadata (title template, OG, Twitter), and ld+json WebApplication schema in layout and routes docs.
+- Route pages: documented inline `metadata` export and `skeleton` prop pattern for feature components (StudentForm, QuizEditor, QuizPlayCard, GeneratorCard).
+- Components: added PrivacyNotice and Toaster to layout section; Toaster (sonner) to UI primitives; sonner to dependencies.
+- Structure: added `privacy-notice.tsx`, `robots.ts`, `sitemap.ts`, and Sonner/Toaster in folder structure and key files.
+- Routes: updated App Layout and Route Metadata to reflect current layout content and route-level metadata; Route Components updated for skeleton prop usage.
+
 ## [1.1.3] - 2026-02-05
 
 ### Added
diff --git a/app/breakout-rooms/page.tsx b/app/breakout-rooms/page.tsx
index e0331b1..2b2ac2f 100644
--- a/app/breakout-rooms/page.tsx
+++ b/app/breakout-rooms/page.tsx
@@ -2,34 +2,10 @@ import { Metadata } from 'next';
 
 import BreakoutGroupsCard from '@/components/breakout/breakout-groups-card';
 
-/**
- * Builds SEO metadata for the breakout room generator route.
- */
 export const metadata: Metadata = {
-  title: 'Breakout Rooms | TeacherBuddy',
-  description: 'Create randomized student groups for breakout sessions.',
-  openGraph: {
-    title: 'Breakout Rooms | TeacherBuddy',
-    description: 'Create randomized student groups for breakout sessions.',
-    siteName: 'TeacherBuddy',
-    images: [
-      {
-        url: 'https://teacherbuddy.mrbubbles-src.dev/api/og',
-        width: 1200,
-        height: 630,
-        alt: 'TeacherBuddy Logo',
-      },
-    ],
-    type: 'website',
-    locale: 'en_GB',
-  },
-  twitter: {
-    card: 'summary_large_image',
-    title: 'Breakout Rooms | TeacherBuddy',
-    description: 'Create randomized student groups for breakout sessions.',
-    images: ['https://teacherbuddy.mrbubbles-src.dev/api/og'],
-    creator: '@_MstrBubbles',
-  },
+  title: 'Breakout Rooms',
+  description:
+    'Instantly create randomised student groups for breakout sessions, discussions, or team activities.',
 };
 
 /**
diff --git a/app/generator/page.tsx b/app/generator/page.tsx
index 54ff66c..0263e42 100644
--- a/app/generator/page.tsx
+++ b/app/generator/page.tsx
@@ -3,34 +3,10 @@ import { Metadata } from 'next';
 import GeneratorCard from '@/components/generator/generator-card';
 import GeneratorCardSkeleton from '@/components/loading/generator-card-skeleton';
 
-/**
- * Builds SEO metadata for the random generator route.
- */
 export const metadata: Metadata = {
-  title: 'Student Generator | TeacherBuddy',
-  description: 'Pick a random student without repeats.',
-  openGraph: {
-    title: 'Student Generator | TeacherBuddy',
-    description: 'Pick a random student without repeats.',
-    siteName: 'TeacherBuddy',
-    images: [
-      {
-        url: 'https://teacherbuddy.mrbubbles-src.dev/api/og',
-        width: 1200,
-        height: 630,
-        alt: 'TeacherBuddy Logo',
-      },
-    ],
-    type: 'website',
-    locale: 'en_GB',
-  },
-  twitter: {
-    card: 'summary_large_image',
-    title: 'Student Generator | TeacherBuddy',
-    description: 'Pick a random student without repeats.',
-    images: ['https://teacherbuddy.mrbubbles-src.dev/api/og'],
-    creator: '@_MstrBubbles',
-  },
+  title: 'Student Generator',
+  description:
+    'Randomly pick students from your roster without repeats — perfect for fair participation in class.',
 };
 
 /**
diff --git a/app/globals.css b/app/globals.css
index 83cfc04..9ca1d49 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -384,3 +384,48 @@
   [data-description] {
   color: inherit;
 }
+
+/* Timer volume slider — filled track with --primary color */
+.timer-volume-slider {
+  --slider-pct: 0%;
+  accent-color: var(--primary);
+}
+.timer-volume-slider::-webkit-slider-runnable-track {
+  height: 0.5rem;
+  border-radius: 9999px;
+  background: linear-gradient(
+    to right,
+    var(--primary) var(--slider-pct),
+    var(--muted) var(--slider-pct)
+  );
+}
+.timer-volume-slider::-moz-range-track {
+  height: 0.5rem;
+  border-radius: 9999px;
+  background: linear-gradient(
+    to right,
+    var(--primary) var(--slider-pct),
+    var(--muted) var(--slider-pct)
+  );
+}
+.timer-volume-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 9999px;
+  background: var(--primary);
+  border: 2px solid var(--background);
+  box-shadow: 0 1px 3px oklch(0 0 0 / 0.2);
+  margin-top: -0.25rem;
+  cursor: pointer;
+}
+.timer-volume-slider::-moz-range-thumb {
+  width: 1rem;
+  height: 1rem;
+  border-radius: 9999px;
+  background: var(--primary);
+  border: 2px solid var(--background);
+  box-shadow: 0 1px 3px oklch(0 0 0 / 0.2);
+  cursor: pointer;
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index 18537f1..40f8491 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -21,41 +21,37 @@ const geistMono = Geist_Mono({
   subsets: ['latin'],
 });
 
-export async function generateMetadata(): Promise<Metadata> {
-  return {
-    metadataBase: new URL(
-      process.env.NEXT_PUBLIC_SITE_URL ?? 'http://localhost:3000',
-    ),
-    title: 'TeacherBuddy',
-    description:
-      'Manage students, run quizzes, and organize class activities in one place.',
-    openGraph: {
-      title: 'TeacherBuddy',
-      description:
-        'Manage students, run quizzes, and organize class activities in one place.',
-      siteName: 'TeacherBuddy',
-      images: [
-        {
-          url: 'https://teacherbuddy.mrbubbles-src.dev/api/og',
-          width: 1200,
-          height: 630,
-          alt: 'TeacherBuddy Logo',
-        },
-      ],
-      type: 'website',
-      locale: 'en_GB',
-    },
-    twitter: {
-      card: 'summary_large_image',
-      title: 'TeacherBuddy',
-      description:
-        'Manage students, run quizzes, and organize class activities in one place.',
-      images: ['https://teacherbuddy.mrbubbles-src.dev/api/og'],
-      creator: '@_MstrBubbles',
-    },
-    other: { 'apple-mobile-web-app-title': 'teacherbuddy.mrbubbles-src.dev' },
-  };
-}
+export const metadata: Metadata = {
+  metadataBase: new URL(
+    process.env.NEXT_PUBLIC_SITE_URL ??
+      'https://teacherbuddy.mrbubbles-src.dev',
+  ),
+  title: {
+    template: '%s | TeacherBuddy',
+    default: 'TeacherBuddy — Free Classroom Tools for Teachers',
+  },
+  description:
+    'Manage students, run quizzes, and organize class activities in one place.',
+  openGraph: {
+    siteName: 'TeacherBuddy',
+    images: [
+      {
+        url: '/api/og',
+        width: 1200,
+        height: 630,
+        alt: 'TeacherBuddy — free classroom management dashboard',
+      },
+    ],
+    type: 'website',
+    locale: 'en_GB',
+  },
+  twitter: {
+    card: 'summary_large_image',
+    images: ['/api/og'],
+    creator: '@_MstrBubbles',
+  },
+  other: { 'apple-mobile-web-app-title': 'TeacherBuddy' },
+};
 
 /**
  * Renders the shared HTML shell and providers for all application routes.
@@ -67,13 +63,8 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang="en_GB" suppressHydrationWarning>
       <head>
-        <meta
-          property="og:url"
-          content="https://teacherbuddy.mrbubbles-src.dev"
-        />
-        <link rel="canonical" href="https://teacherbuddy.mrbubbles-src.dev" />
         <script
           type="application/ld+json"
           dangerouslySetInnerHTML={{
@@ -84,16 +75,14 @@ export default function RootLayout({
               description:
                 'Manage students, run quizzes, and organize class activities in one place.',
               url: 'https://teacherbuddy.mrbubbles-src.dev',
-              applicationCategory: 'Education',
+              applicationCategory: 'EducationalApplication',
               applicationSubCategory: 'Classroom Management',
-              applicationSuite: 'TeacherBuddy',
-              applicationVersion: '1.1.3',
-              applicationInstallUrl:
-                'https://teacherbuddy.mrbubbles-src.dev/install',
-              applicationUpdateUrl:
-                'https://teacherbuddy.mrbubbles-src.dev/update',
-              applicationUpdateVersion: '1.1.3',
-              applicationUpdateStatus: 'available',
+              operatingSystem: 'Web',
+              offers: {
+                '@type': 'Offer',
+                price: '0',
+                priceCurrency: 'EUR',
+              },
             }),
           }}
         />
diff --git a/app/manifest.json b/app/manifest.json
index de9661e..73fa734 100644
--- a/app/manifest.json
+++ b/app/manifest.json
@@ -1,6 +1,8 @@
 {
   "name": "TeacherBuddy",
   "short_name": "TB",
+  "description": "Manage students, run quizzes, and organise class activities in one place.",
+  "start_url": "/",
   "icons": [
     {
       "src": "/web-app-manifest-192x192.png",
diff --git a/app/page.tsx b/app/page.tsx
index cfed090..dd87469 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,27 +1,9 @@
-import Image from 'next/image';
-
 import DashboardCards from '@/components/dashboard/dashboard-cards';
-import Logo from '@/public/images/teacherbuddy-logo.png';
 
 /**
- * Renders the dashboard landing page with branding and primary workflow cards.
+ * Renders the dashboard landing page combining command center hero with timeline flow.
  * Use this route as the entry point for navigating all TeacherBuddy tools.
  */
 export default function Page() {
-  return (
-    <>
-      <section className="justify-self-center mb-5 max-w-full md:max-w-2/3 lg:max-w-2/4 xl:max-w-4/6">
-        <Image
-          src={Logo}
-          alt="TeacherBuddy Logo"
-          width={895}
-          height={372}
-          priority
-          placeholder="blur"
-          blurDataURL={Logo.blurDataURL}
-        />
-      </section>
-      <DashboardCards />
-    </>
-  );
+  return <DashboardCards />;
 }
diff --git a/app/play/page.tsx b/app/play/page.tsx
index 01df67e..d146b70 100644
--- a/app/play/page.tsx
+++ b/app/play/page.tsx
@@ -3,34 +3,10 @@ import { Metadata } from 'next';
 import QuizPlayCardSkeleton from '@/components/loading/quiz-play-card-skeleton';
 import QuizPlayCard from '@/components/play/quiz-play-card';
 
-/**
- * Builds SEO metadata for the live quiz play route.
- */
 export const metadata: Metadata = {
-  title: 'Quiz Play | TeacherBuddy',
-  description: 'Draw a student and a question, then reveal the answer.',
-  openGraph: {
-    title: 'Quiz Play | TeacherBuddy',
-    description: 'Draw a student and a question, then reveal the answer.',
-    siteName: 'TeacherBuddy',
-    images: [
-      {
-        url: 'https://teacherbuddy.mrbubbles-src.dev/api/og',
-        width: 1200,
-        height: 630,
-        alt: 'TeacherBuddy Logo',
-      },
-    ],
-    type: 'website',
-    locale: 'en_GB',
-  },
-  twitter: {
-    card: 'summary_large_image',
-    title: 'Quiz Play | TeacherBuddy',
-    description: 'Draw a student and a question, then reveal the answer.',
-    images: ['https://teacherbuddy.mrbubbles-src.dev/api/og'],
-    creator: '@_MstrBubbles',
-  },
+  title: 'Quiz Play',
+  description:
+    'Run live quizzes in class — randomly draw a student and question, then reveal the answer together.',
 };
 /**
  * Renders the live quiz play route.
diff --git a/app/projects/page.tsx b/app/projects/page.tsx
index f13bcdb..fb6ee3e 100644
--- a/app/projects/page.tsx
+++ b/app/projects/page.tsx
@@ -4,30 +4,9 @@ import ProjectListBuilder from '@/components/projects/project-list-builder';
 import ProjectListView from '@/components/projects/project-list-view';
 
 export const metadata: Metadata = {
-  title: 'Project Lists | TeacherBuddy',
-  description: 'Build project lists and group students from your roster.',
-  openGraph: {
-    title: 'Project Lists | TeacherBuddy',
-    description: 'Build project lists and group students from your roster.',
-    siteName: 'TeacherBuddy',
-    images: [
-      {
-        url: 'https://teacherbuddy.mrbubbles-src.dev/api/og',
-        width: 1200,
-        height: 630,
-        alt: 'TeacherBuddy Logo',
-      },
-    ],
-    type: 'website',
-    locale: 'en_GB',
-  },
-  twitter: {
-    card: 'summary_large_image',
-    title: 'Project Lists | TeacherBuddy',
-    description: 'Build project lists and group students from your roster.',
-    images: ['https://teacherbuddy.mrbubbles-src.dev/api/og'],
-    creator: '@_MstrBubbles',
-  },
+  title: 'Project Lists',
+  description:
+    'Build project lists, assign students to teams, and organise group work from your class roster.',
 };
 /**
  * Renders the project list management route.
diff --git a/app/quizzes/page.tsx b/app/quizzes/page.tsx
index 9802f5b..43197d2 100644
--- a/app/quizzes/page.tsx
+++ b/app/quizzes/page.tsx
@@ -4,30 +4,9 @@ import QuizEditorSkeleton from '@/components/loading/quiz-editor-skeleton';
 import QuizEditor from '@/components/quizzes/quiz-editor';
 
 export const metadata: Metadata = {
-  title: 'Quiz Builder | TeacherBuddy',
-  description: 'Create and update quizzes with custom questions.',
-  openGraph: {
-    title: 'Quiz Builder | TeacherBuddy',
-    description: 'Create and update quizzes with custom questions.',
-    siteName: 'TeacherBuddy',
-    images: [
-      {
-        url: 'https://teacherbuddy.mrbubbles-src.dev/api/og',
-        width: 1200,
-        height: 630,
-        alt: 'TeacherBuddy Logo',
-      },
-    ],
-    type: 'website',
-    locale: 'en_GB',
-  },
-  twitter: {
-    card: 'summary_large_image',
-    title: 'Quiz Builder | TeacherBuddy',
-    description: 'Create and update quizzes with custom questions.',
-    images: ['https://teacherbuddy.mrbubbles-src.dev/api/og'],
-    creator: '@_MstrBubbles',
-  },
+  title: 'Quiz Builder',
+  description:
+    'Create custom quizzes with your own questions and answers. Build assessments for any subject in minutes.',
 };
 /**
  * Renders the quiz authoring route.
diff --git a/app/robots.ts b/app/robots.ts
index c2d4bbb..76b8d81 100644
--- a/app/robots.ts
+++ b/app/robots.ts
@@ -1,21 +1,20 @@
 import type { MetadataRoute } from 'next';
 
-import { resolveMetadataBase } from '@/lib/metadata';
+import { resolveSiteUrl } from '@/lib/site-url';
 
 /**
  * Generates robots directives for crawlable public routes.
  * Next.js serves this metadata route automatically at `/robots.txt`.
  */
 export default function robots(): MetadataRoute.Robots {
-  const metadataBase = resolveMetadataBase();
-  const host = metadataBase.origin;
+  const base = resolveSiteUrl();
 
   return {
     rules: {
       userAgent: '*',
       allow: '/',
     },
-    sitemap: new URL('/sitemap.xml', metadataBase).toString(),
-    host,
+    sitemap: new URL('/sitemap.xml', base).toString(),
+    host: base.origin,
   };
 }
diff --git a/app/sitemap.ts b/app/sitemap.ts
index 53e1adb..c8b2d5a 100644
--- a/app/sitemap.ts
+++ b/app/sitemap.ts
@@ -1,27 +1,20 @@
 import type { MetadataRoute } from 'next';
 
-import { resolveMetadataBase } from '@/lib/metadata';
 import { ROUTE_PATHS } from '@/lib/page-meta';
-
-const HOME_PATH = '/';
-
-function createAbsoluteUrl(path: string): string {
-  const base = resolveMetadataBase();
-  const pathname = path === HOME_PATH ? '/' : path;
-  return new URL(pathname, base).toString();
-}
+import { resolveSiteUrl } from '@/lib/site-url';
 
 /**
  * Generates the XML sitemap entries for all top-level TeacherBuddy routes.
  * Next.js serves this metadata route automatically at `/sitemap.xml`.
  */
 export default function sitemap(): MetadataRoute.Sitemap {
+  const base = resolveSiteUrl();
   const lastModified = new Date();
 
   return ROUTE_PATHS.map((path) => ({
-    url: createAbsoluteUrl(path),
+    url: new URL(path, base).toString(),
     lastModified,
     changeFrequency: 'weekly',
-    priority: path === HOME_PATH ? 1 : 0.8,
+    priority: path === '/' ? 1 : 0.8,
   }));
 }
diff --git a/app/students/page.tsx b/app/students/page.tsx
index 6eb59d8..ac08413 100644
--- a/app/students/page.tsx
+++ b/app/students/page.tsx
@@ -6,30 +6,9 @@ import StudentForm from '@/components/students/student-form';
 import StudentTable from '@/components/students/student-table';
 
 export const metadata: Metadata = {
-  title: 'Student Management | TeacherBuddy',
-  description: 'Add students, mark absences, and manage your roster.',
-  openGraph: {
-    title: 'Student Management | TeacherBuddy',
-    description: 'Add students, mark absences, and manage your roster.',
-    siteName: 'TeacherBuddy',
-    images: [
-      {
-        url: 'https://teacherbuddy.mrbubbles-src.dev/api/og',
-        width: 1200,
-        height: 630,
-        alt: 'TeacherBuddy Logo',
-      },
-    ],
-    type: 'website',
-    locale: 'en_GB',
-  },
-  twitter: {
-    card: 'summary_large_image',
-    title: 'Student Management | TeacherBuddy',
-    description: 'Add students, mark absences, and manage your roster.',
-    images: ['https://teacherbuddy.mrbubbles-src.dev/api/og'],
-    creator: '@_MstrBubbles',
-  },
+  title: 'Student Management',
+  description:
+    'Add students, mark absences, and keep your class roster organised — all from one simple dashboard.',
 };
 
 /**
diff --git a/components/app-shell.tsx b/components/app-shell.tsx
index d8e746e..acda6d1 100644
--- a/components/app-shell.tsx
+++ b/components/app-shell.tsx
@@ -8,6 +8,8 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
+import { SparklesIcon } from 'lucide-react';
+
 import { SidebarNav } from '@/components/navigation/sidebar-nav';
 import { Separator } from '@/components/ui/separator';
 import {
@@ -27,7 +29,7 @@ import Header from './header';
 
 /**
  * Global app shell that renders the sidebar, header, and page content.
- * Pass the page content as children and an optional footer to render below.
+ * Styled to match the design-6 command center aesthetic with phase-colored navigation.
  */
 export default function AppShell({
   children,
@@ -56,7 +58,7 @@ export default function AppShell({
                 <span className="relative size-10 shrink-0 overflow-hidden rounded-[calc(var(--radius-sm)+2px)] flex items-center justify-center group-data-[collapsible=icon]:size-8">
                   <Image
                     src={Icon}
-                    alt="TeacherBuddy Logo"
+                    alt="TeacherBuddy icon"
                     fill
                     className="object-contain"
                     sizes="(max-width: 48px) 32px, 40px"
@@ -66,7 +68,7 @@ export default function AppShell({
                   />
                 </span>
 
-                <span className="group-data-[collapsible=icon]:hidden text-lg/relaxed">
+                <span className="group-data-[collapsible=icon]:hidden text-lg/relaxed font-bold tracking-tight">
                   TeacherBuddy
                 </span>
               </SidebarMenuButton>
@@ -82,10 +84,11 @@ export default function AppShell({
         <Separator />
         <SidebarFooter>
           <div className="flex items-center justify-between gap-2 px-2 text-sm text-muted-foreground group-data-[collapsible=icon]:justify-center">
-            <span className="group-data-[collapsible=icon]:text-xs">
-              v1.1.3
+            <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
             </span>
-            <span className="uppercase tracking-[0.2em] group-data-[collapsible=icon]:hidden">
+            <span className="text-xs font-semibold uppercase tracking-[0.15em] text-primary/60 group-data-[collapsible=icon]:hidden">
               Classroom
             </span>
           </div>
diff --git a/components/breakout/breakout-groups-card.tsx b/components/breakout/breakout-groups-card.tsx
index 1eff20d..df90140 100644
--- a/components/breakout/breakout-groups-card.tsx
+++ b/components/breakout/breakout-groups-card.tsx
@@ -114,17 +114,25 @@ export default function BreakoutGroupsCard() {
   }
 
   return (
-    <Card className="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"
+        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">Breakout Rooms</CardTitle>
+          <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="p-2.5 text-sm border-accent/50 shadow-sm shrink-0">
+          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>
       </CardHeader>
@@ -186,7 +194,7 @@ export default function BreakoutGroupsCard() {
             {groups.map((group: Student[], index: number) => (
               <div
                 key={`group-${index}`}
-                className="flex flex-col rounded-md border border-border/60 px-3 py-2 w-fit flex-wrap
+                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">
diff --git a/components/dashboard/dashboard-cards.tsx b/components/dashboard/dashboard-cards.tsx
index 7641928..eeffcb1 100644
--- a/components/dashboard/dashboard-cards.tsx
+++ b/components/dashboard/dashboard-cards.tsx
@@ -1,125 +1,274 @@
 import Link from 'next/link';
+import Image from 'next/image';
 
 import {
   ClipboardListIcon,
   FolderKanbanIcon,
-  LayoutGridIcon,
   PlayCircleIcon,
   ShuffleIcon,
   UsersIcon,
+  ArrowRightIcon,
+  BookOpenIcon,
+  ZapIcon,
+  TargetIcon,
+  FlagIcon,
+  SparklesIcon,
 } from 'lucide-react';
 
-import { buttonVariants } from '@/components/ui/button-variants';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import { Badge } from '../ui/badge';
-import { cn } from '@/lib/utils';
+import Logo from '@/public/images/teacherbuddy-logo.png';
 
-const cards = [
-  {
-    title: 'Students',
-    description: 'Add students, mark absences, and keep your roster tidy.',
-    href: '/students',
-    icon: UsersIcon,
-    badge: 'Roster',
-  },
-  {
-    title: 'Generator',
-    description: 'Randomly pick a student without repeats until reset.',
-    href: '/generator',
-    icon: ShuffleIcon,
-    badge: 'Random',
-  },
+type Phase = {
+  id: string;
+  label: string;
+  subtitle: string;
+  icon: typeof BookOpenIcon;
+  color: string;
+  features: {
+    title: string;
+    description: string;
+    href: string;
+    icon: typeof UsersIcon;
+    badge: string;
+  }[];
+};
+
+const phases: Phase[] = [
   {
-    title: 'Breakout Rooms',
-    description: 'Create randomized student groups for breakout sessions.',
-    href: '/breakout-rooms',
-    icon: UsersIcon,
-    badge: 'Groups',
+    id: 'prepare',
+    label: 'Prepare',
+    subtitle: 'Set up before class',
+    icon: BookOpenIcon,
+    color: 'var(--chart-1)',
+    features: [
+      {
+        title: 'Students',
+        description:
+          'Add students, mark absences, and keep your roster tidy.',
+        href: '/students',
+        icon: UsersIcon,
+        badge: 'Roster',
+      },
+      {
+        title: 'Quiz Builder',
+        description: 'Create quizzes with custom questions and answers.',
+        href: '/quizzes',
+        icon: ClipboardListIcon,
+        badge: 'Create',
+      },
+    ],
   },
   {
-    title: 'Quiz Builder',
-    description: 'Create quizzes with custom questions and answers.',
-    href: '/quizzes',
-    icon: ClipboardListIcon,
-    badge: 'Create',
+    id: 'start',
+    label: 'Start',
+    subtitle: 'Kick off the lesson',
+    icon: ZapIcon,
+    color: 'var(--chart-2)',
+    features: [
+      {
+        title: 'Generator',
+        description: 'Randomly pick a student without repeats until reset.',
+        href: '/generator',
+        icon: ShuffleIcon,
+        badge: 'Random',
+      },
+    ],
   },
   {
-    title: 'Quiz Play',
-    description: 'Draw a student + question, then reveal the answer.',
-    href: '/play',
-    icon: PlayCircleIcon,
-    badge: 'Live',
+    id: 'engage',
+    label: 'Engage',
+    subtitle: 'Run classroom activities',
+    icon: TargetIcon,
+    color: 'var(--chart-4)',
+    features: [
+      {
+        title: 'Breakout Rooms',
+        description:
+          'Create randomized student groups for breakout sessions.',
+        href: '/breakout-rooms',
+        icon: UsersIcon,
+        badge: 'Groups',
+      },
+      {
+        title: 'Quiz Play',
+        description: 'Draw a student + question, then reveal the answer.',
+        href: '/play',
+        icon: PlayCircleIcon,
+        badge: 'Live',
+      },
+    ],
   },
   {
-    title: 'Projects',
-    description: 'Build student lists and manage grouped project teams.',
-    href: '/projects',
-    icon: FolderKanbanIcon,
-    badge: 'Lists',
+    id: 'review',
+    label: 'Review',
+    subtitle: 'Organize and reflect',
+    icon: FlagIcon,
+    color: 'var(--chart-5)',
+    features: [
+      {
+        title: 'Projects',
+        description:
+          'Build student lists and manage grouped project teams.',
+        href: '/projects',
+        icon: FolderKanbanIcon,
+        badge: 'Lists',
+      },
+    ],
   },
 ];
 
 /**
- * Renders the dashboard navigation cards linking to each workflow.
- * Use this to present quick entry points for the core teacher tools.
+ * Renders a combined dashboard with the command center hero from design-1
+ * and the timeline phase flow from design-2.
  */
 export default function DashboardCards() {
   return (
-    <div className="grid gap-4 lg:grid-cols-2">
-      <Card className="shadow-md lg:col-span-2 lg:py-6 xl:py-8 lg:gap-6 xl:gap-8">
-        <CardHeader className="lg:px-6 xl:px-8">
-          <CardTitle className="flex items-center gap-2 text-xl">
-            <LayoutGridIcon className="size-5" />
-            Central Dashboard
-          </CardTitle>
-          <CardDescription className="text-base/relaxed">
-            Choose a workflow to manage students, projects, or run your next
-            quiz.
-          </CardDescription>
-        </CardHeader>
-      </Card>
-      {cards.map((card) => {
-        const Icon = card.icon;
-        return (
-          <Card
-            key={card.title}
-            className="shadow-md py-6 xl:py-8 lg:gap-6 xl:gap-8">
-            <CardHeader className="flex flex-row items-start justify-between gap-2 px-6 xl:px-8">
-              <div className="flex items-center gap-2">
-                <Icon className="size-5 text-primary" />
-                <CardTitle className="text-xl">{card.title}</CardTitle>
+    <div className="flex flex-col gap-10">
+      {/* Command Center Hero (from design-1) */}
+      <section className="relative overflow-hidden rounded-2xl border border-border/40 bg-card p-6 shadow-lg md:p-8 lg:p-10">
+        <div
+          className="absolute inset-0 opacity-[0.03]"
+          style={{
+            backgroundImage:
+              'radial-gradient(circle at 25% 25%, var(--primary) 1px, transparent 1px), radial-gradient(circle at 75% 75%, var(--primary) 1px, transparent 1px)',
+            backgroundSize: '32px 32px',
+          }}
+        />
+        <div className="relative flex flex-col items-center gap-4 text-center md:flex-row md:text-left lg:gap-8">
+          <div className="w-full max-w-[200px] shrink-0 md:max-w-[240px] lg:max-w-[280px]">
+            <Image
+              src={Logo}
+              alt="TeacherBuddy — free classroom management tools for teachers"
+              width={895}
+              height={372}
+              sizes="(max-width: 768px) 200px, (max-width: 1024px) 240px, 280px"
+              priority
+              placeholder="blur"
+              blurDataURL={Logo.blurDataURL}
+            />
+          </div>
+          <div className="flex flex-col gap-3">
+            <div className="flex items-center justify-center gap-2 md:justify-start">
+              <SparklesIcon className="size-4 text-primary" />
+              <span className="text-xs font-semibold uppercase tracking-[0.2em] text-primary">
+                Command Center
+              </span>
+            </div>
+            <h2 className="text-xl font-bold tracking-tight text-foreground md:text-2xl lg:text-3xl">
+              Everything you need,{' '}
+              <span className="text-primary">one dashboard.</span>
+            </h2>
+            <p className="max-w-lg text-sm text-muted-foreground md:text-base/relaxed">
+              Manage students, run quizzes, and organize class activities —
+              choose a workflow below to get started.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Timeline Phase Flow (from design-2) */}
+      <div className="relative flex flex-col gap-0">
+        {phases.map((phase, phaseIndex) => {
+          const PhaseIcon = phase.icon;
+          const isLast = phaseIndex === phases.length - 1;
+
+          return (
+            <div key={phase.id} className="relative flex gap-4 md:gap-6 lg:gap-8">
+              {/* Timeline spine */}
+              <div className="flex flex-col items-center">
+                {/* Phase node */}
+                <div
+                  className="relative z-10 flex size-10 shrink-0 items-center justify-center rounded-full border-2 shadow-md md:size-12"
+                  style={{
+                    borderColor: phase.color,
+                    backgroundColor: `color-mix(in oklch, ${phase.color} 12%, var(--card))`,
+                  }}>
+                  <PhaseIcon
+                    className="size-4 md:size-5"
+                    style={{ color: phase.color }}
+                  />
+                </div>
+                {/* Connecting line */}
+                {!isLast && (
+                  <div
+                    className="w-0.5 flex-1 min-h-4"
+                    style={{
+                      background: `linear-gradient(to bottom, ${phase.color}, ${phases[phaseIndex + 1].color})`,
+                      opacity: 0.3,
+                    }}
+                  />
+                )}
+              </div>
+
+              {/* Phase content */}
+              <div className="flex-1 pb-8">
+                {/* Phase label */}
+                <div className="mb-3 flex items-baseline gap-3 pt-2">
+                  <h2
+                    className="text-lg font-bold tracking-tight md:text-xl"
+                    style={{ color: phase.color }}>
+                    {phase.label}
+                  </h2>
+                  <span className="text-xs text-muted-foreground md:text-sm">
+                    {phase.subtitle}
+                  </span>
+                </div>
+
+                {/* Feature cards */}
+                <div className="grid gap-3 sm:grid-cols-2">
+                  {phase.features.map((feature) => {
+                    const Icon = feature.icon;
+                    return (
+                      <Link
+                        key={feature.title}
+                        href={feature.href}
+                        className="touch-hitbox group relative flex flex-col gap-3 overflow-hidden rounded-xl border border-border/50 bg-card p-5 shadow-sm transition-all duration-200 hover:shadow-md hover:border-border active:scale-[0.98]">
+                        {/* Subtle left accent */}
+                        <div
+                          className="absolute left-0 top-0 h-full w-1 rounded-l-xl"
+                          style={{
+                            backgroundColor: phase.color,
+                            opacity: 0.6,
+                          }}
+                        />
+
+                        <div className="flex items-start justify-between">
+                          <div className="flex items-center gap-2.5">
+                            <Icon
+                              className="size-4.5"
+                              style={{ color: phase.color }}
+                            />
+                            <h3 className="font-semibold text-foreground">
+                              {feature.title}
+                            </h3>
+                          </div>
+                          <span
+                            className="rounded-full px-2 py-0.5 text-xs font-medium"
+                            style={{
+                              backgroundColor: `color-mix(in oklch, ${phase.color} 10%, transparent)`,
+                              color: phase.color,
+                            }}>
+                            {feature.badge}
+                          </span>
+                        </div>
+
+                        <p className="text-sm/relaxed text-muted-foreground">
+                          {feature.description}
+                        </p>
+
+                        <div className="mt-auto flex items-center gap-1.5 text-sm font-medium transition-all duration-200 group-hover:translate-x-1"
+                          style={{ color: phase.color }}>
+                          Open {feature.title}
+                          <ArrowRightIcon className="size-3.5" />
+                        </div>
+                      </Link>
+                    );
+                  })}
+                </div>
               </div>
-              <Badge
-                variant="outline"
-                className="p-2.5 text-sm border-accent/50 shadow-sm">
-                {card.badge}
-              </Badge>
-            </CardHeader>
-            <CardContent className="h-full px-6 xl:px-8 ">
-              <p className="text-muted-foreground text-base/relaxed">
-                {card.description}
-              </p>
-            </CardContent>
-            <CardFooter className="px-6 xl:px-8">
-              <Link
-                href={card.href}
-                className={cn(
-                  buttonVariants({ variant: 'default', size: 'lg' }),
-                  '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',
-                )}>
-                Open {card.title}
-              </Link>
-            </CardFooter>
-          </Card>
-        );
-      })}
+            </div>
+          );
+        })}
+      </div>
     </div>
   );
 }
diff --git a/components/footer.tsx b/components/footer.tsx
index dd2e8e4..aeba993 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -1,83 +1,98 @@
 import Image from 'next/image';
 import Link from 'next/link';
 
+import { SparklesIcon } from 'lucide-react';
+
 import Logo from '@/public/images/teacherbuddy-logo.png';
 import { Separator } from './ui/separator';
 
 /**
  * Renders the global footer with author, repository, and theme credits.
- * Appears at the bottom of the app shell across all routes.
+ * Styled to match the design-6 command center aesthetic with dot-pattern texture.
  */
 const Footer = () => {
   const currentYear = new Date().getFullYear();
   return (
-    <footer className="text-sm text-muted-foreground py-6 px-4 container mx-auto flex flex-col gap-4 items-center">
-      <Separator orientation="horizontal" className="my-4 w-full" />
-      <section className="max-w-full md:max-w-2/3 lg:max-w-2/4 xl:max-w-2/6">
-        <Image
-          src={Logo.src}
-          alt="TeacherBuddy Logo"
-          width={895}
-          height={372}
-          placeholder="blur"
-          blurDataURL={Logo.blurDataURL}
-        />
-      </section>
-      <section className="flex flex-col items-center gap-3 sm:flex-row sm:gap-4">
-        <p className="text-center sm:text-left">
-          &copy; {currentYear}{' '}
-          <Link
-            href="https://mrbubbles-src.dev"
-            target="_blank"
-            rel="noreferrer"
-            className="font-medium text-primary hover:text-primary/70">
-            mrbubbles-src
-          </Link>
-        </p>
-        <Separator
-          orientation="vertical"
-          className="hidden h-4 shrink-0 sm:block"
-        />
-        <p className="text-center sm:text-left">
-          Source code:{' '}
+    <footer className="relative overflow-hidden border-t border-border/40">
+      {/* Subtle dot-pattern texture */}
+      <div
+        className="pointer-events-none absolute inset-0 opacity-[0.02]"
+        style={{
+          backgroundImage:
+            'radial-gradient(circle at 25% 25%, var(--primary) 1px, transparent 1px), radial-gradient(circle at 75% 75%, var(--primary) 1px, transparent 1px)',
+          backgroundSize: '32px 32px',
+        }}
+      />
+
+      <div className="relative container mx-auto flex flex-col items-center gap-4 px-4 py-6 text-sm text-muted-foreground">
+        <section className="max-w-full md:max-w-2/3 lg:max-w-2/4 xl:max-w-2/6">
+          <Image
+            src={Logo.src}
+            alt="TeacherBuddy logo — classroom tools for teachers"
+            width={895}
+            height={372}
+            sizes="(max-width: 768px) 100vw, (max-width: 1024px) 66vw, (max-width: 1280px) 50vw, 33vw"
+            placeholder="blur"
+            blurDataURL={Logo.blurDataURL}
+          />
+        </section>
+        <section className="flex flex-col items-center gap-3 sm:flex-row sm:gap-4">
+          <p className="text-center sm:text-left">
+            &copy; {currentYear}{' '}
+            <Link
+              href="https://mrbubbles-src.dev"
+              target="_blank"
+              rel="noreferrer"
+              className="touch-hitbox font-medium text-primary hover:text-primary/70">
+              mrbubbles-src
+            </Link>
+          </p>
+          <Separator
+            orientation="vertical"
+            className="hidden h-4 shrink-0 sm:block"
+          />
+          <p className="text-center sm:text-left">
+            Source code:{' '}
+            <Link
+              href="https://github.com/mrbubbles-src/teacherbuddy"
+              target="_blank"
+              rel="noreferrer"
+              className="touch-hitbox font-medium text-primary hover:text-primary/70">
+              TeacherBuddy
+            </Link>
+          </p>
+        </section>
+        <section className="text-center">
+          <p className="flex items-center gap-1.5">
+            <SparklesIcon className="size-3 text-primary" />
+            Color theme inspired by{' '}
+            <Link
+              href="https://github.com/catppuccin/catppuccin"
+              target="_blank"
+              rel="noreferrer"
+              className="touch-hitbox font-medium text-primary hover:text-primary/70">
+              Catppuccin
+            </Link>
+          </p>
+        </section>
+        <section className="flex items-center gap-2">
           <Link
-            href="https://github.com/mrbubbles-src/teacherbuddy"
+            href="https://mrbubbles-src.dev/de/impressum"
             target="_blank"
             rel="noreferrer"
-            className="font-medium text-primary hover:text-primary/70">
-            TeacherBuddy
+            className="touch-hitbox font-medium text-primary hover:text-primary/70">
+            Privacy Policy
           </Link>
-        </p>
-      </section>
-      <section className="text-center">
-        <p>
-          Color theme inspired by{' '}
+          <Separator orientation="vertical" className="h-4 shrink-0" />
           <Link
-            href="https://github.com/catppuccin/catppuccin"
+            href="https://mrbubbles-src.dev/de/datenschutz"
             target="_blank"
             rel="noreferrer"
-            className="font-medium text-primary hover:text-primary/70">
-            Catppuccin
+            className="touch-hitbox font-medium text-primary hover:text-primary/70">
+            Legal Notice
           </Link>
-        </p>
-      </section>
-      <section className="flex items-center gap-2">
-        <Link
-          href="https://mrbubbles-src.dev/de/impressum"
-          target="_blank"
-          rel="noreferrer"
-          className="font-medium text-primary hover:text-primary/70">
-          Privacy Policy
-        </Link>
-        <Separator orientation="vertical" className="h-4 shrink-0" />
-        <Link
-          href="https://mrbubbles-src.dev/de/datenschutz"
-          target="_blank"
-          rel="noreferrer"
-          className="font-medium text-primary hover:text-primary/70">
-          Legal Notice
-        </Link>
-      </section>
+        </section>
+      </div>
     </footer>
   );
 };
diff --git a/components/generator/generator-card.tsx b/components/generator/generator-card.tsx
index 9c564a3..59254f2 100644
--- a/components/generator/generator-card.tsx
+++ b/components/generator/generator-card.tsx
@@ -54,17 +54,25 @@ export default function GeneratorCard({
   }
 
   return (
-    <Card className="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"
+        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">Random Student Pick</CardTitle>
+          <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="p-2.5 text-sm border-accent/50 shadow-sm shrink-0">
+          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>
       </CardHeader>
diff --git a/components/header.tsx b/components/header.tsx
index f89847d..188b96a 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -1,5 +1,7 @@
 import Link from 'next/link';
 
+import { SparklesIcon } from 'lucide-react';
+
 import QuizTimerCard from './play/quiz-timer-card';
 import { Separator } from './ui/separator';
 import { SidebarTrigger } from './ui/sidebar';
@@ -14,45 +16,58 @@ type HeaderProps = {
 
 /**
  * Top navigation header with page title, description, and utility actions.
- * Provide the current page meta and info data to power the info dialog.
+ * Styled to match the design-6 command center aesthetic with dot-pattern texture.
  */
 const Header = ({ meta, info }: HeaderProps) => {
   return (
-    <header className="flex flex-col gap-4 border-b border-border/60 px-4 py-3 md:grid md:grid-cols-[1fr_auto] md:items-center md:gap-3 md:px-6 lg:px-8 xl:grid-cols-[1fr_auto_1fr] xl:px-10 2xl:px-12">
-      <div className="flex min-w-0 items-start justify-between gap-3 md:contents">
-        <div className="flex min-w-0 flex-1 items-center gap-3 md:col-start-1 md:row-start-1">
-          <SidebarTrigger className="shrink-0 touch-hitbox" />
-          <Separator orientation="vertical" className="h-25 shrink-0" />
-          <div className="flex min-w-0 flex-col">
-            <Link
-              href="/"
-              className="truncate touch-hitbox text-sm font-semibold uppercase tracking-[0.2em] text-muted-foreground  transition-colors md:text-base lg:text-lg xl:text-xl 2xl:text-2xl hover:text-primary">
-              TeacherBuddy
-            </Link>
-            <div className="flex min-w-0 items-center gap-2">
-              <h1 className="truncate text-lg font-semibold text-primary md:text-xl lg:text-2xl xl:text-3xl 2xl:text-4xl">
-                {meta.title}
-              </h1>
-              <PageInfoDialog
-                currentPath={info.currentPath}
-                pages={info.pages}
-              />
+    <header className="relative overflow-hidden border-b border-border/40">
+      {/* Subtle dot-pattern texture */}
+      <div
+        className="pointer-events-none absolute inset-0 opacity-[0.02]"
+        style={{
+          backgroundImage:
+            'radial-gradient(circle at 25% 25%, var(--primary) 1px, transparent 1px), radial-gradient(circle at 75% 75%, var(--primary) 1px, transparent 1px)',
+          backgroundSize: '32px 32px',
+        }}
+      />
+
+      <div className="relative flex flex-col gap-4 px-4 py-3 md:grid md:grid-cols-[1fr_auto] md:items-center md:gap-3 md:px-6 lg:px-8 xl:grid-cols-[1fr_auto_1fr] xl:px-10 2xl:px-12">
+        <div className="flex min-w-0 items-start justify-between gap-3 md:contents">
+          <div className="flex min-w-0 flex-1 items-center gap-3 md:col-start-1 md:row-start-1">
+            <SidebarTrigger className="shrink-0 touch-hitbox" />
+            <Separator orientation="vertical" className="h-25 shrink-0" />
+            <div className="flex min-w-0 flex-col">
+              <Link
+                href="/"
+                className="flex items-center gap-1.5 truncate touch-hitbox text-sm font-semibold uppercase tracking-[0.2em] text-muted-foreground transition-colors md:text-base lg:text-lg xl:text-xl 2xl:text-2xl hover:text-primary">
+                <SparklesIcon className="size-3 text-primary md:size-3.5" />
+                TeacherBuddy
+              </Link>
+              <div className="flex min-w-0 items-center gap-2">
+                <h1 className="truncate text-lg font-bold tracking-tight text-primary md:text-xl lg:text-2xl xl:text-3xl 2xl:text-4xl">
+                  {meta.title}
+                </h1>
+                <PageInfoDialog
+                  currentPath={info.currentPath}
+                  pages={info.pages}
+                />
+              </div>
+              {meta.description ? (
+                <p className="line-clamp-2 text-xs text-muted-foreground md:text-sm lg:text-sm xl:text-base 2xl:text-lg">
+                  {meta.description}
+                </p>
+              ) : null}
             </div>
-            {meta.description ? (
-              <p className="line-clamp-2 text-xs text-muted-foreground md:text-sm lg:text-sm xl:text-base 2xl:text-lg">
-                {meta.description}
-              </p>
-            ) : null}
           </div>
-        </div>
 
-        <div className="shrink-0 self-center md:col-start-2 md:row-start-1 md:justify-self-end xl:col-start-3">
-          <ThemeToggle />
+          <div className="shrink-0 self-center md:col-start-2 md:row-start-1 md:justify-self-end xl:col-start-3">
+            <ThemeToggle />
+          </div>
         </div>
-      </div>
 
-      <div className="flex min-w-0 justify-center md:col-span-2 md:row-start-2 xl:col-span-1 xl:col-start-2 xl:row-start-1">
-        <QuizTimerCard />
+        <div className="flex min-w-0 justify-center md:col-span-2 md:row-start-2 xl:col-span-1 xl:col-start-2 xl:row-start-1">
+          <QuizTimerCard />
+        </div>
       </div>
     </header>
   );
diff --git a/components/loading/generator-card-skeleton.tsx b/components/loading/generator-card-skeleton.tsx
index e0c74c8..e7c64a0 100644
--- a/components/loading/generator-card-skeleton.tsx
+++ b/components/loading/generator-card-skeleton.tsx
@@ -7,7 +7,8 @@ import { Skeleton } from "@/components/ui/skeleton"
  */
 export default function GeneratorCardSkeleton() {
   return (
-    <Card className="lg:py-6 xl:py-8 lg:gap-6 xl:gap-8">
+    <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-2)', opacity: 0.6 }} />
       <CardHeader className="lg:px-6 xl:px-8">
         <CardTitle className="flex items-center gap-2 lg:text-lg">
           <Skeleton className="h-4 w-36" />
diff --git a/components/loading/quiz-editor-skeleton.tsx b/components/loading/quiz-editor-skeleton.tsx
index de3ba61..bbe54d7 100644
--- a/components/loading/quiz-editor-skeleton.tsx
+++ b/components/loading/quiz-editor-skeleton.tsx
@@ -3,7 +3,8 @@ import { Skeleton } from "@/components/ui/skeleton"
 
 function PlaceholderCard({ titleWidth }: { titleWidth: string }) {
   return (
-    <Card className="lg:py-6 xl:py-8 lg:gap-6 xl:gap-8">
+    <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}`} />
@@ -33,7 +34,8 @@ export default function QuizEditorSkeleton() {
         <PlaceholderCard titleWidth="w-32" />
         <PlaceholderCard titleWidth="w-40" />
       </div>
-      <Card className="lg:py-6 xl:py-8 lg:gap-6 xl:gap-8">
+      <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 w-28" />
diff --git a/components/loading/quiz-play-card-skeleton.tsx b/components/loading/quiz-play-card-skeleton.tsx
index 787fc2f..f22b911 100644
--- a/components/loading/quiz-play-card-skeleton.tsx
+++ b/components/loading/quiz-play-card-skeleton.tsx
@@ -7,7 +7,8 @@ import { Skeleton } from "@/components/ui/skeleton"
  */
 export default function QuizPlayCardSkeleton() {
   return (
-    <Card className="lg:py-6 xl:py-8 lg:gap-6 xl:gap-8">
+    <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-4)', opacity: 0.6 }} />
       <CardHeader className="lg:px-6 xl:px-8">
         <CardTitle className="lg:text-lg">
           <Skeleton className="h-4 w-32" />
diff --git a/components/loading/student-form-skeleton.tsx b/components/loading/student-form-skeleton.tsx
index f634911..2eadb90 100644
--- a/components/loading/student-form-skeleton.tsx
+++ b/components/loading/student-form-skeleton.tsx
@@ -7,7 +7,8 @@ import { Skeleton } from "@/components/ui/skeleton"
  */
 export default function StudentFormSkeleton() {
   return (
-    <Card className="lg:py-6 xl:py-8 lg:gap-6 xl:gap-8">
+    <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-1)', opacity: 0.6 }} />
       <CardHeader className="lg:px-6 xl:px-8">
         <CardTitle className="lg:text-lg">
           <Skeleton className="h-4 w-32" />
diff --git a/components/loading/student-table-skeleton.tsx b/components/loading/student-table-skeleton.tsx
index 41508df..2e63e3f 100644
--- a/components/loading/student-table-skeleton.tsx
+++ b/components/loading/student-table-skeleton.tsx
@@ -7,7 +7,8 @@ import { Skeleton } from "@/components/ui/skeleton"
  */
 export default function StudentTableSkeleton() {
   return (
-    <Card className="lg:py-6 xl:py-8 lg:gap-6 xl:gap-8">
+    <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-1)', opacity: 0.6 }} />
       <CardHeader className="lg: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-2">
diff --git a/components/navigation/sidebar-nav.tsx b/components/navigation/sidebar-nav.tsx
index abe6145..212a5ba 100644
--- a/components/navigation/sidebar-nav.tsx
+++ b/components/navigation/sidebar-nav.tsx
@@ -22,46 +22,53 @@ const navItems = [
     title: 'Dashboard',
     href: '/',
     icon: LayoutGridIcon,
+    accentColor: 'var(--primary)',
   },
   {
     title: 'Students',
     href: '/students',
     icon: UsersIcon,
+    accentColor: 'var(--chart-1)',
   },
   {
     title: 'Generator',
     href: '/generator',
     icon: ShuffleIcon,
+    accentColor: 'var(--chart-2)',
   },
   {
     title: 'Breakout Rooms',
     href: '/breakout-rooms',
     icon: UsersIcon,
+    accentColor: 'var(--chart-4)',
   },
   {
     title: 'Quizzes',
     href: '/quizzes',
     icon: ClipboardListIcon,
+    accentColor: 'var(--chart-3)',
   },
   {
     title: 'Projects',
     href: '/projects',
     icon: FolderKanbanIcon,
+    accentColor: 'var(--chart-5)',
   },
   {
     title: 'Play',
     href: '/play',
     icon: PlayCircleIcon,
+    accentColor: 'var(--chart-4)',
   },
 ];
 
 /**
- * Renders primary app navigation links with active-route highlighting.
- * Pass the current pathname so the matching item is marked as active.
+ * Renders primary app navigation links with phase-colored active indicators.
+ * Each route has a distinct accent color matching the design-6 phase system.
  */
 export function SidebarNav({ pathname }: { pathname: string }) {
   return (
-    <SidebarMenu className="gap-2 px-2 ">
+    <SidebarMenu className="gap-1.5 px-2">
       {navItems.map((item) => {
         const Icon = item.icon;
         const isActive = pathname === item.href;
@@ -71,8 +78,19 @@ export function SidebarNav({ pathname }: { pathname: string }) {
               render={<Link href={item.href} />}
               isActive={isActive}
               title={item.title}
-              className="[&>span]:group-data-[collapsible=icon]:hidden group-data-[collapsible=icon]:justify-center [&>svg]:group-data-[collapsible=icon]:size-5">
-              <Icon />
+              className="relative overflow-hidden [&>span]:group-data-[collapsible=icon]:hidden group-data-[collapsible=icon]:justify-center [&>svg]:group-data-[collapsible=icon]:size-5"
+              style={
+                isActive
+                  ? {
+                      borderLeft: `3px solid ${item.accentColor}`,
+                      backgroundColor: `color-mix(in oklch, ${item.accentColor} 8%, var(--sidebar-background, var(--background)))`,
+                      color: item.accentColor,
+                    }
+                  : undefined
+              }>
+              <Icon
+                style={isActive ? { color: item.accentColor } : undefined}
+              />
               <span>{item.title}</span>
             </SidebarMenuButton>
           </SidebarMenuItem>
diff --git a/components/play/quiz-play-card.tsx b/components/play/quiz-play-card.tsx
index a1644bf..1f64346 100644
--- a/components/play/quiz-play-card.tsx
+++ b/components/play/quiz-play-card.tsx
@@ -70,9 +70,13 @@ export default function QuizPlayCard({
   }
 
   return (
-    <Card className="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"
+        style={{ backgroundColor: 'var(--chart-4)', opacity: 0.6 }}
+      />
       <CardHeader className="px-6 xl:px-8">
-        <CardTitle className="text-xl">Quiz Play Mode</CardTitle>
+        <CardTitle className="text-xl font-bold tracking-tight">Quiz Play Mode</CardTitle>
         <CardDescription className="text-base/relaxed">
           Draw a random student and question. Reveal answers when ready.
         </CardDescription>
@@ -87,7 +91,7 @@ export default function QuizPlayCard({
         />
 
         <div className="grid gap-4 lg:grid-cols-2">
-          <div className="rounded-lg border border-dashed border-border/60 bg-background/60 px-4 py-6 min-h-[140px] flex flex-col justify-center">
+          <div className="rounded-lg border border-dashed border-border/60 bg-background/60 px-4 py-6 min-h-[100px] md:min-h-[140px] flex flex-col justify-center">
             <p className="text-base/relaxed font-semibold uppercase tracking-[0.2em] text-muted-foreground">
               Selected Student
             </p>
@@ -100,7 +104,7 @@ export default function QuizPlayCard({
               {availableStudentIds.length} remaining
             </Badge>
           </div>
-          <div className="rounded-lg border border-dashed border-border/60 bg-background/60 px-4 py-6 min-h-[140px] flex flex-col justify-center">
+          <div className="rounded-lg border border-dashed border-border/60 bg-background/60 px-4 py-6 min-h-[100px] md:min-h-[140px] flex flex-col justify-center">
             <p className="text-base/relaxed font-semibold uppercase tracking-[0.2em] text-muted-foreground">
               Question
             </p>
diff --git a/components/play/quiz-timer-card.tsx b/components/play/quiz-timer-card.tsx
index 77d123c..c8ce44b 100644
--- a/components/play/quiz-timer-card.tsx
+++ b/components/play/quiz-timer-card.tsx
@@ -6,31 +6,82 @@ import { useCallback, useEffect, useId, useRef, useState } from 'react';
 
 import {
   ChevronDownIcon,
+  HeartIcon,
+  MinusIcon,
   PauseIcon,
   PlayIcon,
+  PlusIcon,
   RotateCcwIcon,
+  Volume2Icon,
 } from 'lucide-react';
-
 import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from '@/components/ui/popover';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
 import { useTimer } from '@/hooks/use-timer';
+import { loadTimerFavorites, saveTimerFavorites } from '@/lib/storage';
 
 const TICKING_SRC = '/sounds/alarm-clock-ticking.mp3';
 const ALARM_SRC = '/sounds/alarm.mp3';
 const DEFAULT_VOLUME = 0.05;
 
+/** All available presets (label + total seconds). */
+const PRESETS = [
+  { label: '30s', totalSeconds: 30 },
+  { label: '1m', totalSeconds: 60 },
+  { label: '2m', totalSeconds: 120 },
+  { label: '3m', totalSeconds: 180 },
+  { label: '5m', totalSeconds: 300 },
+  { label: '10m', totalSeconds: 600 },
+  { label: '15m', totalSeconds: 900 },
+  { label: '20m', totalSeconds: 1200 },
+  { label: '25m', totalSeconds: 1500 },
+  { label: '30m', totalSeconds: 1800 },
+  { label: '45m', totalSeconds: 2700 },
+  { label: '1h', totalSeconds: 3600 },
+] as const;
+
+/**
+ * Converts total seconds into { hours, minutes, seconds } string values
+ * suitable for the useTimer hook setters.
+ */
+function secondsToHMS(total: number) {
+  const h = Math.floor(total / 3600);
+  const m = Math.floor((total % 3600) / 60);
+  const s = total % 60;
+  return { hours: String(h), minutes: String(m), seconds: String(s) };
+}
+
+/** Formats seconds as a human-readable label like "5m" or "1h 30m". */
+function formatPresetLabel(totalSeconds: number): string {
+  const h = Math.floor(totalSeconds / 3600);
+  const m = Math.floor((totalSeconds % 3600) / 60);
+  const s = totalSeconds % 60;
+  const parts: string[] = [];
+  if (h > 0) parts.push(`${h}h`);
+  if (m > 0) parts.push(`${m}m`);
+  if (s > 0) parts.push(`${s}s`);
+  return parts.join(' ') || '0s';
+}
+
 /**
  * Renders the classroom timer controls used in the app header.
- * Supports time configuration, start/pause/reset actions, and alert sounds.
+ * Supports preset favorites, editable time fields, stepper-based adjustment,
+ * volume control, and start/pause/reset actions with alert sounds.
  */
 export default function QuizTimerCard() {
   const timerId = useId();
   const [volume, setVolume] = useState(DEFAULT_VOLUME);
+  const [favorites, setFavorites] = useState<number[]>([60, 300, 900]);
   const tickingRef = useRef<HTMLAudioElement | null>(null);
   const alarmRef = useRef<HTMLAudioElement | null>(null);
   const prevDisplaySecondsRef = useRef<number | null>(null);
@@ -52,6 +103,17 @@ export default function QuizTimerCard() {
     hasTimeConfigured,
   } = useTimer();
 
+  /** Current configured total in seconds (from the string inputs). */
+  const configuredTotal =
+    (Number.parseInt(hours, 10) || 0) * 3600 +
+    (Number.parseInt(minutes, 10) || 0) * 60 +
+    (Number.parseInt(seconds, 10) || 0);
+
+  // Load favorites from localStorage after mount to avoid hydration mismatch; defer setState so it is not synchronous in the effect.
+  useEffect(() => {
+    queueMicrotask(() => setFavorites(loadTimerFavorites()));
+  }, []);
+
   // Create audio elements on the client only
   useEffect(() => {
     if (typeof window === 'undefined') return;
@@ -76,7 +138,6 @@ export default function QuizTimerCard() {
 
     const prevDisplaySeconds = prevDisplaySecondsRef.current;
 
-    // Stop both sounds when paused or reset (displaySeconds no longer 0 = reset)
     if (!isRunning) {
       ticking.pause();
       ticking.currentTime = 0;
@@ -86,7 +147,6 @@ export default function QuizTimerCard() {
       alarm.currentTime = 0;
     }
 
-    // Ticking: play while alerting and running
     if (isAlerting && isRunning) {
       ticking.loop = true;
       ticking.play().catch(() => {});
@@ -95,7 +155,6 @@ export default function QuizTimerCard() {
       ticking.currentTime = 0;
     }
 
-    // Alarm: play once when transitioning from >0 to 0
     if (
       displaySeconds === 0 &&
       prevDisplaySeconds !== null &&
@@ -114,6 +173,61 @@ export default function QuizTimerCard() {
     [],
   );
 
+  /** Apply a preset by setting all three time fields at once. */
+  const applyPreset = useCallback(
+    (totalSeconds: number) => {
+      const { hours: h, minutes: m, seconds: s } = secondsToHMS(totalSeconds);
+      setHours(h);
+      setMinutes(m);
+      setSeconds(s);
+    },
+    [setHours, setMinutes, setSeconds],
+  );
+
+  /** Add or subtract seconds from the current configured time. */
+  const adjustTime = useCallback(
+    (delta: number) => {
+      const next = Math.max(0, Math.min(configuredTotal + delta, 359999));
+      const { hours: h, minutes: m, seconds: s } = secondsToHMS(next);
+      setHours(h);
+      setMinutes(m);
+      setSeconds(s);
+    },
+    [configuredTotal, setHours, setMinutes, setSeconds],
+  );
+
+  /** Toggle a value into/out of favorites. Max 3; oldest bumped when full. */
+  const toggleFavorite = useCallback(
+    (totalSeconds: number) => {
+      setFavorites((prev) => {
+        let next: number[];
+        if (prev.includes(totalSeconds)) {
+          // Remove it
+          next = prev.filter((v) => v !== totalSeconds);
+        } else if (prev.length < 3) {
+          // Room available — append
+          next = [...prev, totalSeconds];
+        } else {
+          // Full — bump the oldest (first) and append new one
+          next = [...prev.slice(1), totalSeconds];
+        }
+        saveTimerFavorites(next);
+        return next;
+      });
+    },
+    [],
+  );
+
+  /** Auto-select input text on focus for easy overwriting. */
+  const handleInputFocus = useCallback((e: React.FocusEvent<HTMLInputElement>) => {
+    e.target.select();
+  }, []);
+
+  /** Find the matching preset value string for the Select, or empty for custom. */
+  const activePresetValue = PRESETS.find(
+    (p) => p.totalSeconds === configuredTotal,
+  )?.totalSeconds.toString() ?? '';
+
   return (
     <div className="flex min-w-0 flex-wrap items-center justify-center gap-2 md:flex-nowrap md:justify-start md:gap-3 lg:gap-4">
       <Popover>
@@ -129,83 +243,214 @@ export default function QuizTimerCard() {
         </PopoverTrigger>
         <PopoverContent
           align="center"
-          className="w-[min(92vw,24rem)] p-4 md:w-96 lg:w-104 xl:w-md 2xl:w-120">
-          <div>
-            <p className="px-0 text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground md:text-sm">
-              Set timer
+          className="w-[min(92vw,22rem)] p-4 md:w-88">
+
+          {/* Editable time fields */}
+          <p className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">
+            Set time
+          </p>
+          <div className="mt-2 flex items-center justify-center gap-1">
+            <div className="flex flex-col items-center gap-1">
+              <label
+                htmlFor={`${timerId}-h`}
+                className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/70">
+                Hr
+              </label>
+              <input
+                id={`${timerId}-h`}
+                type="text"
+                inputMode="numeric"
+                value={hours}
+                onChange={(e) => {
+                  const v = e.target.value.replace(/\D/g, '').slice(0, 2);
+                  setHours(v || '0');
+                }}
+                onFocus={handleInputFocus}
+                className="h-11 w-12 rounded-lg border border-border/60 bg-background/80 text-center text-lg font-semibold tabular-nums text-foreground shadow-inner outline-none transition-colors focus:border-primary/60 focus:ring-1 focus:ring-primary/30"
+              />
+            </div>
+            <span className="mt-4 text-lg font-bold text-muted-foreground/50">:</span>
+            <div className="flex flex-col items-center gap-1">
+              <label
+                htmlFor={`${timerId}-m`}
+                className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/70">
+                Min
+              </label>
+              <input
+                id={`${timerId}-m`}
+                type="text"
+                inputMode="numeric"
+                value={minutes}
+                onChange={(e) => {
+                  const v = e.target.value.replace(/\D/g, '').slice(0, 2);
+                  const num = Number.parseInt(v || '0', 10);
+                  setMinutes(String(Math.min(num, 59)));
+                }}
+                onFocus={handleInputFocus}
+                className="h-11 w-12 rounded-lg border border-border/60 bg-background/80 text-center text-lg font-semibold tabular-nums text-foreground shadow-inner outline-none transition-colors focus:border-primary/60 focus:ring-1 focus:ring-primary/30"
+              />
+            </div>
+            <span className="mt-4 text-lg font-bold text-muted-foreground/50">:</span>
+            <div className="flex flex-col items-center gap-1">
+              <label
+                htmlFor={`${timerId}-s`}
+                className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/70">
+                Sec
+              </label>
+              <input
+                id={`${timerId}-s`}
+                type="text"
+                inputMode="numeric"
+                value={seconds}
+                onChange={(e) => {
+                  const v = e.target.value.replace(/\D/g, '').slice(0, 2);
+                  const num = Number.parseInt(v || '0', 10);
+                  setSeconds(String(Math.min(num, 59)));
+                }}
+                onFocus={handleInputFocus}
+                className="h-11 w-12 rounded-lg border border-border/60 bg-background/80 text-center text-lg font-semibold tabular-nums text-foreground shadow-inner outline-none transition-colors focus:border-primary/60 focus:ring-1 focus:ring-primary/30"
+              />
+            </div>
+          </div>
+
+          {/* Fine-tune steppers */}
+          <div className="mt-3 flex items-center justify-center gap-1.5">
+            <Button
+              type="button"
+              size="icon"
+              variant="outline"
+              className="size-8 shrink-0 rounded-md touch-hitbox"
+              onClick={() => adjustTime(-60)}
+              disabled={configuredTotal < 60}
+              aria-label="Subtract 1 minute">
+              <MinusIcon className="size-3.5" />
+            </Button>
+            <button
+              type="button"
+              onClick={() => adjustTime(-15)}
+              disabled={configuredTotal < 15}
+              className="flex h-8 items-center justify-center rounded-md bg-muted/40 px-2 text-muted-foreground transition-colors hover:bg-accent/10 hover:text-foreground active:scale-95 disabled:opacity-40 touch-hitbox"
+              aria-label="Subtract 15 seconds">
+              <span className="text-xs font-bold">−15s</span>
+            </button>
+            <button
+              type="button"
+              onClick={() => adjustTime(15)}
+              disabled={configuredTotal >= 359999}
+              className="flex h-8 items-center justify-center rounded-md bg-muted/40 px-2 text-muted-foreground transition-colors hover:bg-accent/10 hover:text-foreground active:scale-95 disabled:opacity-40 touch-hitbox"
+              aria-label="Add 15 seconds">
+              <span className="text-xs font-bold">+15s</span>
+            </button>
+            <Button
+              type="button"
+              size="icon"
+              variant="outline"
+              className="size-8 shrink-0 rounded-md touch-hitbox"
+              onClick={() => adjustTime(60)}
+              disabled={configuredTotal >= 359999}
+              aria-label="Add 1 minute">
+              <PlusIcon className="size-3.5" />
+            </Button>
+          </div>
+
+          {/* Presets: Select + Favorites */}
+          <div className="mt-4">
+            <p className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">
+              Presets
             </p>
-            <div className="mt-3 grid gap-4 md:grid-cols-3">
-              <div className="flex flex-col gap-2">
-                <label
-                  htmlFor={`${timerId}-hours`}
-                  className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground md:text-sm">
-                  Hours
-                </label>
-                <Input
-                  id={`${timerId}-hours`}
-                  type="number"
-                  inputMode="numeric"
-                  min={0}
-                  max={99}
-                  value={hours}
-                  onChange={(event) => setHours(event.target.value)}
-                  placeholder="0"
-                  className="h-9 text-base md:text-lg"
-                />
-              </div>
-              <div className="flex flex-col gap-2">
-                <label
-                  htmlFor={`${timerId}-minutes`}
-                  className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground md:text-sm">
-                  Minutes
-                </label>
-                <Input
-                  id={`${timerId}-minutes`}
-                  type="number"
-                  inputMode="numeric"
-                  min={0}
-                  max={59}
-                  value={minutes}
-                  onChange={(event) => setMinutes(event.target.value)}
-                  placeholder="0"
-                  className="h-9 text-base md:text-lg"
-                />
-              </div>
-              <div className="flex flex-col gap-2">
-                <label
-                  htmlFor={`${timerId}-seconds`}
-                  className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground md:text-sm">
-                  Seconds
-                </label>
-                <Input
-                  id={`${timerId}-seconds`}
-                  type="number"
-                  inputMode="numeric"
-                  min={0}
-                  max={59}
-                  value={seconds}
-                  onChange={(event) => setSeconds(event.target.value)}
-                  placeholder="0"
-                  className="h-9 text-base md:text-lg"
+            <div className="mt-2 flex items-center gap-2">
+              {/* 3 favorite preset buttons */}
+              {favorites.map((fav) => (
+                <button
+                  key={fav}
+                  type="button"
+                  onClick={() => applyPreset(fav)}
+                  className={cn(
+                    'group relative h-9 flex-1 rounded-md text-sm font-semibold transition-all active:scale-[0.97] touch-hitbox',
+                    configuredTotal === fav
+                      ? 'bg-primary text-primary-foreground shadow-sm'
+                      : 'bg-muted/50 text-muted-foreground hover:bg-accent/10 hover:text-foreground',
+                  )}>
+                  {formatPresetLabel(fav)}
+                </button>
+              ))}
+            </div>
+
+            {/* Preset selector dropdown + favorite toggle */}
+            <div className="mt-2 flex items-center gap-2">
+              <Select
+                value={activePresetValue}
+                onValueChange={(v) => applyPreset(Number(v))}>
+                <SelectTrigger className="h-8 flex-1 text-sm">
+                  <SelectValue>
+                    {activePresetValue ? formatPresetLabel(Number(activePresetValue)) : 'Custom time'}
+                  </SelectValue>
+                </SelectTrigger>
+                <SelectContent>
+                  {PRESETS.map((preset) => (
+                    <SelectItem
+                      key={preset.totalSeconds}
+                      value={preset.totalSeconds.toString()}
+                      className="text-sm">
+                      <span className="flex w-full items-center justify-between gap-3">
+                        <span>{preset.label}</span>
+                        {favorites.includes(preset.totalSeconds) ? (
+                          <HeartIcon className="size-3 fill-primary text-primary" />
+                        ) : null}
+                      </span>
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <button
+                type="button"
+                onClick={() => {
+                  if (configuredTotal > 0) toggleFavorite(configuredTotal);
+                }}
+                disabled={configuredTotal <= 0}
+                className={cn(
+                  'flex size-8 shrink-0 items-center justify-center rounded-md transition-colors touch-hitbox',
+                  favorites.includes(configuredTotal)
+                    ? 'bg-primary/10 text-primary'
+                    : 'bg-muted/40 text-muted-foreground hover:bg-accent/10 hover:text-foreground',
+                  'disabled:opacity-40',
+                )}
+                title={
+                  favorites.includes(configuredTotal)
+                    ? 'Remove from favorites'
+                    : 'Add current time to favorites'
+                }
+                aria-label="Toggle favorite">
+                <HeartIcon
+                  className={cn(
+                    'size-3.5',
+                    favorites.includes(configuredTotal) && 'fill-primary',
+                  )}
                 />
-              </div>
+              </button>
             </div>
           </div>
+
+          {/* Volume */}
           <div className="mt-4">
-            <p className="px-0 text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground md:text-sm">
-              Volume
-            </p>
-            <div className="mt-3 flex items-center gap-3">
+            <div className="flex items-center gap-2">
+              <Volume2Icon className="size-3.5 text-muted-foreground" />
+              <p className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">
+                Volume
+              </p>
+            </div>
+            <div className="mt-2 flex items-center gap-3">
               <input
                 type="range"
                 min={0}
                 max={100}
                 value={Math.round(volume * 100)}
                 onChange={handleVolumeChange}
-                className="h-2 flex-1 cursor-pointer appearance-none rounded-full bg-muted accent-foreground"
+                style={{ '--slider-pct': `${Math.round(volume * 100)}%` } as React.CSSProperties}
+                className="timer-volume-slider touch-hitbox h-2 flex-1 cursor-pointer appearance-none rounded-full bg-muted"
                 aria-label="Timer volume"
               />
-              <span className="w-8 text-right text-sm tabular-nums text-muted-foreground md:text-base">
+              <span className="w-8 text-right text-sm tabular-nums text-muted-foreground">
                 {Math.round(volume * 100)}%
               </span>
             </div>
@@ -218,7 +463,7 @@ export default function QuizTimerCard() {
         onClick={start}
         disabled={!hasTimeConfigured || isRunning}
         aria-label="Start timer">
-        <PlayIcon className="size-5" />
+        <PlayIcon className="size-5 text-ctp-latte-green dark:text-ctp-mocha-green" />
       </Button>
       <Button
         size="icon-lg"
@@ -226,14 +471,14 @@ export default function QuizTimerCard() {
         onClick={pause}
         disabled={!isRunning}
         aria-label="Pause timer">
-        <PauseIcon className="size-5" />
+        <PauseIcon className="size-5 text-ctp-latte-peach dark:text-ctp-mocha-peach" />
       </Button>
       <Button
         size="icon-lg"
         variant="ghost"
         onClick={reset}
         aria-label="Reset timer">
-        <RotateCcwIcon className="size-5" />
+        <RotateCcwIcon className="size-5 text-ctp-latte-red dark:text-ctp-mocha-red" />
       </Button>
     </div>
   );
diff --git a/components/privacy-notice.tsx b/components/privacy-notice.tsx
index a317462..092101a 100644
--- a/components/privacy-notice.tsx
+++ b/components/privacy-notice.tsx
@@ -17,23 +17,19 @@ import { useEffect, useState } from 'react';
  */
 export default function PrivacyNotice() {
   const [open, setOpen] = useState(false);
-  const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
-    queueMicrotask(() => setMounted(true));
+    if (!isPrivacyNoticeAcknowledged()) {
+      queueMicrotask(() => setOpen(true));
+    }
   }, []);
 
-  useEffect(() => {
-    if (!mounted) return;
-    queueMicrotask(() => setOpen(!isPrivacyNoticeAcknowledged()));
-  }, [mounted]);
-
   function handleUnderstood() {
     setPrivacyNoticeAcknowledged();
     setOpen(false);
   }
 
-  if (!mounted || !open) return null;
+  if (!open) return null;
 
   return (
     <div
diff --git a/components/projects/project-list-builder.tsx b/components/projects/project-list-builder.tsx
index c6fd814..d8b5165 100644
--- a/components/projects/project-list-builder.tsx
+++ b/components/projects/project-list-builder.tsx
@@ -6,6 +6,9 @@ import { useMemo, useState } from 'react';
 
 import Link from 'next/link';
 
+import { UsersIcon } from 'lucide-react';
+import { toast } from 'sonner';
+
 import { Badge } from '@/components/ui/badge';
 import { Button, buttonVariants } from '@/components/ui/button';
 import {
@@ -32,8 +35,16 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
 import { Textarea } from '@/components/ui/textarea';
 import { useAppStore } from '@/context/app-store';
+import { useIsMobile } from '@/hooks/use-mobile';
 
 const DEFAULT_GROUP_SIZE = '3';
 
@@ -45,6 +56,7 @@ type GroupMode = 'none' | 'grouped';
  */
 export default function ProjectListBuilder() {
   const { state, actions } = useAppStore();
+  const isMobile = useIsMobile();
   const [selectedIds, setSelectedIds] = useState<string[]>([]);
   const [name, setName] = useState('');
   const [projectType, setProjectType] = useState('');
@@ -54,6 +66,7 @@ export default function ProjectListBuilder() {
   const [includeExcluded, setIncludeExcluded] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [notice, setNotice] = useState<string | null>(null);
+  const [studentSheetOpen, setStudentSheetOpen] = useState(false);
 
   const students = useMemo(
     () =>
@@ -94,11 +107,15 @@ export default function ProjectListBuilder() {
     const trimmedName = name.trim();
     const trimmedType = projectType.trim();
     if (!trimmedName || !trimmedType) {
-      setError('Enter both a project name and project type.');
+      const message = 'Enter both a project name and project type.';
+      setError(message);
+      toast.error(message);
       return;
     }
     if (!selectedIds.length) {
-      setError('Select at least one student to continue.');
+      const message = 'Select at least one student to continue.';
+      setError(message);
+      toast.error(message);
       return;
     }
 
@@ -107,7 +124,9 @@ export default function ProjectListBuilder() {
       .map((student) => student.id);
 
     if (!orderedSelectedIds.length) {
-      setError('Select at least one student to continue.');
+      const message = 'Select at least one student to continue.';
+      setError(message);
+      toast.error(message);
       return;
     }
 
@@ -115,7 +134,9 @@ export default function ProjectListBuilder() {
     if (groupMode === 'grouped') {
       const size = Number.parseInt(groupSize, 10);
       if (!size || size < 2) {
-        setError('Enter a group size of 2 or more.');
+        const message = 'Enter a group size of 2 or more.';
+        setError(message);
+        toast.error(message);
         return;
       }
       for (let index = 0; index < orderedSelectedIds.length; index += size) {
@@ -137,6 +158,11 @@ export default function ProjectListBuilder() {
     setGroupMode('none');
     setGroupSize(DEFAULT_GROUP_SIZE);
     setError(null);
+    const groupLabel =
+      groups.length > 0
+        ? `with ${groups.length} group${groups.length === 1 ? '' : 's'}`
+        : '';
+    toast.success(`Project list saved ${groupLabel}`.trim() + '.');
     setNotice('Project list saved.');
   };
 
@@ -145,9 +171,13 @@ export default function ProjectListBuilder() {
   }
 
   return (
-    <Card className="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"
+        style={{ backgroundColor: 'var(--chart-5)', opacity: 0.6 }}
+      />
       <CardHeader className="px-6 xl:px-8">
-        <CardTitle className="text-xl">Create a project list</CardTitle>
+        <CardTitle className="text-xl font-bold tracking-tight">Create a project list</CardTitle>
         <CardDescription className="text-base/relaxed">
           Choose students from your roster and save them as a project-ready list
           or group set.
@@ -221,20 +251,22 @@ export default function ProjectListBuilder() {
               </FieldLabel>
               <FieldContent>
                 <Select
-                  defaultValue="Individual list"
+                  defaultValue="none"
                   value={groupMode}
                   onValueChange={(value) => setGroupMode(value as GroupMode)}>
                   <SelectTrigger className="w-full text-base/relaxed h-9 placeholder:text-muted-foreground/70 placeholder:text-base/relaxed">
-                    <SelectValue placeholder="Choose a grouping" />
+                    <SelectValue>
+                      {groupMode === 'grouped' ? 'Create groups' : 'Individual list'}
+                    </SelectValue>
                   </SelectTrigger>
                   <SelectContent>
                     <SelectItem
-                      value="Individual list"
+                      value="none"
                       className="text-base/relaxed">
                       Individual list
                     </SelectItem>
                     <SelectItem
-                      value="Create groups"
+                      value="grouped"
                       className="text-base/relaxed">
                       Create groups
                     </SelectItem>
@@ -268,85 +300,190 @@ export default function ProjectListBuilder() {
                 </FieldContent>
               </Field>
             ) : null}
-          </div>
-          <div className="flex flex-col gap-3 rounded-lg border border-dashed border-border/70 p-4">
-            <div className="flex flex-col gap-1">
-              <p className="text-lg/relaxed font-semibold">Selected students</p>
-              <p className="text-base/relaxed text-muted-foreground">
-                {selectedCount}
-                {selectedCount === 1 ? ' student' : ' students'} selected.
-              </p>
-            </div>
-            <div className="flex flex-wrap gap-2">
+
+            {/* Mobile: button to open student selection sheet */}
+            {isMobile ? (
               <Button
                 type="button"
-                size="sm"
                 variant="secondary"
-                onClick={handleSelectAll}
-                disabled={!visibleStudents.length}>
-                Select all
+                className="h-11 font-semibold text-base"
+                onClick={() => setStudentSheetOpen(true)}>
+                <UsersIcon className="size-4" />
+                Select Students ({selectedCount})
               </Button>
-              <Button
-                type="button"
-                size="sm"
-                variant="ghost"
-                onClick={handleClearSelection}
-                disabled={!selectedIds.length}>
-                Clear
-              </Button>
-              <Link
-                href="/students"
-                className={buttonVariants({ variant: 'ghost', size: 'sm' })}>
-                Add students
-              </Link>
-            </div>
-            <FieldSeparator>Student roster</FieldSeparator>
-            <div className="flex items-center gap-2">
-              <Checkbox
-                id="include-excluded"
-                checked={includeExcluded}
-                onCheckedChange={(checked) => {
-                  setIncludeExcluded(Boolean(checked));
-                }}
-                className="touch-hitbox cursor-pointer border-accent/25"
-              />
-              <label
-                htmlFor="include-excluded"
-                className="text-base/relaxed text-muted-foreground">
-                Include absent students
-              </label>
-            </div>
-            <div className="max-h-64 overflow-y-auto pr-2">
-              <div className="flex flex-col gap-2">
-                {visibleStudents.length ? (
-                  visibleStudents.map((student) => (
-                    <label
-                      key={student.id}
-                      className="flex items-center gap-2 rounded-md border border-border/60 px-3 py-2 text-base/relaxed">
-                      <Checkbox
-                        checked={selectedIds.includes(student.id)}
-                        onCheckedChange={() => toggleSelection(student.id)}
-                        className="touch-hitbox cursor-pointer border-accent/25"
-                      />
-                      <span className="font-medium">
-                        {formatStudentName(student.name)}
-                      </span>
-                      {student.status === 'excluded' ? (
-                        <Badge variant="outline" className="text-xs">
-                          Absent
-                        </Badge>
-                      ) : null}
-                    </label>
-                  ))
-                ) : (
-                  <p className="text-base/relaxed text-muted-foreground">
-                    Add students to your roster to build project lists.
-                  </p>
-                )}
+            ) : null}
+          </div>
+
+          {/* Desktop: inline student selection panel */}
+          {!isMobile ? (
+            <div className="flex flex-col gap-3 rounded-lg border border-dashed border-border/70 p-4">
+              <div className="flex flex-col gap-1">
+                <p className="text-lg/relaxed font-semibold">Selected students</p>
+                <p className="text-base/relaxed text-muted-foreground">
+                  {selectedCount}
+                  {selectedCount === 1 ? ' student' : ' students'} selected.
+                </p>
+              </div>
+              <div className="flex flex-wrap gap-2">
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="secondary"
+                  onClick={handleSelectAll}
+                  disabled={!visibleStudents.length}>
+                  Select all
+                </Button>
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="ghost"
+                  onClick={handleClearSelection}
+                  disabled={!selectedIds.length}>
+                  Clear
+                </Button>
+                <Link
+                  href="/students"
+                  className={buttonVariants({ variant: 'ghost', size: 'sm' })}>
+                  Add students
+                </Link>
+              </div>
+              <FieldSeparator>Student roster</FieldSeparator>
+              <div className="flex items-center gap-2">
+                <Checkbox
+                  id="include-excluded"
+                  checked={includeExcluded}
+                  onCheckedChange={(checked) => {
+                    setIncludeExcluded(Boolean(checked));
+                  }}
+                  className="touch-hitbox cursor-pointer border-accent/25"
+                />
+                <label
+                  htmlFor="include-excluded"
+                  className="text-base/relaxed text-muted-foreground">
+                  Include absent students
+                </label>
+              </div>
+              <div className="max-h-64 overflow-y-auto pr-2">
+                <div className="flex flex-col gap-2">
+                  {visibleStudents.length ? (
+                    visibleStudents.map((student) => (
+                      <label
+                        key={student.id}
+                        className="flex items-center gap-2 rounded-md border border-border/60 px-3 py-2 text-base/relaxed">
+                        <Checkbox
+                          checked={selectedIds.includes(student.id)}
+                          onCheckedChange={() => toggleSelection(student.id)}
+                          className="touch-hitbox cursor-pointer border-accent/25"
+                        />
+                        <span className="font-medium">
+                          {formatStudentName(student.name)}
+                        </span>
+                        {student.status === 'excluded' ? (
+                          <Badge variant="outline" className="text-xs">
+                            Absent
+                          </Badge>
+                        ) : null}
+                      </label>
+                    ))
+                  ) : (
+                    <p className="text-base/relaxed text-muted-foreground">
+                      Add students to your roster to build project lists.
+                    </p>
+                  )}
+                </div>
               </div>
             </div>
-          </div>
+          ) : null}
         </div>
+
+        {/* Mobile: student selection bottom sheet */}
+        {isMobile ? (
+          <Sheet open={studentSheetOpen} onOpenChange={setStudentSheetOpen}>
+            <SheetContent side="bottom" className="max-h-[85dvh]">
+              <SheetHeader>
+                <SheetTitle>Select Students</SheetTitle>
+                <SheetDescription>
+                  {selectedCount}
+                  {selectedCount === 1 ? ' student' : ' students'} selected.
+                </SheetDescription>
+              </SheetHeader>
+              <div className="flex flex-col gap-3 px-6 pb-6 overflow-y-auto">
+                <div className="flex flex-wrap gap-2">
+                  <Button
+                    type="button"
+                    size="sm"
+                    variant="secondary"
+                    onClick={handleSelectAll}
+                    disabled={!visibleStudents.length}>
+                    Select all
+                  </Button>
+                  <Button
+                    type="button"
+                    size="sm"
+                    variant="ghost"
+                    onClick={handleClearSelection}
+                    disabled={!selectedIds.length}>
+                    Clear
+                  </Button>
+                  <Link
+                    href="/students"
+                    className={buttonVariants({ variant: 'ghost', size: 'sm' })}>
+                    Add students
+                  </Link>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Checkbox
+                    id="include-excluded-mobile"
+                    checked={includeExcluded}
+                    onCheckedChange={(checked) => {
+                      setIncludeExcluded(Boolean(checked));
+                    }}
+                    className="touch-hitbox cursor-pointer border-accent/25"
+                  />
+                  <label
+                    htmlFor="include-excluded-mobile"
+                    className="text-base/relaxed text-muted-foreground">
+                    Include absent students
+                  </label>
+                </div>
+                <div className="flex flex-col gap-2">
+                  {visibleStudents.length ? (
+                    visibleStudents.map((student) => (
+                      <label
+                        key={student.id}
+                        className="flex items-center gap-2 rounded-md border border-border/60 px-3 py-3 text-base/relaxed min-h-[48px]">
+                        <Checkbox
+                          checked={selectedIds.includes(student.id)}
+                          onCheckedChange={() => toggleSelection(student.id)}
+                          className="touch-hitbox cursor-pointer border-accent/25"
+                        />
+                        <span className="font-medium">
+                          {formatStudentName(student.name)}
+                        </span>
+                        {student.status === 'excluded' ? (
+                          <Badge variant="outline" className="text-xs">
+                            Absent
+                          </Badge>
+                        ) : null}
+                      </label>
+                    ))
+                  ) : (
+                    <p className="text-base/relaxed text-muted-foreground">
+                      Add students to your roster to build project lists.
+                    </p>
+                  )}
+                </div>
+                <Button
+                  type="button"
+                  className="h-11 font-semibold text-base mt-2"
+                  onClick={() => setStudentSheetOpen(false)}>
+                  Done ({selectedCount} selected)
+                </Button>
+              </div>
+            </SheetContent>
+          </Sheet>
+        ) : null}
+
         {error ? <FieldError>{error}</FieldError> : null}
         {notice ? (
           <p className="text-base/relaxed text-muted-foreground">{notice}</p>
diff --git a/components/projects/project-list-view.tsx b/components/projects/project-list-view.tsx
index d70fe3f..99b88be 100644
--- a/components/projects/project-list-view.tsx
+++ b/components/projects/project-list-view.tsx
@@ -7,6 +7,8 @@ import { useMemo, useState } from 'react';
 
 import { useTheme } from 'next-themes';
 
+import { UsersIcon } from 'lucide-react';
+
 import {
   AlertDialog,
   AlertDialogAction,
@@ -37,8 +39,16 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
 import { Textarea } from '@/components/ui/textarea';
 import { useAppStore } from '@/context/app-store';
+import { useIsMobile } from '@/hooks/use-mobile';
 
 /**
  * Renders saved project lists and inline editing controls.
@@ -47,7 +57,9 @@ import { useAppStore } from '@/context/app-store';
 export default function ProjectListView() {
   const { theme } = useTheme();
   const { state, actions } = useAppStore();
+  const isMobile = useIsMobile();
   const [editingListId, setEditingListId] = useState<string | null>(null);
+  const [addStudentSheetOpen, setAddStudentSheetOpen] = useState(false);
   const [draftName, setDraftName] = useState('');
   const [draftType, setDraftType] = useState('');
   const [draftDescription, setDraftDescription] = useState('');
@@ -176,9 +188,13 @@ export default function ProjectListView() {
 
   if (!projectLists.length) {
     return (
-      <Card className="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"
+          style={{ backgroundColor: 'var(--chart-5)', opacity: 0.6 }}
+        />
         <CardHeader className="px-6 xl:px-8">
-          <CardTitle className="text-xl">Saved project lists</CardTitle>
+          <CardTitle className="text-xl font-bold tracking-tight">Saved project lists</CardTitle>
         </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>
@@ -201,10 +217,14 @@ export default function ProjectListView() {
         return (
           <Card
             key={list.id}
-            className="shadow-md py-6 xl:py-8 lg:gap-6 xl:gap-8">
+            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-5)', opacity: 0.6 }}
+            />
             <CardHeader className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between px-6 xl:px-8">
               <div className="flex flex-col gap-1">
-                <CardTitle className="text-xl">{list.name}</CardTitle>
+                <CardTitle className="text-xl font-bold tracking-tight">{list.name}</CardTitle>
                 <div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
                   <span className="text-base/relaxed">{createdAt}</span>
                   <span aria-hidden="true">•</span>
@@ -281,7 +301,7 @@ export default function ProjectListView() {
             </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">
               {isEditing ? (
-                <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.1fr)]">
+                <div className="grid gap-4 md:grid-cols-[minmax(0,1fr)_minmax(0,1.1fr)]">
                   <div className="flex flex-col gap-4">
                     <Field>
                       <FieldLabel
@@ -337,63 +357,141 @@ export default function ProjectListView() {
                       </FieldContent>
                     </Field>
                     {error ? <FieldError>{error}</FieldError> : null}
+
+                    {/* Mobile: button to open add-student sheet */}
+                    {isMobile ? (
+                      <Button
+                        type="button"
+                        variant="secondary"
+                        className="h-11 font-semibold text-base"
+                        onClick={() => setAddStudentSheetOpen(true)}>
+                        <UsersIcon className="size-4" />
+                        Add Students ({availableStudents.length} available)
+                      </Button>
+                    ) : null}
                   </div>
-                  <div className="flex flex-col gap-3 rounded-lg border border-dashed border-border/70 p-4">
-                    <div className="flex flex-col gap-1">
-                      <p className="text-lg/relaxed font-semibold">
-                        Selected students
-                      </p>
-                      <p className="text-base/relaxed text-muted-foreground">
-                        {selectedIds.length}
-                        {selectedIds.length === 1
-                          ? ' student'
-                          : ' students'}{' '}
-                        selected.
-                      </p>
-                    </div>
-                    <FieldSeparator>Student roster</FieldSeparator>
-                    <div className="flex items-center gap-2">
-                      <Checkbox
-                        id={`include-excluded-${list.id}`}
-                        checked={includeExcluded}
-                        onCheckedChange={(checked) => {
-                          setIncludeExcluded(Boolean(checked));
-                        }}
-                        className="touch-hitbox cursor-pointer border-accent/25"
-                      />
-                      <label
-                        htmlFor={`include-excluded-${list.id}`}
-                        className="text-base/relaxed text-muted-foreground">
-                        Include absent students
-                      </label>
+
+                  {/* Desktop: inline student roster panel */}
+                  {!isMobile ? (
+                    <div className="flex flex-col gap-3 rounded-lg border border-dashed border-border/70 p-4">
+                      <div className="flex flex-col gap-1">
+                        <p className="text-lg/relaxed font-semibold">
+                          Selected students
+                        </p>
+                        <p className="text-base/relaxed text-muted-foreground">
+                          {selectedIds.length}
+                          {selectedIds.length === 1
+                            ? ' student'
+                            : ' students'}{' '}
+                          selected.
+                        </p>
+                      </div>
+                      <FieldSeparator>Student roster</FieldSeparator>
+                      <div className="flex items-center gap-2">
+                        <Checkbox
+                          id={`include-excluded-${list.id}`}
+                          checked={includeExcluded}
+                          onCheckedChange={(checked) => {
+                            setIncludeExcluded(Boolean(checked));
+                          }}
+                          className="touch-hitbox cursor-pointer border-accent/25"
+                        />
+                        <label
+                          htmlFor={`include-excluded-${list.id}`}
+                          className="text-base/relaxed text-muted-foreground">
+                          Include absent students
+                        </label>
+                      </div>
+                      <div className="max-h-64 overflow-y-auto pr-2">
+                        <div className="flex flex-col gap-2">
+                          {availableStudents.length ? (
+                            availableStudents.map((student) => (
+                              <label
+                                key={student.id}
+                                className="flex items-center justify-between gap-2 rounded-md border border-border/60 px-3 py-2 text-base/relaxed">
+                                <span className="font-medium">
+                                  {formatStudentName(student.name)}
+                                </span>
+                                <Button
+                                  type="button"
+                                  size="sm"
+                                  variant="secondary"
+                                  onClick={() => addStudentToDraft(student.id)}>
+                                  Add
+                                </Button>
+                              </label>
+                            ))
+                          ) : (
+                            <p className="text-base/relaxed text-muted-foreground">
+                              Everyone is already included in this list.
+                            </p>
+                          )}
+                        </div>
+                      </div>
                     </div>
-                    <div className="max-h-64 overflow-y-auto pr-2">
-                      <div className="flex flex-col gap-2">
-                        {availableStudents.length ? (
-                          availableStudents.map((student) => (
+                  ) : null}
+
+                  {/* Mobile: add-student bottom sheet */}
+                  {isMobile ? (
+                    <Sheet open={addStudentSheetOpen} onOpenChange={setAddStudentSheetOpen}>
+                      <SheetContent side="bottom" className="max-h-[85dvh]">
+                        <SheetHeader>
+                          <SheetTitle>Add Students</SheetTitle>
+                          <SheetDescription>
+                            {availableStudents.length} available to add.
+                          </SheetDescription>
+                        </SheetHeader>
+                        <div className="flex flex-col gap-3 px-6 pb-6 overflow-y-auto">
+                          <div className="flex items-center gap-2">
+                            <Checkbox
+                              id={`include-excluded-mobile-${list.id}`}
+                              checked={includeExcluded}
+                              onCheckedChange={(checked) => {
+                                setIncludeExcluded(Boolean(checked));
+                              }}
+                              className="touch-hitbox cursor-pointer border-accent/25"
+                            />
                             <label
-                              key={student.id}
-                              className="flex items-center justify-between gap-2 rounded-md border border-border/60 px-3 py-2 text-base/relaxed">
-                              <span className="font-medium">
-                                {formatStudentName(student.name)}
-                              </span>
-                              <Button
-                                type="button"
-                                size="sm"
-                                variant="secondary"
-                                onClick={() => addStudentToDraft(student.id)}>
-                                Add
-                              </Button>
+                              htmlFor={`include-excluded-mobile-${list.id}`}
+                              className="text-base/relaxed text-muted-foreground">
+                              Include absent students
                             </label>
-                          ))
-                        ) : (
-                          <p className="text-base/relaxed text-muted-foreground">
-                            Everyone is already included in this list.
-                          </p>
-                        )}
-                      </div>
-                    </div>
-                  </div>
+                          </div>
+                          <div className="flex flex-col gap-2">
+                            {availableStudents.length ? (
+                              availableStudents.map((student) => (
+                                <div
+                                  key={student.id}
+                                  className="flex items-center justify-between gap-2 rounded-md border border-border/60 px-3 py-3 text-base/relaxed min-h-[48px]">
+                                  <span className="font-medium">
+                                    {formatStudentName(student.name)}
+                                  </span>
+                                  <Button
+                                    type="button"
+                                    size="sm"
+                                    variant="secondary"
+                                    className="min-h-[44px]"
+                                    onClick={() => addStudentToDraft(student.id)}>
+                                    Add
+                                  </Button>
+                                </div>
+                              ))
+                            ) : (
+                              <p className="text-base/relaxed text-muted-foreground">
+                                Everyone is already included in this list.
+                              </p>
+                            )}
+                          </div>
+                          <Button
+                            type="button"
+                            className="h-11 font-semibold text-base mt-2"
+                            onClick={() => setAddStudentSheetOpen(false)}>
+                            Done
+                          </Button>
+                        </div>
+                      </SheetContent>
+                    </Sheet>
+                  ) : null}
                 </div>
               ) : null}
               {isGroupedList ? (
diff --git a/components/quizzes/quiz-editor-form.tsx b/components/quizzes/quiz-editor-form.tsx
index 2101674..4cb7055 100644
--- a/components/quizzes/quiz-editor-form.tsx
+++ b/components/quizzes/quiz-editor-form.tsx
@@ -204,9 +204,13 @@ export default function QuizEditorForm({
   return (
     <>
       <div className="flex flex-col gap-4">
-        <Card className="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"
+            style={{ backgroundColor: 'var(--chart-3)', opacity: 0.6 }}
+          />
           <CardHeader className="px-6 xl:px-8">
-            <CardTitle className="text-xl">Quiz Details</CardTitle>
+            <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>
@@ -280,9 +284,13 @@ export default function QuizEditorForm({
           </CardContent>
         </Card>
 
-        <Card className="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"
+            style={{ backgroundColor: 'var(--chart-3)', opacity: 0.6 }}
+          />
           <CardHeader className="px-6 xl:px-8">
-            <CardTitle className="text-xl">
+            <CardTitle className="text-xl font-bold tracking-tight">
               {editingQuestion ? 'Edit Question' : 'Add Question'}
             </CardTitle>
             <CardDescription className="text-base/relaxed">
@@ -341,9 +349,13 @@ export default function QuizEditorForm({
         {importCard}
       </div>
 
-      <Card className="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"
+          style={{ backgroundColor: 'var(--chart-3)', opacity: 0.6 }}
+        />
         <CardHeader className="px-6 xl:px-8">
-          <CardTitle className="text-xl">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'}`
@@ -352,47 +364,86 @@ export default function QuizEditorForm({
         </CardHeader>
         <CardContent className="px-6 xl:px-8 text-base/relaxed text-muted-foreground">
           {questions.length ? (
-            <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>
+            <>
+              {/* Mobile question cards */}
+              <div className="flex flex-col gap-3 md:hidden">
                 {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">
+                  <div
+                    key={question.id}
+                    className="rounded-lg border border-border/60 bg-background/40 p-4">
+                    <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}
+                      </p>
+                      <div className="flex items-center gap-1 shrink-0">
                         <Button
                           variant="ghost"
                           size="icon-sm"
+                          className="min-h-[44px] min-w-[44px]"
                           onClick={() => handleEditQuestion(question.id)}>
-                          <PencilIcon className="size-3.5" />
+                          <PencilIcon className="size-4" />
                           <span className="sr-only">Edit</span>
                         </Button>
                         <Button
                           variant="ghost"
                           size="icon-sm"
+                          className="min-h-[44px] min-w-[44px]"
                           onClick={() => handleRemoveQuestion(question.id)}>
-                          <Trash2Icon className="size-3.5 text-destructive" />
+                          <Trash2Icon className="size-4 text-destructive" />
                           <span className="sr-only">Remove</span>
                         </Button>
                       </div>
-                    </TableCell>
-                  </TableRow>
+                    </div>
+                    <p className="mt-1 text-sm/relaxed text-muted-foreground line-clamp-3">
+                      {question.answer}
+                    </p>
+                  </div>
                 ))}
-              </TableBody>
-            </Table>
+              </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>
+            </>
           ) : (
             <p className="text-base text-muted-foreground">
               No questions yet. Add your first question to get started.
diff --git a/components/quizzes/quiz-import-card.tsx b/components/quizzes/quiz-import-card.tsx
index 8359cbd..32b439c 100644
--- a/components/quizzes/quiz-import-card.tsx
+++ b/components/quizzes/quiz-import-card.tsx
@@ -110,9 +110,13 @@ export default function QuizImportCard() {
   };
 
   return (
-    <Card className="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"
+        style={{ backgroundColor: 'var(--chart-3)', opacity: 0.6 }}
+      />
       <CardHeader className="px-6 xl:px-8">
-        <CardTitle className="text-xl">Import Quiz JSON</CardTitle>
+        <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>
diff --git a/components/student-name-generator.tsx b/components/student-name-generator.tsx
index c853fe2..e4a3c9b 100644
--- a/components/student-name-generator.tsx
+++ b/components/student-name-generator.tsx
@@ -252,7 +252,7 @@ export default function StudentNameGenerator() {
         <p>
           Created by student{" "}
           <a
-            className="font-medium text-primary hover:text-primary/70"
+            className="touch-hitbox font-medium text-primary hover:text-primary/70"
             href="https://github.com/mrbubbles-src"
             target="_blank"
             rel="noreferrer"
@@ -261,7 +261,7 @@ export default function StudentNameGenerator() {
           </a>{" "}
           in class &quot;FBW WD D07 A&quot; of the{" "}
           <a
-            className="font-medium text-primary hover:text-primary/70"
+            className="touch-hitbox font-medium text-primary hover:text-primary/70"
             href="https://digitalcareerinstitute.org/"
             target="_blank"
             rel="noreferrer"
@@ -270,7 +270,7 @@ export default function StudentNameGenerator() {
           </a>
           . Check out the documentation{" "}
           <a
-            className="font-medium text-primary hover:text-primary/70"
+            className="touch-hitbox font-medium text-primary hover:text-primary/70"
             href="https://github.com/mrbubbles-src/random-student-name-generator"
             target="_blank"
             rel="noreferrer"
diff --git a/components/students/student-form.tsx b/components/students/student-form.tsx
index 25f3ab3..b2ad29b 100644
--- a/components/students/student-form.tsx
+++ b/components/students/student-form.tsx
@@ -145,9 +145,13 @@ export default function StudentForm({
   }
 
   return (
-    <Card className="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"
+        style={{ backgroundColor: 'var(--chart-1)', opacity: 0.6 }}
+      />
       <CardHeader className="px-6 xl:px-8">
-        <CardTitle className="text-xl">Add Students</CardTitle>
+        <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.
diff --git a/components/students/student-table.tsx b/components/students/student-table.tsx
index 81dadfb..0c0f6f8 100644
--- a/components/students/student-table.tsx
+++ b/components/students/student-table.tsx
@@ -178,11 +178,15 @@ export default function StudentTable({
   }
 
   return (
-    <Card className="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"
+        style={{ backgroundColor: 'var(--chart-1)', opacity: 0.6 }}
+      />
       <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">Student List</CardTitle>
+            <CardTitle className="text-xl font-bold tracking-tight">Student List</CardTitle>
             <CardDescription className="text-base/relaxed">
               {students.length
                 ? `${activeCount} active · ${
@@ -217,108 +221,198 @@ export default function StudentTable({
       </CardHeader>
       <CardContent className="px-6 xl:px-8 gap-5 xl:gap-6 text-base/relaxed flex flex-col">
         {students.length ? (
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead className="text-lg/relaxed px-4 sm:px-3 md:px-2">
-                  Student
-                </TableHead>
-                <TableHead className="text-lg/relaxed px-4 sm:px-3 md:px-2">
-                  Status
-                </TableHead>
-                <TableHead className="text-lg/relaxed text-right px-4 sm:px-3 md:px-2">
-                  Actions
-                </TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
+          <>
+            {/* Mobile card list */}
+            <div className="flex flex-col gap-3 md:hidden">
               {students.map((student) => {
                 const isExcluded = student.status === 'excluded';
                 return (
-                  <TableRow key={student.id}>
-                    <TableCell className="px-4 sm:px-3 md:px-2">
-                      <div className="flex flex-col">
-                        <span className="font-medium text-base/relaxed md:text-lg/relaxed">
+                  <div
+                    key={student.id}
+                    className="rounded-lg border border-border/60 bg-background/40 p-4">
+                    <div className="flex items-start justify-between gap-3">
+                      <div className="flex flex-col gap-0.5 min-w-0">
+                        <span className="font-medium text-base/relaxed text-foreground truncate">
                           {formatStudentName(student.name)}
                         </span>
-                        <span className="text-sm/relaxed md:text-base/relaxed text-muted-foreground/70">
+                        <span className="text-sm/relaxed text-muted-foreground/70">
                           Added{' '}
                           {new Date(student.createdAt).toLocaleDateString()}
                         </span>
                       </div>
-                    </TableCell>
-                    <TableCell className="px-4 sm:px-3 md:px-2">
                       <Badge
                         className={cn(
-                          'p-2.5 text-base/relaxed shadow-sm',
+                          'shrink-0 px-2.5 py-1 text-sm/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-4 sm:px-3 md:px-2">
-                      <div className="flex items-center justify-end gap-3">
-                        <div className="flex items-center gap-2">
-                          <Label className="text-sm/relaxed md: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="md:text-base/relaxed text-sm/relaxed">
-                          Edit
-                        </Button>
-                        <AlertDialog>
-                          <AlertDialogTrigger
-                            render={
-                              <Button
-                                variant="destructive"
-                                size="sm"
-                                className="md:text-base/relaxed text-sm/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>
+                    </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]">
+                        <Checkbox
+                          checked={isExcluded}
+                          onCheckedChange={() =>
+                            handleToggleExcluded(student.id)
+                          }
+                          aria-label={`Mark ${student.name} as absent`}
+                          className="touch-hitbox cursor-pointer border-accent/25"
+                        />
+                        <span className="text-sm/relaxed text-muted-foreground">
+                          Absent
+                        </span>
+                      </label>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => handleOpenEdit(student.id)}
+                        className="text-sm/relaxed min-h-[44px] min-w-[44px]">
+                        Edit
+                      </Button>
+                      <AlertDialog>
+                        <AlertDialogTrigger
+                          render={
+                            <Button
+                              variant="destructive"
+                              size="sm"
+                              className="text-sm/relaxed min-h-[44px] min-w-[44px]"
+                            />
+                          }>
+                          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>
+                  </div>
                 );
               })}
-            </TableBody>
-          </Table>
+            </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>
+          </>
         ) : (
           <p className="text-base text-muted-foreground">
             Add students to start building your roster.
diff --git a/components/ui/select.tsx b/components/ui/select.tsx
index 8ef1154..66c97ec 100644
--- a/components/ui/select.tsx
+++ b/components/ui/select.tsx
@@ -118,7 +118,7 @@ function SelectItem({
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "touch-hitbox cursor-pointer focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-sm/relaxed [&_svg:not([class*='size-'])]:size-3.5 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "touch-hitbox cursor-pointer focus:bg-accent/10 focus:text-primary not-data-[variant=destructive]:focus:**:text-primary min-h-7 gap-2 rounded-md px-2 py-1 text-sm/relaxed [&_svg:not([class*='size-'])]:size-3.5 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className
       )}
       {...props}
diff --git a/components/ui/sidebar.tsx b/components/ui/sidebar.tsx
index 9819789..9608b1f 100644
--- a/components/ui/sidebar.tsx
+++ b/components/ui/sidebar.tsx
@@ -427,7 +427,7 @@ function SidebarGroupAction({
     props: mergeProps<'button'>(
       {
         className: cn(
-          'touch-hitbox cursor-pointer text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden',
+          'touch-hitbox cursor-pointer text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-primary absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden',
           className,
         ),
       },
@@ -478,13 +478,13 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
 }
 
 const sidebarMenuButtonVariants = cva(
-  'touch-hitbox cursor-pointer ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-[calc(var(--radius-sm)+2px)] p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0',
+  'touch-hitbox cursor-pointer ring-sidebar-ring hover:bg-sidebar-accent/10 hover:text-primary active:bg-sidebar-accent/10 active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent/10 data-open:hover:text-primary gap-2 rounded-[calc(var(--radius-sm)+2px)] p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0',
   {
     variants: {
       variant: {
-        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+        default: 'hover:bg-sidebar-accent/10 hover:text-primary',
         outline:
-          'bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
+          'bg-background hover:bg-sidebar-accent hover:text-primary shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
       },
       size: {
         default: 'h-8 text-sm',
@@ -567,7 +567,7 @@ function SidebarMenuAction({
     props: mergeProps<'button'>(
       {
         className: cn(
-          'touch-hitbox cursor-pointer text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-[calc(var(--radius-sm)-2px)] p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0',
+          'touch-hitbox cursor-pointer text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-primary peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-[calc(var(--radius-sm)-2px)] p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0',
           showOnHover &&
             'peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0',
           className,
@@ -681,7 +681,7 @@ function SidebarMenuSubButton({
     props: mergeProps<'a'>(
       {
         className: cn(
-          'touch-hitbox cursor-pointer text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-sm [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0',
+          'touch-hitbox cursor-pointer text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-primary active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-sm [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0',
           className,
         ),
       },
diff --git a/components/ui/tabs.tsx b/components/ui/tabs.tsx
index fde1941..cd8aa8e 100644
--- a/components/ui/tabs.tsx
+++ b/components/ui/tabs.tsx
@@ -58,7 +58,7 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
     <TabsPrimitive.Tab
       data-slot="tabs-trigger"
       className={cn(
-        "gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-xs font-medium group-data-vertical/tabs:py-[calc(--spacing(1.25))] [&_svg:not([class*='size-'])]:size-3.5 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "touch-hitbox gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-xs font-medium group-data-vertical/tabs:py-[calc(--spacing(1.25))] [&_svg:not([class*='size-'])]:size-3.5 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
         "data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground",
         "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
diff --git a/components/utility/__tests__/page-info-dialog.test.tsx b/components/utility/__tests__/page-info-dialog.test.tsx
index 1604de5..5038439 100644
--- a/components/utility/__tests__/page-info-dialog.test.tsx
+++ b/components/utility/__tests__/page-info-dialog.test.tsx
@@ -77,7 +77,7 @@ describe("PageInfoDialog", () => {
     setViewportWidth(1280)
   })
 
-  it("opens from trigger and closes from top-right X", async () => {
+  it("opens from trigger and closes from close button", async () => {
     const user = userEvent.setup()
 
     render(<PageInfoDialog currentPath="/" pages={PAGE_INFOS} />)
@@ -85,14 +85,14 @@ describe("PageInfoDialog", () => {
     await user.click(screen.getByRole("button", { name: /open page info/i }))
     expect(screen.getByRole("dialog")).toBeInTheDocument()
 
-    await user.click(screen.getByRole("button", { name: /close info dialog/i }))
+    await user.click(screen.getByRole("button", { name: /close/i }))
 
     await waitFor(() => {
       expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
     })
   })
 
-  it("closes when clicking outside the dialog", async () => {
+  it("closes when clicking outside the panel", async () => {
     const user = userEvent.setup()
 
     render(<PageInfoDialog currentPath="/" pages={PAGE_INFOS} />)
@@ -100,7 +100,7 @@ describe("PageInfoDialog", () => {
     await user.click(screen.getByRole("button", { name: /open page info/i }))
     expect(screen.getByRole("dialog")).toBeInTheDocument()
 
-    const overlay = document.querySelector("[data-slot='dialog-overlay']")
+    const overlay = document.querySelector("[data-slot='sheet-overlay']")
     expect(overlay).toBeInstanceOf(HTMLElement)
 
     await user.click(overlay as HTMLElement)
@@ -125,9 +125,9 @@ describe("PageInfoDialog", () => {
     })
   })
 
-  it("uses dropdown workflow selector on laptop and below (<xl)", async () => {
+  it("uses dropdown workflow selector on smaller screens (<1024)", async () => {
     const user = userEvent.setup()
-    setViewportWidth(1100)
+    setViewportWidth(900)
 
     render(<PageInfoDialog currentPath="/" pages={PAGE_INFOS} />)
 
@@ -141,12 +141,12 @@ describe("PageInfoDialog", () => {
 
     expect(
       screen.getByText((content) =>
-        content.includes("live classroom view for running quizzes"),
+        content.includes("live quiz screen for your classroom"),
       ),
     ).toBeInTheDocument()
   })
 
-  it("uses tabs workflow selector on large screens (>=lg)", async () => {
+  it("uses tabs workflow selector on large screens (>=1024)", async () => {
     const user = userEvent.setup()
     setViewportWidth(1280)
 
@@ -161,7 +161,7 @@ describe("PageInfoDialog", () => {
 
     expect(
       screen.getByText((content) =>
-        content.includes("live classroom view for running quizzes"),
+        content.includes("live quiz screen for your classroom"),
       ),
     ).toBeInTheDocument()
   })
diff --git a/components/utility/page-info-dialog.tsx b/components/utility/page-info-dialog.tsx
index da05311..63c9e41 100644
--- a/components/utility/page-info-dialog.tsx
+++ b/components/utility/page-info-dialog.tsx
@@ -4,18 +4,15 @@ import type { PageInfo } from '@/lib/page-info';
 
 import { useMemo, useState } from 'react';
 
-import { CircleHelpIcon, XIcon } from 'lucide-react';
+import {
+  BookOpenIcon,
+  CircleHelpIcon,
+  LightbulbIcon,
+  ListChecksIcon,
+  SparklesIcon,
+} from 'lucide-react';
 
 import { Button } from '@/components/ui/button';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
 import {
   Select,
   SelectContent,
@@ -23,6 +20,14 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@/components/ui/sheet';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { useIsMobile } from '@/hooks/use-mobile';
 
@@ -32,36 +37,44 @@ type PageInfoDialogProps = {
 };
 
 /**
- * Renders a readable tutorial block for one page.
- * It explains the page purpose, then gives clear action steps and the
- * expected result.
+ * Renders a friendly help block for one page with visual section markers.
+ * Three sections: purpose (what it does), how-to (steps), and outcome (what you get).
  */
 const HelpGuide = ({ help, id }: { help: PageInfo['help']; id: string }) => {
   return (
-    <div className="space-y-4">
-      <section className="space-y-1">
-        <h3 className="text-xl/relaxed font-semibold text-foreground">
-          What this page does
-        </h3>
-        <p className="text-lg/relaxed text-pretty text-foreground/85">
+    <div className="space-y-5">
+      <section className="space-y-1.5">
+        <div className="flex items-center gap-2 text-primary">
+          <LightbulbIcon className="size-4 shrink-0" />
+          <h3 className="text-lg/relaxed font-semibold">
+            In a nutshell
+          </h3>
+        </div>
+        <p className="text-base/relaxed text-pretty text-foreground/85 pl-6">
           {help.purpose}
         </p>
       </section>
-      <section className="space-y-1">
-        <h3 className="text-xl/relaxed font-semibold text-foreground">
-          What to do
-        </h3>
-        <ol className="list-decimal space-y-1 pl-5 text-lg/relaxed text-pretty text-foreground/85">
+      <section className="space-y-1.5">
+        <div className="flex items-center gap-2 text-primary">
+          <ListChecksIcon className="size-4 shrink-0" />
+          <h3 className="text-lg/relaxed font-semibold">
+            How to use it
+          </h3>
+        </div>
+        <ol className="list-decimal space-y-1.5 pl-10 text-base/relaxed text-pretty text-foreground/85 marker:text-primary/60 marker:font-semibold">
           {help.howTo.map((step, index) => (
             <li key={`${id}-step-${index + 1}`}>{step}</li>
           ))}
         </ol>
       </section>
-      <section className="space-y-1">
-        <h3 className="text-xl/relaxed font-semibold text-foreground">
-          What you get
-        </h3>
-        <p className="text-lg/relaxed text-pretty text-foreground/85">
+      <section className="space-y-1.5">
+        <div className="flex items-center gap-2 text-primary">
+          <SparklesIcon className="size-4 shrink-0" />
+          <h3 className="text-lg/relaxed font-semibold">
+            What you will get
+          </h3>
+        </div>
+        <p className="text-base/relaxed text-pretty text-foreground/85 pl-6">
           {help.outcome}
         </p>
       </section>
@@ -70,15 +83,16 @@ const HelpGuide = ({ help, id }: { help: PageInfo['help']; id: string }) => {
 };
 
 /**
- * Header info button + modal that explains the current page.
- * Provide the current pathname and the page info list; it returns null when
- * the path does not match any page.
+ * Header info button + slide-in panel that explains the current page.
+ * Uses a bottom sheet on mobile/tablet and a right-side panel on desktop.
+ * On the dashboard, shows all workflows with tab/select switching.
  */
 const PageInfoDialog = ({ currentPath, pages }: PageInfoDialogProps) => {
   const dashboardPages = useMemo(() => pages, [pages]);
   const dashboardPage = dashboardPages.find((page) => page.path === '/');
   const defaultTab = dashboardPage?.id ?? dashboardPages[0]?.id ?? 'dashboard';
-  const useDropdownSelector = useIsMobile(1280);
+  const useCompactSelector = useIsMobile(1024);
+  const useBottomSheet = useIsMobile();
   const [activeGuideId, setActiveGuideId] = useState<string>(defaultTab);
 
   const currentPage = pages.find((page) => page.path === currentPath);
@@ -95,8 +109,8 @@ const PageInfoDialog = ({ currentPath, pages }: PageInfoDialogProps) => {
     currentPage;
 
   return (
-    <Dialog disablePointerDismissal={false}>
-      <DialogTrigger
+    <Sheet>
+      <SheetTrigger
         render={
           <Button
             variant="ghost"
@@ -106,36 +120,34 @@ const PageInfoDialog = ({ currentPath, pages }: PageInfoDialogProps) => {
           />
         }>
         <CircleHelpIcon className="size-4" />
-      </DialogTrigger>
-      <DialogContent className="top-0 left-0 h-dvh w-screen max-w-none translate-x-0 translate-y-0 rounded-none p-0 md:top-1/2 md:left-1/2 md:h-auto md:max-h-[88dvh] md:w-[min(94vw,52rem)] md:max-w-208 md:-translate-x-1/2 md:-translate-y-1/2 md:rounded-xl lg:w-[min(92vw,64rem)] lg:max-w-5xl xl:max-h-[90dvh] xl:w-[min(90vw,72rem)] xl:max-w-6xl">
-        <DialogClose
-          render={
-            <Button
-              variant="ghost"
-              size="icon"
-              className="absolute top-3 right-3 z-10"
-              aria-label="Close info dialog"
-            />
-          }>
-          <XIcon className="size-4" />
-          <span className="sr-only">Close info dialog</span>
-        </DialogClose>
-        <div className="flex h-full min-h-0 flex-col">
-          <DialogHeader className="px-4 pb-2 pt-4 pr-14 text-left md:px-6 md:pt-6 md:pr-16">
-            <DialogTitle className="text-2xl/relaxed">
-              {isDashboard
-                ? 'TeacherBuddy Workflows'
-                : `About ${currentPage.title}`}
-            </DialogTitle>
-            <DialogDescription className="text-base/relaxed text-foreground/80">
+      </SheetTrigger>
+      <SheetContent
+        side={useBottomSheet ? 'bottom' : 'right'}
+        className={
+          useBottomSheet
+            ? 'max-h-[85dvh] rounded-t-2xl'
+            : 'w-full sm:max-w-md md:max-w-lg lg:max-w-xl'
+        }>
+        <SheetHeader className="pr-12">
+          <div className="flex items-center gap-2">
+            <BookOpenIcon className="size-4 shrink-0 text-primary" />
+            <SheetTitle className="text-xl/relaxed font-bold">
               {isDashboard
-                ? 'Select a workflow tab to see what each tool does.'
-                : 'Follow this quick guide to understand the page and what to do next.'}
-            </DialogDescription>
-          </DialogHeader>
-          {isDashboard ? (
-            <div className="flex min-h-0 flex-1 flex-col px-4 pb-4 md:px-6 md:pb-6">
-              {useDropdownSelector ? (
+                ? 'How TeacherBuddy Works'
+                : currentPage.title}
+            </SheetTitle>
+          </div>
+          <SheetDescription className="text-sm/relaxed">
+            {isDashboard
+              ? 'Pick a tool below to see what it does and how to use it.'
+              : currentPage.description}
+          </SheetDescription>
+        </SheetHeader>
+
+        {isDashboard ? (
+          <div className="flex min-h-0 flex-1 flex-col gap-3 overflow-hidden px-6 pb-6">
+            {useCompactSelector ? (
+              <>
                 <Select
                   value={activeGuide.id}
                   onValueChange={(value) => {
@@ -143,7 +155,7 @@ const PageInfoDialog = ({ currentPath, pages }: PageInfoDialogProps) => {
                     setActiveGuideId(value);
                   }}>
                   <SelectTrigger className="h-9 w-full text-base/relaxed">
-                    <SelectValue placeholder="Select a workflow">
+                    <SelectValue placeholder="Select a tool">
                       {activeGuide.title}
                     </SelectValue>
                   </SelectTrigger>
@@ -155,55 +167,49 @@ const PageInfoDialog = ({ currentPath, pages }: PageInfoDialogProps) => {
                     ))}
                   </SelectContent>
                 </Select>
-              ) : null}
-              {useDropdownSelector ? (
-                <div className="min-h-0 flex-1 overflow-y-auto mt-2">
-                  <div className="px-2 py-1 text-base/relaxed text-foreground/85">
-                    <HelpGuide help={activeGuide.help} id={activeGuide.id} />
-                  </div>
+                <div className="min-h-0 flex-1 overflow-y-auto">
+                  <HelpGuide help={activeGuide.help} id={activeGuide.id} />
                 </div>
-              ) : (
-                <Tabs
-                  value={activeGuide.id}
-                  onValueChange={(value) => setActiveGuideId(String(value))}
-                  className="min-h-0 flex-1 gap-3">
-                  <div className="w-full overflow-x-auto pb-1">
-                    <TabsList
-                      variant="line"
-                      className="h-auto w-max min-w-full justify-start whitespace-nowrap">
-                      {dashboardPages.map((page) => (
-                        <TabsTrigger
-                          key={page.id}
-                          value={page.id}
-                          className="flex-none shrink-0 text-lg/relaxed text-foreground/80 data-active:text-primary dark:data-active:text-primary">
-                          {page.title}
-                        </TabsTrigger>
-                      ))}
-                    </TabsList>
-                  </div>
-                  <div className="min-h-0 flex-1 overflow-y-auto">
+              </>
+            ) : (
+              <Tabs
+                value={activeGuide.id}
+                onValueChange={(value) => setActiveGuideId(String(value))}
+                className="min-h-0 flex-1 gap-3">
+                <div className="w-full overflow-x-auto pb-1">
+                  <TabsList
+                    variant="line"
+                    className="h-auto w-max min-w-full justify-start whitespace-nowrap">
                     {dashboardPages.map((page) => (
-                      <TabsContent
+                      <TabsTrigger
                         key={page.id}
                         value={page.id}
-                        className="px-2 py-1 text-base/relaxed text-foreground/85">
-                        <HelpGuide help={page.help} id={page.id} />
-                      </TabsContent>
+                        className="flex-none shrink-0 text-base/relaxed text-foreground/80 data-active:text-primary dark:data-active:text-primary">
+                        {page.title}
+                      </TabsTrigger>
                     ))}
-                  </div>
-                </Tabs>
-              )}
-            </div>
-          ) : (
-            <div className="min-h-0 flex-1 overflow-y-auto px-4 pb-4 md:px-6 md:pb-6">
-              <div className="px-2 py-1 text-base/relaxed text-foreground/85">
-                <HelpGuide help={currentPage.help} id={currentPage.id} />
-              </div>
-            </div>
-          )}
-        </div>
-      </DialogContent>
-    </Dialog>
+                  </TabsList>
+                </div>
+                <div className="min-h-0 flex-1 overflow-y-auto">
+                  {dashboardPages.map((page) => (
+                    <TabsContent
+                      key={page.id}
+                      value={page.id}
+                      className="text-base/relaxed text-foreground/85">
+                      <HelpGuide help={page.help} id={page.id} />
+                    </TabsContent>
+                  ))}
+                </div>
+              </Tabs>
+            )}
+          </div>
+        ) : (
+          <div className="min-h-0 flex-1 overflow-y-auto px-6 pb-6">
+            <HelpGuide help={currentPage.help} id={currentPage.id} />
+          </div>
+        )}
+      </SheetContent>
+    </Sheet>
   );
 };
 
diff --git a/documentation/project-docs/components.md b/documentation/project-docs/components.md
index af9359b..28e125c 100644
--- a/documentation/project-docs/components.md
+++ b/documentation/project-docs/components.md
@@ -8,9 +8,11 @@ Reference for React components. All feature components are client components unl
 | ------------ | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
 | `AppShell`   | `components/app-shell.tsx`              | Root layout: sidebar (collapsible) with **custom logo** (Next.js `Image` from `public/images/teacherbuddy-icon-transparent.png`, blur placeholder, responsive sizes), route titles, main content. Uses `getPageInfoByPath(pathname)` for meta; passes `meta` and `info` (currentPath, `PAGE_INFOS`) to `Header`. Optional `footer`. |
 | `Header`     | `components/header.tsx`                 | Page title, description, **PageInfoDialog** (help button next to title), sidebar trigger, theme toggle, and **QuizTimerCard** (timer on all pages). Receives `meta` and `info` from AppShell. |
-| `Footer`     | `components/footer.tsx`                 | Credits, source link, Catppuccin attribution. Rendered via `AppShell` footer prop.                                        |
-| `SidebarNav` | `components/navigation/sidebar-nav.tsx` | Primary navigation links; highlights current route by pathname.                                                           |
-| `AppSidebar` | `components/app-sidebar.tsx`            | Alternative sidebar component (see app-shell for active layout).                                                          |
+| `Footer`         | `components/footer.tsx`                 | Credits, source link, Catppuccin attribution. Rendered via `AppShell` footer prop.                                          |
+| `PrivacyNotice` | `components/privacy-notice.tsx`         | One-time privacy notice bar (bottom center); explains local-only data, no tracking. Dismissal stored in localStorage; rendered in root layout. |
+| `Toaster`       | `components/ui/sonner.tsx`             | Toast notifications (sonner). Rendered in root layout with `closeButton`, `position="bottom-center"`. Theme-aware icons.     |
+| `SidebarNav`     | `components/navigation/sidebar-nav.tsx` | Primary navigation links; highlights current route by pathname.                                                             |
+| `AppSidebar`     | `components/app-sidebar.tsx`            | Alternative sidebar component (see app-shell for active layout).                                                            |
 
 ## Dashboard
 
@@ -72,7 +74,7 @@ Copy-to-clipboard is provided by the `useCopyToClipboard` hook; it is used inlin
 
 ## Loading States
 
-Skeletons in `components/loading/` render while `state.ui.isHydrated` is false:
+Feature pages pass a `skeleton` prop to the main component (e.g. `<StudentForm skeleton={<StudentFormSkeleton />} />`). Skeletons in `components/loading/` render while `state.ui.isHydrated` is false:
 
 | Skeleton                | File                                 | Used By           |
 | ----------------------- | ------------------------------------ | ----------------- |
@@ -100,6 +102,7 @@ Base components in `components/ui/` use Tailwind and (where noted) Base UI / sha
 | `Checkbox`, `Combobox`, `Popover`, `Sheet`       | Headless-style UI.                                               |
 | `DropdownMenu`, `Separator`, `Skeleton`, `Table` | Layout and feedback.                                             |
 | `Sidebar`, `SidebarTrigger`, etc.                | Sidebar layout (used by AppShell).                               |
+| `Toaster` (sonner)                               | Toast notifications; used in root layout.                        |
 | `Tooltip`                                        | Accessibility-friendly tooltips.                                 |
 
 ### Server-Safe Variants
diff --git a/documentation/project-docs/dependencies.md b/documentation/project-docs/dependencies.md
index 4f2ef3f..d6796bb 100644
--- a/documentation/project-docs/dependencies.md
+++ b/documentation/project-docs/dependencies.md
@@ -12,6 +12,7 @@
 | `lucide-react` | Icon library |
 | `class-variance-authority` (CVA) | Variant-based component styling |
 | `clsx`, `tailwind-merge` | Conditional class names (`cn()` in `lib/utils.ts`) |
+| `sonner` | Toast notifications; wrapped in `components/ui/sonner.tsx` (Toaster) and rendered in root layout |
 | `tw-animate-css` | Tailwind animation utilities |
 
 ## Development
diff --git a/documentation/project-docs/routes.md b/documentation/project-docs/routes.md
index 6af76bd..ba52527 100644
--- a/documentation/project-docs/routes.md
+++ b/documentation/project-docs/routes.md
@@ -2,11 +2,11 @@
 
 ## App Layout
 
-| File              | Purpose                                                   |
-| ----------------- | --------------------------------------------------------- |
-| `app/layout.tsx`  | Root layout with fonts, providers, and `AppShell` wrapper |
-| `app/loading.tsx` | Global loading state for route transitions                |
-| `app/error.tsx`   | Global error boundary with retry action                   |
+| File              | Purpose                                                                                                                                 |
+| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `app/layout.tsx`  | Root layout: metadata (title template `%s | TeacherBuddy`, OG, Twitter), ld+json WebApplication schema, fonts (Geist), ThemeProvider, AppStoreProvider, AppShell, Footer, **PrivacyNotice**, **Toaster** (sonner, bottom-center). |
+| `app/loading.tsx` | Global loading state for route transitions                                                                                             |
+| `app/error.tsx`   | Global error boundary with retry action                                                                                                |
 
 ## Pages
 
@@ -22,10 +22,10 @@
 
 ## Route Metadata
 
-- Root defaults are set in `app/layout.tsx` (`metadataBase`, default Open Graph, default Twitter metadata).
-- Each primary route exports `generateMetadata()` and calls `buildPageMetadata(path)` from `lib/metadata.ts`.
-- Route title and description values come from `lib/page-meta.ts`, which is shared with in-app page info.
-- Open Graph image is generated via `next/og` and served at `/api/og` (`app/api/og/route.ts`).
+- Root layout sets app-wide defaults in `app/layout.tsx`: `metadataBase`, title template `%s | TeacherBuddy`, Open Graph, Twitter, and inline ld+json WebApplication schema (name, description, category, offers).
+- Each route page exports `metadata: Metadata` with `title` and `description` for SEO (e.g. `app/students/page.tsx`, `app/quizzes/page.tsx`).
+- Route titles and descriptions align with in-app page info from `lib/page-info.tsx` / `lib/page-meta.ts`.
+- Open Graph image is generated via `next/og` at `/api/og` (`app/api/og/route.tsx`). Optional: `app/robots.ts`, `app/sitemap.ts` for crawlers.
 
 ## Navigation
 
@@ -36,9 +36,10 @@
 
 Each route page typically:
 
-1. Renders a main feature card component
-2. Optionally renders secondary components (tables, lists)
-3. Shows hydration skeletons until `state.ui.isHydrated` is true
+1. Exports `metadata` with `title` and `description` for SEO
+2. Renders a main feature component, passing a `skeleton` prop where applicable (e.g. `StudentForm skeleton={<StudentFormSkeleton />}`, `QuizEditor skeleton={<QuizEditorSkeleton />}`)
+3. Optionally renders secondary components (e.g. `StudentTable`, `ProjectListView`)
+4. Feature components show the skeleton until `state.ui.isHydrated` is true
 
 ## Static Generation
 
diff --git a/documentation/project-docs/structure.md b/documentation/project-docs/structure.md
index 1835e2f..30d63de 100644
--- a/documentation/project-docs/structure.md
+++ b/documentation/project-docs/structure.md
@@ -21,9 +21,11 @@ TeacherBuddy is a Next.js App Router application. The layout renders a client-dr
 ```text
 teacherbuddy/
 ├── app/                    # Routes, layout, global loading and error UI
-│   ├── layout.tsx          # Root layout with providers
+│   ├── layout.tsx          # Root layout: metadata (template, OG, Twitter), ld+json schema, ThemeProvider, AppStoreProvider, AppShell, Footer, PrivacyNotice, Toaster
 │   ├── page.tsx            # Dashboard
-│   ├── api/og/route.ts     # API-style Open Graph image endpoint (next/og)
+│   ├── api/og/route.tsx    # Open Graph image endpoint (next/og)
+│   ├── robots.ts           # robots.txt generation
+│   ├── sitemap.ts          # sitemap.xml generation
 │   ├── loading.tsx         # Global loading state
 │   ├── error.tsx           # Global error boundary
 │   ├── students/           # Student management route
@@ -33,7 +35,7 @@ teacherbuddy/
 │   ├── breakout-rooms/     # Breakout groups route
 │   └── projects/           # Project lists route
 ├── components/             # React components
-│   ├── ui/                 # Shared UI primitives and Base UI wrappers
+│   ├── ui/                 # Shared UI primitives (Button, Card, Dialog, Sonner/Toaster, etc.)
 │   ├── loading/            # Skeletons for hydration states
 │   ├── navigation/         # Sidebar and nav components
 │   ├── dashboard/          # Dashboard cards (server component)
@@ -50,6 +52,7 @@ teacherbuddy/
 │   ├── app-shell.tsx       # Root layout shell
 │   ├── header.tsx          # Page header (timer in header)
 │   ├── footer.tsx          # Credits footer
+│   ├── privacy-notice.tsx  # One-time privacy notice (root layout)
 │   └── student-name-generator.tsx
 ├── context/                # React context providers
 │   ├── app-store.tsx       # Global state and reducer
@@ -106,7 +109,7 @@ Tests are colocated with source code in `__tests__/` directories:
 
 | File                       | Purpose                                                                                                         |
 | -------------------------- | --------------------------------------------------------------------------------------------------------------- |
-| `app/layout.tsx`           | Root layout: fonts (Geist), ThemeProvider, AppStoreProvider, AppShell, Footer                                   |
+| `app/layout.tsx`           | Root layout: metadata (template, OG, Twitter), ld+json WebApplication schema, fonts (Geist), ThemeProvider, AppStoreProvider, AppShell, Footer, PrivacyNotice, Toaster (sonner) |
 | `context/app-store.tsx`    | Central state: reducer, useAppStore, hydration, persistence effects                                             |
 | `lib/storage.ts`           | localStorage read/write and validation                                                                          |
 | `lib/type-guards.ts`       | Runtime type checking for persisted data                                                                        |
diff --git a/lib/__tests__/metadata.test.ts b/lib/__tests__/metadata.test.ts
deleted file mode 100644
index b0dc02f..0000000
--- a/lib/__tests__/metadata.test.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-import {
-  buildPageMetadata,
-  DEFAULT_SITE_DESCRIPTION,
-  resolveMetadataBase,
-  SHARED_OPEN_GRAPH,
-  SHARED_TWITTER,
-} from '@/lib/metadata';
-
-import { beforeEach, describe, expect, it } from 'vitest';
-
-const METADATA_ENV_KEYS = [
-  'NEXT_PUBLIC_SITE_URL',
-  'VERCEL_PROJECT_PRODUCTION_URL',
-  'VERCEL_URL',
-] as const;
-
-function clearMetadataEnvVariables() {
-  for (const key of METADATA_ENV_KEYS) {
-    delete process.env[key];
-  }
-}
-
-describe('resolveMetadataBase', () => {
-  beforeEach(() => {
-    clearMetadataEnvVariables();
-  });
-
-  it('prefers NEXT_PUBLIC_SITE_URL when provided', () => {
-    process.env.NEXT_PUBLIC_SITE_URL = 'https://teacherbuddy.dev';
-    process.env.VERCEL_PROJECT_PRODUCTION_URL = 'teacherbuddy.vercel.app';
-
-    expect(resolveMetadataBase().toString()).toBe('https://teacherbuddy.dev/');
-  });
-
-  it('uses VERCEL_PROJECT_PRODUCTION_URL when NEXT_PUBLIC_SITE_URL is missing', () => {
-    process.env.VERCEL_PROJECT_PRODUCTION_URL = 'teacherbuddy.vercel.app';
-
-    expect(resolveMetadataBase().toString()).toBe(
-      'https://teacherbuddy.vercel.app/',
-    );
-  });
-
-  it('falls back to VERCEL_URL when production URL is missing', () => {
-    process.env.VERCEL_URL = 'preview-teacherbuddy.vercel.app';
-
-    expect(resolveMetadataBase().toString()).toBe(
-      'https://preview-teacherbuddy.vercel.app/',
-    );
-  });
-
-  it('falls back to production URL when no env URL values exist', () => {
-    expect(resolveMetadataBase().toString()).toBe(
-      'https://teacherbuddy.mrbubbles-src.dev/',
-    );
-  });
-});
-
-describe('buildPageMetadata', () => {
-  it('returns full metadata for known routes', () => {
-    const metadata = buildPageMetadata('/students');
-
-    expect(metadata.title).toBe('Student Management');
-    expect(metadata.description).toBe(
-      'Add students, mark absences, and manage your roster.',
-    );
-    expect(metadata.alternates?.canonical).toBe('/students');
-    expect(metadata.openGraph).toMatchObject({
-      ...SHARED_OPEN_GRAPH,
-      title: 'Student Management',
-      description: 'Add students, mark absences, and manage your roster.',
-      url: 'https://teacherbuddy.mrbubbles-src.dev/students',
-    });
-    expect(metadata.twitter).toMatchObject({
-      ...SHARED_TWITTER,
-      title: 'Student Management',
-      description: 'Add students, mark absences, and manage your roster.',
-    });
-  });
-
-  it('returns fallback metadata for unknown routes', () => {
-    const metadata = buildPageMetadata('/missing');
-
-    expect(metadata.title).toBe('TeacherBuddy');
-    expect(metadata.description).toBe(DEFAULT_SITE_DESCRIPTION);
-    expect(metadata.alternates?.canonical).toBe('/missing');
-    expect(metadata.openGraph).toMatchObject({
-      ...SHARED_OPEN_GRAPH,
-      title: 'TeacherBuddy',
-      description: DEFAULT_SITE_DESCRIPTION,
-      url: 'https://teacherbuddy.mrbubbles-src.dev/missing',
-    });
-    expect(metadata.twitter).toMatchObject({
-      ...SHARED_TWITTER,
-      title: 'TeacherBuddy',
-      description: DEFAULT_SITE_DESCRIPTION,
-    });
-  });
-});
diff --git a/lib/metadata.ts b/lib/metadata.ts
deleted file mode 100644
index e09f321..0000000
--- a/lib/metadata.ts
+++ /dev/null
@@ -1,145 +0,0 @@
-import type { Metadata } from 'next';
-
-import { ROUTE_PAGE_META_BY_PATH } from '@/lib/page-meta';
-
-/**
- * Canonical product name used across metadata titles and social cards.
- */
-export const SITE_NAME = 'TeacherBuddy';
-
-/**
- * Fallback site description for routes without custom text.
- */
-export const DEFAULT_SITE_DESCRIPTION =
-  'Manage students, build quizzes, and draw random pairs without repeats.';
-
-const PRODUCTION_SITE_URL = 'https://teacherbuddy.mrbubbles-src.dev';
-const DEFAULT_SITE_URL = PRODUCTION_SITE_URL;
-const DEFAULT_OG_IMAGE_PATH = '/api/og';
-const URL_PROTOCOL_PATTERN = /^[a-zA-Z][a-zA-Z\d+\-.]*:\/\//;
-
-/**
- * Shared Open Graph fields reused in layout and page metadata.
- */
-export const SHARED_OPEN_GRAPH: NonNullable<Metadata['openGraph']> = {
-  siteName: SITE_NAME,
-  type: 'website',
-  locale: 'en_US',
-  images: [
-    {
-      url: buildAbsoluteMetadataUrl(DEFAULT_OG_IMAGE_PATH),
-      width: 1200,
-      height: 630,
-      alt: 'TeacherBuddy Logo',
-    },
-  ],
-};
-
-/**
- * Shared Twitter card fields reused in layout and page metadata.
- */
-export const SHARED_TWITTER: NonNullable<Metadata['twitter']> = {
-  card: 'summary_large_image',
-  images: [buildAbsoluteMetadataUrl(DEFAULT_OG_IMAGE_PATH)],
-};
-
-/**
- * Resolves a stable metadata base URL from runtime environment variables.
- */
-export function resolveMetadataBase(): URL {
-  const explicitSiteUrl = normalizeEnvUrl(process.env.NEXT_PUBLIC_SITE_URL);
-  if (explicitSiteUrl) {
-    return new URL(explicitSiteUrl);
-  }
-
-  const vercelSiteUrl = normalizeEnvUrl(
-    process.env.VERCEL_PROJECT_PRODUCTION_URL ?? process.env.VERCEL_URL,
-    { forceHttps: true },
-  );
-  if (vercelSiteUrl) {
-    return new URL(vercelSiteUrl);
-  }
-
-  return new URL(DEFAULT_SITE_URL);
-}
-
-/**
- * Builds full metadata for a route, including canonical, Open Graph, and Twitter fields.
- */
-export function buildPageMetadata(path: string): Metadata {
-  const routeMeta =
-    ROUTE_PAGE_META_BY_PATH[path as keyof typeof ROUTE_PAGE_META_BY_PATH];
-  const title = routeMeta?.title ?? SITE_NAME;
-  const description = routeMeta?.description ?? DEFAULT_SITE_DESCRIPTION;
-  const canonicalPath = resolveCanonicalPath(path);
-  const absoluteCanonicalUrl = buildAbsoluteMetadataUrl(canonicalPath);
-
-  return {
-    title,
-    description,
-    alternates: {
-      canonical: canonicalPath,
-    },
-    openGraph: {
-      ...SHARED_OPEN_GRAPH,
-      title,
-      description,
-      url: absoluteCanonicalUrl,
-    },
-    twitter: {
-      ...SHARED_TWITTER,
-      title,
-      description,
-      creator: '@_MstrBubbles',
-    },
-  };
-}
-
-function resolveCanonicalPath(path: string): string {
-  if (path.startsWith('/')) {
-    return path;
-  }
-
-  return '/';
-}
-
-function normalizeEnvUrl(
-  value: string | undefined,
-  options?: { forceHttps?: boolean },
-): string | null {
-  if (!value) {
-    return null;
-  }
-
-  const trimmedValue = value.trim();
-  if (!trimmedValue) {
-    return null;
-  }
-
-  const hasProtocol = URL_PROTOCOL_PATTERN.test(trimmedValue);
-  const isLocalHostValue =
-    trimmedValue.startsWith('localhost') ||
-    trimmedValue.startsWith('127.0.0.1');
-  const inferredProtocol = isLocalHostValue ? 'http://' : 'https://';
-  const normalizedInput = hasProtocol
-    ? trimmedValue
-    : `${inferredProtocol}${trimmedValue}`;
-
-  try {
-    const normalizedUrl = new URL(normalizedInput);
-    if (options?.forceHttps) {
-      normalizedUrl.protocol = 'https:';
-    }
-
-    return normalizedUrl.toString();
-  } catch {
-    return null;
-  }
-}
-
-/**
- * Resolves an absolute metadata URL from a path using the active site base.
- */
-function buildAbsoluteMetadataUrl(path: string): string {
-  return new URL(path, resolveMetadataBase()).toString();
-}
diff --git a/lib/page-info.tsx b/lib/page-info.tsx
index d3b965a..dde99ca 100644
--- a/lib/page-info.tsx
+++ b/lib/page-info.tsx
@@ -14,7 +14,8 @@ export type PageInfo = RoutePageMeta & {
 };
 
 /**
- * Route help content used by the page info dialog and header guidance UI.
+ * Route help content used by the info panel and header guidance UI.
+ * Written in a warm, practical tone for classroom teachers.
  */
 export const PAGE_INFOS: PageInfo[] = [
   {
@@ -22,34 +23,34 @@ export const PAGE_INFOS: PageInfo[] = [
     help: {
       purpose: (
         <>
-          This page is your main starting point. It gives you one clear place to
-          choose the next teaching task, whether you are preparing materials
-          before class or guiding activities live.
+          Your home base. Everything starts here — pick a tool, jump into a
+          lesson, or check on what you set up earlier. Think of it as your
+          teaching control room.
         </>
       ),
       howTo: [
         <>
-          <strong>Pick the goal first:</strong> Scan the cards and choose the
-          workflow that matches what you need right now.
+          <strong>Glance at the cards</strong> to find what you need — each one
+          is a different classroom tool.
         </>,
         <>
-          <strong>Start with your roster:</strong> If this is your first setup,
-          open Student Management and confirm your student list is ready.
+          <strong>New here?</strong> Head to Students first and get your class
+          roster in. Everything else builds on that.
         </>,
         <>
-          <strong>Move by activity:</strong> Use Generator for fair calling,
-          Breakout Rooms for groups, Quizzes for authoring, Quiz Play for live
-          delivery, and Projects for saved team lists.
+          <strong>Tap any card</strong> to jump straight to that tool. Generator
+          for calling on students, Breakout Rooms for groups, Quizzes for
+          building questions, and so on.
         </>,
         <>
-          <strong>Return here anytime:</strong> Come back to switch workflows
-          quickly as your lesson changes.
+          <strong>Come back anytime</strong> — this page is always just a tap
+          away when you need to switch gears mid-lesson.
         </>,
       ],
       outcome: (
         <>
-          You can move through your full class workflow smoothly without
-          guessing where each tool lives.
+          You always know where to go next, whether you are prepping before
+          class or pivoting during one.
         </>
       ),
     },
@@ -59,32 +60,33 @@ export const PAGE_INFOS: PageInfo[] = [
     help: {
       purpose: (
         <>
-          This is your roster home. Every other feature depends on this list, so
-          keeping names accurate here keeps the rest of the app accurate too.
+          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.
         </>
       ),
       howTo: [
         <>
-          <strong>Add students quickly:</strong> Type names manually or import
-          multiple names from a comma-separated text file.
+          <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>Clean up names:</strong> Edit spelling or format so names are
-          consistent and easy to recognize.
+          <strong>Fix a name?</strong> Just tap the edit button next to it and
+          correct the spelling.
         </>,
         <>
-          <strong>Track availability:</strong> Mark students absent when needed
-          so selection and grouping tools reflect who is available.
+          <strong>Student absent today?</strong> Toggle them to absent so they
+          will not show up in the random generator or group maker.
         </>,
         <>
-          <strong>Keep it current:</strong> Remove outdated names so this page
-          stays your single source of truth.
+          <strong>Student left the class?</strong> Delete them to keep the
+          roster clean.
         </>,
       ],
       outcome: (
         <>
-          You get a clean, up-to-date roster that powers Generator, Breakout
-          Rooms, Quizzes, and Projects.
+          A clean, current class list that keeps all your other tools accurate
+          and ready to go.
         </>
       ),
     },
@@ -94,32 +96,29 @@ export const PAGE_INFOS: PageInfo[] = [
     help: {
       purpose: (
         <>
-          Use this page for fair random calling. It helps you involve everyone
-          and avoids immediate repeats.
+          Need to call on someone? This tool picks a random student from your
+          roster so everyone gets a fair turn — no playing favorites, no
+          forgetting who already went.
         </>
       ),
       howTo: [
         <>
-          <strong>Open when class starts:</strong> Use the generator whenever
-          you are ready to call on students.
+          <strong>Tap &quot;Draw&quot;</strong> to pick a random student. Their name pops
+          up big and clear.
         </>,
         <>
-          <strong>Draw one name:</strong> Each draw picks one student from the
-          current available pool.
+          <strong>Keep going</strong> — each draw picks someone new so nobody
+          gets called twice in a row.
         </>,
         <>
-          <strong>Continue through the lesson:</strong> Keep drawing as class
-          progresses to balance participation.
-        </>,
-        <>
-          <strong>Reset when needed:</strong> Start a fresh cycle whenever you
-          want all students back in the selection pool.
+          <strong>Gone through everyone?</strong> Hit reset to start a fresh
+          round with all students back in the pool.
         </>,
       ],
       outcome: (
         <>
-          You can call on students fairly and keep participation balanced across
-          the room.
+          Fair, random participation without the awkward &quot;who has not gone yet?&quot;
+          moment.
         </>
       ),
     },
@@ -129,32 +128,33 @@ export const PAGE_INFOS: PageInfo[] = [
     help: {
       purpose: (
         <>
-          This page helps you create groups quickly for partner work, stations,
-          and team activities without manual sorting.
+          Splits your class into groups instantly — great for partner work, lab
+          stations, discussion circles, or any activity where you need teams
+          fast.
         </>
       ),
       howTo: [
         <>
-          <strong>Choose your grouping approach:</strong> Pick the setup that
-          fits your activity plan.
+          <strong>Pick how many groups</strong> or how many students per group —
+          whichever is easier for your activity.
         </>,
         <>
-          <strong>Generate first draft groups:</strong> Create groups from your
-          current roster and review the result.
+          <strong>Tap generate</strong> and the app shuffles your roster into
+          random groups.
         </>,
         <>
-          <strong>Adjust by reshuffling:</strong> Regenerate groups if you want
-          a different class mix.
+          <strong>Not happy with the mix?</strong> Just regenerate for a
+          different arrangement.
         </>,
         <>
-          <strong>Run the activity:</strong> Use the final grouping in class and
-          regenerate later when you need a new setup.
+          <strong>Happy with it?</strong> Use those groups for your lesson. Come
+          back and regenerate whenever you need new ones.
         </>,
       ],
       outcome: (
         <>
-          You save setup time and get practical, ready-to-use student groups in
-          seconds.
+          Ready-to-use student groups in seconds, instead of spending five
+          minutes sorting kids into teams.
         </>
       ),
     },
@@ -164,32 +164,33 @@ export const PAGE_INFOS: PageInfo[] = [
     help: {
       purpose: (
         <>
-          Use this page to prepare quiz content before class so live delivery is
-          smooth and focused.
+          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.
         </>
       ),
       howTo: [
         <>
-          <strong>Create a quiz set:</strong> Add clear questions and the
-          answers you expect students to give.
+          <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>Review quality:</strong> Check wording, order, and difficulty
-          before using the quiz with students.
+          <strong>Add questions one by one</strong> — type the question and the
+          answer you are looking for.
         </>,
         <>
-          <strong>Refine over time:</strong> Update questions as class needs and
-          lesson goals evolve.
+          <strong>Need to import a bunch?</strong> Paste questions from a
+          spreadsheet or document to save time.
         </>,
         <>
-          <strong>Switch to live mode:</strong> Open Quiz Play when your quiz is
-          ready to run in class.
+          <strong>Ready to use it live?</strong> Head over to Quiz Play to run
+          it with your class.
         </>,
       ],
       outcome: (
         <>
-          You have organized quiz sets ready to deliver without last-minute
-          editing.
+          Polished quiz sets you can reuse across classes and semesters —
+          no more scrambling for questions.
         </>
       ),
     },
@@ -199,32 +200,32 @@ export const PAGE_INFOS: PageInfo[] = [
     help: {
       purpose: (
         <>
-          This is the live classroom view for running quizzes with clear pacing
-          and fair participation.
+          The live quiz screen for your classroom. It picks a random student and
+          a question, then lets you reveal the answer when they are ready. Great
+          for reviews, warm-ups, or exit tickets.
         </>
       ),
       howTo: [
         <>
-          <strong>Start a round:</strong> Draw one student and one question from
-          your prepared quiz set.
+          <strong>Pick a quiz</strong> from the dropdown — these are the ones
+          you built in Quiz Builder.
         </>,
         <>
-          <strong>Pause for response:</strong> Give the student time to answer
-          before revealing the correct result.
+          <strong>Tap &quot;Draw&quot;</strong> to get a random student + question combo.
         </>,
         <>
-          <strong>Reveal and continue:</strong> Show the answer, then move to
-          the next round to keep class momentum.
+          <strong>Give them a moment</strong> to think, then tap &quot;Reveal&quot; to
+          show the answer.
         </>,
         <>
-          <strong>Use repeatedly:</strong> Run this flow for quick checks or
-          full quiz sessions.
+          <strong>Keep drawing</strong> for more rounds. The timer up top helps
+          you pace things.
         </>,
       ],
       outcome: (
         <>
-          You can run interactive quiz rounds with less friction and better
-          classroom rhythm.
+          Engaging, fair quiz rounds that keep the whole class on their toes —
+          not just the hand-raisers.
         </>
       ),
     },
@@ -234,32 +235,33 @@ export const PAGE_INFOS: PageInfo[] = [
     help: {
       purpose: (
         <>
-          Use this page to build and save project team lists you can return to
-          across multiple lessons.
+          Save student lineups for projects that span multiple days. Pick who
+          is on each project, optionally group them into teams, and come back
+          to the same list next week.
         </>
       ),
       howTo: [
         <>
-          <strong>Select who belongs:</strong> Choose the students for a
-          specific project list.
+          <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;).
         </>,
         <>
-          <strong>Shape team structure:</strong> Group students in a way that
-          supports your assignment goals.
+          <strong>Select the students</strong> who belong on this project. You
+          can pick from your full roster.
         </>,
         <>
-          <strong>Save for later:</strong> Keep the list so you can reuse or
-          adjust it in future sessions.
+          <strong>Want teams?</strong> Turn on grouping and set the group
+          size — the app divides students automatically.
         </>,
         <>
-          <strong>Manage multiple lists:</strong> Maintain different team setups
-          for different classes or units.
+          <strong>Save it</strong> and come back to edit, add students, or
+          create a new list whenever you need.
         </>,
       ],
       outcome: (
         <>
-          You keep project group planning organized, reusable, and easy to
-          maintain.
+          Organized project lists you can pull up anytime — no more sticky notes
+          or lost spreadsheets.
         </>
       ),
     },
diff --git a/lib/site-url.ts b/lib/site-url.ts
new file mode 100644
index 0000000..baf242d
--- /dev/null
+++ b/lib/site-url.ts
@@ -0,0 +1,22 @@
+const PRODUCTION_URL = 'https://teacherbuddy.mrbubbles-src.dev';
+
+/**
+ * Resolves the canonical site URL from environment variables.
+ * Checks `NEXT_PUBLIC_SITE_URL` first, then Vercel env vars, then falls back
+ * to the production URL.
+ */
+export function resolveSiteUrl(): URL {
+  const explicit = process.env.NEXT_PUBLIC_SITE_URL?.trim();
+  if (explicit) {
+    return new URL(explicit);
+  }
+
+  const vercel = (
+    process.env.VERCEL_PROJECT_PRODUCTION_URL ?? process.env.VERCEL_URL
+  )?.trim();
+  if (vercel) {
+    return new URL(`https://${vercel}`);
+  }
+
+  return new URL(PRODUCTION_URL);
+}
diff --git a/lib/storage.ts b/lib/storage.ts
index 7121bb4..e45771a 100644
--- a/lib/storage.ts
+++ b/lib/storage.ts
@@ -19,6 +19,7 @@ const QUIZ_INDEX_KEY = "teacherbuddy:quiz-index"
 const PROJECT_LISTS_KEY = "teacherbuddy:project-lists"
 const BREAKOUT_GROUPS_KEY = "teacherbuddy:breakout-groups"
 const TIMER_KEY = "teacherbuddy:timer"
+const TIMER_FAVORITES_KEY = "teacherbuddy:timer-favorites"
 const PRIVACY_NOTICE_ACK_KEY = "teacherbuddy:privacy-notice-acknowledged"
 
 const quizKey = (id: string) => `teacherbuddy:quiz:${id}`
@@ -275,3 +276,33 @@ export function setPrivacyNoticeAcknowledged(): void {
   if (typeof window === "undefined") return
   localStorage.setItem(PRIVACY_NOTICE_ACK_KEY, "1")
 }
+
+/**
+ * Loads the user's favorite timer preset values (in seconds) from localStorage.
+ * Returns the default set [60, 300, 900] when nothing is stored or data is invalid.
+ * Allows 0–3 favorites.
+ */
+export function loadTimerFavorites(): number[] {
+  if (typeof window === "undefined") return [60, 300, 900]
+  const parsed = safeParse<unknown>(
+    localStorage.getItem(TIMER_FAVORITES_KEY),
+    null
+  )
+  if (
+    !Array.isArray(parsed) ||
+    parsed.length > 3 ||
+    !parsed.every((v) => typeof v === "number" && v > 0)
+  ) {
+    return [60, 300, 900]
+  }
+  return parsed as number[]
+}
+
+/**
+ * Persists the user's favorite timer preset values (in seconds).
+ * Accepts 0–3 positive numbers.
+ */
+export function saveTimerFavorites(favorites: number[]): void {
+  if (typeof window === "undefined") return
+  localStorage.setItem(TIMER_FAVORITES_KEY, JSON.stringify(favorites))
+}
diff --git a/package.json b/package.json
index 37f0989..3c418a5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "teacherbuddy",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "private": true,
   "packageManager": "bun@1.3.4",
   "scripts": {