diff --git a/AppImage/components/latency-detail-modal.tsx b/AppImage/components/latency-detail-modal.tsx
index 38179d58..51c6ff4e 100644
--- a/AppImage/components/latency-detail-modal.tsx
+++ b/AppImage/components/latency-detail-modal.tsx
@@ -980,7 +980,13 @@ export function LatencyDetailModal({ open, onOpenChange, currentLatency }: Laten
           {isRealtime ? (
             realtimeChartData.length > 0 ? (
               <ResponsiveContainer width="100%" height="100%">
-                <LineChart data={realtimeChartData}>
+                <AreaChart data={realtimeChartData}>
+                  <defs>
+                    <linearGradient id="latencyRealtimeGradient" x1="0" y1="0" x2="0" y2="1">
+                      <stop offset="5%" stopColor="#3b82f6" stopOpacity={0.3} />
+                      <stop offset="95%" stopColor="#3b82f6" stopOpacity={0} />
+                    </linearGradient>
+                  </defs>
                   <CartesianGrid strokeDasharray="3 3" stroke="#374151" opacity={0.3} />
                   <XAxis 
                     dataKey="time" 
@@ -997,15 +1003,16 @@ export function LatencyDetailModal({ open, onOpenChange, currentLatency }: Laten
                     tickFormatter={(v) => `${v}ms`}
                   />
                   <Tooltip content={<CustomTooltip />} />
-                  <Line
+                  <Area
                     type="monotone"
                     dataKey="value"
                     stroke="#3b82f6"
                     strokeWidth={2}
+                    fill="url(#latencyRealtimeGradient)"
                     dot={{ fill: '#3b82f6', strokeWidth: 0, r: 3 }}
                     activeDot={{ r: 5, fill: '#3b82f6' }}
                   />
-                </LineChart>
+                </AreaChart>
               </ResponsiveContainer>
             ) : (
               <div className="h-full flex flex-col items-center justify-center text-muted-foreground">
diff --git a/AppImage/components/network-metrics.tsx b/AppImage/components/network-metrics.tsx
index 8cb0b45c..d0a3b9b5 100644
--- a/AppImage/components/network-metrics.tsx
+++ b/AppImage/components/network-metrics.tsx
@@ -11,7 +11,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from ".
 import { fetchApi } from "../lib/api-config"
 import { formatNetworkTraffic, getNetworkUnit } from "../lib/format-network"
 import { LatencyDetailModal } from "./latency-detail-modal"
-import { LineChart, Line, ResponsiveContainer, YAxis } from "recharts"
+import { AreaChart, Area, LineChart, Line, ResponsiveContainer, YAxis } from "recharts"
 
 interface NetworkData {
   interfaces: NetworkInterface[]
@@ -408,16 +408,23 @@ export function NetworkMetrics() {
             {latencyData?.data && latencyData.data.length > 0 && (
               <div className="h-[40px] w-full">
                 <ResponsiveContainer width="100%" height="100%">
-                  <LineChart data={latencyData.data.slice(-30)}>
+                  <AreaChart data={latencyData.data.slice(-30)} margin={{ top: 0, right: 0, left: 0, bottom: 0 }}>
+                    <defs>
+                      <linearGradient id="latencySparkGradient" x1="0" y1="0" x2="0" y2="1">
+                        <stop offset="0%" stopColor="#3b82f6" stopOpacity={0.3} />
+                        <stop offset="100%" stopColor="#3b82f6" stopOpacity={0} />
+                      </linearGradient>
+                    </defs>
                     <YAxis hide domain={['dataMin - 5', 'dataMax + 5']} />
-                    <Line
+                    <Area
                       type="monotone"
                       dataKey="value"
                       stroke="#3b82f6"
                       strokeWidth={1.5}
+                      fill="url(#latencySparkGradient)"
                       dot={false}
                     />
-                  </LineChart>
+                  </AreaChart>
                 </ResponsiveContainer>
               </div>
             )}