diff --git a/app/layout-content.tsx b/app/layout-content.tsx
index 1a31c0f..b42b9ab 100644
--- a/app/layout-content.tsx
+++ b/app/layout-content.tsx
@@ -40,8 +40,12 @@ export default function LayoutContent({ children }: { children: React.ReactNode
     router.push('/onboarding')
   }
   
+  const showOfflineBar = Boolean(auth.user && !isOnline);
+  const barHeightRem = '2.5rem';
+
   return (
     <>
+      {auth.user && <OfflineBanner />}
       <Header 
         auth={auth} 
         LinkComponent={Link} 
@@ -55,9 +59,9 @@ export default function LayoutContent({ children }: { children: React.ReactNode
         showFaq={false}
         showSecurity={false}
         showPricing={true}
-        bottomContent={auth.user ? <OfflineBanner /> : undefined}
+        topOffset={showOfflineBar ? barHeightRem : undefined}
       />
-      <main className={`flex-1 pb-8 ${auth.user && !isOnline ? 'pt-32' : 'pt-24'}`}>
+      <main className={`flex-1 pb-8 ${showOfflineBar ? 'pt-[8.5rem]' : 'pt-24'}`}>
         {children}
       </main>
       <Footer 
diff --git a/components/OfflineBanner.tsx b/components/OfflineBanner.tsx
index 7238285..fa9f9c3 100644
--- a/components/OfflineBanner.tsx
+++ b/components/OfflineBanner.tsx
@@ -9,8 +9,8 @@ export function OfflineBanner() {
   if (isOnline) return null;
 
   return (
-    <div className="rounded-b-2xl 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 sm:px-8 py-2 text-sm flex items-center justify-center gap-2 font-medium">
-      <FiWifiOff className="w-4 h-4" />
+    <div className="fixed top-0 left-0 right-0 z-[100] rounded-b-xl bg-yellow-500/15 dark:bg-yellow-500/25 border-b border-yellow-500/30 dark:border-yellow-500/40 text-yellow-700 dark:text-yellow-300 px-4 sm:px-8 py-2.5 text-sm flex items-center justify-center gap-2 font-medium shadow-md">
+      <FiWifiOff className="w-4 h-4 shrink-0" />
       <span>You are currently offline. Changes may not be saved.</span>
     </div>
   );
diff --git a/package-lock.json b/package-lock.json
index 077d0b8..1574eb3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "pulse-frontend",
       "version": "0.1.0",
       "dependencies": {
-        "@ciphera-net/ui": "^0.0.41",
+        "@ciphera-net/ui": "^0.0.42",
         "@ducanh2912/next-pwa": "^10.2.9",
         "axios": "^1.13.2",
         "country-flag-icons": "^1.6.4",
@@ -1467,9 +1467,9 @@
       }
     },
     "node_modules/@ciphera-net/ui": {
-      "version": "0.0.41",
-      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.0.41/3f5042af5890632050f2c6ae6b389a6899cfdc6c",
-      "integrity": "sha512-egkw5aN5+kZMW7A0AKlFU2ToAZIBTMTJKWzZbxo/fo/hxavZt5YdW7r/iHesY28gbUsNuWrRN7sQ3U9sYUcNSw==",
+      "version": "0.0.42",
+      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.0.42/f3476f7f1e6e2210b4c7b1ae84964777e1b2b718",
+      "integrity": "sha512-PuzwXKR2DrtTWXELDFH5GhQxnz0qPHTNGtMbTdhslWEp/taEy+n3UsoBp+NFw0uQEvz7mHQ9PgDpDVztQncMfw==",
       "dependencies": {
         "@radix-ui/react-icons": "^1.3.0",
         "clsx": "^2.1.0",
diff --git a/package.json b/package.json
index cd059ff..02bf60a 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@ciphera-net/ui": "^0.0.41",
+    "@ciphera-net/ui": "^0.0.42",
     "@ducanh2912/next-pwa": "^10.2.9",
     "axios": "^1.13.2",
     "country-flag-icons": "^1.6.4",