diff --git a/src/pages/Infrastructure.tsx b/src/pages/Infrastructure.tsx
index b54219d..53bbd1e 100644
--- a/src/pages/Infrastructure.tsx
+++ b/src/pages/Infrastructure.tsx
@@ -81,6 +81,20 @@ function framedCard(bgUrl: string): React.CSSProperties {
   }
 }
 
+const cardVignette: React.CSSProperties = {
+  position: 'absolute',
+  inset: 0,
+  pointerEvents: 'none',
+  background: 'radial-gradient(ellipse closest-side at center, transparent 70%, var(--color-page) 100%)',
+}
+
+const cardDim: React.CSSProperties = {
+  position: 'absolute',
+  inset: 0,
+  pointerEvents: 'none',
+  backgroundColor: 'rgba(8, 8, 10, 0.45)',
+}
+
 const distributionData = [
   { name: 'Compute', value: 42, color: '#C8A434' },
   { name: 'Storage', value: 28, color: '#E67E22' },
@@ -195,6 +209,8 @@ export default function Infrastructure() {
         <div className="grid h-full w-full grid-cols-[1fr_1.6fr] gap-6">
           {/* Resource Distribution */}
           <div style={framedCard('/blank-kpi-bg.png')}>
+            <div style={cardDim} />
+            <div style={cardVignette} />
             <div className="relative z-10 flex flex-1 flex-col">
               <h3 style={sectionTitle}>Resource Distribution</h3>
               <div className="flex flex-1 flex-col items-center justify-center">
@@ -205,6 +221,8 @@ export default function Infrastructure() {
 
           {/* Infrastructure Map — expanded */}
           <div style={framedCard('/blank-kpi-bg.png')}>
+            <div style={cardDim} />
+            <div style={cardVignette} />
             <div className="relative z-10 flex flex-1 flex-col">
               <h3 style={sectionTitle}>Infrastructure Map</h3>
               <div className="relative flex-1" style={{ minHeight: '140px' }}>