diff --git a/app/system/app_languages.php b/app/system/app_languages.php
index b74ceafb36..26a7185f7d 100644
--- a/app/system/app_languages.php
+++ b/app/system/app_languages.php
@@ -944,6 +944,33 @@ $text['label-load_average']['zh-cn'] = "平均负载";
 $text['label-load_average']['ja-jp'] = "負荷平均";
 $text['label-load_average']['ko-kr'] = "부하 평균";
 
+$text['label-network_usage']['en-us'] = "Network Usage";
+$text['label-network_usage']['en-gb'] = "Network Usage";
+$text['label-network_usage']['ar-eg'] = "استخدام الشبكة";
+$text['label-network_usage']['de-at'] = "Netzwerknutzung";
+$text['label-network_usage']['de-ch'] = "Netzwerknutzung";
+$text['label-network_usage']['de-de'] = "Netzwerknutzung";
+$text['label-network_usage']['el-gr'] = "Χρήση δικτύου";
+$text['label-network_usage']['es-cl'] = "Uso de red";
+$text['label-network_usage']['es-mx'] = "Uso de red";
+$text['label-network_usage']['fr-ca'] = "Utilisation du réseau";
+$text['label-network_usage']['fr-fr'] = "Utilisation du réseau";
+$text['label-network_usage']['he-il'] = "שימוש ברשת";
+$text['label-network_usage']['it-it'] = "Utilizzo della rete";
+$text['label-network_usage']['ka-ge'] = "ქსელის გამოყენება";
+$text['label-network_usage']['nl-nl'] = "Netwerkgebruik";
+$text['label-network_usage']['pl-pl'] = "Wykorzystanie sieci";
+$text['label-network_usage']['pt-br'] = "Uso da rede";
+$text['label-network_usage']['pt-pt'] = "Utilização da rede";
+$text['label-network_usage']['ro-ro'] = "Utilizarea rețelei";
+$text['label-network_usage']['ru-ru'] = "Использование сети";
+$text['label-network_usage']['sv-se'] = "Nätverksanvändning";
+$text['label-network_usage']['uk-ua'] = "Використання мережі";
+$text['label-network_usage']['tr-tr'] = "Ağ Kullanımı";
+$text['label-network_usage']['zh-cn'] = "网络使用情况";
+$text['label-network_usage']['ja-jp'] = "ネットワーク使用状況";
+$text['label-network_usage']['ko-kr'] = "네트워크 사용량";
+
 $text['header-sys-status']['en-us'] = "System Status";
 $text['header-sys-status']['en-gb'] = "System Status";
 $text['header-sys-status']['ar-eg'] = "حالة النظام";
