diff --git a/frontend/src/components/common/GlobalSearch.jsx b/frontend/src/components/common/GlobalSearch.jsx
index fc1c188..e51e542 100644
--- a/frontend/src/components/common/GlobalSearch.jsx
+++ b/frontend/src/components/common/GlobalSearch.jsx
@@ -71,6 +71,7 @@ const GlobalSearch = () => {
                 <input
                     ref={inputRef}
                     type="text"
+                    aria-label="Search courses"
                     value={query}
                     onChange={e => setQuery(e.target.value)}
                     onFocus={() => { if (results.length > 0) setIsOpen(true); }}
@@ -78,7 +79,10 @@ const GlobalSearch = () => {
                     className="flex-1 bg-transparent text-xs font-medium text-slate-700 dark:text-white placeholder-slate-400 dark:placeholder-white/25 focus:outline-none min-w-0"
                 />
                 {query && (
-                    <button onClick={() => { setQuery(''); setResults([]); setIsOpen(false); inputRef.current?.focus(); }}>
+                    <button
+                        onClick={() => { setQuery(''); setResults([]); setIsOpen(false); inputRef.current?.focus(); }}
+                        aria-label="Clear search"
+                    >
                         <X size={13} className="text-slate-400 dark:text-white/30 hover:text-slate-600 dark:hover:text-white/60 transition-colors" />
                     </button>
                 )}
diff --git a/frontend/src/components/common/Pagination.jsx b/frontend/src/components/common/Pagination.jsx
index dea9647..a7edcd6 100644
--- a/frontend/src/components/common/Pagination.jsx
+++ b/frontend/src/components/common/Pagination.jsx
@@ -8,7 +8,7 @@ const Pagination = ({ page, pages, onPage }) => (
             onClick={() => onPage(page - 1)}
             disabled={page <= 1}
             aria-label="Previous page"
-            className="w-8 h-8 rounded-lg border border-slate-200/60 dark:border-white/10 flex items-center justify-center disabled:opacity-30 hover:bg-slate-100 dark:hover:bg-white/5 transition"
+            className="w-8 h-8 rounded-lg border border-slate-200/60 dark:border-white/10 flex items-center justify-center disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:bg-transparent hover:bg-slate-100 dark:hover:bg-white/5 transition"
         >
             <ChevronLeft size={14} />
         </button>
@@ -20,7 +20,7 @@ const Pagination = ({ page, pages, onPage }) => (
             onClick={() => onPage(page + 1)}
             disabled={page >= pages}
             aria-label="Next page"
-            className="w-8 h-8 rounded-lg border border-slate-200/60 dark:border-white/10 flex items-center justify-center disabled:opacity-30 hover:bg-slate-100 dark:hover:bg-white/5 transition"
+            className="w-8 h-8 rounded-lg border border-slate-200/60 dark:border-white/10 flex items-center justify-center disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:bg-transparent hover:bg-slate-100 dark:hover:bg-white/5 transition"
         >
             <ChevronRight size={14} />
         </button>
diff --git a/frontend/src/components/course/AnnouncementModal.jsx b/frontend/src/components/course/AnnouncementModal.jsx
index 06a8de9..c0464ca 100644
--- a/frontend/src/components/course/AnnouncementModal.jsx
+++ b/frontend/src/components/course/AnnouncementModal.jsx
@@ -52,7 +52,9 @@ const AnnouncementModal = ({ courseId, onClose }) => {
         >
                 {/* Compose */}
                 <div className="space-y-3 mb-5">
+                    <label htmlFor="announcement-title" className="sr-only">Announcement title</label>
                     <input
+                        id="announcement-title"
                         type="text"
                         placeholder="Announcement title"
                         value={title}
@@ -60,7 +62,9 @@ const AnnouncementModal = ({ courseId, onClose }) => {
                         maxLength={200}
                         className="w-full px-4 py-2.5 rounded-2xl border border-slate-200 dark:border-white/10 bg-slate-50 dark:bg-white/5 text-sm font-semibold text-slate-800 dark:text-white placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-indigo-500/40"
                     />
+                    <label htmlFor="announcement-content" className="sr-only">Announcement content</label>
                     <textarea
+                        id="announcement-content"
                         placeholder="Write your message here…"
                         value={content}
                         onChange={(e) => setContent(e.target.value)}
@@ -72,6 +76,9 @@ const AnnouncementModal = ({ courseId, onClose }) => {
                         <button
                             type="button"
                             onClick={() => setIsPinned(!isPinned)}
+                            role="switch"
+                            aria-checked={isPinned}
+                            aria-label="Pin this announcement"
                             className={`w-9 h-5 rounded-full transition-colors ${isPinned ? 'bg-indigo-500' : 'bg-slate-200 dark:bg-white/10'} flex items-center px-0.5`}
                         >
                             <span className={`w-4 h-4 rounded-full bg-white shadow transition-transform ${isPinned ? 'translate-x-4' : 'translate-x-0'}`} />
@@ -112,6 +119,7 @@ const AnnouncementModal = ({ courseId, onClose }) => {
                                 <button
                                     onClick={() => handleDelete(ann._id)}
                                     disabled={deletingId === ann._id}
+                                    aria-label={`Delete announcement "${ann.title}"`}
                                     className="shrink-0 p-1.5 rounded-xl hover:bg-red-50 dark:hover:bg-red-900/20 text-slate-400 hover:text-red-500 transition disabled:opacity-40"
                                 >
                                     {deletingId === ann._id ? <Loader2 size={14} className="animate-spin" /> : <Trash2 size={14} />}
diff --git a/frontend/src/components/course/ReviewModal.jsx b/frontend/src/components/course/ReviewModal.jsx
index 100f46b..5e08d16 100644
--- a/frontend/src/components/course/ReviewModal.jsx
+++ b/frontend/src/components/course/ReviewModal.jsx
@@ -61,10 +61,11 @@ const ReviewModal = ({ isOpen, onClose, courseId, courseTitle, onReviewed }) =>
 
                 {/* Comment */}
                 <div>
-                    <label className="text-[11px] font-black uppercase tracking-widest text-slate-400 dark:text-white/30 mb-2 block">
+                    <label htmlFor="review-comment" className="text-[11px] font-black uppercase tracking-widest text-slate-400 dark:text-white/30 mb-2 block">
                         Comment (optional)
                     </label>
                     <textarea
+                        id="review-comment"
                         value={comment}
                         onChange={e => setComment(e.target.value)}
                         maxLength={500}
diff --git a/frontend/src/components/gamification/Leaderboard.jsx b/frontend/src/components/gamification/Leaderboard.jsx
index 7dcc5f9..6c70429 100644
--- a/frontend/src/components/gamification/Leaderboard.jsx
+++ b/frontend/src/components/gamification/Leaderboard.jsx
@@ -18,6 +18,7 @@ const Leaderboard = ({ courseId }) => {
     const [entries, setEntries] = useState([]);
     const [period, setPeriod] = useState('weekly');
     const [isLoading, setIsLoading] = useState(true);
+    const [isMockData, setIsMockData] = useState(false);
     const [refreshKey, setRefreshKey] = useState(0);
     const { user: currentUser } = useCourseStore();
     const { activeAvatar } = useGamificationStore();
@@ -52,15 +53,17 @@ const Leaderboard = ({ courseId }) => {
                     ? `/api/progress/course/${courseId}/leaderboard?period=${period}`
                     : `/api/progress/leaderboard?period=${period}`;
                 const { data } = await api.get(endpoint);
-                
+
                 // Map avatars/emojis if not present
                 const mapped = (data.leaderboard || []).map((e, idx) => ({
                     ...e,
                     avatar: e.isYou ? currentUserEmoji : (MOCK_EMOJIS[idx % MOCK_EMOJIS.length])
                 }));
                 setEntries(mapped);
+                setIsMockData(false);
             } catch {
-                // Mock leaderboard when API not yet implemented
+                // Leaderboard API unavailable — fall back to demo data, but flag it so the UI can be transparent about it
+                setIsMockData(true);
                 setEntries([
                     { rank: 1, name: 'Alex K.', xp: 1850, avatar: '🥷', isYou: false },
                     { rank: 2, name: 'Sarah M.', xp: 1620, avatar: '🦄', isYou: false },
@@ -87,6 +90,14 @@ const Leaderboard = ({ courseId }) => {
                         <Trophy size={16} className="text-amber-500 fill-amber-500/25" />
                     </div>
                     <h3 className="text-sm font-black text-slate-800 dark:text-white">Leaderboard</h3>
+                    {!isLoading && isMockData && (
+                        <span
+                            className="text-[9px] font-black uppercase tracking-wider px-2 py-0.5 rounded-full bg-amber-500/10 text-amber-600 dark:text-amber-400 border border-amber-500/20"
+                            title="Live leaderboard data is unavailable right now — showing demo data."
+                        >
+                            Demo
+                        </span>
+                    )}
                 </div>
                 {/* Period toggle */}
                 <div className="flex bg-slate-100 dark:bg-white/5 rounded-xl p-0.5 gap-0.5 border border-slate-200/50 dark:border-white/5">
diff --git a/frontend/src/components/layout/InstructorLayout.jsx b/frontend/src/components/layout/InstructorLayout.jsx
index c4c586c..e216222 100644
--- a/frontend/src/components/layout/InstructorLayout.jsx
+++ b/frontend/src/components/layout/InstructorLayout.jsx
@@ -140,7 +140,7 @@ const NotificationBell = () => {
                                     <div className="flex items-start gap-2 mb-1.5">
                                         <div className="w-7 h-7 rounded-lg bg-gradient-to-br from-purple-100 to-violet-100 dark:from-purple-900/40 dark:to-violet-900/40 flex items-center justify-center text-sm flex-shrink-0">
                                             {e.student?.avatar ? (
-                                                <img src={e.student.avatar} alt="" className="w-7 h-7 rounded-lg object-cover" />
+                                                <img src={e.student.avatar} alt={e.student?.name ? `${e.student.name}'s avatar` : 'Student avatar'} className="w-7 h-7 rounded-lg object-cover" />
                                             ) : (
                                                 <span className="text-[10px] font-black text-purple-600 dark:text-purple-400">
                                                     {e.student?.name?.[0]?.toUpperCase() || '?'}
diff --git a/frontend/src/components/layout/SettingsModal.jsx b/frontend/src/components/layout/SettingsModal.jsx
index b355a39..f05e11a 100644
--- a/frontend/src/components/layout/SettingsModal.jsx
+++ b/frontend/src/components/layout/SettingsModal.jsx
@@ -5,6 +5,7 @@ import useGamificationStore, { AVATARS, INSTRUCTOR_AVATARS, TITLES } from '../..
 import sounds from '../../utils/soundManager';
 import api from '../../utils/api';
 import useAuthStore from '../../store/authStore';
+import useToastStore from '../../store/toastStore';
 import BaseModal from '../common/BaseModal';
 
 const SettingsModal = ({ isOpen, onClose, isInstructor = false }) => {
@@ -23,6 +24,7 @@ const SettingsModal = ({ isOpen, onClose, isInstructor = false }) => {
                 await useAuthStore.getState().initialize();
             } catch (err) {
                 console.error('Failed to sync avatar with database:', err);
+                useToastStore.getState().error('Avatar not saved', 'Your avatar changed locally, but failed to sync — it may reset on your next login.');
             }
         }
     };
diff --git a/frontend/src/components/quiz/QuizEditorModal.jsx b/frontend/src/components/quiz/QuizEditorModal.jsx
index e43c482..310e00c 100644
--- a/frontend/src/components/quiz/QuizEditorModal.jsx
+++ b/frontend/src/components/quiz/QuizEditorModal.jsx
@@ -91,10 +91,11 @@ const QuestionCard = ({ question, index, nodeId, onDelete }) => {
 
                     {/* Question text */}
                     <div>
-                        <label className="block text-xs font-bold text-slate-500 dark:text-white/50 uppercase tracking-wider mb-1.5">
+                        <label htmlFor={`question-text-${nodeId}-${index}`} className="block text-xs font-bold text-slate-500 dark:text-white/50 uppercase tracking-wider mb-1.5">
                             Question Text
                         </label>
                         <textarea
+                            id={`question-text-${nodeId}-${index}`}
                             value={form.question}
                             onChange={e => setForm(f => ({ ...f, question: e.target.value }))}
                             rows={2}
@@ -116,11 +117,13 @@ const QuestionCard = ({ question, index, nodeId, onDelete }) => {
                                         name={`correct-${nodeId}-${index}`}
                                         checked={form.correctAnswerIndex === i}
                                         onChange={() => setForm(f => ({ ...f, correctAnswerIndex: i }))}
+                                        aria-label={`Mark option ${i + 1} as correct`}
                                         className="accent-indigo-500 w-4 h-4 shrink-0 cursor-pointer"
                                     />
                                     <input
                                         value={opt}
                                         onChange={e => setOption(i, e.target.value)}
+                                        aria-label={`Option ${i + 1} text`}
                                         className="flex-1 px-3 py-2 rounded-xl border border-slate-200 dark:border-white/10 bg-slate-50 dark:bg-white/5 text-slate-800 dark:text-white text-sm focus:border-indigo-400 focus:outline-none transition-colors"
                                         placeholder={`Option ${i + 1}`}
                                         dir="auto"
@@ -132,10 +135,11 @@ const QuestionCard = ({ question, index, nodeId, onDelete }) => {
 
                     {/* Explanation */}
                     <div>
-                        <label className="block text-xs font-bold text-slate-500 dark:text-white/50 uppercase tracking-wider mb-1.5">
+                        <label htmlFor={`question-explanation-${nodeId}-${index}`} className="block text-xs font-bold text-slate-500 dark:text-white/50 uppercase tracking-wider mb-1.5">
                             Explanation (shown after answer)
                         </label>
                         <textarea
+                            id={`question-explanation-${nodeId}-${index}`}
                             value={form.explanation}
                             onChange={e => setForm(f => ({ ...f, explanation: e.target.value }))}
                             rows={2}
diff --git a/frontend/src/components/wizard/StepCoreDetails.jsx b/frontend/src/components/wizard/StepCoreDetails.jsx
index 8192f3e..926c09c 100644
--- a/frontend/src/components/wizard/StepCoreDetails.jsx
+++ b/frontend/src/components/wizard/StepCoreDetails.jsx
@@ -38,9 +38,11 @@ const StepCoreDetails = () => {
                 <div className="lg:col-span-3 space-y-5">
                     {/* Course Name */}
                     <div>
-                        <label className="block text-sm font-bold text-gray-700 mb-1.5">Course Name</label>
+                        <label htmlFor="course-title" className="block text-sm font-bold text-gray-700 mb-1.5">Course Name</label>
                         <input
+                            id="course-title"
                             {...register('title', { required: 'Course Name is required' })}
+                            aria-invalid={!!errors.title}
                             className={`w-full px-4 py-3 rounded-xl border-2 font-medium transition-all duration-200 outline-none
                                 ${errors.title
                                     ? 'border-red-400 bg-red-50 focus:border-red-500'
@@ -52,8 +54,8 @@ const StepCoreDetails = () => {
                     </div>
 
                     {/* Department Grid */}
-                    <div>
-                        <label className="block text-sm font-bold text-gray-700 mb-2">Academic Department</label>
+                    <div role="group" aria-labelledby="dept-group-label">
+                        <label id="dept-group-label" className="block text-sm font-bold text-gray-700 mb-2">Academic Department</label>
                         <input type="hidden" {...register('department', { required: 'Please select a department' })} />
                         <div className="grid grid-cols-3 gap-2">
                             {DEPARTMENTS.map((dept) => {
@@ -63,6 +65,7 @@ const StepCoreDetails = () => {
                                     <button
                                         key={dept.value}
                                         type="button"
+                                        aria-pressed={isSelected}
                                         onClick={() => setValue('department', dept.value, { shouldValidate: true })}
                                         className={`flex flex-col items-center gap-1.5 p-3 rounded-xl border-2 transition-all duration-200 cursor-pointer
                                             ${isSelected
@@ -86,16 +89,18 @@ const StepCoreDetails = () => {
                     {/* Description */}
                     <div>
                         <div className="flex items-center justify-between mb-1.5">
-                            <label className="text-sm font-bold text-gray-700">Description</label>
+                            <label htmlFor="course-description" className="text-sm font-bold text-gray-700">Description</label>
                             <span className={`text-xs font-medium ${description.length >= 10 ? 'text-emerald-600' : 'text-gray-400'}`}>
                                 {description.length}/200
                             </span>
                         </div>
                         <textarea
+                            id="course-description"
                             {...register('description', {
                                 required: 'Description is required',
                                 minLength: { value: 10, message: 'Must be at least 10 characters' }
                             })}
+                            aria-invalid={!!errors.description}
                             maxLength={200}
                             className={`w-full px-4 py-3 rounded-xl border-2 transition-all duration-200 outline-none h-28 resize-none
                                 ${errors.description
diff --git a/frontend/src/components/wizard/StepMaterials.jsx b/frontend/src/components/wizard/StepMaterials.jsx
index a2a49da..e2e5de6 100644
--- a/frontend/src/components/wizard/StepMaterials.jsx
+++ b/frontend/src/components/wizard/StepMaterials.jsx
@@ -2,6 +2,7 @@ import React, { useCallback, useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useDropzone } from 'react-dropzone';
 import { UploadCloud, FileText, Video, X, Presentation, FileSpreadsheet, CheckCircle2, Sparkles, Eye, Info } from 'lucide-react';
+import useToastStore from '../../store/toastStore';
 
 const FILE_TYPE_META = {
     pdf: { label: 'PDF', color: 'text-red-600', bg: 'bg-red-50', border: 'border-red-200' },
@@ -66,7 +67,7 @@ const StepMaterials = () => {
         const existingFileSignatures = new Set(materials.map(f => `${f.name}_${f.size}`));
         const uniqueNewFiles = acceptedFiles.filter(file => !existingFileSignatures.has(`${file.name}_${file.size}`));
         if (uniqueNewFiles.length < acceptedFiles.length) {
-            alert(`${acceptedFiles.length - uniqueNewFiles.length} duplicate file(s) were skipped.`);
+            useToastStore.getState().info('Duplicate files skipped', `${acceptedFiles.length - uniqueNewFiles.length} duplicate file(s) were skipped.`);
         }
         const newFiles = uniqueNewFiles.map(file => Object.assign(file, { preview: URL.createObjectURL(file) }));
         setValue('materials', [...materials, ...newFiles], { shouldValidate: true });
diff --git a/frontend/src/pages/ClassRoster.jsx b/frontend/src/pages/ClassRoster.jsx
index c0d27df..86f5d1a 100644
--- a/frontend/src/pages/ClassRoster.jsx
+++ b/frontend/src/pages/ClassRoster.jsx
@@ -3,6 +3,7 @@ import InstructorLayout from '../components/layout/InstructorLayout';
 import { Users, Zap, Flame, CheckSquare, Square, Mail, SlidersHorizontal, TrendingUp, AlertTriangle, Clock, UserPlus, X } from 'lucide-react';
 import useCourseStore from '../store/courseStore';
 import useEnrollmentStore from '../store/enrollmentStore';
+import useToastStore from '../store/toastStore';
 import api from '../utils/api';
 import { clickableProps } from '../utils/a11y';
 
@@ -44,6 +45,7 @@ const ClassRoster = () => {
                 setStudents(data.students || []);
             } catch (err) {
                 console.error('Failed to fetch students', err);
+                useToastStore.getState().error('Failed to load roster', 'Could not fetch students for this course. Please try again.');
             } finally {
                 setIsLoading(false);
             }
@@ -285,7 +287,7 @@ const ClassRoster = () => {
                                         {/* Avatar + Info */}
                                         <div className="flex items-center gap-3 mb-4">
                                             {student.avatar && (student.avatar.startsWith('http') || student.avatar.startsWith('/')) ? (
-                                                <img src={student.avatar} alt="" className="w-12 h-12 rounded-2xl object-cover border border-slate-200 dark:border-white/10 flex-shrink-0" />
+                                                <img src={student.avatar} alt={student.name ? `${student.name}'s avatar` : 'Student avatar'} className="w-12 h-12 rounded-2xl object-cover border border-slate-200 dark:border-white/10 flex-shrink-0" />
                                             ) : (
                                                 <div className="w-12 h-12 rounded-2xl bg-slate-100 dark:bg-white/10 border border-slate-200 dark:border-white/5 flex items-center justify-center text-2xl flex-shrink-0 select-none">
                                                     {student.avatar || '🎓'}
diff --git a/frontend/src/pages/CourseWizard.jsx b/frontend/src/pages/CourseWizard.jsx
index abfe234..868eac9 100644
--- a/frontend/src/pages/CourseWizard.jsx
+++ b/frontend/src/pages/CourseWizard.jsx
@@ -4,6 +4,7 @@ import { useForm, FormProvider } from 'react-hook-form';
 import { ChevronRight, ChevronLeft, Check, Loader2, FileText, UploadCloud, Brain, Trophy, Sparkles, MapPin, CheckCircle2, Clock } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 import api from '../utils/api';
+import useToastStore from '../store/toastStore';
 
 import StepCoreDetails from '../components/wizard/StepCoreDetails';
 import StepMaterials from '../components/wizard/StepMaterials';
@@ -94,7 +95,7 @@ const CourseWizard = () => {
             setIsSuccess(true);
         } catch (error) {
             clearInterval(stepInterval);
-            alert(error.message || 'Failed to create course');
+            useToastStore.getState().error('Course creation failed', error.message || 'Failed to create course. Please try again.');
             setIsProcessing(false);
         }
     };
@@ -112,7 +113,7 @@ const CourseWizard = () => {
                         navigate('/instructor');
                     } else if (course.generationStatus === 'failed') {
                         clearInterval(interval);
-                        alert('AI generation failed. Please try again.');
+                        useToastStore.getState().error('Generation failed', 'AI course generation failed. Please try again.');
                         navigate('/instructor');
                     }
                 } catch (err) {
diff --git a/frontend/src/pages/InstructorDashboard.jsx b/frontend/src/pages/InstructorDashboard.jsx
index 6bc9705..b718130 100644
--- a/frontend/src/pages/InstructorDashboard.jsx
+++ b/frontend/src/pages/InstructorDashboard.jsx
@@ -124,7 +124,7 @@ const PendingRow = ({ enrollment, onApprove, onDeny, loadingId }) => {
         <div className="flex items-center gap-2 px-3 py-2 rounded-xl hover:bg-slate-50 dark:hover:bg-white/5 transition-colors">
             <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-purple-100 to-violet-100 dark:from-purple-900/40 dark:to-violet-900/40 flex items-center justify-center flex-shrink-0 text-sm">
                 {enrollment.student?.avatar
-                    ? <img src={enrollment.student.avatar} alt="" className="w-8 h-8 rounded-lg object-cover" />
+                    ? <img src={enrollment.student.avatar} alt={enrollment.student?.name ? `${enrollment.student.name}'s avatar` : 'Student avatar'} className="w-8 h-8 rounded-lg object-cover" />
                     : <span className="text-[11px] font-black text-purple-600 dark:text-purple-400">{enrollment.student?.name?.[0]?.toUpperCase() || '?'}</span>
                 }
             </div>
diff --git a/frontend/src/pages/LessonQuiz.jsx b/frontend/src/pages/LessonQuiz.jsx
index 74916ce..8fe3742 100644
--- a/frontend/src/pages/LessonQuiz.jsx
+++ b/frontend/src/pages/LessonQuiz.jsx
@@ -12,6 +12,7 @@ import useGamificationStore from '../store/gamificationStore';
 import useAuthStore from '../store/authStore';
 import ConfettiEffect from '../components/gamification/ConfettiEffect';
 import LevelUpModal from '../components/gamification/LevelUpModal';
+import useToastStore from '../store/toastStore';
 
 const LessonQuiz = () => {
     const { courseId, id } = useParams();
@@ -23,6 +24,7 @@ const LessonQuiz = () => {
     const [quizData, setQuizData] = useState([]);
     const [nodeData, setNodeData] = useState(null);
     const [isLoading, setIsLoading] = useState(true);
+    const [loadError, setLoadError] = useState(false);
     const [step, setStep] = useState('summary');
     const [showReward, setShowReward] = useState(null);
 
@@ -32,6 +34,7 @@ const LessonQuiz = () => {
     useEffect(() => {
         const fetchData = async () => {
             setIsLoading(true);
+            setLoadError(false);
             try {
                 const nodeRes = await api.get(`/api/courses/${courseId}/nodes/${id}/content`);
                 setNodeData(nodeRes.data);
@@ -43,6 +46,7 @@ const LessonQuiz = () => {
                 }
             } catch (error) {
                 console.error('Failed to load lesson data', error);
+                setLoadError(true);
             } finally {
                 setIsLoading(false);
             }
@@ -115,14 +119,14 @@ const LessonQuiz = () => {
             });
 
         } catch (error) {
-            alert(error.message || 'Failed to submit quiz');
+            useToastStore.getState().error('Submission failed', error.message || 'Failed to submit quiz. Please try again.');
         }
     };
 
     if (isLoading) {
         return (
             <Layout title="Loading Lesson...">
-                <div className="min-h-screen bg-slate-50 dark:bg-slate-950 flex flex-col items-center justify-center gap-4 p-4 sm:p-8 md:p-12">
+                <div className="min-h-screen bg-slate-50 dark:bg-slate-950 flex flex-col items-center justify-center gap-4 p-4 sm:p-8 md:p-12" role="status" aria-live="polite">
                     <div className="animate-spin w-10 h-10 border-4 border-indigo-500 border-t-transparent rounded-full"></div>
                     <p className="text-slate-500 dark:text-white/40 font-medium">Preparing your lesson materials...</p>
                 </div>
@@ -130,6 +134,23 @@ const LessonQuiz = () => {
         );
     }
 
+    if (loadError) {
+        return (
+            <Layout title="Lesson">
+                <div className="min-h-screen bg-slate-50 dark:bg-slate-950 flex flex-col items-center justify-center gap-4 p-4 sm:p-8 md:p-12 text-center">
+                    <p className="text-slate-700 dark:text-white font-bold text-lg">Couldn't load this lesson.</p>
+                    <p className="text-slate-500 dark:text-white/40 max-w-sm">There was a problem fetching the lesson content. Please check your connection and try again.</p>
+                    <button
+                        onClick={() => navigate(-1)}
+                        className="mt-2 px-5 py-2.5 rounded-xl bg-indigo-500 hover:bg-indigo-400 text-white font-bold transition"
+                    >
+                        Go Back
+                    </button>
+                </div>
+            </Layout>
+        );
+    }
+
     // ── Reward Overlay ──
     if (showReward) {
         const pct = showReward.totalAnswerable > 0
@@ -242,7 +263,7 @@ const LessonQuiz = () => {
             <Layout title={nodeData?.title || 'Lesson'}>
                 <div className="min-h-screen bg-slate-50 dark:bg-slate-950 flex flex-col">
                     <div className="bg-white dark:bg-slate-900 px-6 py-4 flex items-center gap-4 sticky top-0 z-10 border-b border-slate-200 dark:border-white/10">
-                        <button onClick={() => navigate(-1)} className="w-10 h-10 rounded-full hover:bg-slate-100 dark:hover:bg-white/10 flex items-center justify-center transition text-slate-600 dark:text-white">
+                        <button onClick={() => navigate(-1)} aria-label="Go back" className="w-10 h-10 rounded-full hover:bg-slate-100 dark:hover:bg-white/10 flex items-center justify-center transition text-slate-600 dark:text-white">
                             <ChevronLeft size={24} />
                         </button>
                         <div>
@@ -305,7 +326,7 @@ const LessonQuiz = () => {
         <Layout title="Quiz">
             <div className="min-h-screen bg-slate-50 dark:bg-slate-950 flex flex-col">
                 <div className="bg-white dark:bg-slate-900 px-4 py-3 flex items-center gap-3 sticky top-0 z-10 border-b border-slate-100 dark:border-white/10">
-                    <button onClick={() => setStep('summary')} className="w-9 h-9 rounded-full hover:bg-slate-100 dark:hover:bg-white/10 flex items-center justify-center transition text-slate-600 dark:text-white flex-shrink-0">
+                    <button onClick={() => setStep('summary')} aria-label="Back to lesson summary" className="w-9 h-9 rounded-full hover:bg-slate-100 dark:hover:bg-white/10 flex items-center justify-center transition text-slate-600 dark:text-white flex-shrink-0">
                         <ChevronLeft size={22} />
                     </button>
                     <div className="flex-1 min-w-0">
diff --git a/frontend/src/pages/ManagedCourses.jsx b/frontend/src/pages/ManagedCourses.jsx
index 88a8d7f..874fa2a 100644
--- a/frontend/src/pages/ManagedCourses.jsx
+++ b/frontend/src/pages/ManagedCourses.jsx
@@ -3,6 +3,7 @@ import { useNavigate, useSearchParams } from 'react-router-dom';
 import InstructorLayout from '../components/layout/InstructorLayout';
 import useCourseStore from '../store/courseStore';
 import useEnrollmentStore from '../store/enrollmentStore';
+import useToastStore from '../store/toastStore';
 import { getDeptStyle } from '../utils/departmentStyles';
 import Button from '../components/common/Button';
 import {
@@ -339,7 +340,12 @@ const ManagedCourses = () => {
     const handleDelete = async (courseId, courseTitle) => {
         if (!window.confirm(`Are you sure you want to delete "${courseTitle}"? This action cannot be undone.`)) return;
         setDeletingId(courseId);
-        try { await deleteCourse(courseId); } catch (error) { alert('Failed to delete course: ' + (error.message || 'Unknown error')); }
+        try {
+            await deleteCourse(courseId);
+            useToastStore.getState().success('Course deleted', `"${courseTitle}" has been deleted.`);
+        } catch (error) {
+            useToastStore.getState().error('Delete failed', error.message || 'Failed to delete course. Please try again.');
+        }
         finally { setDeletingId(null); }
     };
 
diff --git a/frontend/src/pages/MyCourses.jsx b/frontend/src/pages/MyCourses.jsx
index 7ff010d..a856ce0 100644
--- a/frontend/src/pages/MyCourses.jsx
+++ b/frontend/src/pages/MyCourses.jsx
@@ -108,7 +108,7 @@ const MyCourses = () => {
                                             <div className="flex items-center gap-3 mb-4 bg-slate-100 dark:bg-black/20 p-3 rounded-2xl border border-slate-200/50 dark:border-white/5">
                                                 <img
                                                     src={course.instructor?.avatar || 'https://via.placeholder.com/150'}
-                                                    alt={course.instructor?.name}
+                                                    alt={course.instructor?.name ? `${course.instructor.name}'s avatar` : 'Instructor avatar'}
                                                     className="w-10 h-10 rounded-full bg-slate-200 dark:bg-white/10 border border-slate-300 dark:border-white/20"
                                                 />
                                                 <div className="text-sm">
diff --git a/frontend/src/pages/MyEnrollments.jsx b/frontend/src/pages/MyEnrollments.jsx
index 2c5a8f3..dc21185 100644
--- a/frontend/src/pages/MyEnrollments.jsx
+++ b/frontend/src/pages/MyEnrollments.jsx
@@ -1,8 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import StudentLayout from '../components/layout/StudentLayout';
 import useEnrollmentStore from '../store/enrollmentStore';
+import useToastStore from '../store/toastStore';
 import api from '../utils/api';
 import { Search } from 'lucide-react';
+import Button from '../components/common/Button';
 
 const DEPARTMENTS = ['All', 'Computer Science', 'Mathematics', 'Science', 'Business'];
 
@@ -23,19 +25,23 @@ const MyEnrollments = () => {
     const { myEnrollments, fetchMyEnrollments, requestEnrollment } = useEnrollmentStore();
     const [availableCourses, setAvailableCourses] = useState([]);
     const [isLoading, setIsLoading] = useState(true);
-    const [isRequesting, setIsRequesting] = useState(false);
+    const [loadError, setLoadError] = useState(false);
+    const [requestingId, setRequestingId] = useState(null);
     const [searchTerm, setSearchTerm] = useState('');
     const [activeDept, setActiveDept] = useState('All');
 
     useEffect(() => {
         const loadData = async () => {
             setIsLoading(true);
+            setLoadError(false);
             await fetchMyEnrollments();
             try {
                 const { data } = await api.get('/api/courses');
                 setAvailableCourses(data.courses || []);
             } catch (error) {
                 console.error("Failed to fetch courses", error);
+                setLoadError(true);
+                useToastStore.getState().error('Failed to load courses', 'Please refresh the page to try again.');
             }
             setIsLoading(false);
         };
@@ -43,14 +49,15 @@ const MyEnrollments = () => {
     }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
     const handleRequest = async (courseId) => {
-        setIsRequesting(true);
+        setRequestingId(courseId);
         try {
             await requestEnrollment(courseId);
             await fetchMyEnrollments();
+            useToastStore.getState().success('Request sent', 'Your enrollment request has been submitted.');
         } catch (error) {
-            alert(error.message || "Failed to request enrollment");
+            useToastStore.getState().error('Request failed', error.message || 'Failed to request enrollment');
         } finally {
-            setIsRequesting(false);
+            setRequestingId(null);
         }
     };
 
@@ -125,14 +132,21 @@ const MyEnrollments = () => {
                     </div>
                 </div>
 
+                {loadError && !isLoading && (
+                    <div className="mb-6 px-4 py-3 rounded-2xl bg-red-500/10 border border-red-500/30 text-red-400 text-sm font-medium">
+                        Couldn't load the full course list. Some courses may be missing — try refreshing the page.
+                    </div>
+                )}
+
                 {isLoading ? (
-                    <div className="flex justify-center p-12">
+                    <div className="flex justify-center p-12" role="status" aria-live="polite">
                         <div className="animate-spin w-8 h-8 border-4 border-[#D97757] border-t-transparent rounded-full"></div>
+                        <span className="sr-only">Loading courses…</span>
                     </div>
                 ) : (
                     <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                         {filteredCourses.map((course) => {
-                            const enrollment = myEnrollments.find(e => e.course._id === course._id || e.course === course._id);
+                            const enrollment = myEnrollments.find(e => (e.course._id || e.course) === course._id);
                             const gradient = getDeptGradient(course.department);
 
                             return (
@@ -162,7 +176,7 @@ const MyEnrollments = () => {
                                         <p className="text-slate-500 dark:text-white/60 text-sm mb-5 line-clamp-3 flex-1">{course.description}</p>
 
                                         <div className="flex items-center gap-3 mb-5 bg-slate-100 dark:bg-black/20 p-3 rounded-2xl border border-slate-200/50 dark:border-white/5">
-                                            <img src={course.instructor?.avatar || 'https://via.placeholder.com/150'} alt="Instructor" className="w-10 h-10 rounded-full bg-slate-200 dark:bg-white/10 border border-slate-300 dark:border-white/20" />
+                                            <img src={course.instructor?.avatar || 'https://via.placeholder.com/150'} alt={course.instructor?.name ? `${course.instructor.name}'s avatar` : 'Instructor avatar'} className="w-10 h-10 rounded-full bg-slate-200 dark:bg-white/10 border border-slate-300 dark:border-white/20" />
                                             <div className="text-sm">
                                                 <p className="text-slate-800 dark:text-white font-bold">{course.instructor?.name || 'Instructor'}</p>
                                                 <p className="text-[10px] text-slate-400 dark:text-white/40 uppercase tracking-widest mt-0.5">Course Creator</p>
@@ -174,13 +188,16 @@ const MyEnrollments = () => {
                                                 {enrollment ? getStatusBadge(enrollment.status) : <span className="text-slate-400 dark:text-white/40 text-sm font-bold tracking-wide uppercase">Not enrolled</span>}
                                             </div>
                                             {(!enrollment || enrollment.status === 'denied') && (
-                                                <button
+                                                <Button
+                                                    variant="gradient"
+                                                    size="sm"
                                                     onClick={() => handleRequest(course._id)}
-                                                    disabled={isRequesting}
-                                                    className="btn-gradient text-white px-5 py-2.5 rounded-xl text-sm font-bold disabled:opacity-50"
+                                                    loading={requestingId === course._id}
+                                                    disabled={requestingId !== null && requestingId !== course._id}
+                                                    aria-label={enrollment?.status === 'denied' ? `Request access again for ${course.title}` : `Request access for ${course.title}`}
                                                 >
                                                     {enrollment?.status === 'denied' ? 'Request Again' : 'Request Access'}
-                                                </button>
+                                                </Button>
                                             )}
                                         </div>
                                     </div>
diff --git a/frontend/src/pages/RoleSelectPage.jsx b/frontend/src/pages/RoleSelectPage.jsx
index bae49b8..1e04d35 100644
--- a/frontend/src/pages/RoleSelectPage.jsx
+++ b/frontend/src/pages/RoleSelectPage.jsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import useAuthStore from '../store/authStore';
+import useToastStore from '../store/toastStore';
 import { GraduationCap, Presentation, Check } from 'lucide-react';
 
 const RoleSelectPage = () => {
@@ -31,7 +32,7 @@ const RoleSelectPage = () => {
 
     const handleContinue = async () => {
         if (selectedRoles.length === 0) {
-            alert('Please select at least one role.');
+            useToastStore.getState().info('Select a role', 'Please select at least one role.');
             return;
         }
 
@@ -56,11 +57,11 @@ const RoleSelectPage = () => {
                 } else if (currentRole === 'instructor') {
                     navigate('/instructor', { replace: true });
                 } else {
-                    alert('Your account already has a role assigned. Logging out...');
+                    useToastStore.getState().error('Role already set', 'Your account already has a role assigned. Logging out...');
                     navigate('/login', { replace: true });
                 }
             } else {
-                alert('Failed to set role. Please try again.');
+                useToastStore.getState().error('Something went wrong', 'Failed to set role. Please try again.');
             }
             setIsSubmitting(false);
         }
diff --git a/frontend/src/pages/StudentStatusOverview.jsx b/frontend/src/pages/StudentStatusOverview.jsx
index 0b9e123..24db079 100644
--- a/frontend/src/pages/StudentStatusOverview.jsx
+++ b/frontend/src/pages/StudentStatusOverview.jsx
@@ -7,6 +7,7 @@ import {
   CheckCircle, Search, Flame,
 } from 'lucide-react';
 import useCourseStore from '../store/courseStore';
+import useToastStore from '../store/toastStore';
 import api from '../utils/api';
 
 // ── helpers ────────────────────────────────────────────────────────────────────
@@ -235,7 +236,7 @@ const TopPerformers = ({ leaderboard, loading }) => {
               'bg-orange-50/40 border-orange-200/40 dark:bg-orange-500/5 dark:border-orange-500/15'
             }`}>
               <span className="text-2xl w-8 text-center flex-shrink-0 select-none">{RANK_MEDAL[i]}</span>
-              <AvatarDisplay avatar={s.avatar} size="w-9 h-9" />
+              <AvatarDisplay avatar={s.avatar} size="w-9 h-9" name={s.name} />
               <div className="flex-1 min-w-0">
                 <p className="text-sm font-bold text-slate-800 dark:text-white truncate leading-tight">{s.name || 'Student'}</p>
                 <p className="text-[11px] text-slate-400 dark:text-white/40 font-medium">Lv.{s.level || levelFromXP(s.xp)} · {(s.xp || 0).toLocaleString()} XP</p>
@@ -253,9 +254,9 @@ const TopPerformers = ({ leaderboard, loading }) => {
 
 // ── avatar helper ──────────────────────────────────────────────────────────────
 
-const AvatarDisplay = ({ avatar, size = 'w-10 h-10' }) => {
+const AvatarDisplay = ({ avatar, size = 'w-10 h-10', name }) => {
   if (avatar && (avatar.startsWith('http') || avatar.startsWith('/'))) {
-    return <img src={avatar} alt="" className={`${size} rounded-full border border-slate-200 dark:border-white/10 flex-shrink-0 object-cover`} />;
+    return <img src={avatar} alt={name ? `${name}'s avatar` : 'Student avatar'} className={`${size} rounded-full border border-slate-200 dark:border-white/10 flex-shrink-0 object-cover`} />;
   }
   return (
     <div className={`${size} rounded-full bg-slate-100 dark:bg-white/10 border border-slate-200 dark:border-white/5 flex items-center justify-center text-base flex-shrink-0 select-none`}>
@@ -336,6 +337,7 @@ const StudentStatusOverview = () => {
         setAnalytics(res.data);
       } catch (e) {
         console.error('Failed to fetch analytics', e);
+        useToastStore.getState().error('Failed to load analytics', 'Please try selecting the course again.');
       } finally {
         setIsLoading(false);
       }
@@ -349,6 +351,7 @@ const StudentStatusOverview = () => {
         setStudents(res.data?.students || []);
       } catch (e) {
         console.error('Failed to fetch students', e);
+        useToastStore.getState().error('Failed to load students', 'Please try selecting the course again.');
       } finally {
         setStudentsLoading(false);
       }
@@ -369,6 +372,7 @@ const StudentStatusOverview = () => {
         setLeaderboard(res.data || []);
       } catch (e) {
         console.error('Failed to fetch leaderboard', e);
+        useToastStore.getState().error('Failed to load leaderboard', 'Please try again in a moment.');
       } finally {
         setLeaderboardLoading(false);
       }
@@ -735,7 +739,7 @@ const StudentStatusOverview = () => {
                         const iss = issueConfig(item.issue);
                         return (
                           <div key={i} className="flex items-center gap-3 p-3 rounded-2xl bg-slate-50 dark:bg-black/20 border border-slate-200/60 dark:border-white/5 hover:bg-slate-100/50 dark:hover:bg-white/5 transition-colors">
-                            <AvatarDisplay avatar={item.student?.avatar} size="w-9 h-9" />
+                            <AvatarDisplay avatar={item.student?.avatar} size="w-9 h-9" name={item.student?.name} />
                             <div className="flex-1 min-w-0">
                               <div className="flex items-center gap-2 flex-wrap">
                                 <p className="text-sm font-bold text-slate-800 dark:text-white break-words leading-tight" title={item.student?.name || 'Student'}>
@@ -871,7 +875,7 @@ const StudentStatusOverview = () => {
                             {/* Name + avatar */}
                             <td className="px-4 py-4">
                               <div className="flex items-center gap-3">
-                                <AvatarDisplay avatar={s.student?.avatar} size="w-8 h-8" />
+                                <AvatarDisplay avatar={s.student?.avatar} size="w-8 h-8" name={s.student?.name} />
                                 <div>
                                   <p className="font-bold text-slate-800 dark:text-white leading-tight">{s.student?.name || 'Unknown'}</p>
                                   <p className="text-[11px] text-slate-400 dark:text-white/40 leading-tight">{s.student?.email || '—'}</p>
@@ -1050,7 +1054,7 @@ const StudentStatusOverview = () => {
                           }
                         </div>
                         {/* Avatar */}
-                        <AvatarDisplay avatar={s.avatar} size="w-10 h-10" />
+                        <AvatarDisplay avatar={s.avatar} size="w-10 h-10" name={s.name} />
                         {/* Name + XP bar */}
                         <div className="flex-1 min-w-0">
                           <div className="flex items-center gap-2 mb-1.5">
diff --git a/frontend/src/pages/admin/InstructorsTab.jsx b/frontend/src/pages/admin/InstructorsTab.jsx
index d9db154..a047458 100644
--- a/frontend/src/pages/admin/InstructorsTab.jsx
+++ b/frontend/src/pages/admin/InstructorsTab.jsx
@@ -107,7 +107,7 @@ const InstructorsTab = () => {
                     <td className="px-4 py-3">
                       <div className="flex items-center gap-3">
                         {inst.avatar ? (
-                          <img src={inst.avatar} alt="" className="w-8 h-8 rounded-lg object-cover flex-shrink-0" />
+                          <img src={inst.avatar} alt={inst.name ? `${inst.name}'s avatar` : 'Instructor avatar'} className="w-8 h-8 rounded-lg object-cover flex-shrink-0" />
                         ) : (
                           <div className="w-8 h-8 rounded-lg bg-purple-500/10 flex items-center justify-center flex-shrink-0 text-purple-600 dark:text-purple-400 font-black text-sm">
                             {inst.name?.[0]?.toUpperCase() ?? '?'}