diff --git a/src/app/page.tsx b/src/app/page.tsx
index 204eeba..c59d5cc 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -121,6 +121,7 @@ export default function Home() {
             memory={data.metrics.memory}
             disk={data.metrics.disk}
             ingress={data.metrics.ingress}
+            istio={data.metrics.istio}
           />
         </ErrorBoundary>
 
diff --git a/src/components/report/SummaryCards.tsx b/src/components/report/SummaryCards.tsx
index f80aba2..2192ba3 100644
--- a/src/components/report/SummaryCards.tsx
+++ b/src/components/report/SummaryCards.tsx
@@ -8,6 +8,7 @@ interface SummaryCardsProps {
   memory: MetricInstance[];
   disk: MetricInstance[];
   ingress: NetworkMetrics;
+  istio: NetworkMetrics;
 }
 
 interface CardData {
@@ -26,13 +27,15 @@ function getClusterStats(instances: MetricInstance[]): { avg: number; max: numbe
   return { avg, max, min };
 }
 
-export default function SummaryCards({ cpu, memory, disk, ingress }: SummaryCardsProps) {
+export default function SummaryCards({ cpu, memory, disk, ingress, istio }: SummaryCardsProps) {
   const cpuStats = getClusterStats(cpu);
   const memStats = getClusterStats(memory);
   const diskStats = getClusterStats(disk);
 
-  const netRxAvg = ingress.receive.reduce((sum, i) => sum + i.stats.avg, 0);
-  const netTxAvg = ingress.transmit.reduce((sum, i) => sum + i.stats.avg, 0);
+  const ingressRxAvg = ingress.receive.reduce((sum, i) => sum + i.stats.avg, 0);
+  const ingressTxAvg = ingress.transmit.reduce((sum, i) => sum + i.stats.avg, 0);
+  const istioRxAvg = istio.receive.reduce((sum, i) => sum + i.stats.avg, 0);
+  const istioTxAvg = istio.transmit.reduce((sum, i) => sum + i.stats.avg, 0);
 
   const cards: CardData[] = [
     {
@@ -58,15 +61,22 @@ export default function SummaryCards({ cpu, memory, disk, ingress }: SummaryCard
     },
     {
       label: 'Ingress',
-      avg: `RX ${formatBytesPerSec(netRxAvg)}`,
-      max: `TX ${formatBytesPerSec(netTxAvg)}`,
+      avg: `RX ${formatBytesPerSec(ingressRxAvg)}`,
+      max: `TX ${formatBytesPerSec(ingressTxAvg)}`,
       min: '',
       color: 'border-blue-500',
     },
+    {
+      label: 'Istio',
+      avg: `RX ${formatBytesPerSec(istioRxAvg)}`,
+      max: `TX ${formatBytesPerSec(istioTxAvg)}`,
+      min: '',
+      color: 'border-purple-500',
+    },
   ];
 
   return (
-    <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+    <div className="grid grid-cols-2 lg:grid-cols-5 gap-4">
       {cards.map((card) => (
         <div key={card.label} className={`bg-white rounded-lg shadow p-4 border-l-4 ${card.color}`}>
           <h3 className="text-sm font-medium text-gray-500">{card.label}</h3>