diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 94ffedc2..73047d12 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -3,6 +3,7 @@ import { Routes, Route, NavLink, Navigate, useLocation } from 'react-router-dom'
 import { userSession, authenticate, disconnect } from './utils/stacks';
 import Header from './components/Header';
 import SendTip from './components/SendTip';
+import OfflineBanner from './components/OfflineBanner';
 import { AnimatedHero } from './components/ui/animated-hero';
 import { ToastContainer, useToast } from './components/ui/toast';
 
@@ -59,6 +60,7 @@ function App() {
 
   return (
     <div className="min-h-screen bg-[#F8FAFC] dark:bg-gray-950 transition-colors">
+      <OfflineBanner />
       <Header userData={userData} onAuth={handleAuth} authLoading={authLoading} />
 
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
diff --git a/frontend/src/components/OfflineBanner.jsx b/frontend/src/components/OfflineBanner.jsx
new file mode 100644
index 00000000..9bfced7f
--- /dev/null
+++ b/frontend/src/components/OfflineBanner.jsx
@@ -0,0 +1,18 @@
+import { useOnlineStatus } from '../hooks/useOnlineStatus';
+
+export default function OfflineBanner() {
+    const isOnline = useOnlineStatus();
+
+    if (isOnline) return null;
+
+    return (
+        <div className="fixed top-0 inset-x-0 z-50 bg-red-600 text-white text-center py-2 px-4 text-sm font-medium shadow-lg" role="alert">
+            <div className="flex items-center justify-center gap-2">
+                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18.364 5.636a9 9 0 010 12.728M5.636 5.636a9 9 0 000 12.728M12 9v4m0 4h.01" />
+                </svg>
+                <span>You are offline. Some features may not work until your connection is restored.</span>
+            </div>
+        </div>
+    );
+}
diff --git a/frontend/src/hooks/useOnlineStatus.js b/frontend/src/hooks/useOnlineStatus.js
new file mode 100644
index 00000000..611b76aa
--- /dev/null
+++ b/frontend/src/hooks/useOnlineStatus.js
@@ -0,0 +1,20 @@
+import { useState, useEffect } from 'react';
+
+export function useOnlineStatus() {
+    const [isOnline, setIsOnline] = useState(navigator.onLine);
+
+    useEffect(() => {
+        const handleOnline = () => setIsOnline(true);
+        const handleOffline = () => setIsOnline(false);
+
+        window.addEventListener('online', handleOnline);
+        window.addEventListener('offline', handleOffline);
+
+        return () => {
+            window.removeEventListener('online', handleOnline);
+            window.removeEventListener('offline', handleOffline);
+        };
+    }, []);
+
+    return isOnline;
+}