diff --git a/ui/src/components/sidebar/connectionStats.tsx b/ui/src/components/sidebar/connectionStats.tsx
index 404deb1..f0988e0 100644
--- a/ui/src/components/sidebar/connectionStats.tsx
+++ b/ui/src/components/sidebar/connectionStats.tsx
@@ -1,45 +1,14 @@
 import { useInterval } from "usehooks-ts";
 
 import SidebarHeader from "@/components/SidebarHeader";
-import { GridCard } from "@/components/Card";
 import { useRTCStore, useUiStore } from "@/hooks/stores";
-import StatChart from "@/components/StatChart";
 
-function createChartArray<T, K extends keyof T>(
-  stream: Map<number, T>,
-  metric: K,
-): { date: number; stat: T[K] | null }[] {
-  const stat = Array.from(stream).map(([key, stats]) => {
-    return { date: key, stat: stats[metric] };
-  });
-
-  // Sort the dates to ensure they are in chronological order
-  const sortedStat = stat.map(x => x.date).sort((a, b) => a - b);
-
-  // Determine the earliest statistic date
-  const earliestStat = sortedStat[0];
-
-  // Current time in seconds since the Unix epoch
-  const now = Math.floor(Date.now() / 1000);
-
-  // Determine the starting point for the chart data
-  const firstChartDate = earliestStat ? Math.min(earliestStat, now - 120) : now - 120;
-
-  // Generate the chart array for the range between 'firstChartDate' and 'now'
-  return Array.from({ length: now - firstChartDate }, (_, i) => {
-    const currentDate = firstChartDate + i;
-    return {
-      date: currentDate,
-      // Find the statistic for 'currentDate', or use the last known statistic if none exists for that date
-      stat: stat.find(x => x.date === currentDate)?.stat ?? null,
-    };
-  });
-}
+import { createChartArray, Metric } from "../Metric";
+import { SettingsSectionHeader } from "../SettingsSectionHeader";
 
 export default function ConnectionStatsSidebar() {
-  const inboundRtpStats = useRTCStore(state => state.inboundRtpStats);
-
-  const candidatePairStats = useRTCStore(state => state.candidatePairStats);
+  const inboundVideoRtpStats = useRTCStore(state => state.inboundRtpStats);
+  const iceCandidatePairStats = useRTCStore(state => state.candidatePairStats);
   const setSidebarView = useUiStore(state => state.setSidebarView);
 
   function isMetricSupported<T, K extends keyof T>(
@@ -49,7 +18,7 @@ export default function ConnectionStatsSidebar() {
     return Array.from(stream).some(([, stat]) => stat[metric] !== undefined);
   }
 
-  const appendInboundRtpStats = useRTCStore(state => state.appendInboundRtpStats);
+  const appendInboundVideoRtpStats = useRTCStore(state => state.appendInboundRtpStats);
   const appendIceCandidatePair = useRTCStore(state => state.appendCandidatePairStats);
   const appendDiskDataChannelStats = useRTCStore(
     state => state.appendDiskDataChannelStats,
@@ -66,15 +35,13 @@ export default function ConnectionStatsSidebar() {
   useInterval(function collectWebRTCStats() {
     (async () => {
       if (!mediaStream) return;
-      const videoTrack = mediaStream.getVideoTracks()[0];
-      if (!videoTrack) return;
       const stats = await peerConnection?.getStats();
       let successfulLocalCandidateId: string | null = null;
       let successfulRemoteCandidateId: string | null = null;
 
       stats?.forEach(report => {
-        if (report.type === "inbound-rtp") {
-          appendInboundRtpStats(report);
+        if (report.type === "inbound-rtp" && report.kind === "video") {
+          appendInboundVideoRtpStats(report);
         } else if (report.type === "candidate-pair" && report.nominated) {
           if (report.state === "succeeded") {
             successfulLocalCandidateId = report.localCandidateId;
@@ -98,144 +65,139 @@ export default function ConnectionStatsSidebar() {
     })();
   }, 500);
 
+  const jitterBufferDelay = createChartArray(inboundVideoRtpStats, "jitterBufferDelay");
+  const jitterBufferEmittedCount = createChartArray(
+    inboundVideoRtpStats,
+    "jitterBufferEmittedCount",
+  );
+
+  const jitterBufferAvgDelayData = jitterBufferDelay.map((d, idx) => {
+    if (idx === 0) return { date: d.date, stat: null };
+    const prevDelay = jitterBufferDelay[idx - 1]?.stat as number | null | undefined;
+    const currDelay = d.stat as number | null | undefined;
+    const prevEmitted =
+      (jitterBufferEmittedCount[idx - 1]?.stat as number | null | undefined) ?? null;
+    const currEmitted =
+      (jitterBufferEmittedCount[idx]?.stat as number | null | undefined) ?? null;
+
+    if (
+      prevDelay == null ||
+      currDelay == null ||
+      prevEmitted == null ||
+      currEmitted == null
+    ) {
+      return { date: d.date, stat: null };
+    }
+
+    const deltaDelay = currDelay - prevDelay;
+    const deltaEmitted = currEmitted - prevEmitted;
+
+    // Guard counter resets or no emitted frames
+    if (deltaDelay < 0 || deltaEmitted <= 0) {
+      return { date: d.date, stat: null };
+    }
+
+    const valueMs = Math.round((deltaDelay / deltaEmitted) * 1000);
+    return { date: d.date, stat: valueMs };
+  });
+
+  // Rolling average over the last N seconds for the reference line
+  const rollingWindowSeconds = 20;
+  const recent = jitterBufferAvgDelayData
+    .slice(-rollingWindowSeconds)
+    .filter(x => x.stat != null) as { date: number; stat: number }[];
+  const referenceValue =
+    recent.length > 0
+      ? Math.round(recent.reduce((sum, x) => sum + (x.stat as number), 0) / recent.length)
+      : undefined;
+
   return (
     <div className="grid h-full grid-rows-(--grid-headerBody) shadow-xs">
       <SidebarHeader title="Connection Stats" setSidebarView={setSidebarView} />
       <div className="h-full space-y-4 overflow-y-scroll bg-white px-4 py-2 pb-8 dark:bg-slate-900">
         <div className="space-y-4">
-          {/*
-            The entire sidebar component is always rendered, with a display none when not visible
-            The charts below, need a height and width, otherwise they throw. So simply don't render them unless the thing is visible
-          */}
           {sidebarView === "connection-stats" && (
-            <div className="space-y-4">
-              <div className="space-y-2">
-                <div>
-                  <h2 className="text-lg font-semibold text-black dark:text-white">
-                    Packets Lost
-                  </h2>
-                  <p className="text-sm text-slate-700 dark:text-slate-300">
-                    Number of data packets lost during transmission.
-                  </p>
-                </div>
-                <GridCard>
-                  <div className="flex h-[127px] w-full items-center justify-center text-sm text-slate-500">
-                    {inboundRtpStats.size === 0 ? (
-                      <div className="flex flex-col items-center space-y-1">
-                        <p className="text-slate-700">Waiting for data...</p>
-                      </div>
-                    ) : isMetricSupported(inboundRtpStats, "packetsLost") ? (
-                      <StatChart
-                        data={createChartArray(inboundRtpStats, "packetsLost")}
-                        domain={[0, 100]}
-                        unit=" packets"
-                      />
-                    ) : (
-                      <div className="flex flex-col items-center space-y-1">
-                        <p className="text-black">Metric not supported</p>
-                      </div>
-                    )}
-                  </div>
-                </GridCard>
+            <div className="space-y-8">
+              {/* Connection Group */}
+              <div className="space-y-3">
+                <SettingsSectionHeader
+                  title="Connection"
+                  description="The connection between the client and the JetKVM."
+                />
+                <Metric
+                  title="Round-Trip Time"
+                  description="Round-trip time for the active ICE candidate pair between peers."
+                  stream={iceCandidatePairStats}
+                  gate={inboundVideoRtpStats}
+                  metric="currentRoundTripTime"
+                  map={x => ({
+                    date: x.date,
+                    stat: x.stat ? Math.round((x.stat as number) * 1000) : null,
+                  })}
+                  domain={[0, 600]}
+                  unit=" ms"
+                />
               </div>
-              <div className="space-y-2">
-                <div>
-                  <h2 className="text-lg font-semibold text-black dark:text-white">
-                    Round-Trip Time
-                  </h2>
-                  <p className="text-sm text-slate-700 dark:text-slate-300">
-                    Time taken for data to travel from source to destination and back
-                  </p>
-                </div>
-                <GridCard>
-                  <div className="flex h-[127px] w-full items-center justify-center text-sm text-slate-500">
-                    {inboundRtpStats.size === 0 ? (
-                      <div className="flex flex-col items-center space-y-1">
-                        <p className="text-slate-700">Waiting for data...</p>
-                      </div>
-                    ) : isMetricSupported(candidatePairStats, "currentRoundTripTime") ? (
-                      <StatChart
-                        data={createChartArray(
-                          candidatePairStats,
-                          "currentRoundTripTime",
-                        ).map(x => {
-                          return {
-                            date: x.date,
-                            stat: x.stat ? Math.round(x.stat * 1000) : null,
-                          };
-                        })}
-                        domain={[0, 600]}
-                        unit=" ms"
-                      />
-                    ) : (
-                      <div className="flex flex-col items-center space-y-1">
-                        <p className="text-black">Metric not supported</p>
-                      </div>
-                    )}
-                  </div>
-                </GridCard>
-              </div>
-              <div className="space-y-2">
-                <div>
-                  <h2 className="text-lg font-semibold text-black dark:text-white">
-                    Jitter
-                  </h2>
-                  <p className="text-sm text-slate-700 dark:text-slate-300">
-                    Variation in packet delay, affecting video smoothness.{" "}
-                  </p>
-                </div>
-                <GridCard>
-                  <div className="flex h-[127px] w-full items-center justify-center text-sm text-slate-500">
-                    {inboundRtpStats.size === 0 ? (
-                      <div className="flex flex-col items-center space-y-1">
-                        <p className="text-slate-700">Waiting for data...</p>
-                      </div>
-                    ) : (
-                      <StatChart
-                        data={createChartArray(inboundRtpStats, "jitter").map(x => {
-                          return {
-                            date: x.date,
-                            stat: x.stat ? Math.round(x.stat * 1000) : null,
-                          };
-                        })}
-                        domain={[0, 300]}
-                        unit=" ms"
-                      />
-                    )}
-                  </div>
-                </GridCard>
-              </div>
-              <div className="space-y-2">
-                <div>
-                  <h2 className="text-lg font-semibold text-black dark:text-white">
-                    Frames per second
-                  </h2>
-                  <p className="text-sm text-slate-700 dark:text-slate-300">
-                    Number of video frames displayed per second.
-                  </p>
-                </div>
-                <GridCard>
-                  <div className="flex h-[127px] w-full items-center justify-center text-sm text-slate-500">
-                    {inboundRtpStats.size === 0 ? (
-                      <div className="flex flex-col items-center space-y-1">
-                        <p className="text-slate-700">Waiting for data...</p>
-                      </div>
-                    ) : (
-                      <StatChart
-                        data={createChartArray(inboundRtpStats, "framesPerSecond").map(
-                          x => {
-                            return {
-                              date: x.date,
-                              stat: x.stat ? x.stat : null,
-                            };
-                          },
-                        )}
-                        domain={[0, 80]}
-                        unit=" fps"
-                      />
-                    )}
-                  </div>
-                </GridCard>
+
+              {/* Video Group */}
+              <div className="space-y-3">
+                <SettingsSectionHeader
+                  title="Video"
+                  description="The video stream from the JetKVM to the client."
+                />
+
+                {/* RTP Jitter */}
+                <Metric
+                  title="Network Stability"
+                  badge="Jitter"
+                  badgeTheme="light"
+                  description="How steady the flow of inbound video packets is across the network."
+                  stream={inboundVideoRtpStats}
+                  metric="jitter"
+                  map={x => ({
+                    date: x.date,
+                    stat: x.stat ? Math.round((x.stat as number) * 1000) : null,
+                  })}
+                  domain={[0, 10]}
+                  unit=" ms"
+                />
+
+                {/* Playback Delay */}
+                <Metric
+                  title="Playback Delay"
+                  description="Delay added by the jitter buffer to smooth playback when frames arrive unevenly."
+                  badge="Jitter Buffer Avg. Delay"
+                  badgeTheme="light"
+                  data={jitterBufferAvgDelayData}
+                  gate={inboundVideoRtpStats}
+                  supported={
+                    isMetricSupported(inboundVideoRtpStats, "jitterBufferDelay") &&
+                    isMetricSupported(inboundVideoRtpStats, "jitterBufferEmittedCount")
+                  }
+                  domain={[0, 30]}
+                  unit=" ms"
+                  referenceValue={referenceValue}
+                />
+
+                {/* Packets Lost */}
+                <Metric
+                  title="Packets Lost"
+                  description="Count of lost inbound video RTP packets."
+                  stream={inboundVideoRtpStats}
+                  metric="packetsLost"
+                  domain={[0, 100]}
+                  unit=" packets"
+                />
+
+                {/* Frames Per Second */}
+                <Metric
+                  title="Frames per second"
+                  description="Number of inbound video frames displayed per second."
+                  stream={inboundVideoRtpStats}
+                  metric="framesPerSecond"
+                  domain={[0, 80]}
+                  unit=" fps"
+                />
               </div>
             </div>
           )}