diff --git a/src/pages/Devices/Devices.tsx b/src/pages/Devices/Devices.tsx
index 67d386fb..f0da16ee 100644
--- a/src/pages/Devices/Devices.tsx
+++ b/src/pages/Devices/Devices.tsx
@@ -89,7 +89,19 @@ const Devices = () => {
 
   useEffect(() => {
     if (graphs && graphsMulti) {
-      setPixelGraphs(Object.keys(virtuals))
+      setPixelGraphs(
+        Object.keys(virtuals)
+          .filter((v) =>
+            showComplex
+              ? v
+              : !(
+                  v.endsWith('-mask') ||
+                  v.endsWith('-foreground') ||
+                  v.endsWith('-background')
+                )
+          )
+          .filter((v) => (showGaps ? v : !v.startsWith('gap-')))
+      )
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [graphs, graphsMulti, setPixelGraphs])
diff --git a/src/pages/Home/DbDevices.tsx b/src/pages/Home/DbDevices.tsx
index 02a7cd67..fb216c1c 100644
--- a/src/pages/Home/DbDevices.tsx
+++ b/src/pages/Home/DbDevices.tsx
@@ -239,9 +239,21 @@ const DbDevices = () => {
 
   useEffect(() => {
     if (graphs && graphsMulti) {
-      setPixelGraphs(Object.keys(virtuals))
+      setPixelGraphs(
+        Object.keys(virtuals)
+          .filter((v) =>
+            showComplex
+              ? v
+              : !(
+                  v.endsWith('-mask') ||
+                  v.endsWith('-foreground') ||
+                  v.endsWith('-background')
+                )
+          )
+          .filter((v) => (showGaps ? v : !v.startsWith('gap-')))
+      )
     }
-  }, [graphs, graphsMulti, setPixelGraphs, virtuals])
+  }, [graphs, graphsMulti, setPixelGraphs, virtuals, showComplex, showGaps])
 
   const handleEvent: GridEventListener<'rowClick'> = (params) =>
     navigate(`/device/${params.row.id}`)
diff --git a/src/utils/Websocket.ts b/src/utils/Websocket.ts
index beb09197..08de83a8 100644
--- a/src/utils/Websocket.ts
+++ b/src/utils/Websocket.ts
@@ -203,6 +203,8 @@ export const HandleWs = () => {
   const setPixelGraphs = useStore((state) => state.setPixelGraphs)
   const graphs = useStore((state) => state.graphs)
   const graphsMulti = useStore((state) => state.graphsMulti)
+  const showComplex = useStore((state) => state.showComplex)
+  const showGaps = useStore((state) => state.showGaps)
   const [wsReady, setWsReady] = useState(false)
 
   useLayoutEffect(() => {
@@ -216,7 +218,19 @@ export const HandleWs = () => {
     if (!graphs || !graphsMulti) {
       setPixelGraphs([])
     } else {
-      setPixelGraphs(Object.keys(virtuals))
+      setPixelGraphs(
+        Object.keys(virtuals)
+          .filter((v) =>
+            showComplex
+              ? v
+              : !(
+                  v.endsWith('-mask') ||
+                  v.endsWith('-foreground') ||
+                  v.endsWith('-background')
+                )
+          )
+          .filter((v) => (showGaps ? v : !v.startsWith('gap-')))
+      )
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [graphs, graphsMulti])