diff --git a/assets/infra-map-kpi.png b/assets/infra-map-kpi.png
new file mode 100644
index 0000000..847295c
Binary files /dev/null and b/assets/infra-map-kpi.png differ
diff --git a/assets/network-kpi-bg.png b/assets/network-kpi-bg.png
new file mode 100644
index 0000000..b3330f8
Binary files /dev/null and b/assets/network-kpi-bg.png differ
diff --git a/assets/resource-distrabution-bg.png b/assets/resource-distrabution-bg.png
new file mode 100644
index 0000000..72e2562
Binary files /dev/null and b/assets/resource-distrabution-bg.png differ
diff --git a/assets/resource-utilization.png b/assets/resource-utilization.png
new file mode 100644
index 0000000..5e67b66
Binary files /dev/null and b/assets/resource-utilization.png differ
diff --git a/public/infra-map-kpi.png b/public/infra-map-kpi.png
new file mode 100644
index 0000000..847295c
Binary files /dev/null and b/public/infra-map-kpi.png differ
diff --git a/public/network-kpi-bg.png b/public/network-kpi-bg.png
new file mode 100644
index 0000000..b3330f8
Binary files /dev/null and b/public/network-kpi-bg.png differ
diff --git a/public/resource-distrabution-bg.png b/public/resource-distrabution-bg.png
new file mode 100644
index 0000000..72e2562
Binary files /dev/null and b/public/resource-distrabution-bg.png differ
diff --git a/public/resource-utilization.png b/public/resource-utilization.png
new file mode 100644
index 0000000..5e67b66
Binary files /dev/null and b/public/resource-utilization.png differ
diff --git a/src/pages/Infrastructure.tsx b/src/pages/Infrastructure.tsx
index 0bdee05..cab94f4 100644
--- a/src/pages/Infrastructure.tsx
+++ b/src/pages/Infrastructure.tsx
@@ -80,6 +80,22 @@ const sectionTitle: React.CSSProperties = {
   marginBottom: '16px',
 }
 
+function framedCard(bgUrl: string): React.CSSProperties {
+  return {
+    backgroundImage: `url(${bgUrl})`,
+    backgroundSize: '100% 100%',
+    backgroundPosition: 'center',
+    backgroundRepeat: 'no-repeat',
+    borderRadius: '12px',
+    position: 'relative',
+    overflow: 'hidden',
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    padding: '20px 20px 64px 20px',
+  }
+}
+
 function Donut({ data, centerLabel }: { data: { name: string; value: number; color: string }[]; centerLabel?: string }) {
   return (
     <div className="flex flex-1 items-center gap-4">
@@ -182,18 +198,15 @@ export default function Infrastructure() {
       <div className="min-h-0 flex-1">
         <div className="grid h-full w-full grid-cols-[1fr_1.4fr_1fr] gap-6">
           {/* Resource Distribution */}
-          <div style={cardBase} className="hover:!border-gold/15">
+          <div style={framedCard('/resource-distrabution-bg.png')}>
             <div className="relative z-10 flex flex-1 flex-col">
-              <h3 style={sectionTitle}>Resource Distribution</h3>
               <Donut data={distributionData} centerLabel="128" />
             </div>
           </div>
 
           {/* Infrastructure Map */}
-          <div style={cardBase} className="hover:!border-gold/15">
-            <div style={{ position: 'absolute', inset: 0, opacity: 0.03, backgroundImage: 'linear-gradient(rgba(200,164,52,0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(200,164,52,0.3) 1px, transparent 1px)', backgroundSize: '40px 40px', pointerEvents: 'none' }} />
+          <div style={framedCard('/infra-map-kpi.png')}>
             <div className="relative z-10 flex flex-1 flex-col">
-              <h3 style={sectionTitle}>Infrastructure Map</h3>
               <div className="relative flex-1" style={{ minHeight: '140px' }}>
                 <Globe2 size={120} strokeWidth={0.6} style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)', color: 'rgba(200,164,52,0.08)' }} />
                 {regions.map((r) => (
@@ -206,9 +219,8 @@ export default function Infrastructure() {
           </div>
 
           {/* Top Resources by Utilization */}
-          <div style={cardBase} className="hover:!border-gold/15">
+          <div style={framedCard('/resource-utilization.png')}>
             <div className="relative z-10 flex flex-1 flex-col">
-              <h3 style={sectionTitle}>Top Resources by Utilization</h3>
               <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'