diff --git a/backend/src/state_dump.rs b/backend/src/state_dump.rs
index 62e3d45..e4b24e6 100644
--- a/backend/src/state_dump.rs
+++ b/backend/src/state_dump.rs
@@ -29,6 +29,12 @@ impl InMemoryStats {
     }
 }
 
+#[derive(Eq, PartialEq, Ord, PartialOrd, Serialize, Deserialize)]
+pub struct PublicGameInfo {
+    name: String,
+    num_players: usize,
+}
+
 pub async fn load_dump_file<S: Storage<VersionedGame, E>, E: Send + std::fmt::Debug>(
     logger: Logger,
     backend_storage: S,
@@ -180,8 +186,8 @@ pub async fn dump_state(
 
 pub async fn public_games(
     Extension(backend_storage): Extension<HashMapStorage<VersionedGame>>,
-) -> Result<Json<HashMap<String, GameState>>, &'static str> {
-    let mut public_games: HashMap<String, GameState> = HashMap::new();
+) -> Result<Json<Vec<PublicGameInfo>>, &'static str> {
+    let mut public_games: Vec<PublicGameInfo> = Vec::new();
 
     backend_storage.clone().prune().await;
     let keys = backend_storage
@@ -191,13 +197,17 @@ pub async fn public_games(
         .map_err(|_| "failed to get ongoing games")?;
     for room_name in keys {
         if let Ok(versioned_game) = backend_storage.clone().get(room_name.clone()).await {
-            if versioned_game.game.game_visibility() == GameVisibility::Public {
+            if let GameVisibility::Public = versioned_game.game.game_visibility() {
                 if let Ok(name) = String::from_utf8(room_name.clone()) {
-                    public_games.insert(name, versioned_game.game);
+                    public_games.push(PublicGameInfo{
+                        name,
+                        num_players: versioned_game.game.players().len()
+                    });
                 }
             }
         }
     }
 
+    public_games.sort();
     Ok(Json(public_games))
 }
diff --git a/frontend/src/Initialize.tsx b/frontend/src/Initialize.tsx
index 2a8bb61..dbd02ba 100644
--- a/frontend/src/Initialize.tsx
+++ b/frontend/src/Initialize.tsx
@@ -1057,6 +1057,13 @@ const Initialize = (props: IProps): JSX.Element => {
               },
             });
             break;
+          case "game_visibility":
+            send({
+              Action: {
+                SetGameVisibility: value,
+              },
+            });
+            break;
         }
       }
     }
diff --git a/frontend/src/PublicRoomsPane.tsx b/frontend/src/PublicRoomsPane.tsx
index 9294565..0a40051 100644
--- a/frontend/src/PublicRoomsPane.tsx
+++ b/frontend/src/PublicRoomsPane.tsx
@@ -41,39 +41,7 @@ const PublicRoomsPane = (): JSX.Element => {
       const fetchAsync = async (): Promise<void> => {
         const fetchResult = await fetch("public_games.json");
         const resultJSON = await fetchResult.json();
-        const resultArray = Object.entries(resultJSON);
-
-        // sort by number of players first, then name second
-        resultArray.sort((a: [string, any], b: [string, any]) => {
-          const aKey = a[0];
-          const aValue = a[1];
-          const bKey = b[0];
-          const bValue = b[1];
-
-          if (
-            aValue.Initialize === undefined ||
-            aValue.Initialize.propagated === undefined ||
-            aValue.Initialize.propagated.players === undefined ||
-            bValue.Initialize === undefined ||
-            bValue.Initialize.propagated === undefined ||
-            bValue.Initialize.propagated.players === undefined
-          ) {
-            throw new Error(
-              `failed validation while sorting public rooms between ${aKey} ${bKey}`
-            );
-          }
-
-          const playerDiff =
-            bValue.Initialize.propagated.players.length -
-            aValue.Initialize.propagated.players.length;
-
-          if (playerDiff !== 0) {
-            return playerDiff;
-          }
-
-          return aKey.localeCompare(bKey);
-        });
-        setPublicRooms(resultArray);
+        setPublicRooms(resultJSON);
       };
 
       fetchAsync().catch((e) => {
@@ -106,12 +74,12 @@ const PublicRoomsPane = (): JSX.Element => {
           </LabelCell>
         </Row>
         {publicRooms.length === 0 && <div>No rooms available</div>}
-        {publicRooms.map(([key, value]) => {
+        {publicRooms.map((roomInfo) => {
           return (
             <PublicRoomRow
-              key={key}
-              roomName={key}
-              numPlayers={value.Initialize.propagated.players.length}
+              key={roomInfo.name}
+              roomName={roomInfo.name}
+              numPlayers={roomInfo.num_players}
             />
           );
         })}