diff --git a/public/archnest-logo-clean.png b/public/archnest-logo-clean.png
new file mode 100644
index 0000000..016bf0f
Binary files /dev/null and b/public/archnest-logo-clean.png differ
diff --git a/src/App.tsx b/src/App.tsx
index 969b4a2..bb9bdef 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -23,12 +23,11 @@ function App() {
         <TopBar />
 
         <section
-          className="w-full overflow-y-auto"
-          style={{ height: 'calc(100vh - 56px)', scrollbarWidth: 'none', padding: '16px 24px 32px 24px' }}
+          className="flex w-full flex-col overflow-hidden"
+          style={{ height: 'calc(100vh - 56px)', scrollbarWidth: 'none', padding: '16px 24px 24px 24px', gap: '20px' }}
         >
-          <div className="flex w-full max-w-none flex-col gap-0">
-            {/* Hero + KPI overlap — KPI bottom aligns with banner bottom */}
-            <div className="relative w-full overflow-hidden" style={{ height: '260px' }}>
+          {/* Hero + KPI overlap — KPI bottom aligns with banner bottom */}
+          <div className="relative w-full shrink-0 overflow-hidden" style={{ height: '240px' }}>
               <img
                 src="/archnest-hero-banner.png"
                 alt="ArchNest Banner"
@@ -53,22 +52,19 @@ function App() {
                     'radial-gradient(ellipse 75% 100% at center, transparent 55%, var(--color-page) 100%)',
                 }}
               />
-              {/* KPI cards positioned so their bottom edge aligns with banner bottom */}
-              <div className="absolute bottom-0 left-0 right-0 z-10 px-4">
-                <StatusCards />
-              </div>
+            {/* KPI cards positioned so their bottom edge aligns with banner bottom */}
+            <div className="absolute bottom-0 left-0 right-0 z-10 px-4">
+              <StatusCards />
             </div>
+          </div>
 
-            {/* 24px breathing room between KPI row and middle row */}
-            <div style={{ height: '24px' }} />
-
-            {/* Middle Row */}
+          {/* Middle Row — stretches to fill available vertical space */}
+          <div className="min-h-0 flex-1">
             <MiddleRow />
+          </div>
 
-            {/* Gap */}
-            <div style={{ height: '24px' }} />
-
-            {/* Bottom Row */}
+          {/* Bottom Row — anchored to the bottom */}
+          <div className="shrink-0">
             <BottomRow />
           </div>
         </section>