diff --git a/app/system/resources/dashboard/system_cpu_status.php b/app/system/resources/dashboard/system_cpu_status.php
index 3da68be77d..4b5c0cad02 100644
--- a/app/system/resources/dashboard/system_cpu_status.php
+++ b/app/system/resources/dashboard/system_cpu_status.php
@@ -61,7 +61,11 @@
 	subscriber::save_token($token, [system_dashboard_service::get_service_name()]);
 
 	if ($widget_chart_type === 'line') { ?>
-		<div class='hud_chart' style='width: 90%;'><canvas id='system_cpu_status_chart'></canvas></div>
+		<div class='hud_chart' style='width: 90%; height: 85%'><canvas id='system_cpu_status_chart'></canvas></div>
+		<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+		<script src="https://cdn.jsdelivr.net/npm/luxon/build/global/luxon.min.js"></script>
+		<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon"></script>
+		<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming"></script>
 
 		<script>
 			const cpu_status_auth_token = {
@@ -110,21 +114,14 @@
 				const chart = window.system_cpu_status_chart;
 				if (!chart) return;
 
-				// Store into ring buffer
-				cores.forEach((val, i) => {
-					cpu_history[i][cpu_index] = Math.round(val);
+				const now = Date.now();
+
+				// push one point per core dataset
+				chart.data.datasets.forEach((ds, i) => {
+					const y = Math.max(0, Math.min(100, Math.round(cores[i] ?? 0)));
+					ds.data.push({ x: now, y });
 				});
 
-				cpu_index = (cpu_index + 1) % max_points;
-
-				// Rotate each dataset's ring buffer to match chart order
-				chart.data.datasets.forEach((dataset, i) => {
-					const rotated = cpu_history[i].slice(cpu_index).concat(cpu_history[i].slice(0, cpu_index));
-					dataset.data = rotated;
-				});
-
-				chart.update();
-
 				// Optional: update total CPU %
 				const td_cpu_status = document.getElementById('td_system_cpu_status_chart');
 				if (td_cpu_status && payload.cpu_status?.total !== undefined) {
@@ -142,55 +139,61 @@
 			// Color palette (distinct and visually stacked)
 			const cpu_colors = ['#00bcd4', '#8bc34a', '#ffc107', '#e91e63'];
 
-			// Initialize the chart
 			window.system_cpu_status_chart = new Chart(
 				document.getElementById('system_cpu_status_chart').getContext('2d'),
 				{
 					type: 'line',
 					data: {
-						labels: Array.from({ length: max_points }, (_, i) => i + 1),
 						datasets: Array.from({ length: num_cores }, (_, i) => ({
 							label: `CPU ${i}`,
-							data: [...cpu_history[i]],
+							data: [],
 							fill: true,
 							borderColor: cpu_colors[i % cpu_colors.length],
-							backgroundColor: cpu_colors[i % cpu_colors.length],
+							backgroundColor: (cpu_colors[i % cpu_colors.length]) + '33', // light fill
 							tension: 0.3,
-							pointRadius: 0
+							pointRadius: 0,
+							spanGaps: true,
+							// enable stacking
+							stack: 'cpu',
 						}))
 					},
 					options: {
 						animation: false,
+						parsing: { xAxisKey: 'x', yAxisKey: 'y' },
+						maintainAspectRatio: false,
 						scales: {
+							x: {
+								type: 'realtime',
+								realtime: {
+									duration: 60000,   // show last 60s
+									refresh: 1000,     // redraw/add points every 1s
+									delay: 2000        // draw with slight delay
+								},
+								grid: { drawOnChartArea: false },
+								ticks: { display: false },
+								title: { display: false }
+							},
 							y: {
 								beginAtZero: true,
 								stacked: true,
 								min: 0,
 								max: num_cores * 100,
 								ticks: {
-									stepSize: 100
-								}
-							},
-							x: {
-								ticks: {
+									stepSize: 100,
 									autoSkip: true,
-									callback: function (val, index) {
-										return (index % 100 === 0 ? ' ' : ' ');
-									}
-								},
-								grid: {
-									drawOnChartArea: false
+									callback: (v) => v + '%'
 								}
 							}
 						},
 						plugins: {
+							legend: { display: false },
 							tooltip: {
 								mode: 'index',
-								intersect: false
+								intersect: false,
+								callbacks: {
+									label: (ctx) => `${ctx.dataset.label}: ${Math.round(ctx.parsed.y)}%`
+								}
 							},
-							legend: {
-								display: false
-							}
 						}
 					}
 				}
diff --git a/app/system/resources/dashboard/system_network_status.php b/app/system/resources/dashboard/system_network_status.php
index 6deab09644..98cf59b43d 100644
--- a/app/system/resources/dashboard/system_network_status.php
+++ b/app/system/resources/dashboard/system_network_status.php
@@ -1,25 +1,24 @@
 <?php
 
-	//includes files
-	require_once dirname(__DIR__, 4) . "/resources/require.php";
+//includes files
+require_once dirname(__DIR__, 4) . "/resources/require.php";
 
-	//check permisions
-	require_once "resources/check_auth.php";
-	if (permission_exists('system_view_network')) {
-		//access granted
-	}
-	else {
-		return;
-	}
+//check permisions
+require_once "resources/check_auth.php";
+if (permission_exists('system_view_network')) {
+	//access granted
+} else {
+	return;
+}
 
-	//add multi-lingual support
-	$language = new text;
-	$text = $language->get($settings->get('domain', 'language', 'en-us'), 'app/system');
+//add multi-lingual support
+$language = new text;
+$text = $language->get($settings->get('domain', 'language', 'en-us'), 'app/system');
 
-	//set the row style class names
-	$c = 0;
-	$row_style["0"] = "row_style0";
-	$row_style["1"] = "row_style1";
+//set the row style class names
+$c = 0;
+$row_style["0"] = "row_style0";
+$row_style["1"] = "row_style1";
 
 //	//get the network details
 //	if (stristr(PHP_OS, 'Linux')) {
@@ -33,174 +32,155 @@
 //
 //	}
 
-	$token = (new token())->create($_SERVER['PHP_SELF']);
+$token = (new token())->create($_SERVER['PHP_SELF']);
 
-	// Register as a subscriber for the dashboard information service
-	subscriber::save_token($token, [system_dashboard_service::get_service_name()]);
+// Register as a subscriber for the dashboard information service
+subscriber::save_token($token, [system_dashboard_service::get_service_name()]);
 
-	//system network status
-	echo "<div class='hud_box'>\n";
-	echo "<input id='token' type='hidden' name='" . $token['name'] . "' value='" . $token['hash'] . "'>\n";
-		echo "<div class='hud_content'>\n";
-			echo "<span class='hud_title'>\n";
-				echo "<a onclick=\"document.location.href='".PROJECT_PATH."/app/system/system.php'\">".$text['label-network_usage']."</a>\n";
-			echo "</span>\n";
-			//if ($dashboard_chart_type === 'line') { ?>
-			<div class='hud_chart' style='width: 100%; height: 100%'>
-				<canvas id='system_network_status_chart'></canvas>
-			</div>
+//system network status
+echo "<div class='hud_box'>\n";
+echo "<input id='token' type='hidden' name='" . $token['name'] . "' value='" . $token['hash'] . "'>\n";
+echo "<div class='hud_content'>\n";
+echo "<span class='hud_title'>\n";
+echo "<a onclick=\"document.location.href='" . PROJECT_PATH . "/app/system/system.php'\">" . $text['label-network_usage'] . "</a>\n";
+echo "</span>\n";
+//if ($dashboard_chart_type === 'line') { ?>
+	<div class='hud_chart' style='width: 100%; height: 85%'>
+		<canvas id='system_network_status_chart'></canvas>
+	</div>
+	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 
-			<script>
-				const network_status_auth_token = {
-					name: "<?= $token['name']; ?>",
-					hash: "<?= $token['hash']; ?>"
-				};
+	<!-- 2) Luxon -->
+	<script src="https://cdn.jsdelivr.net/npm/luxon/build/global/luxon.min.js"></script>
 
-				const network_status_subject = '<?php echo system_dashboard_service::NETWORK_STATUS_TOPIC; ?>';
+	<!-- 3) Adapter for Luxon -->
+	<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon"></script>
 
-				// Use your theme colors: [main, accent1, accent2]
-				const dashboard_network_usage_chart_main_color = [
-					'<?php echo ($settings->get('theme', 'dashboard_network_usage_chart_main_color', [0=>'#03c04a'])[0]); ?>',  // green default
-					'<?php echo ($settings->get('theme', 'dashboard_network_usage_chart_main_color', [1=>'#ff9933'])[1]); ?>'   // orange default
-				];
+	<!-- 4) Streaming plugin -->
+	<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming"></script>
+	<script>
+		const network_status_auth_token = {
+			name: "<?= $token['name']; ?>",
+			hash: "<?= $token['hash']; ?>"
+		};
 
-				// ---- Chart state ----
-				const max_network_points = 60;			// seconds of history (one point per update)
-				let ring_index = 0;
-				const rx_history = Array.from({ length: max_network_points }, () => 0);
-				const tx_history = Array.from({ length: max_network_points }, () => 0);
+		const network_status_subject = '<?php echo system_dashboard_service::NETWORK_STATUS_TOPIC; ?>';
 
-				function to_units(bps) {
-					if (bps == null || isNaN(bps)) return { val: 0, unit: "bps" }
-					if (bps < 1e3) return { val: bps, unit: "bps" };
-					if (bps < 1e6) return { val: bps / 1e3, unit: "Kbps" };
-					if (bps < 1e9) return { val: bps / 1e6, unit: "Mbps" };
-					return { val: bps / 1e9, unit: "Gbps" };
-				}
+		// Use your theme colors: [main, accent1, accent2]
+		const dashboard_network_usage_chart_main_color = [
+			'<?php echo($settings->get('theme', 'dashboard_network_usage_chart_main_color', [0 => '#03c04a'])[0]); ?>',  // green default
+			'<?php echo($settings->get('theme', 'dashboard_network_usage_chart_main_color', [1 => '#ff9933'])[1]); ?>'   // orange default
+		];
 
-				function human_units(val, unit) {
-					return `${val.toFixed(2)} ${unit}`;
-				}
+		function format_bitrate(v) {
+			if (v == null) return '';
+			const u = ['bps', 'Kbps', 'Mbps', 'Gbps', 'Tbps'];
+			let i = 0, n = Number(v);
+			while (n >= 1000 && i < u.length - 1) {
+				n /= 1000;
+				i++;
+			}
+			return n.toFixed(1) + ' ' + u[i];
+		}
 
-				// --- helpers: keep raw bps, format for display ---
-				function format_bitrate(bps) {
-					if (bps == null || isNaN(bps)) return '0 bps';
-					const abs = Math.abs(bps);
-					if (abs < 1)       return bps.toFixed(2) + ' bps';    // sub-1 bps
-					if (abs < 1e3)     return Math.round(bps) + ' bps';
-					if (abs < 1e6)     return (bps / 1e3).toFixed(2) + ' Kbps';
-					if (abs < 1e9)     return (bps / 1e6).toFixed(2) + ' Mbps';
-					return (bps / 1e9).toFixed(2) + ' Gbps';
-				}
+		function sanitize_bps(bps) {
+			if (bps == null || isNaN(bps)) return 0;
+			const v = Number(bps);
+			return Math.abs(v) < 1e-6 ? 0 : v;
+		}
 
-				// Optional: round tiny float noise to 0 so scales don't jitter
-				function sanitize_bps(bps) {
-					if (bps == null || isNaN(bps)) return 0;
-					const v = Number(bps);
-					return Math.abs(v) < 1e-6 ? 0 : v;
-				}
+		// 3) ---- Chart init ----
+		const ctx = document.getElementById('system_network_status_chart').getContext('2d');
+		const rxColor = dashboard_network_usage_chart_main_color[0];
+		const txColor = dashboard_network_usage_chart_main_color[1];
 
-				// ---- Chart init ----
-				const ctx = document.getElementById('system_network_status_chart').getContext('2d');
-				const rxColor = dashboard_network_usage_chart_main_color[0];
-				const txColor = dashboard_network_usage_chart_main_color[1];
-				var current_unit = 'bps';
-
-				window.system_network_status_chart = new Chart(ctx, {
-					type: 'line',
-					data: {
-						labels: Array.from({ length: max_network_points }, () => ''),
-						datasets: [
-							{
-								label: 'RX',
-								data: [...rx_history],           // store raw bps here
-								borderColor: rxColor,
-								backgroundColor: rxColor + '33',
-								fill: true,
-								tension: 0.3,
-								pointRadius: 0
-							},
-							{
-								label: 'TX',
-								data: [...tx_history],           // store raw bps here
-								borderColor: txColor,
-								backgroundColor: txColor + '33',
-								fill: true,
-								tension: 0.3,
-								pointRadius: 0
-							}
-						]
+		// IMPORTANT: assign to window.system_network_status_chart
+		window.system_network_status_chart = new Chart(ctx, {
+			type: 'line',
+			data: {
+				datasets: [
+					{
+						label: 'RX',
+						borderColor: rxColor,
+						backgroundColor: rxColor + '33',
+						fill: true,
+						tension: 0.3,
+						pointRadius: 0,
+						spanGaps: true,
+						data: []
 					},
-					options: {
-						animation: false,
-						plugins: {
-							legend: { display: true },
-							tooltip: {
-								mode: 'index',
-								intersect: false,
-								callbacks: {
-									// use raw value to format with the right unit per-point
-									label: (ctx) => `${ctx.dataset.label}: ${format_bitrate(ctx.raw ?? ctx.parsed.y)}`
-								}
-							}
-						},
-						scales: {
-							y: {
-								beginAtZero: true,
-								// let Chart.js auto-fit; no max/suggestedMax
-								ticks: {
-									// format axis tick values adaptively (bps/Kbps/Mbps/…)
-									callback: (value) => format_bitrate(value)
-								},
-								title: { display: false }
-							},
-							x: {
-								grid: { drawOnChartArea: false },
-								ticks: { autoSkip: true, maxTicksLimit: 6 }
-							}
-						}
+					{
+						label: 'TX',
+						borderColor: txColor,
+						backgroundColor: txColor + '33',
+						fill: true,
+						tension: 0.3,
+						pointRadius: 0,
+						spanGaps: true,
+						data: []
+					}
+				]
+			},
+			options: {
+				// streaming usually looks best with animation off; tweak if you like a tiny slide
+				animation: false,
+				parsing: { xAxisKey: 'x', yAxisKey: 'y' },
+				maintainAspectRatio: false,
+				scales: {
+					x: {
+						type: 'realtime',
+						realtime: {
+							duration: 60000,   // last 60s
+							refresh: 1000,     // redraw every 1s
+							delay: 2000        // 2s render delay to handle late packets
+							// (no onRefresh: we push from your websocket callback)
+						},
+						grid: {drawOnChartArea: false},
+						ticks: {display: false},
+					},
+					y: {
+						beginAtZero: true,
+						grace: '5%',
+						ticks: {callback: (v) => format_bitrate(v)}
+					}
+				},
+				plugins: {
+					legend: {display: false},
+					tooltip: {
+						mode: 'index',
+						intersect: false,
+						callbacks: {label: (ctx) => `${ctx.dataset.label}: ${format_bitrate(ctx.parsed.y)}`}
 					}
-				});
-
-				// ---- Live updates ----
-				function update_network_chart(payload) {
-					const chart = window.system_network_status_chart;
-					if (!chart) return;
-
-					const rx_bps = sanitize_bps(payload?.network_status?.rx_bps);
-					const tx_bps = sanitize_bps(payload?.network_status?.tx_bps);
-
-					// write raw bps into ring buffers
-					rx_history[ring_index] = rx_bps;
-					tx_history[ring_index] = tx_bps;
-
-					ring_index = (ring_index + 1) % max_network_points;
-
-					const rotate = (arr) => arr.slice(ring_index).concat(arr.slice(0, ring_index));
-					chart.data.datasets[0].data = rotate(rx_history);
-					chart.data.datasets[1].data = rotate(tx_history);
-
-					chart.update();
 				}
+			}
+		});
 
-				function connect_network_status_websocket() {
-					network_client = new ws_client(`wss://${window.location.hostname}/websockets/`, network_status_auth_token);
+		function update_network_chart(payload) {
+			const chart = window.system_network_status_chart;
+			if (!chart) return;
 
-					network_client.ws.addEventListener('open', async () => {
-						try {
-							await network_client.request('authentication');
-							network_client.onEvent(network_status_subject, update_network_chart);
-						} catch (err) {
-							console.error('WS setup failed: ', err);
-						}
-					});
+			const rx_bps = sanitize_bps(payload?.network_status?.rx_bps);
+			const tx_bps = sanitize_bps(payload?.network_status?.tx_bps);
+			const now = Date.now();
 
-					network_client.ws.addEventListener('close', () => {
-						console.warn('Network websocket disconnected');
-					});
+			chart.data.datasets[0].data.push({x: now, y: rx_bps});
+			chart.data.datasets[1].data.push({x: now, y: tx_bps});
+		}
+
+		function connect_network_status_websocket() {
+			network_client = new ws_client(`wss://${window.location.hostname}/websockets/`, network_status_auth_token);
+			network_client.ws.addEventListener('open', async () => {
+				try {
+					await network_client.request('authentication');
+					network_client.onEvent(network_status_subject, update_network_chart);
+				} catch (err) {
+					console.error('WS setup failed: ', err);
 				}
+			});
+			network_client.ws.addEventListener('close', () => console.warn('Network websocket disconnected'));
+		}
 
-				connect_network_status_websocket();
-			</script><?php	//	}
-		echo "</div>\n";
-	echo "</div>\n";
+		connect_network_status_websocket();
+	</script><?php //	}
+echo "</div>\n";
+echo "</div>\n";