diff --git a/app/layout-content.tsx b/app/layout-content.tsx
index 1956f0d..a4a37be 100644
--- a/app/layout-content.tsx
+++ b/app/layout-content.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { OfflineBanner } from '@/components/OfflineBanner'
 import { Header, Footer } from '@ciphera-net/ui'
 import { useAuth } from '@/lib/auth/context'
 import Link from 'next/link'
@@ -53,6 +54,7 @@ export default function LayoutContent({ children }: { children: React.ReactNode
         showSecurity={false}
         showPricing={true}
       />
+      <OfflineBanner />
       <main className="flex-1 pt-24 pb-8">
         {children}
       </main>
diff --git a/app/layout.tsx b/app/layout.tsx
index 1c1f26d..459df64 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,4 +1,3 @@
-import { OfflineBanner } from '@/components/OfflineBanner'
 import { ThemeProviders, Toaster } from '@ciphera-net/ui'
 import { AuthProvider } from '@/lib/auth/context'
 import type { Metadata, Viewport } from 'next'
@@ -47,7 +46,6 @@ export default function RootLayout({
   return (
     <html lang="en" className={plusJakartaSans.variable} suppressHydrationWarning>
       <body className="antialiased min-h-screen flex flex-col bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-50">
-        <OfflineBanner />
         <ThemeProviders>
           <AuthProvider>
             <LayoutContent>{children}</LayoutContent>
diff --git a/components/OfflineBanner.tsx b/components/OfflineBanner.tsx
index 85ff054..d18b7af 100644
--- a/components/OfflineBanner.tsx
+++ b/components/OfflineBanner.tsx
@@ -9,7 +9,7 @@ export function OfflineBanner() {
   if (isOnline) return null;
 
   return (
-    <div className="bg-yellow-500/10 border-b border-yellow-500/20 text-yellow-600 px-4 py-2 text-sm flex items-center justify-center gap-2 font-medium z-50 relative">
+    <div className="bg-yellow-500/10 dark:bg-yellow-500/20 border-b border-yellow-500/20 dark:border-yellow-500/30 text-yellow-600 dark:text-yellow-400 px-4 py-2 text-sm flex items-center justify-center gap-2 font-medium">
       <FiWifiOff className="w-4 h-4" />
       <span>You are currently offline. Changes may not be saved.</span>
     </div>
