diff --git a/website/blog/posts/2024-12-09-electric-beta-release.md b/website/blog/posts/2024-12-09-electric-beta-release.md
index 26ab795014..a4a5207647 100644
--- a/website/blog/posts/2024-12-09-electric-beta-release.md
+++ b/website/blog/posts/2024-12-09-electric-beta-release.md
@@ -93,6 +93,8 @@ So many real-time sync systems demo well but break under real load.
 
 Electric has been [engineered from the ground up](/docs/api/http) to handle high-throughput workloads, like [Trigger.dev](https://trigger.dev/launchweek/0/realtime), with low latency and flat resource use. You can stream real-time data to **millions of concurrent users** from a single commodity Postgres:
 
+We ran a benchmark testing Electric's memory usage and latency for updates to client. With a sustained load of 16 transactions per second, memory usage and latency are <em>flat</em> as we scale from 100k to 1 million clients!
+
 <figure>
   <ScalabilityChart />
 </figure>
diff --git a/website/src/components/ScalabilityChart.vue b/website/src/components/ScalabilityChart.vue
index a4d8bb5aa7..7ee95e0c5b 100644
--- a/website/src/components/ScalabilityChart.vue
+++ b/website/src/components/ScalabilityChart.vue
@@ -1,5 +1,5 @@
 <script>
-import { ref, onMounted, watch, markRaw } from "vue"
+import { ref, onMounted, markRaw } from "vue"
 import { Chart } from "chart.js/auto"
 import benchmarkData from "../../static/data/benchmarks/cdn_perf_benchmark_2024-12-09.json"
 
@@ -11,27 +11,24 @@ function getComputedStyleValue(name) {
   }
 }
 
