diff --git a/shared/components/AsyncComponent.tsx b/shared/components/AsyncComponent.tsx
new file mode 100644
index 00000000..f2ec9816
--- /dev/null
+++ b/shared/components/AsyncComponent.tsx
@@ -0,0 +1,282 @@
+// ========================================
+// Async Component Pattern
+// ========================================
+// Standard pattern for loading/error/empty states
+
+import React, { ReactNode } from 'react';
+import { Card, CardContent } from '@/components/ui/card';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import { Loader2, AlertCircle, Inbox, RefreshCw } from 'lucide-react';
+
+// ========================================
+// LOADING SKELETON
+// ========================================
+
+export const CardSkeleton: React.FC = () => {
+  return (
+    <Card className="bg-gray-900 border-gray-800 animate-pulse">
+      <CardContent className="p-6">
+        <div className="h-6 bg-gray-800 rounded w-1/3 mb-4"></div>
+        <div className="space-y-3">
+          <div className="h-4 bg-gray-800 rounded"></div>
+          <div className="h-4 bg-gray-800 rounded w-5/6"></div>
+          <div className="h-4 bg-gray-800 rounded w-4/6"></div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export const ListItemSkeleton: React.FC = () => {
+  return (
+    <div className="flex items-center gap-4 p-4 bg-gray-900 border border-gray-800 rounded-lg animate-pulse">
+      <div className="w-12 h-12 bg-gray-800 rounded-full"></div>
+      <div className="flex-1 space-y-2">
+        <div className="h-4 bg-gray-800 rounded w-1/4"></div>
+        <div className="h-3 bg-gray-800 rounded w-1/2"></div>
+      </div>
+      <div className="h-8 w-20 bg-gray-800 rounded"></div>
+    </div>
+  );
+};
+
+export const TableSkeleton: React.FC<{ rows?: number }> = ({ rows = 5 }) => {
+  return (
+    <div className="space-y-2">
+      {Array.from({ length: rows }).map((_, i) => (
+        <div key={i} className="flex gap-4 p-3 bg-gray-900 border border-gray-800 rounded animate-pulse">
+          <div className="h-4 bg-gray-800 rounded flex-1"></div>
+          <div className="h-4 bg-gray-800 rounded w-24"></div>
+          <div className="h-4 bg-gray-800 rounded w-32"></div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+// ========================================
+// LOADING COMPONENT
+// ========================================
+
+export const LoadingState: React.FC<{
+  message?: string;
+  fullScreen?: boolean;
+}> = ({ message = 'Loading...', fullScreen = false }) => {
+  const content = (
+    <div className="flex flex-col items-center gap-4">
+      <Loader2 className="w-12 h-12 text-green-500 animate-spin" />
+      <p className="text-gray-400">{message}</p>
+    </div>
+  );
+
+  if (fullScreen) {
+    return (
+      <div className="min-h-screen bg-gray-950 flex items-center justify-center">
+        <Card className="bg-gray-900 border-gray-800 p-8">
+          <CardContent>{content}</CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center justify-center p-12">
+      {content}
+    </div>
+  );
+};
+
+// ========================================
+// ERROR STATE
+// ========================================
+
+export const ErrorState: React.FC<{
+  message?: string;
+  error?: Error | string;
+  onRetry?: () => void;
+  fullScreen?: boolean;
+}> = ({
+  message = 'An error occurred',
+  error,
+  onRetry,
+  fullScreen = false,
+}) => {
+  const errorMessage = typeof error === 'string' ? error : error?.message;
+
+  const content = (
+    <Alert className="bg-red-900/20 border-red-500">
+      <AlertCircle className="h-5 w-5 text-red-400" />
+      <AlertDescription className="text-gray-300">
+        <strong className="block mb-2">{message}</strong>
+        {errorMessage && (
+          <p className="text-sm text-gray-400 mb-4">{errorMessage}</p>
+        )}
+        {onRetry && (
+          <Button
+            onClick={onRetry}
+            size="sm"
+            className="bg-green-600 hover:bg-green-700"
+          >
+            <RefreshCw className="w-4 h-4 mr-2" />
+            Try Again
+          </Button>
+        )}
+      </AlertDescription>
+    </Alert>
+  );
+
+  if (fullScreen) {
+    return (
+      <div className="min-h-screen bg-gray-950 flex items-center justify-center p-4">
+        <Card className="bg-gray-900 border-gray-800 max-w-md">
+          <CardContent className="p-8">{content}</CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return <div className="p-4">{content}</div>;
+};
+
+// ========================================
+// EMPTY STATE
+// ========================================
+
+export const EmptyState: React.FC<{
+  message?: string;
+  description?: string;
+  icon?: ReactNode;
+  action?: {
+    label: string;
+    onClick: () => void;
+  };
+  fullScreen?: boolean;
+}> = ({
+  message = 'No data found',
+  description,
+  icon,
+  action,
+  fullScreen = false,
+}) => {
+  const content = (
+    <div className="flex flex-col items-center gap-4 text-center">
+      {icon || <Inbox className="w-16 h-16 text-gray-600" />}
+      <div>
+        <h3 className="text-lg font-semibold text-white mb-1">{message}</h3>
+        {description && <p className="text-sm text-gray-400">{description}</p>}
+      </div>
+      {action && (
+        <Button onClick={action.onClick} className="bg-green-600 hover:bg-green-700">
+          {action.label}
+        </Button>
+      )}
+    </div>
+  );
+
+  if (fullScreen) {
+    return (
+      <div className="min-h-screen bg-gray-950 flex items-center justify-center p-4">
+        <Card className="bg-gray-900 border-gray-800 p-8">
+          <CardContent>{content}</CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return <div className="p-12">{content}</div>;
+};
+
+// ========================================
+// ASYNC COMPONENT WRAPPER
+// ========================================
+
+export interface AsyncComponentProps<T> {
+  /** Loading state */
+  isLoading: boolean;
+  /** Error object */
+  error?: Error | string | null;
+  /** Data */
+  data?: T | null;
+  /** Children render function */
+  children: (data: T) => ReactNode;
+  /** Custom loading component */
+  LoadingComponent?: React.ComponentType;
+  /** Custom error component */
+  ErrorComponent?: React.ComponentType<{ error: Error | string; onRetry?: () => void }>;
+  /** Custom empty component */
+  EmptyComponent?: React.ComponentType;
+  /** Retry callback */
+  onRetry?: () => void;
+  /** Loading message */
+  loadingMessage?: string;
+  /** Error message */
+  errorMessage?: string;
+  /** Empty message */
+  emptyMessage?: string;
+  /** Full screen mode */
+  fullScreen?: boolean;
+}
+
+/**
+ * Standard async component pattern
+ * Handles loading, error, empty, and success states
+ *
+ * @example
+ * <AsyncComponent
+ *   isLoading={loading}
+ *   error={error}
+ *   data={courses}
+ *   onRetry={refetch}
+ * >
+ *   {(courses) => <CourseList courses={courses} />}
+ * </AsyncComponent>
+ */
+export function AsyncComponent<T>({
+  isLoading,
+  error,
+  data,
+  children,
+  LoadingComponent,
+  ErrorComponent,
+  EmptyComponent,
+  onRetry,
+  loadingMessage = 'Loading...',
+  errorMessage = 'Failed to load data',
+  emptyMessage = 'No data available',
+  fullScreen = false,
+}: AsyncComponentProps<T>): JSX.Element {
+  // Loading state
+  if (isLoading) {
+    if (LoadingComponent) {
+      return <LoadingComponent />;
+    }
+    return <LoadingState message={loadingMessage} fullScreen={fullScreen} />;
+  }
+
+  // Error state
+  if (error) {
+    if (ErrorComponent) {
+      return <ErrorComponent error={error} onRetry={onRetry} />;
+    }
+    return (
+      <ErrorState
+        message={errorMessage}
+        error={error}
+        onRetry={onRetry}
+        fullScreen={fullScreen}
+      />
+    );
+  }
+
+  // Empty state
+  if (!data || (Array.isArray(data) && data.length === 0)) {
+    if (EmptyComponent) {
+      return <EmptyComponent />;
+    }
+    return <EmptyState message={emptyMessage} fullScreen={fullScreen} />;
+  }
+
+  // Success state - render children with data
+  return <>{children(data)}</>;
+}
diff --git a/shared/lib/error-handler.ts b/shared/lib/error-handler.ts
new file mode 100644
index 00000000..41d35286
--- /dev/null
+++ b/shared/lib/error-handler.ts
@@ -0,0 +1,373 @@
+// ========================================
+// Error Handler & User-Friendly Messages
+// ========================================
+// Convert blockchain errors to human-readable messages
+
+import type { ApiPromise } from '@polkadot/api';
+import type { DispatchError } from '@polkadot/types/interfaces';
+
+// ========================================
+// ERROR MESSAGE MAPPINGS
+// ========================================
+
+interface ErrorMessage {
+  en: string;
+  kmr: string; // Kurmanji
+}
+
+/**
+ * User-friendly error messages for common blockchain errors
+ * Key format: "palletName.errorName"
+ */
+const ERROR_MESSAGES: Record<string, ErrorMessage> = {
+  // Staking errors
+  'staking.InsufficientBond': {
+    en: 'Bond amount too small. Please check minimum staking requirement.',
+    kmr: 'Mîqdara bond zêde piçûk e. Ji kerema xwe mîqdara kêmtirîn kontrol bike.',
+  },
+  'staking.AlreadyBonded': {
+    en: 'You have already bonded tokens. Use "Bond More" to add additional stake.',
+    kmr: 'We berê token bond kirine. Ji bo zêdekirin "Bond More" bikar bîne.',
+  },
+  'staking.NotStash': {
+    en: 'This account is not a stash account. Please use your staking controller.',
+    kmr: 'Ev account stash nîne. Ji kerema xwe controller bikar bîne.',
+  },
+  'staking.NoMoreChunks': {
+    en: 'Too many unbonding chunks. Please wait for previous unbondings to complete.',
+    kmr: 'Zêde chunk unbonding hene. Ji kerema xwe li çavkaniyên berê bisekine.',
+  },
+
+  // Identity KYC errors
+  'identityKyc.AlreadyApplied': {
+    en: 'You already have a pending citizenship application. Please wait for approval.',
+    kmr: 'We berê serlêdana welatîtiyê heye. Ji kerema xwe li pejirandina bisekine.',
+  },
+  'identityKyc.AlreadyApproved': {
+    en: 'Your citizenship application is already approved!',
+    kmr: 'Serlêdana welatîtiya we berê hatiye pejirandin!',
+  },
+  'identityKyc.NotApproved': {
+    en: 'Your KYC is not approved yet. Please complete citizenship application first.',
+    kmr: 'KYC-ya we hîn nehatiye pejirandin. Pêşî serlêdana welatîtiyê temam bike.',
+  },
+  'identityKyc.IdentityNotSet': {
+    en: 'Please set your identity information first.',
+    kmr: 'Ji kerema xwe pêşî agahdariya nasnameya xwe saz bike.',
+  },
+
+  // Tiki errors
+  'tiki.RoleAlreadyAssigned': {
+    en: 'This role is already assigned to the user.',
+    kmr: 'Ev rol berê ji bikarhêner re hatiye veqetandin.',
+  },
+  'tiki.UnauthorizedRoleAssignment': {
+    en: 'You do not have permission to assign this role.',
+    kmr: 'We destûra veqetandina vê rolê nîne.',
+  },
+  'tiki.RoleNotFound': {
+    en: 'The specified role does not exist.',
+    kmr: 'Rola diyarkirî tune ye.',
+  },
+
+  // ValidatorPool errors
+  'validatorPool.AlreadyInPool': {
+    en: 'You are already registered in the validator pool.',
+    kmr: 'We berê di pool-a validator de tomar bûyî.',
+  },
+  'validatorPool.NotInPool': {
+    en: 'You are not registered in the validator pool.',
+    kmr: 'We di pool-a validator de tomar nebûyî.',
+  },
+  'validatorPool.InsufficientStake': {
+    en: 'Insufficient stake for validator pool. Please increase your stake.',
+    kmr: 'Stake ji bo pool-a validator kêm e. Ji kerema xwe stake-ya xwe zêde bike.',
+  },
+
+  // DEX/AssetConversion errors
+  'assetConversion.PoolNotFound': {
+    en: 'Liquidity pool not found for this token pair.',
+    kmr: 'Pool-a liquidity ji bo vê cuda-token nehat dîtin.',
+  },
+  'assetConversion.InsufficientLiquidity': {
+    en: 'Insufficient liquidity in pool. Try a smaller amount.',
+    kmr: 'Liquidity-ya pool-ê kêm e. Mîqdareke piçûktir biceribîne.',
+  },
+  'assetConversion.SlippageTooHigh': {
+    en: 'Price impact too high. Increase slippage tolerance or reduce amount.',
+    kmr: 'Bandora bihayê zêde mezin e. Toleransa slippage zêde bike an mîqdarê kêm bike.',
+  },
+  'assetConversion.AmountTooSmall': {
+    en: 'Swap amount too small. Minimum swap amount not met.',
+    kmr: 'Mîqdara swap zêde piçûk e. Mîqdara kêmtirîn nehatiye gihîştin.',
+  },
+
+  // Balance/Asset errors
+  'balances.InsufficientBalance': {
+    en: 'Insufficient balance. You do not have enough tokens for this transaction.',
+    kmr: 'Balance-ya we kêm e. Ji bo vê transaction token-ên we têr nînin.',
+  },
+  'balances.ExistentialDeposit': {
+    en: 'Amount is below existential deposit. Account would be reaped.',
+    kmr: 'Mîqdar ji existential deposit kêmtir e. Account dê were jêbirin.',
+  },
+  'assets.BalanceLow': {
+    en: 'Asset balance too low for this operation.',
+    kmr: 'Balance-ya asset-ê ji bo vê operation zêde kêm e.',
+  },
+  'assets.NoPermission': {
+    en: 'You do not have permission to perform this operation on this asset.',
+    kmr: 'We destûra vê operation-ê li ser vê asset-ê nîne.',
+  },
+
+  // Governance errors
+  'referenda.NotOngoing': {
+    en: 'This referendum is not currently active.',
+    kmr: 'Ev referendum niha ne çalak e.',
+  },
+  'referenda.AlreadyVoted': {
+    en: 'You have already voted on this referendum.',
+    kmr: 'We berê li ser vê referendum-ê deng da.',
+  },
+  'convictionVoting.NotVoter': {
+    en: 'You are not eligible to vote. Citizenship required.',
+    kmr: 'We mafê dengdanê nîne. Welatîtî pêwîst e.',
+  },
+
+  // Treasury errors
+  'treasury.InsufficientProposersBalance': {
+    en: 'Insufficient balance to submit treasury proposal. Bond required.',
+    kmr: 'Ji bo pêşniyara treasury-yê balance kêm e. Bond pêwîst e.',
+  },
+
+  // System/General errors
+  'system.CallFiltered': {
+    en: 'This action is not permitted by the system filters.',
+    kmr: 'Ev çalakî ji hêla fîltireyên sîstemê ve nayê destûrdan.',
+  },
+  'BadOrigin': {
+    en: 'Unauthorized: You do not have permission for this action.',
+    kmr: 'Destûrnîn: We destûra vê çalakiyê nîne.',
+  },
+  'Module': {
+    en: 'A blockchain module error occurred. Please try again.',
+    kmr: 'Xeletiya module-ya blockchain-ê qewimî. Ji kerema xwe dîsa biceribîne.',
+  },
+};
+
+// ========================================
+// ERROR EXTRACTION & FORMATTING
+// ========================================
+
+/**
+ * Extract error information from DispatchError
+ */
+export function extractDispatchError(
+  api: ApiPromise,
+  dispatchError: DispatchError
+): {
+  section: string;
+  name: string;
+  docs: string;
+  raw: string;
+} {
+  if (dispatchError.isModule) {
+    const decoded = api.registry.findMetaError(dispatchError.asModule);
+    return {
+      section: decoded.section,
+      name: decoded.name,
+      docs: decoded.docs.join(' ').trim(),
+      raw: `${decoded.section}.${decoded.name}`,
+    };
+  } else {
+    return {
+      section: 'Unknown',
+      name: dispatchError.type,
+      docs: dispatchError.toString(),
+      raw: dispatchError.toString(),
+    };
+  }
+}
+
+/**
+ * Get user-friendly error message
+ * Falls back to blockchain docs if no custom message exists
+ */
+export function getUserFriendlyError(
+  api: ApiPromise,
+  dispatchError: DispatchError,
+  language: 'en' | 'kmr' = 'en'
+): string {
+  const errorInfo = extractDispatchError(api, dispatchError);
+  const errorKey = errorInfo.raw;
+
+  // Check if we have a custom message
+  const customMessage = ERROR_MESSAGES[errorKey];
+  if (customMessage) {
+    return customMessage[language];
+  }
+
+  // Fallback to blockchain documentation
+  if (errorInfo.docs && errorInfo.docs.length > 0) {
+    return errorInfo.docs;
+  }
+
+  // Final fallback
+  return `Transaction failed: ${errorInfo.section}.${errorInfo.name}`;
+}
+
+// ========================================
+// TOAST HELPER
+// ========================================
+
+export interface ToastFunction {
+  (options: {
+    title: string;
+    description: string;
+    variant?: 'default' | 'destructive';
+  }): void;
+}
+
+/**
+ * Handle blockchain error with toast notification
+ * Automatically extracts user-friendly message
+ */
+export function handleBlockchainError(
+  error: any,
+  api: ApiPromise | null,
+  toast: ToastFunction,
+  language: 'en' | 'kmr' = 'en'
+): void {
+  console.error('Blockchain error:', error);
+
+  // If it's a dispatch error from transaction callback
+  if (error?.isModule !== undefined && api) {
+    const userMessage = getUserFriendlyError(api, error, language);
+    toast({
+      title: language === 'en' ? 'Transaction Failed' : 'Transaction Têk Çû',
+      description: userMessage,
+      variant: 'destructive',
+    });
+    return;
+  }
+
+  // If it's a standard error object
+  if (error?.message) {
+    toast({
+      title: language === 'en' ? 'Error' : 'Xeletî',
+      description: error.message,
+      variant: 'destructive',
+    });
+    return;
+  }
+
+  // If it's a string
+  if (typeof error === 'string') {
+    toast({
+      title: language === 'en' ? 'Error' : 'Xeletî',
+      description: error,
+      variant: 'destructive',
+    });
+    return;
+  }
+
+  // Generic fallback
+  toast({
+    title: language === 'en' ? 'Error' : 'Xeletî',
+    description:
+      language === 'en'
+        ? 'An unexpected error occurred. Please try again.'
+        : 'Xeletîyek nediyar qewimî. Ji kerema xwe dîsa biceribîne.',
+    variant: 'destructive',
+  });
+}
+
+// ========================================
+// SUCCESS MESSAGES
+// ========================================
+
+export interface SuccessMessage {
+  en: string;
+  kmr: string;
+}
+
+export const SUCCESS_MESSAGES: Record<string, SuccessMessage> = {
+  // Staking
+  'staking.bonded': {
+    en: 'Successfully staked {{amount}} HEZ. Rewards will start in the next era.',
+    kmr: '{{amount}} HEZ bi serkeftî stake kirin. Xelat di era pêşîn de dest pê dike.',
+  },
+  'staking.unbonded': {
+    en: 'Unbonded {{amount}} HEZ. Withdrawal available in {{days}} days.',
+    kmr: '{{amount}} HEZ unbond kirin. Di {{days}} rojan de derbasdarî dibe.',
+  },
+  'staking.nominated': {
+    en: 'Successfully nominated {{count}} validators.',
+    kmr: 'Bi serkeftî {{count}} validator nomînekirin.',
+  },
+  'staking.scoreStarted': {
+    en: 'Staking score tracking started! Your score will accumulate over time.',
+    kmr: 'Şopa staking dest pê kir! Xala we dê bi demê re kom bibe.',
+  },
+
+  // Citizenship
+  'citizenship.applied': {
+    en: 'Citizenship application submitted successfully! We will review your application.',
+    kmr: 'Serlêdana welatîtiyê bi serkeftî hate şandin! Em ê serlêdana we binirxînin.',
+  },
+
+  // Governance
+  'governance.voted': {
+    en: 'Your vote has been recorded successfully!',
+    kmr: 'Deng-a we bi serkeftî hate tomarkirin!',
+  },
+  'governance.proposed': {
+    en: 'Proposal submitted successfully! Voting will begin soon.',
+    kmr: 'Pêşniyar bi serkeftî hate şandin! Dengdan hêdî dest pê dike.',
+  },
+
+  // DEX
+  'dex.swapped': {
+    en: 'Successfully swapped {{from}} {{fromToken}} for {{to}} {{toToken}}',
+    kmr: 'Bi serkeftî {{from}} {{fromToken}} bo {{to}} {{toToken}} guhertin',
+  },
+  'dex.liquidityAdded': {
+    en: 'Successfully added liquidity to the pool!',
+    kmr: 'Bi serkeftî liquidity li pool-ê zêde kir!',
+  },
+  'dex.liquidityRemoved': {
+    en: 'Successfully removed liquidity from the pool!',
+    kmr: 'Bi serkeftî liquidity ji pool-ê derxist!',
+  },
+};
+
+/**
+ * Handle successful blockchain transaction
+ */
+export function handleBlockchainSuccess(
+  messageKey: string,
+  toast: ToastFunction,
+  params: Record<string, string | number> = {},
+  language: 'en' | 'kmr' = 'en'
+): void {
+  const template = SUCCESS_MESSAGES[messageKey];
+
+  if (!template) {
+    toast({
+      title: language === 'en' ? 'Success' : 'Serkeft',
+      description: language === 'en' ? 'Transaction successful!' : 'Transaction serkeftî!',
+    });
+    return;
+  }
+
+  // Replace template variables like {{amount}}
+  let message = template[language];
+  Object.entries(params).forEach(([key, value]) => {
+    message = message.replace(new RegExp(`{{${key}}}`, 'g'), String(value));
+  });
+
+  toast({
+    title: language === 'en' ? 'Success' : 'Serkeft',
+    description: message,
+  });
+}
diff --git a/web/src/App.tsx b/web/src/App.tsx
index c53bb711..884996c1 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -19,61 +19,64 @@ import { AuthProvider } from '@/contexts/AuthContext';
 import { ProtectedRoute } from '@/components/ProtectedRoute';
 import NotFound from '@/pages/NotFound';
 import { Toaster } from '@/components/ui/toaster';
+import { ErrorBoundary } from '@/components/ErrorBoundary';
 import './App.css';
 import './i18n/config';
 
 function App() {
   return (
     <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
-      <AuthProvider>
-        <AppProvider>
-          <PolkadotProvider endpoint="ws://127.0.0.1:9944">
-            <WalletProvider>
-              <WebSocketProvider>
-                <IdentityProvider>
-                  <Router>
-                  <Routes>
-                    <Route path="/login" element={<Login />} />
+      <ErrorBoundary>
+        <AuthProvider>
+          <AppProvider>
+            <PolkadotProvider endpoint="ws://127.0.0.1:9944">
+              <WalletProvider>
+                <WebSocketProvider>
+                  <IdentityProvider>
+                    <Router>
+                    <Routes>
+                      <Route path="/login" element={<Login />} />
 
-                    <Route path="/email-verification" element={<EmailVerification />} />
-                    <Route path="/reset-password" element={<PasswordReset />} />
-                    <Route path="/" element={<Index />} />
-                    <Route path="/be-citizen" element={<BeCitizen />} />
-                    <Route path="/dashboard" element={
-                      <ProtectedRoute>
-                        <Dashboard />
-                      </ProtectedRoute>
-                    } />
-                    <Route path="/profile/settings" element={
-                      <ProtectedRoute>
-                        <ProfileSettings />
-                      </ProtectedRoute>
-                    } />
-                    <Route path="/admin" element={
-                      <ProtectedRoute requireAdmin>
-                        <AdminPanel />
-                      </ProtectedRoute>
-                    } />
-                    <Route path="/wallet" element={
-                      <ProtectedRoute>
-                        <WalletDashboard />
-                      </ProtectedRoute>
-                    } />
-                    <Route path="/reserves" element={
-                      <ProtectedRoute>
-                        <ReservesDashboardPage />
-                      </ProtectedRoute>
-                    } />
-                    <Route path="*" element={<NotFound />} />
-                  </Routes>
-                  </Router>
-                </IdentityProvider>
-              </WebSocketProvider>
-            </WalletProvider>
-          </PolkadotProvider>
-        </AppProvider>
-      </AuthProvider>
-      <Toaster />
+                      <Route path="/email-verification" element={<EmailVerification />} />
+                      <Route path="/reset-password" element={<PasswordReset />} />
+                      <Route path="/" element={<Index />} />
+                      <Route path="/be-citizen" element={<BeCitizen />} />
+                      <Route path="/dashboard" element={
+                        <ProtectedRoute>
+                          <Dashboard />
+                        </ProtectedRoute>
+                      } />
+                      <Route path="/profile/settings" element={
+                        <ProtectedRoute>
+                          <ProfileSettings />
+                        </ProtectedRoute>
+                      } />
+                      <Route path="/admin" element={
+                        <ProtectedRoute requireAdmin>
+                          <AdminPanel />
+                        </ProtectedRoute>
+                      } />
+                      <Route path="/wallet" element={
+                        <ProtectedRoute>
+                          <WalletDashboard />
+                        </ProtectedRoute>
+                      } />
+                      <Route path="/reserves" element={
+                        <ProtectedRoute>
+                          <ReservesDashboardPage />
+                        </ProtectedRoute>
+                      } />
+                      <Route path="*" element={<NotFound />} />
+                    </Routes>
+                    </Router>
+                  </IdentityProvider>
+                </WebSocketProvider>
+              </WalletProvider>
+            </PolkadotProvider>
+          </AppProvider>
+        </AuthProvider>
+        <Toaster />
+      </ErrorBoundary>
     </ThemeProvider>
   );
 }
diff --git a/web/src/components/ErrorBoundary.tsx b/web/src/components/ErrorBoundary.tsx
new file mode 100644
index 00000000..383e6d33
--- /dev/null
+++ b/web/src/components/ErrorBoundary.tsx
@@ -0,0 +1,243 @@
+// ========================================
+// Error Boundary Component
+// ========================================
+// Catches React errors and displays fallback UI
+
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+import { Card, CardContent } from '@/components/ui/card';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import { AlertTriangle, RefreshCw, Home } from 'lucide-react';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+  onError?: (error: Error, errorInfo: ErrorInfo) => void;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+  errorInfo: ErrorInfo | null;
+}
+
+/**
+ * Global Error Boundary
+ * Catches unhandled errors in React component tree
+ *
+ * @example
+ * <ErrorBoundary>
+ *   <App />
+ * </ErrorBoundary>
+ */
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null,
+    };
+  }
+
+  static getDerivedStateFromError(error: Error): Partial<State> {
+    // Update state so next render shows fallback UI
+    return {
+      hasError: true,
+      error,
+    };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+    // Log error to console
+    console.error('ErrorBoundary caught an error:', error, errorInfo);
+
+    // Update state with error details
+    this.setState({
+      error,
+      errorInfo,
+    });
+
+    // Call custom error handler if provided
+    if (this.props.onError) {
+      this.props.onError(error, errorInfo);
+    }
+
+    // In production, you might want to log to an error reporting service
+    // Example: Sentry.captureException(error);
+  }
+
+  handleReset = (): void => {
+    this.setState({
+      hasError: false,
+      error: null,
+      errorInfo: null,
+    });
+  };
+
+  handleReload = (): void => {
+    window.location.reload();
+  };
+
+  handleGoHome = (): void => {
+    window.location.href = '/';
+  };
+
+  render(): ReactNode {
+    if (this.state.hasError) {
+      // Use custom fallback if provided
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      // Default error UI
+      return (
+        <div className="min-h-screen bg-gray-950 flex items-center justify-center p-4">
+          <Card className="bg-gray-900 border-gray-800 max-w-2xl w-full">
+            <CardContent className="p-8">
+              <Alert className="bg-red-900/20 border-red-500 mb-6">
+                <AlertTriangle className="h-6 w-6 text-red-400" />
+                <AlertDescription className="text-gray-300">
+                  <h2 className="text-xl font-bold mb-2 text-white">Something Went Wrong</h2>
+                  <p className="mb-4">
+                    An unexpected error occurred. We apologize for the inconvenience.
+                  </p>
+                  {this.state.error && (
+                    <details className="mt-4 p-4 bg-gray-950 rounded border border-gray-700">
+                      <summary className="cursor-pointer text-sm font-semibold text-gray-400 hover:text-gray-300">
+                        Error Details (for developers)
+                      </summary>
+                      <div className="mt-3 text-xs font-mono space-y-2">
+                        <div>
+                          <strong className="text-red-400">Error:</strong>
+                          <pre className="mt-1 text-gray-400 whitespace-pre-wrap">
+                            {this.state.error.toString()}
+                          </pre>
+                        </div>
+                        {this.state.errorInfo && (
+                          <div>
+                            <strong className="text-red-400">Component Stack:</strong>
+                            <pre className="mt-1 text-gray-400 whitespace-pre-wrap">
+                              {this.state.errorInfo.componentStack}
+                            </pre>
+                          </div>
+                        )}
+                      </div>
+                    </details>
+                  )}
+                </AlertDescription>
+              </Alert>
+
+              <div className="flex flex-col sm:flex-row gap-3">
+                <Button
+                  onClick={this.handleReset}
+                  className="bg-green-600 hover:bg-green-700 flex items-center gap-2"
+                >
+                  <RefreshCw className="w-4 h-4" />
+                  Try Again
+                </Button>
+                <Button
+                  onClick={this.handleReload}
+                  variant="outline"
+                  className="border-gray-700 hover:bg-gray-800 flex items-center gap-2"
+                >
+                  <RefreshCw className="w-4 h-4" />
+                  Reload Page
+                </Button>
+                <Button
+                  onClick={this.handleGoHome}
+                  variant="outline"
+                  className="border-gray-700 hover:bg-gray-800 flex items-center gap-2"
+                >
+                  <Home className="w-4 h-4" />
+                  Go Home
+                </Button>
+              </div>
+
+              <p className="mt-6 text-sm text-gray-500">
+                If this problem persists, please contact support at{' '}
+                <a
+                  href="mailto:info@pezkuwichain.io"
+                  className="text-green-400 hover:underline"
+                >
+                  info@pezkuwichain.io
+                </a>
+              </p>
+            </CardContent>
+          </Card>
+        </div>
+      );
+    }
+
+    // No error, render children normally
+    return this.props.children;
+  }
+}
+
+// ========================================
+// ROUTE-LEVEL ERROR BOUNDARY
+// ========================================
+
+/**
+ * Smaller error boundary for individual routes
+ * Less intrusive, doesn't take over the whole screen
+ */
+export const RouteErrorBoundary: React.FC<{
+  children: ReactNode;
+  routeName?: string;
+}> = ({ children, routeName = 'this page' }) => {
+  const [hasError, setHasError] = React.useState(false);
+
+  const handleReset = () => {
+    setHasError(false);
+  };
+
+  if (hasError) {
+    return (
+      <div className="p-8">
+        <Alert className="bg-red-900/20 border-red-500">
+          <AlertTriangle className="h-5 w-5 text-red-400" />
+          <AlertDescription className="text-gray-300">
+            <strong className="block mb-2">Error loading {routeName}</strong>
+            An error occurred while rendering this component.
+            <div className="mt-4">
+              <Button onClick={handleReset} size="sm" className="bg-green-600 hover:bg-green-700">
+                <RefreshCw className="w-4 h-4 mr-2" />
+                Try Again
+              </Button>
+            </div>
+          </AlertDescription>
+        </Alert>
+      </div>
+    );
+  }
+
+  return (
+    <ErrorBoundary fallback={<RouteErrorFallback routeName={routeName} onReset={handleReset} />}>
+      {children}
+    </ErrorBoundary>
+  );
+};
+
+const RouteErrorFallback: React.FC<{ routeName: string; onReset: () => void }> = ({
+  routeName,
+  onReset,
+}) => {
+  return (
+    <div className="p-8">
+      <Alert className="bg-red-900/20 border-red-500">
+        <AlertTriangle className="h-5 w-5 text-red-400" />
+        <AlertDescription className="text-gray-300">
+          <strong className="block mb-2">Error loading {routeName}</strong>
+          An unexpected error occurred.
+          <div className="mt-4">
+            <Button onClick={onReset} size="sm" className="bg-green-600 hover:bg-green-700">
+              <RefreshCw className="w-4 h-4 mr-2" />
+              Try Again
+            </Button>
+          </div>
+        </AlertDescription>
+      </Alert>
+    </div>
+  );
+};