diff --git a/app/(protected)/error.tsx b/app/(protected)/error.tsx
new file mode 100644
index 0000000..1170187
--- /dev/null
+++ b/app/(protected)/error.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import { useEffect } from "react";
+import { AlertTriangle, RefreshCw } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Link } from "@/lib/router";
+
+export default function ProtectedError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  useEffect(() => {
+    console.error("[StudyOS] protected route failed", error);
+  }, [error]);
+
+  return (
+    <Card className="mx-auto max-w-xl border-destructive/20 shadow-card" role="alert">
+      <CardContent className="flex flex-col items-center px-6 py-12 text-center">
+        <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-destructive/10">
+          <AlertTriangle className="h-5 w-5 text-destructive" />
+        </div>
+        <h1 className="mt-4 text-lg font-semibold text-foreground">This page could not be loaded</h1>
+        <p className="mt-1.5 max-w-md text-sm leading-6 text-muted-foreground">
+          Your data is safe. Try loading the page again, or return to the dashboard if the problem continues.
+        </p>
+        <div className="mt-5 flex flex-col gap-2 sm:flex-row">
+          <Button onClick={reset}>
+            <RefreshCw className="mr-2 h-4 w-4" />
+            Try again
+          </Button>
+          <Button asChild variant="outline">
+            <Link to="/">Return to dashboard</Link>
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/app/(protected)/loading.tsx b/app/(protected)/loading.tsx
new file mode 100644
index 0000000..55e2d31
--- /dev/null
+++ b/app/(protected)/loading.tsx
@@ -0,0 +1,22 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function ProtectedLoading() {
+  return (
+    <div className="space-y-5" role="status" aria-label="Loading workspace">
+      <div className="rounded-2xl border border-border bg-card p-5 shadow-card">
+        <Skeleton className="h-5 w-36" />
+        <Skeleton className="mt-3 h-3 w-64 max-w-full" />
+        <div className="mt-5 grid grid-cols-2 gap-3 sm:grid-cols-4">
+          {Array.from({ length: 4 }).map((_, index) => (
+            <Skeleton key={index} className="h-20 rounded-xl" />
+          ))}
+        </div>
+      </div>
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Skeleton className="h-64 rounded-2xl" />
+        <Skeleton className="h-64 rounded-2xl" />
+      </div>
+      <span className="sr-only">Loading your StudyOS workspace…</span>
+    </div>
+  );
+}
diff --git a/app/not-found.tsx b/app/not-found.tsx
index b45dfe9..2a2ae42 100644
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -1,15 +1,26 @@
 import Link from "next/link";
+import { ArrowLeft, SearchX } from "lucide-react";
 
 export default function NotFound() {
   return (
-    <div className="flex min-h-screen items-center justify-center bg-muted">
-      <div className="text-center">
-        <h1 className="mb-4 text-4xl font-bold">404</h1>
-        <p className="mb-4 text-xl text-muted-foreground">Oops! Page not found</p>
-        <Link href="/" className="text-primary underline hover:text-primary/90">
-          Return to Home
+    <main className="flex min-h-screen items-center justify-center bg-muted/30 px-4">
+      <div className="w-full max-w-md rounded-2xl border border-border bg-card p-8 text-center shadow-card">
+        <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10 text-primary">
+          <SearchX className="h-6 w-6" />
+        </div>
+        <p className="mt-5 text-xs font-semibold uppercase tracking-[0.18em] text-primary">404 error</p>
+        <h1 className="mt-2 text-2xl font-bold tracking-tight text-foreground">Page not found</h1>
+        <p className="mt-2 text-sm leading-6 text-muted-foreground">
+          The page may have moved, or the link may be incorrect.
+        </p>
+        <Link
+          href="/"
+          className="mt-6 inline-flex h-10 items-center justify-center gap-2 rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+        >
+          <ArrowLeft className="h-4 w-4" />
+          Return to dashboard
         </Link>
       </div>
-    </div>
+    </main>
   );
 }
diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx
index ae32f3a..d5c4ff7 100644
--- a/src/components/AppLayout.tsx
+++ b/src/components/AppLayout.tsx
@@ -31,10 +31,16 @@ export function AppLayout({ children }: { children: ReactNode }) {
   return (
     <SidebarProvider>
       <div className="flex min-h-screen w-full bg-background">
+        <a
+          href="#main-content"
+          className="fixed left-4 top-3 z-[100] -translate-y-20 rounded-lg bg-primary px-3 py-2 text-sm font-semibold text-primary-foreground shadow-lg transition-transform focus:translate-y-0"
+        >
+          Skip to main content
+        </a>
         <AppSidebar />
         <div className="flex flex-1 flex-col min-w-0">
-          <header className="sticky top-0 z-30 flex h-14 items-center justify-between border-b border-border bg-background/80 backdrop-blur-md px-4 lg:px-6">
-            <div className="flex items-center gap-3">
+          <header className="sticky top-0 z-30 flex h-14 items-center justify-between border-b border-border bg-background/90 px-3 backdrop-blur-md sm:px-4 lg:px-6">
+            <div className="flex min-w-0 items-center gap-2 sm:gap-3">
               <SidebarTrigger className="text-muted-foreground hover:text-foreground transition-colors" />
               <GlobalSearch />
             </div>
@@ -42,9 +48,13 @@ export function AppLayout({ children }: { children: ReactNode }) {
               <NotificationBell />
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                  <button className="relative rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background cursor-pointer group">
-                    <Avatar className="h-8 w-8 border border-border transition-all duration-200 group-hover:ring-2 group-hover:ring-primary/40 group-hover:scale-105 group-hover:brightness-110">
-                      <AvatarImage src={user?.user_metadata?.avatar_url} />
+                  <button
+                    type="button"
+                    aria-label={`Open account menu for ${displayName}`}
+                    className="relative cursor-pointer rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background group"
+                  >
+                    <Avatar className="h-8 w-8 border border-border transition-all duration-200 group-hover:ring-2 group-hover:ring-primary/40 group-hover:brightness-110">
+                      <AvatarImage src={user?.user_metadata?.avatar_url} alt="" />
                       <AvatarFallback className="text-xs font-semibold bg-muted text-muted-foreground">{initials}</AvatarFallback>
                     </Avatar>
                     <span className="absolute bottom-0 right-0 block h-2.5 w-2.5 rounded-full bg-green-500 ring-2 ring-background" />
@@ -75,7 +85,7 @@ export function AppLayout({ children }: { children: ReactNode }) {
               </DropdownMenu>
             </div>
           </header>
-          <main className="flex-1 overflow-auto p-4 lg:p-6">
+          <main id="main-content" tabIndex={-1} className="flex-1 overflow-auto p-3 outline-none sm:p-4 lg:p-6">
             <div className="mx-auto max-w-6xl">
               {children}
             </div>
diff --git a/src/components/AppSidebar.tsx b/src/components/AppSidebar.tsx
index b9458ad..0f34d83 100644
--- a/src/components/AppSidebar.tsx
+++ b/src/components/AppSidebar.tsx
@@ -56,7 +56,17 @@ const gradientToColor: Record<string, string> = {
   "gradient-sunset": "text-amber",
 };
 
-function NavSection({ label, items, collapsed }: { label: string; items: typeof mainNav; collapsed: boolean }) {
+function NavSection({
+  label,
+  items,
+  collapsed,
+  onNavigate,
+}: {
+  label: string;
+  items: typeof mainNav;
+  collapsed: boolean;
+  onNavigate: () => void;
+}) {
   return (
     <SidebarGroup>
       <SidebarGroupLabel className="px-3 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
@@ -70,6 +80,7 @@ function NavSection({ label, items, collapsed }: { label: string; items: typeof
                 <NavLink
                   to={item.url}
                   end={item.url === "/"}
+                  onClick={onNavigate}
                   className="flex items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-sidebar-foreground transition-all duration-200 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
                   activeClassName="bg-sidebar-accent text-sidebar-accent-foreground font-semibold"
                 >
@@ -86,9 +97,12 @@ function NavSection({ label, items, collapsed }: { label: string; items: typeof
 }
 
 export function AppSidebar() {
-  const { state } = useSidebar();
+  const { state, isMobile, setOpenMobile } = useSidebar();
   const collapsed = state === "collapsed";
   const { signOut, user } = useAuth();
+  const closeMobileNavigation = () => {
+    if (isMobile) setOpenMobile(false);
+  };
 
   const { data: courses = [] } = useQuery({
     queryKey: ["courses", user?.id, "summary"],
@@ -117,9 +131,9 @@ export function AppSidebar() {
       </SidebarHeader>
 
       <SidebarContent className="px-3">
-        <NavSection label="Main" items={mainNav} collapsed={collapsed} />
-        <NavSection label="Learning" items={learningNav} collapsed={collapsed} />
-        <NavSection label="AI" items={aiNav} collapsed={collapsed} />
+        <NavSection label="Main" items={mainNav} collapsed={collapsed} onNavigate={closeMobileNavigation} />
+        <NavSection label="Learning" items={learningNav} collapsed={collapsed} onNavigate={closeMobileNavigation} />
+        <NavSection label="AI" items={aiNav} collapsed={collapsed} onNavigate={closeMobileNavigation} />
 
         {/* Dynamic Courses */}
         {courses.length > 0 && (
@@ -134,6 +148,7 @@ export function AppSidebar() {
                     <SidebarMenuButton asChild>
                       <NavLink
                         to={`/courses/${course.id}`}
+                        onClick={closeMobileNavigation}
                         className="flex items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-sidebar-foreground transition-all duration-200 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
                         activeClassName="bg-sidebar-accent text-sidebar-accent-foreground font-semibold"
                       >
@@ -157,6 +172,7 @@ export function AppSidebar() {
             <SidebarMenuButton asChild>
               <NavLink
                 to="/settings"
+                onClick={closeMobileNavigation}
                 className="flex items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-sidebar-foreground transition-all duration-200 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
                 activeClassName="bg-sidebar-accent text-sidebar-accent-foreground font-semibold"
               >
@@ -168,7 +184,10 @@ export function AppSidebar() {
           <SidebarMenuItem>
             <SidebarMenuButton asChild>
               <button
-                onClick={signOut}
+                onClick={() => {
+                  closeMobileNavigation();
+                  void signOut();
+                }}
                 className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-muted-foreground transition-all duration-200 hover:bg-destructive/10 hover:text-destructive"
               >
                 <LogOut className="h-[18px] w-[18px] shrink-0" />
diff --git a/src/components/GlobalSearch.tsx b/src/components/GlobalSearch.tsx
index 05a02a1..adccb10 100644
--- a/src/components/GlobalSearch.tsx
+++ b/src/components/GlobalSearch.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState, useCallback, useRef } from "react";
 import { useNavigate } from "@/lib/router";
-import { Search, BookOpen, FileText, GraduationCap, CalendarDays, Calendar, Paperclip, Clock, X } from "lucide-react";
+import { Search, BookOpen, FileText, GraduationCap, CalendarDays, Calendar, Paperclip, Clock, Loader2, X } from "lucide-react";
 import { supabase } from "@/integrations/supabase/client";
 import { useAuth } from "@/contexts/AuthContext";
 import { format } from "date-fns";
@@ -52,12 +52,14 @@ export function GlobalSearch() {
   const [query, setQuery] = useState("");
   const [results, setResults] = useState<SearchResult[]>([]);
   const [loading, setLoading] = useState(false);
+  const [searchError, setSearchError] = useState<string | null>(null);
   const [open, setOpen] = useState(false);
   const [activeIndex, setActiveIndex] = useState(-1);
   const navigate = useNavigate();
   const { user } = useAuth();
   const containerRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
+  const searchRequestRef = useRef(0);
 
   // Close on outside click
   useEffect(() => {
@@ -84,20 +86,32 @@ export function GlobalSearch() {
   }, []);
 
   const search = useCallback(async (q: string) => {
-    if (!user || !q.trim()) { setResults([]); return; }
+    const requestId = ++searchRequestRef.current;
+    if (!user || !q.trim()) {
+      setResults([]);
+      setSearchError(null);
+      setLoading(false);
+      return;
+    }
     setLoading(true);
+    setSearchError(null);
     const term = `%${q.trim()}%`;
 
-    const [courses, assignments, exams, events, academicDates, materials] = await Promise.all([
-      supabase.from("courses").select("id, name, code").ilike("name", term).limit(3),
-      supabase.from("assignments").select("id, title, due_date, course_id, courses(name, code)").ilike("title", term).limit(3),
-      supabase.from("exams").select("id, title, exam_date, exam_type, course_id, courses(name, code)").ilike("title", term).limit(3),
-      supabase.from("events").select("id, title, start_time, event_type").ilike("title", term).limit(3),
-      supabase.from("academic_calendar_dates").select("id, title, start_date, end_date").ilike("title", term).eq("is_hidden", false).limit(3),
-      supabase.from("course_materials").select("id, file_name, course_id, courses(name, code)").ilike("file_name", term).limit(3),
-    ]);
+    try {
+      const [courses, assignments, exams, events, academicDates, materials] = await Promise.all([
+        supabase.from("courses").select("id, name, code").ilike("name", term).limit(3),
+        supabase.from("assignments").select("id, title, due_date, course_id, courses(name, code)").ilike("title", term).limit(3),
+        supabase.from("exams").select("id, title, exam_date, exam_type, course_id, courses(name, code)").ilike("title", term).limit(3),
+        supabase.from("events").select("id, title, start_time, event_type").ilike("title", term).limit(3),
+        supabase.from("academic_calendar_dates").select("id, title, start_date, end_date").ilike("title", term).eq("is_hidden", false).limit(3),
+        supabase.from("course_materials").select("id, file_name, course_id, courses(name, code)").ilike("file_name", term).limit(3),
+      ]);
 
-    const mapped: SearchResult[] = [
+      const failedRequest = [courses, assignments, exams, events, academicDates, materials]
+        .find((result) => result.error);
+      if (failedRequest?.error) throw failedRequest.error;
+
+      const mapped: SearchResult[] = [
       ...(courses.data || []).map(c => ({
         id: c.id, title: c.code ? `${c.code} – ${c.name}` : c.name,
         category: "course" as const, route: `/courses/${c.id}`,
@@ -127,10 +141,17 @@ export function GlobalSearch() {
         subtitle: (m.courses as any)?.code || (m.courses as any)?.name,
         category: "material" as const, route: `/courses/${m.course_id}`,
       })),
-    ];
+      ];
 
-    setResults(mapped);
-    setLoading(false);
+      if (requestId === searchRequestRef.current) setResults(mapped);
+    } catch {
+      if (requestId === searchRequestRef.current) {
+        setResults([]);
+        setSearchError("Search is temporarily unavailable. Please try again.");
+      }
+    } finally {
+      if (requestId === searchRequestRef.current) setLoading(false);
+    }
   }, [user]);
 
   useEffect(() => {
@@ -179,7 +200,7 @@ export function GlobalSearch() {
   const showRecent = !query.trim() && allItems.length > 0;
 
   return (
-    <div ref={containerRef} className="relative hidden sm:block w-64">
+    <div ref={containerRef} className="relative w-36 sm:w-64">
       <div className="relative">
         <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground pointer-events-none" />
         <Input
@@ -189,22 +210,37 @@ export function GlobalSearch() {
           onFocus={() => setOpen(true)}
           onKeyDown={handleKeyDown}
           placeholder="Search…"
-          className="h-8 pl-8 pr-16 text-xs bg-muted/60 border-none focus-visible:ring-1 focus-visible:ring-ring"
+          role="combobox"
+          aria-label="Search your StudyOS workspace"
+          aria-expanded={open}
+          aria-controls="global-search-results"
+          aria-autocomplete="list"
+          aria-activedescendant={activeIndex >= 0 ? `global-search-option-${activeIndex}` : undefined}
+          className="h-8 bg-muted/60 pl-8 pr-8 text-xs border-none focus-visible:ring-1 focus-visible:ring-ring sm:pr-16"
         />
         <div className="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1">
           {query && (
-            <button onClick={() => { setQuery(""); setResults([]); inputRef.current?.focus(); }} className="text-muted-foreground hover:text-foreground p-0.5">
+            <button type="button" aria-label="Clear search" onClick={() => { setQuery(""); setResults([]); inputRef.current?.focus(); }} className="p-0.5 text-muted-foreground hover:text-foreground">
               <X className="h-3 w-3" />
             </button>
           )}
-          <kbd className="rounded bg-background px-1.5 py-0.5 text-[10px] font-mono border border-border text-muted-foreground">⌘K</kbd>
+          <kbd className="hidden rounded border border-border bg-background px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground sm:inline-flex">⌘K</kbd>
         </div>
       </div>
 
-      {open && (allItems.length > 0 || (query.trim() && !loading)) && (
-        <div className="absolute top-full left-0 right-0 mt-1 z-50 rounded-lg border border-border bg-popover shadow-md overflow-hidden">
+      {open && (allItems.length > 0 || (query.trim() && (loading || searchError || results.length === 0))) && (
+        <div id="global-search-results" role="listbox" className="absolute -left-10 top-full z-50 mt-1 w-[calc(100vw-2rem)] max-w-80 overflow-hidden rounded-lg border border-border bg-popover shadow-md sm:left-0 sm:right-0 sm:w-auto">
           <div className="max-h-72 overflow-y-auto py-1">
-            {query.trim() && !loading && results.length === 0 && (
+            {query.trim() && loading && (
+              <div className="flex items-center justify-center gap-2 py-4 text-xs text-muted-foreground" role="status">
+                <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                Searching…
+              </div>
+            )}
+            {query.trim() && !loading && searchError && (
+              <p className="px-4 py-4 text-center text-xs text-destructive" role="alert">{searchError}</p>
+            )}
+            {query.trim() && !loading && !searchError && results.length === 0 && (
               <p className="text-xs text-muted-foreground text-center py-4">No results found.</p>
             )}
 
@@ -214,7 +250,7 @@ export function GlobalSearch() {
               </div>
             )}
 
-            {!showRecent && Object.entries(grouped).map(([cat, items]) => {
+            {!loading && !searchError && !showRecent && Object.entries(grouped).map(([cat, items]) => {
               const config = CATEGORY_CONFIG[cat as keyof typeof CATEGORY_CONFIG];
               return (
                 <div key={cat}>
@@ -227,7 +263,10 @@ export function GlobalSearch() {
                     return (
                       <button
                         key={r.id}
-                        onMouseDown={() => handleSelect(r)}
+                        id={`global-search-option-${idx}`}
+                        role="option"
+                        aria-selected={idx === activeIndex}
+                        onMouseDown={(event) => { event.preventDefault(); handleSelect(r); }}
                         onMouseEnter={() => setActiveIndex(idx)}
                         className={`flex items-center gap-2 w-full px-2 py-1.5 text-left text-sm transition-colors ${idx === activeIndex ? "bg-accent text-accent-foreground" : "hover:bg-accent/50"}`}
                       >
@@ -248,7 +287,10 @@ export function GlobalSearch() {
               return (
                 <button
                   key={`recent-${r.id}`}
-                  onMouseDown={() => handleSelect(r)}
+                  id={`global-search-option-${idx}`}
+                  role="option"
+                  aria-selected={idx === activeIndex}
+                  onMouseDown={(event) => { event.preventDefault(); handleSelect(r); }}
                   onMouseEnter={() => setActiveIndex(idx)}
                   className={`flex items-center gap-2 w-full px-2 py-1.5 text-left text-sm transition-colors ${idx === activeIndex ? "bg-accent text-accent-foreground" : "hover:bg-accent/50"}`}
                 >
diff --git a/src/components/ProtectedRoute.tsx b/src/components/ProtectedRoute.tsx
index f02186b..2bbc0a5 100644
--- a/src/components/ProtectedRoute.tsx
+++ b/src/components/ProtectedRoute.tsx
@@ -7,8 +7,9 @@ export function ProtectedRoute({ children }: { children: React.ReactNode }) {
 
   if (loading) {
     return (
-      <div className="flex min-h-screen items-center justify-center bg-background">
+      <div className="flex min-h-screen items-center justify-center bg-background" role="status" aria-live="polite">
         <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
+        <span className="sr-only">Checking your session…</span>
       </div>
     );
   }
diff --git a/src/components/ScheduleScreenshotImport.tsx b/src/components/ScheduleScreenshotImport.tsx
index 5f90e9f..7d73a08 100644
--- a/src/components/ScheduleScreenshotImport.tsx
+++ b/src/components/ScheduleScreenshotImport.tsx
@@ -1,4 +1,4 @@
-import { useState, useRef } from "react";
+import { useEffect, useState, useRef } from "react";
 import { ImagePlus, Loader2, Check } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
@@ -41,6 +41,12 @@ export default function ScheduleScreenshotImport({ currentDate, label = "Import
   const [saving, setSaving] = useState(false);
   const [previewUrl, setPreviewUrl] = useState<string | null>(null);
 
+  useEffect(() => {
+    return () => {
+      if (previewUrl) URL.revokeObjectURL(previewUrl);
+    };
+  }, [previewUrl]);
+
   // Course creation is now automatic (no review dialog needed)
 
   const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -77,7 +83,7 @@ export default function ScheduleScreenshotImport({ currentDate, label = "Import
         // Extract the most useful description we can.
         const msg: string = error?.message || "";
         if (msg.includes("Failed to send") || msg.includes("network") || msg.includes("fetch")) {
-          throw new Error("Could not reach the edge function. Make sure it is deployed: npx supabase functions deploy parse-schedule-screenshot");
+          throw new Error("The schedule import service is temporarily unavailable. Please try again.");
         }
         throw new Error(msg || "Edge function error");
       }
@@ -113,6 +119,14 @@ export default function ScheduleScreenshotImport({ currentDate, label = "Import
     );
   };
 
+  const handleReviewOpenChange = (open: boolean) => {
+    setReviewOpen(open);
+    if (!open) {
+      setExtractedEvents([]);
+      setPreviewUrl(null);
+    }
+  };
+
   const extractCoursesFromEvents = (events: ExtractedEvent[]) => {
     const courseMap = new Map<string, { name: string; code: string }>();
     for (const ev of events) {
@@ -280,8 +294,8 @@ export default function ScheduleScreenshotImport({ currentDate, label = "Import
       </Button>
 
       {/* Event Review Dialog */}
-      <Dialog open={reviewOpen} onOpenChange={setReviewOpen}>
-        <DialogContent className="sm:max-w-lg max-h-[85vh] overflow-hidden flex flex-col">
+      <Dialog open={reviewOpen} onOpenChange={handleReviewOpenChange}>
+        <DialogContent className="flex max-h-[90vh] flex-col overflow-hidden sm:max-w-lg">
           <DialogHeader>
             <DialogTitle className="text-base font-semibold">
               Review Detected Events ({extractedEvents.filter((e) => e.selected).length}/{extractedEvents.length})
@@ -296,10 +310,12 @@ export default function ScheduleScreenshotImport({ currentDate, label = "Import
 
           <div className="flex-1 overflow-y-auto space-y-2 pr-1">
             {extractedEvents.map((ev, i) => (
-              <div
+              <button
+                type="button"
                 key={i}
                 onClick={() => toggleEvent(i)}
-                className={`flex items-start gap-3 p-3 rounded-lg border cursor-pointer transition-colors ${
+                aria-pressed={Boolean(ev.selected)}
+                className={`flex w-full cursor-pointer items-start gap-3 rounded-lg border p-3 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ${
                   ev.selected
                     ? "border-primary/30 bg-primary/5"
                     : "border-border bg-muted/10 opacity-60"
@@ -322,11 +338,11 @@ export default function ScheduleScreenshotImport({ currentDate, label = "Import
                 <span className="text-[10px] font-medium text-muted-foreground capitalize bg-muted/30 px-1.5 py-0.5 rounded">
                   {ev.event_type}
                 </span>
-              </div>
+              </button>
             ))}
           </div>
 
-          <div className="flex gap-2 pt-2 border-t border-border">
+          <div className="flex flex-col gap-2 border-t border-border pt-3 sm:flex-row">
             <Button variant="outline" onClick={() => { setReviewOpen(false); setPreviewUrl(null); }} className="flex-1 h-9 text-xs">
               Cancel
             </Button>
diff --git a/src/components/SemesterSetupCard.tsx b/src/components/SemesterSetupCard.tsx
index a2a1596..b5186bc 100644
--- a/src/components/SemesterSetupCard.tsx
+++ b/src/components/SemesterSetupCard.tsx
@@ -692,13 +692,15 @@ function ImportDialog({
   onChooseSource: (source: AcademicCalendarSourceCandidate) => void;
 }) {
   const parsedYear = parseAcademicYear(termYear);
-  const canSearch = collegeName.trim().length > 0 && Boolean(parsedYear) && !searchMutation.isPending;
+  const universityNeedsDetail = collegeName.trim().length > 0 && isUniversityNameVague(collegeName);
+  const yearIsInvalid = termYear.length > 0 && !parsedYear;
+  const canSearch = collegeName.trim().length > 0 && !universityNeedsDetail && Boolean(parsedYear) && !searchMutation.isPending;
   const selectedCount = parsedDates.filter((d) => d.selected).length;
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-h-[85vh] max-w-xl overflow-y-auto rounded-[28px] border border-slate-200/80 bg-white/95 p-0 shadow-[0_32px_90px_-46px_rgba(15,23,42,0.45)]">
-        <DialogHeader className="border-b border-slate-200/80 px-6 pb-4 pt-6">
+      <DialogContent className="max-h-[90vh] max-w-xl overflow-y-auto rounded-[28px] border border-slate-200/80 bg-white/95 p-0 shadow-[0_32px_90px_-46px_rgba(15,23,42,0.45)]">
+        <DialogHeader className="border-b border-slate-200/80 px-4 pb-4 pt-6 sm:px-6">
           <DialogTitle className="flex items-center gap-2">
             <GraduationCap className="h-5 w-5 text-violet-500" />
             {step === "form" ? "Import Academic Calendar" : step === "candidates" ? "Choose Source" : "Review Dates"}
@@ -719,50 +721,60 @@ function ImportDialog({
               initial={{ opacity: 0, x: -10 }}
               animate={{ opacity: 1, x: 0 }}
               exit={{ opacity: 0, x: -10 }}
-              className="space-y-4 px-6 pb-6 pt-5"
+              className="space-y-4 px-4 pb-6 pt-5 sm:px-6"
             >
               <div className="grid gap-3 sm:grid-cols-3">
                 <div>
-                  <Label className="text-[11px] font-medium text-muted-foreground">University Name *</Label>
+                  <Label htmlFor="academic-university" className="text-[11px] font-medium text-muted-foreground">University Name *</Label>
                   <input
+                    id="academic-university"
                     className="input-pro mt-1"
                     placeholder="e.g. Columbia University"
                     value={collegeName}
                     onChange={(e) => setCollegeName(e.target.value)}
+                    aria-invalid={universityNeedsDetail}
+                    aria-describedby="academic-university-help"
                   />
-                  <p className="mt-1 text-[10px] text-muted-foreground">Use the full official school name, not just “Columbia”.</p>
+                  <p id="academic-university-help" className={`mt-1 text-[10px] ${universityNeedsDetail ? "text-destructive" : "text-muted-foreground"}`}>
+                    {universityNeedsDetail ? "Enter the full official university name." : "Use the full official school name, not just “Columbia”."}
+                  </p>
                 </div>
                 <div>
-                  <Label className="text-[11px] font-medium text-muted-foreground">Term *</Label>
-                  <select className="input-pro mt-1" value={termName} onChange={(e) => setTermName(e.target.value as AcademicTermName)}>
+                  <Label htmlFor="academic-term" className="text-[11px] font-medium text-muted-foreground">Term *</Label>
+                  <select id="academic-term" className="input-pro mt-1" value={termName} onChange={(e) => setTermName(e.target.value as AcademicTermName)}>
                     {TERM_OPTIONS.map((option) => (
                       <option key={option} value={option}>{option}</option>
                     ))}
                   </select>
                 </div>
                 <div>
-                  <Label className="text-[11px] font-medium text-muted-foreground">Year *</Label>
+                  <Label htmlFor="academic-year" className="text-[11px] font-medium text-muted-foreground">Year *</Label>
                   <input
+                    id="academic-year"
                     className="input-pro mt-1"
                     inputMode="numeric"
                     placeholder="2026"
                     value={termYear}
                     onChange={(e) => setTermYear(e.target.value.replace(/[^\d]/g, "").slice(0, 4))}
+                    aria-invalid={yearIsInvalid}
+                    aria-describedby={yearIsInvalid ? "academic-year-error" : undefined}
                   />
+                  {yearIsInvalid && <p id="academic-year-error" className="mt-1 text-[10px] text-destructive">Enter a four-digit academic year.</p>}
                 </div>
               </div>
               <div>
-                <Label className="text-[11px] font-medium text-muted-foreground">
+                <Label htmlFor="academic-calendar-text" className="text-[11px] font-medium text-muted-foreground">
                   Paste Calendar Text (optional — improves accuracy)
                 </Label>
                 <Textarea
+                  id="academic-calendar-text"
                   className="mt-1 text-xs min-h-[80px]"
                   placeholder="Paste the academic calendar text from your college's website here..."
                   value={calendarText}
                   onChange={(e) => setCalendarText(e.target.value)}
                 />
               </div>
-              <div className="rounded-2xl border border-slate-200/80 bg-slate-50/80 px-3.5 py-3">
+              <div className="rounded-2xl border border-slate-200/80 bg-slate-50/80 px-3.5 py-3" role="status" aria-live="polite">
                 <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Import Plan</p>
                 <p className="mt-1 text-xs leading-5 text-slate-600">
                   {statusMessage || `Importing ${term} from official ${collegeName || "university"} calendar search with strict term/year validation.`}
@@ -770,7 +782,7 @@ function ImportDialog({
               </div>
               <Button
                 size="sm"
-                className="bg-violet-500 hover:bg-violet-600 text-white text-xs h-8"
+                className="h-8 w-full bg-violet-500 text-xs text-white hover:bg-violet-600 sm:w-auto"
                 onClick={() => searchMutation.mutate()}
                 disabled={!canSearch}
               >
@@ -787,7 +799,7 @@ function ImportDialog({
               initial={{ opacity: 0, x: 10 }}
               animate={{ opacity: 1, x: 0 }}
               exit={{ opacity: 0, x: 10 }}
-              className="space-y-3 px-6 pb-6 pt-5"
+              className="space-y-3 px-4 pb-6 pt-5 sm:px-6"
             >
               <div className="space-y-2">
                 {sourceCandidates.map((candidate) => (
@@ -835,7 +847,7 @@ function ImportDialog({
               initial={{ opacity: 0, x: 10 }}
               animate={{ opacity: 1, x: 0 }}
               exit={{ opacity: 0, x: 10 }}
-              className="space-y-3 px-6 pb-6 pt-5"
+              className="space-y-3 px-4 pb-6 pt-5 sm:px-6"
             >
               {selectedSource && (
                 <div className="rounded-2xl border border-slate-200/80 bg-slate-50/80 px-3.5 py-3">
@@ -850,12 +862,21 @@ function ImportDialog({
                 {parsedDates.map((d, i) => (
                   <div
                     key={i}
-                    className={`flex items-center gap-3 rounded-lg p-3 transition-colors cursor-pointer ${
+                    role="checkbox"
+                    aria-checked={d.selected}
+                    tabIndex={0}
+                    className={`flex cursor-pointer items-center gap-3 rounded-lg p-3 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 focus-visible:ring-offset-2 ${
                       d.selected ? "bg-violet-500/5 border border-violet-500/20" : "bg-muted/20 border border-transparent"
                     }`}
                     onClick={() => toggleSelect(i)}
+                    onKeyDown={(event) => {
+                      if (event.key === "Enter" || event.key === " ") {
+                        event.preventDefault();
+                        toggleSelect(i);
+                      }
+                    }}
                   >
-                    <Checkbox checked={d.selected} className="shrink-0" />
+                    <Checkbox checked={d.selected} tabIndex={-1} aria-hidden="true" className="pointer-events-none shrink-0" />
                     <div className="flex-1 min-w-0">
                       <div className="flex items-center gap-2">
                         <p className="text-sm font-medium text-foreground truncate">{d.title}</p>
@@ -870,7 +891,7 @@ function ImportDialog({
                   </div>
                 ))}
               </div>
-              <div className="flex gap-2 pt-1">
+              <div className="flex flex-col-reverse gap-2 pt-1 sm:flex-row">
                 <Button variant="outline" size="sm" className="text-xs h-8" onClick={onBack}>Back</Button>
                 <Button
                   size="sm"
diff --git a/src/components/SyllabusUploadDialog.tsx b/src/components/SyllabusUploadDialog.tsx
index a2512ba..da1a691 100644
--- a/src/components/SyllabusUploadDialog.tsx
+++ b/src/components/SyllabusUploadDialog.tsx
@@ -206,6 +206,27 @@ export default function SyllabusUploadDialog({
     });
   };
 
+  const handleFileChange = (nextFile?: File) => {
+    if (!nextFile) {
+      setFile(null);
+      return;
+    }
+
+    if (nextFile.size > 20 * 1024 * 1024) {
+      toast.error("Syllabus files must be 20MB or smaller.");
+      if (fileRef.current) fileRef.current.value = "";
+      return;
+    }
+
+    if (getSyllabusFileKind(nextFile) === "unsupported") {
+      toast.error("Upload a PDF, image, or plain text syllabus.");
+      if (fileRef.current) fileRef.current.value = "";
+      return;
+    }
+
+    setFile(nextFile);
+  };
+
   const handleParse = async () => {
     if (!file) return;
     setStep("parsing");
@@ -245,7 +266,7 @@ export default function SyllabusUploadDialog({
       if (error) {
         const msg = await getFunctionErrorMessage(error);
         if (msg.includes("Failed to send") || msg.includes("network")) {
-          throw new Error("Cannot reach the parse-syllabus function. Make sure it is deployed.");
+          throw new Error("The syllabus service is temporarily unavailable. Please try again.");
         }
         throw new Error(msg || "Edge function error");
       }
@@ -464,7 +485,7 @@ export default function SyllabusUploadDialog({
     <Dialog open={open} onOpenChange={handleClose}>
       <DialogContent className="sm:max-w-xl max-h-[90vh] flex flex-col overflow-hidden p-0">
         {/* Header */}
-        <DialogHeader className="px-6 pt-6 pb-4 border-b border-border shrink-0">
+        <DialogHeader className="shrink-0 border-b border-border px-4 pb-4 pt-5 sm:px-6 sm:pt-6">
           <DialogTitle className="text-base font-semibold flex items-center gap-2">
             <div className="gradient-primary flex h-7 w-7 items-center justify-center rounded-lg">
               <Sparkles className="h-3.5 w-3.5 text-primary-foreground" />
@@ -485,7 +506,7 @@ export default function SyllabusUploadDialog({
         </DialogHeader>
 
         {/* Body */}
-        <div className="flex-1 overflow-y-auto px-6 py-5">
+        <div className="flex-1 overflow-y-auto px-4 py-5 sm:px-6">
           <AnimatePresence mode="wait">
 
             {/* ── Step: Upload ── */}
@@ -497,13 +518,14 @@ export default function SyllabusUploadDialog({
                 <input
                   ref={fileRef}
                   type="file"
-                  accept=".pdf,.txt,image/*"
+                  accept=".pdf,.txt,.md,image/*"
                   className="hidden"
-                  onChange={(e) => setFile(e.target.files?.[0] || null)}
+                  onChange={(e) => handleFileChange(e.target.files?.[0])}
                 />
-                <div
+                <button
+                  type="button"
                   onClick={() => fileRef.current?.click()}
-                  className={`rounded-xl border-2 border-dashed p-8 text-center cursor-pointer transition-all ${
+                  className={`w-full cursor-pointer rounded-xl border-2 border-dashed p-6 text-center transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 sm:p-8 ${
                     file ? "border-primary/40 bg-primary/5" : "border-border bg-muted/10 hover:bg-muted/20 hover:border-border-hover"
                   }`}
                 >
@@ -522,13 +544,13 @@ export default function SyllabusUploadDialog({
                       <p className="text-[11px] text-muted-foreground/60">PDF, image, or plain text file · Max 20MB</p>
                     </div>
                   )}
-                </div>
+                </button>
               </motion.div>
             )}
 
             {/* ── Step: Parsing ── */}
             {step === "parsing" && (
-              <motion.div key="parsing" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="flex flex-col items-center justify-center py-16 gap-4">
+              <motion.div key="parsing" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="flex flex-col items-center justify-center py-16 gap-4" role="status" aria-live="polite">
                 <div className="gradient-primary flex h-14 w-14 items-center justify-center rounded-2xl">
                   <Loader2 className="h-7 w-7 text-primary-foreground animate-spin" />
                 </div>
@@ -672,7 +694,7 @@ export default function SyllabusUploadDialog({
 
             {/* ── Step: Saving ── */}
             {step === "saving" && (
-              <motion.div key="saving" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="flex flex-col items-center justify-center py-16 gap-4">
+              <motion.div key="saving" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="flex flex-col items-center justify-center py-16 gap-4" role="status" aria-live="polite">
                 <div className="gradient-primary flex h-14 w-14 items-center justify-center rounded-2xl">
                   <Loader2 className="h-7 w-7 text-primary-foreground animate-spin" />
                 </div>
@@ -716,7 +738,7 @@ export default function SyllabusUploadDialog({
         </div>
 
         {/* Footer */}
-        <div className="px-6 py-4 border-t border-border shrink-0 flex gap-2">
+        <div className="flex shrink-0 gap-2 border-t border-border px-4 py-4 sm:px-6">
           {step === "upload" && (
             <>
               <Button variant="outline" onClick={() => handleClose(false)} className="flex-1 h-9 text-xs">Cancel</Button>
@@ -767,7 +789,9 @@ function ReviewSection({
   return (
     <div className="rounded-xl border border-border overflow-hidden">
       <button
+        type="button"
         onClick={onToggle}
+        aria-expanded={expanded}
         className="w-full flex items-center gap-3 px-4 py-3 bg-muted/20 hover:bg-muted/30 transition-colors text-left"
       >
         <div className={`flex h-6 w-6 shrink-0 items-center justify-center rounded-md ${iconBg}`}>{icon}</div>
@@ -795,9 +819,11 @@ function ReviewSection({
 
 function ReviewItem({ selected, onToggle, children }: { selected: boolean; onToggle: () => void; children: React.ReactNode }) {
   return (
-    <div
+    <button
+      type="button"
       onClick={onToggle}
-      className={`flex items-center gap-3 px-4 py-2.5 cursor-pointer transition-colors ${selected ? "hover:bg-muted/20" : "bg-muted/5 hover:bg-muted/15"}`}
+      aria-pressed={selected}
+      className={`flex w-full cursor-pointer items-center gap-3 px-4 py-2.5 text-left transition-colors ${selected ? "hover:bg-muted/20" : "bg-muted/5 hover:bg-muted/15"}`}
     >
       <div className={`flex h-4 w-4 shrink-0 items-center justify-center rounded border transition-colors ${
         selected ? "bg-primary border-primary" : "border-border bg-background"
@@ -805,6 +831,6 @@ function ReviewItem({ selected, onToggle, children }: { selected: boolean; onTog
         {selected && <X className="h-2.5 w-2.5 text-primary-foreground" strokeWidth={3} />}
       </div>
       {children}
-    </div>
+    </button>
   );
 }
diff --git a/src/components/course/CourseMaterials.tsx b/src/components/course/CourseMaterials.tsx
index 347aa66..90b5405 100644
--- a/src/components/course/CourseMaterials.tsx
+++ b/src/components/course/CourseMaterials.tsx
@@ -5,13 +5,27 @@ import { useQueryClient } from "@tanstack/react-query";
 import { toast } from "sonner";
 
 import { supabase } from "@/integrations/supabase/client";
+import type { Database } from "@/integrations/supabase/types";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+
+type CourseMaterial = Database["public"]["Tables"]["course_materials"]["Row"];
 
 interface CourseMaterialsProps {
   courseId: string;
   userId: string;
-  materials: any[];
+  materials: CourseMaterial[];
   loadingMaterials: boolean;
 }
 
@@ -45,6 +59,7 @@ export default function CourseMaterials({ courseId, userId, materials, loadingMa
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [uploading, setUploading] = useState(false);
   const [extractingIds, setExtractingIds] = useState<string[]>([]);
+  const [materialPendingDelete, setMaterialPendingDelete] = useState<CourseMaterial | null>(null);
 
   const formatFileSize = (bytes: number) => {
     if (bytes < 1024) return `${bytes} B`;
@@ -57,11 +72,14 @@ export default function CourseMaterials({ courseId, userId, materials, loadingMa
     if (!files?.length) return;
 
     setUploading(true);
+    let uploadedCount = 0;
+    let skippedCount = 0;
 
     try {
       for (const file of Array.from(files)) {
         if (file.size > 20 * 1024 * 1024) {
           toast.error(`${file.name} is too large (max 20MB)`);
+          skippedCount += 1;
           continue;
         }
 
@@ -103,6 +121,7 @@ export default function CourseMaterials({ courseId, userId, materials, loadingMa
         if (dbError) {
           throw dbError;
         }
+        uploadedCount += 1;
 
         if (needsExtraction && inserted?.id) {
           setExtractingIds((current) => [...current, inserted.id]);
@@ -127,9 +146,14 @@ export default function CourseMaterials({ courseId, userId, materials, loadingMa
       }
 
       queryClient.invalidateQueries({ queryKey: ["course-materials", courseId] });
-      toast.success(`${files.length} file(s) uploaded`);
-    } catch (err: any) {
-      toast.error(err.message || "Upload failed");
+      if (uploadedCount > 0) {
+        toast.success(`${uploadedCount} ${uploadedCount === 1 ? "file" : "files"} uploaded`);
+      }
+      if (skippedCount > 0) {
+        toast.warning(`${skippedCount} ${skippedCount === 1 ? "file was" : "files were"} skipped`);
+      }
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : "Upload failed");
     } finally {
       setUploading(false);
       if (fileInputRef.current) {
@@ -144,8 +168,9 @@ export default function CourseMaterials({ courseId, userId, materials, loadingMa
       await supabase.from("course_materials").delete().eq("id", materialId);
       queryClient.invalidateQueries({ queryKey: ["course-materials", courseId] });
       toast.success("Material deleted");
-    } catch (err: any) {
-      toast.error(err.message);
+      setMaterialPendingDelete(null);
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : "Material could not be deleted");
     }
   };
 
@@ -160,9 +185,12 @@ export default function CourseMaterials({ courseId, userId, materials, loadingMa
           className="hidden"
           onChange={handleUpload}
         />
-        <div
+        <button
+          type="button"
           onClick={() => !uploading && fileInputRef.current?.click()}
-          className="cursor-pointer rounded-xl border-2 border-dashed border-border bg-muted/10 p-8 text-center transition-colors hover:bg-muted/20"
+          disabled={uploading}
+          aria-busy={uploading}
+          className="w-full cursor-pointer rounded-xl border-2 border-dashed border-border bg-muted/10 p-6 text-center transition-colors hover:border-primary/30 hover:bg-muted/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-wait disabled:opacity-80 sm:p-8"
         >
           {uploading ? (
             <>
@@ -178,10 +206,16 @@ export default function CourseMaterials({ courseId, userId, materials, loadingMa
               </p>
             </>
           )}
-        </div>
+        </button>
       </motion.div>
 
-      {materials.length === 0 && !loadingMaterials ? (
+      {loadingMaterials ? (
+        <div className="space-y-2" role="status" aria-label="Loading course materials">
+          <Skeleton className="h-16 rounded-xl" />
+          <Skeleton className="h-16 rounded-xl" />
+          <span className="sr-only">Loading course materials…</span>
+        </div>
+      ) : materials.length === 0 ? (
         <motion.div variants={item} className="py-8 text-center">
           <FileText className="mx-auto mb-2 h-8 w-8 text-muted-foreground/20" />
           <p className="text-xs text-muted-foreground">No materials uploaded yet</p>
@@ -191,7 +225,7 @@ export default function CourseMaterials({ courseId, userId, materials, loadingMa
         </motion.div>
       ) : (
         <AnimatePresence mode="popLayout">
-          {materials.map((material: any) => {
+          {materials.map((material) => {
             const hasIndexedText = typeof material.content_text === "string" && material.content_text.trim().length > 0;
             const isExtracting = extractingIds.includes(material.id);
             const indexable = isQuizIndexableMaterial(material.file_type, material.file_name);
@@ -233,8 +267,9 @@ export default function CourseMaterials({ courseId, userId, materials, loadingMa
                     <Button
                       variant="ghost"
                       size="icon"
-                      className="h-7 w-7 text-muted-foreground opacity-0 transition-opacity hover:text-destructive group-hover:opacity-100"
-                      onClick={() => deleteMaterial(material.id, material.file_path)}
+                      className="h-8 w-8 shrink-0 text-muted-foreground opacity-100 transition-opacity hover:text-destructive sm:opacity-0 sm:group-focus-within:opacity-100 sm:group-hover:opacity-100"
+                      aria-label={`Delete ${material.file_name}`}
+                      onClick={() => setMaterialPendingDelete(material)}
                     >
                       <Trash2 className="h-3 w-3" />
                     </Button>
@@ -245,6 +280,30 @@ export default function CourseMaterials({ courseId, userId, materials, loadingMa
           })}
         </AnimatePresence>
       )}
+
+      <AlertDialog open={Boolean(materialPendingDelete)} onOpenChange={(open) => { if (!open) setMaterialPendingDelete(null); }}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete this material?</AlertDialogTitle>
+            <AlertDialogDescription>
+              {materialPendingDelete?.file_name || "This file"} will be removed from the course and will no longer be available for quiz generation.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              onClick={() => {
+                if (materialPendingDelete) {
+                  void deleteMaterial(materialPendingDelete.id, materialPendingDelete.file_path);
+                }
+              }}
+            >
+              Delete material
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 }
diff --git a/src/index.css b/src/index.css
index 3b6b5dd..46e6329 100644
--- a/src/index.css
+++ b/src/index.css
@@ -135,11 +135,25 @@
     @apply bg-background text-foreground font-sans antialiased;
     font-family: var(--font-sans);
   }
+  ::selection {
+    @apply bg-primary/20 text-foreground;
+  }
   code, pre {
     font-family: var(--font-mono);
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
 @layer utilities {
   .gradient-primary { background: var(--gradient-primary); }
   .gradient-accent { background: var(--gradient-accent); }
diff --git a/src/views/AuthCallback.tsx b/src/views/AuthCallback.tsx
index d85b142..1be9f71 100644
--- a/src/views/AuthCallback.tsx
+++ b/src/views/AuthCallback.tsx
@@ -46,7 +46,7 @@ export default function AuthCallback() {
 
   return (
     <div className="flex min-h-screen items-center justify-center bg-background px-6">
-      <div className="flex max-w-sm flex-col items-center gap-4 rounded-2xl border border-border/60 bg-card px-8 py-10 text-center shadow-sm">
+      <div className="flex max-w-sm flex-col items-center gap-4 rounded-2xl border border-border/60 bg-card px-8 py-10 text-center shadow-sm" role="status" aria-live="polite">
         <Loader2 className="h-8 w-8 animate-spin text-primary" />
         <div className="space-y-1.5">
           <h1 className="text-lg font-semibold text-foreground">Signing you in</h1>
diff --git a/src/views/Courses.tsx b/src/views/Courses.tsx
index 2d3adf2..712394a 100644
--- a/src/views/Courses.tsx
+++ b/src/views/Courses.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from "react";
 import { AnimatePresence, motion } from "framer-motion";
-import { BookOpen, ClipboardList, FileUp, Loader2, Pencil, Plus, Sparkles, Trash2, Users } from "lucide-react";
+import { AlertTriangle, BookOpen, ClipboardList, FileUp, Pencil, Plus, RefreshCw, Sparkles, Trash2, Users } from "lucide-react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Link } from "@/lib/router";
 import { toast } from "sonner";
@@ -14,6 +14,17 @@ import { Card, CardContent } from "@/components/ui/card";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
 import { Progress } from "@/components/ui/progress";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import { useAuth } from "@/contexts/AuthContext";
 import { supabase } from "@/integrations/supabase/client";
 
@@ -39,6 +50,8 @@ export default function Courses() {
   const [syllabusDialogOpen, setSyllabusDialogOpen] = useState(false);
   const [editCourseId, setEditCourseId] = useState<string | null>(null);
   const [parsingCourseId, setParsingCourseId] = useState<string | null>(null);
+  const [deleteCourseId, setDeleteCourseId] = useState<string | null>(null);
+  const [nameTouched, setNameTouched] = useState(false);
   const [form, setForm] = useState({
     name: "",
     professor: "",
@@ -48,7 +61,7 @@ export default function Courses() {
     semester: "",
   });
 
-  const { data: courses = [], isLoading, status: coursesStatus, fetchStatus, dataUpdatedAt } = useQuery({
+  const { data: courses = [], isLoading, isError, refetch, status: coursesStatus, fetchStatus, dataUpdatedAt } = useQuery({
     queryKey: ["courses", user?.id, "full"],
     queryFn: async () => {
       const { data, error } = await supabase.from("courses").select("*").order("created_at", { ascending: false });
@@ -58,7 +71,7 @@ export default function Courses() {
     enabled: !!user,
   });
 
-  const { data: assignmentCounts = {} } = useQuery({
+  const { data: assignmentCounts = {}, isLoading: assignmentCountsLoading, isError: assignmentCountsError, refetch: refetchAssignmentCounts } = useQuery({
     queryKey: ["assignment-counts", user?.id],
     queryFn: async () => {
       const { data, error } = await supabase.from("assignments").select("course_id, status");
@@ -77,7 +90,7 @@ export default function Courses() {
     enabled: !!user,
   });
 
-  const { data: materialCounts = {} } = useQuery({
+  const { data: materialCounts = {}, isLoading: materialCountsLoading, isError: materialCountsError, refetch: refetchMaterialCounts } = useQuery({
     queryKey: ["material-counts", user?.id],
     queryFn: async () => {
       const { data, error } = await supabase.from("course_materials").select("course_id");
@@ -137,6 +150,7 @@ export default function Courses() {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["courses"] });
       toast.success("Course deleted");
+      setDeleteCourseId(null);
     },
     onError: (error: any) => toast.error(error.message),
   });
@@ -144,6 +158,7 @@ export default function Courses() {
   const openCreate = () => {
     setEditCourseId(null);
     setForm({ name: "", professor: "", credits: 3, color: "gradient-primary", code: "", semester: "" });
+    setNameTouched(false);
     setDialogOpen(true);
   };
 
@@ -157,6 +172,7 @@ export default function Courses() {
       code: course.code || "",
       semester: course.semester || "",
     });
+    setNameTouched(false);
     setDialogOpen(true);
   };
 
@@ -185,6 +201,9 @@ export default function Courses() {
     0,
   );
   const parsingCourse = visibleCourses.find((course: any) => course.id === parsingCourseId) || null;
+  const coursePendingDelete = visibleCourses.find((course: any) => course.id === deleteCourseId) || null;
+  const pageLoading = isLoading || assignmentCountsLoading || materialCountsLoading;
+  const pageError = isError || assignmentCountsError || materialCountsError;
 
   useEffect(() => {
     if (process.env.NODE_ENV === "production") {
@@ -263,6 +282,39 @@ export default function Courses() {
     dataUpdatedAt,
   ]);
 
+  if (pageLoading) {
+    return (
+      <div className="space-y-4" role="status" aria-label="Loading courses">
+        <Skeleton className="h-44 rounded-2xl" />
+        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+          {Array.from({ length: 3 }).map((_, index) => (
+            <Skeleton key={index} className="h-48 rounded-xl" />
+          ))}
+        </div>
+        <span className="sr-only">Loading courses…</span>
+      </div>
+    );
+  }
+
+  if (pageError) {
+    return (
+      <Card className="border-destructive/20 shadow-card" role="alert">
+        <CardContent className="flex flex-col items-center px-6 py-12 text-center">
+          <AlertTriangle className="h-8 w-8 text-destructive" />
+          <h1 className="mt-3 text-base font-semibold text-foreground">Courses could not be loaded</h1>
+          <p className="mt-1 max-w-sm text-sm leading-6 text-muted-foreground">Check your connection and try loading your course workspace again.</p>
+          <Button
+            size="sm"
+            className="mt-4"
+            onClick={() => void Promise.all([refetch(), refetchAssignmentCounts(), refetchMaterialCounts()])}
+          >
+            <RefreshCw className="mr-1.5 h-3.5 w-3.5" /> Retry courses
+          </Button>
+        </CardContent>
+      </Card>
+    );
+  }
+
   return (
     <motion.div variants={container} initial="hidden" animate="show" className="space-y-5">
       <motion.div variants={item} className="relative overflow-hidden rounded-2xl gradient-primary p-5 text-primary-foreground">
@@ -278,7 +330,7 @@ export default function Courses() {
               Add Course
             </Button>
           </div>
-          <div className="grid grid-cols-4 gap-3">
+          <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
             <div className="rounded-xl bg-white/10 p-3 backdrop-blur-sm">
               <p className="text-2xl font-bold">{visibleCourses.length}</p>
               <p className="text-[10px] opacity-70">Active Courses</p>
@@ -319,11 +371,7 @@ export default function Courses() {
         </motion.div>
       ) : null}
 
-      {isLoading ? (
-        <div className="flex items-center justify-center py-12">
-          <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
-        </div>
-      ) : visibleCourses.length === 0 ? (
+      {visibleCourses.length === 0 ? (
         <motion.div variants={item} className="py-16 text-center">
           <BookOpen className="mx-auto mb-3 h-10 w-10 text-muted-foreground/30" />
           <p className="text-sm font-medium text-muted-foreground">No courses yet</p>
@@ -349,14 +397,14 @@ export default function Courses() {
                         <div className={`${course.color || "gradient-primary"} flex h-9 w-9 items-center justify-center rounded-xl`}>
                           <BookOpen className="h-4 w-4 text-primary-foreground" />
                         </div>
-                        <div className="flex gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
-                          <Button variant="ghost" size="icon" className="h-7 w-7 text-muted-foreground" onClick={() => openSyllabusUpload(course.id)} title="Upload Syllabus">
+                        <div className="flex gap-0.5 opacity-100 transition-opacity sm:opacity-0 sm:group-focus-within:opacity-100 sm:group-hover:opacity-100">
+                          <Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground" onClick={() => openSyllabusUpload(course.id)} title="Upload syllabus" aria-label={`Upload syllabus for ${course.name}`}>
                             <FileUp className="h-3 w-3" />
                           </Button>
-                          <Button variant="ghost" size="icon" className="h-7 w-7 text-muted-foreground" onClick={(e) => { e.preventDefault(); openEdit(course); }}>
+                          <Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground" aria-label={`Edit ${course.name}`} onClick={(e) => { e.preventDefault(); openEdit(course); }}>
                             <Pencil className="h-3 w-3" />
                           </Button>
-                          <Button variant="ghost" size="icon" className="h-7 w-7 text-destructive" onClick={(e) => { e.preventDefault(); deleteCourse.mutate(course.id); }}>
+                          <Button variant="ghost" size="icon" className="h-8 w-8 text-destructive" aria-label={`Delete ${course.name}`} onClick={(e) => { e.preventDefault(); setDeleteCourseId(course.id); }}>
                             <Trash2 className="h-3 w-3" />
                           </Button>
                         </div>
@@ -402,20 +450,27 @@ export default function Courses() {
         </div>
       )}
 
-      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+      <Dialog open={dialogOpen} onOpenChange={(open) => { setDialogOpen(open); if (!open) setNameTouched(false); }}>
         <DialogContent className="sm:max-w-md">
           <DialogHeader>
             <DialogTitle className="text-base font-semibold">{editCourseId ? "Edit Course" : "Add New Course"}</DialogTitle>
           </DialogHeader>
           <div className="space-y-4 pt-2">
             <div>
-              <Label className="text-xs font-medium text-muted-foreground">Course Name *</Label>
+              <Label htmlFor="course-name" className="text-xs font-medium text-muted-foreground">Course Name *</Label>
               <input
+                id="course-name"
                 value={form.name}
                 onChange={(e) => setForm({ ...form, name: e.target.value })}
+                onBlur={() => setNameTouched(true)}
+                aria-invalid={nameTouched && !form.name.trim()}
+                aria-describedby={nameTouched && !form.name.trim() ? "course-name-error" : undefined}
                 placeholder="e.g. Data Structures & Algorithms"
                 className="input-pro mt-1.5"
               />
+              {nameTouched && !form.name.trim() ? (
+                <p id="course-name-error" className="mt-1.5 text-xs text-destructive">Enter a course name to continue.</p>
+              ) : null}
             </div>
             <div className="grid grid-cols-2 gap-3">
               <div>
@@ -463,7 +518,10 @@ export default function Courses() {
                 {gradients.map((gradient) => (
                   <button
                     key={gradient.value}
+                    type="button"
                     onClick={() => setForm({ ...form, color: gradient.value })}
+                    aria-label={`Use ${gradient.label} course color`}
+                    aria-pressed={form.color === gradient.value}
                     className={`h-7 w-7 rounded-full ${gradient.value} transition-all duration-200 ${
                       form.color === gradient.value ? "scale-110 ring-2 ring-ring ring-offset-2 ring-offset-background" : "hover:scale-105"
                     }`}
@@ -504,6 +562,30 @@ export default function Courses() {
           }}
         />
       ) : null}
+
+      <AlertDialog open={Boolean(deleteCourseId)} onOpenChange={(open) => { if (!open && !deleteCourse.isPending) setDeleteCourseId(null); }}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete {coursePendingDelete?.name || "this course"}?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This permanently removes the course and may remove related academic data. This action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={deleteCourse.isPending}>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              disabled={deleteCourse.isPending}
+              onClick={(event) => {
+                event.preventDefault();
+                if (deleteCourseId) deleteCourse.mutate(deleteCourseId);
+              }}
+            >
+              {deleteCourse.isPending ? "Deleting…" : "Delete course"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </motion.div>
   );
 }
diff --git a/src/views/Dashboard.tsx b/src/views/Dashboard.tsx
index caeb2ba..99f4b87 100644
--- a/src/views/Dashboard.tsx
+++ b/src/views/Dashboard.tsx
@@ -4,15 +4,16 @@ import type { ReactNode } from "react";
 import { motion } from "framer-motion";
 import {
   BookOpen, ClipboardList, BrainCircuit,
-  CheckCircle2, AlertCircle, ArrowUpRight, CalendarDays,
+  CheckCircle2, AlertCircle, AlertTriangle, ArrowUpRight, CalendarDays,
   Sparkles, MapPin, GraduationCap, ArrowRight, Timer, Sun,
-  Lightbulb, Play,
+  Lightbulb, Play, RefreshCw,
   type LucideIcon,
 } from "lucide-react";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Progress } from "@/components/ui/progress";
+import { Skeleton } from "@/components/ui/skeleton";
 import { Link } from "@/lib/router";
 import { cn } from "@/lib/utils";
 import { useAuth } from "@/contexts/AuthContext";
@@ -129,7 +130,7 @@ function EmptyPanel({ icon: Icon, title, description, action, className }: Empty
 export default function Dashboard() {
   const { user } = useAuth();
 
-  const { data: courses = [] } = useQuery({
+  const { data: courses = [], isLoading: coursesLoading, isError: coursesError, refetch: refetchCourses } = useQuery({
     queryKey: ["courses", user?.id],
     queryFn: async () => {
       const { data, error } = await supabase.from("courses").select("*").order("name");
@@ -139,7 +140,7 @@ export default function Dashboard() {
     enabled: !!user,
   });
 
-  const { data: assignments = [] } = useQuery({
+  const { data: assignments = [], isLoading: assignmentsLoading, isError: assignmentsError, refetch: refetchAssignments } = useQuery({
     queryKey: ["dashboard-assignments", user?.id],
     queryFn: async () => {
       const { data, error } = await supabase
@@ -153,7 +154,7 @@ export default function Dashboard() {
     enabled: !!user,
   });
 
-  const { data: exams = [] } = useQuery({
+  const { data: exams = [], isLoading: examsLoading, isError: examsError, refetch: refetchExams } = useQuery({
     queryKey: ["dashboard-exams", user?.id],
     queryFn: async () => {
       const { data, error } = await supabase
@@ -167,7 +168,7 @@ export default function Dashboard() {
     enabled: !!user,
   });
 
-  const { data: gradeComponents = [] } = useQuery({
+  const { data: gradeComponents = [], isLoading: gradesLoading, isError: gradesError, refetch: refetchGrades } = useQuery({
     queryKey: ["grade-components", user?.id],
     queryFn: async () => {
       const { data, error } = await supabase.from("grade_components").select("*");
@@ -177,7 +178,7 @@ export default function Dashboard() {
     enabled: !!user,
   });
 
-  const { data: todayEvents = [] } = useQuery({
+  const { data: todayEvents = [], isLoading: eventsLoading, isError: eventsError, refetch: refetchEvents } = useQuery({
     queryKey: ["today-events", user?.id],
     queryFn: async () => {
       const { data, error } = await supabase.from("events").select("*, courses(name, code, color)").order("start_time");
@@ -193,6 +194,53 @@ export default function Dashboard() {
     enabled: !!user,
   });
 
+  const dashboardLoading = coursesLoading || assignmentsLoading || examsLoading || gradesLoading || eventsLoading;
+  const dashboardError = coursesError || assignmentsError || examsError || gradesError || eventsError;
+
+  if (dashboardLoading) {
+    return (
+      <div className="space-y-4" role="status" aria-label="Loading dashboard">
+        <div className="rounded-[28px] border border-border bg-card p-6 shadow-card">
+          <Skeleton className="h-5 w-44" />
+          <Skeleton className="mt-3 h-3 w-72 max-w-full" />
+          <div className="mt-6 grid grid-cols-2 gap-3 lg:grid-cols-4">
+            {Array.from({ length: 4 }).map((_, index) => <Skeleton key={index} className="h-24 rounded-2xl" />)}
+          </div>
+        </div>
+        <div className="grid gap-4 lg:grid-cols-2">
+          <Skeleton className="h-72 rounded-[24px]" />
+          <Skeleton className="h-72 rounded-[24px]" />
+        </div>
+        <span className="sr-only">Loading dashboard data…</span>
+      </div>
+    );
+  }
+
+  if (dashboardError) {
+    return (
+      <Card className="mx-auto max-w-xl border-destructive/20 shadow-card" role="alert">
+        <CardContent className="flex flex-col items-center px-6 py-12 text-center">
+          <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-destructive/10">
+            <AlertTriangle className="h-5 w-5 text-destructive" />
+          </div>
+          <h1 className="mt-4 text-lg font-semibold text-foreground">Your dashboard could not be loaded</h1>
+          <p className="mt-1.5 max-w-md text-sm leading-6 text-muted-foreground">
+            StudyOS could not retrieve your workspace data. Check your connection and try again.
+          </p>
+          <Button
+            className="mt-5"
+            onClick={() => void Promise.all([
+              refetchCourses(), refetchAssignments(), refetchExams(), refetchGrades(), refetchEvents(),
+            ])}
+          >
+            <RefreshCw className="mr-2 h-4 w-4" />
+            Retry dashboard
+          </Button>
+        </CardContent>
+      </Card>
+    );
+  }
+
   const now = new Date();
 
   const upcomingAssignments = assignments
diff --git a/src/views/Quizzes.tsx b/src/views/Quizzes.tsx
index 6daff54..9b927af 100644
--- a/src/views/Quizzes.tsx
+++ b/src/views/Quizzes.tsx
@@ -5,6 +5,7 @@ import { AnimatePresence, motion } from "framer-motion";
 import { FunctionsHttpError, FunctionsRelayError } from "@supabase/supabase-js";
 import {
   ArrowRight,
+  AlertTriangle,
   BrainCircuit,
   CheckCircle2,
   ChevronRight,
@@ -12,6 +13,7 @@ import {
   Loader2,
   Play,
   RotateCcw,
+  RefreshCw,
   Sparkles,
   Trophy,
   XCircle,
@@ -29,6 +31,8 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Progress } from "@/components/ui/progress";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Label } from "@/components/ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 
 interface Question {
@@ -105,7 +109,7 @@ export default function Quizzes() {
     setSelectedCourse(searchParams.get("course") || "");
   }, [searchParams]);
 
-  const { data: courses = [] } = useQuery({
+  const { data: courses = [], isLoading: coursesLoading, isError: coursesError, refetch: refetchCourses } = useQuery({
     queryKey: ["courses", user?.id],
     queryFn: async () => {
       const { data, error } = await supabase.from("courses").select("id, name, code, color").order("name");
@@ -115,7 +119,7 @@ export default function Quizzes() {
     enabled: !!user,
   });
 
-  const { data: courseMaterials = [] } = useQuery({
+  const { data: courseMaterials = [], isLoading: materialsLoading, isError: materialsError, refetch: refetchMaterials } = useQuery({
     queryKey: ["course-material-readiness", user?.id],
     queryFn: async () => {
       const { data, error } = await supabase.from("course_materials").select("course_id, content_text");
@@ -131,7 +135,7 @@ export default function Quizzes() {
     : false;
   const todayQuizDateKey = getQuizGenerationDateKey();
 
-  const { data: todayQuizUsage } = useQuery({
+  const { data: todayQuizUsage, isLoading: usageLoading, isError: usageError, refetch: refetchUsage } = useQuery({
     queryKey: ["quiz-generation-usage", user?.id, todayQuizDateKey],
     queryFn: async () => {
       const { data, error } = await supabase
@@ -148,7 +152,7 @@ export default function Quizzes() {
     enabled: !!user,
   });
 
-  const { data: recentQuizzes = [] } = useQuery({
+  const { data: recentQuizzes = [], isLoading: recentLoading, isError: recentError, refetch: refetchRecent } = useQuery({
     queryKey: ["course-quizzes", user?.id, selectedCourse],
     queryFn: async () => {
       if (!selectedCourse) return [];
@@ -166,6 +170,37 @@ export default function Quizzes() {
     enabled: !!user,
   });
 
+  const quizDataLoading = coursesLoading || materialsLoading || usageLoading || (Boolean(selectedCourse) && recentLoading);
+  const quizDataError = coursesError || materialsError || usageError || (Boolean(selectedCourse) && recentError);
+
+  if (quizDataLoading) {
+    return (
+      <div className="space-y-4" role="status" aria-label="Loading quizzes">
+        <Skeleton className="h-28 rounded-2xl" />
+        <Skeleton className="h-64 rounded-xl" />
+        <Skeleton className="h-32 rounded-xl" />
+        <span className="sr-only">Loading quiz workspace…</span>
+      </div>
+    );
+  }
+
+  if (quizDataError) {
+    return (
+      <Card className="border-destructive/20 shadow-card" role="alert">
+        <CardContent className="flex flex-col items-center px-6 py-12 text-center">
+          <AlertTriangle className="h-8 w-8 text-destructive" />
+          <h1 className="mt-3 text-base font-semibold text-foreground">Quiz data could not be loaded</h1>
+          <p className="mt-1 max-w-sm text-sm leading-6 text-muted-foreground">Check your connection and try loading your quiz workspace again.</p>
+          <Button className="mt-4" size="sm" onClick={() => void Promise.all([
+            refetchCourses(), refetchMaterials(), refetchUsage(), refetchRecent(),
+          ])}>
+            <RefreshCw className="mr-1.5 h-3.5 w-3.5" /> Retry quizzes
+          </Button>
+        </CardContent>
+      </Card>
+    );
+  }
+
   const hasRecentQuizToday = recentQuizzes.some((quiz: any) => getQuizGenerationDateKey(new Date(quiz.created_at)) === todayQuizDateKey);
   const quizAlreadyGeneratedToday = Boolean(todayQuizUsage || hasRecentQuizToday);
 
@@ -275,11 +310,10 @@ export default function Quizzes() {
     setShowExplanation(true);
     const nextAnswers = [...answers, index];
     setAnswers(nextAnswers);
-    if (currentQ + 1 >= questions.length) finishQuiz(nextAnswers);
   };
 
   const nextQuestion = () => {
-    if (currentQ + 1 >= questions.length) setQuizDone(true);
+    if (currentQ + 1 >= questions.length) void finishQuiz(answers);
     else {
       setCurrentQ((value) => value + 1);
       setSelectedAnswer(null);
@@ -362,7 +396,9 @@ export default function Quizzes() {
                   <button
                     key={`${question.id}-${index}`}
                     onClick={() => selectAnswer(index)}
-                    className={`w-full rounded-lg border p-3 text-left transition-all duration-200 ${style}`}
+                    disabled={showExplanation}
+                    aria-pressed={selectedAnswer === index}
+                    className={`w-full rounded-lg border p-3 text-left transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ${style}`}
                   >
                     <div className="flex items-center gap-3">
                       <div
@@ -387,19 +423,17 @@ export default function Quizzes() {
             <AnimatePresence>
               {showExplanation ? (
                 <motion.div initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: "auto" }} exit={{ opacity: 0 }} className="mt-5">
-                  <div className={`rounded-lg border p-3.5 ${selectedAnswer === question.correct ? "border-emerald/15 bg-emerald/5" : "border-rose/15 bg-rose/5"}`}>
+                  <div role="status" aria-live="polite" className={`rounded-lg border p-3.5 ${selectedAnswer === question.correct ? "border-emerald/15 bg-emerald/5" : "border-rose/15 bg-rose/5"}`}>
                     <div className="mb-1 flex items-center gap-1.5">
                       <Sparkles className={`h-3.5 w-3.5 ${selectedAnswer === question.correct ? "text-emerald" : "text-rose"}`} />
                       <span className="text-xs font-bold text-foreground">{selectedAnswer === question.correct ? "Correct!" : "Incorrect"}</span>
                     </div>
                     <p className="text-xs text-muted-foreground">{question.explanation}</p>
                   </div>
-                  {currentQ + 1 < questions.length ? (
-                    <Button onClick={nextQuestion} size="sm" className="mt-3 w-full gradient-primary text-xs text-primary-foreground">
-                      Next Question
+                  <Button onClick={nextQuestion} size="sm" className="mt-3 w-full gradient-primary text-xs text-primary-foreground">
+                      {currentQ + 1 < questions.length ? "Next Question" : "Finish Quiz"}
                       <ArrowRight className="ml-1.5 h-3.5 w-3.5" />
-                    </Button>
-                  ) : null}
+                  </Button>
                 </motion.div>
               ) : null}
             </AnimatePresence>
@@ -445,34 +479,42 @@ export default function Quizzes() {
             ) : (
               <div className="space-y-3">
                 <div className="grid gap-3 sm:grid-cols-2">
-                  <Select value={selectedCourse} onValueChange={setSelectedCourse}>
-                    <SelectTrigger className="h-9 text-xs">
-                      <SelectValue placeholder="Select course" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {courses.map((course: any) => (
-                        <SelectItem key={course.id} value={course.id}>
-                          {course.name}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                  <Select value={difficulty} onValueChange={setDifficulty}>
-                    <SelectTrigger className="h-9 text-xs">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="easy">Easy</SelectItem>
-                      <SelectItem value="medium">Medium</SelectItem>
-                      <SelectItem value="hard">Hard</SelectItem>
-                    </SelectContent>
-                  </Select>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs text-muted-foreground">Course</Label>
+                    <Select value={selectedCourse} onValueChange={setSelectedCourse}>
+                      <SelectTrigger className="h-9 text-xs" aria-label="Quiz course">
+                        <SelectValue placeholder="Select course" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {courses.map((course: any) => (
+                          <SelectItem key={course.id} value={course.id}>
+                            {course.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs text-muted-foreground">Difficulty</Label>
+                    <Select value={difficulty} onValueChange={setDifficulty}>
+                      <SelectTrigger className="h-9 text-xs" aria-label="Quiz difficulty">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="easy">Easy</SelectItem>
+                        <SelectItem value="medium">Medium</SelectItem>
+                        <SelectItem value="hard">Hard</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
                 </div>
                 <div className="flex flex-wrap gap-1.5">
                   {(courses as any[]).map((course) => (
                     <button
                       key={course.id}
+                      type="button"
                       onClick={() => setSelectedCourse(course.id)}
+                      aria-pressed={selectedCourse === course.id}
                       className={`rounded-full px-3 py-1 text-[11px] font-medium transition-all ${
                         selectedCourse === course.id ? `${course.color || "gradient-primary"} text-primary-foreground` : "bg-muted/40 text-muted-foreground hover:bg-muted"
                       }`}
@@ -504,6 +546,7 @@ export default function Quizzes() {
                   onClick={startQuiz}
                   className="h-10 w-full gradient-primary text-xs font-semibold text-primary-foreground"
                   disabled={generating || !selectedCourse || !selectedCourseHasIndexedMaterials || quizAlreadyGeneratedToday}
+                  aria-describedby="quiz-generator-status"
                 >
                   {generating ? (
                     <>
@@ -517,6 +560,17 @@ export default function Quizzes() {
                     </>
                   )}
                 </Button>
+                <p id="quiz-generator-status" className="text-center text-[11px] text-muted-foreground" aria-live="polite">
+                  {generating
+                    ? "Generating five questions from indexed course materials."
+                    : !selectedCourse
+                      ? "Select a course to continue."
+                      : !selectedCourseHasIndexedMaterials
+                        ? "Upload and index course materials before generating a quiz."
+                        : quizAlreadyGeneratedToday
+                          ? "Your next quiz will be available tomorrow."
+                          : "Ready to generate a five-question quiz."}
+                </p>
               </div>
             )}
           </CardContent>
diff --git a/src/views/Schedule.tsx b/src/views/Schedule.tsx
index fe174c0..eeed41a 100644
--- a/src/views/Schedule.tsx
+++ b/src/views/Schedule.tsx
@@ -2,11 +2,12 @@
 
 import { useEffect, useState, useMemo } from "react";
 import { motion } from "framer-motion";
-import { ChevronLeft, ChevronRight, Plus, Clock, Trash2, Sparkles, MapPin, CalendarDays, GraduationCap, Star, BookOpen, Pencil } from "lucide-react";
+import { AlertTriangle, ChevronLeft, ChevronRight, Plus, Clock, Trash2, Sparkles, MapPin, CalendarDays, GraduationCap, Star, BookOpen, Pencil, RefreshCw } from "lucide-react";
 import ScheduleScreenshotImport from "@/components/ScheduleScreenshotImport";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Card, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
 import { Badge } from "@/components/ui/badge";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
@@ -142,7 +143,7 @@ export default function Schedule() {
     end_hour: "10", end_min: "00",
   });
 
-  const { data: events = [] } = useQuery({
+  const { data: events = [], isLoading: eventsLoading, isError: eventsError, refetch: refetchEvents } = useQuery({
     queryKey: ["events", user?.id],
     queryFn: async () => {
       const { data, error } = await supabase.from("events").select("*, courses(name, color)").order("start_time");
@@ -152,7 +153,7 @@ export default function Schedule() {
     enabled: !!user,
   });
 
-  const { data: courses = [] } = useQuery({
+  const { data: courses = [], isLoading: coursesLoading, isError: coursesError, refetch: refetchCourses } = useQuery({
     queryKey: ["courses", user?.id],
     queryFn: async () => {
       const { data, error } = await supabase.from("courses").select("id, name, code, color").order("name");
@@ -162,7 +163,7 @@ export default function Schedule() {
     enabled: !!user,
   });
 
-  const { data: assignments = [] } = useQuery({
+  const { data: assignments = [], isLoading: assignmentsLoading, isError: assignmentsError, refetch: refetchAssignments } = useQuery({
     queryKey: ["assignments-schedule", user?.id],
     queryFn: async () => {
       const { data, error } = await supabase.from("assignments").select("*, courses(name)").eq("status", "pending").order("due_date");
@@ -172,7 +173,7 @@ export default function Schedule() {
     enabled: !!user,
   });
 
-  const { data: academicDates = [] } = useQuery({
+  const { data: academicDates = [], isLoading: academicDatesLoading, isError: academicDatesError, refetch: refetchAcademicDates } = useQuery({
     queryKey: ["academic-dates-schedule", user?.id],
     queryFn: async () => {
       const { data, error } = await supabase
@@ -493,18 +494,49 @@ export default function Schedule() {
       ? `Busy day ahead with ${todayEvents.length} events. Prioritize your most demanding tasks first.`
       : `You have ${todayEvents.length} event${todayEvents.length > 1 ? "s" : ""} today. Plan focused study blocks around them.`;
 
+  const scheduleLoading = eventsLoading || coursesLoading || assignmentsLoading || academicDatesLoading;
+  const scheduleError = eventsError || coursesError || assignmentsError || academicDatesError;
+
+  if (scheduleLoading) {
+    return (
+      <div className="space-y-4" role="status" aria-label="Loading schedule">
+        <Skeleton className="h-44 rounded-2xl" />
+        <Skeleton className="h-10 rounded-xl" />
+        <Skeleton className="h-[420px] rounded-2xl" />
+        <span className="sr-only">Loading schedule…</span>
+      </div>
+    );
+  }
+
+  if (scheduleError) {
+    return (
+      <Card className="border-destructive/20 shadow-card" role="alert">
+        <CardContent className="flex flex-col items-center px-6 py-12 text-center">
+          <AlertTriangle className="h-8 w-8 text-destructive" />
+          <h1 className="mt-3 text-base font-semibold text-foreground">Your schedule could not be loaded</h1>
+          <p className="mt-1 max-w-sm text-sm leading-6 text-muted-foreground">Check your connection and try loading your calendar again.</p>
+          <Button className="mt-4" size="sm" onClick={() => void Promise.all([
+            refetchEvents(), refetchCourses(), refetchAssignments(), refetchAcademicDates(),
+          ])}>
+            <RefreshCw className="mr-1.5 h-3.5 w-3.5" /> Retry schedule
+          </Button>
+        </CardContent>
+      </Card>
+    );
+  }
+
   return (
     <motion.div variants={container} initial="hidden" animate="show" className="space-y-5">
       {/* Hero Header */}
       <motion.div variants={item} className="rounded-2xl gradient-primary p-5 text-primary-foreground relative overflow-hidden">
         <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(255,255,255,0.1),transparent_50%)]" />
         <div className="relative z-10">
-          <div className="flex items-center justify-between mb-3">
+          <div className="mb-4 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
             <div>
               <h1 className="text-xl font-bold tracking-tight">Schedule</h1>
               <p className="text-xs opacity-80 mt-0.5">Your academic calendar & time management</p>
             </div>
-            <div className="flex items-center gap-2">
+            <div className="flex flex-wrap items-center gap-2">
               {events.length > 0 && (
                 <Button variant="secondary" size="sm" className="text-xs bg-white/15 border-0 hover:bg-white/25 text-primary-foreground"
                   onClick={() => { if (window.confirm("Delete all events?")) deleteAllEvents.mutate(); }}
@@ -552,7 +584,7 @@ export default function Schedule() {
               <p className="text-sm text-muted-foreground mt-1.5 max-w-sm">
                 Upload your syllabus or timetable to generate your semester schedule.
               </p>
-              <div className="flex items-center gap-2.5 mt-5">
+              <div className="mt-5 flex flex-col items-stretch gap-2.5 sm:flex-row sm:items-center">
                 <ScheduleScreenshotImport currentDate={currentDate} label="Import Schedule" />
                 <Button
                   size="sm"
@@ -599,6 +631,7 @@ export default function Schedule() {
           <button
             key={f.key}
             onClick={() => setFilters((prev) => ({ ...prev, [f.key]: !prev[f.key] }))}
+            aria-pressed={filters[f.key]}
             className={`flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium border transition-all ${
               filters[f.key]
                 ? "bg-card border-border text-foreground shadow-xs"
@@ -622,10 +655,10 @@ export default function Schedule() {
         )}
       </motion.div>}
 
-      {events.length > 0 && <motion.div variants={item} className="flex items-center justify-between">
+      {events.length > 0 && <motion.div variants={item} className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-2">
-          <Button variant="outline" size="icon" className="h-8 w-8" onClick={() => navigate(-1)}><ChevronLeft className="h-4 w-4" /></Button>
-          <Button variant="outline" size="icon" className="h-8 w-8" onClick={() => navigate(1)}><ChevronRight className="h-4 w-4" /></Button>
+          <Button aria-label={`Previous ${view}`} variant="outline" size="icon" className="h-8 w-8" onClick={() => navigate(-1)}><ChevronLeft className="h-4 w-4" /></Button>
+          <Button aria-label={`Next ${view}`} variant="outline" size="icon" className="h-8 w-8" onClick={() => navigate(1)}><ChevronRight className="h-4 w-4" /></Button>
           <Button variant="ghost" size="sm" className="text-xs" onClick={() => setCurrentDate(new Date())}>Today</Button>
         </div>
         <h2 className="text-sm font-semibold text-foreground">
@@ -634,16 +667,16 @@ export default function Schedule() {
             : format(currentDate, "MMMM yyyy")}
         </h2>
         <div className="flex items-center rounded-lg border border-border bg-muted/30">
-          <button onClick={() => setView("week")} className={`px-3 py-1.5 text-xs font-medium transition-colors rounded-l-lg ${view === "week" ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-muted/30"}`}>Week</button>
-          <button onClick={() => setView("month")} className={`px-3 py-1.5 text-xs font-medium transition-colors rounded-r-lg ${view === "month" ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-muted/30"}`}>Month</button>
+          <button type="button" aria-pressed={view === "week"} onClick={() => setView("week")} className={`px-3 py-1.5 text-xs font-medium transition-colors rounded-l-lg ${view === "week" ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-muted/30"}`}>Week</button>
+          <button type="button" aria-pressed={view === "month"} onClick={() => setView("month")} className={`px-3 py-1.5 text-xs font-medium transition-colors rounded-r-lg ${view === "month" ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-muted/30"}`}>Month</button>
         </div>
       </motion.div>}
 
       {/* Calendar — only when events exist */}
       {events.length > 0 && (view === "week" ? (
         <motion.div variants={item}>
-          <Card className="shadow-card border-border overflow-hidden">
-            <CardContent className="p-0">
+          <Card className="overflow-x-auto border-border shadow-card">
+            <CardContent className="min-w-[760px] p-0">
               {/* Day headers */}
               <div className="grid grid-cols-[56px_repeat(7,1fr)] border-b border-border">
                 <div className="p-2" />
@@ -710,7 +743,9 @@ export default function Schedule() {
                           return (
                             <Popover key={e.id}>
                               <PopoverTrigger asChild>
-                                <div
+                                <button
+                                  type="button"
+                                  aria-label={`Open ${e.title} details at ${timeStr}`}
                                   className={`absolute left-0.5 right-0.5 rounded-md px-1.5 border cursor-pointer hover:opacity-80 transition-opacity overflow-hidden z-10 flex flex-col justify-center ${
                                     e.is_academic
                                       ? "bg-cyan/15 text-cyan border-cyan/30 border-dashed"
@@ -726,7 +761,7 @@ export default function Schedule() {
                                   {heightPx > 30 && !e.is_academic && (
                                     <p className="text-[9px] opacity-70 leading-tight truncate">{timeStr}</p>
                                   )}
-                                </div>
+                                </button>
                               </PopoverTrigger>
                               <PopoverContent className="w-56 p-3.5" side="right">
                                 <div className="space-y-2">
@@ -772,8 +807,8 @@ export default function Schedule() {
         </motion.div>
       ) : (
         <motion.div variants={item}>
-          <Card className="shadow-card border-border overflow-hidden">
-            <CardContent className="p-0">
+          <Card className="overflow-x-auto border-border shadow-card">
+            <CardContent className="min-w-[640px] p-0">
               <div className="grid grid-cols-7 border-b border-border">
                 {["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"].map((d) => (
                   <div key={d} className="p-2 text-center text-[10px] font-semibold text-muted-foreground">{d}</div>