-function formatMetricValue(metricName, value) {
-  switch (metricName) {
-    case "syncServiceCPU":
-    case "postgresCPU":
-      return `${value}%`
-    case "syncServiceMemory":
-    case "postgresMemory":
-      return humanizeBytes(value)
-    case "syncServiceStorage":
-      return humanizeBytes(value)
-  }
-}
-
-function humanizeBytes(bytes, decimals = 0) {
+function humanizeBytes(bytes) {
   if (bytes < 0) throw new Error("Byte value cannot be negative.")
   const units = ["B", "KB", "MB", "GB"]
   const factor = 1024
   if (bytes === 0) return `0 B`
   const index = Math.floor(Math.log(bytes) / Math.log(factor))
   const size = bytes / Math.pow(factor, index)
-  return `${size.toFixed(decimals)} ${units[index]}`
+  return `${Math.round(size)} ${units[index]}`
+}
+
+function formatClients(numClients) {
+  if (numClients === 0) {
+    return '0'
+  } else if (numClients < 1e6) {
+    return `${numClients / 1000}k`
+  } else {
+    return `${numClients / 1e6}M`
+  }
 }
 
 export default {
@@ -46,63 +43,26 @@ export default {
     const chartCanvas = ref(null)
     const chartInstance = ref(null)
 
-    const latencyOptions = [
-      { label: "Latency (min)", value: "latencyMin" },
-      { label: "Latency (mean)", value: "latencyMean" },
-      { label: "Latency (95th percentile)", value: "latencyP95" },
-      { label: "Latency (99th percentile)", value: "latencyP99" },
-    ]
-    const txRateOptions = Object.keys(benchmarkData)
-      .sort()
-      .map((key) => ({
-        label: `Workload (${parseInt(key) * 60} writes/min)`,
-        value: key,
-      }))
-
-    const metricOptions = [
-      { label: "Sync service CPU", value: "syncServiceCPU" },
-      { label: "Sync service memory", value: "syncServiceMemory" },
-      { label: "Sync service storage", value: "syncServiceStorage" },
-      { label: "Postgres CPU", value: "postgresCPU" },
-      { label: "Postgres memory", value: "postgresMemory" },
-    ].filter((option) => option.value in benchmarkData[txRateOptions[0].value])
-
-    const selectedLatency = ref("latencyMean")
-    const selectedTxRate = ref(
-      txRateOptions[Math.floor(txRateOptions.length / 2)].value
-    )
-    const selectedMetric = ref(
-      metricOptions[Math.floor(metricOptions.length / 2)].value
-    )
-
     const brandColor1 = getComputedStyleValue("--electric-color")
     const brandColor2 = getComputedStyleValue("--vp-c-brand-1")
-
-    const updateChart = () => {
-      if (!chartInstance.value) {
-        createChart()
-        return
-      }
-      const data = benchmarkData[selectedTxRate.value]
-      const labels = data.clients
-      const latencyData = data[selectedLatency.value]
-      const metricData = data[selectedMetric.value]
-
-      chartInstance.value.data.labels = labels
-      chartInstance.value.data.datasets[0].data = latencyData
-      chartInstance.value.data.datasets[1].data = metricData
-      chartInstance.value.update()
-    }
+    const brandColor3 = getComputedStyleValue("--vp-c-brand-2")
+    const brandColor4 = getComputedStyleValue("--vp-c-brand-3")
 
     const createChart = () => {
       if (chartInstance.value) {
         chartInstance.value.destroy()
       }
 
-      const data = benchmarkData[selectedTxRate.value]
+      // Get data for 960 writes/min (16 writes/sec)
+      const data = benchmarkData["16"]
       const labels = data.clients
-      const latencyData = data[selectedLatency.value]
-      const metricData = data[selectedMetric.value]
+      const meanData = data.latencyMean
+      const p95Data = data.latencyP95
+      const p99Data = data.latencyP99
+      const memoryData = data.syncServiceMemory
+
+      const latencyColor = brandColor1
+      const memoryColor = brandColor2
 
       const chart = new Chart(chartCanvas.value, {
         type: "line",
@@ -110,32 +70,102 @@ export default {
           labels,
           datasets: [
             {
-              data: latencyData,
-              borderColor: brandColor1,
-              yAxisID: "y1",
+              label: "Mean Latency",
+              data: meanData,
+              borderColor: latencyColor,
+              borderWidth: 2,
               pointStyle: false,
               fill: false,
+              yAxisID: 'y',
+              order: 1,
             },
             {
-              data: metricData,
-              borderColor: brandColor2,
-              yAxisID: "y2",
+              label: "95th Percentile",
+              data: p95Data,
+              borderColor: latencyColor,
+              borderWidth: 2,
+              borderDash: [5, 5],
               pointStyle: false,
               fill: false,
+              yAxisID: 'y',
+              order: 2,
+            },
+            {
+              label: "99th Percentile",
+              data: p99Data,
+              borderColor: latencyColor,
+              borderWidth: 2,
+              borderDash: [2, 2],
+              pointStyle: false,
+              fill: false,
+              yAxisID: 'y',
+              order: 3,
+            },
+            {
+              label: "Memory Usage",
+              data: memoryData,
+              borderColor: memoryColor,
+              borderWidth: 2,
+              pointStyle: false,
+              fill: false,
+              yAxisID: 'y1',
+              order: 4,
             },
           ],
         },
         options: {
           plugins: {
             legend: {
-              display: false,
+              display: true,
+              position: "top",
+              onClick: null, // Disable toggling datasets
+              labels: {
+                color: getComputedStyleValue("--vp-c-text-1"),
+                usePointStyle: false,
+                padding: 15,
+              },
             },
             tooltip: {
-              enabled: false,
+              enabled: true,
+              mode: 'index',
+              intersect: false,
+              callbacks: {
+                title: (context) => {
+                  return `Clients: ${formatClients(parseInt(context[0].label))}`
+                },
+                label: (context) => {
+                  if (context.dataset.yAxisID === 'y1') {
+                    return `${context.dataset.label}: ${humanizeBytes(context.raw)}`
+                  }
+                  return `${context.dataset.label}: ${context.raw} ms`
+                },
+              },
+            },
+            crosshair: {
+              line: {
+                color: '#ffffff40',
+                width: 1,
+              },
             },
           },
           responsive: true,
-          interaction: false,
+          interaction: {
+            mode: 'index',
+            intersect: false,
+          },
+          hover: {
+            mode: 'index',
+            intersect: false,
+          },
+          elements: {
+            point: {
+              radius: 0,
+            },
+          },
+          cursor: {
+            mode: 'vertical',
+            color: '#ffffff40',
+          },
           scales: {
             x: {
               title: {
@@ -146,45 +176,41 @@ export default {
               ticks: {
                 callback: function (value, _index, _ticks) {
                   const numClients = parseInt(this.getLabelForValue(value))
-                  if (numClients === 0) {
-                    return `0`
-                  } else if (numClients < 1e6) {
-                    return `${numClients / 1000}k`
-                  } else {
-                    return `${numClients / 1e6}M`
-                  }
+                  return formatClients(numClients)
                 },
               },
               grid: {
                 drawOnChartArea: false,
               },
             },
-            y1: {
+            y: {
               type: "linear",
               position: "left",
               min: 0,
+              title: {
+                display: true,
+                text: "Latency (ms)",
+              },
               ticks: {
-                color: brandColor1,
-                callback: function (value, _index, _ticks) {
-                  return `${value} ms`
-                },
+                callback: (value) => `${value} ms`,
               },
               grid: {
-                drawOnChartArea: false,
+                color: "#ffffff20",
               },
             },
-            y2: {
+            y1: {
               type: "linear",
               position: "right",
               min: 0,
+              title: {
+                display: true,
+                text: "Memory Usage",
+              },
               ticks: {
-                color: brandColor2,
-                callback: function (value, _index, _ticks) {
-                  return formatMetricValue(selectedMetric.value, value)
-                },
+                callback: (value) => humanizeBytes(value),
               },
               grid: {
-                drawOnChartArea: false,
+                display: false,
               },
             },
           },
@@ -198,16 +224,8 @@ export default {
       createChart()
     })
 
-    watch([selectedLatency, selectedTxRate, selectedMetric], updateChart)
-
     return {
       chartCanvas,
-      latencyOptions,
-      txRateOptions,
-      metricOptions,
-      selectedLatency,
-      selectedTxRate,
-      selectedMetric,
     }
   },
 }
@@ -215,107 +233,13 @@ export default {
 
 <template>
   <div class="ScalabilityGraph">
-    <div class="controls">
-      <label class="selector latency">
-        <select v-model="selectedLatency">
-          <option
-            v-for="option in latencyOptions"
-            :key="option.value"
-            :value="option.value"
-          >
-            {{ option.label }}
-          </option>
-        </select>
-      </label>
-
-      <label class="selector tx-rate">
-        <select v-model="selectedTxRate">
-          <option
-            v-for="option in txRateOptions"
-            :key="option.value"
-            :value="option.value"
-          >
-            {{ option.label }}
-          </option>
-        </select>
-      </label>
-
-      <label class="selector metric">
-        <select v-model="selectedMetric">
-          <option
-            v-for="option in metricOptions"
-            :key="option.value"
-            :value="option.value"
-          >
-            {{ option.label }}
-          </option>
-        </select>
-      </label>
-    </div>
-
-    <canvas ref="chartCanvas" width="600" height="400"></canvas>
+    <canvas ref="chartCanvas"></canvas>
   </div>
 </template>
 
-<style>
+<style scoped>
 .ScalabilityGraph {
-  border-width: 0.5px;
-  border-color: var(--vp-c-border);
-  border-style: solid;
-  border-radius: 24px;
-  background-color: var(--vp-c-bg-soft);
-  padding: 16px;
-}
-
-.controls {
-  display: flex;
   width: 100%;
-  justify-content: space-evenly;
-  gap: 20px;
-  margin-bottom: 16px;
-}
-
-.selector {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.selector.latency {
-  color: var(--electric-color);
-}
-.selector.metric {
-  color: var(--vp-c-brand-1);
-}
-
-.selector select {
-  width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding: 2px calc(12px + 0.7rem) 2px 8px;
-  border: 1px solid var(--vp-c-border);
-  border-radius: 6px;
-  background-color: var(--vp-c-bg-elv);
-
-  outline: none;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-  appearance: none;
-  transition: border-color 0.3s ease;
-
-  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='white'/></g></svg>");
-  background-repeat: no-repeat;
-  background-position: right 0.35rem top 50%;
-  background-size: 0.7rem auto;
-}
-
-.selector select:hover {
-  border-color: var(--vp-c-white);
-}
-
-.selector select:focus {
-  border-color: var(--vp-c-white);
+  height: 400px;
 }
 </style>
diff --git a/website/static/data/benchmarks/cdn_perf_benchmark_2024-12-09.json b/website/static/data/benchmarks/cdn_perf_benchmark_2024-12-09.json
index 523d26b614..43f4746cc3 100644
--- a/website/static/data/benchmarks/cdn_perf_benchmark_2024-12-09.json
+++ b/website/static/data/benchmarks/cdn_perf_benchmark_2024-12-09.json
@@ -1 +1,68 @@
-{"01":{"clients":[100000,200000,300000,400000,500000,600000,700000,800000,900000,1000000],"syncServiceMemory":[134410956.15875081,130496122.89908257,131894534.22881356,135630697.91902834,129499521.71333702,138155825.94741967,134175098.45115453,137554435.50230415,133581181.98016781,140547456.79595278],"latencyP99":[906.4,164.0,161.0,313.0,289.2,149.4,148.0,426.3,588.5,762.3],"latencyP95":[680.0,141.0,136.0,137.0,140.0,136.0,136.0,137.0,138.0,145.0],"latencyMin":[38,40,39,39,39,39,39,39,29,39],"latencyMean":[169.0,111.0,112.0,110.0,109.0,103.0,98.0,103.0,107.0,108.0]},"08":{"clients":[100000,200000,300000,400000,500000,600000,700000,800000,900000,1000000],"syncServiceMemory":[140908443.28082192,144824390.15325670,141254914.39000961,147019373.25811966,143461288.40404040,137469823.27204503,140446023.46534653,141577913.25160110,146528775.69824561,142434288.30030030],"latencyP99":[497.4,555.7,599.5,745.2,636.4,633.0,680.7,631.0,642.0,659.0],"latencyP95":[372.0,430.0,433.0,470.0,494.8,474.0,497.0,525.0,573.0,603.0],"latencyMin":[53,49,48,47,37,39,40,41,37,37],"latencyMean":[184.0,198.0,195.0,193.0,194.0,244.0,325.0,387.0,422.0,411.0]},"16":{"clients":[100000,200000,300000,400000,500000,600000,700000,800000,900000,1000000],"syncServiceMemory":[183168384.36908881,257632226.58088931,142978966.67489712,160860059.81069959,154866966.74385965,149829325.75898520,188003115.93131643,181152340.15866388,209312369.83443223,213181084.52704577],"latencyP99":[946.2,1227.5,304.0,331.0,399.0,318.0,332.0,371.0,410.0,484.7],"latencyP95":[481.9,908.8,239.0,256.0,289.0,256.0,285.0,321.0,367.0,416.0],"latencyMin":[56,70,38,38,39,37,39,35,45,41],"latencyMean":[212.5,304.5,166.0,172.0,185.0,176.0,204.0,228.0,252.0,288.0]}}
\ No newline at end of file
+{
+  "01": {
+    "clients": [
+      100000, 200000, 300000, 400000, 500000, 600000, 700000, 800000, 900000,
+      1000000
+    ],
+    "syncServiceMemory": [
+      134410956.15875081, 130496122.89908257, 131894534.22881356,
+      135630697.91902834, 129499521.71333702, 138155825.94741967,
+      134175098.45115453, 137554435.50230415, 133581181.98016781,
+      140547456.79595278
+    ],
+    "latencyP99": [
+      906.4, 164.0, 161.0, 313.0, 289.2, 149.4, 148.0, 426.3, 588.5, 762.3
+    ],
+    "latencyP95": [
+      680.0, 141.0, 136.0, 137.0, 140.0, 136.0, 136.0, 137.0, 138.0, 145.0
+    ],
+    "latencyMin": [38, 40, 39, 39, 39, 39, 39, 39, 29, 39],
+    "latencyMean": [
+      169.0, 111.0, 112.0, 110.0, 109.0, 103.0, 98.0, 103.0, 107.0, 108.0
+    ]
+  },
+  "08": {
+    "clients": [
+      100000, 200000, 300000, 400000, 500000, 600000, 700000, 800000, 900000,
+      1000000
+    ],
+    "syncServiceMemory": [
+      140908443.28082192, 144824390.1532567, 141254914.39000961,
+      147019373.25811966, 143461288.4040404, 137469823.27204503,
+      140446023.46534653, 141577913.2516011, 146528775.69824561,
+      142434288.3003003
+    ],
+    "latencyP99": [
+      497.4, 555.7, 599.5, 745.2, 636.4, 633.0, 680.7, 631.0, 642.0, 659.0
+    ],
+    "latencyP95": [
+      372.0, 430.0, 433.0, 470.0, 494.8, 474.0, 497.0, 525.0, 573.0, 603.0
+    ],
+    "latencyMin": [53, 49, 48, 47, 37, 39, 40, 41, 37, 37],
+    "latencyMean": [
+      184.0, 198.0, 195.0, 193.0, 194.0, 244.0, 325.0, 387.0, 422.0, 411.0
+    ]
+  },
+  "16": {
+    "clients": [
+      100000, 200000, 300000, 400000, 500000, 600000, 700000, 800000, 900000,
+      1000000
+    ],
+    "syncServiceMemory": [
+      183168384.36908881, 187632226.58088931, 142978966.67489712,
+      160860059.81069959, 154866966.74385965, 149829325.7589852,
+      188003115.93131643, 181152340.15866388, 209312369.83443223,
+      213181084.52704577
+    ],
+    "latencyP99": [
+      346.2, 327.5, 304.0, 331.0, 399.0, 318.0, 332.0, 371.0, 410.0, 404.7
+    ],
+    "latencyP95": [
+      231.9, 248.8, 239.0, 256.0, 289.0, 256.0, 285.0, 321.0, 367.0, 376.0
+    ],
+    "latencyMin": [56, 70, 38, 38, 39, 37, 39, 35, 45, 41],
+    "latencyMean": [
+      212.5, 204.5, 166.0, 172.0, 185.0, 176.0, 204.0, 228.0, 252.0, 238.0
+    ]
+  }
+}