IDK, it's working and we're moving on

frontend/src/pages/Home.jsx

@@ -144,6 +144,11 @@ function Home() {
                             ⏭️ Skipped
                           </span>
                         )}
+                        {game.room_code && (
+                          <span className="inline-flex items-center gap-1 text-xs bg-indigo-600 dark:bg-indigo-700 text-white px-2 py-1 rounded font-mono font-bold">
+                            🎮 {game.room_code}
+                          </span>
+                        )}
                         <PopularityBadge 
                           upvotes={game.upvotes || 0}
                           downvotes={game.downvotes || 0}

frontend/src/pages/Picker.jsx

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext';
 import api from '../api/axios';
 import GamePoolModal from '../components/GamePoolModal';
+import RoomCodeModal from '../components/RoomCodeModal';
 import { formatLocalTime } from '../utils/dateUtils';
 import PopularityBadge from '../components/PopularityBadge';
 
@@ -41,6 +42,10 @@ function Picker() {
   
   // Exclude previously played games
   const [excludePlayedGames, setExcludePlayedGames] = useState(false);
+  
+  // Room code modal
+  const [showRoomCodeModal, setShowRoomCodeModal] = useState(false);
+  const [pendingGameAction, setPendingGameAction] = useState(null);
 
   const checkActiveSession = useCallback(async () => {
     try {
@@ -194,56 +199,77 @@ function Picker() {
   const handleAcceptGame = async () => {
     if (!selectedGame || !activeSession) return;
 
+    // Show room code modal
+    setPendingGameAction({
+      type: 'accept',
+      game: selectedGame
+    });
+    setShowRoomCodeModal(true);
+  };
+
+  const handleRoomCodeConfirm = async (roomCode) => {
+    if (!pendingGameAction || !activeSession) return;
+
     try {
-      await api.post(`/sessions/${activeSession.id}/games`, {
-        game_id: selectedGame.id,
-        manually_added: false
-      });
+      const { type, game, gameId } = pendingGameAction;
+
+      if (type === 'accept' || type === 'version') {
+        await api.post(`/sessions/${activeSession.id}/games`, {
+          game_id: gameId || game.id,
+          manually_added: false,
+          room_code: roomCode
+        });
+        setSelectedGame(null);
+      } else if (type === 'manual') {
+        await api.post(`/sessions/${activeSession.id}/games`, {
+          game_id: gameId,
+          manually_added: true,
+          room_code: roomCode
+        });
+        setManualGameId('');
+        setShowManualSelect(false);
+      }
 
       // Trigger games list refresh
       setGamesUpdateTrigger(prev => prev + 1);
-      setSelectedGame(null);
       setError('');
     } catch (err) {
       setError('Failed to add game to session');
+    } finally {
+      setShowRoomCodeModal(false);
+      setPendingGameAction(null);
     }
   };
 
+  const handleRoomCodeCancel = () => {
+    setShowRoomCodeModal(false);
+    setPendingGameAction(null);
+  };
+
   const handleAddManualGame = async () => {
     if (!manualGameId || !activeSession) return;
 
-    try {
-      await api.post(`/sessions/${activeSession.id}/games`, {
-        game_id: parseInt(manualGameId),
-        manually_added: true
-      });
-
-      // Trigger games list refresh
-      setGamesUpdateTrigger(prev => prev + 1);
-      setManualGameId('');
-      setShowManualSelect(false);
-      setError('');
-    } catch (err) {
-      setError('Failed to add game to session');
-    }
+    // Show room code modal
+    const game = allGames.find(g => g.id === parseInt(manualGameId));
+    setPendingGameAction({
+      type: 'manual',
+      gameId: parseInt(manualGameId),
+      game: game
+    });
+    setShowRoomCodeModal(true);
   };
 
   const handleSelectVersion = async (gameId) => {
     if (!activeSession) return;
 
-    try {
-      await api.post(`/sessions/${activeSession.id}/games`, {
-        game_id: gameId,
-        manually_added: false
-      });
-
-      // Trigger games list refresh
-      setGamesUpdateTrigger(prev => prev + 1);
-      setSelectedGame(null);
-      setError('');
-    } catch (err) {
-      setError('Failed to add game to session');
-    }
+    // Show room code modal
+    const game = allGames.find(g => g.id === gameId);
+    setPendingGameAction({
+      type: 'version',
+      gameId: gameId,
+      game: game
+    });
+    setShowRoomCodeModal(true);
   };
 
   // Find similar versions of a game based on title patterns
@@ -572,6 +598,14 @@ function Picker() {
           />
         )}
 
+        {/* Room Code Modal */}
+        <RoomCodeModal
+          isOpen={showRoomCodeModal}
+          onConfirm={handleRoomCodeConfirm}
+          onCancel={handleRoomCodeCancel}
+          gameName={pendingGameAction?.game?.title}
+        />
+
         {/* Results Panel */}
         <div className="md:col-span-2">
           {error && (
@@ -730,6 +764,8 @@ function SessionInfo({ sessionId, onGamesUpdate }) {
   const [loading, setLoading] = useState(true);
   const [confirmingRemove, setConfirmingRemove] = useState(null);
   const [showPopularity, setShowPopularity] = useState(true);
+  const [editingRoomCode, setEditingRoomCode] = useState(null);
+  const [newRoomCode, setNewRoomCode] = useState('');
 
   const loadGames = useCallback(async () => {
     try {
@@ -788,6 +824,39 @@ function SessionInfo({ sessionId, onGamesUpdate }) {
     }
   };
 
+  const handleEditRoomCode = (gameId, currentCode) => {
+    setEditingRoomCode(gameId);
+    setNewRoomCode(currentCode || '');
+  };
+
+  const handleRoomCodeChange = (e) => {
+    const value = e.target.value.toUpperCase();
+    const filtered = value.replace(/[^A-Z0-9]/g, '').slice(0, 4);
+    setNewRoomCode(filtered);
+  };
+
+  const handleSaveRoomCode = async (gameId) => {
+    if (newRoomCode.length !== 4) {
+      return;
+    }
+
+    try {
+      await api.patch(`/sessions/${sessionId}/games/${gameId}/room-code`, {
+        room_code: newRoomCode
+      });
+      setEditingRoomCode(null);
+      setNewRoomCode('');
+      loadGames(); // Reload to show updated code
+    } catch (err) {
+      console.error('Failed to update room code', err);
+    }
+  };
+
+  const handleCancelEditRoomCode = () => {
+    setEditingRoomCode(null);
+    setNewRoomCode('');
+  };
+
   const getStatusBadge = (status) => {
     if (status === 'playing') {
       return (
@@ -857,6 +926,50 @@ function SessionInfo({ sessionId, onGamesUpdate }) {
                         Manual
                       </span>
                     )}
+                    {game.room_code && (
+                      <div className="flex items-center gap-1">
+                        {editingRoomCode === game.id ? (
+                          <div className="flex items-center gap-1">
+                            <input
+                              type="text"
+                              value={newRoomCode}
+                              onChange={handleRoomCodeChange}
+                              className="w-16 px-2 py-1 text-xs font-mono font-bold text-center border border-indigo-400 dark:border-indigo-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 uppercase focus:outline-none focus:ring-1 focus:ring-indigo-500"
+                              maxLength={4}
+                              autoFocus
+                            />
+                            <button
+                              onClick={() => handleSaveRoomCode(game.id)}
+                              disabled={newRoomCode.length !== 4}
+                              className="text-xs px-2 py-1 bg-green-600 text-white rounded hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed"
+                            >
+                              ✓
+                            </button>
+                            <button
+                              onClick={handleCancelEditRoomCode}
+                              className="text-xs px-2 py-1 bg-gray-500 text-white rounded hover:bg-gray-600"
+                            >
+                              ✕
+                            </button>
+                          </div>
+                        ) : (
+                          <>
+                            <span className="inline-flex items-center gap-1 text-xs bg-indigo-600 dark:bg-indigo-700 text-white px-2 py-1 rounded font-mono font-bold">
+                              🎮 {game.room_code}
+                            </span>
+                            {isAuthenticated && (
+                              <button
+                                onClick={() => handleEditRoomCode(game.id, game.room_code)}
+                                className="text-xs text-gray-500 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400"
+                                title="Edit room code"
+                              >
+                                ✏️
+                              </button>
+                            )}
+                          </>
+                        )}
+                      </div>
+                    )}
                     {showPopularity && (
                       <PopularityBadge 
                         upvotes={game.upvotes || 0}