diff --git a/frontend/src/components/RoomList.vue b/frontend/src/components/RoomList.vue
index f1f9e548f4760b232796cff0941cfe40fe873763..538fb53f33ec386dd98a97fe02fa6c01fe0b90a6 100644
--- a/frontend/src/components/RoomList.vue
+++ b/frontend/src/components/RoomList.vue
@@ -190,7 +190,7 @@ function handleRoomListUpdated(response) {
   console.log('Is array?', Array.isArray(response));
   console.log('Raw room list response:', JSON.stringify(response, null, 2));
 
-  // 处理两种可能的响应格式
+  // 处理多种可能的响应格式
   let updatedRooms = [];
   if (Array.isArray(response)) {
     // 格式1: 直接返回房间数组
@@ -206,24 +206,28 @@ function handleRoomListUpdated(response) {
     console.log('Room list updated successfully (data.rooms format)');
   } else {
     console.error('Invalid room list response format:', response);
-    // 尝试直接渲染原始响应，用于调试
-    updatedRooms = [response] || [];
+    // 尝试从响应中提取房间数据
+    updatedRooms = [];
   }
 
+  // 过滤掉无效房间数据
+  updatedRooms = updatedRooms.filter(room => room && room.Id !== undefined);
+  console.log(`Filtered to ${updatedRooms.length} valid rooms`);
+
   console.log(`Total rooms received: ${updatedRooms.length}`);
   // 显示前3个房间的详细信息
   if (updatedRooms.length > 0) {
     console.log('First 3 rooms details:');
     updatedRooms.slice(0, 3).forEach((room, index) => {
-      console.log(`Room ${index + 1}:`, room);
-      console.log(`Room ${index + 1} has required fields:`,
-        'id' in room ? '✓ id' : '✗ id',
-        'name' in room ? '✓ name' : '✗ name',
-        'currentPlayers' in room ? '✓ currentPlayers' : '✗ currentPlayers',
-        'maxPlayers' in room ? '✓ maxPlayers' : '✗ maxPlayers',
-        'status' in room ? '✓ status' : '✗ status'
-      );
-    });
+          console.log(`Room ${index + 1}:`, room);
+          console.log(`Room ${index + 1} has required fields:`,
+            'id' in room ? '✓ id' : '✗ id',
+            'name' in room ? '✓ name' : '✗ name',
+            'currentPlayers' in room || 'CurrentPlayers' in room ? '✓ players' : '✗ players',
+            'maxPlayers' in room || 'MaxPlayers' in room ? '✓ maxPlayers' : '✗ maxPlayers',
+            'status' in room ? '✓ status' : '✗ status'
+          );
+        });
   }
 
   // 检查是否有房间数据
@@ -241,10 +245,20 @@ function handleRoomListUpdated(response) {
       });
   }
 
-  // 转换房间状态为中文
+  // 标准化房间数据，处理大小写问题
   updatedRooms = updatedRooms.map(room => ({
     ...room,
-    status: statusMap[room.status] || room.status
+    // 确保id字段存在
+    id: room.Id !== undefined ? room.Id : room.id !== undefined ? room.id : 'unknown-' + Math.random().toString(36).substring(2, 9),
+    // 确保name字段存在并统一大小写
+    name: room.Name !== undefined ? room.Name : room.name !== undefined ? room.name : '未命名房间',
+    // 统一处理玩家数量属性
+    currentPlayers: room.CurrentPlayers !== undefined ? room.CurrentPlayers : room.currentPlayers !== undefined ? room.currentPlayers : 0,
+    maxPlayers: room.MaxPlayers !== undefined ? room.MaxPlayers : room.maxPlayers !== undefined ? room.maxPlayers : 0,
+    // 统一处理观战者数量属性
+    spectatorsCount: room.SpectatorsCount !== undefined ? room.SpectatorsCount : room.spectatorsCount !== undefined ? room.spectatorsCount : 0,
+    // 确保status字段存在并转换为中文
+    status: statusMap[room.Status] || statusMap[room.status] || '未知状态'
   }));
 
   // 调试：查看满员房间数量和状态
@@ -268,15 +282,6 @@ function handleRoomListUpdated(response) {
   }, {});
   console.log('Room status distribution:', statusCounts);
   
-  // 添加调试信息：查看房间初始数据
-  console.log('Initial room data before processing:', updatedRooms);
-  
-  // 确保每个房间都有currentPlayers字段，默认为0
-  updatedRooms = updatedRooms.map(room => ({
-    ...room,
-    currentPlayers: room.CurrentPlayers !== undefined ? room.CurrentPlayers : room.currentPlayers !== undefined ? room.currentPlayers : 0
-  }));
-  
   // 添加调试信息：查看处理后的房间数据
   console.log('Processed room data:', updatedRooms);
   
@@ -463,7 +468,7 @@ function replayGame(roomId) {
 }
 
 .room-card {
-  background-color: white;
+  background-color: var(--color-background-soft);
   border-radius: var(--card-radius);
   box-shadow: var(--card-shadow);
   padding: 1.5rem;
@@ -522,6 +527,12 @@ function replayGame(roomId) {
   margin-bottom: 0.3rem;
 }
 
+.room-spectators {
+  font-size: 0.875rem;
+  color: var(--color-text-light-2);
+  margin-bottom: 0.3rem;
+}
+
 .room-status {
   font-size: 0.75rem;
   padding: 0.25rem 0.75rem;