diff --git a/src/App.tsx b/src/App.tsx
index fc36650b..10e15a1a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -326,7 +326,6 @@ function App() {
 
   return (
     <div className="app-shell">
-      <UpdateBanner status={updateStatus} actions={updateActions} />
       <div className="app">
         {sidebarVisible && (
           <>
@@ -386,6 +385,7 @@ function App() {
           />
         </div>
       </div>
+      <UpdateBanner status={updateStatus} actions={updateActions} />
       <StatusBar noteCount={vault.entries.length} modifiedCount={vault.modifiedFiles.length} vaultPath={vaultSwitcher.vaultPath} vaults={vaultSwitcher.allVaults} onSwitchVault={vaultSwitcher.switchVault} onOpenSettings={dialogs.openSettings} onOpenLocalFolder={vaultSwitcher.handleOpenLocalFolder} onConnectGitHub={dialogs.openGitHubVault} onClickPending={() => setSelection({ kind: 'filter', filter: 'changes' })} hasGitHub={!!settings.github_token} syncStatus={autoSync.syncStatus} lastSyncTime={autoSync.lastSyncTime} conflictCount={autoSync.conflictFiles.length} lastCommitInfo={autoSync.lastCommitInfo} onTriggerSync={autoSync.triggerSync} zoomLevel={zoom.zoomLevel} onZoomReset={zoom.zoomReset} />
       <Toast message={toastMessage} onDismiss={() => setToastMessage(null)} />
       <QuickOpenPalette open={dialogs.showQuickOpen} entries={vault.entries} onSelect={notes.handleSelectNote} onClose={dialogs.closeQuickOpen} />
diff --git a/src/components/UpdateBanner.tsx b/src/components/UpdateBanner.tsx
index 64359ec8..2a760cfc 100644
--- a/src/components/UpdateBanner.tsx
+++ b/src/components/UpdateBanner.tsx
@@ -18,16 +18,16 @@ export function UpdateBanner({ status, actions }: UpdateBannerProps) {
         alignItems: 'center',
         gap: 10,
         padding: '6px 12px',
-        background: 'var(--accent-blue, #E8F0FE)',
-        borderBottom: '1px solid var(--border)',
+        background: '#1a56db',
+        borderBottom: 'none',
         fontSize: 13,
-        color: 'var(--foreground)',
+        color: '#fff',
         flexShrink: 0,
       }}
     >
       {status.state === 'available' && (
         <>
-          <Download size={14} style={{ color: 'var(--primary)', flexShrink: 0 }} />
+          <Download size={14} style={{ color: '#fff', flexShrink: 0 }} />
           <span>
             <strong>Laputa {status.version}</strong> is available
           </span>
@@ -40,7 +40,7 @@ export function UpdateBanner({ status, actions }: UpdateBannerProps) {
               gap: 3,
               background: 'none',
               border: 'none',
-              color: 'var(--primary)',
+              color: '#fff',
               cursor: 'pointer',
               fontSize: 13,
               padding: 0,
@@ -73,7 +73,7 @@ export function UpdateBanner({ status, actions }: UpdateBannerProps) {
               background: 'none',
               border: 'none',
               cursor: 'pointer',
-              color: 'var(--muted-foreground)',
+              color: '#fff',
               display: 'flex',
               padding: 2,
             }}
@@ -86,14 +86,14 @@ export function UpdateBanner({ status, actions }: UpdateBannerProps) {
 
       {status.state === 'downloading' && (
         <>
-          <RefreshCw size={14} style={{ color: 'var(--primary)', flexShrink: 0, animation: 'spin 1s linear infinite' }} />
+          <RefreshCw size={14} style={{ color: '#fff', flexShrink: 0, animation: 'spin 1s linear infinite' }} />
           <span>Downloading Laputa {status.version}...</span>
           <div
             style={{
               flex: 1,
               maxWidth: 200,
               height: 4,
-              background: 'var(--border)',
+              background: 'rgba(255,255,255,0.3)',
               borderRadius: 2,
               overflow: 'hidden',
             }}