diff --git a/js/components/src/components/dashboard/information-widget.tsx b/js/components/src/components/dashboard/information-widget.tsx
index f5cb03a88..8f0ae1dff 100644
--- a/js/components/src/components/dashboard/information-widget.tsx
+++ b/js/components/src/components/dashboard/information-widget.tsx
@@ -12,6 +12,7 @@ import {
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { LayoutChangeEvent, Text, TouchableOpacity, View } from "react-native";
 import Svg, { Path, Line as SvgLine, Text as SvgText } from "react-native-svg";
+import { useAQState } from "../../hooks";
 import {
   useLivestreamStore,
   useSegment,
@@ -38,7 +39,7 @@ export default function InformationWidget({
   const [bitrateHistory, setBitrateHistory] = useState<number[]>(
     Array.from({ length: BITRATE_HISTORY_LENGTH }, () => 0),
   );
-  const [showViewers, setShowViewers] = useState(false);
+  const [showViewers, setShowViewers] = useAQState("showViewers", false);
   const [componentWidth, setComponentWidth] = useState<number>(220);
   const [componentHeight, setComponentHeight] = useState<number>(400);
   const [streamStartTime, setStreamStartTime] = useState<Date | null>(null);
diff --git a/js/components/src/hooks/index.ts b/js/components/src/hooks/index.ts
index 9d5fedc2f..17621c262 100644
--- a/js/components/src/hooks/index.ts
+++ b/js/components/src/hooks/index.ts
@@ -1,4 +1,5 @@
 // barrel file :)
+export * from "./useAQState";
 export * from "./useAvatars";
 export * from "./useCameraToggle";
 export * from "./useDocumentTitle";
diff --git a/js/components/src/hooks/useAQState.ts b/js/components/src/hooks/useAQState.ts
new file mode 100644
index 000000000..d8d4e8fec
--- /dev/null
+++ b/js/components/src/hooks/useAQState.ts
@@ -0,0 +1,37 @@
+import { useEffect, useState } from "react";
+import storage from "../storage";
+
+export function useAQState<T>(
+  key: string,
+  defaultValue: T,
+): [T, (value: T) => void] {
+  const [state, setState] = useState<T>(defaultValue);
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  useEffect(() => {
+    const loadFromStorage = async () => {
+      try {
+        const stored = await storage.getItem(key);
+        if (stored !== null) {
+          setState(JSON.parse(stored));
+        }
+      } catch (error) {
+        console.error(`Failed to load ${key} from storage:`, error);
+      } finally {
+        setIsLoaded(true);
+      }
+    };
+    loadFromStorage();
+  }, [key]);
+
+  const setStoredState = (value: T) => {
+    setState(value);
+    if (isLoaded) {
+      storage.setItem(key, JSON.stringify(value)).catch((error) => {
+        console.error(`Failed to save ${key} to storage:`, error);
+      });
+    }
+  };
+
+  return [state, setStoredState];
+}