diff --git a/web/src/components/VolumeZones/VolumeZones.jsx b/web/src/components/VolumeZones/VolumeZones.jsx
index 8f05cf747..74f753af3 100644
--- a/web/src/components/VolumeZones/VolumeZones.jsx
+++ b/web/src/components/VolumeZones/VolumeZones.jsx
@@ -1,40 +1,14 @@
 import React from "react";
 import "./VolumesZones.scss";
-import { useStatusStore } from "@/App.jsx";
-import { getSourceZones } from "@/pages/Home/Home";
 import ZoneVolumeSlider from "../ZoneVolumeSlider/ZoneVolumeSlider";
 import GroupVolumeSlider from "../GroupVolumeSlider/GroupVolumeSlider";
 import Card from "../Card/Card";
 
-import { getFittestRep } from "@/utils/GroupZoneFiltering";
-
 import PropTypes from "prop-types";
 
-const VolumeZones = ({ sourceId, open, setAlone }) => {
-    const zones = getSourceZones(
-        sourceId,
-        useStatusStore((s) => s.status.zones)
-    );
-    const groups = getSourceZones(
-        sourceId,
-        useStatusStore((s) => s.status.groups)
-    );
-
-    // compute the best representation of the zones and groups
-    const { zones: zonesLeft, groups: usedGroups } = getFittestRep(zones, groups);
-
-    const groupsLeft = groups.filter(
-        (g) => !usedGroups.map((ug) => ug.id).includes(g.id)
-    );
-
+const VolumeZones = ({ sourceId, open, zones, groups, groupsLeft }) => {
     const groupVolumeSliders = [];
-    // This is a bootleg XOR statement, only works if there is exactly one zone or exactly one group, no more than that and not both
-    if(((usedGroups.length == 1) || (zonesLeft.length == 1)) && !((usedGroups.length > 0) && (zonesLeft.length > 0))){
-      setAlone(true);
-    } else {
-      setAlone(false);
-    }
-    for (const group of usedGroups) {
+    for (const group of groups) {
         groupVolumeSliders.push(
             <Card className="group-vol-card" key={group.id}>
                 <GroupVolumeSlider
@@ -47,7 +21,7 @@ const VolumeZones = ({ sourceId, open, setAlone }) => {
     }
 
     const zoneVolumeSliders = [];
-    zonesLeft.forEach((zone) => {
+    zones.forEach((zone) => {
         zoneVolumeSliders.push(
             <Card className="zone-vol-card" key={zone.id}>
                 <ZoneVolumeSlider zoneId={zone.id} />
@@ -67,7 +41,9 @@ const VolumeZones = ({ sourceId, open, setAlone }) => {
 VolumeZones.propTypes = {
     sourceId: PropTypes.any.isRequired,
     open: PropTypes.bool.isRequired,
-    setAlone: PropTypes.func.isRequired,
+    zones: PropTypes.array.isRequired,
+    groups: PropTypes.array.isRequired,
+    groupsLeft: PropTypes.array.isRequired,
 };
 
 export default VolumeZones;
diff --git a/web/src/pages/Player/Player.jsx b/web/src/pages/Player/Player.jsx
index 9c46ef241..36e8b4ca3 100644
--- a/web/src/pages/Player/Player.jsx
+++ b/web/src/pages/Player/Player.jsx
@@ -12,6 +12,9 @@ import { useState } from "react";
 import VolumeZones from "@/components/VolumeZones/VolumeZones";
 import Card from "@/components/Card/Card";
 import { getSourceInputType } from "@/utils/getSourceInputType";
+import { getSourceZones } from "@/pages/Home/Home";
+
+import { getFittestRep } from "@/utils/GroupZoneFiltering";
 
 const Player = () => {
     const selectedSourceId = usePersistentStore((s) => s.selectedSource);
@@ -24,7 +27,6 @@ const Player = () => {
     );
     const sourceIsInactive = getSourceInputType(selectedSource) === "none";
     const [expanded, setExpanded] = useState(false);
-    const [alone, setAlone] = useState(false);
 
     if (sourceIsInactive) {
         return (
@@ -32,7 +34,25 @@ const Player = () => {
                 <div className="player-stopped-message">No Player Selected!</div>
             </div>
         );
-    }
+    };
+
+    const zones = getSourceZones(
+        selectedSourceId,
+        useStatusStore((s) => s.status.zones)
+    );
+    const groups = getSourceZones(
+        selectedSourceId,
+        useStatusStore((s) => s.status.groups)
+    );
+
+    // compute the best representation of the zones and groups
+    const { zones: zonesLeft, groups: usedGroups } = getFittestRep(zones, groups);
+
+    const groupsLeft = groups.filter(
+        (g) => !usedGroups.map((ug) => ug.id).includes(g.id)
+    );
+    // This is a bootleg XOR statement, only works if there is exactly one zone or exactly one group, no more than that and not both
+    const alone = ((usedGroups.length == 1) || (zonesLeft.length == 1)) && !((usedGroups.length > 0) && (zonesLeft.length > 0));
 
     return (
         <div className="player-outer">
@@ -64,7 +84,7 @@ const Player = () => {
                     )}
                 </IconButton>
             </Card>}
-            <VolumeZones open={(expanded || alone)} setAlone={setAlone} sourceId={selectedSourceId} />
+            <VolumeZones open={(expanded || alone)} sourceId={selectedSourceId} zones={zonesLeft} groups={usedGroups} groupsLeft={groupsLeft} />
         </div>
     );
 };