diff --git a/apps/frontend/app/escrow/[id]/page.tsx b/apps/frontend/app/escrow/[id]/page.tsx
index 9f8082e8..18280c03 100644
--- a/apps/frontend/app/escrow/[id]/page.tsx
+++ b/apps/frontend/app/escrow/[id]/page.tsx
@@ -5,6 +5,7 @@ import { useParams } from "next/navigation";
 import Link from "next/link";
 import { useEscrow } from "@/hooks/useEscrow";
 import { useWallet } from "@/hooks/useWallet";
+import { useEscrowEvents } from "@/hooks/useEscrowEvents";
 import EscrowHeader from "@/components/escrow/detail/EscrowHeader";
 import PartiesSection from "@/components/escrow/detail/PartiesSection";
 import TermsSection from "@/components/escrow/detail/TermsSection";
@@ -28,6 +29,37 @@ const EscrowDetailPage = () => {
   const [disputeOpen, setDisputeOpen] = useState(false);
   const [resolutionOpen, setResolutionOpen] = useState(false);
   const [dispute, setDispute] = useState<any>(null);
+  const { status: escrowSocketStatus, onEscrowEvent } = useEscrowEvents(id as string);
+
+  useEffect(() => {
+    const cleanupFunctions: Array<() => void> = [];
+
+    cleanupFunctions.push(
+      onEscrowEvent('escrow:status_changed', () => refetch()),
+    );
+    cleanupFunctions.push(
+      onEscrowEvent('escrow:funded', () => refetch()),
+    );
+    cleanupFunctions.push(
+      onEscrowEvent('escrow:completed', () => refetch()),
+    );
+    cleanupFunctions.push(
+      onEscrowEvent('escrow:dispute_filed', () => refetch()),
+    );
+    cleanupFunctions.push(
+      onEscrowEvent('escrow:dispute_resolved', () => refetch()),
+    );
+
+    return () => {
+      cleanupFunctions.forEach((cleanup) => cleanup());
+    };
+  }, [id, onEscrowEvent, refetch]);
+
+  useEffect(() => {
+    if (escrowSocketStatus === 'connected') {
+      refetch();
+    }
+  }, [escrowSocketStatus, refetch]);
 
   useEffect(() => {
     if (escrow && publicKey) {
diff --git a/apps/frontend/components/Providers.tsx b/apps/frontend/components/Providers.tsx
index 823b5375..fc54d3db 100644
--- a/apps/frontend/components/Providers.tsx
+++ b/apps/frontend/components/Providers.tsx
@@ -4,6 +4,7 @@ import React, { useState } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ToastProvider } from '@/app/contexts/ToastProvider';
 import { ThemeProvider } from '@/components/ThemeProvider';
+import { WebSocketProvider } from '@/providers/WebSocketProvider';
 import { ErrorBoundary } from '@/components/ErrorBoundary';
 
 export default function Providers({ children }: { children: React.ReactNode }) {
@@ -20,6 +21,9 @@ export default function Providers({ children }: { children: React.ReactNode }) {
     <QueryClientProvider client={queryClient}>
       <ThemeProvider>
         <ToastProvider>
+          <WebSocketProvider>
+            {children}
+          </WebSocketProvider>
           <ErrorBoundary>
             {children}
           </ErrorBoundary>
diff --git a/apps/frontend/components/common/NotificationBell.tsx b/apps/frontend/components/common/NotificationBell.tsx
index c8c9da62..6f80388e 100644
--- a/apps/frontend/components/common/NotificationBell.tsx
+++ b/apps/frontend/components/common/NotificationBell.tsx
@@ -12,7 +12,7 @@ interface NotificationBellProps {
 
 const NotificationBell: React.FC<NotificationBellProps> = ({ className = '' }) => {
   const [isOpen, setIsOpen] = useState(false);
-  const { notifications, unreadCount, isLoading, markAsRead, markAllAsRead } = useNotifications();
+  const { notifications, unreadCount, isLoading, connectionStatus, markAsRead, markAllAsRead } = useNotifications();
 
   // Group notifications by date
   const groupedNotifications = notifications.reduce((acc, notification) => {
@@ -99,8 +99,24 @@ const NotificationBell: React.FC<NotificationBellProps> = ({ className = '' }) =
         onClick={() => setIsOpen(!isOpen)}
         className="relative p-2 text-gray-300 hover:text-white transition-colors"
         aria-label="Notifications"
+        title={
+          connectionStatus === 'connected'
+            ? 'Realtime updates active'
+            : connectionStatus === 'reconnecting'
+            ? 'Realtime reconnecting'
+            : 'Realtime disconnected'
+        }
       >
         <Bell className="w-6 h-6" />
+        <span
+          className={`absolute -top-1 -right-1 h-3 w-3 rounded-full border border-black transition-colors ${
+            connectionStatus === 'connected'
+              ? 'bg-emerald-400'
+              : connectionStatus === 'reconnecting'
+              ? 'bg-amber-400'
+              : 'bg-red-500'
+          }`}
+        />
         {unreadCount > 0 && (
           <span className="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white transform translate-x-1/4 -translate-y-1/4 bg-red-500 rounded-full">
             {unreadCount > 99 ? '99+' : unreadCount}
@@ -120,9 +136,27 @@ const NotificationBell: React.FC<NotificationBellProps> = ({ className = '' }) =
           {/* Panel */}
           <div className="absolute right-0 mt-2 w-96 max-w-[calc(100vw-2rem)] bg-gray-900 border border-gray-700 rounded-lg shadow-2xl z-50 overflow-hidden">
             {/* Header */}
-            <div className="flex items-center justify-between px-4 py-3 border-b border-gray-700">
-              <h3 className="text-lg font-semibold text-white">Notifications</h3>
-              <div className="flex items-center gap-2">
+            <div className="flex flex-col gap-2 px-4 py-3 border-b border-gray-700">
+              <div className="flex items-center justify-between gap-3">
+                <h3 className="text-lg font-semibold text-white">Notifications</h3>
+                <div className="inline-flex items-center gap-2 rounded-full bg-slate-950/80 px-3 py-1 text-xs uppercase tracking-[0.18em] text-gray-400">
+                  <span
+                    className={`h-2.5 w-2.5 rounded-full ${
+                      connectionStatus === 'connected'
+                        ? 'bg-emerald-400'
+                        : connectionStatus === 'reconnecting'
+                        ? 'bg-amber-400'
+                        : 'bg-red-500'
+                    }`}
+                  />
+                  {connectionStatus === 'connected'
+                    ? 'Live'
+                    : connectionStatus === 'reconnecting'
+                    ? 'Reconnecting'
+                    : 'Disconnected'}
+                </div>
+              </div>
+              <div className="flex items-center justify-between gap-2">
                 {unreadCount > 0 && (
                   <button
                     onClick={handleMarkAllAsRead}
diff --git a/apps/frontend/hooks/useEscrowEvents.ts b/apps/frontend/hooks/useEscrowEvents.ts
new file mode 100644
index 00000000..eaf5bafa
--- /dev/null
+++ b/apps/frontend/hooks/useEscrowEvents.ts
@@ -0,0 +1,51 @@
+import { useCallback, useEffect } from 'react';
+import { useWebSocket } from '@/providers/WebSocketProvider';
+import { EscrowSocketEvent, WebSocketStatus } from '@/lib/websocket';
+
+export interface UseEscrowEventsReturn {
+  status: WebSocketStatus;
+  joinEscrowRoom: (escrowId: string) => void;
+  leaveEscrowRoom: (escrowId: string) => void;
+  onEscrowEvent: (
+    event: EscrowSocketEvent,
+    handler: (payload: Record<string, unknown>) => void,
+  ) => () => void;
+}
+
+export const useEscrowEvents = (escrowId: string | null): UseEscrowEventsReturn => {
+  const {
+    status,
+    joinEscrowRoom,
+    leaveEscrowRoom,
+    onEscrowEvent: rawOnEscrowEvent,
+    offEscrowEvent,
+  } = useWebSocket();
+
+  useEffect(() => {
+    if (!escrowId) {
+      return;
+    }
+
+    joinEscrowRoom(escrowId);
+    return () => {
+      leaveEscrowRoom(escrowId);
+    };
+  }, [escrowId, joinEscrowRoom, leaveEscrowRoom]);
+
+  const onEscrowEvent = useCallback(
+    (event: EscrowSocketEvent, handler: (payload: Record<string, unknown>) => void) => {
+      rawOnEscrowEvent(event, handler);
+      return () => {
+        offEscrowEvent(event, handler);
+      };
+    },
+    [offEscrowEvent, rawOnEscrowEvent],
+  );
+
+  return {
+    status,
+    joinEscrowRoom,
+    leaveEscrowRoom,
+    onEscrowEvent,
+  };
+};
diff --git a/apps/frontend/hooks/useNotifications.ts b/apps/frontend/hooks/useNotifications.ts
index ea7dee55..891f8071 100644
--- a/apps/frontend/hooks/useNotifications.ts
+++ b/apps/frontend/hooks/useNotifications.ts
@@ -1,12 +1,14 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import { notificationService } from '@/services/notification';
 import { Notification } from '@/types/notification';
+import { useWebSocket } from '@/providers/WebSocketProvider';
 
 interface UseNotificationsReturn {
   notifications: Notification[];
   unreadCount: number;
   isLoading: boolean;
   error: Error | null;
+  connectionStatus: 'connected' | 'reconnecting' | 'disconnected' | 'error';
   markAsRead: (notificationId?: string) => Promise<void>;
   markAllAsRead: () => Promise<void>;
   refetch: () => Promise<void>;
@@ -17,6 +19,12 @@ export const useNotifications = (): UseNotificationsReturn => {
   const [unreadCount, setUnreadCount] = useState<number>(0);
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [error, setError] = useState<Error | null>(null);
+  const notificationsRef = useRef<Notification[]>([]);
+  const { onNotification, offNotification, status: connectionStatus } = useWebSocket();
+
+  useEffect(() => {
+    notificationsRef.current = notifications;
+  }, [notifications]);
 
   const fetchNotifications = useCallback(async () => {
     try {
@@ -56,17 +64,41 @@ export const useNotifications = (): UseNotificationsReturn => {
   useEffect(() => {
     fetchNotifications();
 
-    // Poll for new notifications every 10 seconds
-    const interval = setInterval(fetchNotifications, 10000);
+    const handleNotification = (payload: Notification) => {
+      setNotifications((current) => {
+        const exists = current.some((notification) => notification.id === payload.id);
+        if (exists) {
+          return current.map((notification) =>
+            notification.id === payload.id ? payload : notification,
+          );
+        }
+        return [payload, ...current];
+      });
+
+      setUnreadCount((current) => {
+        const alreadyExists = notificationsRef.current.some(
+          (notification) => notification.id === payload.id,
+        );
+        if (alreadyExists) {
+          return current;
+        }
+        return current + (payload.readAt ? 0 : 1);
+      });
+    };
+
+    onNotification(handleNotification);
 
-    return () => clearInterval(interval);
-  }, [fetchNotifications]);
+    return () => {
+      offNotification(handleNotification);
+    };
+  }, [fetchNotifications, onNotification, offNotification]);
 
   return {
     notifications,
     unreadCount,
     isLoading,
     error,
+    connectionStatus,
     markAsRead,
     markAllAsRead,
     refetch: fetchNotifications,
diff --git a/apps/frontend/lib/websocket.ts b/apps/frontend/lib/websocket.ts
new file mode 100644
index 00000000..6cf35265
--- /dev/null
+++ b/apps/frontend/lib/websocket.ts
@@ -0,0 +1,52 @@
+import { io, Socket } from 'socket.io-client';
+
+export type EscrowSocketEvent =
+  | 'escrow:status_changed'
+  | 'escrow:funded'
+  | 'escrow:completed'
+  | 'escrow:milestone_released'
+  | 'escrow:condition_fulfilled'
+  | 'escrow:condition_confirmed'
+  | 'escrow:dispute_filed'
+  | 'escrow:dispute_resolved'
+  | 'escrow:party_joined'
+  | 'escrow:cancelled';
+
+export type NotificationSocketEvent = 'notification:new';
+
+export type SocketEvent = EscrowSocketEvent | NotificationSocketEvent;
+
+export type WebSocketStatus = 'connected' | 'reconnecting' | 'disconnected' | 'error';
+
+export interface WebSocketEventPayload {
+  [key: string]: unknown;
+}
+
+const AUTH_TOKEN_KEY = 'authToken';
+const DEFAULT_API_URL = 'http://localhost:3000';
+const ESCROW_NAMESPACE = '/escrow';
+
+export const getWebSocketUrl = (): string => {
+  const baseUrl = process.env.NEXT_PUBLIC_API_URL || DEFAULT_API_URL;
+  return `${baseUrl.replace(/\/$/, '')}${ESCROW_NAMESPACE}`;
+};
+
+export const createEscrowWebSocket = (token: string): Socket => {
+  return io(getWebSocketUrl(), {
+    auth: { token },
+    path: '/socket.io',
+    transports: ['websocket'],
+    autoConnect: false,
+    reconnection: true,
+    reconnectionAttempts: Infinity,
+    reconnectionDelay: 1000,
+    reconnectionDelayMax: 10000,
+  });
+};
+
+export const getStoredAuthToken = (): string | null => {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+  return window.localStorage.getItem(AUTH_TOKEN_KEY);
+};
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 76a8e73a..437c3534 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -28,6 +28,7 @@
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-hook-form": "^7.71.1",
+    "socket.io-client": "^4.7.2",
     "stellar-sdk": "^13.3.0",
     "tailwind-merge": "^3.4.0",
     "zod": "^4.3.6"
diff --git a/apps/frontend/providers/WebSocketProvider.tsx b/apps/frontend/providers/WebSocketProvider.tsx
new file mode 100644
index 00000000..6593fdc6
--- /dev/null
+++ b/apps/frontend/providers/WebSocketProvider.tsx
@@ -0,0 +1,299 @@
+'use client';
+
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import type { Socket } from 'socket.io-client';
+import {
+  createEscrowWebSocket,
+  EscrowSocketEvent,
+  WebSocketStatus,
+  getStoredAuthToken,
+} from '@/lib/websocket';
+
+interface WebSocketContextValue {
+  socket: Socket | null;
+  status: WebSocketStatus;
+  connect: () => void;
+  disconnect: () => void;
+  joinEscrowRoom: (escrowId: string) => void;
+  leaveEscrowRoom: (escrowId: string) => void;
+  onEscrowEvent: (
+    event: EscrowSocketEvent,
+    handler: (payload: Record<string, unknown>) => void,
+  ) => void;
+  offEscrowEvent: (
+    event: EscrowSocketEvent,
+    handler?: (payload: Record<string, unknown>) => void,
+  ) => void;
+  onNotification: (
+    handler: (payload: Record<string, unknown>) => void,
+  ) => void;
+  offNotification: (
+    handler?: (payload: Record<string, unknown>) => void,
+  ) => void;
+}
+
+const WebSocketContext = createContext<WebSocketContextValue | null>(null);
+const AUTH_TOKEN_KEY = 'authToken';
+
+export const WebSocketProvider: React.FC<React.PropsWithChildren> = ({
+  children,
+}) => {
+  const [status, setStatus] = useState<WebSocketStatus>('disconnected');
+  const [authToken, setAuthToken] = useState<string | null>(null);
+  const socketRef = useRef<Socket | null>(null);
+  const tokenRef = useRef<string | null>(null);
+  const escrowListenersRef = useRef<
+    Map<EscrowSocketEvent, Set<(payload: Record<string, unknown>) => void>>
+  >(new Map());
+  const notificationListenersRef = useRef<
+    Set<(payload: Record<string, unknown>) => void>
+  >(new Set());
+
+  const attachListeners = useCallback((socket: Socket) => {
+    escrowListenersRef.current.forEach((handlers, event) => {
+      handlers.forEach((handler) => socket.on(event, handler));
+    });
+    notificationListenersRef.current.forEach((handler) =>
+      socket.on('notification:new', handler),
+    );
+  }, []);
+
+  const detachListeners = useCallback((socket: Socket) => {
+    escrowListenersRef.current.forEach((handlers, event) => {
+      handlers.forEach((handler) => socket.off(event, handler));
+    });
+    notificationListenersRef.current.forEach((handler) =>
+      socket.off('notification:new', handler),
+    );
+  }, []);
+
+  const updateStoredToken = useCallback(() => {
+    if (typeof window === 'undefined') return;
+    setAuthToken(window.localStorage.getItem(AUTH_TOKEN_KEY));
+  }, []);
+
+  useEffect(() => {
+    updateStoredToken();
+
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    const handleStorage = (event: StorageEvent) => {
+      if (event.key === AUTH_TOKEN_KEY) {
+        setAuthToken(event.newValue);
+      }
+    };
+
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === 'visible') {
+        updateStoredToken();
+      }
+    };
+
+    window.addEventListener('storage', handleStorage);
+    window.addEventListener('visibilitychange', handleVisibilityChange);
+
+    const pollToken = window.setInterval(() => {
+      const latestToken = window.localStorage.getItem(AUTH_TOKEN_KEY);
+      if (latestToken !== authToken) {
+        setAuthToken(latestToken);
+      }
+    }, 5000);
+
+    return () => {
+      window.removeEventListener('storage', handleStorage);
+      window.removeEventListener('visibilitychange', handleVisibilityChange);
+      window.clearInterval(pollToken);
+    };
+  }, [authToken, updateStoredToken]);
+
+  useEffect(() => {
+    const token = authToken ?? getStoredAuthToken();
+
+    if (!token) {
+      if (socketRef.current) {
+        socketRef.current.disconnect();
+        socketRef.current = null;
+      }
+      setStatus('disconnected');
+      tokenRef.current = null;
+      return;
+    }
+
+    if (tokenRef.current === token && socketRef.current) {
+      return;
+    }
+
+    if (socketRef.current) {
+      socketRef.current.disconnect();
+      socketRef.current = null;
+    }
+
+    tokenRef.current = token;
+    const socket = createEscrowWebSocket(token);
+    socketRef.current = socket;
+
+    const handleConnect = () => setStatus('connected');
+    const handleReconnect = () => setStatus('reconnecting');
+    const handleDisconnect = () => setStatus('disconnected');
+    const handleError = () => setStatus('error');
+
+    attachListeners(socket);
+    socket.on('connect', handleConnect);
+    socket.on('reconnect_attempt', handleReconnect);
+    socket.on('reconnect_error', handleError);
+    socket.on('connect_error', handleError);
+    socket.on('disconnect', handleDisconnect);
+
+    socket.connect();
+
+    return () => {
+      socket.off('connect', handleConnect);
+      socket.off('reconnect_attempt', handleReconnect);
+      socket.off('reconnect_error', handleError);
+      socket.off('connect_error', handleError);
+      socket.off('disconnect', handleDisconnect);
+      socket.disconnect();
+      socketRef.current = null;
+    };
+  }, [authToken]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    const handleOnline = () => {
+      if (socketRef.current && !socketRef.current.connected) {
+        socketRef.current.connect();
+      }
+    };
+
+    window.addEventListener('online', handleOnline);
+
+    return () => {
+      window.removeEventListener('online', handleOnline);
+    };
+  }, []);
+
+  const connect = useCallback(() => {
+    if (socketRef.current && !socketRef.current.connected) {
+      socketRef.current.connect();
+    }
+  }, []);
+
+  const disconnect = useCallback(() => {
+    if (socketRef.current) {
+      socketRef.current.disconnect();
+      socketRef.current = null;
+      setStatus('disconnected');
+      tokenRef.current = null;
+    }
+  }, []);
+
+  const joinEscrowRoom = useCallback((escrowId: string) => {
+    socketRef.current?.emit('joinEscrow', escrowId);
+  }, []);
+
+  const leaveEscrowRoom = useCallback((escrowId: string) => {
+    socketRef.current?.emit('leaveEscrow', escrowId);
+  }, []);
+
+  const onEscrowEvent = useCallback(
+    (
+      event: EscrowSocketEvent,
+      handler: (payload: Record<string, unknown>) => void,
+    ) => {
+      const handlers = escrowListenersRef.current.get(event) ?? new Set();
+      handlers.add(handler);
+      escrowListenersRef.current.set(event, handlers);
+      socketRef.current?.on(event, handler);
+    },
+    [],
+  );
+
+  const offEscrowEvent = useCallback(
+    (
+      event: EscrowSocketEvent,
+      handler?: (payload: Record<string, unknown>) => void,
+    ) => {
+      const handlers = escrowListenersRef.current.get(event);
+      if (!handlers) {
+        return;
+      }
+      if (handler) {
+        handlers.delete(handler);
+        socketRef.current?.off(event, handler);
+      } else {
+        handlers.forEach((listener) => socketRef.current?.off(event, listener));
+        handlers.clear();
+      }
+      if (handlers.size === 0) {
+        escrowListenersRef.current.delete(event);
+      }
+    },
+    [],
+  );
+
+  const onNotification = useCallback(
+    (handler: (payload: Record<string, unknown>) => void) => {
+      notificationListenersRef.current.add(handler);
+      socketRef.current?.on('notification:new', handler);
+    },
+    [],
+  );
+
+  const offNotification = useCallback(
+    (handler?: (payload: Record<string, unknown>) => void) => {
+      if (handler) {
+        notificationListenersRef.current.delete(handler);
+        socketRef.current?.off('notification:new', handler);
+      } else {
+        notificationListenersRef.current.forEach((listener) =>
+          socketRef.current?.off('notification:new', listener),
+        );
+        notificationListenersRef.current.clear();
+      }
+    },
+    [],
+  );
+
+  const value = useMemo(
+    () => ({
+      socket: socketRef.current,
+      status,
+      connect,
+      disconnect,
+      joinEscrowRoom,
+      leaveEscrowRoom,
+      onEscrowEvent,
+      offEscrowEvent,
+      onNotification,
+      offNotification,
+    }),
+    [status, connect, disconnect, joinEscrowRoom, leaveEscrowRoom, onEscrowEvent, offEscrowEvent, onNotification, offNotification],
+  );
+
+  return (
+    <WebSocketContext.Provider value={value}>
+      {children}
+    </WebSocketContext.Provider>
+  );
+};
+
+export const useWebSocket = (): WebSocketContextValue => {
+  const context = useContext(WebSocketContext);
+  if (!context) {
+    throw new Error('useWebSocket must be used within a WebSocketProvider');
+  }
+  return context;
+};