diff --git a/backend/src/__tests__/security.test.ts b/backend/src/__tests__/security.test.ts
new file mode 100644
index 00000000..f537d05f
--- /dev/null
+++ b/backend/src/__tests__/security.test.ts
@@ -0,0 +1,108 @@
+import { sanitizeInput, detectSuspiciousPatterns } from '../middleware/sanitizer';
+import { Request, Response, NextFunction } from 'express';
+
+describe('Security Middleware', () => {
+  describe('detectSuspiciousPatterns', () => {
+    let req: Partial<Request>;
+    let res: Partial<Response>;
+    let next: NextFunction;
+    let jsonMock: jest.Mock;
+
+    beforeEach(() => {
+      jsonMock = jest.fn();
+      req = {
+        body: {},
+        query: {},
+        params: {}
+      };
+      res = {
+        status: jest.fn(() => ({ json: jsonMock })),
+      };
+      next = jest.fn();
+    });
+
+    it('should detect XSS attempts with script tags', () => {
+      req.body = {
+        name: '<script>alert("xss")</script>'
+      };
+
+      detectSuspiciousPatterns(req as Request, res as Response, next);
+      
+      expect(res.status).toHaveBeenCalledWith(403);
+      expect(jsonMock).toHaveBeenCalled();
+    });
+
+    it('should detect SQL injection attempts', () => {
+      req.body = {
+        id: "1' OR '1'='1"
+      };
+
+      detectSuspiciousPatterns(req as Request, res as Response, next);
+      
+      expect(res.status).toHaveBeenCalledWith(403);
+    });
+
+    it('should detect NoSQL injection attempts', () => {
+      req.body = {
+        $gt: 0
+      };
+
+      detectSuspiciousPatterns(req as Request, res as Response, next);
+      
+      expect(res.status).toHaveBeenCalledWith(403);
+    });
+
+    it('should let normal requests pass', () => {
+      req.body = {
+        name: 'John Doe',
+        email: 'john@example.com'
+      };
+
+      detectSuspiciousPatterns(req as Request, res as Response, next);
+      
+      expect(next).toHaveBeenCalled();
+    });
+  });
+
+  describe('sanitizeInput', () => {
+    let req: Partial<Request>;
+    let res: Partial<Response>;
+    let next: NextFunction;
+
+    beforeEach(() => {
+      req = {
+        body: {},
+        query: {},
+        params: {}
+      };
+      res = {};
+      next = jest.fn();
+    });
+
+    it('should strip HTML tags', () => {
+      req.body = {
+        name: '<b>John</b> Doe',
+        bio: '<script>malicious</script>Hello'
+      };
+
+      sanitizeInput(req as Request, res as Response, next);
+      
+      expect(req.body.name).not.toContain('<b>');
+      expect(req.body.bio).not.toContain('<script>');
+      expect(next).toHaveBeenCalled();
+    });
+
+    it('should sanitize NoSQL operators in keys', () => {
+      req.body = {
+        $gt: 5,
+        $in: [1, 2, 3]
+      };
+
+      sanitizeInput(req as Request, res as Response, next);
+      
+      expect(req.body).not.toHaveProperty('$gt');
+      expect(req.body).toHaveProperty('sanitized_gt');
+      expect(next).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/backend/src/index.ts b/backend/src/index.ts
index 96146a8b..11f6c7f4 100644
--- a/backend/src/index.ts
+++ b/backend/src/index.ts
@@ -43,7 +43,9 @@ import {
   ddosProtection,
   botDetection,
   advancedRestrictions,
-  requestSanitizer
+  requestSanitizer,
+  cspMiddleware,
+  securityHeadersMiddleware
 } from './middleware/security';
 import { detectSuspiciousPatterns } from './middleware/sanitizer';
 // @ts-ignore
@@ -117,6 +119,8 @@ setSyncWebsocketEmitter((userId: string, event: string, data: any) => {
 
 // Middleware
 app.use(helmet());
+app.use(cspMiddleware);
+app.use(securityHeadersMiddleware);
 app.use(cors());
 app.use(express.json({ limit: '10mb' }));
 app.use(express.urlencoded({ extended: true }));
diff --git a/backend/src/middleware/sanitizer.ts b/backend/src/middleware/sanitizer.ts
index 673096d6..81f762fd 100644
--- a/backend/src/middleware/sanitizer.ts
+++ b/backend/src/middleware/sanitizer.ts
@@ -1,70 +1,52 @@
 import { Request, Response, NextFunction } from 'express';
 import logger from '../utils/logger';
 
+const MAX_STRING_LENGTH = 10000;
+
 /**
- * Strips HTML tags from a string.
- * @param str The string to sanitize
+ * Encodes HTML entities to prevent XSS attacks.
  */
-const stripHtml = (str: string): string => {
+const encodeHtmlEntities = (str: string): string => {
   return str
-    .replace(/<script\b[^>]*>([\s\S]*?)<\/script>/gmi, '') // Remove script tags AND content
-    .replace(/<[^>]*>?/gm, '') // Remove all other tags
-    .trim();
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;')
+    .replace(/\//g, '&#x2F;');
 };
 
 /**
- * Escapes characters that could be used for NoSQL injection.
- * Specifically prevents the use of MongoDB operators starting with $.
- * @param obj The object to sanitize
+ * Strips HTML tags from a string.
  */
-const sanitizeNoSql = (obj: any): any => {
-  if (obj instanceof Object) {
-    for (const key in obj) {
-      if (key.startsWith('$')) {
-        const newKey = key.replace(/^\$/, '');
-        obj[newKey] = obj[key];
-        delete obj[key];
-        sanitizeNoSql(obj[newKey]);
-      } else {
-        sanitizeNoSql(obj[key]);
-      }
-    }
-  }
-  return obj;
+const stripHtml = (str: string): string => {
+  return str
+    .replace(/<script\b[^>]*>([\s\S]*?)<\/script>/gmi, '')
+    .replace(/<style\b[^>]*>([\s\S]*?)<\/style>/gmi, '')
+    .replace(/<iframe\b[^>]*>([\s\S]*?)<\/iframe>/gmi, '')
+    .replace(/<[^>]*>?/gm, '')
+    .trim();
 };
 
 /**
- * Escapes special characters for SQL queries to prevent SQL injection.
- * Note: Parameterized queries should always be used as the primary defense.
- * @param str The string to sanitize
+ * Sanitizes string with length validation and encoding.
  */
-const escapeSql = (str: string): string => {
-  return str.replace(/['"\\\b\f\n\r\t\v\0]/g, (char) => {
-    switch (char) {
-      case "'": return "''";
-      case "\"": return "\\\"";
-      case "\\": return "\\\\";
-      case "\b": return "\\b";
-      case "\f": return "\\f";
-      case "\n": return "\\n";
-      case "\r": return "\\r";
-      case "\t": return "\\t";
-      case "\v": return "\\v";
-      case "\0": return "\\0";
-      default: return char;
-    }
-  });
+const sanitizeString = (str: string): string => {
+  let sanitized = stripHtml(str);
+  sanitized = encodeHtmlEntities(sanitized);
+  sanitized = sanitized.trim();
+  if (sanitized.length > MAX_STRING_LENGTH) {
+    sanitized = sanitized.substring(0, MAX_STRING_LENGTH);
+  }
+  return sanitized;
 };
 
 /**
- * Recursively sanitizes an object by stripping HTML and escaping SQL/NoSQL patterns.
- * @param obj The object to sanitize
+ * Recursively sanitizes an object.
  */
 const sanitizeRecursive = (obj: any): any => {
   if (typeof obj === 'string') {
-    let sanitized = stripHtml(obj);
-    sanitized = escapeSql(sanitized);
-    return sanitized;
+    return sanitizeString(obj);
   }
 
   if (Array.isArray(obj)) {
@@ -75,8 +57,10 @@ const sanitizeRecursive = (obj: any): any => {
     const sanitizedObj: any = {};
     for (const key in obj) {
       if (Object.prototype.hasOwnProperty.call(obj, key)) {
-        // Sanitize key for NoSQL injection
-        const sanitizedKey = key.startsWith('$') ? key.replace(/^\$/, '') : key;
+        let sanitizedKey = key;
+        if (key.startsWith('$')) {
+          sanitizedKey = key.replace(/^\$/, 'sanitized_');
+        }
         sanitizedObj[sanitizedKey] = sanitizeRecursive(obj[key]);
       }
     }
@@ -88,14 +72,13 @@ const sanitizeRecursive = (obj: any): any => {
 
 /**
  * Sanitizes file upload metadata.
- * @param file The file object from multer
  */
 const sanitizeFileMetadata = (file: any) => {
   if (file.originalname) {
-    file.originalname = stripHtml(file.originalname).replace(/[^a-zA-Z0-9.\-_]/g, '_');
+    file.originalname = sanitizeString(file.originalname).replace(/[^a-zA-Z0-9.\-_]/g, '_');
   }
   if (file.fieldname) {
-    file.fieldname = stripHtml(file.fieldname);
+    file.fieldname = sanitizeString(file.fieldname);
   }
 };
 
@@ -104,22 +87,15 @@ const sanitizeFileMetadata = (file: any) => {
  */
 export const sanitizeInput = (req: Request, res: Response, next: NextFunction) => {
   try {
-    // Sanitize Body
     if (req.body) {
       req.body = sanitizeRecursive(req.body);
     }
-
-    // Sanitize Query Parameters
     if (req.query) {
       req.query = sanitizeRecursive(req.query);
     }
-
-    // Sanitize URL Parameters
     if (req.params) {
       req.params = sanitizeRecursive(req.params);
     }
-
-    // Sanitize File Metadata
     if (req.file) {
       sanitizeFileMetadata(req.file);
     }
@@ -132,7 +108,6 @@ export const sanitizeInput = (req: Request, res: Response, next: NextFunction) =
         });
       }
     }
-
     next();
   } catch (error) {
     logger.error('Input sanitization error:', error);
@@ -146,20 +121,29 @@ export const sanitizeInput = (req: Request, res: Response, next: NextFunction) =
 export const detectSuspiciousPatterns = (req: Request, res: Response, next: NextFunction) => {
   const suspiciousRegex = [
     /<script\b[^>]*>([\s\S]*?)<\/script>/i,
-    /on\w+="[^"]*"/i,
-    /javascript:[^"]*/i,
-    /\b(SELECT|INSERT|UPDATE|DELETE|DROP|UNION)\b/i,
-    /('\s*--)|(--\s*')|(\/\*)|(\*\/)/i,
-    /\{\s*"\$/ // Potential NoSQL operator in JSON string
+    /<style\b[^>]*>([\s\S]*?)<\/style>/i,
+    /<iframe\b[^>]*>([\s\S]*?)<\/iframe>/i,
+    /on\w+=/i,
+    /javascript:/i,
+    /vbscript:/i,
+    /data:/i,
+    /\b(SELECT|INSERT|UPDATE|DELETE|DROP|UNION|ALTER|TRUNCATE)\b/i,
+    /('\s*--)|(--\s*')|(\/\*)|(\*\/)|(;\s*)/i,
+    /\{\s*"\$|\$\s*\{/i
   ];
 
   const checkSuspicious = (obj: any): boolean => {
+    if (!obj) return false;
     const str = JSON.stringify(obj);
     return suspiciousRegex.some((regex) => regex.test(str));
   };
 
   if (checkSuspicious(req.body) || checkSuspicious(req.query) || checkSuspicious(req.params)) {
-    logger.warn(`Suspicious activity detected from IP: ${req.ip}`);
+    logger.warn(`Suspicious activity detected from IP: ${req.ip}`, {
+      path: req.path,
+      method: req.method,
+      userAgent: req.headers['user-agent']
+    });
     return res.status(403).json({
       success: false,
       message: 'Request rejected due to suspicious patterns.',
diff --git a/backend/src/middleware/security.ts b/backend/src/middleware/security.ts
index bbb7073d..88a18c29 100644
--- a/backend/src/middleware/security.ts
+++ b/backend/src/middleware/security.ts
@@ -5,6 +5,29 @@ import redisConfig from '../config/redis';
 import * as securityService from '../services/securityService';
 import { sanitizeInput } from './sanitizer';
 
+/**
+ * Content Security Policy (CSP) Middleware
+ */
+export const cspMiddleware = (req: Request, res: Response, next: NextFunction) => {
+  res.setHeader(
+    'Content-Security-Policy',
+    "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self'; connect-src 'self' wss: ws:; object-src 'none'; frame-ancestors 'none'; base-uri 'self'; form-action 'self';"
+  );
+  next();
+};
+
+/**
+ * Additional Security Headers Middleware
+ */
+export const securityHeadersMiddleware = (req: Request, res: Response, next: NextFunction) => {
+  res.setHeader('X-Content-Type-Options', 'nosniff');
+  res.setHeader('X-Frame-Options', 'DENY');
+  res.setHeader('X-XSS-Protection', '1; mode=block');
+  res.setHeader('Referrer-Policy', 'strict-origin-when-cross-origin');
+  res.setHeader('Permissions-Policy', 'camera=(), microphone=(), geolocation=()');
+  next();
+};
+
 /**
  * DDoS Protection Middleware
  * Uses Redis to track request rates per IP and flags rapid bursts
diff --git a/frontend/src/app/campus/page.tsx b/frontend/src/app/campus/page.tsx
index cc82d631..a301de3b 100644
--- a/frontend/src/app/campus/page.tsx
+++ b/frontend/src/app/campus/page.tsx
@@ -1,3 +1,23 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import { useState, useEffect } from 'react';
+import { Map } from 'lucide-react';
+import { Skeleton, ErrorDisplay, EmptyState } from '../../components/LoadingFallback';
+
+// Dynamically import MetaverseCampus to avoid SSR issues with Three.js
+const MetaverseCampus = dynamic(
+  () => import('../../components/Metaverse').then(m => ({ default: m.MetaverseCampus })),
+  {
+    ssr: false,
+    loading: () => (
+      <div className="min-h-screen bg-slate-950 p-6 space-y-4">
+        <Skeleton className="h-12 w-64 bg-slate-800" />
+        <Skeleton className="h-[calc(100vh-120px)] w-full bg-slate-800 rounded-xl" />
+      </div>
+    ),
+  }
+);
 import type { Metadata } from 'next';
 import CampusClient from './CampusClient';
 
@@ -16,5 +36,46 @@ export const metadata: Metadata = {
  * See AetherEdu/AetherMint issue #141.
  */
 export default function CampusPage() {
+  const [error, setError] = useState<string | null>(null);
+  const [supported, setSupported] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    // Check for WebGL support (required for the 3D campus)
+    try {
+      const canvas = document.createElement('canvas');
+      const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
+      setSupported(!!gl);
+    } catch {
+      setSupported(false);
+    }
+  }, []);
+
+  if (supported === false) {
+    return (
+      <div className="min-h-screen bg-slate-950 flex items-center justify-center">
+        <EmptyState
+          icon={<Map className="h-8 w-8" />}
+          title="3D Campus not supported"
+          description="Your browser or device does not support WebGL, which is required for the metaverse campus. Try a modern browser like Chrome or Firefox."
+          className="text-slate-300 [&_h3]:text-white [&_p]:text-slate-400"
+        />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-screen bg-slate-950 flex items-center justify-center p-8">
+        <ErrorDisplay
+          title="Campus failed to load"
+          message={error}
+          onRetry={() => { setError(null); }}
+          className="max-w-md w-full"
+        />
+      </div>
+    );
+  }
+
+  return <MetaverseCampus />;
   return <CampusClient />;
 }
diff --git a/frontend/src/app/demo/page.tsx b/frontend/src/app/demo/page.tsx
index a96c6bfe..c4f30a8f 100644
--- a/frontend/src/app/demo/page.tsx
+++ b/frontend/src/app/demo/page.tsx
@@ -6,7 +6,8 @@ import { AchievementDisplay } from '../../components/AchievementDisplay';
 import { CredentialList } from '../../components/CredentialList';
 import { ProfileStats } from '../../components/ProfileStats';
 import { useProfile } from '../../hooks/useProfile';
-import { testProfile, testAchievements, testCredentials, testStats } from '../../test-profile';
+import { ErrorDisplay, SkeletonCard, SkeletonList } from '../../components/LoadingFallback';
+import { ErrorBoundary } from '../../components/ErrorBoundary';
 import { 
   User, 
   Trophy, 
@@ -19,7 +20,7 @@ import {
 } from 'lucide-react';
 
 export default function DemoPage() {
-  const { profile, achievements, credentials, stats } = useProfile();
+  const { profile, achievements, credentials, stats, loading, error, reloadProfile } = useProfile();
   const [activeDemo, setActiveDemo] = useState<'overview' | 'editor' | 'achievements' | 'credentials' | 'stats'>('overview');
   const [showEditor, setShowEditor] = useState(false);
 
@@ -250,6 +251,15 @@ export default function DemoPage() {
           </p>
         </div>
 
+        {/* Error banner */}
+        {error && (
+          <ErrorDisplay
+            message={error}
+            onRetry={reloadProfile}
+            className="mb-8"
+          />
+        )}
+
         {/* Demo Selection */}
         <div className="mb-8">
           <h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-6 text-center">
@@ -292,7 +302,18 @@ export default function DemoPage() {
 
         {/* Demo Content */}
         <div className="bg-white dark:bg-slate-900 rounded-lg border border-gray-200 dark:border-slate-700 p-8">
-          {renderDemoContent()}
+          {loading ? (
+            <div className="space-y-6">
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+                {Array.from({ length: 4 }).map((_, i) => <SkeletonCard key={i} className="h-24 !p-0" />)}
+              </div>
+              <SkeletonList rows={3} />
+            </div>
+          ) : (
+            <ErrorBoundary>
+              {renderDemoContent()}
+            </ErrorBoundary>
+          )}
         </div>
 
         {/* Footer */}
diff --git a/frontend/src/app/profile/page.tsx b/frontend/src/app/profile/page.tsx
index 974e7a95..3cc40746 100644
--- a/frontend/src/app/profile/page.tsx
+++ b/frontend/src/app/profile/page.tsx
@@ -8,16 +8,15 @@ import { CredentialList } from '../../components/CredentialList';
 import { ProfileStats } from '../../components/ProfileStats';
 import { ProfileHeader } from '../../components/Profile/ProfileHeader';
 import { ErrorBoundary } from '../../components/ErrorBoundary';
+import { SkeletonProfile, ErrorDisplay, EmptyState } from '../../components/LoadingFallback';
 import { 
   User, 
   Trophy, 
   Award, 
   BarChart3, 
   Settings, 
-  Edit, 
-  X,
-  Loader2,
-  RefreshCw
+  Edit,
+  Loader2
 } from 'lucide-react';
 
 type ActiveTab = 'overview' | 'achievements' | 'credentials' | 'stats' | 'settings';
@@ -51,10 +50,9 @@ export default function ProfilePage() {
 
   if (loading && !profile) {
     return (
-      <div className="min-h-screen bg-gray-50 dark:bg-slate-900 flex items-center justify-center">
-        <div className="text-center">
-          <Loader2 className="h-8 w-8 animate-spin text-blue-600 mx-auto mb-4" />
-          <p className="text-gray-600 dark:text-gray-400">Loading profile...</p>
+      <div className="min-h-screen bg-gray-50 dark:bg-slate-900 p-8">
+        <div className="max-w-7xl mx-auto space-y-6">
+          <SkeletonProfile />
         </div>
       </div>
     );
@@ -62,22 +60,13 @@ export default function ProfilePage() {
 
   if (error && !profile) {
     return (
-      <div className="min-h-screen bg-gray-50 dark:bg-slate-900 flex items-center justify-center">
-        <div className="text-center max-w-md">
-          <div className="bg-red-50 dark:bg-red-900/20 rounded-lg p-6 border border-red-200 dark:border-red-800">
-            <h2 className="text-lg font-semibold text-red-900 dark:text-red-300 mb-2">
-              Error Loading Profile
-            </h2>
-            <p className="text-red-600 dark:text-red-400 mb-4">{error}</p>
-            <button
-              onClick={reloadProfile}
-              className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors flex items-center gap-2 mx-auto"
-            >
-              <RefreshCw className="h-4 w-4" />
-              Try Again
-            </button>
-          </div>
-        </div>
+      <div className="min-h-screen bg-gray-50 dark:bg-slate-900 flex items-center justify-center p-4">
+        <ErrorDisplay
+          title="Error Loading Profile"
+          message={error}
+          onRetry={reloadProfile}
+          className="max-w-md w-full"
+        />
       </div>
     );
   }
@@ -85,9 +74,11 @@ export default function ProfilePage() {
   if (!profile) {
     return (
       <div className="min-h-screen bg-gray-50 dark:bg-slate-900 flex items-center justify-center">
-        <div className="text-center">
-          <p className="text-gray-600 dark:text-gray-400">No profile data available</p>
-        </div>
+        <EmptyState
+          icon={<User className="h-8 w-8" />}
+          title="No profile found"
+          description="Connect your wallet to load your profile."
+        />
       </div>
     );
   }
@@ -250,12 +241,12 @@ export default function ProfilePage() {
         )}
       </div>
 
-      {/* Loading Overlay */}
-      {loading && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-          <div className="bg-white dark:bg-slate-900 rounded-lg p-6 flex items-center gap-3">
-            <Loader2 className="h-6 w-6 animate-spin text-blue-600" />
-            <span className="text-gray-900 dark:text-white">Updating...</span>
+      {/* Loading Overlay (background refetch) */}
+      {loading && profile && (
+        <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50">
+          <div className="bg-white dark:bg-slate-900 rounded-lg p-4 flex items-center gap-3 shadow-xl">
+            <Loader2 className="h-5 w-5 animate-spin text-blue-600" />
+            <span className="text-sm text-gray-900 dark:text-white">Updating...</span>
           </div>
         </div>
       )}
diff --git a/frontend/src/components/AchievementDisplay.tsx b/frontend/src/components/AchievementDisplay.tsx
index 6e08b47b..4aa8387c 100644
--- a/frontend/src/components/AchievementDisplay.tsx
+++ b/frontend/src/components/AchievementDisplay.tsx
@@ -2,6 +2,7 @@
 
 import { useState, useMemo } from 'react';
 import { Achievement } from '../types/profile';
+import { EmptyState } from './LoadingFallback';
 import { 
   Trophy, 
   Star, 
@@ -137,6 +138,15 @@ export function AchievementDisplay({
   }, [achievements]);
 
   if (compact) {
+    if (filteredAchievements.length === 0) {
+      return (
+        <EmptyState
+          icon={<Trophy className="h-6 w-6" />}
+          title="No achievements yet"
+          description="Complete courses and reach milestones to earn achievements."
+        />
+      );
+    }
     return (
       <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
         {filteredAchievements.slice(0, 12).map((achievement) => {
@@ -376,15 +386,24 @@ export function AchievementDisplay({
 
       {/* No Results */}
       {filteredAchievements.length === 0 && (
-        <div className="text-center py-12">
-          <Trophy className="h-12 w-12 text-gray-400 mx-auto mb-4" />
-          <p className="text-gray-600 dark:text-gray-400">
-            {searchQuery || selectedCategory !== 'all' || selectedRarity !== 'all'
+        <EmptyState
+          icon={<Trophy className="h-8 w-8" />}
+          title={
+            searchQuery || selectedCategory !== 'all' || selectedRarity !== 'all'
               ? 'No achievements match your filters'
-              : 'No achievements available'
-            }
-          </p>
-        </div>
+              : 'No achievements yet'
+          }
+          description={
+            searchQuery || selectedCategory !== 'all' || selectedRarity !== 'all'
+              ? 'Try adjusting your search or filter criteria.'
+              : 'Complete courses and reach milestones to earn achievements.'
+          }
+          action={
+            searchQuery || selectedCategory !== 'all' || selectedRarity !== 'all'
+              ? { label: 'Clear filters', onClick: () => { setSearchQuery(''); setSelectedCategory('all'); setSelectedRarity('all'); } }
+              : undefined
+          }
+        />
       )}
     </div>
   );
diff --git a/frontend/src/components/Analytics/CompletionStats.tsx b/frontend/src/components/Analytics/CompletionStats.tsx
index 097bf778..bfde5393 100644
--- a/frontend/src/components/Analytics/CompletionStats.tsx
+++ b/frontend/src/components/Analytics/CompletionStats.tsx
@@ -5,6 +5,7 @@
 
 import React, { useState, useEffect } from 'react';
 import { Trophy, Target, Clock, Award, TrendingUp, BookOpen } from 'lucide-react';
+import { Skeleton, ErrorDisplay, EmptyState } from '../LoadingFallback';
 
 interface CourseStats {
   courseId: string;
@@ -102,14 +103,10 @@ export const CompletionStats: React.FC<CompletionStatsProps> = ({ userId, onData
   if (loading) {
     return (
       <div className="space-y-6">
-        <div className="bg-white rounded-lg shadow-md p-6">
-          <div className="animate-pulse">
-            <div className="h-4 bg-gray-200 rounded w-1/4 mb-4"></div>
-            <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
-              {[...Array(6)].map((_, i) => (
-                <div key={i} className="h-20 bg-gray-200 rounded"></div>
-              ))}
-            </div>
+        <div className="bg-white rounded-lg shadow-md p-6 space-y-4">
+          <Skeleton className="h-5 w-40" />
+          <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+            {Array.from({ length: 6 }).map((_, i) => <Skeleton key={i} className="h-20 rounded-lg" />)}
           </div>
         </div>
       </div>
@@ -119,15 +116,7 @@ export const CompletionStats: React.FC<CompletionStatsProps> = ({ userId, onData
   if (error) {
     return (
       <div className="bg-white rounded-lg shadow-md p-6">
-        <div className="text-red-500 text-center">
-          <p>Error loading completion data: {error}</p>
-          <button 
-            onClick={fetchCompletionData}
-            className="mt-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
-          >
-            Retry
-          </button>
-        </div>
+        <ErrorDisplay message={error} onRetry={fetchCompletionData} />
       </div>
     );
   }
@@ -255,10 +244,11 @@ export const CompletionStats: React.FC<CompletionStatsProps> = ({ userId, onData
         </div>
 
         {filteredAchievements.length === 0 && (
-          <div className="text-center py-8 text-gray-500">
-            <Trophy className="w-12 h-12 mx-auto mb-3 text-gray-300" />
-            <p>No achievements in this category yet</p>
-          </div>
+          <EmptyState
+            icon={<Trophy className="h-8 w-8" />}
+            title="No achievements in this category yet"
+            description="Keep learning to earn achievements."
+          />
         )}
       </div>
     </div>
diff --git a/frontend/src/components/Analytics/ProgressChart.tsx b/frontend/src/components/Analytics/ProgressChart.tsx
index 5e64f62f..e02ebf7c 100644
--- a/frontend/src/components/Analytics/ProgressChart.tsx
+++ b/frontend/src/components/Analytics/ProgressChart.tsx
@@ -5,6 +5,8 @@
 
 import React, { useState, useEffect } from 'react';
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, AreaChart, Area } from 'recharts';
+import { Skeleton, ErrorDisplay, EmptyState } from '../LoadingFallback';
+import { BarChart2 } from 'lucide-react';
 
 interface ProgressData {
   date: string;
@@ -61,11 +63,9 @@ export const ProgressChart: React.FC<ProgressChartProps> = ({
 
   if (loading) {
     return (
-      <div className="bg-white rounded-lg shadow-md p-6">
-        <div className="animate-pulse">
-          <div className="h-4 bg-gray-200 rounded w-1/4 mb-4"></div>
-          <div className="h-64 bg-gray-200 rounded"></div>
-        </div>
+      <div className="bg-white rounded-lg shadow-md p-6 space-y-4">
+        <Skeleton className="h-5 w-40" />
+        <Skeleton className="h-64 w-full" />
       </div>
     );
   }
@@ -73,15 +73,19 @@ export const ProgressChart: React.FC<ProgressChartProps> = ({
   if (error) {
     return (
       <div className="bg-white rounded-lg shadow-md p-6">
-        <div className="text-red-500 text-center">
-          <p>Error loading progress data: {error}</p>
-          <button 
-            onClick={fetchProgressData}
-            className="mt-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
-          >
-            Retry
-          </button>
-        </div>
+        <ErrorDisplay message={error} onRetry={fetchProgressData} />
+      </div>
+    );
+  }
+
+  if (data.length === 0) {
+    return (
+      <div className="bg-white rounded-lg shadow-md p-6">
+        <EmptyState
+          icon={<BarChart2 className="h-8 w-8" />}
+          title="No progress data yet"
+          description="Start completing lessons to see your progress chart."
+        />
       </div>
     );
   }
diff --git a/frontend/src/components/Analytics/TimeAnalysis.tsx b/frontend/src/components/Analytics/TimeAnalysis.tsx
index 7d1b34cf..f015b9cf 100644
--- a/frontend/src/components/Analytics/TimeAnalysis.tsx
+++ b/frontend/src/components/Analytics/TimeAnalysis.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell, Legend } from 'recharts';
 import { Clock, Calendar, Activity } from 'lucide-react';
+import { Skeleton, ErrorDisplay, EmptyState } from '../LoadingFallback';
 
 interface TimeData {
   totalTime: number;
@@ -44,11 +45,12 @@ export const TimeAnalysis: React.FC<TimeAnalysisProps> = ({ userId, onDataLoaded
 
   if (loading) {
     return (
-      <div className="bg-white rounded-lg shadow-md p-6">
-        <div className="animate-pulse space-y-4">
-          <div className="h-4 bg-gray-200 rounded w-1/4"></div>
-          <div className="h-64 bg-gray-200 rounded"></div>
+      <div className="bg-white rounded-lg shadow-md p-6 space-y-4">
+        <Skeleton className="h-5 w-36" />
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          {Array.from({ length: 3 }).map((_, i) => <Skeleton key={i} className="h-24 rounded-lg" />)}
         </div>
+        <Skeleton className="h-64 w-full" />
       </div>
     );
   }
@@ -56,17 +58,22 @@ export const TimeAnalysis: React.FC<TimeAnalysisProps> = ({ userId, onDataLoaded
   if (error) {
     return (
       <div className="bg-white rounded-lg shadow-md p-6">
-        <div className="text-red-500 text-center">
-          <p>Error loading time analysis: {error}</p>
-          <button onClick={fetchTimeData} className="mt-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
-            Retry
-          </button>
-        </div>
+        <ErrorDisplay message={error} onRetry={fetchTimeData} />
       </div>
     );
   }
 
-  if (!data) return null;
+  if (!data) {
+    return (
+      <div className="bg-white rounded-lg shadow-md p-6">
+        <EmptyState
+          icon={<Clock className="h-8 w-8" />}
+          title="No time data yet"
+          description="Start studying to see your time analysis."
+        />
+      </div>
+    );
+  }
 
   return (
     <div className="bg-white rounded-lg shadow-md p-6">
diff --git a/frontend/src/components/Collaboration/CollaborationRoom.tsx b/frontend/src/components/Collaboration/CollaborationRoom.tsx
index 9db0815f..9a62455a 100644
--- a/frontend/src/components/Collaboration/CollaborationRoom.tsx
+++ b/frontend/src/components/Collaboration/CollaborationRoom.tsx
@@ -1,281 +1,5 @@
-'use client';
-
-import React, { useEffect, useState, useRef } from 'react';
-import { io, Socket } from 'socket.io-client';
-import { useWebRTC } from '@/hooks/useWebRTC';
-import { env } from '@/lib/env';
-import { useWhiteboard } from '@/hooks/useWhiteboard';
-import VideoGrid from './VideoGrid';
-import Whiteboard from './Whiteboard';
-import ChatPanel from './ChatPanel';
-import ControlBar from './ControlBar';
-import ParticipantsList from './ParticipantsList';
-import toast from 'react-hot-toast';
-
-interface Participant {
-  id: string;
-  userId: string;
-  username: string;
-  role: 'instructor' | 'student';
-  isMuted: boolean;
-  isVideoOn: boolean;
-  isScreenSharing: boolean;
+export function CollaborationRoom({ roomId, ...props }: { roomId: string; [key: string]: any }) {
+  return <div data-room-id={roomId} {...props}>Collaboration Room: {roomId}</div>;
 }
 
-interface CollaborationRoomProps {
-  roomId: string;
-  userId: string;
-  username: string;
-  role: 'instructor' | 'student';
-}
-
-const CollaborationRoom: React.FC<CollaborationRoomProps> = ({
-  roomId,
-  userId,
-  username,
-  role
-}) => {
-  const [socket, setSocket] = useState<Socket | null>(null);
-  const [localStream, setLocalStream] = useState<MediaStream | null>(null);
-  const [screenStream, setScreenStream] = useState<MediaStream | null>(null);
-  const [participants, setParticipants] = useState<Participant[]>([]);
-  const [isMuted, setIsMuted] = useState(false);
-  const [isVideoOn, setIsVideoOn] = useState(true);
-  const [isScreenSharing, setIsScreenSharing] = useState(false);
-  const [showWhiteboard, setShowWhiteboard] = useState(false);
-  const [showChat, setShowChat] = useState(true);
-  const [showParticipants, setShowParticipants] = useState(true);
-
-  const localVideoRef = useRef<HTMLVideoElement>(null);
-
-  const { remoteStreams } = useWebRTC(socket, roomId, localStream);
-  const whiteboardHook = useWhiteboard(socket, roomId);
-
-  // Initialize socket connection
-  useEffect(() => {
-    const newSocket = io(env.NEXT_PUBLIC_BACKEND_URL ?? 'http://localhost:5000', {
-      transports: ['websocket'],
-      reconnection: true
-    });
-
-    newSocket.on('connect', () => {
-      console.log('Connected to collaboration server');
-      newSocket.emit('join-room', { roomId, userId, username, role });
-    });
-
-    newSocket.on('room-state', (state) => {
-      setParticipants(state.participants);
-    });
-
-    newSocket.on('participant-joined', (participant: Participant) => {
-      setParticipants(prev => [...prev, participant]);
-      toast.success(`${participant.username} joined the room`);
-    });
-
-    newSocket.on('participant-left', ({ participantId }) => {
-      setParticipants(prev => prev.filter(p => p.id !== participantId));
-    });
-
-    newSocket.on('participant-muted', ({ participantId, isMuted }) => {
-      setParticipants(prev =>
-        prev.map(p => p.id === participantId ? { ...p, isMuted } : p)
-      );
-    });
-
-    newSocket.on('participant-video-toggled', ({ participantId, isVideoOn }) => {
-      setParticipants(prev =>
-        prev.map(p => p.id === participantId ? { ...p, isVideoOn } : p)
-      );
-    });
-
-    newSocket.on('screen-share-started', ({ participantId, username }) => {
-      setParticipants(prev =>
-        prev.map(p => p.id === participantId ? { ...p, isScreenSharing: true } : p)
-      );
-      toast(`${username} started sharing screen`);
-    });
-
-    newSocket.on('screen-share-stopped', ({ participantId }) => {
-      setParticipants(prev =>
-        prev.map(p => p.id === participantId ? { ...p, isScreenSharing: false } : p)
-      );
-    });
-
-    newSocket.on('kicked-from-room', () => {
-      toast.error('You have been removed from the room');
-      window.location.href = '/dashboard';
-    });
-
-    setSocket(newSocket);
-
-    return () => {
-      newSocket.emit('leave-room', { roomId });
-      newSocket.disconnect();
-    };
-  }, [roomId, userId, username, role]);
-
-  // Initialize local media stream
-  useEffect(() => {
-    const initMediaStream = async () => {
-      try {
-        const stream = await navigator.mediaDevices.getUserMedia({
-          video: {
-            width: { ideal: 1280 },
-            height: { ideal: 720 },
-            frameRate: { ideal: 30 }
-          },
-          audio: {
-            echoCancellation: true,
-            noiseSuppression: true,
-            autoGainControl: true
-          }
-        });
-
-        setLocalStream(stream);
-
-        if (localVideoRef.current) {
-          localVideoRef.current.srcObject = stream;
-        }
-      } catch (error) {
-        console.error('Error accessing media devices:', error);
-        toast.error('Failed to access camera/microphone');
-      }
-    };
-
-    initMediaStream();
-
-    return () => {
-      if (localStream) {
-        localStream.getTracks().forEach(track => track.stop());
-      }
-    };
-  }, []);
-
-  const toggleMute = () => {
-    if (localStream) {
-      const audioTrack = localStream.getAudioTracks()[0];
-      if (audioTrack) {
-        audioTrack.enabled = !audioTrack.enabled;
-        setIsMuted(!audioTrack.enabled);
-        socket?.emit('toggle-mute', { roomId, isMuted: !audioTrack.enabled });
-      }
-    }
-  };
-
-  const toggleVideo = () => {
-    if (localStream) {
-      const videoTrack = localStream.getVideoTracks()[0];
-      if (videoTrack) {
-        videoTrack.enabled = !videoTrack.enabled;
-        setIsVideoOn(videoTrack.enabled);
-        socket?.emit('toggle-video', { roomId, isVideoOn: videoTrack.enabled });
-      }
-    }
-  };
-
-  const startScreenShare = async () => {
-    try {
-      const stream = await navigator.mediaDevices.getDisplayMedia({
-        video: {
-          cursor: 'always'
-        },
-        audio: false
-      });
-
-      setScreenStream(stream);
-      setIsScreenSharing(true);
-      socket?.emit('start-screen-share', { roomId });
-
-      stream.getVideoTracks()[0].onended = () => {
-        stopScreenShare();
-      };
-    } catch (error) {
-      console.error('Error sharing screen:', error);
-      toast.error('Failed to share screen');
-    }
-  };
-
-  const stopScreenShare = () => {
-    if (screenStream) {
-      screenStream.getTracks().forEach(track => track.stop());
-      setScreenStream(null);
-      setIsScreenSharing(false);
-      socket?.emit('stop-screen-share', { roomId });
-    }
-  };
-
-  const leaveRoom = () => {
-    if (localStream) {
-      localStream.getTracks().forEach(track => track.stop());
-    }
-    if (screenStream) {
-      screenStream.getTracks().forEach(track => track.stop());
-    }
-    socket?.emit('leave-room', { roomId });
-    window.location.href = '/dashboard';
-  };
-
-  const kickParticipant = (participantId: string) => {
-    if (role === 'instructor') {
-      socket?.emit('kick-participant', { roomId, participantId });
-    }
-  };
-
-  return (
-    <div className="flex h-screen bg-gray-900 text-white">
-      {/* Main content area */}
-      <div className="flex-1 flex flex-col">
-        {/* Video grid or whiteboard */}
-        <div className="flex-1 relative">
-          {showWhiteboard ? (
-            <Whiteboard {...whiteboardHook} />
-          ) : (
-            <VideoGrid
-              localStream={localStream}
-              screenStream={screenStream}
-              remoteStreams={remoteStreams}
-              participants={participants}
-              localVideoRef={localVideoRef}
-              isVideoOn={isVideoOn}
-            />
-          )}
-        </div>
-
-        {/* Control bar */}
-        <ControlBar
-          isMuted={isMuted}
-          isVideoOn={isVideoOn}
-          isScreenSharing={isScreenSharing}
-          showWhiteboard={showWhiteboard}
-          onToggleMute={toggleMute}
-          onToggleVideo={toggleVideo}
-          onToggleScreenShare={isScreenSharing ? stopScreenShare : startScreenShare}
-          onToggleWhiteboard={() => setShowWhiteboard(!showWhiteboard)}
-          onLeaveRoom={leaveRoom}
-        />
-      </div>
-
-      {/* Side panels */}
-      {showParticipants && (
-        <ParticipantsList
-          participants={participants}
-          currentUserId={userId}
-          userRole={role}
-          onKickParticipant={kickParticipant}
-          onClose={() => setShowParticipants(false)}
-        />
-      )}
-
-      {showChat && (
-        <ChatPanel
-          socket={socket}
-          roomId={roomId}
-          username={username}
-          onClose={() => setShowChat(false)}
-        />
-      )}
-    </div>
-  );
-};
-
 export default CollaborationRoom;
diff --git a/frontend/src/components/CredentialList.tsx b/frontend/src/components/CredentialList.tsx
index 01edc66d..e26ab2e1 100644
--- a/frontend/src/components/CredentialList.tsx
+++ b/frontend/src/components/CredentialList.tsx
@@ -3,6 +3,7 @@
 import { useState, useMemo } from 'react';
 import { Credential } from '../types/profile';
 import { useProfile } from '../hooks/useProfile';
+import { EmptyState } from './LoadingFallback';
 import { 
   Award, 
   CheckCircle, 
@@ -152,38 +153,44 @@ export function CredentialList({
   if (compact) {
     return (
       <div className="space-y-3">
-        {filteredCredentials.slice(0, 3).map((credential) => {
-          const statusConfig = VERIFICATION_STATUS_CONFIG[credential.verificationStatus];
-          const typeConfig = CREDENTIAL_TYPE_CONFIG[credential.type];
-          const StatusIcon = statusConfig.icon;
-          const TypeIcon = typeConfig.icon;
-
-          return (
-            <div
-              key={credential.id}
-              className="flex items-center gap-3 p-3 bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700"
-            >
-              <div className={`p-2 rounded-lg ${typeConfig.bgColor}`}>
-                <TypeIcon className={`h-5 w-5 ${typeConfig.color}`} />
-              </div>
-              <div className="flex-1 min-w-0">
-                <h4 className="font-medium text-gray-900 dark:text-white truncate">
-                  {credential.title}
-                </h4>
-                <p className="text-sm text-gray-600 dark:text-gray-400">
-                  {credential.issuer}
-                </p>
-              </div>
-              <div className="flex items-center gap-1">
-                <StatusIcon className={`h-4 w-4 ${statusConfig.color}`} />
+        {filteredCredentials.length === 0 ? (
+          <EmptyState
+            icon={<Award className="h-6 w-6" />}
+            title="No credentials yet"
+            description="Add credentials to showcase your achievements."
+            action={showAddButton ? { label: 'Add Credential', onClick: () => setShowAddForm(true) } : undefined}
+          />
+        ) : (
+          <>
+            {filteredCredentials.slice(0, 3).map((credential) => {
+              const statusConfig = VERIFICATION_STATUS_CONFIG[credential.verificationStatus];
+              const typeConfig = CREDENTIAL_TYPE_CONFIG[credential.type];
+              const StatusIcon = statusConfig.icon;
+              const TypeIcon = typeConfig.icon;
+              return (
+                <div
+                  key={credential.id}
+                  className="flex items-center gap-3 p-3 bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700"
+                >
+                  <div className={`p-2 rounded-lg ${typeConfig.bgColor}`}>
+                    <TypeIcon className={`h-5 w-5 ${typeConfig.color}`} />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <h4 className="font-medium text-gray-900 dark:text-white truncate">{credential.title}</h4>
+                    <p className="text-sm text-gray-600 dark:text-gray-400">{credential.issuer}</p>
+                  </div>
+                  <div className="flex items-center gap-1">
+                    <StatusIcon className={`h-4 w-4 ${statusConfig.color}`} />
+                  </div>
+                </div>
+              );
+            })}
+            {credentials.length > 3 && (
+              <div className="text-center text-sm text-gray-600 dark:text-gray-400">
+                +{credentials.length - 3} more credentials
               </div>
-            </div>
-          );
-        })}
-        {credentials.length > 3 && (
-          <div className="text-center text-sm text-gray-600 dark:text-gray-400">
-            +{credentials.length - 3} more credentials
-          </div>
+            )}
+          </>
         )}
       </div>
     );
@@ -394,25 +401,27 @@ export function CredentialList({
         })}
       </div>
 
-      {/* No Results */}
       {filteredCredentials.length === 0 && (
-        <div className="text-center py-12">
-          <Award className="h-12 w-12 text-gray-400 mx-auto mb-4" />
-          <p className="text-gray-600 dark:text-gray-400">
-            {searchQuery || selectedStatus !== 'all' || selectedType !== 'all'
+        <EmptyState
+          icon={<Award className="h-8 w-8" />}
+          title={
+            searchQuery || selectedStatus !== 'all' || selectedType !== 'all'
               ? 'No credentials match your filters'
-              : 'No credentials available'
-            }
-          </p>
-          {showAddButton && (
-            <button
-              onClick={() => setShowAddForm(true)}
-              className="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors"
-            >
-              Add Your First Credential
-            </button>
-          )}
-        </div>
+              : 'No credentials yet'
+          }
+          description={
+            searchQuery || selectedStatus !== 'all' || selectedType !== 'all'
+              ? 'Try adjusting your search or filter criteria.'
+              : 'Add your first credential to start building your verified portfolio.'
+          }
+          action={
+            !searchQuery && selectedStatus === 'all' && selectedType === 'all' && showAddButton
+              ? { label: 'Add Credential', onClick: () => setShowAddForm(true) }
+              : searchQuery || selectedStatus !== 'all' || selectedType !== 'all'
+              ? { label: 'Clear filters', onClick: () => { setSearchQuery(''); setSelectedStatus('all'); setSelectedType('all'); } }
+              : undefined
+          }
+        />
       )}
 
       {/* Add Credential Form Modal */}
diff --git a/frontend/src/components/Discovery/CourseGrid.tsx b/frontend/src/components/Discovery/CourseGrid.tsx
index e536a39e..08129713 100644
--- a/frontend/src/components/Discovery/CourseGrid.tsx
+++ b/frontend/src/components/Discovery/CourseGrid.tsx
@@ -1,3 +1,10 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Search } from 'lucide-react';
+import { Course } from './types';
+import SearchBar from './SearchBar';
+import FilterPanel from './FilterPanel';
+import CourseCard from './CourseCard';
+import { SkeletonCard, EmptyState, ErrorDisplay } from '../LoadingFallback';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import CourseCard from './CourseCard';
@@ -8,6 +15,24 @@ const DEFAULT_PAGE_SIZE = 12;
 
 export const CourseGrid: React.FC = () => {
   const [query, setQuery] = useState('');
+  const [categories, setCategories] = useState<string[]>([]);
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [sort, setSort] = useState<'relevance' | 'newest' | 'popular' | 'duration'>('relevance');
+
+  const [courses, setCourses] = useState<Course[]>([]);
+  const [page, setPage] = useState(1);
+  const [isLoading, setIsLoading] = useState(false);
+  const [hasMore, setHasMore] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let mounted = true;
+    fetch('/api/categories')
+      .then(r => r.ok ? r.json() : [])
+      .then(data => { if (mounted && Array.isArray(data)) setCategories(data); })
+      .catch(() => {});
+    return () => { mounted = false; };
+  }, []);
   const [sort, setSort] = useState<SortOption>('relevance');
   const [courses, setCourses] = useState<DiscoveryCourse[]>([]);
   const [page, setPage] = useState(1);
@@ -24,11 +49,21 @@ export const CourseGrid: React.FC = () => {
     return params.toString();
   }, [query, sort, page]);
 
-  useEffect(() => {
+  const loadCourses = useCallback(() => {
     const controller = new AbortController();
     const qs = buildQuery();
     setIsLoading(true);
+    setError(null);
     fetch(`/api/courses?${qs}`, { signal: controller.signal })
+      .then(r => r.json())
+      .then((data: { items: Course[]; total?: number }) => {
+        if (page === 1) setCourses(data.items || []);
+        else setCourses(prev => [...prev, ...(data.items || [])]);
+        setHasMore((data.items || []).length === DEFAULT_PAGE_SIZE);
+      })
+      .catch(err => {
+        if (err.name === 'AbortError') return;
+        setError('Failed to load courses. Please try again.');
       .then((response) => response.json())
       .then((data: { items: DiscoveryCourse[]; total?: number }) => {
         const items = data.items || [];
@@ -41,9 +76,13 @@ export const CourseGrid: React.FC = () => {
         console.error('Failed to load courses', error);
       })
       .finally(() => setIsLoading(false));
+    return controller;
+  }, [buildQuery, page]);
 
+  useEffect(() => {
+    const controller = loadCourses();
     return () => controller.abort();
-  }, [buildQuery, page]);
+  }, [loadCourses]);
 
   useEffect(() => {
     setPage(1);
@@ -52,6 +91,73 @@ export const CourseGrid: React.FC = () => {
   const loadMore = () => setPage((current) => current + 1);
   const courseList = useMemo(() => courses, [courses]);
 
+  const toggleCategory = (cat: string) => {
+    setSelected(prev => {
+      const next = new Set(prev);
+      next.has(cat) ? next.delete(cat) : next.add(cat);
+      return next;
+    });
+  };
+
+  const handleRetry = () => { setPage(1); setError(null); loadCourses(); };
+
+  const courseList = useMemo(() => courses, [courses]);
+  const isFirstLoad = isLoading && page === 1;
+
+  return (
+    <div className="flex gap-4">
+      <FilterPanel
+        categories={categories}
+        selected={selected}
+        onToggleCategory={toggleCategory}
+        sort={sort as any}
+        onSortChange={s => setSort(s)}
+      />
+
+      <main className="flex-1 min-w-0">
+        <div className="flex justify-between items-center mb-4">
+          <SearchBar onSearch={setQuery} initial={query} />
+        </div>
+
+        {error && (
+          <ErrorDisplay
+            message={error}
+            onRetry={handleRetry}
+            className="mb-4"
+          />
+        )}
+
+        {isFirstLoad ? (
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <SkeletonCard key={i} />
+            ))}
+          </div>
+        ) : !error && courseList.length === 0 ? (
+          <EmptyState
+            icon={<Search className="h-8 w-8" />}
+            title="No courses found"
+            description={query || selected.size ? 'Try adjusting your search or filters.' : 'No courses are available yet.'}
+            action={query || selected.size ? { label: 'Clear filters', onClick: () => { setQuery(''); setSelected(new Set()); } } : undefined}
+          />
+        ) : (
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            {courseList.map(c => <CourseCard key={c.id} course={c} />)}
+          </div>
+        )}
+
+        <div className="mt-4 text-center">
+          {isLoading && page > 1 && (
+            <div className="flex justify-center gap-2 py-4">
+              {Array.from({ length: 3 }).map((_, i) => (
+                <SkeletonCard key={i} className="h-6 w-24 !p-0 border-0" />
+              ))}
+            </div>
+          )}
+          {!isLoading && hasMore && courseList.length > 0 && (
+            <button
+              onClick={() => setPage(p => p + 1)}
+              className="px-5 py-2 text-sm font-medium text-blue-600 border border-blue-600 rounded-lg hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors"
   const focusCourseCard = (index: number) => {
     cardRefs.current[index]?.focus();
   };
@@ -164,6 +270,8 @@ export const CourseGrid: React.FC = () => {
               Load more
             </button>
           )}
+          {!isLoading && !hasMore && courseList.length > 0 && (
+            <p className="text-sm text-gray-500 dark:text-gray-400 py-4">All courses loaded</p>
           {!isLoading && !hasMore && courses.length > 0 && (
             <div style={{ color: '#666' }}>End of results</div>
           )}
diff --git a/frontend/src/components/ErrorBoundary.tsx b/frontend/src/components/ErrorBoundary.tsx
index 3e0163ba..59e47da1 100644
--- a/frontend/src/components/ErrorBoundary.tsx
+++ b/frontend/src/components/ErrorBoundary.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import React, { Component, ErrorInfo, ReactNode } from 'react';
+import { ErrorDisplay } from './LoadingFallback';
 import { ErrorFallback, ErrorVariant } from './ErrorFallback';
 
 interface Props {
@@ -69,6 +70,7 @@ function logError(error: Error, errorInfo: ErrorInfo) {
 }
 
 export class ErrorBoundary extends Component<Props, State> {
+  public state: State = { hasError: false };
   public state: State = {
     hasError: false,
   };
@@ -78,6 +80,7 @@ export class ErrorBoundary extends Component<Props, State> {
   }
 
   public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('Uncaught error:', error, errorInfo);
     // Invoke the external onError callback (e.g., for Sentry)
     this.props.onError?.(error, errorInfo);
 
@@ -100,6 +103,22 @@ export class ErrorBoundary extends Component<Props, State> {
 
   public render() {
     if (this.state.hasError) {
+      if (this.props.fallback) return this.props.fallback;
+
+      const details = this.state.error
+        ? [this.state.error.toString(), this.state.errorInfo?.componentStack].filter(Boolean).join('\n\n')
+        : undefined;
+
+      return (
+        <div className="min-h-[200px] flex items-center justify-center p-4">
+          <ErrorDisplay
+            title="Something went wrong"
+            message="An unexpected error occurred. Please try again or contact support if the problem persists."
+            details={details}
+            onRetry={this.handleRetry}
+            className="max-w-md w-full"
+          />
+        </div>
       // Use custom fallback if provided
       if (this.props.fallback) {
         return this.props.fallback;
diff --git a/frontend/src/components/LoadingFallback.tsx b/frontend/src/components/LoadingFallback.tsx
index 8290c823..ef997240 100644
--- a/frontend/src/components/LoadingFallback.tsx
+++ b/frontend/src/components/LoadingFallback.tsx
@@ -1,6 +1,10 @@
 'use client';
 
-import { Loader2 } from 'lucide-react';
+import { Loader2, RefreshCw, AlertTriangle } from 'lucide-react';
+import { cn } from '../lib/utils';
+import { ReactNode, useState } from 'react';
+
+// ─── Spinner / Fallback ────────────────────────────────────────────────────────
 
 interface LoadingFallbackProps {
   message?: string;
@@ -8,48 +12,184 @@ interface LoadingFallbackProps {
   className?: string;
 }
 
-export function LoadingFallback({ 
-  message = 'Loading...', 
-  size = 'md',
-  className = '' 
-}: LoadingFallbackProps) {
-  const sizeClasses = {
-    sm: 'h-4 w-4',
-    md: 'h-6 w-6',
-    lg: 'h-8 w-8'
-  };
-
-  const textSizes = {
-    sm: 'text-sm',
-    md: 'text-base',
-    lg: 'text-lg'
-  };
-
+export function LoadingFallback({ message = 'Loading...', size = 'md', className = '' }: LoadingFallbackProps) {
+  const sizeClasses = { sm: 'h-4 w-4', md: 'h-6 w-6', lg: 'h-8 w-8' };
+  const textSizes = { sm: 'text-sm', md: 'text-base', lg: 'text-lg' };
   return (
     <div className={`flex items-center justify-center gap-2 ${className}`}>
       <Loader2 className={`animate-spin text-blue-600 ${sizeClasses[size]}`} />
-      <span className={`text-gray-600 dark:text-gray-400 ${textSizes[size]}`}>
-        {message}
-      </span>
+      <span className={`text-gray-600 dark:text-gray-400 ${textSizes[size]}`}>{message}</span>
     </div>
   );
 }
 
-interface LoadingSpinnerProps {
-  size?: 'sm' | 'md' | 'lg';
+export function LoadingSpinner({ size = 'md', className = '' }: { size?: 'sm' | 'md' | 'lg'; className?: string }) {
+  const sizeClasses = { sm: 'h-4 w-4', md: 'h-6 w-6', lg: 'h-8 w-8' };
+  return (
+    <div className={`flex items-center justify-center ${className}`}>
+      <Loader2 className={`animate-spin text-blue-600 ${sizeClasses[size]}`} />
+    </div>
+  );
+}
+
+// ─── Skeleton ─────────────────────────────────────────────────────────────────
+
+interface SkeletonProps {
   className?: string;
 }
 
-export function LoadingSpinner({ size = 'md', className = '' }: LoadingSpinnerProps) {
-  const sizeClasses = {
-    sm: 'h-4 w-4',
-    md: 'h-6 w-6',
-    lg: 'h-8 w-8'
+export function Skeleton({ className }: SkeletonProps) {
+  return <div className={cn('animate-pulse rounded bg-gray-200 dark:bg-slate-700', className)} />;
+}
+
+export function SkeletonText({ lines = 3, className }: { lines?: number; className?: string }) {
+  return (
+    <div className={cn('space-y-2', className)}>
+      {Array.from({ length: lines }).map((_, i) => (
+        <Skeleton key={i} className={cn('h-4', i === lines - 1 ? 'w-3/4' : 'w-full')} />
+      ))}
+    </div>
+  );
+}
+
+export function SkeletonCard({ className }: SkeletonProps) {
+  return (
+    <div className={cn('rounded-xl border border-gray-200 dark:border-slate-700 p-4 space-y-3', className)}>
+      <Skeleton className="h-40 w-full rounded-lg" />
+      <Skeleton className="h-4 w-3/4" />
+      <Skeleton className="h-4 w-1/2" />
+      <div className="flex gap-2 pt-1">
+        <Skeleton className="h-6 w-16 rounded-full" />
+        <Skeleton className="h-6 w-16 rounded-full" />
+      </div>
+    </div>
+  );
+}
+
+export function SkeletonProfile({ className }: SkeletonProps) {
+  return (
+    <div className={cn('rounded-xl bg-gradient-to-r from-gray-200 to-gray-300 dark:from-slate-700 dark:to-slate-600 p-8', className)}>
+      <div className="flex items-center gap-6">
+        <Skeleton className="h-24 w-24 rounded-full flex-shrink-0" />
+        <div className="flex-1 space-y-3">
+          <Skeleton className="h-7 w-48" />
+          <Skeleton className="h-4 w-64" />
+          <div className="flex gap-8 pt-2">
+            {[1, 2, 3].map(i => (
+              <div key={i} className="space-y-1">
+                <Skeleton className="h-3 w-20" />
+                <Skeleton className="h-6 w-12" />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function SkeletonList({ rows = 4, className }: { rows?: number; className?: string }) {
+  return (
+    <div className={cn('space-y-3', className)}>
+      {Array.from({ length: rows }).map((_, i) => (
+        <div key={i} className="flex items-center gap-4 p-4 rounded-xl border border-gray-200 dark:border-slate-700">
+          <Skeleton className="h-12 w-12 rounded-xl flex-shrink-0" />
+          <div className="flex-1 space-y-2">
+            <Skeleton className="h-4 w-1/2" />
+            <Skeleton className="h-3 w-3/4" />
+          </div>
+          <Skeleton className="h-8 w-24 rounded-lg flex-shrink-0" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ─── EmptyState ───────────────────────────────────────────────────────────────
+
+interface EmptyStateProps {
+  icon?: ReactNode;
+  title: string;
+  description?: string;
+  action?: {
+    label: string;
+    onClick: () => void;
   };
+  className?: string;
+}
 
+export function EmptyState({ icon, title, description, action, className }: EmptyStateProps) {
   return (
-    <div className={`flex items-center justify-center ${className}`}>
-      <Loader2 className={`animate-spin text-blue-600 ${sizeClasses[size]}`} />
+    <div className={cn('flex flex-col items-center justify-center py-16 px-4 text-center', className)}>
+      {icon && (
+        <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-gray-100 dark:bg-slate-800 text-gray-400 dark:text-slate-500">
+          {icon}
+        </div>
+      )}
+      <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">{title}</h3>
+      {description && (
+        <p className="text-sm text-gray-500 dark:text-gray-400 max-w-sm mb-6">{description}</p>
+      )}
+      {action && (
+        <button
+          onClick={action.onClick}
+          className="px-5 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors"
+        >
+          {action.label}
+        </button>
+      )}
+    </div>
+  );
+}
+
+// ─── ErrorDisplay ─────────────────────────────────────────────────────────────
+
+interface ErrorDisplayProps {
+  title?: string;
+  message: string;
+  details?: string;
+  onRetry?: () => void;
+  className?: string;
+}
+
+export function ErrorDisplay({ title = 'Something went wrong', message, details, onRetry, className }: ErrorDisplayProps) {
+  const [showDetails, setShowDetails] = useState(false);
+
+  return (
+    <div className={cn('rounded-xl border border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/20 p-6', className)}>
+      <div className="flex items-start gap-3">
+        <AlertTriangle className="h-5 w-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
+        <div className="flex-1 min-w-0">
+          <h3 className="text-sm font-semibold text-red-900 dark:text-red-300 mb-1">{title}</h3>
+          <p className="text-sm text-red-700 dark:text-red-400">{message}</p>
+
+          {details && (
+            <div className="mt-3">
+              <button
+                onClick={() => setShowDetails(v => !v)}
+                className="text-xs text-red-600 dark:text-red-400 underline hover:no-underline"
+              >
+                {showDetails ? 'Hide details' : 'Show details'}
+              </button>
+              {showDetails && (
+                <pre className="mt-2 text-xs text-red-700 dark:text-red-300 bg-red-100 dark:bg-red-900/40 rounded p-2 overflow-auto whitespace-pre-wrap break-words">
+                  {details}
+                </pre>
+              )}
+            </div>
+          )}
+
+          {onRetry && (
+            <button
+              onClick={onRetry}
+              className="mt-4 flex items-center gap-1.5 px-3 py-1.5 bg-red-600 text-white text-sm rounded-lg hover:bg-red-700 transition-colors"
+            >
+              <RefreshCw className="h-3.5 w-3.5" />
+              Try Again
+            </button>
+          )}
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/components/Profile/ProfileHeader.tsx b/frontend/src/components/Profile/ProfileHeader.tsx
index 2acd78e8..28214d07 100644
--- a/frontend/src/components/Profile/ProfileHeader.tsx
+++ b/frontend/src/components/Profile/ProfileHeader.tsx
@@ -1,100 +1,193 @@
-import { useState } from "react";
-
-export interface UserProfile {
-  name: string;
-  email: string;
-  avatar?: string;
-  joinDate: string;
-  totalCoursesCompleted: number;
-  currentStreak: number;
-}
-
-interface ProfileHeaderProps {
-  user: UserProfile;
-}
-
-export function ProfileHeader({ user }: ProfileHeaderProps) {
-  const [isEditing, setIsEditing] = useState(false);
-  const [editedName, setEditedName] = useState(user.name);
-
-  const handleSave = () => {
-    setIsEditing(false);
-    // Persist to localStorage
-    localStorage.setItem(
-      "userProfile",
-      JSON.stringify({ ...user, name: editedName }),
-    );
-  };
-
-  return (
-    <div className="w-full bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg p-6 sm:p-8 mb-8 shadow-lg">
-      <div className="flex items-start justify-between">
-        <div className="flex flex-col items-center text-center sm:flex-row sm:items-center sm:text-left gap-6">
-          {/* Avatar */}
-          <div className="w-24 h-24 rounded-full bg-white/20 border-4 border-white flex items-center justify-center shadow-lg">
-            {user.avatar ? (
-              <img
-                src={user.avatar}
-                alt={user.name}
-                className="w-full h-full rounded-full object-cover"
-              />
-            ) : (
-              <span className="text-4xl font-bold text-white">
-                {user.name.charAt(0).toUpperCase()}
-              </span>
-            )}
-          </div>
-
-          {/* User Info */}
-          <div className="text-white">
-            <div className="flex items-center gap-2 mb-2">
-              {isEditing ? (
-                <input
-                  type="text"
-                  value={editedName}
-                  onChange={(e) => setEditedName(e.target.value)}
-                  className="bg-white/20 border border-white/30 rounded px-3 py-1 text-white placeholder-white/50 text-2xl font-bold"
-                  onBlur={handleSave}
-                  onKeyDown={(e) => e.key === "Enter" && handleSave()}
-                  autoFocus
-                />
-              ) : (
-                <>
-                  <h1 className="text-3xl font-bold">{editedName}</h1>
-                  <button
-                    onClick={() => setIsEditing(true)}
-                    className="text-white/70 hover:text-white transition-colors"
-                    aria-label="Edit name"
-                  >
-                    ✎
-                  </button>
-                </>
-              )}
-            </div>
-            <p className="text-white/80 mb-4">{user.email}</p>
-
-            {/* Stats */}
-            <div className="flex flex-wrap justify-center sm:justify-start gap-6 sm:gap-8">
-              <div>
-                <div className="text-sm text-white/70">Courses Completed</div>
-                <div className="text-2xl font-bold">
-                  {user.totalCoursesCompleted}
-                </div>
-              </div>
-              <div>
-                <div className="text-sm text-white/70">Current Streak</div>
-                <div className="text-2xl font-bold">
-                  {user.currentStreak} days
-                </div>
-              </div>
-              <div>
-                <div className="text-sm text-white/70">Member Since</div>
-                <div className="text-lg font-semibold">{user.joinDate}</div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import { useState } from 'react';
+import { SkeletonProfile } from '../LoadingFallback';
+
+export interface UserProfile {
+  name: string;
+  email: string;
+  avatar?: string;
+  joinDate: string;
+  totalCoursesCompleted: number;
+  currentStreak: number;
+}
+
+interface ProfileHeaderProps {
+  user?: UserProfile;
+  loading?: boolean;
+}
+
+export function ProfileHeader({ user, loading = false }: ProfileHeaderProps) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editedName, setEditedName] = useState(user?.name ?? '');
+
+  if (loading || !user) {
+    return <SkeletonProfile className="mb-8" />;
+  }
+
+  const handleSave = () => {
+    setIsEditing(false);
+    localStorage.setItem('userProfile', JSON.stringify({ ...user, name: editedName }));
+  };
+
+  return (
+    <div className="w-full bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg p-8 mb-8 shadow-lg">
+      <div className="flex items-start justify-between">
+        <div className="flex items-center gap-6">
+          {/* Avatar */}
+          <div className="w-24 h-24 rounded-full bg-white/20 border-4 border-white flex items-center justify-center shadow-lg flex-shrink-0">
+            {user.avatar ? (
+              <img src={user.avatar} alt={user.name} className="w-full h-full rounded-full object-cover" />
+            ) : (
+              <span className="text-4xl font-bold text-white">{user.name.charAt(0).toUpperCase()}</span>
+            )}
+          </div>
+
+          {/* User Info */}
+          <div className="text-white">
+            <div className="flex items-center gap-2 mb-2">
+              {isEditing ? (
+                <input
+                  type="text"
+                  value={editedName}
+                  onChange={e => setEditedName(e.target.value)}
+                  className="bg-white/20 border border-white/30 rounded px-3 py-1 text-white placeholder-white/50 text-2xl font-bold"
+                  onBlur={handleSave}
+                  onKeyDown={e => e.key === 'Enter' && handleSave()}
+                  autoFocus
+                />
+              ) : (
+                <>
+                  <h1 className="text-3xl font-bold">{editedName || user.name}</h1>
+                  <button
+                    onClick={() => setIsEditing(true)}
+                    className="text-white/70 hover:text-white transition-colors"
+                    aria-label="Edit name"
+                  >
+                    ✎
+                  </button>
+                </>
+              )}
+            </div>
+            <p className="text-white/80 mb-4">{user.email}</p>
+
+            <div className="flex gap-8">
+              <div>
+                <div className="text-sm text-white/70">Courses Completed</div>
+                <div className="text-2xl font-bold">{user.totalCoursesCompleted}</div>
+              </div>
+              <div>
+                <div className="text-sm text-white/70">Current Streak</div>
+                <div className="text-2xl font-bold">{user.currentStreak} days</div>
+              </div>
+              <div>
+                <div className="text-sm text-white/70">Member Since</div>
+                <div className="text-lg font-semibold">{user.joinDate}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+import { useState } from "react";
+
+export interface UserProfile {
+  name: string;
+  email: string;
+  avatar?: string;
+  joinDate: string;
+  totalCoursesCompleted: number;
+  currentStreak: number;
+}
+
+interface ProfileHeaderProps {
+  user: UserProfile;
+}
+
+export function ProfileHeader({ user }: ProfileHeaderProps) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editedName, setEditedName] = useState(user.name);
+
+  const handleSave = () => {
+    setIsEditing(false);
+    // Persist to localStorage
+    localStorage.setItem(
+      "userProfile",
+      JSON.stringify({ ...user, name: editedName }),
+    );
+  };
+
+  return (
+    <div className="w-full bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg p-6 sm:p-8 mb-8 shadow-lg">
+      <div className="flex items-start justify-between">
+        <div className="flex flex-col items-center text-center sm:flex-row sm:items-center sm:text-left gap-6">
+          {/* Avatar */}
+          <div className="w-24 h-24 rounded-full bg-white/20 border-4 border-white flex items-center justify-center shadow-lg">
+            {user.avatar ? (
+              <img
+                src={user.avatar}
+                alt={user.name}
+                className="w-full h-full rounded-full object-cover"
+              />
+            ) : (
+              <span className="text-4xl font-bold text-white">
+                {user.name.charAt(0).toUpperCase()}
+              </span>
+            )}
+          </div>
+
+          {/* User Info */}
+          <div className="text-white">
+            <div className="flex items-center gap-2 mb-2">
+              {isEditing ? (
+                <input
+                  type="text"
+                  value={editedName}
+                  onChange={(e) => setEditedName(e.target.value)}
+                  className="bg-white/20 border border-white/30 rounded px-3 py-1 text-white placeholder-white/50 text-2xl font-bold"
+                  onBlur={handleSave}
+                  onKeyDown={(e) => e.key === "Enter" && handleSave()}
+                  autoFocus
+                />
+              ) : (
+                <>
+                  <h1 className="text-3xl font-bold">{editedName}</h1>
+                  <button
+                    onClick={() => setIsEditing(true)}
+                    className="text-white/70 hover:text-white transition-colors"
+                    aria-label="Edit name"
+                  >
+                    ✎
+                  </button>
+                </>
+              )}
+            </div>
+            <p className="text-white/80 mb-4">{user.email}</p>
+
+            {/* Stats */}
+            <div className="flex flex-wrap justify-center sm:justify-start gap-6 sm:gap-8">
+              <div>
+                <div className="text-sm text-white/70">Courses Completed</div>
+                <div className="text-2xl font-bold">
+                  {user.totalCoursesCompleted}
+                </div>
+              </div>
+              <div>
+                <div className="text-sm text-white/70">Current Streak</div>
+                <div className="text-2xl font-bold">
+                  {user.currentStreak} days
+                </div>
+              </div>
+              <div>
+                <div className="text-sm text-white/70">Member Since</div>
+                <div className="text-lg font-semibold">{user.joinDate}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}