diff --git a/src/components/persist/Netgraph.vue b/src/components/persist/Netgraph.vue
index eda6ff8..a8b9622 100644
--- a/src/components/persist/Netgraph.vue
+++ b/src/components/persist/Netgraph.vue
@@ -25,6 +25,10 @@ const connection = useConnectionStateStore();
                 <td>RX:</td>
                 <td>{{ (ui.netgraph.rx / 1024).toFixed(2) }} Kbps</td>
             </tr>
+            <tr>
+                <td>PPS:</td>
+                <td>{{ ui.netgraph.pps }}</td>
+            </tr>
         </table>
     </section>
 </template>
diff --git a/src/stores/ui.ts b/src/stores/ui.ts
index 5233bee..b2d078e 100644
--- a/src/stores/ui.ts
+++ b/src/stores/ui.ts
@@ -18,6 +18,7 @@ export const useUIStore = useInitializableStore(defineStore('ui', {
                 rtt: 0,
                 tx: 0,
                 rx: 0,
+                pps: 0,
             }
         }
     },
@@ -42,12 +43,13 @@ export const useUIStore = useInitializableStore(defineStore('ui', {
             alt.on('ui:setWatermarkPosition', (idx: number) => {
                 this.watermarkPosition = ['bottomright', 'topright', 'topleft', 'topcenter', 'bottomcenter'][idx] ?? 'bottomright';
             });
-            alt.on('ui:updateNetgraph', (active: boolean, fps: number, rtt: number, tx: number, rx: number) => {
+            alt.on('ui:updateNetgraph', (active: boolean, fps: number, rtt: number, tx: number, rx: number, pps: number) => {
                 this.netgraph.active = active;
                 this.netgraph.fps = fps;
                 this.netgraph.rtt = rtt;
                 this.netgraph.tx = tx;
                 this.netgraph.rx = rx;
+                this.netgraph.pps = pps;
             });
             alt.on('ui:startupProgress', (min: number, max: number) => {
                 if (this.ready) return;