diff --git a/web/components/ui/ErrorMessage.tsx b/web/components/ui/ErrorMessage.tsx
new file mode 100644
index 0000000..3d2a9bd
--- /dev/null
+++ b/web/components/ui/ErrorMessage.tsx
@@ -0,0 +1,399 @@
+/**
+ * ErrorMessage - Error display components for web
+ *
+ * Components:
+ * - ErrorMessage: Inline error with optional retry
+ * - FullScreenError: Full page error state
+ * - ErrorToast: Dismissible error notification
+ * - FieldError: Form field validation error
+ *
+ * Features:
+ * - Multiple severity levels
+ * - Retry and dismiss actions
+ * - Accessible ARIA labels
+ * - Tailwind CSS styling
+ */
+
+import { cn } from '@/lib/utils';
+
+// Error severity types
+export type ErrorSeverity = 'error' | 'warning' | 'info';
+
+/**
+ * ErrorMessage - Inline error message with icon and optional actions
+ *
+ * @example
+ * ```tsx
+ * <ErrorMessage
+ *   message="Failed to load data"
+ *   onRetry={() => refetch()}
+ * />
+ * ```
+ */
+interface ErrorMessageProps {
+  message: string;
+  severity?: ErrorSeverity;
+  onRetry?: () => void;
+  onDismiss?: () => void;
+  className?: string;
+}
+
+const severityStyles = {
+  error: {
+    container: 'bg-red-50 border-red-200 text-red-800',
+    icon: 'text-red-500',
+    button: 'text-red-600 hover:text-red-700 hover:bg-red-100',
+  },
+  warning: {
+    container: 'bg-yellow-50 border-yellow-200 text-yellow-800',
+    icon: 'text-yellow-500',
+    button: 'text-yellow-600 hover:text-yellow-700 hover:bg-yellow-100',
+  },
+  info: {
+    container: 'bg-blue-50 border-blue-200 text-blue-800',
+    icon: 'text-blue-500',
+    button: 'text-blue-600 hover:text-blue-700 hover:bg-blue-100',
+  },
+};
+
+export function ErrorMessage({
+  message,
+  severity = 'error',
+  onRetry,
+  onDismiss,
+  className,
+}: ErrorMessageProps) {
+  const styles = severityStyles[severity];
+
+  return (
+    <div
+      className={cn(
+        'flex items-start gap-3 rounded-lg border p-4',
+        styles.container,
+        className
+      )}
+      role="alert"
+      aria-live="polite"
+    >
+      {/* Icon */}
+      <svg
+        className={cn('h-5 w-5 flex-shrink-0', styles.icon)}
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        aria-hidden="true"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+        />
+      </svg>
+
+      {/* Message */}
+      <div className="flex-1 text-sm">
+        <p>{message}</p>
+      </div>
+
+      {/* Actions */}
+      <div className="flex items-center gap-2">
+        {onRetry && (
+          <button
+            onClick={onRetry}
+            className={cn(
+              'flex items-center gap-1 rounded px-2 py-1 text-xs font-medium transition-colors',
+              styles.button
+            )}
+          >
+            <svg
+              className="h-4 w-4"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+              />
+            </svg>
+            Retry
+          </button>
+        )}
+        {onDismiss && (
+          <button
+            onClick={onDismiss}
+            className={cn(
+              'rounded p-1 transition-colors',
+              styles.button
+            )}
+            aria-label="Dismiss"
+          >
+            <svg
+              className="h-4 w-4"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * FullScreenError - Full page error state with icon and actions
+ *
+ * @example
+ * ```tsx
+ * if (error) {
+ *   return (
+ *     <FullScreenError
+ *       title="Failed to Load"
+ *       message={error.message}
+ *       onRetry={() => refetch()}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+interface FullScreenErrorProps {
+  title?: string;
+  message: string;
+  icon?: 'error' | 'offline' | 'notFound';
+  onRetry?: () => void;
+  onBack?: () => void;
+  retryLabel?: string;
+  backLabel?: string;
+}
+
+const iconPaths = {
+  error: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z',
+  offline: 'M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z',
+  notFound: 'M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M12 12h.01M12 12h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
+};
+
+export function FullScreenError({
+  title = 'Something went wrong',
+  message,
+  icon = 'error',
+  onRetry,
+  onBack,
+  retryLabel = 'Try Again',
+  backLabel = 'Go Back',
+}: FullScreenErrorProps) {
+  return (
+    <div className="flex min-h-[400px] flex-col items-center justify-center p-8 text-center">
+      {/* Icon */}
+      <div className="mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-red-100">
+        <svg
+          className="h-10 w-10 text-red-600"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d={iconPaths[icon]}
+          />
+        </svg>
+      </div>
+
+      {/* Title */}
+      <h2 className="mb-2 text-2xl font-semibold text-slate-900">
+        {title}
+      </h2>
+
+      {/* Message */}
+      <p className="mb-8 max-w-md text-slate-600">
+        {message}
+      </p>
+
+      {/* Actions */}
+      <div className="flex gap-3">
+        {onRetry && (
+          <button
+            onClick={onRetry}
+            className="flex items-center gap-2 rounded-lg bg-blue-600 px-6 py-3 text-sm font-medium text-white shadow-sm transition-colors hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+          >
+            <svg
+              className="h-4 w-4"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+              />
+            </svg>
+            {retryLabel}
+          </button>
+        )}
+        {onBack && (
+          <button
+            onClick={onBack}
+            className="rounded-lg border border-slate-300 bg-white px-6 py-3 text-sm font-medium text-slate-700 shadow-sm transition-colors hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+          >
+            {backLabel}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * FieldError - Inline form field validation error
+ *
+ * @example
+ * ```tsx
+ * <input type="email" aria-invalid={!!error} />
+ * {error && <FieldError message={error} />}
+ * ```
+ */
+interface FieldErrorProps {
+  message: string;
+  className?: string;
+}
+
+export function FieldError({ message, className }: FieldErrorProps) {
+  return (
+    <p
+      className={cn('mt-1 flex items-center gap-1 text-sm text-red-600', className)}
+      role="alert"
+    >
+      <svg
+        className="h-4 w-4 flex-shrink-0"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+        />
+      </svg>
+      <span>{message}</span>
+    </p>
+  );
+}
+
+/**
+ * ErrorBoundary fallback component
+ *
+ * @example
+ * ```tsx
+ * <ErrorBoundary fallback={<ErrorBoundaryFallback />}>
+ *   <App />
+ * </ErrorBoundary>
+ * ```
+ */
+interface ErrorBoundaryFallbackProps {
+  error?: Error;
+  resetError?: () => void;
+}
+
+export function ErrorBoundaryFallback({
+  error,
+  resetError,
+}: ErrorBoundaryFallbackProps) {
+  return (
+    <FullScreenError
+      title="Application Error"
+      message={
+        error?.message ||
+        'An unexpected error occurred. Please refresh the page.'
+      }
+      onRetry={resetError}
+      retryLabel="Reload Page"
+    />
+  );
+}
+
+/**
+ * EmptyState - Component for empty data states (not strictly an error)
+ *
+ * @example
+ * ```tsx
+ * {items.length === 0 && (
+ *   <EmptyState
+ *     title="No items found"
+ *     message="Get started by adding your first item"
+ *     actionLabel="Add Item"
+ *     onAction={() => setShowModal(true)}
+ *   />
+ * )}
+ * ```
+ */
+interface EmptyStateProps {
+  title: string;
+  message?: string;
+  icon?: React.ReactNode;
+  actionLabel?: string;
+  onAction?: () => void;
+  className?: string;
+}
+
+export function EmptyState({
+  title,
+  message,
+  icon,
+  actionLabel,
+  onAction,
+  className,
+}: EmptyStateProps) {
+  return (
+    <div
+      className={cn(
+        'flex flex-col items-center justify-center p-8 text-center',
+        className
+      )}
+    >
+      {/* Icon */}
+      {icon && (
+        <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-slate-100">
+          {icon}
+        </div>
+      )}
+
+      {/* Title */}
+      <h3 className="mb-2 text-lg font-semibold text-slate-900">
+        {title}
+      </h3>
+
+      {/* Message */}
+      {message && (
+        <p className="mb-6 max-w-sm text-sm text-slate-600">
+          {message}
+        </p>
+      )}
+
+      {/* Action */}
+      {actionLabel && onAction && (
+        <button
+          onClick={onAction}
+          className="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+        >
+          {actionLabel}
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/web/components/ui/LoadingSpinner.tsx b/web/components/ui/LoadingSpinner.tsx
new file mode 100644
index 0000000..c4ecc12
--- /dev/null
+++ b/web/components/ui/LoadingSpinner.tsx
@@ -0,0 +1,180 @@
+/**
+ * LoadingSpinner - Animated loading spinner for web
+ *
+ * Features:
+ * - Multiple sizes (sm, md, lg, xl)
+ * - Optional loading message
+ * - Full-screen mode option
+ * - Tailwind CSS styling
+ *
+ * @example
+ * ```tsx
+ * <LoadingSpinner size="md" />
+ * <LoadingSpinner size="lg" message="Loading data..." />
+ * <LoadingSpinner fullScreen message="Please wait..." />
+ * ```
+ */
+
+import { cn } from '@/lib/utils';
+
+interface LoadingSpinnerProps {
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  color?: 'primary' | 'white' | 'gray';
+  message?: string;
+  fullScreen?: boolean;
+  className?: string;
+}
+
+// Size mapping for spinner
+const sizeClasses = {
+  sm: 'h-4 w-4 border-2',
+  md: 'h-8 w-8 border-2',
+  lg: 'h-12 w-12 border-3',
+  xl: 'h-16 w-16 border-4',
+};
+
+// Color mapping for spinner
+const colorClasses = {
+  primary: 'border-blue-600 border-t-transparent',
+  white: 'border-white border-t-transparent',
+  gray: 'border-gray-400 border-t-transparent',
+};
+
+// Text size mapping
+const textSizeClasses = {
+  sm: 'text-sm',
+  md: 'text-base',
+  lg: 'text-lg',
+  xl: 'text-xl',
+};
+
+export function LoadingSpinner({
+  size = 'md',
+  color = 'primary',
+  message,
+  fullScreen = false,
+  className,
+}: LoadingSpinnerProps) {
+  const spinner = (
+    <div
+      className={cn(
+        'animate-spin rounded-full',
+        sizeClasses[size],
+        colorClasses[color],
+        className
+      )}
+      role="status"
+      aria-label={message || 'Loading'}
+    />
+  );
+
+  if (fullScreen) {
+    return (
+      <div className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-white">
+        {spinner}
+        {message && (
+          <p className={cn('mt-4 text-slate-600', textSizeClasses[size])}>
+            {message}
+          </p>
+        )}
+      </div>
+    );
+  }
+
+  if (message) {
+    return (
+      <div className="flex flex-col items-center justify-center gap-3 p-6">
+        {spinner}
+        <p className={cn('text-slate-600', textSizeClasses[size])}>
+          {message}
+        </p>
+      </div>
+    );
+  }
+
+  return spinner;
+}
+
+/**
+ * LoadingOverlay - Full-screen loading overlay with backdrop
+ *
+ * @example
+ * ```tsx
+ * {isLoading && (
+ *   <LoadingOverlay message="Saving changes..." />
+ * )}
+ * ```
+ */
+interface LoadingOverlayProps {
+  message?: string;
+  backdrop?: 'light' | 'dark' | 'blur';
+}
+
+export function LoadingOverlay({
+  message = 'Loading...',
+  backdrop = 'blur'
+}: LoadingOverlayProps) {
+  const backdropClasses = {
+    light: 'bg-white/80',
+    dark: 'bg-slate-900/80',
+    blur: 'bg-white/80 backdrop-blur-sm',
+  };
+
+  return (
+    <div className={cn(
+      'fixed inset-0 z-50 flex flex-col items-center justify-center',
+      backdropClasses[backdrop]
+    )}>
+      <LoadingSpinner size="lg" />
+      <p className="mt-4 text-lg font-medium text-slate-700">
+        {message}
+      </p>
+    </div>
+  );
+}
+
+/**
+ * InlineLoader - Small inline loading indicator
+ *
+ * @example
+ * ```tsx
+ * <button disabled={isLoading}>
+ *   {isLoading ? <InlineLoader /> : 'Save'}
+ * </button>
+ * ```
+ */
+interface InlineLoaderProps {
+  className?: string;
+}
+
+export function InlineLoader({ className }: InlineLoaderProps) {
+  return (
+    <LoadingSpinner
+      size="sm"
+      className={cn('inline-block', className)}
+    />
+  );
+}
+
+/**
+ * PageLoader - Full page loading state with centered spinner
+ *
+ * @example
+ * ```tsx
+ * if (isLoading) return <PageLoader message="Loading dashboard..." />;
+ * ```
+ */
+interface PageLoaderProps {
+  message?: string;
+}
+
+export function PageLoader({ message }: PageLoaderProps) {
+  return (
+    <div className="flex min-h-[400px] flex-col items-center justify-center">
+      <LoadingSpinner size="lg" />
+      {message && (
+        <p className="mt-4 text-lg text-slate-600">{message}</p>
+      )}
+    </div>
+  );
+}
diff --git a/web/components/ui/Skeleton.tsx b/web/components/ui/Skeleton.tsx
new file mode 100644
index 0000000..34b40da
--- /dev/null
+++ b/web/components/ui/Skeleton.tsx
@@ -0,0 +1,319 @@
+/**
+ * Skeleton - Loading skeleton components for web
+ *
+ * Components:
+ * - Skeleton: Basic skeleton element
+ * - SkeletonCard: Card-style skeleton
+ * - SkeletonList: List of skeleton items
+ * - SkeletonText: Text skeleton with multiple lines
+ * - SkeletonAvatar: Avatar/profile picture skeleton
+ *
+ * Features:
+ * - Animated shimmer effect
+ * - Multiple variants and sizes
+ * - Composable building blocks
+ * - Tailwind CSS styling
+ *
+ * @example
+ * ```tsx
+ * if (isLoading) {
+ *   return <SkeletonCard />;
+ * }
+ * ```
+ */
+
+import { cn } from '@/lib/utils';
+
+/**
+ * Skeleton - Base skeleton component with shimmer animation
+ */
+interface SkeletonProps {
+  className?: string;
+  variant?: 'rectangular' | 'circular' | 'text';
+}
+
+export function Skeleton({
+  className,
+  variant = 'rectangular',
+}: SkeletonProps) {
+  const variantClasses = {
+    rectangular: 'rounded',
+    circular: 'rounded-full',
+    text: 'rounded h-4',
+  };
+
+  return (
+    <div
+      className={cn(
+        'animate-pulse bg-slate-200',
+        variantClasses[variant],
+        className
+      )}
+      aria-hidden="true"
+    />
+  );
+}
+
+/**
+ * SkeletonAvatar - Avatar skeleton with circular shape
+ *
+ * @example
+ * ```tsx
+ * <SkeletonAvatar size="lg" />
+ * ```
+ */
+interface SkeletonAvatarProps {
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  className?: string;
+}
+
+const avatarSizes = {
+  sm: 'h-8 w-8',
+  md: 'h-10 w-10',
+  lg: 'h-12 w-12',
+  xl: 'h-16 w-16',
+};
+
+export function SkeletonAvatar({
+  size = 'md',
+  className,
+}: SkeletonAvatarProps) {
+  return (
+    <Skeleton
+      variant="circular"
+      className={cn(avatarSizes[size], className)}
+    />
+  );
+}
+
+/**
+ * SkeletonText - Multi-line text skeleton
+ *
+ * @example
+ * ```tsx
+ * <SkeletonText lines={3} />
+ * ```
+ */
+interface SkeletonTextProps {
+  lines?: number;
+  className?: string;
+}
+
+export function SkeletonText({ lines = 3, className }: SkeletonTextProps) {
+  return (
+    <div className={cn('space-y-2', className)}>
+      {Array.from({ length: lines }).map((_, i) => (
+        <Skeleton
+          key={i}
+          variant="text"
+          className={cn(
+            'h-4',
+            i === lines - 1 && 'w-3/4' // Last line is shorter
+          )}
+        />
+      ))}
+    </div>
+  );
+}
+
+/**
+ * SkeletonCard - Card-style skeleton with header and content
+ *
+ * @example
+ * ```tsx
+ * {isLoading ? (
+ *   <SkeletonCard />
+ * ) : (
+ *   <BeneficiaryCard data={data} />
+ * )}
+ * ```
+ */
+interface SkeletonCardProps {
+  showAvatar?: boolean;
+  lines?: number;
+  className?: string;
+}
+
+export function SkeletonCard({
+  showAvatar = true,
+  lines = 3,
+  className,
+}: SkeletonCardProps) {
+  return (
+    <div
+      className={cn(
+        'rounded-lg border border-slate-200 bg-white p-6',
+        className
+      )}
+    >
+      <div className="flex items-start gap-4">
+        {showAvatar && <SkeletonAvatar size="lg" />}
+        <div className="flex-1 space-y-3">
+          <Skeleton className="h-6 w-1/3" />
+          <SkeletonText lines={lines} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * SkeletonList - List of skeleton cards
+ *
+ * @example
+ * ```tsx
+ * {isLoading ? (
+ *   <SkeletonList count={5} />
+ * ) : (
+ *   items.map(item => <ItemCard key={item.id} {...item} />)
+ * )}
+ * ```
+ */
+interface SkeletonListProps {
+  count?: number;
+  showAvatar?: boolean;
+  className?: string;
+}
+
+export function SkeletonList({
+  count = 3,
+  showAvatar = true,
+  className,
+}: SkeletonListProps) {
+  return (
+    <div className={cn('space-y-4', className)}>
+      {Array.from({ length: count }).map((_, i) => (
+        <SkeletonCard key={i} showAvatar={showAvatar} />
+      ))}
+    </div>
+  );
+}
+
+/**
+ * SkeletonTable - Table skeleton with rows and columns
+ *
+ * @example
+ * ```tsx
+ * {isLoading ? (
+ *   <SkeletonTable rows={5} columns={4} />
+ * ) : (
+ *   <DataTable data={data} />
+ * )}
+ * ```
+ */
+interface SkeletonTableProps {
+  rows?: number;
+  columns?: number;
+  showHeader?: boolean;
+  className?: string;
+}
+
+export function SkeletonTable({
+  rows = 5,
+  columns = 4,
+  showHeader = true,
+  className,
+}: SkeletonTableProps) {
+  return (
+    <div className={cn('overflow-hidden rounded-lg border border-slate-200', className)}>
+      {/* Header */}
+      {showHeader && (
+        <div className="flex gap-4 border-b border-slate-200 bg-slate-50 p-4">
+          {Array.from({ length: columns }).map((_, i) => (
+            <Skeleton key={i} className="h-4 flex-1" />
+          ))}
+        </div>
+      )}
+
+      {/* Rows */}
+      <div className="divide-y divide-slate-200 bg-white">
+        {Array.from({ length: rows }).map((_, rowIndex) => (
+          <div key={rowIndex} className="flex gap-4 p-4">
+            {Array.from({ length: columns }).map((_, colIndex) => (
+              <Skeleton key={colIndex} className="h-4 flex-1" />
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * SkeletonDashboard - Dashboard-style skeleton with multiple sections
+ *
+ * @example
+ * ```tsx
+ * {isLoading ? (
+ *   <SkeletonDashboard />
+ * ) : (
+ *   <Dashboard data={data} />
+ * )}
+ * ```
+ */
+export function SkeletonDashboard() {
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-10 w-32" />
+      </div>
+
+      {/* Stats grid */}
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <div key={i} className="rounded-lg border border-slate-200 bg-white p-6">
+            <Skeleton className="mb-2 h-4 w-24" />
+            <Skeleton className="h-8 w-16" />
+          </div>
+        ))}
+      </div>
+
+      {/* Content */}
+      <div className="grid gap-6 lg:grid-cols-2">
+        <div className="space-y-4">
+          <Skeleton className="h-6 w-32" />
+          <SkeletonCard />
+          <SkeletonCard />
+        </div>
+        <div className="space-y-4">
+          <Skeleton className="h-6 w-32" />
+          <SkeletonCard />
+          <SkeletonCard />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * SkeletonForm - Form skeleton with fields and button
+ *
+ * @example
+ * ```tsx
+ * {isLoading ? (
+ *   <SkeletonForm fields={5} />
+ * ) : (
+ *   <BeneficiaryForm onSubmit={handleSubmit} />
+ * )}
+ * ```
+ */
+interface SkeletonFormProps {
+  fields?: number;
+  className?: string;
+}
+
+export function SkeletonForm({ fields = 3, className }: SkeletonFormProps) {
+  return (
+    <div className={cn('space-y-4', className)}>
+      {Array.from({ length: fields }).map((_, i) => (
+        <div key={i} className="space-y-2">
+          <Skeleton className="h-4 w-24" />
+          <Skeleton className="h-10 w-full" />
+        </div>
+      ))}
+      <Skeleton className="h-10 w-full" />
+    </div>
+  );
+}
diff --git a/web/components/ui/__tests__/ErrorMessage.test.tsx b/web/components/ui/__tests__/ErrorMessage.test.tsx
new file mode 100644
index 0000000..29e3601
--- /dev/null
+++ b/web/components/ui/__tests__/ErrorMessage.test.tsx
@@ -0,0 +1,206 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import {
+  ErrorMessage,
+  FullScreenError,
+  FieldError,
+  EmptyState,
+} from '../ErrorMessage';
+
+describe('ErrorMessage Component', () => {
+  it('renders error message', () => {
+    render(<ErrorMessage message="Something went wrong" />);
+    expect(screen.getByText('Something went wrong')).toBeInTheDocument();
+  });
+
+  it('renders with different severity levels', () => {
+    const { rerender, container } = render(
+      <ErrorMessage message="Error" severity="error" />
+    );
+    let alert = container.querySelector('[role="alert"]');
+    expect(alert).toHaveClass('bg-red-50', 'border-red-200');
+
+    rerender(<ErrorMessage message="Warning" severity="warning" />);
+    alert = container.querySelector('[role="alert"]');
+    expect(alert).toHaveClass('bg-yellow-50', 'border-yellow-200');
+
+    rerender(<ErrorMessage message="Info" severity="info" />);
+    alert = container.querySelector('[role="alert"]');
+    expect(alert).toHaveClass('bg-blue-50', 'border-blue-200');
+  });
+
+  it('calls onRetry when retry button is clicked', () => {
+    const handleRetry = jest.fn();
+    render(<ErrorMessage message="Failed to load" onRetry={handleRetry} />);
+
+    const retryButton = screen.getByRole('button', { name: /retry/i });
+    fireEvent.click(retryButton);
+
+    expect(handleRetry).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onDismiss when dismiss button is clicked', () => {
+    const handleDismiss = jest.fn();
+    render(<ErrorMessage message="Error" onDismiss={handleDismiss} />);
+
+    const dismissButton = screen.getByLabelText('Dismiss');
+    fireEvent.click(dismissButton);
+
+    expect(handleDismiss).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders without action buttons', () => {
+    render(<ErrorMessage message="Error" />);
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+
+  it('has proper ARIA attributes', () => {
+    render(<ErrorMessage message="Error occurred" />);
+    const alert = screen.getByRole('alert');
+    expect(alert).toHaveAttribute('aria-live', 'polite');
+  });
+});
+
+describe('FullScreenError Component', () => {
+  it('renders full screen error with title and message', () => {
+    render(
+      <FullScreenError
+        title="Page Not Found"
+        message="The page you are looking for does not exist."
+      />
+    );
+    expect(screen.getByText('Page Not Found')).toBeInTheDocument();
+    expect(
+      screen.getByText('The page you are looking for does not exist.')
+    ).toBeInTheDocument();
+  });
+
+  it('uses default title when not provided', () => {
+    render(<FullScreenError message="An error occurred" />);
+    expect(screen.getByText('Something went wrong')).toBeInTheDocument();
+  });
+
+  it('calls onRetry when retry button is clicked', () => {
+    const handleRetry = jest.fn();
+    render(
+      <FullScreenError
+        message="Failed to load"
+        onRetry={handleRetry}
+      />
+    );
+
+    const retryButton = screen.getByRole('button', { name: /try again/i });
+    fireEvent.click(retryButton);
+
+    expect(handleRetry).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onBack when back button is clicked', () => {
+    const handleBack = jest.fn();
+    render(
+      <FullScreenError
+        message="Error"
+        onBack={handleBack}
+      />
+    );
+
+    const backButton = screen.getByRole('button', { name: /go back/i });
+    fireEvent.click(backButton);
+
+    expect(handleBack).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders with custom button labels', () => {
+    render(
+      <FullScreenError
+        message="Error"
+        onRetry={() => {}}
+        onBack={() => {}}
+        retryLabel="Reload"
+        backLabel="Return"
+      />
+    );
+
+    expect(screen.getByRole('button', { name: /reload/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /return/i })).toBeInTheDocument();
+  });
+
+  it('renders different icon types', () => {
+    const { container } = render(
+      <FullScreenError message="Error" icon="offline" />
+    );
+    // Check that SVG is rendered
+    expect(container.querySelector('svg')).toBeInTheDocument();
+  });
+});
+
+describe('FieldError Component', () => {
+  it('renders field error message', () => {
+    render(<FieldError message="Email is required" />);
+    expect(screen.getByText('Email is required')).toBeInTheDocument();
+  });
+
+  it('has proper ARIA role', () => {
+    render(<FieldError message="Invalid input" />);
+    const alert = screen.getByRole('alert');
+    expect(alert).toBeInTheDocument();
+  });
+
+  it('renders with icon', () => {
+    const { container } = render(<FieldError message="Error" />);
+    const svg = container.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    render(<FieldError message="Error" className="mb-4" />);
+    const alert = screen.getByRole('alert');
+    expect(alert).toHaveClass('mb-4');
+  });
+});
+
+describe('EmptyState Component', () => {
+  it('renders empty state with title', () => {
+    render(<EmptyState title="No items found" />);
+    expect(screen.getByText('No items found')).toBeInTheDocument();
+  });
+
+  it('renders with message', () => {
+    render(
+      <EmptyState
+        title="No data"
+        message="Get started by adding your first item"
+      />
+    );
+    expect(
+      screen.getByText('Get started by adding your first item')
+    ).toBeInTheDocument();
+  });
+
+  it('renders action button when provided', () => {
+    const handleAction = jest.fn();
+    render(
+      <EmptyState
+        title="Empty"
+        actionLabel="Add Item"
+        onAction={handleAction}
+      />
+    );
+
+    const button = screen.getByRole('button', { name: /add item/i });
+    expect(button).toBeInTheDocument();
+
+    fireEvent.click(button);
+    expect(handleAction).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders custom icon', () => {
+    const icon = <div data-testid="custom-icon">Icon</div>;
+    render(<EmptyState title="Empty" icon={icon} />);
+    expect(screen.getByTestId('custom-icon')).toBeInTheDocument();
+  });
+
+  it('does not render action button when not provided', () => {
+    render(<EmptyState title="Empty" />);
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+});
diff --git a/web/components/ui/__tests__/LoadingSpinner.test.tsx b/web/components/ui/__tests__/LoadingSpinner.test.tsx
new file mode 100644
index 0000000..7678b35
--- /dev/null
+++ b/web/components/ui/__tests__/LoadingSpinner.test.tsx
@@ -0,0 +1,114 @@
+import { render, screen } from '@testing-library/react';
+import {
+  LoadingSpinner,
+  LoadingOverlay,
+  InlineLoader,
+  PageLoader,
+} from '../LoadingSpinner';
+
+describe('LoadingSpinner Component', () => {
+  it('renders basic spinner', () => {
+    render(<LoadingSpinner />);
+    const spinner = screen.getByRole('status');
+    expect(spinner).toBeInTheDocument();
+    expect(spinner).toHaveAttribute('aria-label', 'Loading');
+  });
+
+  it('renders with custom message', () => {
+    render(<LoadingSpinner message="Loading data..." />);
+    expect(screen.getByText('Loading data...')).toBeInTheDocument();
+  });
+
+  it('renders different sizes', () => {
+    const { rerender } = render(<LoadingSpinner size="sm" />);
+    let spinner = screen.getByRole('status');
+    expect(spinner).toHaveClass('h-4', 'w-4');
+
+    rerender(<LoadingSpinner size="lg" />);
+    spinner = screen.getByRole('status');
+    expect(spinner).toHaveClass('h-12', 'w-12');
+  });
+
+  it('renders in full screen mode', () => {
+    render(<LoadingSpinner fullScreen message="Please wait..." />);
+    const container = screen.getByRole('status').parentElement;
+    expect(container).toHaveClass('fixed', 'inset-0', 'z-50');
+    expect(screen.getByText('Please wait...')).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    render(<LoadingSpinner className="custom-class" />);
+    const spinner = screen.getByRole('status');
+    expect(spinner).toHaveClass('custom-class');
+  });
+
+  it('renders with different colors', () => {
+    const { rerender } = render(<LoadingSpinner color="primary" />);
+    let spinner = screen.getByRole('status');
+    expect(spinner).toHaveClass('border-blue-600');
+
+    rerender(<LoadingSpinner color="white" />);
+    spinner = screen.getByRole('status');
+    expect(spinner).toHaveClass('border-white');
+  });
+});
+
+describe('LoadingOverlay Component', () => {
+  it('renders overlay with message', () => {
+    render(<LoadingOverlay message="Saving changes..." />);
+    expect(screen.getByText('Saving changes...')).toBeInTheDocument();
+  });
+
+  it('renders with different backdrop styles', () => {
+    const { rerender, container } = render(<LoadingOverlay backdrop="light" />);
+    let overlay = container.querySelector('.fixed');
+    expect(overlay).toHaveClass('bg-white/80');
+
+    rerender(<LoadingOverlay backdrop="dark" />);
+    overlay = container.querySelector('.fixed');
+    expect(overlay).toHaveClass('bg-slate-900/80');
+
+    rerender(<LoadingOverlay backdrop="blur" />);
+    overlay = container.querySelector('.fixed');
+    expect(overlay).toHaveClass('backdrop-blur-sm');
+  });
+
+  it('renders as fixed overlay', () => {
+    const { container } = render(<LoadingOverlay />);
+    const overlay = container.querySelector('.fixed');
+    expect(overlay).toHaveClass('inset-0', 'z-50');
+  });
+});
+
+describe('InlineLoader Component', () => {
+  it('renders inline spinner', () => {
+    render(<InlineLoader />);
+    const spinner = screen.getByRole('status');
+    expect(spinner).toHaveClass('inline-block');
+  });
+
+  it('applies custom className', () => {
+    render(<InlineLoader className="ml-2" />);
+    const spinner = screen.getByRole('status');
+    expect(spinner).toHaveClass('ml-2');
+  });
+});
+
+describe('PageLoader Component', () => {
+  it('renders page loader', () => {
+    render(<PageLoader />);
+    const spinner = screen.getByRole('status');
+    expect(spinner).toBeInTheDocument();
+  });
+
+  it('renders with message', () => {
+    render(<PageLoader message="Loading dashboard..." />);
+    expect(screen.getByText('Loading dashboard...')).toBeInTheDocument();
+  });
+
+  it('has minimum height', () => {
+    const { container } = render(<PageLoader />);
+    const wrapper = container.firstChild as HTMLElement;
+    expect(wrapper).toHaveClass('min-h-[400px]');
+  });
+});
diff --git a/web/components/ui/__tests__/Skeleton.test.tsx b/web/components/ui/__tests__/Skeleton.test.tsx
new file mode 100644
index 0000000..d7fa515
--- /dev/null
+++ b/web/components/ui/__tests__/Skeleton.test.tsx
@@ -0,0 +1,178 @@
+import { render } from '@testing-library/react';
+import {
+  Skeleton,
+  SkeletonAvatar,
+  SkeletonText,
+  SkeletonCard,
+  SkeletonList,
+  SkeletonTable,
+  SkeletonForm,
+} from '../Skeleton';
+
+describe('Skeleton Component', () => {
+  it('renders basic skeleton', () => {
+    const { container } = render(<Skeleton />);
+    const skeleton = container.firstChild;
+    expect(skeleton).toHaveClass('animate-pulse', 'bg-slate-200');
+  });
+
+  it('renders with different variants', () => {
+    const { rerender, container } = render(<Skeleton variant="rectangular" />);
+    let skeleton = container.firstChild;
+    expect(skeleton).toHaveClass('rounded');
+
+    rerender(<Skeleton variant="circular" />);
+    skeleton = container.firstChild;
+    expect(skeleton).toHaveClass('rounded-full');
+
+    rerender(<Skeleton variant="text" />);
+    skeleton = container.firstChild;
+    expect(skeleton).toHaveClass('h-4');
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<Skeleton className="w-full h-20" />);
+    const skeleton = container.firstChild;
+    expect(skeleton).toHaveClass('w-full', 'h-20');
+  });
+
+  it('has aria-hidden attribute', () => {
+    const { container } = render(<Skeleton />);
+    const skeleton = container.firstChild;
+    expect(skeleton).toHaveAttribute('aria-hidden', 'true');
+  });
+});
+
+describe('SkeletonAvatar Component', () => {
+  it('renders circular skeleton', () => {
+    const { container } = render(<SkeletonAvatar />);
+    const avatar = container.firstChild;
+    expect(avatar).toHaveClass('rounded-full');
+  });
+
+  it('renders with different sizes', () => {
+    const { rerender, container } = render(<SkeletonAvatar size="sm" />);
+    let avatar = container.firstChild;
+    expect(avatar).toHaveClass('h-8', 'w-8');
+
+    rerender(<SkeletonAvatar size="lg" />);
+    avatar = container.firstChild;
+    expect(avatar).toHaveClass('h-12', 'w-12');
+
+    rerender(<SkeletonAvatar size="xl" />);
+    avatar = container.firstChild;
+    expect(avatar).toHaveClass('h-16', 'w-16');
+  });
+});
+
+describe('SkeletonText Component', () => {
+  it('renders default number of lines', () => {
+    const { container } = render(<SkeletonText />);
+    const lines = container.querySelectorAll('.h-4');
+    expect(lines).toHaveLength(3);
+  });
+
+  it('renders custom number of lines', () => {
+    const { container } = render(<SkeletonText lines={5} />);
+    const lines = container.querySelectorAll('.h-4');
+    expect(lines).toHaveLength(5);
+  });
+
+  it('makes last line shorter', () => {
+    const { container } = render(<SkeletonText lines={2} />);
+    const lines = container.querySelectorAll('.h-4');
+    expect(lines[1]).toHaveClass('w-3/4');
+  });
+});
+
+describe('SkeletonCard Component', () => {
+  it('renders card with avatar by default', () => {
+    const { container } = render(<SkeletonCard />);
+    const avatar = container.querySelector('.rounded-full');
+    expect(avatar).toBeInTheDocument();
+  });
+
+  it('renders without avatar when specified', () => {
+    const { container } = render(<SkeletonCard showAvatar={false} />);
+    const avatar = container.querySelector('.rounded-full');
+    expect(avatar).not.toBeInTheDocument();
+  });
+
+  it('renders custom number of text lines', () => {
+    const { container } = render(<SkeletonCard lines={5} />);
+    const textContainer = container.querySelector('.space-y-2');
+    const lines = textContainer?.querySelectorAll('.h-4');
+    expect(lines).toHaveLength(5);
+  });
+
+  it('has card styling', () => {
+    const { container } = render(<SkeletonCard />);
+    const card = container.firstChild;
+    expect(card).toHaveClass('rounded-lg', 'border', 'bg-white', 'p-6');
+  });
+});
+
+describe('SkeletonList Component', () => {
+  it('renders default number of cards', () => {
+    const { container } = render(<SkeletonList />);
+    const cards = container.querySelectorAll('.rounded-lg.border');
+    expect(cards).toHaveLength(3);
+  });
+
+  it('renders custom number of cards', () => {
+    const { container } = render(<SkeletonList count={5} />);
+    const cards = container.querySelectorAll('.rounded-lg.border');
+    expect(cards).toHaveLength(5);
+  });
+
+  it('passes showAvatar prop to cards', () => {
+    const { container } = render(<SkeletonList showAvatar={false} />);
+    const avatars = container.querySelectorAll('.rounded-full');
+    expect(avatars).toHaveLength(0);
+  });
+});
+
+describe('SkeletonTable Component', () => {
+  it('renders table with header by default', () => {
+    const { container } = render(<SkeletonTable />);
+    const header = container.querySelector('.bg-slate-50');
+    expect(header).toBeInTheDocument();
+  });
+
+  it('renders without header when specified', () => {
+    const { container } = render(<SkeletonTable showHeader={false} />);
+    const header = container.querySelector('.bg-slate-50');
+    expect(header).not.toBeInTheDocument();
+  });
+
+  it('renders correct number of rows and columns', () => {
+    const { container } = render(<SkeletonTable rows={3} columns={4} />);
+    const rows = container.querySelectorAll('.divide-y > div');
+    expect(rows).toHaveLength(3);
+
+    const firstRowCells = rows[0].querySelectorAll('.h-4');
+    expect(firstRowCells).toHaveLength(4);
+  });
+});
+
+describe('SkeletonForm Component', () => {
+  it('renders default number of fields', () => {
+    const { container } = render(<SkeletonForm />);
+    const fields = container.querySelectorAll('.space-y-2');
+    expect(fields).toHaveLength(3);
+  });
+
+  it('renders custom number of fields', () => {
+    const { container } = render(<SkeletonForm fields={5} />);
+    const fields = container.querySelectorAll('.space-y-2');
+    expect(fields).toHaveLength(5);
+  });
+
+  it('includes submit button skeleton', () => {
+    const { container } = render(<SkeletonForm />);
+    // Count all h-10 elements (fields + button)
+    const elements = container.querySelectorAll('.h-10');
+    // Should have fields + 1 submit button
+    expect(elements.length).toBeGreaterThan(3);
+  });
+});
diff --git a/web/components/ui/index.ts b/web/components/ui/index.ts
new file mode 100644
index 0000000..0d8e047
--- /dev/null
+++ b/web/components/ui/index.ts
@@ -0,0 +1,35 @@
+/**
+ * UI Components Export
+ *
+ * Centralized export for all UI components
+ */
+
+// Loading components
+export {
+  LoadingSpinner,
+  LoadingOverlay,
+  InlineLoader,
+  PageLoader,
+} from './LoadingSpinner';
+
+// Error components
+export {
+  ErrorMessage,
+  FullScreenError,
+  FieldError,
+  ErrorBoundaryFallback,
+  EmptyState,
+  type ErrorSeverity,
+} from './ErrorMessage';
+
+// Skeleton components
+export {
+  Skeleton,
+  SkeletonAvatar,
+  SkeletonText,
+  SkeletonCard,
+  SkeletonList,
+  SkeletonTable,
+  SkeletonDashboard,
+  SkeletonForm,
+} from './Skeleton';
diff --git a/web/lib/utils.ts b/web/lib/utils.ts
new file mode 100644
index 0000000..4745d71
--- /dev/null
+++ b/web/lib/utils.ts
@@ -0,0 +1,21 @@
+/**
+ * Utility functions for the web application
+ */
+
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+/**
+ * Merge Tailwind CSS classes with proper precedence
+ *
+ * Uses clsx for conditional classes and tailwind-merge to handle conflicts
+ *
+ * @example
+ * ```tsx
+ * cn('bg-red-500', isActive && 'bg-blue-500') // 'bg-blue-500' if active
+ * cn('p-4', className) // Merges with user-provided className
+ * ```
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/web/package-lock.json b/web/package-lock.json
index 150da53..9c5c552 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -8,9 +8,11 @@
       "name": "wellnuo-web",
       "version": "0.1.0",
       "dependencies": {
+        "clsx": "^2.1.1",
         "next": "^16.1.6",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
+        "tailwind-merge": "^3.4.0",
         "zustand": "^5.0.2"
       },
       "devDependencies": {
@@ -4044,6 +4046,15 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -9759,6 +9770,16 @@
         "url": "https://opencollective.com/synckit"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.4.0.tgz",
+      "integrity": "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.19",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
diff --git a/web/package.json b/web/package.json
index 2081547..e9f5cc3 100644
--- a/web/package.json
+++ b/web/package.json
@@ -13,9 +13,11 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
+    "clsx": "^2.1.1",
     "next": "^16.1.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "tailwind-merge": "^3.4.0",
     "zustand": "^5.0.2"
   },
   "devDependencies": {