diff --git a/src/components/MiddleRow.tsx b/src/components/MiddleRow.tsx
index b9afe3d..f65a027 100644
--- a/src/components/MiddleRow.tsx
+++ b/src/components/MiddleRow.tsx
@@ -32,6 +32,9 @@ const cardBase: React.CSSProperties = {
   transition: 'border-color 0.2s ease',
   position: 'relative',
   overflow: 'hidden',
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'column',
 }
 
 function getBarColor(percentage: number) {
@@ -42,7 +45,7 @@ function getBarColor(percentage: number) {
 
 export default function MiddleRow() {
   return (
-    <div className="grid w-full grid-cols-[1fr_1.4fr_1fr] gap-6">
+    <div className="grid h-full w-full grid-cols-[1fr_1.4fr_1fr] gap-6">
       {/* Resource Overview */}
       <div style={cardBase} className="hover:!border-gold/15 group">
         {/* Subtle hex pattern overlay */}
@@ -50,7 +53,7 @@ export default function MiddleRow() {
         {/* Gold top edge lighting */}
         <div style={{ position: 'absolute', top: 0, left: '10%', right: '10%', height: '1px', background: 'linear-gradient(90deg, transparent, rgba(200,164,52,0.15), transparent)', pointerEvents: 'none' }} />
 
-        <div className="relative z-10">
+        <div className="relative z-10 flex flex-1 flex-col">
           <div className="flex items-center justify-between mb-4">
             <h3 style={{ fontSize: '11px', textTransform: 'uppercase', letterSpacing: '1.5px', color: '#7A7D85', fontWeight: 500 }}>
               Resource Overview
@@ -59,7 +62,7 @@ export default function MiddleRow() {
               <X size={14} />
             </button>
           </div>
-          <div className="flex flex-col gap-4">
+          <div className="flex flex-1 flex-col justify-around gap-4">
             {resources.map((res) => {
               const percentage = res.unit === '%' ? res.current : (res.current / res.max) * 100
               const displayValue = res.unit === '%' ? `${res.current}%` : `${res.current} / ${res.max}${res.unit}`
@@ -84,7 +87,7 @@ export default function MiddleRow() {
         {/* Gold top edge */}
         <div style={{ position: 'absolute', top: 0, left: '5%', right: '5%', height: '1px', background: 'linear-gradient(90deg, transparent, rgba(200,164,52,0.2), transparent)', pointerEvents: 'none' }} />
 
-        <div className="relative z-10">
+        <div className="relative z-10 flex flex-1 flex-col">
           <div className="flex items-center justify-between mb-4">
             <h3 style={{ fontSize: '11px', textTransform: 'uppercase', letterSpacing: '1.5px', color: '#7A7D85', fontWeight: 500 }}>
               Recent Activity
@@ -93,7 +96,7 @@ export default function MiddleRow() {
               <X size={14} />
             </button>
           </div>
-          <div className="flex flex-col gap-3">
+          <div className="flex flex-1 flex-col justify-around gap-3">
             {activities.map((item, i) => {
               const Icon = item.icon
               return (
@@ -118,14 +121,14 @@ export default function MiddleRow() {
         {/* Amber edge lighting */}
         <div style={{ position: 'absolute', top: 0, left: '10%', right: '10%', height: '1px', background: 'linear-gradient(90deg, transparent, rgba(231,126,34,0.15), transparent)', pointerEvents: 'none' }} />
 
-        <div className="relative z-10">
+        <div className="relative z-10 flex flex-1 flex-col">
           <div className="flex items-center justify-between mb-4">
             <h3 style={{ fontSize: '11px', textTransform: 'uppercase', letterSpacing: '1.5px', color: '#7A7D85', fontWeight: 500 }}>
               Top Alerts
             </h3>
             <a href="#" style={{ fontSize: '11px', color: '#C8A434', textDecoration: 'none' }}>View all</a>
           </div>
-          <div className="flex flex-col gap-3">
+          <div className="flex flex-1 flex-col justify-around gap-3">
             {alerts.map((alert, i) => (
               <div key={i} className="flex items-start gap-3">
                 <div style={{ width: '8px', height: '8px', borderRadius: '50%', flexShrink: 0, marginTop: '5px', backgroundColor: alert.severity === 'high' ? '#E74C3C' : '#E67E22', boxShadow: alert.severity === 'high' ? '0 0 6px rgba(231,76,60,0.3)' : '0 0 6px rgba(230,126,34,0.2)' }} />
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index e2f5fd4..d7d6a8a 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -28,51 +28,54 @@ export default function Sidebar({ collapsed, onToggle }: SidebarProps) {
 
   return (
     <aside
-      className="fixed left-0 top-0 z-50 h-screen overflow-hidden flex flex-col items-center py-5"
+      className="fixed left-0 top-0 z-50 h-screen overflow-hidden flex flex-col py-6"
       style={{ width: `${width}px`, backgroundColor: '#0A0B0D' }}
     >
-      {/* Logo — larger, aligned with top bar */}
-      <div className="flex flex-col items-center mb-6" style={{ paddingTop: '8px' }}>
+      {/* Logo — prominent, centered at top. Blend mode hides the baked-in
+          dark background of the source PNG so only the gold arc shows. */}
+      <div className="flex flex-col items-center mb-10" style={{ paddingTop: '4px' }}>
         <img
-          src="/archnest-logo.png"
+          src="/archnest-logo-clean.png"
           alt="ArchNest"
-          className="mb-1.5"
           style={{
-            width: collapsed ? '28px' : '44px',
-            height: collapsed ? '28px' : '44px',
-            filter: 'drop-shadow(0 0 8px rgba(200,164,52,0.5))',
+            width: collapsed ? '56px' : '168px',
+            height: 'auto',
+            filter: 'drop-shadow(0 0 10px rgba(200,164,52,0.3))',
           }}
         />
-        {!collapsed && (
-          <span style={{ fontSize: '9px', fontWeight: 700, letterSpacing: '2.5px', color: '#C8A434', textTransform: 'uppercase' }}>
-            ArchNest
-          </span>
-        )}
       </div>
 
       {/* Nav Items */}
-      <nav className="flex-1 flex flex-col justify-center gap-6 w-full">
+      <nav className="flex-1 flex flex-col gap-2 w-full" style={{ padding: collapsed ? '0 8px' : '0 12px' }}>
         {navItems.map((item) => {
           const Icon = item.icon
           return (
             <a
               key={item.label}
               href={item.route}
-              className="relative flex w-full flex-col items-center justify-center gap-1.5 px-2 py-2 text-center no-underline transition-all duration-200"
-              style={{ color: item.active ? '#C8A434' : '#7A7D85' }}
+              className={`relative flex items-center no-underline transition-all duration-200 ${collapsed ? 'justify-center' : ''}`}
+              style={{
+                color: item.active ? '#C8A434' : '#7A7D85',
+                gap: collapsed ? '0' : '12px',
+                padding: collapsed ? '12px 0' : '12px 14px',
+                borderRadius: '10px',
+                backgroundColor: item.active ? 'rgba(200,164,52,0.1)' : 'transparent',
+                border: item.active ? '1px solid rgba(200,164,52,0.18)' : '1px solid transparent',
+                boxShadow: item.active ? '0 0 14px rgba(200,164,52,0.06)' : 'none',
+              }}
               title={collapsed ? item.label : undefined}
-              onMouseEnter={(e) => { if (!item.active) e.currentTarget.style.backgroundColor = 'rgba(200,164,52,0.05)'; e.currentTarget.style.color = '#C8A434' }}
-              onMouseLeave={(e) => { e.currentTarget.style.backgroundColor = 'transparent'; if (!item.active) e.currentTarget.style.color = '#7A7D85' }}
+              onMouseEnter={(e) => { if (!item.active) { e.currentTarget.style.backgroundColor = 'rgba(200,164,52,0.05)'; e.currentTarget.style.color = '#C8A434' } }}
+              onMouseLeave={(e) => { if (!item.active) { e.currentTarget.style.backgroundColor = 'transparent'; e.currentTarget.style.color = '#7A7D85' } }}
             >
               {item.active && (
                 <div
-                  className="absolute left-0 top-1/2 -translate-y-1/2 rounded-r"
-                  style={{ width: '3px', height: '26px', backgroundColor: '#C8A434', boxShadow: '0 0 6px rgba(200,164,52,0.5)' }}
+                  className="absolute left-0 top-1/2 -translate-y-1/2"
+                  style={{ width: '3px', height: '22px', backgroundColor: '#C8A434', borderRadius: '0 3px 3px 0', boxShadow: '0 0 6px rgba(200,164,52,0.5)' }}
                 />
               )}
               <Icon className="h-5 w-5 shrink-0" strokeWidth={item.active ? 2 : 1.5} />
               {!collapsed && (
-                <span className="max-w-[90px] truncate leading-tight font-medium" style={{ fontSize: '10px' }}>
+                <span className="truncate leading-tight font-medium" style={{ fontSize: '13px' }}>
                   {item.label}
                 </span>
               )}
@@ -84,7 +87,7 @@ export default function Sidebar({ collapsed, onToggle }: SidebarProps) {
       {/* Collapse Toggle */}
       <button
         onClick={onToggle}
-        className="p-1.5 rounded cursor-pointer bg-transparent transition-colors"
+        className="p-1.5 rounded cursor-pointer bg-transparent transition-colors self-center"
         style={{ border: '1px solid #1E2025', color: '#7A7D85', marginBottom: '12px' }}
       >
         {collapsed ? <ChevronRight size={12} /> : <ChevronLeft size={12} />}