diff --git a/src/components/features/charts.tsx b/src/components/features/charts.tsx
new file mode 100644
index 0000000..c2d8aa0
--- /dev/null
+++ b/src/components/features/charts.tsx
@@ -0,0 +1,227 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { useEffect, useRef, useState } from "react";
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Legend,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+import type { MetricPoint } from "@/api/contracts/models";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { useUiStore } from "@/stores/ui-store";
+
+/**
+ * Recharts needs concrete color strings, so resolve the active CSS variables
+ * whenever the accent or theme preference changes.
+ */
+function useChartTheme() {
+  const accent = useUiStore((state) => state.accent);
+  const theme = useUiStore((state) => state.theme);
+  const [colors, setColors] = useState({
+    primary: "hsl(224 88% 53%)",
+    accent: "hsl(30 100% 48%)",
+    muted: "hsl(226 14% 44%)",
+    grid: "hsl(222 24% 86% / 0.5)",
+  });
+
+  useEffect(() => {
+    // Defer one frame so the Providers effect has applied the new
+    // data-accent / dark-class attributes before the variables are read.
+    const frame = requestAnimationFrame(() => {
+      const styles = getComputedStyle(document.documentElement);
+      const read = (name: string) => `hsl(${styles.getPropertyValue(name).trim()})`;
+      setColors({
+        primary: read("--primary"),
+        accent: read("--accent"),
+        muted: read("--muted-foreground"),
+        grid: `hsl(${styles.getPropertyValue("--border").trim()} / 0.5)`,
+      });
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [accent, theme]);
+
+  return colors;
+}
+
+function GlassTooltip({
+  active,
+  payload,
+  label,
+}: {
+  active?: boolean;
+  payload?: Array<{ name: string; value: number; color: string }>;
+  label?: string;
+}) {
+  if (!active || !payload?.length) return null;
+  return (
+    <div className="glass-modal rounded-lg px-3 py-2 text-xs">
+      <div className="mb-1 font-mono text-muted-foreground">{label?.slice(11, 16)}</div>
+      {payload.map((entry) => (
+        <div key={entry.name} className="flex items-center gap-2">
+          <span className="h-2 w-2 rounded-full" style={{ background: entry.color }} />
+          <span className="text-muted-foreground">{entry.name}</span>
+          <span className="ml-auto pl-3 font-mono font-medium text-foreground">
+            {Math.round(entry.value).toLocaleString()}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function ChartFrame({
+  children,
+}: {
+  children: (size: { width: number; height: number }) => ReactNode;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [size, setSize] = useState({ width: 0, height: 0 });
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    const target = element;
+
+    function readSize() {
+      const rect = target.getBoundingClientRect();
+      setSize({
+        width: Math.max(1, Math.floor(rect.width)),
+        height: Math.max(1, Math.floor(rect.height)),
+      });
+    }
+
+    readSize();
+    const observer = new ResizeObserver(readSize);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <CardContent className="h-56 min-w-0 sm:h-64 lg:h-72">
+      <div ref={ref} className="h-full min-w-0">
+        {size.width > 1 && size.height > 1 ? (
+          children(size)
+        ) : (
+          <div className="skeleton h-full" />
+        )}
+      </div>
+    </CardContent>
+  );
+}
+
+export function UsageChart({
+  data,
+  title = "Resource history",
+}: {
+  data: MetricPoint[];
+  title?: string;
+}) {
+  const colors = useChartTheme();
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+      </CardHeader>
+      <ChartFrame>
+        {({ width, height }) => (
+          <AreaChart data={data} width={width} height={height}>
+            <defs>
+              <linearGradient id="usage-cpu" x1="0" x2="0" y1="0" y2="1">
+                <stop offset="5%" stopColor={colors.primary} stopOpacity={0.35} />
+                <stop offset="95%" stopColor={colors.primary} stopOpacity={0.02} />
+              </linearGradient>
+              <linearGradient id="usage-memory" x1="0" x2="0" y1="0" y2="1">
+                <stop offset="5%" stopColor={colors.accent} stopOpacity={0.25} />
+                <stop offset="95%" stopColor={colors.accent} stopOpacity={0.02} />
+              </linearGradient>
+            </defs>
+            <CartesianGrid stroke={colors.grid} strokeDasharray="3 3" vertical={false} />
+            <XAxis
+              dataKey="timestamp"
+              tickFormatter={(value: string) => value.slice(11, 16)}
+              tick={{ fontSize: 11, fill: colors.muted }}
+              axisLine={false}
+              tickLine={false}
+            />
+            <YAxis
+              tick={{ fontSize: 11, fill: colors.muted }}
+              axisLine={false}
+              tickLine={false}
+              width={36}
+            />
+            <Tooltip content={<GlassTooltip />} />
+            <Legend iconType="circle" iconSize={8} />
+            <Area
+              type="monotone"
+              dataKey="cpu"
+              stroke={colors.primary}
+              strokeWidth={2}
+              fill="url(#usage-cpu)"
+              name="CPU"
+            />
+            <Area
+              type="monotone"
+              dataKey="memory"
+              stroke={colors.accent}
+              strokeWidth={2}
+              fill="url(#usage-memory)"
+              name="Memory"
+            />
+          </AreaChart>
+        )}
+      </ChartFrame>
+    </Card>
+  );
+}
+
+export function TrafficChart({ data }: { data: MetricPoint[] }) {
+  const colors = useChartTheme();
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Traffic and requests</CardTitle>
+      </CardHeader>
+      <ChartFrame>
+        {({ width, height }) => (
+          <BarChart data={data.slice(-12)} width={width} height={height}>
+            <CartesianGrid stroke={colors.grid} strokeDasharray="3 3" vertical={false} />
+            <XAxis
+              dataKey="timestamp"
+              tickFormatter={(value: string) => value.slice(11, 16)}
+              tick={{ fontSize: 11, fill: colors.muted }}
+              axisLine={false}
+              tickLine={false}
+            />
+            <YAxis
+              tick={{ fontSize: 11, fill: colors.muted }}
+              axisLine={false}
+              tickLine={false}
+              width={36}
+            />
+            <Tooltip content={<GlassTooltip />} cursor={{ fill: colors.grid }} />
+            <Legend iconType="circle" iconSize={8} />
+            <Bar
+              dataKey="bandwidth"
+              fill={colors.primary}
+              name="Bandwidth MB"
+              radius={[4, 4, 0, 0]}
+            />
+            <Bar
+              dataKey="requests"
+              fill={colors.accent}
+              name="Requests"
+              radius={[4, 4, 0, 0]}
+            />
+          </BarChart>
+        )}
+      </ChartFrame>
+    </Card>
+  );
+}