diff --git a/src/components/dashboard/TopWidgets.tsx b/src/components/dashboard/TopWidgets.tsx
index 51df5b6..ce0fbd5 100644
--- a/src/components/dashboard/TopWidgets.tsx
+++ b/src/components/dashboard/TopWidgets.tsx
@@ -7,18 +7,29 @@ import {
 } from "recharts";
 import { fmtBytes, formatAppLabel } from "@/lib/utils";
 
+import { AppStat, ProtocolStat } from "@/lib/api-types";
+
 interface TopWidgetsProps {
   topApps: {
-    data: { app_label: string; total_bytes: number }[];
+    data: AppStat[];
   };
   topProtocols: {
-    data: { protocol_label: string; download: number }[];
+    data: ProtocolStat[];
   };
 }
 
 const COLORS = ['#3b82f6', '#10b981', '#f59e0b', '#8b5cf6', '#ec4899', '#3b82f6'];
 
 export function TopWidgets({ topApps, topProtocols }: TopWidgetsProps) {
+  const appsData = (topApps.data || []).map(app => ({
+    ...app,
+    total_bytes: (app.download || 0) + (app.upload || 0)
+  }));
+
+  const protocolsData = (topProtocols.data || []).map(p => ({
+    ...p,
+    total: (p.download || 0) + (p.upload || 0)
+  }));
   return (
     <div className="col-span-1 lg:col-span-3 space-y-6 w-full min-w-0">
       <Card className="bg-card/80 backdrop-blur-xl border-border/50 flex-1 min-w-0">
@@ -26,14 +37,14 @@ export function TopWidgets({ topApps, topProtocols }: TopWidgetsProps) {
           <CardTitle className="text-lg text-white">Top Apps (Total Bandwidth)</CardTitle>
         </CardHeader>
         <CardContent className="w-full min-w-0">
-          {(!topApps.data || topApps.data.length === 0) ? (
+          {(!appsData || appsData.length === 0) ? (
             <div className="h-[150px] flex items-center justify-center text-muted-foreground text-sm">
               No Data
             </div>
           ) : (
             <div className="h-[150px] w-full min-w-0 relative">
               <ResponsiveContainer width="100%" height="100%">
-                <BarChart data={topApps.data} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
+                <BarChart data={appsData} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
                   <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.05)" vertical={false} />
                   <XAxis 
                     dataKey="app_label" 
@@ -86,14 +97,14 @@ export function TopWidgets({ topApps, topProtocols }: TopWidgetsProps) {
           <CardTitle className="text-lg text-white">Top Protocols</CardTitle>
         </CardHeader>
         <CardContent className="w-full min-w-0">
-          {(!topProtocols.data || topProtocols.data.length === 0) ? (
+          {(!protocolsData || protocolsData.length === 0) ? (
             <div className="h-[150px] flex items-center justify-center text-muted-foreground text-sm">
               No Data
             </div>
           ) : (
             <div className="h-[150px] w-full min-w-0 relative">
               <ResponsiveContainer width="100%" height="100%">
-                <BarChart data={topProtocols.data} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
+                <BarChart data={protocolsData} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
                   <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.05)" vertical={false} />
                   <XAxis 
                     dataKey="protocol_label"