diff --git a/src/app/api/metrics/route.ts b/src/app/api/metrics/route.ts
index cb43844..321b57e 100644
--- a/src/app/api/metrics/route.ts
+++ b/src/app/api/metrics/route.ts
@@ -39,7 +39,7 @@ export async function GET() {
     const start = end - 6 * 3600; // 6 hours
     const step = 120; // 2-minute resolution
 
-    const [cpu, ram, netRx, netTx] = await Promise.all([
+    const [cpu, ram, netRx, netTx, temp] = await Promise.all([
       // CPU usage percent
       queryRange(
         `100 - (avg(rate(node_cpu_seconds_total{mode="idle",instance="${INSTANCE}"}[2m])) * 100)`,
@@ -60,16 +60,21 @@ export async function GET() {
         `rate(node_network_transmit_bytes_total{instance="${INSTANCE}",device="${NIC}"}[2m])`,
         start, end, step
       ),
+      // CPU temperature (max across cores)
+      queryRange(
+        `max(node_hwmon_temp_celsius{instance="${INSTANCE}",chip="platform_coretemp_0"})`,
+        start, end, step
+      ),
     ]);
 
     return NextResponse.json(
-      { cpu, ram, netRx, netTx },
+      { cpu, ram, netRx, netTx, temp },
       { headers: { 'Cache-Control': 'no-cache, no-store, must-revalidate' } }
     );
   } catch (error) {
     console.error('Metrics error:', error);
     return NextResponse.json(
-      { error: 'Failed to fetch metrics', cpu: [], ram: [], netRx: [], netTx: [] },
+      { error: 'Failed to fetch metrics', cpu: [], ram: [], netRx: [], netTx: [], temp: [] },
       { status: 500 }
     );
   }
diff --git a/src/components/SystemTrends.tsx b/src/components/SystemTrends.tsx
index 5ba886f..1656a2d 100644
--- a/src/components/SystemTrends.tsx
+++ b/src/components/SystemTrends.tsx
@@ -166,13 +166,14 @@ export function SystemTrends({ uptimeLabel, loadAvg }: SystemTrendsProps) {
 
       {/* Charts */}
       {loading && !data ? (
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
+          <ShimmerChart />
           <ShimmerChart />
           <ShimmerChart />
           <ShimmerChart />
         </div>
       ) : data ? (
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
           <SparkChart
             label="CPU"
             series={data.cpu}
@@ -189,6 +190,14 @@ export function SystemTrends({ uptimeLabel, loadAvg }: SystemTrendsProps) {
             formatValue={(v) => `${v.toFixed(1)}%`}
             domain={[0, 100]}
           />
+          <SparkChart
+            label="Temp"
+            series={data.temp}
+            color="#ef4444"
+            fillColor="#ef4444"
+            formatValue={(v) => `${v.toFixed(0)}`}
+            unit="°C"
+          />
           <SparkChart
             label="Network"
             series={data.netRx.map(([ts, val], i) => {
diff --git a/src/lib/stats.ts b/src/lib/stats.ts
index 1c4075b..5939290 100644
--- a/src/lib/stats.ts
+++ b/src/lib/stats.ts
@@ -47,6 +47,7 @@ export interface MetricsData {
   ram: MetricSeries;
   netRx: MetricSeries;
   netTx: MetricSeries;
+  temp: MetricSeries;
 }
 
 export function formatBytes(bytes: number): string {