diff --git a/AppImage/components/latency-detail-modal.tsx b/AppImage/components/latency-detail-modal.tsx
index 51c6ff4e..1a6452bf 100644
--- a/AppImage/components/latency-detail-modal.tsx
+++ b/AppImage/components/latency-detail-modal.tsx
@@ -983,8 +983,8 @@ export function LatencyDetailModal({ open, onOpenChange, currentLatency }: Laten
                 <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} />
+                      <stop offset="0%" stopColor="#3b82f6" stopOpacity={0.4} />
+                      <stop offset="100%" stopColor="#3b82f6" stopOpacity={0.05} />
                     </linearGradient>
                   </defs>
                   <CartesianGrid strokeDasharray="3 3" stroke="#374151" opacity={0.3} />
@@ -999,8 +999,8 @@ export function LatencyDetailModal({ open, onOpenChange, currentLatency }: Laten
                     stroke="#6b7280" 
                     fontSize={10}
                     tickLine={false}
-                    domain={['dataMin - 5', 'dataMax + 10']}
-                    tickFormatter={(v) => `${v}ms`}
+                    domain={[(dataMin: number) => Math.max(0, dataMin - Math.max(5, dataMin * 0.5)), (dataMax: number) => dataMax + Math.max(10, dataMax * 0.3)]}
+                    tickFormatter={(v) => `${v.toFixed(1)}ms`}
                   />
                   <Tooltip content={<CustomTooltip />} />
                   <Area
@@ -1011,6 +1011,7 @@ export function LatencyDetailModal({ open, onOpenChange, currentLatency }: Laten
                     fill="url(#latencyRealtimeGradient)"
                     dot={{ fill: '#3b82f6', strokeWidth: 0, r: 3 }}
                     activeDot={{ r: 5, fill: '#3b82f6' }}
+                    baseValue="dataMin"
                   />
                 </AreaChart>
               </ResponsiveContainer>
@@ -1031,8 +1032,8 @@ export function LatencyDetailModal({ open, onOpenChange, currentLatency }: Laten
               <AreaChart data={chartData}>
                 <defs>
                   <linearGradient id="latencyGradient" x1="0" y1="0" x2="0" y2="1">
-                    <stop offset="5%" stopColor="#3b82f6" stopOpacity={0.3} />
-                    <stop offset="95%" stopColor="#3b82f6" stopOpacity={0} />
+                    <stop offset="0%" stopColor="#3b82f6" stopOpacity={0.4} />
+                    <stop offset="100%" stopColor="#3b82f6" stopOpacity={0.05} />
                   </linearGradient>
                 </defs>
                 <CartesianGrid strokeDasharray="3 3" stroke="#374151" opacity={0.3} />
@@ -1047,8 +1048,8 @@ export function LatencyDetailModal({ open, onOpenChange, currentLatency }: Laten
                   stroke="#6b7280" 
                   fontSize={10}
                   tickLine={false}
-                  domain={['dataMin - 5', 'dataMax + 10']}
-                  tickFormatter={(v) => `${v}ms`}
+                  domain={[(dataMin: number) => Math.max(0, dataMin - Math.max(5, dataMin * 0.5)), (dataMax: number) => dataMax + Math.max(10, dataMax * 0.3)]}
+                  tickFormatter={(v) => `${v.toFixed(1)}ms`}
                 />
                 <Tooltip content={<CustomTooltip />} />
                 <Area
@@ -1057,6 +1058,7 @@ export function LatencyDetailModal({ open, onOpenChange, currentLatency }: Laten
                   stroke="#3b82f6"
                   strokeWidth={2}
                   fill="url(#latencyGradient)"
+                  baseValue="dataMin"
                 />
               </AreaChart>
             </ResponsiveContainer>
diff --git a/AppImage/components/network-metrics.tsx b/AppImage/components/network-metrics.tsx
index d0a3b9b5..8a86ece5 100644
--- a/AppImage/components/network-metrics.tsx
+++ b/AppImage/components/network-metrics.tsx
@@ -408,14 +408,13 @@ export function NetworkMetrics() {
             {latencyData?.data && latencyData.data.length > 0 && (
               <div className="h-[40px] w-full">
                 <ResponsiveContainer width="100%" height="100%">
-                  <AreaChart data={latencyData.data.slice(-30)} margin={{ top: 0, right: 0, left: 0, bottom: 0 }}>
+                  <AreaChart data={latencyData.data.slice(-30)} margin={{ top: 2, 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} />
+                        <stop offset="0%" stopColor="#3b82f6" stopOpacity={0.4} />
+                        <stop offset="100%" stopColor="#3b82f6" stopOpacity={0.05} />
                       </linearGradient>
                     </defs>
-                    <YAxis hide domain={['dataMin - 5', 'dataMax + 5']} />
                     <Area
                       type="monotone"
                       dataKey="value"
@@ -423,6 +422,8 @@ export function NetworkMetrics() {
                       strokeWidth={1.5}
                       fill="url(#latencySparkGradient)"
                       dot={false}
+                      isAnimationActive={false}
+                      baseValue="dataMin"
                     />
                   </AreaChart>
                 </ResponsiveContainer>