diff --git a/src/App.tsx b/src/App.tsx
index 4b92cca..e93d4d6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Routes, Route } from 'react-router-dom'
+import { Routes, Route, useLocation } from 'react-router-dom'
 import Sidebar from './components/Sidebar'
 import TopBar from './components/TopBar'
 import Glance from './pages/Glance'
@@ -8,6 +8,8 @@ import Infrastructure from './pages/Infrastructure'
 function App() {
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
   const sidebarWidth = sidebarCollapsed ? 64 : 200
+  const location = useLocation()
+  const showHero = location.pathname === '/infrastructure'
 
   return (
     <div className="min-h-screen w-screen overflow-hidden bg-page">
@@ -17,14 +19,38 @@ function App() {
       />
 
       <main
-        className="h-screen overflow-hidden"
+        className="relative h-screen overflow-hidden"
         style={{ marginLeft: `${sidebarWidth}px`, width: `calc(100vw - ${sidebarWidth}px)` }}
       >
-        <TopBar />
+        {showHero && (
+          <div className="pointer-events-none absolute left-0 right-0 top-0" style={{ height: '300px', zIndex: 0 }}>
+            <img
+              src="/archnest-hero-banner.png"
+              alt=""
+              className="absolute inset-0 h-full w-full"
+              style={{
+                objectFit: 'cover',
+                objectPosition: 'center 5%',
+                maskImage: 'linear-gradient(to bottom, black 0%, black 55%, transparent 100%)',
+                WebkitMaskImage: 'linear-gradient(to bottom, black 0%, black 55%, transparent 100%)',
+              }}
+            />
+            <div
+              className="absolute inset-0"
+              style={{
+                background: 'radial-gradient(ellipse 70% 100% at center, transparent 40%, var(--color-page) 100%)',
+              }}
+            />
+          </div>
+        )}
+
+        <div className="relative" style={{ zIndex: 1 }}>
+          <TopBar />
+        </div>
 
         <section
-          className="flex w-full flex-col overflow-hidden"
-          style={{ height: 'calc(100vh - 56px)', scrollbarWidth: 'none', padding: '16px 24px 24px 24px', gap: '20px' }}
+          className="relative flex w-full flex-col overflow-hidden"
+          style={{ height: 'calc(100vh - 56px)', scrollbarWidth: 'none', padding: '16px 24px 24px 24px', gap: '20px', zIndex: 1 }}
         >
           <Routes>
             <Route path="/" element={<Glance />} />
diff --git a/src/components/TopBar.tsx b/src/components/TopBar.tsx
index d7bff31..1594fec 100644
--- a/src/components/TopBar.tsx
+++ b/src/components/TopBar.tsx
@@ -28,7 +28,7 @@ export default function TopBar() {
   }, [])
 
   return (
-    <header className="h-14 flex items-center px-6 bg-page sticky top-0 z-40">
+    <header className="h-14 flex items-center px-6 sticky top-0 z-40">
       {/* Page Title — pushed away from sidebar edge */}
       <h1 className="text-[18px] font-bold uppercase tracking-wide" style={{ color: '#C8A434', marginLeft: '20px' }}>
         {title}
@@ -41,8 +41,8 @@ export default function TopBar() {
           <input
             type="text"
             placeholder="Search resources..."
-            className="w-[300px] h-8 rounded-full bg-card border border-border text-[12px] text-text-primary placeholder:text-text-secondary focus:outline-none focus:border-gold transition-colors"
-            style={{ paddingLeft: '36px', paddingRight: '16px' }}
+            className="w-[300px] h-8 rounded-full border border-border text-[12px] text-text-primary placeholder:text-text-secondary focus:outline-none focus:border-gold transition-colors"
+            style={{ paddingLeft: '36px', paddingRight: '16px', backgroundColor: 'rgba(255,255,255,0.04)', backdropFilter: 'blur(6px)' }}
           />
         </div>
       </div>
diff --git a/src/pages/Infrastructure.tsx b/src/pages/Infrastructure.tsx
index 7d5c0eb..2968b64 100644
--- a/src/pages/Infrastructure.tsx
+++ b/src/pages/Infrastructure.tsx
@@ -117,67 +117,46 @@ export default function Infrastructure() {
 
   return (
     <>
-      {/* Hero banner — faded seamlessly into the page background, no hard edges */}
-      <div className="relative w-full shrink-0 overflow-hidden" style={{ height: '140px', margin: '-16px -24px 0 -24px' }}>
-        <img
-          src="/archnest-hero-banner.png"
-          alt=""
-          className="absolute inset-0 h-full w-full"
-          style={{
-            objectFit: 'cover',
-            objectPosition: 'center 30%',
-            maskImage: 'linear-gradient(to bottom, transparent 0%, black 25%, black 55%, transparent 100%)',
-            WebkitMaskImage: 'linear-gradient(to bottom, transparent 0%, black 25%, black 55%, transparent 100%)',
-          }}
-        />
-        <div
-          className="pointer-events-none absolute inset-0"
-          style={{
-            background: 'radial-gradient(ellipse 70% 100% at center, transparent 40%, var(--color-page) 100%)',
-          }}
-        />
-
-        {/* Sub-tabs + Add Resource, overlaid on the banner */}
-        <div className="absolute bottom-0 left-0 right-0 z-10 flex items-center justify-between" style={{ padding: '0 24px 12px 24px' }}>
-          <div className="flex items-center gap-1 overflow-x-auto" style={{ scrollbarWidth: 'none' }}>
-            {subTabs.map((tab) => {
-              const active = tab === activeTab
-              return (
-                <button
-                  key={tab}
-                  onClick={() => setActiveTab(tab)}
-                  className="cursor-pointer bg-transparent border-none transition-colors whitespace-nowrap"
-                  style={{
-                    fontSize: '12px',
-                    fontWeight: 500,
-                    padding: '8px 14px',
-                    borderRadius: '8px',
-                    color: active ? '#C8A434' : '#7A7D85',
-                    backgroundColor: active ? 'rgba(200,164,52,0.1)' : 'transparent',
-                  }}
-                >
-                  {tab}
-                </button>
-              )
-            })}
-          </div>
-          <button
-            className="flex items-center gap-2 cursor-pointer transition-colors whitespace-nowrap"
-            style={{
-              fontSize: '12px',
-              fontWeight: 600,
-              color: '#0A0B0D',
-              backgroundColor: '#C8A434',
-              border: 'none',
-              borderRadius: '8px',
-              padding: '9px 16px',
-              boxShadow: '0 0 14px rgba(200,164,52,0.2)',
-            }}
-          >
-            <Plus size={14} />
-            Add Resource
-          </button>
+      {/* Sub-tabs + Add Resource — hero banner is rendered at the layout level behind this */}
+      <div className="flex items-center justify-between shrink-0">
+        <div className="flex items-center gap-1 overflow-x-auto" style={{ scrollbarWidth: 'none' }}>
+          {subTabs.map((tab) => {
+            const active = tab === activeTab
+            return (
+              <button
+                key={tab}
+                onClick={() => setActiveTab(tab)}
+                className="cursor-pointer bg-transparent border-none transition-colors whitespace-nowrap"
+                style={{
+                  fontSize: '12px',
+                  fontWeight: 500,
+                  padding: '8px 14px',
+                  borderRadius: '8px',
+                  color: active ? '#C8A434' : '#7A7D85',
+                  backgroundColor: active ? 'rgba(200,164,52,0.1)' : 'transparent',
+                }}
+              >
+                {tab}
+              </button>
+            )
+          })}
         </div>
+        <button
+          className="flex items-center gap-2 cursor-pointer transition-colors whitespace-nowrap"
+          style={{
+            fontSize: '12px',
+            fontWeight: 600,
+            color: '#0A0B0D',
+            backgroundColor: '#C8A434',
+            border: 'none',
+            borderRadius: '8px',
+            padding: '9px 16px',
+            boxShadow: '0 0 14px rgba(200,164,52,0.2)',
+          }}
+        >
+          <Plus size={14} />
+          Add Resource
+        </button>
       </div>
 
       {/* Status Cards */}