diff --git a/frontend/src/hooks/useBackendAPI.ts b/frontend/src/hooks/useBackendAPI.ts
index 2e305d6..1bf0ab6 100644
--- a/frontend/src/hooks/useBackendAPI.ts
+++ b/frontend/src/hooks/useBackendAPI.ts
@@ -32,6 +32,7 @@ export function useBackendAPI() {
   const [routesEnabled, setRoutesEnabled] = useState(false);
   const [bridgesEnabled, setBridgesEnabled] = useState(false);
   const [fullStateEnabled, setFullStateEnabled] = useState(false);
+  const [snifferStatusEnabled, setSnifferStatusEnabled] = useState(false);
 
   // common query options once enabled
   const commonOptions = {
diff --git a/frontend/src/pages/Sniffing.tsx b/frontend/src/pages/Sniffing.tsx
index 03e639c..0ea7f50 100644
--- a/frontend/src/pages/Sniffing.tsx
+++ b/frontend/src/pages/Sniffing.tsx
@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
-import { useBackendAPI } from '../hooks/useBackendAPI';
 import { fetchSnifferStatus } from '../api/apiClient';
+import { useBackendAPI } from '../hooks/useBackendAPI';
 
 export default function Sniffing() {
   const {
@@ -14,6 +14,7 @@ export default function Sniffing() {
     refreshInterfaces,
     isCreating,
     isRemoving,
+    snifferStatusQuery,
   } = useBackendAPI();
 
   // fetch on mount (explicit, since queries are disabled by default)
@@ -23,7 +24,7 @@ export default function Sniffing() {
   }, []);
 
   const bridges = bridgesQuery.data ?? [];
-  const snifferStatus = 
+  const snifferStatus = snifferStatusQuery.data;
   return (
     <div className="sniffing-body">
       <h1>Sniffing</h1>