diff --git a/assets/blank-kpi-bg.png b/assets/blank-kpi-bg.png
new file mode 100644
index 0000000..ee034fd
Binary files /dev/null and b/assets/blank-kpi-bg.png differ
diff --git a/public/blank-kpi-bg.png b/public/blank-kpi-bg.png
new file mode 100644
index 0000000..ee034fd
Binary files /dev/null and b/public/blank-kpi-bg.png differ
diff --git a/src/pages/Infrastructure.tsx b/src/pages/Infrastructure.tsx
index 8b8f047..d426b0e 100644
--- a/src/pages/Infrastructure.tsx
+++ b/src/pages/Infrastructure.tsx
@@ -28,14 +28,6 @@ const regions = [
   { name: 'ap-northeast-1', x: '85%', y: '40%', resources: 6 },
 ]
 
-const topResources = [
-  { label: 'db-primary-01', percentage: 92 },
-  { label: 'app-server-03', percentage: 85 },
-  { label: 'cache-cluster-02', percentage: 78 },
-  { label: 'web-frontend-lb', percentage: 64 },
-  { label: 'batch-worker-04', percentage: 51 },
-]
-
 const trendData = Array.from({ length: 14 }, (_, i) => ({
   day: i,
   compute: 60 + i * 0.6 + Math.sin(i / 2) * 3,
@@ -92,9 +84,16 @@ const cardVignette: React.CSSProperties = {
   position: 'absolute',
   inset: 0,
   pointerEvents: 'none',
-  background: 'radial-gradient(ellipse closest-side at center, transparent 45%, var(--color-page) 100%)',
+  background: 'radial-gradient(ellipse closest-side at center, transparent 70%, var(--color-page) 100%)',
 }
 
+const distributionData = [
+  { name: 'Compute', value: 42, color: '#C8A434' },
+  { name: 'Storage', value: 28, color: '#E67E22' },
+  { name: 'Database', value: 18, color: '#2ECC71' },
+  { name: 'Network', value: 12, color: '#7A7D85' },
+]
+
 function Donut({ data, centerLabel }: { data: { name: string; value: number; color: string }[]; centerLabel?: string }) {
   return (
     <div className="flex flex-1 items-center gap-4">
@@ -179,15 +178,18 @@ export default function Infrastructure() {
         {statusCards.map((card) => {
           const Icon = card.icon
           return (
-            <div key={card.label} style={{ ...cardBase, padding: '16px' }} className="hover:!border-gold/20">
-              <h3 style={{ fontSize: '10px', textTransform: 'uppercase', letterSpacing: '1.5px', color: '#7A7D85', fontWeight: 500, marginBottom: '8px' }}>
-                {card.label}
-              </h3>
-              <div className="flex items-center gap-2">
-                <Icon size={16} style={{ color: card.color ?? '#C8A434' }} />
-                <span style={{ fontSize: '22px', fontWeight: 700, color: '#E8E6E0', lineHeight: 1 }}>{card.value}</span>
+            <div key={card.label} style={{ ...framedCard('/blank-kpi-bg.png'), padding: '16px' }}>
+              <div style={cardVignette} />
+              <div className="relative z-10">
+                <h3 style={{ fontSize: '10px', textTransform: 'uppercase', letterSpacing: '1.5px', color: '#7A7D85', fontWeight: 500, marginBottom: '8px' }}>
+                  {card.label}
+                </h3>
+                <div className="flex items-center gap-2">
+                  <Icon size={16} style={{ color: card.color ?? '#C8A434' }} />
+                  <span style={{ fontSize: '22px', fontWeight: 700, color: '#E8E6E0', lineHeight: 1 }}>{card.value}</span>
+                </div>
+                <p style={{ fontSize: '10px', color: card.color ?? '#7A7D85', marginTop: '6px' }}>{card.sub}</p>
               </div>
-              <p style={{ fontSize: '10px', color: card.color ?? '#7A7D85', marginTop: '6px' }}>{card.sub}</p>
             </div>
           )
         })}
@@ -195,7 +197,15 @@ export default function Infrastructure() {
 
       {/* Middle Row */}
       <div className="min-h-0 flex-1">
-        <div className="grid h-full w-full grid-cols-[1.6fr_1fr] gap-6">
+        <div className="grid h-full w-full grid-cols-[1fr_1.6fr] gap-6">
+          {/* Resource Distribution */}
+          <div style={framedCard('/resource-distrabution-bg.png')}>
+            <div style={cardVignette} />
+            <div className="relative z-10 flex flex-1 flex-col items-center justify-center">
+              <Donut data={distributionData} />
+            </div>
+          </div>
+
           {/* Infrastructure Map — expanded */}
           <div style={framedCard('/infra-map-kpi.png')}>
             <div style={cardVignette} />
@@ -210,29 +220,6 @@ export default function Infrastructure() {
               </div>
             </div>
           </div>
-
-          {/* Top Resources by Utilization */}
-          <div style={framedCard('/resource-utilization.png')}>
-            <div style={cardVignette} />
-            <div className="relative z-10 flex flex-1 flex-col">
-              <div className="flex flex-1 flex-col justify-around gap-4">
-                {topResources.map((res) => {
-                  const color = res.percentage >= 90 ? '#E74C3C' : res.percentage >= 70 ? '#E67E22' : '#C8A434'
-                  return (
-                    <div key={res.label}>
-                      <div className="flex items-center justify-between mb-1.5">
-                        <span style={{ fontSize: '12px', color: '#E8E6E0' }}>{res.label}</span>
-                        <span style={{ fontSize: '11px', color: '#7A7D85' }}>{res.percentage}%</span>
-                      </div>
-                      <div style={{ height: '6px', backgroundColor: 'rgba(30,32,37,0.8)', borderRadius: '3px', overflow: 'hidden' }}>
-                        <div style={{ height: '100%', width: `${res.percentage}%`, backgroundColor: color, borderRadius: '3px', transition: 'width 0.8s ease' }} />
-                      </div>
-                    </div>
-                  )
-                })}
-              </div>
-            </div>
-          </div>
         </div>
       </div>