diff --git a/frontend/src/pages/Workloads.tsx b/frontend/src/pages/Workloads.tsx
index 377690d..2e5a9c8 100644
--- a/frontend/src/pages/Workloads.tsx
+++ b/frontend/src/pages/Workloads.tsx
@@ -122,7 +122,20 @@ function summarizeTraffic(traffic: Array<Record<string, unknown>>) {
       matchingPolicies,
     });
   }
-  return Array.from(summaries.values()).sort((left, right) => right.bytes - left.bytes);
+  return Array.from(summaries.values()).sort((left, right) => {
+    const leftTime = Date.parse(left.observedAt || "");
+    const rightTime = Date.parse(right.observedAt || "");
+    if (Number.isFinite(leftTime) && Number.isFinite(rightTime) && leftTime !== rightTime) {
+      return rightTime - leftTime;
+    }
+    if (Number.isFinite(rightTime) && !Number.isFinite(leftTime)) {
+      return 1;
+    }
+    if (Number.isFinite(leftTime) && !Number.isFinite(rightTime)) {
+      return -1;
+    }
+    return right.bytes - left.bytes;
+  });
 }
 
 function endpointText(flow: TrafficSummary) {
@@ -138,7 +151,7 @@ function uniqueValues(values: string[]) {
 }
 
 function TrafficBars({ traffic }: { traffic: TrafficSummary[] }) {
-  const top = traffic.slice(0, 5);
+  const top = [...traffic].sort((left, right) => right.bytes - left.bytes).slice(0, 5);
   const max = Math.max(...top.map((flow) => flow.bytes), 1);
   if (!top.length) {
     return <div className="rounded-md border border-border p-3 text-xs text-slate-500">No traffic data yet.</div>;